/*
 * 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);
    --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: 30px;
    --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);

}


/*@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;
    -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: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: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;
    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 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_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=password],
    .input_cont textarea,
    .input_cont .data_read,
    .input_cont .k-widget {
        box-shadow: none;
        background: transparent;
        position: relative;
        z-index: 99;
        margin: 0
    }


    .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;
        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 {
            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: .15
}

    separator[vertical] {
        height: 40px;
        min-width: 1px;
        width: 1px;
        margin: 0 10px;
        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%
    }

    separator[small] {
        max-width: 50%;
        width: 100%;
    }


/* ----- */





/* 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;
    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;
        }

/**/


/* scrollbars */

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

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

.k-webkit.k-desktop ::-webkit-scrollbar-thumb {
    background-color: transparent;
    background-clip: padding-box;
    height: 40px;
    width: 40px;
}

    .k-webkit.k-desktop ::-webkit-scrollbar-thumb:vertical {
        border-left: 6px solid transparent;
    }

    .k-webkit.k-desktop ::-webkit-scrollbar-thumb:horizontal {
        border-top: 6px solid transparent;
    }

.k-webkit.k-desktop :hover::-webkit-scrollbar-thumb {
    background-color: rgba(136, 136, 136, 0.25);
}

.k-webkit.k-desktop ::-webkit-scrollbar-thumb:hover {
    border: none;
}

.k-webkit.k-desktop ::-webkit-scrollbar-button {
    display: none
}

.k-webkit.k-desktop ::-webkit-scrollbar-corner,
.k-webkit.k-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
    }
}


/* stylelint-enable */