:root {
    --brand-color-1: #006891;
    --brand-color-2: #00b9f1;
}

html {
    scroll-behavior: smooth;
}

.brand-color-1 {
    color: var(--brand-color-1);
}

.brand-color-2 {
    color: var(--brand-color-2);
}

.rahpooyan-blue-1 {
    color: var(--brand-color-1);
}

.rahpooyan-blue-2 {
    color: var(--brand-color-2);
}

::selection {
    background-color: var(--brand-color-1);
    color: #ffffff;
}

::-webkit-scrollbar-track {
    background: #ccc;
}

::-webkit-scrollbar {
    width: 6px;
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: var(--brand-color-2);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-color-1);
}

:root, * {
    scrollbar-width: thin;
    scrollbar-color: #999 #666;
}

body {
    direction: rtl;
    text-align: right;
    font-family: myfont, sans-serif !important;
}

button:focus, input:focus {
    outline: none;
}

a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    color: var(--brand-color-1);
}

a {
    font-family: myfont, serif !important;
}

a:hover {
    color: var(--brand-color-2);
    text-decoration: none;
}

.top-line {
    border-top: 10px solid var(--brand-color-1);
    padding: 0;
    margin: 0;
}


.logo .instance-logo {
    width: 100%;
}

@media (max-width: 992px) {
    .logo .instance-logo {
        width: 110px;
    }
}

@media (max-width: 992px) {
    .top-menu {
        display: none;
    }
}

.top-menu ul {
    list-style: none;
    display: flex;
    padding: 5px 19px;
    margin: -5px 0 0;
    background-color: var(--brand-color-1);
    justify-content: flex-end;
    width: max-content;
    float: left;
    border-bottom-right-radius: 50px 100px !important;
    border-bottom-left-radius: 50px 100px !important;
}

.top-menu ul li {
    margin-right: 10px;
}

.top-menu ul li a {
    color: #fff;
    font-size: 14px;
}

.help-block {
    background-color: #4b658417;
    display: flex;
    font-size: 13px;
    padding: 2px 17px;
    border-radius: 0 0 0.25rem 0.25rem;
    margin-top: -2px;
    z-index: -1;
    color: #4b6584;
}

.user-block {
    background-color: #f1f3f5;
    display: flex;
    font-size: 17px;
    padding: 2px 17px;
    border-radius: 0.25rem 0.25rem 0 0;
    margin-bottom: -2px;
    z-index: -1;
    color: #727577;
}

header {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 2px 0 #00000038;
    transition: all 0.5s ease-in-out;
}

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

@media (max-width: 992px) {
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: white;
    }
}

@media (max-width: 992px) {
    .isShow {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
    }

    .isHide {
        opacity: 0;
        -webkit-transform: translate(0, -78px);
        -moz-transform: translate(0, -78px);
        -ms-transform: translate(0, -78px);
        -o-transform: translate(0, -78px);
    }
}

.pri-btn, ._save {
    margin-bottom: 5px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    padding: 0.3em 1em;
    background-color: var(--brand-color-1);
    border: 2px solid var(--brand-color-1);
    color: #fff !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.pri-btn i, .pri-btn svg, ._save i, ._save svg {
    margin-left: 5px;
    font-size: 20px;
    margin-right: 5px;
}

.pri-btn:hover, ._save:hover {
    background-color: transparent;
    color: var(--brand-color-1) !important;
}

.sec-btn, ._cancel, .btn-danger {
    margin-bottom: 5px;
    font-weight: bold;
    border-radius: 50px;
    font-size: 14px;
    padding: 0.3em 1em;
    background-color: var(--brand-color-2);
    border: 2px solid var(--brand-color-2);
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.sec-btn i, .sec-btn svg, ._cancel i, ._cancel svg, .btn-danger i, .btn-danger svg {
    margin-left: 5px;
    font-size: 20px;
    margin-right: 5px;
}

.sec-btn:hover, ._cancel:hover, .btn-danger:hover {
    background-color: transparent;
    color: var(--brand-color-2);
    border: 2px solid var(--brand-color-2);
}

.thr-btn, .btn-primary {
    margin-bottom: 5px;
    font-weight: bold;
    border-radius: 50px;
    font-size: 14px;
    padding: 0.3em 1em;
    background-color: var(--brand-color-1);
    border: 2px solid var(--brand-color-1);
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.thr-btn i, .thr-btn svg, .btn-primary i, .btn-primary svg {
    margin-left: 5px;
    font-size: 20px;
    margin-right: 5px;
}

.thr-btn:hover, .btn-primary:hover {
    background-color: transparent;
    color: var(--brand-color-1);
    border: 2px solid var(--brand-color-1);
}

@media (max-width: 700px) {
    .pri-btn, .sec-btn, .thr-btn {
        font-size: 13px;
        margin-bottom: 5px;
    }
}

@media (max-width: 992px) {
    .search {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.search form {
    background-color: #ebebeb;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.39);
    padding: 10px;
    border-radius: 10px;
    transition: top 0.3s ease-in-out;
}

@media (max-width: 992px) {
    .search form {
        position: fixed;
        border-radius: 0;
        background-color: #fff;
        width: 100%;
        z-index: 6;
        height: 72px;
        border: none;
        box-shadow: none;
        top: -300px;
    }
}

.search form input {
    border: none;
    background-color: #ebebeb;
    font-size: 12px;
}

.search form input:focus {
    outline-color: #ebebeb;
}

.search form button {
    background-color: var(--brand-color-2);
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 5px 15px;
    font-size: 14px;
}

.search form button:hover {
    color: var(--brand-color-1);
}

@media (max-width: 990px) {
    .search form button {
        font-size: 11px;
        display: none;
    }
}

.search .mobile-search {
    display: none;
    position: absolute;
    top: 15px;
    right: 51px;
    width: 35px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #212529;
}

@media (max-width: 992px) {
    .search .mobile-search {
        display: block;
    }
}

.open {
    top: 10px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px 0 #00000038 !important;
}

.login {
    display: flex;
    justify-content: center;
}

@media (max-width: 992px) {
    .login {
        margin-top: 15px;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.login .link {
    text-align: center;
}

@media (max-width: 992px) {
    .login .link {
        display: none;
    }
}

.login .link .welcome {
    font-size: 14px;
    font-weight: 700;
    color: #5d5d5d;
}

@media (max-width: 1200px) {
    .login .link .welcome {
        font-size: 12px;
    }
}

.login .link .login-button a {
    color: var(--brand-color-1);
    font-size: 19px;
    font-weight: 600;
}

@media (max-width: 1200px) {
    .login .link .login-button a {
        font-size: 15px;
    }
}

.login .link .login-button a:hover {
    color: var(--brand-color-2);
}

@media (max-width: 992px) {
    .login .icon {
        display: none;
    }
}

.login .icon i, .login .icon svg {
    font-size: 45px;
    color: var(--brand-color-1);
    margin-right: 10px;
}

@media (max-width: 1200px) {
    .login .icon i, .login .icon svg {
        font-size: 35px;
    }
}

.login .mobile-login {
    display: none;
    position: absolute;
    top: 0;
    left: 9px;
    width: 35px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #5d5d5d;
    z-index: 2;
}

@media (max-width: 992px) {
    .login .mobile-login {
        display: block;
    }
}

.login .mobile-login-transition {
    position: fixed;
    background-color: #fff;
    width: 70%;
    transform: scale(0, 1);
    opacity: 0;
    top: 0;
    left: 0;
    height: 100vh;
    text-align: center;
    padding-top: 70px;
    border-right: 2px solid var(--brand-color-1) fa;
    box-shadow: 6px 1px 7px 0 #5d5d5d7a;
    z-index: 10;
    transition: all 0.3s ease-in-out;
}

.login .mobile-login-transition a {
    width: 220px;
    margin-bottom: 10px;
}

.open4 {
    transform: scale(1, 1) !important;
    opacity: 1 !important;
}

@media (max-width: 992px) {
    .after-login {
        margin-top: 15px;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.after-login .avatar {
    display: flex;
    align-items: center;
    justify-content: start;
    background-color: #fff;
    padding: 7px;
    border-radius: 10px;
    z-index: 1000;
    border: 1px solid #eee;
    box-shadow: 0 0 2px #dadada;
    position: relative;
}

@media (max-width: 992px) {
    .after-login .avatar {
        display: none;
    }
}

.after-login .avatar:hover {
    border-radius: 10px 10px 0 0;
    background-color: #ebebeb;
}

.after-login .avatar:hover .user-menu {
    display: block;
}

.after-login .avatar .image img {
    width: 35px;
    height: 35px;
    border-radius: 50px;
}

.after-login .avatar .link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.after-login .avatar .link .welcome {
    color: #404040;
}

.after-login .avatar .icon {
    position: absolute;
    left: 30px;
    background-color: #fff;
    color: #5d5d5d;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #5d5d5d;
    box-shadow: 0 0 1px #5d5d5d;
}

.after-login .avatar .user-menu {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #ebebeb;
    top: -1px;
    z-index: -1;
    right: 0;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
}

.after-login .avatar .user-menu:hover {
    display: block;
}

.after-login .avatar .user-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #5d5d5d;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 5px 10px;
    margin-bottom: 5px;
    background-color: #fff;
}

.after-login .mobile-login {
    display: none;
    position: absolute;
    top: 0;
    left: 9px;
    width: 35px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #5d5d5d;
    z-index: 2;
}

@media (max-width: 992px) {
    .after-login .mobile-login {
        display: block;
    }
}

.after-login .mobile-login-transition {
    position: fixed;
    background-color: #fff;
    width: 70%;
    transform: scale(0, 1);
    opacity: 0;
    top: 0;
    left: 0;
    height: 100vh;
    text-align: center;
    padding-top: 70px;
    border-right: 2px solid var(--brand-color-1) fa;
    box-shadow: 6px 1px 7px 0 #5d5d5d7a;
    z-index: 10;
    transition: all 0.3s ease-in-out;
}

.after-login .mobile-login-transition a {
    width: 220px;
    margin-bottom: 10px;
}

.contact-header {
    display: flex;
    justify-content: center;
}

@media (max-width: 992px) {
    .contact-header {
        display: none;
    }
}

.contact-header .text .title {
    color: #5d5d5d;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

@media (max-width: 1200px) {
    .contact-header .text .title {
        font-size: 11px;
    }
}

.contact-header .text .phone {
    color: var(--brand-color-2);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

@media (max-width: 1200px) {
    .contact-header .text .phone {
        font-size: 15px;
    }
}

.contact-header .icon svg, .contact-header .icon i {
    color: var(--brand-color-2);
    font-size: 45px;
    margin-right: 10px;
}

@media (max-width: 1200px) {
    .contact-header .icon svg, .contact-header .icon i {
        font-size: 35px;
    }
}

.title-login {
    color: #5d5d5d;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.phone-login {
    color: var(--brand-color-2);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.userbox > svg, .userbox > i {
    color: var(--brand-color-2);
    font-size: 45px;
    margin-right: 10px;
}

.top-menu-user-login {
    margin-bottom: 10px;
}

.header-hr {
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    margin: 10px;
}

@media (max-width: 992px) {
    .header-hr {
        margin-top: 7px;
        margin-bottom: 7px;
    }
}

.sidebar-sticky {
    position: sticky;
    top: 10px;
}

@media (max-width: 550px) {
    .form-actions .col-md-12 {
        flex-direction: column-reverse;
    }
}

.top-menu-category ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.top-menu-category ul li {
    padding: 15px 0;
    position: relative;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

@media (max-width: 992px) {
    .top-menu-category ul li:hover {
        border-bottom: none;
        padding: 8px 15px;
    }
}

.top-menu-category ul li:hover > ul.submenu {
    display: block;
}

@media (max-width: 992px) {
    .top-menu-category ul li:hover > ul.submenu {
        display: none;
    }
}

.top-menu-category ul li a {
    font-size: 14px;
    color: #5d5d5d;
}

.top-menu-category ul li a:hover {
    color: var(--brand-color-1);
}

.top-menu-category ul li .mobile2 {
    display: none;
}

@media (max-width: 992px) {
    .top-menu-category ul li .mobile2 {
        display: block;
    }
}

.top-menu-category ul li ul.submenu {
    display: none;
    z-index: 2;
    top: 51px;
    right: 0;
    width: max-content;
    min-width: 200px;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
}

@media (max-width: 992px) {
    .top-menu-category ul li ul.submenu {
        transition: all 0.3s ease-in-out;
    }
}

.top-menu-category ul li ul.submenu li {
    padding: 8px;
    margin: 0 10px;
    border: 0;
    position: relative;
    transition: 500ms;
}

.top-menu-category ul li ul.submenu li:hover {
    color: var(--brand-color-2);
}

.top-menu-category ul li ul.submenu li a:hover {
    color: var(--brand-color-1);
}

@media screen and (min-width: 992px) {
    .top-menu-category ul li ul.submenu li:hover > ul.submenu {
        display: block;
        top: 0;
    }
}

.top-menu-category ul li ul.submenu li:hover ul.submenu {
    right: 100%;
}

@media screen and (max-width: 991px) {
    .top-menu-category ul li ul.submenu li:hover ul.submenu {
        right: 0;
    }
}

.top-menu-category ul li ul.submenu li:hover > svg, .top-menu-category ul li ul.submenu li i {
    transform: rotate(90deg);
}

.menu-md nav ul li .mobile .top-menu-category ul li ul.submenu li:after {
    content: "";
    right: -13px;
    top: 16px;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: #e0e0e0;
    position: absolute;
    transition: all 0.2s ease-in-out;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 15px;
    right: 10px;
}

@media (max-width: 992px) {
    .mobile-menu {
        display: block;
    }
}

.mobile-menu .menu-icon {
    width: 35px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    height: 35px;
    display: block;
    text-align: center;
    line-height: 35px;
    z-index: 1;
}

.mobile-menu .menu-icon span {
    margin-right: 55px;
}

@media (max-width: 992px) {
    .menu-md {
        padding-top: 50px;
        max-width: 70%;
        width: 100% !important;
        background-color: white;
        position: fixed;
        top: 0;
        right: -74%;
        height: 100vh;
        z-index: 10;
        border-left: 2px solid var(--brand-color-1) fa;
        box-shadow: -6px 1px 7px 0 #5d5d5d7a;
        transition: right 0.3s ease-in-out;
    }

    .menu-md nav ul {
        display: block;
    }

    .menu-md nav ul li {
        padding: 8px 15px;
    }

    .menu-md nav ul li:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 95%;
        height: 2px;
        background-color: #f7f7f7;
        display: inline-block;
    }

    .menu-md nav ul li .submenu-d {
        display: none;
    }

    .menu-md nav ul li:hover > ul.submenu {
        height: max-content;
    }

    .menu-md nav ul li a svg, .menu-md nav ul li a i {
        display: none;
    }

    .menu-md nav ul li .mobile {
        display: block;
        position: absolute;
        left: 0;
        top: 7px;
        font-size: 15px;
        cursor: pointer;
    }

    .menu-md nav ul li .mobile:hover > .submenu {
        display: block;
    }

    .menu-md nav ul li .rotate {
        transition: all 2s linear;
    }

    .menu-md nav ul li .rotate.down {
        transform: rotate(180deg);
    }

    .menu-md nav ul li ul.submenu {
        display: none;
        top: 5px !important;
        right: 0;
        min-width: 100%;
        position: relative;
        background-color: #f7f7f7;
        box-shadow: none !important;
        height: 0;
        transition: all 0.3s ease-in-out;
    }

    .menu-md nav ul li ul.submenu li {
        padding: 8px;
        margin: 0 15px;
        position: relative;
    }
}

.open1 {
    right: 0;
}

.open2 {
    display: block !important;
    height: 100% !important;
}

@media (max-width: 992px) {
    .mobile-height-0 {
        height: 0 !important;
    }
}

@media (max-width: 992px) {
    .basket-cart {
        position: absolute;
        top: 15px;
        left: 45px;
    }
}


@media (max-width: 992px) {
    .basket-cart .basket {
        display: none;
    }
}

.basket-cart .basket i, .basket-cart .basket svg {
    font-size: 20px;
}

basket-cart .basket {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
/*.basket-cart .basket:hover {*/
/*    color: #5d5d5d;*/
/*    text-shadow: none;*/
/*    border: 1px solid var(--brand-color-1);*/
/*    box-shadow: 0 0 6px var(--brand-color-2) 7 a;*/
/*}*/

/*.basket-cart .basket:hover > .basket-counter {*/
/*    background-color: var(--brand-color-1);*/
/*}*/

.basket-cart .basket .basket-counter {
    position: absolute;
    top: 20px;
    left: 45px;
    font-size: 12px;
    background-color: red;
    padding: 0 9px;
    border-radius: 5px;
    color: #fff;
    transition: background-color 0.3s ease-in-out;
}

.basket-cart .mobile-basket {
    display: none;
    position: absolute;
    top: 0;
    left: 9px;
    width: 35px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #212529;
    padding-right: 1px;
    z-index: 0;
}

@media (max-width: 992px) {
    .basket-cart .mobile-basket {
        display: block;
    }
}

@media (max-width: 770px) {
    .container-slider {
        padding: 0;
    }
}

@media (max-width: 770px) {
    .container-slider .container {
        padding: 0;
    }
}

.container-slider .container .slider-top {
    margin: 35px 0;
}

@media (max-width: 770px) {
    .container-slider .container .slider-top {
        margin: 0;
    }
}

.container-slider .container .slider-top .carousel-control-prev {
    opacity: 1;
    width: 0;
    left: 10px;
    cursor: pointer;
}

.container-slider .container .slider-top .carousel-control-prev:after {
    left: -15px;
    content: "";
    display: block;
    background-color: #ffffff;
    width: 30px;
    height: 56px;
    position: absolute;
    z-index: -1;
    border-radius: 0 5px 5px 0;
    border: 2px solid #fff;
    box-shadow: 3px 0 5px #2d2d2d36;
}

.container-slider .container .slider-top .carousel-control-prev svg, .container-slider .container .slider-top .carousel-control-prev i {
    color: #1f2831;
    font-size: 30px;
}

.container-slider .container .slider-top .carousel-control-next {
    opacity: 1;
    width: 0;
    right: 10px;
    cursor: pointer;
}

.container-slider .container .slider-top .carousel-control-next:after {
    right: -15px;
    content: "";
    display: block;
    background-color: #ffffff;
    width: 30px;
    height: 56px;
    position: absolute;
    z-index: -1;
    border-radius: 5px 0 0 5px;
    border: 2px solid #fff;
    box-shadow: -3px 0 5px #2d2d2d36;
}

.container-slider .container .slider-top .carousel-control-next svg, .container-slider .container .slider-top .carousel-control-next i {
    color: #1f2831;
    font-size: 30px;
}

.course-slider {
    margin: 100px 0;
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
}

@media (max-width: 576px) {
    .course-slider {
        margin: 50px 0;
    }
}

.course-slider .course-slider-title {
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
    font-size: 18px;
    font-weight: 500;
    color: var(--brand-color-2);
    align-items: center;
}

@media (max-width: 576px) {
    .course-slider .course-slider-title {
        padding: 10px;
    }
}

@media (max-width: 576px) {
    .course-slider .course-slider-title span {
        font-size: 15px;
    }
}

.course-slider .course-slider-title span img {
    width: 30px;
    margin-left: 10px;
}

@media (max-width: 576px) {
    .course-slider .course-slider-title span img {
        width: 23px;
        margin-left: 5px;
    }
}

.course-slider .course-slider-title a {
    color: var(--brand-color-2);
}

@media (max-width: 576px) {
    .course-slider .course-slider-title a {
        font-size: 15px;
    }
}

.course-slider .course-slider-title a:hover {
    color: var(--brand-color-1);
}

.course-slider hr {
    width: 96%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.course-slider .card {
    padding: 0;
    box-shadow: 0 0 6px 0 rgb(249 249 249);
    transition: all 0.4s ease-in-out;
}

.course-slider .card:hover {
    -ms-transform: translate(0px, -5px);
    -webkit-transform: translate(0px, -5px);
    transform: translate(0px, -5px);
    cursor: pointer;
    box-shadow: 0 3px 8px 1px #9f9f9f;
}

.course-slider .card:hover .sale {
    background-color: var(--brand-color-2);
    margin: -1px;
}

.course-slider .card:hover .sale a {
    color: #fff;
}

.course-slider .card .card-img-top {
    height: 143px !important;
}

.course-slider .card .card-body {
    padding: 0;
}

.course-slider .card .card-body .card-title {
    margin-bottom: 0;
    text-align: center;
    padding: 5px 10px;
    line-height: 19px;
    height: 55px;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
}

.course-slider .card .card-body .card-title h5 {
    padding: 0;
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    color: #000;
    line-height: 26px;
}

.course-slider .card .card-body .card-title h5 {
    font-family: myfont, serif;
}

.course-slider .card .card-body .card-info {
    height: 58px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.course-slider .card .card-body .card-info .card-course-info {
    padding: 0;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.course-slider .card .card-body .card-info .card-course-info .time {
    font-size: 11px;
    background-color: #f5f5f5;
    padding: 5px;
    text-align: center;
    margin-bottom: 3px;
    margin-right: 5px;
    border-right: 4px solid #5d5d5d;
}

.course-slider .card .card-body .card-info .card-course-info .teacher {
    font-size: 11px;
    background-color: #f5f5f5;
    padding: 5px;
    text-align: center;
    margin-bottom: 3px;
    margin-right: 5px;
    border-right: 4px solid var(--brand-color-2);
}

.course-slider .card .card-body .card-info .card-price {
    display: flex !important;
    flex-direction: column;
}

.course-slider .card .card-body .card-info .card-price .price {
    text-align: right;
    font-size: 28px;
    position: relative;
    color: var(--brand-color-2);
}

.course-slider .card .card-body .card-info .card-price .price .Currency {
    font-size: 11px;
    font-weight: 600;
    margin-right: 5px;
    color: #000;
}

.course-slider .card .card-body .card-info .card-price .price .cost-discount-slider {
    font-size: 15px;
    position: absolute;
    left: 5px;
    bottom: -5px;
    text-decoration: line-through;
}

.course-slider .card .card-body .card-info .card-price .dvd-icon i, .course-slider .card .card-body .card-info .card-price .dvd-icon svg {
    position: absolute;
    bottom: -36px;
    right: -89px;
    font-size: 18px;
    color: #000;
}

.course-slider .card .card-body .card-info .card-price .wrapper-discount-slider {
    text-align: center;
    background-color: var(--brand-color-2);
    color: #f5f5f5;
    font-weight: 600;
    text-decoration: line-through;
    padding: 0 2px;
    font-size: 13px;
    width: 100%;
}

.course-slider .card .card-body .card-info .card-price .cclose, .course-slider .card .card-body .card-info .card-price .cfree {
    text-align: right;
    position: relative;
    padding: 0;
    color: var(--brand-color-2);
    font-weight: 500;
}

.course-slider .card .sale {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #f5f5f5;
    color: #fff;
    transition: background-color 0.4s ease-in-out;
    margin: -1px;
}

.course-slider .card .sale a {
    color: #333;
    transition: color 0.4s ease-in-out;
}

.course-slider .card .sale .add-to-cart {
    display: flex;
    align-items: end;
}

.course-slider .card .sale .add-to-cart svg, .course-slider .card .sale .add-to-cart i {
    font-size: 18px;
    margin-left: 5px;
}

.main-price{
    text-decoration: line-through;
    color: red !important;
    text-align: center;
    display: block;
}

/*Slider*/
.swiper-button-prev {
    border-radius: 8px 0 0 8px;
    margin-right: -43px;
    right: 42px;
}

.swiper-button-next {
    border-radius: 0 8px 8px 0;
    margin-left: -10px;
    left: 0px;
}

.swiper-button-prev, .swiper-button-next {
    color: white;
    -webkit-box-shadow: 1.5px 0 4px 0 rgb(0 0 0 / 15%);
    box-shadow: -1.5px 0 4px 0 rgb(0 0 0 / 15%);
    width: 20px;
    height: 50px;
    position: absolute;
    --swiper-navigation-size: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--brand-color-2);
    background-image: unset;
}

.stat-counter {
    background-color: var(--brand-color-2);
    padding: 30px 0;
    box-shadow: 0 0 6px 0 var(--brand-color-1);
    margin: 50px 0;
}

.stat-counter .number {
    font-size: 60px;
    font-weight: 900;
    letter-spacing: -5px;
    color: #fff;
    text-shadow: 1px 4px 11px var(--brand-color-1);
    text-align: center;
}

@media (max-width: 1200px) {
    .stat-counter .number {
        font-size: 50px;
    }
}

@media (max-width: 990px) {
    .stat-counter .number {
        font-size: 60px;
    }
}

.stat-counter .text {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    word-spacing: -2px;
    text-shadow: -1px -1px 11px var(--brand-color-1);
    margin-top: -20px;
}

.our-partner {
    margin: 80px 0;
}

.our-partner .partner .partner-item {
    padding: 10px;
    display: flex;
    justify-content: center;
}

.our-partner .partner .partner-item img {
    box-shadow: 0 0 6px 0 #e0e0e0ed;
    border-radius: 6px;
    transition: all 0.5s ease-in-out;
}

.our-partner .partner .partner-item img:hover {
    box-shadow: 0 0 11px 0 var(--brand-color-2) 75;
}

.our-partner .partner-button {
    width: max-content;
    background-color: var(--brand-color-1);
    padding: 5px 25px;
    border-radius: 55px;
    color: #fff;
    display: block;
    margin: auto;
}

.our-partner .partner-button:hover {
    background-color: var(--brand-color-2);
}

.blog-modules {
    margin: 80px 0;
}

.blog-modules .title {
    border-top: 2px solid var(--brand-color-2);
    padding: 10px 5px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    background: #f7f7f7;
    align-items: baseline;
}

.blog-modules .title h4 {
    font-weight: 600;
    font-size: 16px;
    color: var(--brand-color-2);
}

.blog-modules a:hover {
    color: var(--brand-color-1);
}

.blog-modules a .blog-card {
    border-radius: 10px;
    margin-bottom: 30px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.blog-modules a .blog-card:hover {
    box-shadow: 0 9px 20px #00000059;
    transform: scale(1.01);
}

.blog-modules a .blog-card img {
    width: 100%;
    border-radius: 10px 10px 0 0;
    height: 177px !important;
}

@media (max-width: 992px) {
    .blog-modules a .blog-card img {
        height: auto;
    }
}

.blog-modules a .blog-card h4 {
    font-size: 15px;
    padding: 10px;
    text-align: center;
    color: #5d5d5d;
    height: 65px;
    line-height: 25px;
    overflow: hidden;
}

.blog-modules a .blog-card .blog-link {
    background-color: #f7f7f7;
    padding: 10px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    border-bottom: 2px solid var(--brand-color-1);
    color: var(--brand-color-1);
}

.blog-modules a:hover .blog-card .blog-link {
    border-bottom: 2px solid var(--brand-color-2);
}

footer#footer {
    background: #f7f7f7;
}

footer .app-section {
    border-bottom: 1px solid #989898;
    padding: 10px 0;
    align-items: center;
}

footer .app-section .phone {
    text-align: left;
    color: #6c757d;
}

footer .app-section .phone span a {
    direction: ltr;
    display: inline-block;
    font-weight: 500;
}

footer .instance-section {
    color: #6c757d;
    font-weight: 300;
    line-height: 30px;
}

footer .instance-section .footer-menu ul {
    padding-right: 25px;
}

footer .instance-section .footer-menu ul li {
    list-style: none;
}

footer .instance-section .footer-menu ul li a {
    color: #6c757d;
    transition: 400ms;
    font-weight: 300;
    line-height: 30px;
    display: inline-block;
}

footer .instance-section .footer-menu ul li a:hover {
    color: var(--brand-color-2);
    transform: translateX(-5px);
}

footer .owner-section {
    color: #6c757d;
    padding: 20px 0;
    font-weight: 300;
}

footer .owner-section a {
    color: var(--brand-color-2);
    font-weight: 400;
}

footer .owner-section a:hover {
    font-weight: 700;
}

footer .owner-section .social {
    text-align: left;
}

footer .owner-section .social a {
    padding: 5px;
    transition: 400ms;
    width: 35px;
    height: 35px;
    line-height: 30px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
}

footer .owner-section .social a:hover {
    background: #3f51b51f;
}

/** course-page-title **/
.course-box {
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    margin: 20px 10px;
}

.course-box .course-box-head {
    background-color: #f6f6f6;
    border-radius: 10px 10px 0 0;
    padding: 15px 10px;
    color: #444;
}

.course-box .course-box-head span {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    display: inline-flex;
    border: 1px solid rgba(93, 93, 93, 0.61);
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 0 auto 3px;
    background-color: #fff;
    color: #5d5d5d;
    transition: all 0.3s ease-in-out;
}

.course-box .course-box-head h3 {
    display: inline-block;
    font-size: 18px;
    padding: 0;
    margin: 0;
}

.course-box .course-box-body {
    padding: 20px;
    line-height: 2;
    color: #6c757d;
    font-weight: 300;
    font-size: 16px;
}

.course-box .course-box-body .table-responsive {
    font-size: 14px;
}

.orange .course-box-head {
    background-color: #fb513014 !important;
    color: var(--brand-color-2) !important;
}

.orange .course-box-head span {
    color: var(--brand-color-2) !important;
    border: 1px solid var(--brand-color-2) !important;
}

.blue {
    border-top: 3px solid #314d6c;
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
}

.blue .course-box-head {
    background-color: #fff !important;
    color: #444 !important;
}

.blue .course-box-head span {
    color: #314d6c !important;
    border: 1px solid #314d6c !important;
}

.course-page-title {
    background-color: #f6f6f6;
    margin-bottom: 30px;
    padding: 40px 0;
}

@media (max-width: 768px) {
    .course-page-title {
        padding: 25px 0;
        margin-bottom: 30px;
    }
}

.course-page-title h1 {
    text-align: center;
    font-size: 32px;
    color: var(--brand-color-1);
    font-weight: 500;
}

@media (max-width: 768px) {
    .course-page-title h1 {
        font-size: 23px;
    }
}

.course-page-title h3 {
    text-align: center;
    font-size: 20px;
    color: #444444;
    font-weight: 500;
    margin-top: 15px;
}

@media (max-width: 768px) {
    .course-page-title h3 {
        font-size: 18px;
        margin-top: 10px;
    }
}

.video-player {
    border: 1px solid #5d5d5d29;
    border-radius: 10px;
    margin-bottom: 20px;
}

.video-player img {
    border-radius: 10px;
}

[data-player] {
    border-radius: 10px 10px 0 0 !important;
}

#infoCourse {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    z-index: 99;
}

@media (max-width: 992px) {
    #infoCourse {
        position: relative !important;
        top: unset;
        z-index: unset;
    }
}

.course-info {
    background-color: #f6f6f6;
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 10px 5px 5px 5px;
}

.course-info .course-info-item {
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
    align-items: center;
    box-shadow: 0 0 8px #8c8c8c26;
}

.course-info .course-info-rating {
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-info .course-info-item .title {
    color: #444;
}

.course-info .course-info-item .value {
    color: var(--brand-color-2);
    font-size: 14px;
}

.course-info .sale-item {
    display: block;
    padding: 24px 10px;
    text-align: center;
}

.course-info .sale-item .price {
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 992px) {
    .course-info .sale-item .price {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.course-info .sale-item .price .cost {
    font-size: 24px;
    font-weight: 600;
    color: var(--brand-color-2);
    letter-spacing: -1px;
    margin-bottom: 10px;
}

@media (max-width: 992px) {
    .course-info .sale-item .price .cost {
        margin-left: 5px;
    }
}

.course-info .sale-item .price .currency {
    font-size: 14px;
    font-weight: 600;
    color: #009ca9;
}

.course-info .sale-item .price .price-off {
    color: var(--brand-color-2);
    text-decoration: line-through;
    font-size: 17px;
    margin-left: 10px;
}

@media (max-width: 992px) {
    .course-info .sale-item .price .price-off {
        position: unset;
        margin-left: 10px;
    }
}

.course-info .sale-item .pri-btn i, .course-info .sale-item .pri-btn svg {
    font-size: 15px !important;
}

.course-info .sale-item .pri-btn span {
    font-size: 13px;
    font-weight: 600;
}

.course-info .sale-item .physical-info {
    margin-bottom: -30px;
}

.course-info .sale-item .physical-info .text {
    text-align: right;
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #f9d87f;
    padding: 8px;
    font-size: 13px;
    margin-top: 10px;
    border-radius: 2px;
}

.course-info .sale-item .physical-item {
    display: block;
    color: #fff;
    background-color: #2c609b;
    border-color: #d6d8db;
    padding: 3px 0;
    margin: 10px -10px -24px;
    box-shadow: 0 3px 5px #a0a0a075;
    text-align: center;
    font-size: 14px;
    border-radius: 0 0 5px 5px;
}

.course-tab {
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 15px 10px;
    /*margin: 25px 0 10px;*/
}

@media (max-width: 992px) {
    .course-tab {
        margin: 40px 0 10px;
    }
}

.course-tab .tab-items {
    display: flex;
    justify-content: space-evenly;
}

.course-tab .tab-items .tab-item {
    text-align: center;
    display: block;
    color: #5d5d5d;
    width: 100%;
}

.course-tab .tab-items .tab-item:hover span {
    border: 1px solid #009ca9;
    color: #009ca9;
}

.course-tab .tab-items .tab-item:hover div {
    color: #009ca9;
}

.course-tab .tab-items .tab-item span {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    display: flex;
    border: 1px solid rgba(93, 93, 93, 0.61);
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 0 auto 3px;
    background-color: #fff;
    color: #5d5d5d;
    transition: all 0.3s ease-in-out;
}

.course-tab .tab-items .tab-item div {
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    margin-top: 7px;
}

.course-tab .sale-item-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 992px) {
    .course-tab .sale-item-tab {
        display: none;
    }
}

.course-tab .sale-item-tab .sale-btn {
    height: 35px;
}

.course-tab .sale-item-tab .sale-btn i, .course-tab .sale-item-tab .sale-btn svg {
    font-size: 15px !important;
}

.course-tab .sale-item-tab .price {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-tab .sale-item-tab .price .price-off {
    color: var(--brand-color-2);
    text-decoration: line-through;
    font-size: 17px;
    margin-left: 10px;
}

.course-tab .sale-item-tab .price .cost {
    font-size: 24px;
    font-weight: 600;
    color: var(--brand-color-2);
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.course-tab .sale-item-tab .price .currency {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-color-2);
}

.course-tab .sale-item-tab .add-cart-box {
    text-align: center;
}

#sessionCourse .session {
    background-color: #fff;
    border: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    min-height: 70px;
    font-size: 18px;
    color: #01676f;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
}

#sessionCourse .session:hover > a {
    background-color: var(--brand-color-2);
    color: #fff;
}

#sessionCourse .session h3 {
    font-size: 16px;
    color: #444;
    padding: 0;
    margin: 0;
}

#sessionCourse .session a {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #fff;
    border-radius: 50px;
    color: var(--brand-color-2);
    border: 1px solid var(--brand-color-2);
    box-shadow: 0 0 3px var(--brand-color-2);
    font-size: 15px;
    width: 110px;
    height: 32px;
    transition: all 0.3s ease-in-out;
}

#sessionCourse .session .open-session {
    display: flex;
}

#sessionCourse .session .close-session {
    display: none;
}

#sessionCourse [aria-expanded=true] {
    background-color: var(--brand-color-1);
}

#sessionCourse [aria-expanded=true] .open-session {
    display: none;
}

#sessionCourse [aria-expanded=true] .close-session {
    display: flex;
}

#sessionCourse [aria-expanded=true] h3 {
    color: #fff;
}

#sessionCourse [aria-expanded=true] a {
    color: var(--brand-color-1);
    border: 1px solid #142231;
    box-shadow: 0 0 7px var(--brand-color-1);
}

#sessionCourse [aria-expanded=true]:hover a {
    background-color: var(--brand-color-1);
    color: #fff;
    border: 1px solid #fff;
}

#sessionCourse button:focus {
    outline: none;
}

#sessionCourse .session-item {
    background-color: #f6f6f6;
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
}

#sessionCourse .session-item .session-item-child {
    padding: 10px 5px;
    background-color: #eee;
    border-radius: 50px;
    margin-bottom: 6px;
    border: 1px solid #dedede;
    cursor: no-drop;
}

#sessionCourse .session-item .session-item-child .checkmark {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: #ffffff;
    border-radius: 50px;
    margin-left: 5px;
    border: 1px solid #0000006e;
    margin-right: -10px;
    position: relative;
}

#sessionCourse .session-item .session-item-child .checkmark i, #sessionCourse .session-item .session-item-child .checkmark svg {
    display: none;
    color: var(--brand-color-1);
!important;
    position: absolute;
    top: -1px !important;
    right: -1px;
    font-size: 20px !important;
}

#sessionCourse .session-item .session-item-child .completed i, #sessionCourse .session-item .session-item-child .completed svg {
    display: block;
}

#sessionCourse .session-item .session-item-child .add-cart-form .pri-btn {
    border-radius: unset;
    padding: unset;
    background-color: unset;
    border: unset;
    color: var(--brand-color-2) !important;
}

#sessionCourse .session-item .session-item-child .add-cart-form .pri-btn span {
    display: none;
}

#sessionCourse .session-item .session-item-child i, #sessionCourse .session-item .session-item-child svg {
    font-size: 20px;
    margin-left: 5px;
}

#sessionCourse .session-item a .session-item-child {
    padding: 10px 5px;
    background-color: #fff;
    border-radius: 50px;
    margin-bottom: 6px;
    border: 1px solid var(--brand-color-2);
    color: var(--brand-color-2);
    cursor: pointer;
}

#sessionCourse .session-item a .session-item-child:hover {
    background-color: var(--brand-color-2);
    color: #fff;
}

/* check box lesson */
/* The containerchek */
.activity-title {
    display: flex;
    align-items: center;
    padding-right: 30px;
}

#teacherCourse .teacher .name-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

#teacherCourse .teacher .name-link .name .link {
    height: max-content;
}

#teacherCourse .teacher .name-link .name .teacher-img img {
    width: 80px;
    height: 80px;
    border-radius: 50px;
    border: 2px solid #f6f6f6;
    box-shadow: 0 0 0 2px var(--brand-color-2);
    margin-left: 6px;
}

#teacherCourse .teacher .name-link .name .teacher-name {
    font-size: 20px;
    font-weight: 500;
    color: #5d5d5d;
}

@media (max-width: 425px) {
    #teacherCourse .teacher .name-link .name .teacher-name {
        font-size: 12px;
        margin-top: 10px;
    }
}

@media (max-width: 425px) {
    #teacherCourse .teacher .name-link .name {
        display: flex;
        flex-direction: column;
    }
}

#teacherCourse .teacher .teacher-info {
    padding: 10px;
    margin-top: 20px;
}

#teacherCourse .teacher:last-child hr {
    display: none;
}

#commentCourse .list-comments {
    display: block;
    padding: 10px;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 0 12px #d8d8d8c2;
    margin: 15px;
    transition: all 0.3s ease-in-out;
}

#commentCourse .list-comments:hover {
    box-shadow: 0 0 20px #b7b7b7;
    transform: translateY(-2px);
}

#commentCourse .list-comments .commenter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 10px;
}

@media (max-width: 720px) {
    #commentCourse .list-comments .commenter {
        display: block;
    }
}

#commentCourse .list-comments .commenter .name, #commentCourse .list-comments .commenter .date {
    color: #585858;
    font-size: 13px;
    background-color: #f7f6f8;
    box-shadow: 0 0 2px #a9a9a9ad;
    margin: 0 3px;
    border-radius: 50px;
    padding: 5px 12px;
}

@media (max-width: 720px) {
    #commentCourse .list-comments .commenter .name, #commentCourse .list-comments .commenter .date {
        margin-bottom: 5px;
        text-align: center;
    }
}

#commentCourse .list-comments .text-comment {
    margin-top: 10px;
    padding: 0 5px;
    font-size: 14px;
    text-align: justify;
}

#qtoaCourse .course-box-body .button-qtoa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #314d6c;
}

@media (max-width: 576px) {
    #qtoaCourse .course-box-body .button-qtoa {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    #qtoaCourse .course-box-body .button-qtoa .QTA_a {
        width: 100%;
    }
}

#qtoaCourse .qtoa-button-tab {
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 12px 0;
    background-color: #fffcfc;
}

@media (max-width: 576px) {
    #qtoaCourse .qtoa-button-tab li {
        width: 100%;
    }
}

#qtoaCourse .qtoa-button-tab li span {
    padding: 5px 15px;
    border-radius: 5px;
    background-color: #e4e4e47a;
    margin-right: 10px;
    color: #314d6c;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 576px) {
    #qtoaCourse .qtoa-button-tab li span {
        display: block;
        text-align: center;
        margin-right: 0;
        margin-bottom: 10px;
    }
}

#qtoaCourse .qtoa-button-tab li span:hover {
    background-color: #314d6c;
    color: #fff;
}

#qtoaCourse .qtoa-button-tab li .active {
    background-color: #314d6c !important;
    color: #fff !important;
}

.wrapper-item-bndl {
    background-color: white;
    padding: 10px;
    border-radius: 50px;
    margin-bottom: 5px;
    border: 1px solid var(--brand-color-2);
}

.wrapper-item-bndl:hover {
    background-color: #fb5130;
    box-shadow: 0 0 6px #00000069;
    border: 1px solid #fff;
}

.wrapper-item-bndl:hover .bndl .bndl-list {
    background-color: #fff;
    background-image: unset;
    color: var(--brand-color-2);
}

.wrapper-item-bndl:hover .bndl .bndl-title a {
    color: #fff;
}

.wrapper-item-bndl:hover .bndl-pack-elemnts a .bndl-elemnts {
    background-color: #fff;
    padding: 2px 8px;
    border-radius: 50px;
}

.wrapper-item-bndl:hover .bndl-pack-elemnts .bndl-elemnts {
    color: #fff;
}

.wrapper-item-bndl .bndl .bndl-list {
    margin-left: 5px;
    color: #ffff;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background-image: -webkit-linear-gradient(0deg, var(--brand-color-2) 0%, var(--brand-color-1) 49%, var(--brand-color-2) 100%);
    box-shadow: -0.977px 3px 13px 0 rgba(67, 68, 69, 0.53);
}

.wrapper-item-bndl .bndl .bndl-title a {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-color-2);
    text-shadow: 0 0 3px #cccccc;
}

.wrapper-item-bndl .bndl .bndl-pack-elemnts {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.wrapper-item-bndl .bndl .bndl-pack-elemnts a .bndl-elemnts {
    color: #3bbd1c;
}

.wrapper-item-bndl .bndl .bndl-pack-elemnts .bndl-elemnts {
    width: 90px;
}

.bndl-basket-align .bndl-real-cost {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px;
    border-top: 2px solid #e7e7e7;
    border-bottom: 2px solid #e7e7e7;
    background-color: #f6f6f6;
    font-size: 17px;
    color: var(--brand-color-2);
    font-weight: 500;
}

.bndl-basket-align .bndl-real-cost span {
    text-decoration: line-through;
}

.bndl-basket-align .title-last-cost {
    text-align: center;
    font-size: 18px;
    padding: 14px 0;
}

.bndl-basket-align .bndl-basket {
    text-align: center;
}

.bndl-basket-align .bndl-basket .last-cost {
    color: #009ca9;
    font-size: 23px;
    font-weight: 600;
}

.bndl-basket-align .bndl-basket .bndl-btn {
    padding-bottom: 10px;
}

/** all-course **/
.sorting {
    background-color: #fff;
    border-radius: 10px;
    margin: 25px 0 40px 0;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border: 1px solid #5d5d5dc2;
    border-top: 3px solid #2d4a69;
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
}

@media (max-width: 768px) {
    .sorting {
        margin-bottom: 0;
    }
}

.sorting .title {
    background-color: #2d4a69;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    height: 44px;
    text-align: center;
    width: 100px;
    line-height: 44px;
    border-radius: 0 5px 5px 0;
}

@media (max-width: 768px) {
    .sorting .title {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.sorting .sorting-item {
    display: flex;
    margin-right: 100px;
}

@media (max-width: 992px) {
    .sorting .sorting-item {
        flex-direction: column;
    }
}

.sorting .sorting-item .item a {
    color: #314d6c;
    padding: 2px 10px;
    border-radius: 5px;
}

.sorting .sorting-item .item a:hover {
    background-color: #314d6c;
    color: #fff;
}

@media (max-width: 768px) {
    .sorting .sorting-item .item a {
        margin-bottom: 2px;
        display: inline-block;
    }
}

.sorting .sorting-item .item .item_active {
    background-color: #314d6c;
    color: #fff;
}

.sorting .sorting-item div {
    margin-left: 20px;
}

.sorting .sorting-item .sortin-icon {
    display: flex;
    align-items: center;
}

.sorting .sortin-icon a {
    color: #314d6c;
    padding: 2px 10px;
    border-radius: 5px;
}

.all-course-card {
    justify-content: center;
}

.all-course-card .card {
    padding: 0;
    box-shadow: 0 0 6px 0 rgba(159, 159, 159, 0.82);
    transition: all 0.4s ease-in-out;
}

.all-course-card .card:hover {
    -ms-transform: translate(0px, -5px);
    -webkit-transform: translate(0px, -5px);
    transform: translate(0px, -5px);
    cursor: pointer;
    box-shadow: 0 3px 8px 1px #9f9f9f;
}

.all-course-card .card:hover .sale {
    background-color: var(--brand-color-2);
    margin: -1px;
}

.all-course-card .card:hover .sale a {
    color: #fff;
}

.all-course-card .card .card-img-top {
    height: 143px !important;
}

.all-course-card .card .card-body {
    padding: 0;
}

.all-course-card .card .card-body .card-title {
    margin-bottom: 0;
    text-align: center;
    padding: 5px 10px;
    line-height: 19px;
    height: 55px;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
}

.all-course-card .card .card-body .card-title h5 {
    padding: 0;
    margin: 0;
    font-family: myfont, serif;
    font-weight: 500;
    font-size: 15px;
    color: #000;
    line-height: 26px;
}

.all-course-card .card .card-body .card-info {
    height: 58px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.all-course-card .card .card-body .card-info .card-course-info {
    padding: 0;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.all-course-card .card .card-body .card-info .card-course-info .time {
    font-size: 11px;
    background-color: #f5f5f5;
    padding: 5px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 3px;
    margin-right: 5px;
    border-right: 4px solid #5d5d5d;
}

.all-course-card .card .card-body .card-info .card-course-info .teacher {
    font-size: 11px;
    background-color: #f5f5f5;
    padding: 5px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 3px;
    margin-right: 5px;
    border-right: 4px solid var(--brand-color-2);
}

.all-course-card .card .card-body .card-info .card-price {
    display: flex !important;
    flex-direction: column;
}

.all-course-card .card .card-body .card-info .card-price .price {
    text-align: right;
    font-size: 28px;
    position: relative;
    color: var(--brand-color-2);
    font-weight: 600;
}

.all-course-card .card .card-body .card-info .card-price .price .Currency {
    font-size: 11px;
    font-weight: 600;
    margin-right: 5px;
    color: #000;
}

.all-course-card .card .card-body .card-info .card-price .price .cost-discount-slider {
    font-size: 15px;
    position: absolute;
    left: 5px;
    bottom: -5px;
    text-decoration: line-through;
}

.all-course-card .card .card-body .card-info .card-price .dvd-icon i, .all-course-card .card .card-body .card-info .card-price .dvd-icon svg {
    position: absolute;
    bottom: -36px;
    right: -89px;
    font-size: 18px;
    color: #000;
}

.all-course-card .card .card-body .card-info .card-price .wrapper-discount-slider {
    text-align: center;
    background-color: var(--brand-color-2);
    color: #f5f5f5;
    font-weight: 600;
    text-decoration: line-through;
    padding: 0 2px;
    font-size: 13px;
    width: 100%;
}

.all-course-card .card .card-body .card-info .card-price .cclose, .all-course-card .card .card-body .card-info .card-price .cfree {
    text-align: right;
    font-size: 18px;
    position: relative;
    padding: 0;
    color: var(--brand-color-2);
    font-weight: 600;
}

.all-course-card .card .sale {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #f5f5f5;
    color: #fff;
    transition: background-color 0.4s ease-in-out;
    margin: -1px;
}

.all-course-card .card .sale a {
    color: #000;
    transition: color 0.4s ease-in-out;
}

.all-course-card .card .sale .add-to-cart {
    display: flex;
    align-items: end;
}

.all-course-card .card .sale .add-to-cart svg, .all-course-card .card .sale .add-to-cart i {
    font-size: 18px;
    margin-left: 5px;
}

.card-title-new {
    margin-bottom: 0;
    text-align: center;
    padding: 5px 10px;
    line-height: 19px;
    height: 55px;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    font-style: normal;
    color: #0a0a0a;
}

.enrollment-filter-sidebar {
    border-radius: 10px;
    border-top: 3px solid #314d6c;
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    margin: 20px 0;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-head {
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 15px 10px;
    color: #444;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-head label {
    margin: 0;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body {
    font-size: 13px;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .all-enrollment {
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .all-enrollment a {
    display: block;
    text-align: center;
    padding: 7px;
    background-color: #f6f6f6;
    border-radius: 5px;
    border: 1px solid #5d5d5d21;
    color: #5d5d5d;
    font-size: 15px;
    font-weight: 400;
    transition: all 0.3s ease-in-out;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .all-enrollment a:hover {
    background-color: #2d4a69;
    color: #fff;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item a {
    background-color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 14px;
    color: #5d5d5d;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
    transition: all 0.3s ease-in-out;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item a i, .enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item a svg {
    color: #5d5d5d;
    font-size: 20px;
    margin-left: 8px;
    cursor: pointer;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item a .hover, .enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item a .after {
    display: none !important;
    transition: all 0.3s ease-in-out;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item a:hover {
    background-color: #f6f6f6;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item a:hover .before {
    opacity: 0 !important;
    display: none !important;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item a:hover .hover {
    opacity: 100% !important;
    display: flex !important;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item .active {
    background-color: #2d4a69 !important;
    color: #fff;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item .active i, .enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item .active svg {
    color: #fff;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item .active .after {
    display: flex !important;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item .active .before {
    display: none !important;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item .active:hover .before {
    display: none !important;
}

.enrollment-filter-sidebar .enrollment-filter-sidebar-body .item-enrollment .item .active:hover .hover {
    display: none !important;
}

.search-course {
    width: 100%;
    background-color: white;
    border-radius: 10px;
    margin: 25px 0 5px 0;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border: 1px solid var(--brand-color-1);
    border-top: 3px solid var(--brand-color-1);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    align-items: center;
}

@media (max-width: 768px) {
    .search-course {
        display: flex;
        flex-direction: column;
    }
}

.search-course form {
    background-color: #f9f9f9;
    padding: 5px 15px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .search-course form {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.search-course form h6 {
    padding: 0;
    margin: 0 0 0 5px;
}

@media (max-width: 768px) {
    .search-course form h6 {
        margin-bottom: 10px;
    }
}

.search-course form button {
    border-radius: 2px;
    padding: 5px;
}

@media (max-width: 768px) {
    .search-course form button {
        margin-top: -15px;
    }
}

.search-course form button i, .search-course form button svg {
    margin-left: 0 !important;
}

.search-page-hr {
    margin: 5px 0;
}

.blog-page {
    margin: 50px 0;
}

.blog-page .sidebar-sticky {
    position: sticky;
    top: 10px;
}

.blog-page .content-blog {
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 0;
    margin: 20px 0;
}

.blog-page .content-blog .title-blog {
    display: flex;
    padding: 25px;
    align-items: center;
    border-bottom: 1px solid var(--brand-color-1);
}

.blog-page .content-blog .title-blog h1 {
    font-size: 22px;
    color: var(--brand-color-2);
    margin: 0;
}

.blog-page .content-blog .title-blog i, .blog-page .content-blog .title-blog svg {
    font-size: 25px;
    color: var(--brand-color-2);
    margin-left: 10px;
}

.blog-page .content-blog .data-blog {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 10px 20px;
    background-color: #f3f3f391;
}

.blog-page .content-blog .text-blog {
    text-align: justify;
    padding: 20px;
    font-size: 14px;
}

.blog-page .content-blog .text-blog h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.blog-page .content-blog .text-blog h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.blog-page .content-blog .text-blog h2 {
    font-size: 25px;
    margin-bottom: 10px;
}

.blog-page .content-blog .text-blog h1 {
    font-size: 30px;
    margin-bottom: 10px;
}

.blog-page .content-blog .share-blog {
    display: flex;
    justify-content: space-between;
    background-color: var(--brand-color-2);
    padding: 18px;
    box-shadow: 1px 5px 16px var(--brand-color-2);
    border-bottom: 5px solid var(--brand-color-1);
    color: #fff;
}

.blog-page .content-blog .share-blog a {
    color: #fff;
    font-size: 20px;
}

@media (max-width: 768px) {
    .blog-page .content-blog .share-blog {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

.blog-list .blog-card {
    border-radius: 10px;
    margin-bottom: 30px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.blog-list .blog-card:hover {
    box-shadow: 0 9px 20px #00000059;
    transform: scale(1.01);
}

.blog-list .blog-card img {
    width: 100%;
    border-radius: 10px 10px 0 0;
    height: 128px !important;
}

@media (max-width: 992px) {
    .blog-list .blog-card img {
        height: auto;
    }
}

.blog-list .blog-card h4 {
    font-size: 15px;
    padding: 10px;
    text-align: center;
    color: #000;
    height: 65px;
    line-height: 25px;
    overflow: hidden;
}

.blog-list .blog-card .blog-link {
    background-color: #f7f7f7;
    padding: 10px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    border-bottom: 2px solid;
}

/** category  **/
.category-sidebar {
    border-radius: 10px;
    border-top: 3px solid #314d6c;
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    margin: 20px 0;
}

.category-sidebar .category-sidebar-head {
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 15px 10px;
    color: #444;
}

.category-sidebar .category-sidebar-head label {
    margin: 0;
}

.category-sidebar .category-sidebar-body {
    font-size: 13px;
}

.category-sidebar .category-sidebar-body .all-category {
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
}

.category-sidebar .category-sidebar-body .all-category a {
    display: block;
    text-align: center;
    padding: 7px;
    background-color: #f6f6f6;
    border-radius: 5px;
    border: 1px solid #5d5d5d21;
    color: #5d5d5d;
    font-size: 15px;
    font-weight: 400;
}

.category-sidebar .category-sidebar-body .all-category a:hover {
    background-color: #2d4a69;
    color: #fff;
}

.category-sidebar .category-sidebar-body .item-category .withoutsub {
    background-color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    font-size: 18px;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
}

.category-sidebar .category-sidebar-body .item-category .withoutsub a {
    color: #5d5d5d;
    font-size: 14px;
    display: block;
    width: 100%;
}

.category-sidebar .category-sidebar-body .item-category .withoutsub i, .category-sidebar .category-sidebar-body .item-category .withoutsub svg {
    margin-left: 5px;
}

.category-sidebar .category-sidebar-body .item-category .withoutsub:hover {
    background-color: #f6f6f6;
}

.category-sidebar .category-sidebar-body .item-category .withsub {
    background-color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    font-size: 18px;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
}

.category-sidebar .category-sidebar-body .item-category .withsub i, .category-sidebar .category-sidebar-body .item-category .withsub svg {
    margin-left: 5px;
}

.category-sidebar .category-sidebar-body .item-category .withsub a {
    color: #5d5d5d;
    font-size: 14px;
    display: block;
    width: 100%;
}

.category-sidebar .category-sidebar-body .item-category .withsub .subicon {
    display: flex;
    align-items: center;
}

.category-sidebar .category-sidebar-body .item-category .withsub .subicon .category-plus {
    font-size: 20px;
    cursor: pointer !important;
}

.category-sidebar .category-sidebar-body .item-category .withsub .subicon .category-minus {
    display: none;
    font-size: 20px;
    cursor: pointer !important;
}

.category-sidebar .category-sidebar-body .item-category .withsub .subicon [aria-expanded=true] .category-plus {
    display: none;
}

.category-sidebar .category-sidebar-body .item-category .withsub .subicon [aria-expanded=true] .category-minus {
    display: flex;
}

.category-sidebar .category-sidebar-body .item-category .withsub [aria-expanded=false] .category-minus {
    display: none;
}

.category-sidebar .category-sidebar-body .item-category .withsub i, .category-sidebar .category-sidebar-body .item-category .withsub svg {
    font-size: 14px;
    color: #5d5d5d;
}

.category-sidebar .category-sidebar-body .item-category .parentColor {
    background-color: #314d6c !important;
}

.category-sidebar .category-sidebar-body .item-category .parentColor .subicon .category-plus {
    display: none;
}

.category-sidebar .category-sidebar-body .item-category .parentColor .subicon .category-minus {
    display: flex;
}

.category-sidebar .category-sidebar-body .item-category .parentColor a, .category-sidebar .category-sidebar-body .item-category .parentColor i, .category-sidebar .category-sidebar-body .item-category .parentColor svg {
    color: #fff !important;
}

.category-sidebar .category-sidebar-body .item-category .open-sub div:nth-child(2) .withoutsub, .category-sidebar .category-sidebar-body .item-category .open-sub div:nth-child(2) .withsub {
    padding-right: 30px !important;
    background-color: #f0f4f9 !important;
}

.category-sidebar .category-sidebar-body .item-category .open-sub div:nth-child(2) .withoutsub:hover, .category-sidebar .category-sidebar-body .item-category .open-sub div:nth-child(2) .withsub:hover {
    background-color: #e1e8f1 !important;
}

.category-sidebar .category-sidebar-body .item-category .open-sub div:nth-child(2) .open-sub div:nth-child(2) .withoutsub, .category-sidebar .category-sidebar-body .item-category .open-sub div:nth-child(2) .open-sub div:nth-child(2) .withsub {
    padding-right: 45px !important;
    background-color: #d5dfea !important;
}

.category-sidebar .category-sidebar-body .item-category .open-sub div:nth-child(2) .open-sub div:nth-child(2) .withoutsub:hover, .category-sidebar .category-sidebar-body .item-category .open-sub div:nth-child(2) .open-sub div:nth-child(2) .withsub:hover {
    background-color: #e1e8f1 !important;
}

.category-sidebar .category-sidebar-body .item-category .open-sub .show .open-sub .parentColor {
    background-color: #5e8cbf !important;
}

.category-sidebar .category-sidebar-body .item-category .open-sub .show .open-sub .parentColor:hover {
    background-color: #5e8cbf !important;
}

/**  pagination  **/
.pagination {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.pagination ul {
    padding: 10px 20px;
    margin: 0;
    border-radius: 5px;
    font-size: 15px;
    background-color: #ffffff;
    box-shadow: inset -2px 2px 6px #c3c3c3;
}

.pagination ul li.active .page-link {
    min-width: 25px;
    height: 25px;
    display: inline-flex;
    background-color: var(--brand-color-2);
    line-height: 25px;
    text-align: center;
    border-radius: 5px;
    margin: 0 2px;
    color: #fff;
    border: 1px solid var(--brand-color-2);
    align-items: center;
    justify-content: center;
}

.pagination ul li.disabled .page-link {
    min-width: 25px;
    height: 25px;
    display: inline-flex;
    background-color: #d8d8d8;
    line-height: 25px;
    text-align: center;
    border-radius: 5px;
    margin: 0 2px;
    color: #fff;
    border: 1px;
    align-items: center;
    justify-content: center;
}

.pagination ul .page-link {
    min-width: 25px;
    height: 25px;
    display: inline-flex;
    background-color: #fff;
    line-height: 25px;
    text-align: center;
    border-radius: 5px;
    margin: 0 2px;
    color: var(--brand-color-2);
    border: 1px solid var(--brand-color-2);
    align-items: center;
    justify-content: center;
}

.pagination ul .page-link:hover {
    background-color: var(--brand-color-1);
    color: #fff;
}

.pagination-per-page form {
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-per-page form span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-per-page form .divider {
    margin: 0 5px;
}

.pagination-per-page form .per_pager {
    width: 40px;
    padding: 0;
    height: 25px;
    margin: 0 5px 0 0;
}

/**  signin up  **/
.signin-up .form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.signin-up .form .form-wrapper {
    margin: 50px 0;
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 10px 30px;
    position: relative;
}

.signin-up .form .form-wrapper .form-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--brand-color-2);
    align-items: center;
    padding: 10px 30px 0;
}

.signin-up .form .form-wrapper .form-title img {
    width: 30px;
}

.signin-up .form .form-wrapper .form-title h4 {
    text-align: center;
    margin: 0;
    padding: 0;
}

.signin-up .form .form-wrapper #signup, .signin-up .form .form-wrapper #change, .signin-up .form .form-wrapper #signin {
    min-width: 375px;
}

@media (max-width: 450px) {
    .signin-up .form .form-wrapper #signup, .signin-up .form .form-wrapper #change, .signin-up .form .form-wrapper #signin {
        min-width: 320px;
    }
}

@media (max-width: 400px) {
    .signin-up .form .form-wrapper #signup, .signin-up .form .form-wrapper #change, .signin-up .form .form-wrapper #signin {
        min-width: 270px;
    }
}

.signin-up .form .form-wrapper #signup ._linkup, .signin-up .form .form-wrapper #change ._linkup, .signin-up .form .form-wrapper #signin ._linkup {
    display: flex;
    flex-direction: column;
}

.signin-up .form .form-wrapper #signup ._linkup a, .signin-up .form .form-wrapper #change ._linkup a, .signin-up .form .form-wrapper #signin ._linkup a {
    margin-top: 5px;
}

.signin-up .auth-image {
    background-color: var(--brand-color-2);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

@media (max-width: 992px) {
    .signin-up .auth-image {
        display: none;
    }
}

.ip-logout {
    margin-top: 10px;
    padding: 20px;
}

.ip-logout .select-ip label {
    background-color: #eee;
    border-radius: 10px;
    padding: 14px 30px 14px 14px;
    cursor: pointer;
    margin-bottom: 20px;
}

.ip-logout .select-ip label .ip-user {
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.ip-logout .select-ip label .item-for-ip span {
    margin-right: 5px;
}

.ip-logout .select-ip label input[type=radio]:checked + label {
    background-color: #3fc5d2;
}

.ip-logout .custom-control-label::before, .ip-logout .custom-control-label::after {
    right: -7px !important;
    top: 35px;
}

.ip-logout .custom-control-label::before {
    border: 1px solid #a2a2a2;
    background-color: #fff;
}

.ip-logout .button .col-md-12 {
    flex-direction: row-reverse;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ip-logout .button .col-md-12 a {
    margin-right: 5px;
}

/** basket **/
.basket-warapper {
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 0;
    margin: 20px 0;
}

.basket-warapper .title-basket {
    display: flex;
    padding: 25px;
    align-items: center;
    border-bottom: 1px solid var(--brand-color-1);
}

.basket-warapper .title-basket h1 {
    font-size: 22px;
    color: var(--brand-color-2);
    margin: 0;
}

.basket-warapper .title-basket i, .basket-warapper .title-basket svg {
    font-size: 25px;
    color: var(--brand-color-2);
    margin-left: 10px;
}

.basket-warapper .body-basket {
    padding: 50px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.basket-warapper .body-basket form {
    width: 100%;
}

.basket-warapper .body-basket .border-basket {
    display: block;
    width: 100%;
    border-radius: 5px 5px 0 0;
}

.basket-warapper .body-basket .border-basket .basket-cart-table {
    width: 100%;
    padding: 10px;
    position: relative;
    border: 1px solid #eee;
    border-radius: 15px;
    box-shadow: 0 0 12px #d8d8d8c2;
    margin-bottom: 3px;
    transition: all 0.3s;
}

.basket-warapper .body-basket .border-basket .basket-cart-table:hover {
    background-color: #bfcac9;
    transform: translatey(-5px);
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item-title {
    display: flex;
    align-items: center;
    padding-right: 10px;
    margin-right: -10px;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .border-basket .basket-cart-table .item-title {
        margin-bottom: 15px;
    }
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item-title .icon {
    padding: 10px;
    background-color: #5d5d5d;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item-title .icon i, .basket-warapper .body-basket .border-basket .basket-cart-table .item-title .icon svg {
    color: #fff;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item-title .title a {
    color: #5d5d5d;
    font-size: 14px;
    font-weight: 500;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item {
    color: #585858;
    font-size: 14px;
    background-color: #f7f6f8;
    box-shadow: 0 0 2px #a9a9a9ad;
    margin: 0 3px;
    border-radius: 50px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .border-basket .basket-cart-table .item {
        margin-bottom: 7px;
    }
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item .countOfProduct {
    display: flex;
    align-items: center;
    position: relative;
    width: max-content;
    margin-right: 10px;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item .countOfProduct .form-group {
    margin: 0;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item .countOfProduct input[type=number] {

    border: none !important;
    background-color: #fff !important;
    height: 25px !important;
    width: max-content !important;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item .countOfProduct input[type=number] {
    width: 60px !important;
    border-radius: 50px;
    padding: 0.5rem;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    background-color: transparent !important;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item .countOfProduct input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item .countOfProduct input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item .countOfProduct .plus {
    border-radius: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px !important;
    font-weight: 900;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 100;
    top: 3px;
    right: 2px;
    color: #31a49f !important;
    cursor: pointer;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item .countOfProduct {
    color: #31a49f !important;
    font-size: 29px !important;
    font-weight: 900;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 100;
    top: 4px;
    left: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .item.discount {
    background-color: #fef6f5;
    color: var(--brand-color-2);
    font-size: 13px;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .sum-item {
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: space-between;
    background-color: #5d5d5d;
    color: #fff;
    padding: 5px 10px;
    font-weight: 700;
    border-radius: 50px;
    text-shadow: 0 0 2px #174f4a;
    box-shadow: inset 0 0 2px #174f4a;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .delete-item {
    position: absolute;
    top: 10px;
    left: 10px;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .delete-item a {
    width: 30px;
    height: 30px;
    border: 1px solid #174f4a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: #fff !important;
    transition: all 0.3s ease-in;
    background-color: #174f4a;
}

.basket-warapper .body-basket .border-basket .basket-cart-table .delete-item a:hover {
    background-color: #fff;
    color: #174f4a !important;
}

.basket-warapper .body-basket .border-basket .space {
    width: 100%;
    height: 1px;
    box-shadow: 0 0 10px #f3f3f3;
}

.basket-warapper .body-basket .all-sum-item {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px 5px 0 0;
    margin-top: 12px;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .all-sum-item {
        font-size: 15px;
    }
}

.basket-warapper .body-basket .last-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #f3f3f3;
    border-top: none;
    color: #207f8a;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 9px 0 #b5b3b394;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .last-item {
        font-size: 15px;
    }
}

.basket-warapper .body-basket .repay {
    width: 100%;
    margin-bottom: 30px;
}

.basket-warapper .body-basket table {
    background-color: #e0f4f54a;
    border-radius: 0 0 10px 10px;
    box-shadow: -1px 3px 9px #009ca938;
}

.basket-warapper .body-basket table thead {
    background-color: #009ca9;
    color: #fff;
    box-shadow: -1px 5px 7px #009ca97d;
}

.basket-warapper .body-basket table tbody tr:hover {
    color: #212529;
    background-color: rgba(0, 156, 169, 0.35) !important;
}

.basket-warapper .body-basket .table-responsive {
    padding: 10px;
}

.basket-warapper .body-basket .table-responsive::-webkit-scrollbar {
    height: 10px;
    width: 50px;
}

.basket-warapper .body-basket .table-responsive::-webkit-scrollbar-track {
    background: #fff;
    border: 1px solid #009ca9;
    border-radius: 50px;
}

.basket-warapper .body-basket .table-responsive::-webkit-scrollbar-thumb {
    background: #009ca9;
    border-radius: 50px;
}

.basket-warapper .body-basket .basket-button {
    margin-top: 15px;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .basket-button {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .basket-button .form-body {
        display: flex;
        flex-direction: column-reverse;
    }
}

.basket-warapper .body-basket .basket-button .form-body a, .basket-warapper .body-basket .basket-button .form-body button {
    font-size: 18px;
    margin-right: 5px;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .basket-button .form-body a, .basket-warapper .body-basket .basket-button .form-body button {
        font-size: 15px;
    }
}

.basket-warapper .body-basket .basket-button .form-body a i, .basket-warapper .body-basket .basket-button .form-body a svg, .basket-warapper .body-basket .basket-button .form-body button i, .basket-warapper .body-basket .basket-button .form-body button svg {
    margin-right: 20px;
}

.basket-warapper .body-basket .oc {
    margin-top: 30px;
    width: 100%;
}

.basket-warapper .body-basket .oc .wrapper-offer-code {
    background-color: #6ab04c;
    border-radius: 15px;
    margin-bottom: 10px;
}

.basket-warapper .body-basket .oc .wrapper-offer-code h4 {
    text-align: right;
    font-size: 18px;
    color: #ffffff;
    padding: 10px;
    margin: 0 10px 0 0;
}

.basket-warapper .body-basket .oc .wrapper-offer-code .offer-code {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #6ab04b;
    padding: 10px;
    text-align: right;
    display: flex;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .oc .wrapper-offer-code .offer-code {
        flex-direction: column;
    }
}

.basket-warapper .body-basket .oc .wrapper-offer-code .offer-code #_code {
    border-radius: 0 10px 10px 0;
    border: 1px solid #619c49;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .oc .wrapper-offer-code .offer-code #_code {
        border-radius: 10px 10px 0 0;
    }
}

.basket-warapper .body-basket .oc .wrapper-offer-code .offer-code #_submit_code {
    border-radius: 10px 0 0 10px;
    font-size: 15px;
    padding: 0.4em 1.6em;
    background-color: #6ab04b;
    border: 2px solid #629c49;
    color: #fff !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .oc .wrapper-offer-code .offer-code #_submit_code {
        border-radius: 0 0 10px 10px;
    }
}

.basket-warapper .body-basket .dp {
    width: 100%;
}

.basket-warapper .body-basket .dp .payment-socket .wrapper-payment {
    background-color: var(--brand-color-1);
    border-radius: 15px;
    margin-bottom: 10px;
}

.basket-warapper .body-basket .dp .payment-socket h4 {
    text-align: right;
    font-size: 18px;
    color: #ffffff;
    padding: 10px;
    margin: 0 10px 0 0;
}

.basket-warapper .body-basket .dp .payment-socket .Online_1 {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #235d9b;
    padding: 10px;
    text-align: right;
    display: flex;
    justify-content: center;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket .dp .payment-socket .Online_1 {
        flex-direction: column;
    }
}

.basket-warapper .body-basket .dp .payment-socket .Online_1 .payment {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}

.basket-warapper .body-basket .dp .payment-socket .Online_1 .payment label {
    cursor: pointer;
}

.basket-warapper .body-basket #address-box {
    width: 100%;
    margin-top: 15px;
}

.basket-warapper .body-basket #address-box .wrapper-address {
    background-color: #3c6382;
    border-radius: 15px;
    margin-bottom: 10px;
}

.basket-warapper .body-basket #address-box .wrapper-address h4 {
    text-align: right;
    font-size: 18px;
    color: #ffffff;
    padding: 10px;
    margin: 0 10px 0 0;
}

.basket-warapper .body-basket #address-box .wrapper-address .address {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #3c6382;
    padding: 10px;
    text-align: right;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .buttonAddress {
    display: block;
    text-align: left;
    margin: 10px 0;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket #address-box .wrapper-address .address .buttonAddress {
        display: flex;
        flex-direction: column;
    }
}

.basket-warapper .body-basket #address-box .wrapper-address .address .buttonAddress .choose-address, .basket-warapper .body-basket #address-box .wrapper-address .address .buttonAddress .add-address {
    background-color: #3c6381;
    padding: 5px 15px;
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    margin: 5px;
    text-align: center;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .item {
    display: block;
    width: 100%;
    padding: 10px;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 0 12px #d8d8d8c2;
    margin-bottom: 3px;
    margin-top: 15px;
    cursor: pointer;
    transition: all 0.2s ease-in;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .item:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(175, 175, 175, 0.76);
}

.basket-warapper .body-basket #address-box .wrapper-address .address .item .insideItem {
    color: #585858;
    font-size: 13px;
    background-color: #f7f6f8;
    box-shadow: 0 0 2px #a9a9a9ad;
    margin: 0 3px;
    border-radius: 50px;
    padding: 5px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .item .edit-item a {
    width: 30px;
    height: 30px;
    border: 1px solid #27465f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: all 0.3s ease-in;
    background-color: #ffffff;
    color: #27465f !important;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .item .edit-item a:hover {
    background-color: #27465f;
    color: #ffffff !important;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .item .selectedAddress {
    display: none;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .item .selectAddress {
    padding: 5px 12px;
    border-radius: 0 0 15px 15px;
    margin-bottom: -10px;
    margin-right: -10px;
    margin-left: -10px;
    font-size: 13px;
    color: #636363 !important;
    background-color: #dedede !important;
    border-color: #989898 !important;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .item input {
    display: none;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .item i, .basket-warapper .body-basket #address-box .wrapper-address .address .item svg {
    margin-left: 5px;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .searchAddress .help-block, .basket-warapper .body-basket #address-box .wrapper-address .address .searchAddress label {
    display: none;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .searchAddress input {
    border-radius: 0 10px 10px 0;
    border: 1px solid #345571;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .searchAddress .btn-reload-address {
    border-radius: 10px 0 0 10px;
    font-size: 15px;
    padding: 6px 10px;
    background-color: #3c6381;
    border: 2px solid #345671;
    color: #fff !important;
    display: block;
    margin-right: -38px;
    width: max-content;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .selectAddressTrue .selectedAddress {
    display: block;
    padding: 5px 12px;
    border-radius: 0 0 15px 15px;
    margin-bottom: -10px;
    margin-right: -10px;
    margin-left: -10px;
    font-size: 13px;
    color: #155724 !important;
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
}

.basket-warapper .body-basket #address-box .wrapper-address .address .selectAddressTrue .selectAddress {
    display: none;
}


.basket-warapper .body-basket #shipping-box {
    width: 100%;
}

.basket-warapper .body-basket #shipping-box .wrapper-shipment {
    background-color: #c44569;
    border-radius: 15px;
    margin-bottom: 10px;
}

.basket-warapper .body-basket #shipping-box .wrapper-shipment h4 {
    text-align: right;
    font-size: 18px;
    color: #ffffff;
    padding: 10px;
    margin: 0 10px 0 0;
}

.basket-warapper .body-basket #shipping-box .shipping-method-input {
    display: none !important;
}

.basket-warapper .body-basket #shipping-box .body-shipment {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #c44569;
    padding: 10px;
    text-align: right;
}


.basket-warapper .body-basket #shipping-box .body-shipment .sending .sending-item .insideItem {
    color: #585858;
    font-size: 13px;
    background-color: #f7f6f8;
    box-shadow: 0 0 2px #a9a9a9ad;
    margin: 0 3px;
    border-radius: 50px;
    padding: 5px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 700px) {
    .basket-warapper .body-basket #shipping-box .body-shipment .sending .sending-item .insideItem {
        flex-direction: column;
    }
}

.basket-warapper .body-basket #shipping-box .body-shipment .sending .sending-item .selectedSending {
    display: none;
}

.basket-warapper .body-basket #shipping-box .body-shipment .sending .sending-item .selectSending {
    padding: 5px 12px;
    border-radius: 0 0 15px 15px;
    margin-bottom: -10px;
    margin-right: -10px;
    margin-left: -10px;
    font-size: 13px;
    color: #636363 !important;
    background-color: #dedede !important;
    border-color: #989898 !important;
}

.basket-warapper .body-basket #shipping-box .body-shipment .sending .sending-item p {
    font-size: 14px;
}

.basket-warapper .body-basket #shipping-box .body-shipment .sending .sending-item p span {
    font-weight: 600;
}

.basket-warapper .body-basket #shipping-box .body-shipment .selectSendingTrue .selectSending {
    display: none !important;
}

.basket-warapper .body-basket #shipping-box .body-shipment .selectSendingTrue .selectedSending {
    display: block !important;
    padding: 5px 12px;
    border-radius: 0 0 15px 15px;
    margin-bottom: -10px;
    margin-right: -10px;
    margin-left: -10px;
    font-size: 13px;
    color: #155724 !important;
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
}

/** dashboard  **/
.user-sidebar {
    border-radius: 10px;
    border-top: 3px solid #314d6c;
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    margin: 20px 0;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    z-index: 1;
}

.user-sidebar .user-sidebar-head {
    background-color: #f6f6f6;
    border-radius: 10px 10px 0 0;
    padding: 15px 10px;
    color: #444;
}

.user-sidebar .user-sidebar-head img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e6e5e5;
}

.user-sidebar .user-sidebar-body .user-sidebar-name {
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
}

.user-sidebar .user-sidebar-body .user-sidebar-name span {
    display: block;
    text-align: center;
    padding: 7px;
    background-color: #f6f6f6;
    border-radius: 5px;
    border: 1px solid #5d5d5d21;
    color: #5d5d5d;
    font-size: 15px;
    font-weight: 400;
    transition: all 0.3s ease-in-out;
}

.user-sidebar .user-sidebar-body .user-menu-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-sidebar .user-sidebar-body .user-menu-list ul li {
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    font-size: 18px;
    color: #01676f;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
    transition: all 0.3s ease-in-out;
}

.user-sidebar .user-sidebar-body .user-menu-list ul li:hover {
    background-color: #f6f6f6;
}

.user-sidebar .user-sidebar-body .user-menu-list ul li a {
    color: #5d5d5d;
    font-size: 14px;
    display: block;
    width: 100%;
}

.content-dashboard {
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 0;
    margin: 20px 0;
}

.content-dashboard .title-dashboard {
    display: flex;
    padding: 25px;
    align-items: center;
    border-bottom: 1px solid var(--brand-color-2);
}

.content-dashboard .title-dashboard svg, .content-dashboard .title-dashboard i {
    font-size: 25px;
    color: var(--brand-color-2);
    margin-left: 10px;
}

.content-dashboard .title-dashboard h1 {
    font-size: 22px;
    color: var(--brand-color-2);
    margin: 0;
}

@media (max-width: 768px) {
    .content-dashboard .title-dashboard h1 {
        font-size: 18px;
    }
}

.content-dashboard .data-dashboard {
    height: 20px;
    background-color: #f3f3f391;
}

.content-dashboard .text-dashboard {
    padding: 20px;
}

.content-dashboard .text-dashboard .form-group {
    background-color: #f7f7f7;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 0 2px 0 #00000059;
}

.content-dashboard .text-dashboard .form-group label {
    font-size: 14px;
    margin-right: 5px;
}

.content-dashboard .text-dashboard .form-group .avatar {
    text-align: center;
    margin-bottom: 5px;
}

.content-dashboard .text-dashboard .form-group .avatar img {
    border-radius: 50%;
    border: 3px solid var(--brand-color-2);
}

.content-dashboard .text-dashboard .form-group .cls-birthday {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-dashboard .text-dashboard .form-group .cls-birthday select {
    width: 33%;
}

.content-dashboard .text-dashboard .help-block {
    display: none;
}

.content-dashboard .text-dashboard .form-actions .row .col-md-12 {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
}

.content-dashboard .qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-dashboard .qr-code .qr {
    text-align: center;
}

.content-dashboard .qr-code .expire-date, .content-dashboard .qr-code .this-date {
    background-color: #f6f6f6;
    padding: 6px 19px;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 6px #314d6c26;
}

/**  teacher-page   **/
.teacherPage {
    margin: 50px 0;
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
}

.teacherPage .teacherPage-title {
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
    font-size: 18px;
    font-weight: 500;
    color: var(--brand-color-2);
    align-items: center;
}

.teacherPage .description {
    padding: 10px;
}

.teacherPage .description .bio {
    display: flex;
    margin: 20px;
}

@media (max-width: 992px) {
    .teacherPage .description .bio {
        flex-direction: column;
        margin: 5px;
    }
}

@media (max-width: 992px) {
    .teacherPage .description .bio .image {
        text-align: center;
        margin-bottom: 30px;
    }
}

.teacherPage .description .bio .image img {
    border: 1px solid gray;
    border-radius: 5px !important;
    margin-right: 0 !important;
    max-height: 160px !important;
    margin-left: 10px;
}

.teacherPage .description .bio .info {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .teacherPage .description .bio .info {
        font-size: 12px;
    }
}

.teacherPage .description .bio .info span {
    border-bottom: 1px solid #efefef;
    height: 10px;
    float: right;
    padding-bottom: 30px;
    margin-bottom: 10px;
    border-right: 5px solid var(--brand-color-2);
    padding-right: 15px;
}

.teacherPage .description .text {
    padding: 20px;
    font-size: 14px;
    text-align: justify;
}

#teacher-course-list-title {
    background-color: var(--brand-color-2);
    padding: 30px 0;
    border-top: 1px solid var(--brand-color-2);
    box-shadow: 0 0 6px 0 var(--brand-color-1);
    margin: 50px 0;
    text-align: center;
}

#teacher-course-list-title span {
    font-size: 40px;
    font-weight: 900;
    color: #fff;
    text-shadow: 1px 4px 11px var(--brand-color-1);
    text-align: center;
}

@media (max-width: 768px) {
    #teacher-course-list-title span {
        font-size: 30px;
    }
}

/** exam-page **/
.warapper-exam {
    border-radius: 10px;
    border-top: 3px solid var(--brand-color-2);
    padding: 0;
    margin: 20px 0;
}

.exam-send-btn-s {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 1rem
}

@media (max-width: 576px) {

    .exam-send-btn-s {
        flex-direction: column-reverse;
    }

    .exam-send-btn-s .btn {
        display: block;
        width: 100%;
    }

    .answerBox ._reset_answer {
        display: block;
        width: 100%;
    }
}

.warapper-exam .title-exam {
    display: flex;
    padding: 25px;
    align-items: center;
    border-bottom: 1px solid var(--brand-color-1);
    justify-content: center;
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
}

.warapper-exam .title-exam i, .warapper-exam .title-exam svg {
    font-size: 25px;
    color: var(--brand-color-2);
    margin-left: 10px;
}

.warapper-exam .title-exam h1 {
    font-size: 22px;
    color: var(--brand-color-2);
    margin: 0;
}

.warapper-exam .body-exam {
    padding: 20px;
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
}

.warapper-exam .body-exam .list-item .title {
    background-color: #efeded;
    padding: 17px 10px;
    margin: -20px -35px 15px;
    border-bottom: 3px solid #d4d4d40d;
}

.warapper-exam .body-exam .list-item .title h3 {
    font-size: 17px;
    margin: 0;
    color: #3e3e3e;
}

.warapper-exam .body-exam .list-item .item {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 4px #eee;
}

.warapper-exam .body-exam .list-item .item:hover {
    background-color: #eee;
}

.warapper-exam .body-exam .list-item .item-total {
    background-color: var(--brand-color-1) 21 !important;
    border: 1px solid var(--brand-color-1) 29 !important;
}

.warapper-exam .body-exam .list-item .item-total:hover {
    background-color: var(--brand-color-1) 40 !important;
}

.warapper-exam .body-exam .list-item .item-passing {
    background-color: var(--brand-color-1) !important;
    border: 1px solid var(--brand-color-1) !important;
}

.warapper-exam .body-exam .list-item .item-passing:hover {
    background-color: var(--brand-color-1) !important;
}

.warapper-exam .body-exam .list-item .user-exam-info {
    background-color: #efeded;
    border-radius: 15px;
    margin-bottom: 10px;
}

.warapper-exam .body-exam .list-item .user-exam-info h3 {
    text-align: right;
    font-size: 18px;
    color: #5d5d5d;
    padding: 10px;
    margin: 0 10px 0 0;
}

.warapper-exam .body-exam .list-item .user-exam-info .user-exam-info-item {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #e0dede;
    padding: 10px;
    text-align: right;
}

.warapper-exam .body-exam .list-item .user-exam-info .user-exam-info-item .content {
    display: flex;
    align-items: center;
}

.warapper-exam .body-exam .list-item .user-exam-info .user-exam-info-item .content .profile {
    text-align: center;
    background-color: #f8f8f8;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 10px;
}

.warapper-exam .body-exam .list-item .user-exam-info .user-exam-info-item .content .profile img {
    width: 100%;
    box-shadow: 0 0 2px #cecece;
    border-radius: 50px;
}

.warapper-exam .body-exam .list-item .user-exam-info .user-exam-info-item .content .item-profile div {
    background-color: #f8f8f8;
    padding: 5px 10px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.warapper-exam .body-exam .list-item .user-exam-info .user-exam-info-item .content .item-profile .exam-title {
    background-color: #e7f5ff;
}

.warapper-exam .body-exam .list-item .user-exam-info .user-exam-info-item .content .item-profile .answer-true {
    background-color: #c9efcb;
}

.warapper-exam .body-exam .list-item .user-exam-info .user-exam-info-item .content .item-profile .answer-flase {
    background-color: #f7cddb;
}

.warapper-exam .body-exam .list-item .title-answer {
    background-color: #53a5dd;
    border-radius: 15px;
}

.warapper-exam .body-exam .list-item .title-answer h3 {
    text-align: center;
    font-size: 17px;
    color: #fff;
    padding: 10px 0;
    margin: 0;
}

.warapper-exam .body-exam .list-item .title-answer .list-naswer {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #53a5dd;
    padding: 1px;
}

.warapper-exam .body-exam .list-item .title-answer .list-naswer .list-answer-alert {
    color: #856404;
    background-color: #fff3cd;
    padding: 10px;
    margin: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50px;
}

.warapper-exam .body-exam .list-item .title-answer .list-naswer .item-lest-answer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 7px 0;
    margin: 6px;
    background-color: #f5f5f5ba;
    border-radius: 38px;
    position: relative;
    box-shadow: 0 0 3px #53a5dd80;
}

.warapper-exam .body-exam .list-item .title-answer .list-naswer .item-lest-answer:hover .info-question {
    opacity: 1;
}

.warapper-exam .body-exam .list-item .title-answer .list-naswer .item-lest-answer .number {
    background-color: var(--brand-color-2);
    color: #ffffff;
    width: 80px;
    border-radius: 0 50px 50px 0;
    text-align: center;
    height: 45px;
    line-height: 45px;
    margin-top: -7px;
    margin-bottom: -7px;
    margin-right: -20px;
}

.warapper-exam .body-exam .list-item .title-answer .list-naswer .item-lest-answer span {
    width: 30px;
    height: 30px;
}

.warapper-exam .body-exam .list-item .title-answer .list-naswer .item-lest-answer .true {
    background-color: #4CAF50;
    color: #fff;
    width: 30px;
    border-radius: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 7px #4caf50;
    border: 1px solid #fff;
}

.warapper-exam .body-exam .list-item .title-answer .list-naswer .item-lest-answer .false {
    background-color: #E91E63;
    color: #fff;
    width: 30px;
    border-radius: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 7px #E91E63;
    border: 1px solid #fff;
}

.warapper-exam .body-exam .list-item .title-answer .list-naswer .item-lest-answer .info-question {
    opacity: 0;
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background-color: #53a5dd;
    color: #fff;
    transition: opacity 0.2s ease-in-out;
}

.warapper-exam .body-exam .list-item .exam-info {
    background-color: rgba(251, 220, 133, 0.74) !important;
    margin-bottom: 10px;
    border-radius: 15px;
}

.warapper-exam .body-exam .list-item .exam-info h3 {
    text-align: right;
    font-size: 18px;
    color: #5d5d5d;
    padding: 10px;
    margin: 0 10px 0 0;
}

.warapper-exam .body-exam .list-item .exam-info-body {
    background-color: white;
    box-shadow: #f9c424 0 0 3px !important;
    border-radius: 15px;
    padding: 20px;
}

.warapper-exam .body-exam .list-Question {
    margin: -18px -22px !important;
    background-color: #fff;
    padding-top: 20px;
    margin-bottom: 20px !important;
}

.warapper-exam .body-exam .list-Question .Question-item .Question {
    border-bottom: 5px solid var(--brand-color-1);
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    margin-bottom: 20px;
    background-color: #efeded;
    border-radius: 15px;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .Question-number {
    display: flex;
    text-align: right;
    font-size: 18px;
    color: #5d5d5d;
    padding: 10px;
    margin: 0;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #e0dede;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Question-text {
    padding: 10px;
    font-size: 14px;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper {
    padding-bottom: 14px;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group {
    padding: 10px;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control {
    display: block;
    position: relative;
    margin-bottom: 7px;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid #E5E5E5;
    border-radius: 5px;
    padding: 9px 35px 0;
    min-height: 40px;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control:hover {
    border: 1px solid var(--brand-color-2);
    background-color: #ff664b03;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control:hover .control_indicator {
    background: var(--brand-color-2) !important;
    color: #fff;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control:hover input ~ .control_indicator {
    background: #cccccc;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control p {
    z-index: 2;
    position: relative;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control input:focus ~ .control_indicator {
    background: #cccccc;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control input:checked ~ .control_indicator {
    background: var(--brand-color-2);
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control input:checked ~ .back-ques {
    display: block !important;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control .control_indicator {
    position: absolute;
    top: 4px;
    right: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
    border: 0 solid #000000;
    border-radius: 50%;
    margin-top: 5px;
    margin-right: 5px;
    text-align: center;
    font-size: 13px;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .control .back-ques {
    display: none;
    background-color: #ffc107;
    border: 1px solid #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 5px;
    z-index: 0;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper .control-group .answer-true {
    border: 2px solid var(--brand-color-1) !important;
}

.warapper-exam .body-exam .list-Question .Question-item .Question .wrapper-question .Answer-wrapper ._reset_answer {
    cursor: pointer;
}

.btn-exam-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-exam-footer a {
    background-color: #eee;
    border-radius: 50px;
    padding: 5px 30px;
}

.btn-exam-footer input {
    padding: 5px 30px;
    margin-right: 40px;
}

.sidebar-exam {
    border-radius: 10px;
    border-top: 3px solid #314d6c;
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    margin: 20px 0;
    position: sticky;
    top: 10px;
}

.sidebar-exam .exam-sidebar-head {
    background-color: #f6f6f6;
    border-radius: 10px 10px 0 0;
    padding: 15px 10px;
    display: flex;
    direction: ltr;
    justify-content: center;
    font-size: 30px;
    font-weight: 500;
    color: #314d6c;
    align-items: center;
}

.sidebar-exam .exam-sidebar-head svg, .sidebar-exam .exam-sidebar-head i {
    margin-right: 5px;
}

.sidebar-exam .exam-sidebar-body .sidebar-title {
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
    color: #314d6c;
}

.sidebar-exam .exam-sidebar-body .QuestionDiv {
    padding: 10px;
}

.sidebar-exam .exam-sidebar-body .QuestionDiv a {
    padding: 0;
    border: 2px solid #ffc107;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 45px;
    margin: 2px;
}

.sidebar-exam .exam-sidebar-body .QuestionDiv a .number {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffc107;
    color: #fff;
    font-size: 15px;
}

.sidebar-exam .exam-sidebar-body .QuestionDiv a .answered {
    color: #ffc107;
    font-size: 14px;
    font-weight: 600;
}

.sidebar-exam .exam-sidebar-body .QuestionDiv .Noasnwered {
    border: 2px solid #314d6c;
}

.sidebar-exam .exam-sidebar-body .QuestionDiv .Noasnwered .number {
    background-color: #314d6c;
    color: #fff;
}

.sidebar-exam .exam-sidebar-body .QuestionDiv .Noasnwered .answered {
    color: #314d6c;
}

.sidebar-exam .exam-sidebar-body .help-answerd {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
}

.sidebar-exam .exam-sidebar-body .help-answerd span {
    width: 15px;
    height: 15px;
    background-color: #f9c107;
    display: inline-block;
    margin-left: 5px;
    border-radius: 50px;
}

.sidebar-exam .exam-sidebar-body .help-notanswerd {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
}

.sidebar-exam .exam-sidebar-body .help-notanswerd span {
    width: 15px;
    height: 15px;
    background-color: #314d6b;
    display: inline-block;
    margin-left: 5px;
    border-radius: 50px;
}

.sidebar-exam .exam-sidebar-body .button-exam {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -16px;
    border-bottom: 1px solid #ececec;
    border-radius: 0 0 10px 10px;
}

.sidebar-exam .exam-sidebar-body .button-exam a {
    width: 50% !important;
    background-color: #eee !important;
    border-radius: 0 0 10px 0;
    border-color: #eee;
    color: #314d6c;
    margin-bottom: 0;
    height: 43px;
}

.sidebar-exam .exam-sidebar-body .button-exam input {
    width: 50%;
    background-color: #319ca9;
    border-radius: 0 0 0 10px;
    height: 44px;
    margin-bottom: -1px;
    color: #eee !important;
}

.swal2-content .warapper-exam {
    margin: 0 !important;
    border: none !important;
}

.swal2-content .warapper-exam .body-exam {
    box-shadow: none !important;
}

.swal2-content .warapper-exam .body-exam .Question-text {
    font-size: 16px;
    font-weight: 600;
}

.next_pre_box{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin-top: 20px;
}
.next_pre_box .btn{
     background: var(--indigo);
     color: white !important;;
}

/** alert  **/
.exam-alert .toast-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.75rem;
    color: #6c757d;
    background-color: #f8d7da;
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.exam-alert .toast-header .text-primary {
    color: #2e5724;
}

.success-alert .toast-header {
    background-color: #9dcca870 !important;
}

.success-alert .toast-header .text-primary {
    color: #6a756d !important;
}

.error-alert .toast-header {
    background-color: #f8d7da !important;
}

.error-alert .toast-header .text-primary {
    color: #721c24 !important;
}

.info-alert .toast-header {
    background-color: #f8d7da !important;
}

.info-alert .toast-header .text-primary {
    color: #721c24 !important;
}

.warning-alert .toast-header {
    background-color: #fff3cd !important;
}

.warning-alert .toast-header .text-primary {
    color: #856404 !important;
}

.top-alert .toast {
    max-width: 100% !important;
    margin-top: 40px !important;
}

.verify-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

@media (max-width: 768px) {
    .verify-alert {
        flex-direction: column;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .verify-alert span {
        margin-bottom: 5px;
    }
}

.verify-alert a {
    margin-right: 7px;
    font-size: 12px;
    margin-bottom: 0;
}

/** order **/
.order {
    background-color: #efeded;
    border-radius: 15px;
    margin-top: 50px;
}

.order h2 {
    text-align: right;
    font-size: 18px;
    color: #5d5d5d;
    padding: 10px;
    margin: 0 10px 0 0;
}

.order .list-order {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #e0dede;
    padding: 20px 10px;
}

.order .list-order .all-order {
    padding: 10px;
    font-size: 14px;
    border-radius: 15px;
    margin-bottom: 15px;
}

.order .list-order .all-order .item {
    padding: 3px 10px;
}

.order .list-order .all-order .status {
    width: max-content;
    padding: 5px 12px;
    border-radius: 43px;
    color: #fff;
    float: left;
}

.order .list-order .all-order .true {
    background-color: rgba(21, 179, 79, 0.78);
}

.order .list-order .all-order .false {
    background-color: #ff0f0fc7 !important;
}

.order .list-order .all-order .date {
    width: max-content;
    background-color: #ecececc7;
    padding: 5px 12px;
    border-radius: 0;
    color: #757575;
    float: left;
    font-size: 13px;
}

.order .list-order .all-order .description {
    background-color: #a7a7a717;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 2px #c3c3c3;
    margin-top: 11px;
    font-size: 12px;
}

.order .list-order .all-order.true {
    box-shadow: 0 0 4px #49c47866;
    border: 1px solid #49c47857;
}

.order .list-order .all-order.false {
    box-shadow: 0 0 5px #f63b4e61;
    border: 1px solid #f63b4e33;
}

/** order **/
.my-table {
    background-color: #314d6b;
    padding: 15px;
    border-radius: 10px;
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
}

.my-table .my-table-background {
    background-color: #f9faff;
    border-radius: 10px;
    width: 100%;
    padding: 10px;
}

.my-table .my-table-background table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.my-table .my-table-background table thead tr {
    background-color: #fff;
    box-shadow: 0 0 10px #eee;
    border-radius: 15px;
    border-color: #fff;
}

.my-table .my-table-background table thead tr th {
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
}

.my-table .my-table-background table thead tr th:first-child {
    padding-right: 10px;
    border-radius: 0 15px 15px 0;
}

.my-table .my-table-background table thead tr th:last-child {
    padding-left: 10px;
    border-radius: 15px 0 0 15px;
}

.my-table .my-table-background table tbody tr {
    background-color: #fff;
    box-shadow: 0 0 10px #eee;
    border-radius: 15px;
    margin-top: 10px;
    transition: all 0.2s ease-in-out;
}

.my-table .my-table-background table tbody tr:hover {
    background-color: #fff;
    box-shadow: 0 0 0 2px #418bff73;
    transform: scale(1.0008);
}

.my-table .my-table-background table tbody tr td {
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
}

.my-table .my-table-background table tbody tr td:first-child {
    padding-right: 10px;
    border-radius: 0 15px 15px 0;
}

.my-table .my-table-background table tbody tr td:last-child {
    padding-left: 10px;
    border-radius: 15px 0 0 15px;
}

/** order **/
.warapper-gradebook {
    border-radius: 10px;
    border-top: 3px solid #4b6584;
    padding: 0;
    margin: 20px 0;
}

.warapper-gradebook .title-gradebook {
    display: flex;
    padding: 25px;
    align-items: center;
    border-bottom: 1px solid #4b648366;
    justify-content: center;
    box-shadow: 0 0 2px 0 rgba(75, 99, 129, 0.38);
}

.warapper-gradebook .title-gradebook i, .warapper-gradebook .title-gradebook svg {
    font-size: 25px;
    color: #4b6584;
    margin-left: 10px;
}

.warapper-gradebook .title-gradebook h1 {
    font-size: 22px;
    color: #4b6584;
    margin: 0;
}

.warapper-gradebook .body-gradebook {
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 20px;
}

.warapper-gradebook .body-gradebook .gradbook {
    background-color: #efeded;
    border-radius: 15px;
    margin-bottom: 10px;
}

.warapper-gradebook .body-gradebook .gradbook h2 {
    text-align: right;
    font-size: 18px;
    color: #5d5d5d;
    padding: 10px;
    margin: 0 10px 0 0;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #e0dede;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper {
    padding: 15px;
    height: 100%;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper .last-score {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    border-radius: 5px;
    background-image: linear-gradient(to top, #ff0f0fc7 0%, #ff0f0f94 100%);
    height: 100%;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper .last-score .number {
    font-size: 50px;
    color: #fff;
    letter-spacing: -5px;
    text-shadow: -1px 2px 6px #980e1c;
    font-weight: bold;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper .last-score .text {
    background-color: var(--brand-color-2);
    padding: 1px 17px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    margin-top: -15px;
    box-shadow: inset 0 0 0 #10030433;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper .date {
    width: max-content;
    background-color: #ecececc7;
    padding: 5px 12px;
    border-radius: 0;
    color: #757575;
    float: right;
    font-size: 13px;
    min-width: 320px;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper .status {
    width: max-content;
    padding: 5px 12px;
    border-radius: 43px;
    color: #fff;
    float: left;
    font-size: 13px;
    font-weight: 500;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper .status.false {
    background-color: var(--brand-color-2) !important;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper .final-score {
    display: flex;
    margin-top: 5px;
    border: 1px solid #eee;
    width: max-content;
    min-width: 320px;
    justify-content: space-between;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper .final-score .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.warapper-gradebook .body-gradebook .gradbook .warpper-gradebook .wrapper .final-score .info {
    width: max-content;
    background-color: #ecececc7;
    padding: 5px 12px;
    border-radius: 0;
    color: #757575;
    float: right;
    font-size: 13px;
}

.warapper-gradebook .body-gradebook .gradbook.bg-danger {
    background-color: #f76a7b !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-danger h2 {
    color: #fff;
}

.warapper-gradebook .body-gradebook .gradbook.bg-danger .warpper-gradebook {
    box-shadow: 0 0 3px #f76a7b;
}

.warapper-gradebook .body-gradebook .gradbook.bg-danger .warpper-gradebook .status {
    background-color: #f76a7b;
}

.warapper-gradebook .body-gradebook .gradbook.bg-danger .warpper-gradebook .last-score {
    background-image: linear-gradient(to top, #ff0f0fc7 0%, #ff0f0f94 100%) !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-danger .warpper-gradebook .last-score .number {
    text-shadow: -1px 2px 6px #980e1c !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-danger .warpper-gradebook .last-score .text {
    background-color: #d83b4b !important;
    color: #fff !important;
    box-shadow: inset 0 0 3px #382a014a !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-success {
    background-color: #6aca63 !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-success h2 {
    color: #fff;
}

.warapper-gradebook .body-gradebook .gradbook.bg-success .warpper-gradebook {
    box-shadow: 0 0 3px #6aca63 !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-success .warpper-gradebook .status {
    background-color: #6aca63;
}

.warapper-gradebook .body-gradebook .gradbook.bg-success .warpper-gradebook .last-score {
    background-image: linear-gradient(to top, #6aca63 0%, #70cc6ac2 100%) !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-success .warpper-gradebook .last-score .number {
    text-shadow: -1px 2px 6px #299223 !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-success .warpper-gradebook .last-score .text {
    background-color: #67ad65 !important;
    color: #fff !important;
    box-shadow: inset 0 0 3px #382a014a !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-warning {
    background-color: #fbdc85bd !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-warning h2 {
    color: #5d5d5d !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-warning .warpper-gradebook {
    box-shadow: 0 0 3px #f9c424 !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-warning .warpper-gradebook .status {
    background-color: #f9c424;
}

.warapper-gradebook .body-gradebook .gradbook.bg-warning .warpper-gradebook .last-score {
    background-image: linear-gradient(to top, #ffc107 0%, #ffc1078c 100%) !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-warning .warpper-gradebook .last-score .number {
    text-shadow: -1px 2px 8px #775d07 !important;
}

.warapper-gradebook .body-gradebook .gradbook.bg-warning .warpper-gradebook .last-score .text {
    background-color: #eab40f !important;
    color: #fff !important;
    box-shadow: inset 0 0 3px #382a014a !important;
}

/** assignment **/
.wrapper-assignment {
    border-radius: 10px;
    border-top: 3px solid #4b6584;
    padding: 0;
    margin: 20px 0;
}

.wrapper-assignment .help-block {
    display: none !important;
}

.wrapper-assignment .title-assignment {
    display: flex;
    padding: 25px;
    align-items: center;
    border-bottom: 1px solid #4b648366;
    justify-content: center;
    box-shadow: 0 0 2px 0 rgba(75, 99, 129, 0.38);
}

.wrapper-assignment .title-assignment i, .wrapper-assignment .title-assignment svg {
    font-size: 25px;
    color: #4b6584;
    margin-left: 10px;
}

.wrapper-assignment .title-assignment h1 {
    font-size: 22px;
    color: #4b6584;
    margin: 0;
}

.wrapper-assignment .body-assignment {
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 20px;
}

.wrapper-assignment .body-assignment .assignment-question {
    background-color: #f76a7b;
    border-radius: 15px;
    margin: 10px 0;
}

.wrapper-assignment .body-assignment .assignment-question h2 {
    text-align: right;
    font-size: 18px;
    color: #fff;
    padding: 10px;
    margin: 0 10px 0 0;
}

.wrapper-assignment .body-assignment .assignment-question .wrapper-assignment-question {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #f76a7b;
    padding: 15px;
}

.wrapper-assignment .body-assignment .assignment-answer {
    background-color: #fbdc85bd;
    border-radius: 15px;
    margin: 10px 0;
}

.wrapper-assignment .body-assignment .assignment-answer h2 {
    text-align: right;
    font-size: 18px;
    color: #5d5d5d;
    padding: 10px;
    margin: 0 10px 0 0;
}

.wrapper-assignment .body-assignment .assignment-answer .wrapper-assignment-answer {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #fbdc85bd;
}

.wrapper-assignment .body-assignment .assignment-answer .wrapper-assignment-answer textarea {
    width: 100%;
    border-radius: 16px;
    border: navajowhite;
    padding: 10px 18px;
    color: #666;
    min-height: 150px;
}

.wrapper-assignment .body-assignment .assignment-upload {
    background-color: #626673;
    border-radius: 15px;
    margin: 10px 0;
}

.wrapper-assignment .body-assignment .assignment-upload h2 {
    text-align: right;
    font-size: 18px;
    color: #fff;
    padding: 10px;
    margin: 0 10px 0 0;
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #626673;
    padding: 15px;
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 700px) {
    .wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader {
        flex-direction: column;
    }
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .input {
    width: 100%;
    height: 39px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #606473;
}

@media (max-width: 700px) {
    .wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .input {
        border-radius: 5px 5px 0 0;
    }
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .input .custom-input {
    background: none;
    padding: 0;
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .input .custom-input::before {
    content: "فایل خود را انتخاب کنید ...";
    position: absolute;
    display: block;
    text-align: center;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 13px;
    color: #FFF;
    background-color: #319ca9;
    border-radius: 6px;
    top: 4px;
    right: 7px;
    box-shadow: 0 0 2px #fff;
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .input .custom-input .filename {
    position: absolute;
    right: 184px;
    top: 10px;
    font-size: 12px;
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .input .custom-input input {
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .input .custom-input input input {
    border-color: var(--brand-color-2) !important;
    border-radius: 5px !important;
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .button {
    margin-right: -131px;
    z-index: 1;
}

@media (max-width: 700px) {
    .wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .button {
        width: 100%;
        margin: 0;
    }
}

.wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .button button {
    border-radius: 2px 0 0 2px !important;
    color: #fff;
    background-color: #616573 !important;
    border-color: #616573 !important;
    font-size: 14px;
    width: max-content;
    margin-right: -8px;
    height: 39px;
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .wrapper-assignment .body-assignment .assignment-upload .wrapper-assignment-upload .assignment-uploader .button button {
        width: 100%;
        margin: 0;
        border-radius: 0 0 5px 5px !important;
    }
}

.wrapper-assignment .body-assignment .assignment-btn .form-actions .col-md-12 {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.wrapper-assignment .body-assignment .assignment-btn .form-actions .col-md-12 ._cancel {
    border-radius: 50px !important;
    width: 150px !important;
}

.wrapper-assignment .body-assignment .assignment-btn .form-actions .col-md-12 ._save {
    width: 150px !important;
}

/** LIVE **/
.live-info {
    background-color: #3c6382;
    border-radius: 15px;
    margin: 50px 0;
}

.live-info h3 {
    text-align: right;
    font-size: 18px;
    color: #fff;
    padding: 10px;
    margin: 0 10px 0 0;
}

.live-info .wrapper-live-info {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #3c6382;
    padding: 10px;
    text-align: right;
}

.live-info .wrapper-live-info .item {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 4px #eee;
}

.live-info .wrapper-live-info .item:hover {
    background-color: #eee;
}

.live-info .wrapper-live-info .info {
    background-color: #fc513030 !important;
    border: 1px solid #ff664b38 !important;
}

.live-info .wrapper-live-info .info:hover {
    background-color: #fc51304d !important;
}

/** qtoa **/
#list_question .item {
    display: block;
    padding: 10px;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 0 12px #d8d8d8c2;
    margin: 15px;
}

#list_question .item ._dislike {
    background-color: #ffffff;
    color: var(--brand-color-1);
    padding: 1px 3px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    width: 50px;
    justify-content: space-evenly;
    box-shadow: 0 0 10px var(--brand-color-1);
    margin-bottom: 3px;
}

#list_question .item ._like {
    background-color: #fff;
    color: var(--brand-color-2);
    padding: 1px 3px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    width: 50px;
    justify-content: space-evenly;
    box-shadow: 0 0 8px var(--brand-color-2);
}

#list_question .item .questioner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 10px;
    position: relative;
}

@media (max-width: 576px) {
    #list_question .item .questioner {
        flex-direction: column;
        text-align: center;
    }
}

#list_question .item .questioner .name, #list_question .item .questioner .date {
    color: #585858;
    font-size: 13px;
    background-color: #f7f6f8;
    box-shadow: 0 0 2px #a9a9a9ad;
    margin: 0 3px;
    border-radius: 50px;
    padding: 5px 12px;
}

@media (max-width: 576px) {
    #list_question .item .questioner .name, #list_question .item .questioner .date {
        width: 100%;
        margin-bottom: 5px;
    }
}

#list_question .item .list-answer {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
}

#list_question .item .question-body .rateAvatar {
    display: flex;
    justify-content: space-around;
    align-items: end;
}

#list_question .item .question-body img {
    width: 56px;
    border-radius: 50px;
    margin-top: 10px;
    margin-bottom: 4px;
    display: inline;
}

#list_question .item .question-body .question-text {
    border-right: 1px solid #dcdcdc;
}

#list_question .item .question-body .question-text p {
    padding: 10px;
    text-align: justify;
    margin: 0 0 -15px;
}

#list_question .item .footer-qtoa {
    background-color: #314d6c;
    border-radius: 0 0 15px 15px;
    margin: 20px -10px -10px;
    padding: 10px 20px;
}

#list_question .item .footer-qtoa ._answer_user_form label, #list_question .item .footer-qtoa ._answer_user_form .help-block {
    display: none;
}

#list_question .item .footer-qtoa ._answer_user_form .form_qtoa_answer {
    margin-top: 10px;
}

#list_question .item .footer-qtoa ._answer_user_form .form_qtoa_answer .col-md-12 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#list_question .item .footer-qtoa ._answer_user_form .form_qtoa_answer ._cancel {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #fff;
    border-radius: 50px;
    color: var(--brand-color-2);
    border: 1px solid var(--brand-color-2);
    box-shadow: 0 0 7px var(--brand-color-1);
    font-size: 15px;
    width: 110px;
    height: 32px;
    transition: all 0.3s ease-in-out;
    margin-left: 5px;
}

#list_question .item .footer-qtoa ._answer_user_form .form_qtoa_answer ._cancel:hover {
    background-color: var(--brand-color-1);
    color: #fff;
}

#list_question .item .footer-qtoa ._answer_user_form .form_qtoa_answer ._save {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #fff;
    border-radius: 50px;
    color: var(--brand-color-1) !important;
    border: 1px solid var(--brand-color-1);
    box-shadow: 0 0 7px rgba(31, 98, 118, 0.75);
    font-size: 15px;
    width: 110px;
    height: 32px;
    line-height: 2px;
    transition: all 0.3s ease-in-out;
}

#list_question .item .footer-qtoa ._answer_user_form .form_qtoa_answer ._save:hover {
    background-color: var(--brand-color-1);
    color: #fff !important;
}

#list_question .item .footer-qtoa .answer-qtoa-btn {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-evenly;
    background-color: #fff;
    border-radius: 50px;
    color: var(--brand-color-1) !important;
    border: 1px solid var(--brand-color-1);
    box-shadow: 0 0 7px rgba(31, 98, 118, 0.75);
    font-size: 15px;
    width: 142px;
    height: 32px;
    line-height: 2px;
    transition: all 0.3s ease-in-out;
}

#list_question .item .footer-qtoa .answer-qtoa-btn:hover {
    background-color: var(--brand-color-1);
    color: #fff !important;
}

@media (max-width: 576px) {
    #list_question .item .footer-qtoa .answer-qtoa-btn i, #list_question .item .footer-qtoa .answer-qtoa-btn svg {
        display: none;
    }
}

#form_qtoa {
    display: block;
    padding: 10px;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 0 12px #d8d8d8c2;
    margin: 15px;
}

#form_qtoa legend {
    color: #585858;
    font-size: 16px;
    font-weight: 500;
    background-color: #f7f6f8;
    box-shadow: 0 0 2px #a9a9a9ad;
    border-radius: 50px;
    padding: 5px 12px;
    margin: 5px 3px 0;
}

#form_qtoa .form-actions .row {
    background-color: #314d6c;
    padding: 10px 0;
    border-radius: 0 0 15px 15px;
    margin-bottom: -10px;
    margin-left: -25px;
    margin-right: -25px;
}

#form_qtoa .form-actions .row .col-md-12 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#form_qtoa ._cancel {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #fff;
    border-radius: 50px;
    color: var(--brand-color-2);
    border: 1px solid var(--brand-color-2);
    box-shadow: 0 0 7px rgba(0, 185, 241, 0.5);
    font-size: 15px;
    width: 110px;
    height: 32px;
    transition: all 0.3s ease-in-out;
    margin-left: 5px;
}

#form_qtoa ._cancel:hover {
    background-color: var(--brand-color-2);
    color: #fff;
}

#form_qtoa ._save {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #fff;
    border-radius: 50px;
    color: var(--brand-color-1) !important;
    border: 1px solid var(--brand-color-1);
    box-shadow: 0 0 7px rgba(31, 98, 118, 0.75);
    font-size: 15px;
    width: 110px;
    height: 32px;
    line-height: 2px;
    transition: all 0.3s ease-in-out;
}

#form_qtoa ._save:hover {
    background-color: var(--brand-color-1);
    color: #fff !important;
}

#form_qtoa .control-label {
    display: none;
}

#form_qtoa .help-block {
    display: none;
}

/** user-info **/
.warapper-user-info {
    border-radius: 10px;
    border-top: 3px solid #4b6584;
    padding: 0;
    margin: 20px 0;
}

.warapper-user-info .title-user-info {
    display: flex;
    padding: 25px;
    align-items: center;
    border-bottom: 1px solid #4b648366;
    justify-content: center;
    box-shadow: 0 0 2px 0 rgba(75, 99, 129, 0.38);
}

.warapper-user-info .title-user-info i, .warapper-user-info .title-user-info svg {
    font-size: 25px;
    color: #4b6584;
    margin-left: 10px;
}

.warapper-user-info .title-user-info h1 {
    font-size: 22px;
    color: #4b6584;
    margin: 0;
}

.warapper-user-info .body-user-info {
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 20px;
}

.warapper-user-info .body-user-info .list-item .title {
    background-color: #efeded;
    padding: 17px 10px;
    margin: -20px -35px 15px;
    border-bottom: 3px solid #d4d4d40d;
}

.warapper-user-info .body-user-info .list-item .title h3 {
    font-size: 17px;
    margin: 0;
    color: #3e3e3e;
}

.warapper-user-info .body-user-info .list-item .item {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 4px #eee;
}

.warapper-user-info .body-user-info .list-item .item:hover {
    background-color: #eee;
}

.warapper-user-info .body-user-info .list-item .exam-info {
    background-color: #4b6584 !important;
    border-radius: 15px;
    max-width: 700px;
    margin: 0 auto;
}

.warapper-user-info .body-user-info .list-item .exam-info h3 {
    text-align: right;
    font-size: 18px;
    color: #5d5d5d;
    padding: 10px;
    margin: 0 10px 0 0;
}

.warapper-user-info .body-user-info .list-item .exam-info-body {
    background-color: white;
    box-shadow: #4b6584 0 0 3px !important;
    border-radius: 15px;
    padding: 20px;
}

.warapper-user-info .body-user-info .list-item .exam-info-body .item .title-item {
    background-color: #4b6584;
    border-radius: 0 5px 5px 0;
    color: #fff;
}

.warapper-user-info .body-user-info .form-cert {
    margin: 0 auto;
    border: unset;
    max-width: 800px;
}

.warapper-user-info .body-user-info .form-cert .form-group {
    background-color: #f7f7f7;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 0 2px 0 #00000059;
}

.warapper-user-info .body-user-info .form-cert .form-group label {
    font-size: 14px;
    margin-right: 5px;
}

.warapper-user-info .body-user-info .form-cert .help-block {
    display: none;
}

.warapper-user-info .body-user-info .form-cert h4 {
    font-size: 15px;
    margin-bottom: 25px;
    background-color: #d5f3ae;
    padding: 8px;
    line-height: 22px;
    font-weight: 400;
    border-radius: 5px;
}

.warapper-user-info .body-user-info .form-cert .button .col-md-12 {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
}

@media (max-width: 700px) {
    .warapper-user-info .body-user-info .form-cert .button .col-md-12 {
        flex-direction: column-reverse;
    }
}

/** Certificate **/
.warapper-certificate {
    border-radius: 10px;
    border-top: 3px solid #4b6584;
    padding: 0;
    margin: 20px 0;
}

.warapper-certificate .title-certificate {
    display: flex;
    padding: 25px;
    align-items: center;
    border-bottom: 1px solid #4b648366;
    justify-content: center;
    box-shadow: 0 0 2px 0 rgba(75, 99, 129, 0.38);
}

.warapper-certificate .title-certificate i, .warapper-certificate .title-certificate svg {
    font-size: 25px;
    color: #4b6584;
    margin-left: 10px;
}

.warapper-certificate .title-certificate h1 {
    font-size: 22px;
    color: #4b6584;
    margin: 0;
}

.warapper-certificate .body-certificate {
    box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.38);
    padding: 20px;
}

.warapper-certificate .body-certificate h3 {
    font-size: 20px;
    padding: 12px;
}

.warapper-certificate .body-certificate .cert-button {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
}

@media (max-width: 700px) {
    .warapper-certificate .body-certificate .cert-button {
        flex-direction: column-reverse;
    }
}

.warapper-certificate .body-certificate .list-item .title {
    background-color: #efeded;
    padding: 17px 10px;
    margin: -20px -35px 15px;
    border-bottom: 3px solid #d4d4d40d;
}

.warapper-certificate .body-certificate .list-item .title h3 {
    font-size: 17px;
    margin: 0;
    color: #3e3e3e;
}

.warapper-certificate .body-certificate .list-item .item {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 4px #eee;
}

.warapper-certificate .body-certificate .list-item .item:hover {
    background-color: #eee;
}

.warapper-certificate .body-certificate .list-item .exam-info {
    background-color: #4b6584 !important;
    border-radius: 15px;
    max-width: 700px;
    margin: 0 auto;
}

.warapper-certificate .body-certificate .list-item .exam-info h3 {
    text-align: right;
    font-size: 18px;
    color: #5d5d5d;
    padding: 10px;
    margin: 0 10px 0 0;
}

.warapper-certificate .body-certificate .list-item .exam-info-body {
    background-color: white;
    box-shadow: #4b6584 0 0 3px !important;
    border-radius: 15px;
    padding: 20px;
}

.warapper-certificate .body-certificate .list-item .exam-info-body .item .title-item {
    background-color: #4b6584;
    border-radius: 0 5px 5px 0;
    color: #fff;
}

.warapper-certificate .body-certificate .form-cert {
    margin: 0 auto;
    border: unset;
    max-width: 800px;
}

.warapper-certificate .body-certificate .form-cert .form-group {
    background-color: #f7f7f7;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 0 2px 0 #00000059;
}

.warapper-certificate .body-certificate .form-cert .form-group label {
    font-size: 14px;
    margin-right: 5px;
}

.warapper-certificate .body-certificate .form-cert .help-block {
    display: none;
}

.warapper-certificate .body-certificate .form-cert h4 {
    font-size: 15px;
    margin-bottom: 25px;
    background-color: #d5f3ae;
    padding: 8px;
    line-height: 22px;
    font-weight: 400;
    border-radius: 5px;
}

.warapper-certificate .body-certificate .form-cert .button .col-md-12 {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
}

@media (max-width: 700px) {
    .warapper-certificate .body-certificate .form-cert .button .col-md-12 {
        flex-direction: column-reverse;
    }
}

/* base color  */

.filter-style {
    direction: rtl;
    text-align: right;
}

.filter-style label {
    color: gray;
    background-color: #FFF;
    width: 100%;
    padding: 10px;
}

.filter-style ul li {
    list-style: none;
}

.filter-style a {
    padding: 5px 0;
    display: block;
}

.filter-style ul li li:last-child {
    border-bottom: 0;
}

#sort_section {
    background-color: #FFF;
    border: 1px solid #CBC7C8;
    border-radius: 5px !important;
}

#sort_section ul {
    margin-top: 0 !important;
}

#sort_section ul li {
    float: right;
    margin: 5px 10px;
    list-style: none;
}

#sort_section ul li a {
    color: #5E5E5E;
    border: 0 !important;
}

#sort_section label {
    float: right;
    margin-top: -30px !important;
    background-color: transparent;
    margin-left: 25px !important;
    margin-bottom: 15px;
    margin-right: -25px;
}

#sort_section ul li ._item_sort {
    margin-top: -25px;
    padding: 5px 10px;
    z-index: 5;
}

#sort_section ._item_sort_dir {
    display: inline-block;
    float: left;
    margin-top: -16px;
    margin-left: 15px;
}


#sort_section ul li ._item_sort:hover, #sort_section ul li .item_active {
    background-color: var(--brand-color-2);
    margin-top: -25px;
    z-index: 5;
    color: #FFF;
    border-radius: 5px !important;
}

#sort_section {
    padding-top: 30px !important;
    height: 55px !important;
}

.search-card-style h3 a {
    font-size: 16px;
    color: var(--brand-color-1);
}

.search-card-style h3 a:hover {
    color: var(--brand-color-2);
}

.online-course-style {
    text-decoration: line-through;
    font-size: 14px;
}

.main-price {
    color: var(--brand-color-2);
}

.main-price:hover {
    color: var(--brand-color-1);
}

.time-and-user {
    font-size: 14px;
}

.pagination .page-item:first-child .page-link, .pagination > .first .page-link {
    border-radius: 5px;
}

.pagination .page-item:last-child .page-link, .pagination > .last .page-link {
    border-radius: 5px;
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-color-1);
    border-color: var(--brand-color-1);
    color: #fdfdfd;
}

.pagination * {
    color: var(--brand-color-1);
}

.pagination .page-item .page-link {
    color: var(--brand-color-1);
}

._tem_me1 {
    background-color: #F6f6f6;
    padding: 10px 4px;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover, .sub_depth_1:hover {
    color: var(--brand-color-1);
}

.sidenav:focus, .dropdown-btn:focus, .sub_depth_1:focus {
    outline: none !important;
}

.AClass_Link {
    display: contents !important;
    margin-top: 5px;
}

/* Main content */
.main {
    margin-left: 200px; /* Same as the width of the sidenav */
    font-size: 14px !important; /* Increased text to enable scrolling */
    padding: 0 10px;
    font-weight: normal !important;
}

/* Add an active class to the active dropdown button */
.active {
    color: var(--brand-color-1);
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
    display: none;
    font-weight: normal !important;
    border: 1px solid var(--brand-color-2) !important;
    float: right;
    margin-top: 5px;
    border-radius: 5px !important;
    padding: 5px 0;
}

.dropdown-container .BoxerM {
    width: 90%;
    background-color: #f6f6f6;
    margin-bottom: 4px;
    padding: 5px;
    border-radius: 5px !important;
    margin-right: 5%;
    line-height: 30px;
}

.dropdown-container .dropdown-container {
    border: 0 !important;
    background-color: #ededed;
}

.dropdown-container {
    width: 100% !important;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
    float: left;
    padding-left: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 14px !important;
        font-weight: normal !important;
    }
}

.dropdown-container ._item_category {
    padding-right: 0;
}

.sidenav > i {
    margin-right: -13px !important;
}

.dropdown-container a {
    margin-right: 16px !important;
}

.dropdown-container {
    border-bottom: 0 solid #e2e2e2;
    margin-bottom: 10px;
}

.sub_depth_2 {
    padding-right: 10px !important;
}

.sub_depth_3 {
    width: 90% !important;
    border-radius: 5px !important;
    padding-right: 20px !important;
}

.dropdown-container .sub_depth_3 {
    background-color: #ededed;
}

.dropdown-container .sub_depth_2 {
    padding-right: 25px !important;
}

.swal2-icon.swal2-error {
    border-color: var(--brand-color-2) !important;
    border-radius: 200px !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-radius: 200px !important;
}

.swal2-icon.swal2-success {
    border: unset !important;
}

.carousel-item img {
    width: 100%;
}

.carousel-control-next, .carousel-control-prev {
    font-size: 35px !important;
}

#COUNTER_1, #COUNTER_2, #COUNTER_3, #COUNTER_4 {
    color: var(--brand-color-2);
    font-size: 65px;
    font-weight: bold;
    margin-top: 0;
    line-height: 1;
}

#date-month, #date-year, #date-day {
    border-radius: 0.25rem !important;
}

.core14-discounted-cost, .core14-discounted-without-cost {
    display: block;
    text-align: center;
    position: relative;
    text-decoration: line-through;
}

.info-enrollment-bottom p {
    padding: 2px 5px;
    font-size: 12px;
    margin: 8px;
    display: flex;
    align-items: center;
    border: 1px solid #dea914;
    border-radius: 4px;
    text-align: right;
    color: #463b1c;
    background-color: #ffd75e;
}

.info-enrollment-bottom p i {
    margin-left: 6px;
    color: #463b1c;
}

.newbox14 .info-enrollment-bottom {
    display: none;
}

@media (max-width: 767px) {
    .newbox14 .info-enrollment-bottom {
        display: block !important;
        margin-bottom: 5px;
    }

    .box_a_course {
        height: fit-content !important;
    }
}

/* modal style - start */

._course1 h1 {
    font-size: 20px;
    text-align: center;
    direction: rtl;
    line-height: 1.8;
}

._course1 h2 {
    font-size: 13px;
    text-align: center;
    direction: rtl;
}

._course1 {
    background-color: transparent;
    padding: 15px 0;
    color: #5d5d5d;
    margin-top: -9px;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid rgba(93, 93, 93, 0.078);
    margin-bottom: 15px;
}

.wrapper-sale-physical {
    padding: 40px 5px 5px 5px;
    border: 1px solid var(--brand-color-2);
    border-radius: 5px;
    box-shadow: 0 0 6px var(--brand-color-2);
    position: relative;
    direction: rtl;
    background-color: #fff;
}

.wrapper-sale-physical h2 {
    position: absolute;
    top: 0;
    right: 28px;
    background-color: var(--brand-color-2);
    font-size: 19px;
    border: 1px solid var(--brand-color-2);
    border-radius: 0 0 5px 5px;
    padding: 5px 10px;
    color: #ffffff;
    box-shadow: 0 -1px 7px var(--brand-color-2);
}

.wrapper-sale-physical ul {
    text-align: right;
    padding: 0 25px 0 0;
}

.wrapper-sale-physical ul li {
    font-size: 15px;
}

.wrapper-sale-virtual {
    padding: 40px 5px 5px 5px;
    border: 1px solid var(--brand-color-1);
    border-radius: 5px;
    position: relative;
    direction: rtl;
    background-color: #ffff;
    margin-bottom: 15px;
}

.wrapper-sale-virtual h2 {
    position: absolute;
    top: 0;
    right: 28px;
    background-color: var(--brand-color-1);
    font-size: 19px;
    border: 1px solid var(--brand-color-1);
    border-radius: 0 0 5px 5px;
    padding: 5px 10px;
    color: #ffffff;
    box-shadow: 1px 1px 7px var(--brand-color-1);
}

.wrapper-sale-virtual ul {
    text-align: right;
/ / margin: 0 0 5 px;
    padding: 0 20px 0 0;
}

.wrapper-sale-virtual ul li {
    font-size: 15px;
}

.wrapper-sale-virtual .core14-btn {
    background-color: var(--brand-color-1) !important;
    color: #fff !important;
    border: 1px solid var(--brand-color-1) !important;
    border-radius: 4px !important;
    padding: 3px 15px !important;
    box-shadow: 0 0 6px var(--brand-color-1) !important;
    margin: 0 !important;
    width: max-content !important;
    float: none;
    transition: background-color .3s ease-in;
}

.wrapper-sale-virtual .core14-btn:hover {
    opacity: 0.7;
}

.wrapper-sale-virtual .virtual-offer {
    font-size: 13px;
    color: #dc3545;
    text-decoration: line-through;
}

.wrapper-sale-virtual .virtual-orginal {
    font-size: 20px;
    font-weight: 500;
}

.wrapper-sale-physical .core14-btn {
    background-color: var(--brand-color-2) !important;
    color: #fff !important;
    border: 1px solid var(--brand-color-2) !important;
    border-radius: 4px !important;
    padding: 3px 15px !important;
    margin: 0 !important;
    width: max-content !important;
    float: none;
    transition: background-color .3s ease-in;
}

.wrapper-sale-physical .core14-btn:hover {
    opacity: 0.7;
}

.wrapper-sale-physical .virtual-offer {
    font-size: 13px;
    color: #dc3545;
    text-decoration: line-through;
}

.wrapper-sale-physical .virtual-orginal {
    font-size: 20px;
    font-weight: 500;
}

/* user-profile - start  */

.Fsize18 {
    font-size: 17px;
    color: #FFF;
    margin-top: -5px;
}

.Fsize18 i {
    font-size: 20px;
}

.userPopimg {
    width: 40px;
    height: 40px;
    float: right;
    border-radius: 5px;
}

.span_name_login_user {
    margin: 10px 10px 0 0;
    display: inline-block;
    color: var(--brand-color-1);
    font-weight: bold;
}

.span_name_login_user + svg {
    color: var(--brand-color-1);
    font-weight: bold;
}

.dropbtn {
    background-color: transparent;
    color: white;
    margin-top: 0;
    padding: 4px 6px;
    border-radius: 10px;
    border: 1px solid #ededed;
    font-size: 13px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 250px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 999;
    right: 0;
    border-radius: 10px;
    border: 1px solid #ededed;
    padding: 0;
    margin: 0;
}

.dropbtn i {
    float: left;
    font-size: 20px;
    margin-top: 7px;
}

.dropdown-content i {
    font-size: 15px;
    margin-top: 5px;
}

.dropdown-content li {
    border-bottom: none;
    list-style-type: none;
}

.dropdown-content a {
    color: var(--brand-color-1);
    padding: 8px 16px;
    text-decoration: none;
    display: flex;
    margin-bottom: 3px;
    border-radius: 10px;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: #f5f5f5;
    border-radius: 10px;
}

.dropdown-content a span {
    order: 2;
}

.dropdown-content a svg {
    order: 1;
    margin: 3px 0 0 10px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #ededed;
}

.user-dropdown, .dropdown-content ul {
    padding: 0;
    margin: 0;
}

/* Dashboard style - start */

.dash6 {
    background-color: #FFF;

    float: right;
    background-position: top center;
    background-repeat: no-repeat;
    padding-bottom: 30px;
    border-radius: 10px 10px 0 0;
}

.dash1 {
    background-color: #FFF;
    margin: 20px 0;
    float: right;
}

.dash2 {
    background: linear-gradient(to right, #006891, #00b9f1);
    margin-top: 20px;
    float: right;
    padding-bottom: 10px;
    border-radius: 10px 10px 0 0;
}

.dash3 {
    text-align: center;
}

.dash3 img {
    border-radius: 200px !important;
    height: 70px;
    width: 70px;
    margin: 20px 0;
    border: 1px solid gray;
}

.dash3 h1 {
    text-align: center;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
}

.dash4 {
    background-color: #FFF;
    width: 100%;
}

.dash4 i {
    font-size: 30px;
    margin-left: 10px;
}

.dash4 .fa-credit-card {
    font-size: 19px !important;
}

.dash4 .fa-shopping-cart {
    font-size: 20px !important;
}

.dash4 ul {
    width: 100%;
    float: right;
    padding: 0 !important;
    margin: 0 !important;
    direction: rtl;
    text-align: right;
}

.dash4 ul li {
    list-style: none;
    background: #fff;
}

.dash4 ul li a {
    display: block;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--brand-color-1);
}

.dash4 ul li a:hover {
    color: #FFF;
    text-decoration: none;
    background-color: var(--brand-color-2);
}

.dash4 ul li i {
    font-size: 20px;
    margin-top: 10px;
}

.dash7 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

.dash7 img {
    border: 2px solid gray;
    width: 150px;
    border-radius: 200px;
    margin: 10px auto;
}

.dash8 {
    width: 400px;
    margin: 0 auto;
}

.dash9 {
    width: 100%;
    display: flex;
    justify-content: center;
}

.dash7 h2 {
    font-size: 16px;
    border-right: 5px solid var(--brand-color-2);
    text-align: right;
    padding: 10px 15px;
    margin-right: -15px;
    direction: rtl;
}

._faq2 {
    background-color: #f8f8f8;
    padding-bottom: 30px;
}

.dropbtn:focus {
    outline: none;
}

.NoRadius {
    border-radius: 0 !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

.UnBoxItem {
    padding: 0;
}

.UnBoxItem + h3 {
    min-height: 40px;
}

.UnBoxItem + h3 a {
    color: var(--brand-color-1);
    display: block;
    font-size: 14px;
    margin-top: 15px;
    padding: 0 10px;
    line-height: 20px;
}

.row .dash7 h2 {
    margin-right: 0;
}

.dash6 .dash7 ._shop_basket63 .item {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 15px;
}

.strat_date {
    font-size: 12px;
    margin-left: 5px;
    color: var(--brand-color-2);
    margin-right: 10px;
}

.strat_date span {
    color: #454545;
    margin-right: 10px;
}

._box001 {
    float: right;
    width: 50%;
}

._box002 {
    float: right;
    width: 50%;
}

.btn_home_052 {
    font-size: 12px;
}

.btn_home_052 a {
    text-align: center;
    background-color: #FAFAFA;
    width: 100%;
    padding: 5px 0;
    float: right;
    color: var(--brand-color-1);
    font-weight: bold !important;
    font-size: 14px !important;
}

.item:hover .btn_home_052 a {
    background-color: var(--brand-color-1);
    color: #FAFAFA;
}

.my-orders .Basket_tbl1 th, .my-orders .Basket_tbl1 th a {
    color: var(--brand-color-1);
}

.my-orders .Basket_tbl1 th a:hover {
    color: var(--brand-color-2);
}

.my-orders .Basket_tbl1 tr.head, .my-orders .Basket_tbl1 tr td {
    font-size: 14px;
    color: var(--brand-color-1);
}

.my-orders .btn-primary, .my-orders .btn-primary > svg {
    font-size: 12px;
    font-weight: 500;
}

.my-orders .pagination form {
    font-size: 13px;
}

.my-orders .pagination form .form-control-sm {
    background: #fff;
    border: 1px solid #ced4da;
}

table.Basket_tbl1 {
    font-size: 14px;
}

.order-show {
    display: flex;
    justify-content: space-between;
    list-style: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 12px;
}

.order-show li {
    flex: 0 0 auto;
    color: #b1b1b1;
    background-color: #f6f6f6;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    width: 100px;
    height: 120px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    position: relative;
    margin-left: 15px;
    background-image: url(../images/levelshop.jpg);
    padding-top: 3px;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: .4;
}

.order-show li i {
    position: absolute;
    bottom: 3px;
    right: 2px;
}

.order-show .l-new {
    background-position-x: 102px;
    background-position-y: 21px;
}

.order-show .l-WaitPay {
    background-position-x: 220px;
    background-position-y: 19px;
}

.order-show .l-WaitReview {
    background-position-x: 326px;
    background-position-y: 19px;
}

.order-show .l-WaitPost {
    background-position-x: 428px;
    background-position-y: 19px;
}

.order-show .l-completed {
    background-position-x: 536px;
    background-position-y: 19px;
}

.order-show .l-failed {
    background-position-x: 652px;
    background-position-y: 19px;
}

.l-new.active, .l-WaitPay.active, .l-WaitReview.active, .l-WaitPost.active {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    opacity: 1;
    color: #092d7b !important;
    border-radius: 5px !important;
    box-shadow: 0 0 7px #80bef3;
    border: 1px solid #092d7b !important;
}

.l-new.passed, .l-WaitPay.passed, .l-WaitReview.passed, .l-WaitPost.passed {
    -webkit-filter: grayscale(60%);
    filter: grayscale(30%);
    opacity: .5;
    box-shadow: 0 0 7px #80bef3;
    color: #092d7b !important;
}

.l-new.passed i, .l-WaitPay.passed i, .l-WaitReview.passed i, .l-WaitPost.passed i, .l-new.active i, .l-WaitPay.active i, .l-WaitReview.active i, .l-WaitPost.active i {
    display: block !important;
}

.order-show .l-completed.active {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
    color: #078d96 !important;
    border-radius: 5px !important;
    box-shadow: 0 0 7px #7ae8d6;
    border: 1px solid #11e4bf !important;
}

.order-show .l-completed.active i {
    display: block !important;
}

.order-show .l-failed.active {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
    color: #c15c91 !important;
    border-radius: 5px !important;
    box-shadow: 0 0 7px #fe94c5;
    border: 1px solid #de7fad !important;
}

.order-show .l-failed.active i {
    display: block !important;
}

.dashboard-side-menu a {
    color: var(--brand-color-1);
    padding: 8px 16px;
    text-decoration: none;
    display: flex;
    border-radius: 10px;
    font-size: 14px;
}


.btn1 {
    background-color: var(--brand-color-1);
    color: #FFF;
    padding: 10px 10px;
    text-align: right;
    width: 240px;
    margin: 10px;
    font-size: 12px;
    border-radius: 10px;
}

.btn1:hover {
    background-color: var(--brand-color-2);
}

.btn2, .btn3 {
    float: right;
    width: 90%;
}

.btn4 {
    padding-top: 13px;
    display: inline-block;
}

.UnderTableLinks_ {
    display: flex;
    justify-content: center;
}

.UnderTableLinks_ button {
    background: 0;
    border: 0;
}


.wallet {
    background-color: rgba(0, 185, 241, 0.1);
    border: 5px double var(--brand-color-2);
    border-radius: 10px;
    padding: 15px;
}

.wallet input#wallet_use, .wallet .form-check-label {
    vertical-align: middle;
}

.wallet_form #amount {
    height: 40px;
    width: 100%;
    background-color: #F2F2F2;
    border: 1px solid #ededed !important;
    border-radius: 5px;
    margin-bottom: 20px;
}

.wallet_form .currency {
    line-height: 40px;
    font-weight: bold;
    margin-left: 5px;
}

.pagination-box {
    font-size: 13px;
    color: #7a7a7a;
}

.pagination-box .pagination {
    padding: 0;
}

.transaction tr {
    color: var(--brand-color-1);
    font-size: 14px;
}

.grid-box._chart table {
    font-size: 14px;
}

.grid-box._chart table .head {
    color: var(--brand-color-1);
}

.loading.hidden {
    display: none;
}

/* registration form style - start */

.fullH {
    overflow: hidden;
    height: 100vh;
    padding: 0;
}

.RedBG {
    /*background-color: #00b9f2;*/
    background-color: var(--brand-color-1);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 576px) {
    .RedBG {
        display: none;
    }
}

.RedBG img {
    max-width: 100%;
}

.Wbg1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.Wbg1 .modal-header {
    justify-content: center;
}


.PageModalBox .RedBG {
    display: none !important;
    visibility: hidden !important;
}

.PageModalBox .modal-header {
    width: 100%;
    margin: 0 auto;

}

.form-signin {
    margin: 0 auto;
}

.PageModalBox .form-signup {
    margin: 0 auto;
    width: 100%;

}

.PageModalBox .Wbg1 {
    height: 380px;
    overflow: hidden;
}

.PageModalBox .col-xl-6 {
    height: 100%;
    max-width: 100%;
}

.DisplayNone {
    display: none;
}

.txtSize13 {
    font-size: 13px;
}

.Login_logo {
    margin: 10px auto;
}

.NRdR {
    border-bottom-right-radius: 00px !important;
    border-top-right-radius: 00px !important;
}

.Body_scroll {
    overflow: hidden;
}

.brd_rad {
    border-radius: 5px !important;
    text-align: center !important;
}

.modal-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #6e6e6e;
}

._linkup a {
    margin: 5px;
    text-align: center;
    line-height: 2
}

._linkup {
    line-height: 2;
    display: inline-block;
    font-size: 14px;
    margin-top: 10px;
}

.btn:not(.btn-sm):not(.btn-lg) {
    line-height: 1.44 !important;
}

.bg_blc {
    background-color: rgba(20, 20, 20, 0.7);
}

.auth-form-width
{
    max-width: 320px;
    margin: 0 auto;
}

.terms-privacy-text {
    text-align: center;
    font-size: 12px;
}

._gray2 {
    font-size: 13px;
    color: gray;
}

._gray2 i {
    font-size: 11px !important;
}

.ShowUnder500 .core14-btn {
    width: 100%;
    margin-top: 10px;
}

.gotofirstpage {
    background-color: #eee;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    display: block;
    margin-top: 20px;
}

._powered {
    text-align: center;
    width: 100%;
    float: right;
    border-top: 1px solid #525252;
    padding-top: 20px;
    margin-top: 40px;
}

._powered_nobord {
    border-top: 0 !important;
    background-color: var(--brand-color-2);
    color: #FFF;
    width: 106.5%;
    margin: 0 0 0 -15px !important;
    padding: 15px 15px !important;
}

._powered_nobord a {
    color: #dddddd;
}

._powered a:hover {
    color: var(--brand-color-1);
}

.PageModalBox-Footer {
    padding: 0 0 0 30px;
}

.form-helal {
    border-radius: 10px;
    max-width: 800px;
    margin: 0 auto;
    direction: rtl;
}

.form-helal .form-group {
    padding: 5px 0;
    display: flex;
    justify-content: center !important;
    align-items: center;
}

.form-helal .form-group.form-md-line-input {
    position: relative;
    text-align: right;
    margin: 0 auto;
}

.form-helal .form-btn {
    margin: 20px 0;
    width: 300px;
    display: flex;
    flex-direction: column;
}

.form-helal .control-label {
    width: 30%;
}

.form-helal .cls-general_birthday {
    flex: 0 0 100%;
    max-width: 100% !important;
}

.form-helal .cls-general_birthday > select {
    width: 33.333333333333% !important;
    float: right;
}

.form-helal ._linkup a:last-child {
    padding: 4px 0;
    border-radius: 5px;
}

.form-helal .pre-detail, .form-helal .post-detail {
    border-bottom: solid 1px #eee;
    padding: 20px;
    text-align: right;
    font-weight: 500;
}

.form-helal .form-group .avatar img {
    border-radius: 50% !important;
    float: left;
    width: 52px;
    position: absolute;
    left: 10px;
    top: -8px;
    border: 1px solid #ededed;
}

.course-slider-more-btn {
    font-size: 12px !important;
    direction: rtl;
    background-color: var(--brand-color-2);
    padding: 5px 10px;
    border-radius: 50px;
    color: #fff;
}

.course-slider-more-btn:hover {
    color: #fff;
}

/* basket, checkout and invoce page style - start */

._shop_basket2 {
    font-size: 18px;
    color: var(--brand-color-1);
    font-weight: bold;
    margin: 15px;
}

.box-off {
    justify-content: center;
    display: flex;
    flex-direction: row-reverse;
    margin: 5px auto;

    align-items: center;
    border: 2px solid var(--brand-color-2);
    border-radius: 7px;
}

.box-off input {
    height: 50px;
}

.box-off .btn-box-off {
    background-color: var(--brand-color-1);
    border-radius: 5px;
    border: 1px solid var(--brand-color-1);
    box-shadow: 0 0 4px var(--brand-color-1) !important;
    color: #fff;
    font-size: 14px;
}

.switch-field {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
    overflow: hidden;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
    background-color: #e4e4e4;
    color: rgba(0, 0, 0, 0.6);
    width: 145px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 8px 16px;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
    background-color: var(--brand-color-2);
    box-shadow: none;
    color: #fff;
}

.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}

.alert-dismissible .close {
    padding: 1.25rem;
}

.inc, .check, .box {
    display: none !important;
}

.first {
    border-radius: 0 4px 4px 0;
}

.last {
    border-radius: 4px 0 0 4px;
}

.panel-default {
    border-color: #ddd;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ddd;
}

.panel-default > .panel-heading .badge {
    color: #f5f5f5;
    background-color: #333;
}

.panel-default > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #ddd;
}

.panel-title {
    margin: 0 10px 0 0;
    font-size: 16px;
    color: inherit;
}

.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
    color: inherit;
}

.panel-title a {
    display: block !important;
    color: grey;
}

.pull-left {
    float: left;
}

.countOfProduct {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    align-items: center;
}

.countOfProduct .cart-item-qty {
    max-width: 70px;
}

.countOfProduct div {
    max-width: 72px;
}


.plus {
    padding-bottom: 29px !important;
    color: white !important;
    margin-top: 7px;
    border-radius: 5px 5px 5px 5px !important;
    background-color: #00a59f !important;
    font-size: 22px !important;
    text-align: center;
    vertical-align: middle;
    margin-left: 5px;
    min-width: 17px;
    width: 25px;
    min-height: 17px;
    height: 25px;
    cursor: pointer;
    user-select: none;
}

.min {
    padding-bottom: 29px !important;
    color: white !important;
    margin-top: 7px;
    border-radius: 5px 5px 5px 5px !important;
    background-color: red !important;
    font-size: 22px !important;
    text-align: center;
    vertical-align: middle;
    margin-right: 5px;
    min-width: 17px;
    width: 25px;
    min-height: 17px;
    height: 25px;
    cursor: pointer;
    user-select: none;
}

.empty_btn {
    padding-right: 0;
}

/*a.btn-add-address {
    direction: rtl;
    font-size: 13px !important;
    background-color: #deb619 ;
    border: 1px solid #c39f12 ;
    color: #ffffff;
    border-radius: 4px;
    padding: 1px 10px;
    float: left;
}*/
.add-address {
    background-color: #00a59f !important;
    padding: 5px 13px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    color: #fff !important;
    border: none !important;
    float: left;
    margin-right: 10px;
}

.choose-address {
    background-color: whitesmoke;
    padding: 3px 15px;
    border-radius: 10px;
    border: 1px solid #0023224d;
    box-shadow: 0 0 1px #044e4b;
    float: left;
}

.selectAddressTrue {
    border: 1px solid #00a59f !important;
    box-shadow: -1px 0 9px #00a59f8c !important;
}

.address {
    border: 1px solid #ececec;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    direction: rtl;
    text-align: right;
    box-shadow: 0 0 4px #e4e4e4;
    margin-top: 6px;
    width: 100%;
}

.address:hover {
    background: #f5f5f5;
    border-color: red;
}

.selectAddressTrue .nameOfGetter {
    background-color: #a0eae8 !important;
}

.address .nameOfGetter {
    background-color: whitesmoke;
    padding: 5px 10px;
    margin: -8px -8px 9px;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: space-between;
}

.user-addres {
    text-align: right;
    font-size: 14px;
    direction: rtl;
    display: flex;
    margin-top: 15px;
}

.address-txt {
    font-size: 14px;
    text-align: right;
    direction: rtl;
    margin: 10px 0 !important;
    background-color: #fbfbfb;
    padding: 10px;
}

.selectedAddress {
    background-color: #00a59f;
    color: #fff;
    padding: 3px 10px;
    width: fit-content;
    font-size: 14px;
    border-radius: 10px 0 3px 0;
    margin-bottom: -8px;
    margin-right: -8px;
    margin-top: 2px;
    display: none;
    align-items: center;
}

/*
.address input {
    display: none;
}*/
.address .address-item {
    margin-bottom: 5px;
}

.buttonAddress {

    margin: 30px 0 20px;
}

.selectAddressTrue .selectedAddress {
    display: flex;
}

#collapseshipment, .address-box nav, #collapseaddress {
    padding: 5px 19px;
    border: 1px solid #f5f5f5;
}

.collapse.show {
    display: block;
}

.collapse.show {
    display: block;
}

.searchAddress {
    margin: 0 auto;
}

.form-group.form-md-line-input .help-block {
    position: absolute;
    margin: 2px 0 0;
    opacity: 0;
    filter: alpha(opacity=0);
    font-size: 13px;
}

.searchAddress .btn-reload-address {
    font-size: 14px !important;
    display: block;
    width: fit-content;
    margin-top: 10px;

    background-color: #00a59f;
    padding: 5px 10px;
    color: #fff;
}

.form-horizontal .form-group.form-md-line-input {
    padding-top: 10px !important;
    margin: 0 !important;
    width: 100%;
}

.form-group.form-md-line-input {
    position: relative;
    margin: 0 0 35px;
    padding-top: 20px;
}

.form-horizontal .form-group.form-md-line-input {
    padding-top: 10px;
    margin: 0 -15px 20px;
}

.address .address-item .title-address-item {
    background-color: #f1f1f1;
}

.address .address-item span {
    font-size: 14px;
    padding: 3px 8px;
    border: 1px solid #f1f1f1;
}

.reload-address {
    background-color: #ca1532;
    padding: 5px 13px;
    font-size: 14px !important;
    border-radius: 10px;
    color: #fff;
    margin-right: 5px;
    float: left;
}

.sending {
    border: 1px solid #9e9e9e;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    direction: rtl;
    text-align: right;
    box-shadow: 0 0 4px #e4e4e4;
    overflow: auto;
}


.selectSendingTrue .selectedSending {
    display: flex !important;
}

.selectedSending {
    background-color: #00a59f;
    color: #fff;
    padding: 3px 10px;
    width: fit-content;
    font-size: 14px;
    border-radius: 10px 0 3px 0;
    margin-bottom: -8px;
    margin-right: -8px;
    display: none;
    align-items: center;
}

.selectSending {
    display: none;
}

@media (max-width: 540px) {

    .UnderTableLinks_ {
        display: block !important;
        width: 97% !important;
    }
}

.UnderTableLinks_ {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    justify-items: center;
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.Online_1 a img {
    max-width: 100%;
}

.Online_1 {
    background-color: #FFF;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    direction: rtl;
}

.Online_1 input {
    display: block;
    width: 100%;
}

.Online_1 label {
    cursor: pointer;
}

.Online_1 img {
    width: 100%;
}

.Online_1 a img {
    border: 1px solid #ededed;
    margin: 2px;
}

.Online_1 a img:hover {
    background-color: #C2FBD8;
}

.panel-title a {
    display: block;
}

.Online_1 a img {
    max-width: 100%;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #eee;
}

.panel-heading > .dropdown .dropdown-toggle {
    color: inherit;
}

.Online_1 a img {
    max-width: 100%;
}

.Online_1 a img {
    border: 1px solid #ededed;
    margin: 2px;
}

.mrg_btn_20 {
    margin-bottom: 20px !important;
}

.payment {
    list-style: none;
}

.coach-avatar {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    margin-left: 15px;
    border: 1px solid #ddd;
}

.captcha_reload {
    display: inline-flex;
    vertical-align: middle;
    border: 1px solid #BBB;
    border-radius: 6px;
    padding: 5px;
    background-color: #EEE;
    cursor: pointer;
}

.captcha_input {
    margin-top: 10px;
}

.hidden {
    display: none !important;
}

/* new comment */

.be-comment-block {
    border-radius: 2px;
}

.be-img-comment {
    width: 40px;
    height: 40px;
    float: right;
    margin-bottom: 15px;
}

.be-ava-comment {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.be-comment-content {
    margin-right: 50px;
}

.be-comment-content span {
    display: inline-block;
    width: 49%;
    margin-bottom: 15px;
}

.be-comment-name {
    font-size: 13px;
}

.be-comment-content a {
    color: #383b43;
}

.be-comment-content span {
    display: inline-block;
    width: 49%;
    margin: 5px 0 10px 0;
    border: none;
}

.be-comment-content button {
    border: none;
    background: none;
    color: var(--brand-color-2);
}

.be-comment-content button:hover {
    color: var(--brand-color-1) !important;
}

.be-comment-time {
    text-align: left;
}

.be-comment-time {
    font-size: 12px;
    color: #b4b7c1;
}

.be-comment-text {
    font-size: 13px;
    line-height: 25px;
    color: #7a8192;
    display: block;
    background: #f6f6f7;
    border: 1px solid #edeff2;
    padding: 15px;
}

.form-group.fl_icon .icon {
    position: absolute;
    top: 1px;
    left: 16px;
    width: 48px;
    height: 48px;
    background: #f6f6f7;
    color: #b5b8c2;
    text-align: center;
    line-height: 50px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.form-group .form-input {
    font-size: 13px;
    line-height: 50px;
    font-weight: 400;
    color: #6c757d;
    width: 100%;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid #edeff2;
    border-radius: 3px;
}

.form-group .form-input:focus {
    outline: none;
    border: 1px solid transparent;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group.fl_icon .form-input {
    padding-left: 70px;
}

.form-group textarea.form-input {
    height: 150px;
}

.level1 {
    margin: 0 10px 0 10px;
    font-weight: 500;
}

.level2 {
    margin: 0 60px 0 20px;
}

.level3 {
    margin: 0 90px 0 20px;
}

.level2 .be-comment-text, .level3 .be-comment-text {
    background: transparent;
}

.captcha {
    padding: 0;
    margin: 0;
    display: flex;
}

.captcha input {
    width: 100px;
}

img.captcha_image {
    margin: 10px 10px 0 0;
    border-radius: 5px;
}

button.captcha_reload {
    font-size: 25px;
    margin: 10px 10px 0 0;
    transition: 500ms;
}

button.captcha_reload:hover {
    background: var(--brand-color-2);
}

.chekboxlesson + a > .play-link-style {
    margin-right: 12px;
}

/* blog single page */

.img_blog_main {
    width: 100%;
}

.blog-gray-box {
    padding: 10px 0;
    direction: rtl;
    text-align: center;
    color: #5c5c5c;
    background-color: #F6F6F6;
    border-radius: 10px;
    box-shadow: 2px 2px 3px -1px rgb(217 217 217);
}

.blog-gray-box h1 {
    font-size: 20px;
    text-align: right;
    direction: rtl;
    padding-top: 15px;
    padding-right: 80px;
    font-weight: bold;
    color: var(--brand-color-1);
}

.blog-gray-box h5 {
    font-size: 18px;
    text-align: right;
    direction: rtl;
    padding-top: 15px;
    padding-right: 80px;
    font-weight: bold;
    color: #5c5c5c;
}

.blog-gray-box h4 {
    margin-top: 14px;
    font-weight: bold;
}

.blog-gray-box .data-blog {
    font-size: 14px;
    margin-right: 12px;
    padding-top: 10px;
}

@media (min-width: 460px) AND (max-width: 991px) {
    .blog-gray-box h4 {
        margin-right: 40px;
    }
}

.Blogcontent {
    line-height: 2;
    color: #6c757d;
    font-weight: 300;
}

.Blogcontent h1, .course-box-body h1 {
    font-size: 26px;
    color: #4b6584;
}

.Blogcontent a, .course-box-body a {
    color: #4b6584;
    font-weight: 600;
}

.Blogcontent a:hover, .course-box-body a:hover {
    color: var(--brand-color-2);
    border-bottom: 1px solid var(--brand-color-1);
    font-weight: 700;
}

.Blogcontent h2, .course-box-body h2 {
    font-size: 22px;
    color: #4b6584;
}

.Blogcontent h3, .course-box-body h3 {
    font-size: 20px;
    color: #4b6584;
}

.Blogcontent h4, .course-box-body h4 {
    font-size: 18px;
    color: #4b6584;
}

.Blogcontent h5, .course-box-body h5 {
    font-size: 16px;
    color: #4b6584;
}

.Blogcontent h6, .course-box-body h6 {
    font-size: 15px;
    color: #4b6584;
}

.blog2 {
    padding: 15px;
    border-left: 1px solid #F6F6F6;
    border-right: 1px solid #F6F6F6;
    border-bottom: 1px solid #F6F6F6;
}

.BlogListCat {
    margin-top: 20px;
    padding: 10px;
}

.BlogListCat li {
    list-style: none;
    margin: 10px 0;
    background-color: #FFF;
    text-align: right;
    transition: 500ms;
}

.BlogListCat a {
    display: block;
    padding: 10px !important;
    border-right: 5px solid var(--brand-color-2);
}

.BlogListCat li :hover {
    background-color: var(--brand-color-2);
    color: #FFF;
    border-right: 5px solid var(--brand-color-1);
}

.blogList_ {
    border-radius: 10px !important;
    z-index: 5;
    padding-bottom: 0 !important;
}

.blogList_ img {
    border-radius: 10px 10px 0 0 !important;
}

.blogList_ a h4 {
    margin: 15px 15px 0 15px;
    font-weight: bold;
    font-size: 16px;
}

.blogList_ p {
    direction: rtl;
    padding: 10px;
    font-weight: 300;
}

.blogList_2 {
    text-align: center;
    border-radius: 0 0 10px 10px !important;
    display: flex;
    justify-content: center;
    padding: 3px 0;
}

.blogList_2 a {
    border-radius: 0 0 10px 10px !important;
    font-size: 13px !important;
}

.blogList_ h4 {
    line-height: 1.8;
    margin: 0 5px;
}

.blogList_ p {
    margin: 5px;
}

.blog2 {
    text-align: right;
    direction: rtl;
}

.blog2 form .form-body .fltr {
    float: right;
}

.blog-svg-icon {
    position: absolute;
    right: 15px;
    font-size: 15px;
    border: 1px solid #cbcbcb;
    background-color: white;
    padding: 15px;
    border-radius: 100%;
    width: 50px !important;
    height: 50px;
}

/* course and category sidebar */

#course_categories_list ul, #course_enrollment_list ul {
    padding-right: 0;
    list-style: none;
    line-height: 40px;
}

#course_categories_list, #course_enrollment_list {
    border-radius: 10px !important;
    padding: 10px;
    background-color: #F6F6F6;
    box-shadow: 2px 2px 3px -1px rgba(217, 217, 217, 1);
    margin-bottom: 20px;
    /*border-top: 3px solid var(--brand-color-1);*/
}

#course_categories_list ul li a, #course_enrollment_list ul li a {
    border: 0;
    font-weight: 500;
    margin-right: 20px;
}

#course_categories_list ul li li a, #course_enrollment_list ul li li a {
    margin-right: 10px;
    border: 0;
    color: #5d5d5d;
    display: block;
}

#course_categories_list ul li a:hover, #course_enrollment_list ul li a:hover {
    color: var(--brand-color-2);
}

#course_categories_list label, #course_enrollment_list label {
    background-color: #F6F6F6;
    border-bottom: 2px solid #ededed;
    color: var(--brand-color-1);
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    margin-top: 15px;
    padding-right: 60px;
    padding-bottom: 20px;
}


.cat_mainLink {
    text-align: center;
    background-color: var(--brand-color-1);
    color: #fdfdfd !important;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    display: block;
}

.cat_mainLink:hover {
    background-color: var(--brand-color-2);
}

._item_category_dept_1 {
    padding-right: 0 !important;
    width: 100%;
}

._item_category_dept_1 a {
    margin: 5px;
    padding: 0;
    border-bottom: 1px solid #fefefe !important;
}

._item_category_dept_1 a i {
    margin: 5px 0 0 5px;
    float: right;
}

._item_category_dept_2 a i {
    margin: 5px 25px 0 5px;
    float: right;
}


/* Fixed sidenav, full height */
.sidenav {
    font-weight: normal !important;
    overflow-x: hidden;
    transition: 500ms;
}

.BoxerM {
    width: 100%;
    background-color: #FFF;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 5px !important;
    min-height: 25px;
}

.BoxerM_active {
    background-color: var(--brand-color-1) !important;
}

.BoxerM_active a {
    color: #FFF !important;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn, .sub_depth_1 {
    text-decoration: none;
    font-size: 14px !important;
    color: #818181;
    border: none;
    cursor: pointer;
    outline: none;
    font-weight: normal !important;
    float: left;
    background: var(--brand-color-1);
    text-align: center;
    margin-left: -4px;
    padding-right: 0;
    width: 29px;
    border-radius: 5px !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.dropdown-btn i, .dropdown-btn svg, .sub_depth_1 i {
    margin-right: 5px;
    font-size: 14px;
    color: #fff !important;
}

.share-box {
    font-size: 28px;
    text-align: right;
    display: flex;
    align-items: center;
    margin-bottom: -15px;
}

.share-box span {
    margin-left: auto;
    font-size: 14px;
    color: #495057;
}

.share-box > a {
    margin-right: 10px;
}

.share-box .form-body {
    display: flex;
}

/*.share-box .rating {*/
/*    border: none;*/
/*    direction: ltr;*/
/*    margin-top: 0;*/
/*    float: none;*/
/*}*/

/*.share-box .rating > label:before {*/
/*    content: "\f005";*/
/*    display: inline-block;*/
/*    font-family: FontAwesome;*/
/*    font-size: 23px !important;*/
/*    font-weight: bold;*/
/*    margin: 5px;*/
/*}*/

/* scroll to top style */
.scroll-top button {
    right: 0;
    bottom: 30px;
    border: 0;
    color: var(--brand-color-2);
    background: none;
    transition: 500ms;
    z-index: 999;
}

.scroll-top button:hover {
    color: var(--brand-color-1);
}

/* breadcrumb */
.rp-breadcrumb ol.breadcrumb {
    border-radius: 10px;
}

.rp-breadcrumb ol.breadcrumb li.breadcrumb-item {
    font-size: 14px;
}

.breadcrumb-item + .breadcrumb-item::before {
    padding-left: 0.75rem;
}


/* ticket style */

.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center
}

.rating > input {
    display: none
}

.rating > label {
    position: relative;
    width: 1em;
    font-size: 20px;
    color: #FFD600;
    cursor: pointer
}

.rating > label::before {
    content: "\2605";
    position: absolute;
    opacity: 0
}

.rating > label:hover:before,
.rating > label:hover ~ label:before {
    opacity: 1 !important
}

.rating > input:checked ~ label:before {
    opacity: 1
}

.rating:hover > input:checked ~ label:before {
    opacity: 0.4
}

.ticket-panel-heading {
    background: #6c757d;
    border-radius: 10px 10px 0 0;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table td, .table th {
    padding: 6px;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.panel-title img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 3px solid var(--brand-color-2);
}

.panel-title {
    color: white;
}

.panel-title + button {
    margin: 5px;
}

.new-replay-panel {
    direction: rtl;
    margin-bottom: 10px;
}

.new-replay-panel-heading {
    background: var(--brand-color-1);
    border-radius: 10px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.replay-panel, .ticket-panel {
    direction: rtl;
    margin-bottom: 10px;
}

.replay-panel .panel-body, .ticket-panel .panel-body {
    border: 1px solid #ddd;
    border-top: none;
}

.replay-panel-heading {
    background: var(--brand-color-2);
    border-radius: 10px 10px 0 0;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Activities Style */
/*
.assigment-upload  label.control-label {
  color: var(--brand-color-1);
}

.assigment-upload label.custom-input {
  margin-bottom: 20px;
  width: 100%;
}



*/


/* assignment  */


.assignment-title {
    border: 1px solid #007bff36;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 9px #eeee;
}

.assignment-title label {
    display: block;
    background-color: aliceblue;
    border-radius: 10px 10px 0 0;
    padding: 5px 10px;
    margin-top: -10px;
    margin-right: -10px;
    margin-left: -10px;
    font-weight: bold;
}

.assignment-title p {
    font-size: 16px;
    padding: 5px;
    color: #757575;
    line-height: 30px;
    font-weight: 300;
    margin: 0;
}

.assignment-body {
    border: 1px solid #ff000036;
    border-radius: 10px;
    box-shadow: 0 0 9px #eeee;
}

.assignment-body label {
    display: block;
    background-color: #ff00001c;
    border-radius: 10px 10px 0 0;
    padding: 5px 10px;
    margin: 0;
    font-weight: bold;
}

.assignment-body #cke_answer_assignment {
    border: 1px solid #ffe3e3;
}

.assignment-body div.form-group.form-md-line-input {
    padding: 0 !important;
}

.assigment-upload > div {
    border: 1px solid #82e6ef;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 9px #82babf96;
}

.assigment-upload > div label {
    display: block;
    background-color: #32c5d257;
    border-radius: 10px 10px 0 0;
    padding: 5px 10px;
    margin-top: -10px;
    margin-right: -10px;
    margin-left: -10px;
    font-weight: bold;
    color: #5d5d5d !important;
}

.assigment-upload > div ._form_uploader {
    margin: 20px;
}

.assignment-afterupload {
    padding: 10px;
    box-shadow: 0 0 3px #cec7c7;
    margin-top: 15px;
    background-color: white;
    border-radius: 10px;
}

.assignment-afterupload .title {
    color: #fff;
}

.assignment-afterupload .title td {
    background-color: #483e3e;
    border-top: none;
}

.assignment-afterupload .title td:first-child {
    border-top-right-radius: 10px;
}

.assignment-afterupload .title td:last-child {
    border-top-left-radius: 10px;
}

.assignment-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.assignment-uploader .input {
    flex: 1;
    height: 39px;
    border-radius: 5px;
    position: relative;
    border: 1px solid var(--brand-color-2);
}

.assignment-uploader .input .custom-input {
    background: none;
    padding: 0;

}

.assignment-uploader .input .custom-input .filename {
    position: absolute;
    right: 184px;
    top: 10px;
    font-size: 12px;
}

.assignment-uploader .input .custom-input::before {
    content: "فایل خود را وارد کنید ...";
    position: absolute;
    display: block;
    text-align: center;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 13px;
    color: #FFF;
    background-color: #32c5d2;
    border-radius: 6px;
    top: 4px;
    right: 7px;
    box-shadow: 0 0 2px #fff;
}

.assignment-uploader .input .custom-input input {
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.assignment-uploader .input input {
    border-color: #dc3545 !important;
    border-radius: 5px !important;
}

.assignment-uploader .button {
    margin-right: -131px;
    z-index: 1;
}

.assignment-uploader .button button {
    border-radius: 0;
    margin-top: 4px;
    padding: 7px;
}

.assignment-uploaded {
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    align-items: center;
    padding: 8px 14px;
    margin-top: 8px;
    background-color: #dc3545;
    color: #ffffff;
}

.assignment-uploaded p {
    margin: 0;
    padding: 0;
}

.assignment-uploaded ._delete_file_uploaded {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
}

.assignment-uploaded ._delete_file_uploaded i {
    margin-left: 5px;
}

.assigment-upload + div div.form-actions input {
    margin-right: 10px;
}

.assignment-btn {
    border-radius: 5px !important;
    background-color: var(--brand-color-2);
    color: #fff;
    padding: 5px;
    display: inline-block;
    margin: 0 15px 15px 0;
}

.assignment-btn:hover {
    background-color: var(--brand-color-1);
    color: #fff;
}

.assignment-btn-manage {
    direction: rtl;
    border-radius: 4px !important;
    background-color: #df3979 !important;
    border: 1px solid #ca2e6a;
    color: #fff;
}

.assignment-btn-manage:hover {
    background-color: #c12d66 !important;
    border: 1px solid #df3979;
    color: #fff;
}

.assigment-score div.form-group.form-md-line-input, .assigment-publish div.form-group.form-md-line-input {
    border: 1px solid #41a0da;
    border-radius: 10px;
    box-shadow: 0 0 9px #41a0da75;
    margin-top: 15px !important;
    padding: 0 !important;
}

.assigment-score div.form-group.form-md-line-input label, .assigment-publish div.form-group.form-md-line-input label {
    background-color: #41a0da;
    padding: 5px 10px;
    border-radius: 10px 10px 0 0;
    color: #fff;
    margin-top: -1px;
    font-weight: bolder;
}

.assigment-score label, .assigment-publish label {
    text-align: right;
}

.assigment-publish {
    margin-bottom: 20px;
}

.assigment-score .help-block, .assigment-publish .help-block {
    display: none;
}


@media (max-width: 768px) {
    .assigment-upload > div ._form_uploader {
        margin: 15px;
    }

    .assignment-uploader {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 108px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: clip;
        text-align: left;
    }

    .assignment-uploader .input {
        width: 100%;
        height: 100px;
        border-radius: 5px;
        position: relative;
        border: 1px solid var(--brand-color-2);
    }

    .assignment-uploader .button {
        margin-right: 0;
        z-index: 1;
        width: 100%;
        margin-top: 18px;
    }

    .assignment-uploader .button button {
        width: 50%;
        display: inline-block;
    }

    .assignment-uploader .input .custom-input .filename {
        position: absolute;
        right: 11px;
        top: 41px;
        font-size: 12px;
    }

}

@media (max-width: 768px) {
    .buttonAddress {
        text-align: center;
    }

    .user-addres {
        display: block !important;
    }

}

.question-list-container .box-list-question {
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 3px var(--brand-color-2);
    float: right;
}

ul#list_question {
    padding: 0;
    margin: 0;
}

.errobx5 {
    background-color: #FDF1EF;
    color: #C5391C;
    padding: 0 !important;
}

.errobx5 strong {
}

.errobx5 i {
    background-color: #C53820;
    padding: 20px 16px;
    color: #FFF;
    margin-left: 15px;
    font-size: 20px;
}

/*  karname  */
.question-list-container .sticky-top {
    z-index: 0 !important;
}


.user-exam-info {
    background-color: #efeded;
    border-radius: 15px;
    margin-bottom: 10px;
}

.user-exam-info img {
    max-width: 100%;
    height: auto;
}

.user-exam-info h1 {
    background-color: #efeded;
    border-radius: 15px;
    font-size: 17px;
    text-align: right;
    padding: 16px;
}

.user-exam-info.answer-page .item-profile div span {
    display: flex;
    align-items: center;
}

.user-exam-info.answer-page .item-profile div span p {
    margin: 0 5px 0 0;
    padding: 0;
}

.user-exam-info h1 p {
    margin: 0;
}

.user-exam-info h3 {
    text-align: right;
    font-size: 18px;
    color: #5d5d5d;
    padding: 10px;
    margin: 0 10px 0 0;
}

.user-exam-info .user-exam-info-item {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #e0dede;
    padding: 10px;
    text-align: right;
}

.user-exam-info .user-exam-info-item .content {
    display: flex;
    align-items: center;
}

.user-exam-info .user-exam-info-item .content .profile {
    text-align: center;
    background-color: #f8f8f8;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 10px;
}

.user-exam-info .user-exam-info-item .content .profile div {
    background-color: #fff;
    border-radius: 50px;
    width: fit-content;
    margin: 6px auto;
    padding: 2px 26px;
    font-size: 14px;
    box-shadow: 0 0 14px #e6e6e6b3;
}

.user-exam-info .user-exam-info-item .content .item-profile div {
    background-color: #f8f8f8;
    padding: 5px 10px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.user-exam-info .user-exam-info-item .content .item-profile .exam-title {
    background-color: #e7f5ff;
}

.user-exam-info .user-exam-info-item .content .item-profile .answer-true {
    background-color: #c9efcb;
}

.user-exam-info .user-exam-info-item .content .item-profile .answer-flase {
    background-color: #f7cddb;
}

.user-exam-info .user-exam-info-item .content img {
    box-shadow: 0 0 2px #cecece;
    border-radius: 200px !important;
    height: 80px;
    width: 80px;
    margin: 20px 0;
    border: 1px solid gray;
}

.user-exam-info .user-exam-info-item .content img.math-latex-img {
    width: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.title-answer {
    background-color: #53a5dd;
    border-radius: 15px;
}

.title-answer h3 {
    text-align: center;
    font-size: 17px;
    color: #fff;
    padding: 10px 0;
    margin: 0;
}

.list-naswer {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 3px #53a5dd;
    padding: 1px;
}

.list-answer-alert {
    color: #856404;
    background-color: #fff3cd;
    padding: 10px;
    margin: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50px;
}

.list-naswer .item-lest-answer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 7px 0;
    margin: 6px;
    background-color: #f5f5f5ba;
    border-radius: 38px;
    position: relative;
    box-shadow: 0 0 3px #53a5dd80;
}

.list-naswer .item-lest-answer span {
    width: 30px;
    height: 30px;
}

.list-naswer .item-lest-answer .number {
    background-color: #53a5dd;
    color: #ffffff;
    width: 80px;
    border-radius: 0 50px 50px 0;
    text-align: center;
    height: 45px;
    line-height: 45px;
    margin-top: -7px;
    margin-bottom: -7px;
    margin-right: -20px;
}

.list-naswer .item-lest-answer .info-question {
    opacity: 0;
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    box-shadow: 0 0 4px 1px #e6e4e4;
    background-color: #53a5dd;
    color: #fff;
    transition: opacity .2s ease-in-out;
}

.list-naswer .item-lest-answer:hover .info-question {
    opacity: 1;
}

.list-naswer .item-lest-answer .true {
    background-color: #4CAF50;
    color: #fff;
    width: 30px;
    border-radius: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 7px #4caf50;
    border: 1px solid #fff;
}

.list-naswer .item-lest-answer .false {
    background-color: #E91E63;
    color: #fff;
    width: 30px;
    border-radius: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 7px #E91E63;
    border: 1px solid #fff;
}

.btn.green-dark:not(.btn-outline) {
    color: #FFF;
    background-color: var(--brand-color-2);
    border-color: var(--brand-color-2);
}

.mande_zaman {
    float: left;
    font-size: 12px;
}

.timer {

    direction: ltr;
    text-align: center;
}

.timer div {
    float: left;
}

.jst-hours, .jst-minutes, .jst-seconds {
    color: #dc3545;
    font-size: 18px;
    margin-bottom: 10px;
}

.Markasnwered {
    border: 2px solid #dc3545 !important;
    background-color: #dc3545 !important;
}

.Noasnwered {
    border: 2px solid #6c757d !important;
    background-color: #6c757d !important;
}

.btn {
    border-radius: 10px
}

.answerBox .control-group .control:hover {
    background-color: #E3DFDF
}

.answerBox .control-group .control {
    border: 1px solid #E5E5E5;
    border-radius: 5px;
    padding: 9px 35px 0 35px;
    min-height: 40px;
}

.answerBox .control-group .control_indicator {
    margin-top: 5px;
    margin-right: 5px;
    text-align: center;
    font-size: 13px;
}

.answerBox .control-group p {
    margin: 0 !important
}

.answerBox2 {
    width: 100%;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #D1D1D1;
    text-align: center
}

.box_course28 {
    font-weight: 400;
}

.box_course28 > .question_no {
    display: inline-block;
    color: var(--brand-color-1);
}

.box_course28 > .question_no:after {
    content: '-';
}

.box_course28 > .question_no + div {
    display: inline;
    color: var(--brand-color-1);
}

.box_course28 p {
    line-height: 1.5;
    text-align: justify;
    direction: rtl
}


.control {
    display: block;
    position: relative;
    padding-right: 27px;
    margin-bottom: 7px;
    padding-top: 2px;
    cursor: pointer;
    font-size: 14px;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control_indicator {
    position: absolute;
    top: 4px;
    right: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
    border: 0 solid #000000;
}

.control-radio .control_indicator {
    border-radius: 50%;
}

.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #cccccc;
}

.control input:checked ~ .control_indicator {
    background: #F78A00;
}

.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: var(--brand-color-2);
}

.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}

.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control_indicator:after {
    display: block;
}

.control-radio .control_indicator:after {
    right: 7px;
    top: 7px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #ffffff;
}

.control-radio input:disabled ~ .control_indicator:after {
    background: #7b7b7b;
}

.Underbx75 {
    width: 20px;
    height: 20px;
    background-color: var(--brand-color-1);
    margin: 1px 15px;
    display: inline-block;
    vertical-align: middle;
}

.Underbx76 {
    width: 20px;
    height: 20px;
    background-color: var(--brand-color-2);
    margin: 1px 15px;
    display: inline-block;
}

.Underbx77 {
    width: 20px;
    height: 20px;
    background-color: #6c757d;
    margin: 1px 15px;
    display: inline-block;
    vertical-align: middle;
}

.Question {
    width: 100%;
    margin-top: 30px;
    text-align: right;
}

.question {
    width: 800px;
    direction: rtl;
    text-align: justify;
}

.create_new {
    float: left;
    margin-top: 0;
    padding-top: 35px;
    margin-bottom: -50px;
}

.create_new2 {
    display: none;
}

@media (max-width: 991px) {
    .create_new {
        display: none;
    }

    .create_new2 {
        display: block;
    }
}

.sticky2 {
    position: fixed;
    top: 0;
    width: 275px;
}

.QTA_a {
    margin-top: 22px;
}

.btn-success2 {
    color: #FFF !important;
    background-color: var(--brand-color-2);
    border-color: var(--brand-color-2);
    border-radius: 20px;
    margin: 0 auto;
    cursor: pointer;
}

.btn-success2:hover {
    background-color: var(--brand-color-1);
}

.QTA .form-body {
    padding: 0 !important;
    margin: 20px 0 !important;
    width: 100%;
    float: right;
    background-color: #5c5c5c;
}

._question .form-body {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    float: right;
    background-color: #5c5c5c;
}

.QTA .form-body legend, .form-group lable {
    display: none;
}

._answers {
    background-color: #FFF;
    margin-top: 50px;
}

.qta_01 h6 {
    color: #585858;
}

#list_question li {
    list-style: none;
}

.martg10 {
    float: right;
    width: 100%;
    margin-top: 20px;
}

.mrgbtn10 {
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.mrgbtn10 .form-control {
    background-color: #FFF !important;
}

._ansW2 .form-group.form-md-line-input {
    float: right;
    width: 90%;
    margin: 2px 5%;
    border-radius: 5px;
}

._answer_user_form {
    width: 100%;
    float: right;
}

.answer, .question_id {
    width: 500px;
    text-align: justify;
    direction: rtl
}


.martg10 .form-body .control-label {
    color: #FFF !important;
}

._row_answer {
    border-bottom: 1px solid #ededed;
    padding-bottom: 15px;
    background-color: #FFF;
}

._row_answer:last-child {
    border-bottom: 0;
}


#Qtoa_system div a {
    margin-top: 20px;
}


.qta_01 h6 {
    text-align: justify;
    direction: rtl;
    line-height: 2;
}


@media (max-width: 1199px) {
    ._ansW2 .box_course3 {
        display: none;
    }

    ._answers {
        margin-top: 100px;
    }

    /* .martg10 {
         width: unset !important;
     }*/
    ul#list_question {
        padding: 5px;
    }

    a.MyBasket_.btn._nobrd.mrguserleft {
        margin-top: -48px !important;

        margin-left: 60px !important;

        padding: 10px 7px;
        border-radius: 5px;
    }

    a.MyBasket_.btn._nobrd.mrguserleft-login {
        margin-top: -48px !important;

        margin-left: 130px !important;

        padding: 10px 7px;
        border-radius: 5px;
    }

    a.MyBasket_.btn.a_plc_30._nobrd {
        margin-top: -46px !important;
        top: 2px;
        position: absolute;
        padding: 13px 1px 2px 10px;
    }
}

.btnL_newQues {
    float: Left;
    margin-left: 10px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #00a59f;
}

._colorW {
    color: #FFF;
    margin-top: 17px;
}

._ansW1 {
    background-color: #F6F6F6;
    width: 100%;
    padding: 0;
    margin: unset !important;
    min-height: 200px;
    float: right;
    border-bottom: 1px solid #E8E6E6;
}

.avatar_user {
    width: 70px;
    height: 70px;
    border-radius: 200px;
    margin: 10px;
}

._nameBox {
    /*width: 100%;*/
    /*float: Right;
    text-align: center;*/
}

@media (max-width: 1199px) {
    .btnL_newQues {
        float: Right;
        width: 98% !important;
        margin-left: auto;
    }

    ._ansW1 {
        width: 100%;
        padding: 0 0 20px;
    }
}

@media (max-width: 1199px) {
    ul.nav.nav-pills {
        padding: 15px;
    }
}

._ansW2 h6 {
    color: #ff6348;
    margin-top: 15px;
}

.noBg {
    background-color: transparent;
}

.box_course7 {
    float: Left;
    margin-left: -56px;
}

._ansW2 p {
    text-align: justify !important;
    direction: rtl !important;
}

.bc_file3:before {
    color: #ff6348;
    margin-top: -22px;
}

.bc_file4:before {
    color: #ff6348;
    margin-top: -22px;
}

._ansW2 {
    padding: 30px 20px;
    color: #333333;
    padding-bottom: 15px !important;
}

._ansW4 {
    color: #00a59f;
    width: 100%;
    background-color: #ededed;
    padding: 5px 8px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

._ansW4 i {
    margin-right: 10px;
}

.bgW {
    background-color: #FFF !important;
}

.bc_file4 {
    color: #ff6348 !important;
    border: 1px solid #ff6348 !important;
    padding-right: 12px !important;
    width: 40px !important;
    border-radius: 50%;
    height: 40px;
}

.bc_file5 {
    color: #00a59f !important;
    border: 1px solid #00a59f !important;
    padding-right: 12px !important;
}

.bc_file15 {
    color: #00a59f !important;
    border: 1px solid #00a59f !important;
    padding-right: 12px !important;
}

.bc_file15 i {
}

.bc_file6 {
    color: #00a59f !important;
    border: 1px solid #00a59f !important;
    padding-right: 14px !important;
}

.box_course8 i {
    font-size: 22px !important;
}

.box_course8 {
    font-size: 12px;
}

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

.scrolling-box {
    scroll-behavior: smooth;
    display: block;
}

@media (max-width: 767px) {
    ._toper_makeDif2 {
        float: Left !important;
        -webkit-box-ordinal-group: 13;
        -ms-flex-order: 12;
        order: 12;
    }
}

._toper_makeDif {
    float: Right !important;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
}

#btn_box_course {
    position: relative;
    margin: 10px 0 !important;
}


.qta_01 h6, .box_course7 div .box_course3 {
    display: block;
    width: 100%;
}

.qta_01 .box_course3 {
    margin-bottom: 10px;
}

.QTA {
    float: right;
    width: 100%;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    margin-top: -10px;
}

._row_answer {
    padding-bottom: 10px;
    margin-bottom: 5px !important;
}

.nav-link {
    color: gray;
    font-size: 13px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--brand-color-2);
    background-color: transparent;
}

.question-list-container .box-list-question {
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 0 3px #4db3a2;
}

ul#list_question {
    padding: 0;
    margin: 0;
}

.box_course41 {
    padding: 0 5px !important;
}

._coach_avatar {
    width: 70px;
    height: 70px;
    border-radius: 200px !important;
    float: Right;
    margin-left: 15px;
    margin-top: 30px;
    border: 1px solid gray;
}

.box_course5 h3 {
    float: Right;
    font-size: 18px;
    margin-top: 35px;
    margin-right: 15px;
}

.box_course5 h6 {
    float: Right;
    margin-top: 65px;
    margin-right: -115px;
    font-size: 13px;
    color: #ff6348;
}

.palcle2 {
    text-align: Left;
    margin-top: 30px;
}

.box_course6 {
    padding: 20px 5px;
    border-bottom: 1px solid #ededed;
    margin-bottom: 15px;
}

.box_course6:last-child {
    border-bottom: 0;
    margin-bottom: 5px;
}

.box_course34 ._dislike i, .box_course34 ._like i, .box_course34 ._dislike svg, .box_course34 ._like svg {
    font-size: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

span.redme {
    margin-right: 45px !important;
}

.box_course34 .fa-thumbs-up {
    font-size: 12px;
}

.box_course3 a span {
    margin-top: -30px;
    position: absolute;
    padding-left: 15px;
    left: 0;
}

.box_course34 a span {
    color: #00a59f;
    text-align: right;
    font-size: 15px;
    width: 40px;
    bottom: 18px;
    left: -12px;
    padding: 0 !important;
}

.box_course34 a .redme {
    left: 110px !important;
    color: #FF6348 !important;
    text-align: left !important;
}

a._dislike {
    margin-left: 10px;
}

.box_course34 {
    padding: 0;
    margin: 0;
}

.box_course3 {
    float: Right;
    margin-top: 10px;
}

.box_course3 i {
    border: 2px solid #E6E6E6;
    background-color: #FFF;
    color: #5D5D5D;
    border-radius: 200px;
    width: 45px !important;
    height: 45px !important;
    margin-left: 7px;
    padding-top: 14px;
    font-size: 20px;
    float: right;
}

._ansW2 .box_course3 i, .box_course3 a svg {
    padding-left: 15px !important;
    padding-right: 6px !important;
    margin-left: 10px !important;
}

.box_course36 {
    margin-left: 10px !important;
    padding-left: 10px;
}

.box_course34 {
    /*float: left;*/
}

.bc_file:before {
    margin-left: 13px;
}

.bc_file1:before {
    margin-left: 10px;
}

.bc_file2:before {
    margin-left: 12px;
}

.box_course3 h6 {
    float: right;
    color: #5c5c5c;
    margin-top: 15px;
}

.box_course3 i:hover {
    background-color: #efefef;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.BgWithe {
    background-color: #ffffff;
    height: auto;
    width: 100%;
    float: Right;
}

.box_course2 {
    border: 1px solid #ededed;
    margin: 5px 0;
    border-radius: 5px;
    background-color: #F6F6F6;
    height: 70px;
}

.box_course10 {
    border: 1px solid #ededed;
    margin: 5px 0;
    border-radius: 5px;
    border-bottom: 0;
    height: 55px;
}

.box_course27 {
    width: 100%;
    text-align: right;
}

.box_course27 i {
    float: right;
    padding-top: 11px;
    font-size: 20px;
    padding-right: 13px;
}

.box_course27 h6 {
    float: right;
    font-size: 12px;
    margin-top: 15px;
    direction: rtl;
}

a.btnL_newQues {
    color: var(--brand-color-2) !important;
}

div.user-form-style {
    display: flex;
}

.modal-dialog .user-form-style .login-form {
    flex: 1;
    max-width: 100%;
}

.loadmoreDiV {
    text-align: left;
    color: #fff;
    display: inline-block;
    top: -30px;
}

@media screen and (max-width: 768px) {
    .position-style {
        left: 0;
    }
}


.box-important tr {
    font-size: 14px;
    font-weight: normal;
    color: #5d5d5d;
}

.question-fix {
    background: #fff;
    font-size: 13px;
    border-top: 0;
    padding: 0;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.QuestionDiv a {
    color: #FFF;
    margin: 2px;
    border: 2px solid var(--brand-color-1);
    text-align: center;
    background-color: var(--brand-color-1);
    height: 45px !important;
    float: right;
    width: 45px !important
}

.QuestionDiv a span {
    color: #454545;
    text-align: center;
    background-color: #FFF;
    width: 41px !important;
    height: 20px !important;
    float: right;
}

.QuestionDiv a:hover {
    opacity: .9
}

.sidebar-item {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.make-me-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 0 15px;
}

.content-section {
    background: #fff;
/ / border-radius: 12 px;
/ / border: solid 10 px #f1f1f1;
}

.content-section h2 {
    text-align: center;
    margin: 0;
    padding-top: 200px;
}

/* activity custom style theme 3 */

.activity-page {
    background: #f9f9f9;
    border-radius: 10px;
    margin-bottom: 30px;

}

.activity-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1.5rem;
}


.activity-page-header h1 {
    font-size: 20px;
    color: var(--brand-color-1);

}
@media (max-width: 620px) {
    .activity-page-header {
        justify-content: space-evenly;
        flex-direction: column-reverse;
        padding: 0.5rem;
    }
    .activity-page-header h1 {
        font-size: 14px;
    }

    .activity-page-header a.btn {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
}


.activity-page-body {
}

.activity-page-footer {
}


/*--------- bandel by:masoud zahedi -----------------*/
.bndl {
    font-size: 16px;
    border: 1px solid #e3e3e3;
    padding: 10px 0;
    margin-top: 10px;
    margin-right: 3px;
    margin-left: 3px;
}

.bndl:hover {
    background-color: #f6f6f6;
}

.bndl-list {
    margin-left: 5px;
    color: #ffff;
    padding: 0 10px;
    border-radius: 50px;
    background-image: -moz-linear-gradient(0deg, rgb(243, 83, 66) 0%, rgb(248, 113, 38) 49%, rgb(253, 142, 9) 100%);
    background-image: -webkit-linear-gradient(0deg, rgb(243, 83, 66) 0%, rgb(248, 113, 38) 49%, rgb(253, 142, 9) 100%);
    background-image: -ms-linear-gradient(0deg, rgb(243, 83, 66) 0%, rgb(248, 113, 38) 49%, rgb(253, 142, 9) 100%);
    box-shadow: -0.977px 3px 13px 0 rgba(67, 68, 69, 0.53);
}

.bndl-elemnts {
    font-size: 13px;
    margin-right: 10px;
}

.bndl-cart {
    color: #3bbd1c;
}

.bndl-real-cost {
    font-size: 18px;
    text-decoration: line-through;
    color: #f66334;
    font-weight: 500;
    text-align: left;
    padding: 9px 10px;
    margin: 15px;
    border-top: solid 2px #e3e3e3;
    border-bottom: solid 2px #e3e3e3;
}

.bndl-basket-align {
    text-align: center;
    display: block;
}

.title-last-cost {
    font-size: 17px;
    color: #7d7d7d;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
}

.bndl-btn {
    position: absolute;
    top: 108px;
    width: 100%;
    left: 26px;
}

.bndl-btn button {
    padding: 12px;
    border: none;
    width: 100%;
    background-image: -moz-linear-gradient(0deg, rgb(241, 73, 75) 0%, rgb(248, 113, 38) 49%, rgb(255, 152, 0) 100%);
    background-image: -webkit-linear-gradient(0deg, rgb(241, 73, 75) 0%, rgb(248, 113, 38) 49%, rgb(255, 152, 0) 100%);
    background-image: -ms-linear-gradient(0deg, rgb(241, 73, 75) 0%, rgb(248, 113, 38) 49%, rgb(255, 152, 0) 100%);
    box-shadow: -0.853px 4px 10px -3px rgba(67, 68, 69, 0.52) !important;
    border-radius: 0 0 10px 10px !important;
}

.bndl-btn button:active {
    background-image: -moz-linear-gradient(0deg, rgb(241, 73, 75) 0%, rgb(248, 113, 38) 49%, rgb(255, 152, 0) 100%) !important;
    background-image: -webkit-linear-gradient(0deg, rgb(241, 73, 75) 0%, rgb(248, 113, 38) 49%, rgb(255, 152, 0) 100%) !important;
    background-image: -ms-linear-gradient(0deg, rgb(241, 73, 75) 0%, rgb(248, 113, 38) 49%, rgb(255, 152, 0) 100%) !important;
    box-shadow: -0.853px 4px 10px -3px rgba(67, 68, 69, 0.92) !important;
}

.bndl-btn button span {
    font-size: 18px;
}

.bndl-btn button i {
    display: none !important;
}

@media (max-width: 1199px) {
    .bndl-btn button span {
        display: inline !important;
    }
}

.bndl-basket {
    display: inline-block;
    width: 250px;
    position: relative;
    height: 100px;
}

.last-cost {
    background-color: #fff;
    font-weight: 500;
    font-size: 30px;
    color: #f66432;
    padding: 8px 0;
    border-radius: 10px 10px 0 0;
    box-shadow: -1px -1px 11px 0 #dadada;
}


@media (max-width: 1200px) {
    .bndl {
        border-radius: 0;
    }

    .bndl-pack-elemnts {
        margin-top: 15px;
        text-align: center;
    }
}

@media (max-width: 500px) {
    .bndl {
        text-align: center;
    }

    .bndl-basket {
        border-radius: 0;
    }
}

/*Q&A*/
a.btn.btn-success2.btn-sm.QTA_a {
    float: left;
    margin-left: 25px;
}


/*Sort Section*/
#sort_section label {
    margin-top: -20px !important;
}

.filter-style label {
    padding: 0;
}

.filter-style label {
    padding: 0;
}

#sort_section ul li ._item_sort {
    float: right;
}


@media (max-width: 767px) {
    #sort_section {
        height: 220px !important;
    }

    #sort_section li {
        width: 85%;
        float: right !important;
        margin: 10px 0 !important;
    }
}

/*
sort_section
*/
@media (max-width: 431px) {
    #sort_section li {
        width: 85%;
        float: right !important;
        margin: 10px 0 !important;
    }

    #sort_section {
        height: 220px !important;
    }
}

.form-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

@media (max-width: 767px) {
    .form-inline {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-align: center;
        flex-direction: column;
        align-items: center;
    }
}

/* Rating style */
.avg-rate {
    font-size: 65px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02rem;
    color: #e09a00;
}

/* Three column layout */
.side {
    flex: 1;
}

.middle {
    margin-right: 15px;
    flex: 4;
}

/* Place text to the right */
.left {
    text-align: center;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The bar container */
.bar-container {
    width: 100%;
    background-color: #f1f1f1;
    text-align: center;
    color: white;
}

/* Individual bars */
.bars {
    height: 8px;
    background-color: #ffc74a;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
@media (max-width: 400px) {
    .middle {
        flex: 2;
        margin-right: 0px;
    }
    /* Hide the right column on small screens */
    .left {
        display: none;
    }
}
.c-comments__side-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.c-comments__side-rating-container {
    display: inline-block;
    margin-bottom: 20px;
}
.c-comments__side-rating-desc {
    margin-right: 8px;
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.571;
    color: #030a16;
}
.c-comments__side-rating-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.c-stars {
    display: inline-flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    font-size: 14px;
    position: relative;
    direction: ltr;
    width: 85px;
    max-width: 85px;
    min-width: 85px;
}
.c-stars__item {
    line-height: 1;
    margin-left: 1px;
}
.c-stars__selected {
    position: absolute;
    left: 0;
    top: 0;
    direction: ltr;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow: hidden;
}
.c-stars__selected span {
    color: #ffc74a;
}
.c-comments__side-rating-all {
    font-size: .857rem;
    line-height: 1.833;
    color: #81858b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 8px;
}


.c-stars__item:before {
    content: "\f005";
    font-family: FontAwesome;
}

.min-to-rate-link {
    color: black;
}

.min-to-rate-link:hover
{
    color: black;
}

.after-course-img {
    position: absolute;
    transform: translate(95%, 70%);
}
.before-course-img {
    position: absolute;
    transform: scale(-1, -1) translate(-100%, -65%);
}

/*
course list
course item
 */
.course-list-item-title {
    min-height: 67px;
}
.course-list-item-img {
    max-height: 300px;
    min-height: 150px;
}
.course-list-item-stars {
    min-height: 24px;
}

.en-font{
    font-family: "Times New Roman", Times,Tahoma, Geneva, sans-serif !important;
    direction: ltr;
}

/*user register*/
.referral-collapse-toggle{
    margin: 5px;
    text-align: center;
    line-height: 2;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course-list-price-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 57px
}

.height100
{
    height:100%;
}
.course-list-block{
    margin-bottom: 2px;
}
.course-list-block:hover{
    filter: drop-shadow(0 1px 5px rgba(0,0,0,.2));
}