.reportsDashboard {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.reportChart {
    border: solid 1px #EEEEEE;
    border-radius: 4px;
    display: table;
    text-align: center;
    vertical-align: middle;
}

.tableTitle {
    font-size: x-large;
    font-weight: bold;
}

.tableSubTitle {
    font-size: large;
    font-weight: bold;
}

.cardTitle {
    font-size: x-large;
    font-weight: bold;
}

.cardGroupName {
    font-size: medium;
}

.cardValue {
    font-size: xx-large;
    font-weight: bold;
}

.cardRed .cardTitle {
    font-size: x-large;
    font-weight: bold;
    color: crimson;
}

.cardRed .cardValue {
    font-size: xx-large;
    font-weight: bold;
    color: crimson;
}

.cardBlue .cardTitle {
    font-size: x-large;
    font-weight: bold;
    color: blue;
}

.cardBlue .cardValue {
    font-size: xx-large;
    font-weight: bold;
    color: blue;
}

.cardOrange .cardTitle {
    font-size: x-large;
    font-weight: bold;
    color: orange;
}

.cardOrange .cardValue {
    font-size: xx-large;
    font-weight: bold;
    color: orange;
}