.page.results {
    padding: var(--page-padding);

    #divFilter {
        display: grid;
        grid-template-columns: 400px 1fr;
        grid-auto-flow: column;
        margin-bottom: 32px;
    }

    section {
        width: calc(100vw - var(--menu-width) - 100px);   
        max-height: calc(100vh - 360px);
        overflow-y: auto;
    }

    & table {
        border-collapse: collapse;
        margin-bottom: 24px;
    }    
    
    & th.description, td.description {
        text-align: left;
    }    

    & td.svg svg {
        display: block;
    }       

    & th.number, td.number {
        text-align: right;
        width: 100px;
    }      

    #progressbars {
        display: none;
        grid-template-columns: repeat(2, 300px);
        width: 700px;
        justify-content: space-around;
        margin-block: 32px;

        & div {
            text-align: center;
            color: gray;
            font-style: italic;
        }        

        & div.bar svg {
            height: 40px;
        }
    } 

    & table.hours td.description, .hours th.description {
        width: 200px;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }        

    & table.tasks td.description, .tasks th.description {
        width: 350px;
        max-width: 350px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }    
}