.list_view_wrapper{height:100%; width:100%;  display:flex; flex-direction:column;/*overflow: hidden; */ justify-content: space-between;     position:relative;  flex:1;}




list.hide,
.hide.k-widget,
.empty list,
.empty .k-widget

{display:none}


list{position: relative; z-index: 0; display:flex; flex-direction:column; min-height:100%; /*padding: 10px;*/  /*overflow-y: auto;*/ /*overflow-y: overlay;*/ /*-webkit-overflow-scrolling: touch; width:100%; overflow-x:hidden*/  }
list > wrap{width:100%; position:relative;  display: flex;  /*align-items: start;*/    gap: 10px;}

[multy] list > wrap { padding-bottom:0}


list[compact] {padding: 0;}
list[compact] > wrap {padding-bottom: 0;}

@keyframes drop_anim{to{transform:scale(.9)}}

drop[helper]{display:none;  position:absolute; z-index:9; height:100%; width:100%; top:0; left:0; color:var(--main-color); align-items:center; justify-content:center;}
drop[helper] overlay{background:var(--main-color); position:absolute;height:100%; width:100%; opacity:.8}
drop[helper] circle{position:absolute;  height:320px; width:320px;  background:#fff; display:flex; border-radius:50%; animation: drop_anim .425s infinite alternate}

.drop > drop[helper],
.dragover > drop[helper]

{display:flex;  }

.drop.enter:not(.empty) > drop[helper]{display:none;  }


.k-grid-content tr.indicator td{  box-shadow:none }
.k-grid-content tr.indicator{ background:var(--main-color);}
indicator {border:1px dotted;}

/*.drop.enter.list_view_wrapper:after{content:''; position:absolute; height:100%; width:100%; background:red; opacity:.5}*/

listblock {
    float: left;
    box-sizing: border-box;
    position: relative;
    width: 180px;
    position: relative;
    overflow: hidden;
    background: var(--background);
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px var(--outline);
} 


listblock[draggable="true"]:active { cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;}

listblock[adaptive] section{flex-wrap:wrap}
listblock[adaptive] section wrap{display:flex;align-items:center;}
listblock[adaptive] section wrap[adaptive]{padding:15px 0}
listblock[adaptive] section separator[horizontal]{display:none;}
/*listblock[adaptive] section wrap{flex:1 1 100%;}*//*listblock[adaptive] section wrap{flex:1 1 100%;}*/
listblock item {position: relative;transition: 0.125s; display:flex; flex-direction:column; width:100%;  overflow:hidden; height:100%;  }
listblock item > a{ position: relative; display:flex; flex-direction:column; width:100%;  overflow:hidden;height:100%; }
listblock[space] item {padding:10px;}
listblock[space] group {overflow: hidden;}
listblock group[wrap="nowrap"] {flex-wrap: nowrap;}
listblock item thumb{position:relative; width:100%; height:0; display:flex; overflow:hidden; border-radius:5px; /*color:#fff;*/ cursor:pointer; }

/*listblock item thumb[media]{color:#fff;}
*/
listblock item thumb:active{transform:translateY(1px)}
listblock item wrap[picture]{cursor:pointer;width:100%;position:relative;display:flex;flex-direction:column;}
listblock item wrap[picture] thumb{cursor:default}
listblock item wrap[picture] thumb:active{transform:none;}

listblock item group[media] thumb:active{transform:none}
listblock item group[media] thumb {cursor:default}
/*listblock:hover item thumb[content] wrap picture {opacity:0.7}*/

listblock item thumb wrap {position: absolute;width: 100%;height: 100%; overflow: hidden;background:linear-gradient(to top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 100%);background: var(--over-color);}
listblock item thumb wrap picture{position:absolute; width:100%; height:100%; overflow:hidden; background-size:cover;background-position: center center;background-repeat: no-repeat; }
listblock item thumb[content] wrap picture{opacity:0.7}
listblock item thumb[media] wrap{/*background:#000*/}
listblock item .hide .button.center{position: absolute;padding: 0;}


listblock item action {
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
listblock item action panel {
    display: flex;
    align-items: center;
    padding: 5px;
    margin-top: auto;
    width: 100%;
    justify-content: flex-end;
}

listblock item .hide {
    opacity: 0;
    transition: .125s;
    transition-property: transform, opacity;
    background: rgba(0,0,0,.5);
    z-index: 9;
}

listblock:hover item .hide {
    opacity: 1;
    /*transform: translateX(0)*/
}


/*listblock item thumb wrap action{position:absolute; width:100%; height:100%; display:flex; flex-direction:column;}

listblock item thumb wrap action panel{ display:flex;  width:100%; height: 40px;align-items: center; }

listblock item thumb wrap action panel .hide{ opacity:0; transform:translateY(-10px); transition:.125s; transition-property:transform, opacity;}
listblock item thumb wrap action panel .hide:nth-child(2){transition-delay:.05s}
listblock item thumb wrap action panel .hide:nth-child(3){transition-delay:.1s}
listblock item thumb wrap action panel .hide:nth-child(4){transition-delay:.15s}

listblock:hover item thumb wrap action panel .hide,
listblock.k-state-selected item thumb wrap action panel .hide
{opacity:1; transform:translateX(0)}*/
/*listblock:hover item thumb[media] action{ background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)}*/
/*listblock item thumb wrap action panel[bottom]{margin-top:auto;}
listblock item thumb wrap action panel[bottom] text{margin:0 10px;}*/
/*action group*/
listblock item action[group] {
    position: absolute;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

listblock item action[group] panel{ display:flex; width:100%;align-items: center;height: 40px; z-index:1 }
listblock item action[group] panel > div.group{ display:flex;align-items: center;padding:0 7px }

listblock item action[group] panel[center]{height:100%;justify-content:center;}
listblock:hover item action panel[center], listblock.k-state-selected item action panel[center]{background:rgba(0,0,0, 0.5)}


listblock item action[group] panel[bottom]{margin-top:auto;}
listblock item action[group] panel/*[bottom]*/ text{margin:0 10px;}

listblock item action[group]  .hide{ opacity:0; transform:translateY(5px); transition:.125s; transition-property:transform, opacity;}
listblock item action[group]  .hide:nth-child(2){transition-delay:.05s}
listblock item action[group]  .hide:nth-child(3){transition-delay:.1s}
listblock item action[group]  .hide:nth-child(4){transition-delay:.15s}

listblock:hover item /*thumb wrap*/ action[group]  .hide,
listblock.k-state-selected item /*thumb wrap*/ action[group]  .hide
{opacity:1; transform:translateX(0)}


/*listblock:hover item thumb[media] action{ background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)}*/



listblock:hover item thumb wrap[accent][hide] > icon{display:none}
listblock.k-state-selected item thumb wrap[accent][hide] > icon {display:none}

listblock item .button icon {
    margin: 0;
}

listblock item action[group] panel group{margin:0 0 0 5px;}
listblock item action[group] group[right]{margin: 0 5px 0 auto;}
listblock item action[group] .right{margin-left:auto;}


listblock item thumb[ratio='16:9']{padding-bottom:56.25%;}
listblock item thumb[ratio='9:16']{padding-bottom:177.77%;} /* portrait */
listblock item thumb[ratio='1:1']{padding-bottom:100%;} /* square */
listblock item thumb[ratio='4:3']{padding-bottom:75%;}
listblock item thumb[ratio='3:4']{padding-bottom:133.33%;}
listblock item thumb[ratio='1:2']{padding-bottom:50%;}


listblock item detail{padding:10px 0 0; display:flex; flex-direction:column; flex-wrap:wrap; overflow:hidden}
listblock item detail text{white-space:nowrap; /*overflow:hidden; width:100%;*/ text-overflow:ellipsis; line-height:1.3; position:relative;}
listblock item detail[horizontal]{flex-direction:row; flex-wrap:nowrap; align-items:center;}
listblock item detail[horizontal] > wrap{display:flex; overflow:hidden; flex-direction:column; /*align-items:center;*/}



listblock item text{white-space:nowrap;text-overflow: ellipsis; overflow: hidden;max-width: 100%;}
text[wrap]{white-space:normal}
text[nowrap]{white-space:nowrap}
text[medium]{font-size:18px;}
text[large]{font-size:24px;}
text[light]{opacity:.5}
text[digit]{letter-spacing: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
text[error]{color:var(--error-color);}
text[accent]{color:var(--main-color)}

text[marquee]{max-width: 100%;overflow: hidden;text-overflow: ellipsis;}
text[marquee].start{display:flex}

text[marquee] span{position:relative; white-space: nowrap;padding-right:20px;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both; }
.k-ie11 text[marquee] span{display:inline-block; }
text[marquee].start span{animation-name:marquee; }
/*text[marquee]:hover span{float:left; }*/

text[gradient]{display:flex;  -webkit-mask-image: linear-gradient(to right,#000 90%,rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right,#000 90%,rgba(0,0,0,0) 100%); /*-webkit-mask-image: linear-gradient(to top,rgba(0,0,0,0) 20px,#000 100%);mask-image: linear-gradient(to top,rgba(0,0,0,0) 20px,#000 100%);*/}

@keyframes marquee{to{transform:translateX(-100%)}}

text[preview],text[navigate]{cursor:pointer;}
text[preview]:hover,text[navigate]:hover{text-decoration:underline}
text[preview]:active,text[navigate]:active{transform:translateY(1px)}

listblock:hover  {/*background:rgba(136,136,136,0.1);background:var(--hover) */ box-shadow:var(--elevation_2); z-index:2}
listblock:hover thumb[content] picture{opacity:.4}
listblock:not([accent]):not([highlight]).k-state-selected,
listblock.drop { border: 1px dotted;padding: 9px;}

listblock[highlight] {}
listblock[highlight]:hover item thumb[media] wrap,
listblock[highlight].k-state-selected item thumb[media] wrap
 {
    background: var(--main-color-dark);

}

listblock[highlight] .extra{position:absolute;z-index:1}

listblock[highlight]:hover item > thumb[media] wrap picture,
listblock[highlight].k-state-selected item > thumb[media] wrap picture,
listblock[highlight]:hover item .media_cont > picture[media]
{

    -webkit-mask-image: linear-gradient(to bottom,#000 50%,rgba(0,0,0,0) 100%);
}

listblock[highlight]:hover item .media_cont > picture[media]{opacity:0.5}

/*listblock[highlight]{ background:var(--background);box-shadow: 0 0 0 1px var(--border-color);margin:5px; border-radius:15px }*/
/*listblock[highlight]:hover,listblock[highlight].k-state-selected  { 
    color:#fff}*/
/*listblock[highlight][space]{padding:0}
*/listblock[accent].k-state-selected{ background:var(--main-color-dark) }

listblock[highlight]:hover item section,listblock[highlight].k-state-selected item section {background:none;box-shadow:none;}
listblock[highlight]:hover toolbar, listblock[highlight].k-state-selected toolbar {box-shadow:none}

listblock[list]{width: 100%;box-shadow:0 1px 0 0 #e4e4e4;box-shadow: 0 -1px 0 0 var(--border-color); border-radius:0;padding:10px;}
group listblock[list]:first-child{box-shadow:none}

listblock[list] item{display:flex; flex-direction:row; align-items:center;}
listblock[list] item media{width:50px; flex-shrink:0}
listblock[list] item media[wide]{width:70px}
listblock[list] item detail{padding:0 0 0 10px;justify-content:center}
listblock[list] item  action .hide{opacity:0;}
listblock[list] item thumb {border-radius:25px;}
listblock[list]:hover item  action .hide,
listblock[list].k-state-selected item  action .hide

{opacity:1; transform: translateY(0);}

group listblock[list]:hover  {background-image: var(--over-color);box-shadow:0 0 0 1px var(--border-color);background-color: var(--background);border-radius: 10px;}
listblock[list]:hover + listblock {  box-shadow: none; }

listblock[list]:hover item  action separator.hide,
listblock[list].k-state-selected item  action separator.hide

{opacity: .15;}

listblock[list] item action .hide {opacity: 0;transform: translateX(5px);transition: .125s;transition-property: transform, opacity;}
listblock[list] item action{position:relative; width:auto;}
listblock[list] item  action .hide:nth-last-child(2) {transition-delay: .05s;}
listblock[list] item  action .hide:nth-last-child(3) {transition-delay: .1s;} 
listblock[list] item  action .hide:nth-last-child(4) {transition-delay: .15s;} 

listblock[list] indicate + media
{-webkit-mask-image: radial-gradient(circle at 5px 5px, transparent 9px, black 10px);mask-image: radial-gradient(circle at 5px 5px, transparent 9px, black 10px);}

listblock[list].notification.read:hover item {
    opacity: 1;
}

listblock item section { box-shadow:0 0 0 1px var(--border-color); display:flex; flex-direction:column; background:var(--context); padding:10px;     width: 100%;}
listblock item section > text{margin:0 0 5px}
listblock item section space{display:flex;margin:0 0 10px}
listblock item section[vertical] space{margin:0 0 20px;}
listblock item segment { }
listblock item section .form_fields{padding:0; margin:5px 0}
listblock item section .form_fields .section_title {padding:0 10px 0 0}
listblock item section group:empty:after{content:"- Unset -";    padding: 5px 0;margin: 0 3px 3px 0;}


listblock item section wrap[grow]{display:flex;flex-grow:1}

listblock item section[horizontal]{flex-direction:inherit;position:relative;align-items:center;}
listblock item section[horizontal] detail[grow] text{ padding:0}
listblock item section[vertical]{padding:25px}
listblock item section[group]{padding:20px}
listblock item section[group] detail{padding:0}
listblock toolbar {box-shadow: none !important;}


listblock item .listblock_cont {position: relative;width: 100%;/*height: 120px;*/ overflow: hidden;border-radius: 7px;}



listblock item .listblock_cont[ratio="1:1"]{aspect-ratio:1} 
listblock item .listblock_cont[ratio="16:9"]{aspect-ratio:16/9} 
listblock item .listblock_cont[ratio="5:4"]{aspect-ratio:1} 
listblock item .listblock_cont[ratio="4:3"]{aspect-ratio:1} 




listblock img { transition:.125s;}
listblock:hover img {transform: scale(1.03);}
listblock:active img {transform:none}
/*listblock:hover { box-shadow: 0 8px 15px rgb(141 141 141 / 36%);}*/
listblock item picture{height:100%; width:100%; position:relative; display:flex; overflow:hidden; align-items:center; justify-content:center; text-align:center; flex-direction:column }
listblock item picture[data-mask]
 {
  -webkit-mask-image: linear-gradient(black 50%, transparent);
  mask-image: linear-gradient(black 50%, transparent);
}


/*block_horizontal*/

listblock[horizontal] item section{padding:0;}
listblock[horizontal] item wrap{padding:0 10px;display:flex;align-items:center;overflow:hidden;width:100%}
listblock[horizontal] item thumb[select]{min-width:60px;width:60px;height:60px;color:#fff; border-radius:0;display:flex;justify-content:center;align-items:center;}
listblock[horizontal] item detail {padding:0 10px}
listblock[horizontal] item detail[grow]{flex-direction:initial;flex-wrap:initial;align-items:center}
listblock[horizontal] item detail[grow] b{margin-right:10px;}
listblock[horizontal] picture{min-width:50px;width:50px;height:50px;color:#fff; border-radius:50%;display:flex;justify-content:center;align-items:center;}
listblock[horizontal] item action {position:relative}

listblock item thumb[select] {background:var(--main-color);}
listblock item thumb[select] wrap[accent]{background:#4e87de;background:var(--main-color);}

listblock item thumb[select] wrap > icon{position:absolute;width:100%; height:100%;margin:auto}


listblock[highlight] item thumb[select]{background:var(--main-color-dark)}
/**/


/**/

.k-ie11 listblock item .media_cont picture[media] {display:flex; flex-wrap:wrap;}
.k-ie11 listblock item cover {width:23px; min-width:23px;}



listblock item .media_cont{position:relative;width:100%;} /* to do */
listblock item .media_cont.simple:active{transform:translateY(1px)}
listblock item .media_cont.simple{width:50px; flex-shrink:0} 

listblock item .media_cont thumb wrap{border-radius:7px;width:calc(100% - 2px); height:calc(100% - 2px)}
listblock item .media_cont cover{margin:0;height: auto;}
listblock item .media_cont picture[media]{display:grid;/*grid-template-columns:50% 50%;*/grid-auto-rows: 1fr;}
listblock item .media_cont picture[media][group] cover picture:after{content:"";position:absolute;width:100%;height:100%;background:#000;opacity:0.5}
listblock item .media_cont picture[horizontal]{grid-template-columns:33.33% 33.33% 33.33%;}

listblock item cover{float:left;margin:1px;box-sizing:border-box;position:relative;width:auto;position:relative;}
listblock item cover thumb:active{transform:translateY(0)}
listblock item cover thumb wrap {background: rgba(136, 136, 136, 0.25);}

listblock item playlist{position:relative;display:flex;flex-direction:column;width:100%;padding:0 10px;}
listblock item playlist decor div{width:100%;height:8px;display:flex;position:relative;background-size:cover;background-position:bottom;}
listblock item playlist decor{border-bottom-left-radius:3px;border-bottom-right-radius:3px;overflow:hidden;opacity:0.8}
listblock item playlist decor[small]{margin:0 10px}
listblock item playlist decor[small]{opacity:0.5}

listblock item wrap[group]{display:flex;align-items:center;overflow:hidden} 
listblock item wrap[group] text{white-space:nowrap;/*width:auto;overflow:inherit*/}

dot{padding:0 10px; font-weight:700}
dot::after{content:"\00b7";}
icon + dot{padding-left:5px}

@supports(display:grid) {
[view="listblock"] list > wrap{display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));grid-auto-rows: 1fr; }

[view="list"] list > wrap{display: grid;grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));grid-auto-rows: 1fr; }

[view="grid"] list[template='large'] > wrap{display: grid;grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));grid-auto-rows: 1fr; }
[view="grid"] list[template='common'] > wrap{display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
[view="grid"] list[template='small'] > wrap{display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }


[view="block"] list[template='portrait'] > wrap{grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
[view="block"] list[template='common'] > wrap{grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
[view="block"] list[template='large'] > wrap{grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@supports(display:flex){
[display='flex'] list > wrap {display:flex; flex-direction:column;}
}
/*list[space] > wrap {grid-gap:10px;}*/

[view="listblock"] list[template='line'] > wrap{display: grid;grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));grid-auto-rows: 1fr; }

[view="mini"] list > wrap {display: grid;grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));grid-auto-rows: 1fr;}

/*[view="view"] test > wrap{ display: grid;grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));grid-auto-rows: 1fr;}*/

listblock{width: auto;} 


/*@media (max-width: 600px) {

     [view="grid"] list[template='common'] > wrap{grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));}
}*/

}







/*temp*/



/*listblock item thumb picture{ background-image:url("../images/demo_thumb/Layer_1.jpg")}*/

/*listblock:nth-child(1) item thumb picture{ background-image:url("../images/demo_thumb/Layer_0.jpg")}
listblock:nth-child(1) item thumb:after{ content:"";  position:absolute; width:100%;height:100%; background-image:url("../images/demo_thumb/live_thumb_0.jpg");background-size:cover;background-position: center top; }

listblock:nth-child(1) item:hover thumb:after{ animation: thumb_animation steps(9, end) .925s infinite  }
@keyframes thumb_animation{to{background-position:center bottom}}*/


/*listblock:nth-child(2n) item thumb picture{background-image:url("../images/demo_thumb/Layer_2.jpg")}
listblock:nth-child(3n) item thumb picture{background-image:url("../images/demo_thumb/Layer_3.jpg")}
listblock:nth-child(4n) item thumb picture{background-image:url("../images/demo_thumb/Layer_4.jpg")}
listblock:nth-child(5n) item thumb picture{background-image:url("../images/demo_thumb/Layer_5.jpg")}
listblock:nth-child(6n) item thumb picture{background-image:url("../images/demo_thumb/Layer_6.jpg")}
listblock:nth-child(7n) item thumb picture{background-image:url("../images/demo_thumb/Layer_7.jpg")}
listblock:nth-child(8n) item thumb picture{background-image:url("../images/demo_thumb/Layer_8.jpg")}*/

/*listblock[disabled]{ }
listblock[disabled] item thumb picture{background-image:none}

listblock[disabled] item thumb wrap{background:var(--over-color)}*/

/**/

listblock.notification.error item thumb[select] wrap[accent]{background:var(--error-color)}
listblock.notification.success item thumb[select] wrap[accent]{background:var(--new-color)}
.notification.read item{opacity:0.6}
.notification_list {gap:0; padding:10px; max-height: calc(100vh - 180px); overflow: overlay;}
/*.notification_container {
    width: 550px;
}*/

.desktop .notification_list ::-webkit-scrollbar-thumb {
    display: none;
}
.desktop .notification_list:hover ::-webkit-scrollbar-thumb {
    display: block;
}

listblock indicate{position:absolute;left:0;top:0;/*box-shadow:0 0 0 3px var(--background);*/width:10px;height:10px;border-radius:50px;z-index:5}
listblock.success indicate {background:var(--private-color)}
listblock.new  indicate {background:var(--private-color)}
listblock.error indicate {background:var(--error-color)}

/**/




/**/
@media screen and (max-width:1400px) {
    listblock[adaptive] section[horizontal]{padding:20px}
    listblock[adaptive] section wrap {flex:1 1 100%}
    listblock[adaptive] section wrap .input_cont > text {padding-left:0}
    listblock[adaptive] section wrap separator[hide] {display:none}
    listblock[adaptive] section separator[horizontal]{display:flex}

    }