@font-face {
    font-family: "MongolianScript";
    src: url("../font/MongolianScript.ttf");
}

@font-face {
    font-family: "MongolianBaiti";
    src: url("../font/monbaiti.ttf");
}

@font-face {
    font-family: "MongolianWriting";
    src: url("../font/Mglwrite.ttf");
}

@font-face {
    font-family: "CMSUlaanbaatar";
    src: url("../font/CMSUB.TTF");
}

@font-face {
    font-family: LineAwesomeOld;
    src: url(../font/line-awesome/line-awesome.eot);
    src: url(../font/line-awesome/line-awesome.eot?v=1.1.#iefix) format("embedded-opentype"),
        url(../font/line-awesome/line-awesome.woff2?v=1.1.) format("woff2"),
        url(../font/line-awesome/line-awesome.woff?v=1.1.) format("woff"),
        url(../font/line-awesome/line-awesome.ttf?v=1.1.) format("truetype"),
        url(../font/line-awesome/line-awesome.svg?v=1.1.#fa) format("svg");
    font-weight: 400;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family: LineAwesomeOld;
        src: url(../font/line-awesome/line-awesome.svg?v=1.1.#fa) format("svg");
    }
}

/* This file is reserved for overriding and extending the template styles. */
/* // audio player container width fixed */

/* hiding body scrollbar */
body::-webkit-scrollbar {
    display: none;
}

body::-webkit-scrollbar-button {
    display: none;
}

body {
    -ms-overflow-style: none;
}

.justify-content-space-between {
    justify-content: space-between !important;
}

#nav {
    border-radius: unset;
}

.rhap_container {
    max-width: 100% !important;
}

.object-fit-contain {
    object-fit: contain !important;
}

/* list eer haruulah ved render hiij bga */
.component-list .auto-width-iframe {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    width: 100%;
    height: 100%;
}

/* zuvhun video vzeh ved render hiij bgaa */
.video-component .auto-width-iframe {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.auto-width-iframe iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.auto-width-iframe body {
    display: flex;
    align-items: start !important;
    justify-content: start !important;
}

.vp-center {
    display: flex;
    align-items: start !important;
    justify-content: start !important;
}

a {
    display: inline-block;
}

ul.disc {
    list-style-type: disc;
}

.d-contents {
    display: contents !important;
}

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

.main-green {
    color: #82b542;
}

.main-orange {
    color: #ff4900;
}

.primary-color {
    color: #3c358f;
}

.main-gray {
    color: #b2b3b2;
}

.main-background-20 {
    background-color: rgba(255, 73, 0, 0.2);
}

.cursor {
    cursor: pointer !important;
}

.br-01 {
    border-radius: 1px !important;
}

.br-02 {
    border-radius: 2px !important;
}

.br-03 {
    border-radius: 3px !important;
}

.br-04 {
    border-radius: 4px !important;
}

.br-05 {
    border-radius: 5px !important;
}

.br-06 {
    border-radius: 6px !important;
}

.br-07 {
    border-radius: 7px !important;
}

.br-08 {
    border-radius: 8px !important;
}

.br-09 {
    border-radius: 9px !important;
}

.br-10 {
    border-radius: 10px !important;
}

.br-12 {
    border-radius: 12px !important;
}

.br-16 {
    border-radius: 16px !important;
}

.br-20 {
    border-radius: 20px !important;
}

.br-24 {
    border-radius: 24px !important;
}

.br-30 {
    border-radius: 30px !important;
}

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

.font-weight-100 {
    font-weight: 100 !important;
}

.font-weight-200 {
    font-weight: 200 !important;
}

.font-weight-300 {
    font-weight: 300 !important;
}

.font-weight-400 {
    font-weight: 400 !important;
}

.font-weight-500 {
    font-weight: 500 !important;
}

.font-weight-600 {
    font-weight: 600 !important;
}

.font-weight-700 {
    font-weight: 700 !important;
}

.font-weight-800 {
    font-weight: 800 !important;
}

.font-weight-900 {
    font-weight: 900 !important;
}

.h-28 {
    height: 28px;
}
.h-30{
    height: 30px;
}

.w-275 {
    width: 275px;
}

.main-title {
    font-family: "PinnacleDemiBold";
    font-size: 18px;
}

.sub-title {
    font-family: "PinnacleDemiBold";
    font-size: 14px;
    color: #111827;
}

.on-scrollbar {
    scrollbar-width: thin;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.on-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: none !important;
    background-color: transparent !important;
}

.on-scrollbar::-webkit-scrollbar {
    width: 6px !important;
    background-color: transparent;
}

.on-scrollbar::-webkit-scrollbar-thumb {
    background-color: #acacac;
}

/* mathAjax -н expire message */
.wrs_tickContainer {
    visibility: hidden;
    height: 0;
}

.context-click-menu-style {
    border: 1px solid #ff4900;
    border-radius: 6px;
    background: #fff;
    color: #ff4900;
    font-size: 0.8rem;
    padding: 2px 4px;
}

.black-color {
    color: #000 !important;
    font-weight: 500;
}

.main-color {
    color: #3c358f;
    font-weight: 500;
}

.red-color {
    color: #ff003d;
    font-weight: 500;
}

.eschool-checkbox input {
    margin-right: 0.5rem;
    vertical-align: inherit;
}

/************ datetime picker css ***********/
.react-datepicker-wrapper {
    width: auto;
}

.react-datetime-picker .react-datetime-picker__wrapper {
    border: none;
}

.react-datetime-picker .react-datetime-picker__wrapper .react-datetime-picker__button {
    display: none;
}

.react-datetime-picker .react-datetime-picker__wrapper .react-datetime-picker__inputGroup {
    padding: 0.65rem 1rem;
    border-radius: 0.42rem;
    border: 1px solid var(--primary);
    text-align: center;
    height: 37px;
    line-height: 1;
}

.react-datepicker-wrapper .react-datepicker__input-container input {
    display: block;
    border: 1px solid var(--primary);
    /* width: 100%; */
    height: calc(1.5em + 1.3rem + 2px);
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #464e5f;
    background-color: #ffffff;
    background-clip: padding-box;
    border-radius: 0.42rem;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/************ datetime picker css end ***********/
/***************** date-picker-range-container css **************/
.date-picker-range-container {
    width: auto;
    display: inline-flex;
}

.date-picker-range-container .first-datepicker {
    height: 38px !important;
    border-right-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-color: rgb(204, 204, 204) !important;
}

.date-picker-range-container .last-datepicker {
    height: 38px !important;
    border-left-width: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-color: rgb(204, 204, 204) !important;
}

.date-picker-range-container .first-timepicker {
    height: 37px !important;
    border-right-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-color: rgb(204, 204, 204) !important;
}

.date-picker-range-container .last-timepicker {
    height: 37px !important;
    border-left-width: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-color: rgb(204, 204, 204) !important;
}

.date-picker-range-container .react-datepicker-wrapper:nth-child(2) {
    font-size: 1.3rem;
    width: auto !important;
}

.date-picker-range-container .react-datepicker-with-icon {
    font-size: 1.37rem !important;
}

/***************** date-picker-range-container css end **************/
/***************** dropdown css **************/
.eschool-select.is-invalid>div:first-of-type {
    border: 1px solid #f64e60 !important;
    box-shadow: none;
}

.user-menu-wide {
    width: calc(var(--nav-size) - calc(var(--main-spacing-vertical)) - 40px);
    padding: 20px 30px 20px 30px;
}

/***************** dropdown css end **************/
/***************** modal css **************/
.modal-footer {
    display: block;
}

/***************** modal css end **************/
/***************** card css end **************/
.card {
    /* box-shadow: none !important; */
}

.card-header {
    padding: 1rem 2.25rem;
}

.card-header-with-tab .card-header {
    border-bottom: 2px solid rgba(255, 73, 0, 0.2) !important;
}

.card-header-tabs {
    margin-bottom: -1rem !important;
    margin-left: -2.25rem !important;
}

.card-header-tabs .nav-item {
    margin-right: 0 !important;
}

.card-header-tabs .nav-item .nav-link {
    position: relative;
    top: 1px;
    border-left: none;
    border-top: none;
    border-right: none;
}

.card-header-tabs .nav-item .nav-link.active {
    position: relative;
    top: 1px;
    color: #ff4900;
    font-weight: bold;
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 2px solid #ff4900;
}

.nav .show>.nav-link,
.nav .nav-link:hover:not(.disabled),
.nav .nav-link.active {
    position: relative;
    top: 1px;
    /*color: #29569f !important;*/
    /*font-weight: 500;*/
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 2px solid #ff4900;
}

/***************** card css end **************/

/***************** date-picker-range-container css end **************/

/***************** DTable css **************/
.react-bootstrap-table table {
    table-layout: unset !important;
}

/***************** DTable css end **************/

/***************** Pinnacle fonts  **************/
.pinnacle-regular {
    font-family: PinnacleRegular;
}

.pinnacle-light {
    font-family: PinnacleLight;
}

.pinnacle-bold {
    font-family: PinnacleBold;
}

.pinnacle-medium {
    font-family: PinnacleMedium;
}

.pinnacle-demi-bold {
    font-family: PinnacleDemiBold;
}

.pinnacle-demi-bold p {
    font-family: PinnacleDemiBold;
}

.pinnacle-extra-bold {
    font-family: PinnacleExtraBold;
}

/***************** Pinnacle Fonts end **************/
/***************** Mulish fonts  **************/
.mulish {
    font-family: 'Mulish';
}

.mulish-bold {
    font-family: 'Mulish';
    font-weight: 700;
}

/***************** Mulish Fonts end **************/
/***************** Tree switcher icon style **************/
.icon-with-tree .rc-tree.rc-tree-show-line .rc-tree-list .rc-tree-title {
    margin-left: 10px;
}

.icon-with-tree .rc-tree.rc-tree-show-line .rc-tree-list .rc-tree-switcher img {
    position: relative;
    left: 14px;
    top: 2px;
}

/***************** Tree switcher icon style **************/

/***************** Toast override default font  **************/
.Toastify__toast-body {
    font-family: "Mulish", sans-serif;
}
.Toastify__toast-theme--light {
    color: #fff
}
/***************** Toast override default font end **************/
/***************** Checkbox component style **************/
/* The container */
.checkbox-container {
    display: initial;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #3c358f;
    border-radius: 6px;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input~.checkmark {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked~.checkmark {
    background-color: #3c358f;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 8px;
    height: 11px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/***************** Toast override default font end **************/
/***************** Background colord **************/

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

.datepicker-style {
    width: 100%;
    height: 38px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding-left: 12px;
    background: white;
    text-align: inherit;
    color: hsl(0, 0%, 50%);
}

.custom-cm-item:hover {
    background-color: rgba(255, 73, 0, 0.2);
}

.no-wrap {
    width: auto;
    max-width: max-content;
    min-width: 200px;
}

.width-350 {
    min-width: 350px !important;
}

.width-824 {
    max-width: 824px !important;
}

.no-wrap>div:first-of-type {
    border: none;
    background: none;
    justify-content: unset !important;
}

.no-wrap>div:first-of-type(1):hover {
    border: none;
    background: none;
}

.no-wrap>div:first-of-type(1):focus {
    border: none;
    background: none;
}

.no-wrap div:nth-of-type(1) div div {
    color: #ff4900 !important;
    background: none !important;
}

.no-wrap span:nth-child(1) {
    display: none;
}

.btn-custom-search-style {
    border: 1px solid #ddd !important;
    border-left-color: #fff !important;
}

.btn-custom-search-style svg {
    width: 19px !important;
    height: 19px !important;
}

.react-datepicker-popper {
    z-index: 200 !important;
}

/***************** STUDENT STYLE **************/
.nav-student .nav-content {
    padding-top: 0 !important;
    align-items: unset !important;
}

.nav-student .nav-content .logo {
    text-align: left !important;
}

.nav-student .nav-content .logo a {
    width: 180px !important;
}

.button-menu-search {
    border: 1px solid #3c358f;
    border-right-color: #494392;
    background: #494392;
}

.input-menu-search {
    border: 1px solid #3c358f;
    background: #494392;
    color: #fff;
}

.input-menu-search:focus {
    background: #494392;
    color: #fff;
}

.input-menu-search::placeholder {
    color: #f1f2f4;
}

.menu-student-info {
    padding: 0 20px;
}

.menu-student-info>div {
    border: 1px solid rgba(243, 244, 246, 0.3);
    background-color: transparent;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 8px;
}

.modal-content>.screen-padding {
    padding: 0 !important;
}

.border-less {
    border: none !important;
    border-radius: unset !important;
}

.border-gray {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.h-38 {
    height: 38px !important;
}

.h-36 {
    height: 36px !important;
}

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

.padding-12 {
    padding: 12px !important;
}

.padding-15 {
    padding: 15px !important;
}

.padding-24 {
    padding: 24px !important;
}

.margin-12 {
    margin: 12px !important;
}

.padding-15 {
    padding: 15px !important;
}

@media only screen and (min-width: 1700px) {
    .cal-width.col-xxl-9 {
        width: 76% !important;
    }
}

@media only screen and (min-width: 1750px) {
    .cal-width.col-xxl-9 {
        width: 77% !important;
    }
}

@media only screen and (min-width: 1800px) {
    .cal-width.col-xxl-9 {
        width: 78% !important;
    }
}

@media only screen and (min-width: 1850px) {
    .cal-width.col-xxl-9 {
        width: 79% !important;
    }
}

@media only screen and (min-width: 1900px) {
    .cal-width.col-xxl-9 {
        width: 80% !important;
    }
}

@media only screen and (min-width: 1950px) {
    .cal-width.col-xxl-9 {
        width: 81% !important;
    }
}

@media only screen and (min-width: 2000px) {
    .cal-width.col-xxl-9 {
        width: 82% !important;
    }
}

@media only screen and (min-width: 2050) {
    .cal-width.col-xxl-9 {
        width: 83% !important;
    }
}

@media only screen and (min-width: 2100) {
    .cal-width.col-xxl-9 {
        width: 84% !important;
    }
}

@media only screen and (min-width: 2150) {
    .cal-width.col-xxl-9 {
        width: 85% !important;
    }
}

@media only screen and (min-width: 2200) {
    .cal-width.col-xxl-9 {
        width: 86% !important;
    }
}

@media only screen and (min-width: 2250) {
    .cal-width.col-xxl-9 {
        width: 87% !important;
    }
}

@media only screen and (min-width: 2300) {
    .cal-width.col-xxl-9 {
        width: 88% !important;
    }
}

@media only screen and (min-width: 2350) {
    .cal-width.col-xxl-9 {
        width: 89% !important;
    }
}

@media only screen and (min-width: 2400) {
    .cal-width.col-xxl-9 {
        width: 90% !important;
    }
}

@media only screen and (min-width: 2450) {
    .cal-width.col-xxl-9 {
        width: 91% !important;
    }
}

@media only screen and (min-width: 2500) {
    .cal-width.col-xxl-9 {
        width: 92% !important;
    }
}

@media only screen and (min-width: 2550) {
    .cal-width.col-xxl-9 {
        width: 93% !important;
    }
}

@media only screen and (min-width: 2600) {
    .cal-width.col-xxl-9 {
        width: 94% !important;
    }
}

@media only screen and (min-width: 2650) {
    .cal-width.col-xxl-9 {
        width: 95% !important;
    }
}

@media only screen and (min-width: 2700) {
    .cal-width.col-xxl-9 {
        width: 96% !important;
    }
}

@media only screen and (min-width: 2750) {
    .cal-width.col-xxl-9 {
        width: 97% !important;
    }
}

@media only screen and (min-width: 2800) {
    .cal-width.col-xxl-9 {
        width: 98% !important;
    }
}

@media only screen and (min-width: 2850) {
    .cal-width.col-xxl-9 {
        width: 99% !important;
    }
}

@media only screen and (min-width: 2900) {
    .cal-width.col-xxl-9 {
        width: 100% !important;
    }
}

@media screen and (max-width: 979px) {
    .menu-student-info {
        padding: 0 !important;
        margin-left: auto;
    }

    .menu-student-info>div {
        border: 1px solid rgba(243, 244, 246, 0.3);
        background-color: transparent;
        padding-top: 7px;
        padding-bottom: 7px;
        border-radius: 8px;
        max-height: 64px;
        overflow: hidden;
    }
}

.accordion-custom-style>.accordion-item {
    border: unset;
}

.accordion-custom-style .accordion-header button {
    padding: 8px;
    font-size: 14px !important;
}

.accordion-custom-style .accordion-body {
    padding: unset;
}

.accordion-custom-style button {
    padding: 10px 20px;
    border: none;
}

.accordion-custom-style .active.accordion-header {
    background-color: #d8d9db;
    border-radius: 6px;
    color: #4e4e4e !important;
}

.accordion-custom-style .accordion-button:not(.collapsed) {
    color: #4e4e4e !important;
}

.html-content-container * {
    margin-bottom: 0 !important;
}

.main-student #contentArea {
    padding-right: 0;
    padding-left: 0;
}

.student-page-title-container h1 {
    color: #000 !important;
    font-weight: 700;
}

.margin-less-05 p {
    margin-bottom: 0.5rem !important;
}

.margin-less p {
    margin-bottom: 0 !important;
}

.tradition-text {
    font-size: 28px !important;
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: tb-lr;
    -webkit-text-orientation: sideways-right;
    text-justify: inter-ideograph;
    text-align: left;
    width: 100%;
    color: #575962;
    height: 100%;
    border-radius: 0.25rem;
    /* font-family: "Mulish", sans-serif; */
    /* font-family: 'CMSUlaanbaatar'; */
    font-family: "MongolianBaiti";
    padding: 3px 5px;
}

.tradition-text-no-width {
    font-size: 28px !important;
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: tb-lr;
    -webkit-text-orientation: sideways-right;
    text-justify: inter-ideograph;
    text-align: left;
    color: #575962;
    height: 100%;
    border-radius: 0.25rem;
    font-family: "MongolianBaiti";
    padding: 3px 5px;
}

.tradition-text-student {
    max-height: 300px !important;
    height: auto !important;
    line-height: 1.3;
}

.tradition-text-student-dropzone {
    max-height: 75px !important;
    height: auto !important;
    line-height: 1;
    font-size: 18px !important;
}

.mongolian-script-input {
    border: 1px solid #ebedf2;
    /* font-family: 'MongolianScript'; */
    font-family: "Mulish", sans-serif;
    writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    text-orientation: sideways-right;
    -webkit-text-orientation: sideways-right;
    text-align: left;
    min-height: 20px;
    background: #fff;
    min-width: 50px;
    font-size: 20px;
    height: 100%;
    width: 100%;
}

.mongolian-script-input b {
    font-weight: 900;
}

.button-bold-mscript {
    height: 30px;
    width: 30px;
    background: #fff;
    border: 0;
    font-weight: bold;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.tradition-style>div {
    font-size: 2rem;
}

.tradition-text:focus {
    border-color: #6167e0;
}

.resize-container {
    height: 150px;
    min-height: 150px;
    min-width: 300px;
    border: 1px solid #ebedf2;
    overflow: hidden;
    resize: vertical;
}

.resize-vertical {
    resize: vertical;
}

.basket {
    height: 100px;
    background-color: gray;
}

.drag-list-style {
    border: 1px solid #dcdfe4;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 4px;
    margin-right: 15px;
}

.drag-list-path-style {
    border: 1px solid #dcdfe4;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 4px;
}

.drag-list-style p,
.dropzone-text-style p,
.dnd-style p {
    margin-bottom: 0 !important;
}

.non-max-width {
    max-width: none !important;
}

.match-sk-editor-container-first {
    width: calc(100% - 242px);
    margin-bottom: 4px;
}

.match-sk-editor-container {
    width: calc(100% - 272px);
    margin-bottom: 4px;
}

.upload-image-button {
    color: #5867dd !important;
    border-color: #5867dd !important;
    font-weight: 700;
    font-size: 12px;
    border-radius: 8px;
    padding: 8px;
    background: #ffffff;
    width: 156px;
    max-width: 100%;
    margin: auto;
}

.upload-image-button .modal-add-button {
    margin: 0;
}

.add-button {
    font-family: var(--font-heading);
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 8px;
    font-size: 11px;
}

.add-button .import {
    background-color: #36a3f7;
}

.add-button .bio {
    font-size: 12px;
    border-radius: 12px;
}

.filter-button {
    align-items: center;
    font-family: var(--font-heading);
    padding: 8px;
    background: #41c5dc;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
}

.back-button {
    color: #ff2f1a !important;
    font-weight: 700;
    font-size: 14px;

    @include respond-below(sm) {
        font-size: 12px;
    }
}

.profile-avatar {
    height: 136px;
    width: 133px;
    border-radius: 100px;
}

@media screen and (max-width: 1700px) {
    .profile-avatar {
        height: 100px;
        width: 100px;
    }

    .upload-image-button {
        font-size: 12px;
        padding: 4px;
    }
}

@media screen and (max-width: 1501px) {
    .profile-avatar {
        height: 85px;
        width: 78px;
    }

    .upload-image-button {
        font-size: 12px;
        padding: 4px;
    }
}

@media screen and (max-width: 1450px) {
    .profile-avatar {
        height: 70px;
        width: 70px;
    }

    .upload-image-button {
        font-size: 12px;
        padding: 4px;
    }
}

.plan-filter {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    padding: 0;
    margin-right: 8px;
    width: 100%;
}

.bs-gutter-x-0 {
    --bs-gutter-x: 0;
}

.mini-ck-editor .ck.ck-reset {
    width: 100%;
}

.mini-ck-editor .ck.ck-toolbar__items {
    font-size: 10px;
}

.mini-ck-editor .resize-container {
    width: 100%;
}

.label-gray {
    color: #868aa5;
}

.label-orange {
    color: #ff4900;
}

.display-4 {
    font-family: var(--font);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 400;
}

.circle-graph-title {
    left: 0 !important;
    right: 0 !important;
    text-align: center;
}

.relative {
    position: relative;
    right: 1px;
}

.ml-per-20 {
    margin-left: 20%;
}

@media screen and (max-width: 1000px) {
    .ml-per-20 {
        margin-left: 0;
    }
}

.hide-scroll-bar {
    overflow-y: scroll;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
}

.hide-scroll-bar::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
}

.study-plan-tab-style button {
    padding-left: 2rem;
    padding-right: 2rem;
}

.study-plan-tab-style button h5 {
    font-weight: bold;
}

.study-plan-tab-style .btn-empty {
    border: 1px solid #f1f2f4 !important;
}

.glide__arrows .btn-back-empty {
    color: white !important;
    cursor: default;
    width: 94px;
}

.glide__arrows .btn-back-empty:hover {
    background-color: white !important;
}

.green-background {
    background-color: #22C55E;
    /* opacity: 30%; */
}

.red-background {
    background-color: #FF4949;
    /* opacity: 30%; */
}

.study-plan-button-group button:hover {
    background-color: #7E5BCC !important;
}

.study-plan-button-group button:first-of-type {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.study-plan-button-group button:last-of-type {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}

.study-plan-button-group button:first-of-type .active {
    position: relative;
    right: 4px;
}

.study-plan-button-group button:last-of-type .active {
    position: relative;
    left: 4px;
}

.study-plan-button-group span.active {
    background-color: white;
    color: #7E5BCC;
    padding: 4px 6px;
    border-radius: 40px;
}

.fs-1 {
    font-size: 1px !important;
}

.fs-2 {
    font-size: 2px !important;
}

.fs-3 {
    font-size: 3px !important;
}

.fs-4 {
    font-size: 4px !important;
}

.fs-5 {
    font-size: 5px !important;
}

.fs-6 {
    font-size: 6px !important;
}

.fs-7 {
    font-size: 7px !important;
}

.fs-8 {
    font-size: 8px !important;
}

.fs-9 {
    font-size: 9px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-17 {
    font-size: 17px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-19 {
    font-size: 19px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-21 {
    font-size: 21px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-23 {
    font-size: 23px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-25 {
    font-size: 25px !important;
}

.fs-26 {
    font-size: 26px !important;
}

.fs-27 {
    font-size: 27px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-29 {
    font-size: 29px !important;
}

.fs-30 {
    font-size: 30px !important;
}

.fs-31 {
    font-size: 31px !important;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-33 {
    font-size: 33px !important;
}

.fs-34 {
    font-size: 34px !important;
}

.fs-35 {
    font-size: 35px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fs-37 {
    font-size: 37px !important;
}

.fs-38 {
    font-size: 38px !important;
}

.fs-39 {
    font-size: 39px !important;
}

.fs-40 {
    font-size: 40px !important;
}

.webinar-tab-button-style button:not(active) {
    text-justify: justify;
    background-color: rgb(255, 91, 29);
    background-color: rgba(255, 91, 29, 0.2);
    color: #3c358f;
}

.webinar-tab-button-style button:not(active) span {
    opacity: 100% !important;
    color: #3c358f;
}

.w-350 {
    width: 350px !important;
}

.datepicker-default-border>div>input {
    border: 1px solid #ccc !important;
}

.council-accordion div.MuiButtonBase-root>div:nth-child(2) {
    position: relative;
    bottom: 55px;
}

.question-table-style table {
    width: 100%;
    border: 1px solid #dee2e6;
}

.question-table-style td,
th {
    border: 1px solid #dee2e6;
    padding: 0.4rem 0.4rem;
}

.main-student-padding-2-5rem {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: calc(var(--nav-size) + var(--main-spacing-horizontal) - 2.5rem) !important;
}

.main-student-padding-2-5rem .container {
    padding-left: 0;
    padding-right: 0;
}

.eschool-player .controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 25px;
    display: flex;
    justify-content: space-around;
    opacity: 0.2;
    transition: opacity 0.4s;
}

.eschool-player:hover .controls {
    opacity: 1;
}

.eschool-player .controls button {
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    height: 40px;
}

.eschool-player .controls .timeline {
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
    border-right: 3px solid #ccc;
    border-left: 3px solid #ccc;
}

.eschool-player .controls .timeline .bar {
    background: rgb(1, 1, 65);
    height: 4px;
    flex: 1;
}

.eschool-player .controls .timeline .bar .inner {
    background: #ccc;
    width: 0%;
    height: 100%;
}

.eschool-player .la {
    font-size: 26px !important;
}

.eschool-player .progress-bar {
    width: 100%;
    margin: auto 20px;
    background-color: #222;
    box-shadow: inset -1px 1px 1px #000;
    height: 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s linear;
}

.eschool-player .progress-bar:hover {
    height: 20px;
}

.eschool-player .progress-buffer {
    background-color: rgba(255, 255, 255, 0.1);
    width: 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: all 0.01s linear;
    border-radius: 10px;
}

.eschool-player .progress-thumb {
    background-color: #3c358f;
    width: 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: all 0.01s linear;
    box-shadow: inset 1px 1px 1px #000b39;
    border-radius: 10px;
}

.eschool-player .progress-admin-thumb {
    background-color: #3c358f;
    width: 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: all 0.01s linear;
    box-shadow: inset 1px 1px 1px #da4107;
    border-radius: 10px;
}

.eschool-player .volume-container {
    position: relative;
}

.eschool-player .volume-slider {
    display: none;
    position: absolute;
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    width: 35px;
    bottom: 40px;
}

.eschool-player .volume-slider:hover,
.eschool-player .volume-container:hover .volume-slider {
    display: block;
}

.podcast-forms-style .eschool-select,
.podcast-forms-style input.form-control,
.podcast-forms-style .eschool-checkbox {
    width: 540px;
}

.podcast-view-style button.MuiTab-root {
    padding: 12px 32px 0 15px !important;
}

.other-podcast {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.other-podcast:hover {
    background-color: #f1f2f4;
    border-radius: 8px;
    margin-top: -5px;
    margin-bottom: -5px;
}

.council-search-input:focus {
    border: 1px solid #3c358f;
}

.council-search-input {
    font-size: 0.9rem;
    padding: 0px 15px;
    display: flex;
    align-items: center;
    width: 220px;
    border: 1px solid #ebedf2;
    box-shadow: none;
    border-radius: 8px;
    height: 38px;
    font-family: "Mulish";
    outline: none;
}

/* CUSTOM BUTTON STYLE */
.outline-danger-custom-1 {
    color: #f4516c;
    border: 1px solid #f4516c;
}

.outline-danger-custom-1:hover {
    color: #fff;
    background-color: #f4516c;
    border-color: #f4516c;
}

.btn-check:focus+.outline-danger-custom-1,
.outline-danger-custom-1:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(244, 81, 108, 0.5);
    box-shadow: 0 0 0 0.25rem rgba(244, 81, 108, 0.5);
}

.btn-check:checked+.outline-danger-custom-1,
.btn-check:active+.outline-danger-custom-1,
.outline-danger-custom-1:active,
.outline-danger-custom-1.active,
.outline-danger-custom-1 .dropdown-toggle .show {
    color: #fff;
    background-color: #f4516c;
    border-color: #f4516c;
}

.btn-check:checked+.outline-danger-custom-1:focus,
.btn-check:active+.outline-danger-custom-1:focus,
.outline-danger-custom-1:active:focus,
.outline-danger-custom-1.active:focus,
.outline-danger-custom-1.dropdown-toggle.show:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(244, 81, 108, 0.5);
    box-shadow: 0 0 0 0.25rem rgba(244, 81, 108, 0.5);
}

.outline-danger-custom-1:disabled,
.outline-danger-custom-1.disabled {
    color: #f4516c;
    background-color: transparent;
}

.outline-success-custom-1 {
    color: #3ebfa3;
    border: 1px solid #3ebfa3;
}

.outline-success-custom-1:hover {
    color: #fff;
    background-color: #3ebfa3;
    border-color: #3ebfa3;
}

.btn-check:focus+.outline-success-custom-1,
.outline-success-custom-1:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(62, 191, 163, 0.5);
    box-shadow: 0 0 0 0.25rem rgba(62, 191, 163, 0.5);
}

.btn-check:checked+.outline-success-custom-1,
.btn-check:active+.outline-success-custom-1,
.outline-success-custom-1:active,
.outline-success-custom-1.active,
.outline-success-custom-1 .dropdown-toggle .show {
    color: #fff;
    background-color: #3ebfa3;
    border-color: #3ebfa3;
}

.btn-check:checked+.outline-success-custom-1:focus,
.btn-check:active+.outline-success-custom-1:focus,
.outline-success-custom-1:active:focus,
.outline-success-custom-1.active:focus,
.outline-success-custom-1.dropdown-toggle.show:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(62, 191, 163, 0.5);
    box-shadow: 0 0 0 0.25rem rgba(62, 191, 163, 0.5);
}

.outline-success-custom-1:disabled,
.outline-success-custom-1.disabled {
    color: #3ebfa3;
    background-color: transparent;
}

.la-old {
    display: inline-block;
    font: normal normal normal 22px/1 LineAwesomeOld !important;
    font-size: inherit;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.la-file-excel-o:before {
    content: "\f1e3" !important;
}

/* CUSTOM BUTTON STYLE END */
@media print {
    .print-page-break {
        page-break-before: always;
    }

    #pageFooter:after {
        counter-increment: page;
        content: "Page " counter(page);
        left: 0;
        top: 100%;
        white-space: nowrap;
        z-index: 20;
        -moz-border-radius: 5px;
        -moz-box-shadow: 0px 0px 4px #222;
        background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    }
}

.crossword-style .direction {
    border-radius: 12px;
    border: 1px solid #7e5bcc;
}

.crossword-style .direction .header {
    font-size: 16px;
    background-color: #7e5bcc;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 12px;
    text-align: center;
    color: white;
}

.student-crossword-style .direction div {
    padding-left: 25px !important;
}

.crossword-style .direction div {
    margin-left: 12px;
    margin-bottom: 12px;
}

.crossword-style input[aria-label="crossword-input"] {
    border: none !important;
    outline: none;
}

.crossword-tab-panel-style>div {
    padding: 0 0 24px 24px;
}

.crossword-tab-style {
    width: 320px;
    max-width: 320px;
    min-width: 320px;
}

.crossword-tab-style .MuiTabs-flexContainer.MuiTabs-flexContainerVertical {
    width: 320px;
}

.crossword-tab-style button.MuiTab-root {
    padding: 12px !important;
    font-size: 13px !important;
}

.crossword-tab-style .cross-add-style {
    background: #ff4900;
    color: white;
    min-height: 50px;
}

.crossword-tab-style .cross-label-style {
    min-height: 50px;
}

.crossword-tab-style .MuiTabs-indicator {
    background-color: #ff4900;
}

.crossword-tab-style button.MuiTab-root.Mui-selected {
    border: 2px solid #ff4900;
}

.crossword-style svg {
    paint-order: stroke;
}

.is-open-crossword-modal {
    display: none !important;
}

.student-crossword-style .clue {
    margin-left: 20px;
}

.student-crossword-style .incorrect {
    background: url("/img/crossword/incorrect.svg");
    background-size: 20px;
    background-repeat: no-repeat;
}

.student-crossword-style .correct {
    background: url("/img/crossword/correct.png");
    background-size: 20px;
    background-repeat: no-repeat;
}

.student-crossword-style .clue:not(.correct) {
    background: url("/img/crossword/incorrect.svg");
    background-size: 20px;
    background-repeat: no-repeat;
}

/* .student-crossword-style .incorrect:before {
    content: "";
    background: url("/img/crossword/incorrect.svg");
    background-size: cover;
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -25px;
} */

/* .student-crossword-style .correct:before {
    content: "";
    background: url("/img/crossword/correct.png");
    background-size: cover;
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -25px;
} */

/* .student-crossword-style .clue:not(.correct):before {
    content: "";
    background: url("/img/crossword/incorrect.svg");
    background-size: cover;
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -25px;
} */

.student-crossword-style svg {
    pointer-events: none !important;
    paint-order: stroke;
}

.cross-label-style span {
    width: 100%;
}

.doc-viewer #pdf-download,
.doc-viewer .cui-ctl {
    display: none;
}

.ewa-embed-buttons a:first-of-type {
    display: none;
}

#msdoc-iframe frame html {
    display: none !important;
}

.my-doc-viewer-style .cui-ctl {
    display: none !important;
}

.student-doc-viewer {
    border: 1px solid #4f43bf;
    border-radius: 10px;
    padding: 15px;
}

.fill-the-in-blank-style ul {
    margin-bottom: 0 !important;
    display: inline-block;
}

.fill-the-in-blank-style p {
    display: inline-block;
}

/* .fill-the-in-blank-style div > li{ */
/* padding-left: 2rem !important; */
/* } */

.select-xl-with-avatar {
    height: 80px;
}

.select-xl-with-avatar>div {
    border: unset;
    background: transparent;
    height: 80px;
}

.select-xl-with-avatar>div>div {
    height: 80px;
}

.select-xl-with-avatar>div>div:last-child span {
    width: 0;
}

.select-xl-with-avatar>div>div:last-child div {
    position: relative;
    right: 15px;
    color: var(--background);
}

.select-avatar-style {
    border-radius: 8px;
    margin-left: 10px;
}

.select-avatar-style-14 {
    border-radius: 2px;
    margin-left: 5px;
}

.select-avatar-text-style {
    font-family: "PinnacleDemiBold";
    font-size: 16px;
    color: var(--background);
}

.nav-student-name {
    font-family: "PinnacleDemiBold";
    font-size: 14px;
}

.vertical-separate {
    font-size: 28px;
    position: relative;
    top: -2px;
    font-weight: 100;
}

.filled-30 {
    position: relative;
}

.filled-30>svg {
    position: absolute;
    top: 5px;
    left: 10px;
    color: rgba(var(--alternate-rgb), 0.5);
    z-index: 1;
}

.filled-30 .form-control {
    min-height: 30px;
    border: 1px solid rgba(0, 0, 0, 0);
    background: var(--background-light);
    padding: 5px 6px 5px 40px;
    font-size: 12px;
}

.mini-margin .col {
    padding-left: 5px;
    padding-right: 5px;
}

.h-90 {
    height: 90%;
}

.tab-primary {
    border: none;
}

.tab-primary .nav-link {
    font-family: "PinnacleRegular";
    border: 1px solid transparent;
    color: var(--muted);
}

.tab-primary .nav-link:hover {
    border: 0 !important;
}

.tab-primary .nav-link.active {
    border-bottom: 2px solid var(--secondary);
    background-color: transparent;
    font-family: "PinnacleBold";
}

.tab-primary .nav-link.active:hover {
    border-bottom: 2px solid var(--secondary) !important;
}

.tab-secondary {
    border: none;
}

.tab-secondary .nav-link {
    position: relative;
    top: 1px;
    font-family: "Mulish";
    line-height: 17.57px;
    color: var(--muted);
    border: 0 solid transparent;
    border-bottom: none !important;
    border-radius: 8px;
}

.tab-secondary .nav-link:hover {
    background: var(--secondary);
    color: var(--light);
    transition: all 0.2s ease;
}

.tab-secondary .nav-link.active {
    background-color: var(--secondary);
    color: var(--light);
}

.custom-progress-bar-wrapper {
    position: relative;
    height: 28px;
    width: 275px;
}

.custom-progress-bar-wrapper .progress-bar-label {
    content: attr(data-label);
    position: absolute;
    top: 5px;
    right: 5%;
    font-size: 12px;
    color: var(--muted);
}

.chevron-button-focus-style button {
    width: 20px;
    padding: 0 !important;
}

.chevron-button-focus-style svg {
    width: 15px;
    height: 15px;
}

.chevron-button-focus-style button:first-of-type svg {
    position: relative;
    right: 1px;
}

.chevron-button-focus-style button:last-of-type svg {
    position: relative;
    left: 1px;
}

.chevron-button-focus-style .btn-outline-light:hover {
    background-color: #7e5bcc !important;
    box-shadow: initial !important;
}

.chevron-button-focus-style .btn-outline-light:hover svg {
    stroke: white;
}

.timetable-table-style table tr th {
    border: unset;
    padding: 0;
}

.timetable-table-style .btn-foreground-alternate.active {
    color: #3c358f !important;
}

.timetable-table-style .btn-foreground-alternate:focus {
    color: #3c358f !important;
}

.timetable-table-style .btn-foreground-alternate:not(:disabled):not(.disabled):focus,
.timetable-table-style .btn-foreground-alternate:not(:disabled):not(.disabled).focus {
    color: #3c358f !important;
}

.today-timetable-table-style {
    padding: 0px 12px 0px 12px;
}

.today-timetable-table-style tr:last-child td.timetable-today {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.today-timetable-table-style th:not(.timetable-today) {
    position: relative;
    bottom: 10px;
}

.today-timetable-table-style table tr th {
    border: unset;
    padding: 0;
}

.today-timetable-table-style .btn-foreground-alternate.active {
    color: #3c358f !important;
}

.today-timetable-table-style .btn-foreground-alternate:focus {
    color: #3c358f !important;
}

.today-timetable-table-style .btn-foreground-alternate:not(:disabled):not(.disabled):focus,
.today-timetable-table-style .btn-foreground-alternate:not(:disabled):not(.disabled).focus {
    color: #3c358f !important;
}

.today-timetable-top-background {
    background: #CBD4FA;
    position: relative;
    bottom: 34px;
    width: 100%;
    height: 34px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.flex-direction-column {
    flex-direction: column;
}

.height-14 {
    height: 14px;
}

.height-16 {
    height: 16px;
}

.height-18 {
    height: 18px;
}

.height-20 {
    height: 20px;
}

.height-30 {
    height: 30px;
}

.width-30 {
    width: 30px;
}

.curriculum-main-chart-style canvas {
    width: 180px !important;
    height: 180px !important;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
}

.curriculum-mini-chart-style canvas {
    width: 50px !important;
    height: 50px !important;
}

.subject-detail-banner {
    border-radius: 12px;
    padding: 0 !important;
}

.subject-detail-banner .subject-detail-banner-header {
    color: white;
    font-weight: 600;
    font-size: 16px;
    padding: 12px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.subject-detail-banner .subject-detail-banner-body {
    padding: 12px;
}

.custom-expandable-textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-left: 0.25rem;
}

.custom-editable-textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-left: 0.25rem;
}

.custom-textarea-header {
    padding: 10px;
    background-color: #f0f0f0;
    cursor: pointer;
}

.custom-expandable-textarea.expanded {
    height: 230px;
    margin-left: 0.25rem;
}

textarea.custom-expandable-textArea {
    width: 100%;
    height: 182px;
    border: none;
    padding: 10px;
    resize: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

textarea.discussion-textarea-style {
    width: 100%;
    border: none;
    padding: 12px;
    resize: vertical;
    border-radius: 4px;
    background-color: #f9fafb;
}

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

.custom-button-container {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
}

.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.custom-date-container {
    border-radius: 4px !important;
    padding: 4px !important;
    min-width: 100px !important;
    width: 110px !important;
    height: auto !important;
    font-size: 12px !important;
    height: 24px !important;
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
}

.custom-time-container {
    border-radius: 4px !important;
    padding: 4px !important;
    width: 100% !important;
    height: auto !important;
    font-size: 12px !important;
    height: 24px !important;
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
}

.no-box-shadow {
    box-shadow: none !important;
}

.MuiButtonBase-root.MuiAccordionSummary-root {
    display: flex;
    padding-left: 1rem;
    padding-right: 1rem;
}

.modal-event-custom {
    max-width: 355px;
}

.icon-stroke-width-1 path {
    stroke-width: 1px !important;
}

.icon-stroke-width-2 path {
    stroke-width: 2px !important;
}

.icon-stroke-width-3 path {
    stroke-width: 3px !important;
}

.icon-stroke-width-4 path {
    stroke-width: 4px !important;
}

.icon-stroke-width-5 path {
    stroke-width: 5px !important;
}

.checkbox-secondary.Mui-checked {
    color: var(--secondary) !important;
}

.event-modal-input-custom {
    width: 100%;
    height: 30px;
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 4px;
    padding-left: 12px;
}

.custom-crossword-container {
    flex-direction: row-reverse;
}

.custom-crossword-container .direction {
    border-radius: 12px;
    padding: 0 !important;
    border: 1px solid var(--secondary);
}

.custom-crossword-container .direction .header {
    color: white;
    font-weight: 600;
    font-size: 16px;
    padding: 0.5rem 1rem;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    background: var(--secondary);
    margin-bottom: 0 !important;
}

.custom-crossword-container .direction .clue:last-child {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

.custom-crossword-container .direction .clue {
    padding: 0.5rem 1rem;
    margin: 0;
}

.forgot-password-modal-style .modal-header .modal-title {
    font-family: PinnacleDemiBold;
    color: #1f2937;
}

.login-carousel-style {
    background-color: rgba(126, 91, 204, 0.08);
    border-color: rgba(126, 91, 204, 0.05);
    box-shadow: 0px 0px 10px 4px rgba(126, 91, 204, 0.16) !important;
}

.login-carousel-style .card-body {
    padding: 1rem 2rem;
}

.login-carousel-style .glide__bullet {
    background: white;
}

.login-carousel-style .glide__bullet.glide__bullet--active {
    width: 20px;
}

.custom-tabs {
    display: flex;
}

.custom-tabs>button {
    color: var(--muted);
}

.custom-tabs>button:hover {
    background-color: var(--secondary);
    color: #fff;
}

.custom-tabs>button.active {
    background-color: var(--secondary);
    color: #fff;
}

.custom-tabs .btn-admin {
    color: var(--muted);
    background-color: var(--background);
}

.custom-tabs .btn-admin:hover {
    color: var(--muted);
    background-color: #73788331;
}

.custom-tabs svg {
    margin-right: 6px;
}

.custom-tabs .divider {
    border-left: 1px solid var(--secondary);
    margin-left: 12px;
    margin-right: 12px;
}

.collapse-menu {
    display: flex;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.collapse-menu-active {
    display: flex;
    justify-content: space-between;
    background-color: var(--secondary);
    border-radius: 12px;
    color: #fff;
    transition: all 0.2s ease;
}

.collapse-item {
    color: var(--muted);
}

.collapse-item-active {
    color: var(--secondary);
}

.collapse-item .middle-line {
    position: absolute;
    left: 34px;
    width: 12px;
    color: #0000001f;
}

.collapse-item-active .middle-line {
    position: absolute;
    left: 34px;
    width: 12px;
    color: #0000001f;
}

.help-content-title {
    padding: 12px;
    color: var(--secondary);
    border-bottom: 1px solid rgba(126, 91, 204, 0.4);
}

.content-collapse {
    display: flex;
    justify-content: space-between;
    color: var(--secondary);
    border-bottom: 1px solid rgba(126, 91, 204, 0.4);
}

.qa-search-container {
    padding: 20px 30px;
    border-radius: 12px;
    background-image: linear-gradient(120deg, #deeaf9, #d89ed4);
}

.qa-search-title {
    font-family: "PinnacleDemiBold";
    font-size: 26px;
    font-weight: 700;
}

.qa-search-desc {
    color: var(--muted);
    margin-bottom: 24px;
}

.qa-titles {
    padding: 12px;
    border-radius: 12px !important;
    height: 680px;
    width: 42vw;
    z-index: 99;
    position: absolute;
    left: 3vw;
    top: 60px;
}

.qa-desc {
    padding: 40px 32px 40px 13%;
    margin-right: 40px;
    height: calc(100vh - 200px);
    border-radius: 12px;
    background-color: #fafbff;
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.15) !important;
    margin-left: auto;
}

.custom-scrollbar {
    overflow-y: auto;
    padding-right: 12px;
}

.custom-scrollbar::-webkit-scrollbar {
    border-radius: 12px;
    background-color: #e5e7eb;
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background-color: var(--secondary);
}

.qa-questions>div:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.qa-questions>div:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.qa-questions .active {
    background-color: #FAFBFF;
}

.qa-question-container:hover {
    background-color: #FAFBFF;
}

.qa-question-container {
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
    padding: 24px 16px;
}

.qa-question-title {
    display: flex;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.qa-question-title svg {
    margin-left: auto;
    color: var(--secondary);
}

.qa-question-title div:first-child {
    width: 24px;
    height: 24px;
    border-radius: 40px;
    background-color: var(--secondary);
    margin-right: 18px;
}

.qa-desc-title {
    font-family: "PinnacleDemiBold";
    font-size: 14px;
    margin-bottom: 40px;
}

.qa-desc-text {
    font-size: 14px;
    color: #111827;
    font-weight: 400;
}

.overflow-y-auto {
    overflow-y: auto;
}

.dot-12 {
    width: 12px;
    height: 12px;
    border-radius: 40px;
    background-color: #d89ed4;
}

.qa-style .collapse{
    border-left: 1px solid var(--secondary);
    margin-left: 11px;
    transition: all 0.4s ease;
}

.qa-style .middle-line {
    position: relative;
    top: 20px;
    width: 12px;
    color: var(--secondary);
}


@media (max-width: 1599px) {
    .qa-titles {
        left: 2vw;
        width: 41vw;
    }
}

@media (max-width: 1399px) {
    .qa-titles {
        left: 1vw;
        width: 40vw;
    }
}

@media (max-width: 1199px) {
    .qa-titles {
        position: static;
        height: 800px;
        width: auto;
        padding: 0;
    }

    .qa-desc {
        margin-top: 12px;
        margin-right: 0;
        padding: 20px;
    }
}

/* doc viewer */
#pdf-download {
    display: inline-block !important;
    background-color: transparent;
    box-shadow: none !important;
}

#pdf-download path {
    fill: #fff;
}

#pdf-download polygon {
    fill: #fff;
}

#pdf-controls {
    background-color: #201f1f75;
}

#pdf-controls button {
    background-color: transparent;
}

#search-plus-icon {
    fill: #fff;
}

#pdf-zoom-reset svg path {
    fill: #fff;
}

.react-pdf__Document {
    display: flex;
    justify-content: center;
    background-color: grey;
    flex-direction: row !important;
    margin: 0 !important;
}

/* Chat */
.chat-container {
    height: 90vh;
}

.chat-comp-header {
    padding-bottom: 24px;
    border-bottom: 1px solid #0000001f;
}

.chat-comp-header.profile-comp {
    display: flex;
    align-items: center;
}

.chat-comp-header .sub-title {
    margin-bottom: 6px;
}

.chat-comp-header .student-code {
    color: var(--muted);
}

.chat-comp-header.profile-comp img {
    width: 72px;
    height: 72px;
    border-radius: 40px;
    margin-right: 12px;
}

.chat-comp-body {
    margin-top: 12px;
}

.chat-select-user-container div:last-child {
    border: none;
}

.chat-select-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 12px;
    border-bottom: 1px solid #0000001f;
    cursor: pointer;
}

.chat-select-user img {
    width: 48px;
    height: 48px;
    border-radius: 40px;
}

.chat-select-userInfo {
    margin-left: 10px;
}

.chat-select-userInfo div:first-child {
    font-weight: 400;
    font-size: 14px;
}

.chat-select-userInfo div:last-child {
    color: var(--muted);
    font-size: 14px;
    margin-top: 8px;
}

.chat-select-info {}

.chat-select-info div:first-child {
    color: var(--muted);
    font-size: 14px;
}

.chat-select-info div:last-child {
    margin-top: 8px;
    text-align: end;
}

.chat-select-info div:last-child span {
    padding: 4px 8px;
    background-color: #f3f4f6;
    border-radius: 4px;
}

.chat-message-content {
    padding: 12px 24px;
    color: var(--background);
    background-color: rgba(126, 91, 204);
    border-radius: 8px;
    font-size: 14px;
    margin-top: 12px;
}

.chat-message-content.respond {
    color: var(--muted);
    background-color: #f3f4f6;
}

.fileGroup-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fileGroup-container .sub-title {
    font-family: "Mulish";
    font-weight: 700;
    font-size: 16px;
}

.file-image-container {
    padding: 0 6px;
}

.collapse-group-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-weight: 400;
    font-size: 14px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.collapse-group-member:hover {
    background-color: var(--background);
}

.collapse-group-member div {
    display: flex;
    align-items: center;
}

.collapse-group-member img {
    width: 28px;
    height: 28px;
    border-radius: 40px;
    margin-right: 10px;
}

.collapse-group-member svg {
    width: 20px;
    height: 20px;
    color: #ff4949;
    cursor: pointer;
}

.group-member-list {
    /* height: 100%;
    padding-bottom: 25px; */
}

/* create new chat modal */
.modal-select-user img {
    width: 48px;
    height: 48px;
    border-radius: 40px;
}

.create-chat-modal .modal-content {
    height: 681px;
    width: 432px;
}

.create-chat-modal .modal-body {
    width: 432px;
    height: 100%;
}

.modal-select-user-container {
    margin-top: 12px;
}

.modal-select-user {
    padding: 12px 20px;
    border-bottom: 1px solid #0000001f;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-select-user div:first-child {
    display: flex;
    gap: 10px;
}

.modal-select-user .newChat-user-info {
    color: var(--muted);
}

.create-chat-modal svg {
    margin-right: 4px;
}

.create-chat-modal button {
    width: 200px;
}

.modal-select-user-container div:last-child {
    border: none;
}

.modal-select-user .custom-checkbox svg {
    margin: 0;
    padding: 2px;
    width: 20px;
    height: 20px;
    border: 1px solid #0000001f;
    border-radius: 40px;
    color: #fff;
    cursor: pointer;
}

.create-chat-modal svg {
    z-index: 0;
}

.discussion-comment-style .svg-style svg {
    width: 20px !important;
    height: 20px !important;
}

.create-chat-modal .css-1cnxohn-control {
    min-height: 30px !important;
    height: 30px !important;
}

.create-chat-modal .css-1h46eh9-control {
    min-height: 30px !important;
    height: 30px !important;
}

.create-chat-modal .css-tlfecz-indicatorContainer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 4px !important;
    transform: rotate(-90deg);
    transition: all 0.2s ease;
}

.create-chat-modal .css-tlfecz-indicatorContainer svg {
    color: #7e5bcc !important;
    width: 15px;
}

.create-chat-modal .css-1gtu0rj-indicatorContainer svg {
    color: #7e5bcc !important;
    width: 15px;
}

.create-chat-modal .css-1gtu0rj-indicatorContainer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 4px !important;
    transform: rotate(0deg);
    transition: all 0.2s ease;
}

.create-chat-modal .eschool-select {
    font-size: 12px !important;
}

.crossword-style {
    flex-direction: row-reverse;
}

.box-static {
    border-radius: 12px;
    width: 160px;
    height: 76px;
}

.fill {
    height: 100vh;
}

.dot {
    min-width: 4px;
    max-width: 4px;
    width: 4px;
    min-height: 4px;
    max-height: 4px;
    height: 4px;
    border-radius: 100%;
}

.rounded-12 {
    border-radius: 12px;
}

@media (max-width: 1199px) {
    .message-card {
        padding: 0 !important;
    }

    .file-card {
        margin-top: 12px;
    }
}

.image-view-modal .modal-content {
    background-color: transparent !important;
    border: none !important;
}

.image-view-modal .glide__track {
    height: 100%;
}

.image-view-modal .glide.glide-gallery {
    height: 60vh;
}

.image-view-modal .glide-large {
    height: 100%;
}

.image-view-modal .glide__slides {
    height: 100%;
}

.image-view-modal .glide__slide {
    align-content: center;
}

.image-view-modal .glide-thumb .glide__arrows .btn {
    width: 40px;
    height: 40px;
    background-color: var(--secondary);
    top: -300px !important;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-view-modal .glide-thumb .glide__arrows .btn svg {
    width: auto !important;
    height: auto !important;
    color: #fff;
}

.image-view-modal .glide-thumb img {
    height: 100%;
}

.image-view-modal .btn.right-arrow {
    right: -150px !important;
}

.image-view-modal .btn.left-arrow {
    left: -150px !important;
}

.image-view-modal .glide-thumb {
    margin-top: 24px;
    height: 50px;
}

@media (max-width: 576px) {
    .image-view-modal .btn.right-arrow {
        display: none !important;
    }

    .image-view-modal .btn.left-arrow {
        display: none !important;
    }
}

.chat-avatar-upload {
    background: #7e5bcc;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: -2px;
    right: 10px;
    cursor: pointer;
}

.modal-open .container-fluid,
.modal-open .container,
.modal-open .nav-content {
    -webkit-filter: blur(3px) grayscale(80%);
}

.focus-primary:focus {
    outline: none !important;
    border: 1px solid var(--secondary);
}

.progress-bg {
    background-color: var(--background);
    border-radius: 4px;
    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.progress-bg>div {
    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
    transition: all ease-in 0.5s;
    border-radius: 4px;
}

.gap-30 {
    gap: 30px;
}

.w-400-modal .modal-dialog {
    max-width: 400px;
}

.custom-table {
    border-radius: 12px;
}

.custom-table,
thead,
th,
tbody,
tr,
td {
    border-color: transparent;
}

.custom-table thead th {
    background-color: var(--secondary);
    color: var(--light);
}

.custom-table tbody tr:nth-child(odd) {
    background-color: var(--light);
}

.custom-table tbody tr:nth-child(even) {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.custom-table thead th:first-child {
    border-top-left-radius: 12px;
}

.custom-table thead th:last-child {
    border-top-right-radius: 12px;
}

@media (min-width: 1200px) {
    .performance-attendance-modal .modal-xl {
        max-width: 985px;
    }

    .performance-homework-modal .modal-xl {
        max-width: 1424px;
    }
}

.subtopic-row {
    display: none;
    height: 0;
    overflow: hidden;
    transition: all 0.2s;
}

.subtopic-row.open {
    display: table-row;
    height: 48px;
}

.table-expand-arrow {
    transform: rotate(0deg);
    transition: all 0.2s;
}

.table-expand-arrow.open {
    transform: rotate(180deg);
}

.collapse-icon {
    opacity: 0.4;
    rotate: -90deg;
    transition: all 0.2s ease;
}

.collapse-icon.open {
    opacity: 1;
    rotate: 0deg;
}

/***************** STUDENT STYLE END **************/


.meeting-time-card {
    display: flex;
    flex: 1 0 46%;
}

.meeting-time-card .card-body {
    height: 196px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
}

.meeting-time-date {
    width: 67px;
    height: 66px;
    border: 1px solid #7E5BCC;
    border-radius: 12px;
    padding: 9px 20px;
    background-color: #7E5BCC;
    align-items: center;
}

.meeting-time-card img {
    width: 164px;
    height: 164px;
}

.meeting-time-notfound-img svg {
    width: 20rem;
    height: auto;
    /* width: 27.43rem;
    height: 30.18rem;    */
    transform: scale(1);
}

.meeting-time-warning {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
}

.mt-modal textarea {
    width: 100% !important;
    height: 180px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    outline: none;
}

.meeting-time-date-picker {
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    font-size: 14px !important;
    height: calc(1.3rem + 1rem + 1px) !important;
}

.mt-modal .modal-header {
    border-bottom: none;
    padding: 22px;
    padding-bottom: 12px;
    align-items: center;
}

.mt-modal .btn-close {
    font-size: 22px;
    color: var(--secondary)
}

.mt-modal .mt-modal-header>div {
    line-height: 29.52px;
    color: #111827
}

.mt-modal .modal-body {
    padding: 22px;
    padding-top: 0;
    padding-bottom: 0;
}

.mt-modal .modal-body .paragraph,
.mt-modal .modal-body .paragraph p {
    font-family: 'Mulish';
    font-weight: 400;
    font-size: 14px;
    color: #6B7280;
    line-height: 17.57px;
}

.mt-modal .modal-body .item {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.mt-modal .modal-body .item p {
    margin-bottom: 3px;
}

.mt-modal .modal-footer {
    padding-left: 22px;
    padding-right: 22px;
    text-align: right;
    border-top: none;
}

.mt-modal .css-1h46eh9-control {
    border-color: #7e5bcc !important;
    box-shadow: 0 0 0 0.1px #7e5bcc !important;
}

.number-hover:hover {
    color: var(--primary) !important;
    text-decoration-color: var(--primary) !important;
    text-decoration: underline;
}

.number {
    color: var(--primary) !important;
    text-decoration-color: var(--primary) !important;
    text-decoration: underline;
}

.sub-text {
    font-size: 16px;
    margin-top: 24px;
}

.mt-6 {
    margin-top: 24px !important;
}

.name-text {
    font-size: 32px;
    margin-top: 24px
}

.w-50-media {
    width: 50%;
}

@media (max-width: 1378px) {
    .meeting-time-card {
        display: flex;
        flex: 1 0 90%;
    }
}

.card-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.card-button {
    width: auto;
}

@media (max-width: 1600px) {
    .card-buttons {
        flex-direction: column;
    }

    .card-button {
        width: 100%;
    }
}

@media (max-width: 1500px) {
    .card-buttons {
        flex-direction: column;
    }

    .card-button {
        width: 100%;
    }
}

@media (max-width: 1400px) {
    .card-buttons {
        flex-direction: column;
    }

    .card-button {
        width: 100%;
    }
}

@media (max-width: 1300px) {
    .card-buttons {
        flex-direction: column;
    }

    .card-button {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .card-buttons {
        flex-direction: column;
    }

    .card-button {
        width: 100%;
    }

    .sub-text {
        font-size: 15px;
    }

    .mt-6 {
        margin-top: 22px !important;
    }

    .name-text {
        font-size: 24px;
        margin-top: 22px
    }

    .w-50-media {
        width: 60%;
    }

    .meeting-time-notfound-img svg {
        width: 17.43rem;
        height: 20.18rem;
        transform: scale(1);
    }

    .meeting-time-warning {
        font-weight: 500;
        font-size: 1.5rem;
        line-height: 1.8rem;
    }
}

@media (max-width: 1100px) {
    .sub-text {
        font-size: 14px;
    }

    .mt-6 {
        margin-top: 20px !important;
    }

    .name-text {
        font-size: 20px;
        margin-top: 20px
    }

    .w-50-media {
        width: 65%;
    }
}

@media (max-width: 1000px) {
    .sub-text {
        font-size: 14px;
    }

    .mt-6 {
        margin-top: 18px !important;
    }

    .name-text {
        font-size: 18px;
        margin-top: 18px
    }

    .w-50-media {
        width: 70%;
    }
}

@media (max-width: 900px) {
    .sub-text {
        font-size: 13px;
    }

    .mt-6 {
        margin-top: 16px !important;
    }

    .name-text {
        font-size: 16px;
        margin-top: 16px
    }

    .w-50-media {
        width: 80%;
    }
}

@media (max-width: 800px) {
    .sub-text {
        font-size: 13px;
    }

    .mt-6 {
        margin-top: 14px !important;
    }

    .name-text {
        font-size: 15px;
        margin-top: 14px
    }

    .w-50-media {
        width: 90%;
    }
}

@media (max-width: 700px) {
    .sub-text {
        font-size: 12px;
    }

    .mt-6 {
        margin-top: 12px !important;
    }

    .name-text {
        font-size: 14px;
        margin-top: 12px
    }

    .w-50-media {
        width: 90%;
    }
}

@media (max-width: 600px) {
    .sub-text {
        font-size: 12px;
    }

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

    .name-text {
        font-size: 14px;
        margin-top: 10px
    }

    .w-50-media {
        width: 95%;
    }
}

.notification-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
}

.border-success-300 {
    border: 1px solid #7ADC9E;
    background-color: white;
}

.border-warning-400 {
    border: 1px solid #F8B94F;
    background-color: white;
}

.border-danger-200 {
    border: 1px solid #FFDBDB;
    background-color: white;
}

.timetable-today {
    background-color: #CBD4FA;
    padding: 12px;
    /* position: relative; */
    /* top: 11px; */
}

.timetable-today .card {
    /* position: relative;
    top: 12px; */
}

.circle-border-success {
    border: 1px solid var(--success);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--success);
}

.circle-border-secondary {
    border: 1px solid var(--secondary);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
}

/* .mui-native-select-style select {
    color: #000;
}

.mui-native-select-style svg {
    fill: #6B7280
}

.mui-native-select-style .MuiInputBase-root::before {
    border-bottom: none;
}

.mui-native-select-style .css-1eed5fa-MuiInputBase-root-MuiInput-root:hover:not(.Mui-disabled, .Mui-error):before {
    border-bottom: none;
}

.mui-native-select-style .css-1eed5fa-MuiInputBase-root-MuiInput-root::after {
    border-bottom: none;
} */

.mui-select-style .MuiSelect-root {
    border: none !important;
    padding: 0px !important;
}
.mui-select-style .MuiOutlinedInput-input {
    padding: 0.65rem 1rem !important; 
  }
.mui-select-style .MuiOutlinedInput-notchedOutline {
    border: none !important;
}
.mui-select-style .Mui-focused .MuiOutlinedInput-notchedOutline {
    border: none !important;
}

.attendance-type-style {
    padding: 5px 10px;
    border-radius: 8px;
}

.box-shadow {
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1) !important;
}

.sticky-bottom-right {
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 999;
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}
.CircularProgressbar .CircularProgressbar-text {
    transform: translate(0%, 0%);
    dominant-baseline: middle;
    text-anchor: middle;
}

.focus-disable:focus {
    outline: none;
}

.datepicker-icon-style input{
    width: 120px;
}

.datepicker-icon-style .react-datepicker__view-calendar-icon svg {
    fill: #6B7280;
    right: 0;
}

.css-jcincl:hover:not(.Mui-disabled, .Mui-error)::before{
    border-bottom: unset;
}

.payment-input::placeholder{
    color: #0B0F19;
}

.card-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: none;
}

@media only screen and (min-width: 1440px) {
    .card-grid {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.student-question-media-query .view-link button{
    padding: 0;
}
.login-imgs {
    width: 100%;
    height: 100%;
}
.placeholder-wave {
    position: relative;
    overflow: hidden;
    background-color: #e3e3e3; /* Light background for placeholder */
  }
  
  .placeholder-wave::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.4) 50%, /* Brighter highlight */
      rgba(255, 255, 255, 0) 100%
    );
    animation: wave-animation 1.6s infinite linear;
  }
  
  @keyframes wave-animation {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

.hover-underline:hover {
    text-decoration: underline !important;
}