:root {
  --heavy-line: #1a1a1a;
  --medium-line: #5a5a5a;
  --light-line: #a0a0a0;
  --lightest-line: #d4d4d4;
  --dimension-stroke: 4px;
  --dimension-width: 0.75px;
  --void-expand: 20px;
}
roof-designer {
  width: 100%;
  display: block;
  max-width: 650px;
  margin: 0 auto;
  border: solid 1px #ccc;
  border-radius: 8px 8px 0 0;
}
roof-designer[data-read-only='true'] {
  background-color: #fff;
  border: none;
}
.roof-designer {
  display: block;
  width: 100%;
  position: relative;
}
.roof-designer image {
  cursor: pointer;
}
.roof-designer .roof [data-draggable=true] .draggable {
  cursor: move;
}
.roof-designer .roof .draggable.grabbed {
  cursor: grabbing;
  fill: #d1eeee !important;
}
.roof-designer .blur-it { 
  filter: blur(6px);
  -webkit-filter: blur(6px);
}
/**** Toolbox *****/
.roof-designer .toolbox {
  background-color: #f8f8f8;
  text-align: center;
  display: block;
  width: 100%;
  padding: 8px;
  float: left;
  border-radius: 8px 8px 0 0;
  border-bottom: solid 1px #ccc;
}
.roof-designer .toolbox .tool {
  color: var(--tertiary);
  float: left;
  transition: all 200ms ease-in;
  padding: 8px;
  margin: 0 1px;
  border: none;
  height: 40px;
  border-radius: 8px;
  background-color: transparent;
}
.roof-designer .toolbox .tool svg {
  width: 24px;
  height: 24px;
}
.roof-designer .toolbox .tool span {
  vertical-align: super;
  font-size: 14px;
  margin: 0 4px 0 8px;
  position: relative;
  top: -1px;
}
.roof-designer .toolbox .tool.disabled,
.roof-designer .toolbox .tool.disabled:hover {
  background-color: transparent;
}
.roof-designer .toolbox .tool.disabled * {
  cursor: default;
}
.roof-designer .toolbox .tool.disabled svg,
.roof-designer .toolbox .tool.disabled span {
  opacity: 0.4;
}
.roof-designer .toolbox .tool:hover,
.roof-designer .toolbox .tool.toggle.on:hover {
  cursor: pointer;
}
.roof-designer .toolbox .tool#roofInfo:hover .roof-information {
  display: inline-block;
}
.roof-designer .toolbox .tool#uploadImage,
.roof-designer .toolbox .tool#threeDView {
  float: right;
  border: solid 1px #eee;
}
.roof-designer .toolbox .tool.beta:after,
.roof-designer .toolbox .tool#uploadImage .subMenu .pill {
  width: fit-content;
  height: 20px;
  font-weight: bold;
  color: #fff;
  border-radius: 4px;
  background-color: #7c5cff;
}
.roof-designer .toolbox .tool.beta:after {
  content: 'BETA';
  font-size: 10px;
  border: solid 2px #fff;
  position: absolute;
  top: 1px;
  right: 2px;
  box-shadow: var(--box-shadow);
  padding: 0 6px;
  line-height: 16px;
  border-radius: 4px;
}
.roof-designer .toolbox .tool#uploadImage .sub-menu-container {
  display: inline-block;
  width: 100%;
  height: 50px;
  background-color: transparent;
  float: left;
}
.roof-designer .toolbox .tool#uploadImage .subMenu {
  width: 300px;
  margin: 16px;
  border-radius: 8px;
  position: absolute;
  top: 48px;
  right: 0;
  background-color: var(--tertiary);
  padding: 16px;
  display: none;
}
.roof-designer .toolbox .tool#uploadImage .subMenu:before {
  content: ' ';
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 12px solid var(--tertiary);
  position: relative;
  top: -32px;
  display: inline-block;
}
.roof-designer .toolbox .tool#uploadImage .subMenu .pill {
  line-height: 18px;
  padding: 0 8px;
  border: solid 1px #7c5cff;
  font-size: 11px;
  float: left;
  margin: 0 8px 8px 0;
}
.roof-designer .toolbox .tool#uploadImage .subMenu .pill.beta {
  background-color: transparent;
  border-color: #ccc;
  color: #ccc;
}
.roof-designer .toolbox .tool.disabled#uploadImage .subMenu.on {
  display: none;
}
.roof-designer .toolbox .tool#uploadImage .subMenu.on {
  display: inline-block;
}
.roof-designer .toolbox .tool#uploadImage .subMenu p {
  display: inline-block;
  text-align: left;
  color: #c7d2e6;
  width: 100%;
  font-size: 14px;
  text-transform: none;
  line-height: 16px;
  margin: 0 0 8px 0; 
}
.roof-designer .toolbox .tool#uploadImage .subMenu p:nth-of-type(1) {
  font-weight: bold;
  margin: 0 0 12px 0;
  color: #fff;
  font-size: 16px;
}
.roof-designer .toolbox .tool#uploadImage .subMenu .button {
  border: solid 1px #000;
  font-weight: bold;
  font-size: 14px;
  border-radius: 4px;
  padding: 8px 16px;
  background-color: var(--cta);
  text-transform: none;
  width: fit-content;
  margin: 16px 16px 0 0;
  float: left;
}

/*******************************************************************************************************************/
.roof-designer  .roof-information {
  display: none;
  width: 200px;
  height: 190px;
  border: solid 1px #fff;
  box-shadow: var(--box-shadow);
  border-radius: 4px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: absolute;
  right: 0;
  top: 56px;
}
.roof-designer  .roof-information dl {
  width: 100%;
  float: left;
  margin-bottom: 8px;
}
.roof-designer  .roof-information dt,
.roof-designer  .roof-information dd {
  font-size: 14px;
}
.roof-designer  .roof-information dd {
  float: right;
}
.roof-designer  .roof-information .info {
  color:#636363;
  text-align: left;
  font-size: 12px;
  line-height: 14px;
  margin: 4px 0 0 0;
}
.roof-designer .roof {
  margin: 0 auto 0;
  display: block;
  padding: 0 20px;
  overflow: auto;
  border-top: 0;
}
.roof-designer .roof.loading * {
  display: none !important;
}
/*******************************************************************************/
/** Roof Image Recognition loading popup **/
.roof-designer .loader {
  display: none;
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 8px;
  width: fit-content;
  height: fit-content;
  padding: 24px 32px;
  min-width: 400px;
  box-shadow: var(--box-shadow);
}
.roof-designer .loader.on {
  display: inline-block;
}
.roof-designer .loader img {
  width: 72px;
  border: solid 1px #eee;
  border-radius: 8px;
  float: left;
  margin: 0 0 16px 0;
}
.roof-designer .loader p {
  font-weight: 600;
  color: var(--tertiary);
  float: left;
  width: calc(100% - 72px - 16px);
  margin: 16px 0 4px 0;
}
.roof-designer .loader p.file-name {
  margin: 0;
  font-size: 10px;
  font-weight: normal;
  font-family: monospace;
  color: #999;
  line-height: 12px;
}
.roof-designer .loader .scan-frame {
  position: relative;        /* anchor for the scan overlay */
  overflow: hidden;          /* clip the sweep to the image bounds */
  border-radius: 8px;        /* optional — rounds the corners */
  line-height: 0;            /* kills the gap under inline imgs */
  float: left;
  width: 72px;
  margin: 0 16px 0 0;
}
.roof-designer .loader .scan {
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  top: -40%;                 /* starts just above the image */
  border-bottom: 2px solid #76bc21;   /* bright leading edge */
  animation: sweep 1.5s cubic-bezier(.5,0,.5,1) infinite;
  pointer-events: none;
}
.roof-designer .loader .processing-status,
.roof-designer .loader .processing-status ul {
  width: 100%;
  float: left;
}
.roof-designer .loader .processing-status ul {
  margin: 0;
  padding: 0;
}
.roof-designer .loader .processing-status ul li {
  list-style-type: none;
  font-weight: 100;
  font-size: 13px;
  color: #999;
  margin: 0 0 4px 0;
}
.roof-designer .loader .processing-status ul li .dot {
  width: 18px;
  height: 18px;
  border-radius: 32px;
  border: solid 2px #ccc;
  display: inline-block;
  position: relative;
  top: 4px;
  margin: 0 8px 0 0;
}
.roof-designer .loader .processing-status ul li .dot svg {
  width: 10px;
  position: relative;
  left: 2px;
  display: none;
}
.roof-designer .loader .processing-status ul li .dot svg path {
  stroke: #fff;
}
.roof-designer .loader .processing-status ul li.done {
  color: #333;
}
.roof-designer .loader .processing-status ul li.done .dot {
  background-color: var(--cta);
  border-color: var(--cta);
}
.roof-designer .loader .processing-status ul li.done .dot svg {
  display: inline-block;
}
@keyframes sweep {
  0%   { top: -40%; }
  100% { top: 100%; }
}


/*******************************************************************************/



.step-review .roof-designer .roof {border:0;}
.roof-designer .roof .edge {
  stroke: var(--heavy-line);
  stroke-width: 4px;
  stroke-linecap: square;
  fill: #fff;
  outline: 0;
}
.roof-designer .roof .edge:hover {
  stroke: var(--cta);
  cursor: pointer;
}
.roof-designer .roof .edge:hover + svg.edge-selection + svg.edge-hit-point circle {
  fill: var(--cta);
}
.roof-designer .roof .measurement {
  stroke: var(--light-line);
}
.roof-designer .roof .edge-selection {
  display: none;
}
.roof-designer .roof .edge-selection.on {
  display: inline-block;
}
.roof-designer .roof .edge-selection image.blank,
.roof-designer .roof .edge-selection .edge-label,
.roof-designer .roof .edge-selection .edge-label-text {
  display: none;
}
.roof-designer .roof .edge-selection .edge-label.on,
.roof-designer .roof .edge-selection .edge-label-text.on {
  display: block;
  cursor: pointer;
}
.roof-designer .roof .edge-selection:hover .edge-label,
.roof-designer .roof .edge:hover + svg.edge-selection .edge-label {
  fill: var(--cta);
}
.roof-designer .roof .hover-stroke {
  stroke: var(--cta);
}
.roof-designer .roof .edge-hit-point circle {
  fill: var(--cta);
  cursor: pointer;
  stroke: #fff;
  stroke-width: 2px;
  filter: drop-shadow(0px 0px 2px rgba(125,125,125,0.5));
}
.roof-designer .roof .edge-selection text,
.roof-designer .roof .edge-hit-point .edge-identifier {
  cursor: pointer;
  text-anchor: middle;
  font-size: 18px;
  font-weight: 600;
  stroke: #fff;
  fill: #fff;
}
.roof-designer .roof .edge-selection text {
  font-weight: 100;
  font-size: 12px;
}
.roof-designer .roof .edge-hit-point:hover circle {
  fill: var(--cta);
  transition: all 0.5s ease-in-out;
}
.roof-designer .roof .edge-hit-point:hover text,
.roof-designer .roof .edge:hover + svg.edge-selection + svg.edge-hit-point circle + text {
  stroke: #fff;
  fill: #fff;
}
.roof-designer .roof circle.plus-icon {
  fill: var(--cta);
  stroke-width: 2px;
}
.roof-designer.mobile .edge-hit-point svg text {
  padding: 0;
  font-size: 20px;
  line-height: 14px;
}
.roof-designer .roof svg.measurement {
  display: none;
}
.roof-designer .roof .measurement.on {
  display: inline-block;
}
.roof-designer .roof .measurement .dimension-label,
.roof-designer .roof .void .dimension-label {
  font-size: 10px;
  stroke: none;
  fill: var(--medium-line);
  font-family: monospace;
}
.roof-designer .roof .void line.dimension {
  stroke: var(--light-line);
  stroke-dasharray: var(--dimension-stroke);
}
.roof-designer .roof .edge.error {
  stroke: var(--red);
}
.roof-designer .roof .centre-line {
  stroke: #444A81;
  stroke-width: 1px;
  stroke-dasharray: 8,4;
}
.roof-designer .roof #arrowStart path,
.roof-designer .roof #arrowEnd path {
  fill: #333;
}

.roof-designer .roof .component .dimension {
  stroke-width: var(--dimension-width);
}
.roof-designer .roof .component .dimension,
.roof-designer .roof .component .dimension-label,
.roof-designer .roof .component-position {
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.25s, opacity 0.25s linear;
}
.roof-designer .roof .component-position {
  transition: visibility 0.5s, opacity 0.5s linear;
}
.roof-designer .roof .component:hover .dimension,
.roof-designer .roof .component:hover .dimension-label,
.roof-designer .roof .component-position.on {
  visibility: visible;
  opacity: 1;
}
.roof-designer .roof .component-position text {
  font-size: 10px;
}
.roof-designer .roof .component-position text {
  fill: var(--light-line);
  font-family: monospace;
}
.roof-designer .roof .component-position line {
  stroke: var(--light-line);
  stroke-dasharray: var(--dimension-stroke);
  stroke-width: 0.5;
}
.roof-designer.read-only .roof .component-position {
  display: inline-block;
}

/* Roof Components */
.roof-designer .roof .component[data-allowed-drag-direction=horizontal] .draggable {
  cursor: ew-resize;
}
.roof-designer .roof .component[data-draggable=true][data-allowed-drag-direction=vertical] .draggable {
  cursor: ns-resize;
}
.roof-designer .roof .component[data-allowed-drag-direction] .draggable.grabbed {
  cursor: grabbing;
}
/* read-only roof styling */
.roof-designer.read-only .roof {
  cursor: pointer;
  border: none;
}
.roof-designer .roof.l .component.membrane-cut .draggable,
.roof-designer.read-only .roof .component .draggable {
  cursor: default;
}
.roof-designer.read-only .roof.l svg.measurement[data-index='1'],
.roof-designer.read-only .roof.l svg.measurement[data-index='2'],
.roof-designer.read-only .roof svg.component-position {
  display: none;
}
.roof-designer.read-only .roof .edge-selection:hover .edge-label,
.roof-designer.read-only .roof .edge:hover + svg.edge-selection .edge-label {
  fill: #fff;
}
.roof-designer.read-only .roof .hover-stroke,
.roof-designer.read-only .roof .edge:hover {
  stroke: #000;
}

/** Components **/
.roof-designer .roof .membrane-cut line,
.roof-designer .roof .expansion-trim line {
  stroke: grey;
}
.roof-designer .roof .expansion-trim svg path,
.roof-designer .roof .expansion-trim svg line {
  stroke: #000;
}
.roof-designer .roof rect.draggable {
  width: 100%;
  height: calc(100% - 1px);
  fill: #fff;
  fill-opacity: 0.25;
}
.roof-designer .roof .membrane-cut path {
  transform: rotate(90deg);
  transform-origin: center;
}
.roof-designer .roof .membrane-cut svg.draggable {
  color: #000;
}
.roof-designer .roof .membrane-cut .tools .icon path {
  transform: none;
}
.roof-designer .roof .membrane-cut line.draggable {
  stroke: #333;
  stroke-dasharray: 8, 3, 2, 3;
  stroke-width: 1;
}
.roof-designer .roof .membrane-cut.vertical path {
  transform: inherit;
  transform-origin: inherit;
}
.roof-designer .roof .component.void rect:not(.click-bg) {
  stroke: var(--medium-line);
  fill: #fff;
  stroke-width: 1px;
  x: 1px;
  y: 1px;
  width: calc(100% - 2px - var(--void-expand));
  height: calc(100% - 2px - var(--void-expand));
  fill-opacity: 1;
}
.roof-designer .roof .component.void rect.inner {
  stroke: var(--light-line);
  stroke-opacity: 0.6;
  x: 4px;
  y: 4px;
  width: calc(100% - 8px - var(--void-expand));
  height: calc(100% - 8px - var(--void-expand));
}
.roof-designer .roof .component.void rect.inner:hover {
  fill: #f8f8f8;
  cursor: move;
}
.roof-designer .roof .component.void g {
  stroke: var(--lightest-line);
}
.roof-designer .roof .tools {
  cursor: pointer;
}
.roof-designer .roof .toolbox.component.void {
  display: none;
}
.roof-designer .roof .component.void:hover .toolbox {
  display: inline-block;
}
.roof-designer .roof .component[data-draggable]:hover .toolbox.component {
  display: inline-block;
}
.roof-designer .roof .toolbox.component svg:hover {
  fill: #444a81;
}
.roof-designer .roof .toolbox.component rect.bg {
  fill: #eee;
  stroke: transparent;
}
.roof-designer .roof .toolbox.component.void rect.bg {
  fill: #fff;
  stroke: #ccc;
}
.roof-designer .roof .toolbox.component .click-bg,
.roof-designer .roof .toolbox.component .delete,
.roof-designer .roof .toolbox.component .rotate {
  cursor: pointer;
  transform: none;
}
.roof-designer .roof .toolbox.component .click-bg {
  fill:transparent;
  stroke-dasharray: none;
  width: 21px;
  height: 21px;
  stroke: transparent;
}
  /** Roof Designer Modals: Edge Selection and Voids **/
.roof-designer.modal {
  padding: 24px;
  position: fixed;
  max-width: 800px;
  width: 100%;
  border-radius: 8px;
  z-index: 2;
  margin: 10px auto;
  background-color: #fff;
  text-align: center;
  bottom: auto;
  overflow: hidden;
  height: 95vh;
  border: solid 1px var(--grey);
}
.roof-designer.modal h1 {
  text-align: left;
  line-height: 26px;
  margin: -5px 0 8px 0;
  font-weight: 600;
  color: var(--tertiary);
}
.roof-designer.modal h2 {
  text-align: center;
  line-height: 22px;
  margin: -5px 0 12px 0;
  font-weight: 400;
  font-size: 18px;
  display: none;
}
.roof-designer.modal h2.on {
  display: inline-block;
}
.roof-designer.modal .letter {
  width: 48px;
  height: 48px;
  border-radius: 30px;
  background-color: #4D95E9;
  color: #fff;
  margin: 0 auto 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 0 0 0;
}
.roof-designer.modal .validation {
  width: 100%;
}
.roof-designer.modal .validation p.error {
  margin: 0 0 8px 0;
}
.roof-designer.modal p {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
}
.roof-designer.modal .input-fields {
  padding: 0 24px;
  margin: 8px -25px 0 -25px;
  text-align: left;
}
.roof-designer.modal .input-fields label {
  display: inline-block;
  width: 135px;
  font-size: 16px;
  font-weight: 300;
  margin: 0;
  padding: 0;
}
.roof-designer.modal .input-fields .unit-type {
  display: none;
  width: calc(100% - 105px);
  max-width: 300px;
}
.roof-designer.modal .input-fields .unit-type button {
  height: 42px;
  padding: 0 24px;
}
.roof-designer.modal .input-fields[unit-type=imperial] .unit-type {
  float: left;
  width: 100%;
}
.roof-designer.modal .input-fields .unit-type.on {
  display: inline-block;
}
.roof-designer.modal input,
.roof-designer.modal input + span {
  border: solid 2px #142156;
  padding: 8px 4px;
  font-size: 16px;
  color: #444;
  font-weight: 300;
  height: 40px;
  border-right: none;
  border-radius: 8px 0 0 8px;
  width: calc(100% - 145px);
  outline: none;
  margin: 0;
  vertical-align: top;
  min-width: 40px;
  text-align: center;
  top: 1px;
  position: relative;
}
.roof-designer.modal input.disabled {
  pointer-events: none;
  color: #b3aeae;
}
.roof-designer.modal input + span {
  display: inline-block;
  border-left: none;
  border-right: solid 2px #142156;
  position: relative;
  padding: 8px;
  text-transform: lowercase;
  border-radius: 0 8px 8px 0;
  background-color: #F4F4F4;
  margin: 0 16px 0 0;
  line-height: 22px;
  min-width: 0;
  width: 32px;
}
.roof-designer.modal .input-fields i {
  border: solid 2px #ccc;
  color: #ccc;
  border-radius: 24px;
  width: 24px;
  height: 24px;
  padding: 3px 0 0 3px;
}
.roof-designer.modal .input-fields button::after {
  display: none;
}
.roof-designer.modal .input-fields .imperial input {
  width: calc((100% - 185px) / 2);
}
.roof-designer.modal .options-container {
  overflow-y: scroll;
}
.roof-designer.modal .input-fields-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin: 0 0 8px 0;
}
.roof-designer.modal p.overhang {
  width: 100%;
  padding: 0 0 8px 0;
  margin: 0 0 8px 0;
  border-bottom: solid 1px #eee;
  text-align: left;
}
.roof-designer.modal .options {
  display: -webkit-flex;
  flex-direction: column;
  display: none;
  column-count: 2;
}
.roof-designer.modal .options.on {
  display: block;
  width: calc(100% - 8px);
  margin-bottom: 32px;
}
.roof-designer.modal .options button {
  width: 100%;
  text-align: left;
  margin: 4px 2px;
  padding: 8px;
  height: 108px;
  outline: none;
}
.roof-designer.modal .options div:last-child button {
  margin-bottom: 50px;
}
.roof-designer.modal .options div.on {
  order: -1;
}
.roof-designer.modal .options img {
  float: left;
  margin: 0 8px 0 0;
  width: 88px;
}
.roof-designer.modal .options p {
  font-weight: 300;
  float: right;
  margin: 0 0 4px 0;
  width: calc(100% - 96px);
}
.roof-designer.modal .options p.header {
  width: 100%;
  text-align: center;
}
.roof-designer.modal .options p.title {
  font-weight: 600;
  font-size: 16px;
}
.roof-designer.modal .options p.description {
  font-size: 14px;
  line-height: 18px;
  text-transform: none;
  margin: 0;
}
.roof-designer.modal .modalCloseButtonContainer {
  width: 100%;
  text-align: center;
  position: sticky;
  float: left;
  background: #fff;
  padding: 8px 0;
  bottom: -16px;
}
.roof-designer.modal .modalCloseButtonContainer button:after {
  display: none;
}
.roof-designer.modal .modal-close {
  margin:auto;
  font-size: 14px;
  padding: 8px 16px;
}
/** Void Size Model **/
.roof-designer.void.modal h3 {
  margin-top: 0;
}
.roof-designer.void.modal {
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: fit-content;
}
.roof-designer.void.modal .input-fields span {
  margin: 0;
}
.roof-designer.void.modal .input-fields span.mm {
  text-transform: lowercase;
  width: 46px;
}
.roof-designer.void.modal .input-fields label {
  width: calc(100% - 120px);
  margin-top: 14px;
  line-height: 14px;
}
.roof-designer.void.modal .input-fields .framelessSkylight {
  float: right;
  margin: 8px 47px 0 0;
}
.roof-designer.void.modal .input-fields label.height {
  width: calc(100% - 120px);
  position: relative;
}
.roof-designer.void.modal .input-fields label span {
  margin: 0;
  font-size: 10px;
  display: block;
  clear: both;
}
.roof-designer.void.modal .input-fields label.error-text {
  font-size: 12px;
  color: var(--red);
  display: none;
}
.roof-designer.void.modal .input-fields input {
  width: 70px;
  margin: 0 0 10px;
  -moz-appearance: textfield;
}
.roof-designer.void.modal .input-fields input::-webkit-outer-spin-button,
.roof-designer.void.modal .input-fields input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.roof-designer.void.modal .input-fields button {
  float: left;
  margin: 16px 0 0 8px;
  font-size: 14px;
  padding: 4px 16px;
  float: right;
  border-width: 1px;
}
.roof-designer.void.modal .input-fields button.outline {
  font-weight: 300;
}
.roof-designer.void.modal .input-fields button.warn {
  float:left;
  border: solid 1px var(--red);
  color: var(--red);
  margin-left: 0;
}
.roof-designer.void.modal .input-fields button.off {
  border-color: var(--dark-grey);
  color: var(--dark-grey);
}
.roof-designer.void.modal .input-fields input[type=number].error,
.roof-designer.void.modal .input-fields input[type=number].error + span {
  border-color: var(--red);
  color: var(--red);
  margin-bottom: 0;
}
.roof-designer.void.modal .input-fields input[type=number].error + span + label {
  display: block;
  width: 100%;
  margin: 4px 0 16px 0;
}
.roof-designer.void.modal .input-fields label {
  top: -6px;
  position: relative;
}
.roof-designer.void.modal .input-fields label i {
    border: none;
    color: var(--second);
    font-size: 18px;
    position: relative;
    padding: 0;
    cursor: pointer;
    margin-left: 8px;
}

/* Validation/error message Bar */
.validation {
  display: none;
}
.validation.on {
  display: inline-block;
  width: 100%;
}
.validation p {
  color:#444;
  text-align: center;
  font-weight: 600;
  background-color: #EDF4FC;
  border-left: solid 4px #4D95E9;
  padding: 12px;
  line-height: 22px;
  margin: 0;
}
.validation p.error {
  background-color: #FAE5E8;
  border-color: var(--red);
}

/** Dialog **/
dialog {
  border: solid 1px #fff;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
}
.roof-designer dialog h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 22px;
}
dialog button:focus-visible {
  outline: none;
}
dialog button { 
  float: right;
  padding: 4px 40px;
  font-size: 14px;
}
dialog button.success {
  margin-left: 8px;
}
dialog button.outline {
  font-weight: 300;
  border-width: 1px;
  padding: 5px 40px;
}
dialog::backdrop {
  opacity: 0.5;
  background-color: #000;
}

/** Toggle Checkbox **/
.toggle-inner {
  width: 100%;
  max-width: 100px;
  margin: 0 auto;
}
.toggle-inner,
.toggle-inner span {
  border-radius: 40px;
  background-color: #eee;
}
.toggle-inner .switch-container,
.toggle-inner input[type=checkbox]#setting {
  display: none;
}
.toggle-inner span {
  float: left;
  margin: 4px;
  font-weight: 600;
  width: calc(50% - 8px);
  font-size: 12px;
  padding: 2px 0 0;
  height: 21px;
  cursor: pointer;
}
.toggle-inner span.on {
  background-color: #fff;
  box-shadow: 0 0 2px 0 rgba(32, 40, 48, 0.37), 0 40px 64px -4px rgba(32,40,48,0.1);
}
.toggle-inner .toggle-container { fr
  margin:0 auto;
  width: 100%;
  height: 28px;
}
.toggle-inner .input-fields {
  width: 100%;
  float: left;
}
/** Toggle Checkbox END **/

/** 3D Canvas **/
.roof-designer canvas.roof-3d {
  width: 100%;
  height: 100vh;
  border: solid 1px #eee;
  display: none;
}

/** all screen widths <= 767px **/
@media (max-width: 767px) {
  .roof-designer .roof .edge-selection text {
    font-size: 10px;
  }
}
/** all screen widths <= 540px **/
@media (max-width: 540px) {
  .roof-designer .toolbox .tool span {
    display: none;
  }
}