.day
{
    display: block;
    margin-bottom: calc(3 * var(--margin));
}
    .day > .title,
    .day > .total
    {
        display: flex;
        align-items: center;
        padding-top: var(--margin);
        padding-bottom: var(--margin);
        color: white;
        height: var(--row-size);
    }
    .day > .title
    {
        display: grid;
        grid-template-columns: 1.5fr 0.5fr 30px;
        box-sizing: border-box;
        background-color: var(--color_blue_lt);
        border-top-left-radius: calc(2 * var(--margin));
        border-top-right-radius: calc(2 * var(--margin));
        padding-left: calc(2 * var(--margin));
        padding-right: calc(2 * var(--margin));
        font-size: var(--font-scale);
        background-size: 20px;
        background-position-x: 95%;
        background-position-y: center;
        background-repeat: no-repeat;
        height: var(--row-size);
    }
        .day > .title > :nth-child(1)
        {
            /* Date */
            text-shadow: 1px 1px var(--margin) black;
        }
        .day > .title > :nth-child(2)
        {
            /* hours */
            color: transparent;
            text-shadow: unset;
        }
        .day > .title > .arrow
        {
            /* arrow */
            height: 100%;
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center center;
        }
    .day > .total
    {
        /* Since the text needs to be manipulated it has to be in both classes */
        display:grid;
        grid-template-columns: 2fr 0fr 0.8fr;
        background-color: var(--color_black);
        border-bottom-left-radius: calc(2 * var(--margin));
        border-bottom-right-radius: calc(2 * var(--margin));
        text-shadow: 1px 1px var(--margin) black;
    }
        .day > .total > .nighttime,
        .day > .total > .daytime
        {
            padding-left: 55px;
            background-size: 35px;
        }
        .day > .total > :nth-child(3)
        {
            font-weight: bold;
            text-align: right;
            padding-right: calc(2 * var(--margin));
        }

.day[data-collapsed='1'] .entries,
.day[data-collapsed='1'] .total
{
    display: none !important;
}
    .day[data-collapsed='1'] .title > div
    {
    }
    .day[data-collapsed='1'] .title > :nth-child(2)
    {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 95%;
        background-color: var(--color_blue);
        font-weight: bold;
        color: white;
        text-align: center;
        border-radius: calc(2 * var(--margin));
    }

.day[data-collapsed='1'] .title
{
    border-radius: calc(2 * var(--margin));
}