CSS backup pq foi cagado

cssAMARAL.css

$colors: ( black: #131A1D, blue: #3D7AE8, gray: #84A6BD, green:#00CBB5, red:#D22E2E, white:#fff, line:rgba(132, 166, 189, 0.24), gray-light:#EFF3F6 );


.bloco-conteudo-padrao {
    background-color: map-get($colors, white);
    padding: 2rem 2rem;
    margin: 2rem 0;
}

.tabs .tab a.active, .tabs .tab a:hover {
    color: map-get($colors, black);
    font-weight: 400;
    font-size: 15px;
}

.tabs .tab a:not(.active) {
    color: map-get($colors, black);
    font-weight: 400;
    font-size: 15px;
}

.tabs {
    margin-left: -2rem;
    width: calc(100% + 2.5rem);

    .indicator {
        background-color: map-get($colors, black);
    }
}

.unifica-content {
    display: flex;

    &__letter {
        background-color: map-get($colors, black);
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;

        p {
            color: #fff;
            font-size: 28px;
            font-weight: bold;
        }
    }

    &__title-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2rem;

        p {
            margin: 0;
            font-size: 15px;
            color: map-get($colors, black);
            text-transform: uppercase;
            font-weight: 600;
        }

        p:first-child {
            font-size: 11px;
            color: map-get($colors, gray);
            margin-top: 1rem;
        }
    }

    i {
        color: map-get($colors, gray);
        font-size: 22px;
        margin-top: 15px;
    }

    &__div1 {
        flex: .4;
        padding-right: .5rem;

        .line {
            width: calc(100% + 2.5rem);
            height: 1px;
            background-color: map-get($colors, line);
            margin-left: -2rem;
        }
    }

    &__div2 {
        flex: .6;
        padding-left: .5rem;
        background-color: brown;
    }

    &__content-question {
        min-height: 360px;
        max-height: 360px;
        overflow-y: auto;

        p {
            font-size: 15px;
            color: map-get($colors, black);
        }

        h3 {
            text-transform: uppercase;
            color: map-get($colors, gray);
            font-size: 11px;
            letter-spacing: 1.2px;
        }
    }

    &__content-question-alternatives {
        min-height: 360px;
        max-height: 360px;
        overflow-y: auto;
        width: calc(100% + 2rem);
        margin-left: -2rem;


        div {
            position: relative;
            margin-left: 2.5rem;
            border-bottom: 1px solid map-get($colors, line);
        }

        p {
            font-size: 15px;
            color: map-get($colors, black);
            padding-left: 1rem;
        }

        h3 {
            text-transform: uppercase;
            color: map-get($colors, gray);
            font-size: 11px;
            letter-spacing: 1.2px;
            margin-left: 2.5rem;
        }
    }

    &__alternative {
        &--correct:before {
            font-family: "Font Awesome 5 Free";
            content: "\f00c";
            font-size: 14px;
            padding-right: 3px;
            font-weight: 900;
            color: map-get($colors, green);
            background-color: map-get($colors, gray-light);
            border-radius: 50%;
            padding: 6px 8px 8px 9px;
            position: absolute;
            top: 50%;
            left: -1.8rem;
            transform: translate(0,-50%);
            width: 30px;
            height: 30px;
        }

        &--wrong:before {
            font-family: "Font Awesome 5 Free";
            content: "\f00d";
            font-size: 14px;
            padding-right: 3px;
            font-weight: 900;
            color: map-get($colors, red);
            background-color: map-get($colors, gray-light);
            border-radius: 50%;
            padding: 5.5px 8px 8px 11px;
            position: absolute;
            top: 50%;
            left: -1.8rem;
            transform: translate(0,-50%);
            width: 30px;
            height: 30px;
        }
    }
}