@font-face {
    font-family: "coolvetica-rg";
    src: url("../fonts/coolvetica/coolvetica-rg.ttf") format("truetype");
}

html,
body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;

}

body {
    padding: 0 20px 20px 20px;
    -webkit-font-smoothing: subpixel-antialiased;
}

.table tbody td .Failed {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 4px;
    display: block;
    width: 95px !important;
    margin: auto;
    text-align: center;
}


.table tbody td .Passed {
    color: #116149;
    background-color: #e4f4e4;
    border: 1px solid #c3e7ca;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 4px;
    display: block;
    width: 95px !important;
    margin: auto;
    text-align: center;
}

.table tbody td .Pending {
    color: #17a2b8;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 4px;
    display: block;
    width: 80%;
    margin: auto;
    text-align: center;
}


input.form-control,
textarea {
    /*border-radius: 8px !important;*/
    border-color: #e8e8e8;
}

input:focus,
button:focus,
textarea:focus,
a:focus {
    outline: none !important;
    box-shadow: none !important;
}

textarea {
    resize: none;
}

button i {
    font-size: 12px;
    margin-right: 4px;
}

/* TOR */

.logo-form{
    width: 100px;
    height: 100px;
    /* filter: drop-shadow(0px 0px 1.5px #666666); */
    border-radius:  50%;
}

input.form-control::placeholder {
    opacity: .6;
}

.tor-table table {
    max-width: 80vh;
}

.tor-table table .input-cell {
    width: auto;
    /* min-width: 50px;
    max-width: 200px; */
}

.tor-table input {
    width: 90%;
    border: none;
    background-color: inherit
}

.hidden-border {
    border: .2rem dashed;
    border-radius: .6rem;
    border-color: #e4d39f;
    background-color: #fff3cd;
    color: #664d03;
    align-items: center;
}

.hidden-dept {
    display: none;
}

.on-hover-button:hover .hidden-border,
.on-hover-button:hover i.hide {
    visibility: hidden;
}

.show-hidden {
    height: 2rem;
    line-height: 0;
    visibility: hidden;
}

.show-hidden i {
    display: none;
}

.on-hover-button:hover .show-hidden {
    height: 2rem;
    display: block;
    visibility: visible;
}

.on-hover-button:hover .show-hidden i {
    display: inline-block;
}

/* .tor-textbox {
    border-color: rgb(207, 207, 207);
    border: solid;
    border-width: 1px;
} */

/* END TOR */

/*HELPER CLASSES*/
.mr-s-0 {
    margin-right: 0 !important;
}


/** CSS OVERRIDE **/
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999 !important;
}

/** SELECT2 WIDTH OVERRIDE **/
.full-width-select2+.select2 {
    width: 100% !important;
}

/********** PRELOADER CSS **********/
.preloader {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1031;
    background-color: #33333363;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.preloader div,
.preloader div:hover {
    width: 15%;
    height: 18%;
    margin: auto;
    background: #fff;
    border: none;
    text-align: center;
    border-radius: 10px;
    padding: 2rem;
}

.preloader div .spinner-border-sm {
    width: 3rem;
    height: 3rem;
    border-width: 0.4em;
    color: #FF7F50;
}

.preloader div p {

    font-weight: 600;
    font-size: 15px;
    margin-top: 1.4rem;
}

/********TABLE SCROLL******/
/* div.scrolltable {
    width: 920px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-2forms {
    width: 910px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-2forms a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-2forms a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-3forms {
    width: 965px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-3forms a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-3forms a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-4forms {
    width: 965px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-4forms a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-4forms a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-6forms {
    width: 965px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-6forms a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-6forms a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-7forms {
    width: 930px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-7forms a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-7forms a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-1shs {
    width: 930px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-1shs a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-1shs a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-2shs {
    width: 930px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-2shs a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-2shs a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-3shs {
    width: 930px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-3shs a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-3shs a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-4shs {
    width: 970px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-4shs a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-4shs a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-6shs {
    width: 970px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-6shs a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-6shs a:hover {
    background-color: #c2bd24 !important;
}

div.scrolltable-7shs {
    width: 970px;
    ;
    overflow-x: auto !important;
    white-space: nowrap;

}

div.scrolltable-7shs a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrolltable-7shs a:hover {
    background-color: #c2bd24 !important;
} */

/********** NAV CSS **********/
nav.fixed-top {
    padding: 10px;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 98%;
    margin: auto;
    background-color: #fff;
}

nav .menu-toggle {
    background-color: #efefef;
    margin-left: 6px;
    border-radius: 10px;
    font-size: 24px;
}

/*nav .menu-toggle:hover {
    color: #fff;
    background-color: #FF7F50;
}*/

nav .notif-btn,
nav .write-post-btn {
    background-color: #efefef;
    margin-right: 8px;
    border-radius: 10px;
    font-size: 24px;
    position: relative;
}

.write-post-btn i {
    font-size: 28px;
    vertical-align: text-bottom;
    margin-right: -6px;
}

nav .notif-btn .notif-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #dc3545;
    font-size: 14px;
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
}

nav.fixed-top img {
    margin-right: 4px;
    border-radius: 50%;
}

nav .admin-btn {
    background-color: #efefef;
    margin-right: 8px;
    border-radius: 10px;
    height: 3.125rem;
    padding: 0.375rem 1.75rem;
}

nav.fixed-top .dropdown .dropdown-menu {
    left: inherit;
    right: 8px;
    top: 75px;
    background-color: #fff;
    /* border: none; */
    border-radius: 4px;
    width: 16.25rem;
    padding: 10px;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    /* box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%); */
}

nav.fixed-top .dropdown .dropdown-menu a {
    padding: 0.5rem 1.5rem;
    color: #383d41;
    background-color: #efefef;
    margin-bottom: 8px;
    border-radius: 4px;
}

nav.fixed-top .dropdown .dropdown-menu a.logout {
    background-color: #dc3545 !important;
    color: #fff !important;
}

nav.fixed-top .dropdown .dropdown-menu a:hover {
    background-color: #FF7F50;
    color: #fff;
    border-radius: 4px;
}

nav.fixed-top .dropdown .dropdown-menu a i {
    margin-right: 10px;
}

/********** MODAL CSS **********/
.modal .modal-header {
    border: none;
    background-color: #FF7F50;
    border-top-left-radius: 10px;
    padding: 15px;
}

.modal .modal-header h5 {
    margin: 0;
    color: #fff;
    font-family: "Segoe UI", sans-serif !important;
    font-size: 16px;
}

.modal .modal-header .close {
    position: absolute;
    right: 0px;
    top: 10px;
    color: #fff;
    opacity: 1 !important;
    padding: 0;
}

.modal .modal-header .close span {
    text-shadow: none;
    background-color: #efefef;
    border: 2px solid #6c757d;
    padding: 2px 10px;
    color: #6c757d;
    border-radius: 50%;
}

.modal .modal-content {
    border: none !important;
    border-radius: 14px;
}


.modal-body {
    font-family: inherit;
}

.modal-body label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.modal-body input,
textarea.form-control {
    margin-bottom: 10px;
    border: 1px solid #e8e8e8;
    font-size: 14px;
    font-weight: 500;
}

.modal-body .upload-photo-wrapper {
    background-color: #efefef;
    padding: 10px 20px;
    border-radius: 15px;
}

.modal-body .upload-photo-wrapper img {
    position: relative;
    border-radius: 83px;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    object-fit: cover;
}

.modal-footer i {
    margin-right: 8px;
}

.modal-footer .update-account {
    background-color: #FF7F50;
    width: 100%;
    font-family: "Segoe UI", sans-serif !important;
    color: #fff;
    width: auto;
    font-size: 14px;
}

.modal-footer .cancel-btn {
    background-color: #efefef;
    border: 1px solid #ced4da;
    color: #6c757d;
    font-family: "Segoe UI", sans-serif !important;
    font-size: 14px;
}

.modal-body .select2-container {
    width: 100% !important;
}

.modal-body .select2-container {
    margin-bottom: 10px;
    margin-left: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

.modal-body .input-group {
    margin-bottom: 10px;
}

.modal-body .input-group button.delete {
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: 999;
    background: #fff;
    color: #dc3545;
    padding: 0 10px;
    height: 40px;
    /* border-radius: 8px;*/
    font-size: 22px;
}

.modal-body button.delete i {
    margin-right: 0;
}

.modal .accordion .header {
    background-color: #e9ecef;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: solid 1px #e8e8e8;
}

.modal .accordion .header button {
    text-align: left;
    padding-left: 18px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #344767;
    height: 42px;
}

.modal .accordion .card-body {
    border: solid 1px #e8e8e8;
    /* border-radius: 8px;*/
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 1rem;
}

.modal .accordion .card-body input.form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0;
}

.modal .accordion .card-body .input-group span {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-left: 0;
    background-color: transparent;
    border: solid 1px #e8e8e8;
    padding-right: 0;
}

.modal .accordion .card-body .input-group span i {
    margin-right: 14px;
    font-size: 20px;
}

.modal .accordion .card-body .input-group span i.fa-trash {
    color: #dc3545 !important;
}

/*#write-post-modal .modal-body button {*/
/*    background-color: #efefef;*/
/*    font-weight: 500;*/
/*    width: 32.6%;*/
/*    font-size: 14px;*/
/*}*/

/*#write-post-modal .modal-body button:focus {*/
/*    background-color: #FF7F50;*/
/*    color: #fff;*/
/*}*/

#write-post-modal .modal-body p {
    margin-bottom: 0;
    margin-top: 10px;
}

.nice-select ul.list {
    max-height: 340px;
    overflow: auto;
}

.selection textarea {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    ;
}

#manage-payment-term-modal .modal-body .select2-container {
    width: auto !important;
    margin-left: 8px !important;
}


#manage-section .modal-body .subject-teacher-field .select2-container {
    width: 100% !important;
}

#manage-section .modal-body .subject-teacher-field button {
    margin-left: 10px;
    vertical-align: initial;
}

#manage-section .modal-body .add-btn {
    color: #1d9e74;
    font-size: 24px;
    padding: 0;
}

/* #manage-section .modal-body .subTeachDrpDwn {
    display: none;
} */

/********** SIDEBAR CSS **********/
#sidebarMin {
    width: 4%;
    padding: 8px 0 8px 8px;
    display: none;
}

#sidebarMin img {
    width: 60px;
    /* max-width: 50px; */
    /* height: 50px; */
    /* margin-left: 5px; */
    margin-right: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#sidebarMin .accordion-toggle:after {
    content: none !important;
}

#sidebarMin .menu-buttons {
    max-height: 525px;
}

.sidebar .menu-buttons {
    /* max-height: 600px; */
    max-height: auto !important;
    overflow-y: auto;
    padding-right: 5px;
}

.sidebar .menu-buttons::-webkit-scrollbar {
    width: 5px;
}

.sidebar .menu-buttons::-webkit-scrollbar-thumb {
    background-color: darkgrey (0, 0, 0, .8);
    border-radius: 10px;
}

.sidebar .menu-buttons::-webkit-scrollbar-track {
    background-color: #efefef;
    border-radius: 10px;
}

.sidebar .menu-buttons::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    margin-left: 10px;
}

#sidebarMin .menu-buttons a {
    text-align: center;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 10px 2px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebarMin .menu-buttons a .icon-text {
    font-size: 10px !important;
    font-family: "Segoe UI", sans-serif !important;
}

#sidebarMin .menu-buttons i {
    margin-right: 0;
    font-size: 24px;
}

#sidebarMax .poweredBy {
    opacity: .6;
    text-align: center;
    font-size: 10px;
    color: #6c757d;
    position: absolute;
    bottom: 0;
    left: 4%;
    font-weight: 300;
    pointer-events: none;
    background-color: white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.sidebar {
    padding: 20px 0px 20px 8px;
    background-color: #fff;
    margin-top: 5%;
    position: fixed;
    height: 87vh;
    overflow-y: visible;
    border-radius: 15px;
    /* box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); */
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
    transition: 0.5s !important;
    margin-top: 6%;
    height: 85vh;
    margin-left: 14px;
    width: 15%;
}

.sidebar .sidebar-logo {
    max-width: 180px;
    max-height: 90px;
    object-fit: contain;
    cursor: pointer;
}

.sidebar .menu-buttons {
    margin-top: 12px;
    max-height: 75%;
}

.sidebar .menu-buttons a {
    width: 100%;
    display: block;
    padding: 10px 18px;
    text-decoration: none;
    color: #333;
    margin-bottom: 4px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 300;
}

.sidebar .menu-buttons a i {
    margin-right: 10px;
}

.sidebar .menu-buttons a:hover {
    background-color: #efefef;
}

.sidebar .menu-buttons a.active,
svg.active,
.sidebar .menu-buttons a:focus,
svg.focus {
    background-color: #FF7F50;
    color: #fff;
}


.sidebar .menu-buttons .collapse {
    background-color: #efefef;
    width: 100%;
    border-radius: 10px;
}

.sidebar .menu-buttons .collapse a {
    font-size: 12px;
    margin-bottom: 4px;
    padding-left: 45px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .menu-buttons .collapse a:hover {
    background-color: #FF7F50;
    color: #fff;
}

.accordion-toggle:after {
    font-family: "FontAwesome";
    content: "\f106";
    float: right;
    font-size: 10px;
    margin-top: 2px;
}

.accordion-toggle.collapsed:after {
    content: "\f107";
    font-size: 10px;
    margin-top: 2px;
}

/********** MAIN CONTENT CSS **********/
#main {
    margin-top: 6%;
    display: inline-block;
    width: 83.5%;
    margin-left: 16.5%;
    border-radius: 30px;
    padding: 20px 15px;
    padding-bottom: 0;
}

.max-main {
    width: 95% !important;
    margin-left: 5% !important;
}

.min-main {
    width: 83.5% !important;
    margin-left: 16.5% !important;
}

#main .dashboard .card {
    background-color: #FF7F50;
    border: none;
    border-radius: 0.938rem;
    width: 24%;
    height: 7.50rem !important;
    padding: 0.938rem;
    display: inline-block;
    margin-right: 0.375rem;
    /*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);*/
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
    vertical-align: top;
}

#main .dashboard .card h1 {
    color: #fff;
    font-size: 3.5rem;
}

#main .dashboard .card p {
    margin-bottom: 0px;
    color: #fff;
}

#main .dashboard .f-card {
    width: 99%;
    background-color: #fff;
    margin-top: 15px;
    border-radius: 15px;
    /*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);*/
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
}

#main .dashboard .f-card .f-card-header {
    padding: 15px;
    border-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #FF7F50;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
}

#main .dashboard .f-card .f-card-header p,
#main .dashboard .calendar-wrapper h1,
#main .dashboard .reminder-wrapper h1 {
    color: #fff;
    /*text-transform: uppercase;*/
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

#main .dashboard .calendar-wrapper h1,
#main .dashboard .reminder-wrapper h1 {
    color: #FF7F50;
}

#main .dashboard .f-card .f-card-body {
    padding: 15px;
    text-align: center;
}

#main .dashboard .calendar-wrapper,
#main .dashboard .reminder-wrapper,
.waiting-room .waiting-room-wrapper {
    padding: 15px;
    background-color: #fff;
    border-radius: 15px;
    /*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);*/
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
}

#main .dashboard .reminder-wrapper {
    margin-top: 25px;

}

.disabled-classfeed {
    padding: 20px;
    background-color: #f44336;
    color: white;
}

#main .dashboard .reminder-wrapper .reminder-item {
    background-color: #efefef;
    margin-top: 10px;
    padding: 0.5rem 1rem;
    border-radius: 15px;

}



#main .dashboard .reminder-wrapper .reminder-item h1 {
    text-transform: none;
    letter-spacing: initial;
    color: #343a40;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
}

#main .dashboard .reminder-wrapper .reminder-item p {
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 0;
    color: #333;
}

#main .dashboard .reminder-wrapper .reminder-item p i {
    margin-right: 8px;
}

#main .dashboard .reminder-wrapper .reminder-item .studentName {
    margin-top: 15px;
}

#main .reminder-item .col-4 {
    padding-top: 15px;
}

.reminder-item .resched,
.reminder-item .start-now {
    background-color: #FF7F50;
    color: #fff;
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
}

.reminder-item .resched:hover {
    background-color: #FF6E5F;
}



.reminder-item .start-now {
    background-color: #FF7F50;
}

/********** CLASSES PAGE **********/
.classes,
.admissions,
.enrollments,
.school-pg,
.users {
    font-family: "Segoe UI", sans-serif !important;
    padding-bottom: 15px;
    overflow: hidden;
}

.classes label,
.classes p,
.admissions label,
.admissions p,
.enrollments p,
.enrollments label,
.school-pg p,
.school-pg label,
.users label,
.users p {
    /*color: #344767;*/
    color: #888;
    font-weight: 500;
    font-size: 12px;
}

.classes input,
.school-pg input,
.enrollments input,
.admissions input {
    color: #344767;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
}

.classes input.for-print {
    color: #444 !important;
}

.classes h4.header-text,
.admissions h4.header-text,
.enrollments h4.header-text,
.school-pg h4.header-text {
    color: #6b778c;
    font-size: 14px;
    font-weight: 400;
}

.classes h4 a,
.admissions h4 a,
.enrollments h4 a,
.school-pg h4 a,
.classes h4 span.breadcrumb-faded,
.admissions h4 span.breadcrumb-faded,
.enrollments h4 span.breadcrumb-faded,
.school-pg h4 span.breadcrumb-faded {
    color: #dddfe7;
    text-decoration: none;
}

.classes h4 a:hover,
.admissions h4 a:hover,
.enrollments h4 a:hover,
.school-pg h4 a:hover {
    color: #6b778c;
}

.classes .class-nav,
.admissions .class-nav,
.school-pg .class-nav {
    border-bottom: 1px solid #e8e8e8;
    padding: 25px 0;
}

.classes .class-nav select,
.modal select {
    width: 16%;
    display: inline-block;
    vertical-align: middle;
    transition: 2.5s;
    color: #344767;
    font-weight: 500;
    float: initial;
    /*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);*/
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
    /* border-radius: 8px;*/
}

.classes .class-nav select ul {
    width: 100%;
    /*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);*/
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
}


.classes .class-nav button,
.class-inner-wrapper .col-md-12 button,
.admissions .class-nav button,
.inner-wrapper table .manage-btn,
.enrollments .addmanual-payments,
.addrequirements-settings,
.enrollments .add-other-fees-btn,
.school-pg .class-nav button,
.users table .manage-btn,
#for-proof-of-payment .manage-btn {
    background-color: #FF7F50;
    color: #fff;
    height: auto;
    margin-left: 0px !important;
    /* border-radius: 8px;*/
    width: 17%;
    /*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);*/
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
    font-size: 13px;
}




.interest-text {
    /* background-color: #FF7F50; */
    /* color: #fff; */
    height: auto;
    margin-left: 0px !important;
    /* border-radius: 8px; */
    width: 17%;
    /* box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); */
    /* box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%); */
    font-size: 13px;
    width: 54%;
    /* left: -9px; */
    position: relative;
    left: 19px;

    /* width: 100%; */
    font-size: 14px;
}


.class-inner-wrapper,
.inner-wrapper {
    padding: 15px;
    background-color: #fff;
    /*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);*/
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
    margin-top: 30px;
    border-radius: 10px;
    overflow-x: scroll;
}

.inner-wrapper button {
    box-shadow: none !important;
}

.class-inner-wrapper .col-md-12 button,
.inner-wrapper .col-md-12 button,
.admissions .inner-wrapper .addrequirements-settings,
.enrollments .add-other-fees-btn {
    width: auto;
    margin-left: 0;
    font-size: 13px;
    margin-bottom: 0px;
}

.class-inner-wrapper table,
.inner-wrapper table {
    margin-top: 3px;

}

.class-inner-wrapper-table-1 {
    width: 190px !important;
}

.class-inner-wrapper table .manage-btn,
.inner-wrapper table .manage-btn,
.users table .manage-btn {
    width: 100%;
    font-size: 13px;
}

.inner-wrapper table .manage-btn,
.users table .manage-btn {
    width: 70%;
}

.inner-wrapper table .archive-btn {
    font-size: 28px;
    padding: 0;
}

.class-inner-wrapper table td,
.class-inner-wrapper table th,
.inner-wrapper table td,
.inner-wrapper table th {
    text-align: center;
    vertical-align: middle;
    color: #344767;
    font-size: 14px;
}

.table tbody .syllabus-btn,
.table tbody .change-gradingsys-btn {
    font-size: 14px;
}

.table tbody td .green {
    color: #116149;
    background-color: #e4f4e4;
    border: 1px solid #c3e7ca;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 4px;
    display: block;
    width: 80%;
    margin: auto;
    text-align: center;
}

.table tbody td .red {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 4px;
    display: block;
    width: 80%;
    margin: auto;
    text-align: center;
}

.table tbody td .pending {
    color: #17a2b8;
    font-weight: 500;
}

.table tbody .complete-btn,
.table tbody .reject-btn {
    background-color: #28a745;
    color: #fff;
}

.table tbody .reject-btn {
    background-color: #dc3545;
    width: 25%;
}

.note {
    font-size: 11px;
    color: #495057;
}

.table button.delete {
    /*background-color: #dc3545 !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 0 12px;
    font-size: 20px;*/

    color: #dc3545 !important;
    box-shadow: none !important;
    padding: 0;
    font-size: 28px;
    vertical-align: middle;
    margin-left: 5px;
    background-color: transparent;
}

.table tbody td button {
    box-shadow: none !important;
    height: 42px;
    /* border-radius: 8px;*/
}

.admissions #manage-applicant li,
.enrollments #manage-enrollee li,
#enrollment-settings li,
#whole-year-fees-btns li,
.school-pg #school-page-settings li,
#add-student-navtabs li {
    /*width: 16.1%;*/
    margin-right: 10px;
}

.admissions #manage-applicant li a,
.enrollments #manage-enrollee li a,
#enrollment-settings li a,
#whole-year-fees-btns li a,
.school-pg #school-page-settings li a,
#add-student-navtabs li a {
    border-radius: 4px;
    background-color: #fff;
    color: #212529;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    /*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);*/
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
    padding: 0.75rem 1rem;
    margin-bottom: 4px;
}

#whole-year-fees-btns li a,
.add-fee,
.manage-fee,
#add-student-navtabs li a {
    border-radius: 4px;
    box-shadow: none !important;
    background-color: #efefef;
    border: 1px solid #ced4da;
    color: #6c757d;
    font-size: 13px;
}

.admissions #manage-applicant li a.active,
.enrollments #manage-enrollee li a.active,
#enrollment-settings li a.active,
#whole-year-fees-btns li a.active,
.school-pg #school-page-settings li a.active,
#add-student-navtabs li a.active {
    background-color: #FF7F50;
    border-color: #FF7F50;
    color: #fff;
}

.admissions .tab-pane label,
.enrollments .tab-pane label,
.school-pg label {
    padding-top: 8px;
    color: #888;
    font-size: 12px;
}

.admissions .tab-pane input,
.enrollments .tab-pane input {
    text-align: center;
}

.admissions .tab-pane h5,
.enrollments .tab-pane h5,
.users .tab-pane h5,
.users .container h5 {
    background-color: #e9ecef;
    padding: 0.75rem 0.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1.4px;
    padding: 1rem;
}

.admissions .proof-of-payment-field {
    display: inline;
    width: 100%;
    vertical-align: top;
}

.admissions .tab-pane .download-btn,
.enrollments .tab-pane .download-btn {
    margin-left: 10px;
    font-weight: 500;
    font-size: 12px;
    background-color: #FF7F50;
    color: #fff !important;
    height: 42px;
    /* border-radius: 8px;*/
}

.admissions .tab-pane textarea,
.enrollments .tab-pane textarea {
    height: 270px !important;
}

.admissions .tab-pane .join-exam-btn {
    background-color: #FF7F50;
    color: #fff;
    display: block;
    width: 100%;
    height: 42px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
}

.admissions .tab-pane .submit-btn,
.admissions .save-settings-btn,
.school-pg .schoolpg-save-btn,
.users .tab-pane .submit-btn {
    background-color: #FF7F50;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    width: auto;
}

.admissions .save-settings-btn {
    font-size: 16px !important;
    width: 8% !important;
    margin-right: 0 !important;
    margin-top: 30px;
}

.enrollments .tab-pane .enrollee-details {
    background-color: #e9ecef;
    padding: 0.7rem;
    border-radius: 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    max-width: 100%;
    gap: var(--gap-md);
}

.enrollments .tab-pane .total-due {
    font-weight: 700;
    font-size: 16px;
}

.enrollments #accordion .toggle {
    width: 100%;
    background-color: #FF7F50;
    color: #fff;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.7rem;
    letter-spacing: 0.3px;
    position: relative;
}

.enrollments #maxOtherFees,
.enrollments #maxPaymentTerms,
.enrollments #totalBalanceDue {
    margin-top: 4px;
    border-radius: 4px;
    /*background-color: #e9ecef;*/
    padding: 2px;
    font-weight: 500;
}

.enrollments .tab-pane #accordion .toggle:after {
    font-family: "FontAwesome";
    content: "\f106";
    font-size: 30px;
    position: absolute;
    right: 20px;
    top: 0;
}

.enrollments .tab-pane #accordion .toggle.collapsed:after {
    content: "\f107";
}

.enrollments .sub-total,
.enrollments .due-now {
    background-color: #e9ecef;
    padding: 0.7rem 8rem;
    border-radius: 4px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: right;
    margin-top: 10px;
}

.enrollments .due-now {
    background-color: #FF7F50;
    color: #fff;
}

/* Date styles */

#main .dashboard .reminder-wrapper .reminder-item .date-p {
    margin: 0;
    margin-bottom: 4px !important;
    position: relative;
    color: #898A8D !important;
}

.del-button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    color: #666564;
    position: absolute !important;
    top: -3px;
    right: 4px;
    font: 12px/100% arial, sans-serif !important;
    font-weight: 150 !important;
    text-decoration: none !important;
}

.del-button:hover {
    color: #919190;
}

.sub-total .text-right,
.due-now .text-right {
    font-size: 16px;
    font-weight: 700;
}

.print-btn,
.addOtherFee {
    background-color: #efefef;
    border: 1px solid #ced4da;
    color: #6c757d;
    margin-right: 8px;
    font-weight: 500;
}

.submit-invoice {
    background-color: #FF7F50 !important;
    color: #fff !important;
    margin-right: 0 !important;
}

.delete-btn {
    color: #dc3545 !important;
    padding: 8px 0;
}

.delete-btn i {
    font-size: 24px;
}

.school-pg span.note,
span.note {
    font-size: 12px;
    font-weight: 400;
    display: block;
    margin-top: 4px;
    margin-bottom: 16px;
    text-align: right;
}

.school-pg .upload-school-logo,
.school-pg .upload-school-bg,
.school-pg .upload-banner-imgs {
    font-size: 12px;
    border: 1px solid #e8e8e8 !important;
}

.school-pg img {
    display: block;
    width: 20rem;
    height: 20rem;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.school-pg .upload-school-bg,
.school-pg .upload-banner-imgs {
    display: inline-block;
    width: 73%;
    vertical-align: top;
    margin-right: 3px;
}

.school-pg #school-page-settings {
    position: relative;
}

.school-pg #school-page-settings li .preview-school-page {
    position: absolute;
    right: 0;
    background-color: #FF7F50;
    border-color: #FF7F50;
    color: #fff;
}

.school-pg .banner-img-wrapper {
    display: inline-block;
    margin-bottom: 15px;
    margin-left: 8px;
    width: 32%;
    vertical-align: top;
    position: relative;
}

.school-pg .banner-img-wrapper .delete-photo {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff3333;
    color: #fff;
    font-size: 20px;
    text-align: center;
    margin: 0;
    border-radius: 10px;
    box-shadow: 0 2px 4px 4px rgb(0 0 0 / 12%) !important;
}

.school-pg .banner-images-settings {
    width: 100%;
    height: 240px;
}

.school-pg .upload-banner-imgs {
    display: inline-block;
    width: 75%;
    /* margin-top: 8px; */
    margin-left: 0;
}

.school-pg #school-theme-tab .select2-container {
    width: 100% !important;
}

.school-pg .add-email-field,
.school-pg .add-contact-field,
.add-row-btn {
    background-color: #efefef;
    border: 1px solid #ced4da;
    text-align: center;
    width: 100%;
    font-size: 14px;
    margin-bottom: 8px;
    height: 42px;
}

.school-pg .email-field-wrapper input,
.school-pg .contact-field-wrapper input {
    width: 90%;
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 8px;
    font-weight: 300;
    font-size: 14px;
}

.school-pg .email-field-wrapper .remove-field i,
.school-pg .contact-field-wrapper .remove-contact i {
    margin: 0;
    font-size: 30px;
    color: #dc3545;
}

.users .users-nav button {
    width: 10%;
    font-weight: 500;
    font-size: 14px;
}

.users .users-nav button {
    color: #212529 !important;
    background-color: #fff !important;
    height: 42px;
    margin-left: 8px;
    font-size: 13px;
}

.users .users-nav button.active {
    background-color: #FF7F50;
    color: #fff;
    height: 42px;
    margin-left: 8px;
    font-size: 13px;
}

.users .table tbody .archive-btn,
.archive-btn {
    font-size: 22px !important;
    background-color: transparent !important;
    color: #6b778c !important;
    padding: 0 !important;
}

.academic-terms .table tbody .archive-btn {
    font-size: 22px;
    background-color: transparent;
    color: #6b778c !important;
    padding: 0;
}

.users .table tbody .restore-btn {
    font-size: 22px;
    background-color: transparent;
    color: #6b778c !important;
    padding: 0;
}

.users .change-pfp-btn {
    background-color: #6b778c !important;
    font-size: 14px;
}

.users .pfp-wrapper {
    width: 13%;
    height: 140px;
    display: inline-block;
    vertical-align: bottom;
    border: 2px dashed #e8e8e8 !important;
    border-radius: 8px;
    margin-right: 8px;
    text-align: center;
}

.edt-btn {
    font-size: 20px !important;
    opacity: 0.8;

}

.center-text-edit {
    text-align: center;
    border: 1px solid green;
    width: 50%
}


.users .pfp-wrapper img {
    width: 100%;
    height: 100%;
}

#updateAdmissionSettingBtn {
    width: auto !important;
}

.user-greeting {
    font-size: 40px;
    font-weight: 700;
}


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

/* .adjust {
    width: 150%;
} */

#school-theme-tab .settings-wrpr-1 {
    background-color: #F5F5F5;
    padding: 20px 15px;
    border-radius: 10px;
    margin-bottom: 40px;
}

#school-theme-tab .settings-wrpr-top {
    background-color: #F5F5F5;
    padding: 20px 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* border-radius: 10px; */
    /* margin-bottom: 40px; */
}

#school-theme-tab .settings-wrpr-center {
    background-color: #F5F5F5;
    padding: 20px 15px;

    /* border-radius: 10px; */
    /* margin-bottom: 40px; */
}

#school-theme-tab .settings-wrpr-bottom {
    background-color: #F5F5F5;
    padding: 20px 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 40px;
}

#school-theme-tab .settings-wrpr-2 {
    background-color: #F5F5F5;
    padding: 20px 15px;
    border-radius: 10px;
    /* margin-bottom: 20px; */
}

#school-theme-tab .settings-wrpr h4 {
    font-weight: 600;
    margin-bottom: 15px;
}

.label-resize {
    padding-top: 8px !important;
    color: #888 !important;
    font-size: 15px !important;
    font-weight: 700;
}

.small-table-size {
    width: 150px !important;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* School Forms CSS start*/



.signature-line {
    border-top: 1px solid black !important;
    /* width: 70%;
             margin-left: 15px; */
}

.wide-cell {
    width: 200px;
}


.scrollable-table {
    overflow-x: auto;
    /* show horizontal scrollbars */
    overflow-y: visible;
    /* show vertical scrollbars */


}

.scrollable-table::-webkit-scrollbar {
    width: 12px;
    /* width of the scrollbar */
    background-color: #F5F5F5;
    /* color of the scrollbar */

}

.scrollable-table::-webkit-scrollbar-thumb {
    background-color: #FF7F50;
    /* color of the scrollbar thumb */
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    height: 30px;
    width: 30px;
}

/* School Forms CSS end */





/* #school-theme-tab div .settings-wrpr h5 {
    font-weight: 600;
    margin-bottom: 15px;
    margin-left: 20px !important;
} */
/* (min-width: 421px) and */

.modal-large {
    width: 750px;
    left: -253px;
    top: 100px;
}

#sidebarMax .menu-buttons a {
    vertical-align: middle;

    /* align-items:center;
    flex-direction: row; */
    /* font-weight: 500; */
    /* font-size: 14px ; */
}


#sidebarMax .menu-buttons a svg {
    margin-right: .5rem !important;
    margin-bottom: 3px;
}

.gap-lg {
    gap: var(--gap-lg);

}

.gap-md {
    gap: var(--gap-md);

}

.gap-sm {
    gap: var(--gap-sm);

}

.row .col-12 .upload-photo-wrapper .row .col-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 8px;
}

.row .col-12 .upload-photo-wrapper .row .col-3 .col-9 strong {
    padding-top: 10px !important;
}

#manage-uponEnrollmentFee-modal .modal-body .padding {
    padding-left: 0.625rem !important;
}

#manage-uponEnrollmentFee-modal .modal-body .align-items-center {
    height: 40px;
}

#payment-method-field {
    gap: 1rem;
}

#payment-method-field #view-payment-method-details {
    width: 10rem;
    height: calc(1.5em + .75rem + 2px);
}

.amount-fee {
    color: #478a1e !important;
    font-weight: 600;
}

.amount-discount {
    color: #c21f27 !important;
    font-weight: 600;
}

.activity-table th,
.activity-table td {
    min-width: 160px;
}

/******************** MEDIA QUARRIES SECTION **************************/




@media screen and (max-width: 550px) {

    .class-inner-wrapper .col-md-12 button,
    .inner-wrapper .col-md-12 button,
    .admissions .inner-wrapper .addrequirements-settings,
    .enrollments .add-other-fees-btn .adjust {
        width: 100% !important;
        margin-left: 0px;
        margin-right: 0px;
        font-size: 12px;
        margin-bottom: 3px;
        overflow-x: visible;

    }

}

@media screen and (max-width: 413px) {

    .class-inner-wrapper .col-md-12 button,
    .inner-wrapper .col-md-12 button,
    .admissions .inner-wrapper .addrequirements-settings,
    .enrollments .add-other-fees-btn .adjust {
        width: 100% !important;
        margin-left: 0px;
        margin-right: 0px;
        font-size: 12px;
        margin-bottom: 3px;

    }

}

@media (min-width: 768px) and (max-width: 1900px) {

    #manage-uponEnrollmentFee-modal .modal-dialog {
        max-width: 28.125rem;
    }
}

@media screen and (min-width: 1400px) {
    #main .dashboard .card p {
        font-size: 18px;
        font-size: calc(10px + 1vh);
    }
}

@media screen and (max-width: 1400px) {
    #main .dashboard .card h1 {
        color: #fff;
        font-size: 40px;

    }

    .modal-large {
        width: 750px;
        left: -253px;
        top: 100px;
    }

}

@media screen and (max-width: 1440px) {
    #main .dashboard .card p {
        font-size: 14px;
        font-size: calc(10px + 1vh);
    }

}

@media screen and (max-width: 1280px) {
    .modal-large {
        width: 750px;
        left: -171px;
        top: 100px;
    }


}

@media screen and (max-width: 1000px) {
    .modal-large {
        width: 750px;
        left: -220px;
        top: 100px;
    }

    .class-inner-wrapper .col-md-12 button,
    .inner-wrapper .col-md-12 button,
    .admissions .inner-wrapper .addrequirements-settings,
    .enrollments .add-other-fees-btn .adjust {
        width: 100% !important;
        margin-left: 0px;
        margin-right: 0px;
        font-size: 12px;
        margin-bottom: 3px;
        overflow-x: visible;
        transform: translateX(0%);

    }

    .class-inner-wrapper table,
    .inner-wrapper table {
        margin-top: 0px;
        margin-left: 0px;
        transform: translateX(0%);
    }

}

@media screen and (max-width: 768px) {
    .modal-large {
        width: 750px;
        left: -143px;
        top: 100px;
        width: 180% !important;
        overflow-x: visible;
    }

}

@media screen and (min-width: 700px) and (max-width:800px) {

    .class-inner-wrapper .col-md-12 button,
    .inner-wrapper .col-md-12 button,
    .admissions .inner-wrapper .addrequirements-settings,
    .enrollments .add-other-fees-btn .adjust {
        width: 100% !important;
        margin-left: 0px;
        margin-right: 0px;
        font-size: 12px;
        margin-bottom: 3px;
        overflow-x: visible;

    }

    .class-inner-wrapper table,
    .inner-wrapper table {
        width: 50% !important;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 10rem;
        padding-right: 3rem;
        transform: translateX(0%);
        overflow-x: visible;
    }
}

@media screen and (min-width: 800px) and (max-width:900px) {

    .class-inner-wrapper .col-md-12 button,
    .inner-wrapper .col-md-12 button,
    .admissions .inner-wrapper .addrequirements-settings,
    .enrollments .add-other-fees-btn .adjust {
        width: 100% !important;
        margin-left: 0px;
        margin-right: 0px;
        font-size: 12px;
        margin-bottom: 3px;
        overflow-x: visible;

    }

    .class-inner-wrapper table,
    .inner-wrapper table {
        width: 50% !important;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 10rem;
        padding-right: 3rem;
        transform: translateX(0%);
        overflow-x: visible;
    }

}

@media screen and (max-width: 620px) {

    .modal-large {
        width: 750px;
        left: 6px;
        top: 100px;
        width: 107% !important;
    }

    .class-inner-wrapper table,
    .inner-wrapper table {
        width: 50% !important;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 10rem;
        padding-right: 3rem;
        transform: translateX(0%);
        overflow-x: visible;
    }

    .admissions .inner-wrapper {
        overflow-x: visible;
    }

}

.modal-large {
    width: 750px;
    left: 6px;
    top: 100px;
    width: 107% !important;
    margin: -12px !important;
    overflow-x: visible;
}

.class-inner-wrapper table,
.inner-wrapper table {
    margin-top: 0px;
    margin-left: 0px;
    transform: translateX(0%);
    overflow-x: scroll;
}

.admissions .inner-wrapper {
    overflow-x: visible;
}



@media screen and (max-width: 600px) {

    .modal-large {
        width: 750px;
        left: 6px;
        top: 100px;
        width: 107% !important;
        margin: -12px !important;
    }

}

@media screen and (max-width: 550px) {

    .modal-large {
        width: 750px;
        left: 11px;
        top: 100px;
        width: 85% !important;
        margin: -12px !important;
        overflow-x: visible;
    }


}

@media screen and (max-width: 420px) {

    .modal-large {
        width: 750px;
        left: 104px;
        top: 100px;
        width: 68% !important;
        margin: -12px !important;
        overflow-x: visible;
    }


}

@media screen and (max-width: 375px) {

    .modal-large {
        width: 750px;
        left: 81px;
        top: 100px;
        width: 68% !important;
        margin: -12px !important;
        overflow-x: visible;
    }


}

@media screen and (max-width: 360px) {

    .modal-large {
        width: 750px;
        left: 81px;
        top: 100px;
        width: 68% !important;
        margin: -12px !important;
        overflow-x: visible;
    }


}

@media screen and (max-width: 280px) {

    .modal-large {
        width: 750px;
        left: 69px;
        top: 100px;
        width: 68% !important;
        margin: -12px !important;
        overflow-x: visible;
    }
}


@media only screen and (max-width: 600px) {

    #main .dashboard .card {
        background-color: #FF7F50;
        border: none;
        border-radius: 15px;
        width: 100% !important;
        height: 9% !important;
        padding: 15px;
        display: inline-block;
        margin-right: 6px;
        /* box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); */
        box-shadow: 0 1px 4px 0 rgb(0 0 0 / 12%);
        vertical-align: top;
        overflow-x: visible;
    }
}