.float-right {
    float: right;
}

ul.timeline-bs {
    list-style-type: none;
    position: relative;
}
ul.timeline-bs:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline-bs > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline-bs > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

.daypart-day-td {
    background-color: #ff4d01;
    color: white;
}

.daypart-evening-td {
    background-color: #02006c;
    color: white;
}

.daypart-night-td {
    background-color: #30323d;
    color: white;
}

.daypart-late-night-td {
    background-color: #30323d;
    color: white;
}

.recommended-field {
    /*color: #fc2021 !important;*/
    color: darkorange !important;
    font-size: 18px !important;
    display: inline-block; /* Ensure the element can be transformed */
    animation: wiggle 2.75s infinite; /* Apply the animation with total duration */
}

@keyframes wiggle {
    0%, 20%, 100% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(-15deg);
    }
    15% {
        transform: rotate(15deg);
    }
}

.dataTables_processing {
    position: fixed !important; /* Or 'absolute', depending on layout */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    background: none !important; /* Assuming you want only the glyphicon visible */
    color: #333; /* Or any color that fits your design */
    border: none !important;
    z-index: 1050; /* High z-index to ensure visibility */
}
#nprogress .bar {
    background: #fc0001 !important;
}
#nprogress .peg {
    box-shadow: 0 0 10px #fc0001, 0 0 5px #fc0001 !important;
}
#nprogress .spinner-icon {
    border-top-color: #fc0001 !important;
    border-left-color: #fc0001 !important;
}

.table-compressed tr td{
    padding-top: 5px;
    padding-bottom: 5px;
}
.table-compressed tbody tr {
    border-bottom-width: 1.5px !important;
    border-bottom-style: dotted !important;
    border-bottom-color: black !important;
}

/*loader*/
#full-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-loader-overlay-image {
    position: relative;
    z-index: 1001;
}

/*-----table*/
.table-compressed td {
    border: 1px solid #ccc !important;
}
.bg-success-td {
    background-color: #50cd89 !important;
}

/*employee weekly*/
#weekly-management-section-holder select.form-select::-ms-expand {
    display: none;
}
#weekly-management-section-holder select.form-select {
    appearance: none; /* Remove default arrow in Chrome on Mac OS X */
    -webkit-appearance: none; /* Remove default arrow in Safari */
    -moz-appearance: none; /* Remove Default arrow in Firefox */
    background-position: right center; /* Position the background image */
    background-repeat: no-repeat; /* Do not repeat the background image */
    border: 1px solid #999;
    padding: 2px;
    padding-right: 16px;
}
#weekly-management-section-holder input.form-control {
    height: calc(1.5em + .75rem + 6px);  /* Adjust the height as per your select box */
    padding: .375rem .75rem;             /* Adjust the padding as per your select box */
    border: 1px solid #999;              /* Set the border as per your select box */
    appearance: none;                    /* HTML5 does not currently support appearance for inputs */
    -moz-appearance: textfield;          /* Tweaking the Firefox input appearance */
    -webkit-appearance: none;            /* Remove default appearance for chrome and safari */
}
#timetracker-manage-weekly-table td {
    padding-left:4px;
    padding-right:4px;
}

.text-orange {
    color: darkorange;
}