/* app/static/css/base/utilities.css */
/* Утилитарные классы */

/* ==========================================================================
   1. ОТСТУПЫ (SPACING)
   ========================================================================== */

/* Margin top */
.app-mt-0 { margin-top: 0 !important; }
.app-mt-1 { margin-top: var(--app-spacing-xs) !important; }
.app-mt-2 { margin-top: var(--app-spacing-sm) !important; }
.app-mt-3 { margin-top: var(--app-spacing-md) !important; }
.app-mt-4 { margin-top: var(--app-spacing-lg) !important; }
.app-mt-5 { margin-top: var(--app-spacing-xl) !important; }

/* Margin bottom */
.app-mb-0 { margin-bottom: 0 !important; }
.app-mb-1 { margin-bottom: var(--app-spacing-xs) !important; }
.app-mb-2 { margin-bottom: var(--app-spacing-sm) !important; }
.app-mb-3 { margin-bottom: var(--app-spacing-md) !important; }
.app-mb-4 { margin-bottom: var(--app-spacing-lg) !important; }
.app-mb-5 { margin-bottom: var(--app-spacing-xl) !important; }

/* Margin left */
.app-ml-0 { margin-left: 0 !important; }
.app-ml-1 { margin-left: var(--app-spacing-xs) !important; }
.app-ml-2 { margin-left: var(--app-spacing-sm) !important; }
.app-ml-3 { margin-left: var(--app-spacing-md) !important; }
.app-ml-4 { margin-left: var(--app-spacing-lg) !important; }
.app-ml-5 { margin-left: var(--app-spacing-xl) !important; }

/* Margin right */
.app-mr-0 { margin-right: 0 !important; }
.app-mr-1 { margin-right: var(--app-spacing-xs) !important; }
.app-mr-2 { margin-right: var(--app-spacing-sm) !important; }
.app-mr-3 { margin-right: var(--app-spacing-md) !important; }
.app-mr-4 { margin-right: var(--app-spacing-lg) !important; }
.app-mr-5 { margin-right: var(--app-spacing-xl) !important; }

/* Margin все стороны */
.app-m-0 { margin: 0 !important; }
.app-m-1 { margin: var(--app-spacing-xs) !important; }
.app-m-2 { margin: var(--app-spacing-sm) !important; }
.app-m-3 { margin: var(--app-spacing-md) !important; }
.app-m-4 { margin: var(--app-spacing-lg) !important; }
.app-m-5 { margin: var(--app-spacing-xl) !important; }

/* Padding все стороны */
.app-p-0 { padding: 0 !important; }
.app-p-1 { padding: var(--app-spacing-xs) !important; }
.app-p-2 { padding: var(--app-spacing-sm) !important; }
.app-p-3 { padding: var(--app-spacing-md) !important; }
.app-p-4 { padding: var(--app-spacing-lg) !important; }
.app-p-5 { padding: var(--app-spacing-xl) !important; }

/* Padding top */
.app-pt-0 { padding-top: 0 !important; }
.app-pt-1 { padding-top: var(--app-spacing-xs) !important; }
.app-pt-2 { padding-top: var(--app-spacing-sm) !important; }
.app-pt-3 { padding-top: var(--app-spacing-md) !important; }
.app-pt-4 { padding-top: var(--app-spacing-lg) !important; }
.app-pt-5 { padding-top: var(--app-spacing-xl) !important; }

/* Padding bottom */
.app-pb-0 { padding-bottom: 0 !important; }
.app-pb-1 { padding-bottom: var(--app-spacing-xs) !important; }
.app-pb-2 { padding-bottom: var(--app-spacing-sm) !important; }
.app-pb-3 { padding-bottom: var(--app-spacing-md) !important; }
.app-pb-4 { padding-bottom: var(--app-spacing-lg) !important; }
.app-pb-5 { padding-bottom: var(--app-spacing-xl) !important; }

/* Padding left */
.app-pl-0 { padding-left: 0 !important; }
.app-pl-1 { padding-left: var(--app-spacing-xs) !important; }
.app-pl-2 { padding-left: var(--app-spacing-sm) !important; }
.app-pl-3 { padding-left: var(--app-spacing-md) !important; }
.app-pl-4 { padding-left: var(--app-spacing-lg) !important; }
.app-pl-5 { padding-left: var(--app-spacing-xl) !important; }

/* Padding right */
.app-pr-0 { padding-right: 0 !important; }
.app-pr-1 { padding-right: var(--app-spacing-xs) !important; }
.app-pr-2 { padding-right: var(--app-spacing-sm) !important; }
.app-pr-3 { padding-right: var(--app-spacing-md) !important; }
.app-pr-4 { padding-right: var(--app-spacing-lg) !important; }
.app-pr-5 { padding-right: var(--app-spacing-xl) !important; }

/* ==========================================================================
   2. ОТОБРАЖЕНИЕ (DISPLAY)
   ========================================================================== */

.app-block { display: block !important; }
.app-inline-block { display: inline-block !important; }
.app-inline { display: inline !important; }
.app-flex { display: flex !important; }
.app-inline-flex { display: inline-flex !important; }
.app-grid { display: grid !important; }
.app-hidden { display: none !important; }
.app-visible { visibility: visible !important; }
.app-invisible { visibility: hidden !important; }

/* ==========================================================================
   3. РАЗМЕРЫ (SIZING)
   ========================================================================== */

.app-w-full { width: 100% !important; }
.app-w-auto { width: auto !important; }
.app-w-50 { width: 50% !important; }
.app-w-75 { width: 75% !important; }

.app-h-full { height: 100% !important; }
.app-h-auto { height: auto !important; }
.app-h-screen { height: 100vh !important; }
.app-min-h-screen { min-height: 100vh !important; }

.app-max-w-full { max-width: 100% !important; }
.app-max-w-screen-sm { max-width: 640px !important; }
.app-max-w-screen-md { max-width: 768px !important; }
.app-max-w-screen-lg { max-width: 1024px !important; }
.app-max-w-screen-xl { max-width: 1280px !important; }

/* ==========================================================================
   4. СКРУГЛЕНИЯ (BORDER RADIUS)
   ========================================================================== */

.app-rounded-none { border-radius: 0 !important; }
.app-rounded-sm { border-radius: var(--app-radius-sm) !important; }
.app-rounded { border-radius: var(--app-radius-md) !important; }
.app-rounded-md { border-radius: var(--app-radius-md) !important; }
.app-rounded-lg { border-radius: var(--app-radius-lg) !important; }
.app-rounded-xl { border-radius: var(--app-radius-xl) !important; }
.app-rounded-full { border-radius: 9999px !important; }

/* ==========================================================================
   5. ТЕНИ (SHADOWS)
   ========================================================================== */

.app-shadow-none { box-shadow: none !important; }
.app-shadow-sm { box-shadow: var(--app-shadow-sm) !important; }
.app-shadow { box-shadow: var(--app-shadow-md) !important; }
.app-shadow-md { box-shadow: var(--app-shadow-md) !important; }
.app-shadow-lg { box-shadow: var(--app-shadow-lg) !important; }

/* ==========================================================================
   6. ПЕРЕХОДЫ (TRANSITIONS)
   ========================================================================== */

.app-transition-none { transition: none !important; }
.app-transition-fast { transition: all var(--app-transition-fast) ease !important; }
.app-transition { transition: all var(--app-transition-normal) ease !important; }
.app-transition-normal { transition: all var(--app-transition-normal) ease !important; }
.app-transition-slow { transition: all var(--app-transition-slow) ease !important; }

/* ==========================================================================
   7. ГРАНИЦЫ (BORDERS)
   ========================================================================== */

.app-border-0 { border: 0 !important; }
.app-border { border: 1px solid var(--app-color-border) !important; }
.app-border-2 { border-width: 2px !important; }
.app-border-4 { border-width: 4px !important; }

/* Стороны границы */
.app-border-t { border-top: 1px solid var(--app-color-border) !important; }
.app-border-b { border-bottom: 1px solid var(--app-color-border) !important; }
.app-border-l { border-left: 1px solid var(--app-color-border) !important; }
.app-border-r { border-right: 1px solid var(--app-color-border) !important; }

/* ==========================================================================
   8. ПОЗИЦИОНИРОВАНИЕ (POSITIONING)
   ========================================================================== */

.app-relative { position: relative !important; }
.app-absolute { position: absolute !important; }
.app-fixed { position: fixed !important; }
.app-sticky { position: sticky !important; }
.app-static { position: static !important; }

/* ==========================================================================
   9. FLEXBOX
   ========================================================================== */

/* Направление */
.app-flex-row { flex-direction: row !important; }
.app-flex-row-reverse { flex-direction: row-reverse !important; }
.app-flex-col { flex-direction: column !important; }
.app-flex-col-reverse { flex-direction: column-reverse !important; }

/* Выравнивание по основной оси */
.app-justify-start { justify-content: flex-start !important; }
.app-justify-end { justify-content: flex-end !important; }
.app-justify-center { justify-content: center !important; }
.app-justify-between { justify-content: space-between !important; }
.app-justify-around { justify-content: space-around !important; }
.app-justify-evenly { justify-content: space-evenly !important; }

/* Выравнивание по поперечной оси */
.app-items-start { align-items: flex-start !important; }
.app-items-end { align-items: flex-end !important; }
.app-items-center { align-items: center !important; }
.app-items-baseline { align-items: baseline !important; }
.app-items-stretch { align-items: stretch !important; }

/* Обертка */
.app-flex-wrap { flex-wrap: wrap !important; }
.app-flex-nowrap { flex-wrap: nowrap !important; }
.app-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Flex-grow/shrink */
.app-flex-1 { flex: 1 1 0% !important; }
.app-flex-auto { flex: 1 1 auto !important; }
.app-flex-none { flex: none !important; }
.app-flex-grow { flex-grow: 1 !important; }
.app-flex-shrink { flex-shrink: 1 !important; }
.app-flex-grow-0 { flex-grow: 0 !important; }
.app-flex-shrink-0 { flex-shrink: 0 !important; }

/* ==========================================================================
   10. GRID
   ========================================================================== */

/* Количество колонок */
.app-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.app-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.app-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.app-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.app-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.app-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.app-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.app-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
.app-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
.app-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
.app-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
.app-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

/* Зазоры */
.app-gap-0 { gap: 0 !important; }
.app-gap-1 { gap: var(--app-spacing-xs) !important; }
.app-gap-2 { gap: var(--app-spacing-sm) !important; }
.app-gap-3 { gap: var(--app-spacing-md) !important; }
.app-gap-4 { gap: var(--app-spacing-lg) !important; }
.app-gap-5 { gap: var(--app-spacing-xl) !important; }

/* Span колонок */
.app-col-span-1 { grid-column: span 1 / span 1 !important; }
.app-col-span-2 { grid-column: span 2 / span 2 !important; }
.app-col-span-3 { grid-column: span 3 / span 3 !important; }
.app-col-span-4 { grid-column: span 4 / span 4 !important; }
.app-col-span-5 { grid-column: span 5 / span 5 !important; }
.app-col-span-6 { grid-column: span 6 / span 6 !important; }
.app-col-span-7 { grid-column: span 7 / span 7 !important; }
.app-col-span-8 { grid-column: span 8 / span 8 !important; }
.app-col-span-9 { grid-column: span 9 / span 9 !important; }
.app-col-span-10 { grid-column: span 10 / span 10 !important; }
.app-col-span-11 { grid-column: span 11 / span 11 !important; }
.app-col-span-12 { grid-column: span 12 / span 12 !important; }

/* Span рядов */
.app-row-span-1 { grid-row: span 1 / span 1 !important; }
.app-row-span-2 { grid-row: span 2 / span 2 !important; }
.app-row-span-3 { grid-row: span 3 / span 3 !important; }
.app-row-span-4 { grid-row: span 4 / span 4 !important; }
.app-row-span-5 { grid-row: span 5 / span 5 !important; }
.app-row-span-6 { grid-row: span 6 / span 6 !important; }

/* Автоматические ряды */
.app-auto-rows-fr { grid-auto-rows: 1fr !important; }
.app-auto-rows-min { grid-auto-rows: min-content !important; }
.app-auto-rows-max { grid-auto-rows: max-content !important; }
.app-auto-rows-auto { grid-auto-rows: auto !important; }

/* ==========================================================================
   11. АДАПТИВНЫЕ GRID УТИЛИТЫ
   ========================================================================== */

/* SM (640px) */
@media (min-width: 640px) {
    .sm\:app-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
    .sm\:app-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

    .sm\:app-col-span-1 { grid-column: span 1 / span 1 !important; }
    .sm\:app-col-span-2 { grid-column: span 2 / span 2 !important; }
    .sm\:app-col-span-3 { grid-column: span 3 / span 3 !important; }
    .sm\:app-col-span-4 { grid-column: span 4 / span 4 !important; }
    .sm\:app-col-span-5 { grid-column: span 5 / span 5 !important; }
    .sm\:app-col-span-6 { grid-column: span 6 / span 6 !important; }
    .sm\:app-col-span-7 { grid-column: span 7 / span 7 !important; }
    .sm\:app-col-span-8 { grid-column: span 8 / span 8 !important; }
    .sm\:app-col-span-9 { grid-column: span 9 / span 9 !important; }
    .sm\:app-col-span-10 { grid-column: span 10 / span 10 !important; }
    .sm\:app-col-span-11 { grid-column: span 11 / span 11 !important; }
    .sm\:app-col-span-12 { grid-column: span 12 / span 12 !important; }

    .sm\:app-row-span-1 { grid-row: span 1 / span 1 !important; }
    .sm\:app-row-span-2 { grid-row: span 2 / span 2 !important; }
    .sm\:app-row-span-3 { grid-row: span 3 / span 3 !important; }
    .sm\:app-row-span-4 { grid-row: span 4 / span 4 !important; }
}

/* MD (768px) */
@media (min-width: 768px) {
    .md\:app-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
    .md\:app-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

    .md\:app-col-span-1 { grid-column: span 1 / span 1 !important; }
    .md\:app-col-span-2 { grid-column: span 2 / span 2 !important; }
    .md\:app-col-span-3 { grid-column: span 3 / span 3 !important; }
    .md\:app-col-span-4 { grid-column: span 4 / span 4 !important; }
    .md\:app-col-span-5 { grid-column: span 5 / span 5 !important; }
    .md\:app-col-span-6 { grid-column: span 6 / span 6 !important; }
    .md\:app-col-span-7 { grid-column: span 7 / span 7 !important; }
    .md\:app-col-span-8 { grid-column: span 8 / span 8 !important; }
    .md\:app-col-span-9 { grid-column: span 9 / span 9 !important; }
    .md\:app-col-span-10 { grid-column: span 10 / span 10 !important; }
    .md\:app-col-span-11 { grid-column: span 11 / span 11 !important; }
    .md\:app-col-span-12 { grid-column: span 12 / span 12 !important; }

    .md\:app-row-span-1 { grid-row: span 1 / span 1 !important; }
    .md\:app-row-span-2 { grid-row: span 2 / span 2 !important; }
    .md\:app-row-span-3 { grid-row: span 3 / span 3 !important; }
    .md\:app-row-span-4 { grid-row: span 4 / span 4 !important; }
}

/* LG (1024px) */
@media (min-width: 1024px) {
    .lg\:app-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
    .lg\:app-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

    .lg\:app-col-span-1 { grid-column: span 1 / span 1 !important; }
    .lg\:app-col-span-2 { grid-column: span 2 / span 2 !important; }
    .lg\:app-col-span-3 { grid-column: span 3 / span 3 !important; }
    .lg\:app-col-span-4 { grid-column: span 4 / span 4 !important; }
    .lg\:app-col-span-5 { grid-column: span 5 / span 5 !important; }
    .lg\:app-col-span-6 { grid-column: span 6 / span 6 !important; }
    .lg\:app-col-span-7 { grid-column: span 7 / span 7 !important; }
    .lg\:app-col-span-8 { grid-column: span 8 / span 8 !important; }
    .lg\:app-col-span-9 { grid-column: span 9 / span 9 !important; }
    .lg\:app-col-span-10 { grid-column: span 10 / span 10 !important; }
    .lg\:app-col-span-11 { grid-column: span 11 / span 11 !important; }
    .lg\:app-col-span-12 { grid-column: span 12 / span 12 !important; }

    .lg\:app-row-span-1 { grid-row: span 1 / span 1 !important; }
    .lg\:app-row-span-2 { grid-row: span 2 / span 2 !important; }
    .lg\:app-row-span-3 { grid-row: span 3 / span 3 !important; }
    .lg\:app-row-span-4 { grid-row: span 4 / span 4 !important; }
}

/* ==========================================================================
   12. ПРОЧИЕ УТИЛИТЫ
   ========================================================================== */

/* Курсоры */
.app-cursor-pointer { cursor: pointer !important; }
.app-cursor-default { cursor: default !important; }
.app-cursor-not-allowed { cursor: not-allowed !important; }
.app-cursor-text { cursor: text !important; }
.app-cursor-move { cursor: move !important; }

/* Выделение */
.app-select-none { user-select: none !important; }
.app-select-text { user-select: text !important; }
.app-select-all { user-select: all !important; }

/* Прозрачность */
.app-opacity-0 { opacity: 0 !important; }
.app-opacity-25 { opacity: 0.25 !important; }
.app-opacity-50 { opacity: 0.5 !important; }
.app-opacity-75 { opacity: 0.75 !important; }
.app-opacity-100 { opacity: 1 !important; }

/* Переполнение */
.app-overflow-auto { overflow: auto !important; }
.app-overflow-hidden { overflow: hidden !important; }
.app-overflow-visible { overflow: visible !important; }
.app-overflow-scroll { overflow: scroll !important; }
.app-overflow-x-auto { overflow-x: auto !important; }
.app-overflow-y-auto { overflow-y: auto !important; }
.app-overflow-x-hidden { overflow-x: hidden !important; }
.app-overflow-y-hidden { overflow-y: hidden !important; }

/* Z-index */
.app-z-0 { z-index: 0 !important; }
.app-z-10 { z-index: 10 !important; }
.app-z-20 { z-index: 20 !important; }
.app-z-30 { z-index: 30 !important; }
.app-z-40 { z-index: 40 !important; }
.app-z-50 { z-index: 50 !important; }
.app-z-auto { z-index: auto !important; }

/* Вертикальное выравнивание */
.app-align-baseline { vertical-align: baseline !important; }
.app-align-top { vertical-align: top !important; }
.app-align-middle { vertical-align: middle !important; }
.app-align-bottom { vertical-align: bottom !important; }
.app-align-text-top { vertical-align: text-top !important; }
.app-align-text-bottom { vertical-align: text-bottom !important; }

/* Очистка float */
.app-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Обрезка контента */
.app-overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   13. АДАПТИВНЫЕ DISPLAY УТИЛИТЫ
   ========================================================================== */

@media (min-width: 640px) {
    .app-sm-block { display: block !important; }
    .app-sm-hidden { display: none !important; }
    .app-sm-flex { display: flex !important; }
    .app-sm-grid { display: grid !important; }
}

@media (min-width: 768px) {
    .app-md-block { display: block !important; }
    .app-md-hidden { display: none !important; }
    .app-md-flex { display: flex !important; }
    .app-md-grid { display: grid !important; }
}

@media (min-width: 1024px) {
    .app-lg-block { display: block !important; }
    .app-lg-hidden { display: none !important; }
    .app-lg-flex { display: flex !important; }
    .app-lg-grid { display: grid !important; }
}

@media (min-width: 1280px) {
    .app-xl-block { display: block !important; }
    .app-xl-hidden { display: none !important; }
    .app-xl-flex { display: flex !important; }
    .app-xl-grid { display: grid !important; }
}