.custom-popover .popover-header {
    background-color: var(--bs-primary);
    color: white;
}
.status-badge {
    font-family: Readex Pro;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    padding: 0.65rem 1.5rem;
    text-transform: uppercase;
    border-radius: 10px;
}
.draft {
    background: #55555533;
    color: #555555;
}
.saved{
    background: #f5a60633;
    color: #f5a606;
}
.submitted {
    background: #0094ff33;
    color: #082469;
}
.invoice-submitted {
    background: #e0f7fa;
    color: #00796b;
}
.rejected {
    background: #ff153133;
    color: #ff1531;
}
.approved {
    background: #18eb8233;
    color: #18eb82;
}

.invoiced {
    background: #f5a60633;
    color: #f5a606;
}

.status-badge.active {
    background: #d1e7ff;
    color: #004085;
}

.expired {
    background: #ff153133;
    color: #ff1531;
}

.upcoming {
    background: #fff3cd;
    color: #856404;
}

.header-border {
    position: relative;
}
.header-border::before,
.header-border::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #ddd9d9;
    width: calc(100% - 40px);
}

.header-border::before {
    left: 20px;
}

.header-border::after {
    right: 20px;
}

/* custom radio */
.custom-radio input[type="radio"] {
    display: none;
    appearance: none;
}
.custom-radio input[type="radio"] + label:before {
    content: "";
    background: #ffffff;
    border-radius: 100%;
    border: 2px solid #555555;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    position: relative;
    top: -0.1em;
    margin-right: 0.6em;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
}
.custom-radio input[type="radio"]:checked + label:before {
    background-color: #f5a606;
    box-shadow: inset 0 0 0 3px #f4f4f4;
}
.custom-radio input[type="radio"]:focus + label:before {
    outline: none;
    border-color: #f5a606;
}
.custom-radio input[type="radio"]:disabled + label:before {
    box-shadow: inset 0 0 0 3px #f4f4f4;
    border-color: #555555;
    background: #f1f1f1;
}
.custom-radio input[type="radio"] + label:empty:before {
    margin-right: 0;
}

.custom-form-label {
    font-size: 1rem;
    color: #5d5d5d;
    font-weight: 500;
    font-family: "Readex Pro";
}

/* custom checkbox */
.custom-checkbox * {
    box-sizing: border-box;
}
.custom-checkbox .cbx {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 0px;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    display: inline-block;
}
.custom-checkbox .cbx:not(:last-child) {
    margin-right: 6px;
}
.custom-checkbox .cbx span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.custom-checkbox .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 2px solid #555555;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}
.custom-checkbox .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 1px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 15px;
    stroke-dashoffset: 15px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.custom-checkbox .cbx span:last-child {
    padding-left: 8px;
    line-height: 18px;
}
.custom-checkbox .cbx:hover span:first-child {
    border-color: #fed401;
}
.custom-checkbox .inp-cbx {
    position: absolute;
    visibility: hidden;
}
.custom-checkbox .inp-cbx:checked + .cbx span:first-child {
    border-color: #F6A605;
    animation: wave-4 0.4s ease;
    background: linear-gradient(180deg, #FED401 0%, #F6A605 100%);
}
.custom-checkbox .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}
.custom-checkbox .inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}
@media screen and (max-width: 640px) {
    .custom-checkbox .cbx {
        width: 100%;
        display: flex;
    }
}
@-moz-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@-webkit-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@-o-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}

.pagination-select,
select[name="result"]{
    width: 70px;
    text-align: center;
    -moz-padding-start: calc(.75rem - 3px);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('../images/icon/arrow_down.svg');
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    border: 1px solid #d2d6da;
    border-radius: .5rem;
    color: #495057;
    display: block;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4rem;
    padding: .5rem 1rem .5rem .75rem;
    padding-right: 2rem;
}

.pagination-select:focus,
select[name="result"]:focus {
    background-color: #fff;
    box-shadow: 0 0 0 0.12rem var(--bs-primary);
    color: #495057;
    outline: 0;
}

/* Custom Scrollbar */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: linear-gradient(180deg, #1D4987, #0E223F);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* min width css */
.w-min-50 {
    min-width: 50px;
}
.w-min-55 {
    min-width: 55px;
}
.w-min-75 {
    min-width: 75px;
}
.w-min-100 {
    min-width: 100px;
}
.w-min-110 {
    min-width: 110px;
}
.w-min-120 {
    min-width: 120px;
}
.w-min-135 {
    min-width: 135px;
}
.w-min-150 {
    min-width: 150px;
}
.w-min-160 {
    min-width: 160px;
}
.w-min-175 {
    min-width: 175px;
}
.w-min-180 {
    min-width: 180px;
}
.w-min-185 {
    min-width: 185px;
}
.w-min-190 {
    min-width: 190px;
}
.w-min-200 {
    min-width: 200px;
}
.w-min-210 {
    min-width: 210px;
}
.w-210 {
    width: 210px;
}
.w-min-220 {
    min-width: 220px;
}
.w-min-225 {
    min-width: 225px;
}
.w-min-250 {
    min-width: 250px;
}
.w-min-260 {
    min-width: 260px;
}
.w-min-300{
    min-width: 300px;
}
.w-min-310{
    min-width: 310px;
}
.w-min-320{
    min-width: 320px;
}
.w-min-350{
    min-width: 350px;
}

.w-max-250{
    max-width: 250px;
}
.w-max-200{
    max-width: 200px;
}

/* airpicker */
.air-datepicker-cell.-selected- {
    background-color: #ffcc00 !important;
    color: #ffffff !important;
}

/* tom select */
.ts-control{
    border-radius: 8px;
    border: 1px solid #BABABA;
    z-index:0 !important;
}
.ts-dropdown{
    margin: 0;
    border-radius: 0 0 8px 8px;
}
.ts-wrapper.single.input-active.dropdown-active > .ts-control{
    border-radius: 8px 8px 0px 0px;
}
.ts-dropdown,
.ts-control,
.ts-control input {
    color: #5D5D5D;
    font-family: 'Readex Pro';
    font-size: 14px;
    line-height: 20px;
}
.ts-dropdown .active {
    background-color: #1d498714;
    color: #1D4987;
}
.dropdown-container {
    position: relative;
}

.dropdown-container .dropdown-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}
.dropdown-container .ts-control {
    padding-right: 30px;
}
.avatar {
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    border-radius: 50%; /* Makes the image circular */
}
.avatar img {
    width: 100%; /* Adjust size as needed */
}
.choices__list--single {
    color: #495057;
}

#myDropzone {
    border: 2px dashed #BABABA;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.dz-message {
    font-size: 1.2rem;
    font-weight: 500;
    color: #BABABA;
}

.dropzone .dz-preview .dz-progress {
    top: 85%;
}

.remove-btn {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 7px;
    z-index: 28;
    color: #ff4949;
    font-size: 1.3rem;
}

.remove-btn:hover {
    color: #fc3737;
}

.message-list {
    padding: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.multiselect-container.show {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.no-data-found {
    margin: 8px !important;
}

.custom-scrollbar:focus-visible {
    outline: none;
}

.multiselect-container .multiselect-all:focus,.multiselect-container .multiselect-all:hover,.multiselect-container .multiselect-group:focus,.multiselect-container .multiselect-group:hover,.multiselect-container .multiselect-option:focus,.multiselect-container .multiselect-option:hover {
    background-color: #F3F5F7 !important;
}

.multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active,.multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active,.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active {
    background-color: #F3F5F7;
    color: #000
}

.multiselect-option .form-check-label{
    color: #495057;
    margin-top: 1px;
    margin-bottom: 0 !important;
}