.wrapper{
	position: fixed;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	padding: 0px 12px;
	gap: 12px;
}

.header{
	height: 40px;
	padding-left: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header_logo{
	width: 77px;
	height: 20px;
	background: url(/static/img/logo.svg);
}

.header_settings_button{
	position: relative;
	width: 40px;
	height: 40px;
	background: url(/static/img/gear.svg) center/14px no-repeat;
}

.header_settings_button::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.elevator_list_wrap{
	
}

.elevator_list_label{
	padding-left: 12px;
	font-size: 18px;
	font-weight: 590;
}

.elevator_list{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	margin: 12px 0 0;
	flex-wrap: wrap;
	height: calc(var(--elevator-size) * 2 + 12px);
}

.elevator{
	width: var(--elevator-size);
	height: var(--elevator-size);
	background: rgba(255, 255, 255, 0.03);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.elevator[online="0"]{
	display: none;
}

.elevator_inner{
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: var(--elevator-arrow-radius);
	width: var(--elevator-inner-width);
	height: var(--elevator-inner-height);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.elevator_direction{
	position: absolute;
	z-index: 0;
	background: radial-gradient(100% 55% at 50% 84%,rgba(255, 255, 255, 0) 43%,rgba(255, 255, 255, 0.2) 213%);
	width: 100%;
	height: 50%;
	left: 0;
	transition: opacity 0.5s;
	opacity: 0;
	top: 0;
	transform-origin: center bottom;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/*padding-top: 6px;*/
}

.elevator_direction[dir="down"]{
	transform: rotate(180deg);
}

.elevator[dir="1"] .elevator_direction[dir="up"],
.elevator[dir="2"] .elevator_direction[dir="up"],
.elevator[dir="3"] .elevator_direction[dir="down"],
.elevator[dir="4"] .elevator_direction[dir="down"]{
	opacity: 1;
}

.elevator_dir_icon{
	background: url(/static/img/arrow.svg) center/ 100% no-repeat;
	width: var(--elevator-arrow-width);
	height: var(--elevator-arrow-height);
	margin-top: var(--elevator-arrow-margin);
	transition: transform 0.75s;
	transform: translateY(0px);
}

.elevator[dir="2"] .elevator_direction[dir="up"] .elevator_dir_icon,
.elevator[dir="4"] .elevator_direction[dir="down"] .elevator_dir_icon{
	animation: upDown 1.5s ease-in-out infinite;
}

@keyframes upDown{
	0%   { transform: translateY(0); }
	50%  { transform: translateY(var(--elevator-arrow-move));}
	100% { transform: translateY(0); }
}

.elevator_floor{
	font-size: var(--elevator-floor);
	text-align: center;
	position: relative;
	z-index: 1;
}

.floor_selector{
	height: var(--floor-selector-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.floor_list_wrap{
	width: 238px;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.floor_list_selected_frame{
	height: 49px;
	width: 238px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.floor_list_selected_frame_border{
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #00000000, #ffffff, #00000000);
}

.floor_list{
	width: 280px;
	height: 100%;
	overflow: hidden auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: var(--floor-selector-padding) 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent,#fff, transparent);
	/*scroll-snap-type: y mandatory;*/
	scroll-snap-type: y proximity;
	-webkit-overflow-scrolling: touch
}

.floor{
	width: 238px;
	height: 29px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	scroll-snap-align: center;
  	/*scroll-snap-stop: always;*/
}

.floor_icon{
	position: absolute;
	width: 29px;
	height: 29px;
	background-position: center;
	background-size: auto;
	background-repeat: no-repeat;
	top: 0;
	left: 42px;
}

.floor_name{

}

.floor_name > span{
	font-size: 24px;
	line-height: 29px;
	display: inline-block;
	width: 15px;
}

.floor_name > span:nth-child(1){
	text-align: right;
}

.floor_name > span:nth-child(2){
	text-align: left;
}

.floor_name::after{
	content: 'этаж';
}

.floor_link_list{
	width: 120px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.floor_link{
	width: 120px;
	height: 41px;
	display: flex;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
}

.floor_link_icon{
	width: 39px;
	height: 39px;
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

.floor_link_name{
	width: 79px;
	font-size: 14px;
}

.call_button_wrap{
	height: 209px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.status{
	top: 0;
	position: absolute;
	color: #9fbff5;
	font-size: 14px;
}

.status_word{
	
}

.status_points{
	position: absolute;
	top: 0;
	width: 11px;
	right: -11px;
}

.call_button{
	width: 198px;
	height: 198px;
	transition: background 0.2s;
	background-size: 198px 198px;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.call_button_wrap[state="idle"] .call_button{
	background-image: url(/static/img/call_button.png);
}

.call_button_wrap[state="active"] .call_button{
	background-image: url(/static/img/call_button_active.png);
}

.call_button_tap_zone{
	width: 120px;
	height: 120px;
	border-radius: 50%;
}