.fi-sidebar-nav{
    box-shadow: 0 1px 15px 4px #c3c3c3 !important;
    /* width: 17rem; */
    padding-right: 10px;
    background: rgb(245, 253, 247);
}
.fi-sidebar.fi-sidebar-open {
     width: 17rem;
}
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn {
    background-color: #84b127;
}
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-sidebar-item-label {
    color: #004300;
}
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-icon {
    color: #004300;
}
.fi-bg-color-400 {
    --bg: #b67d00;
}
.fi-text-color-900 {
    --text: #fff9fb;
}
.hover\:fi-bg-color-300 {
    --hover-bg: #3A5F0B;
}
/* .fi-btn:not(.fi-outlined) {
    background-color: #717070;
    color: #ffffff;
} */
/* @media (hover: hover) {
    .fi-btn:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
        background-color: #a1a1a1;
    }
} */
 .fi-btn-gray {
    background-color: #8B6F47 !important;
}
.fi-layout{
    background: #f5f5f5 !important;
}
.fi-ta-table>thead>tr {
    background-color: #6faf3a8a;
}
.fi-header-heading{
    color: #84b127;
}
.fi-ta-ctn .fi-pagination{
    background: #f2f2f2;   
    padding: 5px 20px;
}
.fi-ta-text-item.fi-size-sm, .fi-sc{line-height: 6px;}
.fi-simple-layout{
    /* min-height: 100vh; */
    background-image: url('/images/kiwi-bg.jpg');
    background-size: cover;        /* full screen */
    background-position: left left;   /* center image */
    background-repeat: no-repeat;
}

.fi-ac .fi-bg-color-400 {
    --bg: #468e3a !important;
}
.fi-simple-main{
    background-color: #ddeec8e6;
}
.hover\:fi-text-color-800 {
    --hover-text: #ecfdf7;
}
.fi-body{margin-bottom: 20px !important;}

/* create another */
.fi-btn[wire\:click="createAnother"] {
    background-color: #b1a33a !important; /* blue */
    color: #ffffff !important;
}
/* Hover */
.fi-btn[wire\:click="createAnother"]:hover {
    background-color: #9a8f32 !important; /* darker */
    border-color: #9a8f32 !important;
    color: #ffffff !important;
}

/* Cancel */

.fi-btn.fi-ac-btn-action[x-on\:click] {
    background-color: #a9ad9b !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}
.fi-btn.fi-ac-btn-action[x-on\:click]:hover {
    background-color: #d1d5db !important; /* darker gray */
    border-color: #9ca3af !important;
    color: #111827 !important;
}

@media (hover: hover) {
    .fi-sidebar-item.fi-sidebar-item-has-url>.fi-sidebar-item-btn:hover {
        background-color: #e0e6d5;
    }
}