.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
.tippy-box[data-animation=scale][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{transform:scale(.5);opacity:0}
.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
body {
    font: 12px "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
    color: var(--dark-gray);
}
:root {
    --dark-gray:       #2E3134;
    --blue-gray:       #E4EBEE;
    --main-blue:       #1C48F2;
    --dark-blue:       #0024fc;
    --light-blue:      #008AFC;
    --teal:            #0DCAD3;
    --green:           #27E2A4;
    --yellow:          #FCCA65;
    --orange:          #F98445;
    --red:             #FF4D4D;
    --light-purple:    #B342CE;
    --purple:          #6E30E5;
    --teal:            #0DCAD3;
    --label-gray:      #6A6f83;
    --gray:            #CFCFCF;
    --light-gray:      #DFDFDF;
    --very-light-gray: #F5F5F5;
    --white:           #FFF;
    --black:           #000;
    --black-transp:    #00000040;
}
input {
    border: 1px solid var(--light-gray);
    padding: 5px 8px;
    border-radius: 8px;
    color: var(--dark-gray);
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
input:focus, input:visited {
    color: var(--dark-gray);
}
input.number {
    text-align: right;
    padding-right: 5px;
}
input.number-md {
    width: 40px;
}
input:disabled {
    cursor: not-allowed;
}
input:disabled:not([type='checkbox']) {
    background: var(--light-gray);
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 5px 20px 5px 5px;
    background-color: var(--white);
    background-image: url(ddee14b53a8b577eeba2.svg);
    background-repeat: no-repeat;
    background-position: 97%;
    border: 1px solid var(--light-gray);
    border-radius: 5px;
}
button {
    font: 12px "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
li {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
*:focus {
    outline: none !important;
}
code {
    background: var(--blue-gray);
    padding: 1px 4px;
}
h1 {
    font-size: 1.75rem;
    font-weight: 700;
    padding: 10px 0px 0px 15px;
}
h2 {
    margin-left: 15px;
    float: left;
    font-size: 1.22rem;
    margin-top: 5px;
}
h3 {
    font-size: 1.15rem;
    color: var(--dark-gray);
}
h4 {
    font-size: .9rem;
}
.hidden {
    display: none !important;
}
.visibility-hidden {
    visibility: hidden;
}
.clearfix {
    clear: both;
}
td.center {
    text-align: center;
}

input[type=checkbox] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;
    border: 0px;
    padding: 0px;
}

input[type=checkbox]:before {
	font-family: "Material Icons Round";
    content: "\e5ca";
    font-size: 9px;
    color: transparent !important;
    background: var(--white);
    display: block;
    width: 9px;
    height: 9px;
    border: 1px solid var(--light-gray);
    border-radius: 5px;
    padding: 2px;
    margin-top: -1px;
    margin-left: 3px;
}

input[type=checkbox]:checked:before {
    border: 1px solid var(--main-blue);
    background: var(--main-blue);
	color: var(--white) !important;
    -webkit-text-stroke: 1px var(--white);
}

input[type=checkbox]:indeterminate:before {
    border: 1px solid var(--main-blue);
    background: var(--main-blue);
    color: var(--white) !important;
    -webkit-text-stroke: 1px var(--white);
    content: '–';
    text-align: center;
    line-height: 5px;
}

input[type="radio"] {
    border: 1px var(--main-blue);
}

input[type="radio"]:checked:before {
    content: "";
    display: block;
    position: relative;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--main-blue);
}

/*input[type=radio] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;
    border: 0px;
    padding: 0px;
}

input[type=radio]:before {
	font-family: "FontAwesome";
    content: "\f111";
    color: transparent !important;
    background: var(--white);
    display: block;
    width: 9px;
    height: 9px;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    margin-top: -1px;
    margin-right: 3px;
}

input[type=radio]:checked:before {
    border: 1px solid var(--main-blue);
    background: var(--main-blue);
}*/

.progress-meter .background {
    fill: var(--light-gray);
}
.progress-meter .foreground {
    /* fill: #005a8b; */
    fill: var(--main-blue);
}
.progress-meter text {
    font-size: 24px;
    font-weight: bold;
    /* fill: #005a8b; */
    fill: var(--main-blue);;
}
.loader {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.loader .caption {
    text-align: center;
    font-weight: bold;
    color: var(--main-blue);
    font-size: 20px;
}

#stats {
    position: absolute;
    top: 1px;
    left: 270px;
}

.project-header {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--white);
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    margin: 0;
    padding: 8px 5px;
    display: none;
    font-size: 16px;
    line-height: 1;
}
.project-header .close {
    position: absolute;
    top: 2px;
    right: 12px;
    border: none;
    background: none;
    color: var(--white);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: none;
}

.project-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    color: var(--white);
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 18px;
    height: 30px;
    display: none;
}
.project-footer .powered-by {
    position: absolute;
    font-size: 12px;
    bottom: 7px;
    left: 5px;
}
.project-footer .logo img {
    width: 76px;
    position: absolute;
    bottom: 7px;
    left: 81px;
}
.project-footer .fullscreen {
    position: absolute;
    bottom: 3px;
    right: 3px;
    color: var(--white);
    cursor: pointer;
    background: none;
    font-size: 16px;
    border: 1px solid var(--white);
    border-radius: 2px;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
}
.selectBox {
    border: 2px solid var(--yellow);
    background-color: rgba(75, 160, 255, 0.25);
    position: fixed;
}
.start-screen {
    width: 100%;
    height: 100%;
    background: #bfd1e5;
    display: none;
}
.start-screen .start {
    text-decoration: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -80px;
    width: 160px;
    height: 160px;
    display: block;
    z-index: 2000;
    background: url(a217769438820b39374c.png) no-repeat;
    background-size: 150px;
}

.start-screen .start:hover {
    background-position: 2px 2px;
}

.header-toolbar {
    position: fixed;
    width: 100%;
    display: none;
}
.header-toolbar .userpic img {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.header-toolbar .inner {
    display: flex;
    justify-content: flex-end;
    height: 50px;
    margin-bottom: 5px;
    padding: 0 10px 0 0;
    background: var(--main-blue);
}
.logo {
    width: 44px;
    height: 44px;
    margin: 10px 0 0 0;
}
.header-toolbar .userpic {
    margin: 4px 5px 0 5px;
    float: right;
}
/* .header-toolbar .btn-wrap { */
.header-toolbar .btn-wrap,
.edit-buttons .btn-wrap {
    float: right;
    width: 60px;
    height: 50px;
    text-align: center;
}
/* .header-toolbar .btn-wrap button { */
.header-toolbar .btn-wrap button,
.edit-buttons .btn-wrap button {
    width: 50px;
    height: 50px;
    padding: 0;
    text-align: center;
}
.header-toolbar .userpic {
    margin-left: 15px;
}
.header-toolbar .settings {
    width: 45%;
    float: left;
    color: var(--white);
    margin: 0 0 0 430px;
    top: 4px;
    position: relative;
}
.header-toolbar .switch-label {
    padding: 13px 0 13px 35px;
}

.header-toolbar .settings .group {
    height: 50px;
    padding: 0 0 0 10px;
    width: 250px;
    float: left;
}

/* .settings .group:nth-child(1) {
    width: 0px;
    margin: 0 20px 0 0;
} */

.header-toolbar .switch-input:checked + .switch-label:after {
    background-color: var(--green);
}
.actions-header {
    display: flex;
    flex-direction: row-reverse;
    margin-left: auto;
}
.annotations-empty {
    text-align: center;
    padding: 20px;
}
.annotations .input-wrapper {
    max-width: 190px;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
    padding: 2px;
}
.annotation,
.annotation-form {
    padding: 5px 0;
}
.annotation-form .actions {
    display: flex;
    flex-direction: row;
}
.annotation-form .option {
    margin-bottom: 3px;
    margin-left: 0px;
}
.annotation-form input[type=text],
.annotation-form textarea {
    padding: 4px;
    border: 1px solid var(--light-gray);
    border-radius: 4px;
}
.annotation-form .input-subject {
    width: 185px;
}
.annotation-form .input-subject {
    width: 185px;
}
/* CY */
.annotation-form .input-description {
    width: 185px;
}

.veg-annotation-form .input-height,
.veg-annotation-form .input-width {
    width: 40px;
}

.annotation .header {
    padding: 5px;
    background: #eee;
    border-radius: 3px 3px 0 0;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
    cursor: pointer;
}
.annotation-marker, .veg-annotation-marker, .viewshed-annotation-marker {
    height: 15px;
    width: 15px;
    background: #0c69c4;
    color: var(--white);
    padding: 5px;
    border: 1px solid #003eff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 1em;
    cursor: pointer;
}
.veg-annotation-marker {
    background: green;
    border: 1px solid darkolivegreen;
}

#annotation-marker-popup, #viewshed-annotation-marker-popup {
    background: #0c69c4;
    color: var(--white);
    padding: 5px;
    border: 1px solid #003eff;
    border-radius: 3px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 75px;
    max-width: 300px;
    max-height: 200px;
    overflow: auto;
}
#annotation-marker-popup .subject {
    font-weight: bold;
}
.ruler-display {
    background: var(--main-blue);
    color: var(--white);
    padding: 5px;
    border: 1px solid var(--main-blue);
    border-radius: 3px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
.gui {
    display: none;
    font-size: 10.5px;
    color: var(--very-light-gray);
    z-index: 1000;
    border-radius: 5px;
}
.gui .vtab-hide {
    width: 22px;
    height: auto;
    padding: 8px 5px;
    font-size: 14px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: var(--main-blue);
    opacity: 0.7;
    transition: opacity 0.2s;
    cursor: pointer;
}
.gui .vtab-hide:hover {
    opacity: 1.0;
}
.gui.rhs {
    position: fixed;
    top: 73px;
    right: 5px;
    width: 424px;
}
.gui.rhs .inner {
    width: 382px;
    float: right;
    margin: 0 0 0 5px;
}
.gui.rhs .ui-widget {
    font-size: 11.5px;
}
.gui.rhs .vtab-hide {
    float: right;
    margin: 0 0 0 5px;
    border-radius: 50%;
}
.ui-selectmenu-button, .ui-selectmenu-button:hover, .ui-selectmenu-button:focus {
    margin: 0;
    padding: 3.5px 8px !important;
    background-color: var(--white);
    color: var(--dark-gray);
    border: 1px solid var(--light-gray) !important;
    border-radius: 8px !important;
    max-width: 130px !important;
    width: 100px !important; /* having to use importants to override jquery ui's styling or a lot of wonky things happen with these selectmenus */
}
.ui-widget.ui-menu.ui-widget-content {
    height: 100%;
    width: 100%;
    margin-top: -1px;
    padding-top: -2px;
}
.ui-selectmenu-menu .ui-menu {
    border-radius: 8px;
    box-shadow: 0px 4px 20px var(--black-transp);
    border: 1px solid var(--light-gray);
    padding-bottom: 0px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background-color: var(--very-light-gray);
    border: var(--very-light-gray);
}
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active {
    height: 2.5em;
    line-height: 2.5em;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    margin: 0;
    border: none;
  }
.ui-selectmenu-category {
    padding: 1.5em 0.5em;
  }
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper {
    height: 3em;
    line-height: 2.5em;
}
.ui-selectmenu-menu .ui-menu-item  {
    height: 3em;
    line-height: 2.5em;
}
.ui-selectmenu-menu .ui-menu-item:hover  {
    background-color: var(--very-light-gray);
}
.ui-selectmenu-menu .ui-menu.ui-widget-content .ui-corner-top  {
    border-radius: 0px;
    border: 0px;
}
#ui-accordion.accordion > .ui-corner-all, .ui-corner-bottom, .ui-corner-top {
    border-radius: 5px;
}

.gui .ui-corner-all,
.gui .ui-corner-bottom,
.gui .ui-corner-right,
.gui .ui-corner-br,
.gui .ui-corner-left,
.gui .ui-corner-bl,
.gui .ui-corner-top,
.gui .ui-corner-tr,
.gui .ui-corner-tl {
    border-radius: 0;
    border: none;
}
.gui .slider.ui-corner-all {
    background: var(--gray);
    border-radius: 10px / 6px;
}
.ui-slider.ui-corner-all {
    border-radius: 10px / 6px;
    border: var(--main-blue);
}
.ui-slider {
    width: 90px;
    margin: 5px 0 0 7px;
    float: left;
    margin-top: 2.05em;
}
.ui-slider .ui-slider-range {
    background: var(--main-blue);
    border: var(--main-blue);
    overflow: hidden;
    border-radius: 10px / 6px;
}
.ui-slider-horizontal {
    height: 3px;
    background: var(--gray);
    border: var(--gray);
    border-radius: 10px / 6px;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.45em;
    margin-left: -.6em;
    border: none;
    border-radius: 50%;
    background: var(--main-blue);
}
.ui-slider-horizontal .ui-slider-handle:active {
    background: var(--main-blue) !important; /* maggie to remove important if she changes active color */
}
.ui-spinner {
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    color: var(--dark-gray);
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.ui-spinner .ui-spinner-button {
    background-color: var(--white);
}
.ui-tabs {
    padding: 0;
    margin-left: 12px;
}
.ui-tabs-nav {
    position: relative;
    display: block;
    margin: 0 -12px;
    padding: 7px 7px;
    border: 1px var(--light-gray) !important;
    background: var(--white);
}
.ui-tabs .ui-tabs-nav li {
    margin: 0 auto;
    background: var(--white) !important;
    border: 1px solid var(--light-gray);
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-state-active {
    border: 2px var(--main-blue);
}
.ui-tabs .ui-tabs-nav li a {
    color: var(--dark-gray);
}
.ui-tabs-nav li:first-child {
    border-radius: 8px 0px 0px 8px;
}
.ui-tabs-nav li:nth-child(n+2):nth-last-child(n+2) {
    border-radius: 0px;
}
.ui-tabs-nav li:last-child {
    border-radius: 0px 8px 8px 0px;
}
.ui-tabs-nav li:hover {
    background: var(--very-light-gray);
}
.close-slider:hover {
    cursor: pointer;
}
.close-slider {
    padding: 10%;
    display: inline;
    color: var(--dark-gray);
    margin: 0;
    background: var(--red);
}
div[class^="slide-container-"] .fa-times-circle {
    float: left;
}
.disabled-exports, .disabled-switch {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif !important;
    background: var(--gray) !important;
    box-shadow: none !important;
    transition: none !important;
}
.disabled-switch { background: none !important; }

#segment-actions span,
.segment-tilt-az span {
    display: none;
}
#segment-actions {
    margin: 4px 0 0 0;
    float: none;
    line-height: none;
    text-align: left
}

.disabled-exports:hover {
    cursor: default !important;
}
.disabled-switch:hover > a {
    visibility: visible !important;
}
.disabled-exports:hover + a {
    visibility: visible !important;
}

.tool-options .option a,
.array-tab .details-container .details-visibility a,
div[class^="slide-container-"] .option .input-wrapper a,
/* // */
.array-tab .details-container .details-visibility a,
.fill-edit-container .edit-buttons a,
.help-wrapper a,
.help-wrapper .helper-text ,
.orientation-sub-container .helper-text,
.helper-text,
.edit-buttons a {
    position: absolute;
    visibility: hidden;
    left: 160px;
    height: auto;
    z-index: 100;
    width: 180px;
    color: var(--white) !important;
    background: var(--gray);
    font-size: 12px;
    margin: 8px;
    text-align:  center;
}
.fill-edit-container .edit-buttons a {
    left: 120px;
    bottom: 20px;
    font-weight: normal;
    padding: 4px;
    /* Is this consistent with other helper-texts? */
}
.orientation-sub-container .helper-text {
    padding: 4px;
    left: 80px;
    font-weight: normal;
}

.array-tab .details-container .details-visibility a {
    left: 0px;
    padding: 4px;
    top: -20px;
    text-align: center;
    width: 140px;
}

.active-btn {
    background: var(--yellow) !important;
}

.tool-options .option .input-wrapper a:hover,
.array-tab .details-container .details-visibility a:hover,
.fill-edit-container .edit-buttons a:hover,
.edit-buttons a:hover {
    visibility: visible !important;
}

.model-download + .tool-options button, div[class^="slide-container-"] button {
    width: 140px;
}

.slide-container-4 .option.download-nrel-report {
    margin-top: 25px;
}

.slide-container-3 .models3d button {
    margin-bottom: 1em;
}

div[class^="slide-container-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
    background: var(--white);
    position: absolute;
    left: -198px;
    top: 59%;
    overflow-y: auto;
    padding: .75% 0 4.5% 0;
    overflow: initial;
    color: var(--dark-gray);
    min-height: 12vh;
}
.tool-options .option {
    overflow-x: hidden;
    overflow-y: hidden;
}
.tool-options .input-wrapper {
    text-align: center;
    margin-left: 0;
    float: none;
}
.tool-options button {
    font-size: 10px !important;
}
.tool-options hr {
    border: 1px solid #e7e7e7;
    border-bottom: none;
}
.gui .ui-accordion .ui-accordion-content.tool-options {
    padding: 0 5px;
}
.tool-options .option {
    margin: 10px 5px;
}
.tool-options .option input[type="radio"] {
    margin-top: -2px;
    vertical-align: middle;
}

table.ui-form {
    width: 100%;
    border-collapse: collapse;

}
table.ui-form table {
    border-collapse: collapse;
    margin-right: 5px;
}
.gui.lhs table.ui-form td.label {
    float: none;
    width: 122px;
    line-height: 1.3;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.project-info.standalone-button {
    margin-bottom: 5px;
    display: none;
}
.project-info.standalone-button button {
    width: 345px;
}

.roof-plane-head {
    margin-top: 5px;
    height: 66px;
}
.roof-plane-head td {
    /* width: 50%; */
    vertical-align: top;
}
.remove-plane {
    text-align: center;
    padding-top: 15px;
}
.align-right {
    text-align: right;
}
div[class^="slide-container-"] .label {
    font-weight: bold;
}
div[class^="slide-container-"] hr { height: 2px; }
div[class^="slide-container-"] .divider {
    border-bottom: 1px solid var(--black);
    width: 87%;
    margin: 12px 0 6px 0;
}
div[class^="slide-container-"] .sub-label {
    /* font-size: 8px; */
    font-size: 10px;
    text-align: center;
    padding: 0px 0 8px 0px;
    /* font-weight: bold; */

}
div[class^="slide-container-"] .option {
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 2px;
}
.tool-options div[class^="slide-container-"] .option .label,
.tool-options div[class^="slide-container-"] .option .input-wrapper {
    text-align: center;
    width: auto;
    margin-left: 0;
    float: none;
}
.gui .label {
    float: left;
    width: 140px;
    line-height: 2em;
}
.gui .viewsheds-container .input-wrapper {
    margin-left: 0px !important;
}
.gui .input-wrapper {
    float: left;
    margin-left: 15px;
    line-height: 2em;
}
.gui .input-wrapper.first input[type=text] {
    width: 100px;
}
.gui .input-wrapper.second input[type=text] {
    width: 30px;
}
.gui .input-wrapper.third {
    margin-left: 60px;
}
.gui .input-wrapper select {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
    min-width: 83px;
}
.gui .slider {
    width: 90px;
    margin: 10px 0 0 7px;
}
.gui .ui-accordion .ui-accordion-content {
    padding: 5px;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.ui-accordion-icons:hover .segment-name-edit {
    color: var(--label-gray);
}
.ui-accordion .ui-accordion-header {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: 800;
}
.ui-accordion .ui-accordion-header.ui-state-default.ui-accordion-icons.ui-accordion-header-active {
    background-color:  var(--teal);
    color:  var(--dark-gray);
}
.ui-accordion .ui-accordion-header.ui-state-default.ui-accordion-icons.ui-accordion-header-active{
    border-radius: 0px !important;
}
.ui-accordion .ui-accordion-header.ui-state-default.ui-accordion-icons.ui-accordion-header-active:first-child {
    border-radius: 5px 5px 0px 0px !important;
}
.ui-accordion .ui-accordion-header.ui-state-default.ui-accordion-icons.ui-accordion-header-active:last-child {
    border-radius: 0px 0px 5px 5px !important;
}
.ui-accordion {
    border-radius: 10px !important;
}

.ui-icon {
    background-image: url(2037553b84119191ab19.png) !important;
    margin-left: -4px;
}
.ui-state-active .ui-icon {
    background-image: url(3f9b20702406c3f46fca.png) !important;
}
.gui .input-shade-location {
    margin-bottom: 2px;
}
.gui .spacer {
    margin-top: 15px;
}

.input-rotate-degrees-value {
    text-align: right;
}
.input-rotate-degrees-lock {
    vertical-align: middle;
}

.controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px var(--black-transp);
}
#pac-input {
    background-color: var(--white);
    margin-left: 12px;
    padding: 0 11px 0 6px;
    text-overflow: ellipsis;
    width: 300px;
    height: 34px;
}
#map-location {
    margin-top: 10px;
}
#map-location .grab {
    right: 10px !important;
}

.dxf-export-tool-view hr {
    border: none;
    width: 22px;
}
.dxf-export-tool-view.front hr {
    border-top: 2px dotted #ff0000;
}
.dxf-export-tool-view.back hr {
    border-top: 2px solid #ff0000;
}
.dxf-export-tool-view.left hr {
    border-top: 2px dotted #00ff00;
}
.dxf-export-tool-view.right hr {
    border-top: 2px solid #00ff00;
}
.dxf-export-tool-view.top hr {
    border-top: 2px solid #0000ff;
}

.gui.lhs .accordion {
    margin-bottom: 5px;
}
.gui.lhs .ui-accordion-content,
.gui.lhs .inner .ui-accordion-content,
/* .gui.lhs .inner .accordion .ui-accordion-content, */
.gui.lhs .accordion .ui-accordion-content {
    /* max-height: 52vh; */
    /* background: red; */
    max-height: 72vh;
    overflow-x: hidden;
    overflow-y: hidden;
}

.gui.lhs .accordion.empty {
    margin-bottom: 0;
}
.gui.lhs .accordion .header {
    border: none;
    border-radius: 0;
    margin-top: 0;
}
.gui.lhs .accordion .header.ui-state-active,
.gui.lhs .header.ui-state-active,
.gui.rhs .accordion .header.ui-state-active {
    background: var(--teal);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    /*background: var(--main-blue) !important;*/
    color: var(---main-blue) !important;
}
.ui-widget-content {
    color: var(--dark-gray);
}
#dialog-project-info .ui-state-active {
    /*border: 2px solid var(--main-blue) !important;*/
    color: var(--dark-gray) !important;
}
.gui.lhs .add-roof-plane button {
    margin-top: 0;
}

.gui.rhs .accordion {
    background: var(--white);
    overflow: hidden;
}
.gui.rhs .accordion .header {
    border: none;
    border-radius: 0;
    margin-top: 0;
}
.gui.rhs .accordion .header:focus {
    outline: none;
}
.gui.rhs .accordion .model-import-container .tool-options {
    border: none;
    margin-top: 35px;
}

.gui.rhs .input-heat-map-threshold {
    width: 175px;
}

.gui.rhs .elevation-heat-map-threshold {
    height: 42px;
}
.gui.rhs .input-heat-map-threshold .ui-slider-handle.ui-state-active {
    color: var(--dark-gray);
}
.gui.rhs .input-heat-map-threshold .ui-slider-handle {
    content: " ";
    width: 10px;
    height: 10px;
    line-height: 45px;
    background: var(--main-blue);
    position: absolute;
    top: -3px;
    left: 3px;
    border-radius: 50%;
}
.gui.rhs .input-heat-map-threshold .ui-slider-handle.handle2 {
    background-color: var(--red) !important;
}

.plane-tabs {
    margin-top: 5px;
    margin-bottom: 5px;
}
.plane-tabs.ui-tabs .ui-tabs-panel {
    padding: 0 5px;
    overflow-x: hidden;
    max-height: 46vh;
    overflow-y: auto;
}

.align-top td {
    vertical-align: top;
}

.subsection {
    margin: 0 0 5px 0;
    border: 3px solid #eee;
}
.subsection h3 {
    margin: 5px 10px;
    font-weight: bold;
    color: var(--dark-gray);
}
.manual-array .subsection {
    border: none;
    font-size: 12.5px;
    margin-top: -1px;
}
.subsection .content div {
    display: flex;
    align-items: center;
}
.subsection .content {
    margin: 5px 0;
    padding: 0 10px;
}
.layers-accordion .subsection {
    margin-top: 5px;
}
.learn-more {
    color: var(--label-gray) !important;
}
input.number.small {
    width: 25px !important;
}
input.number.medium {
    width: 40px !important;
}
input.number.large {
    width: 60px !important;
}
.tags {
    display: flex;
    flex-wrap: wrap;
}
.tag {
    text-align: center;
    color: var(--white);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0px 5px 5px 0px;
    float: left;
    position: relative;
}
.tag:nth-child(1) {
    background-color: var(--orange);
}
.tag:nth-child(2) {
    background-color: var(--purple);
}
.tag:nth-child(3) {
    background-color: var(--teal);
}
.tag:nth-child(4) {
    background-color: var(--light-purple);
}
.tag:nth-child(5) {
    background-color: var(--light-blue);
}
.tag:nth-child(6) {
    background-color: var(--green);
}
.tag:nth-child(7) {
    background-color: var(--yellow);
}
.tag:nth-child(8) {
    background-color: var(--red);
}
.tag.red {
    background-color: var(--red);
}
.tag.yellow {
    background-color: var(--yellow);
}
.tag.green {
    background-color: var(--green);
}

.auto-segment-actions {
    width: 100%;
    position: relative;
    display: flex;
}
.auto-segment-actions-msg {
    width: 100%;
    position: relative;
    margin-top: -2px;
}
.auto-segment-actions-msg .alert-box {
    width: 92.5%;
    margin-left: -2.5%;
    font-size: 11px;
    margin-bottom: 20px;
    padding-top: 2px;
}
.auto-segment-actions-msg .alert-box span {
    line-height: 35px;
}
.auto-segment-header {
    width: 100%;
    position: relative;
    display: flex;
}
.auto-segment-header h3 {
    float: left;
}
.auto-segment-header .info {
    float: left;
    padding-top: 10px;
    margin-left: -8px;
}
.subsection .auto-seg-content {
    display: block !important;
}
.auto-segment-inputs {
    float: left;
    opacity: 50%;
    cursor: not-allowed;
}
.auto-segment-inputs input[type="radio"] {
    margin: 6px 10px 6px 7px;
    vertical-align: middle;
}
.x-ray-visibility {
    padding-top: 5px;
}
.auto-segment-inputs #auto-segment-setback {
    max-width: 17px;
    margin-left: 12px;
    margin-top: 4px;
}
.auto-segment-inputs .content {
    margin-top: -15px;
}
.auto-segment-inputs #setback-spinner {
    max-width:23px;
}
.auto-segment-inputs .units {
    padding-left: 7px;
}
.beta-tag {
    background-color: #D8E0FD;
    color: var(--main-blue);
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 12px;
    padding: 3px 8px;
    max-height: 18px;
}
button.sy {
    position: relative;
    overflow: hidden;
    background: var(--main-blue);
    border: none;
    padding: 7px 8px;
    color: var(--white);
    text-transform: none;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
}
.sidebar-deck button.sy {
    background: var(--main-blue);
    text-transform: none;
}
.sidebar-deck button.sy.btn-delete {
    background: var(--red);
}
button.sy:hover {
    opacity: .85;
    transition: all .25s ease-in-out;
}
button.sy:hover,
button.sy:focus {
    outline: 0;
}
button.sy:before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    display: block;
    width: 0;
    padding-top: 0;

    border-radius: 100%;

    background-color: rgba(236, 240, 241, .3);

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
button.sy:active:before {
    width: 120%;
    padding-top: 120%;
    transition: width .2s ease-out, padding-top .2s ease-out;
}
button.sy:disabled {
    background-color: var(--gray);
    cursor: not-allowed;
}
button.sy.captioned {
    text-align: center;
    width: 44px;
    height: 44px;
}
button.sy.captioned .caption {
    font-size: 8px;
}
button.sy.btn-tree.add-segment {
    padding: 7px 0px;
    width: 150px;
    text-align: center;
    background-color: var(--dark-gray)
}
button.sy.btn-tree.add-segment:hover {
    opacity: .85;
    transition: all .25s ease-in-out;
}
button.sy.btn-tree.add-layer {
    padding: 7px 2.5%;
}
button.sy.btn-tree.add-layer img {
    width: 12px;
    margin-top: -3px;
    vertical-align: middle;
}
button.sy.btn-tree {
    margin: 10px 0px 8px 10px;
}
.sy.btn-tree i {
    margin-right: 3px;
}
button.sy.gray {
    background-color: var(--dark-gray);
}
button.sy.manual-array-outline {
    text-align: center;
    width: 100%;
    padding: 10px;
    padding: 8px 10px;
}
button.sy.icon.active > img {
    filter: brightness(100);
}
button.sy.icon {
    border: 1px solid var(--gray);
    background: var(--white) !important;
}
button.sy.icon.active {
    background: var(--main-blue) !important;
    border: 1px solid var(--main-blue);
}
button.sy.icon-btn i {
    margin-right: 3px;
}
.input-wrapper > button.sy {
    padding: 6px 20px;
    font-weight: 500;
    border-radius: 8px;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
button.sy.cancel, button.sy.edit {
    border: 1px solid var(--light-gray);
    background-color: var(--white);
    color: var(--dark-gray);
}
button.sy.save {
    padding: 8px 25px;
}
.actions button.sy.btn-tree {
    float: right;
    margin: 4px 10px 0 0;
}
.tool-options button .fa,
.load-changes button .fa,
.open-library button .fa,
.save-changes button .fa,
.add-roof-plane button .fa {
    margin-right: 3px;
}

button.sy.sidebar {
    font-size: 23px;
    box-shadow: none;
    background: var(--blue-gray);
    color: var(--dark-gray);
}
button.sy.sidebar .caption {
    display: none;
}
button.sy.header {
    font-size: 30px;
    box-shadow: none;
    background: var(--white);
    color: var(--dark-gray);
}
button.sy.header .caption {
    display: none;
}
.add-roof-plane button,
.standalone-button button {
    padding: 5px;
    margin-top: 5px;
    font-size: 12px;
    text-align: center;
}
.add-roof-plane button {
    width: 345px;
    background: var(--green);
    font-weight: bold;
    height: 40px;
}
.standalone-button button {
    width: 345px;
}
.two .standalone-button button {
    width: 172.5px;
    float: left;
}
.two .standalone-button:first-child button {
    margin-right: 5px;
}

.btn-tree {
    margin: 10px;
}
.navbar button {
    padding-top: 5px;
}
.navbar button.active {
    border-radius: 8px;
    background-color: #D5DDE0;
}

.sy.manual-array-fill,
.sy.add-viewshed,
.sy.annotate {
    width: 100%;
    text-align: center !important;
    border-radius: 8px;
    background: var(--main-blue);
    font-weight: bold;
    padding: 9px;
}
.sy.add-viewshed {
    margin: 0px 0px 10px 0px;
}
#banner-img-screenshot {
    padding: 8px 20px;
}
button.sy.icon {
    width: 30px;
    height: 30px;
    background: none;
    border-radius: 6px;
    /*color: var(--dark-gray);
    border: 1px solid var(--blue-gray);*/
    color: var(--white);
    background-color: var(--main-blue);
    text-align: center;
}
button.sy.red {
    background-color: var(--red);
}
button.sy.icon.remove {
    color: var(--white);
    background-color: var(--red);
    border: none;
}
.sw-multiway {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    width: 100%;
    border-radius: 12px;
    border: none;
    color: var(--dark-gray);
    background: var(--white);
    line-height: 1.5;
    cursor: pointer;
}
.sw-multiway .sw-option:first-child {
    border-radius: 8px 0px 0px 8px;
}
.sw-multiway .sw-option:nth-child(n+2):nth-last-child(n+2) {
    border-radius: 0px;
}
.sw-multiway .sw-option:last-child {
    border-radius: 0px 8px 8px 0px;
}
.sw-multiway .sw-option {
    flex: 1;
    padding: 7px 10px;
    text-align: center;
    border: 1px solid var(--light-gray);
    float: left;
}
.sw-multiway:not(.disabled) .sw-option:hover {
    cursor: pointer
}
.sw-multiway:not(.disabled) .sw-option.active {
    background: var(--main-blue);
    border: .25px solid var(--main-blue);
    color: var(--white);
    font-weight: 800;
    line-height: 1.5;
    opacity: 1;
}
.sw-multiway .sw-option i {
    font-size: 10px;
    padding-right: 3px;
}
.sw-multiway .sw-option .disabled,
.sw-multiway.disabled .sw-option {
    background: var(--light-gray);
    color: var(--dark-gray);
    border: .25px solid var(--light-gray);
}
.sw-multiway .disabled,
.sw-multiway.disabled {
    background-color: var(--gray);
    color: var(--white);
    cursor: not-allowed !important
}
.sw-multiway .disabled:active,
.sw-multiway.disabled:active {
    pointer-events: none;
}
/*
styling for multiway selector
.sw-multiway {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    width: 100%;
    border-radius: 12px;
    border: none;
    color: var(--dark-gray);
    background: var(--white);
    line-height: 1.5;
    cursor: pointer;
}
.sw-multiway .sw-option:first-child {
    border-radius: 8px 0px 0px 8px;
}
.sw-multiway .sw-option:nth-child(n+2):nth-last-child(n+2) {
    border-radius: 0px;
}
.sw-multiway .sw-option:last-child {
    border-radius: 0px 8px 8px 0px;
}
.sw-multiway .sw-option {
    flex: 1;
    padding: 7px 10px;
    text-align: center;
    border: 1px solid var(--light-gray);
    float: left;
}
.sw-multiway .sw-option:hover {
    cursor: pointer
}
.sw-multiway .sw-option.active {
    background: var(--main-blue);
    border: .25px solid var(--main-blue);
    color: var(--white);
    font-weight: 800;
    line-height: 1.5;
    opacity: 1;
}
.sw-multiway .sw-option i {
    font-size: 10px;
    padding-right: 3px;
}
.sw-multiway .sw-option .disabled {
    background: var(--light-gray);
    color: var(--dark-gray);
    border: .25px solid var(--light-gray);
}
.sw-multiway .disabled {
    background-color: var(--gray);
    color: var(--white); cursor: not-allowed !important
}
.sw-multiway .disabled:active {
    pointer-events: none;
}
/*
styling for multiway selector
.sw-multiway {
    display: flex;
    justify-content: space-between;
    border-radius: 12px;
    border: 1px solid var(--light-gray);
    border: none;
    color: var(--dark-gray);
    background-color: var(--light-gray);
    margin: 10px 0;
    height: 28px;
    line-height: 1.5;
    cursor: pointer;
    width: 100%;
}
.sw-multiway .sw-option {
    opacity: .55;
    padding: 5px 7px;
    flex: 1;
    text-align: center;
}
.sw-multiway .sw-option:hover {
    cursor: pointer
}
.sw-multiway .sw-option.active {
    background: var(--white);
    box-shadow: 0 .5px .5px var(--black-transp);
    border: .25px solid var(--light-gray);
    border-radius: 12px;
    color: var(--main-blue);
    font-weight: 800;
    margin: -1px;
    height: 17px;
    line-height: 1.5;
    opacity: 1;
}
.sw-multiway .sw-option i {
    font-size: 10px;
    padding-right: 3px;
}*/
.system-tree .sy.btn-delete {
    background: var(--red);
}

button.sy.icon.btn-horizon {
    background: url(57184b9e210da9c188c9.svg) 49% 49% no-repeat;
    background-size: 55%;
    border: 1px solid var(--gray);
}
button.sy.icon.viewshed-remove {
    background: url(a1d062b1add62727e27c.svg) 52% 49% no-repeat;
    background-size: 75%;
    background-color: var(--red);
    border: none;
    display: block;
    float: left;
    margin-right: 4px;
}
button.sy#nav-drone-images {
    background-image: url(7ce3f90a6f0d6e50a0fa.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 62%;
}
button.sy#nav-exports {
    background-image: url(23bb51fec9d9c1f91ea0.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 62%;
}
button.sy#header-open-sidebar {
    background: var(--blue-gray);
    text-align: center;
    width: 44px;
    height: 44px;
    margin-right: 10px;
    margin-top: 2px;
}

button.sy.header.svg {
    width: 50px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 63%;
}
button.sy.header.active {
    background-color: var(--blue-gray);
}
button.sy#header-save {
    background-image: url(9c0c3ff259c0c323bdca.svg?x=202104151114);
}
button.sy#header-select {
    background-image: url(cc6848393d09ca9c33c9.svg?x=202104151114);
}
button.sy#header-screenshot {
    background-image: url(b00aac62f2a4e60f810c.svg?x=202104142012);
}
button.sy#header-thumbnail {
    background-image: url(8046d17ce7b5faba7d66.svg?x=202104151120);
}
button.sy#header-module-lib {
    background-image: url(6b5d90912ba73c03a7af.svg?x=202104142012);
}
button.sy#header-dimensions {
    background-image: url(d64d63e127eaafbdfa39.svg?x=202104142012);
}

button.sy.delete {
    background-color: var(--red);
}
button.sy.draw-auto-segments {
    padding: 7px 50px;
    margin: 5px 4px 20px 0px;
    float: left;
}
button.sy.apply-auto-segments, button.sy.cancel-auto-segments {
    padding: 7px 25px;
    margin: 5px 4px 20px 0px;
    float: left;
}
button.sy.cancel-auto-segments {
    background-color: var(--red);
}
button.sy:disabled {
    background-color: var(--gray);
}

#nav-logo {
    cursor: pointer;
    margin-bottom: 5px;
}

button.sy.nocolor {
    background-color: transparent;
    color: var(--dark-gray);
}

button.sy.narrow {
    padding: 2px 2px
}

#prod-project-link a {
    font-size: 22px;
    font-weight: bold;
    color: var(--white);
}

.ui-dialog {
    overflow: visible;
    padding: 0;
    border: 0;
    box-shadow: 10px 10px 32px var(--black-transp);
}
.ui-dialog.ui-widget.ui-widget-content {
    border: 0;
    border-radius: 12px;
    padding: 15px 22px;
}
.ui-dialog.ui-front {
    z-index: 2000;
}
.ui-widget {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.ui-widget input, select {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
    padding: 3px 4px;
    border-radius: 8px;
    color: var(--dark-gray);
}
.ui-widget select {
    border: 1px solid var(--light-gray);
}
.rename-dialog input {
    padding: 6px 8px;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix.ui-draggable-handle {
    background-color: var(--white);
    color: var(--dark-gray);
    border: 0;
    border-radius: 5px;
    padding: 5px;
    margin: 15px 5px 5px 5px;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.ui-dialog .ui-dialog-content {
    padding: .15em 1em;
    margin-top: -.5em;
}
.ui-dialog .ui-dialog-title {
    font: 16px "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
    width: auto;
    float: none;
    font-weight: bold;
}
.ui-widget button {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.ui-dialog .row {
    margin: 15px 0 10px 0;
    display: flex;
    align-items: baseline;
}
.ui-dialog .row .full-width {
    flex: 1;
}
.ui-dialog .desc {
    padding: 10px 0px 5px 0px;
}
.ui-dialog button.sy.rename, button.sy.start-over, button.sy.delete, button.sy.save {
    padding: 9px 28px;
}
.ui-widget-overlay {
    background: var(--black);
    opacity: .75;
    z-index: 1000;
}

/*.rename-dialog .ui-button.ui-dialog-titlebar-close {
    display: none;
 }*/

.ui-button.ui-dialog-titlebar-close {
    display: none;
}

.dialog-viewshed .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close {
    display: block;
}
/*#ui-id-21 .ui-dialog-titlebar {
    margin-top: -2px;
    margin-bottom: 10px;
}
#ui-id-21 .ui-dialog {
    padding-bottom: 10px;
}*/
.ui-button.ui-dialog-titlebar-close {
   background: var(--white);
   border-radius: 4px;
   border: 0px;
   margin-top: -3%;
}
.ui-button.ui-dialog-titlebar-close .ui-icon-closethick {
    background-image: none !important;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--label-gray);
    display: inline-block;
    text-indent: 0;
    white-space: normal;
    width: auto;
    height: auto;
    padding: 2px;
    color: var(--label-gray);
}
.ui-button.ui-dialog-titlebar-close .ui-icon-closethick:before {
    content: "\f00d";
}

.dialog .buttons {
    justify-content: flex-end;
}
.dialog .buttons button {
    text-align: center;
    margin-left: 10px;
}
.dialog .buttons button:first-child {
    margin-left: 0;
}

#save-as-dialog .ui-dialog-title {
    padding: 15px;
}

.dialog .rename,
.dialog .cancel {
    padding: 8px 20px;
    margin-top: 10px;
}
.dialog .ok {
    padding: 8px 40px;
    margin-top: 10px;
}
.dialog .delete {
    background: var(--red);
}
.drone-img-thumbs {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
}
.drone-img-thumbs img {
    border-radius: 11.5px 11.5px 0px 0px;
    cursor: pointer;
    width: 100%;
}
.drone-img-thumbs .thumb {
    margin: 5px;
    border-radius: 12px;
    border: 1px solid var(--light-gray);
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    width: 30%;
}
.drone-img-thumbs .thumb:hover {
    box-shadow: 0px 4px 20px var(--black-transp);
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.drone-img-thumbs .thumb.active {
    border: 1px solid var(--main-blue);
}
.drone-img-thumbs .name {
    padding: 0.5px 10px 5px 10px;
    contain: content;
}

#drone-img-zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-gray);
    z-index: 11000;
}

#drone-img-zoom .controls {
    height: auto;
    right: 10px;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 50px;
    z-index: 151;
    margin: 0;
    padding: 10px;
    box-shadow: none;
    background: var(--dark-gray);
    border: 0.5px solid var(--main-blue);
    border-radius: 8px;
}
#drone-img-zoom button {
    width: 30px;
    height: 30px;
    margin: 10px 0 0 0;
    display: block;
    border-radius: 50%;
    border: 1px solid #999;
    font-weight: bold;
    color: #eee;
    background: none;
    font-size: 1.3em;
}
#drone-img-zoom button:hover {
    background: #3f4347;
    cursor: pointer;
}
#drone-img-zoom button:active {
    background: #555;
}
#drone-img-zoom .icon-plus {
    line-height: 1.2;
}
#drone-img-zoom .icon-minus {
    line-height: 1.4;
}
#drone-img-zoom button:first-child {
    margin-top: 0;
}

#drone-img-zoom .zoom-open {
    height: 100%;
    text-align: center;
    width: 100%;
}
#drone-img-zoom .zoom-open img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}
#drone-img-zoom .zoom-open:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

button.sy.export-btn { 
    width: 150px; /* come back to */
    margin: 0px 2.5px;
}

.export-container {
    display: flex; 
    justify-content: space-between; 
    margin: 15px 3%;
}

.export-container-ortho,
.export-container-surface-model {
    display: flex; 
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
}

.exports-content {
    margin-top: 10px;
}

.export-line {
    width: 94%;
    margin-left: 3%;
}

.export-title {
    font-size: 14px;
    font-weight: 900;
    margin-top: 0px;
    margin-bottom: 0px;

}

.export-tag-line {
    font-size: 10.5px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#export-type {
    width: 96%;
    margin-left: 2%;
    border-width: 2px;
    background-position: 99%;
    font-size: 13px;
    padding: 6px 10px;
    margin-top: 6.5px;
    margin-right: 10px;
    border-width: 1px;
}

#export-type:hover {
    cursor: pointer;
}

.save-tip-box {
    background: var(--very-light-gray);
    padding: 2% 4%;
    color: var(--dark-gray);
    position: relative;
    width: 88%;
    left: 2%;
    border-radius: 8px;
    font-size: 10.5px;
}

.save-tip-box span {
    font-weight: 900;
    font-size: 14px;
    line-height: 23px;
}

.segment-list {
    overflow: scroll;
    height: 53vh;
}


@media only screen and (max-height: 850px) {
    .segment-list {
        height: 40vh;
    }
}

.segment-list .check-row {
    width: 88%;
    margin-left: 2%;
}

.segment-list .check-row:hover {
    background: #efefef;
    color: var(--dark-gray);
    border-radius: 6px;
    cursor: pointer;
}

.segment-list-key {
    text-align: right;
    width: 89%;
    margin: 20px 2.5%;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: var(--blue-gray);
}

.segment-list-key .fa-check-circle {
    color: #27E2A4;
}

.selected-segment {
    background: var(--very-light-gray);
    color: var(--active-font-color) !important;
    border-radius: 4px;
    cursor: pointer;
}









/* from viewshedstool.css */
.shade-report-banner-image .row {
    display: flex;
    align-items: center;
    margin: 23px 0;
}
.shade-report-banner-image button {
    padding: 5px 23px;
}
.shade-report-banner-image .img-container {
    position: relative;
}
.shade-report-banner-image .banner-img {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--very-light-gray);
}
.shade-report-banner-image .banner-img.placeholder {
    background: var(--very-light-gray);
    text-align: center;
    line-height: 100px;
    cursor: default;
}
.shade-report-banner-image .banner-img.placeholder img {
    width: 40px;
    opacity: .3;
    margin:0 auto;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}
.shade-report-banner-image .placeholder span {
    display: inline-block;
    vertical-align: bottom;
    line-height: normal;
    opacity: .5;
}
.shade-report-banner-image .banner-img.banner-annotations {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: none;
}
.shade-report-banner-image .annotate {
    background-color: var(--orange);
}
#dialog-annotation {
    overflow: hidden;
}
.dialog-annotation .actions {
    text-align: right;
    margin-top: 5px;
}

.shading-container .hidden {
    display: none;
}
.main-header button.sy {
    padding: 0 10px;
}
.header-switch {
    display: flex;
    align-items: center;
    padding: 0px 15px;
}
.header-switch .toggle {
    margin: 0px 1px 0px 7px;
}
#header-module-lib {
    width: 50px;
    height: 50px;
}
.nav a {
    color: inherit;
    text-decoration: none; 
    cursor: pointer;
    opacity: 0.60;
}

.nav a:target {
    opacity: 1 !important;
}

.nav {
    list-style: none;
    display: flex;
    color: var(--white); 
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
    list-style: none;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 26px;
    text-transform: uppercase;
}

.modal-content .descriptions .info {
    width: 160px;
    white-space: normal;
}

.modal-content .descriptions .controls .section-title img {
    margin-left: 5%;
}

.modal-content .descriptions .controls .section-title {
    text-transform: uppercase;
    font-weight: bold;
    /* margin: 4% 0 1% 0; */
    margin: 2% 0 1% 0;
    border-bottom: 1px solid rgba(255,255,255,.17);
}

.modal-content .descriptions .controls .container {
    width: 100%;
    height: 100%;
    padding-right: 15px;
    box-sizing: content-box; 
}
.modal-content .descriptions .controls {
    width: 54%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -10%;
    height: 76vh;
    overflow-y: auto;
    overflow: hidden;
    box-shadow: none;
}
.modal-content .descriptions .info {
    font-size: 14px;
}
.modal-content .descriptions {
    position: relative;
    /* top: 34%; */
    top: 20%;
}
.modal-content .descriptions .basics {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 24px;
    position: relative;
    top: 100px;
}
.modal-content .descriptions div[class^="option-"] i {
    margin-bottom: 5%;
}
.modal-content .descriptions div[class^="option-"] {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0% 10%;
    text-align: center;
}

.modal {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .85);
    transition: all ease 0.2s;
    color: var(--gray);
}

.modal-content {
    display: none;
    overflow-y: auto;
    position: relative;
    height: 100vh;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.grid-container .item {
    padding: 1%;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: ". ." ". ." ". .";
  }

.grid-container-two {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". ." ". .";
  }
  
.basics .title {
    font-weight: bold;
}
   
.exit:hover {
    cursor: pointer;
}

.exit {
    position: absolute;
    left: 95%;
    top: 3%;
    color: var(--white);
}

.designs {
    font-weight: bold;
    margin: 8px 0 0 5px;
}
.section-layers button {
    width: 23px;
    height: 23px;
    margin-left: 5px;
}
/*.section-layers button.start-over {
    padding: 0 6px;
}*/
.versions {
    padding: 7px 10px;
    border-radius: 4px;
    margin: 0 1px 0 0;
}
.versions select {
    width: 200px;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    padding: 5px 10px;
    margin-right: 5px;
    flex: 1 1;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.versions button.sy {
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    background: var(--white);
    color: var(--label-gray);
    text-align: center;
    box-shadow: none;
}
.versions .row {
    display: flex;
    justify-content: space-between;
}
.versions .row h2 {
    margin: -5px 0 15px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.versions .ellipsis-v {
    width: 33px;
    height: 33px;
}
.versions .version-select {
    width: 100px;
    margin-right: 5px;
    position: relative;
    z-index: 1;
    text-overflow: ellipsis;
    padding-right: 2.5rem;
}
.versions .ui-selectmenu-button, .versions .ui-selectmenu-button:hover, .versions .ui-selectmenu-button:focus {
    width: 87% !important;
    margin-right: 3px;
    padding-top: 6px !important;
    max-width: 950px !important;
}
.versions .version-dropbtn {
    width: 100%;
    display: flex;
    justify-content: space-between;

}
.versions .ellipsis-v i {
    vertical-align: middle;
    font-size: 13px;
    padding-top: 2px;
}
.versions .dropdown-menu {
    display: none;
}
/*.ui-widget .version-select {
    width: 200px;
    border-width: 2px;
    background-position: 99%;
    font-size: 12px;
    margin-right: 10px;
}*/
.version-select:hover {
    cursor: pointer;
}
.extra-info .copy {
    display: none;
}

.versions .extra-info {
    background: var(--white);
    width: 50px;
    height: 50px;
    border: 1px solid var(--dark-gray);
    border-radius: 8px;
    margin: 5px 0 0 0;
    line-height: 50px;
}
.versions .extra-info::before {
    color: var(--dark-gray);
    font-size: 30px;
    content: "i";
}

.navbar a {
    cursor: pointer;
}

.dropdown-content, .dropdown-content-versions {
    margin-top: -0.5px;
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: 160px;
    border: 1px solid var(--light-gray);
    z-index: 9000;
    border-radius: 8px;
    margin-left: -127px;
}
.dropdown-content-versions {
    margin-left: 0px;
    margin-top: 32px;
    width: 77%;
    z-index: 1100;
}
.dropdown-content a {
    float: none;
    color: var(--dark-gray);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    user-select: none;
}
.dropdown-content > div:first-child a {
    border-radius: 5px 5px 0 0;
}
.dropdown-content > div:last-child a {
    border-radius: 0 0 5px 5px;
}
.dropdown-content a.disabled, .dropdown-content-versions option.disabled {
    color: var(--blue-gray);
    pointer-events: none;
}
.dropdown-content .caption, .dropdown-content-versions .caption {
    display: inline-block;
    margin-left: 5px;
}
.dropdown-content-versions option {
    float: none;
    color: var(--dark-gray);
    padding: 14px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    user-select: none;
}
.dropdown-content-versions > div:first-child option {
    border-radius: 5px 5px 0 0;
}
.dropdown-content-versions > div:last-child option {
    border-radius: 0 0 5px 5px;
}
.dropdown-content-versions option:hover, .dropdown-content a:hover {
    background-color: var(--very-light-gray);
    cursor: pointer;
}

#dropdown {
    display: none;
}
#dropdown-versions {
    display: none;
}
.loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 100;
}
.loading-screen .container {
    margin-top: 23vmin;
    width: 30%;
}
.loading-screen .outer {
    width: 100%;
    height: 5px;
    border: 1.25px solid #343434;
    border-radius: 50px;
    padding: 1px;
}
.loading-screen .inner {
    display: flex;
    height: 100%;
    width: 100%;
    /*box-shadow: inset 0px 0px 0px 1px #999;*/
    border-radius: 50px;
    overflow: hidden;
    /*background: #555;*/
}
.loading-screen .inner .bar {
    display: flex;
    height: 100%;
    width: 0;
    background: #eee;
}
.loading-screen .description {
    font-size: 14px;
    color: #eee;
    text-align: center;
    margin-top: 10px;
}

.loading-screen .bar.determinate {
    animation: progress-animation1 5s ease-in-out;
}
.loading-screen .bar.indeterminate {
    width: 50%;
    animation: progress-animation2 2s cubic-bezier(0.0, 0.0, 1.0, 1.0) infinite;
}
@keyframes progress-animation1 {
    0%   {width:  0%;}
    20%  {width: 10%;}
    40%  {width: 30%;}
    50%  {width: 60%;}
    100% {width: 90%;}
}
@keyframes progress-animation2 {
    0%   { margin-left: -50%; }
    100% { margin-left: 100%; }
}
.tool-options.mask-tool-options .option {
    overflow: visible;
}
.switch-input {
    display: none;
}
.switch-label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-weight: 500;
    text-align: left;
    padding: 10px 5px 10px 37px;
}
.switch-label:before, .switch-label:after {
    content: "";
    position: absolute;
    margin: 0;
    outline: 0;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-label:before {
    left: 1px;
    width: 33px;
    height: 18px;
    background-color: var(--gray);
    border-radius: 20px;
}
/* knob */
.switch-label:after {
    left: 3px;
    width: 14px;
    height: 14px;
    background-color: #FAFAFA;
    border-radius: 50%;
    box-shadow: -1px -1px 2px -1px rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}
.switch-label .toggle--on {
    display: none;
}
.switch-label .toggle--off {
    display: inline-block;
}
.switch-input:checked + .switch-label:before {
    background-color: var(--main-blue);
}
.switch-input:checked + .switch-label:after {
    left: 1px;
    background-color: #FAFAFA;
    -ms-transform: translate(120%, -50%);
    -webkit-transform: translate(120%, -50%);
    transform: translate(120%, -50%);
}
.switch-input:checked + .switch-label:before {
    background-color: var(--main-blue);
}
.switch-input:checked + .switch-label .toggle--on {
    display: inline-block;
}
.switch-input:checked + .switch-label .toggle--off {
    display: none;
}
.switch-option-unchecked {
    display: inline-block;
    margin: 0 5px 0 0;
}



/* original toggle
.switch-label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-weight: 500;
    text-align: left;
    padding: 10px 0 10px 35px;
}
.switch-label:before, .switch-label:after {
    content: "";
    position: absolute;
    margin: 0;
    outline: 0;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-label:before {
    left: 1px;
    width: 25px;
    height: 8px;
    background-color: var(--gray);
    border-radius: 8px;
}
.switch-label:after {
    left: 0;
    width: 12px;
    height: 12px;
    background-color: #FAFAFA;
    border-radius: 50%;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}*/
.gui .ui-accordion .ui-accordion-content.model-import-container {
    padding-bottom: 0;
}

.upload-options {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1%;
    align-items: center;
}

.model-import-options .buttons {
    display: flex;
    justify-content: space-between;
    height: 30px;
    flex-direction: row;
}
.model-import-options .buttons button {
    width: 80px;
    text-align: center;
}
.model-import-options .buttons button.delete-all {
    width: 50px;
}
.model-list li .actions .delete {
    padding: 4px 17px 4px 10px;
}

.tool-options .option.model-list-container {
    margin: 0;
}
.tool-options .model-import-options {
    overflow: inherit;
}

#scanifly-model-options {
    width: 142px;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* select with custom icons */

.ui-selectmenu-menu {
    z-index: 3000;
}

.ui-selectmenu-open {
    z-index: 3000;
}
.ui-selectmenu-menu ul {
    width: 20vw;
    height: 12vh;
    overflow: auto;
}

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
    height: 12px;
    width: 12px;
    top: 0.1em;
}

.ui-menu-item {
    list-style: none;
    height: 5vh;
    cursor: pointer;
}

#low-poly {
    z-index: 3000;
}

.model-library-selection {
    display: flex;
    flex-direction: row;
    margin-left: 230px;
    background-color: var(--white);
}

#treeDropdown {
    width: 300px;
    overflow: scroll;
    display: contents;
}

/* Chrome, Safari, Edge, Opera */
/*input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}*/

/* Firefox */
/*input[type=number] {
  -moz-appearance:textfield;
}*/

#moduleDropdown .dd-select {
    width: 276px;
}
.dd-select a {
    /* With thumbnail */
    /* padding: 7px; */
    padding: 14px;
    /* maggie to add line arrow to this..
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('images/icons/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: 97%;
    content: "";*/
}

.dd-desc {
    color: var(--dark-gray) !important;
    line-height: normal !important;
    font-size: 10px !important;
}
.select-vegetation .dd-selected-description {
    position: relative;
    right: 12px;
}
.dd-option, .dd-selected {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.dd-option {
    padding: 0px !important;
}

.dd-option-image, .dd-selected-image {
    max-width: 32px;
}

.row-title {
    display: flex;
    align-items: center;
    width: 118px;
}
.row-title input {
    margin-right: 4px;
}
#allModelsChecked {
    margin: 0 5px 0 0;
}

.model-list-container {
    max-height: 18vh;
    overflow-x: hidden;
    margin-top: 1.5vh;
    overflow-y: hidden;
}
.model-list-container > .row-title {
    margin-left: 10px;
    width: 100%;
}

.model-list li {
    display: flex;
    margin: 0;
}
.model-list li button .fa {
    margin: 0;
}
.model-list li .actions input {
    width: 50px;
    padding: 1%;
    margin: 0% 1%;
    margin-right: 4px;
}
.model-list li .actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 100%;
}

.dd-selected-text {
    top: 30%;
    position: absolute;
}


@-o-keyframes fadeItTealToWhite {
    0%   { background-color: var(--white); }
    /* 50%  { background-color: #FFFF00; } */
    50%  { background-color: var(--teal); }
    100% { background-color: var(--white); }
  }
@keyframes fadeItTealToWhite {
0%   { background-color: var(--white); }
/* 50%  { background-color: #FFFF00; } */
50%  { background-color: var(--teal); }
100% { background-color: var(--white); }
}
@-o-keyframes fadeItTealToGray {
    0%   { background-color:  var(--very-light-gray); }
    /* 50%  { background-color: #FFFF00; } */
    50%  { background-color: var(--teal); }
    100% { background-color:  var(--very-light-gray); }
  }
@keyframes fadeItTealToGray {
0%   { background-color:  var(--very-light-gray); }
/* 50%  { background-color: #FFFF00; } */
50%  { background-color: var(--teal); }
100% { background-color:  var(--very-light-gray); }
}

.bkg-animated {
    background-image:none !important;
        -o-animation: fadeItTealToWhite .4s ease-in-out;
            animation: fadeItTealToWhite .4s ease-in-out;
}

.module-list-bkg-animated {
    background-image:none !important;
        -o-animation: fadeItTealToGray 1.1s ease-in-out;
            animation: fadeItTealToGray 1.1s ease-in-out;
}

.model-import-container .dd-select {
    top: 48px;
    left: 230px;
    width: 14vw;
    position: absolute;
    z-index: 1000;
}

/* .dd-options { */

.model-import-container .dd-options {
    height: 24vh;
    width: 14vw;
    overflow: auto;
    position: fixed;
    z-index: 1000;
    top: 391px;
    right: 391px;
}

.import-type-title {
    font-size: 10px;
}

.model-import-container .info {
    width: 102px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.model-import-container .info.error {
    overflow: visible;
}

.model-units {
    margin: 0 0 5px 2px;
}

.import-3d.option,
.select-vegetation.option {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.model-type-selection button,
.model-library-selection button {
    height: 30px;
    text-align: center;
}

/* #moduleDropdown, */
#carportDropdown,
#electricalDropdown,
#shapesDropdown,
#lowPolyDropdown,
#highPolyDropdown,
#laddersDropdown,
#evDropdown,
#electricalDropdown,
#telecomDropdown,
#inverterDropdown {
    position: absolute;
    z-index: 1000;
    left: -230px;
}

.dropdown-common {
    width:110px;
    height: 30px;
    background-color: var(--white);
}

button.sy.delete-all {
    margin-left: 4px;
    background-color: var(--red);
}

.seed-options {
    padding: 2%;
    max-height: 15vh;
    overflow: scroll;
}

ui-icon.tree-oak {
    background: url(8d8fd9b7d1a7b2cdbfb8.png) 0 0 no-repeat;
}


ui-icon.tree-conifer {
    background-image: url(8d8fd9b7d1a7b2cdbfb8.png) 0 0 no-repeat;
}

.test-bkg {
    background-image: url(8d8fd9b7d1a7b2cdbfb8.png);
    height: 100%;
    width: 100%
}

.model-library-selection button.start-seeding {
    padding: 7px 14px;
    margin-right: 5px;
}
.model-library-selection button.plant-trees {
    padding: 7px 14px;
}
.model-library-selection button.stop-seeding {
    background-color:var(--green) !important;
    font-weight: bold !important;
    margin-right: 5px;
}

.grayed {
    background-color: gray;
}

.modules-library button {
    margin: 2%;
}

.module-specs-wrapper .modules > li button.sy:disabled {
    color: var(--gray);
}

.module-specs-wrapper .modules > li > div.list-actions {
    /* right-align the terminal list-actions controls */
    margin-left: auto;
}

.module-specs-wrapper .modules > li .fa-star {
    color: var(--yellow);
}

#btn-open-library {
    padding: 15%;
    background: transparent;
    top: 3%;
}

.img-block.landscape img{
    transform: rotate(90deg);
}
.img-block.landscape img,
.img-block.portrait img {
    width: 30px;
    /* margin-top: 1px; */
}

.ui-dialog.module-library-dialog {
    height: 650px !important;
    z-index: 1300 !important;
    width: 900px !important;
    height: 700px !important;
}

.texture-map-container strong {
    padding: 2%;
}
.texture-map-container {
    position: absolute !important;
    top: 73.5% !important;
    z-index: 1 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 50%;
    transform: translateX(-25%);
}

#textureMapDropdown .dd-option {
    width: 100%;
}
#textureMapDropdown .dd-options {
    /* top: 0px !important; */
    /* height: 16vh !important; */
    position: absolute !important;
    top: -240px !important;
    left: 0px !important;
    z-index: 10000;
    height: 40vh !important;
}
#textureMapDropdown .dd-option-image,
#textureMapDropdown .dd-selected-image {
    /* max-width: 60px; */
    max-width: 56px;
    padding: 1.5% 2%;
}
#textureMapDropdown .dd-select {
    position: relative !important;
    top: 0px !important;
    left: 0px !important;
    z-index: 10000;
}
.module-selection-dropdown {
    display: none; /* Hide for now */
    border-radius: 0px;
    padding: 12px 4px;
    margin: 2%;
    width: 276px;
}

.module-selection-dropdown .option {
    text-align: left;
}
.module-library-dialog .ui-dialog-content {
    overflow: hidden !important;
}

.module-specs-wrapper .main-inputs .wrapper {
    display: table;
    width: 100%;
    margin: 4px 0;
}

.electrical-data {
    margin: 17px 0  17px 0;
}
.module-units {
    margin-top: 20px !important;
}

.main-inputs input {
    display: table-cell;
    width: 100%;
}
.main-inputs .container {
    display: table-cell;
    width: 1px;
    padding: 0 8px 0 0;
}

.module-specs-wrapper ul li:active,
.module-specs-wrapper ul li:hover {
    background: #FAFAFA;
}
.module-specs-wrapper ul
li {
    /* cursor: pointer; */
    padding: 1.5px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.module-specs-wrapper ul {
    list-style-type: none;
}
.module-specs-wrapper input {
    padding-left: 2px;
    padding: 1.25px 3px;
    margin-right: 10px !important;
}
.module-specs-wrapper{
    /* left: 50%;
    transform: translateX(-50%);
    top: 6vh; */
    gap: .2em;
    position: relative;
    height: auto;
    width: auto;
    display:grid;
    grid-template-columns: 3fr 3fr 2fr;
    grid-gap:1em;
    align-items: stretch;
    height:650px;
}

.module-specs-wrapper  p {
    line-height: normal;
    padding: 0;
    margin: 17px 0px;
    height: 10px;
}
.module-specs-wrapper > div {
    padding: 0em .25em;
}

#texture-maps {
    background: transparent;
    padding: 5px;
    font-size: 14px;
    border-color:grey;
    -webkit-appearance: none;
}

.module-specs-wrapper .col3 .module-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 140px;
}

.module-specs-wrapper .col2 table {
    margin-top: 5px;
    /* margin-top: 30px; */
}
.module-specs-wrapper .col2 .preview {
    width: 150px;
    /* width: 140px; */
}
.module-specs-wrapper .col2 input {
    width: 32px !important;
    margin-right: 4px;
}
.module-specs-wrapper .col1 input {
    margin-right: 10px;
}
.module-specs-wrapper .col2{
    display:flex;
    flex-direction:column;
    /* justify-content:space-between; */
    height: 90%;
}
.module-specs-wrapper .col3 .list-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.module-specs-wrapper .col3 ul {
    padding-inline-start: 0px !important;
}
.module-specs-wrapper .col3 {
    overflow: scroll;
    background-color: var(--very-light-gray);
    height: 98%;
}
.col3 button {
    margin: 1px;
}
.highlight-row {
    outline: 2px solid var(--teal);
    padding: 1%;
    margin: 2px 2px;
}
.library-actions {
    display: flex;
    position: relative;
}

.col1 {
    flex-direction: column;
    display: flex;
    margin-left: -5px;
}

.col1 .title {
    margin: 0 0 -6px 2px;
}

.module-specs-wrapper .col1 button {
    height: 40px;
    width: 120px;
    margin: 0 2px;
    text-align: center;
    font-weight: bold;
}
.module-specs-wrapper .save-button {
    padding: 9px 28px;
    background: var(--main-blue);
    border: 1px solid var(--main-blue);
}
.module-specs-wrapper .cancel-button {
    padding: 9px 18px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    color: var(--dark-gray);
    margin-right: 5px;
}
.module-specs-wrapper .notes-class textarea {
    resize: none;
    text-align:left;
    width:100%;
    height: 62px;
    border: 1px solid var(--light-gray);
    border-radius: 5px;
}

.moduleDropdown ul li .dd-option .dd-option-image {
    max-width: 36px;
    padding: 4px 0px 4px 2px;
}
#moduleDropdown .dd-select {
    border: 0.5px solid var(--light-gray);
    border-radius: 12px;
    box-sizing: border-box;
}
#moduleDropdown .dd-select a {
    height: 40px;
    font-weight: bold;
}
#moduleDropdown .dd-selected-image {
    height: 40px;
}
#moduleDropdown .dd-options {
    height: 330px !important;
    border-radius: 4px;
}

.moduleDropdown {
    padding: 10px 0;
}


.toggle-box h4 {
    margin: 0;
}
.toggle-box .heading {
    display: flex;
    align-items: center;
}
.toggle-box :last-child {
    margin-bottom: 0;
}
.toggle-box .toggle {
    margin: 0 1em -5px 1em;
}



.module-specs-tool-options .row-spacer {
    height: 3px;
}
.module-specs-tool-options .col1 {
    float: left;
    width: 190px;
}
.module-specs-tool-options .col1 input[type="text"] {
    width: 90px;
}
.module-specs-tool-options input[type="radio"] {
    margin-top: -1px;
    vertical-align: middle;
}
.module-specs-tool-options .col2 {
    float: left;
    margin: 20px 0 5px;
}
.module-specs-tool-options .preview {
    width: 80px;
}
.odule-odule-specs-tool-actions {
    line-height: 2;
    margin: 10px 0 10px 1px;
}
.module-specs-tool-arrays {
    display: none;
}
.module-specs-tool-arrays ul {
    margin: -44px 0px 0px 6px;
    padding: 5px 0;
}
.module-specs-tool-arrays ul li {
    list-style: none;
    margin: 3px 0;
}
.module-specs-tool-actions {
    display: flex;
    justify-content: space-between;
}
.input-module-specs-tool-roof-offset {
    width: 75px !important;
}
.input-module-roof-mount {
    margin-left: 0;
}
.module-specs-tool-options label.second {
    margin-left: 10px;
}
.vertical-inputs input {
    margin-left: 0;
}
.vertical-inputs label {
    display: block;
    margin-bottom: 0.5em;
}
.snap-content {
    display: flex;
}
.snap .content label {
    display: contents;
}
.ground-mount-options {
    display: none;
    width: 100%;
    margin: 0;
}
.module-specs-tool-options table caption {
    text-align: left;
}
.segment-name-edit:hover,
.segment-remove:hover {
    /* color: #ebedee; */
    color: var(--dark-gray) !important;
}
.segment-name-edit,
.segment-remove {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    padding: 1%;
    color: var(--dark-gray) !important;
    text-align: left;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    padding: 0 1.5px 0 1.5px;
    font-size: 12px !important;
}
.segment-totals {
    position: relative;
    margin: 2px 0 -24px 0px;
}

.segment-dropdown {
    float: right;
    position: relative;
    z-index: 1000;
    width: 175px;
}
.segment-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--dark-gray);
    min-width: 83%;
    z-index: 1;
    margin-top: 36px;
    margin-left: 10%;
    z-index: 999;
    border-radius: 6px;
}
.segment-dropdown-content a {
    color: var(--white);
    padding: 6px 12px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}
.segment-dropdown-content a:hover {
    background-color: #404142;
    transition: all .25s ease-in-out;
    border-radius: 0px;
}
.segment-dropdown-content a:first-child:hover {
    border-radius: 6px 6px 0px 0px;
}
.segment-dropdown-content a:last-child {
    padding-bottom: 8px;
}
.segment-dropdown-content a:last-child:hover {
    border-radius: 0px 0px 6px 6px;
}
.segment-dropdown-content .disabled {
    cursor: not-allowed;
}
/* end of Dropdown Button */

/* end of Auto Segments */

.layers-accordion {
    margin-bottom: 5px;
    display: none;
}
.layers-accordion input {
    padding: 0;
    margin: 0;
}
.layers-accordion .c-wrap,
.layers-accordion .l-wrap {
    float: left;
}
.layers-accordion .c-wrap {
    width: 20px;
    margin-left: 3px;
}
.input-snap-modules {
    margin: 0 0 0 4px !important;
}
.array-tab .dd-option-img {
    max-width: 40px;
}
.array-tab .dd-selected img {
    max-width: 20px;
    padding: 0px;
}
.array-tab .dd-options {
    width: 32vw !important;
    height: 52vh !important;
    top: 10vh;
    position: fixed;
    display: none;
}
.array-tab .snap input {
    margin: 0px;
    width: auto;
}
.array-tab .snap {
    font-weight: normal;
    font-size: 10px;
    /* width: 100%; */
    padding: 4px 50px 24px 0px;
}

.manual-array .snap .row {
    margin-bottom: 6px;
}
.manual-array .snap input[type=checkbox] {
    position: relative;
    bottom: 1px;
    margin-right: 8px;
}

.array-tab .fill,
.manual-array .fill {
    display: none;
    margin-top: 10px;
}
.array-tab .modify,
.manual-array .modify,
.manual-array {
    margin-top: 10px;
}
.array-tab .modify button,
.manual-array .modify button {
    margin: 0 3px 3px 0;
}
[id^=segment-area-] {
    margin: 4px 8px;
}
.tool-options input:disabled {
    background: var(--light-gray);
}

.disabled-tip span {
    display: none;
}

.disabled-tip,
.disabled-remove,
.disabled-move,
.disabled-copy {
    opacity: 1;
    display: inline;
}

.button-row {
    margin-bottom: 4px;
}

.array-tab .spacing-container,
.array-tab .array-container,
.array-tab .spacing-container .module-spacing,
.array-tab .module-options .move-options .orientation {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-weight: strong;
}
.array-tab .spacing-container {
    margin-top: 4px;
    justify-content: left;
}
.array-tab .spacing-container .sub-container {
    margin-left: 20px;
}
.array-tab .spacing-container .array-height-container {
    margin-left: 15px;
}


.autofill {
    display: flex;
    align-items: center;
}
.autofill > * {
    flex: 1;
    text-align: center;
}
.autofill .tippy-box {
    text-align: left;
}
.autofill h4 {
    margin: 0;
    text-align: left;
}
.autofill select {
    padding: 5px;
    border-radius: 6px;
    border: 0.5px solid var(--light-gray);
    flex: 1.618;
    color: var(--dark-gray);
}

.racking-type {
    display: flex;
}
.racking-type img {
    height: 28px;
}
.racking-type .racking {
    flex: 1;
    text-align: center;
    margin-top: 10px;
}
.racking-type .caption {
    margin-top: 5px;
}

.module-spacing {
    display: flex;
    text-align: center;
}
.module-spacing h4 {
    line-height: 2;
    text-align: left;
}
.module-spacing > * {
    flex: 1;
}

.array-height {
    display: flex;
    justify-content: center;
    text-align: center;
}
.block.array-height {
    margin-bottom: 0;
}
.array-height img {
    width: 43px;
}
.array-height > * {
    flex: 1;
}
.array-height > .input-icon {
    flex: 1.5;
}
.array-height img {
    display: inline-block;
    vertical-align: middle;
    height: 20px;
}
.array-height h4 {
    line-height: 2;
    text-align: left;
}

.ground-mount .row {
    display: flex;
    margin: 5px 0;
    align-items: center;
}
.ground-mount .row > * {
    flex: 1;
}
.ground-mount .row > .text {
    flex: 1.6;
}
.ground-mount input {
    width: 30px;
}

.builder-mode .toggle-container > * {
    flex: 1;
    text-align: center;
}
.builder-mode h4 {
    margin: 0 5px 0 0;
    display: inline-block;
}
.builder-mode .toggle-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.builder-mode .toggle {
    margin-bottom: -4px;
    flex: 0;
}
.builder-mode .qmark-info {
    margin: 0;
}

.module-orientation {
    display: flex;
    align-items: center;
}
.module-orientation h4 {
    margin: 0 15px 0 0;
}
.module-orientation .toggle {
    margin: 0 0 -5px 5px;
}

.array-tools h4 {
    margin: 10px 0;
}
.array-tools .button-row {
    display: flex;
}
.array-tools button.sy {
    flex: 1;
    background: none;
    border: 0.5px solid var(--dark-gray);
    color: var(--dark-gray);
    font-weight: normal;
    margin-right: 5px;
    text-align: center;
}
.array-tools button.sy:last-child {
    margin: 0;
}
.array-tools button.sy:disabled {
    background-color: var(--white);
    color: var(--blue-gray);
    border: 0.5px solid var(--blue-gray);
    box-shadow: none;
}

.snap-modules {
    display: flex;
    align-items: center;
}
.snap-modules h4 {
    margin-right: 5px;
}

.array-tab .details-container {
    display: flex;
    flex-direction: row;
    margin: 0px 0px 10px 6px;
    align-items: center;
    justify-content: space-between
}

.array-tab .array-container .sub-container {
    margin: 2px 0px;
}

.array-tab .array-container {
    padding:0px 4px;
}
.array-tab .sub-container span {
    color: var(--dark-gray);
}
.array-tab .sub-container {
    margin: 2px 4px 9px 4px;
}
.array-tab input {
    width: 24px;
    margin: 0px 4px;
}
input[type="radio"] {
    width: auto;
    margin-right: 10px;
}
.module-spacing {
    margin-top: 12px;
}
.array-tab .spacing-container .module-spacing span,
.array-tab .spacing-container .module-options span,
.array-tab .spacing-container .array-spacing span,
.array-spacing span,
.array-layout span,
.img-block span {
    font-weight: normal;
}

.array-spacing ,
.array-layout {
    padding: 4px 0px;
}
input[type=radio],
input[type=checkbox] {
    cursor: pointer;
}
.array-details-container,
.viewsheds-container,
.array-builder-mode {
    background: var(--very-light-gray) !important;
    margin: 4px 0px;
}
.array-tab .module-options {
    /* height: 90px; */
    height: 48px;
    padding: 2px 0 6px 0;
}
.array-tab .module-options .move-options span {
    font-weight: normal;
}
.orientation {
    display: flex;
    flex-direction: row;
    position: relative;
    left: 3px;
    align-items: center;
}
.orientation-sub-container {
    display: flex;
    align-items: center;
    width: 82px;
}
.array-tab .module-options .move-options,
.array-module-mode {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.array-module-mode {
    margin-top: 9px;
}

.learn-more-dialog .row-container .bullets {
    /* font-size: 12px; */
    color: var(--black);
}

.learn-more-exit {
    position: absolute;
    left: 2%;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.learn-more-dialog .row-container .title {
    font-weight: bold;
    font-size: 26px;
    color: var(--main-blue);
    margin: 24px 0 0 0;
}
[id^="learnMore-"] {
    background: var(--main-blue);
    display: flex;
}
#learnMore,
#learnMore-2,
#learnMore-3,
.learn-more-dialog {
    background: var( --blue-gray);
}
.builder-mode-img {
    width: 45%;
    /* width: 95%; */
    margin: 44px 0 0 0;
}
button.mode-switch-btn {
    align-items: center;
    color: var(--white) !important;
    font-size: 12px !important;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif !important;
    border: none !important;
    margin: 4px 13px 0 6px !important;
}
button.mode-switch-blue {
    background: var(--main-blue) !important;
}
button.mode-switch-green {
    background: var(--green) !important;
}
.ui-dialog-buttonset {
    text-align: center !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}
.learn-more-btn {
    border: none !important;
    width: 180px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white) !important;
    font-size: 20px !important;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif !important;
    background: var(--main-blue) !important;
}

.learn-more-dialog .ui-dialog .ui-dialog-buttonpane {
    display: flex;
    justify-content: center;
}

/* $("#learnMore").siblings(".ui-dialog-buttonpane") */

/* .ui-dialog .ui-dialog-buttonpane { */

/* #learnMore + .ui-dialog .ui-dialog-buttonpane,
#learnMore-2 + .ui-dialog .ui-dialog-buttonpane,
#learnMore-3 + .ui-dialog .ui-dialog-buttonpane { */
.button-pane-custom {
    text-align: left !important;
    border-width: 0 !important;
    background-image: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

#dialog-confirm-mode-1,
#dialog-confirm-mode-2 {
    text-align: center;
    margin: 8px 0 0 0;
    font-weight: bold;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif !important;
}

.button-set-custom {
    position: absolute !important;
    bottom: 0% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row-reverse !important;
}


.row-container .page {
    position: absolute;
    top: 2%;
    left: 92%;
    font-size: 16px;
    font-weight: bold;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.row-container .gif {
    margin: 40px 0 0 0;
    width: 95%;
}

.learn-more {
    margin-left: 4px;
    color: var(--dark-gray);
    font-size: 12px;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}
.no-close .ui-dialog-titlebar-close,
.no-close .ui-dialog-titlebar {
    display: none;
}
.row-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.bullets {
    width:78%;
    text-align: center;
    font-size: 16px;
    /* margin: 12px 0 0 0; */
    display: flex;
    align-items: center;
    color: var(--dark-gray) !important;
}

.array-details-title {
    padding: 5px 6px 4px;
}
.module-orientation {
    padding-top: 1px;
    margin-bottom: 3px;
}
.array-tab,
.array-details-title .text {
    font-weight: bold;
    font-size: 12px;
    color: var(--dark-gray);
}
.shade-title {
    width: 350px;
}

.array-builder {
    margin: 0 0 5px 0;
    background: var(--very-light-gray);
    padding: 0 0 6px 0;
}

.auto-fill-label {
    font-weight: normal;
    margin-left: 6px;
}
.details-visibility,
.module-specs-tool-mount-type {
    display: flex;
    align-items: center;
    padding: 2px 0px;
}

.img-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* font-weight: normal; */
}
.module-mode {
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    border: 2px solid var(--yellow);
    margin: 0px 4px 4px 2px;
}

.roof-plane-dim-label {
    box-shadow: 0 1px 4px var(--black-transp);
}
.tilt-az-container tbody {
    display: inherit;
}
.tilt-az-container {
    display: flex;
    flex-direction: row;
}

.segment-tilt-az {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 12px 0 4px;
    text-transform: uppercase;
    font-weight: bold;
}
input.segment-header {
    background-color: inherit;
    color: inherit;
    text-transform: uppercase;
    padding: 0;
}
.mode-option input {
    margin-top: -2px;
}
.mode-option input[type="radio"] {
    margin-right: 8px;
    margin-left: 9px;
}
.mode-option span {
    font-size: 10px;
    font-weight: normal;
    color: var(--dark-gray);
}
.mode-option {
    left: 4px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
}
.mode-container,
.mode-helper {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.flash {
  animation: flash 2s ease-out;
  animation-iteration-count: infinite;
}
@keyframes flash {
    0% {
        background-color: transparent;
        box-shadow: none;
    }
    50% {
        background-color: #ff006699;
        box-shadow: 0px 0px 27px 2px #FF006699;
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}


.occluder-section > input {
    width: 30px;
    font-size: 11.5px;
    margin-left: 17px;
    color: var(--dark-gray);
    margin-top: 13px;
    padding: 5px 10px;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.occluder-section .label {
    float: left;
    margin-right: 5px;
}
.occluder-section .model-btn {
    margin-right: 6px;
    margin-bottom: 7px;
    background-color: var(--gray);
}
.occluder-section .model-btn.active {
    background-color: var(--main-blue);
}
.occluder-heading h3 {
    float: left;
}
.occluder-heading .info {
    float: left;
    padding-top: 10px;
    margin-left: -8px;
}
.occluder-heading {
    padding-bottom: 35px;
    width: 100%;
}
.occluder-section {
    width: 100%;
    padding-top: 15px;
}
.occluder-section #occluder-opacity-slider {
    width: 120px;
    margin: 10px 0 0 7px;
    margin-top: 28px;
    float: left;
    border: var(--main-blue);
}
.occluder-section button.sy#occluders-add {
    padding: 8px;
    margin-top: 5px;
    width: 100%;
}
.occluder-section .sq-btn-container {
    float: left;
    width: 55px;
    text-align: center;
    font-size: 11px;
    opacity: .5;
}
.occluder-section .sq-btn-container.active {
    color: var(--main-blue);
    opacity: 1;
}
.occluder-section .sq-icon-btn {
    width: 40px;
    height: 40px;
    margin: 7px 0px;
    border-radius: 5px;
    text-align: center;
    background-color: var(--white);
    border: 1px solid var(--gray);
    color: var(--dark-gray);
}
.occluder-section .sq-icon-btn:hover {
    cursor: pointer;
}
.occluder-section .sq-icon-btn i {
    font-size: 20px;
    margin-top: 1.5px;
    color: var(--dark-gray)
}
.occluder-section .sq-icon-btn img {
    width: 20.5px;
    margin-top: 3.75px;
    margin-left:-1.25px
}
.occluder-section .active > .sq-icon-btn {
    border: 1px solid var(--main-blue);
    background-color: var(--main-blue);
    color: var(--white);
    opacity: 1;
}
.occluder-section .active > .sq-icon-btn i {
    color: var(--white);
}
.occluder-section .active > .sq-icon-btn img {
    filter: brightness(100);
}
#dialog-project-info .content {
    display: none;
}
#dialog-project-info {
    overflow-y: auto;
}
#dialog-project-info h2 {
    color: var(--active-font-color);
    margin: 10px 0;
    float: left;
}
.dialog-project-info .input-container {
    width: 404px;
    margin: 0 auto;
}
.dialog-project-info .input-container.bottom {
    margin-bottom: 45px;
}
#pp-info-tabs-info input {
    width: 186px;
    padding: 5px;
    height: 19px;
    box-sizing: border-box;
    height: 29px;
}
#pp-info-tabs-info .monthly-usage input {
    width: 65px;
}
#pp-info-tabs-info .monthly-usage .info {
    float: left;
    margin-top: 12px;
}
#pp-info-tabs-info .monthly-usage .info a {
    color: white;
}
#pp-info-tabs .tags {
    margin-top: 20px;
    margin-bottom: 5px;
}
.tag#annual-consumption {
    background-color: var(--main-blue);
}
.tag#annual-production {
    background-color: var(--teal);
}
.tag#asa-percentage {
    background-color: var(--light-blue);
}
.tag#pv-system-offset {
    background-color: var(--light-purple);
}
.dialog-project-info select {
    width: 198px;
    height: 100%;
}
.dialog-project-info .select-container {
    height: 31px;
    float: left;
    margin-right: 4px;
    margin-top: -4px;
}
button.project-info {
    margin-top: -2px;
}
.pvwatts-logo {
    margin-top: 15px;
}
.pvwatts-logo img {
    width: 150px;
}
#input-site-info-state {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
    color: var(--dark-gray);
}
#input-site-info-state:disabled {
    background-color: var(--very-light-gray);
    cursor: not-allowed;
}
.loading {
    text-align: center;
    padding: 100px;
}
.no-content {
    text-align: center;
    padding: 100px;
    display: none;
    font: 12px "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.current-monthly-usage input {
    text-align: right;
}
.project-info-accordion {
    margin-bottom: 5px;
    display: none;
}
.project-info-accordion table {
    width: 100%;
}
.project-info-accordion .tool-options > table {
    margin: 5px 0;
}
.pp-info-actions td {
    padding-top: 5px;
    width: 300px !important;
}
.project-btns-wrapper button {
    margin-right: 2px;
}
.project-btns-wrapper {
    display: flex;
    align-items: center;
}
.pp-info-col {
    width: 50%;
    vertical-align: top;
}
#show-pp-info-dialog {
    height: 28px;
}
.take-screenshot,
.set-profile-image {
    width: 34px;
    height: 28px;
}
.take-screenshot .fa,
.set-profile-image .fa {
    font-size: 16px;
}
.pp-info-img-col {
    text-align: left;
    vertical-align: top;
}
.pp-info-img-col .pp-info-img {
    background: #d0d3d5;
    border-radius: 0;
}
.pp-info-img-col button {
    margin: 10px 0;
}
.pp-info-img {
    height: 100px;
    border-radius: 3px;
    position: relative;
}
.pp-info-img.empty {
    background: #d0d3d5;
}
.pp-info-img .crop {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}
.pp-info-img .crop a {
    color: var(--white);
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
}
.pp-info-img:hover .crop {
    display: block;
}
.pp-info-img.empty:hover .crop {
    display: none;
}
#pp-info-tabs {
    border: none;
    padding: none;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#pp-info-tabs-info table {
    width: 100%;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#pp-info-tabs-info table input, select {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#pp-info-tabs-info td {
    vertical-align: top;
    color: var(--label-gray);
    padding: 2.5px 0px;
}
#pp-info-tabs-info .monthly-usage {
    width: 45%;
    padding-right: 5%;
    padding-left: 1%;
}
#pp-info-tabs-info .customer-details {
    width: 95%;
    margin-bottom: 2%;
    padding-top: 6px;
}
#pp-info-tabs-info .customer-details td {
    padding-bottom: 5px;
}
#pp-info-tabs-info .customer-details input {
    width: 100%;
}
#pp-info-tabs-info .customer-details .site-info-heading {
    margin: 8px 0;
}
.dialog-project-info #pp-info-tabs-info select {
    width: 100%;
}
.dialog-project-info #pp-info-tabs-info .select-container {
    width: 100%;
    float: none;
    margin-top: 0;
    height: 29px;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: var(--white) !important;
    background: var(--main-blue);
    border: 1px solid var(--main-blue);
    border-radius: inherit;
}


.tilt-az-container .extra-info-specs,
.tilt-az-container tr .extra-info-specs,
.extra-info-az-tilt {
    position: absolute !important;
    margin-left: 190px !important;
    margin-top: -2px !important;
}

#input-site-info-state-menu {
    height: 400px;
}
.empty-tab {
    text-align: center; 
    margin-top: 10%;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.empty-tab p {
    font-size: 14px;
}
.empty-tab .viewshed-illustration {
    width: 65%;
    margin-left: -2.5%;
    margin-top: 10%;
}
.extra-info-specs p {
    position: fixed !important;
    left: 10vw;
    top: 40vh;
}
#pp-info-tabs ul {
    background: var(--white);
    border: 0px;
    margin-left: 12px;
}
#pp-info-tabs {
    margin: 7px 0 20px 0;
    width: 100%;
    border-radius: 12px;
    border: none;
    color: var(--dark-gray);
    background: var(--white);
    line-height: 1.3;
}
#pp-info-tabs-info .electric-bill h3 {
    margin: 15px 0;
    float: left;
}
#pp-info-tabs-info .electric-bill table {
    width: 180px;
}
#pp-info-tabs-info .electric-bill .monthly,
#pp-info-tabs-info .electric-bill .yearly {
    text-align: right;
}

#pp-info-tabs-chart .content > table td {
    vertical-align: top;
}

#pp-info-tabs-chart .content > table td i {
    color: var(--gray);
    margin-right: 7px;
    font-size: 14px;
}

#pp-info-tabs-chart .charts h2 {
    margin: 20px 0 0 0;
}
#pp-info-tabs-chart .msa-chart-col {
    width: 15%;
    padding-right: 10%;
}
#pp-info-tabs-chart .mp-chart-col {
    width: 15%;
    padding-right: 10%;
}

#msa-chart svg, #mp-chart svg {
    width: 82%;
    margin-left: 9%;
}
#pp-info-tabs-chart table {
    width: 100%;
    border-collapse: collapse;
}
#pp-info-tabs-chart thead td {
    font-size: 14px;
    font-weight: 900;
    color: var(--dark-gray) !important;
}
#pp-info-tabs-chart thead {
    font-weight: 900;
    font-size: 14px;
    line-height: 20px;
    background-image: linear-gradient(to right, var(--dark-gray) 15%, rgba(0, 0, 0, 0) 0%);
    background-position: bottom;
    background-size: 7px 1px;
    background-repeat: repeat-x;
}
#pp-info-tabs-chart .module-info {
    margin-top: 20px;
}
#pp-info-tabs-chart .module-info td {
    padding: 10px 5px;
    text-align: left;
    color: var(--label-gray);
}
#pp-info-tabs-chart .generate-report-wrapper {
    margin: 15px 0 0 30px;
}
.pp-info-tabs-segment .inner {
    padding-left: 30px;
    margin-left: 30px;
}
.pp-info-tabs-segment table {
    width: 100%;
}
.pp-info-tabs-segment td {
    vertical-align: top;
    color: var(--label-gray);
    padding: 2.5px 0px;
}
.pp-info-tabs-segment .system-parameters {
    width: 40%;
    padding-left: 1%;
    float: left;
}
.pp-info-tabs-segment .system-parameters h2 {
    margin-left: 0px;
}
.pp-info-tabs-segment .system-parameters input[type=text] {
    width: 40px;
    text-align: right;
}
.pp-info-tabs-segment .system-parameters select {
    width: 160px;
}
.pp-info-tabs-segment .solar-access h2 {
    margin-left: 60px;
    text-align: center;
}

.pp-info-tabs-segment .stats {
    line-height: 1.5;
}
.pp-info-tabs-segment .stats table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 25px;
}
.pp-info-tabs-segment .stats thead td {
    font-size: 14px;
    font-weight: 900;
    line-height: 18px;
    background-image: linear-gradient(to right, var(--dark-gray) 15%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 7px 1px;
    background-repeat: repeat-x;
    color: var(--dark-gray);
}
.pp-info-tabs-segment .stats td {
    padding: 5px;
    text-align: left;
    color: var(--label-gray);
}
.sa-chart {
    width: 80%;
}
.pp-info-tabs-segment .sa-chart svg {
    width: 100%;
    height: 100%;
}
.pp-info-tabs-segment .chart {
    width: 80%;
}

.pp-info-tabs-segment .solar-access {
    width: 59%;
    float: left;
}
#pp-info-tabs hr {
    margin: 5% 0%;
}
#pp-info-tabs .actions button {
    margin-right: 5%;
    padding: 7px 8%;
}
#pp-info-tabs .actions {
    margin-top: 7%;
}
.pp-info-viewsheds table {
    border-collapse: collapse;
    margin: 20px 0 0 0;
}
.pp-info-viewsheds thead td {
    font-weight: 900;
    color: var(--dark-gray);
    line-height: 20px;
    background-image: linear-gradient(to right, var(--dark-gray) 15%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 7px 1px;
    background-repeat: repeat-x;
}
.pp-info-viewsheds td {
    padding: 8px 5px;
    text-align: left;
}
.weather-station-text {
    padding-top: 1%;
    padding-bottom:  3%;
    color:  var(--label-gray);
}
#electric-after-chart {
    padding-left:  5%;
    padding-right: 12%;
    padding-bottom:  5%;
    margin-top: -5%;
}
#electric-before-chart {
    margin-left: 2%;
    padding-right:  5%;
}

.please-wait {
    margin: 15px 0 0 30px;
    display: none;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#pp-info-tabs-info td.rate-label {
    padding-top: 28.5px;
}
.stats .viewsheds-stats {
    position:  absolute;
    left: 78%;
    width: 20%;
    padding-top: 12%;
    line-height: 20px;
}

/* 1278px */
@media screen and (max-width: 1450px) {
    .header-toolbar .settings {
        width: 25%;
        float: left;
        color: var(--white);
    }
    .resp-line-height {
        line-height: 15px;
    }
    .header-toolbar .settings .group .switch-controls {
        display: flex;
        align-items: baseline;
        justify-content: center;
        position: relative;
        top: 1px;
    }

    .settings .group:nth-child(2) .switch-controls {
        top: -24px;
        left: -6px;
    }
    .header-toolbar {
        padding: 0 0 0 35px;
    }
}

@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 750px) {
    .header-switch div {
        display: none;
    }
}

/* Responsive Container CSS - will move to new file as we're getting way over 1000 lines here :) */

[data-section-anchor] {
    position: fixed;
    top: 0;
}
[data-demo-root] {
    margin-bottom: 1.5em;
}
[data-observe-resizes] { /* ! this is causing overlap issue with the ellipsis icon button on model sidebar */
    contain: content;
    overflow: hidden;
    position: relative;
}
/*.SM.sidebar button.sy.generate-auto-keepouts {
    padding: 7px 6%;
}*/

/*.SM.sidebar #plane-offset-slider {
    width: 57%;
    margin: 17px 10px 0px 0px;
}
.MD.sidebar #plane-offset-slider {
    width: 150px;
    margin: 17px 10px 0px 10px;
}
.MD.sidebar button.sy.generate-auto-keepouts {
    padding: 7px 8%;
}*/
.SM.sidebar #plane-offset-slider {
    /*width: 145px;*/
    width: 60%;
}
.SM.sidebar button.sy.generate-auto-keepouts {
    padding: 7px 9%;
}
.SM.sidebar button.sy.accept-auto-keepouts {
    padding: 7px 5%;
}
.SM.sidebar button.sy.clear-auto-keepouts {
    padding: 7px 5%;
}
.SM.sidebar .module-specs-tool-actions {
    flex-direction: column;
    gap: 0.8rem;
}

.SM.sidebar button.sy.generate-auto-viewsheds {
    padding: 7px 9%;
}
.SM.sidebar .auto-viewsheds-container {
    flex-direction: column;
    margin: 20px 0;
    gap: 0;
}
.SM.sidebar .auto-viewsheds-density-controls,
.SM.sidebar .auto-viewsheds-strategy-selector.sw-multiway {
    margin-top: 12px;
}
.SM.sidebar .auto-viewsheds-density.visibility-hidden {
    display: none;
}
.SM.sidebar .viewsheds-auto .qmark-info {
    margin: 0 10px;
}
.SM.sidebar .viewshed-list-view .btn-horizon{
    margin-left: 77%;
}
.SM.sidebar .viewshed-list-view .btn-viewshed {
    margin-left: 65%;
}
.SM.sidebar .viewshed-list-view .shading-values-viewshed {
    width: 53%;
}
.SM.sidebar .viewshed-list-view {
    width: 83%;
}

.SM.sidebar .drone-img-thumbs .thumb {
    width: 45%;
}
/*.SM.sidebar .viewshed {
    width: 90px;
}*/
.MD.sidebar .viewshed-list-view .shading-values-viewshed {
    width: 70%;
}
.MD.sidebar button.sy.generate-auto-keepouts {
    padding: 7px 33px;
}
.MD.sidebar button.sy.accept-auto-keepouts {
    padding: 7px 16px;
}
.MD.sidebar button.sy.clear-auto-keepouts {
    padding: 7px 16px;
}
.MD.sidebar .module-specs-tool-actions {
    flex-direction: row;
    gap: 0;
}

.MD.sidebar button.sy.generate-auto-viewsheds {
    padding: 7px 33px;
}
.MD.sidebar .auto-viewsheds-container {
    flex-direction: row;
    margin: 20px 0 0 0;
    gap: 10px;
}
.MD.sidebar .auto-viewsheds-density-controls,
.MD.sidebar .auto-viewsheds-strategy-selector.sw-multiway {
    margin-top: 18px;
}
.MD.sidebar .auto-viewsheds-density.visibility-hidden {
    display: block;
}
.MD.sidebar .viewsheds-auto .qmark-info {
    margin: 0 5px;
}
.MD.sidebar #plane-offset-slider {
    width: 200px;
}
.MD.sidebar .viewshed-list-view .btn-horizon {
    margin-left: 82%;
}
.MD.sidebar .viewshed-list-view .btn-viewshed {
    margin-left: 72%;
}
.MD.sidebar .viewshed-list-view {
    width: 84%;
}
.MD.sidebar .drone-img-thumbs .thumb {
    width: 30%;
}
/*.MD.sidebar .viewshed {
    width: 100px;
}*/
/*.MD.sidebar .viewshed-thumbnail .base {
    width: 110px;
    position: absolute;
    top: 13px;
    left: 20px;
    transition: .15s ease-in;
}
.MD.sidebar .viewshed-thumbnail .svg {
    margin: 0;
    width: 140px;
    position: absolute;
    top: 0;
    left: 5px;
    transition: .15s ease-in;
}*/

.LG.sidebar .viewshed-list-view .shading-values-viewshed {
    width: 82%;
}
.LG.sidebar .viewshed-list-view {
    width: 87%;
}
.LG.sidebar button.sy.generate-auto-keepouts {
    padding: 7px 39px;
}
.LG.sidebar button.sy.accept-auto-keepouts {
    padding: 7px 25px;
}
.LG.sidebar button.sy.clear-auto-keepouts {
    padding: 7px 25px;
}
.LG.sidebar button.sy.generate-auto-viewsheds {
    padding: 7px 39px;
}
.LG.sidebar .auto-viewsheds-container {
    gap: 20px;
}
.LG.sidebar .viewsheds-auto .qmark-info {
    margin: 0 10px;
}
.LG.sidebar .viewshed-list-view .btn-horizon {
    margin-left: 85%;
}
.LG.sidebar .viewshed-list-view .btn-viewshed {
    margin-left: 76%;
}
.LG.sidebar #plane-offset-slider {
    width: 250px;
}
.LG.sidebar .drone-img-thumbs .thumb {
    width: 30%;
}
/*.LG.sidebar .fire-setback .keepout-edit-remove {
    margin-right: 60%;
}*/
/*.LG.sidebar #plane-offset-slider {
    width: 245px;
}
.LG.sidebar button.sy.generate-auto-keepouts {
    padding: 7px 9%;
}
.LG.sidebar button.sy.accept-auto-keepouts {
    padding: 7px 1%;
    margin: 0px 4px 50px 0px;
    float: right;
}
.LG.sidebar button.sy.clear-auto-keepouts {
    padding: 7px 1%;
    margin: 0px 4px 50px 0px;
    float: right;
}
.XL.sidebar button.sy.generate-auto-keepouts {
    padding: 7px 8%;
}*/
/*.LG.sidebar #pp-info-tabs-info .monthly-usage {
    width: 100%;
}
.XL.sidebar #pp-info-tabs-info .monthly-usage {
    width: 40%;
}*/
.XL.sidebar .viewshed-list-view {
    width: 92%;
}
.XL.sidebar .drone-img-thumbs .thumb {
    width: 150px;
}
.XL.sidebar .drone-img-thumbs {
    justify-content: left;
    padding-left: 15px;
}

/* model ui responsivity */
.SM#split-main .header-switch {
    display: none;
}
.MD#split-main .header-switch {
    display: none;
}
.LG#split-main .header-switch {
    display: none;
}

.XL.sidebar .viewshed-list-view .btn-horizon {
    margin-left: 88%;
}
.XL.sidebar .viewshed-list-view .btn-viewshed {
    margin-left: 82%;
}
.XL#split-main .header-switch {
    display: flex;
}
/* please keep these commented out - helpful to use for guidance of where breakpoints are */
/*    [data-observe-resizes]::before {
    background-color: #ccc;
    color: hsla(0, 100%, 100%, 0);
    content: "\00a0";
    font-size: 0.8em;
    -webkit-font-smoothing: initial;
    font-weight: 700;
    letter-spacing: .1em;
    position: absolute;
    right: -3.1em;
    text-align: center;
    top: -1.2em;
    transform: rotate(45deg);
    transform-origin: 0 0;
    width: 6em;
    z-index: 10;
    }
    [data-observe-resizes][data-observing="true"]::before {
    transition: background-color 0.2s var(--material-easing) 0.05s,
    color 0.2s var(--material-easing) 0.05s;
    }

    [data-observe-resizes] [data-observe-resizes]::before {
    left: -1.2em;
    right: auto;
    top: 3.1em;
    transform: rotate(-45deg);
    }
    .SM[data-observe-resizes]::before {
    background-color: #40bf80;
    color: hsla(0, 100%, 100%, 100);
    content: "SM";
  }

  .MD[data-observe-resizes]::before {
    background-color: #33b2cc;
    content: "MD";
  }

  .LG[data-observe-resizes]::before {
    background-color: #bc79ec;
    content: "LG";
  }

  .XL[data-observe-resizes]::before {
    background-color: #f0427c;
    content: "XL";
  }
*/


.segment-tree ul li span:before{
    content:'';
    position:absolute;
    border-left:1px solid ;
    left:14px;
    bottom:0;
    z-index:-1;
    height:100%
}
.dialog-settings .buttons {
    justify-content: flex-end;
    width: 100%;
    padding-top: 15px;
}
.dialog-settings .buttons button {
    text-align: center;
    margin-left: 10px;
}
.dialog-settings .buttons button:first-child {
    margin-left: 0;
}
.dialog-settings .col-30 {
    width: 30%;
    float: left;
}
.dialog-settings .col-40 {
    width: 40%;
    float: left;
}
.dialog-settings .col-50 {
    width: 50%;
    float: left;
}
.dialog-settings .col-60 {
    width: 60%;
    float: left;
}
.dialog-settings .col-70 {
    width: 70%;
    float: left;
}
.dialog-settings #general-settings {
    padding-top: 1.35em;
}
.dialog-settings #performance-simulation {
    padding-top: 1.35em;
}
.dialog-settings #performance-simulation .dark-gray {
    color: var(--label-gray);
}
.dialog-settings #performance-simulation {
    padding-top: 1.35em;
}
.dialog-settings a {
    cursor: pointer;
}
.dialog-settings #performance-simulation button.sy.load {
    margin-left: 15px;
    margin-top: 3px;
    padding: 7px 15px;
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    color: var(--dark-gray);
}
.dialog-settings #performance-simulation .empty-fill {
    background-color: var(--very-light-gray);
}
.dialog-settings #performance-simulation td:nth-last-child(2) {
    border-radius: 0px 15px 15px 0px;
}
.dialog-settings #performance-simulation td:nth-child(3) {
    border-radius: 15px 0px 0px 15px;
}
.dialog-settings #performance-simulation #settings-map {
    width: 90%;
    height: 525px;
    border-radius: 12px;
    margin-top: 50px;
}
.dialog-settings #performance-simulation .load-settings-desc {
    text-align: right;
    float: left;
    margin-left: -5px;
    margin-right: 5px;
}
.dialog-settings #performance-simulation h4 {
    margin-bottom: 0px;
}
.dialog-settings #performance-simulation .qmark-info {
    float: left;
    margin-top: .65em;
    margin-left: 40%;
}
/*.dialog-settings #performance-simulation #settings-load-performance-simulation {
    width: 80px;
    float: left;
    font-size: 12px;
    margin-top: -22px;
    margin-left: 35px;
}*/
.dialog-settings #performance-simulation #settings-irradiance-model {
    width: 120px;
    margin: 10px 19px;
    float: left;
    margin-top: 1.45em;
}
.dialog-settings #performance-simulation #settings-load-performance-simulation {
    width: 80px;
    float: left;
    font-size: 12px;
    margin-top: 8px;
    margin-left: 5px;
}
.dialog-settings #performance-simulation #settings-weather-data {
    width: 80px;
    margin: 8px 10px;
    float: left;
}
.dialog-settings #performance-simulation table {
    border-spacing: 0;
}
.dialog-settings #performance-simulation td input {
    width: 30px;
    margin-right: 4px;
}
.dialog-settings #performance-simulation td a {
    float: right;
    padding-right: 5px;
    color: var(--light-blue);
    font-size: 11px;
}
.dialog-settings #performance-simulation td:nth-child(1) {
    width: 200px;
}
.dialog-settings #performance-simulation table {
    border-spacing: 0px 4px;
}
.dialog-settings #three-d-scene {
    padding-top: 1.35em;
}
.dialog-settings #three-d-scene .color-setting {
    width: 100%; 
    display: flex; 
    padding-top: 14px;
}
.dialog-settings #three-d-scene .color-setting p {
    float: left; 
    margin-top: 0.5px; 
    margin-left: 12px;
}
.dialog-settings #three-d-scene .color {
    width: 16px; 
    height: 16px; 
    border-radius: 1.75px;
    float: left;
}
.dialog-settings #three-d-scene #color-setting-select {
    float: left; 
    width: 120px; 
    margin-top: 18px; 
    margin-left: 15px
}
.dialog-settings #three-d-scene .blue {
    background-color: var(--main-blue);
}
.dialog-settings #three-d-scene .green {
    background-color: var(--green);
}
.dialog-settings #three-d-scene .l-blue {
    background-color: var(--light-blue);
}
.dialog-settings #three-d-scene .orange {
    background-color: var(--orange);
}
.dialog-settings #three-d-scene .red {
    background-color: var(--red);
}
.dialog-settings #three-d-scene .yellow {
    background-color: var(--yellow);
}
.dialog-settings .ui-dialog-titlebar {
    font-size: 24px;
}
/*@media screen and (max-width: 1675px) {
    .dialog-settings .col-40 {
        width: 100%;
        float: none;
    }
    .dialog-settings .col-60 {
        width: 100%;
        float: none;
    }
    .dialog-settings #performance-simulation {
        padding-top: 0em;
    }
    .dialog-settings #performance-simulation .load-settings-desc {
        padding-left: .5%;
    }
}*/
.share-column > button {
    border-radius: 10px;
}
.share-column > button,
.share-column > button > i,
.share-column > i {
    cursor: pointer;
}

#share-tool-dialog {
    padding: 0 5px;
    overflow: auto;
}

.share-prompt {
    margin: 1vh 0;
    margin-left: 12px;
}

.take-share-img, .share-img-box {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background-color: var(--very-light-gray);
    background-repeat: no-repeat;
    background-size: cover;
}
.take-share-img:hover, .share-img-box:hover {
    background-color: #FCFCFC;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.125);
    transition: all .3s ease-in-out;
    cursor: pointer;
}

.add-img-text {
    top: 62%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    font-size: 11px;
    text-align: center;
    color: var(--dark-gray);
    opacity: .5;
}
.add-img-text span {
    font-size: 9px;
}

.checked {
    color:var(--green);
}

.unchecked {
    color: var(--blue-gray);
}

#share-link-dialog button {
    padding: 8px 100px;
    cursor: pointer;
}

#share-link-dialog {
    margin: 2%;
    margin-top: -5%;
    text-align: center;
}

#share-dialog-title {
    font-size: 18px;
}

#share-dialog-text {
    border-style: none;
    border-color: transparent;
    overflow: auto;
    resize: none;
    font-size: 13px;
    height: 35%;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 2.5%;
    color: var(--label-gray);
    text-align: center;
}

@media only screen and (max-height: 900px) {
    #share-link-dialog {
        margin-top: -8%;
    }
}
@media only screen and (max-height: 800px) {
    #share-link-dialog {
        margin-top: -12%;
    }
}

#share-dialog-text input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.share-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}
.share-column {
    display: flex;
    flex: 1;
    height: 11vh;
    width: 10vw;
    position: relative;
    margin: 1.5%;
}
.share-column .placeholder-img {
    width: 35px;
    opacity: .3;
    margin:0 auto;
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
}
#share-photo-five {
    flex: 0.5;
    left: 50%;
    transform: translateX(-50%);
}

.share-contain {
    display: flex;
    flex-direction: column;
}
#share-sales-phone {
    width: 37%;
    margin-right: 3%;
}
#share-sales-company {
    width: 50%;
}
.banner-cursor {
    cursor: pointer;
}

.edit-project > span {
    margin-left: 2%;
}

.edit-title {
    margin-top: -15px;
    margin-bottom: -10px;
    float: left;
    display: flex;
    flex-direction: row;
}

#share-project-name {
    text-align: left;
    width: 41%;
    margin-left: 10px;
    margin-top: -2px;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.edit-button {
    cursor: pointer;
    text-decoration: underline;
    text-align: center;
}

.edit-project-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1% 0%;
}
.edit-project-header > .extra-info {
    margin-top: -7px;
}
/*.edit-project-group > label {
    color: var(--label-gray);
    display: inline-block;
    width: 15%;
    text-align: left;
    margin-right: 20px;
}*/

.edit-project-group input {
    width: 93.5%;
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
    margin-left: -1.5%;
}

.edit-project-group {
    margin-left: 2%;
    display: flex;
    align-items: center;
    padding: 1% 0 1% 0;
}

.edit-project {
    text-align: left;
    display: flex;
    flex-direction: column;
    margin-left: 2%;
    margin-top: 5px;
}

.check-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 4%;
    color: var(--label-gray);
}

.check-row span {
    margin: 0 1% 0px 3%;
    text-align: left;
}

.check-row i {
    font-size: 16px;
    color: var(--gray);
}

#share-checkboxes {
    margin-top: 10px;
}

button.sy.thumbnail-select {
    position: absolute;
    top: 30%;
    z-index: 200;
    width: 32px;
    height: 32px;
    text-align: center;
}

.banner-thumbnail-list {
    display: flex;
    flex-wrap: wrap;
}
#banner-thumbnail-dialog {
    height: 355px;
    background-color: var(--white);
    position: fixed;
    transform: translate(4.5%, 52px);
    border: 1px solid var(--light-gray);
    overflow: scroll;
    z-index: 5;
    border-radius: 8px;
}
#banner-thumbnail-dialog > img {
    cursor: pointer;
}
#banner-thumbnail-dialog > ul {
    list-style-type: none;
}
#banner-thumbnail-dialog .thumb {
    border-radius: 3px;
}

.banner-option {
    margin-left: 5px;
    cursor: pointer;
}

.banner-option > a > img {
    position: relative;
    left: -20%;
    top: -70%;
}
.qmark-info {
    position: relative;
    text-decoration: none;
    cursor: pointer;
    margin-left: 10px;
    margin-top: -1px;
    text-align: center;
    background-color: var(--light-blue);
    border-radius: 50%;
    min-width: 20px;
    width: 20px;
    height: 20px;
    font-size: 15.5px;
    vertical-align: middle;
    line-height: 1.5;
    display: inline-block;
}

.extra-info::before {
    content: "?";
    font-weight: bold;
    color: var(--white);
}

.edit-title .qmark-info {
    margin-top: 18px;
}

.wait-photo-banner {
    position: absolute;
    top: 26%;
    left: 43%;
    color: var(--dark-gray);
    opacity: .3;
}

.wait-photo {
    position: absolute;
    top: 25%;
    left: 36%; /* this is not a good way to set this up as there's no defined width for the icon...will revisit */
    color: var(--dark-gray);
    opacity: .3;
}

.extra-info p {
    display: none;
    text-align: left;
    background-color: var(--white);
    padding: 10px;
    width: 310px;
    position: absolute;
    border-radius: 3px;
    border-style: double;
    border-width: medium;
    box-shadow: 1px 1px 1px var(--black-transp);
    right: -70px;
    color: var(--green);
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    z-index: 300;
}

.extra-info p::after{
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:40px;
    z-index: 300;
}

.tippy-box {
    font-family: "Poppins", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.tippy-box {
    max-width: 350px;
}

.share-btn-container button.sy {
    text-align: center;
    padding: 8px 8px;
    width: 95%;
    margin-left: 2.5%;
    margin-top: 15px;
    margin-bottom: 20px;
}
.input-parapet,
.input-setback {
    width: 40px !important;
}

.module-specs-tool-keepouts {
    width: 100%;
}
.module-specs-tool-keepouts tr:first-child {
    font-weight: 900;
    font-size: 12px;
    line-height: 20px;
    background-image: linear-gradient(to right, var(--dark-gray) 15%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 7px 1px;
    background-repeat: repeat-x;
}
.module-specs-tool-keepouts table tr {
    padding: 20px !important;
}
.module-specs-tool-keepouts td {
    vertical-align: middle;
    text-align: center;
    width: 27px;
    padding: 2px;
}
.module-specs-tool-keepouts td.direction {
    width: 47%;
}
.module-specs-tool-keepouts td.keepout-type {
    width: 10px;
}
.module-specs-tool-keepouts .icon, .module-specs-tool-viewsheds .icon {
    display: inline-block;
    text-align: center;
    vertical-align: middle
}
.fire-setback .icon {
    display: inline-block;
    width: 20px;
    margin-left: auto;
    text-align: center;
    vertical-align: middle;
}
.fire-setback .icon .fa {
    font-size: 1rem;
}
.fire-setback .title {
    font-size: 14px;
}
.setback-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
}

.module-specs-tool-keepouts td input {
    width: 100%;
    box-sizing: border-box;
    min-width: 40px;
    font-family: "Poppins", Helvetica, Arial, sans-serif;
    text-align: left;
}
.module-specs-tool-keepouts .units {
    color: var(--label-gray);
}
.sidebar-keepouts h4 {
    margin-block-end: 0px;
    margin-top: 0.5rem;
}
.sidebar-keepouts {
    overflow-x: auto;
    width: 100%;
}
.sidebar-keepouts img {
    vertical-align: middle;
    margin-top: -0.1rem;
}

.sidebar-keepouts-row {
    display: flex;
    gap: 0.8rem;
}

.keepout-button {
    width: 2rem;
    height: 2rem;
}
#plane-tabs-keepouts-0 {
    margin-top: 0px;
}
.module-specs-tool-actions button .keepout-square {
    margin-left: 0px;
}

.keepout-fs {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
}

.fire-setback {
    height: auto;
    min-height: 2.5rem;
    margin-top: 1.2rem;
    font-size: 12px;
    white-space: nowrap;
}
button.keepout-fs {
    font-weight: 400;
    float: left;
    width: 50%;
    min-width: fit-content;
}
.sidebar-keepouts .units {
    background: var(--blue-gray);
    padding: 5px;
    border-radius: 5px;
    margin: 10px 0;
}
#sidebar-keepouts-left, #sidebar-keepouts-right {
    width: 50%;
}
.sidebar-keepouts-row {
    width: 100%;
}
.fire-setback .switch-label {
    padding-right: 0px;
    padding-left: 0px;
    width: 34px;
}
.fsColorToggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}
.fsColorToggle .toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fire-setback .keepout-edit-remove {
    display: flex;
    gap: 10px;
}
.fire-setback .inner {
    display: flex;
    padding: 5px;
    background: var(--blue-gray);
    border-radius: 4px;
    margin: 10px 0;
    justify-content: space-between;
}
.fire-setback-buttons {
    display: flex;
    gap: 0px;
}
.keepout-row:hover,
.module-specs-tool-keepouts ul li:hover {
    background: #0c69c436;
}
.module-specs-keepout-extrude {
    padding: 5px 10px 5px 2px;
    width: 100%;
}
.module-specs-keepout-extrude select {
    font-family: "Poppins", Helvetica, Arial, sans-serif;
    color: var(--dark-gray);
}

.module-specs-tool-keepouts image {
    width: 22px;
    height: 22px;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
    margin: 0 2px;
}
.keepout-edit-remove button,
.module-specs-tool-keepouts button {
    width: 22px;
    height: 22px;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
    margin: 0 2px;
}
.keepout-edit-remove button .fa,
.tool-options .module-specs-tool-keepouts button .fa {
    font-size: 12px;
    margin: 0;
}
.keepout-edit-remove button .fa-pencil-square-o,
.tool-options .module-specs-tool-keepouts button .fa-pencil-square-o {
    margin: 1px 0 0 3px;
}

#plane-offset-slider {
    width: 180px;
    margin: 17px 10px 0px 2px;
    border: var(--main-blue);
}
.keepouts-auto .label {
    margin-block-end: 0rem;
    margin-block-start: 0.5rem;
    margin-top: 2px;
}
.keepouts-auto > input {
    font-size: 11px;
    width: 10px;
    color: var(--dark-gray);
    margin: 8px 5px 0px 8px;
    font-family: "Poppins", Helvetica, Arial, sans-serif;
    float: left;
}
.auto-keepouts-header {
    width: 100%;
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
}
.auto-keepouts-header h4 {
    float: left;
}
.dialog-gen-keepouts {
    text-align: center;
}
.dialog-gen-keepouts i {
    font-size: 3em;
    padding-top: 0px;
    padding-bottom: 5px;
    text-align: center;
}
.dialog-gen-keepouts h3 {
    font-size: 2em;
    line-height: 1em;
}
.dialog-gen-keepouts p {
    line-height: .3em;
    font-size: 1.2em;
}
.sidebar-keepouts-container {
    display: flex;
}
.keepout-buttons {
    display: flex;
    width: 100%;
}
.keepouts-auto > .ui-spinner {
    margin-top: 2px;
}
.keepouts-auto #spinner {
    width: 32px !important;
}
.keepouts-auto .ui-spinner-disabled, .keepouts-auto .ui-button-disabled {
    background-color: var(--light-gray);
}
.keepouts-auto .ui-slider-disabled > .ui-slider-handle {
    background-color: var(--dark-gray);
}
.keepouts-auto .ui-slider-disabled > .ui-slider-range {
    background-color: var(--dark-gray);
}
.keepouts-auto .ui-state-disabled {
    opacity: .5;
}
.keepout-auto .auto-keepout-inputs {
    width: 100%;
}
.keepouts-auto .ui-widget.ui-widget-content {
    margin-right: 5px;
}
button.sy.generate-auto-keepouts {
    padding: 7px 27px;
    margin: 5px 4px 20px 0px;
    float: left;
}
button.sy.accept-auto-keepouts, button.sy.clear-auto-keepouts, button.sy.delete-all-auto-keepouts {
    padding: 7px 15px;
    margin: 5px 4px 20px 0px;
    float: left;
}
button.sy.clear-auto-keepouts, button.sy.delete-all-auto-keepouts {
    background-color: var(--red);
}
button.sy.delete-all-auto-keepouts {
    padding: 7px 27px;
    margin: 5px 4px 30px 0px;
}
button.sy.clear-auto-keepouts:disabled {
    background-color: var(--gray);
}
.auto-keepouts .delete-all-section {
    width: 100%;
    display: flex;
}
.keepout-color-key {
    float: right;
}
.keepout-spacer {
    width: 100%;
    height: 60px;
    background-color: var(--white);;
}
.keepout-type {
    width: 5px;
    font-size: 10px;
    border-radius: 9px;
    color: var(--white);
    text-align: center;
    border: 3px solid var(--white);
    background-color: var(--red);
}
td.keepout-type.auto {
    background-color: var(--teal);
}
td.keepout-type.manual {
    background-color: var(--red);
}
/*
.keepout-type, .keepout-transition .auto {
    background-color: var(--teal);
}
.keepout-type, .keepout-transition .manual {
    background-color: var(--orange);
}
.keepout-transition{
  transition-delay: .3s;
  -webkit-transition-delay: .3s;
  transition: width .4s;
  -webkit-transition: width .4s;
  transition-timing-function: ease;
}
.keepout-transition:hover{
  width:75px;
}*/
.keepouts-auto > hr {
    width: 100%;
    margin: 10px 0 20px 0;
    opacity: .5
}
.automatic-label {
    color: var(--teal);
    font-size: 14px;
    padding: 2px 2px 0px 0px;
}
.manual-label {
    color: var(--red);
    font-size: 14px;
    padding: 2px 2px 0px 0px;
}

.split .sidebar-title.hbox {
    flex: 0 0 66px;
    align-items: center;
    justify-content: space-between;
}
.sidebar-title button.sy {
    background: var(--white);
    color: var(--dark-gray);
    font-size: 33px;
    box-shadow: none;
    margin-right: 10px;
    font-weight: 600;
}
.sidebar h4.get-started {
    padding: 5% 15%;
}
.sidebar h3 {
    margin: 8px 0 13px 0;
    display: none; /* it was suggested we hide these for more vertical space – I think some could still use them (like occluder below and segements). Should be shown again when we have panel on the right */
}

.occluder-heading h3, 
.auto-segment-header h3, 
.manual-array h3,
.all-segs h3,
.seg-info h3 { /* keep until we show h3s again */
    display: block;
}


.sidebar .pane-container {
    padding: 0 10px;
}
.sidebar .pane-container .get-started {
    text-align: center;
    font-size: 14px;
    padding-top: 20%;
    padding-bottom: 12.5%;
}
.sidebar .pane-container .get-started-illustration {
    /*width: 80%;
    margin-left: 10% for undraw illustration*/
    width: 96%;
    margin-left: 2%;
    margin-top: 5%;
}

.segment-props {
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.segment-props .azimuth,
.segment-props .tilt {
    width: 120px;
}
.segment-props .info {
    width: 50px;
    text-align: left;
}

.segment-props img {
    width: 19px;
    height: 19px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.block {
    background: var(--blue-gray);
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
}
.block-outline {
    border: 3px solid var(--blue-gray);
    border-radius: 4px;
    padding: 10px;
}
.block a {
    color: var(--scanifly-active-color);
}

.qmark-info {
    display: inline-block;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    text-align: center;
    cursor: pointer;
    background: var(--light-blue);
    font-size: 15px;
    line-height: 1.4;
    margin: 0 20px;
}
.qmark-info:before {
    content: "?";
    font-weight: bold;
    color: var(--white);
    box-align: middle;
}
.qmark-info .tooltip-content {
    display: none;
}
.shading-values-mini {
    display: flex;
    justify-content: space-around;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    padding: 0px 2.5px;
    margin-bottom: -5px;
    margin-top: 2px;
    cursor: default;
}
.shading-values {
    width: 100%;
}
.shading-values .number {
    text-align: right;
    font-weight: bold;
}
.shading-values td {
    padding: 0;
    margin: 0;
}
.shading-value {
    color: var(--label-gray);
}
.system-tree-totals {
    margin: 10px 0 0 0;
    color: var(--label-gray);
    width: 100%;
}
table.system-tree-totals tr {
    float: left;
}
table.system-tree-totals tr:nth-child(1) {
    margin-right: 20px;
}
.input-panel-tilt,
.input-panel-azimuth {
    width: 40px;
}

.segment-props input {
    padding: 2px 6px;
}

.card {
    padding: 13px;
    margin: 13px 0;
    border-radius: 8px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
}
.card:first-child {
    margin-top: 0;
}
.card h4 {
    margin: 0 0 13px 0;
    font-size: 1rem;
}
.az-tilt-area {
    margin-bottom: 13px;
}
.az-tilt-area div {
    display: flex;
    justify-content: space-between;
}
.az-tilt-area span {
    color: var(--label-gray);
}

.empty .card {
    margin-top: 20px;
    text-align: center;
    padding: 40px;
    font-size: 14px;
    line-height: 23px;
}
#split-content-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#split-content-wrapper .split-title {
    padding: 8px 12px;
    flex: 0 0 50px;
    height: 50px;
    line-height: 6px;
    box-shadow: inset 7px 0 9px -7px var(--black-transp);
}

#split-workspace-wrapper {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
}

#split-sidebar {
    min-width: 60px;
    z-index: 1100;
}

#split-main {
    width: 100%;
    position: relative;
}
#split-main .viewport {
    position: relative;
    height: 100%;
}
#container3d {
    height: 100%;
}
#container3d div {
    height: 100%;
}
#container3d canvas {
    width: 100%;
    height: 100%;
}

#split-sidebar .content {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 7px 5px 10px;
    box-sizing: border-box;
}

.split .gutter-vertical {
    cursor: row-resize;
    margin: 0 7px 0 10px;
    border-radius: 5px;
    background: var(--blue-gray) url(adfbb3fe310c2e339fe6.png);
    background-repeat: no-repeat;
    background-size: 12px 7.2px;
    padding: 2px 0px;
    background-position: center center;
}

/*.gutter-vertical {
    margin-top: -13px !important;
    position: relative;
    z-index: -1;
}*/

.split .gutter-horizontal {
    cursor: col-resize;
    background: var(--white);
}

.split .hbox,
.split .vbox {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
}

.split .vbox {
    flex-direction: column;
}

.split .hbox {
    flex-direction: row;
}

.split .vbox.centered,
.split .hbox.centered {
    align-items: center;
}

.split .vbox.reversed,
.split .hbox.reversed {
    justify-content: flex-end;
}

.split .expand {
    flex: 1 1 auto;
}

.split .fixed {
    flex: 0 0 auto;
}

.toolbar-vertical {
    background: var(--blue-gray);
    flex: 0 0 65px;
    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);*/
}

.toolbar-vertical button {
    margin-top: 8px;
}

.toolbar-vertical .reversed button {
    margin-top: 0;
    margin-bottom: 5px;
}

.nav-anchor {
    position: relative;
}
.nav-container {
    position: absolute;
    top: 68px;
    left: 0;
    z-index: 9;
    pointer-events: none;
}

.status-indicator {
    width: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    margin: 0 0 5px 5px;
}
.status-indicator .progress-bar .percentage {
    font-weight: bold;
    vertical-align: middle;
    line-height: 1.9;
}
.console-wrapper button.sy {
    font-size: 14px;
    background: none;
    color: var(--dark-gray);
    box-shadow: none;
    font-weight: bold;
    padding: 0;
    line-height: .25;
    text-align: center;
    padding-right: 16px;
    margin-top: 2px;
    width: 97%;
    text-align: right;
    z-index: 40;
    position: absolute;
}

.console-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    display: flex;
    padding-left: 5px;
    box-sizing: border-box;
}
.console {
    height: 19px;
    border: 1px solid var(--light-gray);
    border-radius: 10px;
    background: var(--white);
    box-sizing: border-box;
    margin: 0 5px 5px 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    flex: 1;
}
.console .timestamp {
    color: var(--label-gray);
}
.console.open {
    height: 200px;
    align-items: flex-start;
    flex-direction: column;
    overflow-y: auto;
    justify-content: flex-start;
}

.status-indicator .progress-bar {
    flex: 1;
    height: 19px;
    background: var(--light-gray);
    border-radius: 10px;
    margin-right: 5px;
    text-align: center;
}
.status-indicator .inner {
    display: flex;
    height: 100%;
    width: 100%;
    border-radius: 50px;
    overflow: hidden;
}
.status-indicator .inner .bar {
    display: flex;
    height: 100%;
    width: 0;
    background: var(--green);
    border-radius: 20px;
}

.status-indicator .inner .bar.error {
    background: var(--red);
}

.status-indicator .percentage {
    position: absolute;
    font-size: 11px;
    left: 10px;
    font-weight: bold;
    margin-top: 1.5px;
}
.status-indicator .bar.indeterminate {
    width: 50%;
    animation: progress-animation2 2s cubic-bezier(0.0, 0.0, 1.0, 1.0) infinite;
}
/* based on https://github.com/helion3/inspire-tree  */

.system-tree {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.system-tree,
.system-tree * {
    box-sizing: border-box;
}
.system-tree>ol {
    position: relative;
}
.system-tree ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.system-tree ol ol {
    padding-left: 20px;
}
.system-tree .collapsed>ol {
    display: none;
}
/*.system-tree .folder:last-child:not(:only-child),
.system-tree>ol>.folder:first-child:not(:only-child),
.system-tree li .folder:last-child {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
}*/
.system-tree li.expanded:not(:last-child)>ol {
    background-repeat: repeat-y;
}

.system-tree>ol>.folder:first-child:not(:only-child) {
    background-position: 11px 13px;
}
/*.system-tree>ol .expanded:not(:last-child):not(:first-child),
.system-tree li.expanded:not(:last-child)>ol,
.system-tree li:not(:last-child) {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAYAAAA7zJfaAAAAFUlEQVQIW2M8d+HSf0YGBgYGRrqyABKeKU0SV+t2AAAAAElFTkSuQmCC);
    background-position: 11px 0;
}*/
.system-tree .leaf:not(:last-child):not(.detached) {
    /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAN0lEQVQ4T2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGLo0dBDDz0SMu5o2oMFFgBXbEeI0XwYIwAAAABJRU5ErkJgggAA);
   */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFG2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDYgNzkuZGFiYWNiYiwgMjAyMS8wNC8xNC0wMDozOTo0NCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjQgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA2LTA5VDE3OjA0OjQ4LTA1OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wNi0xMFQwOToyNzozMi0wNTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wNi0xMFQwOToyNzozMi0wNTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkNTJhMzhkNC1iNGNlLTQ4MzMtYjJlZC1iNGM3MWM1M2QzZTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZDUyYTM4ZDQtYjRjZS00ODMzLWIyZWQtYjRjNzFjNTNkM2U5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZDUyYTM4ZDQtYjRjZS00ODMzLWIyZWQtYjRjNzFjNTNkM2U5Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpkNTJhMzhkNC1iNGNlLTQ4MzMtYjJlZC1iNGM3MWM1M2QzZTkiIHN0RXZ0OndoZW49IjIwMjEtMDYtMDlUMTc6MDQ6NDgtMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChNYWNpbnRvc2gpIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt9LXu0AAAAzSURBVDiNYzh34dJ/BrqAUZtGbYKD////MzDBbCKWPn/xMiNZNg230Bu1CQkw/v9PuusAUTdFzpErNBYAAAAASUVORK5CYII=);
    background-position: 11px 0;
    background-repeat: no-repeat;
    margin-top: -1px;
}
.system-tree>ol .expanded:not(:last-child):not(:first-child),
.system-tree li:not(:last-child) {
    background-repeat: no-repeat;
}
.system-tree .leaf:last-child {
    /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAKklEQVQoU2M8d+HSfyMDPUYGEgBJimHmMo7aBAmK0dCDJgl4ioClDGJoAGUZM32Z0U8tAAAAAElFTkSuQmCC);
    */background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFG2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDYgNzkuZGFiYWNiYiwgMjAyMS8wNC8xNC0wMDozOTo0NCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjQgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA2LTA5VDE3OjA1OjA1LTA1OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wNi0xMFQwOToyMzoxOS0wNTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wNi0xMFQwOToyMzoxOS0wNTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpiMjYxYzdiNi0yMjcxLTRhMmQtOTA0Yy05YmVkNTM0MWM4MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6YjI2MWM3YjYtMjI3MS00YTJkLTkwNGMtOWJlZDUzNDFjODE2IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YjI2MWM3YjYtMjI3MS00YTJkLTkwNGMtOWJlZDUzNDFjODE2Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiMjYxYzdiNi0yMjcxLTRhMmQtOTA0Yy05YmVkNTM0MWM4MTYiIHN0RXZ0OndoZW49IjIwMjEtMDYtMDlUMTc6MDU6MDUtMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChNYWNpbnRvc2gpIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsO/HeMAAAAwSURBVCiR7Y2xDQAgEITQ/WczxoX46vuzVhoqAmsfCVFRGWnQEcC8OTX/9MIpNUABNStBL5EcbxkAAAAASUVORK5CYII=);
    background-position: 11px 0;
    background-repeat: no-repeat;
    margin-top: -1px;
}
.system-tree li.expanded.folder:not(.loading)>.title-wrap { /* this doesn't seem to be doing anything */
    /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAYAAACji9dXAAAAFUlEQVQIW2M8d+HSf0YGBgYGRpJZAJ2uFKcp4HfpAAAAAElFTkSuQmCC);
  */  background-position: 31px 13px;
    background-repeat: no-repeat;
}
.system-tree .folder:last-child:not(:only-child),
.system-tree li .folder:last-child {
    background-position: 11px 0;
}

.system-tree li>.title-wrap {
    min-height: 25px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.system-tree .icon:before {
    background-position: 0 0;
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 12px;
    width: 12px;
}
.system-tree .icon-collapse,
.system-tree .icon-expand {
    font: normal normal normal 15px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color: var(--dark-gray);
    border-radius: 3px;
}
.system-tree .icon.icon-collapse:before {
    /*content: "\f147";*/
    content: "\f107";
    margin-top: -2px;
}
.system-tree .icon.icon-expand:before {
    /*content: "\f196";*/
    content: "\f105";
    margin-top: -2px;
    margin-left: 2px;
}

.system-tree .toggle {
    height: 25px;
    left: 0;
    position: absolute;
    top: 0;
    width: 25px;
    z-index: 2;
}
.system-tree .toggle:before {
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}
.system-tree [type=checkbox] {
    left: 18px;
    position: absolute;
    top: 3px;
    vertical-align: middle;
    width: 20px;
    z-index: 2;
}
.system-tree .title {
    cursor: default;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    padding-left: 42px;
    position: relative;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    z-index: 1;
}
.system-tree .title:before {
    left: 24px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    vertical-align: top;
}
.system-tree .node-name {
    display: inline-block;
    padding: 0 5px;
    cursor: pointer;
}

.system-tree .wholerow {
    height: 25px;
    left: 0;
    margin-top: -25px;
    position: absolute;
    width: 100%;
    z-index: 1;
    cursor: pointer;
}
.system-tree .wholerow:hover {
    background: var(--light-gray);
    opacity: .5;
    border-radius: 8px;
    padding: 0px 30px;
}
.system-tree .title-wrap:hover + .wholerow {
    background: var(--light-gray);
    opacity: .5;
    border-radius: 8px;
    padding: 0px 30px;
}
.system-tree .selected > .title-wrap:hover + .wholerow,
.system-tree .selected > .wholerow {
    background: var(--light-gray);
    opacity: .5;
    border-radius: 8px;
    padding: 0px 30px;
}

.system-tree .disabled,
.system-tree .disabled .node-name,
.system-tree .disabled .wholerow,
.system-tree .disabled .title-wrap,
.system-tree .disabled input {
    cursor: not-allowed;
    color: var(--blue-gray);
}

.system-tree .btn {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 3px;
    display: inline-block;
    height: 20px;
    transition: all .15s linear;
    width: 20px;
}
.system-tree .btn-group {
    display: none;
    height: 23px;
    line-height: 23px;
    position: absolute;
    right: 10px;
    z-index: 3;
}
.system-tree .btn-group button {
    display: inline-block;
    width: 22px;
    height: 22px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}
.system-tree .editable > .title-wrap:hover > .btn-group {
    display: inline-block;
}

.system-tree div.title-wrap.hover {
    border: 1px solid rgb(0, 0, 0);
    border-radius: 8px;
}
.viewshed {
    position: relative;
    margin: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    border-radius: 12px;
    display: flex;
    width: 90px;
    float: left;
    padding: 15px 25px 0px 25px;
}
.viewshed-list-view {
    position: relative;
    margin: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    border-radius: 12px;
    display: flex;
    float: left;
    width: 84%;
    padding: 15px 25px 0px 25px;
}
.viewshed .viewshed-thumbnail:hover, .viewshed .horizon-graph:hover {
    cursor: zoom-in;
}
.viewshed .shading-values-viewshed  {
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin-bottom: 2px;
    margin-top: -15px;
    margin-left: -15px;
}
.viewshed-list-view .shading-values-viewshed {
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin-bottom: 2px;
    margin-top: -25px;
    margin-left: 45px;
}
.viewshed .tags .tag, .viewshed-list-view .tags .tag, .pp-info-viewsheds .tag {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    font-size: 10px;
    padding: 2px;
}
.dialog-viewshed .tag {
    padding: 5px 8px;
    font-size: 12px !important;
}
.dialog-viewshed .tags .viewshed-tag {
    width: 12.5px;
    line-height: 17.5px;
    border-radius: 100%;
    margin-right: 8px;
    margin-top: 2px;
}
.section-viewsheds .units {
    background: var(--blue-gray);
    padding: 5px;
    border-radius: 5px;
    margin: 10px 0;
}
.shade-value {
    font-size: 10.5px;
    color: var(--label-gray);
    padding: 0px 2.5px;
}
.viewshed-color-key {
    float: right;
}
.viewshed .viewshed-content {
    width: 100%;
    padding-top: 0px;
    padding-left: 0px;
    text-align: center;
    position: relative;
}
.viewshed-list-view .viewshed-content {
    width: 100%;
    text-align: left;
    padding-top: 13px;
    padding-left: 15px;
    text-align: center;
    position: relative;
}
.viewshed-content .viewshed-marker {
    width: 16px;
    height: 16px;
    border-radius: 16px;
    float: right;
    margin: 1px 5% 0px -5%;
}
.viewshed-content .viewshed-marker-other-option {
    width: 20px;
    line-height: 20px;
    font-size: 18px;
    border-radius: 50%;
    margin-left: 48px;
}
.viewshed .tags, .viewshed-list-view .tags {
    display: block;
    position: absolute;
    z-index: 10;
    margin-left: 12px;
    float: left;
}
.viewshed-type {
    font-size: 17px;
    margin-left: 2px;
}
.dialog-viewshed .tags {
    display: block;
    margin-left: 12px;
}
.dialog-viewshed h3 {
    margin-block-start: 4px;
}
.viewshed .tag, .viewshed-list-view.tag, .dialog-viewshed .tags {
    padding: 0.65px 5px;
}
.viewshed .tag.auto, .viewshed-list-view.tag.auto, .dialog-viewshed .tag.auto {
    background-color: var(--teal);
}
.viewshed .tag.manual, .viewshed-list-view.tag.manual, .dialog-viewshed .tag.manual {
    background-color: var(--red);
}
.viewshed .tag::first-letter, .viewshed-list-view.tag::first-letter, .dialog-viewshed .tag::first-letter {
    text-transform: uppercase;
}
.viewshed-modal-heading {
    margin-top: -10px;
    display: flex;
}
.viewshed input[type=checkbox], .viewshed-list-view input[type=checkbox] {
    margin-left: -12px;
    display: block;
    position: absolute;
    z-index: 10;
}
.viewshed-illustration {
    width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}
.viewsheds-content {
    margin: 0px -5px;
}
.tool-options .viewsheds-container .option:nth-child(1) {
    margin-right: 24px !important;
}
.viewsheds-container {
    margin: 0 !important;
    padding: 2px 10px 2px 10px !important;
    display: flex;
}
.actions button.sy.icon > img {
    width: 15px;
    margin-left: -1.75px;
    margin-top: -1px;
}
.viewsheds-auto #density-spinner {
    width: 32px !important;
    padding: 5px;
}
.viewsheds-auto .viewshed-filters {
    padding: 10px 0px 5px 0px;
}
.viewsheds-auto .roof-density-spinner {
    float: left;
}
.viewsheds-auto .input-wrapper.first {
    float: left;
}
button.sy.generate-auto-viewsheds {
    padding: 7px 27px;
    margin: 0px 4px 10px 0px;
    float: left;
}
button.sy.delete-all-auto-viewsheds {
    background-color: var(--red);
    padding: 7px 27px;
    margin: 0px 4px 10px 0px;
}
.delete-all-viewsheds-container {
    display: flex;
    width: 100%
}

.viewshed-info .option:nth-child(1) {
    font-weight: bold;
}
.viewshed-info .annotation-actions {
    display: none;
}
.viewshed-info .annotation-actions .add,
.viewshed-info .annotation-actions .a-remove {
    display: none;
}
.viewshed-info .annotation-actions .add.on,
.viewshed-info .annotation-actions .a-remove.on {
    display: block;
}
.viewshed-thumbnail {
    flex: 1;
    position: relative;
    margin-bottom: 155px;
    margin-top: 20px;
    margin-left: -16%;
    /*animation: fadein .75s;
    -webkit-animation: fadeIn .75s;
    -moz-animation: fadeIn .75s;
    -o-animation: fadeIn .75s;
    -ms-animation: fadeIn .75s;*/
}
.viewshed-thumbnail .base {
    width: 100px;
    position: absolute;
    top: 13px;
    left: 15px;
}
.viewshed-thumbnail .svg {
    margin: 0;
    width: 130px;
    position: absolute;
    top: 0;
    left: 0;
}
.viewshed-enlarged .base {
    width: 63.65%;
    position: absolute;
    margin-left: 18.175%;
    margin-top: 2.65%;
    animation: fadein 1.5s;
    -webkit-animation: fadeIn 1.5s;
    -moz-animation: fadeIn 1.5s;
    -o-animation: fadeIn 1.5s;
    -ms-animation: fadeIn 1.5s;
}
.viewshed-enlarged .svg {
    width: 78%;
    margin-left: 11%;
    margin-top: -4.5%;
    position: absolute;
}
.dialog-viewshed .horizon-overlay {
    width: 60%;
    position: absolute;
    margin-left: 18%;
    margin-top: 5.5%;
    animation-delay: 1s;
    animation: fadein 1.5s;
    -webkit-animation: fadeIn 1.5s;
    -moz-animation: fadeIn 1.5s;
    -o-animation: fadeIn 1.5s;
    -ms-animation: fadeIn 1.5s;
}
.dialog-viewshed .horizon-graph {
    width: 75%;
    margin-left: 10.5%;
    margin-top: -2%;
    position: absolute;
}

@media only screen and (max-height: 825px) {
    .viewshed-enlarged .base {
        width: 49%;
        margin-left: 25.5%;
        margin-top: 4%;
    }
    .viewshed-enlarged .svg {
        width: 60%;
        margin-left: 20%;
        margin-top: -1.5%;
    }
    .dialog-viewshed .horizon-overlay {
        width: 45.5%;
        margin-left: 27.25%;
        margin-top: 5.8%;
    }
    .dialog-viewshed .horizon-graph {
        width: 57%;
        margin-left: 21.5%;
        margin-top: 0%;
    }
}
@media only screen and (max-height: 700px) {
    .viewshed-enlarged .base {
        width: 40%;
        margin-left: 30%;
        margin-top: 1%;
    }
    .viewshed-enlarged .svg {
        width: 49%;
        margin-left: 25.5%;
        margin-top: -3.5%;
    }
}
.viewshed .icon, .viewshed-list-view .icon {
    position: absolute;
    display: block;
    float: right;
    margin-top: -6.5px;
    width: 20px;
    height: 20px;
    padding: 6px;
}
.viewshed .btn-horizon, .viewshed-list-view .btn-horizon {
    margin-left: 75px;
}
.viewshed-list-view .btn-horizon, .btn-viewshed {
    z-index: 100;
}
.viewshed .btn-horizon.list-view, .viewshed-list-view .btn-horizon.list-view {
    margin-left: 82%;
}
#viewsheds img {
    border-radius: 50%;
}
button.sy.remove-viewsheds {
    background-color: var(--red);
    margin-left: 4px;
}

button.sy.remove-viewsheds:disabled {
    background-color: var(--gray);
}

button.sy.refresh-viewsheds, button.sy.remove-viewsheds {
    float: right;
    height: 30px;
    width: 30px;
    font-size: 15px;
    padding: 3px;
    vertical-align: middle;
}

.module-specs-tool-viewsheds {
    width: 100%;
}
.module-specs-tool-viewsheds tr:first-child {
    font-weight: 900;
    font-size: 12px;
    line-height: 20px;
    background-image: linear-gradient(to right, var(--dark-gray) 15%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 7px 1px;
    background-repeat: repeat-x;
}
.module-specs-tool-viewsheds table tr {
    padding: 20px !important;
}
.module-specs-tool-viewsheds td {
    vertical-align: middle;
    width: 27px;
    padding: 2px;
    text-align: center;
}
.module-specs-tool-viewsheds td.direction {
    width: 47%;
}
.module-specs-tool-viewsheds td.keepout-type {
    width: 10px;
}
.module-specs-tool-viewsheds .icon {
    display: inline-block;
    width: 25px;
    text-align: center;
    vertical-align: middle
}
.viewsheds-auto .label {
    margin-block-end: 0rem;
    margin-block-start: 0.5rem;
    margin-top: 2px;
}
.viewsheds-auto > input {
    font-size: 11px;
    width: 10px;
    color: var(--dark-gray);
    margin: 8px 5px 0px 8px;
    font-family: "Poppins", Helvetica, Arial, sans-serif;
    float: left;
}
.auto-viewsheds-header {
    width: 100%;
    display: flex;
}

.auto-viewsheds-controls {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 10px;
}

.auto-viewsheds-container {
    display: flex;
    justify-content: space-between;
}

.auto-viewsheds-placement {
    flex-grow: 1;
}

.viewsheds-auto .input-wrapper {
    float: left;
}

.viewsheds-auto #auto-viewshed-density {
    max-width: 23px;
    margin-left: 12px;
    margin-top: 4px
}
.viewsheds-auto #density-spinner {
    max-width: 32px;
}
.viewsheds-auto .auto-viewshed-inputs {
    float: left;
}
.viewsheds-auto > .ui-spinner {
    margin-top: 2px;
}
.viewsheds-auto #spinner {
    width: 32px !important;
}
.viewsheds-auto .ui-spinner-disabled, .keepouts-auto .ui-button-disabled {
    background-color: var(--light-gray);
}
.viewsheds-auto .ui-slider-disabled > .ui-slider-handle {
    background-color: var(--dark-gray);
}
.viewsheds-auto .ui-slider-disabled > .ui-slider-range {
    background-color: var(--dark-gray);
}
.viewsheds-auto .ui-state-disabled {
    opacity: .5;
}
.viewsheds-auto .auto-viewshed-inputs {
    width: 100%;
}
.viewsheds-auto .ui-widget.ui-widget-content {
    margin-right: 5px;
}

.pvwatts-info {
    margin-top: 6px;
}
.pvwatts table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.pvwatts table td {
    border: 1px solid var(--dark-gray);
    padding: 5px;
}
.pvwatts table .annual td {
    border: none;
    color: var(--orange);
    font-weight: bold;
}
.manual-array-panel {
    display: none;
}
.manual-array-snap {
    display: none;
}
.manual-array-options {
    background: var(--gray);
    padding: 5px;
    margin-bottom: 10px;
}
.roof-planes .spacer {
    padding: 5px;
}
.section-viewsheds .actions {
    margin-top: 15px;
}
.shading-container .hidden {
    display: none;
}

@keyframes fadeIn {
    0%    { opacity:0; }
    100%  { opacity:1; }
}


/* div holding list or table view */
#viewshed-display-options {
    float: right;
}

/* Viewshed actions dropdown menu button */
button#show-viewshed-actions-dropdown {
    margin: auto;
    padding-left: 5px;
    background-color: transparent;
    color: var(--black);
}

.select-all-viewsheds {
    margin-left: 5px;
}

/* The container <div> - needed to position the dropdown content */
#viewshed-actions {
    position: relative;
    display: inline-block;
}

#viewshed-actions-list {
    padding: 5px;
    margin: 0px;
    list-style-type: none;
}

#viewshed-actions-list li {
    font-size: 1rem;
    padding: 5px;
}

/* Dropdown Content (Hidden by Default) */
#viewshed-actions-dropdown {
    display: none;
    position: absolute;
    background-color: var(--white);
    width: fit-content;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 999;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
}

/* Links inside the dropdown */
.viewshed-actions-dropdown-content li {
    text-decoration: none;
    display: block;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}

.viewshed-bulk-actions {
    display: flex;
    align-items: center;
    border: 1px solid var(--light-gray);
    height: 30px;
    border-radius: 8px;
}

.viewshed-action {
    border: none;
    display: flex;
    border-radius: 8px;
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: var(--white);
}

.viewshed-action:hover {
    background-color: var(--light-gray);
}

.viewshed-action:disabled {
    color: var(--gray);
    cursor: not-allowed;
    background-color: var(--white);
}

#remove-viewsheds:enabled {
    background-color: var(--red);
    color: var(--white);
}

.viewshed-action-text {
    padding-left: 10px;
}

.viewshed-action-icon {
    padding-top: 2.5px;
}

#viewshew-view-actions {
    display: flex;
    justify-content: space-between;
    height: 30px;
}

.viewshed-options-container {
    display: flex;
    gap: 1rem;
}

div#displayed-value-options {
    display: block;
}

#displayed-value-options .sw-multiway {
    margin: 0;
}

#displayed-value-options .sw-multiway.disabled .sw-option {
    cursor: not-allowed !important
}

#displayed-value-options .sw-multiway .sw-option, .sw-option.active {
    min-width: 3rem;
    line-height: 1rem;
}

#displayed-value-options .sw-multiway .sw-option > i {
    padding: 0 3px;
}

.model-list {
    margin: -3px 0 0 0;
    max-height: 28vh;
    padding-inline-start: 0;
    overflow-x: auto;
    max-height: 16vh;
    /* overflow-y: hidden; */
}
.model-list li {
    list-style: none;
    padding: 5px;
    border: 1px solid #e3e3e3;
    margin: 5px 0;
    line-height: 18px;
    box-shadow: 2px 6px 32px -13px rgba(0,0,0,.25);
}
.model-list li .info {
    float: left;
}
.model-list li .actions {
    float: right;
}
.model-list li .actions button {
    margin-left: 5px;
}

/*# sourceMappingURL=index.35eb725a6e4404bb52e6.css.map*/