/* html,
body {
    height: 100%;
} */

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

#logo-default .st0 {
    fill: #0080c8;
}

#logo-default .st1 {
    opacity: 0.4;
    fill: #0080c8;
    enable-background: new;
}

#logo-default .st2 {
    opacity: 0.8;
    fill: #0080c8;
    enable-background: new;
}

#logo-default .st3 {
    fill: #29272e;
}

#logo-default .st4 {
    fill: #99cce9;
}

#logo-oneline .st0 {
    fill: #ffffff;
}

#logo-oneline .st1 {
    fill: #ff7c07;
}

#logo-oneline .st2 {
    opacity: 0.4;
    fill: #ff7c07;
    enable-background: new;
}

#logo-oneline .st3 {
    opacity: 0.8;
    fill: #ff7c07;
    enable-background: new;
}

#logo-oneline .st4 {
    fill: #29272e;
}

@media (max-width: 425px) {
    .form-check-input {
        margin-top: 15px !important;
    }
}

.customePopup,
.customePopup .modal-content,
.customePopup .modal-header {
    border: 0px !important;
}

.customePopup .modal-header {
    position: relative;
    margin-top: 50px;
}

.customePopup .modal-content {
    min-height: 280px;
    max-width: 350px;
    margin: auto;
}

.customePopup .top-icon {
    position: absolute;
    text-align: center;
    top: -40px;
    width: 100%;
}

.customePopup .modal-body {
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: auto;
    max-height: calc(30vh);
}

.customePopup .modal-footer {
    height: 80px;
}

.customePopup .modal-footer button,
.customePopup .modal-footer .btn {
    max-width: 150px;
    min-width: 150px;
}

.customePopup .modal-footer button.fixed-height,
.customePopup .modal-footer .btn.fixed-height {
    height: 65px;
}

.customePopup.modelTestStyle .modal-header {
    margin-top: 0;
}

.customePopup.modelTestStyle .modal-content {
    max-width: none;
    min-height: auto;
}

.customePopup.modelTestStyle .modal-body {
    max-height: none;
}

.customePopup.modelTestStyle .modal-footer {
    height: auto;
}

.customePopup.modelTestStyle .modal-footer button,
.customePopup.modelTestStyle .modal-footer .btn {
    max-width: none;
    min-width: auto;
    width: 75%;
}

.text-custom-success {
    color: #38c172;
}

.text-custom-error {
    color: #e3342f;
}

.text-custom-waring {
    color: #fa5305;
}

.text-custom-bulletin {
    color: var(--blue);
}

.background-custom-success {
    background-color: #38c172;
    border-color: #38c172;
    color: #ffffff;
}

.background-custom-success:hover {
    background-color: #34b16f;
    border-color: #34b16f;
    color: #ffffff;
}

.background-custom-error {
    background-color: #e3342f;
    border-color: #e3342f;
    color: #ffffff;
}

.background-custom-error:hover {
    background-color: #d33734;
    border-color: #d33734;
    color: #ffffff;
}

.background-custom-waring {
    background-color: #fa5305;
    border-color: #fa5305;
    color: #ffffff;
}

.background-custom-waring:hover {
    background-color: #e25119;
    border-color: #e25119;
    color: #ffffff;
}

.background-custom-bulletin {
    background-color: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
    opacity: 80%;
}

.background-custom-bulletin:hover {
    background-color: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
    opacity: 100%;
}

.background-custom-orange {
    background-color: rgb(230 135 44);
    border-color: rgb(230 135 44);
    color: #ffffff;
}

.background-custom-orange:hover {
    background-color: rgb(214 131 51);
    border-color: rgb(214 131 51);
    color: #ffffff;
}

.background-custom-gray {
    background-color: var(--gray);
    border-color: var(--gray);
    color: #ffffff;
}

.background-custom-gray:hover {
    background-color: #666666;
    border-color: #666666;
    color: #ffffff;
}

.cart-layout.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    color: #6c757d;
}

.in-cart-color {
    background-color: #666666 !important;
}

.cart-layout.container .cart-main {
    padding-top: 16px;
}

.cart-layout.container .cart-container .cart-empty-main {
    min-height: 50vh;
}

.cart-layout.container .cart-container .cart-empty-main i {
    color: #6c757d;
    font-size: 50px;
}

.cart-layout.container .cart-container .cart-empty-main span {
    font-size: 28px;
    line-height: 100px;
}

.cart-layout.container .cart-container .cart-go-shopping {
    font-size: 20px;
}

.cart-layout.container .cart-main .cart-item-go-shopping {
    border-top: 1px solid #e1e1e1;
    padding-top: 15px;
}

.cart-layout.container .cart-main .cart-item-title {
    height: 40px;
    font-size: 20px;
    color: #6c757d;
}

.cart-layout.container .cart-main .cart-item {
    border-top: 1px solid #e1e1e1;
    padding-top: 15px;
    padding-bottom: 15px;
}

.cart-layout.container .cart-main .cart-item-remove {
    font-size: 11px;
}

.cart-layout.container .cart-main .cart-product-image {
    width: auto;
}

.cart-layout.container .cart-main .cart-product-image img {
    /* max-width: 170px; */
    margin-left: 0px;
    margin-right: 0px;
}

.cart-layout.container .cart-main .cart-product-name {
    font-size: 18px;
    font-weight: 600;
}

.cart-layout.container .cart-main .cart-buy-qty {
    width: 60px;
}

.cart-layout.container .cart-main .cart-buy-qty .update-to-cart {
    margin-top: 14px;
}

.cart-layout.container .cart-main .cart-product-content {
    font-size: 16px;
}

.cart-layout.container .cart-main .cart-product-content > ul {
    padding-left: 25px;
    margin-bottom: 5px;
}

.cart-layout.container
    .cart-main
    .cart-product-content
    > ul
    li:nth-child(n + 3) {
    display: none;
}

.cart-layout.container .cart-main .cart-product-content .click-more {
    border: 1.2px solid #cccccc;
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 3px;
    color: #969696;
    margin-left: 15px;
    background-color: #ededed;
}

.cart-layout.container .cart-main .cart-product-content .click-more:hover {
    background-color: #dadada;
}

.text-custom-gray {
    color: #cfcfcf;
}

.text-custom-gray:hover {
    color: #bababa;
}

.cart-layout.container .cart-summary {
    position: relative;
    padding-left: 0px;
    margin-left: 0px;
}

.cart-layout.container .cart-summary .cart-summary-content {
    background-color: #ffffff;
    border: 0.12rem solid #ccc;
    padding: 20px;
    width: 100%;
    display: none;
}

.cart-layout.container .cart-summary .cart-summary-content .title {
    font-size: 28px;
    text-align: center;
}

.cart-layout.container .cart-summary .cart-summary-content .summary-price-row {
    line-height: 2;
}

.cart-layout.container
    .cart-summary
    .cart-summary-content
    .summary-price-row.price-total {
    font-size: 18px;
}

.cart-layout.container .cart-summary .summary-payment {
    padding: 16px 25px;
    margin: 0px 25px;
    width: 100%;
}

.cart-layout.container .cart-summary .summary-payment img {
    width: 100%;
}

.cart-layout.container .cart-summary .position-fixed {
    width: 100%;
    margin-top: 15px;
}

.cart-layout.container .cart-summary .cart-summary-fixed {
    bottom: 0px;
}

.cart-summary-collapse {
    text-align: -webkit-center;
}

.cart-item > div:nth-child(2) .price {
    padding-left: 15px;
}

.cart-item > div:nth-child(n + 2) > div {
    padding: 10px 0px 0px 0px;
}

.cart-summary-collapse > div {
    background-color: #dddddd;
    border-radius: 15px 15px 0px 0px;
    border: 0.12rem solid #ccc;
    height: 45px;
}

.cart-layout.container .cart-summary .cart-summary-content .term-text {
    font-size: 16px;
    color: #666666;
}

.cart-layout.container .cart-summary .cart-summary-content .open-term-modal > i,
.cart-layout.container
    .cart-summary
    .cart-summary-content
    .open-refund-modal
    > i {
    font-size: 22px;
    color: #666666;
}

.terms-agree-checkbox {
    margin-top: 0px !important;
}

#payment-method {
    padding-bottom: 20px;
}

.choice-card img {
    width: 100%;
}

.grayscale {
    filter: grayscale(100%) opacity(0.45);
}

.plus {
    filter: opacity(1);
}

.plus-inactive {
    filter: opacity(0.45);
}

.cart-has-main {
    padding-bottom: 30px;
}

.top-tab {
    margin-top: 5px;
    margin-bottom: 15px;
    width: calc(100vw - 35px);
}

.tab-wrap {
    width: calc(100vw - 35px);
    padding: 0px;
}

.top-tab.list-group {
    line-height: 1;
}

#resultListTable:parent {
    overflow: auto;
}

.btnNext1 {
    width: 160px;
}

li.no-point {
    list-style-type: none;
    display: none;
}

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

.text-appoint {
    font-weight: 700;
    color: #212629;
    margin-left: -15px;
    /* margin-bottom: 15px; */
    font-size: 15px;
    min-height: 75px;
}

.punch-btn,
.dropdown-menu .dropdown-item {
    border-radius: 10px;
}

.punch-btn:first-letter {
    text-transform: capitalize;
}

.punch-in {
    background-color: #2176bd;
    color: white !important;
}

.punch-in:hover {
    background-color: #2177bda2 !important;
}

.punch-out {
    background-color: indianred;
    color: white !important;
}

.punch-out:hover {
    background-color: rgb(205, 92, 92, 0.8) !important;
}

.break-in {
    background-color: #2176bd;
    color: white !important;
}

.break-in:hover {
    background-color: #2177bda2 !important;
}

.break-out {
    background-color: indianred;
    color: white !important;
}

.break-out:hover {
    background-color: rgb(205, 92, 92, 0.8) !important;
}

.teacher-result-image img {
    width: 72px;
    border-radius: 5px;
}

.teacher-result-name {
    font-size: 20px;
}

.modal-bio-detail {
    font-size: 1.25rem;
    color: #212529;
}

.bioName {
    font-size: 32px;
    line-height: 2em;
    color: #009;
}

.modal-bio-detail .img-wrapper {
    text-align: center;
    margin: 0 auto;
}

.modal-bio-detail .bioImg {
    max-width: 300px;
    border: 1em solid white;
    border-radius: 0.4em;
}

.bioVideo {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
}

.bioSideParent {
    max-width: 300px;
    border: 0em solid white;
    border-radius: 0.4em;
    background-color: white;
    margin: 0 auto;
    margin-top: 1em;
}

.bioSideParent p {
    padding: 1em;
}

#imageTopLeftwave,
#imageDownLeftwave,
#imageTopRightwave,
#imageDownRightwave {
    visibility: visible;
    opacity: 1;
    position: fixed;
}

.op-05 {
    opacity: 0.5;
}

#imageTopRightwave {
    transform: scaleX(-1);
    right: -100px;
    top: 0px;
}

#imageDownLeftwave {
    transform: scaleX(-1);
    left: -100px;
    bottom: -100px;
}

#imageTopLeftwave {
    transform: scaleX(1);
    left: -100px;
    top: 0px;
}

#imageDownRightwave {
    transform: scaleX(1);
    right: -100px;
    bottom: -100px;
}

#bioTitle {
    background-color: var(--blue);
    color: white;
    font-size: 20px;
    line-height: 3em;
    text-align: center;
    border-radius: 0.4rem;
}

.modal-body.teacher-bio {
    background-color: rgba(0, 0, 0, 0.1);
}

.bioDetailTitle {
}

.bioDetailTitle > h3 {
    margin-bottom: 0;
}

.bioDetailTitle > h3 > span {
    padding: 0.3em;
    background-color: var(--blue);
    color: white;
    border-radius: 0.3em 0.3em 0 0;
    font-size: 20px;
}

.bioDetailContent {
    border: 0.3em solid var(--blue);
    border-radius: 0 0.3em 0.3em 0.3em;
    background-color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1em;
}

.bioDetailContent > ul {
    margin: 0;
    padding: 0.3em;
    margin-left: 30px;
}

.bioDetailContent > ul > li {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.professionalImg {
    border: 3px solid #febf44;
}

.seniorImg {
    border: 3px solid #fda14e;
}

.executiveImg {
    border: 3px solid #ca332c;
}

.professionalLabel,
.seniorLabel,
.executiveLabel {
    padding: 0.3em;
    display: flex;
    justify-content: center;
    font-weight: bold;
}

.professionalLabel::after {
    content: "Professional Teacher";
    color: #febf44;
}

.seniorLabel::after {
    content: "Senior Teacher";
    color: #fda14e;
}

.executiveLabel::after {
    content: "Executive Teacher";
    color: #ca332c;
}

.levelText {
}

.ExecutiveText {
    color: #ca332c;
}

.SeniorText {
    color: #fda14e;
}

.ProfessionalText {
    color: #febf44;
}

.levelStraightLine {
    width: 5px;
    height: 6em;
}

.ExecutiveStraightLine {
    background-color: #ca332c;
}

.SeniorStraightLine {
    background-color: #fda14e;
}

.ProfessionalStraightLine {
    background-color: #febf44;
}

.ExecutiveBorderLeft,
.SeniorBorderLeft,
.ProfessionalBorderLeft {
    display: block;
    padding-left: 1em;
    margin-left: -1em;
}

.ExecutiveBorderLeft {
    border-left: 6px solid #ca332c;
}

.SeniorBorderLeft {
    border-left: 6px solid #fda14e;
}

.ProfessionalBorderLeft {
    border-left: 6px solid #febf44;
}

.fontsize16 {
    font-size: 16px;
}

.fontsize18 {
    font-size: 18px;
}

.dt-control.custom-style:before {
    content: "" !important;
    height: 0px !important;
    width: 0px !important;
    border: 0px !important;
}

@media (min-width: 576px) {
    .cart-layout.container {
        /* max-width: 540px; */
        width: 100%;
    }

    .cart-layout.container .cart-summary .position-fixed {
        max-width: 23rem;
    }

    .cart-layout.container .cart-summary .cart-summary-fixed {
        bottom: unset;
    }

    .cart-layout.container .cart-summary {
        padding-left: 15px;
    }
}

@media (min-width: 768px) {
    .cart-layout.container {
        /* max-width: 720px; */
        width: 100%;
    }

    .cart-layout.container .cart-main {
        padding-right: 25px;
    }

    .cart-summary-collapse > div {
        display: none;
    }

    .cart-layout.container .cart-summary .cart-summary-content {
        border-radius: 10px;
        display: block;
    }

    .cart-item > div:nth-child(2) .price {
        padding-left: unset;
    }

    .top-tab {
        width: 95vw;
    }

    .tab-wrap {
        width: 95vw;
        padding: 0px;
    }
}

@media (min-width: 992px) {
    .cart-layout.container {
        /* max-width: 960px; */
        width: 100%;
    }

    .cart-layout.container .cart-main {
        padding-right: 25px;
    }

    .cart-layout.container .cart-summary .cart-summary-content {
        border-radius: 10px;
        display: block;
    }

    .cart-item > div:nth-child(2) .price {
        padding-left: unset;
    }

    .top-tab {
        width: 95vw;
    }

    .tab-wrap {
        width: 95vw;
        padding: 0px;
    }
}

@media (min-width: 1280px) {
    .cart-layout.container {
        /* max-width: 95%; */
        width: 100%;
    }

    .cart-layout.container .cart-main {
        padding-right: 25px;
    }

    .cart-layout.container .cart-summary .cart-summary-content {
        border-radius: 10px;
        display: block;
    }

    .cart-item > div:nth-child(2) .price {
        padding-left: unset;
    }

    .top-tab {
        width: 80vw;
        max-width: 1280px;
    }

    .tab-wrap {
        width: 85vw;
        max-width: 1280px;
        padding: 0px;
    }

    .select_result_question_common > ol {
        justify-content: left;
    }
}

.custom-font-size {
    font-size: 20px;
}

.custom-popup-body {
    max-height: unset !important;
}

.discount-icon {
    max-width: 3.5vh;
}

.content-line-height {
    line-height: 2;
}

.product-what .area-title {
    background-color: #2867b6;
    color: white;
    height: 100px;
    width: 100%;
    font-size: 1.3rem;
}

.product-what .area-content {
    font-size: 1rem;
    text-align: center;
    min-height: 100px;
    margin: 40px 10px 15px 10px;
}

.product-what .area-icon-absolute {
    position: absolute;
    width: calc(100% - 32px);
}

.product-what .area-icon {
    width: 60px;
    height: 60px;
    position: relative;
    top: -30px;
    left: calc(50% - 30px);
    background-color: white;
    border: 2px solid #999;
    border-radius: 100%;
}

.product-what .area-icon > i {
    color: blue;
    font-size: 30px;
}

.border-custom {
    border: 1px solid #999;
}

a.btn.in-cart-color {
    opacity: 0.65;
}

a[disabled="disabled"] {
    pointer-events: none;
}

.trainer-img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    object-fit: cover;
}

.silder-cart-fixed {
    z-index: 10;
}

.silder-cart-fixed .product-article {
    font-size: 16px;
}

.silder-cart-fixed .product-price {
    color: var(--blue);
}

.product-price {
    margin-top: 10px !important;
}

.select-programs {
    padding-bottom: 10px !important;
}

.silder-cart-fixed .class-body {
    background-color: var(--light);
}

/* hide focus */
.hvr-underline-from-center:focus:before {
    left: 51%;
    right: 51%;
}

#InformationPopup.customePopup .modal-header {
    margin-top: 0px;
}

table.score-form {
    /* padding-top: 30px; */
    padding-bottom: 30px;
    margin-top: 10px;
}

table.score-form td:not(:first-of-type) {
    vertical-align: top;
    width: 25%;
}

table.score-form tr:first-of-type {
    position: sticky;
    z-index: 2;
    top: -1px;
}

table.score-form tr:not(:first-of-type) {
    font-size: 14px;
}

table.score-form td:first-of-type {
    font-size: 16px;
    font-weight: 800;
    width: 40px;
    text-align: center;
}

table.score-form tr:first-of-type {
    background-color: #3490dc;
}

table.score-form td {
    padding: 5px;
    border: 1px solid #ced4da;
}

table.score-form .score-band {
    font-size: 16px;
    font-weight: 600;
}

table.score-form td .form-check {
    padding-top: 5px;
    padding-bottom: 5px;
}

table.score-form .score_title {
    font-size: 18px;
    min-height: 3.5em;
}

table.score-form .score-input {
    width: 40px;
    display: inline-block;
}

table.score-form .score-split-line {
    font-size: 25px;
    width: 20px;
    display: inline-block;
    vertical-align: middle;
}

.table.dataTable thead th[aria-label=""] {
    min-width: 25px;
}

.table.dataTable thead th[aria-label=""]::after,
.table.dataTable thead th[aria-label=""]::before {
    content: "";
}

.table.dataTable thead th,
.table.dataTable tbody td {
    padding: 5px;
}

.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
    display: flex;
    height: 28px;
    align-items: center;
}

.dataTables_length label,
.dataTables_filter label,
.dataTables_info label,
.dataTables_paginate label {
    margin-bottom: 0px;
}

.dataTables_length,
.dataTables_info {
    float: left;
}

.dataTables_filter,
.dataTables_paginate {
    float: right;
}

.btn-custom-search-panes,
.btn-custom {
    background-color: var(--blue);
    border-color: var(--blue);
    border-radius: 5px !important;
    color: var(--white);
    opacity: 80%;
    margin: 0px 10px;
}

.btn-custom-search-panes:hover,
.btn-custom-search-panes:focus,
.btn-custom-search-panes:active {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    border-radius: 5px !important;
    color: var(--white) !important;
    opacity: 100%;
}

.btn-custom.btn-orange {
    border-color: #f18700;
    background-color: #f18700;
    color: white;
}

.btn-custom.btn-orange:hover,
.btn-custom.btn-orange:focus,
.btn-custom.btn-orange:active {
    border-color: #e77200 !important;
    background-color: #e77200 !important;
    color: white !important;
}

.btn-custom.btn-danger {
    border-color: #e3342f;
    background-color: #e3342f;
    color: white;
}

.btn-custom.btn-danger:hover,
.btn-custom.btn-danger:focus,
.btn-custom.btn-danger:active {
    border-color: #d0211c !important;
    background-color: #d0211c !important;
    color: white !important;
}

div.dt-button-background {
    background: -webkit-gradient(
        radial,
        center center,
        0,
        center center,
        497,
        color-stop(0, rgba(0, 0, 0, 0.3)),
        color-stop(1, rgba(0, 0, 0, 0.7))
    );
    background: -webkit-radial-gradient(
        center,
        ellipse farthest-corner,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.7) 100%
    );
    background: radial-gradient(
        ellipse farthest-corner at center,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1001 !important;
}

.score-status-title {
    font-size: 16px;
}

.student-answer,
.teacher-comment,
.student-score {
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 10px 0px;
}

.student-answer,
.teacher-comment {
    min-height: 100px;
}

.student-score {
    padding: 0px;
    min-height: calc(100% - 20px);
}

.student-answer-detail {
    margin: 10px 0px;
    width: 100px;
}

.score-list-title {
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 12px;
    font-weight: 600;
}

.student-score-collapse ul {
    max-width: 30em;
}

.student-score-btn {
    font-size: 32px;
}

.student-score-btn[aria-expanded="true"] {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.list-number {
    display: inline-block;
    width: 15px;
    height: 15px;
    color: #fff;
    background-color: #227dc7;
    border-color: #2176bd;
}

.score-list-data {
    list-style: none;
    padding: 5px 0px 5px 15px;
}

.result-list-group-item {
    padding: 0px;
}

.score-number-icon {
    width: 2em;
    display: inline-block;
    vertical-align: top;
    padding-top: 2px;
}

.score-number-text {
    display: inline-block;
    width: calc(100% - 3em);
}

.writing-speaking-result-answer-part {
    float: right;
    width: 100% !important;
}

.writing_result_textarea,
.speaking_result_textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #cfcfcf;
    min-height: 30rem;
    height: auto;
    color: #000000;
    overflow: hidden;
}

textarea[class*="text-area-tools"]:not(.teacher-comment-teatarea) {
    min-height: 10rem;
    height: auto;
    font-size: 1.3rem;
}

.textarea_longWriting {
    font-size: 1.3rem;
    cursor: text;
}

.teacher-comment-teatarea {
    min-height: 30rem;
    height: 10rem;
    font-size: 1.3rem;
    line-height: 1.6;
    cursor: text;
}

.score-number {
    height: 1.5em !important;
    line-height: 1.5em !important;
    width: 1.5em !important;
    color: #fff;
    /* background-color: #7c7a7a; */
    background-color: var(--blue);
    border-radius: 0.4em;
}

.quiz_result_question_block {
    /* border: 0; */
}

.quiz_result_question_block > .card {
    padding: 0;
}

.result_question_common_ul {
    min-height: 100vh;
}

.select_result_question_common > ol {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    justify-content: left;
}

td[class*="result-area"] {
    vertical-align: top;
}

.result-area1 {
    width: 70%;
}

.result-area2 {
    width: 30%;
    padding-left: 15px;
    padding-right: 15px;
}

.result-show {
    height: 100%;
}

.result-show .result-area1,
.result-show .result-area2 {
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    justify-content: center;
}

.score-status-area,
.quiz-badge-area {
    min-height: 91px;
}

.score-list-text {
    font-weight: 600;
}

.score-list-color-blue {
    color: var(--blue);
}

.score-list-color-orange {
    color: var(--orange);
}

.score-list-color-red {
    color: var(--red);
}

.score-list-color-green {
    color: var(--green);
}

.score-list-bgcolor-blue {
    background-color: var(--blue);
    border-color: var(--blue);
}

.score-list-bgcolor-orange {
    background-color: var(--orange);
    border-color: var(--orange);
}

.score-list-bgcolor-red {
    background-color: var(--red);
    border-color: var(--red);
}

.score-list-bgcolor-green {
    background-color: var(--green);
    border-color: var(--green);
}

.btn.score-list-bgcolor-blue:hover {
    background-color: var(--blue);
}

.btn.score-list-bgcolor-orange:hover {
    background-color: var(--orange);
}

.btn.score-list-bgcolor-red:hover {
    background-color: var(--red);
}

.btn.score-list-bgcolor-green:hover {
    background-color: var(--green);
}

.resizable {
    width: 100%;
}

.result_area_score.result-area1 {
    width: 55%;
}

.result_area_score.result-area2 {
    width: 45%;
}

.main_page:not(.homepage) {
    height: calc(100vh - 60px);
    /* overflow: auto; */
}

.main_page.full-height {
    /* height: calc(100vh); */
    /* padding-top: 10px; */
}

.main_page.full-height.model_test_intro {
    height: unset;
}

/* .main_page.full-height #exerciseSystem,
.main_page.full-height #teachingContent {
    padding-top: 0 !important;
} */

.main_page.model_test {
    height: 100vh;
    font-size: 16px;
    overflow-y: hidden;
}

.main_page.model_test ol,
.main_page.model_test ul {
    margin-left: 2rem;
}

.main_page.homepage {
    overflow: hidden;
}

.result-show {
    height: 100%;
    overflow: auto;
}

/* *::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
} */

.score-form.IELTS {
}

.score-form.TOEFL {
}

.score-form.IELTS td:not(:first-of-type) {
    width: calc((100% - 40px) / 4);
}

.score-form.TOEFL td:not(:first-of-type) {
    width: calc((100% - 40px) / 7);
}

input.no-work-all {
    width: 25px;
    height: 25px;
}

label.form-check-label[for="no-work-all"] {
    margin: 5px 5px 5px 10px;
}

.datepicker {
    z-index: 10000 !important;
}

table.dataTable tbody tr.selected td {
    background-color: unset !important;
}

textarea[class*="text-area-tools"] {
    scrollbar-width: none;
}

textarea[class*="text-area-tools"]::-webkit-scrollbar {
    display: none;
}

.correcting-area {
    /* position: relative; */
}

.student-essay-area,
.question-area {
    /* display: none; */
}

.correcting-button-fixed {
    position: absolute;
    z-index: 2;
    right: 0px;
    top: 0px;
}

.question-area-content,
.student-essay-content {
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    padding: 10px;
}

.score-option-icon > i {
    font-size: 25px;
}

@media (max-width: 575.98px) {
    .select_result_question_common > ol {
        justify-content: left;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .select_result_question_common > ol {
        justify-content: left;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .select_result_question_common > ol {
        justify-content: left;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .select_result_question_common > ol {
        justify-content: left;
    }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
    .select_result_question_common > ol {
        justify-content: left;
    }
}

.select_result_question_common > ol::-webkit-scrollbar {
    display: none;
}

.select_result_question_common li {
    min-width: 4em;
}

.bio-detail-close {
    top: 0px;
    right: 0px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-color: white !important;
    opacity: 1;
    font-size: 35px;
}

.class-report-modal ul[class*="ul-"] li {
    padding-left: 15px;
    border-radius: 0.25rem;
    background: #136a8a;
    background: -webkit-linear-gradient(to right, #267871, #136a8a);
    background: linear-gradient(to right, #267871, #136a8a);
    color: #fff;
    list-style: none;
}

.class-report-modal ul[class*="ul-"] li:hover {
    cursor: grab;
}

.class-report-modal ul[class*="ul-"] li.drag-sort-active {
    background: transparent;
    color: transparent;
    border: 1px solid #4ca1af;
}

#user-notifications .list-group-item {
    border: 1px solid #ddd;
    border-width: 1px 0 0 0 !important;
    font-size: 1.2rem;
}

#datatable-notification .btn-link,
#user-notifications .list-group-item a {
    font-size: 0.9rem;
}

#user-notifications .list-group-item:first-child {
    border-top: 0 !important;
}

.notification-section-area {
    overflow-y: auto;
}

.notifications-img {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    border-radius: 50%;
}

.notifications-section {
    user-select: none;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border-radius: 0.25rem;
    max-height: 120px;
}

.notifications-section:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.notifications-section-text {
    margin: 6px;
    margin-right: 60px;
}

.notifications-section-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 24px;
    height: 100%;
}

.notifications-section:hover .notifications-section-hamburger {
    display: flex;
}

.notifications-section-hamburger-child {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.notifications-section-hamburger-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    z-index: 100;
    cursor: pointer;
    font-size: 24px;
    color: #666666;
}

.notifications-section-hamburger-icon.gray {
    background-color: #f0f0f0;
}

.notifications-section-hamburger-icon:hover {
    background-color: #e0e0e0;
}

.notifications-section-hamburger-icon:active {
    box-shadow: 0px 0px 5px #ffffff;
}

.notifications-section-hamburger-list {
    display: none;
    position: absolute;
    margin-top: 36px;
    min-width: 240px;
    padding: 8px;
    z-index: 200;
    cursor: pointer;
    right: -20px;
}

.notifications-section-hamburger-list:before {
    content: "";
    width: 0;
    height: 0;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent #aaaaaa;
    position: absolute;
    /* left: calc(50% - 10px); */
    top: -10px;
    z-index: 200;
    right: 25px;
}

@media (max-width: 767.98px) {
    .notifications-section-hamburger-list {
        margin-right: 154px;
    }

    .notifications-section-hamburger-list:before {
        left: calc(50% + 67px);
    }
}

.notifications-section-hamburger-list ul {
    margin-bottom: 0;
    list-style-type: none;
    font-size: 16px;
}

.notifications-section-hamburger-list li:hover {
    background-color: #e0e0e0;
    border-radius: 5px;
}

.notifications-section-tagicon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--blue-light);
    position: absolute;
    left: 4px;
    top: 4px;
}

.notifications-section-time {
    color: var(--blue-light);
    font-size: 12px;
    overflow: hidden;
    max-height: 16px;
}

.notifications-section-content {
    font-size: 16px;
    overflow: hidden;
    max-height: 72px;
}

.notifications-section-content a {
    color: #3490dc !important;
    text-decoration: none !important;
    background-color: transparent !important;
    font-size: unset !important;
    padding: 0px !important;
}

.multiline-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.notification-more {
    position: sticky;
    bottom: 0px;
    text-align: center;
    padding: 5px 0px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.notification-more a {
    font-size: 1rem !important;
}

.notification-dropdown {
    width: 400px;
    max-width: 90vw;
}

.notification-dropdown .dropdown-content {
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
}

#notificationDropdownList .dropdown-item a {
    font-size: 1em;
    color: #3490dc;
    padding: 10px 3px;
}

#notificationDropdownList .dropdown-item {
    white-space: inherit;
    padding: 0.25rem 1rem;
    margin: 0.1rem 0.5rem;
    width: auto;
    font-size: 0.8rem;
    background-color: #efefef;
}

.notification-icon .fa-stack {
    /* height: 0.8em; */
    font-size: 0.75em;
}

.notification-icon.no_number .fa-stack[data-count]:after {
    display: none;
}

.notification-icon .fa-stack[data-count]:after {
    position: absolute;
    left: 65%;
    top: -20%;
    content: attr(data-count);
    font-size: 75%;
    padding: 0.4em;
    border-radius: 999px;
    line-height: 0.75em;
    color: white;
    background: rgba(255, 0, 0, 0.85);
    text-align: center;
    min-width: 2em;
    font-weight: bold;
}

.resize-row,
.model_test .resize-row > div {
    height: calc(100vh - 150px);
}

.resize-col {
    overflow: auto;
    position: relative;
    display: none;
}

.resize-col[data-open="true"] {
    display: block;
}

.resize-col-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.resize-col-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* .resize-col[data-open=true]:not(:first-child)::before {
    content: '';
    display: block;
    width: 8px;
    height: 100%;
    position: absolute;
    background-color: lightsteelblue;
    cursor: col-resize;
    z-index: 1;
    border-radius: 10px;
}

.resize-col:not(:first-child):hover::before {
    background-color: rgb(191, 214, 243);
} */

.drag-resizer {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    cursor: col-resize;
    background-color: lightsteelblue;
    width: 8px;
    border-radius: 10px;
}

.resize-col-width.style-original .drag-resizer {
    display: none;
}

.resize-col-width.style-original.resize-row {
    height: 100%;
}

.resize-col > div:not(.drag-resizer) {
    min-width: 380px;
}

.freeStyleWritingTopic,
.freeStyleWritingAnswer {
    list-style-type: none;
}

.freeStyleWritingTopic textarea {
    max-width: 400px;
}

.edit-quiz-link-area {
    position: relative;
}

.edit-quiz-link-area > div {
    position: absolute;
    text-align: right;
    right: -10px;
    top: -15px;
    z-index: 2;
}

.edit-question-btn:hover::before,
.edit-quiz-btn:hover::before,
.edit-course-content:hover::before {
    content: attr(data-before-text);
}

#teachingSystem .sidemenu_content,
#exerciseSystem .sidemenu_content {
    overflow: auto;
    /* height: calc(100vh - 170px);
    max-height: calc(100vh - 170px); */
    height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
}

#teachingSystem .sidemenu_content .header-icon,
#exerciseSystem .sidemenu_content .header-icon {
    margin-left: 5px;
}

#teachingSystem .sidemenu_content .title-icon,
#exerciseSystem .sidemenu_content .title-icon {
    margin-right: 5px;
}

#teachingSystem .sidemenu_content.style-2,
#exerciseSystem .sidemenu_content.style-2 {
    height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
    background: #ffffff;
}

#teachingSystem .sidemenu_content.style-2.skills,
#exerciseSystem .sidemenu_content.style-2.skills {
    padding: 0 !important;
    margin: 0 !important;
}

#teachingSystem .sidemenu_content.style-2 .skills,
#exerciseSystem .sidemenu_content.style-2 .skills {
    position: sticky;
    top: 0;
    z-index: 1;
}

#teachingSystem .sidemenu_content.style-2 .skills a,
#exerciseSystem .sidemenu_content.style-2 .skills a {
    font-weight: bolder;
    font-size: 1.575rem;
    background-color: var(--teaching-header-bg);
    border-color: var(--teaching-header-bg);
    border-radius: 0.5rem 0.5rem 0 0;
    padding-left: 20px;
    width: 100%;
}

#teachingSystem .sidemenu_content.style-2 .skills a:hover,
#exerciseSystem .sidemenu_content.style-2 .skills a:hover {
    color: initial;
    margin: 0;
    opacity: initial;
}

#teachingSystem.style-2.fullscreen #teachingContent,
#exerciseSystem.style-2.fullscreen #exerciseContent {
    max-height: 100vh;
}

#teachingSystem.style-2 #teachingContent,
#exerciseSystem.style-2 #exerciseContent {
    max-height: calc(100vh - 65px);
}

#teachingSystem.style-2 .default-fourth-hyperlink,
#exerciseSystem.style-2 .default-fourth-hyperlink,
#teachingSystem.style-2 .btn-head-nevigation,
#exerciseSystem.style-2 .btn-head-nevigation,
#teachingSystem.style-2 .btnArrowBlank,
#exerciseSystem.style-2 .btnArrowBlank {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#teachingSystem.style-2 #courseContentCardPagi,
#exerciseSystem.style-2 #courseContentCardPagi,
#teachingSystem.style-2 .video-content,
#exerciseSystem.style-2 .video-content,
#teachingSystem.style-2 #accordion > .card,
#exerciseSystem.style-2 #accordion > .card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#teachingSystem.style-2 #courseContentCard,
#exerciseSystem.style-2 #courseContentCard {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#teachingSystem.style-2 .sidebar-menu::-webkit-scrollbar,
#exerciseSystem.style-2 .sidebar-menu::-webkit-scrollbar {
    background: var(--bs-body-bg);
}

.sidemenu_content a[data-try] {
    position: relative;
}

.sidemenu_content a[data-try]::after {
    content: attr(data-try);
    position: absolute;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background-color: #38c172b5;
    border-radius: 15px;
    padding: 0px 8px;
    top: 1px;
    right: -15px;
}

#teachingContent,
#exerciseContent {
    /* overflow: auto; */
    height: 100%;
    max-height: calc(100vh - 70px);
    filter: drop-shadow(0px 2px 5px);
    /* transition: all 0.3s ease-in-out; */

    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;

    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.bodyFullscreen #teachingContent,
.bodyFullscreen #exerciseContent {
    max-height: 100vh;
}

@media (min-width: 768px) {
    #teachingContent.showMenu,
    #exerciseContent.showMenu {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66666667%;
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%;
    }
}

@media (min-width: 992px) {
    #teachingContent.showMenu,
    #exerciseContent.showMenu {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
}

.li_noContentInLesson {
    position: relative;
}

.speaking-part-btn {
    width: 80px;
}

.speaking-part-btn.active {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
}

.writing-speaking-result-answer-part .listening_test_video_player {
    width: 100% !important;
    max-width: 40vw !important;
}

#carouselExampleIndicators .carousel-indicators {
    display: -webkit-box;
}

.scoring-area [id*="heading-"] {
    height: 40px;
}

.scoring-area .score-option-title {
    height: 3rem;
}

.scoring-area .score-option-title .score-option-title-text {
    max-width: 60%;
}

.scoring-area .score-option-title {
    margin: 0px !important;
    background-color: white;
    z-index: 1;
}

.scoring-area .scoring-items {
    height: calc(100% - 120px);
    overflow-y: auto;
}

div[class*="speaking_response_scoring"].scoring-area .scoring-items {
    height: calc(100% - 160px);
}

/* ::-webkit-scrollbar {
    width: 5px;
} */

#btnGroupPage {
    font-weight: bold;
}

.result-question-part .bg-success,
.result-question-part .bg-danger,
.result-question-part .bg-warning {
    color: #000000;
    font-weight: 800;
}

.show-result-option p {
    margin-bottom: 0 !important;
}

.quiz_result_question_block .img-fullwidth {
    width: initial;
}

.currency_symbol {
    min-width: 16px;
    width: 1.5vw;
    max-width: 24px;
    height: auto;
}

.currency_symbol path {
    fill: var(--color-gray-1);
}

.credit-icon {
    display: flex;
}

.credit-icon .currency_symbol {
    margin-left: 5px;
}

.langMarkIcon {
    text-align: right;
    color: white;
    background-color: lightslategray;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 2px;
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    user-select: none;
    /* standard syntax */
    -webkit-user-select: none;
    /* for Chrome、Safari */
    -moz-user-select: none;
    /* for Mozilla、Firefox */
    text-transform: capitalize;
}

.cke_notification_warning {
    display: none;
}