/* Atkinson Hyperlegible Next font */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2'), url('./fonts/atkinson-hyperlegible-next-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2') format('woff2'), url('./fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff') format('woff');
}

/* @panoramax/web-viewer v5.1.0 - Combined CSS */

/* --- Basic.css --- */
/* Colors */
:root, :host {
	--white: #ffffff;
	--black: #181818;
	--black-pale: #1b1a17;
	--red: #f70000;
	--red-transparent: rgba(247, 0, 0, 0.3);
	--red-pale: #ff726f;
	--grey: #f5f5f5;
	--grey-pale: #cfd2cf;
	--grey-semi-dark: #808080;
	--grey-dark: #3e3e3e;
	--blue: #2954e9;
	--blue-dark: #0a1f69;
	--blue-semi: #d7dffc;
	--blue-pale: #f2f5ff;
	--blue-geovisio: #34495e;
	--beige: #f5f3ec;
	--yellow: #fec868;
	--orange: #ff6f00;
	--orange-transparent: rgba(255,111,0,0.3);
	--orange-pale: #fffafa;
	--green: #7ec636;
	--green-pale: #f0ffee;
	--widget-bg: var(--white);
	--widget-bg-hover: var(--grey);
	--widget-bg-active: var(--blue);
	--widget-bg-inactive: var(--grey-pale);
	--widget-bg-primary: var(--blue-semi);
	--widget-bg-primary-hover: #e0e7ff;
	--widget-bg-warn: #FFECB3;
	--widget-bg-success: #C8E6C9;
	--widget-border-div: var(--grey-pale);
	--widget-border-btn: var(--blue);
	--widget-font: var(--grey-dark);
	--widget-font-active: var(--white);
	--widget-font-direct: var(--blue);
	--widget-font-warn: #BF360C;
	--widget-font-success: #1B5E20;
	--font-family: "Atkinson Hyperlegible Next", sans-serif;
	--widget-option-left: #6A1B9A;
	--widget-option-right: #0D47A1;
	overscroll-behavior-y: contain;
}

.pnx-hidden { display: none !important; }

/* Hidden elements on mobile */
@container (max-width: 576px) {
	.pnx-mobile-hidden { display: none !important; }
}

/* Hidden elements on print */
@media print {
	.pnx-print-hidden { display: none !important; }
}

/* --- PhotoViewer.css --- */
pnx-photo-viewer {
	position: relative;
	display: block;
}

/* Maximized components */
pnx-photo-viewer .pnx-psv {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* No PSV loader */
pnx-photo-viewer .psv-loader {
	display: none;
}

/* Cornered grid layout */
pnx-photo-viewer pnx-cornered-grid::part(corner-top-left),
pnx-photo-viewer pnx-cornered-grid::part(corner-top),
pnx-photo-viewer pnx-cornered-grid::part(corner-top-right),
pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-left),
pnx-photo-viewer pnx-cornered-grid::part(corner-bottom),
pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-right) {
	gap: 10px;
	padding: 10px;
}

@media screen and (max-width: 576px) {
	pnx-photo-viewer pnx-cornered-grid::part(corner-top-right) {
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-start;
	}

	pnx-photo-viewer pnx-cornered-grid::part(corner-top-left) {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
}

/* Hidden widgets on sequence play */
pnx-photo-viewer.pnx-playing pnx-bottom-drawer,
pnx-photo-viewer.pnx-playing pnx-widget-legend,
pnx-photo-viewer.pnx-playing pnx-widget-zoom {
	display: none;
}

/* Override legend positioning */
@media screen and (min-width: 576px) {
	pnx-photo-viewer pnx-widget-legend:not([light="true"]) {
		position: absolute;
		top: 10px;
		width: 100%;
	}
}

/* Hidden widgets on grid toggled */
pnx-photo-viewer .psv-virtual-tour-arrows {
	transition: opacity 0.25s ease-in-out;
	opacity: 100%;
}
pnx-photo-viewer.pnx-grid-toggled .psv-virtual-tour-arrows {
	opacity: 0%;
}
pnx-photo-viewer.pnx-grid-toggled .psv-virtual-tour-arrows button {
	pointer-events: none;
	cursor: unset;
}
/* --- Viewer.css --- */
pnx-viewer {
	position: relative;
	display: block;
}

/* Maximized components */
pnx-viewer .pnx-map.maplibregl-map,
pnx-viewer .pnx-psv {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* No PSV loader */
pnx-viewer .psv-loader {
	display: none;
}

/* Search bar over other components */
pnx-widget-geosearch {
	z-index: 129;
}

/* Cornered grid layout */
pnx-viewer pnx-cornered-grid::part(corner-top-left),
pnx-viewer pnx-cornered-grid::part(corner-top),
pnx-viewer pnx-cornered-grid::part(corner-top-right),
pnx-viewer pnx-cornered-grid::part(corner-bottom-left),
pnx-viewer pnx-cornered-grid::part(corner-bottom),
pnx-viewer pnx-cornered-grid::part(corner-bottom-right) {
	gap: 10px;
	padding: 10px;
}

@media screen and (max-width: 576px) {
	pnx-viewer pnx-cornered-grid::part(corner-top-right) {
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-start;
	}

	pnx-viewer pnx-cornered-grid::part(corner-top-left) {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	/* Offset bottom buttons on smartphones */
	pnx-viewer:not(.pnx-iframed) pnx-cornered-grid::part(corner-bottom-right),
	pnx-viewer:not(.pnx-iframed) pnx-cornered-grid::part(corner-bottom-left) {
		margin-bottom: 30px;
	}
}

/* Mini component */
pnx-viewer pnx-mini {
	box-sizing: border-box;
	aspect-ratio: 1/1;
	min-width: 250px;
	min-height: 250px;
	position: relative;
	display: block;
	z-index: 120;
}

@media screen and ((max-width: 576px)) {
	pnx-viewer pnx-mini {
		min-width: unset;
		min-height: unset;
	}
}

pnx-viewer pnx-mini .psv-container,
pnx-viewer pnx-mini .pnx-map {
	border-radius: 10px;
}

/* Hidden elements depending on focus */
pnx-viewer:not(pnx-viewer[focus="map"]) .pnx-only-map,
pnx-viewer:not(pnx-viewer[focus="pic"]) .pnx-only-psv {
	display: none;
}

/* Override legend positioning */
@media screen and (min-width: 576px) {
	pnx-viewer pnx-widget-legend:not([light="true"]) {
		position: absolute;
		left: 10px;
		top: 60px;
	}

	pnx-viewer[focus="pic"] pnx-widget-legend:not([light="true"]) {
		top: 10px;
		width: 100%;
	}
}

/* Hide default map legend */
pnx-viewer .pnx-map .maplibregl-ctrl-attrib {
	display: none;
}

/* Override geosearch sizing */
@media screen and (max-width: 576px) {
	pnx-widget-geosearch pnx-search-bar:not([reduced])::part(container) {
		width: 250px;
		max-width: 40vw;
	}
}

/* Hidden widgets on sequence play */
pnx-viewer.pnx-playing pnx-bottom-drawer,
pnx-viewer.pnx-playing pnx-mini,
pnx-viewer.pnx-playing pnx-widget-legend,
pnx-viewer.pnx-playing pnx-widget-zoom {
	display: none;
}

/* Hidden widgets on grid toggled */
pnx-viewer .psv-virtual-tour-arrows {
	transition: opacity 0.25s ease-in-out;
	opacity: 100%;
}
pnx-viewer.pnx-grid-toggled .psv-virtual-tour-arrows {
	opacity: 0%;
}
pnx-viewer.pnx-grid-toggled .psv-virtual-tour-arrows button {
	pointer-events: none;
	cursor: unset;
}
/* --- CoverageMap.css --- */
pnx-coverage-map {
	display: block;
	position: relative;
}

pnx-coverage-map .maplibregl-map {
	position: absolute;
	inset: 0;
	background-color: white;
}

/* --- Editor.css --- */
/* General layout */
pnx-editor {
	display: flex;
	flex-direction: column;
	position: relative;
}

pnx-editor .pnx-map,
pnx-editor .pnx-psv {
	height: 50%;
}

/* Map background widget */
pnx-editor pnx-map-background {
	position: absolute;
	padding: 7px;
	z-index: 120;
	border-radius: 10px;
	border: 1px solid var(--widget-border-div);
	background-color: var(--widget-bg);
  	color: var(--widget-font);
	bottom: 10px;
	left: 10px;
	font-family: var(--font-family);
}

/* Player widget */
pnx-editor pnx-widget-player {
	margin-top: 10px;
}
pnx-editor pnx-widget-player #pnx-player-play {
	display: none;
}
/* --- ButtonGroup.css --- */
/* Also defined in styles.js */

pnx-button-group > pnx-button {
	display: inline-flex;
}

pnx-button-group > pnx-button::part(btn) {
	height: unset;
}

/* Togglable in group */
pnx-button-group > pnx-togglable-group > pnx-button {
	width: 100%;
	height: 100%;
}

/* Row */
pnx-button-group[dir="row"] > :not(:first-child):not(:last-child)::part(btn),
pnx-button-group[dir="row"] > :not(:first-child):not(:last-child) > ::part(btn) {
	border-radius: 0;
	border-left: none;
	border-right: none;
}

pnx-button-group[dir="row"] > :first-child::part(btn),
pnx-button-group[dir="row"] > :first-child > ::part(btn) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
}

pnx-button-group[dir="row"] > :last-child::part(btn),
pnx-button-group[dir="row"] > :last-child > ::part(btn) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: none;
}

/* Column */
pnx-button-group[dir="column"] > :not(:first-child):not(:last-child)::part(btn),
pnx-button-group[dir="column"] > :not(:first-child):not(:last-child) > ::part(btn) {
	border-radius: 0;
	border-top: none;
	border-bottom: none;
}

pnx-button-group[dir="column"] > :first-child::part(btn),
pnx-button-group[dir="column"] > :first-child > ::part(btn) {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom: none;
}

pnx-button-group[dir="column"] > :last-child::part(btn),
pnx-button-group[dir="column"] > :last-child > ::part(btn) {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: none;
}

/* --- Map.css --- */
.maplibregl-map.pnx-map {
	background: white;
}

/* Picture thumbnail on map */
.maplibregl-popup-content {
	padding: 5px !important;
	position: relative;
	pointer-events: none !important;
}

.pnx-map-thumb {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	max-width: 130px;
	max-height: 130px;
}

@keyframes rotating {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.pnx-map-thumb-loader {
	background-color: rgb(230,230,230);
	border-radius: 65px;
	max-height: 60px;
	margin: 5px 35px;
	animation: rotating 2s linear infinite;
}

.pnx-map-thumb-legend {
	display: block;
	position: absolute;
	bottom: 5px;
	right: 5px;
	left: 5px;
	background-color: rgba(0,0,0,0.8);
	color: white;
	text-align: center;
	font-style: italic;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
}

.maplibregl-marker {
	width: 60px;
}

/* Resize canvas for print */
@media print {
	.pnx-map.maplibregl-map .maplibregl-canvas-container {
		width: 100% !important;
		height: unset !important;
	}
}

/* Discard default indoor= widget */
.pnx-map .maplibregl-ctrl-indoorequal {
	display: none;
}
/* --- Photo.css --- */
/* Smaller loading text */
.psv-loader-text {
	text-align: center;
	font-size: 0.9em;
}

.psv-loader-image { width: 80%; }

.psv-overlay { opacity: 1 !important; }

/* Hide PSV tooltips */
.psv-virtual-tour-tooltip { display: none; }

/* Resize canvas for print */
@media print {
	.pnx-psv canvas {
		width: 100% !important;
		height: unset !important;
	}
}

/* Virtual Tour SVG arrows */
.pnx-psv-tour-arrows {
	background: none;
	border: none;

}
.pnx-psv-tour-arrows:active svg,
.pnx-psv-tour-arrows.pnx-clicked svg {
	opacity: 0.4;
	transition: opacity 0.2s ease;
}
.pnx-psv-tour-arrows svg {
	width: 100%;
	height: auto;
}

.pnx-psv-tour-arrows svg:hover {
	filter: drop-shadow(0 0 15px var(--blue));
}

.pnx-psv-playing .pnx-psv-tour-arrows {
	display: none;
}

/* No virtual tour arrows or annotations if photo is reduced */
pnx-mini .psv-virtual-tour-arrows,
pnx-mini .pnx-psv-annotation {
	display: none;
}
/* --- SearchBar.css --- */
/* Search results */
.sb-results {
	position: fixed;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: calc(100% - 20px);
	border: 1px solid var(--widget-border-div);
	border-radius: 10px;
	background-color: var(--widget-bg);
	color: var(--widget-font);
	z-index: 130;
	font-size: 1.05em;
	line-height: normal;
	font-family: var(--font-family);
	max-height: 30vh;
	overflow-y: auto;
}
.sb-result,
.sb-empty {
	display: block;
	padding: 5px 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	border-radius: 0;
}
.sb-result:hover {
	background-color: var(--widget-bg-hover);
}
.sb-result:first-child {
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	padding-top: 15px;
}
.sb-result:last-child {
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding-bottom: 15px;
}
/* --- Player.css --- */
pnx-widget-player {
	pointer-events: none;
}

pnx-widget-player > pnx-button-group {
	pointer-events: auto;
}
