/*
Theme Name: MO Tel-Aviv Parking App
Theme URI: /
Description: MO Tel-Aviv Parking App
*/
:root {
	--popup-x: 50%;
	--popup-y: 50%;
}
body{
	margin: 0;
	background: #eef6fa;
	font: 18px 'Open Sans', Arial, sans-serif;
	color: #1f344d;
}
body > canvas{
	opacity: 0;
	position: absolute;
	width: 1px;
	height: 1px;
}
img{
	max-width: 100%;
	vertical-align: top;
}
a{
	text-decoration: none;
}
#main{
	width: 100%;
	min-height: 100vh;
	background: #eef6fa;
	display: flex;
}
/*.loading #main:before{
	content: "Loading...";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #f0f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
}*/
.login-holder{
	max-width: 600px;
	padding: 20px;
	margin: 0 auto;
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.login-holder h1{
	margin: 0 0 40px;
	text-align: center;
	text-transform: uppercase;
	font-size: 35px;
	font-weight: 500;
}
.login-holder label{
	display: block;
	font-size: 16px;
	margin: 0 0 5px;
}
.login-holder input[type="text"],
.login-holder input[type="email"],
.login-holder input[type="password"]{
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: none;
	border: none;
	border-bottom: 1px solid #24344b;
	height: 40px;
	font: 18px 'Open Sans', Arial, sans-serif;
	line-height: 100%;
	margin: 0 0 20px;
	padding: 0 10px;
}
.login-holder input::placeholder{
	color: #1f344d;
}
.login-holder input:focus::placeholder{
	opacity: 0.5;
}
.login-holder input[type="submit"]{
	display: block;
	width: 100%;
	max-width: 298px;
	margin: 0 auto;
	border: 1px solid #1f344d;
	border-radius: 999px;
	background: none;
	height: 40px;
	font: 18px 'Open Sans', Arial, sans-serif;
	line-height: 100%;
	box-shadow: none;
	color: #1f344d;
	text-transform: uppercase;
	cursor: pointer;
}
.login-holder input[type="submit"]:hover{
	background: #1f344d;
	color: #fff;
}
.login-holder .parking-logo{
	width: 167px;
	margin: 100px auto 0;
}
.login-holder .status{
	color: red;
	text-align: center;
}
.login-holder .status.successful{
	color: green;
}
.welcome-screen{
	text-align: center;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	font-size: 22px;
	line-height: 1.5;
	position: relative;
	z-index: 2000;
	background: #deecf5;
	min-height: 100vh;
}
.welcome-screen h1{
	margin: 0 0 40px;
	text-align: center;
	text-transform: uppercase;
	font-size: 35px;
	font-weight: 500;
}
.welcome-screen p{
	font-style: italic;
	margin: 0 0 25px;
}
.welcome-screen .btn{
	display: block;
	width: 100%;
	max-width: 298px;
	margin: 25px auto 0;
	border: 1px solid #1f344d;
	border-radius: 999px;
	background: none;
	height: 40px;
	font: 18px/38px 'Open Sans', Arial, sans-serif;
	box-shadow: none;
	color: #1f344d;
	text-transform: uppercase;
	cursor: pointer;
}
.welcome-screen .btn:hover{
	background: #1f344d;
	color: #fff;
}
.welcome-screen .parking-logo{
	width: 167px;
	margin: 100px auto 0;
}
.alert-section{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	font-size: 22px;
}
.content-text{
	min-height: calc(100vh - 130px);
	width: 100%;
	margin: 0 auto;
	font-size: 22px;
	line-height: 1.4;
	padding: 100px 0 0;
	box-sizing: border-box;
}
.content-slides-nav{
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 20px;
	display: flex;
	gap: 35px;
	justify-content: center;
}
.content-slides-nav .shikbtn{
	border: 1px solid #3d5066;
	border-radius: 20px;
	padding: 3px 25px;
	color: #1f344d;
	background: none;
	line-height: 28px;
	display: none !important;
}
.content-slides-nav .shikbtn:hover {
	background: #2b3d58;
	color: #fff;
}
.content-slides-nav .nav-wrapper{
	display: flex;
	border: 1px solid #3d5066;
	border-radius: 20px;
	padding: 3px;
	align-items: center;
	margin: 0;
}
.content-slides-nav .nav-wrapper ul{
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: normal;
	gap: 16px;
}
.content-slides-nav .nav-wrapper ul li a{
	color: #8f9aa6;
}
.content-slides-nav .nav-wrapper ul li.active a{
	color: #1f344d;
	font-weight: bold;
}
.content-slides-nav .nav-wrapper .btn.back,
.content-slides-nav .nav-wrapper .btn.next{
	display: inline-block;
	text-indent: -9999px;
	width: 28px;
	height: 28px;
	background: #1f344d;
	border-radius: 50%;
	position: relative;
	margin: 0 15px 0 0;
	min-width: inherit;
	padding: 0;
}
.content-slides-nav .nav-wrapper .btn.next{
	margin: 0 0 0 15px;
}
.content-slides-nav .nav-wrapper .btn.back.disabled,
.content-slides-nav .nav-wrapper .btn.next.disabled{
	pointer-events: none;
	opacity: 0.3;
}
.content-slides-nav .nav-wrapper .btn.back:before,
.content-slides-nav .nav-wrapper .btn.next:before{
	content: "";
	position: absolute;
	left: -7px;
	top: 7px;
	border-style: solid;
	border-width: 7px 12px;
	border-color: transparent #ddebf4 transparent transparent;
	width: 0;
	height: 0;
}
.content-slides-nav .nav-wrapper .btn.next:before{
	left: 11px;
	border-color: transparent transparent transparent #ddebf4;
}
.alignright{
	max-width: 60%;
	float: right;
	margin: 0 0 10px 40px;
}
.alignleft{
	max-width: 60%;
	float: left;
	margin: 0 40px 10px 0;
}
#content .content-text h1{
	text-transform: none;
	font-size: 50px;
	margin: 0 0 40px;
}
#content .content-text h2{
	font-size: 30px;
	font-weight: normal;
	margin: 0 0 40px;
}
#content .content-text h3{
	font-size: 22px;
	font-weight: bold;
	margin: 0 0 20px;
}
#content .content-text p{
	margin: 0 0 30px;
}
.content-text ul{
	margin: 0 0 50px;
	padding: 0;
	list-style: none;
}
.content-text ul li{
	position: relative;
	padding: 0 0 20px 25px;
}
.content-text ul li:before{
	content: "";
	width: 12px;
	height: 12px;
	background: #24344b;
	position: absolute;
	left: 0;
	top: 9px;
}
#content .content-slide:last-child .content-text{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 0;
}
#content .content-slide:last-child .content-text h3{
	font-size: 40px;
	font-weight: 500;
}
.content-text .btn{
	min-width: 410px;
	display: block;
	width: 100%;
	max-width: 298px;
	margin: 25px auto 0;
	border: 1px solid #1f344d;
	border-radius: 999px;
	background: none;
	height: 40px;
	font: 18px / 38px 'Open Sans', Arial, sans-serif;
	box-shadow: none;
	color: #1f344d;
	text-transform: uppercase;
	cursor: pointer;

}
.content-text .btn:hover{
	color: #fff;
}
#sidebar{
	float: left;
	min-height: 100vh;
	overflow: auto;
	width: 430px;
	background: #deecf5;
	box-sizing: border-box;
	padding: 65px 20px 65px;
}
.name{
	display: block;
	font-weight: normal;
	font-size: 30px;
	margin: 0 0 5px;
}
.number{
	display: block;
	font-style: italic;
	margin: 0 0 50px;
	font-family: 'GFS Didot', sans-serif;
}
address{
	font-style: normal;
	display: block;
	margin: 0 0 10px;
}
.selecting-data-holder h1{
	margin:  0 0 40px;
	padding: 7px 0;
	font-size: 22px;
	text-transform: uppercase;
	border: 1px solid #1f344d;
	border-width: 1px 0;
	font-weight: normal;

}
.apartment-holder{
	margin: 0 0 20px;
}
.apartment-holder h3{
	font-weight: normal;
	font-size: 18px;
	margin: 0 0 15px;
	padding: 3px 0 0 35px;
	position: relative;
	cursor: pointer;
}
.apartment-holder h3:before{
	content: "+";
	position: absolute;
	width: 20px;
	height: 20px;
	left: 0;
	top: 1px;
	text-align: center;
	border: 1px solid #1f344d;
	border-radius: 50%;
	color: #1f344d;
	font-size: 16px;
	line-height: 18px;
	font-weight: bold;
}
.apartment-holder h3:after{
	content: "";
	width: 8px;
	height: 1px;
	position: absolute;
	left: 7px;
	top: 12px;
	background: #1f344d;
	display: none;
}
.apartment-holder.opened h3:before{
	content: "";
}
.apartment-holder.opened h3:after{
	display: block;
}
.selecting-data{
	margin: 0;
	padding: 0 0 0 30px;
	list-style: none;
	display: none;
}
.apartment-holder.opened .selecting-data{
	display: block;
}
.selecting-data li{
	padding: 0 0 15px 25px;
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.selecting-data li:before{
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid #1f344d;
}
.selecting-data .selecting-item{
	display: block;
	font-weight: normal;
	white-space: nowrap;
}
.selecting-data .selected-info{
	margin: 0 5px;
	display: none;
	color: #A67802;
	font-size: 16px;
	white-space: nowrap;
}
/*.selecting-data .selected-info .level-info:before{
	content: "(";
}
.selecting-data .selected-info .level-info:after{
	content: ")";
}*/
.selecting-data li.selected .selected-info{
	display: inline-block;
}
.selecting-data li.selected:before{
	background: #1f344d;
}
.selecting-data li.selected.disabled,
.selecting-data li.selected{
	color: #1f344d;
}
.selecting-data li.disabled{
	color: #c0cad3;
}
.selecting-data li.disabled:before{
	border-color: #c0cad3;
}
.selecting-data li.disabled .goTooSelection{
	display: none;
}
.selecting-data li.selected.disabled .goTooSelection,
.selecting-data li.selected .goTooSelection,
.selecting-data li .approveSelection,
.selecting-data li .clearSelection{
	display: inline-block;
	font-size: 14px;
	margin: 0 0 0 15px;
	text-decoration: underline;
	color: #1f344d;
}
#content {
	box-sizing: border-box;
	padding: 40px 4.5%;
	width: 100%;
	height: 100vh;
	overflow: auto;
	display: none;
}
.where-am-i,
.back-to-tutorial{
	position: absolute;
	right: 0;
	bottom: 26px;
	color: #1f344d;
	text-align: center;
	padding: 0 25px;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 30px;
	border-radius: 30px 0 0 30px;
	border: 1px solid #1f344d;
	border-right: none;
	min-width: 150px;
}
.where-am-i:hover,
.back-to-tutorial:hover{
	background: #1f344d;
	color: #fff;
}
.back-to-tutorial{
	bottom: 75px;
}
#content h1{
	margin: 0 0 15px;
	font-weight: normal;
	font-size: 30px;
	text-transform: uppercase;
}
.level-nav{
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 20px;
	vertical-align: middle;
	display: flex;
}
.select-level{
	display: flex;
	border: 1px solid #3d5066;
	border-radius: 20px;
	padding: 3px;
	align-items: center;
	margin: 0 22px 0 0;
}
.show-index{
	border: 1px solid #3d5066;
	border-radius: 20px;
	padding: 3px 25px;
	color: #1f344d;
}
.level-nav .level-name{
	margin: 0 12px 0 0;
}
.level-nav ul{
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: normal;
	gap: 16px;
}
.level-nav ul li a{
	color: #8f9aa6;
}
.level-nav ul li.active a{
	color: #1f344d;
	font-weight: bold;
}
.level-nav .prev-level,
.level-nav .next-level{
	display: inline-block;
	text-indent: -9999px;
	width: 28px;
	height: 28px;
	background: #1f344d;
	border-radius: 50%;
	position: relative;
	margin: 0 15px 0 0;
}
.level-nav .next-level{
	margin: 0 0 0 15px;
}
.level-nav .prev-level[disabled="disabled"],
.level-nav .next-level[disabled="disabled"]{
	pointer-events: none;
	opacity: 0.3;
}
.level-nav .prev-level:before,
.level-nav .next-level:before{
	content: "";
	position: absolute;
	left: -7px;
	top: 7px;
	border-style: solid;
	border-width: 7px 12px;
	border-color: transparent #ddebf4 transparent transparent;
	width: 0;
	height: 0;
}
.level-nav .next-level:before{
	left: 11px;
	border-color: transparent transparent transparent #ddebf4;
}
.image-area svg {
	max-height: calc(100vh - 220px);
}
.btn{
	display: inline-block;
	min-width: 150px;
	color: #fff;
	padding: 0 20px;
	box-sizing: border-box;
	line-height: 36px;
	background: #24344b;
	text-decoration: none;
	text-align: center;
	font-size: 16px;
}
.btn:hover{
	background: #2b3d58;
}
.buttons-holder{
	margin: 0 0 5px;
}
.buttons-holder .btn{
	margin-right: 15px;
	display: none;
	width: 100%;
}
.buttons-holder .btn.approve.disabled{
	display: block;
	opacity: 0.3;
}
.initial-screen{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #eef6fa;
	font-size: 40px;
	text-align: center;
	z-index: 100;
}
.initial-screen *{
	max-width: 770px;
}
.initial-screen p{
	margin: 0 0 80px;
}
.initial-screen .btn {
	display: block;
	width: 100%;
	max-width: 298px;
	margin: 25px auto 0;
	border: 1px solid #1f344d;
	border-radius: 999px;
	background: none;
	height: 40px;
	font: 18px / 38px 'Open Sans', Arial, sans-serif;
	box-shadow: none;
	color: #1f344d;
	text-transform: uppercase;
	cursor: pointer;
}
#selection-arrea{
	display: flex;
	height: calc(100vh - 80px);
	flex-direction: column;
	width: 100%;
	justify-content: space-between;
}
#selection-arrea .image-area svg{
	max-height: calc(100vh - 200px);
}
#selection-arrea .notes ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	width: 100%;
	font-size: 18px;
    justify-content: space-between;
}
#selection-arrea .notes ul li{
	padding: 0 30px;
	max-width: 25%;
	box-sizing: border-box;
}
#selection-arrea .notes ul li.activated{
	filter: grayscale(100%);
	color: #999;
}
#selection-arrea .notes ul li.activated a{
	color: #999;
}
#selection-arrea .notes ul li.activated img{
	opacity: 0.5;
}
#selection-arrea .notes ul li img{
	vertical-align: middle;
	margin: 0 10px 0 0;
}
#selection-arrea .notes ul li a{
	display: flex;
	align-items: center;
}
#selection-arrea .notes ul li span{
	display: inline-block;
	line-height: 1.2;
}
svg #base,
svg #markele,
svg #elevators,
svg #parking_core,
svg #storage_core,
svg #trafficflow{
	pointer-events: none;
}
svg g[id^="parking"],
svg g[id^="storage"]{
	cursor: pointer;
}
svg .ico{
	transform: translate(-1px, -5px);
}
svg .ico path{
	stroke: #fff;
	stroke-width: 1px;
	clip-path: none;
}
svg .ico path:nth-child(2){
	transform: translate(4px, 0px);
}
svg .ico path:nth-child(4){
	transform: translate(0px, 10px);
}
svg g[id^="parking"] text,
svg g[id^="storage"] text{
	text-transform: uppercase;
}
svg g .hidden,
svg g path[id^="path-for-text"]{
	display: none !important;
}
svg g[id^="parking"].inactive:not(.selected),
svg g[id^="storage"].inactive:not(.selected){
	pointer-events: none;
}
svg g.inactive polygon,
svg g.inactive rect,
svg g.inactive polyline,
svg g.inactive > path{
	fill: #a1aab1 !important;
}
svg g.inactive:not(.selected) g,
svg g.inactive:not(.selected) text{
	display: none !important;
}
svg g[data-restrictions="penthouse"] polygon,
svg g[data-restrictions="penthouse"] polyline,
svg g[data-restrictions="penthouse"] rect,
svg g[data-restrictions="penthouse"] > path{
	fill: #eca228;
	stroke: #231f20;
}
svg g[data-restrictions="penthouse"].restricted:not(.inactive) g{
	display: none;
}
svg g[data-restrictions="penthouse"].restricted.selected g{
	display: block;
}
svg g[data-restrictions="penthouse"].selected text,
svg g[data-restrictions="accessible"]:not(.restricted) .ico,
svg g[data-restrictions="penthouse"]:not(.restricted) text{
	display: none;
}
svg g[data-restrictions="accessible"]:not(.inactive) polygon,
svg g[data-restrictions="accessible"]:not(.inactive) polyline,
svg g[data-restrictions="accessible"]:not(.inactive) rect,
svg g[data-restrictions="accessible"]:not(.inactive) > path{
	fill: #183be8;
}
svg g[data-restrictions="accessible"].restricted g{
	display: none;
}
svg g[data-restrictions="accessible"] g,
svg g[data-restrictions="accessible"] g path{
	fill: #fff;
}
svg g[data-restrictions="accessible"].restricted g.ico{
	display: block;
}
svg g.selected polygon,
svg g.selected polyline,
svg g.selected rect,
svg g.selected > path{
	fill: #a61714 !important;
}
svg g.selected.pre-edit polygon,
svg g.selected.pre-edit polyline,
svg g.selected.pre-edit rect,
svg g.selected.pre-edit > path{
	fill: #d46865 !important;
}
svg g.selected g path{
	fill: #fff;
}
svg g.selected text.selected{
	display: none;
}
svg g[data-restrictions="restricted"] polygon,
svg g[data-restrictions="restricted"] polyline,
svg g[data-restrictions="restricted"] rect,
svg g[data-restrictions="restricted"] > path{
	fill: #1f344d;
}
svg g[data-restrictions="restricted"] text{
	transform: translate(0px, 3px);
}
svg g[data-restrictions="restricted"]:not(.inactive) text{
	display: block !important;
	fill: #fff;
}
svg g.occupied polygon,
svg g.occupied polyline,
svg g.occupied rect,
svg g.occupied > path{
	fill: #95aebc;
}
svg g.occupied g,
svg g[data-restrictions="restricted"] g {
	display: none;
}
svg g.occupied g[class^="cls-"]{
	display: block;
}
svg g.activeItem polygon,
svg g.activeItem polyline,
svg g.activeItem path,
svg g.activeItem rect{
	stroke-width: 2px;
	opacity: 1;
}
@keyframes fadeElement {
	0%{
		opacity: 0.1;
	}
	1%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeInOut {
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
g[id*="elavate"] path:nth-child(1),
g[data-name="elavate"] path:nth-child(1){
	animation: fadeInOut 4s ease-in-out infinite;
	animation-delay: 1s;
	opacity: 1;
}
g[id*="elavate"] path:nth-child(2),
g[data-name="elavate"] path:nth-child(2) {
	animation: fadeInOut 4s ease-in-out infinite;
	animation-delay: 1.5s;
	opacity: 1;
}
g[id*="elavate"] path:nth-child(3),
g[data-name="elavate"] path:nth-child(3) {
	animation: fadeInOut 4s ease-in-out infinite;
	animation-delay: 2s;
	opacity: 1;
}
g[id*="elavate"] path:nth-child(4),
g[data-name="elavate"] path:nth-child(4) {
	animation: fadeInOut 4s ease-in-out infinite;
	animation-delay: 0.5s;
	opacity: 1;
}
/*.animate-traffic g[id^="trafficflow"],
.animate-walkingflow #parking_core,
.animate-walkingflow #storage_core{
	animation: fadeElement 2.5s ease-in-out;
	display: block;
}*/


/*.animate-traffic #parking_core,
.animate-traffic #storage_core{
	opacity: 0;
}*/
/*.animate-walkingflow #trafficflow,
.animate-walkingflow #parking_core,
.animate-walkingflow #storage_core{
	opacity: 1;
	transition: opacity 1s ease-in-out;
} */

#storage_core .cls-121{
	display: block;
}
[data-floor="floor-1"] .selecting-parking #storage_core,
[data-floor="floor-2"] .selecting-parking #storage_core{
	display: none;
}
[data-floor="floor-1"] .selecting-storage #parking_core,
[data-floor="floor-2"] .selecting-storage #parking_core{
	display: none;
}
.seed-1 #parking_core2,
.seed-1 #parking_core3,
.seed-1 #parking_core4,
.seed-1 #parking_core #Seed_2,
.seed-1 #parking_core #Seed_3,
.seed-1 #parking_core #Seed_4,
.seed-1 #storage_core2,
.seed-1 #storage_core3,
.seed-1 #storage_core4,
.seed-1 #elevator_seed2,
.seed-1 #elevator_seed3,
.seed-1 #elevator_seed4{
	display: none;
}
.seed-2 #parking_core1,
.seed-2 #parking_core3,
.seed-2 #parking_core4,
.seed-2 #parking_core #Seed_1,
.seed-2 #parking_core #Seed_3,
.seed-2 #parking_core #Seed_4,
.seed-2 #storage_core1,
.seed-2 #storage_core3,
.seed-2 #storage_core4,
.seed-2 #elevator_seed1,
.seed-2 #elevator_seed3,
.seed-2 #elevator_seed4{
	display: none;
}
.seed-3 #parking_core2,
.seed-3 #parking_core1,
.seed-3 #parking_core4,
.seed-3 #parking_core #Seed_1,
.seed-3 #parking_core #Seed_2,
.seed-3 #parking_core #Seed_4,
.seed-3 #storage_core1,
.seed-3 #storage_core2,
.seed-3 #storage_core4,
.seed-3 #elevator_seed2,
.seed-3 #elevator_seed1,
.seed-3 #elevator_seed4{
	display: none;
}
.seed-4 #parking_core2,
.seed-4 #parking_core3,
.seed-4 #parking_core1,
.seed-4 #parking_core #Seed_1,
.seed-4 #parking_core #Seed_2,
.seed-4 #parking_core #Seed_3,
.seed-4 #storage_core1,
.seed-4 #storage_core2,
.seed-4 #storage_core3,
.seed-4 #elevator_seed2,
.seed-4 #elevator_seed3,
.seed-4 #elevator_seed1{
	display: none;
}

.floor4-note-popup{
	background: rgb(166,121,82);
	background: linear-gradient(135deg, rgba(166,121,82,1) 0%, rgba(211,182,129,1) 100%);
	width: 250px;
	box-sizing: border-box;
	padding: 20px 20px 10px;
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	position: absolute;
	top: 55%;
	left: 60%;
	transform: translate(-100%, 0);
	text-align: center;
	display: none;
}
.floor4-note-popup p{
	margin: 0 0 10px;
	font-size: 18px;
}
.floor4-note-popup .close{
	position: absolute;
	right: 0;
	top: 0;
	width: 26px;
	height: 26px;
	background: #24344b;
	border: 1px solid #fff;
	border-radius: 50%;
	margin: -14px -14px 0 0;
	text-indent: -9999px;
}
.floor4-note-popup .close:before,
.floor4-note-popup .close:after{
	content: "";
	width: 1px;
	height: 14px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -7px 0 0;
	transform: rotate(45deg);
	background: #fff;
}
.floor4-note-popup .close:after{
	transform: rotate(-45deg);
}
[data-floor="floor-3"].selecting-parking svg{
	pointer-events: none;
	opacity: 0.7;
}
[data-floor="floor-3"].selecting-parking .level-disabled{
	display: block !important;
}
[data-floor="floor-3"].selecting-storage .level-limited.active{
	display: block !important;
}
.level-limited-overlay.active{
	position: fixed;
	top: 90px;
	left: 340px;
	width: 100%;
	height: 100%;
	display: none;
}
[data-floor="floor-3"].selecting-storage .level-limited-overlay.active{
	display: block !important;
}
.item-popup.level-limited,
.item-popup.level-disabled{
	top: var(--popup-x);
	left:  var(--popup-y);
	right: auto;
	width: 325px;
	height: 325px;
	align-items: center;
	justify-content: center;
	background: none;
	transform: translate(-50%, -50%);
	font-size: 22px;
	z-index: 90;
}
.item-popup.level-limited{
	transform: translate(-115%, -50%);
}
.item-popup.level-limited .popup-info,
.item-popup.level-disabled .popup-info{
	padding: 20px;
	color: #fff;
	background: #653e6a;
}
.item-popup.level-limited .popup-info{
	background: #6b3b3b;
}
.item-popup{
	position: absolute;
	top: 37%;
	left: 420px;
	width: 220px;
	height: 220px;
	background: #c5c5bd;
	color: #1f344d;
	display: none;
}
.item-popup.accessible{
	background: #173be8;
	top: 37%;
	left: 1320px;
	color: #fff;
}
.item-popup.restricted,
.item-popup.penthouse{
	background: #eca228;
	top: 50%;
	left: 820px;
}
.item-popup.restricted{
	width: 250px;
	background: #24344b;
	color: #fff;
}
.item-popup.occupied{
	background: #95aebc;
	top: 30%;
	left: 780px;
}
.item-popup.selected{
	background: #a61714;
	color: #fff;
}
.item-popup .close{
	position: absolute;
	right: 0;
	top: 0;
	width: 26px;
	height: 26px;
	background: #24344b;
	border: 1px solid #fff;
	border-radius: 50%;
	margin: -14px -14px 0 0;
	text-indent: -9999px;
}
.item-popup .close:before,
.item-popup .close:after{
	content: "";
	width: 1px;
	height: 14px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -7px 0 0;
	transform: rotate(45deg);
	background: #fff;
}
.item-popup .close:after{
	transform: rotate(-45deg);
}
.item-popup .close-btn{
	display: block;
	background: #fff;
	color: #000;
	font-size: 12px;
	line-height: 1.2;
	padding: 5px 10px;
	width: 100%;
	max-width: 220px;
	margin: 25px auto 0;
	text-transform: uppercase;
	box-sizing: border-box;
}
.item-popup .popup-info{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px 20px;
	box-sizing: border-box;
}
.item-popup .popup-info p{
	margin: 0;
}
.item-popup .popup-info p + p{
	margin: 20px 0 0;
}
.item-popup .popup-info .ico-holder img{
	min-width: 60px;
	max-width: 100%;
	height: auto;
	margin: 0 0 20px;
}
.item-popup .popup-info h4{
	margin: 0;
	font-weight: normal;
	font-size: 20px;
	text-transform: uppercase;
}
.item-popup .popup-info .parking-number{
	display: block;
	font-size: 68px;
	margin: 0;
	/*font-family: 'GFS Didot', sans-serif;*/
	letter-spacing: -3px;
	line-height: 1;
}
.item-popup.select-parking .popup-info .level-number{
	font-style: italic;
	display: block;
	margin: 10px 0;
}
.item-popup .popup-info .parking-number{
	display: block;
}
.item-popup .popup-info .level-number{
	display: block;
}
.item-popup .popup-info .btn-choose{
	display: block;
	color: #fff;
	background: #24344b;
	width: 100%;
	line-height: 30px;
}
.item-popup.where-popup,
.item-popup.show-index-popup{
	top: 0;
	left: auto;
	right: 0;
	width: calc(100% - 330px);
	height: 100%;
	align-items: center;
	justify-content: center;
	background: none;
}
.item-popup.where-popup{
	width: 100%;
}
.item-popup.where-popup:after,
.item-popup.show-index-popup:after{
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	background: rgba(255,255,255,0.8);
	width: calc(100% - 330px);
	height: 100%;
}
.item-popup.where-popup:after{
	width: 100%;
	background: rgba(0,0,0,0.7);
}
.item-popup.where-popup .close,
.item-popup.show-index-popup .close{
	z-index: 20;
	top: 30px;
	right: 30px;
	margin: 0;
	width: 48px;
	height: 48px;
	background: #fff;
	border: 1px solid #24344b;
}
.item-popup.where-popup .close:before,
.item-popup.show-index-popup .close:before,
.item-popup.where-popup .close:after,
.item-popup.show-index-popup .close:after {
	height: 30px;
	margin: -15px 0 0;
	background: #24344b;
}
.where-popup .index-info,
.show-index-popup .index-info{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	width: 90%;
	max-height: 95vh;
	overflow: auto;
	background: #fff;
	border-radius: 30px;
	border: 1px solid #1f344d;
	color: #1f344d;
	box-sizing: border-box;
	padding: 55px 60px;
}
.where-popup .index-info{
	max-width: 1400px;
}
.where-popup .index-info h4,
.show-index-popup .index-info h4 {
	font-size: 35px;
	font-weight: 500;
	margin: 0 0 50px;
}
.where-popup .index-info h4{
	margin: 0;
}
.where-popup img{
	max-width: 1100px;
	margin: -10px auto 10px;
	display: block;
}
.where-popup .direction{
	color: #95aebc;
}
.where-popup .direction:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	border: solid transparent;
	border-right-color: #95aebc;
	border-width: 6px 10px;
	margin: 0 3px 2px 0;
}
.show-index-popup .index-info .lists-holder{
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.show-index-popup .index-info .column{
	width: calc(50% - 20px);
}
.show-index-popup .index-info .column:nth-child(2){
	padding: 15px 0 0;
}
.show-index-popup .index-info ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.show-index-popup .index-info .column:nth-child(2) ul li:nth-child(4){
	margin: 0 0 52px;
}
.show-index-popup .index-info ul li{
	margin: 0 0 12px;
	display: flex;
	align-items: center;
}
.show-index-popup .index-info .column:first-child ul li{
	margin: 0 0 43px;
}
.show-index-popup .index-info ul li .image-holder{
	margin: 0 20px 0 0;
}
.show-index-popup .index-info ul li .image-holder.wide{
	width: 169px;
}
.final-section{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	padding: 20px;
	max-width: 1780px;
	margin: 0 auto;
	box-sizing: border-box;
	display: none;
}
.final-section .company-logo{
	display: block;
	max-width: 165px;
	margin: 0 auto 100px;
}
.final-section h1{
	text-transform: uppercase;
	font-weight: normal;
	font-size: 36px;
	margin: 0 0 20px;
	max-width: 650px;
}
.final-section h2{
	text-align: center;
	font-weight: normal;
	font-style: italic;
	font-size: 20px;
	margin: 0 0 40px;
}
.locations-selected-info-holder{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 150px;
	justify-content: center;
}
.apartmentContainer{
	margin: 0 0 50px;
	width: calc(33.33% - 75px);
	max-width: 300px;
	text-align: left;
}
.apartmentContainer h3{
	font-weight: 500;
	font-size: 21px;
	margin: 0 0 20px;
	padding: 0 0 15px;
	border-bottom: 1px solid #000;
}
.final-block .apartmentContainer h3{
	font-size: 21px;
	text-align: center;
}
.locations-selected-info{
	margin: 0 0 20px;
}
.apartmentItemsContainer{
}
.download-holder{display: none;}
.final-block .download-holder{
	display: block;
	text-align: center;
}
.apartmentContainer .btn.download{
	display: block;
	margin: 15px auto 0;
	width: 50px;
	height: 45px;
	background: url("images/ico-download.png") no-repeat 0 0 / contain;
	min-width: inherit;
	padding: 0;
	text-indent: -9999px;
}
.locations-selected-info h3{
	font-weight: normal;
	font-size: 20px;
	margin: 0 0 10px;
}
.locations-selected-info .info-row{
}
.locations-selected-info .image-holder {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
}
.locations-selected-info .image-holder .img{
	border: 1px solid #24344b;
	box-sizing: border-box;
	padding: 15px;
}
.locations-selected-info .data{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}
.final-block .locations-selected-info .data{
	display: none;
}
.locations-selected-info .data h4{
	font-weight: normal;
	margin: 0;
	font-size: 16px;
}
.locations-selected-info .data span{
	display: block;
	font-size: 18px;
	margin: 3px 0 10px;
	white-space: nowrap;
}
.locations-selected-info .data span span{
	display: inline;
}
.locations-selected-info .data span.word:nth-child(2){
	display: none;
}
.locations-selected-info .data .download{
	font-size: 14px;
	display: inline-block;
	min-width: 100px;
	line-height: 30px;
	font-style: italic;
}
.locations-selected-info svg g[id^="parking"]:not(.selected),
.locations-selected-info svg g[id^="storage"]:not(.selected) {
	visibility: hidden;
}
.locations-selected-info svg g[id^="parking"].selected,
.locations-selected-info svg g[id^="storage"].selected {
	visibility: visible;
}
.final-section .buttons-holder{
	text-align: center;
	padding: 40px 0 0;
	width: 100%;
}
.final-section .buttons-holder .edit,
.final-section .buttons-holder .approve{
	display: block;
	font-size: 24px;
	line-height: 50px;
	width: 100%;
	max-width: 500px;
	margin: 0 auto 30px;
	text-transform: uppercase;
	border: 1px solid #24344b;
	color: #24344b;
	border-radius: 27px;
}
.final-section .buttons-holder .approve{
	color: #fff;
	background: #24344b;
}
.final-section .buttons-holder .edit:hover{
	background: #dfe4e9;
}
.final-section .buttons-holder .approve:hover{
	background: #344764;
}
.final-block{
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	padding: 20px;
	max-width: 1780px;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: center;
}
.final-block .final-content{
	width: 100%;
}
.final-block .company-logo{
	display: block;
	max-width: 165px;
	margin: 0 auto 100px;
}
.final-block h3{
	margin: 0 auto 20px;
	font-size: 36px;
	max-width: 840px;
	font-weight: 500;
}
.final-block p{
	margin: 0 auto 40px;
	max-width: 840px;
	font-size: 21px;
}

.momalogo{
	/*position: absolute;
    bottom: 65px;
    left: 0;*/
    width: 100%;
    text-align: center;
	margin-top: auto;
	padding-top: 25px;
}
.momalogo img{max-width: 120px;}

#sidebar{
	display: none;
	flex-wrap: nowrap;
	flex-direction: column;
	overflow: auto;
	height: 100vh;
}
.loading .final-section:before{
	content: "The system is processing the data. This may take a few minutes. Please do not close the browser until confirmation is received.";
	position: fixed;
	top: 50%;
	left: 50%;
	background: #f0f5f9;
	transform: translate(-50%, -50%);
	padding: 40px;
	width: 306px;
	text-align: center;
	border: 3px solid #1f344d;
	z-index: 20;
}
.loading .final-section:after{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	background: #1f344d;
	width: 100%;
	height: 100%;
	opacity: 0.4;
}

@media only screen and (orientation: portrait){
	  #main{display: none!important;}
      #mobilerotate{
		  display: flex !important;
		  min-height:100vh;
		  background-color:#f0f5f9;
		  flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		}
	  #mobilerotate h3{
		font-size: 4vw;
		text-align: center;
		font-family: 'GFS Didot', Georgia, "Times New Roman", serif;
	  }
}

svg .sonar4{
	stroke-width: 5px!important;
    stroke: #be320a !important;
}
svg .sonar1,svg .sonar2,svg .sonar3,svg .sonar4{
	animation-duration: 2s!important;
	fill: #be320a !important;
}
.notes a,.notes a:visited,.notes a:focus{color:#24344b;}
.selecting-data li.active .selecting-item{font-weight:bold;}




@media screen and (min-width: 767px) and (max-width: 1400px) {
	.alignleft,
	.alignright{
		max-width: 100%;
		width: 100%;
		float: none;
		margin: 0 0 20px;
	}
	#sidebar {
		min-width: auto!important;
		padding: 2%!important;
	}
	#content .image-area{text-align: center;}
	.number {
		margin: 0 0 10%!important;
	}
	.selecting-data-holder h1{
		font-size: 90%!important;
	}
	.selecting-data {
		padding: 0 0 0 5%;
	}
	.selecting-data li > *{
		font-size: 70%!important;
	}
	.apartment-holder h3{
		font-size: 80%!important;
	}
	.where-am-i,
	.back-to-tutorial{
		margin: 5% 0 0!important;
		font-size: 80%!important;
	}
	.momalogo img{max-width: 40%!important;}
	.notes a{font-size:75%!important;}
	.item-popup.level-limited, .item-popup.level-disabled {
		width: 250px;
		height: 250px;
		font-size: 16px;
	}
}
@media screen and (max-width: 1680px) {
	.content-text {
		padding: 50px 0 0;
	}
}
@media screen and (max-width: 1400px){
	#content {
		padding: 30px 3%;
	}
	.content-text {
		min-height: calc(100vh - 130px);
		padding: 0;
	}
	.item-popup.show-index-popup {
		width: calc(100% - 290px);
	}
	.item-popup.where-popup:after,
	.item-popup.show-index-popup:after {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.where-popup .index-info,
	.show-index-popup .index-info {
		padding: 25px 30px;
	}
	.item-popup.where-popup .close,
	.item-popup.show-index-popup .close{
		top: 10px;
		right: 10px;
		width: 28px;
		height: 28px;
	}
	.item-popup.where-popup .close:before,
	.item-popup.show-index-popup .close:before,
	.item-popup.where-popup .close:after,
	.item-popup.show-index-popup .close:after {
		height: 18px;
		margin: -8px 0 0;
	}
	.where-popup .index-info h4,
	.show-index-popup .index-info h4 {
		font-size: 24px;
		margin: 0 0 30px;
	}
	.show-index-popup .index-info .lists-holder{
		gap: 20px;
	}
	.show-index-popup .index-info .column{
		width: calc(50% - 10px);
	}
	.show-index-popup .index-info .column:nth-child(2){
		padding: 7px 0 0;
	}
	.show-index-popup .index-info .column:nth-child(2) ul li:nth-child(4){
		margin: 0 0 25px;
	}
	.show-index-popup .index-info ul li{
		margin: 0 0 6px;
	}
	.show-index-popup .index-info .column:first-child ul li{
		margin: 0 0 20px;
	}
	.show-index-popup .index-info ul li .image-holder{
		margin: 0 15px 0 0;
	}
	.show-index-popup .index-info ul li .image-holder img{
		max-height: 44px;
		object-fit: contain;
	}
	.show-index-popup .index-info ul li .image-holder.wide{
		width: 110px;
	}
}
/** nir 1400 screen patch **/
@media screen and (min-width: 767px) and (max-width: 1400px) {
	.alignright{
		max-width: 60% !important;
		float: right !important;
		margin: 0 0 0.5vw 2vw !important;
	}
	.alignleft{
		max-width: 60% !important;
		float: left !important;
		margin: 0 2vw 0.5vw 0 !important;
	}
	.content-text,.welcome-screen{font-size: 1vw !important;}
	#content .content-text h3{font-size: 1.1vw !important;}
	#content .content-text h2 {
		font-size: 1.15vw!important;
		margin: 0 0 2vw!important;
	}
	.welcome-screen h1{
		margin: 0 0 2vw;
		font-size: 1.8vw;
	}
	.welcome-screen p {
		margin: 0 0 2vw;
	}
	.welcome-screen .parking-logo {
		width: 8.69vw;
		margin: 5.2vw auto 0;
	}
	.initial-screen *{
		font-size:2vw!important;
		max-width: 40vw;
	}
	#sidebar{
		width: 23.5vw !important;
	}
	.name {font-size: 1.5vw;}
	body {
		font-size:0.93vw;
	}
	.apartment-holder h3{
		margin: 0 0 0.78125vw;
		padding: 0.2vw 0 0 1.5vw;
	}
	.apartment-holder h3:before {
		width: 1vw;
		height: 1vw;
		font-size: 0.9vw;
		line-height: 1vw;
	}
	.apartment-holder h3:after {
		width: 0.5vw;
		left: 0.4vw;
		top: 50%;
	}
	.selecting-data li {
		padding:0.35vw 0 0.78vw 2.3vw;
	}
	.momalogo img {
        width: 5.5vw;
    }
	.level-nav {
		font-size: 0.9vw;
		line-height:2em;
	}
	
	
	.level-nav .prev-level:before {left: -0.3vw!important;}
	.level-nav .prev-level:before, .level-nav .next-level:before{
		left: 0.5vw;
		top: 50%;
		border-width: 0.4vw 0.7vw;
		transform: translateY(-50%);
	}
	.level-nav .prev-level, .level-nav .next-level {
		width: 1.5vw;
		height: 1.5vw;
		align-items: center;
		align-content: center;
	}
	.content-slides-nav {
		font-size: 0.9vw;
		line-height: 1em;
	}
	.content-slides-nav .nav-wrapper {
		padding: 0.3vw;
	}
	.content-slides-nav .nav-wrapper .btn.back, .content-slides-nav .nav-wrapper .btn.next {
		width: 1.5vw;
		height: 1.5vw;
		margin: 0 0.7vw 0 0;
	}
	.content-slides-nav .nav-wrapper .btn.back::before, .content-slides-nav .nav-wrapper .btn.next:before {
		left: -0.5vw;
		top: 0.4vw;
		border-width: 0.5vw 0.8vw;
	}
	.content-slides-nav .nav-wrapper ul,.level-nav ul{
		gap: 1vw;
	}
	.content-slides-nav .nav-wrapper .btn.next {
		margin: 0 0 0 0.7vw;
	}
	.content-slides-nav .nav-wrapper .btn.next::before {
		left: 0.5vw;
	}
	.where-am-i, .back-to-tutorial{
		font-size:0.93vw!important;
		padding: 0 1vw;
		min-width: 7vw;
		line-height: 2.5vw;
	}
	.content-text .btn {
		font-size: 1vw !important;
		min-width: 21.3vw;
		height: 2.5vw;
		line-height: 2.5vw;
	}
	.item-popup{
		width: 16vw;
		height: 16vw;
	}
	.item-popup .popup-info{
		padding: 1vw 2vw;
	}
	.item-popup .popup-info .parking-number {
		font-size: 3.54vw;
		padding: 0.3vw;
		letter-spacing: 0;
	}
	.item-popup .popup-info .btn-choose{
		line-height: 2vw;
	}
	.item-popup .popup-info h4 {
		font-size: 1.2vw;
	}
	.item-popup.select-parking .popup-info .level-number{
	    margin: 0 0 1vw 0;
	}
	.item-popup.level-limited, .item-popup.level-disabled {
        width: 20vw;
        height: 20vw;
        font-size: 1.2vw;
    }
	.item-popup .close-btn {
		font-size: 0.8vw;
		line-height: 1.2;
		padding: 0.5vw 1vw;
		margin: 1vw auto 0;
	}
	.btn {
		line-height: 2.3vw;
		font-size: 0.9vw;
	}
	.final-section .company-logo,.final-block .company-logo{
		max-width: 8.5vw;
		margin: 0 auto 5vw;
	}
	.final-section h1{
		margin: 0 0 2vw;
		font-size: 2vw;
	}
	.final-section h2 {
		font-size: 1vw;
		margin: 0 0 2vw;
	}
	.apartmentContainer h3{
		font-size: 1vw;
		margin: 0 0 1vw;
		padding: 0 0 0.7vw;
	}
	.locations-selected-info .data h4 {
		font-weight: normal;
		margin: 0;
		font-size: 0.8vw;
	}
	.locations-selected-info .data span {
		font-size: 0.9vw;
		margin: 0.3vw 0 0.5vw;
	}
	.locations-selected-info {
		margin: 0 0 1vw;
	}
	.apartmentContainer {
		margin: 1vw 0 2vw;
		width: calc(33.33% - 4vw);
		max-width: 25vw;
	}
	.final-section .buttons-holder .edit, .final-section .buttons-holder .approve {
		font-size: 1vw;
		line-height: 2.5vw;
		max-width: 22vw;
		margin: 0 auto 1.3vw;
	}
	.final-block h3 {
		margin: 0 auto 1vw;
		font-size: 2vw;
		max-width: 65vw;
	}
	.final-block p {
		margin: 0 auto 2vw;
		max-width: 64vw;
		font-size: 1.2vw;
	}
	.final-block .apartmentContainer h3 {
		font-size: 1vw;
	}
	.apartmentContainer .btn.download {
		display: block;
		margin: 1vw auto 0;
		width: 2.5vw;
		height: 2vw;
	}
}