@font-face {font-display: swap; font-family: 'Nunito'; font-style: normal; font-weight: 400; src: url('Fonts/nunito-v26-latin-regular.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Nunito'; font-style: italic; font-weight: 400; src: url('Fonts/nunito-v26-latin-italic.woff2') format('woff2');}  
@font-face { font-display: swap; font-family: 'Nunito'; font-style: normal; font-weight: 700; src: url('Fonts/nunito-v26-latin-700.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Nunito'; font-style: italic; font-weight: 700; src: url('Fonts/nunito-v26-latin-700italic.woff2') format('woff2');}
  
*, *::before, *::after {box-sizing: border-box;}
* {margin: 0; padding: 0;}
ul[role='list'], ol[role='list'] {list-style: none;}
html:focus-within {scroll-behavior: smooth;}
a:not([class]) {text-decoration-skip-ink: auto;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
img, picture, svg, video, canvas {max-width: 100%; height: auto; vertical-align: middle; font-style: italic; background-repeat: no-repeat;  background-size: cover;}
input, button, textarea, select {font: inherit;}

@media (prefers-reduced-motion: reduce){
    html:focus-within {scroll-behavior: auto;}
    *, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; transition: none;}
}

body, html {height: 100%; scroll-behavior: smooth; color:#006f88; background:#FFF}
body {font-family: 'Nunito', sans-serif; font-weight: normal; font-size:16px;}

.clear {clear: both;}
a {text-decoration: none; color: #006f88}

#login {width: 100%; height: 100vh; background: url(../images/bg-login.webp); background-size: cover; position: relative;}
#login .content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #F4F4F4; width: 750px;}
#login .content .tabs .logo {display: block; float: left; width: 260px; padding: 20px 40px; }
#login .content .tabs .logo img {width: 180px;}
#login .content .tabs label {display: block; float: left; width: calc((100% - 260px) / 2); height: 100px; padding: 20px 30px; cursor: pointer; background: #0070bb; color: #FFF;}
#login .content .tabs label.area-cliente.checked {background: #FFF; color: #0070bb; box-shadow: inset -10px 15px 15px #0003}
#login .content .tabs label.ambiente-testes.checked {background: #FFF; color: #0070bb; box-shadow: inset 10px 15px 15px #0003}
#login .content .tabs label div {display: table; margin: 0 auto; padding-left: 65px; font-size: 24px; line-height: 28px;}
#login .content .tabs label.area-cliente div {background: url(../images/login-cliente.svg) left center/55px no-repeat;}
#login .content .tabs label.ambiente-testes div {background: url(../images/login-testes.svg) left center/55px no-repeat;}
#login .content .tabs label strong {font-weight: bold; display: block; font-size: 30px;}

#login .content .tabs label img {max-width: 50px; float: left; margin-right: 10px;}
#login .content .tabs label [type=radio] {display: none}

#login form {padding: 20px; display: none;}
#login form.checked {display: block;}
#login form h3 {float: left; width: 280px; font-size: 18px; font-weight: bold; text-align: right; padding: 0 30px;}
#login form .box {float: left; width: 250px;}
#login form .box .row {display: block; margin-bottom: 12px}
#login form input {border-bottom: 1px solid #0070bb; border-top: 0; border-left: 0; border-right: 0; color: #0070bb; padding: 0 10px 0 30px; line-height: 36px; font-size: 18px;}
#login form input:focus {outline: none;;}
#login form input.username {background: url(../images/Icones/solid/user.svg) 10px center/16px no-repeat;}
#login form input.password {background: url(../images/Icones/solid/lock.svg) 10px center/16px no-repeat;}
#login form .box .row a {float: left;}
#login form .box .row button {float: right;background: #0081c2; margin-top: 10px; border: none; cursor: pointer; transition: 0.3s all; color: #FFF; font-size: 16px; width: 90px; float: right; line-height: 42px; text-align: center;}
button:hover {opacity: .8;}

.loading {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 500; background: rgba(0,0,0, 0.8); display: none; z-index: 9999}
.loading img {object-fit: cover;}



.alerta {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 500; background: rgba(0,0,0, 0.8); display: none; z-index: 9999}

.alerta .conteudo {position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%; border-radius: 8px; min-width: 280px; max-width: 600px; background-color: #FFF; color: #0081c2; border: 8px solid #0081c2; padding: 25px;}
.alerta .conteudo .icone {float: left; margin-right: 20px}
.alerta .conteudo .mensagem {float: right;}
.alerta .conteudo .mensagem strong {font-size: 18px; font-weight: bold;}
.alerta .conteudo .mensagem ul {margin: 10px 0}
.alerta .conteudo a {padding: 5px 20px;color: #FFF;font-weight: 700; display: table;border-radius: 8px;display: inline-block;transition: 0.3s all; background: #0081c2; border: 2px solid #0081c2}
.alerta .conteudo a.ok:hover {background: #FFF;color:#0081c2}