@layer components {
    .form-content {
        @apply mx-auto py-10 sm:px-6 lg:px-8;
    } /* max-w-7xl */

    /* TOGGLE CHECKBOX */
    .toggle-container {
        @apply relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in;
    }

    .toggle-checkbox {
        @apply absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer;
    }

    .toggle-checkbox:checked {
        @apply right-0 border-green-400 bg-white;
    }

    .toggle-checkbox:checked + .toggle-label {
        @apply bg-green-400;
    }

    .toggle-label {
        @apply text-sm mt-0 !important;
    }

    .toggle-label {
        @apply block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer;
    }

    .toggle-show-label {
        @apply text-sm text-gray-700 mt-0 !important;
    }
/*
    /* MULTI CHECKBOX *
    .multicheckbox-label {
        @apply block text-left;
    }

    .multicheckbox-input {
        @apply appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer;
    }

    .multicheckbox-input:checked {
        @apply checked:bg-indigo-600 checked:border-indigo-600 transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer;
    }

    .multicheckbox-input:focus {
        @apply focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer;
    }

    .multicheckbox-sub-label {
        @apply text-gray-800;
    }*/

    /* MULTI SELECT */
    .multiselect-label {
        @apply block text-left text-sm m-0 !important;
    }

    .multiselect-span {
        @apply text-gray-700;
    }

    .multiselect {
        @apply block w-full mt-1;
    }

    .multiselect-option {
        /*@apply ;*/
    }

    .multicheckbox-input {
        @apply relative float-left ml-[1.5rem] mr-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid outline-none checked:border-primary checked:bg-primary ;
    }

    .multicheckbox-sub-label {
        @apply text-sm mt-0 !important;
    }

    /* INPUT */
    .input-disabled {
        @apply bg-gray-100 !important;
    }

    .input-text, .input-password, .input-email {
        @apply text-sm mt-1 block w-full;
    }

    .input-search {
        @apply relative flex w-full flex-wrap items-stretch mb-3 mr-2;
    }

    .input-search span {
        @apply z-10 h-full leading-snug font-normal absolute text-center text-indigo-400 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-2 py-1;
    }

    .input-search input {
        @apply px-2 py-1 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border border-indigo-400 outline-none focus:outline-none focus:ring w-full pl-10;
    }

    .form-input, .form-select, .form-textarea, .form-multiselect {
        @apply py-1 text-sm !important;
    }

    .textarea {
        @apply mt-1 w-full text-sm !important;
    }

    label {
        @apply text-sm pt-1 pb-1 mt-2 mb-0 !important;
    }

    .text-error {
        @apply text-sm text-red-600;
    }

    /* BUTTON */
    .btn-primary {
        @apply text-white font-bold uppercase text-sm px-4 py-2 rounded shadow;
    }

    .btn-primary:active {
        @apply font-bold uppercase text-sm px-4 py-2 rounded shadow;
    }

    .btn-primary:hover {
        @apply shadow-md outline-none;
    }

    .btn-primary:focus {
        @apply outline-none mr-1 mb-1 ease-linear transition-all duration-150;
    }

    .btn-default {
        @apply bg-gray-500 text-white font-bold uppercase text-sm px-4 py-2 rounded shadow;
    }

    .btn-default:active {
        @apply bg-gray-900 font-bold uppercase text-sm px-4 py-2 rounded shadow;
    }

    .btn-default:hover {
        @apply bg-gray-700 shadow-md outline-none;
    }

    .btn-default:focus {
        @apply outline-none mr-1 mb-1 ease-linear transition-all duration-150;
    }

    .btn-primary-border {
        @apply bg-indigo-100 border border-solid border-indigo-500 hover:bg-indigo-500 hover:text-white active:bg-indigo-600 font-bold uppercase text-sm px-4 py-2 rounded-l rounded-r outline-none focus:outline-none mb-1 ease-linear transition-all duration-150;
    }

    .btn-default-border {
        @apply text-gray-500 bg-gray-100 border border-solid border-gray-500 hover:bg-gray-500 hover:text-white active:bg-gray-600 font-bold uppercase text-sm px-4 py-2 rounded-l rounded-r outline-none focus:outline-none mb-1 ease-linear transition-all duration-150;
    }

    .btn-link {
        @apply inline-block rounded text-sm font-medium leading-normal text-emerald-500 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-emerald-600 focus:text-emerald-600 focus:outline-none focus:ring-0 active:text-emerald-700;
    }

    .btn-link-text {
        @apply inline-block rounded text-sm font-medium leading-normal text-emerald-500 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-emerald-600 focus:text-emerald-600 focus:outline-none focus:ring-0 active:text-emerald-700 pl-0 pr-0 pt-2 pb-1 mr-3;
    }

    .btn-link-img {
        @apply inline-block rounded text-sm font-medium leading-normal text-emerald-500 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-emerald-600 focus:text-emerald-600 focus:outline-none focus:ring-0 active:text-emerald-700 pl-2 pr-2 pt-2 pb-1;
    }
}