.map {
	svg {
		.background {
			fill: rgba(0,0,0,0);
		}

		image {
			image-rendering : optimizeSpeed;
		}

		.roomNames {
			text {
				fill: rgba(255, 255, 255, 0.75);
				font-family: "Architect's Daughter";
			}

			text.small, .small text {
				font-size: 0.7em;
			}

			.roomArea {
				fill: rgba(255, 255, 255, 0);
			}

			.room[endpoint\:id] .roomArea {
				cursor: pointer;

				&:hover {
					fill: rgba(255, 255, 255, 0.05);
				}
			}

			.statusBadge {
				fill: none;

				&.loaded {
					fill: @available_green;
					&.in-a-call, &.reserved {
						fill: @unavailable_red;
					}
					&.offline {
						fill: @offline_orange;
					}
				}
			}
		}

		.walls {
			opacity: 0.75;

			line, polyline, rect, polygon, path {
				fill            : none;
				stroke          : white;
				stroke-width    : 2;
				stroke-linejoin : miter;
			}

			.innerWalls {
				opacity: 0.667;

				line, polyline, rect, polygon, path {
					stroke-width : 1;
				}
			}
		}

		.symbols {
			rect, path, polygon, ellipse, circle {
				fill: white;
			}
			.clockHand {
				stroke         : white;
				stroke-linecap : round;
				stroke-width   : 1;
				visibility     : hidden;
			}
		}

		.photos {
			cursor: pointer;

			image {

				&.filtered_tag, &.filtered_name {
					opacity: 0.1;
				}
			}
		}

		.seats {
			visibility: hidden;
			cursor: pointer;

			rect {
				fill: @hot_blue;
				opacity: 0.75;
			}
		}

		&.mv, &.mv2 {
			.roomNames {
				font-size: 10px;
			}
		}

		&.mv3 {
			.roomNames {
				font-size: 6.5px;
			}
		}

		&.oc {
			.roomNames {
				font-size: 6px;
			}
		}

		&.sf {
			.roomNames {
				font-size: 14px;
			}
		}

		&.blr {
			.roomNames {
				font-size: 12px;
			}
		}
	}

	.arrow {
		fill: white;
		cursor: pointer;
		opacity: 0.9;

		&:hover {
			opacity: 1;
		}
	}
}

.floorplan .map {
	position: fixed;

	@gutter: 6 * @grid_size;
	top: @gutter;
	left: @gutter + @pane_width;
	right: @gutter + @pane_width;
	bottom: @gutter;

	svg {
		width: 100%;
		height: 100%;
	}
}

.admin .map {
	.roomNames {
		visibility: hidden;
	}

	.walls {
		line, polyline, rect, polygon, path {
			stroke : rgba(0, 0, 0, 0.75);
		}

		.innerWalls {
			line, polyline, rect, polygon, path {
				stroke : rgba(0, 0, 0, 0.5);
			}
		}
	}

	.symbols {
		rect, path, polygon, ellipse, circle {
			fill: rgba(0, 0, 0, 0.5);
		}
	}

	.photos {
		cursor: default;
	}

	&.small {
		.photos {
			visibility: hidden;
		}

		.seats {
			cursor: default;
			
			.active {
				visibility: visible;
			}
		}
	}

	&.large {
		svg {
			.background {
				fill: white;
			}
		}

		.photos image {
			/*opacity: 0.33;*/ //interferes with photos hiding seat rectangles

			&.active {
				opacity: 1;
			}
		}

		.walls {
			line, polyline, rect {
				stroke : rgba(0, 0, 0, 0.5);
			}

			.innerWalls {
				line, polyline, rect {
					stroke : rgba(0, 0, 0, 0.25);
				}
			}
		}

		.seats {
			visibility: visible;
		}
	}

	.arrow {
		display: none;
	}
}