/* FONTS STYLE */

.H1 {
    font-family: robotoMd;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 2.25rem;
    color: #1e2029;
}

.H2 {
    font-family: robotoMd;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: #1e2029;
}

.H3 {
    font-family: robotoMd;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: #1e2029;
}

.H4 {
    font-family: robotoMd;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #1e2029;
}

.H5 {
    font-family: robotoMd;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.125rem;
    color: #1e2029;
}

.subtitle-1 {
    font-family: robotoRegular;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #1e2029;
}

.subtitle-2 {
    font-family: robotoRegular;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: #1e2029;
}

.subtitle-3 {
    font-family: robotoRegular;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: #1e2029;
}
.subtitle-4 {
    font-family: robotoMd;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #1e2029;
}
.subtitle-5 {
    font-family: robotoMd;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    color: #1e2029;
}
.Body {
    font-family: robotoRegular;
    font-size: 0.875rem;
    line-height: 1.172rem;
    color: #422a47;
    margin: 0;
}
.body-1 {
    font-family: robotoRegular;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375rem;
    color: #1e2029;
}

.body-2 {
    font-family: robotoRegular;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.125rem;
    color: #585e75;
}

.body-3 {
    font-family: robotoRegular;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
    color: #1e2029;
}
.subtitle-4 {
    font-family: robotoMd;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #1e2029;
}
.small {
    font-family: robotoRegular;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3125rem;
    color: #1e2029;
}

.numerical {
    font-family: robotoMd;
    line-height: 2.25rem;
    font-weight: 700;
    font-size: 1.75rem;
    color: #1e2029;
}
.numerical-circle-bar {
    /* font-family: robotoMd;
    line-height: 3.25rem;
    font-weight: 700;
    font-size: 2.75rem;
    color: #1e2029; */
}

/* COLORS STYLE */
.white {
    color: #ffffff !important;
}

.grey-50 {
    color: #f1f4f9;
}

.grey-100 {
    color: #d9e6f5;
}

.grey-200 {
    color: #dfe3ee;
}

.grey-250 {
    color: #eff3f9;
}

.grey-300 {
    color: #c1c5d7;
}

.grey-400 {
    color: #979fbd;
}

.grey-450 {
    color: #787e97;
}

.grey-500 {
    color: #585e75;
}

.grey-600 {
    color: #1e2029;
}

.grey-700 {
    color: #faf9fa;
}
.grey-800 {
    color: #ebebeb;
}
.purple-50 {
    color: #e3e2eb;
}

.purple-100 {
    color: #e3e2ec;
}

.purple-200 {
    color: #b9a6be;
}

.purple-300 {
    color: #76507f;
}

.purple-400 {
    color: #673c71;
}

.purple-500 {
    color: #53375b;
}

.purple-600 {
    color: #37223e;
}

.yellow-50 {
    color: #fef3d0;
}

.yellow-100 {
    color: #fde6a1;
}

.yellow-200 {
    color: #fdda71;
}

.yellow-300 {
    color: #fbc113;
}

.yellow-400 {
    color: #f2b350;
}

.yellow-500 {
    color: #f49a0b;
}

.yellow-600 {
    color: #d17100;
}

.green-50 {
    color: #e1f4e8;
}

.green-100 {
    color: #afe2c1;
}

.green-200 {
    color: #88d3a1;
}

.green-300 {
    color: #60c582;
}

.green-400 {
    color: #38b663;
}

.green-500 {
    color: #159e44;
}

.red-50 {
    color: #fde6e9;
}

.red-100 {
    color: rgba(239, 91, 109, 0.6);
}

.red-200 {
    color: rgba(239, 91, 109, 0.8);
}

.red-300 {
    color: #ef5b6d;
}

.red-400 {
    color: #e5394f;
}

.red-500 {
    color: #d41e35;
}

/* BACKGROUND COLORS STYLE */
.white-bg {
    background-color: #ffffff !important;
}

.grey-50-bg {
    background-color: #f1f4f9 !important;
}

.grey-100-bg {
    background-color: #d9e6f5;
}

.grey-200-bg {
    background-color: #dfe3ee;
}

.grey-250-bg {
    background-color: #eff3f9;
}

.grey-300-bg {
    background-color: #c1c5d7;
}

.grey-400-bg {
    background-color: #979fbd;
}

.grey-500-bg {
    background-color: #585e75;
}

.grey-600-bg {
    background-color: #1e2029;
}

.grey-700-bg {
    background-color: #faf9fa;
}
.grey-800-bg {
    background-color: #ebebeb;
}
.purple-50-bg {
    background-color: #e3e2eb;
}

.purple-100-bg {
    background-color: #d7d1df;
}

.purple-200-bg {
    background-color: #b9a6be;
}

.purple-300-bg {
    background-color: #76507f;
}

.purple-400-bg {
    background-color: #673c71;
}

.purple-500-bg {
    background-color: #53375b;
}

.purple-600-bg {
    background-color: #37223e;
}

.lms-purple-eb {
    background-color: #e3e2eb;
}

.yellow-50-bg {
    background-color: #fef3d0;
}

.yellow-100-bg {
    background-color: #fde6a1;
}

.yellow-200-bg {
    background-color: #fdda71;
}

.yellow-300-bg {
    background-color: #fbc113;
}

.yellow-400-bg {
    background-color: #f2b350;
}

.yellow-500-bg {
    background-color: #f49a0b;
}

.yellow-600-bg {
    background-color: #d17100;
}

.green-50-bg {
    background-color: #e1f4e8;
}

.green-100-bg {
    background-color: #afe2c1;
}

.green-200-bg {
    background-color: #88d3a1;
}

.green-300-bg {
    background-color: #60c582;
}

.green-400-bg {
    background-color: #38b663;
}

.green-500-bg {
    background-color: #159e44;
}

.red-50-bg {
    background-color: #fde6e9;
}

.red-100-bg {
    background-color: rgba(239, 91, 109, 0.6);
}

.red-200-bg {
    background-color: rgba(239, 91, 109, 0.8);
}

.red-300-bg {
    background-color: #ef5b6d;
}

.red-400-bg {
    background-color: #e5394f;
}

.red-500-bg {
    background-color: #d41e35;
}

.relative {
    position: relative;
}
.border-purple {
    border: 1px solid #76507f;
}
/* <a> START */

a {
    text-decoration: auto !important;
}

a:hover {
    color: #673c71;
}

.a-white:hover {
    color: #673c71;
}

.a-black:hover {
    color: #673c71;
}

.a-hover-white {
    color: #fff;
}

.a-hover-white:hover {
    color: #fff;
}

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

.radius-10 {
    border-radius: 0.625rem;
}

.radius-4 {
    border-radius: 0.25rem;
}

/* <a> END */

/* BORDER STYLE START */

.dashed-border {
    border: 1px dashed #979fbd;
    border-radius: 0.625rem;
}

.border-radius-10 {
    border-radius: 0.625rem;
}

.border-red {
    border: 2px solid #ef5b6d;
}

/* BORDER STYLE END */

/* Logo And Layout STYLE START */

.purple-logo-edit {
    width: 20%;
}

.min-width-100-px {
    min-width: 100px;
}

.min-width-175-px {
    min-width: 175px;
}

.mb-37 {
    margin-bottom: 37px !important;
}

@media (max-width: 990px) {
    .purple-logo-edit {
        width: 40%;
    }
}

@media (max-width: 768px) {
    .purple-logo-edit {
        width: 50%;
    }
}

/* Logo STYLE END */

/* BUTTONS STYLE START */

.button-sm-purple {
    background-color: #673c71;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border: 2px solid #00000000 !important;
    border-radius: 0.625rem;
    min-width: 6.3125rem;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
}

.button-md-purple {
    background-color: #673c71;
    color: #ffffff;
    padding: 0.5625rem 1.5rem;
    border: 2px solid #00000000 !important;
    border-radius: 0.625rem;
    min-width: 8.8125rem;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
}

.button-sm-purple:hover,
.button-md-purple:hover {
    background-color: #53375b;
    color: #ffffff;
}

.button-sm-purple:focus,
.button-md-purple:focus,
.button-sm-purple:active,
.button-md-purple:active {
    background-color: #76507f;
    color: #ffffff;
}

.button-sm-purple:disabled,
.button-md-purple:disabled {
    background-color: #c1c5d7;
    cursor: not-allowed;
}

.button-purple-inactive {
    background-color: #c1c5d7;
}

.button-sm-white {
    background-color: #ffffff;
    color: #673c71;
    padding: 0.5rem 1rem;
    border: 2px solid #00000000 !important;
    border-radius: 0.625rem;
    min-width: 6.3125rem;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
}

.button-md-white {
    background-color: #ffffff;
    color: #673c71;
    padding: 0.5625rem 1.5rem;
    border: 2px solid #00000000 !important;
    border-radius: 0.625rem;
    min-width: 8.8125rem;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
}

.button-sm-white:hover,
.button-md-white:hover {
    background-color: #e3e2eb;
    color: #673c71;
}

.button-sm-white:focus,
.button-md-white:focus,
.button-sm-white:active,
.button-md-white:active {
    background-color: #f7f7f9;
    color: #673c71;
}

.button-sm-white:disabled,
.button-md-white:disabled {
    background-color: #ffffff;
    color: #979fbd;
    cursor: not-allowed;
}

.tooltip-container {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 1rem 3rem #0000002d!important;
    z-index: 10;
}
.tooltip-container-name {
    top: 100%;
}
.tooltip-container-wrap{
    text-wrap: balance;
    width: 200px;
    display: block;
    text-align: center;
}
.tooltip-container::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
  }
/* with other class white button small or md  */

.button-secondary {
    border: 1px solid #673c71 !important;
}

/* with other class white button small or md  */

.button-secondary:disabled {
    border: 1px solid #979fbd;
}

/* BUTTONS STYLE END */

/* INPUT STYLE START */

.input {
    background-color: #ffffff;
    border: 1px solid #979fbd;
    border-radius: 0.625rem;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5625rem 0.75rem;
    margin: 0.25rem 0rem;
    color: #979fbd;
}

.input:focus {
    color: #1e2029;
    border: 1px solid #673c71;
}

.input:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.input-disabled {
    background-color: #ffffff;
    border: 1px solid #dfe3ee;
    border-radius: 0.625rem;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5625rem 0.75rem;
    margin: 0.25rem 0rem;
    color: #c1c5d7;
}

.input-error {
    color: #d41e35;
    border: 1px solid #e6394f;
}
.input-error:focus-visible {
    color: #d41e35;
    border: 1px solid #e6394f;
}
.search-input {
    padding-left: 2.2rem !important;
}
.search-icon {
    position: absolute;
    top: 11px;
}
.table-row-element {
    min-height: 60px;
}
.textarea-style {
    background-color: rgba(241, 244, 249, 0.3);
    padding: 0.75rem 0.813rem;
    border: 1px solid #dfe3ee;
    border-radius: 0.625rem;
}
.textarea-error {
    color: #d41e35;
    border: 1px solid #e6394f;
}
.textarea-error:focus,
.textarea-error:active {
    /* color: #d41e35; */
    border: 1px solid #e6394f;
    border-color: #e6394f !important;
}

.input-with-button {
    padding: 0.5625rem 0.8125rem;
    margin: 0;
    width: 100%;
    border-right: none;
    border-radius: 0.625rem;
    border-right: 1px solid #979fbd;
}

.input-error-with-button {
    padding: 0.5625rem 0.8125rem;
    border-radius: 0.625rem;
    margin: 0;
    width: 100%;
    color: #d41e35;
    border: 1px solid #e6394f;
}

.close-input:before {
    position: absolute;
    right: 0;
    top: 1.6rem;
}

.button-with-input {
    color: #ffffff !important;
    padding: 0.38rem 1.5rem;
    border-radius: 0px 0.625rem 0.625rem 0px;
    min-width: auto;
    position: relative;
    top: 1px;
}

.button-link-con {
    position: absolute;
    right: 16px;
}

.button-with-input:hover {
    color: #ffffff !important;
}

.d-hide {
    display: none;
}

.input-img {
    position: absolute;
    right: 1.5rem;
    /* top: 2.6rem; */
    top: 0.8rem;
    z-index: 1;
}

.input-date-img {
    position: absolute;
    right: 1rem;
    top: 0.8rem;
}
.grey-200-opacity {
    background-color: rgba(241, 244, 249, 0.4);
}
@media (max-width: 550px) {
    .button-with-input {
        min-width: auto;
    }
}

/* INPUT STYLE END */

/* MODAL STYLE START */

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

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

@media (max-width: 800px) {
    .top-menu {
        width: 600px;
    }
}

@media (max-width: 550px) {
    .modal-dialog-custom {
        margin: 0px;
    }

    .modal-content-custom {
        height: 100vh;
        border-radius: 0;
        border: 0px;
    }

    .top-menu {
        width: 300px;
    }

    .modal-buttons-con {
        position: absolute;
        bottom: 1rem;
    }
}

/* MODAL STYLE END */

/* GENERAL CONTAINER START */

.general-container {
    margin-top: 3.9125rem;
}

.general-container-sub {
    margin-top: 7.5rem;
    margin-bottom: 3rem;
}

@media (max-width: 990px) {
    .general-container-sub {
        margin-top: 9.5rem;
        margin-bottom: 8rem;
    }
}

/* GENERAL CONTAINER  END*/

/* BADGES START */

.badges {
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
}

/* BADGES END */

/* INDEX CLASS ROOM AND SETTINGS START */

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

.close {
    float: right !important;
    padding-left: 0.1rem;
    padding-right: 0rem;
    position: relative;
    z-index: 10;
}

.nav-arrow:hover {
    filter: invert(39%) sepia(12%) saturate(775%) hue-rotate(190deg)
        brightness(90%) contrast(93%);
}

.clear-delete {
    position: absolute;
    top: -2rem;
    right: 3%;
    z-index: 1;
    color: #c5cee0;
}

.class-name-cart-con {
    background-color: #fff;
    border-radius: 0.625rem;
    padding: 1rem 5px 0.2rem;
    margin: 0px 27px 0px 0px;
    margin-bottom: 1rem;
}

.classCard:hover > .hover-pink {
    outline: 1px solid #b9a6be;
}

.search-classes-con-sec {
    margin-right: -20px;
    margin-left: 0px;
}

.search-classes-con-sec .class-name-cart-con {
    flex: 0 0 32.22222%;
}

.min-half-m-top {
    margin-top: -0.5rem;
}

.active-class-link {
    background-color: white !important;
    border-radius: 0.625rem;
}

.active-class-link div {
    color: #1e2029 !important;
    font-family: robotoMd;
}

.select-fancy::before {
    top: 0px !important;
}

/* .active-class-link .cc {
    font-family: robotoMd;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #1e2029;
} */

.form-control-feedback {
    position: absolute;
    z-index: 2;
    width: 2.375rem;
    height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #c5cee0;
    top: 2.2rem;
    font-size: 21px !important;
}

.pending-hover {
    filter: invert(52%) sepia(85%) saturate(3152%) hue-rotate(321deg)
        brightness(100%) contrast(88%);
}

.students-hover {
    filter: brightness(0) saturate(100%) invert(27%) sepia(12%) saturate(2448%)
        hue-rotate(243deg) brightness(90%) contrast(86%);
}

.search-classes-con {
    margin-top: 1rem;
}

@media (max-width: 991px) {
    .search-classes-con-sec .class-name-cart-con {
        flex: 0 0 48.5%;
    }

    .logo-box {
        height: 100px;
    }

    .left-side-menu {
        top: 100px;
    }
}

@media (max-width: 768px) {
    .class-name-cart-con {
        margin: 10px 10px;
    }

    .search-classes-con-sec {
        margin-right: 0px;
        margin-left: 0px;
    }

    .search-classes-con-sec .class-name-cart-con {
        flex: 0 0 100%;
    }
}

@media (max-width: 550px) {
    .class-name-cart-con {
        margin: 10px 0px;
    }
}

/* INDEX CLASS ROOM AND SETTINGS END */

/* CLASSROOM SETTING SCROLL START */

.classroom-settings-container-scroll {
    height: 70vh;
    overflow-y: scroll;
    padding: 0px;
}

.classroom-settings-container-scroll {
    overflow-y: scroll;
    scrollbar-width: thin !important;
    scrollbar-color: #dfe3ee #ffffff;
}

.classroom-settings-container-scroll::-webkit-scrollbar {
    width: 6px;
}

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

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

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

@media (max-width: 991px) {
    .classroom-settings-container-scroll {
        overflow-y: auto;
    }
}

/* CLASSROOM SETTING SCROLL END */

.lms-card-settings-con {
    border-radius: 0.625rem;
    border: none;
}

.setting-classroom-con {
    border: 1px solid #dfe3ee;
    border-radius: 0.625rem;
    padding: 1rem;
    margin: 1rem;
}

.copy-value-input,
.copy-value-input:focus,
.copy-value-input:active,
.copy-value-input:hover,
.copy-value-input:focus-visible {
    overflow: auto;
    border: solid 0px;
    outline: -webkit-focus-ring-color auto 0px !important;
}

/* FANCY CHECKBOX START */

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

.fancy-checkbox span:before {
    color: #e1e5ef;
    font-size: 17px;
    font-family: "FontAwesome";
    font-style: normal;
    content: "\f096";
    color: #cfcfcf;
    margin-right: 0.3em;
    margin-left: 0.3em;
    position: relative;
    top: -2px;
    border-radius: 0.244rem;
}

.fancy-radio span:before {
    content: "\f10c" !important;
    color: #e1e5ef !important;
    border: none;
}

.fancy-checkbox input[type="checkbox"]:checked ~ span:before {
    content: "\f14a";
    color: #ef5b6d !important;
    border: none;
}

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

.fancy-checkbox span {
    width: 23px;
    height: 23px;
}

.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: "\f111";
    color: #ef5b6d;
}

.fancy-checkbox-c {
    cursor: pointer;
}
.fancy-generate {
    left: 0px;
}
/* FANCY CHECKBOX END */
.copy-hover-part-con {
    background-color: #fff;
    box-shadow: 0px 0px 16px rgb(0 0 0 / 25%);
    border-radius: 0.5rem;
    min-width: 90px;
    min-height: 30px;
    position: absolute;
    z-index: 10;
    bottom: 100%;
    padding: 0.5rem 0rem;
    left: auto;
    font-family: abRobotoRegular;
    font-size: 1rem;
    line-height: 1.375rem;
    margin: 0;
    text-align: center;
    color: #5eb76c;
}

.copy-hover-part-con:after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    /* margin: 0 auto; */
    width: 0;
    height: 0;
    bottom: -5px;
    border-top: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
/* SHOW AND HIDE CLASSES START*/

.block-mobile-hide {
    display: block;
}

.block-mobile-show {
    display: none;
}

.block-tablet-hide {
    display: block;
}

.block-tablet-show {
    display: none;
}

.flex-mobile-hide {
    display: flex;
}

.flex-mobile-show {
    display: none;
}

.flex-tablet-hide {
    display: flex;
}

.flex-tablet-show {
    display: none;
}

.block-1300-hide {
    display: block;
}

.block-1300-show {
    display: none;
}

@media (max-width: 1300px) {
    .block-1300-hide {
        display: none;
    }

    .block-1300-show {
        display: block;
    }
}

@media (max-width: 991px) {
    .block-tablet-hide {
        display: none;
    }

    .block-tablet-show {
        display: block;
    }

    .flex-tablet-hide {
        display: none;
    }

    .flex-tablet-show {
        display: flex;
    }
}

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

    .flex-mobile-show {
        display: flex;
    }

    .block-mobile-hide {
        display: none;
    }

    .block-mobile-show {
        display: block;
    }
}

/* SHOW AND HIDE CLASSES END*/

/* SELECT2 EDIT STYLE START */

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b {
    position: relative !important;
    border-width: 0 !important;
    font-family: "Material Design Icons";
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b:after {
    content: "\F140";
    top: -1.2rem !important;
    position: absolute;
    left: -0.1rem;
    font-weight: 600;
    color: #979fbd;
    width: 12px;
    height: 7px;
}

.transfer-container
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b:after {
    top: -1rem !important;
}

.dataTables_length
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b:after {
    top: -1.3rem !important;
}

.select2-container--open
    .select2-selection--single
    .select2-selection__arrow
    b:after {
    content: "\f143";
}

.select2-container--default
    .select2-selection--single
    .select2-selection__placeholder {
    color: #979fbd !important;
    position: relative;
    top: 0.15rem;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #444;
    line-height: 34px !important;
}

.select2-dropdown {
    border: 1px solid #979fbd;
    border-radius: 0.625rem;
    padding: 0.25rem;
}

.select2-results__option {
    padding: 10px 6px;
    font-family: robotoRegular;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.125rem;
    color: #585e75;
    margin-bottom: 0.2rem;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f1f4f9 !important;
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: #e3e2eb !important;
    color: #585e75 !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #f1f4f9;
    border: none;
    color: #1e2029;
    border-radius: 3px;
    padding: 6px 18px 6px 13px;
    margin-top: 7px;
    font-family: robotoRegular;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3125rem;
    border-radius: 0.625rem;
}

.select2-container
    .select2-selection--multiple
    .select2-selection__choice__remove {
    color: #979797;
    margin-right: 5px;
    margin-left: 3px;
    font-size: 20px;
    position: relative;
    top: 3px;
}

.select2-container
    .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    color: rgb(44, 34, 34);
}

.select2-container
    .select2-selection--multiple
    .select2-selection__choice__remove {
    position: relative;
    font-family: "Material Design Icons";
    float: right;
}

.select2-container
    .select2-selection--multiple
    .select2-selection__choice__remove:after {
    content: "\F156";
    top: -0.1rem !important;
    position: absolute;
    font-weight: 600;
    color: #979FBD;
    font-size: 1rem;
    font-family: "Material Design Icons";
}

.select2-container--default
    .select2-results__option[aria-selected="true"]:hover {
    color: #1e2029 !important;
}

.select2-container--open .select2-dropdown--below {
    border: none;
    box-shadow: 0px 4px 8px 4px rgb(30 32 41 / 12%);
    margin-top: 0.1rem;
}

.select2-container--default.select2-container--disabled
    .select2-selection--single {
    background-color: rgb(255, 255, 255) !important;
    cursor: default;
    border-color: #dfe3ee !important;
}

.select2-container--default.select2-container--disabled
    .select2-selection--multiple {
    background-color: #fff;
    cursor: default;
    height: 38px;
    border-radius: 0.625rem;
    border: 1px solid #dfe3ee !important;
}

.select2-container--default.select2-container--focus
    .select2-selection--multiple {
    background-color: #fff;
    cursor: default;
    min-height: 38px;
    border-radius: 0.625rem;
    border: 1px solid #979fbd !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #dee2e6;
    border-radius: 0.625rem;
}

.select2 {
    width: 100% !important;
}

/* SELECT2 EDIT STYLE END */

/* DROPDOWN STYLE START */

.dropdown-button {
    background-color: #eff3f9;
    border: none;
    color: #585e75;
    cursor: pointer;
}

.dropdown-button:focus {
    border-color: #80bdff00 !important;
    outline: 0;
    background-color: #eff3f9 !important;
    box-shadow: none !important;
}

.dropdown-custom-menu {
    background-color: #ffffff !important;
    padding: 0.5rem !important;
    border-radius: 0.625rem !important;
    border: none !important;
    box-shadow: 0px 4px 16px 4px rgba(30, 32, 41, 0.15) !important;
}

.dropdown-elem-selected {
    cursor: pointer;
    background-color: #f1f4f9;
    border-radius: 4px;
}

.dropdown-elem:hover {
    cursor: pointer;
    background-color: #e3e2eb;
    border-radius: 4px;
}

/* DROPDOWN STYLE END */

/* CHECKBOX LIST START */

.checkbox-text {
    position: relative;
    top: 2px;
}

/* CHECK LIST END */

/* WIZARD STYLE START  */

.wizard-close {
    position: absolute;
    right: 6%;
    top: 30px;
}

.td-status {
    position: relative;
    top: 8px;
}

.right-0 {
    right: 0;
}

/* WIZARD STYLE END  */

/* BOOTSTRAP DATEPICKER  START*/

.datepicker td,
.datepicker th {
    /* width: 55px;
    height: 55px; */
    border-radius: 50%;
    font-family: robotoMd;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #585e75;
}

.datepicker th {
    color: #979fbd;
}

.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td span.focused,
.datepicker table tr td.day.focused {
    background-color: #ef5b6d !important;
    background-image: none !important;
    color: #fff;
}

.datepicker table tr td.day:hover,
.datepicker table tr td span:hover {
    background-color: rgba(239, 91, 109, 0.6);
    color: #1e2029 !important;
    opacity: 1 !important;
}

.datepicker table tr td.new,
.datepicker table tr td.old {
    color: #c1c5d7 !important;
    opacity: 1 !important;
}

.custom-arrow-custom {
    color: #979fbd;
    background-color: #f1f4f9;
    border-radius: 18% !important;
    font-size: 24px;
    padding: 0.6rem 0.8rem;
}

.custom-arrow-custom:hover {
    background-color: #dfe3ee;
}

.custom-arrow-con {
    background-color: #f1f4f900;
    border-radius: 18% !important;
}

.datepicker-dropdown {
    box-shadow: 0px 4px 16px 4px rgb(30 32 41 / 15%);
    border-radius: 10px !important;
    border: none !important;
}

.datepicker .prev:hover,
.datepicker .next:hover {
    background-color: #f3f3f300;
}

.datepicker table tr td span {
    border-radius: 50%;
}

.datepicker table tr td span.active.active {
    background-color: #ef5b6d00 !important;
    color: #585e75;
}

@media (min-width: 990px) {
    .datepicker td,
    .datepicker th {
        width: 58px;
        height: 58px;
    }
}

@media (max-width: 990px) {
    .datepicker td,
    .datepicker th {
        padding: 7px 8px;
    }
}

/* BOOTSTRAP DATEPICKER  END*/

/* HEADER PAGE STYLE START */
.min-height-100 {
    min-height: 100vh;
}

.header-button {
    position: relative;
    right: 240px;
}

.topnav-menu {
    display: flex;
}

.button-menu-mobile {
    display: none !important;
}

.header-links:hover {
    color: #fbc113;
}

.left-side-menu {
    box-shadow: none;
    z-index: 100002 !important;
}

.img-not-hover {
    filter: none !important;
}

.link-hover:hover {
    background-color: #53375b;
}
.link-purple-hover:hover {
    color: #b9a6be;
}
.navbar-custom {
    background-color: #53375b;
    height: 100px;
    z-index: 100002;
}

.sub-menu-active {
    position: relative;
    color: #fbc113 !important;
    opacity: 1;
}

.sub-menu-active:hover {
    color: #ffffff;
}

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

.child-menu-active {
    color: #673c71 !important;
}

.child-menu-active::after {
    background-color: #673c71;
    height: 2px;
}

@media (max-width: 1025px) {
    .header-button {
        right: 70px;
    }

    .button-menu-mobile {
        display: block !important;
    }

    #sidebar-menu {
        margin-top: 1.8rem;
    }

    #sidebar-menu .menu-arrow:before {
        content: "";
    }
}

@media (max-width: 990px) {
    .header-button {
        right: 0px;
    }

    #sidebar-menu .menu-arrow:before {
        content: "\F142";
    }

    .left-side-menu {
        box-shadow: none;
        z-index: 100001 !important;
        top: 90px;
    }
}

/* HEADER PAGE STYLE END */

/* ALERT CLASSES */

.alert-success {
    color: #159e44;
    background-color: #e1f4e8;
    box-sizing: border-box;
    border-radius: 0.625rem;
    padding: 0.375rem 1rem;
    text-align: center;
}

.alert-success-border {
    border: 1px solid #38b663;
}

.alert-wrong {
    color: #d41e35;
    background-color: #fde6e9;
    box-sizing: border-box;
    border-radius: 0.625rem;
    padding: 0.375rem 1rem;
    text-align: center;
}

.alert-wrong-border {
    border: 1px solid #e6394f;
}

.alert-warning {
    color: #d17100;
    background-color: #fef3d0;
    box-sizing: border-box;
    border-radius: 0.625rem;
    padding: 0.375rem 1rem;
    text-align: center;
}

.alert-warning-border {
    border: 1px solid #f2b350;
}

.alert-msg-box {
    margin-bottom: 0rem;
    position: relative;
    top: 8.5rem;
}

.flash-alert-success {
    color: #159e44;
    background-color: #e1f4e8;
    box-sizing: border-box;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    border: 1px solid #38b663;
}

.color-success {
    color: #159e44;
}

.flash-alert-danger {
    color: #d41e35;
    background-color: #fde6e9;
    box-sizing: border-box;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    text-align: center;
    border: 1px solid #e6394f;
}

.color-danger {
    color: #d41e35;
}

.flash-alert-warning,
.flash-alert-info {
    color: #d17100;
    background-color: #fef3d0;
    box-sizing: border-box;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    border: 1px solid #f2b350;
}

.color-warning,
.color-info {
    color: #d17100;
}

@media (max-width: 990px) {
    .alert-msg-box {
        margin-bottom: -2rem;
        position: relative;
        top: 8.5rem;
    }

    .wizard-close {
        right: 10%;
    }
}

/* FROM STYLE OLD FILE START */

.warrningAlert {
    color: #d17100 !important;
    border-radius: 0.625rem;
    border: 1px solid #f2b350;
    background-color: #fef3d0;
}

.dash-students-container {
    /* background-color: #e2e1ec;
    border: none;
    margin-bottom: 0rem !important;
    border-radius: 0.625rem; */
    background-color: rgb(255, 255, 255) !important;
    background-clip: inherit !important;
    border: none !important;
    border-radius: inherit !important;
}

.circle {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    /* the magic */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
.circle-dash {
    width: 24px;
    height: 24px;
}
.bottom-border-radius {
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}

.knop-width {
    margin-top: 35px !important;
    color: rgb(227 226 236) !important;
}

.knop-width:focus-visible {
    outline: none !important;
}

.slim-scroll-levels {
    height: 344px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-radius: 10px;
}

.slim-scroll-levels::-webkit-scrollbar {
    width: 6px;
}

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

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

.slim-scroll-levels::-webkit-scrollbar {
    width: 6px;
}

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

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

.central-num {
    position: absolute;
    bottom: 68px;
}

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

@media (min-width: 2000px) {
    .slim-scroll-levels {
        min-width: 29vw;
    }
}

/* FROM STYLE OLD FILE END */

/* ACTIVITY STYLE  START */
.min-width-335 {
    min-width: 335px;
}

.min-width-212 {
    min-width: 212px;
}

.min-width-171 {
    min-width: 171px;
}

.min-width-132 {
    min-width: 132px;
}

.min-width-125 {
    min-width: 125px;
}

.activity-index-con .timeline-left .timeline-item {
    display: block;
    border-radius: 10px;
}

.activity-index-con .timeline-left .panel {
    border-radius: 10px;
}

.timeline-left:before {
    left: 25px !important;
}

.timeline-desk .panel {
    margin-left: 0px !important;
}

/* ACTIVITY STYLE END */
.width-26px {
    width: 2.8rem;
}
.width-flag-index {
    width: 26px;
}
.modal-scroll {
    overflow-y: scroll;
    height: fit-content;
}

.modal-scroll::-webkit-scrollbar {
    width: 6px;
}

.modal-scroll::-webkit-scrollbar-thumb {
    background-color: #dfe3ee;
    border-radius: 10px;
}

.wizard-header .wizard-badge {
    position: relative;
    width: 35px;
    height: 35px;
    margin: 0px auto 0;
    font-weight: 600;
}

.wizard-header .wizard-badge .inner {
    position: relative;
    overflow: hidden;
    background-color: transparent;
    width: 100%;
    height: 100%;
    transform: rotate(-30deg) skewX(30deg) scaleY(0.866);
    border-radius: 5px;
}

.wizard-header .wizard-badge .innerActive {
    position: relative;
    overflow: hidden;
    background-color: transparent;
    width: 100%;
    height: 100%;
    transform: rotate(-30deg) skewX(30deg) scaleY(0.866);
    border-radius: 5px;
}

.inner:before {
    position: absolute;
    right: 6.7%;
    bottom: 0;
    left: 6.7%;
    top: 0;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background-color: #f1f4f9;
    content: "";
    border-radius: 25;
}

.innerActive:before {
    position: absolute;
    right: 6.7%;
    bottom: 0;
    left: 6.7%;
    top: 0;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background-color: #35393d;
    content: "";
    border-radius: 25;
}

.wizard-header .wizard-badge .label {
    color: white;
    font-size: 18px;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.panel {
    border: 1px solid #fff;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 1px 3px #ccc;
}

.hr_between {
    margin-top: -0.5rem !important;
    margin-bottom: 1rem !important;
}

.success-border {
    border-bottom: 2px solid #979fbd40;
}

.add-user-border {
    background-color: #979fbd40;
    height: 1px;
    top: -9px;
    position: relative;
}

.border-left {
    margin-left: -1.95rem;
    margin-right: -1.95rem;
}
.line-border {
    background-color: #979fbd;
    opacity: 0.2;
    width: 100%;
    height: 2px;
}
.close-img-input {
    position: relative;
    top: -0.5rem;
}
.add-directly-con {
    margin-bottom: 6rem;
}
.textarea-style::-webkit-scrollbar {
    width: 5px;
}
.textarea-style::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
    border-radius: 10px;
}

.textarea-style::-webkit-scrollbar-thumb {
    background-color: #dfe3ee;
    border-radius: 10px;
}

.textarea-style::-webkit-scrollbar-thumb:hover {
    background-color: #f1f4f9;
}
.line-like-hr {
    background-color: #979fbd;
    height: 1px;
    opacity: 0.2;
    margin: 0rem 0rem 2rem;
}
.custon-search-datatable::before {
    top: 2.5rem !important;
    left: 1.6rem !important;
}
.custom-input-datatable {
    padding: 0.5625rem 2.3rem !important;
}
#datatable-homework_res_filter input {
    display: none !important;
}
.resources-page {
    margin-top: 5.5rem !important;
}
.content-page-inertia {
    background-color: #eff3f9;
}
.border-none {
    border: none !important;
}
.active-circle {
    width: 100%;
    border-radius: 0.635rem;
    background-color: #e3e2ec;
    padding: 1rem;
    height: 100%;
    min-height: 21.5rem;
}
.active-circle-school {
    width: auto;
    min-width: 14rem;
    border-radius: 0.635rem;
    background-color: #e3e2ec;
    padding: 2rem 1rem;
    height: auto;
    min-height: auto;
}

.purple-ec-bg {
    background-color: #e3e2ec;
}
.range-order {
    /* min-width: 1.5rem; */
}
.circular-progress-bar {
    overflow: initial !important;
}
.circular-progressbar-container {
    width: 180px;
}
.student-hover-link {
    border-radius: 0.5rem;
}
.student-hover-link:hover {
    background-color: #e3e2ec !important;
}
.link-hover-color {
    border: 1px solid #422a4700;
}
.link-hover-color:hover {
    background-color: #dfe3ee !important;
    border: 0.5px solid #979fbd;
}
.d-inline-grid {
    display: inline-grid;
    display: -ms-inline-grid;
}
.active-classrooms-reports {
}
@media (min-width: 1400px) {
    .dropdown-visible {
        overflow: visible !important;
    }
}
@media (max-width: 1060px) {
    .active-circle-school {
        width: 100%;
    }
}

#className-error {
    position: relative;
    /* top: -1rem; */
    margin-bottom: 0;
}
.navbar-custom-style {
    margin: 0px -25px;
    padding: 20px 26px 10px !important;
    position: fixed !important;
    z-index: 1;
    width: calc(100vw - 240px);
    min-height: 7rem;
    background-color: #ffffff;
}
.navbar-custom-style-without-sub {
    min-height: 5rem !important;
}
.grey-f9-bg {
    color: #eff3f9;
}
.grey-f9-bg {
    background-color: #eff3f9;
}
.stats-container {
    position: relative;
    top: 7rem;
    margin: 0px -25px;
    min-height: calc(100vh - 8rem);
}

.check {
    width: 500px;
    margin: 50px auto;
    clear: both;
    display: block;
    background-color: #009bff;
    border-radius: 4px;
}
.check::after {
    clear: both;
    display: block;
    content: "";
}
.checkbox-container {
    margin-left: 1.4rem;
}
.check .checkbox-container {
    float: left;
    width: 50%;
    box-sizing: border-box;
    text-align: center;
    padding: 40px 0px;
}

/* Styling Checkbox Starts */
.checkbox-label {
    /* color: #76507f; */
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 18px;
    line-height: 24px;
    clear: both;
}
.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-label .mark {
    position: absolute;
    height: 17px;
    width: 16px;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-in;
    border: 2px solid #76507f;
    left: 0;
    margin-left: -1.4rem;
    top: 0.45rem;
}
.checkbox-label-con .mark {
    top: 0.25rem;
}

.checkbox-label input:checked ~ .mark {
    background-color: #76507f;
    border-radius: 5px;
    transform: rotate(0deg) scale(1);
    opacity: 1;
    border: 2px solid #76507f;
}
.checkbox-label .mark::after {
    position: absolute;
    content: "";
    border-radius: 5px;
}
.checkbox-label input:checked ~ .mark::after {
    transform: rotate(45deg) scale(1);
    left: 4.5px;
    top: 3px;
    width: 4px;
    height: 7px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    border-radius: 0;
}
.checkbox-label-con input:checked ~ .mark::after {
    left: 4px;
    top: 2.5px;
}
/* For Ripple Effect */
.checkbox-label .mark::before {
    position: absolute;
    content: "";
    border-radius: 10px;
    border: 5px solid yellow;
    transform: scale(0);
}

.checkbox-label input:checked ~ .mark::before {
    left: -3px;
    top: -3px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    transform: scale(3);
    opacity: 0;
    transition: all 0.3s ease-out;
}
.input-img {
    right: 1rem;
}
.loader-bg {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgb(50 47 47 / 65%);
    z-index: 10000000;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.first-char-container {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.first-char-container-table {
    width: 32px;
    height: 32px;
}
.radius-6 {
    border-radius: 6px;
}
.w-0 {
    width: 0% !important;
}
.w-5 {
    width: 5% !important;
}
.w-10 {
    width: 10% !important;
}
.w-15 {
    width: 15%;
}
.w-20 {
    width: 20%;
}
.w-25 {
    width: 25%;
}
.w-30 {
    width: 30%;
}
.w-35 {
    width: 35%;
}
.w-40 {
    width: 40%;
}
.w-50 {
    width: 50%;
}
.w-60 {
    width: 60%;
}
.w-70 {
    width: 70%;
}
.w-80 {
    width: 80%;
}
.w-90 {
    width: 90%;
}
.after-line {
    position: relative;
}
.after-line::after {
    position: absolute;
    content: "";
    background-color: #c1c5d7;
    width: 1px;
    height: 100%;
    right: 20px;
    top: 0;
}
.after-line-first {
    position: sticky;
    z-index: 5;
}
.table-header-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
}
.arrow-img-top {
    position: absolute;
    right: 35px;
    top: 0px;
}

.arrow-img-bottom {
    position: absolute;
    right: 35px;
    bottom: 0px;
}
.table-wrapper {
    position: relative;
    overflow: auto;
}
.classroom-dashboard-container {
    min-height: 20rem;
}
.table-wrapper::-webkit-scrollbar {
    /* width: 7px; */
    height: 10px;
}
.table-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #673c71;
    border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #673c71;
}
.table-scroll {
    /* max-height: 42vh; */
    min-width: 1025px;
}
.first-sticky {
    position: sticky;
    left: 0;
    min-height: 3rem;
    background-color: #dfe3ee;
}
.first-header-sticky {
    position: sticky;
    left: 0;
    background-color: #dfe3ee;
}
.mb-8rem {
    margin-bottom: 8rem !important;
}
.mb-4rem {
    margin-bottom: 4rem !important;
}
.table-margin-bottom {
    margin-bottom: 4.3rem !important;
}
.modal-fullscreen {
    width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
}
.btn-close {
    margin: 1rem 0rem !important;
}

.students-dashboard-container canvas {
    height: 350px !important;
}
.sub-menu-student {
    position: relative;
    top: 10px;
}
.not-selected-license-card {
    border: 2px solid #422a4700 !important;
}
.selected-license-card {
    border: 2px solid #673c71 !important;
}
@media (max-width: 1025px) {
    .navbar-custom-style {
        width: calc(100vw - 70px);
    }
}
@media (max-width: 990px) {
    .students-dashboard-container {
        width: 900px;
    }
    .navbar-custom-style {
        width: 100%;
    }
}
@media (max-width: 770px) {
    .after-line-first::after {
        content: "";
        position: absolute;
        background: linear-gradient(
            90deg,
            rgba(213, 217, 229, 0.4) -30.77%,
            rgba(243, 245, 250, 0) 100%
        );
        width: 10px;
        height: 200%;
        left: 95%;
    }
    .students-dashboard-container canvas {
        height: 300px !important;
    }
}
@media (max-width: 750px) {
    .table-wrapper {
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media (max-width: 550px) {
    .students-dashboard-container canvas {
        height: 275px !important;
    }
    .licenses-container-upgrade {
        max-height: 57vh;
    }
}

.rtl {
    direction: rtl;
}