/* Generate web font packages (with css) in http://www.fontsquirrel.com */
@font-face {
	font-family:'didact-gothicregular';
  src:url('../fonts/font.woff2') format('woff2'), url('../fonts/font.woff') format('woff');
	font-weight:normal;
	font-style:normal;
}

* {
	box-sizing:border-box; /* padding & border are included in size calculations; safe to use for all elements */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	margin:0;
	background:transparent;
	color:#fff;
	/* accent-color:#0078d7; change this with theme (date select highlight color = #0078d7) */
	font-family:'didact-gothicregular';
	font-size:18px;
	line-height:18px;
	text-decoration:none;
  /* prevent font scaling on mobile devices */
  -webkit-text-size-adjust:none;
  -moz-text-size-adjust:none;
  -ms-text-size-adjust:none;
}

html {
	width:100%;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	overscroll-behavior:none;
	-webkit-overflow-scrolling:touch;
}

body {
	width:100%;
	height:100vh; /* set body to viewport height so that vertical centering inside of body works */
	position:fixed; /* fixes the addressbar show/hide issue on mobile */
	background-color:black;
}

 .three,.overlays,.formContainer {
	cursor:none;
	pointer-events:none;
}
 .three {
	width:100vw;
	height:100vh;
	position:fixed;
	top:0px;
	left:0px;
	z-index:0;
	overflow:hidden;
 }
.overlays {
	width:100vw;
	height:100vh;
	position:fixed;
	bottom:0px;
	left:0px;
	z-index:5;
	overflow:hidden;
 }
 .formContainer {
	width:100vw;
	height:100%;
	position:relative;
	top:0px;
	left:0px;
	z-index:7;
	overflow-y:visible; /* will handle scrolling in javascript, as body needs to have position:fixed (see comment there) */
 }

div,button {
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
	white-space:normal;
}

a,button,input,textarea,select {
	cursor:pointer;
	pointer-events:auto;
}

li {
	line-height:150%;
}

.loadingInfo {
	position:fixed;
	top:12px;
	right:12px;
	text-align:right;
	font-size:24px;
	line-height:125%;
	z-index:10000;
	height:100%;
	width:100%;
	/*background:url('../textures/icons/defaultPoster.jpg') no-repeat;
	background-position:center;
	background-size:33% auto;*/
}

.logoText {
	width:320px;
	height:128px; /* so that space is allocated already before image is loaded */
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:140px;
}

.welcomeText {
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:34px;
	margin-bottom:10px;
	text-align:center;
  line-height:125%;
}

.nameTagField {
	position:relative;
	top:0px;
	display:block;
	width:272px;
	height:134px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:40px;
}

.nametagCanvas {
	position:absolute;
	top:3px;
	left:8px;
	width:256px;
	height:128px;
	pointer-events:all;
	cursor:pointer;	
	outline: none; /* hide canvas focus rect */
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* same for mobile webkit */
}

.nametagBg {
	position:absolute;
	top:0;
}

.nametagInput {
	position:absolute;
	top:65px;
	left:14px;
	width:244px;
	height:37px;
	color:black;
	outline:none;
    border-width:0;
	text-align:center;
	padding:0;
}

/*************************************************************************************************/
.speechBubble {
	position:fixed;
	top:0;
	right:12px;
	z-index:40; /* in front of THREE content */
	opacity:1;
	width:256px;
	max-height:256px;
}

.bubbleCanvas {
	position:absolute;
	top:0px;
	right:0px;
	z-index:41;
	width:256px;
	height:256px;
	overflow:hidden;
	outline: none; /* hide canvas focus rect */
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* same for mobile webkit */
}

.bubbleTextarea {
	position:absolute;
	top:14px;
	right:2px;
	z-index:42;
	width:252px;
	height:37px; /* initially */
	padding:11px 0 7px 12px;
	word-break:keep-all;
	overflow-wrap:normal;
	white-space:pre;
	overflow-x:hidden;
	color:black;
	/* for finding out maximum corner radius: background-color:gray; */
	outline:none;
    border-width:0;
	text-align:left;
	resize:none;
}

/*************************************************************************************************/
.joystickBase {
	position:absolute;
	bottom:0; /* to be set in js */
	left:14px;
	z-index:20;
	height:80px;
	width:80px;
	margin:0;
	padding:0;
	background:url('../textures/ui/joystickBase.png') no-repeat;
	background-size:cover;
	cursor:none;
	pointer-events:none;
}
.joystickKnob {
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:21;
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	background:url('../textures/ui/joystickKnob.png') no-repeat;
	background-size:cover;
	cursor:none;
	pointer-events:none;
}


/*************************************************************************************************/
.textIcon {
	height:32px;
	vertical-align:-11px;
	z-index:15;
}

/* help text related */
.helpTextArea {
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:10; /* in front of THREE content */
	opacity:0; /* initially */
	width:auto;
	max-width:100%;
	margin:0 12px 13px 12px;
	padding:15px 16px 15px 16px;
	box-shadow:rgba(0,0,0,.5) 5px 5px 5px;
	overflow:visible; /* so that mouse and hand images don't get cropped */
	cursor:none;
}

.helpTextMouseImg {
	position:absolute;
	top:-68px;
	left:-20px;
	height:115px;
}

.helpTextDiv,.helpTextDivWithMouse,.helpTextWithHandDiv {
	text-align:left;
	color:rgb(20,20,20);
	width:auto;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:7; /* max number of lines to show */
	-webkit-box-orient:vertical;
}
.helpTextDivWithMouse { margin-left:60px; } /* for help texts with the mouse image */
.helpTextWithHandDiv { margin-right:32px; } /* for touch screen help texts with the tapping hand */

.oneLineWithEllipses, .topLineTextWithEllipses, .bottomLineTextWithEllipses {
	display:block;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}
.topLineTextWithEllipses { margin-bottom:7px; } /* exhibition & item name */
.bottomLineTextWithEllipses { margin-top:7px; } /* exhibition & item url */

/*************************************************************************************************/
.formBgDiv {
	position:absolute;
	z-index:99;
	width:100%;
	height:100%;
	display:none;
}

.mainForm {
	position:absolute;
	top:0px;
	left:50%;
	z-index:100;
	transform:translateX(-50%);
    width:640px;
	max-width:100%;
	height:auto;
}

.column50 {
	width:50%;
	height:auto;
	float:left;
}
.column100 {
	width:100%;
	height:auto;
	padding-right:12px;
	float:left;
}
.column50lr {
	width:50%;
	height:auto;
	float:left;
	padding-left:12px;
	padding-right:12px;
}
.column100lr {
	width:100%;
	height:auto;
	padding-left:12px;
	padding-right:12px;
	float:left;
}

/*.clearfix::after {
  content:"";
  clear:both;
  display:table;
}*/

.formTitleLeft,.formTitleCenter,.tcFormTitle {
	font-size:36px;
	line-height:36px;
	font-weight:normal;
	vertical-align:top;
	margin:76px 24px 24px 24px;
	color:#fff;
}
.tcFormTitle { margin:0px 24px 17px 24px; }
.formTitleLeft,.tcFormTitle { text-align:start; }
.formTitleCenter { text-align:center; }

.closeButton,.tcCloseButton {
	position:absolute;
	top:19px;
	right:19px;
	width:41px;
	height:41px;
    cursor:pointer;
	pointer-events:auto;
	opacity:.75;
}
.closeButton:hover,.tcCloseButton:hover{ opacity:1; }

.formField,.formFieldAfterRadioButtons,.formFieldRightColumm {
  position:relative;
	height:auto;
  margin:48px 24px;
	padding:0 0 0 10px;
	background:rgba(0, 0, 0, .5);
}
.formFieldAfterRadioButtons { margin-top:41px; }
.formFieldRightColumm { margin:0 24px 24px 12px; }

.dateField { margin:0 24px 11px 24px; }
.dateLabel { margin:0 8px 0 0; }
.datePicker { border:2px solid #fff; }
.datePicker:focus { outline:none !important; }

/* text selection color; this does not work on date input hghtlights
 ::-moz-selection {
  color:red;
  background:yellow;
}
::selection {
  color:red;
  background:yellow;
}
*/

.radioButtonRow {
  margin:0 0 12px 48px;
	vertical-align:middle;
	visibility:hidden;
	clear:both;
	pointer-events:all;
}
.radioButton {
	float:left;
	margin-top:-10px;
}
.radioButtonLabel {
	display:inline-block;
	padding:0 7px;
  color:#fff;
  cursor:pointer;
}

.tcDiv {
	position:absolute;
	bottom:127px;
	z-index:101;
	width:100%;
	height:auto;
	display:none;
}
.tcInnerDiv {
	margin:0 24px;
	background:black;
	opacity:.85;
	padding:20px 20px 20px 0;
}
.tcCloseButton {
	right:43px;
}
.tcRow {
    margin:-25px 24px 24px 24px;
	vertical-align:middle;
	clear:both;
}
.tcCheckbox {
	float:left;
	margin-top:-11px;
}
.tcLabel {
	display:inline-block;
	pointer-events:all;
    cursor:pointer;
	padding:0 0 0 7px;
    color:#fff;
}
.tcLink {
	display:inline-block;
	pointer-events:all;
    cursor:pointer;
	color:#fff;
	/* font-weight:bold; */
	text-decoration:underline;
}

input { height:37px; }
.inputLabel {
  position:absolute;
  left:12px;
  top:11px;
  color:#aaa;
  cursor:text;
	width:100%;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
  transition:transform .2s ease-in-out;
}
.inputText {
	width:100%;
  border-width:0;
  line-height:125%;
	padding-top:4px;
}
.inputTextarea {
	width:100%;
  border-width:0;
  line-height:125%;
	padding-top:9px;
  resize:none;
}
.inputTextArea3lines {	height:79px; }
.inputTextArea10lines {	height:240px; }
.inputTextAreaFillHeight {
	width:100%;
	height:100%;
  border-width:0;
  line-height:125%;
	padding:9px 12px 8px 12px;
	resize: none;
}
.inputText:focus,.inputTextarea:focus,.inputTextAreaFillHeight:focus { outline:none; }
.inputText:focus::placeholder,.inputTextarea:focus::placeholder,.inputTextAreaFillHeight:focus::placeholder { color:#aaa; }
.inputText:not(:focus)::placeholder,.inputTextarea:not(:focus)::placeholder { color:transparent; }
.inputTextAreaFillHeight:not(:focus)::placeholder { color:#aaa; }
.inputText:focus + .inputLabel,.inputTextarea:focus + .inputLabel { transform:translate(-12px, -37px); color:#fff; }
.inputText:not(:placeholder-shown) + .inputLabel,.inputTextarea:not(:placeholder-shown) + .inputLabel { transform:translate(-12px, -37px); color:#fff; }

.boxLabel,.boxLabelRightColumm {
  position:absolute;
	margin:-26px 24px 0 24px;
	padding-right:34px;
  color:#fff;
  cursor:text;
	width:inherit;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
.boxLabelRightColumm { margin-left:12px; }

.selectBox,.selectBoxNoScroll {
	overflow-x:hidden;
	overflow-y:auto;
  margin:0 12px 24px 24px;
	background:rgba(0, 0, 0, .5);
	clear:both;
	pointer-events:all;
	cursor:auto;
}
.selectBoxNoScroll { overflow-y:hidden; }
.selectBoxHeight { height:213px; } /* gives 4:3 aspect ratio for the box (nice for the image on the right column) */
.selectBoxMeshes { margin-left:12px; }

.selectBoxContents {
	height:auto;
	width:100%;
	padding:6px 6px;
	/* -moz-appearance:none; removes the arrow button from a select control */
}
.checkboxRow {
	vertical-align:middle;
	/*clear:both;*/
}
.checkboxRowHighlight { background:rgba(255, 255, 255, .125); color:#ccc; }

/* .checkbox {	float:left; margin-top:-11px; } */
/* hide the default checkbox altogether, use colors to indicate selection */
input[type=checkbox] { display:none; }
input[type=checkbox] + label { background:transparent; color:#aaa; }
input[type=checkbox]:checked + label { background:rgba(255, 255, 255, .25); color:#fff; }
.checkboxLabel {
	display:inline-block;
	line-height:25px;
	padding-left:7px;
	width:100%;
	/* alternatively:150%; white-space:nowrap; text-overflow:ellipsis;*/
	/* or without width just this:padding-right:7px; */
  color:#aaa;
  cursor:pointer;
}

.submitButton,.dialogButton,.actionButton {
	clear:both;
  display:block;
	position:relative;
	left:50%;
	transform:translateX(-50%);
	margin-bottom:24px;
  padding:9px 12px 8px 12px;
	min-width:135px;
	transition:all 0.3s;
	pointer-events:all;
  cursor:pointer;
  /*text-transform:uppercase;
  letter-spacing:2px;*/
	color:#fff;
  text-align:center;
	border-left-width:0;
	border-right-width:0;
	border-top-width:1px;
	border-bottom-width:1px;
	border-top-style:solid;
	border-bottom-style:solid;
	border-top-color:rgba(0,0,0,0.5);
	border-bottom-color:rgba(0,0,0,0.5);
	background-color:rgba(0,0,0,0.5);
}
.dialogButton { width:100%; }
.actionButton {
	width:100%;
	margin-bottom:12px;
	background-color:rgba(255,255,255,0.125);
}
.submitButton:hover,.dialogButton:hover,.actionButton:hover:enabled {
	border-top-style:solid;
	border-bottom-style:solid;
	border-top-color:rgba(255,255,255,1);
	border-bottom-color:rgba(255,255,255,1);
	background-color:rgba(0,0,0,0.33);
}
.actionButton:hover:enabled { background-color:rgba(255,255,255,0.25); }
.actionButton:active:enabled { background-color:rgba(255,255,255,0.5); }
.actionButton:disabled { color:#555; background-color:rgba(64,64,64,0.125); }

/********** SETUPS **********/
.setupBgDiv {
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	z-index:99;
}

.setupButtonDiv {
	width:auto;
	height:100%; /* must be set for max-height to work */
	position:absolute;
	top:0;
	right:0;
	z-index:101;
	background-color:rgba(255,255,255,0.0625);
}

.materialSetupDiv {
	display:grid;
	grid-gap:0;
	grid-template-columns:0 0 0 0 0; /* set in JS */
	grid-template-rows:0 0 0; /* set in JS */
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	z-index:100;
	overflow-x:visible;
}

.gradientDiv {
	width:72px;
	height:0;
	position:absolute;
	top:0;
	right:72px;
	z-index:101;
	background:url('../textures/setup/gradientBrightness.png') no-repeat;
	background-size:100% 100%;
}
.brightnessHandle {
	width:72px;
	height:3px;
	position:absolute;
	bottom:0;
	z-index:102;
}

.materialDivRow1Col1 { grid-row:1; grid-column:1;	}
.materialDivRow1Col23 { grid-row:1; grid-column:2 / span 2; }
.materialDivRow1Col4 { grid-row:1; grid-column:4; }
.materialDivRow2Col1 { grid-row:2; grid-column:1; background-color:rgba(255,255,255,0.0625); }
.materialDivRow2Col2 { grid-row:2; grid-column:2; padding-left:12px; background-color:rgba(255,255,255,0.0625); }
.materialDivRow2Col3 { grid-row:2; grid-column:3; padding-left:11px; padding-right:13px; background-color:rgba(255,255,255,0.0625); }
.materialDivRow2Col4 { grid-row:2; grid-column:4; padding-left:12px; padding-bottom:12px; background-color:rgba(255,255,255,0.0625); }
.materialDivCol5 { grid-row:1 / span 3; grid-column:5; background-color:rgba(255,255,255,0.0625); }

.gridLabel {
	padding-top:7px;
	padding-left:12px;
  color:#fff;
  cursor:text;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	background-color:rgba(255,255,255,0.0625);
}

.roundButton {
	display:none; /* used in material setup, hide initially in case there are no meshes */
	width:41px;
	height:41px;
	border:4px solid rgba(255,255,255,.25);
	border-radius:20px;
	background-color:rgba(0,0,0,.25);
	margin-right:6px;
	margin-bottom:6px;
}
.roundButton:hover {
	background-color:rgba(255,255,255,.125);
	border:4px solid rgba(255,255,255,.5);
}
.roundButton:active { background-color:rgba(255,255,255,0.5); }
.roundButton.selected { border:4px solid rgba(255,255,255,1); background-color:rgba(255,255,255,0.25); }

.bigRoundButton {
	pointer-events:none;
	width:135px;
	height:135px;
	border:4px solid rgba(255,255,255,1);
	border-radius:67px;
	background-color:rgba(255,255,255,0.25);
}

/* need to have this explicitely for fileBox_interaction to scale to 100% */
.materialTextureFileBoxSize {
	width:270px;
	height:135px;
}

.materialTextureFileDiv {
  position:relative;
	height:100%;
	background:rgba(0, 0, 0, .5) no-repeat;
	background-position:center;
	background-size:auto 100%;
}

.setupImgDiv,.setupImgDivSelected,.closeSetupButton {
  cursor:pointer;
	pointer-events:auto;
	height:72px;
	width:72px;
	margin:12px;
	opacity:.75;
}
.closeSetupButton {
	padding:14px;
	margin-top:5px;
	margin-bottom:1px;
	background-repeat:no-repeat;
	background-size:100%;
	background-origin:content-box; /* makes background image respect the padding */
}
.setupImgDiv,.setupImgDivSelected {
	background-color:rgba(255,255,255,0.1);
	padding:6px;
}
.setupImgDiv:hover,.setupImgDivSelected,.closeSetupButton:hover { opacity:1; }

.setupButton {
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:100%;
	background-origin:content-box; /* makes background image respect the padding */
}

.setupDivider {
	height:12px;
}