/*
------------------------------------------
 RESET
------------------------------------------
*/

* { margin: 0; padding: 0; border: 0; }
body { background: #f2f2f2; color: #515151; }
body, td { font-size: 15px; line-height: 1.5; }

/*
------------------------------------------
 ELEMENTS
------------------------------------------
*/

a { color: black; }
a:hover { color: black; }
button:focus { outline: 0; }

/*
------------------------------------------
 LOADER
------------------------------------------
*/

.loader { position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; background: rgba( 238, 238, 238, 0.5 ) url( '/app/assets/images/ajax-loader.gif' ) center center no-repeat; }

/*
------------------------------------------
 MESSAGE
------------------------------------------
*/

.message { position: fixed; z-index: 15000; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #333; color: white; opacity: 0.95; }
.message p { margin: 0 40px; font-size: 1.5rem; }
.message.error { background: #c22b22; color: white; }
.message.alert { background: #ad9344; color: white; }
.message.success { background: green; color: white; }

/*
------------------------------------------
 LOGIN SCREEN
------------------------------------------
*/

.login { width: 100vw; background: url( '/app/assets/images/hero-example.png' ) center -130px no-repeat; background-size: 3000px auto; background-repeat: no-repeat; }
.login .center { width: 50vw; margin: 0 auto; }
.login form {}
.login form h2 { color: white; height: auto; padding: 50px 0 0 0; }
.login form .text { padding: 20px; background: white; border-radius: 5px; }
.login form .by-northbrasil { display: flex; padding-bottom: 70px; align-items: center; color: white; }
.login form .by-northbrasil .picture { width: 100px; margin: 0 0 0 7px; }
.login form .text-input-wrapper { margin-top: 15px; }
.login form .text-input-wrapper .text-input { width: 100%; height: auto; padding: 10px 15px; border: 1px solid #888; border-radius: 5px; }
.login form .buttons {}
.login form .buttons .btn-primary { height: 40px; margin: 0; padding: 0 20px; background: #e3b430; color: white; font-weight: bold; text-transform: uppercase; border-radius: 20px; }
.login form .buttons .btn-primary:hover { background: #e3b430; }
.login form p {}
.login form p a { color: black; }
.login form h3 { position: relative; margin: 50px 0 0 0; color: #777; font-weight: bold; font-size: 1.5rem; }
.login form .btn-secondary { height: 40px; padding: 0 20px; background: #777; color: white; font-weight: bold; text-transform: uppercase; border-radius: 20px; }

/*
------------------------------------------
 PIN REGISTER
------------------------------------------
*/

.pin-register { width: 100vw; background: url( '/app/assets/images/hero-example.png' ) center -130px no-repeat; background-size: 3000px auto; background-repeat: no-repeat; }
.pin-register .center { width: 50vw; margin: 0 auto; }
.pin-register form {}
.pin-register form h2 { color: white; height: auto; padding: 50px 0 0 0; }
.pin-register form .by-northbrasil { display: flex; padding-bottom: 70px; align-items: center; color: white; }
.pin-register form .by-northbrasil .picture { width: 100px; margin: 0 0 0 7px; }
.pin-register form p {}
.pin-register form .text-input-wrapper { margin-top: 15px; }
.pin-register form .text-input-wrapper .text-input { width: 100%; height: auto; padding: 10px 15px; border: 1px solid #888; border-radius: 5px; }
.pin-register form .buttons {}
.pin-register form .buttons .btn-primary { height: 40px; margin: 0; padding: 0 20px; background: #e3b430; color: white; font-weight: bold; text-transform: uppercase; border-radius: 20px; }
.pin-register form .buttons .btn-primary:hover { background: #e3b430; }
.pin-register .center form a {}