:root {
	--primaryColor: #ff7a15;
	--primaryColorHover: #f15a22;
	--accentColor: #d64202;
	--topBarColor: #4e4d4fe6; /* was #042740cc   7th and 8th character are hex opacity ff = solid, 00 = transparent */
	--menuColor: #e9e9e9;
	--menuHeight: 0px;
}

html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; -webkit-text-size-adjust: none; }
body {
	color: #082f4c;
	font-family: 'Oswald', sans-serif;
	font-size:14px;

	background-color: #fff;
	overflow: hidden;
	position:fixed;
	
	/* overscroll-behavior-y: contain; /* Disables pull-to-refresh but allows overscroll glow effects. */
	overflow-y: hidden;
	overscroll-behavior-y: contain; /* Disables pull-to-refresh and overscroll glow effect. Still keeps swipe navigations. */
	overscroll-behavior-x: contain; /* Disables swipe navigations. */
}

#viewport3D {
	width: 100%;
	height: calc(100% - var(--menuHeight)); /* was 65% */
}

#info { /* Info bar across the top of the page */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 28px;
	padding: 3px;
	background-color: var(--topBarColor);
	text-align:center;
	font-size: 18.5px;
	line-height: 18.5px;
	color: #fff;
	text-transform: uppercase;
}
#info #logo { height: 20px; width: auto; vertical-align: bottom; position: relative; top: 1px; padding-right: .25em; }

#helpButton {
  color:#ababab; color:#93a1b3; position: absolute; top: 5px; left: 4px; font-size: 18.5px;
  z-index: 1004;
  cursor: pointer;
}
#helpButton:hover { color:#dedede; }

#overlay {
  opacity: 0.85;
  display: block;
  /*transition: visibility 0s 0.2s, opacity 0.5s linear;*/
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#333;
  z-index:1003;
}

#navigation .btn.active.amber { background-color: #F7931E; }
#navigation .btn.active.white { background-color: white; color: black; }
#navigation .btn.active.red { background-color: red; }

#floatingNav {
	text-align: right;
	position: absolute;
	right: 6px;
	top: 35px;
}
.btn.orange {
	background-color: var(--primaryColor);
	border-color: var(--primaryColor);
}
.btn.orange:hover {
	background-color: var(--primaryColorHover);
	border-color: var(--primaryColorHover);
}

.modal-header, .modal-footer { background-color: var(--menuColor); }

#help #otz a.cubes i.fas { color: #bbb; font-size: 300%; display: block; line-height: 0.75; margin: 0; margin-left: auto; margin-right: auto; padding: 5px; }
#help #otz a { display: block; }
#help #otz:hover a { text-decoration: underline; color: #333; }
#help #otz:hover a.cubes { text-decoration: none!important; }
#help #otz:hover a.cubes i { color: #999; }

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#navigation {
	box-sizing: border-box;
	display: block;
	position: fixed;
	top: calc(100% - var(--menuHeight)); /* was 65% */
	bottom: 0%;
	width: 100%;
	border: 2px solid #a1a1a;
	padding: 12px;
	z-index: 1000;
	overflow-y: auto;	
	background-color: var(--menuColor);
	opacity: 0.85;
	
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
#navigation::-webkit-scrollbar { width: 10px; } /* width */
#navigation::-webkit-scrollbar-track { background: #f1f1f1; } /* Track */
#navigation::-webkit-scrollbar-thumb { background: #888; } /* Handle */
#navigation::-webkit-scrollbar-thumb:hover { background: #555; } /* Handle on hover */

#navigation nav.nav-tabs { position: relative; z-index: 100; }
#navigationTabPages { position: relative; top: -1px; z-index: 99;}

.colorSwatch {
	display: inline-block;
	width: 65px;
	height: 65px;
	color: white;
	text-align: center;
	font-size: 12px;
	padding: 2px;
	margin: 2px;
	border-radius: 4px;
	position: relative;
	font-weight: bold;
	border: 1px solid #ccc;
}
.colorSwatch#White {  }
.colorSwatch:hover {
	color: white;
	border: 2px solid #ccc;
	border-color: black;
	text-decoration: none;
}
.colorSwatch.reverse { color: black; }
.colorSwatch.reverse:hover { color: black; }
.colorSwatch div {
	position: relative;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	word-spacing: 200px; /* force break/warp after each word */
}

#navigation:hover {
	/*
	opacity: 0.85;
	filter:alpha(opacity=85);
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
	*/
}
#navigation h2 {
	display: block;
	text-align: center;
	color: #ccc;
	margin: 0.2em;
	cursor: grabbing;
}
#navigation section {
	color: #888;
	cursor: pointer;
	padding: 0.25em 0.6em 0.35em 0.6em;
	border-top: 1px solid #666;
	border-left: 3px solid #666;
}
#navigation section:hover, #navigation section.selected {
	color: white;
	background-color: #222;
	border-left: 3px solid var(--accentColor);
}
#navigation .page {
	background-color: white;
	padding: 0.6em;
	display: none;
}

#navigation .grid {
	display: grid;
	grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px;
	grid-template-rows: 30px 30px 30px 30px 30px;
	grid-column-gap: 5px;
	grid-row-gap: 5px;
}
#navigation .grid .grid-item {
	border: 2px solid #666;
	border-radius: 5px;
	text-align: center;
	font-size: 1.15em;
}

#navigation .grid .grid-item.available { border-style: dotted; background-color: #b5ffd0}
#navigation .grid .grid-item.available:hover { border-color: black; background-color: #71ec9d; }
#navigation .grid .grid-item.occupied { background-color: #ccc; }
#navigation .grid .grid-item.occupied.deletable:hover { border-color: red; }
#navigation .grid .grid-item .fa-minus { display: none; }
#navigation .grid .grid-item.occupied.deletable .fa-plus { display: none; }
#navigation .grid .grid-item.occupied.deletable .fa-minus { display: block; color: #bf5f5f; line-height: 26px; }
#navigation .grid .grid-item.occupied.deletable:hover .fa-minus { color: red; }
#navigation .grid .grid-item.empty { cursor: auto; opacity: 0.4; filter:alpha(opacity=40); border-style: dotted; }
#navigation .grid .grid-item.empty i, #navigation .grid .grid-item.occupied i { display: none; }
#navigation .grid .grid-item.available, #navigation .grid .grid-item.occupied {
	cursor: pointer;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { font-weight: bold!important; }

.ui-selectmenu-menu { z-index: 1001!important; font-weight: bold; }
.ui-selectmenu-menu .ui-menu-item { padding: 3px; margin: 3px; border: 1px solid #999; }

/* set background and text colors for color selection menu */
#wallColor-menu .bone-white, #doorWindowColor-menu .bone-white		{ background-color: #f3f4ed; color: black; }
#wallColor-menu .dark-bronze, #doorWindowColor-menu .dark-bronze	{ background-color: #342d28; color: white; }
#wallColor-menu .medium-bronze, #doorWindowColor-menu .medium-bronze	{ background-color: #5c4f46; color: white; }
#wallColor-menu .regal-white, #doorWindowColor-menu .regal-white	{ background-color: #fbf5f7; color: black; }
#wallColor-menu .black, #doorWindowColor-menu .black			{ background-color: #242424; color: white; }

#wallColor-menu .sandstone, #doorWindowColor-menu .sandstone		{ background-color: #e3d8c1; color: black; }
#wallColor-menu .stone-gray, #doorWindowColor-menu .stone-gray		{ background-color: #c6c6c6; color: black; }
#wallColor-menu .charcoal-gray, #doorWindowColor-menu .charcoal-gray	{ background-color: #414141; color: white; }
#wallColor-menu .dark-red, #doorWindowColor-menu .dark-red		{ background-color: #7e0000; color: white; }
#wallColor-menu .melchers-green, #doorWindowColor-menu .melchers-green	{ background-color: #003800; color: white; }

#wallColor-menu .premium::after, #doorWindowColor-menu .premium::after		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0d6  Premium"; position: absolute; right: 15px; margin-top: -19px; color: #007fff; }

/*.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { font-weight: bold!important; background-color: transparent!important; border: 3px solid #007fff!important; margin: -3px!important; color: inherit!important; }*/
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { font-weight: bold!important; background-color: transparent!important; border: 3px solid #007fff!important; margin: -3px!important; color: inherit!important; }

#roofOption1-button, #roofOption2-button, #roofOption3-button, #roofOption4-button, #roofOption5-button, #roofOption6-button, #roofOption7-button, #roofOption8-button { width: 145px; }