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

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

    x-text {
        display: inline-block;
    }

    section {
        width: calc(100vw - var(--menu-width) - 100px);   
        max-height: calc(100vh - 400px);
        overflow-x: auto;     
    }
    
    & table {
        border-collapse: collapse;
        margin-bottom: 24px;
        width: 1000px;
    }    


    & tbody tr:nth-child(even) {
        background: whitesmoke;
    }
    
    & th, td {
        padding-inline: 10px;
        padding-block: 5px;
        text-align: left;
        box-sizing: border-box;        
    }    
    
    & th {
        border-bottom: 3px solid gray;        
    }
    
    & td {
        border: 1px solid gray;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        user-select: none;
        cursor: pointer;
    }

    & th.description, td.description {
        width: 200px;
    }

    & td.overflow {
        background: var(--meco-red);
        color: white;
    }      

    & th.svg, td.svg {
        vertical-align: middle;
        width: 400px;
    }
    
    & 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.detail th, table.detail td {
    padding-inline: 20px !important;
}