input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

label {
  @apply leading-none;
}

.form-input {
  @apply bg-transparent px-4 py-3 w-full;
}

.checkbox-toggle {
  @apply flex relative h-4 mb-2;
}

.checkbox-toggle .switch {
  @apply hidden;
}

.checkbox-toggle input:empty ~ label {
	@apply text-black cursor-pointer pl-12;
}

.checkbox-toggle input:empty ~ label:before,
.checkbox-toggle input:empty ~ label:after {
  @apply absolute block;
  content: ' ';
}

.checkbox-toggle input:empty ~ label:before {
  @apply bg-gray-300 left-0 w-8 h-3 rounded-lg;
  top: 3px;
}

input.switch:empty ~ label:after {
  @apply rounded-full w-5 h-5 bg-white border-2 border-white;
  top: -2px;
  left: -8px;
  box-shadow: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);
}

.checkbox-toggle input:checked ~ label:before {
	background-color: #4398ee;
}

.checkbox-toggle input:checked ~ label:after {
	left: 20px;
}
