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

:root {
    --input-color: #fff;
    --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: 20px;
    --text: 14px;
    --hover: rgba(0, 0, 0, 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-color: #205490;
    --main-color-dark: #1e4a94;
    --main-color-light: #7da6e94a;
    --button-radius: 5px;
    --main-background: #fff;
    --radius-small: 15px;
}

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

[data-gap='10'] {gap: 10px;}

[data-space='5'] {padding: 5px;}

[data-margin="5"] {margin:5px}

[button][cursor='auto'] {cursor:auto;}

[data-background="white"] {background-color:white;}

[border='bottomtop'] {box-shadow:0 -1px 0 0px var(--border-color),0 1px 0 0px var(--border-color)}

space[data-height='45'] {height:45px;}


group[wrap="no"] {flex-wrap:nowrap;}
/* icon */

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

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: 1; 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 }

icon[data-size='small'] {font-size:20px;}

/* ----- */ 

/* 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[type=text], input[type=password], input[type=url], .k-widget .k-input { float: left; display: flex; height: 27px; line-height: 27px; 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; border-radius:5px;}
input[type=checkbox] { }

input:focus,
textarea:focus,
.input_cont input:focus ~ i,
.input_cont .k-state-focused ~ i,
.Tokenize ul.Focused {  box-shadow:0 0 0 3px var(--main-color-light), 0 0 0 1px var(--outline)}

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); background: rgb(247 215 215); }

.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: .9; background-color:rgba(238,238,238,.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: Manrope, Arial; font-size: var(--text); overflow: auto; flex: 1; background: var(--input-color); }

textarea[compact] { height: 50px; resize: none; }
textarea { background: #FFECB3;  color: #3E2723; }
textarea[large_note] { height: 160px; }
textarea[resize] { resize: vertical }
/* ----- */
input.disabled, .disabled{ pointer-events: none; }
input.input-validation-error ~ i {display:flex; position:absolute; height:30px; width:100%; background-color:transparent; box-shadow:none;}
/* 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, [button] { height: 30px; text-align: center; border-radius: var(--button-radius); 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.rounded{--button-radius:30px;}
.button * { pointer-events: none }

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

.button:active { background-image: var(--press-color); }

.button.open { background-image: var(--over-color); }

.button:active text,
.button:active icon,
.button:active badge,
.button:active tip,
.button:active dot
{ transform: translateY(1px) }

.button text { width: 100%; overflow: hidden; text-overflow: ellipsis; }

a.button:not([outline="none"]) text { text-decoration: underline }

.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.mini.rounded{height:40px}

.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.52px; margin: 0 5px; }

.button.extra { padding: 0; height: 100%; width: 100%; border-radius: 0; margin: 0; }

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

.button.fab icon { margin: auto; }

.primary { background-color: var(--main-color); color: #fff; }

.primary.dark {
    background-color: var(--main-color-dark);
} 
[white] {background-color: white; color:#000;}
.button.preview { margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 60px; height: 60px; padding: 0; position: absolute; z-index: 5 }

.button.preview icon { margin: 0 }

.primary:not(.fab), .button.orange, .button.highlight, .button.special {
    margin: 0 5px;
}

.form_fields > .button{margin:5px;}

/*.primary.mini { margin: 0 }
*/
.button.special { background-color: var(--special-color); color: #fff; }
.button.highlight { background-color: var(--hover); }
.button.outline {box-shadow: inset 0 0 0 1px var(--outline);height: 30px;background-color:#fff}
.button.potentialclaim { background-color: #17e7cf; color: black; }
.button.donotpay { background-color: #feae02; color: black; }
.button.complete { background-color:lightgreen; color: black; }
.button.canceled { background-color:red; color: white; }
.button.orange { background-color: var(--orange-color); color: #fff; }

.button.accent:hover,
.button.accent:active { box-shadow: none; background-color: var(--main-color); color: #fff }

.button.large { min-height: 40px; height: 40px; padding:0 20px  }

.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: 500 }

.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-size: var(--text); white-space: nowrap; position: relative; background: transparent; flex-shrink: 0; overflow: hidden; text-decoration: none; max-width: 100%; }

.caption text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.caption dot { padding: 0 10px; }

@media(max-width:900px) {
    .button.adaptive icon { display: flex }

    .button.adaptive text,
    .option_bar label[separate] > wrap icon + text,
    .option_bar.dynamic label > wrap icon + text
    { display: none }

    .button.adaptive { min-width: 40px; width: 40px; /*min-height: 40px; height: 40px;*/ padding-left: 0; padding-right: 0; }
    .button.adaptive.compact {/* min-width: 30px; width: 30px;*/ min-height: 30px; height: 30px;  }

}

.button[hide="false"],
separator[vertical][hide="false"],
wrap[hide="false"]

{

    overflow:hidden

}

.button[hide="false"],wrap[hide="false"]
{min-width: 40px;/* min-height:30px; */}

.button[hide="true"],
.button.adaptive.compact[hide="true"],
separator[vertical][hide="true"],
wrap[hide="true"]

{width: 0px;min-width:0px;/* min-height:0px; *//* height:0px; */margin: 0;/* opacity:0; */padding:0;pointer-events:none;/* transform: scaleX(0); */}

.button[hide],
separator[hide],
wrap[hide]
{transition: ease-in-out .175s;will-change: min-width;}

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

.field_group [checkbox], .field_group [radio], .field_group [classic] {margin:0 5px;}
/* ----- */

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

[classic] input[indeterminate='true'] ~ box { align-items:center; justify-content:center;box-shadow: inset 0 0 0 2px;background:transparent;}
[classic] input[indeterminate='true'] ~ box check { height:8px; width:8px; background-color: var(--main-color); 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,
.input_cont > .ant-select
{ 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[end] {align-items:flex-end;} 
action[center] {flex:1; justify-content:center;}
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; flex-direction: column; 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.5); 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; border-radius:10px;}
.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 {  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 separator[horizontal] {margin:5px 0;}

.list_menu li > a, .list_menu li > label { text-decoration: none; display: flex; align-items: center; width: 100%; cursor: pointer; }
.list_menu .status {margin:0 5px; display:flex; align-items:center; justify-content:center; padding:0 10px; color:#fff; background-color:var(--main-color); height:25px; border-radius:5px; font-weight:bold;}

@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); }



/* 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; 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 }
separator[horizontal][small] {margin:0; max-width:100%;}

separator[vertical][big] {
    margin-left: 0;
    height: 50px;
}
/* ----- */
/* 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 }

@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.selected a {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; }

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

/**/
.field_group {padding:5px}
.field_group cont {margin:5px}

cont { position: relative; display: flex;/* min-width: 130px;*/ min-height: 35px; align-items: center; margin: 5px; /*border-radius:9px; */  /*flex-shrink: 0;*/ }
cont[column] {flex-direction:column; align-items:flex-start;}


cont input[type="text"],
cont input[type="password"],
cont  textarea[placeholder],
cont > .ant-picker,
cont > .ant-input-number

{ border: none;color: inherit; outline: none; width: 100%; min-height: 35px; padding:0 15px;  overflow: hidden; text-overflow: ellipsis; box-shadow: none; background: transparent; border-radius: 5px; }

cont > .ant-select

{ border: none; outline: none; width: 100%; min-height: 35px; overflow: hidden; text-overflow: ellipsis; box-shadow: none; background: transparent; border-radius: 5px; }

cont textarea[placeholder] {overflow: auto; height:auto; overflow:overlay; min-height:85px; line-height:1.5;margin-top: 10px;resize:none; }
cont textarea[resize] {resize:vertical; min-height:170px}
cont textarea:focus { box-shadow: none; background: none;}

cont .expand {position:absolute; bottom:5px; right:5px;z-index:99; background-color:#f2f2f2;}

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


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

cont > .button{margin:0 5px 0 auto}

cont .k-widget{width:100%; }
cont .k-widget.k-header .k-select{ width:40px; height:40px;display: flex; }
cont .k-widget.k-header .k-select:hover,
cont .k-widget.k-header .k-select:active
{background:none}

cont .k-widget.k-header .k-select .k-icon{margin:auto}

/*.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 em
{font-style: normal;
    font-weight: 700;
    font-size: 13px;
    padding-right: 5px;
    color:red;
}

cont decor label text wrap {/*opacity:.5;*/ white-space: nowrap;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; border-radius:10px; }
cont decor label { display: flex; width: 100%; position: relative; height: 100%; padding: 0 10px; }
cont decor label text {  align-items: center; height:35px; 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 text span:empty{padding:0;}


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: 9px; 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%); opacity:1; }

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

    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%); opacity:1;}
cont textarea:focus ~ decor label text line { transform: scaleX(0) }


cont [class*="ant"] ~ decor label text wrap { transform: none }
cont [class*="ant"] ~ decor label text line { transform: none }

cont [class*="focused"] ~ decor { color: var(--main-color) }
cont [class*="focused"] ~ decor label line,
cont [class*="focused"] ~ decor border { opacity: 1 }
cont [class*="focused"] ~ decor label text wrap { transform: translateY(-50%); opacity:1;}
cont [class*="focused"] ~ decor label text line { transform: scaleX(0) }

cont:hover [class*="disabled"] ~  decor label line,
cont:hover input:disabled ~  decor label line,
cont:hover [class*="disabled"] ~  decor border,
cont:hover input:disabled ~  decor border 
{ opacity: .25 }

cont .hasValue ~ decor label text wrap { transform: translateY(-50%);}
cont .hasValue ~ decor label text line { transform: scaleX(0)}

cont [class*="ant"] input::placeholder,
cont .ant-select-single .ant-select-selector .ant-select-selection-placeholder
{/* opacity: .5;*/ /*transform: translateY(50%); transition: .125s*/ }

cont [class*="focused"] input:focus::placeholder,
cont .ant-select-single.ant-select-focused .ant-select-selector .ant-select-selection-placeholder
{ /*opacity: .5;*/ /*transform: none*/ }


cont .section_title{display: flex; align-items: center; padding: 0 10px 0 0;  } 
cont .section_title > text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
cont .section_title > text[highlight]{opacity:1}
cont .section_title > [classic] input + text{padding-left:0}
cont .section_title > [classic] separator + text {padding-right:0}
cont .form_separator{height:1px;box-shadow:inset 0 -1px  var(--outline);flex:1;margin:15px 0;}


cont[size="micro"] { flex: 1.5 }
cont[size="mini"] { flex: 2.5 }
cont[size="small"] { flex: 3 }
cont[size="medium"] { flex: 4 }
cont[large] { flex: 5; }


/**/
[data-space='30'] {
    padding: 30px;
}
text[data-wrap="wrap"] {
    white-space: normal;
}

[data-weight="600"] {font-weight:600}
/*Arman->*/
/*.validation_info_color_changed {
    background-color: lightgreen;
}
.validation_info_color_warning {
    background-color: lightyellow;
}
.validation_info_color_error {
    background-color: lightpink;
}
*/
.credit_check_days_near {
    background-color: lightyellow;
}
.credit_check_days_over {
    background-color: lightpink;
}
/*<-Arman*/
cont.white {
    background-color: white
}
cont.balance {
    background-color: lightgreen
}
cont.sub-balance {
    background-color: lightyellow
}

.ant-table-cell.gray { background-color: #f3f3f3 }
tbody .ant-table-cell.red_col { color: red }

cont.small {
    width: 120px
}

cont.date {
    min-width: 120px;
    max-width: 120px
}
cont.time {
    min-width: 110px;
    max-width: 110px
}
.form_fields .question {
    min-width: 355px;
    max-width: 355px;
    text-align: right;
}

/*toolbar .search_states {height:35px;}
*/
/*GURGEN*/
cont.country {
    min-width: 175px;
    max-width: 175px;
}
cont.document {width: 300px;}
cont.yesno {width: 80px;}

cont.loadType {width: 130px;}
cont.serviceType {width: 120px;}
cont.serviceGivenAs {width: 150px;}
cont.bookedAs {width: 110px;}
cont.soldAs {width: 100px;}
cont.feetOfPartial {width: 130px;}
cont.commodity {width: 300px;}
cont.weight {width: 100px;}
cont.temperature {width: 140px;}

cont.code {width: 60px;}
cont.name {width: 200px;}
cont.phone {width: 200px;}
cont.email {width: 220px;}
cont.firstname {width: 120px;}
cont.lastname {width: 120px;}

cont.search_state {min-width: 160px; max-width: 160px;}
cont.search_states {min-width: 300px; max-width: 300px;}

cont.w50 {min-width: 50px; max-width: 50px;}
cont.w60 {min-width: 60px; max-width: 60px;}
cont.w70 {min-width: 70px; max-width: 70px;}
cont.w80 {min-width: 80px; max-width: 80px;}
cont.w90 {min-width: 90px; max-width: 90px;}
cont.w100 {min-width: 100px; max-width: 100px;}
cont.w110 {min-width: 110px; max-width: 110px;}
cont.w120 {min-width: 120px; max-width: 120px;}
cont.w130 {min-width: 130px; max-width: 130px;}
cont.w140 {min-width: 140px; max-width: 140px;}
cont.w150 {min-width: 150px; max-width: 150px;}
cont.w160 {min-width: 160px; max-width: 160px;}
cont.w170 {min-width: 170px; max-width: 170px;}
cont.w180 {min-width: 180px; max-width: 180px;}
cont.w190 {min-width: 190px; max-width: 190px;}
cont.w200 {min-width: 200px; max-width: 200px;}
cont.w210 {min-width: 210px; max-width: 210px;}
cont.w220 {min-width: 220px; max-width: 220px;}
cont.w230 {min-width: 230px; max-width: 230px;}
cont.w240 {min-width: 240px; max-width: 240px;}
cont.w250 {min-width: 250px; max-width: 250px;}
cont.w260 {min-width: 260px; max-width: 260px;}
cont.w270 {min-width: 270px; max-width: 270px;}
cont.w280 {min-width: 280px; max-width: 280px;}
cont.w290 {min-width: 290px; max-width: 290px;}
cont.w300 {min-width: 300px; max-width: 300px;}
cont.w310 {min-width: 310px; max-width: 310px;}
cont.w320 {min-width: 320px; max-width: 320px;}
cont.w330 {min-width: 330px; max-width: 330px;}
cont.w340 {min-width: 340px; max-width: 340px;}
cont.w350 {min-width: 350px; max-width: 350px;}
cont.w400 {min-width: 400px; max-width: 400px;}
cont.w450 {min-width: 450px; max-width: 450px;}
cont.w500 {min-width: 500px; max-width: 500px;}
cont.w550 {min-width: 550px; max-width: 550px;}
cont.w600 {min-width: 600px; max-width: 600px;}