/* Fixed browser-footer horizontal scrollbar (synced to .perfecto-hscroll-host). */

.perfecto-sticky-hscroll {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0;
    height: 14px;
    z-index: 1050;
    overflow-x: auto;
    overflow-y: hidden;
    display: none;
    box-sizing: border-box;
    background: rgba(248, 250, 252, 0.96);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
    /* Keep above page chrome but below modal dialogs (Radzen ~2000+). */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

.perfecto-sticky-hscroll.is-visible {
    display: block;
}

.perfecto-sticky-hscroll-spacer {
    /* Tall enough to create a real scrollport; 1px can fail to show a thumb in some browsers. */
    height: 14px;
    pointer-events: none;
}

.perfecto-sticky-hscroll::-webkit-scrollbar {
    height: 12px;
}

.perfecto-sticky-hscroll::-webkit-scrollbar-track {
    background: #e2e8f0;
}

.perfecto-sticky-hscroll::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 6px;
    border: 2px solid #e2e8f0;
}

.perfecto-sticky-hscroll::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Hosts get a little bottom inset so the last row/card isn't fully covered by the fixed bar. */
.perfecto-hscroll-host.perfecto-hscroll-host-active {
    scroll-padding-bottom: 14px;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .perfecto-sticky-hscroll {
        height: calc(14px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}