@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&display=swap");
@import url("/fonts/filament/filament/inter/index.css");

:root {
    --topspot-font: Manrope, Inter, "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --topspot-black: #050505;
    --topspot-white: #ffffff;
    --topspot-page: #ffffff;
    --topspot-ink: #050505;
    --topspot-muted: #8b8b8b;
    --topspot-soft: #f7f7f7;
    --topspot-border: #dedede;
    --topspot-border-soft: #ececec;
    --topspot-success: #057333;
    --topspot-danger: #9d260f;
    --topspot-radius: 8px;
    color-scheme: light;
}

html,
body,
button,
input,
select,
textarea,
.fi-panel,
.fi-page,
.fi-topbar,
.fi-dropdown-panel,
.fi-modal,
.fi-section,
.fi-ta,
.fi-fo,
.fi-wi-widget,
.ts-dashboard-v2,
.admin-docs,
.finance-page,
.integrations,
.settings-hub,
.artist-page {
    font-family: var(--topspot-font) !important;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11" !important;
}

html,
body,
.fi-body,
.fi-layout,
.fi-main-ctn,
.fi-main,
main.fi-main,
.fi-page,
.fi-page-main,
.fi-page-content,
.grid-layout,
.fi-wi-widget,
.fi-wi-widget > div {
    background: var(--topspot-page) !important;
    color: var(--topspot-ink) !important;
}

body {
    overflow-x: hidden;
    font-family: var(--topspot-font) !important;
}

.fi-main,
main.fi-main {
    width: 100% !important;
    max-width: none !important;
    padding-inline: clamp(28px, 3vw, 42px) !important;
}

.fi-page-content {
    padding: 0 0 48px !important;
}

.fi-topbar-ctn,
.fi-topbar,
.fi-topbar nav,
.fi-topbar-start,
.fi-topbar-end {
    background: var(--topspot-black) !important;
    color: var(--topspot-white) !important;
    box-shadow: none !important;
}

.fi-topbar {
    min-height: 76px !important;
    height: 76px !important;
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: clamp(18px, 2.3vw, 34px) !important;
    border-bottom: 1px solid #111111 !important;
    padding: 0 clamp(26px, 3vw, 38px) !important;
    overflow: visible !important;
}

.fi-topbar-start {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(18px, 2vw, 30px) !important;
    padding: 0 !important;
}

.fi-topbar-start > a,
.fi-topbar-start .fi-logo {
    width: auto !important;
    min-width: 96px !important;
    max-width: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
}

.fi-logo img,
.fi-logo svg,
.fi-topbar-start img,
.fi-topbar-start .fi-logo img {
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    max-width: 104px !important;
    max-height: 58px !important;
    margin: 0 !important;
    object-fit: contain !important;
    filter: none !important;
}

.fi-topbar-nav-groups {
    height: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: clamp(16px, 1.45vw, 28px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

.fi-topbar-nav-groups > * {
    flex: 0 0 auto !important;
}

.fi-topbar-nav-groups > .fi-dropdown,
.fi-topbar-nav-groups > .fi-dropdown > .fi-dropdown-trigger {
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
}

.fi-topbar-nav-groups > .fi-dropdown > .fi-dropdown-trigger {
    cursor: pointer !important;
    transform: none !important;
}

.fi-topbar-item,
.fi-topbar-item a,
.fi-topbar-item button,
.fi-topbar-item-btn,
.fi-topbar-item-label,
.fi-topbar-group-trigger {
    height: 100% !important;
    min-height: 76px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #a7a7a7 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
}

.fi-topbar-item:hover,
.fi-topbar-item:hover a,
.fi-topbar-item:hover button,
.fi-topbar-item:hover .fi-topbar-item-btn,
.fi-topbar-item:hover .fi-topbar-item-label,
.fi-topbar-item:hover svg {
    color: #ffffff !important;
}

.fi-topbar-item.fi-active,
.fi-topbar-item.fi-active a,
.fi-topbar-item.fi-active .fi-topbar-item-btn,
.fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar-item a[aria-current="page"],
.fi-topbar-item button[aria-current="page"] {
    position: relative !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.fi-topbar-item.fi-active::after,
.fi-topbar-item:has(a[aria-current="page"])::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: #ffffff;
}

.fi-topbar-item svg,
.fi-topbar-group-toggle-icon {
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
}

.fi-topbar-item-icon {
    display: none !important;
}

.fi-topbar-end {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 0 !important;
}

.ts-topbar-rate {
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 6px !important;
    color: #f5f5f5 !important;
    box-shadow: none !important;
}

.ts-topbar-rate span,
.ts-topbar-rate strong {
    color: #f5f5f5 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

.fi-global-search,
.fi-global-search-field,
.fi-global-search-field .fi-input-wrp {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fi-global-search input,
.fi-global-search-field input {
    width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
}

.fi-global-search-field svg,
.fi-topbar .fi-icon-btn svg {
    color: #ffffff !important;
}

.fi-user-menu-trigger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid #4a4a4a !important;
    border-radius: 999px !important;
    background: #2b2b2b !important;
    color: #ffffff !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-align: center !important;
    overflow: hidden !important;
}

.fi-user-menu-trigger :is(.fi-avatar, .fi-avatar img, img) {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
}

.fi-user-menu-trigger :is(.fi-avatar, .fi-avatar-text, span) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
}

.fi-sidebar,
.fi-main-sidebar,
aside.fi-sidebar,
.fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar-close-collapse-sidebar-btn,
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn,
.fi-topbar-open-collapse-sidebar-btn,
.fi-topbar-close-collapse-sidebar-btn,
.fi-topbar-collapse-sidebar-btn-ctn {
    display: none !important;
}

.fi-header {
    width: 100% !important;
    max-width: none !important;
    align-items: end !important;
    margin: 42px 0 32px !important;
    padding: 0 !important;
}

.fi-header-heading {
    color: var(--topspot-ink) !important;
    font-size: clamp(34px, 3vw, 42px) !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.fi-header-subheading,
.fi-section-header-description,
.fi-wi-stats-overview-stat-description,
.fi-ta-empty-state-description,
.fi-fo-field-wrp-helper-text,
.fi-page p,
.fi-page small {
    color: var(--topspot-muted) !important;
}

.fi-header-subheading {
    margin-top: 12px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.fi-header-actions {
    align-items: center !important;
    gap: 12px !important;
}

.fi-btn,
.fi-ac-btn-action {
    min-height: 42px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.fi-btn-color-primary,
.fi-ac-btn-action.fi-color-primary,
.ts-create-action,
.ts-create-action .fi-btn,
.ts-create-action button {
    border: 1px solid var(--topspot-black) !important;
    background: var(--topspot-black) !important;
    color: #ffffff !important;
}

.fi-btn-color-gray,
.ts-period-action,
.ts-period-action .fi-btn,
.ts-period-action button {
    border: 1px solid var(--topspot-border) !important;
    background: #ffffff !important;
    color: var(--topspot-ink) !important;
}

.fi-link,
a.fi-link,
.fi-ac-action,
.fi-breadcrumbs a {
    color: var(--topspot-ink) !important;
}

.fi-dropdown-panel {
    border: 1px solid #dadada !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .18) !important;
    color: var(--topspot-ink) !important;
    overflow: hidden !important;
    min-width: 205px !important;
    z-index: 9999 !important;
}

.fi-dropdown-list,
.fi-dropdown-list-item,
.fi-dropdown-list-item-button {
    background: #ffffff !important;
    color: var(--topspot-ink) !important;
}

.fi-dropdown-list-item *,
.fi-dropdown-list-item svg,
.fi-dropdown-list-item-label,
.fi-dropdown-list-item-button *,
.fi-dropdown-list-item-button svg,
.fi-dropdown-list-item-button .fi-dropdown-list-item-label {
    color: var(--topspot-ink) !important;
}

.fi-dropdown-list-item,
.fi-dropdown-list-item-button {
    min-height: 38px !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible,
.fi-dropdown-list-item-button:hover {
    background: var(--topspot-black) !important;
    color: #ffffff !important;
}

.fi-dropdown-list-item:hover *,
.fi-dropdown-list-item:hover svg,
.fi-dropdown-list-item:focus-visible *,
.fi-dropdown-list-item:focus-visible svg,
.fi-dropdown-list-item-button:hover *,
.fi-dropdown-list-item-button:hover svg {
    color: #ffffff !important;
}

.fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
.fi-dropdown-list-item:focus-visible .fi-dropdown-list-item-label,
.fi-dropdown-list-item-button:hover .fi-dropdown-list-item-label {
    color: #ffffff !important;
}

.grid-layout,
.fi-wi-widgets,
.fi-wi-widgets-ctn {
    --cols: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: none !important;
}

.grid-layout > *,
.grid-layout-col,
.fi-wi-widget {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.fi-section,
.fi-wi-widget,
.fi-ta-ctn,
.fi-in-entry-wrp,
.fi-fo-field-wrp,
.finance-card,
.finance-panel,
.finance-upload,
.documents-card,
.documents-panel,
.documents-section,
.integration-card,
.integration-panel,
.settings-card,
.settings-panel,
.notification-card,
.notification-item,
.admin-card,
.admin-panel {
    border: 1px solid var(--topspot-border) !important;
    border-radius: var(--topspot-radius) !important;
    background: #ffffff !important;
    color: var(--topspot-ink) !important;
    box-shadow: none !important;
}

.fi-section-header-heading,
.fi-ta-header-heading,
.fi-page h1,
.fi-page h2,
.fi-page h3,
.fi-fo-field-wrp-label,
.fi-fo-field-wrp-label span,
.fi-ta-text,
.fi-in-text,
.finance-title,
.finance-panel-title,
.documents-title,
.integration-title,
.settings-title,
.notification-title {
    color: var(--topspot-ink) !important;
}

.fi-input-wrp,
.fi-select-input,
.fi-textarea,
.fi-input,
.finance-upload select,
.finance-upload input,
.finance-field select,
.finance-field input,
.finance-field textarea,
.integration-card input,
.integration-card select,
.integration-card textarea,
.settings-card input,
.settings-card select,
.settings-card textarea,
.documents-card input,
.documents-card select,
.documents-card textarea {
    border-color: var(--topspot-border) !important;
    background: #ffffff !important;
    color: var(--topspot-ink) !important;
    box-shadow: none !important;
}

.fi-input::placeholder,
.fi-global-search-field input::placeholder {
    color: #9a9a9a !important;
}

.fi-input-wrp:focus-within,
.fi-select-input:focus,
.fi-textarea:focus,
.fi-input:focus {
    border-color: var(--topspot-black) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08) !important;
}

.fi-ta-ctn,
.fi-ta-content,
.fi-ta-table,
.fi-ta-table thead,
.fi-ta-table tbody,
.fi-ta-table tfoot,
.fi-ta-table tr,
.fi-ta-header,
.fi-ta-footer,
.fi-ta-row {
    border-color: var(--topspot-border-soft) !important;
    background: #ffffff !important;
    color: var(--topspot-ink) !important;
}

.fi-ta-table th,
.fi-ta-table td {
    border-color: var(--topspot-border-soft) !important;
}

.fi-ta-header-cell-label,
.fi-ta-text,
.fi-ta-text-item-label {
    color: var(--topspot-ink) !important;
}

.fi-badge {
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 750 !important;
}

.fi-badge-color-success {
    background: #dff8e8 !important;
    color: #15914d !important;
}

.fi-badge-color-warning,
.fi-badge-color-primary {
    background: #fff2bb !important;
    color: #8c6510 !important;
}

.fi-badge-color-danger {
    background: #ffe2e2 !important;
    color: #c42b2b !important;
}

.fi-badge-color-gray,
.fi-badge-color-info {
    background: #f4f4f4 !important;
    color: #606060 !important;
}

.fi-tabs,
.fi-tabs-item {
    background: transparent !important;
    color: var(--topspot-muted) !important;
}

.fi-tabs-item-active,
.fi-tabs-item[aria-selected="true"] {
    color: var(--topspot-black) !important;
}

.fi-tabs-item-active::after,
.fi-tabs-item[aria-selected="true"]::after {
    background: var(--topspot-black) !important;
}

.fi-modal-window,
.fi-modal-header,
.fi-modal-content,
.fi-modal-footer {
    border-color: var(--topspot-border) !important;
    background: #ffffff !important;
    color: var(--topspot-ink) !important;
}

.ts-release-form-section,
.ts-release-form-section.fi-section,
.ts-release-form-section .fi-section-content,
.ts-release-form-section .fi-section-content-ctn {
    border-color: var(--topspot-border) !important;
    background: #f6f6f5 !important;
    color: var(--topspot-ink) !important;
    box-shadow: none !important;
}

.ts-release-form-section.fi-section {
    overflow: hidden !important;
    border-radius: 8px !important;
}

.ts-release-form-section .fi-section-header {
    border-color: var(--topspot-border) !important;
    background: #ffffff !important;
}

.ts-release-form-section .fi-section-header-heading {
    color: var(--topspot-ink) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
}

.ts-release-form-section .fi-section-content {
    padding: clamp(22px, 2vw, 30px) !important;
}

.ts-release-form-section .fi-fo-field-wrp-label,
.ts-release-form-section .fi-fo-field-wrp-label span,
.ts-release-form-section label,
.ts-release-form-section legend {
    color: var(--topspot-ink) !important;
    font-weight: 650 !important;
}

.ts-release-form-section .fi-fo-field-wrp-helper-text {
    color: #5f6470 !important;
    font-weight: 500 !important;
}

.ts-release-form-section .fi-input-wrp,
.ts-release-form-section .fi-select-input,
.ts-release-form-section .fi-textarea,
.ts-release-form-section .fi-fo-file-upload,
.ts-release-form-section .fi-fo-repeater-item,
.ts-release-form-section .fi-fo-repeater-item-header,
.ts-release-form-section .fi-fo-repeater-item-content {
    border-color: #e1e1e1 !important;
    background: #ffffff !important;
    color: var(--topspot-ink) !important;
    box-shadow: none !important;
}

.ts-release-form-section .fi-input,
.ts-release-form-section .fi-select-input,
.ts-release-form-section .fi-textarea-input {
    background: #ffffff !important;
    color: var(--topspot-ink) !important;
}

.ts-release-form-section .fi-input::placeholder,
.ts-release-form-section .fi-textarea-input::placeholder {
    color: #9ca0a8 !important;
}

.ts-release-form-section .fi-input-wrp:focus-within,
.ts-release-form-section .fi-select-input:focus,
.ts-release-form-section .fi-textarea:focus-within {
    border-color: #050505 !important;
    box-shadow: 0 0 0 1px #050505 !important;
}

.ts-release-form-section .fi-fo-toggle button[role="switch"] {
    background: #dedede !important;
}

.ts-release-form-section .fi-fo-toggle button[role="switch"][aria-checked="true"] {
    background: #050505 !important;
}

.fi-wi-widget:has(.ts-admin-stats),
.fi-wi-widget:has(.ts-admin-stats) > div,
.fi-wi-widget:has(.ts-admin-stats) .fi-section,
.fi-wi-widget:has(.ts-admin-stats) .fi-section-content,
.fi-wi-widget:has(.ts-admin-stats) .fi-section-content-ctn {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.fi-wi-widget:has(.ts-dashboard-v2),
.fi-wi-widget:has(.ts-dashboard-v2) > div,
.fi-wi-widget:has(.ts-dashboard-v2) .fi-section,
.fi-wi-widget:has(.ts-dashboard-v2) .fi-section-content,
.fi-wi-widget:has(.ts-dashboard-v2) .fi-section-content-ctn {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.ts-admin-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
}

.ts-admin-stat {
    position: relative !important;
    min-height: 168px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    gap: 12px !important;
    overflow: visible !important;
    border: 1px solid var(--topspot-border) !important;
    border-radius: var(--topspot-radius) !important;
    padding: 26px 24px 22px !important;
    background: #ffffff !important;
    color: var(--topspot-ink) !important;
    box-shadow: none !important;
}

.ts-admin-stat-icon {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--topspot-border) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #9a9a9a !important;
}

.ts-admin-stat-icon svg {
    width: 15px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.ts-admin-stat-main {
    grid-column: 1 !important;
    display: grid !important;
    gap: 11px !important;
    min-width: 0 !important;
    padding: 0 0 20px !important;
}

.ts-admin-stat-label {
    color: #989898 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 780 !important;
    text-transform: uppercase !important;
}

.ts-admin-stat-value {
    color: var(--topspot-ink) !important;
    font-size: clamp(24px, 1.72vw, 31px) !important;
    line-height: 1.04 !important;
    font-weight: 850 !important;
    font-variant-numeric: tabular-nums !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.ts-admin-stat-description {
    color: var(--topspot-muted) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

.ts-admin-stat-line {
    display: none !important;
}

.ts-admin-stat-delta {
    position: absolute !important;
    left: 24px !important;
    bottom: 22px !important;
    color: var(--topspot-success) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

@media (max-width: 1180px) {
    .fi-topbar-nav-groups {
        gap: 18px !important;
    }

    .ts-admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 840px) {
    .fi-topbar-nav-groups {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    .fi-main,
    main.fi-main {
        padding-inline: 16px !important;
    }

    .fi-header {
        align-items: start !important;
        flex-direction: column !important;
    }

    .fi-header-actions {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .ts-admin-stats {
        grid-template-columns: 1fr !important;
    }
}

/* Responsive stabilization for all admin pages. */
.fi-topbar-nav-groups::-webkit-scrollbar,
.fi-ta-content::-webkit-scrollbar,
.fi-ta-table-ctn::-webkit-scrollbar {
    display: none !important;
}

.fi-ta,
.fi-ta-ctn,
.fi-ta-content,
.fi-ta-table-ctn {
    min-width: 0 !important;
}

.fi-ta-content,
.fi-ta-table-ctn {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

.fi-ta-table,
.fi-ta table {
    width: 100% !important;
}

@media (max-width: 1280px) {
    .fi-topbar {
        gap: 16px !important;
        padding-inline: 20px !important;
    }

    .fi-topbar-nav-groups {
        gap: 14px !important;
    }

    .fi-topbar-item,
    .fi-topbar-item a,
    .fi-topbar-item button,
    .fi-topbar-item-btn,
    .fi-topbar-item-label,
    .fi-topbar-group-trigger {
        font-size: 13px !important;
    }
}

@media (max-width: 1024px) {
    .fi-topbar {
        height: 70px !important;
        min-height: 70px !important;
        align-items: center !important;
        gap: 12px !important;
        padding-inline: 16px !important;
    }

    .fi-topbar-start,
    .fi-topbar-end {
        height: 70px !important;
        flex: 0 0 auto !important;
    }

    .fi-topbar-start > a,
    .fi-topbar-start .fi-logo {
        min-width: 82px !important;
        max-width: 92px !important;
    }

    .fi-logo img,
    .fi-logo svg,
    .fi-topbar-start img,
    .fi-topbar-start .fi-logo img {
        height: 48px !important;
        max-height: 48px !important;
        max-width: 90px !important;
    }

    .fi-topbar-nav-groups {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-inline: 2px !important;
        scroll-snap-type: x proximity !important;
    }

    .fi-topbar-nav-groups > * {
        scroll-snap-align: start !important;
    }

    .fi-topbar-item,
    .fi-topbar-item a,
    .fi-topbar-item button,
    .fi-topbar-item-btn,
    .fi-topbar-item-label,
    .fi-topbar-group-trigger {
        min-height: 70px !important;
        white-space: nowrap !important;
    }

    .fi-main,
    main.fi-main {
        padding-inline: 20px !important;
    }

    .fi-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px !important;
        margin-top: 32px !important;
    }

    .fi-header-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .grid-layout,
    .fi-wi-widgets,
    .fi-wi-widgets-ctn {
        gap: 16px !important;
    }

    .fi-ta-table,
    .fi-ta table {
        min-width: 760px !important;
    }
}

@media (max-width: 720px) {
    .fi-topbar-end {
        gap: 10px !important;
    }

    .ts-topbar-rate {
        display: none !important;
    }

    .fi-global-search,
    .fi-global-search-field,
    .fi-global-search-field .fi-input-wrp {
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
    }

    .fi-user-menu-trigger {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .fi-main,
    main.fi-main {
        padding-inline: 14px !important;
    }

    .fi-page-content {
        padding-bottom: 34px !important;
    }

    .fi-header-heading {
        font-size: clamp(32px, 12vw, 42px) !important;
        overflow-wrap: anywhere !important;
    }

    .fi-header-actions .fi-btn,
    .fi-header-actions .fi-ac-btn-action {
        flex: 1 1 100% !important;
        justify-content: center !important;
    }

    .ts-admin-stat {
        min-height: 146px !important;
        padding: 22px 18px 20px !important;
    }

    .ts-admin-stat-delta {
        left: 18px !important;
        bottom: 18px !important;
    }
}

.fi-fo-select.ts-ma-platform-select .ts-control,
.fi-fo-select.ts-ma-platform-select .choices__inner,
.fi-fo-select.ts-ma-country-select .ts-control,
.fi-fo-select.ts-ma-country-select .choices__inner {
    max-height: 118px !important;
    min-height: 44px !important;
    overflow-y: auto !important;
    align-content: flex-start !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #050505 #eeeeee !important;
}

.fi-fo-select.ts-ma-platform-select .ts-control::-webkit-scrollbar,
.fi-fo-select.ts-ma-platform-select .choices__inner::-webkit-scrollbar,
.fi-fo-select.ts-ma-country-select .ts-control::-webkit-scrollbar,
.fi-fo-select.ts-ma-country-select .choices__inner::-webkit-scrollbar {
    width: 8px !important;
}

.fi-fo-select.ts-ma-platform-select .ts-control::-webkit-scrollbar-track,
.fi-fo-select.ts-ma-platform-select .choices__inner::-webkit-scrollbar-track,
.fi-fo-select.ts-ma-country-select .ts-control::-webkit-scrollbar-track,
.fi-fo-select.ts-ma-country-select .choices__inner::-webkit-scrollbar-track {
    background: #eeeeee !important;
    border-radius: 999px !important;
}

.fi-fo-select.ts-ma-platform-select .ts-control::-webkit-scrollbar-thumb,
.fi-fo-select.ts-ma-platform-select .choices__inner::-webkit-scrollbar-thumb,
.fi-fo-select.ts-ma-country-select .ts-control::-webkit-scrollbar-thumb,
.fi-fo-select.ts-ma-country-select .choices__inner::-webkit-scrollbar-thumb {
    background: #050505 !important;
    border: 2px solid #eeeeee !important;
    border-radius: 999px !important;
}

.fi-fo-select.ts-ma-platform-select .ts-control .item,
.fi-fo-select.ts-ma-platform-select .choices__list--multiple .choices__item,
.fi-fo-select.ts-ma-country-select .ts-control .item,
.fi-fo-select.ts-ma-country-select .choices__list--multiple .choices__item {
    max-width: 100% !important;
}

.ts-ma-distribution-panel {
    margin-block: 6px 2px !important;
    padding: 22px !important;
    border-radius: 18px !important;
    background-color: #050505 !important;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.48)),
        url("https://app.topspot.kz/images/fon-fon.png") !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2) !important;
}

.ts-ma-distribution-panel .fi-fo-field-label-content,
.ts-ma-distribution-panel .fi-ac-label,
.ts-ma-distribution-panel .fi-btn-label {
    color: #ffffff !important;
}

.ts-ma-distribution-panel .fi-fo-field-label-content {
    font-weight: 700 !important;
}

.ts-ma-distribution-panel .fi-ac,
.ts-ma-distribution-panel .fi-btn,
.ts-ma-distribution-panel .fi-link {
    color: #ffffff !important;
    opacity: 1 !important;
}

.ts-ma-distribution-panel .fi-ac *,
.ts-ma-distribution-panel .fi-link *,
.ts-ma-distribution-panel .fi-btn * {
    color: #ffffff !important;
    opacity: 1 !important;
}

.ts-ma-distribution-panel .fi-icon {
    color: #d4d4d4 !important;
}

.ts-ma-distribution-panel .fi-fo-field-content-col,
.ts-ma-distribution-panel .fi-sc-text,
.ts-ma-distribution-panel .fi-fo-field-help,
.ts-ma-distribution-panel p {
    color: #c7c7c7 !important;
}

.ts-ma-distribution-panel .fi-fo-select {
    background: #ffffff !important;
    border-radius: 10px !important;
}

.ts-ma-distribution-panel .fi-input-wrp,
.ts-ma-distribution-panel .fi-select-input,
.ts-ma-distribution-panel .ts-control,
.ts-ma-distribution-panel .choices__inner {
    background: #ffffff !important;
    color: #050505 !important;
    border-color: #e5e5e5 !important;
}

.ts-ma-distribution-panel .ts-control input,
.ts-ma-distribution-panel .choices__input {
    color: #050505 !important;
}

.ts-ma-distribution-panel .ts-control .item,
.ts-ma-distribution-panel .choices__list--multiple .choices__item {
    background: #f3f3f3 !important;
    color: #111111 !important;
    border-color: #d8d8d8 !important;
}

/* Filament v4 select dropdowns. */
.fi-select-input-ctn > .fi-dropdown-panel.fi-scrollable {
    max-height: 260px !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #050505 #eeeeee !important;
}

.fi-select-input-ctn > .fi-dropdown-panel.fi-scrollable::-webkit-scrollbar {
    width: 10px !important;
}

.fi-select-input-ctn > .fi-dropdown-panel.fi-scrollable::-webkit-scrollbar-track {
    background: #eeeeee !important;
}

.fi-select-input-ctn > .fi-dropdown-panel.fi-scrollable::-webkit-scrollbar-thumb {
    background: #050505 !important;
    border: 2px solid #eeeeee !important;
    border-radius: 999px !important;
}

.fi-select-input-search-ctn {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    background: #ffffff !important;
}