html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; -webkit-text-size-adjust: none; }
body {
	color: #000;
	font-family: 'Lato', sans-serif;
	font-size:13px;
	
	overflow: hidden;
	position:fixed;
	
	background-color: #ccc; /* fall back for ie11 */
	background: linear-gradient(#ccc, var(--menuBackgroundColor));
	
	/* overscroll-behavior-y: contain; /* Disables pull-to-refresh but allows overscroll glow effects. */
	overscroll-behavior-y: none; /* Disables pull-to-refresh and overscroll glow effect. Still keeps swipe navigations. */
	overscroll-behavior-x: none; /* Disables swipe navigations. */
}

#builder {
	position: fixed;
	top: 32px;
	left: 0px;
	right: 300px;
	bottom: 0px;
}
#builder canvas {
	position: absolute;
	width: 100%;
	height: 100%;
}

#info { /* Info bar across the top of the page */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 6px;
	background-color: rgba(13,34,64,0.91);
	text-align:center;
	font-size: 17px;
	color: #fff;
	background: top left/auto 100%;
}
#info #logo { vertical-align: top; position: relative; height: 16px; width: auto; max-width: 100%; top: 2px; margin-right: 6px; }

#helpButton {
  color: #93a1b3; position: absolute; top: 6px; left: 4px; font-size: 1.25em;
  z-index: 1004;
  cursor: pointer;
}
#helpButton:hover { color:#d1dbe7; }
#helpOverlay {
  opacity: 0;
  display: none;
  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;
}
#help {
  opacity: 0;
  display: none;
  transition: visibility 0s 0.2s, opacity 0.2s ease;
  font-size:1.5em;

  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  min-width:250px;
  max-width:400px;
  padding: 1em 2em;
  background-color:#ddd;
  background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
  border-radius: 4px;
  z-index:1005;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1.2em;
  border: 3px solid #999;
}
#help #closeHelpButton {
	color: #999;
	font-size: 1.5em;
	position: absolute;
	top: 4px;
	right: 5px;
	cursor: pointer;
}
#help h1 {
  font-size: 1.25em;
  font-weight: bold;
  color: #666;
  position: relative;
  margin-bottom: 0;
  line-height: 1.2em;
}
#help h2 {
  font-size: 1.1em;
  color: #666;
  margin-top: 0;
  line-height: 1.2em;
}
#help p, #help ol, #help ul {
  text-align: left;
  font-size: 0.75em;
  line-height: 1.2em;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Verdana, Arial, sans-serif;
}
#help a {
  color: #666; font-size: 0.55em; text-decoration: none;
  font-family: Verdana, Arial, sans-serif;
  /* position: absolute; box-sizing: border-box; display: block; width: auto; bottom: 25px; */
}

#help a { display: block; }
#help .fa-cubes { text-decoration: none!important; font-size: 275%; line-height: 25px; color: #999; display: block; margin-top: 10px; margin-left: auto; margin-right: auto; }
#help a:hover { color: #333; }
#help a:hover .fa-cubes { color: #666; }
#help a:hover span { text-decoration: underline; }

#helpModal .modal-footer { text-align: center; }
#helpModal .modal-footer a { color: #666!important; }
#helpModal .modal-footer a:hover { color: #444!important; }

.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 */
}

#line {
	/*display: none;*/
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0.7;
	z-index: 1000;
}

#popupContainer { z-index: 1001; position: absolute; top: 0; left: 0; right: 300px; bottom: 0; pointer-events: none; }
#popup {
	display: none;
	position: absolute;
	top: 100px;
	left: 100px;
	width: calc(250px - 10px - 4px);

	background-color: rgba(55,55,55,0.75);
	border-radius: 5px;
	color: white;
	/*box-sizing: border-box;*/
	margin-top: 28px;
	border: 2px solid #ccc;
	/*padding: 15px;*/
	padding: 5px;
	font-size: 1.25em;
	text-align: center;
	z-index: 1002;
	
	max-height: calc(85% - 40px);
	
  -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 */
}
#popup .scrollContainer {
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}
#popup .scrollContainer::-webkit-scrollbar { width: 8px; margin-left:50px; } /* width */
#popup .scrollContainer::-webkit-scrollbar-track { background: #f1f1f1; } /* Track */
#popup .scrollContainer::-webkit-scrollbar-thumb { background: #888; } /* Handle */
#popup .scrollContainer::-webkit-scrollbar-thumb:hover { background: #aaa; } /* Handle on hover */

#popup:hover { background-color: rgba(50,50,50,0.8); border: 2px solid #ddd; cursor: move; }
#popup input { font-size: 1.2em; line-height: 1.5em; width: 25%; margin: 5px; position: relative; top: -2px; font-size: 1.1em; line-height: auto; padding-left: 2px; padding-right: 2px; text-align: center; }
#popup input.inches { width: 30%; }
#popup .btn {padding-top: 0.2em; font-size: 0.85em; margin-top: 10px; }
#popup .btn i { font-size: 1.2em; position: relative; top: 1px;}
#popup .row { border-bottom: 1px solid #888; margin-left: auto; }
#popup .row select { width: auto; margin-top: 5px; margin-bottom: 5px; }
#popup .form-check { padding-top: 5px; }
#popup .form-check label { display: inline; position: relative; top: -3px; font-size: 0.65em; }
#popup .form-check input { float: none; top: -1; width: 40px; text-align: center; margin-left: 15px; height: 20px; }
#popup .form-check label, #popup .checkbox input { transform: scale(1.5); display: inline-block; padding-left: 10px; padding-right: 10px; }
#closePopupWindowButton {
	position: absolute;
	top: -4px;
	right: -6px;
	color: #dedede;
	border-radius: 10%;
	background-color: #333;
	cursor: pointer;
}
#closePopupWindowButton:hover {
	color: white;
}

#oldie { /* Container for WebGL unsupported message */
	font-size: 30px!important;
	padding: 50px 0 0 0!important;
	width: auto!important;
	font-family: 'Oswald', sans-serif!important;
}

a {
	color: #0af;
}

#builder { z-index: 0; }
#print { width: 90%; padding: 10px 5% 10px 5%; display: none; position: absolute; top: 0; }
#print h1 { text-align: center; font-size: 26px; display: block; margin-top: 35px; margin-bottom: 35px; }
#print img#printLogo { width: 135px; height: auto; position: absolute; left: 40px;  display: block; }
#print #printImage img { width: auto; height: auto; max-width: 100%; max-height: 400px; margin-left: auto; margin-right: auto; margin-bottom: 20px; display: block; }
#print #specs { font-size: 12px; font-weight: normal; line-height: 16px; }
#print #specs h2 { font-size: 18px!important; line-height: 18px!important; }
#print #specs .column { width: 21.75%; margin-right: 1.25%; background-color: #eee; float: left; padding: 0 1% 1% 1%; min-height: 165px; }
#print #specs .column:last-child { margin-right: 0; }
#print #printFooter { position: absolute; top: 98%; width: 90%; }
#print #printLink { position: absolute; left: 0; top: -0px; font-color: #999; }
#print ul { margin: 0; padding: 0; display: block; width: 100%; font-size: 20px; margin-top: 30px; padding-top: 10px; padding-bottom: 10px; list-style: disc; border-top: 1px solid #666; border-bottom: 1px solid #666; text-align: center; }
#print ul li { display: inline; padding-right: 26px; list-style: disc; position: relative; }
#print ul li::before { content: "\2022"; font-size: 24px; position: absolute; left: -20px; top: -4px; }
#print ul li:first-child::before { content: ""; }
#print ul li:first-child { list-style-type: none; }
#print ul li:last-child { padding-right: 0; }
#print h3 { text-align: center; font-size: 23px; display: block; font-weight: normal; line-height: 23px; }
@media print {
    /*#builder, #navigation, #navBtn, #info, .dg { display: none; }*/
    body * { display: none; }
    body #print, body #print * { display: block; }
    html, body { width: 8.5in; height: 11in; }
}

/* Undo some of bootstrap.css  */
body .dg ac, body .dg.ac .c input[type=text] { line-height: normal!important; }
body #info, body .dg.ac, body .dg ac * {
	-webkit-box-sizing: unset!important;
	-moz-box-sizing: unset!important;
	box-sizing: unset!important;
}
.bootstrap-switch { vertical-align: inherit!important; margin-top: 4px; }
.bootstrap-switch-container { margin-top: -3px!important; }
.bootstrap-switch-wrapper { outline:none!important; }
.bootstrap-switch-small { min-width: 74px!important; height: 18px!important; border-radius: 0!important; }
.bootstrap-switch-handle-on, .bootstrap-switch-handle-off { border-radius: 0!important; }
.bootstrap-switch-handle-on { background: transparent; background-color: #2fa1d6; }

/* Modifications to UI menu */
.dg { font-size: 13px!important; font-family: 'Lato', sans-serif!important; }
.dg.ac .dg.main { position: fixed; top: 0; right: 0; bottom: 0;  }
.dg.ac .dg.a { margin: 0; margin-top: 32px; } /* move dat.gui menu down to accomodate info bar */
.dg.a .save-row { top: 30px!important; }
.dg.a.has-save ul { margin-top:0!important; } /* fix for default style of adding margin above each dat.gui folder, not just the first one */
.dg.a.has-save > ul { margin-top:27px!important; } /* fix - same as above */
.dg .c input[type=text] { margin-top: 2px!important; padding: 0px!important; padding-left: 4px!important; }
.dg .c select { font: 400 14px Verdana, Arial, sans-serif; font-weight: bold; }
.dg .slider { margin-left: 0!important; }

.dg .c input[type="checkbox"] { margin-top: 0px!important; }
.dg .cr.function .property-name { width: auto; }
.dg .message .property-name { width: 100%; font-size: 12px; text-align: center; background-color: #ced1d7; }
.dg .message.delete .property-name {  }
.dg .message.delete.true .property-name { background-color: #ffcccc; }
.dg .message {  }
.dg.a div.close-button {
	background: -moz-linear-gradient(center top, #c8c8c8 34%, #b4b4b4 71%);
	background: -ms-linear-gradient(top, #c8c8c8 34%, #b4b4b4 71%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(34%, #c8c8c8), color-stop(71%, #b4b4b4));
	box-shadow: inset 1px 0 9px 0 #dfdfdf;
	text-shadow: 1px 0 1px white;
	display: none; /* removed close button */
}

	
li.folder .dg .cr { border-left-color: var(--navSliderColor)!important; } /* change border-left colors to the same color within each folder (applies to: .cr.boolean, .cr.string, .cr.function, .cr.number) */
.dg .c .slider-fg { background: var(--navSliderColor)!important; } /* Chage color of nav menu sliders */
.dg .cr.number input[type=text] { color: var(--navTextColor)!important; }
.dg .cr.number input[type=text]:hover { color: black; }
.dg li.cr:hover { background-color: var(--navRowHighlightColor)!important; } /* row highlight color */
.dg li.title:hover { outline-color: var(--navRowHighlightColor)!important; } /* nav menu item outline color */

/* Modifications to specific UI menu controlls */
.dg.a #guiEstimate, .dg.a #guiPrint, .dg.a #guiShare, .dg.a #guiSave, .dg.a #guiResetCamera, .dg.a #guiLookInside, .dg.a #guiStartOver, .dg.a #guiTopView, .dg.a #guiHideWalls { background-color: #007ac2; color: white; display: inline-block; padding: 8px 0!important; border: none; margin: 0; box-sizing: border-box; height: auto; line-height: 15px; border-right: 1px solid #5a7492; background: linear-gradient(#3f5977, #052850); }
.dg.a #guiEstimate { width: calc(100%); margin-bottom: 0; padding: 4px; padding: 10px; font-size: 20px; line-height: 24px; }
.dg.a #guiPrint { width: calc(33.3%); }
.dg.a #guiShare { width: calc(33.3%); }
.dg.a #guiSave { width: 33.3%; }
.dg.a #guiResetCamera, .dg.a #guiLookInside, .dg.a #guiTopView { width: 33.3%; }
.dg.a #guiStartOver, .dg.a #guiHideWalls { width: 33.3%; }
.dg.a #guiPrint div span, .dg.a #guiShare div span, .dg.a #guiSave div span, .dg.a #guiResetCamera div span, .dg.a #guiLookInside div span, .dg.a #guiStartOver div span, .dg.a #guiTopView div span, .dg.a #guiHideWalls div span { /* word-spacing: 500px; */ }
.dg.a #guiEstimate div span, .dg.a #guiPrint div span, .dg.a #guiShare div span, .dg.a #guiSave div span, .dg.a #guiResetCamera div span, .dg.a #guiLookInside div span, .dg.a #guiStartOver div span, .dg.a #guiTopView div span, .dg.a #guiHideWalls div span { width: 100%; text-align: center; }
.dg.a #guiEstimate:hover, .dg.a #guiPrint:hover, .dg.a #guiShare:hover, .dg.a #guiSave:hover, .dg.a #guiResetCamera:hover, .dg.a #guiLookInside:hover, .dg.a #guiStartOver:hover, .dg.a #guiTopView:hover, .dg.a #guiHideWalls:hover { background-color: #5bbeec!important; background: linear-gradient(#537193, #0c3564); }
.dg.a #guiHideWalls.disabled { background-color: #6199bb; color: #9dc0d6; background: linear-gradient(#77a8c5, #567a90); pointer-events: none; }

/* Pulse the Quote Button */
@keyframes pulse {
	 0% { transform: scale(0); opacity: 0; }
	 33% { transform: scale(1); opacity: 0.6; }
	 100% { transform: scale(3); opacity: 0; }
}
 .dg.a #guiEstimate {
	align-items: center;
	box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.1);
	text-decoration: none;
	transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
	will-change: transform;
	background: 
	linear-gradient(#3f5977, #052850);
}
 .dg.a #guiEstimate:hover {
	/*background: #ae4b67;*/
	background-color: rgb(255, 122, 21) !important;
	background: linear-gradient(#537193, #0c3564);
	color: #fff;
	box-shadow: 0 4px 17px rgba(0, 0, 0, 0.2);
}
 .dg.a #guiEstimate:active {
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
 .dg.a #guiEstimate {
	position: relative;
}
 .dg.a #guiEstimate:before, .dg.a #guiEstimate:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, .25);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	opacity: 0;
	margin: auto;
}
 .dg.a #guiEstimate:before {
	animation: pulse 3s infinite linear;
}
 .dg.a #guiEstimate:after {
	animation: pulse 4s 0.8s infinite linear;
}
 .dg.a #guiEstimate:hover:before, .dg.a #guiEstimate:hover:after {
	display: none;
}

/* 
  ##Device = for cramped screens
*/
@media (max-width: 768px) {
	#popupContainer { right: 0; bottom: 0; top: 0; left: 0; }
	#builder { position: fixed; }
	#info { position: fixed; }
}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
*/
@media (max-width: 480px) {
	html { touch-action: none; }
	#builder { top: 0px; }
	#popup { max-height: 40%; }
	#builder canvas {  }
	body .dg {
		width: auto!important;
		margin:0;
		padding:0;
		position: fixed:
		top: 28px;
		left: 0;
		right: 0;
		bottom: 100%;
	}
	.dg.ac .dg.main {
		margin:0;
		padding:0;
		position: fixed;
		top: 34%;
		left: 0;
		right: 0;
		bottom: 0%;
		height; 300px;
	}
	.dg.a #guiPrint div span, .dg.a #guiShare div span, .dg.a #guiSave div span, .dg.a #guiResetCamera div span, .dg.a #guiInOut div span, .dg.a #guiStartOver div span, .dg.a #guiTopView div span, .dg.a #guiHideWalls div span { word-spacing: normal; }
}

/* Colors */
li.folder select { height: 26px; font-weight: bold; padding: 0; margin: 0; margin-top: -4px!important; width: 100%; border-left: 1px solid #bbb!important; }
li.folder select option { font-weight: bold; font-size: 14px; padding: 5px; text-shadow: none; }
li.folder select option[value="Acrylic Coated"]	{ background-color: #adadad; background-image: url(../images/ui/AcrylicCoated.png); color: white; text-shadow: 0px 0px 10px black;}
li.folder select option[value="Black"]		{ background-color: #000000; background-image: url(../images/color.gif.php?c=000000); color: white; }
li.folder select option[value="White"]		{ background-color: #ffffff; background-image: url(../images/color.gif.php?c=ffffff); color: black; }
li.folder select option[value="Pewter Gray"]	{ background-color: #9b9b9b; background-image: url(../images/color.gif.php?c=9b9b9b); color: white; }
li.folder select option[value="Clay"]		{ background-color: #a19b85; background-image: url(../images/color.gif.php?c=a19b85); color: white; }
li.folder select option[value="Earth Brown"]	{ background-color: #674732; background-image: url(../images/color.gif.php?c=674732); color: white; }
li.folder select option[value="Slate Blue"]	{ background-color: #386688; background-image: url(../images/color.gif.php?c=386688); color: white; }
li.folder select option[value="Barn Red"]	{ background-color: #8d2715; background-image: url(../images/color.gif.php?c=8d2715); color: white; }
li.folder select option[value="Evergreen"]	{ background-color: #2b432b; background-image: url(../images/color.gif.php?c=2b432b); color: white; }
li.folder select option[value="Pebble Beige"]	{ background-color: #fdf5d1; background-image: url(../images/color.gif.php?c=fdf5d1); color: black; }
li.folder select option[value="Vintage Burgundy"]{ background-color: #290916; background-image: url(../images/color.gif.php?c=290916); color: white; }
li.folder select option[value="Quaker Gray"]	{ background-color: #52504f; background-image: url(../images/color.gif.php?c=52504f); color: white; }
li.folder select option[value="Antique Brown"]	{ background-color: #361c00; background-image: url(../images/color.gif.php?c=361c00); color: white; }
li.folder select option[value="Sandstone"]	{ background-color: #dbccad; background-image: url(../images/color.gif.php?c=dbccad); color: black; }
li.folder select option[value="Rawhide"]	{ background-color: #b19a66; background-image: url(../images/color.gif.php?c=b19a66); color: black; }

/* repeat the colors for the parent select box - these have non-alphanumeric characters removed */
li.folder select { border: none; text-shadow: none; }
li.folder select.AcrylicCoated		{ background-color: #adadad; background-image: url(../images/ui/AcrylicCoated.png); color: white; text-shadow: 0px 0px 10px black; }
li.folder select.Black			{ background-color: #000000; background-image: url(../images/color.gif.php?c=000000); color: white; }
li.folder select.White			{ background-color: #ffffff; background-image: url(../images/color.gif.php?c=ffffff); color: black; }
li.folder select.PewterGray		{ background-color: #9b9b9b; background-image: url(../images/color.gif.php?c=9b9b9b); color: white; }
li.folder select.Clay			{ background-color: #a19b85; background-image: url(../images/color.gif.php?c=a19b85); color: white; }
li.folder select.EarthBrown		{ background-color: #674732; background-image: url(../images/color.gif.php?c=674732); color: white; }
li.folder select.SlateBlue		{ background-color: #386688; background-image: url(../images/color.gif.php?c=386688); color: white; }
li.folder select.BarnRed		{ background-color: #8d2715; background-image: url(../images/color.gif.php?c=8d2715); color: white; }
li.folder select.Evergreen		{ background-color: #2b432b; background-image: url(../images/color.gif.php?c=2b432b); color: white; }
li.folder select.PebbleBeige		{ background-color: #fdf5d1; background-image: url(../images/color.gif.php?c=fdf5d1); color: black; }
li.folder select.VintageBurgundy	{ background-color: #290916; background-image: url(../images/color.gif.php?c=290916); color: white; }
li.folder select.QuakerGray		{ background-color: #52504f; background-image: url(../images/color.gif.php?c=52504f); color: white; }
li.folder select.AntiqueBrown		{ background-color: #361c00; background-image: url(../images/color.gif.php?c=361c00); color: white; }
li.folder select.Sandstone		{ background-color: #dbccad; background-image: url(../images/color.gif.php?c=dbccad); color: black; }
li.folder select.Rawhide		{ background-color: #b19a66; background-image: url(../images/color.gif.php?c=b19a66); color: black; }

/* Modal Forms */
form { margin: 0; }
form label { font-size: 24.5px !important; color: #555; padding-left: 5px; padding-bottom: 10px; }
form select { font-size: 24.5px; font-weight: bold; }
form.sign-up-form input { font-size: 24.5px !important; font-weight: bold; width: calc(100% - 12px); height: auto !important; background-color: #f8f8f8 !important; color: black !important; }
form .dropdown ul { margin-left: 0; }
form .dropdown {
	width: 100%;
	border: 1px solid #cccccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
	-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
	-o-transition: border linear 0.2s, box-shadow linear 0.2s;
	transition: border linear 0.2s, box-shadow linear 0.2s;
	font-size: 24.5px !important;
	font-weight: bold;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
form .dropdown li { border-bottom: 1px solid rgba(200, 200, 200, 0.8); }
form .dropdown:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
form .dropdown span, form .dropdown li { font-size: 24.5px !important; }
div.modal { max-width: 90%; transform: translate(-50%, 0%); margin-left: auto; }
div.modal-header {
	background-color: #f5f5f5;
	-webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px;
	border-top-left-radius: 6px; border-top-right-radius: 6px;
}
div.modal label { margin-top: 5px; margin-bottom: 0; }
div.modal input, div.modal textarea, div.modal select { width: calc(100% - 14px); }
div.modal-footer .btn { font-size: 24.5px; padding-top: 10px; padding-bottom: 10px; }
div.modal-footer .btn:hover, div.modal-footer .btn:focus { color: white; }
div.modal p { font-size: 24.5px; color: #555; padding-left: 5px; margin-bottom: 0; margin-top: 5px; }
div.modal { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
div.modal form div.group { clear:both; }
div.modal form div.column.half { width: calc(50% - 10px); float: left; }
div.modal form div.column.quarter { width: calc(25% - 20px); float: left; }
div.modal form div.column.quarter.right { width: calc(25% - 10px); float: left; }
div.modal form div.column.left { margin-right: 10px; }
div.modal form div.column.middle { margin-right: 10px; margin-left: 10px; }
div.modal form div.column.right { margin-left: 10px; }
div.modal form label.error { color: red; font-size: 15px!important; line-height: initial; margin-bottom: 0; padding-bottom: 0; margin-top: 0; }
div.modal form input.error, div.modal form select.error { background-color: #ffcccc!important; }
div.modal form select { font-size: 15px; font-weight: bold; }

#modal-share .modal-footer input#shareLink { float: left; width: 27%; margin-top: 6px; margin-bottom: 0; cursor: text!important; }
#modal-share .modal-footer label { float: left; font-size: 17px!important; margin-top: 11px; margin-right: 5px; }

div#modal-success.modal { height: 200px; top: 12%; background-color: var(--menuBackgroundColor); } /* was: background-color: rgba(223, 242, 191, 0.6); border: 2px solid #4F8A10; */
div#modal-success.modal button.close {
	color: white;
	background-color: #363636;
	width: 35px; height: 35px; border-radius: 50%;
	position: absolute;
	line-height: 0;
	top: 25px;
	right: 25px;
	opacity: 0.7;
	border: 2px solid white!important;
}
div#modal-success.modal button.close:hover { opacity: 0.85; }
div#modal-success.modal button.close strong { position: relative; top: -3px; font-size: 24px; font-weight: normal; }
div#modal-success.modal div.modal-header { background: transparent; border: none; padding: 0; text-align: center; margin-top: 5%; margin-bottom: 5%; }
div#modal-success.modal div.modal-header h3 { font-size: 30px; color: black; }
div#modal-success.modal div.modal-body { text-align: center; font-size: 18px; color: black; }

p.success, p.fail { border-bottom: 1px solid; border-top: 1px solid; font-size: 20px!important; padding: 5px; text-align: center; }
p.success { display: block; color: #4F8A10!important; background-color: #DFF2BF; border-color: #4F8A10; }
p.fail { display: block; color: #D8000C!important; background-color: #FFBABA; border-color: #D8000C; }

/* Touch GUI */
#touchGUI { top:50%;left:50%;	position: absolute; display: none; background-image: url("../images/TouchControls/scaleArrows.png"); background-size: 100% 100%; background-repeat: no-repeat; width: 300px; height: 300px; color: white; transform: translate(-50%,-50%); }
#touchGUI span { font-size: 24px; text-align: center; position: absolute; transform: translate(-50%,-50%); }
#touchGUI span.x { top: 50%; left: 78%; }
#touchGUI span.y { top: 23%; left: 50%; }


/* Mobile only styles */
	/* Smartphones (portrait and landscape) ----------- */
	/* @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { */
	@media only screen and (max-width : 640px) {
		div#navigation .content { font-size: 14px; line-height: 17px; }
		div#navigation h3 { font-size: 16px; line-height: 24px; }
		div#navigation #navReset { position: relative; left: 0; transform: none; }
		div#navigation button { display: block; left: 0; position: relative; transform: none; float: none; width: calc(100% - 8px); height: auto; padding: 4px; }
	}