.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);
}
*/

.by-range .tables {
    display: flex;
}

.by-range .tables table {
    border-collapse: collapse;
}

.by-range .tables tr {
    height: 2em;
}

.by-range .tables td {
    padding: 0 0.4em;
    min-width: 3em;
}

#headers-table th {
    text-align: right;
    padding: 0 0.8em;
}

#projects-table th {
    text-align: center;
    padding: 0 0.4em;
}

#projects-table td {
    text-align: right;
}

.by-range tr.project-nums {
    border-bottom: solid var(--light1) 2px;
}

#projects-table th, #projects-table td {
    border-left: solid var(--light4) 1px;
}