/* Table */
.results-table-body {
    transition: all 0.2s ease-in; 
}
.results-table-body.htmx-swapping {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
#logo-background {
    opacity: 0;
    animation: fadeIn 5s forwards;
}
@keyframes fadeIn {
    to {
        opacity: 0.5;
    }
}
#logo-background img {
    opacity: 0.5;
}

/* Wordcount slider */
.custom-form-range {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    z-index: 5; /* Ensure the sliders are on top */
}
.custom-form-range::-webkit-slider-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    z-index: 3; /* Ensure the thumbs are on top */
    position: relative; /* Required for z-index to take effect */
}
.custom-form-range::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    z-index: 3; /* Ensure the thumbs are on top */
    position: relative; /* Required for z-index to take effect */
}
.slider-track {
    position: absolute;
    width: 100%;
    height: 1px;
    top: 7px;
    background: #939393;
    transform: translateY(-50%);
    z-index: 2; /* Ensure the track is below the thumbs but above the background */
}
.slider-track::before {
    content: '';
    position: absolute;
    height: 100%;
    background: #007bff;
    z-index: 1; /* Ensure the filled track is below the thumbs */
}