:root {
    /*Mensagens de Warnings */
    --background-warning: #ffdb9b;
    --border-warning: #ffa502;
    --icon-warning: #ce8500;
    --color-msg-warning: #ce8500;


    /*Mensagens de Sucesso*/
    --background-success: #d1fdd9;
    --border-success: #1f792b;
    --icon-success: #207638;
    --color-msg-success: #207638;
    /*Mensagens de Erro*/
}

/* ======= Estilização dos Alertas ======= */


/*Warnings*/
.msg-alert {
    position: absolute;
    top: 35px;
    right: -20px;
    padding: 20px 40px;
    border-radius: 4px;

    overflow: hidden;
}

.msg-alert span:nth-of-type(1) {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
}

.text-msg {
    text-align: center;
    padding: 0 22px;
    font-size: 18px;

}

/*---------------------------------*/
.warning {
    background-color: var(--background-warning);
    border-left: 8px solid var(--border-warning);
}

.warning-text {
    color: var(--color-msg-warning);
}

.warning .fa-triangle-exclamation {
    color: var(--icon-warning);
}

/*---------------------------------*/
.success {
    background-color: var(--background-success);
    border-left: 8px solid var(--border-success);
}

.success-text {
    color: var(--color-msg-success);
}

.success .fa-circle-check {
    color: var(--icon-success);
}

/*---------------------------------*/
@media screen and (max-width: 768px) {

    .msg-alert {
        top: 25px;
        padding: 10px 22px;
        text-align: end;
    }

    .msg-alert .fa-circle-check {
        font-size: 19px;
    }

    .text-msg {
        font-size: 15px;
    }
}

/* ----- FIM ESTILIZAÇÃO DE ALERTAS ------*/