/* stylelint-disable */


/*list { position: relative; z-index: 0; padding: 10px; overflow-y: auto; overflow-y: overlay; -webkit-overflow-scrolling: touch; width: 100%; overflow-x: hidden; }
*/
list[demo] { padding: 40px; }




.drop .k-detail-row { display: none; }
[color]:active svg { transform: translateY(1px) }
[color] svg { width: 20px; height: 20px; }
demo_wrap { display: flex; padding: 20px; flex-wrap: wrap; align-items: center; overflow: hidden; position: relative; box-shadow: 0 0 0 1px var(--border-color); background: var(--background); }
demo_wrap[fab] { height: 250px; }
demo_column { margin: 20px; display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; padding: 30px; border-radius: 15px; background: var(--hover) }
demo_wrap .button { margin: 5px; }
view[icons] scroller { overflow: auto; overflow: overlay; display: flex; height: 100%; flex-direction: column; z-index: 1; }
view[icons] scroller:after { content: ""; height: 25%; width: 100%; display: flex; flex-shrink: 0; }


count { font-weight: 700; padding: 0 15px; }


grid { position: relative; /* padding:20px; */ display: flex; flex-direction: column; flex-shrink: 0; width: 100%; flex-shrink: 0; }
grid.no_result { visibility: hidden; height: 0; }
grid toolbar { position: sticky; top: 0 }
grid wrap { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }


grid wrap[mini] { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); padding: 0; margin: 20px; overflow: hidden; grid-gap: 1px; }
grid wrap[mini] div { font-size: 18px; height: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--border-color); background: var(--background); }



grid wrap item { overflow: hidden; cursor: pointer; padding: 15px; flex-direction: column; transition: .125s; position: relative; align-items: center; justify-content: center; display: flex; animation: appera forwards .125s; background: var(--hover); margin: 5px; border-radius: 10px; }
grid wrap item.selected { background: var(--main-color); color: #fff; }
grid wrap item text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; width: 100%; text-align: center; }
grid wrap item:hover { background-image: var(--over-color) }
grid wrap item:active icon { transform: translateY(1px); }
grid wrap item icon { margin: 0 0 10px }
grid wrap item tag { display: none }



demospace { flex: 1; height: 150px; background-color: var(--hover); margin: 15px; display: flex; align-items: center; justify-content: center; border-radius: 15px; }
demospace[tip] { line-height: 1.4; text-align: center; height: auto; background: none; padding: 15px; flex-direction: column }

.k-grid td > wrap[grid] { display: flex }

.tab_strip.round > wrap > ul > li.selected.top { background: red; }
.tab_strip.round > wrap > ul > li.selected.main_zone { background: #2b6490 }
.tab_strip.round > wrap > ul > li.selected.bottom_zone { background: #d8ae00 }


space { display: flex; flex-shrink: 0 }
    space[size="10"] { width: 10px; height: 10px; }
    space[size="20"] { width: 10px; height: 10px; }
    space[size="30"] { width: 10px; height: 10px; }




view > form { height: auto; min-height: 100%; flex-shrink: 0 }





/*switch button*/

switch a.button text{position:static;}
switchable [view="list"] list > wrap block { padding:calc(var(--space)/4); }

switchable switch wrap { padding: 0 var(--space); }
switchable.hide switch wrap { padding: var(--space) 0; order: 2 }

switchable switch icon ~ wrap,
switchable.hide switch icon ~ wrap { padding: 0; }


.sections > form .form_fields { flex-grow: 0; }




/*left navigation*/

view[navigation] nav {flex-grow: 1;display: flex;flex-direction: column;overflow: auto;overflow-x: hidden;}
view[navigation] nav ul{flex-grow: 1;}
view[navigation] nav > ul{height:100%;}
view[navigation] nav ul ul{}








view[navigation] nav[launcher] > ul > li{font-weight:bold;}
view[navigation] nav[launcher] ul li{display:flex;flex-wrap:wrap;align-items: center;width: 100%;margin: 0;}
view[navigation] nav[launcher] ul li a,
view[navigation] nav[launcher] ul li > text{display:flex;align-items: center;/*width: 100%;*/padding: 0 15px;flex-grow: 1;min-height: 40px;}
view[navigation] nav[launcher] ul ul li{padding-left:0px;}
view[navigation] nav[launcher] ul ul li a{padding-left:30px;}
view[navigation] nav[launcher] ul ul li a icon { margin: 5px; }

view[navigation] nav[launcher] ul li .form_fields{margin: 15px 10px;padding: 0;}
view[navigation] nav[launcher] ul li .form_fields .ant-select{margin: 0;width: 100%;}

view[navigation] nav[launcher] ul li.separator {height: 1px;min-height: 0;box-shadow: 0 1px 0 0 rgb(0 0 0 / 10%);margin: 10px 0;pointer-events: none;}

view[navigation] nav[launcher] ul li > a:hover { background: var(--outline-light); }

view[navigation] nav[launcher] ul li.selected{color:inherit;background: var(--outline-light);}
view[navigation] nav[launcher] ul li.selected a{color: #fff; background: var(--main-color);}
view[navigation] nav[launcher] > ul > li.selected{}
view[navigation] nav[launcher] > ul > li a.selected{}

view[navigation] nav[launcher] ul ul li wrap { /*width: 100%;*/ display: flex; flex-wrap: wrap; padding: 10px 10px 10px 10px; gap: 5px; /* justify-content: flex-end; */ }
view[navigation] nav[launcher] ul ul li wrap .button { margin: 0px;}

view[navigation] nav[launcher] li[expanddefault], 
view[navigation] nav[launcher] li[expanddefault].selected, 
view[navigation] nav[launcher] li[expanddefault]:hover, 
view[navigation] nav[launcher] li[expanddefault] li { background: none; cursor: default; }

/* stylelint-enable */