.page-header {
    margin-bottom: 20px;
    margin-top: 0px;
}

.app-content .side-app.main-container{
    min-height: 550px;
}

.ui-state-active {
    background: #484 !important;
    color: #FFF !important;
}

.ui-state-disabled span {
    background: rgb(233, 233, 233) !important;
    color: #b6b9c3 !important;
    cursor: not-allowed ! important;
}

 /*------  message style ------*/



/*------ subject list color dot styles ------*/

.dot {
    height: 25px !important;
    width: 25px !important;
    background-color: var(--subject-color);
    ;
    border-radius: 50% !important;
    display: inline-block !important;
}


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


/*------ add subject modal color picker styles ------*/



.color-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.badge {
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 10px;
    min-width: 19px;
}

.badge-paid,
.badge-received,
.badge-good,
.badge-done,
.badge-pass,
.badge-enrolled,
.badge-extra_class {
    color: rgb(255, 255, 255);
    background-color: green;
    /* background-color: #f7b924; */
}

.badge-alternate,
.badge-student_is_lead {
    color: #fff;
    background-color: #794c8a;
}

.badge-dark {
    background-color: #6c757d !important;
}

.badge-paid,
.badge-received,
.badge-good,
.badge-done,
.badge-pass,
.badge-enrolled,
.badge-extra_class {
    color: rgb(255, 255, 255);
    background-color: rgb(4, 133, 4);
    /*  */
}


.badge-partial {
    color: #000000;
    background-color: #f7b924;
}

.badge-rejected,
.badge-due {
    color: #fff;
    background-color: #6d0820;
}

.badge-processing,
.badge-advance,
.badge-service {
    color: #fff;
    background-color: #1c3f97;
}

#new_subject_color {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    width: 63px;
    height: 50px;
    border: none;
    cursor: pointer;
}

#new_subject_color::-webkit-color-swatch {
    border-radius: 50%;
    border: none;
}

#new_subject_color::-moz-color-swatch {
    border-radius: 50%;
    border: none;
}


#update_subject_color {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    width: 63px;
    height: 50px;
    border: none;
    cursor: pointer;
}

#update_subject_color::-webkit-color-swatch {
    border-radius: 50%;
    border: none;
}

#update_subject_color::-moz-color-swatch {
    border-radius: 50%;
    border: none;
}

/*------end add subject modal color picker styles ------*/

.app-sidebar__logo .header-brand img.desktop-lgo,
.app-sidebar__logo .header-brand img.dark-logo {
    width: 30%;
}


#ui-datepicker-div {
    z-index: 99999 !important;
}

.input-group.search-result li {
    cursor: pointer;
}


.input-group.search-result li:hover {
    background-color: #eee;
}

.input-group.search-result {
    background-color: #fff;
    margin-top: 0px;
    position: absolute;
    left: 3px;
    z-index: 999;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.search_product_list li {
    background-color: #fff;
    border-bottom: 1px solid #d1d2d4;
    border-radius: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.search_product_list {
    background-color: #eee;
}

tbody#sales_point td {
    padding: 10px 3px;
    text-align: center;
}


.table.dataTable td>.dropdown-menu {
    padding: 0 !important;
}

.table.dataTable td>.dropdown-menu .dropdown-item {
    padding: 0.05rem 1rem !important;
}

.select2-selection__placeholder {
    color: #263871 !important;
}

.swal2-confirm {
    margin-right: 5px !important;
}


:root {
    --body: #fafafa;
    --text-default: #1d1d1f;
    --text-secondary: #86868b;

    @media (prefers-color-scheme: light) {
        --body: #fafafa;
        --text-default: #1d1d1f;
    }

    @media (prefers-color-scheme: dark) {
        --body: #161616;
        --text-default: #f5f5f7;
    }
}


.custom_td tbody tr td:not(:nth-child(1)) {
    padding: 0 !important;
    position: relative;
}

.take-single-attendance {
    -webkit-appearance: none;
    outline: none;
    /* top: -10px; */
    top: 50%;
    ;
    transform: translateY(-50%);
    position: absolute;
    height: 30px;
    width: 68px;
    border: 1px solid #c1baba;
    border-radius: 0;
    cursor: pointer;
    /* overflow: hidden; */
    /* box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6),
      -9px -9px 16px rgba(255, 255, 255, 0.5), inset 10px 10px 15px -10px #c3c3c3,
      inset -10px -10px 15px -10px #fff; */

    @media (prefers-color-scheme: light) {
        /* box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6),
        -9px -9px 16px rgba(255, 255, 255, 0.5),
        inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #fff; */
    }

    @media (prefers-color-scheme: dark) {
        /* box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.05),
        8px 4px 12px 0px rgba(0, 0, 0, 0.5),
        inset -4px -4px 4px 0px rgba(255, 255, 255, 0.05),
        inset 4px 4px 4px 0px rgba(0, 0, 0, 0.5); */
    }

    /* Toggle Indicator */
    &::before {
        content: "Absent";
        height: 100%;

        width: calc(100% - 5px);
        background-color: var(--body);
        position: absolute;
        margin: auto;
        top: 0;
        left: 5px;
        bottom: 0;
        text-align: center;
        /* border-radius: 10%; */
        /* box-shadow: 7px 7px 15px #c3c3c3, 9px 9px 16px rgba(189, 189, 189, 0.6); */
        transition: 0.15s;
        border: 1px solid #dbdce7;
        background: #8f8f8f;
        color: #fff;
        font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial",
            sans-serif;
        font-weight: 700;

        @media (prefers-color-scheme: light) {
            /* box-shadow: 7px 7px 15px #c3c3c3, 9px 9px 16px rgba(189, 189, 189, 0.6); */
        }

        @media (prefers-color-scheme: dark) {
            /* box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.05),
          8px 4px 12px 0px rgba(0, 0, 0, 0.5); */
        }
    }

    /* Label */
    &::after {
        content: "";
        position: absolute;
        font-size: 12px;
        top: 0px;
        right: 15px;
        color: var(--text-secondary);
        font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial",
            sans-serif;
        font-weight: 700;
        letter-spacing: 0.004em;
        text-align: center;
    }

    /* Checked Styles */
    &:checked {
        background: #0071e3;
        overflow: hidden;

        @media (prefers-color-scheme: light) {
            box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6),
                -9px -9px 16px rgba(255, 255, 255, 0.5),
                inset 10px 10px 15px -10px rgb(0, 71, 185),
                inset -10px -10px 15px -10px rgb(0, 71, 185);
        }

        &::before {
            left: 85px;
            box-shadow: none;
        }

        &::after {
            content: "Present";
            top: 50%;
            transform: translateY(-50%);
            width: calc(100% - 5px);
            right: 5px;
            color: #f5f5f7;
        }
    }
}

.take-late-attendance{
    -webkit-appearance: none;
    outline: none;
    /* top: -10px; */
    top: 50%;
    ;
    transform: translateY(-50%);
    position: absolute;
    height: 30px;
    width: 68px;
    border: 1px solid #c1baba;
    border-radius: 0;
    cursor: pointer;
    /* overflow: hidden; */
    /* box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6),
      -9px -9px 16px rgba(255, 255, 255, 0.5), inset 10px 10px 15px -10px #c3c3c3,
      inset -10px -10px 15px -10px #fff; */

    @media (prefers-color-scheme: light) {
        /* box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6),
        -9px -9px 16px rgba(255, 255, 255, 0.5),
        inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #fff; */
    }

    @media (prefers-color-scheme: dark) {
        /* box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.05),
        8px 4px 12px 0px rgba(0, 0, 0, 0.5),
        inset -4px -4px 4px 0px rgba(255, 255, 255, 0.05),
        inset 4px 4px 4px 0px rgba(0, 0, 0, 0.5); */
    }

    /* Toggle Indicator */
    &::before {
        content: "Late";
        height: 100%;

        width: calc(100% - 5px);
        background-color: var(--body);
        position: absolute;
        margin: auto;
        top: 0;
        left: 5px;
        bottom: 0;
        text-align: center;
        /* border-radius: 10%; */
        /* box-shadow: 7px 7px 15px #c3c3c3, 9px 9px 16px rgba(189, 189, 189, 0.6); */
        transition: 0.15s;
        border: 1px solid #dbdce7;
        background: #8f8f8f;
        color: #fff;
        font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial",
            sans-serif;
        font-weight: 700;

        @media (prefers-color-scheme: light) {
            /* box-shadow: 7px 7px 15px #c3c3c3, 9px 9px 16px rgba(189, 189, 189, 0.6); */
        }

        @media (prefers-color-scheme: dark) {
            /* box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.05),
          8px 4px 12px 0px rgba(0, 0, 0, 0.5); */
        }
    }

    /* Label */
    &::after {
        content: "";
        position: absolute;
        font-size: 12px;
        top: 0px;
        right: 15px;
        color: var(--text-secondary);
        font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial",
            sans-serif;
        font-weight: 700;
        letter-spacing: 0.004em;
        text-align: center;
    }

    /* Checked Styles */
    &:checked {
        background: #0071e3;
        overflow: hidden;

        @media (prefers-color-scheme: light) {
            box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6),
                -9px -9px 16px rgba(255, 255, 255, 0.5),
                inset 10px 10px 15px -10px rgb(0, 71, 185),
                inset -10px -10px 15px -10px rgb(0, 71, 185);
        }

        &::before {
            left: 85px;
            box-shadow: none;
        }

        &::after {
            content: "On Time";
            top: 50%;
            transform: translateY(-50%);
            width: calc(100% - 5px);
            right: 5px;
            color: #f5f5f7;
        }
    }
}


.sub-slide>a:before {
    content: "";
}

.form-group .form-label{
    font-size: 0.75rem;
    padding-left: 0px;
}

.student-add.dataTable tbody th,
.student-add.dataTable tbody td,
.student-add.dataTable thead th,
.student-add.dataTable thead td{
    padding : 10px 5px !important;
}

.panel-actions {
    top: 55%;
    right: 15px;
}
.panel-title {
    padding: 20px 15px 20px 20px !important;
}

table.dataTable tbody th, table.dataTable tbody td, table.dataTable thead th, table.dataTable thead td {
    padding: 7px 10px !important;
}

.emp-profile .table th,
.emp-profile .table td{
    border-top: 1px solid #e9ebfa;
}

.bg-light:checked~.custom-switch-indicator {
    background: #6ec67e;
}
.custom-checkbox .bg-light:checked~.custom-control-label::before {
    background-color: #6ec67e;
    border-color: #6ec67e;
}
span.text-red{
    margin-left: 5px;
}


.dual-line{
    text-decoration-style: double;
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
}


.datepicker.dropdown-menu {
    z-index: 9999 !important;
}

.buttons-columnVisibility {
    background: #c3c3d5 !important;
    color: black !important;
    border-radius: 2px !important;
}

.dt-button-collection {
    height: 35vh !important;
    overflow: scroll !important;
}
.table.dataTable thead {
    background-color: #4e9eff;
}
.table.dataTable thead tr th{
    color: #fff;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}

#selected-filters-container button > * {
    pointer-events: none !important;
    cursor: not-allowed;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
    margin-right: .25em;
}

.separator:not(:empty)::after {
    margin-left: .25em;
}

.ui-datepicker-today .ui-state-highlight {
    color: black !important;
}

.nav-tt-menu {
    position: absolute;
    top: 100%;
    left: 3px;
    z-index: 100;
    display: block;
    background: rgb(245, 245, 245);
    width: 98%;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.nav-suggestion-hover:hover {
    background: #e7e7e7
}

/* .w-90{
    width: 90%!important;
} */
.nav-suggestion-row {
    display: flex;
    align-items: center;
    padding: 5px 10px 10px 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.nav-avatar {
    position: relative;
    display: inline-block;
    width: 40px;
    white-space: nowrap;
    vertical-align: bottom;
    border-radius: 1000px;
    background: transparent;
}

.nav-avatar-small {
    width: 40px;
    height: 40px;
    border: 1px solid #eee;
    background: aliceblue;
    border-radius: 50%;
}

.mr-15 {
    margin-right: 15px !important;
}

.nav-suggestion-details-row {
    display: flex;
}

.nav-suggestion-details-row span {
    margin-right: 12px
}

.clockpicker-popover {
    z-index: 10101 !important;
}

.note-editor.note-frame.panel.panel-default {
    border: 1px solid lightgrey;
}

.attendance_modal_xl {
    margin-left: -14% !important;
    width: 130% !important;
}


.routine.table th,
.routine.table td{
    border: 1px solid #626262;
}

/* responsive media query */

@media only screen and (max-width: 600px) {
    div#student-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }
    div#student-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .text-left {
        text-align: left !important;
    }

    .card-body {
        flex: 1 1 auto;
        margin: 0;
        position: relative;
    }
    div#leaveapplication-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#leaveapplication-table_length_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#classSection-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#classSection-table_length_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#worksubmission-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#worksubmission-table_length_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#employeeLeaveApplication-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#employeeLeaveApplication-table_length_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#examschedule-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -50px;
    }

    div#dailylesson-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#dailylesson-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -54px;
    }

    div#classnote-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#classnote-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -54px;
    }

    div#routine-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#routine-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -25px;
    }

    div#syllabus-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#syllabus-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -52px;
    }

    div#feeReceipt-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#feeReceipt-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#ReceiptEntries-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#collectionreport-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#collectionreport-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#duereport-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#duereport-table_length_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#waiverapplicationset-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -55px;
    }

    div#waiverapplicationset-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#waiverapplication-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -55px;
    }

    div#waiverapplication-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#feewaiver-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -50px;
    }

    div#feewaiver-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#daily_stock_report-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -30px;
    }

    div#daily_stock_report-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#sms_table_length {
        width: 100%;
        margin-bottom: 19px;
        display: flex;
        justify-content: center;
        /* margin-top: -10px; */
    }

    div#sms_table_length_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#driver-table_length {
        width: 100%;
        margin-bottom: 19px;
        display: flex;
        justify-content: center;
        margin-top: -50px;
    }

    div#driver-table_length_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#transport-table_length {
        width: 100%;
        margin-bottom: 19px;
        display: flex;
        justify-content: center;
        margin-top: -50px;
    }

    div#transport-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#hostelroom-table_length {
        width: 100%;
        margin-bottom: 19px;
        display: flex;
        justify-content: center;
        margin-top: -50px;
    }

    div#hostelroom-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#importantlink-table_length {
        width: 100%;
        margin-bottom: 19px;
        display: flex;
        justify-content: center;
        margin-top: -55px;
    }

    div#importantlink-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#studentleave-table_length {
        width: 100%;
        margin-bottom: 19px;
        display: flex;
        justify-content: center;
        margin-top: -55px;
    }

    div#studentleave-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    div#institutefeedback-table_length {
        width: 100%;
        margin-bottom: 19px;
        display: flex;
        justify-content: center;
        margin-top: -55px;
    }

    div#institutefeedback-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .d-grid-sm{
        display: grid !important;
    }
    .top {
        flex-wrap: wrap;
    }
    .top>.dt-buttons {
        border:none !important;
    }
    div#ReceiptEntries-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#examschedule-table_length_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#teacher-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#teacher-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#employee-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#employee-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -45px;
    }

    div#stock_report-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
    }

    div#stock_report-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#classperiod-table_length {
        width: 100%;
        margin-bottom: 39px;
        display: flex;
        justify-content: center;
        margin-top: -22px;
    }

    div#classperiod-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    div#branchHead-table_length {
        width: 100%;
        margin-bottom: 345px;
        display: flex;
        justify-content: center;
        margin-top: -51px;
    }
    div.dt-buttons {
        margin-top: 7px !important;
    }

    div#branchHead-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#mark_distribution-table_length {
        width: 100%;
        margin-bottom: 279px;
        display: flex;
        justify-content: center;
    }

    div#mark_distribution-table_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    dt-buttons.btn-group {
        margin-top: 50px !important;
        margin-bottom: 15px !important;
    }
    .input-field-150 {
        width: 150px !important;
    }

}