#course-admin__wrapper {
  --view-content-width: 75%;

  position: relative;

  #course-admin__root {
    margin-block-start: 2rem;
    margin-block-end: 4rem;

    > header:not(#course-overview__header) {
      margin-block-start: 4rem;
    }
  }

  /* LOADER */
  .loading-wrapper {
    display: none;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;

    grid-column: 1 / 6;

    .lds-roller {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
      top: calc(50% - 40px);
      left: calc(50% - 40px);

      div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;

        &:after {
          content: "";
          display: block;
          position: absolute;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--color-darkblue--100);
          margin: -4px 0 0 -4px;
        }

        &:nth-child(1) {
          animation-delay: -0.036s;

          &:after {
            top: 63px;
            left: 63px;
          }
        }

        &:nth-child(2) {
          animation-delay: -0.072s;

          &:after {
            top: 68px;
            left: 56px;
          }
        }

        &:nth-child(3) {
          animation-delay: -0.108s;

          &:after {
            top: 71px;
            left: 48px;
          }
        }

        &:nth-child(4) {
          animation-delay: -0.144s;

          &:after {
            top: 72px;
            left: 40px;
          }
        }

        &:nth-child(5) {
          animation-delay: -0.18s;

          &:after {
            top: 71px;
            left: 32px;
          }
        }

        &:nth-child(6) {
          animation-delay: -0.216s;

          &:after {
            top: 68px;
            left: 24px;
          }
        }

        &:nth-child(7) {
          animation-delay: -0.252s;

          &:after {
            top: 63px;
            left: 17px;
          }
        }

        &:nth-child(8) {
          animation-delay: -0.288s;

          &:after {
            top: 56px;
            left: 12px;
          }
        }
      }
    }
  }

  .loading {
    opacity: 0.7;
    pointer-events: none;
  }

  /* MENU LISTS */
  .course-admin__navbar,
  .course-overview__list,
  .course-detail__contact-list {
    list-style-type: none;

    padding-inline-start: 0;
  }

  .course-admin__navbar {
    display: flex;
    gap: 1rem;

    margin-block-end: 2rem;

    .nav__btn {
      display: inline-block;
    }
  }

  /* GENERAL LAYOUT */
  header {
    margin-block-end: 1.75rem;
  }

  .course-admin-btn {
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;

    cursor: pointer;

    font-weight: bold;

    color: var(--color-darkblue--100);
    transition: color ease 0.4s;

    min-width: 5.75rem;
    padding: 0.2rem 0.4rem;
    border-radius: 5px;

    &:hover {
      color: var(--color-lightblue--100);
    }

    &.confirmation {
      background-color: var(--color-darkblue--100);
      color: var(--color-white--100);

      &:hover {
        color: var(--color-white--100);
        background-color: var(--color-lightblue--100);
      }
    }
  }

  fieldset {
    border: none;
    padding: 0;
    margin-block-end: 1rem;

    .contact__info {
      display: flex;
      justify-content: space-between;

      margin-block-end: 0.2rem;

      .input__wrapper {
        flex-basis: 55%;

        input,
        textarea {
          width: 100%;

          border: solid 1px var(--color-darkblue--100);
          border-radius: 5px;
          padding: 0.2rem;
        }

        *[readonly]:not(#contact__info-acceptance_privacy_policy) {
          opacity: 0.75;
        }
      }
    }

    .helper-text {
      font-size: 0.9em;
      font-style: italic;

      text-align: end;

      max-width: 55%;

      margin-inline-start: auto;

      &:first-of-type {
        margin-block-start: 1rem;
      }
      &:last-child {
        margin-block-end: 1rem;
      }
    }
  }

  input.cb-btn--primary {
    margin-block-start: 0.75rem;
    float: right;
  }

  /* COURSE OVERVIEW */
  #course-overview__content {
    margin-block-start: 4rem;

    #course-overview__upcoming {
      margin-block-end: 4rem;
    }

    .course__item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      margin-block-end: 0.75rem;

      .course__title {
        font-weight: bold;
        margin-block-end: 0;
      }

      .course__button-wrapper {
        flex-shrink: 0;

        display: flex;
        gap: 1.75rem;
      }
    }
  }

  /* COURSE DETAIL */
  #course-detail__content {
    .course-detail__btn-wrapper {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      gap: 1.75rem;

      margin-block-end: 0.75rem;
    }

    .course-detail__contact-list {
      max-width: var(--view-content-width);

      padding-block-start: 1rem;
      border-top: solid 2px var(--color-darkblue--100);

      .contact__item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-block-end: 0.75rem;

        .contact__name {
          font-weight: bold;
          margin-block-end: 0;
        }

        .contact__button-wrapper {
          flex-shrink: 0;

          display: flex;
          gap: 1.75rem;
        }
      }
    }
  }

  /* CONTACT DETAIL */
  #contact-detail__content {
    max-width: var(--view-content-width);

    input[type="submit"] {
      visibility: hidden;
    }

    .input__wrapper--radio {
      display: flex;
      gap: 1rem;

      label {
        display: flex;
        justify-content: flex-start;
        gap: 1rem;
      }

      input {
        width: 1rem;
      }
    }

    .contact__info--gender,
    .contact__info--form_of_address {
      margin-block: 0.5rem;
    }
  }

  /* SIGNUP CREATION */
  /* #signup-creation__content {
  } */

  /* EMAIL COMPOSER */
  #email-composer__content {
    .email-composer__form {
      margin-block-start: 0.75rem;

      label {
        font-weight: bold;
      }

      .email-composer__input {
        margin-block-end: 0.2rem;

        .input__wrapper {
          flex-basis: 55%;

          input,
          textarea {
            width: 100%;

            border: solid 1px var(--color-darkblue--100);
            border-radius: 5px;
            padding: 0.2rem;
          }
        }
      }
    }
  }
}