@font-face{
	font-family: 'Fairfax';
	src: url('/static/font/Fairfax.ttf');
}

.page_wrapper{

}

.page_wrapper[type="main"] .page[type="group"],
.page_wrapper[type="group"] .page[type="main"]{
	display: none;
}



.page_back_wrap{
	height: 40px;
	display: flex;
	align-items: center;
	padding: 10px;
}

.page_back_wrap[show="0"]{
	display: none;
}

.page_back{
	font-family: 'MontserratSemiBold';
	cursor: pointer;
}

.page_back::before{
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-left: 2px solid #363636;
	border-bottom: 2px solid #363636;
	transform: rotate(45deg);
}

.page{
	padding: 5px;
	/*position: relative;*/
}

.page[type="main"]{
	padding: 0;
}

.main_list_wrap{
	display: flex;
	flex-direction: column;
}

.main_device_row{
	padding: 10px;
	cursor: pointer;
}

.main_device_row:nth-child(2n){
	background: #eaeaea;
}

.main_device_id{
	font-size: 16px;
	font-family: 'MontserratSemiBold';
}

.main_device_address{
	font-size: 12px;
}

.main_list_empty{
	padding: 30px;
	text-align: center;
}

.group_hse_wrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #303030;
	display: flex;
	overflow: hidden auto;
	z-index: 10;
}

.group_hse_wrap[show="0"]{
	/*display: none;*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.group_hse_wrap[show="1"]{
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s, visibility 0s;
}

.group_hse{
	width: 375px;
	height: 812px;
	background: url(/static/img/group_elevator/hse.jpg);
	margin: auto;
	position: relative;
}

.group_hse_close_wrap{
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.group_hse_close{
	width: 140px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	background: #d10303;
	font-family: 'MontserratSemiBold';
	border-radius: 7px;
}

.group_hse_menu{
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.group_hse_menu_button{
	width: 140px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-family: 'MontserratSemiBold';
	border-radius: 7px;
	box-shadow: 0px 3px 5px black;
	cursor: pointer;
}

.group_hse_menu_button[type="red"]{
	background: #d10303;
}

.group_hse_menu_button[type="blue"]{
	background: #2a6cff;
}

.group_hse_display_wrap{
	position: absolute;
	width: 375px;
	height: 150px;
	z-index: 1;
	top: 98px;
	left: 0px;
}

.group_hse_display,
.group_hse_cursor_field{
	position: absolute;
	width: 360px;
	height: 150px;
	top: 0px;
	left: 8px;
	display: grid;
	grid-template-columns: repeat(16,1fr);
	grid-template-rows: repeat(4, 1fr);
	padding: 0px 0px 0px 4px;
}

.group_hse_display{
	background: #709b01;
	box-shadow: inset 0 3px 5px rgb(0 0 0 / 35%);
}

.group_hse_display > span {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Fairfax';
	color: #353535;
	font-size: 40px;
	line-height: 37px;
	background-position: center;
	background-repeat: no-repeat;
}


.group_hse_display > span[charcode="1"]{background-image: url(/static/img/group_elevator/symbols/1.png);}
.group_hse_display > span[charcode="2"]{background-image: url(/static/img/group_elevator/symbols/3.png);}
.group_hse_display > span[charcode="3"]::after{content: '◀'}
.group_hse_display > span[charcode="4"]::after{content: '▶'}
.group_hse_display > span[charcode="5"]::after{content: '↑'}
.group_hse_display > span[charcode="6"]::after{content: '↓'}
.group_hse_display > span[charcode="7"]::after{content: '↕'}
.group_hse_display > span[charcode="8"]{background-image: url(/static/img/group_elevator/symbols/4.png);}
.group_hse_display > span[charcode="9"]{background-image: url(/static/img/group_elevator/symbols/_1.png);}
.group_hse_display > span[charcode="10"]{background-image: url(/static/img/group_elevator/symbols/_2.png);}
.group_hse_display > span[charcode="11"]{background-image: url(/static/img/group_elevator/symbols/_3.png);}
.group_hse_display > span[charcode="12"]{background-image: url(/static/img/group_elevator/symbols/_4.png);}
.group_hse_display > span[charcode="13"]{background-image: url(/static/img/group_elevator/symbols/_5.png);}
.group_hse_display > span[charcode="14"]{background-image: url(/static/img/group_elevator/symbols/_6.png);}
.group_hse_display > span[charcode="15"]{background-image: url(/static/img/group_elevator/symbols/_7.png);}
.group_hse_display > span[charcode="16"]{background-image: url(/static/img/group_elevator/symbols/_8.png);}
.group_hse_display > span[charcode="150"]::after{content: ' '}
.group_hse_display > span[charcode="209"]::after{content: '\\'}
.group_hse_display > span[charcode="217"]::after{content: '↑'}
.group_hse_display > span[charcode="218"]::after{content: '↓'}
.group_hse_display > span[charcode="223"]::after{content: '°'}
.group_hse_display > span[charcode="252"]{background-image: url(/static/img/group_elevator/symbols/252.png);}
.group_hse_display > span[charcode="255"]{background-image: url(/static/img/group_elevator/symbols/2.png);}








.group_hse_cursor_field{

}

.cursor{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: flex-end;
}

.cursor[type="12"]{
	display: none;
}

.cursor[type="14"]::before{
	content: '';
	display: block;
	width: 20px;
	height: 4px;
	background: #353535;
}

.cursor[type="15"]{
	animation: animated_cursor 1s linear infinite;
}

@keyframes animated_cursor{
	0%{
		background: rgba(0,0,0,0);
	}
	25%{
		background: #353535;
	}
	50%{
		background: #353535;
	}
	75%{
		background: rgba(0,0,0,0);
	}
	100%{
		background: rgba(0,0,0,0);
	}
}


.group_hse_keyboard_buttons_wrap{
	position: absolute;
	width: 343px;
	height: 362px;
	top: 339px;
	left: 17px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.group_hse_keyboard_button{
	width: 87px;
	height: 54px;
	margin-bottom: 16px;
	cursor: pointer;
}

.group_hse_commands_wrap{
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	background: white;
	width: calc(100vw - 15px);
	height: 100%;
	border-radius: 0 30px 30px 0;
	box-shadow: 0px 0px 15px black;
	transition: transform 0.3s;
	text-align: center;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.group_hse_commands_wrap[show="0"]{
	transform: translateX(-100%);
	box-shadow: none;
}

.group_hse_commands_wrap[show="1"]{
	transform: translateX(0%);
}

.group_hse_commands_close_wrap{
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 15px 0 0;
}

.group_hse_commands_close{
	border-radius: 50%;
	position: relative;
	width: 30px;
	height: 30px;
	box-shadow: 0px 3px 5px black;
	background: #d10303;
	display: flex;
	align-items: center;
	justify-content: center;
}

.group_hse_commands_close::before,
.group_hse_commands_close::after{
	content: '';
	display: block;
	position: absolute;
	background: white;
	width: 3px;
	height: 20px;
	transform: rotate(45deg);
}

.group_hse_commands_close::after{
	transform: rotate(-45deg);
}

.group_hse_commands_header{
	font-size: 20px;
	font-family: 'MontserratSemiBold';
}

.group_hse_commands_list{
	padding: 10px;
	overflow: hidden auto;
	flex: 1;
}

.group_hse_commands_list_row{

}

.group_hse_commands_list_row_column{

}

.group_hse_commands_list_row_column[type="buttons"]{
	display: flex;
	justify-content: center;
	gap: 5px;
}

.group_hse_commands_list_row_column[type="text"]{
	margin: 10px 0 0;
}

.group_hse_commands_button{
	background: #2a6cff;
	color: white;
	font-family: arial;
	font-weight: 600;
	width: 38px;
	height: 23px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 3px 5px #000000;
}

.group_hse_commands_button[type="e"]{
	background: url(/static/img/group_elevator/enter.png) 8px 5px/18px no-repeat #25a51c;
}

.group_hse_commands_list_del{
	height: 2px;
	background: #e5e5e5;
	margin: 10px auto 17px;
}

@media(min-width: 800px){
	.group_hse_wrap{
		background: #00000078;
	}
	.group_hse{
		margin: auto 10px auto auto;
		box-shadow: 0px 3px 5px black;
	}
	.group_hse_wrap[show="1"] .group_hse{
		animation: hse800in 0.3s forwards;
	}
	.group_hse_wrap[show="0"] .group_hse{
		animation: hse800out 0.3s forwards;
	}
	.group_hse_menu_button[commands_open]{
		display: none;
	}
	.group_hse_commands_wrap[show="0"],
	.group_hse_commands_wrap[show="1"]{
		transition: none;
		transform: none;
		box-shadow: 0px 3px 5px black;
	}
	.group_hse_commands_close{
		display: none;
	}
	.group_hse_commands_wrap{
		width: calc(100vw - 395px);
		height: calc(100vh - 20px);
		top: 10px;
	}
	.group_hse_wrap[show="1"] .group_hse_commands_wrap{
		animation: hse_commands800in 0.3s forwards;
	}
	.group_hse_wrap[show="0"] .group_hse_commands_wrap{
		animation: hse_commands800out 0.3s forwards;
	}
}

@media(min-width: 1100px){
	.group_hse_commands_list_row{
		display: flex;
		gap: 40px;
		align-items: center;
		padding: 0px 30px;
	}
	.group_hse_commands_list_row_column[type="buttons"]{
		justify-content: flex-end;
		width: 210px;
		flex-shrink: 0;
	}
	.group_hse_commands_list_row_column[type="text"]{
		flex-shrink: 2;
		text-align: left;
		margin: 0;
	}
	.group_hse_commands_list_del{
		margin: 17px auto 17px;
		width: calc(100% - 60px);
	}
	.group_hse_commands_list{
		padding: 30px 10px;
	}
}

@media(min-width: 1380px){
	.group_hse_commands_wrap{
		width: 985px;
	}
}

@keyframes hse800in{
	from{
		transform: translateX(110%);
	}
	to{
		transform: translateX(0%);
	}
}

@keyframes hse800out{
	from{
		transform: translateX(0%);
	}
	to{
		transform: translateX(110%);
	}
}

@keyframes hse_commands800in{
	from{
		transform: translateX(-110%);
	}
	to{
		transform: translateX(0%);
	}
}

@keyframes hse_commands800out{
	from{
		transform: translateX(0%);
	}
	to{
		transform: translateX(-110%);
	}
}

.group_stations{
	font-family: MontserratMedium;
	font-size: 20px;
	border-radius: 10px;
	box-shadow: 0 3px 5px #00000047;
	padding: 10px;
	height: 50px;
	overflow: hidden;
	position: relative;
	transition: height 0.3s, padding 0.3s;
}

.group_stations_label{
	display: flex;
	height: 30px;
	align-items: center;
	font-family: 'MontserratSemiBold';
}

.group_stations_expander{
	width: 30px;
	height: 30px;
	background: url(/static/img/group_elevator/spoiler.svg) center/ 30px no-repeat;
	transition: transform 0.3s;
}

.group_stations_list{
	transition: opacity 0.3s;
	opacity: 0;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
}


.group_stations[expand="1"]{
	height: 256px;
}

.group_stations[expand="1"] .group_stations_expander{
	transform: rotate(180deg);
}

.group_stations[expand="1"] .group_stations_list{
	opacity: 1;
}

.group_stations[show="0"][expand="0"],
.group_stations[show="0"][expand="1"]{
	padding: 0px;
	height: 0px;
}

.group_stations_num{
	line-height: 24px;
	text-align: center;
	transition: background 0.3s, color 0.3s;
	border-radius: 4px;
}

.group_stations_num[active="1"]{
	background: #0459a5;
	color: white;
}

.group_elevator_list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 10px 0;
	gap: 10px;
}

.group_elevator_card{
	border-radius: 10px;
	box-shadow: 0 3px 5px #00000047;
	padding: 15px;
}

.group_elevator_card[show="0"]{
	display: none;
}

.group_elevator_header{
	display: flex;
	height: 30px;
	align-items: center;
}

.group_elevator_header_num{
	font-family: 'MontserratBold';
}

.group_elevator_header_status{
	text-align: center;
	font-family: 'MontserratBold';
	font-size: 10px;
	width: calc(100% - 22px);
}

.group_elevator_header_online{
	width: 10px;
	height: 10px;
	border-radius: 5px;
}

.group_elevator_header_online[online="0"]{
	background: #a50404;
}

.group_elevator_header_online[online="1"]{
	background: #0459a5;
}

.group_elevator_del{
	height: 1px;
	background: #e5e5e5;
}

.group_elevator_cabin_wrap{
	width: 46px;
	height: 46px;
	background: url(/static/img/group_elevator/cabin.png);
	margin: 10px auto;
	position: relative;
}

.group_elevator_cabin_indication{
	width: 5px;
	height: 5px;
	background-image: url(/static/img/group_elevator/arrows.png);
	background-size: 5px 20px;
	background-repeat: no-repeat;
	position: absolute;
	top: 2px;
}

.group_elevator_cabin_indication[type="up"]{
	right: 16px;
	background-position: 0px 0px;
}

.group_elevator_cabin_indication[type="down"]{
	left: 16px;
	background-position: 0px -5px;
}

.group_elevator_cabin_indication[type="up"][active="1"]{
	background-position: 0px -10px;
}

.group_elevator_cabin_indication[type="down"][active="1"]{
	background-position: 0px -15px;
}

.group_elevator_cabin_door_wrap{
	width: 28px;
	height: 32px;
	position: absolute;
	top: 9px;
	left: 9px;
	overflow: hidden;
}

.group_elevator_cabin_door{
	position: absolute;
	top: 0;
	width: 14px;
	height: 32px;
	background-size: 14px 32px;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.5s;
}

.group_elevator_cabin_door_wrap[type="1"] .group_elevator_cabin_door[type="left"]{
	transform: translateX(-14px);
}

.group_elevator_cabin_door_wrap[type="1"] .group_elevator_cabin_door[type="right"]{
	transform: translateX(14px);
}

.group_elevator_cabin_door[type="left"]{
	left: 0;
	background-image: url(/static/img/group_elevator/door_left.png);
}

.group_elevator_cabin_door[type="right"]{
	right: 0;
	background-image: url(/static/img/group_elevator/door_right.png);
}

.group_elevator_pos{
	display: flex;
}

.group_elevator_num_wrap{
	flex: 1;
}

.group_elevator_num{
	font-size: 65px;
	line-height: 80px;
	text-align: center;
}

.group_elevator_arrow{
	width: 60px;
	height: 80px;
	background: url(/static/img/group_elevator/arrow_big.svg) center/110% no-repeat;
	transition: width 0.3s;
}

.group_elevator_arrow[type="0"]{
	width: 0px;
	opacity: 0;
}

.group_elevator_arrow[type="1"]{
	
}

.group_elevator_arrow[type="2"]{
	animation: arrow_up 2s infinite;
}

.group_elevator_arrow[type="3"]{
	transform: rotate(180deg);
}

.group_elevator_arrow[type="4"]{
	animation: arrow_down 2s infinite;
}

@keyframes arrow_up{
	0%{
		transform: translateY(0px);
	}
	50%{
		transform: translateY(-10px);
	}
	100%{
		transform: translateY(0px);
	}
}

@keyframes arrow_down{
	0%{
		transform: rotate(180deg) translateY(0px);
	}
	50%{
		transform: rotate(180deg) translateY(-10px);
	}
	100%{
		transform: rotate(180deg) translateY(0px);
	}
}

.group_elevator_queue{
	min-height: 30px;
	display: flex;
	/*align-items: center;*/
	justify-content: center;
	gap: 10px;
	font-family: 'MontserratBold';
	color: #0459a5;
	flex-wrap: wrap;
}

.group_elevator_queue_elem{
	line-height: 30px;
}

.group_call{
	border-radius: 10px;
	box-shadow: 0 3px 5px #00000047;
	padding: 15px;
	font-family: 'MontserratMedium';
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.group_call_row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 30px;
}

.group_call_param_name{
	
}

.group_call_elevator_select_wrap{
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.group_call_elevator_select{
	display: flex;
	gap: 10px;
}

.group_call_elevator_select_elem{
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: #f4f4f4;
}

.group_call_elevator_select_elem[active="1"]{
	background: #0459a5;
	color: white;
}

.group_call_input{
	background: #f4f4f4;
	height: 30px;
	border-radius: 4px;
	width: 30px;
	text-align: center;
	font-family: 'MontserratMedium';
	font-size: 16px;
	color: #363636;
}

.group_call_door_select{
	display: flex;
	gap: 10px;
}

.group_call_door_select_option{
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: #f4f4f4;
}

.group_call_door_select_option[active="1"]{
	background: #0459a5;
	color: white;
}

.group_call_direction_select{
	display: flex;
	gap: 10px;
}

.group_call_direction_select_option{
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background-color: #f4f4f4;
	background-position: center;
	background-size: 20px;
	background-repeat: no-repeat;
}

.group_call_direction_select_option[index="0"]{
	background-image: url(/static/img/group_elevator/call_arrows/up.svg);
}

.group_call_direction_select_option[index="1"]{
	background-image: url(/static/img/group_elevator/call_arrows/down.svg);
}

.group_call_direction_select_option[index="2"]{
	background-image: url(/static/img/group_elevator/call_arrows/up_down.svg);
}

.group_call_direction_select_option[index="0"][active="1"]{
	background-color: #0459a5;
	background-image: url(/static/img/group_elevator/call_arrows/up_active.svg);
}

.group_call_direction_select_option[index="1"][active="1"]{
	background-color: #0459a5;
	background-image: url(/static/img/group_elevator/call_arrows/down_active.svg);
}

.group_call_direction_select_option[index="2"][active="1"]{
	background-color: #0459a5;
	background-image: url(/static/img/group_elevator/call_arrows/up_down_active.svg);
}

.group_call_config_wrap[type="0"] .group_call_config[type="1"],
.group_call_config_wrap[type="1"] .group_call_config[type="0"]{
	display: none;
}

.group_call_config{
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.group_call_button{
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: #0459a5;
	color: white;
	font-family: 'MontserratBold';
}

.group_call_button[disabled="1"]{
	background: #acacac;
}



@media(min-width: 960px){
	.group_stations[expand="1"]{
		height: 154px;
	}
	.group_stations_list{
		grid-template-columns: repeat(16, 1fr);
	}
	.group_elevator_list{
		grid-template-columns: repeat(3, 1fr);
	}
	.group_elevator_pos{
		position: relative;
		justify-content: flex-end;
	}
	.group_elevator_num_wrap{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.group_call_elevator_select_wrap{
		display: flex;
		flex-direction: row;
		gap: 0px;
		height: 30px;
		align-items: center;
		justify-content: space-between;

	}
	.group_call_button{
		width: 300px;
		margin: auto;
	}
	.group_elevator_header_status{
		font-size: 13px;
	}
}

@media(min-width: 1300px){
	.page_wrapper[type="group"]{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		flex: 1;
	}
	.group_stations{
		grid-area: a;
	}
	.group_elevator_list{
		grid-area: b;
	}
	.group_call{
		padding: 10px;
		grid-area: c;
	}

	.page[type="group"]{
		width: 1300px;
		margin: auto;
		padding: 0;
		display: grid;
  		grid-template-areas:
  			"b b"
  			"c a";
  		gap: 10px;
	}
	.group_elevator_list{
		margin: 10px 0 0;
		grid-template-columns: repeat(4, 1fr);
	}
	.group_stations_label,
	.group_call_elevator_select_elem,
	.group_call_door_select_option,
	.group_call_direction_select_option,
	.group_call_button[disabled="0"]{
		cursor: pointer;
		user-select: none;
	}
	.group_elevator_header_status {
		font-size: 16px;
	}
	
}