html,
body {
	background: #fff;
	color: #1e1e1e;
	font-size: 14px;
	font-family: 'Open Sans', 'Arial', sans-serif;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

viewer.pnlm-container {
	display: block;
	width: 100%;
	height: 100%;
}

.pnlm-panorama-info {
	display: none !important;
}

span.pnlm-about-msg {
	display: none !important;
}

.pnlm-hotspot-base {
	cursor: zoom-in;
	z-index: 10;
	display: none;
	cursor: pointer;
}

.hotspot-backdrop {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgb(0 0 0 / 0.50);
	align-items: center;
	justify-content: center;
}

.hotspot-backdrop.show-hotspot {
	z-index: 100;
	opacity: 1;
}

.hotspot-panel {
	margin: auto;
	width: 554px;
	height: 356px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
}

.debug-panel {
	margin: auto;
	width: 90vw;
	height: 90vh;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: #fff;
	font-family: 'open sans' !important;
}

.hotspot-close-button {
	width: 42px;
	height: 42px;
	font-size: 32px !important;
	text-align: center !important;
	margin: 20px auto;
	user-select: none;
	cursor: pointer;
	display: block;
	position: absolute;
	top: -39px;
	z-index: 2;
	right: -19px;
	border-radius: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	border: 2px solid #333;
}

.hotspot-image {
	width: 73%;
	height: 74%;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	/* background-color: #000; */
	position: relative;
	text-align: center;
	margin: auto;
	transform: none;
}

.hotspot-title {
	margin: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 2px solid #00000026;
	display: none;
}

img.hotspot-image-ratio {
	width: 100%;
	object-fit: contain;
	height: 100%;
	object-position: center top;
	user-select: none;
	/* display: inline-block; */
}

.show-hotspot .hotspot-panel {
	transform: rotateZ(-10deg) scale(0.5);
}

.hotspot-image-src {
	padding: 10px 0;
	display: inline-block;
	vertical-align: top;
}

.hotspot-panel input {
	width: -webkit-fill-available;
}

.new-hotspot *:not(.fa) {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-align: inherit;
}

button.got-to-scene-button {
	/* display: block; */
	/* margin: 10px auto; */
	cursor: pointer;
}

.new-hotspot .hotspot-description:not(.fa) {
	line-height: 23px;
}

input#hotspot-type {
	margin: 0px 5px;
	display: inline-block;
}

.hotspot-close-zone {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.hotspot-image-cover {
	position: absolute;
	top: -1px;
	left: -1px;
	bottom: -1px;
	right: -1px;
	z-index: 1;
	background-image: url('/photospheres/sys/img/polaroid.png');
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
}

.hotspot-panel-background {
	background-image: url('/photospheres/sys/img/manilla-folder.png');
	width: 530px;
	height: 700px;
	background-position: center top;
	background-size: contain;
	display: block;
	background-repeat: no-repeat;
	z-index: 1;
	position: absolute;
	bottom: -100px;
	left: 0;
	right: 0;
	margin: auto;
	display: none;
}

.hotspot-background-paperclip {
	background-image: url('/photospheres/sys/img/paper-clip.png');
	width: 28px;
	height: 63px;
	position: absolute;
	z-index: 2;
	background-size: contain;
	background-repeat: no-repeat;
	left: 120px;
	top: 29px;
}

.polaroid.polaroid-zoomed {
	transform: rotate(0);
	z-index: 100;
	top: 130px;
	left: 40%;
	cursor: zoom-out;
	bottom: 0;
	width: 355px;
	height: 530px;
}

.pnlm-dragfix {
}

.hotspot-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	will-change: display, opacity;
}

.hotspot-folder-left {
	left: 0;
	width: 46%;
	background-image: url('/photospheres/sys/img/folder-left.png');
	transform-origin: center right;
	transform: rotateY(180deg);
	/* backface-visibility: visible; */
	z-index: 2;
	position: relative;
	transition: transform ease-in-out 500ms;
}

.hotspot-folder-right {
	right: 0;
	width: 54%;
	background-image: url('/photospheres/sys/img/folder-right.png');
}

.hotspot-folder-left, .hotspot-folder-right {
	position: absolute;
	top: 1px;
	bottom: 1px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	height: inherit;
}

.folder-opened .hotspot-folder-left {
	transform: rotateY(0);
}

.hotspot-folder-wrapper {
	transform: translate(-23%, 0px);
	height: inherit;
	transition: transform ease-in-out 500ms;
}

.hotspot-folder-wrapper.folder-opened {
	transform: translate(0, 0);
}

.hotspot-folder-left-front {
	backface-visibility: hidden;
}

.hotspot-folder-left-back {
	backface-visibility: hidden;
	transform: rotateY(180deg);
	transition: transform ease-in-out 360ms;
	transition-delay: 90ms;
	height: inherit;
	display: flex;
	justify-content: center;
	margin-left: 20px;
}

.folder-opened .hotspot-folder-left-back {
	transform: rotateY(0deg);
}

.hotspot-folder-left-front {
	backface-visibility: hidden;
	transform: rotateY(0deg) scale(-1, 1);
	transition: transform ease-in-out 360ms;
}

.folder-opened .hotspot-folder-left-front {
	transform: rotateY(180deg) scale(-1, 1);
}

.polaroid {
	position: absolute;
	width: 90%;
	height: 90%;
	transform: rotate(-15deg);
	top: 60px;
	left: 21px;
	bottom: 0px;
	margin: auto;
	transition: all ease-in-out 500ms;
	/* backface-visibility: hidden; */
}

.polaroid-zoomed .hotspot-description {
	bottom: 137px;
	height: 101px;
	font-size: 19px;
	left: 70px;
	right: 70px;
}

.debug-panel, .debug-panel * {
	font-family: 'open sans' !important;
	/* vertical-align: bottom; */
	text-transform: unset;
	font-weight: 400;
	font-size: 14px;
}

.debug-panel .hotspot-description {
	display: block;
	position: static;
	text-align: left;
	font-size: inherit;
	padding: 0 10px;
	height: auto;
	clear: both;
}

.debug-panel .hotspot-title {
	display: inline-block;
	text-align: left;
	width: 270px;
	border: none;
}

.debug-panel .hotspot-image {
	display: inline-block;
	width: 85px;
	vertical-align: top;
	float: left;
	margin: 10px;
	height: 114px;
}

.hotspot-debug .hotspot-panel {
	width: 95%;
	height: 95%;
}

.hotspot-type {
}

.hotspot-markdown {
	position: absolute;
	top: 13px;
	bottom: 11px;
	left: 14px;
	/* transform: rotate(0deg); */
	width: 238px;
	padding: 10px;
	/* background-color: #ff000080; */
	font-family: monospace;
	color: #444;
	line-height: 1.4;
	user-select: none;
}

.debug-panel textarea {
	width: -webkit-fill-available;
	height: 181px;
}

.hotspot-markdown h1 {
	font-size: 18px;
}

.hotspot-markdown p, .hotspot-markdown li {
	font-size: 13px;
	margin: initial;
	line-height: 1.2;
}

.hotspot-markdown blockquote {
	margin-left: 7px;
	padding-left: 7px;
	border-left: 5px solid #ececec;
	margin-right: 0;
	/* margin-top: 0; */
	/* margin-bottom: 0; */
	/* padding-top: 0; */
}

.hotspot-markdown ul {
	margin: 3px;
}

.hotspot-backdrop.show-hotspot {
	z-index: 100;
	opacity: 1;
}

.hotspot-panel {
	margin: auto;
	/* max-width: 327px; */
	/* max-height: 500px; */
	width: 554px;
	height: 356px;
	margin: auto;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
	align-items: center;
	align-content: center;
	justify-content: center;
}

.debug-panel {
	margin: auto;
	width: auto;
	height: auto;
	margin: auto;
	position: static;
	/* top: 0; */
	/* left: 0; */
	/* bottom: 0; */
	/* right: 0; */
	background: #fff;
	font-family: 'open sans' !important;
	max-width: 585px;
	border-radius: 10px;
	padding: 10px;
}

.hotspot-close-button {
	width: 42px;
	height: 42px;
	font-size: 32px !important;
	text-align: center !important;
	margin: 20px auto;
	user-select: none;
	cursor: pointer;
	display: block;
	position: fixed;
	top: 0;
	z-index: 2;
	right: 0;
	border-radius: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	border: 2px solid #333;
}

.hotspot-image {
	width: 73%;
	height: 74%;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	/* background-color: #000; */
	position: relative;
	text-align: center;
	margin: auto;
	transform: none;
}

.hotspot-title {
	margin: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 2px solid #00000026;
	display: none;
}

.hotspot-description {
	/* color: white; */
	/* font-size: 16px; */
	margin-top: 10px;
}

.show-hotspot .hotspot-panel {
	transform: rotateZ(-10deg) scale(0.5);
}

.hotspot-image-src {
	padding: 10px 0;
	display: inline-block;
	vertical-align: top;
}

.hotspot-panel input {
	width: -webkit-fill-available;
}

.new-hotspot *:not(.fa) {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-align: inherit;
}

button.got-to-scene-button {
	/* display: block; */
	/* margin: 10px auto; */
	cursor: pointer;
}

.new-hotspot .hotspot-description:not(.fa) {
	line-height: 23px;
}

input#hotspot-type {
	margin: 0px 5px;
	display: inline-block;
}

.hotspot-close-zone {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.hotspot-image-cover {
	position: absolute;
	top: -1px;
	left: -1px;
	bottom: -1px;
	right: -1px;
	z-index: 1;
	background-image: url('/photospheres/sys/img/polaroid.png');
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
}

.hotspot-panel-background {
	background-image: url('/photospheres/sys/img/manilla-folder.png');
	width: 530px;
	height: 700px;
	background-position: center top;
	background-size: contain;
	display: block;
	background-repeat: no-repeat;
	z-index: 1;
	position: absolute;
	bottom: -100px;
	left: 0;
	right: 0;
	margin: auto;
	display: none;
}

.hotspot-background-paperclip {
	background-image: url('/photospheres/sys/img/paper-clip.png');
	width: 28px;
	height: 63px;
	position: absolute;
	z-index: 2;
	background-size: contain;
	background-repeat: no-repeat;
	left: 120px;
	top: 29px;
}

.polaroid.polaroid-zoomed {
	transform: rotate(0);
	z-index: 100;
	top: 130px;
	left: 40%;
	cursor: zoom-out;
	bottom: 0;
	width: 355px;
	height: 530px;
	/* position: fixed; */
}

.pnlm-dragfix {
	/* cursor: move; */
}

.hotspot-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	will-change: display, opacity;
}

.hotspot-folder-left {
	left: 0;
	width: 46%;
	background-image: url('/photospheres/sys/img/folder-left.png');
	transform-origin: center right;
	transform: rotateY(180deg);
	/* backface-visibility: visible; */
	z-index: 2;
	position: relative;
	transition: transform ease-in-out 500ms;
}

.hotspot-folder-right {
	right: 0;
	width: 54%;
	background-image: url('/photospheres/sys/img/folder-right.png');
}

.hotspot-folder-left, .hotspot-folder-right {
	position: absolute;
	top: 1px;
	bottom: 1px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	height: inherit;
}

.folder-opened .hotspot-folder-left {
	transform: rotateY(0);
}

.hotspot-folder-wrapper {
	transform: translate(-23%, 0px);
	height: inherit;
	transition: transform ease-in-out 500ms;
}

.hotspot-folder-wrapper.folder-opened {
	transform: translate(0, 0);
}

.hotspot-folder-left-front {
	backface-visibility: hidden;
}

.hotspot-folder-left-back {
	backface-visibility: hidden;
	transform: rotateY(180deg);
	transition: transform ease-in-out 360ms;
	transition-delay: 90ms;
	height: inherit;
	display: flex;
	justify-content: center;
	margin-left: 20px;
}

.folder-opened .hotspot-folder-left-back {
	transform: rotateY(0deg);
}

.hotspot-folder-left-front {
	backface-visibility: hidden;
	transform: rotateY(0deg) scale(-1, 1);
	transition: transform ease-in-out 360ms;
}

.folder-opened .hotspot-folder-left-front {
	transform: rotateY(180deg) scale(-1, 1);
}

.polaroid {
	position: absolute;
	width: 90%;
	height: 90%;
	transform: rotate(-15deg);
	top: 60px;
	left: 21px;
	bottom: 0px;
	margin: auto;
	transition: all ease-in-out 500ms;
	/* backface-visibility: hidden; */
}

.polaroid-zoomed .hotspot-description {
	bottom: 137px;
	height: 101px;
	font-size: 20px;
	left: 46px;
	right: 46px;
}

.debug-panel, .debug-panel * {
	font-family: 'open sans' !important;
	/* vertical-align: bottom; */
	text-transform: unset;
	font-weight: 400;
	font-size: 14px;
}

.debug-panel .hotspot-description {
	display: block;
	position: static;
	text-align: left;
	font-size: inherit;
	padding: 0 10px;
	height: auto;
	clear: both;
}

.debug-panel .hotspot-title {
	display: inline-block;
	text-align: left;
	width: 270px;
	border: none;
}

.debug-panel .hotspot-image {
	display: inline-block;
	width: 85px;
	vertical-align: top;
	float: left;
	margin: 10px;
	height: 114px;
	position: relative;
	overflow: hidden;
}

.hotspot-debug .hotspot-panel {
	width: 100%;
	height: 100%;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
}

.hotspot-type {
	padding-left: 10px;
	margin: 10px 0;
	clear: both;
}

.hotspot-markdown {
	position: absolute;
	top: 13px;
	bottom: 11px;
	left: 14px;
	/* transform: rotate(0deg); */
	width: 238px;
	padding: 10px;
	/* background-color: #ff000080; */
	font-family: monospace;
	color: #444;
	line-height: 1.4;
	user-select: none;
}

.debug-panel textarea {
	width: -webkit-fill-available;
	height: 181px;
}

.hotspot-markdown h1 {
	font-size: 18px;
}

.hotspot-markdown p, .hotspot-markdown li {
	font-size: 13px;
	margin: initial;
	line-height: 1.2;
}

.hotspot-markdown blockquote {
	margin-left: 7px;
	padding-left: 7px;
	border-left: 5px solid #ececec;
	margin-right: 0;
	/* margin-top: 0; */
	/* margin-bottom: 0; */
	/* padding-top: 0; */
}

.hotspot-markdown ul {
	margin: 3px;
}

.guided-panel-wrapper {
	position: fixed;
	width: 100vw;
	height: 100vh;
	display: flex;
}

.guided-panel-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0.5;
	background: #000;
}

.guided-panel {
	width: 350px;
	height: 230px;
	padding: 20px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: fixed;
	background-color: #fff;
	border-radius: 10px;
	text-align: center;
	margin: auto;
}

.server-code {
	position: fixed;
	top: 0;
	right: 0;
	color: #fff;
	font-family: monospace;
	font-size: 26px;
	padding: 10px;
}

.client-only .pnlm-hotspot-base.pnlm-hotspot.pnlm-sprite.pnlm-info {
	cursor: default;
}

.client-only .pnlm-hotspot-base.pnlm-hotspot.pnlm-sprite.pnlm-scene {
	cursor: default;
}

.qr-code, .qr-code * {
	text-align: center;
	display: block;
	margin: auto;
	position: relative;
}

.qr-code img {
	border: 5px solid #fff;
	width: 64px;
	/* position: fixed; */
	transition: all ease-in-out 512ms;
	/* display: none !important; */
}

.qr-code.zoomed img {
	border: 20px solid #fff;
	width: 512px;
	height: 512px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: fixed;
}

.client-only .hotspot-close-button {
	display: none;
}

.qr-code canvas {
	display: none !important;
}

.server-controls {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 99999;
	height: 50px;
	text-align: center;
}

.server-control-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	background-color: #fff;
	padding: 10px;
	margin: 0 10px;
	cursor: pointer;
	border: none;
}

.server-control-button[disabled] {
	opacity: 0.5;
	cursor: default;
}

.mouse-indicator {
	position: fixed;
	width: 21px;
	height: 21px;
	border: 3px solid #fff;
	opacity: 0.5;
	border-radius: 100%;
	top: 0;
	left: 0;
}

.hotspot-template-tour .hotspot-panel {
	width: 95vw;
	height: 95vh;
}

.pnlm-controls-container {
	/* z-index: 999999; */
	/* position: fixed; */
	position: absolute;
	top: -72px;
	left: 0;
}

.pnlm-ui {
	z-index: 10;
}

.hotspot-image-ratio {
	aspect-ratio: 16/9;
	width: 100%;
}

.hotspot-debug .hotspot-image-ratio {
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	/* object-fit: cover; */
	z-index: 100;
	position: relative;
	border: 1px dashed #ccc;
	cursor: pointer;
}

.debug-context-menu {
	position: fixed;
	background-color: #fff;
	padding: 5px;
	border-radius: 10px;
	min-width: 140px;
	border: 1px solid #ccc;
	display: flex;
	flex-wrap: nowrap;
	align-content: space-around;
	align-items: center;
	flex-direction: column;
	justify-content: space-evenly;
	user-select: none;
}

.debug-context-menu-item {
	cursor: pointer;
}

.hotspot-prefill {
	clear: both;
	transform: translateX(10px);
}

.debug-panel-buttons {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	padding-top: 16px;
}

.debug-panel-buttons button {
	cursor: pointer;
}

.dz-preview {
	display: none;
}

a.external-link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.debug-buttons {
	position: absolute;
	bottom: 10px;
	left: 10px;
	text-align: left;
	/* width: 80px; */
	user-select: none;
	z-index: 10;
	display: none;
}

.debug-button {
	margin-top: 4px;
	cursor: pointer;
	z-index: 2;
	-webkit-transform: translateZ(9999px);
	transform: translateZ(9999px);
	display: inline-flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
}

.debug-buttons-orientation {
	text-align: center;
	margin-left: -10px;
}

.debug-buttons-orientation > div {
	margin: 4px 1px;
}

.debug .pnlm-controls-container {
	left: 0px;
	top: 53px;
}

.pnlm-hotspot-base.pnlm-hotspot.pnlm-sprite.pnlm-info[hotspot] {
	display: block;
	background-image: url('/photospheres/sys/img/usq-info-o.svg');
	border: none !important;
}

.pnlm-hotspot-base.pnlm-hotspot.pnlm-sprite.pnlm-info[hotspot]:hover {
	display: block;
	background-image: url('/photospheres/sys/img/usq-info-h.svg');
	border: none !important;
	background-color: transparent !important;
}

.pnlm-hotspot-base.pnlm-hotspot.pnlm-sprite.pnlm-info[hotspot]:active {
	display: block;
	background-image: url('/photospheres/sys/img/usq-info-s.svg');
	border: none !important;
}

[hotspot] {
	display: block;
}

.debug-button-set-start-view {
	background-image: url('/photospheres/sys/img/usq-set-start-view-o.svg');
	width: 112.27px;
	height: 21px;
}

.debug-button-set-start-view:hover {
	background-image: url('/photospheres/sys/img/usq-set-start-view-h.svg');
}

.debug-button-set-start-view:active {
	background-image: url('/photospheres/sys/img/usq-set-start-view-s.svg');
}

.debug-button-set-start-view {
	background-image: url('/photospheres/sys/img/usq-set-start-view-o.svg');
	width: 112.27px;
	height: 21px;
}

.debug-button-set-start-view:hover {
	background-image: url('/photospheres/sys/img/usq-set-start-view-h.svg');
	width: 112.27px;
	height: 21px;
}

.debug-button-set-start-view:active {
	background-image: url('/photospheres/sys/img/usq-set-start-view-s.svg');
}

.debug-button-pitch-up {
	background-image: url('/photospheres/sys/img/usq-tilt-bottom-o.svg');
	width: 21px;
	height: 21px;
}

.debug-button-pitch-up:hover {
	background-image: url('/photospheres/sys/img/usq-tilt-bottom-h.svg');
}

.debug-button-pitch-up:active {
	background-image: url('/photospheres/sys/img/usq-tilt-bottom-s.svg');
}

.debug-button-roll-left {
	background-image: url('/photospheres/sys/img/usq-rotate-left-o.svg');
	width: 21px;
	height: 21px;
}

.debug-button-roll-left:hover {
	background-image: url('/photospheres/sys/img/usq-rotate-left-h.svg');
}

.debug-button-roll-left:active {
	background-image: url('/photospheres/sys/img/usq-rotate-left-s.svg');
}

.debug-button-roll-right {
	background-image: url('/photospheres/sys/img/usq-rotate-right-o.svg');
	width: 21px;
	height: 21px;
}

.debug-button-roll-right:hover {
	background-image: url('/photospheres/sys/img/usq-rotate-right-h.svg');
}

.debug-button-roll-right:active {
	background-image: url('/photospheres/sys/img/usq-rotate-right-s.svg');
}

.debug-button-pitch-down {
	background-image: url('/photospheres/sys/img/usq-tilt-top-o.svg');
	width: 21px;
	height: 21px;
}

.debug-button-pitch-down:hover {
	background-image: url('/photospheres/sys/img/usq-tilt-top-h.svg');
}

.debug-button-pitch-down:active {
	background-image: url('/photospheres/sys/img/usq-tilt-top-s.svg');
}

.editor-panel {
	display: none;
	width: calc(33% - 40px);
	background-color: #fff;
	margin-left: 40px;
	padding: 20px;
	overflow: auto;
	max-height: calc(100vh - 112px);
}

.debug .editor-panel {
	display: block;
}

.viewer-wrapper {
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	flex-direction: row;
}

.viewer-panel {
	width: calc(100%);
	position: relative;
	overflow: hidden;
	height: calc(100vh);
}

.debug .viewer-panel {
	width: calc(66% - 20px);
	margin-left: 20px;
	height: calc(100vh - 92px);
	margin-right: 20px;
}

.inner-wrapper-title {
	padding: 20px 0;
	font-size: 28px;
	padding-left: 40px;
}

body.debug {
	background-color: #f3f4f4;
}

.debug.viewer-wrapper {
}

.debug .viewer-wrapper {
}

.panel-title {
	text-align: left;
	color: #1E1E1E;
	font-size: 24px;
	opacity: 1;
	line-height: 33px;
	margin-top: 0;
	margin-bottom: 20px;
}

.panel-text {
	text-align: left;
	letter-spacing: 0px;
	color: #A0A0A0;
	opacity: 1;
	font-size: 16px;
	line-height: 22px;
}

.darker-text {
	color: #1e1e1e !important;
}

.outline-buttons {
	color: #a0a0a0;
	text-decoration: none;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0px;
	border: 1px solid #A0A0A0;
	border-radius: 6px;
	padding: 5px 10px;
	margin-right: 20px;
	user-select: none;
	background-color: #fff;
	cursor: pointer !important;
}

.outline-buttons:hover {
	background-color: #f3f4f4;
}

.outline-buttons:active {
	background-color: #777;
	color: #fff;
}

.solid-buttons.solid-button-darker {
	background-color: #777777;
	color: #fff;
	border: 1px solid #777777;
	font-weight: 700;
}

.solid-buttons {
	user-select: none;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0px;
	background-color: #FFFFFF;
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid #A0A0A0;
	color: #A0A0A0;
	cursor: pointer;
	text-decoration: none !important;
	margin-right: 20px;
}

.darker-text {
	color: #1e1e1e !important;
}

.outline-buttons {
	color: #a0a0a0;
	text-decoration: none;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0px;
	border: 1px solid #A0A0A0;
	border-radius: 6px;
	padding: 5px 10px;
	margin-right: 20px;
	user-select: none;
	background-color: #fff;
	cursor: pointer !important;
	width: auto;
	display: inline-block;
	margin-bottom: 20px;
}

.outline-buttons:hover {
	background-color: #f3f4f4;
}

.outline-buttons:active {
	background-color: #777;
	color: #fff;
}

.solid-buttons.solid-button-darker {
	background-color: #777777;
	color: #fff;
	border: 1px solid #777777;
	font-weight: 700;
}

.solid-buttons {
	background-color: yellow;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0px;
	background-color: #FFFFFF;
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid #A0A0A0;
	color: #A0A0A0;
	cursor: pointer;
	text-decoration: none !important;
	margin-right: 20px;
}

.debug .debug-buttons {
	display: block;
}

.details-item-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
	align-items: center;
	margin-bottom: 20px;
	flex-direction: row;
}

.details-title {
	margin-right: 10px;
	/* width: 51px; */
	height: 22px;
	/* UI Properties */
	text-align: left;
	font-size: 16px;
	letter-spacing: 0px;
	color: #4D4D4D;
	opacity: 1;
	font-weight: 700;
	width: auto;
	display: block;
	white-space: pre;
}

.details-item-wrapper input, .details-item-wrapper select, .details-item-wrapper textarea {
	border: 1px solid #A0A0A0;
	border-radius: 6px;
	height: 30px;
	width: 100%;
	/* max-width: 200px; */
	padding: 0 5px;
	outline: none;
	color: #A0A0A0;
	font-size: 14px;
}

label.details-item-wrapper.details-item-wrapper-2-lines {
	flex-wrap: wrap;
}

.details-item-wrapper-2-lines .details-title {
	margin-bottom: 10px;
}

.details-item-wrapper textarea {
	padding: 5px;
	height: 49px;
}

.dropzone {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px dashed #A0A0A0;
	margin: 20px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-direction: row;
	flex-wrap: nowrap;
}

/*Same box as .dropzone, just under its own class so the hotspot icon uploader doesn't also match the dropzone directive*/
.icon-dropzone {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px dashed #A0A0A0;
	margin: 20px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-direction: row;
	flex-wrap: nowrap;
}

img.preview-thumbnail {
	width: 360px;
	height: calc((9 / 16) * 360px);
	aspect-ratio: 16/9;
	/* float: right; */
	object-fit: contain;
}

.dropzone label {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: space-between;
	align-items: center;
}

.previews {
	/* border-bottom: 1px solid; */
	/* margin: 20px 0; */
}

.dropzone label > div {
	vertical-align: middle;
}

.proccessing-item {
	font-size: 20px;
	padding: 10px;
	/* border: 1px solid #a1a1a1; */
	/* margin: 31px; */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-start;
	display: none;
}

span.dot-spin {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-top: 0;
	transform: scale(1);
}

.proccessing-item > span:nth-child(2) {
	padding-left: 21px;
	padding-top: 20px;
}

.dz-default.dz-message {
	display: none;
}

.dropzone-text-wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	line-height: 38px;
	text-align: center;
	color: #a0a0a0;
	font-size: 18px;
	padding: 10px 0;
}

.dropzone-text-wrapper .outline-buttons {
	margin: 10px 0;
}

.dropzone-text-wrapper .solid-buttons {
	margin: 10px;
	cursor: pointer;
	outline: none;
	user-select: none;
}

.outline-buttons:hover {
	background-color: #f3f4f4;
}

.outline-buttons:active {
	background-color: #777;
	color: #fff;
}

.solid-buttons.solid-button-darker {
	background-color: #777777;
	color: #fff;
	border: 1px solid #777777;
	font-weight: 700;
}

.solid-buttons.solid-button-darker:hover {
	background-color: #4d4d4d;
}

.gallery-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 -20px;
	/* margin-top: -20px; */
}

.gallery-item-title {
	overflow: hidden;
	white-space: pre;
	text-overflow: ellipsis;
	max-height: 31px;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0px;
	color: #A0A0A0;
	opacity: 1;
	margin: 5px 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
}

.page-gallery .gallery-item-title {
	display: block;
}

.gallery-item-preview {
	width: 210px;
	height: 140px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	border-radius: 6px;
	margin: 0 20px;
	background-color: #dfdfdf;
	position: relative;
}

.gallery-item-title-input {
	width: calc(100% - 10px);
	border: none !important;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0px;
	color: #A0A0A0;
	padding: 6px 5px;
	outline: none;
}

.gallery-item-title-input {
	width: calc(100% - 10px);
	border: none !important;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0px;
	color: #A0A0A0;
	padding: 6px 5px;
	outline: none;
}

.pnlm-zoom-controls {
	width: 19px;
	height: 39px;
	background: none;
	padding: 0;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
}

.pnlm-zoom-in, .pnlm-zoom-out {
	background-size: calc(100% - 5px);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 0;
}

.pnlm-zoom-in {
	background-image: url('/photospheres/sys/img/plus-s.svg');
}

.pnlm-zoom-in:hover {
	background-image: url('/photospheres/sys/img/plus-s.svg');
	background-color: #f3f4f4;
}

.pnlm-zoom-in:active {
	background-image: url('/photospheres/sys/img/plus-h.svg');
	background-color: #4d4d4d;
}

.pnlm-zoom-out {
	background-image: url('/photospheres/sys/img/minus-s.svg');
}

.pnlm-zoom-out:hover {
	background-image: url('/photospheres/sys/img/minus-s.svg');
	background-color: #f3f4f4;
}

.pnlm-zoom-out:active {
	background-image: url('/photospheres/sys/img/minus-h.svg');
	background-color: #4d4d4d;
}

.pnlm-fullscreen-toggle-button {
	width: 21px;
	height: 21px;
	background-image: url('/photospheres/sys/img/usq-expand-screen-o.svg');
	background-position: center;
	background-size: contain;
	background-color: transparent !important;
	border: none !important;
	padding: 0;
	margin: 0;
	margin-top: 5px;
	background-repeat: no-repeat;
}

.pnlm-fullscreen-toggle-button:hover {
	background-image: url('/photospheres/sys/img/usq-expand-screen-h.svg');
}

.pnlm-fullscreen-toggle-button:active {
	background-image: url('/photospheres/sys/img/usq-expand-screen-s.svg');
}

.pnlm-fullscreen-toggle-button-active {
	background-image: url('/photospheres/sys/img/usq-collapse-screen-o.svg');
}

.pnlm-fullscreen-toggle-button-active:hover {
	background-image: url('/photospheres/sys/img/usq-collapse-screen-h.svg');
}

.pnlm-fullscreen-toggle-button-active:active {
	background-image: url('/photospheres/sys/img/usq-collapse-screen-s.svg');
}

.custom-ui-buttons {
	position: absolute;
	top: 92px;
	left: 20px;
	width: 21px;
	/* height: 100px; */
	z-index: 1;
}

.ui-btn {
	width: 21px;
	height: 21px;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	margin-bottom: 5px;
	cursor: pointer;
}

.ui-btn-back {
	background-image: url('/photospheres/sys/img/usq-back-step-o.svg');
}

.ui-btn-back:hover {
	background-image: url('/photospheres/sys/img/usq-back-step-h.svg');
}

.ui-btn-back:active {
	background-image: url('/photospheres/sys/img/usq-back-step-s.svg');
}

.ui-btn-home {
	background-image: url('/photospheres/sys/img/usq-home-o.svg');
}

.ui-btn-home:hover {
	background-image: url('/photospheres/sys/img/usq-home-h.svg');
}

.ui-btn-home:active {
	background-image: url('/photospheres/sys/img/usq-home-s.svg');
}

.pnlm-hotspot-base.pnlm-hotspot.pnlm-sprite.pnlm-scene {
	background-image: url('/photospheres/sys/img/usq-locator-pin-o.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	cursor: pointer;
}

.pnlm-hotspot-base.pnlm-hotspot.pnlm-sprite.pnlm-scene:hover {
	background-image: url('/photospheres/sys/img/usq-locator-pin-h.svg');
}

.pnlm-hotspot-base.pnlm-hotspot.pnlm-sprite.pnlm-scene:active {
	background-image: url('/photospheres/sys/img/usq-locator-pin-s.svg');
}

.pnlm-info.hotspot-type-info.hotspot-subtype-video {
	background-image: url('/photospheres/sys/img/usq-video-o.svg') !important;
}

.pnlm-info.hotspot-type-info.hotspot-subtype-video:hover {
	background-image: url('/photospheres/sys/img/usq-video-h.svg') !important;
}

.pnlm-info.hotspot-type-info.hotspot-subtype-video:active {
	background-image: url('/photospheres/sys/img/usq-video-s.svg') !important;
}

.pnlm-info.hotspot-type-info.hotspot-subtype-link {
	background-image: url('/photospheres/sys/img/usq-info-o.svg') !important;
}

.pnlm-info.hotspot-type-info.hotspot-subtype-link:hover {
	background-image: url('/photospheres/sys/img/usq-info-h.svg') !important;
}

.pnlm-info.hotspot-type-info.hotspot-subtype-link:active {
	background-image: url('/photospheres/sys/img/usq-info-s.svg') !important;
}

.pnlm-info.hotspot-type-info.hotspot-subtype-info {
	background-image: url('/photospheres/sys/img/usq-photo-o.svg') !important;
}

.pnlm-info.hotspot-type-info.hotspot-subtype-info:hover {
	background-image: url('/photospheres/sys/img/usq-photo-h.svg') !important;
}

.pnlm-info.hotspot-type-info.hotspot-subtype-info:active {
	background-image: url('/photospheres/sys/img/usq-photo-s.svg') !important;
}

/*A custom uploaded icon replaces the default sprite in place, sized to fit rather than the default 26x26 circle - the image url itself still has to be set inline since it's per-hotspot*/
/*!important throughout: pannellum's own .pnlm-hotspot.pnlm-info/.pnlm-hotspot.pnlm-scene rules set background-position for their spritesheet offset, and being two classes they'd otherwise beat this single class regardless of load order*/
.custom-hotspot-icon {
	width: 150px !important;
	height: 50px !important;
	border-radius: 0 !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
}

/*A little like the "label" annotation type in toolbox-3d-model-viewer - a small always-visible tag under the marker rather than needing a hover*/
.hotspot-title-label {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	color: rgba(0, 0, 0, 0.8);
	padding: 5px 10px;
	max-width: 200px;
	width: max-content;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	z-index: 2;
	font-size: 15px;
	font-weight: normal;
	line-height: normal;
	max-height: 100px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: center;
}

.custom-hotspot-panel {
	opacity: 0;
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.6);
	transition: opacity 250ms ease-in-out;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
}

.custom-hotspot-panel.custom-hotspot-panel-show {
	opacity: 1;
	z-index: 1000;
}

.custom-hotspot-panel-info {
	max-width: 750px;
	/* width: 100vw; */
	height: calc((9 / 16) * 750px);
	min-width: 750px;
}

.custom-hotspot-panel-info-image-wrapper {
	width: auto;
	height: 100%;
	position: relative;
}

.custom-hotspot-panel-title {
	color: #fff;
	font-size: 16px;
	position: absolute;
	top: -29px;
	left: 60px;
	max-width: calc(100% - 75px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
	min-height: 20px;
	height: auto;
}

img.custom-hotspot-panel-info-image-element {
	height: 100%;
	margin: auto;
	display: block;
	object-fit: contain;
	width: 100%;
	object-position: top;
}

.custom-hotspot-panel-info-image {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	max-width: 750px;
	overflow: hidden;
}

.custom-hotspot-panel-close {
	color: #fff;
	font-size: 16px;
	position: absolute;
	top: -29px;
	right: 58px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	user-select: none;
	cursor: pointer;
	text-transform: uppercase;
}

.custom-hotspot-panel-close img {
	width: 20px;
	height: 20px;
	margin-left: 10px;
	user-select: none;
	cursor: pointer;
}

.prev-flipper {
	position: absolute;
	top: -1px;
	left: 0;
	bottom: -1px;
	width: 10px;
	background-image: url('/photospheres/sys/img/flipper-left.svg');
	background-size: cover;
	width: 50px;
	cursor: pointer;
	opacity: 0.2;
	transition: opacity 150ms ease-in-out;
}

.prev-flipper:hover {
	opacity: 1;
}

.next-flipper {
	position: absolute;
	top: -1px;
	right: 0;
	bottom: -1px;
	width: 10px;
	background-image: url('/photospheres/sys/img/flipper-right.svg');
	background-size: cover;
	width: 50px;
	cursor: pointer;
	opacity: 0.2;
	transition: opacity 150ms ease-in-out;
}

.next-flipper:hover {
	opacity: 1;
}

.custom-hotspot-panel-info-image-gallery {
	position: absolute;
	bottom: -78px;
	/* background: red; */
	width: 100%;
	height: 58px;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	flex-direction: row;
	align-content: center;
	margin: auto;
}

.custom-hotspot-panel-info-image-gallery-thumbnail {
	width: 101px;
	height: 54px;
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0 10px;
	background-position: center;
	cursor: pointer;
	border: 1.25px solid transparent;
}

.custom-hotspot-panel-info-image-gallery-thumbnail.active-thumbnail {
	border-color: #fff;
}

.custom-hotspot-panel-info-video-wrapper {
	position: relative;
}

.custom-hotspot-panel-info-text-wrapper {
	position: relative;
	border-radius: 6px;
	background-color: #fff;
	min-height: 160px;
	padding: 20px;
	color: #1e1e1e;
	font-size: 16px;
}

.debug .custom-ui-buttons {
	top: 10px;
	left: 10px;
}

.pnlm-controls-container {
}

.pnlm-sprite.pnlm-hot-spot-debug-indicator {
	background-image: url('/photospheres/sys/img/crosshairs.png');
	background-position: center;
	background-size: cover;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background-color: rgba(255, 255, 255, 0.2);
	transform: translate(-12px, -12px);
	z-index: -1;
}

.custom-hotspot-panel-info-text-wrapper .custom-hotspot-panel-title {
	top: 0;
	color: #4d4d4e;
	position: static;
	font-size: 18px;
}

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


.gallery-item-preview-hover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	align-items: center;
	justify-content: center;
	align-content: center;
	font-size: 24px;
	font-weight: 700;
	transition: all 150ms ease-in-out;
	opacity: 0;
	display: flex;
}

.gallery-item:hover .gallery-item-preview-hover {
	opacity: 1;
}

.clear-icon {
	position: absolute;
	top: 0;
	right: 13px;
	bottom: 0px;
	margin: auto;
	width: 17px;
	height: 17px;
	background-image: url('../img/filter-close-01.svg');
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.gallery-item-delete {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	color: #fff;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	font-size: 40px;
	display: none;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100;
}

.gallery-item-preview:hover .gallery-item-delete {
	display: flex;
}

.upload-in-progress-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
	background-color: rgba(0, 0, 0, 0.5);
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-wrap: nowrap;
	flex-direction: row;
	z-index: 1000;

}

.upload-in-progress-overlay.active {
	display: flex;
}

.upload-in-progress-content {
	width: 300px;
	height: 30px;
	background-color: #fff;
	padding: 40px;
	border-radius: 6px;
	font-size: 24px;
	text-align: center;
}

.details-item-wrapper-dropdown {
	text-transform: capitalize;
}