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


: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: 30px; 
    --text: 12px;
    --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: 'Manrope','Arial';}




/*@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); }
@font-face { font-family: Roboto; src: url(../font/Roboto-Regular.ttf); }

icon { font-display: swap; 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: Manrope, Arial; font-size: var(--text); -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; border: none; color: inherit; }
input, button .initialCheckbox .TBDCheckbox { outline: none; font-family: Manrope, Arial; font-size: var(--text); -webkit-appearance: auto; -moz-appearance: auto; box-sizing: border-box; border: none; color: inherit; }
input[type=text], input[type=password], input[type=url], input[type=time], input[type=number], .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 0 var(--outline); color: inherit; }
input[type=checkbox] { }
input[type="time"]::-webkit-calendar-picker-indicator { display: none; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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.input-validation-warning,
input.input-validation-warning ~ i,
textarea.input-validation-warning { box-shadow: 0 0 0 2px rgba(251, 203, 0, 0.3); }

.input-validation-warning .input_cont icon,
.input-validation-warning .input_cont .data_help { color: rgb(251, 203, 0); opacity: 1; }
.input-validation-warning .ant-upload { box-shadow: 0 0 0 2px rgba(251, 203, 0, 0.3); }

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

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: Manrope, Arial; 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: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; user-select: text; }
.data_read_count text { font-weight: 800; }
.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: 50px; 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.wide { width: 100%; margin: 0; border-radius: 5px; }
.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: 3px; padding-right: 0; flex-shrink: 0; margin-right: 8px;}
.button.accent,
.button.outline { box-shadow: inset 0 0 0 1.5px; margin: 0 6px; }
.button.extra { padding: 0; height: 100%; width: 100%; border-radius: 0 }

.button.fab { width: 60px; height: 60px; padding: 0; border-radius: 60px; }
.button.fab icon { margin: auto; }

.primary { background-color: var(--main-color-1); color: #fff; margin: 0 6px; }
.primary.mini { margin: 0 }
.add-load { border: 1px solid black }

.accent { border: 1px solid #0D2727; }

.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 { font-size: 14px; font-weight: 700; line-height: 16px; }
.button.adaptive text { margin-left: 10px; }
.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; color: rgba(60, 60, 67, 0.3); background-color: rgba(60, 60, 67, 0.3);}
[checkbox] text { font-size: var(--text_l); font-weight: 400; line-height: 16px; }

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


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


[checkbox] name,
[radio] name { padding: 0 10px 0 0; }
[checkbox] check { height: 10px; width: 10px; box-shadow: inset 0 0 0 10px; top: 5px; left: 5px; transition: .25s; color: white; background: white; border-radius: 30px; position: absolute; box-shadow: 0px 0.0962328px 0.288698px rgba(0, 0, 0, 0.1), 0px 0.962328px 1.92466px rgba(0, 0, 0, 0.2);}
[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 }


.options[large] > label wrap{justify-content: center; min-width: 70px;}
/* ----- */







/* 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 > input[type=number]
.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 }
.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: Manrope, Arial; 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: Manrope, Arial; }
.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-validation-warning ~ decor { box-shadow: inset 0 0 0 2px rgba(251, 203, 0, 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: .15 }
separator[vertical] { height: 30px; min-width: 1px; width: 1px; margin: 0 10px 0 0; 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%; }
separator[horizontal][login] { margin: 30px 10px }
/* ----- */

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

/**/


/* 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 }
.ant-input-number{
    padding:0px !important;
    border:none !important;
    background-color:none !important;
    color:#000000
}

@media(max-width:900px) {
    .mobile, div.mobile, li.mobile, separator.mobile { display: flex }


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




/**/

.nav_strip { display: flex; flex-direction: column; justify-content: center; overflow: hidden; width: 100%; height: var(--area); flex-shrink: 0; background: var(--background); z-index: 2; position: relative }
.nav_strip wrap { display: flex; flex-shrink: 0; box-shadow: inset 0 -1px 0 0 var(--border-color); }
.nav_strip ul { display: flex; flex-shrink: 0; overflow: hidden; float: left; min-width: 100%; }


.nav_strip li { list-style: none; height: var(--area); line-height: var(--area); overflow: hidden; padding: 0 10px; cursor: pointer; position: relative; overflow: hidden; box-shadow: inset 0 0px 0 0 var(--main-color); font-weight: 700; display: flex; align-items: center; white-space: nowrap; flex-shrink: 0 }
.nav_strip li:hover { background-color: var(--hover); }
.nav_strip li:active text,
.nav_strip li:active icon { transform: translateY(1px) }

.nav_strip li.selected { box-shadow: inset 0 -2px 0 0; color: var(--main-color); }
.nav_strip li.hidden { display: none }
.nav_strip li.disabled { cursor: default; opacity: .5; transform: none; }
.nav_strip li text { padding: 0 10px; color: #0D2727; }

/* custom classes */

.customerOrder-admin__separator {
    margin: 6px 0 0 8px!important;
}

.buttons-container {
    display: flex;
    justify-content: center;
}

.comment_modal_text {
    margin: 8px 12px;
    color: #29CABA;
    font-size: 16px;
    font-weight: 900;
    align-self: start;
};
.call-checking__carrierName {
    color: #ffffff;
}

.call-checking__carrierName:hover {
    color: white;
}

.isBold {
    font-weight: bold;
}

.tbd-container {
    display: flex;
    margin: 0 12px;
}

.SO_TL {
    color: red!important;
}

.info-icon {
    line-height: normal;
    padding-top: 1px;
}
.info-icon > span > svg {
    width: 14px;
    height: auto;
    cursor: pointer;
}