#settings {
    display: flex;
    gap: 3em;
    width: calc(100vw - 2 * var(--body-margin-horizontal));
    height: var(--settings-height);
    position: relative;
}

#videofps > input {
    width: 2em;
}
#videofpsRealTime > input {
    width: 2em;
}
#videooffset > input {
    width: 2em;
}

.sliderwithdisplay > div {
    display: inline-block;
    position: relative;
}
.sliderwithdisplay > div > span {
    position: absolute;
    z-index: 1;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
    top: -.1em;
    right: 0;
    left: 0;
    font-size: .7em;
    text-align: center;
}
.sliderwithdisplay > div > input {
    position: relative;
    bottom: -.6em;
    width: 100%;
}
#confidenceslider > div {
    width: 10em;
}
#detection_boxes_opacity > div {
    width: 3em;
}
#videospeedselect > div {
    width: 5em;
}

#offset > div {
    width: 5em;
}

#settings_more {
    padding: 0 1em;
    position: absolute;
    right: 0;
    height: 100%;
    user-select: none;
}
#settings_more > input {
    display: none;
}
#settings_more:has(> input:checked) {
    background-color: silver;
}
#settings_more > input:not(:checked) + div {
    display: none;
}
#settings_more > div {
    position: absolute;
    width: calc(100vw
        - 2 * var(--body-margin-horizontal)
        - 2 * var(--main-border-width));
    height: var(--video-minimal-height);
    right: 0;
    top: var(--settings-height);
    z-index: 2;
    background-color: silver;
    display: flex;
    flex-direction: column;
    gap: .7em;
}