.attendance_table_scroll {
    max-height: 420px;
    overflow-x: auto;
    max-width: 100%;
}

.attendance-table {
    text-align: left;
    position: relative;
    border-collapse: collapse;
    width: 100%;
    font-family: "Poppins", sans-serif;
}

    .attendance-table th {
        background-color: #f1f5f7;
        z-index: 1;
        padding: 4px 16px 4px 10px !important;
        border-bottom: 1px solid #ededed;
        font-size: 13px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        color: #000;
        text-transform: capitalize;
        position: relative;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .attendance-table td {        
        line-height: 16px;
        padding: 4px 16px 4px 10px !important;
        border-bottom: 1px solid #d9d9d9;
        position: relative;
        font-family: "Poppins", sans-serif;
        font-size: 13px;
    }

    .attendance-table tr:hover {
        background-color: #f5f5f5; /* Light gray background */
    }

.no-record-img{
    width:200px;
    height:200px;
}

.linkblue {
    color: #2871e7;
    font-family: "Poppins", sans-serif;
    text-transform: capitalize;
}

.resize-handle {
    position: absolute;
    right: 0;
    top: 5px;
    height: 60%;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-right:3px solid #e9ecef;
}
    .resize-handle:hover {
        border-right-color: black; /* change to black on hover */
    }

.resize-icon {
    background-color: transparent;
    transition: background-color 0.9s;
}

.resize-handle:hover .resize-icon {
    background-color: black;
}


td:hover {
    background-color: transparent !important;
}

.dynamictoggle {
    font-size: 17px;
    color: #292c3a;
    cursor: pointer !important;
    transition: color .15s ease-in-out;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}
    .dynamictoggle .fa-bars {
           font-size:14px;
    }


    .dynamictoggle:hover {
        color: #484848;
        cursor: pointer !important;
        background-color: #e7e7e7;
    }

.attendance-table th .glyphicon-triangle-top {
    margin-top: 0 !important;
    font-size: 11px;
}

.PaginationSec {
    margin-top: 15px;
}

    /*.glyphicon-triangle-top {
    color: #ccc;
    margin-top: 2px !important;
}

.glyphicon-triangle-top, .glyphicon-triangle-bottom {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
*/


    .PaginationSec .page {
        display: flex;
        align-items: center;
        font-family: "Poppins", sans-serif;
        font-size: 13px;
    }

        .PaginationSec .page .SP_drop_num {
            margin: 0 10px;
        }

    .PaginationSec .pagi_mid_text {
        font-size: 13px;
        font-family: "Poppins", sans-serif;
    }

.Main_filter_area {
    font-family: "Poppins", sans-serif;
}

    .Main_filter_area .select_main_tag {
        font-size: 16px;
        font-weight: 500;
        color: #000;
    }

.dataTables_paginate .pagination {
    font-family: "Poppins", sans-serif;
}

.right_menu_options .btn-addnew {
    background-color: #795548;
    border-color: #6d4b3f;
    color: #fff;
    font-family: "Poppins", sans-serif;
}

.right_menu_options .fix_common_icon_btn {
    font-family: "Poppins", sans-serif;
    width: 34px;
    height: 34px;
}

.toggle_lines {
    position: absolute;
    list-style: none;
    right: 0;
    background-color: white;
    text-align: left;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-size: 16px;
    z-index: 999 !important;
    width: auto;
    min-width: 200px;
    margin: 0;
    padding: 0;
    margin-right: 16px;
    margin-top: 3px;
    font-family: "Poppins", sans-serif;
}

    .toggle_lines li {
        font-size: 13px;
        list-style: none;
        padding-top: 3px;
        padding-bottom: 3px;
    }

        .toggle_lines li ul {
            padding-left: 0;
        }

.ml_3 {
    margin-left: 3px;
}

.sortby_tag {
    display: block;
    padding: 6px 15px 3px;
    border-bottom: 1px solid #cbcbcb;
    font-weight: 500;
    background: #f3f3f3;
    font-size: 13px;
    line-height: 22px;
    font-family: var(--medium);
    color: #000;
}
.toggle_lines .dropdown-item {
    padding: 4px 5px;
    font-size: 13px;
    font-weight: 400;
    font-family: var(--regular);
    min-width: 200px;
}
.toggle_lines .dropdown-item:hover {
    background-color: #4181e7;
    color: #fff !important;
}

span.Tsub_text {
    font-size: 12px;
    line-height: 25px;
    color: #919191;
}


.red-icon {
    color: #7d9afb !important;
}

.redBorderClass {
    color: red;
}



/*Modal Popup New Design*/
.NewSPR .modal-content .modal-header {
    background: linear-gradient(153deg, rgb(35 46 82) 0%, rgb(73 87 133) 66%);
    padding: 5px 10px;
}

    .NewSPR .modal-content .modal-header .close {
        background: #616e97;
        height: 30px;
        width: 30px;
        border-radius: 5px;
        font-weight: 700;
        font-size: 25px;
    }

    .NewSPR .modal-content .modal-header .modal-title {
        font-weight: 600;
    }

.NewSPR .modal-content .modal-body {
    padding: 10px 10px;
}

    .NewSPR .modal-content .modal-body h5 {
        text-align: left;
    }

.NewSPR .modal-content .modal-footer {
    padding: 5px 10px;
}

    .NewSPR .modal-content .modal-footer .pull-center {
        text-align: center;
    }

.NewSPR .modal-content .modal-header .close {
    margin-top: 0;
}

.NewSPR .modal-content .modal-footer .btn-custom {
    font-size: 15px;
    color: #fff;
    border-color: #354067;
    background: #354168;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 3px 12px;
    margin: 0 2px;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}

    .NewSPR .modal-content .modal-footer .btn-custom:hover {
        border-color: #4159a9;
        background: #4159a9;
    }

.NewSPR .modal-content .modal-footer .btn-default {
    font-size: 15px;
    color: #333;
    border-color: #e0e0e5;
    background: #e9ecef;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 3px 12px;
    margin: 0 2px;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}

    .NewSPR .modal-content .modal-footer .btn-default:hover {
        border-color: #dee2e6;
        background: #dee2e6;
    }


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

.NewSPR .modal-content .pop_imag img {
    width: 50px;
}

.NewSPR .modal-content .pop_text {
    font-size: 17px;
    margin-top: 8px;
}

.NewSPR .modal-content .btn-custom {
    font-size: 15px;
    color: #fff;
    border-color: #354067;
    background: #354168;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 3px 12px;
    margin: 0 2px;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}

    .NewSPR .modal-content .btn-custom:hover {
        border-color: #4159a9;
        background: #4159a9;
    }

.NewSPR .modal-content .btn-default {
    font-size: 15px;
    color: #333;
    border-color: #e0e0e5;
    background: #e9ecef;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 3px 12px;
    margin: 0 2px;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}

    .NewSPR .modal-content .btn-default:hover {
        border-color: #dee2e6;
        background: #dee2e6;
    }


.auto-height-div {
    background-color: #eff7eb;
    margin-top: 3px;
    text-align: left;
    padding: 10px;
    overflow: hidden; /* Ensures that the content is contained within the div */
}

.search-criteria-title {
    margin-left: 3.2%;
    font-size: 19px;
    font-weight: 600;
    color: green;
}

.criteria-details {
    margin-left: 3.2%;
}

.circle-icon {
    font-size: 12px;
    color: green;
}

.highlight {
    color: green;
}

.change-criteria-link {
    margin-top: 1px;
    padding: 7px 9px;
    cursor: pointer;
    color: blue;
    margin-left: 11%;
}

.redBorderClass {
    color: red;
}



/*Modal Popup New Design*/
.NewSPR .modal-content .modal-header {
    background: linear-gradient(153deg, rgb(35 46 82) 0%, rgb(73 87 133) 66%);
    padding: 5px 10px;
}

    .NewSPR .modal-content .modal-header .close {
        background: #616e97;
        height: 30px;
        width: 30px;
        border-radius: 5px;
        font-weight: 700;
        font-size: 25px;
    }

    .NewSPR .modal-content .modal-header .modal-title {
        font-weight: 600;
    }

.NewSPR .modal-content .modal-body {
    padding: 10px 10px;
}

    .NewSPR .modal-content .modal-body h5 {
        text-align: left;
    }

.NewSPR .modal-content .modal-footer {
    padding: 5px 10px;
}

    .NewSPR .modal-content .modal-footer .pull-center {
        text-align: center;
    }

.NewSPR .modal-content .modal-header .close {
    margin-top: 0;
}

.NewSPR .modal-content .modal-footer .btn-custom {
    font-size: 15px;
    color: #fff;
    border-color: #354067;
    background: #354168;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 3px 12px;
    margin: 0 2px;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}

    .NewSPR .modal-content .modal-footer .btn-custom:hover {
        border-color: #4159a9;
        background: #4159a9;
    }

.NewSPR .modal-content .modal-footer .btn-default {
    font-size: 15px;
    color: #333;
    border-color: #e0e0e5;
    background: #e9ecef;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 3px 12px;
    margin: 0 2px;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}

    .NewSPR .modal-content .modal-footer .btn-default:hover {
        border-color: #dee2e6;
        background: #dee2e6;
    }


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

.NewSPR .modal-content .pop_imag img {
    width: 50px;
}

.NewSPR .modal-content .pop_text {
    font-size: 17px;
    margin-top: 8px;
}

.NewSPR .modal-content .btn-custom {
    font-size: 15px;
    color: #fff;
    border-color: #354067;
    background: #354168;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 3px 12px;
    margin: 0 2px;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}

    .NewSPR .modal-content .btn-custom:hover {
        border-color: #4159a9;
        background: #4159a9;
    }

.NewSPR .modal-content .btn-default {
    font-size: 15px;
    color: #333;
    border-color: #e0e0e5;
    background: #e9ecef;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 3px 12px;
    margin: 0 2px;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}

    .NewSPR .modal-content .btn-default:hover {
        border-color: #dee2e6;
        background: #dee2e6;
    }


.auto-height-div {
    background-color: #eff7eb;
    margin-top: 3px;
    text-align: left;
    padding: 10px;
    overflow: hidden; /* Ensures that the content is contained within the div */
}

.search-criteria-title {
    margin-left: 3.2%;
    font-size: 19px;
    font-weight: 600;
    color: green;
}

.criteria-details {
    margin-left: 3.2%;
}

.circle-icon {
    font-size: 12px;
    color: green;
}

.highlight {
    color: green;
}

.change-criteria-link {
    margin-top: 1px;
    padding: 7px 9px;
    cursor: pointer;
    color: blue;
    margin-left: 11%;
}

.last-row {
    font-weight: 700;
    color: #000 !important;
}