@charset 'UTF-8';

@font-face {
    font-family: "Lato";
    src: url('../fonts/Lato/ttf/Lato-Reg.ttf') format("truetype");
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

html{
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  font-family: "Lato";
}

main{  
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;    
}

main > div, main aside{
  height: 100%;  
}

main aside{
  max-width: 45%;
}

main .logo-login{
  max-height: 100%;
  min-width: 100%;
}

main > div{
  flex-grow: 1;
  display: flex;
  margin: 0 auto;  
  max-width: 360px;  
  flex-direction: column;
}

main > div header{  
  display: flex;
  flex-grow: 1;  
  justify-content: center;
  align-items: center;  
}

main > div .form{  
  flex-grow: 1;  
  justify-content: center;
  align-items: center;  
}

form label.botao{  
  line-height: 36px;
}

main > div .form p{
  margin-top: 36px;    
}

main > div .form p a{
  color: #fb9d2c;
}

main > div footer{
  width: 100%;
  margin: 30px 0px;
}

div.label{
  position: relative;
  margin-bottom: 20px;
}

input[type=text], input[type=password]{
  border-radius: 0px;
  border: 0px;
  border-bottom: 1px solid #e0e6ed;
  padding: 0px 10px 0px 36px;
  height: 50px;
  width: calc(100% - 46px);
  background-color: transparent;
  outline: 0px;  
  font-family: "Lato";
  font-size: 16px;
  line-height: 50px;
  transition: border .3s;
}

input[type=checkbox]{
  margin-left: 1px;
}

input[type=text]:focus, input[type=password]:focus{
  border-bottom-color: black;
}

svg{
  position: absolute;
  top: 14px;
  width: 24px;
  height: 24px;
  fill: #fff;
  stroke: black;
  stroke-width: 2px;
}

input[type=submit]{
  float: right;
  border: 0px;
  border-radius: 6px;
  padding: 10px 20px;
  width: auto;
  background-color: #000;
  outline: 0px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 991px) {
  main > div{    
    width: 300px;
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  main > aside{    
    display: none;
  }
}

@media (max-width: 320px) { 
  main > div{    
    max-width: 280px;      
  }
  main header > div{    
    max-width: 280px !important;
  }
  main header > div img{    
    width: 100% !important;
  }
}