input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: var(--background-color) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--background-color) inset;
  box-shadow: 0 0 0 1000px var(--background-color) inset;
  -webkit-text-fill-color: var(--primary-text);
}

input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus,
input:-moz-autofill:active {
  box-shadow: 0 0 0 1000px var(--background-color) inset;
  -moz-text-fill-color: var(--primary-text);
}

input[type='text']::placeholder,
input[type='password']::placeholder,
input[type='email']::placeholder,
input[type='search']::placeholder {
  opacity: 0.5;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='search'] {
  border: 1px solid var(--border-color);
  font: inherit;
  height: 38px;
  padding: 0 1em 0 1em;
}

input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type='search']:focus {
  border: 1px solid var(--primary-text);
  outline: 0;
}

.input-group.icon-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}

.icon-prefix i {
  margin-left: 10px;
  background-color: var(--default-color);
}

.icon-prefix input {
  width: 100%;
  border: none;
}

.icon-prefix input:focus {
  border: none;
}

.input-group.icon-suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}

.icon-suffix i {
  margin-left: -5px;
  margin-right: 10px;
  background-color: var(--default-color);
}

.icon-suffix input {
  width: 100%;
  border: none;
}

.icon-suffix input:focus {
  border: none;
}