/*
 * Ogma UI framework // Controls
 * Version - 0.0.1
 *
 * Copyright (c) Ogma Applications / Design Team
 *
 */
/* stylelint-disable */


:root {
--input-color:rgba(136, 136, 136, 0.1);
--ant-input-color:#f3f3f3;

--elevation: 0 0 50px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,.05);
--outline: rgba(0,0,0,.1);
--outline-dark: rgba(0,0,0,.1);
--fab: 15px;
--space: 20px;
--text: 13px;
--hover: rgba(136, 136, 136, 0.1);
--tip: #424242;
--context: #fff;
--over-color: linear-gradient(to top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 100%);
--press-color: linear-gradient(to top, rgba(0,0,0,.07) 0%,rgba(0,0,0,.07) 100%);
--overlay: rgba(50, 50, 50, 0.65);
--area: 60px;
--main-font: 'Roboto','Arial';
--button-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,.05);

--point:10px;
--main-color-light:rgb(68 114 196 / 30%);
--dark-color:rgb(0 0 0 / 75%);
--elevation_2: 0 50px 110px -20px rgba(0,0,0,.3), 0 0 0 1px var(--border-color);
--elevation_3: 0 50px 110px -20px rgba(0,0,0,.3),0 -50px 110px -20px rgba(0,0,0,.3), 0 0 0 1px var(--border-color);
--elevation_4: 0 50px 110px -20px rgba(0,0,0,.3), 0 0 0 1px var(--outline);
--outline-light: rgba(0,0,0,.05);
}


@supports (backdrop-filter: blur(10px)) {

    .context_container { backdrop-filter: blur(10px); --context: rgba(255,255,255,.85); }
    .dark .context_container { --context: rgba(35,35,35,.9); }
}

/*@media screen and (max-width: 1280px) , screen and (max-height: 700px) {

:root
{
    --area:50px;
}

}

@media (min-resolution: 192dpi) {

:root
{
    --text:15px;
}

}*/

/*::selection {background: var(--main-color);color:#fff;}*/

/* icon */

@font-face { font-family: icon; src: url(../font/icon.ttf); }

icon { width: 30px; height: 30px; flex-shrink: 0; display: flex; -moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; -webkit-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; font-family: icon; display: flex; display: -ms-flexbox; display: -webkit-flex; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center; font-size: 30px; font-weight: 400; font-style: normal; user-select: none; /* cursor: default; */ text-transform: lowercase; position: relative; z-index: 9; overflow: hidden; text-decoration: none; pointer-events: none; }

    icon[large] { width: 90px; height: 90px; font-size: 90px; }

    icon[middle] { width: 60px; height: 60px; font-size: 60px; }



    icon[light] { opacity: .15 }
/* ----- */


/* input */

input::-ms-clear, input::-ms-reveal { display: none; }

input, button { outline: none; font-family: 'Roboto'; font-size: var(--text); -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; border: none; color: inherit; }

    input[type=text], input[type=password], input[type=url], .k-widget .k-input { float: left; display: flex; height: 30px; line-height: 30px; padding: 0 7px; background: var(--input-color); transition: none; -webkit-transition: none; flex: 1; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 0 0 1px var(--outline); color: inherit; }

    input[type=checkbox] { }



    input:focus,
    textarea:focus,
    .input_cont input:focus ~ i,
    .input_cont .k-state-focused ~ i,
    .Tokenize ul.Focused { background: none; }

    input.input-validation-error,
    input.input-validation-error ~ i,
    textarea.input-validation-error { box-shadow: 0 0 0 2px rgba(240, 80, 80, 0.3); }

.input-validation-error .input_cont icon,
.input-validation-error .input_cont .data_help { color: rgb(240, 80, 80); opacity: 1; }
/*.input-validation-error .ant-upload { box-shadow: 0 0 0 2px rgba(240, 80, 80, 0.3); }*/
.input-validation-error .ant-upload.ant-upload-select .ant-upload { box-shadow: 0 0 0 2px rgba(240, 80, 80, 0.3); }


input:disabled,
textarea:disabled,
.input_cont input:disabled ~ i { opacity: .7 }

input[disabled] ~ box,
input[disabled] ~ text { opacity: .5; cursor: default }

textarea { min-height: 30px; resize: none; height: 80px; display: block; box-shadow: 0 0 0 1px var(--outline); color: inherit; padding: 7px; font-family: var(--main-font); font-size: var(--text); overflow: auto; flex: 1; background: var(--input-color); }

    textarea[compact] { height: 30px; resize: vertical; }
    textarea[note] { resize: vertical; height: 120px; background: #FFECB3; line-height: 20px; color: #3E2723; }
    textarea[large_note] { height: 160px; }
    textarea[resize] { resize: vertical }
/* ----- */


/* data_read */

.data_read { padding: 7px 0; min-height: 30px; overflow: hidden; flex: 1; box-shadow: 0 1px 0 0 var(--outline); cursor: text; }

    .data_read text { position: absolute; opacity: .5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; user-select: text; }

    .data_read.multiline { white-space: normal; }

    .data_read:empty { cursor: default; pointer-events: none; }

        .data_read:empty::after { content: "No Data"; }

.data_tip { padding: 7px; float: left; box-shadow: 0 0 0 1px var(--outline); background: #ffeda5; user-select: all; min-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: normal; float: left; flex: 1; background: red }

/* ----- */


/* button */

.button { height: 30px; text-align: center; border-radius: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 15px; user-select: none; font-weight: 700; font-size: var(--text); white-space: nowrap; position: relative; background: transparent; /*flex-shrink: 0;*/ overflow: hidden; line-height: 30px; text-decoration: none }
.button:hover { background-image: var(--over-color); }
.button:active { background-image: var(--press-color); }
.button.open { background-color: var(--hover) }
.button:active text,
.button:active icon { transform: translateY(1px) }

.button text { width: 100%; overflow: hidden; text-overflow: ellipsis; }
a.button text { text-decoration: underline }
.button text:empty { display: none; }
.button icon { margin: 0 0 0 -10px }
.button text ~ icon { margin: 0 -10px 0 0 }
.button.mini icon, .button.extra icon, .button.micro icon { margin: auto; }
.button.mini { width: 40px; height: 40px; padding-left: 0; padding-right: 0; flex-shrink: 0; }
.button.micro { width: 30px; height: 30px; padding-left: 0; padding-right: 0; flex-shrink: 0; }

.button.accent,
.button.outline { box-shadow: inset 0 0 0 1.5px; margin: 0 5px; }
.button.extra { padding: 0; height: 100%; width: 100%; border-radius: 0 }
.button.fab { width: 50px; height: 50px; padding: 0; border-radius: 50px; }
    .button.fab icon { margin: auto; }

.primary { background-color: var(--main-color); color: #fff; margin: 0 5px; }
    .primary.mini { margin: 0 }

.button.accent:hover,
.button.accent:active { box-shadow: none; background-color: var(--main-color); color: #fff }
.button.large { min-height: 50px; height: 50px; padding: 0 50px; }
.button[disabled] { opacity: .5; cursor: default; pointer-events: none }
button::-moz-focus-inner { border: none; }
.button.adaptive icon { display: none; margin: auto; }
.button.error { background: var(--error-color); color: #fff; }
.button tip { font-weight: 400 }

.caption { height: 30px; text-align: center; border-radius: 30px; display: flex; align-items: center; justify-content: center; padding: 0 15px 0 10px; user-select: none; font-weight: 700; font-size: var(--text); white-space: nowrap; position: relative; background: transparent; flex-shrink: 0; overflow: hidden; line-height: 30px; text-decoration: none }
    .caption text { width: 100%; overflow: hidden; text-overflow: ellipsis; }

@media(max-width:900px) {
    .button.adaptive icon { display: flex }
    .button.adaptive text { display: none }
    .button.adaptive { min-width: 40px; width: 40px; min-height: 40px; height: 40px; padding-left: 0; padding-right: 0; }
}







/* [checkbox] */

[checkbox],
[radio],
[classic] { display: flex; align-items: center; min-height: 30px; white-space: nowrap; position: relative; overflow: hidden; cursor: pointer; }

    [checkbox]:active,
    [radio]:active,
    [classic]:active { transform: translateY(1px) }

    [checkbox] input,
    [radio] input,
    [classic] input { display: none; }

    [checkbox] box { height: 20px; width: 36px; display: flex; position: relative; border-radius: 10px; flex-shrink: 0; cursor: pointer; box-shadow: inset 0 0 0 2px; }

    [checkbox] text,
    [radio] text,
    [classic] text { padding: 0 10px; white-space: nowrap; width: 100%; overflow: hidden; position: relative; text-overflow: ellipsis; }


    [checkbox] name,
    [radio] name { padding: 0 10px 0 0; }

    [checkbox] check { height: 10px; width: 10px; box-shadow: inset 0 0 0 7px; top: 5px; left: 5px; transition: .25s; background: white; border-radius: 20px; position: absolute; }

    [checkbox] input:checked ~ box { box-shadow: inset 0 0 0 20px; color: var(--main-color); }

        [checkbox] input:checked ~ box check { transform: translateX(16px); box-shadow: inset 0 0 0 0px; }

    [checkbox][simple] text:after { content: "No" }

    [checkbox][simple] input:checked ~ text:after { content: "Yes" }

    [checkbox] tip { opacity: .5; padding: 0 10px; }

    [checkbox][simple] tip:after { content: "Off" }

    [checkbox][simple] input:checked ~ tip:after { content: "On" }

    [checkbox][minimal] box { height: 2px; width: 28px; }

    [checkbox][minimal] check { height: 16px; width: 16px; display: flex; top: -7px; box-shadow: inset 0 0 0 2px, 0 0 0 3px var(--background); background: var(--background); left: 0 }

    [checkbox][minimal] input:checked ~ box { }

        [checkbox][minimal] input:checked ~ box check { transform: translateX(12px); box-shadow: inset 0 0 0 10px }

    /* ----- */


    /* radio */

    [radio] box { display: flex; position: relative; border-radius: 10px; flex-shrink: 0; box-shadow: inset 0 0 0 2px; }

    [radio] box { height: 18px; width: 18px; }

    [radio] check { height: 8px; width: 8px; transition: .25s; background: white; border-radius: 20px; position: absolute; top: 5px; left: 5px; transform: scale(0); background: var(--main-color) }

    [radio] input:checked ~ box { color: var(--main-color); }

        [radio] input:checked ~ box check { transform: scale(1) }

    /* ----- */

    [classic] box { display: flex; position: relative; flex-shrink: 0; box-shadow: inset 0 0 0 2px; }

    [classic] box { height: 18px; width: 18px; border-radius: 3px; }

    [classic] check { transform: scale(0); height: 18px; width: 18px; transition: .125s; background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgPHBhdGggIGQ9Ik0xMy45OTEsNy40NTZMOC40LDEzLDUuMDEsOS42MzcsNi40NzQsOC4xODMsOC40LDEwLjA5MywxMi41MjYsNloiLz4KPC9zdmc+"); }

    [classic] input:checked ~ box { background: var(--main-color); box-shadow: none }

        [classic] input:checked ~ box check { transform: none; }

/**/


/* option_bar */


/*filter options*/

.options { max-width: 100%; display: flex; flex-wrap: wrap; }

    .options label input { display: none }

    .options label wrap:hover,
    .filter_block .data_cell .input_cont:hover,
    .filter_result .filtered_item span:hover { background: rgba(136, 136, 136, 0.15); }


    .options label wrap:active text,
    .options label wrap:active icon,
    .filter_result .filtered_item span:active text { transform: translateY(1px) }

    .options label wrap text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .options label wrap icon { margin: 0 0 0 -10px; }

    .options label input:checked ~ wrap { background: var(--main-color); color: #fff; }

    .options label { max-width: 100%; margin: 3px; float: left; position: relative; overflow: hidden; border-radius: 30px; }

        .options label > wrap { padding: 0 15px; cursor: pointer; height: 30px; line-height: 30px; display: flex; align-items: center; float: left; background: rgba(136, 136, 136, 0.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }






/**/





.option_bar { display: flex; height: 30px; position: relative; overflow: hidden; min-width: 150px; }

    .option_bar div[title] { flex: 2; align-items: center; display: flex; position: relative; overflow: hidden; }

        .option_bar div[title] text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .option_bar label,
    .option_complex label { display: flex; flex: 1; position: relative; overflow: hidden; }

        .option_bar label wrap { display: flex; flex: 1; position: relative; overflow: hidden; cursor: pointer; justify-content: center; align-items: center; padding: 0 10px; box-shadow: inset 0 1px var(--outline),inset 0 -1px var(--outline),inset 1px 0 var(--outline); }

        .option_bar label:last-child wrap { box-shadow: inset 0 0 0 1px var(--outline) }


    .option_bar wrap:hover { background: var(--hover); }

    .option_bar wrap:active text,
    .option_bar wrap:active icon,
    .option_complex wrap:active icon { transform: translateY(1px) }


    .option_bar label text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 30px; flex-shrink: 0; }

    .option_bar label input,
    .option_complex label input { display: none }

        .option_bar label input:checked ~ wrap,
        .option_complex label input:checked ~ wrap { background-color: var(--main-color); color: #fff; }

        .option_bar label input:checked:disabled ~ wrap,
        .option_complex label input:checked:disabled ~ wrap,
        .options label input:disabled ~ wrap { background-color: var(--input-color); color: inherit; }




.option_complex { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); overflow: hidden; margin: 5px; flex: 1; grid-gap: 1px; padding: 1px }

    .option_complex label { box-shadow: 0 0 0 1px var(--border-color); }

        .option_complex label wrap { display: flex; flex: 1; position: relative; overflow: hidden; cursor: pointer; justify-content: center; align-items: center; }

    .option_complex wrap:hover { background: var(--hover); }


    .option_bar label input:disabled ~ wrap icon,
    .option_bar label input:disabled ~ wrap text,
    .option_complex label input:disabled ~ wrap icon,
    .options label input:disabled ~ wrap text { opacity: .3 }

    .option_bar label input:disabled ~ wrap,
    .option_complex label input:disabled ~ wrap,
    .options label input:disabled ~ wrap { cursor: default; pointer-events: none }

/* ----- */







/* option_bar */

.option_column { display: flex; flex-direction: column; position: relative; overflow: hidden; width: 100%; align-items: flex-start; }

    .option_column label { max-width: 100%; margin-top: 5px; }

.option_group { display: flex; flex-direction: column; flex: 1; width: 100%; }

/* ----- */


/* toggle bar */

.toggle_bar { display: flex; }

    .toggle_bar label { display: flex; position: relative; }

        .toggle_bar label input { display: none }

        .toggle_bar label:active icon { transform: translateY(1px) }

        .toggle_bar label wrap { display: flex; flex: 1; position: relative; overflow: hidden; cursor: pointer; justify-content: center; align-items: center; height: 40px; width: 40px; border-radius: 20px; flex-shrink: 0 }

        .toggle_bar label input:checked ~ wrap { background-color: var(--main-color); color: #fff; }

        .toggle_bar label:hover wrap { background-image: var(--over-color); }

        .toggle_bar label:active wrap { background-image: var(--press-color); }



/* ----- */


/* input_cont */

input:-webkit-autofill { transition-delay: 5000s; transition-property: background-color; transition-duration: 5000s }

.dark input:-webkit-autofill { filter: invert(1); }




.input_cont { flex: 1; display: flex; align-items: center; -ms-flex-align: center; position: relative; z-index: 1; /*overflow:hidden;*/ }

    .input_cont.large { flex: 1 100% }

    .input_cont input[type=text],
    .input_cont input[type=url],
    .input_cont input[type=password],
    .input_cont textarea,
    .input_cont .data_read,
    .input_cont .k-widget { box-shadow: none; background: transparent; position: relative; z-index: 99; margin: 0; overflow: hidden; }


    .input_cont separator[vertical] { margin: 0; height: 30px; }

    .input_cont i { position: absolute; height: 100%; width: 100%; background-color: var(--input-color); box-shadow: 0 0 0 1px var(--outline); left: 0; top: 0; pointer-events: none }

    .input_cont .data_read ~ i { background: none; box-shadow: 0 1px 0 0 var(--outline); }

    .input_cont .button { z-index: 3; border-radius: 0; margin: 0 }

        .input_cont .button.mini { margin: -5px; }

    .input_cont actions { display: flex; }

    .input_cont text ~ .data_read { margin-left: 10px; }

    .input_cont > text { position: relative; z-index: 1; padding-left: 7px; line-height: 30px; cursor: text; white-space: nowrap; cursor: default; }

    .input_cont > input ~ text { padding: 0 7px 0 0; }

    .input_cont input:-webkit-autofill ~ i { background-color: rgb(232, 240, 254); }

    .input_cont icon ~ input { padding-left: 0 }

    .input_cont input:-webkit-autofill ~ * { color: #000 }

    .input_cont.wide { flex-basis: 100%; }





thumbnail { height: 30px; width: 30px; margin: 5px; flex-shrink: 0; position: relative; overflow: hidden; }

    thumbnail picture { height: 100%; width: 100%; display: flex; background-size: cover; position: absolute; top: 0; left: 0; z-index: 9 }


action[right] { margin-left: auto; }

action { display: flex; align-items: center; }

    action > wrap { display: flex; align-items: center; }

    action .input_cont { margin-right: 10px; padding: 0 8px; flex: auto; flex-shrink: 0; min-width: 150px; }

        action .input_cont.large { min-width: 300px; }

        action .input_cont i { border-radius: 30px; }

        action .input_cont .k-widget { width: 100%; }

        action .input_cont.mini { width: 150px; }

        action .input_cont .k-datepicker .k-select { display: none }



/* ----- */


/* input_wrap */

/*.input_wrap{position:relative;display:flex;overflow:hidden;height:50px;border-radius:25px;align-items:center;overflow:hidden; width:280px}
.input_wrap input{border:none;height:50px;width:100%;padding:0 20px;background:none;min-width:0; box-shadow:none;}
.input_wrap:not(:first-child){margin-top:10px}
.input_wrap i{position:absolute;width:100%;height:100%;left:0;top:0;z-index:-1;background:var(--input-color);border-radius:25px;pointer-events:none;}
.input_wrap .input-validation-error ~ i{box-shadow:inset 0 0 0 2px rgba(240, 80, 80, 0.3);}

.input_wrap input:-webkit-autofill ~ i{background:#ffeeba}
.input_wrap input:-webkit-autofill ~ *{color:#000}

.input_wrap .button{margin-right:10px;}


.input_wrap_group{padding:30px;}


@keyframes autofill { to { background: transparent; } }

.input_wrap  input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}*/






/* input_wrap */

.input_wrap { position: relative; display: flex; flex-direction: column; font-family: 'Roboto'; width: 100% }

    .input_wrap .wrap { position: relative; display: flex; width: 100%; align-items: center; }

        .input_wrap .wrap name { position: absolute; pointer-events: none; padding: 0 5px; margin: 0 10px; background: #fff; display: flex; transform: translateY(-120%); height: 20px; align-items: center; transition: .125s }

        .input_wrap .wrap input { border: none; outline: none; width: 100%; height: 100%; padding: 15px; background: none; font-size: 13px; font-family: 'Roboto'; }

        .input_wrap .wrap decor { pointer-events: none; position: absolute; height: 100%; width: 100%; box-shadow: inset 0 0 0 1.5px; opacity: .15; border-radius: 5px; display: flex; transition: .125s }
        .input_wrap .wrap .input-validation-error ~ decor { box-shadow: inset 0 0 0 2px rgba(240, 80, 80, 0.3); opacity: 1 }


        .input_wrap .wrap input:placeholder-shown ~ name { transform: none; }

        .input_wrap .wrap input:focus ~ name { /*color:var(--main-color);*/ transform: translateY(-120%); }

        .input_wrap .wrap input:focus ~ decor { /*color:var(--main-color);*/ opacity: 1 }

        .input_wrap .wrap:hover decor { opacity: 1 }

        .input_wrap .wrap:hover name { color: #000 }

    .input_wrap loader { margin: 5px; }

    .input_wrap.error input:focus ~ decor, .input_wrap.error input:focus ~ name { color: var(--error) }

    .input_wrap.error name, .input_wrap.error decor, .input_wrap.error message { color: var(--error) }

    .input_wrap.error .shrink .text { color: var(--error) }


    .input_wrap.success input:focus ~ decor, .input_wrap.success input:focus ~ name { color: var(--success) }

    .input_wrap.success name, .input_wrap.success decor, .input_wrap.success message { color: var(--success) }

    .input_wrap.readonly name, .input_wrap .wrap .disabled ~ name, .input_wrap .wrap .ant-select-disabled ~ name { color: rgba(0,0,0,.55) }

    .input_wrap.readonly .wrap:hover name { color: rgba(0,0,0,.55) }


    .input_wrap .wrap .disabled ~ decor, .input_wrap .wrap .ant-select-disabled ~ decor { opacity: 0.2; }

    .input_wrap info { display: none; align-items: flex-start; width: 100% }

        .input_wrap info a { margin-left: auto }

    .input_wrap message { opacity: 0; transform: translateY(-100%); transition: .125s; padding-left: 15px }

    .input_wrap.error message, .input_wrap.success message { opacity: 1; transform: translateY(0); }

    .input_wrap.error info, .input_wrap.success info { display: flex; margin-top: 5px; }

    .input_wrap.small .wrap { height: 40px; }

        .input_wrap.small .wrap name,
        .input_wrap.small .wrap .ant-select.holder ~ name,
        .input_wrap.small .wrap .ant-calendar-picker.holder ~ name { transform: translateY(-20px); }

        .input_wrap.small .wrap input:focus ~ name { transform: translateY(-20px); }

    .input_wrap.small .ant-select-selection-selected-value { line-height: 40px; }

    .input_wrap.large .ant-select-selection-selected-value { line-height: 50px; }


    .input_wrap.large .wrap { height: 50px; }

        .input_wrap.large .wrap name,
        .input_wrap.large .wrap .ant-select.holder ~ name, .input_wrap.large .wrap .ant-calendar-picker.holder ~ name { transform: translateY(-25px); }

        .input_wrap.large .wrap input:focus ~ name { transform: translateY(-25px); }

        .input_wrap.large .wrap .ant-select-arrow { margin: 5px }


    .input_wrap .wrap .ant-select ~ name, .input_wrap .wrap .ant-calendar-picker ~ name { transform: none; }

    .input_wrap .wrap .ant-select.holder։hover ~ decor, .input_wrap .wrap .ant-calendar-picker.holder:hover ~ decor { opacity: 1; }


    .input_wrap .wrap:hover .ant-select-focused ~ name { color: var(--main-color); }

    .input_wrap .wrap .ant-calendar-picker.holder.dateFocuse ~ name, .input_wrap .wrap .ant-calendar-picker.holder.dateFocuse ~ decor { color: var(--main-color); }


    .input_wrap.readonly .wrap:hover decor { opacity: .15; }

    .input_wrap.readonly span { display: flex; align-items: center; padding: 0 15px; }


    .input_wrap input:-webkit-autofill ~ * { color: #000 }

@keyframes animation {
    to { background: #fff; }
}

input:-internal-autofill-selected { animation: animation forwards; }



/* ----- */


/* tokenize */

.TokenizeMeasure, .Tokenize ul.TokensContainer li.TokenSearch input { margin: 0 10px; }

.Tokenize { position: relative; display: flex; flex: 1; min-height: 30px; width: 100%; overflow: hidden; box-shadow: 0 0 0 1px var(--outline); }

    .Tokenize ul { font-size: var(--text); background: var(--input-color); cursor: text; flex-wrap: wrap; display: flex; flex: 1; align-items: center; overflow: hidden; }

        .Tokenize ul li { white-space: nowrap; }

            .Tokenize ul li span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

        .Tokenize ul.TokensContainer { }

            .Tokenize ul.TokensContainer li.Token { display: flex; height: 30px; align-items: center; padding-left: 10px; cursor: default; max-width: 100%; background: var(--main-color); color: #fff; overflow: hidden; position: relative; box-shadow: -1px -1px 0 var(--outline-dark); }

                .Tokenize ul.TokensContainer li.Token .button { border-radius: 0; }

                .Tokenize ul.TokensContainer li.Token.PendingDelete { opacity: 0.5; }

            .Tokenize ul.TokensContainer li.Token, .Tokenize ul.TokensContainer li.TokenSearch { float: left; }

            .Tokenize ul.TokensContainer li.TokenSearch { flex: 1; min-width: 100px; }

                .Tokenize ul.TokensContainer li.TokenSearch input { background-color: transparent; width: 100%; box-shadow: none; padding: 0 7px; height: 30px; margin: 0 }

            .Tokenize ul.TokensContainer li.Placeholder { color: #ddd; position: absolute; line-height: 20px; padding: 5px 0 0 5px; display: none; }

            .Tokenize ul.TokensContainer li.Token:hover { background-image: var(--over-color); }

        .Tokenize ul.Dropdown { box-sizing: border-box; display: none; max-height: 180px; width: 200px; padding: 0; margin: -10px 0 0 0; background-color: white; overflow-y: auto; box-shadow: 0 5px 10px -3px rgba(0, 0, 0,.2), 0 0 0 1px rgba(0,0,0,.05); box-sizing: border-box; border-radius: 2px; z-index: 10020; position: absolute; left: 10px; top: 100%; }

            .Tokenize ul.Dropdown li { padding: 0 10px; overflow: hidden; cursor: pointer; box-sizing: border-box; height: 30px; line-height: 30px; text-overflow: ellipsis; font-weight: 400; }

                .Tokenize ul.Dropdown li.Hover { color: white; text-decoration: none; background-color: var(--main-color); }





/* ----- */


/*stack*/

.stack { margin: 5px; flex: 1; overflow: hidden; }

    .stack ul { flex-wrap: wrap; display: flex; flex: 1; align-items: center; overflow: hidden; }

    .stack li { white-space: nowrap; display: flex; height: 30px; align-items: center; padding: 0 10px; cursor: default; max-width: 100%; background: var(--main-color); color: #fff; overflow: hidden; position: relative; box-shadow: -1px -1px 0 var(--outline-dark); }

        .stack li text { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/**/



/* context_menu */

.context_menu { transition-delay: .125s; max-width: calc(100vw - 20px); max-height: calc(100% - 20px); visibility: hidden; opacity: 0; /*transition-property:transform, opacity, visibility;transition-duration:.2s,.125s,.125s;*/ position: absolute; z-index: 9999; cursor: default; top: 0; /*left:0;*/ display: flex; }

    .context_menu.open { visibility: visible; opacity: 1; transition-delay: 0s; }

.context_wrap { max-height: inherit; max-width: inherit; width: 100%; overflow: hidden; display: flex; flex-direction: column; position: relative; padding: 10px; }

.context_container { overflow-y: auto; overflow-y: overlay; overflow-x: hidden; width: 100%; display: flex; background: var(--context); box-shadow: var(--elevation); -webkit-overflow-scrolling: touch; transform: translateY(-10px); opacity: 0; transition: .125s; }

.open .context_container { transform: translateY(0); opacity: 1; }

.context_menu .close_window { display: none; }

.context_wrap footer { background: #ffffff; padding: 15px; box-shadow: 0 5px 12px -2px rgba(0, 0, 0,.2), 0 0 0 1px rgba(0,0,0,.05); position: relative; z-index: 100; }





/*list template*/
.list_menu { height: 100%; }

    .list_menu ul { height: 100%; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; overflow: auto; min-width: 240px; margin: 0; padding: 10px 0; box-sizing: border-box; font-weight: initial }

    .list_menu li { font-weight: 400; flex-shrink: 0; padding: 0 5px; color: var(--text); line-height: 40px; position: relative; white-space: nowrap; overflow: hidden; box-sizing: border-box; text-align: left; text-overflow: ellipsis; width: 100%; cursor: pointer; user-select: none; display: flex; align-items: center; }

    .list_menu ul > wrap { display: flex; flex-direction: column; overflow: auto; }


    .list_menu li icon { margin: 5px; }

    .list_menu li:hover { background-image: var(--over-color); }

    .list_menu li.selected { background-color: var(--main-color); color: #fff; }

    .list_menu ul li:active { background-image: var(--press-color); }

        .list_menu ul li:active text, .list_menu ul li:active icon { transform: translateY(1px); }

    .list_menu li.separator { height: 1px; box-shadow: 0 1px 0 0 var(--outline); margin: 10px 0; pointer-events: none; }

    .list_menu li a text { flex: 1; min-width: 0; overflow: hidden; position: relative; text-overflow: ellipsis; }

    .list_menu li.highlight { font-weight: 700 }

    .list_menu li.title { opacity: .5; pointer-events: none; }

    .list_menu li.disabled { opacity: .5; cursor: default; }

    .list_menu li.hidden { display: none; }

    .list_menu li[bottom] { margin-top: auto }

    .list_menu li.search input { padding: 0; box-shadow: none; height: 40px; background: none; }


    .list_menu li > a, .list_menu li > label { text-decoration: none; display: flex; align-items: center; width: 100%; cursor: pointer; }



@keyframes list_item {
    from { transform: translateY(-10px); opacity: 0 }
}

.context_menu.open .list_menu li { animation: list_item .125s .125s backwards; }

    .context_menu.open .list_menu li:nth-last-child(1) { animation-delay: .2s }

    .context_menu.open .list_menu li:nth-last-child(2) { animation-delay: .175s }

    .context_menu.open .list_menu li:nth-last-child(3) { animation-delay: .15s }


/* ----- */


/* fab */

.fab_container { position: absolute; z-index: 7; }

    .fab_container.left { left: var(--fab); }

    .fab_container.right { right: var(--fab); }

    .fab_container.top { top: var(--fab); }

    .fab_container.bottom { bottom: var(--fab); }

/*.k-pager-wrap + .fab_container.bottom,
toolbar + .fab_container.bottom
{bottom:90px;}*/



/* ----- */


/* separator */



separator { box-shadow: inset 0 0 0 1px; flex-shrink: 0; opacity: .1 }

separator[vertical] { --gap: 10px; height: 30px; min-width: 1px; width: 1px; margin: 0 var(--gap); position: relative; z-index: 2; display: flex; }

separator[horizontal] { min-height: 1px; height: 1px; margin: 20px 0; position: relative; z-index: 2; display: flex; flex: 1 1 100%; max-height: 1px }

separator[bottom] { margin-top: auto }

.option_bar separator[vertical] { margin: 0 calc(var(--gap) + 5px); }

/* ----- */




/* material ink effect */

.material_ink { height: 100%; width: 100%; position: absolute; left: 0; top: 0; pointer-events: none; }

    .material_ink circle { animation: ink_anim .65s; animation-timing-function: ease-out; opacity: 0; }

.primary circle, .accent circle { fill: #fff; }

@keyframes ink_anim {
    from { transform: scale(0); opacity: .7 }

    to { opacity: 0 }
}

/* ----- */


/* loader */

.spinner { position: relative; width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; }

    .spinner > div { background: var(--outline); width: 150px; height: 2px; position: relative; overflow: hidden; }

        .spinner > div > div { position: absolute; background: var(--main-color); height: 100%; width: 100%; animation: loader .95s infinite; }

.preloader { height: 100%; width: 100%; z-index: 99999; position: absolute; top: 0; left: 0; background-color: var(--overlay); display: flex; align-items: center; justify-content: center; }

    .preloader > div { background: var(--outline); width: 150px; height: 2px; position: relative; overflow: hidden; }

        .preloader > div > div { position: absolute; background: var(--main-color); height: 100%; width: 100%; animation: loader 1.5s infinite; }

@keyframes loader {
    from { transform: translateX(-100%) }

    50% { transform: translateX(100%) }

    to { transform: translateX(-100%) }
}

/* ----- */


/* tooltip */

.tooltip { background: var(--tip); color: #fff; top: 0; left: 0; position: fixed; border-radius: 30px; pointer-events: none; padding: 6px 15px; z-index: 10000; transition-property: opacity,visibility; transition-duration: .225s; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: calc(100vw - 20px); }

.tooltip { visibility: hidden; opacity: 0; transition-delay: 0s; }

    .tooltip.open { /*transition-delay:.3s;*/ visibility: visible; opacity: 1; }

    .tooltip.error { background: rgba(240,80,80,1); }

/* ----- */





/* toast */

.toast_container { position: absolute; bottom: 0; display: flex; flex-direction: column; justify-content: center; width: 100%; align-items: center; z-index: 99999; overflow: hidden; margin: 20px 0; pointer-events: none }

    .toast_container > div { min-height: 30px; background: var(--tip); color: #fff; display: flex; align-items: center; border-radius: 30px; margin: 0px 0 10px 0; padding: 6px 15px; animation: toast_anim .2s forwards }

        .toast_container > div > div { display: flex; align-items: center; }

        .toast_container > div.toast_close { animation: toast_gone .2s both }

@keyframes toast_anim {
    from { transform: translateY(20px); opacity: 0 }
}

@keyframes toast_gone {
    to { transform: translateY(-10px); opacity: 0 }
}

/* ----- */


/* *** toast notifications *** */
.toast_cont { position: absolute; width: 100%; bottom: 0; box-sizing: border-box; z-index: 98; padding-left: 200px; left: 0; }

.toast { background-color: #3c3c3c; color: #fff; position: relative; overflow: hidden; padding: 0 20px; height: 50px; line-height: 50px; border-radius: 7px; overflow: hidden; margin: 5px; animation: notification 5s; animation-timing-function: ease-in-out; animation-fill-mode: both; }

.toast_action { font-weight: bold; position: absolute; right: 20px; text-transform: uppercase }

.toast_text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; float: left; }

    .toast_text a { display: block; color: #fff; font-weight: 400; }

@keyframes notification {
    from { opacity: 0; transform: translateY(20px) }

    10% { transform: translateY(0px) }

    20% { opacity: 1; }

    80% { opacity: 1; transform: translateY(0px) }

    90% { }

    to { opacity: 0; transform: translateY(20px); }
}
/* *** notifications **** */



/**/

@keyframes fillup {
    from { stroke-dasharray: 0 100; }
}


pie { position: relative; overflow: hidden; }

    pie svg { width: 100px; height: 100px; transform: rotate(90deg); border-radius: 50%; }

    pie circle { fill: transparent; stroke-width: 15; }

        pie circle[progress] { stroke: var(--main-color); stroke-dasharray: 0 100; animation: fillup 1s ease-out forwards; }

        pie circle[placeholder] { stroke: var(--input-color); stroke-dasharray: 120 100; }


/**/



/**/

.progress_bar { width: 80px; display: flex; flex-shrink: 0; height: 20px; align-items: center; padding: 0 10px; }

    .progress_bar > div { height: 4px; width: 100%; background: var(--outline); border-radius: 30px; overflow: hidden; position: relative; }

        .progress_bar > div > div { width: 100%; background: #4CAF50; height: 4px; right: 100%; position: absolute; border-radius: 5px; }

/**/


    /*::-webkit-scrollbar-button:vertical:decrement:end,
    ::-webkit-scrollbar-button:vertical:increment:start,
    ::-webkit-scrollbar-button:horizontal:decrement:end,
    ::-webkit-scrollbar-button:horizontal:increment:start { display: none }

    ::-webkit-scrollbar-track { display: none }

    ::-webkit-scrollbar { width: 10px; height: 10px; }

    ::-webkit-scrollbar-thumb { background-color: rgba(136, 136, 136, 0); height: 10px; width: 10px; background-color: transparent; background-clip: content-box; }


    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-thumb:vertical { border-left: 5px solid transparent; border-right: 10px solid transparent; }
    ::-webkit-scrollbar-thumb:horizontal { border-top: 5px solid transparent; border-bottom: 10px solid transparent; }

    body::-webkit-scrollbar { width: 10px; height: 10px; display: none }
    body::-webkit-scrollbar-thumb { border: none }

    ::-webkit-scrollbar-button { width: 10px; height: 10px }

    ::-webkit-scrollbar-corner,
    ::-webkit-resizer { background-color: transparent; }

    *{ scrollbar-color: rgba(136, 136, 136, 0.25) transparent; scrollbar-width: thin; }
    :hover > ::-webkit-scrollbar-thumb  { background-color: rgba(136, 136, 136, 0.3); }*/

    /*.desktop:hover > ::-webkit-scrollbar-thumb { background-color: rgba(136, 136, 136, 0.3); }*/

/**/

/* scrollbars */

.desktop ::-webkit-scrollbar-track { display: none }

/*.desktop ::-webkit-scrollbar { width: 10px; height: 10px; background-color: transparent; }*/

.desktop ::-webkit-scrollbar-thumb { background-color: transparent; background-clip: padding-box; height: 40px; width: 40px; }
.desktop ::-webkit-scrollbar-thumb:vertical { border-left: 6px solid transparent; }
.desktop ::-webkit-scrollbar-thumb:horizontal { border-top: 6px solid transparent; }
.desktop :hover::-webkit-scrollbar-thumb { background-color: rgba(136, 136, 136, 0.25); }
.desktop ::-webkit-scrollbar-thumb:hover { border: none; }
.desktop ::-webkit-scrollbar-button { display: none }
.desktop ::-webkit-scrollbar-corner,
.desktop ::-webkit-resizer { background-color: transparent; }



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

/* ----- */

/* adaptive elements */

/*.mobile,
div.mobile,
li.mobile,
separator.mobile {
    display: none
}*/

@media(max-width:900px) {

    /*.mobile,
    div.mobile,
    li.mobile,
    separator.mobile {
        display: flex
    }*/


    .desk,
    li.desk,
    div.desk,
    separator.desk { display: none }
}






/*Demo*/
:root { --material-point: 40px; --material-line-point: 30px; }

/*cont { min-height: var(--material-point); height:var(--material-point); line-height: var(--material-point);}*/

.form_container  form { display: flex; flex-direction: column; max-height: 100%; min-height: 100%; overflow: hidden; }

cont { position: relative; display: flex; min-width: 220px; align-items: center; margin: 10px }
cont input[type="text"],
cont input[type="password"],
cont > textarea{ border: none; outline: none; width: 100%; min-height: 40px; padding:15px;  overflow: hidden; text-overflow: ellipsis; box-shadow: none; background: transparent; border-radius: 5px; }


cont textarea {overflow: auto; overflow:overlay; line-height:1.5; -webkit-mask-image: linear-gradient(to top,rgba(0,0,0,0) 5px, #000 20px,#000 calc(100% - 20px),rgba(0,0,0,0) calc(100% - 5px)); mask-image: linear-gradient(to top,rgba(0,0,0,0) 5px, #000 20px,#000 calc(100% - 20px),rgba(0,0,0,0) calc(100% - 5px));}
cont textarea[resize] {resize:vertical; min-height:120px}
cont textarea:focus { box-shadow: none; background: none;}

cont input::placeholder { opacity: 0; transform: translateY(50%); transition: .125s }
cont input:focus::placeholder { opacity: .5; transform: none }

cont textarea::placeholder { opacity: 0; transform: translateY(50%); transition: .125s }
cont textarea:focus::placeholder { opacity: .5; transform: none }


cont .button.primary { /*margin:0; width:100%;*/ }
cont .button { margin: 0 5px; border-radius: 5px; }


/*.dark cont input:-webkit-autofill { filter: grayscale(1) invert(1); }
*/
cont input:-webkit-autofill ~ decor label text wrap { transform: translateY(-50%);  }
cont input:-webkit-autofill ~ decor label text line { transform: scaleX(0);  }




cont decor label text wrap { transform: translateY(-50%); transition: transform .225s, max-width .225s; display: flex; height: 100%; align-items: center; width: 100%; overflow: hidden; }
cont decor label text line { position: absolute; width: 100%; transform: scaleX(0); transition: transform .125s; transform-origin: right }


cont decor { position: absolute; width: 100%; height: 100%; pointer-events: none; }
cont decor label { display: flex; width: 100%; position: relative; height: 100%; padding: 0 10px; }
cont decor label text { align-items: center; height:40px; display: flex; max-width: 100%; position: relative; /* transform: translateY(-50%); */ /* transition: transform .225s, max-width .225s; */ }
cont decor label text span { padding: 0 5px; overflow: hidden; text-overflow: ellipsis; }
cont decor label line { height: 100%; flex: 1; box-shadow: inset 0 1.5px 0 0; }
cont decor border { position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 0 1.52px; border-radius: 7px; pointer-events: none; clip-path: polygon(0% 0%, 0% 100%, 10px 100%, 10px 0, calc(100% - 10px) 0, calc(100% - 10px) 50%, 10px 50%, 10px 100%, 100% 100%, 100% 0%); content: ""; top: 0; left: 0; }

cont decor label line,
cont decor border { opacity: .25 }

cont:hover decor label line,
cont:hover decor border { opacity: .85 }

cont input:placeholder-shown ~ decor label text wrap { transform: none }


cont input:placeholder-shown ~ decor label text line { transform: none }
cont input:focus ~ decor { color: var(--main-color) }
cont input:focus ~ decor label line,
cont input:focus ~ decor border { opacity: 1 }
cont input:focus ~ decor label text wrap { transform: translateY(-50%); }

cont input:focus ~ decor label text line { transform: scaleX(0) }

cont input.input-validation-error ~ decor{ color:var(--error-color)}

    cont input:-webkit-autofill { transition: background-color 5000s ease-in-out 5000s;
    }



    cont textarea:placeholder-shown ~ decor label text wrap { transform: none }


cont textarea:placeholder-shown ~ decor label text line { transform: none }
cont textarea:focus ~ decor { color: var(--main-color) }
cont textarea:focus ~ decor label line,
cont textarea:focus ~ decor border { opacity: 1 }
cont textarea:focus ~ decor label text wrap { transform: translateY(-50%); }
cont textarea:focus ~ decor label text line { transform: scaleX(0) }




/*fields line*/
    cont[compact] { min-height: 0;}








/**/

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

:root { --background_1: url("../../Content/images/demo_res/1.jpg"); --background_2: url("../../Content/images/demo_res/2.jpg"); --background_3: url("../../Content/images/demo_res/3.jpg"); --background_4: url("../../Content/images/demo_res/4.jpg"); --background_5: url("../../Content/images/demo_res/5.jpg"); --background_6: url("../../Content/images/demo_res/6.jpg"); --background_7: url("../../Content/images/demo_res/7.jpg"); --background_8: url("../../Content/images/demo_res/8.jpg"); --background_9: url("../../Content/images/demo_res/9.jpg"); --background_10: url("../../Content/images/demo_res/10.jpg"); }



[demo_]:nth-child(n) picture { background-image: var(--background_1) }
[demo_]:nth-child(2n+1) picture { background-image: var(--background_2) }
[demo_]:nth-child(3n+2) picture { background-image: var(--background_3) }
[demo_]:nth-child(4n+3) picture { background-image: var(--background_4) }
[demo_]:nth-child(5n+4) picture { background-image: var(--background_5) }
[demo_]:nth-child(6n+5) picture { background-image: var(--background_6) }
[demo_]:nth-child(7n+5) picture { background-image: var(--background_7) }
[demo_]:nth-child(8n+6) picture { background-image: var(--background_8) }
[demo_]:nth-child(9n+7) picture { background-image: var(--background_9) }
[demo_]:nth-child(10n+8) picture { background-image: var(--background_10) }

[demo-preview] { align-items: center }
[demo-preview] icon { font-size: 192px; width: 192px; height: 192px; color: var(--main-icon-color) }
[demo-preview] icon_color, [demo-preview] icon_color svg { width: 192px; height: 192px; }

[demo-preview] tag { display: none }
[demo-preview] text { text-align: center }
[demo-preview] item { display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; padding: 40px; }
[demo-preview] item text { font-weight: 700; font-size: 18px; }
[demo-preview] item .material_ink { display: none }

[demo-info] { padding: 20px; text-align: center; line-height: 1.4 }
[demo-info] text { margin-bottom: 10px; }


/* stylelint-enable */