#floor-selector {
	position: relative;
	--left-numbers: 111px;
	--left-numbers-over: 56px;
}

#floor-selector, #floor-selector-svg, #floor-selector-bcg {
	display: block;
	width: 100%;
	aspect-ratio: 1770 / 791;
}

#floor-selector-svg {
	height: 100%;
	position: relative;
	z-index: 1;
}

#floor-selector-bcg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	z-index: 0;
}

#floor-selector .floor-area {
	cursor: pointer;
	fill: var(--color-light-brown);
	opacity: 0;
	transition: opacity 0.3s ease;
}

#floor-selector .floor-area.active {
	opacity: 0.7;
}

#floor-selector .floor-area:hover {
	opacity: 0.7;
}

#floor-selector .floor-area.inactive {
	fill: #e1e1e1;
}

#floor-selector-numbers .line {
	fill: var(--color-medium-brown);
	opacity: 0;
	transition-duration: 0.1s;
	transition-property: opacity;
	transition-timing-function: ease;
	transition-delay: 0.0s;
}

#floor-selector-numbers .active .line {
	opacity: 1;
	transition-delay: 0.08s;
	transition-duration: 0.3s;
}

#floor-selector-numbers text {
	fill: var(--color-dark-brown-2);
	font-family: var(--font-family-inter);
	font-size: 30px;
	transition: fill 0.3s ease;
}

#floor-selector-numbers .floor-selector-number text {
	transition: transform 0.3s ease;
}

#floor-selector-numbers .floor-selector-number.active text {
	fill: var(--color-light-brown);
}

.floor-selector-number#floor-1 text {
	transform: translate(calc(var(--left-numbers) + 6px), 572.7012px);
}

.floor-selector-number#floor-1.active text {
	transform: translate(var(--left-numbers-over), 572.7012px);
}

.floor-selector-number#floor-2 text {
	transform: translate(var(--left-numbers), 510.7236px);
}

.floor-selector-number#floor-2.active text {
	transform: translate(var(--left-numbers-over), 510.7236px);
}

.floor-selector-number#floor-3 text {
	transform: translate(var(--left-numbers), 449.6494px);
}

.floor-selector-number#floor-3.active text {
	transform: translate(var(--left-numbers-over), 449.6494px);
}

.floor-selector-number#floor-4 text {
	transform: translate(var(--left-numbers), 388.3545px);
}

.floor-selector-number#floor-4.active text {
	transform: translate(var(--left-numbers-over), 388.3545px);
}

.floor-selector-number#floor-5 text {
	transform: translate(var(--left-numbers), 326.4258px);
}

.floor-selector-number#floor-5.active text {
	transform: translate(var(--left-numbers-over), 326.4258px);
}

.floor-selector-number#floor-6 text {
	transform: translate(var(--left-numbers), 264.7783px);
}

.floor-selector-number#floor-6.active text {
	transform: translate(var(--left-numbers-over), 264.7783px);
}

.floor-selector-number#floor-7 text {
	transform: translate(var(--left-numbers), 172.8887px);
}

.floor-selector-number#floor-7.active text {
	transform: translate(var(--left-numbers-over), 172.8887px);
}

.floor-selector-number#floor-8 text {
	transform: translate(var(--left-numbers), 111.1396px);
}

.floor-selector-number#floor-8.active text {
	transform: translate(var(--left-numbers-over), 111.1396px);
}

@media screen and (max-width: 640px) {
	#floor-selector-numbers {
		display: none;
	}
}