:root {
	--menuWidth: 310px;
	--bannerHeight: 40px;
	--logoLargeScale: 1.5;
}

/* Custom Overrides */
/* End Custom Overrides */

html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; -webkit-text-size-adjust: none; }
body {
	background: linear-gradient(to bottom, #eeeeee 0%,var(--lightColor) calc(var(--bannerHeight) * var(--logoLargeScale))); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
	overflow: hidden;
	position:fixed;
	
	/* 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, body, html body { font-family: var(--fontFamily); }

#viewport {
	width: calc(100% - var(--menuWidth));
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index:-1;
}
.nav-right #viewport {
	right: auto;
	left: 0;
}

#floatingNav { width: 100%; position: absolute; bottom: 0; }
#floatingNav i {
	font-size: 1.25rem;
	vertical-align: middle;
	margin-bottom: 0.2rem;
	margin-left: 0.2rem;
}
#floatingNav .btn { padding-bottom: 0.75rem; }

#quoteButton { overflow: visible; }
#floatingPrice {
	display: inline-block;
	position: absolute;
	box-sizing: border-box;
	top: -3.5rem;
	left: 0;
	height: 3.5rem;
	width: 100%;
	background-color: #921a1daa;
	overflow: hidden;
	border-radius: 8px 0px 0px 0px;
}
#priceText {
	display: block;
	padding-top: 0.25rem;
}
#price {
	font-size: 1.5rem;
	line-height: 1.5rem;
	font-weight: bold;
}
#price:not(:empty):before {
	content: '$';
}
#price a {
	text-transform: none;
	padding: 0.05rem 0.25rem;
	font-weight: normal;
	font-size: 0.94rem;
	margin-left: 0.25rem;
	display: inline-block;
	border-radius: 0.25rem;
}
#price a:hover {
	background-color: var(--secondaryColor);
}

#alert_top { /* bootstrap alert bar at the top */
	padding-top: 0.6em;
	z-index: 1005;
	position: absolute;
}
#alert_top button.close { margin-left: 0.25em; outline: none; font-size: 3em; }

#banner { /* Info/banner/header bar across the top of the page */
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: var(--bannerHeight);
	top: 0px;
	left: 0px;
	text-align:right;
	font-size: 18px;
	line-height: 30px;
	background: var(--bannerBackground);
	color: var(--bannerTextColor);
}
.nav-right #banner {
	text-align:left;
}
#logo { position: absolute;
	height: 150%; /* reduce to 100% to always fit in banner bar */
	width: auto;
	right: 100%;
	transform: translateX(calc(50% - (var(--menuWidth) / 2)));
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}
.nav-right #logo {
	transform: translateX(calc(50% + (var(--menuWidth) / 2)));
	right: 0;
}

/* banner icon buttons in the top bar */
#banner i {
	color: var(--bannerTextColor);
	opacity: 0.75;
	padding: 9px;
	padding-left: 0;
	font-size: 1.25em;
	z-index: 1004;
	cursor: pointer;
}
#banner i:hover { color:var(--bannerTextColor); opacity: 1; }
.nav-right #banner i {
	padding-left: 14px;
	padding-right: 0;
}

#navigation {
	box-sizing: border-box;
	position: absolute;
	top: calc(var(--bannerHeight) * var(--logoLargeScale));
	width: var(--menuWidth);
	height: calc(100% - calc(var(--bannerHeight) * var(--logoLargeScale)));
	background-color: var(--lightColor);
	padding: 5px 0px;
	overflow-x: hidden;
	overflow-y: scroll;
	transition: opacity .25s ease-in-out;
}
#navigation .col { padding: 0; }
#navigation .btn { border-radius: 0; }
#navigation .btn-primary { margin: 0; }
#navigation #accordion .row { margin: 0; }
.nav-right #navigation { right: 0; }
#navigation.dim { opacity: 0.5; }

.pretty-scroll { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.pretty-scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; }
.pretty-scroll::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; -webkit-appearance: none; }
.pretty-scroll::-webkit-scrollbar-thumb { background-color: #666; }

/* 
  ##Device = for cramped screens
*/
@media (max-width: 1024px) {
	#floatingNav .btn { font-size: 0.75rem; }
	#floatingNav i { font-size: 1rem; }
}
/* 
  ##Device = for cramped screens
*/
@media (max-width: 768px) {
	#popupContainer { right: 0; bottom: 0; top: 0; left: 0; }
	#viewport { width: 100%; height: 50%; top: 0; left: 0; }
	#navigation { top: 50%; height: 50%; width: 100%; }
	#logo { height: 100%; right: 50%; transform: translateX(50%); }
	.nav-right #logo { transform: translateX(-50%); left: 50%; }
	#floatingNav .btn { font-size: 0.75rem; padding: 0.5rem; padding-bottom: 0.33rem; }
	#floatingNav i { font-size: 1rem; }
}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
*/
@media (max-width: 480px) {
	html { touch-action: none; }
	#popup { max-height: 40%; }

}

/* Add a light modal background for the initial loader animation. This class must be added to the body tag using js for the specific modal(s) desired */
.modal-light-background.modal-open .modal-backdrop.fade { background-color: #f2f2f2!important; opacity: 0!important; }
.modal-light-background.modal-open .modal-backdrop.show { background-color: #f2f2f2!important; opacity: 0.85!important; }

.no-pointer-events { pointer-events: none; }
.ui-draggable-handle { cursor: grab; }

/* Overwrite Primary and Secondary Bootstrap button colors */
.btn-primary { background-color: var(--primaryColor)!important; border-color: var(--primaryColor)!important; }
.btn-primary:hover, .btn-primary:not([disabled]):not(.disabled).active, .show>.btn-primary.dropdown-toggle, .btn-primary:focus { background-color: var(--primaryColorAccent)!important; border-color: var(--primaryColorAccent)!important; }
.btn-secondary { background-color: var(--secondaryColor)!important; border-color: var(--secondaryColor)!important; }
.btn-secondary:hover, .btn-secondary:not([disabled]):not(.disabled):active, .show>.btn-secondary.dropdown-toggle, .btn-secondary:focus { background-color: var(--secondaryColorAccent)!important; border-color: var(--secondaryColorAccent)!important; }

.btn-primary { background-color: var(--primaryColor)!important; border-color: var(--primaryColor)!important; }
.btn-primary:hover { background-color: var(--primaryColorAccent)!important; border-color: var(--primaryColorAccent)!important; }
.btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: var(--primaryColor)!important; border-color: var(--primaryColor)!important; }
.btn-primary.dropdown-toggle { background-color: var(--primaryColor)!important; border-color: var(--primaryColor)!important; }
.btn-primary.dropdown-toggle:hover, .btn-primary.dropdown-toggle:focus { background-color: var(--primaryColorAccent)!important; border-color: var(--primaryColorAccent)!important; }
.btn-primary:not([disabled]):not(.disabled):active, .btn-primary:not([disabled]):not(.disabled).active, .show > .btn-primary.dropdown-toggle { background-color: var(--primaryColorAccent)!important; border-color: var(--primaryColorAccent)!important; }

.btn-secondary { background-color: var(--secondaryColor)!important; border-color: var(--secondaryColor)!important; }
.btn-secondary:hover { background-color: var(--secondaryColorAccent)!important; border-color: var(--secondaryColorAccent)!important; }
.btn-secondary:focus, .btn-secondary:active, .btn-secondary.active { background-color: var(--secondaryColor)!important; border-color: var(--secondaryColor)!important; }
.btn-secondary.dropdown-toggle { background-color: var(--secondaryColor)!important; border-color: var(--secondaryColor)!important; }
.btn-secondary.dropdown-toggle:hover, .btn-secondary.dropdown-toggle:focus { background-color: var(--secondaryColorAccent)!important; border-color: var(--secondaryColorAccent)!important; }
.btn-secondary:not([disabled]):not(.disabled):active, .btn-secondary:not([disabled]):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { background-color: var(--secondaryColorAccent)!important; border-color: var(--secondaryColorAccent)!important; }

/* Style icons in main navigation section buttons and sections */
#navigation #accordion button i { font-size: 1.25rem; }
#navigation #accordion .card-body { padding-top: 0.35rem; padding-bottom: 0.35rem; }
#navigation #accordion button i.fa-angle-up { font-size: 2.1rem; line-height: 1.2rem; } /* special case icon that otherwise renders too small */

/* Style preset buttons */
.btn-secondary.presets { padding: 0.6em; padding-bottom: 0.25em; margin-left: 0; margin-right: 0.4em; }
.btn-secondary.presets img { max-width: 110px; display: block; }

/* Style doors & windows buttons with unique colors */
.btn-secondary.doors { background-color: var(--lightColor)!important; border-color: var(--lightColor)!important; color: black!important; }
.btn-secondary.doors:hover, .btn-secondary.doors:not([disabled]):not(.disabled):active, .show>.btn-secondary.doors.dropdown-toggle, .btn-secondary.doors:focus { background-color: var(--lightColorAccent)!important; border-color: var(--lightColorAccent)!important; }
.btn-secondary.windows { background-color: var(--primaryColor)!important; border-color: var(--primaryColor)!important; }
.btn-secondary.windows:hover, .btn-secondary.windows:not([disabled]):not(.disabled):active, .show>.btn-secondary.windows.dropdown-toggle, .btn-secondary.windows:focus { background-color: var(--primaryColorAccent)!important; border-color: var(--primaryColorAccent)!important; }
.btn-secondary.garageDoors { background-color: var(--secondaryColor)!important; border-color: var(--secondaryColor)!important; }
.btn-secondary.garageDoors:hover, .btn-secondary.garageDoors:not([disabled]):not(.disabled):active, .show>.btn-secondary.garageDoors.dropdown-toggle, .btn-secondary.garageDoors:focus { background-color: var(--secondaryColorAccent)!important; border-color: var(--secondaryColorAccent)!important; }
.btn-secondary.framedOpenings { background-color: var(--darkColor)!important; border-color: var(--darkColor)!important; }
.btn-secondary.framedOpenings:hover, .btn-secondary.framedOpenings:not([disabled]):not(.disabled):active, .show>.btn-secondary.framedOpenings.dropdown-toggle, .btn-secondary.framedOpenings:focus { background-color: var(--darkColorAccent)!important; border-color: var(--darkColorAccent)!important; }

/* Style general input lables */
label { margin-bottom: 0; }

/* Style range slider inputs */
.slider-container {
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}
.slider-container:hover { background-color: #eee; }
.slider-container.disabled { opacity: 0.5; }
.slider-container label {
	box-sizing: border-box;
	display: block;
	margin-bottom: 0;
	min-width: 4.5rem;
	width: 25%;
	max-width: 5rem;
	line-height: 1rem;
}
.slider-container input {
	box-sizing: border-box;
	display: block!important;
	border-radius: 3px;
	text-align: center;
	border: 1px solid var(--primaryColor);
	width: 15%;
	min-width: 15%;
	line-height: 0;
	text-align: center;
}
.slider-container input.inches::after { content: " in"; }
.slider-container input.feet::after { content: " ft"; }
.slider-container input.meters::after { content: " m"; }
/* Hide HTML5 Up and Down arrows. */
#navigation input[type="number"]::-webkit-outer-spin-button, #navigation input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; }
div.slider {
	box-sizing: border-box;
	width: 100%!important; /* Full-width */
	margin-left: 5%;
	margin-right: 5%;
	outline: none; /* Remove outline */
}

.slider-track { /* Background track */
	border-radius: 4px;
	background: var(--lightColor); /* Grey background */
}

div.slider .slider-selection { /* selected track */
	background: var(--secondaryColor);
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider-handle {
	background: var(--primaryColor);
	outline: none;
}

/* Style customizations for bootstrap-select inside modal windows */
.modal-content .bootstrap-select div.dropdown-menu.show { height: 100vh; padding:0; margin-top: -1px; margin-bottom: -1px; } /* Match material design look of open select dropdown */
#stateModal .bootstrap-select div.dropdown-menu.show div.inner.show { max-height: 100%!important; background-color: var(--secondaryColorAccent); } /* use majority of height available */
#stateModal .bootstrap-select div.dropdown-menu.show { height: auto!important; max-height: none!important; top: 0!important; } /* short list of states */
#stateModal.allStates .bootstrap-select div.dropdown-menu.show { height: 80vh!important; max-height: 80vh!important; top: 10vh!important; } /* Center open dropdown menu and use majority of height available */

/* Style customizations for bootstrap-select dropdown menus */
#navigation .bootstrap-select .btn { margin-top: 0.15em; padding: 0.65em 1.25em; }
.bootstrap-select { margin-bottom: .5rem; }
.bootstrap-select .dropdown-toggle:focus { outline: 0!important; }
.bootstrap-select .dropdown-menu.show div.inner.show { border: 5px solid var(--secondaryColorAccent); }
.bootstrap-select .dropdown-menu li { border-bottom: 1px solid var(--lightColor); }
.bootstrap-select .dropdown-menu li:last-child { border-bottom: none; }
.bootstrap-select .dropdown-item:focus, .bootstrap-select .dropdown-item:hover { background-color: #dedede;  }
.bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item.active { background-color: var(--secondaryColor); }
.bootstrap-select .dropdown-item.active:focus, .bootstrap-select .dropdown-item.active:hover { background-color: var(--secondaryColorAccent); }
.bootstrap-select .btn { margin-left: 0!important; } /* padding: .5rem 1rem; */
.bootstrap-select div.dropdown-menu.show { padding:0; margin-top: -1px; margin-bottom: -1px; box-shadow: 0px 20px 30px 10px var(--lightColor); border-radius: 0; } /* Match material design look of open select dropdown */
.bootstrap-select.dropup div.dropdown-menu.show { box-shadow: 0px -20px 30px 10px var(--lightColor); } /* reverse shadow direction for dropup */
#stateModal .bootstrap-select div.dropdown-menu.show { box-shadow: 0px 0px 30px 0px var(--lightColor); } /* shadow for state selection */
/*.bootstrap-select div.inner.show { /* Match material design look of open select dropdown 
	padding: 0;
	margin: 0;
	border: 4px solid gray;
	box-sizing: content-box;
}*/
.bootstrap-select.color-picker .swatch { /* Set the color of the swatch */
	position: relative;
	border: 3px solid ;
	/* border-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,123,255,0)) 1; */
	transition: none;
	min-height:20px;
}
.bootstrap-select.color-picker .swatch.dropdown-item.active, .bootstrap-select.color-picker .swatch.swatch-gradient.dropdown-item:active { border-color: var(--secondaryColor)!important; } /* current selected option outline */
.bootstrap-select.color-picker .swatch.dropdown-item:hover { border-color: var(--lightColorAccent)!important; } /* hover option outline */

.bootstrap-select.color-picker .swatch.swatch-gradient  span.text { color: #212529; } /* option text color */
.bootstrap-select.color-picker .swatch.swatch-gradient.dropdown-item.active, .bootstrap-select.color-picker .swatch.swatch-gradient.dropdown-item:active { border-image: linear-gradient(90deg, var(--secondaryColor), var(--primaryColor)) 1!important; } /* current selected option outline */
.bootstrap-select.color-picker .swatch.swatch-gradient.dropdown-item:hover { border-image: linear-gradient(90deg, var(--lightColorAccent), var(--lightColor)) 1!important; } /* hover option outline */

.custom-control.custom-control-lg.custom-checkbox { padding-left: 2em; }
.custom-control.custom-control-lg.custom-checkbox.disabled { user-select: none; opacity: 0.5; }

.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
	top: 0.1rem !important;
	left: -2rem !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
}
.custom-control-input:not(:disabled):active~.custom-control-label::before {
    color: #fff;
    background-color: var(--secondaryColorAccent);
    border-color: var(--secondaryColorAccent);
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--secondaryColor);
    background-color: var(--secondaryColor);
}
.form-check.form-check-large { padding-left: 2rem; }
.form-check-large .form-check-input { margin-left: 2rem; margin-top: 0; width: 1.5rem; height: 1.5rem; left: -2rem;}


/* Form validation & errors */
.modal form label.error { color: red; font-size: 15px!important; line-height: initial; margin-bottom: 0; padding-bottom: 0; margin-top: 0; }
.modal form input.error, div.modal form select.error { background-color: #ffcccc!important; }
.modal form div.messages.error { color: red; background-color: #ffcccc; border-top: 2px solid #ff9999; border-bottom: 2px solid #ff9999; text-align: center; font-weight: bold; }
.modal form div.messages { font-size: 0.8rem; display: none; padding: 0.4rem 0.75rem; text-align: justify!important; box-sizing: border-box; }

/* Popup box (bootbox.js) styling */
.bootbox.modal.stacked-buttons .modal-footer { display: block; }
.bootbox.modal.stacked-buttons .modal-footer button i { position: absolute; right: 2em; line-height: 1.25em; }

/* Print styles */
.print { display: none; }

@media print {
	html, body { margin: 0; padding: 0; -webkit-print-color-adjust: exact !important; min-height: 7.5in; min-width: 7.5in; max-height: 100dvh; max-width: 11in; width: 100%; height: 100%; position: relative; margin-left: auto; margin-right: auto; background: none; }

	body * { display: none!important; }
	.print, .print * { display: block!important; font-family: Oswald; }
	
	div.print.page { width: 100%; height: 100%; }
	
	div.print.header {
		background-size: auto 100%;
		height: 1.75in;
	}
	div.print.footer {
		background-size: auto 100%;
		height: 0.75in;
		text-align: center;
		position: absolute;
		top: calc(100dvh - 0.75in);
		width: 100%;
	}
	
	div.print.content {
		position: absolute;
		top: 1.75in;
		bottom: 0.75in;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	div.print.header, div.print.content, div.print.footer {
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.print.header img {
		margin-left: auto;
		margin-right: auto;
		width: auto;
		max-width: 100%;
		height: 1.75in;
	}
	
	.print-content-image {
		width: 100%;
		box-sizing: border-box;
		margin-top: 25px;
		margin-bottom: 25px;
	}
	
	.print-content-text {
		display: block;
		position: relative;
		box-sizing: border-box;
		margin-top: 25px;
		margin-bottom: 25px;
	}
	
	.print-content-image img {
		width: 100%;
		height: auto;
		margin: 0 auto;
		border: 1px solid black;
		box-sizing: border-box;
	}
	
	div.print.content h3 {
		text-align: center;
		font-size: 0.25in;
		text-transform: uppercase;
		margin-bottom: 0.2in;
		line-height: 0.1in;
		font-weight: bold;
	}
	
	#printText {
		/*padding-bottom: 0.25in;
		box-sizing: border-box;
		height: 100%;
		display: flex!important;
		flex-direction: column;
		flex-wrap: wrap;
		align-items:flex-start;
		align-content:flex-start;*/
		column-count: 4;
		text-transform: capitalize;
	}
	
	#printText .item {
		display:initial!important;
		box-sizing: border-box;
		align-self:stretch;
		width: 50%;
		padding-left: 5%;
	}
	
	#printText span { display:initial!important; }
	#printText strong { display:initial!important; font-weight: bold; }
	div#printText span.label { color: var(--primaryColor); }
	div#printText span.value { color: black; }
	
	.sign-box, .truss-box {
		box-sizing: border-box;
		background-color: #ffffff66;
		border:1px solid var(--primaryColor);
		border-radius: 4px;
		padding: .025in;
		margin: 0.05in 0.2in;
		padding-bottom: 0.07in;
		width: 30%!important;
		padding-left: 2%!important;
	}
	
	@media (orientation: landscape) and (min-width:600px) {
		#printText div {
			
		}
	}
	@media (orientation: portrait), (max-width:601px) {
		.print-content-image {
			width: 100%;
			padding-bottom: 0;
		}
		.print-content-text {
			width: 100%;
			/*height: calc(100% - 2.5in);*/
			max-height: 5.67in;
			padding: 0.25in;
			padding-top: 0;
			padding-bottom: 0.5in;
		}
		#printText .item {
			width: 33.5%;
			padding-left: 5%;
		}
		div.print.content h3 {
		    line-height: 0.25in;
		}
	}
}