
.green-text {
    color: var(--color-green)
}

.red-text {
    color: var(--color-red)
}

.kpiMetricsContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;


    .metrics {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        p, .roi-percent {
            margin: 0;
            padding: .2em 0;
            font-size: 1.1em;
            white-space: nowrap;
        }

        strong {
            margin: 0 .4em 0 0;
            font-size: 1.1em;
            font-weight: 700;
            letter-spacing: .5px;
            padding: .2em 0;
        }

        @media only screen and (max-width: 1550px){
            p, .roi-percent {
                font-size: 1em;
            }
    
            strong {
                font-size: 1em;
            }
        }
    }
}

.roiSpan {
    display: flex;
    flex-direction: row;
    // flex-wrap: wrap;
    justify-content: center;

    strong {
        text-align: right;
        white-space: nowrap;
        align-self: center;
    }

    p {
        align-self: center;
        .roi-percent {
            white-space: nowrap;
        }
    }
    

    
}