/* Form Elements */
.qp-searchform,
.qp-categoryform {
    @apply flex flex-row items-center justify-center grow
     w-full;
}

.qp-categoryform > label {
    @apply ml-2 inline-block
        min-w-[50%] xl:min-w-[20%]
        font-semibold;
}

.qp-form-group > label {
    @apply text-base font-semibold;
}

.qp-form-container {
    @apply w-full md:w-[75%] lg:w-[50%]
        border border-slate-200
        shadow-lg
        p-4 md:p-12
        mx-auto;
}

.qp-form-container > h2 {
    @apply text-lg md:text-2xl font-semibold
        text-center
        pb-4 md:pb-8;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    @apply w-full
    px-4 py-2
    my-2
    border border-slate-300
    focus:outline-none hover:outline-none;
}

.qp-form-select {
    @apply w-full
    px-2 py-2
    my-2
    border border-slate-300
    focus:outline-none hover:outline-none;
}

/* Button */
.qp-btn-blue {
    @apply inline-block
        bg-darkblue
        hover:bg-darkred 
        focus:bg-darkred focus:outline-none focus:ring-0 
        active:bg-darkred motion-reduce:transition-none
        px-8 py-2
        text-base font-medium leading-normal text-white
        transition duration-150 ease-in-out;
}

.qp-payment-details > h3 {
    @apply text-lg md:text-xl font-semibold
        pb-4;
}

.invalid-feedback {
    @apply text-darkred;
}