/* HTML logo text for search/accessibility without changing visual logo */
.local-html-logo-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* roof-tool-blue-theme-map-address-spacing-final */
:root {
--roof-tool-blue: #051f3d;
--roof-tool-blue-2: #0b3a6f;
--roof-tool-yellow-old: #f2b705;
}
/* Change yellow tool theme areas/buttons to blue */
.roof-tool-page .yellow,
.roof-tool-page .yellow-box,
.roof-tool-page .tool-yellow,
.roof-tool-page .quote-step,
.roof-tool-page .roof-type-card.active,
.roof-tool-page .roof-type-card:hover,
.roof-tool-page .roof-tool-search,
.roof-tool-page .search-button,
.roof-tool-page button,
.roof-tool-page .btn,
.roof-tool-page .primary-btn,
.roof-tool-page .next-btn,
.roof-tool-page .submit-btn,
.roof-tool-page .estimate-btn,
.roof-tool-page .instant-quote-btn,
.roof-estimate-tool .yellow,
.roof-estimate-tool .yellow-box,
.roof-estimate-tool .tool-yellow,
.roof-estimate-tool .quote-step,
.roof-estimate-tool .roof-type-card.active,
.roof-estimate-tool .roof-type-card:hover,
.roof-estimate-tool .roof-tool-search,
.roof-estimate-tool .search-button,
.roof-estimate-tool button,
.roof-estimate-tool .btn,
.roof-estimate-tool .primary-btn,
.roof-estimate-tool .next-btn,
.roof-estimate-tool .submit-btn,
.roof-estimate-tool .estimate-btn,
.roof-estimate-tool .instant-quote-btn,
#roofTool button,
#roofTool .btn,
#roofTool .primary-btn,
#roofTool .search-button {
background-color: var(--roof-tool-blue) !important;
border-color: var(--roof-tool-blue) !important;
color: #ffffff !important;
}
/* Blue card/header accents */
.roof-tool-page .tool-header,
.roof-tool-page .step-header,
.roof-tool-page .form-title-box,
.roof-tool-page .selected-roof-title,
.roof-estimate-tool .tool-header,
.roof-estimate-tool .step-header,
.roof-estimate-tool .form-title-box,
.roof-estimate-tool .selected-roof-title,
#roofTool .tool-header,
#roofTool .step-header,
#roofTool .form-title-box,
#roofTool .selected-roof-title {
background: var(--roof-tool-blue) !important;
color: #ffffff !important;
}
/* If any hard yellow backgrounds remain inside the roof tool, force blue */
.roof-tool-page [style*="#f2b705"],
.roof-tool-page [style*="#F2B705"],
.roof-tool-page [style*="yellow"],
.roof-estimate-tool [style*="#f2b705"],
.roof-estimate-tool [style*="#F2B705"],
.roof-estimate-tool [style*="yellow"],
#roofTool [style*="#f2b705"],
#roofTool [style*="#F2B705"],
#roofTool [style*="yellow"] {
background-color: var(--roof-tool-blue) !important;
border-color: var(--roof-tool-blue) !important;
color: #ffffff !important;
}
/* Space out the map and address section */
.roof-tool-page .map-address-wrap,
.roof-tool-page .address-map-wrap,
.roof-tool-page .map-address-row,
.roof-tool-page .address-map-row,
.roof-estimate-tool .map-address-wrap,
.roof-estimate-tool .address-map-wrap,
.roof-estimate-tool .map-address-row,
.roof-estimate-tool .address-map-row,
#roofTool .map-address-wrap,
#roofTool .address-map-wrap,
#roofTool .map-address-row,
#roofTool .address-map-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 34px !important;
align-items: start !important;
}
/* Generic roof-tool address/map spacing fallbacks */
.roof-tool-page iframe,
.roof-estimate-tool iframe,
#roofTool iframe,
.roof-tool-page .map-box,
.roof-estimate-tool .map-box,
#roofTool .map-box,
.roof-tool-page .google-map,
.roof-estimate-tool .google-map,
#roofTool .google-map {
margin-bottom: 26px !important;
}
.roof-tool-page .address-box,
.roof-tool-page .address-panel,
.roof-tool-page .address-section,
.roof-tool-page .property-address,
.roof-estimate-tool .address-box,
.roof-estimate-tool .address-panel,
.roof-estimate-tool .address-section,
.roof-estimate-tool .property-address,
#roofTool .address-box,
#roofTool .address-panel,
#roofTool .address-section,
#roofTool .property-address {
margin-top: 24px !important;
padding-top: 12px !important;
}
/* Search/address input spacing */
.roof-tool-page input[type="text"],
.roof-tool-page input[type="search"],
.roof-tool-page input[name*="address" i],
.roof-estimate-tool input[type="text"],
.roof-estimate-tool input[type="search"],
.roof-estimate-tool input[name*="address" i],
#roofTool input[type="text"],
#roofTool input[type="search"],
#roofTool input[name*="address" i] {
margin-bottom: 18px !important;
}
/* Keep price red */
.roof-tool-page .price,
.roof-tool-page .estimate-price,
.roof-tool-page .total-price,
.roof-estimate-tool .price,
.roof-estimate-tool .estimate-price,
.roof-estimate-tool .total-price,
#roofTool .price,
#roofTool .estimate-price,
#roofTool .total-price {
color: #d60000 !important;
}
/* Mobile spacing */
@media (max-width: 800px) {
.roof-tool-page .map-address-wrap,
.roof-tool-page .address-map-wrap,
.roof-tool-page .map-address-row,
.roof-tool-page .address-map-row,
.roof-estimate-tool .map-address-wrap,
.roof-estimate-tool .address-map-wrap,
.roof-estimate-tool .map-address-row,
.roof-estimate-tool .address-map-row,
#roofTool .map-address-wrap,
#roofTool .address-map-wrap,
#roofTool .map-address-row,
#roofTool .address-map-row {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
}
/* roof-tool-white-label-text-final */
.roof-tool-page h1,
.roof-tool-page h2,
.roof-tool-page h3,
.roof-tool-page h4,
.roof-tool-page label,
.roof-tool-page .label,
.roof-tool-page .form-label,
.roof-tool-page .step-title,
.roof-tool-page .tool-title,
.roof-tool-page .estimate-title,
.roof-tool-page .find-roof-title,
.roof-tool-page .input-title,
.roof-tool-page .field-title,
.roof-estimate-tool h1,
.roof-estimate-tool h2,
.roof-estimate-tool h3,
.roof-estimate-tool h4,
.roof-estimate-tool label,
.roof-estimate-tool .label,
.roof-estimate-tool .form-label,
.roof-estimate-tool .step-title,
.roof-estimate-tool .tool-title,
.roof-estimate-tool .estimate-title,
.roof-estimate-tool .find-roof-title,
.roof-estimate-tool .input-title,
.roof-estimate-tool .field-title,
#roofTool h1,
#roofTool h2,
#roofTool h3,
#roofTool h4,
#roofTool label,
#roofTool .label,
#roofTool .form-label,
#roofTool .step-title,
#roofTool .tool-title,
#roofTool .estimate-title,
#roofTool .find-roof-title,
#roofTool .input-title,
#roofTool .field-title {
color: #ffffff !important;
}
/* Make the specific roof-tool wording white */
.roof-tool-page *:not(input):not(textarea):not(select),
.roof-estimate-tool *:not(input):not(textarea):not(select),
#roofTool *:not(input):not(textarea):not(select) {
color: #ffffff !important;
}
/* Keep form input text readable */
.roof-tool-page input,
.roof-tool-page textarea,
.roof-tool-page select,
.roof-estimate-tool input,
.roof-estimate-tool textarea,
.roof-estimate-tool select,
#roofTool input,
#roofTool textarea,
#roofTool select {
color: #111111 !important;
background-color: #ffffff !important;
}
/* Keep price red */
.roof-tool-page .price,
.roof-tool-page .estimate-price,
.roof-tool-page .total-price,
.roof-estimate-tool .price,
.roof-estimate-tool .estimate-price,
.roof-estimate-tool .total-price,
#roofTool .price,
#roofTool .estimate-price,
#roofTool .total-price {
color: #d60000 !important;
}
/* roof-tool-map-form-spacing-yellow-search-white-text-final */
/* Keep roof tool labels/text white */
.roof-tool-page h1,
.roof-tool-page h2,
.roof-tool-page h3,
.roof-tool-page h4,
.roof-tool-page label,
.roof-tool-page .label,
.roof-tool-page .form-label,
.roof-tool-page .step-title,
.roof-tool-page .tool-title,
.roof-tool-page .estimate-title,
.roof-tool-page .find-roof-title,
.roof-tool-page .input-title,
.roof-tool-page .field-title,
.roof-estimate-tool h1,
.roof-estimate-tool h2,
.roof-estimate-tool h3,
.roof-estimate-tool h4,
.roof-estimate-tool label,
.roof-estimate-tool .label,
.roof-estimate-tool .form-label,
.roof-estimate-tool .step-title,
.roof-estimate-tool .tool-title,
.roof-estimate-tool .estimate-title,
.roof-estimate-tool .find-roof-title,
.roof-estimate-tool .input-title,
.roof-estimate-tool .field-title,
#roofTool h1,
#roofTool h2,
#roofTool h3,
#roofTool h4,
#roofTool label,
#roofTool .label,
#roofTool .form-label,
#roofTool .step-title,
#roofTool .tool-title,
#roofTool .estimate-title,
#roofTool .find-roof-title,
#roofTool .input-title,
#roofTool .field-title {
color: #ffffff !important;
}
/* Keep input text readable */
.roof-tool-page input,
.roof-tool-page textarea,
.roof-tool-page select,
.roof-estimate-tool input,
.roof-estimate-tool textarea,
.roof-estimate-tool select,
#roofTool input,
#roofTool textarea,
#roofTool select {
color: #111111 !important;
background-color: #ffffff !important;
}
/* Add spacing between map and form/address area */
.roof-tool-page .map-address-wrap,
.roof-tool-page .address-map-wrap,
.roof-tool-page .map-address-row,
.roof-tool-page .address-map-row,
.roof-tool-page .map-form-wrap,
.roof-tool-page .form-map-wrap,
.roof-tool-page .map-form-row,
.roof-tool-page .form-map-row,
.roof-estimate-tool .map-address-wrap,
.roof-estimate-tool .address-map-wrap,
.roof-estimate-tool .map-address-row,
.roof-estimate-tool .address-map-row,
.roof-estimate-tool .map-form-wrap,
.roof-estimate-tool .form-map-wrap,
.roof-estimate-tool .map-form-row,
.roof-estimate-tool .form-map-row,
#roofTool .map-address-wrap,
#roofTool .address-map-wrap,
#roofTool .map-address-row,
#roofTool .address-map-row,
#roofTool .map-form-wrap,
#roofTool .form-map-wrap,
#roofTool .map-form-row,
#roofTool .form-map-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
gap: 46px !important;
column-gap: 46px !important;
align-items: start !important;
}
/* Generic spacing fallback for map iframe and form panel */
.roof-tool-page iframe,
.roof-estimate-tool iframe,
#roofTool iframe,
.roof-tool-page .map-box,
.roof-estimate-tool .map-box,
#roofTool .map-box,
.roof-tool-page .google-map,
.roof-estimate-tool .google-map,
#roofTool .google-map {
margin-right: 34px !important;
margin-bottom: 28px !important;
}
.roof-tool-page form,
.roof-tool-page .form-box,
.roof-tool-page .form-panel,
.roof-tool-page .address-box,
.roof-tool-page .address-panel,
.roof-tool-page .address-section,
.roof-estimate-tool form,
.roof-estimate-tool .form-box,
.roof-estimate-tool .form-panel,
.roof-estimate-tool .address-box,
.roof-estimate-tool .address-panel,
.roof-estimate-tool .address-section,
#roofTool form,
#roofTool .form-box,
#roofTool .form-panel,
#roofTool .address-box,
#roofTool .address-panel,
#roofTool .address-section {
margin-left: 22px !important;
}
/* Search button should be yellow, not blue */
.roof-tool-page .search-button,
.roof-tool-page .roof-tool-search,
.roof-tool-page button[type="submit"],
.roof-tool-page button.search,
.roof-tool-page .address-search-button,
.roof-estimate-tool .search-button,
.roof-estimate-tool .roof-tool-search,
.roof-estimate-tool button[type="submit"],
.roof-estimate-tool button.search,
.roof-estimate-tool .address-search-button,
#roofTool .search-button,
#roofTool .roof-tool-search,
#roofTool button[type="submit"],
#roofTool button.search,
#roofTool .address-search-button {
background-color: #f2b705 !important;
border-color: #f2b705 !important;
color: #051f3d !important;
font-weight: 900 !important;
}
/* Search icon/text inside the search button */
.roof-tool-page .search-button *,
.roof-tool-page .roof-tool-search *,
.roof-tool-page button.search *,
.roof-tool-page .address-search-button *,
.roof-estimate-tool .search-button *,
.roof-estimate-tool .roof-tool-search *,
.roof-estimate-tool button.search *,
.roof-estimate-tool .address-search-button *,
#roofTool .search-button *,
#roofTool .roof-tool-search *,
#roofTool button.search *,
#roofTool .address-search-button * {
color: #051f3d !important;
fill: #051f3d !important;
}
/* Keep price red */
.roof-tool-page .price,
.roof-tool-page .estimate-price,
.roof-tool-page .total-price,
.roof-estimate-tool .price,
.roof-estimate-tool .estimate-price,
.roof-estimate-tool .total-price,
#roofTool .price,
#roofTool .estimate-price,
#roofTool .total-price {
color: #d60000 !important;
}
@media (max-width: 800px) {
.roof-tool-page .map-address-wrap,
.roof-tool-page .address-map-wrap,
.roof-tool-page .map-address-row,
.roof-tool-page .address-map-row,
.roof-tool-page .map-form-wrap,
.roof-tool-page .form-map-wrap,
.roof-tool-page .map-form-row,
.roof-tool-page .form-map-row,
.roof-estimate-tool .map-address-wrap,
.roof-estimate-tool .address-map-wrap,
.roof-estimate-tool .map-address-row,
.roof-estimate-tool .address-map-row,
.roof-estimate-tool .map-form-wrap,
.roof-estimate-tool .form-map-wrap,
.roof-estimate-tool .map-form-row,
.roof-estimate-tool .form-map-row,
#roofTool .map-address-wrap,
#roofTool .address-map-wrap,
#roofTool .map-address-row,
#roofTool .address-map-row,
#roofTool .map-form-wrap,
#roofTool .form-map-wrap,
#roofTool .map-form-row,
#roofTool .form-map-row {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
.roof-tool-page form,
.roof-tool-page .form-box,
.roof-tool-page .form-panel,
.roof-tool-page .address-box,
.roof-tool-page .address-panel,
.roof-tool-page .address-section,
.roof-estimate-tool form,
.roof-estimate-tool .form-box,
.roof-estimate-tool .form-panel,
.roof-estimate-tool .address-box,
.roof-estimate-tool .address-panel,
.roof-estimate-tool .address-section,
#roofTool form,
#roofTool .form-box,
#roofTool .form-panel,
#roofTool .address-box,
#roofTool .address-panel,
#roofTool .address-section {
margin-left: 0 !important;
}
}
/* roof-tool-blue-area-white-text-required-fields-final */
/* Text on blue tool areas must be white */
.roof-tool-page [style*="#051f3d"],
.roof-tool-page [style*="#0b3a6f"],
.roof-tool-page [style*="rgb(5, 31, 61)"],
.roof-tool-page .tool-header,
.roof-tool-page .step-header,
.roof-tool-page .form-title-box,
.roof-tool-page .selected-roof-title,
.roof-tool-page .quote-step,
.roof-tool-page .blue-box,
.roof-tool-page .blue-panel,
.roof-tool-page .roof-tool-panel,
.roof-tool-page .roof-tool-card,
.roof-estimate-tool [style*="#051f3d"],
.roof-estimate-tool [style*="#0b3a6f"],
.roof-estimate-tool [style*="rgb(5, 31, 61)"],
.roof-estimate-tool .tool-header,
.roof-estimate-tool .step-header,
.roof-estimate-tool .form-title-box,
.roof-estimate-tool .selected-roof-title,
.roof-estimate-tool .quote-step,
.roof-estimate-tool .blue-box,
.roof-estimate-tool .blue-panel,
.roof-estimate-tool .roof-tool-panel,
.roof-estimate-tool .roof-tool-card,
#roofTool [style*="#051f3d"],
#roofTool [style*="#0b3a6f"],
#roofTool [style*="rgb(5, 31, 61)"],
#roofTool .tool-header,
#roofTool .step-header,
#roofTool .form-title-box,
#roofTool .selected-roof-title,
#roofTool .quote-step,
#roofTool .blue-box,
#roofTool .blue-panel,
#roofTool .roof-tool-panel,
#roofTool .roof-tool-card {
color: #ffffff !important;
}
/* Force children inside blue areas to white */
.roof-tool-page [style*="#051f3d"] *:not(input):not(textarea):not(select):not(option),
.roof-tool-page [style*="#0b3a6f"] *:not(input):not(textarea):not(select):not(option),
.roof-tool-page .tool-header *:not(input):not(textarea):not(select):not(option),
.roof-tool-page .step-header *:not(input):not(textarea):not(select):not(option),
.roof-tool-page .form-title-box *:not(input):not(textarea):not(select):not(option),
.roof-tool-page .selected-roof-title *:not(input):not(textarea):not(select):not(option),
.roof-tool-page .quote-step *:not(input):not(textarea):not(select):not(option),
.roof-tool-page .blue-box *:not(input):not(textarea):not(select):not(option),
.roof-tool-page .blue-panel *:not(input):not(textarea):not(select):not(option),
.roof-tool-page .roof-tool-panel *:not(input):not(textarea):not(select):not(option),
.roof-tool-page .roof-tool-card *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool [style*="#051f3d"] *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool [style*="#0b3a6f"] *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool .tool-header *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool .step-header *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool .form-title-box *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool .selected-roof-title *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool .quote-step *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool .blue-box *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool .blue-panel *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool .roof-tool-panel *:not(input):not(textarea):not(select):not(option),
.roof-estimate-tool .roof-tool-card *:not(input):not(textarea):not(select):not(option),
#roofTool [style*="#051f3d"] *:not(input):not(textarea):not(select):not(option),
#roofTool [style*="#0b3a6f"] *:not(input):not(textarea):not(select):not(option),
#roofTool .tool-header *:not(input):not(textarea):not(select):not(option),
#roofTool .step-header *:not(input):not(textarea):not(select):not(option),
#roofTool .form-title-box *:not(input):not(textarea):not(select):not(option),
#roofTool .selected-roof-title *:not(input):not(textarea):not(select):not(option),
#roofTool .quote-step *:not(input):not(textarea):not(select):not(option),
#roofTool .blue-box *:not(input):not(textarea):not(select):not(option),
#roofTool .blue-panel *:not(input):not(textarea):not(select):not(option),
#roofTool .roof-tool-panel *:not(input):not(textarea):not(select):not(option),
#roofTool .roof-tool-card *:not(input):not(textarea):not(select):not(option) {
color: #ffffff !important;
fill: #ffffff !important;
}
/* Tool labels/headings white */
.roof-tool-page h1,
.roof-tool-page h2,
.roof-tool-page h3,
.roof-tool-page h4,
.roof-tool-page label,
.roof-tool-page .label,
.roof-tool-page .form-label,
.roof-tool-page .field-title,
.roof-tool-page .step-title,
.roof-tool-page .tool-title,
.roof-estimate-tool h1,
.roof-estimate-tool h2,
.roof-estimate-tool h3,
.roof-estimate-tool h4,
.roof-estimate-tool label,
.roof-estimate-tool .label,
.roof-estimate-tool .form-label,
.roof-estimate-tool .field-title,
.roof-estimate-tool .step-title,
.roof-estimate-tool .tool-title,
#roofTool h1,
#roofTool h2,
#roofTool h3,
#roofTool h4,
#roofTool label,
#roofTool .label,
#roofTool .form-label,
#roofTool .field-title,
#roofTool .step-title,
#roofTool .tool-title {
color: #ffffff !important;
}
/* Name and phone required fields same size */
.roof-tool-page input[name*="name" i],
.roof-tool-page input[id*="name" i],
.roof-tool-page input[name*="phone" i],
.roof-tool-page input[id*="phone" i],
.roof-tool-page input[type="tel"],
.roof-estimate-tool input[name*="name" i],
.roof-estimate-tool input[id*="name" i],
.roof-estimate-tool input[name*="phone" i],
.roof-estimate-tool input[id*="phone" i],
.roof-estimate-tool input[type="tel"],
#roofTool input[name*="name" i],
#roofTool input[id*="name" i],
#roofTool input[name*="phone" i],
#roofTool input[id*="phone" i],
#roofTool input[type="tel"] {
width: 100% !important;
max-width: 100% !important;
height: 52px !important;
min-height: 52px !important;
box-sizing: border-box !important;
display: block !important;
}
/* Keep all input text readable */
.roof-tool-page input,
.roof-tool-page textarea,
.roof-tool-page select,
.roof-estimate-tool input,
.roof-estimate-tool textarea,
.roof-estimate-tool select,
#roofTool input,
#roofTool textarea,
#roofTool select {
color: #111111 !important;
background-color: #ffffff !important;
}
/* Search button/box yellow */
.roof-tool-page .search-button,
.roof-tool-page .roof-tool-search,
.roof-tool-page button.search,
.roof-tool-page .address-search-button,
.roof-estimate-tool .search-button,
.roof-estimate-tool .roof-tool-search,
.roof-estimate-tool button.search,
.roof-estimate-tool .address-search-button,
#roofTool .search-button,
#roofTool .roof-tool-search,
#roofTool button.search,
#roofTool .address-search-button {
background-color: #f2b705 !important;
border-color: #f2b705 !important;
color: #051f3d !important;
font-weight: 900 !important;
}
.roof-tool-page .search-button *,
.roof-tool-page .roof-tool-search *,
.roof-tool-page button.search *,
.roof-tool-page .address-search-button *,
.roof-estimate-tool .search-button *,
.roof-estimate-tool .roof-tool-search *,
.roof-estimate-tool button.search *,
.roof-estimate-tool .address-search-button *,
#roofTool .search-button *,
#roofTool .roof-tool-search *,
#roofTool button.search *,
#roofTool .address-search-button * {
color: #051f3d !important;
fill: #051f3d !important;
}
/* More space between map and form */
.roof-tool-page .map-address-wrap,
.roof-tool-page .address-map-wrap,
.roof-tool-page .map-address-row,
.roof-tool-page .address-map-row,
.roof-tool-page .map-form-wrap,
.roof-tool-page .form-map-wrap,
.roof-tool-page .map-form-row,
.roof-tool-page .form-map-row,
.roof-estimate-tool .map-address-wrap,
.roof-estimate-tool .address-map-wrap,
.roof-estimate-tool .map-address-row,
.roof-estimate-tool .address-map-row,
.roof-estimate-tool .map-form-wrap,
.roof-estimate-tool .form-map-wrap,
.roof-estimate-tool .map-form-row,
.roof-estimate-tool .form-map-row,
#roofTool .map-address-wrap,
#roofTool .address-map-wrap,
#roofTool .map-address-row,
#roofTool .address-map-row,
#roofTool .map-form-wrap,
#roofTool .form-map-wrap,
#roofTool .map-form-row,
#roofTool .form-map-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(330px, 430px) !important;
gap: 58px !important;
column-gap: 58px !important;
align-items: start !important;
}
.roof-tool-page iframe,
.roof-estimate-tool iframe,
#roofTool iframe,
.roof-tool-page .map-box,
.roof-estimate-tool .map-box,
#roofTool .map-box,
.roof-tool-page .google-map,
.roof-estimate-tool .google-map,
#roofTool .google-map {
margin-right: 42px !important;
margin-bottom: 32px !important;
}
.roof-tool-page form,
.roof-tool-page .form-box,
.roof-tool-page .form-panel,
.roof-tool-page .address-box,
.roof-tool-page .address-panel,
.roof-tool-page .address-section,
.roof-estimate-tool form,
.roof-estimate-tool .form-box,
.roof-estimate-tool .form-panel,
.roof-estimate-tool .address-box,
.roof-estimate-tool .address-panel,
.roof-estimate-tool .address-section,
#roofTool form,
#roofTool .form-box,
#roofTool .form-panel,
#roofTool .address-box,
#roofTool .address-panel,
#roofTool .address-section {
margin-left: 34px !important;
}
/* Keep price red */
.roof-tool-page .price,
.roof-tool-page .estimate-price,
.roof-tool-page .total-price,
.roof-estimate-tool .price,
.roof-estimate-tool .estimate-price,
.roof-estimate-tool .total-price,
#roofTool .price,
#roofTool .estimate-price,
#roofTool .total-price {
color: #d60000 !important;
}
@media (max-width: 800px) {
.roof-tool-page .map-address-wrap,
.roof-tool-page .address-map-wrap,
.roof-tool-page .map-address-row,
.roof-tool-page .address-map-row,
.roof-tool-page .map-form-wrap,
.roof-tool-page .form-map-wrap,
.roof-tool-page .map-form-row,
.roof-tool-page .form-map-row,
.roof-estimate-tool .map-address-wrap,
.roof-estimate-tool .address-map-wrap,
.roof-estimate-tool .map-address-row,
.roof-estimate-tool .address-map-row,
.roof-estimate-tool .map-form-wrap,
.roof-estimate-tool .form-map-wrap,
.roof-estimate-tool .map-form-row,
.roof-estimate-tool .form-map-row,
#roofTool .map-address-wrap,
#roofTool .address-map-wrap,
#roofTool .map-address-row,
#roofTool .address-map-row,
#roofTool .map-form-wrap,
#roofTool .form-map-wrap,
#roofTool .map-form-row,
#roofTool .form-map-row {
grid-template-columns: 1fr !important;
gap: 30px !important;
}
.roof-tool-page form,
.roof-tool-page .form-box,
.roof-tool-page .form-panel,
.roof-tool-page .address-box,
.roof-tool-page .address-panel,
.roof-tool-page .address-section,
.roof-estimate-tool form,
.roof-estimate-tool .form-box,
.roof-estimate-tool .form-panel,
.roof-estimate-tool .address-box,
.roof-estimate-tool .address-panel,
.roof-estimate-tool .address-section,
#roofTool form,
#roofTool .form-box,
#roofTool .form-panel,
#roofTool .address-box,
#roofTool .address-panel,
#roofTool .address-section {
margin-left: 0 !important;
}
}
/* roof-tool-address-suggestions-final */
.roof-address-suggestions {
position: absolute !important;
z-index: 99999 !important;
background: #ffffff !important;
border: 1px solid #d8d8d8 !important;
border-radius: 8px !important;
box-shadow: 0 10px 25px rgba(0,0,0,.18) !important;
max-height: 260px !important;
overflow-y: auto !important;
display: none;
color: #111111 !important;
}
.roof-address-suggestion-item {
padding: 12px 14px !important;
cursor: pointer !important;
color: #111111 !important;
font-size: 14px !important;
line-height: 1.35 !important;
border-bottom: 1px solid #eeeeee !important;
background: #ffffff !important;
}
.roof-address-suggestion-item:hover,
.roof-address-suggestion-item.active {
background: #f2b705 !important;
color: #051f3d !important;
}
.roof-address-suggestion-empty {
padding: 12px 14px !important;
color: #555555 !important;
font-size: 14px !important;
background: #ffffff !important;
}
/* roof-tool-name-tel-required-same-size-final */
.roof-tool-page input[name*="name" i],
.roof-tool-page input[id*="name" i],
.roof-tool-page input[name*="phone" i],
.roof-tool-page input[id*="phone" i],
.roof-tool-page input[name*="tel" i],
.roof-tool-page input[id*="tel" i],
.roof-tool-page input[type="tel"],
.roof-estimate-tool input[name*="name" i],
.roof-estimate-tool input[id*="name" i],
.roof-estimate-tool input[name*="phone" i],
.roof-estimate-tool input[id*="phone" i],
.roof-estimate-tool input[name*="tel" i],
.roof-estimate-tool input[id*="tel" i],
.roof-estimate-tool input[type="tel"],
#roofTool input[name*="name" i],
#roofTool input[id*="name" i],
#roofTool input[name*="phone" i],
#roofTool input[id*="phone" i],
#roofTool input[name*="tel" i],
#roofTool input[id*="tel" i],
#roofTool input[type="tel"] {
width: 100% !important;
max-width: 100% !important;
height: 52px !important;
min-height: 52px !important;
box-sizing: border-box !important;
display: block !important;
}
/* name-tel-boxes-yellow-search-map-spaced-final */
/* Keep visible boxes/borders around Name and Tel/Phone inputs */
.roof-tool-page input[name*="name" i],
.roof-tool-page input[id*="name" i],
.roof-tool-page input[placeholder*="name" i],
.roof-tool-page input[name*="phone" i],
.roof-tool-page input[id*="phone" i],
.roof-tool-page input[placeholder*="phone" i],
.roof-tool-page input[name*="tel" i],
.roof-tool-page input[id*="tel" i],
.roof-tool-page input[placeholder*="tel" i],
.roof-tool-page input[type="tel"],
.roof-estimate-tool input[name*="name" i],
.roof-estimate-tool input[id*="name" i],
.roof-estimate-tool input[placeholder*="name" i],
.roof-estimate-tool input[name*="phone" i],
.roof-estimate-tool input[id*="phone" i],
.roof-estimate-tool input[placeholder*="phone" i],
.roof-estimate-tool input[name*="tel" i],
.roof-estimate-tool input[id*="tel" i],
.roof-estimate-tool input[placeholder*="tel" i],
.roof-estimate-tool input[type="tel"],
#roofTool input[name*="name" i],
#roofTool input[id*="name" i],
#roofTool input[placeholder*="name" i],
#roofTool input[name*="phone" i],
#roofTool input[id*="phone" i],
#roofTool input[placeholder*="phone" i],
#roofTool input[name*="tel" i],
#roofTool input[id*="tel" i],
#roofTool input[placeholder*="tel" i],
#roofTool input[type="tel"] {
width: 100% !important;
max-width: 100% !important;
height: 52px !important;
min-height: 52px !important;
display: block !important;
box-sizing: border-box !important;
background: #ffffff !important;
color: #111111 !important;
border: 2px solid #d7d7d7 !important;
border-radius: 6px !important;
padding: 12px 14px !important;
outline: none !important;
box-shadow: none !important;
}
.roof-tool-page input[name*="name" i]:focus,
.roof-tool-page input[id*="name" i]:focus,
.roof-tool-page input[placeholder*="name" i]:focus,
.roof-tool-page input[name*="phone" i]:focus,
.roof-tool-page input[id*="phone" i]:focus,
.roof-tool-page input[placeholder*="phone" i]:focus,
.roof-tool-page input[name*="tel" i]:focus,
.roof-tool-page input[id*="tel" i]:focus,
.roof-tool-page input[placeholder*="tel" i]:focus,
.roof-tool-page input[type="tel"]:focus,
.roof-estimate-tool input[name*="name" i]:focus,
.roof-estimate-tool input[id*="name" i]:focus,
.roof-estimate-tool input[placeholder*="name" i]:focus,
.roof-estimate-tool input[name*="phone" i]:focus,
.roof-estimate-tool input[id*="phone" i]:focus,
.roof-estimate-tool input[placeholder*="phone" i]:focus,
.roof-estimate-tool input[name*="tel" i]:focus,
.roof-estimate-tool input[id*="tel" i]:focus,
.roof-estimate-tool input[placeholder*="tel" i]:focus,
.roof-estimate-tool input[type="tel"]:focus,
#roofTool input[name*="name" i]:focus,
#roofTool input[id*="name" i]:focus,
#roofTool input[placeholder*="name" i]:focus,
#roofTool input[name*="phone" i]:focus,
#roofTool input[id*="phone" i]:focus,
#roofTool input[placeholder*="phone" i]:focus,
#roofTool input[name*="tel" i]:focus,
#roofTool input[id*="tel" i]:focus,
#roofTool input[placeholder*="tel" i]:focus,
#roofTool input[type="tel"]:focus {
border-color: #f2b705 !important;
box-shadow: 0 0 0 3px rgba(242, 183, 5, .22) !important;
}
/* Make the search button/box yellow */
.roof-tool-page .search-button,
.roof-tool-page .roof-tool-search,
.roof-tool-page button.search,
.roof-tool-page .address-search-button,
.roof-tool-page button[type="submit"],
.roof-estimate-tool .search-button,
.roof-estimate-tool .roof-tool-search,
.roof-estimate-tool button.search,
.roof-estimate-tool .address-search-button,
.roof-estimate-tool button[type="submit"],
#roofTool .search-button,
#roofTool .roof-tool-search,
#roofTool button.search,
#roofTool .address-search-button,
#roofTool button[type="submit"] {
background: #f2b705 !important;
background-color: #f2b705 !important;
border-color: #f2b705 !important;
color: #051f3d !important;
font-weight: 900 !important;
}
.roof-tool-page .search-button *,
.roof-tool-page .roof-tool-search *,
.roof-tool-page button.search *,
.roof-tool-page .address-search-button *,
.roof-tool-page button[type="submit"] *,
.roof-estimate-tool .search-button *,
.roof-estimate-tool .roof-tool-search *,
.roof-estimate-tool button.search *,
.roof-estimate-tool .address-search-button *,
.roof-estimate-tool button[type="submit"] *,
#roofTool .search-button *,
#roofTool .roof-tool-search *,
#roofTool button.search *,
#roofTool .address-search-button *,
#roofTool button[type="submit"] * {
color: #051f3d !important;
fill: #051f3d !important;
}
/* Add more space between the map and the form */
.roof-tool-page .map-address-wrap,
.roof-tool-page .address-map-wrap,
.roof-tool-page .map-address-row,
.roof-tool-page .address-map-row,
.roof-tool-page .map-form-wrap,
.roof-tool-page .form-map-wrap,
.roof-tool-page .map-form-row,
.roof-tool-page .form-map-row,
.roof-estimate-tool .map-address-wrap,
.roof-estimate-tool .address-map-wrap,
.roof-estimate-tool .map-address-row,
.roof-estimate-tool .address-map-row,
.roof-estimate-tool .map-form-wrap,
.roof-estimate-tool .form-map-wrap,
.roof-estimate-tool .map-form-row,
.roof-estimate-tool .form-map-row,
#roofTool .map-address-wrap,
#roofTool .address-map-wrap,
#roofTool .map-address-row,
#roofTool .address-map-row,
#roofTool .map-form-wrap,
#roofTool .form-map-wrap,
#roofTool .map-form-row,
#roofTool .form-map-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(330px, 430px) !important;
gap: 70px !important;
column-gap: 70px !important;
align-items: start !important;
}
.roof-tool-page iframe,
.roof-estimate-tool iframe,
#roofTool iframe,
.roof-tool-page .map-box,
.roof-estimate-tool .map-box,
#roofTool .map-box,
.roof-tool-page .google-map,
.roof-estimate-tool .google-map,
#roofTool .google-map {
margin-right: 55px !important;
margin-bottom: 35px !important;
}
.roof-tool-page form,
.roof-tool-page .form-box,
.roof-tool-page .form-panel,
.roof-tool-page .address-box,
.roof-tool-page .address-panel,
.roof-tool-page .address-section,
.roof-estimate-tool form,
.roof-estimate-tool .form-box,
.roof-estimate-tool .form-panel,
.roof-estimate-tool .address-box,
.roof-estimate-tool .address-panel,
.roof-estimate-tool .address-section,
#roofTool form,
#roofTool .form-box,
#roofTool .form-panel,
#roofTool .address-box,
#roofTool .address-panel,
#roofTool .address-section {
margin-left: 42px !important;
}
@media (max-width: 800px) {
.roof-tool-page .map-address-wrap,
.roof-tool-page .address-map-wrap,
.roof-tool-page .map-address-row,
.roof-tool-page .address-map-row,
.roof-tool-page .map-form-wrap,
.roof-tool-page .form-map-wrap,
.roof-tool-page .map-form-row,
.roof-tool-page .form-map-row,
.roof-estimate-tool .map-address-wrap,
.roof-estimate-tool .address-map-wrap,
.roof-estimate-tool .map-address-row,
.roof-estimate-tool .address-map-row,
.roof-estimate-tool .map-form-wrap,
.roof-estimate-tool .form-map-wrap,
.roof-estimate-tool .map-form-row,
.roof-estimate-tool .form-map-row,
#roofTool .map-address-wrap,
#roofTool .address-map-wrap,
#roofTool .map-address-row,
#roofTool .address-map-row,
#roofTool .map-form-wrap,
#roofTool .form-map-wrap,
#roofTool .map-form-row,
#roofTool .form-map-row {
grid-template-columns: 1fr !important;
gap: 30px !important;
}
.roof-tool-page form,
.roof-tool-page .form-box,
.roof-tool-page .form-panel,
.roof-tool-page .address-box,
.roof-tool-page .address-panel,
.roof-tool-page .address-section,
.roof-estimate-tool form,
.roof-estimate-tool .form-box,
.roof-estimate-tool .form-panel,
.roof-estimate-tool .address-box,
.roof-estimate-tool .address-panel,
.roof-estimate-tool .address-section,
#roofTool form,
#roofTool .form-box,
#roofTool .form-panel,
#roofTool .address-box,
#roofTool .address-panel,
#roofTool .address-section {
margin-left: 0 !important;
}
}
/* address-field-visible-box-final */
/* Make Address field have a visible box/border like Name and Tel */
.roof-tool-page input[name*="address" i],
.roof-tool-page input[id*="address" i],
.roof-tool-page input[placeholder*="address" i],
.roof-tool-page input[name*="property" i],
.roof-tool-page input[id*="property" i],
.roof-tool-page input[placeholder*="property" i],
.roof-tool-page input[name*="street" i],
.roof-tool-page input[id*="street" i],
.roof-tool-page input[placeholder*="street" i],
.roof-tool-page input[name*="location" i],
.roof-tool-page input[id*="location" i],
.roof-tool-page input[placeholder*="location" i],
.roof-estimate-tool input[name*="address" i],
.roof-estimate-tool input[id*="address" i],
.roof-estimate-tool input[placeholder*="address" i],
.roof-estimate-tool input[name*="property" i],
.roof-estimate-tool input[id*="property" i],
.roof-estimate-tool input[placeholder*="property" i],
.roof-estimate-tool input[name*="street" i],
.roof-estimate-tool input[id*="street" i],
.roof-estimate-tool input[placeholder*="street" i],
.roof-estimate-tool input[name*="location" i],
.roof-estimate-tool input[id*="location" i],
.roof-estimate-tool input[placeholder*="location" i],
#roofTool input[name*="address" i],
#roofTool input[id*="address" i],
#roofTool input[placeholder*="address" i],
#roofTool input[name*="property" i],
#roofTool input[id*="property" i],
#roofTool input[placeholder*="property" i],
#roofTool input[name*="street" i],
#roofTool input[id*="street" i],
#roofTool input[placeholder*="street" i],
#roofTool input[name*="location" i],
#roofTool input[id*="location" i],
#roofTool input[placeholder*="location" i] {
width: 100% !important;
max-width: 100% !important;
height: 52px !important;
min-height: 52px !important;
display: block !important;
box-sizing: border-box !important;
background: #ffffff !important;
color: #111111 !important;
border: 2px solid #d7d7d7 !important;
border-radius: 6px !important;
padding: 12px 14px !important;
outline: none !important;
box-shadow: none !important;
}
.roof-tool-page input[name*="address" i]:focus,
.roof-tool-page input[id*="address" i]:focus,
.roof-tool-page input[placeholder*="address" i]:focus,
.roof-tool-page input[name*="property" i]:focus,
.roof-tool-page input[id*="property" i]:focus,
.roof-tool-page input[placeholder*="property" i]:focus,
.roof-tool-page input[name*="street" i]:focus,
.roof-tool-page input[id*="street" i]:focus,
.roof-tool-page input[placeholder*="street" i]:focus,
.roof-tool-page input[name*="location" i]:focus,
.roof-tool-page input[id*="location" i]:focus,
.roof-tool-page input[placeholder*="location" i]:focus,
.roof-estimate-tool input[name*="address" i]:focus,
.roof-estimate-tool input[id*="address" i]:focus,
.roof-estimate-tool input[placeholder*="address" i]:focus,
.roof-estimate-tool input[name*="property" i]:focus,
.roof-estimate-tool input[id*="property" i]:focus,
.roof-estimate-tool input[placeholder*="property" i]:focus,
.roof-estimate-tool input[name*="street" i]:focus,
.roof-estimate-tool input[id*="street" i]:focus,
.roof-estimate-tool input[placeholder*="street" i]:focus,
.roof-estimate-tool input[name*="location" i]:focus,
.roof-estimate-tool input[id*="location" i]:focus,
.roof-estimate-tool input[placeholder*="location" i]:focus,
#roofTool input[name*="address" i]:focus,
#roofTool input[id*="address" i]:focus,
#roofTool input[placeholder*="address" i]:focus,
#roofTool input[name*="property" i]:focus,
#roofTool input[id*="property" i]:focus,
#roofTool input[placeholder*="property" i]:focus,
#roofTool input[name*="street" i]:focus,
#roofTool input[id*="street" i]:focus,
#roofTool input[placeholder*="street" i]:focus,
#roofTool input[name*="location" i]:focus,
#roofTool input[id*="location" i]:focus,
#roofTool input[placeholder*="location" i]:focus {
border-color: #f2b705 !important;
box-shadow: 0 0 0 3px rgba(242, 183, 5, .22) !important;
}
/* Keep address suggestions dropdown readable */
.roof-address-suggestions {
border: 2px solid #d7d7d7 !important;
border-radius: 6px !important;
}
/* search-box-address-suggestions-yellow-pin-final */
.roof-tool-page input[type="search"],
.roof-tool-page input[name*="search" i],
.roof-tool-page input[id*="search" i],
.roof-tool-page input[placeholder*="search" i],
.roof-tool-page input[name*="address" i],
.roof-tool-page input[id*="address" i],
.roof-tool-page input[placeholder*="address" i],
.roof-tool-page input[name*="property" i],
.roof-tool-page input[id*="property" i],
.roof-tool-page input[placeholder*="property" i],
.roof-tool-page input[name*="street" i],
.roof-tool-page input[id*="street" i],
.roof-tool-page input[placeholder*="street" i],
.roof-tool-page input[name*="location" i],
.roof-tool-page input[id*="location" i],
.roof-tool-page input[placeholder*="location" i],
.roof-estimate-tool input[type="search"],
.roof-estimate-tool input[name*="search" i],
.roof-estimate-tool input[id*="search" i],
.roof-estimate-tool input[placeholder*="search" i],
.roof-estimate-tool input[name*="address" i],
.roof-estimate-tool input[id*="address" i],
.roof-estimate-tool input[placeholder*="address" i],
.roof-estimate-tool input[name*="property" i],
.roof-estimate-tool input[id*="property" i],
.roof-estimate-tool input[placeholder*="property" i],
.roof-estimate-tool input[name*="street" i],
.roof-estimate-tool input[id*="street" i],
.roof-estimate-tool input[placeholder*="street" i],
.roof-estimate-tool input[name*="location" i],
.roof-estimate-tool input[id*="location" i],
.roof-estimate-tool input[placeholder*="location" i],
#roofTool input[type="search"],
#roofTool input[name*="search" i],
#roofTool input[id*="search" i],
#roofTool input[placeholder*="search" i],
#roofTool input[name*="address" i],
#roofTool input[id*="address" i],
#roofTool input[placeholder*="address" i],
#roofTool input[name*="property" i],
#roofTool input[id*="property" i],
#roofTool input[placeholder*="property" i],
#roofTool input[name*="street" i],
#roofTool input[id*="street" i],
#roofTool input[placeholder*="street" i],
#roofTool input[name*="location" i],
#roofTool input[id*="location" i],
#roofTool input[placeholder*="location" i] {
width: 100% !important;
max-width: 100% !important;
height: 52px !important;
min-height: 52px !important;
display: block !important;
box-sizing: border-box !important;
background: #ffffff !important;
color: #111111 !important;
border: 2px solid #d7d7d7 !important;
border-radius: 6px !important;
padding: 12px 14px !important;
outline: none !important;
box-shadow: none !important;
}
.roof-tool-page input[type="search"]:focus,
.roof-tool-page input[name*="address" i]:focus,
.roof-tool-page input[id*="address" i]:focus,
.roof-tool-page input[placeholder*="address" i]:focus,
.roof-estimate-tool input[type="search"]:focus,
.roof-estimate-tool input[name*="address" i]:focus,
.roof-estimate-tool input[id*="address" i]:focus,
.roof-estimate-tool input[placeholder*="address" i]:focus,
#roofTool input[type="search"]:focus,
#roofTool input[name*="address" i]:focus,
#roofTool input[id*="address" i]:focus,
#roofTool input[placeholder*="address" i]:focus {
border-color: #f2b705 !important;
box-shadow: 0 0 0 3px rgba(242,183,5,.22) !important;
}
.roof-tool-page .search-button,
.roof-tool-page .roof-tool-search,
.roof-tool-page button.search,
.roof-tool-page .address-search-button,
.roof-estimate-tool .search-button,
.roof-estimate-tool .roof-tool-search,
.roof-estimate-tool button.search,
.roof-estimate-tool .address-search-button,
#roofTool .search-button,
#roofTool .roof-tool-search,
#roofTool button.search,
#roofTool .address-search-button {
background: #f2b705 !important;
background-color: #f2b705 !important;
border-color: #f2b705 !important;
color: #051f3d !important;
cursor: pointer !important;
pointer-events: auto !important;
font-weight: 900 !important;
}
.roof-address-suggestions {
position: absolute !important;
z-index: 999999 !important;
background: #ffffff !important;
border: 2px solid #d7d7d7 !important;
border-radius: 8px !important;
box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
max-height: 280px !important;
overflow-y: auto !important;
display: none;
color: #111111 !important;
}
.roof-address-suggestion-item {
padding: 12px 14px !important;
cursor: pointer !important;
color: #111111 !important;
font-size: 14px !important;
line-height: 1.35 !important;
border-bottom: 1px solid #eeeeee !important;
background: #ffffff !important;
}
.roof-address-suggestion-item:hover,
.roof-address-suggestion-item.active {
background: #f2b705 !important;
color: #051f3d !important;
font-weight: 700 !important;
}
.roof-address-suggestion-empty {
padding: 12px 14px !important;
color: #555555 !important;
background: #ffffff !important;
}
.roof-yellow-location-pin {
position: absolute !important;
z-index: 999999 !important;
width: 34px !important;
height: 34px !important;
transform: translate(-50%, -100%) !important;
pointer-events: none !important;
}
.roof-yellow-location-pin:before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 24px;
height: 24px;
background: #f2b705;
border: 3px solid #051f3d;
border-radius: 50% 50% 50% 0;
transform: translateX(-50%) rotate(-45deg);
box-shadow: 0 5px 12px rgba(0,0,0,.35);
}
.roof-yellow-location-pin:after {
content: "";
position: absolute;
left: 50%;
top: 7px;
width: 8px;
height: 8px;
background: #051f3d;
border-radius: 50%;
transform: translateX(-50%);
}
/* search-height-yellow-final-v2 */
.roof-tool-page input[type="search"],
.roof-tool-page input[name*="search" i],
.roof-tool-page input[id*="search" i],
.roof-tool-page input[placeholder*="search" i],
.roof-tool-page input[name*="address" i],
.roof-tool-page input[id*="address" i],
.roof-tool-page input[placeholder*="address" i],
.roof-estimate-tool input[type="search"],
.roof-estimate-tool input[name*="search" i],
.roof-estimate-tool input[id*="search" i],
.roof-estimate-tool input[placeholder*="search" i],
.roof-estimate-tool input[name*="address" i],
.roof-estimate-tool input[id*="address" i],
.roof-estimate-tool input[placeholder*="address" i],
#roofTool input[type="search"],
#roofTool input[name*="search" i],
#roofTool input[id*="search" i],
#roofTool input[placeholder*="search" i],
#roofTool input[name*="address" i],
#roofTool input[id*="address" i],
#roofTool input[placeholder*="address" i] {
height: 52px !important;
min-height: 52px !important;
line-height: normal !important;
padding: 0 14px !important;
border: 2px solid #d7d7d7 !important;
border-radius: 6px !important;
background: #ffffff !important;
color: #111111 !important;
box-sizing: border-box !important;
}
.roof-tool-page .search-button,
.roof-tool-page .roof-tool-search,
.roof-tool-page button.search,
.roof-tool-page .address-search-button,
.roof-tool-page button[type="submit"],
.roof-estimate-tool .search-button,
.roof-estimate-tool .roof-tool-search,
.roof-estimate-tool button.search,
.roof-estimate-tool .address-search-button,
.roof-estimate-tool button[type="submit"],
#roofTool .search-button,
#roofTool .roof-tool-search,
#roofTool button.search,
#roofTool .address-search-button,
#roofTool button[type="submit"] {
height: 52px !important;
min-height: 52px !important;
padding: 0 18px !important;
box-sizing: border-box !important;
background: #f2b705 !important;
background-color: #f2b705 !important;
border: 2px solid #f2b705 !important;
border-color: #f2b705 !important;
color: #051f3d !important;
cursor: pointer !important;
pointer-events: auto !important;
font-weight: 900 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.roof-tool-page .search-button *,
.roof-tool-page .roof-tool-search *,
.roof-tool-page button.search *,
.roof-tool-page .address-search-button *,
.roof-tool-page button[type="submit"] *,
.roof-estimate-tool .search-button *,
.roof-estimate-tool .roof-tool-search *,
.roof-estimate-tool button.search *,
.roof-estimate-tool .address-search-button *,
.roof-estimate-tool button[type="submit"] *,
#roofTool .search-button *,
#roofTool .roof-tool-search *,
#roofTool button.search *,
#roofTool .address-search-button *,
#roofTool button[type="submit"] * {
color: #051f3d !important;
fill: #051f3d !important;
}
.roof-tool-page .search-row,
.roof-tool-page .address-search-row,
.roof-tool-page .map-search-row,
.roof-estimate-tool .search-row,
.roof-estimate-tool .address-search-row,
.roof-estimate-tool .map-search-row,
#roofTool .search-row,
#roofTool .address-search-row,
#roofTool .map-search-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* full-site-final-roof-tool-updates */
.roof-result-price-range{color:#d60000!important;font-weight:900!important;font-size:34px!important;margin:10px 0 18px!important}
.roof-tool-good-better-best,.roof-option-card,.roof-payment-note-final{display:none!important}
.roof-payment-options-only-final{display:grid!important;grid-template-columns:repeat(3,minmax(160px,1fr))!important;gap:14px!important;margin-top:18px!important}
.roof-payment-plan-card-final{background:#fffaf0!important;border:2px solid #f2b705!important;border-radius:12px!important;padding:16px!important;text-align:center!important;box-shadow:0 5px 16px rgba(0,0,0,.10)!important}
.roof-payment-plan-card-final strong{display:block!important;color:#051f3d!important;font-size:20px!important;font-weight:900!important;margin-bottom:8px!important}
.roof-payment-plan-card-final span{display:block!important;color:#d60000!important;font-size:24px!important;font-weight:900!important}
.roof-submit-status-final{margin-top:12px!important;font-weight:800!important;color:#051f3d!important}
.roof-submit-status-final.error{color:#d60000!important}.roof-submit-status-final.success{color:#087a2c!important}
.roof-tool-submit[disabled],.roof-tool-next[disabled]{opacity:.65!important;cursor:wait!important}
.roof-form-roof-type-boxes,.roof-condition-boxes{display:grid!important;grid-template-columns:repeat(3,minmax(140px,1fr))!important;gap:14px!important;margin:12px 0 18px!important}
.roof-form-type-card,.roof-condition-card{border:2px solid #d7d7d7!important;border-radius:12px!important;background:#fff!important;padding:14px!important;text-align:center!important;cursor:pointer!important;color:#051f3d!important;font-weight:900!important;box-shadow:0 4px 14px rgba(0,0,0,.08)!important}
.roof-form-type-card:hover,.roof-form-type-card.active,.roof-condition-card:hover,.roof-condition-card.active{border-color:#f2b705!important;box-shadow:0 8px 22px rgba(0,0,0,.16)!important;transform:translateY(-2px)!important}
.roof-form-type-card img{width:100%!important;height:90px!important;object-fit:cover!important;border-radius:8px!important;display:block!important;margin-bottom:10px!important}
.roof-hidden-old-header-type{display:none!important}
@media(max-width:800px){.roof-payment-options-only-final,.roof-form-roof-type-boxes,.roof-condition-boxes{grid-template-columns:1fr!important}}