.form-group {
    @apply mb-6 relative;
}

.form-control {
    @apply bg-white appearance-none block w-full text-black border border-gray-400 rounded py-3 px-4 leading-none;  
    transition: ease 0.2s border;
}

.form-control:focus {
    @apply shadow outline-none bg-slate-50;
    box-shadow: 0 0 0 0.2rem bg-slate-100;
    background-clip: padding-box;
}

.form-control::placeholder {
    @apply text-gray-600;
}

.form-control.error {
    @apply border-red-300;
}

label,
.label {
  @apply block text-sm font-medium leading-5 text-gray-700 mb-1 cursor-pointer;
}

.form-hint {
    @apply text-gray-600 text-xs italic;
}

.form-hint.error {
    @apply text-red-500 text-sm italic leading-normal mt-1;
}

.select {
    @apply appearance-none block w-full bg-white border border-gray-400 text-gray-700 rounded leading-tight;
    -webkit-appearance: none;
    padding: 12px 24px 12px 12px;
}

.select:focus {
    @apply outline-none bg-white border-slate-500;
}
  
.caret {
    @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-800;
}

form.inline .form-group {
    @apply flex justify-start items-center;
}

form.inline .form-group .input {
    @apply flex-1;   
}

form.inline .form-group .label {
    @apply w-1/4;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    display: inline-block;
}

.form-checkbox {
    @apply text-slate-500 hidden appearance-none inline-block h-4 w-4 align-middle select-none flex-shrink-0 bg-white rounded;
  
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    background-origin: border-box;
    border: 1px solid rgb(209, 209, 209);
    box-shadow: inset 0 1px 1px rgba(#ddd, 0.8);
    background-size: 10px 10px;
}

.form-checkbox:checked {
    @apply border-transparent bg-center bg-no-repeat shadow-none;
    background-color: currentColor;
    background-image: url("../images/icons/checkmark.svg");
    background-size: 10px 10px;
}

.form-checkbox:checked:focus {
    @apply border-transparent;
}

.form-checkbox:disabled {
    @apply bg-gray-400;
}

.form-checkbox:focus {
    @apply outline-none;
    box-shadow: 0 0 0 3px rgba(164,202,254,.45);
    border-color: slate-100;
}

.input-file {
    height: auto;
    z-index: 2;
    cursor: pointer;
  
    @apply opacity-0 inline-block pl-0 pr-0 py-3 px-3 overflow-hidden absolute border-none;
}