/* #################### ESTILOS MODELO 3 #################### */
/* #################### ESTILOS MODELO 3 #################### */

.form-group-3 {
  width: 95% !important;
  max-width: 340px !important;
  margin: 10px 0px;
}

/* ESTILO DA MENSAGEM */
.form-group-3 span{
  display: block;
  position: relative;
  margin-top:6px;
  margin-left: 5px;
  font-size:14px;
  min-height: 14px;
  line-height: inherit;
  margin-bottom: 10px;
  pointer-events: none;
  opacity: 0;
  width: 100%;
}
/* ESTILOS DA INPUT, DA TEXTAREA E DO SELECT */
.form-group-3 input, .form-group-3 textarea, .form-group-3 select{
  position: relative;
  width: 100%;
  padding: 12px 14px;
  background-color: transparent;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  color:#707070;
  font-size: 16px;
  box-shadow: 0px 0px 4px 0px #00000009;
  box-sizing: content-box;
  line-height: inherit;
  transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  font-weight: 500;
}
.form-group-3 input:focus, .form-group-3 textarea:focus, .form-group-3 select:focus{
  border: 1px solid #a0a0a0;
  box-shadow: 0px 0px 6px 0px #00000010;
}
.form-group-3 input::placeholder, .form-group-3 textarea::placeholder, .form-group-3 select::placeholder{
  color:#999999;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}
/* ESTILOS DA TEXTAREA */
.form-group-3 textarea{
  height: 96px;
  resize: none;
  font-family: system-ui;
}
/* ESTILO DA LABEL */
.form-group-3 label{
  position: relative;
  width: max-content;
  max-width: 100%;
  flex-wrap: nowrap;
  padding:5px 1px 7px 4px;
  top:0px;
  color: #818181;
  font-size: 16px;
  font-weight: 500;
  order: -1;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

/* ESTILO DA LABEL PRE-FIXADA*/
.form-group-3 .label_prefixed{
  color: #808080;
  top:-6px;
  left:2px;
  transform: scale(0.85);
}
/* EM CASO DE INPUT INVÁLIDA */
.form-group-3 input,
.form-group-3 input:placeholder-shown {
  background-color: #eaeef4;
  border-color: #eaeef4;
}

.form-group-3 input::placeholder,
.form-group-3 input:placeholder-shown::placeholder{
  color: transparent;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
}

.form-group-3 input:focus::placeholder,
.form-group-3 input:not(:placeholder-shown)::placeholder{
  color: inherit;
}
/* Cor de fundo do autocomplete */
.form-group-3 input:-webkit-autofill,
.form-group-3 input:focus:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 30px white inset;
}
/* Cor do texto do autocomplete */
.form-group-3 input:-webkit-autofill,
.form-group-3 input:focus:-webkit-autofill {
   -webkit-text-fill-color: #707070 !important;
}

.form-group-3 input:focus,
.form-group-3 input:not(:placeholder-shown){
  background-color: transparent;
  border-color: #71bfff;
}

.form-group-3 input.valid,
.form-group-3 input.valid:focus{
  border-color: #15d661;
}

.form-group-3 input.valid ~ label{
  color: #15d661;
}

.form-group-3 input.invalid,
.form-group-3 input.invalid:focus{
  border-color: #dd3341;
}

.form-group-3 input.invalid ~ label{
  color: #dd3341;
}

.form-group-3 input ~ label {
  cursor: text;
  position: absolute;
  padding: 0px;
  top: unset;
  left: 20px;
  bottom: 13px;
  transform-origin: bottom left;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

.form-group-3 input:focus ~ label,
.form-group-3 input:not(:placeholder-shown) ~ label{
  width: max-content;
  max-width: calc(100% - (2*15px));
  padding: 0px 8px;
  left: 9px;
  bottom: 13px;
  background-color: #FBFBFB;
  transform: scale(.75) translateY(-39px);
}

.form-group-3 input:focus ~ .align_icons_eyes,
.form-group-3 input:not(:placeholder-shown) ~ .align_icons_eyes{
  background-color: transparent;
}
/* ESTILOS DA MENSAGEM INVÁLIDA */
.form-group-3 > .invalid ~ span{
  pointer-events: all;
  opacity: 1;
  color: var(--invalid_color);
}
/* ESTILOS INPUT E LABEL READONLY */
.form-group-3 input:read-only, .form-group-3 input:disabled{
  background-color: #f1f1f1;
  border: 1px solid #c6c6c6;
  color:#656565;
  border-radius: 3px;
}

.form-group-3 input[type="password"]{
  padding-right: 50px;
}

/* #################### ESTILOS MODELO 3 #################### */
/* #################### ESTILOS MODELO 3 #################### */