.field-group {
  position: relative;
  margin: 20px 0 10px 0;

  padding: 10px 20px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(220, 219, 219);
  border-radius: 4px;
  background-color: rgb(255, 255, 255);

  width: 100%;
  min-height: 52px;
  display: block;

}
.field-group input:focus + .fg-label,
.field-group input:not(:focus):valid + .fg-label {
  top: 9px;
  left: 20px;
  font-size: 14px;
}
.field-group .fg-field {
  
  outline: none;

  font-size: 16px;
  color: rgb(68, 61, 59);

  background-color: transparent;
  border: none;
  position: relative;
  top: 14px;

}
.field-group .fg-label {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 20px;
  pointer-events: none;
  transition: 0.3s ease all;
  color: #222;
}

.center {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
}

.black-theme .field-group{
  background-color: transparent;
  border-color: rgb(44, 44, 44);
  background-color: rgba(44, 44, 44, 0.302); 
}

.black-theme .field-group .fg-field{
  color:#fff;
}

.black-theme .field-group .fg-label{
  color: rgb(108, 108, 108);
  font-size: 16px;
}
.black-theme .field-group .feather {
  position: absolute;
  right: 17px;
  top: 13px;
}