@use "helpers";

body{
    background-color: helpers.$light;
}

#perfilMenu {
    background-color: helpers.$medium;
    margin-bottom: 20px;

    li {
        color: helpers.$textoDark;
        display: inline-block;
        font-family: helpers.$fontMedium;
        font-size: 16px;
        line-height: 40px;

        @media (max-width: 767px) {
            float: left;
            text-align: center;
            width: 50%;
        }

        a {
            @include helpers.transicao(0.3s);
            display: inline-block;
            line-height: 28px;
            padding: 0px 16px;
            width: 80%;
        }

        &:hover a, &.active {
            text-decoration: underline
        }
    }
}

#frmEmail, #frmSenha, #frmEmailConfirmacao {
    max-width: 370px;
}

.box {
    background-color: helpers.$medium;
    border: 1px solid helpers.$borders;
    margin: 20px 0px;
    padding: 20px;
    color: helpers.$textoDark;
}

.btnSalvar {
    @include helpers.transicao(0.3s);
    background-color: helpers.$highlight;
    border: none;
    color: helpers.$textoDark;
    font-family: helpers.$fontLight;
    font-size: 16px;
    font-weight: bold;
    height: 40px; 
    text-transform: uppercase;
    width: 145px;
    float:right;
    margin-bottom:30px;
    border: solid 1px helpers.$borders;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -o-border-radius: 0px;
    -webkit-box-shadow: 0px 10px 29px -17px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 10px 29px -17px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 10px 29px -17px rgba(0, 0, 0, 0.75);

    &:hover,&:focus {
        color: helpers.$textoDark;
        border-color: helpers.$success;
        background-color: helpers.$success;
    }
}

.msgOk {
    font-size: 14px;
    text-align: center;
    text-shadow: none;
}

.help-block{
    color: helpers.$textoMedium;
    font-size: 15px;
}