.by-range {
    display: flex;
    flex-direction: column;
    padding: 1.2em;
    border: solid var(--light4) 1px;
    gap: 1.2em;
}

.by-range .controls {
    display: flex;
    gap: 2.4em;
    align-items: center;
}

.by-range .controls .group {
    display: flex;
    gap: 0.8em;
    align-items: center;
}

.by-range .controls .group.hidden {
    display: none;
}

.by-range .controls button, .by-range .controls select {
    background-color: var(--dark3);
    color: var(--light1);
    padding: 0.4em 0.8em;
    border: none;
    cursor: pointer;
}

.by-range .controls button:hover, .by-range .controls select:hover {
    background-color: var(--dark4);
}

.by-range #list {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}

.by-range #list .row {
    display: flex;
    gap: 1.2em;
    padding: 0.4em 0.8em;
    background-color: var(--dark3);
}

.by-range #list .no-data {
    font-style: italic;
    padding: 0.4em 0.8em;
    background-color: var(--dark2);
}