body{
    width:100%;
    overflow-y:hidden !important;
}
h2{
    font-size: 1.5rem !important;
}
.f-outline{
    position: relative;
}
.forminput{
    background-color: white;
    font-size: 13px !important;
    font-family: Arial, Helvetica, sans-serif !important;
}
.formlabel{
    font-weight: bolder !important;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif !important;
    position: absolute;
    left: 0.2rem;
    top: 0.5rem;
    padding: 0 0.5rem;
    color: black;
    cursor: text;
    transition: top 200ms ease-in,
        left 200ms ease-in,
        font-size 200ms ease-in;
}
.requiredField, .optionalField{
    background-color: white;
    border-color: black;
    border-width: 1.5px;
    box-shadow: none !important;
}
.forminput:focus{
    background-color: white;
    border-color: black;
    border-width: 2px;
    box-shadow: none !important;
}
.forminput:focus ~ .form-label,
.forminput:not(:placeholder-shown).forminput:not(:focus)
~.formlabel{
    top: -0.8rem;
    font-size: 0.8rem;
    left: 0.4rem;
    background-color: white;
    color: black;
}
input:-webkit-autofill,
input:-webkit-autofill:focus{
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted]{
    background-color: transparent !important;
}
input, select{
    color: black;
    border-color: black;
    outline: none;
}
.chosen-container-single .chosen-single{
    font-size: 13px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    height: 32px !important;
    line-height: 32px !important;
}
.chosen-container-multi{
    font-size: 13px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    height: auto !important;
}
.chosen-single:hover,
.chosen-container-multi,
.chosen-container-active .chosen-choices,
.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single{
    border: 1px solid #dee2e6;
    box-shadow: none !important;
}
.chosen-container{
    border-radius: 4px !important;
    height: auto !important;
}
.fa-circle-xmark{
    color: red;
}
.select-border{
    border: 1px solid;
    border-radius: 0.375rem;
    width: 101%;
    height: 36px;
    margin-left: -1px;
    margin-top: -34px;
}
.defaultInput{
    border: 1px solid black;
}
.requiredInput, .invalidInput, .redBorder{
    border: 2px solid #0d6efd;
}
.select-active1{
    border: 2px solid black;
    border-radius: 0.375rem;
    width: 102%;
    height: 38px;
    margin-left: -2px;
    margin-top: -36px;
}
.select-active0{
    border: 2px solid black;
    border-radius: 0.375rem;
    width: 102%;
    height: 38px;
    margin-left: -2px;
    margin-top: -36px;
}
#loading{
    color: #ce1141;
    line-height: 35vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(192, 192, 192, 0.85);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    user-select: none;
    cursor: wait;
}
/* Separate overlay for Corrective Action report progress (SUMMARY_OFFENSE_USE_QUEUE ON). Original #loading is never modified. */
#loading-progress-overlay{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100001;
    width: 100vw;
    height: 100vh;
    background-color: rgba(192, 192, 192, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;
    cursor: wait;
}
#loading-progress-overlay .loading-progress-overlay-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 480px;
}
#loading-progress-overlay .loading-progress-warning{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    text-align: center;
}
#loading-progress-overlay #loading-progress-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    color: #333;
    font-size: 16px;
    line-height: 1.4;
}
#loading-progress-overlay .progress-content-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
#loading-progress-overlay .progress-circle-outer{
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(#3085d6 0deg calc(var(--pct, 0) * 3.6deg), #e0e0e0 calc(var(--pct, 0) * 3.6deg) 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.35s ease;
}
#loading-progress-overlay .progress-circle-inner{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
#loading-progress-overlay .progress-circle-value{
    font-size: 26px;
    font-weight: bold;
    color: #3085d6;
}
#e_attendance_progress_wrap .progress.e_attendance_indeterminate {
    overflow: hidden;
}
#e_attendance_progress_wrap .progress.e_attendance_indeterminate .progress-bar {
    width: 35% !important;
    min-width: 35%;
    animation: e_attendance_slide 1.5s ease-in-out infinite;
}
@keyframes e_attendance_slide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(420%); }
}

a, a:hover, img, thead, .xD{
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
    text-decoration: none;
}
.w-95pc{
    width: 100% !important;
}
.w-95px{
    width: 100% !important;
}
.bp{
    background-color: #ce1141 !important;
    border-color: #ce1141 !important;
    color: white !important;
}
.text-default{
    color: black !important;
}
.bg-default{
    background-color: #ce1141;
    color: white;
}
.btn:not(.btn-link){
    font-weight: bold !important;
    background-color: #343434 !important;
    border-color: #343434 !important;
    color: white !important;
}
.btn:not(.btn-link):hover{
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: white !important;
}
.btn.btn-link:hover{
    color: #ce1141 !important;
}
.btn[disabled]{
    cursor: not-allowed;
    pointer-events: auto;
}
textarea{
    resize: none;
}
.close{
    zoom: 80%;
    color: white;
    opacity: 100%;
}
.out:hover{
    background-color: #343434 !important;
    color: white !important;
}
.swal2-confirm, .swal2-deny, .swal2-cancel{
    text-transform: uppercase;
}
.swal2-container{
    zoom: 80% !important;
}
.swal2-html-container{
    zoom: 120% !important;
}
.swal2-content{
    zoom: 120% !important;
}
.swal2-actions{
    zoom: 120% !important;
}
.swal-mid{
    width: 700px !important;
}
.swal-wide{
    width: 900px !important;
}
.card{
    border-color: #ce1141;
}
.card-header{
    background-color: #ce1141;
    border-color: #ce1141;
    color: white;
    font-weight: bold;
    text-align: center;
}
@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
    max-width:900px;
    }
}
.swal2-icon.swal2-warning {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
    font-weight: bold !important;
}
.swal2-confirm, .swal2-deny, .swal2-cancel{
    text-transform: uppercase;
}
.swal2-container{
    zoom: 80% !important;
}
.swal2-html-container{
    zoom: 120% !important;
}
.swal2-content{
    zoom: 120% !important;
}
.swal2-actions{
    zoom: 120% !important;
}
.swal-mid{
    width: 700px !important;
}
.swal-wide{
    width: 900px !important;
}

.dt-button-collection{
    width: 220px !important;
}

.dt-buttons{
    margin-left: 10px !important;
}

.switch{
    position: relative;
    display: inline-block;
    width: 110px;
    height: 34px;
    user-select: none;
}
.switch input{
    display: none;
}
.slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before{
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider{
    background-color: #2ab934;
}
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before{
    -webkit-transform: translateX(75px);
    -ms-transform: translateX(75px);
    transform: translateX(75px);
}
.on{
    display: none;
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 40%;
    font-size: 13px;
    font-weight: bold;
}
.off{
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 13px;
    font-weight: bold;
}
input:checked + .slider .on{
    display: block;
}
input:checked + .slider .off{
    display: none;
}
.slider.round{
    border-radius: 34px;
}
.slider.round:before{
    border-radius: 50%;
}
.spChar{
    text-transform: uppercase;
}
::-webkit-input-placeholder{
    text-transform: initial !important;
}
:-moz-placeholder{
    text-transform: initial !important;
}
::-moz-placeholder{
    text-transform: initial !important;
}
:-ms-input-placeholder{
    text-transform: initial !important;
}
input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    display: block;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-size: 14px;
}
.buttons-csv, .buttons-excel{
    display:none !important;
}
.validation{
    display:none;
    background-color: #dc3545;
    color:white;
    margin-top: 13px;
    margin-bottom: -2px;
    border-radius: 5px;
    padding: 5px;
    position:relative;
    cursor:not-allowed;
    font-size: 15px;
}
.validation:before{
    position: absolute;
    content:'';
    height: 15px;
    width: 15px;
    background-color: #dc3545;
    top:-6px;
    transform: rotate(45deg);
    border-bottom-right-radius: 20px;
}
.requiredValidation{
    zoom: 90% !important;
    display: inline;
    background-color: #dc3545;
    color:white;
    margin-top: 13px;
    margin-bottom: -2px;
    border-radius: 5px;
    padding: 5px;
    position: relative;
    cursor: not-allowed;
    font-size: 15px;
    z-index: 9999 !important;
}
.requiredValidation:before{
    position: absolute;
    content: '';
    height: 15px;
    width: 15px;
    background-color: #dc3545;
    top:-6px;
    transform: rotate(45deg);
    border-bottom-right-radius: 20px;
}
.toast{
    color: white;
    background-color: #dc3545;
    zoom: 120% !important;
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 99999 !important;
    box-shadow: none !important;
}
.badge{
    font-weight: bolder;
}

.show-more-btn-hidden {
    display: none;
}

.show-more-btn,
.show-less-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    padding: 0;
    font-size: 0.9em;
    margin-left: 10px !important;
}

.ob_clear i:hover {
    transform: scale(1.1); /* Slight zoom-in effect */
}

/* Style the calendar icon */
.calendar-icon {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px; /* Default size */
    transition: transform 0.2s ease-in-out; /* Smooth transition */
}

/* Zoom in effect on hover */
.calendar-icon:hover {
    transform: translateY(-50%) scale(1.2); /* Slight zoom effect */
}