body {
  /* background: #082840; */
  /* background: linear-gradient(135deg, #2a6b96 0%, #082840 100%); */
  background: linear-gradient(135deg, #86b4d3 0%, #c4d2dd 100%);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}

.transition {
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

header {
  background: #134264c1;
  position: sticky;
  top: 0;
  z-index: 2;

  .btn-primary {
    background: #306b8d;
    border: 0;
    white-space: nowrap;
  }

  .seiten-titel {
    background: #306b8d;
    color: #fff;
    b {
      top: 2px;
      position: relative;
    }
  }
}

footer {
  background-color: white;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 10px;
}

h2 {
  /* font-family: Lato !important; */
  text-transform: uppercase !important;
  font-weight: 300;
  font-size: 31px;
  color: #fff;
  margin: 0;

  b {
    font-weight: 900;

    span {
      color: #ef8739;
    }
  }
}

.btn {
  /* border-radius: 0 !important; */
}

.table-head {
  background: #306b8d;
  position: sticky;
  top: 93px;
  z-index: 1;
  border-left: 2px solid #306b8d;
  border-right: 2px solid #306b8d;

  > div {
    border-left: 1px solid #a9a590;

    &:last-child {
      border-right: 1px solid #a9a590;
    }
  }

  .pos {
    width: 58px;
  }
}

.filter {
  background: #306b8d;
  color: #fff;
  position: sticky;
  top: 101px;
  z-index: 5;

  .pos {
    top: 20px;
    position: relative;
  }

  .border-filter {
    border-top: 1px solid #ffffff4a;
    width: 94%;
    margin-left: 87px;
  }

  input[type="text"] {
    width: 90%;
    background: #306b8d;
    border: 1px solid white;
    border-radius: 4px;
    /* color: #8a8a8a; */
    color: #fff;
    text-align: center;

    &::placeholder {
      color: white;
      font-size: 12px;
    }
  }

  .btn-primary {
    background: #306b8d;
    /* border: 0; */
    color: #000;
    white-space: nowrap;
  }
}

.filtershow {
  width: 154px;
}

.custom-checkbox {
  cursor: pointer;
  font-weight: normal;
  color: #306b8d;

  span.text {
    margin: 0 20px 0 5px;
  }

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  .checkmark {
    position: relative;
    height: 26px;
    width: 26px;
    /* background-color: #306b8d; */
    background-color: #fff;
    display: inline-block;
  }

  input:checked + .checkmark {
    background-color: #443024;
  }

  .checkmark::after {
    content: "";
    position: absolute;
    display: none;
  }

  input:checked + .checkmark::after {
    display: block;
  }
  .checkmark::after {
    left: 9px;
    top: 2px;
    width: 9px;
    height: 16px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }
}

/* Verstecke die eigentlichen Radio-Buttons */
.custom-radio {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 15px;

  div {
    margin-left: 8px;
  }

  input {
    position: absolute;
    opacity: 0;
  }

  /* Erstelle einen benutzerdefinierten Radio-Button */
  .radiomark {
    position: relative;
    height: 30px;
    width: 30px;
    background-color: #fff;
    border-radius: 50%; /* Rund wie ein Radio-Button */
    border: 2px solid #ccc;
    display: inline-block;
  }

  /* Verändere die Hintergrundfarbe, wenn das Radio ausgewählt ist */
  input:checked + .radiomark {
    background-color: #fff;
  }

  /* Punkt im Inneren des Radio-Buttons hinzufügen */
  .radiomark::after {
    content: "";
    position: absolute;
    display: none;
  }

  input:checked + .radiomark::after {
    display: block;
  }

  /* Stilisiere den inneren Punkt */
  .radiomark::after {
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #443024;
  }
}

.custom-radio-as-button {
  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
}

/* .neu {
    background: green !important
} */

.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  color: black;
}

.modal-dialog-scrollable .modal-content {
  max-height: 90vh;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-header {
  background: linear-gradient(135deg, #2a6b96 0%, #3a7ba6 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15px 20px;

  .modal-title {
    font-weight: 600;
    font-size: 18px;
    color: #fff;
  }

  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;

    &:hover {
      opacity: 1;
    }
  }
}

.modal-footer {
  background: linear-gradient(135deg, #2a6b96 0%, #3a7ba6 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15px 20px;

  .btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;

    &.btn-primary {
      background: #306b8d;
      border: none;

      &:hover {
        background: #3a7ba6;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    }

    &.btn-secondary {
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }
}

.modal-body:not(.bg-white) {
  background: linear-gradient(135deg, #86b4d3 0%, #c4d2dd 100%);
  color: black;
}

.modal-body {
  /* background: linear-gradient(135deg, #1a4a6b 0%, #2a6b96 50%, #1a4a6b 100%); 
    background: linear-gradient(135deg, #86b4d3 0%, #c4d2dd 100%);*/
  /* background: linear-gradient(135deg, #86b4d3 0%, #c4d2dd 100%); */
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  scroll-behavior: smooth;

  /* Custom scrollbar styling */
  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;

    &:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  }
  .fieldset {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);

    .head {
      font-weight: bold;
      font-size: 16px;
      color: #333;
      /* margin-bottom: 16px; */
      padding-bottom: 10px;
      /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
    }

    input:not([type="checkbox"]),
    textarea {
      background: #f8f9fa;
      color: #333;
      border: 2px solid #306b8d;
      padding: 8px 12px;
      border-radius: 6px;
      width: 100%;
      transition: all 0.3s ease;
      font-size: 14px;

      &:focus {
        background: #fff;
        border-color: #4a9bd8;
        outline: none;
        box-shadow: 0 0 0 3px rgba(74, 155, 216, 0.2);
      }

      &::placeholder {
        color: #6c757d;
      }

      &:disabled {
        background: #e9ecef;
        cursor: not-allowed;
        opacity: 0.7;
      }
    }

    select {
      background: #f8f9fa;
      color: #333;
      border: 2px solid #306b8d;
      padding: 8px 12px;
      border-radius: 6px;
      width: inherit;
      transition: all 0.3s ease;
      font-size: 14px;

      &:focus {
        background: #fff;
        border-color: #4a9bd8;
        outline: none;
        box-shadow: 0 0 0 3px rgba(74, 155, 216, 0.2);
      }

      &::placeholder {
        color: #6c757d;
      }

      &:disabled {
        background: #e9ecef;
        cursor: not-allowed;
        opacity: 0.7;
      }
    }

    select {
      cursor: pointer;

      option {
        background: #fff;
        color: #333;
      }
    }

    label {
      color: black;
      font-weight: 500;
      margin-bottom: 5px;
      display: block;
    }

    .error {
      font-size: 13px;
      color: #ff6b6b;
      margin-top: 5px;
      font-weight: 500;
    }
  }

  .neue-aufgabe-2 .fieldset {
    padding: 2px 20px 6px 20px;

    .head {
      padding-bottom: 2px;
    }
  }

  /* Text color fixes for modal */
  .text-center {
    color: #333;
    font-weight: bold;
  }

  .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  small {
    color: rgba(255, 255, 255, 0.7);
  }

  .alert {
    background: rgba(23, 162, 184, 0.2);
    border: 1px solid rgba(23, 162, 184, 0.5);
    color: #fff;
    border-radius: 6px;
    padding: 12px 16px;

    &.alert-info {
      background: rgba(13, 202, 240, 0.2);
      border-color: rgba(13, 202, 240, 0.5);
      color: #fff;
    }
  }

  /* Contenteditable divs */
  [contenteditable="true"] {
    background: #f8f9fa !important;
    color: #333 !important;
    padding: 8px 12px;
    border: 2px solid #306b8d !important;
    border-radius: 6px;
    min-height: 250px;

    &:focus {
      background: #fff !important;
      border-color: #4a9bd8 !important;
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 155, 216, 0.2);
    }

    &:empty::before {
      content: attr(placeholder);
      color: #6c757d;
    }
  }

  /* Datepicker inputs */
  .datepickerProjekteAufgaben {
    background: #f8f9fa;
    color: #333;
    border: 2px solid #306b8d;
    padding: 8px 12px;
    border-radius: 6px;
    width: 100%;
    text-align: center;

    &:focus {
      background: #fff;
      border-color: #4a9bd8;
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 155, 216, 0.2);
    }
  }

  /* Radio button labels in modal */
  .custom-radio-as-button {
    color: #fff;

    .radiomark {
      background-color: #fff;
      border-color: #306b8d;
    }
  }

  /* Custom checkbox styling */
  .custom-checkbox {
    color: #fff;

    .checkmark {
      background-color: #fff;
    }

    input:checked + .checkmark {
      background-color: #443024;
    }
  }

  /* Button text colors */
  .btn-primary {
    color: #fff;
  }

  /* Ensure all text is visible */
  p,
  div,
  span {
    &:not(input):not(textarea):not(select) {
      color: inherit;
    }
  }
}

/* Stil für den Container des Dropdown-Menüs */
.custom-dropdown {
  position: relative;
  width: 100%;
  font-family: Arial, sans-serif;

  /* Stil für den ausgewählten Bereich */
  .dropdown-selected {
    padding: 8px 12px;
    background-color: #f8f9fa;
    color: #333;
    border: 2px solid #306b8d;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease;

    &:hover {
      background: #fff;
      border-color: #4a9bd8;
    }
  }

  /* Stil für die Dropdown-Liste */
  .dropdown-options {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #306b8d;
    border-top: none;
    display: none; /* Anfangs versteckt */
    max-height: 350px;
    overflow-y: auto;
    z-index: 1;

    li {
      padding: 10px;
      cursor: pointer;

      &:hover {
        background-color: #f1f1f1;
      }
    }
  }

  &.open .dropdown-options {
    display: block;
  }
}

.termin {
  div {
    margin: 0 auto 0 auto;

    border-radius: 5px;
    display: flex;
    flex-direction: column-reverse;
    width: 84px;
    opacity: 0.35;

    &:last-child {
      opacity: 1;
    }

    &:first-child {
      margin-bottom: 0 !important;
    }
    .keintermin {
      text-align: center !important;
    }
  }

  &.red {
    .keintermin {
      margin: -5px 0 5px !important;
    }
    div div {
      margin: 0 auto 10px auto;
      background: red;
      color: #fff;
      padding: 0 5px;
    }
  }

  .keintermin {
    font-weight: normal !important;
    color: #000 !important;
    background: none !important;
    padding: 0 !important;
    text-align: left !important;
    opacity: 0.5 !important;
  }
}

.btn-yellow {
  background: gold !important;
  color: #000 !important;
}

.w-30 {
  width: 30%;
}
.w-70 {
  width: 70%;
}

.ui-datepicker {
  z-index: 5000 !important;
}

.areas {
  display: grid;
  gap: 50px 6%;
  text-align: center;
  width: 100%;

  &.grid3 {
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 1200px) {
      gap: 40px 5%;
    }

    @media (max-width: 1024px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 35px 4%;
    }

    @media (max-width: 750px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 25px;
    }
  }

  &.grid2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 5%;

    @media (max-width: 750px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 25px;
    }
  }

  &.grid1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .area {
    padding: 32px;
    background: #134264ea;
    border-radius: 8px;
    color: white;
    animation-name: login-text-color-animation;
    animation-duration: 60s;
    /* min-height: 290px;
            padding: 20px;
            background: #fff; */

    @media (max-width: 750px) {
      padding: 24px;
    }

    .head {
      font-weight: bold;
      /* border-bottom: 1px solid #d5cfb5; */
      padding-bottom: 10px;
      margin-bottom: 20px;
      text-align: left;
    }
  }
}

.buttons {
  position: relative;

  .btn-primary {
    background: #306b8d;
    border: 0;
    white-space: nowrap;
    position: relative;

    background-color: #ffffff;
    color: #000;
    border: none;
    padding: 0.5em 1.5em;
    position: relative;
    clip-path: polygon(
      0% 0.5em,
      0.5em 0%,
      100% 0,
      100% calc(100% - 0.5em),
      calc(100% - 0.5em) 100%,
      0 100%
    );

    &.disabledlink {
      opacity: 0.5;
      cursor: default;
    }

    .badge {
      position: absolute;
      background: #dc3545;
      top: -10px;
      right: -10px;
      border-radius: 50%;
      padding: 5px;
      font-size: 12px;
      width: 22px;
      height: 22px;
      text-align: center;
    }
  }
  .btn-primary:hover {
    background-color: #3a94c4;
    color: #fff;
  }
  .videoguide {
    position: absolute;
    right: -143px;
    top: 4px;
  }
}

.btn-primary {
  background: #306b8d;
  border: 0;
  white-space: nowrap;
  position: relative;

  &.disabledlink {
    opacity: 0.5;
    cursor: default;
  }

  .badge {
    position: absolute;
    background: #dc3545;
    top: -10px;
    right: -10px;
    border-radius: 50%;
    padding: 5px;
    font-size: 12px;
    width: 22px;
    height: 22px;
    text-align: center;
  }
}
.videoguide {
  position: absolute;
  right: -143px;
  top: 4px;
}

@media (max-width: 750px) {
  .logout.position-absolute {
    position: relative !important;
    width: 150px;
    right: auto !important;
    margin: 0 !important;
    float: right;
    top: 27px !important;
  }
}

.welcome-text {
  font-size: 1.1rem; /* Slightly larger text */
  font-weight: 500; /* Medium weight for better readability */
  color: #fff;
  padding-right: 10px; /* Adds spacing before the logout button */
}

.username {
  font-weight: bold;
  color: #ef8739; /* Bootstrap primary blue */
}

@media (max-width: 768px) {
  .welcome-text {
    font-size: 1rem; /* Slightly smaller on mobile */
  }
}

/* FAQ */

.faq .qmark {
  width: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 25px;
  text-align: center;
  margin-right: 7px;
  border: 2px solid #000;
  color: #000;
  font-size: 15px;
  font-weight: bold;
}

.faq .question {
  flex: 1;
  padding-top: 2px;
}

.faq .faq1 .first-question {
  float: left;
  margin-right: 30px;
}

.faq .question-wrapper {
  padding: 12px 0;
  border-bottom: 1px solid #e3e3e3;
  cursor: pointer;
}

.faq .faq1 {
  padding-top: 6px;
}

.faq-modal h2 {
  font-size: 16px;
  font-weight: bold;
  text-transform: none !important;
  color: #000;
  margin-bottom: 17px;
  border-top: 1px solid #0000004a;
  padding-top: 13px;
}
.faq-modal h2.first {
  border-top: 0;
  padding-top: 0;
}

.faq-modal .modal-title span {
  width: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 25px;
  text-align: center;
  margin-right: 7px;
  border: 2px solid #fff;
  /* color: #fff; */
  font-size: 15px;
  font-weight: bold;
}

.faq-modal .modal-header,
.faq-modal .modal-footer {
  border: 0;
}

#aufgabe-edit-drop-area,
#aufgabe-drop-area {
  background: #f8f9fa !important;
  border: 2px solid #306b8d !important;
}

@media (max-width: 992px) {
  .faq .faq1 {
    padding: 0px;
  }
  .faq .faq1 .first-question {
    float: none;
    margin-right: 0;
    border-bottom: 1px solid #e3e3e3;
    padding-top: 0;
  }

  .faq .question1 {
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 12px;
  }

  .faq .question2 {
    padding: 12px 0;
  }
}

.beschreibung,
.aufgabenbeschreibung,
.word-break {
  word-break: break-word;
  overflow-wrap: anywhere;
}