.fi-sidebar-nav {
    background: #1e4e6e;
}

.fi-sidebar-nav .fi-sidebar-item-label,
.fi-sidebar-group-label, .fi-sidebar-item-icon,
.fi-sidebar-nav .fi-icon-btn-icon,
.fi-fo-repeater-item .fi-icon-btn-icon {
    color: #fff !important;
}

.fi-fo-repeater-item.simple .fi-icon-btn-icon {
    color: rgba(var(--c-500),var(--tw-text-opacity,1)) !important;
}


.fi-sidebar-item .fi-sidebar-item-button:hover {
    background-color: #447ca1 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: #447ca1 !important;
}


.repeater-days .fi-fo-repeater-item-header {
    background: #447ca1;
    border-radius: 10px 10px 0 0;
}

.repeater-days .fi-fo-repeater-item-content {
    border-radius: 0 0 10px 10px;
}

.repeater-days .fi-fo-repeater-item-header h4 {
    color: #fff !important;
}

.repeater-days .fi-fo-repeater-item {
    border: 2px solid #447ca1 !important;
}

.repeater-days .fi-btn {
    background: #447ca1 !important;
    color: #fff !important;
    transition: 0.2s ease-in-out;
}

.repeater-days .fi-btn:hover {
    background: #1e4e6e !important;
    transition: 0.2s ease-in-out;
}

.repeater-expenses .fi-fo-repeater-item-header {
    background: #d97706;
}

.repeater-expenses .fi-fo-repeater-item {
    border: 2px solid #d97706 !important;
}

.repeater-expenses .fi-btn {
    background: #d97706 !important;
    color: #fff !important;
    transition: 0.2s ease-in-out;
}

.repeater-expenses .fi-btn:hover {
    background: #a85b00 !important;
    transition: 0.2s ease-in-out;
}

.custom-table-wrapper {
    width: 100%;
    border: 1px solid rgba(var(--gray-200), 1);
    border-radius: 10px;
}
.dark .custom-table-wrapper {
    width: 100%;
    border: 1px solid hsla(0,0%,100%,.05);
    border-radius: 10px;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    border-width: 0;
}

.custom-table th {
    border-bottom: 1px solid rgba(var(--gray-200), 1);
}
.dark .custom-table th {
    border-bottom: 1px solid hsla(0,0%,100%,.05);
}
.custom-table td {
    border-top: 1px solid rgba(var(--gray-200), 1);
}
.dark .custom-table td {
    border-top: 1px solid hsla(0,0%,100%,.05);
}


.custom-table td,
.custom-table th {
    border-collapse: collapse;
    font-size: .875rem;
    text-align: center;
    padding: 6px;
}

.custom-table th {
    background-color: rgba(var(--gray-200), 0.3);
}
.custom-table tr:nth-child(even) {
    background-color: rgba(var(--gray-200), 0.3);
}
.custom-table tr:hover {
    transition: 0.2s ease;
    background-color: rgba(var(--gray-200), 0.3);
}

.dark .custom-table th {
    background-color: hsl(240deg 4% 14.71%);
}
.dark .custom-table tr:nth-child(even) {
    background-color: hsl(240deg 4% 14.71%);
}
.dark .custom-table tr:hover {
    transition: 0.2s ease;
    background-color: hsl(240deg 4% 14.71%);
}

.custom-table .flex-td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.custom-table .flex-td p {
    margin-bottom: 5px;
}


.color-green {
    background: #72e172!important;
}
.color-red {
    background: #ff7b7b!important;
}
.color-light-orange {
    background: #c0c0c0!important;
}


@media  (min-width: 768px) {
    /* make the header sticky*/
    .fi-ta-table thead {
        position: sticky !important;
        top: 0;
        z-index: 9;
    }

    /* opacity does not looks good in dark mode, so insert the corresponding bg color here */
    .fi-ta-table :is(:where(.dark) .dark\:bg-white\/5){
        background-color: rgb(36 36 39);
    }

    /* sset the height of content (table) */
    .fi-ta-content {
        height: calc(100vh - 20rem);
        position: relative;
    }

    /* fix filters and columns modal */
    .fi-dropdown-panel{
        z-index: 40 !important;
    }
}
/* Table sticky header end */

.fi-input-wrp-suffix .fi-icon-btn-icon {
    color: #f59e0b !important;
}

.fi-main {
    max-width: 100%!important;
}

.repeater-guides .fi-fo-repeater-item-header h4 {
    color: #fff !important;
}

.repeater-guides .fi-fo-repeater-item-header {
    background: #447ca1 !important;
}

.repeater-guides .fi-fo-repeater-item {
    border: 2px solid #447ca1 !important;
}

.repeater-guides .fi-btn {
    background: #447ca1 !important;
    color: #fff !important;
    transition: 0.2s ease-in-out;
}

.repeater-guides .fi-btn:hover {
    background: #1e4e6e !important;
    transition: 0.2s ease-in-out;
}