/*
 * Custom TeachHQ Style
 */

 * {
  font-family: var(--default-font-family) !important;
  font-weight: var(--default-font-weight) !important;
  font-style: normal !important;
}

h1, h2, h3, h4, h5, h6, p.title {
  font-family: var(--default-heading-font-family) !important;
  font-weight: var(--default-font-weight) !important;
  font-style: normal !important;
}

body::-webkit-scrollbar,
.consent-banner-cook::-webkit-scrollbar,
#course-menu ul::-webkit-scrollbar,
div.table-responsive::-webkit-scrollbar,
#course-details::-webkit-scrollbar,
#course-lesson-content section content::-webkit-scrollbar,
#authors-section .authors-container::-webkit-scrollbar,
.selectize-dropdown-content::-webkit-scrollbar,
.schedule-menu-open::-webkit-scrollbar,
.question::-webkit-scrollbar,
#shortcuts-container::-webkit-scrollbar,
div.sticky::-webkit-scrollbar,
div.sticky ul::-webkit-scrollbar,
.tiles-panel::-webkit-scrollbar,
.thq-dropdown-menu::-webkit-scrollbar,
div#filter-container::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

body::-webkit-scrollbar-track,
.consent-banner-cook::-webkit-scrollbar-track,
#course-menu ul::-webkit-scrollbar-track,
div.table-responsive::-webkit-scrollbar-track,
#course-details::-webkit-scrollbar-track,
.selectize-dropdown-content::-webkit-scrollbar-track,
.schedule-menu-open::-webkit-scrollbar-track,
.question::-webkit-scrollbar-track,
div.sticky::-webkit-scrollbar-track,
div.sticky ul::-webkit-scrollbar-track,
.tiles-panel::-webkit-scrollbar-track,
div#filter-container::-webkit-scrollbar-track {
  background: var(--white-transparent);
}

#shortcuts-container::-webkit-scrollbar-track {
  background: var(--overlay-color);
}

body::-webkit-scrollbar-thumb,
.consent-banner-cook::-webkit-scrollbar-thumb,
#course-menu ul::-webkit-scrollbar-thumb,
div.table-responsive::-webkit-scrollbar-thumb,
#course-details::-webkit-scrollbar-thumb,
#course-lesson-content section content::-webkit-scrollbar-thumb,
.selectize-dropdown-content::-webkit-scrollbar-thumb,
.schedule-menu-open::-webkit-scrollbar-thumb,
.question::-webkit-scrollbar-thumb,
#shortcuts-container::-webkit-scrollbar-thumb,
div.sticky::-webkit-scrollbar-thumb,
div.sticky ul::-webkit-scrollbar-thumb,
.tiles-panel::-webkit-scrollbar-thumb,
div#filter-container::-webkit-scrollbar-thumb {
  background-color: var(--dark-color);
  border-radius: 16px;
}

#authors-section .authors-container::-webkit-scrollbar-track {
  background: var(--dark-transparent);
}

.thq-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

#authors-section .authors-container::-webkit-scrollbar-thumb,
.thq-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: var(--light-color);
  border-radius: 16px;
}

ul#menu_categories::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

ul#menu_categories::-webkit-scrollbar-track {
  background: transparent;
}

ul#menu_categories::-webkit-scrollbar-thumb {
  background-color: var(--dark-transparent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
}

::-webkit-selection {
  background-color: var(--selection-color);
  color: var(--dark-color);
}

::-moz-selection {
  background-color: var(--selection-color);
  color: var(--dark-color);
}

::selection {
  background-color: var(--selection-color);
  color: var(--dark-color);
}

::placeholder {
  color: #bbb;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #bbb;
}

::-ms-input-placeholder {
  color: #bbb;
}

body {
  background-color: var(--bg-color);
  overflow-x: hidden;
}

p {
  font-size: 14px;
  line-height: 1.75em;
  color: var(--dark-color);
  margin-bottom: 8px;
}

div {
  font-size: 14px;
  line-height: 1.5em;
  color: var(--dark-color);
}

h1 {
  font-size: 24px;
  line-height: 1.5em;
  color: var(--dark-color);
}

h1.subtitle {
  font-size: 20px;
  line-height: 1.5em;
  color: var(--primary-color);
  text-transform: capitalize;
}

h2:not(.ck-content h2) {
  font-size: 40px;
  line-height: 1.4em;
  text-align: center;
  color: var(--dark-color);
}

h3:not(.ck-content h3) {
  font-size: 24px;
  line-height: 1.5em;
  color: var(--dark-color);
  margin-bottom: 16px;
}

h3 span {
  font-size: 24px;
  line-height: 1.5em;
  color: var(--primary-color);
}

h4:not(.ck-content h4),
section.content-text content h2 {
  font-size: 15px;
  line-height: 1.5em;
  color: var(--dark-color);
  text-align: left;
}

h5,
.thumb-course-texts span {
  display: block;
  color: var(--secondary-color);
  font-size: 14px;
  line-height: 1.5em;
  text-transform: uppercase;
}

h6 {
  font-size: 16px;
  line-height: 1.5em;
  color: var(--primary-color);
}

i,
i * {
  font-style: italic !important;
}

span:not(.no-inherit) {
  font-family: var(--default-font-family), sans-serif;
  font-size: 12px;
  line-height: 1.5em;
  color: var(--dark-color);
}

strong {
  color: var(--n950);
}

hr {
  color: var(--white-transparent-label);
  opacity: 1;
  margin: 16px 0 8px 0;
}

hr.vertical {
  width: 4px;
  position: relative;
  color: var(--b100);
  margin: 8px 0;
}

hr.vertical::after {
  content: "";
  display: block;
  width: 4px;
  height: 49px;
  background-color: var(--white-transparent);
  border-radius: 3px;
}

#loading {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.66);
  z-index: 9999;
}

#loading svg {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px !important;
  margin-left: -50px !important;
}

#label_powered_by {
  position: absolute;
  width: 100%;
  left: 0;
}

.bigger-panel.bp-login.text-center {
  min-height: 696px;
}

.modal .modal-header {
  border-bottom: none !important;
  justify-content: center;
  padding: 32px 32px 24px 32px;
}

.modal .modal-header:has(a[data-bs-dismiss="modal"]) {
  justify-content: space-between !important;
}

.modal .modal-body {
  padding: 0 32px 32px;
}

div.modal-content div.modal-footer > * {
  margin: 0;
}

.modal .modal-footer {
  border-top: 1px solid var(--overlay-color) !important;
  justify-content: center !important;
  padding: 0 32px 32px;
  /* margin-top: -8px; */
  padding-top: 24px;
}

.modal.fade {
  background: rgba(62, 80, 91, 0.8);
}

.modal:not(#editContentModal) h1 {
  color: var(--dark-color);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  line-height: 1.5em;
}

.modal:not(#editContentModal) h1 strong {
  color: var(--primary-color) !important;
}

.modal:not(#editContentModal) h2 {
  color: var(--dark-color);
  font-size: 24px !important;
  font-style: normal;
  line-height: 1.5em;
  text-align: left !important;
}

.modal:not(#editContentModal) p {
  text-align: center;
}

.modal-feedback h1 strong:only-of-type {
  color: var(--primary-color) !important;
}

.modal select {
  background-color: var(--b50) !important;
  border: 1px solid var(--n50) !important;
  padding: 10px 8px;
  border-radius: 12px;
  width: 100%;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color);
  min-height: 40px;
}

.modal select option {
  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color);
}

.modal select option:hover,
select option:checked {
  background-color: var(--primary-color) !important;
  box-shadow: 0 0 10px 100px var(--primary-color) inset !important;
  color: var(--white-color) !important;
  transition: background 0.3s ease;
}

.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.card-show {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  padding: 16px 18px !important;
}

.card-show:hover {
  transform: translate(-50%, -50%) var(--default-scale) !important;
}

.course-time {
  margin-bottom: 0 !important;
  background-color: var(--overlay-color) !important;
}

.mh-200 {
  min-height: 200px;
}

.flags {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60%;
}

.flags div {
  position: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  height: 60%;
  top: 0;
}

@keyframes flag-top-animation {
  0% {
    width: 0;
  }

  80% {
    width: 100%;
  }

  100% {
    width: 90%;
  }
}

.flags .flag-top {
  background-image: url("../images/flag_top.png");
  width: 90%;
  animation-name: flag-top-animation;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}

@keyframes flag-left-animation {
  0% {
    width: 0;
  }

  80% {
    width: 76%;
  }

  100% {
    width: 71%;
  }
}

.flags .flag-left {
  background-image: url("../images/flag_left.png");
  width: 71%;
  left: 0;
  animation-name: flag-left-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes flag-right-animation {
  0% {
    width: 0;
  }

  80% {
    width: 72%;
  }

  100% {
    width: 67%;
  }
}

.flags .flag-right {
  background-image: url("../images/flag_right.png");
  width: 67%;
  right: 0;
  animation-name: flag-right-animation;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
}

@keyframes flag-shadows-animation {
  0% {
    height: 0;
  }

  80% {
    height: 18vw;
  }

  100% {
    height: 14vw;
  }
}

.flags .flag-shadows {
  background-image: url("../images/flag_shadows.png");
  background-size: 100% 100%;
  width: 100%;
  height: 14vw;
  right: 0;
  left: 0;
  animation-name: flag-shadows-animation;
  animation-duration: 1.1s;
  animation-fill-mode: forwards;
}

div.table {
  border: 1px solid var(--n400);
  width: 100%;
  border-radius: 12px;
  margin-top: 16px;
}

#assign-training-div {
  background-color: var(--overlay-color);
}

div.table #assign-training-div .course-name {
  display: flex;
  align-items: center;
}

.course-name span {
  color: var(--light-color);
}

div.table div[class^="col"] {

  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color);
  padding: 8px;
}

div.table .remove-item {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

div.table:hover .remove-item {
  opacity: 1;
  transition: opacity 0.3s ease;
}

div.table .remove-item a img:hover {
  filter: brightness(0) saturate(100%) invert(26%) sepia(92%) saturate(6456%) hue-rotate(355deg) brightness(99%) contrast(121%);
}

.modal:not(#editContentModal) thead tr th {
  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color);
}

.modal:not(#editContentModal) a:not(.btn) {
  font-size: 12px;
  line-height: 1.3em;
  color: var(--dark-color);
}

.modal:not(#editContentModal) a:not(.btn):hover {
  transition: none !important;
}

img.icon {
  margin-top: -2px;
  -webkit-transition: filter 200ms ease-in-out;
  -moz-transition: filter 200ms ease-in-out;
  -ms-transition: filter 200ms ease-in-out;
  -o-transition: filter 200ms ease-in-out;
}

.modal:not(#editContentModal) a:not(.btn):hover {
  color: var(--primary-color);
  -webkit-transition: color 200ms ease-in-out;
  -moz-transition: color 200ms ease-in-out;
  -ms-transition: color 200ms ease-in-out;
  -o-transition: color 200ms ease-in-out;
}

.modal:not(#editContentModal) a:hover img.icon {
  filter: var(--primary-filter);
  -webkit-transition: filter 200ms ease-in-out;
  -moz-transition: filter 200ms ease-in-out;
  -ms-transition: filter 200ms ease-in-out;
  -o-transition: filter 200ms ease-in-out;
}

.form-signin {
  max-width: 330px;
  padding: 16px;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-toggle {
  font-size: 16px;
  line-height: 1.75em;
  color: var(--white-color);
}

.dropdown-toggle:hover {
  color: var(--white-color);
  transition: color 0.3s ease;
}

.btn.btn-default.rounded-circle.p-2 {
  padding: 13px 10px !important;
}

ul.dropdown-menu.text-small.show#dropdown-notification {
  z-index: 12;
}

a.user-link.show {
  background-color: var(--b400);
  color: var(--n950);
  margin-right: 1px;
  box-shadow: none !important;
  transform: var(--default-scale);
}

a.user-link.show:hover {
  box-shadow: none !important;
  transform: scale(0.85);
  transition: all 0.3s ease;
}

a.user-link.show::before {
  background-color: transparent;
}

.user-link img {
  margin-top: -2px;
}

#right-side-column ul {
  list-style: none;
  padding-left: 0;
}

.overview-content ul:not(.categories):not(.thq-dropdown-menu) {
  list-style: none;
}

.overview-content ul:not(.categories):not(.thq-dropdown-menu):not(.curriculum-list) li::before {
  content: "\2022";
  color: var(--dark-color);
  font-size: 14px;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.table th:hover {
  color: var(--secondary-color);
  transition: color 0.3s ease;
  transition: all 0.3s ease;
}

table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
  content: "" !important;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before {
  content: "" !important;
}

table.dataTable thead tr th:has(input[type="checkbox"][name^="row"]) + th,
table.dataTable thead tr th:has(input[type="checkbox"][name="selectall"]) + th,
table.dataTable tbody tr td:has(input[type="checkbox"][name^="row"]) + td,
table.dataTable thead tr th:first-child:not(:has(input[type="checkbox"][name^="row"])):not(:has(input[type="checkbox"][name="selectall"])),
table.dataTable tbody tr td:first-child:not(:has(input[type="checkbox"][name^="row"])) {
  position: sticky !important;
  left: 0 !important;
  z-index: 1;
}

table.dataTable tbody tr td:has(input[type="checkbox"][name^="row"]) + td,
table.dataTable tbody tr td:first-child:not(:has(input[type="checkbox"][name^="row"])) {
  box-shadow: 3px 0px 3px 0px rgba(0, 0, 0, 0.10) !important;
}

.table td:nth-child(2) a {
  font-size: 16px;
}

.table a:not(.thq-dropdown-item) {
  font-size: 14px;
  line-height: 1.75em;
  text-decoration: none;
  color: var(--primary-color);
  margin-right: 8px;
}

.table a:not(.thq-dropdown-item):hover {
  color: var(--primary-color);
  transition: color 0.3s ease;
}

.table-filters {
  padding-top: 16px;
  padding-bottom: 16px;
  position: relative;
  z-index: 1;
}

ul.inline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
}

ul.inline-list li {
  float: left;
}

ul.inline-list li::after {
  content: ",";
  padding-right: 4px;
}

ul.inline-list li:last-child::after {
  content: "";
}

.panel ul.inline-list li {
  color: var(--white-color);
  font-size: 12px;
  line-height: 1.75em;
}

.breadcrumb {
  padding-left: 8px;
  margin-bottom: 4px;
}

.breadcrumb-item {
  font-size: 10px;
  line-height: 1em;
}

.breadcrumb-item a {
  color: var(--dark-color);
  text-decoration: none;
  font-size: 10px;
  line-height: 1.75em;
  transition: var(--default-all-transition);
}

.breadcrumb-item a:hover {
  color: var(--primary-color);
  transition: var(--default-all-transition);
}

.breadcrumb-item.active {
  color: var(--dark-color) !important;
  font-size: 10px;
  line-height: 1.75em;
  padding-left: 4px !important;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: 4px;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: ">";
  padding-right: 4px;
  float: none !important;
}

.bg-default {
  background: linear-gradient(134deg, var(--b400) -0.9%, var(--b400) 100.9%);
}

#certificatePreview, #certificatePreview h1, #certificatePreview h3, #certificatePreview p, #certificatePreview .modal-content, #certificatePreview label, #certificatePreview div{
  color: var(--white-color) !important;
  opacity: 0.95;
  background: var(--dark-color);
}

#certificatePreview .modal-content{
  border: none;
}

button.ck-button {
  background-color: var(--primary-color) !important;
}

a img[src*="icon_add_user_row"],
a img[src*="icon_envelope"] {
  filter: brightness(0) saturate(100%) invert(28%) sepia(31%) saturate(347%) hue-rotate(159deg) brightness(95%) contrast(91%);
}

div.ck.ck-toolbar.ck-toolbar_grouping {
  border-radius: 12px 12px 0 0 !important;
  border: 1px solid var(--n400) !important;
  border-bottom: none !important;
}

div.ck.ck-content {
  border-radius: 0 0 12px 12px !important;
  border: 1px solid var(--n400) !important;
}

div.ck.ck-content.ck-focused {
  border-color: var(--primary-color) !important;
  box-shadow: none !important;
}

div.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline {
  padding: 8px 16px;
}

#main-course {
  height: 100vh;
  background-color: var(--b500);
  display: flex;
}

#current-course {
  height: 100vh;
  width: 100%;
  background-color: var(--white-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#course-menu {
  background: var(--white-transparent-label);
  width: 100%;
  display: block;
  position: absolute;
  z-index: 1;
  top: 80px;
  /* top: 88px; */
  bottom: 0;
  transform: var(--default-all-transition);
  left: -100%;
}

#course-menu ul:first-child {
  list-style: none;
  margin: 0 8px 0 16px;
  padding: 24px 0;
  overflow-y: auto;
  max-height: 100%;
}

div#course-lesson-content {
  height: calc(100% - 80px);
  margin-top: 80px;
}

#course-lesson-content div {
  width: 100%;
  display: none;
  height: 100%;
  flex-wrap: nowrap;
  justify-content: flex-end;
  box-shadow: var(--default-shadow);
}

#course-lesson-content section {
  display: block;
  width: 700px;
  height: 100%;
  padding: 0 16px 0 32px;
  overflow: hidden;
  background: var(--white-transparent-label);
  box-shadow: var(--default-shadow);
  backdrop-filter: var(--default-blur);
}

.unselectable {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#course-lesson-content section content {
  display: block;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 44px;
  padding-right: 24px;
  padding-bottom: 92px;
}

#course-lesson-content section content::-webkit-scrollbar-track,
#course-menu ul:first-child::-webkit-scrollbar-track {
  background: transparent;
}

#course-lesson-content section content::-webkit-scrollbar-track-piece:end,
#course-menu ul:first-child::-webkit-scrollbar-track-piece:end {
  margin-bottom: 32px;
}

#course-lesson-content section content::-webkit-scrollbar-track-piece:start,
#course-menu ul:first-child::-webkit-scrollbar-track-piece:start {
  margin-top: 32px;
}

#course-lesson-content section content *:not(h1, h2, h3, h4, h5, h6) {
  font-size: 15px;
  line-height: 1.75em;
}

#course-lesson-content section content pre {
  position: relative;
} 

#course-lesson-content section content pre span.code-label {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 11px;
  color: var(--n400);
  padding: 2px 6px;
  background-color: var(--white-color);
  border-radius: 2px;
  text-transform: uppercase;
}

figure.image:not(.ck-widget) {
  text-align: center;
  height: auto;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 16px 0;
}

figure.image:not(.ck-widget) img {
  max-width: 100%;
  height: auto;
}

figure.image:not(.ck-widget) figcaption {
  font-size: 12px;
}

code[class*=language-], pre[class*=language-] {
  padding: 12px 16px;
  border: 1px solid var(--light-color);
  margin: 0;
}

#course-lesson-content figcaption {
  font-size: 12px !important;
  line-height: 1.5em !important;
}

#course-lesson-content figure img {
  max-width: 100%;
  height: auto;
}

.resizer-content {
  display: block !important;
  width: 10px !important;
  height: 100% !important;
  margin-right: -1px;
  z-index: 1;
  cursor: ew-resize;
  background-image: url("../images/icons/handle.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

#show-extra-content {
  position: absolute;
  bottom: -30px;
  left: calc(50% - 20px);
  z-index: 9;
  display: none;
  width: 24px !important;
  height: 80px !important;
  border-radius: 8px 0 0 8px;
  transform: rotate(90deg);
  cursor: pointer;
  background-image: url(../images/icons/handle.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  background-color: var(--overlay-color);
  transition: var(--default-all-transition);
}

#show-extra-content:hover {
  bottom: -30px;
  transition: var(--default-all-transition);
}

#course-lesson-content li {
  font-size: 15px;
}

#course-lesson-content li {
  padding: 4px !important;
}

ul.secondary-item li:first-child {
  background-color: var(--b500);
  height: 69px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: none;
  border-right: 1px solid var(--white-color);
  align-items: center;
}

ul.secondary-item li:first-child a {
  font-size: 16px;
  line-height: 1.75em;
  color: var(--dark-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  border: none;
  border-right: 1px solid var(--white-color);
  align-items: center;
}

ul.secondary-item li:first-child a {
  padding: 0;
}

#course-menu ul li {
  padding: 16px;
}

#course-menu ul li img {
  width: 22px;
  height: auto;
}

#course-menu ul li a,
#course-menu ul li a span {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--dark-color);
  font-size: 15px;
  font-style: normal;
  line-height: 1.75em;
  letter-spacing: -0.3px;
}

#course-menu ul li:has(ul) {
  min-height: 48px;
  padding: 16px;
  margin-right: 16px;
  margin-bottom: 24px;
  border-radius: var(--border-radius-xl);
  background: var(--white-color);
}

#course-menu ul li:has(ul) ul {
  margin-left: -16px;
  margin-right: -16px;
}

#course-menu ul li span small {
  display: block;
  font-size: 10px;
  line-height: 1.75em;
  color: var(--dark-color);
  margin-top: 0px;
}

#course-menu ul li ul {
  display: none;
  margin: 16px 0 0 0;
  transition: all .1s linear;
  list-style: none;
  padding-left: 0;
}

#course-menu ul li ul li {
  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color);
  padding: 0 8px;
  margin: 0 8px;
  border-radius: var(--border-radius-sm);
}

#course-menu ul li ul li a {
  padding: 12px 16px 12px 44px;
  color: var(--dark-color);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5em;
  letter-spacing: -0.24px;
  border-radius: 8px;
}

#course-menu ul li ul li:has(a:hover) {
  background-color: var(--overlay-color);
}

li.section-complete {
  background-image: url("../images/icons/ball_full.svg");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 20px;
}

li.section-part-complete {
  background-image: url("../images/icons/ball_half.svg");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 20px;
}

li.section-not-started {
  background-image: url("../images/icons/ball_empty.svg");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 20px;
}

#course-description {
  background: rgba(236, 233, 227, 0.5);
  box-shadow: var(--default-shadow);
  backdrop-filter: var(--default-blur);
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 8px 0 8px;
  z-index: 2;
  position: absolute;
  transition: var(--default-all-transition);
}

#course-close {
  position: relative;
  padding-left: 24px;
}

.manage-menu {
  display: flex;
}

.manage-menu a {
  padding: 14px 12px 14px 14px;
}

.course-texts::before,
#course-close::before {
  content: "";
  height: 100%;
  width: 4px;
  border-radius: 4px;
  background-color: var(--white-transparent);
  position: absolute;
  left: 11px;
}

.course-texts {
  padding: 0 0 0 24px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  justify-content: center;
  white-space: nowrap;
}

#course-description h1 {
  margin-bottom: 0;
  color: var(--dark-color);
  font-size: 20px;
  font-style: normal;
  line-height: 1.5em;
  text-transform: initial;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: none;
}

#course-description .custom-w {
  max-width: 100%;
}

#course-description h1.menu-closed {
  width: calc(100vw - 200px);
}

#course-description h1.menu-opened {
  width: calc(100vw - 632px);
}

#course-description span {
  display: block;
  color: var(--dark-color);
  font-size: 10px;
  font-style: normal;
  line-height: 1.75em;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  width: calc(100vw - 200px);
}

#course-details {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
}

#course-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 8px;
}

#course-info h1 {
  color: var(--white-color);
  margin-bottom: 32px;
  font-size: 32px;
  font-style: normal;
  line-height: 1.5em;
}

#course-info p {
  color: var(--white-color);
  font-size: 16px;
  font-style: normal;
  line-height: 1.5em;
  margin-bottom: 0;
}

#course-info span {
  font-size: 12px;
  line-height: 1.75em;
  text-transform: uppercase;
  color: var(--white-color);
  display: block;
  margin-bottom: 32px;
}

.course-complement {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.course-complement small {
  color: var(--gray-color);
  font-size: 14px;
  font-style: normal;
  line-height: 1.75em;
  letter-spacing: -0.28px;
}

.course-complement small strong {
  color: var(--white-color);
  line-height: 1.75em;
  letter-spacing: -0.28px;
  margin-left: 12px;
}

#course-progress {
  width: 376px;
  height: 50px;
  margin-top: auto;
  margin-bottom: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-radius: 10px;
  background: var(--white-transparent);
  box-shadow: var(--default-shadow);
  backdrop-filter: var(--default-blur);
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  transition: var(--default-all-transition);
}

#course-progress .prev-section a,
#course-progress .next-section a {
  font-size: 16px;
  line-height: 1.75em;
  color: var(--white-color);
  text-decoration: none;
}

.prev-section svg {
  margin-right: 8px;
  margin-top: -4px;
}

.next-section svg {
  margin-left: 8px;
  margin-top: -4px;
}

.progress-section {
  text-align: center;
  padding: 8px 24px;
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  width: 144px;
  align-items: center;
}

.progress-section div {
  font-size: 12px;
  line-height: 1.75em;
  text-align: center;
  color: var(--dark-color);
  text-decoration: none;
}

.progress-section .progress-detail {
  color: var(--dark-color);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  line-height: 1.75em;
}

.progress-section .progress {
  height: 4px;
  width: 136px;
}

.border-none {
  border: none !important;
  padding: 0 6px 0 6px !important;
}

.border-none div:not(.text-center) {
  text-align: left !important;
}

.prev-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.next-section {
  display: flex;
  align-items: center;
}

.progress {
  background-color: var(--b500);
  width: 100%;
}

div.progress-section .progress {
  background-color: var(--white-color);
}

#form-next-step {
  margin-bottom: 0;
}

.progress-bar {
  background-color: var(--dark-color);
  border-radius: 2px;
}

#tabs-section div[class$="-content"] {
  display: none;
  max-width: 932px;
  width: 100%;
  /*float: right;*/
  margin-left: auto;
}

.form-floating>label {
  font-size: 14px;
  line-height: 1em;
  top: 8px;
  left: 12px;
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
  transform: scale(0.85) translateY(-0.85rem) translateX(0rem) !important;
  font-size: 10px;
  opacity: 1 !important;
}

input.form-control {
  position: relative;
  font-size: 14px !important;
  line-height: normal !important;
  color: var(--dark-color) !important;
  background: var(--overlay-color);
  border: none;
  padding: 16px 24px !important;
  border-radius: var(--border-radius-sm);
  width: 100%;
  margin-bottom: 8px;
}

select.form-select {
  padding: 12px 24px !important;
  background-color: var(--white-color);
  border-radius: var(--border-radius) !important;
  border: 1px solid var(--white-transparent-label) !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

#settings-panel select.form-select {
  background-color: var(--overlay-color);
}

.bp-login input.form-control {
  background: var(--white-color) !important;
  padding-bottom: 8px !important;
}

input.form-control.form-control-sm {
  padding: 10px 12px !important;
}

input {
  font-size: 14px !important;
  line-height: normal !important;
  color: var(--dark-color) !important;
  background-color: var(--white-color) !important;
  border: 1px solid var(--overlay-color);
  padding: 14px 24px !important;
  border-radius: var(--border-radius);
  width: 100%;
  margin-bottom: 2px;
}

#settings-panel input {
  background-color: var(--overlay-color) !important;
  border: 1px solid #EEE;
}

input[type="search"] {
  background-color: var(--white-color) !important;
}

input.input-sm {
  font-size: 12px !important;
  line-height: normal !important;
  color: var(--dark-color) !important;
  padding: 12px 10px !important;
}

input[disabled] {
  background: linear-gradient(97.7deg, var(--b500) 8.4%, var(--b500) 93.4%);
  border: none !important;
}

input:focus,
textarea:focus,
input[type="number"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

input[type="number"] {
  font-size: 12px;
  line-height: normal;
  text-align: center;
  color: var(--dark-color);
  border: 1px solid var(--b500) !important;
}

input[type="radio"],
input[type="checkbox"] {
  width: 14px;
  height: 15px;
  margin: 2px 4px 2px 2px !important;
  accent-color: var(--primary-color);
  appearance: none;
  padding: 0 !important;
  position: relative;
  border: 0;
  background: transparent !important;
}

input[type="radio"]:disabled::after,
input[type="checkbox"]:disabled::after {
  border-color: var(--light-color);
}

input[type="radio"]::after {
  content: ' ';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
  border: 1px solid var(--primary-color);
  background: var(--white-color);
  position: absolute;
  cursor: pointer;
}

input[type="radio"]:checked::before {
  content: ' ';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  background: var(--primary-color);
  z-index: 2;
  position: absolute;
  cursor: pointer;
  transform: translate(3px, 3px);
}

input[type="radio"]:checked:disabled::before {
  background: var(--light-color);
}

input[type="checkbox"]::after {
  content: ' ';
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: block;
  border: 1px solid var(--light-color);
  background: var(--white-color);
  position: absolute;
  cursor: pointer;
}

.question input[type="checkbox"]::after {
  border: 1px solid var(--primary-color);
}

input[type="checkbox"][disabled]::after {
  border: 1px solid #CCC;
  background: #EEE;
  cursor: no-drop;
}

input[type="checkbox"]:checked::before {
  content: ' ';
  background-image: url('../images/icons/checked.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 19px;
  height: 19px;
  left: -2px;
  top: -5px;
  display: block;
  z-index: 2;
  position: absolute;
  cursor: pointer;
}

input::file-selector-button {
  background-color: transparent !important;
  font-size: 14px;
  line-height: normal;
  text-align: center;
  color: var(--secondary-color) !important;
  border: 1px solid var(--secondary-color) !important;
  border-radius: var(--border-radius-sm);
  padding: 8px 16px;
  margin-bottom: 0;
  -webkit-transition:
    background-color 200ms ease-in-out,
    color,
    border;
  -moz-transition:
    background-color 200ms ease-in-out,
    color,
    border;
  -ms-transition:
    background-color 200ms ease-in-out,
    color,
    border;
  -o-transition:
    background-color 200ms ease-in-out,
    color,
    border;
  position: relative;
  width: auto;
}

input::file-selector-button:hover {
  background-color: var(--secondary-color) !important;
  color: var(--white-color) !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="file"] {
  padding: 8 !important;
}

textarea {
  font-size: 14px;
  line-height: 1.75em;
  color: var(--dark-color);
  width: 100%;
  min-height: 96px !important;
  max-height: 256px;
  height: 168px;
  background-color: var(--white-color);
  border: 1px solid var(--white-color);
  border-radius: 12px;
  padding: 12px 16px;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -800px 0
  }
  100% {
    background-position: 800px 0
  }
}

input[disabled].loading, textarea[disabled].loading {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background-color: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #ddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  position: relative;
}

#tabs-section textarea {
  resize: none;
}

form textarea {
  font-size: 14px !important;
  line-height: 1.75em !important;
  color: var(--dark-color) !important;
  box-shadow: none;
  border: 1px solid var(--white-transparent-label);
  height: 96px;
}

div.meta_textarea {
  position: relative;
  margin-bottom: 16px;
}

div.meta_textarea textarea {
  border: 1px solid var(--primary-color);
  height: 112px;
  box-shadow: none;
  padding: 12px 144px 12px 16px;
}

div.meta_textarea textarea.description {
  height: 128px;
}

div.meta_textarea textarea.keywords {
  height: 132px;
}

div.meta_textarea span {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16px;
  width: 118px;
  font-size: 8px;
  line-height: 1.75em;
  color: var(--primary-color);
}

.selectize-input {
  padding: 12px !important;
}

.selectize-control.single .selectize-input {
  background: none !important;
}

.selectize-input>div.item {
  margin-top: 4px;
}

.selectize-control.multi .selectize-input>div {
  margin: 0 6px 0 0 !important;
}

div.selectize-input.items {
  border-radius: 12px;
  border-color: var(--n400);
  min-height: 47px;
  box-shadow: none;
}

div.selectize-input.items.has-items:not(.not-full) {
  font-size: 12px;
  line-height: normal;
  color: var(--dark-color);
  background: var(--white-color) !important;
  border-radius: 8px;
  border: none;
  width: 100%;
  height: 50px;
  padding: 8px !important;
  outline: none;
  appearance: none;
  position: relative;
}

.modal .selectize-control.single .selectize-input:after {
  content: " ";
  display: block;
  position: absolute;
  top: 6px !important;
  bottom: 0 !important;
  right: 6px !important;
  width: 46px !important;
  height: 40px !important;
  margin-top: 0 !important;
  border: none !important;
  border-radius: var(--border-radius-sm);
  background-color: var(--secondary-color);
  background-image: url("../images/icons/icon_search.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  box-shadow: var(--default-shadow);
  pointer-events: none;
}

.modal .single.selectize-dropdown {
  width: 80% !important;
  border-radius: var(--border-radius);
  left: 10px !important;
  top: 44px !important;
  padding: 16px;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.12) !important;
  border: none !important;
}

.modal .selectize-dropdown:not(.multi) .selectize-dropdown-content {
  padding-left: 4px;
  padding-right: 24px;
  direction: rtl;
}

.modal .selectize-dropdown:not(.multi) .selectize-dropdown-content::after {
  position: absolute;
  content: '';
  width: 32px;
  height: 94%;
  background-color: var(--overlay-color);
  background-image: url("../images/icons/icon_close_outline_orange.svg");
  background-repeat: no-repeat;
  background-position: center center;
  top: 7px;
  right: 7px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

.modal .selectize-dropdown .option {
  direction: ltr;
  padding: 8px 8px 8px 16px !important;
}

.modal .selectize-dropdown .option.selected,
.modal .selectize-dropdown .option.selected.active {
  background: none !important;
  color: var(--primary-color) !important;
}

.modal .selectize-dropdown .option.active {
  background: none !important;
  color: var(--secondary-color) !important;
}

.modal .selectize-dropdown .active:not(.selected) {
  background: none !important;
}

.modal .selectize-dropdown div.option.selected {
  background-color: var(--primary-color);
}

.selectize-control.multi .selectize-input [data-value] {
  background-color: var(--overlay-color) !important;
  background-image: none !important;
  border-radius: var(--border-radius-sm) !important;
  border-color: transparent;
  box-shadow: var(--default-shadow) !important;
  text-shadow: none !important;
  font-size: 14px;
  padding: 2px 12px;
  font-size: 12px;
  line-height: normal;
  color: var(--dark-color);
}

.selectize-control.multi .selectize-input [data-value].active {
  border-color: var(--n400) !important;
  color: var(--dark-color) !important;
}

.list-group-item-action:focus,
.list-group-item-action:hover {
  background-color: var(--primary-color);
  transition: all 0.3s ease;
}

.list-group-item-action:focus p,
.list-group-item-action:hover p,
.list-group-item-action:focus h6,
.list-group-item-action:hover h6 {
  color: var(--white-color);
  transition: all 0.3s ease;
}

.link-tooltip {
  background: rgba(77, 115, 248, 0.2);
  padding: 2px 4px;
  text-decoration: underline;
  color: var(--s300);
  position: relative;
}

.link-tooltip[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -150%;
  right: -32%;
  background-color: var(--primary-color);
  padding: 2px 12px;
  font-size: 10px;
  line-height: 1.5em;
  color: var(--white-color);
  width: 88px;
  transition: all 0.3s ease;
}

.link-tooltip[title]:hover::before {
  content: "";
  position: absolute;
  top: -64%;
  right: 0%;
  transform: translate(-50%) rotate(136deg);
  width: 15px;
  height: 15px;
  background-color: var(--primary-color);
  transition: all 0.3s ease;
}

.thumb-course {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.link-secondary {
  font-size: 12px !important;
  margin-bottom: 12px;
  display: block;
}

.w-75px {
  width: auto !important;
  color: var(--dark-color);
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1em !important;
  padding: 8px 9px !important;
}

.w-115px {
  width: 115px !important;
  color: var(--secondary-color) !important;
  text-align: center !important;
  font-family: var(--default-font-family) !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1em !important;
  padding: 8px 10px !important;
}

.w-68px {
  width: 68px;
  font-family: var(--default-font-family) !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1em !important;
  padding: 16px 10px !important;
}

.grid-buttons-group .w-75px {
  display: flex;
  align-items: center;
  justify-content: center;
}

table.dataTable span.retake-required,
table.dataTable span.not-started,
table.dataTable span.purchased,
table.dataTable span.assigned,
table.dataTable span.bookmarked,
table.dataTable span.new,
table.dataTable span.updated,
table.dataTable span.completed,
table.dataTable span.free,
table.dataTable span.in-progress {
  font-size: 12px;
}

.new.label-opaque{
  background-color: #ECE9E3E5 !important;
}

td.status {
  position: relative;
}

.course-image {
  min-width: 42%;
  max-width: 42%;
}

.course-image img {
  border-radius: 16px;
}

.thumb-course-texts {
  padding-left: 12px;
}

.thumb-course-texts a {
  margin-top: 8px;
  display: inline-block;
}

#left-side-column,
#right-side-column {
  background: var(--overlay-color);
  padding: 32px;
}

#left-side-column {
  border-radius: 0 10px 10px 0;
}

#right-side-column {
  border-radius: 10px 0 0 10px;
}

#right-side-column .max-width-right-column {
  max-width: 357px;
}

#right-side-column ul li::before {
  content: "";
}

#right-side-column a {
  font-size: 16px;
  line-height: 1.75em;
  color: var(--primary-color);
  display: block;
}

#right-side-column a:hover {
  color: var(--primary-color);
  transition: all 0.3s ease;
}

#right-side-column h3 {
  color: var(--dark-color);
  font-size: 24px;
  line-height: 1.5em;
  text-transform: initial;
}

#right-side-column h4 {
  color: var(--dark-color);
  font-size: 20px;
  line-height: 1.5em;
}

#course-summary {
  background: var(--light-color);
  margin-right: 0;
  margin-left: 0;
  border-radius: 10px;
  position: relative;
}

#summary-section {
  padding: 24px;
}

#summary-section h3 {
  text-transform: initial;
}

#summary-section p, #summary-section span, #summary-section a, #summary-section p.show-more-texts {
  font-size: 16px;
}

#summary-section span {
  color: var(--white-color);
}

#summary-section a {
  color: var(--dark-color);
}

#summary-section p.show-more-texts, #summary-section a.spoiler {
  margin-left: 106px;
  margin-bottom: 0;
}

#summary-section p.show-more-texts {
  color: var(--white-color);
}

#summary-section img.icon {
  filter: brightness(0) saturate(100%) invert(28%) sepia(37%) saturate(290%) hue-rotate(159deg) brightness(94%) contrast(92%);
  margin-right: 16px;
}

.group img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

#authors-section {
  background: var(--dark-color);
  border-radius: 10px;
  position: relative;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 24px;
}

#course-summary #authors-section h3, #course-summary #authors-section div {
  color: var(--white-color);
}

#course-summary #authors-section span {
  color: var(--light-color);
  font-size: 12px;
  font-style: normal;
  line-height: 1.75em;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  margin-top: 2px;
}

.related-resources {
  padding-right: 0;
  padding-left: 24px;
  padding-bottom: 48px;
  padding-top: 32px;
}

.related-resources .course-image img {
  border: 2px solid var(--primary-color);
}

.related-resources h4.related-resources-title {
  font-size: 18px;
  line-height: 1.5em;
  color: var(--primary-color);
}

.related-resources span {
  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color);
}

.authors {
  display: flex;
  margin-bottom: 16px;
}

.authors:last-child {
  margin-bottom: 0;
}

.authors .avatars {
  display: flex;
}

.authors .author_names {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  font-style: normal;
  font-size: 20px;
  line-height: 1.5em;
  color: var(--dark-color);
}

.author_names.ps-2.ps-lg-3 span {
  font-size: 16px;
  line-height: 1.75em;
  color: var(--dark-color);
}

.border-right {
  border-right: 1px solid var(--n100);
}

.border-left {
  border-left: 1px solid var(--n100);
}

.border-top {
  border-top: 1px solid var(--dark-color);
}

ul.categories {
  padding-left: 0;
}

ul.categories:empty {
  display: none !important;
}

.categories li {
  display: inline-block;
  padding: 4px 8px;
  background: var(--white-color);
  border: 1px solid var(--primary-color);
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.75em;
  letter-spacing: 0.1em;
  color: var(--n400);
  margin-right: 8px;
  margin-bottom: 10px;
}

ul.list {
  list-style: disc !important;
  padding-left: 32px !important;
}

.review-stars span {
  display: inline-block;
  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color);
}

.progress-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}

.progress-block span {
  width: 80px;
}

.progress-block small {
  display: inline-block;
  font-size: 12px;
  line-height: 1.75em;
}

.progress-block .progress {
  height: 20px;
  border-radius: 50px;
  background-color: var(--overlay-color) !important;
  display: flex;
  align-items: center;
}

.progress-block .progress small {
  margin-left: 8px;
}

.progress-block .progress-bar {
  outline: 1px solid var(--p700);
  outline-offset: -1px;
  border-radius: 50px;
  height: 20px;
  min-width: 20px;
}

.progress-block .progress-bar.excellent {
  background: var(--primary-color);
}

.progress-block .progress-bar.very_good {
  background: #D34200CC;
}

.progress-block .progress-bar.average {
  background: #D3420099;
}

.progress-block .progress-bar.poor {
  background: #D3420033;
}

.progress-block .progress-bar.terrible {
  background: #D3420000;
}

.rating-detail {
  border-radius: 10px;
  background: var(--white-color);
  padding: 16px;
  display: flex;
  max-width: 350px;
  margin-left: auto;
  margin-top: 8px;
  margin-bottom: 16px;
}

.rating-detail .rating-info:first-child {
  padding-left: 0;
}

.rating-detail .rating-info:last-child {
  padding-right: 0;
}

.rating-detail .rating-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--n200);
  padding: 0 8px;
}

.rating-detail .rating-info:last-child {
  border: none;
}

.rating-detail .rating-info div {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto 8px;
  color: var(--dark-color);
  font-size: 12px;
  line-height: 1.75em;
  padding-top: 4px;
}

.rating-detail .rating-info p {
  color: var(--dark-color);
  text-align: center;
  font-size: 10px;
  line-height: 1.75em;
  margin-bottom: 4px;
}

.comment:not(.token) {
  background-color: var(--white-color);
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 10px;
}

.comment .avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius);
  float: left;
  margin-right: 12px;
  margin-bottom: 12px;
  margin-top: 4px;
}

.comment h4 {
  font-size: 14px !important;
  line-height: 1.5em !important;
  margin-bottom: 4px !important;
}

.comment .comment-title span,
.comment .comment-title small {
  display: block;
  font-size: 12px;
  line-height: 1.5em;
}

.comment .comment-details {
  margin-top: 12px;
}

.comment .comment-details p {
  color: var(--dark-color);
  font-size: 12px;
  line-height: 1.75em;
}

.comment .comment-details a {
  font-size: 12px;
}

.comment .comment-rating {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  column-gap: 8px;
}

.comment .comment-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  justify-content: space-between;
}

.comment .comment-actions .buttons {
  width: 136px;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.comment .comment-actions .buttons a {
  font-size: 10px;
  line-height: 1.75em;
  color: var(--dark-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment .add-comment {
  margin-top: 48px;
  display: flex;
}

.comment .add-comment .submit-comment {
  display: flex;
  width: 100%;
  border-radius: var(--border-radius);
  background: var(--overlay-color);
  padding: 8px;
  align-items: center;
}

.comment .add-comment .submit-comment input {
  background-color: var(--overlay-color) !important;
  border: none !important;
}

ul li {
  font-size: 15px;
}

.social-icon {
  margin-left: 12px;
}

.social-icon:hover path {
  fill: var(--primary-color) !important;
  transition: all 0.3s ease;
}

.social-icon.facebook svg {
  width: 13px;
  display: inline-block;
}

.social-icon.instagram svg {
  display: inline-block;
  width: 22px;
}

label {
  display: block;
  font-size: 10px;
  line-height: 1.75em;
  color: var(--dark-color);
  margin: 4px 10px 4px 0;
}

label[for^="recommended-thumb"] {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

form label {
  margin-top: 12px;
  margin-left: 12px;
}

.popup-content {
  max-width: 472px;
  min-width: 312px;
  z-index: 9999999999;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mt-c {
  margin-top: 2px;
}

.give-rate img {
  cursor: pointer;
}

.course-card {
  background-color: #fdf9f4;
  background: linear-gradient(148.58deg, #f3e8de 5.81%, #fffdfb 96.14%);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 24px;
  width: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.course-card .thumb {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 184px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 16px;
}

.course-card .thumb span {
  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color);
  background: #fbf5f0;
  border-radius: 20px 0px 0px 0px;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 33%;
  text-align: center;
  padding: 6px;
}

.course-card .thumb img {
  border-radius: 17px;
  width: 100%;
}

.course-card a.text-decoration-none {
  display: block;
  padding: 0 8px;
}

.course-card h5 {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.5em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.course-card p {
  font-size: 14px;
  line-height: 1.75em;
  color: var(--dark-color);
  margin-bottom: 0;
}

.custom-size-font {
  font-size: 18px !important;
}

.course-cover {
  background-color: var(--white-color);
  border-radius: 24px;
  padding: 12px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid #f3e9df;
}

.course-cover .thumb {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 196px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 14px;
}

.settings-cover-logo .thumb {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 102px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 14px;
}

.settings-cover-favicon .thumb {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 102px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 14px;
}

#div-cover {
  background-color: var(--white-color);
  border-radius: 24px;
  padding: 12px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  height: 196px;
  border: 1px solid #f3e9df;
}

#div-settings {
  background-color: var(--white-color);
  border-radius: 24px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  height: 102px;
  border: 1px solid #f3e9df;
}

#div-cover-thumbnail {
  background-color: var(--white-color);
  border-radius: 24px;
  padding: 12px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  height: 196px;
  border: 1px solid #f3e9df;
}

#div-cover-favicon {
  background-color: var(--white-color);
  border-radius: 24px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  height: 102px;
  border: 1px solid #f3e9df;
}

#sortable .card-body:hover {
  background-color: #eee;
  cursor: ns-resize;
}

.question {
  justify-content: center;
  align-items: center;
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  padding: 32px 32px 24px 32px;
  border-radius: var(--border-radius, 12px);
  background: var(--overlay-color);
  width: calc(100% - 24px);
  height: calc(100% - 76px);
  /* margin: 12px; */
  margin: 12px 12px 64px 12px;
  overflow: auto;
}

.question:has(.question-group label:nth-child(5)) {
  width: 864px;
}

#course-assessment-content .question h2 {
  color: var(--n950);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  line-height: 1.5em;
  width: 100%;
}

.question.active {
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.question span {
  color: var(--secondary-color);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  line-height: 1.75em;
}

.question .question-group {
  margin-top: 24px;
  margin-bottom: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  align-items: flex-start;
}

.question .question-group:has(label:nth-child(5)) {
  flex-direction: row;
  gap: 0 16px;
}

.question label.more-options {
  max-width: calc(50% - 8px);
}

.question .question-group.has-rows {
  gap: 16px;
}

.question .question-group:has(label.selection-image) {
  flex-direction: row;
  gap: 16px;
}

.question .question-group .question-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.question .question-group .question-row div.left,
.question .question-group .question-row div.right {
  padding: 16px;
  width: 50%;
  text-align: center;
  color: var(--dark-color, var(--s500));
  font-size: 15px;
  line-height: 175%;
  border-radius: var(--border-radius);
  border: 2px solid var(--white-color);
  background: var(--white-color);
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
  transition: var(--default-all-transition);
  position: relative;
}

.question .question-group .question-row div.left:hover,
.question .question-group .question-row div.right:hover {
  border: 2px solid var(--dark-color);
  background: var(--white-transparent);
}

.question .question-group .question-row div.left:has(img),
.question .question-group .question-row div.right:has(img) {
  padding: 0;
}

.question .question-group .question-row div.left img,
.question .question-group .question-row div.right img {
  float: left;
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 10px;
}

audio::-webkit-media-controls-panel {
  background-color: var(--white-color);
  transition: var(--default-all-transition);
}

.question .question-group .question-row div:hover audio:not(.color-0,.color-1,.color-2,.color-3,.color-4)::-webkit-media-controls-panel {
  background-color: var(--white-transparent);
}

.question .question-group .question-row div.left div,
.question .question-group .question-row div.right div {
  margin-left: 40px !important;
}

audio.color-0::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.35);
}

audio.color-1::-webkit-media-controls-panel {
  background-color: rgba(134, 134, 134, 0.35);
}

audio.color-2::-webkit-media-controls-panel {
  background-color: rgba(154, 193, 188, 0.35);
}

audio.color-3::-webkit-media-controls-panel {
  background-color: rgba(250, 99, 31, 0.35);
}

audio.color-4::-webkit-media-controls-panel {
  background-color: rgba(0, 171, 231, 0.35);
}

audio {
  width: 101px;
  height: 32px;
  position: absolute;
  overflow: hidden;
  left: 8px;
}

audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider-container,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-seek-back-button,
audio::-webkit-media-controls-seek-forward-button,
audio::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-rewind-button,
audio::-webkit-media-controls-return-to-realtime-button,
audio::-webkit-media-controls-toggle-closed-captions-button,
audio::-webkit-media-controls-timeline {
  display: none;
}

.question label {
  font-size: 15px;
  line-height: 1.75em;
  color: var(--dark-color);
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--border-radius-sm, 8px);
  background: var(--white-color);
  border: 2px solid var(--white-color);
  padding: 16px;
  cursor: pointer;
  margin: 0 0 16px 0 !important;
}

.question .question-group label:last-child {
  margin-bottom: 0 !important;
}

.question label:has(input:checked) {
  border-radius: var(--border-radius-sm, 8px);
  border: 2px solid var(--primary-color);
  background-color: #F89163;
}

.question label.selection-image:has(input:checked) {
  background-color: #EBBFAB99;
}

.question label.selection-image {
  background: transparent;
  border: 2px solid var(--overlay-color);
  padding: 0;
  display: inline-block;
  width: 47%;
  height: 168px;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 !important;
}

.question label.selection-image:has(input:checked) {
  border-radius: var(--border-radius);
}

.question label input[type="radio"] {
  margin: 8px 18px 8px 8px !important;
}

.question label input[type="checkbox"] {
  margin: 8px 18px 8px 8px !important;
}

.question label img.radio,
.question label img.checkbox {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.question label.selection-image input[type="radio"],
.question label.selection-image input[type="checkbox"] {
  display: none;
}

.question label.selection-image:has(input:checked) img.radio,
.question label.selection-image:has(input:checked) img.checkbox {
  filter: sepia(.25);
  opacity: .6;
}

figure img {
  max-width: 100%;
}

figure.image {
  text-align: center;
}

figure.image-inline {
  text-align: left;
}

figure.image-style-side {
  text-align: right;
  float: right;
}

.course-ind-cent {
  text-align: center;
}

#qea-get-help {
  background: var(--white-color);
  border-radius: 12px;
  padding: 24px;
}

#qea-get-help p {
  font-size: 24px;
  line-height: 1.75em;
  color: var(--dark-color);
}

#qea-get-help p span {
  font-size: 24px;
  line-height: 1.75em;
  color: var(--primary-color);
  text-transform: initial;
}

h1.text-dark {
  color: var(--dark-color) !important;
}

.dropdown-toggle {
  background-position: bottom;
}

#screen-container {
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
}

.title {
  font-size: 24px;
  line-height: 1.5em;
  color: var(--primary-color);
  margin-bottom: 0;
}

.title-2 {
  font-size: 20px;
  line-height: 1.5em;
  color: var(--primary-color);
  margin-bottom: 24px;
}

.subtitle {
  font-size: 14px;
  line-height: 1.75em;
  color: var(--dark-color);
  margin-bottom: 8px;
}

.user-details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 32px;
}

.user-details img {
  width: 138px;
  height: auto;
  border-radius: 50%;
}

.user-details div {
  padding-left: 32px;
}

.courses {
  padding-top: 24px;
  border-top: 1px solid var(--b500);
}

.grid-buttons {
  display: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 16px;
  background: var(--white-color);
  border-radius: 12px;
  gap: 8px;
  padding: 0;
}

.grid-buttons div {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 0;
}

.white-icon img {
  filter: brightness(99);
}

.grid-buttons-group.input-group {
  display: inline-flex;
  width: auto;
}

div[id^="DataTables_Table_"][id$="_filter"] {
  float: right;
  z-index: 8;
  position: relative;
}

div[id^="DataTables_Table_"][id$="_filter"] input {
  border-radius: 12px;
  background: var(--bg-color);
  border: var(--default-border) !important;
  padding: 16px !important;
  width: 240px;
}

div[id^="DataTables_Table_"][id$="_filter"] label {
  position: relative;
  margin-right: 2px;
}

div[id^="DataTables_Table_"][id$="_filter"] label::after {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  bottom: 0;
  right: 6px;
  width: 46px;
  height: 40px;
  border-radius: var(--border-radius-sm);
  background-color: var(--secondary-color);
  background-image: url("../images/icons/icon_search.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  box-shadow: var(--default-shadow);
  pointer-events: none;
}

div[id^="DataTables_Table_"][id$="_length"] {
  position: absolute;
  bottom: 56px;
  right: 0;
}

div.dataTables_length label,
label.rows_per_page {
  font-size: 12px;
  line-height: 1.75em;
  padding-top: 24px !important;
  margin-bottom: 32px;
  margin-top: 8px;
  margin-right: 0 !important;
  color: var(--dark-color);
  display: inline-block;
}

.dataTables_info {
  display: none;
}

.dataTables_wrapper .toolbar {
  color: var(--n200);
  font-size: 14px;
  line-height: normal;
  position: absolute;
  top: 24px;
  left: 12px;
}

.table-filters + .dataTables_wrapper .toolbar {
  /*left: 408px;*/
  left: 136px;
}

table.dataTable.no-footer {
  border: none !important;
}

table.dataTable:not(.table-permission) {
  padding-top: 48px !important;
  table-layout: fixed !important;
}

table.dataTable thead th {
  border: none !important;
  text-transform: capitalize;
  color: var(--dark-color);
  overflow: hidden;
}

table.dataTable thead th:not(:first-child) {
  text-overflow: ellipsis;
}

.table> :not(caption)>*>* {
  border-color: transparent;
}

table.dataTable tbody th:first-child {
  border-right: 1px solid var(--n100);
  border-top-left-radius: 10px;
}

table.dataTable tbody th:last-child {
  border-right: 1px solid var(--n100);
  border-top-right-radius: 10px;
}

table.dataTable tr:last-child td:first-child {
  border-right: none;
  border-bottom-left-radius: 10px;
}

table.dataTable tr:last-child td:last-child {
  border-right: 1px solid var(--white-transparent-label);
  border-bottom-right-radius: 10px;
}

table.dataTable tr:last-child {
  border-color: var(--white-color);
}

table.dataTable th {
  font-size: 12px;
  line-height: 1.5em;
  padding: 12px !important;
}

table.dataTable tbody tr:first-child td {
  border-top: 1px solid var(--white-transparent-label);
}

table.dataTable tbody tr:first-child td:first-child {
  border-top-left-radius: 10px;
}

table.dataTable tbody tr td:has(input:checked) ~ td:not(.table-primary,.table-warning,.table-danger,.table-success) {
  background-color: #a6b8ba82 !important;
}

table.dataTable tbody tr td:has(input[type="checkbox"][name^="row"]) {
  background: transparent;
  border: none !important;
}

table.dataTable tbody tr td:has(input[type="checkbox"][name^="row"]) + td {
  border-left: 1px solid var(--white-transparent-label);
}

table.dataTable tbody tr:first-child td:has(input[type="checkbox"][name^="row"]) + td {
  border-top-left-radius: 10px;
}

table.dataTable tbody tr:last-child td:has(input[type="checkbox"][name^="row"]) + td {
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid var(--white-transparent-label);
}

table.dataTable tbody tr:last-child td {
  border-bottom: 1px solid var(--white-transparent-label);
}

table.dataTable tbody tr td:has(.thq-dropdown) {
  width: 137px;
}

table.dataTable tbody tr:first-child td:last-child {
  border-top-right-radius: 10px;
}

table.dataTable tbody tr.odd td {
   background-color: var(--white-color);
}

table.dataTable tbody tr.even td {
  background-color: var(--b400);
}

table.dataTable td {
  font-size: 12px;
  line-height: 1.5em;
  color: var(--dark-color);
  padding: 10px 12px !important;
  border-right: none;
  width: fit-content;
}

table.dataTable td * {
  font-size: 12px;
  line-height: 1.5em;
}

table.dataTable td p.text-break {
  font-size: 10px !important;
}

table.dataTable td:first-child {
  border-left: 1px solid var(--white-transparent-label);
}

table.dataTable td:last-child {
  border-right: 1px solid var(--white-transparent-label);
}

table.dataTable a:not(.thq-dropdown-item) {
  font-size: 12px;
  line-height: 1.75em;
  color: var(--primary-color);
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
}

table.dataTable a:not(.thq-dropdown-item):hover {
  color: var(--secondary-color);
  transition: all 0.3s ease;
}

table.dataTable td .progress {
  height: 4px;
}

td.table-primary {
  background-color: var(--t50) !important;
}

td.table-warning {
  background-color: var(--w50) !important;
}

td.table-danger {
  background-color: var(--e50) !important;
}

td.table-success {
  background-color: var(--u50) !important;
}

#slideshow_container table,
.ck-content table {
  table-layout: fixed;
  width: 100%;
}

.text-default {
  color: var(--primary-color) !important;
}

a.text-default:hover {
  color: var(--secondary-color) !important;
  transition: all 0.3s ease;
}

a.text-secondary,
small.text-secondary {
  color: var(--secondary-color) !important;
}

a.text-secondary2 {
  color: var(--u300);
}

a.text-secondary-table,
  small.text-secondary-table {
  color: var(--dark-color) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  word-break: normal;
}

a.text-secondary3,
a.text-secondary3:hover {
  color: var(--dark-color);
  transition: all 0.3s ease;
}

a.text-secondary-table:hover {
  text-decoration: none !important;
  transition: all 0.3s ease;
}

a.text-secondary:hover,
a.text-secondary2:hover {
  color: var(--primary-color) !important;
  transition: all 0.3s ease;
}

.dataTables_wrapper .dataTables_length select,
label.rows_per_page select {
  border-color: transparent !important;
  margin-left: 6px;
  border-radius: var(--border-radius-sm) !important;
  padding: 16px 40px 16px 24px !important;
  background-color: var(--secondary-color) !important;
  color: var(--white-color) !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjg5ODYxOSAxLjM1MjI4QzAuODk1MTkxIDEuMjEzNzUgMC45NDAzNzEgMS4wNzc3IDEuMDI3OTUgMC45NjMwNjhDMS4xMTU1MiAwLjg0ODQzMSAxLjI0MTE2IDAuNzYwODk2IDEuMzg3MjkgMC43MTI2MzRDMS41MzM0MiAwLjY2NDM3MyAxLjY5MjgyIDAuNjU3NzgxIDEuODQzMzYgMC42OTM3NzdDMS45OTM5IDAuNzI5NzcyIDIuMTI4MDIgMC44MDY1NjYgMi4yMjcxOSAwLjkxMzQ4MUw2LjE1ODgyIDQuOTkyOTFMMTAuMDg5MSAwLjkxMzQ4MUMxMC4xNTAyIDAuODM5NTIyIDEwLjIyNzkgMC43Nzc1ODQgMTAuMzE3MiAwLjczMTU0NEMxMC40MDY1IDAuNjg1NTA0IDEwLjUwNTYgMC42NTYzNTUgMTAuNjA4MiAwLjY0NTkyM0MxMC43MTA4IDAuNjM1NDkgMTAuODE0NyAwLjY0Mzk5OCAxMC45MTM0IDAuNjcwOTE0QzExLjAxMjEgMC42OTc4MyAxMS4xMDM1IDAuNzQyNTc0IDExLjE4MTkgMC44MDIzNDVDMTEuMjYwMyAwLjg2MjExNSAxMS4zMjM4IDAuOTM1NjI0IDExLjM2ODggMS4wMTgyN0MxMS40MTM3IDEuMTAwOTEgMTEuNDM4OSAxLjE5MDkxIDExLjQ0MjkgMS4yODI2M0MxMS40NDY5IDEuMzc0MzUgMTEuNDI5NiAxLjQ2NTgxIDExLjM5MTkgMS41NTEyOEMxMS4zNTQzIDEuNjM2NzYgMTEuMjk3MiAxLjcxNDQxIDExLjIyNDMgMS43NzkzN0w2LjcyODY0IDYuNDQ5OTRDNi42NTgyMiA2LjUyMzI4IDYuNTcwODIgNi41ODIxOCA2LjQ3MjMyIDYuNjIyNTdDNi4zNzM4MiA2LjY2Mjk1IDYuMjY2NiA2LjY4Mzg3IDYuMTU4MTMgNi42ODM4N0M2LjA0OTY1IDYuNjgzODcgNS45NDI0NCA2LjY2Mjk1IDUuODQzOTQgNi42MjI1N0M1Ljc0NTQzIDYuNTgyMTggNS42NTc5NSA2LjUyMzI4IDUuNTg3NTMgNi40NDk5NEwxLjA4NzU1IDEuNzc5MzdDMC45Njk2NTEgMS42NjEzOCAwLjkwMjYyMyAxLjUxMDA1IDAuODk4NDQ2IDEuMzUyMjhIMC44OTg2MTlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
  background-repeat: no-repeat;
  background-position: right 24px top 50%;
  background-size: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin-left: 8px;
  border: none !important;
}

table.dataTable ~ div.dataTables_paginate.paging_simple_numbers {
  margin-top: 96px;
}

@keyframes textPulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.sticky-banner {
  position: fixed;
  top: -2px;
  width: 100%;
  background-color: var(--primary-color) !important;
  color: var(--white-color) !important;
  text-align: center;
  padding: 6px 10px;
  font-size: 16px;
  font-weight: bold;
  z-index: 1;
}

.sticky-banner span, .sticky-banner p, .sticky-banner a {
  color: var(--white-color) !important;
  display: inline-block;
  animation: textPulse 3s infinite ease-in-out !important;
  font-size: 11px !important;
  margin: 0;
}

.sticky-banner a {
  color: var(--white-color) !important;
  text-decoration: underline;
  font-weight: bold !important;
  margin-left: 10px;
}

.sticky-banner a:hover {
  text-decoration: none;
}

#header:has(.sticky-banner) header {
  margin-top: 32px !important;
}

@media screen and (max-width: 767px) {
  .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    float: right !important;
    text-align: center;
  }
}

div.dataTables_paginate.paging_simple_numbers {
  border-radius: var(--border-radius);
  background: var(--white-color);
  padding: 8px;
  height: 65px;
  width: max-content;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

div.dataTables_paginate a.paginate_button.previous.disabled,
div.dataTables_paginate a.paginate_button.next.disabled,
div.dataTables_paginate a.paginate_button.previous.disabled:hover,
div.dataTables_paginate a.paginate_button.next.disabled:hover {
  color: var(--dark-color) !important;
  border-radius: var(--border-radius-sm);
  background: transparent !important;
  transition: all 0.3s ease;
}

div.dataTables_paginate a.paginate_button.next,
div.dataTables_paginate a.paginate_button.previous {
  color: var(--primary-color) !important;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  line-height: 1.75em;
  margin-left: 16px;
  color: var(--white-color);
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  padding: 16px 24px !important;
}

div.dataTables_paginate a.paginate_button.previous {
  margin-left: 0 !important;
}

div.dataTables_paginate a.paginate_button.next:hover,
div.dataTables_paginate a.paginate_button.previous:hover {
  color: var(--white-color);
  cursor: pointer;
  background: transparent !important;
  border-radius: var(--border-radius-sm);
  transition: all 0.3s ease;
}

div.dataTables_paginate.paging_simple_numbers span a.paginate_button {
  background: transparent !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color) !important;
  margin-left: 16px;
  padding: 16px 12px !important;
  min-width: 54px;
  display: inline-block;
  text-align: center;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
}

div.dataTables_paginate.paging_simple_numbers span a.paginate_button:hover {
  background: var(--primary-color) !important;
  border-radius: var(--border-radius-sm) !important;
  border-color: var(--primary-color);
  transition: all 0.3s ease;
  color: var(--white-color) !important;
  cursor: pointer;
}

div.dataTables_paginate.paging_simple_numbers span a.paginate_button.current {
  background: var(--primary-color) !important;
  color: var(--white-color) !important;
  border-color: var(--primary-color);
  padding: 16px 24px !important;
}

div.dataTables_paginate.paging_simple_numbers span a.paginate_button.current:hover {
  color: var(--white-color) !important;
  border-color: var(--primary-color);
  transition: all 0.3s ease;
  border-radius: var(--border-radius-sm) !important;
}

.hidden-content {
  display: none;
}

.alert {
  padding: 24px 46px 24px 32px !important;
  font-size: 16px !important;
  line-height: 1.75em !important;
  border-radius: var(--border-radius);
  box-shadow: var(--Effects-shadow-x, 0px) var(--Effects-shadow-y, 7px) var(--Effects-shadow-blur, 7px) var(--Effects-shadow-spread, -7px) rgba(0, 0, 0, 0.50);
  border: none !important;
  color: var(--white-color) !important;
}

.bp-login .alert {
  padding: 16px 32px 16px 24px !important;
}

.alert a {
  font-size: 16px !important;
  line-height: 1.75em !important;
  border-radius: var(--border-radius);
  border: none !important;
  color: var(--white-color) !important;
  text-decoration: underline !important;
}

div.alert.alert-warning {
  background: var(--w500);
  color: var(--dark-color) !important;
}

div.alert.alert-danger {
  background: var(--e500);
}

div.alert.alert-success {
  background: var(--u500);
}

div.alert.alert-success * {
  color: var(--white-color);
}

div.alert.alert-success img {
  filter: brightness(0);
}

.mine-panels,
.kpi-panel {
  background: var(--overlay-color);
  border-radius: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 93px;
  transition: var(--default-all-transition);
}

.kpi-panel.kpi-panel-dark {
  background-color: var(--dark-color);
}

.mine-panels p.p-panels-green {
  margin-bottom: 0;
}

@keyframes kpi-effect-title {
  0% {
    margin-top: -10px;
    opacity: 0;
  }
  100% {
    margin-top: 0px;
    opacity: 1;
  }
}

@keyframes kpi-effect-number {
  0% {
    margin-left: -10px;
    opacity: 0;
  }
  100% {
    margin-left: 0px;
    opacity: 1;
  }
}

.mine-panels .p-panels-green span:not(.not-started):not(.completed),
.kpi-panel p {
  font-size: 36px;
  color: var(--dark-color);
  line-height: 150%;
  animation: .5s ease-in-out 0s 1 kpi-effect-title;
}

.kpi-panel p.p-panels-blue {
  animation: .5s ease-in-out 0s 1 kpi-effect-number;
}

.kpi-panel.kpi-panel-dark p {
  color: var(--white-color);
}

.mine-panels small,
.kpi-panel small {
  color: var(--n900);
  font-size: 8px;
  font-style: normal;
  line-height: 1.5em;
  display: block;
  margin-bottom: 8px;
}

.kpi-panel.kpi-panel-dark small {
  color: var(--white-color);
}

.kpi-panel .mp-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.kpi-panel .mp-top p {
  margin-right: auto;
  margin-bottom: 0;
}

.kpi-column {
  height: auto;
  text-align: center;
  margin-bottom: 4px;
}

.kpi-column {
  display: flex;
}

.kpi-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kpi-panel > * {
  flex: 1;
}

.p-panels-title {
  font-size: 10px;
}

.mine-panels-team {
  background-color: var(--white-color);
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 8px;
  padding: 10px 8px 8px 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
}

.flex-row > .flex-column {
  align-items: stretch;
  flex: 1;
  width: 120px;
}

.mine-panels p:first-child,
.mine-panels-team p:first-child,
.kpi-panel p:first-child {
  color: var(--dark-color);
  font-size: 10px;
  font-style: normal;
  line-height: 1.5em;
}

.kpi-panel.kpi-panel-dark p:first-child {
  color: var(--white-color);
  max-width: 80%;
}

.row .col.max-width-kpi {
  flex: 1 0 100px;
  max-width: 164px;
}

.p-panels-blue {
  font-size: 36px;
  color: var(--dark-color);
  margin-top: auto;
  margin-bottom: 0;
}

.p-panels-red {
  font-size: 36px;
  color: var(--dark-color);
  margin-top: auto;
}

.p-panels-dark {
  font-size: 36px;
  color: var(--dark-color);
  margin-top: auto;
}

.p-panels-green {
  font-size: 36px;
  color: var(--dark-color);
  margin-top: auto;
  line-height: 1.5em;
}

.p-panels-black-modal {
  font-size: 20px;
  color: var(--n950);
}

.p-panels-blue-modal {
  font-size: 20px;
  color: var(--t500);
}

.p-panels-green-modal {
  font-size: 20px;
  color: var(--u600);
}

.p-panels-red-modal {
  font-size: 20px;
  color: var(--e500);
}

.questions-modal {
  font-size: 16px !important;
}

.answer-modal-color-green {
  color: var(--u600) !important;
}

.answer-modal-color-red {
  color: var(--e500) !important;
}

.answer-modal-color-black {
  color: var(--n950) !important;
}

.panel {
  padding: 8px;
  background: var(--dark-color);
  border-radius: 12px;
  margin-bottom: 16px;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  min-height: 136px;
}

.panel .mobile-profile-title {
  display: none;
}

.mobile-panel .profile-title,
.mobile-panel .doughnut-chart,
.mobile-panel .mobile-profile-title,
.mobile-panel .profile-info {
  display: none;
}

.panel .panel-image {
  flex: 3 1 184px;
  border-radius: var(--border-radius-sm);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 184px;
  height: 169px;
}

.panel .panel-middle {
  flex: 4 2 auto;
  padding-left: 24px;
}

.panel .panel-info {
  flex: 2 1 197px;
}

.panel .panel-graph {
  flex: 1 1 auto;
  padding-right: 8px;
}

.panel p {
  color: var(--light-color);
}

.panel ul li,
.panel div {
  color: var(--white-color);
}

.panel .panel-table {
  border: none;
}

.panel .panel-table tr td {
  color: var(--light-color);
  font-family: var(--default-font-family);
  font-size: 12px;
  font-style: normal;
  line-height: 1.75em;
}

.panel .panel-table tr td span {
  color: var(--white-color);
}

.panel.profile-team {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  padding: 26px 40px 40px 40px;
  background-color: var(--dark-color);
  border-radius: 12px;
  margin-bottom: 24px;
}

div.panel ol {
  padding-left: 24px;
}

div.panel ol,
div.panel ol li {
  font-size: 14px;
  line-height: 1.75em;
  color: var(--dark-color);
  margin-bottom: 16px;
  margin-top: 16px;
}

span.last-completed-label {
  font-size: 16px;
  line-height: 1.75em;
  display: block;
  text-align: center;
  color: var(--u300);
  margin: 8px;
}

.dots {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.dots div {
  font-size: 10px;
  line-height: 1.75em;
  color: var(--dark-color);
  display: flex;
  align-items: center;
  padding: 2px;
}

.dot {
  border-radius: 50%;
  width: 17px;
  height: 17px;
  background-color: var(--n950);
  display: inline-block;
}

  .dot-feedback {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: var(--white-color);
    border: none;
  }

  .dot.orange, .dot-feedback.orange {
    background-color: var(--primary-color);
  }

  .orange + .orange-label {
    color: var(--primary-color)
  }

.dot.blue {
  background-color: var(--t400);
}

.dot.gray {
  background-color: var(--n600);
}

section.accordion-feedback.accordion-feedback--radio{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.background-overlay-color {
  border: none;
  border-radius: 18px;
  background-color: var(--overlay-color) !important;
  box-shadow: none;
  resize: none;
}

.accordion-feedback-tab {
  position: relative;
  background-color: var(--overlay-color);
  border-radius: 8px;
}

.accordion-feedback-tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.accordion-feedback-tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}

.accordion-feedback-tab__content dot:hover {
    cursor: pointer;
}

.accordion-feedback-tab__content .dot-span {
    font-size: 10px;
}

.accordion-feedback__switch.switch .slider {
    background-color: var(--white-color);
}

.accordion-feedback-tab input:checked~.accordion-feedback-tab__content {
  max-height: 10rem;
}

.accordion-feedback {
  border: none;
  border-radius: 8px;
  overflow: hidden;
}

.accordion-feedback-tab__label {
  display: flex;
  color: var(--dark-color);
  background: var(--overlay-color);
  cursor: pointer;
  justify-content: space-between;
  padding-left: 80px;
  font-size: 12px;
  height: 65px;
  align-items: center;
}

.accordion-feedback-tab__content p {
  padding: 1rem;
  padding-left: 72px;
}

.accordion-feedback.accordion--radio label {
  margin: 0;
}

.accordion-feedback-number {
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    margin: 1%;
    width: 32px;
    min-height: 58px;
    min-height: -webkit-fill-available;
}

.accordion-feedback-number span {
  color: var(--white-color);
  font-size: 20px;
}

.accordion-feedback-tab .accordion-feedback-number {
  background-color: var(--primary-color);
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.accordion-feedback-tab .accordion-feedback-number.accordion-feedback-answered {
    background: var(--white-color);
  }
  .accordion-feedback-tab .accordion-feedback-number.accordion-feedback-answered span {
    color: var(--gray-color)
  }

.accordion-feedback-tab input:checked+.accordion-feedback-number {
    height: 90%;
    height: -webkit-fill-available;
    background-color: var(--white-color);
  }

  .accordion-feedback-tab input:checked+.accordion-feedback-number span {
    color: var(--dark-color);
  }


  .modal-schedule {
    padding: 16px;
  }

  .schedule-modal-body {
    display: flex;
    flex-direction: column;

    gap: 16px
  }

  .modal-schedule .accordion-feedback-tab input[type="radio"]:checked+.accordion-feedback-number {
    height: -webkit-fill-available;
  }

  .modal-schedule-title {
    width: 100%;
  }

  .modal-schedule .avatar {
    width: 50px;
    height: 50px;
  }

  .modal-schedule-header + span {
    font-size: 24px;
    line-height: 1.75em;
    color: var(--dark-color);
  }

  .modal-schedule .modal-header {
    padding: 0;
  }

  .modal-schedule .modal-body {
    padding: 0;
  }


  .modal-schedule .modal-schedule-header {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-schedule-close {
    width: 60px;
    height: 50px;
    justify-content: center;
    align-items: center;
    display: flex;


    padding: 12px 16px;
    background-color: var(--dark-color);
    border-radius: 8px;
    transition: var(--default-all-transition);
  }
  
  .modal-schedule-close:hover {
    background-color: var(--primary-color);
    transition: var(--default-all-transition);
    transform: var(--default-scale);
  }

  .modal-schedule-close span {
    color: var(--white-color) !important;
    font-size: 1rem;
  }

  .modal-schedule div.modal-schedule-header span {
    padding: 8px;
    text-align: left !important;
    max-width: 314px;
  }

  .modal-schedule__accordion_content > span.accordion-feedback-tab__label{

    font-size: 14px;
    line-height: 1.75em;
    color: var(--dark-color);

  }

  .accordion-feedback-tab input:checked~.accordion-feedback-tab__content.modal-schedule__accordion_content {
    padding-left: 48px;
    padding-right: 8px;
    padding-top: 16px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: fit-content;
  }

  .modal-schedule__accordion_content .accordion-feedback-tab__label {
    padding: 0;
    height: auto;
  }

  .modal-schedule-error-msg {
    display: none;
    color: var(--primary-color);
    font-size: 12px;
    line-height: 1.75em;
  }

  span.modal-schedule-show-error-msg {
    display: block !important;
  }

  .add-course__container {
    cursor: pointer;
    background-color: var(--overlay-color);
    padding: 8px;
    border-radius: 8px;
    width: 100%;
    align-items: center;
    display: flex;
    gap: 24px;
  }

  .course-result__container {
    background-color: var(--overlay-color);
    padding: 8px;
    border-radius: 8px;
    width: 100%;
    display: flex;
    gap: 24px;
  }

  .course-result__schedule-number {
      padding: 12px;
      background: var(--white-color);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .course-result__schedule-number span {
      font-size: 20px;
      color: var(--gray-color)
    }

    .course-result__schedule-due-date {
      padding: 8px;
      background: var(--white-color);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .course-result__schedule-due-date span {
      font-size: 12px;
      line-height: 1.75em;
    }

    .course-result__close {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-left: -16px;
    }

  .add-course__container span {
    color: var(--gray-color);
  }

  .add-course__plus-symbol {
    background-color: var(--primary-color);
    padding: 10px 18px 14px;
    border-radius: 8px;
  }

  .add-course__plus-symbol:hover {
    background-color: var(--dark-color);
    transition: var(--default-all-transition);
  }

  .button-container {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 16px;
  }

  .schedule-dropdown {
    width: 100%;
    position: relative;
    color: var(--white-color);
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    cursor: pointer;
  }

  .schedule-dropdown .schedule-select {
    height: 50px;
    transition: 0.3s;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .schedule-dropdown .schedule-select .schedule-selected {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .schedule-dropdown .schedule-select .schedule-selected.schedule-placeholder {
    color: var(--gray-color);
    font-size: 14px;
    font-style: normal;
    line-height: 1.75em;
  }

  .schedule-dropdown .schedule-menu {
    height: 152px;
    visibility: hidden;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: scroll;
    position: absolute;
    direction: rtl;
    width: 100%;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s;
    z-index: 1;
    align-items: flex-end;
    top: 110%;
    left: 0;
  }

  .schedule-dropdown .schedule-menu {
    list-style-type: none;
  }

  .schedule-dropdown .schedule-menu>div {
    position: absolute;
    top: 0;
    left: 0
  }

  .schedule-dropdown .schedule-menu>button {
    position: sticky;
    top: 0px;
    right: 0px;
    bottom: 0px;
    height: calc(152px - 16px);
    z-index: 2;
    border-radius: 8px;
    background: var(--overlay-color) !important;
    border: none !important;
    color: var(--primary-color) !important;
    padding: 8px;
    box-shadow: none;
  }

  .schedule-dropdown .schedule-menu>button:hover {
    background: var(--overlay-color) !important;
    transform: none !important;
    border: none !important;
  }

  .schedule-dropdown .schedule-menu li {
    cursor: pointer;
    padding: 10px 20px 10px 10px;
    text-align: end;
  }

  .schedule-dropdown .schedule-menu span {
    text-align: end;
    float: right;
    padding: 10px 32px 10px 10px;
  }

  .schedule-dropdown .schedule-menu li:hover {
    color: var(--primary-color);
  }

  .schedule-dropdown .schedule-menu-open {
    visibility: visible;
    opacity: 1;
    padding: 0;
    border-radius: 8px;
    background: var(--white-color);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.12);
    border: 8px solid var(--white-color);
    margin: 0;
  }

  .modal-schedule-input-date {
    justify-content: space-between;
    padding-left: 20px;
  }

  .modal-schedule-input-date input {
    border: none;
    width: fit-content;
    appearance: none;
  }

  .modal-schedule-input-date input[type="date"]::-webkit-inner-spin-button,
  .modal-schedule-input-date input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }

  .modal-schedule-input-date input[type="date"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .modal-schedule-input-date-display {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--gray-color);
  }

  .modal-schedule-input-date-display .modal-schedule__title-input{
    color: var(--dark-color);
    font-size: 14px;
    line-height: 1.5em;
  }

  .modal-schedule-input-date input[type="date"],
  .modal-schedule-input-date input[type="date"]::placeholder {
    color: var(--gray-color) !important;
    font-size: 14px !important;
    line-height: 1.75em !important;
  }

  .schedule_number_order {
    line-height: 1.75em;
    font-size: 20px;
    text-align: center;
  }

  .schedule-select .schedule-select__text {
    font-size: 14px;
    color: var(--dark-color);
    line-height: 1.75em;
  }

  .course-result__schedule-texts {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .course-result__schedule-texts span:nth-child(1) {
    color: var(--dark-color);
    font-size: 14px;
    line-height: 1.75em;
  }
  .course-result__schedule-texts span:nth-child(2) {
    color: var(--secondary-color);
    font-size: 12px;
    line-height: 1.75em;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
  .course-result__schedule-texts span:nth-child(3) {
    color: var(--dark-color);
    font-size: 12px;
    line-height: 1.75em;
  }

@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }

  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}

div[id^="selected-"] span:first-child {
  padding-left: 0;
}

div[id^="selected-"] span:last-child {
  border-right: none;
  padding-right: 0;
}

div[id^="selected-"] span {
  padding-right: 6px;
  padding-left: 6px;
  border-right: 1px solid var(--n100);
}

.country-card {
  padding: 20px;
  border: 1px solid var(--n400);
  border-radius: 10px;
  margin: 8px 0;
}

.course-small-inputs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.course-small-inputs div {
  display: flex;
  align-items: flex-start;
}

.course-small-inputs .cs-input {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 8px;
}

.course-small-inputs .cs-input select {
  width: 100%;
  font-size: 12px;
  line-height: 1.75em;
  color: var(--dark-color);
  background: var(--white-color);
  border-radius: 12px;
  border: 1px solid var(--b500) !important;
  padding: 14px 16px !important;
  min-height: 51px;
}

.course-small-inputs .cs-input label {
  margin-left: 0;
  margin-right: 0;
}

.table-permission .dataTables_filter,
.table-permission .dataTables_length,
.table-permission .dataTables_info,
.table-permission .dataTables_paginate {
  display: none !important;
}

.organisation-name-website {
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
}

.dropdown-menu .submenu {
  padding-left: 40px;
  list-style: none;
}

.dropdown-menu .submenu a.dropdown-item {
  padding-left: 0;
  font-size: 11px;
}

.text-sm {
  font-size: 12px !important;
}

.bottom-cad-course {
  display: flex;
  justify-content: space-between;
}

.bottom-cad-course .review-date input {
  width: 200px;
  margin: 12px 8px 0px 0px;
}

.sublink {
  font-size: 12px !important;
  color: var(--n300) !important;
  text-decoration: none !important;
}

table.dataTable td.text-pending {
  color: var(--primary-color);
}

table.dataTable td.text-approved {
  color: var(--u300);
}

table.dataTable td.text-disapproved {
  color: var(--e500);
}

.td-color-orange {
  color: var(--primary-color);
}

.td-color-red {
  color: var(--e500);
}

img.profile_picture {
  float: left;
  width: 34px;
  height: 34px;
  border-radius: var(--border-radius-sm);
  padding: 2px;
  object-fit: cover;
}

small.scheduled {
  color: var(--n900);
}

small.overdue,
small.incomplete,
small.required {
  color: var(--e500);
}

label.required {
  color: var(--e500);
}

small.in-progress {
  color: var(--t600);
}

small.duesoon {
  color: var(--primary-color);
}

div.doughnut-chart {
  width: 56px;
  height: 120px;
  position: relative;
  margin-left: auto;
}

div.circle {
  color: var(--white-color);
  font-family: var(--default-font-family);
  font-size: 8px;
  font-style: normal;
  line-height: normal;
  position: absolute;
  width: 50px;
  margin: 0 auto;
  top: 62px;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}

div.circle span {
  display: block;
  color: var(--white-color);
  font-size: 18px;
  line-height: 1.5em;
}

.overview-buttons {
  display: flex;
  justify-content: center;
  margin: 24px auto 0;
  width: 456px;
}

#monthly_recurring .overview-buttons,
#user_engagement .overview-buttons,
#overview .overview-buttons {
  width: 100%;
}

ul#menu_categories {
  overflow-y: auto;
  max-height: 384px;
}

.sub-category ul li a:hover {
  color: var(--primary-color);
  transition: all 0.2s linear;
}

div#course-assessment-content {
  background: var(--white-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 104px;
  padding-bottom: 32px;
}

.switch {
  position: relative;
  background-color: var(--gray-color);
  width: 32px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 2px;
  transition: var(--default-all-transition);
  cursor: pointer;
}

.slider {
  position: absolute;
  background-color: var(--n700);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: var(--default-all-transition);
}

[id*='chk']:checked~.switch {
  background-color: var(--dark-color);
}

[id*='chk']:checked~.switch .slider {
  transform: translateX(12px);
}

#close-cover {
  width: 20px;
  margin: 8px;
  cursor: pointer;
  background: var(--white-color);
  border-radius: 50%;
}

#close-cover-thumbnail {
  width: 20px;
  margin: 8px;
  cursor: pointer;
  background: var(--white-color);
  border-radius: 50%;
}

#top-impersonated {
  background-color: var(--dark-color);
  padding: 8px 0px;
  text-align: center;
  width: 100vw;
  min-height: 58px;
  position: absolute;
  top: 0;
}

#top-impersonated.bottom {
  bottom: 0;
  top: auto;
  position: fixed;
  z-index: 10;
}

#top-impersonated h3 {
  color: var(--white-color);
  margin: 0;
  font-size: 14px;
  line-height: 1.5em;
  letter-spacing: 0em;
}

#top-impersonated a {
  font-size: 14px;
  line-height: 1.75em;
  letter-spacing: 0em;
  text-align: left;
  background-color: var(--light-color);
  color: var(--dark-color);
  margin-left: 12px;
  border-radius: 8px;
  padding: 10px 12px;
  height: 41px;
  width: max-content;
}

#top-impersonated div.preview-mode {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  min-height: 40px;
  margin-left: 16px;
}

body:has(#top-impersonated) {
  /* padding-top: 58px; */
  /* TODO */
}

.right-options {
  display: flex;
  align-items: center;
  gap: 6px;
}

#shortcuts-container {
  overflow-x: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  box-shadow: 0px -7px 3px -7px var(--dark-transparent);
}

.mine-panels .shortcuts {
  background: var(--white-color);
  min-width: auto;
  margin-bottom: 16px;
  gap: 16px;
  overflow-x: auto;
}

.shortcuts {
  width: fit-content;
  max-width: 1363px;
  min-height: 65px;
  margin: 0 auto 0 auto;
  display: flex;
  padding: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-radius: var(--border-radius, 12px);
  background: var(--b500);
}

.shortcuts a {
  display: flex;
  padding: 12px 24px;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--border-radius-sm, 8px);
  color: var(--dark-color);
  font-size: 12px;
  line-height: 1.5em;
  text-align: center;
}

.mine-panels .shortcuts a {
  padding: 16px 24px;
}

.shortcuts a.active {
  background: var(--primary-color);
  box-shadow: var(--default-shadow);
  color: var(--white-color);
  padding: 12px 24px;
  min-height: 50px;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
  background: var(--b500) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
  border: 1px solid var(--secondary-color) !important;
  background: var(--secondary-color) !important;
  color: var(--dark-color) !important;
}

a.sub-link {
  color: var(--light-color);
  text-align: center;
  font-size: 10px;
  font-style: normal;
  line-height: 1.75em;
  text-transform: uppercase;
}

div#language-selector {
  display: flex;
  width: 32px;
  height: 91px;
  padding: 0px 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 0px;
  border-radius: 0px 8px 8px var(--border-radius, 12px);
  background: var(--white-transparent-label, rgba(236, 233, 227, 0.5));
  box-shadow: var(--default-shadow);
  backdrop-filter: var(--dark-color);
  cursor: pointer;
}

#language-selector p {
  color: var(--dark-color);
  font-size: 8px;
  font-style: normal;
  line-height: 1.75em;
  margin-bottom: 0;
}

table td span.d-block {
  display: inline-block;
  padding: 2px 4px;
  width: 146px;
  border-radius: 4px;
  border: 1px solid var(--white-color);
  background: var(--white-transparent-label, rgba(236, 233, 227, 0.5));
  box-shadow: var(--default-shadow);
  backdrop-filter: var(--dark-color);
  text-align: center;
  font-family: var(--default-font-family);
  font-size: 8px;
  font-style: normal;
  line-height: 1.75em;
  letter-spacing: 0.64px;
  text-transform: uppercase;
}

table td span.d-block:empty {
  padding: 0;
  background-color: var(--b500);
  border: none;
}

canvas {
  border-radius: 12px;
  background: transparent !important;
  padding: 16px 12px 8px 12px;
}

.table-responsive {
  min-height: 336px;
  overflow-y: hidden;
  padding-left: 0;
  padding-right: 0;
}

a.image-preview {
  font-size: 11px;
  line-height: 1.75em;
  display: inline-block;
  margin-left: 4px;
}

.option-column {
  position: relative;
}

a.input-change-button {
  display: flex;
  visibility: hidden;
  background: var(--primary-color) e6;
  border-radius: 12px;
  width: calc(100% - 24px);
  height: 50px;
  color: var(--white-color);
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 31px;
}

a.input-change-button:hover,
.option-column .input-option:hover+.input-change-button {
  visibility: visible;
}

span.clicked-file[data-media^="http"] {
  cursor: pointer;
}

span.clicked-file[data-media^="http"]:hover {
  color: var(--n950);
}

a.support-link:hover img {
  transition: all 0.3s ease-in-out;
  transform: var(--default-scale);
}

#font-manager {
  display: none;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.fs-14 {
  font-size: 14px !important;
  line-height: 1.75em !important;
}

.rating-container {
  display: inline-flex !important;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.dot-container {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}

dot {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--dark-color);
  border-radius: 50%;
  color: var(--dark-color, var(--s500));
  font-size: 10px;
  line-height: 1.75em;
}

dot.full {
  background: var(--light-color);
}

dot.half {
  background: linear-gradient(90deg, var(--light-color) 66%, rgba(255,255,255,0) 66%);
}

td:has(dot) {
  width: 120px;
}

.v3 {
  visibility: hidden !important;
  display: none !important;
}

img.avatar {
  max-width: 100%;
  width: 30%;
  height: 120px;
  border-radius: var(--border-radius-sm);
  margin-right: 0;
  position: relative;
  transition: var(--default-all-transition);
  object-fit: cover;
}

img.avatar:hover + a.change-avatar,
a.change-avatar:hover {
  display: block;
  transition: var(--default-all-transition);
}

a.change-avatar {
  display: none;
  width: 184px;
  height: auto;
  position: absolute;
  margin: 0 auto;
  text-align: center;
  top: 65px;
  left: 0px;
}

.profile-title {
  text-align: center;
  font-size: 12px;
  line-height: 1.5em;
  max-width: 48%;
  text-transform: capitalize;
  overflow: hidden;
}

.profile-title p.title {
  max-height: 104px;
  max-width: 208px;
  text-transform: initial;
  overflow: hidden;
  transition: none;
  margin-bottom: 8px;
}

.modal.modal-static {
  overflow-y: visible !important;
}

.modal.modal-static .modal-dialog {
  transform: none !important;
}

glossary {
  padding: 2px 2px 0px 2px;
  cursor: pointer;
  position: relative;
  border-bottom: 2px dotted var(--light-color);
}

div[role="tooltip"] {
  background: var(--white-color) !important;
  border-radius: var(--border-radius-xsm) !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
}

code {
  display: block;
  margin-bottom: 16px;
}

code + small {
  display: block;
}

.input-profile {
  padding: 0 8px;
  position: relative;
}

.btn-delete {
  display: inline-flex;
  transition: var(--default-all-transition);
}

.input-profile:hover input {
  width: calc(100% - 176px);
}

.input-profile label {
  position: relative;
  color: var(--secondary-color);
  font-size: 11px;
  line-height: 1.75em;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  top: 0;
  left: 8px;
  clear: both;
}

.input-profile input {
  height: 54px;
  border: none;
  padding: 8px 8px 0 0 !important;
  border-radius: var(--border-radius-xsm) !important;
  width: 100%;
  -webkit-box-shadow: 0px 0px 0px 1px var(--overlay-color);
  -moz-box-shadow: 0px 0px 0px 1px var(--overlay-color);
  box-shadow: 0px 0px 0px 1px var(--overlay-color);
  margin-bottom: 0;
}

.input-profile input:read-only {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.input-profile input:not(:read-only):focus {
  -webkit-box-shadow: 0px 0px 0px 1px var(--overlay-color) !important;
  -moz-box-shadow: 0px 0px 0px 1px var(--overlay-color) !important;
  box-shadow: 0px 0px 0px 1px var(--overlay-color) !important;
}

.input-profile a {
  float: right;
}

.empty-section {
  width: 100%;
  height: 396px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.empty-section .buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.description_width {
  width: 420px;
}

.qea-submit {
  margin-top: -56px;
  margin-right: 24px;
}

div#template-errors:has(div.alert) {
  background: rgba(62, 80, 91, 0.90);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
}

#selected_link_txt {
  font-size:10px;
  line-height: 1.75em;
}

div#video-area:empty {
  display: block;
}

div#video-area:empty + div#course-progress {
  margin-bottom: 26px !important;
}

#video-area .plyr--video {
  height: 100%;
}

#video-area .plyr__controls {
  padding-bottom: 4px;
  padding-left: 48px;
  padding-right: 48px;
}

#video-area button.plyr__control:not(.plyr__control--overlaid) {
  background: transparent !important;
  padding: 8px;
}

#video-area button.plyr__control.plyr__control--overlaid {
  position: absolute;
  padding: 24px;
  background-color: var(--primary-color) !important;
}

#video-area button.plyr__control.plyr__control--overlaid svg {
  width: 26px;
  height: 26px;
}

#video-area button.plyr__control.plyr__control--overlaid:hover {
  background-color: var(--secondary-color) !important;
  transform: translate(-50%,-50%) scale(0.98) !important;
}

#video-area .plyr__time {
  color: var(--overlay-color);
  font-size: 10px;
  font-style: normal;
  line-height: 1.75em;
}

#video-area .plyr__progress input {
  height: 2px;
  padding: 2px 0 !important;
}

#video-area .plyr__progress__buffer {
  height: 2px;
}

#video-area div[role="menu"] button.plyr__control {
  padding: 8px 32px 8px 8px;
  display: flex;
  box-shadow: none;
}

#video-area div[role="menu"] button.plyr__control:hover {
  box-shadow: none !important;
}

#video-area .plyr__menu__container .plyr__control[role=menuitemradio]:after {
  left: 13px;
}

#video-area button.plyr__control.plyr__control--back {
  padding-left: 32px;
  box-shadow: none !important;
}

#video-area input[type='range']::-webkit-slider-thumb {
  width: 0.01px;
  -webkit-appearance: none;
  height: 0.01px;
  cursor: ew-resize;
}

#course-description.video-is-playing,
#course-menu.video-is-playing,
#course-progress.video-is-playing {
  opacity: 0 !important;
}

.context-menu {
  display: none;
  position: absolute;
  z-index: 10;
  padding: 16px;
  border-radius: var(--border-radius);
  background: var(--dark-color);
  gap: 4px;
  flex-direction: column;
  width: 224px;
}

.context-menu.block {
  display: flex;
}

.context-menu .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

.context-menu .item:hover {
  background: var(--primary-color);
  border-radius: var(--border-radius-xsm);
}

.context-menu .item a {
  color: var(--white-color);
  font-size: 12px;
  line-height: 1.75em;
  width: 100%;
}

.context-menu .item small {
  color: var(--white-color);
  font-size: 8px;
  line-height: 1.75em;
  min-width: 56px;
  text-align: right;
}

img.result-thumb {
  width: 64px;
  height: auto;
  border-radius: var(--border-radius-xsm);
  margin-right: 4px;
}

.like small::after {
  content: ')';
}

.like small::before {
  content: '(';
}

#menu_container ul {
  padding: 0;
  list-style: none;
}

#menu_container ul li {
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
}

#menu_container ul li ul:empty {
  height: 44px;
  border: 1px dashed var(--dark-color);
  border-radius: var(--border-radius-sm);
}

[id$=_container] a.remove-field {
  margin-left: 8px;
  z-index: 9;
}

[id$=_container] a.remove-field img {
  width: 15px;
  height: auto;
}

[id$=_container] a.edit-field img {
  width: 14px;
  height: auto;
  opacity: 0.7;
}

[id$=_container] a[class$=-field] {
  float: right;
  opacity: 0;
  transition: var(--default-all-transition);
  position: relative;
  z-index: 8;
}

[id$=_container] ul li:hover a[class$=-field],
[id$=_container] div:hover a[class$=-field] {
  opacity: 1;
}

div#tab_container {
  min-height: 80px;
  display: flex;
}

div#tab_container input.form-control {
  cursor: pointer;
}

div#tab_container input.tab-selected {
  background-color: var(--dark-color) !important;
  color: var(--white-color) !important;
}

div#tab_container input.tab-selected::placeholder {
  color: var(--white-color) !important;
}

#tab_container .ui-state-highlight {
  min-width: 144px;
  max-height: 72px;
  border-radius: var(--border-radius-sm);
}

#carousel_container .ui-state-highlight {
  min-width: 224px;
}

#slideshow_container img {
  object-fit: cover;
}

div.sortable-div {
  border: 1px dashed transparent;
  padding: 0 4px;
}

div.sortable-div:hover {
  border: 1px dashed var(--dark-transparent);
  border-radius: var(--border-radius-sm);
  cursor: all-scroll;
  padding: 0 4px;
}

div#form_container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: stretch;
  justify-content: flex-start;
  align-items: baseline;
}

div#form_container.horizontal {
  flex-direction: row;
}

.cms-form.horizontal-form form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

div#form_container div.sortable-div:has(input[type="checkbox"]) {
  flex: 0;
  min-width: 72px;
}

div#form_container div.sortable-div {
  flex: 1;
  min-width: 96px;
  width: 100%;
}

#accordionCurriculum .accordion-body {
  padding: 0;
}

.accordion-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.accordion-body ul li {
  font-size: 14px;
  line-height: 1em;
  padding: 16px 24px;
  border-bottom: 1px solid var(--bs-border-color);
}

.curriculum-icon {
  width: 18px;
  height: auto;
  margin-top: -2px;
  margin-right: 4px;
}

ul.curriculum-list span {
  float: right;
}

.column-images-container {
  display: flex;
  width: auto;
  max-width: 220px;
  min-width: 50px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.column-item {
  flex: 0;
  transition: var(--default-all-transition);
}

.column-item.column-item-large {
  flex: 1;
}

.column-image {
  width: 150%;
  height: 50px;
  object-fit: cover;
  transition: var(--default-all-transition);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--white-transparent);
}

.column-item.column-item-small .column-image {
  width: 50px !important;
}

.column-item:last-child .column-image {
  width: 50px;
}

#video-area .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
  padding-bottom: 0;
  position: relative;
  transform: translateY(0%);
  height: 100%;
  width: 100%;
  top: 0;
}

#inviteModal .modal-body {
  margin-bottom: 32px;
  padding-bottom: 0;
  max-height: 616px;
}

video#player {
  width: 100%;
}

.copyright a {
  margin-left: 4px;
}

#selected-course-rows {
  display: flex;
  gap: 12px;
}

select#course {
  height: 50px;
}

.package-card .card-body {
  display: flex;
  flex-direction: column;
}

.package-card h5 {
  color: var(--primary-color);
  font-size: 18px;
  text-transform: initial;
}

.package-card small {
  line-height: 150%;
}

.package-card .price-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.package-card .price s {
  color: var(--dark-color);
  margin-right: 4px;
  font-size: 10px;
}

modal#pallet_colour {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  background: var(--dark-transparent);
  display: none;
}

modal#pallet_colour .pallet_container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 584px;
  height: auto;
  border-radius: var(--border-radius);
  background-color: var(--overlay-color);
  color: var(--white-color);
  padding: 16px 10px 4px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 12;
}

modal#pallet_colour .row .col {
  padding-bottom: 6px;
  padding-right: 0;
}

.selectize-control.plugin-remove_button .item .remove {
  border-left: none !important;
}

figure.table table {
  width: 100%;
}

figure.table table td,
figure.table table th {
  border: 1px solid var(--dark-color);
  padding: 4px 8px;
}

figure.table table th {
  color: #000;
}

#article-page h1 {
  font-size: 40px;
  line-height: 50px;
}

#article-page h2 {
  font-size: 14px;
  line-height: 1.75em;
}

#article-page h1,
#article-page h2 {
  color: var(--dark-color);
  text-align: left;
  margin-bottom: 24px;
}

#article-page .article-image {
  margin: 16px 0;
  position: relative;
}

#article-page .article-image img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

#article-page span.reading-time {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--white-color);
  border-radius: var(--border-radius) 0 0 0;
  color: var(--light-color);
  font-size: 24px;
  padding: 12px 24px;
}

#article-content h2 {
  font-size: 32px;
}

.article-related-section {
  background-color: var(--overlay-color);
  margin: 24px 0 48px 0;
  padding: 48px 0;
}

.article-related-section h3 {
  font-size: 40px !important;
  line-height: 1.3em;
  text-align: center;
  color: var(--dark-color);
  margin-bottom: 8px !important;
}

.article-related-section h3 strong {
  color: var(--primary-color);
}

.article-related-section p.subtitle { 
  padding: 8px 16px;
  text-align: center;
  margin-bottom: 32px;
}

audio#narration-player {
  display: none;
}

img.narration_icon {
  width: 32px;
  height: auto;
  opacity: 0.7;
  cursor: pointer;
}

img.narration_icon:not([src*="."]) {
  width: 0;
  height: 0;
}

img.narration_icon:hover {
  opacity: 0.9;
}

.notification_title {
  pointer-events: none;
}

span.badge.badge-product {
  background: var(--primary-color);
  color: var(--white-color);
  width: fit-content;
  position: absolute;
  top: -12px;
  right: 12px;
  font-size: 13px;
}

span.badge.badge-product svg {
  width: 16px;
  margin-top: -1px;
}

.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
  pointer-events: none;
}

#requestModal label {
  margin-top: 0;
}

.h-fit-content {
  height: fit-content !important;
}

.owl-carousel .owl-item img {
  width: auto !important;
}

html:has(#mobile-menu.block) {
  overflow: hidden !important;
}

#mobile-menu.block {
  display: block;
}

#mobile-menu.none {
  display: none;
}

.tiles-panel {
  display: flex;
  gap: 12px;
  margin: 0 0 16px 0;
  padding: 0 0 4px 0;
  overflow: auto;
}

.mine-panels.fixed-height {
  height: 168px !important;
}

#verify_section p {
  margin-bottom: 4px;
}

#verify_section label {
  margin: 0 6px 12px 6px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

#verify_section label span {
  margin-top: 2px;
}

#verify_section input {
  margin: 0 !important;
  height: 13px;
}

nav[aria-label="breadcrumb"] {
  padding-left: 0;
}

@media (min-width: 390px) {
  .input-profile label {
    position: absolute;
  }
}

@media (min-width: 768px) {
  p {
    font-size: 15px;
  }
  div {
    font-size: 15px;
  }
  canvas {
    padding: 0;
  }
  nav[aria-label="breadcrumb"] {
    padding-left: 12px;
  }
  .breadcrumb {
    margin-bottom: 8px;
  }
  .panel {
    display: flex;
  }
  .mobile-panel {
    display: none;
  }
  .tiles-panel {
    margin: 16px 0;
  }
  .course-texts {
    padding: 0 0 0 48px;
  }
  #course-description {
    padding: 0 24px 0 24px;
  }
  #course-lesson-content section {
    padding: 0 16px 0 48px;
  }
  #course-lesson-content section content {
    padding-top: 64px;
    padding-right: 32px;
    padding-bottom: 80px;
  }
  canvas {
    padding: 16px;
  }
  #course-info {
    width: 600px;
    padding: 0;
  }
  .manage-menu a {
    padding: 14px 16px 14px 20px;
  }
  #course-info h1 {
    font-size: 48px;
  }
  #course-info p {
    font-size: 20px;
    line-height: 1.75em;
  }
  #course-description .custom-w {
    max-width: calc(100% - 118px);
  }
  #course-menu {
    width: 416px;
    left: -416px;
    top: 88px;
  }
  #course-menu ul:first-child {
    margin: 0 16px 0 24px;
  }
  .question {
    width: 696px;
    height: auto;
    padding: 32px;
    margin: 0 auto;
  }
  #video-area button.plyr__controls__item.plyr__control[data-plyr="play"] {
    display: none;
  }
  div#course-assessment-content {
    padding-bottom: 16px;
  }
  .course-texts::before {
    left: 24px;
  }
  #course-close::before {
    left: 20px;
  }
  #course-close {
    padding-left: 48px;
  }
  div#course-lesson-content {
    height: calc(100% - 88px);
    margin-top: 88px;
  }
  #course-description {
    height: 88px;
  }
  #course-description h1 {
    font-size: 32px;
  }
  #course-description h1.menu-closed {
    width: calc(100vw - 328px);
  }
  #course-description span {
    font-size: 12px;
    width: auto;
  }
  #show-extra-content {
    display: block;
    left: 64px;
  }
  #show-extra-content:hover {
    bottom: -28px;
  }
  .article-related-section p.subtitle { 
    padding: 8px 128px;
  }
  .shortcuts {
    margin: 0 auto 32px auto;
    gap: 28px;
  }
  .shortcuts a {
    padding: 16px 32px;
    font-size: 14px;
  }
  .shortcuts a.active {
    padding: 16px 28px;
  }
  img.avatar {
    width: auto;
    height: 170px;
    margin-right: 8px;
  }
  .flex-row {
    justify-content: space-between;
    gap: 24px;
  }
  div.doughnut-chart {
    width: 170px;
    height: 170px;
  }
  .profile-title {
    max-width: 372px;
    margin-right: auto;
    text-align: left;
    margin-right: auto;
  }
  .w-75px {
    padding: 16px 24px !important;
  }
  .modal-schedule {
    padding: 32px;
  }
  .accordion-feedback-number {
    width: 56px;
  }
  .schedule-dropdown {
    padding: 0 16px;
  }
  .schedule-dropdown .schedule-menu {
    width: 100%;
  }
  .accordion-feedback-tab input:checked~.accordion-feedback-tab__content.modal-schedule__accordion_content {
    padding-left: 80px;
    padding-right: 24px;
  }
  .schedule-dropdown .schedule-select {
    height: 100%;
  }
  .schedule-dropdown .schedule-select .schedule-selected {
    max-width: 168px;
  }
  .modal-schedule-input-date-display {
    height: auto;
  }
  .course-result__schedule-number {
    padding: 14px 22px;
  }
  .course-result__schedule-due-date {
    padding: 8px 16px;
  }
  #shortcuts-container {
    position: relative;
    z-index: auto;
    box-shadow: none;
  }
  .panel {
    min-height: 185px;
    margin-bottom: 32px;
  }
  .grid-buttons {
    display: flex;
    margin-bottom: 32px;
  }
  .subtitle {
    margin-bottom: 24px;
  }
  #qea-get-help {
    padding: 44px 96px;
  }
  .sticky-banner span, .sticky-banner p, .sticky-banner a {
    font-size: 14px !important;
  }
  .kpi-column {
    min-height: 108px;
  }
  .mine-panels p:first-child,
  .mine-panels-team p:first-child,
  .kpi-panel p:first-child {
    margin-bottom: 8px;
  }
}

@media (min-width: 1400px) {
  #right-side-column {
    width: calc(50% - 300px) !important;
  }
  #bootstrap-left-column {
    width: calc(50% + 300px) !important;
  }
  .shortcuts {
    max-width: 1365px;
    min-height: 65px;
    padding: 0 8px;
  }
  .profile-title p.title {
    max-width: 296px;
  }
  .article-related-section p.subtitle { 
    padding: 8px 256px;
  }
}

@media (max-width: 1400px) {
  .overview-buttons {
    margin-top: 0px;
  }
}

@media (min-width: 1200px) {
  table.dataTable tbody tr td:has(input[type="checkbox"][name^="row"]) + td,
  table.dataTable tbody tr td:first-child:not(:has(input[type="checkbox"][name^="row"])) {
    box-shadow: none !important;
  }
  .panel {
    flex-wrap: nowrap;
  }
}

@media (min-width: 992px) {
  .input-profile label {
    position: absolute;
  }
  .input-profile input.has-1-buttons {
    width: calc(100% - 88px);
  }
  .input-profile input.has-2-buttons {
    width: calc(100% - 248px);
  }
  .input-profile input.has-3-buttons {
    width: calc(100% - 312px);
  }
  .input-profile input.has-4-buttons {
    width: calc(100% - 352px);
  }
  #authors-section .authors-container {
    overflow-y: auto;
    max-height: 160px;
  }
  .table-filters {
    margin-bottom: -56px;
    padding-bottom: 0;
  }
  .kpi-column {
    height: auto;
  }
  .mine-panels.fixed-height {
    height: 192px !important;
  }
}

@media (max-width: 992px) {
  .border-right {
    border: none;
  }
}

@media (max-width: 768px) {
  .related-resources {
    left: 0;
  }

  .border-left {
    border-left: none;
    border-top: 1px solid var(--dark-color);
  }

  .border-top {
    border-top: none !important;
  }
}

@media (max-width: 576px) {
  #course-description {
    justify-content: center;
  }

  /* TODO */
  /* #course-menu {
    position: absolute;
    top: 0;
    bottom: 0;
    padding-top: 2px;
  } */

  #course-progress .prev-section,
  #course-progress .next-section,
  #course-progress .progress-section {
    padding: 16px;
  }

  .popup-content {
    width: 312px;
  }

  body {
    overflow: auto !important;
  }
  .show-section {
    scroll-snap-align: none !important;
  }

}

#padlock {
  display: flex;
  width: 30px;
  height: 31px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  background: var(--dark-color, var(--s500));
}

#password-icon {
  width: 24px;
  height: 16.5px;
  fill: var(--dark-color, var(--s500));
}

#ipad {
  width: 26.182px;
  height: 32px;
  flex-shrink: 0;
  fill: var(--dark-color, var(--s500));
}

#iphone {
  width: 17px;
  height: 26px;
  flex-shrink: 0;
  fill: var(--dark-color, var(--s500));
}

#linkedin {
  width: 24px;
  height: 24px;
  fill: var(--dark-color, var(--s500));
}

#facebook {
  width: 24px;
  height: 24px;
  fill: var(--dark-color, var(--s500));
}

.custom-hr.hr-small {
  height: 1px;
  border-radius: 1px;
}

.custom-hr.hr-dark {
  background: #ECE9E380;
  margin: 0;
  height: 2px;
}

#mediaImg {
  margin: 24px 0px !important;
}

.modal-content .test-result {
  background: var(--b500) !important;
}

.modal-content .test-result .result-head .mine-panels {
  background: var(--white-color) !important;
}

.test-result .completed{
  background: var(--u500);
  border-color: var(--u500);
  color: var(--white-color);
}

.test-result .not-started{
  background: var(--e500);
  border-color: var(--e500);
  color: var(--white-color);
}

.test-result .p-panels-green-modal {
  color: var(--u500);
}

.test-result h4.questions-modal {
  color: var(--s500) !important;
  font-weight: 700 !important;
  line-height: 1.75em !important;
}

.test-result h1 {
  color: var(--s500);
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.5em !important;
}

.test-result .correct{
  border-radius: 4px;
  background: var(--u600);
  color: var(--white-color);
  padding: 2px 4px;
  margin: 0px 0px 0px 8px;
}

.test-result .no-correct{
  border-radius: 4px;
  background: var(--e500);
  color: var(--white-color);
  padding: 2px 4px;
  margin: 0px 0px 0px 8px;
}

.test-result .mine-panels.result-questions {
  border-radius: 6px;
  background: rgba(236, 233, 227, 0.50) !important;
}

.test-result.modal-footer {
  margin-top: 0px;
  justify-content: flex-end !important;
}

.pointer-label {
  cursor: pointer;
}

table .text-secondary-table {
  word-break: break-all;
  display: block;
}

cms {
  color: var(--e100);
  display: block;
  margin-bottom: 8px;
}

#editor {
  line-height: 24px;
  height: 640px;
  border-radius: 12px;
  border: 1px solid var(--primary-color);
  margin-bottom: 0;
}

#editor * {
  font-size: 14px !important;
  font-family: monospace !important;
}

.plyr--full-ui .plyr__volume {
    position: relative;
}

.plyr--full-ui .plyr__volume input[type="range"] {
    display: none;
}

.plyr--full-ui .plyr__volume:hover input[type="range"] {
    display: block;
    position: absolute;
    left: 35%;
    transform: translateX(-50%) rotate(-90deg);
    width: 100px;
    height: 1px;
    background-color: var(--n100);
    -webkit-appearance: none;
    appearance: none;
    margin-top: -120px;
    transition: all 0.3s ease;
}

.plyr--full-ui .plyr__volume:hover input[type="range"]::-webkit-slider-thumb {
    width: 8px;
    height: 8px;
    background: var(--white-color);
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
}

.plyr--full-ui .plyr__volume:hover input[type="range"]::-moz-range-thumb {
    width: 8px;
    height: 8px;
    background: var(--white-color);
    border-radius: 50%;
}

.color-container {
  position: relative;
}
.color-container label {
  position: absolute;
  top: calc(50% - 28px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 18px;
  pointer-events: none;
  cursor: pointer;
  text-shadow: 0px 1px 0px #ffffff91;
  filter: invert(1);
}

.style1 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 50px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0 !important;
}
.style1::-webkit-color-swatch {
  border-radius: var(--border-radius-sm);
  border: none;
}
.style1::-moz-color-swatch {
  border-radius: var(--border-radius-sm);
  border: none;
}

.style2 {
  height: 75px !important;
}

.colour-selection-container .col {
  text-align: center;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.colour-selection-container small {
  cursor: pointer;
  text-decoration: none;
}

.colour-selection-container small:hover {
  text-decoration: underline;
}

.input-group.customisation input {
  border-radius: var(--border-radius-sm) !important;
}

.input-group.customisation button {
  top: 4px !important;
  right: 4px !important;
  padding: 4px 8px !important;
  height: 40px !important;
}

.fit-content{
  width: fit-content;
}

.draggable-card {
  cursor: grab;
}

.draggable-card:active {
  cursor: grabbing;
}

td div.text-danger p {
  color: var(--bs-danger-rgb);
}

td div.text-success p {
  color: var(--bs-success-rgb);
}
#maintenance {
  height: 100vh;
}

.maintenance-social a{
  margin: 0px 8px;
}

.maintenance-social a svg{
  width: 32px;
  height: 32px;
}

#maintenance h2 {
  font-size: 24px !important;
}

#maintenance h1 {
  font-size: 48px;
  color: var(--dark-color);
  margin-bottom: 8px;
  text-align: center;
}

.small-input-number {
  width: 138px;
}

.small-white-input-number {
  width: 138px;
  background: var(--white-color);
}

#cookie-consent-banner {
  z-index: 1050;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  background-color: var(--white-transparent-label);
  backdrop-filter: var(--default-blur);
  max-width: 90%;
  margin: 0 auto;
  border-radius: 18px 18px 0 0;
}

.custom-list {
  list-style-type: decimal;
}

#cookie-consent-banner p,
#cookie-consent-banner h3,
#cookie-consent-banner h4,
#cookie-consent-banner li,
#cookie-consent-banner ol {
  color: var(--dark-color);
}

#cookie-consent-banner p{
  margin-bottom: 0px;
  font-size: 14px;
  line-height: 125%;
}

div.g-recaptcha {
  margin-left: 2px;
  margin-bottom: 12px;
}

.text-break {
  word-break: break-word; 
  white-space: normal
}