input[type="text"] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

input[type="datetime-local"] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

textarea,
select {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

textarea:focus {
  border-color: #757575;
  box-shadow: 0 0 8px 0 #757575;
}
select:focus {
  border-color: #757575;
  box-shadow: 0 0 8px 0 #757575;
}

input[type="text"]:focus {
  border-color: #757575;
  box-shadow: 0 0 8px 0 #757575;
}

input[type="datetime-local"]:focus {
  border-color: #757575;
  box-shadow: 0 0 8px 0 #757575;
}

.inputWithIcon input[type="text"] {
  padding-left: 40px;
}

.inputWithIcon select {
  padding-left: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 12.5px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus + i {
  color: #757575;
}

.inputWithIcon.inputIconBg i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

.inputWithIcon.inputIconBg input[type="text"]:focus + i {
  color: #fff;
  background-color: #757575;
}

form {
  padding: 50px;
}

.form-head {
  color: #fbfbff;
}

.form-style {
  background-image: linear-gradient(to bottom right, #0b4f6c, #757575);
  margin-top: 52px;
  box-shadow: 4px 4px 9px #ddd;
}