/* variable */
:root {
    --system_primery_color: #104d8d;
    --system_secendory_color: #202e3b;
    --footer_background_color: #dadada;
    --footer_headline_color: #414141;
    --footer_text_color: #5b5c6e;
    --footer_text_hover_color: #104d8d;
    --menu_bg: #f8f9fa;
    --menu_text: #2b3d4e;
    --menu_hover_text: #fb1159;
    --menu_title_text: #202e3b;
    /* theme color custom */
    --theme-primary-color-1: #264d9d;
    --theme-primary-color-2: #7c94c4;
    --theme-primary-color-3: #d2dbeb;
    --theme-success-color-1: #30b55c;
    --theme-success-color-2: #83d39d;
    --theme-success-color-3: #d6f0de;
    --theme-dark-color-1: #3e3f42;
    --theme-dark-color-2: #bcbdc0;
    --theme-light-color: #ffffff;
    --theme-warning-color: #fec222;
    /* theme font */
    --font-family: "roboto", sans-serif;
}

/* end */
* {
    font-family: 'Roboto', sans-serif;
    /* font-style: italic; */
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.block-elements {
    padding-left: 7%;
    padding-right: 7%;
}

.bg-custom-primary {
    background-color: var(--theme-primary-color-1) !important;
}

.bg-custom-warning {
    background-color: var(--theme-warning-color) !important;
}

.font-medium {
    font-weight: 600;
}

.text-custom-primary {
    color: var(--theme-primary-color-1);
}

.text-custom-info {
    color: var(--theme-primary-color-2);
}

.text-custom-success {
    color: var(--theme-success-color-1);
}

.text-custom-danger {
    color: #e22323;
}

.text-custom-warning {
    color: var(--theme-warning-color);
}

.text-custom-muted {
    color: #bcbdc0;
}

/* shadow */
.dark-shadow {
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25);
}

/* border */
.border-custom {
    border-radius: 20px;
}

/* button custom */
.btn-custom-1,
.btn-custom-2,
.btn-outline-custom-2 {
    border-radius: 10px;
}

.btn-custom-1 {
    background-color: var(--theme-primary-color-1);
    color: var(--theme-light-color);
    border: 1px solid var(--theme-primary-color-1);
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 5px;
}

.btn-custom-1:hover {
    background-color: var(--theme-light-color);
    color: var(--theme-dark-color-1);
    border: 1px solid var(--theme-dark-color-1);
    text-decoration: none;
    transition: 0.3s ease-out;
}

.btn-outline-custom-1 {
    color: var(--theme-primary-color-1);
    border: 1px solid var(--theme-primary-color-1);
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 5px;
}

.btn-outline-custom-1:hover {
    background-color: var(--theme-primary-color-1);
    color: var(--theme-light-color);
    border: 1px solid var(--theme-primary-color-1);
    text-decoration: none;
    transition: 0.3s ease-out;
}

.btn-custom-2 {
    background-color: var(--theme-success-color-1);
    color: var(--theme-light-color);
    border: 1px solid var(--theme-success-color-1);
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 5px;
}

.btn-custom-2:hover {
    background-color: var(--theme-light-color);
    color: var(--theme-success-color-1);
    border: 1px solid var(--theme-success-color-1);
    text-decoration: none;
    transition: 0.3s ease-out;
}

.btn-outline-custom-2 {
    color: var(--theme-success-color-1);
    border: 1px solid var(--theme-success-color-1);
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 5px;
}

.btn-outline-custom-2:hover {
    background-color: var(--theme-success-color-1);
    color: var(--theme-light-color);
    border: 1px solid var(--theme-success-color-1);
    text-decoration: none;
    transition: 0.3s ease-out;
}

.btn-outline-custom-3 {
    color: var(--theme-light-color);
    border: 1px solid var(--theme-light-color);
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 5px;
}

.btn-outline-custom-3:hover {
    background-color: var(--theme-warning-color);
    color: var(--theme-dark-color);
    border: 1px solid var(--theme-warning-color);
    text-decoration: none;
    transition: 0.3s ease-out;
}

.btn-switch-custom {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 20px;
    background: #fff;
    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    cursor: pointer;
    margin: 0;
}

.btn-switch-custom::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 20px;
    height: 20px;
    background: var(--theme-warning-color);
    border-radius: 50%;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-switch-custom:active::before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(128, 128, 128, 0.1);
}

.input-switch-custom:checked + .btn-switch-custom {
    background: var(--theme-warning-color);
}

.input-switch-custom:checked + .btn-switch-custom::before {
    left: 19px;
    background: #fff;
}

.input-switch-custom:checked + .btn-switch-custom:active::before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(0, 150, 136, 0.2);
}

/* Client Header */
.header {
    z-index: 3;
    font-size: 16px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
}

/* .header .navbar-brand {
  width: 30%;
} */
.header .navbar-brand .logo-header {
    width: 100%;
    max-width: 145px;
}

.header-info {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: var(--theme-primary-color-2);
    color: var(--theme-light-color);
}

.header .header-navbar {
    padding-top: 5px;
    padding-bottom: 5px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--theme-light-color);
}

.header .header-navbar .navbar-nav .nav-item a {
    font-weight: 600;
}

.header .header-navbar .navbar-nav .nav-item.active a {
    color: var(--theme-primary-color-1);
}

.header .header-navbar .nav-link:hover,
.header .dropdown-item a:hover {
    color: var(--theme-primary-color-2);
}

.header .header-navbar .dropdown-menu {
    margin-top: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}

.header .dropdown-item {
    padding: 0 10px;
}

.header .dropdown-item a {
    display: block;
    padding: 10px 0;
    font-weight: 500 !important;
    width: calc(100%);
    color: var(--theme-dark-color-1);
    text-decoration: none;
}

.header .header-navbar .user-img,
.lesson-container .lesson-sidebar .user-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 100%;
}

.header .header-navbar .course-progress {
    width: 200px;
}

.header .header-navbar .course-progress .progress {
    border-radius: 100px;
    height: 10px;
}

@media (min-width: 990px) {
    .header .header-navbar .dropdown-menu {
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 576px) {
    .header .header-navbar .dropdown-menu {
        padding: 0;
    }

    .header .header-navbar {
        height: 50px;
        vertical-align: middle;
    }
}

.Navigation {
    background: white;
    height: 80px;
    display: flex;
    align-items: center;
    transition: .5s;
}

@media (max-width: 991px) {
    .Navigation {
        padding: 10px 0;
        position: relative;
    }

    .Navigation-item {
        align-items: center;
    }
}

.Navigation-item .button-bars {
    display: none
}

@media (min-width: 376px) and (max-width: 767px) {
    .Navigation-item .button-bars {
        display: block;
        margin-left: 32px;
    }
}

@media (max-width: 376px) {
    .Navigation-item .button-bars {
        display: block;
        margin-left: 10px;
    }
}

@media (min-width: 768px) and (max-width: 881px) {
    .Navigation-item .button-bars {
        display: block;
        margin-left: 10px;
    }
}

.Navigation-item .button-bars i.fa {
    font-size: 2rem;
    color: black;
    font-weight: 400;
    transition: .5s;
}

.Navigation .list-item-group {
    margin-bottom: 0
}

.Navigation .list-item-group.horizon {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 0;
    flex: 1;
    align-items: center;
    margin-right: 32px;
}

.Navigation-action {
    padding: 20px 0;
}

.Navigation-item-logo a {
    display: block;
    width: 100%;
    padding: 16px 0;
}

@media (max-width: 991px) {
    .Navigation .list-item-group.horizon {
        max-height: 0;
        overflow: hidden;
        transition: .5s;
        position: absolute;
        top: 100%;
        margin: 0;
        background: white;
        width: 100%;
        left: 0;
        padding: 0 40px;
        z-index: 10;
    }

}

@media (max-width: 991px) {
    .Navigation .list-item-group.horizon.active {
        max-height: 100vh
    }
}

.Navigation .list-item-group.horizon .list-item {
    margin-left: 32px;
    position: relative;
    padding: 28px 0
}

@media (max-width: 991px) {
    .Navigation .list-item-group.horizon .list-item {
        width: 100%;
        margin: 0
    }
}

.Navigation .list-item-group.horizon .list-item .has-dropdown-list {
    position: absolute;
    width: 200px;
    left: 0;
    background: #fff;
    top: 100%;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    z-index: 9;
    transition: .5s;
    padding: 0;
    transform: translateY(20%);
    opacity: 0;
    visibility: hidden
}

.Navigation .list-item-group.horizon .list-item .has-dropdown-list .list-item {
    padding: 10px;
    margin: 0;
}

@media (max-width: 991px) {
    .Navigation .list-item-group.horizon .list-item .has-dropdown-list {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        background: unset;
        box-shadow: unset;
        max-height: 0;
        overflow: hidden
    }

    .Navigation .list-item-group.horizon .list-item .has-dropdown-list .list-item {
        padding: 0px;
    }

    .Navigation .list-item-group.horizon .list-item .has-dropdown-list.show {
        max-height: 100vh;
        padding-left: 20px
    }

    .Navigation .list-item-group.horizon .list-item .has-dropdown-list .list-item .list-item-link {
        color: black !important;
        padding: 8px;
    }
}

.Navigation .list-item-group.horizon .list-item .has-dropdown-list .list-item .list-item-link {
    color: #000
}

.Navigation .list-item-group.horizon .list-item.has-dropdown:hover .has-dropdown-list {
    transform: translateY(0);
    opacity: 1;
    visibility: visible
}

.Navigation .list-item-group.horizon .list-item .list-item-link {
    font-size: 16px;
    color: black;
    text-transform: capitalize;
    transition: .5s;
}

.Navigation .list-item-group.horizon .list-item .list-item-link:hover {
    color: #264D9D;
    font-weight: 500;
}

.Navigation .list-item-group.horizon .list-item .list-item-link.active {
    color: #264D9D;
    font-weight: 500;
}

@media (max-width: 991px) {
    .Navigation .list-item-group.horizon .list-item .list-item-link {
        padding: .5rem 0;
        display: block;
        width: 100%
    }

    .Navigation .list-item-group.horizon .list-item {
        padding: 0;
    }

    .Navigation-action {
        flex: 2;
        display: flex;
        justify-content: flex-end;
    }
}

/* Client Footer */
.footer {
    background-color: var(--theme-primary-color-1);
}

.footer .logo-footer .logo {
    object-fit: contain;
}

.footer .logo-footer .logo-name {
    color: var(--theme-light-color);
}

.footer .info-footer i {
    width: 20px;
}

.footer .footer-link li {
    margin-bottom: 10px;
}

.footer .footer-link li a {
    text-decoration: none;
    color: var(--theme-light-color);
}

@media (max-width: 575.98px) {
    .footer .logo-footer .logo-name {
        color: var(--theme-light-color);
        font-size: 2vh;
    }

    .footer .logo-footer .logo-name {
        color: var(--theme-light-color);
        font-size: 2vh;
    }
}

/* part tieu-diem*/
.focus-container {
    background: url("/assets/images/banner/home-banner-tieude.png") no-repeat center /
    cover;
}

.focus-container .focus-title {
    color: var(--theme-warning-color);
    font-weight: bold;
}

.focus-container .focus-slider-item .focus-slider-text {
    font-size: large;
}

.focus-container .focus-slider .owl-nav {
    position: relative;
    width: 250px;
    height: 5px;
    margin: 0 auto;
}

.focus-container .focus-slider .owl-nav .owl-next,
.focus-container .focus-slider .owl-nav .owl-prev {
    color: var(--theme-warning-color);
    width: 50px;
    /* font-size: 25px; */
}

.focus-container .focus-slider .owl-nav .owl-next:hover,
.focus-container .focus-slider .owl-nav .owl-prev:hover {
    color: var(--theme-warning-color);
    background-color: #ffffff00;
    opacity: 0.6;
}

.focus-container .focus-slider .owl-nav .owl-next {
    position: absolute;
    right: 0;
    top: 0;
}

.focus-container .focus-slider .owl-nav .owl-prev {
    position: absolute;
    left: 0;
    top: 0;
}

/* card subjects */
.card.card-container {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25);
    border: none;
}

.card.card.card-container .card-rate {
    position: absolute;
    background: url("/assets/images/icons/rate-tag.png") no-repeat center right/cover;
    width: 75px;
    text-align: left;
    padding: 5px 5px 5px 10px;
    top: 30px;
    left: 0;
}

.card.card.card-container .card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.course-carousel .card.card.card-container .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-title {
    font-size: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* .card.card.card-container .card-info .card-info-left {
} */
/* onetouch course */
.onetouch-course-container {
    background: url("/assets/images/banner/onetouch-course-banner.png") no-repeat center right/cover;
}

/* Onetouch info */
.onetouch-info-container .img-left-2 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 0 20px 20px 0;
}

.onetouch-info-container .img-left-1 {
    margin-left: -4rem;
}

@media (max-width: 575.98px) {
    .onetouch-info-container .img-left-2 {
        border-radius: 20px;
    }
}

/* partners */
.partner-container .partner-items .partner-img {
    width: calc(100% / 3 - 10px);
    max-width: 250px;
    height: 150px;
    object-fit: contain;
}

.carousel-container {
    overflow: hidden;
    margin: -20px;
    padding: 20px 0;
}

/*.owl-carousel .owl-stage-outer {*/
/*  align-items: center;*/

/*  overflow: visible;*/
/*  !* margin-left: -15px; *!*/
/*}*/
/* .owl-carousel .owl-stage-outer .item {
  margin-left: 15px;
} */
/* Login page */

.login-container .login-form .form-group {
    width: 100%;
    border: 1px solid var(--theme-primary-color-2);
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.login-container .login-form .form-group .input-icon {
    width: 50px;
    position: absolute;
}

.login-container .login-form .form-group .input-custom-1 {
    border: none;
    height: 100%;
    outline: none;
    width: calc(100% - 50px);
    margin-left: 50px;
}

.login-container .login-form .form-group .btn-check-password {
    text-decoration: none;
    color: var(--theme-dark-color-1);
    padding: 0 10px;
    background-color: none;
}

.login-banner-right {
    height: 100vh;
}

.login-banner-right img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.signing-container {
    height: 100vh;
}

.signing-container .login-container {
    height: 100vh;
}

/* Course info page */
.course-info-banner {
    height: 50vh;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat; /* display: block; */
}

.course-info-banner .course-info-banner-text {
    height: 100%;
}

.course-info-container .course-info-img {
    width: 100%;
    object-fit: cover;
    height: 400px;
    object-position: center center;
}

.course-info-container .small-info {
    background-color: #fff4ed;
    padding: 10px 20px;
    width: 100px;
    border-radius: 5px;
}

.tabs-header {
    background: #f2f2f2;
    border-radius: 10px;
}

.tabs-header li a {
    padding: 15px 20px;
    color: #3e3f42;
    font-weight: 600;
}

.tabs-header .active {
    background-color: var(--theme-primary-color-1) !important;
    border-radius: 10px !important;
}

.course-info-container .info-sub-second {
    color: var(--theme-primary-color-1);
}

/* timeline */
.course-info-container .timeline {
    position: relative;
}

.course-info-container .timeline > li a.timeline-arcordion {
    color: var(--theme-dark-color-1);
    font-weight: 600;
}

/*Line*/
.course-info-container .timeline > li::before {
    content: "";
    position: absolute;
    width: 1px;
    background-color: var(--theme-primary-color-1);
    top: 0;
    bottom: 0;
    left: -19px;
}

/*Circle*/
.course-info-container .timeline > li::after {
    text-align: center;
    padding-top: 10px;
    z-index: 10;
    content: counter(item, decimal-leading-zero);
    position: absolute;
    width: 50px;
    height: 50px;
    border: 5px solid white;
    background-color: var(--theme-primary-color-1);
    border-radius: 50%;
    top: 0;
    left: -43px;
    font-weight: 600;
    color: white;
}

/*Content*/
.course-info-container .timeline > li {
    counter-increment: item;
    padding: 10px 10px;
    margin-left: 0px;
    min-height: 70px;
    position: relative;
    list-style: none;
}

.course-info-container .timeline > li:nth-last-child(1)::before {
    width: 0px;
}

/* mix */

.borderless td,
.borderless th {
    border: none !important;
}

/* IMG */
.course-info-container .img-comment {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 50px;
    z-index: 1;
}

.course-info-container .img-teacher {
    width: 150px;
    height: 150px !important;
    object-fit: cover;
    border-radius: 5px;
}

.course-info-container .progress-info {
    height: 15px;
    width: 90%;
    display: flex;
    border-radius: 10px;
}

.course-info-container .percent-number {
    width: 50px;
    text-align: end;
}

.course-info-container .progress-show-info {
    background-color: var(--theme-primary-color-1);
    border-radius: 50px;
}

.course-info-container .rate-cmt li {
    padding: 0;
    margin: 10px 0;
}

/* CMT tabs */
.course-info-container .cmt-part {
    list-style: none;
}

.course-info-container .cmt-list,
.course-info-container .reply-list {
    position: relative;
    margin-top: 25px;
}

.course-info-container .cmt-list::after {
    content: "";
    position: absolute;
    width: 1px;
    background-color: var(--theme-dark-color-2);
    top: 0;
    bottom: 57px;
    left: 36px;
    z-index: 0;
}

.course-info-container .reply-list .img-comment {
    width: 50px;
    height: 50px;
}

.course-info-container .reply-list::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 75px;
    background-color: var(--theme-dark-color-2);
    top: 25px;
    left: -55px;
    z-index: 0;
}

.course-info-container .contact-tab-img {
    max-height: 700px;
    object-fit: cover;
    object-position: bottom;
}

@media (max-width: 575.98px) {
    .course-info-banner {
        height: 20vh;
        background-position: center right;
        background-size: cover;
        background-repeat: no-repeat; /* display: block; */
    }

    .course-info-banner .course-info-banner-title {
        font-size: 2.5vh;
    }

    .course-info-banner .course-info-banner-subtitle {
        font-size: 1.5vh;
    }
}

/* lesson-container */
.lesson-container {
    height: 90vh;
    padding-left: 7%;
    position: relative;
}

.lesson-container .lesson-sidebar {
    display: block;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: white;
    transition: width .5s ease-in-out;
    z-index: 2;
}

.lesson-container .lesson-sidebar .lesson-sidebar-btn {
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    height: 70px;
    width: 35px;
    position: absolute;
    top: calc(50% - 35px);
    left: -35px;
    background-color: white;
    box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.1);
}

.lesson-container .lesson-main {
    width: 100%;
    max-width: 100vw;
    padding-right: 6%;
    margin-top: 40px;
}

.lesson-container .lesson-main .lesson-files,
.lesson-container .lesson-main video {
    width: 100%;
    height: 75%;
    object-fit: cover;
}

.lesson-container .lesson-menu .nav {
    background-color: #f2f2f2;
}

.lesson-container .lesson-menu .nav .nav-item .active {
    background-color: var(--theme-warning-color);
}

.lesson-container .lesson-menu .nav .nav-item a.nav-link.active {
    color: var(--theme-primary-color-1);
}

.lesson-container .lesson-menu .nav .nav-item a.nav-link {
    color: var(--theme-dark-color-1);
    padding: 10px 0px;
    border-radius: 10px;
}

.lesson-menu::-webkit-scrollbar {
    display: none;
}

.header .sidebar-toggle {
    color: white;
}

.header .sidebar-toggle.active {
    color: var(--theme-warning-color);
}

.lesson-container .lesson-btn .lesson-fullscreen,
.lesson-container .lesson-btn .lesson-btn-prev,
.lesson-container .lesson-btn .lesson-btn-next,
.lesson-container .lesson-btn .lesson-btn-auto {
    background-color: var(--theme-dark-color-2);
    color: #fff;
    margin: 2px;
}

.lesson-container .lesson-btn .lesson-fullscreen:hover,
.lesson-container .lesson-btn .lesson-btn-prev:hover,
.lesson-container .lesson-btn .lesson-btn-next:hover,
.lesson-container .lesson-btn .lesson-btn-auto:hover {
    background-color: var(--theme-dark-color-1);
    color: #fff;
    margin: 2px;
}

.popup-lesson-done .modal-dialog .modal-content {
    border-radius: 10px;
    overflow: hidden;
}

.popup-lesson-done .modal-dialog .modal-content .modal-close-btn {
    position: absolute;
    right: 15px;
    top: 15px;
}

.card-title a {
    color: #3E3F42;
    text-decoration: none;
}

label.error {
    color: red;
    font-size: 14px;
    display: initial;
}

#bg-load {
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.loader {
    text-indent: -9999em;
    margin: 88px auto;
    position: relative;
    top: 35%;
    background: url('../assets/images/loading.gif') no-repeat center;
    background-color: rgba(0, 0, 0, 0.3);
    width: 146px;
    height: 26px;
}

.lesson-container .lesson-sidebar.hide .lesson-menu {
    transition: all .5s;
}

@media (min-width: 992px) {
    .lesson-container .lesson-sidebar {
        position: relative;
        width: 48%;
    }

    .lesson-container .lesson-sidebar.hide {
        width: 0;
    }

    .lesson-container .lesson-sidebar.hide .lesson-menu {
        visibility: hidden;
        opacity: 0;
    }

    .lesson-container .lesson-sidebar .lesson-menu .tab-content {
        overflow-y: auto;
        max-height: calc(90vh - 44px - 1rem);
    }
}

@media (max-width: 991.98px) {
    .lesson-container .sidebar-back.active {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .lesson-container .lesson-sidebar {
        position: fixed;
        top: 50px;
        width: 0;
    }

    .lesson-container .lesson-sidebar.active {
        width: 50%;
    }

    .Navigation-item-logo a {
        width: 114px;
    }

    .Navigation-item-logo a img {
        width: 100%;
    }

    .lesson-container .lesson-sidebar .lesson-menu .tab-content {
        overflow-y: auto;
        max-height: calc(90vh - 44px - 70px - 1rem);
    }
}

@media (max-width: 767.98px) {
    .lesson-container .lesson-sidebar.active {
        width: 95%;
    }
}

@media (max-width: 991.98px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
        width: 100%;
        padding-right: 40px;
        padding-left: 40px;
        margin-right: auto;
        margin-left: auto;
    }
}

.Navigation .Navigation-item .Navigation-auth {
    position: relative;
    cursor: pointer;
}

.Navigation .Navigation-item .Navigation-auth .Navigation-auth-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.Navigation .Navigation-item .Navigation-auth .Navigation-auth-name {
}

.Navigation .Navigation-item .Navigation-auth .Navigation-auth-dropdown {
    position: absolute;
    top: 100%;
    min-width: 148px;
    background: #FFFFFF;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    margin-bottom: 0;
    z-index: 20;
    /*left: -76%;*/
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    transform: translateY(50%);
}

.Navigation .Navigation-item .Navigation-auth.show .Navigation-auth-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
}

.Navigation .Navigation-item .Navigation-auth .Navigation-auth-dropdown .Navigation-auth-dropdown-item {

}

.Navigation .Navigation-item .Navigation-auth .Navigation-auth-dropdown .Navigation-auth-dropdown-item:last-child {
    border-bottom: unset;
}

.Navigation .Navigation-item .Navigation-auth .Navigation-auth-dropdown .Navigation-auth-dropdown-item .Navigation-auth-dropdown-item-link {
    display: block;
    width: 100%;
    color: black;
    transition: .5s;
    font-size: 14px;
    border-bottom: 1px solid #BCBDC0;
    padding: 8px;

}

.Navigation .Navigation-item .Navigation-auth .Navigation-auth-dropdown .Navigation-auth-dropdown-item:hover .Navigation-auth-dropdown-item-link {
    background: #F2F2F2;
    color: #7C94C4;
}

@media (max-width: 768px) {
    .Navigation .Navigation-item .Navigation-auth {
        flex: 1;
        justify-content: flex-end;
    }

    .Navigation .Navigation-item .Navigation-auth .Navigation-auth-dropdown {
        /*left: 0%;*/
    }
}

.Navigation.fixed {
    position: fixed;
    width: 100%;
    left: 0;
    background: white;
    top: 0;
    z-index: 99;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
}

.box-video, .box-doc {
    width: 100%;
    height: 75%;
    object-fit: cover;
    border-radius: 10px;
}

.lesson-container .box-video video, .lesson-container .box-doc iframe {
    height: 100%;
}

.gallery-post .nav-pills .nav-link.active {
    background: #264D9D !important;
}

a {
    color: #264D9D;
}

.gallery-post .nav-link {
    padding: 17px;
    color: #3E3F42;
    font-weight: 600;
}

.rounded-item {
    border-radius: 10px;
}

.right-blog {
    border-right: 1px solid #dee2e6;
}

.media-title a {
    font-weight: bold;
}

.btn-blogs-loadmore {
    text-decoration: underline;
}

.timer {
    font-size: 16px;
    /* font-style: italic; */
    color: #3E3F42;
}

.titlesidebar {
    font-weight: bold;
    color: #264D9D;
}

.gallery-post .nav {
    background: #F2F2F2;
}

.focusSwiper {
    position: relative;
    padding-top: 50px;
    overflow: visible;
    overflow: hidden;

}

.focusSwiper .media {
    width: 100%;
    overflow: hidden;
}

.focusSwiper .focusSwipper-img {
    margin-left: 0;
    float: right;
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
}

.focusSwiper .swiper-slide-active .focusSwipper-img {
    /*float: right;*/
    width: 60%;
    /*object-fit: cover;*/
    /*border-radius: 10px;*/
    /*overflow: hidden;*/
    margin-right: 7%;
}

.navigation-swipper div {
    color: black;
    font-weight: bold;
    background: white;
}

.navigation-swipper div:after {
    font-size: 18px;
    font-weight: bold;
}

.media1 {
    display: block;
    overflow: hidden;
    position: relative;
}

.focusSwiper .swiper-slide-active .media-body {
    display: block !important;
}

.swiper-slide {
    opacity: 0.7;
}

.swiper-slide.swiper-slide-active {
    opacity: 1;
}

.focusSwiper .media-body h5 {
    color: #264D9D;
    text-transform: uppercase;
}

.focusSwiper .media-body {
    position: absolute;
    top: 11%;
    left: 10%;
    background-color: #ffffffd8;
    padding: 20px;
    border-radius: 20px;
    display: none;
    box-shadow: 3px 3px 10px;
    max-width: 400px;
}

.navigation-swipper {
    position: absolute;
    display: block;
    bottom: 50px;
    left: 16%;
    width: 150px;
}

.navigation-swipper .swiper-button-next, .navigation-swipper .swiper-button-prev {
    /* background-color: #F2F2F2; */
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

.navigation-swipper .swiper-button-next:hover, .navigation-swipper .swiper-button-prev:hover {
    background: #D2DBEB;
}

body section .swiper-slide {
    display: block;
}

.title-main-post {
    font-size: 46px;
    color: #264D9D;
}

.gallery-post .nav-item a {
    border-radius: 10px;
}

.list-group-item-action.active {
    color: #212529;
    background-color: #e9ecef;
}

.completeAndPlayNext {
    position: absolute;
    right: 15px;
    background: #264d9d;
    border-radius: 5px;
    /* font-family: Roboto; */
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    padding: 21px 28px;
    border: 1px solid transparent;
    text-transform: none;
    display: inline-block;
    line-height: 1;
    opacity: 0.8;
    transition: 0.8s;
}

.box-doc {
    position: relative;
}

.completeAndPlayNext:hover {
    opacity: 1;
    transition: 0.8s;
}

.completeAndPlayNext:disabled {
    opacity: 1;
    cursor: not-allowed;
}

.shadow-custom {
    box-shadow: 1px 1px 5px #ccc, -1px -1px 5px #ccc;
    border-radius: 10px;
}

.circle-custom {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
}

.bg-custom-primary {
    background-color: var(--theme-primary-color-1) !important;
}

.grid-col-2-custom {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.box-shadow-custom {
    box-shadow: 1px 1px 5px #ccc, -1px -1px 5px #ccc;
    border-radius: 10px;
    width: 96px;
    height: 90px;
    line-height: 10px;
}

.btn-refresh-quiz {
    border-radius: 10px;
}

@media (max-width: 768px) {
    .focusSwiper .swiper-slide-active .focusSwipper-img, .focusSwiper .focusSwipper-img {
        width: 100%;
        height: 350px;
        margin-top: 20px;

    }

    .focusSwiper .media-body {
        font-size: 1em;
        top: 0;
        left: 10px;
        right: 15%;
        bottom: 20%;
        background-color: #fffffff8;
    }

}

@media (max-width: 1366px) {
    .mejs__container-fullscreen .mejs__poster {
        background-size: contain !important;
    }

    .lesson-container .lesson-main .lesson-files, .lesson-container .lesson-main .mejs__container-fullscreen video {
        -webkit-object-fit: contain;
        object-fit: contain;
    }

    /* .mejs__mediaelement{
        display: flex;
        align-items: center;
        display: -webkit-flex;
        -webkit-align-items: center;
    } */
    .mejs__mediaelement {
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-display: flex;
        -webkit-align-items: center;
        -webkit-justify-content: center;
    }
}

.mejs__mediaelement video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Additional fullscreen specific styles */
.mejs__mediaelement video:fullscreen,
.mejs__mediaelement video:-webkit-full-screen,
.mejs__mediaelement video:-moz-full-screen,
.mejs__mediaelement video:-ms-fullscreen {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}