/* Bootstrap 5 utility compatibility for the Bootstrap 4 runtime. */
.fw-bold { font-weight: 700 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-light { font-weight: 300 !important; }
.d-grid { display: grid !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-auto { margin-left: auto !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }

.form-label { display: inline-block; margin-bottom: .5rem; }
.form-select {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem 2rem .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #6c757d 50%), linear-gradient(135deg, #6c757d 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    appearance: none;
}
.form-select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    outline: 0;
}
.form-select-sm {
    height: calc(1.8125rem + 2px);
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .875rem;
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
    height: auto;
    padding-right: .75rem;
    background-image: none;
}

.btn-close {
    float: right;
    padding: 0;
    color: #000;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: .5;
}
.btn-close::before { content: "\00d7"; }
.btn-close:hover { opacity: .75; }

.hr-breadcrumb-wrap {
    background: rgba(255, 255, 255, .78);
    border-bottom: 1px solid #e4e7ec;
    color: #667085;
    font-size: .82rem;
    padding: 8px 0;
}
.hr-breadcrumb-wrap a { color: #174ea6; text-decoration: none; }
.hr-breadcrumb-wrap a:hover { text-decoration: underline; }
.hr-breadcrumb-separator { color: #98a2b3; margin: 0 8px; }

.hr-state {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #667085;
    text-align: center;
}
.hr-state-title { color: #344054; font-weight: 700; margin-bottom: 4px; }
.hr-state-loading::before {
    content: "";
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border: 3px solid #dbeafe;
    border-top-color: #174ea6;
    border-radius: 50%;
    animation: hr-state-spin .75s linear infinite;
}
.hr-state-error {
    min-height: auto;
    border-style: solid;
    border-color: #fecdca;
    background: #fffbfa;
    color: #b42318;
}
@keyframes hr-state-spin { to { transform: rotate(360deg); } }

.row.gx-4 { margin-right: -.75rem; margin-left: -.75rem; }
.row.gx-4 > [class*="col-"] { padding-right: .75rem; padding-left: .75rem; }
.row.gy-4 > [class*="col-"] { margin-bottom: 1.5rem; }

@media (min-width: 768px) { .text-md-end { text-align: right !important; } }
@media (min-width: 992px) {
    .text-lg-end { text-align: right !important; }
    .ms-lg-auto { margin-left: auto !important; }
}

/* Keep the useful columns visible on small screens; print layouts are unaffected. */
@media screen and (max-width: 767.98px) {
    .table-responsive {
        border: 0;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive table { font-size: .82rem; }
    .table-responsive .btn-sm { padding: .25rem .45rem; }

    #users_table_all th:nth-child(1), #users_table_all td:nth-child(1),
    #users_table_all th:nth-child(2), #users_table_all td:nth-child(2),
    #users_table_all th:nth-child(3), #users_table_all td:nth-child(3),
    #users_table_all th:nth-child(6), #users_table_all td:nth-child(6),
    #users_table_all th:nth-child(7), #users_table_all td:nth-child(7),
    #users_table_all th:nth-child(8), #users_table_all td:nth-child(8),
    [id^="users_table_"]:not(#users_table_all) th:nth-child(2),
    [id^="users_table_"]:not(#users_table_all) td:nth-child(2),
    [id^="users_table_"]:not(#users_table_all) th:nth-child(4),
    [id^="users_table_"]:not(#users_table_all) td:nth-child(4),
    [id^="users_table_"]:not(#users_table_all) th:nth-child(5),
    [id^="users_table_"]:not(#users_table_all) td:nth-child(5),
    [id^="users_table_"]:not(#users_table_all) th:nth-child(6),
    [id^="users_table_"]:not(#users_table_all) td:nth-child(6) {
        display: none;
    }

    .edit-time-table th:nth-child(1), .edit-time-table td:nth-child(1),
    .edit-time-table th:nth-child(2), .edit-time-table td:nth-child(2),
    .edit-time-table th:nth-child(3), .edit-time-table td:nth-child(3),
    .edit-time-table th:nth-child(5), .edit-time-table td:nth-child(5),
    .edit-time-table th:nth-child(7), .edit-time-table td:nth-child(7) {
        display: none;
    }

    #admin_attendance_table th:nth-child(2), #admin_attendance_table td:nth-child(2),
    #admin_attendance_table th:nth-child(4), #admin_attendance_table td:nth-child(4),
    #admin_attendance_table th:nth-child(6), #admin_attendance_table td:nth-child(6),
    #admin_attendance_table th:nth-child(7), #admin_attendance_table td:nth-child(7),
    #admin_attendance_table th:nth-child(9), #admin_attendance_table td:nth-child(9),
    .summary-detail-table th:nth-child(3), .summary-detail-table td:nth-child(3),
    .summary-detail-table th:nth-child(4), .summary-detail-table td:nth-child(4) {
        display: none;
    }
}

@media print { .hr-breadcrumb-wrap { display: none !important; } }