@import url("https://www.cafeappliances.com/content/static/fonts/ss-black-tie-regular/ss-black-tie-regular.css"); body:not(.THIS-STYLA-SCRIPT-CLASS-DOES-NOT-EXIST), html:not(.THIS-STYLA-SCRIPT-CLASS-DOES-NOT-EXIST) { height: auto; } :not(#\\20) .stylaApp * { box-sizing: border-box; } /** * styla-styles.css --- Styles for certain HTML blocks on Cafe * Appliances pages managed in Styla. * * IMPORTANT: * * You must prefix all selectors with the following [1]: * * .custom-html-block { * ... * } * * All hand-coded HTML blocks must be wrapped in: * *
* ... *
* * EXCEPTIONS: * * 1. To address elements like #html966798, where you edit the id of * that element in Styla, do **not** include `.custom-html-block` * in the prefix. * * #html966798 { * ... * } * * --- * * [1] `:not(#\\20) .stylaApp` is per Styla recommendation. * * `.custom-html-block` is so we can write styles that **only** * affect hard-coded HTML blocks. */ /** * General Styles for Hard-Coded HTML Blocks in Styla. * * Much of this is duplicated from the Cafe Appliances live site. */ /* *Haier Colors: *Haier Blue #005aaa or #005aaa *Night: #151515 *Light Grey: #eff0f0 *Iron: #6e6e6e *Skyscraper: #32beff *White: #fff *Concrete: #d9d9d9 *Light Skyscraper: #c5efff *Medium Skyscraper: #86daff */ :not(#\\20) .stylaApp.stylaApp .custom-html-block { /* NOTE ^^^^^^^^^^^^^^^^^^ class doubling for specificity */ font-size: 16px; box-sizing: border-box; } /* === General ===*/ :not(#\\20) .stylaApp .custom-html-block button, :not(#\\20) .stylaApp .custom-html-block input, .custom-html-block input, :not(#\\20) .stylaApp .custom-html-block optgroup, :not(#\\20) .stylaApp .custom-html-block select, :not(#\\20) .stylaApp .custom-html-block textarea { color: inherit; font: inherit; margin: 0 } :not(#\\20) .stylaApp .custom-html-block button { overflow: visible } :not(#\\20) .stylaApp .custom-html-block button, :not(#\\20) .stylaApp .custom-html-block select { text-transform: none } :not(#\\20) .stylaApp .custom-html-block button, :not(#\\20) .stylaApp .custom-html-block html input[type=button], :not(#\\20) .stylaApp .custom-html-block input[type=reset], :not(#\\20) .stylaApp .custom-html-block input[type=submit] { -webkit-appearance: button; cursor: pointer } :not(#\\20) .stylaApp .custom-html-block button[disabled], :not(#\\20) .stylaApp .custom-html-block html input[disabled] { cursor: default } :not(#\\20) .stylaApp .custom-html-block button::-moz-focus-inner, :not(#\\20) .stylaApp .custom-html-block input::-moz-focus-inner { border: 0; padding: 0 } :not(#\\20) .stylaApp .custom-html-block input, .custom-html-block input { line-height: normal } :not(#\\20) .stylaApp .custom-html-block input[type=checkbox], :not(#\\20) .stylaApp .custom-html-block input[type=radio] { box-sizing: border-box; padding: 0 } :not(#\\20) .stylaApp .custom-html-block input[type=number]::-webkit-inner-spin-button, :not(#\\20) .stylaApp .custom-html-block input[type=number]::-webkit-outer-spin-button { height: auto } /* === Lists ===*/ :not(#\\20) .stylaApp .custom-html-block dl, :not(#\\20) .stylaApp .custom-html-block ol, :not(#\\20) .stylaApp .custom-html-block ul { color: #151515; font-size: 1rem; list-style-position: outside; margin-bottom: 1.5rem; line-height: 1.6; } :not(#\\20) .stylaApp .custom-html-block ol ol, :not(#\\20) .stylaApp .custom-html-block ol ul, :not(#\\20) .stylaApp .custom-html-block ul ol, :not(#\\20) .stylaApp .custom-html-block ul ul { margin-left: 1.2rem; margin-bottom: 0 } :not(#\\20) .stylaApp .custom-html-block ul { margin-left: 1.15rem } :not(#\\20) .stylaApp .custom-html-block ol { margin-left: 1.15rem } :not(#\\20) .stylaApp .custom-html-block li { margin-bottom: 1rem; } /** * General Utility Styles */ :not(#\\20) .stylaApp .custom-html-block .margin-btm-0 { margin-bottom: 0 !important; } :not(#\\20) .stylaApp .custom-html-block .margin-btm-1em { margin-bottom: 1rem !important; } :not(#\\20) .stylaApp .custom-html-block .margin-btm-2em { margin-bottom: 2rem !important; } :not(#\\20) .stylaApp .custom-html-block .margin-top-0 { margin-top: 0 !important; } :not(#\\20) .stylaApp .custom-html-block .margin-top-1em { margin-top: 1rem !important; } :not(#\\20) .stylaApp .custom-html-block .text-left { text-align: left !important; } :not(#\\20) .stylaApp .custom-html-block .text-center { text-align: center !important; } :not(#\\20) .stylaApp .custom-html-block .text-right { text-align: right !important; } :not(#\\20) .stylaApp .custom-html-block .text-justify { text-align: justify !important; } :not(#\\20) .stylaApp .custom-html-block .text-bold { font-weight: bold; } :not(#\\20) .stylaApp .custom-html-block .text-italic { font-style: italic; } :not(#\\20) .stylaApp .custom-html-block .underline { text-decoration: underline !important; } :not(#\\20) .stylaApp .custom-html-block .display-table { display: table; } :not(#\\20) .stylaApp .custom-html-block .display-table-row { display: table-row; } :not(#\\20) .stylaApp .custom-html-block .display-table-cell { display: table-cell; } /* === Typography ===*/ :not(#\\20) .stylaApp .custom-html-block b, :not(#\\20) .stylaApp .custom-html-block strong { font-weight: bold; } :not(#\\20) .stylaApp .custom-html-block em { font-style: italic; } :not(#\\20) .stylaApp .custom-html-block h1, :not(#\\20) .stylaApp .custom-html-block .h1, .support-faq-results-wrapper #searchspring-content h1, :not(#\\20) .stylaApp .custom-html-block h2, :not(#\\20) .stylaApp .custom-html-block .h2, .support-faq-results-wrapper #searchspring-content h2, :not(#\\20) .stylaApp .custom-html-block h3, :not(#\\20) .stylaApp .custom-html-block .h3, .support-faq-results-wrapper #searchspring-content h3, :not(#\\20) .stylaApp .custom-html-block h4, :not(#\\20) .stylaApp .custom-html-block .h4, .support-faq-results-wrapper #searchspring-content h4, :not(#\\20) .stylaApp .custom-html-block h5, :not(#\\20) .stylaApp .custom-html-block .h5, .support-faq-results-wrapper #searchspring-content h5, :not(#\\20) .stylaApp .custom-html-block h6, :not(#\\20) .stylaApp .custom-html-block .h6, .support-faq-results-wrapper #searchspring-content h6 { color: #151515; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .custom-html-block h1, .custom-html-block .h1, .support-faq-results-wrapper #searchspring-content h1, .custom-html-block h2, .custom-html-block .h2, .support-faq-results-wrapper #searchspring-content h2, .custom-html-block h3, .custom-html-block .h3, .support-faq-results-wrapper #searchspring-content h3, .custom-html-block h4, .custom-html-block .h4, .support-faq-results-wrapper #searchspring-content h4, .custom-html-block h5, .custom-html-block .h5, .support-faq-results-wrapper #searchspring-content h5, .custom-html-block h6, .custom-html-block .h6, .support-faq-results-wrapper #searchspring-content h6 { color: #151515; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } :not(#\\20) .stylaApp .custom-html-block h1, :not(#\\20) .stylaApp .custom-html-block .h1, .support-faq-results-wrapper #searchspring-content h1 { font-size: 2.1875rem; font-weight: bold; line-height: 3.125; } .stylaApp .custom-html-block h1, .stylaApp .custom-html-block .h1 { font-size: 2.1875rem; font-weight: bold; line-height: 3.125; } :not(#\\20) .stylaApp .custom-html-block h2, :not(#\\20) .stylaApp .custom-html-block .h2, .support-faq-results-wrapper #searchspring-content h2 { font-size: 1.75rem; font-weight: bold; line-height: 2.45; } .support-faq-results-wrapper #searchspring-content h2 { line-height: 1.2; margin-bottom: .5rem; } .custom-html-block h2, .custom-html-block .h2 { font-size: 1.75rem; font-weight: bold; line-height: 2.45; } :not(#\\20) .stylaApp .custom-html-block h3, :not(#\\20) .stylaApp .custom-html-block .h3, .support-faq-results-wrapper #searchspring-content h3 { font-size: 1.5rem; font-weight: bold; line-height: 2.1; } .custom-html-block h3, .custom-html-block .h3 { font-size: 1.5rem; font-weight: bold; line-height: 2.1; } :not(#\\20) .stylaApp .custom-html-block h4, :not(#\\20) .stylaApp .custom-html-block .h4, .support-faq-results-wrapper #searchspring-content h4 { font-size: 1.25rem; font-weight: bold; line-height: 1.8; } .custom-html-block h4, .custom-html-block .h4 { font-size: 1.25rem; font-weight: bold; line-height: 1.8; } :not(#\\20) .stylaApp .custom-html-block h5, :not(#\\20) .stylaApp .custom-html-block .h5, .support-faq-results-wrapper #searchspring-content h5 { font-size: 1.125rem; font-weight: 700; line-height: 1.6; } .custom-html-block h5, .custom-html-block .h5 { font-size: 1.125rem; font-weight: 700; line-height: 1.6; } :not(#\\20) .stylaApp .custom-html-block h6, :not(#\\20) .stylaApp .custom-html-block .h6, .support-faq-results-wrapper #searchspring-content h6 { font-size: 1.125rem; font-weight: 700; line-height: 1.6; } .custom-html-block h6, .custom-html-block .h6 { font-size: 1.125rem; font-weight: 700; line-height: 1.6; } :not(#\\20) .stylaApp .custom-html-block p, .support-faq-results-wrapper #searchspring-content p, .support-faq-results-wrapper #searchspring-content p.support-content { color: #151515; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; margin-bottom: 1rem; line-height: 1.6; } .custom-html-block p { color: #151515; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; margin-bottom: 1rem; line-height: 1.6; } :not(#\\20) .stylaApp .custom-html-block .disclaimer { color: #6e6e6e; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; font-size: 0.875rem; margin-bottom: 1rem; line-height: 1.4; } /* === DUCTLESS TFAFORMS iFrames ===*/ .custom-html-block.tfaforms-container { width: 100%; display: flex; justify-content: center; height: 3800px; } .custom-html-block.tfaforms-container iframe { height: 3800px; } @media screen and (min-width: 40em) { .custom-html-block.tfaforms-container { height: 3800px; } } @media screen and (min-width: 80em) { .custom-html-block.tfaforms-container { height: 3800px; } } /* === Forms ===*/ :not(#\\20) .stylaApp .custom-html-block .custom-html-form-label { font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; color: #151515; cursor: pointer; display: block; font-size: 1rem; font-weight: bold; line-height: 1.6; margin: 0 0 .5rem; } :not(#\\20) .stylaApp .custom-html-block .custom-html-form-input, .custom-html-block .custom-html-form-input { font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 2.8125rem; margin: 0 0 .75rem; padding: .5rem; border: 1px solid #d9d9d9; border-radius: 0; background-color: #fff; -webkit-box-shadow: inset 0 1px 2px rgba(10,10,10,.1); box-shadow: inset 0 1px 2px rgba(10,10,10,.1); font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.6; color: #0a0a0a; -webkit-transition: border-color .25s ease-in-out,-webkit-box-shadow .5s; transition: border-color .25s ease-in-out,-webkit-box-shadow .5s; transition: box-shadow .5s,border-color .25s ease-in-out; transition: box-shadow .5s,border-color .25s ease-in-out,-webkit-box-shadow .5s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media screen and (min-width: 40em) { :not(#\\20) .stylaApp .custom-html-block .custom-html-form-input, .custom-html-block .custom-html-form-input { width: auto; } } /* === Anchors and Buttons ===*/ :not(#\\20) .stylaApp .custom-html-block a { color: #6e6e6e; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; text-decoration: underline; line-height: 1.5; } :not(#\\20) .stylaApp .custom-html-block a:visited { text-decoration-line: underline; text-decoration-style: initial; text-decoration-color: initial; color: #6e6e6e; } :not(#\\20) .stylaApp .custom-html-block a:hover, :not(#\\20) .stylaApp .custom-html-block a:active { color: #00B8FF; } :not(#\\20) .stylaApp .custom-html-block .button, :not(#\\20) .stylaApp .custom-html-block input.button { text-decoration: none; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; font-size: 1.125rem; border-radius: 3.125rem; border: solid 1px transparent; letter-spacing: 0.05rem; padding: .85rem 1.563rem; font-weight: 800; transition-delay: 0s, 0s; transition-duration: 0.25s, 0.25s; transition-property: background-color, color; -webkit-font-smoothing: antialiased; transition-timing-function: ease-out, ease-out; display: inline-block; cursor: pointer; } :not(#\\20) .stylaApp .custom-html-block .button.button--primary { color: #fff; background-color: #005aaa; } :not(#\\20) .stylaApp .custom-html-block .button.button--primary:hover, :not(#\\20) .stylaApp .custom-html-block .button.button--primary:active { background-color: #00B8FF; } :not(#\\20) .stylaApp .custom-html-block .button.button--secondary { color: #151515; background-color: #fff; border: 1px solid #151515; } :not(#\\20) .stylaApp .custom-html-block .button.button--secondary:hover, :not(#\\20) .stylaApp .custom-html-block .button.button--secondary:active { color: #fff; background-color: #151515; } /* flex grid */ :not(#\\20) .stylaApp .custom-html-block.custom-html-row { display: flex; justify-content: center; flex-wrap: wrap; } :not(#\\20) .stylaApp .custom-html-block .custom-html-col { text-align: left; } /* === 2 Column & 3 Column & 4 Column Block ===*/ :not(#\\20) .stylaApp .custom-html-block .four-column-block, :not(#\\20) .stylaApp .custom-html-block .three-column-block, :not(#\\20) .stylaApp .custom-html-block .three-column-block-contact, :not(#\\20) .stylaApp .custom-html-block .two-column-block-contact { display: flex; flex-wrap: wrap; justify-content: space-around; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; margin-top: -1rem; } :not(#\\20) .stylaApp .custom-html-block .four-column-card, :not(#\\20) .stylaApp .custom-html-block .three-column-card, :not(#\\20) .stylaApp .custom-html-block .two-column-card { align-items: center; text-align: center; background-color: #fff; border: 1px solid #c8c9ca; padding: 1rem; width: 100%; margin-bottom: 1rem; margin-top: 0; } :not(#\\20) .stylaApp .custom-html-block .four-column-card a, :not(#\\20) .stylaApp .custom-html-block .three-column-card a, :not(#\\20) .stylaApp .custom-html-block .two-column-card a { text-decoration: none; } :not(#\\20) .stylaApp .custom-html-block .two-column-card a.button { font-size: 16px; margin-bottom: 1.5rem; } :not(#\\20) .stylaApp .custom-html-block .four-column-card .card-title, :not(#\\20) .stylaApp .custom-html-block .three-column-card .card-title, :not(#\\20) .stylaApp .custom-html-block .two-column-card .card-title { font-size: 1.125rem; color: #151515; font-weight: 700; margin: 1rem 0; } :not(#\\20) .stylaApp .custom-html-block .four-column-card p, :not(#\\20) .stylaApp .custom-html-block .three-column-card p, :not(#\\20) .stylaApp .custom-html-block .two-column-card p { color: #151515; } :not(#\\20) .stylaApp .custom-html-block .four-column-card .icon-wrapper, :not(#\\20) .stylaApp .custom-html-block .three-column-card .icon-wrapper, :not(#\\20) .stylaApp .custom-html-block .two-column-card .icon-wrapper { font-family: FontAwesome; position: relative; border-radius: 50%; /* border: 1px solid #eff0f0; */ border: 1px solid #c8c9ca; width: 100px; height: 100px; margin: 1rem auto; } :not(#\\20) .stylaApp .custom-html-block .four-column-card .fa, :not(#\\20) .stylaApp .custom-html-block .three-column-card .fa, :not(#\\20) .stylaApp .custom-html-block .two-column-card .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #005aaa; font-size: 3rem; } :not(#\\20) .stylaApp .custom-html-block .four-column-card .disclaimer, :not(#\\20) .stylaApp .custom-html-block .three-column-card .disclaimer, :not(#\\20) .stylaApp .custom-html-block .two-column-card .disclaimer { color: #6e6e6e; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; font-size: 0.875rem; margin-bottom: 1rem; line-height: 1.4; font-style: italic; } @media screen and (min-width: 768px) { :not(#\\20) .stylaApp .custom-html-block .three-column-block, :not(#\\20) .stylaApp .custom-html-block .three-column-block-contact, :not(#\\20) .stylaApp .custom-html-block .two-column-block-contact { flex-wrap: nowrap; width: 100%; } :not(#\\20) .stylaApp .custom-html-block .two-column-card { margin: 0; margin-right: .9375rem; margin-left: .9375rem; width: 50%; } :not(#\\20) .stylaApp .custom-html-block .two-column-card:first-child { margin-left: 0; } :not(#\\20) .stylaApp .custom-html-block .two-column-card:last-child { margin-right: 0; } :not(#\\20) .stylaApp .custom-html-block .three-column-card { margin: 0; margin-right: .9375rem; margin-left: .9375rem; width: 33.33%; } :not(#\\20) .stylaApp .custom-html-block .three-column-card:first-child { margin-left: 0; } :not(#\\20) .stylaApp .custom-html-block .three-column-card:last-child { margin-right: 0; } :not(#\\20) .stylaApp .custom-html-block .four-column-card { width: 42%; margin-bottom: 1.875rem; } } @media screen and (min-width: 64em) { :not(#\\20) .stylaApp .custom-html-block .four-column-block { flex-wrap: nowrap; width: 100%; } :not(#\\20) .stylaApp .custom-html-block .four-column-card { margin: 0; margin-right: .9375rem; margin-left: .9375rem; width: 25%; } :not(#\\20) .stylaApp .custom-html-block .four-column-card:first-child, :not(#\\20) .stylaApp .custom-html-block .three-column-card:first-child, :not(#\\20) .stylaApp .custom-html-block .two-column-card:first-child { margin-left: 0; } :not(#\\20) .stylaApp .custom-html-block .four-column-card:last-child, :not(#\\20) .stylaApp .custom-html-block .three-column-card:last-child, :not(#\\20) .stylaApp .custom-html-block .two-column-card:last-child { margin-right: 0; } } /* ======== CONTACT-US SPECIFIC THREE COLUMN ======== */ :not(#\\20) .stylaApp .custom-html-block .three-column-block-contact.contact-us-block .contact-card-title, :not(#\\20) .stylaApp .custom-html-block .two-column-block-contact.contact-us-block .contact-card-title { font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 800; } :not(#\\20) .stylaApp .custom-html-block .three-column-block-contact.contact-us-block .contact-card-subtitle, :not(#\\20) .stylaApp .custom-html-block .two-column-block-contact.contact-us-block .contact-card-subtitle { font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; } :not(#\\20) .stylaApp .custom-html-block .three-column-block-contact.contact-us-block .contact-card-bold-text, :not(#\\20) .stylaApp .custom-html-block .two-column-block-contact.contact-us-block .contact-card-bold-text { font-size: 1rem; font-weight: 800; margin-bottom: .5rem; } :not(#\\20) .stylaApp .custom-html-block .two-column-block-contact.contact-us-block ul { list-style: none; line-height: 1.2; margin: 1rem 0 1.5rem; padding: 0; } :not(#\\20) .stylaApp .custom-html-block .two-column-block-contact.contact-us-block ul li { margin-bottom: .5rem; } :not(#\\20) .stylaApp .custom-html-block .three-column-block-contact.contact-us-block ul { list-style: none; line-height: 1.4; margin: 1rem 0; padding: 0; } :not(#\\20) .stylaApp .custom-html-block .three-column-block-contact.contact-us-block ul li { margin-bottom: .5rem; } /* ======== SUPPORT SEARCH ALL BAR ======== */ :not(#\\20) .stylaApp .custom-html-block .search-all-support-bar { display: block; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; background-color: #005aaa; padding: 1.5rem 0; text-align: center; width: 100%; } :not(#\\20) .stylaApp .custom-html-block .support-search-all-bar-wrapper .searchbar-wrapper { position: relative; width: 90%; margin: 0 auto; } :not(#\\20) .stylaApp .custom-html-block .support-search-all-bar-wrapper .custom-html-form-input { position: relative; width: auto; margin: 0 auto; text-align: left; width: 100%; } :not(#\\20) .stylaApp .custom-html-block .support-search-all-bar-wrapper .custom-html-form-input::placeholder { color: #c8c9ca; } :not(#\\20) .stylaApp .custom-html-block .support-search-all-bar-wrapper .submit-btn-container { position: absolute; top: 48%; right: 1rem; transform: translateY(-50%); z-index: 1; cursor: pointer; height: 20px; width: 20px; } :not(#\\20) .stylaApp .custom-html-block .support-search-all-bar-wrapper .submit-btn-container .support-search-button { border: none; background-color: transparent; margin: 0; padding: 0; } :not(#\\20) .stylaApp .custom-html-block .support-search-all-bar-wrapper .submit-btn-container .fa { font-family: FontAwesome; font-size: 1.2rem; color: #c8c9ca; line-height: 0; } @media screen and (min-width: 40em) { :not(#\\20) .stylaApp .custom-html-block .support-search-all-bar-wrapper .searchbar-wrapper { width: 60%; } } @media screen and (min-width: 64em) { :not(#\\20) .stylaApp .custom-html-block .support-search-all-bar-wrapper .searchbar-wrapper { width: 40%; } } /* ======== SUPPORT SEARCH 2 block FORMS ======== */ /* MOBILE SUPPORT SEARCH TABS */ /* tabs headers */ :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block { margin-bottom: 0; } :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block .tabs { display: flex; justify-content: space-between; list-style: none; position: relative; color: #151515; background-color: #86daff; font-size: 1rem; margin: 0; padding: 0; width: 100%; } :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block .tabs .active-tab { position: relative; background-color: #c5efff; font-weight: 700; } :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block .tabs li { cursor: pointer; color: inherit; margin: 0; padding: 2rem 1rem; text-align: center; width: 50%; } /* tabs content */ :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block .tabs-content { display: flex; margin: 0; padding: 0; list-style: none; width: 100%; } :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block .tabs-content li { display: none; width: 100%; } :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block .tabs-content li p { margin: 1rem 0; padding: 0 2rem; } @media screen and (min-width: 64em) { :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block.mobile { display: none; } } /* DESKTOP SUPPORT SEARCH NO TABS */ :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block.desktop { display: none; } :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block { display: flex; flex-wrap: wrap; justify-content: space-between; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; margin: 0 0 2rem; padding: 0; width: 100%; } :not(#\\20) .stylaApp .custom-html-block .support-search-form-card { align-items: center; text-align: center; background-color: #c5efff; padding: 1rem; margin-bottom: 1rem; margin-top: 0; } :not(#\\20) .stylaApp .custom-html-block .support-landing-search-filter-form .searchbar-wrapper { position: relative; width: 80%; margin: 0 auto; margin-bottom: 2rem; } :not(#\\20) .stylaApp .custom-html-block .support-landing-search-filter-form .custom-html-form-input { position: relative; width: auto; margin: 0 auto; text-align: left; width: 100%; } :not(#\\20) .stylaApp .custom-html-block .support-landing-search-filter-form .submit-btn-container { position: absolute; top: 48%; right: 1rem; transform: translateY(-50%); z-index: 1; cursor: pointer; height: 20px; width: 20px; } :not(#\\20) .stylaApp .custom-html-block .support-landing-search-filter-form .submit-btn-container .support-search-button { border: none; background-color: transparent; margin: 0; padding: 0; } :not(#\\20) .stylaApp .custom-html-block .support-landing-search-filter-form .submit-btn-container .fa { font-family: FontAwesome; font-size: 1.2rem; color: #c8c9ca; line-height: 0; } @media screen and (min-width: 64em) { :not(#\\20) .stylaApp .custom-html-block .support-two-search-forms-block.desktop { display: flex; flex-wrap: nowrap; margin-bottom: 0; } :not(#\\20) .stylaApp .custom-html-block .support-search-form-card { width: 45.5%; } :not(#\\20) .stylaApp .custom-html-block .support-landing-search-filter-form .searchbar-wrapper { width: 60%; } } /* ======== INSTALLATION REQUIREMENTS FAQ ACCORDION ======== */ :not(#\\20) .stylaApp .custom-html-block.installation-requirements-accordion .faq-slide-toggle p { margin: 0; } :not(#\\20) .stylaApp .custom-html-block.installation-requirements-accordion ul { font-size: 16px; line-height: 1.4; } :not(#\\20) .stylaApp .custom-html-block.installation-requirements-accordion ul li img { max-width: 200px; } /* ======== RECALL FAQ ACCORDION ======== */ :not(#\\20) .stylaApp .custom-html-block .faq-block-header { color: #1d252d; line-height: 1.2rem; font-weight: 700; font-size: 1.2rem; margin-bottom: 2rem; } :not(#\\20) .stylaApp .custom-html-block .faq-accordion { position: relative; background-color: #fff; border-top: 1px solid #c8c9ca; } :not(#\\20) .stylaApp .custom-html-block ul.accordion-controls { list-style-type: none; font-size: 16px; line-height: 1.4; margin: 0; padding: 0; } :not(#\\20) .stylaApp .custom-html-block .accordion-controls li { position: relative; text-align: left; border-bottom: 1px solid #c8c9ca; margin: 0; } :not(#\\20) .stylaApp .custom-html-block button.accordion-toggle { color: #1d252d; line-height: 1.2rem; font-weight: 700; cursor: pointer; background-color: #fff; border: 0; width: 88%; text-align: left; padding: 1rem 3rem 1rem 0; } @media screen and (min-width: 40em) { :not(#\\20) .stylaApp .custom-html-block button.accordion-toggle { width: 93%; padding: 1rem 2rem 1rem 0; } } @media screen and (min-width: 64em) { :not(#\\20) .stylaApp .custom-html-block button.accordion-toggle { width: 97%; } } :not(#\\20) .stylaApp .custom-html-block .accordion-toggle:active, :not(#\\20) .stylaApp .custom-html-block .accordion-toggle:focus { outline: none; } :not(#\\20) .stylaApp .custom-html-block .accordion-toggle:hover { color: #32beff; } /* plus icon */ :not(#\\20) .stylaApp .custom-html-block .accordion-toggle:before, :not(#\\20) .stylaApp .custom-html-block .accordion-toggle:after { background-color: #1d252d; content: ""; display: block; height: 1rem; /* margin-top: -3px; */ position: absolute; top: 1rem; right: 14px; width: 2px; webkit-transition: transform 300ms ease; moz-transition: transform 300ms ease; transition: transform 300ms ease; } /* horizontal of the + */ :not(#\\20) .stylaApp .custom-html-block .accordion-toggle:after { top: 23px; right: 7px; height: 2px; width: 1rem; } /* rotate & transform on toggle */ :not(#\\20) .stylaApp .custom-html-block .accordion-toggle[aria-expanded="true"]:before { background-color: transparent; transform: rotate(-90deg) } :not(#\\20) .stylaApp .custom-html-block .accordion-toggle[aria-expanded="true"]:after { transform: rotate(-180deg) } :not(#\\20) .stylaApp .custom-html-block .accordion-content { display: none; padding: 0 1rem 1rem 0; } :not(#\\20) .stylaApp .custom-html-block .accordion-content li { border: none; } :not(#\\20) .stylaApp .custom-html-block .accordion-content li > p { margin-bottom: .75rem; } :not(#\\20) .stylaApp .custom-html-block .accordion-content li > img { margin-bottom: .75rem; } :not(#\\20) .stylaApp .custom-html-block .accordion-content p { padding-right: 0.75rem; } @media screen and (min-width: 64em) { :not(#\\20) .stylaApp .custom-html-block .accordion-content p { padding-right: 2.25rem; } } /* ******* faq table ******* */ :not(#\\20) .stylaApp .faq-accordion table.whichModel { width: 100%; max-width: 400px; border-collapse: collapse; margin: 0 auto 1rem; font-weight: 500; } @media screen and (min-width: 64em) { :not(#\\20) .stylaApp .faq-accordion table.whichModel { margin: 0; } } :not(#\\20) .stylaApp .faq-accordion .whichModel tbody { border: 1px solid #f1f1f1; background-color: #fefefe; } :not(#\\20) .stylaApp .faq-accordion .whichModel tr { background-color: #c5efff; text-align: center; vertical-align: top; } :not(#\\20) .stylaApp .faq-accordion .whichModel tr.serial-figure-top { background-color: #fff; } :not(#\\20) .stylaApp .faq-accordion .whichModel th { vertical-align: middle; background-color: #86daff; text-align: center; font-size: 1rem; font-weight: 700; padding: 5px; border: solid 4px #fff; text-align: center; } :not(#\\20) .stylaApp .faq-accordion .whichModel td { vertical-align: top; font-size: 0.75rem; line-height: 1.35; padding: 5px; border: solid 4px #fff; text-align: left; } @media screen and (min-width: 64em) { :not(#\\20) .stylaApp .faq-accordion .whichModel td { font-size: 1rem; } } :not(#\\20) .stylaApp .faq-accordion .whichModel td img { width: 100%; max-width: 260px; } :not(#\\20) .stylaApp .faq-accordion .whichModel .model-clarify-position { font-style: italic; font-weight: initial; font-size: 0.875rem; line-height: 1.35; } :not(#\\20) .stylaApp .faq-accordion .whichModel .display-flex-row { display: flex; flex-direction: row; align-content: space-around; justify-content: space-around; flex-wrap: nowrap; } :not(#\\20) .stylaApp .faq-accordion .whichModel .display-flex-col { width: 100%; } :not(#\\20) .stylaApp .faq-accordion .whichModel .display-flex-col .serial-position-value { width: 20%; } /* ======== RECALL FORM/OUTCOME ======== */ /* flex grid */ :not(#\\20) .stylaApp .custom-html-block.custom-html-row.recall-block .custom-html-col { margin: .75rem .75rem 2rem; width: 80%; } @media screen and (min-width: 64em) { :not(#\\20) .stylaApp .custom-html-block.custom-html-row.recall-block .custom-html-col { margin: 2rem; width: auto; } :not(#\\20) .stylaApp .custom-html-block.custom-html-row.recall-block .custom-html-col:first-child { border-right: 1px solid #d9d9d9; padding-right: 4rem; width: 30%; } } :not(#\\20) .stylaApp .custom-html-block .custom-html-col.recall-search-form { text-align: left; } :not(#\\20) .stylaApp .custom-html-block .custom-html-col.find-recall-sn-info { text-align: left; max-width: 350px; } :not(#\\20) .stylaApp .custom-html-block.custom-html-col img.fridge-top-mount-sn { max-width: 200px; margin-bottom: 1rem; } :not(#\\20) .stylaApp .custom-html-block.recall-outcome-container { padding: 0 1rem; } @media screen and (min-width: 40em) { :not(#\\20) .stylaApp .custom-html-block.custom-html-col img.fridge-top-mount-sn { max-width: 300px; } :not(#\\20) .stylaApp .custom-html-block.recall-outcome-container { margin-top: 3rem; padding: initial; } } :not(#\\20) .stylaApp .custom-html-block .hide { display: none; } :not(#\\20) .stylaApp .custom-html-block.recall-search-form { margin-bottom: 2rem; } :not(#\\20) .stylaApp .custom-html-block p.recall-search-model { font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; color: #151515; display: block; font-size: 1rem; font-weight: bold; line-height: 1.6; margin: 0 0 1.5rem; } @media screen and (min-width: 40em) { :not(#\\20) .stylaApp .custom-html-block.recall-search-form input[type=text] { width: 100%; } } :not(#\\20) .stylaApp .custom-html-block .recall-form fieldset { border: 0; margin: 0; padding: 0; } :not(#\\20) .stylaApp .custom-html-block .in-recall-choices-list li p:first-child { display: inline-block; } :not(#\\20) .stylaApp .custom-html-block .in-recall-choices-list { list-style-type: none; counter-reset: listStyle; display: table; } :not(#\\20) .stylaApp .custom-html-block .in-recall-choices-list li { counter-increment: listStyle; display: table-row; margin-bottom: 2rem !important; } :not(#\\20) .stylaApp .custom-html-block .in-recall-choices-list .button { margin-bottom: 2rem; } :not(#\\20) .stylaApp .custom-html-block .in-recall-choices-list li:before { content: counter(listStyle, upper-alpha) ": "; font-weight: bold; display: table-cell; padding-right: 1em; } /* ========================================================================================================== ================== NON STYLA PAGES ======SUPPORT TEMPLATES================================================================= ========================================================================================================== */ /* ======== SUPPORT TEMPLATES USED WITH Search Spring ======== */ /* ==========Articles Template============ */ .ss-support-article-banner-wrapper { background-color: #fff; margin: 1rem 0 0; text-align: center; display: block; position: relative; border-top: solid 6px #005aaa; } .ss-support-article-banner-wrapper .banner-title-block { display: inline-block; text-align: center; width: 66.66667%; margin: 2rem auto 2.5rem; } .ss-support-article-banner-wrapper .banner-title-block .banner-title { margin: 0; text-transform: capitalize; font-size: 2.188rem; font-weight: 800; } .ss-support-articles-wrapper { background-color: #eff0f0; width: 100%; padding: 0.5rem 0; margin: 0 auto; } .ss-support-articles-wrapper #article-dynamic-wrapper { background-color: #fff; max-width: 1190px; padding: 2rem; margin: 2rem auto; } .ss-support-articles-wrapper #article-dynamic-wrapper .article-dynamic-inner { margin: 0 auto; max-width: 700px; } .ss-support-articles-wrapper #article-dynamic-wrapper .article-dynamic-inner p { color: #151515; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; margin-bottom: 1rem; line-height: 1.6; font-size: 16px; } .ss-support-articles-wrapper #article-dynamic-wrapper .article-dynamic-inner a { color: #6e6e6e; text-decoration: underline; } /* ============= FAQ Results Template ============ */ .support-faq-results-wrapper { background-color: #eff0f0; padding-bottom: 2rem; } .faqs-results-header-wrapper { margin-top: 1rem; } .faqs-results-header-wrapper h1 { font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; font-size: 2.188rem; font-weight: 800 !important; } .faqs-results-header div, .faqs-results-header div div { margin: 0 auto; padding: 0; } .faqs-results-header h1 { font-size: 2.188rem; font-family: helvetica neue,helvetica,arial,sans-serif; font-weight: 800; margin: 2rem 0 1rem; letter-spacing: 0.05rem; } :not(#\20) .stylaApp .support-faq-subh h2 { font-size: 1.75rem; font-family: helvetica neue,helvetica,arial,sans-serif; font-weight: 800; margin: 2rem 0 1rem; } :not(#\20) .stylaApp .support-faq-category-hr { margin-top: 0; display: block; border: 0; color: #c8c9ca; background-color: #c8c9ca; height: 1px; } /* search spring dynamic content */ .support-faq-results-wrapper #searchspring-header #searchActions .button-filters--showing { width: 100%; max-width: 100%; font-weight: 700; border: 1px solid #c8c9ca; } .support-faq-results-wrapper #searchspring-header { background-color: #eff0f0; } /* .support-faq-results-wrapper #searchspring-header .container.container--listing { padding-left: 0; } */ .support-faq-inner-wrapper #searchspring-summary { display: none; } .support-faq-inner-wrapper { display: flex; justify-content: flex-start; background-color: #eff0f0; margin: 0 auto 2rem; max-width: 1190px; } .support-faq-answers-container { width: 100%; } @media screen and (min-width: 64em) { .support-faq-answers-container { width: 65%; margin-left: 1rem; } } .support-faq-answers-container li.pages-item { background-color: #fff; border: 1px solid #c8c9ca; padding: 1rem; margin-bottom: 1rem; } .support-faq-answers-container li.pages-item h2, .support-faq-answers-container li.pages-item h2 a { font-family: helvetica neue,helvetica,arial,sans-serif; font-size: 1.25rem; font-weight: 700; color: #000; } .support-faq-answers-container li.pages-item h2 a:hover { color: #32beff; } .support-faq-inner-wrapper .listingLoadMore.button--primary { background-color: transparent; border: 1px solid #000; color: #000; font-weight: 800; } .support-faq-inner-wrapper .listingLoadMore.button--primary:hover { background-color: #000; color: #fff; } /* 2 BLOCK SEARCH FORMS ON FAQ RESULTS TEMPLATE ***** MOVE THIS TO STENCIL THEME AFTER TESTING IS COMPLETE ***** */ /* ======== SUPPORT SEARCH 2 block FORMS ON BC TEMPLATE!! ======== */ /* MOBILE SUPPORT SEARCH TABS */ /* tabs headers */ .custom-html-block .support-two-search-forms-block { max-width: 1190px; margin: 0 auto; } .custom-html-block .support-two-search-forms-block .tabs { display: flex; justify-content: space-between; list-style: none; position: relative; color: #151515; background-color: #86daff; font-size: 1rem; margin: 0; padding: 0; width: 100%; border: 0; } .custom-html-block .support-two-search-forms-block .tabs .active-tab { position: relative; background-color: #c5efff; font-weight: 700; } .custom-html-block .support-two-search-forms-block .tabs li { cursor: pointer; color: inherit; margin: 0; padding: 2rem 1rem; text-align: center; width: 50%; } /* tabs content */ .custom-html-block .support-two-search-forms-block .tabs-content { display: flex; margin: 0; padding: 0; list-style: none; width: 100%; } .custom-html-block .support-two-search-forms-block .tabs-content li { display: none; width: 100%; } .custom-html-block .support-two-search-forms-block .tabs-content li p { margin: 1rem 0; padding: 0 2rem; } @media screen and (min-width: 64em) { .custom-html-block .support-two-search-forms-block.mobile { display: none; } } /* DESKTOP SUPPORT SEARCH NO TABS */ .custom-html-block .support-two-search-forms-block.desktop { display: none; } .custom-html-block .support-two-search-forms-block { display: flex; flex-wrap: wrap; justify-content: space-between; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; margin: 0 0 2rem; padding: 0; width: 100%; } .custom-html-block .support-search-form-card { align-items: center; text-align: center; background-color: #c5efff; padding: 1rem; margin-bottom: 1rem; margin-top: 0; } .custom-html-block .support-landing-search-filter-form .searchbar-wrapper { position: relative; width: 80%; margin: 0 auto; margin-bottom: 2rem; } .custom-html-block .support-landing-search-filter-form .custom-html-form-input { position: relative; width: auto; margin: 0 auto; text-align: left; width: 100%; } .custom-html-block .support-landing-search-filter-form .submit-btn-container { position: absolute; top: 48%; right: 1rem; transform: translateY(-50%); z-index: 1; cursor: pointer; height: 20px; width: 20px; } .custom-html-block .support-landing-search-filter-form .submit-btn-container .support-search-button { border: none; background-color: transparent; margin: 0; padding: 0; } .custom-html-block .support-landing-search-filter-form .submit-btn-container .fa { font-family: FontAwesome; font-size: 1.2rem; color: #c8c9ca; line-height: 0; } @media screen and (min-width: 64em) { .custom-html-block .support-two-search-forms-block.desktop { display: flex; flex-wrap: nowrap; margin: 0 auto 1rem; } .custom-html-block .support-search-form-card { width: 48.5%; } .custom-html-block .support-landing-search-filter-form .searchbar-wrapper { width: 60%; } } /* THREE CARD CONTACT US ON FAQ RESULTS TEMPLATE - MOVE TO STENCIL SASS AFTER TESTING */ /* === 2 Column & 3 Column & 4 Column Block ===*/ .custom-html-block .four-column-block, .custom-html-block .three-column-block, .custom-html-block .three-column-block-contact, .custom-html-block .two-column-block-contact { display: flex; flex-wrap: wrap; justify-content: space-around; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; margin-top: -1rem; max-width: 1190px; margin: 0 auto; } .custom-html-block .four-column-card, .custom-html-block .three-column-card, .custom-html-block .two-column-card { align-items: center; text-align: center; background-color: #fff; border: 1px solid #c8c9ca; padding: 1rem; width: 100%; margin-bottom: 1rem; margin-top: 0; } .custom-html-block .four-column-card a, .custom-html-block .three-column-card a, .custom-html-block .two-column-card a { text-decoration: none; } .custom-html-block .two-column-card a.button { font-size: 16px; margin-bottom: 1.5rem; } .custom-html-block .four-column-card .card-title, .custom-html-block .three-column-card .card-title, .custom-html-block .two-column-card .card-title { font-size: 1.125rem; color: #151515; font-weight: 700; margin: 1rem 0; } .custom-html-block .four-column-card p, .custom-html-block .three-column-card p, .custom-html-block .two-column-card p { color: #151515; } .custom-html-block .four-column-card .icon-wrapper, .custom-html-block .three-column-card .icon-wrapper, .custom-html-block .two-column-card .icon-wrapper { font-family: FontAwesome; position: relative; border-radius: 50%; /* border: 1px solid #eff0f0; */ border: 1px solid #c8c9ca; width: 100px; height: 100px; margin: 1rem auto; } .custom-html-block .four-column-card .fa, .custom-html-block .three-column-card .fa, .custom-html-block .two-column-card .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #005aaa; font-size: 3rem; } .custom-html-block .four-column-card .disclaimer, .custom-html-block .three-column-card .disclaimer, .custom-html-block .two-column-card .disclaimer { color: #6e6e6e; font-family: 'Helvetica Neue', Arial, sans-serif, Arial, Helvetica, sans-serif; font-size: 0.875rem; margin-bottom: 1rem; line-height: 1.4; font-style: italic; } @media screen and (min-width: 768px) { .stylaApp .custom-html-block .three-column-block, .custom-html-block .three-column-block-contact, .custom-html-block .two-column-block-contact { flex-wrap: nowrap; width: 100%; } .custom-html-block .two-column-card { margin: 0; margin-right: .9375rem; margin-left: .9375rem; width: 50%; } .custom-html-block .two-column-card:first-child { margin-left: 0; } .custom-html-block .two-column-card:last-child { margin-right: 0; } .custom-html-block .three-column-card { margin: 0; width: 33%; } .custom-html-block .three-column-card:first-child { margin-left: 0; } .custom-html-block .three-column-card:last-child { margin-right: 0; } .custom-html-block .four-column-card { width: 42%; margin-bottom: 1.875rem; } } @media screen and (min-width: 64em) { .custom-html-block .three-column-block, .custom-html-block .four-column-block { flex-wrap: nowrap; width: 100%; } .custom-html-block .three-column-card { margin: 0; margin-right: .9375rem; margin-left: .9375rem; width: 33.33%; } .custom-html-block .four-column-card { margin: 0; margin-right: .9375rem; margin-left: .9375rem; width: 25%; } .custom-html-block .four-column-card:first-child, .custom-html-block .three-column-card:first-child, .custom-html-block .two-column-card:first-child { margin-left: 0; } .custom-html-block .four-column-card:last-child, .custom-html-block .three-column-card:last-child, .custom-html-block .two-column-card:last-child { margin-right: 0; } }