.aviso {
    color: #47525e;
    font-weight: 500;
    padding: 3px 10px;
    position: absolute;
    float: left;
    border-radius: 3px;
}

    .aviso.right:before {
        content: '';
        border-right: 7px solid;
        border-top: 7px solid rgba(0,0,0,0);
        border-bottom: 7px solid rgba(0,0,0,0);
        height: 0;
        padding: 0;
        position: absolute;
        left: -7px;
        top: 50%;
        transform: translate(0, -50%);
    }

    .aviso.bottom:before {
        content: '';
        border-right: 7px solid rgba(0,0,0,0);
        border-left: 7px solid rgba(0,0,0,0);
        border-bottom: 7px solid;
        height: 0;
        padding: 0;
        position: absolute;
        left: 50%;
        top: -7px;
        transform: translate(-50%, 0);
    }

    .aviso.alerta {
        background-color: #ffdb00;
        background-color: var(--amarelo);
    }

        .aviso.alerta.right:before {
            border-right-color: #ffdb00;
            border-right-color: var(--amarelo);
        }

        .aviso.alerta.bottom:before {
            border-bottom-color: #ffdb00;
            border-bottom-color: var(--amarelo);
        }

    .aviso.perigo {
        background-color: #ef4544;
        background-color: var(--vermelho);
        color: #fff;
    }

        .aviso.perigo.right:before {
            border-right-color: #ef4544;
            border-right-color: var(--vermelho);
        }

        .aviso.perigo.bottom:before {
            border-bottom-color: #ef4544;
            border-bottom-color: var(--vermelho);
        }

    .aviso.sucesso {
        background-color: rgb(20, 255, 108);
        background-color: var(--verde);
    }

        .aviso.sucesso.right:before {
            border-right-color: rgb(20, 255, 108);
            border-right-color: var(--verde);
        }

        .aviso.sucesso.bottom:before {
            border-bottom-color: rgb(20, 255, 108);
            border-bottom-color: var(--verde);
        }

    .aviso
    {
        background-color: #f3f3f3;
    }

        .aviso.info.right:before {
            border-right-color: #f3f3f3;
        }

        .aviso.info.bottom:before {
            border-bottom-color: #f3f3f3;
        }

    .aviso p {
        margin: 0;
    }

/*@media only screen and (max-width: 500px) {
    .aviso{border: 3px solid #0f0;}
}*/