:root {
    --ipl-yellow-100: #fff6cc;
    --ipl-yellow-300: #f4c93c;
    --ipl-yellow-500: #a66b00;
}

.fi-logo {
    height: 2.75rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}

.fi-simple-layout .fi-logo {
    height: 4.5rem;
    max-width: 16rem;
}

.fi-sidebar-item > .fi-sidebar-item-btn,
.fi-sidebar-group-button {
    border-radius: 0.9rem;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: color-mix(in srgb, var(--ipl-yellow-300) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ipl-yellow-300) 24%, transparent);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon svg,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon path {
    color: var(--ipl-yellow-500);
}

.fi-btn.fi-btn-color-primary,
.fi-badge.fi-color-primary,
.fi-tabs-item.fi-active {
    --c-400: var(--ipl-yellow-300);
    --c-500: var(--ipl-yellow-300);
    --c-600: #dfb01c;
}

.fi-topbar-open-sidebar-btn:hover,
.fi-topbar-open-collapse-sidebar-btn:hover,
.fi-topbar-close-sidebar-btn:hover,
.fi-topbar-close-collapse-sidebar-btn:hover {
    color: var(--ipl-yellow-500);
    background: color-mix(in srgb, var(--ipl-yellow-300) 12%, transparent);
}

.fi-simple-header-heading {
    color: #3f2b00;
}

.fi-simple-header-subheading {
    color: #75581b;
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: color-mix(in srgb, var(--ipl-yellow-300) 16%, transparent);
    border-color: color-mix(in srgb, var(--ipl-yellow-300) 28%, transparent);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon svg,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon path {
    color: #ffd95c;
}

.dark .fi-simple-header-heading {
    color: #fff4bf;
}

.dark .fi-simple-header-subheading {
    color: #d3c28b;
}