/* CORE Framework */
/* 2025 — Артем Быстров */

/* CORE — это фреймворк для быстрой развертки аккуратных страниц */
/* Фреймворк не затрагивает никакие элементы, если им не присвоен класс core-... или дата-атрибут */
/* Стили этого фреймворка можно изолировать от всех других стилей на странице. Родителю поставьте класс .core-solo — это сбросит все стили и задаст специфичность повыше */



/* TODO: Классы отдельных радио-инпутов с кружочками (сейчас есть только группа) */

/* TODO: Починить распирание tooltip если он выходит за пределы страницы */

/* TODO: Классы для цветных модификаторов фона и текста: ошибка и т.п. Для кнопок, баджей, текста и тп */


/* TODO: Инпут внутри с кнопкой */
/* TODO: Блок выходящий за рамки, если подложка тусклая */
/* TODO: Разобраться с иконками */
/* TODO: Поля и селекты без фона, фон только при взаимодействии */
/* TODO: Классы для картинок, figure, картинок на фон любому блоку... */
/* TODO: Сделать более красивый скелетон https://primer.style/product/components/skeleton-loaders/ */


/* TODO: tooltip.js */
/* TODO: lazy.js */
/* TODO: slider.js */
/* TODO: collapse.js */
/* TODO: Классы хлебных крошек ul li */


/* TODO: Токены теней https://primer.style/product/css-utilities/box-shadow/ */
/* TODO: Классы для навигации с вложенными меню + nav.js */
/* TODO: scroll.js: следит за скролом и что-то выполняет, плавный скролл */


/* TODO: Подумать про визуальный редактор */
/* TODO: Цвета для цветных объектов миксовать через lab или hsl */

/* TODO✓: Подобрать цвета состоянию чекбокса disabled */
/* TODO✓: Разобраться с цветами инпутов и применением к ним тем (ховер, селекты ...) */
/* TODO✓: Разобраться с брейкпоинтами */

/* =========================== */
/* SECTION: root, темы */
/* ===========================  */

/* Светлая тема по умолчанию */
:root { 
    /* База */
    --unit: 2px;
    --rem-base: 18px;
    font-size: var(--rem-base);


    /* Размеры экрана.  */
    /* Переменные нельзя использовать в медиа-запросах, поэтому все брейкпоинты нужно редактировать вручную. Жаль :( */
    --w-max-mobile: 720px;
    --w-max-tablet: 924px;
    --w-max-desktop: 1200px;


    /* Цвета */
    --color-background: #ffffff;
    --color-surface: #EFEFEF;
    --color-foreground: #000;
    --color-accent: #B2FF35;
    --color-accent-2: #B2FF35;
    --color-link: #4b3eff;
    --color-focus: #ff883e;
    --color-overlay: color-mix(in srgb, var(--color-foreground), transparent 30%);

    --color-success: #28A745;
    --color-danger: #DC3545;
    --color-warning: #FFC107;
    --color-info: #17A2B8;


    /* Текстовые цвета */
    --color-text-primary: var(--color-foreground);
    --color-text-on-accent: var(--color-foreground);
    --color-text-inverse: var(--color-background);

    --color-text-muted: color-mix(in srgb, var(--color-foreground), var(--color-background) 70%);
    --color-text-muted-1x: color-mix(in srgb, var(--color-foreground), var(--color-background) 10%);
    --color-text-muted-2x: color-mix(in srgb, var(--color-foreground), var(--color-background) 20%);
    --color-text-muted-3x: color-mix(in srgb, var(--color-foreground), var(--color-background) 30%);
    --color-text-muted-4x: color-mix(in srgb, var(--color-foreground), var(--color-background) 40%);
    --color-text-muted-5x: color-mix(in srgb, var(--color-foreground), var(--color-background) 50%);
    --color-text-muted-6x: color-mix(in srgb, var(--color-foreground), var(--color-background) 60%);
    --color-text-muted-7x: color-mix(in srgb, var(--color-foreground), var(--color-background) 70%);
    --color-text-muted-8x: color-mix(in srgb, var(--color-foreground), var(--color-background) 80%);
    --color-text-muted-9x: color-mix(in srgb, var(--color-foreground), var(--color-background) 90%);


    /* Поверхности */
    --color-block: var(--color-surface);
    /* --color-block: color-mix(in srgb, var(--color-background), var(--color-foreground) 5%);; */
    --color-border: color-mix(in srgb, var(--color-button-primary), transparent 25%);
    

    /* Ссылки */
    --color-link-hover: var(--color-focus);


    /* Шрифт */
    --font-family-primary: "Jost", sans-serif;
    --font-family-line-height-compensation: 0em; /* Для компенсации line-height в шрифтах с низким x-height */
    /* --font-family-primary: "Inter", sans-serif; */
    --font-family-mono: 'JetBrains Mono', 'Fira Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;


    /* Настройки кнопок */
    --color-button-primary: var(--color-foreground);
    --color-button-primary-hover: color-mix(in srgb, var(--color-button-primary), var(--color-background) 30%);
    --color-button-secondary: color-mix(in srgb, var(--color-background), var(--color-foreground) 8%);;
    --color-button-secondary-hover: color-mix(in srgb, var(--color-button-secondary), var(--color-foreground) 10%);
    --color-button-accent: var(--color-accent);
    --color-button-accent-hover: color-mix(in srgb, var(--color-accent), var(--color-foreground) 7%);

    /* Настройки полей */
    --field-color-text: var(--color-text-primary);
    --field-color-background: color-mix(in srgb, var(--color-background), var(--color-foreground) 4%);
    --field-color-background-hover: color-mix(in srgb, var(--field-color-background), var(--color-foreground) 4%);
    --field-color-border: color-mix(in srgb, var(--field-color-background), var(--color-foreground) 6%);
    --field-color-border-hover: color-mix(in srgb, var(--field-color-border), var(--color-foreground) 6%);
    --field-color-placeholder: color-mix(in srgb, var(--color-foreground), transparent 70%);
    --field-color-disabled-background: color-mix(in srgb, var(--field-color-background), transparent 80%);
    --field-color-disabled-border: color-mix(in srgb, var(--field-color-border), transparent 0%);
    --field-color-disabled-text: color-mix(in srgb, var(--field-color-text), transparent 70%);


    /* Размеры текста */
    --f-s-xs: 0.7rem; /* font-size */
    --f-s-s: 0.8rem;
    --f-s-m: 1rem;
    --f-s-l: 1.3rem;
    --f-s-xl: 1.7rem;
    --f-s-xxl: 2.3rem;

    --l-h-xs: 1.38em; /* line-height */
    --l-h-s: 1.3em;
    --l-h-m: 1.3em;
    --l-h-l: 1.25em;
    --l-h-xl: 1.2em;
    --l-h-xxl: 1.1em;

    --f-w-normal: 400; /* font-weight */
    --f-w-semibold: 500;
    --f-w-bold: 600;

    /* Размеры заголовков */
    --l-h-head-xs: 1.28em; /* line-height */
    --l-h-head-s: 1.2em;
    --l-h-head-m: 1.2em;
    --l-h-head-l: 1.12em;
    --l-h-head-xl: 1.12em;
    --l-h-head-xxl: 1.05em;


    /* Скругления */
    --b-r-xs: 6px;
    --b-r-s: 10px;
    --b-r-m: 14px;
    --b-r-l: 20px;
    --b-r-xl: 32px;
    --b-r-full: 10000px;


    /* Размеры иконок */
    --i-3x: 6px;
    --i-4x: 8px;
    --i-5x: 10px;
    --i-6x: 12px;
    --i-7x: 14px;
    --i-8x: 16px;
    --i-10x: 20px;
    --i-12x: 24px;
    --i-16x: 32px;
    --i-18x: 32px;
    --i-20x: 40px;
    --i-24x: 48px;
    

    /* Переходы */
    --transition-duration-fast: 0.17s;
    --transition-timing-function: ease;
    --transition-interactive: background-color var(--transition-duration-fast) var(--transition-timing-function), color var(--transition-duration-fast) var(--transition-timing-function);


    /* Отступы */
    --s-1x: calc(var(--unit) * 1); /* 2px */
    --s-2x: calc(var(--unit) * 2);
    --s-3x: calc(var(--unit) * 3);
    --s-4x: calc(var(--unit) * 4);
    --s-5x: calc(var(--unit) * 5); /* 10px */
    --s-6x: calc(var(--unit) * 6);
    --s-7x: calc(var(--unit) * 7);
    --s-8x: calc(var(--unit) * 8);
    --s-9x: calc(var(--unit) * 9);
    --s-10x: calc(var(--unit) * 10); /* 20px */
    --s-12x: calc(var(--unit) * 12);
    --s-14x: calc(var(--unit) * 14);
    --s-16x: calc(var(--unit) * 16);
    --s-18x: calc(var(--unit) * 18);
    --s-20x: calc(var(--unit) * 20);
    --s-24x: calc(var(--unit) * 24);
    --s-28x: calc(var(--unit) * 28);
    --s-32x: calc(var(--unit) * 32);
    --s-48x: calc(var(--unit) * 48);
    --s-64x: calc(var(--unit) * 64);
    
    

    /* Иконки */
    --color-icon-muted: color-mix(in srgb, var(--color-foreground), var(--color-background) 70%);
    --color-icon-muted-1x: color-mix(in srgb, var(--color-foreground), var(--color-background) 10%);
    --color-icon-muted-2x: color-mix(in srgb, var(--color-foreground), var(--color-background) 20%);
    --color-icon-muted-3x: color-mix(in srgb, var(--color-foreground), var(--color-background) 30%);
    --color-icon-muted-4x: color-mix(in srgb, var(--color-foreground), var(--color-background) 40%);
    --color-icon-muted-5x: color-mix(in srgb, var(--color-foreground), var(--color-background) 50%);
    --color-icon-muted-6x: color-mix(in srgb, var(--color-foreground), var(--color-background) 60%);
    --color-icon-muted-7x: color-mix(in srgb, var(--color-foreground), var(--color-background) 70%);
    --color-icon-muted-8x: color-mix(in srgb, var(--color-foreground), var(--color-background) 80%);
    --color-icon-muted-9x: color-mix(in srgb, var(--color-foreground), var(--color-background) 90%);

    --i-null: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 30 30'%3E%3Cpath fill='currentColor' d='M0 0h30v30H0z'/%3E%3C/svg%3E");
    --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 10'%3E%3Cpath stroke-width='2' stroke='currentColor' d='M1 4.7 5.2 9 13 1'/%3E%3C/svg%3E");;
    --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 1v14M1 8h14'/%3E%3C/svg%3E");
    --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.8' d='m19 3-8 8m-8 8 8-8m0 0L3 3l16 16'/%3E%3C/svg%3E");
    --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 2'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 1h14'/%3E%3C/svg%3E");
    --i-shevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 7'%3E%3Cpath stroke='currentColor' stroke-width='1.5' d='m1 1 6 5 6-5'/%3E%3C/svg%3E");
    --i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 26 19'%3E%3Cpath fill='currentColor' d='M7 1c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1H8a1 1 0 0 1-1-1V1ZM14 1c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1h-3a1 1 0 0 1-1-1V1ZM21 1c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1h-3a1 1 0 0 1-1-1V1ZM0 8c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1H1a1 1 0 0 1-1-1V8ZM7 8c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1H8a1 1 0 0 1-1-1V8ZM14 8c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1h-3a1 1 0 0 1-1-1V8ZM21 8c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1h-3a1 1 0 0 1-1-1V8ZM0 15c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1H1a1 1 0 0 1-1-1v-3ZM7 15c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1H8a1 1 0 0 1-1-1v-3ZM14 15c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1h-3a1 1 0 0 1-1-1v-3Z'/%3E%3C/svg%3E");
    --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M6 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM0 6a6 6 0 1 1 10.9 3.5l4.8 4.8a1 1 0 0 1-1.4 1.4L9.5 11A6 6 0 0 1 0 6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    --i-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 30'%3E%3Cpath fill='currentColor' d='M22 13.8a1 1 0 0 0-.6-.7L14 10.4l2-9.2a1 1 0 0 0-1.7-.9l-14 15A1 1 0 0 0 .6 17L8 19.6l-2 9.2a1 1 0 0 0 1.7.9l14-15a1 1 0 0 0 .3-1Z'/%3E%3C/svg%3E");
    --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 21'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M15.7 19.7h-9a1 1 0 0 1-1-1v-12c0-.5.4-1 1-1h9c.5 0 1 .5 1 1v12c0 .6-.5 1-1 1Z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M1.3 15V3.3c0-1 .8-1.8 1.8-1.8H12'/%3E%3C/svg%3E");
    --i-enter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 20'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M22 0a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-7c0-1.1.9-2 2-2h3a2 2 0 0 0 2-1.5l1.6-6a2 2 0 0 1 2-1.5H22Zm-3.6 7.5a1 1 0 0 0-1 1v4h-5.7l1.2-1.7a1 1 0 0 0-1.6-1.2L9 13A1 1 0 0 0 9 14l2.2 3.3a1 1 0 0 0 1.7-1v-.1l-1.2-1.7h6.7c.6 0 1-.5 1-1v-5c0-.6-.4-1-1-1Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
    --i-enter2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m7 6.4-6 6m0 0 6 6m-6-6h15a3 3 0 0 0 3-3V4.5'/%3E%3C/svg%3E");

    --i-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M21 11a10 10 0 1 0-10 10'/%3E%3C/svg%3E");

    --i-yamaps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 58 73'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M12.9 4.9a29 29 0 0 1 36.6 44.6c-1.4 1.4-3.2 3-5.2 4.6-5.7 4.7-12.6 10.4-13.1 16.3-.1 1.1-1 2.1-2.2 2.1-1.2 0-2-1-2.2-2.1-.5-6-7.4-11.6-13-16.3-2.1-1.7-4-3.2-5.3-4.6A29 29 0 0 1 12.9 5Zm12.3 33.3a10 10 0 1 0 7.6-18.4 10 10 0 0 0-7.6 18.4Z' clip-rule='evenodd'/%3E%3C/svg%3E")
}


.core-theme-dark {
    --color-background: #181A1B;
    --color-surface: #222525;
    --color-foreground: #fff;
    --color-accent: #B2FF35;
    --color-accent-2: #B2FF35;
    --color-link: #5370ff;
    --color-focus: #ff883e;
    --color-overlay: color-mix(in srgb, var(--color-foreground), transparent 30%);

    --color-success: #28A745;
    --color-danger: #DC3545;
    --color-warning: #FFC107;
    --color-info: #17A2B8;

    /* Текстовые цвета */
    --color-text-primary: var(--color-foreground);
    --color-text-on-accent: var(--color-background);
    --color-text-muted: color-mix(in srgb, var(--color-foreground), var(--color-background) 50%);
    --color-text-inverse: var(--color-background);

    
    /* Кнопочные цвета */
    --color-button-primary: var(--color-foreground);
    --color-button-primary-hover: color-mix(in srgb, var(--color-button-primary), var(--color-background) 20%);
    --color-button-secondary: color-mix(in srgb, var(--color-background), var(--color-foreground) 11%);;
    --color-button-secondary-hover: color-mix(in srgb, var(--color-button-secondary), var(--color-foreground) 7%);
    --color-button-accent: var(--color-accent);
    --color-button-accent-hover: color-mix(in srgb, var(--color-accent), #88d40e 30%);


    /* Настройки полей */
    --field-color-text: var(--color-text-primary);
    --field-color-background: color-mix(in srgb, var(--color-background), var(--color-foreground) 6%);
    --field-color-background-hover: color-mix(in srgb, var(--field-color-background), var(--color-foreground) 6%);
    --field-color-border: color-mix(in srgb, var(--field-color-background), var(--color-foreground) 7%);
    --field-color-border-hover: color-mix(in srgb, var(--field-color-border), var(--color-foreground) 7%);
    --field-color-placeholder: color-mix(in srgb, var(--color-foreground), transparent 70%);
    --field-color-disabled-background: color-mix(in srgb, var(--field-color-background), transparent 80%);
    --field-color-disabled-border: color-mix(in srgb, var(--field-color-border), transparent 0%);
    --field-color-disabled-text: color-mix(in srgb, var(--field-color-text), transparent 70%);

    /* Поверхности */
    --color-block: var(--color-surface);
    --color-border: color-mix(in srgb, var(--color-button-primary), transparent 30%);

    /* Ссылки */
    --color-link-hover: var(--color-focus);

    --color-icon-muted: color-mix(in srgb, var(--color-foreground), var(--color-background) 60%);

    background-color: var(--color-background);
}


.core-theme-colorful {
    --color-background: #fff8f0;
    --color-surface: #f0f4ff;
    --color-foreground: #2d2d2d;
    --color-accent: #ff6f61;
    --color-accent-2: #6ec6ff;
    --color-link: #3f51b5;
    --color-focus: #ffb300;
    --color-overlay: color-mix(in srgb, var(--color-foreground), transparent 20%);

    --color-success: #43a047;
    --color-danger: #e53935;
    --color-warning: #fbc02d;
    --color-info: #1e88e5;

    /* Текстовые цвета */
    --color-text-primary: var(--color-foreground);
    --color-text-on-accent: #fff;
    --color-text-muted: color-mix(in srgb, var(--color-foreground), var(--color-background) 60%);
    --color-text-inverse: #fff;

    /* Кнопочные цвета */
    --color-button-primary: var(--color-accent);
    --color-button-primary-hover: color-mix(in srgb, var(--color-accent), #d84315 20%);
    --color-button-secondary: color-mix(in srgb, var(--color-background), var(--color-foreground) 8%);
    --color-button-secondary-hover: color-mix(in srgb, var(--color-button-secondary), var(--color-accent) 10%);
    --color-button-accent: var(--color-accent-2);
    --color-button-accent-hover: color-mix(in srgb, var(--color-accent-2), #0288d1 20%);

    /* Настройки полей */
    --field-color-text: var(--color-text-primary);
    --field-color-background: color-mix(in srgb, var(--color-background), var(--color-accent-2) 6%);
    --field-color-background-hover: color-mix(in srgb, var(--field-color-background), var(--color-accent-2) 6%);
    --field-color-border: color-mix(in srgb, var(--field-color-background), var(--color-accent-2) 10%);
    --field-color-border-hover: color-mix(in srgb, var(--field-color-border), var(--color-accent-2) 10%);
    --field-color-placeholder: color-mix(in srgb, var(--color-foreground), transparent 70%);
    --field-color-disabled-background: color-mix(in srgb, var(--field-color-background), transparent 80%);
    --field-color-disabled-border: color-mix(in srgb, var(--field-color-border), transparent 0%);
    --field-color-disabled-text: color-mix(in srgb, var(--field-color-text), transparent 70%);

    /* Поверхности */
    --color-block: var(--color-surface);
    --color-border: color-mix(in srgb, var(--color-accent), transparent 30%);

    /* Ссылки */
    --color-link-hover: var(--color-focus);

    --color-icon-muted: color-mix(in srgb, var(--color-foreground), var(--color-background) 60%);

    background-color: var(--color-background);
}


.core-theme-sunset {
    --color-background: #fff5e6;
    --color-surface: #ffe0b2;
    --color-foreground: #3e2723;
    --color-accent: #ff7043;
    --color-accent-2: #ffd54f;
    --color-link: #ff7043;
    --color-focus: #ffb300;
    --color-overlay: color-mix(in srgb, var(--color-foreground), transparent 18%);

    --color-success: #43a047;
    --color-danger: #d84315;
    --color-warning: #ffa726;
    --color-info: #29b6f6;

    /* Текстовые цвета */
    --color-text-primary: var(--color-foreground);
    --color-text-on-accent: #fff;
    --color-text-muted: color-mix(in srgb, var(--color-foreground), var(--color-background) 60%);
    --color-text-inverse: #fff;

    /* Кнопочные цвета */
    --color-button-primary: var(--color-accent);
    --color-button-primary-hover: color-mix(in srgb, var(--color-accent), #bf360c 20%);
    --color-button-secondary: color-mix(in srgb, var(--color-background), var(--color-foreground) 8%);
    --color-button-secondary-hover: color-mix(in srgb, var(--color-button-secondary), var(--color-accent) 10%);
    --color-button-accent: var(--color-accent-2);
    --color-button-accent-hover: color-mix(in srgb, var(--color-accent-2), #ffb300 20%);

    /* Настройки полей */
    --field-color-text: var(--color-text-primary);
    --field-color-background: color-mix(in srgb, var(--color-background), var(--color-accent-2) 8%);
    --field-color-background-hover: color-mix(in srgb, var(--field-color-background), var(--color-accent-2) 8%);
    --field-color-border: color-mix(in srgb, var(--field-color-background), var(--color-accent-2) 12%);
    --field-color-border-hover: color-mix(in srgb, var(--field-color-border), var(--color-accent-2) 12%);
    --field-color-placeholder: color-mix(in srgb, var(--color-foreground), transparent 70%);
    --field-color-disabled-background: color-mix(in srgb, var(--field-color-background), transparent 80%);
    --field-color-disabled-border: color-mix(in srgb, var(--field-color-border), transparent 0%);
    --field-color-disabled-text: color-mix(in srgb, var(--field-color-text), transparent 70%);

    /* Поверхности */
    --color-block: var(--color-surface);
    --color-border: color-mix(in srgb, var(--color-accent), transparent 30%);

    /* Ссылки */
    --color-link-hover: var(--color-focus);

    --color-icon-muted: color-mix(in srgb, var(--color-foreground), var(--color-background) 60%);

    background-color: var(--color-background);
}



/* !SECTION */
/* =========================== */
/* SECTION: Сброс стилей */
/* =========================== */


/* .core-solo изолирует от внешних стилей всё содержимое.  */
/* Увеличивает специфичность на 1 пункт */
.core-solo * {
    /* all: unset; */
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    font-family: inherit;
    font-style: normal;
    font-weight: normal;
    line-height: inherit;
    text-decoration: none;
    text-align: inherit;
    list-style: none;
    background: none;
    color: inherit;
    box-sizing: border-box;
    outline: none;
}

*, .core-solo *,
*::before, .core-solo *::before,
*::after, .core-solo *::after {
    box-sizing: border-box;
    font-size: unset;
}

/* Исключения для b, strong, i, br, em */
.core-solo b,
.core-solo strong,
.core-solo i,
.core-solo em,
.core-solo br {
    all: revert;
}


/* Скролбар */
::-webkit-scrollbar {
    max-width: var(--s-4x);
    max-height: var(--s-4x);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-block);
    border-radius: var(--b-r-m);
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-button-secondary-hover);
}

::-webkit-scrollbar-track {
    background-color: unset;
    border-radius: var(--b-r-m);
}

::-webkit-scrollbar-corner {
    background-color: var(--color-background);
}


body, .core-solo body {
    font-family: var(--font-family-primary) !important; 
    line-height: var(--l-h-m); 
    color: var(--color-text-primary);        
    background-color: var(--color-background); 
    margin: 0;
    min-width: 100vw;
    overflow-x: hidden;
    position: relative;
}



/* !SECTION */
/* =========================== */
/* SECTION: Анимации */
/* ===========================  */

.core-shake,
.core-solo .core-shake {
    animation: core-shake-animation 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes core-shake-animation {
    0% { transform: translateX(0); }
    15% { transform: translateX(-3px); }
    30% { transform: translateX(3px); }
    45% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
    90% { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

.core-pulsing,
.core-solo .core-pulsing {
    animation: core-pulse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes core-pulse {
    0% { opacity: 0.3; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

.core-loading,
.core-solo .core-loading {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.core-loading:after,
.core-solo .core-loading:after {
    content: var(--i-spinner);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--i-12x);
    height: var(--i-12x);
    z-index: 1;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



.core-loading-overlay,
.core-solo .core-loading-overlay {
    opacity: 0.4;
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.core-loading-overlay:before,
.core-solo .core-loading-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        120deg,
        transparent 25%,
        var(--color-background) 50%,
        transparent 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 2s infinite ease-in-out;
    z-index: 1;
    background-repeat: no-repeat;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}



/* !SECTION */
/* =========================== */
/* SECTION: Контейнеры */
/* ===========================  */

/* Секция страницы */
.core-section,
.core-solo .core-section {
    margin: 0 auto;
    max-width: var(--w-max-desktop);
    display: flex;
    flex-direction: column;
    gap: var(--s-16x);
    color: var(--color-text-primary);
}

@media (max-width: 924px) {
    .core-section,
    .core-solo .core-section {
        max-width: var(--w-max-tablet);
    }
}

@media (max-width: 720px) {
    .core-section,
    .core-solo .core-section {
        max-width: var(--w-max-mobile);
    }
}




/* Вертикальные и горизонтальные потоки */
.core-col,
.core-container,
.core-solo .core-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: var(--s-6x);
    max-width: 100%;
    color: var(--color-text-primary);
}

.core-row,
.core-solo .core-row,
.core-container-row,
.core-solo .core-container-row {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    gap: var(--s-6x);
    max-width: 100%;
    color: var(--color-text-primary);
}

@media (max-width: 924px) {
    .t-core-col,
    .core-solo .t-core-container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: var(--s-6x);
        max-width: 100%;
        color: var(--color-text-primary);
    }
}

@media (max-width: 720px) {
    .m-core-col,
    .core-solo .m-core-container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: var(--s-6x);
        max-width: 100%;
        color: var(--color-text-primary);
    }
}

@media (max-width: 924px) {
    .t-core-row,
    .core-solo .t-core-row {
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
        gap: var(--s-6x);
        max-width: 100%;
        color: var(--color-text-primary);
    }
}

@media (max-width: 720px) {
    .m-core-row,
    .core-solo .m-core-row {
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
        gap: var(--s-6x);
        max-width: 100%;
        color: var(--color-text-primary);
    }
}

.core-card {
    background: var(--color-block);
    padding: var(--s-8x) var(--s-8x);
    border-radius: var(--b-r-m);

    --color-button-secondary: color-mix(in srgb, var(--color-background), var(--color-foreground) 1%);;
    --color-button-secondary-hover: color-mix(in srgb, var(--color-button-secondary), #000 10%);

    --field-color-text: var(--color-text-primary);
    --field-color-background: color-mix(in srgb, var(--color-background), var(--color-foreground) 2%);
    --field-color-background-hover: color-mix(in srgb, var(--field-color-background), var(--color-background) 85%);
    --field-color-border: color-mix(in srgb, var(--field-color-background), var(--color-foreground) 7%);
    --field-color-border-hover: color-mix(in srgb, var(--field-color-border), var(--color-foreground) 10%);
    --field-color-placeholder: color-mix(in srgb, var(--color-foreground), transparent 70%);
    --field-color-disabled-background: color-mix(in srgb, var(--field-color-background), transparent 80%);
    --field-color-disabled-border: color-mix(in srgb, var(--field-color-border), var(--color-foreground) 5%);
    --field-color-disabled-text: color-mix(in srgb, var(--field-color-text), transparent 70%);
}


/* Колонки */
.core-grid, .core-solo .core-grid {
    display: grid;
    gap: var(--s-6x);
}


/* Две колонки */
.core-grid-2c, .core-solo .core-grid-2c { grid-template-columns: repeat(2, 1fr) }
.core-grid-2c-1fr-2fr, .core-solo .core-grid-2c-1fr-2fr { grid-template-columns: 1fr 2fr }
.core-grid-2c-2fr-1fr, .core-solo .core-grid-2c-2fr-1fr { grid-template-columns: 2fr 1fr }
.core-grid-2c-1fr-3fr, .core-solo .core-grid-2c-1fr-3fr { grid-template-columns: 1fr 3fr }
.core-grid-2c-3fr-1fr, .core-solo .core-grid-2c-3fr-1fr { grid-template-columns: 3fr 1fr }
.core-grid-2c-1fr-4fr, .core-solo .core-grid-2c-1fr-4fr { grid-template-columns: 1fr 4fr }
.core-grid-2c-4fr-1fr, .core-solo .core-grid-2c-4fr-1fr { grid-template-columns: 4fr 1fr }

/* Три колонки */
.core-grid-3c, .core-solo .core-grid-3c { grid-template-columns: repeat(3, 1fr) }
.core-grid-3c-1fr-2fr-1fr, .core-solo .core-grid-3c-1fr-2fr-1fr { grid-template-columns: 1fr 2fr 1fr }
.core-grid-3c-2fr-1fr-1fr, .core-solo .core-grid-3c-2fr-1fr-1fr { grid-template-columns: 2fr 1fr 1fr }
.core-grid-3c-1fr-1fr-2fr, .core-solo .core-grid-3c-1fr-1fr-2fr { grid-template-columns: 1fr 1fr 2fr }
.core-grid-3c-1fr-3fr-1fr, .core-solo .core-grid-3c-1fr-3fr-1fr { grid-template-columns: 1fr 3fr 1fr }
.core-grid-3c-3fr-1fr-1fr, .core-solo .core-grid-3c-3fr-1fr-1fr { grid-template-columns: 3fr 1fr 1fr }
.core-grid-3c-1fr-1fr-3fr, .core-solo .core-grid-3c-1fr-1fr-3fr { grid-template-columns: 1fr 1fr 3fr }


@media (max-width: 924px) {

    /* Одна колонка */
    .t-core-grid-1c, .core-solo .t-core-grid-1c { grid-template-columns: 1fr }

    /* Две колонки */
    .t-core-grid-2c, .core-solo .t-core-grid-2c { grid-template-columns: repeat(2, 1fr) }
    .t-core-grid-2c-1fr-2fr, .core-solo .t-core-grid-2c-1fr-2fr { grid-template-columns: 1fr 2fr }
    .t-core-grid-2c-2fr-1fr, .core-solo .t-core-grid-2c-2fr-1fr { grid-template-columns: 2fr 1fr }
    .t-core-grid-2c-1fr-3fr, .core-solo .t-core-grid-2c-1fr-3fr { grid-template-columns: 1fr 3fr }
    .t-core-grid-2c-3fr-1fr, .core-solo .t-core-grid-2c-3fr-1fr { grid-template-columns: 3fr 1fr }
    .t-core-grid-2c-1fr-4fr, .core-solo .t-core-grid-2c-1fr-4fr { grid-template-columns: 1fr 4fr }
    .t-core-grid-2c-4fr-1fr, .core-solo .t-core-grid-2c-4fr-1fr { grid-template-columns: 4fr 1fr }

    /* Три колонки */
    .t-core-grid-3c, .core-solo .t-core-grid-3c { grid-template-columns: repeat(3, 1fr) }
    .t-core-grid-3c-1fr-2fr-1fr, .core-solo .t-core-grid-3c-1fr-2fr-1fr { grid-template-columns: 1fr 2fr 1fr }
    .t-core-grid-3c-2fr-1fr-1fr, .core-solo .t-core-grid-3c-2fr-1fr-1fr { grid-template-columns: 2fr 1fr 1fr }
    .t-core-grid-3c-1fr-1fr-2fr, .core-solo .t-core-grid-3c-1fr-1fr-2fr { grid-template-columns: 1fr 1fr 2fr }
    .t-core-grid-3c-1fr-3fr-1fr, .core-solo .t-core-grid-3c-1fr-3fr-1fr { grid-template-columns: 1fr 3fr 1fr }
    .t-core-grid-3c-3fr-1fr-1fr, .core-solo .t-core-grid-3c-3fr-1fr-1fr { grid-template-columns: 3fr 1fr 1fr }
    .t-core-grid-3c-1fr-1fr-3fr, .core-solo .t-core-grid-3c-1fr-1fr-3fr { grid-template-columns: 1fr 1fr 3fr }
}


@media (max-width: 720px) {

    /* Одна колонка */
    .m-core-grid-1c, .core-solo .m-core-grid-1c { grid-template-columns: 1fr }

    /* Две колонки */
    .m-core-grid-2c, .core-solo .m-core-grid-2c { grid-template-columns: repeat(2, 1fr) }
    .m-core-grid-2c-1fr-2fr, .core-solo .m-core-grid-2c-1fr-2fr { grid-template-columns: 1fr 2fr }
    .m-core-grid-2c-2fr-1fr, .core-solo .m-core-grid-2c-2fr-1fr { grid-template-columns: 2fr 1fr }
    .m-core-grid-2c-1fr-3fr, .core-solo .m-core-grid-2c-1fr-3fr { grid-template-columns: 1fr 3fr }
    .m-core-grid-2c-3fr-1fr, .core-solo .m-core-grid-2c-3fr-1fr { grid-template-columns: 3fr 1fr }
    .m-core-grid-2c-1fr-4fr, .core-solo .m-core-grid-2c-1fr-4fr { grid-template-columns: 1fr 4fr }
    .m-core-grid-2c-4fr-1fr, .core-solo .m-core-grid-2c-4fr-1fr { grid-template-columns: 4fr 1fr }

    /* Три колонки */
    .m-core-grid-3c, .core-solo .m-core-grid-3c { grid-template-columns: repeat(3, 1fr) }
    .m-core-grid-3c-1fr-2fr-1fr, .core-solo .m-core-grid-3c-1fr-2fr-1fr { grid-template-columns: 1fr 2fr 1fr }
    .m-core-grid-3c-2fr-1fr-1fr, .core-solo .m-core-grid-3c-2fr-1fr-1fr { grid-template-columns: 2fr 1fr 1fr }
    .m-core-grid-3c-1fr-1fr-2fr, .core-solo .m-core-grid-3c-1fr-1fr-2fr { grid-template-columns: 1fr 1fr 2fr }
    .m-core-grid-3c-1fr-3fr-1fr, .core-solo .m-core-grid-3c-1fr-3fr-1fr { grid-template-columns: 1fr 3fr 1fr }
    .m-core-grid-3c-3fr-1fr-1fr, .core-solo .m-core-grid-3c-3fr-1fr-1fr { grid-template-columns: 3fr 1fr 1fr }
    .m-core-grid-3c-1fr-1fr-3fr, .core-solo .m-core-grid-3c-1fr-1fr-3fr { grid-template-columns: 1fr 1fr 3fr }
}



/* !SECTION */
/* =========================== */
/* SECTION: Иконки */
/* ===========================  */

.core-icon,
.core-solo .core-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.core-icon-button,
.core-solo .core-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: none;
    border: none;
    padding: 0;
    color: var(--color-icon-muted);
}

.core-icon-button:hover,
.core-icon-button:focus,
.core-solo .core-icon-button:hover,
.core-solo .core-icon-button:focus {
    color: var(--color-text-primary);
    outline: none;
    cursor: pointer;
}

.core-icon-button:focus-visible,
.core-solo .core-icon-button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    z-index: 9999;
}

.core-icon-button:disabled,
.core-solo .core-icon-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    color: var(--color-text-muted)
}

.core-icon-button:disabled:hover,
.core-solo .core-icon-button:disabled:hover {
}


.core-icon::before,
.core-icon-button::before,
.core-solo .core-icon::before,
.core-solo .core-icon-button::before {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--i-8x);
    height: var(--i-8x);
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.core-icon-xxxs::before,
.core-solo .core-icon-xxxs::before {
    width: var(--i-3x);
    height: var(--i-3x);
}

.core-icon-xxs::before,
.core-solo .core-icon-xxs::before {
    width: var(--i-4x);
    height: var(--i-4x);
}

.core-icon-xs::before,
.core-solo .core-icon-xs::before {
    width: var(--i-5x);
    height: var(--i-5x);
}

.core-icon-s::before,
.core-solo .core-icon-s::before {
    width: var(--i-6x);
    height: var(--i-6x);
}

.core-icon-m::before,
.core-solo .core-icon-m::before {
    width: var(--i-8x);
    height: var(--i-8x);
}

.core-icon-l::before,
.core-solo .core-icon-l::before {
    width: var(--i-10x);
    height: var(--i-10x);
}

.core-icon-xl::before,
.core-solo .core-icon-xl::before {
    width: var(--i-12x);
    height: var(--i-12x);
}

.core-icon-reverse-x::before,
.core-solo .core-icon-reverse-x::before {
    transform: scaleX(-1);
}

.core-icon-reverse-y::before,
.core-solo .core-icon-reverse-y::before {
    transform: scaleY(-1);
}


/* Конкретные иконки */
.core-icon-add::before,
.core-solo .core-icon-add::before {
    -webkit-mask-image: var(--i-plus);
    mask-image: var(--i-plus);
}
.core-icon-close::before,
.core-solo .core-icon-close::before {
    -webkit-mask-image: var(--i-close);
    mask-image: var(--i-close);
}
.core-icon-minus::before,
.core-solo .core-icon-minus::before {
    -webkit-mask-image: var(--i-minus);
    mask-image: var(--i-minus);
}
.core-icon-check::before,
.core-solo .core-icon-check::before {
    -webkit-mask-image: var(--i-check);
    mask-image: var(--i-check);
}
.core-icon-shevron::before,
.core-solo .core-icon-shevron::before {
    -webkit-mask-image: var(--i-shevron);
    mask-image: var(--i-shevron);
}
.core-icon-calendar::before,
.core-solo .core-icon-calendar::before {
    -webkit-mask-image: var(--i-calendar);
    mask-image: var(--i-calendar);
}
.core-icon-search::before,
.core-solo .core-icon-search::before {
    -webkit-mask-image: var(--i-search);
    mask-image: var(--i-search);
}
.core-icon-light::before,
.core-solo .core-icon-light::before {
    -webkit-mask-image: var(--i-light);
    mask-image: var(--i-light);
}
.core-icon-copy::before,
.core-solo .core-icon-copy::before {
    -webkit-mask-image: var(--i-copy);
    mask-image: var(--i-copy);
}
.core-icon-enter::before,
.core-solo .core-icon-enter::before {
    -webkit-mask-image: var(--i-enter2);
    mask-image: var(--i-enter2);
}
.core-icon-yamaps::before,
.core-solo .core-icon-yamaps::before {
    -webkit-mask-image: var(--i-yamaps);
    mask-image: var(--i-yamaps);
}

.core-icon-muted,
.core-solo .core-icon-muted {
    color: var(--color-icon-muted);
}
.core-icon-muted-2x,
.core-solo .core-icon-muted-2x {
    color: var(--color-icon-muted-2x);
}
.core-icon-muted-4x,
.core-solo .core-icon-muted-4x {
    color: var(--color-icon-muted-4x);
}
.core-icon-muted-6x,
.core-solo .core-icon-muted-6x {
    color: var(--color-icon-muted-6x);
}
.core-icon-muted-8x,
.core-solo .core-icon-muted-8x {
    color: var(--color-icon-muted-8x);
}



/* !SECTION */
/* =========================== */
/* SECTION: Подсказки, тултипы */
/* ===========================  */

.core-tooltip,
.core-tooltip-visible,
.core-solo .core-tooltip,
.core-solo .core-tooltip-visible {
    position: relative;
    cursor: pointer;
}

.core-tooltip-visible,
.core-solo .core-tooltip-visible {
    animation: core-tooltip-fade-in 0.3s ease;
}

@keyframes core-tooltip-fade-in {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.core-tooltip[data-tooltip]:hover::after,
.core-tooltip[data-tooltip]:focus::after,
.core-solo .core-tooltip[data-tooltip]:hover::after,
.core-solo .core-tooltip[data-tooltip]:focus::after {
    opacity: 1;
    pointer-events: auto;
}

.core-tooltip[data-tooltip]::after,
.core-tooltip-visible[data-tooltip]::after,
.core-solo .core-tooltip[data-tooltip]::after,
.core-solo .core-tooltip-visible[data-tooltip]::after {
    

    /* НАДО ПОЧИНИТЬ, РАСПИРАЕТ СТРАНИЦУ */
    /* content: attr(data-tooltip); */


    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--color-foreground);
    color: var(--color-text-inverse);
    padding: var(--s-3x) var(--s-4x);
    border-radius: var(--b-r-s);
    font-size: var(--f-s-xs);
    line-height: var(--l-h-xs);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 240px;
    width: max-content;
}

.core-tooltip-visible[data-tooltip]::after,
.core-solo .core-tooltip-visible[data-tooltip]::after {
    opacity: 1;
    pointer-events: auto;
}

.core-tooltip[data-tooltip]:hover::before,
.core-tooltip[data-tooltip]:focus::before,
.core-solo .core-tooltip[data-tooltip]:hover::before,
.core-solo .core-tooltip[data-tooltip]:focus::before {
    opacity: 1;
}

.core-tooltip[data-tooltip]::before,
.core-tooltip-visible[data-tooltip]::before,
.core-solo .core-tooltip[data-tooltip]::before,
.core-solo .core-tooltip-visible[data-tooltip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%) translateY(-2px) rotate(180deg);
    border: 6px solid transparent;
    border-top: none;
    border-bottom: 6px solid var(--color-foreground);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1001;
}

.core-tooltip-visible[data-tooltip]::before,
.core-solo .core-tooltip-visible[data-tooltip]::before {
    opacity: 1;
}

/* Нижнее положение тултипа */
.core-tooltip.core-tooltip-bottom[data-tooltip]::after,
.core-tooltip-visible.core-tooltip-bottom[data-tooltip]::after,
.core-solo .core-tooltip.core-tooltip-bottom[data-tooltip]::after {
    top: 100%;
    bottom: auto;
    transform: translateX(-50%) translateY(8px);
}

.core-tooltip.core-tooltip-bottom[data-tooltip]::before,
.core-tooltip-visible.core-tooltip-bottom[data-tooltip]::before,
.core-solo .core-tooltip.core-tooltip-bottom[data-tooltip]::before,
.core-solo .core-tooltip-visible.core-tooltip-bottom[data-tooltip]::before {
    top: 100%;
    bottom: auto;
    transform: translateX(-50%) translateY(2px) rotate(180deg);
    border-bottom: none;
    border-top: 6px solid var(--color-foreground);
}

/* Левое положение тултипа */
.core-tooltip.core-tooltip-left[data-tooltip]::after,
.core-tooltip-visible.core-tooltip-left[data-tooltip]::after,
.core-solo .core-tooltip.core-tooltip-left[data-tooltip]::after,
.core-solo .core-tooltip-visible.core-tooltip-left[data-tooltip]::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-8px);
    text-align: left;
}

.core-tooltip.core-tooltip-left[data-tooltip]::before,
.core-tooltip-visible.core-tooltip-left[data-tooltip]::before,
.core-solo .core-tooltip.core-tooltip-left[data-tooltip]::before,
.core-solo .core-tooltip-visible.core-tooltip-left[data-tooltip]::before {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(4px) rotate(0deg);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid var(--color-foreground);
}

/* Правое положение тултипа */
.core-tooltip.core-tooltip-right[data-tooltip]::after,
.core-tooltip-visible.core-tooltip-right[data-tooltip]::after,
.core-solo .core-tooltip.core-tooltip-right[data-tooltip]::after,
.core-solo .core-tooltip-visible.core-tooltip-right[data-tooltip]::after {
    left: 100%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(8px);
    text-align: left;
}

.core-tooltip.core-tooltip-right[data-tooltip]::before,
.core-tooltip-visible.core-tooltip-right[data-tooltip]::before,
.core-solo .core-tooltip.core-tooltip-right[data-tooltip]::before,
.core-solo .core-tooltip-visible.core-tooltip-right[data-tooltip]::before {
    left: 100%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-4px) rotate(0deg);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--color-foreground);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 720px) {
    .core-tooltip[data-tooltip]::after,
    .core-tooltip-visible[data-tooltip]::after,
    .core-solo .core-tooltip[data-tooltip]::after,
    .core-solo .core-tooltip-visible[data-tooltip]::after {
        font-size: var(--f-s-s);
        padding: var(--s-2x) var(--s-4x);
        max-width: 180px;
    }
}




/* !SECTION */
/* =========================== */
/* SECTION: Кнопки */
/* ===========================  */

.core-button,
.core-button-checkbox .core-checkbox-label,
.core-button-radio .core-radio-label,
.core-solo .core-button,
.core-solo .core-button-checkbox .core-checkbox-label,
.core-solo .core-button-radio .core-radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    gap: var(--s-5x);
    padding: var(--s-4x) var(--s-8x); 
    font-size: var(--f-s-m); 
    line-height: var(--l-h-m);
    color: var(--color-text-primary);
    background-color: var(--color-button-secondary); 
    border-radius: var(--b-r-m); 
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-interactive); 
    flex-shrink: 0;
    font-family: var(--font-family-primary);
    width: fit-content;
    height: 44px;

    text-wrap: nowrap;

    position: relative;
}

.core-button:hover,
.core-button:focus,
.core-solo .core-button:hover,
.core-solo .core-button:focus {
    background-color: var(--color-button-secondary-hover);
    color: var(--color-text-primary);
    outline: none;
}

.core-button:focus-visible,
.core-solo .core-button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    z-index: 9999;
}

.core-button:disabled,
.core-solo .core-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-button-secondary);
    color: var(--color-text-muted);
}

.core-button:disabled:hover,
.core-solo .core-button:disabled:hover {
    background-color: var(--color-button-secondary);
    color: var(--color-text-muted);
}

.core-button-xs,
.core-button-checkbox-xs .core-checkbox-label,
.core-button-radio-xs .core-radio-label,
.core-solo .core-button-xs,
.core-solo .core-button-checkbox-xs .core-checkbox-label,
.core-solo .core-button-radio-xs .core-radio-label {
    padding: var(--s-1x) var(--s-4x); 
    border-radius: var(--b-r-s);
    gap: var(--s-3x);
    font-size: var(--f-s-s);
    line-height: var(--l-h-s);
    height: 24px;
}

.core-button-s,
.core-button-checkbox-s .core-checkbox-label,
.core-button-radio-s .core-radio-label,
.core-solo .core-button-s,
.core-solo .core-button-checkbox-s .core-checkbox-label,
.core-solo .core-button-radio-s .core-radio-label {
    padding: var(--s-2x) var(--s-5x); 
    border-radius: var(--b-r-s);
    gap: var(--s-3x);
    height: 32px;
}

.core-button-m,
.core-button-checkbox-m .core-checkbox-label,
.core-button-radio-m .core-radio-label,
.core-solo .core-button-m,
.core-solo .core-button-checkbox-m .core-checkbox-label,
.core-solo .core-button-radio-m .core-radio-label {
    padding: var(--s-4x) var(--s-8x);
    border-radius: var(--b-r-m); 
    gap: var(--s-5x);
}

.core-button-l,
.core-button-checkbox-l .core-checkbox-label,
.core-button-radio-l .core-radio-label,
.core-solo .core-button-l,
.core-solo .core-button-checkbox-l .core-checkbox-label,
.core-solo .core-button-radio-l .core-radio-label {
    padding: var(--s-8x) var(--s-12x);
    border-radius: var(--b-r-m);
    gap: var(--s-8x);
}

.core-button-accent,
.core-solo .core-button-accent {
    background-color: var(--color-button-accent); 
    color: var(--color-text-on-accent); 
}

.core-button-accent:hover,
.core-button-accent:focus,
.core-solo .core-button-accent:hover,
.core-solo .core-button-accent:focus {
    background-color: var(--color-button-accent-hover); 
    color: var(--color-text-on-accent);
}

.core-button-primary,
.core-solo .core-button-primary {
    background-color: var(--color-button-primary); 
    color: var(--color-text-inverse); 
}

.core-button-primary:hover,
.core-button-primary:focus,
.core-solo .core-button-primary:hover,
.core-solo .core-button-primary:focus {
    background-color: var(--color-button-primary-hover); 
    color: var(--color-text-inverse); 
}

.core-button-transparent,
.core-solo .core-button-transparent {
    background-color: transparent; 
    color: var(--color-text-primary); 
}

.core-button-full,
.core-button-checkbox-full .core-checkbox-label,
.core-button-radio-full .core-radio-label,
.core-solo .core-button-full,
.core-solo .core-button-checkbox-full .core-checkbox-label,
.core-solo .core-button-radio-full .core-radio-label {
    width: 100%;
    justify-content: center;
    text-align: center;
}



/* Чекбоксы и радио визуально как кнопки */
.core-radio-group,
.core-solo .core-radio-group {
    display: flex;
    border-radius: var(--b-r-s); 
    width: fit-content;
    border-radius: var(--b-r-m);
    background-color: var(--color-block);
    /* display: none; */
}

.core-radio-group .core-button-radio .core-radio-label,
.core-solo .core-radio-group .core-button-radio .core-radio-label {
    border-radius: 0;
}

.core-radio-group .core-button-radio:first-child .core-radio-label,
.core-solo .core-radio-group .core-button-radio:first-child .core-radio-label {
    border-top-left-radius: var(--b-r-s);
    border-bottom-left-radius: var(--b-r-s);
}

.core-radio-group .core-button-radio:last-child .core-radio-label,
.core-solo .core-radio-group .core-button-radio:last-child .core-radio-label {
    border-top-right-radius: var(--b-r-s);
    border-bottom-right-radius: var(--b-r-s);
}

@media (max-width: 720px) {
    .core-radio-group,
    .core-solo .core-radio-group {
        flex-direction: column;
        /* width: 100%; */
    }

    .core-radio-group .core-button-radio .core-radio-label,
    .core-solo .core-radio-group .core-button-radio .core-radio-label {
        border-radius: 0;
        width: 100%;
    }

    .core-radio-group .core-button-radio:first-child .core-radio-label,
    .core-solo .core-radio-group .core-button-radio:first-child .core-radio-label {
        border-top-left-radius: var(--b-r-s);
        border-top-right-radius: var(--b-r-s);
        border-bottom-left-radius: 0;
    }
    
    .core-radio-group .core-button-radio:last-child .core-radio-label,
    .core-solo .core-radio-group .core-button-radio:last-child .core-radio-label {
        border-bottom-right-radius: var(--b-r-s);
        border-bottom-left-radius: var(--b-r-s);
        border-top-right-radius: 0;
    }
}

.core-button-checkbox input[type="checkbox"],
.core-button-radio input[type="radio"],
.core-solo .core-button-checkbox input[type="checkbox"],
.core-solo .core-button-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.core-button-checkbox [type="checkbox"] + .core-checkbox-label,
.core-solo .core-button-checkbox [type="checkbox"] + .core-checkbox-label {
    padding-left: var(--s-3x);
}

/* Ховер для кнопки-чекбокса не нужен, кнопка и так подсвечивается */
/* .core-button-checkbox:hover input[type="checkbox"] + .core-checkbox-label::before,
.core-solo .core-button-checkbox:hover input[type="checkbox"] + .core-checkbox-label::before {
    background-color: var(--field-color-background-hover);
    border: 1px solid var(--field-color-border-hover);
} */

.core-button-checkbox:hover .core-checkbox-label,
.core-button-radio:hover .core-radio-label,
.core-solo .core-button-checkbox:hover .core-checkbox-label,
.core-solo .core-button-radio:hover .core-radio-label {
     background-color: var(--color-button-secondary-hover); 
}

.core-button-checkbox input:checked + .core-checkbox-label,
.core-button-radio input:checked + .core-radio-label,
.core-solo .core-button-checkbox input:checked + .core-checkbox-label,
.core-solo .core-button-radio input:checked + .core-radio-label {
    background-color: var(--color-button-primary); 
    color: var(--color-text-inverse);
}

.core-button-checkbox input[type="checkbox"] + .core-checkbox-label::before,
.core-solo .core-button-checkbox input[type="checkbox"] + .core-checkbox-label::before {
    content: "";
    display: inline-block;
    width: var(--i-10x);
    height: var(--i-10x);
    background-color: var(--field-color-background);
    border-radius: var(--i-3x);
    border-color: var(--field-color-background);
    background-size: cover;
    background-repeat: no-repeat;
}

.core-button-checkbox input[type="checkbox"]:checked + .core-checkbox-label::after,
.core-solo .core-button-checkbox input[type="checkbox"]:checked + .core-checkbox-label::after {
    content: "";
    position: absolute;
    left: var(--s-3x); top: 50%;
    transform: translateY(-50%);
    width: var(--i-10x);
    height: var(--i-10x);
    background-color: var(--color-text-primary);
    -webkit-mask-image: var(--i-check);
    mask-image: var(--i-check);
    -webkit-mask-size: var(--i-6x);
    mask-size: var(--i-6x);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
}

.core-button-checkbox:hover input:checked + .core-checkbox-label,
.core-button-radio:hover input:checked + .core-radio-label,
.core-solo .core-button-checkbox:hover input:checked + .core-checkbox-label,
.core-solo .core-button-radio:hover input:checked + .core-radio-label {
    background-color: var(--color-button-primary-hover);
}

.core-button-checkbox input[type="checkbox"]:focus-visible + .core-checkbox-label,
.core-button-radio input[type="radio"]:focus-visible + .core-radio-label,
.core-solo .core-button-checkbox input[type="checkbox"]:focus-visible + .core-checkbox-label,
.core-solo .core-button-radio input[type="radio"]:focus-visible + .core-radio-label {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    z-index: 9999;
    position: relative;
}





/* !SECTION */
/* =========================== */
/* SECTION: Бирки, лейблы */
/* ===========================  */

.core-badge,
.core-badge-button,
.core-solo .core-badge,
.core-solo .core-badge-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-1x) var(--s-5x);
    font-size: var(--f-s-s);
    line-height: var(--l-h-s);
    min-height: var(--l-h-s);
    color: var(--color-text-primary);
    background-color: var(--color-button-secondary);
    border-radius: var(--b-r-full);
    text-decoration: none;
    text-align: center;
    flex-shrink: 0;
    width: fit-content;
    height: min-content;
    vertical-align: middle;
    transform: translateY(-0.11em); 
    border: 1px solid transparent;
}

.core-badge-button:hover,
.core-badge-button:focus,
.core-solo .core-badge-button:hover,
.core-solo .core-badge-button:focus {
    background-color: var(--color-button-secondary-hover);
    color: var(--color-text-primary);
    outline: none;
    cursor: pointer;
}

.core-badge-button:focus-visible,
.core-solo .core-badge-button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    z-index: 9999;
}

.core-badge-button:disabled,
.core-solo .core-badge-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-button-secondary);
    color: var(--color-text-muted)
}

.core-badge-button:disabled:hover,
.core-solo .core-badge-button:disabled:hover {
    background-color: var(--color-button-secondary);
}


.core-badge-xs,
.core-solo .core-badge-xs {
    padding: 0 var(--s-4x);
    font-size: var(--f-s-xs);
    line-height: var(--l-h-xs);
    min-height: var(--l-h-xs);
    gap: var(--s-3x);
}

.core-badge-s,
.core-solo .core-badge-s {
    padding: 0 var(--s-4x);
    font-size: var(--f-s-s);
    line-height: var(--l-h-s);
    min-height: var(--l-h-s);
    gap: var(--s-3x);
}

.core-badge-m,
.core-solo .core-badge-m {
    padding: 0 var(--s-5x);
    font-size: var(--f-s-m);
    line-height: var(--l-h-m);
    min-height: var(--l-h-m);
    gap: var(--s-4x);
}

.core-badge-l,
.core-solo .core-badge-l {
    padding: 0 var(--s-6x);
    font-size: var(--f-s-l);
    line-height: var(--l-h-l);
    min-height: var(--l-h-l);
    gap: var(--s-4x);
}

.core-badge-xl,
.core-solo .core-badge-xl {
    padding: 0 var(--s-7x);
    font-size: var(--f-s-xl);
    line-height: var(--l-h-xl);
    min-height: var(--l-h-xl);
    gap: var(--s-5x);
}

.core-badge-accent,
.core-solo .core-badge-accent {
    background-color: var(--color-button-accent);
    color: var(--color-text-on-accent);
}

.core-badge-bordered,
.core-solo .core-budge-bordered {
    border: 1px solid var(--color-border);
    background-color: transparent;
    color: var(--color-text-primary);
}

.core-badge-inline,
.core-solo .core-budge-inline {
    vertical-align: unset;
    transform: translateY(0); 
}




/* !SECTION */
/* =========================== */
/* SECTION: Тексты, заголовки, списки */
/* ===========================  */

.core-h1, .core-solo .core-h1,
.core-h2, .core-solo .core-h2,
.core-h3, .core-solo .core-h3,
.core-h4, .core-solo .core-h4,
.core-h5, .core-solo .core-h5,
.core-h6, .core-solo .core-h6,
.core-h1.core-h-display, .core-solo .core-h1.core-h-display,
.core-h2.core-h-display, .core-solo .core-h2.core-h-display,
.core-h3.core-h-display, .core-solo .core-h3.core-h-display,
.core-h4.core-h-display, .core-solo .core-h4.core-h-display,
.core-h5.core-h-display, .core-solo .core-h5.core-h-display,
.core-h6.core-h-display, .core-solo .core-h6.core-h-display {
    font-weight: var(--f-w-bold); 
    margin: 0;
}

.core-h6, .core-solo .core-h6 {
    font-size: var(--f-s-xs); 
    line-height: var(--l-h-head-xs); 
}

.core-h5, .core-solo .core-h5 {
    font-size: var(--f-s-s); 
    line-height: var(--l-h-head-s); 
}

.core-h4, .core-solo .core-h4 {
    font-size: var(--f-s-m); 
    line-height: var(--l-h-head-m); 
}

.core-h3, .core-solo .core-h3 {
    font-size: var(--f-s-l); 
    line-height: var(--l-h-head-l); 
}

.core-h2, .core-solo .core-h2 {
    font-size: var(--f-s-xl); 
    line-height: var(--l-h-head-xl); 
}

.core-h1, .core-solo .core-h1 {
    font-size: var(--f-s-xxl); 
    line-height: var(--l-h-head-xxl); 
}

.core-h1.core-h-display, .core-solo .core-h1.core-h-display {
    font-size: calc(var(--f-s-xxl) * 3);
    line-height: calc(var(--l-h-head-xxl) * 0.8);
}

.core-h2.core-h-display, .core-solo .core-h2.core-h-display {
    font-size: calc(var(--f-s-xxl) * 2.5);
    line-height: calc(var(--l-h-head-xxl) * 0.85);
}

.core-h3.core-h-display, .core-solo .core-h3.core-h-display {
    font-size: calc(var(--f-s-xxl) * 2);
    line-height: calc(var(--l-h-head-xxl) * 0.9);
}

.core-h4.core-h-display, .core-solo .core-h4.core-h-display {
    font-size: calc(var(--f-s-xxl) * 1.7);
    line-height: calc(var(--l-h-head-xxl) * 0.9);
}

.core-h5.core-h-display, .core-solo .core-h5.core-h-display {
    font-size: calc(var(--f-s-xxl) * 1.4);
    line-height: calc(var(--l-h-head-xxl) * 0.9);
}

.core-h6.core-h-display, .core-solo .core-h6.core-h-display {
    font-size: calc(var(--f-s-xxl) * 1.2);
    line-height: calc(var(--l-h-head-xxl) * 0.9);
}

.core-text-xs, .core-solo .core-text-xs {
    font-size: var(--f-s-xs); 
    line-height: var(--l-h-xs); 
    margin: 0;
}

.core-text-s, .core-solo .core-text-s {
    font-size: var(--f-s-s); 
    line-height: var(--l-h-s); 
    margin: 0;
}

.core-text,
.core-text-m, .core-solo .core-text-m {
    font-size: var(--f-s-m); 
    line-height: var(--l-h-m); 
    color: var(--color-text-primary); 
    margin: 0;
}

.core-text-l, .core-solo .core-text-l {
    font-size: var(--f-s-l); 
    line-height: var(--l-h-l); 
    margin: 0;
}

.core-text-xl, .core-solo .core-text-xl {
    font-size: var(--f-s-xl); 
    line-height: var(--l-h-xl); 
    margin: 0;
}

.core-text-xxl, .core-solo .core-text-xxl {
    font-size: var(--f-s-xxl); 
    line-height: var(--l-h-xxl); 
    margin: 0;
}

@media (max-width: 720px) {
    .core-h1.core-h-display, .core-solo .core-h1.core-h-display {
        font-size: calc(var(--f-s-xxl) * 1.7);
    }

    .core-h2.core-h-display, .core-solo .core-h2.core-h-display {
        font-size: calc(var(--f-s-xxl) * 1.5);
    }

    .core-h3.core-h-display, .core-solo .core-h3.core-h-display {
        font-size: calc(var(--f-s-xxl) * 1.3);
    }

    .core-h4.core-h-display, .core-solo .core-h4.core-h-display {
        font-size: calc(var(--f-s-xxl) * 1.2);
    }

    .core-h5.core-h-display, .core-solo .core-h5.core-h-display {
        font-size: calc(var(--f-s-xxl) * 1.1);
    }

    .core-h6.core-h-display, .core-solo .core-h6.core-h-display {
        font-size: calc(var(--f-s-xxl) * 1);
    }
}



.core-text-muted, .core-solo .core-text-muted {
    color: var(--color-text-muted); 
}
.core-text-muted-2x, .core-solo .core-text-muted-2x {
    color: var(--color-text-muted-2x);
}
.core-text-muted-4x, .core-solo .core-text-muted-4x {
    color: var(--color-text-muted-4x);
}
.core-text-muted-6x, .core-solo .core-text-muted-6x {
    color: var(--color-text-muted-6x);
}
.core-text-muted-8x, .core-solo .core-text-muted-8x {
    color: var(--color-text-muted-8x);
}

.core-text-r, .core-solo .core-text-r {
    text-align: right;
}



/* !SECTION */
/* =========================== */
/* SECTION: Ссылки */
/* ===========================  */

.core-link,
.core-link-u,
.core-solo .core-link,
.core-solo .core-link-u {
    color: var(--color-link); 
    text-decoration: none;
    position: relative;
    width: fit-content;
}

.core-link:hover, 
.core-link:focus, 
.core-link:active,
.core-link-u:hover,
.core-link-u:focus,
.core-link-u:active,
.core-solo .core-link:hover,
.core-solo .core-link:focus,
.core-solo .core-link:active,
.core-solo .core-link-u:hover,
.core-solo .core-link-u:focus,
.core-solo .core-link-u:active {
    color: var(--color-link-hover); 
    cursor: pointer;
    outline: none;
}

.core-link:focus-visible,
.core-link-u:focus-visible,
.core-solo .core-link:focus-visible,
.core-solo .core-link-u:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.core-link-u span,
.core-solo .core-link-u span {
    /* Альтернативный метод подчеркивания, в нем нельзя менять расстояние от текста */
    /* border-bottom: 1px solid color-mix(in srgb, var(--color-link), transparent 80%); */
    /* box-shadow: inset 0px -1px 0 0 color-mix(in srgb, var(--color-link), transparent 80%); */

    padding-bottom: var(--font-family-line-height-compensation);

    background: linear-gradient(
        to bottom, 
        color-mix(in srgb, currentColor, transparent 80%) 50%, 
        color-mix(in srgb, currentColor, transparent 80%) 50%
    );
    background-repeat: repeat-x;
    background-position: 0 96%;
    background-size: 1px 1px;
}

.core-link-u:hover span,
.core-solo .core-link-u:hover span {
    /* Альтернативный метод подчеркивания, в нем нельзя менять расстояние от текста */
    /* border-bottom: 1px solid color-mix(in srgb, var(--color-link-hover), transparent 0%); */
    /* box-shadow: inset 0px -1px 0 0 color-mix(in srgb, var(--color-link-hover), transparent 0%); */
    
    color: var(--color-link-hover);

    background: linear-gradient(
        to bottom, 
        color-mix(in srgb, currentColor, transparent 80%) 50%, 
        color-mix(in srgb, currentColor, transparent 0%) 50%
    );
    background-repeat: repeat-x;
    background-position: 0 96%;
    background-size: 1px 1px;
}


/* !SECTION */
/* =========================== */
/* SECTION: Списки, ul, li */
/* ===========================  */

/* Уровень 1 */
.core-list,
.core-list,
.core-solo ul.core-list,
.core-solo ol.core-list,
/* Уровень 2 */
.core-list ul,
.core-list ol,
.core-solo .core-list ul,
.core-solo .core-list ol,
/* Уровень 3 */
.core-list ul ul,
.core-list ul ol,
.core-list ol ol,
.core-list ol ul,
.core-solo .core-list ul ul,
.core-solo .core-list ul ol,
.core-solo .core-list ol ol,
.core-solo .core-list ol ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .3em;
    margin-top: .3em;
    /* gap: var(--s-2x);
    margin-top: var(--s-2x); */

    counter-reset: section;
}

/* Уровень 2 */
.core-list ul,
.core-list ol,
.core-solo .core-list ul,
.core-solo .core-list ol,
/* Уровень 3 */
.core-list ul ul,
.core-list ul ol,
.core-list ol ol,
.core-list ol ul,
.core-solo .core-list ul ul,
.core-solo .core-list ul ol,
.core-solo .core-list ol ol,
.core-solo .core-list ol ul {
    margin-left: var(--s-12x);
}

.core-list li::before,
.core-solo .core-list li::before {
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
    float: left;
    margin-right: var(--s-2x);
}

/* Стили для первого уровня списков */
.core-list > li,
.core-solo .core-list > li {
    counter-increment: section;
}
.core-list > li::before,
.core-solo .core-list > li::before {
    content: counter(section) '. ';
}

/* Стили для второго уровня списков */
.core-list > li > ul,
.core-list > li > ol,
.core-solo .core-list > li > ul {
    counter-reset: subsection;
}

.core-list > li > ol > li,
.core-solo .core-list > li > ul > li {
    counter-increment: subsection;
}

.core-list > li > ul > li,
.core-solo .core-list > li > ol > li {
    counter-reset: subsection section;
}


.core-list > li > ol > li::before,
.core-solo .core-list > li > ul > li::before {
    content: counter(section) '.' counter(subsection) '. ';
}

ul.core-list > li > ol > li:before,
.core-solo ul.core-list > li > ol > li::before {
    content: counter(subsection) '. ';
}

/* Если на третьем уровне находится ol, то сбрасываем только третье число */
.core-list > li > ul > li > ol,
.core-list > li > ol > li > ol,
.core-solo .core-list > li > ul > li > ol,
.core-solo .core-list > li > ol > li > ol {
    counter-reset: subsubsection;
}

/* Если на третьем уровне находится ul, то сбрасываем третье и второе число, чтобы ol затем начинались сначала */
.core-list > li > ul > li > ul,
.core-list > li > ol > li > ul,
.core-solo .core-list > li > ul > li > ul,
.core-solo .core-list > li > ol > li > ul {
    counter-reset: subsubsection subsection;
}

/* Для всех третьих уровней увеличиваем subsubsection */
.core-list > li > ul > li > ul > li,
.core-list > li > ul > li > ol > li,
.core-list > li > ol > li > ul > li,
.core-list > li > ol > li > ol > li,
.core-solo .core-list > li > ul > li > ul > li,
.core-solo .core-list > li > ul > li > ol > li,
.core-solo .core-list > li > ol > li > ul > li,
.core-solo .core-list > li > ol > li > ol > li {
    counter-increment: subsubsection;
}

/* Если "ol|ul > ul > ol", то у третьего ставим одно число 1.1. */
.core-list > li > ul > li > ol > li::before,
.core-solo .core-list > li > ul > li > ol > li::before {
    content: counter(subsubsection) '. ';
}

/* Если "ul > ol > ol", то у третьего ставим два числа 1.1. */
ul.core-list > li > ol > li > ol > li::before,
.core-solo ul.core-list > li > ol > li > ol > li::before {
    content: counter(subsection) '.' counter(subsubsection) '. ';
}

/* Если "ol > ol > ol", то у третьего ставим три числа 1.1.1. */
ol.core-list > li > ol > li > ol > li::before,
.core-solo ol.core-list > li > ol > li > ol > li::before {
    content: counter(section) '.' counter(subsection) '.' counter(subsubsection) '. ';
}


/* Сдвиг для ul во вложенных в ol */

/* Уровень 2 */
ol.core-list > li > ul,
.core-solo ol.core-list > li > ul {
    margin-left: var(--s-18x);
}

/* Уровень 3 и больше */
.core-list > li > ol > li > ul,
.core-solo .core-list > li > ul > li > ul {
    margin-left: var(--s-28x);
}

.core-list > li > ol > li > ol > li > ul,
.core-list > li > ul > li > ol > li > ul,
.core-solo .core-list > li > ol > li > ul > li > ul,
.core-solo .core-list > li > ul > li > ol > li > ul {
    margin-left: var(--s-16x);
}


/* Стиль символа для ul */
/* Уровень 1 */
ul.core-list > li::before,
.core-solo ul.core-list > li::before,
/* Уровень 2 */
ul.core-list li > ul > li::before,
ol.core-list > li > ul > li::before,
.core-solo ul.core-list > li > ul > li::before,
.core-solo ol.core-list > li > ul > li::before,
/* Уровень 3 */
ul.core-list li > ul > li > ul > li::before,
ul.core-list li > ol > li > ul > li::before,
ol.core-list li > ul > li > ul > li::before,
ol.core-list li > ol > li > ul > li::before,
.core-solo ul.core-list li > ul > li > ul > li::before,
.core-solo ul.core-list li > ol > li > ul > li::before,
.core-solo ol.core-list li > ul > li > ul > li::before,
.core-solo ol.core-list li > ol > li > ul > li::before
{
    content: '– ';
}





/* !SECTION */
/* =========================== */
/* SECTION: Формы и поля */
/* ===========================  */

.core-form-item,
.core-solo .core-form-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-2x);
    flex-grow: 1;
}

.core-form-item .core-input-box,
.core-solo .core-form-item .core-input-box {
    width: 100%;
}

.core-label,
.core-solo .core-label {
    font-size: var(--f-s-s);
    line-height: var(--l-h-s);
    font-weight: var(--f-w-semibold);
    color: var(--color-text-primary);
}


/* Коробка для поля, в которую можно добавить иконки и экшены */
.core-input-box,
.core-solo .core-input-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.core-input-box .core-input,
.core-solo .core-input-box .core-input,
.core-input-box .core-textarea,
.core-solo .core-input-box .core-textarea,
.core-input-box .core-select,
.core-solo .core-input-box .core-select,
.core-input-box .core-date,
.core-solo .core-input-box .core-date,
.core-input-box .core-num,
.core-solo .core-input-box .core-num {
    width: 100%;
    padding-right: var(--s-16x);
}

.core-input-box .core-num,
.core-solo .core-input-box .core-num {
    padding-right: var(--s-16x);
    padding-left: var(--s-16x);
}

.core-input-box .core-input-xs,
.core-solo .core-input-box .core-input-xs,
.core-input-box .core-textarea-xs,
.core-solo .core-input-box .core-textarea-xs,
.core-input-box .core-select-xs,
.core-solo .core-input-box .core-select-xs,
.core-input-box .core-date-xs,
.core-solo .core-input-box .core-date-xs {
    padding-right: var(--s-10x);
}

.core-input-box .core-input-xs + .core-icon,
.core-solo .core-input-box .core-input-xs + .core-icon,
.core-input-box .core-textarea-xs + .core-icon,
.core-solo .core-input-box .core-textarea-xs + .core-icon,
.core-input-box .core-select-xs + .core-icon,
.core-solo .core-input-box .core-select-xs + .core-icon,
.core-input-box .core-date-xs + .core-icon,
.core-solo .core-input-box .core-date-xs + .core-icon {
    right: var(--s-3x);
}

.core-input-box .core-input-s,
.core-solo .core-input-box .core-input-s,
.core-input-box .core-textarea-s,
.core-solo .core-input-box .core-textarea-s,
.core-input-box .core-select-s,
.core-solo .core-input-box .core-select-s,
.core-input-box .core-date-s,
.core-solo .core-input-box .core-date-s {
    padding-right: var(--s-14x);
}

.core-input-box .core-input-s + .core-icon,
.core-solo .core-input-box .core-input-s + .core-icon,
.core-input-box .core-textarea-s + .core-icon,
.core-solo .core-input-box .core-textarea-s + .core-icon,
.core-input-box .core-select-s + .core-icon,
.core-solo .core-input-box .core-select-s + .core-icon,
.core-input-box .core-date-s + .core-icon,
.core-solo .core-input-box .core-date-s + .core-icon {
    right: var(--s-4x);
}

.core-input-box .core-icon,
.core-solo .core-input-box .core-icon {
    position: absolute;
    right: var(--s-6x);
    pointer-events: none;
    color: var(--color-icon-muted);
}

/* Поля */
.core-input,
.core-solo .core-input,
.core-textarea,
.core-solo .core-textarea,
.core-select,
.core-solo .core-select,
.core-date,
.core-solo .core-date,
.core-num,
.core-solo .core-num {
    box-sizing: border-box;
    position: relative;
    padding: var(--s-4x) var(--s-6x);
    font-size: var(--f-s-m);
    line-height: var(--l-h-m);
    color: var(--field-color-text);
    background-color: var(--field-color-background);
    border: 1px solid var(--field-color-border);
    border-radius: var(--b-r-m);
    transition: var(--transition-interactive);
    font-family: var(--font-family-primary);
    gap: var(--s-5x);
    height: 44px;
    width: 100%;
}

.core-input:disabled,
.core-solo .core-input:disabled,
.core-textarea:disabled,
.core-solo .core-textarea:disabled,
.core-select:disabled,
.core-solo .core-select:disabled,
.core-date:disabled,
.core-solo .core-date:disabled,
.core-num:disabled,
.core-solo .core-num:disabled {
    cursor: not-allowed;
    background-color: var(--field-color-disabled-background);
    border-color: var(--field-color-disabled-border);
    color: var(--field-color-disabled-text);
}

.core-input:disabled:hover,
.core-solo .core-input:disabled:hover,
.core-textarea:disabled:hover,
.core-solo .core-textarea:disabled:hover,
.core-select:disabled:hover,
.core-solo .core-select:disabled:hover,
.core-date:disabled:hover,
.core-solo .core-date:disabled:hover,
.core-num:disabled:hover,
.core-solo .core-num:disabled:hover {
    cursor: not-allowed;
    background-color: var(--field-color-disabled-background);
    border-color: var(--field-color-disabled-border);
    color: var(--field-color-disabled-text);
}

.core-input::placeholder,
.core-solo .core-input::placeholder,
.core-textarea::placeholder,
.core-solo .core-textarea::placeholder,
.core-select::placeholder,
.core-solo .core-select::placeholder,
.core-date::placeholder,
.core-solo .core-date::placeholder,
.core-num::placeholder,
.core-solo .core-num::placeholder {
    color: var(--field-color-placeholder);
}

.core-input-xs,
.core-solo .core-input-xs,
.core-textarea-xs,
.core-solo .core-textarea-xs,
.core-select-xs,
.core-solo .core-select-xs,
.core-date-xs,
.core-solo .core-date-xs,
.core-num-xs,
.core-solo .core-num-xs {
    padding: var(--s-1x) var(--s-3x);
    gap: var(--s-2x);
    height: 24px;
    font-size: var(--f-s-s);
    line-height: var(--l-h-s);
    border-radius: var(--b-r-s);
}

.core-input-s,
.core-solo .core-input-s,
.core-textarea-s,
.core-solo .core-textarea-s,
.core-select-s,
.core-solo .core-select-s,
.core-date-s,
.core-solo .core-date-s,
.core-num-s,
.core-solo .core-num-s {
    padding: var(--s-2x) var(--s-4x);
    gap: var(--s-3x);
    border-radius: var(--b-r-s);
    height: 32px;
}

.core-input-l,
.core-solo .core-input-l,
.core-textarea-l,
.core-solo .core-textarea-l,
.core-select-l,
.core-solo .core-select-l,
.core-date-l,
.core-solo .core-date-l,
.core-num-l,
.core-solo .core-num-l {
    padding: var(--s-8x) var(--s-12x); 
    gap: var(--s-8x); 
}

.core-input:focus,
.core-solo .core-input:focus,
.core-textarea:focus,
.core-solo .core-textarea:focus,
.core-select:focus,
.core-solo .core-select:focus,
.core-date:focus,
.core-solo .core-date:focus,
.core-num:focus,
.core-solo .core-num:focus {
    outline: none;
}

.core-input:hover,
.core-solo .core-input:hover,
.core-textarea:hover,
.core-solo .core-textarea:hover,
.core-select:hover,
.core-solo .core-select:hover,
.core-date:hover,
.core-solo .core-date:hover,
.core-num:hover,
.core-solo .core-num:hover {
    background-color: var(--field-color-background-hover);
    border-color: var(--field-color-border-hover);
}

.core-input:focus-visible,
.core-solo .core-input:focus-visible,
.core-textarea:focus-visible,
.core-solo .core-textarea:focus-visible,
.core-select:focus-visible,
.core-solo .core-select:focus-visible,
.core-date:focus-visible,
.core-solo .core-date:focus-visible,
.core-num:focus-visible,
.core-solo .core-num:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    background-color: var(--field-color-background-hover);
    border-color: var(--field-color-border-hover);
}



.core-input-box .core-input-actions,
.core-solo .core-input-box .core-input-actions {
    position: absolute;
    width: 100%;
    top: 0;
    pointer-events: none;
}

.core-input-box .core-input-actions *,
.core-solo .core-input-box .core-input-actions * {
    pointer-events: all;
}

.core-input + .core-input-actions,
.core-solo .core-input + .core-input-actions,
.core-textarea + .core-input-actions,
.core-solo .core-textarea + .core-input-actions,
.core-select + .core-input-actions,
.core-solo .core-select + .core-input-actions,
.core-date + .core-input-actions,
.core-solo .core-date + .core-input-actions,
.core-num + .core-input-actions,
.core-solo .core-num + .core-input-actions {
    height: 44px;
}

.core-input + .core-input-actions .core-button,
.core-solo .core-input + .core-input-actions .core-button,
.core-textarea + .core-input-actions .core-button,
.core-solo .core-textarea + .core-input-actions .core-button,
.core-select + .core-input-actions .core-button,
.core-solo .core-select + .core-input-actions .core-button,
.core-date + .core-input-actions .core-button,
.core-solo .core-date + .core-input-actions .core-button,
.core-num + .core-input-actions .core-button,
.core-solo .core-num + .core-input-actions .core-button {
    position: absolute;
    height: 100%;
    background-color: unset;
    padding-right: var(--s-4x);
    padding-left: var(--s-4x);
}


.core-input-s + .core-input-actions,
.core-solo .core-input-s + .core-input-actions,
.core-textarea-s + .core-input-actions,
.core-solo .core-textarea-s + .core-input-actions,
.core-select-s + .core-input-actions,
.core-solo .core-select-s + .core-input-actions,
.core-date-s + .core-input-actions,
.core-solo .core-date-s + .core-input-actions,
.core-num-s + .core-input-actions,
.core-solo .core-num-s + .core-input-actions {
    height: 32px;
}

.core-input-s + .core-input-actions .core-button,
.core-solo .core-input-s + .core-input-actions .core-button,
.core-textarea-s + .core-input-actions .core-button,
.core-solo .core-textarea-s + .core-input-actions .core-button,
.core-select-s + .core-input-actions .core-button,
.core-solo .core-select-s + .core-input-actions .core-button,
.core-date-s + .core-input-actions .core-button,
.core-solo .core-date-s + .core-input-actions .core-button,
.core-num-s + .core-input-actions .core-button,
.core-solo .core-num-s + .core-input-actions .core-button {
    padding-right: var(--s-4x);
    padding-left: var(--s-4x);
}

.core-input-box .core-input-button-left,
.core-solo .core-input-box .core-input-button-left {
    left: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.core-input-box .core-input-button-right,
.core-solo .core-input-box .core-input-button-right {
    right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.core-input-box .core-input-button-left .core-icon,
.core-solo .core-input-box .core-input-button-left .core-icon,
.core-input-box .core-input-button-right .core-icon,
.core-solo .core-input-box .core-input-button-right .core-icon,
.core-input-box .core-input-button-right-secondary .core-icon,
.core-solo .core-input-box .core-input-button-right-secondary .core-icon {
    position: unset;
    /* width: var(--i-8x); */
    /* height: var(--i-8x); */
}

.core-input-box .core-input-button-left:hover,
.core-solo .core-input-box .core-input-button-left:hover,
.core-input-box .core-input-button-right:hover,
.core-solo .core-input-box .core-input-button-right:hover {
    /* background-color: var(--color-block); */
}

.core-input-box .core-input-button-left:focus .core-icon,
.core-solo .core-input-box .core-input-button-left:focus .core-icon,
.core-input-box .core-input-button-right:focus .core-icon,
.core-solo .core-input-box .core-input-button-right:focus .core-icon,
.core-input-box .core-input-button-right-secondary .core-icon,
.core-solo .core-input-box .core-input-button-right-secondary:focus .core-icon,
.core-input-box .core-input-button-left:hover .core-icon,
.core-solo .core-input-box .core-input-button-left:hover .core-icon,
.core-input-box .core-input-button-right:hover .core-icon,
.core-solo .core-input-box .core-input-button-right:hover .core-icon,
.core-input-box .core-input-button-right-secondary .core-icon,
.core-solo .core-input-box .core-input-button-right-secondary:hover .core-icon {
    color: var(--color-text-primary);
}


/* Поле number */
.core-num,
.core-solo .core-num {
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.core-num::-webkit-inner-spin-button,
.core-solo .core-num::-webkit-inner-spin-button,
.core-num::-webkit-outer-spin-button,
.core-solo .core-num::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    opacity: 0;
}


/* Поле даты */
.core-date + .core-input-actions *,
.core-solo .core-date + .core-input-actions * {
    pointer-events: none !important;
}

.core-date:hover + .core-input-actions .core-button,
.core-solo .core-date:hover + .core-input-actions .core-button {
    pointer-events: none;
}

.core-date:hover + .core-input-actions .core-button .core-icon,
.core-solo .core-date:hover + .core-input-actions .core-button .core-icon {
    color: var(--color-text-primary)
}

.core-date::-webkit-inner-spin-button,
.core-solo .core-date::-webkit-inner-spin-button,
.core-date::-webkit-calendar-picker-indicator,
.core-solo .core-date::-webkit-calendar-picker-indicator {
    opacity: 0;
    fill: transparent;
    position: absolute;
    height: 100%;
    padding: var(--s-4x) var(--s-6x);
    right: 0;
    cursor: pointer;
    background-image: var(--i-null);
    display: none;
    -webkit-appearance: none;
}

.core-date::-webkit-inner-spin-button:hover,
.core-solo .core-date::-webkit-inner-spin-button:hover,
.core-date::-webkit-calendar-picker-indicator:hover,
.core-solo .core-date::-webkit-calendar-picker-indicator:hover {
    background-color: var(--color-block);
}

.core-date-s::-webkit-inner-spin-button,
.core-solo .core-date-s::-webkit-inner-spin-button,
.core-date-s::-webkit-calendar-picker-indicator,
.core-solo .core-date-s::-webkit-calendar-picker-indicator {
    padding: var(--s-2x) var(--s-4x);
}


/* Текстовое длинное поле */
.core-textarea,
.core-solo .core-textarea {
    min-height: 100px;
}


/* Селектор */
.core-select,
.core-solo .core-select {
    appearance: none;
    background-image: var(--i-shevron);
    background-repeat: no-repeat;
    background-position: right var(--s-4x) center;
    background-size: var(--i-8x);
    padding-right: var(--s-18x);
}

.core-select-s,
.core-solo .core-select-s {
    padding-right: var(--s-16x);
}

.core-input-box .core-select,
.core-solo .core-input-box .core-select {
    background-image: none;
}



/* Чекбокс */
.core-checkbox,
.core-solo .core-checkbox {
    cursor: pointer;
}

.core-checkbox input[type="checkbox"],
.core-solo .core-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.core-checkbox .core-checkbox-label,
.core-solo .core-checkbox .core-checkbox-label {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: var(--s-4x);
    font-size: var(--f-s-m);
    line-height: var(--l-h-m);
    color: var(--color-text-primary);
}   

.core-checkbox input[type="checkbox"] + .core-checkbox-label::before,
.core-solo .core-checkbox input[type="checkbox"] + .core-checkbox-label::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: var(--i-10x);
    height: var(--i-10x);
    background-color: var(--field-color-background);
    color: var(--color-text-primary);
    border: 1px solid var(--field-color-border);
    box-sizing: border-box;
    border-radius: 6px;
    background-size: cover;
    background-repeat: no-repeat;
    transition: var(--transition-interactive);
}

.core-checkbox:hover input[type="checkbox"] + .core-checkbox-label::before,
.core-solo .core-checkbox:hover input[type="checkbox"] + .core-checkbox-label::before {
    background-color: var(--field-color-background-hover);
    border: 1px solid var(--field-color-border-hover);
}


.core-checkbox input[type="checkbox"]:checked + .core-checkbox-label::after,
.core-solo .core-checkbox input[type="checkbox"]:checked + .core-checkbox-label::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: var(--i-10x);
    height: var(--i-10x);
    background-color: var(--color-text-primary);
    -webkit-mask-image: var(--i-check);
    mask-image: var(--i-check);
    -webkit-mask-size: var(--i-6x);
    mask-size: var(--i-6x);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
}


/* Этот способ не позволяет динамически перекрашивать иконку */
/* .core-checkbox input[type="checkbox"]:checked + .core-checkbox-label::before,
.core-solo .core-checkbox input[type="checkbox"]:checked + .core-checkbox-label::before {
    background-image: var(--i-check);
    background-size: var(--i-6x);
    background-position: center;
    color: var(--color-text-primary);
} */

.core-checkbox input[type="checkbox"]:focus-visible + .core-checkbox-label::before,
.core-solo .core-checkbox input[type="checkbox"]:focus-visible + .core-checkbox-label::before {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    background-color: var(--field-color-background-hover);
    border: 1px solid var(--field-color-border-hover);
}

.core-checkbox input[type="checkbox"]:disabled + .core-checkbox-label,
.core-solo .core-checkbox input[type="checkbox"]:disabled + .core-checkbox-label {
    cursor: not-allowed;
    color: var(--color-text-muted);
}

.core-checkbox input[type="checkbox"]:disabled + .core-checkbox-label::before,
.core-solo .core-checkbox input[type="checkbox"]:disabled + .core-checkbox-label::before {
    background-color: var(--field-color-disabled-background);
    border-color: var(--field-color-disabled-border);
    color: var(--field-color-disabled-text);
}

.core-checkbox input[type="checkbox"]:disabled + .core-checkbox-label::after,
.core-solo .core-checkbox input[type="checkbox"]:disabled + .core-checkbox-label::after {
    background-color: var(--color-icon-muted);
}




[data-field-copy] {
    cursor: pointer;
}


/* Радиокнопки */

.core-radio,
.core-solo .core-radio {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.core-radio input[type="radio"],
.core-solo .core-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.core-radio .core-radio-label,
.core-solo .core-radio .core-radio-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-4x);
    font-size: var(--f-s-m);
    line-height: var(--l-h-m);
    color: var(--color-text-primary);
    position: relative;
}

.core-radio input[type="radio"] + .core-radio-label::before,
.core-solo .core-radio input[type="radio"] + .core-radio-label::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: var(--i-10x);
    height: var(--i-10x);
    background-color: var(--color-block);
    border: 1.5px solid color-mix(in srgb, var(--color-block), #000 10%);
    box-sizing: border-box;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.core-radio input[type="radio"]:checked + .core-radio-label::before,
.core-solo .core-radio input[type="radio"]:checked + .core-radio-label::before {
    background-color: var(--color-button-primary);
    border-color: var(--color-button-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-button-primary), transparent 80%);
}

.core-radio input[type="radio"]:checked + .core-radio-label::after,
.core-solo .core-radio input[type="radio"]:checked + .core-radio-label::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--color-text-inverse);
    border-radius: 50%;
    pointer-events: none;
}

.core-radio input[type="radio"]:focus-visible + .core-radio-label::before,
.core-solo .core-radio input[type="radio"]:focus-visible + .core-radio-label::before {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.core-radio input[type="radio"]:disabled + .core-radio-label,
.core-solo .core-radio input[type="radio"]:disabled + .core-radio-label {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--color-text-muted);
}

.core-radio input[type="radio"]:disabled + .core-radio-label::before,
.core-solo .core-radio input[type="radio"]:disabled + .core-radio-label::before {
    background-color: var(--color-block);
    border-color: color-mix(in srgb, var(--color-block), #000 10%);
    opacity: 0.6;
}



/* !SECTION */
/* =========================== */
/* SECTION: Таблицы */
/* ===========================  */

.core-table-container,
.core-solo .core-table-container {
    display: flex;
    max-width: 100%;
    overflow-x: auto; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.core-table,
.core-solo .core-table {
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
}

.core-table-noscroll,
.core-solo .core-table-noscroll {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.core-table thead,
.core-solo .core-table thead {
    display: table-header-group;
}

.core-table tbody,
.core-solo .core-table tbody {
    display: table-row-group;
}

.core-table tfoot,
.core-solo .core-table tfoot {
    display: table-footer-group;
}

.core-table tr,
.core-solo .core-table tr {
    display: table-row;
    vertical-align: top;
    text-align: left;
}

.core-table tr.core-va-middle,
.core-solo .core-table tr.core-va-middle {
    vertical-align: middle;
}

.core-table th,
.core-solo .core-table th {
    display: table-cell;
    font-weight: var(--f-w-semibold);
    padding: var(--s-2x) var(--s-12x) var(--s-2x) 0;
    color: var(--color-text-primary);
}

.core-table td,
.core-solo .core-table td {
    display: table-cell;
    padding: var(--s-2x) var(--s-12x) var(--s-2x) 0;
    color: var(--color-text-primary);
    background-color: var(--color-background);
    max-width: 300px;
}

.core-table td.core-text-r,
.core-table th.core-text-r,
.core-solo .core-table th.core-text-r,
.core-solo .core-table td.core-text-r {
    text-align: right;
}



/* !SECTION */
/* =========================== */
/* SECTION: Всплывающие окна */
/* ===========================  */

.core-popup-box,
.core-solo .core-popup-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    padding: var(--s-8x);
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.17s ease;
    pointer-events: none;
}

@media (max-width: 720px) {
    .core-popup-box,
    .core-solo .core-popup-box {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
    }
}

.core-popup-overlay,
.core-solo .core-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 100vw;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity 0.17s ease;
    opacity: 0;
}

.core-popup,
.core-solo .core-popup {
    background-color: var(--color-background);
    border-radius: var(--b-r-l);
    margin: 0 auto;
    transition: transform 0.17s ease-out;
    transform: translateY(45px);
    height: fit-content;
}



/* Экшены */

[data-popup-close],
[data-popup-trigger],
[data-popup-toggle],
.core-solo [data-popup-close],
.core-solo [data-popup-trigger],
.core-solo [data-popup-toggle] {
    cursor: pointer;
}

[data-popup-close] .core-icon,
[data-popup-trigger] .core-icon,
[data-popup-toggle] .core-icon,
.core-solo [data-popup-close] .core-icon,
.core-solo [data-popup-trigger] .core-icon,
.core-solo [data-popup-toggle] .core-icon {
    pointer-events: none;
}




/* Открытое состояние */
.core-popup-box.opened,
.core-solo .core-popup-box.opened {
    opacity: 1;
    pointer-events: all;
}

.core-popup-box.opened .core-popup-overlay,
.core-solo .core-popup-box.opened .core-popup-overlay {
    opacity: 1;
}

.core-popup-box.opened .core-popup,
.core-solo .core-popup-box.opened .core-popup {
    transform: translateY(0%) scale(1);
}

.core-popup-box.opened .core-popup-center,
.core-solo .core-popup-box.opened .core-popup-center {
    transform: translate(-50%, -50%) scale(1);
}


/* Модификаторы всплывающего окна */

.core-popup-center,
.core-solo .core-popup-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
}


.core-popup-right,
.core-solo .core-popup-right {
    position: fixed;
    top: 0;
    right: 0;
    left: unset;
    margin: unset;
    width: 465px;
    height: 100%;
    border-radius: unset;
    overflow-y: auto;
    transform: translateX(45px);
}

@media (max-width: 720px) {
    .core-popup-right,
    .core-solo .core-popup-right {
        width: calc(100% - var(--s-10x));
        max-width: 100%;
    }
}

.core-popup-left,
.core-solo .core-popup-left {
    position: fixed;
    top: 0;
    left: 0;
    right: unset;
    margin: unset;
    width: 465px;
    height: 100%;
    border-radius: unset;
    overflow-y: auto;
    transform: translateX(-45px);
}

@media (max-width: 720px) {
    .core-popup-left,
    .core-solo .core-popup-left {
        width: calc(100% - var(--s-10x));
        max-width: 100%;
    }
}

.core-popup-top,
.core-solo .core-popup-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: unset;
    width: 100%;
    height: fit-content;
    border-radius: unset;
    overflow-y: auto;
    transform: translateY(-30px);
}

.core-popup-bottom,
.core-solo .core-popup-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: unset;
    max-width: 100%;
    height: fit-content;
    border-radius: unset;
    overflow-y: auto;
    transform: translateY(30px);
}

.core-popup-s, .core-solo .core-popup-s {
    width: 300px;
}

.core-popup-m, .core-solo .core-popup-m {
    width: 465px;
}

.core-popup-l, .core-solo .core-popup-l {
    width: 600px;
}

.core-popup-xl, .core-solo .core-popup-xl {
    width: 800px;
}

@media (max-width: 720px) {
    .core-popup-s,
    .core-solo .core-popup-s {
        width: calc(100% - var(--s-10x));
        max-width: 100%;
    }

    .core-popup-m,
    .core-solo .core-popup-m {
        width: calc(100% - var(--s-10x));
        max-width: 100%;
    }

    .core-popup-l,
    .core-solo .core-popup-l {
        width: calc(100% - var(--s-10x));
        max-width: 100%;
    }

    .core-popup-xl,
    .core-solo .core-popup-xl {
        width: calc(100% - var(--s-10x));
        max-width: 100%;
    }
}



/* !SECTION */
/* =========================== */
/* SECTION: Глобальные модификаторы */
/* ===========================  */

/* display none */
.core-hide, .core-solo .core-hide {
    display: none !important;
}

/* opacity zero */
.core-ghost, .core-solo .core-ghost {
    opacity: 0;
    pointer-events: none;
}

/* sticky */
.core-sticky, .core-solo .core-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-background), transparent 5%) 0%, transparent 100%);
}

/* max-width */
.core-w-xs,
.core-solo .core-w-xs {
    max-width: 400px;
}

.core-w-s,
.core-solo .core-w-s {
    max-width: var(--w-max-mobile);
}

.core-w-m,
.core-solo .core-w-m {
    max-width: var(--w-max-tablet);
}

.core-w-l,
.core-solo .core-w-l {
    max-width: var(--w-max-desktop);
}


/* full width */
.core-w-full, .core-solo .core-w-full { 
    width: 100%;
}

@media (max-width: 720px) {
    .m-core-w-full, .core-solo .m-core-w-full {
        width: calc(100% - var(--s-10x));
        max-width: 100%;
    }
}

/* fit content */
.core-fit, .core-solo .core-fit { 
    width: fit-content;
}

/* horizontal center */
.core-h-center,
.core-solo .core-h-center {
    align-items: center;
}

/* vertical center */
.core-v-center,
.core-solo .core-v-center {
    justify-content: center;
}

/* justify */
.core-justify,
.core-solo .core-justify {
    justify-content: space-between;
}

/* horizontal scroll */
.core-h-scroll, .core-solo .core-h-scroll { 
    overflow-x: auto;
    width: 100%;
}

/* nowrap */
.core-nw, .core-solo .core-nw { 
    flex-wrap: nowrap;
}

/* Gap */
.core-g-null, .core-solo .core-g-null { gap: 0 }
.core-g-1x, .core-solo .core-g-1x { gap: var(--s-1x) }
.core-g-2x, .core-solo .core-g-2x { gap: var(--s-2x) }
.core-g-3x, .core-solo .core-g-3x { gap: var(--s-3x) }
.core-g-4x, .core-solo .core-g-4x { gap: var(--s-4x) }
.core-g-5x, .core-solo .core-g-5x { gap: var(--s-5x) }
.core-g-6x, .core-solo .core-g-6x { gap: var(--s-6x) }
.core-g-7x, .core-solo .core-g-7x { gap: var(--s-7x) }
.core-g-8x, .core-solo .core-g-8x { gap: var(--s-8x) }
.core-g-9x, .core-solo .core-g-9x { gap: var(--s-9x) }
.core-g-10x, .core-solo .core-g-10x { gap: var(--s-10x) }
.core-g-12x, .core-solo .core-g-12x { gap: var(--s-12x) }
.core-g-14x, .core-solo .core-g-14x { gap: var(--s-14x) }
.core-g-16x, .core-solo .core-g-16x { gap: var(--s-16x) }
.core-g-18x, .core-solo .core-g-18x { gap: var(--s-18x) }
.core-g-20x, .core-solo .core-g-20x { gap: var(--s-20x) }
.core-g-24x, .core-solo .core-g-24x { gap: var(--s-24x) }
.core-g-28x, .core-solo .core-g-28x { gap: var(--s-28x) }
.core-g-32x, .core-solo .core-g-32x { gap: var(--s-32x) }
.core-g-48x, .core-solo .core-g-48x { gap: var(--s-48x) }


/* Padding */
.core-p-null, .core-solo .core-p-null { padding: 0 }
.core-p-1x, .core-solo .core-p-1x { padding: var(--s-1x) }
.core-p-2x, .core-solo .core-p-2x { padding: var(--s-2x) }
.core-p-3x, .core-solo .core-p-3x { padding: var(--s-3x) }
.core-p-4x, .core-solo .core-p-4x { padding: var(--s-4x) }
.core-p-5x, .core-solo .core-p-5x { padding: var(--s-5x) }
.core-p-6x, .core-solo .core-p-6x { padding: var(--s-6x) }
.core-p-7x, .core-solo .core-p-7x { padding: var(--s-7x) }
.core-p-8x, .core-solo .core-p-8x { padding: var(--s-8x) }
.core-p-9x, .core-solo .core-p-9x { padding: var(--s-9x) }
.core-p-10x, .core-solo .core-p-10x { padding: var(--s-10x) }
.core-p-12x, .core-solo .core-p-12x { padding: var(--s-12x) }
.core-p-14x, .core-solo .core-p-14x { padding: var(--s-14x) }
.core-p-16x, .core-solo .core-p-16x { padding: var(--s-16x) }
.core-p-18x, .core-solo .core-p-18x { padding: var(--s-18x) }
.core-p-20x, .core-solo .core-p-20x { padding: var(--s-20x) }
.core-p-24x, .core-solo .core-p-24x { padding: var(--s-24x) }
.core-p-28x, .core-solo .core-p-28x { padding: var(--s-28x) }
.core-p-32x, .core-solo .core-p-32x { padding: var(--s-32x) }
.core-p-48x, .core-solo .core-p-48x { padding: var(--s-48x) }


/* Padding Top */
.core-p-t-null, .core-solo .core-p-t-null { padding-top: 0 }
.core-p-t-1x, .core-solo .core-p-t-1x { padding-top: var(--s-1x) }
.core-p-t-2x, .core-solo .core-p-t-2x { padding-top: var(--s-2x) }
.core-p-t-3x, .core-solo .core-p-t-3x { padding-top: var(--s-3x) }
.core-p-t-4x, .core-solo .core-p-t-4x { padding-top: var(--s-4x) }
.core-p-t-5x, .core-solo .core-p-t-5x { padding-top: var(--s-5x) }
.core-p-t-6x, .core-solo .core-p-t-6x { padding-top: var(--s-6x) }
.core-p-t-7x, .core-solo .core-p-t-7x { padding-top: var(--s-7x) }
.core-p-t-8x, .core-solo .core-p-t-8x { padding-top: var(--s-8x) }
.core-p-t-9x, .core-solo .core-p-t-9x { padding-top: var(--s-9x) }
.core-p-t-10x, .core-solo .core-p-t-10x { padding-top: var(--s-10x) }
.core-p-t-12x, .core-solo .core-p-t-12x { padding-top: var(--s-12x) }
.core-p-t-14x, .core-solo .core-p-t-14x { padding-top: var(--s-14x) }
.core-p-t-16x, .core-solo .core-p-t-16x { padding-top: var(--s-16x) }
.core-p-t-18x, .core-solo .core-p-t-18x { padding-top: var(--s-18x) }
.core-p-t-20x, .core-solo .core-p-t-20x { padding-top: var(--s-20x) }
.core-p-t-24x, .core-solo .core-p-t-24x { padding-top: var(--s-24x) }
.core-p-t-28x, .core-solo .core-p-t-28x { padding-top: var(--s-28x) }
.core-p-t-32x, .core-solo .core-p-t-32x { padding-top: var(--s-32x) }
.core-p-t-48x, .core-solo .core-p-t-48x { padding-top: var(--s-48x) }


/* Padding Bottom */
.core-p-b-null, .core-solo .core-p-b-null { padding-bottom: 0 }
.core-p-b-1x, .core-solo .core-p-b-1x { padding-bottom: var(--s-1x) }
.core-p-b-2x, .core-solo .core-p-b-2x { padding-bottom: var(--s-2x) }
.core-p-b-3x, .core-solo .core-p-b-3x { padding-bottom: var(--s-3x) }
.core-p-b-4x, .core-solo .core-p-b-4x { padding-bottom: var(--s-4x) }
.core-p-b-5x, .core-solo .core-p-b-5x { padding-bottom: var(--s-5x) }
.core-p-b-6x, .core-solo .core-p-b-6x { padding-bottom: var(--s-6x) }
.core-p-b-7x, .core-solo .core-p-b-7x { padding-bottom: var(--s-7x) }
.core-p-b-8x, .core-solo .core-p-b-8x { padding-bottom: var(--s-8x) }
.core-p-b-9x, .core-solo .core-p-b-9x { padding-bottom: var(--s-9x) }
.core-p-b-10x, .core-solo .core-p-b-10x { padding-bottom: var(--s-10x) }
.core-p-b-12x, .core-solo .core-p-b-12x { padding-bottom: var(--s-12x) }
.core-p-b-14x, .core-solo .core-p-b-14x { padding-bottom: var(--s-14x) }
.core-p-b-16x, .core-solo .core-p-b-16x { padding-bottom: var(--s-16x) }
.core-p-b-18x, .core-solo .core-p-b-18x { padding-bottom: var(--s-18x) }
.core-p-b-20x, .core-solo .core-p-b-20x { padding-bottom: var(--s-20x) }
.core-p-b-24x, .core-solo .core-p-b-24x { padding-bottom: var(--s-24x) }
.core-p-b-28x, .core-solo .core-p-b-28x { padding-bottom: var(--s-28x) }
.core-p-b-32x, .core-solo .core-p-b-32x { padding-bottom: var(--s-32x) }
.core-p-b-48x, .core-solo .core-p-b-48x { padding-bottom: var(--s-48x) }


/* Боковой padding */
.core-p-side-null, .core-solo .core-p-side-null { padding-left: 0;padding-right: 0 }
.core-p-side-1x, .core-solo .core-p-side-1x { padding-left: var(--s-1x);padding-right: var(--s-1x) }
.core-p-side-2x, .core-solo .core-p-side-2x { padding-left: var(--s-2x);padding-right: var(--s-2x) }
.core-p-side-3x, .core-solo .core-p-side-3x { padding-left: var(--s-3x);padding-right: var(--s-3x) }
.core-p-side-4x, .core-solo .core-p-side-4x { padding-left: var(--s-4x);padding-right: var(--s-4x) }
.core-p-side-5x, .core-solo .core-p-side-5x { padding-left: var(--s-5x);padding-right: var(--s-5x) }
.core-p-side-6x, .core-solo .core-p-side-6x { padding-left: var(--s-6x);padding-right: var(--s-6x) }
.core-p-side-7x, .core-solo .core-p-side-7x { padding-left: var(--s-7x);padding-right: var(--s-7x) }
.core-p-side-8x, .core-solo .core-p-side-8x { padding-left: var(--s-8x);padding-right: var(--s-8x) }
.core-p-side-9x, .core-solo .core-p-side-9x { padding-left: var(--s-9x);padding-right: var(--s-9x) }
.core-p-side-10x, .core-solo .core-p-side-10x { padding-left: var(--s-10x);padding-right: var(--s-10x) }
.core-p-side-12x, .core-solo .core-p-side-12x { padding-left: var(--s-12x);padding-right: var(--s-12x) }
.core-p-side-14x, .core-solo .core-p-side-14x { padding-left: var(--s-14x);padding-right: var(--s-14x) }
.core-p-side-16x, .core-solo .core-p-side-16x { padding-left: var(--s-16x);padding-right: var(--s-16x) }
.core-p-side-18x, .core-solo .core-p-side-18x { padding-left: var(--s-18x);padding-right: var(--s-18x) }
.core-p-side-20x, .core-solo .core-p-side-20x { padding-left: var(--s-20x);padding-right: var(--s-20x) }
.core-p-side-24x, .core-solo .core-p-side-24x { padding-left: var(--s-24x);padding-right: var(--s-24x) }
.core-p-side-28x, .core-solo .core-p-side-28x { padding-left: var(--s-28x);padding-right: var(--s-28x) }
.core-p-side-32x, .core-solo .core-p-side-32x { padding-left: var(--s-32x);padding-right: var(--s-32x) }
.core-p-side-48x, .core-solo .core-p-side-48x { padding-left: var(--s-48x);padding-right: var(--s-48x) }


/* Margin Bottom */
.core-m-b-null, .core-solo .core-m-b-null { margin-bottom: 0 }
.core-m-b-1x, .core-solo .core-m-b-1x { margin-bottom: var(--s-1x) }
.core-m-b-2x, .core-solo .core-m-b-2x { margin-bottom: var(--s-2x) }
.core-m-b-3x, .core-solo .core-m-b-3x { margin-bottom: var(--s-3x) }
.core-m-b-4x, .core-solo .core-m-b-4x { margin-bottom: var(--s-4x) }
.core-m-b-5x, .core-solo .core-m-b-5x { margin-bottom: var(--s-5x) }
.core-m-b-6x, .core-solo .core-m-b-6x { margin-bottom: var(--s-6x) }
.core-m-b-7x, .core-solo .core-m-b-7x { margin-bottom: var(--s-7x) }
.core-m-b-8x, .core-solo .core-m-b-8x { margin-bottom: var(--s-8x) }
.core-m-b-9x, .core-solo .core-m-b-9x { margin-bottom: var(--s-9x) }
.core-m-b-10x, .core-solo .core-m-b-10x { margin-bottom: var(--s-10x) }
.core-m-b-12x, .core-solo .core-m-b-12x { margin-bottom: var(--s-12x) }
.core-m-b-14x, .core-solo .core-m-b-14x { margin-bottom: var(--s-14x) }
.core-m-b-16x, .core-solo .core-m-b-16x { margin-bottom: var(--s-16x) }
.core-m-b-18x, .core-solo .core-m-b-18x { margin-bottom: var(--s-18x) }
.core-m-b-20x, .core-solo .core-m-b-20x { margin-bottom: var(--s-20x) }
.core-m-b-24x, .core-solo .core-m-b-24x { margin-bottom: var(--s-24x) }
.core-m-b-28x, .core-solo .core-m-b-28x { margin-bottom: var(--s-28x) }
.core-m-b-32x, .core-solo .core-m-b-32x { margin-bottom: var(--s-32x) }
.core-m-b-48x, .core-solo .core-m-b-48x { margin-bottom: var(--s-48x) }

/* Margin Bottom */
.core-m-t-null, .core-solo .core-m-t-null { margin-top: 0 }
.core-m-t-1x, .core-solo .core-m-t-1x { margin-top: var(--s-1x) }
.core-m-t-2x, .core-solo .core-m-t-2x { margin-top: var(--s-2x) }
.core-m-t-3x, .core-solo .core-m-t-3x { margin-top: var(--s-3x) }
.core-m-t-4x, .core-solo .core-m-t-4x { margin-top: var(--s-4x) }
.core-m-t-5x, .core-solo .core-m-t-5x { margin-top: var(--s-5x) }
.core-m-t-6x, .core-solo .core-m-t-6x { margin-top: var(--s-6x) }
.core-m-t-7x, .core-solo .core-m-t-7x { margin-top: var(--s-7x) }
.core-m-t-8x, .core-solo .core-m-t-8x { margin-top: var(--s-8x) }
.core-m-t-9x, .core-solo .core-m-t-9x { margin-top: var(--s-9x) }
.core-m-t-10x, .core-solo .core-m-t-10x { margin-top: var(--s-10x) }
.core-m-t-12x, .core-solo .core-m-t-12x { margin-top: var(--s-12x) }
.core-m-t-14x, .core-solo .core-m-t-14x { margin-top: var(--s-14x) }
.core-m-t-16x, .core-solo .core-m-t-16x { margin-top: var(--s-16x) }
.core-m-t-18x, .core-solo .core-m-t-18x { margin-top: var(--s-18x) }
.core-m-t-20x, .core-solo .core-m-t-20x { margin-top: var(--s-20x) }
.core-m-t-24x, .core-solo .core-m-t-24x { margin-top: var(--s-24x) }
.core-m-t-28x, .core-solo .core-m-t-28x { margin-top: var(--s-28x) }
.core-m-t-32x, .core-solo .core-m-t-32x { margin-top: var(--s-32x) }
.core-m-t-48x, .core-solo .core-m-t-48x { margin-top: var(--s-48x) }


/* Border Radius */
.core-b-r-null, .core-solo .core-b-r-null { border-radius: 0  }
.core-b-r-xs, .core-solo .core-b-r-xs { border-radius: var(--b-r-xs)  }
.core-b-r-s, .core-solo .core-b-r-s { border-radius: var(--b-r-s)  }
.core-b-r-m, .core-solo .core-b-r-m { border-radius: var(--b-r-m)  }
.core-b-r-l, .core-solo .core-b-r-l { border-radius: var(--b-r-l)  }
.core-b-r-xl, .core-solo .core-b-r-xl { border-radius: var(--b-r-xl)  }
.core-b-r-full, .core-solo .core-b-r-full { border-radius: var(--b-r-full)  }


/* Tablet versions */
@media (max-width: 924px) {

    /* Gap */
    .t-core-g-null, .core-solo .t-core-g-null { gap: 0 }
    .t-core-g-1x, .core-solo .t-core-g-1x { gap: var(--s-1x) }
    .t-core-g-2x, .core-solo .t-core-g-2x { gap: var(--s-2x) }
    .t-core-g-3x, .core-solo .t-core-g-3x { gap: var(--s-3x) }
    .t-core-g-4x, .core-solo .t-core-g-4x { gap: var(--s-4x) }
    .t-core-g-5x, .core-solo .t-core-g-5x { gap: var(--s-5x) }
    .t-core-g-6x, .core-solo .t-core-g-6x { gap: var(--s-6x) }
    .t-core-g-7x, .core-solo .t-core-g-7x { gap: var(--s-7x) }
    .t-core-g-8x, .core-solo .t-core-g-8x { gap: var(--s-8x) }
    .t-core-g-9x, .core-solo .t-core-g-9x { gap: var(--s-9x) }
    .t-core-g-10x, .core-solo .t-core-g-10x { gap: var(--s-10x) }
    .t-core-g-12x, .core-solo .t-core-g-12x { gap: var(--s-12x) }
    .t-core-g-14x, .core-solo .t-core-g-14x { gap: var(--s-14x) }
    .t-core-g-16x, .core-solo .t-core-g-16x { gap: var(--s-16x) }
    .t-core-g-18x, .core-solo .t-core-g-18x { gap: var(--s-18x) }
    .t-core-g-20x, .core-solo .t-core-g-20x { gap: var(--s-20x) }
    .t-core-g-24x, .core-solo .t-core-g-24x { gap: var(--s-24x) }
    .t-core-g-28x, .core-solo .t-core-g-28x { gap: var(--s-28x) }
    .t-core-g-32x, .core-solo .t-core-g-32x { gap: var(--s-32x) }
    .t-core-g-48x, .core-solo .t-core-g-48x { gap: var(--s-48x) }

    /* Mobile Padding */
    .t-core-p-null, .core-solo .t-core-p-null { padding: 0 }
    .t-core-p-1x, .core-solo .t-core-p-1x { padding: var(--s-1x) }
    .t-core-p-2x, .core-solo .t-core-p-2x { padding: var(--s-2x) }
    .t-core-p-3x, .core-solo .t-core-p-3x { padding: var(--s-3x) }
    .t-core-p-4x, .core-solo .t-core-p-4x { padding: var(--s-4x) }
    .t-core-p-5x, .core-solo .t-core-p-5x { padding: var(--s-5x) }
    .t-core-p-6x, .core-solo .t-core-p-6x { padding: var(--s-6x) }
    .t-core-p-7x, .core-solo .t-core-p-7x { padding: var(--s-7x) }
    .t-core-p-8x, .core-solo .t-core-p-8x { padding: var(--s-8x) }
    .t-core-p-9x, .core-solo .t-core-p-9x { padding: var(--s-9x) }
    .t-core-p-10x, .core-solo .t-core-p-10x { padding: var(--s-10x) }
    .t-core-p-12x, .core-solo .t-core-p-12x { padding: var(--s-12x) }
    .t-core-p-14x, .core-solo .t-core-p-14x { padding: var(--s-14x) }
    .t-core-p-16x, .core-solo .t-core-p-16x { padding: var(--s-16x) }
    .t-core-p-18x, .core-solo .t-core-p-18x { padding: var(--s-18x) }
    .t-core-p-20x, .core-solo .t-core-p-20x { padding: var(--s-20x) }
    .t-core-p-24x, .core-solo .t-core-p-24x { padding: var(--s-24x) }
    .t-core-p-28x, .core-solo .t-core-p-28x { padding: var(--s-28x) }
    .t-core-p-32x, .core-solo .t-core-p-32x { padding: var(--s-32x) }
    .t-core-p-48x, .core-solo .t-core-p-48x { padding: var(--s-48x) }


    /* Mobile Padding Top */
    .t-core-p-t-null, .core-solo .t-core-p-t-null { padding-top: 0 }
    .t-core-p-t-1x, .core-solo .t-core-p-t-1x { padding-top: var(--s-1x) }
    .t-core-p-t-2x, .core-solo .t-core-p-t-2x { padding-top: var(--s-2x) }
    .t-core-p-t-3x, .core-solo .t-core-p-t-3x { padding-top: var(--s-3x) }
    .t-core-p-t-4x, .core-solo .t-core-p-t-4x { padding-top: var(--s-4x) }
    .t-core-p-t-5x, .core-solo .t-core-p-t-5x { padding-top: var(--s-5x) }
    .t-core-p-t-6x, .core-solo .t-core-p-t-6x { padding-top: var(--s-6x) }
    .t-core-p-t-7x, .core-solo .t-core-p-t-7x { padding-top: var(--s-7x) }
    .t-core-p-t-8x, .core-solo .t-core-p-t-8x { padding-top: var(--s-8x) }
    .t-core-p-t-9x, .core-solo .t-core-p-t-9x { padding-top: var(--s-9x) }
    .t-core-p-t-10x, .core-solo .t-core-p-t-10x { padding-top: var(--s-10x) }
    .t-core-p-t-12x, .core-solo .t-core-p-t-12x { padding-top: var(--s-12x) }
    .t-core-p-t-14x, .core-solo .t-core-p-t-14x { padding-top: var(--s-14x) }
    .t-core-p-t-16x, .core-solo .t-core-p-t-16x { padding-top: var(--s-16x) }
    .t-core-p-t-18x, .core-solo .t-core-p-t-18x { padding-top: var(--s-18x) }
    .t-core-p-t-20x, .core-solo .t-core-p-t-20x { padding-top: var(--s-20x) }
    .t-core-p-t-24x, .core-solo .t-core-p-t-24x { padding-top: var(--s-24x) }
    .t-core-p-t-28x, .core-solo .t-core-p-t-28x { padding-top: var(--s-28x) }
    .t-core-p-t-32x, .core-solo .t-core-p-t-32x { padding-top: var(--s-32x) }
    .t-core-p-t-48x, .core-solo .t-core-p-t-48x { padding-top: var(--s-48x) }


    /* Mobile Padding Bottom */
    .t-core-p-b-null, .core-solo .t-core-p-b-null { padding-bottom: 0 }
    .t-core-p-b-1x, .core-solo .t-core-p-b-1x { padding-bottom: var(--s-1x) }
    .t-core-p-b-2x, .core-solo .t-core-p-b-2x { padding-bottom: var(--s-2x) }
    .t-core-p-b-3x, .core-solo .t-core-p-b-3x { padding-bottom: var(--s-3x) }
    .t-core-p-b-4x, .core-solo .t-core-p-b-4x { padding-bottom: var(--s-4x) }
    .t-core-p-b-5x, .core-solo .t-core-p-b-5x { padding-bottom: var(--s-5x) }
    .t-core-p-b-6x, .core-solo .t-core-p-b-6x { padding-bottom: var(--s-6x) }
    .t-core-p-b-7x, .core-solo .t-core-p-b-7x { padding-bottom: var(--s-7x) }
    .t-core-p-b-8x, .core-solo .t-core-p-b-8x { padding-bottom: var(--s-8x) }
    .t-core-p-b-9x, .core-solo .t-core-p-b-9x { padding-bottom: var(--s-9x) }
    .t-core-p-b-10x, .core-solo .t-core-p-b-10x { padding-bottom: var(--s-10x) }
    .t-core-p-b-12x, .core-solo .t-core-p-b-12x { padding-bottom: var(--s-12x) }
    .t-core-p-b-14x, .core-solo .t-core-p-b-14x { padding-bottom: var(--s-14x) }
    .t-core-p-b-16x, .core-solo .t-core-p-b-16x { padding-bottom: var(--s-16x) }
    .t-core-p-b-18x, .core-solo .t-core-p-b-18x { padding-bottom: var(--s-18x) }
    .t-core-p-b-20x, .core-solo .t-core-p-b-20x { padding-bottom: var(--s-20x) }
    .t-core-p-b-24x, .core-solo .t-core-p-b-24x { padding-bottom: var(--s-24x) }
    .t-core-p-b-28x, .core-solo .t-core-p-b-28x { padding-bottom: var(--s-28x) }
    .t-core-p-b-32x, .core-solo .t-core-p-b-32x { padding-bottom: var(--s-32x) }
    .t-core-p-b-48x, .core-solo .t-core-p-b-48x { padding-bottom: var(--s-48x) }


    /* Mobile Side Padding */
    .t-core-p-side-null, .core-solo .t-core-p-side-null { padding-left: 0;padding-right: 0 }
    .t-core-p-side-1x, .core-solo .t-core-p-side-1x { padding-left: var(--s-1x);padding-right: var(--s-1x) }
    .t-core-p-side-2x, .core-solo .t-core-p-side-2x { padding-left: var(--s-2x);padding-right: var(--s-2x) }
    .t-core-p-side-3x, .core-solo .t-core-p-side-3x { padding-left: var(--s-3x);padding-right: var(--s-3x) }
    .t-core-p-side-4x, .core-solo .t-core-p-side-4x { padding-left: var(--s-4x);padding-right: var(--s-4x) }
    .t-core-p-side-5x, .core-solo .t-core-p-side-5x { padding-left: var(--s-5x);padding-right: var(--s-5x) }
    .t-core-p-side-6x, .core-solo .t-core-p-side-6x { padding-left: var(--s-6x);padding-right: var(--s-6x) }
    .t-core-p-side-7x, .core-solo .t-core-p-side-7x { padding-left: var(--s-7x);padding-right: var(--s-7x) }
    .t-core-p-side-8x, .core-solo .t-core-p-side-8x { padding-left: var(--s-8x);padding-right: var(--s-8x) }
    .t-core-p-side-9x, .core-solo .t-core-p-side-9x { padding-left: var(--s-9x);padding-right: var(--s-9x) }
    .t-core-p-side-10x, .core-solo .t-core-p-side-10x { padding-left: var(--s-10x);padding-right: var(--s-10x) }
    .t-core-p-side-12x, .core-solo .t-core-p-side-12x { padding-left: var(--s-12x);padding-right: var(--s-12x) }
    .t-core-p-side-14x, .core-solo .t-core-p-side-14x { padding-left: var(--s-14x);padding-right: var(--s-14x) }
    .t-core-p-side-16x, .core-solo .t-core-p-side-16x { padding-left: var(--s-16x);padding-right: var(--s-16x) }
    .t-core-p-side-18x, .core-solo .t-core-p-side-18x { padding-left: var(--s-18x);padding-right: var(--s-18x) }
    .t-core-p-side-20x, .core-solo .t-core-p-side-20x { padding-left: var(--s-20x);padding-right: var(--s-20x) }
    .t-core-p-side-24x, .core-solo .t-core-p-side-24x { padding-left: var(--s-24x);padding-right: var(--s-24x) }
    .t-core-p-side-28x, .core-solo .t-core-p-side-28x { padding-left: var(--s-28x);padding-right: var(--s-28x) }
    .t-core-p-side-32x, .core-solo .t-core-p-side-32x { padding-left: var(--s-32x);padding-right: var(--s-32x) }
    .t-core-p-side-48x, .core-solo .t-core-p-side-48x { padding-left: var(--s-48x);padding-right: var(--s-48x) }


    /* Mobile Margin Bottom */
    .t-core-m-b-null, .core-solo .t-core-m-b-null { margin-bottom: 0 }
    .t-core-m-b-1x, .core-solo .t-core-m-b-1x { margin-bottom: var(--s-1x) }
    .t-core-m-b-2x, .core-solo .t-core-m-b-2x { margin-bottom: var(--s-2x) }
    .t-core-m-b-3x, .core-solo .t-core-m-b-3x { margin-bottom: var(--s-3x) }
    .t-core-m-b-4x, .core-solo .t-core-m-b-4x { margin-bottom: var(--s-4x) }
    .t-core-m-b-5x, .core-solo .t-core-m-b-5x { margin-bottom: var(--s-5x) }
    .t-core-m-b-6x, .core-solo .t-core-m-b-6x { margin-bottom: var(--s-6x) }
    .t-core-m-b-7x, .core-solo .t-core-m-b-7x { margin-bottom: var(--s-7x) }
    .t-core-m-b-8x, .core-solo .t-core-m-b-8x { margin-bottom: var(--s-8x) }
    .t-core-m-b-9x, .core-solo .t-core-m-b-9x { margin-bottom: var(--s-9x) }
    .t-core-m-b-10x, .core-solo .t-core-m-b-10x { margin-bottom: var(--s-10x) }
    .t-core-m-b-12x, .core-solo .t-core-m-b-12x { margin-bottom: var(--s-12x) }
    .t-core-m-b-14x, .core-solo .t-core-m-b-14x { margin-bottom: var(--s-14x) }
    .t-core-m-b-16x, .core-solo .t-core-m-b-16x { margin-bottom: var(--s-16x) }
    .t-core-m-b-18x, .core-solo .t-core-m-b-18x { margin-bottom: var(--s-18x) }
    .t-core-m-b-20x, .core-solo .t-core-m-b-20x { margin-bottom: var(--s-20x) }
    .t-core-m-b-24x, .core-solo .t-core-m-b-24x { margin-bottom: var(--s-24x) }
    .t-core-m-b-28x, .core-solo .t-core-m-b-28x { margin-bottom: var(--s-28x) }
    .t-core-m-b-32x, .core-solo .t-core-m-b-32x { margin-bottom: var(--s-32x) }
    .t-core-m-b-48x, .core-solo .t-core-m-b-48x { margin-bottom: var(--s-48x) }

    /* Mobile Margin Top */
    .t-core-m-t-null, .core-solo .t-core-m-t-null { margin-top: 0 }
    .t-core-m-t-1x, .core-solo .t-core-m-t-1x { margin-top: var(--s-1x) }
    .t-core-m-t-2x, .core-solo .t-core-m-t-2x { margin-top: var(--s-2x) }
    .t-core-m-t-3x, .core-solo .t-core-m-t-3x { margin-top: var(--s-3x) }
    .t-core-m-t-4x, .core-solo .t-core-m-t-4x { margin-top: var(--s-4x) }
    .t-core-m-t-5x, .core-solo .t-core-m-t-5x { margin-top: var(--s-5x) }
    .t-core-m-t-6x, .core-solo .t-core-m-t-6x { margin-top: var(--s-6x) }
    .t-core-m-t-7x, .core-solo .t-core-m-t-7x { margin-top: var(--s-7x) }
    .t-core-m-t-8x, .core-solo .t-core-m-t-8x { margin-top: var(--s-8x) }
    .t-core-m-t-9x, .core-solo .t-core-m-t-9x { margin-top: var(--s-9x) }
    .t-core-m-t-10x, .core-solo .t-core-m-t-10x { margin-top: var(--s-10x) }
    .t-core-m-t-12x, .core-solo .t-core-m-t-12x { margin-top: var(--s-12x) }
    .t-core-m-t-14x, .core-solo .t-core-m-t-14x { margin-top: var(--s-14x) }
    .t-core-m-t-16x, .core-solo .t-core-m-t-16x { margin-top: var(--s-16x) }
    .t-core-m-t-18x, .core-solo .t-core-m-t-18x { margin-top: var(--s-18x) }
    .t-core-m-t-20x, .core-solo .t-core-m-t-20x { margin-top: var(--s-20x) }
    .t-core-m-t-24x, .core-solo .t-core-m-t-24x { margin-top: var(--s-24x) }
    .t-core-m-t-28x, .core-solo .t-core-m-t-28x { margin-top: var(--s-28x) }
    .t-core-m-t-32x, .core-solo .t-core-m-t-32x { margin-top: var(--s-32x) }
    .t-core-m-t-48x, .core-solo .t-core-m-t-48x { margin-top: var(--s-48x) }


    /* Mobile Border Radius */
    .t-core-b-r-null, .core-solo .t-core-b-r-null { border-radius: 0 }
    .t-core-b-r-xs, .core-solo .t-core-b-r-xs { border-radius: var(--b-r-xs) }
    .t-core-b-r-s, .core-solo .t-core-b-r-s { border-radius: var(--b-r-s) }
    .t-core-b-r-m, .core-solo .t-core-b-r-m { border-radius: var(--b-r-m) }
    .t-core-b-r-l, .core-solo .t-core-b-r-l { border-radius: var(--b-r-l) }
    .t-core-b-r-xl, .core-solo .t-core-b-r-xl { border-radius: var(--b-r-xl) }
    .t-core-b-r-full, .core-solo .t-core-b-r-full { border-radius: var(--b-r-full) }
}


/* Mobile versions */
@media (max-width: 720px) {

    /* Gap */
    .m-core-g-null, .core-solo .m-core-g-null { gap: 0 }
    .m-core-g-1x, .core-solo .m-core-g-1x { gap: var(--s-1x) }
    .m-core-g-2x, .core-solo .m-core-g-2x { gap: var(--s-2x) }
    .m-core-g-3x, .core-solo .m-core-g-3x { gap: var(--s-3x) }
    .m-core-g-4x, .core-solo .m-core-g-4x { gap: var(--s-4x) }
    .m-core-g-5x, .core-solo .m-core-g-5x { gap: var(--s-5x) }
    .m-core-g-6x, .core-solo .m-core-g-6x { gap: var(--s-6x) }
    .m-core-g-7x, .core-solo .m-core-g-7x { gap: var(--s-7x) }
    .m-core-g-8x, .core-solo .m-core-g-8x { gap: var(--s-8x) }
    .m-core-g-9x, .core-solo .m-core-g-9x { gap: var(--s-9x) }
    .m-core-g-10x, .core-solo .m-core-g-10x { gap: var(--s-10x) }
    .m-core-g-12x, .core-solo .m-core-g-12x { gap: var(--s-12x) }
    .m-core-g-14x, .core-solo .m-core-g-14x { gap: var(--s-14x) }
    .m-core-g-16x, .core-solo .m-core-g-16x { gap: var(--s-16x) }
    .m-core-g-18x, .core-solo .m-core-g-18x { gap: var(--s-18x) }
    .m-core-g-20x, .core-solo .m-core-g-20x { gap: var(--s-20x) }
    .m-core-g-24x, .core-solo .m-core-g-24x { gap: var(--s-24x) }
    .m-core-g-28x, .core-solo .m-core-g-28x { gap: var(--s-28x) }
    .m-core-g-32x, .core-solo .m-core-g-32x { gap: var(--s-32x) }
    .m-core-g-48x, .core-solo .m-core-g-48x { gap: var(--s-48x) }

    /* Mobile Padding */
    .m-core-p-null, .core-solo .m-core-p-null { padding: 0 }
    .m-core-p-1x, .core-solo .m-core-p-1x { padding: var(--s-1x) }
    .m-core-p-2x, .core-solo .m-core-p-2x { padding: var(--s-2x) }
    .m-core-p-3x, .core-solo .m-core-p-3x { padding: var(--s-3x) }
    .m-core-p-4x, .core-solo .m-core-p-4x { padding: var(--s-4x) }
    .m-core-p-5x, .core-solo .m-core-p-5x { padding: var(--s-5x) }
    .m-core-p-6x, .core-solo .m-core-p-6x { padding: var(--s-6x) }
    .m-core-p-7x, .core-solo .m-core-p-7x { padding: var(--s-7x) }
    .m-core-p-8x, .core-solo .m-core-p-8x { padding: var(--s-8x) }
    .m-core-p-9x, .core-solo .m-core-p-9x { padding: var(--s-9x) }
    .m-core-p-10x, .core-solo .m-core-p-10x { padding: var(--s-10x) }
    .m-core-p-12x, .core-solo .m-core-p-12x { padding: var(--s-12x) }
    .m-core-p-14x, .core-solo .m-core-p-14x { padding: var(--s-14x) }
    .m-core-p-16x, .core-solo .m-core-p-16x { padding: var(--s-16x) }
    .m-core-p-18x, .core-solo .m-core-p-18x { padding: var(--s-18x) }
    .m-core-p-20x, .core-solo .m-core-p-20x { padding: var(--s-20x) }
    .m-core-p-24x, .core-solo .m-core-p-24x { padding: var(--s-24x) }
    .m-core-p-28x, .core-solo .m-core-p-28x { padding: var(--s-28x) }
    .m-core-p-32x, .core-solo .m-core-p-32x { padding: var(--s-32x) }
    .m-core-p-48x, .core-solo .m-core-p-48x { padding: var(--s-48x) }


    /* Mobile Padding Top */
    .m-core-p-t-null, .core-solo .m-core-p-t-null { padding-top: 0 }
    .m-core-p-t-1x, .core-solo .m-core-p-t-1x { padding-top: var(--s-1x) }
    .m-core-p-t-2x, .core-solo .m-core-p-t-2x { padding-top: var(--s-2x) }
    .m-core-p-t-3x, .core-solo .m-core-p-t-3x { padding-top: var(--s-3x) }
    .m-core-p-t-4x, .core-solo .m-core-p-t-4x { padding-top: var(--s-4x) }
    .m-core-p-t-5x, .core-solo .m-core-p-t-5x { padding-top: var(--s-5x) }
    .m-core-p-t-6x, .core-solo .m-core-p-t-6x { padding-top: var(--s-6x) }
    .m-core-p-t-7x, .core-solo .m-core-p-t-7x { padding-top: var(--s-7x) }
    .m-core-p-t-8x, .core-solo .m-core-p-t-8x { padding-top: var(--s-8x) }
    .m-core-p-t-9x, .core-solo .m-core-p-t-9x { padding-top: var(--s-9x) }
    .m-core-p-t-10x, .core-solo .m-core-p-t-10x { padding-top: var(--s-10x) }
    .m-core-p-t-12x, .core-solo .m-core-p-t-12x { padding-top: var(--s-12x) }
    .m-core-p-t-14x, .core-solo .m-core-p-t-14x { padding-top: var(--s-14x) }
    .m-core-p-t-16x, .core-solo .m-core-p-t-16x { padding-top: var(--s-16x) }
    .m-core-p-t-18x, .core-solo .m-core-p-t-18x { padding-top: var(--s-18x) }
    .m-core-p-t-20x, .core-solo .m-core-p-t-20x { padding-top: var(--s-20x) }
    .m-core-p-t-24x, .core-solo .m-core-p-t-24x { padding-top: var(--s-24x) }
    .m-core-p-t-28x, .core-solo .m-core-p-t-28x { padding-top: var(--s-28x) }
    .m-core-p-t-32x, .core-solo .m-core-p-t-32x { padding-top: var(--s-32x) }
    .m-core-p-t-48x, .core-solo .m-core-p-t-48x { padding-top: var(--s-48x) }


    /* Mobile Padding Bottom */
    .m-core-p-b-null, .core-solo .m-core-p-b-null { padding-bottom: 0 }
    .m-core-p-b-1x, .core-solo .m-core-p-b-1x { padding-bottom: var(--s-1x) }
    .m-core-p-b-2x, .core-solo .m-core-p-b-2x { padding-bottom: var(--s-2x) }
    .m-core-p-b-3x, .core-solo .m-core-p-b-3x { padding-bottom: var(--s-3x) }
    .m-core-p-b-4x, .core-solo .m-core-p-b-4x { padding-bottom: var(--s-4x) }
    .m-core-p-b-5x, .core-solo .m-core-p-b-5x { padding-bottom: var(--s-5x) }
    .m-core-p-b-6x, .core-solo .m-core-p-b-6x { padding-bottom: var(--s-6x) }
    .m-core-p-b-7x, .core-solo .m-core-p-b-7x { padding-bottom: var(--s-7x) }
    .m-core-p-b-8x, .core-solo .m-core-p-b-8x { padding-bottom: var(--s-8x) }
    .m-core-p-b-9x, .core-solo .m-core-p-b-9x { padding-bottom: var(--s-9x) }
    .m-core-p-b-10x, .core-solo .m-core-p-b-10x { padding-bottom: var(--s-10x) }
    .m-core-p-b-12x, .core-solo .m-core-p-b-12x { padding-bottom: var(--s-12x) }
    .m-core-p-b-14x, .core-solo .m-core-p-b-14x { padding-bottom: var(--s-14x) }
    .m-core-p-b-16x, .core-solo .m-core-p-b-16x { padding-bottom: var(--s-16x) }
    .m-core-p-b-18x, .core-solo .m-core-p-b-18x { padding-bottom: var(--s-18x) }
    .m-core-p-b-20x, .core-solo .m-core-p-b-20x { padding-bottom: var(--s-20x) }
    .m-core-p-b-24x, .core-solo .m-core-p-b-24x { padding-bottom: var(--s-24x) }
    .m-core-p-b-28x, .core-solo .m-core-p-b-28x { padding-bottom: var(--s-28x) }
    .m-core-p-b-32x, .core-solo .m-core-p-b-32x { padding-bottom: var(--s-32x) }
    .m-core-p-b-48x, .core-solo .m-core-p-b-48x { padding-bottom: var(--s-48x) }


    /* Mobile Side Padding */
    .m-core-p-side-null, .core-solo .m-core-p-side-null { padding-left: 0;padding-right: 0 }
    .m-core-p-side-1x, .core-solo .m-core-p-side-1x { padding-left: var(--s-1x);padding-right: var(--s-1x) }
    .m-core-p-side-2x, .core-solo .m-core-p-side-2x { padding-left: var(--s-2x);padding-right: var(--s-2x) }
    .m-core-p-side-3x, .core-solo .m-core-p-side-3x { padding-left: var(--s-3x);padding-right: var(--s-3x) }
    .m-core-p-side-4x, .core-solo .m-core-p-side-4x { padding-left: var(--s-4x);padding-right: var(--s-4x) }
    .m-core-p-side-5x, .core-solo .m-core-p-side-5x { padding-left: var(--s-5x);padding-right: var(--s-5x) }
    .m-core-p-side-6x, .core-solo .m-core-p-side-6x { padding-left: var(--s-6x);padding-right: var(--s-6x) }
    .m-core-p-side-7x, .core-solo .m-core-p-side-7x { padding-left: var(--s-7x);padding-right: var(--s-7x) }
    .m-core-p-side-8x, .core-solo .m-core-p-side-8x { padding-left: var(--s-8x);padding-right: var(--s-8x) }
    .m-core-p-side-9x, .core-solo .m-core-p-side-9x { padding-left: var(--s-9x);padding-right: var(--s-9x) }
    .m-core-p-side-10x, .core-solo .m-core-p-side-10x { padding-left: var(--s-10x);padding-right: var(--s-10x) }
    .m-core-p-side-12x, .core-solo .m-core-p-side-12x { padding-left: var(--s-12x);padding-right: var(--s-12x) }
    .m-core-p-side-14x, .core-solo .m-core-p-side-14x { padding-left: var(--s-14x);padding-right: var(--s-14x) }
    .m-core-p-side-16x, .core-solo .m-core-p-side-16x { padding-left: var(--s-16x);padding-right: var(--s-16x) }
    .m-core-p-side-18x, .core-solo .m-core-p-side-18x { padding-left: var(--s-18x);padding-right: var(--s-18x) }
    .m-core-p-side-20x, .core-solo .m-core-p-side-20x { padding-left: var(--s-20x);padding-right: var(--s-20x) }
    .m-core-p-side-24x, .core-solo .m-core-p-side-24x { padding-left: var(--s-24x);padding-right: var(--s-24x) }
    .m-core-p-side-28x, .core-solo .m-core-p-side-28x { padding-left: var(--s-28x);padding-right: var(--s-28x) }
    .m-core-p-side-32x, .core-solo .m-core-p-side-32x { padding-left: var(--s-32x);padding-right: var(--s-32x) }
    .m-core-p-side-48x, .core-solo .m-core-p-side-48x { padding-left: var(--s-48x);padding-right: var(--s-48x) }


    /* Mobile Margin Bottom */
    .m-core-m-b-null, .core-solo .m-core-m-b-null { margin-bottom: 0 }
    .m-core-m-b-1x, .core-solo .m-core-m-b-1x { margin-bottom: var(--s-1x) }
    .m-core-m-b-2x, .core-solo .m-core-m-b-2x { margin-bottom: var(--s-2x) }
    .m-core-m-b-3x, .core-solo .m-core-m-b-3x { margin-bottom: var(--s-3x) }
    .m-core-m-b-4x, .core-solo .m-core-m-b-4x { margin-bottom: var(--s-4x) }
    .m-core-m-b-5x, .core-solo .m-core-m-b-5x { margin-bottom: var(--s-5x) }
    .m-core-m-b-6x, .core-solo .m-core-m-b-6x { margin-bottom: var(--s-6x) }
    .m-core-m-b-7x, .core-solo .m-core-m-b-7x { margin-bottom: var(--s-7x) }
    .m-core-m-b-8x, .core-solo .m-core-m-b-8x { margin-bottom: var(--s-8x) }
    .m-core-m-b-9x, .core-solo .m-core-m-b-9x { margin-bottom: var(--s-9x) }
    .m-core-m-b-10x, .core-solo .m-core-m-b-10x { margin-bottom: var(--s-10x) }
    .m-core-m-b-12x, .core-solo .m-core-m-b-12x { margin-bottom: var(--s-12x) }
    .m-core-m-b-14x, .core-solo .m-core-m-b-14x { margin-bottom: var(--s-14x) }
    .m-core-m-b-16x, .core-solo .m-core-m-b-16x { margin-bottom: var(--s-16x) }
    .m-core-m-b-18x, .core-solo .m-core-m-b-18x { margin-bottom: var(--s-18x) }
    .m-core-m-b-20x, .core-solo .m-core-m-b-20x { margin-bottom: var(--s-20x) }
    .m-core-m-b-24x, .core-solo .m-core-m-b-24x { margin-bottom: var(--s-24x) }
    .m-core-m-b-28x, .core-solo .m-core-m-b-28x { margin-bottom: var(--s-28x) }
    .m-core-m-b-32x, .core-solo .m-core-m-b-32x { margin-bottom: var(--s-32x) }
    .m-core-m-b-48x, .core-solo .m-core-m-b-48x { margin-bottom: var(--s-48x) }

    /* Mobile Margin Top */
    .m-core-m-t-null, .core-solo .m-core-m-t-null { margin-top: 0 }
    .m-core-m-t-1x, .core-solo .m-core-m-t-1x { margin-top: var(--s-1x) }
    .m-core-m-t-2x, .core-solo .m-core-m-t-2x { margin-top: var(--s-2x) }
    .m-core-m-t-3x, .core-solo .m-core-m-t-3x { margin-top: var(--s-3x) }
    .m-core-m-t-4x, .core-solo .m-core-m-t-4x { margin-top: var(--s-4x) }
    .m-core-m-t-5x, .core-solo .m-core-m-t-5x { margin-top: var(--s-5x) }
    .m-core-m-t-6x, .core-solo .m-core-m-t-6x { margin-top: var(--s-6x) }
    .m-core-m-t-7x, .core-solo .m-core-m-t-7x { margin-top: var(--s-7x) }
    .m-core-m-t-8x, .core-solo .m-core-m-t-8x { margin-top: var(--s-8x) }
    .m-core-m-t-9x, .core-solo .m-core-m-t-9x { margin-top: var(--s-9x) }
    .m-core-m-t-10x, .core-solo .m-core-m-t-10x { margin-top: var(--s-10x) }
    .m-core-m-t-12x, .core-solo .m-core-m-t-12x { margin-top: var(--s-12x) }
    .m-core-m-t-14x, .core-solo .m-core-m-t-14x { margin-top: var(--s-14x) }
    .m-core-m-t-16x, .core-solo .m-core-m-t-16x { margin-top: var(--s-16x) }
    .m-core-m-t-18x, .core-solo .m-core-m-t-18x { margin-top: var(--s-18x) }
    .m-core-m-t-20x, .core-solo .m-core-m-t-20x { margin-top: var(--s-20x) }
    .m-core-m-t-24x, .core-solo .m-core-m-t-24x { margin-top: var(--s-24x) }
    .m-core-m-t-28x, .core-solo .m-core-m-t-28x { margin-top: var(--s-28x) }
    .m-core-m-t-32x, .core-solo .m-core-m-t-32x { margin-top: var(--s-32x) }
    .m-core-m-t-48x, .core-solo .m-core-m-t-48x { margin-top: var(--s-48x) }


    /* Mobile Border Radius */
    .m-core-b-r-null, .core-solo .m-core-b-r-null { border-radius: 0 }
    .m-core-b-r-xs, .core-solo .m-core-b-r-xs { border-radius: var(--b-r-xs) }
    .m-core-b-r-s, .core-solo .m-core-b-r-s { border-radius: var(--b-r-s) }
    .m-core-b-r-m, .core-solo .m-core-b-r-m { border-radius: var(--b-r-m) }
    .m-core-b-r-l, .core-solo .m-core-b-r-l { border-radius: var(--b-r-l) }
    .m-core-b-r-xl, .core-solo .m-core-b-r-xl { border-radius: var(--b-r-xl) }
    .m-core-b-r-full, .core-solo .m-core-b-r-full { border-radius: var(--b-r-full) }
}

/* !SECTION */