/* html{
    background: white;
} */

.mt-5rem {
    margin-top: 5rem;
}

.login-container {
    width: 492px;
    padding: 10px 16px;
}

.login-container-login {
    margin-top: 4rem;
    width: 492px;
    padding: 10px 16px;
}

.w-92 {
    width: 92%;
}

small a {
    color: #40b662 !important;
}

.form-register {
    width: -webkit-fill-available !important;
    padding-left: 10px;
}

.btn-border-dark-purple {
    border: 2px solid #673c71;
}

.header-btn {
    border: 1px solid #673c71;
    padding: 0.35rem 0.75rem !important;
    min-width: 6rem;
}

.btn-padding-y {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.link-bg-green {
    background-color: rgb(144, 238, 144, 0.1);
}

.lms-bg-orange-rgb {
    background-color: rgb(255, 250, 219);
}

.header-opacity {
    opacity: 0.7;
}

.header-opacity:hover {
    opacity: 1 !important;
    color: #fff !important;
}

.header-btn-p-r {
    padding-right: 44px;
}

.userIcon {
    display: none !important;
}

.user-management-container {
    padding-right: 100px;
    padding-left: 100px;
}

.header-bg {
    background: #38233e;
    background: -webkit-linear-gradient(left, #38233e, #684772);
    background: -moz-linear-gradient(left, #38233e, #684772);
    background: linear-gradient(to right, #38233e, #684772);
}

.popover-body {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem !important;
    border: 0;
}

.popover {
    border: 0;
}

.user-invite-container {
    width: 408px;
    padding-right: 22px;
    padding-left: 22px;
}

.school-info-container {
    width: 408px;
    padding-right: 22px;
    padding-left: 22px;
}

.personal-info-container {
    width: 408px;
    padding-right: 22px;
    padding-left: 22px;
}

.fancy-checkbox-c input[type="radio"] {
    display: none;
}

.fancy-checkbox-c span:before {
    color: #979fbd;
    font-size: 19px;
    font-family: "FontAwesome";
    font-style: normal;
    width: 1em;
    height: 1em;
    content: "\f10c";
    margin-right: 0.3em;
    position: relative;
    top: 2px;
}

.fancy-checkbox-c input[type="radio"]:checked ~ span:before {
    content: "\f05d";
    color: #ef5b6d;
}

.fancy-checkbox-c {
    cursor: pointer;
}

.invite-line {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.close-icon {
    position: absolute;
    left: 409px;
    bottom: 81px;
    font-size: 20px;
}

.close-icon-b {
    position: absolute;
    left: 409px;
    bottom: 24px;
    font-size: 20px;
}

.user-delete-container {
    width: 504px;
    padding-right: 22px;
    padding-left: 22px;
}

.delete-close-icon {
    position: absolute;
    left: 429px;
    bottom: 213px;
}

.delete-class-icon {
    position: absolute;
    left: auto;
    top: 10px;
    right: 20px;
    z-index: 20;
    font-size: 20px !important;
}

.modal-header {
    border-bottom: none;
    padding: 0.5rem 1rem;
}

.modal-custom-body {
    background: #00000000;
    position: relative;
    top: -1.5rem;
}

.checkbox-modal {
    margin-left: -0.4rem;
}

.popup-btn-padding {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.header-btn-padding {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.close-container {
    position: relative;
}

.err-img {
    position: relative;
    margin-top: 3rem;
}

.header-signout-btn {
    display: block;
}

.header-signout-icon {
    display: none !important;
}

.active-user-greeen {
    background: rgba(64, 182, 98, 0.1);
    padding: 0.6rem 1rem 0.6rem;
    border-radius: 0.5rem;
}

.pointer {
    cursor: pointer;
}

.ul-p-l {
    padding-left: 1rem;
    white-space: nowrap;
}

.bottom__line {
    position: absolute;
    top: 38px;
    left: 39px;
    width: 101px;
    height: 2px;
    background-color: #fbce0f;
}

.bottom__active {
    transform: translate3d(0%, 0, 0);
    transition: all linear 240ms;
}

.bottom__active1 {
    transform: translate3d(136%, 0, 0);
    transition: all linear 240ms;
}

.bottom__active2 {
    transform: translate3d(251%, 0, 0);
    transition: all linear 240ms;
}

.color,
.color1,
.color2 {
    opacity: 1;
    transition: all linear 100ms;
}

.header-li-mr {
    margin-right: 2rem;
}

.email-msg-bg {
    background-color: rgb(64, 182, 98, 0.1);
}

.header-bg-grey {
    background-color: rgb(151, 151, 151, 0.4);
}

.header-dropdown {
    left: 160px !important;
}

.trial-container {
    padding-left: 100px;
    padding-right: 100px;
}

.first-card .card-header {
    background-color: rgb(151, 159, 189, 50%) !important;
    border-bottom: 0 !important;
}

.sec-card .card-header {
    background-color: rgb(103, 60, 113, 41%) !important;
    border-bottom: 0 !important;
}

.third-card .card-header {
    background-color: rgb(103, 60, 113, 82%) !important;
    border-bottom: 0 !important;
}

.sec-card .card-body {
    background-color: rgb(103, 60, 113, 32%) !important;
}

.first-card .card-body {
    background-color: rgb(151, 159, 189, 39%) !important;
}

.card-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.line-opacity {
    opacity: 0.4;
}

.trial-p-bg {
    background-color: rgb(151, 159, 189, 20%);
}

.slider-tick-label {
    bottom: 28px !important;
    color: #979fbd !important;
    font-size: 12px;
    line-height: 18px;
}

.slider-handle {
    background-color: #673c71;
    background-image: linear-gradient(to bottom, #673c71, #673c71);
}

.slider-selection.tick-slider-selection {
    background-color: #673c71;
    background-image: linear-gradient(to bottom, #673c71, #673c71);
}

.slider-tick.in-selection {
    background-color: #673c71;
    background-image: linear-gradient(to bottom, #673c71, #673c71);
}

.slider-p-t {
    padding-top: 29px;
}

#accordion .card-header {
    border-radius: 0.625rem !important;
    background-color: #fff !important;
    border-bottom: 0.625rem !important;
}

#accordion .card {
    border-radius: 0.625rem !important;
}

.help-bg {
    background-color: rgb(151, 159, 189, 20%);
}

.export-report-btn {
    margin-right: 2rem;
    display: inline-block;
}

.bottom__line__dashboard {
    position: absolute;
    top: 38px;
    left: 32px;
    width: 66px;
    height: 2px;
    background-color: #fbce0f;
}

.annuall-dashboard-container {
    padding-left: 100px;
    padding-right: 100px;
    margin-top: 2.5rem;
}

.progress {
    height: 0.5rem !important;
    border-radius: 25px !important;
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.progress-100 {
    background-color: #ecf8f0;
}

.progress-bar-100 {
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
        inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    background-color: #38b663;
}

.progress-75 {
    background-color: rgb(251, 206, 15, 20%);
}

.progress-bar-75 {
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 1),
        inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    background-color: #fbce0f;
}

.active-user-orange {
    background-color: rgb(251, 206, 15, 20%);
    padding: 0.6rem 1rem 0.6rem;
    border-radius: 0.5rem;
}

.active-user-green {
    background: rgba(64, 182, 98, 0.1);
    padding: 0.4rem 1rem 0.6rem;
    border-radius: 0.5rem;
}

.nav-item-invite {
    /* border-bottom: 3px solid #d9e6f5 !important; */
}

.expire-position {
    top: 7px;
    position: relative;
    left: 44px;
}

::-webkit-scrollbar {
    width: 0px;
}

.select2-results__options::-webkit-scrollbar {
    width: 2px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #afaaaa;
    border-radius: 10px;
}

.top-menu {
    overflow-y: scroll;
    scrollbar-width: thin !important;
    scrollbar-color: #00000000 #00000000;
}

.top-menu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #00000000;
    border-radius: 10px;
}

.top-menu::-webkit-scrollbar-thumb {
    background: #00000000;
    border-radius: 10px;
}

.top-menu ::-webkit-scrollbar-thumb:hover {
    background: #b3000000;
}

.free-account {
    background-color: rgb(103, 60, 113, 15%);
    padding: 0.4rem 1rem 0.6rem;
    border-radius: 0.5rem;
}

.footer-container {
    width: 100%;
    margin-left: 116px;
    margin-right: 100px;
}

.dashboard-avatar {
    top: 19px;
    position: relative;
    right: 7px;
}

.fancy-checkbox-c {
    position: relative;
    left: 17px;
}

.second-th:before {
    content: none !important;
}

.second-th:after {
    content: none !important;
}

.thead th:first-child {
    border-top-left-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;
    border-top: 0px !important;
}

.thead th:last-child {
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
    border-top: 0px !important;
}

.login-container a:hover {
    color: rgb(103, 60, 113);
}

.invalid-feedback {
    display: unset !important;
}

.dropdown-menu.show {
    /* left: auto !important;
    right: 8px !important; */
}

.dropdown-lang.show {
    left: -86%;
}

.people-img {
    width: 32px;
    height: 32px;
}

.people-role {
    text-align: right;
}

/* loader */

.loading {
    z-index: 200000;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
}

.loading-content {
    position: absolute;
    background: url(../img/loader.png) center no-repeat;
    width: 91px;
    height: 88px;
    top: 46%;
    left: 46%;
    animation: spin 2s linear infinite;
}

.modal {
    z-index: 1000001 !important;
}

.modal-backdrop {
    z-index: 1000000;
}

.modal-dialog {
    /* margin-top: 7% !important; */
}

.bs-popover-bottom {
    z-index: 1;
}

.std-num-card {
    border: 1px solid #ced4da;
    padding: 1.2rem;
}

.timeline .time-show.activity {
    max-width: 100px;
}

.std-num-card:hover {
    border: 1px solid #673c71;
    background-color: rgb(103, 60, 113, 15%);
}

.std-num-card-active {
    border: 1px solid #673c71;
    background-color: rgb(103, 60, 113, 15%);
}

.license-container {
    margin-top: 6rem;
    padding-right: 157px;
    padding-left: 157px;
}

.license-line {
    margin-left: -17px;
    margin-right: -15px;
}

.license-total-bg {
    background-color: rgb(192, 209, 229, 13%);
}

.transfer-bg {
    background-color: rgb(255, 207, 19, 13%);
}

.num-input {
    width: 39%;
}

iframe {
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
    display: block;
    width: 100%;
    height: 500px;
    /* border: 20px solid #683b72; */
}

.modal-dialog-centered {
    justify-content: center !important;
    /* margin-top: 25vh !important; */
}

.modal-content {
    /* padding-left: 30px;
    padding-right: 30px; */
    border-radius: 0.625rem !important;
    border: none !important;
}

.signup-std-number-box {
    margin: auto !important;
}

.successfull-body .modal-content {
    padding: 50px 30px;
    border-radius: 2.3rem !important;
}

.modal-body div input {
    /* background-color: #f9f9f9;
    border: 1px solid lightgray; */
    /* border-radius: 7px;
    width: 11rem;
    left: -3.75rem; */
}

.modal-info-user-input {
    background: #faf9fa;
    position: relative;
    top: -4px;
}

.btn-border-dark-purple:hover {
    background-color: #673c71;
    color: #ffffff;
}

.btn-hover:hover {
    background-color: #ffffff !important;
    color: #673c71;
    border: 2px solid #673c71;
}

.input-copy {
    background-color: #ffffff;
    opacity: 1;
    border: 1px solid #dfe3ee;
}

button:focus {
    outline: 0px dotted;
    /* outline: 5px auto -webkit-focus-ring-color; */
}

.curriculum-container {
    margin-top: 3rem;
    width: 744px;
    height: 1681;
    padding: 10px 16px;
}

.lesson-bg {
    background-color: white;
}

.disabled-button {
    background-color: #979fbd !important;
}

#datatableCurriculum table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
    right: 1em;
    content: "";
}

.control-feedback-table-cur {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #c5cee0;
    margin-top: 3.5rem;
    font-size: 23px !important;
    left: 17px;
}

#datatableCurriculum table.dataTable {
    border-collapse: separate !important;
}

#datatableCurriculum .table td {
    border-top: 0px solid #eff3f9;
}

.pagination .page-item .page-link {
    margin-left: 2px;
    margin-right: 2px;
    -webkit-border-radius: 0.562rem !important;
    border-radius: 0.562rem !important;
}

.pagination .page-item .page-link:hover {
    -webkit-border-radius: 0.562rem;
    border-radius: 0.562rem;
}

.pagination .page-item.active .page-link {
    -webkit-border-radius: 0.562rem;
    border-radius: 0.562rem;
}

.pagination .page-item {
    margin-left: 2px;
    margin-right: 2px;
    -webkit-border-radius: 0.562rem;
    border-radius: 0.562rem;
}

.pagination .page-item .page-link:hover {
    -webkit-border-radius: 0.562rem;
    border-radius: 0.562rem;
}

.pagination .page-item.active .page-link {
    -webkit-border-radius: 0.562rem;
    border-radius: 0.562rem;
}

.page-link {
    background-color: #eff3f9;
    border: none;
    color: black;
}

.page-item.disabled .page-link {
    background-color: #eff3f9;
    border: none;
}

.previous a,
.next a {
    color: #979fbd !important;
}

#classroom-filter select {
    background-color: #eff3f9;
    border: none;
    padding: 0;
    width: 19px;
}

#level-filter select {
    background-color: #eff3f9;
    border: none;
    padding: 0;
    width: 19px;
}

.level-filter-dev {
    position: absolute;
    z-index: 10000;
    /* top: -3px; */
    /* z-index: 10000; */
    right: 25px;
    /* top: 70px; */
}

.assignment-filter-dev {
    position: absolute;
    top: -44px;
    z-index: 10000;
    right: 18px;
}

.lang-list {
    position: relative;
    top: 54px;
    left: 641px;
}

.ml-hide {
    position: absolute;
    right: 22px;
}

.border-top-left-r {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.border-bottom-left-r {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.p-h-l-4 {
    padding-left: 1.5rem;
}

.tab-active {
    border-bottom: 3px solid #673c71;
    opacity: 1 !important;
}

.scroll-y {
    height: 426px;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* width */

.scroll-y::-webkit-scrollbar {
    width: 10px;
}

/* Track */

.scroll-y::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */

.scroll-y::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 10px;
}

/* Handle on hover */

.scroll-y::-webkit-scrollbar-thumb:hover {
    background: #dee2e6;
}

.edit-close-icon {
    position: absolute;
    left: 438px;
    bottom: 246px;
}

.delete-email-icon {
    position: absolute;
    left: 326px;
    bottom: 187px;
}

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

.form-control[readonly] {
    background-color: #fff;
    opacity: 1;
}

.fancy-checkbox-header span::before {
    /* top: 2px !important; */
}

.csv-table .thead {
    background-color: #e1e5ef94;
}

.period {
    width: 0;
}

.method {
    width: 0;
}

/* feed back */

.feed-radius {
    border-top-left-radius: 1.5rem;
    width: auto;
    position: fixed;
    z-index: 10000;
    bottom: -28px;
    padding: 0.8rem 1rem !important;
    right: 0px;
    margin-bottom: 20px;
}

.feed-radius-mob {
    border-top-left-radius: 0.5rem;
    width: auto;
    position: fixed;
    z-index: 10000;
    bottom: -29px;
    padding: 0.8rem 0.5rem !important;
    right: 0px;
}

.feedImage {
    margin-top: -9px;
}

.feedback_group {
    width: 307px;
    max-height: 400px;
    position: fixed;
    bottom: 70px;
    right: 13px;
    background: #ffffff;
    z-index: 10000;
    border-radius: 0.625rem;
    box-shadow: 0px 4px 16px 4px rgb(30 32 41 / 15%);
}

.feedback_group textarea {
    resize: none;
}

.feedback_content {
    max-height: 370px;
    overflow-y: auto;
    padding: 10px;
}

.feedback_top {
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
}

.close-feed-animation {
    opacity: 0;
    transition: opacity 0.6s linear;
}

/* feed back */

/* Animation */

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
}

.animatedFadeInUp {
    opacity: 0;
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

/* Animation */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 1024px) {
    .personal-info-container {
        margin-top: 18rem !important;
    }

    .license-container {
        margin-top: 12rem;
    }

    .header-buttons-margin {
        margin-top: 3rem !important;
        margin-right: -9.4rem !important;
    }

    .lang-list {
        left: 643px;
    }
}

@media (max-width: 768px) {
    .personal-info-container {
        margin-top: 10rem !important;
    }

    .display-elem {
        display: none;
    }

    .trial-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .license-container {
        padding-right: 0px;
        padding-left: 0px;
    }

    .lang-list {
        left: 621px;
    }

    .container-index-classrooms {
        max-width: 100%;
    }
}

@media (max-width: 770px) {
}

@media (max-width: 500px) {
    .ul-p-l {
        padding-left: 0rem;
    }

    /* .header-btn-p-r {
        display: none;
    } */
    .userIcon {
        display: block !important;
    }

    .bottom__line {
        left: 29px;
    }

    .login-container {
        width: 385px;
    }

    .user-invite-container {
        width: 360px;
    }

    .school-info-container {
        width: 360px;
    }

    .user-delete-container {
        width: 320px;
    }

    .personal-info-container {
        width: 360px;
        margin-top: 0 !important;
    }

    .delete-user-mb {
        margin-bottom: 14rem;
    }

    .err-img {
        margin-top: 4rem;
    }

    .header-signout-btn {
        display: none;
    }

    .header-signout-icon {
        display: block !important;
    }

    .header-li-mr {
        margin-right: 1rem;
    }

    .bottom__active1 {
        transform: translate3d(96%, 0, 0);
        transition: all linear 240ms;
    }

    .bottom__active2 {
        transform: translate3d(196%, 0, 0);
        transition: all linear 240ms;
    }

    .header-mr {
        margin-right: 22px;
    }

    .annuall-dashboard-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .dashboard-footer-center {
        text-align: center;
    }

    .dashboard-footer-center .float-right {
        text-align: center !important;
        float: none !important;
    }

    .dashboard-footer-center .float-right div:first-child {
        margin-bottom: 0.5rem;
    }

    .delete-close-icon {
        left: 292px;
        bottom: 25px;
    }

    .close-icon {
        display: none !important;
    }

    .user-invite-container {
        width: auto;
        margin-top: 0 !important;
    }

    .slider-tick-label {
        width: 75px !important;
        font-size: 8px;
    }

    .people-role {
        text-align: center;
        padding-right: 0 !important;
        padding-bottom: 1rem;
    }

    .license-container {
        margin-top: 6rem;
        padding-right: 0px;
        padding-left: 0px;
    }

    .license-line {
        margin-left: -37px;
        margin-right: -17px;
    }

    .invite-students-con {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .invite-students-con {
        margin-left: 0 !important;
    }

    .curriculum-container {
        width: auto;
    }

    .lang-list {
        left: 263px;
        top: 4px;
    }

    #datatableCurriculum .thead th:first-child {
        border-top-left-radius: 0.625rem;
        border-bottom-left-radius: 0.625rem;
    }

    .header-btn-p-r {
        padding-right: 1rem;
    }

    .p-h-l-4 {
        padding-left: 0% !important;
    }

    .dropdown-lang.show {
        left: -149%;
    }

    .dataTables_length {
        bottom: auto;
    }
}

@media (max-width: 400px) {
    .login-container {
        width: 343px;
    }

    .school-info-container {
        width: 360px;
        margin-top: 0 !important;
    }

    .mobile-show {
        /* display: none; */
    }

    .header-logo-mobile {
        padding-left: 0% !important;
        padding-right: 0% !important;
        padding-top: 10%;
        padding-bottom: 12px;
    }

    .user-management-container {
        padding-right: 24px;
        padding-left: 27px;
    }

    .expire-position {
        left: 153px;
    }

    .dashboard-avatar {
        top: 0px;
        right: 0px;
    }
}

@media (max-width: 360px) {
    .login-container {
        width: 332px;
    }
}

@media (max-width: 315px) {
    .lms-font-size-16 {
        font-size: 14px;
    }

    .bottom__line {
        top: 35px;
        left: 26px;
    }

    .school-info-container {
        width: 320px;
    }

    .personal-info-container {
        width: 320px;
    }

    .login-container {
        width: 288px;
    }

    .mobile-show {
        display: none;
    }
}

.threeTap {
    color: black;
    border-bottom: 3px solid #d9e6f5 !important;
    height: 100%;
}

.threeTap.active {
    background-color: #d7d1df;
    color: #673c71;
    border-bottom: 3px solid #673c71 !important;
    height: 100%;
}

.threeTap:hover {
    background-color: #e3e2eb;
    border-bottom: 3px solid #d7d1df !important;
}

@media (max-width: 576px) {
    .threeTap:hover {
        color: #673c71;
        border-bottom: 3px solid #673c71 !important;
    }
}

.day-button {
    background-color: #d7d1df !important;
    border-radius: 10px;
    color: #1e2029 !important;
}

.sharLink {
    padding-right: 20px;
    left: 0px;
}

.added-emails {
    width: 100% !important;
}

.fileContainer {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin-bottom: 0.5rem !important;
}

.close-user {
    margin-top: 0.7rem;
    padding-right: 2rem;
}

.stepy-finish {
    color: #fff;
    background-color: #683b72;
    border-color: #683b72;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.footerInv {
    background-color: #ffffff !important;
    /* visibility: hidden; */
    /* margin-top: 3rem;
    position: relative; */
}

.mail-count {
    margin-top: 12px;
}

.mail-count-panding {
    /* margin-top: 12px; */
    margin-left: 2rem;
    color: #585e75;
}

.group-list {
    margin-top: -1.4rem;
    margin-right: -24px !important;
    margin-left: -16px !important;
}

.profileImage {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #979fbd;
    font-size: 26px;
    color: #fff;
    text-align: center;
    margin-top: 10px;
    /* margin-left: 3px; */
    left: 6px;
    line-height: 33px;
    position: relative;
    top: 0px;
    left: 0px;
}

.name-image {
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-weight: 900;
    position: relative;
    top: 4px;
}

.nameSub {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 8px 13px 15px 15px;
    background: #979fbd;
    text-align: center;
    /* margin-top: 1rem; */
}

.mail-pos {
    margin-left: 0.5rem !important;

    margin-top: 0.9rem !important;
}

.befor-dev {
    top: 28px;
}

@media (max-width: 576px) {
    .inv_again {
        display: block;
    }
}

@media (max-width: 576px) {
    .nav-mobile {
    }
}

.curriculum-block {
    background-color: white !important;
    padding-top: 0px !important;
}

.lessons {
    background-color: #dfe3ee;
    color: #585e75;
    border-radius: 4px;
    padding: 4px 8px;
    margin-left: 10px;
}

.curriculum-title {
    color: #585e75 !important;
}

.curriculum-title:hover {
    background: #dfe3ee !important;
    color: #585e75 !important;
}

.curriculum-title.active {
    background-color: white !important;
    color: #1e2029 !important;
    border-radius: 10px !important;
    box-shadow: 0px 4px 8px 4px rgba(30, 32, 41, 0.05);
    contain: style();
}

.curriculum-title img {
    display: none;
}

.curriculum-title:hover img {
    display: flex;
}

.curriculum-title.active img {
    display: flex;
}

.tab-link-disabled {
    pointer-events: none;
    cursor: not-allowed;
    background: #d9e6f5;
}

.icon1 {
    display: none;
}

.slimScrollBar {
    /* height: 710px; */
    max-height: 32rem;
    overflow-y: scroll;
    border-radius: 10px;
    overflow-x: hidden;
    /* margin-bottom: 10rem; */
}

.slimScrollBarR {
    max-height: 16rem;
    min-height: 16rem;
    overflow-y: scroll;
    border-radius: 0.625rem;
    overflow-x: hidden;
    /* margin-bottom: 10rem; */
}

@media (max-width: 576px) {
    .slimScrollBarR {
        max-height: 35rem;
        overflow-y: scroll;
        border-radius: 10px;
        overflow-x: hidden;
        margin-bottom: 1rem;
    }
}

.slimScrollBarR::-webkit-scrollbar {
    width: 6px;
}

.slimScrollBarR::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    /* background-color: #f1f4f9; */
    border-radius: 10px;
}

.slimScrollBarR::-webkit-scrollbar-thumb {
    background-color: #dfe3ee;
    border-radius: 10px;
    /* outline: 1px solid slategrey; */
}

.slimScrollBar::-webkit-scrollbar {
    width: 6px;
}

.slimScrollBar::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    /* background-color: #f1f4f9; */
    border-radius: 10px;
}

.slimScrollBar::-webkit-scrollbar-thumb {
    background-color: #dfe3ee;
    border-radius: 10px;
    /* outline: 1px solid slategrey; */
}

.side-menu-span {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

li.mm-active {
    background-color: #37223e;
}

.enlarged .left-side-menu #sidebar-menu > ul ul {
    background-color: #37223e;
}

.enlarged .left-side-menu #sidebar-menu > ul > li:hover > a {
    background-color: #37223e;
}

.nav-second-level li a,
.nav-thrid-level li a {
    padding: 8px 20px;
}

.left-side-menu {
    background: #442c4c;
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
    z-index: 100;
}

#sidebar-menu > ul > li > a > span {
    vertical-align: middle;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li > a:hover {
    color: #fbc113;
    background-color: #442c4c;
}

#sidebar-menu > ul > li > a.active > img {
    color: #fff;
    /* filter: invert(73%) sepia(80%) saturate(676%) hue-rotate(348deg)
        brightness(215%) contrast(97%); */
    filter: invert(100%) sepia(70%) saturate(1174%) hue-rotate(332deg)
        brightness(200%) contrast(97%);
}

.menu-title > hr {
    background-color: #76507f;
    border: 1px solid #76507f;
}

.side-menu-split {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

#sidebar-menu > ul > li > ul {
    padding-left: 0px;
    padding-right: 0px;
}

.enlarged .left-side-menu {
    position: fixed;
    z-index: 100;
}

.left-side-menu-light .navbar-custom .logo-box {
    background-color: #442c4c;
}

.logo-box {
    background-color: #442c4c;
}

.navbar-custom {
    background-color: #53375b;
    height: 100px;
    z-index: 99;
}

#sidebar-menu > ul > li > a.yellow:hover:hover {
    color: #fbc113 !important;
    background-color: #37223e !important;
}

.menu-selected-lang {
    color: #ffffff !important;
}

.no-hover:hover {
    color: #ffffff !important;
    background-color: #53375b;
}

#sidebar-menu > ul > li > a {
    margin: 0px 0px;
}

.top-menu {
    overflow-x: scroll;
    padding-bottom: 1.25rem;
    margin-top: 0.6rem;
}

.footer {
    z-index: 1;
}

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

    .curriculum-web {
        display: none;
    }
}

@media (min-width: 1024px) {
    .curriculum-mob {
        display: none;
    }

    .curriculum-web {
        display: block;
    }
}

.serach-icon {
    margin-top: 1rem;
}

.delete-src {
    margin-top: 2rem;
}

/* .link::after {
    content: " -";
} */

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #673c71 !important;
    outline: 0;
    box-shadow: 0 0 0 0rem rgb(0 0 0) !important;
}

.inv-btn {
    padding: 10px 11px !important;
}

.check-err {
    left: 2rem;
}

@media (max-width: 576px) {
    /* .exit-btn {
        display: none;
    } */
}

@media (max-width: 576px) {
    .invite-top {
        margin-top: -6rem;
    }
}

.geeks {
    border-right: hidden;
}

.gfg {
    border-collapse: separate;
    border-spacing: 0 15px;
}

.table-hover tbody tr {
    background-color: rgb(255 255 255) !important;
}

.add-licence-row-t {
    position: relative;
    border: 12.5px solid #eff3f9 !important;
}

.spacer-table {
    background-color: #ffffff !important;
    border-collapse: separate;
    border-spacing: 0 20px;
}

.spacer-table:hover {
    background-color: #ffffff !important;
}

.avatar-pos {
    position: relative;
    top: 6px;
}

.check-pos {
    position: relative;
    top: 6px;
}

.firts-top {
    background-color: #dfe3ee !important;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #eff3f9;
}

.yel {
    color: #fbc113;
}

.removeFile {
    margin-top: 1rem;
}

.error-label {
    /* margin-left: 0rem;
    margin-right: 7rem;
    background-color: #fef3d0;
    border-radius: 6px;
    padding-left: 0.75rem;
    width: 8rem;
    padding-right: 0.75rem;
    color: #f49a0b;
    font-weight: 400;
    text-align: center;
    top: -6px;
    position: relative; */
}

.pending {
    color: #585e75 !important;
}

.pending:focus {
    color: red !important;
}

.pending:hover {
    color: #673c71 !important;
}

.pending.sub-menu-active::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    background-color: #673c71;
    /* box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.26); */
    left: 0;
    bottom: -19px;
}

.current {
    color: #585e75 !important;
}

.current:hover {
    color: #673c71 !important;
}

.first-col {
    width: 1px !important;
}

.third-col {
    width: 200px !important;
}

.last-col {
    width: 1px !important;
}

th.creation-date::before {
    content: "";
    border-left: 1px solid #c1c5d7;
    position: relative;
    left: -13px;
    /* bottom: -15px; */
    padding-top: 7px;
    padding-bottom: 7px;
}

td.creation-date::before {
    content: "";
    border-left: 1px solid #dfe3ee;
    position: relative;
    left: -13px;
    bottom: -15px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.check-pos-transfer {
    position: relative;
    top: 5px;
}

.table-thin-header {
    padding: 0.4rem 0.75rem !important;
}

.table-bordered-td {
    border-right: none !important;
    border-left: none !important;
    padding: 0.5rem 0.75rem !important;
}

@media (max-width: 576px) {
    td.creation-date::before {
        bottom: -27px !important;
    }
}

td.creation-date::after {
    content: "";
    border-left: 1px solid #dfe3ee;
    position: relative;
    right: -2rem;
    /* bottom: -15px; */
    padding-top: 7px;
    padding-bottom: 7px;
}

@media (max-width: 576px) {
    td.creation-date::after {
        bottom: 26px !important;
    }
}

.menu-nav {
    display: flex;
    justify-content: space-between;
}

.menu-item {
    color: #fcc;
    padding: 3px;
}

.three-dots:after {
    cursor: pointer;
    color: #444;
    content: "\2807";
    font-size: 20px;
    padding: 0 5px;
}

a {
    text-decoration: none;
    /* color: white; */
}

/* a div {
    padding: 2px;
} */

.dropdown-head {
    position: absolute;
    right: 10px;
    background-color: #4c3253;
    border-radius: 10px;
    padding: 10px;
    outline: none;
    opacity: 0;
    z-index: -1;
    max-height: 0;
    transition: opacity 0.1s, z-index 0.1s, max-height 5s;
    min-width: 11rem;
    text-align: center;
}

.dropdown-container:focus {
    outline: none;
}

.dropdown-container:focus .dropdown-head {
    opacity: 1;
    z-index: 100;
    max-height: 100vh;
    transition: opacity 0.2s, z-index 0.2s, max-height 0.2s;
}

.three-dots {
    margin-top: -1rem;
}

@media (max-width: 767.98px) {
    .sidebar-enable .left-side-menu {
        padding-top: 2.5rem;
    }
}

.deleteicon:hover {
    filter: brightness(0) saturate(100%) invert(24%) sepia(13%) saturate(3366%)
        hue-rotate(245deg) brightness(89%) contrast(77%);
    cursor: pointer;
}

.page-title-box {
    margin: 0px -25px !important;
    padding: 0px 26px 0px !important;
    position: fixed;
    z-index: 10001;
    width: 100%;
    min-height: 5rem;
}

.title-right {
    display: block !important;
}

.header-bottun-s:hover {
    background-color: white !important;
}

@media (max-width: 550px) {
    .email-margin-left {
        margin-left: 2.9rem;
        margin-top: -1.5rem !important;
    }
}

.input.className {
    color: rgb(0, 0, 0) !important;
}

/* HASAN START*/

.footerDesc {
    text-align: left;
}

@media (max-width: 550px) {
    .footerDesc {
        text-align: center;
    }
}

.link-invite {
    position: relative;
    top: 0.4rem;
}

.class-cart-header {
    position: relative;
    margin-bottom: 1.5rem;
}

.class-cart-header-classrooms::after {
    position: absolute;
    content: "";
    width: 95%;
    height: 1px;
    background-color: #dfe3ee;
    margin-top: 1.3rem;
    margin-left: -0.6rem;
}

.error-status {
    position: relative;
    top: 0.9rem;
}

@media (max-width: 550px) {
    .feedMob {
        display: none;
    }

    .error-status {
        position: relative;
        top: 0rem;
    }
}

@media (min-width: 550px) {
    .feedMob {
        display: block;
    }
}

.feedImage {
    position: relative;
    left: 6px;
}

.feedImg {
    position: relative;
    right: 5px;
}

@media (max-width: 550px) {
    .feedImg {
        position: relative;
        right: -1px;
    }
}

.x-close {
    min-height: 100vh;
}

.link-inv {
    position: relative;
    left: -15px;
}

.delete-class {
    position: relative;
    /* left: -3px; */
    margin-left: 2px;
}

.setting-list {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.settingInput {
    position: relative;
    /* left: 1rem; */
    border: 0px solid !important;
    font-family: robotoMd !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.125rem !important;
    color: #1e2029 !important;
}

.setting-labels {
    margin-bottom: -1.6rem !important;
}

.general-info {
    margin-bottom: -2rem;
}

.slimScrollBarR {
    max-height: 16rem;
    overflow-y: scroll;
    border-radius: 10px;
    overflow-x: hidden;
    /* margin-bottom: 10rem; */
}

@media (min-width: 550px) {
    .topL:hover {
        background: #e3e2eb;
        border-radius: 4px;
    }
}

.input-new {
    min-width: 17rem;
}
@media (max-width: 550px) {
    .menu-mob {
        /* margin-top: 18rem !important; */
    }
}
.rdr-buttons-position {
    bottom: 1rem;
}

/* HASAN END*/

.rdrDefinedRangesWrapper {
    display: none;
}
.dateRange-container {
    position: absolute;
    right: 16px;
    margin-top: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    background-color: #fff;
    z-index: 1;
    border-radius: 0.625rem;
    direction: ltr;
}

.rtl-calendar .rdrMonthAndYearWrapper{
    direction: rtl;
}

.rtl-calendar .rdrMonthsHorizontal,
.rtl-calendar .rdrDateDisplay {
    flex-direction: row-reverse;
}

@media (max-width: 550px) {
    .dateRange-container {
        right: 15px;
    }
}
.pagination-bar {
    position: relative;
    top: 1rem;
}

.pagination-container {
    display: flex;
    list-style-type: none;
}
.pagination-container .pagination-item {
    padding: 0 12px;
    height: 32px;
    text-align: center;
    margin: auto 4px;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    box-sizing: border-box;
    align-items: center;
    letter-spacing: 0.01071em;
    border-radius: 16px;
    line-height: 1.43;
    font-size: 13px;
    min-width: 32px;
}
.pagination-container .pagination-item.dots:hover {
    background-color: transparent;
    cursor: default;
}
.pagination-container .pagination-item:hover {
    background-color: #b9a6be;
    cursor: pointer;
    border-radius: 10px;
}
.pagination-container .pagination-item.selected {
    background-color: #673c71;
    color: #fff;
    border-radius: 10px;
}
.pagination-container .pagination-item .arrow::before {
    position: relative;
    /* top: 3pt;
    Uncomment this to lower the icons as requested in comments*/
    content: "";
    /* By using an em scale, the arrows will size with the font */
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-right: 0.12em solid rgba(0, 0, 0, 0.87);
    border-top: 0.12em solid rgba(0, 0, 0, 0.87);
}
.pagination-container .pagination-item .arrow.left {
    transform: rotate(-135deg) translate(-50%);
}
.pagination-container .pagination-item .arrow.right {
    transform: rotate(45deg);
}
.pagination-container .pagination-item.disabled {
    pointer-events: none;
}
.pagination-container .pagination-item.disabled .arrow::before {
    border-right: 0.12em solid rgba(0, 0, 0, 0.43);
    border-top: 0.12em solid rgba(0, 0, 0, 0.43);
}
.pagination-container .pagination-item.disabled:hover {
    background-color: transparent;
    cursor: default;
}
.full-page-container {
    min-height: 100vh;
}
.form-check-input-radio {
    height: 0 !important;
}
.footer-general-container {
    background-color: #fff;
    padding: 1rem 0rem;
    position: fixed;
    width: 100%;
    bottom: 0;
}
.red-filter {
    filter: invert(18%) sepia(84%) saturate(7179%) hue-rotate(347deg)
        brightness(89%) contrast(84%);
}
.page-size-dropdown {
    border: 1px solid #53375b;
    border-radius: 6px;
}

.new-table-scroll {
    max-height: 55vh;
    overflow: auto;
}
.new-table-scroll::-webkit-scrollbar {
    width: 7px;
}
.new-table-scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
.new-table-scroll::-webkit-scrollbar-thumb {
    background: #673c71;
    border-radius: 10px;
}

/* Handle on hover */
.new-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #673c71;
}
.header-table-width {
    width: calc(100% - 7px);
}
.licenses-container {
    max-height: 65vh;
    overflow: auto;
}

.class-name-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}