@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;
        }
        
         :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";
        }
        
        *,
        *::after,
        *::before {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            font-family: 'AmpleSoftPro';
            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;
            }
        }
        
        @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: 20px;
  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: 15px !important;
            font-weight: 600;
        }
        
        .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-color: var(--black-clr);
            margin-right: 30px;
        }
        
        .round-bar {
            background-color: var(--banner-color);
            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: 1000;
            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;
        }
        
        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: 300px;
            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;
        }
        
        .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: 50px;
            width: 50px;
            border: 1.5px solid #f5f6fa;
        }
        
        .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: 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;
        }
        
        .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;
        }
        
        .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: -2px 8px 22px 0 rgb(0 0 0 / 15%);
            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: 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;
        }
        /*         
        .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: -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;
        }
        
        .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;
        }
        
        .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;
        }
        
        .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;}
  }
  
  .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:var(--lite-rose);
  padding: 5px 29px;
  }
  .color-code:nth-of-type(odd) {
  background-color: var(--lite-blue);
 
}
.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;

    }
    
 .view-list1 .head-w2
     {
    width: 100%;
    background-color: var(--banner-color);
    color: var(--white-clr);
     padding: 5px 10px;
    margin-top: 20px;

    }
    
   .view-list1 .head-w3
       {
    width: 100%;
    background-color: var(--banner-color);
    color: var(--white-clr);
     padding: 5px 10px;
    margin-top: 20px;

    }
    
       .view-list1 .head-w4
       {
    width: 100%;
    background-color: var(--banner-color);
    color: var(--white-clr);
     padding: 5px 10px;
    margin-top: 20px;

    }
  
  

  .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;
  
  	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:140px;
    }
  }
  

  [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: #ecb4e03d;
  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: #f7d1e6;
          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%;
 }