/* global */
@font-face {font-family:Roboto; src:url(fonts/Roboto-Regular.ttf);}
.wiuver {padding: 0px 0px 30px 0px; border-bottom: 2px solid #eaeaea;}
xmp,code {
	display: inline-block;
    padding: 6px 16px;
    margin: 0px 0px 0px 0px;
    background: #888;
    color: #fff;
    border-radius: 5px;
}

/* elements */
.elements-center {display:inline-flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.elements-around {display:inline-flex;justify-content:space-around;align-items: center;flex-wrap: wrap;}
.elements-between {display:inline-flex;justify-content:space-between;align-items: center;flex-wrap: wrap;}
.elements-right {display:inline-flex;justify-content:flex-end;align-items: center;flex-wrap: wrap;}
.elements-left {display:inline-flex;justify-content:flex-start;align-items: center;flex-wrap: wrap;}

/* button */
button{
	display:inline-block;
    cursor: pointer;
    color: #ffae00;
    padding: 4px 14px;
	margin: 4px 4px;
    background: #ffffff;
    border: 1px solid #ffae00;
    border-radius: 20px;
    font-size: 1em;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
button:focus {outline:none;;}
button.active {background:#ffae00; color:#fff;}

button.big {font-size: 1.5em;}
button.mini {padding: 2px 8px; font-size: 0.9em;}

button.green {color:#1ab148; border-color:#1ab148;}
button.green.active {background:#1ab148; color:#fff;}

button.red {color:#f22222; border-color:#f22222;}
button.red.active {background:#f22222; color:#fff;}

button.black {color:#000; border-color:#000;}
button.black.active {background:#000; color:#fff;}

button.blue {color:#007de3; border-color:#007de3;}
button.blue.active {background:#007de3; color:#fff;}

button.grey {color:#bbb; border-color:#bbb;}
button.grey.active {background:#bbb; color:#fff;}

/* button-text */
.button-text {
	display:inline-block; 
	cursor:pointer; 
	color: #ffae00;
	margin: 4px 4px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.button-text.active {text-shadow: 0px 0px 4px #ffae00;}
.button-text:hover {transform:scale(0.95);}
.button-text:active {transform:scale(0.8);}

.button-text.big {font-size: 1.5em;}
.button-text.mini {font-size: 0.8em;}

.button-text.green {color:#1ab148;}
.button-text.green.active {text-shadow: 0px 0px 4px #1ab148;}

.button-text.red {color:#f22222;}
.button-text.red.active {text-shadow: 0px 0px 4px #f22222;}

.button-text.black {color:#000;}
.button-text.black.active {text-shadow: 0px 0px 4px #000;}

.button-text.blue {color:#007de3;}
.button-text.blue.active {text-shadow: 0px 0px 4px #007de3;}

.button-text.grey {color:#bbb;}
.button-text.grey.active {text-shadow: 0px 0px 4px #bbb;}

.button-text.hover:hover {color: #ffae00;}

/* checkbut */
.checkbut, checkbut{
	position: relative;
	display: inline-block;
	cursor:pointer;
    width: 50px;
    height: 25px;
	margin: 4px 4px;
    border-radius:25px;
	background: #ccc;
	z-index: 1001;
	vertical-align: middle;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.checkbut:after, checkbut:after {
	content:"";
	position: absolute;
	display:block;
	top: 2px;
    left: 4%;
    width: 21px;
    height: 21px;
    border-radius:50%;
    box-sizing: border-box;
	transition: left 0.5s;
	background: #f7f3ef;
}
.checkbut:hover, checkbut:hover {transform:scale(0.95);}
/* .checkbut:active, checkbut:active {transform:scale(0.8);} */
.checkbut.active, checkbut.active{border-color:#fff;background:#ffe193;}
.checkbut.active:after, checkbut.active:after{left:calc(100% - 24px); background:#ffae00;}

.checkbut.big, checkbut.big {width:60px; height:30px;}
.checkbut.big:after, checkbut.big:after{width:26px; height:26px;}
.checkbut.active.big:after, checkbut.active.big:after{left:calc(100% - 29px)}

.checkbut.mini, checkbut.mini {width:40px; height:15px;}
.checkbut.mini:after, checkbut.mini:after{width:20px; height:20px;}
.checkbut.active.mini:after, checkbut.active.mini:after{left:calc(100% - 20px)}

.checkbut.active.green, checkbut.active.green {background: #c0e9cd;}
.checkbut.active.green:after, checkbut.active.green:after {border-color: #109539;background: #1ab148;}

.checkbut.active.red, checkbut.active.red {background: #faa4a8;}
.checkbut.active.red:after, checkbut.active.red:after {border-color: #cc0c0c;background: #f22222;}

.checkbut.active.black, checkbut.active.black {background: #858585;}
.checkbut.active.black:after, checkbut.active.black:after {border-color: #000000;background: #323232;}

.checkbut.active.blue, checkbut.active.blue {background: #8eccff;}
.checkbut.active.blue:after, checkbut.active.blue:after {border-color: #0268bb; background: #007de3;}

.checkbut.active.grey, checkbut.active.grey {background: #ececec;}
.checkbut.active.grey:after, checkbut.active.grey:after {border-color:#b5b5b5; background: #bbb;}


checkbox {
	cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    font-size: 1.2em;
    color: #a6a5a5;
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    transition: all 0.2s;
	box-sizing: border-box;
	vertical-align: middle;
	z-index: 1001;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
checkbox.circle { border-radius:50%;}
/* .checkbox:active, checkbox:active {transform:scale(0.8);} */
checkbox.active {background: #ffae00; border: 1px solid #ffa400; box-shadow: inset 2px 2px 6px 0px rgba(0,0,0,0.5); color:#ffffff;}
checkbox.active:after {content: "\2713";}

checkbox.empty.active:after {content:none; color:#ffffff;}

checkbox.ecto {    
    width: 150px;
    padding: 5px 0px;
    font-size: 11px;
    text-align: center;
    background: #D3D4D3;
    border-radius: 8px;
	border: 1px solid #D3D4D3;
	box-shadow: none;
	color: #000000;
}
checkbox.ecto:hover {background:#0BC40B; color:#fff;}
checkbox.ecto:after {content:none; color:#ffffff;}

checkbox.ecto.active {background:#0BC40B; color:#ffffff; border-color:#0BC40B;}
checkbox.ecto.active:after {content:none; color:#ffffff;}

checkbox.big {width:36px; height:36px;}
checkbox.mini {width:20px; height:20px;}
checkbox.mini:after {font-size: 0.6em;}

checkbox.green {color: #1ab148; border: 1px solid #1ab148;}
checkbox.active.green {background: #1ab148; color:#ffffff;}

checkbox.orange {color: #ffae00; border: 1px solid #ffae00;}
checkbox.active.orange {background: #ffae00; color:#ffffff;}

checkbox.red {color: #f22222; border: 1px solid #f22222;}
checkbox.active.red {background: #f22222; color:#ffffff;}

checkbox.black {color: #000000; border: 1px solid #000000;}
checkbox.active.black {background: #000000; color:#ffffff;}

checkbox.blue {color: #007de3; border: 1px solid #007de3;}
checkbox.active.blue {background: #007de3; color:#ffffff;}

checkbox.grey {color: #bbb; border: 1px solid #bbb;}
checkbox.active.grey {background: #bbb; color:#ffffff;}

/* select 
select {
	vertical-align: middle;
	cursor:pointer;
	max-width:280px;
	color:#888;
	padding:4px;
	margin: 4px;
	border:1px solid #eaeaea;
	border-radius:4px;
	background: #ffffff;
	font-size: 1em;
}
select:hover{border-color:#cccccc;outline:none}
select:focus{border-color:#f19b00;outline:none}

select.orange {border:1px solid #ffae00; color:#ffae00;}
select.green {border:1px solid #1ab148; color:#1ab148;}
select.red {border:1px solid #f22222; color:#f22222;}
select.black {border:1px solid #000; color:#000;}
select.blue {border:1px solid #007de3; color:#007de3;}

select.grey-full {background:#bbb; border:1px solid #bbb; color:#fff;}
select.orange-full {background:#ffae00; border:1px solid #ffae00; color:#fff;}
select.green-full {background:#1ab148; border:1px solid #1ab148; color:#fff;}
select.red-full {background:#f22222; border:1px solid #f22222; color:#fff;}
select.black-full {background:#000; border:1px solid #000; color:#fff;}
select.blue-full {background:#007de3; border:1px solid #007de3; color:#fff;}
*/
/* number */
number, .number{display:inline-flex; justify-content:center; vertical-align: middle; align-items:center; flex-wrap:wrap; padding:4px; color:#bbb;}
number input, .number input{
	width: 45px;
	padding: 4px;
	margin: 0px; 
	border-radius: 0px; 
	text-align:center;
	border: 1px solid #6C6D6F;
	z-index:8;
}
number .number_minus, .number .number_minus, number .number_plus, .number .number_plus{
position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
	width:26px;
	height:26px;
	text-align:center;
    border: 1px solid #6C6D6F;
    padding: 0px 5px;
	margin:0px;
	color:#6C6D6F;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
number .number_minus, .number .number_minus{border-radius: 8px 0px 0px 8px; font-size:43px; left:1px;}
number .number_minus:after, .number .number_minus:after{content:"-"; position:absolute; top:-17px; color:inherit;}
number .number_plus, .number .number_plus{border-radius: 0px 8px 8px 0px; font-size:29px; left:-1px;}
number .number_plus:before, .number .number_plus:before{content:"+"; position:absolute; color:inherit;}

number .number_minus:hover, .number .number_minus:hover, number .number_plus:hover, .number .number_plus:hover{border: 1px solid #6C6D6F; background:#6C6D6F; color:#fff;}
number .number_minus:active, .number .number_minus:active, number .number_plus:active, .number .number_plus:active{border: 1px solid #D3D4D3; background:#D3D4D3; color:#fff;}

number.big, .number.big{font-size:1.5em;}
number.mini, .number.mini{font-size:0.8em;}

number.size-x2 input, .number.size-x2 input{width: 64px;}
number.size-x3 input, .number.size-x3 input{width: 96px;}
number.size-x4 input, .number.size-x4 input{width: 128px;}

number.orange, .number.orange{color:#ffae00;}
number.orange input, .number.orange input{border-color:#ffae00; color:#ffae00;}
number.orange .number_minus, .number.orange .number_minus{border-color:#ffae00;}
number.orange .number_plus, .number.orange .number_plus{border-color:#ffae00;}

number.green, .number.green{color:#1ab148;}
number.green input, .number.green input{border-color:#1ab148; color:#1ab148;}
number.green .number_minus, .number.green .number_minus{border-color:#1ab148;}
number.green .number_plus, .number.green .number_plus{border-color:#1ab148;}

number.red, .number.red{color:#f22222;}
number.red input, .number.red input{border-color:#f22222; color:#f22222;}
number.red .number_minus, .number.red .number_minus{border-color:#f22222;}
number.red .number_plus, .number.red .number_plus{border-color:#f22222;}

number.black, .number.black{color:#000;}
number.black input, .number.black input{border-color:#000; color:#000;}
number.black .number_minus, .number.black .number_minus{border-color:#000;}
number.black .number_plus, .number.black .number_plus{border-color:#000;}

number.blue, .number.blue{color:#007de3;}
number.blue input, .number.blue input{border-color:#007de3; color:#007de3;}
number.blue .number_minus, .number.blue .number_minus{border-color:#007de3;}
number.blue .number_plus, .number.blue .number_plus{border-color:#007de3;}

number.grey-full, .number.grey-full{color:#fff;}
number.grey-full input, .number.grey-full input{background:#bbb; border-color:#bbb #fff #bbb #fff; color:#fff;}
number.grey-full .number_minus, .number.grey-full .number_minus{background:#bbb; border-color:#bbb;}
number.grey-full .number_plus, .number.grey-full .number_plus{background:#bbb; border-color:#bbb;}

number.orange-full, .number.orange-full{color:#fff;}
number.orange-full input, .number.orange-full input{background:#ffae00; border-color:#ffae00 #fff #ffae00 #fff; color:#fff;}
number.orange-full .number_minus, .number.orange-full .number_minus{background:#ffae00; border-color:#ffae00;}
number.orange-full .number_plus, .number.orange-full .number_plus{background:#ffae00; border-color:#ffae00;}

number.green-full, .number.green-full{color:#fff;}
number.green-full input, .number.green-full input{background:#1ab148; border-color:#1ab148 #fff #1ab148 #fff; color:#fff;}
number.green-full .number_minus, .number.green-full .number_minus{background:#1ab148; border-color:#1ab148;}
number.green-full .number_plus, .number.green-full .number_plus{background:#1ab148; border-color:#1ab148;}

number.red-full, .number.red-full{color:#fff;}
number.red-full input, .number.red-full input{background:#f22222; border-color:#f22222 #fff #f22222 #fff; color:#fff;}
number.red-full .number_minus, .number.red-full .number_minus{background:#f22222; border-color:#f22222;}
number.red-full .number_plus, .number.red-full .number_plus{background:#f22222; border-color:#f22222;}

number.black-full, .number.black-full{color:#fff;}
number.black-full input, .number.black-full input{background:#000; border-color:#000 #fff #000 #fff; color:#fff;}
number.black-full .number_minus, .number.black-full .number_minus{background:#000; border-color:#000;}
number.black-full .number_plus, .number.black-full .number_plus{background:#000; border-color:#000;}

number.blue-full, .number.blue-full{color:#fff;}
number.blue-full input, .number.blue-full input{background:#007de3; border-color:#007de3 #fff #007de3 #fff; color:#fff;}
number.blue-full .number_minus, .number.blue-full .number_minus{background:#007de3; border-color:#007de3;}
number.blue-full .number_plus, .number.blue-full .number_plus{background:#007de3; border-color:#007de3;}


/* text */
text, .text{display:inline-block; position:relative; vertical-align: middle; padding:4px; width:160px; min-width:66px; max-width: 100%; box-sizing: border-box; color:#bbb;}
text .text_save, .text .text_save{
	position: absolute;
    cursor: pointer;
    right: 5px;
    top: 4px;
    padding: 4px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
text .text_save:hover, .text .text_save:hover{transform:scale(0.95);}
text .text_save:active, .text .text_save:active{transform:scale(0.90);}
text .text_save:before, .text .text_save:before{content:"↪";}
text input, .text input{margin:0px; padding: 4px 24px 4px 4px; width: calc(100% - 30px);}

text.big, .text.big {font-size:1.5em;}
text.mini, .text.mini {font-size:0.8em;}
text.size-x0_5, .text.size-x0_5 {width:80px;}
text.size-x1_5, .text.size-x1_5 {width:240px;}
text.size-x2, .text.size-x2 {width:320px;}
text.size-x3, .text.size-x3 {width:480px;}
text.size-x4, .text.size-x4 {width:620px;}

text.size-10, .text.size-10 {width:10%;}
text.size-20, .text.size-10 {width:20%;}
text.size-30, .text.size-10 {width:30%;}
text.size-40, .text.size-10 {width:40%;}
text.size-50, .text.size-10 {width:50%;}
text.size-60, .text.size-10 {width:60%;}
text.size-70, .text.size-10 {width:70%;}
text.size-80, .text.size-10 {width:80%;}
text.size-90, .text.size-10 {width:90%;}
text.size-100, .text.size-10 {width:100%;}

text.center input, .text.center input{text-align:center;}
text.right input, .text.right input{text-align:right;}

text.orange, .text.orange{color:#ffae00;}
text.orange input, .text.orange input{color:#ffae00; border-color:#ffae00;}

text.green, .text.green{color:#1ab148;}
text.green input, .text.green input{color:#1ab148; border-color:#1ab148;}

text.red, .text.red{color:#f22222;}
text.red input, .text.red input{color:#f22222; border-color:#f22222;}

text.black, .text.black{color:#000;}
text.black input, .text.black input{color:#000; border-color:#000;}

text.blue, .text.blue{color:#007de3;}
text.blue input, .text.blue input{color:#007de3; border-color:#007de3;}

text.grey-full, .text.grey-full{color:#fff;}
text.grey-full input, .text.grey-full input{color:#fff; border-color:#bbb; background:#bbb}

text.orange-full, .text.orange-full{color:#fff;}
text.orange-full input, .text.orange-full input{color:#fff; border-color:#ffae00; background:#ffae00}

text.green-full, .text.green-full{color:#fff;}
text.green-full input, .text.green-full input{color:#fff; border-color:#1ab148; background:#1ab148}

text.red-full, .text.red-full{color:#fff;}
text.red-full input, .text.red-full input{color:#fff; border-color:#f22222; background:#f22222}

text.black-full, .text.black-full{color:#fff;}
text.black-full input, .text.black-full input{color:#fff; border-color:#000; background:#000}

text.blue-full, .text.blue-full{color:#fff;}
text.blue-full input, .text.blue-full input{color:#fff; border-color:#007de3; background:#007de3}

/* ses single equipment selection */
ses, .ses{
	display:inline-block;
	position:relative;
	padding:4px;
	box-sizing: border-box;
}

ses span:hover, .ses span:hover {transform:scale(0.95);}
ses span:active, .ses span:active {transform:scale(0.8);}

ses.list, .ses.list{ width:240px; border: 1px solid #58575b; border-radius:12px; margin: 4px 0px;}
ses.list span, .ses.list span{padding: 0px 5px; margin:0px;}
ses.list ul, .ses.list ul{
	display:block;
	width:100%;
	font-size:11px;
	max-height:200px;
	overflow:hidden;
	border-radius:5px;
	padding:0px;
	margin:0px;
}
ses.list ul li, .ses.list ul li{
	display:flex;
	height:30px;
	min-height:30px;
	justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;  
	text-decoration: none;
    list-style: none;
    vertical-align: top;
	padding: 0px 0px;
}
ses.list ul li.one-head, .ses.list ul li.one-head{}
ses.list ul li.elem-equp, .ses.list ul li.elem-equp{
	display: flex;
    background: #E5E5E5!important;
    border: 1px solid #E5E5E5;
    justify-content: space-between;
    align-content: center;
}
ses.list ul li.elem-equp .name a, .ses.list ul li.elem-equp .name a{color:#000000;}

ses.list ul li>div, .ses.list ul li>div{display:inline-block; text-align: left;}
ses.list ul li>div:nth-child(1), .ses.list ul li>div:nth-child(1){width:33px;}
ses.list ul li>div:nth-child(2), .ses.list ul li>div:nth-child(2){width:90px;}
ses.list ul li>div.ta_right.block_mr_6 {font-size: 15px;}
ses.list ul li>div:nth-child(3), .ses.list ul li>div:nth-child(3){width:60px;text-align: center;}
ses.list ul li>div:nth-child(4), .ses.list ul li>div:nth-child(4){
	display: inline-flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;width:40px;
}

ses.list ul li:hover, .ses.list ul li:hover{border: 1px solid #dddddd;}
ses.list ul li:active, .ses.list ul li:active{border: 1px solid #dddddd; box-shadow:none;}

/*----------------------------------------------------------------------------*/
sesa, .ses{
	display:inline-block;
	position:relative;
	padding:4px;
	box-sizing: border-box;
}

sesa span:hover, .ses span:hover {transform:scale(0.95);}
sesa span:active, .ses span:active {transform:scale(0.8);}

sesa.list, .ses.list{ width:240px; border: 1px solid #58575b; border-radius:12px; margin: 4px 0px;}
sesa.list span, .ses.list span{padding: 0px 5px; margin:0px;}
sesa.list ul, .ses.list ul{
	display:block;
	width:100%;
	font-size:11px;
	max-height:200px;
	overflow:hidden;
	border-radius:5px;
	padding:0px;
	margin:0px;
}
sesa.list ul li, .ses.list ul li{
	display:flex;
	height:30px;
	min-height:30px;
	justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
	text-decoration: none;
    list-style: none;
    vertical-align: top;
	padding: 0px 0px;
}
sesa.list ul li.one-head, .ses.list ul li.one-head{}
sesa.list ul li.elem-equp, .ses.list ul li.elem-equp{
	display: flex;
    background: #E5E5E5!important;
    border: 1px solid #E5E5E5;
    justify-content: space-between;
    align-content: center;
}
sesa.list ul li.elem-equp .name a, .ses.list ul li.elem-equp .name a{color:#000000;}

sesa.list ul li>div, .ses.list ul li>div{display:inline-block; text-align: left;}
sesa.list ul li>div:nth-child(1), .ses.list ul li>div:nth-child(1){width:33px;}
sesa.list ul li>div:nth-child(2), .ses.list ul li>div:nth-child(2){width:90px;}
sesa.list ul li>div.ta_right.block_mr_6 {font-size: 15px;}
sesa.list ul li>div:nth-child(3), .ses.list ul li>div:nth-child(3){width:60px;text-align: center;}
sesa.list ul li>div:nth-child(4), .ses.list ul li>div:nth-child(4){
	display: inline-flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;width:40px;
}

sesa.list ul li:hover, .ses.list ul li:hover{border: 1px solid #dddddd;}
sesa.list ul li:active, .ses.list ul li:active{border: 1px solid #dddddd; box-shadow:none;}
/*----------------------------------------------------------------------------*/

/* sme selection of many equipment */
sme, .sme{
	display:block;
	position:relative;
	width:100%;
	min-width:300px;
	max-width: 100%;
    border-radius: 5px;
    margin:4px 0px;
	box-sizing: border-box;
}
.prog-btn-add{
	display:inline-block;
    cursor: pointer;
    color: #58575b;
    padding: 0px 5px;
	margin: 0px;
    background: #ffffff;
    border-radius: 20px;
    font-size:14px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.prog-btn-add:hover {transform:scale(0.95);}
.prog-btn-add:active {transform:scale(0.8);}

sme .sme-list-equp, .sme .sme-list-equp {
	display:block;
	width:100%;
	max-height:200px;
	overflow:auto;
	border-radius:5px;
	padding:0px;
	margin:0px;
}

sme .sme-list-equp li, .sme .sme-list-equp li{  
	display:flex;
	justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;  
	text-decoration: none;
    list-style: none;
    vertical-align: top;
	padding: 4px 6px;
}
sme .sme-list-equp li.one-head, .sme .sme-list-equp li.one-head{
	position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    top: 0px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
	padding: 10px 8px;
	color:#ccc;
}
sme .sme-list-equp li:nth-child(even), .sme .sme-list-equp li:nth-child(even){background: #f4faff;}

sme .sme-list-equp li div, .sme .sme-list-equp li div{display:inline-block;}
sme .sme-list-equp li>div:nth-child(1), .sme .sme-list-equp li>div:nth-child(1){width:33px;}
sme .sme-list-equp li>div:nth-child(2), .sme .sme-list-equp li>div:nth-child(2){width:calc(32% - 42px);}
sme .sme-list-equp li>div:nth-child(3), .sme .sme-list-equp li>div:nth-child(3){width:calc(32% - 42px);}
sme .sme-list-equp li>div:nth-child(4), .sme .sme-list-equp li>div:nth-child(3){width:calc(32% - 42px);}
sme .sme-list-equp li>div:nth-child(5), .sme .sme-list-equp li>div:nth-child(4){
	display: inline-flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;width:48px;
}

sme.mini, .sme.mini{font-size:0.8em}
sme.mini span, .sme.mini span{padding: 0px 4px;}

sme.big, .sme.big{font-size:1.5em}
sme.big span, .sme.big span{padding: 0px 7px;}

sme.size-x1, .sme.size-x1{width:300px;}
sme.size-x1_5, .sme.size-x1_5{width:450px;}
sme.size-x2, .sme.size-x2{width:600px;}
sme.size-x2_5, .sme.size-x2_5{width:750px;}
sme.size-x3, .sme.size-x3{width:900px;}

sme.size-10, .sme.size-10{width:10%;}
sme.size-20, .sme.size-10{width:20%;}
sme.size-30, .sme.size-10{width:30%;}
sme.size-40, .sme.size-10{width:40%;}
sme.size-50, .sme.size-10{width:50%;}
sme.size-60, .sme.size-10{width:60%;}
sme.size-70, .sme.size-10{width:70%;}
sme.size-80, .sme.size-10{width:80%;}
sme.size-90, .sme.size-10{width:90%;}
sme.size-100, .sme.size-10{width:100%;}

/* timetable */
timetable, .timetable {
	display:inline-block;
	position:relative;
	max-width: 100%;
	border-radius:5px;
	/* border: 1px solid #dddddd; */
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
timetable header, .timetable header{
	cursor:pointer;
	display: flex;
    justify-content: space-between;
    align-items: center;
	border-bottom: 1px solid #f1f1f1;
}
timetable header .color, .timetable header .color{width:25px; height:25px;}
timetable header h4, .timetable header h4{margin:0px!important; padding:0px 0px 0px 10px!important;}
timetable header icon:before, .timetable header icon:before{content:"❮"; transform:rotate(-90deg); transition: transform 0.3s;}

timetable section, .timetable section{display: block; position:relative; overflow: auto;}

timetable section .window-table, .timetable section .window-table{
	position:relative; 
	display:block;
	z-index:10;
	padding: 35px 8px 8px 28px;
}

timetable section .window-table .top-table, .timetable section .window-table .top-table{
    position: absolute;
    top: 8px;
    left: 28px;
    font-size: 12px;
	text-align: center;
}
timetable section .window-table .top-table p, .timetable section .window-table .top-table p{display: inline-flex; justify-content: center; align-items: center;}
timetable section .window-table .left-table, .timetable section .window-table .left-table{
	position: absolute;
    top: 35px;
    left:0px;
    font-size: 12px;
}
timetable section .window-table .left-table p, .timetable section .window-table .left-table p{
	display:flex; justify-content: center; align-items: center; height:25px;
}

timetable section .tile-table, .timetable section .tile-table{position:relative; display:block; 
	padding: 0px 0px 0px 0px;
}
timetable section .tile-table .selector, .timetable section .tile-table .selector{border:1px solid #000; z-index:18;}
timetable section .tile-table .controler, .timetable section .tile-table .controler{
	position:absolute; 
	display:block; 
	top:0px; left:0px;
	width:100%;
	height:100%;
	z-index:20;
}
timetable section .table, .timetable section .table{
	position:relative;
	display: block; 
	font-size: 0px; 
	box-sizing: border-box;
	z-index:10;
}

timetable section .table>div, .timetable section .table>div{display: block;}
timetable section .table>div>span, .timetable section .table>div>span{
	display:inline-block;
	font-size:14px;
	background:#eee;
    border-top:1px solid #fff;
    border-left:1px solid #fff;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
timetable section .table>div>span:last-child, .timetable section .table>div>span:last-child{border-right:1px solid #fff;}
timetable section .table>div:last-child>span, .timetable section .table>div:last-child>span{border-bottom:1px solid #fff;}
timetable section .table>div>span:hover, .timetable section .table>div>span:hover{box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);}

timetable .value, .timetable .value{
	position:absolute;
	top:38px;
	left:0px;
	width:100%;
	height:0%;
	transition: height 0.5s;
	overflow:auto;
}
timetable .window-value, .timetable .window-value{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
	display:block;
	background:#f9f9f9;
	z-index:20;
}
timetable.active .value, .timetable.active .value{height: calc(100% - 38px);}
timetable.active header icon:before, .timetable.active header icon:before{transform:rotate(90deg);}

timetable .window-value li, .timetable .window-value li{
	cursor:pointer;
	padding:6px 6px;
	box-sizing: border-box;
}
timetable .window-value li p, .timetable .window-value li p{display:inline-block;}
timetable .window-value li span, .timetable .window-value li span{
	display:inline-block;
	vertical-align: middle;
	width:25px;
	height:25px;
	margin:0px 14px 0px 0px;
}
timetable .window-value li:hover, .timetable .window-value li:hover{box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.2);}
timetable .window-value li:nth-child(even), .timetable .window-value li:nth-child(even){background:#fff;}

timetable.active, .timetable.active {}

timetable footer .check-value {display:inline-block; margin:6px 0px 0px 30px;}
timetable footer .check-value .box-color{position:relative; width:32px; height:32px;}
timetable footer .check-value .name{display:inline-block; padding: 7px 6px;}
timetable footer .check-value.active .box-color:after {
    content: "";
    position: absolute;
	top:0px; left:0px;
	background: #ffffff;
    width: 100%;
    height: 100%;
    mask: url(../img/icon/global/scheck.svg);
	-webkit-mask: url(../img/icon/global/scheck.svg);
}

/* icon */
icon, .picon {
	display:inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	font-size:24px;
    width: 25px;
    height: 25px;
	margin:4px;
	font-family:icons;
    background-size: 100%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}

icon.size-x2, .picon.size-x2 {width:50px; height:50px; font-size:48px;}

icon.orange, .picon.orange {color:#ffae00;}
icon.green , .picon.green {color:#1ab148;}
icon.red   , .picon.red   {color:#f22222;}
icon.black , .picon.black {color:#000;}
icon.blue  , .picon.blue  {color:#007de3;}
icon.grey  , .picon.grey  {color:#bbb;}


icon.add:before, .picon.add:before {content:"\e900";}


/* fonts - text */
.text-05 {font-size: 0.5em;}
.text-06 {font-size: 0.6em;}
.text-07 {font-size: 0.7em;}
.text-08 {font-size: 0.8em;}
.text-09 {font-size: 0.9em;}
.text-10 {font-size: 1.0em;}
.text-11 {font-size: 1.1em;}
.text-12 {font-size: 1.2em;}
.text-13 {font-size: 1.3em;}
.text-14 {font-size: 1.4em;}
.text-15 {font-size: 1.5em;}

.text-orange {color:#ffae00;}
.text-green {color:#1ab148;}
.text-red   {color:#f22222;}
.text-black {color:#000;}
.text-blue  {color:#007de3;}
.text-grey  {color:#bbb;}
.text-white  {color:#fff;}

.text-bold {font-weight:bold;}
.text-italic {font-style:italic;}
.text-underline {text-decoration: underline;}
.text-overline {text-decoration: overline;}
.text-through {text-decoration: line-through;}

/* padding & margin */
.block-m-4{margin:4px;}
.block-m-6{margin:6px;}
.block-m-8{margin:8px;}
.block-m-10{margin:10px;}
.block-m-18{margin:18px;}

.block-ml-4{margin-left:4px;}
.block-ml-6{margin-left:6px;}
.block-ml-8{margin-left:8px;}
.block-ml-6{margin-left:6px;}

.block-mr-4{margin-right:4px;}
.block-mr-6{margin-right:6px;}
.block-mr-8{margin-right:8px;}
.block-mr-10{margin-right:10px;}
.block-mr-20{margin-right:20px;}

.block-mb-4{margin-bottom:4px;}
.block-mb-6{margin-bottom:6px;}
.block-mb-8{margin-bottom:8px;}
.block-mb-10{margin-bottom:10px;}

.block-mt-4{margin-top:4px;}
.block-mt-6{margin-top:6px;}
.block-mt-8{margin-top:8px;}
.block-mt-10{margin-top:10px;}

.block-mrl-4{margin:0px 4px;} .block_mlr_4{margin:0px 4px;}
.block-mrl-10{margin:0px 10px;} .block_mlr_10{margin:0px 10px;}

[class^="block-p"], [class*=" block-p"] {box-sizing: border-box;}
[class^="block-m"], [class*=" block-m"] {box-sizing: border-box;}
.block-p-4{padding:4px;}
.block-p-6{padding:6px;}
.block-p-8{padding:8px;}
.block-p-10{padding:10px;}
.block-p-18{padding:18px;}
.block-p-20{padding:20px;}

.block-pl-4{padding-left:4px;}
.block-pl-6{padding-left:6px;}
.block-pl-8{padding-left:8px;}
.block-pl-10{padding-left:10px;}

.block-pr-4{padding-right:4px;}
.block-pr-6{padding-right:6px;}
.block-pr-8{padding-right:8px;}
.block-pr-10{padding-right:10px;}


.block-pb-4{padding-bottom:4px;}
.block-pb-6{padding-bottom:6px;}
.block-pb-8{padding-bottom:8px;}
.block-pb-10{padding-bottom:10px;}
.block-pb-20{padding-bottom:20px;}

.block-pt-4{padding-top:4px;}
.block-pt-6{padding-top:6px;}
.block-pt-8{padding-top:8px;}
.block-pt-10{padding-top:10px;}
.block-pt-20{padding-top:20px;}

.block-plr-10{padding:0px 10px;} .block_prl_10{padding:0px 10px;}
.block-plr-20{padding:0px 20px;} .block_prl_20{padding:0px 20px;}



/* width */
.block-w-100{width:100%!important;}
.block-w-95 {width:95%!important;}
.block-w-90 {width:90%!important;}
.block-w-85 {width:85%!important;}
.block-w-80 {width:80%!important;}
.block-w-75 {width:75%!important;}
.block-w-70 {width:70%!important;}
.block-w-65 {width:65%!important;}
.block-w-60 {width:60%!important;}
.block-w-55 {width:55%!important;}
.block-w-50 {width:50%!important;}
.block-w-45 {width:45%!important;}
.block-w-40 {width:40%!important;}
.block-w-35 {width:35%!important;}
.block-w-30 {width:30%!important;}
.block-w-25 {width:25%!important;}
.block-w-20 {width:20%!important;}
.block-w-15 {width:15%!important;}
.block-w-10 {width:10%!important;}
.block-w-5  {width:5%!important;}

.block-w-100p{width:100px!important;}

/* block-color */
.block-grey-1 {background:#eee!important;}
.block-grey-2 {background:#ddd!important;}
.block-grey-3 {background:#bbb!important;}
.block-grey {background:#bbb!important;}

.block-orange-1 {background:#feeabf!important;}
.block-orange-2 {background:#ffd271!important;}
.block-orange-3 {background:#ffae00!important;}

.block-green-1 {background:#afe7c0!important;}
.block-green-2 {background:#6ad08a!important;}
.block-green-3 {background:#1ab148!important;}

.block-red-1 {background:#ffc7c7!important;}
.block-red-2 {background:#fa7171!important;}
.block-red-3 {background:#f22222!important;}

.block-black-1 {background:#888!important;}
.block-black-2 {background:#444!important;}
.block-black-3 {background:#000!important;}

.block-blue-1 {background:#a9d6fc!important;}
.block-blue-2 {background:#5db4fc!important;}
.block-blue-3 {background:#007de3!important;}


/* display */
.inline{ display:inline-block;}


/* elements */
.elements-center {display:inline-flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.elements-around {display:inline-flex;justify-content:space-around;align-items: center;flex-wrap: wrap;}
.elements-between {display:inline-flex;justify-content:space-between;align-items: center;flex-wrap: wrap;}
.elements-right {display:inline-flex;justify-content:flex-end;align-items: center;flex-wrap: wrap;}
.elements-left {display:inline-flex;justify-content:flex-start;align-items: center;flex-wrap: wrap;}

.elements-top{align-items:flex-start;}


/* border */
.block-border {border: 1px solid;}

.block-border-radius-5{border-radius: 5px;}

.block-border-grey-1 {border: 1px solid; border-color:#f8f8f8;}

/* predel */
limit, .limit {display:block;}
.predel-scale-p {width:100%; padding: 0px 0px 20px 0px;}
.predel-scale-p.notop header{display:none;}
.predel-scale-p header{
	display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0px 0px 0px 0px;
}
.predel-scale-p header h6{text-align:center; padding: 0px; font-size: 0.8em; color: #bbb;}
.predel-scale-p header .min-max{display:inline-block;}
.predel-scale-p header .checkbox{width:28px; height:28px; margin: 4px 0px; border-color:#dddddd}

.warning-min-max {color:#cccccc;padding: 0px 0px 12px 0px;}
.warning-min-max input{color:#cccccc;}
.warning-min-max.active {color:#ffae00;}
.warning-min-max.active input{color:#ffae00;}

.alert-min-max {color:#cccccc;}
.alert-min-max input{color:#cccccc;}
.alert-min-max.active {color:#ca3434;}
.alert-min-max.active input{color:#ca3434;}

.predel-scale-p section{padding:0px 0px 0px 0px;}
.predel-scale-p section .number-temp{
	display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
	font-size:0.67em;
	color: #bbbbbb;
	padding: 10px 0px 16px 0px;
	z-index:4;
}
.predel-scale-p section .scale-temp{
	position: relative;
	width: calc(100% - 16px);
	height:18px;
	margin: auto;
	background: #1ab166;
	box-shadow: 0 4px 6px 0 #dddddd;
}
.predel-scale-p section .scale-temp .dop-left{
	left: -10px;
    top: -11px;
    width: 12px;
    height: 42px;
    background: #ff7878;
    border-radius: 3px;
	box-shadow: -3px 2px 8px 0px rgba(0,0,0,0.2);
	z-index: 12;
}
.predel-scale-p section .scale-temp .dop-right{
	right: -10px;
    top: -11px;
    width: 12px;
    height: 42px;
    background: #ff7878;
	border-radius: 3px;
	box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.2);
	z-index: 12;
}
.predel-scale-p section .scale-temp .shtrih{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 18px;
    font-size: 0.5em;
    color: #fff;
    z-index: 14;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	pointer-events: none;
	-webkit-pointer-events: none;
	-moz-user-pointer-events: none;
	-ms-user-pointer-events: none;
}
.predel-scale-p section .scale-temp span{position:absolute; display:inline-block;}

.predel-scale-p .scale-temp .line{cursor:pointer;position:absolute;top:0px;height:18px;border:none;}
.predel-scale-p .scale-temp .line:hover{box-shadow: inset 1px 1px 6px 0px rgba(0,0,0,0.5);}
.predel-scale-p .scale-temp .line:active{box-shadow: inset 2px 2px 6px 0px rgba(0,0,0,0.5);}
.predel-scale-p .scale-temp .line.open{box-shadow: inset 0px 2px 6px 1px rgba(0,0,0,0.5);}

.predel-scale-p .scale-temp > div {opacity:0; transition: opacity 0.5s; display:none;}
.predel-scale-p .scale-temp > div.active {opacity:1; display:block;}

.predel-scale-p .scale-temp .line-war-min {left:0%; background:#ffca58;z-index:6;}
.predel-scale-p .scale-temp .red-left-scale {left:0%; background:#ff7878;z-index:8;}
.predel-scale-p .scale-temp .orange-righ-scale {right:0%; background:#ffca58;z-index:6;}
.predel-scale-p .scale-temp .red-righ-scale {right:0%; background:#ff7878;z-index:8;}

.predel-scale-p .scale-temp .line-war-min span{background:#ffca58;}
.predel-scale-p .scale-temp .orange-righ-scale span{background:#ffca58;}
.predel-scale-p .scale-temp .red-left-scale span{background:#ff7878;}
.predel-scale-p .scale-temp .red-righ-scale span{background:#ff7878;}

.predel-scale-p .scale-temp .line span{
	position:absolute; 
	display: none;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	top:22px;
	left:-13px;
	height: 24px;
    width: 24px;
	color: #fff;
	font-size: 0.8em;
	border-radius:3px;
	border: 1px solid #e2e2e2;
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.5);
	z-index:20;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.predel-scale-p .scale-temp .line span:before{
	content:"";
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
    height: 100%;
	background: #feca57;
	border-radius:3px;
	z-index: -2;
}
.predel-scale-p .scale-temp .line span:after{
	content:"";
	position: absolute;
	top: -8px;
	left: 3px;
    width: 16px;
    height: 16px;
    background: #feca57;
	border: 1px solid #e2e2e2;
    transform: rotate(45deg);
    z-index: -4;
}
.predel-scale-p .scale-temp .line.line-alt-max span:before{background:#ff7878;}
.predel-scale-p .scale-temp .line.line-alt-min span:before{background:#ff7878;}
.predel-scale-p .scale-temp .line.line-alt-max span:after{background:#ff7878;}
.predel-scale-p .scale-temp .line.line-alt-min span:after{background:#ff7878;}
.predel-scale-p .scale-temp .line.line-war-min span{right:-13px; left:auto;}
.predel-scale-p .scale-temp .line.red-left-scale span{right:-13px; left:auto;}

.predel-scale-p .scale-temp .line.open span{display:inline-flex;}


/* scroll */
scroll, .scroll {position:relative; display:block; border-color:#dddddd; color:#bbbbbb; padding: 18px 0px 10px 0px; z-index:10;}
scroll .number-temp, .scroll .number-temp{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    font-size: 0.67em;
    padding: 10px 0px 16px 0px;
    z-index: 4;
}
scroll .scale-temp, .scroll .scale-temp {
    position: relative;
    width: calc(100% - 16px);
    height: 18px;
    margin: auto;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-color:inherit;
}
scroll .scale-temp:after, .scroll .scale-temp:after {
    content: "";
    position: absolute;
    top: -9px;
    left: -9px;
    width: 8px;
    height: 34px;
    border-radius: 4px;
    border: 1px solid;
	border-color:inherit;
	background:inherit;
}
scroll .scale-temp:before, .scroll .scale-temp:before {
	content: "";
    position: absolute;
    top: -9px;
    right: -9px;
    width: 8px;
    height: 34px;
    border-radius: 4px;
    border: 1px solid;
	border-color:inherit;
	background:inherit;
}
scroll .shtrih-temp, .scroll .shtrih-temp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 18px;
    font-size: 0.5em;
    z-index: 14;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
    -webkit-pointer-events: none;
    -moz-user-pointer-events: none;
    -ms-user-pointer-events: none;
}
scroll .shtrih-temp>p, .scroll .shtrih-temp>p {position:relative; text-align: center; width:10%;}
scroll .shtrih-temp>p:last-child, .scroll .shtrih-temp>:last-child {width:5%; text-align: right;}
scroll .shtrih-temp>p:first-child, .scroll .shtrih-temp>:first-child {width:5%; text-align: left;}
scroll .shtrih-temp>p>span, .scroll .shtrih-temp>p>span {
	display:inline-block;
	position:absolute;
	left: 0px;
	top:-23px;
	width:100%;
	font-size: 10px;
}
scroll .scale-temp .line, .scroll .scale-temp .line{
	position:absolute;
	cursor:pointer;
	top:0px;
	left:0px;
	display:block;
	width:100%;
	height:100%;
	z-index:10;
}

scroll .scale-temp .target, .scroll .scale-temp .target{
	position:absolute;
	top:0px;
	width:1px;
	height:100%;
	z-index:20;
}

scroll .scale-temp .btn-line, .scroll .scale-temp .btn-line{
	position:absolute; 
	display: none;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	top:22px;
	left:-12px;
	height: 24px;
    width: 24px;
	color: #fff;
	font-size: 0.8em;
	border-radius:3px;
	background:#ddd;
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.5);
	z-index:20;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
scroll .scale-temp .line, .scroll .scale-temp .line{   
	user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;}
scroll .scale-temp .btn-line:after, .scroll .scale-temp .btn-line:after{
	content:"";
	position: absolute;
	top: -7px;
	left: 4px;
    width: 16px;
    height: 16px;
    background: inherit;
    transform: rotate(45deg);
    z-index: -4;
}

scroll .scale-temp .arrow-temp, .scroll .scale-temp .arrow-temp{
	position:absolute;
	top:0%;
	left:-4px;
	width:8px;
	height:100%;
	background:#aaa;
	z-index:0;
}
scroll .scale-temp .arrow-temp:after, .scroll .scale-temp .arrow-temp:after{
    content: "";
    position: absolute;
    top: -5px;
    left: 0px;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
	border-radius:0px 4px 0px 4px;
}
scroll .scale-temp .arrow-temp:before, .scroll .scale-temp .arrow-temp:before{
	content: "";
    position: absolute;
    bottom: -6px;
    left: 0px;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
	border-radius:0px 4px 0px 4px;
}

scroll .scale-temp .btn-line-info, .scroll .scale-temp .btn-line-info{
	position:absolute; 
	display: none;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	top:-25px;
	left:-12px;
	height: 24px;
    width: 24px;
	color: #fff;
	font-size: 0.8em;
	border-radius:50%;
	background:#ddd;
	z-index:20;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}


scroll .scale-temp:hover, .scroll .scale-temp:hover{box-shadow: 0px 0px 4px 1px rgba(215, 215, 215, 0.5);}
scroll .scale-temp:active, .scroll .scale-temp:active{box-shadow: 0px 0px 4px 1px rgba(215, 215, 215, 0.5);}

scroll.active , .scroll.acteve {z-index:100;}
scroll.active .scale-temp .btn-line, .scroll.acteve .scale-temp .btn-line{display:flex;}
scroll.active .scale-temp .btn-line-info, .scroll.acteve .scale-temp .btn-line-info{display:flex;}
scroll.active .shtrih-temp, .scroll.active .shtrih-temp{box-shadow: inset 0px 0px 4px 1px rgba(215, 215, 215, 0.5);}

scroll.orange, .scroll.orange {border-color:#ffae00; color:#ffae00;}
scroll.orange .scale-temp .arrow-temp, .scroll.orange .scale-temp .arrow-temp{background:#ffae00;}
scroll.orange .scale-temp .btn-line, .scroll.orange .scale-temp .btn-line {background:#ffae00;}
scroll.orange .scale-temp .btn-line-info, .scroll.orange .scale-temp .btn-line-info {background:#ffae00;}
scroll.orange.active .shtrih-temp, .scroll.orange.active .shtrih-temp{box-shadow: inset 0px 0px 4px 1px #ffae0050;}

scroll.green, .scroll.green {border-color:#1ab148; color:#1ab148;}
scroll.green .scale-temp .arrow-temp, .scroll.green .scale-temp .arrow-temp{background:#1ab148;}
scroll.green .scale-temp .btn-line, .scroll.green .scale-temp .btn-line {background:#1ab148;}
scroll.green .scale-temp .btn-line-info, .scroll.green .scale-temp .btn-line-info {background:#1ab148;}
scroll.green.active .shtrih-temp, .scroll.green.active .shtrih-temp{box-shadow: inset 0px 0px 4px 1px #1ab14850;}

scroll.red, .scroll.red {border-color:#f22222; color:#f22222;}
scroll.red .scale-temp .arrow-temp, .scroll.red .scale-temp .arrow-temp{background:#f22222;}
scroll.red .scale-temp .btn-line, .scroll.red .scale-temp .btn-line {background:#f22222;}
scroll.red .scale-temp .btn-line-info, .scroll.red .scale-temp .btn-line-info {background:#f22222;}
scroll.red.active .shtrih-temp, .scroll.red.active .shtrih-temp{box-shadow: inset 0px 0px 4px 1px #f2222250;}

scroll.black, .scroll.black {border-color:#000; color:#000;}
scroll.black .scale-temp .arrow-temp, .scroll.black .scale-temp .arrow-temp{background:#000;}
scroll.black .scale-temp .btn-line, .scroll.black .scale-temp .btn-line {background:#000;}
scroll.black .scale-temp .btn-line-info, .scroll.black .scale-temp .btn-line-info {background:#000;}
scroll.black.active .shtrih-temp, .scroll.black.active .shtrih-temp{box-shadow: inset 0px 0px 4px 1px #00000050;}

scroll.blue, .scroll.blue {border-color:#007de3; color:#007de3;}
scroll.blue .scale-temp .arrow-temp, .scroll.blue .scale-temp .arrow-temp{background:#007de3;}
scroll.blue .scale-temp .btn-line, .scroll.blue .scale-temp .btn-line {background:#007de3;}
scroll.blue .scale-temp .btn-line-info, .scroll.blue .scale-temp .btn-line-info {background:#007de3;}
scroll.blue.active .shtrih-temp, .scroll.blue.active .shtrih-temp{box-shadow: inset 0px 0px 4px 1px #007de350;}

scroll.orange-full, .scroll.orange-full {border-color:#ffae00; color:#fff;}
scroll.orange-full .scale-temp, .scroll.orange-full .scale-temp{background:#ffae00;}
scroll.orange-full .scale-temp .arrow-temp, .scroll.orange-full .scale-temp .arrow-temp{background:#c68700;}
scroll.orange-full .scale-temp .btn-line, .scroll.orange-full .scale-temp .btn-line {background:#ffae00;}
scroll.orange-full .scale-temp .btn-line-info, .scroll.orange-full .scale-temp .btn-line-info {background:#ffae00;}
scroll.orange-full .shtrih-temp>p>span, .scroll.orange-full .shtrih-temp>p>span {color:#ffae00;}

scroll.green-full, .scroll.green-full {border-color:#1ab148; color:#fff;}
scroll.green-full .scale-temp, .scroll.green-full .scale-temp{background:#1ab148;}
scroll.green-full .scale-temp .arrow-temp, .scroll.green-full .scale-temp .arrow-temp{background:#0b822f;}
scroll.green-full .scale-temp .btn-line, .scroll.green-full .scale-temp .btn-line {background:#1ab148;}
scroll.green-full .scale-temp .btn-line-info, .scroll.green-full .scale-temp .btn-line-info {background:#1ab148;}
scroll.green-full .shtrih-temp>p>span, .scroll.green-full .shtrih-temp>p>span {color:#1ab148;}

scroll.red-full, .scroll.red-full {border-color:#f22222; color:#fff;}
scroll.red-full .scale-temp, .scroll.red-full .scale-temp{background:#f22222;}
scroll.red-full .scale-temp .arrow-temp, .scroll.red-full .scale-temp .arrow-temp{background:#ab1313;}
scroll.red-full .scale-temp .btn-line, .scroll.red-full .scale-temp .btn-line {background:#f22222;}
scroll.red-full .scale-temp .btn-line-info, .scroll.red-full .scale-temp .btn-line-info {background:#f22222;}
scroll.red-full .shtrih-temp>p>span, .scroll.red-full .shtrih-temp>p>span {color:#f22222;}

scroll.black-full, .scroll.black-full {border-color:#000000; color:#fff;}
scroll.black-full .scale-temp, .scroll.black-full .scale-temp{background:#000000;}
scroll.black-full .scale-temp .arrow-temp, .scroll.black-full .scale-temp .arrow-temp{background:#444444;}
scroll.black-full .scale-temp .btn-line, .scroll.black-full .scale-temp .btn-line {background:#000000;}
scroll.black-full .scale-temp .btn-line-info, .scroll.black-full .scale-temp .btn-line-info {background:#000000;}
scroll.black-full .shtrih-temp>p>span, .scroll.black-full .shtrih-temp>p>span {color:#000000;}

scroll.blue-full, .scroll.blue-full {border-color:#007de3; color:#fff;}
scroll.blue-full .scale-temp, .scroll.blue-full .scale-temp{background:#007de3;}
scroll.blue-full .scale-temp .arrow-temp, .scroll.blue-full .scale-temp .arrow-temp{background:#065fa7;}
scroll.blue-full .scale-temp .btn-line, .scroll.blue-full .scale-temp .btn-line {background:#007de3;}
scroll.blue-full .scale-temp .btn-line-info, .scroll.blue-full .scale-temp .btn-line-info {background:#007de3;}
scroll.blue-full .shtrih-temp>p>span, .scroll.blue-full .shtrih-temp>p>span {color:#007de3;}

/* switch */
switch, .switch {
	position:relative;
	cursor:pointer;
	display:inline-flex;
    justify-content: space-around;
    align-items: center;
    width: 80px;
    border-radius: 15px;
    height: 20px;
	background:#ccc;
	margin: 4px;
}
switch .btn, .switch .btn {
    color: #bbb;
	width:1px;
	height:100%;
	border-left:1px solid #ddd;
	z-index: 6;
}
switch .click, .switch .click {position:absolute; width:100%; height:100%; z-index:10;}
switch .coloring, .switch .coloring {
	position:absolute; top:0px; left:0px; width:0%; height:100%; background:#ffae00; border-radius: 15px;  
	transition: width 0.3s; z-index: 4;
}
switch .switcher, .switch .switcher {
    position: absolute;
   	display:inline-flex;
    justify-content: space-around;
    align-items: center;
    right: -12px;
    top: -2px;
    width: 24px;
    height: 24px;
    border: 1px solid #afafaf;
    border-radius: 50%;
    box-sizing: border-box;
    background: #f7f3ef;
	transition: right 0.3s;
}

switch.str .coloring, .switch.str .coloring{width: 	24%;}
switch.str .switcher, .switch.str .switcher{right: -3px;}

switch.mid .coloring, .switch.mid .coloring{width:50%; z-index: 8;}
switch.mid .switcher, .switch.mid .switcher{right: -12px;}

switch.end .coloring, .switch.end .coloring{width:100%;}
switch.end .switcher, .switch.end .switcher{right:-1px;}





switch2, .switch2{
	position:relative;
	cursor:pointer;
	display:inline-flex;
    justify-content:space-between;
    align-items: center;
    width: 100px;
    border-radius: 15px;
    height: 8px;
	background:#ccc;
	margin: 4px;
}
switch2 .btn, .switch2 .btn {
    color: #bbb;
    width: 24px;
    height: 24px;
    background: #f7f3ef;
    border: 1px solid #afafaf;
    border-radius: 50%;
    z-index: 6;
}
switch2 .click, .switch2 .click {position:absolute; width:100%; height:24px; z-index:20;}
switch2 .switcher, .switch2 .switcher {
	display: inline-flex;
    justify-content: space-around;
    align-items: center;
	position: absolute;
    left: 1%;
    width: 24px;
    height: 24px;
    background: #ffae00;
    border-radius: 50%;
    z-index: 8;
	transition: left 0.5s;
}

switch2.str .switcher, .switch2.str .switcher{left:1%;}

switch2.mid .switcher, .switch2.mid .switcher{left:38%;}

switch2.end .switcher, .switch2.end .switcher{left:75%;}

@keyframes switch2 {
	0% {transform:scale(1.00);}
	10%{transform:scale(1.2);}
	90% {transform:scale(1.2);}
	100% {transform:scale(1.00);}




/* DEMO */
.demo-block {
	width:25px;
	height:25px;
	background:#ccc;
}

.emitate-equp {
	width:300px;
	height:190px;
	background:#ccc;
	border: 1px solid #ffae00;
	border-radius:5px;
	overflow:hidden;
}
.emitate-equp header{    
	display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
	background:#fff;
	padding: 0px 2px;
	box-sizing: border-box;
}
.emitate-equp h4{margin:0px; padding:0px;}