body{
    padding: 0 15px;
    margin: 0;
    box-sizing: border-box;
    background-image: url('../../img/backend/img-login.jpg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-color: #ECECFB;
    background-size: cover;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    height: 100vh;
}

body:before{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 0;
    background-color: #215A7C;
    mix-blend-mode: multiply;
    opacity: 0.71;
}

form{
    float: left;
    margin-top: 45px;
    margin-left: 25px;
    width: 385px;
    padding: 30px 35px;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.6);
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    z-index: 1;
    position: relative;
    box-shadow: 0 0 50px #000;
}

form p{
    margin-bottom: 13px;
}

form b{
    float: left;
    width: 100%;
    text-align: center;
    color: #dd0000;
    padding-bottom: 18px;
}

form input[type=text],
form input[type=password]{
    width: 100%;
    height: 52px;
    padding: 15px;
    box-sizing: border-box;
    border:1px solid #bbb;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    font-size: 14px;
    color:#333;
    outline: none;
}

form input::placeholder{
    font-size: 14px;
    color:#666;
}

.botoes-form{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.botoes-form p{
    margin:0;
}

.botoes-form a{
    text-decoration: none;
    background:#457244;
    color: #ffffff;
    font-size: 14px;
    transition: 0.3s all ease-out;
    -webkit-transition: 0.3s all ease-out;
    -moz-transition: 0.3s all ease-out;
    cursor:pointer;
    padding: 9px 11px;
    border-radius: 4px;
}

.botoes-form a:hover{
    background:#3a5f39;
}

form input[type=submit]{
    width: 155px;
    height: 52px;
    border:none;
    background-color: #215A7C;
    color:#fff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    transition: 0.3s all ease-out;
    -webkit-transition: 0.3s all ease-out;
    -moz-transition: 0.3s all ease-out;
}

form input[type=submit]:hover{
    cursor: pointer;
    background-color: #457344;
}

.logo{
    width: 279px;
    background-image: url('../../img/backend/img-logo.png');
    background-position: top center;
    background-repeat: no-repeat;
    margin: 0 auto 25px;
    padding-top: 77px;
    font-size: 22px;
    font-weight: 700;
    color: #215A7C;
    text-align: center;
}

/* RESPONSIVO */
@media (max-width:768px){
    body{
        padding-top: 20px;
    }

    form{
        float: none;
        margin: 0px auto;
        box-shadow: 0 0 50px rgba(0,0,0,0.46);
        background-color: rgba(255,255,255,0.9);
    }

    .botoes-form{
        flex-direction: column;
    }

    .botoes-form p{
        width: 100%;
    }

    form input[type=submit]{
        width: 100%;
        margin-bottom: 20px;
    }
}

@media (max-width:480px){
    form{
        width: 100%;
    }

    .logo{
        width: 100%;
        background-position: center center;
        background-size: contain;
    }
}

/* REMODAL ------------------------------------------------------------------ */

html.remodal-is-locked{overflow:hidden;touch-action:none}.remodal,[data-remodal-id]{display:none}.remodal-overlay{position:fixed;z-index:9999;top:-5000px;right:-5000px;bottom:-5000px;left:-5000px;display:none}.remodal-wrapper{position:fixed;z-index:10000;top:0;right:0;bottom:0;left:0;display:none;overflow:auto;text-align:center;-webkit-overflow-scrolling:touch}.remodal-wrapper:after{display:inline-block;height:100%;margin-left:-0.05em;content:""}.remodal-overlay,.remodal-wrapper{backface-visibility:hidden}.remodal{position:relative;outline:none;text-size-adjust:100%}.remodal-is-initialized{display:inline-block}.remodal-bg.remodal-is-opening,.remodal-bg.remodal-is-opened{filter:blur(3px)}.remodal-overlay{background:rgba(43,46,56,0.9)}.remodal-overlay.remodal-is-opening,.remodal-overlay.remodal-is-closing{animation-duration:.3s;animation-fill-mode:forwards}.remodal-overlay.remodal-is-opening{animation-name:remodal-overlay-opening-keyframes}.remodal-overlay.remodal-is-closing{animation-name:remodal-overlay-closing-keyframes}.remodal-wrapper{padding:10px 10px 0}.remodal{box-sizing:border-box;width:85%;margin-bottom:10px;padding:25px 35px 35px;transform:translate3d(0, 0, 0);color:#2b2e38;background:#fff}.remodal.modal-video{padding:25px 5px 0;background-color:#000000}.remodal.modal-video h3{color:#ffffff}.remodal h3{font-weight:700;font-size:21px;padding-bottom:17px;color:#111E3E}.remodal input[type="text"]{float:none;font-weight:500;margin-bottom:10px;color:#333333;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;padding:15px;border-radius:4px;border:1px solid #cacaca}.remodal select{float:none;font-weight:500;margin-bottom:18px;color:#333333}.remodal textarea{font-weight:500;margin-bottom:18px;color:#333333}.remodal [type=checkbox]{width:22px;height:22px}.remodal label{display:flex;justify-content:center;align-items:center;font-size:14px}.remodal .atualizar-remodal{display:flex;justify-content:center;width:100%}.remodal .atualizar-remodal a{width:120px;height:37px;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;font-family:'Montserrat',Tahoma,Arial,Helvetica,sans-serif;background-color:#4CAF50;color:#FFFFFF;font-size:15px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;margin-top:24px;cursor:pointer;border:none}.remodal.remodal-is-opening,.remodal.remodal-is-closing{animation-duration:.3s;animation-fill-mode:forwards}.remodal.remodal-is-opening{animation-name:remodal-opening-keyframes}.remodal.remodal-is-closing{animation-name:remodal-closing-keyframes}.remodal,.remodal-wrapper:after{vertical-align:middle}.remodal-close{position:absolute;top:0;left:0;display:block;overflow:visible;width:35px;height:35px;margin:0;padding:0;cursor:pointer;transition:color .2s;text-decoration:none;color:#95979c;border:0;outline:0;background:transparent}.remodal-close:hover,.remodal-close:focus{color:#2b2e38}.remodal-close:before{font-family:Arial,"Helvetica CY","Nimbus Sans L",sans-serif !important;font-size:25px;line-height:35px;position:absolute;top:0;left:0;display:block;width:35px;content:"\00d7";text-align:center}.remodal-confirm,.remodal-cancel{font:inherit;display:inline-block;overflow:visible;min-width:110px;margin:0;padding:12px 0;cursor:pointer;transition:background .2s;text-align:center;vertical-align:middle;text-decoration:none;border:0;outline:0}.remodal-confirm{color:#fff;background:#81c784}.remodal-confirm:hover,.remodal-confirm:focus{background:#66bb6a}.remodal-cancel{color:#fff;background:#e57373}.remodal-cancel:hover,.remodal-cancel:focus{background:#ef5350}.remodal-confirm::-moz-focus-inner,.remodal-cancel::-moz-focus-inner,.remodal-close::-moz-focus-inner{padding:0;border:0}@keyframes remodal-opening-keyframes{from{transform:scale(1.05);opacity:0}to{transform:none;opacity:1;filter:blur(0)}}@keyframes remodal-closing-keyframes{from{transform:scale(1);opacity:1}to{transform:scale(.95);opacity:0;filter:blur(0)}}@keyframes remodal-overlay-opening-keyframes{from{opacity:0}to{opacity:1}}@keyframes remodal-overlay-closing-keyframes{from{opacity:1}to{opacity:0}}@media only screen and (min-width:641px){.remodal{max-width:600px}}.lt-ie9 .remodal-overlay{background:#2b2e38}.lt-ie9 .remodal{width:700px}.ui-helper-hidden{display:none}
.remodal h3{font-size:22px;color:#215A7C;padding-bottom:20px;margin:0}.remodal span{display:flex;width:100%;text-align:center;justify-content:center;}.bt-enviar{width:173px;height:43px;border:none;background-color:#215A7C;color:#fff;font-size:17px;font-weight:700;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;transition:0.3s all ease-out;-webkit-transition:0.3s all ease-out;-moz-transition:0.3s all ease-out;display:flex;margin:0 auto;justify-content:center;align-items:center;cursor:pointer}

/* MENSAGENS DO SISTEMA ----------------------------------------------------- */
.message-wrapper{overflow:hidden;width:100%;position:fixed;top:0;left:0;z-index:10000;max-height:200px}.msg-sucesso,.msg-erro{display:flex;justify-content:center;align-items:center;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;width:100%;opacity:0;filter:alpha(opacity=0);font-family:'Montserrat',Tahoma,Arial,Helvetica,sans-serif;font-size:15px;margin-bottom:6px;padding:12px 0;color:#ffffff;background-color:#679e67;border-bottom-color:#4d714d;border-bottom-width:2px;border-bottom-style:solid;cursor:pointer;transition:all linear .2s}.msg-sucesso i,.msg-erro i{font-size:17px;margin-right:10px}.msg-erro{background-color:#aa2525;border-bottom-color:#7b1c1c;border-bottom-width:2px;border-bottom-style:solid}.barra{float:left;width:100%;padding-top:30px;margin-bottom:30px;border-bottom-color:#bbbbbb;border-bottom-width:1px;border-bottom-style:solid}.msg-sucesso-fixo,.msg-erro-fixo{display:flex;justify-content:center;align-items:center;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;width:100%;opacity:0;filter:alpha(opacity=0);font-family:'Montserrat',Tahoma,Arial,Helvetica,sans-serif;font-size:15px;padding:15px 0;color:#ffffff;position:fixed;top:0;left:0;z-index:1000;background-color:#679e67;border-bottom-color:#4d714d;border-bottom-width:2px;border-bottom-style:solid;transition:all linear .3s;-moz-animation:fadeIn .7s ease-in 1s forwards,fadeOut .7s ease-in 8s forwards;-webkit-animation:fadeIn .7s ease-in 1s forwards,fadeOut .7s ease-in 8s forwards;-o-animation:fadeIn .7s ease-in 1s forwards,fadeOut .7s ease-in 8s forwards;animation:fadeIn .7s ease-in 1s forwards,fadeOut .7s ease-in 8s forwards}.msg-sucesso-fixo i,.msg-erro-fixo i{font-size:17px;margin-right:10px}.msg-erro-fixo{background-color:#aa2525;border-bottom-color:#7b1c1c;border-bottom-width:2px;border-bottom-style:solid}@-webkit-keyframes fadeOut{0%{top:0;opacity:1}100%{top:-100px;opacity:0}}@-moz-keyframes fadeOut{0%{top:0;opacity:1}100%{top:-100px;opacity:0}}@-o-keyframes fadeOut{0%{top:0;opacity:1}100%{top:-100px;opacity:0}}@keyframes fadeOut{0%{top:0;opacity:1}100%{top:-100px;opacity:0}}@-webkit-keyframes fadeIn{0%{top:-100px;opacity:1}100%{top:0;opacity:1}}@-moz-keyframes fadeIn{0%{top:-100px;opacity:1}100%{top:0;opacity:1}}@-o-keyframes fadeIn{0%{top:-100px;opacity:1}100%{top:0;opacity:1}}@keyframes fadeIn{0%{top:-100px;opacity:1}100%{top:0;opacity:1}}.tab-lista{position:relative;flex-wrap:wrap}.tab-lista .bts-lista{position:absolute;top:-60px;right:0;z-index:0;display:flex;justify-content:space-between}.tab-lista .bts-lista a{margin-left:15px}.tab-lista .bts-lista .bt-add{background-color:#ddd;display:flex;justify-content:center;align-items:center;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-ms-border-radius:3px;padding:5px 14px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;color:#111;font-size:14px;cursor:pointer}


/********************************************************************************/


/*divs numeros*/
.box_login .list_login .btn_login_num{
    width: 8px;
    height: 40px;
    padding: 20px 25px 0;
    background: #01579b;
    cursor: pointer;
    color: white;
    font-weight: 500;
}

/*div numeros e back*/
.inputs{
    position: relative;
    display: flex;
    flex-direction: row;
}
/*div para numeros*/
.box_login .list_login{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    z-index: 1000;
    left: 0;
}

/* botao back */
.btn_login_back{
    width: 13%;
    background: #0277bd;
    text-align: center;
    color: white;
    font-weight: 600;
    vertical-align: middle;
    cursor: pointer;
}

.box_login .list_login .btn:hover {
    background-color: #4fc3f7;
}

.box_chave{
    text-align: center;
}
.box_chave input {
    width: 40px !important;
    height: 40px !important;
    margin: 10px 3px;
    border-radius: 3px !important;
    font-size: 30px !important;
    padding: 10px !important;
    text-align: center;
    font-weight: 700;
    background: #9e9e9e;
    opacity: 1;
    border: none;
    padding-top: 5px;
}
.btn_login_send{
    width: 100% !important;
    border-radius: 0 !important;
    padding: 10px 0;
    background: #009688;
    border: none;
    color: white;
    font-weight: 600;
    opacity: 0.6;
    transition: 0.3s;
    cursor: pointer;
}

.btn_login_send:hover{
    opacity: 1;
}


.btn_login_entrar input{
    background: #01579b;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 20px;
}

.btn_login_entrar input:hover{
    background-color: #3a5f39;
}
.title_login{
    color: #e64a19;
    text-align: center;
}

.error {
    border-color: #d80000 !important;
}