diff --git a/assets/toolkit/toolkit.css b/assets/toolkit/toolkit.css
index 07c9301..b2856e3 100644
--- a/assets/toolkit/toolkit.css
+++ b/assets/toolkit/toolkit.css
@@ -91,7 +91,9 @@
 
 
 }
-
+* {
+    box-sizing: border-box;
+}
 
 .kit-field {
     display: flex;
@@ -101,9 +103,10 @@
     position: relative;
     pointer-events: none;
     line-height: 1.5em;
-    --kit-fields-focus-label-zoom-ratio: 0.875;
+    --kit-field-focus-label-zoom-ratio: 0.875;
     --kit-field-line-padding: 3px;
     --line-height-ratio: 1.5;
+    --kit-field-check-mark-stroke-dash-ratio: 45;
 }
 
 .kit-field__input {
@@ -138,11 +141,7 @@
 
 
 .kit-field input[type="radio"]:checked ~ .kit-field__hr {
-    display: block;
-    border: 2px solid var(--kit-color);
-    width: 100%;
-    height: 100%;
-    border-radius: 10px;
+
 }
 
 .kit-field input[type='checkbox'], .kit-field input[type='radio'] {
@@ -300,7 +299,7 @@
 .kit-field .kit-field__display:focus ~.kit-field__label {
     top: 0;
     transform: translate(0, 0);
-    font-size: calc(var(--font-size) * var(--kit-fields-focus-label-zoom-ratio));
+    font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio));
     color: var(--kit-color-primary);
 }
 .kit-field textarea:focus ~.kit-field__hr:after,
@@ -423,7 +422,11 @@
     transition: border 0.15s, background 0.15s, -webkit-transform 0.15s;
     transition: border 0.15s, background 0.15s, transform 0.15s;
 }
-.kit-field__icon >svg {
+.kit-field__icon:before {
+    content: '';
+}
+
+.kit-field__icon > svg {
     position: absolute;
     top: 0;
     left: 0;
@@ -433,6 +436,7 @@
     -moz-transition: -moz-transform 0.15s, opacity 0.15s, fill 0.15s;
     transition: -webkit-transform 0.15s, opacity 0.15s, fill 0.15s;
     transition: transform 0.15s, opacity 0.15s, fill 0.15s;
+    overflow: visible;
 }
 .kit-field input[type='checkbox'],
 .kit-field input[type='radio'] {
@@ -441,6 +445,7 @@
 .kit-field input[type='checkbox'] ~.kit-field__label,
 .kit-field input[type='radio'] ~.kit-field__label {
     pointer-events: auto;
+    flex-grow: 1;
 }
 .kit-field .kit-field__button {
     position: absolute;
@@ -473,7 +478,7 @@
     fill: #e24949;
 }
 .kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon {
-    border-color: #e24949;
+    border-color: var(--kit-color-text);
 }
 .kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon >svg {
     -webkit-transform: scale(1);
@@ -522,22 +527,94 @@
     padding-bottom: var( --kit-field-line-padding);
     padding-top: var( --kit-field-line-padding);
 }
-.kit-field input[type='checkbox'] ~.kit-field__label .kit-field__icon {
 
+/* kit-field--check-mark-material */
+.kit-field input[type='checkbox'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon,
+.kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon {
+    border: 0;
 }
-.kit-field input[type='checkbox'] ~.kit-field__label .kit-field__icon >svg path {
-    fill: #fff;
+.kit-field input[type='checkbox'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon >svg,
+.kit-field input[type='radio'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon >svg {
+    opacity: 0;
+    transition: none;
 }
+.kit-field input[type='checkbox'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before,
+.kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 1em;
+    height: 1em;
+    border: 1px solid var(--kit-color-text);
+    display: block;
+    box-sizing: border-box;
+    transition: 0.2s;
+}
+.kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before {
+    border-radius: 50%;
+}
+.kit-field input[type='checkbox'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon:before,
+.kit-field input[type='radio'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon:before {
+    border-width: 2px;
+    border-style: solid;
+    border-color: var(--kit-color-primary-b1);
+    border-left-color: transparent;
+    border-top-color: transparent;
+    width: 0.7em;
+    height: 1.2em;
+    transform: rotate(
+            45deg
+    ) translate(-3px, 0px);
+    transform-origin: 100% 100%;
+    border-radius: 0;
+}
+
+
+/* kit-field--check-mark-stroke */
+
+.kit-field input[type='checkbox'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon >svg,
+.kit-field input[type='radio'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon >svg {
+    opacity: 1;
+    transition: none;
+    overflow: visible;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+}
+.kit-field input[type='checkbox'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__check-mark,
+.kit-field input[type='radio'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__check-mark {
+    fill: none;
+    stroke: var(--kit-color-primary);
+    stroke-width: 3;
+    stroke-linecap: butt;
+    stroke-linejoin: miter;
+    stroke-opacity: 1;
+    stroke-dasharray: var(--kit-field-check-mark-stroke-dash-ratio);
+    stroke-dashoffset: var(--kit-field-check-mark-stroke-dash-ratio);
+    transition: 0.3s;
+}
+.kit-field input:checked.kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon .kit-field__check-mark {
+    stroke-dashoffset: 0;
+}
+
+
+
+
 .kit-field input[type='checkbox'] ~.kit-field__message
 {
     padding-left: 28px;
 }
 .kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon {
-    border-color: var(--kit-color-primary);
-    background: var(--kit-color-primary);
+    /*border-color: var(--kit-color-primary);*/
+    /*background: var(--kit-color-primary);*/
 }
-.kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon >svg {
+.kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon >svg,
+.kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon >svg {
     opacity: 1;
+    fill: var(--kit-color-primary);
+    stroke: var(--kit-color-primary);
 }
 .kit-field input[type='checkbox']:checked:disabled ~.kit-field__label .kit-field__icon {
     background: #e1e1e1;
@@ -972,7 +1049,7 @@ select.kit-field__input:disabled ~.kit-field__hr {
 .kit-field.kit-select--open .kit-field__label {
     top: 0 !important;
     transform: translate(0, 0);
-    font-size: calc(var(--font-size) * var(--kit-fields-focus-label-zoom-ratio));
+    font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio));
     color: var(--kit-color-primary) !important;
 }
 .kit-field.kit-select--open [data-dirty='false'] ~ .kit-field__label {
diff --git a/templates/input.php b/templates/input.php
index 0faf5d1..668bfa6 100644
--- a/templates/input.php
+++ b/templates/input.php
@@ -28,7 +28,7 @@ if($isHint) {
 
 ?>
 
-<label class="kit-field kit-field--text<?=($hidden?' hidden':'')?> <?=$arParams['FIELD_CLASS']?>"<?
+<label class="kit-field kit-field--text<?=($hidden?' hidden':'')?> <?=$arParams['WRAP_CLASS']?>"<?
     if(strlen($arParams['ID'])){?> for="<?=$arParams['ID']?>"<?}?>>
     <input<?
         if($isReadonly){?> readonly<?}
@@ -62,7 +62,11 @@ if($isHint) {
     <div class="kit-field__label"><div class="kit-field__label-content kit-line-clamp"><?=$label;?></div><?
         if(in_array($arParams['TYPE'], ['radio', 'checkbox'])) {?>
         <span class="kit-field__icon">
-            <svg viewBox="0 0 24 24"><path d="M9.001,16.212l-4.199-4.2l-1.4,1.4l5.6,5.6l12-12l-1.4-1.4L9.001,16.212z"></path></svg>
+            <svg viewBox="0 0 24 24">
+                <?if(0) {?><path d="M9.001,16.212l-4.199-4.2l-1.4,1.4l5.6,5.6l12-12l-1.4-1.4L9.001,16.212z"></path><?}?>
+                <path class="kit-field__check-mark" style="mix-blend-mode: normal;fill: none; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1;" d="m 4.5010925,8.3988745 c 0,0 4.5231587,4.0536025 7.5719575,9.6668315 C 15.906315,10.552955 23.728894,0.8779021 31.09896,-3.72797"></path>
+            </svg>
+
         </span>
         <?
         }
diff --git a/tests/cheatsheet.php b/tests/cheatsheet.php
new file mode 100644
index 0000000..2f4592c
--- /dev/null
+++ b/tests/cheatsheet.php
@@ -0,0 +1,850 @@
+<?require( $_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");?>
+
+
+<div class="kit-wrapper">
+
+    <h1 style="text-align: center;">BX.KIT FRONT-END FRAMEWORK</h1>
+    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
+    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
+    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
+    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
+    <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
+    <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos esse excepturi explicabo fugit labore laborum quaerat quasi voluptatibus? A ab earum explicabo labore nobis nostrum optio perspiciatis provident, quam.</p>
+
+    <div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip on top',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-placement' => 'top',
+                    'title' => 'Tooltip on top'
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip on end',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-placement' => 'right',
+                    'title' => 'Tooltip on end'
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip on bottom',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-placement' => 'bottom',
+                    'title' => 'Tooltip on bottom'
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip on start',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-placement' => 'left',
+                    'title' => 'Tooltip on start'
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip with HTML',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-html' => 'true',
+                    'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
+                ]
+            ]);
+            ?>
+        </div>
+    </div>
+
+
+    <div class="d-flex justify-content-between flex-wrap">
+        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
+            Vertically centered scrollable modal
+        </button>
+    </div>
+
+    <?
+    service()->templater()->render('kit:modal', [
+        'ID' => 'exampleModalCenteredScrollable',
+        'TITLE' => 'Modal title',
+        'BODY' => '<p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
+                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+                    <p>This content should appear at the bottom after you scroll.</p>',
+        'FOOTER' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>',
+    ]);
+
+    ?>
+    <div class="flex-list" style="--col-count: 3">
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'text',
+                'HINT' => 'text hint',
+                'NAME' => 'input_name',
+                'VALUE' => '10',
+                'PLACEHOLDER' => 'number',
+                'LABEL' => 'Test input',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'text',
+                'HINT' => 'text hint',
+                'NAME' => 'input_name',
+                'VALUE' => '10',
+                'PLACEHOLDER' => 'number',
+                'LABEL' => 'Test input',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:select', [
+                'HINT' => 'text hint',
+                'NAME' => 'select',
+                'LABEL' => 'select',
+                'OPTIONS' => [
+                    [
+                        'ID' => '1',
+                        'NAME' => 'Значение выпадающего списка 1',
+                    ],
+                    [
+                        'ID' => '2',
+                        'NAME' => 'Значение выпадающего списка 2',
+                    ],
+                    [
+                        'ID' => '3',
+                        'NAME' => 'Значение выпадающего списка 3',
+                    ],
+                    [
+                        'ID' => '4',
+                        'NAME' => 'Значение выпадающего списка 4',
+                    ],
+                    [
+                        'ID' => '5',
+                        'NAME' => 'Значение выпадающего списка 5',
+                    ],
+                ]
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'checkbox',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'agreement2',
+                'VALUE' => 'Y',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'checkbox',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'agreement',
+                'VALUE' => 'Y',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'checkbox',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'agreement',
+                'VALUE' => 'Y',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio',
+                'VALUE' => 'radio1',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio',
+                'VALUE' => 'radio2',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio',
+                'VALUE' => 'radio3',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+
+
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-stroke',
+                'VALUE' => 'radio4',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-stroke',
+                'VALUE' => 'radio5',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-stroke',
+                'VALUE' => 'radio6',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+
+
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-material',
+                'VALUE' => 'radio7',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-material',
+                'VALUE' => 'radio8',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-material',
+                'VALUE' => 'radio9',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+    </div>
+
+    <div class="flex-list" style="--col-count: 7;">
+        <div class="flex-list-item"></div>
+        <div class="flex-list-item">bordered</div>
+        <div class="flex-list-item">bordered radius</div>
+        <div class="flex-list-item">bordered round</div>
+        <div class="flex-list-item">material</div>
+        <div class="flex-list-item">material radius</div>
+        <div class="flex-list-item">material round</div>
+        <?
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'test ',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+
+        ?>
+    </div>
+
+
+    <div class="flex-list" style="--col-count: 1;">
+        <?
+
+
+
+
+
+
+
+
+        ?>
+    </div>
+</div>
+
+<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
\ No newline at end of file
diff --git a/tests/flex-kit.php b/tests/flex-kit.php
new file mode 100644
index 0000000..8a1c772
--- /dev/null
+++ b/tests/flex-kit.php
@@ -0,0 +1,293 @@
+<?php
+?>
+<style>
+    div {
+        border: 1px solid hsl(195, 100%, 50%);
+        background: aliceblue;
+    }
+    * {
+        box-sizing: border-box;
+    }
+</style>
+<link rel="stylesheet" href="./../assets/flex-kit/flex-kit.css?<?=time()?>">
+
+.flex-line
+<div class="flex-line">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-line //cell .flex-col
+<div class="flex-line">
+    <div class="flex-col">
+        <div>1</div>
+        <div>1</div>
+        <div>1</div>
+        <div>1</div>
+    </div>
+    <div></div>
+    <div></div>
+    <div class="flex-line">
+        <div class="flex-col">
+            <div>X</div>
+            <div>************************</div>
+            <div>X</div>
+            <div class="flex-line-wrap">
+                <div class="flex-cell-full-content flex-line-wrap flex-col-count" style="--flex-col-count: 3;">
+                    <div>X</div>
+                    <div>X<br>X</div>
+                    <div>X</div>
+                    <div>X</div>
+                    <div>X</div>
+                    <div>X</div>
+                    <div>X<br>X<br>X</div>
+                    <div>X</div>
+                </div>
+            </div>
+            <div class="flex-line">
+                <div class="flex-cell-full-content flex-line-wrap" >
+                    <div>X</div>
+                    <div>X<br>X</div>
+                    <div>X</div>
+                    <div>X</div>
+                    <div>X</div>
+                    <div>X</div>
+                    <div>X<br>X<br>X</div>
+                    <div>X</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="flex-cell-full-content">
+        X
+    </div>
+</div>
+.flex-line // cell: .flex-cell-full-content
+<div class="flex-line">
+    <div></div>
+    <div class="flex-cell-full-content"></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-line // cell: .flex-cell-full-content (2 cell)
+<div class="flex-line">
+    <div></div>
+    <div class="flex-cell-full-content"></div>
+    <div></div>
+    <div class="flex-cell-full-content"></div>
+</div>
+
+.flex-col
+<div class="flex-col">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+
+
+.flex-line-wrap
+<div class="flex-line-wrap">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+
+.flex-line-wrap --flex-col-count:5
+<div class="flex-line-wrap flex-col-count" style="--flex-col-count:5;">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-line-wrap --flex-col-count:10
+<div class="flex-line-wrap flex-col-count" style="--flex-col-count:10">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-line-wrap --flex-col-count:2
+<div class="flex-line-wrap flex-col-count" style="--flex-col-count:2">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-line-wrap --flex-col-count:27
+<div class="flex-line-wrap flex-col-count" style="--flex-col-count:27">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-line-wrap --flex-col-count:5 #kirpich
+<style>
+    #kirpich > div:nth-child(20n+1) {
+        --flex-col-count:20;
+    }
+    #kirpich > div:nth-child(20n+6) {
+        --flex-col-count:6;
+    }
+    #kirpich > div:nth-child(20n+11) {
+        --flex-col-count:10;
+    }
+</style>
+<div id="kirpich" class="flex-line-wrap flex-col-count" style="--flex-col-count:5">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-line-wrap --flex-col-count:27; --flex-aspect-ratio:0.5
+<div class="flex-line-wrap flex-col-count flex-aspect-ratio" style="--flex-col-count:27; --flex-aspect-ratio:0.5">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-line-wrap --flex-col-count:4; --flex-aspect-ratio:3
+<div class="flex-line-wrap flex-col-count flex-aspect-ratio" id="test1" style="--flex-col-count:4; --flex-aspect-ratio:3">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div><div></div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-line-wrap --flex-col-count:5; --flex-aspect-ratio:2
+<div class="flex-line-wrap flex-col-count flex-aspect-ratio" id="test1" style="--flex-col-count:5; --flex-aspect-ratio:2">
+    <div><div><div>1</div></div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+.flex-col-wrap --flex-col-count:5; --flex-line-count:3; height: 200px;
+<div class="flex-col-wrap flex-line-count flex-col-count" style="--flex-col-count:5; --flex-line-count:3; height: 200px;">
+    <div><div>1</div></div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+overflow
+<div class="flex-col" style="height: 300px;">
+    <div class="flex-line">
+        <div></div>
+        <div class="flex-cell-full-content"></div>
+        <div></div>
+    </div>
+    <div class="flex-cell-full-content flex-col" style="overflow-y: scroll;">
+        <div class="flex-col">
+            <?
+            foreach (range(1, 20) as $i) {
+                echo "<div>text $i</div>";
+            }
+            ?>
+        </div>
+    </div>
+    <div class="flex-line">
+        <div></div>
+        <div class="flex-cell-full-content"></div>
+        <div></div>
+    </div>
+</div>
+
+chat
+
+<div id="chat" style="height: 300px;" class="flex-col">
+    <div class="chat-header flex-line">
+        <div class="header flex-line flex-cell-full-content">
+            <div class="left-block"></div>
+            <div class="title flex-cell-full-content">Чат города Хэдберн</div>
+            <div class="right-block"></div>
+        </div>
+    </div>
+    <div class="chat-content flex-col flex-cell-full-content" style="overflow-x: auto; overflow-y: visible;">
+        <div class="room-wrapper flex-col"><div class="one-mess system"><span class="date">04:10:02</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess system"><span class="date">05:00:01</span><span> : </span><span class="msg">Через 10 минут состоится турнир в <b><i>левом зале</i></b> малого колизея на <b><i>1 уровне</i></b> и <b><i>купленных свитках</i></b></span></div><div class="one-mess system"><span class="date">05:10:02</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess system"><span class="date">06:00:02</span><span> : </span><span class="msg">Через 10 минут состоится турнир в <b><i>левом зале</i></b> малого колизея на <b><i>2 уровне</i></b> и <b><i>случайных свитках</i></b></span></div><div class="one-mess system"><span class="date">06:10:02</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess system"><span class="date">07:00:02</span><span> : </span><span class="msg">Через 10 минут состоится турнир в <b><i>левом зале</i></b> малого колизея на <b><i>1 уровне</i></b> и <b><i>случайных свитках</i></b></span></div><div class="one-mess system"><span class="date">07:10:02</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess system"><span class="date">08:00:01</span><span> : </span><span class="msg">Через 10 минут состоится турнир в <b><i>левом зале</i></b> малого колизея на <b><i>2 уровне</i></b> и <b><i>купленных свитках</i></b></span></div><div class="one-mess system"><span class="date">08:10:01</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess system"><span class="date">09:00:02</span><span> : </span><span class="msg">Через 10 минут состоится турнир в <b><i>левом зале</i></b> малого колизея на <b><i>1 уровне</i></b> и <b><i>купленных свитках</i></b></span></div><div class="one-mess system"><span class="date">09:10:03</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess system"><span class="date">10:00:02</span><span> : </span><span class="msg">Через 10 минут состоится турнир в <b><i>левом зале</i></b> малого колизея на <b><i>2 уровне</i></b> и <b><i>случайных свитках</i></b></span></div><div class="one-mess system"><span class="date">10:10:03</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess system"><span class="date">11:00:02</span><span> : </span><span class="msg">Через 10 минут состоится турнир в <b><i>левом зале</i></b> малого колизея на <b><i>1 уровне</i></b> и <b><i>случайных свитках</i></b></span></div><div class="one-mess system"><span class="date">11:10:02</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess system"><span class="date">12:00:01</span><span> : </span><span class="msg">Через 10 минут состоится турнир в <b><i>левом зале</i></b> малого колизея на <b><i>2 уровне</i></b> и <b><i>купленных свитках</i></b></span></div><div class="one-mess system"><span class="date">12:10:03</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess system"><span class="date">13:00:02</span><span> : </span><span class="msg">Через 10 минут состоится турнир в <b><i>левом зале</i></b> малого колизея на <b><i>3 уровне</i></b> и <b><i>купленных свитках</i></b></span></div><div class="one-mess system"><span class="date">13:10:02</span><span> : </span><span class="msg"><b>Турнир</b> в левом зале малого колизея <b>не состоялся</b> из-за малого количества участников</span></div><div class="one-mess"><span class="date">13:46:02</span><span> : </span><span class="msg">К нам приходит <span class="user-login" data-login="bellord">bellord</span></span></div></div></div>
+    <div class="chat-footer flex-col"><div class="flex-line"><div class="flex-cell-full-content"><input type="text" name="mess" class="mess-text action--keypress-SendMessage"></div><div><button type="button" class="note-send action--click-SendMess">Ok</button></div><div><button type="button" class="select-smile action--click-SelectSmile"></button></div></div></div>
+</div>
\ No newline at end of file