@font-face {
    font-family: 'Varien';
    src: local('Varien'), local('Varien Regular');
    font-display: swap;
}

@font-face {
    font-family: 'Damaris';
    src: local('Damaris'), local('Damaris Regular');
    font-display: swap;
}

:root {
    --gotime-color-cyan: #33a6de;
    --gotime-color-purple: #9c9bf6;
    --gotime-color-navy: #021652;
    --gotime-color-blue: #0e3b76;
    --gotime-color-offwhite: #f6eee4;
    --gotime-color-black: #000000;
    --gotime-space-2: 0.5rem;
    --gotime-space-3: 0.75rem;
    --gotime-space-4: 1rem;
    --gotime-space-6: 1.5rem;
    --gotime-space-8: 2rem;
    --gotime-radius-sm: 12px;
    --gotime-radius-md: 16px;
    --gotime-radius-lg: 20px;
    --gotime-shadow-soft: 0 16px 36px rgba(2, 22, 82, 0.36);
    --gotime-shadow-glow: 0 0 0 1px rgba(51, 166, 222, 0.2), 0 0 36px rgba(51, 166, 222, 0.22);
    --gotime-glow-cyan: 0 0 28px rgba(51, 166, 222, 0.35);
    --gotime-gradient-bg: linear-gradient(130deg, #021652 8%, #0e3b76 56%, #33a6de 100%);
    --gotime-gradient-surface: linear-gradient(145deg, rgba(2, 22, 82, 0.88) 5%, rgba(11, 50, 111, 0.85) 55%, rgba(51, 166, 222, 0.42) 100%);
    --gotime-gradient-action: linear-gradient(110deg, #0e3b76 0%, #33a6de 50%, #9c9bf6 100%);
    --gotime-gradient-kpi: linear-gradient(110deg, #f6eee4 0%, #9c9bf6 45%, #33a6de 100%);
    --gotime-transition: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --gotime-font-heading: 'Varien', 'Arial Black', 'Segoe UI', sans-serif;
    --gotime-font-body: 'Damaris', 'Inter', 'Segoe UI', sans-serif;
}

.fi-body {
    position: relative;
    background: var(--gotime-gradient-bg);
    color: rgba(246, 238, 228, 0.96);
    font-family: var(--gotime-font-body);
    overflow-x: hidden;
}

.fi-body::before,
.fi-body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.fi-body::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(51, 166, 222, 0.28) 0%, rgba(51, 166, 222, 0) 42%),
        radial-gradient(circle at 82% 8%, rgba(156, 155, 246, 0.2) 0%, rgba(156, 155, 246, 0) 34%);
}

.fi-body::after {
    background:
        radial-gradient(circle at 50% 108%, rgba(2, 22, 82, 0.52) 20%, rgba(2, 22, 82, 0) 62%);
}

.fi-main-ctn,
.fi-main,
.fi-topbar,
.fi-sidebar {
    position: relative;
    z-index: 1;
}

.fi h1,
.fi h2,
.fi h3,
.fi h4,
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-wi-stats-overview-header-heading {
    font-family: var(--gotime-font-heading);
    letter-spacing: 0.015em;
}

.fi-sidebar,
.fi-sidebar-header,
.fi-topbar {
    background:
        linear-gradient(160deg, rgba(2, 22, 82, 0.9) 12%, rgba(11, 50, 111, 0.86) 62%, rgba(51, 166, 222, 0.28) 100%) !important;
    border-color: rgba(51, 166, 222, 0.25) !important;
    backdrop-filter: blur(16px);
}

.fi-topbar {
    box-shadow: 0 12px 30px rgba(2, 22, 82, 0.24);
}

.fi-sidebar-item-button,
.fi-topbar-item-button {
    transition: transform var(--gotime-transition), box-shadow var(--gotime-transition), background-color var(--gotime-transition), color var(--gotime-transition);
}

.fi-sidebar-item-button:hover,
.fi-topbar-item-button:hover {
    background: rgba(51, 166, 222, 0.12) !important;
    transform: translateY(-1px);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-topbar-item.fi-active .fi-topbar-item-button {
    background: var(--gotime-gradient-action) !important;
    box-shadow: var(--gotime-glow-cyan);
    color: var(--gotime-color-offwhite) !important;
}

.fi-tabs {
    gap: 0.5rem;
}

.fi-tabs-item {
    position: relative;
    border-radius: 999px !important;
    transition: transform var(--gotime-transition), background-color var(--gotime-transition), box-shadow var(--gotime-transition);
}

.fi-tabs-item::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 2px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(156, 155, 246, 0) 0%, rgba(51, 166, 222, 0.95) 40%, rgba(156, 155, 246, 0.95) 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--gotime-transition);
}

.fi-tabs-item.fi-active,
.fi-tabs-item-active {
    background: linear-gradient(115deg, rgba(14, 59, 118, 0.9) 0%, rgba(51, 166, 222, 0.38) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(51, 166, 222, 0.35), 0 6px 18px rgba(2, 22, 82, 0.3);
}

.fi-tabs-item.fi-active::after,
.fi-tabs-item-active::after {
    transform: scaleX(1);
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border: 1px solid transparent !important;
    border-radius: var(--gotime-radius-md) !important;
    background:
        linear-gradient(140deg, rgba(2, 22, 82, 0.84) 8%, rgba(11, 50, 111, 0.8) 65%, rgba(51, 166, 222, 0.26) 100%) padding-box,
        linear-gradient(125deg, rgba(51, 166, 222, 0.48) 0%, rgba(156, 155, 246, 0.4) 48%, rgba(246, 238, 228, 0.2) 100%) border-box !important;
    box-shadow: var(--gotime-shadow-soft);
    backdrop-filter: blur(12px);
}

.fi-wi-chart .fi-section {
    animation: gotime-panel-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fi-section-header,
.fi-section-content,
.fi-ta-header,
.fi-ta-content,
.fi-ta-pagination {
    color: rgba(246, 238, 228, 0.95) !important;
}

.fi-section:hover,
.fi-ta-ctn:hover,
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: var(--gotime-shadow-soft), var(--gotime-shadow-glow);
}

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    animation: gotime-panel-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0, rgba(156, 155, 246, 0.18), transparent 42%);
    pointer-events: none;
}

.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-description {
    color: rgba(246, 238, 228, 0.78) !important;
}

.fi-wi-stats-overview-stat-value {
    position: relative;
    font-family: var(--gotime-font-heading);
    font-size: clamp(2rem, 2.1vw, 2.75rem) !important;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--gotime-color-offwhite);
    text-shadow: 0 0 20px rgba(51, 166, 222, 0.42);
    background: var(--gotime-gradient-kpi);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gotime-kpi-glow 2.8s ease-in-out infinite;
}

.fi-wi-stats-overview-stat-value::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 30%, rgba(246, 238, 228, 0.48) 50%, transparent 72%);
    transform: translateX(-140%);
    animation: gotime-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}

.fi-btn {
    border-radius: var(--gotime-radius-sm) !important;
    transition: transform var(--gotime-transition), box-shadow var(--gotime-transition), filter var(--gotime-transition), background-color var(--gotime-transition);
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined),
.fi-btn.fi-btn-color-primary:not(.fi-btn-outlined) {
    border: 1px solid rgba(246, 238, 228, 0.22) !important;
    background: var(--gotime-gradient-action) !important;
    color: var(--gotime-color-offwhite) !important;
    box-shadow: 0 10px 20px rgba(2, 22, 82, 0.34), 0 0 24px rgba(51, 166, 222, 0.22);
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined):hover,
.fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 14px 26px rgba(2, 22, 82, 0.42), 0 0 30px rgba(51, 166, 222, 0.34);
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined):active,
.fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):active {
    transform: translateY(0);
    filter: brightness(0.94);
}

.fi-btn.fi-btn-outlined {
    border-color: rgba(51, 166, 222, 0.38) !important;
    color: rgba(246, 238, 228, 0.94) !important;
    background: rgba(2, 22, 82, 0.42) !important;
}

.fi-input-wrp,
.choices__inner,
.fi-dropdown-panel,
.fi-fo-date-time-picker-panel,
.fi-modal-window {
    border-radius: var(--gotime-radius-sm) !important;
    border-color: rgba(51, 166, 222, 0.34) !important;
    background: linear-gradient(155deg, rgba(2, 22, 82, 0.92) 10%, rgba(11, 50, 111, 0.9) 78%) !important;
    box-shadow: 0 8px 22px rgba(2, 22, 82, 0.24);
}

.fi-input-wrp {
    transition: box-shadow var(--gotime-transition), border-color var(--gotime-transition), transform var(--gotime-transition);
}

.fi-input-wrp:hover {
    border-color: rgba(51, 166, 222, 0.52) !important;
}

.fi-input-wrp:focus-within {
    border-color: rgba(156, 155, 246, 0.68) !important;
    box-shadow: 0 0 0 1px rgba(156, 155, 246, 0.55), 0 0 22px rgba(51, 166, 222, 0.22);
}

.fi-input,
.fi-fo-date-time-picker-display-text-input,
.fi-ta-text-input,
.fi-ta-select,
.fi-fo-rich-editor-editor {
    color: rgba(246, 238, 228, 0.95) !important;
}

.fi-input::placeholder,
.fi-fo-date-time-picker-display-text-input::placeholder {
    color: rgba(246, 238, 228, 0.58) !important;
}

.fi-ta-header-ctn,
.fi-ta-content,
.fi-ta-summary-header-row,
.fi-ta-group-header,
.fi-ta-filter-indicators,
.fi-ta-selection-indicator {
    background: transparent !important;
    border-color: rgba(51, 166, 222, 0.16) !important;
}

.fi-ta-header-cell-label,
.fi-ta-summary-row-heading,
.fi-ta-text-item-label {
    color: rgba(246, 238, 228, 0.96) !important;
}

.fi-ta-row {
    transition: transform var(--gotime-transition), background-color var(--gotime-transition);
}

.fi-ta-row:hover {
    background: linear-gradient(90deg, rgba(51, 166, 222, 0.1) 0%, rgba(156, 155, 246, 0.08) 100%) !important;
}

.fi-ta-empty-state-icon-ctn {
    background: rgba(51, 166, 222, 0.22) !important;
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
    background: rgba(51, 166, 222, 0.14) !important;
}

.gotime-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    overflow: hidden;
}

.gotime-brand-logo-image {
    display: block;
    height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(51, 166, 222, 0.35));
}

.gotime-brand-logo-fallback {
    display: none;
    align-items: center;
    font-family: var(--gotime-font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: rgba(246, 238, 228, 0.98);
}

.gotime-map-marker,
.mapboxgl-marker .gotime-marker,
.leaflet-marker-icon.gotime-marker {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: radial-gradient(circle at 34% 30%, #f6eee4 0%, #9c9bf6 35%, #33a6de 70%, #021652 100%);
    box-shadow: 0 0 0 2px rgba(2, 22, 82, 0.65), 0 0 22px rgba(51, 166, 222, 0.65);
    transition: transform var(--gotime-transition), box-shadow var(--gotime-transition);
}

.gotime-map-marker.is-selected,
.mapboxgl-marker .gotime-marker.is-selected,
.leaflet-marker-icon.gotime-marker.is-selected {
    transform: scale(1.14);
    box-shadow: 0 0 0 2px rgba(246, 238, 228, 0.58), 0 0 30px rgba(51, 166, 222, 0.88);
}

.fi-section-header-description,
.fi-ta-header-description,
.fi-fo-field-wrp-helper-text {
    color: rgba(246, 238, 228, 0.72) !important;
}

@keyframes gotime-kpi-glow {
    0%,
    100% {
        text-shadow: 0 0 14px rgba(51, 166, 222, 0.28);
    }

    50% {
        text-shadow: 0 0 24px rgba(51, 166, 222, 0.52);
    }
}

@keyframes gotime-shimmer {
    0%,
    25% {
        transform: translateX(-140%);
    }

    68%,
    100% {
        transform: translateX(150%);
    }
}

@keyframes gotime-panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .fi-main {
        padding-left: var(--gotime-space-4) !important;
        padding-right: var(--gotime-space-4) !important;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: clamp(1.75rem, 7vw, 2.2rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-section,
    .fi-ta-ctn,
    .fi-wi-stats-overview-stat,
    .fi-sidebar-item-button,
    .fi-topbar-item-button,
    .fi-tabs-item,
    .gotime-map-marker,
    .mapboxgl-marker .gotime-marker,
    .leaflet-marker-icon.gotime-marker {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .fi-wi-stats-overview-stat-value::after {
        content: none;
    }
}