.course-detail {
  background: var(--course-color-light);
  border-radius: 100px 100px 0 0;

  .course-detail-info-box {
    display: flex;
    margin: 100px 0;
    padding: 40px 30px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 50px;
    border: 2px solid var(--course-color-light);
    background: $white;
    gap: 40px;

    h3 {
      color: var(--course-color-dark)
    }

    .course-detail__infos {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;

      @media (min-width: $breakpoint_lg) {
        flex-wrap: nowrap;
      }
      .course-detail__infos-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
      }
    }

    .course-info {
      display: flex;
      flex-direction: column;
      width: 260px;
      gap: 16px;

      .course-badges {
        display: flex;
        gap: 10px;

        .badge {
          color: var(--course-color-dark);
          background: var(--course-color-light);
        }

        .status-semaphore {
          width: 15px;
          background-color: grey;
          height: 15px;
          border-radius: 20px;
        }

        .status-green {
          background-color: $dark_green;
        }

        .status-orange {
          background-color: $dark_orange;
        }

        .status-red {
          background-color: $red;
        }
      }

      .course-title {
        display: flex;
        flex-direction: column;
      }

      .course-instructor {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;

        img {
          width: 60px;
          height: 60px;
          border-radius: 15px;
        }

        .course-instructor__name {
          display: flex;
          flex-direction: column;
        }
      }
    }

    .course-detail__dates {
      display: flex;
      flex-direction: column;
      padding: 20px 20px 30px 20px;
      gap: 20px;
      border-radius: 30px;
      width: available;
      width: -moz-available;
      width: -webkit-fill-available;
      border: 3px solid var(--course-color-light);
      box-shadow: $box-shadow-standard;

      .course-dates {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .course-blocks {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px 100px;

        .disabled {
          opacity: 0.3;
          pointer-events: none;
        }
      }
    }

    .course-detail__footer {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 40px;

      @media (max-width: $breakpoint_sm) {
        button {
          width: 100%;
        }
      }

      @media (min-width: $breakpoint_lg) {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
      }
    }
  }

  &.course-info {
    background: $white;
    border-radius: 0;

    .course-detail-info-box {
      margin: 0;
    }
  }
}