#dashboardPanel .dashboard-portlets,
#dashboardPanel .qualityscore-portlets {
    & .dashboard-portlet {
        height: 240px;
    }
    & .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: 210px !important;
        }
    }

    & .portlet-section {
        height: 12px !important;
        font-weight: bold;
        color: var(--jl-text);
        text-align: center;
    }
    & .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 { 
        background-color: inherit;
        border: none;
    }
}

#dashboardPanel .dashboard-portlets {
    display: grid;
    grid-template-columns: 390px 390px 390px 390px;
    gap: var(--jl-padding-s) var(--jl-padding-m);
    padding-right: 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';
}