html, body{
    box-sizing: border-box;
    height:100dvh;
    margin:0;
    padding:0;
}


#conteudo-site{
    display:flex;
    justify-content: center;
    align-content: center;
    align-items:center;
    width:100%;
    height:100dvh;
    
}

#senha, #novasenha, #cpf{
width:100%;
height:30px;
margin:0 0 5px 0px;
float:left;
box-sizing: border-box;
}

#cadastrar[type=submit]{
background-color:#ddd;
cursor:pointer;
border:none;
text-align:left;
color:#000;
width:auto;
margin:0px;
padding:0px;
}

#entrar[type=submit]{
background-color:#3367d6;
color:#fff;
height:35px;
width:150px;
margin: 3px 0 0 0;
border:0px;
border-bottom:solid 3px #000;
cursor:pointer;
width:100%;
box-sizing: border-box;
}

#entrar[type=submit]:hover{
text-decoration:none;
background-color:#bdb6b6;
color:#000;
}


input[id=botao]{
background-color:#3367d6;
color:#fff;
width:100%;
height:30px;
margin:0px;
padding:0px;
border:none;
}

input[id=botao]:hover{
background-color:#bdb6b6;   
color:#000;
margin:0px;
padding:0px;
cursor:pointer;
}


.conteudo{
max-width:280px;
top:0;
left:0;
right:0;
bottom:0;
margin: 5% auto;
position:absolute;
}


#centro{
width:280px;    
height:400px;
left:50%;
/*margin-left:-164px;*/
position:relative;
color:#fff;
}

span{
color:#fff; 
}

input{
display:block;
}

img{
margin:0 auto;  
width:100%;
height:auto;
align:center;
}

.box1{
text-align:center;
background-color:#ddd;
border:none;
border-radius:7px;  
width:280px;
/*margin:5% auto 0 auto;*/
box-shadow: 4px 4px 4px #000;
}

.box2{
    border-radius:7px;
    margin-bottom:10px;
}

label{
font: bold 15px arial;
float:left; 
}

html {
    margin:0;
    padding:0;
    /*background-color:#373f42;*/
    /*background: url(https://www.placecage.com/c/500/500) no-repeat center;*/
  
}

body{
    margin:0;
    padding:0;
    /*background: url(img/ceu-maior.jpeg) center center no-repeat fixed ;*/ 
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
    /*object-fit:cover;*/

}


.link{
border:none;    
color:#000;
cursor:pointer;
float:left;
}

.link a:hover{
color:#ff1010;
padding: 10px;  
}

.aviso{
background:#ddd;    
padding:8px;
margin:5px;
color:#6f0707;  
border-radius:5px;
width:280px;
}

.toggle > label {
    position: relative;
    display: block;
    height: 20px;
    width: 44px;
    background: #898989;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.toggle > label:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
    content: '';
    transition: all 0.3s ease;
}
.toggle > label:active:after {
    transform: scale(1.15, 0.85);
}
.toggle > input:checked ~ label {
    background: #84a3e5; /*azul claro*/
}
.toggle > input:checked ~ label:after {
    left: 20px;
    background: #3367d6; /*azul escuro*/
}
.toggle > input:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none;
}
.toggle > input:disabled ~ label:after {
    background: #bcbdbc;
}

.toggle {
    margin-bottom: 40px;
}
.toggle > input {
    display: none;
}


/*mensagems*/
/*.alerta {
padding:10px;
border:1px solid gray;  
border-radius:7px;
font-size:15px;
margin:10px 0px;
text-align:center;
}

.erro{
border-color:#e8273b; 
color:#000;
background-color:#ed5565;
}

.sucesso{
border-color:#87c940; 
color:#000;
background-color:#a0d468;
}

.atencao{
border-color:#f4a911; 
color:#000;
background-color:#f6bb42;
}

.inf{
border-color:#2f80e7; 
color:#000;
background-color:#5d9cec;
}*/
/*fim das mensagens*/


.alerta {
  border: none; /* Remove borders */
  color: #fff; /* Add a text color */
  padding: 10px 15px; /* Add some padding */
  cursor: pointer; /* Add a pointer cursor on mouse-over */
  margin:10px;
  border-radius:5px;
  font-size:14px;
  text-align:center;
}

/*.sucesso {background-color: #4CAF50;} /* verde */
.sucesso {background-color: #0f7d18;} /* verde */ 
/*.sucesso:hover {background-color: #46a049;}*/

.inf {background-color: #3367d6;} /* azul */
/*.inf:hover {background: #0b7dda;}*/

.atencao {background-color: #ac6c34;} /* larenja */
/*.atencao:hover {background: #e68a00;}*/

/*.erro {background-color: #f44336;} /* vermelho */
/*.erro:hover {background: #da190b;}*/
.erro {background-color: #6f0707;} /* vermelho */

.default {background-color: #e7e7e7; color: black;} /* cinza */ 
/*.default:hover {background: #ddd;}*/

.site {background-color: #3367d6; color: black;} /* azul do site */
/*.site:hover {background: #ddd;}*/


@keyframes exemplo{
    0% {border: solid 10px #3367d6; width:1px;}
    10% {border: solid 10px #3367d6; width:10%;}
    20% {border: solid 10px #3367d6; width:20%;}
    30% {border: solid 10px #3367d6; width:30%;}
    40% {border: solid 10px #3367d6; width:40%;}
    50% {border: solid 10px #3367d6; width:50%;}
    60% {border: solid 10px #3367d6; width:60%;}
    70% {border: solid 10px #3367d6; width:70%;}
    80% {border: solid 10px #3367d6; width:80%;}
    90% {border: solid 10px #3367d6; width:90%;}
    100% {border: solid 10px #3367d6; width:100%;}
}


.exemplo{
    /*height:25px;*/
    /*background-color:#bdb6b6;*/
    z-index:1;
    position:absolute;
    animation-name: exemplo;
    animation-duration:5s; /* velocidade */
    animation-iteration-count: 1; //numero de vezes
    /*animation-iteration-count:infinite; fica infinito */
}


.maius{
text-transform: uppercase;
}

.negrito{
font-weight:bold;
}

#inativo{
margin-top:30px;
max-width:300px;
margin:0 auto;
box-shadow: 4px 4px 4px #000;
}


/* CSS W3 */
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}

#editor1,#editor2,#editor3,#editor4,#editor5,#editor6,#editor7,
#editor8,#editor9,#editor10,#editor11,#editor12{width:100%;}

/* direcao */
.w3-left{float:left!important}
.w3-right{float:right!important}

/* botao */
.w3-button:hover{color:#000!important;background-color:#ccc!important}

/* card */
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

/* animação */
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}

/*modal*/
.w3-modal{z-index:3;display:none;padding-top:8%;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px;font-family:arial}
.w3-modal-pequeno{max-width:400px;}
.w3-modal-medio{max-width:600px;}
.w3-modal-grande{max-width:800px;}

/*cor*/
.w3-azul,.w3-hover-zul:hover{color:#fff!important;background-color:#3367d6!important}

/*display*/
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute}

/* botao */
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}