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

.monthly .controls {
    display: flex;
    gap: 1.2em;
    align-items: center;
}

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

.monthly .controls button:hover {
    background-color: var(--dark4);
}

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

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

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