/* windows */


:root{

    --dim:rgba(47, 47, 47, 0.8);
}
.window_container{height:100%; width:100%;    left: 0; position:absolute; display:none; top:0;}
.window_container.open{display:flex}
.window_container > div {height:100%;width:100%;position:absolute;z-index:9998;overflow:hidden;padding:10px;opacity:0;visibility:hidden;display:flex;align-items:center; flex-direction:column; justify-content:center;overflow:hidden;    background-color: rgba(255,255,255, .7);}
.window_container > div.no_overlay{background:none;pointer-events:none}
.window_container > div.no_overlay > div{pointer-events:all}
.window_container > div.open{opacity:1;visibility:visible;}
.window_container > div.moved{align-items:flex-start; justify-content:flex-start;}




.window_container > div > div{    border-radius: var(--radius-small); box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;display:flex;flex-direction:column;max-height:100%;max-width:100%;box-shadow:0px 20px 221px 0px rgba(0, 0, 0, 0.16);}
      .window_container > div.no_overlay > div { box-shadow:var(--elevation_2)}

.window_container > div > div > header{width:100%;min-height:var(--area);user-select:none;-webkit-user-select:none;cursor:default;position:relative;z-index:2;background:var(--main-color);display:flex;align-items:center;padding:0 10px; color:#fff; }
.window_container > div > div > header p{text-align:left;box-sizing:border-box;margin:0;padding:0 0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;    align-items: center;font-weight:700}
.window_container > div > div > header .button.close{margin-left:auto;}
.window_container > div > div > div{display:flex;flex-direction:column;max-height:100%;overflow:hidden;z-index:1}

.window_container > div > div > header group{flex-shrink:0}

.window_container [header="accent"] header {background:var(--main-color); color:#fff; box-shadow:none;}

/*.window_container > div.fullscreen{height: calc(100% - var(--area));
    bottom: 0;
    background: none;
    padding-top: 10px;
    --radius-small: 5px;}

*/



/*.window_container > div.fullscreen > div:not(.fullscreen) > div{display:none} 


*/

/*.window_container.fullscreen > div:not(.fullscreen) > div{display:none}*/ 

.window_container > div.fullscreen > div,.window_container > div.fullscreen > div > div, .window_container > div.fullscreen .window_cont{height:100%;width:100%;}

.window_cont{position:relative;display:flex;flex-direction:column;max-height:100%;width:100%;overflow:hidden;background:var(--background);}
.window_cont .form_container{padding:5px;white-space:normal;position:relative;max-height:100%; min-width: 260px;min-height: 120px;}
.window_cont form{display:flex;flex-direction:column;max-height:100%; min-height:100%; overflow:hidden;}
.window_cont .commandPanel{min-height:60px;box-sizing:border-box;box-shadow:0 0 0 1px var(--outline);z-index:1;display:flex;align-items:center;padding:0 15px;}


.window_cont[fixed='large'], view[fixed='large']{width:1240px; height:650px;}
.window_cont[fixed='medium'], view[fixed='medium']{width:700px; height:650px;}
.window_cont[fixed='small']{width:450px; }

.window_container > div.fullscreen[fixed='width'] > div {max-width:1550px;}
.window_container > div.fullscreen[fixed='largewidth'] > div {max-width:1620px;}

@media(max-width:490px)
{


    .window_cont[fixed='small'] {
      width: calc(100vw - 40px);
    }


}


@media(max-width:740px)
{

    .window_cont[fixed='medium'] {
      width: calc(100vw - 40px);
    }


}

@media(max-width:940px) {

    .window_cont[fixed='large'] {
       width: calc(100vw - 40px);
    }
}

/*.window_container.fullscreen{ height:calc(100% - var(--area)); bottom:0; --radius-small: 5px;}
*/

/*.window_container.fullscreen > .open:not(.fullscreen)

{    max-width: calc(100% - 20px);
    border-radius: var(--radius-small);
    left: 10px;
    height: calc(100% - 10px);}*/

/* ----- */


/* message_container */





.message_box{background:var(--context);display:flex;flex-direction:column;padding: 40px;}
.message_container{padding: 5px;display:flex;/* align-items:center; */flex-direction:column;margin-bottom: 35px; max-width: 50vw; overflow: hidden;line-height:1.5}
.message_container > icon{/* opacity:.2; *//* margin: 0 0 20px; */ display:none}

.message_container p{    font-size: 16px;    white-space:pre-line;}
.message_container h3{ font-size:16px; color:var(--main-color);margin:0; white-space: pre-wrap}

.message_box panel .button{min-width: 170px;}
.message_box panel {/* min-height:60px; */width:100%;position:relative;display:flex;align-items:center;box-sizing:border-box;user-select:none;display:flex;/* padding:0 15px; */z-index:99;/* justify-content:center; *//* flex-direction: column; *//*  */flex-wrap: wrap;gap: 5px;}
.message_box panel .button + .button {/* margin-left: 10px; */}

/* ----- */


/* form_container */

.form_container{height:100%;overflow:auto;overflow:overlay;-ms-overflow-style:-ms-autohiding-scrollbar;display:block;-moz-overflow-y:scroll;flex:1;-webkit-overflow-scrolling: touch; position:relative;z-index:1}

/*.k-ff.k-desktop *{    scrollbar-color: rgba(136, 136, 136, 0.25) transparent;

    scrollbar-width: thin;}*/

.k-ff.k-desktop .form_container{
    scrollbar-color: rgba(136, 136, 136, 0.25) transparent;
    overflow: scroll;
    scrollbar-width: thin;
}

.form_container[accent]{background:var(--main-color)}
.form_container[fab]{padding-bottom:110px;}

.form_container[highlight]
{background:var(--highlight)}

.form_container .section_group{width:100%;position:relative;display: flex;flex-wrap: wrap;flex: 1 1 100%;}
.form_container .section_group .sections{position:relative;padding:10px;/* flex-basis: 340px; */ width:390px; display:flex; flex-direction:column;}
.form_container .section_group .sections.flex {flex:1;}
.form_container .section_group .sections.auto{width:auto}
.form_container .section_group .sections.wide{
    /*flex: 2;*/
    /* max-width: 680px; */
    /* flex-basis: 580px; */
width:680px;

}
.form_container .section_group .sections.large {width:1020px;}

.form_container .section_group .sections.extra{width:100%;}

.form_container .section_group .sections.medium{width:520px;}

@media screen and (max-width: 750px) /* mobile */
{
.form_container .section_group .sections{width:100%;flex-basis: 100%;}
/*.window_container > div, .window_container > div.fullscreen{padding:0}
.window_container > div > div{border-radius:0}
*/
.message_container {max-width:100%}
.message_box panel .button{width:100%}
}


.form_container .section_group.highlight{padding:10px;}
.form_container .section_group.highlight .sections.special{  border-radius: 10px;  background: #FFECB3; color: #4E342E}
.form_container .section_group.highlight .sections.rounded{border-radius: 10px;}
.form_container .section_group.highlight .sections {
    background: var(--background);
    box-shadow:  0 0 0 1px var(--border-color);}

/* ----- */


/* section_group */

.section_group{max-width:100%; display:flex
}
.section_group .sections{max-width:100%;}
.section_group.fit {gap:20px}
.section_group.fit .sections{flex:1;}

.section_group.horizontal {flex-wrap:nowrap}

.section_group.horizontal .sections {flex-shrink:0; width:auto}

/* ----- */


/* form_fields */

.form_fields{box-sizing:border-box;display:block;position:relative;padding:5px;width:100%;display:flex;justify-content:flex-start;flex-wrap:wrap;/*flex:1;*/}
.form_fields.large{flex:2;overflow:hidden}
.form_fields.mini{flex:.5}
.form_fields.micro{flex:.25}
.form_fields.auto{flex-grow:initial; float:left; width:auto}
.form_fields .data_label{cursor:default;flex:1 100%;font-weight:700;margin:0 5px 5px; line-height:1}
.form_fields .data_help{cursor:default;flex:1 100%;    padding: 0 5px 5px; opacity:.7;    overflow: hidden;text-overflow: ellipsis; line-height:1.5}
.form_fields .data_info{cursor: default;flex: 1 100%;padding: 5px 5px 0 5px;overflow: hidden;text-overflow: ellipsis;}

.form_fields .section_title{display: flex; align-items: center; padding: 0 5px;  } 
.form_fields .section_title > text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.form_fields .section_title > text[highlight]{opacity:1}
.form_fields .section_title > [classic] input + text{padding-left:0}
.form_fields .section_title > [classic] separator + text {padding-right:0}
.form_fields .data_label span{font-weight:400;opacity:.5;float:right;}
.form_fields .data_label tip{font-weight:400;opacity:.5; padding:0 10px}

.form_fields .data_label em{margin-right:5px; font-weight:400; font-style:normal}

.form_fields options{display:flex;flex-direction:column;flex:1;align-items:flex-start;}

wrap[group].form_fields {flex-wrap:nowrap}
wrap[group].form_fields text{margin-left:5px}

.form_fields .form_separator{height:1px;box-shadow:inset 0 -1px  var(--outline);flex:1;margin:15px 5px}

.form_fields > input,
.form_fields .input_cont,
.form_fields .k-widget,
.form_fields .data_read,
.form_fields textarea,
.form_fields .Tokenize,
.form_fields .option_bar,
.form_fields .option_column,
.form_fields > .tab_strip

{ margin:5px;flex-grow:1;}


.form_fields [small]{flex-grow:0}

.form_fields .k-slider.k-widget
{margin-top:10px}


.form_fields > [checkbox],
.form_fields > [radio],
.form_fields > [classic] {
    margin: 0 5px;
}

.field_group{display:flex;  align-items: center;}
.field_group cont + .button {margin-left:auto}
.field_group .form_fields{padding:0}
.field_group[autosize] .form_fields{width:unset; flex-grow:unset}

.field_group.fit cont{flex:1}

/* ----- */




.alert_contianer {display: flex; width: 100%; flex-shrink:0;flex-wrap: wrap; }
.alert_contianer alert {height: var(--area); display: flex; flex-shrink: 0; align-items: center; padding: 0 calc((var(--area) - 40px) / 2);width: 100%; box-shadow: 0 0 0 1px var(--outline); z-index:1; background:var(--background) }
.alert_contianer alert action {margin-left: auto; display: flex; align-items: center; }
.alert_contianer alert[warning] {background: #FFECB3; color: #4E342E;box-shadow: 0 0 0 1px var(--outline-dark); }
.alert_contianer icon {margin: 5px; }
.alert_contianer alert > text {font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.alert_contianer.multi alert{ height:auto; padding:15px}
.alert_contianer.multi alert > text{white-space:pre-line}