roof-designer {
  width: 100%;
  display: block;
  max-width: 650px;
  margin: 0 auto;
}
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;
}
/**** Toolbox *****/
.roof-designer .toolbox {
  background-color: #FFFFFF;
  border: solid 1px #eee;
  text-align: center;
  display: block;
  width: 100%;
  margin: 16px 0 0;
  float: left;
}
.roof-designer .toolbox .tool {
  color: var(--tertiary);
  padding: 4px 8px;
  font-size: 18px;
  width: 35px;
  height: 40px;
  float: left;
  margin: 0;
  transition: all 200ms ease-in;
  border-right: solid 1px #eee;
}
.roof-designer .toolbox .tool line.slash-border,
.roof-designer .toolbox .tool line.slash {
  stroke-width: 2px;
  stroke: #444A81;
  stroke-linecap: round;
  display: none;
}
.roof-designer .toolbox .tool line.slash-border {
  stroke: #fff;
}
.roof-designer .toolbox .tool i {
  width:30px;
  height: 30px;
  display: inline-block;
  opacity: 1;
  margin: 2px 0 0 0;
}
.roof-designer .toolbox .tool.disabled {
  border-color: #eee;
}
.roof-designer .toolbox .tool.disabled i {
  opacity: 0.2;
}
.roof-designer .toolbox .tool.disabled label {
  color: #A0A0A0;
}
.roof-designer .toolbox .tool:active {
  background-color: #65CE264D;
}
.roof-designer .toolbox .tool:hover,
.roof-designer .toolbox .tool.toggle.on:hover {
  cursor: pointer;
}
.roof-designer .toolbox .tool.toggle.on svg line.slash-border,
.roof-designer .toolbox .tool.toggle.on svg line.slash {
  display: inline-block;
}

.roof-designer .toolbox .tool.disabled.on,
.roof-designer .toolbox .tool.disabled:hover {
  background-color: #fff;
}
.roof-designer .toolbox .tool#edgeSelections circle {
  stroke: #444A81;
  fill: #d1eeee;
  stroke-width: 1px;
}
.roof-designer .toolbox .tool#edgeSelections circle.letter {
  fill: #fff;
}
.roof-designer .toolbox .tool#edgeSelections text {
  fill: #444A81;
  font-size: 6px;
  font-weight: 600;
}

/** Toolbox Icon Tooltips **/
.roof-designer .toolbox .tooltip {
  background-color: #3c5981;
  border-radius: 4px;
  opacity: 1;
  box-shadow: var(--box-shadow);
  display: none;
  font-family: "Exo 2", sans-serif;
  width: fit-content;
  max-width: 300px;

}
.roof-designer .toolbox #tooltip_addVoid.tooltip {
  width: 210px;
}
.roof-designer .toolbox .tooltip:after {
  position: absolute;
  top: 100%;
  left: calc(150px - 4px);
  content: " ";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #3c5981;
}
.roof-designer .toolbox #tooltip_addVoid.tooltip:after {
  left: calc(105px - 4px);
}
.roof-designer .toolbox .tooltip.on {
  display: block;
}
.roof-designer .toolbox .tooltip p {
  display: block;
  width: fit-content;
  color: #fff;
}
.roof-designer .toolbox .tooltip p {
  font-size: 12px;
  line-height: 16px;
  margin: 8px;
}

/* specific toolbox icons */
.roof-designer .toolbox .tool#roofInfo {
  display: none;
}
.roof-designer .toolbox .tool#roofInfo.on {
  display: inline-block;
}
.roof-designer .toolbox .tool#dimensions,
.roof-designer .toolbox .tool#clearRoof,
.roof-designer .toolbox .tool#roofInfo {
  width: 50px;
}
.roof-designer .toolbox .tool#dimensions i polygon {
  fill: #fff;
}
.roof-designer .toolbox .tool#dimensions.tool.disabled.on {
  background-color: #fff;
  border-color: #eee;
}
.roof-designer .toolbox .tool#dimensions.on i path {
  fill: #444a81;
}
.roof-designer .toolbox .tool#rotate i {
  background-image: url('https://dtzc2a7ngumvv.cloudfront.net/rotate-icon.svg');
}
.roof-designer .toolbox .tool#addExpansionTrim i {
  background-image: url('https://dtzc2a7ngumvv.cloudfront.net/expansion_trim-icon.svg');
}
.roof-designer .toolbox .tool#addVoid i {
  background-image: url('https://dtzc2a7ngumvv.cloudfront.net/void-icon.svg');
  position: relative;
  left: -10px;
  top: 1px;
  margin: 0;
}
.roof-designer .toolbox .tool#clearRoof {
  margin: 0;
}
.roof-designer .toolbox .tool#roofInfo {
  border-right: solid 1px #eee;
}
.roof-designer .toolbox .tool#clearRoof i,
.roof-designer .toolbox .tool#membraneCuts i,
.roof-designer .toolbox .tool#roofInfo i {
  top: 3px;
  position: relative;
}
.roof-designer .toolbox .tool#roofInfo i {
  top: 3px;
}
.roof-designer .toolbox .tool#roofInfo:hover .roof-information {
  display: inline-block;
}
.roof-designer .toolbox .tool#addExpansionTrim,
.roof-designer .toolbox .tool#membraneCuts {
  text-align: left;
}
.roof-designer .toolbox .tool#membraneCuts {
  width: 180px;
}
.roof-designer .toolbox .tool#addExpansionTrim {
  width: 150px;
}
.roof-designer .toolbox .tool#addVoid {
  width: 174px;
  padding-left: 16px;
}
.roof-designer .toolbox .tool#membraneCuts i {
  left: 8px;
  top: 2px;
  margin: 0 6px 0 0;
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.roof-designer .toolbox .tool label {
  margin: 0;
  padding: 0;
  font-size: 14px;
  position: relative;
  top: 1px;
  left: 10px;
  cursor: pointer;
}
.roof-designer .toolbox .tool#addVoid label {
  left: -3px;
  top: -9px;
}
.roof-designer .toolbox .tool#addExpansionTrim label {
  top: -10px;
  left: 5px;
}
.roof-designer .toolbox .right {
  float: right;
}
/*******************************************************************************************************************/
.roof-designer  .roof-information {
  display: none;
  width: 200px;
  height: 190px;
  border: solid 1px #ccc;
  box-shadow: var(--box-shadow);
  border-radius: 4px;
  padding: 12px;
  background-color: #fff;
  position: relative;
  left: -180px;
  top: -16px;
}
.roof-designer  .roof-information.on {
  display: inline-block;
}
.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: solid 1px #eee;
  border-top: 0;
}
.step-review .roof-designer .roof {border:0;}
.roof-designer .roof .background {
  fill: #eee;
}
.roof-designer .roof .edge {
  stroke: #000;
  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: #8a8989;
}
.roof-designer .roof .edge-selection {
  display: none;
}
.roof-designer .roof .edge-selection.on {
  display: inline-block;
}
.roof-designer .roof .edge-selection image.blank {
  display: none;
}
.roof-designer .roof .edge-selection text {
  text-anchor: middle;
  font-weight: 300;
  font-size: 12px;
  stroke: #444A81;
  fill: #444A81;
}
.roof-designer .roof .edge-selection .edge-label {
  fill: #fff;
  stroke: #444A81;
}
.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: #fff;
  cursor: pointer;
  stroke: var(--cta);
  stroke-width: 2px;
  animation: pulse-stroke 1.5s ease-in-out infinite;
}
.roof-designer .roof .edge-hit-point .edge-identifier {
  cursor: pointer;
  text-anchor: middle;
  font-weight: 600;
  font-size: 18px;
  stroke: var(--cta);
  fill: var(--cta);
}
.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;
}
@keyframes pulse-stroke {
  0%, 100% {
    stroke-width: 2px;
  }
  50% {
    stroke-width: 7px;
  }
}
.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: #8a8989;
}
.roof-designer .roof .void line.dimension {
  stroke: #8a8989;
}
.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: #333;
  stroke-width: 1px;
}
.roof-designer .roof .component .dimension-label {
  font-size:10px;
  transform: translate(25px, 20px);
}
.roof-designer .roof .component .dimension-label.y {
  transform: rotate(90deg);
}

.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 line {
  stroke-width: 1px;
}
.roof-designer .roof .component-position text {
  font-size: 12px;
}
.roof-designer .roof .component-position text {
  fill: #8a8989;
  stroke: none;
  font-size: 10px;
}
.roof-designer .roof .component-position line {
  stroke: #8a8989;
}
.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;
}
.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 .expansion-trim line {
  stroke: grey;
  stroke-width: 2px;
}
.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 .tools .icon path {
  transform: none;
}
.roof-designer .roof .membrane-cut line {
  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: #333;
  fill: #fff;
  stroke-width: 1px;
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill-opacity: 1;
}
.roof-designer .roof .component.void .void-x {
  stroke: #000;
  stroke-dasharray: 7,2,2,2;
  stroke-opacity: 0.5;
}
.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 24px 16px 24px;
  position: fixed;
  max-width: 800px;
  width: 100%;
  border-radius: 16px;
  z-index: 999999;
  margin: 10px auto;
  background-color: #fff;
  text-align: center;
  bottom: auto;
  overflow: hidden;
  height: 95vh;
  box-shadow: var(--box-shadow);
  border: solid 1px var(--grey);
}
.roof-designer.modal.shown {
  bottom: 0;
}
.roof-designer.modal.shown.small {
  bottom: auto;
}
.roof-designer.modal h1 {
  text-align: left;
  line-height: 26px;
  margin: -5px 0 12px 0;
  font-weight: 600;
}
.roof-designer.modal h2 {
  text-align: center;
  line-height: 22px;
  margin: -5px 0 12px 0;
  font-weight: 600;
  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: 15px;
  line-height: 20px;
  margin: 0 0 16px 0;
  font-weight: 300;
  text-align: left;
}
.roof-designer.modal .input-fields {
  text-align: left;
}
.roof-designer.modal .input-fields label {
  display: inline-block;
  width: 135px;
  font-size: 16px;
  font-weight: 400;
  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=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: 16px 4px 16px 16px;
  font-size: 16px;
  color: #444;
  font-weight: 300;
  height: 45px;
  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 16px 0;
  margin: 0 0 16px 0;
  border-bottom: solid 1px #eee;
  text-align: center;
}
.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);
}
.roof-designer.modal .options button {
  width: 100%;
  text-align: left;
  margin: 4px 2px;
  padding: 8px;
  border-radius: 16px;
  height: 108px;
}
.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;
}
.roof-designer.modal .modalCloseButtonContainer button:after {
  display: none;
}
.roof-designer.modal .modal-close {
  margin:auto;
}
/** Void Size Model **/
.roof-designer.void.modal h3 {
  margin-top: 0;
}
.roof-designer.void.modal {
  width: 440px;
  height: auto;
}
.roof-designer.void.modal p {
  font-size: 14px;
}
.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% - 108px);
  margin-top: 14px;
  line-height: 14px;
}
.roof-designer.void.modal .input-fields label.height {
  width: calc(100% - 117px);
  position: relative;
  top: 5px;
}
.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: 75px;
  margin: 0 0 10px;
}
.roof-designer.void.modal .input-fields input#voidHeight {
  width: 70px;
}
.roof-designer.void.modal .input-fields button {
  float: left;
  margin: 16px 0 0;
}
.roof-designer.void.modal .input-fields button.success {
  float: right;
}
.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.skylightLabel {
  top: -6px;
  position: relative;
}
.roof-designer.void.modal .input-fields label.skylightLabel i {
    border: none;
    color: var(--second);
    font-size: 18px;
    position: relative;
    top: -6px;
    left: 4px;
    padding: 0;
    cursor: pointer;
}

/* 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);
}
/** Message Popup **/
dialog {
  border: solid 1px #eee;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  transition: opacity 0.75s;
  opacity: 0;
  &[open] {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
}
dialog p {
  text-align: left;
  font-size: 14px !important;
  line-height: 18px;
  white-space: break-spaces;
}
dialog button:focus-visible {
  outline: none;
}
dialog button.outline,
dialog.with-callback button.success {
  float: right;
}
dialog.with-callback button.outline {
  float: left;
}
::backdrop {
  filter: blur(8px);
  opacity: 0.8;
  background-color: #fff;
}

/** Toggle Checkbox **/
.toggle-inner {
  width: 100%;
  max-width: 200px;
  margin: 0 auto 8px;
}
.toggle-inner,
.toggle-inner label {
  border-radius: 40px;
  background-color: #eee;
}
.toggle-inner .switch-container,
.toggle-inner input[type=checkbox]#setting {
  display: none;
}
.toggle-inner label {
  float: left;
  margin: 4px;
  font-weight: 600;
  width: calc(50% - 8px);
  font-size: 14px;
  padding: 2px 0 0;
  height: 24px;
  cursor: pointer;
}
.toggle-inner label:hover {
  background-color: #f8f8f8;
}
.toggle-inner label.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 {
  margin:0 auto;
  width: 100%;
  height: 32px;
}
.toggle-inner .input-fields {
  width: 100%;
  float: left;
}
/** Toggle Checkbox END **/

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