:root {
  --accent: 103, 61, 221;
  --light-accent: rgb(245, 247, 251);
  --grid-scale: 200px !important;
}

.bg1 {
  background-color: rgb(250, 211, 144, var(--bg-opacity));
}

.bg2 {
  background-color: rgb(248, 194, 145, var(--bg-opacity));
}

.bg3 {
  background-color: rgb(106, 137, 204, var(--bg-opacity));
}

.bg4 {
  background-color: rgb(130, 204, 221, var(--bg-opacity));
}

.bg5 {
  background-color: rgb(184, 233, 148, var(--bg-opacity));
}

.bg6 {
  background-color: rgb(229, 142, 38, var(--bg-opacity));
}

.bg7 {
  background-color: rgb(183, 21, 64, var(--bg-opacity));
}

.bg8 {
  background-color: rgb(12, 36, 97, var(--bg-opacity));
}

.bg9 {
  background-color: rgb(10, 61, 98, var(--bg-opacity));
}

.bg10 {
  background-color: rgb(7, 153, 146, var(--bg-opacity));
}

.form-check-input label,
.form-check-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.form-check-input label:has(input:checked) {
  background: rgba(var(--accent), 0.1);
  color: rgb(var(--accent));
  font-weight: var(--font-medium);
}

.add-certificate-page .group-btn,
.add-course-allocation-page .group-btn,
.excel-import-page .group-btn {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.course-details .right,
.radio-style [type="radio"]:checked+label,
.radio-style [type="radio"]:not(:checked)+label {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

div {
  .form-check-input {
    overflow: hidden;
    border-radius: var(--rounded-sm);
    background: var(--light-accent);
    padding: 0;

    label,
    input {
      margin: 0;
      padding: 3px 8px;
      position: relative;
      cursor: pointer;
      height: 100%;
      min-width: 40px;
      min-height: var(--h-control);
    }

    input {
      position: absolute;
      width: 100%;
      height: 100%;
      inset: 0;
      opacity: 0;
    }

    label {
      border-left: var(--border-width) solid var(--border-color);

      &:first-child {
        border-left: none;
      }
    }
  }
}

.p-0,
.video-control:has(video),
.card:has(.pdf-viewer),
.module-content:has(.course-name-fallback),
.module-content:has(.video-container iframe),
.module-content .text_content p:has(iframe) {
  padding: 0;
}

.grey-800 {
  color: rgba(var(--foreground), 0.6);
}

:is(.text_content, .light-content) img,
.light-content iframe {
  width: 100%;
}

.hidden,
body:has(.pdf-viewer.fullscreen) {
  overflow: hidden;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.z-0 {
  z-index: 0;
}

.edit-header.border:has(.video-control.card),
.edit-header.border:has(.module-content.card) {
  border: none !important;
}

.opacity-6 {
  opacity: .6;
}

.django-ckeditor-widget,
.django-ckeditor-widget #cke_id_text_content {
  width: 100% !important;
}

.count-no {
  --count_no: 20px;
  position: absolute;
  right: 8px;
  width: var(--count_no);
  height: var(--count_no);
  place-items: center;
  background: rgba(var(--foreground), 0.06);
  border-radius: var(--rounded-sm);
  font-size: 12px;
  color: rgba(var(--foreground), 1);
  font-weight: var(--font-semibold);
  text-align: center;
  align-content: center;
}

.courses {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-2);
}

.course-image,
.video-control {
  aspect-ratio: 1.6;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: auto;
}

.course {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--rounded-sm);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.course-content {
  padding: 12px;
  min-height: 140px;
  flex: 1;
}

.course-header b {
  font-weight: var(--font-semibold);
  line-height: 1.3;
  cursor: pointer;
}

.circular-progress-wrapper {
  gap: var(--space-1);
}

.circular-progress {
  --size: 18px;
  --track: rgb(233, 236, 239);
  --fill: rgb(123, 232, 123);
  --progress: 80%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--fill) var(--progress), var(--track) 0);
}

.progress-percent {
  line-height: 0;
  font-size: small;
}

.cp-inline {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: var(--bg-primary);
  border-radius: 9999px;
}

.info {
  font-size: var(--text-sm);
  color: rgba(var(--foreground), 0.6);
  margin-top: 20px;

  .material-symbols-rounded {
    font-size: 18px;
  }
}

.rating {
  gap: 2px;
}

.button-bar {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1;
}

.headings {
  margin-top: -3px;
}

.info-badge {
  border: 1px solid rgba(var(--foreground), 0.2);
  border-radius: var(--rounded-sm);
  font-size: 11px;
  padding: 2px 6px;
  opacity: .4;
}

.course-info {
  font-size: calc(var(--text-sm) - 1px);

  i {
    margin-top: -2px;
    color: rgb(var(--accent));
    font-size: 18px;
  }

  span {
    opacity: 0.7;
  }
}

form:has(.grid3) {
  max-width: none;
}

.error-page {
  max-width: 500px;
  margin: auto;
  text-align: center;

  p {
    opacity: .6;
    font-weight: var(--font-normal);
  }
}

.search-control input[type="search"] {
  width: min(100%, 300px);
}

.edit-header .chips-group {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
}

.video-control {

  iframe,
  video {
    width: 100%;
    object-fit: cover;
    height: 100%;
    object-position: center;
  }
}

.imageThumb {
  width: auto;
  height: 32px;
  border-radius: var(--rounded-sm);
  border: var(--border-width) solid var(--border-color);
  min-width: 50px;
}

.accordion-content {
  transition: var(--transition-collapse);
  overflow: hidden;

  .edit-list-item {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    opacity: 0.9;
    padding: var(--space-2) 0;
  }
}

.toggle-arrow {
  transition: var(--transition-all);
}

.list-item.active .toggle-arrow {
  --toggle: 180deg;
  -webkit-transform: rotate(var(--toggle));
  -ms-transform: rotate(var(--toggle));
  transform: rotate(var(--toggle));
}

.list {
  counter-reset: module-counter;
}

.list-item {
  .counter-list {
    counter-increment: module-counter;

    &::before {
      content: counter(module-counter, decimal-leading-zero) ". ";
      display: inline-block;
      margin-right: 0.4rem;
    }
  }

  &:last-child {
    border-bottom: 0;
  }
}

.review {
  &:last-child {
    border-bottom: 0;
  }
}

.favorite {
  opacity: .2;
}

.star-icon,
.favorite.active {
  color: rgb(var(--accent));
  opacity: 1;
}

.star-icon.star-active,
.favorite {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 !important;
}

.username {
  font-size: var(--text-sm);
  opacity: .6;
}

.r-content {
  padding: 2px 0;
}

.date {
  opacity: .5;
  font-size: 12px;
}

.ul-styling {
  list-style: auto;
  padding-left: 18px;
  margin: 10px 0;

  li {
    margin: 10px 0;
    opacity: 0.9;
  }
}

.video-control:has(video),
.card:has(.pdf-viewer),
.module-content:has(.course-name-fallback),
.p-0,
.module-content:has(.video-container iframe),
.module-content .text_content p:has(iframe) {
  padding: 0;
}

.quiz-page .main {
  height: 100vh;
}

.quiz-form {
  max-width: 600px;
  text-align: center;
  margin: auto;
}

.quiz .progress-bar {
  width: 100% !important;
  opacity: .6;
  margin: 2px 0;
  font-style: italic;
  font-size: var(--text-sm);
}

.form-check-option {
  border: 2px solid rgba(var(--accent), 0.2);
  font-size: 16px;
}

/* Custom Radio Button Styling */
.radio-style {
  [type="radio"] {

    &:checked,
    &:not(:checked) {
      position: absolute;
      left: -9999px;
      opacity: 0;
    }

    &:checked+label,
    &:not(:checked)+label {
      position: relative;
      cursor: pointer;
      text-align: left;
      font-size: 15px;
      line-height: 1.3;
      text-transform: capitalize;

      &::before {
        --radio-before: 22px;
        content: '';
        position: absolute;
        width: var(--radio-before);
        height: var(--radio-before);
        border: 2px solid rgba(var(--accent), 0.2);
        border-radius: 50%;
        background: var(--bg-primary);
        box-sizing: border-box;
      }

      &::after {
        --radio-after: 14px;
        content: '';
        position: absolute;
        width: var(--radio-after);
        height: var(--radio-after);
        background: rgb(var(--accent));
        border-radius: 50%;
        transform: scale(0);
        opacity: 0;
        transition: all 0.2s ease;
        margin: 4px;
      }
    }

    &:checked+label {
      color: rgb(var(--accent));

      &::after {
        opacity: 1;
        transform: scale(1);
      }

      &::before {
        border: 2px solid rgba(var(--accent), 1);
      }
    }
  }

  &:has([type="radio"]:checked) {
    border: 2px solid rgba(var(--accent));
  }
}

.b-none,
.edit-header.border:has(.video-control.card),
.edit-header.border:has(.module-content.card) {
  border: none !important;
}

.filter-bar .fields-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.module-content video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

canvas {
  aspect-ratio: auto;
  width: 100%;
  border-radius: 0 0 10px 10px;
}

.pdf-viewer {
  &.fullscreen {
    position: fixed;
    inset: 0;
    background: rgba(var(--foreground), 0.9);
    text-align: center;
    z-index: 9999;
    overflow: auto;

    .pdf-header {
      position: fixed;
      width: 100%;
      border-radius: 0;
      top: 0;
      left: 0;
    }

    canvas {
      max-width: 1000px;
      margin: 80px 0;
      border-radius: 0;
    }
  }

  &.exitfullscreen {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
  }
}

.pdf-header {
  background: rgba(var(--foreground), 0.8);
  color: var(--bg-primary);

  button {
    background: none;
    color: var(--light-accent);
    outline: none;
    border: none;
    cursor: pointer;
  }

  input {
    margin-left: 10px;
    font-size: inherit;
    font-family: inherit;
    padding: 10px;
    width: 50px;
    text-align: right;
    background-color: rgba(var(--foreground), 0.8);
    outline: none;
    border: none;
    color: var(--bg-primary);

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &[type="number"] {
      -moz-appearance: textfield;
    }
  }
}

.course-details .right {
  max-width: 33%;
}

.fixed-width-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;

  th,
  td {
    word-wrap: break-word;
    padding: 6px;
    text-align: left;
  }
}

.grid3 {
  grid-template-columns: var(--grid-cols-3);
}

.grid-column-auto>div.full {
  grid-column: auto;
}

body table {
  font-weight: inherit;
}

.w-35 {
  width: 35%;
}

.w-15 {
  width: 15%;
}

.course-expired {
  position: relative;

  &::after {
    content: 'Expired!';
    position: absolute;
    color: rgba(var(--danger), 1);
    z-index: 0;
    top: 0;
    left: 0;
    background: rgb(255 224 224);
    padding: 10px;
    font-size: calc(var(--text-sm) - 2px);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
    width: 100%;
  }
}

.count-no:empty,
.count-no.hidden,
.login-page .sidebar,
.signup-page .sidebar,
.change-password-page .sidebar {
  display: none !important;
}

.z-0 {
  z-index: 0;
}

.course-card-body ul li span {
  min-width: 140px;
  opacity: .5;
}

.light-content {

  p,
  li {
    opacity: 0.8;
    word-break: break-word;
    padding-block: 5px;
  }

  ol {
    padding-inline-start: 34px;
    font-size: var(--text-sm);
  }

  p {
    strong {
      font-weight: var(--font-medium);
    }
  }
}

.rich-text {
  p {
    opacity: 0.8;
    word-break: break-word;
    padding-block: 5px;
  }
}

.content-row {
  display: flex;
  align-items: flex-start;
}

.rich-text {
  flex: 1;
}

.rich-text ul,
.light-content ul {
  list-style: disc;
  padding-left: 25px;
  margin-bottom: 15px;
}

.slash {
  opacity: .4;
  font-size: 11px;
}

.opacity-6 {
  opacity: .6;
}

.course-summary-page:has(.error-page) .head-top,
.user-summary-page:has(.error-page) .head-top {
  position: absolute;
  right: 15px;
  top: 25px;
}

.edit-profile-page .fields {
  grid-template-columns: 1fr 1fr;
}

.signup-page .fields {
  grid-template-columns: 1fr 1fr 1fr;
}

.no-image {
  background-size: 50%;
  background-repeat: no-repeat;
}

body .content.external-sharing {
  max-width: 800px;
  margin: auto;
  padding: 20px;
}

.edit-page form,
.share-page form {
  max-width: 400px;
}

.signup-gap-1 {
  gap: var(--space-1);
  justify-content: center;
}

.quiz-btns {
  margin-left: 480px;
}

.drop-target {
  background-color: var(--accent-100);
  border: 2px dashed var(--primary);
}

.module-header {
  font-size: 18px;
}

.module-accordian {
  display: none;
}

.module-right-arrow {
  float: left;
  margin-top: -2px;
}

.password-change {
  margin-bottom: 15px;
}

.course-font-size {
  font-size: 23px;
}

.cert-previews {
  height: 750px;
  width: 100%;
  padding: 1px;
  border: none;
}

.quiz-grouper {
  padding-bottom: 4px;
}

.user-listing {
  height: auto;
}

.rating-opacity {
  opacity: .6;
}

body .rating-font-size {
  font-size: 18px;
}

.otp-header {
  margin-bottom: 15px;
}

.ext-share-btns {
  font-size: 20px;
}

.ext-margin {
  margin-right: 15px;
}

.no-data-messages {
  opacity: 0.6;
  font-weight: var(--font-normal);
  font-size: 15px;
  margin-top: 20px;
}

.heading-page {
  align-items: end;
}

.btns-divs {
  right: 0;
  margin-top: -15px;
  top: 100%;
}

.question-images {
  text-decoration: none;
  margin-left: 10px;
}

.question-tag {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
}

.question-choices {
  max-width: 150px;
  max-height: 100px;
  border-radius: 4px;
}

.quiz-instruction {
  font-weight: var(--font-normal);
  opacity: .6;
}

.ratings-star {
  font-size: 18px;
  margin-bottom: 2px
}

.quiz-wizard-listing {
  margin-bottom: 2rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.choices-field {
  width: 50%;
}

.choices-btns {
  margin-top: 20px;
}

.chips-display {
  margin-top: -12px;
}

.grid .sidebar {
  max-height: calc(100vh - 140px);
}

.link .material-symbols-rounded.small-arrow {
  font-size: 0.85em;
}

body:has(.quiz-wizard-listing),
body .max-w-full {
  max-width: 100%;
}

.back-url-postion {
  position: absolute;
}

.question-header {
  margin-bottom: 15px;
  white-space: normal
}

.question-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
}

.choices-images {
  max-width: 150px;
  max-height: 100px;
  border-radius: 4px;
}

.questions-image-url {
  text-decoration: none;
  margin-left: 10px;
}

.error-list-design {
  color: rgba(var(--danger), 1);
  margin-top: 5px;
}

:is( :where(.login-page) :is(p, .logo), :where(.add-course-page, .add-course-allocation-page, .add-allocation-page, .add-module-page, .edit-module-page, .add-certificate-page, .share-page, .edit-page, .edit-course-page, .edit-certificate-page, .excel-import-page) .breadcrumbs-alt, .list-item.active .accordion-content),
.signup-page .logo {
  display: block !important;
  height: auto;
}

:is(.add-course-allocation-page, .add-module-page, .edit-module-page, .content-form, .add-certificate-page, .excel-import-page) .fields {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

:is(.add-course-allocation-page, .add-module-page, .edit-module-page, .content-form, .add-certificate-page, .excel-import-page) .fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.filter-field .btn {
  width: var(--h-control);
  height: var(--h-control);
  justify-content: center;
}

.tbl {
  display: grid;
}

.login-page .title-border,
.signup-page .title-border,
.edit-profile-page .title-border {
  display: none;
}

body.login-page .card,
body.signup-page .card,
body.edit-profile-page .card {
  all: inherit;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: auto;
  scrollbar-width: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  float: none;
}

.add-page .card {
  max-width: var(--fields-container);
}

body .button-bar .btn {
  background: var(--bg-primary);

  &:hover {
    background: var(--bg-primary);
  }
}

.homeburg-style {
  margin: 0 -15px;
}

:is(.login-page, .signup-page) .logo-title {
  display: flex;
}

@media (max-width: 1192px) {

  .search-action,
  .search-action .form-check-input,
  .search-action .form-check-input>div {
    width: 100%;
  }

  .filter-field .md-full {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 991px) {

  .course-details,
  .filter-field {
    flex-direction: column;
  }

  .course-details .right {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .search-action {
    flex-direction: column;
  }
}