:root {
    --dampfi-gold: #cab474;
    --dampfi-ink: #211c10;
    --dampfi-paper: #f9f6ee;
    --dampfi-mist: #f3efe0;
    --dampfi-on-dark: #f5f2e6;
    --dampfi-raised: #fff;
    --dampfi-surface: var(--dampfi-paper);
    --dampfi-text: var(--dampfi-ink);
    --dampfi-muted: #5c5344;
    --dampfi-line: #e6dcc4;
}

.dark {
    --dampfi-raised: #2a2418;
    --dampfi-surface: var(--dampfi-ink);
    --dampfi-text: var(--dampfi-on-dark);
    --dampfi-muted: #cfc6b0;
    --dampfi-line: #3a3326;
}

.fi-body {
    background-color: var(--dampfi-paper);
    color: var(--dampfi-ink);
}

.dark .fi-body {
    background-color: var(--dampfi-ink);
    color: var(--dampfi-on-dark);
}

.fi-topbar {
    background-color: var(--dampfi-raised);
    box-shadow: inset 0 -2px 0 var(--dampfi-gold);
}

.dark .fi-topbar {
    background-color: var(--dampfi-ink);
    color: var(--dampfi-on-dark);
}

.fi-sidebar {
    background-color: var(--dampfi-paper);
}

.dark .fi-sidebar {
    background-color: var(--dampfi-ink);
}

@media (min-width: 64rem) {
    .fi-sidebar,
    .dark .fi-sidebar {
        background-color: transparent;
    }
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--dampfi-mist);
}

.dark .fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: #3a3324;
}

.dark .fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--dampfi-gold);
}

.fi-simple-layout {
    background-color: var(--dampfi-paper);
}

.dark .fi-simple-layout {
    background-color: var(--dampfi-ink);
}

.fi-simple-main {
    background-color: var(--dampfi-raised);
    color: var(--dampfi-ink);
}

.dark .fi-simple-main {
    background-color: var(--dampfi-raised);
    color: var(--dampfi-on-dark);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    background-color: #fff;
}

.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    background-color: var(--dampfi-raised);
}

.fi-btn.fi-color-primary:not(.fi-outlined) {
    --bg: var(--dampfi-gold);
    --hover-bg: #b7a15f;
    --text: var(--dampfi-ink);
    --hover-text: var(--dampfi-ink);
    --dark-bg: var(--dampfi-gold);
    --dark-hover-bg: #b7a15f;
    --dark-text: var(--dampfi-ink);
    --dark-hover-text: var(--dampfi-ink);
}

.fi-simple-layout .dampfi-logo {
    display: block;
    width: auto;
    height: 100%;
}

.fi-topbar .fi-logo,
.fi-sidebar .fi-logo {
    height: 40px !important;
}

.fi-topbar .dampfi-logo,
.fi-sidebar .dampfi-logo {
    display: block;
    width: auto;
    height: 40px;
}

.erp-guest-preferences {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}