.mx-auto {
    margin-inline: auto;
}

.ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
}

.mt-1 {
    margin-top: calc(var(--spacing) * 1);
}

.mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
}

.mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
}

.mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
}

.block {
    display: block;
}

.flex {
    display: flex;
}

.h-4 {
    height: calc(var(--spacing) * 4);
}

.h-5 {
    height: calc(var(--spacing) * 5);
}

.w-4 {
    width: calc(var(--spacing) * 4);
}

.w-full {
    width: 100%;
}

.max-w-md {
    max-width: var(--container-md);
}

.max-w-sm {
    max-width: var(--container-sm);
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.border {
    border-style: var(--tw-border-style);
    border-width: 1px;
}

.border-gray-300 {
    border-color: var(--color-gray-300);
}

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

.bg-gray-50 {
    background-color: var(--color-gray-50);
}

.bg-white {
    background-color: var(--color-white);
}

.p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
}

.p-4 {
    padding: calc(var(--spacing) * 4);
}

.px-5 {
    padding-inline: calc(var(--spacing) * 5);
}

.py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
}

.text-center {
    text-align: center;
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
}

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

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

.text-white {
    color: var(--color-white);
}

.shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.hover\:bg-blue-800 {
    &:hover {
        @media (hover: hover) {
            background-color: var(--color-blue-800);
        }
    }
}

.focus\:border-blue-500 {
    &:focus {
        border-color: var(--color-blue-500);
    }
}

.focus\:ring-3 {
    &:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
}

.focus\:ring-4 {
    &:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
}

.focus\:ring-blue-300 {
    &:focus {
        --tw-ring-color: var(--color-blue-300);
    }
}

.focus\:ring-blue-500 {
    &:focus {
        --tw-ring-color: var(--color-blue-500);
    }
}

.focus\:outline-none {
    &:focus {
        --tw-outline-style: none;
        outline-style: none;
    }
}

.sm\:w-auto {
    @media (width >=40rem) {
        width: auto;
    }
}

.dark\:border-gray-600 {
    @media (prefers-color-scheme: dark) {
        border-color: var(--color-gray-600);
    }
}

.dark\:bg-blue-600 {
    @media (prefers-color-scheme: dark) {
        background-color: var(--color-blue-600);
    }
}

.dark\:bg-gray-700 {
    @media (prefers-color-scheme: dark) {
        background-color: var(--color-gray-700);
    }
}

.dark\:text-gray-300 {
    @media (prefers-color-scheme: dark) {
        color: var(--color-gray-300);
    }
}

.dark\:text-white {
    @media (prefers-color-scheme: dark) {
        color: var(--color-white);
    }
}

.dark\:placeholder-gray-400 {
    @media (prefers-color-scheme: dark) {
        &::placeholder {
            color: var(--color-gray-400);
        }
    }
}

.dark\:ring-offset-gray-800 {
    @media (prefers-color-scheme: dark) {
        --tw-ring-offset-color: var(--color-gray-800);
    }
}

.dark\:hover\:bg-blue-700 {
    @media (prefers-color-scheme: dark) {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-blue-700);
            }
        }
    }
}

.dark\:focus\:border-blue-500 {
    @media (prefers-color-scheme: dark) {
        &:focus {
            border-color: var(--color-blue-500);
        }
    }
}

.dark\:focus\:ring-blue-500 {
    @media (prefers-color-scheme: dark) {
        &:focus {
            --tw-ring-color: var(--color-blue-500);
        }
    }
}

.dark\:focus\:ring-blue-600 {
    @media (prefers-color-scheme: dark) {
        &:focus {
            --tw-ring-color: var(--color-blue-600);
        }
    }
}

.dark\:focus\:ring-blue-800 {
    @media (prefers-color-scheme: dark) {
        &:focus {
            --tw-ring-color: var(--color-blue-800);
        }
    }
}

.dark\:focus\:ring-offset-gray-800 {
    @media (prefers-color-scheme: dark) {
        &:focus {
            --tw-ring-offset-color: var(--color-gray-800);
        }
    }
}