/* metrics */
    
    .main-metrics ul{
        display: flex;
        flex-direction: row;
        margin: 0;
        overflow: auto;
        gap: 1em;
    }
    
    .main-metrics .metric-box{
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 1em;
        padding: .5em .8em;
        flex-basis: 25%;
        min-width: max-content;
        flex-grow: 1;
        line-height: 1.1;
        gap: .5em;
    }
    
    .main-metrics .metric-box i{
        font-size: 3em;
    }
    
    .main-metrics .val-metric{
        font-size: 2em;
        font-weight: 600;
    }
    
    /* variations */
    
    .main-metrics .pending-records, .main-metrics .new-records, .statuses .new-record{
        background-color: #cfffcf;
        color: #3eb73e;
    }
    
    .main-metrics .pending-records .name-metric, .main-metrics .new-records .name-metric{
        color: #56ab42;
    }
    
    .main-metrics .total-records{
        background-color: #cff7ff;
        color: #5792bd;
    }
    
    .main-metrics .total-records .name-metric{
        color: #649bc3;
    }
    
    .main-metrics .records-waiting, .statuses .alert-record{
        background-color: #f1f1b7;
        color: #b4b73e;
    }
    
    .main-metrics .records-waiting .name-metric{
        color: #95ab42;
    }
    
    .main-metrics .records-forgotten, .statuses .warning-record{
        background-color: #ffcfcf;
        color: #d96767;
    }
    
    .main-metrics .records-forgotten .name-metric{
        color: #c75f5e;
    }
    
    .main-metrics .records-in-progress, .statuses .record-in-progress{
        background-color: #afe7dc;
        color: #52a997;
    }
    
    .main-metrics .records-in-progress .name-metric{
        color: #55a796
    }
    
    .main-metrics .possibly-repeated, .statuses .repeated-record{
        background-color: #efcfff;
        color: #b73ea1;
    }
    
    .main-metrics .possibly-repeated .name-metric{
        color: #b3359c;
    }