@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
}

.header { background-color: #091d2d; color: white; margin-bottom: 1em; min-height: 6.5em; }
.header.logo img { margin-top: 2vh; }
.header-text h2 { margin-top: 1em; }
.header.header-text h2 { margin-top:20px; margin-bottom: -50px; padding-left: 10px; }
.title { font-weight: bold; }

/* Specification Rows (bottom right) */
.spec-row { padding-top: 5px; padding-bottom: 5px; }
.spec-row.discount-view { display: none; }
.spec-row.total-discount { color: blue; }
.spec-row.total-with-discount { color: red; }
.spec-row.total-discount .discount-text { color: black; font-style: italic; font-size: 0.75em; display: inline-block; float: left; width: 50%; }
.spec-row.total-discount .discount-legal-text { color: black; font-style: italic; font-size: 0.75em; display: inline-block;  }

.spec-row.total-price span.footnote { font-size: 0.6em; font-style: italic; font-weight: normal; clear: both; float: left; }
.spec-row.footnote span.footnote { display: inline-block; padding-left: 0.25em; font-size: 0.6em; font-style: italic; font-weight: normal; }

.spec-row.footnote-row { display: inline-block; }
.spec-row.surcharge-note { line-height: 1.75em; margin-bottom: 1em; }
.spec-row.surcharge-hidden, .spec-row .surcharge-hidden { display: none; }
.spec-row.footnote-row span.footnote { display: block; padding-left: 0.25em; font-size: 0.6em; font-style: italic; font-weight: normal; }
.spec-row.footnote-row span.footnote.bold { font-weight: bold; }

.color-container { width: 500px; } 
.column-container { width: 100%; } 

/* Jquery UI Overrides */
.ui-widget { font-family: inherit }
.ui-widget-header {
	background: white;
}
.ui-widget-header .ui-state-default {
	background: none;
}
.ui-widget-header .ui-state-active {
	background: #1268B2; 
}
.ui-tabs {
	border-radius: 0;
	border-color: transparent;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	font-size: 0.9em;
	padding: 0.5em 1.5em;
	text-transform: uppercase;
}
.ui-tabs .ui-tabs-nav .ui-tabs-active .ui-tabs-anchor {
	color: white;
} 
.ui-tabs .ui-tabs-nav {
	padding: 0;
	border-color: #ddd;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	border-radius: 0;
}
.ui-tabs .ui-tabs-nav li {
	display: inline-block;
	margin: 0;
	border-radius: 0;
	border: 0;
}

.tabs h2, .tabs h3 { 
	text-transform: uppercase;
	color: #888;
}

/* Dealer INformation div - above boat-holder */
#dealer-information.active { float: right; padding: 1%; }
#dealer-information img.logo { max-height: 5vh; }

/* Interior Mockup Holder */
#interior-mockup-holder { 
	position: relative; 
	top: 0px; 
	left: 0px;
	width: 100%;
	padding-top: 66.67%; /* keep scale proportion */
	margin: 0;
	overflow: hidden;
	display: none; 
}
/* different root image size for some models */
.r33-surf #interior-mockup-holder { padding-top: 72%; }

/* Image Overlays for all segments */
#boat-holder { 
	position: relative; 
	top: 0px; 
	left: 0px;
	width: 100%;
	padding-top: 66.67%; /* keep scale proportion */
	margin: 0;
	overflow: hidden;
}
/* different root image size for some models */
.r33-surf #boat-holder { padding-top: 72%; }

/* different root image size for some models */
.r33 #boat-holder { padding-top: 72%; }

/* different root image size for some models */
.r33-ob #boat-holder { padding-top: 72%; }


#boat-holder img.specialtag { position: absolute; top: 0; left: 0; z-index: 1000; margin: -43px 0 0 -51px; }
#boat-holder img.special-dealer-logo { position: absolute; top: 0; right: 0; z-index: 1000; margin-top: 10px; margin-right: 10px; max-width: 10vw; }

.hulls, .overlays { position: absolute; top: 0px; left: 0px; display: none; width: 100%; }
.active { display: block; }

/* Exterior Colors */
/* Override Bootstripe default Padding */
.color-list li { 
	padding-right: 0; 
	padding-left: 0; 
	margin: 0 0 4px;
	width: 8%; 
	min-width: 20px;
}
/* Override color-list for interior */
.interior .color-list li { 
	padding-right: 0; 
	padding-left: 0; 
	margin: 0 0 4px;
	width: 15%; 
	min-width: 55px;
}
.color-description { display: none; }
.color-image img { 
	border: 1px solid rgba(0,0,0,0); 
	box-shadow: 0 2px 3px gray; 
	/*width: 2.30em; */
	width: 99%;
}

.column-container #exterior .color-choice-container .color-list .color-type-header { font-weight: bold; padding-right: 1%; margin-top: 2%; }

/*#standard .color-image img:hover, .active img  { border: none; } */
.color-image img:hover, .active img { border: 0px solid rgba(200,200,200,0.5); }
.canvas-color-image a.color-image.selected img { border: 5px solid rgba(200,200,200,0.5); }


.color-choice-container {  }
#color-text { display: none; position: absolute; text-transform: capitalize; }

/* Package / Exterior Colors */
.color-packages-container {} 
.color-packages-container .color-package { float: left; padding: 1%; }
.color-packages-container .color-package img { max-width: 10vw; }
.color-packages-container .color-package h5 { text-align: center; font-weight: bold; font-size: 1.5em; text-transform: capitalize; color: black; text-decoration: none;  }

.exterior-segment.package-member { display: none; }

/* Arch/Bimini Blocks */
dl.arch { 
	/*float: left; width: 15em; height: 13em; */
	text-align: center;
	min-height: 12em;
	padding-top: 1em;
	max-width:20em; 
} 
dl.arch.active { box-shadow: 0px 0px 30px 0px rgba(119, 119, 119, 0.67); }

.arch dt {
	font-size: 0.9em;
	padding: 0.5em 0;
}
.arch img {
	height: auto;
	padding: 5%;
	box-shadow: 0 1px 3px gray;  
	height: 7em;
	max-width: 10em;
}
.arch.arch-accessory img {
	max-height: 6em;
	max-width: 14em;
}

/* Canvas Colors */
div.canvas-column { padding-left: 20px; }
div.row.canvas-colors { margin-left: auto; margin-right: auto; }

div.canvas-segment { display: none; }

/* Interior Colors */
#interior-holder, #interior-stitching-holder { 
	height: 430px; 
	margin-top: 80px;
	margin-left: auto; 
	margin-right: auto; 
	text-align: center;
}
/* Override for 10-series sport package */
#sport #interior-holder, #sport #interior-stitching-holder { 
	height: 30vh; 
	margin-top: 1%;
}
#sport #interior-holder.colored_stitching { 
	margin-top: -999%;
}
#interior-holder img, #interior-stitching-holder img { 
	max-height: 100%; 
	max-width: 100%; 
	padding: 0; 
	display: none; 
	margin: 0 auto;
}
#interior-holder img.active, #interior-stitching-holder img.active { display: block; }
#interior-holder img, #interior-stitching-holder img { 
	max-height: 100%; 
	max-width: 100%; 
	padding: 0; 
	display: none; 
	margin: 0 auto;
}
#interior-holder img.active, #interior-stitching-holder img.active { display: block; }
.color-interior { margin: 1.5em 0; }
.color-interior.combined-interior { width: 100%; float: left; padding: 2em; }
#interior .row .interiorcol-md-12 { display: grid; grid-template-columns: 1fr 1fr;}
#interior .row .interiorcol-md-12.interior-R33 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
#interior .row .interiorcol-md-12.interior-R31 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
#interior .row .interiorcol-md-12.interior-R35.Surf { grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}

/*Responsive Changes for combined interiors */
@media only screen and (max: 400px) {
#interior .row .interiorcol-md-12.interior-R33 { grid-template-columns: 1fr 1fr;}
#interior .row .interiorcol-md-12.interior-R31 { grid-template-columns: 1fr 1fr;}
	/* .color-interior.combined-interior.R33 { width: 20%; float: left; padding: 2em; }
	.color-interior.combined-interior.R35 { width: 20%; float: left; padding: 2em; } */
}
@media only screen and (max-width: 48em) {
	.color-interior.combined-interior { padding: 0; margin: 0; }

}


/* Model-specific overrides */
.arches-R35 .arches-title{ display: none; } 




/* Override for package presentation */
#standard .color-interior { margin: 0; max-width: 45%; float: left; padding: 0 1em; }
dl.color-interior.color-interior-float { float: left; max-width: 24%; padding: 1em; }
dl.color-interior.color-interior-float.color-interior-A29 { max-width: 100%; padding: 0 1em; }
dl.color-interior.color-interior-float.color-interior-A29 dt.interior-color-description { display: none; }

dl.color-interior dt.interior-color-description { padding-bottom: 2px; font-size: 0.85em; } 
dl.color-interior dd a img { height: auto; width: 100%;  }
dl.color-interior-float dd a img { width: 100%; height: 100%;  }
dl.color-interior-float.color-interior-A29 dd a img { width: 100%; max-height: 400px; height: auto; }

dl.color-interior dd.interior-color-img.active  {
/*	-webkit-box-shadow: 0px 0px 30px 0px rgba(119, 119, 119, 0.67);
	-moz-box-shadow:    0px 0px 30px 0px rgba(119, 119, 119, 0.67);
	*/
	box-shadow:         0px 0px 30px 0px rgba(119, 119, 119, 1.0);
	/* border: 5px solid darkgray; */
}

dl.color-interior dd.interior-color-img.combined-interior a img { width: auto !important; max-height:33vh !important; margin-left: auto; margin-right: auto; display: block; text-align: center; }

.interior-option { display: none; }

.diagram img { width: 100%; max-width: 10em; }

/* Exterior Colors */
.exterior.segment-title { text-transform: capitalize; }

/* Optional Features */
.ui-tabs-panel {
	max-height: max( 800px, 90vh );
	overflow-y: auto;
}
/*
#options { 
	height: 52em;
}
*/
.options-container { 
	height: 100%; 
/*
	-webkit-column-width: 18em; 
	-moz-column-width: 18em; 
	column-width: 18em; 
*/
	/*overflow-x: hidden; 
	overflow-y: scroll; */
	overflow: auto;
}
div.option-block { 
	float: left;
	width: 100%;
	clear: both; 
	border-bottom: 1px dotted #ccc;
	padding-bottom: 1em;
	position: relative;
}
div.option-block h4.category-title { 
	margin-bottom: -5px; 
}
div.option-block ul { 
	list-style-type: none;
	padding: 0;
	float: left;
	width: 100%;
	-webkit-column-width: 18em; 
	-moz-column-width: 18em; 
	column-width: 18em; 
}
div.option-block li {
	margin: 0 0 2px;
	position: relative;
	-webkit-column-break-inside: avoid;
						page-break-inside: avoid;
								break-inside: avoid;
}
.option-block label {
	display: block;
	cursor: pointer;
	font-weight: 400;
	padding: 1em;
	box-shadow: 0 0 3px #ccc inset;
	background: #e5e5e5;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
.option-block label.has-img {
	padding-left: 5.5em;
}
.option-block label input {
	float: right;
}

div.option-block ul li, #engine { 
	font-size: 0.9em; 
	list-style: none;
}

.popup {
	max-height: 100%;
	position: absolute;
	margin-top: -1.25em;
	left: 0.5em;
	top: 50%;
	height: 2.5em;
	width: 4.5em;
	overflow: hidden;
	z-index: 100;
}
.popup img {
	width: 100%;
	min-height: 100%;
}

.lb-data .lb-caption {
	font-weight: 400;
	line-height: 1.3;
}
.lb-data .lb-caption strong {
	color: white;
}

/*Summary Screen*/
.summary {
	clear: right;
}
.color-pricing, .contact-information-container, .dealer-information-container { display: none; }
.total-price { font-size: 1.5em; }

.model-change {
	text-align: right;
	padding-top: 8px;
}
.model-title h3 {
	margin-top: 4px;
	text-transform: uppercase;
	font-weight: 700;
}
.actions {
	padding-bottom: 1em;
}
.actions .btn-reset {
	color: #444;
	background: #ddd;
}
.actions .btn-submit {
	background: #28a745; 
	border-color: #28a745;
	color: white;
	/* Override Bootstrap */
	font-size: 16px;
	line-height: 24px;
}
/* Bootstrap Button Overrides */
button, .btn {
	margin-top: 15px;
}

button.btn-information {
	background: #024B7B;
	color: white;
	line-height: 20px;
}
button.btn-information:hover,button.btn-information:focus { color: #ddd; }

button.reset-button { display: none; color: white; background-color: #777; border-radius: 5px; padding: 1em 2.5em; font-size: 1em; }

/* Hide Submit/Quote buttons at top on large screens */
div.actions.mobile-only { 
	display: none;
}
/* Form elements inside Bootstrap modal */
.info-form label { 
	float: left;
	padding: 5px; 
	padding-right: 5px;
	width: 33%;
	text-align: right;
	clear: both;
}
.info-form input { 
	float: left; 
	padding: 5px;
    width: 50%;	
}


.info-form input.error { 
	border: 1px solid red;
}

.info-form span.error { 
	color: red;
	font-size: 10pt;
	padding: 3px;
	width: 50%;
	display: inline-block;
}

button.btn-information {
	background: #1268B2;
	padding: 15px 20px;
	text-transform:uppercase;
}

.btn-submit, .btn-reset {
	padding: 15px 20px;
	text-transform: uppercase;
}

/* Overrides of Bootstrap Modal element */
.modal-body.info-form { padding: 8px 15px 30px 15px; }
.modal-title { text-align: center; }
p.modal-title { text-align: left; font-weight: bold; padding-bottom: 1em;  }
span.modal-note{ margin-top: 0; padding-top: 0; font-style: italic; font-size: 0.75em; }

#additional-information .modal-footer button.btn-default { float: left; }
#additional-information .modal-footer button.btn-info { float: left; }
#additional-information .modal-footer button.btn-success { float: right; font-size: 1.25em; }


/* Styles for Warranty Information Table */
#warranty-info table td { font-size: 0.85em; padding: 0.2em; padding-right: 1em; }
#warranty-info table td.warranty1 { font-size: 1em; background: #405873; color: white; width: 95%; }
#warranty-info table td.warranty2 { font-size: 0.85em; font-weight: bold; }

/* Styles for 'Standard Features Modal Dialog */
#standard-features div.modal-dialog { min-width: 35em; width: 40%; }
#standard-features div.modal-body  { 
	-webkit-column-count: 2; 
	-moz-column-count: 2; 
	column-count: 2; 
	-webkit-column-gap: 2em; 
	-moz-column-gap: 2em; 
	column-gap: 2em; 
}
#standard-features ul.standards li { margin-top: 2px; margin-bottom: 2px; }  

/* Modal Windows */
#additional-information span.info { font-size: 0.75em; font-style: italic; }

/* Removing image/color hovers, they are breaking iPad single-clicks */
@media only screen and (max-device-width: 1024px) { 
	.color-image img:hover, .active img  { } 
}

/* Large (tablets) */
@media only screen and (max-width: 75em) {
	.model-change {
		text-align: left;
		padding-top: 0;
	}
	div.option-block li {
		width: 100%;
	}
	.spec-row .total-price span.footnote { display: none; }
	.spec-row.footnote { display: inline-block; }
}

/* Small (phone landscape, small tablet portrait) */
@media only screen and (max-width: 48em) {
	.ui-tabs-panel {
		max-height: none;
	}
	div.rows.actions.mobile-only { 
		display: block;
	}

	/* Adjust modal window sizes */
	#standard-features div.modal-dialog { min-width: auto; width: auto; overflow-y: scroll; height: 90%; }

	.spec-row.total-price span.footnote { display: none; }
	.spec-row.footnote { display: inline-block; }
}

/* Extra Small (small phones, phones in portrait mode) */
@media only screen and (max-width: 30em){
	/*
	.color-image img { 
		border: 2px solid rgba(0,0,0,0); 
		width: 1.5em; 
	} 
	*/
	.model-change {
		width: 100%;
		text-align: left;
	}
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
		font-size: 75%;
		padding: 0.5em 0.625em;
	}
	dl.arch { 
		min-height: 10em;
		width: 50%;
	}
	dl.color-interior dd a img { 
		/*height: 2em;  */
	}
	.diagram { display: none; }
	.color-list { width: 100%; }
	div.rows.actions.mobile-only { 
		display: block;
	}

	/* Adjust header font size, styles */
	.header.header-text h2 { font-size: 1.25em; margin-top: 30px; }

	/* Padding for Details, Summary Section */
	div.summary, div.details,  div.column-container div.pull-left div.tabs.ui-tabs { padding-left: 2em; }

	/* Adjust modal window sizes */
	#standard-features div.modal-dialog { min-width: auto; width: auto; overflow-y: scroll; height: 90%; }

	/* Adjust special tag */
	#boat-holder img.specialtag { margin: -26px 0 0 -31px; width: 37%; }

	.spec-row.total-price .title span.footnote { display: none; }
	.spec-row.footnote { display: inline-block; }
}

/* Super Tall Portrait Mode*/
/* 1080p screen */
@media only screen and (min-height: 1700px) and (max-height: 1920px) and (orientation:portrait) {
	.column-container .pull-right { width: 100%; padding: 0 2%; }
	.column-container .pull-left.body-left { width: 100%; padding: 0 2%; }
}
/* 720p screen */
@media only screen and (min-height: 1250px) and (max-height: 1366px) and (orientation:portrait) {
	.column-container .pull-right { width: 100%; padding: 0 2%; }
	.column-container .pull-left.body-left { width: 100%; padding: 0 2%; }
}

@media print { 
	/* hide the below elements when printing */
	.header { display: none; }

	/* left-hand side of main body window */
	.container-fluid .column-container .body-left { display: none; }

	.container-fluid .column-container .body-right { margin-top: 0; padding-top: 1em; }
	/*.container-fluid .column-container .body-right .spec-row div { float: left; } */

	/* any buttons above/below image & breakdown */
	.container-fluid .column-container .summary .details button, .container-fluid .column-container .summary .details a.btn { display: none; }

	.details { display: block; margin-left: auto; margin-right: auto; margin-bottom: 0; padding-bottom: 0; }
	/*.details #boat-holder { display: inline-block; width: 60%; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 0; padding-bottom: 0; } */

	.summary { display: block; }

	#options-list li { text-align: left; }

	.spec-row.total-price .title span.footnote { display: none; }
	.spec-row.footnote { display: inline-block; }
}


/* updated styles */
.title {
	text-transform: uppercase;
}

#select-model {
	margin-left: 15px;
}

label {
	text-transform: uppercase;
}

#msrp-grand-total {
	font-weight: 700;
}
#msrp-grand-total:after { content: "USD"; margin-left: 0.5em; font-size: 0.75em; clear: both;}





.color-choice-block {
  position: relative;
}
.color-choice-block.active::after {
  position: absolute;
  bottom: -5px;
  right:-2px;
  content: " ";
  height: 25px;
  width: 20px;
  background-image: url(/bab/web/assets/img/green_check.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
}

body .opt-in-label {
  display: inline;
  cursor: pointer;
  float: none;
  text-transform: none;
  font-weight: normal;
}

.half-fields {
	display: flex;
}
.half-fields > label {
	flex: 1;
	text-align: right !important;
}
.half-fields > div {
	flex: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-left: 15px;
}

.half-fields input {
	margin-right: 20px;
}
.half-fields label {
	width: 100%;
	min-height: 50px;
	text-align: left;
}