/* CONFIGURAÇÃO DAS LABELS DENTRO DOS INPUTS E SELECTS */
.form-control-placeholder {
  position: absolute !important;
  top: 0 !important;
  padding: 7px 0 0 13px !important;
  transition: all 200ms !important;
  opacity: 0.5 !important;
}

.form-control-input, .floating-select{
  color: rgba(5, 5, 5, 0.801) !important;
}

/* CONFIG DAS LABELS APOS FOCO NOS INPUTS */
.form-control:focus+.form-control-placeholder,
/*.form-control:valid+.form-control-placeholder,*/
/* Original estava assim, mas nao funcionava com nao requerido, ja mostrava como preenchido*/
.form-control:not(:placeholder-shown)+.form-control-placeholder {
  transform: translate3d(0, -100%, 0) !important;
  opacity: 1 !important;
  top: 8px !important;
  font-size: 14px !important;
  color: #7e7e81 !important;
  left: 26px !important;
  position: absolute !important;
  pointer-events: none !important;
  transition: all .1s linear !important;
  background-color: white !important;
  padding: 0px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-top: 0px !important;
  -webkit-transition: all .1s linear !important;
  -moz-transition: all .1s linear !important;
  box-sizing: border-box !important;
}

/* CONFIG DA BORDA DE BAIXO DOS INPUTS EM FOCO */
.form-control-input:focus {
  outline: none !important;
  border-bottom: 2px solid rgb(0, 174, 255) !important;
}

/* CONFIG DOS SELECTS APOS A SELEÇÃO DOS VALORES Aplica semplre ao label (~label)*/
.floating-select:focus~label, .floating-select:not([value=""]):valid~label,
.floating-select:not([value=""]):disabled~label,/*Para qnd o campo estiver disabled*/
.floating-select[disabledX]:not([value=""])~label{/*para qnd tiver a propriedade disabledX custom*/
  top: 8px !important;
  font-size: 14px !important;
  color: #7e7e81 !important;
  left: 26px !important;
  position: absolute !important;
  pointer-events: none !important;
  transition: all .1s linear !important;
  background-color: white !important;
  padding: 0px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-top: 0px !important;
  -webkit-transition: all .1s linear !important;
  -moz-transition: all .1s linear !important;
  box-sizing: border-box !important;
  transform: translate3d(0, -100%, 0);
  opacity: 1 !important;
}


/* CONF DAS BORDAS QND REQUERIDO */
.form-group textarea:required:invalid+label, input:required:invalid+label, select:required:invalid+span+label {
  color: red !important;
}


.form-group textarea:required:invalid, input:focus:required:invalid, select:focus:required:invalid {
  border: 1.2px solid red !important;
  border-bottom: 2px solid red !important;
}

.form-group textarea:focus:valid, .form-group>input:focus:valid, select:focus:valid {
  border: 2px solid green !important;
}

.form-group textarea:required:invalid+label:before, input:required:invalid+label:before, select:required:invalid+span+label:before {
  content: '* ' !important;
}

/* Para a Label com class idade com a Idade dentro do Campo datanascimento */
label.idade{
  display: flex;
  opacity: 0.5;
  justify-content: flex-end;
  pointer-events: none;
  margin-top: -26px;
  font-size: 10px;
  margin-right: 3px;
  color: rgb(108, 112, 112);
}