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

.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: 70%;
}


#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.15rem 1.5rem !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 {

    @media (min-width: 600px) {
        -webkit-appearance: none;
        outline: none;
        top: 50%;

        border: 1px solid #c1baba;
        border-radius: 0;
    }


    /* top: -10px; */

    transform: translateY(-50%);
    position: absolute;
    height: 30px;
    width: 68px;

    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 */
    @media (min-width: 600px) {
        &::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;
            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;

            /* border-radius: 10%; */
            /* box-shadow: 7px 7px 15px #c3c3c3, 9px 9px 16px rgba(189, 189, 189, 0.6); */


            @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 {

    @media (min-width: 600px) {
        -webkit-appearance: none;
        outline: none;
        top: 50%;
        ;
        border: 1px solid #c1baba;
        border-radius: 0;
    }

    /* top: -10px; */

    transform: translateY(-50%);
    position: absolute;
    height: 30px;
    width: 68px;

    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 */
    @media (min-width: 600px) {
        &::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;
            }
        }
    }



}


/* hiding nav logo from mobile and tablet view*/
.iti-mobile .horizontalMenucontainer .container-fluid.main-container .header-brand {
    /* display: none !important; */
}
.iti-mobile .horizontalMenucontainer .container-fluid.main-container .header-brand img {
    /* display: none !important; */
    height: 3rem !important; 
    /* display: block; */
}
@media (max-width: 980px) and (min-width: 482px) {
    .iti-mobile .horizontalMenucontainer .container-fluid.main-container .header-brand img {
        /* display: none !important; */
        /* height: 3rem !important;  */
        display: block;
    }
}
.mobile-logo {
    /* display: none !important; */
    height: 3rem !important; 
    /* display: block; */
}
@media (max-width: 980px) and (min-width: 482px) {
    .mobile-logo {
        /* display: none !important; */
        /* height: 3rem !important;  */
        display: block;
    }
}




/*setting page tabs*/
@media (max-width: 480px) {
    .iti-mobile .horizontalMenucontainer #mainNavShow .page-main .app-content.main-content .side-app.main-container #site_setting_tab_menu_heading .tabs-menu ul li {
        width: 50% !important;
        margin: 0px !important;
    }
}

@media (max-width: 480px) {
    .iti-mobile .card.top-dash-card {
        max-height: 4.2rem !important;
        min-height: 4rem !important;
    }
    .iti-mobile .card.top-dash-card .card-body{
        padding: 0.8rem 1.5rem !important;
    }

    .iti-mobile .icon1 {
        height: 35px !important;
        width: 35px !important;
        line-height: 37px !important;
        border-radius: 7px !important;
        text-align: center !important;
        font-size: 18px !important;
        color: #fff !important;
    }
}

@media (max-width: 480px) {
    #users-list{
        left: 0.2rem !important;
        top: 4.4rem !important;
        height: 61vh !important;
    }

    #users-list .list-group{
        height: 60vh !important;
    }
}

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

@media (max-width: 620px) {
    .attendance_modal_xl {
        margin-left: 1% !important;
        width: 99% !important;
    }
}

.note_modal_xl {
    margin-left: -14% !important;
    width: 130% !important;
    border: none !important;
}

@media (max-width: 620px) {
    .note_modal_xl {
        margin-left: 1% !important;
        width: 99% !important;
        /* border: none !important; */
    }
}

@media (max-width: 480px){
    .attendance_modal_xl .tabs-menu1 ul li {
        margin: auto !important;
    }
}



@media (max-width: 480px){
    .modal-dialog{
        max-height: calc(100vh - 80px);
        overflow-y: auto; 
    }
}