input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.custom_scroll ::-webkit-scrollbar {
  background-color: transparent;
  border: none;
  width: 7px;
}
.bottomPadding{
  padding-bottom: 120px !important;
}
.custom_scroll ::-webkit-scrollbar-track {
  background-color: transparent; 
  border: none;
}
.speak_scroll ::-webkit-scrollbar {
  background-color: transparent;
  height: 0;
}

.speak_scroll ::-webkit-scrollbar-track {
  background-color: transparent; 
  border: none;
}
.speak_scroll .vertical_scroll::-webkit-scrollbar {
  height: 4px; 
}
/* .speak_scroll .vertical_scroll{
  margin-bottom: 12px;
} */
.speak_scroll .vertical_scroll::-webkit-scrollbar-thumb {
  background-color: transparent; 
  border-radius: 54px;
}
.speak_scroll .vertical_scroll::-webkit-scrollbar-thumb {
  background-color: #8a8a8a; 
}
.custom_scroll .scrollable_scroll::-webkit-scrollbar {
  width: 7px; 
}

.custom_scroll .scrollable_scroll::-webkit-scrollbar-thumb {
  background-color: transparent; 
  border-radius: 4px;
}

.custom_scroll .scrollable_scroll::-webkit-scrollbar-thumb {
  background-color: #8a8a8a; 
}
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
  background-color: transparent;
}
.input_badge {
  display: inline-block;
  margin-bottom: 0.1rem;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}
.b2c-fs-1{
  font-size: 26px;
}
.input_mb_1{
 margin-top: 0.1rem;
 margin-bottom: 0.1rem;
}
.select_mb_1{
  margin-bottom: 0.2rem;
}
.book_card{
  max-width: 211px !important;
  min-height: 324px !important;
}
.text-gray-light{
    color: rgba(96, 106, 113, 1)!important;
}
a {
 text-decoration: none !important;
}
.mps-0{
  padding-right: 1.7rem !important;
  padding-left: 1.7rem !important;
}
.b2c-head{
  padding-right: 1.7rem !important;
  padding-left: 1.7rem !important;
}
.icon_height{
  height: 60px;
}
.icon_width{
  width: 60px;
}
.b2c_ps_3{
  padding-left: 1rem !important;
}
.test-info{
  min-width: 640px;
  min-height: 500px;
  max-height: 500px;
}
.container-lg.container-max {
  max-width: 750px;
}
.w-20 {
  width: 17% !important;
}
.w-22 {
  width: 20% !important;
}
.containter-register{
  max-width: 900px !important;
  min-width: 900px !important;
}
.pg-content.rounded-3{
  border-radius: 2rem !important;
  position: relative;
}
.h-200{
   min-height: 500px !important;
}
.btn.rounded-6{
  border-radius: 2rem !important;
  display: inline;
}
.w-90{
  width: 97% ;
}
.arrow_rotate{
  transform: rotate(45deg)!important;
}
.sm-d-inline{
  display: inline !important;
}
@media (min-width: 768px)  {
  .rounded-svg {
    border-radius: 0rem!important;
    width: var(--rounded-svg-width) ;
    height: var(--rounded-svg-height);
  }
}
@media (max-width: 600px)  {
  .rounded-svg {
    border-radius: 0rem!important;
    width: 320px;
    height: 16px;
  }
}
@media (max-width: 700px) {
  .exercise_img {
    height: 400px !important;
  }
  .btn-width {
    width: 100% !important;
  }
  .search-field{
    width: 250px !important;
  }
  .d-search{
    display: inline-grid !important;
  }
  .mps-0{
    padding-left: 8px !important;
    padding-right: 22px !important;
    margin-bottom: 0.25rem!important;
  }
  .b2c-head{
    padding-left: 10px !important;
    padding-right: 15px !important;
  }
  .report-title {
    display: flex;
    justify-content: center;
    font-size: 22px !important;
  }
  .test-title {
    font-size: 22px !important;
  }
  .report-size{
    width: 50%;
    margin-top: 0.5rem;
  }
}
@media (max-width: 800px) {
  .mainpage{
    display: none !important;
  }
  .mobile-mainpage{
    display: flex !important;
  }
  .fsize-30{
    font-size: 30px !important;
    margin-bottom: 4%;
  }
  .main-lap{
    width: 80px !important;
    height: 80px !important;
  }
  .row-r-radius{
    border-radius: 0 0 11px 11px !important;
}
}
@media (min-width: 768px)  {
  .audio-size{
    width: 300px!important;
    height: 50px!important;
  }
  .saf-audio-size{
    width: 270px !important;
    height: 54px !important;
  }
}
@media (max-width: 500px)  {
  .dsk-display{
    display: none !important;
  }
  .b2c-txt-wrap{
    white-space: normal !important;
    padding-right: 3rem !important;
  }
  .mb-display{
      display: inline !important;
  }
  .sm-width{
    width: 100% !important;
  }
}
@media (max-width: 600px)  {
    .b2c-pading{
      padding-left: 5px !important;
    }
    .arrowe{
      padding-left: 5px !important;
    }
  .b2c-card {
    min-height: 135px !important;
    max-height: 135px !important;
  }
  .b2c-title-card {
    min-height: 116px !important;
    max-height: 116px !important;
    min-width: 134px !important;
    max-width: 134px !important;
  }
  .b2c-h-65 {
    height: 50px !important;
  }
  .b2c-h-37 {
    height: 37px !important;
  }
  .smpb-3 {
    padding-bottom: 1rem !important;
  }
  .upgrade-width{
    width: 100% !important;
  }
  .mpx-0{
    padding-left: 0rem!important;
    padding-right: 0rem!important;
  }
  .audio-size{
    width: 260px!important;
    height: 40px!important;
  }
  .mpx-1{
    padding-left: 0.4rem!important;
    padding-right: 0.6rem!important;
    margin-bottom: 0px !important;
  }
  .sm-d-inline{
    display: block !important;
  }
  .mobile-border{
    border-radius: 0rem!important;
    margin-left: 0rem!important;
  }
  .date-center{
    --bs-gutter-y: 0 ;
    --bs-gutter-x: 0 ;
  }
}
@media (min-width: 371px) and (max-width: 440px)  {
  .exercise_img {
      height: 250px  !important;
  }
  .testmodal_p{
    padding: 0.5rem !important;
  }
  .btn-fs-14{
    font-size: 14px;
  }
  .b2c-card {
    min-height: 125px !important;
    max-height: 125px !important;
  }
  .b2c-title-card {
    min-height: 100px !important;
    max-height: 100px !important;
    min-width: 115px !important;
    max-width: 115px !important;
  }
  .b2c-h-37 {
    height: 30px !important;
  }
  .icon_height{
    height: 40px;
  }
  .icon_width{
    width: 40px;
  }
  .active_modal_p{
    padding: 0.5rem !important;
  }
}
@media (max-width: 370px)  {
  .exercise_img {
    height: 200px !important;
  }
  .rounded-svg {
    border-radius: 0rem!important;
    width: 260px;
    height: 13px;
  }
  .testmodal_p{
    padding: 0.3rem !important;
  }
  .b2c-card {
    min-height: 121px !important;
    max-height: 121px !important;
  }
  .b2c-title-card {
    min-height: 85px !important;
    max-height: 85px !important;
    min-width: 98px !important;
    max-width: 98px !important;
  }
  .b2c-h-65 {
    height: 45px !important;
  }
  .b2c-h-37 {
    height: 30px !important;
  }
  .btn-fs-14{
    font-size: 14px;
  }
  .exercise-card-body{
    padding: 0.3rem 0.7rem !important; 
  }
  .icon_height{
    height: 40px;
  }
  .icon_width{
    width: 40px;
  }
  .active_modal_p{
    padding: 0.5rem !important;
  }
  .qmail-p-2{
    padding: 0.5rem !important;
  }
  .b2c-fs-1{
    font-size: 20px;
  }
}
@media (max-width: 360px)  {
  .audio-size{
    width: 245px!important;
    height: 40px!important;
    margin-left: -9px;
  }
  .b2c_ps_3{
    padding-left: 0.5rem !important;
  }
}
.modal{
  background: rgb(219, 219, 219, 0.3);
}
.table th{
  font-weight: 600;
}
.table.table-reverse td{
    border-top: 0;
    border-bottom: 1px solid #dee2e6;
}
.table.table-spacing{
  border-collapse: separate;
  border-spacing: 0 0.5em;
}
.table.table-spacing td{
  background-color: #fff;
}
.table.table-spacing td:first-child{
  border-radius: 10px 0 0 10px;
}
.table.test-table>tbody tr:last-child{
  border-color: white;
  border-radius: 10px; 
  overflow: hidden;
}
.table.test-table>:not(:last-child)>:last-child>*{
  border-bottom-color: rgba(228, 231, 236, 1);
  background-color: rgba(249, 250, 251, 1);
  border-top: 1px solid rgba(228, 231, 236, 1);
}
.table.t-table>:not(:last-child)>:last-child>*{
  border-bottom-color: rgba(228, 231, 236, 1);
  background-color: rgba(249, 250, 251, 1);
  border-top: none !important;
}
.border {
  border-radius: 10px; 
}
.table.test-table>thead {
  color: rgba(71, 84, 103, 1) !important;
}
.table.table-spacing td:last-child{
  border-radius: 0 10px 10px 0;
}
.print-color-show{
  -webkit-print-color-adjust: exact;
}
.pub-logo-height{
  max-height: 45px;
  max-width: 115px;
}
.fixed-height-table{
  max-height: 260px;
  overflow: auto;
}
.text-lg{
  font-size: 2rem;
}
.text-info{
  color:#807FB9 !important;
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #ffffff;
}
.form-select{
  background-image: url(../img/chevron-down.svg);
  background-size: 30px;
  background-color: #2f56a1 !important;
  color: #fff;
    border-color: #2f56a1;
}
.terms-service-text{
  font-size: 14px !important;
  color: rgba(96, 106, 113, 1) !important;
}
.custom-form-select{
  background-image: url(../img/chevron-down-blue.svg) !important;
  border: 1px solid #ced4da !important;



}
.custom-select-std{
  background-image: url(../img/black-arrow-down.png) !important;
  background-size: 13px !important;
  color: black !important;
  border: 1px solid #ced4da !important;
}
.timer-content {
  color: #2f56a1 ;
  border: 2px solid #2f56a1 ;
  border-radius: 5px;
  margin-right: 30px;
}
.max-with-200px{
  max-width: 200px !important;
  font-weight: bold !important;
}
.max-with-146px{
  max-width: 200px !important;
}
.form-select-alter{
  background-image: url(../img/chevron-down-blue.svg);
  background-size: 30px;
  background-color: #fff !important;
  color: #495057;
  border-color: #ced4da;
}
.btn-info, .btn-info:hover, .badge-info, .bg-info{
    background-color: #807FB9 !important;
    color: #fff;
    border-color: #807FB9;
}
.bg-late{
  background-color: rgba(171, 176, 228, 1) !important;
  color: #fff;
  border-color: rgba(171, 176, 228, 1);
}
.text-primary, .btn-link{
    color: #2f56a1 !important;
    text-decoration: none;
}
.btn-primary,  .badge-primary, .bg-primary,
.custom-control-input:checked ~ .custom-control-label::before{
    background-color: #2f56a1 !important;
    color: #fff !important;
    border-color: #2f56a1;
}
.btn-warning, .bg-admin-warning{
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    border-color: var(--background-color) !important;
}
.bg-warning{
    color: #000000 !important;
    border-color: #FFB61D !important;
    background-color: #FFB61D !important;
}
.text-admin{
  color: var(--background-color) !important;
}
.svg-fill-color {
  fill: var(--text-color) !important;
}
.svg-stroke-color{
  stroke: var(--text-color) !important;
}

.dropdown-item.active, .dropdown-item:active {
	color: #fff;
	text-decoration: none;
	background-color: black;
}
.dropdown-item:active .btn-link{
  color: #fff !important;;
}

.rating{
  position: relative;
  width: 58px;
  height: 40px;
  z-index: 0;
}
.rating-list{
  background-color: #e9ecef;
  border-radius: 0 0.5rem 0.5rem 0;
}
.rating .popover-body{
  padding: 0.5rem 1rem;
}
.rating .bs-popover-top > .popover-arrow{ left: 20px;}
.rating .bs-popover-top > .popover-arrow::after{
  border-top-color: #2f56a1;
}
.btn-pay{
  background-color: rgba(103, 121, 215, 1);
  color: white;
}
.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: black;
    text-align: center;
    height: 1.5em !important;
    opacity: 1;
    margin: 0.5rem auto;
    background: transparent;
}
.hr-text:before {
      content: '';
      /* background: rgba(228, 229, 229, 1) !important;  */
      background: linear-gradient(to right, transparent, #818078, transparent);
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
    }
.hr-text:after {
      content: 'Or sign up manually';
      position: relative;
      display: inline-block;
      color: black;

      padding: 0 .5em;
      line-height: 1.5em;
      color: black;
     font-style: italic;
      background-color: #fff;
    }
    .checkout-text {
      line-height: 1em;
      position: relative;
      outline: 0;
      border: 0;
      color: black;
      text-align: center;
      height: 1.5em !important;
      opacity: 1;
      margin: 0.5rem auto;
      background: transparent;
  }
  .checkout-text:before {
        content: '';
        /* background: rgba(228, 229, 229, 1) !important;  */
        background: linear-gradient(to right, transparent, #818078, transparent);
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
      }
  .checkout-text:after {
        content: 'Pay with stripe';
        position: relative;
        display: inline-block;
        color: black;

        padding: 0 1em;
        line-height: 1.5em;
        color: black;
       font-style: italic;
        background-color: #fff;
      }
.button-light{
  background-color: rgba(244, 246, 246, 1) !important;
}
.btn-text-muted{
  color: rgba(151, 151, 151, 1) !important;
}
/* custom inputtype file */
    .inputfile {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
    }
    .inputfile + label {
      font-size: 1.25em;
      font-weight: 400;
      color: white;
      background-color: #2f56a1;
      display: inline-block;
      cursor: pointer; /* "hand" cursor */
      width: 100%;
      padding: 0.5rem 1.5rem;
      border-radius: 0.3rem;
    }

    .inputfile:focus + label {
      outline: 1px dotted #fff;
      outline: -webkit-focus-ring-color auto 5px;
    }
    .inputfile + label * {
      pointer-events: none;
    }

    .inputfile:focus + label,
    .inputfile.has-focus + label,
    .inputfile + label:hover {
      background-color: #2f56a1;
    }


#searchmodule a.collapsed:after  {
  /* content: 'Show More +'; */
  content: "Show more \f077";  /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: FontAwesome;
}

#searchmodule a:not(.collapsed):after {
  /* content: 'Show Less -'; */
  content: "Show less \f078";  /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: FontAwesome;
}

.align-checkbox-label-left .form-check .form-check-input{float: right; margin-top: 5px;}
.form-check-input:checked{
  background-color: var(--background-color);
  border-color: var(--background-color);
}
.progress.text-secondary .progress-bar{
  color: #212529;
}
.progress.progress.progress-lg{
  overflow: visible;
  align-items: center;
}
.progress.progress-lg .progress-bar.bar-lg{
  height: 1.5rem;
  font-size: 1rem;
}
.bg-light-gray{
  background-color: #e9ecef;
}

.jumbotron{
  padding: 4rem 2rem;
  margin-bottom: 2rem;
  background-color: #F6F6F6;
  border-radius: .3rem;
}

.card-header{
  border-bottom: 1px solid #eee !important;
}
.border {
  border: 1px solid #eee !important;
}
.modal-md{
  max-width: 550px;
}

.bg-none{
  background: none !important;
}
.nav-tabs .nav-link{
  color: black;
}
.nav-tabs .nav-link.active{
  color: #2f56a1;
}

.sub-period-txt {
  cursor: pointer;
}
.fs-8 {
  font-size: 18px !important;
}
.lazy {
  background-image: none;
  background-color: #F1F1FA;
}
/* Toast Css Start */
#toast-container {
  position: fixed;
  z-index: auto;
  color: #fff;
}
.md-toast-top-right {
  top: 40px;
  right: 12px;
}
#toast-container>div {
  position: relative;
  width: 18.75rem;
  padding: 15px 15px 15px 50px;
  margin: 0 0 6px;
  overflow: hidden;
  filter: alpha(opacity=95);
  background-repeat: no-repeat;
  background-position: 15px center;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  opacity: .95;
}
.md-toast-success {
  background-color: #00c851;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==) !important;
}
.md-toast-warning {
  background-color: #fb3;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=) !important;
}
.md-toast-error {
  background-color: #ff3547;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=) !important;
}
.md-toast-info {
  background-color: #33b5e5;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=) !important;
}

.book_img_holder > img{
  visibility: hidden;
  height: 0px;
  width: 0px;
}
.book_img_holder{
  position: relative;
  overflow: hidden;
  height: 0px;
  padding-top: 150%;
  background-size: 101% 102%;
  border-radius: 10px;
  box-shadow: rgba(55, 56, 56, 0.2) 4px 6px 8px;
}
.book_img_holder:hover{
  box-shadow: 0.4rem 0.5rem 0.5rem 0 rgb(0 0 0 / 30%);
}
.book_short_desc p{
  margin-bottom: 0.5rem;
}

tr.hide-table-padding > td {
  padding: 0;
}

.expand-button {
	position: relative;
	background: #fff;
	color: #666;
  border: 1px solid #666;
	font-size: 1.5rem;
	font-weight: 900;
	width: 30px;
	height: 30px;
	border-radius: 30px;
	margin: 0 auto;
	line-height: 1.7rem;
  cursor: pointer;
}
.fw-900 {
  font-weight: 900;
}


.accordion-toggle .expand-button:after
{
  /* position: absolute;
  top: 50%;
  transform: translate(0, -50%); */
  content: '-';
}
.accordion-toggle.collapsed .expand-button:after
{
  content: '+';
}

.modal-backdrop {
  z-index: -1 !important;
  background: transparent;
}


.analytics-tab{
  border-style: solid;
  background: #2f56a1;
  height: fit-content;
  width: 100%;
  color: white;
  font-size: 1.25em;
  font-weight: 400;
  border-radius: 9px;
  margin-bottom:5%
}

.answer-area{
  border-style: none;
  height:300px
}

.submission-area-bottom{
  background-color: #fff;
  border-style: none;
  color:#A9A9A9;
}

.topic-area{
  border-color: #DCDCDC;
  border-radius: 10px;
  border-style: solid;
  margin-bottom: 2%;
}

.topic-text{
  font-weight: 400;
  padding:1% 0.5% 2% 2%;
}

.text-area-submission{
  border-color: #DCDCDC;
  padding: 1% 1% 1% 1%;
  border-radius: 10px;
  border-style: solid;
  margin-bottom: 1%;
}

.analytics-para{
  padding: 1% 1% 1% 1%;
}

.analytics-text{
  padding-top: 7%;
  padding-right: 5%;
}

.performace-badge{
  background: #2f56a1;
  color: white;
  font-size: 12px;
  padding: 7px;
  border-radius: 15px;

}

.student-performace-badge
{
  background: #2f56a1;
  font-size: 16px;
  display: inline-block;
  padding: .35em .65em;
  font-size: .75em;
  font-weight: 0;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
}
.performance-tab{
  border-style: solid;
  height: fit-content;
  width: 100%;
  color: white;
  font-size: 1.25em;
  font-weight: 400;
  border-radius: 9px;
  margin-bottom:5%
}
.complete-task-badge {
  background: #FBAE3E;
}
.new-badge {
  background: #EAF2FE;
}
.completed-badge {
  background: rgba(76, 169, 108, 0.8);
}
.essay-content{
  white-space:pre-wrap;
  word-wrap:break-word;
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0px;
  height:70px;
}
.preview-btn{
  border: 1px solid !important;
}
.w-40{
  width: 40% !important;
}
.mx-6 {
  margin-right: 6rem !important;
  margin-left: 6rem !important;
}
.semi-circle-width{
  width: 300px;
}
.performance-custom-badge{
  padding: .20em !important;
  font-size: 1em !important;
}
.performance_btn{
  border-radius: 5px !important;
}
.test_page_link {
  padding: 0.1rem 0.75rem !important
}
.performance-table-spacing{
 /* border-collapse: separate; */
 border-spacing: 0 4px;
}
.prfomance-table{
  border-collapse: separate;
  border-spacing: 0 0px;
 }
.project-tab {
  padding: 10%;
  margin-top: -8%;
}
.project-tab #tabs{
  background: #007b5e;
  color: #eee;
}
.project-tab #tabs h6.section-title{
  color: black;
}
.project-tab #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #2f56a1;
  background-color: transparent;
  border-color: transparent transparent #f3f3f3;
  border-bottom: 3px solid !important;
  font-size: 16px;
  font-weight: bold;
}
.project-tab .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  color: #7b8186;
  font-size: 16px;
  font-weight: 600;
}
.project-tab .nav-link:hover {
  border: none;
}
.project-tab thead{
  background: #f3f3f3;
  color: #333;
}
.project-tab a{
  text-decoration: none;
  color: black;
  font-weight: 600;
}
.box-shadow{
  -moz-box-shadow: 1px 2px 15px 0 rgb(0 0 0 / 8%);
  -webkit-box-shadow: 1px 2px 15px 0 rgb(0 0 0 / 8%);
  box-shadow: 1px 2px 15px 0 rgb(0 0 0 / 8%);
  padding: 10px !important;
  border-radius: 5px;
}
.tooltip-arrow{
  display: none !important;
}
.tooltip-inner {
  /* padding: 10px; */
  color: black;
  background-color: white;

  min-width: max-content !important;
  padding: 10px;
  box-shadow: 2px 2px 5px 2px #9e9e9e;
  opacity: 1 !important;
  border-radius: 10px;
}

.tooltip.show {
  opacity: 1;
}
.button_class {
  position: relative;
  bottom: 32px;
  right: -11px;
}
.image-wrapper {
  position: relative;
  max-width: 170px;
}

.image {
  display: block;
  width: 100%;
  height: 92px;
}
.pagination>li>a, .pagination>li>span {
  border : none;
  }
.test-pagination>li>a, .test-pagination>li>span {
  border : 1px solid #dee2e6 !important;
}
.overlay {
  bottom: 0;
  width: 100%;
  background: rgb(0, 0, 0);
  background: rgba(221, 219, 219, 0.75);
  transition: .5s ease;
  text-align: center;
  opacity: 1;
  position: absolute;
}
.preview_background{
  background: white;
}
.grammar_badge{
  background: lightgray;
}
.home_grammar_badge{
  background: rgba(249, 249, 249, 1);
  border: 1px solid rgba(205, 204, 204, 1);
}
.library_table{
  border-spacing: 0px 15px !important;
}
.turncate_text{
  max-width: 150px;
}
.test-pagination .page-item.active .page-link {
  color: #182230 !important;
  background-color: #D0D5DD !important;
  border-color: #D0D5DD !important;
  border-radius: 0px ;
  z-index: 0 !important;
}
.test-pagination .page-item .page-link {
  color: #182230 !important;
  border-color: #D0D5DD !important;
}
.test-pagination .page-item:first-child .page-link{
  border-top-left-radius: 0.6rem;
  border-bottom-left-radius: 0.6rem;
}
.test-pagination .page-item:last-child .page-link{
  border-top-right-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
}
.test-pagination .page-link {
  padding: 0.475rem 0.95rem !important;
}
.page-item.active .page-link {
  color: #000 !important;
  background-color: #FFB61D !important;
  border-color: #FFB61D !important;
  border-radius: 5px ;
  z-index: 0 !important;
}
.primary-page-item.active .page-link {
  color: #fff !important;
  background-color: #2E58D4  !important;
  border-color: #2E58D4  !important;
  border-radius: 5px;
  z-index: 0 !important;
}
.temp-page.active .page-link {
  color: black !important;
  background-color: white  !important;
  border: solid 1px lightgray !important;
  border-radius: 5px;
  z-index: 0 !important;
}
.custom-page-link{
  color : black !important;
}
/* .performance_btn{
  color: white !important;
} */
.edit_btn{
  margin-left: -75px;
  margin-top: 5px;
}
.bg-white{
  background-color: white !important ;
}
.bg-good{
  background-color: #02b56b;
}
.wrapper {
  margin: 0 auto;
  max-width: 300px;
}

.sami-chart {
  padding: 5px;
}

.chart-lable {
  text-align: center;
}
.dashboard-border-top {
  border-top: 1px solid #dee2e6!important;
  margin-left: 13px;
  width: 96%;
}
.bg-pink{
  background: #f88499 !important;
}
.student_view_disabled {
  pointer-events: none;
  cursor: default;
}
.visibilty-none{
  opacity: 0;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
}
.parent-box-shadow{
  -webkit-box-shadow: 1px 1px 4px 2px  rgb(0 0 0 / 13%);
  box-shadow: 1px 1px 4px 2px  rgb(0 0 0 / 13%);
  padding: 0px 10px ;
  border-radius: 5px;
}
.view-profile , .preview:hover{
  color: #ffffff !important;
}
.marginL-4rm{
  margin-left: 4rem!important;
}
.top-right {
  position: absolute;
  top: 5px;
  right: 7px;
}
.border-2{
  border: 2px solid #000000;
}
.circle{
  border-radius: 50%;
}
.A1{
  background-color: #ffca5c;
}
.A2{
  background-color: #f5b930;
}
.B1{
  background-color: #ffca5c;
}
.B2{
  background-color: #f5b930;
}
.C1{
  background-color: #ffca5c;
}
.C2{
  background-color: #f5b930;
}
.overlap {
  width: 45px;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  border: 2px solid black;
  display: inline-block;
  position: relative;
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2);
  -webkit-transition: .2s ease;
  transition: .2s ease;
}
.overlap:nth-child(n+2) {margin-left: -40px; }
.overlap-parent:hover .overlap:nth-child(n+2) {
   margin-left: -10px;
}

.tags-overlap {
  position: relative;
  -webkit-transition: .2s ease;
  transition: .2s ease;
}
.tags-width{
  width: 138px !important;
}
.temp-tags-width{
  width: 120px !important;
}
.tags-overlap:nth-child(n+2) {
  margin-top: -8px ;
}
.tags-overlap:nth-child(n+3) {
  display: none !important;
}
/* .tags-overlap-parent:hover .tags-overlap:nth-child(n+2) {
   margin-top: -40px;
} */

.overlap1 {
  width: 45px;
  align-items: center;
  text-align: center;
  border-radius: 0px;
  display: inline-block;
  position: relative;
  -webkit-transition: .2s ease;
  transition: .2s ease;
}
.overlap1:nth-child(n+2) {margin-left: -40px; }
.overlap1-parent:hover .overlap1:nth-child(n+2) {
   margin-left: -10px;
}
.filter-toogle[aria-expanded=false] .filter-expanded {
  display: none;
}
.filter-toogle[aria-expanded=true] .filter-collapsed {
  display: none;
}
.top-left {
  position: absolute;
  top: 0px;
  left: 7px;
}
#u-list{
  position:relative;
}
#summary-cont{
  display: inline-block;
  margin: 0 110px;
  position:relative;
  list-style-position: inside;
  border: 1px solid black;
  border-radius: 4px;
  box-shadow: 4px 4px 4px 2px rgba(82, 78, 78, 0.2);

}
.det-cls{
  width: 40px;
  height: 30px;
  border-radius: 4px;
  margin: 10px 5px 8px 5px;

}
.det1-cls{
  background-color: #F88379;
  width: 40px;
  height: 30px;
  border-radius: 4px;
  margin: 10px 5px 8px 5px;
}
.det2-cls{
  background-color: #6fbbd3;
  width: 40px;
  height: 30px;
  border-radius: 4px;
  margin: 10px 5px 8px 5px;
}
.det3-cls{
  background-color: #0047AB;
  width: 40px;
  height: 30px;
  border-radius: 4px;
  margin: 10px 5px 8px 5px;
}
.det-box-1{
  padding: 5px 5px 5px 5px;
}
.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 10px 5px 5px 15px;
}
.dot1 {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
}
.box1{
  background-color: #bbb;
  border-radius: 25%;
  display: inline-block;
  text-align: center;
}
.bg_completed{
  background-color: #bbb;
}
.det-table-data{
  margin: 5px 5px 5px 5px;
}
.detm-row{
  height: 130px;
}
.detn-row{
  margin: 20px 0px 0px 0px;
}

#HASH {
  display: flex;
  justify-content: space-between;
}
.progress{
 width: 100px;
 height: 8px;
 border-radius: 6px;
}
.before-prog{
  display: inline;

}
.prog-vals{
  display: inline-flex;
  align-items: center;
}
.val{
  margin-left: 8px;
}
.beta-label{
  font-size: 12px;
  padding: 2px 5px 2px 5px;
}
.arrowe{
  padding-left: 70px;
}
.spacer{
  width: 3%;
}
.mrg-req{
position:relative;
width: 65%;
margin-left: 17px;
}

.scoring-width{
  width: 70%;
}
.smmary-width{
  width: 27%;
}

.gram-card{
  width: 49%;
}
.voc-card{
  width: 49%;
  margin-left: 20px;
}
.rotate-arrow{
  transform: rotate(-90deg);
}
.page-link:hover {
   z-index: 0 !important;
   color: #0a58ca !important;
   background-color: white !important;
   border-color: white !important;
}
.pricing-btn:hover {
  text-decoration-line: underline;
}
.writing-tag{
  background-color: #6888ff !important;
}

.vocab-tag{
  background-color: #53ba77 !important;
}

.col-pad1{
  padding-right: 7rem;
}

.col-pad2{
  padding-right: 3rem;}
.pagination .page-link {
  padding: 0.1rem 0.75rem ;
}
.speaking-tag{
  background-color: #194e92 !important;
}

.inline-grid {
  display: inline-grid !important;
}
.inline-block {
  display: inline-block !important;
}
.wrapper {
background: white !important;
position: relative;
text-align: center;
width: max-content !important;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
background: white;
bottom: 100%;
display: block;
left: -20px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
border-radius: 10px;
pointer-events: none;
position: absolute;
width: max-content !important;
white-space: nowrap;
-webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
   -o-transform: translateY(10px);
    transform: translateY(10px);
-webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.tags_tooltip{
  padding: 10px !important;
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid white 10px;
content: " ";
height: 0;
position: absolute;
width: 0;
}

.wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
    transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
display: none;
}

.lte8 .wrapper:hover .tooltip {
display: block;
}

.ps-3_5{
  padding-left: 1.2rem;
}

.searchContent_checkboxes input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 12px;
  height:12px;
  background-color: transparent;
  border-color: grey !important;
  border-width: 1px !important;
  border-radius: 2px;
}
.CheckedTask {
  border-color: transparent !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-color: #FFB61D !important;;
}
.PrimaryCheckedTask {
  border-color: transparent !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-color: #2E58D4 !important;
}
.b2cCheckedTask {
  border-color: transparent !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-color: var(--background-color) !important;
}
.menu-container:hover .invisible-content {
  transition: all 1s ease;
  max-height: max-content;
}
.invisible-content{
  max-height: 0px;
  overflow: hidden;

}


.br{
  border-radius: 0.25rem!important;
}

.primary-border {
  border-color: #2f56a1;
}

.custom-dropdown-toggle::after {
  color: #2f56a1;
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.btn-light-custom-hover:hover {
  border-color: #2f56a1 !important;
}


.primary__badge__hover__effect:hover{
  background-color: white !important;
  color: #2f56a1 !important;
}
.custom_tooltip {
  position: relative;
  display: inline-block;
  /* width: 100% !important; */

}

.custom_tooltip .tooltip_content {
  visibility: hidden;
  background-color: white;
  box-shadow: 2px 2px 5px 2px #9e9e9e;
  width: max-content;
  white-space: nowrap;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.custom_tooltip .tag_tooltip_content {
  visibility: hidden;
  background-color: white;
  box-shadow: 2px 2px 5px 2px #9e9e9e;
  width: inherit;
  white-space: nowrap;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}
.custom_tooltip .tag_tooltip_content::after {
  display: None;
 }
 
 .custom_tooltip:hover .tag_tooltip_content {
   visibility: visible;
   opacity: 1;
 }
.tooltip-column-outside{
  left: 0% !important;
  margin-left: 0px  !important;
}
.student-tooltip-first{
  top: 10% !important;
}
.student-tooltip{
  top: auto !important;
  bottom: 125% !important;
}
.exercise-tooltip{
  left: 28% !important;
}

.custom_tooltip .tooltip_content::after {
 display: None;
}

.custom_tooltip:hover .tooltip_content {
  visibility: visible;
  opacity: 1;
}

.theme_tooltip {
  width: 185px !important;
  padding: 5px 7px !important;
  border-radius: 12px !important;
  top: -13px !important;
  margin-left: 14px !important;
  white-space: normal !important;
  text-align: start !important;
  font-size: 14px;
}
.appex__chart__annotation__label{
  font-weight: bold !important;
  font-family: 'Source Sans Pro', sans-serif !important ;
  font-size: 16px !important;

}

#SvgjsRect1092{
  stroke: none !important;
}
.tag__dot{
  height: 12px !important;
  width: 12px !important;
}
.tag__box{
  height: 20px !important;
  width: 20px !important;
}
.nav___hover:focus ,.nav___hover:hover{
border-color: white white #dee2e6 !important;
}
.border-none, .border-none.active{
border-bottom: white !important;
}
.no-border{
  border: 0px solid !important;
  }
.opacity-50{
  opacity: 0.50;
}


.hyperlink___text___overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown___content___width{
  width: 85%;
  height: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm_dropdown____width{
  width: 235px;
}
.dropdown____width{
  width: 280px;
}
.sm__dropdown____width{
  width: 170px;
}
.session_dropdown____width{
  width: 210px;
}
.session_sm__dropdown____width{
  width: 130px;
}
.group__dropdown____width{
  width: 140px;
}
.tag___overflow{
     width: 270px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.exercise__table__text{
    line-height: 1.4em !important;
    -webkit-line-clamp: 2 !important;
}

.custom__tooltip__innercontent{
  width: 100% !important;
  white-space: normal !important;
}
.card__tooltip__innercontent{
  width: 750% !important;
  white-space: normal !important;
}
.test___table___text{
  -webkit-line-clamp: 3 !important;
}
.image___max___width{
  max-width: 80%;
}
.bg-light-secondary{
 background: rgba(234, 234, 234, 1);
}
.text-light-grey{
  color: #d2d2d2;
}
.text-light-black{
  color: #1c1c1cba;
}
.disc-ribbon{
  margin-left: -50px;
  margin-top: -9px;
}
.price-ribbon{
  margin-left: 19rem;
  margin-top: -40px;
}

.disc-red{
  background-color: rgba(245, 47, 55, 1);
}
.border-primary {
  border-color: #2f56a1 !important;
}
.navbar-light .navbar-nav .nav-link.active{
  color: #000000 !important;
  border-bottom: 3px solid #ffc107;
  font-weight: 700 !important;
  height: 52px;
}

.help-pointer{
  cursor : help;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #000000 !important;
  background-color: #FFFFFF;
  font-weight: bold !important;
}
.nav-pills .chapter-link.active {
  color: #000000 !important;
  background-color: #ffc107 !important;
  font-weight: bold !important;
  margin-left: -5px;
  border-left: 5px solid #000000 !important;
  border-radius: 0 0.2rem 0.2rem 0 !important;
}
.chapter-border-end{
  border-right: 3px solid rgba(228, 229, 229, 1)!important;
}
.border-end-dark{
  border-right: 1px solid rgba(0, 0, 0, 1) !important;
}
.rounded-5 {
  border-radius: 0.5rem!important;
}
.table__border{
  -webkit-box-shadow:  0px 0px 2px 0px #000000;
  box-shadow:  0px 0px 2px 0px #000000;
  border-radius: 6px !important;
}
select:invalid { color: gray !important; }

.navbar-light .navbar-nav .nav-link {
  color: #000000 !important;
  font-weight: 600 !important;
  height: 52px;
}
.nav__parent {
  align-items: center;
  color: #d2d2d2;
  display: flex;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 0 10px;
  position: relative;
  white-space: nowrap;
}
.nav__child {
  color: #d2d2d2;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 34px;
}
.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #d2d2d2 solid;
  top: 14%;
  right: 0;
  height: 55%;
  margin-top: auto;
  margin-bottom: auto;
}
.homework-border {
  position: relative;
}

.homework-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #d2d2d2 solid;
  top: 20%;
  right: 0;
  height: 60%;
  margin-top: auto;
  margin-bottom: auto;
}
.py-7 {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.px-10 {
  padding-right: 6rem;
  padding-left: 6rem;
}
.border_top_10px{
  border-radius: 10px 10px 0 0;
}
.feedback-beta-label{
  background-color: #2E58D4;
  color: white;
  font-size: 12px;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  border-radius: 1.5rem;
}
.absolute-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}
@media (min-width: 1000px) {
  .bottom-absolute {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
  }
}



.form-select-bold::-webkit-calendar-picker-indicator {
  /* Hide the default dropdown arrow */
  display: none !important;
}
.z-index-0{
  z-index: 0 !important;
}
.top-0:after{
  top: 0 !important;
}
.h-65:after{
  height: 65% !important;
}
.exercise-bg-grammer{
  background-color: rgba(224, 111, 200, 0.2);
}
.exercise-bg-writing{
  background-color: rgba(75, 139, 247, 0.2);
}
.exercise-bg-reading{
  background-color: rgba(115, 121, 185, 0.2);
}
.exercise-bg-listening{
  background-color: rgba(115, 221, 210, 0.2);
}
.exercise-bg-pronunciation{
  background-color: rgba(35, 47, 44, 0.2);
}
.exercise-bg-vocab{
  background-color: rgba(255, 224, 204, 1);
}
.border-bg-grammer{
  border-color: rgba(235, 178, 226, 1) !important;
}
.border-bg-writing{
  border-color: rgba(199, 215, 254, 1) !important;
}
.border-bg-reading{
  border-color: rgba(107, 117, 184, 1) !important;
}
.border-bg-listening{
  border-color: rgba(176, 207, 203, 1) !important;
}
.border-bg-vocab{
  border-color: rgba(255, 167, 118, 1) !important;
}

.topleft {
  position: absolute;
  top: -10px;
  left: -6px;

}

.topleft_backdround{
  background-color: white;
  border-radius: 50%;
  border: 1px solid black
}

.p-05 {
  padding: 0.05rem!important;
}
.border-dark{
  border: 1px solid black;
}
.f-500{
  font-weight: 500 !important;
}
.ps-exercise-6 {
  padding-left: 2.2rem!important;
}
.fs-sm-12{
  font-size: 12px;
}
.badge.even-larger-badge {
  margin-top: 5px !important;
  font-size: 1.02em !important;
  font-weight: normal !important;
}
.badge.rounded-border {
  border-radius: 7px;
}
.publisher__table__text {
  line-height: 1.4em !important;
  -webkit-line-clamp: 1 !important;
}
.height-16{
  height: 1.5em !important;
  width: 48px !important;
}

.feedback-beta-label:hover + .beta-label-text {
  display: block !important;
}

.beta-label-text{
  display: none !important;
  position: absolute !important;
  background: white !important;
  padding: 5px !important;
  left: 100px !important;
  z-index: 100 !important;
  width: fit-content !important;
  border-radius: 10px !important;
}

.publisher_name_text {
  font-size: 14px !important;
}
.fs-14 {
  font-size: 14px;
}
.tags__overflow{
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-outline-success{
  color: #000000;
  border-color: #198754;
}
.ribbon {
  font-size: 15px;
  width: 112px;
  height: 20px;
  font-weight: 600;
  color: white;
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 46px;
  right: -38px;
  border-radius: 0.3rem 0.3rem 0% 0%;
  -webkit-transform: rotate(90deg);
}
.new-ribbon {
  font-size: 15px;
  height: 20px;
  font-weight: 600;
  color: white;
  z-index: 0;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2rem;
}
.indicator {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: white;
  display: inline-block;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
}
.premium-ribbon{
  background: #e82!important;
}
.free-ribbon {
  background: #53ba77!important;
}
button.collapsed .num{
  cursor: pointer;
  display: inline-block;
  background: #d2d2d2;
  min-width: 43px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
  padding: 3px 9px;
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  line-height: 2.3rem;
}
.num{
    cursor: pointer;
    display: inline-block;
    background: #2f56a1;
    min-width: 43px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    padding: 3px 9px;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    line-height: 2.3rem;
  }
  button.collapsed .icon-up{
    display: none;
  }
  button.btn-link .icon-down{
    display: none;
  }
  button.collapsed .icon-down{
    display: inline;
  }
.nested-obj{
  background-color: #2f56a1;
  width: 30px;
  height: 31px;
  padding-left: 0px;
  padding-right: 0px;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  color: #fff;
  font-weight: 500;
  display: inline-block;
  border-radius: 50%;
}

.border-sub{
  border-color: #ced4da !important;
  padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    font-size: .875rem;
}
.btn-warning-hover:hover{
  background-color: #000 !important;
  color: #FFB61D !important;
  border-color: #FFB61D;
}
.btn-primary-hover:hover{
  background-color: #f8f9fa !important;
  border-color: #2f56a1 !important;
  color: #2f56a1 !important;
}
.btn-light-hover:hover{
  background-color: #2f56a1 !important;
  color: #f8f9fa !important;
}

.sm-result-score{
  display: none;
}
.lg-result-score{
  display: inline-grid;
}
.lg-contact{
  display: inline-grid;
}

.bg-tab{
  background: rgba(232, 237, 244, 1);
  border-radius: 0 0 6px 6px !important;
}
.resize-none{
  resize: none;
}

.resizeContainer .resize {
  resize: none !important;
}

.test-report{
  max-width: 924px;
  padding-right: var(--bs-gutter-x,.75rem);
  padding-left: var(--bs-gutter-x,.75rem);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width:700px) {
.fly-report{
  max-width: 924px;
  padding-right: var(--bs-gutter-x,.75rem);
  padding-left: var(--bs-gutter-x,.75rem);
  margin-right: auto;
  margin-left: auto;
}
.bg-test{
  background: #F9FBFC !important;
}
}
.text-sm-align {
  text-align: right !important;
}
.search-width{
  width: 300px;
}
@media (max-width:800px) {
.main-btn-width{
  width: 100%;
}
.search-width{
  width: 100% ;
}
.spt-3 {
  padding-top: 1rem !important;
}
.spy-3 {
  padding-top: 1rem!important;
  padding-bottom: 1rem!important;
}
.xs-px-2 {
  padding-right: 0.5rem!important;
  padding-left: 0.5rem!important;
}
.text-sm-align {
  text-align: left !important;
}
.lg-contact{
  display: none;
}
.sm-px-1{
  padding-right: 0.25rem!important;
  padding-left: 0.25rem!important;
}
/* .w-90{
  width: auto !important;
} */
.sm-me-1{
 margin-right: 0.25rem !important;;
}
.st-display{
  display: none !important;
}
.lg-display{
  display: none !important;
}
.sm-display{
  display: block !important;
}
.gradingly-border:after {
  height: 210px !important;
}
.borderbottomdot {
  margin: 195px 0px 0px 18px !important;
}
.f-pe-0{
 padding-right: 0px !important;
}
}
.sm-me-1{
  margin-right: 1rem!important;;
 }
.lg-display{
  display: block;
}
.st-display{
  display: table-cell;
}
.sm-display{
  display: none;
}
@media (max-width:700px) {
.fly-report{
  padding-right: 0;
  padding-left: 0 ;
  padding-top: 0 !important;
}
.sm-result-score{
  display: flex !important;
}
.lg-result-score{
  display: none !important;
}
.h-p-0{
  padding-right: 0!important;
  padding-left: 0!important;
}
.wr-p{
  padding-left: 0.25rem !important ;
}
  .test-report .px-4 {
  padding-right: 1rem!important;
  padding-left: 1rem!important;
}
.fly-report .px-4 {
  padding-right: 0rem!important;
  padding-left: 0rem!important;
}
.not-show-breadcrumb{
  display: none;
}
}
.test-border {
  position: relative;
}
.test-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #d2d2d2 solid;
  top: 28%;
  right: 0;
  height: 45%;
  margin-top: auto;
  margin-bottom: auto;
}
.dashboard-border {
  position: relative;
}
.dashboard-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #d2d2d2 solid;
  top: 28%;
  right: 0;
  height: 60%;
  margin-top: auto;
  margin-bottom: auto;
}
.btn-padding{
  padding: 10px 54.82px !important;
}
.btn-sign-up-padding{
    padding: 10px 50.5px !important;
}
.btn-radius{
  border-radius: 0.7rem !important;
}
.exercise-height{
  min-height: 112px!important;
}
.exercise-transparency{
  opacity: 0.7;
}
.chapter_toggler{
    background-color: transparent;
    border: 1px solid transparent;
}
.chapter_toggler:focus {
  text-decoration: none;
  outline: 0;
}
.pre_a1{
  background-color: #d2d2d2;
  border-radius: 5px 0 0 0;
}
.first_point{
  border-radius: 0 0 0 5px !important;
}
.last_point{
  border-radius: 0 0 5px 0 !important;
}
.a2{
  background-color: #ABB0E4;
}
.b1{
  background-color: #7379B9;
}
.b1{
  background-color: #7379B9;
}
.b1{
  background-color: #FFE3A3;
}
.b2{
  background-color: #FAC63C;
}
.c1{
  background-color: #BBE09E;
}
.c2{
  background-color: #499E69;
}
.c2_border_radius{
  border-radius: 0 5px 0 0;
}
.text-ldark{
  color: rgba(74, 85, 103, 1) !important;
}
.temp-card {
  border-radius: 1rem;
  position: relative;
  min-height: 230px;
  max-height: 230px;
  border: 2px #2E58D4 solid !important;
  background-color: white !important;
}
.exercise-card {
  border: 1px solid #d7d7d7!important;
  border-radius: 0.5rem;
  position: relative;
  min-height: 196px;
  max-height: 196px;
}
.test-card {
  border: 1px solid #d7d7d7!important;
  border-radius: 0.5rem;
  position: relative;
  min-height: 196px;
  max-height: 196px;
}
.report-test-card{
  z-index: 0;
  border: none;
  border-radius: 0.5rem;
  position: relative;
  background-color: white;
  min-height: 130px;
  max-height: 130px;
  min-width: 150px;
  max-width: 150px;
  background-size: cover;
}
.test-title-card{
  z-index: 0;
  border: none;
  border-radius: 0.5rem;
  position: relative;
  background-color: white;
  min-height: 173px;
  max-height: 173px;
  min-width: 200px;
  max-width: 200px;
  background-size: cover;
}
.b2c-card {
  border: 1px solid #d7d7d7!important;
  border-radius: 0.5rem;
  position: relative;
  min-height: 140px;
  max-height: 140px;
}
.b2c-sub-card {
  border: 1px solid #d7d7d7!important;
  border-radius: 0.5rem;
  position: relative;
  /* min-height: 152px; */
  max-height: 155px;
}
.b2c-title-card{
  z-index: 0;
  border: none;
  border-radius: 0.5rem;
  position: relative;
  background-color: white;
  min-height: 105px;
  max-height: 105px;
  min-width: 122px;
  max-width: 122px;
  background-size: cover;
}
.exercise-card-header {
  padding: 0.3rem 1rem;
  height: 50px !important;
  margin-bottom: 0;
  border-radius: 0.3rem 0.3rem 0rem 0rem;
}
.exercise-card-body {
  flex: 1 1 auto;
  padding: 0.3rem 1rem;
}
.exercise-indicator{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5rem;
  background-color: white;
  display: inline-block;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
}
.heart-svg{
  margin-left: -10px;
  margin-top: 1px;
}
.card-h-35{
  height: 35px !important;
}
.card-h-45{
  height: 48px !important;
}
.card-h-75{
  height: 70px !important;
}
.card-h-25{
  height: 30px !important;
}
.b2c-h-65{
  height: 54px;
}
.b2c-h-37{
  height: 37px ;
}
.card-h-40{
  height: 40px !important;
}
.student-custom-border:after {
  content: " ";
  position: absolute;
  border-left: 2px #E4E5E5 solid;
  top: 15%;
  right: 56px;
  height: 80%;
  margin-top: auto;
  margin-bottom: auto;
}
.register-custom-border:after {
  content: " ";
  position: absolute;
  border-left: 2px #E4E5E5 solid;
  top: 8%;
  right: 56px;
  height: 90%;
  margin-top: auto;
  margin-bottom: auto;

}
.test-register-border:after {
  top: 12% !important;
  right: 45px !important;
  height: 84% !important;
}
.w-95 {
  width: 95px !important;
}
.checkout-custom-border:after {
  content: " ";
  position: absolute;
  border-left: 2px #E4E5E5 solid;
  top: 8%;
  right: 17px;
  height: 90%;
  margin-top: auto;
  margin-bottom: auto;

}
.student-bottom-border {
  content: " ";
  position: absolute;
  border-bottom: 3px #E4E5E5 solid;
  align-content: center;
  right: 22%;
  width: 60%;
  top: 35%;
  margin-top: auto;
  margin-bottom: auto;
}
.bg-disable:disabled{
  background-color: #e9ecef !important;
  color: black;
}
.bg-writing-report{
  background: rgba(75, 139, 247, 0.2);
}
.bg-dashboard{
  background: rgba(243, 245, 249, 1);
}
.writing-report-label{
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 25px;
}
.writing-report-heading{
  font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 25px;

color: #212529!important;
}
.words-count{
  color: #656565;
}
.writing-report-custom-border {
  position: relative;
}

.writing-report-custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #d2d2d2 solid;
  right: 50px;
  height: 100%;
  margin-top: auto;
  margin-bottom: auto;
}
.custom-selection .select2-container .select2-selection--single {
  height: 38px ;
}

.custom-selection .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 35px;
  width: 100%;
}

.sub_selection .select2-container .select2-selection--single {
  height: 31px ;
}
.timezone-modal .select2-container {
  width: 100% !important;
}
.timezone-modal .select2-container .select2-selection--single {
  height: 31px ;
  width: 100%;
}
.timezone-modal .select2-container .select2-selection__arrow {
  background-image: url(../img/chevron-down-blue.svg);
  background-size: 25px 25px;
  height: 25px;
  top: 3px;
  right: 10px;
  width: 25px;
}
.timezone-modal .form-select-alter{
  background-size: 24px;
}
.timezone-modal .iti--show-flags .form-select-alter{
  padding-left: 2.5rem !important;
}
.timezone-modal .iti__flag-container .iti__arrow{
display: none !important;
}
.timezone-modal .select2-container .select2-selection__arrow b {
border-style: unset;
}
.select-modal .select2-container .select2-selection--single {
  height: 31px ;
  width: 283px;
}

.select2-container--default.select2-container--disabled .select2-selection--single{
  background-color: #e9ecef !important;
  color: black;
  border: 1px solid #ced4da;
}
.select2-container--default .select2-selection--single {
  border: 1px solid #ced4da;
}

select:invalid,
select option[value=""] {
  color: #999999;
}
.auth-container{
  max-width: 900px;
  min-width: 900px;
}
.bg-basic{
  background-color: rgba(76, 169, 108, 0.05);
}
.bg-premium{
  background-color: rgba(251, 174, 62, 0.06);
}
.bg-org-code{
  background-color: rgba(249, 251, 252, 1);
}
.p-m-10{
  margin-top: -10px;
}
.testimg-display{
  display: none;
}
.col-test-7 {
  flex: 0 0 auto;
  width: 100%;
}
.testmodal_p{
  padding: 1rem;
}
.test_row_p{
  padding: 0rem;
}
@media (min-width:900px){
   .wait_padding{
     padding-left: 4rem !important;
     padding-right: 4rem !important;
   }
   .signup-modal-lg{
     max-width: 850px;
     min-width: 850px;
   }
   .payment-modal-lg{
    max-width: 900px;
    min-width: 900px;
  }
  .b2c_payment.payment-modal-lg{
    max-width: 1300px;
    min-width: 900px;
  }
  .access-code-modal-lg{
    max-width: 600px;
    min-width: 600px;
  }
  .subscription-modal-lg{
    max-width: 650px;
    min-width: 650px;
  }
  .testimg-display{
    display: block;
  }
  .col-test-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .testmodal_p{
    padding: 1rem 1.5rem !important;
  }
  .test_row_p{
    padding: 1rem 5rem;
  }
}
.auth-heading{
  font-family: Source Sans Pro;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 30px;
letter-spacing: 0em;
text-align: left;

}
.auth-border{
  border-bottom: 3px solid #194E92;
}
.px-4-5 {
  min-width: 123px;
  min-height: 29px;
}
.bg-grey{
  background-color: #D3D5D5;
}
.mt-5_7 {
  margin-top: 2.3rem!important;
}
.mt-3_3{
  margin-top: 2rem!important;
}
.test-label{
  background-color: #d3dce8;
}
.text-break-space{
  white-space: break-spaces;
}
.bg-dot-reading{
  background-color: rgba(115, 121, 185, 1) !important;
}
.bg-dot-writing{
  background-color: rgba(75, 139, 247, 1) !important;
}
.bg-dot-grammar{
  background-color: rgba(224, 111, 200, 1) !important;
}
.bg-dot-pronounciation{
  background-color: rgba(4, 85, 66, 1) !important;
}
.bg-dot-listening{
  background-color: rgba(115, 221, 210, 1) !important;
}
.bg-dot-vocab{
  background-color: rgba(255, 123, 23, 1) !important;
}
.pb-01{
  padding-bottom: 0.1rem !important;
}
.chart-bottom-border{
  margin-top: -18px;
}
.border-bottom-dark{
  border-bottom: 1px solid black !important;
}
.home-border-light{
  border-bottom: 1px solid rgba(228, 229, 229, 1);
}
.register-btn{
    width: 94px;
    height: 29px;
}
.email-btn{
  width: 127px !important;
  border-radius: 0.25rem 0rem 0rem 0.25rem !important;
}
.username-btn{
  width: 127px !important;
  border-radius: 0rem 0.25rem 0.25rem 0rem !important;
  margin-left: -3px;
}
.email-disabled-btn{
  border: 1px solid rgba(199, 199, 199, 1) !important;
  border-right: none !important;
  color: rgba(96, 106, 113, 1) !important;
}
.username-disabled-btn{
  border: 1px solid rgba(199, 199, 199, 1) !important;
  border-left: none !important;
  color: rgba(96, 106, 113, 1) !important;
}
.test-filter-label{
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

.nav-dropdown .dropdown-menu .dropdown-item .text{
  width: calc(100% - 45px);
}
.nav-dropdown .dropdown-menu .dropdown-item{
  white-space: normal;
  width: 600px ;
}
.nav-lap{
  width: 55px;
  height: 53px;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%);
  -webkit-transition: .2s ease;
  transition: .2s ease;
}
.main-lap{
  width: 100px;
  height: 100px;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%);
  -webkit-transition: .2s ease;
  transition: .2s ease;
}
.report-rounded-header{
  border-radius: 0.5rem 0.5rem 0 0;
}
.report-rounded-footer{
  border-radius: 0 0 0.5rem 0.5rem;
}
.fw-650{
  font-weight: 650;
}
.show-error{
  min-height: 72px !important;
}
.password-error{
  min-height: 95px !important;
}
.show-email-error{
  min-height: 25px !important;
}
.book-h-40{
  min-height: 27rem !important;
}
.exercise-scroll{
  max-height: 26rem !important;
  overflow-y: auto;
  overflow-x: hidden;
}
.classroom-scroll{
  max-height: 19rem !important;
  overflow-y: auto;
  overflow-x: hidden;
}
.book-scroll{
  min-height: 172px;
  max-height: 172px;
  overflow-y: auto;
}
.bg-assessment{
  background-color: rgba(76, 169, 108, 1) !important;
  color: #fff !important;
  border-color: rgba(76, 169, 108, 1);
}
.bg-exercises{
  background-color: rgba(255, 182, 29, 1) !important;
  color: #fff !important;
  border-color: rgba(255, 182, 29, 1);
}
.bg-collections{
  background-color: rgba(139, 146, 210, 1) !important;
  color: #fff !important;
  border-color: rgba(139, 146, 210, 1);
}
.bg-saved-content{
  background-color: rgba(96, 106, 113, 1) !important;
  color: #fff !important;
  border-color: rgba(96, 106, 113, 1);
}

.hidden {
  display: none;
}

#button-text:disabled {
  opacity: 0.5;
  cursor: default;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}
.spinner:before {
  width: 10.4px;
  background: #5469d4;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #5469d4;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.print-task{
  display: none;
}
@media print {
  @page {
    size: A4;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  body {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .page-break {
    clear: both;
    page-break-after: avoid;
  }
  .print-page-break {
    page-break-before: auto;
    page-break-after: auto ; 
    page-break-inside: avoid;
    display: block;
  }
  footer {
    position: fixed;
    bottom: 0;
  }


  html, body {
    width: 208mm;
    height: 267mm;
  }
  .ms-2{
    margin-left: 0px !important;
  }
  .ps-3{
    padding-left: 0px !important;
  }
  .print-label{
    text-align: center !important;
  }
  .print-task{
    display: contents !important;
  }
}

.yellow-highlight{
  background: linear-gradient(to top,#ffc107 40%,transparent 40%) !important;
  color: #000000 !important;
}
@media (min-width:1650px) {
  .rm-57{
    margin-left: 50rem;
    white-space: nowrap;
  }
}
@media (min-width:1400px)  and (max-width:1600px) {
  .rm-57{
    margin-left: 38rem;
    white-space: nowrap;
  }
}
.text-grey-light{
    color: rgba(84, 89, 95, 0.79);
}
.copy-right{
    color: #7a7a7a;
    font-size: 12px;
    font-weight: 300;
}
.search-field{
  border: 1px solid lightgray;
  width: 600px;
  height: 45px;
}
.h-45 {
  height: 45px
}
.d-search{
  display: flex;
}
.payment-card{
  height: 19.5rem !important;
}
.report-pay-card{
  height: 18.5rem !important;
}
.mainpage{
  display: flex;
}
.mobile-mainpage{
  display: none;
}
.secondary-hero{
  font-size: 1.375rem !important;
  line-height: 2rem;
  letter-spacing: 0.02rem;
  font-weight: 500;
  text-align: center;
}
.sec-h-width{
  width: 600px;
}
.header-width{
  width: 750px;
}
.border-bottom-main{
  border-bottom: 1px solid #c7c3c3 ;
 }
.cc-window.cc-banner{
  padding: 0.6em 1.8em !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}
.card-banner{
  width: 650px !important;
  height: 48px;
  border-radius: 10px;
}
.card-banner-assignment{
  width: 810px !important;
  height: 48px;
  border-radius: 10px;
}
.card-banner-assessment{
  width: 500px !important;
  height: 48px;
  border-radius: 10px;
}
.select-counter{
  border-radius: 10px 0px 0px 10px;
}
.handlebar-position{
  position: fixed;
  bottom: 65px;
  justify-content: center;
  z-index: 1000;
  background: white;
}
.disable-link{
  pointer-events: none;
  opacity: 0.7;
}
.disable-confirmation-link{
  pointer-events: none;
  opacity: 0.5;
}
.assessment-label{
  display: block;
  line-height: 1.2em;
}
.bg-test-sky{
  background-color: #DBE8FD;
  color: #000;
  border-color: #DBE8FD;
}
.bg-test-skin{
  background-color: #FBEFCC;
  color: #000;
  border-color: #FBEFCC;
}
.bg-test-purple{
  background-color: #DFE4FE;
  color: #000;
  border-color: #DFE4FE;
}
.bg-test-green{
  background-color: #DAEFE3;
  color: #000;
  border-color: #DAEFE3;
}
.btn-learn-sky{
  background-color: #194E92;
  color: #fff !important;
  border-color: #194E92;
}
.btn-learn-skin{
  background-color: #F08E00;
  color: #fff !important;
  border-color: #F08E00;
}
.btn-learn-purple{
  background-color: #555F91;
  color: #fff !important;
  border-color: #555F91;
}
.btn-learn-green{
  background-color: #0D6B35;
  color: #fff !important;
  border-color: #0D6B35;
}
.border-warning {
  border-color: var(--border-color) !important;
}