.form-group {
  position: relative;
  margin: 0;
  margin-top: 20px;
  margin-bottom: 20px;
}

input[type=text].form-control {
  padding: 15px;
  font-size: 16px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

input[type=password].form-control {
  padding: 15px;
  font-size: 16px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

input[type=date].form-control {
  padding: 15px;
  font-size: 16px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.form-label {
  position: absolute; 
  left: 15px;
  top: 15px;
  color: #999;
  background-color: white; /* Fundo para "cortar" a borda */
  padding: 0 5px;
  pointer-events: none; /* Clique passa direto para o input */
  transition: all 0.2s ease-out; /* Animação suave */
}

.form-fix-label {
  position: absolute; 
  left: 15px;
  top: -10px;
  font-size: 12px;
  color: #999;
  background-color: white; /* Fundo para "cortar" a borda */
  padding: 0 5px;
  pointer-events: none; /* Clique passa direto para o input */
}

/* Quando o input estiver em foco (:focus) ou não estiver vazio (:not(:placeholder-shown)) */
input[type=text].form-control:focus + .form-label,
input[type=text].form-control:not(:placeholder-shown) + .form-label,
input[type=password].form-control:focus + .form-label,
input[type=password].form-control:not(:placeholder-shown) + .form-label {
  top: -10px; /* Move para o topo */
  font-size: 12px;
  color: #999;
}

/* Foco da borda */
.form-control:focus {
  border-color: black;  
}

input[type=checkbox].form-control {
  width: 18px;
  height: 18px;

}

select {
    width: 100%;
    height: 55px;
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding-left: 15px;
    /* ... (code from Step 1) ... */
    background-image: url("data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 10px); /* Adjust position from the right */
    background-position-y: center;
}

select:invalid {
  color: #999;
}

select:open {
  color: black;
}

select option[value=""] {
  color: #999;
}