@font-face {
            font-family: 'AmpleSoftPro';
            src: url(/resources/fonts/font/AmpleSoftPro.ttf);
        }

        @font-face {
            font-family: 'AmpleSoftPro';
            src: url(/resources/fonts/font/AmpleSoftPro-Bold.ttf);
            font-weight: bold;
        }
        @font-face {
    font-family: 'Bookman Old Style';
    src: url('/resources/fonts/font/BookmanOldStyle.eot');
    src: url('/resources/fonts/font/BookmanOldStyle.eot?#iefix') format('embedded-opentype'),
        url('/resources/fonts/font/BookmanOldStyle.woff2') format('woff2'),
        url('/resources/fonts/font/BookmanOldStyle.woff') format('woff'),
        url('/resources/fonts/font/BookmanOldStyle.ttf') format('truetype'),
        url('/resources/fonts/font/BookmanOldStyle.svg#BookmanOldStyle') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
        

        :root {
            --span-text: #e962ab;
            --contact-background: linear-gradient(to right, rgba(255, 255, 255, 1), rgb(233, 18, 135, .2));
            --second-sec-background: #fde7f3;
            --banner-color: #7d52ab;
            --lite-blue: #e5d4f6;
            --lite-rose: #f7d1e6;
            --lite-gray: #c2c2c2;
            --lite-gray-1: #ddd;
            --black-clr: #000;
            --white-clr: #fff;
            --input-clr: #415674;
            --chat-clr: #180660;
            --chat-text: #343434;
            --active: #4ac74a;
            --modal-box: #efefef;
            --head-blue: "#CFE8EF";
            --nav-grade: linear-gradient(353deg, rgba(121, 39, 130, 1) 0%, rgba(123, 51, 138, 1) 23%, rgba(199, 32, 132, 1) 88%);
            --side-menu: #8956a8;
        }

        *,
        *::after,
        *::before {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html,
        body {
            font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            max-width: 100%;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

        }

        @media (max-width:579px) {
            .jango {
                position: absolute;
                right: 0;
                margin-right: 20px;
            }

        }


        ul {
            margin: 0 !important;
            padding: 0 !important;
        }

        a {
            text-decoration: none !important;
            color: var(--black-clr);
        }

        a:hover {
            color: var(--span-text);
        }

        li {
            list-style-type: none;
        }

        .no-padding {
            margin: 0 !important;
            padding: 0 !important;
        }

        .form-group {
            margin-bottom: 1rem;




        }

        .detail-box label {
            margin-bottom: 5px;
            padding: 0 0 23px;
        }




        .sec-box {
            text-align: center;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            padding: 20px;
            border-radius: 8px;
            min-height: 191px;
        }

        .sec-box span {
            font-size: 16px;
            font-weight: 600;
            color: var(--span-text);
        }

        .index-img-sec {
            width: 90px;
        }

        .head-logo p {
            font-size: 18px;
            font-weight: 400;
        }

        .second-sec {
            background-color: var(--second-sec-background);
            height: 100vh;
            overflow-y: hidden;
        }

        .hidden-logo {
            display: none;
        }

        @media only screen and (max-width : 992px) {
            .second-sec {
                display: none;
            }

            .forgot-sec {
                display: none !important;
            }

            .hidden-logo {
                display: contents;
            }

            .nav-res {
                align-items: center !important;
                padding-left: 30px;
                flex-direction: row;
                justify-content: start !important;
            }

            .nav-space {
                /*                 padding-bottom: 15px; */
                margin-bottom: 10px
            }

            .table-responsive {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
            }
        }

        .sidebar-open .table-responsive {
            overflow: auto !important;
        }

        @media only screen and (max-width: 768px) {
            .login-sec h3 {
                font-size: 24px !important;
            }

            .button-align {
                margin-top: 0px !important;
                margin-bottom: 15px;
            }

        }

        @media only screen and (max-width: 576px) {
            .login-sec h3 {
                font-size: 20px !important;
            }

            /*             .nav-res { */
            /*                 justify-content: space-between !important; */
            /*             } */
            .freeze-box {

                padding: 0 30px;

                margin-top: 0 ! important;

            }
        }



        .input-box1 {
            position: relative;
            height: 52px;
            /*max-width: 900px;
  width: 100%;*/

            margin: 0 20px;
            border-radius: 8px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }

        .input-box1 i,
        .input-box1 .button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .input-box1 i {
            left: 20px;
            font-size: 30px;
            color: #707070;
        }

        .input-box1 input {
            height: 100%;
            width: 100%;
            outline: none;
            font-size: 18px;
            font-weight: 400;
            border: none;
            padding: 0 155px 0 65px;
            background-color: transparent;
            border: none !important;
            border-radius: 500px !important;
            background-color: #fff !important;
            color: var(--chat-text) !important;
        }

        .input-box1 .button {
            right: 7px;
            font-size: 16px;
            font-weight: 400;
            color: #fff;
            border: none;
            padding: 8px 15px;
            border-radius: 200px;
            background-color: var(--banner-color);
            border: 1px solid var(--banner-color);
            cursor: pointer;
        }

        .input-box1 .button:hover {

            background-color: var(--banner-color);
            border: 1px solid var(--banner-color);

        }

        .input-box1 .button.clicked {
            transform: translateY(-50%) scale(0.98);
        }

        /* Responsive */
        @media screen and (max-width: 500px) {
            .input-box1 {
                height: 66px;
                margin: 0 8px;
            }

            .input-box1 i {
                left: 12px;
                font-size: 25px;
            }

            .input-box1 input {
                padding: 0 112px 0 50px;
            }

            .input-box1 .button {
                right: 12px;
                font-size: 14px;
                padding: 8px 18px;
            }
        }


        .icon-round {
            background-color: #7d52ab;
            color: #fff;
            padding: 0px;
            border-radius: 200px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            margin-right: 5px;
        }

        #accordion ul {
            list-style-image: url(/resources/images/check-bullet.png);
        }


        #accordion h3::before {
            font-family: "FontAwesome";
            font-weight: 900;
            content: "\f067";
        }

        .button {
            display: inline-block;
            position: relative;
            overflow: hidden;
            z-index: 0 !important;
            background-color: var(--banner-color);
            border-color: transparent;
            color: var(--white-clr);
            border-radius: 5px;
            font-size: 15px;
            font-weight: 500;
            padding: 10px 15px;
            border: 2px solid var(--banner-color);
            border-style: solid;
            box-shadow: none;
            transition: all 0.3s ease 0s;
            cursor: pointer;
            z-index: 1;
            position: relative;
        }

        .button::after {
            position: absolute;
            content: "";
            z-index: -1;
            display: block;
            left: -20%;
            right: -20%;
            top: -4%;
            height: 150%;
            width: 150%;
            bottom: 0;
            background-color: var(--white-clr);
            transform: skewX(45deg) scale(0, 1);
            transition: all 0.5s ease 0s;
        }

        .button:focus,
        .button:focus:active {
            box-shadow: none;
        }

        .button:hover {
            box-shadow: none;
            color: var(--black-clr);
        }

        .button:hover::after {
            transform: skewX(45deg) scale(1, 1);
        }

        .button-1 {
            background-color: var(--banner-color);
            border: 2px solid var(--banner-color);
            border-radius: 25px;
        }

        .button-2 {
            background-color: var(--white-clr);
            border: 2px solid #fff;
            border-radius: 8px;
            color: var(--black-clr);
            font-size: 18px;
            padding: 5px 25px;
            margin: 2px;
        }

        .button-3 {
            border: 2px solid var(--span-text);
            background-color: var(--span-text);
            padding: 2px 20px;
        }

        .button-4 {
            border: 2px solid var(--span-text);
            background-color: var(--span-text);
        }

        .button-5 {
            border: 2px solid var(--span-text);
            background-color: var(--span-text);
            padding: 2px 8px;
        }

        .login-sec {
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            padding: 30px 50px 50px 50px;
            border-radius: 20px;
        }

        .btn-table {
            width: 63px !important;
            height: auto !important;
            background-color: var(--span-text) !important;
            color: var(--white-clr) !important;
            padding: 0 !important;
            font-size: 13px !important;
            font-weight: normal !important;
            margin: 2px !important;
        }

        .btn-table-1 {
            width: 63px !important;
            height: auto !important;
            background-color: var(--banner-color) !important;
            color: var(--white-clr) !important;
            padding: 0 !important;
            font-size: 13px !important;
            font-weight: normal !important;
            margin: 2px !important;
        }

        .login-sec h3 {
            font-size: 30px;
            text-align: center;
            font-weight: 400;
        }

        input:not([type="submit"]),
        textarea {
            border: 1px solid #c4c4c4;
            box-shadow: none;
            color: var(--input-clr);
            border-radius: 0px;
            background-color: var(--light-gray);
            margin-bottom: 10px;
            padding: 10px 25px;
            max-width: 100%;
            width: 100%;
            font-size: 15px;
            line-height: 30px;
            font-weight: 600;
            transition: all 0.3s linear;
        }

        input:not([type="submit"]):focus,
        textarea:focus {
            outline: none;
        }

        input[type="radio"] {
            border: 1px solid #c4c4c4;
            box-shadow: none;
            color: var(--input-clr);
            border-radius: 8px;
            background-color: var(--light-gray);
            margin-bottom: 0;
            padding: 10px 25px;
            width: auto;
            font-size: 15px;
            line-height: 30px;
            font-weight: 600;
            transition: all 0.3s linear;
            margin-right: 4px;
        }

        input[type="radio"]:focus {
            outline: none;
        }

        input[type="checkbox"] {
            border: 1px solid #c4c4c4;
            box-shadow: none;
            color: var(--input-clr);
            border-radius: 8px;
            background-color: var(--light-gray);
            margin-bottom: 0;
            padding: 10px 25px;
            font-size: 15px;
            line-height: 30px;
            font-weight: 600;
            width: auto;
            transition: all 0.3s linear;
        }

        input[type="checkbox"]:focus {
            outline: none;
        }

        .input-box-clr {
            background-color: var(--white-clr) !important;
            color: var(--black-clr) !important;
        }

        .select-box {
            border: 1px solid #c4c4c4;
            box-shadow: none;
            color: var(--input-clr);
            border-radius: 8px;
            background-color: var(--light-gray);
            margin-bottom: 0;
            padding: 10px 25px;
            max-width: 100%;
            width: 100%;
            font-size: 15px;
            line-height: 30px;
            font-weight: 600;
            transition: all 0.3s linear;
            height: 51.5px !important;
        }

        .text-box {
            border: 1px solid #c4c4c4;
            box-shadow: none;
            color: var(--input-clr);
            border-radius: 8px;
            background-color: var(--light-gray);
            margin-bottom: 0;
            padding: 10px 25px;
            max-width: 100%;
            width: 100%;
            font-size: 15px;
            line-height: 30px;
            font-weight: 600;
            transition: all 0.3s linear;
        }

        .forgot-text {
            font-size: 16px;
            font-weight: 500;
        }

        .new-account {
            font-size: 16px;
            font-weight: 500;
        }

        .contact-box {
            border: 1px solid #000;
            padding: 50px;
            text-align: center;
            border-radius: 25px;
        }

        .contact-frame {
            background-image: var(--contact-background);
        }

        .banner-sec {
            background-color: var(--banner-color);
            display: flex;
            justify-content: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .forgot-sec {
            background-color: var(--second-sec-background);
            height: 100vh;
            overflow-y: hidden;
            overflow-x: hidden;
        }

        .forgot-box {
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            padding: 30px 50px 50px 50px;
            border-radius: 20px;
        }

        .logo-outer {
            border-bottom: 1px solid #ccc;
            text-align: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            width: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        .edo-logo {
            margin: 50px 0 25px 0;
            max-width: 90%;
            max-height: 100px;
        }

        .reg-sec {
            min-height: 150px;
            width: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            background-color: var(--banner-color);
        }

        .head-align {
            height: 150px;
        }

        .reg-sec h1 {
            color: var(--white-clr);
            font-weight: 500;
        }

        .form-box {
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            border-radius: 20px;
        }

        label {
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            /* text-transform: uppercase; */
            letter-spacing: 0.5px;
        }

        .button-align {
            margin-top: 34px;
        }

        .user-box {
            background-color: var(--second-sec-background);
            font-size: 20px;
            font-weight: 600;
            border: none;
            padding: 9px;
            margin-bottom: 15px;
            margin-top: 10px;
            color: var(--black-clr);
            text-align: center;
        }

        .rcorners {
            border-radius: 25px;
            box-shadow: 0px 0px 15px -6px var(--shadow-color-new);
            background-color: var(--banner-color);
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 165px;
            margin-bottom: 15px;
        }

        .add-on {
            background-color: var(--white-clr);
            display: flex;
            width: 100%;
            box-shadow: -8px 8px 22px 0 rgba(103, 102, 102, 0.15);
            align-items: center;
            border-radius: 100px;
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .icon-sect {
            display: flex;
            background-color: var(--lite-rose);
            padding: 15px 15px;
            align-items: center;
            border-radius: 100px;
            margin: 8px;
            width: 75px;
            height: 75px;
        }

        .add-on h5 {
            font-size: 20px;
            padding-left: 8px;
            color: var(--banner-color);
            margin-bottom: 0;
        }

        .student-number {
            font-weight: 600;
            color: var(--span-text);
            font-size: 22px;
            padding-right: 10px;
        }

        .student-value {
            font-weight: 600;
            color: var(--banner-color);
            font-size: 22px;
            padding-right: 20px;
        }

        .myButt {
            box-shadow: -2px 8px 22px 0 rgba(65, 65, 65, 0.15);
            border-radius: 50%;
            display: flex;
            cursor: pointer;
            background-color: var(--white-clr);
            font-size: 14px;
            padding: 30px 15px 20px 15px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #ffffff;
            width: 100px;
            height: 100px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: relative;
            gap: 10px 30px;
        }

        .myButt::after {
            content: '';
            width: 80%;
            height: 1px;
            background: var(--lite-gray-1);
            position: absolute;
            left: 10%;
            top: 50%;
        }

        .myButt:hover {
            background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
            background-color: var(--lite-gray-1);
            color: var(--banner-color);
        }

        .myButt:active {
            position: relative;
            top: 1px;
            color: var(--banner-color);
        }

        .head-mod-5 {
            display: flex;
            margin-left: 10px;
            align-items: center;
        }

        .student {
            margin-top: 50px;
        }

        .card-box {
            box-shadow: 1px 3px 20px #a8a1a19e;
            border-radius: 20px;
            padding: 10px;
            height: 300px;
            margin-bottom: 5px;
            margin-bottom: 15px;
            margin-top: 50px;
        }

        .bg-light {
            background-color: var(--lite-blue) !important;
            border-bottom-left-radius: 40px;
            border-bottom-right-radius: 40px;
        }

        .dark-light {
            background-color: var(--head-blue) !important;
            border-bottom-left-radius: 40px;
            border-bottom-right-radius: 40px;

        }

        .dark-light .profile-name {
            color: #fff !important;
        }

        .logo {
            padding-left: 30px;
        }

        .nav-align {
            padding-right: 30px;
        }

        .navbar-light .navbar-toggler {
            color: var(--black-clr);
            border: none !important;
            /*             margin-right: 30px; */
        }

        .round-bar {
            background: var(--nav-grade);
            border-radius: 100%;
            width: 45px;
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nav-space {
            margin-right: 10px
                /*             padding-right: 15px; */
        }

        .bootbox .btn-primary {
            background-color: var(--banner-color);
        }

        .bootbox-close-button {
            display: none;
        }

        .profile {
            border-radius: 100px;
            width: 45px;
            height: 45px;
            object-fit: cover;
        }

        .profile-name {
            font-weight: 600;
            padding-left: 10px;
            color: var(--black-clr);
        }

        .drop-icon {
            padding-right: 10px;
        }

        .drop-icon-1 {
            padding-right: 15px;
        }

        .dropdown-menu {
            min-width: 0 !important;
            border-radius: 10px;
            padding: 0.5rem 1.5rem 0.5rem 0 !important;
        }

        .drop-text {
            color: var(--banner-color);
            font-weight: 600;
        }

        .top-content {
            font-size: 20px;
            background-color: var(--span-text);
            color: var(--white-clr);
        }

        .mob {
            display: none;
        }

        .login_details {
            display: flex;
        }

        .atag {
            font-weight: 600;
            color: var(--banner-color);
        }

        .dropdown-menu[data-bs-popper] {
            top: 100%;
            right: 0;
            margin-top: 0.125rem;
            left: auto !important;
        }

        @media only screen and (max-width: 576px) {
            .languageslist {
                white-space: normal;
            }
        }

        @media only screen and (max-width: 425px) {
            .logo {
                width: 170px !important;
                margin-bottom: 15px;
            }

            .round-bar {
                width: 40px;
                height: 40px;
            }

            .dropdown-menu {
                margin-left: -50px;
            }
        }

        .closeMenu {
            display: none;
        }

        .navbar-nav .dropdown-menu {
            position: absolute;
        }

        .dropdown-item:hover {
            color: var(--black-clr);
            background-color: var(--white-clr);
        }

        .chat-container.dictionaryBox {
            width: 300px;
            padding: 30px;
        }

        .chat-container {
            position: fixed;
            z-index: 9999;
            top: 0;
            bottom: 0;
            padding: 40px;
            background-color: var(--white-clr);
            right: 0;
            box-shadow: -15px 0 25px #00000014;
            width: 25%;
            display: flex;
            flex-direction: column;
            overflow-y: scroll;
        }

        @media (max-width:490px) {
            .chat-container {
                width: 100% !important;
            }
        }

        button.close {
            padding: 0;
            background-color: transparent;
            border: 0;
            -webkit-appearance: none;
        }

        .close {
            float: right;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: var(--black-clr);
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
        }

        .dictionary-search {
            height: 34px;
            background-color: var(--lite-gray);
        }

        [dir="rtl"] .dropdown-menu {
            text-align: right !important;
            padding: 0.5rem 0 0.5rem 1.5rem !important;
            margin-right: -100px !important;
        }

        [dir="rtl"] .drop-icon {
            padding-right: 0;
            padding-left: 10px;
        }

        [dir="rtl"] .drop-icon-1 {
            padding-right: 0;
            padding-left: 10px;
        }

        [dir="rtl"] .close {
            float: left;
        }

        [dir="rtl"] .chat-person h3 {
            margin-right: 10px;
        }

        [dir="rtl"] .chatimgname h3 {
            margin-right: 10px;
        }

        [dir="rtl"] .chat-list .active {
            left: 185px;
        }

        .message-area {
            overflow: hidden;
            padding: 30px 0;
            background-color: var(--lite-gray-1);
        }

        .chat-area {
            position: relative;
            width: 100%;
            background-color: var(--white-clr);
            border-radius: 0.3rem;
            height: 75vh;
            overflow: hidden;
            min-height: calc(100% - 1rem);
        }

        .chatlist {
            outline: 0;
            height: 100%;
            overflow: hidden;
            width: 380px;
            float: left;
            /*             padding: 15px; */
        }

        .chat-area .modal-content {
            border: none;
            border-radius: 0;
            outline: 0;
            height: 100%;
        }

        .chat-area .modal-dialog-scrollable {
            height: 100% !important;
        }

        .chatbox {
            width: auto;
            overflow: hidden;
            height: 100%;
            border-left: 1px solid #ccc;
        }

        .chatbox .modal-dialog,
        .chatlist .modal-dialog {
            max-width: 100%;
            margin: 0;
        }

        .msg-search {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .chat-area .form-control {
            display: block;
            width: 80%;
            padding: 0.375rem 0.75rem;

            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--black-clr);
            background-color: var(--white-clr);
            background-clip: padding-box;
            border: 1px solid #ccc;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0.25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .chat-area .form-control:focus {
            outline: 0;
            box-shadow: inherit;
        }

        a.add img {
            height: 36px;
        }

        .chat-area .nav-tabs {
            border-bottom: 1px solid #dee2e6;
            align-items: center;
            justify-content: space-between;
            flex-wrap: inherit;
        }

        .chat-area .nav-tabs .nav-item {
            width: 100%;
        }

        .chat-area .nav-tabs .nav-link {
            width: 100%;
            color: var(--chat-clr);
            font-size: 14px;
            font-weight: 500;
            line-height: 1.5;
            text-transform: capitalize;
            margin-top: 5px;
            margin-bottom: -1px;
            background: 0 0;
            border: 1px solid transparent;
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
        }

        .chat-area .nav-tabs .nav-item.show .nav-link,
        .chat-area .nav-tabs .nav-link.active {
            color: var(--black-clr);
            background-color: var(--white-clr);
            border-color: transparent transparent var(--black-clr);
        }

        .chat-area .nav-tabs .nav-link:focus,
        .chat-area .nav-tabs .nav-link:hover {
            border-color: transparent transparent var(--black-clr);
            isolation: isolate;
        }

        .chat-list h3 {
            color: var(--black-clr);
            font-size: 16px;
            /*             font-weight: 600; */
            line-height: 1.5;
            text-transform: capitalize;
            margin-bottom: 0;
            /*             max-width: 250px;       */
            /* 		  white-space: nowrap;     */
            /* 		  overflow: hidden;        */
            /* 		  text-overflow: ellipsis; */
        }

        .chat-list p {
            color: var(--chat-text);
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            text-transform: capitalize;
            margin-bottom: 0;
        }

        .chat-list .chat-person .d-flex {
            margin-bottom: 15px;
            position: relative;
            text-decoration: none;
        }

        .chat-list .active {
            display: block;
            content: '';
            clear: both;
            position: absolute;
            bottom: 0px;
            left: 55px;
            height: 12px;
            width: 12px;
            background: #00DB75;
            border-radius: 50%;
            border: 2px solid #fff;
        }

        .msg-head h3 {
            color: var(--black-clr);
            font-size: 18px;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: 0;
        }

        .msg-head p {
            color: var(--chat-text);
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            text-transform: capitalize;
            margin-bottom: 0;
        }

        .msg-head {
            padding: 15px;
            border-bottom: 1px solid #ccc;
        }

        .moreoption {
            display: flex;
            align-items: center;
            justify-content: end;
        }

        .btn-primarys {
            background-color: var(--banner-color) !important;
            color: #fff;
        }

        .moreoption .navbar {
            padding: 0;
        }

        .moreoption li .nav-link {
            color: var(--black-clr);
            font-size: 16px;
        }

        .moreoption .dropdown-toggle::after {
            display: none;
        }

        .moreoption .dropdown-menu[data-bs-popper] {
            top: 100%;
            left: auto;
            right: 0;
            margin-top: 0.125rem;
        }

        .msg-body ul {
            overflow: hidden;
        }

        .msg-body ul li {
            list-style: none;
            margin: 15px 0;
            padding: 5px 0;
        }

        .msg-body ul li.sender {
            display: block;
            width: 100%;
            text-align: right;
            position: relative;
        }

        /*         .msg-body ul li.sender:before { */
        /*             display: block; */
        /*             clear: both; */
        /*             content: ''; */
        /*             position: absolute; */
        /*             top: -1px; */
        /*             left: -7px; */
        /*             width: 0; */
        /*             height: 0; */
        /*             border-style: solid; */
        /*             border-width: 0 12px 15px 12px; */
        /*             border-color: transparent transparent var(--lite-gray-1) transparent; */
        /*             -webkit-transform: rotate(-37deg); */
        /*             -ms-transform: rotate(-37deg); */
        /*             transform: rotate(-37deg); */
        /*         } */

        .msg-body ul li.sender p {
            color: var(--black-clr);
            font-size: 14px;
            line-height: 1.5;
            font-weight: 400;
            padding: 15px;
            background-color: var(--lite-gray-1);
            display: inline-block;
            border-bottom-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            margin-bottom: 0;
        }

        .msg-body ul li.sender p b {
            display: block;
            color: var(--chat-clr);
            font-size: 14px;
            line-height: 1.5;
            font-weight: 500;
        }

        .msg-body ul li.repaly {
            display: block;
            width: 100%;
            text-align: left;
            position: relative;
        }

        /*         .msg-body ul li.repaly:before { */
        /*             display: block; */
        /*             clear: both; */
        /*             content: ''; */
        /*             position: absolute; */
        /*             bottom: -3px; */
        /*             right: -7px; */
        /*             width: 0; */
        /*             height: 0; */
        /*             border-style: solid; */
        /*             border-width: 0 12px 15px 12px; */
        /*             border-color: transparent transparent #4b7bec transparent; */
        /*             -webkit-transform: rotate(37deg); */
        /*             -ms-transform: rotate(37deg); */
        /*             transform: rotate(37deg); */
        /*         } */

        .msg-body ul li.repaly p {
            color: var(--white-clr);
            font-size: 14px;
            line-height: 1.5;
            font-weight: 400;
            padding: 15px;
            background: #4b7bec;
            display: inline-block;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            margin-bottom: 0;
        }

        .msg-body ul li.repaly p b {
            display: block;
            color: var(--chat-clr);
            font-size: 14px;
            line-height: 1.5;
            font-weight: 500;
        }

        /*         .msg-body ul li.repaly:after { */
        /*             display: block; */
        /*             content: ''; */
        /*             clear: both; */
        /*         } */

        .time {
            display: block;
            color: var(--black-clr);
            font-size: 12px;
            line-height: 1.5;
            font-weight: 400;
        }

        li.repaly .time {
            margin-right: 20px;
        }

        .divider {
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .msg-body h6 {
            text-align: center;
            font-weight: normal;
            font-size: 14px;
            line-height: 1.5;
            color: var(--black-clr);
            background-color: var(--white-clr);
            display: inline-block;
            padding: 0 5px;
            margin-bottom: 0;
        }

        .divider:after {
            display: block;
            content: '';
            clear: both;
            position: absolute;
            top: 12px;
            left: 0;
            border-top: 1px solid #EBEBEB;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .send-box {
            padding: 15px;
            border-top: 1px solid #ccc;
        }

        .send-box form {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .send-box .form-control {
            display: block;
            width: 85%;
            padding: 0.375rem 0.75rem;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--black-clr);
            background-color: var(--white-clr);
            background-clip: padding-box;
            border: 1px solid #ccc;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0.25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .send-box1 {
            padding: 15px;
            border-top: 1px solid #ccc;
        }

        .send-box1 form {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .send-box1 .form-control {
            display: block;
            width: 85%;
            padding: 0.375rem 0.75rem;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--black-clr);
            background-color: var(--white-clr);
            background-clip: padding-box;
            border: 1px solid #ccc;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0.25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .send-box1 button {
            border: none;
            padding: 0.375rem 5px;
            color: var(--white-clr);
            border-radius: 0.25rem;
            font-size: 14px;
            font-weight: 400;
            width: 24%;
            margin-left: 1%;
        }

        .send-box button {
            border: none;
            background: #3867d6;
            padding: 0.375rem 5px;
            color: var(--white-clr);
            border-radius: 0.25rem;
            font-size: 14px;
            font-weight: 400;
            width: 24%;
            margin-left: 1%;
        }

        .send-box button i {
            margin-right: 5px;
        }

        .send-btns .button-wrapper {
            position: relative;
            width: 125px;
            height: auto;
            text-align: left;
            margin: 0 auto;
            display: block;
            background: #F6F7FA;
            border-radius: 3px;
            padding: 5px 15px;
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
            overflow: hidden;
        }

        .send-btns .button-wrapper span.label {
            position: relative;
            z-index: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            width: 100%;
            cursor: pointer;
            color: var(--chat-text);
            font-weight: 400;
            text-transform: capitalize;
            font-size: 13px;
        }

        #upload {
            display: inline-block;
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }

        .send-btns .attach .form-control {
            display: inline-block;
            width: 120px;
            height: auto;
            padding: 5px 8px;
            font-size: 13px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--chat-text);
            background-color: var(--lite-gray-1);
            background-clip: padding-box;
            border: 1px solid #F6F7FA;
            border-radius: 3px;
            margin-bottom: 5px;
        }

        .send-btns .button-wrapper span.label img {
            margin-right: 5px;
        }

        .button-wrapper {
            position: relative;
            width: 100px;
            height: 100px;
            text-align: center;
            margin: 0 auto;
        }

        button:focus {
            outline: 0;
        }

        .add-apoint {
            display: inline-block;
            margin-left: 5px;
        }

        .add-apoint a {
            text-decoration: none;
            background: #F6F7FA;
            border-radius: 8px;
            padding: 8px 8px;
            font-size: 13px;
            font-weight: 400;
            line-height: 1.2;
            color: var(--chat-text);
        }

        .add-apoint a svg {
            margin-right: 5px;
        }

        .chat-icon {
            display: none;
        }

        .btn-mob {
            display: none;
        }

        @media (max-width: 767px) {
            .btn-mob {
                display: block;
            }

            .chat-icon {
                display: block;
                margin-right: 5px;
            }

            .chatlist {
                width: 100%;
            }

            .chatbox {
                width: 100%;
                position: absolute;
                left: 1000px;
                right: 0;
                background: var(--white-clr);
                transition: all 0.5s ease;
                border-left: none;
            }

            .showbox {
                left: 0 !important;
                transition: all 0.5s ease;
            }

            .msg-head h3 {
                font-size: 14px;
            }

            .msg-head p {
                font-size: 12px;
            }

            .msg-head .flex-shrink-0 img {
                height: 30px;
            }

            .send-box button {
                width: 28%;
            }

            .send-box .form-control {
                width: 70%;
            }

            .chat-list h3 {
                font-size: 14px;
            }

            .chat-list p {
                font-size: 12px;
            }

            .msg-body ul li.sender p {
                font-size: 13px;
                padding: 8px;
                border-bottom-left-radius: 6px;
                border-top-right-radius: 6px;
                border-bottom-right-radius: 6px;
            }

            .msg-body ul li.repaly p {
                font-size: 13px;
                padding: 8px;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
                border-bottom-left-radius: 6px;
            }
        }

        .close-chat {
            display: flex;
            align-items: center;
            justify-content: end;
        }

        .close-chat-1 {
            display: flex;
            align-items: center;
            justify-content: end;
        }

        .rounded-circle {
            border-radius: 50% !important;
        }

        .user_img {
            height: 49px;
            width: 49px;
            border: 1.5px solid #f5f6fa;
            margin: 2px;
        }

        .chat-person {
            margin-bottom: 10px;
            cursor: pointer;
        }

        .chat-person:hover {
            background-color: var(--lite-rose);
        }

        element.style {
            background-image: url(/resources/images/avatar.svg);
        }

        .chatimgname .avatar {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .avatar {
            width: 105px;
            height: 105px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0px 0px 30px -9px var(--shadow-color-new);
            position: relative;
            z-index: 10;
            background-size: contain;
            background-position: center;
        }

        .view-items-sec {
            background-repeat: no-repeat;
            background-size: 50px 50px;
            background-color: var(--lite-rose);
            border: 2px solid var(--span-text);
            box-shadow: none !important;
        }

        .active1 {
            background-color: var(--lite-blue);
        }

        .btn:focus {
            outline: 0;
            box-shadow: none !important;
        }

        .cards tbody tr {
            float: left;
            width: 19rem;
            margin: 0.5rem;
            border-radius: 15px;
            padding: 10px 10px;
        }

        .cards tbody td {
            display: block;
            padding-left: 15px;
            min-height: 24px;
            word-break: break-all;
        }







        .cards thead {
            display: none;
        }

        .cards td:before {
            content: attr(data-label);
            position: relative;
            float: left;
            color: var(--black-clr);
            min-width: 8rem;
            margin-left: 0;
            margin-right: 1rem;
            text-align: left;


        }








        /* tr.selected td:before {
    color: var(--lite-gray-1)
} */

        .table .avatar {
            width: 50px;
        }

        .cards .avatar {
            width: 150px;
            height: 150px;
            margin: 15px;
        }

        .contentContainer table th {
            border: none;
            background: var(--banner-color);
            padding: 10px 0.75rem;
            color: var(--white-clr);
        }

        .page-item.active .page-link {
            z-index: 0;
            color: var(--white-clr);
            background-color: var(--banner-color) !important;
            border-color: #7d52ab !important;
        }

        td {
            border-bottom: 1px solid #ffffff !important;
        }

        .odd {
            background-color: var(--lite-blue);
        }

        .even {
            background-color: var(--lite-rose);
        }

        .cards tbody {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .add {
            background-color: var(--lite-gray-1);
            border-radius: 50%;
            padding: 5px;
            margin-left: 8px;
        }

        .institute_name {
            font-weight: 600;
        }

        .breadcrumb {
            justify-content: center;
            font-size: 14px important;
            font-weight: 600;
            align-items: center;
        }

        .academic_year {
            color: var(--span-text);
        }

        .breadcrumb li {
            margin-right: 10px;
        }

        .btn-wrapper {
            background-color: var(--banner-color);
            padding: 15px;
            margin-top: 15px;
            margin-bottom: 25px;
        }

        .bread-icon-sec {
            display: flex;
            align-items: center;
        }

        footer {
            text-align: center;
            background-color: var(--lite-blue);
            padding: 20px;
            margin-top: 5rem;
            /*  position: fixed; */
            bottom: 0;
            width: 100%;
        }

        .modal-header {
            border-bottom: none !important;
        }

        .modal-footer {
            border-top: none !important;
        }

        .modal-content {
            padding: 10px;
        }

        .dtactions {
            display: flex;
            justify-content: end;
        }

        .dataTables_filter input {
            padding: 3px 0;
        }

        .btn-sm {
            background-color: var(--lite-rose);
            border: none;
            padding: 3px 8px 0px 8px !important;
        }

        .btn-sm i {
            color: var(--black-clr);
            font-size: 21px;
        }

        .btn-sm:hover {
            background-color: var(--lite-blue) !important;
        }

        .btn-primary {
            background-color: var(--lite-rose);
            border: none;
            padding: 10px !important;
        }

        .btn-primary:hover {
            background-color: var(--lite-blue) !important;
        }

        .navItem h3 small {
            display: block;
            margin-top: 5px;
            display: none;
        }

        .dashboard-menu-text {
            font-size: 20px;
            /*             color: var(--white-clr); */
        }

        .dashboard-menu-icon {
            width: 55px;
            height: auto;
        }

        .dashboard-head-sec {
            line-height: .8;
        }

        .dashboard-head-sect {
            line-height: .8;
        }

        .mainNav {
            margin-top: 30px;
        }

        .chartbtn {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .counting {
            font-size: 20px;
            color: var(--span-text);
            font-weight: 600;
        }

        .card-bars {
            margin-top: 4em;
        }

        .subnav-cards {
            display: flex;
            align-items: center;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .subnav-img {
            background-color: var(--lite-blue);
            padding: 15px;
            border-radius: 25px;
        }

        .sub-text {
            font-size: 20px;
            font-weight: 600;
            color: var(--black-clr);
        }

        .sub-text-1 {
            font-size: 18px;
            color: var(--span-text);
            padding-top: 10px;
        }

        [dir="rtl"] .add-on h5 {
            margin-right: 0.25rem;
        }

        [dir="rtl"] .dashboard-head-sec {
            margin-right: 1rem;
        }

        .noOfAlert {
            background: var(--white-clr);
            text-align: center;
            width: 24px;
            border-radius: 50%;
            color: var(--black-clr);
            font-weight: bold;
            margin-left: 33px;
            margin-bottom: 31px;
            position: absolute;
        }

        .noOfMsg {
            background: var(--white-clr);
            text-align: center;
            width: 24px;
            border-radius: 50%;
            color: var(--black-clr);
            font-weight: bold;
            margin-left: 33px;
            margin-bottom: 31px;
            position: absolute;
        }

        .noOfNotifications {
            background: var(--white-clr);
            text-align: center;
            width: 24px;
            border-radius: 50%;
            color: var(--black-clr);
            font-weight: bold;
            margin-left: 33px;
            margin-bottom: 31px;
            position: absolute;
        }

        .studentview-select {
            display: inline-block;
            margin-left: 25px;
        }

        .classView select {
            width: 100%;
            color: #000;
            border-radius: 10px;
            -webkit-appearance: none;
            border: solid 2px #fff;
            min-width: 200px;
            position: relative;
        }

        #radio-clr {
            accent-color: var(--span-text);
        }

        .view-option {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .view-option li {
            margin: 10px;
            text-align: center;
        }

        .view-option h3 {
            font-size: 18px !important;
            font-weight: 600 !important;
            color: var(--black-clr) !important;
        }

        .classCategoryoption h3 {
            font-size: 18px !important;
            font-weight: 600 !important;
            color: var(--black-clr) !important;
        }

        section.alloption {
            position: fixed;
            top: 11%;
            left: 2%;
            right: 2%;
            width: auto;
            top: 20%;
            padding: 2%;
            margin: auto;
            max-width: 970px;
            background-color: var(--modal-box);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            border-radius: 8px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
        }

        button.closePopup {
            position: absolute;
            right: 23px;
            top: 17px;
            background: transparent;
            border: none;
            color: var(--black-clr);
            font-size: 18px;
        }

        .classCategoryoption {
            display: flex;
            justify-content: center;
            margin: 0;
        }

        .classCategoryoption ul {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .classCategoryoption li {
            margin: 10px;
            text-align: center;
        }

        section.alloption ul {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .categoryoption-new {
            border: 2px solid;
            border-radius: 50%;
            padding: 10px;
            width: 45px;
            height: auto;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .classViewContainer {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: center;
            padding: 40px 0;
        }

        .classviewWrapper {
            padding: 25px 15px;
            border-radius: 20px;
            width: 300px;
            background: var(--lite-blue);
            margin: 15px;
            display: flex;
            align-items: center;
            position: relative;
            /*overflow: hidden;*/
            transition: all ease-in-out 0.4s;
        }

        .studentImage {
            border-radius: 8px;
            background-repeat: no-repeat;
            background-position: top;
            background-size: cover;
            box-shadow: none;
            border: 2px solid var(--white-clr);
        }

        .studName {
            font-size: 16px;
            font-weight: 600;
        }

        .classviewWrapper h3 .offline {
            font-size: 12px;
            font-weight: 600;
            background-color: var(--lite-gray);
            padding: 5px 10px;
            border-radius: 15px;
            color: var(--white-clr);
        }

        .online.classviewWrapper h3 small {
            font-size: 12px;
            font-weight: 600;
            background-color: var(--active);
            padding: 5px 10px;
            border-radius: 15px;
            color: var(--white-clr);
        }

        @media only screen and (max-width: 460px) {
            .classCategoryoption h3 {
                font-size: 15px !important;
            }

            .point-icon {
                display: flex;
                flex-basis: 100%;
                justify-content: center;
            }

            .chat-section {
                padding: 1.5em !important;
            }
        }

        @media only screen and (max-width: 764px) {
            section.alloption {
                height: 550px;
                top: 0 !important;
            }
        }

        @media only screen and (max-width: 767px) {
            section.alloption {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
            }

            button.closePopup {
                right: 13px;
                top: 5px;
            }
        }

        .active-tab {
            background-color: var(--lite-blue) !important;
            border: 2px solid var(--banner-color) !important;
            background-size: 50px 50px !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
        }

        .profileviewer {
            flex-direction: column;
            align-items: center;
            padding: 30px;
            background: var(--lite-rose);
            border-radius: 5px;
        }

        .studentName {
            font-size: 16px;
            font-weight: 600;
            margin-top: 10px;
        }

        .table {
            border: 1px solid #e1e1e1;
        }

        .table td {
            border-bottom: 1px solid #e1e1e1 !important;
            text-align: left;
            word-break: break-all;
            /*    			 max-width: 100px; */
        }

        .classviewWrapper:hover {
            background-color: var(--banner-color);
            color: var(--white-clr);
        }

        .list-select {
            border: 5px solid #180660;
        }

        .announce-card {
            background-color: var(--modal-box);
            padding: 30px 20px;
            margin-top: 15px;
            border-radius: 8px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            text-align: center;
            margin-left: 20px;
            margin-right: 20px;
        }

        [dir="rtl"] .classviewWrapper h3 .offline {
            padding: 5px 8px;
        }

        .pdf-bg {
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            padding: 15px 4px !important;
            border: 2px solid #ddd;
        }

        .paperWrap {
            padding: 0px;
            background-color: var(--white-clr);
            border-radius: 8px;
            height: calc(100vh - 39vh);
            overflow-y: auto;
        }

        .my-frame {
            width: 100%;
            /* padding: 15px 35px 15px 0; */
            height: 700px;
            overflow-x: auto;
            padding: 20px 15px 20px 15px;
        }

        .controls {
            padding: 15px;
            background-color: var(--white-clr);
            border-radius: 0 0 10px 10px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            max-width: 100%;
            margin: 0 auto;
            margin-top: -5px;
            position: relative;
        }

        .controls ul {
            padding: 0;
            margin: 0;
            display: flex;
            list-style: none;
            justify-content: center;
            grid-gap: 50px;
        }

        .controls ul li i {
            font-size: 20px;
            color: var(--black-clr);
        }

        .video-name {
            width: 100%;
            font-size: 16px;
            color: var(--banner-color);
            margin-top: 10px;
            font-weight: 600;
            text-align: center;
        }

        .bg-blue h6 {
            color: var(--black-clr);
            font-size: 20px;
            font-weight: 600;
        }

        .session-links {
            font-size: 14px;
            display: inline-block;
            position: relative;
            text-align: center;
            border: 0;
            padding: 10px 20px;
            border-radius: 8px;
            float: left;
            color: var(--black-clr);
        }

        .sessions {
            background-color: var(--lite-blue);
            color: var(--black-clr);
            margin-right: 10px;
            margin-top: 8px;
            border: 2px solid var(--lite-blue);
        }

        .intrlinks {
            background-color: var(--lite-rose);
            margin-right: 10px;
            margin-top: 8px;
            color: var(--black-clr);
            border: 2px solid var(--lite-rose);
        }

        .extlinks {
            background-color: var(--lite-blue);
            color: var(--black-clr);
            border: 2px solid var(--lite-blue);
            margin-right: 10px;
            margin-top: 8px;
        }

        .drk-bl {
            background: var(--span-text) !important;
        }

        .chatboxs {
            width: 100%;
            height: 300px;
            margin: 0 20px 0 0;
            position: relative;
            display: flex;
            flex-flow: column;
            border-radius: 10px;
            background-color: var(--white-clr);
            bottom: 0;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
        }

        .chatboxs1 {
            /*             width: 100%; */
            height: 300px;
            /*             margin: 0 20px 0 0; */
            position: relative;
            display: flex;
            flex-flow: column;
            border-radius: 10px;
            background-color: var(--white-clr);
            bottom: 0;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            left: 30px;
        }

        .chatbox-top {
            position: relative;
            display: flex;
            padding: 20px 0;
            border-radius: 10px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
        }

        .chat-partner-name,
        .chat-group-name {
            flex: 1;
            padding: 0 0 0 15px;
            font-size: 15px;
            font-weight: bold;
            color: var(--white-clr);
            transition: .1s ease-out;
        }

        .away {
            background-color: var(--active);
        }

        .status {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin: 0 3px 0 0;
        }

        .chat-messages {
            padding: 20px;
            overflow: auto;
            display: flex;
            flex-flow: row wrap;
            align-content: flex-start;
            flex: 1;
            border-radius: 0 0 10px 10px;
        }

        .btn-exercise {
            border: 1px solid var(--modal-box);
            margin-top: 10px;
            background-color: var(--white-clr);
            color: var(--black-clr);
            width: 100%;
            height: 50px;
            font-weight: 400 !important;
            margin-top: 10px;
            font-size: 16px !important;
            text-align: left !important;
            display: flex;
            align-items: center;
            border-radius: 25px;
            padding: 20px;
        }

        .chat-section {
            margin-top: 3em;
            padding: 3em;
            background-color: var(--lite-rose);
        }

        .btn-exercise:hover {
            background-color: var(--lite-blue);
            color: var(--black-clr);
            border: 1px solid var(--banner-color);
        }

        [dir="rtl"] .lbl {
            margin-right: .75rem;
        }

        [dir="rtl"] .chatboxs {
            margin: 0;
        }

        .bookmark {
            background-color: var(--span-text);
            padding: 10px;
            border-radius: 8px;
            color: var(--white-clr);
            font-weight: 500;
            cursor: pointer;
        }

        .bookmark:hover {
            color: var(--white-clr) !important;
        }

        .date-picker {
            background-color: var(--white-clr) !important;
        }

        .form-group {
            margin-bottom: 0 !important;
        }

        .view {
            padding: 4px;
            border: 1px solid var(--black-clr);
        }

        @media (min-width: 576px) {
            .modal-dialog {
                max-width: 535px;
                margin: 1.75rem auto;

            }

        }

        .modal-sec iframe {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            width: 100%;
        }

        .modal-header .btn-close {
            margin: 0 !important;
        }

        .things td {
            font-size: 18px;
            font-weight: 500;
            border: none !important;
        }

        .eassignment-text {
            padding: 20px;
            background-color: var(--modal-box);
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .eassignment-table-head {
            color: var(--black-clr);
            font-weight: 600 !important;
            width: 150px;
            line-height: 1;
        }

        .things tr {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        [dir="rtl"] div.dataTables_wrapper div.dataTables_filter {
            text-align: left;
        }

        .action-buttons {
            text-align: left;
        }

        .action-buttons i {
            color: var(--banner-color);
            background-color: var(--white-clr);
            padding: 10px;
            border-radius: 25px;
            width: 37px;
            text-align: center;
        }

        .download i {
            color: var(--banner-color);
            background-color: var(--white-clr);
            padding: 10px;
            border-radius: 25px;
            width: 37px;
        }

        .addBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40px;
        }

        .modal-backdrop.show {
            opacity: .5;
            display: none;
        }

        .table-responsive {
            overflow-x: initial;
            -webkit-overflow-scrolling: touch;
        }

        .speech-card {
            background-color: var(--modal-box);
            padding: 25px;
            margin-top: 20px;
            border-radius: 12px;
        }

        .filter-card {
            background-color: var(--modal-box);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 1px 4px 8px #b9b8bb6e !important;
            margin-bottom: 3em;
        }

        .filter-card-1 {
            background-color: var(--white-clr);
            border-radius: 15px;
            padding: 20px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            margin-bottom: 3em;
        }

        .sorting_1 {
            text-align: center;
        }

        .contentContainer {
            margin-bottom: 10rem;
        }

        .red {
            color: red !important;
        }

        .selectAll {
            width: 15px !important;
            margin-right: 2px;
        }

        .sorting {
            width: 40px !important;
        }

        .sorting_asc {
            width: 40px !important;
        }

        .sorting_desc {
            width: 40px !important;
        }

        .check-box {
            float: left;
            margin-left: 6px;
        }

        .modal-open {
            padding: 0 !important;
        }

        .student {
            margin-bottom: 8rem;
        }

        .selectClass {
            background-color: var(--white-clr);
        }

        .speechWordBtn {
            width: 100px !important;
            height: 37px !important;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0px !important;
            background-color: var(--span-text) !important;
            color: var(--white-clr) !important;
        }

        .dataTable {
            background-color: white;
        }

        #voting_table thead {
            border: none !important;
        }

        #voting_table td {
            border-bottom: none !important;
        }

        .sorting_1 thead {
            border: none !important;
        }

        .sorting_1 td {
            border-bottom: none !important;
        }

        [dir="rtl"] .check-box {
            float: right;
            margin-right: 24px;
        }

        [dir="rtl"] .special-icon {
            float: right;
        }

        .liveshare {
            border: none !important;
        }

        .chat-view-container {
            padding: 30px !important;
            width: 30% !important;
        }

        .chat-view-container {
            position: fixed;
            z-index: 1000;
            top: 60px;
            bottom: 0;
            padding: 40px;
            background: #fff;
            right: 0;
            box-shadow: -15px 0 25px #00000014;
            width: 25%;
            display: flex;
            flex-direction: column;
        }

        .chatDetails {
            flex-grow: 1;
            flex-basis: 0;
            max-height: 90px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: solid 1px #ccc;
            padding-bottom: 25px;
        }

        .chatimgname {
            display: flex;
            align-items: center;
        }

        .chatimgname .avatar {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .chatimgname h4 {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin-bottom: 0;
        }

        .chatView {
            flex-grow: 1;
            flex-basis: 0;
            position: relative;
        }

        .prevChat {
            position: absolute;
            top: 20px;
            bottom: 20px;
            left: 0;
            right: 0;
            overflow-y: auto;
            padding: 0;
            list-style: none;
            margin: 0;
            padding-right: 5px;
        }

        .prevChat li.send {
            text-align: right;
        }

        .prevChat li {
            padding: 5px 0;
        }

        .chattype {
            flex-grow: 1;
            flex-basis: 0;
            max-height: 50px;
            position: relative;
        }

        .chatimgname h4 small {
            margin-top: 7px;
            font-size: 12px;
            font-weight: 500;
        }

        .prevChat span {
            padding: 9px 15px;
            border-radius: 5px;
            display: inline-block;
            background: #fff;
            max-width: 80%;
            border: solid 2px #d8d8d8;
            word-wrap: break-word;
            text-align: left;
        }

        .prevChat li.reply span {
            text-align: left;
            border: none;
            background: linear-gradient(to right, #7d52ab, #e962ab);
            color: #fff;
        }

        @media only screen and (max-width:992px) {
            .chat-view-container {
                width: 35% !important;
            }
        }

        @media only screen and (max-width: 768px) {
            .chat-view-container {
                width: 45% !important;
            }
        }

        @media only screen and (max-width: 576px) {
            .chat-view-container {
                width: 60% !important;
            }
        }

        @media only screen and (max-width: 425px) {
            .chat-view-container {
                width: 75% !important;
            }
        }

        .chosen-container-single .chosen-single {
            height: 52px !important;
            display: flex !important;
            align-items: center;
            justify-content: flex-start;
        }

        .chosen-container-single .chosen-single span {
            margin-right: 0 !important;
            font-size: 16px;
        }

        .chosen-container-single .chosen-single div b {
            margin-top: 12px;
        }

        /*...........................................................exam...................*/

        .timer {
            justify-content: center;
            display: flex;
            align-items: center;
            padding-bottom: 40px;
        }

        .cd-box {
            padding: 0 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .strings {
            background-color: var(--lite-rose);
            border-radius: 8px;
            padding: 3px 10px;
            font-size: 15px;
            font-weight: 500;
            position: absolute;
            z-index: 2;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
        }

        .numbers {
            background-color: var(--white-clr);
            padding: 9px 2px;
            position: relative;
            width: 90px;
            top: 25px;
            z-index: 1;
            border-radius: 6px;
            height: 50px;
            font-size: 27px;
            font-weight: 600;
        }

        .number {
            justify-content: center;
            display: flex;
            align-items: center;
            margin-top: -8px;
        }

        /*         
        .month {
            color: var(--banner-color);
            font-weight: 600;
            font-size: 28px;
        } */

        .test-exam-sec {
            padding-right: 10px;
        }

        .box {
            border-radius: 17px;
            background-color: var(--modal-box);
            border-top: 7px solid var(--span-text);
        }

        .box-top-clr {
            height: 5px;
            background-color: var(--span-text);
            border-radius: 25px;
        }

        .box-text {
            padding: 20px;
        }

        .box-bottom {
            border-radius: 17px;
            background-color: var(--modal-box);
            margin-top: 15px;
            padding: 30px 50px;
        }

        .box-exam-inner {
            background-color: var(--white-clr);
            border-radius: 25px;
            padding: 10px 25px;
            border: 1px solid var(--lite-gray);
        }

        .exam-type {
            color: var(--banner-color);
            font-size: 24px;
            font-weight: 600;
        }

        .button-6 {
            background-color: var(--span-text);
            border: 2px solid #e962ab;
            border-radius: 25px;
        }

        .end_button {
            padding-top: 15px;
        }

        .exam-mark-box {
            border: 1px solid var(--lite-gray);
            border-radius: 20px;
            background-color: var(--white-clr);
        }

        .exam-mark-box h4 {
            font-size: 16px;
            font-weight: 600;
            border: none;
            padding: 18px 18px;
            background: var(--banner-color);
            margin-bottom: 0 !important;
            color: #fff;
            border-radius: 20px 20px 0 0;
        }

        .btn-round {
            border-radius: 10px;
            color: #000000;
            /* margin-left: 1px; */
            border: 2px solid #f7d1e6;
            /* height: 35px; */
            min-width: 40px;
            background-color: var(--lite-rose);
            font-weight: 600;
            margin-right: 10px;
        }

        .examQustGrpList {
            padding: 18px;
        }

        center .exam-type-mark {
            font-weight: 600;
        }

        .exam-head-sec {
            font-size: 20px;
            font-weight: 700;
        }

        .exam-middle-sec {
            font-size: 16px;
            font-weight: 600;
        }

        .exam-bottom-sec {
            font-weight: 200;
        }

        .groupList input[type="radio"] {
            width: auto !important;
            max-width: auto !important;
        }

        .hidden {
            display: none;
        }

        .addBtns {
            margin-top: 5px;
        }

        .view-sec {
            border: none !important;
        }

        .modal-btn-align {
            text-align: right;
        }

        @media only screen and (max-width: 576px) {
            .modal-btn-align {
                text-align: center;
                margin-bottom: 5px;
            }
        }

        .info-card {
            padding-bottom: 5em !important;
        }

        .card-mobile {
            border: none !important;
        }

        .card-mobile h4 {
            background-color: var(--banner-color);
            color: var(--white-clr);
            padding: 10px;
            font-size: 18px;
            border-radius: 8px;
        }

        .btn-outline-info:hover {
            color: #000;
            background-color: transparent !important;
            border-color: #0dcaf0;
            margin: 2px;
        }

        .download i {
            color: var(--banner-color);
            background-color: var(--white-clr);
            padding: 10px;
            border-radius: 25px;
            width: 37px;
        }

        .addBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40px;
        }

        .modal-backdrop.show {
            opacity: .5;
            display: none;
        }

        .table-responsive {
            overflow-x: initial;
            -webkit-overflow-scrolling: touch;
        }

        .speech-card {
            background-color: var(--modal-box);
            padding: 25px;
            margin-top: 20px;
            border-radius: 12px;
        }

        .filter-card {
            background-color: var(--modal-box);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 1px 4px 8px #b9b8bb6e;
            margin-bottom: 3em;
        }

        .sorting_1 {
            text-align: center;
        }

        .contentContainer {
            margin-bottom: 10rem;
        }

        .red {
            color: red;
        }

        .selectAll {
            width: 15px !important;
            margin-right: 2px;
        }

        .sorting {
            width: 40px !important;
        }

        .sorting_asc {
            width: 40px !important;
        }

        .sorting_desc {
            width: 40px !important;
        }

        .check-box {
            float: left;
            margin-left: 6px;
        }

        .modal-open {
            padding: 0 !important;
        }

        .student {
            margin-bottom: 8rem;
        }

        .selectClass {
            background-color: var(--white-clr);
        }

        .speechWordBtn {
            width: 100px !important;
            height: 37px !important;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0px !important;
            background-color: var(--span-text) !important;
            color: var(--white-clr) !important;
        }

        .dataTable {
            background-color: white;
        }

        #voting_table thead {
            border: none !important;
        }

        #voting_table td {
            border-bottom: none !important;
        }

        .sorting_1 thead {
            border: none !important;
        }

        .sorting_1 td {
            border-bottom: none !important;
        }

        [dir="rtl"] .check-box {
            float: right;
            margin-right: 24px;
        }

        [dir="rtl"] .special-icon {
            float: right;
        }

        .liveshare {
            border: none !important;
        }

        .chat-view-container {
            padding: 30px !important;
            width: 30% !important;
        }

        .chat-view-container {
            position: fixed;
            z-index: 1000;
            top: 60px !important;
            height: "100vh";
            bottom: 0;
            padding: 40px;
            background: #fff;
            right: 0;
            box-shadow: -15px 0 25px #00000014;
            width: 25%;
            display: flex;
            flex-direction: column;
        }

        .chatDetails {
            flex-grow: 1;
            flex-basis: 0;
            max-height: 90px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: solid 1px #ccc;
            padding-bottom: 25px;
        }

        .chatimgname {
            display: flex;
            align-items: center;
        }

        .chatimgname .avatar {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .chatimgname h4 {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin-bottom: 0;
        }

        .chatView {
            flex-grow: 1;
            flex-basis: 0;
            position: relative;
        }

        .prevChat {
            position: absolute;
            top: 20px;
            bottom: 20px;
            left: 0;
            right: 0;
            overflow-y: auto;
            padding: 0;
            list-style: none;
            margin: 0;
            padding-right: 5px;
        }

        .prevChat li.send {
            text-align: right;
        }

        .prevChat li {
            padding: 5px 0;
        }

        .chattype {
            flex-grow: 1;
            flex-basis: 0;
            max-height: 50px;
            position: relative;
        }

        .chatimgname h4 small {
            margin-top: 7px;
            font-size: 12px;
            font-weight: 500;
        }

        .prevChat span {
            padding: 9px 15px;
            border-radius: 5px;
            display: inline-block;
            background: #fff;
            max-width: 80%;
            border: solid 2px #d8d8d8;
        }

        .prevChat li.reply span {
            text-align: left;
            border: none;
            background: linear-gradient(to right, #7d52ab, #e962ab);
            color: #fff;
        }

        @media only screen and (max-width:992px) {
            .chat-view-container {
                width: 35% !important;
            }
        }

        @media only screen and (max-width: 768px) {
            .chat-view-container {
                width: 45% !important;
            }
        }

        @media only screen and (max-width: 576px) {
            .chat-view-container {
                width: 60% !important;
            }
        }

        @media only screen and (max-width: 425px) {
            .chat-view-container {
                width: 75% !important;
            }
        }

        .chosen-container-single .chosen-single {
            height: 52px !important;
            display: flex !important;
            align-items: center;
            justify-content: flex-start;
            height: 50px !important;
            border-radius: 8px !important;
            background: var(--white-clr) !important;
            border-color: #c4c4c4 !important;
        }

        .chosen-container-single .chosen-single span {
            margin-right: 0 !important;
            font-size: 16px;
        }

        .chosen-container-single .chosen-single div b {
            margin-top: 12px;
        }

        .addBtns {
            margin-top: 5px;
        }

        .view-sec {
            border: none !important;
            padding: 0 !important;
        }

        .modal-btn-align {
            text-align: right;
        }

        @media only screen and (max-width: 576px) {
            .modal-btn-align {
                text-align: center;
                margin-bottom: 5px;
            }
        }

        .info-card {
            padding-bottom: 5em !important;
        }

        .card-mobile {
            border: none !important;
        }

        .card-mobile h4 {
            background-color: var(--banner-color);
            color: var(--white-clr);
            padding: 10px;
            font-size: 18px;
            border-radius: 8px;
        }

        .btn-outline-info:hover {
            color: var(--black-clr);
            background-color: transparent !important;
        }

        .institutionReg {
            border: 1px solid var(--lite-gray);
            border-radius: 6px;
        }

        .form-head {
            background-color: var(--banner-color);
            padding: 10px;
            color: var(--white-clr);
            font-size: 18px;
            margin-top: 15px;
            border-radius: 8px;
        }

        .change-password-card {
            border: 1px solid var(--lite-gray);
            padding: 15px;
            margin-top: 20px;
            border-radius: 8px;
        }

        .modal-body h4 {
            font-size: 14px;
            font-weight: 600;
            border: none;
            padding: 9px;
            background: var(--banner-color);
            margin-bottom: 15px;
            margin-top: 10px;
            color: var(--white-clr);
            border-radius: 5px;
        }

        .itemContainer ul {
            padding-left: 0;
            list-style: none;
            border: solid 1px #ccc;
            padding: 15px !important;
            max-height: 280px;
            overflow-y: auto;
        }

        .itemexchanger {
            max-width: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .exchangeWrap {
            display: flex;
            width: 100%;
        }

        .itemexchanger,
        .itemContainer {
            flex-grow: 1;
            flex-basis: 0;
        }

        .itemexchanger .btn-btn-info {
            background-color: var(--span-text);
            border: none;
            color: var(--white-clr);
            margin: 5px;
            width: 40px;
            height: 30px;
            border-radius: 3px;
        }

        .itemContainer ul li {
            margin-bottom: 5px;
        }

        .itemContainer ul li span {
            display: block;
            padding: 5px;
            background-color: var(--modal-box);
            color: var(--black-clr);
            font-weight: 500;
        }

        .hidden {
            display: none;
        }

        .modal-xl {
            max-width: 90%;
        }

        .modal-lg {
            max-width: 60%;
        }

        .input-group-text {
            padding: 1.375rem 0.75rem;
        }

        .lessonOther {
            background-color: var(--modal-box) !important;
            padding: 15px;
            border-radius: 8px !important;
            margin: 10px 0;
        }

        .check-reservation {
            padding: 7px 7px !important;
        }

        /* .btn-icon {
            border: none;
            padding: 3px 8px 0px 8px !important;
        } */

        .cards tbody tr {
            float: left;
            width: 19rem;
            margin: 0.5rem;
            border-radius: 15px;
            padding: 10px 10px;
        }

        .cards tbody td {
            display: block;
            padding-left: 15px;
        }

        .cards thead {
            display: none;
        }

        .cards td:before {
            content: attr(data-label);
            position: relative;
            float: left;
            color: var(--black-clr);
            min-width: 8rem;
            margin-left: 0;
            margin-right: 1rem;
            text-align: left;
        }

        /* tr.selected td:before {
color: var(--lite-gray-1)
} */

        .table .avatar {
            width: 50px;
        }

        .cards .avatar {
            width: 150px;
            height: 150px;
            margin: 15px;
        }

        .contentContainer table th {
            border: none;
            background: var(--banner-color);
            padding: 10px 0.75rem;
            color: var(--white-clr);
        }

        .page-item.active .page-link {
            z-index: 0;
            color: var(--white-clr);
            background-color: var(--banner-color) !important;
            border-color: #7d52ab !important;
        }

        td {
            border-bottom: 1px solid #ffffff !important;
        }

        .odd {
            background-color: var(--lite-blue);
        }

        .even {
            background-color: var(--lite-rose);
        }

        .cards tbody {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .add {
            background-color: var(--lite-gray-1);
            border-radius: 50%;
            padding: 5px;
            margin-left: 8px;
        }

        .institute_name {
            font-weight: 600;
        }

        /*         .breadcrumb { */
        /*             justify-content: center; */
        /*             font-size: 18px; */
        /*             font-weight: 600; */
        /*             align-items: center; */
        /*         } */

        .academic_year {
            color: var(--span-text);
        }

        .breadcrumb li {
            margin-right: 10px;
        }

        .btn-wrapper {
            background-color: var(--banner-color);
            padding: 15px;
            margin-top: 15px;
            margin-bottom: 25px;
        }

        .bread-icon-sec {
            display: flex;
            align-items: center;
        }

        /* 
        footer {
            text-align: center;
            background-color: var( --lite-blue);
            padding: 20px;
            margin-top: 5rem;
            position: fixed;
            bottom: 0;
            width: 100%;
        } */

        .modal-header {
            border-bottom: none !important;
        }

        .modal-footer {
            border-top: none !important;
        }

        .modal-content {
            padding: 10px;
        }

        .dtactions {
            display: flex;
            justify-content: end;
        }

        .dataTables_filter input {
            padding: 3px 0;
        }

        .btn-sm {
            background-color: var(--lite-rose);
            border: none;
            padding: 3px 8px 0px 8px !important;
        }

        .btn-sm i {
            color: var(--black-clr);
            font-size: 21px;
        }

        .btn-sm:hover {
            background-color: var(--lite-blue) !important;
        }

        .btn-primary {
            background-color: var(--lite-rose);
            border: none;
            padding: 10px !important;
        }

        .btn-primary:hover {
            background-color: var(--lite-blue) !important;
        }

        .navItem h3 small {
            display: block;
            margin-top: 5px;
            display: none;
        }

        .dashboard-menu-text {
            font-size: 20px;
            color: var(--white-clr);
        }

        .dashboard-menu-icon {
            width: 55px;
            height: auto;
        }

        .dashboard-head-sec {
            line-height: .8;
        }

        .mainNav {
            margin-top: 30px;
        }

        .chartbtn {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .counting {
            font-size: 20px;
            color: var(--span-text);
            font-weight: 600;
        }

        .card-bars {
            margin-top: 4em;
        }

        .subnav-cards {
            display: flex;
            align-items: center;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .subnav-img {
            background-color: var(--lite-blue);
            padding: 15px;
            border-radius: 25px;
        }

        .sub-text {
            font-size: 20px;
            font-weight: 600;
            color: var(--black-clr);
        }

        .sub-text-1 {
            font-size: 18px;
            color: var(--span-text);
            padding-top: 10px;
        }

        [dir="rtl"] .add-on h5 {
            margin-right: 0.25rem;
        }

        [dir="rtl"] .dashboard-head-sec {
            margin-right: 1rem;
        }

        .noOfAlert {
            background: var(--white-clr);
            text-align: center;
            width: 24px;
            border-radius: 50%;
            color: var(--black-clr);
            font-weight: bold;
            margin-left: 33px;
            margin-bottom: 31px;
            position: absolute;
        }

        .studentview-select {
            display: inline-block;
            margin-left: 25px;
        }

        .classView select {
            width: 100%;
            color: #000;
            border-radius: 10px;
            -webkit-appearance: none;
            border: solid 2px #fff;
            min-width: 200px;
            position: relative;
        }

        #radio-clr {
            accent-color: var(--span-text);
        }

        .view-option {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .view-option li {
            margin: 10px;
            text-align: center;
        }

        .view-option h3 {
            font-size: 18px !important;
            font-weight: 600 !important;
            color: var(--black-clr) !important;
        }

        .classCategoryoption h3 {
            font-size: 18px !important;
            font-weight: 600 !important;
            color: var(--black-clr) !important;
        }

        section.alloption {
            position: fixed;
            top: 11%;
            left: 2%;
            right: 2%;
            width: auto;
            top: 20%;
            padding: 2%;
            margin: auto;
            max-width: 970px;
            background-color: var(--modal-box);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            border-radius: 8px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
        }

        button.closePopup {
            position: absolute;
            right: 23px;
            top: 17px;
            background: transparent;
            border: none;
            color: var(--black-clr);
            font-size: 18px;
        }

        .classCategoryoption {
            display: flex;
            justify-content: center;
            margin: 0;
        }

        .classCategoryoption ul {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .classCategoryoption li {
            margin: 10px;
            text-align: center;
        }

        section.alloption ul {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .categoryoption-new {
            border: 2px solid;
            border-radius: 50%;
            padding: 10px;
            width: 45px;
            height: auto;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .classViewContainer {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: center;
            padding: 40px 0;
        }

        .classviewWrapper {
            padding: 25px 15px;
            border-radius: 20px;
            width: 300px;
            background: var(--lite-blue);
            margin: 15px;
            display: flex;
            align-items: center;
            position: relative;
            /*overflow: hidden;*/
            transition: all ease-in-out 0.4s;
        }

        .studentImage {
            border-radius: 8px;
            background-repeat: no-repeat;
            background-position: top;
            background-size: cover;
            box-shadow: none;
            border: 2px solid var(--white-clr);
        }

        .studName {
            font-size: 16px;
            font-weight: 600;
        }

        .classviewWrapper h3 .offline {
            font-size: 12px;
            font-weight: 600;
            background-color: var(--lite-gray);
            padding: 5px 10px;
            border-radius: 15px;
            color: var(--white-clr);
        }

        .online.classviewWrapper h3 small {
            font-size: 12px;
            font-weight: 600;
            background-color: var(--active);
            padding: 5px 10px;
            border-radius: 15px;
            color: var(--white-clr);
        }

        @media only screen and (max-width: 460px) {
            .classCategoryoption h3 {
                font-size: 15px !important;
            }

            .point-icon {
                display: flex;
                flex-basis: 100%;
                justify-content: center;
            }

            .chat-section {
                padding: 1.5em !important;
            }
        }

        @media only screen and (max-width: 764px) {
            section.alloption {
                height: 550px;
            }
        }

        @media only screen and (max-width: 767px) {
            section.alloption {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
            }

            button.closePopup {
                right: 13px;
                top: 5px;
            }
        }

        .active-tab {
            background-color: var(--lite-blue) !important;
            border: 2px solid var(--banner-color) !important;
            background-size: 50px 50px !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
        }

        .profileviewer {
            flex-direction: column;
            align-items: center;
            padding: 30px;
            background: var(--lite-rose);
            border-radius: 5px;
        }

        .studentName {
            font-size: 16px;
            font-weight: 600;
            margin-top: 10px;
        }

        .table {
            /*             border: 1px solid #e1e1e1; */
            border: 1px solid #ddd;
            border-radius: 10px !important;
            overflow: hidden !important;
            box-shadow: 1px 4px 8px #b9b8bb6e !important;
        }

        .table td {
            border-bottom: 1px solid #e1e1e1 !important;
            text-align: left;
        }

        .classviewWrapper:hover {
            background-color: var(--banner-color);
            color: var(--white-clr);
        }

        .list-select {
            border: 5px solid #180660;
        }

        .announce-card {
            background-color: var(--modal-box);
            padding: 30px 20px;
            margin-top: 15px;
            border-radius: 8px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            text-align: center;
            margin-left: 20px;
            margin-right: 20px;
        }

        [dir="rtl"] .classviewWrapper h3 .offline {
            padding: 5px 8px;
        }

        .pdf-bg {
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            padding: 15px 4px !important;
            border: 2px solid #ddd;
        }

        .paperWrap {
            padding: 0px;
            background-color: var(--white-clr);
            border-radius: 8px;
            height: calc(100vh - 39vh);
            overflow-y: auto;
        }

        .my-frame {
            width: 100%;
            /* padding: 15px 35px 15px 0; */
            height: 700px;
            overflow-x: auto;
            padding: 20px 15px 20px 15px;
        }

        .controls {
            padding: 15px;
            background-color: var(--white-clr);
            border-radius: 0 0 10px 10px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            max-width: 100%;
            margin: 0 auto;
            margin-top: -5px;
            position: relative;
        }

        /*         .controls ul { */
        /*             padding: 0; */
        /*             margin: 0; */
        /*             display: flex; */
        /*             list-style: none; */
        /*             justify-content: space-around; */
        /*         } */

        .controls ul li i {
            font-size: 20px;
            color: var(--black-clr);
        }

        .video-name {
            width: 100%;
            font-size: 16px;
            color: var(--banner-color);
            margin-top: 10px;
            font-weight: 600;
            text-align: center;
        }

        .bg-blue h6 {
            color: var(--black-clr);
            font-size: 20px;
            font-weight: 600;
        }

        .session-links {
            font-size: 14px;
            display: inline-block;
            position: relative;
            text-align: center;
            border: 0;
            padding: 10px 20px;
            border-radius: 8px;
            float: left;
            color: var(--black-clr);
        }

        .sessions {
            background-color: var(--lite-blue);
            color: var(--black-clr);
            margin-right: 10px;
            margin-top: 8px;
            border: 2px solid var(--lite-blue);
        }

        .intrlinks {
            background-color: var(--lite-rose);
            margin-right: 10px;
            margin-top: 8px;
            color: var(--black-clr);
            border: 2px solid var(--lite-rose);
        }

        .extlinks {
            background-color: var(--lite-blue);
            color: var(--black-clr);
            border: 2px solid var(--lite-blue);
            margin-right: 10px;
            margin-top: 8px;
        }

        .drk-bl {
            background: var(--span-text) !important;
        }

        .chatboxs {
            width: 100%;
            height: 300px;
            margin: 0 20px 0 0;
            position: relative;
            display: flex;
            flex-flow: column;
            border-radius: 10px;
            background-color: var(--white-clr);
            bottom: 0;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
        }

        .chatbox-top {
            position: relative;
            display: flex;
            padding: 20px 0;
            border-radius: 10px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
        }

        .chat-partner-name,
        .chat-group-name {
            flex: 1;
            padding: 0 0 0 15px;
            font-size: 15px;
            font-weight: bold;
            color: #000;
            transition: .1s ease-out;
        }

        .away {
            background-color: var(--active);
        }

        .status {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin: 0 3px 0 0;
        }

        .chat-messages {
            padding: 20px;
            overflow: auto;
            display: flex;
            flex-flow: row wrap;
            align-content: flex-start;
            flex: 1;
            border-radius: 0 0 10px 10px;
        }

        .btn-exercise {
            border: 1px solid var(--modal-box);
            margin-top: 10px;
            background-color: var(--white-clr);
            color: var(--black-clr);
            width: 100%;
            height: 50px;
            font-weight: 400 !important;
            margin-top: 10px;
            font-size: 16px !important;
            text-align: left !important;
            display: flex;
            align-items: center;
            border-radius: 25px;
            padding: 20px;
        }

        .chat-section {
            margin-top: 3em;
            padding: 3em;
            background-color: var(--lite-rose);
        }

        .btn-exercise:hover {
            background-color: var(--lite-blue);
            color: var(--black-clr);
            border: 1px solid var(--banner-color);
        }

        [dir="rtl"] .lbl {
            margin-right: .75rem;
        }

        [dir="rtl"] .chatboxs {
            margin: 0;
        }

        .bookmark {
            background-color: var(--span-text);
            padding: 10px;
            border-radius: 8px;
            color: var(--white-clr);
            font-weight: 500;
            cursor: pointer;
        }

        .bookmark:hover {
            color: var(--white-clr) !important;
        }

        .date-picker {
            background-color: var(--white-clr) !important;
        }

        .form-group {
            margin-bottom: 0 !important;
        }

        .view {
            padding: 4px;
            border: 1px solid var(--black-clr);
        }

        @media (min-width: 576px) {
            .modal-dialog {
                max-width: 535px;
                margin: 1.75rem auto;
            }
        }

        .modal-sec iframe {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            width: 100%;
        }

        .modal-header .btn-close {
            margin: 0 !important;
        }

        .things td {
            font-size: 18px;
            font-weight: 500;
            border: none !important;
        }

        .eassignment-text {
            padding: 20px;
            background-color: var(--modal-box);
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .eassignment-table-head {
            color: var(--black-clr);
            font-weight: 600 !important;
            width: 150px;
            line-height: 1;
        }

        .things tr {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        [dir="rtl"] div.dataTables_wrapper div.dataTables_filter {
            text-align: left;
        }

        .action-buttons {
            text-align: left;
        }

        .action-buttons a {
            vertical-align: middle
        }

        .action-buttons i {
            color: var(--banner-color);
            background-color: var(--white-clr);
            padding: 10px;
            border-radius: 25px;
            width: 37px;
            text-align: center;
            margin-bottom: 5px;
        }

        .download i {
            color: var(--banner-color);
            background-color: var(--white-clr);
            padding: 10px;
            border-radius: 25px;
            width: 37px;
        }

        .addBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40px;
        }

        .modal-backdrop.show {
            opacity: .5;
            display: none;
        }

        .table-responsive {
            overflow-x: initial;
            -webkit-overflow-scrolling: touch;
        }

        .speech-card {
            background-color: var(--modal-box);
            padding: 25px;
            margin-top: 20px;
            border-radius: 12px;
        }

        .filter-card {
            background-color: var(--modal-box);
            border-radius: 15px;
            padding: 20px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            margin-bottom: 3em;
        }

        .sorting_1 {
            text-align: center;
        }

        .contentContainer {
            margin-bottom: 10rem;
        }

        .red {
            color: red;
        }

        .selectAll {
            width: 15px !important;
            margin-right: 2px;
        }

        .sorting {
            width: 40px !important;
        }

        .sorting_asc {
            width: 40px !important;
        }

        .sorting_desc {
            width: 40px !important;
        }

        .check-box {
            float: left;
            margin-left: 6px;
        }

        .modal-open {
            padding: 0 !important;
        }

        .student {
            margin-bottom: 8rem;
        }

        .selectClass {
            background-color: var(--white-clr);
        }

        .speechWordBtn {
            width: 100px !important;
            height: 37px !important;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0px !important;
            background-color: var(--span-text) !important;
            color: var(--white-clr) !important;
        }

        .dataTable {
            background-color: white;
        }

        #voting_table thead {
            border: none !important;
        }

        #voting_table td {
            border-bottom: none !important;
        }

        .sorting_1 thead {
            border: none !important;
        }

        .sorting_1 td {
            border-bottom: none !important;
        }

        [dir="rtl"] .check-box {
            float: right;
            margin-right: 24px;
        }

        [dir="rtl"] .special-icon {
            float: right;
        }

        .liveshare {
            border: none !important;
        }

        .chat-view-container {
            padding: 30px !important;
            width: 30% !important;
        }

        .chat-view-container {
            position: fixed;
            z-index: 1000;
            top: 0;
            bottom: 0;
            padding: 40px;
            background: #fff;
            right: 0;
            box-shadow: -15px 0 25px #00000014;
            width: 25%;
            display: flex;
            flex-direction: column;
        }

        .chatDetails {
            flex-grow: 1;
            flex-basis: 0;
            max-height: 90px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: solid 1px #ccc;
            padding-bottom: 25px;
        }

        .chatimgname {
            display: flex;
            align-items: center;
        }

        .chatimgname .avatar {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .chatimgname h4 {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin-bottom: 0;
        }

        .chatView {
            flex-grow: 1;
            flex-basis: 0;
            position: relative;
        }

        .prevChat {
            position: absolute;
            top: 20px;
            bottom: 20px;
            left: 0;
            right: 0;
            overflow-y: auto;
            padding: 0;
            list-style: none;
            margin: 0;
            padding-right: 5px;
        }

        .prevChat li.send {
            text-align: right;
        }

        .prevChat li {
            padding: 5px 0;
        }

        .chattype {
            flex-grow: 1;
            flex-basis: 0;
            max-height: 50px;
            position: relative;
        }

        .chatimgname h4 small {
            margin-top: 7px;
            font-size: 12px;
            font-weight: 500;
        }

        .prevChat span {
            padding: 9px 15px;
            border-radius: 5px;
            display: inline-block;
            background: #fff;
            max-width: 80%;
            border: solid 2px #d8d8d8;
            word-wrap: break-word;
            text-align: left;
        }

        .prevChat li.reply span {
            text-align: left;
            border: none;
            background: linear-gradient(to right, #7d52ab, #e962ab);
            color: #fff;
        }

        @media only screen and (max-width:992px) {
            .chat-view-container {
                width: 35% !important;
            }
        }

        @media only screen and (max-width: 768px) {
            .chat-view-container {
                width: 45% !important;
            }
        }

        @media only screen and (max-width: 576px) {
            .chat-view-container {
                width: 60% !important;
            }
        }

        @media only screen and (max-width: 425px) {
            .chat-view-container {
                width: 75% !important;
            }
        }

        .chosen-container-single .chosen-single {
            height: 52px !important;
            display: flex !important;
            align-items: center;
            justify-content: flex-start;
        }

        .chosen-container-single .chosen-single span {
            margin-right: 0 !important;
            font-size: 16px;
        }

        .chosen-container-single .chosen-single div b {
            margin-top: 12px;
        }

        /*...........................................................exam...................*/

        .timer {
            justify-content: center;
            display: flex;
            align-items: center;
            padding-bottom: 40px;
        }

        .cd-box {
            padding: 0 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .strings {
            background-color: var(--lite-rose);
            border-radius: 8px;
            padding: 3px 10px;
            font-size: 15px;
            font-weight: 500;
            position: absolute;
            z-index: 2;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
        }

        .numbers {
            background-color: var(--white-clr);
            padding: 9px 2px;
            position: relative;
            width: 90px;
            top: 25px;
            z-index: 1;
            border-radius: 6px;
            height: 50px;
            font-size: 27px;
            font-weight: 600;
        }

        .number {
            justify-content: center;
            display: flex;
            align-items: center;
            margin-top: -8px;
        }

        .test-exam-sec {
            padding-right: 10px;
        }

        .box {
            border-radius: 17px;
            background-color: var(--modal-box);
            border-top: 7px solid var(--span-text);
        }

        .box-top-clr {
            height: 5px;
            background-color: var(--span-text);
            border-radius: 25px;
        }

        .box-text {
            padding: 20px;
        }

        .box-bottom {
            border-radius: 17px;
            background-color: var(--modal-box);
            margin-top: 15px;
            padding: 30px 50px;
        }

        .box-exam-inner {
            background-color: var(--white-clr);
            border-radius: 25px;
            padding: 10px 25px;
            border: 1px solid var(--lite-gray);
        }

        .exam-type {
            color: var(--banner-color);
            font-size: 24px;
            font-weight: 600;
        }

        .button-6 {
            background-color: var(--span-text);
            border: 2px solid #e962ab;
            border-radius: 25px;
        }

        .end_button {
            padding-top: 15px;
        }

        .exam-mark-box {
            border: 1px solid var(--lite-gray);
            border-radius: 20px;
            background-color: var(--white-clr);
        }

        .exam-mark-box h4 {
            font-size: 16px;
            font-weight: 600;
            border: none;
            padding: 18px 18px;
            background: var(--banner-color);
            margin-bottom: 0 !important;
            color: #fff;
            border-radius: 20px 20px 0 0;
        }

        .btn-round {
            border-radius: 10px;
            color: #000000;
            /* margin-left: 1px; */
            border: 2px solid #f7d1e6;
            /* height: 35px; */
            min-width: 40px;
            background-color: var(--lite-rose);
            font-weight: 600;
            margin-right: 10px;
        }

        .examQustGrpList {
            padding: 18px;
        }

        center .exam-type-mark {
            font-weight: 600;
        }

        .exam-head-sec {
            font-size: 20px;
            font-weight: 700;
        }

        .exam-middle-sec {
            font-size: 16px;
            font-weight: 600;
        }

        .exam-bottom-sec {
            font-weight: 200;
        }

        .groupList input[type="radio"] {
            width: auto !important;
            max-width: auto !important;
        }

        .hidden {
            display: none;
        }

        .addBtns {
            margin-top: 5px;
        }

        .view-sec {
            border: none !important;
        }

        .modal-btn-align {
            text-align: right;
        }

        @media only screen and (max-width: 576px) {
            .modal-btn-align {
                text-align: center;
                margin-bottom: 5px;
            }
        }

        .info-card {
            padding-bottom: 5em !important;
        }

        .card-mobile {
            border: none !important;
        }

        .card-mobile h4 {
            background-color: var(--banner-color);
            color: var(--white-clr);
            padding: 10px;
            font-size: 18px;
            border-radius: 8px;
        }

        .btn-outline-info:hover {
            color: #000;
            background-color: transparent !important;
            border-color: #0dcaf0;
            margin: 2px;
        }

        .download i {
            color: var(--banner-color);
            background-color: var(--white-clr);
            padding: 10px;
            border-radius: 25px;
            width: 37px;
        }

        .addBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40px;
        }

        .modal-backdrop.show {
            opacity: .5;
            display: none;
        }

        .table-responsive {
            overflow-x: initial;
            -webkit-overflow-scrolling: touch;
        }

        .speech-card {
            background-color: var(--modal-box);
            padding: 25px;
            margin-top: 20px;
            border-radius: 12px;
        }

        .filter-card {
            background-color: var(--modal-box);
            border-radius: 15px;
            padding: 20px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            margin-bottom: 3em;
        }

        .sorting_1 {
            text-align: center;
        }

        .contentContainer {
            margin-bottom: 10rem;
        }

        .red {
            color: red;
        }

        .selectAll {
            width: 15px !important;
            margin-right: 2px;
        }

        .sorting {
            width: 40px !important;
        }

        .sorting_asc {
            width: 40px !important;
        }

        .sorting_desc {
            width: 40px !important;
        }

        .check-box {
            float: left;
            margin-left: 6px;
        }

        .modal-open {
            padding: 0 !important;
        }

        .student {
            margin-bottom: 8rem;
        }

        .selectClass {
            background-color: var(--white-clr);
        }

        .speechWordBtn {
            width: 100px !important;
            height: 37px !important;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0px !important;
            background-color: var(--span-text) !important;
            color: var(--white-clr) !important;
        }

        .dataTable {
            background-color: white;
        }

        #voting_table thead {
            border: none !important;
        }

        #voting_table td {
            border-bottom: none !important;
        }

        .sorting_1 thead {
            border: none !important;
        }

        .sorting_1 td {
            border-bottom: none !important;
        }

        [dir="rtl"] .check-box {
            float: right;
            margin-right: 24px;
        }

        [dir="rtl"] .special-icon {
            float: right;
        }

        .liveshare {
            border: none !important;
        }

        .chat-view-container {
            padding: 30px !important;
            width: 30% !important;
        }

        .chat-view-container {
            position: fixed;
            z-index: 1000;
            top: 0;
            bottom: 0;
            padding: 40px;
            background: #fff;
            right: 0;
            box-shadow: -15px 0 25px #00000014;
            width: 25%;
            display: flex;
            flex-direction: column;
        }

        .chatDetails {
            flex-grow: 1;
            flex-basis: 0;
            max-height: 90px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: solid 1px #ccc;
            padding-bottom: 25px;
        }

        .chatimgname {
            display: flex;
            align-items: center;
        }

        .chatimgname .avatar {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .chatimgname h4 {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin-bottom: 0;
        }

        .chatView {
            flex-grow: 1;
            flex-basis: 0;
            position: relative;
        }

        .prevChat {
            position: absolute;
            top: 20px;
            bottom: 20px;
            left: 0;
            right: 0;
            overflow-y: auto !important;
            padding: 0 !important;
            list-style: none;
            margin: 0 !important;
            padding-right: 5px !important;
        }

        .prevChat li.send {
            text-align: right;
        }

        .prevChat li {
            padding: 5px 0;
        }

        .chattype {
            flex-grow: 1;
            flex-basis: 0;
            max-height: 50px;
            position: relative;
        }

        .chatimgname h4 small {
            margin-top: 7px;
            font-size: 12px;
            font-weight: 500;
        }

        .prevChat span {
            padding: 9px 15px;
            border-radius: 5px;
            display: inline-block;
            background: #fff;
            max-width: 80%;
            border: solid 2px #d8d8d8;
        }

        .prevChat li.reply span {
            text-align: left;
            border: none;
            background: linear-gradient(to right, #7d52ab, #e962ab);
            color: #fff;
        }

        @media only screen and (max-width:992px) {
            .chat-view-container {
                width: 35% !important;
            }
        }

        @media only screen and (max-width: 768px) {
            .chat-view-container {
                width: 45% !important;
            }
        }

        @media only screen and (max-width: 576px) {
            .chat-view-container {
                width: 60% !important;
            }
        }

        @media only screen and (max-width: 425px) {
            .chat-view-container {
                width: 75% !important;
            }
        }

        .chosen-container-single .chosen-single span {
            margin-right: 0 !important;
            font-size: 16px;
        }

        .chosen-container-single .chosen-single div b {
            margin-top: 12px;
        }

        .addBtns {
            margin-top: 5px;
        }

        .view-sec {
            border: none !important;
            padding: 0 !important;
        }

        .modal-btn-align {
            text-align: right;
        }

        @media only screen and (max-width: 576px) {
            .modal-btn-align {
                text-align: center;
                margin-bottom: 5px;
            }
        }

        .info-card {
            padding-bottom: 5em !important;
        }

        .card-mobile {
            border: none !important;
        }

        .card-mobile h4 {
            background-color: var(--banner-color);
            color: var(--white-clr);
            padding: 10px;
            font-size: 18px;
            border-radius: 8px;
        }

        .btn-outline-info:hover {
            color: var(--black-clr);
            background-color: transparent !important;
        }

        .institutionReg {
            border: 1px solid var(--lite-gray);
            border-radius: 6px;
        }

        .form-head {
            background-color: var(--banner-color);
            padding: 10px;
            color: var(--white-clr);
            font-size: 18px;
            margin-top: 15px;
            border-radius: 8px;
        }

        .change-password-card {
            border: 1px solid var(--lite-gray);
            padding: 15px;
            margin-top: 20px;
            border-radius: 8px;
        }

        .modal-body h4 {
            font-size: 14px;
            font-weight: 600;
            border: none;
            padding: 9px;
            background: var(--banner-color);
            margin-bottom: 15px;
            margin-top: 10px;
            color: var(--white-clr);
            border-radius: 5px;
        }

        .itemContainer ul {
            padding-left: 0;
            list-style: none;
            border: solid 1px #ccc;
            padding: 15px !important;
            max-height: 280px;
            overflow-y: auto;
        }

        .itemexchanger {
            max-width: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .exchangeWrap {
            display: flex;
            width: 100%;
        }

        .itemexchanger,
        .itemContainer {
            flex-grow: 1;
            flex-basis: 0;
        }

        .itemexchanger .btn-btn-info {
            background-color: var(--span-text);
            border: none;
            color: var(--white-clr);
            margin: 5px;
            width: 40px;
            height: 30px;
            border-radius: 3px;
        }

        .itemContainer ul li {
            margin-bottom: 5px;
        }

        .itemContainer ul li span {
            display: block;
            padding: 5px;
            background-color: var(--modal-box);
            color: var(--black-clr);
            font-weight: 500;
        }

        .hidden {
            display: none;
        }

        .modal-xl {
            max-width: 90%;
        }

        .modal-lg {
            max-width: 60%;
        }

        .input-group-text {
            padding: 1.375rem 0.75rem;
        }

        .lessonOther {
            background-color: var(--modal-box) !important;
            padding: 15px;
            border-radius: 8px !important;
            margin: 10px 0;
        }

        .check-reservation {
            padding: 7px 7px !important;
        }

        /* .btn-icon {
border: none;
padding: 3px 8px 0px 8px !important;
} */

        .classid_from,
        .classid_to {
            background: linear-gradient(45deg, #e91e63, #9c27b0);
        }

        .classList li {
            min-width: 30%;
            padding: 15px;
            background-color: var(--lite-rose);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px;
            flex: 1;
            transition: all ease-in-out .3s;
            border-radius: 10px;
        }

        .classList li:nth-child(odd) {
            background-color: var(--lite-blue);
        }

        .classList li:nth-child(odd):hover {
            border-right: solid 5px var(--banner-color);
            box-shadow: 0 0 10px #00000026;
        }

        .classList li:hover {
            border-right: solid 5px var(--span-text);
            box-shadow: 0 0 10px #00000026;
        }

        .classList {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }

        .classList li h3 small {
            display: block;
            font-size: 12px;
            color: var(--input-clr);
            font-weight: 600;
        }

        .classList li h3 {
            width: 170px;
            line-height: 1;
        }

        .classList li h3 a {
            color: var(--black-clr);
            font-size: 18px;
            font-weight: 600;
        }

        @media only screen and (max-width: 450px) {
            .classList li {
                min-width: 100%;
            }
        }

        @media only screen and (max-width: 1200px) {
            .action-buttons i {
                margin-bottom: 5px;
            }
        }

        .alert-info {
            color: #055160;
            background-color: #f0f0f0;
            border-color: #f0f0f0;
        }

        table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td.dtr-control:before,
        table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th.dtr-control:before {
            background-color: var(--span-text) !important;
        }

        .card h4 {
            font-size: 14px;
            font-weight: 600;
            border: none;
            padding: 11px;
            background: var(--banner-color);
            margin-bottom: 15px;
            color: #fff;
            margin-top: 10px;
            border-radius: 5px;
        }

        .indexLanguage {
            background-color: var(--white-clr) !important;
        }

        .caste-btn {
            padding: 7px 10px;
        }

        .form-card {
            background-color: var(--white-clr);
            border-radius: 15px;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);
        }

        .top-card {
            background-color: var(--banner-color);
            border-radius: 40px;
            padding: 10px;
            margin: 15px;
        }

        .top-table {
            color: var(--white-clr);
        }

        /* .inner-table {
            color: var( -- --chat-text);
            background-color: var(--white-clr);
            border-radius: 20px;
        } */

        .inner-card {
            border-radius: 30px !important;
            margin-bottom: 0 !important;
        }

        .quick-info {
            background-color: var(--span-text);
            color: var(--white-clr);
        }

        .info-text {
            padding: 6px 39px;
        }

        .upload-btn {
            border-radius: 20px;
            color: var(--white-clr);
        }

        .upload-pic {
            padding: 20px;
        }

        .end-table {
            padding: 11px 44px;
        }

        .button-7 {
            background-color: var(--span-text);
            border: 2px solid var(--span-text);
            border-radius: 25px;
            margin-bottom: 23px;
        }

        span.btn.btn-outline-primary.tabRad {
            margin: 5px;
            width: 130px;
            font-size: 13px;
        }

        .chosen-container-multi,
        .chosen-choices {
            border-radius: 8px;
        }

        .chosen-choices,
        .search-field,
        .chosen-search-input {
            height: 40px;
            padding: 6px 12px !important;
            color: var(--input-clr) !important;
            font-weight: 600 !important;
        }

        .btn-mine {
            padding: 6px 13px !important;
            margin: 15px 0 15px 0 !important;
        }


        .right-f {
            float: right !important;
            background-color: var(--span-text);
        }

        .mtop {
            margin-top: -57px !important;
            margin-right: 0px !important;
        }

        .right-adj1 {
            text-align: right;
        }

        .ml-left {
            margin-left: 18px;
        }

        .btn-info {
            background-color: var(--span-text) !important;
            color: #fff !important;
            border-color: var(--span-text) !important;
        }

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

        .fl-width {
            background-color: var(--banner-color);

            border-radius: 10px;
            margin-bottom: 10px;
        }

        .vdcheck {
            text-align: center;
        }

        .bg-li .list-group-item {
            background-color: var(--lite-rose) !important;
            border: none;
        }

        .btn-success:hover {
            color: #fff;
            background-color: var(--span-text) !important;
            border-color: var(--span-text) !important;
        }

        .review-1 tr:nth-child(even) {
            background: var(--lite-rose) !important;
        }

        .review-1 thead {
            background: var(--lite-rose);
            border: none !important;
        }

        .review-1 tr td {
            border: 1px solid var(--lite-gray) !important;

        }

        .review-1 tr td:first-child {
            font-weight: bold;
        }




        /* DivTable.com */

        .divTable {
            display: table;
            width: 100%;
            padding-bottom: 12px;
            padding-top: 8px;
        }

        .divTableRow {
            display: table-row;
        }

        .divTableHeading {
            background-color: #EEE;
            display: table-header-group;
        }

        .divTableCell,
        .divTableHead {
            border: 1px solid #999999;
            display: table-cell;
            padding: 3px 10px;
        }

        .divTableHeading {
            background-color: #EEE;
            display: table-header-group;
            font-weight: bold;
        }

        .divTableFoot {
            background-color: #EEE;
            display: table-footer-group;
            font-weight: bold;
        }

        .divTableBody {
            display: table-row-group;
        }

        .divTableTHead .divTableCell {
            font-weight: 800;
            padding: 9px 10px;
        }

        .activeQstn {
            background-color: #0044cc !important;
            color: #ffff !important;
        }

        .btn-roundNotAnswer {
            background-color: #dc3545 !important;
            color: #ffff !important;
        }

        .btn-roundAnswer {
            background-color: #25c75e !important;
            color: #ffff !important;
        }

        .menuappend .form-check {
            padding-left: 1rem !important;
        }

        .menuappend .mainmenu,
        .menuappend {
            margin: 10px;
        }

        .form-check-label {
            width: fit-content;
        }

        .form-check-sign {
            margin-left: 10px;
        }

        .table-striped tbody tr:nth-of-type(2n+1) {
            background-color: var (--lite-blue);
        }

        .profile-card {
            margin: 0 auto;
            max-width: 50%;
        }

        .base_header2 {
            background: url(../images/inner-bg1.jpg) !important;
            background-size: cover !important;
            padding: 30px 30px;
            border-radius: 250px;



        }

        .mediaType {
            width: 140px;
            display: inline-block;
            margin: 5px 5px;
            background-color: var(--modal-box);
            padding: 15px;
            border-radius: 15px;
        }

        @media (max-width: 768px) {

            .mediaType {

                /*     max-width: 33%; */
                margin-bottom: 20px;

            }

        }



        .ui-widget {
            font-family: 'AmpleSoftPro' !important;
        }

        .ui-accordion .ui-accordion-header {

            margin: 7px 0 0 0 !important;
            /* border-radius: 100px; */

            background-color: var(--lite-rose);

            border: none;
            padding: 1em 1em 1em 1em;
            font-size: 20px !important;

            border-radius: 7px;
        }

        .title span {
            font-size: 17px;
        }

        #accordion .ui-accordion-content-active {
            height: unset !important;

            border-top-left-radius: 0px;
            border-top-right-radius: 0px;

        }

        #accordion {
            background-color: #fff;
            padding: 20px;
            box-shadow: -8px 8px 22px 0 rgb(103 102 102 / 15%);
            border-radius: 30px;
        }

        #accordion li {

            margin-bottom: 10px !important;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;

        }

        #accordion li span {

            color: var(--banner-color) !important;
            font-weight: bold !important;

        }


        #coverpage {
            background-image: linear-gradient(var(--banner-color), var(--span-text));
            padding: 5px;
        }


        #bookmark {
            position: absolute;

            /* right: 99px;
  top: 355px;*/
        }

        #tags {
            position: relative;
            margin-left: 60px;
            margin-bottom: 25px;
        }

        .dis-align {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .icon-space {
            background-color: white;
            border-radius: 100px;
            width: 75px;
            height: 75px;
            margin: auto;
            display: block;
            padding: 20px;
        }

        .ui-accordion .ui-accordion-content {
            border: none;
            background-color: #e5d4f6;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .subjects-container .accordion-tabbed__control {
            margin-bottom: 0px;
        }

        .ui-state-default {
            background-color: #000;
            color: var(--black-clr) !important;
        }

        .section__mainHeader {
            color: #000;
        }

        .libry {
            background-color: #efefef;
            padding: 70px 0 100px 0;
        }

        .libry .btn--inverse {
            color: #fff;
            background-color: #7d52ab;
            border: none;
            padding: 10px 15px;
            border-radius: 7px;
        }


        .ui-state-active {
            background-color: var(--banner-color) !important;
            color: var(--white-clr) !important;
        }


        .form-control select {
            border: 1px solid var(--banner-color);
        }

        .form-control:focus {
            border: 1px solid var(--banner-color);
            box-shadow: none;
        }

        .nav-im {
            background-color: var(--banner-color);
            border-radius: 100px;
            padding: 5px;
        }

        .search-btns {
            margin-right: 5px;
            margin-bottom: 5px;
        }


        ::placeholder {
            color: #ddd;
            opacity: 1;
            /* Firefox */
        }

        :-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: #ddd;
        }

        ::-ms-input-placeholder {
            /* Microsoft Edge */
            color: #ddd;
        }

        .tab-style {
            background-color: #d9d9d9;
            padding: 10px;
        }









        .bg-breadcrumb {
            background-color: #fff !important;
            justify-content: center;
        }

        .bg-breadcrumb h2 {
            color: #000 !important;
        }


        .bg-breadcrumb h2 small {
            color: #000 !important;
        }

        .re-edit1 {
            height: auto !important;
            padding: 30px 0 30px 0 !important;
            border-radius: 200px !important;
        }


        @media (max-width:600px) {

            .re-edit1 {
                height: auto !important;
                padding: 0 !important;
                border-radius: 0px !important;
            }

        }



        .re-color li a {

            color: var(--dark-purple) !important;

        }

        .re-color li {

            color: var(--dark-rose) !important;

        }

        div#accordion li {
            list-style: none;
            margin: 5px 0px 10px 0px;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;
            list-style-image: url(/resources/images/check-bullet.png);

        }


        .tabz .nav-pills .nav-link.active {
            color: #000;
            background-color: var(--white-clr);
            border-radius: 0;
            border: 1px solid var(--white-clr);
            border-left: 2px solid var(--span-text);
        }

        .tabz .nav-pills .nav-link {
            color: #000;
            background-color: var(--lite-blue);
            border-radius: 0;
            border: 1px solid var(--white-clr);
            text-align: left;
        }

        .tabz .tab-content {
            background-color: #fff;
            box-shadow: -8px 8px 22px 0 rgb(103 102 102 / 15%);
            color: #000;
            width: 85%;
            padding: 15px;
        }

        .btn-w {
            width: auto !important;
            background-color: var(--lite-gray-1);
            ;
            margin: 1px;
        }

        .bg-wt {
            background-color: transparent !important;
        }

        .full-bg1 {
            background-color: #efefef;
            padding-top: 6em;
            padding-bottom: 6em;
            margin-top: 3em;
            margin-bottom: 3em;
            border-radius: 50px;
        }

        .c-flex {
            display: flex;
        }

        @media (max-width:600px) {

            .c-flex {
                display: block;
            }

            .tabz .tab-content {
                width: 100%;
            }
        }

        .tag-z #bookmark {

            background-color: var(--white-clr);

            padding: 0px;
            border-radius: 200px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 17px;
            margin-left: 42px !important;
            position: relative;
            border: 1px solid var(--banner-color);

        }



        .tag-z #tags {

            background-color: var(--white-clr);

            padding: 0px;
            border-radius: 200px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 17px;
            margin-left: 0 !important;
            position: relative;
            border: 1px solid var(--banner-color);
            border: 1px solid var(--banner-color);
            margin-left: 30px !important;

        }


        .shedule-icon {
            background: var(--white-clr);
            width: 30px;
            height: 30px;

            border-radius: 73px;
            justify-content: center;
            display: flex;
            align-items: center;
            color: var(--banner-color);
        }

        [dir="rtl"] .shedule-icon {
            margin-right: 5px;
        }

        .color-code {
            background: #f1f3f4;
            padding: 5px 29px;
        }

        .color-code:nth-of-type(odd) {
            background-color: #f8f9fa;

        }

        .line {
            margin: 0;
            color: #e1e1e1;
        }


        .authorName span {
            color: var(--span-text);
        }

        .categoryName span {
            color: var(--span-text);
        }

        .published span {
            color: var(--span-text);
        }


        .authorName {
            margin-right: 10px
        }

        .categoryName {
            margin-right: 10px
        }

        .published {
            margin-right: 10px
        }


        .titleName {
            font-size: 25px !important;
        }

        .help-block {
            color: red;
        }

        .view-list1 {
            background-color: var(--modal-box);
            padding-top: 6em;
            padding-bottom: 6em;
            margin-top: 2em;
        }

        .view-list1 .li-head {
            color: var(--banner-color) !important;
            font-weight: bold;
        }

        .view-list1 .tag-1 li a {
            color: var(--banner-color) !important;
            color: var(--black-clr) !important;
            padding: 5px 10px;
            background-color: var(--lite-rose);
            border-radius: 150px;
        }

        .view-list1 .filter_type li a {
            color: var(--banner-color) !important;
            color: var(--black-clr) !important;
            padding: 5px 10px;
            background-color: var(--lite-rose);
            border-radius: 150px;
        }

        .view-list1 .head-w1 {
            width: 100%;
            background-color: var(--banner-color);
            color: var(--white-clr);
            padding: 5px 10px;
            margin-top: 20px;
            border-radius: 4px;

        }

        .view-list1 .head-w2 {
            width: 100%;
            background-color: var(--banner-color);
            color: var(--white-clr);
            padding: 5px 10px;
            margin-top: 20px;
            border-radius: 4px;

        }

        .view-list1 .head-w3 {
            width: 100%;
            background-color: var(--banner-color);
            color: var(--white-clr);
            padding: 5px 10px;
            margin-top: 20px;
            border-radius: 4px;

        }

        .view-list1 .head-w4 {
            width: 100%;
            background-color: var(--banner-color);
            color: var(--white-clr);
            padding: 5px 10px;
            margin-top: 20px;
            border-radius: 4px;

        }



        .fa-caret-right {
            color: var(--banner-color);
        }

        .fa-caret-right-down {
            color: var(--banner-color);
        }

        .fa-dot-circle-o {
            color: var(--span-text);
        }

        .view-list1 .intialmenu {
            background-color: var(--modal-box);
            width: 100%;
        }

        .authors {
            background-color: var(--modal-box);
            padding: 5px 10px !important;
        }



        .listing-book .eachBook {
            border-radius: 25px;
            padding: 15px 20px;
            border: none;
        }

        .listing-book .mediaTypeName {
            color: var(--black-clr) !important;
            padding: 5px 10px;
            background-color: var(--lite-rose);
            border-radius: 150px;
            margin-top: 10px;
        }

        .listing-book .titlenamebook {
            display: block;
        }

        .listing-book .titlenamebook a {
            color: var(--banner-color) !important;
        }


        .rating-header {
            margin-top: -10px;
            margin-bottom: 10px;
        }

        .btn-starrating {
            color: orange;
            background-color: black;
        }

        .intialmenu::before {
            left: -18px;
            width: 18px;
        }

        #bookmark {
            position: absolute;
            top: 0px;
            right: 44px;
        }

        #tags {
            position: absolute;
            top: 0px;
            right: 61px;
        }

        a {
            color: #12375f;
            text-decoration: none;
            background-color: transparent;
            -webkit-text-decoration-skip: objects;
        }

        a.btn.btn-sm.alphanumeric {
            background: var(--lite-rose);
            margin-bottom: 5px;
            min-width: 30px;
        }

        .slider_desc {
            font-size: 12px;
            line-height: 14px;
            text-align: justify;
            overflow: hidden;
            max-height: 55px;
            padding-left: 0px;
            padding-right: 0px;
        }

        /* .form-control {
    display: block;
      width: 31%;
    } */


        /* .slider_desc {
    margin: 0px;
    margin-top: 0px;
    color: #333333;
    font-family: Arial;
    font-size: 14px;
    line-height: 11px;
    text-align: justify;
    overflow: hidden;
    transition: all 0.5s ease 0s;
    max-height: 52px;
} */

        #slider_desc_toogler {
            /* border-top: silver 1px dotted; */
            margin-bottom: 29px;
            margin-top: 20px;
            width: 31%;
            margin-left: auto;
            margin-right: auto;
        }

        #slider_desc_toogler i {
            position: absolute;
            text-align: center;
            color: silver;
            font-size: 25px;
            font-family: fontawesome;
            left: calc(50% - 10px);
            margin-top: -13px;
            background: #fff;
        }

        .bookdiv .aboutTheBook {
            color: #424242;
            font-weight: 500;
            margin-top: 10px;
        }

        .bookdiv .bukauthor {
            color: var(--black-clr);
            font-weight: 400;
            display: block;
        }

        .bookdiv .description {
            color: #424242;
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
        }

        .read-more {
            color: var(--banner-color);
            font-weight: bold;
        }


        #to-top {
            position: fixed;
            right: 20px;
            bottom: 60px;
            cursor: pointer;
            padding: 10px 15px;
            background: var(--banner-color);
            font-weight: bold;
            color: #ffffff;
            size: 20px;
            display: none;
        }


        /* 
.mob-tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}



.mob-tab .tabs {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}

.mob-tab .tab {
  width: 100%;
  color: white;
  overflow: hidden;
}
.mob-tab .tab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #2c3e50;
  font-weight: bold;
  cursor: pointer;

}
.mob-tab .tab-label:hover {
  background: #1a252f;
}
.mob-tab .tab-label::after {
  content: "";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.35s;
}
.mob-tab .tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
}
.mob-tab .tab-close {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}
.mob-tab .tab-close:hover {
  background: #1a252f;
}

.mob-tab input:checked + .tab-label {
  background: #1a252f;
}
.mob-tab input:checked + .tab-label::after {
  transform: rotate(90deg);
}
.mob-tab input:checked ~ .tab-content {
  max-height: fit-content;
  padding: 1em;
}


  .mob-tab .space{ padding: 5px 10px 5px 10px;} */

        .space1 {
            display: none;
        }


        @media only screen and (max-width: 992px) {
            .space1 {
                display: block;
            }

        }

        @media only screen and (max-width: 992px) {
            .cus-h {
                display: none;
            }
        }


        .adv .input-group {
            margin-bottom: 1rem;
        }


        .adv .input-group {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            width: 100%;
        }

        .adv .searchIn--field select {
            width: 130px;
            text-align: left;

            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
            height: 40px;
        }

        .vis-hide {
            display: none;
        }


        .adv select {

            border-top-right-radius: 5px !important;
            border-bottom-right-radius: 5px !important;
            border-top-left-radius: 5px !important;
            border-bottom-left-radius: 5px !important;

        }


        .adv .chosen-container {

            margin-top: 5px;
            margin-bottom: 5px;
        }




        .adv .button-4 {

            margin-left: 5px !important;
            height: 40px;
            margin-top: 5px;
            border-top-left-radius: 5px !important;
            border-top-right-radius: 5px !important;
            border-bottom-left-radius: 5px !important;
            border-bottom-right-radius: 5px !important;
        }

        .adv-2 input {

            border-radius: 5px;
        }


        .adv2 .button-4 {
            margin-left: 5px !important;
            height: 40px;
            margin-top: 5px;
            border-top-left-radius: 5px !important;
            border-top-right-radius: 5px !important;
            border-bottom-left-radius: 5px !important;
            border-bottom-right-radius: 5px !important;
        }


        .adv-3 legend {
            font-size: 20px;
            font-weight: bold;
        }


        .adv-3 .align-h {
            margin-bottom: 20px;
            display: flex;
            /* align-items: center; */
            align-items: center;
        }



        .form-w {
            width: 25% !important;
        }


        .bg-adv {
            background-color: var(--modal-box);
            border-radius: 20px;
        }












        .t-Dis {
            display: none;
        }


        .contentContainer .re-table2 {
            background: var(--span-text);
            padding: 10px;

        }



        .re-table1 {
            border-collapse: collapse;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 1px 5px 37px -14px #00000047;

        }

        .check-box input {
            margin: 10px;
        }

        .data-ceter {

            vertical-align: middle;
        }

        .bg-select {
            background: var(--white-clr);
        }

        .t-row td {
            padding: 20px;
        }

        input.box-type {


            border-radius: 10px;
        }


        .t-img img {

            width: 50px;
            height: 50px;
            border-radius: 50px;
        }

        .CS-button {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 10px;
        }

        .S-button {
            margin-left: 10px;
        }

        .C-button {
            background: var(--banner-color);
            border: none;
            height: 46px;
        }

        .check-btn {
            display: inline;



        }

        .form-select {
            line-height: 2.5 !important;
        }


        .attendance-b {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 0 0 10px;
        }

        @media (max-width:600px) {
            .attendance-b {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 0 10px;
            }
        }

        .attendance-b label {
            padding: 0 0 0 10px;
        }

        .attendance-b input {
            margin-right: 10px;
        }



        @media (max-width:600px) {
            .attendance-b label {
                padding: 0 8px;
            }

        }

        @media (max-width:600px) {
            .attendancesave-btn {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .attendancesave-btn button {
            margin: 20px 0 0;
        }

        .trans .btn-wrapper {
            background-color: transparent;
        }

        .trans .mediaType {
            width: auto;
            display: inline-block;
            margin: 0;
            background-color: var(--modal-box);
            padding: 0px;
            border-radius: 0px;
        }




        /*----timetable-design--*/
        .table-radius {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            padding: 0;
            box-shadow: -2px 8px 22px 0 rgb(0 0 0 / 15%);

        }

        span.on-0f-radio-btn {
            display: flex;

            justify-content: end;
        }

        .day-box {
            display: flex;
            align-items: center;
            margin-top: 8px;
        }

        .details-box-row {
            display: flex;
            justify-content: center;
            margin: 0 0 0 8px;
        }




        .box-height {
            height: 50px;
            border-radius: 8px;
        }

        input.box-height {
            border-radius: 8px;
        }

        .day-details {
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .details-box button {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width:770px) {
            span.on-0f-radio-btn {
                display: flex;

                justify-content: center;
            }

            .day-responsive {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
            }

            .details-box-responsive {
                padding: 0;

            }
        }

        @media (max-width:945px) {
            .box-height button {
                margin-top: 0;
            }
        }



        /*---quick addmission---*/

        .creat-btn {
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .crud-btn {
            display: flex;
            justify-content: center;
        }

        .crud-btn i {
            padding: 0;
        }

        .table-btn1 .action-buttons i {
            color: var(--banner-color);
            background-color: var(--white-clr);
            padding: 10px;
            border-radius: 25px;
            width: 37px;
            text-align: center;
            margin: 2px;
        }


        .table-btn1 .action-buttons {
            text-align: left;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .table-btn1 tr {
            vertical-align: middle;

        }

        .contentContainer .table-btn1 th {
            background-color: var(--span-text);
        }


        .sn-box select {
            height: 50px;
            border-radius: 8px;
            background: var(--white-clr) !important;
        }

        .sn-box input {
            height: 50px;
            border-radius: 8px;
            background: var(--white-clr) !important;
        }

        .sn-box-check {
            height: 50px;
            border-radius: 0 8px 8px 0;
        }

        .quick-icons a {
            background-color: var(--white-clr);
            padding: 8px;
            border-radius: 20px;
            width: 37px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px;
            font-size: 16px;

        }

        .quick-add-btns {
            border: none;
        }

        .pagination .previous {
            padding-top: 6px !important;
            padding-right: 5px !important;

        }

        .pagination .next {
            padding-top: 6px !important;

            padding-left: 5px !important;

        }


        /*----index------*/

        /*.index-header{
 background:#e962ab!important;
 color:#fff;
 }*/
        .index-table-border tr {
            border-style: none !important;
        }

        /*----student-details------*/


        .std-detail-table input {
            background: var(--white-clr);
            color: var(--brack-clr);
        }

        [dir="rtl"] .std-detail-table td {
            text-align: right;
        }


        /*----student-TC------*/

        .retype-check-box input {
            height: 16px;
            padding: 10px;
        }

        .retype-check-box label {
            margin: 0 0 0 5px;

        }

        .form-menu label {
            padding: 0 0 7px 0;
        }



        /*----student-id------*/

        .table-border th {
            background: var(--span-text) !important;

        }

        .dp-card {
            margin: 0 auto;
            text-align: center;
        }


        .priview-btn {
            margin-left: 48px;
        }

        [dir="rtl"] .priview-btn {
            margin-right: 48px;
        }

        [dir="rtl"] .table-rw-content td {
            text-align: right !important;
        }

        [dir="rtl"] .arb-btn-save {
            margin: 0 auto;
            display: flex;
            justify-content: flex-end;

            margin-top: 10px;
        }

        @media (max-width:600px) {
            .priview-btn {
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            [dir="rtl"] .priview-btn {
                margin: 0 auto;
            }
        }

        [dir="rtl"] .arb-btn-save {
            padding-left: 38px;
        }



        .table-bd {
            border: none;
        }

        @media (max-width:600px) {
            .flex-box {
                margin-top: 10px;
            }
        }

        .table-content {
            width: 300px !important;




            word-break: break-all;
        }


        /*----purchase---*/

        .purchase-save-btn {
            float: right;
        }

        [dir="rtl"] .purchase-save-btn {
            float: left;
        }

        .item-table-respons {
            height: 50px !important;
            border-radius: 8px !important;
            background: var(--white-clr) !important;
        }

        @media (max-width: 500px) {
            .item-table-respons {
                height: 30px !important;
                width: 100px !important;
            }
        }




        /*-------------------------------------*/

        [dir="rtl"] .cards tbody td {
            display: block;
            padding-right: 15px;

        }

        /*-------------------------------------*/

        /*-------------------------------------*/
        [dir="rtl"] .cards td:before {

            content: attr(data-label);
            position: relative;
            float: right;
            color: var(--black-clr);
            min-width: 8rem;

            margin-right: 0px !important;
            text-align: right;


        }

        /*-------------------------------------*/

        /*--------holidayCalendar---------*/

        .sp-btn {
            text-align: right;

        }

        .menu-select {
            width: 114px;
            margin: 0 auto;
            text-align: center;
        }

        .holiday-btn {
            display: flex;
            justify-content: flex-end;

        }


        /*--------classs---------*/

        .up-btn input {
            border-radius: 8px;
        }

        .file-button input {
            border-radius: 8px 0 0 8px !important;
            padding: 9px;
        }



        .student-up-file {
            background-color: white;
            overflow: hidden;
            height: 50px;
            border-radius: 0 8px 8px 0;
        }

        @media (max-width:530px) {
            .file-button input {
                border-radius: 8px !important;
            }

            .student-up-file {
                border-radius: 8px;
            }
        }


        .student-bulk-btn {
            display: grid;

        }

        .student-bulk-btn a {
            width: 100px;
            height: 50px;
        }

        @media(max-width:500px) {
            .student-bulk-btn label {
                margin-bottom: 10px !important;
            }

            .student-bulk-btn a {
                margin-bottom: 10px !important;
            }
        }

        .student-bulk-file label {
            margin-bottom: 10px;
        }

        @media(max-width:500px) {
            .item-change-btn button {
                width: 25px !important;
            }

            .item-change-btn {
                max-width: 32px;
            }
        }

        @media(max-width:500px) {
            .promotion1-box {
                margin-top: 22px;
            }
        }


        /*--------time table viwe---------*/


        .table-offline-btn span {
            display: flex;
            margin-left: 10px;
        }

        .table-offline-btn {
            display: flex;
            margin-left: 17px;
        }

        [dir="rtl"] .table-offline-btn {
            margin-right: 17px;
        }

        [dir="rtl"] .day-head {

            text-align: center !important;
        }

        .timetable-dot button {
            border: none !important;
        }

        .table-offline-btn button {
            padding: 0;
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 25px;
        }





        .day-head {
            text-align: center !important;
            font-weight: 600;
            font-size: 20px;
        }


        .day-head button {
            display: none;
        }





        .saveall-btn {
            float: right;
        }

        [dir="rtl"] .saveall-btn {
            float: left;
        }


        /*-------------Table Responsive------------*/
        @media (max-width: 500px) {

            [dir="rtl"] .new-datatable-respons td::before {
                content: attr(data-label);
                position: absolute;
                right: 17px !important;
                /* width: 50%; */
                padding-left: 0px;
                text-align: right !important;
            }

            [dir="rtl"] .new-datatable-respons td {
                padding-right: 50% !important;
                text-align: right !important;
                position: relative;
                padding-left: 10px;

            }

            .new-datatable-respons {
                width: 100%;

            }

            .new-datatable-respons td,
            .new-datatable-respons th {
                padding: 12px 15px;

                text-align: center;

            }

        }



        /*responsive*/

        @media (max-width: 500px) {
            .card {
                border: none;
            }

            .new-datatable-respons thead {
                display: none;
            }

            .new-datatable-respons,
            .new-datatable-respons tbody,
            .new-datatable-respons tr,
            .new-datatable-respons td {
                display: block;
                width: 100%;
                border: none;
            }

            .new-datatable-respons tr {
                margin-bottom: 15px;
            }

            .new-datatable-respons td {
                padding-left: 50%;
                text-align: left;
                position: relative;
            }

            .new-datatable-respons td::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                width: 50%;
                padding-left: 15px;


                text-align: left;
            }

            .new-datatable-respons tbody tr:nth-child(odd) {
                background-color: var(--lite-blue);

                border-radius: 20px !important;
                border-collapse: collapse;
                overflow: hidden;
            }

            .new-datatable-respons tbody tr:nth-child(even) {
                background-color: var(--lite-rose);
                border-radius: 20px !important;
                border-collapse: collapse;
                overflow: hidden;
            }
        }




        /*------purchase Edit----------*/


        .blockable-btn {
            float: right;
        }

        [dir="rtl"] .blockable-btn {
            float: left;
        }


        /*----------brand-checkbox--------*/

        /* The container */
        .brand-checkbox {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .brand-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
            left: 0;
            z-index: 100 !important;
        }

        [dir="rtl"] .brand-checkbox input {

            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
            right: 0;
            z-index: 100 !important;
        }

        /* Create a custom checkbox */
        .brand-checkbox .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
            border-radius: 8px;
        }

        [dir="rtl"] .drand-checkbox .checkmark {
            position: absolute;
            top: 0;
            right: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
            border-radius: 8px;
        }

        /* On mouse-over, add a grey background color */
        .brand-checkbox:hover input~checked {

            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .brand-checkbox input:checked~.checkmark {

            background-color: var(--banner-color);
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .brand-checkbox .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .brand-checkbox input:checked~.checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .brand-checkbox .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        /*----------brand-checkbox--------*/


        .details-banner label {
            margin-bottom: 10px;
        }

        @media(max-width:500px) {
            .total-case label {
                margin-bottom: 10px;
            }
        }

        .dept-get-btn {
            text-align: center;
        }

        @media (max-width:500px) {
            .dept-get-btn {
                text-align: left !important;
            }

            [dir="rtl"] .dept-get-btn {
                text-align: right !important;
            }
        }




        .table-hover-heading tr {
            background: var(--banner-color);
            color: var(--white-clr);
        }


        [dir="rtl"] .table-items td {
            text-align: right;
        }

        [dir="rtl"] .brand-checkbox .checkmark {
            position: absolute;
            top: 0;
            right: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
            border-radius: 8px;
        }


        .calenderform {
            height: 50px;
            border-radius: 8px 0 0 8px;
        }

        [dir="rtl"] .calenderform {
            height: 50px;
            border-radius: 0 8px 8px 0;
        }

        [dir="rtl"] .calender-box input {
            border-radius: 8px 0 0 8px !important;
        }

        /*----------plus-button---------*/

        @media (max-width:400px) {
            .plus-btn {
                margin-top: 5px !important;
            }

        }

        .plus-btn {
            min-width: 50px !important;
            background: #7d52ab !important;
            height: 50px;
            margin-top: 0;
            border-radius: 8px !important;
            margin-left: 4px !important;
            color: var(--white-clr);
        }

        [dir="rtl"] .plus-btn {
            margin-right: 1px !important;
        }

        /*----------plus-button---------*/



        /*----------alert-box---------*/
        .alert-box {
            padding: 15px;
            margin-bottom: 20px;
            background: var(--span-text);
            box-shadow: var(--contact-background);
            display: flex;
            color: #fff;
            border-radius: 8px;
            align-items: center;

        }

        .alert-box p {
            margin: 0;
        }

        .alert-box i {
            font-size: 30px;
            margin-right: 5px
        }

        /*------student customized report-----------*/



        .form-datas {
            text-align: left;
        }

        [dir="rtl"] .form-datas {
            text-align: right;
        }


        .export-btn {
            float: left;
        }

        [dir="rtl"] .export-btn {
            float: right;
        }

        .form-data-box {
            background: var(--lite-blue) !important;
            margin: 0 0 10px 0;
            padding: 10px;
            border-radius: 8px;
        }

        [dir="rtl"] .order-content td {
            text-align: right !important;
        }



        /*------Lesson create-----------*/


        [dir="rtl"] .lesson-plus {
            float: left !important;
        }




        .bg-white {
            background-color: var(--modal-box) !important;
            border-radius: 8px;
        }



        @media (max-width:500px) {
            .uder-radio-btn label {
                margin-bottom: 5px !important;
            }
        }

        .item-close-btn {
            width: 45px !important;
            height: 45px;
            margin-top: 0;
            border: none;
            background: var(--banner-color);
            color: var(--white-clr);
            float: right;
        }

        [dir="rtl"] .item-close-btn {

            float: left;
        }

        .text-clos-btn {
            margin-top: 10px !important;
            margin-right: 20px !important;
            width: 45px !important;
            height: 45px;
            margin-top: 0;
            border: none;
            background: var(--banner-color);
            color: var(--white-clr);
            float: right;
        }

        [dir="rtl"] .text-clos-btn {
            margin-top: 10px !important;
            margin-left: 20px !important;

            float: left;
        }

        @media (max-width:500px) {
            .text-clos-btn {
                margin-right: 0 !important;
                margin-bottom: 10px !important;
            }

            [dir="rtl"] .text-clos-btn {
                margin-bottom: 10px !important;
                margin-left: 0 !important;
            }

            .item-close-btn {
                margin-bottom: 10px !important;
            }
        }

        .flex-table .align-items-center {
            display: none;
        }

        .flex-table .cards {
            border: none !important;
        }


        @media (max-width:500px) {
            [dir="rtl"] .add-plus-btn {
                margin-top: 32px !important;
            }
        }

        @media (max-width:360px) {
            [dir="rtl"] .add-plus-btn {
                margin-top: 0 !important;
            }
        }

        @media (max-width:500px) {
            .pay-cancel-btn {
                margin-top: 10px;

            }
        }

        .Individual-checkbox {

            display: flex;
            align-items: center;
        }

        .Individual-checkbox input {
            margin: 0 0 0 5px;
        }

        .status-list {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0 auto;
        }


        @media (max-width:500px) {
            .apply-btn {
                margin-top: 20px;
            }
        }

        .progress-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        [dir="rtl"] .new-datatable-respons.table td {

            text-align: right !important;
        }


        .radio-space input {
            margin: 0 !important;
        }

        .calender-info {
            display: flex;
            align-items: center;
        }

        @media (max-width:500px) {
            .calender-info {
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }


        .table-features {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-bottom: 10px;
        }


        .datepicker-dropdown {
            padding: 10px !important;
            border: none;
            margin-left: 0 !important;
        }

        .datepicker-dropdown .datepicker-days .table-condensed,
        .datepicker-months .table-condensed,
        .datepicker-years .table-condensed,
        .datepicker-decades .table-condensed,
        .datepicker-centuries .table-condensed {
            width: 240px !important;
        }

        .datepicker .next {
            background: var(--span-text) !important;
            height: 50px !important;
            color: var(--white-clr) !important;
        }

        .datepicker .prev {
            background: var(--span-text) !important;
            height: 50px !important;
            color: var(--white-clr) !important;
        }

        .datepicker .datepicker-switch {
            background: var(--span-text) !important;
            height: 50px !important;
            color: var(--white-clr) !important;
        }



        .datepicker .table-condensed th {

            border-radius: 0 !important;
        }

        .datepicker-dropdown .table-condensed .active {
            background: var(--banner-color) !important;
        }

        [dir="rtl"] .paytext label {
            float: left !important;
        }

        .paytext label {
            float: right;
        }




        .table-bg {
            background: var(--white-clr);
        }



        [dir="rtl"] .table-align tbody tr td {
            text-align: right !important;
            padding-right: 20px;
        }

        .option-text {
            display: flex;
            align-items: center;

        }

        .option-text h4 {
            margin: 0;
        }

        .group-text {
            display: flex;
            align-items: center;

        }

        .group-text h4 {
            margin: 0;

        }

        @media (max-width:500px) {
            .option-close {
                margin-bottom: 20px !important;
            }
        }


        @media (max-width:500px) {
            .assign-rd-btn div {
                margin: 0 !important;
                margin-bottom: 20px !important;


            }
        }

        .assign-rd-btn input {
            margin: 5px;
        }


        .btn-outline-primary:hover {
            background: var(--banner-color) !important;
            color: var(--white-clr) !important;
        }


        .assign-rd-btn div {
            border-color: var(--banner-color) !important;
            color: var(--black-clr);
        }

        .assign-rd-btn span:hover {
            border-color: var(--banner-color) !important;
            color: var(--white-clr);
        }


        .modal-lg1 {
            max-width: 60%;
        }

        @media (max-width:500px) {
            .modal-lg1 {
                max-width: 100%;
            }
        }




        @media (max-width:500px) {
            [dir="rtl"] .dataTables_filter {
                text-align: center !important;
            }
        }

        .check-float {
            float: none !important;
        }

        .allselect-box {
            display: none;
        }

        @media (max-width:500px) {
            .allselect-box {
                display: flex;
                position: relative;
                top: 160px;
            }
        }


        [dir="rtl"] .allselect-box input {
            margin-left: 5px;
        }

        .std-modaldialog {

            width: 35% !important;
        }

        @media (max-width:750px) {
            .std-modaldialog {

                width: 100% !important;
            }
        }

        @media (max-width:500px) {
            .view-respons {

                padding: 0 !important;
            }
        }

        .datepicker .next.disabled {
            visibility: visible !important;
        }

        [dir="rtl"] .table td {
            text-align: right;
            padding-right: 20px;
        }

        .latestradio-btn {
            text-align: left;
        }

        [dir="rtl"] .latestradio-btn {
            text-align: left;
        }

        @media (max-width:500px) {
            .latestradio-btn {
                text-align: center !important;
            }
        }

        /*   @media (max-width:500px){ */
        /*   .t-Dis{ */
        /*      display:flex !important; */
        /*   } */
        /*   } */
        .staff-block {
            white-space: nowrap;

        }

        .academic-table {
            border: 1px solid #000 !important;
        }

        .academic-table th {
            border: 1px solid #000 !important;
            text-align: center;
        }

        .photo {
            border: 1px solid #000;
            width: 150px;
            height: 160px;
            margin-top: 100px;
        }

        .border-content {
            border: 6px solid #4ac74a;
            ;
            border-radius: 43px;
            padding: 20px
        }

        .rowwidth {
            width: 20% !important;
        }

        .type-area {
            boder: 3px solid #4ac74a !important;
        }


        /*   .bg-caterpiller{ */
        /*      background:url(/resources/images/caterpillar.jpg); */
        /*      background-repeat: no-repeat; */
        /*      background-position-x: right; */
        /*     background-position-y: 145px; */
        /*     display:none; */
        /*   } */
        /*   .bg-rabbit{ */
        /*       background:url(/resources/images/rabbit.jpg); */
        /*      background-repeat: no-repeat; */
        /*      background-position-x: 59%; */
        /*     background-position-y: 33px; */

        /*   } */
        /*   .bg-butterfly{ */
        /*       background:url(/resources/images/butterfly.jpg);  */
        /*      background-repeat: no-repeat; */
        /*      background-position-x: 95%; */
        /*     background-position-y: 341px; */

        /*   } */

        .data-space {

            width: 75%;
        }

        .student-count {
            background: #fff;
            width: 50px;
            height: 32px;
            text-align: center;
            border-radius: 11px;

            margin: 0;
            margin-right: 5px;
        }

        .student-count i {
            color: var(--banner-color);
        }

        .badge {

            color: var(--black-clr);
            font-weight: 100;
        }

        @media (max-width:998px) {
            .text-area {
                width: 32%;
            }

            .text-area2 {
                width: 66%;
                text-align: right;
            }

            .text-areaft {
                width: 18%;
                text-align: right;
            }
        }

        @media (max-width:545px) {
            .text-areaft {
                width: 66%;
                text-align: right;
            }

        }


        .staff-add-btn {
            float: right;
        }

        [dir="rtl"] .staff-add-btn {
            float: left;
        }

        @media(max-width:557px) {
            .respons-btn {
                width: 100%;
                margin-top: 5px;
            }

            .tab-respons {
                width: 100% !important;
            }
        }


        @media (max-width:745px) {
            .upload_excel {
                margin-top: 10px;
            }
        }

        @media (max-width:947px) {}

        .languageslist {
            display: flex;
        }

        @media (max-width:557px) {
            .profile-card {
                max-width: 100% !important;
            }
        }

        .datepicker-dropdown.dropdown-menu {

            right: auto !important;

        }

        @media (max-width:947px) {
            [dir="rtl"] .dropdown-menu {
                right: 0px !important;
            }
        }

        .district-status {
            margin-right: 20px;
        }

        [dir="rtl"] .action-buttons {
            text-align: right;
        }

        [dir="rtl"] div.dataTables_wrapper div.dataTables_filter {
            text-align: center !important;
        }

        .user-imgname {
            margin-top: 10px;
            margin-left: 20px;

        }

        [dir="rtl"] .user-imgname {
            margin-top: 10px;
            margin-right: 20px;

        }

        .barcode-align {
            margin-left: 10%;
        }

        .barcodContainer {
            margin-bottom: 10% !important;
        }

        @media (max-width:750px) {
            .barcode-align {
                margin-left: 0;
            }

            .barcodContainer {
                margin-bottom: 25% !important;
            }
        }

        @media (max-width:500px) {

            .pay-details {
                margin-left: 20px;
            }
        }

        .list-select1 span {
            background: #7771b1 !important;
            color: #fff !important;
            /* border: 1px solid #7771b1; */
        }

        .bot-sender p {
            float: right;
            text-align: left;
        }

        [dir="rtl"] .bot-sender p {
            float: left;
            text-align: right;
            border-top-left-radius: 10px !important;
            border-top-right-radius: 0 !important;
        }

        [dir="rtl"] .bot-replay p {
            float: right !important;
            text-align: left;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 10px !important;
        }

        .bot-sender img {
            height: 90px;
            float: right;

        }

        [dir="rtl"] .bot-sender img {
            height: 90px;
            float: left;

        }

        .send-text-btn {
            width: 100% !important;
            height: 40px;
            margin-bottom: 11px;
        }

        @media (max-width:560px) {
            .send-text-btn {
                width: 40px !important;
                height: 40px;
                margin-bottom: 11px;
                border-radius: 50px !important;
            }

            .send-text-btn span {
                display: none;
            }
        }







        .chatbox1 {
            width: auto;
            overflow: hidden;
            height: 100%;
            border-left: 1px solid #ccc;
        }

        .chatbox1 .modal-dialog,
        .chatlist .modal-dialog {
            max-width: 100%;
            margin: 0;
        }

        @media (max-width: 767px) {
            .chatbox1 {
                width: 100%;
                position: absolute;
                left: 1000px;
                right: 0;
                background: var(--white-clr);
                transition: all 0.5s ease;
                border-left: none;
            }

        }



        .star-place {
            position: relative;
        }

        .favouriteMenu {
            position: absolute;
            top: 10px;
            right: 15px;

        }

        .submenu-star {
            position: absolute;
            top: 20px !important;
            left: 105px !important;
            z-index: 2;
            width: 5%;
        }

        @media(max-width:758px) {
            .dwnld-btn {
                margin-left: 15px;
            }

            [dir="rtl"] .dwnld-btn {
                margin-right: 15px;
            }
        }


        .educat-plusbtn {
            background: white;
            padding: 6px;
            border-radius: 3px;
            color: #5d0eb7;
        }

        .add-edu-btn {
            margin-left: 5px;
            color: white;
            padding: 5px;
        }

        .add-edu-btn:hover {
            color: white !important;
        }

        .act-link:hover {
            border-color: transparent !important;
        }

        #mark::placeholder,
        #subjectCode::placeholder,
        #subject::placeholder {
            color: #b0abab;
            opacity: 1;
            /* Firefox */
        }

        .std-info-head h4 {
            text-decoration: underline !important;
            font-weight: 500 !important;
        }

        .postcard-head {
            background: var(--banner-color);
            color: white;
        }

        .poster-font {
            font-size: 20px;
            font-weight: bold;
        }

        .poster-font-sub {
            font-size: 16px;
        }

        .quali-border {

            border-right: 1px solid #80808047;
        }

        .quali-border .interviewDate,
        .roundNumber,
        .interviewTime,
        .interviewVenue {
            font-size: 14px;
            background: #80808021;
            border-radius: 5px;
            padding: 3px;
        }

        @media (max-width:500px) {
            .quali-border {
                border-right: none;
            }
        }

        /* -------------------------------------------------------------------------------- */
        .customcheck-demo::after {
            content: 'x';
            position: absolute;
            width: 13px;
            height: 13px;
            color: #fff;
            transform: translate(100%, 85%);
            background: red;
            line-height: 0.70;
            text-align: center;
            border-radius: 3px;
        }




        .customcheck input {
            display: none;
        }

        .customcheck input~.checkmark {
            background: #ffff;
            width: 13px;
            display: block;
            height: 13px;
            border-radius: 2px;
            border: 1px solid gray;

        }

        .customcheck input~.checkmark:after {
            content: 'x';
            position: absolute;
            width: 2px;
            height: 16px;
            color: #fff;
            transform: translate(103%, -39%);
            display: none;
        }

        .customcheck input:checked~.checkmark {
            background: red;
            width: 13px;
            display: inline-block;
            position: relative;
            height: 13px;

            border-radius: 3px;
            border: none;
        }

        .customcheck input:checked~.checkmark:after {
            display: block;
        }


        .list-student {

            background: #e5d4f6;

            border: none;
            width: 115% !important;
            font-weight: 700;
            cursor: pointer;
        }

        .angle-arrow1 {
            position: relative;

        }

        .angle-arrow {
            position: absolute;
            top: 48px;
            right: 4px;
        }

        .othertypemenu .mainmenu,
        .othertypemenu {
            margin: 10px;
        }

        .othertypemenu .form-check {
            padding-left: 1rem !important;
        }

        .green1 {
            color: green !important;
            /*  background:green !important; */
            /*  color:white !important; */
        }

        .icon-shape {
            background: #7d52ab;
            padding: 12px;
            border-radius: 78px;
            width: 40px;
            height: 40px;
            text-align: center;
            vertical-align: middle;
            color: white;
            margin: 0px 5px 0;
        }

        /* -------------------------------------------------- */


        .timer-box {

            padding: 5px 21px;
            margin: 20px;
            text-align: center;
            vertical-align: middle;

        }

        .lesson-items {
            /* 	max-width:230px */
            width: 90%;

        }

        .lessonParentDiv .form-check {
            display: flex;
            /* min-height: 1.5rem; */
            padding-left: 1.5em;
            margin-bottom: 10px;
        }

        @media only screen and (max-width : 992px) {
            .languageshow {
                display: block !important;
            }
        }



        .link-btn {
            color: black;
            position: relative;

        }

        .link-btn:hover {
            color: #7d52ab !important;
        }

        .link-btn::after {
            width: 100%;
            content: "";
            position: absolute;
            border-bottom: 1px solid #7d52ab;
            transform-origin: left;
            transform: scaleX(0);
            transition: all .5s ease;
            left: 0;
            bottom: 0;
        }

        .link-btn:hover::after {
            transform: scaleX(100%);
            color: #7d52ab !important;
        }

        .action-buttons svg {
            color: var(--banner-color);
            background-color: var(--white-clr);
            padding: 10px;
            border-radius: 25px;
            width: 18px;
            text-align: center;
        }



        .btn-secondary {
            color: black !important;
        }

        .list-card {
            max-width: 100%;


            position: relative;

        }

        /* .list-box{ */
        /* 	position: absolute; */
        /*     background:var(--lite-rose); */
        /*     top: 20px; */
        /*     left: 20px; */
        /*     right: 20px; */
        /*     bottom: 20px; */
        /*     border-radius: 12px; */
        /*     display: flex; */
        /*     justify-content: center; */
        /*     align-items: center; */

        /*     background-position: center; */
        /*     object-fit: cover; */
        /*     background-size: cover; */
        /*     background-repeat: no-repeat; */
        /* } */
        .list-content {
            text-align: center;
            color: #000;
            z-index: 1;
            position: relative;
        }

        .list-content h3 {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 12px;
            /*     position: absolute; */
            /*     top: 10px; */
            /*     left: 0; */
            /*     right: 0; */
            text-align: center;
            color: white;
            /*     max-width: 120px; */
            margin: 0 auto;
            font-weight: 600;
            padding: 25px 20px 10px 18px;
        }

        @media (max-width:775px) {
            .list-content h3 {
                font-size: 12px;
                /*     position: absolute; */
                /*     top: 100px; */
                /*     left: 0; */
                /*     right: 0; */
                padding: 25px 40px 10px;
            }
        }

        .list-content a {}

        .list-box h2 {
            position: absolute;
            top: -10px;
            right: 5px;
            font-size: 150px;
            color: #ede7e721;
            font-style: normal;
            font-family: system-ui;
        }

        /* .list-box:after{ */
        /* 	content: ""; */
        /*     position: absolute; */
        /*     top: 0; */
        /*     left: 0; */
        /*     width: 50%; */
        /*     height: 100%; */
        /*     background: var(--lite-blue); */
        /* 	border-radius: 12px 0 0 12px; */

        /* } */
        .payment-head {
            position: relative;
        }

        .payment-head:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -5px;
            background: #ce0404;
            width: 100px;
            height: 3px;
        }

        .label-align {
            text-align: right;
        }

        [dir="rtl"] .label-align {
            text-align: left;
        }

        .Nodata p {
            margin-left: 5px;
        }


        .options p {
            font-size: 16px;
            font-weight: 100;
        }



        .classList .sub-box {

            padding: 15px;
            background-color: var(--lite-rose);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px;
            flex: 1;
            transition: all ease-in-out .3s;
            border-radius: 10px;
        }

        .classList .sub-box:nth-child(odd) {
            background-color: var(--lite-blue);
        }

        .classList .sub-box:nth-child(odd):hover {
            border-right: solid 5px var(--banner-color);
            box-shadow: 0 0 10px #00000026;
        }

        .classList .sub-box:hover {
            border-right: solid 5px var(--span-text);
            box-shadow: 0 0 10px #00000026;
        }

        .sub-box {
            font-size: 26px;
        }

        .img-space {
            width: 200px;
            height: 150px;
            overflow: hidden;
        }

        .img-size {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: 100%;
        }

        .tab-icon {
            /* 	padding: 6px 20px; */
            /* 	border-radius: 7px; */
            /* 	background: var(--banner-color); */
            /* 	color: var(--white-clr); */
            /* 	cursor: grab; */
            /* 	font-size: 16px; */

        }

        /* @media (max-width:775px){ */
        /* 	.tab-icon { */
        /* 	  padding: 10px 10px; */
        /* 	} */
        /* } */

        .tab-icon svg {
            vertical-icon: middle !important;
            margin-left: 5px !important;
        }

        @media (max-width:775px) {
            .tab-icon svg {
                margin: 0;
            }
        }

        .tab-icon:hover {
            color: white;
        }

        #consept-video iframe {
            width: 100%;
            height: 500px;
            border-radius: 35px;
            overflow: hidden;
            /* 	border: 3px var(--banner-color) solid; */
        }

        .questions {
            /* 	border: 1px var(--banner-color) solid; */
            padding: 16px;
            border-radius: 10px;

        }

        @media (max-width:775px) {
            .record-btn {
                margin-bottom: 10px;
            }

        }

        .speak-header h1 {
            font-weight: 700;
        }

        .qus-answer {
            border-radius: 8px !important;
            border: 1px var(--banner-color) solid !important;
            height: 70px;

        }

        .writt-content {
            margin: 15px 50px 0 50px;
        }

        .exe-qus {
            margin: 30px 50px 0 50px;
        }

        @media(max-width:775px) {
            .writt-content {
                margin: 0;
            }
        }

        .re-btn {
            padding: 3px 20px !important;
        }

        .listening-frame {
            width: 100%;
            height: -webkit-fill-available;
            overflow-x: auto;
            padding: 20px 15px 20px 15px;
        }

        /* @media (max-width:1198px){ */
        /* 	.listening-frame{ */
        /* 	height: 367px; */
        /* 	} */
        /* } */
        .exe-btn {
            display: flex;
            width: 100%;
            border-radius: 16px;
            padding: 10px;
            margin-bottom: 13px;
            border: 1px solid var(--banner-color);
            background: white;
            color: #000;
        }

        .exe-btn:hover {
            background: var(--lite-blue);
            color: #fff;
        }

        .lesson-tab {
            padding: 10px;
            margin: 15px;
        }

        @media (max-width:775px) {
            .tab-icon span {
                display: none;
            }

            .lesson-tab li {
                padding: 10px 2px;

            }

            .lesson-tab {
                margin: 0px;

            }
        }

        .refer-video {
            margin: 0 10px;
        }

        .refer-video iframe {
            border: 3px solid var(--banner-color);
            border-radius: 10px;
        }

        .refer-video audio {
            border: 3px solid var(--banner-color);
            border-radius: 10px;
        }

        .refer-head h1,
        .links-head h3 {
            font-weight: 700;
        }

        .text-content {
            text-align: left;
        }

        .video-links {
            padding: 24px;
            border: 1px solid var(--banner-color);

        }

        .new-link a {
            font-size: 20px;

        }

        .new-link svg {
            color: var(--banner-color);
            font-size: 16px;
            margin-right: 5px;
        }

        @media (max-width:775px) {
            .qus-space {
                margin-bottom: 16px;
            }
        }

        .voc-speak {
            font-size: 18px !important;
            font-weight: 100 !important;
        }



        .video-base-btn button {
            background: white;
            padding: 5px 20px;
            border: navajowhite;
            border-radius: 9px;
            color: var(--banner-color);
            font-size: 16px;
            margin: 5px;
            font-weight: 600;
        }

        .video-base-btn img {
            width: 28px;
        }


        /* .list-box img{ */
        /* 	width:100%; */
        /* } */



        .list-content {

            object-fit: cover;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            height: 200px;
        }


        .list-content h3 {

            display: flex;
            align-items: center;
            justify-content: center;

            /*   margin: 20px 0; */
            padding: 15px;
            width: 100%;
            min-height: 200px;

            color: #fff;

        }

        .list-box {
            width: 100%;
            background-position: center;
            background-size: 100%;
            background-repeat: no-repeat;
        }

        @media (max-width:775px) {
            .list-box {
                width: 100%;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
            }
        }

        .less-icon {
            border: 1px solid black;
            border-radius: 50px;
            width: 50px;
            height: 50px;
            text-align: center;
            padding: 10px;
            margin: 0 auto;
        }

        .less-icon img {
            width: 30px;
            filter: contrast(200%);
        }

        @media (max-width:500px) {
            /* 	.less-icon{ */

            /*     width: 35px; */
            /*     height: 35px; */

            /*     padding: 3px; */

            /* } */
            .less-icon img {
                width: 20px;

            }
        }

        .tab-icon:hover {
            color: var(--banner-color);
            border-color: var(--banner-color);
        }

        .expand-text {
            display: grid;
        }

        .reading-content {
            border: 1px solid var(--banner-color);
            border-radius: 8px;
            padding: 14px;
        }

        .expand-text img {
            margin-right: 5px;
        }

        .expand-text svg {
            margin-left: 5px;
        }

        .expand-text label {
            margin-bottom: 10px
        }

        .newrcorners {
            border-radius: 25px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 115px;
            /*     margin-bottom: 60px; */
            position: relative;

        }

        .newrcorners svg {
            color: var(--banner-color)
        }

        .new-head {
            /* position: absolute; */
            /*     bottom: -54px; */
            /*     left: 0; */
            /*     color: blue; */
            /*     right: 0; */
            margin: 5px;

        }

        .new-head span {
            color: #141313;
            font-weight: 600;
            text-aling: center;
        }

        .main-corners {
            padding: 10px;
            border: 1px solid var(--banner-color);
            border-radius: 25px;
        }

        .sub-img {
            width: 100%;
            background-color: #f5e3e1;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 130px;
            border-radius: 10px;
            border: 1px solid var(--banner-color);
        }

        .sub-list {
            display: flex;
            align-items: center;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .sublist-card {
            background: var(--lite-blue);
            border-radius: 25px;
            padding: 10px;
        }

        .sublist-card img {
            width: 110px
        }

        .subcard-text {
            margin-left: 20px;
            /* 	margin-bottom:20px; */
        }

        .subcard-text p {
            margin: 0
        }

        .sublist-text {
            /* 	max-height: 45px; */
            /*     overflow: hidden; */
            /*     line-height: 1.3; */
            font-weight: 600;
            color: var(--black-clr);
            font-size: 14px;

            -webkit-box-orient: vertical;
            display: block;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;



        }

        .subcard-text p {
            /* 	    max-height: 28px; */
            /*     overflow: hidden; */
            /*     margin-bottom:0 */

            -webkit-box-orient: vertical;
            display: block;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
        }

        .conversationlist {
            position: absolute;
            top: 20px;
            bottom: 20px;
            left: 0;
            right: 0;
            overflow-y: auto !important;

            padding-right: 5px !important;
            margin: 0 !important;
        }

        .appendQuestionAnswerList li {

            border-radius: 17px;
            background: #fff;
            padding: 0 17px;
            width: 150px;
            margin-bottom: 10px
        }

        .exe-qus li {
            border-radius: 17px;
            background-color: #fff;
            padding: 3px 17px;
            width: 150px;
            margin-bottom: 10px;
        }

        .transparent {
            width: 100%;
            background: transparent;
            position: absolute;
            bottom: 10px;
            height: 28px;
            overflow: hidden;
        }

        /*  .animate{ */
        /*    opacity:0; */
        /*    transform: translateY(30px); */
        /*    animation: moveup 0.5s linear forwards; */
        /* } */
        @keyframes moveup {
            100% {
                /*                 opacity: 1; */
                /*                 transform: translateY(0px); */
            }
        }

        @media(max-width:557px) {
            .modal-lg {
                max-width: 100%;
            }
        }

        /*  .star-place:hover .subnav-cards { */
        /*     padding: 5px; */
        /*     border-radius: 21px; */
        /*     background: #ecb4e03d; */
        /*    } */
        /*    .star-place:hover .submenu-star{ */
        /*     position: absolute; */
        /*     top: 24px !important; */
        /*     left: 98px !important; */
        /*    } */
        /*    .star-place:hover .subnav-img{ */
        /*      padding:10px */
        /*    } */

        .rcorners {
            position: relative;
            overflow: hidden;
        }

        .rcorners:hover .shine {
            display: block;
        }

        .shine {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)));
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
            pointer-events: none;
            z-index: 3;
            opacity: 0;
            transform: skew(30deg);
            animation: shine 0.75s linear 1;
        }

        @keyframes shine {
            0% {
                left: -50%;
                opacity: 0;
            }

            50% {
                left: 25%;
                opacity: 0.5;
            }

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

        /* .info-box{ */
        /* 	padding: 10px; */
        /*     border-radius: 12px; */
        /*     box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; */
        /*         background: white; */
        /* }  */



        @media (max-width:500px) {

            .drop-text,
            .languageslist {
                display: none;
            }

            .dropdown-menu.show {
                display: block;
            }

            .dropdownsuport {
                display: flex;
                flex-wrap: wrap;
                background: none;
                border: none;
                padding: 0 !important;
            }

            .drop-icon,
            .drop-icon-1 {
                padding-right: 0;

                vertical-align: sub;
                max-width: 30px !important;
            }

            .dropdownsuport hr {
                display: none;
            }

            .navbar-nav .dropdown-menu {
                position: inherit;
            }

            /* .dropdown-toggle{ */
            /* 	display:none; */
            /* } */

            .dropdownsuport .dropdown-item {
                margin-right: 6px;
            }

            .log-out {
                margin-right: 0 !important;
            }

            .navbar-nav {
                flex-wrap: wrap;
            }

            .dropdown-item:hover {
                background: var(--banner-color);
            }

            #navbarSupportedContent {
                margin-top: 5px;
            }

            /* hr{ */
            /*   display:none;	 */
            /* } */
            .dropdownsuport {
                display: none;
            }
        }

        @media (min-width:500px) {
            .suport-menu {
                display: none !important;
            }

        }

        .suport-icon {
            color: white;
            font-size: 22px;
            vertical-align: middle;
            padding: 10px;
        }

        /*  -----------animate------------------ */

        .myButt {
            box-shadow: -2px 8px 22px 0 rgba(65, 65, 65, 0.15);
            border-radius: 50%;
            display: flex;
            cursor: pointer;
            background-color: var(--white-clr);
            font-size: 14px;
            padding: 30px 15px 20px 15px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #ffffff;
            width: 100px;
            height: 100px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: relative;
            gap: 10px 30px;
            transform: translatey(0px);
            -webkit-animation: float 8s ease-in-out infinite;
            animation: float 8s ease-in-out infinite;
        }

        .avatar img {
            width: 100%;
            height: auto;
        }

        @keyframes float {
            0% {
                /*     box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
                transform: translatey(0px);
            }

            50% {
                /*     box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); */
                transform: translatey(-20px);
            }

            100% {
                /*     box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
                transform: translatey(0px);
            }
        }

        /* --------------------------------------- */
        /*  -------------cardhover-------------- */
        .subnav-cards {

            position: relative;



            text-decoration: none;
            z-index: 0;
            overflow: hidden;
        }

        .subnav-cards:before {
            content: "";
            position: absolute;
            z-index: -1;
            bottom: 0;
            background: var(--menu-shadow);
            height: 10px;
            width: 10px;
            border-radius: 32px;
            transform: scale(0);
            transform-origin: 50% 50%;
            transition: transform 0.25s ease-out;
            padding: 20px
        }

        .subnav-cards:hover:before {
            transform: scale(35);
        }

        .subnav-cards {
            border-radius: 24px
        }

        /*    .subnav-cards:hover .submenu-star{ */
        /*     position: absolute; */
        /*     top: 24px !important; */
        /*     left: 98px !important; */
        /*    } */
        /*    .subnav-cards:hover .subnav-img{ */
        /*      padding:10px */
        /*    } */

        /* -------------------------------------- */



        /*=== Trigger  ===*/
        .fadein {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        /*=== Optional Delays, change values here  ===*/
        .fadein {
            -webkit-animation-delay: 0.5s;
            -moz-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }



        /*==== FADE IN UP ===*/
        @-webkit-keyframes fadeInUp {
            from {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
            }

            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
            }

            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
        }

        .fadeInUp {
            -webkit-animation-name: fadeInUp;
            animation-name: fadeInUp;
        }

        /* -------------------------------------- */
        /* mic-animation */
        .box-mic {
            position: absolute !important;
            bottom: 34px;
            left: 39px;
        }

        .object {
            display: flex;
            flex: 0 1 100%;
            justify-content: center;
            align-items: center;
            align-content: stretch;
        }

        .outline {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 8px solid #B5A4A4;
            animation: pulse 3s;
            animation-timing-function: ease-out;
            animation-iteration-count: infinite;
            position: absolute;
        }

        .mic-button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #50CDDD;
            box-shadow: 0px 0px 80px #0084F9;
            position: absolute;
        }

        @keyframes pulse {
            0% {
                transform: scale(0);
                opacity: 0;
                border: 65px solid #0B3082;
            }

            50% {
                border: solid #A3FFC2;
                opacity: 0.8;
            }

            90% {
                transform: scale(3.2);
                opacity: 0.2;
                border: 3px solid #2E3CFF;
            }

            100% {
                transform: scale(3.3);
                opacity: 0;
                border: 1px solid #7A89FF;
            }
        }

        #delayed {
            animation-delay: 1.5s;
        }

        #circlein {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #6BD6E1;
            box-shadow: 0px -2px 15px #E0FF94;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mic-icon {
            height: 60px;
            position: absolute;
            margin: 21px;
        }

        .recordButton i {
            animation: shake 0.5s;
            animation-iteration-count: infinite;
        }

        .notification-card {
            transition: box-shadow .3s ease-in-out;
        }

        .notification-card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
        }


        @keyframes shake {
            0% {
                transform: scale(1, 1) translateY(0);
            }

            10% {
                transform: scale(1.1, .9) translateY(0);
            }

            30% {
                transform: scale(.9, 1.1) translateY(-1px);
            }

            50% {
                transform: scale(1.05, .95) translateY(0);
            }

            57% {
                transform: scale(1, 1) translateY(-3px);
            }

            64% {
                transform: scale(1, 1) translateY(0);
            }

            100% {
                transform: scale(1, 1) translateY(0);
            }
        }

        .subnav-bg {
            background: black;
        }

        .sublist-text {
            position: relative;
        }

        .sublist-text {
            transition: .3s all;
        }

        .sublist-text::after {
            content: "";
            position: absolute;

            width: 0;
            height: 2px;
            left: 0;
            bottom: -1px;
            background: linear-gradient(156deg, rgba(21, 16, 93, 1) 0%, rgba(247, 5, 164, 1) 90%);
            transition: .3s all;
        }

        .classbody:hover .sublist-text:after {
            width: 100%;
        }

        .sec-graph {
            background: var(--lite-rose);
            padding: 5px 10px;
            border-radius: 8px;
        }

        .setings-detail {
            border: 1px solid #7d52ab;
            padding: 10px;
            border-radius: 13px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /*  loder--------------------------------------------------- */
        .load-container {
            display: flex;
            height: 100px;
            widht: 100%;
            justify-content: center;
            align-items: center;
        }

        .loading-wave {
            width: 300px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .loading-bar {
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background-color: #7d52ab;
            border-radius: 5px;
            animation: loading-wave-animation 1s ease-in-out infinite;
        }

        .loading-bar:nth-child(2) {
            animation-delay: 0.1s;
        }

        .loading-bar:nth-child(3) {
            animation-delay: 0.2s;
        }

        .loading-bar:nth-child(4) {
            animation-delay: 0.3s;
        }

        @keyframes loading-wave-animation {
            0% {
                height: 10px;
            }

            50% {
                height: 50px;
            }

            100% {
                height: 10px;
            }
        }



        /*  dahs new----------------------------------------------------------- */
        .franchisee-head {
            background: #f5dcf59c;
            padding: 5px 15px;
            margin-bottom: 10px;
            border-radius: 8px;
        }

        .franchisee {
            background: #f6cbf68a;
            ;
            padding: 10px;
            font-weight: 600;
            margin: 0;
        }

        .franchisee-prgm {
            padding: 0 20px;
            line-height: 35px;
        }

        .franchisee-prgm ul {
            display: inline-block;
            width: 100%;
        }

        .franchisee-prgm ul li {
            display: flex;
        }

        .franchisee-prgm ul li span:first-child {
            width: 100%;
        }

        .franchisee-ftr {
            padding: 10px;
            background: #f6cbf68a;
            border-radius: 0 0 16px 16px;
        }

        .franchisee-ftr1,
        .franchisee-ftr2 {
            padding: 0 10px;
        }

        .franchisee-ftr1 h3 {
            font-weight: 600;
        }

        .franchisee-img {
            position: relative;
        }

        .franchisee-count {
            position: absolute;
            right: 13px;
            bottom: 5px;
            border: 1px solid #c322c2db;
            border-radius: 25px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #c322c22e;
            color: #e30a7e;
        }

        .revenue span {
            font-size: 40px;
            font-weight: 600;
            color: #7d52ab;
        }

        .revenue h6 {
            margin: 0;
        }

        .expand-dash {
            border: 1px solid #7d52ab;
            background: #7505ec12;

            border-radius: 10px;
        }

        .expand-dash {
            display: flex;
            align-items: center;
        }

        /*  --------filter-------------------------------------------------------- */
        .filteroptionsModal {
            width: 100%;
            min-height: 88%;
            position: fixed;
            z-index: 999;
            top: 0;
            transition: .3s;
            overflow-x: auto;
            background: white;

        }

        .workloa-fl,
        .jobcatlog-fl,
        .jobshift-fl,
        .jobtype-fl,
        .language-fl {
            display: none;
        }

        @media (max-width:775px) {

            .workloa-fl,
            .jobcatlog-fl,
            .jobshift-fl,
            .jobtype-fl,
            .language-fl {
                display: flex;
            }

            .filter-section {
                background: #e0e9f1;
                width: 36%
            }
        }

        @media (max-width:775px) {
            .filter-heading {
                margin: 0px !important;
            }

            #filter-list .active {
                background: #fff;
            }

        }

        .closeFilter {
            display: none;
        }

        .of_mention {
            display: block;
            padding: 0px 5px;
            position: absolute;
            right: -14px;
            top: 10px;
            background-color: #f50000a3;
            color: #fafdf4;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            font-size: 10px;
            transform: rotate(45deg);
            clip-path: polygon(22% 0, 77% 0, 94% 67%, 102% 100%, 0 100%, 0 94%);
            width: 63px;
            text-align: center;
        }

        .toggle-password {
            float: right;
            cursor: pointer;
            margin-right: 26px;
            margin-top: -44px;
        }

        .note-editable ul {
            list-style-type: disc !important;
            /* or circle/square */
            padding-left: 18px !important;
            /* required to show bullets */
            margin: 0.5rem 0 !important;
        }

        .note-editable ul li {
            list-style-type: disc !important;
        }

        .note-editable ol {
            list-style-type: decimal !important;
            padding-left: 18px !important;
        }

        .note-editable ol li {
            list-style-type: decimal !important;
        }

        .summernoteDiv h4 {
            color: inherit !important;
            background: none !important;
            font-size: x-large !important;
            font-weight: normal !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        @media (max-width:500px) {
            .dropdown-divider {
                display: none;
            }

        }

        @media (max-width:769px) {
            .dataTables_length {
                margin-bottom: 10px;
            }

            .subcard-text {
                word-break: break-all;
            }
        }

        .divLogo {
            max-width: 311px;
            height: auto;
            overflow: hidden;
            display: flex;
            align-items: end;
            background-color: transparent;
            position: relative;
        }

        #my_img {
            max-width: 100%;
            max-height: 200px;

        }

        .note-dropdown-menu h4 {
            background: none;
            color: #000;
            font-size: 20px;
            font-weight: bold;
        }

        .MsoNormal {
            margin: 0 !important;
        }

        a:focus-visible {
            outline: none;
            border: 1px solid #7d52ab8c;
            box-shadow: 0 0 5px #c1a3e1;
            border-radius: 8px;
        }

        .subnavItem {
            display: block;
            /*    border: 2px solid transparent; */
            /*     padding: 6px;  */
        }

        a:focus-visible .subnav-img {
            margin-left: 10px;
        }

        a:focus-visible .submenu-star {
            position: absolute;
            top: 20px !important;
            left: 115px !important;
            z-index: 2;
            width: 5%;
        }

        .select2-container .select2-selection--single {
            height: 50px !important;
            line-height: 50px !important;
            padding: 10px 15px;
            border-radius: 8px !important;

        }

        .select2 {
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 50px !important;
        }

        .select2-container--default .select2-search--dropdown {
            position: relative;
        }

        /* Add right padding to the search input field to make room for the icon */
        .select2-container--default .select2-search--dropdown .select2-search__field {
            padding-right: 30px !important;
            /* Adjust padding as needed */
        }

        /* Use a pseudo-element to display the search icon on the right side */
        .select2-container--default .select2-search--dropdown::after {
            content: "";
            position: absolute;
            right: 15px;
            top: 40%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: url('https://cdn-icons-png.flaticon.com/512/622/622669.png') no-repeat center center;
            background-size: 16px 16px;
            pointer-events: none;
            /* Ensures clicks go to the input below */
        }

        .error {
            color: red;

            font-size: 15px !important;
        }

        /* ---------------------------------naac------------------------- */
        .criteria-header {
            cursor: pointer;
            user-select: none;
            position: relative;
            padding: .5em .5em .5em .7em;
            border-radius: 5px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }


        .criteria-header.refer {
            border-left: 5px solid #0d6efd;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

        }

        .criteria-header,
        .referral-header {
            background-color: #e9ecef;

        }

        .criteria-header.active {
            background-color: var(--banner-color);
            color: white;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        }


        .criteria-content {
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.4s ease, padding 0.4s ease;
            padding: 0 1rem;



        }

        .criteria-content.active {
            max-height: 1000px;

        }

        #accordion h3::before {
            font-family: "FontAwesome";
            font-weight: 900;
            content: "\f067";
            margin-right: 20px;

        }

        .ui-accordion-header-icon {
            display: none !important;
        }

        .referral-header.active {
            background-color: var(--banner-color);
            color: white;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);

        }

        @media only screen and (max-width: 576px) {
            .modal-xl {
                max-width: 100%;
            }
        }

        .action-buttons a:hover {
            cursor: pointer !important;
        }

        .dropdownsuport {
            z-index: 10000;
        }

        /* -----------------------new Design--------------------------- */


        .modal_subhead {
            background: linear-gradient(90deg, rgba(87, 42, 155, 1) 0%, rgba(164, 87, 199, 1) 82%, rgba(214, 83, 237, 1) 100%);
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgb(128 66 178 / 43%);
            margin-bottom: 10px;
        }

        .modal_subhead h5 {
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 0px;
        }

        .modal_inbox {
            box-shadow: 0 4px 8px rgb(128 66 178 / 18%);
            border: 1px solid #914cbc21;
            height: 45px;
            border-radius: 8px;
        }

        .pill {
            background: #eff6fb;
            padding: 10px;
            border-radius: 8px;
            border-left: 3px solid #7d52ab;
        }

        .pill h6 {
            font-size: 18px;
            margin: 0;
            /* border-radius: 8px; */
            font-weight: 600;
            color: #7D52AB;
        }

        .bread_crums {

            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        @media (max-width:500px) {
            .bread_crums {

                display: block;

            }

            .bread_crums_btn {
                float: right;
            }
        }

        .round-bar:hover,
        .whatsapp:hover img {
            animation: upDown 0.6s ease-in-out;
        }

        @keyframes upDown {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-4px);
                /* move up */
            }
        }


        .subnav-cards:hover img {
            animation: floatUpDown 1.5s ease-in-out infinite;
        }




        @keyframes floatUpDown {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-3px);
            }
        }


        .side_header {
            font-size: 24px;
        }


        .action-buttons svg:hover,
        .action-buttons svg:focus-visible {
            animation: icon-wobble .45s linear both;
        }



        @keyframes icon-wobble {
            0% {
                transform: rotate(0);
            }

            20% {
                transform: rotate(-8deg);
            }

            40% {
                transform: rotate(8deg);
            }

            60% {
                transform: rotate(-5deg);
            }

            80% {
                transform: rotate(5deg);
            }

            100% {
                transform: rotate(0);
            }
        }




        /* boom */


        .categoryoption:hover .view-items-sec {
            animation: boom 0.6s cubic-bezier(.28, .84, .42, 1);
        }

        .mediaType:hover img {
            animation: boom 0.6s cubic-bezier(.28, .84, .42, 1);
        }

        @keyframes boom {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .modal {

            background: #0000001f;
        }



        .table_headbox {
            border: 1px solid #b9b8bb6e !important;
            padding: 14px 15px !important;
            border-radius: 11px !important;
            box-shadow: 0px 6px 8px #b9b8bb6e !important;
            margin-bottom: 1.5rem !important;
        }

        .table_headbox .form-select {
            line-height: 1.5 !important;
            border-radius: 0.375rem;
        }

        .dataTables_filter input {
            margin: 0 !important;
            border-radius: 0.375rem;
            width: 100% !important;
            padding: 2px 10px;
        }

        @media only screen and (max-width: 767px) {
            .dataTables_filter input {
                margin-bottom: 10px !important;
            }
        }

        .dataTables_filter label {
            width: 100% !important;
        }


        .table {
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 1px 4px 8px #b9b8bb6e !important;
        }

        table.dataTable tbody tr:nth-child(odd) {
            background-color: #f8f9fa;
        }

        table.dataTable tbody tr:nth-child(even) {
            background-color: #f1f3f4;
        }

        table.dataTable tbody tr:hover {
            background-color: #e9ecef;
        }

        .pagination {
            gap: 3px !important;
        }

        .pagination .previous,
        .pagination .next {

            border-radius: 0.5rem !important;

        }

        .page-item.active .page-link {
            border-radius: 0.5rem !important;
        }

        .page-link {
            border-radius: 0.5rem !important;
        }

        .dtactions {
            display: none;
        }

        .sorting:before,
        .sorting:after {
            display: none !important;
        }

        .sorting_asc:before,
        .sorting_asc:after {
            display: none !important;
        }


        .modal-dialog {
            top: 20px !important;
        }

        .left-icon-bar li a,
        .left-icon-bar li button {
            color: var(--side-menu);
        }

        .sidebar-menu img {

            border: 1px solid var(--side-menu) !important;
        }

        .left-icon-bar li a:hover,
        .left-icon-bar li button:hover {
            color: var(--side-menu);
        }

        /*   loader animation   */
        #globalLoader {
            position: fixed;
            inset: 0;
            background: linear-gradient(0deg, rgba(255, 255, 255, 1) 28%, rgba(87, 199, 133, 0) 100%);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        #globalLoader {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #globalLoader span {
            display: block;
            width: 10px;
            height: 40px;
            margin: 0 6px;
            border-radius: 8px;
            background: var(--side-menu);
            transform: scaleY(0.4);
            animation: wave 1.2s ease-in-out infinite;
            opacity: 0.7;
        }

        /* Delay for wave effect */
        #globalLoader span:nth-child(1) {
            animation-delay: 0s;
        }

        #globalLoader span:nth-child(2) {
            animation-delay: 0.1s;
        }

        #globalLoader span:nth-child(3) {
            animation-delay: 0.2s;
        }

        #globalLoader span:nth-child(4) {
            animation-delay: 0.3s;
        }

        #globalLoader span:nth-child(5) {
            animation-delay: 0.4s;
        }

        @keyframes wave {

            0%,
            100% {
                transform: scaleY(0.4);
                opacity: 0.6;
            }

            50% {
                transform: scaleY(1);
                opacity: 1;
            }
        }


        /* 	min-height: 100vh; */
        /*     display: grid; */
        /*     grid-template-rows: auto 1fr auto; */
        /* } */
        .section-body {
            padding: 20px;
        }

        .data-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 1.5rem;
        }

        /* Field Width Classes */
        .field-full {
            grid-column: span 12;
        }

        /* 1 column - IMPORTANT */
        .field-half {
            grid-column: span 6;
        }

        /* 2 columns */
        .field-third {
            grid-column: span 4;
        }

        /* 3 columns */
        .field-quarter {
            grid-column: span 3;
        }

        /* 4 columns */

        .data-field {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 10px 1rem;
            ;
            background: #f1f5f9;
            border-radius: 0.5rem;
            border-left: 3px solid var(--span-text);
            transition: all 0.2s ease;
        }

        .data-field:hover {
            background: #f0f7ff;
            border-left-color: var(--span-text);
            transform: translateX(4px);
        }

        .data-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
        }

        .data-value {
            font-size: 0.9375rem;
            font-weight: 500;
            color: #1e293b;
            word-break: break-word;
        }

        .data-value:empty::before {
            content: '�';
            color: #94a3b8;
            font-style: italic;
        }


        @media (max-width: 768px) {

            .field-full,
            .field-half,
            .field-third,
            .field-quarter {
                grid-column: span 12;
            }

            .summeryhead {
                order: 2;
                margin-top: 20px;
            }
        }

        .text-container {
            max-width: 250px;
        }

        .two-line-text {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-word;
        }

        .view-more {
            display: block;
            color: var(--span-text);
            cursor: pointer;
            font-size: 12px;
        }

        /* --------------------------------------------- */
        ul .discribody {
            display: flex;
        }

        .tabView {
            display: inline-block;
            width: 100%;

        }

        .tabView li {
            margin-bottom: 10px;
            border: 1px solid #d5e3eb;
            border-radius: 5px;
            padding: 7px;
            background: #f1f8ffd1;
            display: flex;
        }

        .tabView li span:first-child {

            width: 144px;
        }

        .tabView li span:last-child {
            text-align: right;
        }

        .tabView li span {
            width: calc(100% - 144px);
        }

        /* ----------------------------------------------- */

        @media (max-width:500px) {
            .apexcharts-legend {
                /* top: 20px !important; */
            }
        }

        .print-sub-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: white;
            box-shadow: 1px 4px 10px #b9b8bb6e !important;
            padding: 10px 10px;
            margin: 14px 0;
            border-radius: 10px;
            font-size: 18px;
        }