#dashboardPanel .dashboard-portlets,
#dashboardPanel .qualityscore-portlets,
#dashboardPanel .dashboard-portlets-table,
#dashboardPanel .statistics-portlets {
    & .dashboard-portlet {
        height: 220px;
    }
    & .statistics-portlet {
        height: 230px;
    }
    & .dashboard-portlet-extended {
        grid-area: extended;
    }
    & .dashboard-portlet, .dashboard-portlet-extended  {
        background-color: var(--jl-bg-card);
        border-radius: 6px;
        border: var(--jl-border-card);

        & canvas {
            padding-top: 0px;
            height: 190px !important;
        }
    }
    & .statistics-portlet {
        background-color: var(--jl-bg-card);
        border-radius: 6px;
        border: var(--jl-border-card);

        & canvas {
            padding-top: 0px;
            height: 200px !important;
        }
    }

    & .portlet-section,
    & .table-portlet-section {
        height: 12px !important;
        font-weight: bold;
        color: var(--jl-text);
        text-align: center;
        font-size: var(--jl-font-m);
    }

    & .upright {
        writing-mode: sideways-lr;
        text-orientation: sideways-right;
        height: 100% !important;
        color: var(--jl-text-muted);
        margin-left: 8px;
    }

    & .double {
        text-align: left;
        padding-left: 120px;
    }
    & .table-portlet-section {
        text-align: left;
        padding-left: var(--jl-padding-xl);
    }
    
    & .portlet-last-updated {
        height: 12px !important;
        color: var(--jl-text-muted);
        text-align: left;
        font-size: var(--jl-font-xs);
        padding-left: var(--jl-padding-xxl);
    }
    & .dashboard-portlet.no-border,
    & .dashboard-portlet-extended.no-border,
    & .statistics-portlet.no-border { 
        background-color: inherit;
        border: none;
    }

    & .dashboard-table {
        width: 1340px;
        height: 315px;
    }

    & .qualityscore-chart {
        height: 240px;

        & canvas {
            padding-top: 0px;
            height: 200px !important;
        }
    }
}

#dashboardPanel .dashboard-portlets {
    display: grid;
    grid-template-columns: 330px 330px 330px 330px 320px;
    gap: var(--jl-padding-m) var(--jl-padding-s);
    padding-right: var(--jl-padding-m);
}

#dashboardPanel .statistics-portlets {
    display: grid;
    grid-template-columns: 20px 390px 390px 390px 390px;
    gap: var(--jl-padding-s) var(--jl-padding-s);
    padding-right: var(--jl-padding-m);
}

#dashboardPanel .dashboard-portlets-table {
    display: grid;
    grid-template-columns: 1340px 90px;
    gap: var(--jl-padding-s) var(--jl-padding-m);
    padding-right: var(--jl-padding-m);
    padding-bottom: var(--jl-padding-m)
}


#dashboardPanel .qualityscore-portlets {
    display: grid;
    grid-template-columns: 390px 800px;
    gap: var(--jl-padding-s) var(--jl-padding-s);
    padding-right: var(--jl-padding-m);

    grid-template-areas:
        '. extended'
        '. extended'
        
}

#dashboardPanel .dashboard-portlet-notes {
    display: grid;
    grid-template-columns: 390px 390px 796px ;
    /* gap: var(--jl-padding-s) var(--jl-padding-s); */
    padding-right: var(--jl-padding-m);
    padding-top: var(--jl-padding-xs);

    grid-template-areas:
        '. . .'
        '. . extended'
        '. . extended'
        
   
        
}
#dashboardPanel .dashboard-portlet-qtable {
    display: grid;
    grid-template-columns: 832px 354px 390px;
    /* gap: var(--jl-padding-s) var(--jl-padding-s); */
    padding-right: var(--jl-padding-m);
    padding-bottom: var(--jl-padding-xs); 

    grid-template-areas:
        'extended . .'
}







#dashboardPanel .quarter-portlet-matrix {
    display: grid;
    grid-template-columns: 420px 20px 390px 390px 390px;
    gap: var(--jl-padding-s) var(--jl-padding-m);
    padding-right: var(--jl-padding-m);


    grid-template-areas:
        'reportNotes tableContainer tableContainer tableContainer tableContainer'
        'reportNotes . . . .'
        'reportNotes . . segmentNotes .'
        'reportNotes . . segmentNotes .';



    & .dashboard-portlet {
        height: 230px;
    }

    & .dashboard-portlet {
        background-color: var(--jl-bg-card);
        border-radius: 6px;
        border: var(--jl-border-card);

        & canvas {
            padding-top: 0px;
            height: 200px !important;
        }
    }

    & .portlet-section {
        height: 12px !important;
        font-weight: bold;
        color: var(--jl-text);
        text-align: center;
        font-size: var(--jl-font-m);
    }
    & .dashboard-portlet.no-border {
        background-color: inherit;
        border: none;
    }

    & .table-container  {
        grid-area: tableContainer; 
        display: grid;
        grid-template-columns: 832px 390px;
        gap: var(--jl-padding-s) var(--jl-padding-m);

        & .short {
            height: 228px;
        }
    }


    & .report-notes {
        grid-area: reportNotes;
        height: unset;
        height: 957px;
        overflow: hidden;
        padding-bottom: 12px;
    }
    & .segment-notes {
        grid-area: segmentNotes;
        height: unset;
        
    }

    & .no-segments {
        color: var(--jl-text-muted);
        font-size: var(--jl-font-xxs);
        display: block;
        font-style: italic;
        padding-left: var(--jl-padding-xl);
        padding-top: var(--jl-padding-s);
    }

    & .upright {
        writing-mode: sideways-lr;
        text-orientation: sideways-right;
        height: 100% !important;
        color: var(--jl-text-muted);
        margin-left: 8px;
    }
}
    
    /* & .chart {
        grid-area: chart;
    } */