*
{
 margin:0; padding:0;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

:root
{
  --main-color: #2AA2C6;
  --main-color-light: #50BCE3;
  --font-color: #555555;
  --red-color: #B00000;
  --yellow-color: #E1C10B;
  --green-color: #00B000;
}

-webkit-autofill
{
  background:none!important;
}

input, button, select, optgroup, textarea
{
  font-family: inherit;
}

body {
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
				/*font-family:"Open Sans",Arial,sans-serif;*/
				font-family:"Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
				font-size:16px;
				line-height:1.3;
				color:var(--font-color);
    overflow-y:auto;
    overflow-x:hidden;
    background:#F0F3F4;
    height:100%;
}

body.loading{overflow:hidden}

.dn{display:none!important}
hr.line{clear:both; font-size:0; height:1px; border:none; margin:0; padding:0; background:#808080}
.push5{clear:both; font-size:0; height:5px; border:none; margin:0; padding:0;}
.push10{clear:both; font-size:0; height:10px; border:none; margin:0; padding:0;}
.push20{clear:both; font-size:0; height:20px; border:none; margin:0; padding:0;}
.inb{vertical-align:middle; display:inline-block!important; // display: inline;}
.bl{display:block!important;}

.flcl{clear:both; font-size:0; height:0; border:none; margin:0; padding:0;}
.nw{white-space:nowrap}
.tc{text-align:center!important;}
.mb0{margin-bottom:0!important;}
.m0{margin:0!important;}
.oh{overflow:hidden}
.oa{overflow:auto}
.vsh{visibility:hidden}

.pr{position:relative}

.br3{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.br5{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.br10{-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.brRound{-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}

.hand{cursor:pointer!important}
textarea {resize: none;}

a{color:#0a58ca; text-decoration:none}
a:hover{text-decoration:underline}

a.blue{color:#0a58ca;}
a.red{color:#ff4560;}
a.yellow{color:#FFAC47;}
a.orange{color:#AC3F40;}

div.avatar{-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background:#F2F2F2 no-repeat center center; background-size:cover;}

#header{z-index:5; position:fixed; left:0; top:0; right:0; height:50px; background:var(--main-color-light); box-shadow: 0 1px 0px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24)}
#header .logo{display:block; position:absolute; background:url(/img/logo.svg) no-repeat left top; background-size:contain; left:20px; top:2px; bottom:2px; width:100px; z-index:1}
#header .avatar{position:absolute; border:4px solid #108DB6; right:20px; top:5px; width:40px; height:40px;  z-index:2; cursor:pointer;}
#header .uName{color:#FFFFFF; line-height:50px; position:absolute; right:70px; top:0; bottom:0; font-weight:bold}

#header .uMenu{position:absolute; right:20px; top:50px; padding:10px 20px; border:1px solid #CCCCCC; background:#FFFFFF; display:none;}
#header .uMenu ul{margin:0; list-style-type:none}
#header .uMenu ul a{color:var(--text-color); font-size:14px}
#header .uMenu ul i{font-style:normal; vertical-align:baseline; margin-right:5px}
#header .uMenu ul li.exit{color:#B00000!important}
#header .uMenu:before {
																			   content: '';
																			   border: 6px solid transparent;
																			   border-bottom: 6px solid #FFFFFF;
																			   position: absolute;
																			   right: 13px;
																			   top: -12px;
																			   width: 0;
																			   z-index:10;
																			}
#header h1{display:block; position:absolute; margin:0; padding:0; font-size:28px; left:250px; top:0px; font-weight:normal; line-height:50px; color:#FFFFFF}

#searchForm{display:block; position:absolute; left:240px; top:7px; padding-left:40px}
#searchForm fa{position:absolute; left:0; top:0; line-height:30px; font-size:26px; color:#0C66AE}
#searchForm [type=submit]{visibility:hidden}
#searchForm [type=text]{border:none; background:none; border-bottom:1px solid #0C66AE; color:#0C66AE; box-shadow:none; border-radius:0; font-size:16px; width:250px;}

#menu{display:block; position:fixed; left:0px; top:50px; bottom:0; width:230px; overflow:auto; background:#FFFFFF; z-index:4;  box-shadow: 0 2px 5px 0 rgba(239, 235, 235, 0.16), 0 2px 10px 0 rgba(72, 70, 70, 0.12)}
#menu .topBg{position:absolute; left:0; right:0; top:0; height: 70px; background:#FFFFFF url(/img/menu_bg.png) no-repeat -2px -2px;}
#timeZone{padding-top:110px; text-align:center; padding-bottom:20px}
#timeZone b{font-weight:500;}
#timeZone div{font-size:14px;}
#timeZone div:first-child{font-size:70px}

#devMode{margin:5px; padding:5px; border:1px solid #970000; background: #FFAEAE; text-align:center; font-size:150%}

#menu .menuLink{cursor:pointer; display:block; padding:20px; color:var(--text-color); text-decoration:none;}
#menu .menuLink.active,
#menu .menuLink:hover{border-left:4px solid #C1B8B8; padding-left:16px; background-color:#D5FBFD}
#menu .menuLink.active{border-left-color:var(--main-color)}

#menu .slidedContent{}
#menu .slidedContent div{background:url(/img/dropdown.png) no-repeat right 20px center; }
#menu .slidedContent div.active{background-image:url(/img/dropup.png)}
#menu .slidedContent ul{border-left:4px solid #C1B8B8; display:block; margin:0; padding:0; list-style-type:none; background:#F6F8F8; border-top:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD; }
#menu .slidedContent ul .menuLink{padding-left:36px;}
#menu .slidedContent ul .menuLink.active,
#menu .slidedContent ul .menuLink:hover{border-left-color:#2196F3; padding-left:32px}
#menu .slidedContent ul a:not(.button){padding-top:15px; padding-bottom:15px}

#menu .slidedContent ul input[type=button], #menu .slidedContent ul a.button{margin:15px 0 15px 36px!important}


#menuMobileBtn{position:absolute; left:10px; top:10px; bottom:0; height:30px; width:35px; cursor:pointer; z-index:1; display:none}
#menuMobileBtn hr{display:block; position:absolute; margin:0; padding:0; border:none; height:4px; left:0; right:0; top:13px; background:#FFFFFF;}
#menuMobileBtn hr:first-child{top:0;}
#menuMobileBtn hr:last-child{bottom:0; top:auto}


#shell{z-index:1; position:fixed; padding:10px; left:300px; right:0; bottom:10px; top:50px; background:#FFFFFF; border:1px solid #CCCCCC; border-right:none; overflow:auto}

#shell_h1{z-index:3; position:fixed; left:300px; top:0; width:500px; border-left:1px solid #CCCCCC; padding-left:10px; line-height:40px; font-size:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

#shell.with_buttons{bottom:50px}
#shell_buttons{z-index:5; position:fixed; left:300px; right:0; bottom:10px; white-space:nowrap;}

#shell.with_filter{top:100px}
#shell_filter{z-index:2; position:fixed; left:300px; right:0; top:50px; height:50px; background:#C5DAED; padding-right:10px; border:1px solid #CCCCCC; border-bottom:none;}
#shell_filter table{width:100%; height:100%}
#shell_filter table td.btn{font-size:24px; padding:10px 18px; background:#37BEFF; cursor:pointer; border-right:1px solid #CCCCCC;
	background: #FFFFFF;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e6e6e6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#e6e6e6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
}
#shell_filter table td.btn.wider{padding:10px}
#shell_filter table td.btn:hover{background: #DDF4FF;}

#shell_filter form{display:block; height:50px; position:relative;}
#dop_filter_data{position:absolute; left:0; top:49px; right:-10px; padding:10px; padding-left:105px; background:#D5E5F2; border-bottom:1px solid #808080}

input[type=button], a.button, div.button
{
 display: inline-block;
	vertical-align: middle;
	border: 1px solid var(--font-color);
	color:var(--font-color);
	padding: 10px 25px;
	margin:0;
	line-height: 1;
	font-size: 14px;
	position: relative;
		-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-weight: normal;
	cursor:pointer;
	/*transition: all 0.3s ease;*/
	box-shadow: 0 1px 0px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
	background:#FFFFFF;
 -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
 text-decoration:none;
}

input[type=button]:hover, a.button:hover, div.button:hover
{
 border-color: var(--main-color);
	color:var(--main-color);
}

input[type=button].red:hover, a.button.red:hover, div.button.red:hover{border-color: 1px solid var(--red-color);	color:var(--red-color);}
input[type=button].yellow:hover, a.button.yellow:hover, div.button.yellow:hover{border-color: 1px solid var(--yellow-color);	color:var(--yellow-color);}
input[type=button].green:hover, a.button.green:hover, div.button.green:hover{border-color: 1px solid var(--green-color);	color:var(--green-color);}

/*

div.button.green:hover {
	border-color: #7CB342;
	background: #8BC34A;
}

div.button.red:hover {
	border-color: #9C2828;
	background: #EB8A8A;
}

div.button.yellow:hover {
	border-color: #FDD835;
	background: #FFEB3B;
}
*/

.state{text-align:center; background:#CCCCCC; color:#4a4a4a; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding:5px; font-size:12px; }
.state.green{background:#8BC34A;}
.state.red{background:#FF7D7D;}
.state.yellow{background:#FFEB3B;}

.state date{display:block; white-space:nowrap; font-size:10px; line-height:1; padding-top:3px; }

div.button.i{padding-left: 25px; padding-right: 20px;}
div.button i{display:block; position:absolute; font-family:fontAwesome; font-size:16px; left:7px; top:8px; font-style: normal}


.blocker{position:fixed; left:0; top:0; bottom:0; right:0;z-index:999999; text-align:center; padding:10px; overflow:auto}
#loading div{display:inline-block; margin-top:-10px; padding:10px 20px; font-size:16px; background:#FFFFFF url(/img/clock.gif) no-repeat 10px center; padding-left:50px; border:3px solid var(--main-color); border-top:none; color:#444A4D;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;}


.blocker.message{background-image:url(/img/bp60.png); padding-top:10%;}
.blocker.message div.cnt{line-height:1.3; text-align:center; min-width:300px; max-width:500px; display:inline-block;  font-size:inherit;  background:#DCD4D1 no-repeat; padding-bottom:20px; overflow:hidden;}
.blocker.message div.h1{background:var(--main-color); padding:20px; text-align:center; font-size:26px; color:#FFFFFF;}
.blocker.message div.txt{padding:20px; padding-bottom:20px; overflow:auto}
.blocker.message div.txt pre{text-align:left}
.blocker.message a.button:not(.red){display:block!important}
.blocker.message a.button fa{margin-right:5px}

/*.blocker.message.bad div.h1{background-color:#FFCCCC}*/

/*
.blocker.message div.cnt{line-height:1.3; text-align:left; min-width:300px; max-width:500px; display:inline-block; padding:10px; font-size:inherit; border-top: 3px solid #992023;  padding-top:50px; background:#FFFFFF no-repeat 10px 10px; background-size:30px auto;}
.blocker.message.good div.cnt{background-image: url(/img/ok.svg); border-top-color:#008000}
.blocker.message.bad div.cnt{background-image: url(/img/warn.svg); border-top-color:#DD0000}
.blocker.message.warn div.cnt{background-image: url(/img/warn2.svg); border-top-color:#FF8040}
.blocker.message.info div.cnt{background-image: url(/img/info.svg); border-top-color:#0080C0}
.blocker.message .button{font-weight:normal!important}
*/

.blocker.flywin{background-image:url(../img/bp60.png); text-align:left;}
.blocker.flywin .shell{position:absolute; left:30%; right:30%; top:5%; bottom:5%; background:#FFFFFF;
-webkit-box-shadow: 0px 0px 10px 2px rgba(80, 80, 80, 0.4);
-moz-box-shadow: 0px 0px 10px 2px rgba(80, 80, 80, 0.4);
box-shadow: 0px 0px 10px 2px rgba(80, 80, 80, 0.4);}
.blocker.flywin .h1{position:absolute; height:60px; line-height:60px; font-size:30px; top:0; right:0; left:0; padding:0 10px; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--main-color); text-align:center}
.blocker.flywin .h1 i{display:block; position:absolute; font-family:fontAwesome; font-size:24px; right:20px; top:0; font-style: normal; cursor:pointer; color:#FFFFFF}

.blocker.flywin .content{position:absolute; top:60px; bottom:0; right:0; left:0; padding:20px; overflow:auto; background:#FFFFFF}
.blocker.flywin .content.with_buttons{bottom:60px;}

.blocker.flywin .btns{position:absolute; overflow-y:hidden; white-space:nowrap; height:60px; bottom:0; right:0; left:0; padding:10px; background:#F2F2F2; border-top:1px solid #808080; text-align:center}
/*
.blocker.flywin .btns div, .blocker.flywin .btns input{margin-right:5px;}
.blocker.flywin .btns div:last-child,.blocker.flywin .btns input:last-child{margin-right:0;}
*/
.blocker.flywin .btns{display:flex; gap:10px; justify-content:center;}
.blocker.flywin .btns .siteButton{padding:0 20px; display:flex; align-items:center; justify-content:center; gap:5px;}

.blocker.flywin .content.with_filter{left:300px; border-left:1px solid #CCCCCC}
.blocker.flywin .btns.with_filter{padding-left:310px;}

.blocker.flywin .filter{position:absolute; left:0; top:40px; padding:10px; bottom:0; width:300px; background:#F2F2F2}

.blocker.flywin.flexView{}

/*--------------------------------------------------------------------------------------------------------------------*/

.chzn-container-single .chzn-single,
.chzn-container-multi .chzn-choices
{
  border:1px solid #ACACAC!important;
  color:#455A64!important;
  font-size:14px!important;
  line-height: 1.2!important;
  background:#FFFFFF!important;

  box-shadow:none!important;
  -webkit-border-radius: 3px!important; moz-border-radius: 3px!important; border-radius: 3px!important;
  padding:5px!important;
  height:auto!important;
}

.chzn-container-multi .chzn-choices .search-field input{height:auto}

.chzn-container-single .chzn-single div b
{
	padding:0!important;
	background-position: center center!important;
	background-image:url(/img/dropdown.png)!important
}

.chzn-container-single .chzn-single div
{
	 width:30px!important;
}

.chzn-drop{border-color:var(--main-color)!important;}

.chzn-container-single .chzn-drop
{
  border:1px solid var(--main-color)!important;
  box-shadow:none!important;
  -webkit-border-radius: 0!important; moz-border-radius: 0!important; border-radius: 0!important;
  background:#FFFFFF!important; color:#000000!important;
}

.chzn-container-single.chzn-container-active .chzn-single{border:1px solid var(--main-color)!important; color:#000000!important}

.chzn-results{margin:0!important;padding:0!important; border-top:1px solid #808080!important;}
.chzn-results li{padding: 10px!important; border-bottom:1px solid var(--main-color)}
.chzn-results li:last-child{border-bottom:none}
.chzn-results li:hover, .highlighted{background:#4681D4 no-repeat right center!important;}

.chzn-container .chzn-results .no-results{background:#FF8080!important}

/*--------------------------------------------------------------------------------------------------------------------*/

.formLine{margin-bottom:10px;}
.formLine .name{margin-bottom:5px;}
.formLine .name i{font-style: normal; color:#FF8040}
.formLine .hint{margin-bottom:5px; color:#808080; font-size:12px;}

.formLine.impblock{padding:10px; border:1px solid #008000; background:#C6FFC6;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

.formLine .input{position:relative;}
.formLine .input .swap{position:absolute; right:5px;  top:5px; bottom:5px; width:25px; background:url(/img/swap.png) no-repeat center center; background-size:contain; cursor:pointer; opacity:1}
.formLine .input .swap{filter: grayscale(100%); transition: 0.5s;}
.formLine .input .swap:hover{opacity:1; filter: grayscale(0%);}

.formLine .input .dice{position:absolute; right:35px;  top:5px; bottom:5px; width:25px; background:url(/img/dice.png) no-repeat center center; background-size:contain; cursor:pointer; opacity:1}
.formLine .input .dice{filter: grayscale(100%); transition: 0.5s;}
.formLine .input .dice:hover{opacity:1; filter: grayscale(0%);}

/*.formLine .input .swap{filter: invert(50%) sepia(30%) saturate(20%) brightness(100%) contrast(100%)}*/

.formLine .input select{width:100%;}

.formLine .input input,
.formLine .input textarea,
.formLine .input .likeInput
{
   width:100%; background:#FFFFFF; font-family:inherit; font-size:14px; padding:5px;  line-height:1.2; border:1px solid #ACACAC; color:#455A64; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
}

input[type=text]:focus,
.formLine .input input:focus,
.formLine .input textarea:focus,
.formLine .input .likeInput:focus
{
   outline: none; border-color:var(--main-color); /* border-top-color:#5794BF; color:#000000;*/
}

.formLine .input input.err,
.formLine .input textarea.err,
.formLine .input .likeInput.err
{
   border-color:#ff605f; color:#ff605f;
}

.formLine .input input:disabled,
.formLine .input textarea:disabled,
.formLine .input .likeInput:disabled
{
   background-color:#F2F2F2!important; color:#CCCCCC!important; cursor:default!important; border-color:#CCCCCC!important
}

.formLine eye{display:block; position:absolute; z-index:10; right:-9px; top:10px; bottom:10px; width:45px; cursor:pointer; background:url(/img/eye.svg) no-repeat center center; background-size: contain;}
.formLine eye.hide{background-image:url(/img/eye_hide.svg)}

.formLine eye, .formLine eye.hide{filter: invert(50%) sepia(30%) saturate(20%) brightness(100%) contrast(100%)}

.formLine .chkBoxArrLine{position:relative; padding-left:27px; margin-bottom:10px; padding-top:4px;}
.formLine .chkBoxArrLine:last-child{margin-bottom:15px}
.formLine .chkBoxArrLine chk{display:block; position:absolute; left:0; top:3px;}
.formLine .chkBoxArrLine chk .jq-checkbox{width:20px!important; height:20px!important;}
.formLine .chkBoxArrLine div small{font-size:12px; color:#8F816E; padding-top:5px; display:block;}

.formLine.style2{margin-bottom:30px; color:var(--font-color)}
.formLine.style2 .name{margin:0; padding-bottom:10px; font-size:18px; color:inherit}

.formLine.style2 .dopData{font-size:16px; padding-top:5px}
                                                                   /*color:#1D0000;*/
.formLine.style2 .chkBoxArrLine{color:#1D0000; font-size:inherit; padding-left:0;  padding-right:40px; padding-top:10px; padding-bottom:13.5px; border-bottom:2px solid #AEA292}
.formLine.style2 .chkBoxArrLine chk{right:0; left:auto; top:2px; }

.formLine.style2 .chkBoxArrLine chk .jq-checkbox{width:30px!important; height:30px!important; border:2px solid #6768AB; background-color:inherit}
.formLine.style2 .chkBoxArrLine chk .jq-checkbox div{background:url(/img/check.svg) no-repeat center center; background-size:contain; filter: invert(0%) sepia(0%) saturate(100%) brightness(20%) contrast(20%)}

form formLine.style2:last-child{margin-bottom:0;}

.formLine.style2 .input input,
.formLine.style2 .input textarea,
.formLine.style2 .input .likeInput
{
  background:none; border:none; border-bottom:2px solid var(--font-color);
  padding:10px 0px!important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
  color:var(--font-color); font-size:20px; line-height:1;
}

.formLine.style2 .input textarea{border:1px solid var(--font-color); margin-top:10px; padding:5px!important}

.formLine.style2 .input input:focus,
.formLine.style2 .input textarea:focus,
.formLine.style2 .input .likeInput:focus
{
	outline: none;
	border-color:var(--main-color);
	/*
	-webkit-box-shadow:0px 0px 5px 3px rgba(240,240,240,0.9);
	-moz-box-shadow: 0px 0px 5px 3px rgba(240,240,240,0.9);
	box-shadow: 0px 0px 5px 3px rgba(240,240,240,0.9);
	*/
}

.formLine.style2 .name{padding-bottom:0;}

.formLine.style2 .chzn-container-single .chzn-single
{
  border:1px solid #F0F0F0!important;
  color:var(--font-color)!important;
  font-size:14px!important;
  line-height: 1.2!important;
  background:none!important;

  box-shadow:none!important;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  padding:15px 10px!important;
  height:auto!important;
}

.formLine.style2 .chzn-container-single.chzn-container-active .chzn-single{
	border:1px solid #AC3F40!important;
-webkit-box-shadow:none!important;
	-moz-box-shadow: none!important;
	box-shadow: none!important;
}

.formLine.style2 .chzn-results{margin:0!important;padding:0!important; border:none!important;}

.formLine.style2 .chzn-container-single .chzn-drop{border-color:#AC3F40!important;}

.formLine.style2 .chzn-results li{border-bottom:1px solid #AC3F40}

.formLine.style2 .input input.err,
.formLine.style2 .input textarea.err
{
   border-color:#FF0000; color:#ff605f;
}

.formLine.style2 .input input[type=text]{padding-right:40px!important; text-overflow:ellipsis}

/*--------------------------------------------------------------------------------------------------------------------*/


.fa,fa{font-family:fontAwesome; font-style:normal;}

.switcher{display:inline-block; vertical-align:middle; cursor:pointer; position:relative; width:40px; height:20px;}
.switcher i{display:block; position:absolute; left:5px; top:8px; bottom:8px; right:5px; background:#CCCCCC; z-index:0}
.switcher b{display:block; position:absolute; width:20px; top:0; height:20px; background:#464646; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index:1}
.switcher.pos0 b{left:0; background-color:#800000}
.switcher.pos1 b{right:0; background-color:#008000}


.dataTBL{border-collapse: collapse;}
.dataTBL th,
.dataTBL td{color:var(--text-color); padding:13px 10px; text-align:left; font-weight:normal; vertical-align:middle; background:#FFFFFF; border:1px solid #F4F4F4}
.dataTBL th{border-color:#DDDDDD; font-weight:bold}
.dataTBL td{background-color:#F9F9F9}
.dataTBL tbody tr:nth-child(2n) td{background:#FFFFFF}

.dataTBL tr.deleted td
{
   opacity:0.5;
   text-decoration: line-through;
   [act]
   {
   	  display:none;
   }
}

.dataTBL th.sort{padding:0;}
.dataTBL th.sort > div{padding:13px 10px; position:relative; padding-right:33px;}
.dataTBL th.sort > div > a{position:absolute; right:0; top:0; height:50%; width:20px; font-size:90%; display:flex; align-items:center; justify-content:center; text-decoration:none; color:inherit}
.dataTBL th.sort > div > a:last-child{transform:rotate(180deg); top:auto; bottom:0;}
.dataTBL th.sort > div > a.active{color:#B00000}

/*
.dataTBL i.fa{font-style: normal; font-size:22px; margin-right:5px; margin-top:-2px; margin-bottom:5px; display:inline-block; vertical-align:top; cursor:pointer;}
.dataTBL i.fa.edit{color:#D96C00}
.dataTBL i.fa.delete{color:#800040}

.iFilterHint{border:1px solid #AABBCD; background:#D9E7F4; color:#363F44; font-size:12px; line-height:1.2; padding:7px; margin-bottom:10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.iFilterHint a{color:#D20000; display:block; padding-top:5px; text-decoration:underline}
.iFilterHint a:hover{text-decoration:none}
*/

#trace{position:fixed; bottom:20px; right:20px; z-index:1000000; text-align:left; font-size:11px; line-height:20px;}
#trace div{color:#000000; border:1px solid #000000; padding:0 5px; background:#FFFFFF; height:22px; overflow:hidden; cursor:default; width:268px; white-space:nowrap}
#trace div:hover{height:500px; width:100%; overflow:auto; white-space:normal}
#trace p{display:block; margin:0; padding:1px; padding-left:20px}

.cubeButton{display:inline-block; border:1px solid #A5A5A5; vertical-align:top; margin-right:10px; margin-top:10px; padding:7px; width:90px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
text-align:center;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f7f7f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}
.cubeButton i{display:block; color:#999999; line-height:40px; font-size:28px; font-style:normal; font-family:fontAwesome}
.cubeButton n{display:block; color:#000000; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cubeButton l{display:block; background:#FFFF80; color:#FFFFFF; font-size:12px; padding:3px; line-height:1; margin-top:5px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
}

.cubeButton.green l{background-color:#3EB157}
.cubeButton.dark l{background-color:#15295C}
.cubeButton.yellow l{background-color:#B9B900}

.cubeButton:hover{
	border-color:#A5A5A5
}

.cubeButton:hover i,
.cubeButton:hover n{
	color:#F56645;
}

.jq-checkbox{width:15px; height:15px; top:0; background: #F6F6F6; box-shadow:none;}
.jq-checkbox.checked div{width:auto; height:auto; margin:0; box-shadow:none; position:absolute; left:2px; top:2px; right:2px; bottom:2px; background:var(--main-color)}

.jq-radio{width:15px; height:15px; top:0; background: #F6F6F6; box-shadow:none; position:relative}
.jq-radio.checked div{border-radius: 50%; width:auto; height:auto; margin:0; box-shadow:none; position:absolute; left:2px; top:2px; right:2px; bottom:2px; background:var(--main-color)}


.iHint{text-align:left; border:1px solid #2BB0D7; background:#ecf0ff; font-size:14px; line-height:150%;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; padding:10px}
.iSmallHint{font-size:12px; line-height:16px; color:#627DA8; padding:0 0 5px 20px; background:url(/img/info.svg) no-repeat left top}
.iHint.orange{border-color:#FF8800; background:#FFFF80}
.iHint.purple{border-color:#800080; background:#FFD5FF}

#error404{position:fixed; left:10%; top:10%; bottom:10%; right:10%;}
#error404 i{display:block; position:absolute; left:0; right:0; top:0; bottom:30px; background:url(/img/404.svg) no-repeat center center; background-size:contain}
#error404 a{display:block; position:absolute; left:0; bottom:0; right:0; text-align:center}

#mailStop{position:fixed; left:10%; top:10%; bottom:10%; right:10%;}
#mailStop i{display:block; position:absolute; left:0; right:0; top:0; bottom:30px; background:url(/img/mail_stop3.svg) no-repeat center center; background-size:contain}
#mailStop div{display:block; position:absolute; left:0; bottom:0; right:0; text-align:center; font-size:26px;}

.no_data_found{color:#DF0000}

.fancybox-overlay{z-index:1000000!important}
.fancybox-opened{z-index:1000001!important}

.dataBlocks{margin:-10px;}
.dataBlocks .block{margin:10px; display:inline-block; vertical-align:top; border:1px solid #DADADA; background:#FFFFFF; width:47%;}
.dataBlocks .blockHeader{position:relative; background:#FEFFFF; border-bottom:1px solid #DADADA; height:55px}
.dataBlocks .blockHeader .blockName{position:absolute; right:50px; left:10px; top:15px; font-size:18px; overflow:hidden; white-space:nowrap; line-height:1.1}
.blockMenu{position:relative; margin-top:-3px}
.blockMenu m{display:block; z-index:0}
.blockMenu m.fa{font-size:26px; display:block; position:relative; cursor:pointer; padding-right:15px; z-index:0}
.blockMenu m.fa .fa{display:block; position:absolute; right:0; top:7px; font-size:12px; z-index:0}
.blockMenu .menuSelf{border:1px solid #DADADA; background:#FEFFFF; position:absolute; right:-10px; top:-8px; z-index:10}
.blockMenu .menuSelf i{padding-right:10px; font-size:18px; margin:0;}
.blockMenu .menuSelf .edit i{color:#D96C00}
.blockMenu .menuSelf .del i{color:#800040}
.blockMenu .menuSelf .stat i{color:#0080C0}
.blockMenu .menuSelf div{padding:10px; border-bottom:1px solid #F2F2F2; cursor:pointer; line-height:1; white-space:nowrap}
.blockMenu .menuSelf div:hover{background:#F2F2F2}
.blockMenu .menuSelf div:last-child{border-bottom:none}

.switcher{display:inline-block; vertical-align:middle; cursor:pointer; position:relative; width:40px; height:20px;}
.switcher i{display:block; position:absolute; left:5px; top:8px; bottom:8px; right:5px; background:#CCCCCC; z-index:0}
.switcher b{display:block; position:absolute; width:20px; top:0; height:20px; background:#464646; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index:1}
.switcher.pos0 b{left:0; background-color:#800000}
.switcher.pos1 b{right:0; background-color:#008000}

.blockMenu .menuSelf .switcher{width:16px; height:16px; margin-right:10px}
.blockMenu .menuSelf .switcher i{display:none}
.blockMenu .menuSelf .switcher b{width:16px; height:16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}

.dataBlocks .blockContent{padding:10px}
.dataBlocks .blockContent .inLine{padding-bottom:5px}
.dataBlocks .blockContent .inLine:last-child{padding-bottom:0;}
.dataBlocks .blockContent .inLine.gray{color:#808080}

@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
-ms-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
-ms-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
-ms-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
-ms-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-ms-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

.swing1 {
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
color:#0080C0;
}

swing{display:block;}

.rounded{-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border:none; background:#FFFFFF; opacity: 1}
.rounded:hover{opacity:1}

.rounded.p10{padding:10px;}
.rounded.no{opacity:1!important}

.lift {
	transition: box-shadow .25s ease, transform .25s ease;
}

.lift:focus, .lift:hover {
	box-shadow: 0 6px 1rem rgba(25,24,24,0.1),0 0.5rem 1rem -0.75rem rgba(25,24,24,0.1) !important;
	transform: translate3d(0, -3px, 0);
}

.db{display:block; width:100%}

.siteButton{cursor:pointer; border:none; background:var(--main-color); color:#FFFFFF; text-transform:uppercase; padding:20px 30px; font-weight: 700;}
.siteButton:hover{-webkit-box-shadow: 0px 0px 10px 2px rgba(80, 80, 80, 0.5);
-moz-box-shadow: 0px 0px 10px 2px rgba(80, 80, 80, 0.5);
box-shadow: 0px 0px 10px 2px rgba(80, 80, 80, 0.5);}

.siteButton fa.fn{font-weight:normal}

.siteButton.disabled{background:#808080; cursor:default!important; opacity:0.5}
.siteButton.disabled:hover{-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background:#808080}



.fastFilter{border-bottom:1px solid #f0f0f0; margin-bottom:10px; font-size:14px; line-height:18px;}
.fastFilter a{text-decoration:none; color:inherit; cursor:pointer; white-space:nowrap; display:inline-block; margin-right:10px; vertical-align:top; margin-bottom:-1px; padding:5px 15px; white-space:nowrap}
.fastFilter a:last-child{margin-right:0}

.fastFilter a.active,
.fastFilter a:hover{color:#004080; border-bottom:2px solid #004080}

.fastFilter a span{display:inline-block; margin-right:7px; vertical-align:center;}
.fastFilter a span:last-child
{
  margin-right:0;
	 -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	 background:#808080; color:#FFFFFF; font-size:12px; padding:0 7px;
}

.fastFilter a span.blue{background-color:#4FB8C9}
.fastFilter a span.green{background-color:#198754}
.fastFilter a span.yellow{background-color:#FFBA33}
.fastFilter a span.red{background-color:#DC3545}
.fastFilter a span.gray{background-color:#606060}


.psevdo_link{cursor:pointer; line-height:120%; color:#000000; border-bottom:1px dashed #000000; text-decoration:none; display:inline-block; // display: inline; }
.psevdo_link:hover{border-bottom-style:solid;}

.psevdo_link.blue{color:#0080FF; border-bottom-color:#0080FF}

.xdsoft_datetimepicker{z-index:999999!important}

.switchBtns a{display:inline-block; position:relative; vertical-align:top; border:2px solid #BFBCBA; color:inherit; text-decoration:none; width:31px; height:30px}
.switchBtns a:first-child
{
	  margin-right:2px;
	  border-bottom-left-radius: 10px 10px;
	  border-top-left-radius: 10px 10px;
}

.switchBtns a:last-child
{
	  border-bottom-right-radius: 10px 10px;
	  border-top-right-radius: 10px 10px;
}

.switchBtns a b {
 display:block;
 position:relative;
}
.switchBtns a b:after {
 content: '';
 position: absolute; /* Абсолютное позиционирование */
 left: 0; top: 6px; /* Положение треугольника */
 border: 7px solid transparent;
 border-right: 12px solid #29282D;
}

.switchBtns a:last-child b:after
{
  border-right: none;
  left:8px;
  border-left: 12px solid #29282D;
}

.switchBtns a.mdl{margin-right:2px;}
.switchBtns a.mdl b:after
{
  border:none;
  background:#29282D;
  left:5px; right:5px; bottom:5px; top:5px; height:17px;
  -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}

.line3Menu{position:relative; width:30px; height:21px; overflow:visible; margin-right:10px;}
.line3Menu cl{display:block; position:absolute; left:0; top:0; bottom:0; right:0; background:url(/img/line3.svg) no-repeat center center; cursor:pointer; background-size:contain; z-index:0;}
.line3Menu.sel cl{background-image:url(/img/line3_sel.svg); z-index:2}
.line3Menu cl{filter: contrast(0);}

.line3Menu zone{display:none; position:absolute; right:-10px; top:20px; background:#DCD4D1; padding:15px; max-width:300px; text-align:left; font-size:18px; z-index:1}

.line3Menu zone:before
{
   content: '';
   border: 12px solid transparent;
   border-bottom: 25px solid #DCD4D1;
   position: absolute;
   right: 2px;
   top: -22px;
   width: 0;
}

.line3Menu.sel zone{display:block;}

.line3Menu zone div{cursor:pointer; padding:5px; position:relative; white-space:nowrap;}
.line3Menu zone div:after{
 content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	opacity: 0;
	border-left: 2px solid #8F816E;
	/*
	-webkit-box-shadow: inset 0px -1px 0px 0px #444444;
	-moz-box-shadow: inset 0px -1px 0px 0px #444444;
	box-shadow: inset 0px -1px 0px 0px #444444;
	*/
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.line3Menu zone div:hover:after{opacity: 1; left: -3px;}

.lineMenu{position:relative;}

.controllerZone{text-align:Center; }
.controllerZone div:first-child{margin-right:20px;}

.tableHeader{height:150px; position:relative; margin-bottom:40px}

.tableHeader .switchBtns{position:absolute; top:14px; left:2px;}
.tableHeader .thisDate{color:#29282d; font-size: 50px; font-weight: 400; position:absolute; left:100px; top:0px;}
.tableHeader .thisDate font{color:#625c60; font-size: 35px;}

.tableHeader .dateTbl{position:absolute; left:390px; top:0px;}
.tableHeader .dateTbl td{color:#625c60; font-size: 50px; font-weight: 400; padding-right:5px;}
.tableHeader .dateTbl tr:first-child td{padding-bottom:10px}

.tableHeader .line3Menu{position:absolute; right:0; top:20px;}

.counterBlock{color:#29282d; font-size: 30px; position:absolute; top:85px; left:0;}
.counterBlock.price{left:180px}
.counterBlock b{display:block; font-size:18px; font-weight:normal; padding-bottom:15px}
.counterBlock b{font-weight:100;}

a.trelloLink{color:#0066CC; position:relative; display:inline-block; vertical-align:middle; line-height:18px; font-size:15px; padding-left:22px; text-transform:lowercase;}
a.trelloLink:after
{
	 content: '';
  position: absolute; /* Абсолютное позиционирование */
  left: 0px; top: 1px;
  width:18px; height:18px;
  background:url(/img/trello.svg) no-repeat left top; background-size:contain;
  display:block;
}

.formLine.style2 .chzn-container-single .chzn-single,
.formLine.style2 .chzn-container-multi .chzn-choices
{
  border:none!important;
  border-bottom:2px solid var(--font-color)!important;
  color:var(--font-color)!important;
  font-size:20px!important;
  background:none!important;

  box-shadow:none!important;
  -webkit-border-radius: 0!important; moz-border-radius: 0!important; border-radius: 0!important;
  padding:11.5px 0px !important;
  height:auto!important;
}

.formLine.style2 .chzn-container-single .chzn-single div
{
   top:auto; left:auto; right: 0; bottom: 5px; height:auto; width:auto!important; /* Положение треугольника */
   border: 7px solid transparent;
   border-top: 12px solid #8F816E;
}

.formLine.style2 .chzn-container-single .chzn-single div b
{
	 display:none;
}

.formLine.style2 .chzn-drop{border:none!important;}

.formLine.style2 .chzn-container-single .chzn-drop
{
  border:none!important;
  box-shadow:none!important;
  -webkit-border-radius: 0!important; moz-border-radius: 0!important; border-radius: 0!important;
  color:#625c60!important;
  background:#F5F5F5!important;
  font-size:18px; line-height:1;
  margin-top:15px;
}

.formLine.style2 .chzn-container-single .chzn-drop:after
{
   content: '';
   border: 10px solid transparent;
   border-bottom: 12px solid #F5F5F5;
   position: absolute;
   left: 42px;
   margin-left: -12px;
   top: -22px;
   width: 0;
   z-index:11
}

.formLine.style2 .chzn-container-single.chzn-container-active .chzn-single
{
  border:none!important;
  border-bottom:2px solid var(--main-color)!important;
}

.formLine.style2 .chzn-search{padding:5px 10px}

.formLine.style2 .chzn-results{margin:0!important;padding:0!important; border-top:none;}
.formLine.style2 .chzn-results li{padding: 10px!important; border-bottom:none}
.formLine.style2 .chzn-results li:last-child{border-bottom:none}
.formLine.style2 .chzn-results li:hover,
.formLine.style2 .chzn-results li.highlighted,
.formLine.style2 .chzn-results li.result-selected{background:none!important; padding-left:15px!important; color:inherit!important; border-left:2px solid var(--main-color)}
.formLine.style2 .chzn-results li.result-selected{border-left:2px solid var(--green-color)}

.formLine.style2 .chzn-container .chzn-results .no-results{background:#FF8080!important}

body{padding-top:70px;}
.mainPage{margin-left:250px; margin-right:20px; min-height:calc(100% - 20px); padding:15px; background:#FFFFFF; border:1px solid #DFE1E2}
.mainPage h1{display:block; font-weight:normal; font-size:36px; margin:0; padding:0; padding-bottom:20px}


#progressBar{position:fixed; left:0; right:0; top:0; bottom:0; display: flex; overflow: auto; padding:10px; z-index:1000000; background:url(/img/bp60.png)}
#progressBar div{margin:auto; padding:30px; min-width:200px; background:#FFFFFF; overflow:hidden; text-align:center; position:relative; padding-bottom:20px; border:1px solid #CCCCCC}
#progressBar div img_l{display:block; height:50px; background:url(/img/sand-timer.gif) no-repeat center center; background-size:contain}
#progressBar div text{display:block; padding-top:5px;}

#progressBar bar{display:block; position:absolute; left:0; bottom:0; right:0; height:10px;}
#progressBar line{display:block; position:absolute; left:0; bottom:0; top:0; width:0; background-color:var(--main-color)}

.pages_block{position:relative; text-align:center; padding:20px 60px}
.pages_block i{white-space:nowrap; font-style:normal; margin:0 10px; display:inline-block; // display: inline;}
.page{cursor:pointer; border:1px solid #DDDDDD; text-decoration:none; white-space:nowrap; background:#FFFFFF; color:var(--main-color);; padding:5px 9px; margin:0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; line-height:1; display:inline-block; // display: inline;}
.page:hover{border-color:var(--main-color); text-decoration:none;}
.page.prev{position:absolute; left:0; margin:0; padding:5px}
.page.next{position:absolute; right:0; margin:0; padding:5px}

.pages_block .countInfo{position:absolute; left:0; top:0; bottom:0; padding-top:25px; font-size:14px;}

.page.sel{border-color:var(--main-color); cursor:default; color:#FFFFFF; background:var(--main-color)}

#pageLoading{position:fixed; left:0; top:0; right:0; bottom:0; background:#FFFFFF url(/img/sand-timer.gif) no-repeat center center; background-size:auto 100px; z-index:10000;}

#form_MakeFilter
{
	  display:flex;
   align-items: flex-start;
   justify-content: flex-end;
   position:relative;
   pointer-events: none;
   > *
   {
   	  pointer-events: auto;
   }
	  .search
	  {
      position:relative!important;
      left:auto;
      width:40%;
      input[type=text]
      {
      	   width:100%; background:#FFFFFF; font-family:inherit; font-size:14px; padding:0 30px 0 5px;  line-height:34px; border:1px solid #ACACAC; color:inherit;
      }
      fa{position:absolute; right:5px; top:0; line-height:34px; font-size:22px; cursor:pointer;}
      fa[rel=params]{right:35px;}
      fa[rel=params].active::after
   	  {
         content: '';
         position: absolute;
         right: -2px; top: 4px;
         background:#B00000;
         width:6px; height:6px;
         border-radius:50%;
   	  }
      i.fa{position:absolute; left:5px; top:0; line-height:34px; font-size:22px; cursor:pointer; color:var(--red-color); display:none}
	  }
	  .search.active
	  {
	  	  i.fa{display:block;}
	  	  input[type=text]{padding-left:30px;}
	  }
	  btn
	  {
	  	  position:absolute;
	  	  left:0; bottom:0; top:0;
	  	  display: inline-flex;
      align-items: center;
      gap: 8px;

      padding: 6px 12px;
      font-size: 14px;
      font-weight: 500;

      background: #ffffff;
      border: 1px solid var(--font-color);
      border-radius: 6px;

      color: #333;
      cursor: pointer;

      transition: all 0.2s ease;
      z-index:3;
	  }
	  btn.active::after
	  {
      content: '';
      position: absolute;
      right: -5px; top: -5px;
      background:#B00000;
      width:10px; height:10px;
      border-radius:50%;
	  }
	  btn:hover
   {
      border-color: var(--main-color);
	     color:var(--main-color);
   }
	  btn.slide > fa:last-child
   {
      transform:rotate(180deg);
   }

   #dop_filter_data
   {
   	  top:-5px; left:-5px; z-index:1;
   	  right:auto;
   	  width:50%;
   	  border:1px solid #CCCCCC;
   	  border-radius:5px;
   	  padding-left:70px;
   	  z-index:2;
   }

   #dopSearchVals{z-index:2; position:absolute; right:0; top:37px; width:100%; padding:10px; background:#FFFFFF; font-size:12px; border:1px solid #ACACAC}
   #dopSearchVals{display:flex; gap:7px; flex-direction:column}
   #dopSearchVals > div{display:flex; gap:5px;}
   #dopSearchVals::before {
       content: '';
       position: absolute;
       top: -5px; /* Отступ сверху */
       right: 37px; /* Отступ слева */
       border-width: 0 5px 5px 5px; /* Размер и форма треугольника */
       border-style: solid;
       border-color: transparent transparent #ffffff transparent; /* Цвет уголка */
       z-index: 1; /* Устанавливаем порядок слоя */
   }

   #dopSearchVals::after {
       content: '';
       position: absolute;
       top: -7px; /* Расположение над уголком */
       right: 36px;
       border-width: 0 6px 6px 6px; /* Размер уголка */
       border-style: solid;
       border-color: transparent transparent #ACACAC transparent; /* Цвет границы уголка */
       z-index: 0; /* Устанавливаем, что этот элемент будет ниже по слоям */
   }
}

switch {
    width: 60px; /* 52px */
    height: 32px; /* 32px */
    border-radius: 100px;
    background-color: var(--main-color-light);
    border: 2px solid var(--main-color-light); /* 2px */
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
switch d {
    display: block;
    width: 20px; /* 24px */
    height: 20px; /* 24px */
    border-radius: 50%;
    background: #FFFFFF;
    position: absolute;
    top: 4px; /* 2px */
}
switch.st0 {
    background-color: #E1E2EC;
    border-color: #C5C6D0;
}
switch.st0 d {
    background: #C5C6D0;
    border: none;
}
switch.st0 d {
    left: 6px; /* 6px */
}
switch.st1 d {
    right: 6px; /* 2px */
}