/*********
    ===============================
    Start Customs Css
    ===============================
    
    **********/
/*@font-face {
    font-family: 'Neuton-Regular';
    src: url('../fonts/Neuton-Regular.ttf') format('truetype');
}
*/
@font-face {
    font-family: 'Coming Soon', cursive;
    src: url("../../customs/fonts/ComingSoon-Regular.ttf");
}
@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}

.logo-footer .img-fluid{
    width: 40%;
}
#PageView {
    display: flex;
    justify-content: center;
}
#PageViewQuiz {
    display: flex;
    justify-content: center;
}
.list-2, .list-3, .list-4, .list-5 {
    display: none;
}

.survey-sec-style2 #confetti {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.survey-num {
    font-size: 38px;
    opacity: .3;
    width: 100%;
    height: 100%;
    padding-right: 10px;

}
.survey-name {
   font-size:20px;
    font-weight: 800 !important;
}
.survey > span:third-child {
    position: absolute;
    font-size: 20px;
    font-weight: 600 !important;
    left: 38px;
    top: 44px;
}
.surv-box {
    position: relative;
    background-color: white;
    margin-top: 22px;
    margin-bottom: 22px;
    padding-bottom: 10px;
    border: 1px solid #cccccc7a !important;
    background-color: #fafafa;

}

.surv-box1 {
    position: relative;
    background-color: white;
    margin-top: 22px;
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-radius: 5px !important;
    background-color: #fafafa;
    text-align:center;
    width:160px;
}

/*.survey-background {
    background-color: #f5f5db;
}*/
:root {
    /* --mainFont: 'Neuton-Regular';*/
    --mainFont: 'Coming Soon';
    --altFont: 'OpenSans-Regular';
    --mainColor: #a5c239 !important;
    --padding-60px: 60px 0;
    --padding-30px-30px: 30px;
    --padding-30px: 0 30px;
    --custom-color: #25BECE;
}

/*.them2 {
    --mainColor: #39b54a;
}*/


.them1 .employee-navabar,
.them1 .employee-navabar.bg-white {
    background-color: #fff !important
}

.them2 .employee-navabar,
.them2 .employee-navabar.bg-white {
    background-color: #001f35 !important
}

.them2 .navbar .icon-profile li i, .them2 .navbar .icon-profile li.user-name > a span, .them2 .dropdown-toggle::after,
.them2 .navbar-light .navbar-nav .nav-link {
    color: #fff;
}

    .them2 .navbar-light .navbar-nav .nav-link:focus::after,
    .them2 .navbar-light .navbar-nav .nav-link:hover::after,
    .them2 .navbar-light .navbar-nav .nav-item.active::after {
        color: #000;
    }

.them2 .navbar-light .navbar-nav .active .nav-link {
    color: #000 !important;
}
/*parentlayout
*/
.logoParentKids {
    width: 7rem;
}
.them2 .navbar .icon-profile2 li i, .them2 .navbar .icon-profile2 li.user-name > a span, .them2 .dropdown-toggle::after,
.them2 .text-dark .navbar-nav .nav-link {
    color: black !important;
}
.them2 .text-dark .navbar-nav .nav-link {
    color: black !important;
    font-size: 18px;
    font-weight: bold;
}
.butn {
    color: white;
    position: relative;
    margin-top: 1%;
    background-color: var(--mainColor);
    right: 6%;
}
.img-circle1 {
    border: 1px solid transparent;
    border-radius: 50%;
    height: 53%;
    width: 48%;
}
.cursor:hover {
    cursor: pointer;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.modal-content-cam {
    background-color: #2c2b2b;
    padding-right: 57px;
    color: white;
    padding-top: 6%;
    padding-bottom: 6%;
}
.modal-cam {
    color: white;
    background-color: #000000d9;
}
.img-opacity{
    opacity:0;
}
/*parentlayout
*/
/*********
    ===============================
    Start Customs Style
    ===============================
    **********/
body {
    overflow-x: hidden;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mainFont);
}

p, span, li, button, a {
    font-family: var(--altFont)
}

.btn-padding {
    padding: 6px 40px !important;
}

.btn-pear {
    background: #a5c239;
    border: 1px solid #a5c239;
    color: #fff;
    text-decoration: none;
    text-transform: capitalize;
    display: inline-block;
    transition: all .5s ease-in-out;
    cursor: pointer;
}

.btn-pear-gradient {
    background: transparent linear-gradient(180deg, #EDE80D 0%, #EDE80D 1%, #C7D526 25%, #AEC836 53%, #A0C13E 99%, #EDE80D 100%);
    border-radius: 10px;
}

    /*.btn-pear:hover, .btn-pear:focus, .btn-pear-gradient:hover,
    .btn-pear-gradient:focus {
        color: var(--mainColor);
        background-color: #fff;
        text-decoration: none;
        box-shadow: none;
        outline: 0;
    }*/

.title-sec h2 {
    font-size: 34px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    z-index: 8;
    letter-spacing: 2px;
}

.title-sec p {
    color: #707070;
    font-size: 16px;
}
#btnshowvedio {
    margin-right: 5px !important;
}

.letter-space-1 {
    letter-spacing: 1px;
}

.letter-space-2 {
    letter-spacing: 2px;
}

.main-color {
    color: var(--mainColor) !important;
}

.alt-color {
    color: #707070;
}

.main-background {
    background-color: var(--mainColor);
    color: #fff;
}

    .main-background:hover {
        color: #fff;
    }

.bg-default {
    background-color: #F6F7F7 !important;
    border-radius: 20px;
}

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

input, select {
    border-radius: 8px !important;
    font-size: .75rem !important
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--mainColor);
    color: #fff !important;
}

    .dropdown-item.active, .dropdown-item:active i {
        color: #fff !important;
    }
/* Select To Style*/
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    width: 100% !important;
    height: calc(2.25rem + 2px) !important;
    padding: .375rem .75rem !important;
    border: 1px solid #ced4da !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border-radius: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 54% !important;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

    .select2-container--default .select2-selection--single:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
    }

.select2-container--open .select2-dropdown--below {
    border: none !important
}
.result-logo {
    margin-top: 50px;
    margin-left: 56%;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--mainColor) !important
}

.select2-container--default .select2-results > .select2-results__options {
    background: #fff;
    box-shadow: 1px 1px 8px #cccccc85;
}

.ui-menu .ui-menu-item:hover, .ui-menu .ui-menu-item:hover a, .ui-menu .ui-menu-item-wrapper:hover {
    background-color: var(--mainColor) !important;
    width: 100% !important;
    text-decoration: none !important;
    display: block;
    padding: 0px 10px 0px 10px;
    border: none !important;
}

.js-off-overlay {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 555;
    opacity: .5;
    display: none;
    transition: all 1s ease;
}

/******************************* 
    Start Rate
    **************************/
.rate {
    height: 46px;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}

    .rate:not(:checked) > input {
        position: absolute;
        top: -9999px;
    }

    .rate:not(:checked) > label {
        float: right;
        width: 1em;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        font-size: 22px;
        color: #ccc;
    }

        .rate:not(:checked) > label:before {
            content: '★ ';
        }

    .rate > input:checked ~ label {
        color: #FFAB31;
    }

    .rate:not(:checked) > label:hover,
    .rate:not(:checked) > label:hover ~ label {
        color: #deb217;
    }

    .rate > input:checked + label:hover,
    .rate > input:checked + label:hover ~ label,
    .rate > input:checked ~ label:hover,
    .rate > input:checked ~ label:hover ~ label,
    .rate > label:hover ~ input:checked ~ label {
        color: #c59b08;
    }


/*********
    ===============================
    Start Login , sign Pages
    ===============================
    
    **********/
.login-box,
.signUp-box {
    height: 100vh;
    overflow: hidden;
}

    .login-box .left-side,
    .signUp-box .left-side {
        background: transparent linear-gradient(180deg, #EDE80D 0%, #EDE80D 1%, #C7D526 25%, #AEC836 53%, #A0C13E 67%, #EDE80D 100%) 0% 0% no-repeat padding-box;
        position: relative;
    }

        .login-box .left-side:before {
            content: '';
            position: absolute;
            top: 3%;
            left: -20%;
            width: 400px;
            height: 400px;
            background-image: url('../images/LoginBackground/Ellipse 16.svg');
            background-size: cover;
            background-position: center;
        }

        .login-box .left-side:after {
            content: '';
            position: absolute;
            top: 13%;
            left: -10%;
            width: 250px;
            height: 250px;
            background-image: url('../images/LoginBackground/Ellipse 18.svg');
            background-size: cover;
            background-position: center;
        }

        .login-box .left-side .title-top,
        .signUp-box .left-side .title-top {
            margin-top: 40px;
        }

            .login-box .left-side .title-top h1,
            .signUp-box .left-side .title-top h1 {
                font-weight: bold;
                font-size: 43px;
                letter-spacing: 2.5px;
                color: #FFFFFF;
                position: relative;
                z-index: 2;
            }

            .login-box .left-side .title-top p,
            .signUp-box .left-side .title-top p {
                font-size: 18px;
                font-weight: normal;
                color: #707070;
            }

        .login-box .left-side .image-bottom,
        .signUp-box .left-side .image-bottom {
            margin-top: 25px;
        }

            .login-box .left-side .image-bottom .logo-box img,
            .signUp-box .left-side .image-bottom .logo-box img {
                max-height: 70px;
            }

            .signUp-box .left-side .image-bottom .background-image img {
                height: 310px;
                margin: auto;
            }

            .login-box .left-side .image-bottom .background-image img {
                height: 430px;
            }

    .login-box .right-side .backTo-home,
    .signUp-box .right-side .backTo-home {
        margin-top: 30px;
        margin-right: 80px;
    }

        .login-box .right-side .backTo-home a,
        .signUp-box .right-side .backTo-home a {
            font-size: 15px;
            font-weight: bold;
            letter-spacing: 0.75px;
            color: #707070;
            opacity: 1;
            text-decoration: none;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

            .login-box .right-side .backTo-home a i,
            .signUp-box .right-side .backTo-home a i {
                margin: 0 5px;
                transition: all .5s ease;
            }

            .login-box .right-side .backTo-home a:hover i, .signUp-box .right-side .backTo-home a:hover i {
                transform: translate(-5px)
            }

    .login-box .right-side .title-pages {
        margin-top: 60px;
    }

    .signUp-box .right-side .title-pages {
        margin-top: 30px;
    }

    .signUp-box.signUp-student .title-pages {
        margin-top: 25px;
    }

    .login-box .right-side .title-pages h2,
    .signUp-box .right-side .title-pages h2 {
        font-weight: bold;
        font-size: 30px;
        letter-spacing: 2px;
        color: #000000;
        margin-bottom: 0;
    }

    .login-box .right-side form input, .signUp-box .right-side form input,
    .signUp-box .right-side form select {
        width: 100%;
        background: #F6F7F7 0% 0% no-repeat;
        border: 1px solid #F6F7F7;
        border-radius: 8px;
        border: none;
        padding: 10px 12px;
        margin-top: 30px;
        height: auto;
    }

        .signUp-box .right-side form input:first-of-type {
            margin-top: 0 !important
        }

        .login-box .right-side form input[type="submit"]:focus {
            outline: 0;
            border-radius: 8px;
        }

        .login-box .right-side form input[type="submit"], .signUp-box .right-side form input[type="submit"] {
            background-color: var(--mainColor);
            color: #fff;
            cursor: pointer;
            font-size: 1rem !important;
        }

::-webkit-input-placeholder { /* Edge */
    font: normal 14px var(--altFont);
    color: #979696;
    text-transform: capitalize;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font: normal 14px var(--altFont);
    color: #979696;
    text-transform: capitalize;
}

::placeholder {
    font: normal 12px var(--altFont);
    color: #979696;
    text-transform: capitalize;
}

.login-box .right-side .login-another .ancor-social a, .signUp-box .right-side .login-another .ancor-social a {
    border-radius: 8px;
    padding: 8px;
    color: #fff;
    text-decoration: none;
}

    .login-box .right-side .login-another .ancor-social a:first-of-type,
    .signUp-box .right-side .login-another .ancor-social a:first-of-type {
        background: #4267B2 0% 0% no-repeat;
    }

    .login-box .right-side .login-another .ancor-social a:last-of-type,
    .signUp-box .right-side .login-another .ancor-social a:last-of-type {
        background: #EA4335 0% 0% no-repeat;
    }

    .login-box .right-side .login-another .ancor-social a i,
    .signUp-box .right-side .login-another .ancor-social a i {
        font-size: 20px;
        margin: 0 7px;
    }

    .login-box .right-side .login-another .ancor-social a:last-of-type i {
    }

    .login-box .right-side .login-another .ancor-social a:last-of-type span,
    .signUp-box .right-side .login-another .ancor-social a:last-of-type span {
        background: transparent url('../images/icon/unnamed (3).png') 0% 0% no-repeat padding-box;
        width: 51px;
        height: 38px;
    }

.login-box .right-side .ask-title span,
.signUp-box .right-side .ask-title span {
    color: #707070;
}

.login-box .right-side .ask-title > a,
.signUp-box .right-side .ask-title > a {
    font-size: 14px;
    color: #707070;
}

.login-box .right-side .ask-title p,
.signUp-box .right-side .ask-title p {
    color: #979696;
    font-size: 14px;
}

.signUp-box .right-side .tab-pane .ask-title p {
    font-size: 14px;
}

.signUp-box .right-side .ask-title p span {
    color: #000000;
    font-weight: 700
}

.login-box .right-side .ask-title p a,
.signUp-box .right-side .ask-title p a {
    color: var(--mainColor);
}

.field-validation-error span, #FullName-error, #Email-error {
    margin-top: 5px;
    color: #dc3545 !important;
    font-size: 14px;
}

.forgotPassword .image-forgotPassword img {
    height: 270px;
}
/*Start technical-support Modal*/
.technical-support .image img {
    height: 270px;
}

.technical-support .disc h3 {
    width: 90%;
    margin: auto;
    font-size: 24px;
}

.technical-support .disc a {
    font-size: 20px;
}

    .technical-support .disc a img {
        height: 40px;
    }

.technical-support .divider span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: auto;
}

.technical-support .divider:before {
    content: '';
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #cccccc47;
    left: 0;
    transform: translate(0, -50%);
    z-index: 0;
}
/* Sign Up Customs*/
.signUp-box .right-side h3 {
    letter-spacing: 1.75px;
    color: #707070;
    margin-bottom: 0;
}

.signUp-box .right-side .title-pages h2 {
    font-size: 36px !important
}

.signUp-box .right-side .account-items {
    background: #F6F7F7 0% 0% no-repeat;
    border-radius: 24px;
    padding: 15px;
    border: 2px solid transparent;
    transition: all .5s ease;
}

    .signUp-box .right-side .account-items.active-account,
    .signUp-box .right-side .account-items:hover {
        background: #fff 0% 0% no-repeat;
        border: 2px solid #A5C239;
    }

    .signUp-box .right-side .account-items a:hover {
        text-decoration: none;
    }

    .signUp-box .right-side .account-items a img {
        height: 65px;
    }

    .signUp-box .right-side .account-items a .title {
        margin-left: 15px;
    }

        .signUp-box .right-side .account-items a .title h4 {
            font-weight: bold;
            font-size: 18px;
            letter-spacing: 1.5px;
            color: #000000;
        }

        .signUp-box .right-side .account-items a .title p {
            font-family: var(--mainFont);
            font-size: 16px;
            color: #707070;
        }

.signUp-box .right-side form label {
    color: #707070;
    font-size: 16px;
}

.alert-code {
    position: absolute;
    top: 0;
    right: 0;
    height: 44px;
    background-color: transparent;
    color: var(--mainColor);
    border: none;
}

    .alert-code:focus {
        outline: 0;
        border: none;
    }

    .alert-code .tooltips {
        position: absolute;
        width: 120px;
        display: block;
        top: 0;
        left: 130%;
        background: #fff;
        box-shadow: 0px 3px 6px #00000029;
        color: #2C2B2B;
        font-size: 8px;
        text-align: left;
        padding: 5px;
        display: none;
    }

    .alert-code:hover .tooltips {
        display: block;
    }

.signUp-box .select2-container--default.select2-container--focus .select2-selection--multiple,
.signUp-box .select2-container--default .select2-selection--multiple {
    border: none;
    background-color: #f6f7f7;
    border-radius: 8px;
}
/* Start form Wizard*/
.stepwizard-step p {
    margin-top: 10px;
    font-size: 14px;
}

.stepwizard-row {
    /*display: table-row;*/
    display: flex;
    justify-content: space-between
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 20px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 70%;
    height: 1px;
    background-color: #ccc;
    z-index: 0;
    left: 50%;
    transform: translate(-50%);
}

.stepwizard-step {
    display: table-cell;
    position: relative;
    /*width: 33%;*/
    text-align: center;
}

.btn-circle {
    width: 35px;
    height: 35px;
    text-align: center;
    padding: 0;
    font-size: 14px;
    line-height: 35px;
    border-radius: 50%;
    background: #F6F7F7;
    color: #000;
}

.active-steps {
    background-color: var(--mainColor);
    color: #fff;
}

.modal-under-review .image img {
    height: 250px;
}

/*
    ===========================
    Start Main Wrapper
    ===========================

*/
.main-wrapper {
    -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}

    .main-wrapper .overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.75);
        opacity: 0;
        z-index: -1;
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        transition: background 1s ease;
    }

    .main-wrapper.is-active .overlay {
        opacity: 1;
        z-index: 55;
    }
/*
    ===========================
    Start Navabr
    ===========================

*/
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 55;
    transition: all .5s ease;
}

    .navbar.bg-white {
        box-shadow: 1px 1px 6px #cccccca1;
    }

    .navbar .navbar-brand img {
        transition: all .5s ease;
        max-height: 40px;
    }

    .navbar.courses-layout .navbar-brand img {
        height: 90px !important
    }


    .navbar .navbar-brand img.scollLogoVertical {
        /*max-height: 90px !important;*/
        max-height: 90px;
    }

    .navbar .navbar-brand img.scollLogoHorizontal {
        max-height: 75px !important;
        /*max-width: 150px;*/
    }

.navbar-light .navbar-nav .nav-item {
    border-radius: 10px;
}

.navbar-light .navbar-nav .nav-link {
    color: #2B2A2A;
    transition: all .5s ease
}

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-item.active {
        background-color: #EDF0E1;
        color: #000;
    }

.navbar form > a {
    color: #000;
    font-size: 16px;
    width: 120px;
    border-radius: 10px;
}

.navbar form > .user-link a {
    color: #000;
    font-size: 16px;
    text-decoration: none;
}

.navbar form > a:first-of-type {
    background: #fff;
}

.navbar form > a:last-of-type {
    background-color: var(--mainColor);
    color: #fff;
}

.navbar form .language li {
    cursor: pointer;
}

body.NoRTL .navbar-light .navbar-nav .nav-item .language li:last-of-type,
body.NoRTL .navbar form .language li:last-of-type,
body.NoRTL .lang-en {
    display: none
}

body.rtl .navbar-light .navbar-nav .nav-item .language li:first-of-type,
body.rtl .navbar form .language li:first-of-type,
body.rtl .lang-ar {
    display: none
}
/*
    ===========================
    Start Header
    ===========================

*/
header {
    height: 100vh;
    overflow: hidden;
}

.them2 header {
    background: rgb(0,31,53);
    /*background: linear-gradient(180deg, rgba(0,31,53,1) 0%, rgba(30,93,136,1) 100%);*/
    background: linear-gradient(180deg, rgba(0,31,53,1) 19%, rgba(30,93,136,1) 100%);
}

header .header-bottom:before, header .header-bottom:after {
    content: '';
    position: absolute;
    background-image: url('../images/header/04.png');
    width: 150px;
    height: 500px;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

header .header-bottom:before {
    bottom: 0;
    left: 0;
    transform: rotate(180deg)
}

header .header-bottom:after {
    top: 0%;
    right: 0;
}

header .header-bottom .content-header {
    z-index: 5;
    position: relative;
}

    header .header-bottom .content-header h1 {
        font-size: 46px;
    }

    header .header-bottom .content-header h2 {
        font-size: 2rem;
        font-weight: bold;
        /*letter-spacing: 1px;*/
        font-family: var(--altFont);
        line-height: 1.4;
    }

    header .header-bottom .content-header p {
        font-size: 18px;
        font-weight: normal;
        color: #707070;
        line-height: 3.5
    }

.them2 header .header-bottom .content-header h1,
.them2 header .header-bottom .content-header h2,
.them2 header .header-bottom .content-header p {
    color: #fff;
}

header .header-bottom .content-header a i {
    margin: 0 5px;
}

header .header-bottom .header-image {
    position: relative;
    z-index: 5
}

    header .header-bottom .header-image:after {
        content: '';
        position: absolute;
        right: 100%;
        top: 50%;
        width: 20px;
        height: 100px;
        background-image: url('../images/Animation/01.svg');
        background-position: left;
        background-repeat: no-repeat;
        opacity: 0;
        animation: Arrows_UpAndDown 8s linear 2s infinite alternate;
    }

    header .header-bottom .header-image:before {
        content: '';
        position: absolute;
        left: 60%;
        top: -100px;
        width: 40px;
        height: 100px;
        background-image: url('../images/shapes/shape2.png');
        background-position: left;
        background-repeat: no-repeat;
        opacity: 0;
        animation: Plus_ShowAndHide 4s linear 2s infinite;
    }

    header .header-bottom .header-image img {
        width: 90%;
    }
h1.teacher-name{
    display:none !important;
}
/*
    ===========================
    Start Levels
    ===========================

*/
.levels {
    padding: var(--padding-60px);
}

    .levels .counter-level {
        background: #fff;
        border-radius: 10px;
        position: relative;
    }

        .levels .counter-level:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 25px;
            height: 90%;
            width: 2px;
            background: var(--mainColor);
            transform: translate(-50%, -50%);
        }

        .levels .counter-level h2 {
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 2px;
        }

        .levels .counter-level p {
            font-size: 14px;
            color: #9d9797;
        }

        .levels .counter-level i {
            position: absolute;
            top: 50%;
            right: -30px;
            font-size: 28px;
            transform: translate(-50%, -50%);
            color: #fff;
        }

    .levels .educational-items a {
        text-decoration: none;
    }

    .levels .educational-items .image img {
        height: 40px;
    }

    .levels .educational-items .desc h4 {
        text-decoration: none;
        color: #828282;
        font-size: 16px;
    }

.grad-pear {
    background: linear-gradient(#fff,#f6ffd3);
}
/*
    ===========================
    Start Educational Levels
    ===========================

*/
.educational-levels {
    /*padding: var(--padding-60px);*/
    background-color: #f6f7f74a;
}

#Centers-slider.subject-slider.owl-carousel .owl-stage-outer {
    background-color: transparent;
}

.educational-levels .educational-items {
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    transition: all .5s ease-in-out;
    position: relative;
    z-index: 5;
}

    .educational-levels .educational-items:hover img {
        transform: scale(1.2) rotate(-5deg);
    }

    .educational-levels .educational-items a {
        color: #000000;
        text-decoration: none;
    }

    .educational-levels .educational-items .image {
        overflow: hidden;
    }

        .educational-levels .educational-items .image img {
            height: 95px;
            transition: all .5s ease-in-out;
        }

    .educational-levels .educational-items .desc h4 {
        font-size: 1.3rem;
        font-weight: bold;
        letter-spacing: 2px;
    }

/*
    ===========================
    Start Our Teachers
    ===========================

*/
.our-teachers {
    padding: var(--padding-60px);
    position: relative;
    /*overflow: hidden;*/
}

    .our-teachers:after {
        content: '';
        position: absolute;
        top: -100px;
        right: 0;
        background-image: url('../images/Teachers/n1.png');
        width: 150px;
        height: 280px;
        background-repeat: no-repeat;
        background-size: cover;
    }

.our-teachers-pages.our-teachers:after {
    top: 150px;
    z-index: -1;
}

.our-teachers-pages.our-teachers:before {
    content: '';
    position: absolute;
    top: 150px;
    left: 0;
    width: 200px;
    height: 500px;
    background-image: url('../images/header/05.png');
    background-position: left;
    background-repeat: no-repeat;
}

.our-teachers .teacher-items a {
    text-decoration: none;
    color: #000000
}

    .our-teachers .teacher-items a .image {
        position: relative;
    }

        .our-teachers .teacher-items a .image img {
            height: auto;
            width: 100%;
            border-radius: 30px;
        }

    .our-teachers .teacher-items a .logo-grade {
        position: absolute;
        top: 25px;
        background: #fff;
        border-radius: 50%;
        padding: 0;
        left: 10px;
        box-shadow: 3px 3px 10px #575555;
        transform: translate(0, -50%);
        height: 25px;
        width: 25px;
        line-height: 25px;
    }

        .our-teachers .teacher-items a .logo-grade > img {
            height: 16px !important;
            width: auto;
        }

    .our-teachers .teacher-items a .teacher-name {
        color: #fff;
        background-color: var(--mainColor);
        position: absolute;
        bottom: 10px;
        right: 18px;
        font-size: 9px;
        padding: 3px;
        border-radius: 3px;
    }

    .our-teachers .teacher-items a .desc h4 {
        font-size: 14px;
        letter-spacing: 1px
    }

    .our-teachers .teacher-items a .desc .subjects-items span {
        background-color: #F6F7F7;
        color: #2C2B2B;
        padding: 2px;
        font-size: 12px;
        border-radius: 6px;
    }

        .our-teachers .teacher-items a .desc .subjects-items span:not(:first-of-type) {
            margin: 0 0 0 5px;
        }

.our-teachers .links-bottom a {
    text-decoration: none;
    font-size: 18px;
}

    .our-teachers .links-bottom a.linkBottm-loadMore {
        color: var(--mainColor);
    }

    .our-teachers .links-bottom a.linkBottm-joinTeacher {
        padding: 10px 35px;
    }

.our-teachers .educational-items {
    background: #fff;
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 10px;
    padding: 5px;
    overflow: hidden;
    transition: all .5s ease
}

    .our-teachers .educational-items.active-educational,
    .our-teachers .educational-items:hover {
        transform: scale(1.1) translate(0,-10px);
        border-bottom: 5px solid var(--mainColor);
    }

    .our-teachers .educational-items a {
        text-decoration: none;
    }

    .our-teachers .educational-items .image > img {
        height: 60px;
    }

    .our-teachers .educational-items .desc h4 {
        font-size: 14px;
        color: #000;
        font-weight: bold;
        letter-spacing: 1px;
    }

.our-teachers .navs-bills ul li {
    padding: 8px 20px;
    background: #F6F7F7;
    margin: 0 5px;
    border-radius: 10px;
    cursor: pointer
}

    .our-teachers .navs-bills ul li.active-tabs {
        background-color: var(--mainColor)
    }

    .our-teachers .navs-bills ul li.active-tabs {
        color: #fff;
    }

.educational-content > div {
    display: none;
}

    .educational-content > div:first-of-type {
        display: block;
    }

.subject-slider.owl-carousel .owl-stage-outer {
    background: #F6F7F7;
    padding: 10px 0;
    border-radius: 30px;
}

.owl-carousel .owl-stage {
    margin: auto;
}

.subject-slider.owl-carousel .owl-item img {
    height: 105px;
/*    width: auto;*/
    margin: auto;
}

.subject-slider.owl-carousel .owl-item {
    text-align: center;
    cursor: pointer;
}

    .subject-slider.owl-carousel .owl-item span {
        margin-top: 10px;
        display: inline-block;
        padding: 5px;
    }

        .subject-slider.owl-carousel .owl-item span.active-subject {
            background: var(--mainColor);
            border-radius: 10px;
            color: #fff;
        }

.subject-slider.owl-carousel .owl-nav button.owl-next,
.subject-slider.owl-carousel .owl-nav button.owl-prev {
    font-size: 16px;
}

.subject-slider.owl-carousel .owl-nav button {
    font-size: 16px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    box-shadow: 0px 3px 6px #00000029;
}

    .subject-slider.owl-carousel .owl-nav button:focus {
        border: none;
        outline: 0;
    }

.subject-slider.owl-carousel .owl-nav .owl-prev {
    left: -2%;
}

.subject-slider.owl-carousel .owl-nav .owl-next {
    right: -2%;
}


/** Start Videos Box **/
.Videos-box {
    padding: 60px 0;
    background-image: url('../images/Courses_images/video_bg-2.png');
    background-attachment: fixed;
    background-size: cover;
    height: auto;
}

    .Videos-box .overlay {
        position: absolute;
        height: 100%;
        width: 100%;
        background: #00000099;
    }

    .Videos-box .video-btn a {
        position: relative;
        display: inline-block;
        width: 135px;
        height: 135px;
        line-height: 135px;
        text-align: center;
        background: rgba(255,255,255,0.9);
        color: var(--main-color);
        font-size: 30px;
        border-radius: 50%;
        z-index: 5;
    }

    .Videos-box .sec-title {
        z-index: 5;
    }

        .Videos-box .sec-title h2 {
            font-size: 40px;
        }

    .Videos-box .video-btn a:after,
    .Videos-box .video-btn a:before {
        width: 135px;
        height: 135px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-animation-delay: .9s;
        animation-delay: .9s;
        content: "";
        position: absolute;
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
        -webkit-animation: ripple 3s infinite;
        animation: ripple 3s infinite;
        -webkit-transition: all .4s ease;
        transition: all .4s ease;
    }

    .Videos-box .video-btn a:after {
        -webkit-animation-delay: .6s;
        animation-delay: .6s;
    }

@-webkit-keyframes ripple {
    70% {
        -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes ripple {
    70% {
        -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
/* Start Breadcrumb*/
.breadcrumb-nav, .breadcrumb-nav1 {
    height: 350px;
    /*padding-top: 180px;*/
    background: #F6F7F7;
    position: relative;
}


.breadcrumb-teachers.breadcrumb-nav:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 25%;
    width: 365px;
    height: 225px;
    background-image: url('../images/breadcrumb/OBJECTS.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.breadcrumb-teacherProfile.breadcrumb-nav:before,
.breadcrumb-teacherProfile.breadcrumb-nav h3:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('../images/breadcrumb/Path 183.svg');
    background-repeat: no-repeat;
    opacity: .5;
    display: none;
}

.breadcrumb-teacherProfile.breadcrumb-nav:before {
    bottom: 30%;
    right: 25%;
}

.breadcrumb-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 7%;
    width: 200px;
    height: 100px;
    background-image: url('../images/breadcrumb/Group 4.svg');
    background-repeat: no-repeat
}
.address {
    margin-left: 30%;
}
.breadcrumb {
    background: transparent;
}
.survey-background1{
    margin-top: 140px;
}
.lef-side{
    margin-top: -135px !important;
}
.breadcrumb-nav h3 {
    font-size: 40px;
}

.breadcrumb-teacherProfile.breadcrumb-nav h3:before {
    bottom: 50%;
    right: 50%;
}

.breadcrumb-teacherProfile.breadcrumb-nav h3 {
    color: var(--mainColor);
}

.breadcrumb-nav .breadcrumb li.breadcrumb-item a {
    color: var(--mainColor)
}

.breadcrumb-nav .breadcrumb li.breadcrumb-item.active a {
    color: #979696;
}


/******** Start BraeddCrumb Customs *********/
.breadcrumb-customs {
    background-image: url('../images/breadcrumb/breadcrumb-bg (1).jpg');
    background-position: center;
    background-size: cover;
    position: relative;
}

    .breadcrumb-customs::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #00000085;
    }

    .breadcrumb-customs.breadcrumb-nav::after {
        display: none;
    }

    .breadcrumb-customs h3, .breadcrumb-customs ol {
        position: relative;
        z-index: 5;
    }

    .breadcrumb-customs .breadcrumb-item + .breadcrumb-item::before {
        color: #fff;
    }
/*
   =================================  
    Start Pagination
   =================================  
*/
.pagination {
    background: #F6F7F7;
    border-radius: 50px;
    padding: 5px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.page-link, .page-item:first-child .page-link, .page-item:last-child .page-link {
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: #2C2B2B;
    /*margin: 0 15px;*/
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    padding: 0;
    font-weight: bold;
    transition: all .5s ease;
}

    .page-item.active .page-link, .page-link:hover {
        background-color: #a5c239;
        border: 1px solid #a5c239;
        color: #fff;
    }

    .page-link:focus {
        box-shadow: none;
    }

/*
   =================================  
    Start Teacher Feachers
   =================================  
*/
.teacher_features {
    display: flex;
    align-items: center;
}
.teacher_features .card {
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 10px;
    padding: 5px;
    padding-top: 2rem;
}
.teacher_features .card .card-img-top {
    width: auto
}
/*
   =================================  
    End Teacher Feachers
   =================================  
*/

/*
   =================================  
    Start Teacher About
   =================================  
*/
.teacher_img > img{
    height:100% !important;
}
.About_Teacher .image img {
    width: 80%;
    height: 100% !important;
    max-height: 600px;
}
@media(max-width: 700px){
    .About_Teacher .image img {
        width: 100%;
    }
}
/*
   =================================  
    End Teacher About
   =================================  
*/
/*
   =================================  
    Start Teacher Profile Pages
   =================================  
*/
.teacher-profile {
    padding-bottom: 60px;
}

    .teacher-profile .left-side {
        margin-top: -120px;
        background-color: #F6F7F7;
        border-radius: 30px;
    }

.student-profile.teacher-profile .left-side {
    margin-top: -200px
}

.teacher-profile .left-side .image {
    position: relative;
}

    .teacher-profile .left-side .image:before {
        content: '';
        position: absolute;
        top: -3%;
        left: -7px;
        width: 85px;
        height: 100px;
        background-image: url('../images/Teachers/Path 857.svg');
        background-repeat: no-repeat
    }

    .teacher-profile .left-side .image:after {
        content: '';
        position: absolute;
        bottom: -3%;
        right: -7px;
        width: 120px;
        height: 105px;
        background-image: url('../images/teacherProfile/Path 859.svg');
        background-repeat: no-repeat
    }

    .teacher-profile .left-side .image > img {
        border-radius: 30px;
        width: 100%;
    }

    .teacher-profile .left-side .image > .imgEducational-levels {
        position: absolute;
        bottom: -7%;
        background: #fff;
        border-radius: 50%;
        padding: 10px;
        left: -2%;
        box-shadow: 2px 4px 6px #ccc;
    }

        .teacher-profile .left-side .image > .imgEducational-levels img {
            height: 20px;
        }

    .teacher-profile .left-side .image > .teacher-name {
        color: #fff;
        background-color: var(--mainColor);
        position: absolute;
        bottom: 15px;
        right: 18px;
        font-size: 9px;
        padding: 3px;
        border-radius: 3px;
    }

.teacher-profile .left-side .info-teacher h3 {
    font-weight: bold;
    color: var(--mainColor);
    letter-spacing: 2px;
}

.teacher-profile .left-side .info-teacher .subject-level ul.level-teacherProfile li {
    font-size: 10px;
    padding: 5px;
    border-radius: 6px;
}

.teacher-profile .left-side .qualification-teacher p {
    color: #2C2B2B;
    font-size: 14px;
    letter-spacing: 1px;
}
/****
            =================
           Start Due To List
            =================
            ****/
.teacher-profile .Due-to-list .DueTo-list-items .list-item h4 {
    font-size: 15px;
    letter-spacing: 0 !important;
}
teacher-profile .Due-to-list .DueTo-list-items .list-item h6 {
    color: var(--mainColor);
}

 .DueTo-more a {
    color: var(--mainColor);
}

 .teacher-profile .Due-to-list .DueTo-list-items .list-item h4 img,
.upcoming-items-modal .modal-body .upcoming-items-modal-content h4 img {
    width: 20px;
}

.teacher-profile .Due-to-list .DueTo-list-items .list-item a {
    text-decoration: none;
}

.teacher-profile .Due-to-list .DueTo-list-items .list-item h5 {
    font-size: 11px;
    color: #706f6f;
}

.teacher-profile .Due-to-list .DueTo-list-items .list-item h6 {
    font-size: 12px;
    line-height: 1.6;
    color: var(--mainColor);
}

    .teacher-profile .Due-to-list .DueTo-list-items .list-item h6 i {
        font-size: 12px;
    }

.whatsdue .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,
.whatsdue .nav-tabs .nav-link:focus, .whatsdue .nav-tabs .nav-link:hover {
    border: 1px solid transparent !important;
    border-bottom: 4px solid var(--mainColor) !important;
    background-color: transparent;
}

.whatsdue .nav-tabs .nav-item a {
    transition: all .5s ease;
    font-size: 18px;
    color: #4f5468;
}

    .whatsdue .nav-tabs .nav-item a i {
        font-size: 14px;
    }

.teacher-profile .Due-to-list .DueTo-list-items .list-item h5 span:not(:first-of-type):before,
.upcoming-items-modal .modal-body .upcoming-items-modal-content h5 span:not(:first-of-type):before,
.whatsdue .tabel-whatsdue tbody tr th h5 span:not(:first-of-type):before,
.quizFewDisc .quizFewDisc-content h5 span:not(:first-of-type):before {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    width: 1px;
    height: 15px;
    /*background: #00000054;*/
    border-left: 1px solid #ccccccb3;
    transform: translate(-50%, -50%);
}

.whatsdue .tabel-whatsdue tbody tr th h5 span:not(:first-of-type):before {
    left: -10px;
}

.whatsdue .tabel-whatsdue tbody tr th h6 span {
    font-size: 12px;
}

.upcoming-items-modal .modal-body .upcoming-items-modal-content h5 span,
.upcoming-items-modal .modal-body .upcoming-items-modal-content h6 span {
    font-size: 14px;
}

.upcoming-items-modal .modal-body .btn-takeQuiz:hover {
    color: #fff;
}

.teacher-profile .Due-to-list .DueTo-list-items .list-item h6.due-late span:first-of-type::after, li.notif-profile .notifications-item .info h6.due-late span:first-of-type::after {
    content: '';
    position: absolute;
    top: 70%;
    right: 0px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #dc3545;
    transform: translate(-50%, -50%);
}

.teacher-profile .Due-to-list .DueTo-list-items .DueTo-more a {
    text-decoration: none;
}
/*modal Upcoming*/
.modal.upcoming-items-modal {
    background-color: #000000d1
}

.modal.modal.upcoming-items-modal .modal-dialog .quizFewDisc-content > a:hover,
.modal.modal.upcoming-items-modal .modal-dialog .modal-footer a:hover {
    color: #fff;
}

#upcoming-modal .quizFewDisc-content.card {
    border: 0 !important;
}

.modal.modal.upcoming-items-modal .btn-closed:hover {
    color: #000;
}
/***Start Whats Due ***/
.whatsdue {
    padding: 150px 0 60px;
    background: #f4f4f7;
}

    .whatsdue .tabel-whatsdue thead tr th {
        font-size: 14px;
    }

    .whatsdue .tabel-whatsdue tbody tr th > a {
        text-decoration: none;
    }

    .whatsdue .tabel-whatsdue tbody tr th h5 {
        color: #474747;
        font-size: 12px;
    }

    .whatsdue .tabel-whatsdue tbody tr th p {
        color: #73778b;
        font-size: 12px;
    }

    .whatsdue .tabel-whatsdue tbody td {
        vertical-align: middle;
    }

/**Start Quiz Grade **/
.quiz-grade {
    padding: 130px 0 60px;
    background-color: #f4f4f7;
}

.quiz-grade-header .filter-group .form-group .form-control {
    width: 250px !important;
    height: 35px;
    /*border: 0;*/
    /*background: #cccccc42;*/
    border-radius: 5px !important;
}

.student-submission .quiz-grade-header-left .image img,
.quiz-grade-header .quiz-grade-header-left .image img {
    height: 35px;
}

.quiz-grade .quiz-grade-header .quiz-grade-header-left .date span {
    font-size: 14px;
}

.quiz-grade .quiz-grade-header .quiz-grade-header-right a:first-of-type {
    text-decoration: underline;
    font-size: 20px;
}

.quiz-grade .quiz-grade-header .quiz-grade-header-right a:last-of-type:hover {
    color: #fff;
}

.quiz-grade .nav-tabs .nav-item a:hover {
    border: 1px solid transparent;
}


.quiz-grade .overview-content .tab-pane span:not(:first-of-type):before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 1px;
    height: 20px;
    background-color: var(--mainColor);
    padding: 1px;
}

.quiz-grade .overview-content .precent .precent-items h5 {
}

.quiz-grade .overview-content .precent .precent-items b {
    font-size: 64px;
    font-weight: normal;
}

.quiz-grade .overview-content table tr th,
.quiz-grade .overview-content table tr td {
    font-size: 13px;
}

.quiz-grade .overview-content table tbody tr:hover {
    background-color: #f8f9fa;
}

.quiz-grade .overview-content table tr.not-viewed:hover {
    background-color: transparent
}

.quiz-grade .overview-content table tr th a:hover,
.quiz-grade .overview-content table tr td a:hover {
    text-decoration: none;
}

.quiz-grade .overview-content table tr th img {
    border-radius: 50%;
    height: 30px;
    width: 30px;
}

/* Start Student Submission*/
.student-submission {
    padding: 140px 0 60px;
    min-height: 100vh;
}

    .student-submission .sudent-slider-submissions .owl-item .card-body .disc-student-header img {
        height: 30px;
        width: 30px;
        border-radius: 50%;
    }

    .student-submission .sudent-slider-submissions .owl-item .card-body .disc-student-header {
        background-color: #d1d1d133;
    }

    .student-submission .sudent-slider-submissions .owl-item .card-body .disc-student-body h4 {
        font-size: 16px;
    }

    .student-submission .sudent-slider-submissions .owl-item .card-body .disc-student-body span {
        font-size: 30px;
    }

    .student-submission .sudent-slider-submissions .owl-item .card-body .disc-student-body p {
        font-size: 12px;
    }

    .student-submission .sudent-slider-submissions .owl-nav {
        padding: 10px 15px;
        margin: 10px;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #dee2e6;
    }

        .student-submission .sudent-slider-submissions .owl-nav button:focus {
            border: 0;
            outline: 0;
        }

        .student-submission .sudent-slider-submissions .owl-nav button i {
            color: #8f8b8b;
        }

.preview-quiz.student-submission .matching-box .answer-matching-preview::before {
    left: -62%;
    /*width: 125px;*/
    width: 70px;
}

.preview-question .fill-blank-box span.answer-correct,
#QuestionAnswerTextDiv span.answer-correct {
    background-color: #28a74536 !important;
}

.preview-quiz.student-submission .short-answer-box p {
    color: #5f6d7e;
    font-size: 14px;
}

.preview-quiz.student-submission .short-answer-box .grade-answer .btn-grade button {
    font-size: 14px;
}

.preview-quiz.student-submission .short-answer-box .grade-answer .btn-grade .form-group#partial-credit-input {
    margin: 0 10px;
}

.preview-quiz.student-submission .short-answer-box .grade-answer .btn-grade .form-group input {
    padding: 0 35px 0 10px;
    width: 80px;
    direction: rtl;
}

.preview-quiz.student-submission .short-answer-box .grade-answer .btn-grade .form-group span {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(0, -50%);
}

.preview-quiz.student-submission .short-answer-box .grade-answer .btn-grade button:first-of-type.active-grade {
    background-color: #2e8540;
}

.preview-quiz.student-submission .short-answer-box .grade-answer .btn-grade button:nth-of-type(2).active-grade {
    background-color: #dc3545;
}

.preview-quiz.student-submission .short-answer-box .grade-answer .btn-grade button:last-of-type.active-grade {
    background-color: #ffc107;
}

.preview-quiz.student-submission .short-answer-box .grade-answer .btn-grade button.active-grade,
.preview-quiz.student-submission .short-answer-box .grade-answer .btn-grade button.active-grade i {
    color: #fff !important;
}

#QuestionPartial .images .images-preview {
    max-height: 200px;
}
/* Start Right Side*/
.teacher-profile .right-side {
    margin-top: -110px;
}

    .teacher-profile .right-side .tab-Top {
        width: 75%;
    }

        .teacher-profile .right-side .tab-Top h3 {
            font-size: 40px;
            letter-spacing: 2px;
            color: var(--mainColor);
        }

        .teacher-profile .right-side .tab-Top .nav-pills {
            background: #fff;
            padding: 0;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 25px;
        }

    .teacher-profile .right-side .nav-pills .nav-link {
        border-radius: 25px;
        padding: 20px;
        position: relative;
        color: #2C2B2B;
        text-transform: capitalize;
        font-size: 18px;
    }

        .teacher-profile .right-side .nav-pills .nav-link:before {
            content: '';
            position: absolute;
            bottom: 50%;
            right: 0;
            width: 1px;
            height: 50%;
            background: #707070;
            transform: translate(-50%, 50%);
        }

        .teacher-profile .right-side .nav-pills .nav-link:last-of-type {
            border-right: none;
        }

            .teacher-profile .right-side .nav-pills .nav-link:last-of-type::before {
                display: none;
            }

.lessons.teacher-profile .right-side .nav-pills .dropdown-tabs::after {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 1px;
    height: 50%;
    background: #707070;
    transform: translate(-50%, 50%);
}

.lessons.teacher-profile .right-side .nav-pills .nav-link.dropdown-tabs > a {
    color: #2C2B2B;
    text-decoration: none;
}

.lessons.teacher-profile .right-side .nav-pills .nav-link.dropdown-tabs > ul {
    position: absolute;
    width: 200px;
    top: 100%;
    z-index: 8;
    background-color: #fff;
    box-shadow: 2px 2px 5px #ebe5e5;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
}

    .lessons.teacher-profile .right-side .nav-pills .nav-link.dropdown-tabs > ul.toggle-show {
        opacity: 1;
        visibility: visible;
    }

    .lessons.teacher-profile .right-side .nav-pills .nav-link.dropdown-tabs > ul li {
        border-bottom: 1px solid #dee2e6 !important;
    }

        .lessons.teacher-profile .right-side .nav-pills .nav-link.dropdown-tabs > ul li:hover {
            background-color: #cccccc14;
        }

.teacher-profile .right-side .nav-pills .nav-link.active, .teacher-profile .right-side .nav-pills .show > .nav-link {
    background-color: transparent;
    color: var(--mainColor);
}

    .teacher-profile .right-side .nav-pills .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: -3%;
        left: 50%;
        width: 40%;
        height: 5px;
        background: var(--mainColor);
        transform: translate(-50%, 50%);
    }

.courses-activities .member-items .icon-setting .setting-opation li {
    border-radius: 0;
}

    .courses-activities .member-items .icon-setting .setting-opation li:hover:first-of-type {
        background-color: var(--mainColor) !important
    }

#UploadActivityVidUrl + .show-vid-img-tabs .nav-item .nav-link {
    border-radius: 0;
    color: #000;
}

    #UploadActivityVidUrl + .show-vid-img-tabs .nav-item .nav-link.active {
        background: transparent !important;
        border-bottom: 3px solid var(--mainColor);
        color: var(--mainColor)
    }

.teacher-profile .right-side .nav-pills .nav-link img {
    padding: 5px;
    height: 28px;
    border-radius: 50%;
    /*margin: 0 10px;*/
    background: #afb0b0;
}

.teacher-profile .right-side .nav-pills .nav-link.active img {
    background-color: var(--mainColor);
}

.teacher-profile .right-side .tab-content > .tab-pane:not(:last-of-type),
.teacher-profile .right-side .courses-activities > .tab-pane {
    background: #F6F7F7;
    border-radius: 20px;
    /*color: green;*/
}

.teacher-profile .right-side .tab-content > .tab-pane #QuizesDiv .quiz-items:not(:first-of-type) {
    border-top: 1px solid #c3c3c359;
}

.teacher-profile .right-side .tab-content > .tab-pane #QuizesDiv .quiz-items ul li {
}

.teacher-profile .right-side .tab-content > .tab-pane h3 {
    font-size: 34px;
    font-weight: bold;
    letter-spacing: 2px;
}
/* Start About Tabs*/

.teacher-profile .right-side .tab-content > .tab-pane .who-are-teacher,
.teacher-profile .right-side .tab-content > .tab-pane .subject-level {
    padding: var(--padding-30px-30px);
}

    .teacher-profile .right-side .tab-content > .tab-pane .who-are-teacher p {
        font-size: 16px;
        color: #707070;
        line-height: 1.8;
    }

.teacher-profile .right-side .tab-content > .tab-pane h3 span {
    font-family: var(--mainFont)
}

.subject-level ul.subject-teacherProfile li {
    display: inline-block;
    border-radius: 12px;
    border: 1px solid #A5C239;
    padding: 5px 10px;
}

.subject-level ul.level-teacherProfile li {
    padding: 5px 10px;
    background: #fff;
    border-radius: 12px;
}
/*Start Feedback Tab*/
.teacher-profile .right-side .tab-content > .tab-pane .title h3,
.course-details .tab-content > .tab-pane .title h3 {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
}

.teacher-profile .right-side .student-feedback,
.course-details .tabs-aboutCourse .student-feedback {
    background: #F6F7F7;
    border-radius: 20px;
    padding: var(--padding-30px-30px)
}

    .teacher-profile .right-side .student-feedback .all-rate span,
    .course-details .tabs-aboutCourse .all-rate span {
        font-size: 34px;
        letter-spacing: 2px;
    }

    .teacher-profile .right-side .student-feedback .all-rate .rate label,
    .course-details .tabs-aboutCourse .student-feedback .all-rate .rate label {
        margin: 0;
        font-size: 28px;
    }

    .teacher-profile .right-side .student-feedback .number-students .images img,
    .course-details .tabs-aboutCourse .student-feedback .number-students .images img {
        height: 12px;
        border-radius: 50%;
    }

        .teacher-profile .right-side .student-feedback .number-students .images img:not(:first-of-type),
        .course-details .tabs-aboutCourse .student-feedback .number-students .images img:not(:first-of-type) {
            margin-left: -5px;
            box-shadow: 3px 3px 6px #00000029;
        }

    .teacher-profile .right-side .student-feedback .number-students h6,
    .course-details .tabs-aboutCourse .student-feedback .number-students h6 {
        color: #2C2B2B;
        letter-spacing: 1px;
        font-size: 12px;
    }

    .teacher-profile .right-side .student-feedback .rate-percent > ul li p,
    .course-details .tabs-aboutCourse .student-feedback .rate-percent > ul li p {
        width: 60%;
        background: #fff;
        height: 15px;
        margin: 0;
    }

        .teacher-profile .right-side .student-feedback .rate-percent > ul li p span,
        .course-details .tabs-aboutCourse .student-feedback .rate-percent > ul li p span {
            background: #757673d4;
            display: block;
            height: 100%;
        }

.teacher-profile .right-side .student-review > .row > div:not(:first-of-type),
.course-details .tabs-aboutCourse .student-review > .row > div:not(:first-of-type) {
    border-top: 1px solid #dee2e6
}

.teacher-profile .right-side .student-review .review-item .review-left img,
.course-details .tabs-aboutCourse .student-review .review-item .review-left img {
    height: 50px;
    border-radius: 50%;
    box-shadow: 1px 1px 7px #00000029
}

.teacher-profile .right-side .student-review .review-item .review-left .info span,
.course-details .tabs-aboutCourse .student-review .review-item .review-left .info span {
    font-size: 12px;
    color: #898383
}

.teacher-profile .right-side .student-review .review-item .review-left .info h4,
.course-details .tabs-aboutCourse .student-review .review-item .review-left .info h4 {
    font-size: 16px;
    letter-spacing: 1px;
    margin: 0;
}

.teacher-profile .right-side .student-review .review-item .review-right p,
.course-details .tabs-aboutCourse .student-review .review-item .review-right p {
    letter-spacing: 1px;
    line-height: 1.7;
    margin: 0;
}

/* Start Modal (Give A feedback)*/
.teacher-profile .modal-header .close {
    font-size: 2rem;
}

.teacher-profile .modal .about-feedback img {
    height: 120px;
    border-radius: 50%;
    box-shadow: 1px 1px 7px #00000029
}

.teacher-profile .modal .about-feedback .info-teacher h3 {
    color: var(--mainColor);
    font-size: 20px;
    letter-spacing: 2px;
}

.teacher-profile .modal .about-feedback .subject-level ul.subject-teacherProfile li {
    font-size: 12px;
}

.teacher-profile .modal .about-feedback .subject-level ul.level-teacherProfile li {
    padding: 5px 7px;
    background: #F6F7F7;
    border-radius: 8px;
    font-size: 10px;
}

.teacher-profile .modal .type-review h2 {
    font-size: 34px;
    letter-spacing: 3px;
}

.teacher-profile .modal .type-review p {
    color: #2C2B2B;
    font-size: 14px;
}

.teacher-profile .modal .type-review .rate:not(:checked) > label {
    font-size: 45px;
}

.teacher-profile .modal .type-review form textarea {
    background-color: #F6F7F7;
    width: 80%;
    margin: auto;
    border-radius: 10px;
    padding: 10px 20px;
}

.teacher-profile .modal .type-review .image img {
    /*max-height: 200px;*/
    width: 100%;
}

.note-toolbar {
    z-index: 5 !important;
}
/* Start Groups Boxs*/
.teacher-profile .right-side .subject-slider.owl-carousel .owl-stage-outer {
    background: #fff;
    box-shadow: 0px 3px 6px #00000029;
}

.goups-box {
    padding: var(--padding-30px-30px)
}

    .goups-box .group-itmes {
        padding: 10px 0;
        text-align: center;
        background: #fff;
        border-radius: 20px;
    }

        .goups-box .group-itmes .image {
            width: 60px;
            text-align: center;
            padding: 10px;
            border-radius: 50%;
            background: #fff;
            margin: -40px auto 0;
        }

            .goups-box .group-itmes .image img {
                height: 40px;
            }

        .goups-box .group-itmes .title-group h4 {
            letter-spacing: 1px;
            font-size: 18px;
        }

        .goups-box .group-itmes .teacher-name-groub img {
            border-radius: 50%;
            height: 20px;
            margin: 0 5px;
            box-shadow: 1px 1px 5px #00000029;
        }

        .goups-box .group-itmes .teacher-name-groub h5 {
            font-size: 16px;
            letter-spacing: 1px;
        }

        .goups-box .group-itmes .subject-level ul.subject-teacherProfile li {
            font-size: 10px;
            border: 1px solid #F6F7F7;
            background: #F6F7F7;
            padding: 5px;
        }

.lessons .goups-box .group-itmes .subject-level ul.subject-teacherProfile li {
    background-color: #fff;
}

.goups-box .group-itmes .week-days li {
    color: #2C2B2B;
    font-size: 11px;
}

.goups-box .group-itmes .images img {
    height: 15px;
    border-radius: 50%;
}

    .goups-box .group-itmes .images img:not(:first-of-type) {
        margin-left: -5px;
        box-shadow: 2px 2px 5px #00000029;
    }

.goups-box .group-itmes h6 {
    color: #2C2B2B;
    letter-spacing: 1px;
}

.goups-box .group-itmes .link-group a {
    width: 40px;
    margin: 0 auto -30px;
    height: 40px;
    display: block;
    background: #fff;
    border-radius: 50%;
    line-height: 40px;
    box-shadow: 0px 3px 6px #00000029;
    transition: all 1s ease;
}

    .goups-box .group-itmes .link-group a i {
        transition: all 1s ease;
    }

    .goups-box .group-itmes .link-group a:hover i {
        transform: rotate(360deg)
    }

/* Start Qestion Bank*/
.question-bank {
    padding-top: 80px;
}

    .question-bank .right-side .question-box {
        padding: 25px;
    }

        .question-bank .right-side .question-box .question-items {
            border-radius: 15px;
        }

            .question-bank .right-side .question-box .question-items h4 {
                letter-spacing: 1px;
                font-size: 20px;
            }

                .question-bank .right-side .question-box .question-items h4 a i,
                .modal-addQuestionBank .questionBank-items-add .question-items h4 a i,
                .create-quiz .question-items h4 a i {
                    font-size: 14px;
                    color: #a19c9c;
                }

                    .question-bank .right-side .question-box .question-items h4 a i:hover,
                    .create-quiz .question-items h4 a i:hover {
                        color: #007bff;
                    }

            .question-bank .right-side .question-box .question-items:not(:first-of-type) {
                margin-top: 15px;
            }

            .question-bank .right-side .question-box .question-items .question-type {
                color: #666464;
                letter-spacing: 1px;
            }

                .question-bank .right-side .question-box .question-items .question-type span {
                    font-size: 12px;
                    letter-spacing: 0;
                }

                .question-bank .right-side .question-box .question-items .question-type + h6 {
                    font-size: 12px;
                    font-weight: bold;
                    color: #0000009e
                }

            .question-bank .right-side .question-box .question-items .images img {
                max-height: 300px;
                border-radius: 10px;
            }

            .question-bank .right-side .question-box .question-items ul li a {
                text-decoration: none;
                padding: 0 10px;
            }

            .question-bank .right-side .question-box .question-items .image-preview a img {
                max-width: 400px;
                border-radius: 10px;
            }

            .question-bank .right-side .question-box .question-items ul li:not(:first-of-type) a:before,
            .btn-quiz li:not(:first-of-type) a:before {
                content: '';
                position: absolute;
                top: 51%;
                left: 0;
                width: 1px;
                height: 23px;
                background: #00000036;
                transform: translate(0, -50%);
            }

.question-bank-empty .image a img {
    height: 400px;
}
/* STart Show Answer*/
.viewquestion .multiple-trueFalse-box-view .multiple-trueFalse-item-view {
    border: 1px solid #beb8b8;
    width: 90%;
    margin: auto;
    border-radius: 6px;
}

    .viewquestion .multiple-trueFalse-box-view .multiple-trueFalse-item-view p {
        width: 90%;
    }

    .viewquestion .multiple-trueFalse-box-view .multiple-trueFalse-item-view > i {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

.viewquestion .matching-box-view .matching-items-view > div {
    width: 44%;
    height: auto;
    background: #d5d5d5;
    border-radius: 5px;
    position: relative;
}

    .viewquestion .matching-box-view .matching-items-view > div:first-of-type::before {
        content: '';
        position: absolute;
        right: -15%;
        top: 50%;
        width: 70px;
        height: 1px;
        background-color: #d5d5d5;
        transform: translate(0, -50%);
    }

    .viewquestion .matching-box-view .matching-items-view > div:last-of-type {
        margin: 0 0 0 6%;
    }
/* Start Add Question*/
.addquestion .input-group-upload,
.preview-question .input-group-upload {
    overflow: hidden;
}

    .addquestion .input-group-upload input,
    .preview-question .input-group-upload input {
        position: relative;
        z-index: 5;
        opacity: 0;
    }

    .addquestion .input-group-upload span,
    .addquestion .input-group-add a,
    .preview-question .input-group-upload span,
    .preview-question .input-group-add a {
        position: absolute;
        top: 0;
        left: 0;
        background: #ebebef;
        height: 100%;
        width: 98%;
        border-radius: 4px;
        color: #5c6178;
        cursor: pointer;
        font-size: 12px;
        text-decoration: none;
    }

.addquestion .content-upload .images .images-items:not(:first-of-type) {
    margin-left: 15px;
}

.addquestion .content-upload .images .images-items a {
    right: -10%;
    height: 30px;
    width: 30px;
    line-height: 30px;
    box-shadow: 1px 1px 3px #a9a9a9;
}

    .addquestion .content-upload .images .images-items a i {
        font-size: 14px;
    }

.addquestion .content-upload .images .images-items img {
    height: 140px;
    border-radius: 20px;
}

.addquestion .content-upload .files .files-items {
    transition: all .5s ease;
    cursor: auto
}

    .addquestion .content-upload .files .files-items:hover {
        background: #dee2e6;
    }

/*.addquestion .multiple-choice-box .form-group,
.addquestion .true-false-box .form-group,
.addquestion .title-responses,
.addquestion .form-row,
.addquestion .additional-answer-box,
.addquestion .content-upload,
#shortAns .form-group {
    width: 90%;
    margin: auto;
}*/
#QuestionForm, #addquestionDiv {
    width: 90%;
    margin: auto;
}

    #addquestionDiv #QuestionForm {
        width: 100%;
    }

.addquestion .true-false-box .form-group > input,
.addquestion .multiple-choice-box .form-group > input {
    padding-right: 110px;
}

    .addquestion .multiple-choice-box .form-group > input + ul li:not(:nth-of-type(2)),
    .addquestion .additional-answer-box .form-group > input + ul li,
    .addquestion .matching-box .form-row > ul li {
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-in-out;
    }

.addquestion .multiple-choice-box .form-group:hover ul li:not(:nth-of-type(2)),
.addquestion .additional-answer-box .form-group:hover > ul li,
.addquestion .matching-box .form-row:hover > ul li {
    visibility: visible;
    opacity: 1
}

.addquestion .true-false-box .form-group > ul,
.addquestion .multiple-choice-box .form-group > ul,
.addquestion .additional-answer-box .form-group > ul,
.addquestion .matching-box .form-row > ul {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: -24px;
}

.addquestion .true-false-box .form-group > ul {
    right: 10px;
}

    .addquestion .true-false-box .form-group > ul li a i,
    .addquestion .multiple-choice-box .form-group > ul li a i {
        font-size: 18px;
    }

    .addquestion .true-false-box .form-group > ul li input[type="radio"],
    .addquestion .multiple-choice-box .form-group > ul li input[type="radio"] {
        height: 16px;
        width: 20px;
        position: relative;
        z-index: 11;
    }

.addquestion .multiple-choice-box ul li .input-group-upload input {
    width: 30px !important;
    overflow: hidden;
}

.addquestion .multiple-choice-box ul li .input-group-upload span {
    background: transparent;
    font-size: 18px;
    height: 100%;
}

    .addquestion .multiple-choice-box ul li .input-group-upload span + a {
        max-width: 30px;
        max-height: 30px;
    }

        .addquestion .multiple-choice-box ul li .input-group-upload span + a[href='#'] {
            display: none !important;
        }

        .addquestion .multiple-choice-box ul li .input-group-upload span + a img {
            height: 100%;
            width: 100%;
        }

.addquestion .add-answer {
    /*width: 90%;*/
    margin: 15px auto;
}

    .addquestion .add-answer a {
        text-decoration: none;
        font-size: 12px;
    }

.addquestion .true-false-box input,
.preview-quiz .true-false-box input {
    width: 150px;
}

.addquestion .matching-box .form-row .form-group:first-of-type::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -43%;
    width: 130px;
    height: 1px;
    background-color: #ced4da;
}

.addquestion .matching-box .form-row .list-icon-position {
}
/* Start Expense Must be Paid*/
.Expenses_Must_Paid {
    padding: 30px 0;
}

    .Expenses_Must_Paid .image img {
        height: 350px;
    }
/* Start layout Employee */
.employee-navabar {
    box-shadow: 1px 1px 4px #00000029;
    background-color: #fff;
    position: fixed;
    padding-bottom: 10px;
    padding-top: 10px;
}

    .employee-navabar.navbar .navbar-brand img {
        max-height: 50px;
    }

.navbar .icon-profile {
    width: 26%;
}


    .navbar .icon-profile li.user-name > a {
        color: #2B2A2A;
    }

        .navbar .icon-profile li.user-name > a span {
            margin: 0 10px;
        }

    .navbar .icon-profile li.user-name > .dropdown-menu {
        left: -10%;
    }

        .navbar .icon-profile li.user-name > .dropdown-menu .dropdown-item {
            color: #2B2A2A;
        }

            .navbar .icon-profile li.user-name > .dropdown-menu .dropdown-item i {
                font-size: 14px;
                margin: 0 6px;
                color: #999999;
            }


/* Start Employee Profile*/
.employee-profile {
    padding: var(--padding-60px);
    padding-top: 120px;
    background-color: #F6F7F7;
    min-height: 100vh;
}

    .employee-profile nav h3 {
        font-size: 34px;
        letter-spacing: 2px;
    }

    .employee-profile nav .breadcrumb .breadcrumb-item a {
        text-decoration: none;
        color: var(--mainColor)
    }

    .employee-profile nav .breadcrumb .breadcrumb-item.active {
        color: #979696;
    }

.add-group {
    padding: 6px;
}

    .add-group i {
        background: #fff;
        border-radius: 50%;
        color: var(--mainColor);
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        margin: 0 8px 0 0;
        transition: all 1s ease
    }

    .add-group:hover i {
        background: var(--mainColor);
        color: #fff;
    }

.employee-profile .subject-slider.owl-carousel .owl-stage-outer {
    background: #ffffff;
}

.employee-profile a.icon-back {
    position: absolute;
    bottom: -10px;
    font-size: 14px;
    right: 10px;
    text-decoration: none;
    color: var(--mainColor);
    display: none;
}

.btn-saveBooking button {
    width: 200px;
    padding: 7px 10px !important;
}
/* Start Hover Group Appointment*/
.hover-appointment {
    transform: translate(0) rotate(0);
    height: 100%;
    width: 100%;
    margin: auto;
    margin: 0 auto -30px;
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 5;
}

    .hover-appointment ul {
        position: relative;
        margin: 0;
        padding: 0;
        width: 50px;
        height: 50px;
    }

        .hover-appointment ul li {
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            width: 100%;
            height: 100%;
            background: #fff;
            transition: .5s;
            overflow: hidden;
            transform: scale(0.95);
            border-radius: 50%;
        }

            .hover-appointment ul li a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transition: .5s;
                background: #fff;
                border-radius: 50%;
                line-height: 50px;
                box-shadow: 0px 3px 6px #00000029;
            }

        .hover-appointment ul.active-appointment li {
            transform: scale(0.95);
        }

            .hover-appointment ul.active-appointment li:nth-child(1) {
                top: 0;
                left: -150%;
                transition-delay: 0s;
            }

            .hover-appointment ul.active-appointment li:nth-child(2) {
                top: 0;
                left: 150%;
                transition-delay: .4s;
            }

    .hover-appointment .toggle {
        position: absolute;
        top: 0;
        left: 50%;
        width: 50px;
        height: 50px;
        background: #fff;
        overflow: hidden;
        border-radius: 50%;
        cursor: pointer;
        z-index: 1;
        transform: translate(-50%)
    }

        .hover-appointment .toggle.toggle-relative {
            position: static;
            transform: translate(0);
        }

        .hover-appointment .toggle:before {
            content: "\f061";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            color: var(--mainColor);
            font-size: 16px;
        }

.employee-profile .pagination {
    background-color: #fff;
}
/* Start Modal (Add Group)*/
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
    outline: 0;
}

.modal .appointment-itmes {
    background-color: #F6F7F7;
    padding: 10px;
    border-radius: 10px;
}

    .modal .appointment-itmes h3 {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .modal .appointment-itmes p {
        margin: 0;
        font-size: 12px;
        color: #707070;
    }

        .modal .appointment-itmes p i {
            margin: 0 6px;
        }

    .modal .appointment-itmes .delete-AppItems {
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0px 3px 6px #00000029;
        position: absolute;
        bottom: 0;
        left: -5px;
        line-height: 20px;
        text-align: center;
        font-size: 8px;
    }


/*
   =================================  
    Start Booking Employee Pages
   =================================  
*/

.level-bookingPage, .level-expensePage {
    border: none;
    box-shadow: 0px 6px 9px #00000029;
    border-radius: 20px;
    padding: 10px;
    position: absolute;
    z-index: 5;
    background: #fff;
    top: 100%;
    display: none;
    /*opacity: 0*/
}
.level-StudentAttendancePage {
    margin-right: 1rem;
    border: none;
    box-shadow: 0px 6px 9px #00000029;
    border-radius: 20px;
    padding: 15px;
    position: absolute;
    z-index: 5;
    background: #fff;
    top: 100%;
    display: none;
    /*opacity: 0*/
}

    .level-bookingPage a, .level-expensePage a  {
        padding: 10px;
        padding: 10px;
        background: #fff;
        /*box-shadow: 0px 3px 6px #00000029;*/
        border: 1px solid #ccc;
        margin: 0 10px;
        border-radius: 10px;
        width: 100px;
        text-align: center;
        overflow: hidden;
        transition: all .5s ease;
    }
.level-StudentAttendancePage a {
    padding: 10px;
    padding: 10px;
    background: #fff;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #ccc;
    margin: 0 10px;
    border-radius: 10px;
    width: 100px;
    text-align: center;
    overflow: hidden;
    transition: all .5s ease;
}
        .level-bookingPage a:hover, .level-expensePage a:hover{
            border: 1px solid #f8f9fa;
        }
.level-StudentAttendancePage a:hover{

}
.level-bookingPage a:active, .level-expensePage a:active, .level-StudentAttendancePage a:active {
    background-color: transparent;
}

        .level-bookingPage a img, .level-expensePage a img, .level-StudentAttendancePage a img {
            height: 50px;
        }

        .level-bookingPage a h5, .level-expensePage a h5, .level-StudentAttendancePage a h5 {
            font-size: 12px;
            margin: 10px 0 0;
            color: #000;
            letter-spacing: 1px;
        }

.employee-booking .image-level-breadcrumb {
    background: #fff;
    padding: 10px;
    border-radius: 15px;
    text-align: center;
    height: 80px;
}

    .employee-booking .image-level-breadcrumb img {
        height: 100%;
    }

.employee-booking .level-tabs li {
    background-color: #707070;
    border-radius: 15px;
    padding: 6px 20px;
}

    .employee-booking .level-tabs li a {
        color: #fff;
        text-decoration: none;
    }

    .employee-booking .level-tabs li.activeLevel-booking {
        background-color: var(--mainColor);
    }

        .employee-booking .level-tabs li.activeLevel-booking a {
            color: #fff
        }

.employee-booking .form-search-Add .add-student {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
    z-index: 5;
    background: var(--mainColor);
    padding: 2px 5px;
    border-radius: 5px;
    margin: 0 2px;
    color: #fff;
}

.employee-booking .billing-details h3 {
    letter-spacing: 1px;
    font-size: 18px;
}

.employee-booking .billing-details span {
    background-color: #fff;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    text-align: center;
}

.employee-booking .form-check input[type="checkbox"],
.expense .form-check input[type="checkbox"] {
    width: 50px;
    height: 30px;
}

.employee-booking .goups-box .group-itmes {
    transition: all .5s ease-in-out;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
}

    .employee-booking .goups-box .group-itmes:hover,
    .goups-box .group-itmes.group-Booked {
        border: 2px solid var(--mainColor);
        -webkit-box-shadow: 0px 3px 6px #00000029;
        -moz-box-shadow: 0px 3px 6px #00000029;
        box-shadow: 0px 3px 6px #00000029;
    }

    .employee-booking .goups-box .group-itmes > div.badge-group {
        display: none;
    }

    .employee-booking .goups-box .group-itmes.group-full > div.badge-group,
    .employee-booking .goups-box .group-itmes.group-orange > div.badge-group {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        border-radius: 20px;
        overflow: hidden;
        z-index: 5;
    }

    .employee-booking .goups-box .group-itmes.group-full > div.badge-group {
        cursor: no-drop;
    }

        .employee-booking .goups-box .group-itmes.group-full > div.badge-group:before,
        .employee-booking .goups-box .group-itmes.group-orange > div.badge-group:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            border-left: 50px solid transparent;
        }

        .employee-booking .goups-box .group-itmes.group-full > div.badge-group:before {
            border-top: 50px solid #f00;
        }

    .employee-booking .goups-box .group-itmes.group-orange > div.badge-group:before {
        border-top: 50px solid #FFAB31;
    }

    .employee-booking .goups-box .group-itmes.item-closed {
        position: relative;
        border: none;
    }

        .employee-booking .goups-box .group-itmes.item-closed:before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #cccccc7a;
            border-radius: 20px;
            z-index: 2;
            cursor: no-drop;
        }

        .employee-booking .goups-box .group-itmes.item-closed .image {
            background: #cccccc7a;
            cursor: no-drop;
        }

        .employee-booking .goups-box .group-itmes.item-closed .link-group a {
            display: none;
        }

        .employee-booking .goups-box .group-itmes.item-closed:hover {
            box-shadow: none;
            border: none;
        }

/*
   =================================  
    Start Customs Employee Pages
   =================================  
*/
a.collapse-btn-empl {
    color: var(--mainColor);
    text-decoration: none;
    font-size: 20px;
    letter-spacing: 1px;
}

.collapse-btn-empl i {
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    background: var(--mainColor);
    color: #fff;
    border-radius: 10%;
    /*margin: 0 9px 0 0;*/
    font-size: 12px;
}

.collapse-btn-empl span {
    color: #615f5f;
    font-size: 14px;
    margin: 0 5px;
}
/*
   =================================  
    student application
   =================================  
*/
.register-page {
    height: 100vh;
    width: 100%;
    background-image: url('../../AdminCustoms/assets/img/bg/group-preschoolers-playroom_23-2147663834.jpg');
    background-size: cover;
    position: relative;
}

.register-page {
    background-position: center;
}
    .register-page .login-card {
        height: 100vh;
        width: 85%;
        border-radius: 0;
        overflow: auto;
    }
/*
   =================================  
    Start Modal Confirm Booking 
   =================================  
*/
.employee-booking .modal .modal-content .modal-header .logo-levelGroup img,
.pay-history .modal .modal-content .modal-header .logo-levelGroup img {
    height: 65px;
}

.employee-booking .modal .modal-content .modal-header,
.pay-history .modal .modal-content .modal-header {
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .employee-booking .modal .modal-content .modal-header .data-bookingPrint li,
    .pay-history .modal .modal-content .modal-header .data-bookingPrint li {
        line-height: 1.2;
    }

        .employee-booking .modal .modal-content .modal-header .data-bookingPrint li span,
        .pay-history .modal .modal-content .modal-header .data-bookingPrint li span {
            margin: 0 2px;
            color: #616060;
            font-size: 14px;
            font-weight: bold !important;
        }
        }

.employee-booking .modal .modal-content .modal-body .heading-modalConfirm h3,
.pay-history .modal .modal-content .modal-body .heading-modalConfirm h3 {
    padding: 2px 10px;
    background: #cccccc1c;
    display: inline-block;
    border-radius: 9px;
    font-size: 18px;
    letter-spacing: 2px;
}

.employee-booking .modal .modal-content .modal-body .booking-details h4,
.pay-history .modal .modal-content .modal-body .booking-details h4 {
    font-size: 18px;
    letter-spacing: 1px;
}

.employee-booking .modal .modal-content .modal-body .booking-details > ul li span,
.pay-history .modal .modal-content .modal-body .booking-details > ul li span {
    flex: 0 0 48%;
    font-size: 13px;
    font-weight:bold !important;
    /*color: #3f3a3ad1;*/
}

.employee-booking .modal .modal-content .modal-body .booking-details > ul li .appointment li,
.pay-history .modal .modal-content .modal-body .booking-details > ul li .appointment li {
    font-size: 10px;
    background: #cccccc30;
    padding: 2px;
    border-radius: 5px;
    font-weight: bold !important;
}

.employee-booking .modal .modal-content .modal-body .booking-details.booking-price ul li,
.pay-history .modal .modal-content .modal-body .booking-details.booking-price ul li {
    width: 32%;
}

.employee-booking .modal .modal-content .modal-body .contact-pear div,
.pay-history .modal .modal-content .modal-body .contact-pear div {
    background-color: #cccccc7a;
    padding: 5px;
    border-radius: 5px;
}

    .employee-booking .modal .modal-content .modal-body .contact-pear ul li,
    .pay-history .modal .modal-content .modal-body .contact-pear ul li {
        /*flex: 0 0 30%;*/
        margin: 5px 0;
        font-weight:bold;
    }
.modal .font-weight-bold {
    font-weight: bold !important;
}

        .employee-booking .modal .modal-content .modal-body .contact-pear ul li:last-of-type,
        .pay-history .modal .modal-content .modal-body .contact-pear ul li:last-of-type {
            flex: 0 0 30%
        }

        .employee-booking .modal .modal-content .modal-body .contact-pear ul li span, .pay-history .modal-content .modal-body .contact-pear ul li span {
            margin: 0 5px;
        }

.contact-pear ul {
    font-size: 14px;
}

.pay-history.print-reciept-style {
    padding-top: 0;
    background-color: transparent;
}

.print-reciept-style .logo-levelGroup img {
    max-height: 100px;
}

.print-reciept-style .modal-header {
    display: initial !important;
}

.print-reciept-style .heading-modalConfirm {
    display: none;
}

.print-reciept-style .appointment {
    font-size: 14px;
}

.print-reciept-style .contact-info ul li:last-child {
    width: 100%;
}

.print-reciept-style .contact-pear ul:first-of-type {
    display: initial !important;
}

.print-reciept-style.employee-booking .modal-content .modal-body .contact-pear ul,
.print-reciept-style.pay-history .modal-content .modal-body .contact-pear ul {
    background-color: transparent;
    padding: 0;
}

.print-reciept-style .p-2 {
    padding: 0.1rem !important;
}

.print-reciept-style.employee-booking .modal-content .modal-body .contact-pear ul li,
.print-reciept-style.pay-history .modal-content .modal-body .contact-pear ul li {
    margin: 0;
}

@media print {
    .modal-footer {
        display: none;
    }
}

.returnBooking {
    box-shadow: none !important;
    border-radius: 0 !important;
}

    .returnBooking input[type="radio"] {
        width: 20px;
        height: 20px;
    }
/* Start Expense Pages*/
.expense {
    padding-top: 150px;
    overflow: hidden;
}

    .expense .left-side {
        margin-top: 0;
    }

    .expense .goups-items-expenses {
        border-radius: 25px;
        border: 1px solid #ccc;
    }

        .expense .goups-items-expenses .link-group a {
            box-shadow: none;
        }
    /* Color Guide*/
    .expense .goups-box-expenses .color-guide li span:first-of-type {
        height: 20px;
        width: 20px;
    }

    .expense .goups-box-expenses .color-guide li:nth-of-type(2) span:first-of-type {
        background: #28a7451f;
    }

    .expense .goups-box-expenses .group-paid,
    .expense .goups-box-expenses .color-guide li:first-of-type span:first-of-type {
        background-color: #28a7451f;
        border: 1px solid #28a7451f;
    }

    .expense .goups-box-expenses .group-in-debt,
    .expense .goups-box-expenses .color-guide li:nth-of-type(2) span:first-of-type {
        background-color: #ffc10738;
        border: 1px solid #ffc10738;
    }

    .expense .goups-box-expenses .group-late-paid,
    .expense .goups-box-expenses .color-guide li:last-of-type span:first-of-type {
        background-color: #ff001824;
        border: 1px solid #ff001824;
    }

    .expense .goups-box-expenses .group-itmes-expenses .teacher-name-groub img {
        height: 70px;
        border-radius: 20px;
        box-shadow: 1px 1px 4px #00000029
    }

.modal .pay-details-header .image img {
    border-radius: 20px;
    height: 100px;
}

.expense .image-expenses-default img {
    height: 300px;
}

#payDetails #PayBtnLoad {
    width: 140px;
}

    #payDetails #PayBtnLoad.BtnLoader {
        background-color: #fff;
        color: var(--mainColor);
        border: 1px solid var(--mainColor);
    }
/* Start Pay Details*/
.pay-history {
    padding: var(--padding-60px);
    padding-top: 120px;
    background-color: #F6F7F7;
    min-height: 100vh;
}

    .pay-history .pay-history-box,
    .pay-history form > div.row {
        border-radius: 15px;
        box-shadow: 2px 2px 5px #acacac6b;
    }

        .pay-history .pay-history-box > h3 {
            color: var(--mainColor)
        }

    .pay-history .pay-history-items {
        border-radius: 15px;
    }

        .pay-history .pay-history-items li span:last-of-type {
            border-radius: 10px;
        }
/* Start Teacher Profile Layout*/
.teacher-profile-layout .left-side .edit-profile {
    margin-bottom: -40px;
}

    .teacher-profile-layout .left-side .edit-profile a {
        text-decoration: none;
    }

        .teacher-profile-layout .left-side .edit-profile a i {
            background: #fff;
            border-radius: 50%;
            box-shadow: 0px 3px 6px #00000029;
            color: #000;
            height: 40px;
            width: 40px;
            line-height: 40px;
            text-align: center;
        }

.teacher-profile-layout .counting-SGL, .teacher-profile-layout .share-link-box {
    background-color: #F6F7F7;
    border-radius: 30px;
}

    .teacher-profile-layout .counting-SGL ul li:not(:first-of-type) {
        border-left: 1px solid #a49d9da1;
    }

    .teacher-profile-layout .counting-SGL ul li span {
        font-size: 14px;
    }

        .teacher-profile-layout .counting-SGL ul li span.count {
            padding: 5px;
            background-color: #fff;
            border-radius: 10px;
            color: var(--mainColor);
            letter-spacing: 2px;
        }

    .teacher-profile-layout .share-link-box p {
        color: #707070;
        font-size: 12px;
    }

    .teacher-profile-layout .share-link-box .box-copy-link > span {
        font-size: 10px;
        background: #fff;
        padding: 10px 2px;
        border-radius: 6px 0 0 6px;
        color: #227DC4;
        border: 1px solid #fff;
    }

    .teacher-profile-layout .share-link-box .box-copy-link button {
        font-size: 12px;
        border-radius: 0 6px 6px 0;
    }

    .teacher-profile-layout .share-link-box .box-share-profile p {
        color: #707070;
    }

    .teacher-profile-layout .share-link-box .box-share-profile .social-media li {
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 10px;
    }

        .teacher-profile-layout .share-link-box .box-share-profile .social-media li a {
            color: #fff;
        }

        .teacher-profile-layout .share-link-box .box-share-profile .social-media li:first-of-type {
            background: #4267B2;
        }

        .teacher-profile-layout .share-link-box .box-share-profile .social-media li:nth-of-type(2) {
            background: #25D366;
        }

        .teacher-profile-layout .share-link-box .box-share-profile .social-media li:nth-of-type(3) {
            background: #00ACEE;
        }

        .teacher-profile-layout .share-link-box .box-share-profile .social-media li:last-of-type {
            background: #E1306C;
        }

.teacher-profile .right-side .right-side-top h3 {
    font-size: 34px;
    letter-spacing: 2px;
}

    .teacher-profile .right-side .right-side-top h3 span {
        background: #fff;
        color: var(--mainColor);
        padding: 5px 20px;
        border-radius: 10px;
        font-size: 20px;
        letter-spacing: 1px;
        margin: 0 10px;
    }

.teacher-profile .right-side .right-side-top .breadcrumb li {
    color: #979696;
}

    .teacher-profile .right-side .right-side-top .breadcrumb li a {
        color: var(--mainColor)
    }

.teacher-profile.teacher-profile-layout .right-side .right-side-bottom {
    background: #F6F7F7;
    border-radius: 20px;
}

#subject-slider2.owl-carousel .owl-item span {
    font-size: 12px;
}

#TeacherSubjectsTbl_wrapper ul.pagination {
    justify-content: center;
    margin-top: 15px;
}
/* Start Avatar-upload*/
.avatar-upload {
    position: relative;
    margin: auto;
}

    .avatar-upload .avatar-edit {
        position: absolute;
        right: 12px;
        z-index: 1;
        top: 10px;
        cursor:pointer;
    }

.avatar-label {
    border: 1px solid;
    cursor: pointer;
    color: white;
    background-color: var(--mainColor);
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 2px;
}
        .avatar-upload .avatar-edit input {
            display: none !important;
        }

            .avatar-upload .avatar-edit input + label {
                display: inline-block;
                width: 34px;
                height: 34px;
                margin-bottom: 0;
                border-radius: 100%;
                background: var(--mainColor);
                color: #fff;
                border: 1px solid transparent;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                cursor: pointer;
                font-weight: normal;
                transition: all 0.2s ease-in-out;
                position: relative;
            }

                .avatar-upload .avatar-edit input + label:hover {
                    background: var(--mainColor);
                    border-color: var(--mainColor);
                }

                .avatar-upload .avatar-edit input + label:after {
                    content: "\f303";
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    color: #fff;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    right: 0;
                    text-align: center;
                    margin: auto;
                    transform: translate(-50%, -50%);
                }

    .avatar-upload .avatar-preview {
        width: 180px;
        height: 180px;
        margin: auto;
        position: relative;
        border: 6px solid #f8f8f8;
        border-radius: 25px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }

        .avatar-upload .avatar-preview > div {
            /*width: 114px;*/
            width: 100%;
            border-radius: 25px;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            margin: auto
        }

/* Start Account Setting*/
.teacher-profile .right-side .right-side-bottom-account .login-info-box,
.teacher-profile .right-side .right-side-bottom-account .password-box,
.teacher-profile .right-side .right-side-bottom-account .social-login-box {
    background-color: #F6F7F7;
    border-radius: 25px;
}

    .teacher-profile .right-side .right-side-bottom-account .login-info-box h2,
    .teacher-profile .right-side .right-side-bottom-account .password-box h2,
    .teacher-profile .right-side .right-side-bottom-account .social-login-box h2 {
        letter-spacing: 2px;
    }

    .teacher-profile .right-side .right-side-bottom-account .login-info-box .phone-number p,
    .teacher-profile .right-side .right-side-bottom-account .login-info-box .user-name p {
        font-size: 16px;
    }

        .teacher-profile .right-side .right-side-bottom-account .login-info-box .phone-number p span,
        .teacher-profile .right-side .right-side-bottom-account .login-info-box .user-name p span {
            font-size: 16px;
            color: #707070;
        }

    .teacher-profile .right-side .right-side-bottom-account .login-info-box .phone-number a,
    .teacher-profile .right-side .right-side-bottom-account .password-box .change-password-box > div p + a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: #fff;
        border-radius: 50%;
        color: var(--mainColor);
    }

.show-hide-password {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(0, -50%);
    cursor: pointer;
    color: #4f4848;
}

.teacher-profile .right-side .right-side-bottom-account .password-box .change-password-box > div p {
    width: 80%;
    font-size: 14px;
    color: #707070
}

.teacher-profile .right-side .right-side-bottom-account .social-login-box > p {
    font-size: 16px;
    color: #707070;
}

.teacher-profile .right-side .right-side-bottom-account .social-login-box .social-login-items > button a {
    text-decoration: none;
}

.teacher-profile .right-side .right-side-bottom-account .social-login-box .social-login-items .social-items i {
    width: 45px;
    height: 45px;
    color: #fff;
    line-height: 45px;
    border-radius: 5px;
}

    .teacher-profile .right-side .right-side-bottom-account .social-login-box .social-login-items .social-items i.fa-facebook-f {
        background: #4267B2;
    }

.teacher-profile .right-side .right-side-bottom-account .social-login-box .social-login-items .social-items > img {
    height: 70px;
}

.teacher-profile .right-side .right-side-bottom-account .social-login-box .social-login-items .social-items > p span {
    color: #707070;
    font-size: 14px;
}

/* Start Change Password Modal*/
.modal-header h2.modal-title {
    letter-spacing: 2px;
}

.change-password-modal .SH-password {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translate(0, -50%);
}

    .change-password-modal .SH-password i {
        cursor: pointer;
    }

input[disabled] + .SH-password {
    display: none;
}

.modal-body.change-phone-number .stepwizard .stepwizard-step {
    width: 37%;
}

.forget-password .forgetPassword-header h2 {
    font-size: 40px;
}

.forget-password .forgetPassword-header p {
    width: 60%;
}

.forget-password .forgetPassword-tabs li a {
    display: block;
    color: #000;
    text-decoration: none;
}

    .forget-password .forgetPassword-tabs li a img {
        height: 50px;
    }

    .forget-password .forgetPassword-tabs li a b {
        direction: ltr;
    }

.forget-password .nav-link {
    display: none;
}

    .forget-password .nav-link img {
        height: 250px;
    }

    .forget-password .nav-link p {
        width: 90%;
        margin: auto;
    }
/* Start Sessions Pages*/
.sessions-pages.teacher-profile .right-side {
    margin-top: -110px !important;
}

    .sessions-pages.teacher-profile .right-side .session-form-search {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0px 3px 6px #00000029;
    }

/* Start Lessons Pages */
.breadcrumb-lessons {
    /*background-image: url('../images/teacherProfile/1812.png');*/
    background-image: url('../images/breadcrumb/bg-groups2.png');
    background-size: cover;
    background-position: 0 75px;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
}

    .breadcrumb-lessons .edit-background {
        background: #ffffffcf;
        padding: 7px 10px;
        border-radius: 10px 0 0 10px;
        color: #000;
        text-decoration: none;
    }

    .breadcrumb-lessons.breadcrumb-nav:after,
    .lessons.teacher-profile .left-side .image:before,
    .lessons.teacher-profile .left-side .image:after {
        display: none;
    }

.lessons.teacher-profile .left-side {
    margin-top: -20px;
}

    .lessons.teacher-profile .left-side .goups-box .group-itmes {
        background: transparent;
    }

.lessons.teacher-profile .right-side {
    margin-top: -50px;
}

    .lessons.teacher-profile .right-side .nav-pills .nav-link,
    .student-profile .right-side .nav-pills .nav-link {
        padding: 10px;
        font-size: 16px;
    }

    .lessons.teacher-profile .right-side .nav-pills .nav-link {
        font-size: 14px;
    }

.right-side .tab-lessons .title h3,
.title-tabs-teacherProfile h3 {
    letter-spacing: 2px;
    position: relative;
}

    .right-side .tab-lessons .title h3:before,
    .title-tabs-teacherProfile h3:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 4px;
        background-color: var(--mainColor)
    }

.right-side .tab-lessons .nav .nav-link,
.lessons.teacher-profile .right-side .tab-members .nav .nav-link {
    background-color: #fff;
    border-radius: 0;
    font-size: 14px;
    color: #707070;
    display: flex;
    align-items: center;
}

    .right-side .tab-lessons .nav .nav-link.active,
    .lessons.teacher-profile .right-side .tab-members .nav .nav-link.active {
        background: var(--mainColor);
        color: #fff;
    }

        .right-side .tab-lessons .nav .nav-link:before,
        .right-side .tab-lessons .nav .nav-link.active:after,
        .lessons.teacher-profile .right-side .tab-members .nav .nav-link.active:after,
        .lessons.teacher-profile .right-side .tab-members .nav .nav-link:before {
            display: none;
        }

.right-side .lesson-upcoming-perivious-content > div > div:last-of-type {
    border-bottom: 0 !important;
}

.right-side .lesson-upcoming-perivious-content .date-left {
    max-width: 90px;
    height: 70px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 3px 6px #00000029;
}

    .right-side .lesson-upcoming-perivious-content .date-left span:first-of-type {
        font-size: 14px;
    }

    .right-side .lesson-upcoming-perivious-content .date-left span:last-of-type {
        font-size: 24px;
    }

.right-side .lesson-upcoming-perivious-content .lesson-title-left h6 {
    letter-spacing: 1px;
}

.right-side .lesson-upcoming-perivious-content .lesson-title-left h5 span {
    font-size: 10px;
}

.right-side .lesson-upcoming-perivious-content .date-right li {
    font-size: 14px;
}

    .right-side .lesson-upcoming-perivious-content .date-right li span {
        color: #707070
    }

.right-side .lesson-upcoming-perivious-content .lesson-title-left .links-lesson a,
.right-side .lesson-upcoming-perivious-content .links-lesson-edit-delete a,
.setting-review .links-lesson-edit-delete a,
.links-lesson-parent .links-lesson  a{
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    transition: all .6s ease;
    text-decoration: none;
}

    .right-side .lesson-upcoming-perivious-content .links-lesson-edit-delete a:not(:first-of-type),
    .setting-review .links-lesson-edit-delete a:not(:first-of-type) {
        opacity: 0;
    }

    .right-side .lesson-upcoming-perivious-content .lesson-title-left .links-lesson a.btn-sessions-prep,
    .right-side .lesson-upcoming-perivious-content .lesson-title-left .links-lesson a.btn-sessions-edit {
        border-radius: 5px;
        min-width: 160px;
        width: auto
    }

.right-side .lesson-upcoming-perivious-content .lessons-desc p {
    color: #979696;
    line-height: 1.6
}

.right-side .lesson-upcoming-perivious-content .lesson-started p {
    background: #FFAB31;
    padding: 6px 20px;
    border-radius: 15px;
    color: #fff;
    letter-spacing: 1px;
}

    .right-side .lesson-upcoming-perivious-content .lesson-started p.SessionEnded {
        background: #89a71a;
    }

    .right-side .lesson-upcoming-perivious-content .lesson-started p.SessionNotStarted {
        background: #1a6baf;
    }

.lessons.teacher-profile .right-side .default-session-content h5 {
    letter-spacing: 1px;
}

.lessons.teacher-profile .right-side .default-session-content p,
.student-profile .right-side .default-session-content {
    color: #707070
}

.lessons.teacher-profile .right-side .default-session-content .steps-how-to-use .second-steps::before,
.lessons.teacher-profile .right-side .default-session-content .steps-how-to-use .first-steps::before {
    content: '';
    position: absolute;
    top: 29%;
    right: -24%;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/Steps/arrows.png');
    width: 90px;
    height: 24px;
}

.lessons.teacher-profile .right-side .default-session-content .steps-how-to-use .steps .image img {
    height: 120px;
}

.lessons.teacher-profile .right-side .default-session-content .steps-how-to-use .steps .desc h5 {
    font-size: 16px;
}
/* Start Modal Search For Session*/
.lessons .SearchForSession .modal-header h3 {
    letter-spacing: 2px;
}

.lessons .SearchForSession .modal-body p {
    color: #2C2B2B;
}

.right-side .lesson-upcoming-perivious-content .lesson-title-left .links-lesson a i {
    padding: 0;
}
/* Start Community (Add Comment)*/
.lessons.teacher-profile .right-side .community-content .add-post-box {
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 20px;
}

.lessons.teacher-profile .right-side .community-content .teacher-image-post img,
.lessons.teacher-profile .modal .post-by-info img {
    height: 50px;
    border-radius: 15px;
    box-shadow: 3px 3px 6px #00000029;
}

.lessons.teacher-profile .right-side .community-content .add-post {
    text-decoration: none;
    color: #707070;
    font-size: 14px;
}

.lessons.teacher-profile .right-side .community-content .post-item-header .about-post-item-header span {
    font-size: 12px;
    color: #707070;
    letter-spacing: 1px;
}

.lessons.teacher-profile .right-side .community-content .post-item-header:hover .icon-setting > i,
.lessons.teacher-profile .right-side .community-content .post-items-comment-header:hover .icon-setting > i,
.post-items-content-file:hover .icon-setting > i {
    opacity: 1 !important;
}

.lessons.teacher-profile .right-side .community-content .post-item-header .icon-setting li a,
.lessons.teacher-profile .right-side .community-content .post-items-comment-header .icon-setting li a {
    font-size: 10px;
}

.lessons.teacher-profile .right-side .community-content .post-items-content p,
.lessons.teacher-profile .right-side .community-content .post-items-content > a:first-child {
    font-size: 14px;
    color: #2C2B2B;
    width: 90%;
    line-height: 1.6;
}


.lessons.teacher-profile .right-side .community-content .post-items-content .post-items-content-file {
    width: 90%;
    margin: auto;
}

.lessons.teacher-profile .right-side .community-content .post-items-content-images .image-preview a {
    text-decoration: none;
    position: relative;
    margin: 10px;
}

    .lessons.teacher-profile .right-side .community-content .post-items-content-images .image-preview a:nth-of-type(6)::before {
        content: '+ more';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #010101ba;
        line-height: 90px;
        text-align: center;
        color: #fff;
        text-transform: capitalize;
    }

    .lessons.teacher-profile .right-side .community-content .post-items-content-images .image-preview a img {
        height: 90px;
    }

.lessons.teacher-profile .right-side .community-content .post-items-content-images .image {
    display: none;
}

.lessons.teacher-profile .right-side .community-content .post-items-like-share a {
    color: #707070;
    text-decoration: none;
}

    .lessons.teacher-profile .right-side .community-content .post-items-like-share a i {
        font-size: 20px
    }

.community-content .post-items-comment .post-items-comment-header .post-items-comment-header-left .image img,
.community-content .post-items-comment .add-comment-reply .user-default img {
    height: 30px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px #00000029;
}

.community-content .post-items-comment .post-items-comment-header .post-items-comment-header-left .desc h6 {
    font-size: 16px;
}

.community-content .post-items-comment .post-items-comment-header .post-items-comment-header-left .desc span {
    font-size: 10px;
    color: #707070;
}

.community-content .post-items-comment .post-items-comment-header .post-items-comment-header-left .desc .content p {
    color: #2C2B2B;
    font-size: 12px;
}

.community-content .post-items-comment .post-items-comment-header .post-items-comment-header-left .desc .like-reply a {
    text-decoration: none;
    color: #33427E;
    font-size: 12px;
}

.community-content .post-items-comment .add-comment-reply input[type="text"] {
    border-radius: 30px !important;
    box-shadow: none;
    border: none;
    padding-right: 90px;
}

.community-content .post-items-comment .add-comment-reply .comment-link-icon {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(0, -50%);
}

.box-file-after-upload .items-file .files > * {
    height: 80px;
    border-radius: 15px;
}

.box-file-after-upload .items-file > a {
    position: absolute;
    top: 0;
    right: -15%;
    width: 25px;
    height: 25px;
    line-height: 25px;
    box-shadow: 0px 3px 6px #00000029;
}

.upload-file {
    width: 20px;
    overflow: hidden;
    margin: 0 5px;
}

    .upload-file input {
        opacity: 0;
        z-index: 2;
        position: relative;
    }

    .upload-file span {
        color: #2C2B2B;
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        font-size: 14px;
        padding: 3px;
        z-index: 0;
    }

.btn-submit-cancel > button {
    font-size: 14px;
}

.teacher-profile .right-side .tab-content > .tab-pane.community-content .HiddentPostBG {
    background-color: #ecf7f7 !important
}
/* Start Modal Show (Add Post)*/

.addPostModal .box-file-after-upload .post-items-content-file {
    border: 1px solid #dee2e6 !important;
}

.addPostModal .box-file-after-upload + .upload-submit {
    justify-content: flex-end !important;
}
/* Start Modal Show (Member Liks Post)*/
.lessons .modal.show-member-likePost .lesson-members-content .member-items {
    border-bottom: 1px solid #dee2e6;
}

    .lessons .modal.show-member-likePost .lesson-members-content .member-items:last-of-type {
        border: 0;
    }

.lessons .modal.show-member-likePost .lesson-members-content .image-member img {
    height: 50px;
}

.lessons .modal.show-member-likePost .lesson-members-content .disc-member h5 {
    font-size: 16px
}

.lessons .modal.show-member-likePost .lesson-members-content .disc-member span {
    font-size: 12px
}
/* Start Tabs Members*/
.member-content .tab-members .search-box {
    width: 300px;
}

    .member-content .tab-members .search-box a {
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        right: 2%;
    }

.lessons.teacher-profile .lesson-members-content .member-items {
    background: transparent;
}

.lessons.teacher-profile .lesson-members-content .image-member img {
    height: 60px;
    border-radius: 10px;
}

.lessons.teacher-profile .lesson-members-content .disc-member span {
    color: #2C2B2B;
    font-size: 14px;
}

.member-items .icon-setting .setting-opation li:hover:first-of-type {
    background-color: transparent !important
}

.member-items .icon-setting .setting-opation li a,
.member-items .icon-setting .setting-opation li label {
    font-size: 12px;
}
/* Start PrepareLessons*/
.preparelessons .DTN-Lessons .date {
    width: 90px;
    background: #fff;
    border-radius: 11px;
}

    .preparelessons .DTN-Lessons .date span:first-of-type {
        color: #707070;
        font-size: 14px;
    }

    .preparelessons .DTN-Lessons .date span:last-of-type {
        font-size: 24px;
        letter-spacing: 2px;
    }

.preparelessons .DTN-Lessons .name-time p {
    font-size: 14px;
}

    .preparelessons .DTN-Lessons .name-time p:first-of-type {
        font-size: 16px;
    }

    .preparelessons .DTN-Lessons .name-time p:last-of-type {
        color: #2C2B2B;
    }

.preparelessons.teacher-profile .right-side .tab-content > .tab-pane:last-of-type {
    background-color: #F6F7F7;
    border-radius: 20px;
}

.file-complet-items, .lessons.teacher-profile .right-side .lesson-members-content .member-items {
    background-color: transparent;
    transition: all .5s ease;
    border-radius: 5px;
}

    .file-complet-items:not(:last-of-type),
    .lessons.teacher-profile .right-side .lesson-members-content .member-items:not(:last-of-type) {
        border-bottom: 2px solid #ffffff70;
    }

    .file-complet-items:hover,
    .lessons.teacher-profile .right-side .lesson-members-content .member-items:hover {
        background-color: #fff;
    }

.preparelessons.teacher-profile .right-side .tab-content.upload-file-video-content > .tab-pane .file-upload-complete .name-file i {
    font-size: 20px;
    color: #707070;
}

.teacher-profile .right-side .icon-setting > i {
    background: #979696;
    border-radius: 50%;
    color: #fff;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    opacity: 0;
    transition: all .5s ease;
    padding: 0;
}

.file-complet-items:hover > .icon-setting > i,
.lessons.teacher-profile .right-side .lesson-members-content .member-items:hover .icon-setting i {
    opacity: 1 !important;
    cursor: pointer;
}

.icon-setting .setting-opation {
    position: absolute;
    top: 30px;
    left: 0;
    background: #fff;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
    width: 160px;
    /*display: none;*/
    opacity: 0;
    visibility: hidden;
    z-index: 6;
    /*padding: .25rem*/
    /*transition: all .5s ease;*/
}

.icon-setting:hover .setting-opation {
    opacity: 1;
    visibility: visible;
}

.icon-setting .setting-opation li {
    margin-top: 5px;
    border-radius: 5px;
}

    .icon-setting .setting-opation li:first-of-type {
        margin-top: 0;
    }

    .icon-setting .setting-opation li:last-of-type {
        border-bottom: 0 !important;
    }

    .icon-setting .setting-opation li:hover {
        background-color: var(--mainColor)
    }

    .icon-setting .setting-opation li a {
        color: #000;
        text-decoration: none;
        font-size: 12px;
    }

    .icon-setting .setting-opation li:hover a,
    .icon-setting .setting-opation li:hover a i {
        color: #fff !important;
    }

.preparelessons .card-header.note-toolbar > .btn-group .note-btn[data-original-title="Video"],
.preparelessons .card-header.note-toolbar > .btn-group .note-btn[data-original-title="Bold (CTRL+B)"],
.preparelessons .card-header.note-toolbar > .btn-group .note-btn[data-original-title="Underline (CTRL+U)"],
.preparelessons .card-header.note-toolbar > .btn-group .note-btn[data-original-title="Remove Font Style (CTRL+\)"],
.preparelessons .card-header.note-toolbar > .btn-group .note-btn[data-original-title="Picture"] {
    display: none;
}
/* Start Modal Upload Video */
.preparelessons .modal .modal-body b {
    font-size: 24px;
}

    .preparelessons .modal .modal-body b + p {
        color: #2C2B2B;
        font-size: 16px;
    }

.upload_video_view {
    padding: 150px 0 60px;
    background-color: #fcfcfc;
}

    .upload_video_view .form-group input[name="IsMain"] {
        height: 25px;
        width: 25px;
    }

    .upload_video_view .nav .nav-item a.nav-link {
        width: 150px;
        margin: 0 10px;
        border-radius: 10px;
        text-align: center;
        /*background: #f8f8f8;*/
        border: 1px solid #c6c5c5;
        color: #000;
    }

        .upload_video_view .nav .nav-item a.nav-link.active {
            background-color: var(--mainColor);
            color: #fff !important;
            border: 1px solid var(--mainColor)
        }

    .upload_video_view .btn-uploadVideo button {
        width: 120px;
    }
/* Start Layout Student*/
.student-profile .right-side .default-session-content p {
    width: 60%;
    line-height: 1.5;
    font-size: 16px;
}

.student-profile .right-side .default-session-content .image img {
    height: 400px;
}
/* Start Discover MOre*/
.student-profile.discover-more .right-side-top form {
    width: 70%;
}

    .student-profile.discover-more .right-side-top form a {
        position: absolute;
        top: 50%;
        right: 2%;
        transform: translate(0,-50%);
        color: #979696;
    }

.student-profile.discover-more .right-side-bottom .our-teachers::after {
    display: none;
}

.student-profile.discover-more .right-side-bottom .goups-box .load-more a,
.student-profile.discover-more .right-side-bottom .our-teachers .load-more a {
    text-decoration: none;
    color: #33427E;
}
/* Start Sessions Details  Pages*/
.sessions-stu-details .sessions-details > p {
    font-size: 14px;
    line-height: 1.8;
    color: #979696;
}

.sessions-stu-details .video-stu-items .icon-play-video i {
    font-size: 22px;
}

.sessions-stu-details .video-inner,
.teacher-profile .right-side .who-are-teacher .video-inner,
#UploadTeacherVideo .video-inner {
    position: relative;
    max-width: 810px;
    margin: auto;
}

    .sessions-stu-details .video-inner .video-box,
    .teacher-profile .right-side .who-are-teacher .video-inner .video-box,
    #UploadTeacherVideo .video-inner .video-box {
        position: relative;
        max-width: 400px;
        background-image: url('../images/icon/Videos.jpg');
        position: relative;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
        padding: 80px 0px;
        border-radius: 20px;
        margin: auto;
    }

        .sessions-stu-details .video-inner .video-box:after,
        .teacher-profile .right-side .who-are-teacher .video-inner .video-box:after,
        #UploadTeacherVideo .video-inner .video-box:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #0a09099e;
            z-index: 1;
            border-radius: 20px;
        }

        .sessions-stu-details .video-inner .video-box .video-btn a,
        .teacher-profile .right-side .who-are-teacher .video-inner .video-box .video-btn a,
        #UploadTeacherVideo .video-inner .video-box .video-btn a {
            position: relative;
            display: inline-block;
            font-size: 30px;
            color: #222;
            background: #fff;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border-radius: 50%;
            z-index: 2;
            -webkit-animation: pulse 3s infinite;
            -o-animation: pulse 3s infinite;
            animation: pulse 3s infinite;
        }

        .sessions-stu-details .video-inner .video-box .video-desc p,
        .teacher-profile .right-side .who-are-teacher .video-inner .video-box .video-desc p {
            color: #979696;
        }

.sessions-stu-details .file-upload-complete .title-tabs-teacherProfile h3 a, .sessions-stu-details .video-stu-items .title-tabs-teacherProfile h3 a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
}

    .sessions-stu-details .file-upload-complete .title-tabs-teacherProfile h3 a i,
    .sessions-stu-details .video-stu-items .title-tabs-teacherProfile h3 a i {
        font-size: 12px;
        height: 20px;
        display: inline-block;
        line-height: 20px;
        width: 20px;
        text-align: center;
        border-radius: 22%;
    }

@keyframes pulse {
    50% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
}

#liveSessionDiv {
    overflow: hidden;
}

    #liveSessionDiv .water-mark,
    #VideoModal .water-mark,
    #CourdeWaterMark .water-mark {
        top: 50%;
        left: 50%;
        color: #fff;
        padding: 0 0 0 5px;
        opacity: 0.3;
        transform: rotate(20deg) translate(-50%)
    }

        #liveSessionDiv .water-mark .water-mark-username,
        #VideoModal .water-mark .water-mark-username,
        #CourdeWaterMark .water-mark .water-mark-username {
            margin-bottom: 0;
            font-size: 64px;
            letter-spacing: 1px !important;
            text-transform: capitalize;
            opacity: .5;
            color: #fff;
            text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        }

.zoomFrame {
    width: 100%;
    height: 500px;
    margin: auto;
}

.currentuser-watermark {
    position: absolute;
    z-index: 9999999999;
    left: 50%;
    top: 50%;
    transform: rotate(45deg) translate(-50%);
}

    .currentuser-watermark h1 {
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        color: #fff;
        opacity: .6;
        font-size: 65px;
    }
/************
    =================================
    Start Footer
    =================================
*************/
footer {
    padding: 30px 0 0 0;
    /*background: linear-gradient(#fff,#e7f5fb);*/
    background: linear-gradient(#fff,#f6ffd3);
    overflow: hidden;
}
    footer .image-desc img {
        display:none;
    }
        footer .logo-footer img {
/*        max-height: 110px;*/
            width:100%
    }

    footer .social-media-footer li a {
        height: 35px;
        width: 35px;
        background: #3b5999;
        line-height: 35px;
    }

    footer .social-media-footer li:nth-of-type(2) a {
        background: #55acee;
    }

    footer .social-media-footer li:nth-of-type(3) a {
        background: #e4405f;
    }

    footer .social-media-footer li:nth-of-type(4) a {
        background: #cd201f;
    }

    footer .social-media-footer li:last-of-type a {
        background: #1ab7ea;
    }

    footer .copyRight p a {
        text-decoration: none;
    }

        footer .copyRight p a img {
            height: 20px;
        }


/* Website Animation*/
/* Start Breadcrumb animation*/
.breadcrumb-nav, .breadcrumb-nav1 {
    position: relative;
    overflow: hidden;
}

    .breadcrumb-nav .animated-breadcrumb img {
        position: absolute;
        top: 0;
        opacity: 0;
        transform: translate(-50%, -50%)
    }

        .breadcrumb-nav .animated-breadcrumb img:first-of-type {
            left: 0;
            animation: Circuit_Position 10s linear 2s infinite alternate;
        }

        .breadcrumb-nav .animated-breadcrumb img:nth-of-type(2) {
            left: 50%;
            animation: Circuit_opacityTransfotm 10s linear 2s infinite alternate;
        }

        .breadcrumb-nav .animated-breadcrumb img:nth-of-type(3) {
            left: 50%;
            opacity: 0;
            top: 50%;
            animation: Arrows_UpAndDown 5s linear 2s infinite alternate;
        }

        .breadcrumb-nav .animated-breadcrumb img:nth-of-type(4),
        .breadcrumb-nav .animated-breadcrumb img:last-of-type {
            left: 10%;
            opacity: 0;
            top: 50%;
            animation: Plus_ShowAndHide 3s linear 2s infinite alternate;
        }

        .breadcrumb-nav .animated-breadcrumb img:nth-of-type(4) {
            left: 14%;
            top: 40%;
            animation-delay: 5s;
        }
    .breadcrumb-nav1 .animated-breadcrumb img {
        position: absolute;
        top: 0;
        opacity: 0;
        transform: translate(-50%, -50%)
    }

        .breadcrumb-nav1 .animated-breadcrumb img:first-of-type {
            left: 0;
            animation: Circuit_Position 10s linear 2s infinite alternate;
        }

        .breadcrumb-nav1 .animated-breadcrumb img:nth-of-type(2) {
            left: 50%;
            animation: Circuit_opacityTransfotm 10s linear 2s infinite alternate;
        }

        .breadcrumb-nav1 .animated-breadcrumb img:nth-of-type(3) {
            left: 50%;
            opacity: 0;
            top: 50%;
            animation: Arrows_UpAndDown 5s linear 2s infinite alternate;
        }

        .breadcrumb-nav1 .animated-breadcrumb img:nth-of-type(4),
        .breadcrumb-nav1 .animated-breadcrumb img:last-of-type {
            left: 10%;
            opacity: 0;
            top: 50%;
            animation: Plus_ShowAndHide 3s linear 2s infinite alternate;
        }

        .breadcrumb-nav1 .animated-breadcrumb img:nth-of-type(4) {
            left: 14%;
            top: 40%;
            animation-delay: 5s;
        }

@keyframes Circuit_Position {
    0% {
        top: 0;
        opacity: 0;
    }

    20% {
        top: 50%;
        left: 20%;
        opacity: 1;
    }

    40% {
        top: 100%;
        left: 40%;
        opacity: 0;
    }

    60% {
        top: 0;
        left: 60%;
    }

    80% {
        top: 50%;
        left: 80%;
        opacity: 1;
    }

    100% {
        top: 100%;
        left: 95%;
        opacity: 0;
    }
}

@keyframes Circuit_opacityTransfotm {
    0% {
        top: 0;
        left: 50%;
        opacity: 0;
    }

    25% {
        top: 80%;
        left: 60%;
        opacity: 1;
    }

    50% {
        top: 0;
        left: 50%;
        opacity: 0;
    }

    75% {
        top: 80%;
        left: 40%;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 50%;
        opacity: 0;
    }
}

@keyframes Arrows_UpAndDown {
    0% {
        top: 50%;
        opacity: 0;
    }

    25% {
        top: 40%;
        opacity: 1;
    }

    50% {
        top: 30%;
        opacity: 0;
    }

    75% {
        top: 20%;
        opacity: 1;
    }

    100% {
        top: 50%;
        opacity: 0;
    }
}

@keyframes Plus_ShowAndHide {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }


    100% {
        opacity: 0;
    }
}
/*summernote*/
.note-editor.note-frame {
    height: 200px;
}

    .note-editor.note-frame .note-editing-area {
        height: 100%;
    }

.note-editor.note-frame {
    box-shadow: none;
    border-color: #dee2e6;
    margin-bottom: 0
}

.accordion > .card .card-header {
    margin-bottom: -1px
}

.card .card-header.border-radius-10 {
    border-radius: 4px !important
}

.card .card-header {
    background: 0 0;
    padding: 1.25rem;
    border-radius: 0;
    border-color: #ebedf2
}

    .card .card-header .card-title {
        text-transform: capitalize;
        margin-bottom: 0
    }
/*search student list*/
#studentsList.list-group {
    margin-top: 10px;
    position: absolute;
    left: 0;
    right: 0;
    max-height: 295px;
    overflow-y: auto;
    z-index: 8;
}

    #studentsList.list-group .list-group-item.disabled {
        background: var(--mainColor);
        color: #fff;
    }

.linkBox {
    display: none
}

#CreateNewSession input[type="checkbox"] {
    height: 25px;
    width: 25px;
}
/* STart Quiz*/
.quiz-box {
    padding: 80px 0 60px;
    /*background-color: #f4f4f7;*/
}

    .quiz-box .add-quiz:hover {
        color: #fff;
    }

    .quiz-box .quiz-items {
        background-color: #f4f4f7;
        border-radius: 8px;
    }

        .quiz-box .quiz-items ul li {
            font-size: 12px;
            color: #838383;
        }

        .quiz-box .quiz-items > ul li a {
            padding: 0 10px;
            font-size: 16px;
            text-decoration: none;
        }

    .quiz-box .paginationjs .paginationjs-pages ul {
        background-color: #F6F7F7
    }
/* Start Create Quiz*/
.create-quiz {
    padding: 0 0 60px;
    background-color: #f4f4f7;
}

    .create-quiz nav {
        position: fixed;
        top: 0;
        background: #f4f4f7;
        z-index: 55;
        width: 100%;
        padding: 20px 0;
    }

.create-quiz-edit {
    padding-top: 100px;
}

.create-quiz ul .total-ques span,
.create-quiz ul .total-point span {
    padding: 5px 15px;
}

.create-quiz .btn-preview a {
    background-color: #e9ebff;
    border: 1px solid #e9ebff;
    color: #555151;
    width: 100px;
}

.create-quiz .btn-assign a {
    background-color: var(--mainColor);
    width: 100px;
}

.create-quiz .btn-circle {
    background-color: #fff;
    transition: all .5s ease;
    color: #000;
}

.create-quiz-edit .stepwizard-row:before {
    width: 63%;
}

.stepwizard-step > a:hover,
.stepwizard-step > a:active {
    color: #fff !important;
    background: var(--mainColor);
}

.create-quiz .active-steps {
    background-color: var(--mainColor);
    color: #fff;
}

.create-quiz .btn-addQuestions button {
    width: 49%;
    background-color: #e9ebff;
    border: 1px solid #e9ebff;
    color: #1a237e;
}

.time-limited input {
    width: 80px;
}

.create-quiz-edit .addquestion > .row:not(:last-of-type) {
    border-bottom: 1px solid #cecece;
}

.create-quiz-edit .addquestion .matching-box .form-row .form-group:first-of-type::after {
    width: 183px;
}

.create-quiz .question-items {
    /*width: 90%;
    margin: auto;*/
    border-top: 1px solid #dee2e6;
}

    .create-quiz .question-items:last-of-type {
        border-bottom: 1px solid #dee2e6;
    }

.addquestion .add-grading input {
    width: 80px;
}

.addquestion .deleted-question a {
    color: #8b8b8be6;
    transition: all .4s ease
}

    .addquestion .deleted-question a:first-of-type:hover {
        color: #00f;
    }

    .addquestion .deleted-question a:last-of-type:hover {
        color: #dc3545;
    }

.create-quiz-edit #addquestionDiv form .row,
.create-quiz-edit #addquestionDiv form .form-row {
    /*width: 90%;
    margin: auto;*/
}

    .create-quiz-edit #addquestionDiv form .row .AnswerDiv > div,
    .create-quiz-edit #addquestionDiv form .row .AnswerDiv > div > div.form-group {
        width: 100%;
    }

.pip .box-img-view:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #00000075;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease;
}

.pip:hover .box-img-view:before {
    opacity: 1;
    visibility: visible;
    transition: all .5s ease;
}

.pip .box-img-view .dynamicimg {
    height: auto;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.modal .pip .box-img-view .dynamicimg {
    padding: 3px;
    margin: 4px 0;
    font-size: 10px;
}

.create-quiz-edit #addquestionDiv #showimage_AnsDoc .disc-img,
.box-img-view .disc-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    color: #fff;
}

.pip .box-img-view .disc-img {
    font-weight: bold;
    font-size: 16px;
    opacity: 0;
    visibility: hidden;
}

.pip:hover .box-img-view .disc-img {
    opacity: 1;
    visibility: visible;
}

.pip .box-img-view .disc-img span {
    font-weight: bold;
    background: #00000059;
    padding: 4px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 12px;
}

.create-quiz-edit #addquestionDiv form .row .AnswerDiv .matching-box > div,
.create-quiz-edit .viewquestion .multiple-trueFalse-box-view .multiple-trueFalse-item-view {
    width: 100%;
}

    .create-quiz-edit .viewquestion .multiple-trueFalse-box-view .multiple-trueFalse-item-view .images img {
        width: 200px;
    }

.pip .box-img-view + a {
    text-decoration: underline;
    cursor: pointer;
}

.create-quiz-edit #QuestionForm {
    margin-top: 1rem;
    padding-top: 1rem;
}

    .create-quiz-edit #QuestionForm .grading-delete {
        /*width: 87%;
        margin: auto;*/
    }

.create-quiz .btnSave-quiz {
    width: 100px;
}
/* Start Preview Quiz*/
.preview-quiz {
    padding: 120px 0 60px;
    background-color: #f4f4f7;
    min-height: 100vh;
}

    .preview-quiz nav {
        position: fixed;
        top: 0;
        background: #f4f4f7;
        z-index: 55;
        width: 100%;
        padding: 20px 0;
    }

    .preview-quiz .title span {
        font-size: 16px;
        color: #929292;
    }

    .preview-quiz .btn-nextPrev .btn {
        width: 100px;
        font-size: 14px;
        color: #857c7c;
    }

    .preview-quiz .multiple-choice-box .form-group ul,
    .preview-quiz .true-false-box ul {
        position: absolute;
        top: 50%;
        right: 2%;
        transform: translate(0, -50%);
    }

        .preview-quiz .multiple-choice-box .form-group ul li input[type="radio"],
        .preview-quiz .true-false-box ul li input[type="radio"],
        .assignQuiz input[type="checkbox"] {
            height: 18px;
            width: 20px;
        }

        .preview-quiz .multiple-choice-box .form-group ul li img.radio,
        .preview-quiz .true-false-box ul li img.radio {
            height: 16px;
        }

    .preview-quiz .matching-box .question-matching-preview,
    .preview-quiz .matching-box .answer-matching-preview {
        min-height: 40px !important;
        border-radius: 10px;
        padding: 10px;
        position: relative;
        z-index: 2;
    }

    .preview-quiz .matching-box .answer-matching-preview {
        border: 1px dashed var(--mainColor)
    }

        .preview-quiz .matching-box .answer-matching-preview::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -60%;
            width: 135px;
            height: 1px;
            background-color: #ced4da;
        }

        .preview-quiz .matching-box .answer-matching-preview > li {
            cursor: grab;
            align-items: center;
        }

    .preview-quiz .matching-box .answer-drag {
        width: 230px;
        min-height: 100px;
        margin-left: auto;
        margin-right: auto;
    }

        .preview-quiz .matching-box .answer-drag li {
            cursor: grab;
            min-height: 40px;
        }

            .preview-quiz .matching-box .answer-drag li i {
                font-size: 22px;
                color: #a8a8a8;
            }

    .preview-quiz ul .total-answerd .dropdown-menu .dropdown-item {
        padding: 5px 10px;
    }

    .preview-quiz ul .total-answerd .dropdown-menu {
        box-shadow: 2px 2px 4px #ccc;
    }

        .preview-quiz ul .total-answerd .dropdown-menu .dropdown-item:not(:last-of-type) {
            margin-bottom: 5px;
        }

        .preview-quiz ul .total-answerd .dropdown-menu .dropdown-item:hover {
            background-color: #cccccc14 !important
        }

        .preview-quiz ul .total-answerd .dropdown-menu .dropdown-item i {
            color: #ccc;
        }

            .preview-quiz ul .total-answerd .dropdown-menu .dropdown-item i.question-answerd {
                color: var(--mainColor);
            }

.preview-question .fill-blank-box span {
    background: #ededed;
    min-width: 150px;
}
/* STart Modal Confirm Quiz , Assign*/
.submitQuiz-modal .modal-body .number-questionAnswered .submitQuiz-content span {
}

    .submitQuiz-modal .modal-body .number-questionAnswered .submitQuiz-content span i {
    }

.submitQuiz-modal .modal-footer > button:first-of-type:hover {
    background-color: #f8f9fa !important;
}
/* Start Notifications*/

#myclass {
    background: #fff;
    position: absolute;
    padding: 0;
    width: auto;
    left: -100px;
    -webkit-box-shadow: 0 4px 6px #ccc;
    -moz-box-shadow: 0 4px 6px #ccc;
    box-shadow: 0 4px 6px #ccc;
}

    #myclass .table-responsive > a {
        color: var(--mainColor);
    }

li.notif-profile {
    position: relative;
}

    li.notif-profile:not(:last-of-type) {
        border-bottom: 1px solid #dee2e6
    }

    li.notif-profile .dropdown-toggle::after {
        display: none;
    }

    li.notif-profile .dropdown-menu {
        max-width: 460px;
        min-width: 300px;
        max-height: 500px;
        left: -130px;
        overflow-x: auto;
        border-radius: 8px;
        border: none;
        box-shadow: 1px 1px 3px #cccccc91, -1px -1px 4px #cccccc91;
    }

    li.notif-profile .head-notif span {
        font-size: 16px;
        color: #b4b4b4;
    }

    li.notif-profile .head-notif a {
        font-size: 14px;
    }

    li.notif-profile .notifications-item {
        text-decoration: none;
    }

        li.notif-profile .notifications-item:hover {
            background-color: #f8f9fa;
        }

    li.notif-profile:hover .icon-close {
        display: block;
    }

    li.notif-profile .notifications-item:active {
        background-color: #f8f9fa;
    }

        li.notif-profile .notifications-item:active p {
            color: #000;
        }

    li.notif-profile .notifications-item .icon img {
        width: 30px;
    }

    li.notif-profile > a > span {
        position: absolute;
        top: -7px;
        left: 25px;
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        width: 20px;
        height: 20px;
        background: #dc3545;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
    }

    li.notif-profile .notifications-item .info h5 {
        font-size: 18px;
    }

    li.notif-profile .notifications-item .info h6 > i {
        font-size: 12px;
    }

    li.notif-profile .notifications-item .info h6.text-danger > i {
        color: #dc3545 !important;
    }

    li.notif-profile .notifications-item .info span {
        font-size: 12px;
    }

    li.notif-profile .icon-close {
        position: absolute;
        top: 2%;
        right: 2%;
        display: none;
    }

        li.notif-profile .icon-close a {
            font-size: 14px;
            color: #7e7e7e;
        }

.navbar .icon-profile li i {
    font-size: 22px;
    color: #707070;
    cursor: pointer;
}

.notifications {
    background-color: #F6F7F7;
    padding: 150px 0 60px;
}

    .notifications .filter-notif form .form-check input {
        height: 17px;
        width: 17px;
    }
/* Start Modal Add Question Bank*/
.modal-addQuestionBank .search-byGroup input {
    padding-right: 30px;
}

.modal-addQuestionBank .search-byGroup .input-group-prepend {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 5;
}

    .modal-addQuestionBank .search-byGroup .input-group-prepend a i {
        color: #c6c6c6;
    }

.modal-addQuestionBank .questionBank-items-add {
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
}

    .modal-addQuestionBank .questionBank-items-add .question-items:not(:last-of-type) {
        border-bottom: 1px solid #cccccc54;
    }

    .modal-addQuestionBank .questionBank-items-add h4 + button {
        font-size: 12px;
        padding: 5px 12px;
    }

    .modal-addQuestionBank .questionBank-items-add h4 {
        font-size: 16px;
    }

    .modal-addQuestionBank .questionBank-items-add h5 {
        font-size: 14px;
        margin-bottom: 0;
        padding-right: 10px;
        color: #535353;
    }

        .modal-addQuestionBank .questionBank-items-add h5#FillBlankText span,
        .modal-addQuestionBank .questionBank-items-add .viewquestion .multiple-trueFalse-box-view .multiple-trueFalse-item-view i {
            background: #cccccc52 !important;
        }

    .modal-addQuestionBank .questionBank-items-add ul li a {
        text-decoration: none;
        position: relative;
        color: #8b8a8a;
    }

        .modal-addQuestionBank .questionBank-items-add ul li a:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: 10px;
            background: #a1a1a1;
            transform: translate(0, -50%);
        }

.modal-addQuestionBank .pointsInput {
    width: 70px;
    display: block;
}

    .modal-addQuestionBank .pointsInput:focus {
        box-shadow: none;
        outline: none;
    }

.modal-addQuestionBank span.PointSpan {
    color: gray;
    font-size: 13px;
    line-height: 2.5;
    margin: 0px 5px;
}

.addFromQues-image img {
    max-width: 300px
}
/**Start quizFewDisc****/
.quizFewDisc {
    height: 100vh;
    background-color: #F6F7F7;
}

    .quizFewDisc .quizFewDisc-content h4 img {
        height: 40px;
    }

    .quizFewDisc .quizFewDisc-content h5 span {
        font-size: 14px;
    }

    .quizFewDisc .quizFewDisc-content h6 {
        font-size: 12px;
    }

    .quizFewDisc .quizFewDisc-content .info-questions {
        font-size: 14px;
    }

    .quizFewDisc .quizFewDisc-content a:hover {
        color: #fff;
    }

/* Start Review Quiz*/
.correct-answer {
    border: 1px solid #28a745 !important;
    background: #28a7542b;
}

.incorrect-answer {
    border: 1px solid #dc3545 !important;
    background: #dc35451f;
}

review-quiz nav .total-grade .grade > span:first-of-type {
}

.review-quiz .preview-question .questions-corr-noCorr ul li {
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

    .review-quiz .preview-question .questions-corr-noCorr ul li > span:not(:first-of-type) {
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translate(0, -50%);
        opacity: 0;
        font-size: 14px;
    }

    .review-quiz .preview-question .questions-corr-noCorr ul li.acitve-question {
        background: #fff;
    }

        .review-quiz .preview-question .questions-corr-noCorr ul li.acitve-question > span:not(:first-of-type) {
            opacity: 1;
        }

    .review-quiz .preview-question .questions-corr-noCorr ul li:not(.acitve-question):hover {
        background-color: #ebebef;
    }

    .review-quiz .preview-question .questions-corr-noCorr ul li p span {
        font-size: 12px;
    }

        .review-quiz .preview-question .questions-corr-noCorr ul li p span.bg-status {
            height: 15px;
            width: 15px;
            background: #000;
            border-radius: 2px;
        }

    .review-quiz .preview-question .questions-corr-noCorr ul li.correct p span.bg-status {
        background: #2e8540;
    }

    .review-quiz .preview-question .questions-corr-noCorr ul li.incorrect p span.bg-status {
        background: #dc3545;
    }

    .review-quiz .preview-question .questions-corr-noCorr ul li.ungraded p span.bg-status {
        background: #ccced7;
    }
/***
    Start BootBox
    ****/
.bootbox .modal-footer > button {
    width: 90px;
}

.bootbox .modal-footer .bootbox-cancel {
    background-color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
}
/****
       Start Video Modal 
    ****/
#VideoModal {
    background-color: #bababa26;
}

    #VideoModal .modal-body {
        width: 90%;
        margin: 0 auto;
    }

    #VideoModal .modal-dialog {
        max-width: 100% !important;
    }

.video-controls {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    background: #000;
    padding: 10px 0px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    z-index: 99;
}

#FrameDiv {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

iframe {
    width: 100% !important;
    height: 400px;
}

.video-controls a, .video-controls input {
    background: transparent !important;
    margin: 0px 10px;
    color: #fff;
}

#VideoModal .modal-content {
    background-color: transparent !important
}

    #VideoModal .modal-content .modal-header button span {
        font-size: 50px;
        color: #fff;
        opacity: 1;
        text-shadow: 0 0 #fff;
    }

.full-screen-controls {
    position: absolute;
    width: 100%;
    padding: 10px 0px;
    bottom: 15%;
    z-index: 999;
}

#VideoModal .fullscreenLink,
.fullscreenLink {
    position: absolute;
    bottom: 0;
    left: 2%;
    font-size: 24px;
    color: #fff;
    text-decoration: none !important;
}

.BtnLoader {
    background-image: url('../img/BtnLoader.gif');
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}


.BtnLoaderQuestition {
    background-image: url('../img/BtnLoader.gif');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index:3339999 !important;
}



#Assignments h4 i,
#AssignmentsSessions h4 i {
    color: #2e2d2de0;
    font-size: 12px;
}

#Assignments .card-header button:focus,
#AssignmentsSessions .card-header button:focus {
    outline: 0;
    box-shadow: none;
}

#Assignments .card-header button h4,
#AssignmentsSessions .card-header button h4 {
    font-size: 20px;
}

#Assignments .card-header ul,
#AssignmentsSessions .card-header ul {
    transition: all .5s ease;
    visibility: hidden;
    opacity: 0;
}

#Assignments .card:hover .card-header ul,
#AssignmentsSessions .card:hover .card-header ul {
    visibility: visible;
    opacity: 1;
}

#Assignments .card .card-header ul li a,
#AssignmentsSessions .card .card-header ul li a {
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 12px;
}

    #Assignments .card .card-header ul li a:before,
    #AssignmentsSessions .card .card-header ul li a:before {
        display: none;
    }

#Assignments .card-header button p,
#AssignmentsSessions .card-header button p {
    font-size: 14px;
}

    #Assignments .card-header button p span {
        color: var(--mainColor)
    }


.ask-title-samer {
    color: #000000 !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

video, .pointers-none {
    pointer-events: none !important
}

.mejs__container {
    margin: auto;
}
/***Customs About ****/
.sec-about-edu-left h2 {
    font-size: 40px;
    line-height: 1;
}

.sec-about-edu-left p {
    color: #505050;
    font-size: 14px;
}

    .sec-about-edu-left p:first-of-type {
        font-size: 16px;
    }

/********************
    Start About Page
    **************************/
.sec-about-edu {
    padding: 160px 0 60px 0;
    background-color: #f4faff;
}

.sec-about-edu-left h2 {
    font-size: 40px;
    line-height: 1;
}

.sec-about-edu .sec-about-edu-left p {
    color: #505050;
    font-size: 14px;
}

    .sec-about-edu .sec-about-edu-left p:first-of-type {
        font-size: 16px;
    }

.sec-about-edu .image img {
    height: 450px;
}


.history_value {
    padding: 60px 0;
}

    .history_value .history_value_title .history_value_title h3 {
        font-size: 40px;
    }

    .history_value .history_value_title .image.core_value img {
        height: 300px;
    }
/********************
    Start True Learning Page
    **************************/
.true-learning {
    padding: 60px 0;
}

    .true-learning .items-count-learning {
        text-align: center;
        padding: 20px 0;
        border-radius: 10px
    }

        .true-learning .items-count-learning.count-one {
            background: #fbf8cc;
        }

        .true-learning .items-count-learning.count-two {
            background: #e9fbd5;
        }

        .true-learning .items-count-learning.count-three {
            background: #dcf1fd;
        }

        .true-learning .items-count-learning img {
            height: 100px;
        }

        .true-learning .items-count-learning b {
            font-size: 36px;
        }

        .true-learning .items-count-learning span {
            font-size: 20px;
        }




/********************
    Start About Video
    **************************/
.about-video .popup-videos {
    color: #ffffff;
    background: #ff5421;
    animation: circle-ripple 3s linear linear infinite;
    -webkit-animation: circle-ripple 3s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    background: #21a7d0;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    text-align: center;
}

    .about-video .popup-videos:before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        animation: pulse-border 1500ms ease-out infinite;
        transition: all 0.3s ease;
        z-index: -1;
        background: transparent;
    }

    .about-video .popup-videos i {
        margin-left: 5px;
    }

        .about-video .popup-videos i:before {
            font-size: 30px;
            line-height: 70px;
        }

    .about-video .popup-videos:hover:before {
        background: #ff5421;
    }

.media-icon.orange-color .popup-videos {
    color: #ff5421;
    background: #ffffff;
}

.about-video .popup-videos {
    color: #ffffff;
    background: #ff5421;
    animation: circle-ripple 3s linear linear infinite;
    -webkit-animation: circle-ripple 3s linear infinite;
}

@keyframes circle-ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 84, 33, 0.3), 0 0 0 1em rgba(255, 84, 33, 0.3), 0 0 0 3em rgba(255, 84, 33, 0.3), 0 0 0 5em rgba(255, 84, 33, 0.3);
    }

    100% {
        box-shadow: 0 0 0 1em rgba(255, 84, 33, 0.3), 0 0 0 3em rgba(255, 84, 33, 0.3), 0 0 0 5em rgba(255, 84, 33, 0.3), 0 0 0 8em rgba(255, 84, 33, 0);
    }
}

@-webkit-keyframes circle-ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 84, 33, 0.3), 0 0 0 1em rgba(255, 84, 33, 0.3), 0 0 0 3em rgba(255, 84, 33, 0.3), 0 0 0 5em rgba(255, 84, 33, 0.3);
    }

    100% {
        box-shadow: 0 0 0 1em rgba(255, 84, 33, 0.3), 0 0 0 3em rgba(255, 84, 33, 0.3), 0 0 0 5em rgba(255, 84, 33, 0.3), 0 0 0 8em rgba(255, 84, 33, 0);
    }
}


/* Start Our Value */
.our-value, .our-mission, .our-impact {
    padding: 60px 0;
}

    .our-value img, .our-mission img, .our-impact img {
        border-radius: 15px;
        height: 200px;
        width: auto;
    }
/* STart FAQ */
.breadcrumb-nav .form-search .input-group-prepend i {
    height: 40px;
    line-height: 40px;
    width: 40px;
    background: #fff;
    text-align: center;
    border-bottom-left-radius: 8px !important;
    border-top-left-radius: 8px !important;
    font-size: 14px;
    color: #6a6a6a;
}

.breadcrumb-nav .form-search input {
    height: 40px;
    border: 0;
    border-radius: 0 !important;
    border-bottom-right-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

    .breadcrumb-nav .form-search input:focus {
        outline: none !important;
        box-shadow: none !important;
        border: 0;
    }

.faq, .privacy-policy, .terms-condition {
    padding: 60px 0;
}

    .faq .nav-tabs .nav-item a.active {
        border-bottom: 0 !important;
        background: var(--mainColor);
        color: #fff !important;
    }

    .faq .nav-tabs .nav-item a {
        box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 9px;
        border-radius: 5px;
        padding: 10px;
        font-size: 13px;
        text-transform: capitalize;
        color: rgb(24, 43, 73);
    }

    .faq .nav-tabs .nav-link:focus, .faq .nav-tabs .nav-link:hover {
        border-color: transparent
    }

    .faq .tab-pane .heading h3:before {
        content: '';
        width: 50px;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: var(--mainColor);
    }

    .faq .tab-content .box,
    .privacy-policy .box,
    .terms-condition .box {
        margin-bottom: 30px;
    }

        .faq .tab-content .box .title-icon,
        .privacy-policy .box .title-icon,
        .terms-condition .box .title-icon {
            background: var(--mainColor);
            height: 20px;
            text-align: center;
            position: relative;
        }

            .faq .tab-content .box .title-icon span,
            .privacy-policy .box .title-icon span,
            .terms-condition .box .title-icon span {
                font-size: 20px;
                color: rgb(255, 255, 255);
                width: 36px;
                display: block;
                line-height: 18px;
                padding-left: 2px;
            }

                .faq .tab-content .box .title-icon span:before,
                .privacy-policy .box .title-icon span:before,
                .terms-condition .box .title-icon span:before {
                    content: "";
                    position: absolute;
                    border-width: 10px 18px;
                    border-style: solid;
                    border-color: transparent transparent var(--mainColor);
                    top: -20px;
                    left: 0px;
                    z-index: 1;
                }

                .faq .tab-content .box .title-icon span:after,
                .privacy-policy .box .title-icon span:after,
                .terms-condition .box .title-icon span:after {
                    content: "";
                    position: absolute;
                    border-width: 10px 18px;
                    border-style: solid;
                    border-color: var(--mainColor) transparent transparent;
                    bottom: -20px;
                    left: 0px;
                    z-index: 1;
                }

        .faq .tab-content .box .title-text h4,
        .privacy-policy .box .title-text h4,
        .terms-condition .box .title-text h4 {
            font-size: 22px;
        }

        .faq .tab-content .box .title-text p,
        .privacy-policy .box .title-text p,
        .terms-condition .box .title-text p {
            font-size: 13px;
        }

.faq_contact .contactUsLinkContainer {
    background: linear-gradient(rgb(255 255 255 / 95%), rgb(167 171 162 / 95%)), url('../images/FAQ/FAQcontactus.jpg');
    height: 250px;
}
    .faq_contact .contactUsLinkContainer .faqContactLink {
        padding: 70px;
        text-align: center;
    }
        .faq_contact .contactUsLinkContainer .faqContactLink .btn {
            border: 1px solid var(--mainColor);
            border-radius: 30px;
            background-color: var(--mainColor);
            cursor: pointer;
            color: black;
        }
            .faq_contact .contactUsLinkContainer .faqContactLink .btn:hover {
                background-color: #8eab25;
            }

@media (min-width: 320px ) and ( max-width: 425px){
    .faq_contact .contactUsLinkContainer .faqContactLink {
        padding: 0px;
    }
}
/********
        Start Contact Pages
        ***********/
.contact-box {
    padding: 60px 0;
}

    .contact-box h2:before {
        position: absolute;
        content: "";
        background: var(--mainColor);
        width: 50px;
        height: 2px;
        bottom: 0px;
        left: 0px;
    }

    .contact-box ul li .image {
        border: 1px solid var(--mainColor);
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        border-radius: 50%;
    }

        .contact-box ul li .image img {
            height: 35px;
        }

    .contact-box ul li .info {
        width: 70%;
    }

        .contact-box ul li .info h4 {
            letter-spacing: 2px;
        }

    .contact-box ul li p {
        font-size: 14px;
        color: rgb(150, 150, 150);
    }

#QuestionTitle-error, #QuestionLevelID-error, #eduSubDDL-error, #QuestionLink-error {
    color: #f00;
    font-size: 14px;
    display: block !important;
    margin: 0;
}

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


/*************
    Error Pages
    ************/
.error-page {
    height: 100vh;
}

    .error-page .error-box h1 {
        font-size: 160px;
        line-height: 120px;
        font-weight: 800;
        margin-bottom: 30px;
        color: #233645;
    }

        .error-page .error-box h1 i {
            color: var(--mainColor);
            font-size: 120px;
            margin: 0 5px;
        }

    .error-page .error-box h2 {
        font-size: 46px;
        color: #212b40;
    }

/**************
        Strat Support Pages
        ****************/
.support-icon {
    position: fixed;
    bottom: 25px;
    right: 35px;
    z-index: 5;
}

    .support-icon .icon-toggle {
        /*  height: 60px;
        width: 60px;*/
        padding: 5px;
        width: fit-content;
        display: block;
        background: var(--mainColor);
        border-radius: 25%;
        text-align: center;
        cursor: pointer;
    }

        .support-icon .icon-toggle i {
            line-height: 60px;
            font-size: 26px;
            margin-right:15px;
            color: #fff;
            transition: all .5s ease;
        }

    .support-icon .box-support {
        position: absolute;
        top: -210px;
        min-width: 200px;
        right: 30px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 2px 2px 4px #cccccc63;
        opacity: 0;
        visibility: hidden;
        transition: all .5s ease;
    }

.toggle-boxSupport.support-icon .box-support {
    height: auto;
    opacity: 1;
    visibility: visible
}

.support-icon .box-support h3 {
    font-size: 16px;
    letter-spacing: 1px;
}

    .support-icon .box-support h3 span {
        color: var(--mainColor);
        display: block;
    }

.support-icon .box-support ul li {
    background: #ccc3;
    border-radius: 5px;
}

    .support-icon .box-support ul li i {
        color: #6c757d;
    }

    .support-icon .box-support ul li a {
        color: #000;
        text-decoration: none;
        width: 100%;
    }

.fancybox-slide > * {
    max-width: 90% !important
}

.teacher-profile .left-side .image > .teacher-name {
    color: #fff;
    background-color: var(--mainColor);
    position: absolute;
    bottom: 15px;
    right: 18px;
    font-size: 9px;
    padding: 3px;
    border-radius: 3px;
}

.btn-changeGrade a {
    width: 40px;
    height: 40px;
    display: block;
    color: #fff;
    font-size: 10px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
}

    .btn-changeGrade a i {
        font-size: 18px;
        line-height: 40px;
    }

#GroupStudTable_wrapper .dt-buttons button {
    color: #000;
}

#GroupStudTable_wrapper .dt-buttons {
    width: 100%;
    justify-content: flex-end;
    margin-top: 20px;
}

#GradesStd .info p span {
    font-size: 16px;
    margin: 0 2px;
}

/* STart News Page */
.news_sec {
    padding: var(--padding-60px);
}

    .news_sec .title_news h2 {
        font-size: 36px;
    }

    .news_sec .title_news p {
        width: 60%;
        font-size: 14px;
        color: #8d8a8a;
    }

    .news_sec .item_news .disc_news {
        padding: 30px 5px 10px;
        border-bottom: 8px solid var(--mainColor);
    }

        .news_sec .item_news .disc_news:before {
            padding: 30px 0px 10px 0px;
            margin-top: 8px;
            content: "";
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--mainColor);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            -webkit-transform-origin: 0 100%;
            border-radius: 0;
            transform-origin: 0 100%;
            -webkit-transition-property: transform;
            transition-property: transform;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }

    .news_sec .item_news:hover .disc_news:before {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        background-color: var(--mainColor);
    }

    .news_sec .item_news .disc_news .date {
        width: 45%;
        border-right: 2px solid var(--mainColor);
        transition: all .5s ease
    }

    .news_sec .item_news:hover .disc_news .date {
        border-right: 2px solid #fff;
    }

    .news_sec .item_news .disc_news .date p {
        font-size: 14px;
        color: #000;
        transition: all .5s ease;
    }

    .news_sec .item_news:hover .disc_news .date p {
        color: #fff;
    }

    .news_sec .item_news .disc_news .date p strong {
        font-size: 30px;
        line-height: 1;
    }

    .news_sec .item_news .disc_news .info {
        padding-left: 25px;
    }

        .news_sec .item_news .disc_news .info a {
            text-decoration: none
        }

    .news_sec .item_news:hover .disc_news .info a {
        color: #fff !important;
    }

    .news_sec .item_news .disc_news .info a h3 {
        font-size: 22px;
        color: #000;
        transition: all .5s ease;
    }

    .news_sec .item_news .disc_news .info a p {
        font-size: 14px;
        color: #000;
        transition: all .5s ease;
    }

    .news_sec .item_news:hover .info a h3,
    .news_sec .item_news:hover .info a p {
        color: #fff;
    }

    .news_sec .item_news .image_news {
        overflow: hidden;
    }

        .news_sec .item_news .image_news img {
            transition: all 1s ease;
        }

    .news_sec .item_news:hover .image_news img {
        transform: scale(1.1)
    }


/* STart News Details Page */
.news_details {
    padding: var(--padding-60px)
}

    .news_details ul li {
        font-size: 14px;
        color: #120F2D;
    }

    .news_details .disc p {
        color: #58566B;
    }

#newsDetails-slider:hover .owl-nav > button {
    opacity: 1;
    visibility: visible;
}

#newsDetails-slider .owl-nav > button {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 2px 2px 4px #cccccc8f, -2px -2px 4px #cccccc8f;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
}

    #newsDetails-slider .owl-nav > button.owl-prev {
        left: 0;
    }

    #newsDetails-slider .owl-nav > button.owl-next {
        right: 0;
        transform: translate(50%, -50%);
    }

    #newsDetails-slider .owl-nav > button:focus {
        outline: 0;
    }

    #newsDetails-slider .owl-nav > button.disabled {
        opacity: .9;
        cursor: default;
    }

.news_details .aside_filter .input_search .input-group input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

    .news_details .aside_filter .input_search .input-group input:focus {
        outline: 0;
        box-shadow: none;
    }

.news_details .aside_filter .input_search .input-group .input-group-prepend .input-group-text {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    background: var(--mainColor);
    color: #fff;
    border: none;
    text-decoration: none;
}
.row-buttons{
    width:100%;
    display:flex;
    justify-content:center;
}

.news_details .aside_filter .recent_post .recent_item li a {
    text-decoration: none;
}

.news_details .aside_filter .recent_post > h4:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 60px;
    height: 2px;
    background-color: var(--mainColor);
}

.news_details .aside_filter .recent_post .recent_item li a img {
    border-radius: 50%;
    height: 60px;
    width: 60px;
}

.news_details .aside_filter .recent_post .recent_item li a .disc h4 {
    font-size: 16px;
    color: #120F2D;
}
/******
        STArt REset PAssword
        ********/

.reset-password-page {
    background-color: #95ffa30f;
    height: 100vh;
    display: flex;
    align-items: center;
}

    .reset-password-page .reset-password-box {
        background: #fff;
        border-radius: 20px;
        box-shadow: 3px 3px 5px #e2e2e291;
    }

        .reset-password-page .reset-password-box .image-forgotPassword img {
            height: 50vh
        }

/****************
            STart Live Session
            
            ************/

.live_session {
    padding: 60px 0;
    background: #f0f0f04d;
}
/****************
            STart Survey Section Style 1
            
            ************/

.survey-sec-style1, .survey-sec-style2 {
    padding: 160px 0;
    background-color: #cccccc08
}

    .survey-sec-style1 .survey-box h3,
    .survey-sec-style2 .survey-box h3 {
        font-size: 24px;
    }

    .survey-sec-style1 .survey-box h3 {
        width: 15%;
        text-align: center;
    }

    .survey-sec-style1 .survey-box .survey-item li input,
    .survey-sec-style2 .survey-box .survey-item li input {
        width: 20px;
        height: 20px;
        margin-top: 0;
    }

    .survey-sec-style2.horizontal .heading {
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

        .survey-sec-style2.horizontal .heading h3 {
            /*width: 25%;*/
            text-align: center;
            /*border-left: 1px solid #cccccc7a;*/
            margin-bottom: 0;
            padding: 15px 0px 0px;
            font-size: 16px;
        }

            .survey-sec-style2.horizontal .heading h3 span {
                padding: 0px 5px;
            }

            .survey-sec-style2.horizontal .heading h3:last-of-type,
            .survey-sec-style2.horizontal .survey-box:last-of-type {
                /*border-right: 0 !important;*/
            }

    .survey-sec-style2.horizontal .survey-box {
        border-right: 1px solid #cccccc7a;
        width: 25%;
        text-align: center;
    }

        .survey-sec-style2.horizontal .survey-box > h3 {
            font-size: 16px;
        }

        .survey-sec-style2.horizontal .survey-box .survey-item {
            display: flex;
            justify-content: center;
        }

            .survey-sec-style2.horizontal .survey-box .survey-item label {
                margin-right: 8px !important;
                margin-left: 12px !important;
            }

    .survey-sec-style2.horizontal.result .survey-box > h3 {
        font-size: 16px;
        background: #eee;
        padding: 10px 0px;
        border-bottom: solid 1px #ddd;
    }

    .survey-sec-style2.horizontal.result .heading h3 {
        font-size: 26px;
    }

.border-1 {
    border: solid 1px #ddd
}

.survey-name + p {
    font-size: 14px;
}

#btn-send-survey {
    width: 200px;
}

/*********
    Start Reports Pages
    *************/
.reports_page {
    padding: 100px 0;
}

    .reports_page .card-billingHistory .card label > span {
        padding: 6px 20px;
        background: #cccccc0f;
        border-radius: 8px;
        margin: 0 12px;
    }

    .reports_page #printStudentDgrees .lds-roller {
        display: none;
    }

.Profile-Completion {
    background-color: #F6F7F7;
    border-radius: 30px;
}

    .Profile-Completion h5 {
        color: var(--mainColor);
    }

.oneCase > span > i {
    color: var(--mainColor);
}

.CompleteProfileLink {
    color: var(--mainColor);
}

#CV::-webkit-file-upload-button {
    background: var(--mainColor);
    color: white;
}
/*start video list page => SeriesVideo.cshtml*/
.video-list video {
    box-shadow: -5px -4px 10px 2px rgb(0 0 0 / 40%);
}

.video-list .input-group .cust-input {
    border: 1px solid #9ECC3A;
}

    .video-list .input-group .cust-input:focus {
        box-shadow: 0 0 0 0.2rem rgb(158 204 58 / 40%);
    }

/*///////// to make the video is clickable//////////*/
.pointer-event {
    pointer-events: auto !important;
}
/*///////// to make the video is clickable//////////*/

.video-list .aside-list {
    background-color: #F6F7F7;
    padding: 20px;
    border-radius: 8px;
}

    .video-list .aside-list img {
        border-radius: 8px;
    }

/*///////single video card => homeCourses.cshtml///////////*/
.single-video a:hover {
    text-decoration: none;
}

.single-video .card {
    border: none;
    box-shadow: 5px -3px 9px 3px #c5c2c2e0;
}

    .single-video .card .card-body .single-video-animate-circle {
        width: 20px;
        height: 20px;
        background-color: var(--mainColor);
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        animation: Circuit_Position 10s linear 2s infinite alternate;
    }

    .single-video .card .card-body .single-video-animate-square {
        width: 20px;
        height: 20px;
        background-color: var(--mainColor);
        display: inline-block;
        position: absolute;
        border-radius: 5px;
        margin-right: 80%;
        animation: Arrows_UpAndDown 8s linear 2s infinite alternate;
    }

    .single-video .card .card-title {
        font-size: 3rem;
        color: var(--gray-dark);
        border-bottom: 3px solid var(--mainColor);
    }

    .single-video .card .card-text {
        font-size: 1.2rem;
        text-decoration: none;
        color: var(--gray-dark);
    }

    .single-video .card .text-muted {
        font-size: 0.9rem;
    }

.single-video .single-video__info {
    background-color: #F6F7F7;
    border-radius: 8px;
}
/*///////single video card => homeCourses.cshtml///////////*/
/*///////*multi courses owl carousel => homeCourses.cshtml///////////*/
.multi-video-sllider .card {
    border-radius: 10px;
    border-width: 2px;
    cursor: pointer;
}

    .multi-video-sllider .card img {
        border-radius: 8px;
    }

    .multi-video-sllider .card .card-body {
        padding: 0 0 0 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .multi-video-sllider .card .card-title, .multi-video-sllider .card .card-text {
        margin-bottom: 5px;
    }

    .multi-video-sllider .card .card-title {
        font-size: 2rem;
        color: #A5C239;
        border-right: 5px solid rgba(0,0,0,.125);
        border-left: 5px solid rgba(0,0,0,.125);
        border-radius: 8px;
        padding: 10px;
    }

    .multi-video-sllider .card .card-text {
        font-size: 1.2rem;
    }

.multi-video-sllider .owl-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.8rem;
}

    .multi-video-sllider .owl-nav button.owl-prev, .multi-video-sllider .owl-nav button.owl-next {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: rgba(0,0,0,.125);
        border-radius: 50%;
    }

        .multi-video-sllider .owl-nav button.owl-prev:focus, .multi-video-sllider .owl-nav button.owl-next:focus {
            outline: 0;
        }


        .multi-video-sllider .owl-nav button.owl-prev > i, .multi-video-sllider .owl-nav button.owl-next > i {
            font-size: 1.2rem;
        }

        .multi-video-sllider .owl-nav button.owl-next:hover > i, .multi-video-sllider .owl-nav button.owl-prev:hover > i {
            transition: 0.5s all ease-in-out;
            color: #A5C239;
        }
/*///////*multi courses owl carousel => homeCourses.cshtml///////////*/
/* student-application*/

/*@font-face {
    font-family: 'Coming Soon', cursive;
    src: url("../../customs/fonts/ComingSoon-Regular.ttf");
}*/

.application input {
    border-color: #993869 !important;
}
.application span, .application textarea, .application div, .application .nextStep {
    font-family: var(--mainFont) !important ;
}
.application .select2-container--default .select2-selection--single {
    border: 1px #993869 solid !important;
    border-radius: 0.5rem !important;
}
.application textarea {
    border-radius: 0.5rem !important;
    border-color: #993869;
}
#inlineRadio1, #inlineRadio2 {
    color: #993869 !important;
}
        .w-68 {
            width: 68%;
        }
.buttn {
   
    background-color: #a5c239;
    color: white;
}
.header {
   
    font-size: 27px;
    padding: 12px;
    color: #992e53;
    border: #972d55 dashed 1px;
    border-radius: 9px;
}
.green-btn {
    background-color: #a5c239;
}
.grey-btn {
    background-color: gray;
}
.stepwizard-step p {
    margin-top: 10px;
   
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}
.setup-content {
    margin-left: 0;
    margin-right: 0;
    justify-content:center ;
}
/*.childInfo {
    margin-left: 13%;
}*/
.intial-register .header {
    font-size: 19px !important;
}

.dropdown-style {
    text-align: initial;
    border: 1px solid #993869;
    border-radius: 0.5rem;
}
/*today-attendence*/
/*@font-face {
    font-family: 'Coming Soon', cursive;
    src: url("../../customs/fonts/ComingSoon-Regular.ttf");
}
.attendance {
    font-family: 'Coming Soon', cursive;
}*/
.today-attend {
    font-size: 18px;
    font-weight: 600;
    color: #686666;
}
.student-search, .statistics {
    padding-bottom: 12px;
    border: #a5c239 2px solid;
    padding-top: 13px;
    padding-left: 17px;
    padding-right: 17px;
    border-radius: 25px;
    color: #686666;
}
    .student-search > div > div > div > div > input {
       /* border-color: #a5c239;*/
        margin-right: 10px;
    }
    .student-search > div > div > div > div > div > .select2 {
        border-color: #a5c239;
    }
    .student-search > div > div > div > div > label, .student-search > div > div > div > div > div > select {
        color: #555468;
    }
    .student-search > div > div > div > div > div > ul > li > a {
        text-decoration: none;
        color: #555468;
    }
        .student-search > div > div > div > div > div > ul > li > a:hover{
            color:black;
        }
        .statistics > div > div > span, .statistics > div > a > button {
            font-family: 'Coming Soon', cursive;
        }
        .statistics > div > div > div > div > div > div > div > div > h2:hover{
            cursor: pointer;
        }
.search{
    margin-left: -8%;
}
.student-card {
    border: #a5c239 2px solid;
    border-radius: 25px;
    padding: 13px 10px 12px 10px;
    color: #686666;
}
.plus-btn {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 5%;
}
.branch-search > div > div > div > input {
    border-radius: 8px 0 0 8px !important;
}
.toggle-item {
    opacity: 0;
    width: 0;
    height: 0;
}

    .toggle-item + label {
        display: flex;
        width: 24px;
        height: 12px;
        background: #aaa;
        border-radius: 50px;
        position: relative;
        transition: all .3s ease;
        cursor: pointer;
        box-shadow: inset 0 0 5px #222;
    }

        .toggle-item + label:after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            top: 1.8px;
            left: 2.6px;
            transition: all .2s ease;

        }

    .toggle-item:checked + label {
        background: #A5C239;
    }

        .toggle-item:checked + label:after {
            left:13px;
        }
        .d-grid{
            display:grid;
        }
.no-xpadding {
    padding-left: 0;
    padding-right: 0;
}
.searchbtn {
    border-radius: 0px 10px 10px 0px;
}
/*timetable*/
.bttn {
    border: 1px solid #00000096;
    border-radius: 8px;
}
/*
    ===========================
    Start FollowUp
    ===========================

*/
h2.group-header:before {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: black;
    bottom: 37%;
    left: -1.2rem;
} 
.followUpFor {
    display: contents !important;
}
#followUp_bill i {
    color:white;
}
/*Calendar*/
/*#calendarLabel {
    color: gray;
    border: 1px solid var(--mainColor);
    padding: 10px;
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 10px;
}*/
.ui-widget.ui-widget-content {
    margin-top: 5px;
    box-shadow: 2px 2px 4px #ccc;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #5fab4e !important;
    background: #8fc140 !important;
    color: #fff !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    font-weight: normal;
    border: 1px solid #5fab4e !important;
    background: #8fc140 !important;
    color: #fff !important;
}
    #datePicker {
    border: 1px solid var(--mainColor);
    padding: 10px;
    box-shadow: 2px 2px 4px #ccc;
}
    #calendarLabel .buttn {
        margin-left: 165px;
    }
.calendar_modal .modal-dialog .modal-content .modal-body .block-responsive #calendar {
    width: 100%;
}
/*more than one Child*/
.swipeChild {
    border: none;
    background-color: transparent;
    max-width:9%;
}
/*.parentImg {
    position: relative;
    top: 0;
    left: 0;
}

.image1 {
    position: relative;
    top: 0;
    left: 0;
    border: 1px red solid;
}

.image2 {
    position: absolute;
    top: 30px;
    left: 30px;
    border: 1px green solid;
}*/
/*
    .meals_sec h2, .interactions_sec h2 {
    color: var(--mainColor);
}
*/
/* meal section */
.mealsCard {
    padding-top: 45px;
}
    .meals_sec h2 img{
        width: 45px;
    }
    .mealsCard .card-title {
        text-align: center;
    }
    .mealsCard img {
        margin: 10px;
    }
    .mealsCard .card {
        box-shadow: 2px 2px 4px #ccc;
        border-radius: 10px;
    }
/*
            .mealsCard .card:hover {
            transform: scale(1.1) translate(0,-10px);
            border-bottom: 5px solid var(--mainColor);
            transition: all .5s ease;
            overflow: hidden;
        }
 */
    /* interaction section */
.interactions_sec {
    margin-top: 40px;
}
    .interactions_sec h2 img{
        width: 45px;
    }
.interactionCheckbox {
    width: 1050px;
    padding: 20px;
    margin-top: 15px;
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 10px;
    padding: 5px;
    backface-visibility: hidden;
    background: linear-gradient(rgb(255 255 255 / 95%), rgb(181 231 101 / 95%)), url(../images/followUp123/bg.png);
}

.interactionCheckboxG1, .interactionCheckboxG2 {
    display: inline-block;
    margin-left: 85px;
    margin-right: 55px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.interactionCheckbox .form-check{
margin-bottom: 10px;
}
/* Behavior section */
.behavior_sec{
    margin-top: 57px;
}
    .behavior_sec h2 img{
        width: 45px;
    }
 .behaviourSelect {
    border-radius: 50px;
}
/*.behaviourcard{
    display: inline-block;
}*/
.behavior_sec .container .mealsCard .card{
    width: 500px !important;
}
    .behavior_sec .container .mealsCard .card .card-body{
        display: flex;
    }
    .behavior_sec .container .mealsCard .card .card-body .behaviourcard2 p {
        margin-right: 89px;
    }
        .behavior_sec .container .mealsCard .card .card-body .behaviourcard1, .behavior_sec .container .mealsCard .card .card-body .behaviourcard2 {
            margin-right: 15px;
        }
.mealsCard {
    padding-top: 45px;
}

    .mealsCard h2 img {
        width: 45px;
    }

.mealsCard .card-title {
    text-align: center;
}

.mealsCard img {
    margin: 10px;
}

.mealsCard .card {
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 10px;
}
.behaviorImg{
    width: 40px;
}
/* Academic section */
.academic_sec {
    margin-top: 40px;
}

    .academic_sec h2 img {
        width: 45px;
    }
    /* Toilet section */
.toilet_sec{
    margin-top: 40px;
}
.toilet_sec h2 img{
    width: 45px;
}
    .toilet_sec span {
        display: block;
        background: #c6e760;
        color: white;
        text-align: center;
        box-shadow: 2px 2px 4px #ccc;
        border-radius: 10px;
        margin-bottom: 10px;
        width: 100px;
        margin-right: 70px;
    }
/* Sleeping Time Section */
.sleepingTime_sec {
    margin-top: 40px;
}
    .sleepingTime_sec h2 img {
        width: 60px;
    }
    .sleepingTime_sec span {
        display: block;
        background: #c6e760;
        color: white;
        text-align: center;
        box-shadow: 2px 2px 4px #ccc;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .sleepingTime_sec .card-body {
        /*height: 295px;*/
        height: auto;
    }
    /*.sleepingTime_sec .mealsCard .card {
        left: 75px;
    }*/
    /* Comments Section */
    .comment_sec {
        margin-top: 40px;
    }
    .comment_sec h2 img{
        width: 45px;
    }
#teacherComment{
    color: gray;
}
.c_teacher, .c_parent {
    margin-top: 30px;
}
#parent_commentForm input {
    margin-top: 10px;
    float: left;
}
.collect_BehaviourSleep {
    display: flex;
    justify-content: space-around;
    margin-top: -10px;
    /*margin-left: 80px;*/
}
/*
    ===========================
    End FollowUp
    ===========================

*/
@media (min-width: 567px ) and ( max-width: 768px) {
    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (min-width: 320px ) and ( max-width: 768px) {
    .no-xpadding {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mealsCard .card {
        margin-top: 15px;
    }

    .interactionCheckboxG1, .interactionCheckboxG2 {
        display: contents;
    }

    .behavior_sec .container .mealsCard .card {
        width: auto;
    }

        .behavior_sec .container .mealsCard .card .card-body .behaviourcard2 p {
            margin-left: auto;
        }

        .behavior_sec .container .mealsCard .card .card-body {
            display: contents;
        }

    .behavior_sec .container .mealsCard .card {
        width: 18rem !important;
    }

        .behavior_sec .container .mealsCard .card .card-body .behaviourcard2 p {
            margin-right: auto;
        }
    .sleepingTime_sec .card-body {
        height: 280px;
    }
    .sleepingTime_sec .mealsCard .card {
        width: 300px;
    }
    .interactionCheckbox {
        width: auto;
    }
}
@media (min-width: 320px ) and ( max-width: 425px) {
    #childPhoto {
        width: 45px;
    }
    #headerForFollow {
        font-size: 21px;
    }
    
    .collect_BehaviourSleep{
        display: contents;
    }
    #calendarLabel .buttn {
        margin-left: 15px;
    }
    .sleepingTime_sec .mealsCard .card{
        width: auto;
    }
}
@media ( max-width: 768px){
    .behavior_sec {
        margin-top: 64px;
    }
    @media (min-width: 320px ) and ( max-width: 1024px) {

        .sleepingTime_sec .mealsCard .card {
            left: 0;
        }
    }
}
/*@media (min-width: 320px ) and ( max-width: 1024px){

    .interactionCheckbox {
        width: auto;
    }
}*/
/*
    /*
    ===========================
    Start Gallery
    ===========================

*/
.gallerySection .gallery_item {
    text-align: center;
    position: relative;
    margin: 0 20px 80px;
}
    .gallerySection .gallery_item:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: #fff;
        left: 0;
        top: 0;
        box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);
        transform: rotate( -7.5deg );
        transition: all ease 0.3s;
    }
.gallerySection .gallery_inner {
    padding: 15px;
    padding-bottom: 0;
    background: #fff;
    position: relative;
    z-index: 1;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);
    color: var(--mainColor);
}
    .gallerySection .gallery_inner .gallery_thumb {
        display: block;
        overflow: hidden;
    }
.gallerySection .gallery_content {
    padding: 20px 0;
}
    .gallerySection .gallery_content .album_title {
        color: var(--main-color);
        font-size: 20px;
    }
.gallerySection .gallery_item:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    left: 0;
    top: 0;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);
    transform: rotate(-4.5deg);
    transition: all ease 0.3s;
}
.gallerySection .gallery_item:hover::before, .gallerySection .gallery_item:hover::after {
    transform: rotate(0);
}
/*
    ===========================
    End Gallery
    ===========================

*/
/*==================
kidshome
==================
*/
.children-slider.owl-carousel .owl-item img {
    height: 190px !important;
}
.slider-all-shape .shape1 img {
    position: absolute;
    top: 22%;
    width: 3%;
    left: 92%;
    z-index: 1;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

.slider-all-shape .shape2 img {
    position: absolute;
    top: 88%;
    width: 3%;
    left: 39%;
    z-index: 1;
    animation-iteration-count: infinite;
}

.slider-all-shape .shape3 img {
    position: absolute;
    top: 119%;
    width: 3%;
    left: 90%;
    z-index: 1;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

.slider-all-shape .shape4 img {
    position: absolute;
    top: 12%;
    width: 3%;
    right: 57%;
    z-index: 1;
    animation-iteration-count: infinite;
}


.event-shape .shape4 {
    position: absolute;
    top: 94%;
    left: 7%;
    width: 3%;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}



.event-shape .shape6 {
    position: absolute;
    top: 75%;
    left: 92%;
    width: 3%;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}
/*.overlay {
    position: relative;
    top: -61px;
    right: -63px;
    font-weight: bold;
    font-size: 18px;
    opacity: 10;
    height: min-content;
    width: 154px;
    color: #c1c981;
}*/

.overlay {
    background: linear-gradient(179deg, rgba(0,0,0,-1), rgba(0,0,0,.7));
    color: #cbcd78;
    font-weight: 500;
    position: absolute;
    top: 121%;
    left: 67%;
    transform: translate(-80%, -120%);
    z-index: 2;
    width: 55%;
    font-size: 19px;
    height: 102%;
    padding: 20px;
    text-align: center;
    display: flex;
    align-items: end;
    border: 1px solid transparent;
    border-radius: 19px;
}

/*
    ==========================
    kidshome
    ========================
*/

/*
    ==========================
    my-children
    ========================
*/
.slider-all-shape2 .shape4 img {
    position: absolute;
    top: 57%;
    width: 3%;
    right: 91%;
    z-index: 1;
    animation-iteration-count: infinite;
}
.slider-all-shape2 .shape1 img {
    position: absolute;
    top: 77%;
    width: 3%;
    left: 98%;
    z-index: 1;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}
.event-shape2 .shape6 {
    position: absolute;
    top: 101%;
    left: 77%;
    width: 3%;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}
.reg-butn {
    color: white;
    position: relative;
    margin-top: 4%;
    background-color: var(--mainColor);
    right: 43%;
}
/*
    ==========================
   my-children
    ========================
*/
/*
 Event Section Style
=============================*/

     .section-title h6 {
        color: #ffff;
    }

     .section-title h2 {
        color: #ffff;
    }

     .section-title img {
        color: #ffff;
    }

    .single-event {
        background: #f7f5f5;
        width: 420px;
        margin: 0 15px;
        display: inline-block;
        padding: 35px;
        text-align: left;
        border-radius: 50px 5px 50px 5px;
        position: relative;
        padding: 20px 30px;
        border-radius: 45px 5px 45px 5px;
        box-shadow: 5px 5px 10px -4px #3f3f3f;
        margin-bottom: 30px;
    }

         .single-event .time i {
            color: #7d7b7c;
            margin-right: 2px;
        }

           .single-event .time i::before {
                font-size: 15px;
                font-weight: 600;
            }

       .single-event .time span {
            font-size: 15px;
            font-weight: 700;
            color: #7d7b7c;
        }

       .single-event h4 {
            font-size: 18px;
            font-weight: 700;
            color: #393d72;
            text-transform: capitalize;
            margin-top: 5px;
            margin-bottom: 0;
        }

.single-event .calender {
    position: absolute;
    right: 20px;
    top: 10px;
    bottom: 0;
    margin: auto;
    display: table;
}

    .single-event .calender i::before {
        font-size: 40px;
        color: #ababab;
    }

.event-shape .shape1 {
    position: absolute;
    top: 25%;
    left: 3%;
    width: 3%;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

.event-shape .shape2 {
    position: absolute;
    top: 15%;
    left: 26%;
    width: 3%;
    -webkit-animation: mover .8s infinite alternate;
    animation: mover .8s infinite alternate;
}

.event-shape .shape3 {
    position: absolute;
    top: 80%;
    left: 4%;
    width: 3%;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

.event-shape .shape4 {
    position: absolute;
    top: 12%;
    left: 9%;
    width: 3%;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

.event-shape .shape5 {
    position: absolute;
    top: 38%;
    left: 94%;
    width: 3%;
    -webkit-animation: mover .8s infinite alternate;
    animation: mover .8s infinite alternate;
}

.event-shape .shape6 {
    position: absolute;
    top: 75%;
    left: 92%;
    width: 3%;
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}
/*
 Event Section Style
=============================*/
/*
 Event  Section Style Start
======================================*/
.event-sec {
    position: relative;
    /*text-align: center;*/
    background: #f6f6f6;
}

    .event-sec a {
        color: initial;
    }

    .event-sec .single-event {
        background-color: #ffffff;
        -webkit-box-shadow: 0 2px 28px 0 rgb(0 0 0 / 9%);
        box-shadow: 0 2px 28px 0 rgb(0 0 0 / 9%);
        border-radius: 10px;
        padding: 25px 15px;
        margin-bottom: 30px;
    }

        .event-sec .single-event .event-content h2 {
            font-size: 25px;
        }

        .event-sec .single-event .event-content .time i {
            color: var(--alt-color);
            margin-right: 10px;
        }

        .event-sec .single-event .event-content .address i {
            font-size: 20px;
            color: var(--alt-color);
            margin-right: 10px;
        }

        .event-sec .single-event .event-content .address span {
            font-size: 13px;
        }

        .event-sec .single-event .event-date h4 {
            font-size: 80px;
            color: var(--alt-color);
            margin-bottom: 0
        }

        .event-sec .single-event .event-date {
            text-align: center
        }

            .event-sec .single-event .event-date span {
                font-size: 20px;
                color: var(--alt-color);
                margin-top: 10px;
                font-weight: 500;
            }

        .event-sec .single-event .event-content > p {
            font-size: 14px;
            line-height: 20px;
            color: #a0a0a0;
        }
/*
 End Event Section Style
======================================*/
/*
    /*
 Event Page Style
================================*/
.classes-section .single-box {
    background: #f6f6f6;
    padding: 50px 50px;
    margin-bottom: 30px;
    transition: .5s;
    -webkit-transition: .5s;
}

    .classes-section .single-box:hover {
        box-shadow: 0px 0px 20px 0px rgba(223, 220, 220, 0.4);
    }

    .classes-section .single-box .class-service-wrap .time i {
        font-size: 15px;
        font-weight: 600;
        color: var(--main-color);
    }

        .classes-section .single-box .class-service-wrap .time i::before {
            font-size: 14px;
        }

    .classes-section .single-box .class-service-wrap .time span {
        font-size: 15px;
        font-weight: 700;
        color: var(--main-color);
    }

    .classes-section .single-box .class-service-wrap .class-main-content h3 {
        font-size: 24px;
        font-weight: 400;
        text-transform: capitalize;
        color: #393d72;
        margin-top: 20px;
        margin-bottom: 20px;
        transition: .5s;
        -webkit-transition: .5s;
    }

    .classes-section .single-box:hover .class-service-wrap .class-main-content h3 {
        color: var(--main-color);
    }

    .classes-section .single-box .class-service-wrap .class-main-content p {
        margin-bottom: 20px;
    }

    .classes-section .single-box .class-service-wrap .class-main-content .readmore-btn {
        font-size: 17px;
        font-weight: 700;
        text-transform: capitalize;
        color: #393d72;
        text-decoration: underline;
    }

    .classes-section .single-box:hover .class-service-wrap .class-main-content .readmore-btn {
        color: var(--main-color);
    }

    .classes-section .single-box .class-service-wrap .date-btn {
        position: absolute;
        top: 0;
        right: 0;
    }

        .classes-section .single-box .class-service-wrap .date-btn a {
            font-size: 17px;
            font-weight: 700;
            text-transform: capitalize;
            color: #ffff;
            background: #393d72;
            display: inline-block;
            padding: 10px 20px;
            border-radius: 10px;
        }

    .classes-section .single-box:hover .class-service-wrap .date-btn a {
        background: var(--main-color);
    }

.classes-section-button {
    overflow: hidden;
}

.classes-section .export-button {
    float: left;
}

    .classes-section .export-button a {
        background: #ffff;
        border: 2px solid #c3c3c3;
        padding: 10px 20px;
        text-transform: capitalize;
        color: #393d72;
        font-size: 16px;
        font-weight: 700;
        display: inline-block;
    }

        .classes-section .export-button a:hover {
            background: var(--main-color);
            color: #ffff;
            border: 2px solid var(--main-color);
        }

.classes-section .next-prev-button {
    text-align: right;
}

    .classes-section .next-prev-button ul li {
        display: inline-block;
        padding-right: 30px;
    }

        .classes-section .next-prev-button ul li:last-child {
            padding-right: 0;
        }

        .classes-section .next-prev-button ul li a {
            text-transform: capitalize;
            color: #393d72;
            font-size: 16px;
            font-weight: 700;
        }

            .classes-section .next-prev-button ul li a:hover {
                color: var(--main-color);
            }

            .classes-section .next-prev-button ul li a > i {
                padding-right: 5px;
            }

                .classes-section .next-prev-button ul li a > i:last-child {
                    padding-left: 5px;
                }

                .classes-section .next-prev-button ul li a > i::before {
                    font-size: 15px;
                }

.class-img-wrap img {
    width: 100%;
}
.all-page-banner {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /*height: 250px;*/
    padding: 100px 0;
    position: relative;
}

    .all-page-banner.item-one {
        background-image: url(../img/all-banner-img/3.jpg);
    }

    .all-page-banner.item-two {
        background-image: url(../img/all-banner-img/1.jpg);
    }

    .all-page-banner.item-three {
        background-image: url(../img/all-banner-img/2.jpg);
    }

    .all-page-banner.item-four {
        background-image: url(../img/all-banner-img/4.jpg);
    }

    .all-page-banner.item-five {
        background-image: url('../images/kidsimgs/5.jpg');
    }

    .all-page-banner.item-six {
        background-image: url(../img/all-banner-img/6.jpg);
    }

    .all-page-banner.item-seven {
        background-image: url(../img/all-banner-img/7.jpg);
    }

    .all-page-banner.item-eight {
        background-image: url(../img/all-banner-img/8.jpg);
    }

    .all-page-banner.item-nine {
        background-image: url(../img/all-banner-img/9.jpg);
    }

    .all-page-banner.item-ten {
        background-image: url(../img/all-banner-img/10.jpg);
    }

    .all-page-banner::before {
        content: "";
        position: absolute;
        background-color: rgba(23, 25, 47, 0.9);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .all-page-banner .banner-text {
        position: relative;
    }

        .all-page-banner .banner-text h1 {
            font-size: 48px;
            font-weight: 400;
            color: #ffff;
            text-transform: capitalize;
            margin-bottom: 15px;
        }

        .all-page-banner .banner-text ul li {
            color: #ffff;
            text-transform: capitalize;
            font-size: 18px;
            font-weight: 700;
            display: inline-block;
        }

            .all-page-banner .banner-text ul li > a {
                color: #A5C239 !important;
                text-transform: capitalize;
                font-size: 18px;
                font-weight: 600;
            }

        .all-page-banner .banner-text ul i {
            color: #A5C239 !important;
            text-transform: capitalize;
            font-weight: 400;
            padding-left: 10px;
            padding-right: 10px;
        }

            .all-page-banner .banner-text ul i::before {
                font-size: 18px;
            }
.pb-70 {
    padding-bottom: 70px;
}
.pt-100 {
    padding-top: 100px;
}
.w-175 {
    max-width: 175% !important;
}
/***********
Count Down
************/


#clockdiv {
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    /* font-size: 30px; */
}

    #clockdiv > div {
        padding: 10px;
        border-radius: 3px;
        background: #92ac42;
        display: inline-block;
        width: 75px;
    }

    #clockdiv div > span {
        padding: 8px;
        border-radius: 3px;
        display: inline-block;
        font-size: 18px;
        width: 100%;
        background: #809738;
    }

.smalltext {
    padding-top: 5px;
    font-size: 14px;
}
/*
 Blog Two Section Style
=====================================*/
/* .blog2-section {
    background: #f6f6f6;
} */

.blog2-section .single-blog {
    background: #ffff;
}

.blog2-section .owl-theme .owl-dots {
    display: none;
}

.blog2-section .col-lg-8:nth-child(2) .single-blog {
    background: #ffff;
}

.blog2-section .col-lg-8:nth-child(3) .single-blog {
    background: #ffff;
}

.single-blog .section-title {
    margin-bottom: 20px;
}

    .single-blog .section-title h6 {
        font-size: 18px;
        font-weight: 600;
        color: #dd006d;
        margin-bottom: 10px;
    }

    .single-blog .section-title h2 {
        font-size: 30px;
        font-weight: 400;
        color: #393d72;
    }

.single-blog p {
    color: #686868;
    margin-bottom: 20px;
}

.single-blog .read-more-btn {
    color: #1b1b1c;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    font-weight: bold;
}

.single-blog:hover .read-more-btn {
    color: var(--main-color);
}

.single-blog .read-more-btn > i {
    padding-left: 5px;
    transition: .5s;
    -webkit-transition: .5s;
}

.single-blog .read-more-btn:hover > i {
    padding-left: 10px;
}

.single-blog .blog-image {
    position: relative;
}

.single-blog .blog-chat-list ul li {
    display: inline-block;
    color: #181111;
    padding-right: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #393d72;
}

    .single-blog .blog-chat-list ul li:last-child {
        padding-right: 0;
    }

    .single-blog .blog-chat-list ul li i {
        padding-right: 8px;
        color: var(--main-color);
        font-size: 14px;
        ;
    }

.blog2-section .single-blog .img-caption {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.blog2-section .single-blog .img-caption {
    padding: 30px;
    border-radius: 0 0 5px 5px;
    background: #cccccc1a;
}

    .blog2-section .single-blog .img-caption h3 {
        font-size: 20px;
        font-weight: 400;
        color: #1b1b1c;
        margin-top: 18px;
        margin-bottom: 16px;
        /*max-width: 255px;*/
        transition: .5s;
        -webkit-transition: .5s;
        text-transform: capitalize;
        line-height: 1.5;
    }

.blog2-section .single-blog:hover .img-caption h3 {
    color: var(--main-color);
}

.blog2-section .owl-carousel .owl-nav.disabled {
    display: block;
}

.blog2-section .owl-carousel .owl-nav button.owl-next, .blog2-section .owl-carousel .owl-nav button.owl-prev {
    font-size: 30px;
    background: rgb(254, 99, 103,.6);
    color: #ffff;
    width: 45px;
    height: 45px;
    border-radius: 5px;
    line-height: 0;
    display: inline-block;
}

    .blog2-section .owl-carousel .owl-nav button.owl-next:hover, .blog2-section .owl-carousel .owl-nav button.owl-prev:hover {
        background: #32004b;
    }

.blog2-section .owl-carousel .owl-nav button.owl-next {
    position: absolute;
    right: 0px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.blog2-section .owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    left: 0px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.blog2-section .blog-slider-two.owl-carousel .owl-nav button.owl-next, .blog2-section .blog-slider-two.owl-carousel .owl-nav button.owl-prev {
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    -webkit-transition: .5s;
}

.blog2-section .blog-slider-two:hover.owl-carousel .owl-nav button.owl-next, .blog2-section .blog-slider-two:hover.owl-carousel .owl-nav button.owl-prev {
    opacity: 1;
    visibility: visible;
}

/*
 End Blog Two Section Style
=====================================*/
/*
 Blog Page Style Start 
================================*/
section.right-blog-section {
    padding: 60px 0;
}

.blog2-section .left-blog .single-blog {
    margin-bottom: 30px;
}

    .blog2-section .left-blog .single-blog .blog-image img {
        transition: .5s;
        -webkit-transition: .5s;
        width: 100%;
    }

.blog2-section .single-blog .blog-image .blog-chat-list ul {
    background-color: #ffffff;
    padding: 10px 30px;
    box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.08);
}

    .blog2-section .single-blog .blog-image .blog-chat-list ul li {
        display: inline-block;
        color: #181111;
        padding-right: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #393d72;
    }

        .blog2-section .single-blog .blog-image .blog-chat-list ul li:last-child {
            padding-right: 0;
        }

        .blog2-section .single-blog .blog-image .blog-chat-list ul li i {
            padding-right: 5px;
            color: var(--main-color);
            font-size: 14px;
        }

.blog2-section .left-blog .single-blog .blog-caption {
    background: #ffff;
    padding: 40px;
}

    .blog2-section .left-blog .single-blog .blog-caption .text h3 {
        font-size: 20px;
        font-weight: 400;
        color: #393d72;
        text-transform: capitalize;
        margin-bottom: 12px;
        transition: 0.5s;
        -webkit-transition: 0.5s;
    }

.blog2-section .left-blog .single-blog:hover .blog-caption .text h3 {
    color: #e35272;
}

.blog2-section .left-blog .single-blog .blog-caption .text p {
    color: #a6a6a6;
    font-weight: 400;
    margin-bottom: 12px;
}

.blog2-section .left-blog .single-blog .blog-caption .read-more-btn {
    color: #393d72;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
}

.blog2-section .left-blog .single-blog:hover .blog-caption .read-more-btn {
    color: #e35272;
}

.blog2-section .left-blog .single-blog .blog-caption .read-more-btn > i {
    padding-left: 5px;
    transition: .5s;
    -webkit-transition: .5s;
}

.blog2-section .left-blog .single-blog:hover .blog-caption .read-more-btn > i {
    padding-left: 10px;
}

.blog2-section .left-blog .single-blog .blog-caption .read-more-btn:hover {
    color: #dd006d;
}

.blog2-section .left-blog .single-blog .blog-footer-text ul {
    background-color: #e35272;
    padding: 10px 40px;
    border-radius: 0px 0px 5px 5px;
}

    .blog2-section .left-blog .single-blog .blog-footer-text ul li {
        font-size: 15px;
        font-weight: 400;
        color: #ffffff;
        text-transform: capitalize;
        display: inline-block;
    }

        .blog2-section .left-blog .single-blog .blog-footer-text ul li i {
            color: #ffff;
            margin-right: 10px;
            margin-left: 10px;
        }

            .blog2-section .left-blog .single-blog .blog-footer-text ul li i::before {
                color: #ffff;
                font-size: 18px;
            }

.blog2-section .right-blog .productsearchform {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

    .blog2-section .right-blog .productsearchform input {
        background: #00000005;
        color: #000;
        border: none;
        border-radius: 10px;
        width: 100%;
        font-weight: 400;
        font-size: 15px;
        padding: 15px;
    }

    .blog2-section .right-blog .productsearchform input {
        caret-color: #000000;
    }

        .blog2-section .right-blog .productsearchform input:focus {
            box-shadow: 0;
            border: 0;
            outline: 0;
        }

    .blog2-section .right-blog .productsearchform a,
    .blog2-section .right-blog .productsearchform button {
        position: absolute;
        right: 10px;
        top: 50%;
        bottom: 0;
        background: transparent;
        border: none;
        color: #000;
        font-size: 20px;
        transform: translate(0, -50%);
        line-height: 0;
    }

        .blog2-section .right-blog .productsearchform button:hover {
            cursor: pointer;
        }

    .blog2-section .right-blog .productsearchform input::placeholder {
        color: #000;
    }

.blog2-section .right-blog .blog-all-category-wrapper .cate-box {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #a1a1a1;
    border: 1px solid #c8c8c8;
    padding: 20px;
    border-radius: 8px;
}

    .blog2-section .right-blog .blog-all-category-wrapper .cate-box .cate-title {
        margin-bottom: 10px;
    }

        .blog2-section .right-blog .blog-all-category-wrapper .cate-box .cate-title h3 {
            font-size: 18px;
            font-weight: 400;
            color: #1b1b1c;
            text-transform: capitalize;
            margin-bottom: 0;
        }

.blog2-section .right-blog .blog-all-category-wrapper .archievs {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #a1a1a1;
    border: 1px solid #c8c8c8;
    padding: 20px;
    border-radius: 8px;
}

    .blog2-section .right-blog .blog-all-category-wrapper .archievs .archiev-title {
        margin-bottom: 10px;
    }

        .blog2-section .right-blog .blog-all-category-wrapper .archievs .archiev-title h3 {
            font-size: 18px;
            font-weight: 400;
            color: #1b1b1c;
            text-transform: capitalize;
            margin-bottom: 0;
        }

    .blog2-section .right-blog .blog-all-category-wrapper .archievs .archiev-list li {
        margin-bottom: 10px;
    }

        .blog2-section .right-blog .blog-all-category-wrapper .archievs .archiev-list li a {
            color: #393d72;
            font-weight: 700;
            text-transform: capitalize;
            font-size: 16px;
        }

            .blog2-section .right-blog .blog-all-category-wrapper .archievs .archiev-list li a:hover {
                color: var(--main-color);
            }

            .blog2-section .right-blog .blog-all-category-wrapper .archievs .archiev-list li a > i::before {
                font-size: 20px;
            }

.blog2-section .right-blog .blog-all-category-wrapper .cate-box .cate-list li {
    margin-bottom: 10px;
}

    .blog2-section .right-blog .blog-all-category-wrapper .cate-box .cate-list li:last-child {
        margin-bottom: 0px;
    }

    .blog2-section .right-blog .blog-all-category-wrapper .cate-box .cate-list li a {
        color: #393d72;
        font-weight: 700;
        text-transform: capitalize;
        font-size: 16px;
    }

        .blog2-section .right-blog .blog-all-category-wrapper .cate-box .cate-list li a:hover {
            color: var(--main-color);
        }

        .blog2-section .right-blog .blog-all-category-wrapper .cate-box .cate-list li a > i::before {
            font-size: 20px;
        }

.blog2-section .right-blog .blog-all-category-wrapper .latest-posts {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border: 1px solid #c8c8c8;
    padding: 20px;
    padding-bottom: 0;
    border-radius: 8px;
}

    .blog2-section .right-blog .blog-all-category-wrapper .latest-posts .latest-title {
        margin-bottom: 15px;
    }

        .blog2-section .right-blog .blog-all-category-wrapper .latest-posts .latest-title h3 {
            font-size: 18px;
            font-weight: 400;
            color: #1b1b1c;
            text-transform: capitalize;
            margin-bottom: 0;
        }

    .blog2-section .right-blog .blog-all-category-wrapper .latest-posts .posts-box {
        margin-bottom: 30px;
        position: relative;
    }

        .blog2-section .right-blog .blog-all-category-wrapper .latest-posts .posts-box .p-img {
            width: 30%;
        }

        .blog2-section .right-blog .blog-all-category-wrapper .latest-posts .posts-box .p-text {
            /*position: absolute;
    top: 0;
    bottom: 0;
    left: 122px;
    margin: auto;
    display: table;*/
            width: 60%;
        }

            .blog2-section .right-blog .blog-all-category-wrapper .latest-posts .posts-box .p-text span {
                color: #848484;
                font-size: 14px;
                font-weight: 500;
            }

                .blog2-section .right-blog .blog-all-category-wrapper .latest-posts .posts-box .p-text span > i {
                    padding-right: 5px;
                }

            .blog2-section .right-blog .blog-all-category-wrapper .latest-posts .posts-box .p-text a > h3 {
                font-size: 16px;
                font-weight: 900;
                color: #393d72;
                text-transform: capitalize;
                margin-bottom: 10px;
                transition: .5s;
                -webkit-transition: .5s;
                font-family: 'Lato', sans-serif;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

        .blog2-section .right-blog .blog-all-category-wrapper .latest-posts .posts-box:hover .p-text a > h3 {
            color: var(--main-color);
        }

.blog2-section .right-blog .blog-all-category-wrapper .free-call-wrap {
    background: #393d72;
    text-align: center;
    padding: 40px;
    margin-top: 50px;
}

    .blog2-section .right-blog .blog-all-category-wrapper .free-call-wrap h3 {
        color: #ffff;
        font-size: 30px;
        font-weight: 400;
        text-transform: capitalize;
        margin-bottom: 10px;
    }

    .blog2-section .right-blog .blog-all-category-wrapper .free-call-wrap p {
        color: #ffff;
        margin-bottom: 10px;
    }

    .blog2-section .right-blog .blog-all-category-wrapper .free-call-wrap h4 {
        color: #ffff;
        font-weight: 400;
    }

    .blog2-section .right-blog .blog-all-category-wrapper .free-call-wrap .card-button a {
        color: #393d72;
        background-image: url(../img/button-bg2.png);
        background-size: contain;
        background-repeat: no-repeat;
        font-size: 15px;
        font-weight: 600;
        text-transform: capitalize;
        display: inline-block;
        text-align: center;
        width: 161px;
        height: 38px;
        line-height: 38px;
        margin-top: 15px;
    }

        .blog2-section .right-blog .blog-all-category-wrapper .free-call-wrap .card-button a:hover {
            opacity: .7;
        }

.blog2-section .pagination-wrap {
    margin: auto;
    display: table;
    margin-top: 10px;
}

.blog2-section .pagination {
    margin-top: 40px;
}

.blog2-section .pagination-lg .page-link {
    font-size: 16px;
    padding: 10px 20px;
    color: #393d72;
}

.blog2-section .pagination-lg .page-item:last-child .page-link {
    border-radius: 0;
}

.page-item:last-child .page-link {
    border-radius: 0;
}

.blog2-section .pagination-lg .page-item:first-child .page-link {
    border-radius: 0;
}

.blog2-section .page-link:hover {
    text-decoration: none;
    background-color: var(--main-color);
    border-color: transparent;
    color: #ffff;
}

.blog2-section .page-link:focus {
    box-shadow: none;
}

.blog2-section .page-item.active .page-link {
    background-color: var(--main-color);
    border-color: none;
    border: 1px solid var(--main-color);
    ;
    color: #ffffff;
}

.archivelist p, .cate-list i {
    margin: 0 10px
}

/*
** End Blog Page Style **
================================*/
/*

 testimonial section Start
====================================*/
.testimonial-style2 > div > div > div > div > h4, .testimonial-style2 > div > div > div > div > a{
    color:var(--mainColor);
}
/*
** End testimonial section **
================================*/
/*
 Blog Details Page Style Start
====================================*/
.comment-form-area {
    background: #eeeeee;
    border-top: 5px solid #ff7479;
    padding: 30px;
}

    .comment-form-area .single-contact h3 {
        font-weight: 400;
        font-size: 25px;
        margin-bottom: 10px;
    }

    .comment-form-area .single-contact p {
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 35px;
    }

    .comment-form-area .single-contact .contact-form .form-group label {
        font-weight: 600;
        font-size: 15px;
        text-transform: capitalize;
        color: #393d72;
        margin-bottom: 10px;
    }

        .comment-form-area .single-contact .contact-form .form-group label span {
            color: red;
        }

    .comment-form-area .single-contact .form-control {
        border-radius: 0;
        height: 48px;
    }

    .comment-form-area .single-contact h3 {
        color: #393d72;
        text-transform: capitalize;
    }

    .comment-form-area p.comment-form-cookies-consent {
        position: relative;
    }

        .comment-form-area p.comment-form-cookies-consent input {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

            .comment-form-area p.comment-form-cookies-consent input::placeholder {
                font-size: 14px;
                font-weight: 400;
            }

    .comment-form-area .single-contact .contact-form .form-group p {
        padding-left: 20px;
        margin: 0;
    }

.blog-content blockquote {
    background: #f6f4f4;
    padding: 20px;
    color: #68686c;
    border-left: 4px solid #92ac42;
    font-weight: 600;
}

.blog-content {
    background: #ffffff;
    padding: 30px;
}

    .blog-content p {
        margin-bottom: 20px;
    }

    .blog-content .blog-meta li {
        display: inline-block;
        font-size: 17px;
        margin-right: 10px;
        font-weight: 600;
        color: #393d72;
        margin-bottom: 15px;
        text-transform: capitalize;
    }

        .blog-content .blog-meta li i {
            display: inline-block;
            padding-right: 5px;
            color: #92ac42;
        }

            .blog-content .blog-meta li i::before {
                display: inline-block;
                font-size: 15px;
            }

.single-contact .submit-btn {
    margin-top: 15px;
}

/*
 End Blog Details Page Style 
====================================*/
.archivelist {
    cursor: pointer;
    display: flex;
    align-items: baseline;
}

    .archivelist p {
        color: #393d72;
        font-weight: 700;
        text-transform: capitalize;
        font-size: 16px;
    }
    .archivelist:hover {
        text-decoration: none;
    }
        .archivelist:hover p {
            color: #a0c03f;
            transition: all .5s ease-out;
        }
/*
    ==========================
    Gallery details
    ========================
*/
.portfolio-menu {
    text-align: center;
}

    .portfolio-menu ul li {
        display: inline-block;
        margin: 0;
        list-style: none;
        padding: 10px 15px;
        cursor: pointer;
        -webkit-transition: all 05s ease;
        -moz-transition: all 05s ease;
        -ms-transition: all 05s ease;
        -o-transition: all 05s ease;
        transition: all .5s ease;
    }

.portfolio-item {
    /*width:100%;*/
}

    .portfolio-item .item {
        /*width:303px;*/
        float: left;
        margin-bottom: 10px;
    }
.GalleryDetails_sec .galleryDetails_header {
    color: var(--mainColor)!important;
}
/*
    ==========================
    End Gallery details
    ========================
*/
/*modal-register*/

/*.modal fade .modal-dialog .modal-content .modal-body .modal-register{
    max-width: 100%  ;
}*/
#modal-register {
    max-width: 100%;
}
/*modal-register*/



#CenterData .card-billingHistory .cardItems-billingHistory,
#teacherData .card-billingHistory .cardItems-billingHistory {
    width: 30%;
}

.card-billingHistory .cardItems-billingHistory {
    width: 49%;
}

    .card-billingHistory .cardItems-billingHistory > label {
        font-size: 12px;
    }

@media (max-width: 991px) {
    .card-billingHistory .cardItems-billingHistory {
        width: 50%;
    }
}

.card-billingHistory .cardItems-billingHistory label > span {
    margin: 0 0 0 14px;
    font-size: 16px;
}

.tabel-billingHistory .btn-pearEdu > a {
    width: 200px;
    background-color: #f8f8f8;
}

    .tabel-billingHistory .btn-pearEdu > a:first-of-type {
        border-radius: 0;
    }

@media (max-width: 797px) {
    .tabel-billingHistory .btn-pearEdu > a {
        width: 145px;
    }

    .card-billingHistory .cardItems-billingHistory {
        width: 100%;
    }

    .top-bar .navbar .navbar-header .navbar-brand img {
        height: 55px;
    }
}

.pay-details-header .image img {
    height: 90px;
}

.images-preview.image1{
    width: 50%;
}