:root { /* Variables */
	--headerHeight: 87px; /* 87px */
	--footerHeight: 60px; /* 120px */
	--menuWidth: 425px; /* 425px */
}
html, body { position: fixed; top: 0; left; 0; right: 0; bottom: 0; margin:0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; -webkit-text-size-adjust: none; background-color: #363636; }
body {
	color: #000;
	/*font-family: 'Oswald', sans-serif;*/
	font-size:13px;

	background-color: #fff;
	overflow: hidden;
}

#builder, #popupContainer {
	z-index: 1;
	position: absolute;
	left: 0;
	right: 425px;
	right: var(--menuWidth);
	top: 87px;
	top: var(--headerHeight);
	bottom: 0;
	min-height: 1px;
	min-width: 1px;
}
#builder #viewport3D { width: 100%!important; height: 100%!important; }

#line {
	pointer-events: none;
	opacity: 0.7;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

#info { /* Info bar across the top of the page */
	z-index: 1;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	/*padding: 5px;*/
	height: 87px;
	height: var(--headerHeight);
	background-color: #000000; /* was #ccc */
	text-align:center;
	border-bottom: 7px solid #f0b310;
	box-sizing: border-box!important;
	user-select: none;
}
#alert_top {
	position: absolute;
	z-index: 2;
}

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

	background-color: rgba(55,55,55,0.75);
	border-radius: 5px;
	color: white;
	/*box-sizing: border-box;*/
	margin: 5px;
	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: 25%; }
#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 .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;
}


/* Print styles */
.print { display: none; }
.print table.paging { width: 100%; }
.print header, .print footer, .print table.paging thead.header-spacing th, .print table.paging tfoot.footer-spacing td {
	height: 1.25in;
	width: 100%;
	text-align: center;
}
.print table.paging thead.header-spacing th { height: 1.25in; }
.print header {
	padding-bottom: 0.25in;
	position: fixed;
	width: 100%;
	top: 0;
}
.print header img { height: 100%; width: auto; }
.print footer {
	height: 1in;
	margin-top: 0.25in;
	position: fixed;
	width: 100%;
	bottom: 0;
}
.print footer ul { margin: 0; padding: 0; display: block; width: 100%; font-size: 18px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; list-style: disc; border-top: 1px solid #666; border-bottom: 1px solid #666; text-align: center; }
.print footer ul li { display: inline; padding-right: 26px; list-style: disc; position: relative; }
.print footer ul li::before { content: "\2022"; font-size: 20px; position: absolute; left: -20px; top: -4px; }
.print footer ul li:first-child::before { content: ""; }
.print footer ul li:first-child { list-style-type: none; }
.print footer ul li:last-child { padding-right: 0; }
.print tbody td.print-content { padding: 0in 0.5in; }
.print-content-image img {
	max-width: 100%;
	max-height: 5in;
	width: auto;
	height: auto;
	margin: 0 auto 0.25in auto;
	border: 1px solid black;
	box-sizing: border-box;
	display: block;
}
.print-content-text { margin-bottom: 0.25in; }
.print-content-text h3 {
	font-size: 0.25in;
	text-transform: uppercase;
	font-weight: bold;
}
.print-content-table table td, .print-content-table table th {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
/* print text content columns */
.print-content-table {
	columns: auto;
	columns: 3;
}


@media print {
	html, body { margin: 0; padding: 0; -webkit-print-color-adjust: exact !important; min-height: 7.5in; min-width: 7.5in; width: 100%; height: 100%; position: relative; margin-left: auto; margin-right: auto; overflow: unset; background: none; }
	
	body *:not(.print):not(.print *) { display: none!important; }
	.print { display: block!important; }
	
	@page {
		/* Setting a specific size and margin in chrome causes issues with the scale of the page. 100% width is no longer the full width of the page, but some arbitrary reduced value */
		/* size: letter portrait; */
		/* margin: 0.5in; */
	}
}

/* Undo some of bootstrap.css  */
.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; }

/* Colors */
li.folder select {height: 32px;font-weight: bold;padding: 0;margin: 0;margin-top: -3px!important;width: 100%;/* border-left: 1px solid #bbb!important; */border: 2px solid #888888!important;border-radius: 0;}
li.folder select option { font-weight: bold; font-size: 12px; padding: 5px; text-shadow: none; }
li.folder select option[value="Galvalume"]	{ background-color: #888; background-image: url(../../images/ui/Galvalume.html); color: white; text-shadow: 0px 0px 10px black;}
li.folder select option[value="Black"]		{ background-color: #090606; color: white; }
li.folder select option[value="Charcoal"]	{ background-color: #434343; color: white; }
li.folder select option[value="Taupe"]		{ background-color: #7a7d6a; color: white; }
li.folder select option[value="Gray"]		{ background-color: #a0a298; color: black; }
li.folder select option[value="Alamo"]		{ background-color: #e2eae7; color: black; }
li.folder select option[value="Briliant Arctic"]{ background-color: #fcffff; color: black; }
li.folder select option[value="Briliant/Arctic"]{ background-color: #fcffff; color: black; }
li.folder select option[value="Forest"]		{ background-color: #0c2b1c; color: white; }
li.folder select option[value="Crimson"]	{ background-color: #a31116; color: white; }
li.folder select option[value="Rustic"]		{ background-color: #701f1c; color: white; }
li.folder select option[value="Burgundy"]	{ background-color: #31151e; color: white; }
li.folder select option[value="Gallery"]	{ background-color: #153351; color: white; }
li.folder select option[value="Ivory"]		{ background-color: #f4e0bd; color: black; }
li.folder select option[value="Light Stone"]	{ background-color: #c6c8aa; color: black; }
li.folder select option[value="Tan"]		{ background-color: #a08b67; color: black; }
li.folder select option[value="Brown"]		{ background-color: #3e291f; color: white; }
li.folder select option[value="Burnished Slate"]{ background-color: #363027; color: white; }

/* 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.Galvalume	{ background-color: #888; background-image: url(images/ui/Galvalume.html); color: white; text-shadow: 0px 0px 10px black; }
li.folder select.Black		{ background-color: #090606; color: white; }
li.folder select.Charcoal	{ background-color: #434343; color: white; }
li.folder select.Taupe		{ background-color: #7a7d6a; color: white; }
li.folder select.Gray		{ background-color: #a0a298; }
li.folder select.Alamo		{ background-color: #e2eae7; }
li.folder select.BriliantArctic	{ background-color: #fcffff; }
li.folder select.Forest		{ background-color: #0c2b1c; color: white; }
li.folder select.Crimson	{ background-color: #a31116; color: white; }
li.folder select.Rustic		{ background-color: #701f1c; color: white; }
li.folder select.Burgundy	{ background-color: #31151e; color: white; }
li.folder select.Gallery	{ background-color: #153351; color: white; }
li.folder select.Ivory		{ background-color: #f4e0bd; }
li.folder select.LightStone	{ background-color: #c6c8aa; }
li.folder select.Tan		{ background-color: #a08b67; }
li.folder select.Brown		{ background-color: #3e291f; color: white; }
li.folder select.BurnishedSlate	{ background-color: #363027; color: white; }


/* Modal Forms */
form { margin: 0; }
form label {font-size: 17.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: #f0b310;
	-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: 19.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 { width: 300px; height: 300px; top: 12%; border-radius: 50%; background-color: rgba(91, 190, 236, 0.75); } /* 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: 25%; }
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; }

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.html"); 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; }
	}


/* ##################### */
/* ### 2020 Redesign ### */
/* ##################### */
#info #help {
	display:block;
	color: #d4d4d4;
	margin-left: 24px;
	width: 33%;
	max-width: 560px;
	min-width: 225px;
	height: 80px;
	height: calc(var(--headerHeight) - 7px);
	line-height: 80px;
	line-height: calc(var(--headerHeight) - 7px);
	font-size: 16px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
}
#info #help span { display: inline-block; vertical-align: middle; line-height: normal; line-height: 1.35em; }

#info #topButtons {
	display:block;
	position: absolute;
	color: #d4d4d4;
	left: min(calc(33% + 24px), 560px);
	right: 425px;
	right: var(--menuWidth);
	top: 0;
	height: 80px;
	height: calc(var(--headerHeight) - 7px);
	line-height: 80px;
	line-height: calc(var(--headerHeight) - 7px);
	font-size: 14px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}
#topButtons button {
	color: #000000;
	background-color: #ffffff;
	width: 28%;
	min-height: 40px;
	border: none;
	border-radius: 7px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 16px;
	margin-left: 8px;
	margin-right: 8px;
	line-height: 16px;
}
#topButtons button:hover { background-color: #5aaaf2; }
#info #scaleItemsAndZoomControls {
	width: 425px;
	width: var(--menuWidth);
	position: absolute;
	top: 0;
	right: 0;
	height: 80px;
	height: calc(var(--headerHeight) - 7px);
	line-height: 80px;
	line-height: calc(var(--headerHeight) - 7px);
}
#scaleItemsAndZoomControls a { width: 36px; display: inline-block; margin-left: 10px; margin-right: 10px; opacity: 0.70; transition: opacity 0.15s; }
#scaleItemsAndZoomControls a:hover { opacity: 1; }
#scaleItemsAndZoomControls a img { width: 100%; }

#footer {
	pointer-events: none;
	z-index: 1;
	position: absolute;
	top: var(--headerHeight);
	left: 0px;
	right: var(--menuWidth);
	height: var(--footerHeight);
	box-sizing: border-box;
	text-align: center;
	user-select: none;
	padding-top: 10px;
}
#footer button {
	pointer-events: auto;
	display: inline-block;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 6px;
	padding: 12px 28px;
	color: #363636;
	background-color: #f0b310;
	border: 2px solid #363636;
	border-radius: 23px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 18px;
}
#footer button#quoteButton { margin-left: 8%; margin-right: 8%; }
#footer button:hover { border-color: #666666; }

/* 2020 changes to DAT.GUI Menu */
.dg.ac {
	top: 87px!important;
	top: var(--headerHeight)!important;
	right: 0px!important;
	height: calc(100vh - 87px - 120px);
	height: calc(100vh - var(--headerHeight) - var(--footerHeight));
}
.dg.ac .dg.main {
	width: 425px!important;
	width: var(--menuWidth)!important;
	height: calc(100vh - 87px - 120px);
	height: calc(100vh - var(--headerHeight));
	overflow-y: auto;
	margin-right: 0;
	position: relative;
	z-index: 0;
	background-color: #363636!important;
}
.dg.ac .dg.main::after {
	content: "";
	background-image: url(../images/ui/bg-steel.jpg); /* Remove this for transparent glass menu */
	background-position: top right;
	opacity: 0.6;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	z-index: -1;   
}
.dg.a div.close-button { display: none; } /* removed close button */
.dg li.folder, li.folder .dg .cr { border-left: none!important; } /* remove colored left borders */

.dg li:not(.folder) { /* items within folders */
	padding: 5px!important;
	padding-left: 26px!important;
	font-size: 15px;
	padding-right: 18px!important;
	background-color: #1a1a1a55!important;
	border-bottom: 1px solid #2c2c2c77!important;
	background: transparent!important;
	text-shadow: none;
}

.dg li:not(.folder).cr:not(.function):not(.boolean) .property-name { /* titles of items within folders (other than buttons and checkboxes)*/
	line-height: 18px!important;
	padding-top: 5px;
	width: 50%;
}
.dg li:not(.folder).cr.function .property-name, .dg li:not(.folder).cr.boolean .property-name { /* titles of items within folders (buttons and checkboxes) */
	width: 85%;
}
.dg li:not(.folder).cr:not(.function):not(.boolean) .c { /* slider / dropdown selector within folders */
	width: 50%;
}
.dg li:not(.folder).cr.boolean .c { /* titles of items within folders (buttons and checkboxes) */
	width: 15%;
}

.dg li.title { /* folder titles */
	background: transparent url(../images/ui/bolt.png) no-repeat!important;
	background-color: #121212 !important;
	color: #f0b310;
	border-top: 1px solid hsla(0,0%,100%,.2);
	border-bottom: 1px solid #222!important;
	font-size: 18px;
	font-weight: 700;
	padding: 8px!important;
	padding-left: 30px!important;
	background-position: 390px!important;
	background-size: 30px!important;
}
.dg li.folder li.folder .dg { margin-left: 15px!important; padding-left: 0px!important; border-left: 1px solid #666; } /* folders within folders / sub-folders */
.dg li.folder li.folder .dg li.title { background-image: none!important; margin-left: 0; } /* sub-folder titles */
.dg .closed li:not(.folder):not(.title) { /* items within folders when closed */
	padding: 0!important;
	border: none!important;
}
.dg .closed li.title { /* folder titles when closed */
	color: #fafafa;
	font-weight: normal;
}
.dg li:not(.folder):last-child { /* last item within a folder */
	padding-bottom: 20px!important;
}
.dg .closed li:not(.folder):last-child { /* last item within a folder when closed */
	padding-bottom: 0px!important;
}
.dg li.title:hover { /* folder titles hover */
	background-color: #363636aa!important;
}

.dg .c .slider-fg { /* Sliders */
	background: #000000 !important;
	max-width: 100%;
	border-right: 3px solid #44abda;
}
.dg .c .slider {
	margin-left: 0;
}
body .dg ac, body .dg.ac .c input[type=text] { /* Slider numeric input */
	font-size: 17px;
	font-weight: 700;
	border-radius: 0;
	border: 2px solid #444444;
	padding: 4px!important;
	box-sizing: border-box;
	height: 25px;
	margin-top: 1px;
}

.dg .c select { /* Select Drop Downs */
	font: 400 14px Verdana, Arial, sans-serif;
	font-weight: 700;
	font-size: 17px;
	height: 32px;
	padding: 0;
	margin: 0;
	margin-top: -3px!important;
	width: 100%;
	border: 2px solid #666!important;
	border-radius: 0;
}

.dg .c input[type="checkbox"] { /* Checkboxes */
	width: 20px;
	height: 20px;
	margin-top: 0px!important;
}

.dg .cr.function:hover { /* Buttons */
	background-color: #ffffff22!important;
}

/* Loader */
#modal-loading { background: transparent; border: none!important; box-shadow: none!important; }
#modal-loading .modal-header { background: transparent; text-align: center; color: white; text-transform: uppercase; border: none; }
#modal-loading #loadingModalLabel { font-weight: normal; font-size: 20px; }
#modal-loading .modal-body { height: 190px; text-align: center; overflow: hidden;}
#loaderSpinner {
	position: absolute;
	height: 80%;
	margin-left: auto;
	margin-right: auto;
	z-index: 2;
	animation-name: spin;
	animation-duration: 1500ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
	/* transform: rotate(3deg); */
	/* transform: rotate(0.3rad);/ */
	/* transform: rotate(3grad); */ 
	/* transform: rotate(.03turn);  */
}
#loaderLogo {
	position: relative;
	z-index: 5;
	margin-left: auto;
	margin-right: auto;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/* Responsive Breakpoints for 2020 redesign */
	/* @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { */
	@media only screen and (max-width : 1525px) {
		#info #help { width: 300px; font-size: 14px; }
		#info #help span { line-height: 1.35em; }
		#info #topButtons { left: calc(300px + 24px); }
		#topButtons button { max-width: 150px; font-size: 14px; margin-left: 5px; margin-right: 5px; }
		#footer button { margin-left: 5px; margin-right: 5px; padding: 10px 25px; font-size: 14px; }
		#footer button#quoteButton { margin-left: 3%; margin-right: 5%; }
	}
	@media only screen and (max-width : 1199px) {
		#footer button { margin-left: 4px; margin-right: 4px; padding: 8px 18px; font-size: 13px; }
		#footer button#quoteButton { margin-left: 2%; margin-right: 2%; }
	}
	@media only screen and (max-width : 1023px) {
		:root { /* Variables */
			--menuWidth: 350px; /* 425px */
		}
		#info #help { display: none; }
		#info #topButtons { left: 24px; }
		#info #scaleItemsAndZoomControls { width: 350px; width: var(--menuWidth); }
		#scaleItemsAndZoomControls a { margin-left: 4px; margin-right: 4px; }
		#scaleItemsAndZoomControls a img { width: 75%; }
		#footer button { margin-left: 2px; margin-right: 2px; text-align: center; padding: 4px 8px; font-size: 13px; }
		#footer button#quoteButton { margin-left: 4px; margin-right: 2px; }
		#footer button#quoteButton span.verbose { display: none; }
		#popupContainer { right: 0; }
		.dg li.title {  font-size: 17px; padding: 4px!important; padding-left: 25px!important; background-position: 320px!important; background-size: 25px!important; }
	}
	@media only screen and (max-width : 767px) {
		:root { /* Variables */
			--headerHeight: 67px;
			--menuWidth: 300px;
		}
		.dg li:not(.folder) .cr:not(.function):not(.boolean) .property-name { /* titles of items within folders */
			width: 60%;
		}
		.dg li:not(.folder).cr.function .property-name, .dg li:not(.folder).cr.boolean .property-name { /* titles of items within folders (buttons and checkboxes) */
			width: 85%;
		}
		.dg li:not(.folder) .cr:not(.function):not(.boolean) .c { /* slider / dropdown selector within folders */
			width: 40%;
		}
		#info #topButtons { right: 275px; right: var(--menuWidth); }
		#info #scaleItemsAndZoomControls { width: 275px; width: var(--menuWidth); }
		#topButtons button { font-size: 12px; width: 25%; font-weight: normal; }
		#scaleItemsAndZoomControls a { width: 30px; margin-left: 3px; margin-right: 3px; }
		#scaleItemsAndZoomControls a#zoomIn { margin-left: 20px; }
		#footer button { margin-left: 2px; margin-right: 2px; text-align: center; padding: 2px 6px; font-size: 13px; line-height: 18px; }
		#footer button#quoteButton { margin-left: 4px; margin-right: 2px; }
		#footer button#quoteButton span.verbose { display: none; }
		#popupContainer { left: 0; right: 0; top: 0; bottom: 0; }
		.dg li.title {  font-size: 15px; font-weight: 700; padding: 2px!important; padding-left: 20px!important; background-position: 250px!important; background-size: 20px!important; }
	}
	@media only screen and (max-width : 500px) {
		:root { /* Variables */
			--headerHeight: 50px;
			--footerHeight: 50px;
			--menuWidth: 100%;
		}
		.dg li:not(.folder) .cr:not(.function):not(.boolean) .property-name { /* titles of items within folders */
			width: 45%;
		}
		.dg li:not(.folder).cr.function .property-name, .dg li:not(.folder).cr.boolean .property-name { /* titles of items within folders (buttons and checkboxes) */
			width: 85%;
		}
		.dg li:not(.folder) .cr:not(.function):not(.boolean) .c { /* slider / dropdown selector within folders */
			width: 55%;
		}
		#info #topButtons { right: 42%; left: 0px; }
		#info #scaleItemsAndZoomControls { width: 48%; }
		#topButtons button { font-size: 11px; line-height: 14px; width: auto; font-weight: normal; padding: 5px; min-height: auto; margin: 0; text-transform: none; }
		#scaleItemsAndZoomControls a { width: 28px; margin-left: -2px; margin-right: -2px; }
		#scaleItemsAndZoomControls a:first-child { margin-right: -6px; }
		#scaleItemsAndZoomControls a:last-child { margin-right: -15px; }
		#scaleItemsAndZoomControls a#zoomIn { margin-left: -1px; }
		#footer { width: 100%; }
		#footer button { margin-left: 1px; margin-right: 1px; width: auto; text-align: center; padding: 2px 5px; font-size: 12px; line-height: 18px; }
		#footer button#quoteButton { display: inline; padding: 2px 5px; margin-left: 5px; width: auto; font-size: 12px; }
		#popupContainer { left: 0; right: 0; top: 0; bottom: 0; }
		.dg li.title { background-position: calc(100% - 8px)!important; }
		.dg.ac {
			top: 50vh!important;
			height: calc(50vh - 50px);
			height: calc(50vh - var(--footerHeight));
		}
		.dg.ac .dg.main {
			height: calc(50vh - 50px);
			height: calc(50vh - var(--footerHeight));
		}
		#builder {
			left: 0;
			right: 0;
			top: 50px;
			top:var(--headerHeight);
			bottom: 50vh;
		}
		
		/* remove the metal texture from the background for mobile devices (does not render correctly on ios */
		.dg li:not(.folder) { background-color: #929292!important; } /* items within folders */
		.dg.ac .dg.main::after { content: none; }
		.dg li.title { background: #363636!important; } /* folders within folders / sub-folders */
		.dg li.title:hover { background: #292929!important; } /* items within folders when closed */
		.dg.ac {
			top: 50dvh!important;
			height: calc(50dvh);
			bottom: 100dvh!important;
		}
		#builder {
			top:var(--headerHeight);
			bottom: 50dvh;
		}
	}

/* Added by OnTap */

	@media (max-width:480px) {
div.modal form div.column.half
 {
    width: calc(100% - 10px) !important;
    float: left;
}
div.modal form div.column.right,div.modal form div.column.quarter {
	    margin-right: 10px !important;
    margin-left: 0px;
}

div.modal form div.column.quarter {
	width: calc(100% - 10px) !important;
}
form label,div.modal-footer .btn {
	    font-size: 16px !important;
}
}


.btn-primary {
    color: #fff;
    background-color: #f0b310;
    background-image: linear-gradient(to bottom, #f0b310, #ad810b);
  
}

.dg ul {
    background: #373d37;
}