:root {
    --picBodies-order: 0;
    --picCircuits-order: 100;
    --picLights-order: 105;
    --picVirtualCircuits-order: 110;
    --picPumps-order: 5;
    --picChemistry-order: 10;
    --picSchedules-order: 15;
    --picFilters-order: 17;
    --picBodies-display: block;
    --picCircuits-display: block;
    --picLights-display: block;
    --picVirtualCircuits-display: block;
    --picPumps-display: block;
    --picChemistry-display: block;
    --picSchedules-display: block;
    --picFilters-display: block;
    --number-of-columns: 2;
    --dashContainer2-display: block;
    --dashContainer3-display: block;
    --show-time-remaining: inline-block;
}
div.picPickList > div.picPickList-value:empty:before {
    content:attr(data-placeholder);
    color:gray;
}
div.picPickList.disabled > div.picPickList-value {
    opacity: .5;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
div.picPickList.disabled > div.picPickList-drop {
    display: none;
}
.disable-overlay {
    position:absolute;
    width: 100%;
    height: 100%;
    pointer-events:all;
}

div.container1, div.container2, div.container3 {
    display: flex;
    flex-flow: column;
}
div.picAppSettings {
    max-width: unset;
}
div.picOptionButton > span,
div.picActionButton > span {
    margin-right: .2rem;
    margin-left: .2rem;
    line-height:1rem;
    vertical-align:middle;
}
div.picFeature, div.picVirtualCircuit {
    min-width:10.4rem;
}
div.picFeatureGrid {
    /* width: 100%; */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    display: grid;
  }
div.picFeatures div.picFeatureGrid > div.picCircuit[data-showinfeatures=false],
div.picFeatures div.picFeatureGrid > div.picCircuitGroup[data-showinfeatures=false] {
    display: none;
}
select, input[type=text], fieldset {
    font-size:1rem;
}
div.picLights > div.picFeatureGrid > div.picCircuit[data-showinfeatures=true] {
    display: none;
}
div.picOptionButton > i {
    margin-left:.4rem;
    vertical-align:middle;
}
div.picIconRight {
    display: inline-block;
    float: right;
    cursor: pointer;
}
div.picTab {
    padding: 4px;
    display: inline-block;
    border-bottom: none;
    cursor: pointer;
    margin-bottom: -1px;
    user-select: none;
}
div.picTabContents {
    padding:.2rem;
    margin-bottom:-1px;
}
div.picTabSelected {
    border-bottom:solid 3px transparent;
    z-index:101;
    margin-bottom:-2px;
}
div.picPopoverBody {
    padding:.2em;
}
i.picDropdownButton {
    float:right;
}
div.picOption {
    cursor:pointer;
}
div.picPopover {
    z-index:101;
    padding: .5em;
    display: none;
    position: absolute;
    user-select: none;
    margin:0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
div.picControlPanelTitle {
    white-space: nowrap;
}
div.picChemistry {
    order:var(--picChemistry-order);
    display: var(--picChemistry-display) !important;
}
div.picController {
    /*min-width:calc(22.5rem*var(--number-of-columns));*/
}
div.picChemistry label.picInline-label {
    min-width:2rem;
    display:inline-block;
    margin-left:.75rem;
}
div.picChemistry span.picStatus {
    margin-left:1.2rem;
}
div.picChlorinator[data-status=commlost] > div.picChlorStatus,
div.picChlorinator[data-status=ok] > div.picChlorStatus {
    display: none;
}
div.picController > div.picControllerLine {
    font-size:.9rem;
}
div.picController > div.picControllerLine label {
    display:inline-block;
    min-width:4rem;
}
    div.picController > div.picControllerLine span.picPercentData {
        margin-left:.7rem;
    }
@-webkit-keyframes burst {
    0% {
        opacity: .6
    }

    50% {
        -webkit-transform: scale(1.8);
        transform: scale(1.8);
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes burst {
    0% {
        opacity: .6
    }

    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0
    }

    100% {
        opacity: 0
    }
}
.burst-animated {
    -webkit-animation: burst 1s infinite linear;
    animation: burst 1s infinite linear
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
@keyframes flicker {
    0% {
        transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
    }

    20% {
        transform: rotate(1deg);
    }

    40% {
        transform: rotate(-8deg);
    }

    60% {
        transform: rotate(4deg) scaleY(1.04);
    }

    80% {
        transform: rotate(-7deg) scaleY(0.92);
    }

    100% {
        transform: rotate(7deg);
    }
}
.picHeaterStatusIcon {
    display:none;
}
.flicker-animated {
    -webkit-animation: flicker 1s infinite linear;
    animation: flicker 1s infinite linear
}
@keyframes flicker1 {
    0% {
        transform: rotate(4deg);
    }

    20% {
        transform: rotate(-1deg);
    }

    40% {
        transform: rotate(8deg) scaleX(.87);
    }

    60% {
        transform: rotate(-4deg) scaleY(1.04);
        opacity:.8;
    }

    80% {
        transform: rotate(7deg) scaleY(0.92);

    }

    100% {
        transform: rotate(-7deg);
    }
}
.flicker1-animated {
    -webkit-animation: flicker1 1s infinite linear;
    animation: flicker1 1s infinite linear
}
div.picFeatures, div.picLights {
    display:block;
}
div.picFeature.btn {
    position: relative;
}
div.picCircuits{
    order :var(--picCircuits-order);
    display: var(--picCircuits-display) !important;
}
div.picVirtualCircuits{
    order :var(--picVirtualCircuits-order);
    display: var(--picVirtualCircuits-display) !important;
}
div.picFilters {
    order: var(--picFilters-order);
    display: var(--picFilters-display) !important;
}
div.picLights{
    order :var(--picLights-order);
    display: var(--picLights-display) !important;
}
div.picCircuits > div:nth-child(n+2) {
    margin-top:.3rem;
}

div.divCircuitEndTime{
    display: var(--show-time-remaining) !important;
}
div.outerBodyEndTime label.picInline-label {
    min-width:7em;
    display:inline-block;
}
span.picCircuitEndTime {
    font-size:.585em;
    width:auto;
    white-space:nowrap;
    text-overflow:ellipsis;
    display: var(--show-time-remaining) !important;
    font-style: italic;
    position: absolute;
    right: 0px;
    margin-right: 5px;
    padding-left: .2em;
}
span.picLightEndTime {
    font-size:.585em;
    width:auto;
    white-space:nowrap;
    text-overflow:ellipsis;
    display: var(--show-time-remaining) !important;
    font-style: italic;
    position: absolute;
    right: 0px;
    margin-right: 20px;
    padding-left: .2em;
}
div.picVirtualCircuit {
    white-space: nowrap;
    display: inline-block;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-right: .2rem;
    padding-left: 0px;
    min-width: 10.4rem;
    margin: .1rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
    div.picFeature > div.picToggleButton,
    div.picFeature > div.picFeatureLabel,
    div.picVirtualCircuit > div.picFeatureLabel,
    div.picVirtualCircuit > div.picToggleButton,
    div.picActionButton > div.picOptionToggle,
    div.picOptionButton > div.picOptionToggle {
        display: inline-block;
        line-height: 1rem;
        vertical-align: middle;
    }
div.picFeature > div.picToggleButton, div.picVirtualCircuit > div.picToggleButton {
    margin-right:.2em;
    vertical-align:middle;
}
div.picBodies {
/*     max-width: 40rem;
    min-width: 22rem; */
    order: var(--picBodies-order);
    display: var(--picBodies-display) !important;
}
label.picInline-label {
    padding-right:.5em;
}
div.picBody {
    font-size: .9rem;
    white-space:nowrap;
}
div.picBody > div {
    display:inline-block;
    padding:.35em;
    vertical-align:middle;
}
div.picBody > div.picBodyTemp {
    text-align:center;
}
label {
    cursor:inherit;
}
div.picBodySetpoints {
    cursor:pointer;
}
div.picBodySetpoints label.picInline-label {
    min-width:7em;
    display:inline-block;
}
div.picBodyIcon {
    text-align:center;
}
div.picBodyIcon div.picIndicator {
    height:2.5em;
    width:2.5em;
    cursor:pointer;
}
div.picPumps {
    order:var(--picPumps-order);
    display: var(--picPumps-display) !important;
}
div.picPumps, div.picChemistry {
    vertical-align: top;
    /* max-width: 35rem; */
}
div.picSchedules{
    order:var(--picSchedules-order);
    display :var(--picSchedules-display) !important;
}
div.picPump, div.picSchedule {
    padding-top: .1rem;
    padding-bottom: .1rem;
}
div.picPump > div, div.picSchedule > div {
    display: inline-block;
}
div.picChlorSettings div.picSetpoint {
    margin-bottom:.27rem;
}
div.picChlorSettings label.picSetpointText {
    min-width:7rem;
    margin-left:.7rem;
}
div.picSuperChlorBtn {
    white-space: nowrap;
    display:table;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-right: .2rem;
    min-width: 10.4rem;
    margin: 0px auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}
div.picSuperChlorBtn > div {
    display:inline-block;
    margin: 0px;
    vertical-align:middle;
}
div.picSuperChlorBtn > div.picIndicator {
    margin-left:.2rem;
    margin-right:.2rem;
}
div.picSuperChlorBtn div.picSuperChlorRemaining {
    font-size:.7rem;
    font-style:italic;

}
table.picPumpPrograms,
table.picSchedDays {
    font-size:.7em;
    text-align:center;
    border-collapse:collapse;
    display:inline-table;
}
    table.picPumpPrograms > tbody > tr:nth-child(1),
    table.picSchedDays > tbody > tr:nth-child(1) {
        color: white;
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#FF159FCF, EndColorStr=#FF13647F);
        background-image: -ms-linear-gradient(top, #159FCF, #13647F);
        background-image: -moz-linear-gradient(top, #159FCF, #13647F);
        background-image: -webkit-linear-gradient(top, #159FCF, #13647F);
        background-image: linear-gradient(top, #159FCF, #13647F);
    }
    table.picPumpPrograms > tbody > tr:nth-child(2) > td,
    table.picSchedDays > tbody > tr:nth-child(2) > td {
        border: solid 1px silver;
    }
label.picPumpPrograms,
label.picSchedDays {
    margin-left: 1rem;
    font-size: .9em;
}
span.picSchedTime {
    font-size:.9em;
    width:9.25em;
    white-space:nowrap;
    text-overflow:ellipsis;
    display:inline-block;
}


label.picPumpName, label.picScheduleName {
    display:inline-block;
    min-width:27%;
    white-space:nowrap;
    overflow:hidden;
    vertical-align:middle;
    text-overflow:ellipsis;
    width:27%;
}
label.picUnits, span.picUnits {
    padding-left:.1em;
    padding-right:.1em;
    font-size:.8em;
}
div.picPump, div.picChlorinator, div.picSchedule, div.picChemController, div.picChemDoser, div.picBodyFilter {
    font-size:.9rem;
    cursor:pointer;
}
    div.picBodyFilter > span.picFilterPercentage {
        display: inline-block;
        float: right;
    }
    div.picBodyFilter > label.picFilterName,
    div.picChlorinator > label.picChlorinatorName,
    div.picChemController label.picControllerName,
    div.picChemDoser label.picDoserName {
        display: inline-block;
        width: 30%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-x: hidden;
        vertical-align: bottom;
    }
    div.picChemDoser label.picInline-label,
    div.picChemController label.picInline-label {
        display: inline-block;
        padding-right:.25rem;
        min-width:0;
        width:auto;
    }
    div.picChemDoser div.chemdoser-status,
    div.picChemController div.chemcontroller-status {
        padding-left:1rem;
    }
    div.picChemDoser div.chemdoser-warning,
    div.picChemController div.chemcontroller-warning {
        padding-left:1rem;
    }
        div.picChemDoser div.chemdoser-warning > i,
        div.picChemController div.chemcontroller-warning > i {
            color: red;
            padding-right: .25rem;
        }
div.picIndicator {
    width: 1em;
    height: 1em;
    margin-left: .15em;
    margin-right: .15em;
}
div.picPump div.picData {
    width:5em;
    text-align:right;
}
div.picDisconnected {
    opacity:.4;
}
div.picController {
    opacity:1;
}
div.picValueSpinner {
    user-select: none;
    display: inline-block;
    white-space:nowrap;
}
div.picValueSpinner > label {
    vertical-align:middle;
    display:inline-block;
}
div.picValueSpinner > input.picSpinner-value {
    margin:0px;
    font-size:1.1rem;
    padding-top:0px;
    padding-bottom:0px;
    vertical-align:middle;
    text-align:center;
}
div.picSpinner-value {
    font-size: 1.1rem;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}
span.picSpinner-units {
    display:inline-block;
    margin-left:.15rem;
    vertical-align:middle;
    font-size: 1em !important;
    padding-left:0px !important;
    padding-right:0px !important;
}
    div.picValueSpinner.picPumpSpeed {
        margin-left: 1em;
        margin-right: .2em;
    }

div.picSpinner-up, div.picSpinner-down {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    font-size:.57em;
    line-height:1.4rem;
}
div.picSpinner-value {
    display: inline-block;
    padding-left: .2em;
    padding-right: .2em;
    vertical-align: middle;
    height: 1.4rem;
    line-height:1.4rem;
    width: 2.5em;
    text-align: center;
}
div.picFileUpload,
div.picPickList {
    user-select: none;
    display: inline-block;
}
label.picFileUpload-label,
div.picPickList > label {
    padding-right:.25rem;
    white-space: nowrap;
    text-overflow:ellipsis;
    vertical-align:middle;
    display:inline-block;
}
div.picFileUpload-choose,
div.picPickList-drop {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.4rem;
}
div.picFileUpload-filename,
div.picPickList-value {
    display: inline-block;
    padding-left: .2em;
    padding-right: .2em;
    vertical-align: middle;
    height: 1.4rem;
    line-height:1.4rem;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.picFileUpload-file {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}
div.picPickList-value.editable {
    padding:0px;
}
input.picPickList-value {
    border: none;
    border-width: 0px;
    margin-left: -.2em;
    margin-right: -.2em;
    padding-left: .2em;
    padding-right: .2em;
    padding-bottom:0px;
    margin-bottom:0px;
    margin-top:0px;
    width:100%;
    height:100%;
    margin:0px;
    display:block;
}
div.picPickList-options.dropdown-panel {
    overflow:hidden;
}
div.picPickList-options {
    position: absolute;
    z-index: 100;
}
    div.picPickList-options table.optOuter {
        height:100%;
        width:100%;
    }
    div.picPickList-options span.optText {
        padding-left:.25rem;
        padding-right:.25rem;
    }
    div.picPickList-options > table > tbody > tr.optHeader > td {
        overflow: hidden;
        box-sizing:border-box;
    }
    div.picPickList-options table {
        border-collapse: collapse;
        box-sizing:border-box;
    }
    div.picPickList-options td {
        box-sizing:border-box;
    }
    div.picPickList-options table.optBody {
        cursor:pointer;
        width:100%;
        table-layout:auto;
    }
    div.picPickList-options tr.optBody {
        height:100%;
    }
        div.picPickList-options div.optBody {
            position: relative;
            height: 100%;
            width: 100%;
            overflow:hidden;
            vertical-align:top;
            margin:0;
        }
            div.picPickList-options div.optBody > div {
                position: absolute;
                height: 100%;
                width: 100%;
                overflow-y: auto;
                margin: 0;
            }
    div.picPickList-options table.optHeader {
        width: 100%;
    }
div.picFieldTip {
    position:absolute;
}
    div.picFieldTip.top::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
        background: rgb(252,234,187);
        background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
    }

    div.picFieldTip.bottom::after {
        content: " ";
        position: absolute;
        bottom: 100%; /* At the top of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent orangered transparent;
        background: rgb(252,234,187);
        background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
    }
    div.picFieldTip.right::after {
        content: " ";
        position: absolute;
        top: 50%;
        right: 100%; /* To the left of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent orangered transparent transparent;
        background: rgb(252,234,187);
        background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
    }
    div.picFieldTip.left::after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 100%; /* To the right of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent orangered;
        background: rgb(252,234,187);
        background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
    }

div.picFieldTip-message {
    background: rgb(252,234,187);
    background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
    border: solid 1px gray;
    border-radius: 5px;
    padding: .25rem;
    box-shadow: 3px 3px 3px rgba(127,127,127,0.5);
    -webkit-box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.5);
    -moz-box-shadow: 3px 3px 3px rgba(127,127,127,0.5);
}
div.picStaticField,
div.picInputField {
    user-select: none;
    display: inline-block;
    line-height: 1.4rem;
}
    div.picStaticField > label,
    div.picInputField > label {
        display: inline-block;
        padding-right: .25rem;
    }
    div.picInputField.multiline > label {
        vertical-align: top;
    }
    div.picInputField > textarea {
        font-size:inherit;
        font-family:inherit;
        resize:none;
        line-height:1.4em;
    }
    div.picStaticField-value,
    div.picInputField > textarea,
    div.picInputField > input {
        line-height: 1.4em;
        padding-left: .15rem;
        padding-right: .15rem;
        padding-top: 0px;
        padding-bottom: 0px;
    }
div.picCheckbox {
    display:inline-block;
}
div.picCheckbox input[type=checkbox] {
    height: 1.25em;
    width: 1.25em;
    vertical-align: middle;
    margin-right: .25em;
    margin-left: .4em;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.4em;
}
div.picColorPicker,
div.picColorPicker-label,
div.picColorPicker-value {
    user-select: none;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 1.4rem;
    height: 1.4rem;
    display: inline-block;
}
div.picColorPicker-label {
    line-height: 1.4rem;
    vertical-align: middle;
}
div.picCheckbox > label {
    cursor: pointer;
    user-select: none;
    line-height:1.4rem;
    vertical-align:middle;
}
div.picAccordian-title {
    user-select: none;
    cursor: pointer;
    padding: .25rem;
}
div.picAccordian-titlecol > span {
    padding-left:.25rem;
    padding-right:.25rem;
}
div.picAccordian-titlecol {
    display:inline-block;
}
i.picAccordian-title-expand {
    float:right;
    display:inline-block;
    width:2rem;
    text-align:center;
}
div.picAccordian-contents {
    padding:.25rem;
}
div.overlay-message {
    display:inline-block;
    position: absolute;
    border: solid 1px gray;
    border-radius: 10px;
    padding: .5rem;
    max-width: 20rem;
    text-align: center;
    background: #fefdf5;
    background: -webkit-linear-gradient(-90deg, #fefdf5 0%, #F1DA36 65%);
    background: linear-gradient(180deg, #fefdf5 0%, #F1DA36 65%);
    box-shadow: 0px 0px 30px rgb(7, 7, 7);
    -webkit-box-shadow: 0px 0px 30px rgb(7, 7, 7);
    -moz-box-shadow: 0px 0px 30px rgb(7, 7, 7);
    filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color='silver',strength=3);
}
div.overlay-message > div {
    display:inline-flex;
    align-items: center;
    vertical-align:middle;
    margin-right:.5rem;
}
div.overlay-message div.pic-waiticon {
    transform:scale(.7);
    width:70px;
    height:70px;
    margin-left:-.5rem;
}
div.picServiceStatusMsg {
}
div.overlay-message > div > div.pic-waiticon > div.wait-roller div:after {
    background:darkgray;
    transform:scale(1.3);
    box-shadow:0px 0px 8px silver;
}
div.picServiceStatusMsg > div {
    vertical-align:middle;
    display:inline-block;
}
div.picStackTrace {
    font-size:.8rem;
    font-family:'Courier New';
    white-space:pre;
    width:100%;
    max-height:10rem;
    overflow:auto;
}
label.errorLabel {
    display: inline-block;
    width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align:top;
    white-space:nowrap;
    font-weight:bold;
}
span.errorMessage {
    display:inline-block;
    vertical-align:middle;
    max-width:20rem;
}
div.picChemTank {
    position: relative;
    display: inline-block;
    height: 100%;
    padding-top: 50px;
    margin: 0 auto;
    box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.5);
    -webkit-box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.5);
    -moz-box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.5);
    border-radius: 100%/25px;
    border: solid 1px gray;
    text-align: center;
    z-index: 1;
    border-top-left-radius: 100%/15px;
    border-top-right-radius: 100%/15px;
    margin-left: 24px;
    background: rgba(219,219,219,1);
    background: -moz-linear-gradient(left, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(219,219,219,1)), color-stop(1%, rgba(219,219,219,1)), color-stop(30%, rgba(254,254,254,1)), color-stop(79%, rgba(226,226,226,1)), color-stop(97%, rgba(209,209,209,1)), color-stop(100%, rgba(209,209,209,1)));
    background: -webkit-linear-gradient(left, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    background: -o-linear-gradient(left, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    background: -ms-linear-gradient(left, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    background: linear-gradient(to right, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#d1d1d1', GradientType=1 );
}
div.chemTank-liquid {
    height: calc(100% - 25px);
    position: absolute;
    top: 12.5px;
    display: block;
    width: 100%;
    z-index:-1;
    background: rgba(219,219,219,1);
    background: -moz-linear-gradient(left, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(219,219,219,1)), color-stop(1%, rgba(219,219,219,1)), color-stop(30%, rgba(254,254,254,1)), color-stop(79%, rgba(226,226,226,1)), color-stop(97%, rgba(209,209,209,1)), color-stop(100%, rgba(209,209,209,1)));
    background: -webkit-linear-gradient(left, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    background: -o-linear-gradient(left, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    background: -ms-linear-gradient(left, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    background: linear-gradient(to right, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 1%, rgba(254,254,254,1) 30%, rgba(226,226,226,1) 79%, rgba(209,209,209,1) 97%, rgba(209,209,209,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#d1d1d1', GradientType=1 );
}
.chemTank-level1 {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    border: solid 1px gray;
}
.chemTank-level {
    position: absolute;
    width: 100%;
    z-index: -1;
    background: #fefdf5;
    background: -webkit-linear-gradient(-90deg, #fefdf5 0%, #F1DA36 65%);
    background: linear-gradient(180deg, #fefdf5 0%, #F1DA36 65%);
    filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color='silver',strength=3);
    height: calc(50% + 25px);
    top: calc(50% - 12.5px);
    border: solid 1px gray;
    border-radius: 100%/25px;
    border-top: none;
}
.chemTank-alarmEmptyLevel {
    height: 25px;
    width: 100%;
}
.chemTank-alarmEmptyLevel:before {
        height: inherit;
        width: inherit;
        position: absolute;
        content: "";
        border-radius: 100%;
        border: dashed 1px red;
        transform-origin: 50% 100%;
        transform: translate(0, -50%);
        left: 0px;
    }
.chemTank-level-top {
    content: '';
    position: absolute;
    top: calc(50% - 12.5px);
    left: 0px;
    width: 100%;
    height: 25px;
    border: solid 1px gray;
    border-radius: 100%; /*makes circle on level*/
    background: #fefdf5;
    background: -webkit-linear-gradient(-90deg, #fefdf5 0%, #F1DA36 65%);
    background: linear-gradient(180deg, #fefdf5 0%, #F1DA36 65%);
    filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color='silver',strength=3);
}
    .chemTank-level1:before {
        content: '';
        position: absolute;
        top: 0;
        left: -1px;
        width: 100%;
        height: 15px;
        z-index: -1;
        height: 20%;
        border: solid 1px gray;
        border-radius: 100%; /*makes circle on level*/
        background: #fefdf5;
        background: -webkit-linear-gradient(-90deg, #fefdf5 0%, #F1DA36 65%);
        background: linear-gradient(180deg, #fefdf5 0%, #F1DA36 65%);
        filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color='silver',strength=3);
    }
div.picChemTank:before {
    content: '';
    width: 100%;
    height: 25px;
    border: solid 1px gray;
    border-radius: 100%; /*makes circle at top*/
    position: absolute;
    top: 0;
    left:-1px;
}
.chemTank-scale {
    border: solid 1px gray;
    width: 2px;
    position: absolute;
    margin: 0px auto;
    top: 16.5px;
    left: calc(20% - 1px);
    height: calc(100% - 12.5px);
    box-shadow: lightsteelblue .5px 0px inset;
}
.chemTank-scale-tick {
    border:solid 1px gray;
    width: 4px;
    position:absolute;
    left: calc(12% + 2px);
    height: 2px;
    transform: rotate(30deg);
}
div.picChemTank[data-chemtype=acid] div.chemTank-level {
    background: #ffb76b; /* Old browsers */
    background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 33%, #ff7f04 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 33%,#ff7f04 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 33%,#ff7f04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
}
div.picChemTank[data-chemtype=acid] div.chemTank-level-top {
    background: #ffb76b; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffb76b 0%, #ffa73d 33%, #ff7f04 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffb76b 0%,#ffa73d 33%,#ff7f04 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffb76b 0%,#ffa73d 33%,#ff7f04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div.picChemTank[data-chemtype=orp] div.chemTank-level {
    background: #ffff9e; /* Old browsers */
    background: -moz-linear-gradient(top, #ffff9e 0%, #ffff70 33%, #ffff2b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffff9e 0%,#ffff70 33%,#ffff2b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffff9e 0%,#ffff70 33%,#ffff2b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff9e', endColorstr='#ffff2b',GradientType=0 ); /* IE6-9 */
}
div.picChemTank[data-chemtype=orp] div.chemTank-level-top {
    background: #ffff9e; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffff9e 0%, #ffff70 33%, #ffff2b 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffff9e 0%,#ffff70 33%,#ffff2b 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffff9e 0%,#ffff70 33%,#ffff2b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff9e', endColorstr='#ffff2b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

label.chemTank-label {
    transform:rotate(-90deg);
    position:absolute;
    width:100%;
    display:block;
    left:-60%;
}
div.chem-balance-value {
    color:crimson;
    font-size:32pt;
    font-weight:bold;
    text-align:center;
    margin-left:-12px;
    margin-right:-12px;
}
div.picChemLevel {
    margin-top:1.77rem;
    margin-bottom:1rem;
}
label.chemLevel-label {
    display:inline-block;
    width:37px;
}
div.chemLevel-level {
    border-radius:5px;
    display:inline-block;
    width: calc(100% - 37px);
    height: 1rem;
    position:relative;
}
div.chemLevel-scale {
    position:relative;
    display:inline-block;
    height:1rem;
    border:solid 1px gray;
    margin-top:-1px;
}
div.chemLevel-lred {
    background-color:orangered;
}
div.chemLevel-lyellow {
    background-color:yellow;
}
div.chemLevel-green {
    background-color:lawngreen;
}
div.chemLevel-ryellow {
    background-color:yellow;
}
div.chemLevel-rred {
    background-color: orangered;
}
label.chemLevel-scale-label {
    position:absolute;
    margin-top:1rem;
    font-size:.7rem;
    display:inline-block;
    width:40px;
    margin-left:-20px;
    text-align:center;
}
div.chemLevel-level > div.chemLevel-target {
    position:absolute;
    margin-top:-18px;
    margin-left:-12px;
    width:24px;
    font-size:8pt;
    color:black;
    text-align:center;
}
div.chemLevel-level > div.chemLevel-value {
    position: absolute;
    margin-top: -40px;
    margin-left: -12px;
    width: 24px;
    font-size: 14pt;
    color:dodgerblue;
    text-align:center;
}
div.chemLevel-value > div.chemLevel-value-label {
    font-size:9pt;
    color:black;
    margin-bottom:-2px;
}

div.xxxx {
    background: rgb(246,248,249); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
}
div.warning-message {
    border: solid 1px black;
    border-radius: 5px;
    color: yellow;
    padding: 4px;
    background: rgba(248,80,50,1);
    background: -moz-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 53%, rgba(231,56,39,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,80,50,1)), color-stop(53%, rgba(241,111,92,1)), color-stop(100%, rgba(231,56,39,1)));
    background: -webkit-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 53%, rgba(231,56,39,1) 100%);
    background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 53%, rgba(231,56,39,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 );
}

  #appearance-order-col-1, #appearance-order-col-2, #appearance-order-col-3, #appearance-order-col-hidden {
    border: 1px solid #eee;
    width: 142px;
    min-height: 65px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #appearance-order-col-1 li, #appearance-order-col-2 li, #appearance-order-col-3 li, #appearance-order-col-hidden li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 130px;
  }
  .btn.disabled {
      opacity: .5;
  }
  @media screen and (max-width: 744px) {
    #appearance-order-col-1, #appearance-order-col-2, #appearance-order-col-3, #appearance-order-col-hidden {
    margin-right: 50%}
  }

  #appearance-order-col-2 {
      display: var(--dashContainer2-display);
  }
  #appearance-order-col-3 {
      display: var(--dashContainer3-display);
  }
  #appearance-order-col-hidden {
      background-color: lightgray;
      border: 1px dashed #eee;
      color: gray;
  }
.ui-sort-placeholder {
    min-height: 35px;
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620;
}
.slist-list[data-cancreate="false"] .btn-add,
.crud-list[data-cancreate="false"] .btn-add {
    display: none;
}

.slist-list[data-canedit="false"] .btn-edit,
.crud-list[data-canedit="false"] .btn-edit {
    display: none;
}

.slist-list[data-canremove="false"] .btn-remove,
.crud-list[data-canremove="false"] .btn-remove {
    display: none;
}

.slist-list[data-canclear="false"] .btn-clear,
.crud-list[data-canclear="false"] .btn-clear {
    display: none;
}

.slist-caption,
.crud-caption,
.list-caption {
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: solid 1px black;
    padding-top: 4px;
    padding-bottom: 4px;
}
div.slist-header,
div.crud-header {
    width:inherit;
}
tr.slist-header,
tr.crud-header {
}

    tr.slist-header > td:nth-child(n + 2),
    tr.crud-header > td:nth-child(n + 2) {
        border-left: solid 1px black;
    }

    tr.slist-header > td > span,
    tr.crud-header > td > span {
        padding-left: 2px;
        padding-right: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
    }

table.slist-table > tbody > tr {
    cursor: pointer;
}

    table.slist-table > tbody > tr > td > div,
    table.crud-table > tbody > tr > td > div {
        padding-left: 2px;
        padding-right: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: top;
    }

    table.slist-table > tbody > tr:nth-child(n+2) > td,
    table.crud-table > tbody > tr:nth-child(n+2) > td {
        border-top: solid 1px silver;
    }

    table.slist-table > tbody > tr > td:nth-child(n+2),
    table.crud-table > tbody > tr > td:nth-child(n+2) {
        border-left: solid 1px silver;
    }

div.crud-header {
    width: inherit;
    font-size: .8rem;
}

span.crud-row-btn {
    width: 1.37rem;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

.slist-header table,
.crud-header table {
    border-collapse: collapse;
    border-bottom: solid 2px black;
    width: inherit;
}

.slist-table,
.crud-table {
    border-collapse: collapse;
    width: inherit;
}

td.crud-buttons {
    width: 47px;
}

span.header-icon-btn {
    float: right;
    margin-right: 5px;
    cursor: pointer;
}
.slist-body {
    width:inherit;
}
table.crud-table {
    cursor:pointer;
}
div.pnl-restorebackup-fileattrs {
    font-size:.77rem;
}
div.pnl-restorebackup-fileattrs label {
    display: inline-block;
    width: 3rem;
    font-weight:bold;
}
div.picBody {
    position:relative;
}
div.picBody[data-covered=true]:before {
    content: "Covered";
    color: orangered;
    font-weight:bold;
    font-size:1em;
    width:100%;
    left:0;
    top:0;
    vertical-align:middle;
    display:block;
    line-height:1;
    margin-bottom:-1em;
}
div.systemdelays-list {
    display:inline-block;
    float:left;
    font-size:.7rem;
}
div.pic-waiticon { display: inline-block; }
div.pic-waiticon > .wait-roller {
    opacity:1;
    z-index:1000;
}
.wait-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .wait-roller div {
        animation: wait-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;
        box-sizing:border-box;
    }

        .wait-roller div:after {
            content: " ";
            display: block;
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: gray;
            margin: -4px 0 0 -4px;
        }

        .wait-roller div:nth-child(1) {
            animation-delay: -0.036s;
        }

            .wait-roller div:nth-child(1):after {
                top: 63px;
                left: 63px;
            }

        .wait-roller div:nth-child(2) {
            animation-delay: -0.072s;
        }

            .wait-roller div:nth-child(2):after {
                top: 68px;
                left: 56px;
            }

        .wait-roller div:nth-child(3) {
            animation-delay: -0.108s;
        }

            .wait-roller div:nth-child(3):after {
                top: 71px;
                left: 48px;
            }

        .wait-roller div:nth-child(4) {
            animation-delay: -0.144s;
        }

            .wait-roller div:nth-child(4):after {
                top: 72px;
                left: 40px;
            }

        .wait-roller div:nth-child(5) {
            animation-delay: -0.18s;
        }

            .wait-roller div:nth-child(5):after {
                top: 71px;
                left: 32px;
            }

        .wait-roller div:nth-child(6) {
            animation-delay: -0.216s;
        }

            .wait-roller div:nth-child(6):after {
                top: 68px;
                left: 24px;
            }

        .wait-roller div:nth-child(7) {
            animation-delay: -0.252s;
        }

            .wait-roller div:nth-child(7):after {
                top: 63px;
                left: 17px;
            }

        .wait-roller div:nth-child(8) {
            animation-delay: -0.288s;
        }

            .wait-roller div:nth-child(8):after {
                top: 56px;
                left: 12px;
            }

@keyframes wait-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}