:root {
    --cor-1: #2b4175;
    --cor-2: #4682B4;
    --cor-3: #00f6ff;
    --cor-4: #4eb9dd;
}

input[type=range] {
    all: unset;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    width: 12em;
    height: 0.5em;
    position: relative;
    border-radius: 10px;
    background-color: #ebf2f7;
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #99b0c7;
    cursor: pointer;
}

.text-gray {
    color: #8d8d8d;
}


/* Grafico */

.item.legend h5 { color: var(--cor-1); }
.item.legend .value_minimum_income { color: var(--cor-2); }
.item.legend .chart_amortization { color: var(--cor-3); }
.item.legend .chart_interest_rate { color: var(--cor-4); }

.legend {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 80%;
}
.grafico-de-pizza {
    position: relative;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    float: right;
}

.grafico-de-pizza::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background: white;
    border-radius: 50%;
}

@media (max-width: 991px) {
    .graphic {
        position: relative;
        top: 30px;
        display: flex;
        justify-content: center;
        min-width: 300px;
    }

    input[type=range] {
        width: 100%;
    }
}
@media (max-width: 420px) {
    .grafico-de-pizza{
        height: 300px;
    }
}