@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

:root {
	--menuWidth: 350px;
	--bannerHeight: 45px;
	--total-screen-height: 100vh;
}

html,
body {
	margin: 0;
	padding: 0;
	max-height: 100%;
	height: var(--total-screen-height);
	width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
	font-family: 'Oswald', sans-serif;

	overflow-y: hidden;

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

html {
	height: var(--total-screen-height);
	position: fixed;
}

body {
	height: 100%;
	position: fixed;
}

body {
	color: #000;
	font-family: var(--fontFamily);
	font-size: 13px;

	background-color: #000000;
	background: linear-gradient(var(--darkColorDarker), var(--darkColorAccent));
	/*background: linear-gradient(var(--darkColorAccent), #fff);*/

}



@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

.progress-striped .bar {
	/* loading bar colors*/
	background-color: var(--primaryColor);
}

#sunwardLogo {
	/* z-index: 5;
	position: absolute;
	width: var(--menuWidth);
	bottom: 0px;
	opacity: 0.1;
	pointer-events: none; */
	
    z-index: 5;
    position: fixed;
    width: auto;
    max-width: 10%;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
}
.cr.function:hover{
	cursor: pointer;
}

#quoteButtonContainer:hover {
	background: rgb(221, 221, 221);
	color:#000;
	cursor: pointer;

}
#modal-loading .logo {
	max-width: 60%;
	filter: drop-shadow(0px 1px 8px #22222266);
}

/* bootbox customizations for maps */
.bootbox.modal .help-inline:empty,
.bootbox.modal #mapErrors:empty {
	display: none !important;
}

/* bootstrap alert bar at the top */
#alert_top {
	padding-top: 0.6em;
	z-index: 1005;
	position: absolute;
}

#alert_top button.close {
	margin-left: 0.25em;
	outline: none;
	font-size: 3em;
}

#info {
	/* Info bar across the top of the page */
	position: absolute;
	top: 0px;
	left: 0px;
	width: calc(100% - var(--menuWidth));
	/* background: var(--bannerBackground); */
	text-align: center;
	box-sizing: border-box;
	height: var(--bannerHeight);
	font-weight: bold;
	color: var(--bannerTextColor);
	/* display: none; */
	z-index: 1;
}

#info #logo {
	vertical-align: top;
	position: relative;
	padding-top: 3px;
	height: 80%;
	z-index: 1;

}

#info .tool-name {
	position: relative;
	height: 100%;
	top: 0;
	line-height: var(--bannerHeight);
	margin-left: 5px;
	font-size: calc(var(--bannerHeight) * 0.4);
	z-index: 1;

}

.iconButtons {
	position: absolute;
	left: 8px;
	z-index: 4;
	display: flex;
	flex-wrap: nowrap;

}

.iconButton {
	color: var(--bannerTextColor);
	font-size: calc(var(--bannerHeight) * .45);
	position: relative;
	top: 9px;
	cursor: pointer;
	/* opacity: 0.75; */
	margin-right: 8px;

}

.iconButton :hover {
	color: var(--bannerTextColor);
	opacity: 1;
}

#helpButton {
	font-size: calc(var(--bannerHeight) * .55);
	top: 10px;
}

/* slightly larger */
#overlay {
	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 #closeButton {
	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:hover {
	text-decoration: underline;
	color: #333;
}

#disclaimer {
	color: white;
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 1;
	text-shadow: 1px 1px 2px black;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

#disclaimer:hover {
	opacity: 1;
}

#alert_top {
	width: calc(100% - 50px);
	position: absolute;
	z-index: 1005;
	padding-top: 0.6em;
}

#alert_top button.close {
	margin-left: 1em;
	outline: none;
}

/* Google Maps address autocomplete modifications */
.pac-container {
	z-index: 1050;
}

.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: var(--menuWidth);
	bottom: 0;
	pointer-events: none;
}

#popup {
	display: none;
	position: absolute;
	top: 100px;
	left: 100px;
	width: calc(240px - 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 #rotateLeftButton.btn,
#popup #rotateRightButton.btn {
	margin-bottom: 10px;
}

#popup .row {
	border-bottom: 1px solid #888;
	margin-left: auto;
}

#popup .row select {
	width: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}

#popup .checkbox {
	padding-top: 5px;
}

#popup .checkbox label {
	display: inline;
	font-size: 0.7em;
	position: relative;
	top: -3px;
}

#popup .checkbox input {
	float: none;
	top: -1;
	width: 40px;
	text-align: center;
	margin-left: 15px;
}

#popup .checkbox 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;
}

#viewport3D {
	z-index: 0;
	width: calc(100% - var(--menuWidth));
	height: calc(100vh);
	position: fixed;
	top: 0;
	left: var(--menuWidth);
}

#line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw !important;
	height: 100vh !important;
	pointer-events: none;
	opacity: 0.7;
	z-index: 1000;
	box-sizing: border-box;
}

#print {
	width: 90%;
	padding: 10px 5% 10px 5%;
	display: none;
	position: absolute;
	top: 0;
	box-sizing: border-box;
}

#print h1 {
	text-align: center;
	font-size: 26px;
	display: block;
	margin-top: 35px;
	margin-bottom: 35px;
}

#print img#printLogo {
	max-width: 250px;
	height: auto;
	max-height: 125px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#print #printImage img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	margin-top: 10px;
	display: block;
}

#print #specs {
	font-size: 10px;
	font-weight: normal;
	line-height: 16px;
}

#print #specs h2 {
	font-size: 18px !important;
	line-height: 18px !important;
	margin-bottom: 0;
	padding-bottom: 0;
}

#print #specs .column {
	width: 22%;
	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: #333;
	font-size: 0.7em;
	width: 100%;
}

#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 {
	body * {
		display: none !important;
	}

	body #print,
	body #print * {
		display: block !important;
	}

	html,
	body {
		width: 8.5in;
		height: 11in;
		background: none;
	}
}

/* Undo some of bootstrap.css  */
body .dg ac,
body .dg.ac .c input[type=text] {
	line-height: normal !important;
}

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: #007ac2;
}

/* Modifications to UI menu */
.dg {
	font-size: 13px !important;
	font-family: var(--fontFamily) !important;
}

.dg.ac .dg.main {
	position: fixed;
	top: 0;
	bottom: 0;
	overflow-x: hidden;
}

.dg.ac .dg.a {
	margin: 0;
}

/* 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;
	color: #000000 !important;
}

.dg .c select {
	font: 400 14px Verdana, Arial, sans-serif;
	font-weight: bold;
}

.dg .slider {
	margin-left: 0 !important;
	border-radius: 3px;
	width: 60% !important;
}

.dg .slider-fg {
	background: var(--primaryColor) !important;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border-right: 2px solid var(--secondaryColor);
	/* border-right: thick; */
}

.dg .cr.boolean .c {
	width: 10% !important;
	float: right !important;
}

.dg .cr.boolean .c {
	width: 10% !important;
	float: right !important;
}

.dg .cr.boolean .property-name {
	width: 60% !important;
}

.dg li.folder {
	border-left: 1px solid #73818ce6 !important;
}

.dg li.folder li.folder {
	/* sub folders in dat.gui*/
	margin-left: 12px;
}

.dg li.title {
	border-radius: 0 !important;
	font-weight: bold;
	color: #2A5AEB !important;
	font-size: 1.15em;
	border: 1px solid black !important;
	border-top: 1px solid var(--secondaryColorLighter) !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	text-shadow: none !important;
	box-shadow: none !important;
	background: #000 !important;
	background-color: #000 !important;
	width: var(--menuWidth);
}

.dg li.title:hover {
	outline: none !important;
}

.dg .closed li.title {
	color: var(--lightColorDarker) !important;
}

.dg .closed li.title:hover {
	color: var(--lightColor) !important;
}

.dg li.folder li.folder .dg li.title {
	/* sub folder titles in dat.gui */
	font-weight: normal;
	padding-top: 0px !important;
	padding-bottom: 2px !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 */
}

/* change border-left colors to the same color within each folder (applies to: .cr.boolean, .cr.string, .cr.function, .cr.number) */
li.folder .dg .cr {
	border-left-color: #007ac2 !important;
	border-left: none !important;
	padding-left: 12px;
}

/* Modifications to specific UI menu controlls */
.dg.a #guiQuote,

.dg.a #guiResetCamera,
.dg.a #guiInOut,
.dg.a #guiStartOver,
.dg.a #guiTopView,
.dg.a #guiHideWalls {
	background-color: #c35709;
	color: white;
	display: inline-block;
	padding: 8px 0 !important;
	border: none;
	margin: 0;
	box-sizing: border-box;
	height: 80px;
	line-height: 15px;
	border-right: 1px solid #ffffff;
	background: black;
}


.dg.a #guiHelp,
.dg.a #guiReset,
.dg.a #guiPhoto,
.dg.a #guiPrint,
.dg.a #guiShare,
.dg.a #guiSave {
	background-color: #c35709;
	color: black;
	display: inline-block;
	padding: 24px 0px 8px 0 !important;
	border: none;
	margin: 0;
	box-sizing: border-box;
	height: 80px;
	line-height: 15px;
	border-right: 1px solid #000000;
	background: white;
	margin-top: var(--bannerHeight);

}

/* #buttonText1 {
	font-size: 13px;
	font-family: 'Lato';
	color: black;
	position: fixed;
	top: 94px;
	left: 14px;
	z-index: 2;
	font-family: var(--fontFamily);
}

#buttonText2 {
	font-size: 13px;
	font-family: 'Lato';
	color: black;
	position: fixed;
	top: 94px;
	left: 68px;
	z-index: 1;
	font-family: var(--fontFamily);
}

#buttonText3 {
	font-size: 13px;
	font-family: 'Lato';
	color: black;
	position: fixed;
	top: 94px;
	left: 125px;
	z-index: 1;
	font-family: var(--fontFamily);
} */

#quoteButtonContainer {
	width: var(--menuWidth);
	background: var(--primaryColorDarker);
	color: #fff;
	font-size: 19px;
	list-style: none;
	padding: 10px 0px 10px 0px;
	border-radius: 50px;
}

.spacing {
	margin-top: 5px;
}

.spacing2 {
	margin-top: 5px;
}

#menuContainer {
	text-decoration: none;
	width: var(--menuWidth);
	display: flex;
	justify-content: space-around;
	background-color: white;
	color: black;
	list-style: none;
	/* margin-top: var(--bannerHeight); */
}

#foldersWrapper {
	width: var(--menuWidth);
	overflow-x: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 60vh;
	text-align: left;
	align-content: stretch;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

#menuContainer>div {
	flex-grow: 1;
	flex-basis: calc(var(--menuWidth) / 6);
	max-width: calc(var(--maxMenuWidth) / 6);
	transition: flex-basis 0.3s ease;
	/* Add other styling for the boxes */
}

#menuSubContainer {
	text-decoration: none;
	width: var(--menuWidth);
	display: flex;
	justify-content: space-around;
	background-color: black;
	color: white;
	list-style: none;
}

#menuSubContainer>div {
	flex-grow: 1;
	flex-basis: calc(var(--menuWidth) / 4);
	max-width: calc(var(--maxMenuWidth) / 4);
	transition: flex-basis 0.3s ease;
	/* Add other styling for the boxes */
}

.dg.a #guiHelp,
.dg.a #guiReset,
.dg.a #guiPhoto,
.dg.a #guiPrint,
.dg.a #guiShare,
.dg.a #guiSave {
	padding: 4px 0 8px 0 !important;

}

.dg.a #guiQuote {
	width: var(--menuWidth);
	margin-bottom: 0;
	padding: 4px;
	padding: 10px;
	font-weight: bold;
	font-size: 20px;
	line-height: 24px;
	height: var(--bannerHeight);
	top: 0px;
}

.dg.a #guiStartOver,
.dg.a #guiResetCamera {
	width: 33%;
}

/* Second Row */


.dg.a #guiHelp {
	/* position: fixed;
	left: 163px;
	top: 40px; */

	width: calc(var(--menuWidth) / 6);
	z-index: 1;
	border-right: 1px solid black;
	font-weight: bold;
}

.dg.a #guiReset {
	width: calc(var(--menuWidth) / 6);
	z-index: 1;
	border-right: 1px solid black;
	font-weight: bold;
}

.dg.a #guiPhoto {
	width: calc(var(--menuWidth) / 6);
	z-index: 1;
	border-right: 1px solid black;
	font-weight: bold;
}

.dg.a #guiPrint {
	/* position: fixed;
	left: 163px;
	top: 40px; */
	width: calc(var(--menuWidth) / 6);
	z-index: 1;
	border-right: 1px solid black;
	font-weight: bold;
}

.dg.a #guiShare {
	/* position: fixed;
	left: 217px;
	top: 40px; */
	width: calc(var(--menuWidth) / 6);
	z-index: 1;
	border-right: 1px solid black;
	font-weight: bold;
}

.dg.a #guiSave {
	/* position: fixed;
	left: 271px;
	top: 40px; */
	width: calc(var(--menuWidth) / 6);
	z-index: 1;
	border-right: 1px solid white;
	font-weight: bold;
}

/* 3rd row */
.dg.a #guiTopView {
	/* position: fixed;
	left: 0px;
	top: 120px; */
	width: calc(var(--menuWidth) / 4);
	z-index: 2;
}

.dg.a #guiInOut {
	/* position: fixed;
	left: 81px;
	top: 120px; */
	width: calc(var(--menuWidth) / 4);
	z-index: 2;
}

.dg.a #guiResetCamera {
	/* position: fixed;
	left: 162px;
	top: 120px; */
	width: calc(var(--menuWidth) / 4);
	z-index: 2;
}


.dg.a #guiHideWalls {
	/* position: fixed;
	left: 243px;
	top: 120px; */
	width: calc(var(--menuWidth) / 4);
	z-index: 1;
}

.property-name:hover{
	cursor: pointer;
}
/* for 3 buttons across  */

.dg.a #guiHelp.fourAcross,
.dg.a #guiReset.fourAcross,
.dg.a #guiPhoto.fourAcross,
.dg.a #guiPrint.fourAcross,
.dg.a #guiShare.fourAcross,
.dg.a #guiSave.fourAcross {

	width: 25%;
}

/* for 4 buttons across */

.dg.a #guiHelp div span,
.dg.a #guiReset div span,
.dg.a #guiPhoto div span,
.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: 500px; */
}

.dg.a #guiHelp div span,
.dg.a #guiReset div span,
.dg.a #guiPhoto div span,
.dg.a #guiQuote div span,
.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 {
	width: 100%;
	text-align: center;
}

.dg.a #guiHelp:hover,
.dg.a #guiReset:hover,
.dg.a #guiHelp:hover,
.dg.a #guiQuote:hover,
.dg.a #guiPrint:hover,
.dg.a #guiShare:hover,
.dg.a #guiSave:hover,
.dg.a #guiResetCamera:hover,
.dg.a #guiInOut:hover,
.dg.a #guiStartOver:hover,
.dg.a #guiTopView:hover,
.dg.a #guiHideWalls:hover {
	background-color: #5bbeec !important;
	background: linear-gradient(var(--primaryColorAccent), var(--primaryColorDarker));
}

.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 #guiQuote {
	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;
	font-weight: bold;
	background: #9A241C;
}

.dg.a #guiQuote:hover {
	/*background: #ae4b67;*/
	background-color: rgb(255, 122, 21) !important;
	color: #fff;
	box-shadow: 0 4px 17px rgba(0, 0, 0, 0.2);
}

.dg.a #guiQuote:active {
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.dg.a #guiQuote {
	position: fixed;
	z-index: 2;
}

.dg.a #guiQuote:before,
.dg.a #guiQuote: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 #guiQuote:before {
	animation: pulse 3s infinite linear;
}

.dg.a #guiQuote:after {
	animation: pulse 4s 0.8s infinite linear;
}

.dg.a #guiQuote:hover:before,
.dg.a #guiQuote:hover:after {
	display: none;
}

/* Modifications to nav scroll bar */
.dg.main::-webkit-scrollbar {
	width: 14px !important;
}

/* Background */
.dg.main::-webkit-scrollbar-track {
	background: #f1f1f1 !important;
}

/* Track */
.dg.main::-webkit-scrollbar-thumb {
	background: #888 !important;
	border-radius: 0 !important;
}

/* Handle */
.dg.main::-webkit-scrollbar-thumb:hover {
	background: #aaa !important;
}

/* Handle on hover */


.dg.ac .dg.main {
	width: var(--menuWidth) !important;
	max-width: calc(100% - 340px);
	margin-top: 114px;
}


/* 
  ##Device = for cramped screens
*/
@media only screen and (max-width : 640px) {
	#popupContainer {
		right: 0;
		bottom: 0;
		top: 0;
		left: 0;
	}

	#viewport3D {
		width: 100%;
	}

	#info {
		width: 100%;
	}

	#disclaimer {
		bottom: 57vh;
	}

	body>.dg.ac {

		width: var(--menuWidth);
		height: 100%;
		box-sizing: border-box !important;
	}

	.dg.a #guiQuote {
		width: var(--menuWidth);
	}

	.dg.ac .dg.main {
		width: 100vw !important;
		/* height: calc(100% - 45vh) !important; */
		max-width: 177% !important;
		position: static;
		margin-top: 290px;

		height: calc(100% - 40vh) !important;
		position: absolute;
		/* top: 67.633%; */
	}
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
*/
@media (max-width: 480px) {
	html {
		touch-action: none;
	}
	body {
		background: #222222 !important;

	}

	#quoteButtonContainer {
		width: 100%;
		border-radius: 0px;
	}


	#menuContainer {
		text-decoration: none;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: white;
		color: black;
		margin-top: 0;
		/* list-style: none;
		position: fixed;
		top: 17%; */

	}

	#menuSubContainer {
		text-decoration: none;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: black;
		color: white;
		/* list-style: none;
		position: fixed;
		top: 34%; */
	}

	.dg.a #guiQuote {
		width: 100%;
		/* top: 20%; */
		height: auto;
		z-index: 2 !important;
		border: 0px;
		position: relative;
	}

	#viewport3D {
		height: 250px;
		width: 100%;
		position: static;
	}

	.dg li.title {
		width: 100%;
	}

	#Builder3D {
		background: var(--primaryColorDarker);
	}

	#foldersWrapper {
		width: 100%;
		height: 40vh;
		align-items: normal;
	}

	.dg.ac .dg.main {
		width: var(--menuWidth);
		margin-top: 410px;
		height: calc(100% - 65vh) !important;
	}

	#popup {
		max-height: 90vh;
	}

	.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;
	}

	.dg.a #guiPrint {
		/* position: fixed;
		left: 185px;
		top: 31.5%; */
		width: calc(100% / 6);
		z-index: 1;
		border-right: 1px solid black;
		font-weight: bold;
	}

	.dg.a #guiSave {
		/* position: fixed;
		left: 248px;
		top: 31.5%; */
		width: calc(100% / 6);
		z-index: 1;
		border-right: 1px solid black;
		font-weight: bold;
	}

	.dg.a #guiShare {
		/* position: fixed;
		left: 311px;
		top: 31.5%; */
		width: calc(100% / 6);
		z-index: 1;
		border-right: 1px solid white;
		font-weight: bold;
	}

	.dg.a #guiTopView {
		/* position: fixed;
		left: 0px;
		top: 46%; */
		width: calc(var(--menuWidth) / 3.5);
		z-index: 2;
	}

	.dg.a #guiInOut {
		/* position: fixed;
		left: 93px;
		top: 46%; */
		width: calc(var(--menuWidth) / 3.5);
		z-index: 2;
	}

	.dg.a #guiResetCamera {
		/* position: fixed;
		left: 187px;
		top: 46%; */
		width: calc(var(--menuWidth) / 3.5);
		z-index: 2;
	}

	.dg.a #guiHideWalls {
		/* position: fixed;
		left: 282px;
		top: 46%; */
		width: calc(var(--menuWidth) / 3.5);
		z-index: 1;
	}
}

/* Colors */
li.folder select {
	height: 20px;
	font-weight: bold;
	padding: 0;
	margin: 0;
	margin-top: -4px !important;
	width: 100%;
	border: 1px solid black;
	border-radius: 1px;
	color: black;
	/* border-left: 1px solid #bbb!important; */
}

li.folder select option {
	font-weight: bold;
	font-size: 16px;
	padding: 5px;
	text-shadow: none;
}

/* font-size was previously 18px */

/*li.folder select option[value="Autumn Red"]		{ background-color: #81312B; background-image: url(../images/color.gif.php?c=81312B); color: white; }*/
li.folder select option[value="Bunger Barnwood"] {
	background-color: #3d241b;
	color: white;
	background-image: url(../images/ui/BungerBarnwood.jpg);
}

li.folder select option[value="Bunger Rust"] {
	background-color: #823d1a;
	color: white;
	background-image: url(../images/ui/BungerRust.jpg);
}

li.folder select option[value="Copper Penny"] {
	background-color: #a0370d;
	color: white;
	background-image: url(../images/ui/CopperPenny.jpg);
}

li.folder select option[value="Corten"] {
	background-color: #6f3d20;
	color: white;
	background-image: url(../images/ui/Corten.jpg);
}

li.folder select option[value="Galvalume"] {
	background-color: #bebebe;
	color: white;
	background-image: url(../images/ui/Galvalume.jpg);
}

li.folder select option[value="Matte Black"] {
	background-color: #222222;
	color: white;
	background-image: url(../images/ui/MatteBlack.jpg);
}

li.folder select option[value="Stone"] {
	background-color: #8b8d7a !important;
	color: white !important;
	background-image: url(../images/ui/StackedStone.jpg) !important;
}

li.folder select option[value="Brick"] {
	background-color: #841f27 !important;
	color: white !important;
	background-image: url(../images/ui/Brick.jpg) !important;
}

/* 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.AutumnRed		{ background-color: #81312B; background-image: url(../images/color.gif.php?c=81312B); color: white; }*/
li.folder select.BungerBarnwood {
	background-color: #3d241b;
	background-image: url(../images/ui/BungerBarnwood.jpg);
	color: white;
}

li.folder select.BungerRust {
	background-color: #823d1a;
	background-image: url(../images/ui/BungerRust.jpg);
	color: white;
}

li.folder select.CopperPenny {
	background-color: #a0370d;
	background-image: url(../images/ui/CopperPenny.jpg);
	color: white;
}

li.folder select.Corten {
	background-color: #6f3d20;
	background-image: url(../images/ui/Corten.jpg);
	color: white;
}

li.folder select.Galvalume {
	background-color: #bebebe;
	background-image: url(../images/ui/Galvalume.jpg);
	color: white;
}

li.folder select.MatteBlack {
	background-color: #222222;
	background-image: url(../images/ui/MatteBlack.jpg);
	color: white;
}

li.folder select.Stone {
	background-color: #8b8d7a !important;
	background-image: url(../images/ui/StackedStone.jpg) !important;
	color: white !important;
}

li.folder select.Brick {
	background-color: #841f27 !important;
	background-image: url(../images/ui/Brick.jpg) !important;
	color: white !important;
}


/* Modal Forms */
form {
	margin: 0;
}

form label {
	font-size: 18px !important;
	color: #555;
	padding-left: 5px;
	padding-bottom: 2.5px;
}

form select {
	font-size: 18px;
	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: #c1c1c1;
	-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 form label.with-placeholder {
	margin-top: 0px;
	margin-bottom: 0;
	font-size: 14px !important;
	padding-bottom: 0;
	margin-top: -8px;
	visibility: hidden;
}

div.modal form div.column:focus-within label.with-placeholder {
	visibility: visible;
}

div.modal input,
div.modal textarea,
div.modal select {
	width: calc(100% - 14px);
}

div.modal select {
	font-weight: normal;
	outline: none;
	color: #555;
	font-size: 14px;
	width: 100%;
}

div.modal .checkbox-large {
	width: 20px;
	height: 20px;
	margin-top: 0;
	margin-right: 8px;
}

div.modal-footer .btn {
	font-size: 24.5px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-family: var(--fontFamily);
}

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,
form select.error {
	background-color: #ffcccc !important;
}

div.modal .building-location {
	background-color: #eaeaea;
	border-radius: 3px;
	padding: 10px;
	position: relative;
}

div.modal .building-location h5 {
	margin-top: 0;
}

div.modal .modal-body {
	max-height: calc(95vh - 210px) !important;
	font-family: var(--fontFamily);
}

#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 {
	width: 325px;
	height: auto;
	top: 12%;
	background-color: var(--primaryColor);
}

/* was: background-color: rgba(223, 242, 191, 0.6); border: 2px solid #4F8A10; */
div#modal-success.modal button.close {
	color: white;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	position: absolute;
	line-height: 0;
	top: 10px;
	right: 10px;
	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: 12px;
}

div#modal-success.modal div.modal-header h3 {
	text-shadow: 1px 1px 6px black;
	font-size: 30px;
	color: white;
}

div#modal-success.modal div.modal-body {
	text-align: center;
	font-size: 18px;
	color: white;
	line-height: 1.35em;
}

div#modal-success.modal div.modal-body .video {
	margin-top: 15px;
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}

div#modal-success.modal div.modal-body .video iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

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;
}

#slider {
	height: 5px;
	margin-top: 11px;
}

#quoteName{
	position: fixed;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border: 1px solid black;
    border-radius: 8px;
    width: 30%;
    height: 20%;
    background-color: #f5f5f5;
    color: black;
    padding: 30px;
	font-size:30px;
}

#quoteNameLoading{
	position: fixed;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 2;
    border: 1px solid black;
    border-radius: 8px;
    width: auto;
    height: auto;
    background-color: #f5f5f5;
    color: black;
    padding: 30px;
	font-size:26px;
	line-height: 1.6;
}

#quoteNameSubmitted{
	position: fixed;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 2;
    border: 1px solid black;
    border-radius: 8px;
    width: auto;
    height: auto;
    background-color: #f5f5f5;
    color: black;
    padding: 30px;
	line-height: 1.6;
}

#quoteNameBox{
	width:70%;
	margin-top:30px;

}

#quoteNameClose{
	position:fixed;
	left: 93%;
    top: 5%;
	cursor: pointer;
	color:gray;
	font-size:30px;
}

#quoteNameSubmittedClose{
	position:fixed;
	left: 93%;
    top: 5%;
	cursor: pointer;
	color:gray;
	font-size:30px;
}

.hide {
	display: none;
  }

  .hideIP {
	display: none !important;
  }
.commented {
	display:none;
	position:fixed;
}
  
@media screen and (max-width: 931px) {
	#quoteName{
		
		font-size:15px;
	}
	#quoteNameBox{
		width:70%;
		margin-top:0px;
	
	}
	#sunwardLogo {
    z-index: 5;
    position: fixed;
    width: auto;
    max-width: 15%;
    top: 0px;
    left: 0px;
    pointer-events: none;
}
  }


#helpMenu{
	z-index:6;
	width:80%;
	height:80%;
	position:fixed;
	transform: translate(27%, 9%);
}

.x-button {
	width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;
    background-color: red;
    border: 3px solid black;
    border-radius: 8px;
  }
  
  .xbar {
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: white;
	top: 50%;
	transform: translateY(-50%);
  }
  
  .xbar:first-child {
	transform: rotate(45deg);
  }
  
  .xbar:last-child {
	transform: rotate(-45deg);
  }
  
.new-fade {
    opacity: 0;
    filter: alpha(opacity=0);
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
	z-index:5;
	pointer-events: none;
}
	/* opacity: .8;
    filter: alpha(opacity=80) */

.size-field.size-width {
    display: flex;
    width: max-content;
    margin: auto;
    gap: 7px;
    align-items: center;
}

.size-field.size-height {
    display: flex;
    width: max-content;
    margin: auto;
    gap: 7px;
    align-items: center;
}

@media screen and (min-width:767px) {
div#quoteButtonContainer {
	margin-left: auto;
	position: absolute !important;
	left: 22px;
	top: 12px;
}

div#menuContainer {
    margin-left: auto;
}

div#menuSubContainer {
    margin-left: auto;
}

.dg.ac .dg.main {
    right: 0px;
}

#viewport3D {
    right: var(--menuWidth);
    left: inherit;
}

#info {
    width: 100%;

}
}