.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;
}

.by-range tr.real-sagex-hours .sagex-hours {
    height: 2em;

    input {
        max-width: 3em;
        background: none;
        color: var(--light1);

        &:focus-visible {
            outline: solid var(--dark4) 1px;
        }

        &::-webkit-inner-spin-button {
            display: none;
        }

        &.hours {
            text-align: right;
        }
        &.minutes {
            text-align: left;
            max-width: 2em;
        }
    }

    &.saved {
        input {
            animation-name: sagex-saved;
            animation-duration: 1s;
        }
    }
}

@keyframes sagex-saved {
    0% {

    }

    10%, 60% {
        border-color: var(--accent);
    }

    100% {

    }
}