qivip/django/static/css/t-input.css

@import 'tailwindcss';

qp-container {
    @apply max-w-xl w-full mx-auto;
}
.dark-form label {
    @apply dark:text-white!;
}

nav div ul.qp-nav-list li {
    @apply text-white hover:scale-110 hover:border-b-2 hover:border-white transition duration-200;
}

a.qp-a-button {
    @apply p-6 rounded-md font-extrabold hover:scale-105 transition duration-300 shadow-md;
}
a.qp-a-button-small {
    @apply p-1 rounded-md hover:scale-105 transition duration-300 shadow-md;
}
.register input{@apply p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black w-full;}

.input-group {
    @apply flex flex-col gap-4 max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg; 
}

.input-group form {
    @apply flex flex-col gap-4;
}

.input-group form p {
    @apply flex flex-col gap-2;
}

.input-group form p label {
    @apply text-gray-900 font-semibold text-sm;
}

.input-group form p input {
    @apply p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black 
    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
}

.input-group form p select {
    @apply p-3 rounded-md bg-gray-200 focus:scale-105 transition duration-200 font-black
    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
}

.input-group form p textarea {
    @apply p-3 rounded-xl bg-gray-200 focus:scale-105 transition duration-200 font-black
    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 min-h-[100px];
}

.input-group form p button {
    @apply p-3 rounded-full bg-indigo-500 hover:bg-indigo-600 text-white focus:scale-105 
    transition duration-200 font-black shadow-md hover:shadow-lg;
}


.field-group form p {
    @apply flex flex-col gap-2;
}

.field-group form p label {
    @apply text-gray-900 font-semibold text-sm;
}

.field-group form p input {
    @apply p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black 
    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
}

.field-group form p select {
    @apply p-3 rounded-md bg-gray-200 focus:scale-105 transition duration-200 font-black
    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
}

.field-group form p textarea {
    @apply p-3 rounded-xl bg-gray-200 focus:scale-105 transition duration-200 font-black
    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 min-h-[100px];
}

.field-group form p button {
    @apply p-3 rounded-full bg-indigo-500 hover:bg-indigo-600 text-white focus:scale-105 
    transition duration-200 font-black shadow-md hover:shadow-lg;
}



ul.messages li {
    @apply p-3 rounded-full bg-gray-200 hover:scale-105 transition duration-200 font-black 
    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
}

ul.messages li.error {
    @apply bg-red-200;
}




div.qp-answer-container {
    @apply grid grid-cols-2 h-screen;
}

div.qp-answer-container div {
    @apply grid place-content-center rounded-xl m-2 place-self-stretch text-white transition duration-300;
    @apply nth-1:bg-green-500 hover:nth-1:bg-green-600;
    @apply nth-2:bg-red-500 hover:nth-2:bg-red-600;
    @apply nth-3:bg-blue-500 hover:nth-3:bg-blue-600;
    @apply nth-4:bg-yellow-500 hover:nth-4:bg-yellow-600;
    @apply nth-5:bg-purple-500 hover:nth-5:bg-purple-600;
    @apply nth-6:bg-black hover:nth-6:bg-slate-800;
}

div.qp-answer-container div p {
    @apply font-black text-xl sm:text-2xl md:text-4xl;
}




div.qp-answer-container-host {
    @apply grid grid-cols-2 absolute bottom-0 w-screen xl:px-20 xl:pb-10;
}

div.qp-answer-container-host div {
    @apply grid place-content-center rounded-xl m-1 place-self-stretch text-white transition duration-300;
    @apply nth-1:bg-green-500 hover:nth-1:bg-green-600;
    @apply nth-2:bg-red-500 hover:nth-2:bg-red-600;
    @apply nth-3:bg-blue-500 hover:nth-3:bg-blue-600;
    @apply nth-4:bg-yellow-500 hover:nth-4:bg-yellow-600;
    @apply nth-5:bg-purple-500 hover:nth-5:bg-purple-600;
    @apply nth-6:bg-black hover:nth-6:bg-slate-800;
}

div.qp-answer-container-host div p {
    @apply font-black text-xl p-4;
}

/* Filter Panel Styles */
#filterPanel {
    @apply hidden transition-all duration-300 ease-in-out;
}

#filterPanel.show {
    @apply block;
}

div.qp-question-container {
    @apply text-center text-3xl px-4 py-9 h-screen;
}

div.qp-question-container img {
    @apply max-w-[50vw] max-h-[40vh] mx-auto;
}

div#mapquestion-container {
    display: flex;
    justify-content: center;
}

div#map {
    @apply md:w-[600px] lg:w-[900px] h-[400px]
}