.card {
    background-color: var(--ui-color-surface);
    border-radius: var(--ui-radius-xl);
}

.button-blue-primary,
.btn-primary {
    background: var(--ui-color-accent);
    border-radius: var(--ui-radius-xl);
}

.button-blue-primary:hover,
.button-blue-primary:active,
.btn-primary:hover,
.btn-primary:active {
    background: var(--ui-color-accent-hover) !important;
}

.button-red-primary {
    background: var(--ui-color-danger);
    border-radius: var(--ui-radius-xl);
}

.button-red-primary:hover,
.button-red-primary:active {
    background: var(--ui-color-danger-hover) !important;
}

.button-green-primary {
    background: var(--ui-color-success);
    border-radius: var(--ui-radius-xl);
}

.button-green-primary:hover,
.button-green-primary:active {
    background: var(--ui-color-success-hover) !important;
}

.button-gray-primary,
.button-invisible-primary {
    border-radius: var(--ui-radius-xl);
}

@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ui-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}