.text-0 {
    color: var(--surface-0) !important
}

.text-50 {
    color: var(--surface-50) !important
}

.text-100 {
    color: var(--surface-100) !important
}

.text-200 {
    color: var(--surface-200) !important
}

.text-300 {
    color: var(--surface-300) !important
}

.text-400 {
    color: var(--surface-400) !important
}

.text-500 {
    color: var(--surface-500) !important
}

.text-600 {
    color: var(--surface-600) !important
}

.text-700 {
    color: var(--surface-700) !important
}

.text-800 {
    color: var(--surface-800) !important
}

.text-900 {
    color: var(--surface-900) !important
}

.focus\:text-0:focus {
    color: var(--surface-0) !important
}

.hover\:text-0:hover {
    color: var(--surface-0) !important
}

.active\:text-0:active {
    color: var(--surface-0) !important
}

.focus\:text-50:focus {
    color: var(--surface-50) !important
}

.hover\:text-50:hover {
    color: var(--surface-50) !important
}

.active\:text-50:active {
    color: var(--surface-50) !important
}

.focus\:text-100:focus {
    color: var(--surface-100) !important
}

.hover\:text-100:hover {
    color: var(--surface-100) !important
}

.active\:text-100:active {
    color: var(--surface-100) !important
}

.focus\:text-200:focus {
    color: var(--surface-200) !important
}

.hover\:text-200:hover {
    color: var(--surface-200) !important
}

.active\:text-200:active {
    color: var(--surface-200) !important
}

.focus\:text-300:focus {
    color: var(--surface-300) !important
}

.hover\:text-300:hover {
    color: var(--surface-300) !important
}

.active\:text-300:active {
    color: var(--surface-300) !important
}

.focus\:text-400:focus {
    color: var(--surface-400) !important
}

.hover\:text-400:hover {
    color: var(--surface-400) !important
}

.active\:text-400:active {
    color: var(--surface-400) !important
}

.focus\:text-500:focus {
    color: var(--surface-500) !important
}

.hover\:text-500:hover {
    color: var(--surface-500) !important
}

.active\:text-500:active {
    color: var(--surface-500) !important
}

.focus\:text-600:focus {
    color: var(--surface-600) !important
}

.hover\:text-600:hover {
    color: var(--surface-600) !important
}

.active\:text-600:active {
    color: var(--surface-600) !important
}

.focus\:text-700:focus {
    color: var(--surface-700) !important
}

.hover\:text-700:hover {
    color: var(--surface-700) !important
}

.active\:text-700:active {
    color: var(--surface-700) !important
}

.focus\:text-800:focus {
    color: var(--surface-800) !important
}

.hover\:text-800:hover {
    color: var(--surface-800) !important
}

.active\:text-800:active {
    color: var(--surface-800) !important
}

.focus\:text-900:focus {
    color: var(--surface-900) !important
}

.hover\:text-900:hover {
    color: var(--surface-900) !important
}

.active\:text-900:active {
    color: var(--surface-900) !important
}

.surface-0 {
    background-color: var(--surface-0) !important
}

.surface-50 {
    background-color: var(--surface-50) !important
}

.surface-100 {
    background-color: var(--surface-100) !important
}

.surface-200 {
    background-color: var(--surface-200) !important
}

.surface-300 {
    background-color: var(--surface-300) !important
}

.surface-400 {
    background-color: var(--surface-400) !important
}

.surface-500 {
    background-color: var(--surface-500) !important
}

.surface-600 {
    background-color: var(--surface-600) !important
}

.surface-700 {
    background-color: var(--surface-700) !important
}

.surface-800 {
    background-color: var(--surface-800) !important
}

.surface-900 {
    background-color: var(--surface-900) !important
}

.focus\:surface-0:focus {
    background-color: var(--surface-0) !important
}

.hover\:surface-0:hover {
    background-color: var(--surface-0) !important
}

.active\:surface-0:active {
    background-color: var(--surface-0) !important
}

.focus\:surface-50:focus {
    background-color: var(--surface-50) !important
}

.hover\:surface-50:hover {
    background-color: var(--surface-50) !important
}

.active\:surface-50:active {
    background-color: var(--surface-50) !important
}

.focus\:surface-100:focus {
    background-color: var(--surface-100) !important
}

.hover\:surface-100:hover {
    background-color: var(--surface-100) !important
}

.active\:surface-100:active {
    background-color: var(--surface-100) !important
}

.focus\:surface-200:focus {
    background-color: var(--surface-200) !important
}

.hover\:surface-200:hover {
    background-color: var(--surface-200) !important
}

.active\:surface-200:active {
    background-color: var(--surface-200) !important
}

.focus\:surface-300:focus {
    background-color: var(--surface-300) !important
}

.hover\:surface-300:hover {
    background-color: var(--surface-300) !important
}

.active\:surface-300:active {
    background-color: var(--surface-300) !important
}

.focus\:surface-400:focus {
    background-color: var(--surface-400) !important
}

.hover\:surface-400:hover {
    background-color: var(--surface-400) !important
}

.active\:surface-400:active {
    background-color: var(--surface-400) !important
}

.focus\:surface-500:focus {
    background-color: var(--surface-500) !important
}

.hover\:surface-500:hover {
    background-color: var(--surface-500) !important
}

.active\:surface-500:active {
    background-color: var(--surface-500) !important
}

.focus\:surface-600:focus {
    background-color: var(--surface-600) !important
}

.hover\:surface-600:hover {
    background-color: var(--surface-600) !important
}

.active\:surface-600:active {
    background-color: var(--surface-600) !important
}

.focus\:surface-700:focus {
    background-color: var(--surface-700) !important
}

.hover\:surface-700:hover {
    background-color: var(--surface-700) !important
}

.active\:surface-700:active {
    background-color: var(--surface-700) !important
}

.focus\:surface-800:focus {
    background-color: var(--surface-800) !important
}

.hover\:surface-800:hover {
    background-color: var(--surface-800) !important
}

.active\:surface-800:active {
    background-color: var(--surface-800) !important
}

.focus\:surface-900:focus {
    background-color: var(--surface-900) !important
}

.hover\:surface-900:hover {
    background-color: var(--surface-900) !important
}

.active\:surface-900:active {
    background-color: var(--surface-900) !important
}

.border-0 {
    border-color: var(--surface-0) !important
}

.border-50 {
    border-color: var(--surface-50) !important
}

.border-100 {
    border-color: var(--surface-100) !important
}

.border-200 {
    border-color: var(--surface-200) !important
}

.border-300 {
    border-color: var(--surface-300) !important
}

.border-400 {
    border-color: var(--surface-400) !important
}

.border-500 {
    border-color: var(--surface-500) !important
}

.border-600 {
    border-color: var(--surface-600) !important
}

.border-700 {
    border-color: var(--surface-700) !important
}

.border-800 {
    border-color: var(--surface-800) !important
}

.border-900 {
    border-color: var(--surface-900) !important
}

.focus\:border-0:focus {
    border-color: var(--surface-0) !important
}

.hover\:border-0:hover {
    border-color: var(--surface-0) !important
}

.active\:border-0:active {
    border-color: var(--surface-0) !important
}

.focus\:border-50:focus {
    border-color: var(--surface-50) !important
}

.hover\:border-50:hover {
    border-color: var(--surface-50) !important
}

.active\:border-50:active {
    border-color: var(--surface-50) !important
}

.focus\:border-100:focus {
    border-color: var(--surface-100) !important
}

.hover\:border-100:hover {
    border-color: var(--surface-100) !important
}

.active\:border-100:active {
    border-color: var(--surface-100) !important
}

.focus\:border-200:focus {
    border-color: var(--surface-200) !important
}

.hover\:border-200:hover {
    border-color: var(--surface-200) !important
}

.active\:border-200:active {
    border-color: var(--surface-200) !important
}

.focus\:border-300:focus {
    border-color: var(--surface-300) !important
}

.hover\:border-300:hover {
    border-color: var(--surface-300) !important
}

.active\:border-300:active {
    border-color: var(--surface-300) !important
}

.focus\:border-400:focus {
    border-color: var(--surface-400) !important
}

.hover\:border-400:hover {
    border-color: var(--surface-400) !important
}

.active\:border-400:active {
    border-color: var(--surface-400) !important
}

.focus\:border-500:focus {
    border-color: var(--surface-500) !important
}

.hover\:border-500:hover {
    border-color: var(--surface-500) !important
}

.active\:border-500:active {
    border-color: var(--surface-500) !important
}

.focus\:border-600:focus {
    border-color: var(--surface-600) !important
}

.hover\:border-600:hover {
    border-color: var(--surface-600) !important
}

.active\:border-600:active {
    border-color: var(--surface-600) !important
}

.focus\:border-700:focus {
    border-color: var(--surface-700) !important
}

.hover\:border-700:hover {
    border-color: var(--surface-700) !important
}

.active\:border-700:active {
    border-color: var(--surface-700) !important
}

.focus\:border-800:focus {
    border-color: var(--surface-800) !important
}

.hover\:border-800:hover {
    border-color: var(--surface-800) !important
}

.active\:border-800:active {
    border-color: var(--surface-800) !important
}

.focus\:border-900:focus {
    border-color: var(--surface-900) !important
}

.hover\:border-900:hover {
    border-color: var(--surface-900) !important
}

.active\:border-900:active {
    border-color: var(--surface-900) !important
}

.bg-transparent {
    background-color: transparent !important
}

@media screen and (min-width: 576px) {
    .sm\:bg-transparent {
        background-color: transparent !important
    }
}

@media screen and (min-width: 768px) {
    .md\:bg-transparent {
        background-color: transparent !important
    }
}

@media screen and (min-width: 992px) {
    .lg\:bg-transparent {
        background-color: transparent !important
    }
}

@media screen and (min-width: 1200px) {
    .xl\:bg-transparent {
        background-color: transparent !important
    }
}

.border-transparent {
    border-color: transparent !important
}

@media screen and (min-width: 576px) {
    .sm\:border-transparent {
        border-color: transparent !important
    }
}

@media screen and (min-width: 768px) {
    .md\:border-transparent {
        border-color: transparent !important
    }
}

@media screen and (min-width: 992px) {
    .lg\:border-transparent {
        border-color: transparent !important
    }
}

@media screen and (min-width: 1200px) {
    .xl\:border-transparent {
        border-color: transparent !important
    }
}

.text-blue-50 {
    color: var(--blue-50) !important
}

.text-blue-100 {
    color: var(--blue-100) !important
}

.text-blue-200 {
    color: var(--blue-200) !important
}

.text-blue-300 {
    color: var(--blue-300) !important
}

.text-blue-400 {
    color: var(--blue-400) !important
}

.text-blue-500 {
    color: var(--blue-500) !important
}

.text-blue-600 {
    color: var(--blue-600) !important
}

.text-blue-700 {
    color: var(--blue-700) !important
}

.text-blue-800 {
    color: var(--blue-800) !important
}

.text-blue-900 {
    color: var(--blue-900) !important
}

.focus\:text-blue-50:focus {
    color: var(--blue-50) !important
}

.focus\:text-blue-100:focus {
    color: var(--blue-100) !important
}

.focus\:text-blue-200:focus {
    color: var(--blue-200) !important
}

.focus\:text-blue-300:focus {
    color: var(--blue-300) !important
}

.focus\:text-blue-400:focus {
    color: var(--blue-400) !important
}

.focus\:text-blue-500:focus {
    color: var(--blue-500) !important
}

.focus\:text-blue-600:focus {
    color: var(--blue-600) !important
}

.focus\:text-blue-700:focus {
    color: var(--blue-700) !important
}

.focus\:text-blue-800:focus {
    color: var(--blue-800) !important
}

.focus\:text-blue-900:focus {
    color: var(--blue-900) !important
}

.hover\:text-blue-50:hover {
    color: var(--blue-50) !important
}

.hover\:text-blue-100:hover {
    color: var(--blue-100) !important
}

.hover\:text-blue-200:hover {
    color: var(--blue-200) !important
}

.hover\:text-blue-300:hover {
    color: var(--blue-300) !important
}

.hover\:text-blue-400:hover {
    color: var(--blue-400) !important
}

.hover\:text-blue-500:hover {
    color: var(--blue-500) !important
}

.hover\:text-blue-600:hover {
    color: var(--blue-600) !important
}

.hover\:text-blue-700:hover {
    color: var(--blue-700) !important
}

.hover\:text-blue-800:hover {
    color: var(--blue-800) !important
}

.hover\:text-blue-900:hover {
    color: var(--blue-900) !important
}

.active\:text-blue-50:active {
    color: var(--blue-50) !important
}

.active\:text-blue-100:active {
    color: var(--blue-100) !important
}

.active\:text-blue-200:active {
    color: var(--blue-200) !important
}

.active\:text-blue-300:active {
    color: var(--blue-300) !important
}

.active\:text-blue-400:active {
    color: var(--blue-400) !important
}

.active\:text-blue-500:active {
    color: var(--blue-500) !important
}

.active\:text-blue-600:active {
    color: var(--blue-600) !important
}

.active\:text-blue-700:active {
    color: var(--blue-700) !important
}

.active\:text-blue-800:active {
    color: var(--blue-800) !important
}

.active\:text-blue-900:active {
    color: var(--blue-900) !important
}

.text-green-50 {
    color: var(--green-50) !important
}

.text-green-100 {
    color: var(--green-100) !important
}

.text-green-200 {
    color: var(--green-200) !important
}

.text-green-300 {
    color: var(--green-300) !important
}

.text-green-400 {
    color: var(--green-400) !important
}

.text-green-500 {
    color: var(--green-500) !important
}

.text-green-600 {
    color: var(--green-600) !important
}

.text-green-700 {
    color: var(--green-700) !important
}

.text-green-800 {
    color: var(--green-800) !important
}

.text-green-900 {
    color: var(--green-900) !important
}

.focus\:text-green-50:focus {
    color: var(--green-50) !important
}

.focus\:text-green-100:focus {
    color: var(--green-100) !important
}

.focus\:text-green-200:focus {
    color: var(--green-200) !important
}

.focus\:text-green-300:focus {
    color: var(--green-300) !important
}

.focus\:text-green-400:focus {
    color: var(--green-400) !important
}

.focus\:text-green-500:focus {
    color: var(--green-500) !important
}

.focus\:text-green-600:focus {
    color: var(--green-600) !important
}

.focus\:text-green-700:focus {
    color: var(--green-700) !important
}

.focus\:text-green-800:focus {
    color: var(--green-800) !important
}

.focus\:text-green-900:focus {
    color: var(--green-900) !important
}

.hover\:text-green-50:hover {
    color: var(--green-50) !important
}

.hover\:text-green-100:hover {
    color: var(--green-100) !important
}

.hover\:text-green-200:hover {
    color: var(--green-200) !important
}

.hover\:text-green-300:hover {
    color: var(--green-300) !important
}

.hover\:text-green-400:hover {
    color: var(--green-400) !important
}

.hover\:text-green-500:hover {
    color: var(--green-500) !important
}

.hover\:text-green-600:hover {
    color: var(--green-600) !important
}

.hover\:text-green-700:hover {
    color: var(--green-700) !important
}

.hover\:text-green-800:hover {
    color: var(--green-800) !important
}

.hover\:text-green-900:hover {
    color: var(--green-900) !important
}

.active\:text-green-50:active {
    color: var(--green-50) !important
}

.active\:text-green-100:active {
    color: var(--green-100) !important
}

.active\:text-green-200:active {
    color: var(--green-200) !important
}

.active\:text-green-300:active {
    color: var(--green-300) !important
}

.active\:text-green-400:active {
    color: var(--green-400) !important
}

.active\:text-green-500:active {
    color: var(--green-500) !important
}

.active\:text-green-600:active {
    color: var(--green-600) !important
}

.active\:text-green-700:active {
    color: var(--green-700) !important
}

.active\:text-green-800:active {
    color: var(--green-800) !important
}

.active\:text-green-900:active {
    color: var(--green-900) !important
}

.text-yellow-50 {
    color: var(--yellow-50) !important
}

.text-yellow-100 {
    color: var(--yellow-100) !important
}

.text-yellow-200 {
    color: var(--yellow-200) !important
}

.text-yellow-300 {
    color: var(--yellow-300) !important
}

.text-yellow-400 {
    color: var(--yellow-400) !important
}

.text-yellow-500 {
    color: var(--yellow-500) !important
}

.text-yellow-600 {
    color: var(--yellow-600) !important
}

.text-yellow-700 {
    color: var(--yellow-700) !important
}

.text-yellow-800 {
    color: var(--yellow-800) !important
}

.text-yellow-900 {
    color: var(--yellow-900) !important
}

.focus\:text-yellow-50:focus {
    color: var(--yellow-50) !important
}

.focus\:text-yellow-100:focus {
    color: var(--yellow-100) !important
}

.focus\:text-yellow-200:focus {
    color: var(--yellow-200) !important
}

.focus\:text-yellow-300:focus {
    color: var(--yellow-300) !important
}

.focus\:text-yellow-400:focus {
    color: var(--yellow-400) !important
}

.focus\:text-yellow-500:focus {
    color: var(--yellow-500) !important
}

.focus\:text-yellow-600:focus {
    color: var(--yellow-600) !important
}

.focus\:text-yellow-700:focus {
    color: var(--yellow-700) !important
}

.focus\:text-yellow-800:focus {
    color: var(--yellow-800) !important
}

.focus\:text-yellow-900:focus {
    color: var(--yellow-900) !important
}

.hover\:text-yellow-50:hover {
    color: var(--yellow-50) !important
}

.hover\:text-yellow-100:hover {
    color: var(--yellow-100) !important
}

.hover\:text-yellow-200:hover {
    color: var(--yellow-200) !important
}

.hover\:text-yellow-300:hover {
    color: var(--yellow-300) !important
}

.hover\:text-yellow-400:hover {
    color: var(--yellow-400) !important
}

.hover\:text-yellow-500:hover {
    color: var(--yellow-500) !important
}

.hover\:text-yellow-600:hover {
    color: var(--yellow-600) !important
}

.hover\:text-yellow-700:hover {
    color: var(--yellow-700) !important
}

.hover\:text-yellow-800:hover {
    color: var(--yellow-800) !important
}

.hover\:text-yellow-900:hover {
    color: var(--yellow-900) !important
}

.active\:text-yellow-50:active {
    color: var(--yellow-50) !important
}

.active\:text-yellow-100:active {
    color: var(--yellow-100) !important
}

.active\:text-yellow-200:active {
    color: var(--yellow-200) !important
}

.active\:text-yellow-300:active {
    color: var(--yellow-300) !important
}

.active\:text-yellow-400:active {
    color: var(--yellow-400) !important
}

.active\:text-yellow-500:active {
    color: var(--yellow-500) !important
}

.active\:text-yellow-600:active {
    color: var(--yellow-600) !important
}

.active\:text-yellow-700:active {
    color: var(--yellow-700) !important
}

.active\:text-yellow-800:active {
    color: var(--yellow-800) !important
}

.active\:text-yellow-900:active {
    color: var(--yellow-900) !important
}

.text-cyan-50 {
    color: var(--cyan-50) !important
}

.text-cyan-100 {
    color: var(--cyan-100) !important
}

.text-cyan-200 {
    color: var(--cyan-200) !important
}

.text-cyan-300 {
    color: var(--cyan-300) !important
}

.text-cyan-400 {
    color: var(--cyan-400) !important
}

.text-cyan-500 {
    color: var(--cyan-500) !important
}

.text-cyan-600 {
    color: var(--cyan-600) !important
}

.text-cyan-700 {
    color: var(--cyan-700) !important
}

.text-cyan-800 {
    color: var(--cyan-800) !important
}

.text-cyan-900 {
    color: var(--cyan-900) !important
}

.focus\:text-cyan-50:focus {
    color: var(--cyan-50) !important
}

.focus\:text-cyan-100:focus {
    color: var(--cyan-100) !important
}

.focus\:text-cyan-200:focus {
    color: var(--cyan-200) !important
}

.focus\:text-cyan-300:focus {
    color: var(--cyan-300) !important
}

.focus\:text-cyan-400:focus {
    color: var(--cyan-400) !important
}

.focus\:text-cyan-500:focus {
    color: var(--cyan-500) !important
}

.focus\:text-cyan-600:focus {
    color: var(--cyan-600) !important
}

.focus\:text-cyan-700:focus {
    color: var(--cyan-700) !important
}

.focus\:text-cyan-800:focus {
    color: var(--cyan-800) !important
}

.focus\:text-cyan-900:focus {
    color: var(--cyan-900) !important
}

.hover\:text-cyan-50:hover {
    color: var(--cyan-50) !important
}

.hover\:text-cyan-100:hover {
    color: var(--cyan-100) !important
}

.hover\:text-cyan-200:hover {
    color: var(--cyan-200) !important
}

.hover\:text-cyan-300:hover {
    color: var(--cyan-300) !important
}

.hover\:text-cyan-400:hover {
    color: var(--cyan-400) !important
}

.hover\:text-cyan-500:hover {
    color: var(--cyan-500) !important
}

.hover\:text-cyan-600:hover {
    color: var(--cyan-600) !important
}

.hover\:text-cyan-700:hover {
    color: var(--cyan-700) !important
}

.hover\:text-cyan-800:hover {
    color: var(--cyan-800) !important
}

.hover\:text-cyan-900:hover {
    color: var(--cyan-900) !important
}

.active\:text-cyan-50:active {
    color: var(--cyan-50) !important
}

.active\:text-cyan-100:active {
    color: var(--cyan-100) !important
}

.active\:text-cyan-200:active {
    color: var(--cyan-200) !important
}

.active\:text-cyan-300:active {
    color: var(--cyan-300) !important
}

.active\:text-cyan-400:active {
    color: var(--cyan-400) !important
}

.active\:text-cyan-500:active {
    color: var(--cyan-500) !important
}

.active\:text-cyan-600:active {
    color: var(--cyan-600) !important
}

.active\:text-cyan-700:active {
    color: var(--cyan-700) !important
}

.active\:text-cyan-800:active {
    color: var(--cyan-800) !important
}

.active\:text-cyan-900:active {
    color: var(--cyan-900) !important
}

.text-pink-50 {
    color: var(--pink-50) !important
}

.text-pink-100 {
    color: var(--pink-100) !important
}

.text-pink-200 {
    color: var(--pink-200) !important
}

.text-pink-300 {
    color: var(--pink-300) !important
}

.text-pink-400 {
    color: var(--pink-400) !important
}

.text-pink-500 {
    color: var(--pink-500) !important
}

.text-pink-600 {
    color: var(--pink-600) !important
}

.text-pink-700 {
    color: var(--pink-700) !important
}

.text-pink-800 {
    color: var(--pink-800) !important
}

.text-pink-900 {
    color: var(--pink-900) !important
}

.focus\:text-pink-50:focus {
    color: var(--pink-50) !important
}

.focus\:text-pink-100:focus {
    color: var(--pink-100) !important
}

.focus\:text-pink-200:focus {
    color: var(--pink-200) !important
}

.focus\:text-pink-300:focus {
    color: var(--pink-300) !important
}

.focus\:text-pink-400:focus {
    color: var(--pink-400) !important
}

.focus\:text-pink-500:focus {
    color: var(--pink-500) !important
}

.focus\:text-pink-600:focus {
    color: var(--pink-600) !important
}

.focus\:text-pink-700:focus {
    color: var(--pink-700) !important
}

.focus\:text-pink-800:focus {
    color: var(--pink-800) !important
}

.focus\:text-pink-900:focus {
    color: var(--pink-900) !important
}

.hover\:text-pink-50:hover {
    color: var(--pink-50) !important
}

.hover\:text-pink-100:hover {
    color: var(--pink-100) !important
}

.hover\:text-pink-200:hover {
    color: var(--pink-200) !important
}

.hover\:text-pink-300:hover {
    color: var(--pink-300) !important
}

.hover\:text-pink-400:hover {
    color: var(--pink-400) !important
}

.hover\:text-pink-500:hover {
    color: var(--pink-500) !important
}

.hover\:text-pink-600:hover {
    color: var(--pink-600) !important
}

.hover\:text-pink-700:hover {
    color: var(--pink-700) !important
}

.hover\:text-pink-800:hover {
    color: var(--pink-800) !important
}

.hover\:text-pink-900:hover {
    color: var(--pink-900) !important
}

.active\:text-pink-50:active {
    color: var(--pink-50) !important
}

.active\:text-pink-100:active {
    color: var(--pink-100) !important
}

.active\:text-pink-200:active {
    color: var(--pink-200) !important
}

.active\:text-pink-300:active {
    color: var(--pink-300) !important
}

.active\:text-pink-400:active {
    color: var(--pink-400) !important
}

.active\:text-pink-500:active {
    color: var(--pink-500) !important
}

.active\:text-pink-600:active {
    color: var(--pink-600) !important
}

.active\:text-pink-700:active {
    color: var(--pink-700) !important
}

.active\:text-pink-800:active {
    color: var(--pink-800) !important
}

.active\:text-pink-900:active {
    color: var(--pink-900) !important
}

.text-indigo-50 {
    color: var(--indigo-50) !important
}

.text-indigo-100 {
    color: var(--indigo-100) !important
}

.text-indigo-200 {
    color: var(--indigo-200) !important
}

.text-indigo-300 {
    color: var(--indigo-300) !important
}

.text-indigo-400 {
    color: var(--indigo-400) !important
}

.text-indigo-500 {
    color: var(--indigo-500) !important
}

.text-indigo-600 {
    color: var(--indigo-600) !important
}

.text-indigo-700 {
    color: var(--indigo-700) !important
}

.text-indigo-800 {
    color: var(--indigo-800) !important
}

.text-indigo-900 {
    color: var(--indigo-900) !important
}

.focus\:text-indigo-50:focus {
    color: var(--indigo-50) !important
}

.focus\:text-indigo-100:focus {
    color: var(--indigo-100) !important
}

.focus\:text-indigo-200:focus {
    color: var(--indigo-200) !important
}

.focus\:text-indigo-300:focus {
    color: var(--indigo-300) !important
}

.focus\:text-indigo-400:focus {
    color: var(--indigo-400) !important
}

.focus\:text-indigo-500:focus {
    color: var(--indigo-500) !important
}

.focus\:text-indigo-600:focus {
    color: var(--indigo-600) !important
}

.focus\:text-indigo-700:focus {
    color: var(--indigo-700) !important
}

.focus\:text-indigo-800:focus {
    color: var(--indigo-800) !important
}

.focus\:text-indigo-900:focus {
    color: var(--indigo-900) !important
}

.hover\:text-indigo-50:hover {
    color: var(--indigo-50) !important
}

.hover\:text-indigo-100:hover {
    color: var(--indigo-100) !important
}

.hover\:text-indigo-200:hover {
    color: var(--indigo-200) !important
}

.hover\:text-indigo-300:hover {
    color: var(--indigo-300) !important
}

.hover\:text-indigo-400:hover {
    color: var(--indigo-400) !important
}

.hover\:text-indigo-500:hover {
    color: var(--indigo-500) !important
}

.hover\:text-indigo-600:hover {
    color: var(--indigo-600) !important
}

.hover\:text-indigo-700:hover {
    color: var(--indigo-700) !important
}

.hover\:text-indigo-800:hover {
    color: var(--indigo-800) !important
}

.hover\:text-indigo-900:hover {
    color: var(--indigo-900) !important
}

.active\:text-indigo-50:active {
    color: var(--indigo-50) !important
}

.active\:text-indigo-100:active {
    color: var(--indigo-100) !important
}

.active\:text-indigo-200:active {
    color: var(--indigo-200) !important
}

.active\:text-indigo-300:active {
    color: var(--indigo-300) !important
}

.active\:text-indigo-400:active {
    color: var(--indigo-400) !important
}

.active\:text-indigo-500:active {
    color: var(--indigo-500) !important
}

.active\:text-indigo-600:active {
    color: var(--indigo-600) !important
}

.active\:text-indigo-700:active {
    color: var(--indigo-700) !important
}

.active\:text-indigo-800:active {
    color: var(--indigo-800) !important
}

.active\:text-indigo-900:active {
    color: var(--indigo-900) !important
}

.text-teal-50 {
    color: var(--teal-50) !important
}

.text-teal-100 {
    color: var(--teal-100) !important
}

.text-teal-200 {
    color: var(--teal-200) !important
}

.text-teal-300 {
    color: var(--teal-300) !important
}

.text-teal-400 {
    color: var(--teal-400) !important
}

.text-teal-500 {
    color: var(--teal-500) !important
}

.text-teal-600 {
    color: var(--teal-600) !important
}

.text-teal-700 {
    color: var(--teal-700) !important
}

.text-teal-800 {
    color: var(--teal-800) !important
}

.text-teal-900 {
    color: var(--teal-900) !important
}

.focus\:text-teal-50:focus {
    color: var(--teal-50) !important
}

.focus\:text-teal-100:focus {
    color: var(--teal-100) !important
}

.focus\:text-teal-200:focus {
    color: var(--teal-200) !important
}

.focus\:text-teal-300:focus {
    color: var(--teal-300) !important
}

.focus\:text-teal-400:focus {
    color: var(--teal-400) !important
}

.focus\:text-teal-500:focus {
    color: var(--teal-500) !important
}

.focus\:text-teal-600:focus {
    color: var(--teal-600) !important
}

.focus\:text-teal-700:focus {
    color: var(--teal-700) !important
}

.focus\:text-teal-800:focus {
    color: var(--teal-800) !important
}

.focus\:text-teal-900:focus {
    color: var(--teal-900) !important
}

.hover\:text-teal-50:hover {
    color: var(--teal-50) !important
}

.hover\:text-teal-100:hover {
    color: var(--teal-100) !important
}

.hover\:text-teal-200:hover {
    color: var(--teal-200) !important
}

.hover\:text-teal-300:hover {
    color: var(--teal-300) !important
}

.hover\:text-teal-400:hover {
    color: var(--teal-400) !important
}

.hover\:text-teal-500:hover {
    color: var(--teal-500) !important
}

.hover\:text-teal-600:hover {
    color: var(--teal-600) !important
}

.hover\:text-teal-700:hover {
    color: var(--teal-700) !important
}

.hover\:text-teal-800:hover {
    color: var(--teal-800) !important
}

.hover\:text-teal-900:hover {
    color: var(--teal-900) !important
}

.active\:text-teal-50:active {
    color: var(--teal-50) !important
}

.active\:text-teal-100:active {
    color: var(--teal-100) !important
}

.active\:text-teal-200:active {
    color: var(--teal-200) !important
}

.active\:text-teal-300:active {
    color: var(--teal-300) !important
}

.active\:text-teal-400:active {
    color: var(--teal-400) !important
}

.active\:text-teal-500:active {
    color: var(--teal-500) !important
}

.active\:text-teal-600:active {
    color: var(--teal-600) !important
}

.active\:text-teal-700:active {
    color: var(--teal-700) !important
}

.active\:text-teal-800:active {
    color: var(--teal-800) !important
}

.active\:text-teal-900:active {
    color: var(--teal-900) !important
}

.text-orange-50 {
    color: var(--orange-50) !important
}

.text-orange-100 {
    color: var(--orange-100) !important
}

.text-orange-200 {
    color: var(--orange-200) !important
}

.text-orange-300 {
    color: var(--orange-300) !important
}

.text-orange-400 {
    color: var(--orange-400) !important
}

.text-orange-500 {
    color: var(--orange-500) !important
}

.text-orange-600 {
    color: var(--orange-600) !important
}

.text-orange-700 {
    color: var(--orange-700) !important
}

.text-orange-800 {
    color: var(--orange-800) !important
}

.text-orange-900 {
    color: var(--orange-900) !important
}

.focus\:text-orange-50:focus {
    color: var(--orange-50) !important
}

.focus\:text-orange-100:focus {
    color: var(--orange-100) !important
}

.focus\:text-orange-200:focus {
    color: var(--orange-200) !important
}

.focus\:text-orange-300:focus {
    color: var(--orange-300) !important
}

.focus\:text-orange-400:focus {
    color: var(--orange-400) !important
}

.focus\:text-orange-500:focus {
    color: var(--orange-500) !important
}

.focus\:text-orange-600:focus {
    color: var(--orange-600) !important
}

.focus\:text-orange-700:focus {
    color: var(--orange-700) !important
}

.focus\:text-orange-800:focus {
    color: var(--orange-800) !important
}

.focus\:text-orange-900:focus {
    color: var(--orange-900) !important
}

.hover\:text-orange-50:hover {
    color: var(--orange-50) !important
}

.hover\:text-orange-100:hover {
    color: var(--orange-100) !important
}

.hover\:text-orange-200:hover {
    color: var(--orange-200) !important
}

.hover\:text-orange-300:hover {
    color: var(--orange-300) !important
}

.hover\:text-orange-400:hover {
    color: var(--orange-400) !important
}

.hover\:text-orange-500:hover {
    color: var(--orange-500) !important
}

.hover\:text-orange-600:hover {
    color: var(--orange-600) !important
}

.hover\:text-orange-700:hover {
    color: var(--orange-700) !important
}

.hover\:text-orange-800:hover {
    color: var(--orange-800) !important
}

.hover\:text-orange-900:hover {
    color: var(--orange-900) !important
}

.active\:text-orange-50:active {
    color: var(--orange-50) !important
}

.active\:text-orange-100:active {
    color: var(--orange-100) !important
}

.active\:text-orange-200:active {
    color: var(--orange-200) !important
}

.active\:text-orange-300:active {
    color: var(--orange-300) !important
}

.active\:text-orange-400:active {
    color: var(--orange-400) !important
}

.active\:text-orange-500:active {
    color: var(--orange-500) !important
}

.active\:text-orange-600:active {
    color: var(--orange-600) !important
}

.active\:text-orange-700:active {
    color: var(--orange-700) !important
}

.active\:text-orange-800:active {
    color: var(--orange-800) !important
}

.active\:text-orange-900:active {
    color: var(--orange-900) !important
}

.text-bluegray-50 {
    color: var(--bluegray-50) !important
}

.text-bluegray-100 {
    color: var(--bluegray-100) !important
}

.text-bluegray-200 {
    color: var(--bluegray-200) !important
}

.text-bluegray-300 {
    color: var(--bluegray-300) !important
}

.text-bluegray-400 {
    color: var(--bluegray-400) !important
}

.text-bluegray-500 {
    color: var(--bluegray-500) !important
}

.text-bluegray-600 {
    color: var(--bluegray-600) !important
}

.text-bluegray-700 {
    color: var(--bluegray-700) !important
}

.text-bluegray-800 {
    color: var(--bluegray-800) !important
}

.text-bluegray-900 {
    color: var(--bluegray-900) !important
}

.focus\:text-bluegray-50:focus {
    color: var(--bluegray-50) !important
}

.focus\:text-bluegray-100:focus {
    color: var(--bluegray-100) !important
}

.focus\:text-bluegray-200:focus {
    color: var(--bluegray-200) !important
}

.focus\:text-bluegray-300:focus {
    color: var(--bluegray-300) !important
}

.focus\:text-bluegray-400:focus {
    color: var(--bluegray-400) !important
}

.focus\:text-bluegray-500:focus {
    color: var(--bluegray-500) !important
}

.focus\:text-bluegray-600:focus {
    color: var(--bluegray-600) !important
}

.focus\:text-bluegray-700:focus {
    color: var(--bluegray-700) !important
}

.focus\:text-bluegray-800:focus {
    color: var(--bluegray-800) !important
}

.focus\:text-bluegray-900:focus {
    color: var(--bluegray-900) !important
}

.hover\:text-bluegray-50:hover {
    color: var(--bluegray-50) !important
}

.hover\:text-bluegray-100:hover {
    color: var(--bluegray-100) !important
}

.hover\:text-bluegray-200:hover {
    color: var(--bluegray-200) !important
}

.hover\:text-bluegray-300:hover {
    color: var(--bluegray-300) !important
}

.hover\:text-bluegray-400:hover {
    color: var(--bluegray-400) !important
}

.hover\:text-bluegray-500:hover {
    color: var(--bluegray-500) !important
}

.hover\:text-bluegray-600:hover {
    color: var(--bluegray-600) !important
}

.hover\:text-bluegray-700:hover {
    color: var(--bluegray-700) !important
}

.hover\:text-bluegray-800:hover {
    color: var(--bluegray-800) !important
}

.hover\:text-bluegray-900:hover {
    color: var(--bluegray-900) !important
}

.active\:text-bluegray-50:active {
    color: var(--bluegray-50) !important
}

.active\:text-bluegray-100:active {
    color: var(--bluegray-100) !important
}

.active\:text-bluegray-200:active {
    color: var(--bluegray-200) !important
}

.active\:text-bluegray-300:active {
    color: var(--bluegray-300) !important
}

.active\:text-bluegray-400:active {
    color: var(--bluegray-400) !important
}

.active\:text-bluegray-500:active {
    color: var(--bluegray-500) !important
}

.active\:text-bluegray-600:active {
    color: var(--bluegray-600) !important
}

.active\:text-bluegray-700:active {
    color: var(--bluegray-700) !important
}

.active\:text-bluegray-800:active {
    color: var(--bluegray-800) !important
}

.active\:text-bluegray-900:active {
    color: var(--bluegray-900) !important
}

.text-purple-50 {
    color: var(--purple-50) !important
}

.text-purple-100 {
    color: var(--purple-100) !important
}

.text-purple-200 {
    color: var(--purple-200) !important
}

.text-purple-300 {
    color: var(--purple-300) !important
}

.text-purple-400 {
    color: var(--purple-400) !important
}

.text-purple-500 {
    color: var(--purple-500) !important
}

.text-purple-600 {
    color: var(--purple-600) !important
}

.text-purple-700 {
    color: var(--purple-700) !important
}

.text-purple-800 {
    color: var(--purple-800) !important
}

.text-purple-900 {
    color: var(--purple-900) !important
}

.focus\:text-purple-50:focus {
    color: var(--purple-50) !important
}

.focus\:text-purple-100:focus {
    color: var(--purple-100) !important
}

.focus\:text-purple-200:focus {
    color: var(--purple-200) !important
}

.focus\:text-purple-300:focus {
    color: var(--purple-300) !important
}

.focus\:text-purple-400:focus {
    color: var(--purple-400) !important
}

.focus\:text-purple-500:focus {
    color: var(--purple-500) !important
}

.focus\:text-purple-600:focus {
    color: var(--purple-600) !important
}

.focus\:text-purple-700:focus {
    color: var(--purple-700) !important
}

.focus\:text-purple-800:focus {
    color: var(--purple-800) !important
}

.focus\:text-purple-900:focus {
    color: var(--purple-900) !important
}

.hover\:text-purple-50:hover {
    color: var(--purple-50) !important
}

.hover\:text-purple-100:hover {
    color: var(--purple-100) !important
}

.hover\:text-purple-200:hover {
    color: var(--purple-200) !important
}

.hover\:text-purple-300:hover {
    color: var(--purple-300) !important
}

.hover\:text-purple-400:hover {
    color: var(--purple-400) !important
}

.hover\:text-purple-500:hover {
    color: var(--purple-500) !important
}

.hover\:text-purple-600:hover {
    color: var(--purple-600) !important
}

.hover\:text-purple-700:hover {
    color: var(--purple-700) !important
}

.hover\:text-purple-800:hover {
    color: var(--purple-800) !important
}

.hover\:text-purple-900:hover {
    color: var(--purple-900) !important
}

.active\:text-purple-50:active {
    color: var(--purple-50) !important
}

.active\:text-purple-100:active {
    color: var(--purple-100) !important
}

.active\:text-purple-200:active {
    color: var(--purple-200) !important
}

.active\:text-purple-300:active {
    color: var(--purple-300) !important
}

.active\:text-purple-400:active {
    color: var(--purple-400) !important
}

.active\:text-purple-500:active {
    color: var(--purple-500) !important
}

.active\:text-purple-600:active {
    color: var(--purple-600) !important
}

.active\:text-purple-700:active {
    color: var(--purple-700) !important
}

.active\:text-purple-800:active {
    color: var(--purple-800) !important
}

.active\:text-purple-900:active {
    color: var(--purple-900) !important
}

.text-gray-50 {
    color: var(--gray-50) !important
}

.text-gray-100 {
    color: var(--gray-100) !important
}

.text-gray-200 {
    color: var(--gray-200) !important
}

.text-gray-300 {
    color: var(--gray-300) !important
}

.text-gray-400 {
    color: var(--gray-400) !important
}

.text-gray-500 {
    color: var(--gray-500) !important
}

.text-gray-600 {
    color: var(--gray-600) !important
}

.text-gray-700 {
    color: var(--gray-700) !important
}

.text-gray-800 {
    color: var(--gray-800) !important
}

.text-gray-900 {
    color: var(--gray-900) !important
}

.focus\:text-gray-50:focus {
    color: var(--gray-50) !important
}

.focus\:text-gray-100:focus {
    color: var(--gray-100) !important
}

.focus\:text-gray-200:focus {
    color: var(--gray-200) !important
}

.focus\:text-gray-300:focus {
    color: var(--gray-300) !important
}

.focus\:text-gray-400:focus {
    color: var(--gray-400) !important
}

.focus\:text-gray-500:focus {
    color: var(--gray-500) !important
}

.focus\:text-gray-600:focus {
    color: var(--gray-600) !important
}

.focus\:text-gray-700:focus {
    color: var(--gray-700) !important
}

.focus\:text-gray-800:focus {
    color: var(--gray-800) !important
}

.focus\:text-gray-900:focus {
    color: var(--gray-900) !important
}

.hover\:text-gray-50:hover {
    color: var(--gray-50) !important
}

.hover\:text-gray-100:hover {
    color: var(--gray-100) !important
}

.hover\:text-gray-200:hover {
    color: var(--gray-200) !important
}

.hover\:text-gray-300:hover {
    color: var(--gray-300) !important
}

.hover\:text-gray-400:hover {
    color: var(--gray-400) !important
}

.hover\:text-gray-500:hover {
    color: var(--gray-500) !important
}

.hover\:text-gray-600:hover {
    color: var(--gray-600) !important
}

.hover\:text-gray-700:hover {
    color: var(--gray-700) !important
}

.hover\:text-gray-800:hover {
    color: var(--gray-800) !important
}

.hover\:text-gray-900:hover {
    color: var(--gray-900) !important
}

.active\:text-gray-50:active {
    color: var(--gray-50) !important
}

.active\:text-gray-100:active {
    color: var(--gray-100) !important
}

.active\:text-gray-200:active {
    color: var(--gray-200) !important
}

.active\:text-gray-300:active {
    color: var(--gray-300) !important
}

.active\:text-gray-400:active {
    color: var(--gray-400) !important
}

.active\:text-gray-500:active {
    color: var(--gray-500) !important
}

.active\:text-gray-600:active {
    color: var(--gray-600) !important
}

.active\:text-gray-700:active {
    color: var(--gray-700) !important
}

.active\:text-gray-800:active {
    color: var(--gray-800) !important
}

.active\:text-gray-900:active {
    color: var(--gray-900) !important
}

.bg-blue-50 {
    background-color: var(--blue-50) !important
}

.bg-blue-100 {
    background-color: var(--blue-100) !important
}

.bg-blue-200 {
    background-color: var(--blue-200) !important
}

.bg-blue-300 {
    background-color: var(--blue-300) !important
}

.bg-blue-400 {
    background-color: var(--blue-400) !important
}

.bg-blue-500 {
    background-color: var(--blue-500) !important
}

.bg-blue-600 {
    background-color: var(--blue-600) !important
}

.bg-blue-700 {
    background-color: var(--blue-700) !important
}

.bg-blue-800 {
    background-color: var(--blue-800) !important
}

.bg-blue-900 {
    background-color: var(--blue-900) !important
}

.focus\:bg-blue-50:focus {
    background-color: var(--blue-50) !important
}

.focus\:bg-blue-100:focus {
    background-color: var(--blue-100) !important
}

.focus\:bg-blue-200:focus {
    background-color: var(--blue-200) !important
}

.focus\:bg-blue-300:focus {
    background-color: var(--blue-300) !important
}

.focus\:bg-blue-400:focus {
    background-color: var(--blue-400) !important
}

.focus\:bg-blue-500:focus {
    background-color: var(--blue-500) !important
}

.focus\:bg-blue-600:focus {
    background-color: var(--blue-600) !important
}

.focus\:bg-blue-700:focus {
    background-color: var(--blue-700) !important
}

.focus\:bg-blue-800:focus {
    background-color: var(--blue-800) !important
}

.focus\:bg-blue-900:focus {
    background-color: var(--blue-900) !important
}

.hover\:bg-blue-50:hover {
    background-color: var(--blue-50) !important
}

.hover\:bg-blue-100:hover {
    background-color: var(--blue-100) !important
}

.hover\:bg-blue-200:hover {
    background-color: var(--blue-200) !important
}

.hover\:bg-blue-300:hover {
    background-color: var(--blue-300) !important
}

.hover\:bg-blue-400:hover {
    background-color: var(--blue-400) !important
}

.hover\:bg-blue-500:hover {
    background-color: var(--blue-500) !important
}

.hover\:bg-blue-600:hover {
    background-color: var(--blue-600) !important
}

.hover\:bg-blue-700:hover {
    background-color: var(--blue-700) !important
}

.hover\:bg-blue-800:hover {
    background-color: var(--blue-800) !important
}

.hover\:bg-blue-900:hover {
    background-color: var(--blue-900) !important
}

.active\:bg-blue-50:active {
    background-color: var(--blue-50) !important
}

.active\:bg-blue-100:active {
    background-color: var(--blue-100) !important
}

.active\:bg-blue-200:active {
    background-color: var(--blue-200) !important
}

.active\:bg-blue-300:active {
    background-color: var(--blue-300) !important
}

.active\:bg-blue-400:active {
    background-color: var(--blue-400) !important
}

.active\:bg-blue-500:active {
    background-color: var(--blue-500) !important
}

.active\:bg-blue-600:active {
    background-color: var(--blue-600) !important
}

.active\:bg-blue-700:active {
    background-color: var(--blue-700) !important
}

.active\:bg-blue-800:active {
    background-color: var(--blue-800) !important
}

.active\:bg-blue-900:active {
    background-color: var(--blue-900) !important
}

.bg-green-50 {
    background-color: var(--green-50) !important
}

.bg-green-100 {
    background-color: var(--green-100) !important
}

.bg-green-200 {
    background-color: var(--green-200) !important
}

.bg-green-300 {
    background-color: var(--green-300) !important
}

.bg-green-400 {
    background-color: var(--green-400) !important
}

.bg-green-500 {
    background-color: var(--green-500) !important
}

.bg-green-600 {
    background-color: var(--green-600) !important
}

.bg-green-700 {
    background-color: var(--green-700) !important
}

.bg-green-800 {
    background-color: var(--green-800) !important
}

.bg-green-900 {
    background-color: var(--green-900) !important
}

.focus\:bg-green-50:focus {
    background-color: var(--green-50) !important
}

.focus\:bg-green-100:focus {
    background-color: var(--green-100) !important
}

.focus\:bg-green-200:focus {
    background-color: var(--green-200) !important
}

.focus\:bg-green-300:focus {
    background-color: var(--green-300) !important
}

.focus\:bg-green-400:focus {
    background-color: var(--green-400) !important
}

.focus\:bg-green-500:focus {
    background-color: var(--green-500) !important
}

.focus\:bg-green-600:focus {
    background-color: var(--green-600) !important
}

.focus\:bg-green-700:focus {
    background-color: var(--green-700) !important
}

.focus\:bg-green-800:focus {
    background-color: var(--green-800) !important
}

.focus\:bg-green-900:focus {
    background-color: var(--green-900) !important
}

.hover\:bg-green-50:hover {
    background-color: var(--green-50) !important
}

.hover\:bg-green-100:hover {
    background-color: var(--green-100) !important
}

.hover\:bg-green-200:hover {
    background-color: var(--green-200) !important
}

.hover\:bg-green-300:hover {
    background-color: var(--green-300) !important
}

.hover\:bg-green-400:hover {
    background-color: var(--green-400) !important
}

.hover\:bg-green-500:hover {
    background-color: var(--green-500) !important
}

.hover\:bg-green-600:hover {
    background-color: var(--green-600) !important
}

.hover\:bg-green-700:hover {
    background-color: var(--green-700) !important
}

.hover\:bg-green-800:hover {
    background-color: var(--green-800) !important
}

.hover\:bg-green-900:hover {
    background-color: var(--green-900) !important
}

.active\:bg-green-50:active {
    background-color: var(--green-50) !important
}

.active\:bg-green-100:active {
    background-color: var(--green-100) !important
}

.active\:bg-green-200:active {
    background-color: var(--green-200) !important
}

.active\:bg-green-300:active {
    background-color: var(--green-300) !important
}

.active\:bg-green-400:active {
    background-color: var(--green-400) !important
}

.active\:bg-green-500:active {
    background-color: var(--green-500) !important
}

.active\:bg-green-600:active {
    background-color: var(--green-600) !important
}

.active\:bg-green-700:active {
    background-color: var(--green-700) !important
}

.active\:bg-green-800:active {
    background-color: var(--green-800) !important
}

.active\:bg-green-900:active {
    background-color: var(--green-900) !important
}

.bg-yellow-50 {
    background-color: var(--yellow-50) !important
}

.bg-yellow-100 {
    background-color: var(--yellow-100) !important
}

.bg-yellow-200 {
    background-color: var(--yellow-200) !important
}

.bg-yellow-300 {
    background-color: var(--yellow-300) !important
}

.bg-yellow-400 {
    background-color: var(--yellow-400) !important
}

.bg-yellow-500 {
    background-color: var(--yellow-500) !important
}

.bg-yellow-600 {
    background-color: var(--yellow-600) !important
}

.bg-yellow-700 {
    background-color: var(--yellow-700) !important
}

.bg-yellow-800 {
    background-color: var(--yellow-800) !important
}

.bg-yellow-900 {
    background-color: var(--yellow-900) !important
}

.focus\:bg-yellow-50:focus {
    background-color: var(--yellow-50) !important
}

.focus\:bg-yellow-100:focus {
    background-color: var(--yellow-100) !important
}

.focus\:bg-yellow-200:focus {
    background-color: var(--yellow-200) !important
}

.focus\:bg-yellow-300:focus {
    background-color: var(--yellow-300) !important
}

.focus\:bg-yellow-400:focus {
    background-color: var(--yellow-400) !important
}

.focus\:bg-yellow-500:focus {
    background-color: var(--yellow-500) !important
}

.focus\:bg-yellow-600:focus {
    background-color: var(--yellow-600) !important
}

.focus\:bg-yellow-700:focus {
    background-color: var(--yellow-700) !important
}

.focus\:bg-yellow-800:focus {
    background-color: var(--yellow-800) !important
}

.focus\:bg-yellow-900:focus {
    background-color: var(--yellow-900) !important
}

.hover\:bg-yellow-50:hover {
    background-color: var(--yellow-50) !important
}

.hover\:bg-yellow-100:hover {
    background-color: var(--yellow-100) !important
}

.hover\:bg-yellow-200:hover {
    background-color: var(--yellow-200) !important
}

.hover\:bg-yellow-300:hover {
    background-color: var(--yellow-300) !important
}

.hover\:bg-yellow-400:hover {
    background-color: var(--yellow-400) !important
}

.hover\:bg-yellow-500:hover {
    background-color: var(--yellow-500) !important
}

.hover\:bg-yellow-600:hover {
    background-color: var(--yellow-600) !important
}

.hover\:bg-yellow-700:hover {
    background-color: var(--yellow-700) !important
}

.hover\:bg-yellow-800:hover {
    background-color: var(--yellow-800) !important
}

.hover\:bg-yellow-900:hover {
    background-color: var(--yellow-900) !important
}

.active\:bg-yellow-50:active {
    background-color: var(--yellow-50) !important
}

.active\:bg-yellow-100:active {
    background-color: var(--yellow-100) !important
}

.active\:bg-yellow-200:active {
    background-color: var(--yellow-200) !important
}

.active\:bg-yellow-300:active {
    background-color: var(--yellow-300) !important
}

.active\:bg-yellow-400:active {
    background-color: var(--yellow-400) !important
}

.active\:bg-yellow-500:active {
    background-color: var(--yellow-500) !important
}

.active\:bg-yellow-600:active {
    background-color: var(--yellow-600) !important
}

.active\:bg-yellow-700:active {
    background-color: var(--yellow-700) !important
}

.active\:bg-yellow-800:active {
    background-color: var(--yellow-800) !important
}

.active\:bg-yellow-900:active {
    background-color: var(--yellow-900) !important
}

.bg-cyan-50 {
    background-color: var(--cyan-50) !important
}

.bg-cyan-100 {
    background-color: var(--cyan-100) !important
}

.bg-cyan-200 {
    background-color: var(--cyan-200) !important
}

.bg-cyan-300 {
    background-color: var(--cyan-300) !important
}

.bg-cyan-400 {
    background-color: var(--cyan-400) !important
}

.bg-cyan-500 {
    background-color: var(--cyan-500) !important
}

.bg-cyan-600 {
    background-color: var(--cyan-600) !important
}

.bg-cyan-700 {
    background-color: var(--cyan-700) !important
}

.bg-cyan-800 {
    background-color: var(--cyan-800) !important
}

.bg-cyan-900 {
    background-color: var(--cyan-900) !important
}

.focus\:bg-cyan-50:focus {
    background-color: var(--cyan-50) !important
}

.focus\:bg-cyan-100:focus {
    background-color: var(--cyan-100) !important
}

.focus\:bg-cyan-200:focus {
    background-color: var(--cyan-200) !important
}

.focus\:bg-cyan-300:focus {
    background-color: var(--cyan-300) !important
}

.focus\:bg-cyan-400:focus {
    background-color: var(--cyan-400) !important
}

.focus\:bg-cyan-500:focus {
    background-color: var(--cyan-500) !important
}

.focus\:bg-cyan-600:focus {
    background-color: var(--cyan-600) !important
}

.focus\:bg-cyan-700:focus {
    background-color: var(--cyan-700) !important
}

.focus\:bg-cyan-800:focus {
    background-color: var(--cyan-800) !important
}

.focus\:bg-cyan-900:focus {
    background-color: var(--cyan-900) !important
}

.hover\:bg-cyan-50:hover {
    background-color: var(--cyan-50) !important
}

.hover\:bg-cyan-100:hover {
    background-color: var(--cyan-100) !important
}

.hover\:bg-cyan-200:hover {
    background-color: var(--cyan-200) !important
}

.hover\:bg-cyan-300:hover {
    background-color: var(--cyan-300) !important
}

.hover\:bg-cyan-400:hover {
    background-color: var(--cyan-400) !important
}

.hover\:bg-cyan-500:hover {
    background-color: var(--cyan-500) !important
}

.hover\:bg-cyan-600:hover {
    background-color: var(--cyan-600) !important
}

.hover\:bg-cyan-700:hover {
    background-color: var(--cyan-700) !important
}

.hover\:bg-cyan-800:hover {
    background-color: var(--cyan-800) !important
}

.hover\:bg-cyan-900:hover {
    background-color: var(--cyan-900) !important
}

.active\:bg-cyan-50:active {
    background-color: var(--cyan-50) !important
}

.active\:bg-cyan-100:active {
    background-color: var(--cyan-100) !important
}

.active\:bg-cyan-200:active {
    background-color: var(--cyan-200) !important
}

.active\:bg-cyan-300:active {
    background-color: var(--cyan-300) !important
}

.active\:bg-cyan-400:active {
    background-color: var(--cyan-400) !important
}

.active\:bg-cyan-500:active {
    background-color: var(--cyan-500) !important
}

.active\:bg-cyan-600:active {
    background-color: var(--cyan-600) !important
}

.active\:bg-cyan-700:active {
    background-color: var(--cyan-700) !important
}

.active\:bg-cyan-800:active {
    background-color: var(--cyan-800) !important
}

.active\:bg-cyan-900:active {
    background-color: var(--cyan-900) !important
}

.bg-pink-50 {
    background-color: var(--pink-50) !important
}

.bg-pink-100 {
    background-color: var(--pink-100) !important
}

.bg-pink-200 {
    background-color: var(--pink-200) !important
}

.bg-pink-300 {
    background-color: var(--pink-300) !important
}

.bg-pink-400 {
    background-color: var(--pink-400) !important
}

.bg-pink-500 {
    background-color: var(--pink-500) !important
}

.bg-pink-600 {
    background-color: var(--pink-600) !important
}

.bg-pink-700 {
    background-color: var(--pink-700) !important
}

.bg-pink-800 {
    background-color: var(--pink-800) !important
}

.bg-pink-900 {
    background-color: var(--pink-900) !important
}

.focus\:bg-pink-50:focus {
    background-color: var(--pink-50) !important
}

.focus\:bg-pink-100:focus {
    background-color: var(--pink-100) !important
}

.focus\:bg-pink-200:focus {
    background-color: var(--pink-200) !important
}

.focus\:bg-pink-300:focus {
    background-color: var(--pink-300) !important
}

.focus\:bg-pink-400:focus {
    background-color: var(--pink-400) !important
}

.focus\:bg-pink-500:focus {
    background-color: var(--pink-500) !important
}

.focus\:bg-pink-600:focus {
    background-color: var(--pink-600) !important
}

.focus\:bg-pink-700:focus {
    background-color: var(--pink-700) !important
}

.focus\:bg-pink-800:focus {
    background-color: var(--pink-800) !important
}

.focus\:bg-pink-900:focus {
    background-color: var(--pink-900) !important
}

.hover\:bg-pink-50:hover {
    background-color: var(--pink-50) !important
}

.hover\:bg-pink-100:hover {
    background-color: var(--pink-100) !important
}

.hover\:bg-pink-200:hover {
    background-color: var(--pink-200) !important
}

.hover\:bg-pink-300:hover {
    background-color: var(--pink-300) !important
}

.hover\:bg-pink-400:hover {
    background-color: var(--pink-400) !important
}

.hover\:bg-pink-500:hover {
    background-color: var(--pink-500) !important
}

.hover\:bg-pink-600:hover {
    background-color: var(--pink-600) !important
}

.hover\:bg-pink-700:hover {
    background-color: var(--pink-700) !important
}

.hover\:bg-pink-800:hover {
    background-color: var(--pink-800) !important
}

.hover\:bg-pink-900:hover {
    background-color: var(--pink-900) !important
}

.active\:bg-pink-50:active {
    background-color: var(--pink-50) !important
}

.active\:bg-pink-100:active {
    background-color: var(--pink-100) !important
}

.active\:bg-pink-200:active {
    background-color: var(--pink-200) !important
}

.active\:bg-pink-300:active {
    background-color: var(--pink-300) !important
}

.active\:bg-pink-400:active {
    background-color: var(--pink-400) !important
}

.active\:bg-pink-500:active {
    background-color: var(--pink-500) !important
}

.active\:bg-pink-600:active {
    background-color: var(--pink-600) !important
}

.active\:bg-pink-700:active {
    background-color: var(--pink-700) !important
}

.active\:bg-pink-800:active {
    background-color: var(--pink-800) !important
}

.active\:bg-pink-900:active {
    background-color: var(--pink-900) !important
}

.bg-indigo-50 {
    background-color: var(--indigo-50) !important
}

.bg-indigo-100 {
    background-color: var(--indigo-100) !important
}

.bg-indigo-200 {
    background-color: var(--indigo-200) !important
}

.bg-indigo-300 {
    background-color: var(--indigo-300) !important
}

.bg-indigo-400 {
    background-color: var(--indigo-400) !important
}

.bg-indigo-500 {
    background-color: var(--indigo-500) !important
}

.bg-indigo-600 {
    background-color: var(--indigo-600) !important
}

.bg-indigo-700 {
    background-color: var(--indigo-700) !important
}

.bg-indigo-800 {
    background-color: var(--indigo-800) !important
}

.bg-indigo-900 {
    background-color: var(--indigo-900) !important
}

.focus\:bg-indigo-50:focus {
    background-color: var(--indigo-50) !important
}

.focus\:bg-indigo-100:focus {
    background-color: var(--indigo-100) !important
}

.focus\:bg-indigo-200:focus {
    background-color: var(--indigo-200) !important
}

.focus\:bg-indigo-300:focus {
    background-color: var(--indigo-300) !important
}

.focus\:bg-indigo-400:focus {
    background-color: var(--indigo-400) !important
}

.focus\:bg-indigo-500:focus {
    background-color: var(--indigo-500) !important
}

.focus\:bg-indigo-600:focus {
    background-color: var(--indigo-600) !important
}

.focus\:bg-indigo-700:focus {
    background-color: var(--indigo-700) !important
}

.focus\:bg-indigo-800:focus {
    background-color: var(--indigo-800) !important
}

.focus\:bg-indigo-900:focus {
    background-color: var(--indigo-900) !important
}

.hover\:bg-indigo-50:hover {
    background-color: var(--indigo-50) !important
}

.hover\:bg-indigo-100:hover {
    background-color: var(--indigo-100) !important
}

.hover\:bg-indigo-200:hover {
    background-color: var(--indigo-200) !important
}

.hover\:bg-indigo-300:hover {
    background-color: var(--indigo-300) !important
}

.hover\:bg-indigo-400:hover {
    background-color: var(--indigo-400) !important
}

.hover\:bg-indigo-500:hover {
    background-color: var(--indigo-500) !important
}

.hover\:bg-indigo-600:hover {
    background-color: var(--indigo-600) !important
}

.hover\:bg-indigo-700:hover {
    background-color: var(--indigo-700) !important
}

.hover\:bg-indigo-800:hover {
    background-color: var(--indigo-800) !important
}

.hover\:bg-indigo-900:hover {
    background-color: var(--indigo-900) !important
}

.active\:bg-indigo-50:active {
    background-color: var(--indigo-50) !important
}

.active\:bg-indigo-100:active {
    background-color: var(--indigo-100) !important
}

.active\:bg-indigo-200:active {
    background-color: var(--indigo-200) !important
}

.active\:bg-indigo-300:active {
    background-color: var(--indigo-300) !important
}

.active\:bg-indigo-400:active {
    background-color: var(--indigo-400) !important
}

.active\:bg-indigo-500:active {
    background-color: var(--indigo-500) !important
}

.active\:bg-indigo-600:active {
    background-color: var(--indigo-600) !important
}

.active\:bg-indigo-700:active {
    background-color: var(--indigo-700) !important
}

.active\:bg-indigo-800:active {
    background-color: var(--indigo-800) !important
}

.active\:bg-indigo-900:active {
    background-color: var(--indigo-900) !important
}

.bg-teal-50 {
    background-color: var(--teal-50) !important
}

.bg-teal-100 {
    background-color: var(--teal-100) !important
}

.bg-teal-200 {
    background-color: var(--teal-200) !important
}

.bg-teal-300 {
    background-color: var(--teal-300) !important
}

.bg-teal-400 {
    background-color: var(--teal-400) !important
}

.bg-teal-500 {
    background-color: var(--teal-500) !important
}

.bg-teal-600 {
    background-color: var(--teal-600) !important
}

.bg-teal-700 {
    background-color: var(--teal-700) !important
}

.bg-teal-800 {
    background-color: var(--teal-800) !important
}

.bg-teal-900 {
    background-color: var(--teal-900) !important
}

.focus\:bg-teal-50:focus {
    background-color: var(--teal-50) !important
}

.focus\:bg-teal-100:focus {
    background-color: var(--teal-100) !important
}

.focus\:bg-teal-200:focus {
    background-color: var(--teal-200) !important
}

.focus\:bg-teal-300:focus {
    background-color: var(--teal-300) !important
}

.focus\:bg-teal-400:focus {
    background-color: var(--teal-400) !important
}

.focus\:bg-teal-500:focus {
    background-color: var(--teal-500) !important
}

.focus\:bg-teal-600:focus {
    background-color: var(--teal-600) !important
}

.focus\:bg-teal-700:focus {
    background-color: var(--teal-700) !important
}

.focus\:bg-teal-800:focus {
    background-color: var(--teal-800) !important
}

.focus\:bg-teal-900:focus {
    background-color: var(--teal-900) !important
}

.hover\:bg-teal-50:hover {
    background-color: var(--teal-50) !important
}

.hover\:bg-teal-100:hover {
    background-color: var(--teal-100) !important
}

.hover\:bg-teal-200:hover {
    background-color: var(--teal-200) !important
}

.hover\:bg-teal-300:hover {
    background-color: var(--teal-300) !important
}

.hover\:bg-teal-400:hover {
    background-color: var(--teal-400) !important
}

.hover\:bg-teal-500:hover {
    background-color: var(--teal-500) !important
}

.hover\:bg-teal-600:hover {
    background-color: var(--teal-600) !important
}

.hover\:bg-teal-700:hover {
    background-color: var(--teal-700) !important
}

.hover\:bg-teal-800:hover {
    background-color: var(--teal-800) !important
}

.hover\:bg-teal-900:hover {
    background-color: var(--teal-900) !important
}

.active\:bg-teal-50:active {
    background-color: var(--teal-50) !important
}

.active\:bg-teal-100:active {
    background-color: var(--teal-100) !important
}

.active\:bg-teal-200:active {
    background-color: var(--teal-200) !important
}

.active\:bg-teal-300:active {
    background-color: var(--teal-300) !important
}

.active\:bg-teal-400:active {
    background-color: var(--teal-400) !important
}

.active\:bg-teal-500:active {
    background-color: var(--teal-500) !important
}

.active\:bg-teal-600:active {
    background-color: var(--teal-600) !important
}

.active\:bg-teal-700:active {
    background-color: var(--teal-700) !important
}

.active\:bg-teal-800:active {
    background-color: var(--teal-800) !important
}

.active\:bg-teal-900:active {
    background-color: var(--teal-900) !important
}

.bg-orange-50 {
    background-color: var(--orange-50) !important
}

.bg-orange-100 {
    background-color: var(--orange-100) !important
}

.bg-orange-200 {
    background-color: var(--orange-200) !important
}

.bg-orange-300 {
    background-color: var(--orange-300) !important
}

.bg-orange-400 {
    background-color: var(--orange-400) !important
}

.bg-orange-500 {
    background-color: var(--orange-500) !important
}

.bg-orange-600 {
    background-color: var(--orange-600) !important
}

.bg-orange-700 {
    background-color: var(--orange-700) !important
}

.bg-orange-800 {
    background-color: var(--orange-800) !important
}

.bg-orange-900 {
    background-color: var(--orange-900) !important
}

.focus\:bg-orange-50:focus {
    background-color: var(--orange-50) !important
}

.focus\:bg-orange-100:focus {
    background-color: var(--orange-100) !important
}

.focus\:bg-orange-200:focus {
    background-color: var(--orange-200) !important
}

.focus\:bg-orange-300:focus {
    background-color: var(--orange-300) !important
}

.focus\:bg-orange-400:focus {
    background-color: var(--orange-400) !important
}

.focus\:bg-orange-500:focus {
    background-color: var(--orange-500) !important
}

.focus\:bg-orange-600:focus {
    background-color: var(--orange-600) !important
}

.focus\:bg-orange-700:focus {
    background-color: var(--orange-700) !important
}

.focus\:bg-orange-800:focus {
    background-color: var(--orange-800) !important
}

.focus\:bg-orange-900:focus {
    background-color: var(--orange-900) !important
}

.hover\:bg-orange-50:hover {
    background-color: var(--orange-50) !important
}

.hover\:bg-orange-100:hover {
    background-color: var(--orange-100) !important
}

.hover\:bg-orange-200:hover {
    background-color: var(--orange-200) !important
}

.hover\:bg-orange-300:hover {
    background-color: var(--orange-300) !important
}

.hover\:bg-orange-400:hover {
    background-color: var(--orange-400) !important
}

.hover\:bg-orange-500:hover {
    background-color: var(--orange-500) !important
}

.hover\:bg-orange-600:hover {
    background-color: var(--orange-600) !important
}

.hover\:bg-orange-700:hover {
    background-color: var(--orange-700) !important
}

.hover\:bg-orange-800:hover {
    background-color: var(--orange-800) !important
}

.hover\:bg-orange-900:hover {
    background-color: var(--orange-900) !important
}

.active\:bg-orange-50:active {
    background-color: var(--orange-50) !important
}

.active\:bg-orange-100:active {
    background-color: var(--orange-100) !important
}

.active\:bg-orange-200:active {
    background-color: var(--orange-200) !important
}

.active\:bg-orange-300:active {
    background-color: var(--orange-300) !important
}

.active\:bg-orange-400:active {
    background-color: var(--orange-400) !important
}

.active\:bg-orange-500:active {
    background-color: var(--orange-500) !important
}

.active\:bg-orange-600:active {
    background-color: var(--orange-600) !important
}

.active\:bg-orange-700:active {
    background-color: var(--orange-700) !important
}

.active\:bg-orange-800:active {
    background-color: var(--orange-800) !important
}

.active\:bg-orange-900:active {
    background-color: var(--orange-900) !important
}

.bg-bluegray-50 {
    background-color: var(--bluegray-50) !important
}

.bg-bluegray-100 {
    background-color: var(--bluegray-100) !important
}

.bg-bluegray-200 {
    background-color: var(--bluegray-200) !important
}

.bg-bluegray-300 {
    background-color: var(--bluegray-300) !important
}

.bg-bluegray-400 {
    background-color: var(--bluegray-400) !important
}

.bg-bluegray-500 {
    background-color: var(--bluegray-500) !important
}

.bg-bluegray-600 {
    background-color: var(--bluegray-600) !important
}

.bg-bluegray-700 {
    background-color: var(--bluegray-700) !important
}

.bg-bluegray-800 {
    background-color: var(--bluegray-800) !important
}

.bg-bluegray-900 {
    background-color: var(--bluegray-900) !important
}

.focus\:bg-bluegray-50:focus {
    background-color: var(--bluegray-50) !important
}

.focus\:bg-bluegray-100:focus {
    background-color: var(--bluegray-100) !important
}

.focus\:bg-bluegray-200:focus {
    background-color: var(--bluegray-200) !important
}

.focus\:bg-bluegray-300:focus {
    background-color: var(--bluegray-300) !important
}

.focus\:bg-bluegray-400:focus {
    background-color: var(--bluegray-400) !important
}

.focus\:bg-bluegray-500:focus {
    background-color: var(--bluegray-500) !important
}

.focus\:bg-bluegray-600:focus {
    background-color: var(--bluegray-600) !important
}

.focus\:bg-bluegray-700:focus {
    background-color: var(--bluegray-700) !important
}

.focus\:bg-bluegray-800:focus {
    background-color: var(--bluegray-800) !important
}

.focus\:bg-bluegray-900:focus {
    background-color: var(--bluegray-900) !important
}

.hover\:bg-bluegray-50:hover {
    background-color: var(--bluegray-50) !important
}

.hover\:bg-bluegray-100:hover {
    background-color: var(--bluegray-100) !important
}

.hover\:bg-bluegray-200:hover {
    background-color: var(--bluegray-200) !important
}

.hover\:bg-bluegray-300:hover {
    background-color: var(--bluegray-300) !important
}

.hover\:bg-bluegray-400:hover {
    background-color: var(--bluegray-400) !important
}

.hover\:bg-bluegray-500:hover {
    background-color: var(--bluegray-500) !important
}

.hover\:bg-bluegray-600:hover {
    background-color: var(--bluegray-600) !important
}

.hover\:bg-bluegray-700:hover {
    background-color: var(--bluegray-700) !important
}

.hover\:bg-bluegray-800:hover {
    background-color: var(--bluegray-800) !important
}

.hover\:bg-bluegray-900:hover {
    background-color: var(--bluegray-900) !important
}

.active\:bg-bluegray-50:active {
    background-color: var(--bluegray-50) !important
}

.active\:bg-bluegray-100:active {
    background-color: var(--bluegray-100) !important
}

.active\:bg-bluegray-200:active {
    background-color: var(--bluegray-200) !important
}

.active\:bg-bluegray-300:active {
    background-color: var(--bluegray-300) !important
}

.active\:bg-bluegray-400:active {
    background-color: var(--bluegray-400) !important
}

.active\:bg-bluegray-500:active {
    background-color: var(--bluegray-500) !important
}

.active\:bg-bluegray-600:active {
    background-color: var(--bluegray-600) !important
}

.active\:bg-bluegray-700:active {
    background-color: var(--bluegray-700) !important
}

.active\:bg-bluegray-800:active {
    background-color: var(--bluegray-800) !important
}

.active\:bg-bluegray-900:active {
    background-color: var(--bluegray-900) !important
}

.bg-purple-50 {
    background-color: var(--purple-50) !important
}

.bg-purple-100 {
    background-color: var(--purple-100) !important
}

.bg-purple-200 {
    background-color: var(--purple-200) !important
}

.bg-purple-300 {
    background-color: var(--purple-300) !important
}

.bg-purple-400 {
    background-color: var(--purple-400) !important
}

.bg-purple-500 {
    background-color: var(--purple-500) !important
}

.bg-purple-600 {
    background-color: var(--purple-600) !important
}

.bg-purple-700 {
    background-color: var(--purple-700) !important
}

.bg-purple-800 {
    background-color: var(--purple-800) !important
}

.bg-purple-900 {
    background-color: var(--purple-900) !important
}

.focus\:bg-purple-50:focus {
    background-color: var(--purple-50) !important
}

.focus\:bg-purple-100:focus {
    background-color: var(--purple-100) !important
}

.focus\:bg-purple-200:focus {
    background-color: var(--purple-200) !important
}

.focus\:bg-purple-300:focus {
    background-color: var(--purple-300) !important
}

.focus\:bg-purple-400:focus {
    background-color: var(--purple-400) !important
}

.focus\:bg-purple-500:focus {
    background-color: var(--purple-500) !important
}

.focus\:bg-purple-600:focus {
    background-color: var(--purple-600) !important
}

.focus\:bg-purple-700:focus {
    background-color: var(--purple-700) !important
}

.focus\:bg-purple-800:focus {
    background-color: var(--purple-800) !important
}

.focus\:bg-purple-900:focus {
    background-color: var(--purple-900) !important
}

.hover\:bg-purple-50:hover {
    background-color: var(--purple-50) !important
}

.hover\:bg-purple-100:hover {
    background-color: var(--purple-100) !important
}

.hover\:bg-purple-200:hover {
    background-color: var(--purple-200) !important
}

.hover\:bg-purple-300:hover {
    background-color: var(--purple-300) !important
}

.hover\:bg-purple-400:hover {
    background-color: var(--purple-400) !important
}

.hover\:bg-purple-500:hover {
    background-color: var(--purple-500) !important
}

.hover\:bg-purple-600:hover {
    background-color: var(--purple-600) !important
}

.hover\:bg-purple-700:hover {
    background-color: var(--purple-700) !important
}

.hover\:bg-purple-800:hover {
    background-color: var(--purple-800) !important
}

.hover\:bg-purple-900:hover {
    background-color: var(--purple-900) !important
}

.active\:bg-purple-50:active {
    background-color: var(--purple-50) !important
}

.active\:bg-purple-100:active {
    background-color: var(--purple-100) !important
}

.active\:bg-purple-200:active {
    background-color: var(--purple-200) !important
}

.active\:bg-purple-300:active {
    background-color: var(--purple-300) !important
}

.active\:bg-purple-400:active {
    background-color: var(--purple-400) !important
}

.active\:bg-purple-500:active {
    background-color: var(--purple-500) !important
}

.active\:bg-purple-600:active {
    background-color: var(--purple-600) !important
}

.active\:bg-purple-700:active {
    background-color: var(--purple-700) !important
}

.active\:bg-purple-800:active {
    background-color: var(--purple-800) !important
}

.active\:bg-purple-900:active {
    background-color: var(--purple-900) !important
}

.bg-gray-50 {
    background-color: var(--gray-50) !important
}

.bg-gray-100 {
    background-color: var(--gray-100) !important
}

.bg-gray-200 {
    background-color: var(--gray-200) !important
}

.bg-gray-300 {
    background-color: var(--gray-300) !important
}

.bg-gray-400 {
    background-color: var(--gray-400) !important
}

.bg-gray-500 {
    background-color: var(--gray-500) !important
}

.bg-gray-600 {
    background-color: var(--gray-600) !important
}

.bg-gray-700 {
    background-color: var(--gray-700) !important
}

.bg-gray-800 {
    background-color: var(--gray-800) !important
}

.bg-gray-900 {
    background-color: var(--gray-900) !important
}

.focus\:bg-gray-50:focus {
    background-color: var(--gray-50) !important
}

.focus\:bg-gray-100:focus {
    background-color: var(--gray-100) !important
}

.focus\:bg-gray-200:focus {
    background-color: var(--gray-200) !important
}

.focus\:bg-gray-300:focus {
    background-color: var(--gray-300) !important
}

.focus\:bg-gray-400:focus {
    background-color: var(--gray-400) !important
}

.focus\:bg-gray-500:focus {
    background-color: var(--gray-500) !important
}

.focus\:bg-gray-600:focus {
    background-color: var(--gray-600) !important
}

.focus\:bg-gray-700:focus {
    background-color: var(--gray-700) !important
}

.focus\:bg-gray-800:focus {
    background-color: var(--gray-800) !important
}

.focus\:bg-gray-900:focus {
    background-color: var(--gray-900) !important
}

.hover\:bg-gray-50:hover {
    background-color: var(--gray-50) !important
}

.hover\:bg-gray-100:hover {
    background-color: var(--gray-100) !important
}

.hover\:bg-gray-200:hover {
    background-color: var(--gray-200) !important
}

.hover\:bg-gray-300:hover {
    background-color: var(--gray-300) !important
}

.hover\:bg-gray-400:hover {
    background-color: var(--gray-400) !important
}

.hover\:bg-gray-500:hover {
    background-color: var(--gray-500) !important
}

.hover\:bg-gray-600:hover {
    background-color: var(--gray-600) !important
}

.hover\:bg-gray-700:hover {
    background-color: var(--gray-700) !important
}

.hover\:bg-gray-800:hover {
    background-color: var(--gray-800) !important
}

.hover\:bg-gray-900:hover {
    background-color: var(--gray-900) !important
}

.active\:bg-gray-50:active {
    background-color: var(--gray-50) !important
}

.active\:bg-gray-100:active {
    background-color: var(--gray-100) !important
}

.active\:bg-gray-200:active {
    background-color: var(--gray-200) !important
}

.active\:bg-gray-300:active {
    background-color: var(--gray-300) !important
}

.active\:bg-gray-400:active {
    background-color: var(--gray-400) !important
}

.active\:bg-gray-500:active {
    background-color: var(--gray-500) !important
}

.active\:bg-gray-600:active {
    background-color: var(--gray-600) !important
}

.active\:bg-gray-700:active {
    background-color: var(--gray-700) !important
}

.active\:bg-gray-800:active {
    background-color: var(--gray-800) !important
}

.active\:bg-gray-900:active {
    background-color: var(--gray-900) !important
}

.border-blue-50 {
    border-color: var(--blue-50) !important
}

.border-blue-100 {
    border-color: var(--blue-100) !important
}

.border-blue-200 {
    border-color: var(--blue-200) !important
}

.border-blue-300 {
    border-color: var(--blue-300) !important
}

.border-blue-400 {
    border-color: var(--blue-400) !important
}

.border-blue-500 {
    border-color: var(--blue-500) !important
}

.border-blue-600 {
    border-color: var(--blue-600) !important
}

.border-blue-700 {
    border-color: var(--blue-700) !important
}

.border-blue-800 {
    border-color: var(--blue-800) !important
}

.border-blue-900 {
    border-color: var(--blue-900) !important
}

.focus\:border-blue-50:focus {
    border-color: var(--blue-50) !important
}

.focus\:border-blue-100:focus {
    border-color: var(--blue-100) !important
}

.focus\:border-blue-200:focus {
    border-color: var(--blue-200) !important
}

.focus\:border-blue-300:focus {
    border-color: var(--blue-300) !important
}

.focus\:border-blue-400:focus {
    border-color: var(--blue-400) !important
}

.focus\:border-blue-500:focus {
    border-color: var(--blue-500) !important
}

.focus\:border-blue-600:focus {
    border-color: var(--blue-600) !important
}

.focus\:border-blue-700:focus {
    border-color: var(--blue-700) !important
}

.focus\:border-blue-800:focus {
    border-color: var(--blue-800) !important
}

.focus\:border-blue-900:focus {
    border-color: var(--blue-900) !important
}

.hover\:border-blue-50:hover {
    border-color: var(--blue-50) !important
}

.hover\:border-blue-100:hover {
    border-color: var(--blue-100) !important
}

.hover\:border-blue-200:hover {
    border-color: var(--blue-200) !important
}

.hover\:border-blue-300:hover {
    border-color: var(--blue-300) !important
}

.hover\:border-blue-400:hover {
    border-color: var(--blue-400) !important
}

.hover\:border-blue-500:hover {
    border-color: var(--blue-500) !important
}

.hover\:border-blue-600:hover {
    border-color: var(--blue-600) !important
}

.hover\:border-blue-700:hover {
    border-color: var(--blue-700) !important
}

.hover\:border-blue-800:hover {
    border-color: var(--blue-800) !important
}

.hover\:border-blue-900:hover {
    border-color: var(--blue-900) !important
}

.active\:border-blue-50:active {
    border-color: var(--blue-50) !important
}

.active\:border-blue-100:active {
    border-color: var(--blue-100) !important
}

.active\:border-blue-200:active {
    border-color: var(--blue-200) !important
}

.active\:border-blue-300:active {
    border-color: var(--blue-300) !important
}

.active\:border-blue-400:active {
    border-color: var(--blue-400) !important
}

.active\:border-blue-500:active {
    border-color: var(--blue-500) !important
}

.active\:border-blue-600:active {
    border-color: var(--blue-600) !important
}

.active\:border-blue-700:active {
    border-color: var(--blue-700) !important
}

.active\:border-blue-800:active {
    border-color: var(--blue-800) !important
}

.active\:border-blue-900:active {
    border-color: var(--blue-900) !important
}

.border-green-50 {
    border-color: var(--green-50) !important
}

.border-green-100 {
    border-color: var(--green-100) !important
}

.border-green-200 {
    border-color: var(--green-200) !important
}

.border-green-300 {
    border-color: var(--green-300) !important
}

.border-green-400 {
    border-color: var(--green-400) !important
}

.border-green-500 {
    border-color: var(--green-500) !important
}

.border-green-600 {
    border-color: var(--green-600) !important
}

.border-green-700 {
    border-color: var(--green-700) !important
}

.border-green-800 {
    border-color: var(--green-800) !important
}

.border-green-900 {
    border-color: var(--green-900) !important
}

.focus\:border-green-50:focus {
    border-color: var(--green-50) !important
}

.focus\:border-green-100:focus {
    border-color: var(--green-100) !important
}

.focus\:border-green-200:focus {
    border-color: var(--green-200) !important
}

.focus\:border-green-300:focus {
    border-color: var(--green-300) !important
}

.focus\:border-green-400:focus {
    border-color: var(--green-400) !important
}

.focus\:border-green-500:focus {
    border-color: var(--green-500) !important
}

.focus\:border-green-600:focus {
    border-color: var(--green-600) !important
}

.focus\:border-green-700:focus {
    border-color: var(--green-700) !important
}

.focus\:border-green-800:focus {
    border-color: var(--green-800) !important
}

.focus\:border-green-900:focus {
    border-color: var(--green-900) !important
}

.hover\:border-green-50:hover {
    border-color: var(--green-50) !important
}

.hover\:border-green-100:hover {
    border-color: var(--green-100) !important
}

.hover\:border-green-200:hover {
    border-color: var(--green-200) !important
}

.hover\:border-green-300:hover {
    border-color: var(--green-300) !important
}

.hover\:border-green-400:hover {
    border-color: var(--green-400) !important
}

.hover\:border-green-500:hover {
    border-color: var(--green-500) !important
}

.hover\:border-green-600:hover {
    border-color: var(--green-600) !important
}

.hover\:border-green-700:hover {
    border-color: var(--green-700) !important
}

.hover\:border-green-800:hover {
    border-color: var(--green-800) !important
}

.hover\:border-green-900:hover {
    border-color: var(--green-900) !important
}

.active\:border-green-50:active {
    border-color: var(--green-50) !important
}

.active\:border-green-100:active {
    border-color: var(--green-100) !important
}

.active\:border-green-200:active {
    border-color: var(--green-200) !important
}

.active\:border-green-300:active {
    border-color: var(--green-300) !important
}

.active\:border-green-400:active {
    border-color: var(--green-400) !important
}

.active\:border-green-500:active {
    border-color: var(--green-500) !important
}

.active\:border-green-600:active {
    border-color: var(--green-600) !important
}

.active\:border-green-700:active {
    border-color: var(--green-700) !important
}

.active\:border-green-800:active {
    border-color: var(--green-800) !important
}

.active\:border-green-900:active {
    border-color: var(--green-900) !important
}

.border-yellow-50 {
    border-color: var(--yellow-50) !important
}

.border-yellow-100 {
    border-color: var(--yellow-100) !important
}

.border-yellow-200 {
    border-color: var(--yellow-200) !important
}

.border-yellow-300 {
    border-color: var(--yellow-300) !important
}

.border-yellow-400 {
    border-color: var(--yellow-400) !important
}

.border-yellow-500 {
    border-color: var(--yellow-500) !important
}

.border-yellow-600 {
    border-color: var(--yellow-600) !important
}

.border-yellow-700 {
    border-color: var(--yellow-700) !important
}

.border-yellow-800 {
    border-color: var(--yellow-800) !important
}

.border-yellow-900 {
    border-color: var(--yellow-900) !important
}

.focus\:border-yellow-50:focus {
    border-color: var(--yellow-50) !important
}

.focus\:border-yellow-100:focus {
    border-color: var(--yellow-100) !important
}

.focus\:border-yellow-200:focus {
    border-color: var(--yellow-200) !important
}

.focus\:border-yellow-300:focus {
    border-color: var(--yellow-300) !important
}

.focus\:border-yellow-400:focus {
    border-color: var(--yellow-400) !important
}

.focus\:border-yellow-500:focus {
    border-color: var(--yellow-500) !important
}

.focus\:border-yellow-600:focus {
    border-color: var(--yellow-600) !important
}

.focus\:border-yellow-700:focus {
    border-color: var(--yellow-700) !important
}

.focus\:border-yellow-800:focus {
    border-color: var(--yellow-800) !important
}

.focus\:border-yellow-900:focus {
    border-color: var(--yellow-900) !important
}

.hover\:border-yellow-50:hover {
    border-color: var(--yellow-50) !important
}

.hover\:border-yellow-100:hover {
    border-color: var(--yellow-100) !important
}

.hover\:border-yellow-200:hover {
    border-color: var(--yellow-200) !important
}

.hover\:border-yellow-300:hover {
    border-color: var(--yellow-300) !important
}

.hover\:border-yellow-400:hover {
    border-color: var(--yellow-400) !important
}

.hover\:border-yellow-500:hover {
    border-color: var(--yellow-500) !important
}

.hover\:border-yellow-600:hover {
    border-color: var(--yellow-600) !important
}

.hover\:border-yellow-700:hover {
    border-color: var(--yellow-700) !important
}

.hover\:border-yellow-800:hover {
    border-color: var(--yellow-800) !important
}

.hover\:border-yellow-900:hover {
    border-color: var(--yellow-900) !important
}

.active\:border-yellow-50:active {
    border-color: var(--yellow-50) !important
}

.active\:border-yellow-100:active {
    border-color: var(--yellow-100) !important
}

.active\:border-yellow-200:active {
    border-color: var(--yellow-200) !important
}

.active\:border-yellow-300:active {
    border-color: var(--yellow-300) !important
}

.active\:border-yellow-400:active {
    border-color: var(--yellow-400) !important
}

.active\:border-yellow-500:active {
    border-color: var(--yellow-500) !important
}

.active\:border-yellow-600:active {
    border-color: var(--yellow-600) !important
}

.active\:border-yellow-700:active {
    border-color: var(--yellow-700) !important
}

.active\:border-yellow-800:active {
    border-color: var(--yellow-800) !important
}

.active\:border-yellow-900:active {
    border-color: var(--yellow-900) !important
}

.border-cyan-50 {
    border-color: var(--cyan-50) !important
}

.border-cyan-100 {
    border-color: var(--cyan-100) !important
}

.border-cyan-200 {
    border-color: var(--cyan-200) !important
}

.border-cyan-300 {
    border-color: var(--cyan-300) !important
}

.border-cyan-400 {
    border-color: var(--cyan-400) !important
}

.border-cyan-500 {
    border-color: var(--cyan-500) !important
}

.border-cyan-600 {
    border-color: var(--cyan-600) !important
}

.border-cyan-700 {
    border-color: var(--cyan-700) !important
}

.border-cyan-800 {
    border-color: var(--cyan-800) !important
}

.border-cyan-900 {
    border-color: var(--cyan-900) !important
}

.focus\:border-cyan-50:focus {
    border-color: var(--cyan-50) !important
}

.focus\:border-cyan-100:focus {
    border-color: var(--cyan-100) !important
}

.focus\:border-cyan-200:focus {
    border-color: var(--cyan-200) !important
}

.focus\:border-cyan-300:focus {
    border-color: var(--cyan-300) !important
}

.focus\:border-cyan-400:focus {
    border-color: var(--cyan-400) !important
}

.focus\:border-cyan-500:focus {
    border-color: var(--cyan-500) !important
}

.focus\:border-cyan-600:focus {
    border-color: var(--cyan-600) !important
}

.focus\:border-cyan-700:focus {
    border-color: var(--cyan-700) !important
}

.focus\:border-cyan-800:focus {
    border-color: var(--cyan-800) !important
}

.focus\:border-cyan-900:focus {
    border-color: var(--cyan-900) !important
}

.hover\:border-cyan-50:hover {
    border-color: var(--cyan-50) !important
}

.hover\:border-cyan-100:hover {
    border-color: var(--cyan-100) !important
}

.hover\:border-cyan-200:hover {
    border-color: var(--cyan-200) !important
}

.hover\:border-cyan-300:hover {
    border-color: var(--cyan-300) !important
}

.hover\:border-cyan-400:hover {
    border-color: var(--cyan-400) !important
}

.hover\:border-cyan-500:hover {
    border-color: var(--cyan-500) !important
}

.hover\:border-cyan-600:hover {
    border-color: var(--cyan-600) !important
}

.hover\:border-cyan-700:hover {
    border-color: var(--cyan-700) !important
}

.hover\:border-cyan-800:hover {
    border-color: var(--cyan-800) !important
}

.hover\:border-cyan-900:hover {
    border-color: var(--cyan-900) !important
}

.active\:border-cyan-50:active {
    border-color: var(--cyan-50) !important
}

.active\:border-cyan-100:active {
    border-color: var(--cyan-100) !important
}

.active\:border-cyan-200:active {
    border-color: var(--cyan-200) !important
}

.active\:border-cyan-300:active {
    border-color: var(--cyan-300) !important
}

.active\:border-cyan-400:active {
    border-color: var(--cyan-400) !important
}

.active\:border-cyan-500:active {
    border-color: var(--cyan-500) !important
}

.active\:border-cyan-600:active {
    border-color: var(--cyan-600) !important
}

.active\:border-cyan-700:active {
    border-color: var(--cyan-700) !important
}

.active\:border-cyan-800:active {
    border-color: var(--cyan-800) !important
}

.active\:border-cyan-900:active {
    border-color: var(--cyan-900) !important
}

.border-pink-50 {
    border-color: var(--pink-50) !important
}

.border-pink-100 {
    border-color: var(--pink-100) !important
}

.border-pink-200 {
    border-color: var(--pink-200) !important
}

.border-pink-300 {
    border-color: var(--pink-300) !important
}

.border-pink-400 {
    border-color: var(--pink-400) !important
}

.border-pink-500 {
    border-color: var(--pink-500) !important
}

.border-pink-600 {
    border-color: var(--pink-600) !important
}

.border-pink-700 {
    border-color: var(--pink-700) !important
}

.border-pink-800 {
    border-color: var(--pink-800) !important
}

.border-pink-900 {
    border-color: var(--pink-900) !important
}

.focus\:border-pink-50:focus {
    border-color: var(--pink-50) !important
}

.focus\:border-pink-100:focus {
    border-color: var(--pink-100) !important
}

.focus\:border-pink-200:focus {
    border-color: var(--pink-200) !important
}

.focus\:border-pink-300:focus {
    border-color: var(--pink-300) !important
}

.focus\:border-pink-400:focus {
    border-color: var(--pink-400) !important
}

.focus\:border-pink-500:focus {
    border-color: var(--pink-500) !important
}

.focus\:border-pink-600:focus {
    border-color: var(--pink-600) !important
}

.focus\:border-pink-700:focus {
    border-color: var(--pink-700) !important
}

.focus\:border-pink-800:focus {
    border-color: var(--pink-800) !important
}

.focus\:border-pink-900:focus {
    border-color: var(--pink-900) !important
}

.hover\:border-pink-50:hover {
    border-color: var(--pink-50) !important
}

.hover\:border-pink-100:hover {
    border-color: var(--pink-100) !important
}

.hover\:border-pink-200:hover {
    border-color: var(--pink-200) !important
}

.hover\:border-pink-300:hover {
    border-color: var(--pink-300) !important
}

.hover\:border-pink-400:hover {
    border-color: var(--pink-400) !important
}

.hover\:border-pink-500:hover {
    border-color: var(--pink-500) !important
}

.hover\:border-pink-600:hover {
    border-color: var(--pink-600) !important
}

.hover\:border-pink-700:hover {
    border-color: var(--pink-700) !important
}

.hover\:border-pink-800:hover {
    border-color: var(--pink-800) !important
}

.hover\:border-pink-900:hover {
    border-color: var(--pink-900) !important
}

.active\:border-pink-50:active {
    border-color: var(--pink-50) !important
}

.active\:border-pink-100:active {
    border-color: var(--pink-100) !important
}

.active\:border-pink-200:active {
    border-color: var(--pink-200) !important
}

.active\:border-pink-300:active {
    border-color: var(--pink-300) !important
}

.active\:border-pink-400:active {
    border-color: var(--pink-400) !important
}

.active\:border-pink-500:active {
    border-color: var(--pink-500) !important
}

.active\:border-pink-600:active {
    border-color: var(--pink-600) !important
}

.active\:border-pink-700:active {
    border-color: var(--pink-700) !important
}

.active\:border-pink-800:active {
    border-color: var(--pink-800) !important
}

.active\:border-pink-900:active {
    border-color: var(--pink-900) !important
}

.border-indigo-50 {
    border-color: var(--indigo-50) !important
}

.border-indigo-100 {
    border-color: var(--indigo-100) !important
}

.border-indigo-200 {
    border-color: var(--indigo-200) !important
}

.border-indigo-300 {
    border-color: var(--indigo-300) !important
}

.border-indigo-400 {
    border-color: var(--indigo-400) !important
}

.border-indigo-500 {
    border-color: var(--indigo-500) !important
}

.border-indigo-600 {
    border-color: var(--indigo-600) !important
}

.border-indigo-700 {
    border-color: var(--indigo-700) !important
}

.border-indigo-800 {
    border-color: var(--indigo-800) !important
}

.border-indigo-900 {
    border-color: var(--indigo-900) !important
}

.focus\:border-indigo-50:focus {
    border-color: var(--indigo-50) !important
}

.focus\:border-indigo-100:focus {
    border-color: var(--indigo-100) !important
}

.focus\:border-indigo-200:focus {
    border-color: var(--indigo-200) !important
}

.focus\:border-indigo-300:focus {
    border-color: var(--indigo-300) !important
}

.focus\:border-indigo-400:focus {
    border-color: var(--indigo-400) !important
}

.focus\:border-indigo-500:focus {
    border-color: var(--indigo-500) !important
}

.focus\:border-indigo-600:focus {
    border-color: var(--indigo-600) !important
}

.focus\:border-indigo-700:focus {
    border-color: var(--indigo-700) !important
}

.focus\:border-indigo-800:focus {
    border-color: var(--indigo-800) !important
}

.focus\:border-indigo-900:focus {
    border-color: var(--indigo-900) !important
}

.hover\:border-indigo-50:hover {
    border-color: var(--indigo-50) !important
}

.hover\:border-indigo-100:hover {
    border-color: var(--indigo-100) !important
}

.hover\:border-indigo-200:hover {
    border-color: var(--indigo-200) !important
}

.hover\:border-indigo-300:hover {
    border-color: var(--indigo-300) !important
}

.hover\:border-indigo-400:hover {
    border-color: var(--indigo-400) !important
}

.hover\:border-indigo-500:hover {
    border-color: var(--indigo-500) !important
}

.hover\:border-indigo-600:hover {
    border-color: var(--indigo-600) !important
}

.hover\:border-indigo-700:hover {
    border-color: var(--indigo-700) !important
}

.hover\:border-indigo-800:hover {
    border-color: var(--indigo-800) !important
}

.hover\:border-indigo-900:hover {
    border-color: var(--indigo-900) !important
}

.active\:border-indigo-50:active {
    border-color: var(--indigo-50) !important
}

.active\:border-indigo-100:active {
    border-color: var(--indigo-100) !important
}

.active\:border-indigo-200:active {
    border-color: var(--indigo-200) !important
}

.active\:border-indigo-300:active {
    border-color: var(--indigo-300) !important
}

.active\:border-indigo-400:active {
    border-color: var(--indigo-400) !important
}

.active\:border-indigo-500:active {
    border-color: var(--indigo-500) !important
}

.active\:border-indigo-600:active {
    border-color: var(--indigo-600) !important
}

.active\:border-indigo-700:active {
    border-color: var(--indigo-700) !important
}

.active\:border-indigo-800:active {
    border-color: var(--indigo-800) !important
}

.active\:border-indigo-900:active {
    border-color: var(--indigo-900) !important
}

.border-teal-50 {
    border-color: var(--teal-50) !important
}

.border-teal-100 {
    border-color: var(--teal-100) !important
}

.border-teal-200 {
    border-color: var(--teal-200) !important
}

.border-teal-300 {
    border-color: var(--teal-300) !important
}

.border-teal-400 {
    border-color: var(--teal-400) !important
}

.border-teal-500 {
    border-color: var(--teal-500) !important
}

.border-teal-600 {
    border-color: var(--teal-600) !important
}

.border-teal-700 {
    border-color: var(--teal-700) !important
}

.border-teal-800 {
    border-color: var(--teal-800) !important
}

.border-teal-900 {
    border-color: var(--teal-900) !important
}

.focus\:border-teal-50:focus {
    border-color: var(--teal-50) !important
}

.focus\:border-teal-100:focus {
    border-color: var(--teal-100) !important
}

.focus\:border-teal-200:focus {
    border-color: var(--teal-200) !important
}

.focus\:border-teal-300:focus {
    border-color: var(--teal-300) !important
}

.focus\:border-teal-400:focus {
    border-color: var(--teal-400) !important
}

.focus\:border-teal-500:focus {
    border-color: var(--teal-500) !important
}

.focus\:border-teal-600:focus {
    border-color: var(--teal-600) !important
}

.focus\:border-teal-700:focus {
    border-color: var(--teal-700) !important
}

.focus\:border-teal-800:focus {
    border-color: var(--teal-800) !important
}

.focus\:border-teal-900:focus {
    border-color: var(--teal-900) !important
}

.hover\:border-teal-50:hover {
    border-color: var(--teal-50) !important
}

.hover\:border-teal-100:hover {
    border-color: var(--teal-100) !important
}

.hover\:border-teal-200:hover {
    border-color: var(--teal-200) !important
}

.hover\:border-teal-300:hover {
    border-color: var(--teal-300) !important
}

.hover\:border-teal-400:hover {
    border-color: var(--teal-400) !important
}

.hover\:border-teal-500:hover {
    border-color: var(--teal-500) !important
}

.hover\:border-teal-600:hover {
    border-color: var(--teal-600) !important
}

.hover\:border-teal-700:hover {
    border-color: var(--teal-700) !important
}

.hover\:border-teal-800:hover {
    border-color: var(--teal-800) !important
}

.hover\:border-teal-900:hover {
    border-color: var(--teal-900) !important
}

.active\:border-teal-50:active {
    border-color: var(--teal-50) !important
}

.active\:border-teal-100:active {
    border-color: var(--teal-100) !important
}

.active\:border-teal-200:active {
    border-color: var(--teal-200) !important
}

.active\:border-teal-300:active {
    border-color: var(--teal-300) !important
}

.active\:border-teal-400:active {
    border-color: var(--teal-400) !important
}

.active\:border-teal-500:active {
    border-color: var(--teal-500) !important
}

.active\:border-teal-600:active {
    border-color: var(--teal-600) !important
}

.active\:border-teal-700:active {
    border-color: var(--teal-700) !important
}

.active\:border-teal-800:active {
    border-color: var(--teal-800) !important
}

.active\:border-teal-900:active {
    border-color: var(--teal-900) !important
}

.border-orange-50 {
    border-color: var(--orange-50) !important
}

.border-orange-100 {
    border-color: var(--orange-100) !important
}

.border-orange-200 {
    border-color: var(--orange-200) !important
}

.border-orange-300 {
    border-color: var(--orange-300) !important
}

.border-orange-400 {
    border-color: var(--orange-400) !important
}

.border-orange-500 {
    border-color: var(--orange-500) !important
}

.border-orange-600 {
    border-color: var(--orange-600) !important
}

.border-orange-700 {
    border-color: var(--orange-700) !important
}

.border-orange-800 {
    border-color: var(--orange-800) !important
}

.border-orange-900 {
    border-color: var(--orange-900) !important
}

.focus\:border-orange-50:focus {
    border-color: var(--orange-50) !important
}

.focus\:border-orange-100:focus {
    border-color: var(--orange-100) !important
}

.focus\:border-orange-200:focus {
    border-color: var(--orange-200) !important
}

.focus\:border-orange-300:focus {
    border-color: var(--orange-300) !important
}

.focus\:border-orange-400:focus {
    border-color: var(--orange-400) !important
}

.focus\:border-orange-500:focus {
    border-color: var(--orange-500) !important
}

.focus\:border-orange-600:focus {
    border-color: var(--orange-600) !important
}

.focus\:border-orange-700:focus {
    border-color: var(--orange-700) !important
}

.focus\:border-orange-800:focus {
    border-color: var(--orange-800) !important
}

.focus\:border-orange-900:focus {
    border-color: var(--orange-900) !important
}

.hover\:border-orange-50:hover {
    border-color: var(--orange-50) !important
}

.hover\:border-orange-100:hover {
    border-color: var(--orange-100) !important
}

.hover\:border-orange-200:hover {
    border-color: var(--orange-200) !important
}

.hover\:border-orange-300:hover {
    border-color: var(--orange-300) !important
}

.hover\:border-orange-400:hover {
    border-color: var(--orange-400) !important
}

.hover\:border-orange-500:hover {
    border-color: var(--orange-500) !important
}

.hover\:border-orange-600:hover {
    border-color: var(--orange-600) !important
}

.hover\:border-orange-700:hover {
    border-color: var(--orange-700) !important
}

.hover\:border-orange-800:hover {
    border-color: var(--orange-800) !important
}

.hover\:border-orange-900:hover {
    border-color: var(--orange-900) !important
}

.active\:border-orange-50:active {
    border-color: var(--orange-50) !important
}

.active\:border-orange-100:active {
    border-color: var(--orange-100) !important
}

.active\:border-orange-200:active {
    border-color: var(--orange-200) !important
}

.active\:border-orange-300:active {
    border-color: var(--orange-300) !important
}

.active\:border-orange-400:active {
    border-color: var(--orange-400) !important
}

.active\:border-orange-500:active {
    border-color: var(--orange-500) !important
}

.active\:border-orange-600:active {
    border-color: var(--orange-600) !important
}

.active\:border-orange-700:active {
    border-color: var(--orange-700) !important
}

.active\:border-orange-800:active {
    border-color: var(--orange-800) !important
}

.active\:border-orange-900:active {
    border-color: var(--orange-900) !important
}

.border-bluegray-50 {
    border-color: var(--bluegray-50) !important
}

.border-bluegray-100 {
    border-color: var(--bluegray-100) !important
}

.border-bluegray-200 {
    border-color: var(--bluegray-200) !important
}

.border-bluegray-300 {
    border-color: var(--bluegray-300) !important
}

.border-bluegray-400 {
    border-color: var(--bluegray-400) !important
}

.border-bluegray-500 {
    border-color: var(--bluegray-500) !important
}

.border-bluegray-600 {
    border-color: var(--bluegray-600) !important
}

.border-bluegray-700 {
    border-color: var(--bluegray-700) !important
}

.border-bluegray-800 {
    border-color: var(--bluegray-800) !important
}

.border-bluegray-900 {
    border-color: var(--bluegray-900) !important
}

.focus\:border-bluegray-50:focus {
    border-color: var(--bluegray-50) !important
}

.focus\:border-bluegray-100:focus {
    border-color: var(--bluegray-100) !important
}

.focus\:border-bluegray-200:focus {
    border-color: var(--bluegray-200) !important
}

.focus\:border-bluegray-300:focus {
    border-color: var(--bluegray-300) !important
}

.focus\:border-bluegray-400:focus {
    border-color: var(--bluegray-400) !important
}

.focus\:border-bluegray-500:focus {
    border-color: var(--bluegray-500) !important
}

.focus\:border-bluegray-600:focus {
    border-color: var(--bluegray-600) !important
}

.focus\:border-bluegray-700:focus {
    border-color: var(--bluegray-700) !important
}

.focus\:border-bluegray-800:focus {
    border-color: var(--bluegray-800) !important
}

.focus\:border-bluegray-900:focus {
    border-color: var(--bluegray-900) !important
}

.hover\:border-bluegray-50:hover {
    border-color: var(--bluegray-50) !important
}

.hover\:border-bluegray-100:hover {
    border-color: var(--bluegray-100) !important
}

.hover\:border-bluegray-200:hover {
    border-color: var(--bluegray-200) !important
}

.hover\:border-bluegray-300:hover {
    border-color: var(--bluegray-300) !important
}

.hover\:border-bluegray-400:hover {
    border-color: var(--bluegray-400) !important
}

.hover\:border-bluegray-500:hover {
    border-color: var(--bluegray-500) !important
}

.hover\:border-bluegray-600:hover {
    border-color: var(--bluegray-600) !important
}

.hover\:border-bluegray-700:hover {
    border-color: var(--bluegray-700) !important
}

.hover\:border-bluegray-800:hover {
    border-color: var(--bluegray-800) !important
}

.hover\:border-bluegray-900:hover {
    border-color: var(--bluegray-900) !important
}

.active\:border-bluegray-50:active {
    border-color: var(--bluegray-50) !important
}

.active\:border-bluegray-100:active {
    border-color: var(--bluegray-100) !important
}

.active\:border-bluegray-200:active {
    border-color: var(--bluegray-200) !important
}

.active\:border-bluegray-300:active {
    border-color: var(--bluegray-300) !important
}

.active\:border-bluegray-400:active {
    border-color: var(--bluegray-400) !important
}

.active\:border-bluegray-500:active {
    border-color: var(--bluegray-500) !important
}

.active\:border-bluegray-600:active {
    border-color: var(--bluegray-600) !important
}

.active\:border-bluegray-700:active {
    border-color: var(--bluegray-700) !important
}

.active\:border-bluegray-800:active {
    border-color: var(--bluegray-800) !important
}

.active\:border-bluegray-900:active {
    border-color: var(--bluegray-900) !important
}

.border-purple-50 {
    border-color: var(--purple-50) !important
}

.border-purple-100 {
    border-color: var(--purple-100) !important
}

.border-purple-200 {
    border-color: var(--purple-200) !important
}

.border-purple-300 {
    border-color: var(--purple-300) !important
}

.border-purple-400 {
    border-color: var(--purple-400) !important
}

.border-purple-500 {
    border-color: var(--purple-500) !important
}

.border-purple-600 {
    border-color: var(--purple-600) !important
}

.border-purple-700 {
    border-color: var(--purple-700) !important
}

.border-purple-800 {
    border-color: var(--purple-800) !important
}

.border-purple-900 {
    border-color: var(--purple-900) !important
}

.focus\:border-purple-50:focus {
    border-color: var(--purple-50) !important
}

.focus\:border-purple-100:focus {
    border-color: var(--purple-100) !important
}

.focus\:border-purple-200:focus {
    border-color: var(--purple-200) !important
}

.focus\:border-purple-300:focus {
    border-color: var(--purple-300) !important
}

.focus\:border-purple-400:focus {
    border-color: var(--purple-400) !important
}

.focus\:border-purple-500:focus {
    border-color: var(--purple-500) !important
}

.focus\:border-purple-600:focus {
    border-color: var(--purple-600) !important
}

.focus\:border-purple-700:focus {
    border-color: var(--purple-700) !important
}

.focus\:border-purple-800:focus {
    border-color: var(--purple-800) !important
}

.focus\:border-purple-900:focus {
    border-color: var(--purple-900) !important
}

.hover\:border-purple-50:hover {
    border-color: var(--purple-50) !important
}

.hover\:border-purple-100:hover {
    border-color: var(--purple-100) !important
}

.hover\:border-purple-200:hover {
    border-color: var(--purple-200) !important
}

.hover\:border-purple-300:hover {
    border-color: var(--purple-300) !important
}

.hover\:border-purple-400:hover {
    border-color: var(--purple-400) !important
}

.hover\:border-purple-500:hover {
    border-color: var(--purple-500) !important
}

.hover\:border-purple-600:hover {
    border-color: var(--purple-600) !important
}

.hover\:border-purple-700:hover {
    border-color: var(--purple-700) !important
}

.hover\:border-purple-800:hover {
    border-color: var(--purple-800) !important
}

.hover\:border-purple-900:hover {
    border-color: var(--purple-900) !important
}

.active\:border-purple-50:active {
    border-color: var(--purple-50) !important
}

.active\:border-purple-100:active {
    border-color: var(--purple-100) !important
}

.active\:border-purple-200:active {
    border-color: var(--purple-200) !important
}

.active\:border-purple-300:active {
    border-color: var(--purple-300) !important
}

.active\:border-purple-400:active {
    border-color: var(--purple-400) !important
}

.active\:border-purple-500:active {
    border-color: var(--purple-500) !important
}

.active\:border-purple-600:active {
    border-color: var(--purple-600) !important
}

.active\:border-purple-700:active {
    border-color: var(--purple-700) !important
}

.active\:border-purple-800:active {
    border-color: var(--purple-800) !important
}

.active\:border-purple-900:active {
    border-color: var(--purple-900) !important
}

.border-gray-50 {
    border-color: var(--gray-50) !important
}

.border-gray-100 {
    border-color: var(--gray-100) !important
}

.border-gray-200 {
    border-color: var(--gray-200) !important
}

.border-gray-300 {
    border-color: var(--gray-300) !important
}

.border-gray-400 {
    border-color: var(--gray-400) !important
}

.border-gray-500 {
    border-color: var(--gray-500) !important
}

.border-gray-600 {
    border-color: var(--gray-600) !important
}

.border-gray-700 {
    border-color: var(--gray-700) !important
}

.border-gray-800 {
    border-color: var(--gray-800) !important
}

.border-gray-900 {
    border-color: var(--gray-900) !important
}

.focus\:border-gray-50:focus {
    border-color: var(--gray-50) !important
}

.focus\:border-gray-100:focus {
    border-color: var(--gray-100) !important
}

.focus\:border-gray-200:focus {
    border-color: var(--gray-200) !important
}

.focus\:border-gray-300:focus {
    border-color: var(--gray-300) !important
}

.focus\:border-gray-400:focus {
    border-color: var(--gray-400) !important
}

.focus\:border-gray-500:focus {
    border-color: var(--gray-500) !important
}

.focus\:border-gray-600:focus {
    border-color: var(--gray-600) !important
}

.focus\:border-gray-700:focus {
    border-color: var(--gray-700) !important
}

.focus\:border-gray-800:focus {
    border-color: var(--gray-800) !important
}

.focus\:border-gray-900:focus {
    border-color: var(--gray-900) !important
}

.hover\:border-gray-50:hover {
    border-color: var(--gray-50) !important
}

.hover\:border-gray-100:hover {
    border-color: var(--gray-100) !important
}

.hover\:border-gray-200:hover {
    border-color: var(--gray-200) !important
}

.hover\:border-gray-300:hover {
    border-color: var(--gray-300) !important
}

.hover\:border-gray-400:hover {
    border-color: var(--gray-400) !important
}

.hover\:border-gray-500:hover {
    border-color: var(--gray-500) !important
}

.hover\:border-gray-600:hover {
    border-color: var(--gray-600) !important
}

.hover\:border-gray-700:hover {
    border-color: var(--gray-700) !important
}

.hover\:border-gray-800:hover {
    border-color: var(--gray-800) !important
}

.hover\:border-gray-900:hover {
    border-color: var(--gray-900) !important
}

.active\:border-gray-50:active {
    border-color: var(--gray-50) !important
}

.active\:border-gray-100:active {
    border-color: var(--gray-100) !important
}

.active\:border-gray-200:active {
    border-color: var(--gray-200) !important
}

.active\:border-gray-300:active {
    border-color: var(--gray-300) !important
}

.active\:border-gray-400:active {
    border-color: var(--gray-400) !important
}

.active\:border-gray-500:active {
    border-color: var(--gray-500) !important
}

.active\:border-gray-600:active {
    border-color: var(--gray-600) !important
}

.active\:border-gray-700:active {
    border-color: var(--gray-700) !important
}

.active\:border-gray-800:active {
    border-color: var(--gray-800) !important
}

.active\:border-gray-900:active {
    border-color: var(--gray-900) !important
}

.text-primary {
    color: var(--primary-color) !important
}

.hover\:text-primary:hover {
    color: var(--primary-color) !important
}

.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--primary-color-text) !important
}

.hover\:bg-primary:hover {
    background-color: var(--primary-color) !important;
    color: var(--primary-color-text) !important
}

.border-primary {
    border-color: var(--primary-color) !important
}

.hover\:border-primary:hover {
    border-color: var(--primary-color) !important
}

.bg-primary-reverse {
    background-color: var(--primary-color-text) !important;
    color: var(--primary-color) !important
}

.hover\:bg-primary-reverse:hover {
    background-color: var(--primary-color-text) !important;
    color: var(--primary-color) !important
}

.text-white {
    color: #fff !important
}

.hover\:text-white:hover {
    color: #fff !important
}

.bg-white {
    background-color: #fff !important
}

.hover\:bg-white:hover {
    background-color: #fff !important
}

.border-white {
    border-color: #fff !important
}

.hover\:border-white:hover {
    border-color: #fff !important
}

.surface-ground {
    background-color: var(--surface-ground)
}

.surface-section {
    background-color: var(--surface-section)
}

.surface-card {
    background-color: var(--surface-card)
}

.surface-overlay {
    background-color: var(--surface-overlay)
}

.surface-border {
    border-color: var(--surface-border)
}