/* input(2946,18): run-time error CSS1035: Expected colon, found '{'
input(9291,32): run-time error CSS1035: Expected colon, found '{'
input(10860,25): run-time error CSS1035: Expected colon, found '{'
input(11039,8): run-time error CSS1035: Expected colon, found '{' */
/*! ========================================================================
 * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
 * http://www.bootstraptoggle.com
 * ========================================================================
 * Copyright 2014 Min Hur, The New York Times Company
 * Licensed under MIT
 * ======================================================================== */


.checkbox label .toggle,
.checkbox-inline .toggle {
	margin-left: -20px;
	margin-right: 5px;
}

.toggle {
	position: relative;
	overflow: hidden;
}
.toggle input[type="checkbox"] {
	display: none;
}
.toggle-group {
	position: absolute;
	width: 200%;
	top: 0;
	bottom: 0;
	left: 0;
	transition: left 0.35s;
	-webkit-transition: left 0.35s;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.toggle.off .toggle-group {
	left: -100%;
}
.toggle-on {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 50%;
	margin: 0;
	border: 0;
	border-radius: 0;
}
.toggle-off {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
}
.toggle-handle {
	position: relative;
	margin: 0 auto;
	padding-top: 0px;
	padding-bottom: 0px;
	height: 100%;
	width: 0px;
	border-width: 0 1px;
}

.toggle.btn { min-width: 59px; min-height: 34px; }
.toggle-on.btn { padding-right: 24px; }
.toggle-off.btn { padding-left: 24px; }

.toggle.btn-lg { min-width: 79px; min-height: 45px; }
.toggle-on.btn-lg { padding-right: 31px; }
.toggle-off.btn-lg { padding-left: 31px; }
.toggle-handle.btn-lg { width: 40px; }

.toggle.btn-sm { min-width: 50px; min-height: 30px;}
.toggle-on.btn-sm { padding-right: 20px; }
.toggle-off.btn-sm { padding-left: 20px; }

.toggle.btn-xs { min-width: 35px; min-height: 22px;}
.toggle-on.btn-xs { padding-right: 12px; }
.toggle-off.btn-xs { padding-left: 12px; }


:root {
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cad5e2;
    --slate-400: #90a1b9;
    --slate-500: #62748e;
    --slate-600: #45556c;
    --slate-700: #314158;
    --slate-800: #1d293d;
    --slate-900: #0f172b;
    --slate-950: #020618;

    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;

    --neutral-50: #fafafa;
    --neutral-100: #f4f4f5;
    --neutral-200: #e4e4e7;
    --neutral-300: #d4d4d8;
    --neutral-400: #9f9fa9;
    --neutral-500: #71717b;
    --neutral-600: #52525c;
    --neutral-700: #3f3f46;
    --neutral-800: #27272a;
    --neutral-900: #18181b;
    --neutral-950: #09090b;

    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;
    --green-950: #052e16;

    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --amber-900: #78350f;
    --amber-950: #451a03;

    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;
    --red-950: #450a0a;

    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    --radius-lg: 8px;
}

body {
    color: var(--neutral-900);
}

table.stickyHeader,
.stickyHeader table {
    display: table;
    max-height: 100%;
    overflow: auto;
    position: relative;
    width: 100%;
}

.stickyHeader th {
    position: sticky;
    top: 0px;
}

.stickyHeader tfoot td,
.stickyHeader tr.footer td {
    position: sticky;
    bottom: 0px;
}

.stickyHeader.stickyHeaderBoxBorders td {
    box-shadow: inset 1px -1px lightgray;
}

.whiteHeader th {
    background-color: white;
    box-shadow: inset 1px 0 lightgray, 0 1px lightgray;
}

.whiteHeader th:first-of-type {
    box-shadow: inset 0 0 transparent, 0 1px lightgray;
}

.form-control-small {
    display: block;
    width: 100%;
    height: 29px;
    padding: 4px;
    font-size: 12px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control-small[disabled],
.form-control-small[readonly] {
    background-color: #eee;
    opacity: 1;
}

.filter-red {
    filter: brightness(0) invert(15%) sepia(69%) saturate(7495%) hue-rotate(357deg) brightness(89%) contrast(130%);
}

.filter-orange {
    filter: brightness(0) invert(50%) sepia(91%) saturate(1660%) hue-rotate(359deg) brightness(100%) contrast(107%);
}

.filter-green {
    filter: brightness(0) invert(30%) sepia(96%) saturate(2028%) hue-rotate(105deg) brightness(94%) contrast(105%);
}

.nomargin {
    margin: 0 !important;
}

.stretch {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}


:root {
    --zd-default-highlight: var(--blue-300);
    --zd-default-highlight-hover: var(--blue-200);
    /*--zd-true-view-height is set in javascript on the layout.cshtml page to be the 'correct' 100vh, since 100vh does not account for bookmark bars and other screen interferences in the view area''*/
    --zd-true-view-height: 100vh;
    --zd-border: 1px solid #ccc;
    --bootstrap-primary: #337ab7;
    --zd-box-shadow: 4px 4px 6px 0px rgb(0 0 0 / 15%);
    --zd-tree-width: 226px;
    --zd-default-highlight: #c4daff;
    --zd-navy: #002554;
    --zd-navy-light: #002554c2;
    --zd-white-on-navy: #e5e5e5;
    --zd-header-height: 50px;
}

/* synchronize web and mobile */
button.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.zd-active,
.zdActive {
    background-color: var(--zd-default-highlight);
}

button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}



.includeAlarms::after,
.has-alarm-col tbody td::after {
    content: ' \2B24';
    color: transparent;
    position: relative;
    text-decoration: none;
    display: inline-block;
    width: 8px;
    font: normal normal normal 10px/1;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 10px;
    margin-left: 1px;
    bottom: 2px;
}

.includeAlarms.allGood::after {
    content: '\f00c';
    color: #35b82b;
    text-align: left;
    left: -2px;
}

.includeAlarms.inAlarm::after,
.has-alarm-col tbody td.zdA::after,
.has-alarm-col tbody input.zdA::after {
    content: '\f12a';
    color: #d43f3a;
    text-align: left;
}

.includeAlarms.inComAlarm::after {
    content: '\f071';
    color: #ff6c00;
    text-align: left;
}

/* there are scenarios where you might want the alarm icon to respect inherited fontSize
   as they do in fieldGrid and list using the below implementation [alarmIndicator].
   possibe todo -- replace implementations of .includeAlarm icons with the .alarmIndicator
*/
.alarmIndicator::after {
    content: ' \2B24';
    color: transparent;
    text-decoration: none;
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.95em;
    width: 1em;
    text-align: center;
}

.alarmIndicator.allGood::after {
    content: '\f00c';
    color: #35b82b;
}

.alarmIndicator.inAlarm::after {
    content: '\f12a';
    color: #d43f3a;
}

.alarmIndicator.inComAlarm::after {
    content: '\f071';
    color: #ff6c00;
}

/* */

.view-name-container {
    display: grid;
    grid-template-columns: auto 50px;
}

.view-name-container>.rightCol {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 33% 33% 33%;
    padding-left: 4px;
}

.view-name-container>.rightCol>.topLine {
    width: 50%;
    border-right: solid 1px lightgray;
    border-top: solid 1px lightgray;
    margin-top: 70%;
    height: 40%;
    padding-top: 4px;
}


.view-name-container>.rightCol>.middle {
    margin-top: 30%;
    text-align: center;
    color: gray;
    font-size: 1.3em;
    cursor: pointer;
}

.view-name-container>.rightCol>.bottomLine {
    width: 50%;
    border-right: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    height: 40%;
}

.field-file-link {
    color: #5a5b5b;
    cursor: pointer;
    padding-left: 5px;
}

.field-file-link:hover {
    color: #0066ff
}

.zd-link,
.zd-link-hov:hover {
    color: #23527c;
    text-decoration: underline;
    cursor: pointer;
}

.zd-selected {
    background-color: rgb(196, 218, 255);
}

.zd-link-hov {
    cursor: pointer;
}


.view-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 220px;
    vertical-align: bottom;
}

.selected .view-ellipsis {
    max-width: 250px;
}

.lb-manual-entry {
    color: blue;
    cursor: pointer !important;
}

.show-on-hov:not(:hover) .show-target {
    color: transparent;
}

.truncatedFieldValue {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sort-icon {
    cursor: pointer;
}

.hide-sort::after {
    visibility: hidden;
    content: "\e150";
    bottom: 5px;
    right: 8px;
    display: block;
    font-family: 'Glyphicons Halflings';
}

.sort-icon::after {
    content: "\e150";
    bottom: 5px;
    right: 8px;
    display: block;
    font-family: 'Glyphicons Halflings';
    opacity: 0.5;
}

.sort-icon.asc::after {
    content: "\e155";
}

.sort-icon.desc::after {
    content: "\e156";
}

.scroll-area {
    overflow-y: auto;
}

.float-box {
    z-index: 999;
    position: fixed;
    background-color: whitesmoke;
    border-radius: 3px;
    min-width: 150px;
    cursor: default;
    text-align: left;
    border: 1px solid #9a9a9a;
    padding: 8px;

}

.float-box .scroll-area {
    max-height: 60vh;
}


@media (max-height:800px) {
    .float-box .scroll-area {
        max-height: calc(70vh - 45px);
    }
}

.ellipsis-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.verticallyCentered {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flexbox {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flexbox .flexheader {
    flex: 0 1 auto;
}

.flexbox .flexcontent {
    flex: 1 1 auto;
}

.flexbox .flexfooter {
    flex: 0 1 auto;
}

.gridBurger {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
}

.gridBurgerNI {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
}

.gridBurgerNoFooter {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
}

.gridBurgerNoFooterNI {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
}

/* Works on Firefox */
.thin-scrollbar {
    scrollbar-width: thin;
}

/* Works on Chrome, Edge, and Safari */
.thin-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.thin-scrollbar::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cdcdcd;
}

button.btn-success {
    font-family: arial, sans-serif;
    color: white;
    font-weight: 500;
}

button.btn-success:not(.green) {
    background-color: #1a9ece;
    border-color: #1a9ece;
}

button.btn-success:not(.green):hover,
button.btn-success:not(.green):active,
button.btn-success:not(.green):focus,
button.btn-success:not(.green):active:focus,
button.btn-success:not(.green)[disabled]:hover,
button.btn-success:not(.green)[disabled] {
    background-color: #188ab4;
    border-color: #1a9ece;
}

.rel-date-selector.showDays {
    display: grid;
    grid-template-columns: 1fr 65px;
    gap: 10px;
}

.rel-date-selector:not(.showDays) {
    display: grid;
    grid-template-columns: 1fr;
}

tr.alt-color td,
tr.alt-color td.location,
.alt-color tr:nth-child(2n) td,
.alt-color tr:nth-child(2n) td.location {
    background-color: #e8e8e8;
}

.table-hov tr:hover td,
tr.row-hov td,
tr:nth-child(2n).row-hov td {
    background-color: #c4daff;
}

.blue-bold {
    height: 40px;
    line-height: 24px;
    font-weight: bold;
    font-size: 14px;
    color: cornflowerblue;
}

.displayFlex {
    display: flex;
}

.flexRow {
    display: flex;
    flex-direction: row;
}

.flexColumn {
    display: flex;
    flex-direction: column;
}

select:not(:disabled) {
    background-color: white;
}

select:disabled {
    background-color: #eee;
}

.warningIcon {
    color: rgba(255, 166, 0, 0.4);
    font-size: 20px;
    cursor: pointer;
}

.vCenterMargin {
    margin: auto 0;
}

.pointer {
    cursor: pointer;
}

.pointer[disabled] {
    opacity: .65;
    cursor: not-allowed;
}

.sysAdmin {
    color: #ffa500;
}

label.vCenter-hRight,
.vCenter-hRight label {
    text-align: right;
    margin: auto 0;
    padding: 0
}

.color-box {
    width: 20px;
    height: 20px;
    margin: auto 0px
}


.gridBurgerNoHeader {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
}

.drop-on-hover:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

.drop-on-hover {
    position: relative;
}

.drop-on-hover ul {
    padding: 0;
    position: absolute;
    top: 59px;
    left: 0;
    display: none;
    opacity: 0;
    visibility: hidden;
    box-shadow: 1px 1px 1px #B8B8B8;
    background-color: white;
}

.drop-on-hover ul li {
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 15px;
    padding-right: 15px;
}

.drop-on-hover ul li:hover {
    background-color: var(--zd-default-highlight);
}


.grid-two-col {
    display: grid;
    grid-template-columns: 50% 50%;
}

.grid-two-col-flex-fr {
    display: grid;
    grid-template-columns: 1fr min-content;
}

.flex-float-right {
    display: flex;
    align-items: end;
    justify-content: end;
}

.tbl-top-opts {
    display: grid;
    grid-template-columns: 200px 1fr;
}

.flexRight {
    flex-grow: 1;
    text-align: right;
}

.flexModal .zdVueModal-header,
.zdVueModal-footer {
    flex: 0 1 auto;
}

.flexModal .zdVueModal-body {
    flex: 1 1 auto;
}

.flexModal .zdVueModal-container {
    display: flex;
    flex-direction: column;
}

li.disabled {
    opacity: .5;
}

li.disabled:hover {
    cursor: no-drop;
    background-color: unset;
}

.checkerboard {
    background: repeating-conic-gradient(rgb(128 128 128 / 10%) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
}

.previewWatermark {
    color: red;
    position: fixed;
    top: calc(100% - 80px);
    right: 20px;
    z-index: 100000;
    opacity: .3;
}

.iconOverlay {
    background-color: #002554;
    font-size: 10px;
    position: absolute;
    top: 11px;
    left: 35px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    padding: 1px;
}

.iconOverlay.mobile {
    background-color: #f8f8f8;
    display: block;
    font-size: 8px;
    top: 5px;
    left: 6px;
    width: 10px;
    height: 10px;
}

.DropdownButtonSmall ul.export-ul-size-left {
    position: absolute;
    right: 0px;
    left: auto;
    top: 32px;
}

@media (max-width: 1366px) {
    .export-text-hide-small {
        display: none;
    }
}

.apiErrorText {
    padding: 10px;
    color: red;
    font-size: 14px;
    word-wrap: break-word;
    max-width: 100%;
    white-space: normal;
    overflow: auto;
}

ul.DropdownMenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

.DropdownMenu li {
    padding: 6px 12px;
    cursor: pointer;
}

.DropdownMenu li:hover {
    background-color: var(--zd-default-highlight);
}

.code-editor {
    font-family: "Consolas", "Menlo", "Courier New", monospace;
    font-size: 13px;
    color: var(--neutral-900);
}

.m-auto-0 {
    margin: auto 0;
}

.m-t-5 {
    margin-top: 5px;
}

.m-l-15 {
    margin-left: 15px;
}

.m-l-10 {
    margin-left: 10px;
}

.p-r-5 {
    padding-right: 5px;
}

.p-l-10 {
    padding-left: 10px;
}

.inline-block {
    display: inline-block;
}

.grid-c-2-span4 {
    grid-column: 2 / span 4;
}

.grid-c-2-span2 {
    grid-column: 2 / span 2;
}

.font-normal {
    font-weight: normal;
}

.font-bold {
    font-weight: bold;
}

.font-size-15 {
    font-size: 15px;
}

.red {
    color: red;
}

.green {
    color: green;
}

.darkgrey {
    color: darkgrey;
}

.blue {
    color: blue;
}
/* formerly zdDashboards.css */

.db-component {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
}

    .db-component.preview,
    .db-component.mobile {
        display: grid;
        height: 100%;
        grid-template-rows: auto;
    }

.db-body {
    height: 100%;
    max-height: 100%;
}

.db-menu {
    width: 100%;
    border-bottom: 1px solid lightgray;
    padding: 6px 20px;
    font-size: 1.25em;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.db-wrapper {
    margin: 5px 0px 0px 5px;
    min-width: calc(100% - 42px);
    min-height: calc(100% - 10px);
}

.db-menu-spacer {
    display: inline-block;
    margin: 0px 15px;
}

.db-menu-item {
    cursor: pointer;
    display: inline-block;
}

.db-grid {
    font-size: 12px;
    white-space: nowrap;
}

.minifyHeader {
    margin: auto;
    text-align: center;
    font-weight: bold;
    padding-top: 3px;
    margin-bottom: 8px;
    color: #615d5d;
    border-bottom: solid 1px #615d5d;
}

.header-text {
    font-weight: bold;
    text-align: left;
    font-size: 12px;
}

.db-widget {
    background-color: white;
    padding: 0px;
    border-bottom: 1px solid #a9a9a9;
}


    .db-widget.frameless {
        background-color: transparent;
        padding: 0px;
        border: dotted 1px transparent;
        grid-template-rows: 1fr;
    }

    .selectedElement {
        border: 2px dashed blue;
    }
    .startElement {
        border: 2px dashed green;
    }
    .endElement {
        border: 2px dashed red;
    }

    .db-widget.disableGridSnap:not(.is-mobile) {
        position: absolute;
    }


    .db-widget.frameless.ui-draggable-dragging {
        background-color: rgba(0,0,0,.10);
    }

.db-widget-header {
    height: 35px;
    width: 100%;
    font-size: 16px;
    padding: 5px 10px;
    font-weight: bold;
    background-color: var(--zd-navy-light);
    color: white;
}

    .db-widget-header.frameless {
        position: fixed;
        width: unset;
        height: 20px;
        font-size: 16px;
        padding: 0px 3px;
        display: none;
        background-color: whitesmoke;
        border: solid 1px #c0c0c0;
    }

.db-body .framelessWidgetMenu {
    position: fixed;
    width: unset;
    font-size: 16px;
    padding: 3px;
    background-color: whitesmoke;
    border: solid 1px #939393;
}

.db-body .framelessWidgetMenu .db-widgetButton,
.dashboard-widget-config .db-widgetButton {
    color: lightgray;
}

.db-widget-header.frameless.headersVisibe {
    z-index: 1049;
}



.db-widgetButton, .db-widgetButtonFilter, .db-widgetButtonMaximize {
    cursor: pointer;
    color: white;
}

    .db-widget-header:not(.is-mobile) .db-widgetButton:hover,
    .db-widget-header:not(.is-mobile) .db-widgetButtonFilter:hover {
        color: dodgerblue;
    }

.db-widget-header.frameless .db-widgetButton, .db-widget-header.frameless .db-widgetButtonFilter {
    color: #a3a3a3;
}

    .db-widget-header.frameless .db-widgetButton:hover, .db-widget-header.frameless .db-widgetButtonFilter:hover {
        color: #414040;
    }

div.db-widgetCurrentLayer {
    font-size: 16px;
    margin-top: -2px;
    color: lightgray;
    padding-right: 20px;
}

span.db-widgetCurrentLayer {
    margin-top: -1px;
}


.db-widget-delete {
    color: rgba(255, 0, 0, 0.36);
}

    .db-widget-delete:hover {
        color: red;
    }



.db-loading {
    display: block;
    margin: auto;
}

/*keep the loading spinner from going huge inside a widget*/
div.stretch img.db-loading {
    max-width: 30%;
    border: none;
}


.db-loading-small {
    display: block;
    margin: auto;
    width: 30px;
}

.db-widget-body {
    width: 100%;
    padding: 10px 10px 0 10px;
    overflow-y: auto;
    border-left: 1px solid #a9a9a9;
    border-right: 1px solid #a9a9a9;
}

    .db-widget-body .default-full-screen, .db-widget .default-full-screen {
        position: fixed;
        top: 50px;
        bottom: 0;
        right: 0;
        left: 0;
        background: white;
        z-index: 10000;
        width: 100vw !important;
        height: calc(100vh - 50px) !important;
        margin: 0px !important;
    }

.full-screen-close {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 10000;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-widget-body.frameless {
    height: 100%;
    width: 100%;
    padding: 0px;
    overflow: hidden;
    border: none;
}

.db-widget-body.with-dt {
    height: calc(100% - 50px);
}

.db-widget-body-main {
    height: 100%;
}

    .db-widget-body-main.with-dt {
        height: calc(100% - 20px);
        overflow-y: auto;
    }


/*start dbSummaryGrid*/
.dbSummaryGrid-table {
    width: 99%;
}

.db-widget.frameless .dbSummaryGrid-table.fieldGrid {
    width: 99%;
}


.dbSummaryGrid-table th {
    text-align: center;
    font-size: 12px;
}

.dbSummaryGrid-table.minified th {
    text-align: right;
    font-size: 11px;
}

.dbSummaryGrid-table tr td {
    text-align: right;
    padding: 5px 0px 3px 5px;
    border-bottom: 1px solid lightgray;
    font-size: 12px;
}

/* fieldGridOnly */

.dbSummaryGrid-table.fieldGrid th {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    white-space: normal;
    word-wrap: break-word;
}

.dbSummaryGrid-table.fieldGrid tr td {
    border: solid 1px lightgray;
    padding: 2px 4px;
}

    .dbSummaryGrid-table.fieldGrid tr td.rowLabel {
        background-color: unset;
        text-align: left;
        font-weight: 500;
        white-space: nowrap;
        border: none;
        font-weight: bold;
    }

.dbSummaryGrid-table.fieldGrid tr.fieldGridTotals td {
    border: none;
    font-weight: bold;
}


.fieldGridStyleButtons {
    min-width: 120px;
    text-align: left;
    padding: 2px 6px;
    font-weight: 100;
    font-size: 12px;
}


/* end fieldGridOnly */

.is-mobile .dbSummaryGrid-table:not(.fieldGrid) tr:last-child td, .is-mobile .db-alarm-history-table tr:last-child td {
    border-bottom: none;
}
/*.dbSummaryGrid-table tr td.qh-link {
    font-size: 1.2em;
}*/


.dbSummaryGrid-table tr td.rowLabel:first-child {
    font-weight: bold;
    font-size: 12px;
/*    width: 5%;*/
}

.dbSummaryGrid-table.minified tr td:first-child {
    font-weight: bold;
    font-size: 11px;
    /*width: 5%;*/
}

.dbSummaryGrid-table tr td.small-icon {
    font-weight: bold;
    text-align: center;
    font-size: 12px;
    width: 20px;
}
/* end dbSummaryGrid*/

.dbSummaryGrid-table.minified tr td {
    text-align: right;
    padding: 2px;
    border-bottom: 1px solid lightgray;
/*    width: 20%;*/
    font-size: 11px;
}


/*start dbSummaryGrid*/
.db-alarm-history-table {
    width: 100%;
}

    .db-alarm-history-table td {
        padding: 2px 5px 0px 5px;
    }

.Alarm {
    font-weight: bold;
    color: darkred;
}

.Normal {
    font-weight: bold;
    color: darkgreen;
}

.db-alarm-history-table tr td {
    border-bottom: 1px solid lightgray;
}

/* end dbSummaryGrid*/

.noOverflow {
    overflow-x: hidden;
    overflow-y: hidden;
}

.dygraph-bar-chart {
    height: calc(100% - 40px);
    width: 100%;
    display: block;
    margin: auto;
    margin-left: -10px;
    margin-right: 10px;
}

.dygraph-bar-chart-legend span:nth-child(2):after {
    content: "\a";
    white-space: pre;
}

.dygraph-bar-chart-legend {
    height: 40px;
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 10px;
    text-align: center;
}


.json-config-editor {
    width: 721px;
    height: 347px;
}

.series-settings > div {
    display: inline-block;
}

.config-row {
    height: 40px;
}

.config-title {
    font-weight: 600;
    font-size: 1.6em;
}

.widget-config-layout {
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin-top: 0px;
    border: 1px solid #ccc;
}

.widget-config-btns {
    margin-top: 7px;
    -ms-grid-row: 3;
    grid-row: 3;
}

.widget-config-layout .wg-header {
    -ms-grid-row: 1;
    grid-row: 1;
    background-color: #e6e6e6;
    padding-left: 10px;
}

.widget-config-layout .wg-config-body {
    -ms-grid-row: 2;
    grid-row: 2;
}

.wg-config-static-options {
    padding-top: 4px;
    margin: 0px 11px;
    margin-top: 0px;
    border-bottom: 1px solid rgba(0,0,0,.10);
    padding-bottom: 10px;
}

.wg-list-row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 30px auto auto 30px;
    -ms-grid-rows: 30px;
    grid-template-columns: 30px minmax(124px, 300px) auto 30px;
    grid-template-rows: 30px;
    padding: 4px;
}

    .wg-list-row .sortArrow {
        display: inline-block;
        color: #c0c0c0;
        cursor: pointer;
    }

        .wg-list-row .sortArrow:hover {
            color: black;
        }

    .wg-list-row.wider {
        -ms-grid-columns: 40px auto auto 30px;
        -ms-grid-rows: 30px;
        grid-template-columns: 40px minmax(124px, 300px) auto 30px;
        grid-template-rows: 30px;
    }

    .wg-list-row:hover {
        background-color: #eff0f1;
    }

    .wg-list-row .center {
        display: flex;
        justify-content: center;
        align-self: center;
    }

    .wg-list-row > div {
        margin-right: 5px;
        margin-left: 5px;
    }

    .wg-list-row input {
        height: 100%;
    }

    .wg-list-row .row-grab-handle {
        -ms-grid-column: 1;
        grid-column: 1;
    }

    .wg-list-row .row-name {
        -ms-grid-column: 2;
        grid-column: 2;
    }

    .wg-list-row .row-config-btn {
        -ms-grid-column: 3;
        grid-column: 3;
    }

        .wg-list-row .row-config-btn.full-width {
            -ms-grid-column: 2;
            -ms-grid-column-span: 2;
            grid-column: 2 /span 2;
        }

    .wg-list-row .row-delete {
        -ms-grid-column: 4;
        grid-column: 4;
    }

        .wg-list-row .row-delete:hover {
            cursor: pointer;
        }

.wg-footer {
    padding: 10px;
    -ms-grid-row: 3;
    grid-row: 3;
}

tr td.fieldGroup {
    font-weight: bolder;
    font-size: 13px;
    column-fill: auto;
    text-align: center;
    border-bottom: 1px solid black;
}

tr.listSpacer td {
    height: 25px;
    border-bottom: none;
}

.manual-field-grid-config {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(4, 60px);
    grid-template-rows: repeat(4, 60px);
    grid-gap: 5px;
}

.fg-rowLabel {
    border: none;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.fg-rowLabel:focus {
    outline: none;
}

.fg-dcf {
    white-space: normal;
    font-size: 11px;
    background: white;
    border: solid 1px silver;
    min-height: 29px;
    max-width: 200px;
    text-align: center;
    cursor: pointer;
    padding: 3px;
}

    .fg-dcf:hover {
        background-color: #efefef;
    }

    .fg-dcf[disabled] {
        color: #a7a7a7;
    }
        .fg-dcf[disabled]:hover {
            background-color: white;
        }



.flex-name {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}

    .flex-name > input {
        height: 100%;
    }

.manual-delete-btn {
    justify-self: center;
    color: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.widgetPicker-container {
    max-height: 83vh;
}

#addWidgetModal .modal-dialog {
    width: 900px;
}

@media (min-width: 1600px) {
    #addWidgetModal .modal-dialog {
        width: 1060px;
    }
}

.widgetPicker-choice {
    display: inline-block;
    max-width: 180px;
    margin: 10px;
    padding: 15px;
    background-color: white;
    border: solid 1px #c0c0c0;
    border-radius: 5px;
    cursor: pointer;
    -webkit-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
}

    .widgetPicker-choice img {
        height: 150px;
        width: 150px;
        border-radius: 2px;
    }

.widgetPicker.description {
    padding: 8px;
    padding-bottom: 16px 8px;
}

.widgetPicker-name {
    padding: 8px 0px 0px 0px;
    text-align: center;
}

.dataDt {
    padding: 2px;
    font-weight: normal;
    font-style: italic;
    font-size: 11px;
    text-align: center;
}

.is-mobile .db-widget-body > div {
    position: relative;
}

.docs-upload > label:hover, .docs-upload > span:hover {
    cursor: pointer
}

.docsContainer table:first-child td {
    padding: 3px;
}

.docsContainer table:first-child tr:nth-child(even) td {
    border-bottom: solid 1px rgba(0,0,0,.10);
    background-color: rgba(0,0,0,.05);
}

table.dbfileListTable tr.dataRow:hover {
    background-color: whitesmoke;
}

/* presetGraphWidget container, tableHeader, and table*/

div.graphPresetConfigContainer  {
    height: 100%;
    display:grid;
    grid-template-rows: auto minmax(0,1fr);
}

div.graphPresetConfigContainer table.graphPresetTable {
    margin: auto;
    width: 100%;
}

    div.graphPresetConfigContainer table.graphPresetTable td {
        border-bottom: solid 1px rgba(230, 230, 230, 0.80);
    }

    div.graphPresetConfigContainer table.graphPresetTable tr.dataRow:hover {
        border-left: solid 4px darkgray;
    }


    div.graphPresetConfigContainer table.graphPresetTable tr.dataRow.selected {
        border-left: solid 4px dodgerblue;
    }

    div.graphPresetConfigContainer table.graphPresetTable tr.dataRow:nth-child(even) {
        background-color: whitesmoke;
    }

    div.graphPresetConfigContainer table.graphPresetTable tr.dataRow {
        cursor: pointer;
        border-left: solid 4px white;
    }

    div.graphPresetConfigContainer table.graphPresetTable th, table.graphPresetTable td {
        padding: 4px 8px;
    }

div.graphPresetConfigContainer div.tableHeader {
    width: 100%;
    border-bottom: solid 1px rgba(0,0,0,.30);
    padding: 4px 8px;
    color: black;
    font-size: 1.2em;
}

    div.graphPresetConfigContainer div.tableHeader div {
        display: inline-block;
    }

div.graphPresetConfigContainer .presetNameColumn {
    width: 50%
}

div.graphPresetConfigContainer .visibilityColumn {
    text-align: center;
    width: 15%
}

div.graphPresetConfigContainer .devicesAssociatedColumn {
    text-align: right;
    width: 32%
}
/*filter*/

div.dbWidgetFilter {
    z-index: 999;
    position: absolute;
    top: 5px;
    left: calc(100% - 205px);
    background-color: whitesmoke;
    border-radius: 3px;
    border: solid 1px #e0e0e0;
    padding: 5px;
    display: grid;
    grid-template-columns: 65px 120px;
    grid-row-gap: 3px;
}

.dbWidgetFilterInline {
    padding: 5px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 152px;
    grid-row-gap: 3px;
}

    div.dbWidgetFilter .exportGraph {
        cursor: pointer;
    }

        div.dbWidgetFilter .exportGraph:hover {
            color: dodgerblue;
        }

    div.dbWidgetFilter .destroyFilter {
        cursor: pointer;
        margin: auto;
        font-size: 12px;
        text-align: center;
        margin-top: 8px;
    }

        div.dbWidgetFilter .destroyFilter:hover {
            color: red;
        }

    div.dbWidgetFilter div.dbWidgetFilterFooter {
        grid-column: 1 / span 2;
        text-align: center;
        margin-top: 5px;
        border-top: solid 1px lightgray;
    }
/* end filter */

.fullScreenDashboard {
    position: fixed;
    top: 0px;
    bottom: 0;
    right: 0;
    left: 0;
    background: whitesmoke;
    z-index: 500;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0px !important;
}

.table-header-wrap th, .table-header-wrap tr:first-child {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.tank-widget-container {
    font-size: 12px;
    text-align:center;
}
/* history widget field picker */

div.dbHistFieldPickContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    overflow-y: auto;
    margin-left: 3px;
    margin-top: 8px;
}

    div.dbHistFieldPickContainer .pickerField {
        border-bottom: solid 1px #e0e0e0;
        padding: 2px;
        display: inline-block;
        width: calc(50% - 4px - 8px);
        margin-left: 8px;
    }

        div.dbHistFieldPickContainer .pickerField:hover {
            background-color: #f0f0f0;
        }
/* end history widget field picker */

.framedLayerButtons {
    color: #585858;
    font-size: .9em;
    margin: 0px;
}



.is-mobile .db-widget {
    padding-bottom: 15px;
    border-bottom: solid 1px #dedede;
}

.is-mobile .field-list {
    padding-left: 10px;
    padding-right: 10px;
}

/* formerly dashboard.css */
div.fieldGridListConfig.vueElement .staticOption {
    text-align: center;
    padding-right: 4px;
}

div.fieldGridListConfig.vueElement .inputGroupAddon {
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 3px;
    background-color: #eee;
    min-height: 20px;
    width: 100%;
}

div.fieldGridListConfig.vueElement .styleLinkButtons {
    cursor: pointer;
    margin-top: 3px;
    color: #bbb;
}

    div.fieldGridListConfig.vueElement .styleLinkButtons:hover {
        color: #aaa;
    }

div.fieldGridListConfig.vueElement .extendedOptionsContainer {
    padding: 10px;
}

div.fieldGridListConfig.vueElement .rowThresholdInput {
    display: inline;
    width: 30px;
    height: 90%;
    padding: 3px;
    text-align: center;
}


div.fieldGridListConfig.vueElement .fontSizeContainer {
    margin-left: 30px;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 4px;
    text-align: right;
}

.nestedConfigContainer {
    max-width: 400px;
    border: solid 1px rgba(0,0,0,.10);
    padding: 10px;
    margin-top: 15px;
    position: relative;
}

        .nestedConfigContainer .groupHeading {
            position: absolute;
            top: -10px;
            left: 5px;
            background-color: white;
        }

    .nestedConfigContainer .propLabel {
        min-width: 120px;
        max-width: 120px;
        text-align: left;
    }

    .nestedConfigContainer .btnWrap {
        width: 100%;
        white-space: normal;
        font-size: 12px;
        font-weight: bold;
    }

    label.lightLabel {
        font-weight: normal;
    }


.db-config-option-container {
    display: grid;
    grid-template-columns: 150px 1fr;
    min-height: 30px;
}

.db-config-option-label {
    text-align: right;
    padding-right: 8px;
    padding-top: 4px;
    background-color: #eee;
    border-right: solid 1px #cecece;
    margin-right: 6px;
    font-size: 1.1em;
}

.cellDevice {
    border-radius: 20px;
    position: relative;
    box-sizing: border-box;
    background: black;
    box-shadow: inset 0 4px 7px 1px #bbb, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05);
}

    .cellDevice::before,
    .cellDevice::after {
        content: "";
        display: block;
        position: absolute;
        background: black;
        box-shadow: inset 0 4px 7px 1px #bbb, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05);
    }

.phone {
    padding: 12% 3%;
}

    .phone.landscape {
        padding: 1.75% 8%;
    }

/*// Phone button*/
    .phone::after {
        border-radius: 50%;
        margin: 0 auto 2%;
        left: 0;
        right: 0;
        bottom: 0;
        width: 10%;
        height: 0;
        padding-top: 10%;
        box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, .50);
    }

.phone.landscape::after {
    margin: auto 0;
    left: calc(100% - 7%);
    top: 0;
    bottom: 0;
    width: 6%;
    padding-top: 6%;
}

/*// Phone speaker*/
.phone::before {
    border-radius: 50px;
    margin: 5.5% auto 0;
    left: 0;
    right: 0;
    top: 0;
    width: 20%;
    height: 1%;
    box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, .50);
}

    .phone.landscape::before {
        margin: auto 0 auto 4.5%;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1%;
        height: 20%;
    }

/* mobile popup*/
.mobilePopUpSaveCancel {
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: #222;
    color: white;
    border-radius: 5px;
    box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, .50);
}
.mobilePopUpSaveCancelButtons {
    padding: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}
    .mobilePopUpSaveCancelButtons:hover, .mobilePopUpEditLayout:hover {
        color: dodgerblue;
        text-decoration: underline;
    }
.mobilePopUpEditLayout {
    width: 100%;
    text-align: right;
    color: white;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 5px 0px 0px;
}
.mobileWidgetTable{
    width: 100%
}
.mobileWidgetTable td{
    padding: 5px;
    padding-left: 8px;
    color: white;
    font-size: 13px;
}
    .mobileWidgetTable td.notMobileEnabled {
        color: #615d5d;
    }
    .mobileWidgetTable tr {
        background-color: #222;
        border: solid 1px #444;
    }
    .mobileWidgetTable tr .fa.fa-bars.moveable {
        cursor:move;
    }
/**/
.configCaption {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    padding-right: 12px;
}

.circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    /*background: #000;*/
    border: 2px solid #6b6b6b;
}
.sm-circle {
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.circle-s .circle, .circle-s.circle {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

.circle-m .circle, .circle-m.circle {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

.circle-l .circle, .circle-l.circle {
    width: 50px;
    height: 50px;
    font-size: 30px;
}

.circle.red {
    background: #ffd6dd;
}
    .circle.green {
        background: #9ef39e;
    }
.circle.missing, .circle.disabled {
    background: #d8d8d8;
}

.blink {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.db-alarms-body {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(50px,auto));
    grid-template-rows: repeat(auto-fit,minmax(50px,auto));
    grid-gap: 5px;
    grid-auto-flow: row dense;
}

.db-alarms-body-list {
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-template-rows: auto;

    grid-auto-flow: row;
}

    .db-alarms-body-list > div {
        border-bottom: 1px solid #d3d3d3;
    }
.icon-wrapper {
    padding: 3px;
}

    .circle-s.db-alarms-body {
    grid-template-columns: repeat(auto-fit,minmax(20px,auto));
    grid-template-rows: repeat(auto-fit,minmax(20px,auto));
}

.circle-m.db-alarms-body {
    grid-template-columns: repeat(auto-fit,minmax(30px,auto));
    grid-template-rows: repeat(auto-fit,minmax(30px,auto));
}

.text-alarm-content {
    display: grid;
    grid-template-columns: min-content;
    grid-template-rows: min-content minmax(0, 1fr) min-content min-content;
    width: fit-content;
    max-width: 220px;
    grid-gap: 5px;
    padding: 5px;
    white-space: nowrap;
}

.text-alarm-content-middle {
    display: grid;
    grid-template-columns: min-content min-content;
    grid-template-rows: minmax(0, 1fr);
    grid-gap: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
/*mobile changes for widgets */
.db-widget.frameless.is-mobile {
    border: none;
}

.db-widget-header.is-mobile, .widgetExpandedHeader {
    padding: 7px;
}

.db-widget *,
.default-feaux-mobile-full-screen *,
.default-mobile-full-screen * {
    scrollbar-width: thin;
}

    .db-widget *::-webkit-scrollbar,
    .default-feaux-mobile-full-screen *::-webkit-scrollbar,
    .default-mobile-full-screen *::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .db-widget *::-webkit-scrollbar-track,
    .default-feaux-mobile-full-screen *::-webkit-scrollbar-track,
    .default-mobile-full-screen *::-webkit-scrollbar-track {
        background: #f0f0f0;
    }


    .db-widget *::-webkit-scrollbar-thumb,
    .default-feaux-mobile-full-screen *::-webkit-scrollbar-thumb,
    .default-mobile-full-screen *::-webkit-scrollbar-thumb {
        background-color: #cdcdcd;
    }


.db-widget-body.is-mobile {
    padding: 4px;
    background-color: white;
}

.default-mobile-full-screen {
    position: fixed;
    height: 100vh;
    height: -webkit-fill-available;
    height: stretch;
    width: 100vw;
    width: -webkit-fill-available;
    width: stretch;
    background: white;
    top: 0px;
    left: 0px;
    z-index: 1050;
}

.default-feaux-mobile-full-screen {
    /* this is for our pretend mobile phone view on desktop dashboard*/
    /*we just hard code in the dimensions to match the fake viewing area*/
    position: fixed;
    top: calc(50vh - 277px);
    left: calc(50vw - 170px);
    background: white;
    z-index: 1050;
    width: 339px;
    height: 550px;
    margin: 0px !important;
}
.noPointerNoScroll { /*cant click */
    pointer-events: none;
}

    .noPointerNoScroll * { /* hie scrollers */
        overflow: auto;
        -ms-overflow-style: none; /* IE 11 */
        scrollbar-width: none; /* Firefox 64 */
    }

.mobile-clientsideview-grid {
    display: grid;
    padding: 0px;
    grid-template-rows: auto minmax(0,1fr);
}

.widgetExpandFooter {
    text-align: center;
    background: #b5b5b54d;
    color: black;
    border: solid 1px #ccc;
    padding: 6px;
    margin: 3px;
    cursor: pointer;
}

.widgetExpandedHeader {
    font-weight: bold;
    font-size: 1.1em;
    background: #6e91b0;
    color: white;
}

/* end mobile widget changes */
/* we want the color picker in widgets to be styled like everythng else*/
.zdChartWidgetConfig .sp-replacer {
    border-radius: 3px;
    border-color: #c0c0c0;
    background: white;
}
vueElement.linkBuilder .propLabel {
    min-width: 120px;
    max-width: 120px;
}

vueElement.linkBuilder .btnWrap {
    width: 100%;
    white-space: normal;
    font-size: 12px;
    font-weight: bold;
}

.dbImageControlConfig .configBody {
    padding: 8px;
    border-top: solid 1px silver;
    margin-top: -1px;
}

/* conditon builder */
.conditionBuilder {
    display: grid;
    grid-template-columns: repeat(6,min-content);
    grid-gap: 0px;
}

    .conditionBuilder .conditionLabel {
        border-left: 1px solid #ccc;
        border-radius: 4px
    }

    .conditionBuilder .conditionCaption {
        padding-left: 4px;
        font-size: 11px;
        line-height: 0.95;
        text-align: center;
    }

    .conditionBuilder .valueCaption {
        min-width: 130px;
        background: whitesmoke;
        text-align: center;
        border: none;
    }
/* condition builder */


.lightenElement {
    filter: brightness(1.07);
}

.linkBuilderModal .propLabel {
    min-width: 120px;
    max-width: 120px;
}

.linkBuilderModal .btnWrap {
    width: 100%;
    white-space: normal;
    font-size: 12px;
    font-weight: bold;
}

.db-widget-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1em;
    margin: auto 0;
    user-select: none;
}

.previewIconOverlay {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 50px;
}

#fieldGridWidgetConfig .extendedOptionsContainer label,
#fieldGridWidgetConfig .extendedOptionsContainer input[type="checkbox"] {
    margin: 0;
}

.dashboard-widget-config .monaco-editor {
    position: absolute !important;
}

.db-component .selection-rect {
	position: absolute;
	border: 2px dashed black;
	background-color: rgba(0, 0, 0, 0.1);
	pointer-events: none;
}

.db-wrapper.lineActive .db-widget {
    cursor: pointer;
}

#DashboardSettings .cmHeader {
    padding: 8px;
    font-size: 19px;
    border-bottom: solid 1px rgb(229,229,229);
    margin-bottom: 5px;
    font-weight: bold;
}

#DashboardSettings .cmContent {
    padding: 8px;
    font-size: 16px;
}

#DashboardSettings .cmFooter {
    padding: 12px 12px 0 12px;
    font-size: 16px;
    text-align: center;
    border-top: solid 1px rgb(229,229,229);
}

#DashboardSettings .zdVueModal-body {
    margin: 0;
}

.dashboardConfig .propLabel {
    min-width: 140px;
    max-width: 140px;
    vertical-align: top;
}

.dashboardConfig .role-btn-group {
    width: 100%;
}

    .dashboardConfig .role-btn-group label {
        width: 33%;
    }

    .dashboardConfig .role-btn-group button {
        width: 34%;
    }

.dashboardConfig .visibilityRoleFriendlyName {
    width: 100%;
    text-align: center;
    font-size: .75em;
    padding: 6px 0px;
}

.dashboardConfig .view-name-container > .rightCol > .topLine {
    margin-top: 45%;
}

.dashboardConfig .view-name-container > .rightCol > .middle {
    margin-top: -15%;
}

.dashboardConfig .view-name-container {
    grid-template-columns: auto 25px;
}

.dashboardConfig .input-group-addon {
    background-color: unset;
    border: none;
    text-align: right;
}

.dashboardConfig .input-group {
    margin-bottom: 5px;
}

    .dashboardConfig .input-group input, .dashboardConfig .input-group select {
        border-radius: 4px;
    }

.tankControl .notConfigured {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: rgb(248, 248, 248);
    border: solid 2px rgb(136,136,136);
    border-radius: 10px;
    font-size: small;
}

.tankMeter {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: transparent;
    background-size: 1em 1.2em;
    width: 2%;
    height: 100%;
    background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(rgb(136,136,136) .05em, transparent .05em);
    background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(rgb(136,136,136) .05em, transparent .05em);
    background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(rgb(136,136,136) .05em, transparent .05em);
    background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(rgb(136,136,136) .05em, transparent .05em);
    background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(rgb(136,136,136) .05em, transparent .05em);
}

.tankControlGraphic {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.tankOptions-container {
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.tankOptionsHeader > label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tankOptions {
    display: grid;
    grid-template-columns: 130px auto;
    grid-template-rows: auto;
    min-height: 40px;
}

.tankOptions-current-val {
    text-align: center;
    border: none;
    outline: none;
    border-right: 1px solid #ccc;
    min-width: 105px;
}

.tankOptions-checkboxes {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
    text-align: center;
    flex-wrap: wrap;
}

.tankOptions-checkboxes > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
}

.tankOptions-checkboxes > div > label {
    margin: 0;
}

.tankOptions-checkboxes > div > input {
    margin: 0;
}

.tankOptions > input {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tankOptions > .tankOptions-name {
    align-content: center;
    height: 100%;
    min-width: 130px;
    display: flex;
    align-content: center;
    align-items: center;
    gap: 4px;
    justify-content: center;
    background-color: #eee;
    border-right: 1px solid #ccc;
}

.tankOptions-name > input {
    margin: 0;
}

.tankOptions-btn-group {
    display: flex;
}

.tankOptions-btn-group > label {
    flex: 1;
    height: 100%;
    text-align: center;
}

.tankOptions-btn-group > label:hover {
    cursor: pointer;
    background-color: rgba(196,218,255, 0.25);
}

.tankOptions-input, .tankOptions-btn, .tankOptions-color {
    height: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
    background-color: #fff;
    border: none;
}

.tankOptions-input[disabled] {
    background-color: #ddd;
    opacity: 0.5;
}

.tankOptions:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.tankOptions-input-group {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.tankOptions-input-group > .tankOptions {
    flex: 1;
    border: none;
}

.tankOptions > input[type="number"], .tankOptions-minmax-input {
    outline: none;
    border: none;
    text-align: center;
    font-weight: bold;
    padding: 0px 5px;
    min-width: 50px;
}

.tankOptions-minmax-group {
    display: grid;
    grid-template-columns: 75px auto;
    grid-template-rows: auto;
    min-height: 40px;
}

.tankOptions-minmax-input {
    flex: 1;
}

.tankOptions-minmax-name {
    align-content: center;
    height: 100%;
    min-width: 75px;
    display: flex;
    align-content: center;
    align-items: center;
    gap: 4px;
    justify-content: center;
    background-color: #eee;
    border-right: 1px solid #ccc;
}

.tankOptions-ftin-input {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    min-width: 105px;
    flex-wrap: wrap;
    padding: 0 5px;
}

.tankOptions-ftin-input > div {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.tankOptions-ftin-input > div > input[type="number"] {
    width: 50%;
    text-align: center;
    outline: none;
    border: none;
    font-weight: bold;
}

.tankOptions-ftin-input > div > input[type="number"]::-webkit-inner-spin-button,
.tankOptions-ftin-input > div > input[type="number"]::-webkit-outer-spin-button,
.tankOptions-minmax-input::-webkit-inner-spin-button,
.tankOptions-minmax-input::-webkit-outer-spin-button,
.tankOptions > input[type="number"]::-webkit-inner-spin-button,
.tankOptions > input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

.tankOptions-ftin-input > div > span {
    margin: 0 5px;
    text-align: center;
}

.tankOptions > input:focus-visible {
    outline: none;
}

.tankOptions-btn:hover {
    background-color: rgba(196,218,255, 0.25);
}

.tankOptions-input:focus-visible {
    outline: none;
}

.tankOptions-color:hover {
    cursor: pointer;
    background-color: rgba(196,218,255, 0.25) !important;
}

.tankOptions-color > div {
    border: none;
    padding: 0px;
    border-radius: 2px;
}

.tankControl .tankContainer {
    position: relative;
    border: solid 2px rgb(136,136,136);
    border-radius: 10px;
    background: rgb(248, 248, 248);
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}

.tankTextBackground {
    background-color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 5px;
    box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 1px 3px 1px rgb(0 0 0 / 15%);
}

.tankControl .tankContainer .tankText {
    position: absolute;
    padding: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

    .tankControl .tankContainer .tankText .tankLabel {
        text-align: center;
        font-weight: bold;
        font-size: 1.1em;
        width: 100%;
        text-wrap: pretty;
        overflow-wrap: anywhere;
        margin: 0;
        margin-bottom: 5px;
    }


    .tankControl .tankContainer .tankText .tankCapacity {
        margin-bottom: 5px;
        font-weight: bold;
        text-align: center;
    }

    .tankPercent {
        text-align: center;
        width: 100%;
        height: 100%;
        align-content: center;
    }

    .tankFieldVal {
        font-size: 1em;
        margin: 0;
    }

    .tankPercent > h4 {
        font-weight: bold;
        font-size: 2em;
        margin: 0;
    }

    .tankTextTable {
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 10px;
        text-align: center;
    }

    .tankControl .tankContainer .tankText .tankTextTableContainer {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .tankControl .tankContainer .tankTimestamp {
        text-align: center;
        margin-top: 5px;
        font-weight: bold;
        font-size: smaller;
    }

.db-widget:not(.frameless) .tankControl {
    padding-bottom: 10px;
}
.db-component .diagramTools {
	opacity: 0.8;
	height: unset;
	width: 100%;
	border: 1px solid black;
	background-color: whitesmoke;
	border-radius: 5px;
	padding: 5px;
	z-index: 1000;
}

svg.leader-line > g {
	pointer-events: auto !important;
	user-select: none;
}

.db-component .diagramProperties {
	opacity: 0.8;
	height: 100%;
	width: 100%;
	border: 1px solid black;
	background-color: whitesmoke;
	border-radius: 5px;
	padding: 5px;
	z-index: 999;
	overflow: auto;
}

.diagramProperties table tr td:first-of-type {
	max-width: 120px;
	white-space: normal;
}

.diagramProperties table td {
	padding: 4px 8px;
	border: 1px solid #ccc;
	height: 38px;
}

.diagramSidebar {
	gap: 5px;
	width: 310px;
	position: absolute;
	top: 40px;
	right: 15px;
	overflow: hidden;
}

svg.crispEdges > g,
.svgWrapper rect {
	shape-rendering: crispEdges;
}

.diagramTools .toolButton {
	padding: 3px 6px;
	font-size: 20px;
	width: 34px;
	height: 34px;
}

.diagramTools .toolButton.active {
	border: 1px solid red;
}
.cellFormatter.vueElement {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto auto;
    height: 100%;
    grid-gap: 8px;
}

.cellFormatterLeft {
    display: inline-block;
    vertical-align: top;
}

.cellFormatterRight {
    display: inline-block;
}

.cellFormatterFieldButton {
    width: 100%;
    min-height: 60px;
    white-space: normal;
}

.cellFormatterRow {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 5px;
}

.cellFormatterRow.linkRow {
    text-align: right;
    font-size:11px;
    padding-top: 0px;
    margin-right:20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .cellFormatterRow.linkRow a {
        text-decoration:underline;
    }

.cellFormatterPreviewDiv {
    margin: 0px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
}

.zdTabStripTab {
    border: solid 1px Gainsboro;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px 4px 0px 0px;
}

    .zdTabStripTab:hover {
        background: whitesmoke;
    }

    .zdTabStripTab.active {
        color: black;
        background: #c4daff;
    }

.zdTabStrip {
    display: flex;
    border-bottom: solid 1px whitesmoke;
}

.cellFormatter.vueElement .previewLayouts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: dotted 1px silver;
}


    .cellFormatter.vueElement .previewLayouts.left {
        padding: 5px 10px;
    }


    .cellFormatter.vueElement .previewLayouts.right {
        max-width: 100%;
        text-align: right;
        font-size: 12px; /* because a fieldgrid cell is 12px by default*/
    }


.cellFormatter.vueElement .removeStylingDiv {
    font-size: 14px;
    text-align: center;
    background-color: whitesmoke;
}


.cellFormatter.vueElement .conditionPicker {
    display: grid;
    grid-template-columns: minmax(0,1fr) min-content min-content;
    margin-bottom: 6px;
}

.cellFormatter.vueElement .tabPage {
    overflow: auto;
}

.cellFormatter .styleTab .input-group-addon {
    min-width: 100px;
}

.cellFormatter .nestedConfigContainer {
    max-width: unset;
    margin-top: 0;
    padding: 0px;
    border: none;
    grid-column: 1 / span 2;
}

.zd-modal .cellFormatter.cmContent {
    max-height: unset;
}
.dashboardVariableBuilder {
    .objectState {
        margin-top: 0 !important;
    }

    .sve-sidebar {
        padding-top: 10px !important;
        padding-bottom: 0 !important;
    }

    .modal-header {
        background: whitesmoke;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .topSection {
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 0 10px 10px 10px;
    }

    .warnings {
        margin: 0px;
        overflow: auto;
        padding: 1px 1px 1px 15px;
        text-align: left;

        li {
            margin: 2px 0;
        }
    }

    i.warningsIcon {
        color: var(--amber-400);
        margin-top: 28px;
        font-size: 20px;
    }
}
.variableInput {
    position: relative;
}

.input-group .variableInput {
    position: unset;
}

.input-group .variableInput input {
    border-radius: 0 4px 4px 0 !important;
}

.widget-inner {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}

.dyno-left {
    height: 100%;
    flex-grow: 1;
    flex-flow: column nowrap;
    display: flex;
}

.dyno-right {
    height: 100%;
    width: 175px;
    flex-flow: column nowrap;
    display: flex;
}

.dyno-maximized {
    padding: 10px;
}

.dynochart-top {
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.dynochart-bottom {
    width: 100%;
    height: 125px;
    min-width: 0;
    min-height: 0;
}

.dyno-options {
    width: 100%;
    height: 50px;
    min-width: 0;
    min-height: 0;
    text-align: center;
    padding: 10px 0px;
}

.selected-entries {
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.dyno-range {
    width: 100%;
    height: 125px;
    min-width: 0;
    min-height: 0;
    text-align: center;
    padding: 10px 0px;
}

.dynoMobileDayPicker {
    border-top: solid 1px rgba(0,0,0,.10);
    padding: 6px;
    text-align: center;
    font-size: 1.5em;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    height: unset;
    width: unset;
    min-width: unset;
    min-height: unset;
    background-color: rgba(0,0,0,.03);
}

    .dynoMobileDayPicker .arrow {
        background-color: #6e91b0;
        color: white;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        min-width: 30px;
        padding: 4px;
    }

.dynoLoadPicker {
    border: solid 1px rgba(0,0,0,.10);
    overflow-y: auto;
    max-height: 100%;
}

.dynoLoadPicker.mobile {
    overflow-y: visible;
}
    .dynoLoadPicker.desktop.hiddenLoadChart {
        margin-bottom: 11px;
    }


    .dynoMobileFullScreen {
        display: grid;
        grid-template-rows: minmax(0,1fr) auto minmax(0, 1fr);
        height: 100%;
    }

.loadchart-tooltip {
    position: absolute;
    opacity: 0;
    padding: 6px;
    pointer-events: none;
    z-index: 1000;
    background-color: white;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
    width: fit-content;
}

.dyno-explorer-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
}

.dyno-explorer-left {
    height: 100%;
    width: 550px;
    flex-flow: column nowrap;
    display: flex !important;
    gap: 5px;
}

.dyno-explorer-left.limitedWidth {
    width: 50%;
    max-width: 270px;
}

.dyno-explorer-left.surfaceCardsOnly {
    max-width: 430px;
}

.dyno-explorer-right {
    gap: 5px;
    flex-grow: 1;
}

.dynoLoadPicker.desktop {
    max-height: unset;
    flex-grow: 1;
}

.dyno-explorer-top {
    display: flex;
    flex-flow: column nowrap;
}

.dyno-explorer-chart-bottom {
    min-height: 125px;
    display: flex;
    flex-flow: column nowrap;
}

.dyno-explorer-chart-bottom::-webkit-scrollbar,
.dyno-explorer-selected-entries.mobile::-webkit-scrollbar{
    display: none;
}

.dyno-explorer-chart-bottom.limitedHeight {
    height: 85px;
    min-height: 85px;
    margin-bottom: 10px;
}

.dyno-explorer-options {
    text-align: center;
}

.dynochart-toolbar {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-evenly;
    padding-bottom: 5px;
}

.dynoDesktopDayPicker {
    padding: 6px;
    text-align: center;
    font-size: 1.5em;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    height: unset;
    min-height: unset;
    width: 350px;
}

    .dynoDesktopDayPicker .arrow {
        background-color: #6e91b0;
        color: white;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        min-width: 30px;
        padding: 4px;
    }

.dyno-explorer-selected-entries {
    width: 100%;
    overflow: auto;
    gap: 5px;
    height: 104px;
}

.dyno-explorer-selected-entries.mobile {
    display: flex;
    gap: 5px;
    height: 75px;
}

.card-entry {
    border: 1px solid #ccc;
    padding: 5px;
    background: whitesmoke;
    height: min-content;
}

.card-entry[disabled] {
    background: #ccc;
}

.card-entry.highlighted {
    background-color: #e5e4e4;
    border-color: #ffab37;
}

.card-entry.hover {
    background-color: #e5e4e4;
}
.fieldList {
    padding-right: 2px;
    display: grid;
    grid-template-columns: minmax(0, auto) auto auto;
}

    .fieldList .cell {
        border-bottom: solid 1px lightgray;
        padding-top: 5px;
        padding-right: 0px;
        padding-bottom: 2px;
        padding-left: 5px;
        font-size: 12px;
        white-space: normal;
        display: flex;
        align-items: center;
    }

        .fieldList .cell.minified {
            padding-top: 2px;
            padding-right: 0px;
            padding-bottom: 2px;
            padding-left: 2px;
        }

        .fieldList .cell.groupHeader {
            font-weight: bold;
            grid-column: 1 / span 3;
            border-bottom: solid 1px black;
            text-align: center;
            font-size: 13px;
            justify-content: center;
        }

        .fieldList .cell.groupSpacer {
            border: none;
            grid-column: 1 / span 3;
        }

            .fieldList .cell.groupSpacer.noUnits {
                border: none;
                grid-column: 1 / span 2;
            }

        .fieldList .cell.rowLabel {
            font-weight: bold;
            grid-column: 1;
            font-size: 12px;
            justify-content: start;
        }

        .fieldList .cell.rowValue {
            text-align: right;
            grid-column: 2;
            padding-left: 2px;
            justify-content: end;
        }

        .fieldList .cell.rowValue.noUnits {
            grid-column: 2 / span 2;
        }

        .fieldList .cell.rowUnits {
            text-align: center;
            color: gray;
            grid-column: 3;
            font-size: 11px;
            justify-content: center;
        }

        .fieldList .cell.groupHeader.minified {
            font-size: 12px;
        }

        .fieldList .cell.rowLabel.minified {
            font-size: 11px;
        }

        .fieldList .cell.rowValue.minified {
            font-size: 11px;
        }

        .fieldList .cell.rowUnits.minified {
            font-size: 11px;
        }

        .fieldList .cell.rowValue.qh-link {
            color: #333;
        }

            .fieldList .cell.rowValue.qh-link:hover {
                color: #23527c;
            }

.fieldGridListConfig .rowColNumberIndicator {
    font-size: 11px;
    padding-right: 5px;
    color: lightgray;
}

.fieldList .cell .alarmIndicator {
    margin-left: 2px;
}

.fieldList .cell.minified .alarmIndicator {
    margin-left: 1px;
}

.fieldListActionLayout {
    display: block;
    height:100%;
}

    .fieldListActionLayout.top {
        display: grid;
        grid-template-rows: auto minmax(0,1fr);
    }

        .fieldListActionLayout.top .fieldListButtonArea {
            grid-column: 1;
            grid-row: 1;
        }

        .fieldListActionLayout.top .fieldListWidgetArea {
            grid-column: 1;
            grid-row: 2;
        }

    .fieldListActionLayout.bottom {
        display: grid;
        grid-template-rows: minmax(0,1fr) auto;
    }

        .fieldListActionLayout.bottom .fieldListWidgetArea {
            grid-column: 1;
            grid-row: 1;
        }
        .fieldListActionLayout.bottom .fieldListButtonArea {
            grid-column: 1;
            grid-row: 2;
        }

.mapWidgetConfig .configLayout {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 20px;
	row-gap: 10px;
}

.mapWidgetConfig .configLayout div {
	margin: auto 0;
}

.mapWidgetConfig .operationModeChild {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px;
	align-items: center;
	margin-left: 25px;
}

.mapWidget .overlay {
	position: absolute;
	background: rgba(229,227,223, 0.6);
	transition: .5s ease;
}

.operatingTriangleOptions-container {
    display: flex;
    flex-direction: row;
    width: fit-content;
    border: 1px solid #000;
    margin-bottom: 8px;
    border-radius: 4px;
}

.operatingTriangleLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    align-items: center;
}

.operatingTriangleLegendItem {
    display: flex;
    flex: 1 1 80px;
    align-items: center;
}

.operatingTriangleLegendBox {
    width: 25px;
    height: 15px;
    margin-right: 8px;
    border: 1px solid black;
}

.oilPoint {
    background-color: #008000;
}

.waterPoint {
    background-color: #0000FF;
}

.gasPoint {
    background-color: #EF0808;
}

.latestPoint {
    background-color: #04FFE6;
}

.historicalPoint {
    background-color: #008080;
}

.operatingTriangleOptions {
    display: grid;
    grid-template-columns: 130px auto;
    grid-template-rows: auto;
    min-height: 40px;
}

.operatingTriangleOptionsLonger {
    display: grid;
    grid-template-columns: 205px auto;
    grid-template-rows: auto;
    min-height: 40px;
}

.operatingTriangle-right > .zddate-window > .btn-default {
    height: 100%;
}

.operatingTriangle-right .zddi_lightUnderline {
    height: 65%;
    align-items: center;
    align-content: flex-end;
}

.operatingTriangleOptions > .operatingTriangleOptions-name,
.operatingTriangleOptionsLonger > .operatingTriangleOptions-name {
    align-content: center;
    height: 100%;
    display: flex;
    max-width: 205px;
    align-content: center;
    align-items: center;
    gap: 4px;
    justify-content: center;
    background-color: #eee;
    border-right: 1px solid #ccc;
}

.operatingTriangleOptions-btn {
    height: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
    background-color: #fff;
    border: none;
}

.operatingTriangleOptions-minmax-group {
    display: grid;
    grid-template-columns: 75px auto;
    grid-template-rows: auto;
    min-height: 40px;
}

.operatingTriangleOptions-minmax-name {
    align-content: center;
    height: 100%;
    min-width: 75px;
    max-width: 205px;
    display: flex;
    align-content: center;
    align-items: center;
    gap: 4px;
    justify-content: center;
    background-color: #eee;
    border-right: 1px solid #ccc;
}

.highlightDirectChildren > * {
    background-color: var(--zd-default-highlight)
}

.tabbedWidgetLayout {
    display: grid;
    grid-gap: 1px 5px;
    height: 100%;
}


    .tabbedWidgetLayout .tabStrip button.picked {
        background: #e6e6e6;
        box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    }


    /* vertical*/
    .tabbedWidgetLayout.vertical.left {
        grid-template-columns: min-content minmax(0,1fr);
    }

    .tabbedWidgetLayout.vertical.right {
        grid-template-columns: minmax(0,1fr) min-content;
    }

        .tabbedWidgetLayout.vertical.left .tabStrip {
            grid-column: 1;
            grid-row: 1;
        }

        .tabbedWidgetLayout.vertical.left .widgetArea {
            grid-column: 2;
            grid-row: 1;
        }

        .tabbedWidgetLayout.vertical.right .tabStrip {
            grid-column: 2;
            grid-row: 1;
        }


        .tabbedWidgetLayout.vertical.right .widgetArea {
            grid-column: 1;
            grid-row: 1;
        }

        .tabbedWidgetLayout.vertical .tabStrip button {
            display: block;
            width: 100%;
        }


    /* horizontal*/
    .tabbedWidgetLayout.horizontal.top {
        grid-template-rows: min-content minmax(0,1fr);
    }

    .tabbedWidgetLayout.horizontal.bottom {
        grid-template-rows: minmax(0,1fr) min-content;
    }

    .tabbedWidgetLayout.horizontal.top .tabStrip {
        grid-column: 1;
        grid-row: 1;
    }

    .tabbedWidgetLayout.horizontal.top .widgetArea {
        grid-column: 1;
        grid-row: 2;
    }

    .tabbedWidgetLayout.horizontal.bottom .tabStrip {
        grid-column: 1;
        grid-row: 2;
    }


    .tabbedWidgetLayout.horizontal.bottom .widgetArea {
        grid-column: 1;
        grid-row: 1;
    }

    .tabbedWidgetLayout.horizontal .tabStrip {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap:wrap;
        padding: 4px 0px;
    }

        .tabbedWidgetLayout.horizontal .tabStrip button {
            display: block;
            width: min-content;
        }

    .tabbedWidgetLayout.horizontal.bottom .tabStrip {
        padding-bottom: 4px;
    }

.widgetArea.mobileMode .db-widget-body-main {
    overflow: hidden;
}

.tank-widget-config  .mobileExpandThresholdTanks {
    display: inline;
    width: 30px;
    height: 90%;
    padding: 3px;
    text-align: center;
}

.tank-widget-config .configRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 10px 0px 0px 10px;
}

.tank-widget-container .tankContainerLayout {
    display: grid;
    grid-template-rows: 1fr;
    grid-gap: 5px;
    width: 100%;
}


.tank-widget-container .tankRow {
    width: fit-content;
    margin: auto;
}
    .tank-widget-container .tankRow:not(:first-child) {
        border-top: solid 1px #DDD;
        padding-top: 5px;
    }


.tank-widget-container .tankTitle {
    text-align: center;
    font-weight: bold;
    white-space: normal;
    padding: 0px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tank-widget-container .tankBbls {
    text-align: center;
    font-weight: bold;
    padding-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tank-widget-container .tankGraphicContainer {
    display: flex;
    align-items: flex-end;
    justify-content: center
}


    .tank-widget-container .tankGraphicContainer .tankGraphic {
        border-radius: 4px;
    }

    .tank-widget-container .tankGraphicContainer .tankGraphic .tankLevelsContainer{
        display: flex;
        flex-direction: column;
        height: 100%;
    }


.tank-widget-container .tankSummaryContainer {
    padding-top: 4px;
}

    .tank-widget-container .tankSummaryContainer .readingsGrid {
        margin: auto;
        text-align: center;
        display: grid;
        grid-template-rows: 1fr;
        width: auto;
    }

        .tank-widget-container .tankSummaryContainer .readingsGrid .readingsRow {
            display: grid;
            grid-template-columns: auto auto;
            margin: auto;
        }

        .tank-widget-container .tankSummaryContainer .readingsGrid .readingsRow[hide-barrel-calcs] {
            grid-template-columns: auto;
        }

        .tank-widget-container .tankSummaryContainer .readingsGrid .readingsRow div {
            padding: 1px 2px;
            overflow: hidden;
            text-overflow: ellipsis;
        }


    .tank-widget-container .tankSummaryContainer .timestamp {
        text-align: center;
        color: gray;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tank-widget-wrapper {
    overflow: auto;
}


.flyOutRight {
    padding: 20px;
    -webkit-box-shadow: -6px 0px 11px -7px rgba(0,0,0,0.30);
    box-shadow: -6px 0px 11px -7px rgba(0,0,0,0.30);
}

.companyDeviceAttributes .formRowLabel {
    padding: 6px 8px;
    display: table;
}

.companyDeviceAttributes .formRowLabel div {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
	height: 30px;
}

.companyDeviceAttributes .formRowValue {
    padding: 6px 8px;
    display: table;
}

.companyDeviceAttributes .formRowValue div {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

.companyDeviceAttributes .clickHeader {
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-color: whitesmoke;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 4px;
    cursor: pointer;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
}

.companyDeviceAttributes .alignedCheckContainer {
    display: table;
    padding: 2px 0px;
}

.companyDeviceAttributes .alignedCheckCell {
    display: table-cell;
    vertical-align: middle;
}

@media (min-width: 1800px) {
    .companyDeviceAttributes .tableContainer {
        max-width: calc(100% - 500px);
    }
}

.companyDeviceAttributes .tableContainer.hasSelection {
    max-width: calc(100% - 500px);
    min-width: 553px;
}

.companyDeviceAttributes .tableContainer {
    width: 400px;
}

.companyDeviceAttributes .editorRow {
    grid-column: 1 / span 2;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: solid 1px rgba(0,0,0,.1);
    margin-bottom: 8px;
}
.exportBatches .zdSplitViewEditor .formRowLabel {
    margin: auto auto auto 0px;
    padding: 0;
}

    .exportBatches .zdSplitViewEditor .formRowLabel div {
        text-align: left;
    }

.exportTargetOptions .zdInputPanel .secret-icon {
    right: 5px;
}
.importFileJobs .zdSplitViewEditor label {
	margin-bottom: 0px;
}

.importFileJobs .zdSplitViewEditor .zdInputPanel {
	margin-right: 0px;
}

.importFileJobs .toggleHolder {
	padding: 8px 8px;
}

.importFileJobs .lineSeparator {
	grid-column: span 2;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.adminPage {
	display: grid;
	grid-template-columns: auto 1fr;
}

.admin-polling {
    height: 100%;
    display: grid;
    grid-template-rows: 60px calc(100% - 60px);
    padding: 0 15px;
}

    .admin-polling .sb-toolbar {
        position: sticky;
        top: 0;
    }
    
.billingGroups .sveLayout .sve-sidebar {
    padding: 0;
}

.billingGroups .zdSplitViewEditor .sve-sidebar .editorRow {
    padding-top: 10px !important;
}

.channelEditTemplates .monaco-editor {
    position: absolute !important;
}

.controlAppSchemeEditor .tabHeader.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
	border-bottom-left-radius: 0;
}

.controlAppSchemeEditor .tabHeader.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {
	border-bottom-right-radius: 0;
}

.controlAppSchemeEditor .tabSection {
	border: 1px solid #ccc;
	padding: 5px;
	overflow: auto;
}

.controlAppSchemeEditor .controlAppTable tr.disabled {
	color: #adadad;
}
.ebi-fieldContainer > label {
	margin: auto 0px auto auto
}

.ebi-fieldButtonWrapper {
	display:grid;
	grid-template-columns: auto 1fr 65px 65px;
	gap: 10px;
}

	.ebi-fieldButtonWrapper input[type=radio] {
		margin: auto 0px;
	}
.pollingSchemesPage .sveLayout .sve-sidebar .sveSidebarContent {
	padding: 0;
}
.supportLinksPage .paramsTable td {
	padding: 5px;
	border: 1px solid #ccc;
	text-align: center;
}

.supportLinksPage .paramsTable input {
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.supportLinksPage .paramsTable thead td {
	font-weight: bold;
	background-color: whitesmoke;
}
.vueElement.advancedFill {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    display: block;
    overflow: hidden;
}

div#advancedRoot.vueElement .bigQuestion {
    font-size: 17px;
    color: #1a9ece;
    cursor: pointer;
    vertical-align: middle;
}
div.vueElement h1.advancedH1 {
    border: none;
    padding-bottom: 2px;
    font-weight: bold;
    margin-bottom: 2px;
}

div.vueElement .editorRow {
    padding: 7px 0px;
    font-size: 16px;
}

div.vueElement hr.advancedHr {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-top: 0px;
    margin-bottom: 12px;
}
.vueElement div.companyName {
    font-size: 13px;
    padding: 2px 2px 4px 2px;
    display: inline-block;
    text-align: left;
    width: 50%;
}

.vueElement div.advancedResultCount {
    font-size: 13px;
    padding: 2px 2px 4px 2px;
    display: inline-block;
    text-align: right;
    width: 50%;
}


.vueElement .advancedContainerLeft {
    display: block;
    width:100%;
    height: 100%;
    overflow-y: hidden;
    padding: 0px 40px 5px 40px;
    float:left;
    clear:left;
}

    .vueElement .advancedContainerLeft > .menuTop {
        height: 50px;
        display: block;
        margin-bottom: -3px;
    }


    .vueElement .advancedContainerLeft > .menuTop .menuSection {
        vertical-align: middle;
        display: inline-block;
    }

    .vueElement .advancedContainerLeft > .menuMiddle {
        height: calc(100% - 175px);
        display: block;
    }


.vueElement .advancedContainerRight {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 440px;
    vertical-align: top;
    background-color: white;
    -webkit-box-shadow: -6px 0px 11px -7px rgba(0,0,0,0.30);
    box-shadow: -6px 0px 11px -7px rgba(0,0,0,0.30);
    padding: 10px 8px;
    display: block;
    float: right;
    clear: right;
}


.vueElement .explainText {
    width: 50%;
    display: inline-block;
    padding: 0px 10px;
    vertical-align: top;
    color: #6c6c6c;
    font: 15px Arial;
    text-align:center;
    white-space:normal;
    margin:auto;
}

.vueElement .contactHeader {
    font-size: 19px;
    font-weight: bold;
}


/*form elements*/
.vueElement .adminFormRow {
    padding: 7px;
}

.vueElement .adminFormHeaderRow {
    padding: 7px;
    width: 100%;
    margin: auto;
    margin-bottom: 10px;
    font-size: 19px;
    padding-bottom: 5px;
    border-bottom: solid 1px rgba(0,0,0,0.1);
    text-align: center;
}

.vueElement .adminFormRow .colLeft {
    display: inline-block;
    width: 100px;
    vertical-align: middle;
    margin-top: -4px;
    text-align: right;
    padding-right: 20px;
}

.vueElement .adminFormRow .colRight {
    display: inline-block;
    width: calc(100% - 120px);
}

.vueElement .adminFormRow .fullWidth {
    white-space:normal
}

.vueElement .adminFormRow .colBoolLeft {
    display: inline-block;
    width: 180px;
    vertical-align: middle;
    margin-top: -4px;
    text-align: left;
    padding-right: 15px;
}

.vueElement .adminFormRow .colBoolRight {
    display: inline-block;
    width: calc(100% - 195px);
}

.vueElement .adminFormRow .colNumLeft {
    display: inline-block;
    width: 230px;
    vertical-align: middle;
    margin-top: -4px;
    text-align: left;
    padding-right: 20px;
}

.vueElement .adminFormRow .colNumRight {
    display: inline-block;
    width: calc(100% - 250px);
}

.vueElement .adminFormFooter {
    padding: 7px;
    border-top: solid 1px rgba(0,0,0,0.1);
    padding-top: 15px;
    width: 100%;
    margin: auto;
    text-align:center;
}

    .vueElement .adminFormFooter .saveSide {
        width: 50%;
        display: inline;
        text-align: center;
        margin-right: 5px;
    }

    .vueElement .adminFormFooter .cancelSide {
        width: 50%;
        display: inline;
        text-align: center;
    }

button.cancelButton {
    background-color: rgb(230, 0, 0);
    color: white;
}

    button.cancelButton:hover {
        background-color: rgb(210, 0, 0);
        color: white;
    }

/* end form elements*/

table.timeLineTable {
    width: 100%;
}
table.timeLineTable td {
    padding: 3px;
    border: solid 1px black;
}
    table.timeLineTable td.header.hour, table.timeLineTable td.header.week {
        height:unset;
        background: whitesmoke;
        border: solid 1px #b7b7b7;
    }


    table.timeLineTable td.hour {
        min-width: 20px;
        text-align: center;
        height: 30px;
        border: none;
        border-bottom: solid 1px #b7b7b7;
    }

    table.timeLineTable td.miniHour {
        width: 3px;
        min-width: 3px;
        border: none;
        padding: 0px;
        height: 30px;
    }

    table.timeLineTable td.hour:last-child {
        border-right: solid 1px #b7b7b7;
    }
        table.timeLineTable td.hour:first-child {
            border-left: solid 1px #b7b7b7;
        }

    table.timeLineTable td.hour.active, table.calendarTable td.activeHour {
        color: white;
    }



    table.calendarTable {
        height:100%;

    }


    table.calendarTable tr.weekdayName td {
        background: whitesmoke;
        border: solid 1px #b7b7b7;
        padding: 3px;
        width: 80px;
    }

        table.calendarTable td.dayCell {
            border: solid 1px #b7b7b7;
            background: #e9f5fa;
        }
        table.calendarTable td div.dayLabel {
            text-align: right;
            padding-right: 2px;
            font-size: 14px;
            padding-bottom: 1px;
        }
        table.calendarTable td.dayCell.inactive {
            color: #c4c4c4;
            background: white;
        }
        table.calendarTable .moveArrow {
            cursor: pointer;
            font-size: 16px;
        }

        table.calendarTable .hourBlock {
            min-height: 14px;
            width: 4px;
            cursor: pointer;
        }

        table.calendarTable table.hourBlockTable {
            width: 100%;
            margin-top: 0px;
            margin: 6px 0px;
        }

            table.calendarTable .hourBlock.active {
                background-color: green;
            }

            table.calendarTable .hourBlock.active.selectedSeries {
                background-color: blue;
            }

            table.calendarTable .hourBlock:hover {
                background-color: #6c6c6c;
            }

            table.calendarTable .hourBlock.active:hover {
                background-color: lime;
            }

.windowWarningBlock {
    grid-area: 1 / 3 / span 3 / auto;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;
}
    .windowWarningBlock .windowWarningText {
        max-width: 180px;
        white-space: normal;
        word-break: break-word;
        text-align: center;
    }

.windowFormGrid {
    display: grid;
    grid-template-columns: minmax(auto,100px) 250px 1fr;
    width: 100%;
    padding-left: 10px;
    margin-bottom: 15px;
}
.windowFormGrid select {
    margin-bottom: 5px;
}
.flexCenter {
    display: flex;
    align-items: center;
}

div.requireAckDiv {
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    grid-column: 1/ span 2;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    margin-bottom: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
    padding-top: 5px;
}


.notificationSchemes.vueElement .schemeTitleArea {
    grid-column: 1 / span 2;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.notificationSchemes.vueElement .togglesLeftColumn {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 5px;
}

.notificationSchemes.vueElement .extraParamsGrid {
    display: grid;
    grid-template-columns: 50px auto;
}

.notificationSchemes.vueElement .activeWindowGrid {
    padding: 7px;
    display: grid;
    grid-template-columns: 148px 1fr;
    grid-column: 1 /span 2;
    margin-top: 8px;
}

.notificationSchemes.vueElement .toggleGrid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 10px;
}

    .notificationSchemes.vueElement .toggleGrid > .paramLabel {
        margin-top: 7px;
        text-align: right;
    }

    .notificationSchemes.vueElement .toggleGrid  .minsUnit {
        padding-left:3px;
    }

    .notificationSchemes.vueElement .activeWindowGrid > .windowLabel {
        text-align: right;
        padding-right: 10px;
        margin-top: 5px;
    }

.notificationSchemes.vueElement .activeWindowGrid button.btn.btn-sm.btn-default.active {
    color: white;
    background: var(--bootstrap-primary);
}

.notificationSchemes.vueElement .addRemovewindowButtons {
    padding: 5px 7px;
    min-width: 30px;
}

.notificationSchemes.vueElement .formRowLabel {
    margin: auto 0 auto auto;
    padding: 0 8px 0 0;
}

.advancedPage {
	display: grid;
	grid-template-columns: auto 1fr;
}

.autoLoader .zdVueModal-header, .autoLoader .zdVueModal-footer {
	flex: 0 1 auto;
}

.autoLoader .zdVueModal-body {
	flex: 1 1 auto;
}

.autoLoaderCrumbs {
	white-space: normal;
	word-wrap: break-word;
	font-size: 18px;
	font-weight: 500;
	padding-bottom: 10px;
	display: flex;
	flex-direction: row;
	column-gap: 10px;
}

.al-fieldButtonWrapper {
	display:grid;
	grid-template-columns: 1fr 65px 65px;
	gap: 10px;
}

.autoLoader .formRowLabel {
	margin: auto 0px auto auto;
	padding: 0px 8px;
	text-align: right;
}

.alContentContainer {
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap: 10px;
	row-gap: 20px;
	margin: 10px 0
}

.alDelayContainer {
	display: flex;
	flex-direction: row;
	column-gap: 10px;
	height: 34px;
}

.CompanyOptions {
	padding: 20px;
	gap: 20px;
	overflow: auto;
}

.CompanyOptions h3 {
	margin: 0;
}
@media (min-width: 1800px) {
	#advancedRoot.vueElement .advancedContainerLeft {
		max-width: calc(100% - 450px);
	}
}

#advancedRoot.vueElement .advancedContainerLeft.hasSelection {
	max-width: calc(100% - 450px);
	min-width: 553px;
}

#advancedRoot.vueElement .advancedContainerRight {
	width: 450px;
}

#duplicateContactsTable {
	text-align: left;
}

#duplicateContactsTable th,
#duplicateContactsTable td {
  padding: 8px 10px;
}

.exportingAdHoc .formRowLabel {
	margin: auto 0px auto auto;
	padding: 0px 8px;
	text-align: right;
}

.exportingAdHoc .formRowValue {
	padding: 6px 8px;
	display: table;
	margin: auto 0px;
}
	.exportingAdHoc .formRowValue div {
		display: table-cell;
		text-align: left;
	}

.eah-fieldButtonWrapper {
	display:grid;
	column-gap: 10px;
	row-gap: 8px;
	grid-template-columns: auto 135px 115px 1fr;
	grid-template-areas:
		"radio selBtn clrBtn"
		"radio select select";
}

	.eah-fieldButtonWrapper .eahfbw-radio {
		grid-area: radio;
		margin: auto 0px;
	}
	.eah-fieldButtonWrapper .eahfbw-selBtn {
		grid-area: selBtn;
	}
	.eah-fieldButtonWrapper .eahfbw-clrBtn {
		grid-area: clrBtn;
	}
	.eah-fieldButtonWrapper .eahfbw-select {
		grid-area: select;
	}

	.eah-fieldButtonWrapper input[type=radio] {
		margin: auto 0px;
	}

.eah-fieldButtonWrapperSimple {
	display:grid;
	grid-template-columns: auto 135px 115px 1fr;
	gap: 10px;
}

	.eah-fieldButtonWrapperSimple input[type=radio] {
		margin: auto 0px;
	}
/* GroupEditor component styles */
.groupEditor .disabled-table {
    opacity: 0.6;
    position: relative;
}

.groupEditor .disabled-table::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 1;
}

.groupEditor .disabled-table input,
.groupEditor .disabled-table select,
.groupEditor .disabled-table button {
    opacity: 0.5;
    cursor: not-allowed;
}

.groupEditor .disabled-table .zdVueTable table {
    color: #999;
}

.groupEditor .disabled-table .zdVueTable th {
    background-color: #f5f5f5;
    color: #999;
}

.groupEditor .disabled-table .zdVueTable td {
    background-color: #fafafa;
}
.vueElement .groupEditor .subTableCell{
    padding: 1px 8px;
}

.groupEditor .header-section {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
    padding: 10px;
}

.groupEditor .header-section h4 {
    margin: 0;
}

.groupEditor .header-section .input-group {
    margin-left: 30px;
}


.groupEditor .zdVueTable th {
    padding-top: 12px;
    padding-bottom: 10px;
    text-align: center !important;
    font: bold 12px arial;
    background: linear-gradient(#1a9ece, #0084b4) !important;
    color: white;
    /* border: none; */
    border-top: none;
    border-bottom: none;
    word-wrap: break-word;
    white-space: normal;
    vertical-align: bottom;
    border: none;
    box-shadow: none;
}
.groupEditor .zdVueTable table tr:nth-child(1) {
    z-index: 2;
    position: relative
}
.groupEditor .zdVueTable tr td:first-child, .groupEditor .zdVueTable tr th:first-child {
    width: 300px;
    font: bold 12px arial;
    padding: 3px 6px 1px 12px;
    text-align: left;
}

.groupEditor .instructions-panel {
    gap: 10px;
    font: bold 16px arial;
    color: #777;
    padding: 10px;
    max-width: 500px;
}

.groupEditor .instructions-panel label {
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
}

.groupEditor .groupTitle {
    font-weight: 400;
    line-height: 1;
    color: #777;
    font-size: 23.4px;
}
.groupPage .tree-sidebar {
    min-width: 250px;
    max-width: 400px;
    resize: horizontal;
    overflow: auto;
}

.groupPage .content-area {
    min-width: 0; /* Allows flex item to shrink below content size */
    overflow: hidden;
}

.groupPage .tree-sidebar .zd-tree-dropdown {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

.groupPage .selected-group {
    font: bold 16px arial;
    color: #777;
}
.multiTabWrapper {
    display: grid;
    grid-template-columns: auto 1fr;
}

.multiTabWrapper > .mainSection {
    overflow: auto;
}

.multiTabWrapper > .leftTabs {
    overflow: auto;
    border-right: 1px solid #ccc;
}

	.multiTabWrapper > .leftTabs > div {
		padding: 0 10px;
		font-size: 13px;
		line-height: 1em;
		height: 40px;
		display: flex;
	}

	.multiTabWrapper > .leftTabs > div.multiTab {
		height: auto;
		min-height: 40px;
	}
	
	.multiTabWrapper > .leftTabs > div.subTab {
		background-color: whitesmoke;
		padding-left: 25px;
		height: auto;
		min-height: 30px;
	}

		.multiTabWrapper > .leftTabs > div > span {
			margin: auto 0;
		}
			.multiTabWrapper > .leftTabs > div > span i {
				width: 16.25px;
			}

.multiTabWrapper > .leftTabs > .tab.selected {
	background-color: var(--zd-default-highlight);
}

.multiTabWrapper > .leftTabs > .tab:hover {
	background-color: #a2c4ff;
}

.multiTabWrapper > .leftTabs > div > div > span.selected {
    background-color: var(--zd-default-highlight);
}

.multiTabWrapper > .leftTabs > .tab:hover {
    background-color: #a2c4ff;
}

.bulkValid .zdVueModal-body {
	overflow: hidden;
}

.bulkValidTable {
	width: 100%;
	overflow: hidden;
}
.partition-list {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.partition-list li {
    cursor: default;
}

/* has to be 'scroll', not 'auto' or it doesn't work in IPad */
.partition-list .scrollable-list {
    overflow-y: scroll;
    margin: 0;
    padding: 0;
    height: 120px;
    border: 1px solid #ccc;
    -webkit-overflow-scrolling: touch
}

.partition-list .selected {
    background-color: #bdbdbd;
}

.partition-list .controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


.alarmsDesktopCrumbs {
    white-space: normal;
    word-wrap: break-word;
    font-size: 14px;
}

.alarmsMobileCrumbs {
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    font-size: 12px;
    padding: 4px;
    border-bottom: solid 1px rgba(0,0,0,.15);
}

.alarmHistorySmallDate::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.alarmEditRow {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

    .alarmEditRow .alarmEditLeft {
        display: flex;
        flex-direction: column;
        justify-content:center;
        text-align: right;
    }

.alarmEditButton {
    width: 100%;
    white-space: normal;
    font-size: 12px;
    font-weight: bold;
    position: relative;
}

.alarmEditRow {
    display: grid;
    grid-template-columns: 1fr 2fr;
    width: 100%;
}

.slide-enter-to, .slide-leave {
    max-height: 100px;
    overflow: hidden;
}

.slide-enter, .slide-leave-to {
    overflow: hidden;
    max-height: 0;
}

.slide-enter-active {
    -moz-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.slide-leave-active {
    -moz-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}


.alarm-hist-popup-info td {
    text-align: left;
    padding: 5px 10px 3px 5px;
    border-bottom: 1px solid lightgray;
}
    .alarm-hist-popup-info td:first-child {
        font-weight: bold;
        font-size: 12px;
    }

    .alarm-hist-popup-info td div {
        display: inline;
        vertical-align: bottom;
    }


.alarmsSideBar {
    grid-column: 1 / span 2;
    font-size: 14px;
    max-height: 100%;
    overflow: hidden;
    height: 100%;
}

.alarmsHistoryGrid {
    display:grid;
    grid-template-columns: auto 1fr auto 1fr;
    width: 300px;
    margin:auto;
}

.alarmsHistoryGrid div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 5px;
}



.alarmsSmallHeader {
    text-align: center;
    font-size: 16px;
    line-height: 1em;
    margin-top: 4px;
}

.smallNoRecordsText h4 {
    font-size: 15px;
}

.alarmsMobileCollapseHeader {
    padding: 5px;
    font-size: 15px;
    height: 33px;
    border-bottom: solid 1px rgba(0,0,0,.15);
    border-top: solid 1px rgba(0,0,0,.15);
    background: whitesmoke;
}


.clickableCell.alarmsQuickHistoryLink {
    font-size: 1.1em;
    text-decoration:underline;
}

.alarmsAggregateValue {
    white-space: normal;
    display:flex;
    flex-direction: column;
    justify-content: center;
    padding-top:2px;
}

.alarmsFormulaResult {
    background: whitesmoke;
    text-align: center;
    border: solid 1px lightgrey;
    border-top: none;
    padding: 3px 0px;
}


.alarmsHelpFigText {
    font-size: 12px;
    font-weight: 300;
    font-style: italic;
}

.alarmsHelpImage {
    max-width: 100%;
    padding: 2px;
    margin: auto;
}

.alarmsExampleContainer {
    display: inline-block;
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 1%), 0 4px 20px 0 rgb(0 0 0 / 1%);
    margin-top:15px;
}


    .alarmsExampleContainer div:first-child {
        display: grid;
        grid-template-rows: auto auto;
    }

    .alarmsExampleContainer .alarmsHelpImageText {
        text-align: center;
        background: whitesmoke;
        padding: 4px;
    }

    .alarmsExampleContainer .alarmsHelpImageText div:first-child{
        max-width: 80%;
        white-space:normal;
        margin:auto;
    }


    .alarmHelpPagTab {
        padding: 5px;
        background: whitesmoke;
        margin: 0px 5px;
        cursor: pointer;
    }
        .alarmHelpPagTab:hover {
            background: rgb(196, 218, 255);
        }

.clickableCell.luaLink {
    text-decoration: underline;
    color: blue
}

.alarmsInlineQuestionCircle {
    font-size:1.1em;
}

.alarmsInlineSpinner {
    height: 16px;
    width: 16px;
    margin: auto;
}

.alarmsMobileTimestamp {
    grid-column: 1 /span 2;
    text-align: center;
    line-height: 1.2;
    font-size: .90em;
    font-style: italic;
    margin-top: 1px;
}

.ackTooltip {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 5px;
    row-gap: 5px;
    width: max-content;
}

.ackTooltip i {
    background-color: white;
    padding: 2px;
}

.ackTooltip span {
    text-align: left;
}

.variance-high-low-container {
    display: grid;
    grid-template-columns: auto 25px;
    padding-left: 12px;
}

.variance-high-low-container > .rightCol {
    display: grid;
    grid-template-rows: 37% 26% 37%;
}

.variance-high-low-container > .rightCol > .topLine {
    grid-template-columns: auto 25px;
    margin-top: 45%;
    width: 50%;
    border-right: solid 1px lightgray;
    border-top: solid 1px lightgray;
    margin-top: 70%;
    height: 40%;
    padding-top: 4px;
}

.variance-high-low-container > .rightCol > .middle {
    margin-top: -15%;
    text-align: center;
    color: gray;
    font-size: 1.7em;
    cursor: pointer;
    align-items: center;
}

.variance-high-low-container > .rightCol > .bottomLine {
    width: 50%;
    border-right: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    height: 40%;
}

.alarmsPage .sveLayout .sve-sidebar {
    padding-bottom: 0;
}
.alarmsPage .zdSplitViewEditor .vueElement .subTableCell.mobile {
	height: 65px;
}
.cs-table :not(tfoot) tr td{
	cursor:cell;
}

.cs-copy-area {
	z-index:-1000;
	position: absolute; 
	left: -1000px;
	top:0px;
	width:0px;
	height:0px;
}

.cs-copy-menu, .cs-totals {
	display: none;
	z-index: 1000;
	position: absolute;
	overflow: hidden;
	border: 1px solid #CCC;
	white-space: nowrap;
	font-family: sans-serif;
	background: #FFF;
	color: #333;
	border-radius: 5px;
	padding: 0;
}

.cs-copy-menu div {
	padding: 8px 12px;
	cursor: pointer;
	list-style-type: none;
	transition: all .3s ease;
}

.cs-totals div {
	padding: 8px 12px;
	cursor: pointer;
	list-style-type: none;
	transition: all .3s ease;
}

.cs-copy-menu div:hover {
	background-color: #DEF;
}

.cs-table .highlighted:not(.location) {
  background-color:#addfff !important;
  /*border: 1px solid #E8615A;*/
}
.channelBrowser-window {
    min-width: 300px;
}

.channelBrowser-body {
    min-height: 275px;
    max-height: 275px;
}

.channelBrowser-fieldlist {
    overflow-y: auto;
    max-height: 50vh;
}

.graph-comparison {
	font-size: 12px;
	gap: 10px;
	display: grid;
	grid-template-columns: minmax(350px, auto) 1fr;
}

.graph-comparison .deviceList {
	overflow: auto;
}

.graph-comparison .deviceLink {
	cursor: pointer;
	padding: 4px;
}

.graph-comparison .deviceLink.selected {
	background-color: var(--zd-default-highlight);
}

.graph-comparison .deviceLink:hover {
	background-color: var(--zd-default-highlight-hover);
}

.graph-comparison .legend {
	padding: 4px;
}

.graph-comparison table thead td {
	font-weight: bold;
}

.graph-comparison table td {
	padding: 2px 4px;
}

.graph-comparison .dlSearchBar {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	min-height: 30px;
	align-items: center;
	background: white;
	max-width: 180px;
	border: var(--zd-border);
	border-radius: 4px;
}

	.graph-comparison .dlSearchBar .dlSearchBox {
		height: 100%;
		width: 100%;
		border: none;
		font-size: 14px;
		padding-left: 10px;
	}

		.graph-comparison .dlSearchBar .dlSearchBox:focus {
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
			-webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
			outline: none !important;
		}
.graphEditorLayout {
    display: grid;
    grid-template-rows: auto minmax(0,1fr);
/*    grid-template-columns: minmax(0,1fr) auto;*/
    grid-column-gap: 1px;
    height: 100%;
    width: 100%;
}

    .graphEditorLayout .db-widgetButton, .graphEditorEditPanel .db-widgetButton {
        color: #0f0f0fa6;
    }

        .graphEditorLayout .db-widgetButton:hover, .graphEditorEditPanel .db-widgetButton:hover {
            color: dodgerblue;
        }

    .graphEditorLayout .graphName {
        margin: 0px;
        margin-top: 4px;
        font-size: 16px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .graphEditorLayout .sve-header {
        padding: 10px;
        grid-column: 1;
    }


    .graphEditorLayout .metaHeaderGrid {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0px 7px;
    }

    .graphEditorLayout .center, .graphEditorModal .center {
        display: block;
        text-align: center;
    }

    .graphEditorLayout .metaLabel {
        background: #e7e7e7;
        padding: 1px;
    }

    .graphEditorLayout .vCenter, .graphEditorEditPanel .vCenter {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


.zdGraphNew.vueElement .filterOptions {
    background: whitesmoke;
    border: solid 1px gainsboro;
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.graphEditorToolbar {
    font-size: 16px;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
}

.graphRenderSpinner, .graphErrorMessage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

    .graphErrorMessage {
        color: red;
        font-size: 20px;
    }


    .graphEditorEditPanel {
        grid-column: 2;
        grid-row: 1/span 2;
        height: 100%;
        background: white;
    }

    .graphEditorEditPanel .chevrons {
        cursor: pointer;
        font-size: 16px;
        color: rgba(0,0,0,.25);
    }


    .graphEditorEditPanel .chevrons {
        color: #0f0f0fa6
    }

        .graphEditorEditPanel .chevrons:hover {
            color: dodgerblue;
        }

        .graphEditorEditPanel .chevrons.expand {
            width: 100%;
            text-align: center;
        }

        .graphEditorEditPanel .chevrons.collapse {
            margin-left: 5px;
            font-size: 20px;
        }

    .graphEditorEditPanel .graphPropertyText.rotateText {
        text-orientation: mixed;
        writing-mode: vertical-rl;
    }

    .graphEditorEditPanel .graphPropertyText {
        font-size: 18px;
    }

    .graphEditorEditPanel.collapsed {
        cursor: pointer;
        background-color: whitesmoke;
        border-left: solid 1px rgba(0,0,0,.25);
    }

        .graphEditorEditPanel.collapsed:hover {
            background-color: rgba(0,0,0,.10);
        }

    .graphEditorEditPanel .graphNameText {
        text-align: center;
        font-size: 1.3em;
        font-weight: bold;
    }

    .graphEditorEditPanel.expanded {
        width: 500px;
        box-shadow: -6px 0px 11px -7px rgba(0,0,0, .30);
        padding: 12px;
        padding-top: 0px;
        padding-left: 8px;
    }

    .graphEditorEditPanel .expandedHeader {
        padding: 10px;
        cursor: pointer;
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        grid-gap: 10px;
        border-bottom: solid 1px rgba(0,0,0,.10);
        padding-left: 4px;
    }


    .graphEditorEditPanel .zdtreedropdown .dropdown {
        max-height: 200px;
        width: 100%;
    }

    .graphEditorEditPanel .expandedHeader :nth-child(2) {
        text-align: center;
    }

        .graphEditorEditPanel .configBody {
            margin-top: 8px;
            overflow: auto;
            display: grid;
            grid-template-rows: auto minmax(0,1fr);
            height: 100%;
            overflow: hidden;
        }


        .graphEditorEditPanel .configBody.graphMode {
            display: grid;
            grid-template-rows: auto minmax(0,1fr);
        }


            .graphEditorEditPanel .configBody.graphMode .windowRefreshGrid {
                display: grid;
                margin-bottom: 8px;
            }

        .graphEditorEditPanel .configBody .btn-default.active, .graphEditorModal .btn-default.active {
            background-color: #c4daff;
        }

    .graphEditorEditPanel .fieldLayoutRows, .graphEditorAssociations.fieldLayoutRows {
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        padding: 4px;
        grid-gap: 8px;
        width: 70%;
        margin: auto;
        margin-top: 3px;
    }

    .graphEditorEditPanel hr {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .graphEditorEditPanel .fieldLayoutCols { /* take note of the 100 pixel width here*/
        display: grid;
        grid-template-columns: 105px minmax(0,1fr);
        padding: 2px;
    }

    .graphEditorEditPanel .noPaddingNoHeight {
        padding: 0px;
        height: unset;
    }

    .graphEditorEditPanel i.fa-bars {
        cursor: move;
    }
    .graphEditorEditPanel .yAxisList {
        display: grid;
        grid-template-columns: 105px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
        grid-column: 1/span2;
        width: 100%;
    }

        .graphEditorEditPanel .yAxisList .propLabel {
            background: whitesmoke;
            text-align: center;
        }

    .graphEditorEditPanel .sidebarGrid {
        display: grid;
        grid-template-rows: minmax(0,1fr);
        height: 100%;
    }

    .graphEditorEditPanel .sidebarGridFooter {
    }


    .graphEditorEditPanel .fieldLayoutRows .fieldLabelWithTooltip {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        grid-gap: 2px
    }

    .graphEditorEditPanel .seriesTable {
        width: 100%;
        grid-column: 1 / span 6;
        margin-top: 20px;
    }

        .graphEditorEditPanel .seriesTable .actionButtons {
            text-align: center;
            font-size: 15px;
            cursor: pointer;
        }

        .graphEditorEditPanel .seriesTable .tableHeader {
            background: whitesmoke;
            white-space: normal;
        }
        
        .graphEditorEditPanel .seriesTable .tableHeader .yAxisColumn {
            width: 45px;
        }

        .graphEditorEditPanel .seriesTable .tableHeader .positionColumn {
            width: 61px;
        }

        .graphEditorEditPanel .seriesTable .tableHeader .minMaxColumn {
            width: 40px;
        }

        .graphEditorEditPanel .seriesTable th, .graphEditorEditPanel .seriesTable td {
            padding: 4px 2px;
        }

        .graphEditorEditPanel .seriesTable tr {
            border-bottom: solid 1px rgba(0,0,0,.10);
        }

        .graphEditorEditPanel .seriesTable .iconColumn {
            width: 15px;
        }

        .graphEditorEditPanel .seriesTable .yAxisCell {
            font-weight: 600;
        }

        .graphEditorEditPanel .seriesTable .yesNoToggle {
            text-align: center;
            padding-top: 3px;
        }

    .graphEditorEditPanel .chartHeader {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        border-bottom: solid 1px rgba(0,0,0,.10);
        border-top: solid 1px rgba(0,0,0,.10);
        padding: 8px;
        background: rgba(0,0,0,.05);
        grid-gap: 4px;
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
    }

        .graphEditorEditPanel .chartHeader:hover {
            background: rgba(0,0,0,.10);
        }

        .graphEditorEditPanel .chartHeader.active {
            background: rgba(0,0,0,.10);
        }

    .graphEditorEditPanel .chartConfig {
        padding: 6px;
        border: solid 1px rgba(0,0,0,.20);
        border-top: none;
        border-radius: 0px 0px 4px 4px;
    }


    .graphEditorEditPanel .deviceListing {
        cursor: pointer;
        text-decoration: underline;
        color: #6d6b6b;
        min-width: 100px;
    }

        .graphEditorEditPanel .deviceListing:hover {
            color: black;
        }

        .graphEditorEditPanel .deviceListing.override {
            color: blue;
        }

    .graphEditorEditPanel .embeddedTable {
        padding: 6px;
        margin: 2px;
        background: whitesmoke;
    }

    .graphEditorEditPanel .embeddedTableGrid {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        grid-gap: 8px;
    }

    .graphEditorEditPanel .changeSeriesDataPointButton {
        width:220px;
        text-align: left;
    }

.graphEditorEditPanel .dragDropChartList {
    height: 100%;
    overflow: auto;
    padding-bottom: 8px;

}

.graphOptionsModalGrid {
    width:80%;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(auto, 1fr) minmax(0,1fr);
}
    .graphEditorEditPanel .legendPositionDiv {
        grid-row: 2;
        grid-column: 1/ span 2;
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
    }

.graphEditorEditPanel .showXAxisDiv {
    grid-row: 2;
    grid-column: 3/ span 3;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.graphEditorEditPanel .showXAxisOffset {
    grid-row: 3;
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}


.graphEditorLayout .pointer {
    cursor: pointer;
}

.presetGraphTopbar {
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

label.nowrap {
    white-space: nowrap;
    font-weight: normal;

}

.graphEditorEditPanel tr.clickableRow {
    cursor: pointer;
}
    .graphEditorEditPanel tr.clickableRow:hover {
        background: whitesmoke;
    }
.graphEditorEditPanel .dataFieldButton {
    font-size: unset;
    height: 29px;
    width: 250px;
    text-align: left
}

/*    .graphEditorEditPanel .refreshButton {
        font-size: 24px;
        cursor: pointer;
        width: min-content;
        padding: 7px;
        margin: auto;
    }*/

.btn-small {
    padding: 1px 5px;
    font-size: 14px;
    /* line-height: 1.5; */
    border-radius: 3px;
}

.zdChartTitle {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 8px 0px 4px 0px;
    white-space: normal;
}



.graphEditorEditPanel .pulsingRefresh, .graphEditorLayout .pulsingRefresh {
    background: rgba(24,138,180,.8);
    box-shadow: 0 0 0 0 rgba(24,138,180, 1);
    animation: pulse-refresh 2s infinite;
    border-radius: 4px;
    padding: 4px;
}

.graphEditorEditPanel .refreshButton, .graphEditorLayout .refreshButton {
    border-radius: 4px;
    padding: 4px;
    font-size: 20px;
    margin: 5px;
}

.graphEditorLayout .bigToolButton {
    font-size: 25px;
    margin-right: 10px
}

@keyframes pulse-refresh {
    0% {
        transform: scale(1);
        color: white;
        box-shadow: 0 0 0 0 rgba(24,138,180, .5);
    }

    70% {
        transform: scale(1);
        color: white;
        box-shadow: 0 0 0 10px rgba(24,138,180, 0);
    }

    100% {
        transform: scale(1);
        color: white;
        box-shadow: 0 0 0 0 rgba(24,138,180, 0);
    }
}

.graphEditorLayout .pulsingError {
    box-shadow: 0 0 0 0 rgba(255,0,0, 0.5);
    animation: pulse-error 2s infinite;
    border-radius: 4px;
}

@keyframes pulse-error {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255,0,0, 0.5);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255,0,0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255,0,0, 0);
    }
}

.graphEditorLayout .undoGraphPreset {
    border-left: solid 2px #c0c0c0;
    padding-left: 8px;
}

.graphEditorLayout .graphName {
    font-size: 18px;
    text-align: center;
    margin: 0px 2px;
    max-width: 500px;
    white-space: normal;
}


    .graphEditorLayout .deleteGraphPreset:hover {
        color: red;
    }


    .graphSaveDialog .associationButton {
        padding: 4px;
        font-size: 13px;
        width: 100%;
    }

    .graphSaveDialog .fieldLabel, .graphEditorModal .fieldLabel {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .graphSaveDialog .selectionsGrid, .graphEditorModal .selectionsGrid {
        display: grid;
        grid-template-columns: 1fr auto;
    }

        .graphSaveDialog .selectionsGrid .x, .graphEditorModal .selectionsGrid .x {
            margin-left: 4px;
            margin-top: 4px;
            color: red;
        }


    .graphWizardPreviewArea {
        background-color: whitesmoke;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%
    }

    .graphWizardCaptionArea {
        background-color: whitesmoke;
        flex-grow: 1;
        margin-left: 30px;
        white-space: normal;
        padding: 5px 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 480px;
    }

.dateWindowWithCancel.hasCustomWindow .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.yAxisDropDown {
    font-size: 17px;
    text-align: right;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 24;
}

    .yAxisDropDown .yAxisMenu {
        top: 100%;
        left: calc(-210px + 100%);
        width: 210px;
        padding: 4px;
    }

.gap-5 {
    gap: 5px;
}

.dataSourceSeriesRow {
    gap: 5px;
    grid-column: 2 / span 2;
}

.graphEditorWrapper {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto; 
    grid-template-rows: minmax(0,1fr);
}

    .graphEditorWrapper .graphViewerWrapper {
        display: block;
        grid-column: 1;
    }

.graphEditorEditPanel .collapsedEditorPanel {
    padding: 10px;
    height: 100%;
}

.editorConfigPanelHeader {
    background: whitesmoke;
    margin-bottom: 5px;
    display: grid;
    grid-template-columns: auto 1fr;
}

.chartTypeSelector {
    padding: 0px;
    height: unset;
}

.legendPositionLabel {
    width: 105px;
}

.legendPositionSelector {
    width: 140px;
}

.hideAxisToggle {
    margin: 4px 12px 4px 8px;
}

.addDataSourceControl {
    cursor: pointer;
    font-size: 12px;
}

    .addDataSourceControl .plusButton {
        font-size: 18px;
    }

    .addDataSourceControl .addDataSourceDropdown {
        right: 0;
    }

    .addDataSourceControl ul {
        font-size: 12px;
    }

.dataSourcesWrapper {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: min-content;
    grid-gap: 3px;
}

.seriesTableWrapper {
    grid-column: 1 / span 6;
    margin-top: 20px;
}

    .seriesTableWrapper .seriesColumn {
        width: 277px;
    }

    .seriesTableWrapper .actionColumn {
        width: 16px;
    }

    .seriesTableWrapper .seriesCell {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .seriesTableWrapper .seriesFormulaId {
        min-width: 25px;
    }

 .colorPicker {
    width: 40px;
    height: 20px;
}

.data-source-aggregation {
    width: 245px;
}

.embeddedTableGrid .legacyCarryForwardLabel {
    padding-top: 9px;
    padding-left: 4px;
    font-weight: normal;
}

.embeddedTableGrid .legacyCarryForwardLabel .legacyCarryForwardField {
    align-items: center;
    justify-content: right;
    display: flex;
}

.embeddedTableGrid .legacyLabelFieldWrapper {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto 57px;
    grid-column: 2 / span 2
}

.embeddedTableGrid .unitsFieldLabel {
    margin: 0px 10px;
}

.embeddedTableGrid .unitsInput {
    width: 57px;
}

.formulaSeriesWrapper {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
}

    .formulaSeriesWrapper .formulaHelpButton {
        grid-column: 3 / span 2;
        margin-left: auto;
    }

.addButtonsRow {
    border: none;
}

.addButtons {
    text-align: center;
    padding-top: 6px;
}

.addYAxisButton {
    margin: 2px 0px;
}

.addChartButtonWrapper {
    margin-top: 16px;
}

.formulaHelpIcon {
    color: rgb(85 76 76);
    font-size: 1.3em;
}

.dataSourceSetupHelpButton {
    height: 34px;
}

.dataSourceSetupHelpIcon {
    font-size: 16px;
    cursor: pointer;
}

.dataSourceRow {
    display: grid;
    grid-template-columns: 1fr min-content min-content;
    padding-left: 10px;
}

i.chartActionButton {
    font-size: 15px;
}
.configure-icon {
    position: absolute;
    right: 5px;
    top: 0px;
    font-size: 18px;
    cursor: pointer;
}
.chart-layout .zd-dropdown-menu {
    padding: 10px;
    cursor: default;
    left: -210px; /* becuse the base zd-dropdown-menu has left, we have to use -left to override, instead of right */
    width: 230px;
}

    .chart-layout .zd-dropdown-menu .ddlGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 4px;
    }

    .chart-layout .zd-dropdown-menu .ddlLabel {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
    }

    .chart-layout .zd-dropdown-menu .ddlHeader {
        border-bottom: solid 1px #e8e8e8;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .chart-layout .zd-dropdown-menu .ddlHeaderLabel {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .chart-layout .zd-dropdown-menu .ddlInput {
    }

    .chart-layout .zd-dropdown-menu .ddlFooter {
        border-top: solid 1px #e8e8e8;
        text-align: center;
        margin-top: 5px;
        padding-top: 5px;
    }
.vueElement.companyLists .listSelectionFlyout {
    -webkit-box-shadow: 1px 0px 11px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 0px 11px 1px rgba(0,0,0,0.15);
}

.vueElement.companyLists .listButton {
    padding: 5px;
    padding-left: 10px;
    font-size: 1.3em;
    cursor: pointer;
    border-top: solid 1px rgba(0,0,0,.15);
    border-bottom: solid 1px rgba(0,0,0,.15);
    border-top: none;
}



    .vueElement.companyLists .listButton:hover {
        background-color: #c4daff;
    }


    .vueElement.companyLists .listButton.listItem {
        padding-left: unset;
        background-color: #d4d3d3;
    }


    .vueElement.companyLists .listButton.listItem:first-child {
        border-top: unset;
    }


    .vueElement.companyLists .listButton.listItem:hover {
        background-color: #c4daff;
    }

.vueElement.companyLists .modalHeader {
    padding: 8px;
    font-size: 19px;
    border-bottom: solid 1px rgb(229,229,229);
    margin-bottom: 5px;
    font-weight: bold
}


.vueElement.companyLists .modalFooter {
    padding: 8px;
    border-top: solid 1px rgb(229,229,229);
    margin-top: 5px;
    text-align: center;
    display: grid;
    grid-template-columns: 50% 50%;
}

.vueElement.companyLists .formRowLabel {
    padding: 6px 8px;
    display: table;
}

    .vueElement.companyLists .formRowLabel div {
        display: table-cell;
        vertical-align: middle;
        text-align: right;
    }

.vueElement.companyLists .formRowValue {
    padding: 6px 8px;
    display: table;
}

    .vueElement.companyLists .formRowValue div {
        display: table-cell;
        vertical-align: middle;
        text-align: left;
    }

.vueElement.companyLists .xmlToggle {
    font-size: .9em;
    cursor: pointer;
}

.vueElement.companyLists .xmlToggle:hover {
    text-decoration: underline;
}
    .vueElement.companyLists .xmlToggle.active {
        color: blue;
        text-decoration: underline;
    }
.deviceAssets .zdSplitViewEditor .zdInputPanel,
.deviceAssets .zdSplitViewEditor .zdInputPanel table,
.deviceAssets .zdSplitViewEditor .zdInputPanel .zdInputPanelRight,
.deviceAssets .zdSplitViewEditor .zdInputPanel .zdInputPanelRight .zdInputPanelInput:not(input[type="checkbox"]),
.deviceAssets .zdSplitViewEditor .zdInputPanel .zdInputPanelRight .zdInputPanelInputSelect {
	width: 100%;
}

.deviceAssets .zdSplitViewEditor .zdInputPanel .zdInputPanelRight .standardInput {
	display: flex;
	flex-direction: row;
}

.deviceAssets .zdInputPanelInputLabelUnits,
.deviceAssets .zdInputPanel + .stretch {
	width: fit-content;
}

/* Device Assets Validation and Warning Styles */
.deviceAssets .logbook-warning {
	background-color: #fff3cd;
	border: 1px solid #ffeaa7;
	color: #856404;
	padding: 8px 12px;
	border-radius: 4px;
	margin-bottom: 10px;
	font-size: 13px;
}

.deviceAssets .logbook-warning i {
	color: #f39c12;
}

.deviceAssets .validation-error {
	color: #d9534f;
	font-weight: 500;
}

.deviceAssets .tank-validation-summary {
	background-color: #f2dede;
	border: 1px solid #ebccd1;
	color: #a94442;
	padding: 10px;
	border-radius: 4px;
	margin: 10px 0;
}

.deviceAssets .required-field::after {
	content: " *";
	color: red;
}

/* DeviceAssets component styles */
.deviceAssets .flexColumn {
    display: flex;
    flex-direction: column;
}

.deviceAssets .flexRow {
    display: flex;
    flex-direction: row;
}

.deviceAssets .field-selector-buttons {
    display: flex;
    flex-direction: column; 
    gap: 5px;
    min-width: 120px;
    padding-top: 3px;
}

.deviceAssets .field-selector-buttons .btn {
    font-size: 11px;
    padding: 6px 10px;
    white-space: nowrap;
    line-height: 1.2;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #495057;
    transition: all 0.15s ease-in-out;
    width: 100%; 
}

.deviceAssets .field-selector-buttons .btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

.deviceAssets .field-selector-buttons .btn:active {
    background-color: #dee2e6;
    border-color: #adb5bd;
    transform: translateY(1px);
}

.deviceAssets .field-selector-buttons .btn i {
    margin-right: 5px;
    font-size: 12px;
}

.deviceAssets .tank-preview-container {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    background-color: #fafafa;
    margin-top: 10px;
}

.deviceAssets .tank-preview-container::before {
    content: "Tank Preview";
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
}

.deviceAssets .input-panel-container {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.deviceAssets .sidebar-extra-content {
    padding: 10px;
}

.deviceAssets .field-selection-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: start;
}

.deviceAssets .input-panel-section {
    min-height: 200px;
    flex: 1;
}

.deviceAssets .button-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 120px;
}

.deviceAssets .tank-widget-section {
    min-width: 200px;
}

/* Responsive adjustments - Keep vertical layout without overriding flex-direction */
@media (max-width: 1200px) {
    .deviceAssets .field-selector-buttons {
        /* Only adjust spacing and sizing, keep flex-direction: column from base */
        gap: 6px;
        min-width: 110px;
        padding-top: 10px;
    }
    
    .deviceAssets .field-selector-buttons .btn {
        font-size: 10px;
        padding: 5px 8px;
    }
}

@media (max-width: 768px) {
    .deviceAssets .flexRow {
        flex-direction: column;
        gap: 10px;
    }
    
    .deviceAssets .field-selector-buttons {
        /* Only adjust spacing and sizing, keep flex-direction: column from base */
        gap: 6px;
        min-width: auto;
        padding-top: 0;
        align-self: flex-start; /* Prevent stretching */
    }
    
    .deviceAssets .field-selector-buttons .btn {
        font-size: 10px;
        padding: 4px 8px;
    }
}


div.deviceAttributeSelector {
    height: 450px;
    width: 600px;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
}

div.deviceAttributeSelector > .head {
    padding-bottom: 10px;
    border-bottom: solid 1px #d9d6d6;
    display: grid;
    grid-template-columns: 1fr auto;
}

div.deviceAttributeSelector h3, div.deviceAttributeSelector h2, div.deviceAttributeSelector h4 {
    margin: 0px;
}

div.deviceAttributeSelector > .foot {
    padding-top: 10px;
    text-align: center;
    border-top: solid 1px #d9d6d6;
}

div.deviceAttributeSelector > .content {
    height: 100%;
}

div.deviceAttributeSelector .scopePrompt {
    width: 60%;
    margin: auto;
    margin-top: 15%;
}

div.deviceAttributeSelector .selectionListingHeader {
    background-color: rgba(0, 0, 0, 0.04);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-align: center;
    display: grid;
    grid-template-columns: auto 1fr;
}

    div.deviceAttributeSelector .attributePicker {
        display: grid;
        height: 100%;
        grid-template-rows: auto minmax(0,1fr) auto;
        overflow: auto;
    }

.changeDevice {
    color: blue;
    text-decoration: underline;
    font-size: .85em;
    cursor: pointer;
    margin-top: 8px;
}

.deviceControlApps input[type=checkbox] {
	box-shadow: none;
	margin: 0px;
	width: 20px;
}

.deviceControlApps .zdInputPanel:not(.has-prev-col) .zdInputPanelLeft {
	white-space: normal;
}
.zdSplitViewEditor .deviceInfo .formRowLabel {
    margin: auto auto auto 0px;
    padding: 0;
    text-align: left;
}

.deviceInfo .formRowValue {
    padding: 2px 0;
    display: table;
}
.deviceInfo .formRowValue input,
.deviceInfo .formRowValue select {
    width: 100%;
    padding: 6px 12px;
    height: 25px;
    font-size: 12px;
    border: var(--zd-border);
    border-radius: 4px;
}

.deviceInfo .formRowValue [disabled],
.deviceInfo .standardInput [disabled] {
    cursor: no-drop;
    background-color: #eee;
    opacity: 0.7;
}

.deviceInfo .formRowValue div {
    display: table-cell;
    text-align: left;
}

.deviceInfo .deviceInfoLabelValue {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-auto-rows: min-content;
    white-space: normal;
}

.deviceInfo .deviceComunicationsLabelValue {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-rows: min-content;
    white-space: normal;
}

.deviceInfo p {
    margin: 0;
    white-space: break-spaces;
}

.deviceInfo h4 {
    margin: 0px 0px 10px 0px;
}

.deviceInfo .deviceInfoTab {
    overflow: hidden;
    gap: 10px;
    padding-bottom: 10px;
}

.deviceInfo .diContainer {
    padding: 15px 22px 15px 26px;
    border: 1px solid lightgray;
    background-color: white;
    width: 520px;
    float: left;
    margin: 0 10px 10px 0px;
}

.deviceInfo .diSubContainer {
    padding-left: 26px;
    padding-right: 20px;
}

.deviceInfo .ipContainer {
    overflow: auto;
    padding-right: 5px;
}

.deviceInfo .deviceInfoLabelValue .form-control,
.deviceInfo .ipContainer .zdInputPanelInput,
.deviceInfo .ipContainer .zdInputPanelInputSelect {
    height: 25px;
    font-size: 12px;
}

.deviceComunicationsLabelValue select {
	height: 25px;
    padding: 4px;
    font-size: 12px;
}

.deviceInfo .deviceComunicationsLabelValue .form-control,
.deviceInfo .ipContainer .zdInputPanelInput,
.deviceInfo .ipContainer .zdInputPanelInputSelect {
    height: 25px;
    font-size: 12px;
}

.deviceInfo .ipContainer .zdInputPanelInput {
    padding: 6px 12px;
}

.deviceInfo .ipContainer .zdInputPanelInputSelect {
    padding-left: 8px;
}

.deviceInfo .ipContainer .zdInputPanelInput,
.deviceInfo .ipContainer .zdInputPanelInputSelect {
    border: var(--zd-border);
    border-radius: 4px;
}

.deviceInfo .standardInput,
.deviceInfo .ipContainer .zdInputPanelInput,
.deviceInfo .ipContainer .zdInputPanelInputSelect {
    width: 100% !important;
}

.deviceInfo .ipContainer .zdInputPanel {
    background-color: white;
    border: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    width: 100%;
}
.deviceInfo .ipContainer .zdInputPanel table {
    width: 100%;
    margin: 0;
}

.deviceInfo .ipContainer .zdInputPanelMultiLine {
    white-space: pre;
    padding: 1px 12px;
    line-height: 16px;
}

.deviceInfo .ipContainer .zdInputPanelLeft {
    border: none;
    padding: 2px 0;
    width: 40% !important;
    vertical-align: middle;
}

.deviceInfo .ipContainer .zdInputPanelRight {
    width: 100% !important;
    padding: 2px 0;
}

.deviceInfo .zdVueTable .subTableHeader,
.deviceInfo .zdVueTable .subTableCellLarge {
    white-space: nowrap;
}

.deviceInfo {
    background-color: white;
}

.deviceInfo > .masterContainer {
    display: grid;
    grid-template-columns: auto 1fr;
    height: 100%;
    overflow: hidden;
}

.deviceInfo .leftTabs {
    background-color: white;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
}

.deviceInfo .leftTabs > span {
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
}

.deviceInfo .leftTabs > span.selected {
    background-color: var(--zd-default-highlight);
}

.deviceInfo .leftTabs > span:hover {
    background-color: #a2c4ff;
}

.deviceInfo .leftTabs > span.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.deviceInfo .leftTabs > span.disabled:hover {
    cursor: not-allowed;
}

.deviceInfo .deviceAssetContainer {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.mainSection .sectionHeader {
    background-color: whitesmoke;
    margin: 0;
    padding: 5px 15px;
    border-bottom: 1px solid #ccc;
    white-space: normal;
}

.dlList {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
}

    .dlList .dlDevice > .dlListItem {
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
    }

    .dlList .dlMain,
    .dlList .dlSub {
        display: flex;
        flex-flow: row nowrap;
        flex-grow: 1;
        align-items: center;
    }

    .dlList .dlMain {
        min-height: 22px;
    }

    .dlList .dlSub {
        justify-content: flex-end;
    }

    .dlList.mobile .dlListItem {
        min-height: 40px;
    }

    .dlList.mobile .dlSearch {
        min-height: 40px;
    }

    .dlList.mobile .dlIcon {
        width: 40px;
    }

    .dlList.desktop .dlMain {
        align-items: initial;
    }

    .dlList.desktop .dlListItem {
        align-items: initial;
    }

    .dlList.desktop .dlGroup > .dlListItem {
        font-size: 12px;
        min-height: 25px;
    }

        .dlList.desktop .dlGroup > .dlListItem > .dlName {
            padding-top: 6.6px;
            padding-bottom: 4px;                       
        }

        .dlList.desktop .dlGroup > .dlListItem > .dlExtra {
            padding-top: 4.6px;
        }

        .dlList.desktop .dlGroup > .dlListItem > .dlIcon {
            align-items: initial;
            padding-top: 5px;
        }

    .dlList.desktop .dlDevice > .dlListItem {
        font-size: 11px;
    }

        .dlList.desktop .dlDevice > .dlListItem > .dlMain > .dlName {
            padding-top: 4.6px;
            padding-bottom: 3px;
        }

        .dlList.desktop .dlDevice > .dlListItem > .dlMain > .dlIcon {
            align-items: initial;
            padding-top: 4px;
        }

    .dlList.desktop .dlCount {
        color: #808080;
        background-color: unset;
        border: unset;
        padding: unset;
        padding-top: 1.41px; /*Due to differnce in font size*/
    }

.dlList .dlSearchWrapper {
    width: 100%;
    flex-grow: 0;
}

.dlList .dlContent {
    width: 100%;
    flex-grow: 1;
    overflow:auto;
    overflow-y: auto;
}

.dlContent > div:last-child {
    margin-bottom: 100px;
}

.dlListItem {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    align-items: center;
    background: white;
    cursor: pointer;
}

    .dlListItem.hasBorder {
        box-shadow: inset 1px -1px 0 0 #ddd,
            inset -1px 0 0 0 #ddd;
    }

    .dlListItem.desktop:hover {
        background: #c4daff;
    }

    .dlListItem.selected {
        background: #c4daff;
    }

    .dlListItem.sticky {
        position: sticky;
        top: 0;
    }

    .dlListItem .dlName {
        flex-grow: 1;
        white-space: normal;
        word-break: break-word;
        padding: 0px 5px;
        padding-top: 1.6px;
        line-height: 14px;
        color: #444343;
    }

    .dlListItem .dlLastUpdatedIndicator {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 10px 0 0;
        border-color: #ddd transparent transparent transparent;
        align-self: stretch;
    }

        .dlListItem .dlExtra .dlIcon {
            color: #0052ce;
        }

    .dlListItem .dlExtra {
        margin: 0 5px 0 5px;
    }

    .dlListItem .dlLastUpdatedText {
        align-self: flex-end;
        font-size: 11px;
        color: gray;
        white-space: nowrap;
        font-style: italic;
    }

.dlIcon {
    flex-grow: 0;
    min-width: 25px;
    width: 30px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #444343;
}

    .dlIcon:hover {
        background: #a2c3f9;
    }

    .dlIcon i {
        transition: transform .15s ease-out, opacity 86ms ease-out;
    }

    .dlContent .dlIcon {
        width: 25px;
    }

.dlIcon.is-expanded i {
    transform: rotate(90deg);
}

    .dlIcon.dlFolder {
        color: #444343;
    }

.dlCollection {
    padding-left: 8px;
    position: relative;
    background: #ddd;
}

.dlCount {
    font-size: 12px;
    color: #eee;
    background-color: #888;
    padding: 0 2px;
    border: 1px solid transparent;
    border-radius: 5px;
}

.dlSearch {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    min-height: 30px;
    align-items: stretch;
    background: white;
}

    .dlSearch .dlSearchBar {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        flex-grow: 1;
    }

        .dlSearch .dlSearchBar .dlIcon {
            border-right: solid 1px #bbb;
        }

        .dlSearch .dlSearchBar .dlIcon.noBorder {
            border: none;
        }


        .dlSearch .dlSearchBar .dlSearchBox {
            min-width: 50px;
            width: 0;
            flex-grow: 1;
            border: none;
            padding-left: 5px;
        }

            .dlSearch .dlSearchBar .dlSearchBox.withBorder {
                border: 1px solid #ccc;
            }

            .dlSearch .dlSearchBar .dlSearchBox:focus {
                -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
                -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
                outline: none !important;
            }

.emptySearch {
    text-align: center;
    font-size: 16px;
    padding: 25px 0px;
    box-shadow: inset 1px 1px #bbb, 0 1px #bbb;
}

.dlName.dlDisabled {
    color: #adadad;
}


.add-memo-modal .zdVueModal-container {
    width: 530px;
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: auto;
}
.device-memo-table {
    width: 100%;
}

.device-memo-table td {
        padding: 2px 5px 0px 5px;
    }

.device-memo-table tr td {
        /*border-bottom: 1px solid lightgray;*/
    }
.device-memo-table tr:hover {
     background-color: #c4daff;
    cursor: pointer;
}

.is-mobile .device-memo-table .meta-info {
    max-width: 90vw;
}

.memo-cell {
    overflow-x: auto;
    width: calc(100vw - 30px);
}

    .memo-cell.is-mobile {
        overflow-x: auto;
        width: unset;
    }
/* Override DeviceInfo.css rules when logbook is inside deviceInfo */
.deviceInfo .logbookConfigure .form-control {
    height: 34px;
    font-size: 14px;
}
.add-device-options > * + * {
    margin-top: 1rem;
}

.options-section {
    row-gap: 15px;
    display: grid;
    grid-template-columns: 15px 1fr 1fr;
}

.options-section .icon {
    display: flex;
    grid-column: 1;
    height: 100%;
    justify-content: flex-start;
}

.options-section .icon .fa {
    font-weight: 1.4rem;
}

.options-section label {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    margin-bottom: 0;
    grid-column: 2;
    justify-content: space-between;
}

.options-section label input {
    width: 16px;
    height: 16px;
}

.options-section label + input {
    height: 28px;
    margin: 0 1rem;
    width: 95%;
}

.options-section p {
    align-items: flex-end;
    display: flex;
    font-size: 1.2rem;
    grid-column: 3;
    margin-block-end: -1px;
    margin-inline-start: 1rem;
}

.options-section .polling-scheme {
    background-color: whitesmoke;
    border: 1px solid lightgray;
    grid-column: 2 / -1;
    padding: 5px;
}

.options-section .polling-scheme ul {
    padding-left: 1rem;
    margin: 0 0 0 0.5rem;
}

.options-section .polling-scheme li {
    white-space: normal;
}

.options-section .with-table,
.note {
    grid-column: 2 / -1;
}

.options-section .zdVueTable .subTableHeader {
    padding: 1px 4px 0px 4px;
}

.options-section .zdVueTable .subTableCell {
    padding: 1px 8px;
    line-height: 1;
}

.adminDeviceAdd .sveContentLayout {
    display: flex;
    flex-direction: row;
}

.adminDeviceAdd .sveContentLayout .sve-sidebar {
    padding-bottom: 0;
    background: white;
}

.deviceEditor .masterContainer {
	display: grid;
	grid-template-columns: auto 1fr;
	height: 100%;
	overflow: hidden;
}

.deviceEditor .contentArea {
	overflow: auto;
	display: flex;
	flex-flow: wrap;
	gap: 10px;
	padding: 10px;
}

.deviceEditor .mainSection {
	border: 1px solid #ccc;
	height: fit-content;
	float: left;
}

	.deviceEditor .mainSection .sectionHeader {
		background-color: whitesmoke;
		margin: 0;
		padding: 5px 15px;
		border-bottom: 1px solid #ccc;
		white-space: normal;
	}

	.deviceEditor .mainSection .sectionHeader h3 {
		margin: 0;
	}

.admin-devices .formRows {
	display: grid;
	grid-template-columns: auto minmax(0,1fr);
	align-items: baseline;
	row-gap: 5px;
	column-gap: 10px;
	padding: 5px;
}

	.admin-devices .formRows > label,
	.admin-devices .ipContainer .zdInputPanelLeft {
		text-align: left;
		margin: auto 0;
		white-space: normal;
		font-weight: bold;
	}

	.admin-devices .formRows > label {
		max-width: 220px;
	}

	.admin-devices .formRows input[type="text"],
	.admin-devices .formRows input[type="number"],
	.admin-devices .formRows select {
		height: 25px;
		padding: 4px;
		font-size: 12px;
	}

	.admin-devices .formRows input[type="checkbox"] {
		margin: 0;
		align-self: center;
	}

	.deviceEditor .ipContainer input.zdInputPanelInput,
	.deviceEditor .ipContainer select.zdInputPanelInputSelect {
		border-radius: 4px;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		height: 25px;
		border: var(--zd-border);
	}

	.deviceEditor .ipContainer textarea.zdInputPanelMultiLine {
		border-radius: 4px;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	}

	.deviceEditor .ipContainer td.zdInputPanelLeft,
	.deviceEditor .ipContainer td.zdInputPanelRight {
		padding: 0;
		margin: 0;
	}

	.deviceEditor .ipContainer .zdInputPanelInputRow:not(:last-child) td.zdInputPanelLeft,
	.deviceEditor .ipContainer .zdInputPanelInputRow:not(:last-child) td.zdInputPanelRight {
		padding-top: 0px;
		padding-bottom: 5px;
	}

	.deviceEditor .ipContainer td.zdInputPanelLeft {
		padding-right: 10px;
	}

.deviceEditor .leftTabs {
	background-color: white;
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.deviceEditor .leftTabs > span {
	padding: 4px 10px;
	cursor: pointer;
	font-size: 13px;
}
	.deviceEditor .leftTabs > span > i {
		width: 17px;
	}

.deviceEditor .leftTabs > span.selected {
	background-color: var(--zd-default-highlight);
}

.deviceEditor .leftTabs > span:hover {
	background-color: #a2c4ff;
}

.deviceEditor .deviceInfo .ipContainer .zdInputPanelLeft {
	width: unset !important;
	height: unset;
}

.deviceEditor .notesContainer {
	padding: 5px;
	gap: 5px;
}

.deviceEditor i.fa-question-circle:not(.adminContainerOptions i.fa-question-circle) > span {
    max-width: 300px;
    text-align: left;
}

.pollingSchemeRuleEditor .channelSelector {
	margin: 3px;
	background-color: whitesmoke;
	border: 1px solid lightgray;
	padding: 5px;
	gap: 3px;
	display: flex;
	flex-direction: column;
}

.devicePolling .formRows {
	display: grid;
	grid-template-columns: 90px 275px;
	align-items: baseline;
	row-gap: 5px;
	column-gap: 10px;
	padding: 0px;
	overflow: auto;
}

.devicePolling .formRows > label,
.devicePolling .ipContainer .zdInputPanelLeft {
    text-align: left;
    margin: auto 0;
    white-space: normal;
    font-weight: bold;
}

.devicePolling.mainSection .sectionHeader h3 {
    margin: 0;
}

.devicePolling .contentWrapper {
	gap: 5px;
	padding: 5px;
	width: 385px;
}

.devicePolling .buttonWrapper {
	gap: 5px;
	margin: 0 auto;
}
.dyno-entry-item-root:nth-child(odd) .dyno-entry-item {
    background-color: whitesmoke;
    border-left: 3px solid whitesmoke;
}

.dyno-entry-item-root:nth-child(even) .dyno-entry-item {
    background-color: white;
    border-left: 3px solid white;
}

.dyno-entry-item {
    padding: 5px 8px;
    font-size: 12px;
    color: black;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    min-height: 85px;
}

.dyno-explorer-left.limitedWidth .dyno-entry-item {
    min-height: unset;
}

.dyno-entry-item-root .dyno-entry-item:hover,
.dyno-entry-item-root .dyno-entry-item.hover {
    background-color: #e5e4e4;
}

    .dyno-entry-item .moreInfoContainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        font-size: .7em;
        font-weight: normal;
        margin-top: 3px;
        grid-column: 1/span 4;
    }

.dyno-entry-item-root .dyno-entry-item.selected {
    font-weight: bold;
    border-left: 3px solid #6e91b0;
}

.dyno-entry-left:not(.mobile),
.dyno-entry-item.mobile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
}

.dyno-entry-icons {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 3px;
}

    .dyno-entry-icons > i {
        font-size: 14px;
        margin: auto;
    }

.dyno-entry-left-fields {
    flex-flow: column nowrap;
}

.dyno-entry-right {
    display: flex;
    flex-grow: 1;
    flex-flow: row nowrap;
}

.dyno-entry-spark {
    width: 150px;
    height: 75px;
}

.dyno-entry-spark.mobile {
    width: 150px;
    height: 60px;
}

.dyno-entry-item .entryFieldNote {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
    max-height: 21px;
}

.dyno-entry-item .entryFieldNote > span {
    font-weight: bold;
    overflow: hidden;
}

.dyno-entry-item:not(.mobile) .entryFieldNote > span {
    width: 500px;
}

.dyno-explorer {

}
.dyno-spark {
    width: 100%;
    height: 100%;
}

.dyno-spark > canvas {
    width: 100%;
    height: 100%;
}
.dyno-timeline-item {
    display: flex;
    flex-flow: column nowrap;
    gap: 5px;
    line-height: 1em;
    font-size: 12px;
}
.zdVueModal-container.echoTaskModal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: 90vh;
    width: 500px;
    max-width: calc(95vw - 30px);
    margin: 0px;
}

    .echoTaskModal > .modalHeader {
        border-bottom: solid 1px lightgray;
        padding-bottom: 10px;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .echoTaskModal > .modalFooter {
        margin-top: 10px;
        padding-top: 10px;
        text-align: center;
        border-top: solid 1px lightgray;
    }

    .echoTaskModal > .modalBody {
        overflow: auto;
        display: inline-block;
        text-align: center;
    }

        .echoTaskModal > .modalBody .zdInputPanel {
            width: 400px;
        }

        .echoTaskModal > .modalBody .prev-line {
            font-weight: bold;
        }


    /*specififc css for deviceFields Write*/
        .echoTaskModal.deviceFieldsWrite > .modalBody {
            text-align: left;
        }

        .echoTaskModal.deviceFieldsWrite > .modalBody .previous-text > div {
            text-align: center;
        }

        .echoTaskModal.deviceFieldsWrite > .modalBody .zdInputPanel > table:first-child {
            width: 100%
        }

	    .echoTaskModal.deviceFieldsWrite.desktop {
	        width: 630px;
	    }

        .echoTaskModal.deviceFieldsWrite.mobile > .modalBody .zdInputPanel {
            width: calc(100% - 6px);
        }

    .echoTaskModal.deviceFieldsWrite .confirmText {
        display: grid;
        grid-template-columns: min-content auto;
        background: whitesmoke;
        padding: 8px;
        width: 80%;
        margin: auto;
        margin-top: 5px;
    }
    /**/
        .echoTaskModal .processingDiv {
            text-align: center;
        }

    .echoTaskModal .bars {
        padding: 20px;
        padding-top: 30px;
        height: 100px;
        width: 100px;
        filter: invert(1);
    }

    .echoTaskModal .doneMessage {
        text-align: center;
        padding-top: 20px;
        white-space: normal;
    }

@keyframes grow {
    0% {
        max-height: 0px;
        overflow: hidden;
        opacity: 0;
    }

    99% {
        max-height: 70vh;
        overflow: hidden;
        opacity: 1;
    }

    100% {
        max-height: none;
    }
}

.echoTaskModal .grow {
    animation: grow 1s;
}

div.fieldSelectorFromContext .searchHeader {
    margin-bottom: 10px;
}

div.fieldSelectorFromContext .title {
    margin: 15px 10px 10px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: solid 1px #d9d6d6;
}

div.fieldSelectorFromContext h3, div.fieldSelectorFromContext h2, div.fieldSelectorFromContext h4 {
    margin: 0px;
}

    div.fieldSelectorFromContext  .title  .contextCaption {
        text-align: right;
    }

div.fieldSelectorFromContext .changeDevice {
    text-align: right;
    color: dodgerblue;
    text-decoration: underline;
    cursor: pointer;
}
div.fieldSelectorFromContext  label {
    font-weight: 600;
}

@keyframes fieldSelectorFromContextGrow {
    0% {
        max-height: 0px;
        min-height: 0px;
        opacity: 0;
    }

    100% {
        max-height: 100%;
        opacity: 1;
    }
}

div.fieldSelectorFromContext .grow {
    animation: fieldSelectorFromContextGrow .6s;
}

.selectionListingHeader {
    background-color: rgba(0, 0, 0, 0.04);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.selectionListing {
    margin-top: 10px;
    max-height: 180px;
    min-height: 60px;
    text-align: center;
    overflow: auto;
    border-bottom: solid 1px rgba(0,0,0,.15);
}

    .selectionListing.smallerSelection {
        max-height: 100px;
        min-height: 40px;
        border-bottom: none;
    }


div.fieldSelectorFromContext  .modalFooter {
    text-align: center;
    border-top: solid 1px rgba(0,0,0,.15);
}

div.fieldSelectorFromContext .mobileDeviceName {
    display: inline-block;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    max-width: 70vw;
    vertical-align: middle;
}

div.fieldSelectorFromContext .mobileChangeDevice {
    display: inline-block;
    font-size: 14px;
    margin: 0px;
    vertical-align: middle;
}

#fieldEditorModal .customContent {
    display: flex;
    flex-flow: column nowrap;
}

.femModal {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    width: 100%;
}

.femBody {
    flex-grow: 1;
    overflow: hidden;
}

.femBody > div {
    height: 100%;
    display: none;
}

.femBody > div.active {
    display: block;
}

input.btn.active {
    background: #c6c6c6;
}

.femRow {
    margin-bottom: 8px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

#fieldSetupEditorVueEntryPoint {
    height: 100%;
}

.fieldSetupEditor {
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
}

.fieldSetupEditor .pane {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    overflow: auto;
}

.fieldSetupEditor .leftPane {
    width: 180px;
    min-width: 180px;
}

.fieldSetupEditor .channelList {
    width: 100%;
    display: block;
    padding: 8px;
}

.fieldSetupEditor .classDefault {
    padding: 0 10px;
}

    .fieldSetupEditor .channelLabel:not(:disabled) {
        cursor: pointer;
    }

.fieldSetupEditor .outputList {
    width: 100%;
    display: block;
}

.fieldSetupEditor .outputEntry {
    width: 100%;
    border-bottom: 1px solid lightgray;
}

.fieldSetupEditor .outputList .timestamp {
    font-weight: bold;
}

.fieldSetupEditor .outputList .record {
    text-indent: 10px;
}

.fieldSetupEditor .centerPane {
    flex-grow: 1;
}

.fieldSetupEditor .rightPane {
    width: 275px;
    min-width: 275px;
}

.fieldSetupEditor .channelContent {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

.channelAttributes {
    display: flex;
    flex-flow: row nowrap;
}

.channelAttributes .addAttribute {
    width:350px;
}

.channelAttributes .attributeList {
    flex-grow: 1;
    padding-left: 10px;
    display: flex;
    flex-flow: row wrap;
}

.channelAttributes .attributeList .attributeItem {
    margin-left: 5px;
    margin-bottom: 5px;
    width: 350px;
    display: grid;
    grid-template-columns: min-content auto min-content;
}
    .channelAttributes .attributeList .attributeItem .input-group-addon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }


.fieldSetupEditor .fieldDefault {
    margin-left: 10px;
}

.fieldGridSection {
    display: flex;
    flex-flow: column nowrap;
}

.fieldGridTableTools {
    flex-grow: 0;
    margin-bottom: 5px;
}

.fieldGridTableContent {
    flex-grow: 1;
    overflow: auto;
}

.feTable th {
    text-align: center;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}

.feTable tr > th:first-child {
    border-left: none;
}

.feTable tr > th:last-child {
    border-right: none;
}

.feTable .fieldRow:nth-child(even) {
    background-color: whitesmoke;
}

.feTable .fieldRow > td {
    white-space: nowrap;
    padding: 0 3px;
}

.fieldRow .grab-handle {
    padding: 0 5px;
}
.feTable input,
.feTable select {
    border: none;    
}

.feTable input:not(:disabled),
.feTable select:not(:disabled) {    
    background-color: transparent;
}

.feDisabledItem {
    opacity: 0.7;
}

.feLatest {
    background-color: rgba(198,198,198, .3);
}

.feLatest,
.feLatest > input {
    min-width: 60px;
    max-width: 240px;
    white-space: nowrap;
}
.feLatest > input {
    width: 60px;
    text-align: right;
}

.feID,
.feID > input {
    min-width: 60px;
    max-width: 300px;
    text-overflow: ellipsis;
}
.feID > input {
    width: 100%;
}

.feHeader,
.feHeader > input {
    min-width: 60px;
    max-width: 200px;
}
.feHeader > input {
    width: 100%;
}

.feName,
.feName > input {
    min-width: 100px;
    max-width: 300px;
    text-overflow: ellipsis;
}
.feName > input {
    width: 100%;
}

.feUnits,
.feUnits > input {
    min-width: 60px;
    max-width: 150px;
}
.feUnits > input {
    width: 100%;
}

.feAggregate > select {
    width: fit-content;
}

.feDataType > select {
    width: fit-content;
}
.feDataType i {
    padding: 0 3px;
    width: 100%;
}

.feDecPlaces > input {
    width: 50px;
}

.feNXTag,
.feNXTag > input {
    min-width: 100px;
    max-width: 300px;
    text-overflow: ellipsis;
}
.feNXTag > input {
    width: 100%;
}

.feMechDev > select {
    width: fit-content;
}
.feMechDev > input {
    width: 25px;
}

.feFormula,
.feFormula > textarea {
    min-width: 100px;
}
.feFormula > textarea {
    width: 100%;
    padding: 0px 0px 0px 2px;
    overflow: auto;
}

.feHidden > input {
    text-align: center;
    width: fit-content;
}

.feReadonly > input {
    text-align: center;
    width: fit-content;
}

.feDisabled > input {
    text-align: center;
    width: fit-content;
}

.feNXDataType > select {
    width: fit-content;
}

.feNXExternalDeviceID,
.feNXExternalDeviceID > input {
    min-width: 45px;
    max-width: 150px;
}
.feNXExternalDeviceID > input {
    width: 45px;
}

.feScale,
.feScale > input {
    min-width: 35px;
    max-width: 100px;
}
.feScale > input {
    width: 100%;
}

.feNotes,
.feNotes > input {
    min-width: 50px;
    max-width: 300px;
}
.feNotes > input {
    width: 100%;
}

.feMinWrite,
.feMinWrite > input {
    width: 90px;
}

.feMaxWrite,
.feMaxWrite > input {
    width: 90px;
}

.feMinWrite > input:disabled,
.feMaxWrite > input:disabled {
    background-color: #e1e1e1;
    cursor: not-allowed;
}

.feTable .fieldRow:hover {
    background-color: #e3f4ff;
}

.channelList {
    overflow: hidden;
    overflow-y: auto;
    padding: 0px 10px 0px 10px;
}

.tocTable {
    overflow: hidden;
}

.tocTable tr.channel {
    padding: 1px;
    margin: 1px;
    font-size: larger;
    color: royalblue;
    border-top: gray 1px solid;
}

.tocTable tr.channel.active {
    font-weight: bold;
}

.tocTable tr.channel:hover {
    background: #e4e1e1;
}

.tocTable tr.field {
    border-radius: 4px;
    padding: 1px;
    width: 100%;
    text-align: left;
    color: royalblue;
    font-size: small;
}

    .tocTable tr td:not(:disabled) {
        cursor: pointer;
    }

    .tocTable tr.field td.fse-toc-id, .tocTable tr.field td.fse-toc-name {
        padding-right: 10px;
        border-top: #e5e3e3 1px solid;
    }

.tocTable tr.field:hover {
    background: #f2f2f2;
}

.tocTable tr td {
    white-space: nowrap;
}

.myLineDecoration {
    background: pink;
    width: 5px !important;
    margin-left: 3px;
}

#editsContainer {
    height: 100%;
    overflow-y: auto;
}


#editsTable div.editEntry {
    border-bottom: 1px solid #dadada;
    padding: 0 6px 0 6px;
    width: 100%;
}

    #editsTable div.editEntry input.btn {
        padding: 3px;
        margin: 3px;
    }

    #editsTable div.editEntry div.upper {
        height: 75%;
        top: 0px;
        width: 100%;
    }
div.upper div {
    display: inline;
}

#editsTable div.editEntry div.lower {
    height: 25%;
    bottom: 0px;
    width: 100%;
    display: inline-block;
}


#editsTable input.btn.left.active {
    background: #ffcccb;
}

#editsTable input.btn.right.active {
    background: #dbe6c1;
}

.fieldRow.ui-sortable-helper {
    display: flex !important;
    flex-direction: row;
    gap: 3px;
}

.attributeList .invalidOption {
    background-color: #d9534f !important;
    color: white;
}
    .attributeList .invalidOption > option {
        background-color: white;
        color: #555;
    }
    .attributeList .invalidOption > option:disabled {
        color: #adadad;
    }




.fieldSetupEditor2 {
    gap: 10px;
}

    .fieldSetupEditor2 .leftPane {
        gap: 10px;
    }

    .fieldSetupEditor2 .pasteArea {
        width: 170px;
        height: 34px;
        overflow: hidden;
    }

    .fieldSetupEditor2 .channelList {
        padding: 0;
    }

.fieldSetupEditorModal2 .fseHeader {
    gap: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    width: 100%;
    border-radius: 6px 6px 0 0;
}

    .fieldSetupEditorModal2 .fseHeader .fseTitle {
        font-size: 19px;
        font-weight: bold;
    }

.fieldSetupEditorModal2 .fseBody {
    padding: 0 5px;
    overflow: hidden;
    height: 100%;
}

.fieldSetupEditorModal2 .zdVueModal-body {
    margin: 5px 0;
}

.feIndex {
    text-align: right;
}

.fieldSetupEditor2 .leftPane {
    width: 170px;
    word-break: break-word;
}

.fieldSetupEditor2 .classDefault {
    padding: 0 0 0 10px;
}

.fieldSetupEditor2 .feNotes,
.fieldSetupEditor2 .feNotes > textarea {
    min-width: 100px;
    max-width: unset;
}

    .fieldSetupEditor2 .feNotes > textarea {
        width: 100%;
        padding: 0px 0px 0px 2px;
        overflow: auto;
    }


.filter-group {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
}


.filter-rule {
    display: grid;
    grid-template-columns: min-content min-content;
    grid-template-rows: 35px;
    padding-top: 10px;
    margin-left: 30px;
    border-left: dotted 2px #d9d6d6;
}

.filter-content {
    display: grid;
    grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
    grid-template-rows: 35px;
    /*box-shadow: -1px 3px 6px #d8d8d8;*/
    box-shadow: -3px 3px 10px #d8d8d8;
}

    .filter-content > div, .filter-content > span {
        padding: 7px 10px;

    }
.filter-content select {
    min-width: 60px;
}

    .filter-group .controls {
        display: grid;
        grid-template-columns: min-content 108px min-content min-content;
    }

.stackedBoxes {
    display: grid;
    grid-template-columns: 20px;
    grid-template-rows: 50% 50%;
}

    .stackedBoxes > div:first-child {
        border-bottom: dotted 2px #d9d6d6;
    }

.relative {
    position: relative;
}
.float-above {
    position: absolute;
    margin-top: -18px;
    left: 20px;
    color: #c7c7c7;
}

.cover-left {
    position: absolute;
    left: -6px;
    top: 0px;
    height: 18px;
    width: 10px;
    background-color: white;
}

.cover-left-group {
    position: absolute;
    left: -6px;
    top: 32px;
    bottom: 0px;
    /* height: 18px; */
    width: 10px;
    background-color: white;
}

.invalid {
    background-color: pink;

}

.filterValueInput > input,
.filterValueInput > select {
    min-width: 100%;
}

.filterValueInput > input {
    line-height: normal;
}

.help-layout {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    border-bottom: 1px solid #e5e5e5;
    height: 100%;
}

.link-title {
    font-size: 1.2em;
}

.scrollable-parent {
    height: 100%;
    width: 100%;
}

.help-topics li {
    list-style: none;
    padding: 5px;
}

.help-topics ul {
    padding-inline-start: 20px;
}

.help-topics {
    padding-right: 10px;
    border-right: solid 1px #e5e5e5;
}

.help-content {
    height: 100%;
    overflow: auto;
}

.help-content-body {
    background-color: white;
    padding: 20px;
    font-size: 14px;
}

.help-content-body p {
    white-space: initial;
}

.main-header {
    margin-top: 0;
    font-weight: 600;
    color: #384248;
    font-size: 30px;
    word-wrap: break-word;
}
.main-header-bottom {
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.second-header {
    margin-top: 0;
    font-weight: 600;
    margin-bottom: 5px;
    color: #384248;
    font-size: 20px;
    word-wrap: break-word;
}
.wrap {
    white-space: initial;
}

.dataColumn {
    width: 100px;
}

.myModal {
    /* This way it could be display flex or grid or whatever also. */
    display: block;
    /* Probably need media queries here */
    width: 600px;
    max-width: 100%;
    height: 400px;
    max-height: 100%;
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 50%;
    /* Use this for centering if unknown width/height */
    transform: translate(-50%, -50%);
    /* If known, negative margins are probably better (less chance of blurry text). */
    /* margin: -200px 0 0 -200px; */
    background: white;
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
}

.modal-guts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px 50px 20px 20px;
}

.compare-row-header {
    padding-left: 40px;
    font-size: initial;
    font-weight: bold;
}

tr.row-deleted td input, tr.row-deleted td span, .compare-modal tr.row-deleted td {
    background-color: #f2dede !important;
    box-shadow: inset 0 0 0 1px #d48e8e !important;
    text-decoration: line-through
}

.compare-modal tbody tr > td:nth-child(3) {
    font-weight: bold;
}

table.dataTable.has-edit-col tbody tr td:nth-child(1) > div:nth-child(2) {
    cursor: auto;
}

.EditPanel, #hist-edit-app {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 2px;
}

.hist-edit-app-two {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "content";
}

.hist-edit-app-two hist-edit-subheader {
    grid-area: header;
}

.hist-edit-app-two hist-table {
    grid-area: content;
}

.history-page-layout:not(.mobile) {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header header"
        "sidebar content";
}
    .history-page-layout.mobile {
        font-size: 12px;
    }
    .history-page-layout.mobile.fullscreen {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "header"
            "content";
    }

    .history-page-layout .hp-header {
        padding: 2.5px;
        padding-left: 7.5px;
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 10px;
        gap: 5px;
    }

    .history-page-layout .hp-header:not(.mobile) {
        padding-top: 15px;
        grid-area: header;
    }

    .history-page-layout .hp-sidebar {
        grid-area: sidebar;
        overflow-y: auto;
        padding-left: 10px;
    }

    .history-page-layout .hp-content {
        grid-area: content;
        overflow: hidden;
        padding-left: 10px;
    }

.channel-option {
    display: flex;
    padding: 4px;
    cursor: pointer;
}
    .channel-option.disabled {
        cursor: no-drop;
        opacity: .4;
    }
    .channel-option:not(.disabled):hover {
        background-color: #c4daff;
    }
    .channel-option.selected {
        border-right: none;
        border-top: solid 1px #d3d3d3;
        border-bottom: solid 1px #d3d3d3;
        cursor: unset;
        background-color: #c4daff;
    }

.history-page-controls {
    margin-bottom: 15px;
}
    .history-page-controls > div:not(.float-box), .history-page-controls > span:not(.float-box) {
        float: left;
        height: 36px;
        margin-top: 5px;
        margin-right: 4px;
    }

    .hist-page-table-graph-layout {
        display: grid;
        grid-template-columns: min-content minmax(0, 1fr);
        grid-template-rows: 100%;
    }
        .hist-page-table-graph-layout.graph-closed {
            grid-template-columns: minmax(0, 1fr);
            padding-left: 10px;
        }
        .hist-page-table-graph-layout.fullscreen {
            grid-template-columns: calc(100% - 1px);
        }
    .hist-page-table-graph-layout.fullscreen .hist-table-wrapper {
        display: none;
    }

    .graph-open .hist-table-wrapper {
        max-width: calc(50vw - 300px);
    }

.chart-side-layout {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: minmax(0, 1fr);
}

.blink-highlight {
    background-color: #c4daff;
    -webkit-transition: background .7s ease-in-out;
    -ms-transition: background .7s ease-in-out;
    transition: background .7s ease-in-out;
}

.active-color {
    background-color: #c4daff;
}

.table-scroll {
    position: relative;
    width:100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 100%;
}

.historyPageRowWarning {
    width: 100%;
    text-align: center;
    font-size: 14px;
    white-space:normal;
}

.disabledTooltip {
    opacity: 0.65;
}
.disable-blanks {
    word-wrap: break-word;
    white-space: normal;
}

.channel-edit-modal .zdVueModal-container {
    min-width: 400px;
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: auto;
}

@media (max-width: 700px) {
    .channel-edit-modal .zdVueModal-container {
        min-width: 100vw;
        padding: 0px;
    }
    .channel-edit-modal h3, .channel-edit-modal h4 {
        padding-left: 10px;
    }

}

.overlap-container {
    display: grid;
    grid-template-columns: 350px;
    grid-template-rows: 1fr;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    padding: 4px;
}

.input-panel-container.disabled {
    opacity: .5;
    cursor: no-drop;
}
.column-headers th {
    background-color: #e5e5e5;
    border-collapse: collapse;
    box-shadow: 0 0 0 1px var(--hist-tbl-border-color, #d5d0d0);
}

    .column-headers th:not(.is-blank) {
        text-align: center;
    }

.db-widget-body .history-table {
    width: 100%;
}
.history-table td {
    padding: 2px 5px 0px 5px;
    background-color: white;
    white-space: nowrap;
}

/*.https://stackoverflow.com/questions/39738265/firefox-displays-unnecessary-horizontal-scrollbar*/
@-moz-document url-prefix() {
    .moz-div {
        padding-right: 17px;
    }
}

.column-headers th:last-child:not(.is-blank) {
    border-right: 1px solid lightgray;
}
.history-columns th {
    font-weight: bold;
    padding: 4px 4px 0px 4px;
    background-color: #e5e5e5;
    white-space: normal;
    text-align: center;
    vertical-align: bottom;
    box-shadow: 0 0 0 1px var(--hist-tbl-border-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.db-widget-body .history-columns th, .widgetExpandedBody .history-columns th {
    white-space: inherit;
}

    .history-columns th * {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }
    .history-columns .hist-units {
        padding: 0px 4px 0px 4px;
        word-break: inherit;
        /*white-space: inherit;*/
        white-space: pre;
    }

.hist-table-parent .columnFilter {
    z-index: 999;
    position: absolute;
    top: calc(100% + 2px);
    left: 0px;
    background-color: whitesmoke;
    border-radius: 3px;
    border: solid 1px #e0e0e0;
    padding: 5px;
    width: 150px;
    cursor: default;
    text-align: left;
}

.history-table {
    background-color: #fff;
    border-collapse: separate;
}

.mobile .quick-history .history-table {
    min-width: calc(100vw - 22px);
}

.history-table tbody td {
    text-align: right;
    border-right: solid 1px rgba(0,0,0,0.1);
}
.history-table tfoot td {
    border-top: 1px solid #dadada;
    text-align: right;
    background-color: #e5e5e5;
    padding-top: 7px;
    padding-bottom: 7px;
    box-shadow: 0 0 0 1px var(--hist-tbl-border-color);
}
.history-table > tbody > tr > td:nth-child(1) {
    border-left: solid 1px rgba(0,0,0,0.1);
    box-shadow: 1px 0px 0px 0px var(--hist-tbl-border-color, #d5d0d0);
}

.no-right-border .history-table tbody td:nth-child(1) {
    border-right: none;
}

.history-table tbody td.STRING {
    text-align: left;
}
    .history-table tbody td.FEETINCHES {
        white-space: nowrap;
    }

.hist-dt{
    white-space: pre;
}
.hist-sort {
    /*position: unset;*/
    /*float: right;*/
    color: #b0b0b0;
    font-size: 12px;
    height: 17px;
    /*display: block;*/
}
.hist-sort .glyphicon {
    float: right;
}
    .hist-sort .graph-check {
        float: left;
        display: none;
    }

.graph-check-hov-parent:hover .graph-check, .hist-sort .col-checked.graph-check {
    display: block;
}

    :root {
        --hist-tbl-border-color: #d5d0d0;
    }

.backgroundWarning, .history-table tfoot td.backgroundWarning {
    background-color: #feffa3;
}

.history-table td.greyBackGround {
    background-color: #e8e8e8;
}

.history-table tr.selectedRow td {
    background-color: var(--zd-default-highlight-hover);
}

.zdInputPanel {
	display: inline-block;
	margin: 3px 3px 3px 3px;
	background-color:whitesmoke;	
	border:1px solid lightgray;	
	padding:5px;
}

@media (max-width:650px) {
	.zdInputPanel {
		margin: 0px;
		max-width: 100vw;
        width: 100vw;
	}
}

.feetInchesRow tr:nth-child(2) {
    border-top: solid 1px gray;
}

.zdInputPanelLeft {
    font-size: 12px;
	padding: 4px 7px 2px 17px;
	border-right: 1px solid darkgray;
	text-align: left;
	vertical-align: top;
	height: 25px;
}

.zdInputPanelRight {
    font-size: 12px;
	padding: 2px 17px 2px 7px;
	vertical-align: top;
	float: left;
}

.zdInputPanel:not(.has-prev-col) .zdInputPanelLeft {
    width: 45%;
}

.zdInputPanel:not(.has-prev-col) .zdInputPanelRight {
	width: 55%;
}

.zdInputPanelPrev {
	vertical-align: top;
	border-left: 1px solid darkgray;
	padding: 4px 5px;	
	font-size: 12px;
}

.zdInputPanelPrev > div {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zdInputPanelInputRow {
    width: 100%;
}

.zdInputPanelInput {
	border: 1px solid #777;
	line-height: 14px;
	padding: 2px 5px 1px 5px;
	float:left;
}

.zdInputPanelInput[type="checkbox"] {
	margin: 0;
	line-height: 14px;
	float: left;
	margin: 3px 0px 3px 0px;	
}

.zdInputPanelInput.date {
	display: inline;
	width: 125px;
	border: 1px solid #777;	
}


.zdInputPanelInput.time {
	display: inline;
	width: 125px;
	border: 1px solid #777;	
}

.zdInputPanelInput.timer {	
}


.zdInputPanelInput.NUMBER {
	width: 90px;	
}


.zdInputPanelInput.NUMBER::-webkit-outer-spin-button,
.zdInputPanelInput.NUMBER::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number].zdInputPanelInput.NUMBER {
	-moz-appearance: textfield;
}

.zdInputPanelInput.STRING {
	width: 180px;
}

.zdInputPanelInput.FEETINCHES {
	width: 54px;
}

.input-no-spin::-webkit-outer-spin-button,
.input-no-spin::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number].input-no-spin {
	-moz-appearance: textfield;
}

.zdInputPanelTitle {
	line-height: 24px;
	vertical-align: central;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: #555;
	padding-bottom:10px;
	border-right: none;
}

.zdInputPanelGroupHeader {
	height: 40px;
	line-height: 24px;
	vertical-align: bottom;
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	color: #444;
	padding-left: 7px;
	border-right: none;
}

.zdInputPanelText {
    font-style: italic;
	font-size: 0.8em;
}

.zdInputPanelInputLabelUnits {
	padding:1px 0px 0px 5px;
	text-align:left;
	width:60px;
	float:left;
}

.zdInputPanelInputRequiredIndicator {
    color: red;
}

.zdInputPanelFormatLabel {    
	float:left;
	padding: 2px 5px 0px 5px;
}

.zdInputPanelInputSelect {
	width: 180px;
	border: 1px solid #777;
	padding: 1px 1px 0px 1px;	
}

.zdInputPanelMultiLine {
	width: 180px;
}

.calculation {
    padding: 1px 5px;
    background: lightgray;
	width:90px;
}

.downloadfile {
	color: #227ed0;
	text-decoration: underline;
	cursor: pointer;
}
tr.nested>td:first-child {
    padding-left: 30px;
}
	tr.nested>td:first-child.zdInputPanelGroupHeader {
		padding-left: 20px;
	}
.standardInput {
    width: 160px;
}
.standardInput .secret-icon {
	position: absolute; 
	right: -14px; 
	top: 4px; 
	font-size:1em; 
	cursor:pointer;
}
.prev-label {
	text-align: center;
	margin-top: 4px;
	height: 20px;
    font-weight: bold;
    font-size: 14px;
    color: #444;
}
.prev-date {
	text-align: center;
	font-size: 12px;	
	font-weight: initial;
	margin-bottom: 4px;
	height: 20px;
	line-height:18px;
	color: #444;
}
.previous-text div{
	text-align: right
}


@media (max-width:650px) {
	.previous-text { font-size: .8em; }
}
#itemList {
    height: 100%;
}

    #itemList .listContainer {
        overflow-y: auto;
        height: 100%;
    }

    #itemList .listContainer table {
        display: table;
        table-layout: fixed;
        height: auto;
    }

    #itemList .listContainer th {
        position: sticky;
        top: 0;
        background-color: white;
        box-shadow: inset 0 0px 52px -3px rgba(0, 0, 0, 0.4);
        padding-left: 5px;
        padding-right: 5px;
    }

    #itemList .listContainer tr {
        display: table-row;
        background-color: white;    
    }

        #itemList .listContainer tr td {
            padding: 0px;
            text-align: right;
            border: 1px solid lightgray;
            border-left: none;
            border-right: none;
            padding-left: 5px;
            padding-right: 5px;
        }
.blue-link {
    color: #23527c;
    text-decoration: underline;
    cursor: pointer;
}

.bl-fnt {
        color: cornflowerblue;
        cursor: pointer
    }


.prev-dt-l {
    text-align: left;
    grid-column: 1;
}

.prev-dt-r {
    text-align: right;
    grid-column: 2;
}

.me-meta-top {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    margin-top: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

.prev-d-l {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-changer-wide .prev-d-l {
    justify-content: start;
    font-weight: normal;
    font-size: 12px;
}

.device-name {
    padding: 5px;
    grid-row: 1;
    grid-column: 2;
    text-align: center;
    font-size: 1.2em;
}

.prev-dt-l {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 2px;
}

.prev-dt-r {
    grid-row: 2;
    grid-column: 3;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 2px;
}

.copy-from-previous {
    grid-row: 3;
    grid-column: 2;
    grid-column: 1 / span 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.me-cancel-btn {
    display: none;
}

@media (max-width:900px) {

    .me-cancel-btn {
        display: block;
    }

    .me-meta-top {
        width: 100vw;
    }

    .zdVueModal-container.m-e-container {
        padding: 0px;
        width: 100vw;
        /*height: 100vh;*/
        overflow-y: auto;
        /*height: var(--zd-true-view-height);*/
        height: -webkit-fill-available;
        /*max-height: 100vh;
    min-height: 100vh;*/
    }

    .manual-entry-modal {
        margin: 0px;
    }
}

@media (min-width: 351px) {
    .zdInputPanelLeft:not(.zdInputPanelGroupHeader), .zdInputPanelRight, .zdInputPanelPrev {
        font-size: 12px;
    }
}

@media (max-width: 350px) {
    .zdInputPanelLeft:not(.zdInputPanelGroupHeader), .zdInputPanelRight, .zdInputPanelPrev {
        font-size: 11px;
    }
}

@media (max-width:400px) {
    .zdInputPanelLeft {
        padding: 2px 0px 2px 0px;
    }

    .zdInputPanelRight {
        padding: 2px 2px 2px 2px;
    }

    .zdInputPanelInput.FEETINCHES {
        width: 45px;
    }

    .zdInputPanelMultiLine, .zdInputPanelInputSelect, .zdInputPanelInput.STRING {
        width: 145px;
    }

    .standardInput {
        width: 150px;
    }

    .zdInputPanelPrev {
        padding: 0px 2px;
    }

        .zdInputPanelPrev > div {
            max-width: 64px;
        }
}

@media (min-width:900px) {
    .manual-entry-modal {
        display: grid;
        grid-template-columns: 300px 1fr;
        grid-template-rows: 20px 40px 50px 220px 1fr;
        max-height: calc(100vh - 40px);
        height: 100vh;
        max-width: calc(100vw - 30px);
        margin: 0px;
    }

        .manual-entry-modal .zdInputPanel {
            overflow-y: auto;
            max-height: calc(100vh - 134px);
        }

    .me-meta-top {
        grid-column: 1;
        grid-row: 3;
        margin-right: 10px;
    }

    .me-meta-top .device-changer {
        display: none;
    }
    .me-meta-bottom {
        grid-column: 1;
        grid-row: 4;
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: start;
        max-height: 220px;
        margin-right: 10px;
    }

        .me-meta-bottom > div {
            width: 100%;
        }

    .m-e-ip-conatiner {
        grid-column: 2;
        grid-row: 3 / span 2;
    }
}

@media (max-width:900px) {
    .manual-entry-modal {
        grid-template-columns: 100vw;
        grid-template-rows: 1fr min-content;
    }
}

.manual-entry-validation-side {
    padding: 3px 10px 3px 10px;
}

@media (min-width:900px) {
    .manual-entry-validation-side {
        grid-column: 1;
        grid-row: 5;
        overflow: auto;
        margin-top: 15px;
    }

        .manual-entry-validation-side > div {
            overflow: auto;
        }
}


@keyframes grow {
    0% {
        max-height: 0px;
        overflow: hidden;
        opacity: 0;
    }

    99% {
        max-height: 84vh;
        overflow: hidden;
        opacity: 1;
    }

    100% {
        max-height: none;
    }
}

.grow {
    animation: grow 1s;
}
.mapFieldSveMain > .zdVueModal-mask > .zdVueModal-wrapper > .zdVueModal-container > .zdVueModal-body {
	margin-top: 0;
}

.mapFieldSveMain > .zdVueModal-mask > .zdVueModal-wrapper > .zdVueModal-container > .zdVueModal-footer {
	padding-bottom: 10px;
}

.mapFieldSveMain .sveSidebarContent > div {
	height: 100%;
}

.colorInput {
	padding: 0 2px;
	height: 34px;
	width: 155px;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
}

.mapFieldSveMain .sve-sidebar {
	padding: 0 8px !important;
}

.mapFieldMask {
    position: absolute !important;
    z-index: 1050;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vcenter {
	margin: auto 0;
}

.mapFieldSveMain input[type="number"] {
	text-align: right;
	padding-right: 1px;
}

.mapFieldSveMain input[type="number"]::-webkit-inner-spin-button {
	margin-left: 5px;
}

.mapFieldSveMain .helpIcon {
	color: black;
	margin: auto 0;
	cursor: pointer;
}
.mapStylingEditor .layer-config {
	display: grid;
	row-gap: 8px;
}

.mapStylingEditor .layer-config-options {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 34px;
	column-gap: 8px;
}

.mapStylingEditor .layer-config-options label {
	padding: 0;
	margin: auto 0 auto auto;
	text-align: right;
}
.mapTooltipEditor .sveLayout .sve-sidebar {
	padding-top: 0;
	padding-bottom: 0;
}

.mapTooltipEditor .sveLayout .sve-sidebar .sveSidebarContent {
	padding: 0;
}
.zdMap .mapLayerSelector {
	background: #ffffff;
	left: 10px;
	top: 100px;
	position: absolute;
	z-index: 100;
	border-radius: 2px;
	padding: 10px;
	opacity: .85;
}

.zdMap .mapLayerSelector input[type="checkbox"],
.zdMap .mapLayerSelector label {
	cursor: pointer;
}

.zdMap .zoomLevel {
	background: #ffffff;
	right: 10px;
	bottom: 110px;
	position: absolute;
	z-index: 100;
	border-radius: 2px;
	opacity: .85;
	width: 40px;
	text-align: center;
}

.zdMap .mapButtonHover {
	position: absolute;
	top: 10px;
	z-index: 500;
}

.zdMap .mapButtonHover button:not(:hover) {
	background-color: #ffffff;
}

.zdMap .mapButtonHover button {
	border: none;
	height: 40px;
	width: 49px;
	border-radius: 0;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}

.zdMap .mapButtonHover > button:last-of-type {
	border-radius: 0 2px 2px 0;
}

.zdMap .autoRefreshTimer {
	background-color: white;
	border: var(--zd-border);
	padding: 5px;
	position: absolute;
	z-index: 100;
	text-align: center;
	opacity: .85;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
	border-radius: 2px;
}

.zdMap .pinLabel {
	background-color: #333;
	font-size: 14px !important;
	font-weight: bold;
	border-radius: 3px;
	padding: 0 4px;
	border-left: 1px solid #aaa;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
}

.zdMap .mapParent {
	overflow: auto;
	float: none;
	display: contents;
}

.zdMap .mapLegendTitle {
	font-size: 18px;
	box-shadow: rgba(0, 0, 0, 0.3);
	background-clip: padding-box;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 4px;
}
	.zdMap .mapLegendTitle.secondary {
		margin-top: 15px;
	}

.zdMap p {
	font-size: 14px;
	margin: 0;
}

.zdMap .layer-container {
	display: grid;
	row-gap: 8px;
}
	.zdMap .layer-container label {
		padding: 0;
		margin: auto 0;
	}

	.zdMap .layer-container input[type="checkbox"] {
		margin: auto 0;
	}

.zdMap .kmz-layer {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 8px;
}

.zdMap .device-layer {
	display: grid;
	grid-template-columns: auto auto 1fr;
	column-gap: 8px;
}

.zdMap label[disabled] {
	color: #ccc
}

.zdMap .bsBlueButton {
	color: white;
	background-color: #0075ff
}

.zdMap .bsBlueButton:hover {
	background-color: #0a58b1
}

.zdMap .editMapBody input[type="checkbox"] {
	box-shadow: none;
	margin: 0px;
	width: 20px;
}

.gm-style-iw-t {
	opacity: .92;
}

.pinTooltip .gm-style-iw-chr {
	display: none;
}

.gm-style .gm-style-iw-d {
	margin-right: -6px;
}

.mapTooltip {
	gap: 5px;
	padding-top: 12px;
}
/* Notification Center Styles */
.notificationCenter {
    .notification-status-icons {
        display: flex;
        gap: 4px;
        align-items: center;
        margin-left: 8px;
    }

    .notification-icon {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        font-size: 12px;
        position: relative;
    }

    /* Normal notification types - sent successfully (grayscale) */
    .notification-icon.sent {
        background-color: #6c757d;
        color: white;
    }

    /* Snoozed notification types - yellow */
    .notification-icon.snoozed {
        background-color: #ffc107;
        color: #212529;
    }

    /* Tooltip styling for notification icons */
    .notification-icon[title]:hover {
        transform: scale(1.1);
        transition: transform 0.2s ease;
    }
}

@keyframes blink-color {
    0%, 49% {
        color: orange;
    }
    50%, 100% {
        color: red;
    }
}

.firebaseMessages:not(.isMobile) {
	position: absolute;
	right: 0;
	width: 400px;
	z-index: 1000;
	margin: 3px;
}
	.firebaseMessages.firebaseList {
		background-color: whitesmoke;
		border: 1px solid #ccc;
		padding: 5px;
	}
	.firebaseMessages.firebaseList:not(.isMobile) {
		top: 0;
		max-height: 100%;
		border-radius: 4px;
	}
	.firebaseMessages.firebaseList.isMobile {
		height: 100%;
	}

	.firebaseMessages.firebasePopup {
		bottom: 0;
		gap: 1px;
	}

.firebaseMessage {
	background-color: white;
}

.firebaseList .firebaseMessage {
	border-bottom: 1px solid #ccc;
}

.firebasePopup .firebaseMessage {
	padding: 3px 5px;
	border: 1px solid #ccc;
}

.firebaseMessage:hover {
	background-color: var(--zd-default-highlight);
}

.zdFirebase .user-options:not(.collapsed) {
    background-color: var(--zd-white-on-navy);
}

.zdFirebase .user-options:not(.collapsed) > i {
    color: var(--zd-navy);
}

.firebaseUnreadCount {
    background-color: red;
    width: 22px;
    height: 22px;
    padding: 1px 0;
    text-align: center;
    border-radius: 50%;
    position: absolute;
	bottom: 3px;
	right: 3px;
}

/*.zdFirebase .noNotificationPermission {
	color: orange;
}*/

.pollingHistory .btn-group > *:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.pollingHistory .btn-group > *:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.pollingHistory .btn-group > *:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pollingHistory .zdVueTable table.alternatingRows tr.footer td {
    background-color: #e5e5e5;
}

.pollingHistory .zdVueTable th {
    position: relative;
    z-index: 1000;
}

.qh-outer-layout {
    height: 100%;
    display: grid;
    grid-template-rows: min-content minmax(400px, 100%) 50px;
    grid-template-columns: 100%;
    grid-gap: 10px;
}

.quick-hist-layout {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto 1fr;
    grid-gap: 10px;
}

.mobile.qh-outer-layout {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
    grid-template-rows: min-content 1fr;
    grid-gap: 0px;
    height: var(--zd-true-view-height);
}
.qh-close-button {
    position: sticky;
    top: 0;
    border-bottom: 1px solid #dbdbdb;
    background-color: white;
    z-index: 10;
}


.body-layout {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: min-content minmax(0, 1fr);
    grid-template-rows: minmax(50%, 1fr) auto;
    padding-top: 10px;
}

    .body-layout.mobile {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: min-content min-content 90vw auto;
        overflow: auto;
        padding-top: 0px;
    }

.quick-history {
    grid-column: 1 / span 1;
    grid-row: 1/ span 2;
    overflow-y: auto;
    font-size: 12px;
    max-width: 500px;
}
.mobile .quick-history {
    grid-column: unset;
    grid-row: unset;
    max-width: 100%;
    overflow-y: unset;
}


.alarm-info {
    overflow: auto;
    grid-column: 2/ span 1;
    grid-row: 2/ span 1;
    border: 1px solid gainsboro;
}

.mobile .alarm-info {
    grid-column: unset;
    grid-row: unset;
    overflow: unset;
    margin-bottom: 20px;
}

.alarm-box {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    font-size: 12px;
}
.mobile .alarm-box {
    padding-left: 5px;
    padding-right: 5px;
}

.alarm-setpoint-toggle {
    font-size: 20px;
    min-width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: rgb(174, 173, 173);
    padding-left: 5px;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.alarm-setpoint-toggle-slash {
    font-size: 20px;
    min-width: 25px;
    color: rgb(174, 173, 173);
    cursor: pointer;
    top: -1px;
    left: -1px;
}

.alarm-setpoint-toggle-slash[toggle] {
    opacity: 0
}

    .quick-hist .dygraph-legend {
        min-width: 150px;
    }

.qh-outer-layout .extendedFieldInfo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    font-size: .90em;
    border: solid 1px #e0e0e0;
    padding: 5px 0px;
    background-color: whitesmoke;
    text-align: center;
}

.aggregate-area {
    padding: 4px 8px;
    border-top: 1px solid gainsboro;
}

.quick-hist-graph-layout {
    display: grid;
    grid-template-columns: 1fr 150px;
    grid-template-rows: 100%
}

.qh-modal {
    width: 930px;
}

@media (min-width: 1300px) {
    .qh-modal {
        width: 1130px;
    }
}

.qh-modal.fullScreen {
    width: calc(100vw - 50px);
}

.quick-hist-header {
    display: grid;
    grid-template: "dLink contrlBtns closeBtn" "breadCrumbs breadCrumbs breadCrumbs";
    grid-template-columns: 1fr 260px 58px;
    grid-template-rows: 30px 30px;
}

.dLink {
    grid-area: dLink;
    cursor: pointer;
    font-size: 18px;
    font-family: inherit;
    font-weight: 500;
    /*line-height: 1.1;*/
    white-space: nowrap;
}
.contrlBtns {
    grid-area: contrlBtns;
}
.closeBtn {
    grid-area: closeBtn;
    text-align: right;
    justify-content: end;
}
.breadCrumbs {
    grid-area: breadCrumbs;
}

.top-line {
    display: grid;
    grid-template-columns: 1fr 25px;
    grid-template-rows: min-content;
}
.mobile .quick-hist-header {
    grid-template: unset;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content;
    grid-gap: 0px;
}

.mobile .qh-close {
    font-size: 18px;
    line-height: 1em;
    padding: 3px;
}
.device-view-container {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f5f5f533;
    border: 1px solid lightgray;
}
.mobile .device-view-container {
    border: none;
}
.device-view-layout {
    margin: 0 auto;
    display: flex;
    flex-flow: column wrap; /* Shorthand – you could use ‘flex-direction: column’ and ‘flex-wrap: wrap’ instead */
    justify-content: flex-start;
    align-items: flex-start;
}

    .device-view-layout .channel-box {
        width: 31%;
        margin: 1%;
        padding: 10px;
    }

.mobile .device-view-layout .channel-box {
    width: 99%;
    margin: 1%;
    padding: 10px;
}

.quick-hist-channel-layout {
    overflow: auto;
    border: 1px solid lightgray;
    padding: 0px 10px;
}

.container-device {
    border-color: transparent;
    border-left-style: solid;
    padding: 5px;
    font-weight: bold;
    position: relative;
    column-span: all;
}
.qh-btns {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-rows: 1fr;
}

.mobile .qh-btns-m > div, .mobile .qh-btns-m > button {
    margin-top: 10px;
    vertical-align: middle;
}

.quick-hist-container .zdVueModal-body {
    margin: 0px;
}


    .zdVueModal-container.quick-hist-container {
        padding: 0px;
        width: 100vw;
        overflow-y: auto;
        height: -webkit-fill-available;
    }



.qh-smartFilterWarning {
    text-align: center;
    background: whitesmoke;
    margin-top: 4px;
    margin-bottom: -16px;
    padding: 4px;    
}

.qh-smartFilterWarning.mobile {
    margin-bottom: 4px;
}


.qh-addNoteCaptionMobile {
    padding: 0px 20px;
    max-width: 150px;
    display: inline-block;
    text-align: center;
}
.flyOutRight {
    padding: 20px;
    -webkit-box-shadow: -6px 0px 11px -7px rgba(0,0,0,0.30);
    box-shadow: -6px 0px 11px -7px rgba(0,0,0,0.30);
}

/*scrollbar for fieldlists only
/*chrome
/* width */
.prettyScroll::-webkit-scrollbar {
    width: 6px;
}
/* Track */
.prettyScroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px white;
}
/* Handle */
.prettyScroll::-webkit-scrollbar-thumb {
    background: lightgray;
}
/* firefox*/
.prettyScroll {
    scrollbar-width: thin;
    scrollbar-color: lightgray white;
}

.reportOutputDir .formRowLabel {
    padding: 6px 8px;
    display: table;
}

.reportOutputDir .formRowLabel div {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    height: 30px;
    white-space: nowrap;
}

.reportOutputDir .formRowValue {
    padding: 6px 8px;
    display: table;
}

    .reportOutputDir .formRowValue div {
        display: table-cell;
        vertical-align: middle;
        text-align: left;
    }

.reportOutputDir .clickHeader {
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-color: whitesmoke;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 4px;
    cursor: pointer;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
}

.reportOutputDir .alignedCheckContainer {
    display: table;
    padding: 2px 0px;
}

.reportOutputDir .alignedCheckCell {
    display: table-cell;
    vertical-align: middle;
}

@media (min-width: 1800px) {
    .reportOutputDir .tableContainer {
        max-width: calc(100% - 550px);
    }
}

.reportOutputDir .tableContainer.hasSelection {
    max-width: calc(100% - 550px);
    min-width: 553px;
}

.reportOutputDir .tableContainer {
    width: 400px;
}

.reportOutputDir .editorRow {
    grid-column: 1 / span 2;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: solid 1px rgba(0,0,0,.1);
    margin-bottom: 8px;
}
.reportEditor {
	overflow: hidden;
}

.reportEditor .rpt-buttons {
	gap: 5px;
	width: 100%;
}

.reportEditor .sb-toolbar {
	align-items: baseline;
	padding: 10px 20px;
}

.reportEditor .drop-on-hover.slim ul li {
	padding: 0;
}

.reportEditor .drop-on-hover.slim .zd-dropdown-menu {
	padding: 0;
}

.reportEditor .zd-dropdown-menu .zdInputPanel {
	margin: 0;
}

.reportEditor .reportOptions {
	top: 47px;
	left: 50%;
	transform: translateX(-50%);
}

.reportEditor .reportEditorModal .zdVueModal-body {
	margin: 0;
	height: 100%;
}

.reportEditor .reportSaveModal .zdVueModal-body {
	overflow: visible;
}

.reportEditor .zdVueModal-container {
	display: grid;
	height: 100%;
	gap: 10px;
}
.reportEditor .zdVueModal-mask:not(.spinner) .zdVueModal-container {
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.reportEditor textarea.form-control {
	height: calc(100% - 10px);
}

.reportEditor .report-body-layout {
	display: grid;
	height: 100%;
	grid-template: "rpt-config rpt-table-preview";
	grid-template-columns: auto minmax(0, 1fr);
}

.reportEditor .rpt-config {
	grid-area: rpt-config;
	min-width: 200px;
	padding: 10px;
	box-shadow: 3px 5px 5px #d8d8d8;
	height: 100%;
	overflow: auto;
	max-width: 50vw;
}
.customReportPage .edit-area {
	height: calc(100% - 48px);
}

.reportEditor .closed.rpt-config {
	min-width: 40px;
}

.rpt-config .db-widgetButton {
    color: lightgray;
}

.reportEditor .rpt-table-preview {
	grid-area: rpt-table-preview;
	padding: 10px;
	overflow: hidden;
	height: 100%;
}

.reportEditor .close-lbl {
	border: 1px solid #9a9a9a;
	padding: 6px;
	width: 100%;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
}

.reportEditor .reportSaveModal .zddi_dropdown {
	position: initial;
	background-color: unset;
	border: none;
	padding: 0;
}


.query-config-with-preview-layout {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: 1fr;
    height: calc(var(--zd-true-view-height) - 150px);
}
.log-query-config-layout {
    overflow-y: auto;
    height: 100%;
    min-width: 600px;
    max-height: calc(var(--zd-true-view-height) - 190px);
}

pre {
    outline: 1px solid #ccc;
    padding: 5px;
    margin: 5px;
}

.rpt-column-config {
    background-color: #ededed;
    border: 1px solid #9a9a9a;
    padding: 5px;
}

    .rpt-column-config.col-header, .rpt-column-config.row-seg {
        background-color: #c5c3c3;
        padding: 5px;
        line-height: 12px;
    }

.rpt-column-config.col-header,
.rpt-column-config.row-seg,
.rpt-column-config.edit-mode,
.rpt-column-group-header {
    position: relative;
}

.rpt-column-config.edit-mode {
        background-color: white;
    }

.rpt-column-config.edit-mode .delete-option {
    display: grid;
    grid-template-columns: 25px 1fr;
}

        .rpt-column-config.edit-mode .delete-option-right {
            display: grid;
            grid-template-columns: 1fr 25px;
        }

.rpt-column-config.col-header .edit-block {
    min-height: 30px;
}

.rpt-column-config:hover, .rpt-column-group-header:not(.blank):hover {
    cursor: pointer;
    background-color: #e2e4ef;
}

.rpt-column-group-header:not(.blank) {
    padding: 0 5px;
    border-left: 2px solid #818181;
    border-top: 2px solid #818181;
    border-right: 2px solid #818181;
    border-radius: 2px;
}

.rpt-seg-config-option {
    margin: 5px;
}

.left-indent::before {
    content: "\00a0 ";
}

.edit-block {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white; /*lightblue;*/
    min-height: 80px;
    border: 1px solid #818181;
    border-radius: 2px;
    z-index: 57;
}

.move-delete-btns {
    display: grid;
    grid-template-columns: 25px 1fr 50px 40px;
}

    .move-delete-btns>* {
        padding: 4px;
    }

.table-config-box {
    border: 1px solid #818181;
    padding: 0px 10px 10px 10px;
    margin-top: 10px;
    box-shadow: -1px 1px 5px #d8d8d8;
    min-width: 350px;
    width: fit-content;
}
.sorting-type-box {
    margin-top: 10px;
}

.source-visualizer {
    box-shadow: -1px 1px 5px #d8d8d8;
    padding: 5px;
    max-height: calc(var(--zd-true-view-height) - 150px);
    overflow: auto;
}


.log-query-fields-tbl tbody td {
    padding-left: 5px;
    padding-right: 5px;
}

.fields-buttons {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-gap: 20px;
    margin-bottom: 10px;
}

.rpt-btn-arrow {
    margin-right: 10px;
    color: rgba(0, 137, 42, 0.5);
    margin-top: 2px;
}

    .rpt-btn-arrow:hover {
        color: dodgerblue;
    }


.query-config-with-preview-layout .zddi_dropdown {
    position: initial;
    background-color: unset;
    border: none;
    padding: 0;
}

.currentContextWrapper {
    grid-column: 1 / span 2;
}

.log-query-visualizer-info {
    display: grid;
    grid-template-columns: 1fr min-content;
    align-items: center;
    margin-bottom: 10px;
}

    .log-query-visualizer-info span {
        margin-right: 10px;
    }

    .log-query-visualizer-info button {
        margin-right: 10px;
    }
.standardReportPage .ReportTable {
	width: fit-content;
	background-color: white;
	border: 1px solid #ccc;
	box-shadow: 0 10px 6px -6px #777;
	-webkit-box-shadow: 0 10px 6px -6px #777;
	border-radius: 4px;
	overflow: hidden;
	height: 100%;
	max-width: 100%;
}

.standardReportPage .ReportTableSpacer {
	border: 10px solid transparent;
	overflow: auto;
	height: 100%;
}

.standardReportPage .formulaEditorFields {
	display: grid;
	grid-template-columns: auto minmax(0,1fr);
	gap: 10px;
}

.standardReportPage .formulaEditorFields > div {
	margin: auto 0;
	text-align: right;
}

.standardReportPage tr.formulaType,
.standardReportPage tr.formulaType > td {
	background-color: #e6e7e9 !important;
	font-style: italic;
}

.standardReportPage tr.invalidDcf,
.standardReportPage tr.invalidDcf > td {
	background-color: rgba(255,0,0,.15) !important;
	font-weight: bold;
}

.standardReportPage .zdInputPanelLeft {
	white-space: nowrap;
}

.standardReportPage .rpt-config #fieldTable tr:hover td.subTableCell {
	background-color: var(--zd-default-highlight-hover) !important;
}

.standardReportPage .inputTable {
	overflow: auto;
	border: 1px solid #ccc;
	min-width: fit-content;
}

.table-type {
    background-color: #ededed;
    border: 1px solid #9a9a9a;
    border-radius: 5px;
    padding: 5px;
    margin: 10px;
    max-width: 40vw;
    overflow: auto;
}
    .table-type:hover {
        cursor: pointer;
        background-color: var(--zd-default-highlight);
    }

    .table-type table td {
        padding: 5px;
        border: 1px solid #9a9a9a;
    }

.cell-edit-icon {
    color: gray;
    cursor: pointer;
}

.rpt-add-wzd {
    height: calc(var(--zd-true-view-height) - 150px);
}

.rpt-add-wzd-tbls {
    display: grid;
    grid-template-rows: minmax(min-content, 1fr) auto;
    grid-template-columns: min-content min-content;
}


.rpt-add-wzd-layout {
    display: grid;
    grid-template-rows: min-content min-content;
    height: 100%;
}
.totals-box {
    margin-top: 10px;
    max-width: 400px;
}

.data-source-row {
    display: grid;
    grid-template-columns: 1fr min-content min-content;
    padding-left: 10px;
    box-shadow: -1px 1px 5px #d8d8d8;
    padding: 2px 11px;
}
.rpt-ic {
    padding: 5px;
    font-size: 1.4em;
}
.rpt-table-preview.power-rpt tbody tr td:first-child {
    height: 24px;
}
.zdVueModal-container.scrollable-modal {
    max-height: 99vh;
    display: flex;
    flex-direction: column;
}
.reportCategoryManager .zdVueModal-body {
	margin-bottom: 0;
}

.reportCategoryManager > .zdVueModal-mask > .zdVueModal-wrapper > .zdVueModal-container > .zdVueModal-body {
	margin-top: 0;
}

.reportCategoryManager > .zdVueModal-mask > .zdVueModal-wrapper > .zdVueModal-container > .zdVueModal-footer {
	padding: 10px 0;
}

.reportCategoryManager .sveSidebarContent {
	overflow: hidden !important;
}

.reportCategoryManager .sve-sidebar {
	padding-bottom: 0px !important;
}
.reportsPage div.formRowLabel.minWidth {
	min-width: 115px;
}

.reportsPage .formRowValue label {
	margin: 0;
}

.reportsPage .oneLineGrid {
	display: grid;
	grid-template-columns: repeat(3, auto auto 1fr);
	gap: 15px;
}

.reportsPage .formRowValue.oneLineGrid input[type="checkbox"] {
	margin: auto 0;
}

.reportsPage .AddReportList {
	overflow: auto;
}
	.reportsPage .AddReportList > span.pointer {
		padding-left: 30px;
	}

.reportsPage .AddReportList>span {
	width: fit-content;
	padding: 0 10px;
	margin: 2px 0;
	font-size: 16px;
	line-height: 1;
}

.reportsPage .AddReportList>span:hover {
	background-color: var(--zd-default-highlight-hover);
}
.reportsPage .AddReportList>span.active:not(:hover) {
	background-color: var(--zd-default-highlight);
}

.reportsPage .reportListSection {
	gap: 5px;
}

.reportsPage .reportListSection > i {
	margin: auto 0;
}

.reportsPage .contactBtnHeader {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: end;
	margin-bottom: 5px;
}

.reportsPage a {
	color: var(--bootstrap-primary);
}

.reportsPage .selectAsText {
	width: min-content;
	padding: 0;
	border: none;
	background-color: unset;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: text;
	user-select: text;
}

.reportsPage .zdVueTable tr.outputDirectory[disabled],
.reportsPage .zdVueTable tr.outputDirectory[disabled] > td {
	cursor: not-allowed;
}
.rotated-columns-table .deviceHeading {
    font-size: 1.1em;
    padding-bottom: 4px;
    font-weight: bold;
}

.rotated-columns-table tr td.location {
    border-bottom: solid 1px lightgray;
    border-top: none 1px lightgray;
    border-left: none 1px lightgray;
    border-right: none 1px lightgray;
    padding-bottom: 16px;
}

.rotated-columns-table td {
    padding: 8px;
    padding-bottom: 16px;
}

.rotated-columns-table .deviceFieldTable {
    margin-left: 7px;
    font-weight: normal;
    font-size: .90em;
    display: grid;
    grid-template-columns: 50% 50%;
}

.rotated-columns-table .fieldLabel {
    float: left;
    clear: left;
    border-bottom: solid 1px lightgray;
    border-top: none 1px lightgray;
    border-left: none 1px lightgray;
    border-right: none 1px lightgray;
    grid-column: 1;
}

.rotated-columns-table .fieldValue {
    float: right;
    clear: right;
    border-bottom: solid 1px lightgray;
    border-top: none 1px lightgray;
    border-left: none 1px lightgray;
    border-right: none 1px lightgray;
    grid-column: 2;
    padding-left: 10px;
    text-align: right;
    white-space: normal;
}

table.rotated-columns-table {
    width: 100%;
}

.flyOutRight {
    padding: 20px;
    -webkit-box-shadow: -6px 0px 11px -7px rgba(0,0,0,0.30);
    box-shadow: -6px 0px 11px -7px rgba(0,0,0,0.30);
}

/*scrollbar for fieldlists only
/*chrome
/* width */
.prettyScroll::-webkit-scrollbar {
    width: 6px;
}
/* Track */
.prettyScroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px white;
}
/* Handle */
.prettyScroll::-webkit-scrollbar-thumb {
    background: lightgray;
}
/* firefox*/
.prettyScroll {
    scrollbar-width: thin;
    scrollbar-color: lightgray white;
}

.userManagement .formRowLabel {
    padding: 4px 8px;
    display: table;
}

    .userManagement .formRowLabel div {
        display: table-cell;
        vertical-align: middle;
        text-align: right;
        height: 30px;
    }

.userManagement .formRowValue {
    padding: 4px 8px;
    display: table;
}

    .userManagement .formRowValue div {
        display: table-cell;
        vertical-align: middle;
        text-align: left;
    }

.userManagement .clickHeader {
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-color: whitesmoke;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 4px;
    cursor: pointer;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
}

.userManagement .alignedCheckContainer {
    display: table;
    padding: 2px 0px;
}

.userManagement .alignedCheckCell {
    display: table-cell;
    vertical-align: middle;
}

@media (min-width: 1800px) {
    .userManagement .tableContainer {
        max-width: calc(100% - 600px);
    }
}


.userManagement .tableContainer.hasSelection {
    max-width: calc(100% - 600px);
    min-width: 553px;
}

.userManagement .tableContainer {
    width: 400px;
}

.userManagement .editorRow {
    grid-column: 1 / span 2;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: solid 1px rgba(0,0,0,.1);
    margin-bottom: 4px;
}
.userSettings .fieldLayout {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 20px;
	row-gap: 10px;
	overflow: auto;
}

.userSettings .fieldLayout > div {
	margin: auto 0;
}

.userSettings .mfaButton {
	padding: 0 12px;
	width: 150px;
}

.userSettings .hrFullWidth {
	width: 100%;
	margin: 10px 0;
}

.userSettings .mfaGrid {
	grid-template-columns: 1fr 1fr 1fr;
	background-color: whitesmoke;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 5px;
	text-align: center;
}

.userSettings .mfaGrid a {
    font-style: italic;
    text-decoration: underline;
}

.userSettings .mobileLayout>input:nth-child(even),
.userSettings .mobileLayout>div:nth-child(even),
.userSettings .mobileLayout>select:nth-child(even) {
	margin-bottom: 10px;;
}

.userSettings .buttonList button{
	width: fit-content;
	margin: 0 auto;
}

.userSettings .zdVueTable tr.active td {
	background-color: var(--zd-default-highlight) !important;
}

.userSettings .zdVueTable table:not(.CellSelectable) .subTableRow:hover td {
	background-color: var(--zd-default-highlight-hover) !important;
}
.deviceSummary {
	background-color: whitesmoke;
	padding: 10px 0 10px 10px;
	height: fit-content;
}

.deviceSummary.widgetMode {
	padding: 0 !important;
}

.deviceSummary.mobile {
	padding: 7px;
}

.deviceSummary .wrapper {
	background-color: white;
	border-bottom: 1px solid #a9a9a9;
}

.deviceSummary .channelHeader {
	height: 35px;
	padding: 5px 10px;
	background-color: var(--zd-navy-light);
	color: white;
}

.deviceSummary .channelTitle {
	font-size: 16px;
	font-weight: bold;
	line-height: 25px;
}

.deviceSummary .desktopSummary {
	overflow: visible;
	gap: 10px;
}

.deviceSummary .mobileSummary {
	overflow: auto;
	gap: 7px;
}

.deviceSummary .mobileSummary.widgetMode {
	padding: 0px;
}

.deviceSummary .fieldListWidget {
	padding: 10px;
	border-left: 1px solid #a9a9a9;
	border-right: 1px solid #a9a9a9;
}

.deviceSummary .fieldListWidget.viewHistory {
	padding: 0 0 5px 15px;
}

.deviceSummary .fieldListWidget.mobile {
	padding: 5px;
}

.deviceSummary .tanksWidget {
	padding: 10px 0;
	border-left: 1px solid #a9a9a9;
	border-right: 1px solid #a9a9a9;
}

.deviceSummary .tanksWidget.mobile {
	width: 100%;
	padding: 5px;
}

.system-balance-wrap {
	background-color: white;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 60px calc(100% - 60px);
}

.sb-toolbar {
	background-color: white;
	border-bottom: 1px solid lightgray;
	padding-left: 20px;
	padding-right: 20px;
	background-color: whitesmoke;
	width: 100%;
	display: flex;
	align-items:center;
}

.sb-toolbar-item {		
	margin-left: 10px;
	margin-right:10px;		
}

.system-balance {
	margin: 10px;
	font-size: 13px;
	max-height:100%;
}


.system-balance-graph-flyout {
	-webkit-box-shadow: -5px 0px 7px -4px rgba(0,0,0,0.54);
	-moz-box-shadow: -5px 0px 7px -4px rgba(0,0,0,0.54);
	box-shadow: -5px 0px 7px -4px rgba(0,0,0,0.54);
	padding: 2px;
	background-color: white;
	overflow: auto;
	min-height: 100%;
	position: relative;
}

	.system-balance-graph-flyout > .rightMenu {
		display: inline-block;
		position: absolute;
		top: 5px;
		right: 8px;
	}

	.system-balance-graph-flyout > .leftMenu {
		display: inline-block;
		position: absolute;
		top: 5px;
		left: 8px;
		font-size: 20px;
		cursor: pointer;
	}

	.system-balance-graph-flyout > .graphingRows {
		display: grid;
		grid-template-rows: 1fr 1fr 1fr;
		height: 100%;
	}

	.system-balance-graph-flyout > .graphingRows > .graphRow {
		padding: 10px 5px 5px 5px;
		border-bottom: solid 1px lightgray;
		width: 100%;
		height: calc(100% - 3px);
	}

		.system-balance-graph-flyout > .graphingRows > .graphRow:last-child {
			border-bottom:  none;
		}


	.system-balance-graph-flyout .percentDeltaToggle {
		font-size: 11px;
		color: gray;
	}

	.system-balance-graph-flyout .percentDeltaToggle:hover {
		color: black;
	}

	.system-balance-graph-flyout .percentDeltaToggle.sel {
		color: blue;
	}

.system-balance-body {
	display: grid;
	height: 100%;
}

	.system-balance-body td.deviceAttribute {
		border-right: solid 1px lightgray;
		border-left: dotted 1px lightgray;
		font-size: .85em;
		text-decoration: underline;
		text-decoration-color: lightgray;
		padding: 5px;
	}
	.system-balance-body table {
		max-width: calc(100% - 5px);
		border-collapse: unset;
	}
	.system-balance-body tr {
		background-color: white;
	}
		.system-balance-body tr.sb-alt-color {
			background-color: #e8e8e8;
		}

	.system-balance-body th {
		top: 0;
		position: sticky;
		box-shadow: inset -1px -1px 0 lightgray;
		background-color: white;
		padding: 4px 8px 4px 8px;
	}

	.system-balance-body tr th:first-child {
		left: 0;
		z-index: 6;
		position: sticky;
	}

	.system-balance-body tr th:last-child {
		box-shadow: inset 0px -1px 0 lightgray;
	}

	.system-balance-body td {
		padding: 2px 4px 2px 4px;
		text-align: right;
	}

		.system-balance-body td.dataCell {
			border-right: solid 1px lightgray;
			max-width: 85px;
			min-width: 85px;
		}

	.system-balance-body tr td:first-child {
		left: 0;
		position: sticky;
		text-align: left;
		padding-left: 12px;
		z-index: 5;
		background: inherit;
		min-width: 150px;
	}

	.system-balance-body tr td:last-child {
		padding-left: 20px;
	}

	.system-balance-body .sb-spacerow td {
		background-color: white;
		font-size: 0.7em;
	}

		.system-balance-body .sb-spacerow td:first-child {
			background-color: white;
			box-shadow: none;
		}

	.system-balance-body .sb-subtotal td {
		font-weight: bold;
		box-shadow: inset 0 -1px 0 lightgray;
		padding-top: 10px;
		max-width: 85px;
		min-width: 85px;
	}

		.system-balance-body .sb-subtotal td:first-child {
			color: #666;
			font-size: 1.4em;
			padding-right: 30px;
			padding-top: 2px;
			padding-bottom: 0px;
		}

	.system-balance-body .graphTotalsIcon {
		font-size: .85em;
		cursor: pointer;
		color:gray;
	}

	.system-balance-body .graphTotalsIcon.outlets:hover, .system-balance-body .graphTotalsIcon.outlets.active {
		color: green;
	}

	.system-balance-body .graphTotalsIcon.inlets:hover, .system-balance-body .graphTotalsIcon.inlets.active {
		color: red;
	}


.sb-clickable {
	cursor: pointer !important;
}

.sb-clickable:hover {
	background-color:aliceblue !important;
}
.system-balance-config .title {
	font-weight: 600;
	font-size: 1.6em;
}

.system-balance-config .subtitle {
	font-weight: 500;
	font-size: 1em;
}

div.zdVueModal-mask.sysBalConfigModal {
	position: fixed !important;
}

.sysBalConfigModal hr {
	margin: 5px 0px;
	border-color: lightgray;
}

.system-balance-config-edit {
	display: grid;
	grid-template-columns: 220px 1fr;
	grid-template-areas: "properties devices";
	padding-bottom: 10px;
}

	.system-balance-config-edit .deviceListWrapper {
		padding: 10px;
		padding-bottom: 0;
		grid-template-rows: auto minmax(0, 1fr);
		grid-area: devices;
		display: grid;
		overflow: hidden;
		max-height: 75vh;
	}

    .config-property {
        padding-top: 5px;
        padding-bottom: 5px;
    }

.system-balance-config-edit .deviceFieldListing {
	cursor: pointer;
	text-decoration: underline;
	color: #6d6b6b;
	min-width: 100px;
}
	.system-balance-config-edit .deviceFieldListing:hover {
		color: black;
	}

	.system-balance-config-edit .deviceFieldListing.override {
		color: blue;
	}

    .zd-toggle-button input[type=radio] {
        opacity: 0;
        position: absolute;
        clip: rect(0, 0, 0, 0);
        pointer-events: none;
    }

    .zd-toggle-button .active {
        background-color: #c4daff !important;
    }

	.system-balance-config-edit label {
		font-weight: 500;
		cursor: pointer;
	}
.view-editor .monaco-editor {
    position: absolute !important;
}

.stretch.vueElement.viewList {
    display: flex;
    overflow: auto;
}

.view-editor {
    width: 100%;
    overflow: hidden;

    .renderer-container {
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
    }

    .view-editor-content {
        display: grid;
        grid-template-columns: 450px 1fr;
        padding: 10px;
        gap: 10px;
        overflow: hidden;
    }

    #monacoContainerViews {
        position: relative;
        min-height: 400px;
    }

    .view-editor-grid {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 10px 16px;
        align-items: center;
        padding-top: 9px;
    }

    .input-row {
        display: contents;
    }

    .input-label {
        text-align: right;
        font-weight: 500;
        padding-right: 8px;
    }

    input.pointer {
        height: 20px;
        width: 20px;
        margin: auto 0px;
    }
}

.vueManagementModal.vueElement {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    max-height: 85vh;
    min-width: 850px;
}

    .vueManagementModal.vueElement > .modalHeader {
        padding-bottom: 5px;
        display: grid;
        grid-template-columns: 50% 50%;
    }

        .vueManagementModal.vueElement > .modalHeader .title {
            font-weight: 600;
            font-size: 1.1em;
        }

        .vueManagementModal.vueElement > .modalHeader .subTitle {
            font-size: .90em;
        }

    .vueManagementModal.vueElement > .modalBody {
        margin: 5px 0px;
    }

    .vueManagementModal.vueElement > .modalFooter {
        padding-top: 10px;
        margin: 10px 0px;
        text-align: center;
    }

    .vueManagementModal.vueElement .removeActions {
        width: 200px;
        text-align: left;
        margin-top: 3px;
    }

    .vueManagementModal.vueElement .smallerToggle {
        padding: 3px 8px;
        min-width: 60px;
    }

    .vueManagementModal.vueElement .addPrompt {
        padding: 12px;
        margin-top: 5px;
        text-align: center;
    }

    .vueManagementModal.vueElement .underlinedRow {
        border-bottom: solid 2px #bbb !important;
    }


@keyframes growViewManagement {
    100% {
        max-height: 85vh;
        overflow: auto;
    }

    99% {
        max-height: 85vh;
        overflow: hidden;
        opacity: 1;
    }

    0% {
        max-height: 0px;
        overflow: hidden;
        opacity: 0;
    }
}

.vueManagementModal .grow {
    animation: growViewManagement .44s;
    max-height: none;
    overflow: auto;
}

@keyframes shrinkViewManagement {
    100% {
        max-height: 0px;
        min-height: 0px;
        overflow: hidden;
        opacity: 0;
    }

    99% {
        max-height: 0px;
        overflow: hidden;
        opacity: 1;
    }

    0% {
        max-height: 85vh;
        min-height: 115px;
        overflow: auto;
    }
}

.vueManagementModal .shrink {
    animation: shrinkViewManagement .44s;
    max-height: 0px;
    overflow: hidden;
}

.clickableCell {
    cursor: pointer;
    color: dodgerblue;
    text-align: center;
}

    .clickableCell:hover {
        text-decoration: underline;
    }

    .clickableCell.cornflowerblue {
        color: cornflowerblue;
    }

.modalHeader .add-button {
    padding-top: 8px;
    text-align: start;
    grid-column: 1 / -1;
}

.custom-loader {
    text-align: center;
    min-height: 130px
}

.confirmation-table {
    width: 80%;
    margin: auto;

    td {
        text-align: center;
        font-weight: bold;
    }
}


.gsv th {
    padding: 4px 4px 1px 4px;
    z-index: 2;
    background-color: #e5e5e5;
}

.gsv td {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 27px;
}

.btn-action {
    height: 30px;
    min-width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-action[disabled] {
    opacity: 0.25;
}

.btn-action:not([disabled]):hover {
    mix-blend-mode: multiply;
}

.zd-action-cell-icon {
    vertical-align: middle;
    text-align: left;
    margin-right: 5px;
    mix-blend-mode: normal;
}

.zd-action-cell-icon:hover {
    cursor: pointer;
    mix-blend-mode: luminosity;
}

.zd-action-style-btn {
    height: auto;
    text-wrap: balance;
}

.action-style:not([styled]) {
    color: rgb(176, 176, 176);
}

.action-style[styled] {
    color: var(--bootstrap-primary);
}

tr.se-alt-color td, tr.se-alt-color td.location, .se-alt-color tr.Data:nth-child(2n) td, .se-alt-color tr.Data:nth-child(2n) td.location {
    background-color: #eaeaea;
}

.zd-tbl-headers {
    font-weight: bold;
    background-color: white;
    min-width: 50px;
}

.location {
    background-color: white;
}
.location a {
    padding-right: 3px;
    text-decoration: none;
}

.location-border .location {
    border-right: 1px solid #dbdbdb;
}
.gsv-column {
    text-align: center;
    vertical-align: bottom;
    min-width: 80px;
    width: 100px;
}
.gsv-column:last-child {
    border-right: none;
}

td.gsv-total {
    font-weight: bold;
    background-color: white;
    background-color: #e5e5e5;
}

.gsv-column:hover {
    cursor: pointer;
}

.gsv span.lastInRow {
    border-right: none;
}

table.gsv {
    border-collapse: inherit;
}

    .gsv-toolbar-item {
        margin-right: 10px;
    }

.gsv td {
    text-align: right;
}
.gsv.show-borders tbody td {
    border-right: 1px solid #dbdbdb;
}
.gsv.show-borders tbody .Total td {
    border-right: none;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    vertical-align: top;
}
.gsv.show-borders tbody .Space td {
    border-right: none;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
.gsv tbody td:last-child {
    border-right: none;
}
.gsv td.group span i, .gsv .fa-info-circle {
    color: #151414b3;
    cursor: pointer
}
.gsv .fa-info-circle {
    margin-top: 3px;
}

.gsv td.left, .gsv tr:not(.group-footer) td.location {
    text-align: left;
}

.se-column-headers th {
    text-align: center;
    background-color: #e5e5e5;
}
.gsv-column.DATETIME {
    width: 140px;
}
.m-DATETIME {
    min-width: 155px;
}
    .m-DATETIME.includeAlarms, .m-DATETIME.inComAlarm {
        min-width: 165px;
    }

.gsv-column.ACTION, .gsv-column.DATA.NUMBER, .gsv-column.DATA.STRING {
    width: 100px;
}

.group-header, .group-footer {
    font-weight: bold;
    height: 20px;
}

.group-header.expanded td {
    border-bottom: none;
}

.group-header.group td {
    padding-top: 10px;
    vertical-align: bottom;
}

/*should .PAD and .WELL just be .CONTAINER? to keep it generic*/
.group-header.PAD td {
    padding-top: 8px;
    vertical-align: bottom;
}
.group-header.WELL td {
    padding-top: 6px;
    vertical-align: bottom;
}

.tree-mode tr td:first-child {
    border-left-style: solid;
    border-color: #dadada;
}
.group-footer, .group-footer .location {
    background-color: #dadada;
}

.Total {
    font-weight: bold;
    height: 50px;
}

.group-footer {
    font-weight: bold;
}

table .is-sticky-left,
table .is-sticky {
    position: -webkit-sticky;
    position: sticky;
}

table .is-sticky-left {
    left: 0;
    z-index: 1;
}

table th.is-sticky {
    top: 0;
    z-index: 2;
}

table tfoot.is-sticky,
table tfoot td.is-sticky {
    bottom: 0;
    z-index: 2;
}

table th.is-sticky-left,
table tfoot.is-sticky-left,
table tfoot td.is-sticky-left {
    z-index: 3;
}

.sticky-location {
    color: #23527c;
    mix-blend-mode: color-burn;
}

td.location > a:hover, td.location > i:hover {
    color: #23527c;
    mix-blend-mode: color-burn;
}

.table-container {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    overflow-y: hidden;
    max-width: 100%;
}

.table-wrapper {
    margin-left: 15px;
    padding-right: 15px;
}
.table-wrapper.has-sticky-header {
    overflow-y: auto;
}

tbody tr:not(.group-footer) .location:not(.group) {
    font-weight: bold;
}

.gsv tbody tr:hover, .gsv tbody tr:hover td, .se-alt-color tr.Data:nth-child(2n):hover td, .se-alt-color tr.Data:nth-child(2n) td.location:hover {
    background-color: #c4daff;
}

.group-footer .location {
    text-align: right;
}

.group-header td {
    border: 1px solid #dbdbdb;
    border-width: 0 0 1px;
}

.group-header .name {
    font-size: 1.2em;
}

.group-header .count {
    font-size: .9em;
    font-weight: normal;
    padding-left: 4px;
}

.gsv td {
    color: #444343;
    vertical-align: middle;
}
    .avg-val, .gsv td.avg-val {
        color: orangered;
    }

    .gsv td > span {
        padding-right: 3px;
        vertical-align: middle;
    }

td.includeAlarms > span:focus, td.includeAlarms > span:hover {
    color: #23527c;
    text-decoration: underline;
    cursor: pointer;
    mix-blend-mode: color-burn;
}


.gsv tfoot td {
    border-top: 1px solid #dadada;
    border-right: 1px solid #dbdbdb;
}

.gsv.show-borders tfoot td {
    border-bottom: 1px solid #dbdbdb;
}
    .gsv.show-borders tfoot td:first-child {
        border-left: none;
    }
    .gsv.show-borders tfoot td:last-child {
        border-right: none;
    }
   
    .icon {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        height: 1.5rem;
        width: 1.5rem;
    }

    .icon.is-expanded {
        transform: rotate(90deg);
    }

.icon {
    transition: transform .15s ease-out, opacity 86ms ease-out;
}

.temp-message {
    font-weight: bold;
    color: #167df0;
    position: absolute;
    top: 0;
    left: 44%;
    z-index: 10;
    background-color: #f9f9f9;
    border: 1px solid #dbdbdb;
    min-height: 30px;
    padding: 10px;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}
.summary-view-wrap {
    background-color: #fff;
    width: 100%;
    height: 100%;
}

.gsv-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
}
.gsv-layout-hide-control {
    grid-template-rows: minmax(0, 1fr);
}

:root {
    --gsv-edit-height: 90vh;
}

.gsv-edit-layout {
    height: var(--gsv-edit-height);

    display: grid;
    grid-template-columns: 175px 1fr;
    grid-template-rows: 38px calc(var(--gsv-edit-height) - 100px) 60px;
    grid-template-areas: "header1 header1" "left-settings body" "footer footer"
}

@media (min-width: 1500px) {
    .fullscreen .gsv-edit-layout {
        max-width: 100vw;
        width: calc(100vw - 30px);
        grid-template-columns: 175px 958px 1fr;
        grid-template-areas: "header1 header1 header1" "left-settings body right-preview" "footer footer footer"
    }
}

@media (max-width: 1500px) {
    .fullscreen .gsv-edit-layout {
        max-width: 100vw;
        width: calc(100vw - 30px);
        grid-template-columns: 175px 1fr;
        grid-template-areas: "header1 header1" "left-settings right-preview" "footer footer"
    }

    .fullscreen .gsv-edit-layout .body { display: none;}
}


.gsv-edit-meta {
    max-width: 600px;
}

    .gsv-edit-meta td {
        padding: 10px;
    }

.header1 {
    grid-area: header1;
}

.header2 {
    grid-area: header2;
}

.tab {
    grid-area: tab;
}

.body {
    grid-area: body;
}

.footer {
    grid-area: footer;
}
.right-preview {
    grid-area: right-preview;
}

.tab-btns > div:hover, .tab-btns > div *:hover, .tab-btns > div.selected {
    background-color: #c4daff;
    cursor: pointer;
}

.tab-btns > div > span {
    color: #808080;
    font-size: 1.733333em;
}

.tab-btns > div > span, .tab-btns > div > label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-btns > div {
    display: grid;
    grid-template-columns: 50px 1fr;
    text-align: center;
    height: 45px;
}

.config-area {
    padding: 0 10px 10px 10px;
    overflow-y: auto;
}

.device-type-selector-layout {
    display: grid;
    grid-template-columns: minmax(10px, max-content) 1fr;
    grid-template-rows: fit-content(100px);
}

    .device-type-selector-layout label {
        padding-right: 10px;
        cursor: pointer
    }

    .device-type-selector-layout input {
        cursor: pointer
    }

.container-types {
    padding-right: 40px;
}

.gsv-column-table th {
    padding: 5px;
    background-color: white;
    z-index: 4;
}

.gsv-column-table .disabled {
    background-color: #eaeaea;
}

.gsv-footer {
    display: flex;
    vertical-align: middle;
    border-top: 1px solid #dbdbdb;
    padding: 10px;
}

.input-sizer {
    display: inline-grid;
    vertical-align: top;
    align-items: center;
    position: relative;
    /*border: solid 1px;*/
    padding: .25em .5em;
    margin: 5px;
}

    .input-sizer input {
        width: auto;
        min-width: 1em;
        grid-area: 1/2;
        font: inherit;
        padding: 0.25em;
        margin: 0;
        resize: none;
        background: none;
        appearance: none;
        border: none;
    }

    .input-sizer::after {
        content: attr(data-value) ' ';
        visibility: hidden;
        white-space: pre-wrap;
    }

input.zd-light, input.zd-light:focus, select.zd-light {
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    max-width: inherit;
}
select.zd-light {
    border-bottom: 1px solid #9e9e9e;
}

    input.zd-light, input.zd-light:focus {
        border-bottom: 1px solid #9e9e9e;
    }

    .zd-light:disabled {
        background-color: unset !important;
    }

.quick-history-txt {
    text-align: right;
}

.quick-history-txt > span:hover {
    cursor: pointer;
    text-decoration: underline;
}

.ellipsis-text {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

    .gsv-column-table td {
        padding: 5px;
    }

select.major-type-dropdown {
    position: relative;
    display: block;
    color: #636b6f;
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    vertical-align: middle;
    height: 34px;
    text-transform: none;
    font-weight: 300;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    float: none;
    box-shadow: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
}
.redirect-hover:hover {
    text-decoration: underline;
    color: #23527c;
    mix-blend-mode: color-burn;
}

.me-edit-date {
    color: blue;
    text-align: right;
}
.me-edit-date:hover{
    text-decoration: underline;
    cursor: pointer;
}
.gsv-options {
    display: grid;
    grid-template-columns: 270px min-content;
    grid-template-rows: auto;
}

    .gsv-options .sub-option {
        padding: 0px 0px 0px 20px;
        margin-top: auto;
        margin-bottom: auto;
    }

.gsv-options > div {
    padding: 5px;
}

    /*mobile */
    .btn-se-mobile div {
        border-top: none;
        border-bottom: none;
        border-radius: 0px;
    }
.btn-se-mobile .zddate-window .btn-default {
    border: none;
}
.gsv-layout-mobile {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
    max-height: 100%;
}

    .gsv-layout-mobile > .gsv-controls-mobile {
        background-color: #f8f8f8;
        border-bottom: solid 1px #dddddd;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

        .gsv-layout-mobile > .gsv-controls-mobile .btn-group {
            height: 100%;
        }

        .gsv-layout-mobile > .gsv-controls-mobile .btn {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 45px;
        }

        .gsv-layout-mobile > .gsv-controls-mobile > .rightSide{
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
        }

            .gsv-layout-mobile > .gsv-controls-mobile > .rightSide > .currentField {
                text-align: center;
                text-overflow: ellipsis;
                padding: 5px;
                border-left: solid 1px #dddddd;
                border-right: solid 1px #dddddd;
                max-height: 50px;
            }

                .gsv-layout-mobile > .gsv-controls-mobile > .rightSide > .currentField .caption {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 100%;
                    max-height: 45px;
                }


            .gsv-layout-mobile > .gsv-controls-mobile > .rightSide > .fieldArrow {
                height: 40px;
                text-align:center;
                padding-top:10px;
                min-width: 45px;
                cursor:pointer;
            }
                .gsv-layout-mobile > .gsv-controls-mobile > .rightSide > .fieldArrow.lightGray {
                    color: lightgray;
                }

    .gsv-layout-mobile > .gsv-mobile-body {
        overflow: auto;
        max-height: 100%;
    }

        .gsv-layout-mobile > .gsv-mobile-body .location a {
            color: black;
            font-weight: normal;
            padding: 10px;
        }

        .gsv-layout-mobile > .gsv-mobile-body tbody tr:not(.group-footer) .location:not(.group) {
            padding: 8px;
        }

.gsv-mobile-body tr.Data.se-alt-color td, .gsv-mobile-body tr.Data.se-alt-color td.location, .gsv-mobile-body .se-alt-color tr.Data:nth-child(2n) td, .gsv-mobile-body .se-alt-color tr.Data:nth-child(2n) td.location {
    background-color: whitesmoke;
}

.gsv-layout-mobile > .gsv-mobile-body tr.mobileTotals td {
            border-top: 1px solid lightgray;
            background-color: #f8f8f8;
        }

    .gsv-layout-mobile > .gsv-mobile-body-collapse {
        overflow: auto;
        max-height: 100%;
    }

    .gsv-layout-mobile  tbody.rotatedMobile .deviceHeading {
        font-size: 1.1em;
        padding-bottom: 4px;
    }

    .gsv-layout-mobile tbody.rotatedMobile tr td.location {
        border-bottom: solid 1px lightgray;
        padding-bottom: 16px;
    }

    .gsv-layout-mobile > .gsv-mobile-body tbody.rotatedMobile tr:not(.group-footer) .location:not(.group) {
        padding: 8px;
        padding-bottom: 16px;
    }

.gsv-layout-mobile tbody.rotatedMobile .deviceFieldTable {
    margin-left: 25px;
    margin-right: 35px;
    font-weight: normal;
    font-size: .90em;
    display: grid;
    grid-template-columns: 50% 50%;
}

    .gsv-layout-mobile tbody.rotatedMobile .deviceFieldTable > .fieldLabel {
        float: left;
        clear: left;
        border-bottom: solid 1px lightgray;
        grid-column: 1;
    }

    .gsv-layout-mobile tbody.rotatedMobile .deviceFieldTable > .fieldValue {
        float: right;
        clear: right;
        border-bottom: solid 1px lightgray;
        grid-column: 2;
    }

[disabled].grab-handle:hover, [disabled].grab-handle, [disabled].grab-handle > * {
    cursor: not-allowed;
    opacity: .65;
}
/*end mobile */
#group-summary-config_vue-modal > .zdVueModal-mask > .zdVueModal-wrapper > .zdVueModal-container {
    width: 100vw;
    height: 98vh;
}
.preview-font{ font-size: .8em;}


.vis-selector label {
    padding-left: 6px;
    padding-right: 6px;
}

.config-column:not(.advanced-open) {
    border-bottom: solid 1px #d9d6d6;
}

.toggle-advanced {
    text-align: center;
}
.toggle-shown {
    background-color: #c4daff;
}
.advanced-row span {
    width: 150px;
    font-size: 1.1em;
    display: inline-block;
}

.advanced-row {
    display: grid;
    grid-template-columns: 130px 260px 130px 250px;
    grid-template-rows: 35px;
    gap: 5px;
    padding: 5px;
}
    .advanced-row > span {
        margin: auto;
    }
.shadow-border {
    border-right: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
.h34>div {
    height: 34px;
}
.err-msg {
    padding-left: 20px;
    padding-top: 20px;
    font-size: 20px;
}

.wizard-med-option-list-item {
    padding: 10px;
    border-radius: 25px;
    border-style: solid;
    border-color: gray;
    text-align: center;
    margin: 10px;
}

.wizard-med-option-list-item > div {
    font-size: 24px;
    padding: 41px;
}


    .wizard-med-option-list-item.active {
        background: #c4daff
    }


    .wizard-option-list {
        padding: 5px;
        width: fit-content;
    }

.wizard-error {
    color: red;
    font-weight: bold;
}
.wizard-choices, .wizard-error {
    float: left;
    min-width: 230px;
}
.wizard-list {
    flex: 1 1 auto;
    height: 100%;
    overflow: auto;
    padding: 0px 48px;
    position: relative;
    overflow-y: hidden;
}
.wizard-list-medium, .wizard-list-small {
    padding: 0px 0px;
}
.wizard-list>h1 {
    margin-bottom: 2px;
    padding-bottom: 20px;
    line-height: 36px;
    position: sticky;
    left: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: rgb(0, 0, 0);
    font-weight: bold;
}

.action-bar {
    display:flex;
    flex-direction:row;
    top: 0px;
    left: 0px;
    margin-top: 8px;
}
.action-bar .exportList>div {
    display:inherit;
    padding-left: 10px;
}
.action-bar>button, .action-bar>div, .action-bar>.exportList {

    margin-right: 10px;
}
.wizard-dataTable {
    height: 100%;
}
.wizard-dataTable thead tr th {
    background-color: #c8cace;
}
.wizard-dataTable tbody tr td,

.wizard-dataTable tbody tr td:first-child
{
    border-left: none !important;
    border-right: none;
}

.action-button:not([disabled]):hover {
    cursor: pointer;
}
.wizard-dataTable .action-button:not(td), .wizard-dataTable a.action-button:hover {
    color: #008fd5;
}
table.wizard-dataTable tbody tr:nth-child(odd), table.wizard-dataTable tbody tr:nth-child(even) {
    background-color: #fff !important;
}
table.wizard-dataTable tbody tr:hover {
    background-color: #eff0f1 !important;
}

.visableonhover .vistarget {
    opacity: 0;
    filter: alpha(opacity=0);
}

.visableonhover:hover .vistarget {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.25s, -webkit-transform 0.25s;
    transition: opacity 0.25s, transform 0.25s;
}

table.wizard-dataTable.large td,
table.wizard-dataTable.large th{
    padding: 8px;
    line-height: 1.42857143;
    font: 1.25em "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif ;
}


table.wizard-dataTable.medium td,
table.wizard-dataTable.medium th {
    padding: 8px;
    line-height: 1.42857143;
    font: 1em "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}

.wizard-result-info {
    color: #2f6c2f;
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 5px;
    display: none;
    color: #2f6c2f;
}
.wizard-result-info>i {
    font-size: 26px;
}
.wizard-result-info>.result-message {
    color: #2f6c2f;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
.wizard-result-info.shown {
    display: initial;
}
.wizard-result-info.error
{
    color: red;
}

.wizard-base {
    position: relative;
    padding-top: 16px;
    height: calc(100% - 140px);
    max-height: calc(100% - 140px);
}
.wizard-base-medium, .wizard-base-small {
    position: relative;
    padding-top: 16px;
    height: calc(100% - 80px);
    max-height: calc(100% - 80px);
}
.dt-container {
    min-width: 1px;
    min-height: 1px;
    height: calc(100% - 20px);
    max-height:100%;
    width: 100%;
}

.wizard-panel {
    display: flex;
    background-color: rgb(255, 255, 255);
    right: 0px;
    flex-direction: column;
    overflow: hidden auto;
    max-height: 100%;
    height: 100%;
    width: 100%;
}
.wizard-panel h1 {
    padding-left: 20px;
}
.wizard-content {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 20px;
    padding-top: 20px;
    max-height: calc(100% - 124px);
}
.wizard-content .itemListContainer {
    padding-left: 40px;
    padding-right: 40px;
}

.wizard-base {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow-y: hidden;
    flex: 1 1 auto;
}
.wizard-close-panel {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
.wizard-close-panel>button {
    height: 30px;
    width: 30px;
    background: transparent;
}
.wizard-footer {
    height: 83px;
    flex: 0 0 auto;
}
.wizard-footer>div {
    padding: 10px 10px;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.wizard-footer .close-btn {
    margin-left: 10px;
}
    .wizard-footer .save-btn {
        margin-left: 10px;
    }
    .wizard-footer .back-btn {
        margin-left: 10px;
    }

/*Javascript input panel*/
.ip-panel .control-label {
    padding-top: 7px;
}
.ip-panel .IP-form-group {
    height: 30px;
}

.scroll-content {
    overflow-y: auto;
    height: 100%;
}
.datatable.large td,
.datatable.large th {
    padding: 8px;
}
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    line-height: 1.42857143;
    font: 1.35em "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}
.wizard-grid>div {
    padding: 5px;
    /*min-height: 35px;*/
}
.wizard-grid>.wzd-item {
    border-color: #0084B4;
    border: 3px solid #ccc;
}

.wizard-grid>.wzd-item:hover,
.wizard-grid>.wzd-item.sel{
background-color: #c4daff;
cursor: pointer;
}
.wizard-content-info {
height: 200px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
border-top: 1px solid rgba(0, 0, 0, 0.2);
font: 1.35em "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}
    .wizard-content-info textarea {
        margin: 0px;
        width: 100%;
        resize: none;
        border: none;
    }

.wizard-checkbox {
    position: relative;
    display: block;
    max-height: 17px;
}

.wizard-checkbox input[type=checkbox] {
    visibility: hidden;
}

.wizard-checkbox label {
    margin-bottom: 0px;
    width: 20px;
    height: 20px;
    top: -2px;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.wizard-checkbox label:hover {
    background: #c4daff;
}

.wizard-checkbox input[type=checkbox]:checked + label:after {
    opacity: 1;
}

.wizard-checkbox label:after {
    content: '';
    width: 12px;
    height: 7px;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.wizard-title {
    text-align: justify;
    margin-bottom: 2px;
    padding-left: 20px;
    line-height: 36px;
    font-size: 30px;
    font-weight: bold;
    font-family: arial, sans-serif;
}

.zd-channel-summary {
    display: grid;
    grid-template-rows: 1fr auto;
    max-height: 84vh;
    width: 400px;
    max-width: calc(100vw - 30px);
    margin: 0px;
}

.zd-channel-summary > .modalFooter {
    margin-top: 10px;
    padding-top: 10px;
    text-align: center;
    border-top: solid 1px lightgray;
}

.zd-channel-summary > .modalBody {
    text-align: center;
    max-height: 80vh;
    overflow-y: auto;
}

.zd-channel-summary .fieldListBody {
    width: 100%;
    margin-bottom: 8px;
}

@keyframes channelSummaryGrow {
    0% {
        max-height: 0px;
        overflow: hidden;
        opacity: 0;
    }

    99% {
        max-height: 80vh;
        overflow: hidden;
        opacity: 1;
    }

    100% {
        max-height: none;
        overflow: auto;
    }
}

.zd-channel-summary .grow {
    animation: channelSummaryGrow 1s;
    max-height: none;
    overflow: auto;
}

.zd-channel-summary tr > td:last-child {
    padding-right: 5px;
}

.tank-picker-zdTree {
    padding-top: 25px;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
}

.tank-picker-header {
    text-align: justify;
    margin-bottom: 2px;
    line-height: 36px;
    font-size: 30px;
    font-weight: bold;
}

#tankTreeContainer {
    overflow: auto;
    margin-top: 10px;
}

.tank-picker-footer {
    padding: 10px;
}

/* relative path picker CSS*/
button.relativePicker.toggleTree {
    margin-bottom: 12px;
}
.zdTree ul {
    line-height: 1.7;
}
.zdTree li a {
    cursor: default;
    text-decoration: none;
    padding: 5px;
}

    .zdTree li a.selectable {
        color: black;
        cursor: pointer;
    }

    .zdTree li a.selectable:hover {
        text-decoration: underline;
    }


    .zdTree li a.selected {
        background-color: rgb(3,134,182);
        color: white;
    }

    .zdTree li a.thisDevice {
        background-color: rgba(0, 0, 0, 0.63);
        color: white;
    }


.betterScroll::-webkit-scrollbar {
    height: 12px;
}
.betterScroll::-webkit-scrollbar-track {
    background: whitesmoke;
    border-radius: 4px;
    opacity: 0.8;
}
.betterScroll::-webkit-scrollbar-thumb {
    background: #dddddd;
    border-radius: 4px;
    opacity: 0.8;
}
/* end relative picker */
.prev-d-l {
    text-align: left;
    grid-column: 1;
}

.prev-d-r {
    text-align: right;
    grid-column: 2;
}

.prev-d-r {
    grid-row: 1;
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-changer-wide .prev-d-r {
    justify-content: flex-end;
    font-weight: normal;
    font-size: 12px;
}

.device-changer {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    margin-top: 3px;
    padding-left: 5px;
    padding-right: 5px;
}


@media (min-width:700px) {
    .me-device-narrow {
        display: none;
    }
    .me-drag-target {
        grid-column: 1 / span 2;
        grid-row: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 25px;
    }
    .device-changer-wide {
        grid-column: 1 / span 3;
        grid-row: 2;
        display: grid;
    }
}

@media (max-width:700px) {
    .device-changer-wide, .device-changer-wide-name {
        display: none;
    }
}
/* globalToaster.css - Default styles for globalToaster Vue component */
.globalToasterContainer {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    pointer-events: none;
    width: 350px;
    max-width: 100vw;
}

.globalToasterMessage {
    display: flex;
    justify-content: space-between;
    position: relative;
    background: var(--neutral-50);
    color: var(--neutral-800);
    border-radius: 4px;
    border: 1px solid var(--neutral-300);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    padding: 16px 24px;
    font-size: 15px;
    pointer-events: auto;
    transition: box-shadow 0.2s;
}
.globalToasterMessage:hover {
    box-shadow: var(--shadow-md);
}

.globalToasterMessageText {
    align-self: center;
}

/* Close button styles */
.globalToasterClose {
    align-self: flex-start;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.7;
    font-weight: bold;
    pointer-events: auto;
    transition: opacity 0.2s;
    z-index: 1;
}
.globalToasterClose:hover {
    opacity: 1;
}

/* Level-based styles */
.globalToasterMessage.success {
    background: var(--green-100);
    border: 1px solid var(--green-200);
    color: var(--green-900);
}
.globalToasterMessage.info {
    background: var(--blue-100);
    border: 1px solid var(--blue-200);
    color: var(--blue-900);
}
.globalToasterMessage.warning {
    background: var(--amber-100);
    border: 1px solid var(--amber-300);
    color: var(--amber-900);
}
.globalToasterMessage.error {
    background: var(--red-100);
    border: 1px solid var(--red-200);
    color: var(--red-900);
}

/* Fade transition for toast messages */
.globalToasterContainer .fade-enter-active, .globalToasterContainer .fade-leave-active {
    transition: opacity 0.5s;
}
.globalToasterContainer .fade-enter, .globalToasterContainer .fade-leave-to {
    opacity: 0;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f8f9fa;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-menu-item {
    width: 100%;
}

.sidebar-menu-item .menu-item {
    transition: background-color 0.2s;
}

.sidebar-menu-item .menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.sidebar-menu-item .menu-item.selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.sidebar-menu-item .sub-items {
    display: flex;
    flex-direction: column;
}

.sidebar-menu-item .menu-item.sub-item {
    font-size: 0.95em;
}

.sidebar-menu {
	overflow: auto;
	border-right: 1px solid #ccc;
}

	.sidebar-menu > .sidebar-menu-item > .menu-item,
        .sidebar-menu > .sidebar-menu-item > .sub-items > .menu-item {
		padding: 0 10px;
		font-size: 13px;
		line-height: 1em;
		height: 40px;
		display: flex;
	}

	.sidebar-menu > .sidebar-menu-item > div.multiTab {
		height: auto;
		min-height: 40px;
	}

	.sidebar-menu > .sidebar-menu-item > div.subTab {
		background-color: whitesmoke;
		padding-left: 25px;
		height: auto;
		min-height: 30px;
	}

		.sidebar-menu > .sidebar-menu-item > div > span {
			margin: auto 0;
		}
			.sidebar-menu > .sidebar-menu-item > div > span i {
				width: 16.25px;
			}

		.sidebar-menu > .sidebar-menu-item > div.selected,
            .sidebar-menu > .sidebar-menu-item > .sub-items > .menu-item.selected {
			background-color: var(--zd-default-highlight);
		}

		.sidebar-menu > .sidebar-menu-item > .menu-item:hover,
            .sidebar-menu > .sidebar-menu-item > .sub-items > .menu-item:hover {
			background-color: #a2c4ff;
		}

.permissions-selection {
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    align-items: center;
}

.permissions-selection-item {
    flex: 1 1 auto;
    padding-top: 6px;
    font-size: 14px;
}

.permissions-selection-label {
    padding-right:12px
}
.zdcheckboxlist .toggleButton {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .zdcheckboxlist .toggleButton:hover {
        background: whitesmoke;
    }

    .zdcheckboxlist .toggleButton.dropdownVisible {
        background: whitesmoke;
    }

.zdcheckboxlist .dropdown {
    position: absolute;
    background: white;
    z-index: 100000;
    border-radius: 5px;
    border: solid 1px #c0c0c0;
    max-width: 200px;
    min-width: 120px;
    max-height: 250px;
    overflow: auto;
    cursor: default;
}

    .zdcheckboxlist .dropdown .item {
        padding: 3px;
        cursor: pointer;
    }

        .zdcheckboxlist .dropdown .item:hover {
            background-color: whitesmoke;
        }

        .zdcheckboxlist .dropdown .item .caption {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.zdColorPicker {
    border: solid 1px lightgray;
    background: whitesmoke;
    padding: 2px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    font-size: 12px;
}

    .zdColorPicker:hover {
        background: #eee;
    }

.zdColorPicker .colorDdl {
    z-index: 999;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: whitesmoke;
    border-radius: 3px;
    border: solid 1px #e0e0e0;
    padding: 5px;
    cursor: default;
    text-align: left;
}

.zdColorPicker .colorRow {
    clear: both;
}

.zdColorPicker .ddColorMixer {
    width: 200px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 35px;
    grid-gap: 5px;
}

.zdColorPicker .colorRect {
    height: 17px;
    width: 17px;
    margin-right: 3px;
    margin-bottom: 3px;
    display: inline-block;
    float: left;
    cursor: pointer;
    border: solid 1px transparent;
}

    .zdColorPicker .colorRect:hover, .zdColorPicker .colorRect.selected {
        border: solid 1px black;
    }body {
}

.ddColorMixer .pickTransparent {
    height: 100%;
    width: 100%;
    border: solid 1px gray;
    text-align: center;
    color: gray;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.zdColorPicker .valueInput {
    text-align: center;
    background: transparent;
    border: transparent;
    height: 20px;
    font-size: 12px;
    padding:0px;
}


.zdColorPicker .valueInput:focus {
    outline: none;
}

.color-picker-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 600px) {
    .subTableCell.contactSelectorCell {
        padding: 4px 4px;
    }
}
.company-control-app-selector-header {
    width: 100%;
}

.company-control-app-selector-header > div {
    border-bottom: 1px solid rgb(217, 214, 214);
    display: grid;
    grid-template-columns: auto auto;
}

.company-control-app-selector-header > div > button {
    justify-self: right;
}

.company-control-app-selector-header > div > h3 {
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0px;
    padding: 7.5px 0px;
}

.control-app-container > p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex: 10;
}

.control-app-container > input {
    flex: 1;
    margin: auto;
}

.control-app-list-container {
    display: grid; 
    grid-template-rows: auto minmax(0px, 1fr) auto;
    min-width: 550px;
    max-width: 890px;
    height: 90vh;
    overflow: hidden;
}

.control-app-list {
    height: calc(100% - 45px);
    overflow-y: auto;
}

.control-app-list > .zdVueTable {
    height: 100%;
}

.control-app-container {
    display: flex;
    border-bottom: solid 1px #d9d6d6;
    padding: 5px 0px;
    margin-right: 10px;
    padding: 10px 15px;
}

.control-app-container:hover {
    cursor: pointer;
    background-color: var(--zd-default-highlight);;
}

.control-app-container > p, input {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
}

.control-app-filter {
    margin: 7.5px 0px;
}

.control-app-tools-container {
    display: grid;
    grid-template-columns: auto min-content;
    align-items: center;
}

.control-app-selector-footer {
    text-align: center;
}
.zddate-window .selected {
	background-color: #e6e6e6;
}


.zddi_hidecontent {
	color: transparent;
}

.zddi_lightUnderline {
	display: inline-block;
	border-bottom: solid 2px #c4daff;
}

.zddi_dropdown {
	z-index: 999;
	position: absolute;
	top: 100%;
	left: 0px;
	background-color: whitesmoke;
	border-radius: 3px;
	border: solid 1px #e0e0e0;
	padding: 5px;
	width: 100%;
	cursor: default;
	text-align: left;
}
	.zddi_dropdown.rightAlign {
		left: unset;
		right: 0;
	}

	.zddi_dropdown .formRow {
		display: grid;
		grid-template-columns: auto max-content minmax(max-content, 1fr);
		gap: 5px;
	}

	.zddi_dropdown .formRow > .rowLabel {
		margin: 5px;
		width: 33px;
		text-align:right;
	}

	.zddi_dropdown .btn {
		display: block;
		width: 100%;
	}

	.zddi_dropdown hr {
		margin: 5px;
		border-color: #cbc9c9;
	}

	.zddi_dropdown input[type=time].form-control,
	.zddi_dropdown input[type=date].form-control {
		display: block;
		float: none;
		width: 100%;
		padding: 6px;
		font-size: 13px;
		max-width: 134px;
	}

	.zddi_dropdown input[type="date"]:read-only::-webkit-inner-spin-button,
	.zddi_dropdown input[type="date"]:read-only::-webkit-calendar-picker-indicator {
		display: none;
		-webkit-appearance: none;
	}
	
.timeZoneNote {
	text-align: center;
	font-style: italic;
	padding: 5px;
}
.zd-dropdown {
	position: relative;	
}
	.zd-dropdown:not(.no-min) .zd-dropdown-toggle {
        min-width: 120px;
	}

	.zd-dropdown-toggle {
		display: block;
		color: #636b6f;
        padding: 8px 20px 0px 10px;
		vertical-align: middle;
		height: 34px;
		text-transform: none;
		font-weight: 300;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: white;
		float: none;
		box-shadow: none;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
.zd-dropdown-toggle {

}
.zd-dropdown-toggle:hover {
	background: #e6e6e6;
	border-color:#adadad;
	cursor: pointer;
}

.zd-dropdown-menu {
	position: absolute;
	top: calc(100% + 7px);
	left: 0;
	z-index: 1000;
	float: left;
	min-width: 120px;
	padding: 5px 0;
	list-style: none;
	font-size: 14px;
	text-align: left;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	background-clip: padding-box;
}

	.zd-dropdown-menu > li > a {
		padding: 10px 30px;
		display: block;
		clear: both;
		font-weight: normal;
		line-height: 1.6;
		color: #333333;
		white-space: nowrap;
		text-decoration: none;
	}

		.zd-dropdown-menu > li > a:hover {
			background: #efefef;
			color: #409FCB;
		}

	.zd-dropdown-menu > li {
		overflow: hidden;
		width: 100%;
		position: relative;
		margin: 0;
	}

.zd-dropdown-caret {
	width: 0;
	position: absolute;
	top: 15px;
	height: 0;
	margin-left: -24px;
	vertical-align: middle;
	border-top: 4px dashed;
	border-top: 4px solid \9;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	right: 10px;
}

.alarm-selector-body {
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

#zdFlatDeviceSelector .dlSearchBar {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	min-height: 30px;
	align-items: center;
	background: white;
	border: var(--zd-border);
	border-radius: 4px;
}
	#zdFlatDeviceSelector .dlSearchBar .dlSearchBox {
		height: 100%;
		width: 100%;
		border: none;
		font-size: 14px;
		padding-left: 10px;
		outline: none;
	}
		#zdFlatDeviceSelector .dlSearchBar .dlSearchBox[disabled] {
			opacity: .65;
		}

#zdFlatDeviceSelector td.subTableCell.mobile:not(.hidden) {
	font-size: 14px;
}

#zdFlatDeviceSelector .groupLink {
	width: fit-content;
}

	#zdFlatDeviceSelector .groupLink.zd-link {
		cursor: pointer;
	}
	#zdFlatDeviceSelector .groupLink:not(.zd-link) {
		cursor: default;
	}

#zdFlatDeviceSelector tr[disabled] .zd-link {
	color: #adadad;
}

.zdGenericSelector .dlSearchBar {
	display: flex;
	flex-flow: row nowrap;
	min-height: 30px;
	align-items: center;
	background: white;
	width: 250px;
	border: var(--zd-border);
	border-radius: 4px;
}

	.zdGenericSelector .dlSearchBar .dlSearchBox {
		height: 100%;
		width: 100%;
		border: none;
		font-size: 14px;
		padding-left: 10px;
	}

		.zdGenericSelector .dlSearchBar .dlSearchBox:focus {
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
			-webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
			outline: none !important;
		}

		.zdGenericSelector .dlSearchBar .dlSearchBox[disabled] {
			opacity: .65;
		}

.zdGenericSelector div.modalHeaderTools {
	grid-template-columns: auto 1fr auto;
}
#zdGroupSelector .zdtreedropdown .dropdown {
	max-width: unset;
	position: unset;
	overflow: hidden;
}

#zdGroupSelector .dlContent {
	max-height: 75vh;
}
.zdModal-grid {
   
    display:-ms-grid;
    display: grid;
         
    -ms-grid-columns: 100%;
    -ms-grid-rows: 60px calc(100% - 120px) 60px;
    grid-template-columns: auto;
    grid-template-rows: 60px auto 60px;
}

.zdModal-closeButton {
    color:#c0c0c0;
}

.zdModal-closeButton:hover {
    color: #1a1a1a;
}


.zdModal-grid .customHeader {
    -ms-grid-row: 1;
    -ms-grid-row-span:1;
    grid-row: 1/span 1;
}

.zdModal-grid .customContent {
    -ms-grid-row: 2;
    -ms-grid-row-span:1;
    grid-row: 2/span 1;
    overflow-y: auto;
}
.zdModal-grid .customContent.noHeader {
    -ms-grid-row: 1;
    -ms-grid-row-span:2;
    grid-row: 1/span 2
}
.zdModal-grid .customContent.noFooter {
    -ms-grid-row: 2;
    -ms-grid-row-span:2;
    grid-row: 2/span 2
}
.zdModal-grid .customContent.noFooter.noHeader {
    -ms-grid-row: 1;
    -ms-grid-row-span:3;
    grid-row: 1/span 3
}


.zdModal-grid .customFooter {
    -ms-grid-row: 3;
    -ms-grid-row-span:1;
    grid-row: 3/span 1
}


.zdModal-grid .customHeader h2 {
    margin: 5px;
}

.zd-modal .customContent {
    height: 100%;
}



@media (max-width: 700px) {
    .zdVueModal-container {
        max-width: 100vw;
        width: 95vw;
    }
    .dontShrink .zdVueModal-container {
        max-width: unset;
        width: unset;
    }

}


.max-full-vh.zdVueModal-container {
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: auto;
}
.max-full-vw {
    max-width: 100vw;
}

@media (min-width: 600px) {
    .min-400-max-mobile {
        min-width: 400px;
    }
}


.zd-modal .cmHeader {
    padding: 8px;
    font-size: 19px;
    border-bottom: solid 1px rgb(229,229,229);
    margin-bottom: 5px;
    font-weight: bold
}

.zd-modal .cmContent {
    padding: 8px;
    font-size: 16px;
    max-height: 550px
}

.zd-modal .cmFooter {
    padding: 12px;
    font-size: 16px;
    text-align: center;
    border-top: solid 1px rgb(229,229,229);
}
.zdVueTable table tr.linkedContact > td {
	background-color: darkseagreen !important;
}
.zdScheduler .formRowLabel {
	margin: auto 0px auto auto;
	padding: 0px 8px;
}
	.zdScheduler .formRowLabel div {
		text-align: right;
	}

.zdScheduler .formRowValue {
	padding: 6px 8px;
	display: table;
}
	.zdScheduler .formRowValue div {
		display: table-cell;
		text-align: left;
	}

.zdScheduler .standardFrequency {
	display: grid;
	grid-template-columns: 80px minmax(0,1fr);
	white-space: normal;
}

.zdScheduler .checkboxArray.col4 {
	display: grid;
	grid-template-columns: repeat(4, auto)
}

.zdScheduler .checkboxArray.col5 {
	display: grid;
	grid-template-columns: repeat(5, auto)
}

.zdScheduler .checkboxArray.col6 {
	display: grid;
	grid-template-columns: repeat(6, auto)
}

.zdScheduler .checkboxArray.col7 {
	display: grid;
	grid-template-columns: repeat(7, auto)
}

.zdScheduler .checkboxContainer {
	line-height: 1.0;
	margin-bottom: 2px;
}

.zdScheduler .checkboxHeader + .checkboxContainer,
.zdScheduler .checkboxHeader + .checkboxContainer > label {
	margin: auto 0;
}

.zdScheduler .checkboxContainer>label,
.zdScheduler .checkboxContainer>input {
	margin: 0;
	vertical-align: middle;
}

.zdScheduler .checkboxHeader {
	margin: 0;
	line-height: 1.0;
}

.zdScheduler .allGap {
	gap: 15px;
}

.zdScheduler .input-group .form-control:last-child,
.zdScheduler .input-group .form-control:first-child {
	border-radius: 4px;
}

.zdScheduler .checkboxArray{
	display: inline-block;
	margin: 3px;
	background-color: whitesmoke;
	border: 1px solid lightgray;
	padding: 5px;
}

.zdSplitViewEditor .formRowLabel {
    margin: auto 0px auto auto;
    padding: 0px 8px 0px 0px;
}
.zdSplitViewEditor .formRowLabel div {
    text-align: right;
}

.zdSplitViewEditor .formRowValue {
    padding: 4px 0px 4px 8px;
    display: table;
}

.zdSplitViewEditor .formRowValue .minsUnit {
    vertical-align: middle;
}

.zdSplitViewEditor .formRowValue div {
    display: table-cell;
    text-align: left;
}

.zdSplitViewEditor .editorRow {
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    gap: 4px;
}

.zdSplitViewEditor .editorRow:not(.StdPad) {
    padding: 0px 0px 10px 0px !important;
}

.zdSplitViewEditor .sveContentLayout {
    height: 100%;
    width: 100%;
}

.zdSplitViewEditor .sveLayout {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header header sidebar"
        "leftPanel table sidebar";
    overflow-x: hidden;
}

.zdSplitViewEditor .sveLayoutMobile {
    height: 100%;
    width: 100%;
    max-height: 100%;
}

.sveLayout .sve-header {
    grid-area: header;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow-x: hidden;
}
.sveLayout .sve-table {
    grid-area: table;
    overflow: hidden;
    padding: 10px 10px 8px 10px;
}

.sveLayout .sve-leftPanel {
    grid-area: leftPanel;
    display: flex;
    flex-direction: column;
    margin: 10px 0 8px 10px;
}

.sveLayout .sve-leftPanel > span {
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
}

.sveLayout .sve-leftPanel > span.selected {
    background-color: var(--zd-default-highlight);
}

.sveLayout .sve-leftPanel > span:hover {
    background-color: var(--zd-default-highlight-hover);
}

    .sve-header .sve-header-right {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            ". header-top-right"
            ". count";
    }

.sveSidebarFields {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: auto;
    white-space: normal;
    height: 100%;
}

.sveSidebarFieldsTemplate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-rows: min-content;
    white-space: normal;
}

.sveLayout .sve-sidebar,
.sveContentLayout .sve-sidebar,
.overlayMenuContent .sve-sidebar {
    grid-area: sidebar;
    -webkit-box-shadow: -6px 0px 11px -7px rgba(0, 0, 0, 0.3);
    box-shadow: -6px 0px 11px -7px rgba(0, 0, 0, 0.3);
    padding: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.overlayMenuContent .sve-sidebar {
    animation: unset;
}

.sveLayout .sve-sidebar .sveSidebarContent {
    overflow: auto;
    height: 100%;
    padding: 8px 8px 0px 8px;
}
.sveContentLayout .sve-sidebar .sveSidebarContent {
    overflow: auto;
    height: 100%;
    padding: 8px 8px 0px 8px;
}

.overlayMenuContent .sve-sidebar .sveSidebarContent {
    overflow: auto;
    height: 100%;
    padding: 8px 0px 0px 0px;
    max-height: 100%;
}

.overlayMenuContent .sve-sidebar .sveSidebarContent {
    padding: 0px;
}

@keyframes splitviewslidein {
    0% {
        max-width: 0px;
    }

    99% {
        max-width: 100vw;
    }

    100% {
        max-width: unset;
    }
}

@keyframes splitviewslideout {
    0% {
        max-width: 100vw;
    }

    100% {
        max-width: 0px;
    }
}

.flyout-enter-active {
    animation: splitviewslidein 1s;
}

.flyout-leave-active {
    animation: splitviewslideout 0.5s;
}

.zdSplitViewEditor .zdInputPanel:not(.has-prev-col) .zdInputPanelLeft {
    white-space: normal;
}

.zdSplitViewEditor .dlSearchBar {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    min-height: 30px;
    align-items: center;
    background: white;
    max-width: 180px;
    border: var(--zd-border);
    border-radius: 4px;
}

.zdSplitViewEditor .dlSearchBar .dlSearchBox {
    height: 100%;
    width: 100%;
    border: none;
    font-size: 14px;
    padding-left: 10px;
}

.zdSplitViewEditor .dlSearchBar .dlSearchBox:focus {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
    outline: none !important;
}

.zdSplitViewEditor .dlSearchBar .dlSearchBox[disabled] {
    opacity: 0.65;
}

.zdSplitViewEditor .titleBreadcrumbs[disabled],
.zdSplitViewEditor .additionalTools[disabled],
.zdSplitViewEditor .prependTools[disabled],
.zdSplitViewEditor .dlIcon[disabled] {
    background-color: #fafafa;
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

.zdSplitViewEditor .additionalTools .action-button {
    float: unset;
}

.zdSplitViewEditor .additionalTools .action-button:not(:first-child) {
    margin-left: -5px;
}

.standardInput [disabled] {
    cursor: no-drop;
    background-color: #eee;
    opacity:.7;
}

.resizableTable .resizer {
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	cursor: col-resize;
	user-select: none;
}
.resizableTable .resizer:hover,
.resizableTable .resizing {
	border-right: 2px solid blue;
}
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	margin: 0;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: var(--bootstrap-primary);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--bootstrap-primary);
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

/* Size overrides */
.switch.small {
	width: 45px;
	height: 27px;
}

.switch.small .slider:before {
	height: 19px;
	width: 19px;
	left: 4px;
	bottom: 4px;
}

.switch.small input:checked + .slider:before {
	-webkit-transform: translateX(18px);
	-ms-transform: translateX(18px);
	transform: translateX(18px);
}
.zdtooltip {
    position: fixed;
    font-size: 12px;
    font-weight: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
    background-color: black;
    color: white;
    text-align: center;
    z-index: 5000;
    display: none;
}
    .zdtooltip.top,
    .zdtooltip.top:after,
    .zdtooltip.bottom,
    .zdtooltip.bottom:after {
        left: 50%;
        transform: translateX(-50%);
    }

    .zdtooltip.right,
    .zdtooltip.right:after,
    .zdtooltip.left,
    .zdtooltip.left:after {
        top: 50%;
        transform: translateY(-50%);
    }

    .zdtooltip:after {
        content: "";
        position: absolute;
        border: 10px solid #000;
        display: block;
        pointer-events: none;
    }

    .zdtooltip.top:after {
        top: 100%;
        border-color: black transparent transparent transparent;
    }

    .zdtooltip.right:after {
        right:100%;
        margin-right: -2px;
        border-color: transparent black transparent transparent;
    }

    .zdtooltip.bottom:after {
        bottom: 100%;
        border-color:  transparent transparent black transparent;
    }

    .zdtooltip.left:after {
        left: 100%;
        margin-left: -2px;
        border-color: transparent transparent transparent black;
    }
.zdtreedropdown .toggleButton {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .zdtreedropdown .toggleButton:not([disabled]):hover,
    .zdtreedropdown .toggleButton.dropdownVisible {
        background: whitesmoke;
    }

    .zdtreedropdown .toggleButton:not(.entireCompanySelected) {
        background: var(--zd-default-highlight);
    }
    .zdtreedropdown .toggleButton:not(.entireCompanySelected):hover {
        background: var(--zd-default-highlight-hover);
    }

.zdtreedropdown .dropdown {
    position: absolute;
    background: white;
    z-index: 100000;
    border-radius: 5px;
    border: solid 1px #c0c0c0;
    max-width: 250px;
    min-width: 120px;
    max-height: 80vh;
    overflow: auto;
    cursor: default;
    box-shadow: var(--zd-box-shadow);
}

.zdtreedropdown .dropdown.mobile {
    max-width: 300px;
}


    .zdtreedropdown .dropdown .dlContent > div:last-child {
        margin-bottom: unset;
    }


.zdUpdateChannelsChannelGrid {
    display: grid;
    grid-template-columns: auto auto;
}

.zdUpdateChannelsChannelGridItem {
    margin: 2px;
    text-align: left;
    cursor: pointer;
}

.zdUpdateChannelsChannelGridItem:hover {
    background-color: #deeaff;
    border-color: #007bff;
}

.zdUpdateChannelsChannelGridItem.active {
    background-color: #c4daff;
    border-color: #007bff;
}

.zdUpdateChannelsChannelGridItem.active:hover {
    background-color: #abcaff;
    border-color: #0062cc;
}

.zdUpdateChannelDayOption {
    display: inline;
    padding: 2px 4px 1px 4px;
    width: 31px;
}

.btn.zdUpdateChannelDayOption:hover {
    background-color: #deeaff;
    border-color: #007bff;
}

.btn.zdUpdateChannelDayOption.active {
    background-color: #c4daff;
    border-color: #007bff;
}

.btn.zdUpdateChannelDayOption.active:hover {
    background-color: #abcaff;
    border-color: #0062cc;
}

.zdUpdateChannelDurationMode {
    width: 130px;
    display: inline-block;
    padding: 5px 2px;
}

/*https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-modal-component?from-embed*/
.zdVueModal-mask {
    position: absolute !important;
    z-index: 1050;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
}


.zdVueModal-wrapper {
    display: inline-block;
    text-align: center;
}

.zdVueModal-container {
    margin: 0px auto;
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
    transition: all 0.3s ease;
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
    display: inline-block;
    position: relative;
}
.zdVueModal-container.draggable {
    transition: none;
}

    .zdVueModal-header h3 {
        margin-top: 0;
        color: black;
        font-size: 20px;
    }

.zdVueModal-body {
    margin: 10px 0;
    height: auto;
    overflow: auto;
}

.zdVueModal-footer {
    text-align: center;
    width: 100%;
}

.zdVueModal-enter {
    opacity: 0;
}

.zdVueModal-leave-active {
    opacity: 0;
}

    .zdVueModal-enter .zdVueModal-container,
    .zdVueModal-leave-active .zdVueModal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

.vueElement .modalHeaderText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
}

.vueElement .modalHeaderTools {
    padding: 5px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-gap: 10px
}
.modalState .zdVueModal-body {
	margin-bottom: 0;
}

.objectState .stateErrorMessages {
	vertical-align: middle;
	color: red;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}

.objectState .flexColumn button {
	width: fit-content;
}

.objectState .buttonContainer {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top:10px;
	text-align:center;
	align-items: center;
	column-gap: 5px;
	row-gap: 10px;
}
.zdVueTable {
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
}

.zdVueTable.scrollable-table {
    overflow: auto;
}

.scrollable-table {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.header-column {
    text-align: center;
}

.zdVueTable.stickyHeader tr:first-of-type .zdVueTable .stickyHeader tr:first-of-type{
    position: sticky;
    top: 0px;
}

.zdVueTable:not(.scrollable-table) .pagedBody {
    overflow: auto;
}

.subTableTransparentHeader {
    padding: 4px;
    font-size: 13px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: normal;
    display: table-cell;
}

.subTableHeader {
    padding: 4px;
    font-size: 13px;
    background-color: var(--neutral-200);
    border-right: solid 1px var(--neutral-300);
    border-bottom: solid 1px var(--neutral-400);
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: normal;
    display: table-cell;
}

.sortIcon {
    display: inline-block;
    padding-left: 5px;
    color: var(--neutral-400);
    position: absolute;
    bottom: 0px;
    right: 3px;
    font-size: 12px;
}

.subTableHeaderLarge {
    padding: 15px 4px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background-color: var(--neutral-200);
    border-right: solid 1px var(--neutral-300);
    border-bottom: solid 1px var(--neutral-600);
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: normal;
    display: table-cell;
}

.subTableHeaderMobile {
    padding: 6px 4px;
    font-size: 14px;
    text-align: center;
    background-color: var(--neutral-200);
    border-bottom: solid 1px var(--neutral-600);
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: normal;
    display: table-cell;
}

.subTableTransparentHeaderLarge {
    padding: 15px 4px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    user-select: none;
    white-space: normal;
    display: table-cell;
}

.subTableCell {
    padding: 4px 8px;
    word-wrap: break-word;
    font-size: 12px;
    min-height: 20px;
    white-space: normal;
    vertical-align: middle;
}

.subTableCellLarge {
    padding: 6px 8px;
    word-wrap: break-word;
    font-size: 12px;
    min-height: 20px;
    white-space: normal;
    vertical-align: middle;
}

.subTableRow,
.subTableRowLarge {
    border-bottom: solid 1px var(--neutral-200);
    width: 100%;
}

.subTableRowLarge:hover,
.subTableRowLarge.clicked,
.subTableRowLarge.highlight-selected,
table:not(.CellSelectable) .subTableRow:hover,
.subTableRow.clicked,
.subTableRow.highlight-selected {
    background-color: var(--zd-default-highlight) !important;
}

/*keep header borders attached to sticky header*/
.zdVueTable table.alternatingRows {
    border-collapse: separate;
    border-spacing: 0;
}

.zdVueTable table.alternatingRows th {
    box-shadow: none;
}

.zdVueTable .freezeLeftColumn {
    left: 0;
    position: sticky;
}

.zdVueTable th.freezeLeftColumn {
    z-index: 2;
}

.zdVueTable td.freezeLeftColumn {
    z-index: 1;
}

*.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.h-centered {
    display: flex;
    justify-content: center;
    width: 100%;
}

.zdVueTable table.alternatingRows > tr:nth-child(odd) {
    background-color: var(--neutral-100);
}

.zdVueTable table.alternatingRows > tr:nth-child(even),
.zdVueTable table:not(.alternatingRows) {
    background-color: white;
}

th:has(.filter-icon) {
    position: sticky;
}

.filter-icon {
    position: absolute;
    bottom: 3px;
    left: 4px;
    font-size: 15px;
    color: var(--neutral-700);
}

.filter-icon:hover {
    color: var(--neutral-900);
}

.filter-icon .active {
    color: var(--blue-400);
}

.subTableHeaderMobile .filter-icon {
    font-size: 17px;
}

.vueTableColumnFilter {
    z-index: 999;
    position: absolute;
    top: calc(100% + 2px);
    left: 0px;
    background-color: var(--neutral-50);
    border-radius: var(--radius-lg);
    border: solid 1px var(--neutral-200);
    padding: 8px 8px 0 8px;
    cursor: default;
    text-align: left;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 30rem;
}

.vueTableColumnFilter [aid="allButtons"] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    text-align: center;
}

.vueTableColumnFilter [aid="values"] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 300px;
    overflow: auto;
}

.vueTableColumnFilter [aid="values"] .filter-value {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    white-space: nowrap;
}

.vueTableColumnFilter [aid="values"] label {
    font-weight: normal;
    font-size: 12px;
    margin: 0 0.5rem;
    white-space: nowrap;
}

.vueTableColumnFilter [aid="values"] input {
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
}

.mobile-mode .vueTableColumnFilter [aid="values"] input {
    font-size: 16px;
}


.vueTableColumnFilter [aid="values"] label.no-matches {
    color: var(--neutral-400);
}

.vueTableCollapse {
    text-align: center;
    font-size: 10px;
    margin: 3px 0px;
    cursor: pointer;
}

.mobile-mode .vueTableCollapse {
    font-size: 14px;
}

tr.loader td {
    padding-top: 1rem;
    text-align: center;
}

[aid="loading-spinner"] {
    height: 35px;
    width: 35px;
}

[aid="no-records"] h4 {
    padding-top: 0.5rem;
    text-align: center;
}

.zdVueTable tr[disabled] {
    color: var(--neutral-400);
}

.paginationContainer {
    padding: 2px 2px;
    color: var(--neutral-950);
    width: 100%;
    display: inline-block;
    padding-right: 10px;
    text-align: center;
    background-color: var(--neutral-200);
}

.paginationPage {
    height: 20px;
    min-width: 20px;
    color: var(--neutral-950);
    margin: 2px;
    cursor: pointer;
    padding: 2px;
    text-align: center;
    background-color: white;
    display: inline-block;
    border-radius: 2px;
    font-size: 12px;
}

.paginationPage:hover {
    background-color: var(--neutral-300);
}

.mobile-mode .paginationPage {
    font-size: 15px;
    height: 25px;
    width: 25px;
}

.zdVueTable .actionIcon {
    font-size: 1.2em;
    color: var(--neutral-400);
    cursor: pointer;
}