﻿.meuAlerta {
    background-color: #bdc3c7;
    border-radius: 2px;
    text-align: center;
    max-width: 30%;
    min-width: 10%;
    margin: 10px;
    opacity: 0;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    right: 0;
}

    .meuAlerta p {
        padding: 0px;
    }

        .meuAlerta p.pequeno {
            margin: 10px 20px 5px;
            font-size: 0.8em;
        }

        .meuAlerta p.normal {
            margin: 15px 30px 10px;
        }

        .meuAlerta p.grande {
            margin: 20px 40px 15px;
            font-size: 1.5em;
        }

    .meuAlerta .percentual {
        height: 5px;
        width: 100%;
    }

/*telas menores que 992px*/
@media (max-width: 992px) {
    .meuAlerta {
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        font-size: 26px;
    }

        .meuAlerta .p {
            margin: 15px 30px 10px;
            height: 10px;
        }

        .meuAlerta .percentual {
            height: 10px;
        }
}


/*COR DEFAULT*/
.meuAlerta.default {
    background-color: #7f8c8d;
}

    .meuAlerta.default p {
        color: #fff;
    }

    .meuAlerta.default .percentual {
        background-color: #bdc3c7;
    }


/*COR PRINCIPAL*/
.meuAlerta.principal {
    background-color: #446CB3;
}

    .meuAlerta.principal p {
        color: #fff;
    }

    .meuAlerta.principal .percentual {
        background-color: #1e304f;
    }



/*COR SUCESSO*/
.meuAlerta.sucesso {
    background-color: #27ae60;
}

    .meuAlerta.sucesso p {
        color: #fff;
    }

    .meuAlerta.sucesso .percentual {
        background-color: #186c3c;
    }



/*COR ERRO*/
.meuAlerta.erro {
    background-color: #e74c3c;
}

    .meuAlerta.erro p {
        color: #fff;
    }

    .meuAlerta.erro .percentual {
        background-color: #bd2717;
    }



/*COR ATENÇÃO*/
.meuAlerta.atencao {
    background-color: #f39c12;
}

    .meuAlerta.atencao p {
        color: #fff;
    }

    .meuAlerta.atencao .percentual {
        background-color: #ff6722;
    }



/*COR INFORMACAO*/
.meuAlerta.informacao {
    background-color: #59ABE3;
}

    .meuAlerta.informacao p {
        color: #fff;
    }

    .meuAlerta.informacao .percentual {
        background-color: #2980b9;
    }
