@charset "utf-8";

/* CSS Document */
* {
    font-family: 'proxima_novaregular';
    font-weight:normal;
    line-height:normal;
    font-size:15px;
    color:#666;
    margin:0;
    padding:0;
    list-style:none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

strong, * strong { font-family: 'proxima_novasemibold'; }

body {
    padding:0;
    margin:0;
    background:#fff;	
}

/******************************/
/*login*/
.bgLogin {
    display:table;
    width:100%;
    /*min-width:600px;*/
    min-height:100vh;
    height:100vh;
    background-image:url(../img/bg-login.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    background-size: cover;
}

.centerLogin {
    display:table-cell;
    width:100%;
    min-height:100vh;
    padding:0px;
    vertical-align:middle;	
}

.login {
    /*width:100%;*/
    width:94%;
    max-width:570px;
    margin:0 auto;
    padding:65px 70px 50px;
    background:#fff;
}

/*header-login*/
.headerLogin {
    float:left;
    width:100%;
    min-height:40px;
    margin:25px auto 20px;
}

.headerLogin h1 {
    float:left;
    display:block;
    width:125px;
    height:40px;
    background:url(../img/login-original.png) no-repeat left center;
    text-indent:-9999px;
}

.headerLogin h2 {
    float:left;	
    /*width:290px;*/
    margin-top:10px;
    padding-left:8px;
    text-align:left;
    text-transform:uppercase;
    font-family:'proxima_novabold';
    font-size:16px;
    line-height:20px;
    color:#737373;
    border-left:solid 1px #737373;
    cursor:default;
}

.loginVoltar {
    float:right;
    color:#50af47;
    font-size:13px;	
    line-height:18px;
    text-decoration:none;
    padding-right:25px;
    background:url(../img/icon-login-voltar.png) no-repeat right top;
    -webkit-transition: all 0.2s linear; 
    transition:         all 0.2s linear;
}

.loginVoltar:hover { 
    opacity:0.8;
    filter: alpha(opacity=80);	
}

/*content-login*/
.contentLogin h4 { 
    color:#50af47; 
}
.contentLogin h4,
.contentLogin p {
    margin:10px 0;	
}

/*form-login*/
.loginForm { width:100%; }
.loginForm li { padding: 5px 0; }
.loginForm label {
    display:block;
    width:100%;	
    padding-right:20px;
    margin-bottom:10px;
}
.loginForm input[type=text],
.loginForm input[type=tel],  /*bnk*/
.loginForm input[type=password] {
    width:100%;
    margin-top:2px;
    height:30px;
    line-height:30px;
    /*font-family: 'proxima_novamedium';*/
    font-family: 'proxima_novasemibold';
    font-size:14px;
    color:#000;	
    background:#fff;
    border:0;
    border-bottom:solid 1px #d8d8d8;
    outline:none;	
}
.loginForm input[type=password] { }

.loginForm input[type=text].erro, 
.loginForm input[type=password].erro {
    /*color:#f30000;*/
    border-color:#f30000;
}
.loginForm .msgHidden {
    display:none;
    position:absolute;
}
.loginForm .msgErro {
    position:absolute;
    max-width:80%;	
    font-size:12px;
    color:#f30000;
    margin:3px 0;    
}
.loginForm .salvarCPF input[type=checkbox] {
    width:16px;
    height:16px;
    border-color:#c0c0c0;	
}
.loginForm .salvarCPF input[type=checkbox],
.loginForm .salvarCPF .icheckbox_square-green { float:right; }
.loginForm input[type=submit] {
    width:100%;
    margin:20px 0 15px;
    height:48px;
    line-height:48px;
    background:#50af47;
    border:0;
    font-family: 'proxima_novasemibold';
    font-size:14px;
    text-transform:uppercase;
    color:#fff;
    cursor:pointer; 
    outline:none;	
    -webkit-transition: all 0.2s linear; 
    transition:         all 0.2s linear;	
}
.loginForm input[type=submit]:hover {
    opacity:0.8;
    filter: alpha(opacity=80);	
}
.loginForm .linkPass { text-align:center; }
.loginForm .linkPass a {
    font-size:16px;
    text-decoration:none;
}
.loginForm .linkPass a:hover { text-decoration:underline; }

.loginForm .confirmaEmail {
    display:block;
    width:100%;
    margin:7px 0 15px;
    height:61px;
    line-height:58px;
    background:#fff;
    border:solid 2px #50af47;
    text-align:center;
}

/*sessao-expirada*/
.contentLogin .sessaoExpirada {
    float:left;
    width:100%;
    margin:-20px 0 5px;
    border:solid 2px #e3e3e3;
}
.contentLogin .sessaoExpirada li {
    float:left;
    padding:12px;
    font-family:'proxima_novasemibold';
    font-size:14px;
    text-transform:uppercase;
    color:#000;
}
.contentLogin .sessaoExpirada li:first-child {
    background:#e3e3e3;
    padding:22px;
}

/*keyboard*/
.keyboard {
    width:100%;
}
.keyboard .ouKeyboard {
    /*width:279px;*/
    max-width:279px;
    width:100%;
    height:120px;
    margin:35px auto 0;	
}
.keyboard .numKeyboard {
    /*width:372px;*/
    max-width:372px;
    width:100%;
    height:180px;
    margin:35px auto 0;	
}
.keyboard .numKeyboard li,
.keyboard .ouKeyboard li {
    display:block;
    float:left;
    /*width:83px;*/
    max-width:83px;
    height:50px;
    padding:0;
    margin:5px;
    border:solid 1px #d8d8d8;
}

.keyboard .numKeyboard li {
    width:calc(25% - 10px);	
}
.keyboard .ouKeyboard li {
    width:calc(33.3333% - 10px);
}

.keyboard .numKeyboard li + li + li + li + li + li + li + li + li { 
    margin-left:52px;
    margin-left:14%; 
}
.keyboard .numKeyboard li + li + li + li + li + li + li + li + li + li { 
    margin-left:5px; 
}

.keyboard .ouKeyboard li label,
.keyboard .numKeyboard li label {
    display:block;
    width:100%;
    padding:0;
    margin:0;
    height:100%;
    line-height:48px;
    text-align:center;
    background-color:#fff;
    cursor:pointer;
    -webkit-transition: all 0.2s linear; 
    transition:         all 0.2s linear;
}
.keyboard .ouKeyboard li label.backspace {
    background: #fff url(../img/icon-delete-password.png) no-repeat center center;	
}
.keyboard .ouKeyboard li label:hover,
.keyboard .numKeyboard li label:hover {
    background-color:#f4f4f4;
    color:#333;	
}

/*ouPassword*/
.ouPassword {
    width:100%;
    height:30px;
    margin:2px 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;	
}
.ouPassword li {
    float:left;
    display:block;
    width:15%;
    height:30px;
    padding:0;
    margin:0;
    margin-left:2%;
    background:#fff;
    border-bottom: solid 1px #d8d8d8;
}
.ouPassword li:first-child { margin-left:0; }

.ouPassword.erro li {
    border-color:#f30000;		
}
.ouPassword li label.digitado {
    display:block;
    width:10px;
    height:10px;
    padding:0;
    margin:10px auto;
    background-color: #737373;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    content: ' ';	
}

/******************************/
/* responsivo */
@media (max-width: 500px) {
    .login { 
        width:94%;
        padding: 65px 40px 50px; 
    }
}
@media (max-width: 400px) {
    .login { 
        width:96%;
        padding: 55px 25px 40px; 
    }
    .headerLogin {
        margin: 15px auto 15px;	
    }
    .loginForm input[type=submit] {
        margin: 15px 0 15px;	
    }
}

.title-new-header {
    color:#50af47;
    font-size:1.9em;
    margin-top:20px;
    margin-bottom:15px;	
    font-family: 'proxima_novaSemibold';
}

.formLogin {
    min-width: 300px !important;
}


.content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding-left: 0px !important;
    padding-top: 60px !important;
    padding-right: 0px !important;
}

.main_gradient {
    background-image: linear-gradient(233deg, #67c450, #009467);
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
}

.login-page {
    background-color: white;
    padding: 50px 50px 50px 10px;
}

.btnGreen {
	width: 100%;
    margin: 20px 0 15px;
    height: 48px;
    line-height: 48px;
    background: #50af47;
    border: 0;
    font-family: 'proxima_novasemibold';
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.btnGreen:disabled {
    opacity: 0.5;
}


#snackbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    visibility: hidden;
    min-width: 100%;
    max-width: 100% !important;
    padding: 16px;

    background-color: #333;
    color: #fff;

    text-align: left;
    font-family: 'proxima_novasemibold';
    font-size: 17px;
    font-weight: normal;
    z-index: 1;
}

#snackbar.alert-danger-original {
    color: #666 !important;
    background-color: #fff !important;
    border-width: 1px 1px 1px 4px;
    border-style: solid;
    border-color: #DC213A !important;
}

#snackbar.alert-danger {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border-width: 1px 1px 1px 4px;
    border-style: solid;
    border-color: #f5c6cb !important;
}

#snackbar.alert-warning {
    color: #856404 !important;
    background-color: #fff3cd !important;
    border-width: 1px 1px 1px 4px;
    border-style: solid;
    border-color: #ffeeba !important;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 820px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 820px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 820px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 820px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}