@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');
* {
  margin: 0px; 
  padding: 0px; 
  box-sizing: border-box;
  /*user-select: none;*/
}
  
body, html {
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;        
}
  
input:focus::-webkit-input-placeholder { color:transparent; } /*placeholder transparente ao clicar no campo*/
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
  
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; } */*------------------*/
  
input::-webkit-input-placeholder { color: #4b4b4b;} /*cor do placeholder*/
input:-moz-placeholder { color: #4b4b4b;}
input::-moz-placeholder { color: #4b4b4b;}
input:-ms-input-placeholder { color: #4b4b4b;}
  
textarea::-webkit-input-placeholder { color: #4b4b4b;}
textarea:-moz-placeholder { color: #4b4b4b;}
textarea::-moz-placeholder { color: #4b4b4b;}
textarea:-ms-input-placeholder { color: #4b4b4b;} /*------------------*/

/*______________________________________________________________________*/

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #4b4b4b !important;
 /* -webkit-box-shadow: 0 0 0px 1000px transparent inset;*/
  transition: background-color 5000s ease-in-out 0s;
}

input, textarea { /*define todos os input e textarea sem borda ao selecionar*/
  outline: none;
  border: none;
}
  
textarea:focus, input:focus { /*input e textarea sem cor de borda*/
  border-color: transparent !important;
}

button { /*sem borda no botão*/
  outline: none !important;
  border: none;
  background: transparent;
}
  
button:hover { /*cursor em pointer ao passar o mouse no botão*/
  cursor: pointer;
}

/*______________________________________________________________________*/
  
.limit { /*Define o limite do front*/
  width: 100%;
  margin: 0 auto;
}
  
.containerPrincipal { /*Container onde define tamanhos e dimensões junto a imagem*/
  width: 100%;  
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-image: url('../images/background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 1;  
}
.containerPrincipal::before { /*Esmaecimento da tela de fundo*/
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 25, 48, 0.75);
}
  

  
.containerCentral { /*Container que engloba tanto o logo quanto a area de email, senha e botão de login*/
  width: 420px;
  height: 400px;
  border-radius: 30px;
  overflow: hidden;
  background-color: #fff;
  padding:20px;
  padding-top: 30px;
  padding-bottom: 50px;
  box-shadow: 3px 3px 25px rgba(0, 44, 65, 0.9);
}
  
.logoCre { /*Logo Crematec*/
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 313px;
  /* height: 63px; */
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
  
.formulario { /*Define o tamanho do formulario com relação ao tamanho total do containerCentral*/
  width: 100%;
  padding-top: 5px;
  padding-bottom: 13px;
  border-radius: 10px;
  background-color: white;
}
  
.boxInput { /*Tamanho e cor da borda do input*/
  width: 100%;
  position: relative;
  /*border-bottom: 1px solid #4d4b49;*/
  padding: 10px 0;
  border-radius: 50px;
}
  
.inputGeral { /*Style do input*/
  font-family: 'Source Sans Pro', sans-serif;        
  font-size: 18px;
  color: rgb(0, 0, 0);
  line-height: 1.2;
  display: block;
  width: 100%;
  height: 50px;
  /*background: transparent;*/
  padding: 0 10px 0 60px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  background-color: rgb(233, 245, 255);
  border-radius: 30px;
}

.efeitoInput { /*Definição de tamanho para a linha de efeito no input*/
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
  
/*.efeitoInput::before { Efeitos de transição e cores da linha*/
  /*content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  background: #1b71b8;
  background: -webkit-linear-gradient(left, #1b71b8, #1d2d3b, #1b71b8, #1d2d3b);
  background: -o-linear-gradient(left, #1b71b8, #1d2d3b, #1b71b8, #1d2d3b);
  background: -moz-linear-gradient(left, #1b71b8, #1d2d3b, #1b71b8, #1d2d3b);
  background: linear-gradient(left, #1b71b8, #1d2d3b, #1b71b8, #1d2d3b);
}*/
  
.efeitoInput::after { /*Efeitos de transição e cores do icon*/
  font-family: 'Source Sans Pro', sans-serif;        
  font-size: 18px;
  color: #3d3d3d;
  content: attr(data-placeholder);
  display: block;
  width: 100%;
  position: absolute;
  top: 40px;
  left: 35px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
  
.inputGeral:focus { /*padding para dar uma distância de inicio de escrita do icone lateral*/
  padding-left: 50px;
}
  
.inputGeral:focus + .efeitoInput::after { /*move o icone para a esquerda no momento da escrita e define cor*/
  left: 23px;
  /*color: #c4f1ff;*/
}
  
.inputGeral:focus + .efeitoInput::before { /*define o comprimento da linha em 100% ao escrever*/
  width: 100%;
}
  
.mudar.inputGeral + .efeitoInput::after { /*faz o icone permanecer a 23px e mantem a cor*/
  left: 23px;
  /*color: #24b544;*/
}
  
.mudar.inputGeral + .efeitoInput::before { /*mantem em 100% a linha após escrever*/
  width: 100%;
}
  
.mudar.inputGeral { /*mantem a distância do icone lateral após a escrita*/
  padding-left: 60px;
}

.containerButton { /*container responsável pelo botão de login*/
  width: 100%;
  margin-top: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
  
.buttonLogin { /*style do botão de login*/
  font-family: 'Source Sans Pro', sans-serif;        
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 46px;
  border-radius: 30px;
  background: linear-gradient(to left, #229beb, #0474be, #0065a8);
  /*background: -webkit-linear-gradient(left, #1d2d3b, #1b71b8, #1d2d3b);
  background: -o-linear-gradient(left, #1d2d3b, #1b71b8, #1d2d3b);
  background: -moz-linear-gradient(left, #1d2d3b, #1b71b8, #1d2d3b);
  background: linear-gradient(left, #1d2d3b, #1b71b8, #1d2d3b);*/
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
  
/*.buttonLogin::before { style do botão de login, efeitos de hover*/
  /*content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  background: #1b71b8;
  background: -webkit-linear-gradient(left, #1b71b8, #2c375a, #1b71b8);
  background: -o-linear-gradient(left, #1b71b8, #2c375a, #1b71b8);
  background: -moz-linear-gradient(left, #1b71b8, #2c375a, #1b71b8);
  background: linear-gradient(left, #1b71b8, #2c375a, #1b71b8);
  background-position: center;
  background-size: cover;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}*/
  
/*.buttonLogin:hover { 
  background-color: transparent;
}
  
.buttonLogin:hover:before {
  opacity: 1;
}

.buttonLogin:active {
  position:relative;
  top:2px;
}*/

.textLink { /*responsável pelo alinhamento e posicionamento do link de "Esqueceu sua senha"*/
  text-align: left;
  margin-left: 3px;
  justify-content: center;
  margin-top: -7px;
}

.ahref { /*style link "esqueceu sua senha"*/
  font-family: 'Source Sans Pro', sans-serif;        
	font-size: 15px;
	line-height: 1.7;
	color: #849399;
  text-decoration: none;
}

.ahref:active { /*mover ao clicar no link*/
  position:relative;
  top:1px;
}

.textINV { /*container text conta inválida*/
  text-align: center;
  justify-content: center;
}

.txt { /*style text conta inválida*/
  
  font-family: 'Source Sans Pro', sans-serif;        
	font-size: 15px;
	line-height: 1.7;
	color: rgb(182, 62, 62);
	margin: 0px;
}

.validate-input { /*Alert de login e senha do input*/
  position: relative;
}
  
.alert-validate::before { /*style do alert antes e depois*/
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid #ff7b00;
  border-radius: 2px;
  padding: 4px 25px 4px 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
  pointer-events: none;
  font-family: 'Source Sans Pro', sans-serif;        
  color: #ff7b00;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
  
.alert-validate::after { /*style do alert antes e depois, seta o icone*/
  content: "\f071";
  font-family: FontAwesome;
  font-size: 16px;
  color: #ff7b00;
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 15px;
}
  
.alert-validate:hover:before { /*mostra o alert ao passar o mouse*/
  visibility: visible;
  opacity: 1;
}
  
@media (max-width: 992px) { /*define tamanho do alert com @media para responsividade*/
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}