html {
	user-select: none;
	touch-action: manipulation;
	font-size: 100%;
}

body {
	overflow-x: hidden;
	background-color: #e8e8e8;
	/* IMPORTANT: in webkit mobile ensures immediate action on click (no 350 ms delay)
	on body and all its children: */
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
}

#screenshot {
	position: fixed;
	bottom: 100%;
	width: 100%;
	z-index: 1;
}

 img {
	padding: 0;
	border: 0;
	margin: 0;
}

p, span {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	color: var(--white);
	margin: 0; padding: 0;
	background-color: transparent;
	cursor: pointer;
}

ul, li {
	list-style: none;
	padding: 0; margin: 0;
}

.customCursor {
	cursor: ns-resize;
}
/********** General classes & Ids *******************/

.warning {
	background-color: var(--yellow);
	font-weight: bold;
	text-align: center;
	line-height: 6em;
}

#cover {
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	background-color: white;
	z-index: 999;
	display:block;
	text-align: center;
	padding-top: calc( 50vh - 32px);
}

#cover img {
	height: 64px;
	width: 64px;
}

#noJS {
	text-align: center;
  	background-color: var(--white);
  	color: var(--red);
  	font-size: 2em;
  	padding-top: 3em;
  	padding-bottom: 3em;
  	position: absolute;
  	z-index: 99999;
  	width: 100%;
}

/****************  Scrolling *****************/

.verticalTrack {
 	position: absolute;
	padding: 0;
	display: block;
	top: 0;
 	right: 0;
	height: 100%;
	width: 6px;
	background-color: white;
}

.verticalThumb {
	display: block;
	position: relative;
	visibility: inherit;
	top: 0;
	border-radius: 3px;
}


.horizontalTrack {
	position: absolute;
	bottom: 0;
	height: 6px;
	width: calc(100% - 6px);
	background-color: white;
}

.horizontalThumb {
	display: block;
	position: relative;
	visibility: inherit;
	bottom: 0;
	height: 100%;
	border-radius: 3px;
/* 	border: 1px solid white; */
	z-index: 101;
}
/***************** control panel *****************/

.design, .listing {
	float: left;
	position: relative;
	left: 0;
	bottom: 0;
	width: var(--d48);
	height: var(--d48);
	background-color: var(--cpImBck);
}

.design img, .listing img {
	display: block;
	height: inherit;
	width: inherit;
	background-color: #6c6c6c;
	background-color: black;
}

.cpContainer {
	box-sizing: border-box;
 	position: relative;
	float: left;
	bottom: 0;
	height: 48px;
	width: calc(100% - 48px);
	font-family: 'robotoCondensed';
	z-index: 310;
	background: linear-gradient(180deg, rgb(90, 90, 90) 0%, rgb(99, 99, 99) 2.5%);
}

.cpFrame {
	display: inline-block;
	position: relative;
	z-index: 1;
 	height: calc(48px + var(--scrollbarWidth) );
	width: calc( 100% - 104px );
	overflow-x: scroll;
	overflow-y: hidden;
}

.cpButtonsSet {
	height: calc( var(--d48) + var(--scrollbarWidth) );
	width: auto;
	margin: 0 auto;
}

.cpButton {
	position: relative;
	float: left;
	height: 48px;
	width: auto;
	z-index: 5;
	padding-right: 38px;
/* 	background-color: #484848; */
}

.cpButton img {
	vertical-align: middle;
	float: left;
	width: auto;
	height: 48px;
}

.cpButton span {
	float: left;
	position: relative;
	width: auto;
	color: white;
	height: 48px;
	line-height: 48px;
	font-size: 1rem;
	padding-left: 6px;
}

.cpButton:last-of-type {
	padding-right: 10px;
}

.cpButton:first-of-type {
	padding-left: 10px;
	padding-right: 40px;
}

.scrollLeft, .scrollRight {
/* 	height: 48px; */
	position: relative;
	z-index: 1000;
	background-color: rgba(52, 52, 52, 1)
}

.scrollLeft {
	float: left;
	box-shadow: 10px 0 4px -2px rgba(52, 52, 52, 0.75);
}

.scrollRight {
	float: right;
	box-shadow: -10px 0 4px -2px rgba(107, 107, 107, 0.75);
}

.scrollLeft img, .scrollRight img {
	width: 26px;
	height: 48px;
}

.scrollLeft img {
	padding-left: 2px;
}
.scrollRight img {
	padding-right: 2px;
}

/* /////////////////////////////////  */

.toggleChrome {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 48px;
	height: 48px;
	background-color: black;
	z-index: 320;
}

.hideChrome, .showChrome {
	position: relative;
	right: 0;
	display: block;
	width: inherit;
}

.hideChrome {
	bottom: 0;
	background-color: black;
}

.showChrome {
	bottom: -48px;
}

.hideChrome img, .showChrome img {
	display: block;
	width: inherit;
	height: auto;
/* 	background-color: #6c6c6c; */
}

/* /////////////////////////////////////////// */

#overviewTitle {
	cursor: default
}

#tourTitleTooltip {
	position: fixed;
	display: block;
	background-color: #fff39a;
	color: #000000;
	opacity: 0;
	width: auto;
	z-index: 100000;
	border: 2px solid #ecc600;
	border-radius: 4px;
	padding: 4px 6px;
}

#shadowTitle {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: auto;
	/* styling MUST be preserved, otherwise the width calculation is wrong */
	font-size: 1.3rem;
	font-weight: 800;
	font-family: 'oldStandard';
}

/***** Predefined colors - need to be updated and defined as object properties so as to avoid support issues ******/

html {
	--d48: 48px;
	--md48 : -48px;
	--scrollbarWidth: 15px;
	--white: #ffffff;
	--black: #000000;

	--containerBackground: #f3f3f3;
	--containerBorder: #a5a5a5;

	--textLightGray: #444444;

	--cpImgBorder: #606060;
	--cpImBck: #4a4a4a;
	--cpButtonsBck: rgba(81, 81, 81, 0.8);

	--panelHdBck: #5b5b5b;
	--closeImgBck: #303030;

	--lightGray0: #dedede;
	--lightGray1: #cdcdcd;
	--lightGray2: #a3a3a3;
	--middleGray: #777777;
	--middleGray2: #5d5d5d;
	--darkGray: #383838;

	--red: #ff0000;
	--red2: #D00000;

	--yellow: yellow;
	--lightYellow: #fff9e0;
	--darkYellow: #ffb78c;

	--green: #4EAA00;
	--brightGreen: #A1C821;

	--pink: #FF8DA1;
	--lilla: #E26FE2;

	--blue: #3365ff;
	--blueMetal: #8278CC;
	--azur: #2682a3;
	--azurBright: #3ac3f6;

	--showChromeBackground: rgba(199, 199, 199, 0.7);

	--grayLight: rgba(69, 69, 69, 0.5);
	--grayDark: rgba(69, 69, 69, 0.8);

	--panelBackground: #ededed; /* 1x */
}