.no-events {
  pointer-events: none !important;
}

.no-user-select {
  user-select: none;
}

.use-pointer {
  cursor: pointer;
}

.accented {
  position: relative;
}

.accented::before,
.accented::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--bs-secondary);
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
  --accent-offset: -7px;
  clip-path: path("M 0 0 L 110 0 L 103 7 L 7 7 L 7 103 L 0 110 z");
}

.accented::before {
  top: var(--accent-offset);
  left: var(--accent-offset);
}

.accented::after {
  bottom: var(--accent-offset);
  right: var(--accent-offset);
  transform: translate(100%, 100%) rotate(180deg);
}

/* Hide number input arrows for all calculators */
[data-vue-app] input::-webkit-outer-spin-button,
[data-vue-app] input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
[data-vue-app] input[type=number] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

/* System validation highlighting */
.system-validation-highlight {
  border: 2px solid #dc3545 !important;
  border-radius: 0.375rem;
  padding: 0.5rem;
}/* body:has(.modal.vue-custom-modal) {
  overflow: hidden !important;
} */.modal[data-v-04f5b591] {
  display: block;
  opacity: 1;
}
.modal-backdrop[data-v-04f5b591] {
  opacity: 0.5;
}
.modal-enter-to[data-v-04f5b591],
.modal-leave-from[data-v-04f5b591] {
  opacity: 1;
}
.backdrop-enter-to[data-v-04f5b591],
.backdrop-leave-from[data-v-04f5b591] {
  opacity: 0.5;
}
.modal-enter-active[data-v-04f5b591],
.modal-leave-active[data-v-04f5b591],
.backdrop-enter-active[data-v-04f5b591],
.backdrop-leave-active[data-v-04f5b591] {
  transition: opacity 150ms linear !important;
}
.modal-enter-from[data-v-04f5b591],
.modal-leave-to[data-v-04f5b591],
.backdrop-enter-from[data-v-04f5b591],
.backdrop-leave-to[data-v-04f5b591] {
  opacity: 0;
}/* body:has(.modal.vue-custom-modal) {
  overflow: hidden !important;
} */.modal[data-v-93a4f916] {
  display: block;
  opacity: 1;
  cursor: pointer;
  user-select: none;
}
@media (min-width: 576px) {
.modal-auto[data-v-93a4f916] {
    width: max-content !important;
    max-width: min(100vw - 2rem, 75vw) !important;
}
}
@media (min-width: 1024px) {
.modal-narrow[data-v-93a4f916] {
    max-width: 32vw;
}
}
.modal-backdrop[data-v-93a4f916] {
  opacity: 0.25;
}
.modal-enter-to[data-v-93a4f916],
.modal-leave-from[data-v-93a4f916] {
  opacity: 1;
}
.backdrop-enter-to[data-v-93a4f916],
.backdrop-leave-from[data-v-93a4f916] {
  opacity: 0.25;
}
.modal-enter-active[data-v-93a4f916],
.modal-leave-active[data-v-93a4f916],
.backdrop-enter-active[data-v-93a4f916],
.backdrop-leave-active[data-v-93a4f916] {
  transition: opacity 150ms linear !important;
}
.modal-enter-from[data-v-93a4f916],
.modal-leave-to[data-v-93a4f916],
.backdrop-enter-from[data-v-93a4f916],
.backdrop-leave-to[data-v-93a4f916] {
  opacity: 0;
}
.m-auto-contents[data-v-93a4f916] {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}@media screen and (min-width: 992px) {
.design-grid[data-v-878044e3] {
    --border: hsl(205, 83%, 51%);
    --fill: hsl(0, 0%, 50%);
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr 3fr;
}
}
.roof-grid[data-v-878044e3] {
  display: grid;
  overflow: hidden;
  grid-gap: 2px;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  margin-bottom: 2px;
}
.roof-svg[data-v-878044e3] {
  user-select: none;
  outline: none;
  height: 100%;
  width: 100%;
}
.designer-options[data-v-878044e3] {
  display: grid;
  overflow: hidden;
  grid-template-columns: 1fr;
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  padding: 0 1rem;
}
.svg-wrapper[data-v-878044e3] {
  display: grid;
  overflow: hidden;
  grid-template-columns: 1fr;
  grid-template-rows: max-content minmax(0, 1fr) max-content;
}
.svg-below[data-v-878044e3] {
  padding: 0.5em 1em;
}
@media screen and (min-width: 992px) {
.svg-below[data-v-878044e3] {
    display: grid;
    overflow: hidden;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 0;
}
}
.svg-below-item[data-v-878044e3] {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}
@media screen and (min-width: 992px) {
.svg-below-item[data-v-878044e3] {
    flex-direction: column;
    gap: 0;
}
}
.svg-below-label[data-v-878044e3] {
  color: #fff;
  font-size: 87.5%;
}
.svg-below-value[data-v-878044e3] {
  color: var(--bs-secondary);
}
.custom-mouse[data-v-878044e3] {
  cursor: none;
}
.hubspot-form-container[data-v-53252086] {
  /* Container styles to ensure proper spacing */
  min-height: 200px;
}

button[data-v-f3ddfba2] {
    font-size: 28px;
    background-color: #000;
    border: 3px solid #FDC82F;
    color: #FDC82F;
    border-radius: 9999px;
    line-height: 1;
    width: 1.5em;
    height: 1.5em;
    font-weight: 700;
    text-indent: 1px;
    float: right;
}
button.floating-right[data-v-f3ddfba2] {
    position: absolute;
    right: -3rem;
    top: 50%;
}
label[data-v-04d076b3] {
  position: absolute;
  font-weight: 700;
  font-size: 80%;
  transform: translate(12px, -0.7em);
  letter-spacing: 0.6px;
}
label[data-v-04d076b3]:before {
  content: "";
  position: absolute;
  background: #fff;
  height: 1px;
  top: 9px;
  left: -4px;
  right: -4px;
  z-index: -1;
}
@media screen and (min-width: 992px) {
.designer-wrapper[data-v-04d076b3] {
    display: grid;
    max-height: 780px;
}
}
.info-icon[data-v-04d076b3] {
  display: inline-block;
  --icon-size: 1.1em;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--icon-size);
  line-height: var(--icon-size);
  text-align: center;
  user-select: none;
  cursor: pointer;
}
.round[data-v-04d076b3] {
  border-radius: 99999px;
}
.app-multistep-section[data-v-04d076b3] {
  position: relative;
}
.btn.disabled-interactive[data-v-04d076b3] {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}
.btn-outline-primary[data-v-04d076b3] {
  --bs-btn-hover-color: #fff;
}
:is(input[type=text][data-v-04d076b3],
input[type=search][data-v-04d076b3],
input[type=password][data-v-04d076b3],
input[type=number][data-v-04d076b3],
input[type=url][data-v-04d076b3],
input[type=email][data-v-04d076b3],
input[type=tel][data-v-04d076b3],
textarea[data-v-04d076b3],
select[data-v-04d076b3]):is(:invalid, .invalid-input),[data-v-04d076b3]:invalid {
  border-color: #f00 !important;
}
.roof-details-delete-button[data-v-04d076b3] {
  position: absolute;
  z-index: 1;
  top: 1rem;
  right: 3rem;
}label[data-v-aafa8f6b]:not(.btn):not(.form-check-label) {
  position: absolute;
  transform: translate(12px, -0.7em);
}
label[data-v-aafa8f6b]:not(.btn):not(.form-check-label):before {
  content: "";
  position: absolute;
  background: #fff;
  height: 3px;
  top: 8px;
  left: -4px;
  right: -4px;
  z-index: -1;
}
label[data-v-aafa8f6b]:not(.btn):not(.form-check-label), .label[data-v-aafa8f6b] {
  font-weight: 700;
  font-size: 80%;
  letter-spacing: 0.6px;
}
.info-icon[data-v-aafa8f6b] {
  display: inline-block;
  --icon-size: 1.1em;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--icon-size);
  line-height: var(--icon-size);
  text-align: center;
  user-select: none;
  cursor: pointer;
}
.round[data-v-aafa8f6b] {
  border-radius: 99999px;
}
.app-multistep-section[data-v-aafa8f6b], .app-wrapper-section[data-v-aafa8f6b] {
  position: relative;
}
.app-multistep-section > .title[data-v-aafa8f6b] {
  list-style-type: "";
  position: relative;
  font-size: 1.2em;
  font-weight: bold;
  user-select: none;
}
.app-wrapper-section ~ .app-wrapper-section[data-v-aafa8f6b] {
  margin-top: 2rem;
}
.app-wrapper-section[data-v-aafa8f6b] {
  margin-bottom: 1rem;
}
.app-wrapper-section > .title[data-v-aafa8f6b] {
  display: inline-block;
  font-size: 1.1em;
  font-weight: bold;
  user-select: none;
  border-bottom: 2px solid #999999;
}
.app-multistep-section.disclaimer[data-v-aafa8f6b] {
  border: 1px solid black !important;
}
.btn-outline-primary[data-v-aafa8f6b]:hover,
.btn-outline-primary[data-v-aafa8f6b]:focus,
.btn-check:focus + .btn[data-v-aafa8f6b],
.btn-check:checked + .btn[data-v-aafa8f6b] {
  color: #fff !important;
}
[data-v-aafa8f6b]:has(.unit-label) {
  position: relative;
}
:has(.unit-label) > :is(input[data-v-aafa8f6b], select[data-v-aafa8f6b]) {
  padding-right: 2.25em !important;
}
.unit-label[data-v-aafa8f6b] {
  position: absolute;
  width: 2.25rem;
  text-align: center;
  font-size: 0.875em;
  font-weight: bold;
  right: 0.8rem;
  top: 0.4rem;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
[data-v-aafa8f6b]:has(.btn-check) {
  position: relative;
}
.btn-check[data-v-aafa8f6b] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.grid-3-columns[data-v-aafa8f6b] {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1em;
  align-items: start;
}
@media (min-width: 992px) {
.grid-3-columns[data-v-aafa8f6b] {
    grid-template-columns: 1fr 1fr 1fr;
}
.grid-3-columns.uneven[data-v-aafa8f6b] {
    grid-template-columns: 50% max-content max-content;
}
}.block-page-title-block .title {
  display: none;
}
#main.container-fluid {
  max-width: 1320px;
}.app-page-title[data-v-612afbc2] {
  font-size: 1.5em;
  font-weight: 700;
}
.bom-line[data-v-612afbc2] {
  position: relative;
}
.bom-line[data-v-612afbc2]::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 9999px;
  background-color: var(--bs-secondary);
  z-index: 1;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2509803922);
}
.bom-line.top[data-v-612afbc2]::before {
  top: 0;
}
.bom-line.bottom[data-v-612afbc2]::before {
  bottom: 0;
}
.bom-line.expanded[data-v-612afbc2]:before {
  width: 150%;
}
.bom-line.expanded.right[data-v-612afbc2]::before {
  left: 0;
  transform: none;
}
.bom-line.expanded.left[data-v-612afbc2]::before {
  right: 0;
  transform: none;
}
.bom-line.expanded[data-v-612afbc2]:not(.left):not(.right)::before {
  left: 50%;
  transform: translateX(-50%);
}
.top-paragraph[data-v-612afbc2] {
  font-size: 1.2em;
  margin-bottom: 3.25em;
}
label[data-v-612afbc2]:not(.plain):not(.btn), .label[data-v-612afbc2]:not(.plain):not(.btn) {
  font-weight: 700;
  font-size: 80%;
  letter-spacing: 0.6px;
}
@media screen and (min-width: 1200px) {
label[data-v-612afbc2]:not(.plain):not(.btn), .label[data-v-612afbc2]:not(.plain):not(.btn) {
    position: absolute;
    transform: translate(12px, -0.7em);
}
label[data-v-612afbc2]:not(.plain):not(.btn):before, .label[data-v-612afbc2]:not(.plain):not(.btn):before {
    content: "";
    position: absolute;
    background: #fff;
    height: 3px;
    top: 8px;
    left: -4px;
    right: -4px;
    z-index: -1;
}
}
.round[data-v-612afbc2] {
  border-radius: 99999px;
}
.app-multistep-section[data-v-612afbc2] {
  position: relative;
}
.btn-outline-primary[data-v-612afbc2]:hover,
.btn-outline-primary[data-v-612afbc2]:focus,
.btn-check:focus + .btn[data-v-612afbc2],
.btn-check:checked + .btn[data-v-612afbc2] {
  color: #fff !important;
}
.form-switch[data-v-612afbc2] {
  padding-left: 0;
}
.form-switch .form-check-input[data-v-612afbc2] {
  border: none;
  margin-left: 0.5em;
  margin-right: 0.5em;
  float: none;
}
.form-switch .form-check-input[data-v-612afbc2], .form-switch .form-check-input[data-v-612afbc2]:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%23ddd'/%3e%3c/svg%3e");
  background-color: #666;
}
.form-switch .form-check-input[data-v-612afbc2]:checked, .form-switch .form-check-input[data-v-612afbc2]:checked:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%23fff'/%3e%3c/svg%3e");
  background-color: #000;
}
.form-switch .form-check-input.reversed[data-v-612afbc2] {
  background-position: right center;
}
.form-switch .form-check-input.reversed[data-v-612afbc2]:checked {
  background-position: left center;
}
.form-switch .form-check-input.always-on[data-v-612afbc2] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%23fff'/%3e%3c/svg%3e");
  background-color: #000;
}
details.app-multistep-section > summary.plain[data-v-612afbc2] {
  font-size: inherit;
  font-weight: inherit;
}
.app-settings-icon[data-v-612afbc2] {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
[data-v-612afbc2]:has(.unit-label) {
  position: relative;
}
:has(.unit-label) > :is(input[data-v-612afbc2], select[data-v-612afbc2]) {
  padding-right: 2.25em !important;
}
.unit-label[data-v-612afbc2] {
  position: absolute;
  width: 2.25rem;
  text-align: center;
  font-size: 0.875em;
  font-weight: bold;
  right: 0.8rem;
  transform: translateY(0.4rem);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
[data-v-612afbc2]:has(.btn-check) {
  position: relative;
}
.btn-check[data-v-612afbc2] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.info-icon img[data-v-612afbc2], img.info-icon[data-v-612afbc2] {
  display: block;
  width: 20px;
  height: 20px;
  user-select: none;
  cursor: pointer;
}
.alternating-info-icons[data-v-612afbc2] > * {
  position: relative;
}
.alternating-info-icons[data-v-612afbc2] > * :has(> .info-icon) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: unset;
  right: unset;
}
@media (max-width: 991.98px) {
.alternating-info-icons[data-v-612afbc2] > * :has(> .info-icon:not(.left):not(.right)) {
    right: calc(100% - 0.5rem);
}
}
@media (min-width: 992px) {
.alternating-info-icons[data-v-612afbc2] > :nth-child(2n) :has(> .info-icon:not(.left):not(.right)) {
    left: calc(100% - 0.5rem);
}
.alternating-info-icons[data-v-612afbc2] > :nth-child(2n+1) :has(> .info-icon:not(.left):not(.right)) {
    right: calc(100% - 0.5rem);
}
}
.alternating-info-icons[data-v-612afbc2] > * :has(> .info-icon.right) {
  left: calc(100% - 0.5rem);
}
.alternating-info-icons[data-v-612afbc2] > * :has(> .info-icon.left) {
  right: calc(100% - 0.5rem);
}
:is(input[type=text][data-v-612afbc2],
input[type=search][data-v-612afbc2],
input[type=password][data-v-612afbc2],
input[type=number][data-v-612afbc2],
input[type=url][data-v-612afbc2],
input[type=email][data-v-612afbc2],
input[type=tel][data-v-612afbc2],
textarea[data-v-612afbc2],
select[data-v-612afbc2]):invalid,
.invalid-input[data-v-612afbc2],[data-v-612afbc2]:invalid {
  border-color: #f00 !important;
}
.flex-100[data-v-612afbc2] {
  flex: 1 1 100%;
}
.no-border-shadow[data-v-612afbc2] {
  border: none !important;
  box-shadow: none;
}[data-v-88b3c39c] {
  user-select: none;
}
.app-page-title[data-v-88b3c39c] {
  font-size: 1.5em;
  font-weight: 700;
  position: relative;
}
.app-page-title[data-v-88b3c39c]::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  border-radius: 9999px;
  background-color: var(--bs-secondary);
  z-index: 1;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2509803922);
}
label[data-v-88b3c39c] {
  position: absolute;
  font-weight: 700;
  font-size: 80%;
  transform: translate(12px, -0.7em);
  letter-spacing: 0.6px;
}
label[data-v-88b3c39c]:before {
  content: "";
  position: absolute;
  background: #fff;
  height: 1px;
  top: 9px;
  left: -4px;
  right: -4px;
  z-index: -1;
}
.row-gap-3[data-v-88b3c39c] {
  row-gap: 1rem;
}
.row-bg-even[data-v-88b3c39c] {
  background-color: #f0f0f0;
}
.link-button[data-v-88b3c39c] {
  text-decoration: underline;
  cursor: pointer;
}
table tr th[data-v-88b3c39c] {
  font-weight: 700;
}
table tr td[data-v-88b3c39c] {
  font-weight: 400;
}