﻿.centralizedDashboard .distanceSectionContainer {
    display: flex;
    justify-content: space-between;
}

.centralizedDashboard .distanceSection {
    padding: 14px;
    border-radius: 5px;
    height: 200px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .centralizedDashboard .distanceSection.tomorrow {
        border: 2px solid #E37014;
        background-color: #243254;
        width: calc(40% - 5px);
    }

    .centralizedDashboard .distanceSection.today {
        background: rgba(24, 77, 137, 1);
        width: calc(60% - 5px);
        box-shadow: 0px 3px 6px rgba(39, 45, 59, 0.2);
    }

    .centralizedDashboard .distanceSection h2 {
        font-size: 16px;
        color: #FAFAFA;
        font-weight: 400;
    }

    /* distanceBlock */
    .centralizedDashboard .distanceSection .distanceBlock {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        padding: 0px 12px;
        height: 100%;
    }

        /* .centralizedDashboard .distanceSection .distanceBlock.plannedDistance {
    border: 2px solid #E37014;
}

.centralizedDashboard .distanceSection .distanceBlock.actualDistance {
    border: 2px solid #17CE1F;
} */

        .centralizedDashboard .distanceSection .distanceBlock h3 {
            font-size: 13px;
            font-weight: 500;
            margin: 0px;
        }

            .centralizedDashboard .distanceSection .distanceBlock h3 span {
                font-weight: 800;
                color: #FAFAFA;
                display: block;
                margin: 14px 0px 24px;
            }

        .centralizedDashboard .distanceSection .distanceBlock.plannedDistance h3 {
            color: #EC9C5B;
        }

        .centralizedDashboard .distanceSection .distanceBlock.actualDistance h3 {
            color: #17CE1F;
        }
        .centralizedDashboard .distanceSection .distanceBlock .distanceDetails {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
            padding-inline-end: 8px;
            
        }
            .centralizedDashboard .distanceSection .distanceBlock .distanceDetails .value {
                border-radius: 12px;
                text-align: right;
                font-size: 14px;
                font-weight: 600;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 10px 0px;
                width: 100%;
                align-self: flex-end;
            }
.centralizedDashboard .distanceSection .distanceBlock .graph {
    width: 50px;
    height: 145px;
    border-radius: 12px;
    display: flex;
}

    .centralizedDashboard .distanceSection.tomorrow .distanceBlock .graph {
        background-color: #F0C8A0;
    }

    .centralizedDashboard .distanceSection.today .distanceBlock .graph {
        background-color: #FAFAFA;
    }

    .centralizedDashboard .distanceSection .distanceBlock .graph .value {
        border-radius: 12px;
        text-align: center;
        font-size: 9px;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 0px;
        width: 100%;
        align-self: flex-end;
    }

    .centralizedDashboard .distanceSection.tomorrow .distanceBlock .graph .value {
        background-color: #F27B05;
    }

    .centralizedDashboard .distanceSection.today .distanceBlock.plannedDistance .graph .value {
        background-color: #F27B05;
    }

    .centralizedDashboard .distanceSection.today .distanceBlock.actualDistance .graph .value {
        background-color: #17BE23;
    }
