:root {
    --red: #F14B4D;
    --blue: #4B8DF1;
    --brown: #A85832;
    --yellow: #F1C74B;
    --orange: #F1854B;
    --green: #54C56E;
    --grey: #B0B0B0;
}

html {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body {
    opacity: 0;
    animation: fadeInBody 1s ease-in forwards;
}

.d-flex {
    display: flex;
}

.f-grow {
    flex-grow: 1;
}

.dashboard-wrapper {
    padding: 64px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    .dashboard-wrapper .dashboard-row-top {
        flex-grow: 1;
        display: flex;
    }

    .dashboard-wrapper .dashboard-row-bottom {
        position: absolute;
        right: 64px;
        bottom: 64px;
        display: flex;
        justify-content: flex-end;
    }

.column-lr-wrapper {
    display: flex;
}

.kpi-wrapper {
    margin-top: 64px;
}

    .kpi-wrapper .col-lg-3 {
        width: 370px;
    }

    .kpi-wrapper .kpi {
        display: flex;
        flex-direction: column;
    }

        .kpi-wrapper .kpi .value {
            font-size: 28px;
            font-weight: 500;
        }

            .kpi-wrapper .kpi .value.highlight {
                color: #F14B4D;
                font-weight: 700;
            }

        .kpi-wrapper .kpi .name {
            font-size: 20px;
        }


.visual-wrapper {
    margin-top: 188px;
}

    .visual-wrapper .col-lg-3 {
        width: 370px;
    }

    .visual-wrapper .visual {
        display: flex;
        flex-direction: column;
        max-width: 200px;
    }

        .visual-wrapper .visual img {
            width: 64px;
            height: 64px;
            margin-bottom: 16px;
        }

        .visual-wrapper .visual .value {
            font-size: 24px;
            font-weight: 400;
        }

            .visual-wrapper .visual .value.highlight {
                color: #F14B4D;
                font-weight: 700;
            }

        .visual-wrapper .visual .name {
            font-size: 18px;
            min-height: 54px
        }

        .visual-wrapper .visual.office-now {
            margin-top: 10px;
            margin-left: 185px;
        }

        .visual-wrapper .visual.big img {
            width: 96px;
            height: 96px;
            margin-bottom: 16px;
        }

        .visual-wrapper .visual.big .value {
            font-size: 28px;
            font-weight: 500;
        }

        .visual-wrapper .visual.big .name {
            font-size: 20px;
            font-weight: 400;
        }

    .visual-wrapper .arrow-right {
        position: absolute;
        width: auto;
        margin-top: 15px;
        margin-left: 20px;
    }

    .visual-wrapper .arrow-left {
        position: absolute;
        width: auto;
        margin-top: 15px;
        margin-left: 330px;
    }

.site-identifier {
    position: absolute;
    top: 64px;
    right: 64px;
    bottom: 236px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}


    .site-identifier .building {
        color: #F14B4D;
        font-weight: 500;
        font-size: 50px;
        margin-top: -20px;
    }


    .site-identifier .letter {
        color: #F14B4D;
        font-weight: 500;
        font-size: 400px;
        margin-top: -140px
    }

        .site-identifier .letter.total {
            font-size: 100px;
            margin-top: 0px;
        }

.total-solar-panels {
    margin-top: 100px;
}

    .total-solar-panels .total-solar-panels-text {
      /*  background: #f14b4d14;
        border-radius: 999px;
        border: 3px solid #f14b4d14;
        padding: 16px 32px;*/
        color: #F14B4D;
        font-weight: 500;
        font-size: 50px;
    }

.buildings-wrapper {
    display: flex;
}


.buildings-total-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-right: 32px;
    text-align: right;
}

.buildings-wrapper .building {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 32px;
}

    .buildings-wrapper .building:last-of-type {
        margin-right: 0px;
    }

    .buildings-wrapper .building.total {
        margin-left: 48px;
    }

    .buildings-wrapper .building .name {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .buildings-wrapper .building img {
        height: 64px;
        opacity: 0.5;
        margin-bottom: 8px;
    }

    .buildings-wrapper .building .value {
        font-size: 20px;
    }


@keyframes fadeInBody {
    to {
        opacity: 1;
    }
}