@font-face {
  font-family: 'Cerebri Sans';
  src: url("../fonts/cerebrisans/cerebrisans-regular.eot");
  src: url("../fonts/cerebrisans/cerebrisans-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/cerebrisans/cerebrisans-regular.woff") format("woff"), url("../fonts/cerebrisans/cerebrisans-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cerebri Sans';
  src: url("../fonts/cerebrisans/cerebrisans-medium.eot");
  src: url("../fonts/cerebrisans/cerebrisans-medium.eot?#iefix") format("embedded-opentype"), url("../fonts/cerebrisans/cerebrisans-medium.woff") format("woff"), url("../fonts/cerebrisans/cerebrisans-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Cerebri Sans';
  src: url("../fonts/cerebrisans/cerebrisans-semibold.eot");
  src: url("../fonts/cerebrisans/cerebrisans-semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/cerebrisans/cerebrisans-semibold.woff") format("woff"), url("../fonts/cerebrisans/cerebrisans-semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* Global */
/* ::-moz-selection {
  background-color: #ECE2FF;
}
::selection {
  background-color: #ECE2FF;
} */

body {
  color: #1B2A3D;
  background: #F3F5F7 !important;
  height: 100%;
  font-size: 15px;
  font-family: "Cerebri Sans", sans-serif !important;
  overflow-x: hidden;
}

body a, body p {
  font-size: 15px;
}

body.lock-scroll {
  overflow: hidden;
}

text {
  font-family: "Cerebri Sans", sans-serif !important;
}

.w-underline {
  text-decoration: underline;
}

a.text-primary, .text-primary {
  color: #0073e0 !important;
}

a.text-primary:hover, a.text-primary:active, a.text-primary:focus, .text-primary:hover, .text-primary:active, .text-primary:focus {
  color: #0059AD !important;
}

@media screen and (max-width: 767px) {
  a.text-primary-767,
  .text-primary-767 {
    color: #0073e0;
  }
}

.text-pink {
  color: #FB5779 !important;
}

.text-pink-2 {
  color: #CD1989 !important;
}

.container-narrow {
  padding-left: 4.4rem;
  padding-right: 4.4rem;
}

.content-overflow {
  overflow-x: auto;
}

.overflow-hidden {
  overflow: hidden !important;
}

.text-success {
  color: #00C177 !important;
}

.text-warning {
  color: #FF9A07 !important;
}

.text-yellow {
  color: #FFC606 !important;
}

hr {
  border-color: #d4dde3 !important;
}

a {
  color: #0073e0;
}

a:hover {
  color: #0059AD;
}

a:not([href]):not([tabindex]) {
  color: #1B2A3D;
}

.link-a {
  cursor: pointer;
}

.border {
  border: 1px solid #d4dde3 !important;
}

.border-y {
  border-top: 1px solid #d4dde3 !important;
  border-bottom: 1px solid #d4dde3 !important;
}

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

@media screen and (max-width: 991px) {
  .border-none-991 {
    border: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .border-none-767 {
    border: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .border-right-none-767 {
    border-right: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .border-left-none-767 {
    border-left: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .border-top-767 {
    border-top: 1px solid #d4dde3 !important;
  }
}

@media screen and (max-width: 767px) {
  .border-bottom-767 {
    border-bottom: 1px solid #d4dde3 !important;
  }
}

.border-danger {
  border-color: #D5305D !important;
}

.border-danger-light {
  border: 1px solid #ffdee7 !important;
}

.border-success-light {
  border: 1px solid #c1eada !important;
}

.b-none {
  border: none !important;
}

.rounded-lg {
  border-radius: 10px !important;
}

.rounded-xlg {
  border-radius: 20px !important;
}

.rounded-top-left-lg {
  border-top-left-radius: 10px !important;
}

.rounded-top-right-lg {
  border-top-right-radius: 10px !important;
}

.rounded-bottom-left-lg {
  border-bottom-left-radius: 10px !important;
}

.rounded-bottom-right-lg {
  border-bottom-right-radius: 10px !important;
}

.rounded-sm {
  border-radius: 4px !important;
}

.rounded {
  border-radius: 6px !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.border-bottom {
  border-bottom: 1px solid #d4dde3 !important;
}

.border-white {
  border-color: rgba(255, 255, 255, 0.7) !important;
}

.border-white-faded {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

@media screen and (max-width: 767px) {
  .border-bottom-767 {
    border-bottom: 1px solid #d4dde3 !important;
  }
}

.border-top {
  border-top: 1px solid #d4dde3 !important;
}

@media screen and (max-width: 767px) {
  .border-top-767 {
    border-top: 1px solid #d4dde3 !important;
  }
}

@media screen and (max-width: 991px) {
  .py-0-991 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .px-3 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .p-0-767 {
    padding: 0px !important;
  }
  .px-0-767 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .pl-12-767 {
    padding-left: 12px !important;
  }
  .pr-12-767 {
    padding-right: 12px !important;
  }
  .pl-18-767 {
    padding-left: 18px !important;
  }
  .pr-18-767 {
    padding-right: 18px !important;
  }
  .py-0-767 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}

.border-left {
  border-left: 1px solid #d4dde3 !important;
}

.border-right {
  border-right: 1px solid #d4dde3 !important;
}

.border-is-danger {
  border-color: #D5305D !important;
}

@media screen and (max-width: 767px) {
  .border-none-767 {
    border: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .border-left-none-767 {
    border-left: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .border-right-none-767 {
    border-right: 0px !important;
  }
}

.font-base-primary {
  font-family: "Cerebri Sans", sans-serif !important;
}

.font-weight-600, .font-weight-bolder {
  font-weight: 500 !important;
}

.font-weight-600 p, .font-weight-bolder p {
  font-weight: 500 !important;
}

.font-weight-400, .font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-300 {
  font-weight: 300 !important;
}

.text-dark {
  color: #1B2A3D !important;
}

.text-muted {
  color: #859BA6 !important;
}

.text-faded {
  opacity: .4;
}

.text-faded-2 {
  opacity: .6;
}

.text-muted-strong {
  color: #566B76 !important;
}

.text-xss {
  font-size: 11px !important;
}

.text-xs {
  font-size: 12px !important;
  line-height: 1.4;
}

.text-sm {
  font-size: 13px !important;
  line-height: 1.3;
}

.text-body {
  font-size: 15px !important;
}

@media screen and (max-width: 767px) {
  .text-sm-mobile {
    font-size: 14px !important;
    line-height: 1.3;
  }
}

@media screen and (max-width: 767px) {
  .text-xs-mobile {
    font-size: 13px !important;
    line-height: 1.4;
  }
}

.text-xsm {
  font-size: 1rem !important;
  line-height: 1.4;
}

.text-xsm p {
  font-size: 1rem !important;
}

.text-xsm-2 {
  font-size: 1.1rem !important;
  line-height: 1.3;
}

@media screen and (max-width: 767px) {
  .text-xsm-2-mobile {
    font-size: 1.1rem !important;
    line-height: 1.3;
  }
}

.text-md-2 {
  font-size: 1.2rem !important;
  line-height: 1.3;
}

@media screen and (max-width: 767px) {
  .text-md-2 {
    font-size: 1.1rem !important;
    line-height: 1.3;
  }
}

.text-md-3 {
  font-size: 1.1rem !important;
}

.text-md {
  font-size: 1.4rem !important;
}

@media screen and (max-width: 767px) {
  .text-md-mobile {
    font-size: 1.1rem !important;
  }
}

.text-lg {
  font-size: 1.8rem !important;
}

@media screen and (max-width: 767px) {
  .text-lg-mobile {
    font-size: 1.2rem !important;
  }
}

.h-auto {
  height: auto !important;
}

.text-xlg {
  font-size: 2.2rem !important;
}

.text-xlg-lh-sm {
  line-height: 1.1;
}

@media screen and (max-width: 767px) {
  .text-xlg-mobile {
    font-size: 1.8rem !important;
  }
}

.text-xxlg {
  font-size: 2.8rem !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-underline {
  text-decoration: underline !important;
}

.smallest {
  font-size: 10px !important;
}

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

.small, small {
  font-size: 13px !important;
}

@media screen and (max-width: 767px) {
  .text-left-mobile {
    text-align: left !important;
  }
}

.flex-1 {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 0 auto !important;
          flex: 1 0 auto !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
      flex-shrink: 0 !important;
}

.flex-grow-1 {
  -webkit-box-flex: 1 !important;
      -ms-flex-positive: 1 !important;
          flex-grow: 1 !important;
}

@media screen and (max-width: 767px) {
  .d-flex.mb-4 {
    margin-bottom: 16px !important;
  }
}

.d-flex-separator {
  width: 1px;
  height: 32px;
  background-color: #d4dde3;
}

@media screen and (max-width: 767px) {
  .d-block-full-mobile,
  .div-full-mobile {
    margin-left: -12px;
    margin-right: -12px;
  }
}

@media screen and (max-width: 767px) {
  .d-flex.mb-3 {
    margin-bottom: 8px !important;
  }
}

@media screen and (max-width: 767px) {
  .mb-3 {
    margin-bottom: 8px !important;
  }
}

.block-w-arrow {
  position: relative;
}

.block-w-arrow:before {
  content: '';
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #F3F5F7;
  position: absolute;
  top: -8px;
  left: 12px;
}

@media screen and (max-width: 767px) {
  .block-border-mobile {
    padding: 1rem;
    border: 1px solid #d4dde3;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
  }
}

@media screen and (max-width: 991px) {
  .block-border-mobile-991 {
    padding: 1rem;
    border: 1px solid #d4dde3;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
  }
}

.disabled {
  opacity: .5;
}

.pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.shadow {
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
}

.shadow-i {
  -webkit-box-shadow: 0 -1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 -1px 2px rgba(18, 38, 63, 0.1) !important;
}

.shadow-none {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.va-middle {
  vertical-align: middle !important;
}

.p-3 {
  padding: 18px !important;
}

@media screen and (max-width: 767px) {
  .p-3 {
    padding: 12px !important;
  }
}

@media screen and (max-width: 400px) {
  .p-3 {
    padding: 8px !important;
  }
}

@media screen and (max-width: 767px) {
  .pt-0-767 {
    padding-top: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .pb-0-767 {
    padding-bottom: 0px !important;
  }
}

.padding-btn {
  padding: .5rem .75rem;
}

.tooltip .tooltip-inner {
  font-size: .8rem;
  line-height: 1.1;
  padding: .6rem;
}

.show-mobile, .show-767 {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .show-mobile, .show-767 {
    display: block !important;
  }
}

.show-mobile-inline-block, .show-767-inline-block {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .show-mobile-inline-block, .show-767-inline-block {
    display: inline-block !important;
  }
}

.show-mobile-991 {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .show-mobile-991 {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile, .hide-767 {
    display: none !important;
  }
}

@media screen and (max-width: 991px) {
  .hide-mobile-991, .hide-mobile-767 {
    display: none !important;
  }
}

.w-auto {
  width: auto !important;
}

@media screen and (max-width: 767px) {
  .w-100-mobile, .w-100-767 {
    width: 100% !important;
  }
}

@media screen and (max-width: 991px) {
  .w-100-mobile-991 {
    width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .w-50-mobile {
    width: 50% !important;
  }
}

@media screen and (max-width: 991px) {
  .d-flex-mobile-991 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
  .d-flex-mobile-991.justify-content-between {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    width: 100%;
  }
  .d-flex-mobile-991.align-items-end, .d-flex-mobile-991.align-items-center {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .d-flex-mobile {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
  .d-flex-mobile.justify-content-between {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    width: 100%;
  }
  .d-flex-mobile.align-items-end, .d-flex-mobile.align-items-center {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .align-items-start-tab {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
}

@media screen and (max-width: 767px) {
  .align-items-start-mobile {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
}

@media screen and (max-width: 767px) {
  .text-right-mobile {
    text-align: right;
  }
}

@media screen and (max-width: 767px) {
  .center-mobile, .text-center-mobile {
    text-align: center !important;
  }
}

@media screen and (max-width: 767px) {
  .d-flex-mobile-full {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .d-flex-mobile-full div, .d-flex-mobile-full .form-control, .d-flex-mobile-full .custom-select, .d-flex-mobile-full .btn {
    width: 100%;
    margin-right: 0px !important;
    margin-left: 0px !important;
  }
  .d-flex-mobile-full.justify-content-between {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
}

@media screen and (max-width: 767px) {
  .justify-content-between-mobile {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (max-width: 991px) {
  .justify-content-between-mobile-991 {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (max-width: 767px) {
  .justify-content-center-mobile {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 991px) {
  .justify-content-center-mobile-991 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  .justify-content-end-mobile {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
}

@media screen and (max-width: 991px) {
  .justify-content-end-mobile-991 {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
}

@media screen and (max-width: 767px) {
  .d-flex-on-mobile {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}

@media screen and (max-width: 767px) {
  .align-items-end-mobile {
    -webkit-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }
}

.progress-bar.bg-danger {
  background: #D5305D !important;
  border: none !important;
}

.ws-normal {
  white-space: normal;
}

.primary-3d {
  -webkit-box-shadow: 0px 4px 0px 0px #004d97 !important;
          box-shadow: 0px 4px 0px 0px #004d97 !important;
}

.light-3d {
  -webkit-box-shadow: 0px 4px 0px 0px #eaedf1 !important;
          box-shadow: 0px 4px 0px 0px #eaedf1 !important;
}

.border-active {
  border-color: #0073e0 !important;
}

.position-relative {
  position: relative;
}

.text-truncate {
  text-overflow: ellipsis;
  width: 90%;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-block,
.block-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-ellipsis-2 {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.block-ellipsis-3 {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.class-title-ellipsis,
.category-class-ellipsis,
.ellipsis-base {
  width: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: #ffffff;
}

.ellipsis-base {
  width: 100%;
  background: transparent;
}

.block-120-ellipsis,
.block-80-ellipsis {
  display: block;
  width: 120px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.block-80-ellipsis {
  width: 80px;
}

.category-class-ellipsis {
  display: inline-block;
  width: 100%;
  text-align: right;
}

@media screen and (max-width: 991px) {
  .category-class-ellipsis {
    display: none !important;
  }
}

@media screen and (min-width: 992px) {
  .h-100-desktop {
    height: 100% !important;
  }
}

.min-100vh {
  min-height: 100vh;
}

.min-100vh-2 {
  min-height: calc(100vh - 113px);
}

@media screen and (max-width: 991px) {
  .min-100vh-tab {
    min-height: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .min-100vh-mobile {
    min-height: 100% !important;
  }
}

.min-100vh-w-head {
  min-height: calc(100vh - 90px);
}

@media screen and (max-width: 767px) {
  .custom-layout-mobile-1 {
    margin-right: -12px;
    padding-right: 12px;
  }
}

.list-group-item {
  border-color: #d4dde3;
}

.position-sticky {
  position: -webkit-sticky;
  position: sticky;
}

@media screen and (max-width: 991px) {
  .border-bottom-none-991 {
    border-bottom: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .border-bottom-none-767 {
    border-bottom: 0px !important;
  }
}

.block-absolute-scroll,
.centering-wrapper {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

@media screen and (max-width: 767px) {
  .block-absolute-scroll,
  .centering-wrapper {
    position: relative;
  }
}

.hover-blue {
  border: 1px solid #d4dde3 !important;
}

.hover-blue:hover {
  border-color: #0073e0 !important;
}

.hover-bg-light:hover {
  background: #F3F5F7;
}

.hover-link:hover {
  color: #0073e0 !important;
}

.hover-link:hover .text-dark {
  color: #0073e0 !important;
}

.hover-link .text-dark:hover {
  color: #0073e0 !important;
}

.block-empty-state,
.block-loading-state {
  pointer-events: none;
}

.h-34 {
  height: 34px;
}

.max-h-300, .max-h-400, .max-h-600, .max-h-800 {
  position: relative;
  overflow: hidden;
  overflow-y: auto;
}

.max-h-300 {
  max-height: 300px;
}

.max-h-400 {
  max-height: 400px;
}

.max-h-600 {
  max-height: 600px;
}

.max-h-800 {
  max-height: 800px;
}

.max-h-300, .max-h-400, .max-h-600, .max-h-800 {
  position: relative;
  overflow: hidden;
  overflow-y: auto;
}

.max-h-300 {
  max-height: 300px;
}

.max-h-400 {
  max-height: 400px;
}

.max-h-600 {
  max-height: 600px;
}

.max-h-800 {
  max-height: 800px;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

.number-li {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  font-weight: 500;
}

.number-li.number-li-primary {
  background: #0073e0;
  color: #ffffff;
  border: 1px solid #0073e0;
}

@media screen and (min-width: 768px) {
  .h34-desktop {
    height: 34px;
  }
}

.thumb-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F3F5F7;
  border-radius: 6px;
  padding-top: 100%;
  width: 80px;
}

@media screen and (max-width: 767px) {
  .thumb-dashboard-img {
    width: 56px;
  }
}

.block-img-square {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80px;
  width: 80px;
}

.block-img-square.sm {
  height: 60px;
  width: 60px;
}

.block-img-square.style2 {
  height: 90px;
  background-size: contain;
}

.block-img-square.style3 {
  width: 120px;
}

.frame_preview {
  border: 0px !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .header-mobile {
    background: #ffffff;
    height: 52px;
  }
  .header-mobile .class-title-ellipsis {
    width: 80%;
  }
  .header-mobile .text-md-2 {
    font-size: 1rem !important;
  }
}

.text-long-wrap {
  white-space: pre-wrap;
  /* CSS3 */
  white-space: -moz-pre-wrap;
  /* Firefox */
  white-space: -pre-wrap;
  /* Opera <7 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* IE */
}

.student-initial,
.teacher-initial {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: .8rem;
  font-weight: 600;
  color: #859BA6;
  width: 38px;
  height: 38px;
  border-radius: 19px;
  background-color: #F3F5F7;
}

.simplebar-scrollbar:before {
  background-color: #566B76;
}

.full-h-72 {
  height: calc(100vh - 72px);
  overflow-y: auto;
  overflow-x: hidden;
}

@media screen and (max-width: 767px) {
  .full-h-72 {
    height: auto;
  }
}

.pl-18 {
  padding-left: 18px !important;
}

@media screen and (max-width: 767px) {
  .pl-18 {
    padding-left: 12px !important;
  }
}

@media screen and (max-width: 400px) {
  .pl-18 {
    padding-left: 8px !important;
  }
}

.pr-18 {
  padding-right: 18px !important;
}

@media screen and (max-width: 767px) {
  .pr-18 {
    padding-right: 12px !important;
  }
}

@media screen and (max-width: 400px) {
  .pr-18 {
    padding-right: 8px !important;
  }
}

.one-col-84vh .col-md-12 {
  height: 84vh;
}

.two-col-40vh .col-md-6 {
  height: 40vh;
}

.two-col-64vh .col-md-6 {
  height: 64vh;
}

.two-col-74vh .col-md-6 {
  height: 74vh;
}

.two-col-84vh .col-md-6 {
  height: 84vh;
}

.two-col-90vh .col-md-6 {
  height: 90vh;
}

.text-highlight {
  padding: 4px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 4px;
  display: inline;
  line-height: 0;
}

/* Counting Number */
.counting-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.counting-number .cn-separator {
  display: block;
  height: 12px;
  width: 2px;
  -webkit-transform: skewX(-12deg);
          transform: skewX(-12deg);
  background-color: #1B2A3D;
  margin: 0 6px;
  opacity: .5;
}

.counting-number .cn-count {
  opacity: .5;
}

.counting-number.text-white .cn-separator {
  background-color: #ffffff;
}

.quest-journey {
  position: relative;
}

.quest-journey .journey-assets img {
  width: 210px;
  position: absolute;
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

.quest-journey .journey-assets img:nth-child(1) {
  top: 68px;
  right: 110px;
}

.quest-journey .journey-assets img:nth-child(2) {
  top: 400px;
  left: 110px;
}

.quest-journey .journey-assets img.disabled {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.journeys {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem 0;
  position: relative;
}

.journeys .journey-item {
  display: block;
  position: relative;
}

.journeys .journey-item img {
  width: 78px;
  cursor: pointer;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

.journeys:first-child {
  padding-top: 0px;
}

.journeys:nth-child(10n+1) .journey-item {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.journeys:nth-child(10n+2) .journey-item {
  -webkit-transform: translateX(-48px);
          transform: translateX(-48px);
}

.journeys:nth-child(10n+3) .journey-item {
  -webkit-transform: translateX(-80px);
          transform: translateX(-80px);
}

.journeys:nth-child(10n+4) .journey-item {
  -webkit-transform: translateX(-48px);
          transform: translateX(-48px);
}

.journeys:nth-child(10n+5) .journey-item {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.journeys:nth-child(10n+6) .journey-item {
  -webkit-transform: translateX(48px);
          transform: translateX(48px);
}

.journeys:nth-child(10n+7) .journey-item {
  -webkit-transform: translateX(80px);
          transform: translateX(80px);
}

.journeys:nth-child(10n+8) .journey-item {
  -webkit-transform: translateX(48px);
          transform: translateX(48px);
}

.journeys:nth-child(10n+9) .journey-item {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.journeys:nth-child(10n+10) .journey-item {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.journeys .start-journey {
  background-color: #0073e0;
  padding: 8px 12px;
  border-radius: 10px;
  position: absolute;
  top: -52px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 1px;
  border: 2px solid #ffffff;
  -webkit-animation: startbounce 2s infinite;
          animation: startbounce 2s infinite;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

.journeys .start-journey:before {
  content: '';
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  position: absolute;
  bottom: -6px;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #0073e0;
}

.journeys.active .journey-item:hover .start-journey {
  background-color: #0059AD;
}

.journeys.active .journey-item:hover .start-journey:before {
  background: #0059AD;
}

.journeys.active .journey-item:hover img {
  opacity: .8;
}

@-webkit-keyframes startbounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  40% {
    -webkit-transform: translateX(-50%) translateY(-10px);
            transform: translateX(-50%) translateY(-10px);
  }
  60% {
    -webkit-transform: translateX(-50%) translateY(-5px);
            transform: translateX(-50%) translateY(-5px);
  }
}

@keyframes startbounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  40% {
    -webkit-transform: translateX(-50%) translateY(-10px);
            transform: translateX(-50%) translateY(-10px);
  }
  60% {
    -webkit-transform: translateX(-50%) translateY(-5px);
            transform: translateX(-50%) translateY(-5px);
  }
}

.img-grayscale {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  opacity: .4;
}

.row {
  margin-left: -18px;
  margin-right: -18px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  padding-left: 18px;
  padding-right: 18px;
}

.col-50 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
  max-width: 50%;
  padding-left: 18px;
  padding-right: 18px;
}

.row-sm {
  margin-left: -8px;
  margin-right: -8px;
}

.row-sm .col, .row-sm .col-1, .row-sm .col-10, .row-sm .col-11, .row-sm .col-12, .row-sm .col-2, .row-sm .col-3, .row-sm .col-4, .row-sm .col-5, .row-sm .col-6, .row-sm .col-7, .row-sm .col-8, .row-sm .col-9, .row-sm .col-auto, .row-sm .col-lg, .row-sm .col-lg-1, .row-sm .col-lg-10, .row-sm .col-lg-11, .row-sm .col-lg-12, .row-sm .col-lg-2, .row-sm .col-lg-3, .row-sm .col-lg-4, .row-sm .col-lg-5, .row-sm .col-lg-6, .row-sm .col-lg-7, .row-sm .col-lg-8, .row-sm .col-lg-9, .row-sm .col-lg-auto, .row-sm .col-md, .row-sm .col-md-1, .row-sm .col-md-10, .row-sm .col-md-11, .row-sm .col-md-12, .row-sm .col-md-2, .row-sm .col-md-3, .row-sm .col-md-4, .row-sm .col-md-5, .row-sm .col-md-6, .row-sm .col-md-7, .row-sm .col-md-8, .row-sm .col-md-9, .row-sm .col-md-auto, .row-sm .col-sm, .row-sm .col-sm-1, .row-sm .col-sm-10, .row-sm .col-sm-11, .row-sm .col-sm-12, .row-sm .col-sm-2, .row-sm .col-sm-3, .row-sm .col-sm-4, .row-sm .col-sm-5, .row-sm .col-sm-6, .row-sm .col-sm-7, .row-sm .col-sm-8, .row-sm .col-sm-9, .row-sm .col-sm-auto, .row-sm .col-xl, .row-sm .col-xl-1, .row-sm .col-xl-10, .row-sm .col-xl-11, .row-sm .col-xl-12, .row-sm .col-xl-2, .row-sm .col-xl-3, .row-sm .col-xl-4, .row-sm .col-xl-5, .row-sm .col-xl-6, .row-sm .col-xl-7, .row-sm .col-xl-8, .row-sm .col-xl-9, .row-sm .col-xl-auto {
  padding-left: 8px;
  padding-right: 8px;
}

@media screen and (max-width: 767px) {
  .row-sm {
    margin-left: -4px;
    margin-right: -4px;
  }
  .row-sm .col, .row-sm .col-1, .row-sm .col-10, .row-sm .col-11, .row-sm .col-12, .row-sm .col-2, .row-sm .col-3, .row-sm .col-4, .row-sm .col-5, .row-sm .col-6, .row-sm .col-7, .row-sm .col-8, .row-sm .col-9, .row-sm .col-auto, .row-sm .col-lg, .row-sm .col-lg-1, .row-sm .col-lg-10, .row-sm .col-lg-11, .row-sm .col-lg-12, .row-sm .col-lg-2, .row-sm .col-lg-3, .row-sm .col-lg-4, .row-sm .col-lg-5, .row-sm .col-lg-6, .row-sm .col-lg-7, .row-sm .col-lg-8, .row-sm .col-lg-9, .row-sm .col-lg-auto, .row-sm .col-md, .row-sm .col-md-1, .row-sm .col-md-10, .row-sm .col-md-11, .row-sm .col-md-12, .row-sm .col-md-2, .row-sm .col-md-3, .row-sm .col-md-4, .row-sm .col-md-5, .row-sm .col-md-6, .row-sm .col-md-7, .row-sm .col-md-8, .row-sm .col-md-9, .row-sm .col-md-auto, .row-sm .col-sm, .row-sm .col-sm-1, .row-sm .col-sm-10, .row-sm .col-sm-11, .row-sm .col-sm-12, .row-sm .col-sm-2, .row-sm .col-sm-3, .row-sm .col-sm-4, .row-sm .col-sm-5, .row-sm .col-sm-6, .row-sm .col-sm-7, .row-sm .col-sm-8, .row-sm .col-sm-9, .row-sm .col-sm-auto, .row-sm .col-xl, .row-sm .col-xl-1, .row-sm .col-xl-10, .row-sm .col-xl-11, .row-sm .col-xl-12, .row-sm .col-xl-2, .row-sm .col-xl-3, .row-sm .col-xl-4, .row-sm .col-xl-5, .row-sm .col-xl-6, .row-sm .col-xl-7, .row-sm .col-xl-8, .row-sm .col-xl-9, .row-sm .col-xl-auto {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.row-xs {
  margin-left: -4px;
  margin-right: -4px;
}

.row-xs .col, .row-xs .col-1, .row-xs .col-10, .row-xs .col-11, .row-xs .col-12, .row-xs .col-2, .row-xs .col-3, .row-xs .col-4, .row-xs .col-5, .row-xs .col-6, .row-xs .col-7, .row-xs .col-8, .row-xs .col-9, .row-xs .col-auto, .row-xs .col-lg, .row-xs .col-lg-1, .row-xs .col-lg-10, .row-xs .col-lg-11, .row-xs .col-lg-12, .row-xs .col-lg-2, .row-xs .col-lg-3, .row-xs .col-lg-4, .row-xs .col-lg-5, .row-xs .col-lg-6, .row-xs .col-lg-7, .row-xs .col-lg-8, .row-xs .col-lg-9, .row-xs .col-lg-auto, .row-xs .col-md, .row-xs .col-md-1, .row-xs .col-md-10, .row-xs .col-md-11, .row-xs .col-md-12, .row-xs .col-md-2, .row-xs .col-md-3, .row-xs .col-md-4, .row-xs .col-md-5, .row-xs .col-md-6, .row-xs .col-md-7, .row-xs .col-md-8, .row-xs .col-md-9, .row-xs .col-md-auto, .row-xs .col-sm, .row-xs .col-sm-1, .row-xs .col-sm-10, .row-xs .col-sm-11, .row-xs .col-sm-12, .row-xs .col-sm-2, .row-xs .col-sm-3, .row-xs .col-sm-4, .row-xs .col-sm-5, .row-xs .col-sm-6, .row-xs .col-sm-7, .row-xs .col-sm-8, .row-xs .col-sm-9, .row-xs .col-sm-auto, .row-xs .col-xl, .row-xs .col-xl-1, .row-xs .col-xl-10, .row-xs .col-xl-11, .row-xs .col-xl-12, .row-xs .col-xl-2, .row-xs .col-xl-3, .row-xs .col-xl-4, .row-xs .col-xl-5, .row-xs .col-xl-6, .row-xs .col-xl-7, .row-xs .col-xl-8, .row-xs .col-xl-9, .row-xs .col-xl-auto {
  padding-left: 4px;
  padding-right: 4px;
}

@media screen and (max-width: 767px) {
  .row-sm-mobile {
    margin-left: -4px;
    margin-right: -4px;
  }
  .row-sm-mobile .col, .row-sm-mobile .col-1, .row-sm-mobile .col-10, .row-sm-mobile .col-11, .row-sm-mobile .col-12, .row-sm-mobile .col-2, .row-sm-mobile .col-3, .row-sm-mobile .col-4, .row-sm-mobile .col-5, .row-sm-mobile .col-6, .row-sm-mobile .col-7, .row-sm-mobile .col-8, .row-sm-mobile .col-9, .row-sm-mobile .col-auto, .row-sm-mobile .col-lg, .row-sm-mobile .col-lg-1, .row-sm-mobile .col-lg-10, .row-sm-mobile .col-lg-11, .row-sm-mobile .col-lg-12, .row-sm-mobile .col-lg-2, .row-sm-mobile .col-lg-3, .row-sm-mobile .col-lg-4, .row-sm-mobile .col-lg-5, .row-sm-mobile .col-lg-6, .row-sm-mobile .col-lg-7, .row-sm-mobile .col-lg-8, .row-sm-mobile .col-lg-9, .row-sm-mobile .col-lg-auto, .row-sm-mobile .col-md, .row-sm-mobile .col-md-1, .row-sm-mobile .col-md-10, .row-sm-mobile .col-md-11, .row-sm-mobile .col-md-12, .row-sm-mobile .col-md-2, .row-sm-mobile .col-md-3, .row-sm-mobile .col-md-4, .row-sm-mobile .col-md-5, .row-sm-mobile .col-md-6, .row-sm-mobile .col-md-7, .row-sm-mobile .col-md-8, .row-sm-mobile .col-md-9, .row-sm-mobile .col-md-auto, .row-sm-mobile .col-sm, .row-sm-mobile .col-sm-1, .row-sm-mobile .col-sm-10, .row-sm-mobile .col-sm-11, .row-sm-mobile .col-sm-12, .row-sm-mobile .col-sm-2, .row-sm-mobile .col-sm-3, .row-sm-mobile .col-sm-4, .row-sm-mobile .col-sm-5, .row-sm-mobile .col-sm-6, .row-sm-mobile .col-sm-7, .row-sm-mobile .col-sm-8, .row-sm-mobile .col-sm-9, .row-sm-mobile .col-sm-auto, .row-sm-mobile .col-xl, .row-sm-mobile .col-xl-1, .row-sm-mobile .col-xl-10, .row-sm-mobile .col-xl-11, .row-sm-mobile .col-xl-12, .row-sm-mobile .col-xl-2, .row-sm-mobile .col-xl-3, .row-sm-mobile .col-xl-4, .row-sm-mobile .col-xl-5, .row-sm-mobile .col-xl-6, .row-sm-mobile .col-xl-7, .row-sm-mobile .col-xl-8, .row-sm-mobile .col-xl-9, .row-sm-mobile .col-xl-auto {
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media screen and (min-width: 768px) {
  .row-sm-desktop {
    margin-left: -4px;
    margin-right: -4px;
  }
  .row-sm-desktop .col, .row-sm-desktop .col-1, .row-sm-desktop .col-10, .row-sm-desktop .col-11, .row-sm-desktop .col-12, .row-sm-desktop .col-2, .row-sm-desktop .col-3, .row-sm-desktop .col-4, .row-sm-desktop .col-5, .row-sm-desktop .col-6, .row-sm-desktop .col-7, .row-sm-desktop .col-8, .row-sm-desktop .col-9, .row-sm-desktop .col-auto, .row-sm-desktop .col-lg, .row-sm-desktop .col-lg-1, .row-sm-desktop .col-lg-10, .row-sm-desktop .col-lg-11, .row-sm-desktop .col-lg-12, .row-sm-desktop .col-lg-2, .row-sm-desktop .col-lg-3, .row-sm-desktop .col-lg-4, .row-sm-desktop .col-lg-5, .row-sm-desktop .col-lg-6, .row-sm-desktop .col-lg-7, .row-sm-desktop .col-lg-8, .row-sm-desktop .col-lg-9, .row-sm-desktop .col-lg-auto, .row-sm-desktop .col-md, .row-sm-desktop .col-md-1, .row-sm-desktop .col-md-10, .row-sm-desktop .col-md-11, .row-sm-desktop .col-md-12, .row-sm-desktop .col-md-2, .row-sm-desktop .col-md-3, .row-sm-desktop .col-md-4, .row-sm-desktop .col-md-5, .row-sm-desktop .col-md-6, .row-sm-desktop .col-md-7, .row-sm-desktop .col-md-8, .row-sm-desktop .col-md-9, .row-sm-desktop .col-md-auto, .row-sm-desktop .col-sm, .row-sm-desktop .col-sm-1, .row-sm-desktop .col-sm-10, .row-sm-desktop .col-sm-11, .row-sm-desktop .col-sm-12, .row-sm-desktop .col-sm-2, .row-sm-desktop .col-sm-3, .row-sm-desktop .col-sm-4, .row-sm-desktop .col-sm-5, .row-sm-desktop .col-sm-6, .row-sm-desktop .col-sm-7, .row-sm-desktop .col-sm-8, .row-sm-desktop .col-sm-9, .row-sm-desktop .col-sm-auto, .row-sm-desktop .col-xl, .row-sm-desktop .col-xl-1, .row-sm-desktop .col-xl-10, .row-sm-desktop .col-xl-11, .row-sm-desktop .col-xl-12, .row-sm-desktop .col-xl-2, .row-sm-desktop .col-xl-3, .row-sm-desktop .col-xl-4, .row-sm-desktop .col-xl-5, .row-sm-desktop .col-xl-6, .row-sm-desktop .col-xl-7, .row-sm-desktop .col-xl-8, .row-sm-desktop .col-xl-9, .row-sm-desktop .col-xl-auto {
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media screen and (max-width: 767px) {
  .row-50-mobile .col-md-6 {
    width: 50% !important;
  }
}

@media screen and (max-width: 767px) {
  .default-grid-item.mb-4 {
    margin-bottom: 8px !important;
  }
}

.col-50-akm {
  width: 20%;
  padding-left: 8px;
  padding-right: 8px;
}

@media screen and (min-width: 768px) {
  .order-md-first {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    --active: #0073e0;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #0059AD;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    -webkit-transition: background .3s, border-color .3s, -webkit-box-shadow .2s;
    transition: background .3s, border-color .3s, -webkit-box-shadow .2s;
    transition: background .3s, border-color .3s, box-shadow .2s;
    transition: background .3s, border-color .3s, box-shadow .2s, -webkit-box-shadow .2s;
  }
  input[type='checkbox']:after,
  input[type='radio']:after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
  }
  input[type='checkbox']:checked,
  input[type='radio']:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  input[type='checkbox']:disabled,
  input[type='radio']:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: .9;
  }
  input[type='checkbox']:disabled:checked,
  input[type='radio']:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  input[type='checkbox']:disabled + label,
  input[type='radio']:disabled + label {
    cursor: not-allowed;
  }
  input[type='checkbox']:hover:not(:checked):not(:disabled),
  input[type='radio']:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  input[type='checkbox']:focus,
  input[type='radio']:focus {
    -webkit-box-shadow: 0 0 0 var(--focus);
            box-shadow: 0 0 0 var(--focus);
  }
  input[type='checkbox']:not(.switch),
  input[type='radio']:not(.switch) {
    width: 21px;
  }
  input[type='checkbox']:not(.switch):after,
  input[type='radio']:not(.switch):after {
    opacity: var(--o, 0);
  }
  input[type='checkbox']:not(.switch):checked,
  input[type='radio']:not(.switch):checked {
    --o: 1;
  }
  input[type='checkbox'] + label,
  input[type='radio'] + label {
    font-size: 15px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }
  input[type='checkbox']:not(.switch) {
    border-radius: 7px;
  }
  input[type='checkbox']:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    -webkit-transform: rotate(var(--r, 20deg));
            transform: rotate(var(--r, 20deg));
  }
  input[type='checkbox']:not(.switch):checked {
    --r: 43deg;
  }
  input[type='checkbox'].switch {
    width: 38px;
    border-radius: 11px;
  }
  input[type='checkbox'].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    -webkit-transform: translateX(var(--x, 0));
            transform: translateX(var(--x, 0));
  }
  input[type='checkbox'].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }
  input[type='checkbox'].switch:disabled:not(:checked):after {
    opacity: .6;
  }
  input[type='radio'] {
    border-radius: 50%;
  }
  input[type='radio']:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    -webkit-transform: scale(var(--s, 0.7));
            transform: scale(var(--s, 0.7));
  }
  input[type='radio']:checked {
    --s: .5;
  }
}

.btn {
  text-transform: inherit;
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  padding: .5rem .75rem;
  -webkit-box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
          box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
  cursor: pointer;
}

.btn.btn-pill, .btn.btn-rounded-pill, .btn.rounded-pill {
  border-radius: 24px !important;
}

.btn:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn:disabled, .btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.btn i {
  margin-right: 5px;
}

.btn .fe {
  display: inline-block;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.btn.btn-rounded {
  border-radius: 24px;
}

.btn.btn-zoomed {
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn.btn-zoomed:hover {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

.btn .badge {
  top: 0;
}

.btn.btn-collapse-icon[aria-expanded="true"] .fa-solid.fa-angle-down {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.btn-ellipsis .text-long {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-full-fixed-1 .btn-white.btn-sm.btn-white {
  border-radius: 24px !important;
}

.btn-success {
  background-color: #00C177 !important;
  border-color: #00C177 !important;
}

.btn-success:hover {
  background-color: #009E61 !important;
  border-color: #009E61 !important;
}

.btn-lg {
  font-size: 16px;
  line-height: 1.5;
}

.btn-lg.btn-rounded {
  border-radius: 50px;
}

.btn-similar {
  font-size: 15px;
  border-radius: 4px;
  -webkit-transition: none;
  transition: none;
  padding: .5rem .75rem;
}

.btn-checkbox {
  padding-top: 0;
  padding-bottom: 0;
  height: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn-checkbox.btn-sm {
  height: 34px;
}

.btn-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.btn-group .btn {
  float: left;
}

.btn-link {
  color: #0073e0 !important;
  line-height: 1.5;
  border: none;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.btn-link:hover, .btn-link:focus {
  color: #0059AD !important;
}

.btn-link.no-hover:hover, .btn-link.no-hover:focus {
  text-decoration: none !important;
}

.btn-link.btn-link-black {
  color: #1B2A3D !important;
}

.btn-link.btn-link-white {
  color: #ffffff !important;
}

.btn-link.btn-link-white:hover {
  opacity: .8;
}

.btn-link.btn-link-muted {
  color: #859BA6;
}

.btn-link.btn-link-muted:hover {
  opacity: .8;
}

.btn-link.btn-link-base {
  white-space: normal !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

.btn-link.btn-link-15 {
  font-size: 15px;
}

.btn-link.text-danger {
  color: #D5305D !important;
}

.btn-link.text-danger:hover {
  color: #D5305D !important;
}

.btn-link.text-dark {
  color: #1B2A3D !important;
}

.btn-link.text-dark:hover {
  color: #1B2A3D !important;
}

.btn-white {
  color: #1B2A3D !important;
  background: #ffffff;
  border-color: #d4dde3;
}

.btn-white:hover, .btn-white:focus, .btn-white.active {
  background: #e1e6eb;
  color: #1B2A3D !important;
  border-color: #d4dde3;
}

.btn-white.btn-white-hover-block:hover {
  background: #0073e0;
  color: #ffffff !important;
}

.btn-light {
  color: #1B2A3D !important;
  background: #F3F5F7;
  border-color: #F3F5F7;
}

.btn-light:hover, .btn-light:focus, .btn-light.active {
  background: #e1e6eb;
  color: #1B2A3D !important;
  border-color: #e1e6eb;
}

.btn-white-naked {
  background: #ffffff;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-color: #ffffff;
  color: #1B2A3D;
}

.btn-white-naked:hover, .btn-white-naked:focus, .btn-white-naked.active {
  background: #e1e6eb;
  color: #1B2A3D;
  border-color: #e1e6eb;
  color: #1B2A3D;
}

.btn-white-naked[data-dismiss="modal"] {
  border-radius: 24px !important;
}

.btn-outline-white {
  color: #ffffff;
  background-color: transparent;
  border-color: #ffffff;
}

.btn-outline-white:hover, .btn-outline-white:focus {
  color: #1B2A3D;
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn-danger:hover, .btn-danger:focus {
  background-color: #D5305D !important;
  border-color: #D5305D !important;
  color: #ffffff;
}

.btn-danger:hover.text-danger, .btn-danger:focus.text-danger {
  color: #ffffff !important;
}

.btn-danger.btn-disabled {
  background-color: rgba(213, 48, 93, 0.5);
  border-color: rgba(213, 48, 93, 0.5);
}

.btn-outline-info:focus {
  color: #0073e0 !important;
}

.btn-danger-light {
  background: #FFF4F5;
  border-color: #facccc;
  color: #D5305D;
}

.btn-danger-light:hover, .btn-danger-light:focus {
  background: #D5305D;
  border-color: #D5305D;
  color: #ffffff;
}

.btn-success-light {
  background: #E6FFF3;
  border-color: #C4F5DD;
  color: #00C177;
}

.btn-success-light:hover, .btn-success-light:focus {
  background: #00C177;
  border-color: #00C177;
  color: #ffffff;
}

.btn-default {
  background: #F0F2F5;
  border-color: #F0F2F5;
  color: #1B2A3D;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
  color: #0073e0;
  background: #F3F5F7;
  border-color: #F3F5F7;
}

.btn-default:disabled {
  cursor: default;
}

.btn-default:disabled:hover {
  color: #859BA6;
}

.btn-default-2 {
  background: #e1e6eb;
  border-color: #e1e6eb;
  color: #1B2A3D;
}

.btn-default-2:hover, .btn-default-2:focus, .btn-default-2:active {
  color: #1B2A3D;
  background: #D2D8DF;
  border-color: #D2D8DF;
}

.btn-default-2:disabled {
  cursor: default;
}

.btn-default-2:disabled:hover {
  color: #859BA6;
}

.btn-select .icofont, .btn-select .fe {
  color: #859BA6 !important;
}

.btn-select.active {
  color: #1B2A3D !important;
  opacity: 1 !important;
}

.btn-select.active .icofont, .btn-select.active .fe {
  color: #1B2A3D !important;
  opacity: 1 !important;
}

a:not([href]):not([tabindex]).btn-primary {
  color: #ffffff !important;
}

.btn-primary {
  background: #0073e0 !important;
  border-color: #0073e0;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #0059AD !important;
  border-color: #0059AD !important;
}

.btn-primary-light {
  background: #E3F1FF;
  color: #0073e0;
  border-color: #C8E4FF;
}

.btn-primary-light:hover, .btn-primary-light:focus {
  background: #0073e0;
  color: #ffffff !important;
  border-color: #0073e0;
}

.btn-outline-primary {
  background-color: #ffffff;
  border-color: #0073e0;
  color: #0073e0;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background: #E3F1FF;
  border-color: #0073e0;
  color: #0073e0;
}

.btn-sm {
  border-radius: 6px;
  font-size: 13px;
  line-height: 16px;
  height: 34px;
}

.btn-xs {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
}

@media screen and (max-width: 767px) {
  .btn-normal-mobile {
    text-transform: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: .5rem .75rem;
  }
}

@media screen and (max-width: 767px) {
  .btn-xs-767 {
    padding: 0px 12px;
    font-size: 13px;
    border-radius: 4px;
    height: 28px;
    line-height: 28px;
  }
}

@media screen and (max-width: 500px) {
  .btn-xs-767 {
    padding: 0px 6px;
    font-size: 13px;
    border-radius: 4px;
    height: 28px;
    line-height: 28px;
  }
}

@media screen and (max-width: 767px) {
  .btn-block-mobile {
    display: block !important;
    width: 100%;
  }
  .btn-block-mobile .d-flex {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.btn-like.enabled {
  background-color: #0073e0 !important;
  border-color: #0073e0 !important;
  color: #ffffff !important;
}

.btn-disabled {
  opacity: .5;
}

.btn-dislike.enabled {
  background-color: #D5305D !important;
  border-color: #D5305D !important;
  color: #ffffff !important;
}

.btn-icon-1 {
  position: relative;
}

.btn-icon-1 .fe, .btn-icon-1 .fa-solid {
  position: absolute;
  top: 5px;
  right: 14px;
}

.btn-icon-1 .fa-solid {
  top: 6px;
}

.btn-icon-1:hover .fa-solid {
  color: #0073e0 !important;
}

.btn-icon {
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 34px !important;
  height: 34px !important;
  background: #ffffff;
  border-radius: 6px;
  color: #1B2A3D;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  padding: 0px !important;
  line-height: 32px !important;
}

.btn-icon:focus, .btn-icon:active {
  outline: none;
}

.btn-icon.rounded {
  border-radius: 34px !important;
}

.btn-icon .fe {
  font-size: 1.2rem;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.btn-icon.btn-icon-sm {
  width: 22px !important;
  height: 22px !important;
}

.btn-icon.btn-icon-sm.rounded {
  border-radius: 11px !important;
}

.btn-icon.btn-icon-sm-2 {
  width: 24px !important;
  height: 24px !important;
}

.btn-icon.btn-icon-sm-2.rounded {
  border-radius: 13px !important;
}

.btn-icon.btn-icon-lg {
  width: 40px !important;
  height: 40px !important;
}

.btn-icon.btn-icon-lg.rounded {
  border-radius: 40px !important;
}

.btn-icon.btn-icon-lg .fe {
  font-size: 1.3rem;
}

.btn-icon.btn-icon-xlg {
  width: 60px !important;
  height: 60px !important;
}

.btn-icon.btn-icon-xlg.rounded {
  border-radius: 30px !important;
}

.btn-icon.btn-primary, .btn-icon.btn-primary-hover {
  background: #0073e0;
  color: #ffffff;
}

.btn-icon.btn-primary-hover {
  background: #0059AD;
}

.btn-icon.btn-icon-fe-normal .fe {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.btn-icon.btn-success {
  color: #ffffff;
}

.btn-icon.btn-danger {
  background-color: #D5305D;
  color: #ffffff;
  border-color: #D5305D;
}

.btn-icon-arrow-header {
  margin-left: -6px;
}

.btn-group-sidebar--container {
  margin-left: -1rem;
  margin-right: -1rem;
}

.btn-group-sidebar .btn {
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.btn-group-sidebar .btn:hover {
  border-color: #d4dde3 !important;
  background: #F3F5F7 !important;
}

.btn-menu {
  border: 0px;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #F0F2F5;
  width: 32px;
  height: 32px;
  text-align: center;
  border-radius: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.btn-menu:focus, .btn-menu:active {
  outline: none;
}

.btn-menu.btn-menu-sm {
  width: 28px;
  height: 28px;
  border-radius: 28px;
}

.btn-more-vertical {
  padding: 2px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-more-vertical:hover {
  background: #ffffff;
  border: 1px solid #ffffff;
}

.show > .btn-primary.dropdown-toggle, .sweet-alert .show > button.dropdown-toggle.confirm, .wizard > .actions .show > a.dropdown-toggle {
  background-color: #0059AD !important;
  color: #ffffff;
  border-color: #0059AD;
}

.btn-none, .btn-none-medium {
  font-weight: 400 !important;
  pointer-events: none;
  cursor: auto;
}

.btn-none-medium {
  font-weight: 600 !important;
}

.btn-28 {
  height: 28px;
}

.btn-34 {
  height: 34px;
}

.btn-38 {
  height: 38px;
}

.btn-icon-34 {
  height: 34px;
  width: 34px;
  padding: 0;
}

.btn-icon-34-rounded {
  border-radius: 17px;
}

.btn-filter-group .btn-filter {
  border-radius: 0px !important;
  margin-left: -1px;
  position: relative;
  z-index: 10;
}

.btn-filter-group .btn-filter:hover, .btn-filter-group .btn-filter:focus, .btn-filter-group .btn-filter:active {
  z-index: 20;
}

.btn-filter-group.btn-filter-group-3 .btn-filter {
  width: 33.3333333333%;
}

.btn-filter-group.btn-filter-group-2 .btn-filter {
  width: 50%;
}

.btn-filter-group .btn-filter-first {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

.btn-filter-group .btn-filter-last {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

@media screen and (max-width: 767px) {
  .btn-filter-group .btn-filter {
    border-radius: 6px !important;
    margin-left: 0px;
  }
}

.btn-filter-group-w-select2 .select2,
.btn-filter-group-w-select2--not-first .select2 {
  height: 34px !important;
}

.btn-filter-group-w-select2 .select2:hover,
.btn-filter-group-w-select2--not-first .select2:hover {
  background-color: #E3F1FF;
}

.btn-filter-group-w-select2 .select2-selection,
.btn-filter-group-w-select2--not-first .select2-selection {
  height: 34px !important;
}

.btn-filter-group-w-select2 .select2-selection:hover,
.btn-filter-group-w-select2--not-first .select2-selection:hover {
  background-color: #E3F1FF;
}

.btn-filter-group-w-select2 .select2-selection__rendered,
.btn-filter-group-w-select2--not-first .select2-selection__rendered {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  line-height: 32px !important;
  padding: 0px 1.25rem 0px 0.75rem !important;
}

.btn-filter-group-w-select2 .select2-selection__rendered:hover,
.btn-filter-group-w-select2--not-first .select2-selection__rendered:hover {
  z-index: 20;
  position: relative;
  background-color: #E3F1FF !important;
}

.btn-filter-group-w-select2 .select2-selection__arrow,
.btn-filter-group-w-select2--not-first .select2-selection__arrow {
  z-index: 21;
}

@media screen and (max-width: 767px) {
  .btn-filter-group-w-select2 .select2-selection__rendered,
  .btn-filter-group-w-select2--not-first .select2-selection__rendered {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
  }
}

.btn-filter-group-w-select2--not-first .select2-selection__rendered {
  border-radius: 0px !important;
}

@media screen and (max-width: 767px) {
  .btn-filter-group-w-select2--not-first .select2-selection__rendered {
    border-radius: 6px !important;
  }
}

.btn-3d {
  position: relative;
}

.btn-3d.btn-primary {
  -webkit-box-shadow: 0px 4px 0px 0px #004d97 !important;
          box-shadow: 0px 4px 0px 0px #004d97 !important;
}

.btn-3d.btn-white {
  -webkit-box-shadow: 0px 4px 0px 0px rgba(255, 255, 255, 0.4) !important;
          box-shadow: 0px 4px 0px 0px rgba(255, 255, 255, 0.4) !important;
}

.btn-3d.btn-success {
  -webkit-box-shadow: 0px 4px 0px 0px #00945b !important;
          box-shadow: 0px 4px 0px 0px #00945b !important;
}

.btn-3d-2.btn-white {
  -webkit-box-shadow: 0px 4px 0px 0px #d4dde3 !important;
          box-shadow: 0px 4px 0px 0px #d4dde3 !important;
}

.btn-3d-sm {
  position: relative;
}

.btn-3d-sm.btn-primary {
  -webkit-box-shadow: 0px 2px 0px 0px #004d97 !important;
          box-shadow: 0px 2px 0px 0px #004d97 !important;
}

.btn-3d-sm.btn-success {
  -webkit-box-shadow: 0px 2px 0px 0px #00945b !important;
          box-shadow: 0px 2px 0px 0px #00945b !important;
}

.btn-black-glass {
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

.btn-black-glass:hover, .btn-black-glass:active, .btn-black-glass:focus {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
}

.btn-white-glass {
  background-color: rgba(255, 255, 255, 0.4);
  color: #1B2A3D;
}

.btn-white-glass:hover, .btn-white-glass:active, .btn-white-glass:focus {
  background-color: white;
  color: #1B2A3D;
}

.button-quis-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.button-quis {
  background: #ffffff;
  border: 1px solid #d4dde3;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  margin: 2px 1px;
  color: #1B2A3D;
  font-weight: 500;
  width: auto !important;
  min-width: 40px;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.button-quis:focus {
  outline: none;
}

.button-quis.done {
  background-color: #E6FFF3 !important;
  color: #00C177 !important;
}

.button-quis.delete {
  background-color: #FFF4F5 !important;
  border-color: #D5305D !important;
  color: #D5305D !important;
}

.button-quis.active {
  background-color: #ffffff !important;
  border-color: #0073e0;
  color: #0073e0;
}

.button-quis.active.done {
  background-color: #E6FFF3 !important;
  border-color: #0073e0 !important;
  color: #0073e0 !important;
}

.button-quis.active.delete {
  background-color: #FFF4F5 !important;
  border-color: #D5305D !important;
  color: #D5305D !important;
}

.button-quis.button-quis-2.active {
  background-color: #0073e0 !important;
  border-color: #0073e0;
  color: #ffffff;
}

.button-quis:hover {
  background-color: #fcfcfc;
  border-color: #0073e0;
  color: #0073e0;
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
}

.btn-show-hover {
  opacity: 0;
  min-width: 120px;
  display: block;
}

.show-action-btn:hover > td .btn-show-hover {
  opacity: 1;
  margin-left: 0;
}

.btn-nav {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0px 10px;
  border-radius: 10px;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  font-weight: 600;
  color: #525D6B;
  letter-spacing: .5px;
  margin-bottom: 6px;
  font-size: 13px;
  position: relative;
  cursor: pointer;
}

.btn-nav.btn-nav-sm {
  height: 40px;
  line-height: 40px;
  padding: 0px 12px;
}

.btn-nav .btn-nav-avatar {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fcfcfc;
}

.btn-nav .btn-nav-more {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #0073e0;
  color: #ffffff;
}

.btn-nav img {
  width: 30px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.btn-nav .btn-nav-dot {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #D5305D;
  border-radius: 10px;
  height: 24px;
  width: 24px;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
}

.btn-nav:hover {
  background-color: #F3F5F7;
}

.btn-nav.active {
  border-color: #0073e0;
  background-color: #E5F0FF;
  color: #0073e0;
}

.btn-nav.active:hover {
  border-color: #0073e0;
  background-color: #F0F6FF;
  color: #0073e0;
}

.btn-nav-dropdown {
  position: relative;
}

.btn-nav-dropdown .btn-nav-dropcontent {
  position: absolute;
  top: -8px;
  left: 98%;
  width: 240px;
  display: none;
  z-index: 10;
  padding-left: 14px;
}

.btn-nav-dropdown .btn-nav-dropcontent .inner {
  background-color: #ffffff;
  border: 1px solid #d4dde3;
  border-radius: 10px;
  width: 100%;
  padding: 8px 0px;
}

.btn-nav-dropdown .btn-nav-dropcontent .inner .separator {
  display: block;
  height: 1px;
  background-color: #d4dde3;
  margin: 8px 0px;
}

.btn-nav-dropdown .btn-nav-dropcontent .btn-nav {
  border-radius: 0px;
  margin-bottom: 0px;
}

.btn-nav-dropdown:hover > .btn-nav {
  background-color: #F3F5F7;
}

.btn-nav-dropdown:hover .btn-nav-dropcontent {
  display: block;
}

a.card {
  color: #1B2A3D;
}

.card {
  border: 1px solid #d4dde3 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-radius: 6px;
}

.card.card-pointer {
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .card.mb-3 {
    margin-bottom: 8px !important;
  }
}

@media screen and (max-width: 400px) {
  .card.mb-3 {
    margin-bottom: 6px !important;
  }
}

.card .card-img-header {
  height: 240px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.card .card-img-header.card-img-header-sm {
  height: 140px;
}

.card .card-footer {
  background: #ffffff;
  border-top: none;
}

.card.border-0, .card.border-none {
  border: 0px !important;
}

.card.shadow {
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
}

@media screen and (max-width: 767px) {
  .card .card-img-header.card-img-header-sm {
    height: 90px;
  }
}

.card.have-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.card.have-footer .card-block {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

.card.have-footer .card-block--footer {
  padding: 18px;
}

@media screen and (max-width: 767px) {
  .card.have-footer .card-block--footer {
    padding: 12px;
  }
}

.card.have-bg-hover {
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.card.bg-light-hover:hover {
  background-color: #F3F5F7;
}

.card.bg-light-4-hover:hover {
  background-color: #e1e6eb;
}

.card-notif {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #D5305D;
  border-radius: 10px;
  height: 24px;
  width: 24px;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  font-size: .8rem;
  font-weight: 600;
}

.card-action {
  cursor: pointer;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.card-action:hover {
  background-color: #F3F5F7;
}

.card-button {
  cursor: pointer;
}

.card-button:hover, .card-button.active {
  border-color: #0073e0 !important;
}

.card-button.active {
  background-color: #ffffff !important;
}

.card-block-group .card-block {
  border-bottom: 1px solid #d4dde3;
}

.card-block-group .card-block:last-child {
  border-bottom: none;
}

.card-block {
  padding: 18px;
}

@media screen and (max-width: 767px) {
  .card-block {
    padding: 12px;
  }
  .card-block.pb-3 {
    padding-bottom: 12px !important;
  }
}

@media screen and (max-width: 400px) {
  .card-block {
    padding: 8px;
  }
  .card-block.pb-3 {
    padding-bottom: 8px !important;
  }
}

.card-block.bg-light {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.card .card-block p {
  line-height: 1.4;
}

.card-img {
  background-image: url("https://scolacdn.com/images/bg-empty-class.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F0F2F5;
  position: relative;
  display: block;
  padding-top: 50%;
  border-radius: 0px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.card-img .card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
}

.card-img.card-img-tall {
  padding-top: 70%;
}

.card-img.rounded-lg {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.card-img.rounded-lg-full {
  border-radius: 10px;
}

.card-img.rounded-full {
  border-radius: 6px;
}

.card-img .card-img-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.card-img-sm {
  padding-top: 30%;
}

.card-full {
  margin-left: -18px;
  margin-top: -18px;
  margin-right: -18px;
  margin-bottom: -18px !important;
  border-radius: 0px !important;
  border: 0px !important;
}

@media screen and (max-width: 767px) {
  .card-full {
    margin-left: -6px;
    margin-top: -8px;
    margin-right: -6px;
    margin-bottom: -6px;
  }
}

.card-full-rounded-bottom {
  border-bottom-left-radius: 28px !important;
  border-bottom-right-radius: 28px !important;
}

.card-full-header {
  margin-left: -18px;
  margin-top: -18px;
  margin-right: -18px;
  border-radius: 0px !important;
  border: 0px !important;
}

@media screen and (max-width: 767px) {
  .card-full-header {
    margin-left: -6px;
    margin-top: -8px;
    margin-right: -6px;
  }
}

.card-full-desktop {
  margin-left: -18px;
  margin-right: -18px;
  border-radius: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
}

@media screen and (max-width: 767px) {
  .card-full-mobile {
    margin-left: -6px !important;
    margin-right: -6px !important;
    border-radius: 0px !important;
    border: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .card-full-mobile-12 {
    margin-left: -12px !important;
    margin-right: -12px !important;
    border-radius: 0px !important;
    border: 0px !important;
  }
}

.card-full-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
}

@media screen and (max-width: 991px) {
  .card-full-fixed {
    position: relative;
    z-index: 1;
  }
}

.card-full-fixed-1 {
  left: 230px;
  top: 0px;
  right: 0px;
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: 0px !important;
}

@media screen and (max-width: 991px) {
  .card-full-fixed-1 {
    top: 0;
    left: 0;
    right: 0;
    margin-left: -6px !important;
    margin-right: -6px !important;
    margin-top: 0px !important;
  }
}

.card-overflow {
  overflow: hidden;
}

.card-profile-img {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: 4px solid #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 10;
}

.card-profile-img.centered {
  margin: 0 auto;
  margin-top: -90px;
}

.card-profile-img.shift-top {
  margin-top: -40px;
}

@media screen and (max-width: 767px) {
  .card-profile-img {
    width: 70px;
    height: 70px;
    border-radius: 70px;
  }
  .card-profile-img.shift-top {
    margin-top: -30px;
  }
}

.card-body {
  padding: 18px;
}

@media screen and (max-width: 767px) {
  .card-body, .card-footer {
    padding: 12px !important;
  }
}

.card-disabled {
  opacity: .6;
  pointer-events: none;
}

.push-top-1 {
  display: block;
  margin-top: 122px;
}

.push-top-1.have-info {
  margin-top: 150px;
}

@media screen and (max-width: 991px) {
  .push-top-1 {
    margin-top: 36px;
  }
  .push-top-1.have-info {
    margin-top: 32px;
  }
}

@media screen and (max-width: 767px) {
  .push-top-1 {
    margin-top: 8px;
  }
  .push-top-1.have-info {
    margin-top: 10px;
  }
}

.push-top-2 {
  display: block;
  margin-top: 70px;
}

@media screen and (max-width: 991px) {
  .push-top-2 {
    margin-top: 36px;
  }
}

@media screen and (max-width: 767px) {
  .push-top-2 {
    margin-top: 10px;
  }
}

.push-top-1.have-info .card-question-number {
  top: 166px;
}

@media screen and (max-width: 991px) {
  .push-top-1.have-info .card-question-number {
    top: 0px;
  }
}

.card-list-group {
  margin: 0;
  padding: 0;
}

.card-list-group .card-list {
  list-style: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d4dde3;
}

.card-list-group .card-list:first-child {
  padding-top: 0px;
}

.card-list-group .card-list:last-child {
  padding-bottom: 0px;
  border-bottom: 0px;
}

.card.gallery-desc {
  overflow: hidden;
}

.card-header--loading {
  display: block;
  height: 100px;
  background-color: #F3F5F7;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .card-naked-mobile {
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    border: none !important;
  }
  .card-naked-mobile .card-body {
    padding: 0 !important;
  }
  .card-naked-mobile.card-class .card-img {
    border-radius: 6px !important;
    padding-top: 60%;
    margin-bottom: 12px;
  }
  .card-class-action {
    padding: 6px 6px !important;
    border-top: 1px solid #d4dde3;
    margin-top: 8px;
  }
  .card-class-action .btn {
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    border: none !important;
    border-radius: none !important;
    color: #0073e0 !important;
  }
  .card-class-action .btn.btn-primary-light:hover {
    color: #ffffff !important;
  }
}

.card-add-class {
  min-height: 72vh;
}

@media screen and (max-width: 767px) {
  .card-add-class {
    min-height: auto;
  }
}

.card-banner {
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 40%;
  background-color: #F3F5F7;
}

.card-banner-w-label,
.card-banner-w-label-2 {
  position: relative;
}

.card-banner-w-label:before,
.card-banner-w-label-2:before {
  content: attr(data-type);
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
  background: #ffffff;
  color: #1B2A3D;
  text-transform: capitalize;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
}

.card-banner-w-label-2:before {
  top: 14px;
  left: 14px;
  right: inherit;
  font-size: 13px;
}

.card-banner-hover .card-banner {
  border: 1px solid transparent;
}

.card-banner-hover:hover .card-banner {
  border-color: #0073e0;
}

.card-banner--title {
  display: block;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #1B2A3D;
  font-weight: 500;
}

.card-article--front .card-banner--title {
  text-decoration: none;
}

.card-article--front:hover {
  text-decoration: none !important;
}

.card-article--front:hover .card-banner--title,
.card-article--front:hover .card-banner--info {
  text-decoration: none !important;
}

.card-glass {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 0 !important;
  color: #ffffff !important;
}

.card-empty-state {
  position: relative;
  pointer-events: none;
  overflow: hidden;
}

.card-empty-state .bar-horizontal .bar-block {
  background-color: #e0e0e0;
}

.card-empty-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 99;
}

.card-fullpage {
  min-height: calc(100vh - 2rem);
}

.card-action-topic {
  background: rgba(255, 255, 255, 0.5) !important;
  border-style: dotted !important;
  border-width: 2px !important;
  cursor: pointer;
}

.card-action-topic:hover {
  border-color: #0073e0 !important;
  background: rgba(255, 255, 255, 0.8) !important;
  color: #0073e0;
}

.card-ebook {
  position: relative;
  overflow: hidden;
  padding-left: 178px;
}

.card-ebook .card-banner-ebook {
  position: absolute;
  top: 0;
  left: 0;
  width: 178px;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F3F5F7;
  background-size: contain;
}

.card-full-absolute {
  position: fixed;
  top: 0;
  left: 230px;
  right: 0;
  bottom: 0;
  border: 0px !important;
  border-radius: 0px !important;
}

@media screen and (max-width: 991px) {
  .card-full-absolute {
    top: 11px;
  }
}

@media screen and (max-width: 767px) {
  .card-full-absolute {
    position: relative;
    top: inherit;
    height: auto;
  }
}

.card-pembelajaran--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

.card-pembelajaran--inner .card-pembelajaran--col {
  border-right: 1px solid #d4dde3;
  position: relative;
}

.card-pembelajaran--inner .card-pembelajaran--col:last-child {
  border-right: 0px;
}

.card-pembelajaran--inner .card-pembelajaran--col.card-pembelajaran--col-student {
  width: 25%;
}

.card-pembelajaran--inner .card-pembelajaran--col.card-pembelajaran--col-information {
  width: 50%;
}

.card-pembelajaran--header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: #ffffff;
}

.card-pembelajaran--content {
  display: block;
  overflow-y: scroll;
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  bottom: 1px;
}

.card-h-72 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 72px;
  padding: 0 18px;
}

.card-h-72 .btn {
  position: absolute;
  top: 50%;
  right: 0px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.card-h-72.card-h-72-btn-normal .btn {
  position: relative;
  top: inherit;
  right: inherit;
  -webkit-transform: none;
          transform: none;
}

.card-w-checkbox .card-block-checkbox {
  position: relative;
  padding-left: 52px !important;
}

.card-w-checkbox .card-block-checkbox .checkbox {
  position: absolute;
  top: 18px;
  left: 18px;
}

.card-w-checkbox .card-block-checkbox.card-block-checkbox-centered .checkbox {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.card-w-checkbox:hover .card-block-checkbox .checkbox {
  border-color: #0073e0 !important;
}

@media screen and (max-width: 767px) {
  .card-w-checkbox .card-block-checkbox {
    padding-left: 46px !important;
  }
  .card-w-checkbox .card-block-checkbox .checkbox {
    position: absolute;
    top: 12px;
    left: 12px;
  }
  .card-w-checkbox .card-block-checkbox-2 {
    padding-left: 0px !important;
  }
  .card-w-checkbox .card-block-checkbox-title-only {
    padding-left: 46px !important;
  }
}

.card-w-number {
  position: relative;
}

.card-w-number .card-numbers {
  position: absolute;
  top: 50%;
  left: -14px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 28px;
  width: 28px;
  border-radius: 14px;
  border: 1px solid #d4dde3;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background-color: #ffffff;
}

.card-scoring-group .card {
  border-radius: 0px !important;
  border-bottom: 0px !important;
}

.card-scoring-group .card:hover {
  background-color: #F0F2F5;
}

.card-scoring-group .card:hover .card-scoring-footer {
  background-color: #E3F1FF;
}

.card-scoring-group .card:first-child {
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
}

.card-scoring-group .card:last-child {
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  border-bottom: 1px solid #d4dde3 !important;
}

@media screen and (max-width: 767px) {
  .card-scoring-group .card {
    border-radius: 6px !important;
    border-bottom: 1px solid #d4dde3 !important;
    -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
            box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
  }
}

.card-scoring-group.rounded-lg .card:first-child {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.card-scoring-group.rounded-lg .card:last-child {
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

@media screen and (max-width: 767px) {
  .card-scoring-group.rounded-lg .card {
    border-radius: 10px !important;
    -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
            box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
  }
}

.card-scoring-group.no-hover:hover .card {
  background-color: #ffffff;
}

@media screen and (max-width: 767px) {
  .card-scoring-group:hover .card {
    background-color: #ffffff;
  }
  .card-scoring-group .card:hover {
    background-color: #ffffff;
  }
  .card-scoring-group .card:hover .card-scoring-footer {
    background-color: #ffffff;
  }
}

.card-faded {
  background-color: #F3F5F7;
}

.card-faded .card-numbers {
  background-color: #F3F5F7 !important;
}

.card-faded:hover {
  background-color: #F3F5F7 !important;
}

.card-white-blurred {
  background-color: rgba(255, 255, 255, 0.4) !important;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

@media screen and (min-width: 768px) {
  .block-under-card-100 {
    margin-top: -42px;
    padding-top: 0;
    -webkit-transform: translateY(48px);
            transform: translateY(48px);
  }
}

a.card:hover {
  text-decoration: none;
}

.card-answer-correct {
  border: 1px solid #0073e0 !important;
  -webkit-box-shadow: 0px 2px 0px 0px #0073e0 !important;
          box-shadow: 0px 2px 0px 0px #0073e0 !important;
}

.card-answer-correct.shadow {
  -webkit-box-shadow: 0px 2px 0px 0px #0073e0 !important;
          box-shadow: 0px 2px 0px 0px #0073e0 !important;
}

.card-answer-wrong {
  border: 1px solid #D5305D !important;
  -webkit-box-shadow: 0px 2px 0px 0px #D5305D !important;
          box-shadow: 0px 2px 0px 0px #D5305D !important;
}

.card-answer-wrong.shadow {
  -webkit-box-shadow: 0px 2px 0px 0px #D5305D !important;
          box-shadow: 0px 2px 0px 0px #D5305D !important;
}

.card-answer-student-correct {
  border: 1px solid #00C177 !important;
  -webkit-box-shadow: 0px 2px 0px 0px #00C177 !important;
          box-shadow: 0px 2px 0px 0px #00C177 !important;
}

.card-answer-student-correct.shadow {
  -webkit-box-shadow: 0px 2px 0px 0px #00C177 !important;
          box-shadow: 0px 2px 0px 0px #00C177 !important;
}

.card-answer-tag {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 99;
}

.card-answer-tag.card-answer-tag--truefalse {
  bottom: 50%;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}

@media screen and (max-width: 767px) {
  .card-answer-tag.card-answer-tag--truefalse .badge {
    margin-bottom: 6px !important;
  }
}

.card-answer-tag.card-answer-tag--truefalse-0 {
  bottom: 50%;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}

@media screen and (max-width: 767px) {
  .card-answer-tag {
    position: relative;
    bottom: 0px;
    right: 0px;
  }
  .card-answer-tag .badge {
    margin-bottom: 12px;
  }
  .card-answer-tag.card-answer-tag--truefalse {
    bottom: 0;
    -webkit-transform: none;
            transform: none;
    padding-bottom: 6px;
  }
}

.card-multi-overview {
  position: relative;
}

.card-multi-overview .card-block {
  padding-left: 56px;
}

.card-multi-overview .card-multi-overview--label {
  position: absolute;
  top: 50%;
  left: 18px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #d4dde3;
  background-color: #F3F5F7;
}

.card-multi-overview .card-multi-overview--label:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 7px;
  display: block;
  top: 3px;
  left: 3px;
  background-color: transparent;
}

@media screen and (max-width: 767px) {
  .card-multi-overview.card-multi-choice .card-multi-overview--label {
    top: 18px;
    -webkit-transform: none;
            transform: none;
  }
}

.card-multi-overview.card-multi-overview--active .card-multi-overview--label:before {
  background-color: #0073e0;
}

.card-answer-wrong .card-multi-overview--label:before {
  background-color: #D5305D !important;
}

.card-answer-student-correct .card-multi-overview--label:before {
  background-color: #00C177 !important;
}

.card-block-option {
  display: block;
  position: relative;
  border: 1px solid #d4dde3;
  border-radius: 6px;
  margin-bottom: 1rem;
  padding: 18px;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
}

.card-block-option .card-option-label {
  position: absolute;
  top: 18px;
  left: 18px;
  font-weight: 600;
}

.card-block-option .card-option-content {
  display: block;
  position: relative;
  padding-left: 28px;
}

.card-block-option.option-most-answer {
  border-color: #D5305D;
}

.card-block-option.option-most-answer .badge-light {
  color: #D5305D !important;
  background-color: #FFF4F5;
  border-color: #FFF4F5;
}

.card-block-option.option-most-answer .badge-light .badge-icon {
  background-color: #D5305D !important;
}

.card-block-option.option-true {
  border-color: #00C177;
}

.card-block-option.option-true.option-most-answer .badge-light {
  color: #009E61 !important;
  background-color: #F3F5F7;
  border-color: #F3F5F7;
}

.card-block-option.option-true.option-most-answer .badge-light .badge-icon {
  background-color: #009E61 !important;
}

@media screen and (max-width: 767px) {
  .card-modal-scrolled {
    max-height: 86vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 768px) {
  .card-modal-content-scrolled {
    max-height: 54vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.card-fixed-header {
  position: fixed;
  top: 0;
  left: 230px;
  right: 0;
  z-index: 14;
  height: 68px;
  background-color: #ffffff;
  border-bottom: 1px solid #d4dde3;
  padding-left: 18px;
  padding-right: 18px;
}

@media screen and (max-width: 991px) {
  .card-fixed-header {
    top: 72px;
    left: 0px;
  }
}

.lift {
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lift:hover {
  -webkit-transform: translate3d(0, -1px, 0);
          transform: translate3d(0, -1px, 0);
  -webkit-box-shadow: 0 1rem 2.5rem rgba(18, 38, 63, 0.1), 0 0.5rem 1rem -0.75rem rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1rem 2.5rem rgba(18, 38, 63, 0.1), 0 0.5rem 1rem -0.75rem rgba(18, 38, 63, 0.1) !important;
}

.lift.lift-flat:hover {
  -webkit-transform: none;
          transform: none;
}

@media screen and (max-width: 767px) {
  .lift:hover {
    -webkit-transform: none;
            transform: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

.card-silabus {
  position: absolute;
  top: 70px;
  left: 0;
  bottom: 0;
  right: 0;
}

.card-silabus .card-silabus-info,
.card-silabus .card-silabus-form-1,
.card-silabus .card-silabus-form-2 {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.card-silabus .card-silabus-info {
  width: 320px;
  left: 0;
}

.card-silabus .card-silabus-info.wide-1 {
  width: 420px;
}

.card-silabus .card-silabus-form-1 {
  width: 400px;
  left: 320px;
}

.card-silabus .card-silabus-form-1.wide-1 {
  left: 420px;
}

.card-silabus .card-silabus-form-1.wide-2 {
  width: 320px;
}

.card-silabus .card-silabus-form-2 {
  width: calc(100% - 720px);
  left: calc(320px + 400px);
}

.card-silabus .card-silabus-form-2.wide-2 {
  width: calc(100% - 640px);
  left: calc(320px + 320px);
}

.card-silabus .card-silabus-not-selected {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 100;
}

[ng-if="detail.format != 'EBOOK'"] .card,
[ng-controller="faq_siswa"] .card,
[ng-controller="faq_guru"] .card,
[ng-controller="raport_my_student"] .card {
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
}

[ng-repeat="row in list_book.lists"] .btn-primary {
  border-radius: 24px !important;
}

[ng-controller="faq_detail"] {
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
  margin-bottom: 0px !important;
}

[ng-controller="faq_detail"] .btn {
  border-radius: 24px !important;
}

[ng-controller="faq_detail"] .col-md-8.mt-5 {
  margin-bottom: 3rem;
}

[ng-controller="faq_siswa"] .card,
[ng-controller="faq_guru"] .card {
  margin-bottom: 0px !important;
}

[ng-controller="faq_siswa"] .col-md-8.mt-5,
[ng-controller="faq_guru"] .col-md-8.mt-5 {
  margin-bottom: 3rem;
}

[ng-controller="faq_answer"] {
  border: 1px solid #d4dde3;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
}

[ng-controller="faq_answer"] .col-md-8.mt-5 {
  margin-bottom: 3rem;
}

[ng-controller="classroom_bk"] .card,
[ng-controller="media_pembelajaran_pesonaedu"] .card {
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
}

[ng-controller="classroom_bk"] .input-group .input-group-append .btn,
[ng-controller="media_pembelajaran_pesonaedu"] .input-group .input-group-append .btn {
  height: 34px;
}

/* Card with Image Side */
.card-w-img-side {
  position: relative;
  overflow: hidden;
}

.card-w-img-side .card-block {
  width: 60%;
  margin-left: 40%;
}

.card-w-img-side .card-img-side {
  position: absolute;
  top: 0;
  width: 40%;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F3F5F7;
  left: 0;
}

.card-w-img-side.card-w-img-side-right .card-block {
  margin-left: 0px;
}

.card-w-img-side.card-w-img-side-right .card-img-side {
  left: inherit;
  right: 0;
}

.card-menu-sidebar .card {
  cursor: pointer;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin: 0;
  border: none !important;
  border-radius: 0px;
  border-bottom: 1px solid #d4dde3 !important;
}

.card-menu-sidebar .card:hover, .card-menu-sidebar .card.active {
  background-color: #E3F1FF;
}

.card-menu-sidebar .card:hover .icon-circle, .card-menu-sidebar .card.active .icon-circle {
  background-color: #0073e0;
  color: #ffffff;
}

.card-menu-sidebar .card:hover .fa-angle-right, .card-menu-sidebar .card.active .fa-angle-right {
  color: #0073e0 !important;
}

.card-menu-sidebar .card:last-child {
  margin-bottom: 0px;
  border-bottom: none !important;
}

.bg-primary {
  background-color: #0073e0 !important;
}

.bg-pink {
  background-color: #FB5779 !important;
}

.bg-pink-2 {
  background-color: #DC00FA !important;
}

.bg-cyan {
  background-color: #00B5AA !important;
}

.bg-purple {
  background-color: #5F00FA !important;
}

.bg-purple-light {
  background-color: #F5F0FF !important;
}

.bg-pink-light {
  background-color: #FFECF0 !important;
}

.bg-primary-dark {
  background-color: #00509B !important;
}

.bg-primary-light {
  background-color: #E3F1FF !important;
}

.bg-transparent {
  background: transparent !important;
}

.bg-dark {
  background-color: #1B2A3D !important;
}

.bg-light {
  background-color: #F3F5F7 !important;
}

.bg-light.bg-light-hover:hover {
  background-color: #F0F2F5 !important;
}

@media screen and (max-width: 767px) {
  .bg-light-mobile {
    background-color: #F3F5F7 !important;
  }
  .bg-light-mobile.bg-light-mobile-hover:hover {
    background-color: #F0F2F5 !important;
  }
}

.bg-light-2 {
  background-color: #F0F2F5 !important;
}

.bg-light-3 {
  background-color: #fcfcfc !important;
}

.bg-light-4 {
  background-color: #e1e6eb !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-warning {
  background-color: #FF9A07 !important;
  color: #ffffff;
}

.bg-success-light {
  background-color: #E6FFF3 !important;
  color: #00C177;
}

.bg-warning-light {
  background-color: #fcf8e3 !important;
  color: #b95500;
}

.bg-warning-light .border, .bg-warning-light .border-bottom, .bg-warning-light .border-top {
  border-color: #faebcc !important;
}

.bg-danger {
  background: #D5305D !important;
  color: #ffffff;
}

.bg-danger-light {
  background: #FFF4F5 !important;
  color: #D5305D;
}

.bg-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
  .bg-white-mobile {
    background: #ffffff !important;
  }
}

.bg-black-trans-1 {
  background-color: rgba(0, 0, 0, 0.2);
}

.bg-black-trans-2 {
  background-color: rgba(0, 0, 0, 0.5);
}

.text-purple {
  color: #5F00FA !important;
}

.alert ul {
  margin-left: 16px;
}

.alert ul li {
  list-style: circle;
}

.alert {
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 500;
}

.alert.alert-success {
  color: #00C177;
  background: #E6FFF3;
  border-color: #C4F5DD;
}

.alert.alert-info {
  color: #31708f !important;
  background: #D5F4FF;
  border-color: #A2E7FF;
}

.alert.alert-warning {
  background: #fcf8e3;
  border-color: #faebcc;
  color: #b95500 !important;
}

.alert.alert-danger {
  background: #FFF4F5;
  border-color: #facccc;
  color: #D5305D !important;
}

.alert.alert-danger.alert-naked {
  color: #D5305D !important;
}

.alert.alert-naked {
  padding: 0px !important;
  border: 0px !important;
  background: transparent;
  height: auto;
}

.alert.alert-default {
  background: #F3F5F7;
  border-color: #d4dde3;
  color: #1B2A3D;
}

.alert.rounded-pill {
  border-radius: 24px;
}

.badge {
  border-radius: 4px !important;
  padding: 0px 7px;
  font-size: 12px;
  font-weight: 500;
  height: 24px;
  line-height: 22px;
}

.badge.badge-lh-2 {
  line-height: 24px;
}

.badge.badge-danger, .badge.badge-primary, .badge.badge-info, .badge.badge-success {
  color: #ffffff !important;
}

.badge.badge-primary {
  background: #0073e0;
  border: 1px solid #0073e0;
}

.badge.badge-danger {
  background: #D5305D;
  border: 1px solid #D5305D;
}

.badge.badge-warning {
  background: #FF9A07;
  border: 1px solid #FF9A07;
}

.badge.badge-success {
  background: #00C177;
  border: 1px solid #00C177;
}

.badge.badge-info {
  background: #31708f;
  border-color: 1px solid #31708f;
}

.badge.badge-white {
  border: 1px solid #d4dde3 !important;
  color: #1B2A3D;
  background: #ffffff;
}

.badge.badge-dark {
  border: 1px solid #1B2A3D !important;
  color: #ffffff;
  background: #1B2A3D;
}

.badge.badge-primary-light {
  background: #E3F1FF !important;
  color: #0073e0 !important;
  border: 1px solid #C8E4FF !important;
}

.badge.badge-success-light {
  color: #00C177 !important;
  background: #E6FFF3 !important;
  border: 1px solid #C4F5DD !important;
}

.badge.badge-warning-light {
  background: #fcf8e3 !important;
  border: 1px solid #faebcc !important;
  color: #FF9A07 !important;
}

.badge.badge-danger-light {
  background: #FFF4F5 !important;
  border: 1px solid #facccc !important;
  color: #D5305D !important;
}

.badge.badge-pink {
  background: #FB5779;
  border: 1px solid #FB5779;
  color: #ffffff;
}

.badge.badge-purple {
  background: #F5F0FF;
  border: 1px solid #F5F0FF;
  color: #5F00FA;
}

.badge.badge-task, .badge.badge-pink-2 {
  background: #FEE6F5;
  border: 1px solid #FEE6F5;
  color: #CD1989;
}

.badge.badge-quiz, .badge.badge-teal {
  background: #E5F8FD;
  border: 1px solid #F0FCFF;
  color: #1A9EBB;
}

.badge.badge-theory, .badge.badge-green {
  background: #EDFCE0;
  border: 1px solid #EDFCE0;
  color: #5CA71A;
}

.badge.badge-pink-light {
  background: #FFECF0;
  border: 1px solid #FFECF0;
  color: #FB5779;
}

.badge.badge-pill {
  border-radius: 12px !important;
}

.badge .fa-solid {
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.badge-square {
  padding: 0 !important;
  width: 26px;
  height: 26px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 26px;
}

.badge-link {
  cursor: pointer;
}

.badge-link.text-danger:hover {
  background-color: #D5305D !important;
  color: #ffffff !important;
  border-color: #D5305D !important;
}

.badge-link.badge-success-light:hover {
  background-color: #00C177 !important;
  color: #ffffff !important;
  border-color: #00C177 !important;
}

.badge-base {
  background: #F3F5F7;
  color: #1B2A3D;
  font-size: 15px;
  padding: 4px 5px;
  font-weight: 400;
  line-height: 12px;
}

.badge-sm {
  padding: 2px 5px 2px 4px !important;
}

.badge-flex, span.badge-flex {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.badge-tag-course {
  padding-left: 32px;
  position: relative;
  line-height: 24px;
  padding-right: 10px;
  border-radius: 3px !important;
  margin: 0;
}

.badge-tag-course img {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.badge-kuis {
  background-color: #4D9D00;
}

.badge-tugas {
  background-color: #1F4FA7;
}

.badge-ulangan {
  background-color: #FFA300;
}

.badge-teori {
  background-color: #9E2175;
}

.badge-latihan {
  background-color: #0DB4BB;
}

.badge-offline {
  background-color: #642DB8;
}

.badge-online {
  background-color: #C5A334;
}

.badge-icon-circle {
  background-color: #F3F5F7;
  color: #1B2A3D;
  border-radius: 24px !important;
  position: relative;
  padding-left: 28px;
  border: 1px solid #F3F5F7;
}

.badge-icon-circle .badge-icon {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 20px;
  width: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 10px;
  background-color: #1B2A3D;
  color: #ffffff;
}

.badge-icon-circle .badge-icon .fa-solid {
  -webkit-transform: scale(0.9) translateX(0.15px);
          transform: scale(0.9) translateX(0.15px);
}

.badge-icon-circle.badge-danger-light, .badge-icon-circle.badge-warning-light, .badge-icon-circle.badge-success-light, .badge-icon-circle.badge-primary-light, .badge-icon-circle.badge-purple, .badge-icon-circle.badge-green, .badge-icon-circle.badge-pink {
  background-color: #F3F5F7 !important;
  border: 1px solid #F3F5F7 !important;
}

.badge-icon-circle.badge-danger-light .badge-icon {
  background-color: #D5305D;
}

.badge-icon-circle.badge-warning-light .badge-icon {
  background-color: #FF9A07;
}

.badge-icon-circle.badge-success-light {
  color: #009E61 !important;
}

.badge-icon-circle.badge-success-light .badge-icon {
  background-color: #009E61;
}

.badge-icon-circle.badge-primary-light .badge-icon {
  background-color: #0073e0;
}

.badge-icon-circle.badge-purple .badge-icon {
  background-color: #5F00FA;
}

.badge-icon-circle.badge-green .badge-icon {
  background-color: #5CA71A;
}

.badge-icon-circle.badge-pink {
  color: #FB5779;
}

.badge-icon-circle.badge-pink .badge-icon {
  background-color: #FB5779;
}

.badge-icon-circle .max-w-500 {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 120px;
}

.badge-icon-circle .max-w-500.max-22 {
  width: 22px;
}

@media screen and (max-width: 500px) {
  .badge-icon-circle .max-w-500 {
    max-width: 66px;
  }
}

.badge-icon-circle.bg-white {
  background-color: #ffffff !important;
}

.like-reply {
  position: absolute;
  right: -8px;
  bottom: -5px;
  padding-right: 6px;
  border-radius: 24px;
}

label {
  font-size: 12px;
  margin-bottom: 0;
  margin-top: 4px;
}

label.error {
  color: #D5305D;
}

.label {
  font-size: 12px;
  border-radius: 4px;
  padding: 4px 7px;
  margin-right: 5px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
  text-transform: capitalize;
}

.label.label-sm {
  padding: 2px 7px;
}

.label.label-success {
  color: #00C177 !important;
  background: #E6FFF3 !important;
  border: 1px solid #C4F5DD !important;
}

.label.label-warning {
  background: #FFF4F5 !important;
  border-color: #facccc !important;
  color: #D5305D !important;
}

.label.label-inverse-primary {
  border: 1px solid #0073e0;
  color: #0073e0 !important;
}

.label.label-inverse-danger {
  border: 1px solid #D5305D;
  color: #D5305D !important;
}

.label.label-outline-primary {
  border: 1px solid #0073e0;
  color: #0073e0 !important;
}

.label.label-outline-pink {
  border: 1px solid #FB5779;
  color: #FB5779 !important;
}

.label.label-outline-pink-2 {
  border: 1px solid #DC00FA;
  color: #DC00FA !important;
}

.label.label-outline-purple {
  border: 1px solid #5F00FA;
  color: #5F00FA !important;
}

.label.label-outline-cyan {
  border: 1px solid #00B5AA;
  color: #00B5AA !important;
}

.label.label-pill {
  border-radius: 14px;
}

select.form-control {
  height: auto !important;
  padding: .5rem 1.75rem .5rem .75rem;
  font-weight: 600;
}

select.custom-select {
  font-weight: 500;
  color: #1B2A3D;
  height: 34px;
}

.form-control {
  border-radius: 6px;
  border-color: #d4dde3;
  background-color: #fcfcfc;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  font-size: 15px;
  -webkit-box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
          box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
}

.form-control:hover {
  border-color: #0073e0;
}

.form-control:focus {
  background-color: #fcfcfc;
  color: #1B2A3D;
  border-color: #0073e0;
  -webkit-box-shadow: 0 0 0 2px #80b5e0;
          box-shadow: 0 0 0 2px #80b5e0;
  outline: 0;
}

.form-control::-webkit-input-placeholder {
  color: #859BA6;
}

.form-control:-ms-input-placeholder {
  color: #859BA6;
}

.form-control::-ms-input-placeholder {
  color: #859BA6;
}

.form-control::placeholder {
  color: #859BA6;
}

.form-control.text-sm {
  line-height: 16px;
}

input[type="text"].form-control {
  height: 34px;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #F3F5F7;
  pointer-events: none;
}

.form-control-scored {
  padding: 0px !important;
  font-size: 1.2rem;
}

textarea.form-control {
  min-height: 100px;
}

input[type='checkbox']:disabled, input[type='radio']:disabled {
  opacity: .4;
  pointer-events: none;
  cursor: default;
}

.textarea-quiz, .form-control-quiz, .form-control-naked {
  padding-left: 0;
  padding-right: 0;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #ffffff;
  border-radius: 0;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.textarea-quiz.fcn-w-bb, .form-control-quiz.fcn-w-bb, .form-control-naked.fcn-w-bb {
  border-bottom: 1px solid #d4dde3;
}

.textarea-quiz.fcn-w-bb:hover, .form-control-quiz.fcn-w-bb:hover, .form-control-naked.fcn-w-bb:hover {
  border-color: #0073e0;
}

.textarea-quiz:focus, .form-control-quiz:focus, .form-control-naked:focus {
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #0073e0;
}

.form-control-full-card {
  background: #fcfcfc;
  border: none;
  border-bottom: none;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-radius: 0;
  padding-left: 18px;
  height: 38px !important;
}

.form-control-full-card:focus {
  background: #ffffff;
  border: 0px !important;
  border-bottom: 0px !important;
}

.col-form-label {
  font-size: 13px;
  font-weight: 500;
}

.col-form-label-thick {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  color: #566B76;
}

.custom-select {
  border-radius: 6px !important;
  -webkit-box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
          box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
}

.custom-select:hover {
  border-color: #0073e0 !important;
}

.input-locked, .input-icon {
  position: relative;
}

.input-locked .icofont, .input-locked .fe, .input-locked .fa-solid, .input-locked .fa-regular, .input-icon .icofont, .input-icon .fe, .input-icon .fa-solid, .input-icon .fa-regular {
  position: absolute;
  top: 50% !important;
  right: 12px;
  -webkit-transform: translateY(-50%) !important;
          transform: translateY(-50%) !important;
}

.input-locked.input-meter-on-form-naked .icofont, .input-locked.input-meter-on-form-naked .fe, .input-locked.input-meter-on-form-naked .fa-solid, .input-locked.input-meter-on-form-naked .fa-regular, .input-locked.input-price-on-form-naked .icofont, .input-locked.input-price-on-form-naked .fe, .input-locked.input-price-on-form-naked .fa-solid, .input-locked.input-price-on-form-naked .fa-regular, .input-icon.input-meter-on-form-naked .icofont, .input-icon.input-meter-on-form-naked .fe, .input-icon.input-meter-on-form-naked .fa-solid, .input-icon.input-meter-on-form-naked .fa-regular, .input-icon.input-price-on-form-naked .icofont, .input-icon.input-price-on-form-naked .fe, .input-icon.input-price-on-form-naked .fa-solid, .input-icon.input-price-on-form-naked .fa-regular {
  right: 0;
}

.input-locked.input-icon-left .form-control, .input-icon.input-icon-left .form-control {
  padding-left: 38px;
}

.input-locked.input-icon-left .icofont, .input-locked.input-icon-left .fe, .input-locked.input-icon-left .fa-solid, .input-locked.input-icon-left .fa-regular, .input-icon.input-icon-left .icofont, .input-icon.input-icon-left .fe, .input-icon.input-icon-left .fa-solid, .input-icon.input-icon-left .fa-regular {
  right: inherit;
  left: 12px;
}

.input-locked.input-icon-left.input-meter-on-form-naked .form-control, .input-locked.input-icon-left.input-price-on-form-naked .form-control, .input-icon.input-icon-left.input-meter-on-form-naked .form-control, .input-icon.input-icon-left.input-price-on-form-naked .form-control {
  padding-left: 28px;
}

.input-locked.input-icon-left.input-meter-on-form-naked .icofont, .input-locked.input-icon-left.input-meter-on-form-naked .fe, .input-locked.input-icon-left.input-meter-on-form-naked .fa-solid, .input-locked.input-icon-left.input-meter-on-form-naked .fa-regular, .input-locked.input-icon-left.input-price-on-form-naked .icofont, .input-locked.input-icon-left.input-price-on-form-naked .fe, .input-locked.input-icon-left.input-price-on-form-naked .fa-solid, .input-locked.input-icon-left.input-price-on-form-naked .fa-regular, .input-icon.input-icon-left.input-meter-on-form-naked .icofont, .input-icon.input-icon-left.input-meter-on-form-naked .fe, .input-icon.input-icon-left.input-meter-on-form-naked .fa-solid, .input-icon.input-icon-left.input-meter-on-form-naked .fa-regular, .input-icon.input-icon-left.input-price-on-form-naked .icofont, .input-icon.input-icon-left.input-price-on-form-naked .fe, .input-icon.input-icon-left.input-price-on-form-naked .fa-solid, .input-icon.input-icon-left.input-price-on-form-naked .fa-regular {
  right: inherit;
  left: 2px;
}

.input-locked.input-icon-left.input-icon-left-form-naked .icofont, .input-locked.input-icon-left.input-icon-left-form-naked .fe, .input-locked.input-icon-left.input-icon-left-form-naked .fa-solid, .input-locked.input-icon-left.input-icon-left-form-naked .fa-regular, .input-icon.input-icon-left.input-icon-left-form-naked .icofont, .input-icon.input-icon-left.input-icon-left-form-naked .fe, .input-icon.input-icon-left.input-icon-left-form-naked .fa-solid, .input-icon.input-icon-left.input-icon-left-form-naked .fa-regular {
  left: 0;
}

.input-locked.input-icon-left.input-icon-left-form-naked .form-control, .input-icon.input-icon-left.input-icon-left-form-naked .form-control {
  padding-left: 28px;
}

.input-icon .input-icon-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-right: 8px;
  height: 30px;
  width: 56px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  top: 1px;
  right: 1px;
  background: white;
  background: -webkit-gradient(linear, right top, left top, color-stop(40%, white), to(rgba(255, 255, 255, 0.2)));
  background: linear-gradient(-90deg, white 40%, rgba(255, 255, 255, 0.2) 100%);
}

.input-meter, .input-price {
  position: relative;
}

.input-meter .form-control, .input-price .form-control {
  padding-right: 32px;
}

.input-meter .m2, .input-meter .idr, .input-price .m2, .input-price .idr {
  content: attr(data-symbol);
  position: absolute;
  top: 50% !important;
  right: 12px;
  -webkit-transform: translateY(-50%) !important;
          transform: translateY(-50%) !important;
  font-size: 15px;
}

.input-meter.input-meter-on-form-naked .m2, .input-price.input-meter-on-form-naked .m2 {
  right: 0;
}

.input-price .form-control {
  padding-right: 0;
  padding-left: 32px;
}

.input-price .idr {
  right: inherit;
  left: 12px;
}

.input-price.input-price-on-form-naked .idr {
  left: 0;
}

.input-icon-full-card .icofont, .input-icon-full-card .fe, .input-icon-full-card .fa-solid, .input-icon-full-card .fa-regular {
  right: 18px;
}

.input-icon .form-control:hover ~ .icofont, .input-icon .form-control:focus ~ .icofont, .input-icon .form-control:hover ~ .fe, .input-icon .form-control:focus ~ .fe {
  color: #0073e0;
}

.form-control-sm {
  padding: 8px 14px;
  font-size: 15px;
  height: auto;
  line-height: 16px;
}

.custom-select {
  border-radius: 6px !important;
  border-color: #d4dde3 !important;
  background-color: #ffffff;
  -webkit-box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
          box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
}

.custom-select-sm {
  padding: 8px 30px 8px 14px;
  font-size: 15px;
  line-height: 16px;
  height: auto;
}

.input-group .input-group-prepend .btn {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right: 0px;
}

.input-group .input-group-append .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

.form-control-static {
  cursor: default;
  background: #ffffff !important;
}

.form-control-static:hover {
  border-color: #d4dde3 !important;
}

.input-duration {
  position: relative;
}

.input-duration:before {
  content: attr(data-title-duration);
  position: absolute;
  top: 8px;
  left: 0;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
}

.input-duration .form-control {
  text-align: right;
}

.input-duration.input-duration-left:before {
  left: auto;
  right: 0;
}

.input-duration.input-duration-left .form-control {
  text-align: left;
}

.d-flex input {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

input[type=file] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-control-pill {
  border-radius: 18px !important;
}

.rounded-left-side {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

.reply-area {
  float: none;
  min-height: 36px !important;
  padding-bottom: 8px;
  height: 36px;
  resize: none;
  background-color: #F3F5F7;
  border-color: #F3F5F7;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.reply-area::-webkit-input-placeholder {
  color: #566B76;
}

.reply-area:-ms-input-placeholder {
  color: #566B76;
}

.reply-area::-ms-input-placeholder {
  color: #566B76;
}

.reply-area::placeholder {
  color: #566B76;
}

.reply-area:hover {
  border-color: #F3F5F7;
}

.reply-area:active, .reply-area:focus {
  border-color: #0073e0;
  -webkit-box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
          box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
}

.post-create-area {
  float: none;
  min-height: 36px !important;
  height: 53px;
  resize: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: #ffffff;
  padding: 0px;
  border: 0px;
  box-shadow: none;
  outline: none;
  border-radius: 0px;
}

.post-create-area:focus, .post-create-area:active {
  border: 0px;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}

.form-radio label {
  padding-left: 1.8rem;
}

.label-box-input {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.label-box-input:hover {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

.label-box-input .label-box-input--bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #F3F5F7;
  z-index: 1 !important;
}

.label-box-input > div, .label-box-input input {
  position: relative;
  z-index: 2;
}

.label-box-input input:checked + .label-box-input--bg {
  background-color: #E5F0FF !important;
  border: 2px solid #0073e0;
}

.dropdown-menu {
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
  padding: 6px 0 !important;
  border: 1px solid #d4dde3;
}

.dropdown-menu .selected {
  font-weight: 600;
  color: #0073e0 !important;
}

.dropdown-toggle:after {
  display: none;
}

.dropdown-menu-md, .dropdown-menu-nav-md {
  min-width: 240px;
  max-width: 507px;
}

.dropdown-menu-semi-wide {
  width: 260px;
}

.dropdown-menu-semi-wide .dropdown-item {
  white-space: normal;
}

.dropdown-menu-wide {
  width: 320px;
}

.dropdown-menu-wide .dropdown-item {
  white-space: normal;
}

.dropdown-header {
  padding: 6px 12px;
  color: #1B2A3D;
}

.dropdown-menu .divider {
  height: 1px;
  margin: 8px 0px;
  overflow: hidden;
  background-color: #d4dde3;
}

.dropdown-item {
  color: #1B2A3D;
  padding: 6px 12px !important;
  font-size: 14px !important;
  cursor: pointer;
}

.dropdown-item.dropdown-item-action {
  padding: 0px 12px !important;
}

.dropdown-item.dropdown-item-action:hover {
  background: #ffffff;
}

.dropdown-item:active, .dropdown-item.active {
  background-color: #0073e0;
  color: #ffffff !important;
}

.card .card-block a.dropdown-item:active, .card .card-block a.dropdown-item .active {
  background-color: #0073e0;
  color: #ffffff !important;
}

.btn-dropdown {
  position: relative;
  padding-right: 40px;
}

.btn-dropdown .btn-dropdown-select {
  max-width: 140px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.btn-dropdown .fa-solid {
  position: absolute;
  top: calc(50% - 1px);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 10px;
}

.dropdown-hover:hover > .dropdown-menu {
  display: block;
}

.dropdown-select-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.dropdown-list-select {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.dropdown-list-select .p-3 {
  padding: 12px !important;
}

.dropdown-list-select .py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.dropdown-list-select .py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.dropdown-input-select {
  border-top: 1px solid #d4dde3;
  padding-left: 28px;
}

.dropdown-input-select label {
  margin: 0px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d4dde3;
}

.dropdown-input-select label input {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.dropdown-input-select label:last-child {
  border-bottom: none;
}

.dropdown-input-select.ver-2 {
  border-top: none;
  padding-left: 0px;
}

th, td {
  white-space: nowrap;
  position: relative;
}

.table-wrap th, .table-wrap td {
  white-space: normal !important;
}

.table.table-sm th, .table.table-sm td {
  padding: 8px;
}

.table .col-nilai {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #F3F5F7 !important;
}

.table-th-uppercase th {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
}

.table-th-middle th {
  vertical-align: middle !important;
}

.table {
  border: 0px !important;
}

.table th {
  vertical-align: middle !important;
  border-bottom-color: #0073e0 !important;
}

.table th, .table td {
  border-color: #d4dde3 !important;
  border-left: solid #E6E8EB 0px !important;
  border-right: solid #E6E8EB 0px !important;
  position: relative;
}

.table thead th {
  border-bottom: 1px solid #d4dde3;
  background-color: #F3F5F7;
}

.table tr:hover td {
  border-bottom-color: #d4dde3 !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.04);
}

.table thead th {
  font-weight: 500;
}

.table-hover tbody tr:hover,
tr.active {
  background-color: #F3F5F7 !important;
}

@media screen and (max-width: 767px) {
  .table-hover tbody tr:hover,
  tr.active {
    background-color: #ffffff !important;
  }
}

tr.active td:last-child {
  overflow: hidden;
  position: relative;
}

tr.active td:last-child:before {
  content: '';
  position: absolute;
  top: 42%;
  -webkit-transform: rotate(45deg) translateY(-42%);
          transform: rotate(45deg) translateY(-42%);
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: #D8DBDE;
}

.table-font-sm {
  font-size: 14px !important;
}

.table-font-sm a {
  font-size: 14px !important;
}

.table-va-top > tbody > tr > td {
  vertical-align: top;
}

.table-va-middle > tbody > tr > td {
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .table-va-top-767 > tbody > tr > td {
    vertical-align: top;
  }
}

.table-no-border-top tr th {
  border-top: 0px !important;
}

.table-no-border-bottom tr:last-child td {
  border-bottom: 0px !important;
}

.table-no-th tr td {
  border-top: 0px !important;
}

.table-no-th-2 tr:first-child td {
  border-top: 0px !important;
}

.td-wrap {
  white-space: normal !important;
}

@media screen and (max-width: 767px) {
  .td-wrap-mobile {
    white-space: normal !important;
  }
}

.table-hover tbody tr.tr-loading:hover {
  background: #ffffff !important;
}

.table tr.tr-loading:hover td {
  border-bottom-color: #d4dde3 !important;
}

.table-td-hidden {
  overflow: hidden;
}

.table-td-hover td:hover::after {
  background-color: #F3F5F7;
  content: '';
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  width: 100%;
  z-index: -1;
}

.card-hover-td {
  position: relative;
  z-index: 2;
}

.table-report--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.table-report--wrapper .table-report--fixed {
  width: 40%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.table-report--wrapper .table-report--scroll {
  width: 60%;
  position: relative;
}

.table-report--wrapper .table-report--scroll:before, .table-report--wrapper .table-report--scroll:after {
  content: '';
  display: block;
  width: 10px;
  position: absolute;
  bottom: 0px;
  opacity: .4;
}

.table-report--wrapper .table-report--scroll:before {
  top: 0;
  left: -1px;
  background: black;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}

.table-report--wrapper .table-report--scroll:after {
  top: 0;
  right: 0;
  background: black;
  background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}

.table-card-block thead tr th:first-child, .table-card-block thead tr td:first-child, .table-card-block tbody tr th:first-child, .table-card-block tbody tr td:first-child {
  padding-left: 18px;
}

.table-card-block thead tr th:last-child, .table-card-block thead tr td:last-child, .table-card-block tbody tr th:last-child, .table-card-block tbody tr td:last-child {
  padding-right: 18px;
}

@media screen and (max-width: 991px) {
  .table-card-block thead tr th:first-child, .table-card-block thead tr td:first-child, .table-card-block tbody tr th:first-child, .table-card-block tbody tr td:first-child {
    padding-left: 12px;
  }
  .table-card-block thead tr th:last-child, .table-card-block thead tr td:last-child, .table-card-block tbody tr th:last-child, .table-card-block tbody tr td:last-child {
    padding-right: 12px;
  }
}

.table-th-sticky th {
  position: -webkit-sticky;
  position: sticky;
  z-index: 2;
  border-bottom: 0px !important;
}

.table-th-sticky th::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #d4dde3;
}

.table-th-sticky tbody tr:first-child td {
  border-top: 0px !important;
}

.table-th-sticky.table-th-sticky-1 th {
  top: 124px;
}

.table-th-sticky.table-th-sticky-2 th {
  top: 51px;
}

.table-th-sticky.table-th-sticky-3 th {
  top: 0px;
}

@media screen and (max-width: 767px) {
  .table-th-sticky th {
    position: relative;
  }
  .table-th-sticky.table-th-sticky-1 th {
    top: 0px;
  }
  .table-th-sticky.table-th-sticky-2 th {
    top: 0px;
  }
}

.table-description {
  overflow-x: auto;
}

.table-description table {
  width: 100%;
}

.table-description table tr td {
  white-space: inherit;
  word-break: break-word;
}

.table-description a {
  color: #0073e0 !important;
  text-decoration: underline !important;
}

.table-description img {
  height: auto;
}

.table-responsive--have-dropdown {
  overflow: inherit;
}

@media screen and (max-width: 767px) {
  .table-responsive--have-dropdown {
    overflow-x: auto;
  }
}

.btn-action {
  display: none;
}

@media screen and (max-width: 991px) {
  .btn-action {
    display: block;
  }
}

.btn-action-2 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media screen and (max-width: 991px) {
  .btn-action-2 {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
}

.hover-action .btn-action {
  display: none;
}

.hover-action:hover .btn-action {
  display: block;
}

.hover-action:hover .btn-action-2 {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

@media screen and (max-width: 991px) {
  .hover-action .btn-action {
    display: block;
  }
}

table.toggle-action-btn .action-btn-panel {
  opacity: 0;
}

table.toggle-action-btn tr:hover .action-btn-panel {
  opacity: 1;
}

.table-markbook-wrapper {
  overflow-y: auto;
}

.table-markbook thead th {
  background-color: #F3F5F7;
  border-left: 1px solid #d4dde3 !important;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  height: 114px;
  vertical-align: top !important;
  padding: 0px;
}

.table-markbook thead th:first-child {
  border-left: 0px !important;
}

.table-markbook tbody td {
  background-color: #ffffff;
  border-left: 1px solid #d4dde3 !important;
  vertical-align: top !important;
  height: 60px;
  padding: 0px;
}

.table-markbook tbody td:first-child {
  border-left: 0px !important;
}

.table-markbook tbody tr:nth-child(odd) td {
  background-color: #fcfcfc;
}

.table-markbook tbody tr:hover td {
  background-color: #F3F5F7;
}

.table-markbook tbody tr:hover td .icon-circle {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.table-markbook .table-markbook-title {
  display: -webkit-box;
  white-space: pre-wrap;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.table-markbook .table-markbook-score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.table-markbook .table-markbook-score .score {
  width: 25%;
  border-right: 1px solid #d4dde3;
  text-align: center;
  font-size: 12px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.table-markbook .table-markbook-score .score .sort-action {
  cursor: pointer;
}

.table-markbook .table-markbook-score .score .sort-action:hover {
  opacity: .8;
}

.table-markbook .table-markbook-score .score:first-child {
  background-color: #F3F5F7 !important;
}

.table-markbook .table-markbook-score .score:last-child {
  border-right: none;
}

.table-markbook .table-markbook-score.table-markbook-score-2 .score:nth-child(2), .table-markbook .table-markbook-score.table-markbook-score-2 .score:nth-child(3) {
  width: 37.5%;
}

.table-markbook .table-markbook-score.table-markbook-score-3 .score:nth-child(1) {
  width: 35%;
}

.table-markbook .table-markbook-score.table-markbook-score-3 .score:nth-child(3) {
  width: 40%;
}

.table-markbook tbody tr.checked td {
  background-color: #c0cdd6 !important;
}

.table-markbook tbody tr.checked td .table-markbook-score .score:first-child {
  background-color: #c0cdd6 !important;
}

.table-markbook th .table-markbook-score .score {
  background-color: #1B2A3D;
  color: #ffffff;
  border-top: 1px solid #d4dde3;
}

.table-markbook th .table-markbook-score .score:first-child {
  background-color: #F3F5F7 !important;
  border-top-color: #F3F5F7 !important;
  color: #1B2A3D !important;
}

.table-markbook td .table-markbook-score .score {
  font-size: 13px;
  font-weight: 600 !important;
}

.table-markbook .sticky-col {
  position: -webkit-sticky;
  position: sticky;
}

.table-markbook .sticky-col.first-col {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  left: 0;
  z-index: 20;
}

.table-markbook .sticky-col.first-col:before {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background-color: #d4dde3;
}

.markbook-section {
  display: block;
  position: relative;
  margin-right: -16px;
  border-bottom: 1px solid #d4dde3;
}

.markbook-section .markbook-content {
  overflow-x: auto;
  padding-left: 320px;
  position: relative;
}

.markbook-section .markbook-content .markbook-content-head,
.markbook-section .markbook-content .markbook-content-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.markbook-section .markbook-fixed {
  position: absolute;
  top: 226px;
  left: 0;
  width: 321px;
  z-index: 20;
  border-right: 1px solid #d4dde3;
}

.markbook-section .markbook-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 321px;
  height: 226px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0073e0;
  padding: 8px;
}

.markbook-group {
  position: relative;
}

.markbook-group:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #FB5779;
}

.markbook-group .markbook-group-title {
  background-color: #3F96E8;
  color: #ffffff;
  position: relative;
  padding: 8px;
  height: 46px;
}

.markbook-group:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background-color: #9DB6FF;
  z-index: 10;
}

.markbook-group:nth-child(odd):after {
  background-color: #5CA71A;
}

.markbook-content-body .markbook-group:after {
  display: none;
}

.markbook-group-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.markbook-group-item .markbook-item {
  position: relative;
}

.markbook-group-item .markbook-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background-color: #9DB6FF;
  z-index: 10;
}

.markbook-group-item .markbook-item:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background-color: #9DB6FF;
  z-index: 10;
}

.markbook-group-item .markbook-item.markbook-score-2:after {
  display: none;
}

.markbook-group-item .markbook-item.markbook-item-body:after {
  display: none;
}

.markbook-score {
  height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.markbook-score .score-col-1 {
  width: 80px;
  border-left: 1px solid rgba(0, 0, 0, 0.14);
  padding: 8px 4px;
}

.markbook-score .score-col-1:first-child {
  border-left: 0px;
}

.markbook-score .score-col-2 {
  width: 60px;
  border-left: 1px solid rgba(0, 0, 0, 0.14);
  padding: 8px 4px;
}

.markbook-score .score-col-2:first-child {
  border-left: 0px;
}

.markbook-score.markbook-score-1 {
  background-color: #7542E9;
  color: #ffffff;
}

.markbook-score.markbook-score-2 {
  background-color: #3F96E8;
  color: #ffffff;
}

.markbook-score.markbook-item-body {
  display: block;
  height: auto;
}

.markbook-score.markbook-item-body.markbook-score-1, .markbook-score.markbook-item-body.markbook-score-2 {
  background-color: transparent;
}

.markbook-score.markbook-item-body .score-item {
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.markbook-score.markbook-item-body .score-item .score-col-1 {
  position: relative;
  background-color: #7542E9;
  height: 46px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  text-align: right;
  padding: 8px;
}

.markbook-score.markbook-item-body .score-item .score-col-1:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.16);
}

.markbook-score.markbook-item-body .score-item .score-col-2 {
  position: relative;
  background-color: #3F96E8;
  height: 46px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  text-align: right;
  padding: 8px;
}

.markbook-score.markbook-item-body .score-item .score-col-2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.16);
}

.markbook-score.markbook-item-body .score-item:nth-child(even) .score-col-1 {
  background-color: #632EDF;
}

.markbook-score.markbook-item-body .score-item:nth-child(even) .score-col-2 {
  background-color: #2180D9;
}

.markbook-score.markbook-item-body .score-item-separator {
  height: 46px;
  background-color: #7542E9;
}

.item-1,
.markbook-item-name {
  padding: 8px;
  height: 46px;
  background-color: pink;
}

.markbook-item-separator {
  display: block;
  height: 46px;
  background-color: #ffffff;
}

.markbook-item-name {
  background-color: #ffffff;
  position: relative;
}

.markbook-item-name:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #d4dde3;
}

.markbook-item-name:nth-child(even) {
  background-color: #F1F2F4;
}

.item-2 {
  padding: 8px;
  height: 80px;
  background-color: #3661DE;
  color: #ffffff;
}

.item-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.item-3 .item-sub {
  width: 100px;
  padding: 6px;
  height: 100px;
  background-color: #5B81F0;
  color: #ffffff;
  position: relative;
}

.item-3 .item-sub .item-sub-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.item-3 .item-sub:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background-color: #9DB6FF;
  z-index: 10;
}

.item-3 .item-sub:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #9DB6FF;
  z-index: 10;
}

.item-3 .item-sub.score {
  background-color: #3661DE;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  width: 120px;
}

.item-3 .item-sub.score:after {
  display: none;
}

.item-3 .item-sub.score .item-sub-col {
  padding: 0px 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.14);
}

.item-3 .item-sub.score .item-sub-col:nth-child(1) {
  width: 60%;
}

.item-3 .item-sub.score .item-sub-col:nth-child(2) {
  width: 40%;
}

.item-3 .item-sub.score .item-sub-col:first-child {
  border-left: none;
}

.item-3 .item-sub.item-sub-sm {
  width: 64px;
}

.item-3.item-3-body .item-sub {
  height: 46px;
  background-color: #ffffff;
  color: #1B2A3D;
  font-weight: 600;
}

.item-3.item-3-body .item-sub:before {
  background-color: #d4dde3;
}

.item-3.item-3-body .item-sub:after {
  background-color: #d4dde3;
}

.item-3.item-3-body .item-sub.score {
  background-color: #3661DE;
  color: #ffffff;
}

.item-3.item-3-body .item-sub.score:after {
  display: block;
  background-color: rgba(0, 0, 0, 0.14);
}

.item-3.item-3-body:nth-child(even) .item-sub {
  background-color: #F1F2F4;
}

.item-3.item-3-body:nth-child(even) .item-sub.score {
  background-color: #214CC9;
}

.markbook-reporting:before {
  background-color: #2478C9;
}

.markbook-reporting .item-sub,
.markbook-reporting .item-3-body .item-sub {
  background-color: #ffffff;
  color: #1B2A3D;
}

.markbook-reporting .markbook-group-title,
.markbook-reporting .item-2,
.markbook-reporting .item-3 .item-sub-score {
  background-color: #00478B;
  color: #ffffff;
}

.markbook-reporting .markbook-item:before, .markbook-reporting .markbook-item:after {
  background-color: #2478C9;
}

.markbook-reporting .item-3 {
  position: relative;
}

.markbook-reporting .item-3:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background-color: #2478C9;
  z-index: 10;
}

.markbook-reporting .item-3 .item-sub:after {
  display: none;
}

.markbook-reporting .item-3 .item-sub:before {
  background-color: #d4dde3;
  z-index: inherit;
}

.markbook-reporting .item-3 .item-sub.item-sub-score:before {
  background-color: #2478C9;
}

.markbook-reporting .item-3.item-3-body:before {
  display: none;
}

.markbook-reporting .item-3.item-3-body .item-sub:after {
  display: block;
  background-color: #d4dde3;
}

.markbook-reporting .item-3.item-3-body .item-sub-score:after {
  display: block;
  background-color: #2478C9;
}

.markbook-reporting .item-3.item-3-body:nth-child(even) .item-sub-score {
  background-color: #003B74;
}

.edit-number-markbook {
  width: 40px;
  padding: 4px;
}

.markbook-fixed .markbook-item-name:nth-child(2):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(2):hover) + .markbook-content .item-3-body:nth-child(2) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(2):hover) + .markbook-content .item-3-body:nth-child(2) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(2):hover) + .markbook-content .score-item:nth-child(2) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(2):hover) + .markbook-content .score-item:nth-child(2) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(2):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(2) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(3):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(3):hover) + .markbook-content .item-3-body:nth-child(3) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(3):hover) + .markbook-content .item-3-body:nth-child(3) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(3):hover) + .markbook-content .score-item:nth-child(3) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(3):hover) + .markbook-content .score-item:nth-child(3) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(3):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(3) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(4):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(4):hover) + .markbook-content .item-3-body:nth-child(4) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(4):hover) + .markbook-content .item-3-body:nth-child(4) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(4):hover) + .markbook-content .score-item:nth-child(4) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(4):hover) + .markbook-content .score-item:nth-child(4) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(4):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(4) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(5):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(5):hover) + .markbook-content .item-3-body:nth-child(5) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(5):hover) + .markbook-content .item-3-body:nth-child(5) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(5):hover) + .markbook-content .score-item:nth-child(5) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(5):hover) + .markbook-content .score-item:nth-child(5) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(5):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(5) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(6):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(6):hover) + .markbook-content .item-3-body:nth-child(6) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(6):hover) + .markbook-content .item-3-body:nth-child(6) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(6):hover) + .markbook-content .score-item:nth-child(6) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(6):hover) + .markbook-content .score-item:nth-child(6) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(6):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(6) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(7):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(7):hover) + .markbook-content .item-3-body:nth-child(7) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(7):hover) + .markbook-content .item-3-body:nth-child(7) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(7):hover) + .markbook-content .score-item:nth-child(7) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(7):hover) + .markbook-content .score-item:nth-child(7) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(7):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(7) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(8):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(8):hover) + .markbook-content .item-3-body:nth-child(8) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(8):hover) + .markbook-content .item-3-body:nth-child(8) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(8):hover) + .markbook-content .score-item:nth-child(8) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(8):hover) + .markbook-content .score-item:nth-child(8) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(8):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(8) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(9):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(9):hover) + .markbook-content .item-3-body:nth-child(9) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(9):hover) + .markbook-content .item-3-body:nth-child(9) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(9):hover) + .markbook-content .score-item:nth-child(9) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(9):hover) + .markbook-content .score-item:nth-child(9) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(9):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(9) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(10):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(10):hover) + .markbook-content .item-3-body:nth-child(10) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(10):hover) + .markbook-content .item-3-body:nth-child(10) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(10):hover) + .markbook-content .score-item:nth-child(10) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(10):hover) + .markbook-content .score-item:nth-child(10) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(10):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(10) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(11):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(11):hover) + .markbook-content .item-3-body:nth-child(11) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(11):hover) + .markbook-content .item-3-body:nth-child(11) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(11):hover) + .markbook-content .score-item:nth-child(11) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(11):hover) + .markbook-content .score-item:nth-child(11) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(11):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(11) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(12):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(12):hover) + .markbook-content .item-3-body:nth-child(12) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(12):hover) + .markbook-content .item-3-body:nth-child(12) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(12):hover) + .markbook-content .score-item:nth-child(12) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(12):hover) + .markbook-content .score-item:nth-child(12) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(12):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(12) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(13):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(13):hover) + .markbook-content .item-3-body:nth-child(13) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(13):hover) + .markbook-content .item-3-body:nth-child(13) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(13):hover) + .markbook-content .score-item:nth-child(13) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(13):hover) + .markbook-content .score-item:nth-child(13) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(13):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(13) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(14):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(14):hover) + .markbook-content .item-3-body:nth-child(14) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(14):hover) + .markbook-content .item-3-body:nth-child(14) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(14):hover) + .markbook-content .score-item:nth-child(14) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(14):hover) + .markbook-content .score-item:nth-child(14) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(14):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(14) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(15):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(15):hover) + .markbook-content .item-3-body:nth-child(15) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(15):hover) + .markbook-content .item-3-body:nth-child(15) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(15):hover) + .markbook-content .score-item:nth-child(15) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(15):hover) + .markbook-content .score-item:nth-child(15) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(15):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(15) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(16):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(16):hover) + .markbook-content .item-3-body:nth-child(16) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(16):hover) + .markbook-content .item-3-body:nth-child(16) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(16):hover) + .markbook-content .score-item:nth-child(16) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(16):hover) + .markbook-content .score-item:nth-child(16) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(16):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(16) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(17):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(17):hover) + .markbook-content .item-3-body:nth-child(17) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(17):hover) + .markbook-content .item-3-body:nth-child(17) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(17):hover) + .markbook-content .score-item:nth-child(17) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(17):hover) + .markbook-content .score-item:nth-child(17) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(17):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(17) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(18):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(18):hover) + .markbook-content .item-3-body:nth-child(18) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(18):hover) + .markbook-content .item-3-body:nth-child(18) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(18):hover) + .markbook-content .score-item:nth-child(18) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(18):hover) + .markbook-content .score-item:nth-child(18) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(18):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(18) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(19):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(19):hover) + .markbook-content .item-3-body:nth-child(19) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(19):hover) + .markbook-content .item-3-body:nth-child(19) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(19):hover) + .markbook-content .score-item:nth-child(19) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(19):hover) + .markbook-content .score-item:nth-child(19) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(19):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(19) .item-sub-score {
  background-color: #002F5D;
}

.markbook-fixed .markbook-item-name:nth-child(20):hover {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(20):hover) + .markbook-content .item-3-body:nth-child(20) .item-sub {
  background-color: #E2E5E8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(20):hover) + .markbook-content .item-3-body:nth-child(20) .item-sub.score {
  background-color: #133BB0;
}

.markbook-fixed:has(.markbook-item-name:nth-child(20):hover) + .markbook-content .score-item:nth-child(20) .score-col-1 {
  background-color: #4F1DC5;
}

.markbook-fixed:has(.markbook-item-name:nth-child(20):hover) + .markbook-content .score-item:nth-child(20) .score-col-2 {
  background-color: #1370C8;
}

.markbook-fixed:has(.markbook-item-name:nth-child(20):hover) + .markbook-content .markbook-reporting .item-3-body:nth-child(20) .item-sub-score {
  background-color: #002F5D;
}

.md-content {
  color: #1B2A3D;
}

.md-content button {
  font-size: 15px;
}

.md-modal-sm {
  max-width: 400px;
}

.md-modal-lg {
  width: 100%;
  max-width: 96%;
}

@media screen and (min-width: 1400px) {
  .md-modal-lg {
    max-width: 96%;
  }
}

@media screen and (max-width: 991px) {
  .md-modal {
    padding: 12px;
  }
}

@media screen and (max-width: 767px) {
  .md-modal {
    min-width: auto;
    max-width: auto;
    width: 100%;
    padding: 0px;
  }
}

.md-content-2 > div {
  padding: inherit;
  font-weight: inherit;
  font-size: inherit;
}

.md-content-2 > div p {
  padding: inherit;
  margin-bottom: 1rem;
}

.md-content-2 > div ul {
  padding: 0;
}

.md-content-2 > div ul li {
  padding: inherit;
}

.md-modal button {
  margin: inherit;
}

.md-lg {
  max-width: 780px;
  width: 100%;
}

.md-full {
  width: 100%;
  max-width: inherit;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 !important;
  -webkit-transform: none;
          transform: none;
}

.md-full .md-content > div {
  padding: 0;
}

.md-modal-2 {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100%;
  -webkit-transform: none;
          transform: none;
}

.md-card {
  position: relative;
  margin: 32px auto !important;
  max-width: 500px;
}

@media screen and (max-width: 767px) {
  .md-card {
    margin: 0px auto !important;
  }
}

.md-modal-scrolled {
  max-height: 560px;
  overflow-y: auto;
}

.md-card-lg {
  max-width: 900px;
}

.md-card-full {
  max-width: 100%;
  margin: 18px !important;
}

@media screen and (max-width: 767px) {
  .md-card-full {
    margin: 0px !important;
  }
}

.md-effect-12 .md-content {
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.md-overlay, .md-overlay-notification {
  background: rgba(0, 4, 14, 0.6) !important;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.md-overlay-notification {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1999 !important;
  -webkit-transition: all .3s;
  transition: all .3s;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: none !important;
  transition: none !important;
}

.md-overlay.show, .md-overlay-notification.show {
  visibility: visible;
  opacity: 1;
}

.md-v-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 0px;
}

.md-v-center .md-content {
  width: 100%;
}

.md-v-center .md-content > div {
  padding: 15px 56px;
}

.modal-header, .modal-footer {
  border-color: #d4dde3 !important;
}

.main-menu-logo {
  padding: 12px;
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
  text-align: center;
}

.main-menu-logo img {
  width: 72% !important;
  margin: 0 auto;
}

.main-menu-header {
  padding: 0px 12px;
}

@media screen and (max-width: 991px) {
  .main-menu-header {
    padding-top: 18px;
  }
}

.user-details .text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 60 !important;
}

@media screen and (max-width: 767px) {
  .user-details .text-ellipsis {
    width: 210px !important;
  }
}

.name-siswa-1 {
  width: 160px;
}

@media screen and (max-width: 767px) {
  .name-siswa-1 {
    width: auto;
  }
}

.loading-block {
  display: block;
  height: 18px;
  background-color: #F3F5F7;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin: 6px 0px;
}

.loading-block.loading-block-rounded {
  border-radius: 24px;
}

.loading-block.loading-block-100 {
  width: 100%;
}

.loading-block.loading-block-60 {
  width: 60%;
}

.loading-block.loading-block-80 {
  width: 80%;
}

.loading-block.loading-block-40 {
  width: 40%;
}

.loading-block.loading-block-10 {
  width: 10%;
}

.loading-block.loading-block-20 {
  width: 20%;
}

.loading-block.loading-block-btn-sm {
  height: 26px;
}

.loading-block.loading-block-h1 {
  height: 30px;
}

.loading-block.loading-block-h2 {
  height: 48px;
}

.loading-block.loading-block-h3 {
  height: 64px;
}

.loading-block.loading-block-h4 {
  height: 80px;
}

.loading-block.loading-block-tall {
  height: 200px;
}

.loading-block.loading-block-circle-sm {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.loading-block.loading-block-circle {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

.loading, .loading-bar {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.loading:before, .loading-bar:before {
  content: '';
  display: block;
  position: absolute;
  left: -100%;
  top: 0;
  height: 100%;
  width: 100%;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, #e3e6e9), to(transparent));
  background: linear-gradient(to right, transparent 0%, #e3e6e9 50%, transparent 100%);
  -webkit-animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
          animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loading.loading-bar-stop:before, .loading-bar.loading-bar-stop:before {
  -webkit-animation: none;
          animation: none;
}

.loading-bar {
  height: 18px;
  background-color: #F3F5F7;
  width: 100%;
  border-radius: 4px;
  display: block;
  position: relative;
}

@-webkit-keyframes load {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

@keyframes load {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

.topic-loader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.topic-loader .tl-img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 52px;
  background-color: #F3F5F7;
  margin-right: 18px;
}

.topic-loader .tl-desc {
  width: 100%;
}

.topic-loader .tl-desc .tl-desc-item {
  display: block;
  height: 18px;
  background-color: #F3F5F7;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin: 6px 0px;
}

.topic-loader .tl-desc .tl-desc-item.tl-desc-1 {
  width: 50%;
}

.topic-loader .tl-desc .tl-desc-item.tl-desc-2 {
  width: 20%;
}

.topic-loader .tl-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.topic-loader .tl-action .tl-action-item {
  width: 52px;
  height: 32px;
  background-color: #F3F5F7;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-left: 12px;
}

.topic-loader.topic-loader-sm .tl-img {
  width: 38px;
  height: 38px;
  border-radius: 38px;
}

.load-bar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1028;
}

.load-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #0073e0;
}

.bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
}

.bar:nth-child(1) {
  background-color: #FF9A07;
  -webkit-animation: loading 3s linear infinite;
  animation: loading 3s linear infinite;
}

.bar:nth-child(2) {
  background-color: #D5305D;
  -webkit-animation: loading 3s linear 1s infinite;
  animation: loading 3s linear 1s infinite;
}

.bar:nth-child(3) {
  background-color: #0073e0;
  -webkit-animation: loading 3s linear 2s infinite;
  animation: loading 3s linear 2s infinite;
}

@-webkit-keyframes loading {
  from {
    left: 50%;
    width: 0;
    z-index: 100;
  }
  33.3333% {
    left: 0;
    width: 100%;
    z-index: 10;
  }
  to {
    left: 0;
    width: 100%;
  }
}

@keyframes loading {
  from {
    left: 50%;
    width: 0;
    z-index: 100;
  }
  33.3333% {
    left: 0;
    width: 100%;
    z-index: 10;
  }
  to {
    left: 0;
    width: 100%;
  }
}

.sweet-alert {
  border-radius: 6px !important;
  max-width: 600px;
  width: 100%;
  padding: 2rem 3rem;
  margin-left: -300px;
  font-family: "Cerebri Sans", sans-serif !important;
}

.sweet-alert h2, .sweet-alert p {
  color: #1B2A3D !important;
}

.sweet-alert h2 {
  margin-bottom: 12px !important;
  font-size: 26px;
  padding: 0 2rem;
  line-height: normal;
}

.sweet-alert p {
  font-size: 16px;
  width: 80%;
  margin: 0 auto;
}

.sweet-alert .sa-button-container {
  padding-top: 1.4rem;
}

.sweet-alert button {
  border-radius: 4px !important;
  font-size: 15px;
  font-weight: 500;
  -webkit-transition: none !important;
  transition: none !important;
}

.sweet-alert button.confirm {
  background-color: #0073e0 !important;
  border-color: #0073e0;
  -webkit-transition: none !important;
  transition: none !important;
}

.sweet-alert button.confirm:hover {
  background-color: #0059AD !important;
  border-color: #0059AD;
  -webkit-transition: none !important;
  transition: none !important;
}

.sweet-alert button.cancel {
  background-color: #ffffff;
  border: 1px solid #d4dde3;
  color: #1B2A3D;
}

.sweet-alert button.cancel:hover {
  background-color: #E3F1FF;
  border-color: #0073e0;
  color: #1B2A3D;
}

@media screen and (max-width: 991px) {
  .sweet-alert {
    padding: 18px 24px;
  }
  .sweet-alert p {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .sweet-alert {
    max-width: inherit;
    width: inherit;
    margin-left: 0px;
    top: 16px;
    left: 16px;
    right: 16px;
    margin-top: 0 !important;
    padding: 16px 20px;
  }
  .sweet-alert h2 {
    font-size: 22px;
  }
  .sweet-alert p {
    font-size: 15px;
  }
  .sweet-alert button {
    font-size: 15px;
    margin: 0;
    margin-top: 12px;
  }
}

@media screen and (max-width: 500px) {
  .sweet-alert .sa-confirm-button-container {
    width: 100%;
    display: block;
  }
  .sweet-alert button {
    display: block;
    width: 100%;
  }
}

.showSweetAlert, .hideSweetAlert {
  -webkit-animation: false !important;
          animation: false !important;
}

.sweet-overlay {
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-animation: false !important;
          animation: false !important;
}

.sa-warning, .sa-success, .sa-error {
  border: none;
  -webkit-transition: none;
  transition: none;
  -webkit-animation: none;
          animation: none;
}

.sa-warning.sa-icon, .sa-success.sa-icon, .sa-error.sa-icon {
  width: 140px;
  height: 140px;
  border-radius: 0;
  border: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}

.sa-warning:before, .sa-warning:after, .sa-success:before, .sa-success:after, .sa-error:before, .sa-error:after {
  display: none !important;
}

.sa-warning .sa-body, .sa-warning .sa-dot, .sa-warning .sa-line, .sa-warning .sa-placeholder, .sa-warning .sa-fix, .sa-warning .sa-x-mark, .sa-warning span, .sa-success .sa-body, .sa-success .sa-dot, .sa-success .sa-line, .sa-success .sa-placeholder, .sa-success .sa-fix, .sa-success .sa-x-mark, .sa-success span, .sa-error .sa-body, .sa-error .sa-dot, .sa-error .sa-line, .sa-error .sa-placeholder, .sa-error .sa-fix, .sa-error .sa-x-mark, .sa-error span {
  display: none !important;
}

.sa-warning.sa-icon {
  background-image: url("https://scolacdn.com/images/owl-warning.svg");
}

.sa-success.sa-icon {
  background-image: url("https://scolacdn.com/images/owl-success.svg");
}

.sa-error.sa-icon {
  background-image: url("https://scolacdn.com/images/owl-error.svg");
}

.dot-status {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 8px;
  background: transparent;
  margin-right: 6px;
}

.dot-status.dot-primary {
  background: #0073e0;
}

.dot-status.dot-success {
  background: #00C177;
}

.dot-status.dot-warning {
  background: #FF9A07;
}

.dot-status.dot-notification {
  background: #D5305D;
}

.dot-notif {
  color: #D5305D;
}

.color-mark-circle {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
  border-radius: 16px;
  border: 4px solid #F3F5F7;
}

.color-mark-circle.sm {
  width: 26px;
  height: 26px;
  border-radius: 13px;
}

.user-photos {
  width: 38px;
  height: 38px;
  border-radius: 19px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F3F5F7;
  position: relative;
}

.user-photos.user-photos-sm {
  width: 32px;
  height: 32px;
  border-radius: 16px;
}

.user-photos.user-photos-md {
  width: 56px;
  height: 56px;
  border-radius: 28px;
}

.user-photos.user-photos-lg {
  width: 80px;
  height: 80px;
  border-radius: 42px;
}

.user-photos .user-photos-initial {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #859BA6;
  font-size: 11px;
  font-weight: 600;
}

.image-profile {
  width: 30px;
  height: 30px;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F3F5F7;
  border-radius: 30px;
}

.image-profile.image-profile-lg {
  width: 42px;
  height: 42px;
  border-radius: 42px;
}

.sidebar-panel-new {
  height: 100%;
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 230px;
  background-color: #ffffff;
}

.pcoded-content-new {
  margin-left: 230px;
}

.pcoded-inner-content {
  padding: 0;
}

@media screen and (max-width: 767px) {
  .pcoded-inner-content {
    padding: 0px;
  }
}

.pcoded-mtext-clear:before {
  display: none;
}

.pcoded .pcoded-navbar, .pcoded .pcoded-header {
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
}

.pcoded-main-container {
  background: #F3F5F7;
  margin-top: 0px !important;
  min-height: 100vh;
}

@media screen and (max-width: 991px) {
  .pcoded-main-container {
    margin-top: 72px !important;
    min-height: auto;
  }
}

.pcoded-inner-navbar {
  height: 100% !important;
}

@media screen and (max-width: 991px) {
  .pcoded-inner-navbar {
    height: calc(100% - 72px) !important;
  }
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[item-border="true"][item-border-style="none"] li > a {
  color: #1B2A3D !important;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item > li > a {
  padding: 8px 8px;
  border-radius: 6px;
}

.pcoded .pcoded-container {
  background: #ffffff !important;
}

.pcoded[theme-layout="vertical"][vertical-nav-type="expanded"] .pcoded-header .pcoded-left-header {
  width: 230px;
  height: 100% !important;
}

.pcoded[theme-layout="vertical"][vertical-nav-type="expanded"] .pcoded-navbar, .pcoded .main-menu {
  width: 230px;
  -webkit-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.06) !important;
          box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.06) !important;
}

@media screen and (max-width: 767px) {
  .pcoded[theme-layout="vertical"][vertical-nav-type="expanded"] .pcoded-navbar, .pcoded .main-menu {
    width: 300px;
  }
}

@media screen and (max-width: 767px) {
  .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="overlay"] .pcoded-navbar {
    width: 300px;
    margin-left: -300px;
  }
}

.pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="shrink"] .pcoded-content {
  margin-left: 230px;
}

.pcoded .main-menu .main-menu-content .more-details a {
  padding: 4px 12px;
  -webkit-transition: none !important;
  transition: none !important;
  font-weight: 500;
  color: #1B2A3D !important;
}

.pcoded .main-menu .main-menu-content .more-details a:hover {
  background-color: #F3F5F7;
}

.pcoded .pcoded-navbar {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.pcoded .pcoded-navbar .pcoded-item > li {
  padding: 0px 8px;
}

.pcoded .pcoded-navbar .pcoded-item li.pcoded-hasmenu a {
  padding-right: 32px;
}

.pcoded .pcoded-navbar .pcoded-item > li > a {
  padding-left: 18px;
  padding-right: 30px;
  font-size: 15px;
  font-weight: 500 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: none !important;
  transition: none !important;
  color: #1B2A3D !important;
}

.pcoded .pcoded-navbar .pcoded-item > li > a img {
  width: 24px;
  margin-right: 8px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.pcoded .pcoded-navbar .pcoded-item > li > a:hover {
  background-color: #F3F5F7 !important;
}

.pcoded .pcoded-navbar .pcoded-item li.pcoded-hasmenu > a:after {
  top: 2px !important;
}

.pcoded .pcoded-navbar .pcoded-item li.pcoded-hasmenu {
  position: relative;
}

.pcoded .pcoded-navbar .pcoded-item li.pcoded-hasmenu .pcoded-submenu {
  -webkit-transition: none !important;
  transition: none !important;
  padding: 0;
  width: 100%;
  background-color: #F3F5F7;
  border-radius: 6px;
  overflow: hidden;
}

.pcoded .pcoded-navbar .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a {
  color: #1B2A3D !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 0px !important;
  -webkit-transition: none !important;
  transition: none !important;
}

.pcoded .pcoded-navbar .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a:after {
  display: none;
}

.pcoded .pcoded-navbar .pcoded-item li.pcoded-hasmenu .pcoded-hasmenu-icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 14px;
  color: #859BA6;
}

.pcoded .pcoded-navbar .pcoded-item li.pcoded-hasmenu.pcoded-trigger .pcoded-hasmenu-icon {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}

.pcoded .pcoded-navbar .pcoded-item li.pcoded-hasmenu:hover .pcoded-hasmenu-icon {
  color: #0073e0;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu {
  width: 100%;
  padding: 4px 0px;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a:hover {
  background-color: #F3F5F7;
  color: #1B2A3D !important;
}

.pcoded[theme-layout="vertical"] .pcoded-container {
  overflow: inherit;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu[dropdown-icon="style1"] > a:after {
  display: none;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu {
  background-color: #F3F5F7;
  padding: 0px;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a:hover {
  background-color: #e1e6eb;
}

@media screen and (max-width: 991px) {
  body .pcoded[pcoded-device-type="phone"][vertical-nav-type="expanded"] .pcoded-navbar, body .pcoded[pcoded-device-type="tablet"][vertical-nav-type="expanded"] .pcoded-navbar {
    position: fixed !important;
  }
}

.page-title {
  height: 35px;
}

@media screen and (max-width: 767px) {
  .page-title {
    height: auto;
  }
}

.modal {
  z-index: 9999;
}

.modal-backdrop {
  background: rgba(0, 4, 14, 0.6) !important;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  opacity: 0;
}

.modal-backdrop.show {
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  opacity: 1;
}

.modal-backdrop.fade, .modal-backdrop.fade-scale {
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.modal-content {
  border-radius: 6px;
  border: none;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
}

@media screen and (min-width: 992px) {
  .modal-xl {
    max-width: 800px;
  }
}

@media screen and (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

.modal-fullpage {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  -webkit-transform: none;
          transform: none;
}

.modal-fullpage .md-content {
  height: 100%;
  overflow-y: auto;
  border-radius: 0px;
}

.modal-fullpage .modal-fullpage--inner {
  overflow-y: auto;
}

.modal-fullpage.md-modal {
  padding: 0px;
}

@media screen and (max-width: 991px) {
  .modal-fullpage.md-modal {
    padding: 0px;
  }
}

.modal-fullpage-2 {
  background: #ffffff;
}

.modal-fullpage-2 .modal-dialog {
  max-width: 100%;
  margin: 0;
  background: #ffffff;
  border-radius: 0px;
  position: relative;
  position: relative;
  height: 100%;
}

.modal-dialog-centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 576px) {
  .modal-dialog-centered {
    min-height: calc(100vh - 64px);
  }
}

.modal-dialog-centered.modal-dialog {
  margin: 32px auto;
}

.fade-scale {
  -webkit-transform: scale(0.8) translate(0, 0);
          transform: scale(0.8) translate(0, 0);
  opacity: 0;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.fade-scale .modal-dialog {
  -webkit-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.fade-scale.show {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.modal[id="addNewFile"] {
  overflow-y: hidden;
}

.md-tabs-base .nav-item {
  width: inherit;
  position: relative;
  margin: 0;
}

.md-tabs-base {
  position: relative;
  margin-left: -10px;
  margin-right: -10px;
}

.md-tabs-base .nav-item {
  text-align: center;
  margin-right: 10px !important;
  margin-left: 10px !important;
  position: relative;
  cursor: pointer;
}

.md-tabs-base .nav-item:before {
  content: '';
  position: absolute;
  top: 10px;
  right: -6px;
  bottom: 10px;
  left: -6px;
  border-radius: 4px;
  background-color: #E5F0FF;
  opacity: 0;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.md-tabs-base .nav-item .nav-link {
  padding: 0 0px !important;
  color: #354862;
  font-weight: 500;
  line-height: 1;
  font-size: 15px;
  height: 54px;
  border: none;
  text-transform: capitalize;
  position: relative;
}

@media screen and (max-width: 991px) {
  .md-tabs-base .nav-item .nav-link {
    padding: 0px !important;
  }
}

.md-tabs-base .nav-item .nav-link:hover {
  color: #0073e0;
  opacity: 1;
}

.md-tabs-base .nav-item .nav-link.active .badge-base {
  font-weight: 600;
}

.md-tabs-base .nav-item .nav-link.active:hover {
  color: #0073e0;
}

.md-tabs-base .nav-item .nav-link.active, .md-tabs-base .nav-item .nav-link:focus {
  color: #0073e0;
  font-weight: 500;
  line-height: 1;
  opacity: 1;
}

.md-tabs-base .nav-item .nav-link .badge {
  padding: 0px 6px !important;
  min-width: 26px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.md-tabs-base .nav-item .slide {
  background: #0073e0;
  height: 3px;
  right: 0;
  width: 100%;
  bottom: 0;
}

.md-tabs-base .nav-item.nav-item--pill:before {
  top: 4px;
  bottom: 4px;
}

.md-tabs-base .nav-item.nav-item--pill .nav-link {
  height: 42px;
}

.md-tabs-base .nav-item:hover .nav-link {
  color: #0073e0;
  opacity: 1;
}

.md-tabs-base .nav-item:hover:before {
  opacity: 1;
}

.md-tabs-base .nav-item:hover .badge-base {
  background-color: #0073e0;
  color: #ffffff;
}

.md-tabs-base.md-tabs-base-2 .nav-item .nav-link {
  padding: 0px !important;
}

.md-tabs-base.md-tabs-base-2 .nav-item .nav-link.active {
  color: #0073e0;
}

.md-tabs-base.md-tabs-base-2 .nav-item .nav-link:hover {
  color: #0073e0;
}

@media screen and (max-width: 767px) {
  .md-tabs-base .nav-item:before {
    display: none;
  }
}

.nav-item-separator {
  display: block;
  width: 14px;
  position: relative;
}

.nav-item-separator:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(calc(-50% - 1px));
          transform: translateX(calc(-50% - 1px));
  width: 1px;
  bottom: 0;
  background-color: #d4dde3;
  display: block;
}

@media screen and (max-width: 767px) {
  .nav-item-separator {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media screen and (max-width: 400px) {
  .nav-item-separator {
    padding-right: 12px;
    padding-left: 12px;
  }
}

.md-tabs-white .nav-item .nav-link {
  color: #ffffff !important;
  opacity: .8;
}

.md-tabs-white .nav-item .nav-link.active {
  color: #ffffff !important;
  opacity: 1;
}

.md-tabs-white .nav-item .nav-link:hover {
  color: #ffffff !important;
  opacity: 1;
}

.md-tabs-white .nav-item .slide {
  background: #FF9A07 !important;
}

.md-tabs-base .nav-item:hover .slide {
  opacity: .5;
}

.md-tabs .nav-item + .nav-item {
  margin: 0;
}

@media screen and (max-width: 991px) {
  .md-50-mobile {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .md-50-mobile .nav-item .nav-link {
    width: inherit;
    font-size: 14px !important;
  }
}

@media screen and (max-width: 767px) {
  .md-tabs-base {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
  }
  .md-tabs-base .nav-item {
    margin-right: 8px !important;
    margin-left: 8px !important;
  }
  .md-tabs-base .nav-item .nav-link {
    margin-bottom: 0;
  }
}

.md-tabs-scroll {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
}

.md-tabs .nav-item.open .nav-link, .md-tabs .nav-item.open .nav-link:focus, .md-tabs .nav-item.open .nav-link:hover, .md-tabs .nav-link.active, .md-tabs .nav-link.active:focus, .md-tabs .nav-link.active:hover {
  border: none;
  background-color: transparent;
  border-radius: 0;
}

.md-tabs .nav-link:focus, .md-tabs .nav-link:hover {
  border: none;
}

.md-tabs .nav-item .nav-link.active ~ .slide {
  opacity: 1;
  -webkit-transition: none;
  transition: none;
}

.md-tabs .nav-item .nav-link ~ .slide {
  opacity: 0;
  -webkit-transition: none;
  transition: none;
}

.nav-tabs-2-desktop,
.nav-tabs-3-desktop,
.nav-tabs-4-desktop {
  width: 100%;
  overflow: hidden;
}

.nav-tabs-2-desktop .nav-item,
.nav-tabs-3-desktop .nav-item,
.nav-tabs-4-desktop .nav-item {
  height: 52px;
}

.nav-tabs-2-desktop .nav-item .nav-link,
.nav-tabs-3-desktop .nav-item .nav-link,
.nav-tabs-4-desktop .nav-item .nav-link {
  width: 100%;
  height: 52px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.nav-tabs-2-desktop .nav-item .nav-link.active,
.nav-tabs-3-desktop .nav-item .nav-link.active,
.nav-tabs-4-desktop .nav-item .nav-link.active {
  color: #0073e0;
}

.nav-tabs-2-desktop .nav-item .nav-link.active:hover,
.nav-tabs-3-desktop .nav-item .nav-link.active:hover,
.nav-tabs-4-desktop .nav-item .nav-link.active:hover {
  color: #0073e0;
}

.nav-tabs-2-desktop .nav-item {
  width: 50%;
}

.nav-tabs-3-desktop .nav-item {
  width: 33.3333333333%;
}

.nav-tabs-4-desktop .nav-item {
  width: 25%;
}

.nav-ellipsis span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .nav-tabs-2-mobile,
  .nav-tabs-3-mobile,
  .nav-tabs-4-mobile {
    width: 100%;
    overflow: hidden;
  }
  .nav-tabs-2-mobile .nav-item,
  .nav-tabs-3-mobile .nav-item,
  .nav-tabs-4-mobile .nav-item {
    height: 52px;
  }
  .nav-tabs-2-mobile .nav-item .nav-link,
  .nav-tabs-3-mobile .nav-item .nav-link,
  .nav-tabs-4-mobile .nav-item .nav-link {
    width: 100%;
    height: 52px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1rem !important;
  }
  .nav-tabs-2-mobile .nav-item .nav-link.active,
  .nav-tabs-3-mobile .nav-item .nav-link.active,
  .nav-tabs-4-mobile .nav-item .nav-link.active {
    color: #0073e0;
  }
  .nav-tabs-2-mobile .nav-item .nav-link.active:hover,
  .nav-tabs-3-mobile .nav-item .nav-link.active:hover,
  .nav-tabs-4-mobile .nav-item .nav-link.active:hover {
    color: #0073e0;
  }
  .nav-tabs-2-mobile .nav-item {
    width: 50%;
  }
  .nav-tabs-3-mobile .nav-item {
    width: 33.3333333333%;
  }
  .nav-tabs-4-mobile .nav-item {
    width: 25%;
  }
}

.project-task .btn-white.btn-sm.px-2 {
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  padding: 0px !important;
  width: 34px;
  height: 34px;
  border-radius: 17px;
}

.project-task .table tr:hover td {
  border-top-color: #d4dde3 !important;
  border-bottom-color: #d4dde3 !important;
}

.project-task .table tr:hover .btn-white.btn-sm.px-2 {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.project-task tbody tr {
  cursor: pointer;
}

.project-task tbody tr td {
  vertical-align: middle;
}

.task-card, .task-card--info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.task-card {
  margin-top: -18px;
  margin-left: -18px;
  margin-right: -18px;
  margin-bottom: -18px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  position: relative;
}

.task-card .task-card--info {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: 100%;
  padding: 14px;
  padding-right: 0px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.task-card .task-card--action {
  padding: 14px;
  padding-left: 0px;
}

.task-card:hover {
  background: #ffffff;
  border-color: #0073e0;
}

.task-card:hover .task-card--icon {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

@media screen and (max-width: 767px) {
  .task-card {
    margin-top: -12px;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -12px;
    border-radius: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .task-card .task-card--info {
    padding: 8px;
    padding-right: 0px;
  }
  .task-card .task-card--action {
    padding: 12px;
    padding-left: 0px;
    padding-top: 0px;
  }
  .task-card .task-card--title .text-md-2 {
    font-size: 1rem !important;
  }
  .task-card:hover {
    border-color: #ffffff;
  }
}

.task-title {
  font-size: 15px;
}

@media screen and (max-width: 767px) {
  .task-title {
    font-size: 15px;
  }
}

.table-task {
  margin-left: -18px;
  margin-right: -18px;
  display: block;
  width: auto;
  border-top: 1px solid #d4dde3;
}

.table-task tr td:first-child {
  padding-left: 18px !important;
}

@media screen and (max-width: 767px) {
  .table-task tr td:first-child {
    padding-left: 8px !important;
  }
}

.table-task tr td:last-child {
  padding-right: 18px !important;
}

@media screen and (max-width: 767px) {
  .table-task tr td:last-child {
    padding-right: 12px !important;
  }
}

.table-task tr:first-child td {
  border-top: 0px;
}

@media screen and (max-width: 767px) {
  .table-task {
    margin-left: -12px;
    margin-right: -12px;
  }
}

.task-card--subtopic {
  margin-top: 18px;
}

.task-card--icon {
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media screen and (max-width: 767px) {
  .task-card--icon img {
    width: 32px !important;
  }
}

@media screen and (max-width: 767px) {
  .table-task td {
    padding: 8px !important;
    padding-bottom: 12px !important;
  }
}

@media screen and (max-width: 767px) {
  .task-contain h6 img {
    width: 28px;
  }
}

@media screen and (max-width: 767px) {
  .task-contain .m-l-20-mobile {
    margin-left: 8px !important;
  }
}

.badge-notes-topic {
  text-align: left;
  line-height: 1.3;
}

.badge-notes-topic span {
  white-space: normal;
}

.cke {
  border-radius: 8px !important;
  overflow: hidden;
}

.cke:hover {
  border-color: #0073e0;
}

.cke_chrome {
  border-color: #d4dde3 !important;
}

.cke_chrome:hover {
  border-color: #0073e0 !important;
}

.cke_top {
  border-bottom: none !important;
}

.cke_bottom {
  border-top: none !important;
}

.cke_top, .cke_bottom {
  background: #ffffff !important;
}

.cke_contents {
  padding: 0px 10px !important;
}

a.cke_button_off, a.cke_button_on {
  border-radius: 8px !important;
}

a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active {
  border-color: #ffffff !important;
  background: #F3F5F7 !important;
  border-radius: 8px !important;
}

.answer-group-2 {
  padding-bottom: 0px !important;
}

@media screen and (max-width: 767px) {
  .answer-group-2 {
    padding: 0px !important;
  }
}

.answer-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
  border-radius: 6px;
  background: #ffffff;
  padding-left: 50px;
  color: #1B2A3D;
  border: 1px solid #d4dde3;
}

.answer-card.with-line:before {
  content: '';
  display: block;
  width: 1px;
  background: #d4dde3;
  position: absolute;
  top: 0;
  left: 31px;
  height: 100%;
  bottom: 0;
}

.answer-card .answer-card--number {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  font-weight: 500;
  background: #F3F5F7;
  color: #1B2A3D;
  border: 1px solid #d4dde3;
}

.answer-card .answer-card--content {
  width: 78%;
  padding: 1rem;
}

.answer-card .answer-card--content.answer-card--content-2 {
  width: 70%;
}

.answer-card .answer-card--content .answer-card--question {
  display: block;
  margin-bottom: 1rem;
}

.answer-card .answer-card--content .answer-card--question .questions {
  font-size: 15px;
}

.answer-card .answer-card--content .answer-card--question .questions p {
  font-size: 15px;
}

.answer-card .answer-card--content .answer-card--question .questions p img {
  max-width: 70%;
  height: inherit;
}

.answer-card .answer-card--content .answer-card--question .questions p ul, .answer-card .answer-card--content .answer-card--question .questions ul {
  font-size: 15px;
  padding-left: 40px !important;
  list-style: disc;
}

.answer-card .answer-card--content .answer-card--question .questions p ul li, .answer-card .answer-card--content .answer-card--question .questions ul li {
  padding: 0px !important;
}

.answer-card .answer-card--content .answer-card--question .questions p ol, .answer-card .answer-card--content .answer-card--question .questions ol {
  font-size: 15px;
}

.answer-card .answer-card--content .answer-card--question .questions img {
  max-width: 70%;
  height: inherit;
}

.answer-card .answer-card--content .answer-card--answers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -8px;
  margin-right: -8px;
}

.answer-card .answer-card--content .answer-card--answers .answer-card--true, .answer-card .answer-card--content .answer-card--answers .answer-card--student {
  width: 50%;
  background: #ffffff;
  border-top: 1px solid #d4dde3;
  padding-top: .6rem;
  margin-left: 8px;
  margin-right: 8px;
}

.answer-card .answer-card--content .answer-card--answers.answer-card--status .answer-card--true {
  width: 30%;
}

.answer-card .answer-card--content .answer-card--answers.answer-card--status .answer-card--student {
  width: 70%;
}

.answer-card .answer-card--point {
  width: 22%;
  padding: 1rem;
  margin-left: 1rem;
  height: 100%;
}

.answer-card .answer-card--point.answer-card--point-2 {
  width: 30%;
}

.answer-card.answer-card--student {
  padding-left: 60px;
}

@media screen and (max-width: 991px) {
  .answer-card {
    padding-left: 60px;
  }
  .answer-card .answer-card--content {
    width: 70%;
  }
  .answer-card .answer-card--point {
    width: 30%;
  }
}

@media screen and (max-width: 767px) {
  .answer-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 12px;
    padding-left: 12px;
    padding-top: 40px;
    border-radius: 0px !important;
    border: 0px !important;
    margin-left: -6px;
    margin-right: -6px;
  }
  .answer-card .answer-card--number {
    width: 26px;
    height: 26px;
    top: 12px;
    left: 12px;
  }
  .answer-card .answer-card--content, .answer-card .answer-card--point {
    width: 100%;
  }
  .answer-card .answer-card--content.answer-card--content-2, .answer-card .answer-card--point.answer-card--content-2 {
    width: 100%;
  }
  .answer-card .answer-card--content.answer-card--point-2, .answer-card .answer-card--point.answer-card--point-2 {
    width: 100%;
    padding-left: 0;
    padding-bottom: 0;
  }
  .answer-card .answer-card--content {
    margin-bottom: 1rem;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #d4dde3;
    border-right: none;
    margin-right: 0px;
  }
  .answer-card .answer-card--content img {
    max-height: 200px !important;
    max-width: 100% !important;
  }
  .answer-card .answer-card--content .answer-card--answers {
    margin-left: 0;
    margin-right: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .answer-card .answer-card--content .answer-card--answers .answer-card--true, .answer-card .answer-card--content .answer-card--answers .answer-card--student {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
  }
  .answer-card .answer-card--content .answer-card--answers .answer-card--true {
    margin-bottom: 8px;
  }
  .answer-card .answer-card--point {
    padding-right: 0px;
    padding-left: 0px;
    border-left: none;
    margin-left: 0px;
  }
  .answer-card.with-line:before {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .answer-card--clean-bottom {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

.answer-card-2 {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: 1px solid #d4dde3;
}

.answer-group-2 .answer-card:hover:before {
  background: #0073e0;
}

.answer-group-2 .answer-card:hover .answer-card--number {
  background: #0073e0 !important;
  color: #ffffff;
  border-color: #0073e0;
}

.answer-card--lampiran {
  padding-top: .78rem;
}

.answer--info {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0073e0;
  color: #ffffff;
  padding: 1rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.answer--info.answer--info-normal {
  position: relative;
  bottom: inherit;
  left: inherit;
  right: inherit;
  padding: 0px;
  border-radius: 0px;
}

.answer--info .answer--info-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.answer--info .answer--info-inner .answer--info-title .answer--info-text {
  width: 500px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.answer--info .answer--info-inner .answer--info-student {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.answer--info .answer--info-inner .answer--info-student .btn {
  height: 40px;
  width: 50px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 24px;
}

.answer--info .answer--info-inner .answer--info-student .btn i {
  font-size: 18px;
  margin-right: 0px;
}

.answer--info .answer--info-inner .answer--info-student .btn .fe {
  font-size: 1.2rem;
}

.answer--info .answer--info-inner .answer--info-student .btn.btn-prev {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.answer--info .answer--info-inner .answer--info-student .btn.btn-next {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.answer--info .answer--info-inner .answer--info-student .form-control {
  height: 40px;
  border-radius: 0px;
  border-right: 0px;
  border-left: 0px;
  text-align: center;
  cursor: default;
  text-overflow: ellipsis;
}

.answer--info .answer--info-inner .answer--info-student .form-control:hover {
  border-color: #d4dde3;
}

.answer--info .answer--info-inner .answer--info-action {
  text-align: right;
}

@media screen and (max-width: 991px) {
  .answer--info .answer--info-inner .answer--info-title .answer--info-text {
    width: 400px;
  }
}

@media screen and (max-width: 800px) {
  .answer--info .answer--info-inner .answer--info-title .answer--info-text {
    width: 300px;
  }
}

@media screen and (max-width: 767px) {
  .answer--info {
    padding: 12px;
  }
  .answer--info .answer--info-inner .answer--info-title {
    display: none;
  }
  .answer--info .answer--info-inner .answer--info-student {
    margin-right: 12px;
  }
}

.fc th {
  background: #ffffff;
  color: #1B2A3D;
}

.fc-unthemed .fc-today {
  background: #F3F5F7;
  color: #1B2A3D;
}

.fc-button-group {
  margin-right: 0px;
}

.fc-state-default {
  background: #ffffff;
  border-color: #d4dde3;
  color: #1B2A3D;
}

.fc-state-default:focus {
  border-color: #0073e0;
}

.fc-event-new {
  padding: 8px 12px !important;
  border-radius: 8px !important;
}

.fc-event-new p {
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  padding: 0;
  font-size: 15px !important;
  font-weight: 500;
  display: block;
}

.fc-day-grid-event:hover {
  color: #ffffff !important;
}

.fc-basic-view td.fc-week-number span, .fc-basic-view td.fc-day-number {
  padding-right: 12px;
}

.pagination {
  margin: 0 !important;
}

.pagination li {
  margin-bottom: 0 !important;
}

.pagination.pagination-sm .page-link {
  font-size: 15px;
  font-weight: 500;
}

.pagination > li > a, .pagination > li > span {
  border-color: #d4dde3;
  color: #1B2A3D;
  padding: 0;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  margin: 0 2px;
  border-radius: 16px !important;
  font-weight: 600;
}

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
  border-color: #d4dde3;
  background-color: #F3F5F7;
  color: #1B2A3D !important;
}

.page-item.active .page-link {
  background-color: #0073e0;
  border-color: #0073e0;
  color: #ffffff;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
  border-color: #0073e0;
  color: #ffffff !important;
  background-color: #0073e0;
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
}

.pagination-block {
  width: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: #0059AD;
  color: #ffffff;
  height: 40px;
  border-radius: 40px;
}

.pagination-block .pagination-block--btn {
  width: 36px;
  background: transparent;
  height: 36px;
  padding-top: 6px;
  text-align: center;
  cursor: pointer;
  border-radius: 18px;
}

.pagination-block .pagination-block--btn .fe {
  font-size: 1.2rem;
}

.pagination-block .pagination-block--btn:hover {
  background: #004688;
}

.pagination-block .pagination-block--btn:first-child {
  -webkit-transform: translateX(1px);
          transform: translateX(1px);
}

.pagination-block .pagination-block--btn:last-child {
  -webkit-transform: translateX(-1px);
          transform: translateX(-1px);
}

.pagination-block .pagination-block--content {
  width: 220px;
  background: transparent;
  height: 40px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 9px 12px 0px 12px;
  text-align: center;
}

.pagination-block.pagination-block-white {
  background-color: #ffffff;
  color: #1B2A3D;
  border: 1px solid #d4dde3;
}

.pagination-block.pagination-block-white .pagination-block--btn {
  border: 1px solid transparent;
}

.pagination-block.pagination-block-white .pagination-block--btn:hover {
  background: #E5F0FF;
  border: 1px solid #d4dde3;
}

@media screen and (max-width: 767px) {
  .pagination-block {
    width: 260px;
  }
  .pagination-block .pagination-block--content {
    width: 180px;
  }
}

.select2-container .select2-selection--single {
  height: 34px;
  -webkit-box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
          box-shadow: rgba(18, 38, 63, 0.05) 0px 1px 2px 0px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
}

.select2-dropdown {
  top: -1px;
  border-color: #0073e0;
  border-radius: 6px;
}

.select2-dropdown.select2-dropdown--above {
  top: 1px;
}

.select2-results__option {
  font-size: 15px;
  font-weight: 500;
  padding: .2rem .75rem;
}

.select2-search--dropdown {
  padding: .2rem .75rem;
}

.select2-dropdown--above .select2-search--dropdown {
  padding-top: .75rem;
}

.select2-container--default .select2-selection--single {
  background-color: transparent;
  border-radius: 6px;
  border: none;
  color: #1B2A3D;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1B2A3D;
  line-height: 1.25;
  font-size: 15px;
  font-weight: 500;
  padding: .5rem 1.25rem .5rem .75rem;
  border: 1px solid #d4dde3;
  border-radius: 6px;
  height: 100%;
  background-color: #ffffff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered:hover {
  border-color: #0073e0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  bottom: 0;
  right: .75rem;
  width: 11px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #1B2A3D transparent transparent transparent;
  border-width: 5px 5px 0 5px;
  margin-top: -3px;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #d4dde3;
  border-radius: 6px;
  background: #F3F5F7;
  font-size: 15px;
  padding: 4px 6px;
}

.select2-container--default .select2-results__option:first-child {
  margin-top: 8px;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #1B2A3D;
  color: #ffffff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #0073e0;
}

.select2-container--default .select2-selection--multiple {
  border-color: #d4dde3;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #0073e0;
  border: 0;
  font-size: 13px;
  line-height: 1.8;
}

.select2-container--default .select2-selection--multiple:hover, .select2-container--default .select2-selection--multiple:focus {
  border-color: #0073e0;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #0073e0;
}

.select2-text-center .select2-selection__rendered {
  text-align: center;
}

.select2-container--open {
  z-index: 10000 !important;
}

.select2-container--open.select2-container--default .select2-selection--single .select2-selection__rendered {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-color: #0073e0;
  border-bottom-color: #ffffff;
}

.select2-container--open.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-width: 0 5px 5px 5px;
  margin-top: -3px;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.select2-container--open.select2-container--above .select2-selection--single .select2-selection__rendered {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-color: #0073e0;
  border-bottom-color: #0073e0;
  border-top-color: #ffffff;
}

.select2-search__field {
  width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #1B2A3D;
}

.icon-circle,
.number-circle,
.icon-img {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 19px;
  background-color: #F3F5F7;
  color: #859BA6;
}

.icon-circle img,
.number-circle img,
.icon-img img {
  width: 24px;
}

.icon-circle.icon-circle-xs,
.number-circle.icon-circle-xs,
.icon-img.icon-circle-xs {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.icon-circle.icon-circle-xs img,
.number-circle.icon-circle-xs img,
.icon-img.icon-circle-xs img {
  width: 12px;
}

.icon-circle.icon-circle-xs .fa-solid,
.number-circle.icon-circle-xs .fa-solid,
.icon-img.icon-circle-xs .fa-solid {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.icon-circle.icon-circle-sm,
.number-circle.icon-circle-sm,
.icon-img.icon-circle-sm {
  width: 28px;
  height: 28px;
  border-radius: 28px;
}

.icon-circle.icon-circle-sm img,
.number-circle.icon-circle-sm img,
.icon-img.icon-circle-sm img {
  width: 18px;
}

.icon-circle.icon-circle-sm .fa-solid,
.number-circle.icon-circle-sm .fa-solid,
.icon-img.icon-circle-sm .fa-solid {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.icon-circle.icon-circle-lg,
.number-circle.icon-circle-lg,
.icon-img.icon-circle-lg {
  width: 42px;
  height: 42px;
  border-radius: 42px;
}

.icon-circle.icon-circle-lg img,
.number-circle.icon-circle-lg img,
.icon-img.icon-circle-lg img {
  width: 24px;
}

.icon-circle.icon-circle-xlg,
.number-circle.icon-circle-xlg,
.icon-img.icon-circle-xlg {
  width: 64px;
  height: 64px;
  border-radius: 64px;
}

.icon-circle.icon-circle-xlg img,
.number-circle.icon-circle-xlg img,
.icon-img.icon-circle-xlg img {
  width: 34px;
}

.icon-circle.icon-circle-xxlg,
.number-circle.icon-circle-xxlg,
.icon-img.icon-circle-xxlg {
  width: 80px;
  height: 80px;
  border-radius: 80px;
}

.icon-circle.icon-circle-xxlg img,
.number-circle.icon-circle-xxlg img,
.icon-img.icon-circle-xxlg img {
  width: 44px;
}

.icon-circle.icon-circle-primary-light,
.number-circle.icon-circle-primary-light,
.icon-img.icon-circle-primary-light {
  background-color: #E5F0FF;
  color: #0073e0;
}

.icon-circle.icon-circle-primary,
.number-circle.icon-circle-primary,
.icon-img.icon-circle-primary {
  background-color: #0073e0;
  color: #ffffff;
}

.icon-circle.icon-circle-success, .icon-circle.number-circle--success,
.number-circle.icon-circle-success,
.number-circle.number-circle--success,
.icon-img.icon-circle-success,
.icon-img.number-circle--success {
  background-color: #37C75E;
  color: #ffffff;
}

.icon-circle.icon-circle-warning,
.number-circle.icon-circle-warning,
.icon-img.icon-circle-warning {
  background-color: #FFF3E1;
  color: #FF9A07 !important;
}

.icon-circle.icon-circle-danger, .icon-circle.number-circle--danger,
.number-circle.icon-circle-danger,
.number-circle.number-circle--danger,
.icon-img.icon-circle-danger,
.icon-img.number-circle--danger {
  background-color: #D5305D;
  color: #ffffff !important;
}

.icon-circle .icon-btn-float,
.number-circle .icon-btn-float,
.icon-img .icon-btn-float {
  position: absolute;
  top: 0;
  right: 0;
}

.icon-img {
  background: #ffffff;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(1n+1) .icon-circle {
  background-color: #FFBF00;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(2n+1) .icon-circle {
  background-color: #FF7F50;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(3n+1) .icon-circle {
  background-color: #7B68EE;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(4n+1) .icon-circle {
  background-color: #9FE2BF;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(5n+1) .icon-circle {
  background-color: #40E0D0;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(6n+1) .icon-circle {
  background-color: #6495ED;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(7n+1) .icon-circle {
  background-color: #CCCCFF;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(8n+1) .icon-circle {
  background-color: #F4A460;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(9n+1) .icon-circle {
  background-color: #00BFFF;
}

.icon-circle-coloring .icon-circle-coloring-item:nth-child(10n+1) .icon-circle {
  background-color: #9ACD32;
}

.icon-circle-coloring .icon-circle-coloring-item .icon-circle {
  color: #ffffff;
}

.menu-lists {
  margin: 0;
  background: #ffffff;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 100%;
}

.menu-lists .menu-lists--item,
.menu-lists .menu-lists--col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.menu-lists.menu-lists--static {
  pointer-events: none;
}

.menu-lists.menu-lists--static .menu-lists--item,
.menu-lists.menu-lists--static .menu-lists--col {
  pointer-events: none;
}

.menu-lists .menu-lists--item {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  padding: 10px 0px;
}

.menu-lists .menu-lists--item .menu-lists--icon {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #F3F5F7;
  position: relative;
  margin-right: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.menu-lists .menu-lists--item .menu-lists--icon .fe, .menu-lists .menu-lists--item .menu-lists--icon img, .menu-lists .menu-lists--item .menu-lists--icon .fa-solid {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}

.menu-lists .menu-lists--item .menu-lists--img {
  margin-right: 10px;
}

.menu-lists .menu-lists--item .menu-lists--content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
}

.menu-lists .menu-lists--item .fe {
  font-size: 1.2rem;
  line-height: 1.2;
}

.menu-lists .menu-lists--item:before {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  left: 44px;
  right: -18px;
  height: 1px;
  background: #d4dde3;
}

.menu-lists .menu-lists--item:first-child {
  padding-top: 0 !important;
}

.menu-lists .menu-lists--item:last-child {
  padding-bottom: 0 !important;
}

.menu-lists .menu-lists--item:last-child:before {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .menu-lists .menu-lists--item:before {
    right: -12px;
  }
}

@media screen and (max-width: 767px) {
  .menu-lists.menu-lists-normal-end .menu-lists--item:last-child {
    padding-bottom: 10px !important;
  }
  .menu-lists.menu-lists-normal-end .menu-lists--item:last-child:before {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  .menu-lists.menu-lists-normal-top .menu-lists--item:first-child {
    padding-top: 10px !important;
  }
}

.menu-lists.menu-lists-not-link .menu-lists--item,
.menu-lists.menu-lists-not-link .menu-lists--col {
  cursor: auto;
}

a.menu-lists--col {
  color: #1B2A3D !important;
}

a.menu-lists--col:hover {
  color: #0073e0 !important;
}

.card-menu-lists-color .card .menu-lists--item .menu-lists--icon {
  color: #ffffff;
}

.card-menu-lists-color .card:nth-child(1n+1) .menu-lists--item .menu-lists--icon {
  background-color: #FFBF00;
}

.card-menu-lists-color .card:nth-child(2n+1) .menu-lists--item .menu-lists--icon {
  background-color: #FF7F50;
}

.card-menu-lists-color .card:nth-child(3n+1) .menu-lists--item .menu-lists--icon {
  background-color: #7B68EE;
}

.card-menu-lists-color .card:nth-child(4n+1) .menu-lists--item .menu-lists--icon {
  background-color: #9FE2BF;
}

.card-menu-lists-color .card:nth-child(5n+1) .menu-lists--item .menu-lists--icon {
  background-color: #40E0D0;
}

.card-menu-lists-color .card:nth-child(6n+1) .menu-lists--item .menu-lists--icon {
  background-color: #6495ED;
}

.card-menu-lists-color .card:nth-child(7n+1) .menu-lists--item .menu-lists--icon {
  background-color: #CCCCFF;
}

.card-menu-lists-color .card:nth-child(8n+1) .menu-lists--item .menu-lists--icon {
  background-color: #F4A460;
}

.card-menu-lists-color .card:nth-child(9n+1) .menu-lists--item .menu-lists--icon {
  background-color: #00BFFF;
}

.card-menu-lists-color .card:nth-child(10n+1) .menu-lists--item .menu-lists--icon {
  background-color: #9ACD32;
}

.flat-end:before {
  right: 0px !important;
}

.menu-lists-primary {
  background: #0073e0;
}

.menu-lists-primary .menu-lists--item .menu-lists--icon {
  background: #0059AD;
}

.menu-lists-primary .menu-lists--item .menu-lists--icon .text-muted {
  color: #E3F1FF !important;
}

.menu-lists-primary .menu-lists--item:before {
  background: #0059AD;
}

.menu-lists-primary .menu-lists--col .btn-link {
  color: #ffffff !important;
}

.menu-lists-primary .menu-lists--col .btn-link:hover {
  opacity: 0.8 !important;
}

.calendar-wrapper {
  display: block;
  margin-left: -18px;
  margin-right: -18px;
  margin-top: -18px;
  margin-bottom: -18px;
  position: relative;
}

@media screen and (max-width: 991px) {
  .calendar-wrapper {
    margin-left: -6px;
    margin-right: -6px;
    margin-top: 0;
    margin-bottom: -6px;
  }
}

.calendar-header,
.calendar-footer {
  display: block;
  padding: 1rem;
}

.calendar-main {
  display: block;
  position: relative;
  width: calc(100% - 340px);
  background: #ffffff;
  height: 100vh;
  overflow-y: scroll;
}

.calendar-main.calendar-main--lg {
  width: calc(100% - 480px);
}

.calendar-main:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  bottom: 0;
  background-color: #d4dde3;
  z-index: 999;
  display: none;
}

@media screen and (max-width: 991px) {
  .calendar-main {
    width: 100%;
    height: auto;
    overflow: auto;
  }
  .calendar-main.calendar-main--lg {
    width: 100%;
  }
}

.calendar-day-wrap:last-child .calendar-day-title:before,
.calendar-day-wrap:last-child .calendar-day-dates:before {
  display: none;
}

.calendar-day {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 1px solid #d4dde3;
}

.calendar-day .calendar-day-wrap {
  width: 16.6666666667%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.calendar-day .calendar-day-title {
  width: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 42px;
  text-transform: uppercase;
  text-align: center;
  font-size: 12px;
  position: relative;
  border-bottom: 1px solid #d4dde3;
}

.calendar-day .calendar-day-title:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  bottom: 0;
  background-color: #d4dde3;
}

.calendar-day .calendar-day-title:last-child:before {
  display: none;
}

@media screen and (max-width: 991px) {
  .calendar-day .calendar-day-title {
    font-size: 11px;
  }
  .calendar-day .calendar-day-title:before {
    display: none;
  }
}

.cdt-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 600;
}

.calendar-week {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-top: 1px solid #d4dde3;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.calendar-day-dates {
  width: 100%;
  height: 116px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px;
  position: relative;
  border-bottom: 1px solid #d4dde3;
}

.calendar-day-dates:hover {
  background-color: #F3F5F7;
  cursor: pointer;
}

.calendar-day-dates:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  bottom: 0;
  background-color: #d4dde3;
}

.calendar-day-dates .dates-number {
  display: block;
  text-align: right;
  font-weight: 600;
  font-size: 18px;
}

.calendar-day-dates.empty-dates, .calendar-day-dates.empty-flag {
  pointer-events: none;
}

.calendar-day-dates.empty-dates:hover, .calendar-day-dates.empty-flag:hover {
  background-color: transparent;
}

.calendar-day-dates.calendar-today {
  background: #E3F1FF;
}

.calendar-day-dates.calendar-today:hover {
  background: #D0E7FF;
}

.calendar-day-dates.calendar-selected {
  background: #0059AD;
  color: #ffffff;
}

.calendar-day-dates.calendar-selected:hover {
  background: #00509B;
}

@media screen and (max-width: 991px) {
  .calendar-day-dates {
    height: 60px;
    padding: 8px 4px 4px 4px;
  }
  .calendar-day-dates:before {
    display: none;
  }
  .calendar-day-dates .dates-number {
    text-align: center;
    font-weight: 400;
    font-size: 15px;
  }
}

.calendar-flag-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media screen and (max-width: 991px) {
  .calendar-flag-wrapper {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-bottom: 8px;
  }
}

.calendar-flag {
  width: 24px;
  height: 24px;
  margin-right: 6px;
  margin-top: 6px;
  font-size: 13px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #F3F5F7;
  border-radius: 6px;
  color: #ffffff;
}

.calendar-flag.flag-1 {
  background: #7BC825;
}

.calendar-flag.flag-2 {
  background: #1273DF;
}

.calendar-flag.flag-3 {
  background: #FFB000;
}

.calendar-flag.flag-4 {
  background: #F800A2;
}

.calendar-flag.flag-5 {
  background: #A3B5C4;
}

.calendar-flag.flag-kepala-sekolah {
  background: #5CA71A;
}

.calendar-flag.flag-admin {
  background: #5F00FA;
}

.calendar-flag.flag-koordinator {
  background: #FB5779;
}

.calendar-flag.flag-guru {
  background: #0073e0;
}

.calendar-flag.flag-siswa {
  background: #009E61;
}

@media screen and (max-width: 991px) {
  .calendar-flag {
    width: 16px;
    height: 16px;
    margin-right: 2px;
    margin-top: 2px;
    font-size: 10px;
  }
}

.calendar-flag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: #0073e0;
  border: 1px solid transparent;
}

.calendar-selected .calendar-flag-dot {
  border-color: #ffffff;
}

.calendar-flag-history {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin: 0;
}

.calendar-sidebar {
  position: fixed;
  width: 340px;
  right: 0;
  top: 0;
  bottom: 0;
  background: #ffffff;
  overflow-y: auto;
  border-left: 1px solid #d4dde3;
}

.calendar-sidebar.calendar-sidebar--lg {
  width: 480px;
}

@media screen and (max-width: 991px) {
  .calendar-sidebar {
    position: relative;
    width: 100%;
    bottom: inherit;
  }
  .calendar-sidebar.calendar-sidebar--lg {
    width: 100%;
  }
}

.calendar-sidebar-inner {
  display: block;
}

.cal-main-header,
.cal-sidebar-header {
  padding: 0px 1rem;
  height: 54px;
  line-height: 54px;
}

.calendar-content {
  position: relative;
}

@media screen and (max-width: 991px) {
  .calendar-content.border-bottom {
    border: none !important;
  }
}

.cal-group {
  position: relative;
  padding: 1rem;
  border-bottom: 1px solid #d4dde3;
}

.cal-group:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
}

.cal-group-kuis:before {
  background-color: #7BC825;
}

.cal-group-tugas:before {
  background-color: #1273DF;
}

.cal-group-ulangan:before {
  background-color: #FFB000;
}

.cal-group-ujian:before {
  background-color: #F800A2;
}

.cal-group-kepala-sekolah:before {
  background-color: #5CA71A;
}

.cal-group-admin:before {
  background-color: #5F00FA;
}

.cal-group-koordinator:before {
  background-color: #FB5779;
}

.cal-group-guru:before {
  background-color: #0073e0;
}

.cal-group-siswa:before {
  background-color: #009E61;
}

.holiday-dates {
  background: #FFF4F5;
}

.holiday-dates:hover {
  background: #FFE7E9 !important;
}

.doni-tooltip {
  position: relative;
}

.doni-tooltip:before, .doni-tooltip:after {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.doni-tooltip:before {
  content: attr(data-doni-tooltip);
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 0px 8px;
  border-radius: 6px;
  background-color: #e1e6eb;
  color: #1B2A3D;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
  z-index: 98;
  height: 27px;
  line-height: 25px;
  font-weight: 600;
}

.doni-tooltip:after {
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top: 0;
  z-index: 98;
}

.doni-tooltip:hover:before, .doni-tooltip:hover:after {
  visibility: visible;
  pointer-events: all;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .doni-tooltip:before, .doni-tooltip:after {
    display: none;
  }
}

.doni-tooltip-left:before {
  left: -64%;
}

.doni-tooltip-left:after {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-right: 6px solid transparent;
  border-top: 6px solid transparent;
  border-left: 6px solid #e1e6eb;
  border-bottom: 6px solid transparent;
  left: 0;
}

.doni-tooltip-right:before {
  left: inherit;
  right: -64%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}

.doni-tooltip-right:after {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-top: 6px solid transparent;
  border-right: 6px solid #e1e6eb;
  border-bottom: 6px solid transparent;
  left: inherit;
  right: 0;
}

.doni-tooltip-top:before {
  top: -36px;
}

.doni-tooltip-top:after {
  top: -10px;
  border-top: 6px solid #e1e6eb;
}

.doni-tooltip-bottom:before {
  bottom: -36px;
}

.doni-tooltip-bottom:after {
  bottom: -10px;
  border-bottom: 6px solid #e1e6eb;
}

.card-journal {
  position: relative;
  overflow: hidden;
}

.card-journal:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  bottom: 0;
  background-color: #FFECF0;
}

@media screen and (max-width: 767px) {
  .card-journal:before {
    width: 22px;
  }
}

.card-journal-group .card-journal-col:nth-child(1n+1) .card-journal:before {
  background-color: #FFBF00;
}

.card-journal-group .card-journal-col:nth-child(2n+1) .card-journal:before {
  background-color: #FF7F50;
}

.card-journal-group .card-journal-col:nth-child(3n+1) .card-journal:before {
  background-color: #7B68EE;
}

.card-journal-group .card-journal-col:nth-child(4n+1) .card-journal:before {
  background-color: #9FE2BF;
}

.card-journal-group .card-journal-col:nth-child(5n+1) .card-journal:before {
  background-color: #40E0D0;
}

.card-journal-group .card-journal-col:nth-child(6n+1) .card-journal:before {
  background-color: #6495ED;
}

.card-journal-group .card-journal-col:nth-child(7n+1) .card-journal:before {
  background-color: #CCCCFF;
}

.card-journal-group .card-journal-col:nth-child(8n+1) .card-journal:before {
  background-color: #F4A460;
}

.card-journal-group .card-journal-col:nth-child(9n+1) .card-journal:before {
  background-color: #00BFFF;
}

.card-journal-group .card-journal-col:nth-child(10n+1) .card-journal:before {
  background-color: #9ACD32;
}

.jurnal-student-scroll--header {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #ffffff;
  z-index: 10;
}

.jurnal-student-scroll {
  position: absolute;
  top: 59px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #e1e6eb;
  overflow-y: auto;
}

.jurnal-student-scroll.jurnal-student-scroll-modal {
  top: 55px;
}

@media screen and (max-width: 767px) {
  .jurnal-student-scroll {
    top: 163px;
  }
  .jurnal-student-scroll.jurnal-student-scroll-modal {
    top: 163px;
  }
  .jurnal-student-scroll.jurnal-student-scroll--teacher {
    top: 55px;
  }
}

.block-victim-style {
  margin-left: -18px;
  height: 100%;
  position: relative;
  display: block;
}

@media screen and (max-width: 767px) {
  .block-victim-style {
    margin-left: 0;
  }
  .block-victim-style .block-victim--inner {
    position: fixed;
    top: 32px;
    left: 12px;
    right: 12px;
    bottom: 16px;
    background-color: #ffffff;
    border-radius: 10px;
    z-index: 2005;
    height: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .block-victim-style .block-victim--inner .jurnal-student-scroll--header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #ffffff;
  }
  .block-victim-style .block-victim--inner .jurnal-student-scroll {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .block-victim-style .block-victim--inner .btn {
    position: absolute;
    top: -20px;
    right: 12px;
  }
  .block-victim-style:before {
    content: '';
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0, 4, 14, 0.6) !important;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .block-victim-style.block-victim--modal .block-victim--inner {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
  .block-victim-style.block-victim--modal:before {
    display: none;
  }
  .block-victim-style.active .block-victim--inner {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .block-victim-style.active:before {
    opacity: 1;
    visibility: visible;
  }
}

.statistic-view .table-data {
  display: inline-block;
  float: left;
}

.statistic-view .table-response {
  display: inline-block;
  float: left;
  width: calc(100% - 300px);
  overflow-y: hidden;
  overflow-x: auto;
}

.statistic-view .table-header {
  height: 80px;
  overflow: hidden;
}

.statistic-view .table-header .empty-header {
  display: inline-block;
  width: 160px;
  height: 80px;
  background-color: #ffffff;
  border-right: 1px solid #d4dde3;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  float: left;
  line-height: 80px;
  padding: 0 19px;
  color: #1B2A3D;
}

.statistic-view .table-header .empty-header:first-of-type {
  width: 220px;
}

.statistic-view .table-header .empty-header:nth-of-type(2) {
  width: 80px;
  padding: 0px;
}

@media screen and (max-width: 767px) {
  .statistic-view .table-response {
    width: calc(100% - 200px);
  }
  .statistic-view .table-header .empty-header:first-of-type {
    width: 140px;
  }
  .statistic-view .table-header .empty-header:nth-of-type(2) {
    width: 60px;
  }
}

.statistic-view .header-row {
  height: 80px;
  z-index: 1;
  white-space: nowrap;
  font-size: 0;
}

.statistic-view .header-row .cell {
  background-color: #ffffff;
  display: inline-block;
  color: #1B2A3D;
  text-align: center;
  height: 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-right: 1px solid #d4dde3;
  border-bottom: 1px solid #d4dde3;
  width: 80px;
  padding: 0px 8px;
  padding-top: 11px;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
}

.statistic-view .header-row .cell:hover {
  background-color: #F3F5F7;
}

.statistic-view .header-row .cell .percent {
  display: block;
  max-width: 54px;
  margin: 2px auto;
  padding: 0 4px;
  text-align: center;
  color: #ffffff;
  border-radius: 12px;
  font-size: 12px;
}

.statistic-view .header-row .cell .percent.danger {
  background-color: #D5305D;
}

.statistic-view .header-row .cell .percent.warning {
  background-color: #FF9A07;
}

.statistic-view .header-row .cell .percent.success {
  background-color: #00C177;
}

.statistic-view .header-column {
  display: inline-block;
  z-index: 1;
  float: left;
}

.statistic-view .header-column .cell {
  height: 60px;
  background-color: #ffffff;
  color: #1B2A3D;
  padding-left: 19px;
  padding-right: 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 1px solid #d4dde3;
}

.statistic-view .header-column .cell .cell-name {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.statistic-view .header-column .cell .cell-nis {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.statistic-view .header-column .cell:last-child {
  border-bottom: 0px;
}

.statistic-view .header-column.name-column {
  width: 220px;
  border-right: 1px solid #d4dde3;
}

.statistic-view .header-column.name-column .cell {
  padding-top: 12px;
}

.statistic-view .header-column.score-column {
  font-weight: 600;
  width: 80px;
  border-right: 1px solid #d4dde3;
  line-height: 60px;
}

.statistic-view .header-column.score-column .cell {
  padding-left: 0px;
  text-align: center;
  padding-right: 0px;
}

@media screen and (max-width: 767px) {
  .statistic-view .header-column.name-column {
    width: 140px;
  }
  .statistic-view .header-column.score-column {
    width: 60px;
  }
}

.statistic-view .responses {
  border-collapse: collapse;
  z-index: 0;
}

.statistic-view .responses .cell-row {
  height: 60;
  white-space: nowrap;
  font-size: 0;
}

.statistic-view .responses .cell-row:last-child {
  border-bottom: 0px;
}

.statistic-view .responses .cell-row .cell {
  display: inline-block;
  height: 60px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 80px;
  border-bottom: 1px solid #d4dde3;
  border-right: 1px solid #d4dde3;
  position: relative;
}

.statistic-view .responses .cell-row .cell i, .statistic-view .responses .cell-row .cell .cell-essay {
  font-size: 18px;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  margin: auto;
  color: rgba(0, 0, 0, 0.3);
  text-align: center;
}

.statistic-view .responses .cell-row .cell .cell-essay {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  width: 54px;
  height: 32px;
  line-height: 32px;
  border-radius: 6px;
  font-size: 15px;
  color: #ffffff;
  background-color: #566B76;
}

.statistic-view .responses .cell-row .cell i, .statistic-view .responses .cell-row .cell .cell-wait {
  width: 42px;
  height: 42px;
  border-radius: 24px;
  line-height: 42px;
  color: #ffffff;
}

.statistic-view .responses .cell-row .cell .cell-empty {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bfc6ce;
  overflow: hidden;
}

.statistic-view .responses .cell-row .cell .cell-empty:before {
  content: '';
  position: absolute;
  width: 150%;
  height: 2px;
  background-color: #a7b2b8;
  top: 24px;
  left: -13px;
  -webkit-transform: rotate(-37deg);
          transform: rotate(-37deg);
}

.statistic-view .responses .cell-row .cell.correct i, .statistic-view .responses .cell-row .cell.correct .cell-essay {
  background-color: #00C177;
  -webkit-box-shadow: 0px 4px 8px 2px rgba(0, 193, 119, 0.3);
          box-shadow: 0px 4px 8px 2px rgba(0, 193, 119, 0.3);
}

.statistic-view .responses .cell-row .cell.incorrect i, .statistic-view .responses .cell-row .cell.incorrect .cell-essay {
  background-color: #D5305D;
  -webkit-box-shadow: 0px 4px 8px 2px rgba(213, 48, 93, 0.3);
          box-shadow: 0px 4px 8px 2px rgba(213, 48, 93, 0.3);
}

.statistic-view .responses .cell-row .cell.unattempted i, .statistic-view .responses .cell-row .cell.unattempted .cell-essay {
  background-color: #e1e6eb;
  color: rgba(0, 0, 0, 0.5);
}

.statistic-view .responses .cell-row .cell.warning i, .statistic-view .responses .cell-row .cell.warning .cell-essay, .statistic-view .responses .cell-row .cell.warning .cell-wait {
  background-color: #FF9A07;
  -webkit-box-shadow: 0px 4px 8px 2px rgba(255, 154, 7, 0.3);
          box-shadow: 0px 4px 8px 2px rgba(255, 154, 7, 0.3);
  color: #ffffff;
}

.response-history {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
}

.response-history.response-history-correct {
  background-color: #00C177;
  -webkit-box-shadow: 0px 2px 3px 2px rgba(0, 193, 119, 0.3);
          box-shadow: 0px 2px 3px 2px rgba(0, 193, 119, 0.3);
  color: #ffffff;
}

.response-history.response-history-incorrect {
  background-color: #D5305D;
  -webkit-box-shadow: 0px 2px 3px 2px rgba(213, 48, 93, 0.3);
          box-shadow: 0px 2px 3px 2px rgba(213, 48, 93, 0.3);
  color: #ffffff;
}

.response-history.response-history-wait {
  background-color: #FF9A07;
  -webkit-box-shadow: 0px 2px 3px 2px rgba(255, 154, 7, 0.3);
          box-shadow: 0px 2px 3px 2px rgba(255, 154, 7, 0.3);
  color: #ffffff;
}

.response-history.response-history-empty {
  background-color: #bfc6ce;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.response-history.response-history-empty:before {
  content: '';
  position: absolute;
  width: 150%;
  height: 2px;
  background-color: #a7b2b8;
  top: 10px;
  left: -5px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.smartvideo-full {
  width: 100% !important;
  height: 100% !important;
  background-color: black !important;
}

.smartvideo-popup {
  width: 100% !important;
  height: 500px !important;
  background-color: black !important;
}

.audioview {
  margin: 1rem !important;
  position: relative !important;
  width: calc(100% - 2rem) !important;
}

.audioview-one-file-nav {
  border: 1px solid #d4dde3;
  border-top: 0px !important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.video-js {
  border-radius: 6px;
  overflow: hidden;
}

.panel-block-progress,
.panel-block-progress-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.panel-block-progress .panel-block-progress-item,
.panel-block-progress-2 .panel-block-progress-item {
  width: 25%;
  height: 92px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #F3F5F7;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}

.panel-block-progress .panel-block-progress-item.panel-block-transparent,
.panel-block-progress-2 .panel-block-progress-item.panel-block-transparent {
  background: rgba(255, 255, 255, 0.7);
}

.panel-block-progress .panel-block-progress-item:hover, .panel-block-progress .panel-block-progress-item.active,
.panel-block-progress-2 .panel-block-progress-item:hover,
.panel-block-progress-2 .panel-block-progress-item.active {
  background: #0073e0;
  color: #ffffff;
}

.panel-block-progress .panel-block-progress-item:hover .slice, .panel-block-progress .panel-block-progress-item.active .slice,
.panel-block-progress-2 .panel-block-progress-item:hover .slice,
.panel-block-progress-2 .panel-block-progress-item.active .slice {
  background: #ffffff;
}

.panel-block-progress .panel-block-progress-item:hover .text-muted, .panel-block-progress .panel-block-progress-item.active .text-muted,
.panel-block-progress-2 .panel-block-progress-item:hover .text-muted,
.panel-block-progress-2 .panel-block-progress-item.active .text-muted {
  color: #ffffff !important;
}

.panel-block-progress.panel-block-no-hover .panel-block-progress-item,
.panel-block-progress-2.panel-block-no-hover .panel-block-progress-item {
  cursor: default;
}

.panel-block-progress.panel-block-no-hover .panel-block-progress-item:hover,
.panel-block-progress-2.panel-block-no-hover .panel-block-progress-item:hover {
  background: #F3F5F7;
  color: #1B2A3D;
}

.panel-block-progress.panel-block-no-hover .panel-block-progress-item.active:hover,
.panel-block-progress-2.panel-block-no-hover .panel-block-progress-item.active:hover {
  background: #0073e0;
  color: #ffffff;
}

.panel-block-progress-black .panel-block-progress-item:hover, .panel-block-progress-black .panel-block-progress-item.active {
  background: #1B2A3D !important;
  color: #ffffff !important;
}

@media screen and (max-width: 991px) {
  .panel-block-progress-black .panel-block-progress-item:hover {
    background: #ffffff;
    color: #1B2A3D;
  }
}

.panel-block-progress-2 {
  margin-left: -6px;
  margin-right: -6px;
}

.panel-block-progress-2 .panel-block-progress-item {
  width: 25%;
  margin-left: 6px;
  margin-right: 6px;
  height: 76px;
}

@media screen and (max-width: 991px) {
  .panel-block-progress-2 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .panel-block-progress-2 .panel-block-progress-item {
    margin-left: 0px;
    margin-right: 0px;
    background: #ffffff;
    border-radius: 0px !important;
    border-right: 1px solid #d4dde3;
  }
  .panel-block-progress-2 .panel-block-progress-item:last-child {
    border-right: 0px;
  }
}

.marquee-block {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 901;
  background-color: #0073e0;
  color: #ffffff;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.marquee {
  --gap: 38px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--gap);
}

.marquee__content {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  -webkit-animation: scroll 60s linear infinite;
          animation: scroll 60s linear infinite;
  margin: 0;
  padding: 0;
}

.marquee__content li {
  list-style: none;
}

.marquee__content li img {
  margin-top: 16px;
  width: 100%;
}

.marquee__content.slow {
  -webkit-animation-duration: 120s;
          animation-duration: 120s;
}

.marquee__content.reverse {
  animation-direction: reverse;
}

@media screen and (max-width: 767px) {
  .marquee__content li img {
    margin-top: 12px;
    width: 32px;
  }
}

@-webkit-keyframes scroll {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(calc(-100% - var(--gap)));
            transform: translateX(calc(-100% - var(--gap)));
  }
}

@keyframes scroll {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(calc(-100% - var(--gap)));
            transform: translateX(calc(-100% - var(--gap)));
  }
}

.pairing-block {
  position: relative;
}

.pairing-block:before {
  content: attr(data-pairing);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 38px;
  height: 38px;
  background-color: #ffffff;
  border-radius: 19px;
  border: 1px solid #d4dde3;
  position: absolute;
  z-index: 99;
  top: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.img-pairing,
.img-pairing-empty {
  display: block;
  width: 100%;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #d4dde3;
  position: relative;
  padding-top: 100%;
}

.img-pairing span.img-pairing-content,
.img-pairing-empty span.img-pairing-content {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.img-pairing span.img-pairing-content .img-thumbnail,
.img-pairing-empty span.img-pairing-content .img-thumbnail {
  max-height: 100%;
}

.img-pairing .dropdown,
.img-pairing-empty .dropdown {
  position: absolute;
  z-index: 99;
  top: 8px;
  right: 8px;
}

.img-pairing .btn-add-img,
.img-pairing-empty .btn-add-img {
  margin: 0;
  background: transparent;
  position: absolute;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 99;
  top: 20px;
  left: 20px;
  bottom: 20px;
  width: calc(100% - 40px);
  color: #A1ACB4 !important;
  font-weight: 400 !important;
}

.img-pairing .btn-add-img .text-sm,
.img-pairing-empty .btn-add-img .text-sm {
  font-size: 13px !important;
}

.img-pairing .btn-add-img .fe,
.img-pairing-empty .btn-add-img .fe {
  font-size: 1.2rem;
}

.img-pairing .btn-add-img input,
.img-pairing-empty .btn-add-img input {
  position: absolute;
  top: 0;
  visibility: hidden;
  opacity: 0;
}

.img-pairing-hover:hover {
  border-color: #0073e0;
}

.img-pairing-empty {
  background-color: #e1e6eb;
}

.img-pairing-empty:before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  border-radius: 6px;
  border: 1px dashed #A1ACB4;
}

.img-pairing-empty.drop-active:before {
  border-color: #0073e0;
  background-color: #ECEFF3;
}

.img-pairing-empty.drop-target:before {
  background-color: #CBE7FF;
}

.img-pairing-empty.dropped {
  border-color: #0073e0;
  background-color: #E6F3FF;
}

.img-pairing-empty.clean:before {
  display: none;
}

.img-pairing-square {
  width: 110px;
  height: 110px;
  padding-top: 0;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  -ms-touch-action: none;
      touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.img-pairing-item {
  position: relative;
  padding: 4px;
}

.img-pairing-item .img-pairing-draggable {
  position: relative;
  z-index: 10;
}

.img-pairing-item .img-pairing-draggable:hover {
  border-color: #0073e0;
}

.img-pairing-item .img-pairing-draggable.shadow-lg {
  z-index: 99;
}

.img-pairing-item .img-pairing-shadow {
  position: absolute;
  top: 4px;
  left: 4px;
  opacity: .4;
}

.btn-add-new-pairing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  background-color: rgba(243, 245, 247, 0.5);
  color: #A1ACB4 !important;
  font-weight: 400 !important;
}

.btn-add-new-pairing .text-sm {
  font-size: 13px !important;
}

.btn-add-new-pairing .fe {
  font-size: 1.2rem;
}

.img-pairing-text,
.img-pairing-text-input {
  padding: 0;
  height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
}

.img-pairing-text .img-pairing-text-content,
.img-pairing-text-input .img-pairing-text-content {
  text-align: center;
  font-size: 15px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.img-pairing-text-input {
  height: 120px;
  overflow: hidden;
}

.img-pairing-text-input .img-pairing-text-content {
  padding: 0;
}

.img-pairing-text-input .img-pairing-text-content textarea.form-control {
  border: 0;
  border-radius: 0;
  height: 120px;
  padding-right: 4rem;
  resize: none;
}

.img-pairing-item .img-pairing-text {
  width: 240px;
  height: 100px;
}

.loader-image-akm {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100;
  border-radius: 6px;
  pointer-events: none;
  color: #ffffff;
}

.col-50-akm .btn {
  height: 100%;
  white-space: inherit;
}

.img-prev-akm {
  display: block;
  width: 100%;
  padding-top: 80%;
  background-color: #ffffff;
  position: relative;
}

.img-prev-akm .img-prev-akm--inner {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.img-prev-akm .img-prev-akm--inner.img-prev-akm--inner-sm {
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
}

.img-pairing-add {
  cursor: pointer;
  background-color: #E3F1FF;
  border: 1px solid #0073e0;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  position: relative;
  color: #0073e0;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.img-pairing-add:hover {
  background-color: #D3E9FE;
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}

.img-pairing-added {
  position: relative;
}

.img-pairing-added .btn-remove-img-pairing {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 20;
}

.img-pairing-added .btn-remove-img-pairing .fe {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

@media screen and (max-width: 500px) {
  .img-pairing-added .btn-remove-img-pairing {
    top: -8px;
    right: -8px;
  }
}

.pairing-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
}

.pairing-menu:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  z-index: 995;
}

.pairing-menu .card-pairing-menu {
  max-width: 300px;
  height: 100%;
  margin-right: 0;
  margin-left: auto;
  border-left: 1px solid #d4dde3 !important;
  -webkit-transform: translateX(300px);
          transform: translateX(300px);
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: relative;
  z-index: 999;
}

.pairing-menu.active {
  pointer-events: all;
  visibility: visible;
}

.pairing-menu.active:before {
  opacity: 1;
}

.pairing-menu.active .card-pairing-menu {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.img-pairing-selected,
.card-pairing-selected {
  opacity: .3;
}

.img-pairing-select,
.card-pairing-menu-select {
  cursor: pointer;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.img-pairing-select:hover,
.card-pairing-menu-select:hover {
  border-color: #0073e0;
}

.card-pairing-menu-select:hover {
  border-color: #0073e0 !important;
}

.card-pairing {
  max-height: 240px;
  overflow-y: auto;
}

@media screen and (max-width: 480px) {
  .card-pairing {
    padding: 6px !important;
    padding-top: 20px !important;
  }
}

.card-pairing-select {
  cursor: pointer;
  background-color: #E3F1FF !important;
  border: 1px solid #0073e0 !important;
  color: #0073e0 !important;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.card-pairing-select:hover {
  background-color: #D3E9FE !important;
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}

.block-label-akm-text {
  height: 65px;
}

.block-label-akm-text.block-label-akm-text--student {
  height: 47px;
}

@media screen and (max-width: 991px) {
  .block-label-akm-text {
    height: auto;
    margin-bottom: 12px;
  }
  .block-label-akm-text.block-label-akm-text--student {
    height: auto;
  }
}

.post-creating {
  cursor: text;
  outline: none;
  border: 0px;
  -webkit-box-shadow: 0px;
          box-shadow: 0px;
  text-align: left;
}

.post-creating:focus {
  outline: none;
  border: 0px;
  -webkit-box-shadow: 0px;
          box-shadow: 0px;
}

.post-liked {
  color: #0073e0 !important;
}

.post-image-gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-left: -6px;
  margin-right: -6px;
}

.post-image-gallery .post-image--col {
  position: relative;
  padding: 6px;
}

.post-image-gallery .post-image--col .post-image--item {
  width: 100%;
  height: 320px;
  display: block;
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e1e6eb;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.post-image-gallery.post-image-1 .post-image--col {
  width: 100%;
}

.post-image-gallery.post-image-2 .post-image--col, .post-image-gallery.post-image-3 .post-image--col, .post-image-gallery.post-image-X .post-image--col {
  width: 50%;
}

.post-image-gallery.post-image-2 .post-image--col .post-image--item, .post-image-gallery.post-image-3 .post-image--col .post-image--item, .post-image-gallery.post-image-X .post-image--col .post-image--item {
  height: 240px;
}

.post-image-gallery.post-image-3 .post-image--col:nth-child(1) .post-image--item, .post-image-gallery.post-image-X .post-image--col:nth-child(1) .post-image--item {
  height: 276px;
}

.post-image-gallery.post-image-3 .post-image--col:nth-child(2) .post-image--item, .post-image-gallery.post-image-X .post-image--col:nth-child(2) .post-image--item {
  height: 132px;
  margin-bottom: 12px;
}

.post-image-gallery.post-image-3 .post-image--col:nth-child(2) .post-image--item:last-child, .post-image-gallery.post-image-X .post-image--col:nth-child(2) .post-image--item:last-child {
  margin-bottom: 0px;
}

.post-image-gallery.post-image-X .post-image--col:nth-child(2) .post-image--item:last-child {
  position: relative;
}

.post-image-gallery.post-image-X .post-image--col:nth-child(2) .post-image--item:last-child:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(44, 54, 60, 0.4);
}

.post-image-gallery.post-image-X .post-image--col:nth-child(2) .post-image--item:last-child:after {
  content: attr(data-image-number);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  color: #ffffff;
  z-index: 10;
  font-size: 32px;
}

.post-image-gallery.post-image--comments.post-image-1 .post-image--col .post-image--item {
  height: 120px;
  width: 60%;
  margin-bottom: 12px;
}

.post-image-gallery.post-image--comments.post-image-1 .post-image--col .post-image--item:last-child {
  margin-bottom: 0px;
}

.post-comments {
  position: relative;
}

.post-comments .main-post-comments {
  margin-bottom: 1rem;
}

.post-comments:last-child .main-post-comments {
  margin-bottom: 0px;
}

.post-comments .post-comments-reply {
  position: relative;
  padding-left: calc(32px + 0.5rem);
  z-index: 4;
}

.post-comments .post-comments-reply .user-photos-sm {
  width: 28px;
  height: 28px;
}

.post-who-seen {
  display: block;
  border: 1px solid #d4dde3;
  border-radius: 10px;
  overflow: hidden;
}

.post-who-seen .post-who-seen--toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px;
  padding-right: 14px;
  cursor: pointer;
}

.post-who-seen .post-who-seen--toggle .post-who-seen--toggle-icon.active {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

.post-who-seen .post-who-seen--toggle:hover {
  background-color: #F3F5F7;
}

.post-detail-fullscreen {
  display: block;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1028;
}

@media screen and (max-width: 767px) {
  .post-detail-fullscreen {
    overflow-y: auto;
  }
}

.post-detail--image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #000;
  width: calc(100% - 420px);
  z-index: 40;
}

.post-detail--image .post-detail-image--menu-top,
.post-detail--image .post-detail-image--menu-slide {
  position: absolute;
  left: 0px;
  right: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  z-index: 10;
}

.post-detail--image .post-detail-image--menu-top {
  top: 0px;
}

.post-detail--image .post-detail-image--menu-top .pdi-col {
  padding-top: 18px;
  padding-left: 18px;
}

.post-detail--image .post-detail-image--menu-top .pdi-col:nth-child(2) {
  padding-left: 0px;
  padding-right: 18px;
}

.post-detail--image .post-detail-image--menu-slide {
  top: 80px;
  bottom: 0;
}

.post-detail--image .post-detail-image--menu-slide .pdi-col {
  position: absolute;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 60px;
  padding-left: 18px;
  padding-bottom: 80px;
  cursor: pointer;
}

.post-detail--image .post-detail-image--menu-slide .pdi-col .btn-white-glass {
  color: #000;
}

.post-detail--image .post-detail-image--menu-slide .pdi-col:nth-child(2) {
  right: 0;
  padding-left: 0px;
  padding-right: 18px;
}

.post-detail--image .post-detail-image--menu-slide .pdi-col:hover .btn-white-glass {
  background-color: white;
  color: #000;
  -webkit-transform: translateX(-4px);
          transform: translateX(-4px);
}

.post-detail--image .post-detail-image--menu-slide .pdi-col:hover:nth-child(2) .btn-white-glass {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}

.post-detail--image .post-detail-image--list {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.post-detail--image .post-detail-image--list .post-detail-image--item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain;
}

.post-detail--image.fullscreen {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .post-detail--image {
    position: relative;
    width: 100%;
    height: 50%;
  }
  .post-detail--image.post-detail--image-empty {
    height: 28%;
  }
  .post-detail--image.fullscreen {
    width: 100%;
    height: 100%;
  }
}

.post-detail--iframe {
  margin: 0px 78px;
  padding-top: 72px;
  height: 100vh;
  position: relative;
  z-index: 10;
}

.post-detail--iframe iframe {
  border: 0;
}

@media screen and (max-width: 767px) {
  .post-detail--iframe {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100% - 72px);
  }
}

.post-detail--media {
  margin: 0px 90px;
  height: 100vh;
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.post-detail--media .post-detail--media-inner {
  display: block;
  width: 100%;
  padding: 34px;
  background-color: #1B2A3D;
  color: #ffffff;
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  .post-detail--media {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100% - 72px);
    display: block;
  }
  .post-detail--media .post-detail--media-inner {
    padding: 0;
    border-radius: 0px;
    position: relative;
    height: 100%;
    background-color: #000;
  }
  .post-detail--media.post-detail--audio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .post-detail--media.post-detail--audio .post-detail--media-inner {
    height: auto;
  }
  .post-detail--media .smartvideo-popup {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
    bottom: 0;
    right: 0;
  }
}

.post-detail--content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 52px;
  width: 420px;
  overflow-y: auto;
}

.post-detail--content.fullscreen {
  display: none;
}

@media screen and (max-width: 767px) {
  .post-detail--content {
    left: 0;
    top: 50%;
    width: 100%;
  }
  .post-detail--content.file-is-empty {
    top: 28%;
  }
}

.post-detail--addcomment {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 420px;
  z-index: 20;
  -webkit-box-shadow: 0 -1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 -1px 2px rgba(18, 38, 63, 0.1);
}

@media screen and (max-width: 767px) {
  .post-detail--addcomment {
    width: 100%;
  }
}

.post-detail--empty-file {
  display: block;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 767px) {
  .post-detail--empty-file {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.recap-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid #d4dde3;
}

.recap-view .recap-view--name, .recap-view .recap-view--date, .recap-view .recap-view--data {
  display: inline-block;
  float: left;
}

.recap-view .recap-view--name .table-header {
  height: 60px;
  overflow: hidden;
}

.recap-view .recap-view--name .table-header .cell {
  width: 180px;
  height: 60px;
  line-height: 60px;
  border-right: 1px solid #d4dde3;
  border-bottom: 1px solid #d4dde3;
  padding: 0 16px;
  padding-left: 19px;
  background-color: #F0F2F5;
}

.recap-view .recap-view--name .table-header.table-header-2 {
  height: 120px;
}

.recap-view .recap-view--name .table-header.table-header-2 .cell {
  height: 120px;
  line-height: 120px;
}

.recap-view .recap-view--name .name-column {
  width: 180px;
}

.recap-view .recap-view--name .name-column .cell {
  height: 60px;
  border-right: 1px solid #d4dde3;
  border-bottom: 1px solid #d4dde3;
  padding: 0 16px;
  padding-left: 19px;
  padding-top: 10px;
  display: block;
}

.recap-view .recap-view--name .name-column .cell .cell-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 15px;
}

.recap-view .recap-view--name .name-column.name-column2 .cell {
  height: 80px;
}

.recap-view .recap-view--date {
  width: calc(100% - 360px);
  overflow-x: auto;
  overflow-y: hidden;
  border-right: 1px solid #d4dde3;
  background-color: #F3F5F7;
}

.recap-view .recap-view--date .header-row {
  height: 60px;
  white-space: nowrap;
  font-size: 0;
  z-index: 1;
}

.recap-view .recap-view--date .header-row .cell {
  height: 60px;
  font-size: 12px;
  display: inline-block;
  width: 60px;
  padding: 0 8px;
  padding-top: 12px;
  text-align: center;
  white-space: normal;
  border-right: 1px solid #d4dde3;
  border-bottom: 1px solid #d4dde3;
  background-color: #F0F2F5;
  font-weight: 500;
}

.recap-view .recap-view--date .header-row .cell.cell2 {
  width: 120px;
  padding: 0px;
}

.recap-view .recap-view--date .header-row .cell.cell2 .cell2-top {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #d4dde3;
}

.recap-view .recap-view--date .header-row .cell.cell2 .cell2-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.recap-view .recap-view--date .header-row .cell.cell2 .cell2-bottom .cell2-bottom-item {
  width: 60px;
  height: 30px;
  line-height: 30px;
}

.recap-view .recap-view--date .header-row .cell.cell2 .cell2-bottom .cell2-bottom-item:first-child {
  position: relative;
}

.recap-view .recap-view--date .header-row .cell.cell2 .cell2-bottom .cell2-bottom-item:first-child:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: #d4dde3;
}

.recap-view .recap-view--date .responses {
  border-collapse: collapse;
  z-index: 0;
}

.recap-view .recap-view--date .responses .cell-row {
  height: 60px;
  white-space: nowrap;
  font-size: 0;
}

.recap-view .recap-view--date .responses .cell-row.cell-row2 {
  height: 80px;
}

.recap-view .recap-view--date .responses .cell-row .cell {
  display: inline-block;
  height: 60px;
  font-size: 15px;
  width: 60px;
  border-right: 1px solid #d4dde3;
  border-bottom: 1px solid #d4dde3;
  text-align: center;
  background-color: #ffffff;
  font-weight: 500;
  padding-top: 13px;
  padding-left: 13px;
  cursor: pointer;
}

.recap-view .recap-view--date .responses .cell-row .cell .cell-status {
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.recap-view .recap-view--date .responses .cell-row .cell:hover {
  background-color: #F3F5F7;
}

.recap-view .recap-view--date .responses .cell-row .cell:hover .cell-status {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.recap-view .recap-view--date .responses .cell-row .cell.cell2 {
  padding: 0px;
  width: 120px;
  height: 80px;
  cursor: default;
}

.recap-view .recap-view--date .responses .cell-row .cell.cell2:hover {
  background-color: #ffffff;
}

.recap-view .recap-view--date .responses .cell-row .cell.cell2 .cell2-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.recap-view .recap-view--date .responses .cell-row .cell.cell2 .cell2-top .cell2-top-item {
  width: 60px;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
}

.recap-view .recap-view--date .responses .cell-row .cell.cell2 .cell2-top .cell2-top-item:first-child {
  position: relative;
}

.recap-view .recap-view--date .responses .cell-row .cell.cell2 .cell2-top .cell2-top-item:first-child:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: #d4dde3;
}

.recap-view .recap-view--date .responses .cell-row .cell.cell2 .cell2-top .cell2-top-item:hover {
  background-color: #0073e0;
  color: #ffffff;
}

.recap-view .recap-view--date .responses .cell-row .cell.cell2 .cell2-bottom {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-top: 1px solid #d4dde3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 12px;
}

.recap-view .recap-view--data .table-header {
  height: 60px;
}

.recap-view .recap-view--data .table-header .cell, .recap-view .recap-view--data .table-header .cell-row {
  height: 30px;
  width: 180px;
  border-bottom: 1px solid #d4dde3;
  text-align: center;
  line-height: 30px;
  background-color: #F0F2F5;
}

.recap-view .recap-view--data .table-header .cell .cell-text, .recap-view .recap-view--data .table-header .cell-row .cell-text {
  font-size: 12px;
}

.recap-view .recap-view--data .table-header .cell-2 {
  height: 90px;
  line-height: 90px;
}

.recap-view .recap-view--data .table-header .cell-row .cell {
  display: inline-block;
  float: left;
  width: 25%;
  border-right: 1px solid #d4dde3;
}

.recap-view .recap-view--data .table-header .cell-row .cell:last-child {
  border-right: 0px;
}

.recap-view .recap-view--data .table-header.table-header-2 {
  height: 120px;
}

.recap-view .recap-view--data .responses {
  border-collapse: collapse;
  z-index: 0;
}

.recap-view .recap-view--data .responses .cell-row {
  height: 60px;
  white-space: nowrap;
  font-size: 0;
}

.recap-view .recap-view--data .responses .cell-row .cell {
  display: inline-block;
  height: 60px;
  font-size: 15px;
  width: 25%;
  line-height: 60px;
  border-right: 1px solid #d4dde3;
  border-bottom: 1px solid #d4dde3;
  text-align: center;
  font-weight: 500;
}

.recap-view .recap-view--data .responses .cell-row .cell:last-child {
  border-right: 0px;
}

.recap-view .recap-view--data .responses .cell-row.cell-row2 {
  height: 80px;
}

.recap-view .recap-view--data .responses .cell-row.cell-row2 .cell {
  height: 80px;
  line-height: 80px;
}

@media screen and (max-width: 767px) {
  .recap-view {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .recap-view .recap-view--name {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    background-color: #ffffff;
  }
  .recap-view .recap-view--name .table-header .cell {
    width: 160px;
    padding-left: 14px;
  }
  .recap-view .recap-view--name .name-column {
    width: 160px;
  }
  .recap-view .recap-view--name .name-column .cell {
    padding-left: 14px;
  }
  .recap-view .recap-view--date {
    width: auto;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    display: block;
    border-right: 0px;
  }
  .recap-view .recap-view--data {
    display: block;
    background-color: #F3F5F7;
  }
}

.cell-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 32px;
  width: 32px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 16px;
}

.cell-status.cell-h {
  color: #ffffff;
  background-color: #00C177;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 193, 119, 0.3);
          box-shadow: 0px 2px 4px 0px rgba(0, 193, 119, 0.3);
}

.cell-status.cell-a {
  color: #ffffff;
  background-color: #D5305D;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(213, 48, 93, 0.3);
          box-shadow: 0px 2px 4px 0px rgba(213, 48, 93, 0.3);
}

.cell-status.cell-i {
  color: #ffffff;
  background-color: #FF9A07;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(255, 154, 7, 0.3);
          box-shadow: 0px 2px 4px 0px rgba(255, 154, 7, 0.3);
}

.cell-status.cell-s, .cell-status.cell-x, .cell-status.cell-- {
  color: #1B2A3D;
  background-color: #F0F2F5;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
}

.cell-status.cell-status-sm {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  font-size: 13px;
}

.recap-total {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #d4dde3;
}

.recap-total .recap-total-title {
  padding: 0 16px;
  font-weight: 600;
  background-color: #F0F2F5;
  border-left: 1px solid #d4dde3;
  border-right: 1px solid #d4dde3;
  height: 60px;
  line-height: 60px;
}

.recap-total .recap-total-data {
  width: 180px;
  text-align: center;
  background-color: #F0F2F5;
}

.recap-total .recap-total-data .cell-row {
  height: 60px;
  white-space: nowrap;
  font-size: 0;
}

.recap-total .recap-total-data .cell-row .cell {
  display: inline-block;
  height: 60px;
  font-size: 15px;
  width: 25%;
  line-height: 60px;
  border-right: 1px solid #d4dde3;
  text-align: center;
  font-weight: 500;
}

.recap-total .recap-total-data .cell-row .cell:last-child {
  border-right: 0px;
}

.card-page-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 200px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 18px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0073e0;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 230px;
  right: 0;
}

.card-page-banner.card-page-banner-sm {
  height: 88px;
}

@media screen and (max-width: 991px) {
  .card-page-banner {
    position: relative;
    left: 0;
    height: auto;
  }
  .card-page-banner.card-page-banner-sm {
    height: auto;
  }
}

.card-show-scroll {
  position: fixed;
  top: 0;
  left: 230px;
  right: 0;
  height: 52px;
  background-color: #ffffff;
  padding: 0 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 10;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  -webkit-transform: translateY(-52px);
          transform: translateY(-52px);
}

.card-show-scroll.card-show-scrolled {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.card-content-on-page-banner {
  margin-top: 200px;
  background-color: #ffffff;
  z-index: 9;
}

@media screen and (max-width: 991px) {
  .card-content-on-page-banner {
    margin-top: 0px;
    z-index: inherit;
  }
}

.card-sticky {
  opacity: 0;
  position: fixed;
  left: 228px;
  top: 52px;
  right: -2px;
  border-radius: 0px !important;
  z-index: 11;
}

.card-sticked {
  opacity: 1;
}

.card-student-performa {
  position: absolute;
  top: 88px;
  left: 0px;
  right: 0;
  bottom: -2px;
  border-radius: 0px;
}

.card-student-performa .card-block.bg-light {
  border-radius: 0px;
}

.card-student-performa .card-sp-list,
.card-student-performa .card-sp-result {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.card-student-performa .card-sp-list {
  top: 0px;
}

.card-student-performa .card-sp-list {
  width: 50%;
  left: 0;
  border-right: 1px solid #d4dde3;
}

.card-student-performa .card-sp-result {
  width: 50%;
  left: 50%;
}

.card-student-performa.card-student-performa-2 {
  top: 68px;
}

.card-student-performa.card-student-performa-2 .card-sp-list,
.card-student-performa.card-student-performa-2 .card-sp-result {
  top: 0px;
}

.card-student-performa.card-student-performa-40-60 .card-sp-list {
  width: 40%;
}

.card-student-performa.card-student-performa-40-60 .card-sp-result {
  width: 60%;
  left: 40%;
}

@media screen and (max-width: 991px) {
  .card-student-performa {
    position: relative;
    top: 0px;
  }
  .card-student-performa .card-sp-list {
    width: 100%;
    position: relative;
  }
  .card-student-performa .card-sp-list .card-h-72 {
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .card-student-performa .card-sp-result {
    width: 100%;
    left: 0;
    background-color: #ffffff;
    z-index: 1029;
    position: fixed;
  }
  .card-student-performa .card-sp-result.active {
    left: 0;
  }
  .card-student-performa.card-student-performa-2 {
    top: 0;
    padding-top: 68px;
  }
  .card-student-performa.card-student-performa-40-60 .card-sp-list {
    width: 100%;
  }
  .card-student-performa.card-student-performa-40-60 .card-sp-result {
    width: 100%;
    left: 0;
  }
}

.card-content-w-banner {
  position: absolute;
  top: 88px;
  left: 0px;
  right: 0;
  bottom: -2px;
  border-radius: 0px;
}

.card-content-w-banner.card-content-w-banner-scroll {
  bottom: 0;
  overflow-y: auto;
}

@media screen and (max-width: 767px) {
  .card-content-w-banner {
    position: relative;
    top: 0;
    overflow-y: inherit;
  }
}

.card-sp-list-content,
.card-sp-result-content,
.card-sp-list-content-3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F3F5F7;
  top: 126px;
  overflow-y: auto;
  border-top: 1px solid #d4dde3;
}

.card-sp-list-content {
  background-color: #ffffff;
  top: 72px;
}

@media screen and (max-width: 991px) {
  .card-sp-list-content {
    position: relative;
    top: 0;
  }
}

.card-sp-lit-content-top-0 {
  top: 0px;
}

.diagram-performa {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid #d4dde3;
  margin-left: 32px;
  padding-top: 6px;
  margin-bottom: 22px;
  position: relative;
}

.diagram-performa:before, .diagram-performa:after {
  position: absolute;
  left: -28px;
  color: #859BA6;
  font-size: 13px;
  text-align: right;
  width: 22px;
}

.diagram-performa:before {
  content: attr(data-performa-max);
  top: 0;
}

.diagram-performa:after {
  content: attr(data-performa-min);
  bottom: 0;
}

.diagram-performa .diagram-performa--item {
  width: 33.3333333333%;
  height: 200px;
  position: relative;
}

.diagram-performa--border-line {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  border-top: 4px dotted #D5305D;
}

.diagram-performa--border-line:before {
  content: attr(data-border-line);
  padding: 1px 4px;
  background-color: #D5305D;
  border-radius: 4px;
  color: #ffffff;
  position: absolute;
  left: -28px;
  top: -12px;
  font-size: 12px;
  text-align: center;
  width: 24px;
}

.diagram-performa--caption {
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.diagram-performa--item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.diagram-performa--item .diagram-performa--block {
  width: 10%;
  height: 200px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.diagram-performa--item .diagram-performa--block .diagram-performa--blocked {
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
}

.diagram-performa--item .diagram-performa--block:nth-child(1n+1) .diagram-performa--blocked {
  background-color: #FFBF00;
}

.diagram-performa--item .diagram-performa--block:nth-child(2n+1) .diagram-performa--blocked {
  background-color: #FF7F50;
}

.diagram-performa--item .diagram-performa--block:nth-child(3n+1) .diagram-performa--blocked {
  background-color: #3e28be;
}

.diagram-performa--item .diagram-performa--block:nth-child(4n+1) .diagram-performa--blocked {
  background-color: #9FE2BF;
}

.diagram-performa--item .diagram-performa--block:nth-child(5n+1) .diagram-performa--blocked {
  background-color: #40E0D0;
}

.diagram-performa--item .diagram-performa--block:nth-child(6n+1) .diagram-performa--blocked {
  background-color: #6495ED;
}

.diagram-performa--item .diagram-performa--block:nth-child(7n+1) .diagram-performa--blocked {
  background-color: #CCCCFF;
}

.diagram-performa--item .diagram-performa--block:nth-child(8n+1) .diagram-performa--blocked {
  background-color: #F4A460;
}

.diagram-performa--item .diagram-performa--block:nth-child(9n+1) .diagram-performa--blocked {
  background-color: #00BFFF;
}

.diagram-performa--item .diagram-performa--block:nth-child(10n+1) .diagram-performa--blocked {
  background-color: #7B68EE;
}

.diagram-performa--history {
  padding-top: 18px;
}

.diagram-performa--history .diagram-performa--history-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 8px 0px;
}

.diagram-performa--history .diagram-performa--history-item .history-block {
  width: 16px;
  height: 16px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 10px;
}

.diagram-performa--history .diagram-performa--history-item .history-caption {
  font-size: 12px;
  font-weight: 600;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(1n+1) .history-block {
  background-color: #FFBF00;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(2n+1) .history-block {
  background-color: #FF7F50;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(3n+1) .history-block {
  background-color: #3e28be;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(4n+1) .history-block {
  background-color: #9FE2BF;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(5n+1) .history-block {
  background-color: #40E0D0;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(6n+1) .history-block {
  background-color: #6495ED;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(7n+1) .history-block {
  background-color: #CCCCFF;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(8n+1) .history-block {
  background-color: #F4A460;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(9n+1) .history-block {
  background-color: #00BFFF;
}

.diagram-performa--history .diagram-performa--history-item:nth-child(10n+1) .history-block {
  background-color: #7B68EE;
}

.statistic-container {
  position: absolute;
  top: 248px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  background-color: #e1e6eb;
}

.statistic-block {
  display: block;
  padding-bottom: 8px;
}

.statistic-block .statistic-block-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px 0px;
}

.statistic-block .statistic-block-item .statistic-block-label {
  display: block;
  width: 120px;
  text-align: right;
  background-color: #ffffff;
  margin-right: 8px;
  height: 14px;
  line-height: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.statistic-block .statistic-block-item .progress {
  height: 8px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
}

.statistic-block .statistic-block-item:nth-child(1n+1) .progress-bar {
  background-color: #FFBF00;
}

.statistic-block .statistic-block-item:nth-child(2n+1) .progress-bar {
  background-color: #FF7F50;
}

.statistic-block .statistic-block-item:nth-child(3n+1) .progress-bar {
  background-color: #7B68EE;
}

.statistic-block .statistic-block-item:nth-child(4n+1) .progress-bar {
  background-color: #9FE2BF;
}

.statistic-block .statistic-block-item:nth-child(5n+1) .progress-bar {
  background-color: #40E0D0;
}

.statistic-block .statistic-block-item:nth-child(6n+1) .progress-bar {
  background-color: #6495ED;
}

.statistic-block .statistic-block-item:nth-child(7n+1) .progress-bar {
  background-color: #CCCCFF;
}

.statistic-block .statistic-block-item:nth-child(8n+1) .progress-bar {
  background-color: #F4A460;
}

.statistic-block .statistic-block-item:nth-child(9n+1) .progress-bar {
  background-color: #00BFFF;
}

.statistic-block .statistic-block-item:nth-child(10n+1) .progress-bar {
  background-color: #9ACD32;
}

.sticky-list-1 {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  height: 38px;
  line-height: 38px;
  background-color: #F3F5F7;
  z-index: 15;
  border-bottom: 1px solid #d4dde3;
  padding: 0 18px;
  margin-bottom: 0px;
}

.block-kkm-history {
  width: 88px;
  height: 20px;
  display: inline-block;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #d4dde3;
  border-radius: 4px;
}

.block-kkm-history:before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  border-top: 4px dotted #D5305D;
  top: 7px;
}

.main-body .page-wrapper {
  padding: 18px;
}

@media screen and (max-width: 767px) {
  .main-body .page-wrapper {
    padding: 6px;
  }
}

.main-body .page-wrapper .page-header {
  padding: 18px;
  background-color: #ffffff;
}

@media screen and (max-width: 767px) {
  .main-body .page-wrapper .page-header {
    padding: 12px;
  }
}

.main-body .page-wrapper .page-header-title h4 {
  font-size: 16px;
  width: 500px;
}

@media screen and (max-width: 1100px) {
  .main-body .page-wrapper .page-header-title h4 {
    width: 360px;
  }
}

@media screen and (max-width: 767px) {
  .main-body .page-wrapper .page-header-title h4 {
    margin-left: 12px !important;
    font-size: 15px;
    width: 288px;
  }
}

@media screen and (max-width: 400px) {
  .main-body .page-wrapper .page-header-title h4 {
    width: 234px;
  }
}

@media screen and (max-width: 767px) {
  .main-body .page-wrapper .page-header-title div.ml-4 {
    margin-left: 12px !important;
    font-size: 15px;
  }
}

.header-navbar .navbar-wrapper .navbar-logo {
  width: 230px;
}

.navbar {
  display: none !important;
}

.navbar-top-new {
  display: none;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1028;
  height: 72px;
  padding: 0 12px;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
}

.navbar-top-new .d-flex {
  position: relative;
}

.navbar-top-new .navbar-top-logo img {
  height: 50px !important;
}

.navbar-top-new .navbar-top-toggle {
  position: absolute;
  top: 16px;
  left: 0;
}

@media screen and (max-width: 991px) {
  .navbar-top-new {
    display: block;
  }
}

.top-content {
  display: block;
  padding-top: 26px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0073e0;
  color: #0073e0;
  margin-left: -18px;
  margin-right: -18px;
  margin-top: -18px;
  padding-left: 18px;
  padding-right: 18px;
}

.top-content .top-content-h1 {
  font-size: 2rem;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .top-content {
    margin-left: -6px;
    margin-right: -6px;
    margin-top: -6px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 32px;
  }
}

.top-content-floating {
  position: absolute;
  top: 20px;
  right: 26px;
  z-index: 10;
}

.bell-toggle {
  display: none;
  z-index: 999;
  position: fixed;
  top: 60px;
  right: 0;
  background: #ffffff;
  padding: 10px 14px;
  border: 1px solid #d4dde3;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  cursor: pointer;
}

.bell-toggle:hover {
  background: #0073e0;
  color: #ffffff;
  border-color: #0073e0;
}

.stat-bar-group {
  position: relative;
  display: block;
}

.stat-bar-group .stat-bar-caption,
.stat-bar-group .stat-bar-block {
  position: relative;
  display: block;
}

.stat-bar-group .stat-bar-caption {
  font-weight: 600;
  height: 33px;
  position: relative;
}

.stat-bar-group .stat-bar-caption:before {
  content: '';
  position: absolute;
  top: 14px;
  left: 24px;
  right: 24px;
  height: 1px;
  background-color: #d4dde3;
}

.stat-bar-group .stat-bar-caption .stat-bar-left,
.stat-bar-group .stat-bar-caption .stat-bar-right {
  display: inline-block;
  position: relative;
}

.stat-bar-group .stat-bar-caption .stat-bar-left:before,
.stat-bar-group .stat-bar-caption .stat-bar-right:before {
  content: '';
  position: absolute;
  bottom: -10px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.stat-bar-group .stat-bar-caption .stat-bar-left {
  float: left;
}

.stat-bar-group .stat-bar-caption .stat-bar-left:before {
  left: 12px;
  border-bottom: 8px solid #D5305D;
}

.stat-bar-group .stat-bar-caption .stat-bar-right {
  float: right;
}

.stat-bar-group .stat-bar-caption .stat-bar-right:before {
  right: 12px;
  border-bottom: 8px solid #00C177;
}

.stat-bar-group .stat-bar-caption.stat-bar-caption--empty .stat-bar-left:before {
  border-bottom: 8px solid #D8DBDE;
}

.stat-bar-group .stat-bar-caption.stat-bar-caption--empty .stat-bar-right:before {
  border-bottom: 8px solid #e1e6eb;
}

.stat-bar-group .stat-bar-block {
  font-size: 0;
  overflow: hidden;
  border-radius: 6px;
}

.stat-bar-group .stat-bar-block .stat-bar-left,
.stat-bar-group .stat-bar-block .stat-bar-right {
  display: inline-block;
  position: relative;
  height: 32px;
  min-width: 37px !important;
  max-width: calc(100% - 37px) !important;
}

.stat-bar-group .stat-bar-block .stat-bar-left:before,
.stat-bar-group .stat-bar-block .stat-bar-right:before {
  content: attr(data-stat-number);
  color: #ffffff;
  position: absolute;
  font-size: 11px;
  font-weight: 500;
  top: 8px;
  padding: 2px 4px;
  padding: 3px 4px;
  background: rgba(0, 0, 0, 0.3);
  line-height: 1;
  border-radius: 4px;
}

.stat-bar-group .stat-bar-block .stat-bar-left:after,
.stat-bar-group .stat-bar-block .stat-bar-right:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.2);
}

.stat-bar-group .stat-bar-block .stat-bar-left {
  float: left;
  background-color: #D5305D;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.stat-bar-group .stat-bar-block .stat-bar-left:before {
  text-align: right;
  right: 8px;
}

.stat-bar-group .stat-bar-block .stat-bar-right {
  float: right;
  background-color: #00C177;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.stat-bar-group .stat-bar-block .stat-bar-right:before {
  text-align: left;
  left: 8px;
}

.stat-bar-group .stat-bar-block.stat-bar-block--empty .stat-bar-left {
  background-color: #D8DBDE;
}

.stat-bar-group .stat-bar-block.stat-bar-block--empty .stat-bar-right {
  background-color: #e1e6eb;
}

.stat-bar-loading {
  position: absolute;
  top: -3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border: 1px solid #d4dde3;
  background: #ffffff;
  border-radius: 16px;
  line-height: 32px;
  text-align: center;
}

.hover-subtopic-list {
  overflow: hidden;
}

.hover-subtopic-list .btn-slide {
  margin-right: -116px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.hover-subtopic-list:hover .btn-slide {
  margin-right: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

@media screen and (max-width: 767px) {
  .hover-subtopic-list .btn-slide {
    margin-right: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
}

.menu-dashboard-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
}

@media screen and (max-width: 767px) {
  .menu-dashboard-top {
    top: 12px;
  }
  .menu-dashboard-top.menu-dashboard-top-2 {
    top: 70px;
  }
}

@media screen and (max-width: 767px) {
  .day-list-767 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
  .day-list-767 .day-list--item {
    width: 50%;
    border-right: 0 !important;
  }
  .day-list-767 .day-list--item:nth-child(odd) {
    border-right: 1px solid #d4dde3 !important;
  }
}

.block-with-icon,
.block-with-icon-sm,
.block-with-icon-fa {
  position: relative;
}

.block-with-icon .bwi-icon,
.block-with-icon-sm .bwi-icon,
.block-with-icon-fa .bwi-icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 18px;
  width: 62px;
}

.block-with-icon .bwi-icon-2,
.block-with-icon-sm .bwi-icon-2,
.block-with-icon-fa .bwi-icon-2 {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 18px;
}

.block-with-icon .bwi-content,
.block-with-icon-sm .bwi-content,
.block-with-icon-fa .bwi-content {
  padding-left: 84px;
}

.block-with-icon-sm .bwi-icon {
  width: 36px;
}

.block-with-icon-sm .bwi-content {
  padding-left: 64px;
}

.block-with-icon-fa .bwi-content {
  padding-left: 46px;
}

.home-notif {
  position: fixed;
  z-index: 999;
  top: 16px;
  right: 16px;
}

.home-notif .home-notif--inner {
  display: block;
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #0073e0;
}

.home-notif .home-notif--inner a {
  font-size: 13px;
}

@media screen and (max-width: 991px) {
  .home-notif {
    top: 82px;
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
  .home-notif .home-notif--inner {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .home-notif {
    right: 16px;
    left: 16px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.account-group .account-item {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #d4dde3;
  padding-top: 1rem;
}

.account-group .account-item:first-child {
  padding-top: 0;
}

.account-group .account-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.card-topic--header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border: 1px solid transparent;
  padding: 1rem;
  border-radius: 6px;
  cursor: pointer;
}

.card-topic--header:hover {
  border-color: #0073e0;
}

.card-topic--header:hover .card-topic--header-action .btn {
  background: #E3F1FF;
  border-color: #0073e0;
}

.card-topic--header .card-topic--header-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.card-topic--header .card-topic--header-col.col-first {
  margin-right: 1rem;
}

@media screen and (max-width: 767px) {
  .card-topic--header {
    border: 0px !important;
    border-radius: 0px !important;
    background-color: #fcfcfc;
    padding: 12px;
  }
  .card-topic--header:hover {
    border-color: transparent;
  }
  .card-topic--header:hover .card-topic--header-action .btn {
    background: #ffffff;
    border-color: #d4dde3;
  }
  .card-topic--header:hover .card-topic--header-action .btn-menu {
    color: #0073e0;
  }
}

.card-topic--header-muted {
  cursor: default;
}

.card-topic--header-muted:hover {
  border-color: transparent;
}

.card-topic--header-muted:hover .card-topic--header-action .btn {
  background: #ffffff;
  border-color: inherit;
}

.card-topic--header-icon {
  margin-right: 1rem;
}

.card-topic--header-icon .card-topic--icon {
  width: 36px;
}

@media screen and (max-width: 767px) {
  .card-topic--header-icon {
    margin-right: .6rem;
    margin-left: -.13rem;
  }
  .card-topic--header-icon .card-topic--icon {
    width: 30px;
  }
}

.card-topic--header-titles .card-topic--header-title {
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
}

@media screen and (max-width: 767px) {
  .card-topic--header-titles .card-topic--header-title {
    font-size: 1rem;
    margin-bottom: 3px;
  }
}

.card-topic--header-count {
  font-weight: 500;
  font-size: 1.2rem;
  margin-right: 1rem;
}

@media screen and (max-width: 767px) {
  .card-topic--header-count {
    margin-right: .6rem;
    margin-left: .6rem;
    font-size: .9rem;
  }
}

.card-topic--content-group {
  margin: 0;
  padding: 0;
}

.card-topic--content-group .card-topic--content {
  list-style: none;
  position: relative;
}

.card-topic--content-group .card-topic--content:before, .card-topic--content-group .card-topic--content:after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 0;
  height: 1px;
  background-color: #d4dde3;
}

.card-topic--content-group .card-topic--content:before {
  top: 0;
}

.card-topic--content-group .card-topic--content:after {
  bottom: -1px;
}

.card-topic--content-group .card-topic--content:first-child {
  border-top: 1px solid #d4dde3;
}

.card-topic--content-group .card-topic--content:first-child:before {
  display: none;
}

.card-topic--content-group .card-topic--content:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding-bottom: 4px;
}

.card-topic--content-group .card-topic--content:last-child:after {
  display: none;
}

.card-topic--content-group .card-topic--content:hover {
  background-color: #fcfcfc;
}

.card-topic--content-group .card-topic--content:hover:before, .card-topic--content-group .card-topic--content:hover:after {
  left: 0;
}

.card-topic--content-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  position: relative;
  padding: 1rem;
  padding-bottom: 0px;
}

.card-topic--content-top .card-topic--content-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .card-topic--content-top {
    padding: 12px;
    padding-bottom: 0px;
    padding-right: 54px;
  }
}

.card-topic--content-top-2 {
  padding-bottom: 1rem;
}

@media screen and (max-width: 767px) {
  .card-topic--content-top-2 {
    padding-bottom: 12px;
  }
}

.card-topic--content-bottom {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

@media screen and (max-width: 767px) {
  .card-topic--content-bottom {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
  }
}

.card-topic--content-icon {
  margin-right: 1rem;
  padding-left: .4rem;
}

.card-topic--content-icon .card-topic--icon {
  width: 30px;
}

@media screen and (max-width: 767px) {
  .card-topic--content-icon {
    margin-right: .6rem;
    padding-left: 0;
    width: 28px;
    text-align: center;
  }
  .card-topic--content-icon .card-topic--icon {
    width: 24px;
  }
}

.card-topic--content-title {
  font-weight: 500;
  line-height: 1.3;
}

.card-topic--content-type {
  width: 70px;
  text-align: center;
  font-weight: 500;
}

.card-topic--content-dates {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: .7rem 1rem;
  background: #F3F5F7;
  border-radius: 6px;
}

.card-topic--content-notes {
  display: block;
  padding: .6rem 1rem;
  font-size: .8rem;
  background: #FFECF0;
  color: #FB5779;
  border: 1px solid #FFC9D4;
  border-radius: 24px;
  font-weight: 500;
}

.card-topic--content-upload {
  display: block;
}

.card-topic--content-upload .btn {
  margin-top: .7rem;
}

@media screen and (max-width: 767px) {
  .card-topic--content-action {
    margin-left: 1rem;
  }
}

.card-topic--content-dates,
.card-topic--content-notes {
  margin-top: .7rem;
}

.drag-icon, .drag-icon-title {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 16px;
  height: 16px;
  overflow: hidden;
  opacity: 0;
  cursor: -webkit-grab;
  cursor: grab;
}

.drag-icon-title {
  opacity: 0;
}

.task-card:hover > .task-card--info .task-card--drag .drag-icon-title {
  opacity: .5;
}

.topic-sort-drag:hover > td .drag-icon {
  opacity: .5;
}

.show-action-topic {
  display: none;
}

.topic-sort-drag:hover > td .show-action-topic {
  display: block;
}

.button-action-mobile {
  cursor: pointer !important;
  position: absolute;
  top: 1px;
  left: 0;
  bottom: -.6rem;
  right: 0;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  text-align: right;
  padding-right: 12px;
}

.button-action-mobile:focus, .button-action-mobile:active {
  outline: none;
}

.button-action-mobile .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-top: 6px;
}

.button-action-mobile .inner .fe {
  font-size: 1.2rem;
  display: inline-block;
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}

.button-action-mobile.muted {
  background: rgba(255, 255, 255, 0.5);
}

.button-action-mobile.muted .inner .fe-chevron-right {
  display: none;
}

@media screen and (max-width: 767px) {
  .button-action-mobile {
    bottom: -.7rem;
  }
}

.hide-this-topic {
  position: absolute;
  top: 0;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  pointer-events: none;
}

.content-100 img {
  max-width: 80% !important;
  height: auto !important;
}

.content-100 table {
  width: 100% !important;
}

.content-100 table tr td, .content-100 table tr th {
  white-space: normal;
}

@media screen and (max-width: 767px) {
  .content-100 img {
    max-width: 100% !important;
    height: auto !important;
  }
}

.block-question-content {
  position: fixed;
  left: 230px;
  top: 123px;
  width: calc(72% - 230px);
  bottom: 0px;
  overflow-y: auto;
  padding: 12px 16px;
}

@media screen and (max-width: 991px) {
  .block-question-content {
    left: 0;
    top: 195px;
    width: calc(100% - 33%);
  }
}

@media screen and (max-width: 767px) {
  .block-question-content {
    position: relative;
    width: auto;
    padding: 0px;
    top: 0;
    margin-left: -6px;
    margin-right: -6px;
  }
  .block-question-content .card-full-mobile {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}

.card-question-number {
  position: fixed;
  right: 0px;
  top: 123px;
  width: 28%;
  bottom: 0px;
  margin-bottom: 0px !important;
  overflow-y: auto;
  border-radius: 0px !important;
  border: 0px !important;
}

@media screen and (max-width: 991px) {
  .card-question-number {
    top: 195px;
    width: 33%;
  }
}

@media screen and (max-width: 767px) {
  .card-question-number {
    top: 0;
    position: relative;
    width: auto;
    margin-right: -6px;
    margin-left: -6px;
  }
}

.card-question-banksoal {
  top: 88px;
}

@media screen and (max-width: 991px) {
  .card-question-banksoal {
    top: 0;
  }
}

.question-quiz {
  width: 100%;
  overflow-x: auto;
}

.question-quiz img {
  max-width: 100%;
}

.answer-group-flag .answer-flag {
  padding: 8px 12px;
  border: 1px solid #d4dde3;
  border-bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  outline: 0;
  background: #ffffff;
  cursor: pointer;
}

.answer-group-flag .answer-flag .icofont {
  -webkit-transition: 0s;
  transition: 0s;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.answer-group-flag .answer-flag:hover {
  background: #f4fbff;
  border-color: #0073e0;
}

.answer-group-flag .answer-flag.collapsed .icofont {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.answer-group-flag .cke {
  border-top-left-radius: 0px !important;
}

.input-multi-choice {
  width: 21px !important;
  -ms-flex-negative: 0 !important;
      flex-shrink: 0 !important;
}

.contents-result {
  font-size: 15px;
}

.contents-result p {
  font-size: 15px;
  margin-bottom: 1rem;
  padding: inherit;
  white-space: normal;
}

.contents-result p img {
  max-width: 70%;
  height: inherit;
}

.contents-result p ul, .contents-result ul {
  font-size: 15px;
  padding-left: 40px !important;
  list-style: disc;
}

.contents-result p ul li, .contents-result ul li {
  padding: 0px !important;
}

.contents-result p ol, .contents-result ol {
  font-size: 15px;
}

.contents-result img {
  max-width: 70%;
  height: inherit;
}

.select-false {
  border-color: #facccc !important;
  color: #D5305D !important;
  background-color: #FFF4F5 !important;
}

.select-true {
  border-color: #A2E7FF !important;
  color: #0073e0 !important;
  background-color: #D5F4FF !important;
}

.select-true-2 {
  color: #00C177 !important;
  background-color: #E6FFF3 !important;
  border-color: #C4F5DD !important;
}

.lampiran-view {
  position: relative;
}

.lampiran-view .btn {
  z-index: 3;
}

.lampiran-view .no-attachment {
  background-color: #F3F5F7;
}

.lampiran-view:before {
  content: '';
  position: absolute;
  top: 34px;
  left: 0;
  width: 100%;
  background: #d4dde3;
  height: 1px;
}

.data-lampiran .data-lampiran-text {
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-lampiran .data-lampiran-text:hover {
  background-color: #ffffff;
}

.content-quiz-section, .content-dashboard-teacher {
  padding-right: 280px;
  position: relative;
}

@media screen and (max-width: 991px) {
  .content-quiz-section, .content-dashboard-teacher {
    padding-right: 0px;
  }
}

.content-dashboard-teacher {
  padding-right: 230px;
}

.content-quiz-sidebar, .content-dashboard-guru-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: #ffffff;
  border-left: 1px solid #d4dde3;
}

.content-quiz-sidebar .card-block, .content-dashboard-guru-sidebar .card-block {
  padding: 1rem;
  overflow-y: auto;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .content-quiz-sidebar, .content-dashboard-guru-sidebar {
    display: none;
  }
}

#dashboardSidebar.content-dashboard-guru-sidebar, #dashboardNotification.content-dashboard-guru-sidebar {
  z-index: 2000;
  right: -230px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

#dashboardSidebar.content-dashboard-guru-sidebar.show, #dashboardNotification.content-dashboard-guru-sidebar.show {
  right: 0;
}

@media screen and (max-width: 991px) {
  #dashboardSidebar.content-dashboard-guru-sidebar, #dashboardNotification.content-dashboard-guru-sidebar {
    display: block;
  }
}

.content-dashboard-guru-sidebar {
  width: 230px;
}

.quiz-timer {
  border-radius: 6px;
  padding: 8px;
}

.quiz-timer .quiz-timer-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 8px;
}

.quiz-timer .quiz-timer-group {
  background: #F3F5F7;
  padding: 6px;
  border-radius: 6px;
  text-align: center;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.quiz-timer .quiz-timer-group .quiz-timer-item {
  width: 33.3333333333%;
}

.quiz-timer-item .quiz-timer-time {
  position: relative;
  font-weight: 500;
  font-size: 1.4rem;
}

.quiz-timer-item .quiz-timer-time:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: #d4dde3;
}

.quiz-timer-item .quiz-timer-label {
  font-size: 10px;
  text-transform: uppercase;
}

.quiz-timer-item:first-child .quiz-timer-time:before {
  display: none;
}

.quiz-timer-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 6px;
}

.quiz-timer-mobile .quiz-texxt {
  margin-bottom: 0px !important;
}

.quiz-timer-mobile .quiz-timer-item .quiz-timer-time {
  font-size: 1.1rem;
}

.radio-content {
  padding: 0px 12px;
  border: 1px solid #d4dde3;
  border-radius: 6px;
  margin-bottom: 12px;
  padding-right: 0px;
}

.radio-content:hover {
  border-color: #0073e0;
}

.radio-content .quiz-multi-content {
  padding-top: 1rem;
  width: 100%;
  min-height: 55px;
  max-height: 200px;
  overflow: auto;
  padding-right: 12px;
}

.radio-content .quiz-multi-content img,
.radio-content .quiz-multi-content p img {
  max-width: 70%;
  height: inherit;
}

.radio-content .quiz-multi-content p ul, .radio-content .quiz-multi-content ul {
  font-size: 15px;
  padding-left: 40px !important;
  list-style: disc;
}

.radio-content .quiz-multi-content p ul li, .radio-content .quiz-multi-content ul li {
  padding: 0px !important;
}

.radio-content .quiz-multi-content p ol, .radio-content .quiz-multi-content ol {
  font-size: 15px;
}

.radio-content .quiz-multi-content p {
  white-space: normal;
}

.option-content-scroll {
  width: 100%;
  max-height: 200px;
  overflow: auto;
  padding-right: 1rem;
}

.option-content-1 img,
.option-content-1 p img {
  max-width: 70%;
  height: inherit;
}

.option-content-1 p ul, .option-content-1 ul {
  font-size: 15px;
  padding-left: 40px !important;
  list-style: disc;
}

.option-content-1 p ul li, .option-content-1 ul li {
  padding: 0px !important;
}

.option-content-1 p ol, .option-content-1 ol {
  font-size: 15px;
}

.radio.radiofill.radio-primary .helper::after {
  background-color: #0073e0 !important;
  border-color: #0073e0 !important;
}

.radio.radiofill.radio-primary .helper::before {
  border-color: #0073e0 !important;
}

.selectedOption,
.selectedOption-2 {
  border-color: #0073e0 !important;
  -webkit-transform: scale(1.01);
          transform: scale(1.01);
  background: #ffffff;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
}

.selectedOption .option-label-1,
.selectedOption-2 .option-label-1 {
  color: #0073e0;
}

.selectedOption-2 {
  position: relative;
}

.selectedOption-2:before {
  content: 'Correct Answer';
  position: absolute;
  bottom: 6px;
  right: 8px;
  color: #0073e0;
  font-weight: 600;
  font-size: 11px;
}

.block-dynamic-description {
  font-size: 15px;
  overflow-x: auto;
}

.block-dynamic-description p {
  font-size: 15px;
}

.block-dynamic-description p img {
  max-width: 70%;
  height: inherit;
}

.block-dynamic-description p blockquote, .block-dynamic-description blockquote {
  font-weight: bold;
  padding-left: 12px;
  border-left: 4px solid #0073e0;
}

.block-dynamic-description p ul, .block-dynamic-description ul {
  font-size: 15px;
  padding-left: 40px !important;
  list-style: disc;
}

.block-dynamic-description p ul li, .block-dynamic-description ul li {
  padding: 0px !important;
}

.block-dynamic-description p ol, .block-dynamic-description ol {
  font-size: 15px;
}

.block-dynamic-description img {
  max-width: 70%;
  height: inherit;
}

.block-dynamic-description table {
  border: none;
}

.block-dynamic-description table th {
  background-color: #F3F5F7;
}

.block-dynamic-description table th, .block-dynamic-description table td {
  padding: 8px;
  border-color: #d4dde3;
}

.content-fixed-full {
  position: fixed;
  left: 247px;
  right: 0;
  top: 0;
  padding-right: 18px;
  padding-top: 18px;
  bottom: 0;
  overflow-y: auto;
}

.content-fixed-full.content-fixed-full-2 {
  left: 230px;
  padding-left: 18px;
}

.content-fixed-full.content-fixed-full-push-top-1 {
  top: 112px;
}

@media screen and (max-width: 991px) {
  .content-fixed-full {
    position: relative;
    left: 0;
    padding-right: 0;
    padding-top: 0;
    overflow-y: inherit;
  }
  .content-fixed-full.content-fixed-full-2 {
    left: 0px;
    padding-left: 0;
  }
  .content-fixed-full.content-fixed-full-push-top-1 {
    top: 0px;
  }
}

#MathJax_Message {
  background: #2C363C !important;
  color: #ffffff !important;
  left: 1rem !important;
  border: none !important;
  padding: 4px 8px !important;
  border-radius: 24px;
}

.centered-icon {
  position: relative;
}

.centered-icon .centered-icon--item {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

@media screen and (max-width: 767px) {
  .centered-icon .centered-icon--item {
    display: none;
  }
}

.answer-select {
  display: block;
  position: relative;
  border: 1px solid #d4dde3;
  border-radius: 6px;
  margin-left: 36px;
  border-top-left-radius: 0px;
}

.answer-select textarea.form-control {
  border: 0;
  border-radius: 6px;
  resize: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.answer-select .cke {
  border: 0px;
  border-radius: 0px !important;
  border-top-right-radius: 6px !important;
  border-bottom: 1px solid #d4dde3;
}

.answer-select--list {
  position: absolute;
  top: -1px;
  left: -36px;
  width: 36px;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #d4dde3;
  border-right: 0px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.answer-item {
  font-size: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 50px;
}

.answer-item:hover {
  background-color: #fcfcfc;
  border-color: #0073e0 !important;
}

.detail--modal {
  max-width: 100%;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: none;
          transform: none;
}

.detail--modal .md-content {
  padding: 0px !important;
  -webkit-transform: none;
          transform: none;
  color: #1B2A3D;
}

.detail--modal .md-content .detail--modal-inner {
  padding: 0px;
  font-weight: inherit;
  font-size: inherit;
}

.detail--views {
  background: #F3F5F7 !important;
}

.detail--views {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  height: 100vh;
}

.detail--views .detail--content,
.detail--views .detail--discussion,
.detail--views .detail--content-full {
  height: 100%;
}

.detail--views .detail--content .card,
.detail--views .detail--discussion .card,
.detail--views .detail--content-full .card {
  border-radius: 0px;
  border: 0;
  margin: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.detail--views .detail--content {
  width: 70%;
}

.detail--views .detail--discussion {
  width: 30%;
}

.detail--views .detail--content-full {
  width: 100%;
}

.detail--views .j-pro {
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .detail--views .detail--content {
    width: 100%;
  }
  .detail--views .detail--discussion {
    width: 100%;
  }
}

.detail--info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.detail--note {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.875em;
  margin-top: 8px;
  margin-bottom: 1rem;
}

.detail--content .detail--card, .detail--content-full .detail--card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.detail--content .detail--card .detail--card-header, .detail--content-full .detail--card .detail--card-header {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.detail--content .detail--card .detail--card-content, .detail--content-full .detail--card .detail--card-content {
  height: 100%;
}

@media screen and (max-width: 767px) {
  .detail--discussion {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 20;
  }
}

#chatDiscussion.active {
  top: 0;
}

.chat-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

.chat-content .chat-bubble {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  height: 90%;
  overflow-y: scroll;
}

.chat-content .chat-input {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.chat-input {
  padding: 4px;
  background: #F0F2F5;
}

.chat-input textarea {
  background: #ffffff;
  resize: none;
  border-radius: 6px;
  border-color: transparent;
}

.chat-opener--wrap, #chatClose {
  display: none;
}

@media screen and (max-width: 767px) {
  .chat-opener--wrap, #chatClose {
    display: block;
  }
}

.chat-opener {
  cursor: pointer;
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  border-radius: 48px;
  color: #ffffff;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1) !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 999;
  border: 0;
  font-size: 1rem !important;
}

.chat-opener:focus {
  outline: none;
}

.chat-balasan-group {
  margin: 0;
  padding: 0;
}

.chat-balasan {
  position: relative;
  list-style: none;
}

.chat-balasan:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  bottom: -1px;
  width: 2px;
  background: #0073e0;
}

.chat-balasan:last-child {
  border-bottom: 1px solid #d4dde3;
}

.chat-balasan-bukan .chat-balasan-group .chat-balasan:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.input-group--report {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.input-group--report .report--select-class, .input-group--report .report--select-category {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: -1px;
}

.input-group--report .report--select-category {
  border-radius: 0 !important;
}

.input-group--report .report--search .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group--report .report--search .fe, .input-group--report .report--search .icofont {
  z-index: 4;
}

.input-group--report .report--select-class {
  width: 20%;
}

.input-group--report .report--search {
  width: 50%;
}

.input-group--report .report--select-class, .input-group--report .report--select-category, .input-group--report .report--search .form-control {
  position: relative;
  z-index: 1;
}

.input-group--report .report--select-class:focus, .input-group--report .report--select-class:hover, .input-group--report .report--select-category:focus, .input-group--report .report--select-category:hover, .input-group--report .report--search .form-control:focus, .input-group--report .report--search .form-control:hover {
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .input-group--report {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .input-group--report .report--select-class, .input-group--report .report--search, .input-group--report .report--select-category {
    width: 100%;
  }
  .input-group--report .report--search .form-control {
    border-radius: 6px !important;
  }
  .input-group--report .report--select-class, .input-group--report .report--select-category {
    border-radius: 6px !important;
    margin-right: 0px;
    margin-bottom: 8px;
  }
}

.block-muted {
  opacity: 0.4 !important;
  pointer-events: none;
}

.block-muted-2 {
  position: relative;
}

.block-muted-2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  opacity: .4;
  z-index: 99;
}

.grid-tugas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.grid-tugas .grid-tugas--content {
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  bottom: 77px;
}

.grid-tugas .grid-tugas--content .grid-tugas--content-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding: 15px;
}

.grid-tugas .grid-tugas--header {
  display: block;
  margin-left: -15px;
  margin-right: -15px;
  margin-top: -15px;
  padding-left: 15px;
  padding-right: 15px;
  border-bottom: 1px solid #d4dde3;
}

.grid-tugas .grid-tugas--sidebar {
  border-left: 1px solid #d4dde3;
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  bottom: 72px;
}

.grid-tugas .grid-tugas--sidebar .grid-tugas--sidebar-inner {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: 15px;
}

.grid-tugas.grid-tugas--single .grid-tugas--content {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .grid-tugas {
    overflow-y: auto;
    padding-bottom: 72px;
  }
  .grid-tugas .grid-tugas--content, .grid-tugas .grid-tugas--sidebar {
    position: relative;
    width: 100%;
  }
  .grid-tugas.grid-tugas--single .grid-tugas--content {
    left: 0;
    -webkit-transform: none;
            transform: none;
  }
}

.task-content-student img {
  width: auto !important;
  max-width: 80% !important;
  height: auto !important;
}

.task-content-student p {
  line-height: 1.4 !important;
}

.task-content-student a {
  color: #0073e0;
  text-decoration: underline;
}

.not-done-student {
  background: #F3F5F7;
}

.block-filter-assignment {
  height: 34px;
}

.block-filter-assignment.extended {
  height: 92px;
}

@media screen and (max-width: 767px) {
  .block-filter-assignment {
    height: 0px;
  }
  .block-filter-assignment.extended {
    height: 0px;
  }
}

@media screen and (min-width: 768px) {
  .filterBlockScrolled.active {
    position: fixed;
    top: 70px;
    background-color: #ffffff;
    border-bottom: 1px solid #d4dde3;
    left: 229px;
    padding: 12px 16px;
    right: 0;
    z-index: 10;
    -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
            box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
  }
  .filterBlockScrolled.active.have-nav-tab {
    top: 122px;
  }
}

.block-file-caption {
  position: relative;
  padding: 12px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid #d4dde3;
}

.block-file-caption .block-file-caption--data {
  width: calc(100% - 86px);
}

.block-file-caption .block-file-caption--data .block-file-caption--filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.block-file-caption .block-file-caption--nav {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.history-block {
  display: block;
  position: relative;
  width: 100%;
  padding-left: 32px;
}

.history-block .history-item {
  display: block;
  padding: 1rem;
  border: 1px solid #d4dde3;
  border-radius: 10px;
  position: relative;
  margin-bottom: 12px;
}

.history-block .history-item:before, .history-block .history-item:after {
  content: '';
  position: absolute;
  left: -22px;
  width: 1px;
  height: 50%;
  background-color: #d4dde3;
}

.history-block .history-item:before {
  top: -7px;
}

.history-block .history-item:after {
  bottom: -7px;
}

.history-block .history-item:first-child:before {
  display: none;
}

.history-block .history-item:last-child {
  margin-bottom: 0px;
}

.history-block .history-item:last-child:after {
  display: none;
}

.history-block .history-item .history-dot {
  position: absolute;
  top: 50%;
  left: -28px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: 24px;
  background-color: #d4dde3;
  z-index: 99;
}

.history-block .history-item.latest .history-dot {
  background-color: #0073e0;
}

@media screen and (max-width: 767px) {
  .history-block .history-item {
    padding: 8px;
  }
}

.history-block.with-icon .history-item-content {
  padding-left: 32px;
}

.history-block.with-icon .history-icon {
  position: absolute;
  top: 25px;
  left: 1rem;
}

.history-block.with-btn .history-item-content {
  padding-right: 118px;
}

.history-block.with-btn .history-btn {
  position: absolute;
  top: 19px;
  right: 1rem;
}

@media screen and (max-width: 767px) {
  .history-block.with-icon .history-item-content {
    padding-left: 30px;
  }
  .history-block.with-icon .history-icon {
    position: absolute;
    top: 18px;
    left: 12px;
  }
  .history-block.with-btn .history-item-content {
    padding-right: 90px;
  }
  .history-block.with-btn .history-btn {
    position: absolute;
    top: 12px;
    right: 8px;
  }
}

.check-key {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #BBC1E1;
  border-radius: 4px;
}

.image-wrap-attachment {
  display: block;
  position: relative;
  width: 100%;
  background: #F3F5F7;
  text-align: center;
  border: 1px solid #d4dde3;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top: 0px !important;
  padding: 14px;
}

.image-wrap-attachment.style-1 {
  border-top: 1px solid #d4dde3 !important;
  border-radius: 10px !important;
}

.image-wrap-attachment .btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

.image-wrap-attachment img {
  margin: 0 auto;
  max-height: 400px;
  border-radius: 6px;
}

.student-toolate {
  color: #D5305D !important;
}

.student-toolate .form-control {
  border-color: #D5305D !important;
  color: #D5305D !important;
}

.student-toolate .fe {
  color: #D5305D !important;
}

.empty-state-1 {
  display: block;
  background: #F3F5F7;
  border-radius: 10px;
  padding: 80px 16px;
  text-align: center;
}

.empty-state-1.empty-state-on-file-nav {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border: 1px solid #d4dde3;
  border-top: 0px !important;
}

.multilple-upload-box {
  display: block;
}

.multiple-upload,
.file-manager-upload {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: .8rem;
  font-weight: 500;
  width: 100%;
  height: 90px;
  border-radius: 6px;
  background: #fcfcfc;
  color: #859BA6;
  border: 1px dashed #d4dde3;
}

.multiple-upload:hover,
.file-manager-upload:hover {
  background: #E3F1FF;
  color: #0073e0;
}

.file-manager-upload {
  background: #ffffff;
  border: 1px solid #d4dde3;
  color: #1B2A3D;
}

.file-manager-upload:hover {
  background: #E3F1FF;
  color: #1B2A3D;
  border-color: #0073e0;
}

.file-upload-list {
  margin: 0;
  padding: 0;
}

.file-upload-list .file-upload-items {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #d4dde3;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.file-upload-list .file-upload-items .file-upload-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.file-upload-list .file-upload-items.file-upload-done {
  position: relative;
  padding-right: 64px;
}

.file-upload-name {
  font-weight: 500;
}

.btn-cancel-upload {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #D5305D !important;
  font-weight: 500;
  cursor: pointer;
}

.btn-cancel-upload:focus, .btn-cancel-upload:active {
  outline: none;
}

.btn-remove-upload {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 12px;
}

.schedule-mobile--list {
  margin: 0;
  padding: 0;
}

.schedule-mobile--list .schedule-mobile--item {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid #d4dde3;
  padding-top: 10px;
  margin-top: 10px;
}

.schedule-mobile--list .schedule-mobile--item:first-child {
  border: 0;
  padding-top: 0;
  margin-top: 0;
}

.schedule-mobile--time {
  background: #ffffff;
  width: 110px;
  margin-right: 1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.schedule-mobile--content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

.schedule-mobile--content .dropdown {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 1rem;
  margin-top: -4px;
}

.schedule-mobile--content:hover .dropdown .btn-more-vertical {
  background: #F3F5F7;
}

.col-absen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.col-absen .col-absen-first {
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.col-absen .col-absen-first .col-absen-select {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.col-absen .col-absen-status {
  width: 12%;
}

.col-absen .col-absen-time {
  width: 18%;
}

.col-absen .col-absen-teacher {
  width: 30%;
}

.btn-group-absen .dropdown .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.absen-status {
  position: relative;
  text-decoration: underline;
  font-weight: 500;
}

.schedule-view-empty {
  min-height: 0 !important;
}

@media screen and (max-width: 767px) {
  .block-filter-mobile {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    display: none;
  }
  .block-filter-mobile .block-filter-content {
    position: fixed;
    left: 0;
    bottom: 0%;
    width: 100%;
    height: 70%;
    background-color: #ffffff;
    overflow-y: auto;
    padding: 12px;
    padding-bottom: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .block-filter-mobile:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .block-filter-mobile.active {
    display: block;
  }
}

.btn-filter-toggle {
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 26px;
  z-index: 800;
  padding: 0;
  background-color: #0073e0;
  color: #ffffff;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn-filter-toggle .fe {
  font-size: 1.3rem;
  line-height: 1.1;
}

.btn-filter-toggle:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  background-color: #0059AD;
}

.student-list,
.school-list {
  display: block;
  border-bottom: 1px solid #d4dde3;
  padding-top: .2rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.student-list .student-list--content,
.student-list .school-list--content,
.school-list .student-list--content,
.school-list .school-list--content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.student-list .student-list--content .student-list--col-1,
.student-list .student-list--content .student-list--col-2,
.student-list .student-list--content .school-list--col-1,
.student-list .student-list--content .school-list--col-2,
.student-list .school-list--content .student-list--col-1,
.student-list .school-list--content .student-list--col-2,
.student-list .school-list--content .school-list--col-1,
.student-list .school-list--content .school-list--col-2,
.school-list .student-list--content .student-list--col-1,
.school-list .student-list--content .student-list--col-2,
.school-list .student-list--content .school-list--col-1,
.school-list .student-list--content .school-list--col-2,
.school-list .school-list--content .student-list--col-1,
.school-list .school-list--content .student-list--col-2,
.school-list .school-list--content .school-list--col-1,
.school-list .school-list--content .school-list--col-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.student-list .student-list--content .student-list--col-2,
.student-list .student-list--content .school-list--col-2,
.student-list .school-list--content .student-list--col-2,
.student-list .school-list--content .school-list--col-2,
.school-list .student-list--content .student-list--col-2,
.school-list .student-list--content .school-list--col-2,
.school-list .school-list--content .student-list--col-2,
.school-list .school-list--content .school-list--col-2 {
  width: 50%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.student-list:last-child,
.school-list:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 767px) {
  .student-list .student-list--content,
  .student-list .school-list--content,
  .school-list .student-list--content,
  .school-list .school-list--content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .student-list .student-list--content .student-list--col-2,
  .student-list .student-list--content .school-list--col-2,
  .student-list .school-list--content .student-list--col-2,
  .student-list .school-list--content .school-list--col-2,
  .school-list .student-list--content .student-list--col-2,
  .school-list .student-list--content .school-list--col-2,
  .school-list .school-list--content .student-list--col-2,
  .school-list .school-list--content .school-list--col-2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.student-list--name,
.school-list--name,
.teacher-list--name {
  display: block;
  width: 290px;
  background-color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media screen and (max-width: 767px) {
  .student-list--name,
  .school-list--name,
  .teacher-list--name {
    width: 250px;
  }
}

.teacher-list--name-full {
  width: 100% !important;
  overflow: visible;
  white-space: normal;
  text-overflow: inherit;
}

.school-list--class-banner,
.add-class-item--banner {
  display: inline-block;
  width: 100px;
  height: 60px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F3F5F7;
}

.add-class-item--banner {
  width: 100%;
  height: auto;
  padding-top: 40%;
}

.add-class-item--banner-2 {
  width: 260px;
  padding-top: 20%;
}

.add-class-item--banner-3 {
  width: 200px;
  padding-top: 14%;
}

.teacher-list--name {
  width: 140px;
}

.profile-info--img {
  display: block;
  position: absolute;
  top: -28px;
  left: 18px;
  width: 92px;
  height: 92px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F3F5F7;
  border-radius: 92px;
  border: 2px solid #ffffff;
}

.profile-info--card {
  padding-left: 112px;
}

@media screen and (max-width: 767px) {
  .profile-info--card {
    padding-left: 0;
  }
  .profile-info--card .text-truncate {
    overflow: auto;
    white-space: normal;
  }
}

.class-information {
  padding-right: 50%;
}

@media screen and (max-width: 767px) {
  .class-information {
    padding-right: 0;
  }
}

.add-class-section {
  display: block;
  position: absolute;
  width: calc(50% - 18px);
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  border-left: 1px solid #d4dde3;
}

@media screen and (max-width: 767px) {
  .add-class-section {
    position: relative;
    width: 100%;
    border-left: 0;
    border-top: 1px solid #d4dde3;
    padding-top: 1rem;
  }
}

.add-class-list {
  display: block;
  position: absolute;
  top: 68px;
  right: 0;
  left: 0;
  bottom: 18px;
  overflow-y: auto;
}

@media screen and (max-width: 767px) {
  .add-class-list {
    position: relative;
    top: 0;
    bottom: inherit;
  }
}

.add-class-item {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #d4dde3;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
}

.add-class-item:last-child {
  margin-bottom: 0;
}

.student-list--wrapper {
  position: relative;
}

.student-list--wrapper:before {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: white;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(79%, white));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 79%);
}

.student-list--container {
  display: block;
  width: 100%;
  height: 220px;
  overflow-y: auto;
  position: relative;
}

.student-list--container.student-list--container-tall {
  height: 300px;
}

.linkz {
  position: relative;
  cursor: pointer;
}

.linkz:before {
  content: '';
  display: block;
  position: absolute;
  top: -4px;
  left: -10px;
  right: -10px;
  bottom: -4px;
  background: #ffffff;
  border-radius: 6px;
  z-index: 1;
}

.linkz:hover:before {
  background: #F3F5F7;
}

.linkz .linkz-content {
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .status-flex-mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.diagram-wrap {
  padding-left: 32px;
  padding-bottom: 16px;
  position: relative;
}

.diagram-wrap:before {
  content: '';
  position: absolute;
  height: calc(50% - 8px);
  background-color: rgba(0, 0, 0, 0.05);
  display: block;
  top: 0;
  left: 32px;
  right: 0;
}

.diagram-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  border-left: 1px solid #d4dde3;
  border-bottom: 1px solid #d4dde3;
  position: relative;
  height: 180px;
}

.diagram-block.diagram-block-sm {
  height: 100px;
}

.diagram-block:before, .diagram-block:after {
  position: absolute;
  font-size: 12px;
  color: #859BA6;
}

.diagram-block:before {
  content: '100%';
  top: 0;
  left: -36px;
}

.diagram-block:after {
  content: '0%';
  bottom: 0;
  left: -24px;
}

.diagram-block .diagram-block--bar {
  position: relative;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 50px;
}

.diagram-block .diagram-block--bar .bar-block {
  width: 100%;
  width: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  min-height: 26px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.diagram-block .diagram-block--bar .bar-block:before {
  content: attr(data-percentage);
  font-size: 12px;
  color: #ffffff;
  opacity: .8;
  position: absolute;
  top: 4px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.diagram-block .diagram-block--bar .bar-block:hover {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
  background-color: #0059AD;
}

.diagram-block .diagram-block--bar .bar-tag {
  font-size: 12px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
}

.bar-horizontal {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.bar-horizontal .bar-block {
  display: block;
  background-color: #0073e0;
  height: 18px;
  border-radius: 6px;
  min-width: 42px;
}

.bar-horizontal .bar-numbers {
  margin-left: -48px;
  width: 42px;
  background: transparent;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
}

.pie {
  border-radius: 100%;
  height: calc(var(--size, 48) * 1px);
  overflow: hidden;
  position: relative;
  width: calc(var(--size, 48) * 1px);
}

.pie__segment {
  --a: calc(var(--over50, 0) * -100%);
  --b: calc((1 + var(--over50, 0)) * 100%);
  --degrees: calc((var(--offset, 0) / 100) * 360);
  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  height: 100%;
  position: absolute;
  -webkit-transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
          transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  width: 100%;
  z-index: calc(1 + var(--over50));
}

.pie__segment:before {
  --degrees: calc((var(--value, 45) / 100) * 360);
  -webkit-transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
          transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}

.pie__segment:after {
  opacity: var(--over50, 0);
}

.pie__segment:after,
.pie__segment:before {
  background: var(--bg, #e74c3c);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}

.ebook-viewer {
  position: fixed;
  left: 230px;
  top: 80px;
  right: 0;
  bottom: 0;
  display: block;
  display: block;
  background-color: #111;
}

.ebook-viewer .ebook-view-page {
  position: absolute;
  top: 24px;
  bottom: 78px;
  left: 24px;
  right: 24px;
  border-radius: 6px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .ebook-viewer .ebook-view-page {
    top: 0px;
    left: 0px;
    right: 0px;
    border-radius: 0px;
  }
}

.ebook-viewer .ebook-view-nav {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ebook-viewer .frame_preview {
  border: 0px !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  overflow: hidden;
  background-color: #F3F5F7;
}

.ebook-viewer .frame_preview_ebook {
  border: 0px !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  overflow: hidden;
  background-color: #F3F5F7;
}

.ebook-viewer.ebook-viewer-full {
  left: 0;
}

@media screen and (max-width: 767px) {
  .ebook-viewer {
    left: 0;
    top: 139px;
  }
  .ebook-viewer.ebook-viewer-2 {
    top: 69px;
  }
  .ebook-viewer.ebook-viewer-80 {
    top: 80px;
  }
}

@media screen and (max-width: 400px) {
  .ebook-viewer {
    top: 129px;
  }
  .ebook-viewer.ebook-viewer-80 {
    top: 80px;
  }
}

.ebook-group-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -6px;
  margin-right: -6px;
}

.ebook-group-list input {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 999;
}

.ebook-group-list .ebook-item {
  width: 33.3333333333%;
  padding: 12px;
  position: relative;
}

.ebook-group-list .ebook-item .btn {
  opacity: 0;
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
}

.ebook-group-list .ebook-item:hover .btn {
  opacity: 1;
}

.ebook-group-list .ebook-view-item {
  display: block;
  width: 100%;
  padding-top: 136%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #ffffff;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
  border: 4px solid #ffffff;
  opacity: .7;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin: 0;
}

.ebook-group-list .ebook-view-item.checked {
  opacity: 1;
}

.ebook-group-list .ebook-view-item:hover {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .ebook-group-list .ebook-item {
    width: 50%;
  }
  .ebook-group-list .ebook-item .btn {
    opacity: 1;
  }
}

.popup-ebook {
  position: fixed;
  top: 0;
  left: 230px;
  right: 0;
  z-index: 9999;
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  bottom: 0;
}

.popup-ebook.show {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

@media screen and (max-width: 767px) {
  .popup-ebook {
    left: 0px;
  }
}

.popup-ebook.popup-ebook-full {
  left: 0;
}

@media screen and (max-width: 767px) {
  .view-ebook-full {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    bottom: 0;
  }
  .view-ebook-full .card-head-ebook {
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}

.head-emodul {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.head-emodul .btn, .head-emodul .btn.btnClosePage {
  position: absolute;
  top: 14px;
  right: 0;
}

.head-emodul .head-emodul-title {
  width: 70%;
  color: #ffffff;
}

.head-emodul .head-emodul-title .title {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 16px;
}

.head-emodul .head-emodul-title .student-list-emodul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}

.head-emodul .head-emodul-title .student-list-emodul .student-list-item {
  display: block;
  width: 40%;
  text-align: center;
  height: 26px;
  line-height: 26px;
  background: #333;
  border-radius: 4px;
}

@media screen and (max-width: 767px) {
  .head-emodul .head-emodul-title .student-list-emodul .student-list-item {
    width: 72%;
  }
}

.head-emodul .head-emodul-title .student-list-emodul .student-list-prev,
.head-emodul .head-emodul-title .student-list-emodul .student-list-next {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 24px;
  width: 24px;
  line-height: 24px;
  text-align: center;
  background-color: transparent;
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
}

.head-emodul .head-emodul-title .student-list-emodul .student-list-prev:hover,
.head-emodul .head-emodul-title .student-list-emodul .student-list-next:hover {
  background-color: #333;
}

.head-emodul .head-emodul-title .student-list-emodul .student-list-prev {
  margin-right: 8px;
}

.head-emodul .head-emodul-title .student-list-emodul .student-list-next {
  margin-left: 8px;
}

.card-ebook-viewer {
  height: 80px;
}

.card-ebook-viewer .card-block {
  height: 100%;
}

.bootstrap-tagsinput {
  line-height: 32px;
  width: 100%;
  font-size: 15px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.bootstrap-tagsinput input {
  width: 100%;
}

.bootstrap-tagsinput .label {
  background-color: #F0F2F5;
  color: #1B2A3D !important;
  text-transform: inherit !important;
}

.bootstrap-tagsinput .tag {
  padding: 6px;
  border-radius: 2px;
}

.xdsoft_datetimepicker .xdsoft_calendar {
  border: 1px solid #d4dde3 !important;
  border-radius: 7px;
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
  overflow: hidden;
}

.xdsoft_datetimepicker .xdsoft_calendar td {
  background: #F3F5F7;
  border-bottom: 1px solid #d4dde3 !important;
}

.xdsoft_datetimepicker .xdsoft_calendar tr:last-child td {
  border-bottom: 0px !important;
}

.xdsoft_datetimepicker .xdsoft_calendar th {
  color: #1B2A3D;
  background: #F3F5F7;
  border-bottom: 1px solid #d4dde3 !important;
}

.xdsoft_datetimepicker .xdsoft_calendar th:first-child {
  border-top-left-radius: 6px;
}

.xdsoft_datetimepicker .xdsoft_calendar th:last-child {
  border-top-right-radius: 6px;
}

.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th {
  border: 0px;
}

.xdsoft_datetimepicker {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans, sans-serif;
}

.xdsoft_datetimepicker {
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
  border: 1px solid #d4dde3;
  border-radius: 6px;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
  margin-top: 4px;
}

.xdsoft_time_box {
  border: 1px solid #d4dde3;
  border-radius: 6px;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
  background: #F3F5F7;
  border-color: #d4dde3;
  color: #1B2A3D;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: #0073e0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  background: #E5F0FF !important;
  color: #0073e0 !important;
}

.xdsoft_scrollbar {
  top: 1px;
  bottom: 1px;
  right: 1px;
  width: 4px;
}

.xdsoft_scrollbar > .xdsoft_scroller {
  background: #d4dde3;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
  border: 1px solid #d4dde3;
  border-radius: 6px;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
  background: #0073e0;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
  background: #E5F0FF;
  color: #0073e0;
}

.CodeMirror {
  border: 1px solid #d4dde3 !important;
  border-radius: 6px !important;
  height: 200px;
  min-height: auto;
  padding-top: 0;
  -webkit-transition: .2s all;
  transition: .2s all;
}

.CodeMirror.CodeMirror-focused {
  border-color: #0073e0 !important;
  height: 300px;
}

.CodeMirror-scroll {
  padding-top: 10px;
  height: 188px;
  min-height: auto;
  -webkit-transition: .2s all;
  transition: .2s all;
}

.CodeMirror-focused > .CodeMirror-scroll {
  height: 270px;
}

.CodeMirror-wrap pre {
  background: #ffffff;
}

span.CodeMirror-selectedtext {
  background: #ECE2FF;
}

.top-navigation {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  height: 90px;
  width: 100%;
  z-index: 999;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.top-navigation .top-navigation--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.top-navigation.top-navigation-scrolled, .top-navigation.top-navigation-default {
  height: 70px;
}

.welcome-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 640px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0073e0;
  position: relative;
  padding-top: 0;
  margin-top: 90px;
}

.welcome-banner:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 767px) {
  .welcome-banner .welcome-banner {
    height: 540px;
  }
}

.welcome-banner.welcome-banner-2 {
  height: 520px;
}

.welcome-banner.welcome-banner-2:before {
  display: none;
}

.sp-icon-list {
  width: 100px;
}

@media screen and (max-width: 767px) {
  .sp-icon-list .sp-icon-list {
    width: 80px;
  }
}

.content-on-fixed-nav {
  margin-top: 70px;
  min-height: calc(100vh - 120px);
}

.login-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100vh;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #efefef;
}

@media screen and (max-width: 767px) {
  .login-container {
    height: auto;
    padding: 16px;
  }
}

.login-card {
  width: 100%;
  max-width: 840px;
  height: 544px;
  background: #ffffff;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
  border-radius: 10px;
  display: block;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .login-card {
    height: auto;
  }
}

.login-card--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.login-card--inner .form-section {
  width: 42%;
}

.login-card--inner .slider-section {
  width: 58%;
}

@media screen and (max-width: 767px) {
  .login-card--inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .login-card--inner .form-section,
  .login-card--inner .slider-section {
    width: 100%;
  }
}

.form-section {
  padding: 24px;
  overflow-y: auto;
  height: 544px;
}

@media screen and (max-width: 767px) {
  .form-section {
    height: auto;
  }
}

.slider-section {
  position: relative;
  overflow: hidden;
}

.slider-section .slider-section--inner {
  background: #F3F5F7;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media screen and (max-width: 767px) {
  .slider-section {
    height: 400px;
  }
}

@media screen and (max-width: 500px) {
  .slider-section {
    height: 320px;
  }
}

.slider-item {
  width: 100%;
  height: 544px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #F3F5F7;
  padding: 24px;
  padding-bottom: 70px;
}

.slider-item:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 280px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.24)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 100%);
}

.slider-item .slider-caption {
  position: relative;
  z-index: 10;
  color: #ffffff;
  padding-right: 180px;
}

@media screen and (max-width: 767px) {
  .slider-item {
    height: 400px;
  }
  .slider-item .slider-caption {
    padding-right: 80px;
  }
}

@media screen and (max-width: 500px) {
  .slider-item {
    height: 320px;
  }
  .slider-item .slider-caption {
    padding-right: 80px;
  }
}

.welcome-login {
  font-size: 1.4rem;
  line-height: 1.3;
}

@media screen and (max-width: 767px) {
  .welcome-login {
    font-size: 2rem;
    line-height: 1.3;
  }
}

.form-logo {
  margin-bottom: 24px;
}

.form-input--wrap {
  background: #F3F5F7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px;
}

.form-input--wrap.email {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.form-input--wrap.password {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.form-input--wrap img, .form-input--wrap .fa-solid {
  margin-right: 8px;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20px;
}

.form-input--wrap .form-min {
  border: 0;
  -webkit-box-shadow: 0;
          box-shadow: 0;
  background: 0 0;
  font-size: 15px;
  display: block;
  width: 100%;
  height: 28px;
}

.form-input--wrap .form-min::-webkit-input-placeholder {
  color: #859BA6;
}

.form-input--wrap .form-min:-ms-input-placeholder {
  color: #859BA6;
}

.form-input--wrap .form-min::-ms-input-placeholder {
  color: #859BA6;
}

.form-input--wrap .form-min::placeholder {
  color: #859BA6;
}

.form-input--wrap .form-min:focus {
  border: 0;
  outline: none;
}

.glide-login .glide__bullets {
  left: 24px;
  bottom: 54px;
  -webkit-transform: none;
          transform: none;
}

.glide-login .glide__bullets .glide__bullet--active {
  background: #0073e0;
}

.btn-play-login {
  position: absolute;
  padding-top: 8px;
  padding-bottom: 8px;
  z-index: 20;
  bottom: 24px;
  right: 24px;
}

.btn-play-login .btn--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 500px) {
  .btn-play-login {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

#loader {
  height: auto;
  width: auto;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#loader.hide {
  display: none !important;
}

.thumbnail-new {
  padding: 1rem;
  border-radius: 6px;
  background: #fcfcfc;
  text-align: center;
  min-height: 200px;
  position: relative;
}

.thumbnail-new:before {
  text-align: center;
  content: 'Insert your cover image...';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  opacity: .4;
}

.thumbnail-new .img-thumbnail {
  padding: 0;
  border: 0;
  max-width: 50%;
}

.thumbnail-new-2 {
  min-height: inherit;
}

.thumbnail-new-2 .img-thumbnail {
  max-width: 80%;
}

.fe {
  display: inline-block;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.fe-md {
  font-size: 1.2rem;
}

.mCSB_scrollTools {
  z-index: 3;
}

.mCSB_container {
  width: 100% !important;
}

.s-dates {
  width: 100px;
}

@media screen and (max-width: 991px) {
  .s-dates {
    width: 100%;
  }
}

.storage-memory-size {
  width: 400px;
}

.label-top {
  position: relative;
}

.label-top:before {
  content: attr(data-label-top);
  position: absolute;
  top: -11px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 10px;
  color: #0073e0;
  font-weight: 400;
}

.slice {
  display: inline-block;
  height: 20px;
  width: 2px;
  border-radius: 2px;
  background: #859BA6;
  -webkit-transform: rotate(24deg) translateY(2px);
          transform: rotate(24deg) translateY(2px);
  margin-right: 6px;
  margin-left: 8px;
}

.mCSB_container_wrapper {
  margin-bottom: 0;
}

.mCSB_container_wrapper > .mCSB_container {
  padding-bottom: 0;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0;
}

.presensi-block-wali {
  width: 24px;
  text-align: center;
}

.btn-select-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: -8px;
  margin-right: -8px;
}

.btn-select-img .btn-select-img--item {
  width: 20%;
  border: 1px solid #d4dde3;
  background: #fcfcfc;
  border-radius: 6px;
  padding: 14px;
  outline: none;
  margin: 0px 8px;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  cursor: pointer;
}

.btn-select-img .btn-select-img--item img {
  display: block;
  width: 100%;
  border-radius: 50%;
}

.btn-select-img .btn-select-img--item:hover {
  background: #0073e0;
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
  border-color: #0073e0;
}

.btn-select-img .btn-select-img--item.photo-selected {
  background: #0073e0;
  border-color: #0073e0;
}

.block-my-class,
.block-my-class-sm,
.block-my-class-fa {
  position: relative;
}

.block-my-class .my-class-icon,
.block-my-class-sm .my-class-icon,
.block-my-class-fa .my-class-icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 18px;
  width: 62px;
}

.block-my-class .my-class-icon-2,
.block-my-class-sm .my-class-icon-2,
.block-my-class-fa .my-class-icon-2 {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 18px;
}

.block-my-class .my-class-content,
.block-my-class-sm .my-class-content,
.block-my-class-fa .my-class-content {
  padding-left: 84px;
}

.block-my-class-sm .my-class-icon {
  width: 36px;
}

.block-my-class-sm .my-class-content {
  padding-left: 64px;
}

.block-my-class-fa .my-class-content {
  padding-left: 46px;
}

#card_target_class .select2 {
  margin-top: 1rem !important;
}

.rak-buku {
  position: absolute;
  top: -24px;
  left: 60.4%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 380px;
}

.rak-buku .rak-buku--buku {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 126px;
  height: 172px;
  border-radius: 6px;
  background-color: #ffffff;
  margin-right: 12px;
  margin-bottom: 12px;
  -webkit-box-shadow: 4px 4px 4px rgba(18, 38, 63, 0.1);
          box-shadow: 4px 4px 4px rgba(18, 38, 63, 0.1);
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.rak-buku .rak-buku--buku:nth-child(1) {
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
}

.rak-buku .rak-buku--buku:nth-child(2) {
  -webkit-transform: translateY(12px);
          transform: translateY(12px);
}

.rak-buku .rak-buku--buku:nth-child(3) {
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
}

.rak-buku .rak-buku--buku:nth-child(4) {
  -webkit-transform: translateY(12px);
          transform: translateY(12px);
}

.card-rak-buku:hover .rak-buku--buku {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.swiper .swiper-btn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #1B2A3D;
  width: 54px;
  height: 54px;
  border-radius: 27px;
  color: #ffffff;
  border: 0px;
  z-index: 10;
  -webkit-box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
          box-shadow: 0 1px 2px rgba(18, 38, 63, 0.1);
}

.swiper .swiper-btn.swiper-button-disabled {
  opacity: 0;
}

.swiper .swiper-btn.swiper-btn-prev {
  left: 2.8rem;
}

.swiper .swiper-btn.swiper-btn-next {
  right: 2.8rem;
}

.swiper .swiper-btn:hover {
  -webkit-transform: translateY(-50%) scale(1.1);
          transform: translateY(-50%) scale(1.1);
}

.accord-block {
  display: block;
  width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
}

.accord-block button {
  background: transparent;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #1B2A3D;
  width: 100%;
  text-align: left;
}

.accord-block button:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.pulse-animate {
  -webkit-animation: pulse 1.4s infinite;
          animation: pulse 1.4s infinite;
}

@-webkit-keyframes ring-bell {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@keyframes ring-bell {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

.ring-bell-animate {
  -webkit-animation: ring-bell .8s infinite;
          animation: ring-bell .8s infinite;
}

@-webkit-keyframes ring-bell-2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  50% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  75% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@keyframes ring-bell-2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  50% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  75% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

.ring-bell-animate-2 {
  -webkit-animation: ring-bell-2 2s infinite;
          animation: ring-bell-2 2s infinite;
}

.block-login-separator {
  position: relative;
}

.block-login-separator span {
  background-color: #ffffff;
  position: relative;
  z-index: 10;
  padding: 2px 10px;
}

.block-login-separator:before {
  content: '';
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #d4dde3;
}

.illust-dash-1 {
  position: absolute;
  bottom: 0;
  width: 50%;
  right: 0;
}

@media screen and (max-width: 767px) {
  .info-journal-comment {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 20;
    background-color: #ffffff;
  }
}

.quiz-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  padding-left: 32px;
  background-color: #F3F5F7;
  z-index: 999999;
  overflow-y: auto;
}

@media screen and (max-width: 767px) {
  .quiz-fullscreen {
    padding: 18px;
  }
}

.simple-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
  border-right: 1px solid #d4dde3;
  width: 240px;
  z-index: 1029;
}

.simple-menu .main-menu-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 991px) {
  .simple-menu .simple-menu-inner {
    padding-top: 72px;
  }
}

.content-w-sidebar {
  position: relative;
  width: 100%;
  background: teal;
}

.content-w-sidebar .cws--menu-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  bottom: 0;
  background-color: #ffffff;
  border-right: 1px solid #d4dde3;
  overflow-y: auto;
}

.content-w-sidebar .cws--content {
  position: absolute;
  top: 0;
  right: 0;
  left: 240px;
  bottom: 0;
  background-color: #ffffff;
  overflow-y: auto;
}

.have-marquee .pcoded-content {
  padding-top: 36px !important;
}

.have-marquee .card-full-fixed,
.have-marquee .card-full-fixed-1,
.have-marquee .card-full-absolute,
.have-marquee .card-fixed-header,
.have-marquee .card-ebook .card-banner-ebook,
.have-marquee .card-pembelajaran--header,
.have-marquee .calendar-sidebar,
.have-marquee .card-page-banner,
.have-marquee .card-show-scroll,
.have-marquee .content-quiz-sidebar,
.have-marquee .content-dashboard-guru-sidebar,
.have-marquee .menu-dashboard-top {
  top: 36px !important;
}

.have-marquee .card-pembelajaran---content {
  top: 72px !important;
}

.have-marquee .card-notif {
  top: 46px !important;
}

.have-marquee .card-question-number {
  top: 159px !important;
}

.have-marquee .block-question-content {
  top: 162px !important;
}

.have-marquee .content-fixed-full.content-fixed-full-push-top-1 {
  top: 162px !important;
}

.have-marquee .table-th-sticky.table-th-sticky-1 th {
  top: 160px !important;
}

@media screen and (min-width: 768px) {
  .have-marquee .filterBlockScrolled.active {
    top: 106px !important;
  }
  .have-marquee .filterBlockScrolled.active.have-nav-tab {
    top: 158px !important;
  }
}

.have-marquee .top-content-floating {
  top: 56px !important;
}

.badges-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.badges-list .badges-item {
  display: block;
  width: 48px;
  height: 48px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-right: 8px;
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.badges-list .badges-item:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.balon-arrow-left,
.balon-arrow-right {
  position: relative;
}

.balon-arrow-left:before, .balon-arrow-left:after,
.balon-arrow-right:before,
.balon-arrow-right:after {
  content: '';
  position: absolute;
  height: 0px;
  width: 0px;
  top: 18px;
  border-bottom: solid 10px transparent;
  border-top: solid 10px transparent;
}

.balon-arrow-left:before {
  left: -10px;
  border-right: solid 10px #d4dde3;
}

.balon-arrow-left:after {
  left: -8.8px;
  border-right: solid 10px #ffffff;
}

.balon-arrow-right:before {
  right: -10px;
  border-left: solid 10px #d4dde3;
}

.balon-arrow-right:after {
  right: -8.8px;
  border-left: solid 10px #ffffff;
}

.balon-arrow-top,
.balon-arrow-bottom {
  position: relative;
}

.balon-arrow-top:before, .balon-arrow-top:after,
.balon-arrow-bottom:before,
.balon-arrow-bottom:after {
  content: '';
  position: absolute;
  height: 0px;
  width: 0px;
  border-right: solid 10px transparent;
  border-left: solid 10px transparent;
}

.balon-arrow-top:before, .balon-arrow-top:after {
  top: -10px;
}

.balon-arrow-top:before {
  top: -10px;
  border-bottom: solid 10px #d4dde3;
}

.balon-arrow-top:after {
  top: -8px;
  border-bottom: solid 10px #ffffff;
}

.balon-arrow-bottom:before, .balon-arrow-bottom:after {
  bottom: -10px;
}

.balon-arrow-bottom:before {
  bottom: -10px;
  border-top: solid 10px #d4dde3;
}

.balon-arrow-bottom:after {
  bottom: -8px;
  border-top: solid 10px #ffffff;
}

.stories-card .col-md-3:nth-child(1n+1) .balon-arrow-top,
.stories-card .col-md-3:nth-child(1n+1) .balon-arrow-bottom {
  background-color: #FFEBCC !important;
}

.stories-card .col-md-3:nth-child(1n+1) .balon-arrow-top:after {
  border-bottom-color: #FFEBCC;
}

.stories-card .col-md-3:nth-child(1n+1) .balon-arrow-bottom:after {
  border-top-color: #FFEBCC;
}

.stories-card .col-md-3:nth-child(1n+1) .icon-circle {
  color: #FFEBCC;
}

.stories-card .col-md-3:nth-child(2n+1) .balon-arrow-top,
.stories-card .col-md-3:nth-child(2n+1) .balon-arrow-bottom {
  background-color: #DBFFCC !important;
}

.stories-card .col-md-3:nth-child(2n+1) .balon-arrow-top:after {
  border-bottom-color: #DBFFCC;
}

.stories-card .col-md-3:nth-child(2n+1) .balon-arrow-bottom:after {
  border-top-color: #DBFFCC;
}

.stories-card .col-md-3:nth-child(2n+1) .icon-circle {
  color: #DBFFCC;
}

.stories-card .col-md-3:nth-child(3n+1) .balon-arrow-top,
.stories-card .col-md-3:nth-child(3n+1) .balon-arrow-bottom {
  background-color: #CCFFF5 !important;
}

.stories-card .col-md-3:nth-child(3n+1) .balon-arrow-top:after {
  border-bottom-color: #CCFFF5;
}

.stories-card .col-md-3:nth-child(3n+1) .balon-arrow-bottom:after {
  border-top-color: #CCFFF5;
}

.stories-card .col-md-3:nth-child(3n+1) .icon-circle {
  color: #CCFFF5;
}

.stories-card .col-md-3:nth-child(4n+1) .balon-arrow-top,
.stories-card .col-md-3:nth-child(4n+1) .balon-arrow-bottom {
  background-color: #CCD2FF !important;
}

.stories-card .col-md-3:nth-child(4n+1) .balon-arrow-top:after {
  border-bottom-color: #CCD2FF;
}

.stories-card .col-md-3:nth-child(4n+1) .balon-arrow-bottom:after {
  border-top-color: #CCD2FF;
}

.stories-card .col-md-3:nth-child(4n+1) .icon-circle {
  color: #CCD2FF;
}

.stories-card .col-md-3:nth-child(5n+1) .balon-arrow-top,
.stories-card .col-md-3:nth-child(5n+1) .balon-arrow-bottom {
  background-color: #F2CCFF !important;
}

.stories-card .col-md-3:nth-child(5n+1) .balon-arrow-top:after {
  border-bottom-color: #F2CCFF;
}

.stories-card .col-md-3:nth-child(5n+1) .balon-arrow-bottom:after {
  border-top-color: #F2CCFF;
}

.stories-card .col-md-3:nth-child(5n+1) .icon-circle {
  color: #F2CCFF;
}

.stories-card .col-md-3:nth-child(6n+1) .balon-arrow-top,
.stories-card .col-md-3:nth-child(6n+1) .balon-arrow-bottom {
  background-color: #FFCCE4 !important;
}

.stories-card .col-md-3:nth-child(6n+1) .balon-arrow-top:after {
  border-bottom-color: #FFCCE4;
}

.stories-card .col-md-3:nth-child(6n+1) .balon-arrow-bottom:after {
  border-top-color: #FFCCE4;
}

.stories-card .col-md-3:nth-child(6n+1) .icon-circle {
  color: #FFCCE4;
}

.stories-card .col-md-3:nth-child(7n+1) .balon-arrow-top,
.stories-card .col-md-3:nth-child(7n+1) .balon-arrow-bottom {
  background-color: #FFCCCC !important;
}

.stories-card .col-md-3:nth-child(7n+1) .balon-arrow-top:after {
  border-bottom-color: #FFCCCC;
}

.stories-card .col-md-3:nth-child(7n+1) .balon-arrow-bottom:after {
  border-top-color: #FFCCCC;
}

.stories-card .col-md-3:nth-child(7n+1) .icon-circle {
  color: #FFCCCC;
}

.stories-card .col-md-3:nth-child(8n+1) .balon-arrow-top,
.stories-card .col-md-3:nth-child(8n+1) .balon-arrow-bottom {
  background-color: #E9FFCC !important;
}

.stories-card .col-md-3:nth-child(8n+1) .balon-arrow-top:after {
  border-bottom-color: #E9FFCC;
}

.stories-card .col-md-3:nth-child(8n+1) .balon-arrow-bottom:after {
  border-top-color: #E9FFCC;
}

.stories-card .col-md-3:nth-child(8n+1) .icon-circle {
  color: #E9FFCC;
}

.stories-card .col-md-3:nth-child(9n+1) .balon-arrow-top,
.stories-card .col-md-3:nth-child(9n+1) .balon-arrow-bottom {
  background-color: #CCDFFF !important;
}

.stories-card .col-md-3:nth-child(9n+1) .balon-arrow-top:after {
  border-bottom-color: #CCDFFF;
}

.stories-card .col-md-3:nth-child(9n+1) .balon-arrow-bottom:after {
  border-top-color: #CCDFFF;
}

.stories-card .col-md-3:nth-child(9n+1) .icon-circle {
  color: #CCDFFF;
}

.stories-card .col-md-3 .card-img {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.stories-card .col-md-3:hover .card-img {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.chat-button {
  position: fixed;
  bottom: 1rem;
  left: calc(50% + 1rem);
  right: 1rem;
}

.block-chat:before {
  content: '';
  position: fixed;
  bottom: 0;
  left: calc(50% + 18px);
  right: 18px;
  height: 120px;
  background: rgb(243,245,247);
  background: linear-gradient(0deg, rgba(243,245,247,1) 50%, rgba(243,245,247,0) 100%);
  z-index: 1;
}

.block-chat-inner {
  padding-bottom: 90px;
}

.block-chat-p {
  min-height: 38px;
}

.block-chat-p p {
  margin-bottom: 0.5rem;
}

.block-chat-p p:last-child,
.block-chat-p ol:last-child,
.block-chat-p ul:last-child {
  margin-bottom: 0!important;
}

.block-chat-p ol,
.block-chat-p ul {
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}

.rounded-tl-none {
  border-top-left-radius: 0px!important;
}
.rounded-tr-none {
  border-top-right-radius: 0px!important;
}

/*# sourceMappingURL=new-styles.css.map */