/* General Editor Styles */ .builder-btn { padding: 6px 20px; font-weight: 600; font-size: 14px; line-height: normal; border-radius: 5px; background: #f7f7f7; border: 1px solid #d9d9d9; text-decoration: none; } .builder-btn.small { padding: 4px 10px; font-size: 13px; } .builder-btn:hover { cursor: pointer; background-color: #fff; } a.builder-btn, a.builder-btn-small { display: inline-block; } button.builder-btn { color: #0073aa; } button.builder-btn:hover { color: #00a0d2; } .builder-btn.red { color: #fff; background: #ed1b2e; border: 1px solid #f00; } .builder-btn.red:hover { background: #f00; } .builder-btn.dark-blue { color: #fff; background: #212121; border: 1x solid #212121; } .builder-btn.dark-blue:hover { background: #111111; color: #fff; } .builder-btn.blue { color: #fff; background: #0073aa; border: 1x solid #0073aa; } .builder-btn.blue:hover { background: #00a0d2; color: #fff; } .builder-btn.green { color: #fff; background: #6c0; border: 1px solid #59b200; } .builder-btn.green:hover { background: #59b200; color: #fff; } .builder-btn.purple { color: #fff; background: #0e1550; border: 1px solid #7474c1; } .builder-btn.purple:hover { background: #7474c1; color: #fff; } /* Builder Image */ .builder-image-wrapper { position: relative; width: 100%; overflow: hidden; display: none; } .builder-image-wrapper.active { display: block; } .builder-image-wrapper img { width: 100%; } .builder-image-wrapper img[src*="blank.gif"] { width: auto; width: 100%; height: 100%; } .builder-image-wrapper img + img { position: absolute; top: 0; left: 0; } .builder-image-wrapper img.hidden { visibility: hidden; } .builder-toggle-image, .builder-save-sticky, .builder-zoom-image { display: inline-block; margin-top: .5em; text-transform: uppercase; font-weight: bold; font-size: .8em; background: #fff; border: 1px solid #ccc; text-align: center; text-decoration: none; padding: .5em; } .builder-save-sticky { display: block; } .builder-toggle-image.active, .builder-zoom-image:active, .builder-zoom-image:focus { color: #000; border-color: #000; } .builder-toggle-image:hover, .builder-save-sticky:hover, .builder-zoom-image:hover { background-color: #f3f3f3; border-color: #000; color: #000; } /* ZOOMED IMAGE */ @media only screen and (min-width: 601px) { .builder-zoom-image { padding-left: 25px; background-image: url(../../../img/zoom-in.svg); background-repeat: no-repeat; background-position: 5px center; background-size: 16px; } .builder-customer-wrapper > .dhflex { transition: all .2s ease-in-out; } .builder-customer-wrapper.enlarged-images > .dhflex { flex-basis: 100%; } .builder-customer-wrapper.enlarged-images > .dhflex .builder-zoom-image { background-image: url(../../../img/zoom-out.svg); } .builder-customer-wrapper.enlarged-images > .dhflex + .dhflex { flex-basis: 0; height: 0; overflow: hidden; margin-left: 0; border: none; } .builder-customer-wrapper.enlarged-images > .dhflex .builder-zoom-image span.enlarge, .builder-customer-wrapper > .dhflex .builder-zoom-image span { display: none; } .builder-customer-wrapper.enlarged-images > .dhflex .builder-zoom-image span.reduce, .builder-customer-wrapper > .dhflex .builder-zoom-image span.enlarge { display: inline; } .builder-toggle-image.biw-none { display: none; } .builder-wrapper.builder-customer-wrapper.retail-build .builder-image-wrapper:after { content: ""; position: absolute; top: 4px; right: 4px; display: block; width: 24px; height: 24px; opacity: .5; background: rgba(255,255,255,.7) url(../../../img/zoom-in.svg) no-repeat center center/16px; border: 1px solid #fff; cursor: pointer; } .builder-wrapper.builder-customer-wrapper.retail-build .builder-image-wrapper:hover:after { opacity: 1; } .builder-wrapper.builder-customer-wrapper.retail-build .builder-toggle-image-wrap + .builder-image-wrapper:after, .builder-wrapper.builder-customer-wrapper.retail-build .builder-toggle-image-wrap + .builder-image-wrapper + .builder-image-wrapper:after, .builder-wrapper.builder-customer-wrapper.retail-build .builder-toggle-image-wrap + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper:after, .builder-wrapper.builder-customer-wrapper.retail-build .builder-toggle-image-wrap + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper:after, .builder-wrapper.builder-customer-wrapper.retail-build .builder-toggle-image-wrap + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper:after, .builder-wrapper.builder-customer-wrapper.retail-build .builder-toggle-image-wrap + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper:after, .builder-wrapper.builder-customer-wrapper.retail-build .builder-toggle-image-wrap + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper:after, .builder-wrapper.builder-customer-wrapper.retail-build .builder-toggle-image-wrap + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper:after, .builder-wrapper.builder-customer-wrapper.retail-build .builder-toggle-image-wrap + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper + .builder-image-wrapper:after { display: none; } .builder-wrapper.builder-customer-wrapper.enlarged-images > .dhflex.customer-images { overflow-y: auto; flex-basis: 100%; } .builder-wrapper.builder-customer-wrapper.enlarged-images > .dhflex.customer-images .builder-image-wrapper:after { background-image: url(../../../img/zoom-out.svg); } } @media only screen and (max-width: 600px) { .builder-customer-wrapper > .dhflex .builder-zoom-image { display: none; } .builder-customer-wrapper .dhflex.customer-images { overflow: visible; } .builder-customer-wrapper { padding-bottom: 30px; } } .builder-customer-wrapper.builder-wrapper .builder-sticky-wrapper .builder-toggle-image-wrap { position: absolute; top: 0; left: .5em; z-index: 101; } .builder-hybrid-wrapper .builder-toggle-image-wrap, .builder-dealer-wrapper .builder-toggle-image-wrap { background-color: #212121; font-size: .7em; display: block; padding: 4px; margin-bottom: .25em; } .builder-hybrid-wrapper .builder-toggle-image-wrap .builder-toggle-image, .builder-dealer-wrapper .builder-toggle-image-wrap .builder-toggle-image { margin-top: 0; background-color: #aaa; border: none; } .builder-hybrid-wrapper .builder-toggle-image-wrap .builder-toggle-image.active, .builder-hybrid-wrapper .builder-toggle-image-wrap .builder-toggle-image.active:hover, .builder-dealer-wrapper .builder-toggle-image-wrap .builder-toggle-image.active, .builder-dealer-wrapper .builder-toggle-image-wrap .builder-toggle-image.active:hover { background-color: #fff; } .builder-hybrid-wrapper .builder-toggle-image-wrap .builder-toggle-image:hover, .builder-dealer-wrapper .builder-toggle-image-wrap .builder-toggle-image:hover { background-color: #ccc; } /* Builder Wrapper .builder-wrapper .summary-wrapper, .builder-wrapper .builder-image-wrapper { background: #fff; z-index: 100; } .builder-wrapper .summary-wrapper, .builder-wrapper .builder-image-wrapper > img { opacity: 1; transition: opacity .3s ease-in-out; } .builder-wrapper.processing .summary-wrapper, .builder-wrapper.processing .builder-image-wrapper > img + img { opacity: 0; transition: none; } */ /* Builder Wrapper*/ .builder-wrapper .summary-wrapper, .builder-wrapper .builder-image-wrapper { background: #fff; z-index: 100; } .image-preview-wrapper .builder-image-layer, .builder-wrapper .summary-wrapper, .builder-wrapper .builder-image-wrapper, .builder-wrapper .builder-image-wrapper .builder-image-layer-transition.processing, .builder-wrapper .builder-image-wrapper .builder-image-layer { opacity: 1; transition: opacity .3s ease-in-out; } .builder-wrapper.dhpb-processing .summary-wrapper, .image-preview-wrapper .builder-image-layer.vis-hide, .image-preview-wrapper .builder-image-layer.vis-hide + img, .builder-wrapper .builder-image-wrapper .builder-image-layer.vis-hide, .builder-wrapper .builder-image-wrapper .builder-image-layer.vis-hide + img, .builder-wrapper .builder-image-wrapper .builder-image-layer-transition, .builder-wrapper.dhpb-processing .builder-image-wrapper .builder-image-layer.processing { opacity: 0; } /* Builder Form */ .builder-wrapper.builder-hybrid-wrapper, .builder-wrapper.builder-dealer-wrapper { font: 16px Arial; } .builder-wrapper fieldset.builder-category-base { /*display:none;*/ } .builder-wrapper fieldset { border: none; padding: 0; margin: 0; } .builder-wrapper.builder-dealer-wrapper fieldset.builder-option-category { border: 1px solid #ccc; padding: 0; margin-bottom: 1em; } .builder-wrapper h3, .builder-wrapper h4 { margin: .25em 0; } .builder-wrapper h3 { text-transform: uppercase; color: #000; padding: .25em .75em; font-weight: normal; font-size: 2em; cursor: pointer; position: relative; } .builder-wrapper h3:after { content: " "; display: block; position: absolute; top: 0; right: 0; width: 2.5em; height: 100%; background: url(../../../img/nav-arrow.svg) no-repeat center center/6px; transform: rotate(90deg); } .builder-wrapper h4 { font-weight: bold; font-size: 1em; } .builder-wrapper fieldset.builder-option-category > section { display: none; } .builder-wrapper fieldset.builder-option-category.builder-expanded > h3:after { transform: rotate(270deg); } .builder-wrapper fieldset.builder-option-category.builder-expanded > section { display: block; } .builder-wrapper.builder-dealer-wrapper fieldset.builder-option-category > section { padding: 0 1em 1em; } .builder-wrapper.builder-customer-wrapper { font-size: 16px; } .builder-wrapper.builder-customer-wrapper .dhflex { padding: 0; } .builder-wrapper.builder-customer-wrapper .dhflex + .dhflex { padding: 0; } @media only screen and (max-width: 600px) { .builder-wrapper.builder-customer-wrapper .dhflex { z-index: 3; } .builder-wrapper.builder-customer-wrapper.detail-image-showing .dhflex { z-index: 2; } .builder-wrapper input[type=checkbox] + label.detail + .detail-image-wrapper { background-color: rgba(0,0,0,.98); } .builder-wrapper.builder-customer-wrapper .dhflex + .dhflex { z-index: 2; } } .builder-wrapper.builder-customer-wrapper .customer-images { margin-bottom: 0; } .builder-wrapper.builder-customer-wrapper .dhflex.customer-option-form { border-left: 1px solid #d5d5d5; /*border-top: 4px solid #111111;*/ } .builder-wrapper.builder-customer-wrapper fieldset.builder-option-category { border-bottom: 4px solid #111111; } .builder-wrapper.builder-customer-wrapper h3, .builder-wrapper.builder-customer-wrapper h4 { margin: 0; font-family: Basic; } .builder-wrapper.builder-customer-wrapper h3 { text-transform: uppercase; color: #000; font-weight: 700; font-size: 1em; cursor: pointer; padding: .5em 1em; } .builder-wrapper.builder-customer-wrapper h4 { font-size: .8em; padding: .5em 1em; border-bottom: 1px solid #d7d7d7; background-color: #c6cacc; color: #000; text-transform: uppercase; } /* EDITOR ADJUSTMENTS */ .builder-wrapper .editor-mode { font-size: .9em; } .builder-wrapper .editor-mode h3 { font-size: 1em; color: #444; } .builder-wrapper .editor-mode h4 { font-size: .7em; text-transform: uppercase; } .builder-wrapper .editor-mode fieldset.builder-base-fieldset { display: block; } /* PINNED DEALER IMAGE */ .builder-wrapper.builder-hybrid-wrapper .builder-image-wrapper, .builder-wrapper.builder-dealer-wrapper .builder-image-wrapper { border: 1px solid #ccc; box-sizing: border-box; } .builder-wrapper.builder-hybrid-wrapper .pinnable-section, .builder-wrapper.builder-dealer-wrapper .pinnable-section { position: relative; } .builder-wrapper.builder-hybrid-wrapper .pinnable-section.pinned, .builder-wrapper.builder-dealer-wrapper .pinnable-section.pinned { z-index: 2; box-shadow: 0 0 10px rgba(0,0,0,.7); border: 1px solid #ccc; padding: .25em; background-color: #fff; position: fixed; top: calc(90px + 3em); right: 3em; width: calc((100% - 240px) / 3.45); } @media (max-width: 1157px) { .builder-wrapper.builder-dealer-wrapper .pinnable-section.pinned, .builder-wrapper.builder-dealer-wrapper .pinnable-section.pinned { width: 28%; } } @media screen { .builder-wrapper.builder-hybrid-wrapper .pinnable-section > .builder-image-wrapper:after, .builder-wrapper.builder-dealer-wrapper .pinnable-section > .builder-image-wrapper:after { content: ""; opacity: .4; cursor: pointer; position: absolute; background: #fff url(../../../img/pin-unpinned.svg) no-repeat center center/16px; border: 1px solid black; padding: .2em; top: 5px; right: 5px; width: 16px; height: 16px; z-index: 100; } .builder-wrapper.builder-hybrid-wrapper .pinnable-section:hover > .builder-image-wrapper:after, .builder-wrapper.builder-dealer-wrapper .pinnable-section:hover > .builder-image-wrapper:after { opacity: 1; } .builder-wrapper.builder-hybrid-wrapper .pinnable-section.pinned > .builder-image-wrapper:after, .builder-wrapper.builder-dealer-wrapper .pinnable-section.pinned > .builder-image-wrapper:after { content: ""; background-image: url(../../../img/pin-pinned.svg); top: 10px; right: 10px; } } /* DEFAULT OPTION LABELS */ .builder-wrapper input[type=checkbox] { display: none; } .builder-wrapper div.spec, .builder-wrapper input[type=checkbox] + label { display: block; font-size: .8em; } .builder-wrapper input[type=checkbox] + label { background: transparent url(../../../img/icon-bab-unselected-checkbox.svg) no-repeat center left / .8em; } .builder-wrapper.builder-dealer-wrapper input[type=checkbox] + label { padding: .5em 0 .5em 1.1em; } .builder-wrapper.builder-customer-wrapper div.spec { padding: .5em 1.3em; background: #fff; border-bottom: 1px solid #d7d7d7; } .builder-wrapper.builder-customer-wrapper input[type=checkbox] + label { padding: .5em 1em .5em 3em; background: #fff url(../../../img/icon-bab-unselected-checkbox.svg) no-repeat center left 1em / 1.5em; border-bottom: 1px solid #d7d7d7; } .builder-wrapper.builder-customer-wrapper div.spec:nth-of-type(odd), .builder-wrapper.builder-customer-wrapper section label:nth-of-type(odd) { background-color: #f5f5f5; } .builder-wrapper input[type=checkbox]:checked + label, .builder-wrapper input[type=checkbox].included + label { background-image: url(../../../img/icon-bab-selected-checkbox.svg); } .builder-wrapper input[type=checkbox] + label .detail-image-toggle { display: inline-block; cursor: pointer; text-indent: 100%; height: 1em; width: 2em; overflow: hidden; background: transparent url(../../../img/detail-image.svg) no-repeat center / contain; } .builder-wrapper input[type=checkbox] + label + .detail-image-wrapper { display: none; } .builder-wrapper input[type=checkbox] + label.detail + .detail-image-wrapper { display: flex; position: fixed; z-index: 200; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.8); align-items: center; justify-content: center; max-width: 100%; } .builder-wrapper input[type=checkbox] + label.detail + .detail-image-wrapper > .detail-image { display: block; cursor: pointer; z-index: 1; position: absolute; padding: 5px; border-radius: 3px; background: #999; max-width: 90%; } .builder-wrapper input[type=checkbox] + label.detail + .detail-image-wrapper > .detail-image img { display: block; max-width: 100%; max-height: 80vh; } /* removed triangle when switched to lightbox .builder-wrapper input[type=checkbox] + label.detail + .detail-image-wrapper > .detail-image:before { content: " "; position: absolute; z-index: 99; top: -10px; left: 1.65em; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #999; } */ .builder-wrapper input[type=checkbox] + label.detail + .detail-image-wrapper > .detail-image:after { content: "x"; position: absolute; top: 10px; right: 10px; display: block; background: #fff; font-size: 1.2em; font-weight: bold; padding: 0 .2em; border-radius: 3px; line-height: 1; text-transform: uppercase; border: 2px solid #000; } /* DETAIL TEXT TOGGLES */ .builder-wrapper input[type=checkbox] + label .detail-text-toggle { display: inline-block; cursor: pointer; text-indent: 100%; height: 1em; width: 2em; overflow: hidden; background: transparent url(../../../img/detail-text.svg) no-repeat center / contain; } .builder-wrapper input[type=checkbox] + label .detail-text-content { display: none; font-size: .9em; } .builder-wrapper input[type=checkbox] + label.detail-text-visible .detail-text-content { display: block; padding: 5px 15px 5px 5px; background: rgba(0,0,0,.1) url(../../../img/detail-close.svg) no-repeat top 3px right 3px / 10px; border: 1px solid rgba(0,0,0,.3); } /* pulls closer to image icon if both exist */ .builder-wrapper input[type=checkbox] + label .detail-image-toggle + .detail-text-toggle { margin-left: -.5em; } /* detail showing when image shows*/ #dhlightbox-content .detail-text-content { display: inline-block; max-width: 90%; padding: .5em; color: #fff; font-weight: bold; text-align: center; } .builder-wrapper .cost-wrapper, .builder-wrapper .link-wrapper { display: block; float: right; clear: right; padding-left: 1em; font-weight: 700; text-align:right; } .builder-wrapper input[type=checkbox].standard + label .cost-wrapper { color: #900; font-weight: bold; text-transform: uppercase; border: none; background: none; } input[type=checkbox].no-charge + label .cost-wrapper { display: none; } .builder-wrapper .cost-wrapper small.unit { opacity: .8; font-weight: normal; } .builder-wrapper.builder-hybrid-wrapper .cost-wrapper small.unit { position: relative; top: -0.3em; } /* EXTRA DETAIL INPUTS */ .builder-wrapper .extra-detail-wrapper { display: inline-block; margin-left: 5px; } .builder-wrapper .extra-detail-wrapper span, .builder-wrapper .extra-detail-wrapper input { font-size: inherit; display: none; } /*.builder-wrapper input[type=checkbox].included + label .extra-detail-wrapper input,*/ /*.builder-wrapper input[type=checkbox].included + label .extra-detail-wrapper span, */ /* text entered here wouldn't show up on order anyway; collect at package level, if required */ .builder-wrapper input[type=checkbox]:checked + label .extra-detail-wrapper input, .builder-wrapper input[type=checkbox]:checked + label .extra-detail-wrapper span { display: inline; } .builder-wrapper input[type=checkbox]:checked + label .extra-detail-wrapper input::placeholder { font-size:.8em; } .builder-wrapper input[type=checkbox].allwillallowquantities-subject:checked + label .extra-detail-wrapper input { width: 80px; } /* SWATCH OPTION LABELS */ .builder-wrapper input[type=checkbox] + label.swatch { vertical-align: top; display: inline-block; padding: 1em 0; background: #fff; text-align: center; width: 16.66%; color: #999; border: none; } .builder-wrapper input[type=checkbox] + label.swatch span.text-wrapper { display: inline-block; margin: .5em 0; text-transform: uppercase; line-height: 1.3; background-color: #fff; } .builder-wrapper input[type=checkbox] + label.swatch span.color-wrapper { display: inline-block; border: 2px solid white; transition: all .2s; } .builder-wrapper input[type=checkbox] + label.swatch span.color { display: block; height: 2em; width: 2em; border: 1px solid #fff; } .builder-wrapper input[type=checkbox] + label.swatch span.color.bright { border-color: #ccc; } .builder-wrapper input[type=checkbox] + label.swatch .cost-wrapper { float: none; font-size: .8em; padding: 0; margin-top: -.5em; text-align:center; } /*hide cost wrapper if free*/ .builder-wrapper input[data-option_key="0"] + label.swatch .cost-wrapper { display: none; } .builder-wrapper input[type=checkbox] + label.swatch:hover span.color-wrapper { transform: scale(1.1); border-color: rgba(0,0,0,.2); } .builder-wrapper input[type=checkbox]:checked + label.swatch span.color-wrapper, .builder-wrapper input[type=checkbox].included + label.swatch span.color-wrapper { border-color: black; box-shadow: 0 0 10px rgba(0,0,0,.6); transform: scale(1.2); } .builder-wrapper input[type=checkbox]:checked + label.swatch span.color, .builder-wrapper input[type=checkbox].included + label.swatch span.color { /*width: 5em;*/ } .builder-wrapper input[type=checkbox]:checked + label.swatch span.text-wrapper, .builder-wrapper input[type=checkbox].included + label.swatch span.text-wrapper { color: #000; } /* LARGE SWATCHES */ .builder-wrapper input[type=checkbox] + label.swatch { width: 25%; } .builder-wrapper input[type=checkbox] + label.swatch span.color-wrapper { width: 80%; } .builder-wrapper input[type=checkbox] + label.swatch span.color { width: calc(100% - 2px); height: 0; padding-bottom: 75%; transform: scale(.9); } .builder-wrapper input[type=checkbox] + label.swatch:hover span.color-wrapper { transform: scale(.95); } .builder-wrapper input[type=checkbox].included + label.swatch span.color-wrapper, .builder-wrapper input[type=checkbox]:checked + label.swatch span.color-wrapper { transform: scale(1); } /* END LARGE SWATCHES */ /* IMAGE OPTION LABELS */ .builder-wrapper input[type=checkbox] + label.image { vertical-align: top; display: inline-block; margin: 0; padding: 1em 0; background: none; text-align: center; width: 25%; color: #999; border: none; } .builder-wrapper input[type=checkbox] + label.image span.text-wrapper { display: inline-block; margin: .5em 0; text-transform: uppercase; background-color: #fff; } .builder-wrapper input[type=checkbox] + label.image span.image-wrapper { display: inline-block; border: 2px solid rgba(255,255,255,0); width: 90%; transform: scale(.9); opacity: .8; transition: all .2s; } .builder-wrapper input[type=checkbox] + label.image span.image { display: block; width: calc(100% - 4px); padding-bottom: 75%; border: 1px solid rgba(255,255,255,0); background-position: center; background-repeat: no-repeat; background-size: contain; } .builder-wrapper input[type=checkbox] + label.image .cost-wrapper { float: none; font-size: .8em; padding: 0; margin-top: -.5em; } .builder-wrapper input[type=checkbox] + label.image:hover span.image-wrapper { transform: scale(.95); opacity: 1; } .builder-wrapper input[type=checkbox]:checked + label.image span.image-wrapper, .builder-wrapper input[type=checkbox].included + label.image span.image-wrapper { border-color: black; box-shadow: 0 0 10px rgba(0,0,0,.8); transform: scale(1); opacity: 1; } .builder-wrapper input[type=checkbox]:checked + label.image span.image, .builder-wrapper input[type=checkbox].included + label.image span.image { border-color: white; background-color: white; } /* SWATCH-MATCHED IMAGES */ .builder-wrapper input[type=checkbox] + label.image span.image-wrapper { width: 80%; opacity: 1; transform: scale(1); } .builder-wrapper input[type=checkbox] + label.image span.image { width: calc(100% - 2px); border: 1px solid #fff; transform: scale(.9); /*background-size: cover;/**/ } .builder-wrapper input[type=checkbox] + label.image:hover span.image-wrapper { border-color: #ccc; transform: scale(.95); } .builder-wrapper input[type=checkbox] + label.image:hover span.image { } .builder-wrapper input[type=checkbox]:checked + label.image span.image-wrapper, .builder-wrapper input[type=checkbox].included + label.image span.image-wrapper { border-color: #000; transform: scale(1); } .builder-wrapper input[type=checkbox]:checked + label.image span.image, .builder-wrapper input[type=checkbox].included + label.image span.image { } /* END SWATCH-MATCHED IMAGES */ /* ADJUSTMENTS FOR LIST VIEW */ .builder-wrapper:not(.dpwpoptionslist-specifications) .builder-form-list { column-count: 4; } @media only screen and (max-width:1100px) { .builder-wrapper:not(.dpwpoptionslist-specifications) .builder-form-list { column-count: 3; } } @media only screen and (max-width:760px) { .builder-wrapper:not(.dpwpoptionslist-specifications) .builder-form-list { column-count: 2; } } @media only screen and (max-width:300px) { .builder-wrapper:not(.dpwpoptionslist-specifications) .builder-form-list { column-count: 1; } } .builder-wrapper .builder-form-list .option-list-section { break-inside: avoid-column; padding-bottom: 2em; } .builder-wrapper .builder-form-list .option-list-section div.option-list-items { margin: .5em 0; border-top: 1px solid rgba(0,0,0,.1); margin-right: 3em; } .builder-wrapper .builder-form-list .option-list-section label, .builder-wrapper .builder-form-list .option-list-section div.spec { display: block; cursor: auto; padding: .25em 20% .25em 0; border-bottom: 1px solid rgba(0,0,0,.1); font-size: .9em; position: relative; background: none !important; } .builder-wrapper .builder-form-list .option-list-section div.spec { padding-right: 0; } .builder-wrapper .builder-form-list .option-list-section label .cost-wrapper { display: none; color: #666; text-transform: uppercase; position: absolute; top: .25em; right: 0; } .builder-wrapper.show-prices .builder-form-list .option-list-section label .cost-wrapper, .builder-wrapper .builder-form-list .option-list-section input[type=checkbox].standard + label .cost-wrapper { display: block; } .builder-wrapper .builder-form-list .option-list-section input[type=checkbox].no-charge + label .cost-wrapper { display: none; } .builder-wrapper .builder-form-list .option-list-section input[type=checkbox] + label.swatch { width: 33%; font-size: .9em; color: #000; padding-bottom: 0; } .builder-wrapper .builder-form-list .option-list-section input[type=checkbox] + label.swatch span.color-wrapper { width: 90%; border-color: white; } .builder-wrapper .builder-form-list .option-list-section input[type=checkbox] + label.swatch .cost-wrapper { top: 1.5em; background-color: #fff; } .builder-wrapper .builder-form-list .option-list-section input[type=checkbox] + label.swatch span.color-wrapper span.color { width: 100%; } .builder-wrapper .builder-form-list .option-list-section input[type=checkbox] + label.swatch span.text-wrapper { vertical-align: top; margin-top: 0; text-transform: none; } .builder-wrapper .builder-form-list .option-list-section input[data-option_key="0"] + label.swatch .cost-wrapper { display: none; } /*hide .hidden options by default*/ .builder-wrapper .builder-form-list input[type=checkbox].allhiddenlist-subject + label, .builder-wrapper .builder-form-list input[type=checkbox].allhiddenlist-subject + label.swatch { display: none; } /* SUMMARY */ .builder-wrapper .summary-wrapper { font-size: .8em; } .builder-wrapper .summary-wrapper ul, .builder-wrapper .summary-wrapper li { list-style-type: none; margin: 0; padding: 0; } .builder-wrapper .summary-wrapper li { margin: .75em 0; } .builder-wrapper .summary-wrapper li ul { display: none; } .builder-wrapper.builder-dealer-wrapper .summary-wrapper li ul { } .builder-wrapper .summary-wrapper li.active ul { display: block; } .builder-wrapper.builder-customer-wrapper .summary-wrapper li ul li { padding-left: 2em; padding-right: 1em; padding-top: .2em; padding-bottom: .2em; margin: 0; border-bottom: 1px solid #d7d7d7; } .builder-wrapper.builder-customer-wrapper .summary-wrapper li ul li:nth-of-type(odd) { background-color: #f5f5f5; } .builder-wrapper.builder-customer-wrapper .summary-wrapper p { padding: 0 1em; } .builder-wrapper.builder-dealer-wrapper .summary-wrapper li ul li { padding-left: 1em; padding-right: 1em; padding-top: .5em; padding-bottom: .5em; margin: 0; border-bottom: 1px solid #d7d7d7; } .builder-wrapper .summary-wrapper li ul li:nth-of-type(odd) { background-color: #f5f5f5; } .builder-wrapper.builder-dealer-wrapper fieldset.builder-option-category.builder-category-summary { margin-top: 1em; } .builder-wrapper.builder-hybrid-wrapper fieldset.builder-option-category.builder-category-summary { margin-top: 1em; border-top: 4px solid #000; border-left: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; } .builder-wrapper.builder-hybrid-wrapper .width-33 fieldset.builder-option-category.builder-category-custom { margin-bottom: 1em; border-top: 4px solid #000; border-left: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; } .builder-wrapper.builder-hybrid-wrapper .width-33 fieldset.builder-option-category.builder-category-custom .custom-wrapper { padding: 1em; } /* .builder-wrapper.builder-customer-wrapper .summary-wrapper li.summary-option.modified-from-base { background-color:#ccc; font-weight:bold; } /**/ .builder-wrapper .summary-wrapper .summary-category { cursor: pointer; display: inline-block; width: 100%; font-weight: bold; width: 100%; border-bottom: 1px solid #fff; text-transform: uppercase; padding: 0 1em; box-sizing: border-box; } .builder-wrapper .summary-wrapper .active .summary-category { border-color: black; } .builder-wrapper .summary-wrapper .summary-category .collapse { display: none; position: relative; bottom: 1px; } .builder-wrapper .summary-wrapper .summary-category .expand { display: inline; } .builder-wrapper .summary-wrapper .active .summary-category .collapse { display: inline; } .builder-wrapper .summary-wrapper .active .summary-category .expand { display: none; } .builder-wrapper .summary-wrapper .summary-total { border-bottom: none; } .dhflex.customer-images .dhpb-total-wrapper { background: #141d22; color: #fff; font-size: 1em; text-align: center; padding: .5em; margin: 0; } .dhflex.customer-images .dhpb-total-wrapper span { font-weight: bold; font-size: 1.3em } .dhflex.customer-images p.disclaimer-consumer { color: #000; margin: 0; padding: .4em 0 .5em; font-style: italic; line-height: 1; } .dhflex.customer-images p.disclaimer-consumer small { font-size: 10px; } .dhpb-continue { margin: 0; } .dhpb-continue .btn { text-transform: uppercase; background-color: var(--retail-btn-color); color: #fff; width: 100%; box-sizing: border-box; text-align: center; font-weight: bold; font-size: 1.2em; border: 1px solid #000; } .dhpb-continue .btn:hover { border-color: #fff; } .builder-customer-wrapper:not(.builder-hybrid-wrapper) .builder-category-summary { display: none; } #social-share div { display: inline-block; vertical-align: top !important; margin-right: .5em; line-height: 1; } #social-share div iframe { margin: 0; vertical-align: top; } @media only screen and (max-width: 600px) { .dhflex.customer-images .dhpb-total-wrapper { margin-bottom: 0; } .dhflex.customer-images p.disclaimer-consumer { display: none; } .builder-wrapper.builder-customer-wrapper .builder-sticky-wrapper { padding-bottom: .5em; } .dhpb-continue { position: fixed; bottom: 0; left: 0; width: 100%; } .dhpb-continue .btn, .dhpb-continue { margin: 0; } } .builder-form-hybrid { border-left: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; } /* exception to hide promos from hybrid/retail view */ .builder-form-dealer[data-viewing=c3] .builder-option-category.price_adjustments, .builder-form-dealer[data-viewing=c4] .builder-option-category.price_adjustments { display: none; } /* SHOW/HIDE */ /*disabled always hides and cannot be overwritten*/ .builder-wrapper input[type=checkbox].disabled, .builder-wrapper input[type=checkbox].disabled + label { display: none !important; } /*hide .hidden options by default*/ .builder-wrapper input[type=checkbox].hidden + label, .builder-wrapper input[type=checkbox].hidden + label.swatch { display: none; } /*if .hide is added, hide items*/ .builder-wrapper input[type=checkbox].hide + label, .builder-wrapper input[type=checkbox].hide + label.swatch { display: none; } /*if .show is added, show (even hidden) items*/ .builder-wrapper input[type=checkbox].show + label, .builder-wrapper input[type=checkbox].hidden.show + label, .builder-wrapper input[type=checkbox].hide.show + label, .builder-wrapper input[type=checkbox].hidden.hide.show + label { display: block; } /*if .show is added, show (even hidden) items (alt rule for swatch/image options)*/ .builder-wrapper input[type=checkbox].show + label.swatch, .builder-wrapper input[type=checkbox].hidden.show + label.swatch .builder-wrapper input[type=checkbox].hide.show + label.swatch, .builder-wrapper input[type=checkbox].hidden.hide.show + label.swatch, .builder-wrapper input[type=checkbox].show + label.image, .builder-wrapper input[type=checkbox].hidden.show + label.image .builder-wrapper input[type=checkbox].hide.show + label.image, .builder-wrapper input[type=checkbox].hidden.hide.show + label.image { display: inline-block; } .builder-wrapper section.hidden, .builder-wrapper fieldset.hidden { display: none; } /* .builder-wrapper .option-list-section input[type=checkbox].hidden + label { display: block; } /*show .hidden options on lists (standards & options page) */ /* .builder-wrapper .option-list-section input[type=checkbox].hidden + label.swatch { display: inline-block; } /*show .hidden options on lists (standards & options page) (alt rule for swatch options) */ /* DISCONTINUED */ /*.builder-wrapper input[type=checkbox].discontinued:not(:checked):not(.included) + label { display: none !important; } /* this line replaces the line below if discontinued items should show if they are 'included' in another package */ .builder-wrapper input[type=checkbox].discontinued:not(.processed-preselected-force):not(:checked) + label { display: none !important; } .builder-wrapper input[type=checkbox].discontinued + label { background-color: #fee !important; outline-color: #fcc !important; } .builder-wrapper input[type=checkbox].discontinued:checked + label { outline-color: #900 !important; } .builder-wrapper input[type=checkbox].discontinued + label > .text-wrapper:after { content: "(DISCONTINUED)"; color: #900; font-size: .8em; display: inline-block; margin-left: .5em; } /* REQUIRED/PROHIBITED/READONLY/INCLUDED*/ .builder-wrapper .builder-working-form:not(.builder-form-list) input[type=checkbox].required:not(.message) + label, .builder-wrapper .builder-working-form:not(.builder-form-list) input[type=checkbox].prohibited:not(.message):not(.allowed) + label, .builder-wrapper .builder-working-form:not(.builder-form-list) input[type=checkbox].readonly:not(.message) + label, .builder-wrapper .builder-working-form:not(.builder-form-list) input[type=checkbox].included:not(.message) + label { opacity: .5; } /* assist with debugging required and included items .builder-wrapper .builder-working-form:not(.builder-form-list) input[type=checkbox].required.included:not(.message) + label { background-color: #900; } .builder-wrapper .builder-working-form:not(.builder-form-list) input[type=checkbox].required.included:not(.message):checked + label { background-color: #090; } */ /* MESSAGE LABELS */ .builder-wrapper input[type=checkbox].message + label { background-image: none; background-color: #fcfcd1; cursor: default; } .builder-wrapper .builder-form-dealer input[type=checkbox].message + label, .builder-wrapper .builder-form-dealer input[type=checkbox].message + label:hover { grid-column: 1 / 4; background-color: #fcfcd1; padding-left: .5em; margin-bottom: .66%; outline: 1px solid #990; color: #440; } .builder-wrapper.builder-customer-wrapper input[type=checkbox].message + label, .builder-wrapper.builder-customer-wrapper input[type=checkbox].message + label { padding: .5em 1em; } /* CONSUMER BUILD-AND-PRICE */ .builder-band { background-color: #141d22; color: #fff; height: auto; position: static; top: 2px; left: 0; width: 100%; } .builder-toolbar { background-color: #c6cacc; position: fixed; bottom: 0; z-index: 9; width: 100%; height: 55px; } .builder-toolbar .wrapper, .builder-band .wrapper { } .builder-wrapper.builder-customer-wrapper .builder-toolbar .dhflex { padding: 0 2em; } .builder-toolbar .dhcolumn { height: 55px; padding: 0; font-size: 16px; text-transform: uppercase; text-align: center; margin-bottom: 0; } /* .builder-toolbar .dhcolumn.width-33 { width: auto !important; } .builder-toolbar .dhcolumn.width-33 + .dhcolumn.width-33 { margin-left: 1em; } */ .builder-toolbar .builder-summary { background-color: var(--retail-bg-color); color: #fff; padding: 0 2em; text-align: right; } .builder-toolbar a { color: #fff; text-decoration: none; } .builder-toolbar .builder-summary a, .builder-toolbar .builder-summary span { line-height: 55px; display: inline-block; } .builder-toolbar .builder-summary a { float: left; text-transform: uppercase; } .builder-toolbar .builder-summary span { font-size: 26px; } .builder-toolbar .tools a { line-height: 55px; color: #000; padding-left: 25px; background-position: center left; background-size: 16px; background-repeat: no-repeat; } .builder-toolbar .tools.tools-shared a { background-image: url(../../../img/icon-bab-share.svg); } .builder-toolbar .tools.tools-send a { background-image: url(../../../img/icon-bab-send-to-dealer.svg); } .builder-toolbar .tools.tools-print a { background-image: url(../../../img/icon-bab-print.svg); } .builder-toolbar .tools.tools-download a { background-image: url(../../../img/icon-bab-download.svg); } .builder-toolbar .builder-summary a { color: #fff; padding-left: 25px; background-position: center left; background-size: 16px; background-repeat: no-repeat; background-image: url(../../../img/icon-bab-view-summary.svg); } .builder-sticky-wrapper { position: relative; top: 0px; padding: 1em 1rem; } .builder-customer-wrapper .builder-sticky-wrapper { background-color: #ccc; padding: .25em .5em 0 } .builder-image-wrapper { position: relative; top: 0px; } .builder-customer-wrapper:not(.builder-hybrid-wrapper) .builder-image-wrapper { min-height: 2.7em; background-color: #ccc; } /* img.builder-secondary.overhead { transform:rotate(180deg) scale(.8); } /**/ .model-build-nav { background-color: var(--retail-bg-color); height: 100px; text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center; } .model-build-nav .wrapper { padding: 0 2em; } .model-build-nav .wrapper h1 { margin: 0; line-height: 100px; color: #fff; } .wrapper .builder-account { background-color: #e5e5e5; } .builder-account > div > div { line-height: 1.4em; padding: .6em 2em; margin: 1em 0; } .builder-account > div > div > div { float: right; } .builder-account a.button { line-height: normal; padding: .25em 1.5em; background-color: #0073aa; color: #fff; text-decoration: none; } .builder-account a.button + a.button { background-color: #212121; } .builder-account a.button + a.button + a.button { background-color: #a5a5a5; } .button.pdf { padding: .5em 1.5em; padding-left: calc(1.5em + 25px); border: 1px solid #999; font-size: 1.1em; background: transparent url(../../../img/icon-pdf.svg) no-repeat 1.5em center; background-size: 20px; opacity: .8; } .button.pdf:hover { opacity: 1; border-color: black; } .btn.pdf { padding-left: 45px; background-image: url(../../../img/icon-pdf.svg); background-repeat: no-repeat; background-position: 1.5em center; background-size: 20px; } .btn.pdf:hover { } a.save-as-new { display: none; } .save-again a.save-as-new { display: inline-block; } .builder-account .builder-account-welcome { transition: all .5s ease-in-out; max-height: 6em; overflow: hidden; } .builder-account.save .builder-account-welcome { max-height: 0; } .builder-account .builder-account-save { transition: all .5s ease-in-out; max-height: 0; overflow: hidden; } .builder-account.save .builder-account-save { max-height: 6em; } /* hide irrelevant print button */ .builder-wrapper .builder-form-consumer .builder-category-summary button { display: none; } /* DEALER ORDER FORM */ .builder-wrapper .builder-form-dealer div.spec { font-size: .7em; box-sizing: border-box; outline: 1px solid #eee; padding: .25em; margin-bottom: 2%; } .builder-wrapper.builder-dealer-wrapper h3.option-category { font-size: 1.2em; } .builder-wrapper.builder-dealer-wrapper h4.option-group { font-size: .9em; font-weight: normal; text-transform: uppercase; padding: .5em; background-color: #ddd; margin: .2em -.5em .7em; } .builder-wrapper .builder-form-dealer > fieldset { padding: .5em; margin-bottom: .5em; } .builder-form-dealer input[type=checkbox] + label { display: inline-block; } .builder-wrapper .builder-form-dealer .builder-option-group > section { display: grid; grid-gap: 1em; grid-template-columns: repeat(3, 1fr); } .builder-wrapper .builder-form-dealer a.add-custom-option, .builder-wrapper .builder-form-dealer input[type=checkbox] + label { font-size: .7em; box-sizing: border-box; margin: 0 0 2% 0; outline: 1px solid #eee; padding-left: 1.5em; background-position-x: .3em; background-position-y: .75em; } .builder-wrapper .builder-form-hybrid a.add-custom-option { display:block; text-decoration:none; box-sizing: border-box; margin: 0 1px 2% 1px; outline: 1px solid #eee; padding: 1em; font-size: .6em; font-weight: bold; text-transform: uppercase; } .builder-wrapper .builder-form-dealer a.add-custom-option { padding: 1em; font-size: .6em; font-weight: bold; text-transform: uppercase; } .builder-wrapper .builder-form-dealer input[type=checkbox].allnoadjustments-subject + label > .text-wrapper:after { content: " [excluded from price adjustments]"; display: inline; color: #900; font-weight: bold; } .builder-wrapper .builder-form-dealer input[type=checkbox].allnomargin-subject + label > .text-wrapper:after { content: " [doesn't scale with margins]"; display: inline; color: #900; font-weight: bold; } .builder-wrapper .builder-form-dealer input[type=checkbox].allnoadjustments-subject.allnomargin-subject + label > .text-wrapper:after { content: " [excluded from price/margin adjustments]"; } /* IE10/11 fixes - due to no CSS Grid support */ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* flexbox version (last line doesn't sort nicely) .builder-wrapper .builder-form-dealer .builder-option-group > section { display: flex; flex-flow: row wrap; justify-content: space-between; } .builder-wrapper .builder-form-dealer a.add-custom-option, .builder-wrapper .builder-form-dealer input[type=checkbox] + label { display: block; flex-basis: 30%; margin: 0 0 2% 0; } */ /* float version (extra clear:left; when items are hidden) */ .builder-wrapper .builder-form-dealer a.add-custom-option, .builder-wrapper .builder-form-dealer input[type=checkbox] + label { display: block; float: left; width: 31%; margin: 0 2% 2% 0; } .builder-wrapper .builder-form-dealer input[type=checkbox]:nth-of-type(3n+4) + label { clear: left; } /**/ } .builder-wrapper .builder-form-hybrid a.add-custom-option:hover, .builder-wrapper .builder-form-dealer a.add-custom-option:hover, .builder-wrapper .builder-form-dealer input[type=checkbox] + label:hover { background-color: #e3e3e3; outline: 1px solid #000; } .builder-wrapper .builder-form-dealer input[type=checkbox] + label .cost-wrapper { font-weight: bold; background: #666; color: #fff; padding: .25em; margin-top: -.5em; margin-left: 1em; } .builder-wrapper .builder-form-dealer input[type=checkbox] + label .cost-wrapper.standard { color: #ccc; } .builder-wrapper .builder-form-hybrid input.custom-option[type=checkbox] + label, .builder-wrapper .builder-form-dealer input.custom-option[type=checkbox] + label { position: relative; padding-bottom: 3em; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label .tools-wrapper, .builder-wrapper .builder-form-dealer input[type=checkbox] + label .tools-wrapper { display: block; position: absolute; bottom: 0; left: 0; width: 100%; background-color: #444; box-sizing: border-box; padding: .5em; font-size: .9em; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label .tools-wrapper a, .builder-wrapper .builder-form-dealer input[type=checkbox] + label .tools-wrapper a{ color: #fff; display: inline-block; padding: 0 1em 0 0; font-weight: bold; text-transform: uppercase; } .builder-wrapper .builder-form-hybrid input.custom-option[type=checkbox] + label { background-position:1em .3em; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label .tools-wrapper { padding: .5em 1.3em; background-color:#888; } .builder-wrapper .builder-form-hybrid input.custom-option + label + a.add-custom-option { margin-top:2%; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label .edit-wrapper p, .builder-wrapper .builder-form-dealer input[type=checkbox] + label .edit-wrapper p { clear: both; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label .edit-wrapper input, .builder-wrapper .builder-form-dealer input[type=checkbox] + label .edit-wrapper input { font-size: .9em; margin-right: .5em; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label .edit-wrapper input[readonly], .builder-wrapper .builder-form-dealer input[type=checkbox] + label .edit-wrapper input[readonly] { border-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0); font-weight: bold; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label span.edit-wrapper, .builder-wrapper .builder-form-dealer input[type=checkbox] + label span.edit-wrapper, .builder-wrapper .builder-form-hybrid input[type=checkbox] + label span.edit-tools, .builder-wrapper .builder-form-dealer input[type=checkbox] + label span.edit-tools { display: none; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label.edit-option, .builder-wrapper .builder-form-dealer input[type=checkbox] + label.edit-option { background-image: none; padding-left: .5em; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label.edit-option span, .builder-wrapper .builder-form-dealer input[type=checkbox] + label.edit-option span { display: none; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label.edit-option span.edit-wrapper, .builder-wrapper .builder-form-dealer input[type=checkbox] + label.edit-option span.edit-wrapper, .builder-wrapper .builder-form-hybrid input[type=checkbox] + label.edit-option span.edit-tools, .builder-wrapper .builder-form-dealer input[type=checkbox] + label.edit-option span.edit-tools { display: block; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label.edit-option a.remove-custom-option, .builder-wrapper .builder-form-dealer input[type=checkbox] + label.edit-option a.remove-custom-option { display: none; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label.edit-option.edit-new-option a.remove-custom-option, .builder-wrapper .builder-form-dealer input[type=checkbox] + label.edit-option.edit-new-option a.remove-custom-option { display: inline; } .builder-wrapper .builder-form-hybrid input[type=checkbox] + label.edit-option.edit-new-option a.cancel-custom-option, .builder-wrapper .builder-form-dealer input[type=checkbox] + label.edit-option.edit-new-option a.cancel-custom-option { display: none; } .builder-wrapper .builder-form-dealer input[type=checkbox]:checked + label, .builder-wrapper .builder-form-dealer input[type=checkbox].included + label { background-color: #e3e3e3; outline: 1px solid #666; } /* .builder-wrapper .builder-form-dealer input.basepreselect + label { font-weight: bold; color: #fff; } .builder-wrapper .builder-form-dealer input.basepreselect + label > .text-wrapper { background-color: #111111; padding:0 .25em; display:inline-block; } /* mark base preselects in some way -- but take care about icons */ .builder-wrapper .dealer-builder-price { background-color: #212121; color: #fff; padding: .25em .5em; text-transform: uppercase; font-weight: bold; } .builder-wrapper .dealer-builder-price span { float: right; } .builder-wrapper .dealer-builder-original-price { background-color: #ccc; color: #666; padding: .25em .5em; text-transform: uppercase; font-weight: bold; } .builder-wrapper .dealer-builder-original-price.hidden { display: none; } .builder-wrapper .dealer-builder-original-price span { float: right; } .builder-wrapper .dealer-builder-price.total-wrapper { border: 1px solid #d7d7d7; padding: 0; /* box-shadow: rgba(0,0,0,.3) 3px 3px 5px; */ } .builder-wrapper .dealer-builder-price.total-wrapper span { display: block; text-align: center; float:none; } .builder-wrapper .dealer-builder-price.total-wrapper .builder-price-header { padding: .25em; background-color: #000; text-transform: uppercase; color: #fff; font-weight:normal; } .builder-wrapper .dealer-builder-price.total-wrapper .builder-price-total { font-weight: bold; color:#000; background-color:#fff; font-size: 2.5em; padding: .3em 0; } .builder-wrapper ul.errors, .builder-wrapper ul.errors li { margin: 0; padding: 0; list-style-type: none; } .builder-wrapper ul.errors li { display: none; } .builder-wrapper ul.errors li.haserror { display: block; position: relative; border: 1px solid #900; background-color: #fff3f3; padding: .25em; margin-bottom: .25em; color: #900; font-size: 11px; } .builder-wrapper ul.errors li.haserror:before { content: "ERROR: "; font-weight: bold; } .builder-wrapper ul.errors li.haserror:after { content: "x"; font-weight: bold; display: block; position: absolute; top: 2px; right: 2px; width: 1em; text-align: center; line-height: 1; background-color: #900; color: #fff; cursor: pointer; } .builder-customer-wrapper.builder-wrapper ul.errors li.haserror { background-color: #900; color: #fff; } .builder-save-tools .builder-deleted-order, .builder-save-tools .builder-place-order { display: none; } .builder-save-tools .builder-place-order h2 { margin-top: 0; } .builder-save-tools .builder-place-order p.error { color: #c00; font-weight: bold; font-size: .9em; } .builder-save-tools.placing-order .builder-save-buttons { display: none; } .builder-save-tools.placing-order .builder-place-order { display: block; } .builder-save-tools .builder-progress-bar { visibility: hidden; } .builder-save-tools.loading .builder-progress-bar, .builder-save-tools.processing-order .builder-progress-bar { visibility: visible; } .builder-save-tools.loading .builder-save-buttons { opacity: .2; } .builder-save-tools.placing-order.processing-order .builder-place-order { display: none; } .builder-save-tools.placing-order.deleted .builder-place-order { display: none; } .builder-save-tools.placing-order.deleted .builder-deleted-order { display: block; } .builder-save-tools.single-order { } .builder-save-tools.multi-order .save-as-order-details:not(.order-meta-payment_method) { display: none; } .builder-save-tools.type-stock .order-meta-customer_details, .builder-save-tools.type-stock .order-meta-customer_name, .builder-save-tools.type-stock .order-meta-customer_email, .builder-save-tools.type-stock .order-meta-customer_phone { display: none; } .builder-wrapper .dealer-margin-options { font-size: .7em; margin: 1em 0 0; } .builder-wrapper .dealer-margin-options label { display: inline-block; margin-left: .5em; } .builder-wrapper .dealer-margin-options input { display: none; } .builder-wrapper .dealer-margin-options span { padding: 2px 4px; border: 1px solid #aaa; display: inline-block; cursor: pointer; } .builder-wrapper .dealer-margin-options input:checked + span { background-color: #212121; border-color: #212121; color: #fff; } .builder-wrapper .dealer-custom-mu-toggle.always-hidden, .builder-wrapper .dealer-custom-mu-toggle.hidden, .builder-wrapper .dealer-custom-mu.always-hidden, .builder-wrapper .dealer-custom-mu.hidden.builder-wrapper .dealer-custom-mu.always-hidden, .builder-wrapper .dealer-custom-mu.hidden { display: none; } .builder-wrapper .dealer-custom-mu { font-size: 11px; text-transform: uppercase; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: .5em 0; } .builder-wrapper .dealer-custom-mu label { display: inline-block; width: 60%; } .builder-wrapper .dealer-custom-mu + .dealer-custom-mu { border-top: none; } .builder-wrapper .dealer-custom-mu input[type=text] { width: 2em; font-size: 11px; border: none; } .builder-wrapper .dealer-custom-mu input[type=number] { width: 4.5em; font-size: 11px; } .builder-wrapper .order-detail-fields { display: block; font-size: 12px; text-transform: uppercase; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: .5em 0; } .builder-wrapper .order-detail-fields strong { display: inline-block; width: 50%; } .builder-wrapper .order-detail-fields select, .builder-wrapper .order-detail-fields input[type=text] { width: 35%; font-size: 12px; } .builder-hybrid-wrapper .summary-wrapper .summary-total, .builder-dealer-wrapper .summary-wrapper .summary-total { padding: .5em 1em; background-color: #ccc; } .summary-wrapper .summary-total .text-wrapper { text-transform: none; } .builder-hybrid-wrapper .summary-wrapper .summary-total.summary-total-emphasize, .builder-dealer-wrapper .summary-wrapper .summary-total.summary-total-emphasize { padding: .5em 1em; background-color: #212121; color: #fff; } /* MARGIN SLIDERS */ .dealer-custom-mu .range-slider { float: right; display: inline-block; width: calc(100% - 6.5em); } .dealer-custom-mu .range-slider.noUi-target { background-color: #6F6F6F; height: 7px; margin-top: 5px; border: none; } .dealer-custom-mu .range-slider .noUi-handle { width: 20px; left: -10px; height: 16px; top: -5px; border-color: #bbb; } .dealer-custom-mu .range-slider .noUi-handle:after, .dealer-custom-mu .range-slider .noUi-handle:before { height: 10px; top: 2px; left: 7px; background-color: #ddd; } .dealer-custom-mu .range-slider .noUi-handle:after { left: 10px; } /* SHARED VIEW */ .builder-wrapper.builder-customer-wrapper.shared-view .builder-option-category { display: none; } .builder-wrapper.builder-customer-wrapper.shared-view .builder-option-category.builder-category-summary { display: block; } .builder-wrapper.builder-customer-wrapper.shared-view fieldset.builder-option-category.builder-expanded > h3, .builder-wrapper.builder-customer-wrapper.shared-view h3 { background: none; padding-left: 0; } .builder-wrapper.builder-customer-wrapper.shared-view h3:after { background: none; } /* EXPAND / COLLAPSE STANDARDS //search: TOGGLESTANDARDS */ .builder-wrapper fieldset { position: relative; } .builder-wrapper fieldset button.toggle-standards { cursor: pointer; position: absolute; top: 1em; right: 0; font-size: 11px; padding: .25em .5em; color: #666; border: 1px solid #666; font-weight: bold; text-transform: uppercase; background: transparent; } .builder-wrapper fieldset button.toggle-standards:hover { background-color: #666; color: #fff; } .builder-wrapper fieldset button.toggle-standards span:nth-child(1), .builder-wrapper fieldset button.toggle-standards.collapsed span:nth-child(3) { display: none; } .builder-wrapper fieldset button.toggle-standards span:nth-child(2) { display: none; } .builder-wrapper fieldset button.toggle-standards.collapsed span:nth-child(1) { display: inline; } .builder-wrapper .builder-form-list section button.toggle-standards.collapsed + div input[type=checkbox].standard + label, .builder-wrapper .builder-form-dealer fieldset button.toggle-standards.collapsed + section > input[type=checkbox].standard + label, .builder-wrapper .builder-form-dealer fieldset button.toggle-standards.collapsed + section > fieldset.builder-group-_empty_ > section > input[type=checkbox].standard + label, .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards.collapsed + section > input[type=checkbox].standard + label.image, .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards.collapsed + section > input[type=checkbox].standard + label.swatch, .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards.collapsed + section > fieldset.builder-group-_empty_ > section > input[type=checkbox].standard + label.image, .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards.collapsed + section > fieldset.builder-group-_empty_ > section > input[type=checkbox].standard + label.swatch .builder-wrapper .builder-form-consumer fieldset button.toggle-standards.collapsed + section > input[type=checkbox].standard + label.image, .builder-wrapper .builder-form-consumer fieldset button.toggle-standards.collapsed + section > input[type=checkbox].standard + label.swatch, .builder-wrapper .builder-form-consumer fieldset button.toggle-standards.collapsed + section > fieldset.builder-group-_empty_ > section > input[type=checkbox].standard + label.image, .builder-wrapper .builder-form-consumer fieldset button.toggle-standards.collapsed + section > fieldset.builder-group-_empty_ > section > input[type=checkbox].standard + label.swatch { display: none; } .builder-wrapper fieldset.builder-option-category > button.toggle-standards { /*top: 2em;*/ right: 4em; display: none; } .builder-wrapper fieldset.builder-option-category.builder-expanded > button.toggle-standards { display: block; } .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards, .builder-wrapper .builder-form-consumer fieldset button.toggle-standards { top: .25em; right: .25em; background-color: #fff; } .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards:hover, .builder-wrapper .builder-form-consumer fieldset button.toggle-standards:hover { background-color: rgba(0,0,0,.5); } .builder-wrapper .builder-form-hybrid fieldset.builder-option-category > button.toggle-standards, .builder-wrapper .builder-form-consumer fieldset.builder-option-category > button.toggle-standards { border-color: #777; color: #777; top: .6em; right: 4em; } .builder-wrapper .builder-form-hybrid fieldset.builder-option-category > button.toggle-standards:hover, .builder-wrapper .builder-form-consumer fieldset.builder-option-category > button.toggle-standards:hover { color: #fff; } /* */ /* animate consumer expand/collapse standards //search: TOGGLESTANDARDS */ .builder-wrapper .builder-form-list section button.toggle-standards + div > input[type=checkbox].standard + label:not(.image):not(.swatch), .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards + section > input[type=checkbox].standard + label:not(.image):not(.swatch), .builder-wrapper .builder-form-consumer fieldset button.toggle-standards + section > input[type=checkbox].standard + label:not(.image):not(.swatch), .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards + section > fieldset.builder-group-_empty_ > section > input[type=checkbox].standard + label:not(.image):not(.swatch), .builder-wrapper .builder-form-consumer fieldset button.toggle-standards + section > fieldset.builder-group-_empty_ > section > input[type=checkbox].standard + label:not(.image):not(.swatch) { overflow: hidden; max-height: 100px; transition: all .2s ease-in-out; } .builder-wrapper .builder-form-list section button.toggle-standards.collapsed + div > input[type=checkbox].standard + label:not(.image):not(.swatch), .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards.collapsed + section > input[type=checkbox].standard + label:not(.image):not(.swatch), .builder-wrapper .builder-form-consumer fieldset button.toggle-standards.collapsed + section > input[type=checkbox].standard + label:not(.image):not(.swatch), .builder-wrapper .builder-form-hybrid fieldset button.toggle-standards.collapsed + section > fieldset.builder-group-_empty_ > section > input[type=checkbox].standard + label:not(.image):not(.swatch), .builder-wrapper .builder-form-consumer fieldset button.toggle-standards.collapsed + section > fieldset.builder-group-_empty_ > section > input[type=checkbox].standard + label:not(.image):not(.swatch) { display: block; max-height: 0; border-bottom-width: 0; padding-top: 0; padding-bottom: 0; } /* */ /* hybrid styles */ .builder-wrapper.builder-customer-wrapper .builder-form-hybrid { border-top:4px solid #111111; } @media only screen and (max-width:1120px) { #main { padding-left: 10px; padding-right: 10px; } .builder-wrapper { font-size: 14px; } .builder-wrapper input[type=checkbox] + label.swatch, .builder-wrapper input[type=checkbox] + label.image { width: 33%; } } @media only screen and (max-width:960px) { .builder-wrapper { font-size: 12px; } .builder-account .builder-account-welcome { text-align: center; } .builder-wrapper input[type=checkbox] + label { font-size: .7em; } .builder-toolbar .tools a span { display: none; } .builder-wrapper .builder-form-dealer .builder-option-group > section { grid-template-columns: repeat(2, 1fr); } .builder-wrapper .builder-form-dealer input[type=checkbox].message + label, .builder-wrapper .builder-form-dealer input[type=checkbox].message + label:hover { grid-column: 1 / 3; } } @media only screen and (max-width:900px) { #main { padding-left: 5px; padding-right: 5px; } #main .builder-band { height: auto; } #main .builder-band h2 { float: none; text-align: center; } .builder-toolbar .builder-summary { text-align: center; } .builder-toolbar .dhcolumn.width-50 { width: 60% !important; } .builder-toolbar .dhcolumn.width-50 + .dhcolumn.width-50 { width: 30% !important; } .builder-toolbar .dhcolumn.tools-print, .builder-toolbar .builder-summary a, #main .builder-band p { display: none; } /* .builder-wrapper input[type=checkbox] + label.swatch span.color { height: 3em; width: 3em; } */ } @media only screen and (max-width:800px) { .builder-wrapper .builder-form-dealer .builder-option-group > section { grid-template-columns: repeat(1, 1fr); } .builder-wrapper .builder-form-dealer input[type=checkbox].message + label, .builder-wrapper .builder-form-dealer input[type=checkbox].message + label:hover { grid-column: 1; } } @media only screen and (max-width:700px) { .builder-toolbar .dhcolumn.tools-print { display: none; } .builder-toolbar .dhcolumn.width-50:first-of-type { float: right; } .builder-toolbar .dhcolumn.width-50 { width: auto !important; } .builder-toolbar .dhcolumn.width-33.tools a { margin-left: 1em; display: inline-block; overflow: hidden; font-size: .8em; } } @media only screen and (max-width: 600px) { /*img.builder-secondary { display:none; }/**/ .model-build-nav .wrapper h1, .builder-toolbar .builder-summary span { font-size: 18px; font-weight: bold; } .builder-wrapper.builder-customer-wrapper h3 { font-size: 12px; } .builder-wrapper.builder-customer-wrapper h4 { font-size: 11px; } .builder-wrapper .summary-wrapper, .builder-wrapper input[type=checkbox] + label { font-size: 10px; } .builder-wrapper fieldset button.toggle-standards { font-size: 9px; } .builder-wrapper fieldset button.toggle-standards span { display: none !important; } } @media only screen and (max-width:530px) { .builder-toolbar .builder-summary { padding: 0 1em; } .builder-account .builder-account-welcome { max-height: none; } } /* print summary */ @media print { body.print-summary { background: none; } body.print-summary, body.print-summary .builder-dealer-wrapper { font-size: 8pt; } body.print-summary #header, body.print-summary #left-col, body.print-summary #dev_log, body.print-summary .dealer-margin-options, body.print-summary .dealer-custom-mu, body.print-summary .builder-save-tools, body.print-summary .dealer-builder-notes, body.print-summary .btn.btn-small.white.fright { display: none !important; } body.print-summary .dealer-builder-title input { width: 60%; border: none; } body.print-summary .builder-category-summary { margin-top: -1em; } body.print-summary .summary-total { border: 1px solid black !important; color: #666 !important; background-color: #fff !important; font-size: 1.1em !important; } body.print-summary .dealer-builder-price, body.print-summary .summary-total.summary-total-emphasize { border: 2px solid black !important; color: #000 !important; background-color: #fff !important; font-size: 1.2em !important; } body.print-summary .builder-wrapper > .dhcolumn { display: none; } body.print-summary .builder-wrapper > .dhcolumn + .dhcolumn { display: block; width: 50%; } .btn { display: none !important; } .view-order { font-size: 8pt; } .view-order-details th, .view-order-details td { padding: 1px 2px !important; } .view-order-details-col { width: 100% !important; } .view-order-details-col > .view-order { display: flex; } .view-order-summary { margin-right: .1in; } } /* filterable products */ .builder-wrapper.builder-customer-wrapper .builder-filter-products-wrap { border-right: 1px solid #d5d5d5; } .builder-product-filter .builder-wrapper.builder-customer-wrapper h3, .builder-product-filter .builder-wrapper fieldset.builder-option-category.builder-expanded > h3 { background-image: none; } .builder-wrapper.builder-dealer-wrapper .builder-filter-product.dealer_orders_prohibited { background-color: rgba(150, 0, 0, .2); } .builder-wrapper.builder-dealer-wrapper .builder-filter-product.dealer_orders_prohibited:hover { border-color: #900; background-color: rgba(150, 0, 0, .4); } .builder-product-filter .customer-option-form { border-left: none; border-right: 1px solid #d5d5d5; } div.builder-filter-products { display: grid; grid-gap: 1em; grid-template-columns: repeat(3, 1fr); overflow: auto; margin-right: 1em; margin-top: 1em !important; } .builder-filter-product { /*grid-column:span 1;/**/ text-align: center; padding: 1em 0; border: 1px solid #fff; } .builder-filter-product.hidden { display: none; } .builder-filter-product:hover { background-color: #f5f5f5; border-color: #c6cacc; } .builder-filter-product strong { display: inline-block; margin-top: .5em; font-size: .9em; color: #000; } .builder-filter-footer { background-color: #c6cacc; width: 100%; height: 15px; } .builder-filter-footer .wrapper { padding: 0 2em; } .return-to-floorplans { float: right; text-decoration: none; font-size: .8em; margin-top: calc(50px - 1em); text-transform: uppercase; display: inline-block; border: 1px solid #fff; color: #fff; padding: .25em .5em; } /* filterable table */ table.builder-filter-products > tbody > tr > td { font-size: .8em; white-space: nowrap; } table.builder-filter-products .full-details { display: none; background-color: #ddd; } table.builder-filter-products .full-details table { border-collapse:collapse; } table.builder-filter-products .full-details td { border-color:#aaa; } table.builder-filter-products tr.expanded:not(.hidden) + tr.full-details { display: table-row; } table.builder-filter-products tr.full-details > td { padding:0; } table.builder-filter-products tr.full-details td { width: 100%; white-space:nowrap; } table.builder-filter-products .toggle-details { height: 1.9em; width: 2em; border: none; background: transparent url(../../../img/icon-expand-gray.svg) center center/14px no-repeat; cursor: pointer; } table.builder-filter-products tr.expanded .toggle-details { background-image: url(../../../img/icon-collapse-gray.svg); } /* ranges & sliders */ .builder-category-range .range-slider { margin: 1em 2em; } .builder-category-range .noUi-connect { background-color: var(--retail-scroll-color); } .builder-category-range .range-inputs { text-align: center; margin: 1em; font-size: .8em; } .builder-category-range .range-inputs > * { display: inline; } .builder-category-range .range-checkboxes { display: none; } @media only screen and (max-width:700px) { .builder-filter-products { grid-gap: .5em; grid-template-columns: repeat(2, 1fr); } .builder-wrapper.builder-customer-wrapper > .dhflex.customer-images.zoomed .builder-image-wrapper:after { right: 5px; } .return-to-floorplans span { display: none; } } @media only screen and (max-width:530px) { .builder-filter-products { grid-gap: .1em; grid-template-columns: repeat(1, 1fr); } } @media only screen and (min-width:1500px) { .builder-filter-products { grid-template-columns: repeat(4, 1fr); } } /* IE10/11 fixes - due to no CSS Grid support */ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* flexbox version (last line doesn't sort nicely)*/ .builder-filter-products { display: flex; flex-flow: row wrap; justify-content: space-between; } .builder-filter-product { display: block; flex-basis: 30%; margin: 0 0 2% 0; } /**/ /* float version (extra clear:left; when items are hidden, which happens a lot) .builder-filter-product { display: block; float: left; width: 31%; margin: 0 2% 2% 0; } .builder-filter-product:nth-of-type(3n+4) { clear: left; } /**/ } #builder-filter-toggle, #builder-filter-apply { display: none; height: 34px; border: 1px solid #d5d5d5; border-bottom: 4px solid #111111; } #builder-filter-toggle div, #builder-filter-apply div { margin: .25em 0; } #builder-filter-toggle div, #builder-filter-apply div { text-transform: uppercase; color: #000; padding: .25em .75em; font-weight: normal; font-size: 2em; cursor: pointer; position: relative; } #builder-filter-toggle div::after { content: " "; display: block; position: absolute; top: 0; right: 0; width: 2.5em; height: 100%; background: url(../../../img/nav-arrow.svg) no-repeat center center/6px; transform: rotate(90deg); } #builder-filter-toggle div, #builder-filter-apply div { margin: 0; font-family: Basic; text-transform: uppercase; color: #000; font-weight: 700; font-size: 1em; cursor: pointer; padding: .5em 1em; } #builder-filter-toggle.active div::after { transform: rotate(270deg); } @media (max-width:600px) { #builder-filter-toggle, #builder-filter-apply { display: block; } .builder-product-filter .builder-customer-wrapper { display: block; position: relative; } .builder-product-filter .customer-option-form { position: absolute; left: 0; top: 40px; width: 100%; /* height:auto; */ display: none; background-color: #fff; } #builder-filter-toggle.active + .customer-option-form { display: block; } .builder-product-filter .builder-filter-products-wrap { width: 100%; display: block; } }