﻿.min-h-screen {
    min-height: 100vh
}

.flex {
    display: flex
}

.flex-col {
    flex-direction: column
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.relative {
    position: relative
}

.inline-flex {
    display: inline-flex
}

.w-full {
    width: 100%
}

.max-w-md {
    max-width: 28rem
}

.w-40 {
    width: 10rem
}

.h-40 {
    height: 10rem
}

.w-32 {
    width: 8rem
}

.h-32 {
    height: 8rem
}

.p-4 {
    padding: 1rem
}

.p-8 {
    padding: 2rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.py-3\.5 {
    padding-top: .875rem;
    padding-bottom: .875rem
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-8 {
    margin-bottom: 2rem
}

.text-center {
    text-align: center
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.font-bold {
    font-weight: 700
}

.font-semibold {
    font-weight: 600
}

.font-medium {
    font-weight: 500
}

.text-gray-900 {
    color: #111827
}

.text-gray-700 {
    color: #374151
}

.text-gray-600 {
    color: #4b5563
}

.text-gray-500 {
    color: #6b7280
}

.text-gray-400 {
    color: #9ca3af
}

.text-red-600 {
    color: #dc2626
}

.text-red-700 {
    color: #b91c1c
}

.bg-white {
    background-color: #fff
}

.bg-gray-50 {
    background-color: #f9fafb
}

.bg-yellow-50 {
    background-color: #fefce8
}

.bg-red-600 {
    background-color: #dc2626
}

.hover\:bg-red-700:hover {
    background-color: #b91c1c
}

.border {
    border-width: 1px
}

.border-gray-100 {
    border-color: #f3f4f6
}

.border-gray-300 {
    border-color: #d1d5db
}

.border-yellow-200 {
    border-color: #fde68a
}

.border-red-500 {
    border-color: #ef4444
}

.rounded-xl {
    border-radius: .75rem
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-lg {
    border-radius: .5rem
}

.shadow-xl {
    --tw-shadow: 0 20px 25px rgba(0,0,0,.1),0 10px 10px rgba(0,0,0,.04);
    box-shadow: var(--tw-shadow)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
    box-shadow: var(--tw-shadow)
}

.hover\:shadow-lg:hover {
    --tw-shadow: 0 10px 15px rgba(0,0,0,.2),0 4px 6px rgba(0,0,0,.1);
    box-shadow: var(--tw-shadow)
}

.pl-12 {
    padding-left: 3rem
}

.pr-4 {
    padding-right: 1rem
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px rgba(0,0,0,.05)
}

.focus\:ring-red-500:focus {
    box-shadow: 0 0 0 3px rgba(239,68,68,.25)
}

.focus\:border-red-500:focus {
    border-color: #ef4444
}

.hover\:border-gray-400:hover {
    border-color: #9ca3af
}

.animate-spin {
    animation: spin 1s linear infinite
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.bg-gradient-to-br {
    background-image: linear-gradient(225deg,var(--tw-gradient-stops))
}

.from-red-50 {
    --tw-gradient-from: #fef2f2
}

.via-white {
    --tw-gradient-stops: var(--tw-gradient-from),#fff,var(--tw-gradient-to,rgba(255,255,255,0))
}

.to-red-50 {
    --tw-gradient-to: #fef2f2
}
