:host, :root {
    --w-color-primary-hue: 0;
    --w-color-primary-saturation: 80%;
    --w-color-primary-lightness: 35%;
    --w-color-primary: hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness));

    --w-color-primary-200-hue: calc(var(--w-color-primary-hue) + 2);
    --w-color-primary-200-saturation: calc(var(--w-color-primary-saturation) - 5%);
    --w-color-primary-200-lightness: calc(var(--w-color-primary-lightness) + 8%);
    --w-color-primary-200: hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness));

    --w-color-secondary-hue: 350;
    --w-color-secondary-saturation: 95%;
    --w-color-secondary-lightness: 40%;
    --w-color-secondary: hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness));

    --w-color-secondary-50-hue: calc(var(--w-color-secondary-hue) - 1);
    --w-color-secondary-50-saturation: calc(var(--w-color-secondary-saturation) - 40%);
    --w-color-secondary-50-lightness: calc(var(--w-color-secondary-lightness) + 60%);
    --w-color-secondary-50: hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness));

    --w-color-secondary-75-hue: calc(var(--w-color-secondary-hue) + 1);
    --w-color-secondary-75-saturation: calc(var(--w-color-secondary-saturation) - 30%);
    --w-color-secondary-75-lightness: calc(var(--w-color-secondary-lightness) + 30%);
    --w-color-secondary-75: hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness));

    --w-color-secondary-100-hue: var(--w-color-secondary-hue);
    --w-color-secondary-100-saturation: var(--w-color-secondary-saturation);
    --w-color-secondary-100-lightness: calc(var(--w-color-secondary-lightness) + 10%);
    --w-color-secondary-100: hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness));

    --w-color-secondary-400-hue: calc(var(--w-color-secondary-hue) + 1);
    --w-color-secondary-400-saturation: var(--w-color-secondary-saturation);
    --w-color-secondary-400-lightness: calc(var(--w-color-secondary-lightness) - 8%);
    --w-color-secondary-400: hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness));

    --w-color-secondary-600-hue: calc(var(--w-color-secondary-hue) + 2);
    --w-color-secondary-600-saturation: var(--w-color-secondary-saturation);
    --w-color-secondary-600-lightness: calc(var(--w-color-secondary-lightness) - 15%);
    --w-color-secondary-600: hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness));

    --w-color-surface-menus: var(--w-color-primary);
    --w-color-surface-menu-item-active: var(--w-color-primary-200);
    --w-color-surface-tooltip: var(--w-color-primary-200);

    --w-color-surface-button-default: var(--w-color-secondary);
    --w-color-surface-button-hover: var(--w-color-secondary-400);
    --w-color-surface-button-outline-hover: var(--w-color-secondary-50);

    --w-color-text-label: var(--w-color-primary);
    --w-color-text-link-default: var(--w-color-secondary);
    --w-color-text-link-hover: var(--w-color-secondary-400);
    --w-color-text-button-outline-default: var(--w-color-secondary);
    --w-color-text-button-outline-hover: var(--w-color-secondary-400);
    --w-color-text-highlight: var(--w-color-secondary-75);
    --w-color-icon-primary: var(--w-color-primary);
    --w-color-icon-primary-hover: var(--w-color-primary-200);
    --w-color-icon-secondary-hover: var(--w-color-primary-200);
    --w-color-border-button-outline-default: var(--w-color-secondary);
    --w-color-border-button-outline-hover: var(--w-color-secondary-400);

    color-scheme: light;
}



#listing-results{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: grab; /* For smooth scrolling on iOS */
    width: 100%;
    min-height:85vh;
}

#listing-results table {
    width: 100%;
    border-collapse: collapse;
}

#listing-results th, #listing-results td {
    padding: 8px 12px;
    text-align: left;
}

@media (max-width: 600px) {
    #listing-results th, #listing-results td {
        white-space: nowrap; /* Prevent table cell content from wrapping */
    }
}

.w-field__input select, .w-field__input input[type="text"]{
    width: 100%;
}