body {
    background-color: #f7f7f7;
    font-size: 12px;
}

.dash-head {
    width: 100%;
    background-color: #f7f7f7;
    color: #333;
    position: relative;
    font-size: 2em;
    text-align: left;
    padding: 15px 25px 5px 25px;
    margin: auto;
}

:focus {
    /* outline: 0; */
    outline-color: lightslategray;
}

.k-menu .k-item > .k-link {
    line-height: 3.4em;
    padding: 0.2em 1.1em;
}

.GroupSummaryBox {
    min-width: 800px;
}

    .GroupSummaryBox .content {
        overflow-x: hidden;
        overflow-y: hidden;
        font-size: 12px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 1px solid #aaa;
        border-top: none;
    }

    .GroupSummaryBox .title {
        height: 35px;
        line-height: 30px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background: transparent;
        font-size: 16px;
        font-weight: bold;
        font-family: verdana;
        display: block;
        color: #888;
        display: block;
        padding-left: 10px;
        border: 1px solid #aaa;
        border-bottom: none;
    }

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    min-height: 100%;
}

#header {
}

#body {
    padding: 0px;
    padding-bottom: 25px; /* Height of the footer */
}

/* used in FB809RocNocTest */
.indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    border-radius: 8px;
    clear: both;
    position: relative;
    transition: background-color 350ms, box-shadow 700ms;
}

.k-animation-container {
    z-index: 0;
}

.btn-circle, .btn-circle-3d {
    border-radius: 50% !important;
}

.btn-primary.btn-circle {
    box-shadow: 0px 0px 3px 1px #245580;
}

.btn-info.btn-circle {
    box-shadow: 0px 0px 3px 1px #28a4c9;
}

.btn-success.btn-circle {
    box-shadow: 0px 0px 3px 1px #3e8f3e;
}

.btn-danger.btn-circle {
    box-shadow: 0px 0px 3px 1px #b92c28;
}

.btn-warning.btn-circle {
    box-shadow: 0px 0px 3px 1px #e38d13;
}

.btn-default.btn-circle {
    box-shadow: 0px 0px 3px 1px #ccc;
}

.DatabaseIndicatorBlink {
    font-size: 16px;
    font-weight: bold;
    font-family: verdana;
    background-color: red;
    animation: DatabaseIndicatorBlink .75s linear infinite;
    display: inline-block;
    padding: 10px;
}

@keyframes DatabaseIndicatorBlink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    50.01% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.highcharts-button-symbol {
    z-index: 9999 !important;
}

.disabled {
    color: #999;
}

/* used in ReportLiveChart */
#rounded-corner {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    width: 95%;
    text-align: center;
    border-collapse: collapse;
    display: table;
    margin: 0 auto;
}

    #rounded-corner thead th.rounded-first {
        background: #b9c9fe url('/Content/images/left.png') left -1px no-repeat;
        text-align: left;
    }

    #rounded-corner thead th.rounded-last {
        background: #b9c9fe url('/Content/images/right.png') right -1px no-repeat;
        text-align: center;
    }

    #rounded-corner th {
        padding: 8px;
        font-weight: normal;
        font-size: 13px;
        color: #039;
        background: #b9c9fe;
        text-align: center;
    }

    #rounded-corner td.rounded-first {
        padding: 8px;
        background: #e8edff;
        border-top: 1px solid #fff;
        color: #669;
        text-align: left;
    }

    #rounded-corner td {
        padding: 8px;
        background: #e8edff;
        border-top: 1px solid #fff;
        color: #669;
        text-align: center;
    }

    #rounded-corner tfoot td.rounded-foot-left {
        background: #e8edff url('/Content/images/botleft.png') left bottom no-repeat;
    }

    #rounded-corner tfoot td.rounded-foot-right {
        background: #e8edff url('/Content/images/botright.png') right bottom no-repeat;
    }

    #rounded-corner tbody tr:hover td {
        background: #d0dafd;
    }

.k-window-titlebar .k-link {
    margin: 5px;
}

.TankMeasurementBox {
    width: 90%;
    font-size: 20px;
    z-index: 5;
    position: relative;
    left: 0px;
    top: -50px;
    border: 2px solid;
    border-radius: 5px;
    box-shadow: 5px 5px 3px #888888;
    text-align: center;
    display: none;
}

.tabSearchBar {
    width: 300px;
}

body {
    min-width: 290px;
    text-size-adjust: 100%;
    color: #666;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#navPanelBar {
    background-image: none;
    background-color: #303030;
    border-width: 0px;
    padding-bottom: 0px;
    border-bottom: solid #252525 2px;
}

    #navPanelBar .k-header {
        background-color: #383838;
        background-image: none;
        color: #eee;
        border-width: 0px;
    }

    #navPanelBar .k-group {
        border-width: 0px;
        background-color: #2a2a2a;
    }


    #navPanelBar .k-panel > li.k-item {
        background-color: #303030;
        color: #ddd;
        font-size: 1em;
        margin-left: 5px;
    }

    #navPanelBar .k-state-selected {
        background-color: #e03030;
        background-image: none;
    }

    #navPanelBar .k-state-hover:hover {
        background-color: #252525;
        color: #ddd;
        background-image: none;
        box-shadow: none;
    }

    #navPanelBar .k-state-highlight {
        background-color: #252525;
    }


    #navPanelBar .k-i-arrow-n {
        background: url(/Content/icons/icon-up.png);
        background-position: -5px;
        padding-right: 8px;
    }

    #navPanelBar .k-i-arrow-s {
        background: url(/Content/icons/icon-down.png);
        background-position: -5px;
        padding-right: 8px;
    }

    #navPanelBar .k-panel > .k-item > .k-link {
        padding-left: 15px;
    }

.k-grid-header th.k-header {
    background-color: #eee;
}

#pageContainer {
    background-color: #2b2b2b;
    opacity: 0;
}

#myDashboard {
    background-color: #f7f7f7;
}

#container {
    background-color: #2b2b2b;
}

.treenav #searchbarDiv {
    padding: 10px 10px 10px 10px;
}

#BtnCallListScheduleTree, #BtnRemoteAccessTree, #BtnCallListScheduleTab, #BtnRemoteAccessTab, #dashboardtoolbar .main-toolbar-btn {
    border-radius: 0px;
    text-align: left;
    color: #eee;
    background-color: #383838;
    margin-top: 0px;
    font-size: 1.1em;
}

#BtnCallListScheduleTab, #BtnRemoteAccessTab, #dashboardtoolbar .main-toolbar-btn {
    border-width: 0px;
    border-color: #383838;
    margin: 0px 5px 0px 5px;
    text-align: center;
}

#BtnCallListScheduleTree:hover, #BtnRemoteAccessTree:hover, #dashboardtoolbar .main-toolbar-btn:hover {
    background-color: #222;
}

#BtnCallListScheduleTab:hover, #BtnRemoteAccessTab:hover, #dashboardtoolbar .main-toolbar-btn:hover {
    background-color: #222;
}

#BtnCallListScheduleTree .fa, #BtnRemoteAccessTree .fa, #dashboardtoolbar .main-toolbar-btn .fa {
    margin-right: 5px;
}

#BtnCallListScheduleTab .fa, #BtnRemoteAccessTab .fa, #dashboardtoolbar .main-toolbar-btn .fa {
    margin-right: 5px;
}

.k-window-title {
    text-align: center;
    color: #ddd;
}

.k-window-titlebar {
    background-color: #2b2b2b;
    background-image: none;
    color: #ddd;
}

.k-tabstrip-items .k-state-default .k-link {
    background-image: none;
    /*background-color: #fff;*/
}

div.k-window {
    border-width: 0px;
    box-shadow: 3px 3px 10px 3px rgba(0,0,0,.55);
}

.k-window.k-state-focused {
    border-width: 0px;
    box-shadow: 5px 5px 12px 5px rgba(0,0,0,.35);
}

div.k-window:active {
    border-width: 0px;
    box-shadow: 3px 3px 10px 3px rgba(0,0,0,.55);
}

div[id^="DataGrid_"], div[id*=" DataGrid_"] {
    border-width: 1px 0px 0px 0px;
}

.k-widget {
    border-width: 0px;
    background-color: #fff;
}

.k-tabstrip-wrapper {
    background-image: none;
    box-shadow: none;
}

div.k-window-content {
    background-color: #fff;
    padding: 10px;
}


.k-tabstrip:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.k-icon {
    opacity: 1;
}


.k-window-titlebar .k-window-action {
    opacity: 1;
    background-image: none;
    padding: 0px;
}

.k-window-titlebar .k-state-hover {
    background-color: #e02020;
    border-width: 0px;
    border-radius: 2px;
    padding: 0px;
}


.k-window-titlebar .k-link .k-i-close {
    background-color: #e02020;
    border-radius: 2px;
}

    .k-window-titlebar .k-link .k-i-close:hover {
        background-color: #f03030;
    }

.k-window-titlebar .k-link .k-i-maximize {
    background-color: #aaa;
    border-radius: 2px;
}

    .k-window-titlebar .k-link .k-i-maximize:hover {
        background-color: #ccc;
    }

.k-window-titlebar .k-link .k-i-minimize {
    background-color: #aaa;
    border-radius: 2px;
}

    .k-window-titlebar .k-link .k-i-minimize:hover {
        background-color: #ccc;
    }

.k-window-titlebar .k-link .k-i-restore {
    background-color: #aaa;
    border-radius: 2px;
}

    .k-window-titlebar .k-link .k-i-restore:hover {
        background-color: #ccc;
    }

.k-pager-wrap .k-link.k-state-selected, .k-state-selected, .k-state-selected:link {
    background-color: #f03030;
}

#dashboardtoolbar {
    padding: 5px 10px 5px 10px;
    background-color: #2b2b2b;
    background-image: none;
}

#DashboardTabNav {
    padding: 0px 10px 5px 10px;
    background-color: #2b2b2b;
    background-image: none;
}

.k-toolbar .k-separator {
    border-width: 0px;
    width: 0px;
}

.k-button.k-state-active {
    border: 0px;
    background-color: #e03030;
    background-image: none;
}

.k-toolbar .k-button:focus {
    /*background-color: #e03030;*/
    background-color: #eee;
    color: #222;
}

.k-button.k-state-active:hover {
    background-color: #d02020;
}

#dashboardtoolbar #searchbarDiv {
    margin-right: 3px;
}

.k-toolbar .k-overflow-anchor {
    height: 2em;
    width: 2em;
    margin-top: 7px;
    margin-left: 5px;
    border-radius: 3px;
    padding: 0px 0px 0px 0px;
}

.k-overflow-container .k-button:focus {
    /*background-color: #e03030;*/
    background-color: transparent;
    color: #222;
}


#loginForm, #manageForm {
    color: #ccc;
    width: 480px;
    padding: 10px;
    margin: 0 auto;
}

.k-multiselect-wrap {
    border-width: 1px;
}

.highcharts-contextmenu {
    background-color: transparent; /*rgb(240, 240, 240);*/
    min-width: 150px;
}

.highcharts-menu-item {
    min-width: 150px;
    cursor: pointer;
}

    .highcharts-menu-item:hover {
        background-color: #ddd !important;
        color: #333 !important;
    }

.highcharts-menu {
    box-shadow: #bbb 3px 3px 6px !important;
    border: 1px solid #ccc !important;
}


    .highcharts-menu hr {
        margin-top: 5px;
        margin-bottom: 5px;
    }

.highcharts-range-selector-group {
    transform: translate(0,0)
}

.highcharts-range-selector-buttons {
    transform: translate(0,75)
}


.SummaryGridSeparator td {
    border-bottom: double;
    border-bottom-color: #555;
}

.DashletSummaryGrid .k-loading-image {
    background-image: none;
}

    .DashletSummaryGrid .k-loading-image .k-loading-color {
        opacity: 0;
    }

.DashletSummaryGrid {
    min-width: 800px;
}

.AlarmConfigurationTabStrip .k-tabstrip ul li.k-item {
    width: 300px;
    color: red;
}

.GroupSummaryBox .CalloutDetails {
    width: 1500px;
    color: red;
}


.SummaryGridUpdatePulse {
    -webkit-animation: highlight .5s;
}

@keyframes highlight {
    50% {
        background: #ccc;
    }
}


.EditorTemplateFieldlist {
    margin: 0;
    padding: 0;
}

    .EditorTemplateFieldlist li {
        list-style: none;
        padding-bottom: .7em;
        text-align: left;
    }

    .EditorTemplateFieldlist label {
        display: block;
        padding-bottom: .1em;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 12px;
        color: #444;
    }

    .EditorTemplateFieldlist li.status {
        text-align: center;
    }

    .EditorTemplateFieldlist li .k-widget:not(.k-tooltip),
    .EditorTemplateFieldlist li .k-textbox {
        margin: 0 5px 5px 0;
    }

    .EditorTemplateFieldlist .confirm {
        padding-top: 1em;
    }

    .EditorTemplateFieldlist .valid {
        color: green;
    }

    .EditorTemplateFieldlist .invalid {
        color: red;
    }

    .EditorTemplateFieldlist li input[type="checkbox"] {
        margin: 0 5px 0 0;
    }

    .EditorTemplateFieldlist span.k-widget.k-tooltip-validation {
        display: inline-block;
        width: 160px;
        text-align: left;
        border: 0;
        padding: 0;
        margin: 0;
        background: none;
        box-shadow: none;
        color: red;
    }

    .EditorTemplateFieldlist .k-tooltip-validation .k-warning {
        display: none;
    }


.EFMSensorNumericControlInput {
    width: 75px;
}

.LabelBackgroundRed {
    background-color: red;
}


.NumericControlBackgroundYellow {
    background-color: yellow;
    width: 125px;
}

.EnumerationControlBackgroundYellow {
    background-color: yellow !important;
}

.SensorNumericControlInput {
    width: 125px;
}


#WellProgramDetails .PCSProgramInput {
    width: 50px;
}

#WellProgramDetails legend {
    width: 95%;
}

#WellProgramDetails table, th, td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    padding-right: 8px;
    word-wrap: break-word;
    word-break: normal;
}

#PCS-autocycle-table {
    width:100%;
}


#AutoCycleDetails .ListBoxLarge {
    font-size: 1.5em;
}

#AutoCycleDetails .ListBoxLarge {
    font-size: 1.5em;
}

#AutoCycleDetails fieldset {
    border-color: #F00;
}

#AutoCycleDetails .AutoCycleLabel {
    border-radius: 5px;
    border: 1px solid #757573;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
}

#AutoCycleDetails #PlungerRunTimeList {
    height: 300px;
    width: 100%;
}

#AutoCycleDetails .dropdownselectionchanged {
    background-color: yellow;
}

#AutoCycleDetails .PCSProgramInput {
    width: 30px;
}

#AutoCycleDetails .PCSProgramInputLongText {
    width: 55px;
}


.slideOutHeader {
    padding: 3px;
    height: 32px;
    background-color: #ddd;
    border: 1px solid #ccc;
    text-align: center;
}

    .slideOutHeader:after {
        content: "";
        display: table;
        clear: both;
    }

    .slideOutHeader .header-left {
        float: left;
        font-size: 18px;
        padding-left: 10px;
        padding-top: 0px;
    }

    .slideOutHeader .header-center {
        display: inline-block;
        margin: 0 auto;
        font-size: 18px;
        font-weight: bold;
    }

    .slideOutHeader .header-right {
        float: right;
        font-size: 18px;
        font-weight: bold;
        padding-right: 5px;
        padding-top: 0px;
    }

        .slideOutHeader .header-left a, .slideOutHeader .header-right a {
            color: #f22020;
        }

        .slideOutHeader .header-right:hover, .slideOutHeader .header-right:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

    .slideOutHeader #BtnCloseWindowX {
        color: #888;
    }

        .slideOutHeader #BtnCloseWindowX:hover {
            color: #555;
        }

    .slideOutHeader #BtnPopoutWindow {
        color: #888;
    }

        .slideOutHeader #BtnPopoutWindow:hover {
            color: #555;
        }


#ReportLiveDetailsSliderContent {
    position: relative;
    -webkit-transform: translateZ(0);
    padding: 5px;
    background-color: #fff;
}

.slideOutDiv {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 10;
    transition: 0.5s;
    overflow-x: scroll;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.slideOutDivExpanded {
    width: 100%;
}

.DetailsPopupContent .k-panelbar .k-tabstrip > .k-content, .k-tabstrip > .k-content {
    padding: 0px;
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
    z-index: 1;
}

.highchart-delete-btn-sm {
    padding: 1px 3px;
    font-size: 10px;
    line-height: 1.5;
    border-radius: 3px;
}

.modalSlide {
    display: none;
    margin: 5px;
    padding: 5px;
}

.close-modalSlide {
    color: #000;
    text-decoration: none;
    float: right;
    top: 10px;
    right: 20px
}


table.table-ChartAggregates {
    overflow: hidden;
    overflow: hidden;
    border-width: 1px;
    border-color: #ccc;
    border-style: solid;
}

    table.table-ChartAggregates > thead > tr:nth-of-type(odd) {
        background-color: #ccc;
    }

    table.table-ChartAggregates > tr:nth-of-type(odd) {
        background-color: #fff;
    }

    table.table-ChartAggregates > tr:nth-of-type(even) {
        background-color: #eee;
    }


    table.table-ChartAggregates > th > td {
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 15px;
        padding-right: 15px;
        word-wrap: break-word;
        word-break: normal;
        width: 150px;
        min-width: 50px;
        text-align: center;
    }


.hc-default-panel {
    padding: 15px 10px 5px 5px;
}

.dashboard-gridsummary-tooltip {
    height: 260px;
    padding: 5px 0 10px 5px;
    text-align: left;
    line-height: 25px;
    overflow-x: hidden;
}


/*///// Tien's additions /////*/

.loc-sb-icon { /* for location type icons in search bar dropdown */
    position: absolute;
    left: 0;
}
    .loc-sb-icon::before {
        position: absolute;
        top: 4px;
    }
    .loc-sb-icon.fa-map-o::before {
        font-size: 10px;
    }
#LocationSearchBar_listbox li { /* leave space to the left for the icons */
    margin-left: 10px;
}

/* Notification message that can appear on AlarmTooltip */
.alarm-config-unavailable-notice {
    position: absolute;
    top: 40px;
    background: white;
    color: red;
    border: 2px solid orange;
    padding: 0 5px;
}

/*// Style the pager for the grid */
.k-pager-wrap {
    display: block;
}
.k-pager-wrap > * {
    float: left;
}
.k-pager-numbers {
    display: block;
    margin: 0 3px;
}
.k-grid-with-datehints .k-pager-numbers li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 33px;
    height: 60px;
}
.k-pager-numbers li:first-child {
    margin-left: 2px;
}
.k-pager-wrap .k-pager-numbers .k-link {
    border-color: #ccc;
}
.datehint_below {
    min-width: 40px;
    padding-top: 2px;
    width: 30px;
    line-height: 12px;
    margin: 0;
    text-align: center;
}

/* Fix the styling on selected/hover box on the numeric pager buttons on smaller screen sizes */
html body .k-content .k-pager-numbers .k-link, .k-pager-wrap.k-grid-pager .k-state-selected {
    padding: 0;
    text-align: center;
    border-radius: 50%;
}
/* selected/un-selected buttons slightly not aligned due to border */
.k-pager-wrap.k-grid-pager .k-state-selected {
    border: 1px solid transparent; 
}

/* style aggregate row cells in real-time summary grids with top border and gradient */
.k-grid-footer > .k-footer-template > td {
    box-shadow: inset 0 1px #ccc;
    background-image: 
        none, linear-gradient(to bottom,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 100%);
}

/*// Style the total and disabled numbers of alarms in Sensors tab */
.alarm-counter {
    position: absolute;
    transform: translate(-18px, -8px);
    -webkit-transform: translate(-18px, -8px);
    font-size: 10px;
    border-radius: 5px;
    text-align: center;
    padding: 1px 2px;
    background: grey;
    color: white;
}

.alarm-icon-set {
    margin-left: -3px;
}
.alarm-icon-set i {
    margin: 0 3px;
}
.alarm-icon-set > .enabled {
    color: red;
}
.alarm-icon-set > .disabled {
    color: #ccc;
}

/* Style the jQuery global status messages window */
#GlobalStatusMessageWindow {
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 30px 20px 10px;
    background: white;
    border: 1px solid #f04545;
    width: 370px;
    z-index: 20000;
    max-height: 450px;
    overflow-y: auto;
}
#global-status-message, #global-status-message p {
    margin: 0;
    font-family: sans-serif;
    font-size: 13px;
}
#global-status-message hr {
    margin: 8px 0;
    padding: 1px 0;
    border-top: 1px solid #ccc;
}
#global-status-message hr:last-child {
    border-top: 2px solid #ccc;
}
#global-status-message .node-hierarchy {
    font-size: 11px;
    font-weight: bold;
    font-style: italic;
    color: #333;
    margin-bottom: 5px;
}

#status-window-header {
    height: 20px;
    position: absolute;
    top: 0;
    width: 100%;
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
    background: #d35250;
    display: flex;
    justify-content: flex-end;
}
#status-window-header a {
    color: white;
    font-weight: bold;
    padding: 0 20px;
    text-decoration: none;
    border-left: 1px solid #ddd;
    line-height: 20px;
}
#status-window-header a:hover {
    background: white;
    color: #f04545;
}
#status-window-header a:first-child:hover {
    color: blue;
}

/*// Grid validation */
/* Styles for fields in grid which have invalid values in them */
.wrong-value {
    background: red;
    color: white;
}
.wrong-value.k-edit-cell {
    background: #ddd;
}
.wrong-value input {
    color: black;
}
.wrong-value::after {
    content: " (!)";
}

/* Styling for the extra forms inside AlarmEditor */
#form-for-sensor-alarm, #form-for-enum-alarm {
    width: 100%;
    height: 101%;
    position: absolute;
    display: none; /* will be switched to flex for sensor alarm */
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background: white;
    z-index: 1001;
}
#form-for-sensor-alarm p, #form-for-enum-alarm p {
    max-width: 100%; /* prevent long p flowing off form in IE */
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    margin: 0 20px;
}
#form-for-sensor-alarm button, #form-for-enum-alarm button {
    padding: 5px 10px;
    font-size: 18px;
}
#form-for-enum-alarm .k-input {
    font-size: 14px;
}
#form-for-enum-alarm .k-widget {
    margin-top: -8px;
}

/* For displaying warning on alarm config row that needs to be edited */
.alarm-will-never-call-out::after {
    content: "Alarm will never call out. Edit required.";
    width: 500px;
    margin-top: 8px;
    color: red;
    font-size: 18px;
    position: absolute;
    left: 100px;
    background: rgba(255,255,255,0.5);
}

/* for older browsers with no support for flexbox */
#form-for-sensor-alarm.make-compatible, #form-for-enum-alarm.make-compatible {
    width: 105%;
    text-align: center;
}
#form-for-sensor-alarm.make-compatible button, #form-for-enum-alarm.make-compatible button {
    display: block;
    margin: 20px auto;
    height: 60px;
}
#form-for-enum-alarm.make-compatible .k-widget {
    margin-top: 5px;
}

/* Style the error page */
.anti-forgery-error-page {
    margin: 20px;
}

.anti-forgery-error-page > .error-page-title {
    font-size: 20px;
    font-weight: bold;
    color: red;
}
.anti-forgery-error-page > .error-page-content {
    font-size: 16px;
    font-weight: bold;
}

body > .anti-forgery-error-page > .error-page-title {
    font-size: 30px;
}
body > .anti-forgery-error-page > .error-page-content {
    font-size: 24px;
}

/* Change how expand/collapse buttons are shown in Callout Configuration > Call List Setup */
.callout-list-grid .k-hierarchy-cell .k-icon {
    color: white;
    font-size: 14px;
    line-height: 30px;
    margin: 0;
    height: 30px;
    text-decoration: none;
    text-indent: 0;
    font-family: sans-serif;
    width: 60px;
    opacity: 1;
}

.callout-list-grid .k-icon.k-i-expand {
    background: gray;
}
.callout-list-grid .k-icon.k-i-collapse {
    background: darkgray;
}
.callout-list-grid .k-icon.k-i-expand::before, .callout-list-grid .k-icon.k-i-collapse::before {
    content: none;
}

.callout-list-grid .k-icon.k-i-expand:focus, .callout-list-grid .k-icon.k-i-collapse:focus {
    outline: 0;
}

/* In CallList Setup tab, style the callout methods iconset */
.callout-iconset i {
    color: #666;
    margin-left: 5px;
    font-size: 12px;
}

tbody .call-list-user-grid-btn { /* User Callout Behavior and Remove User buttons */
    line-height: 12px; /* (tbody selector ensures buttons in grid and not popup form get styled) */
    border-bottom: 4px solid #aaa;
    border-left: 2px solid #aaa;
}
tbody .call-list-user-grid-btn:hover { 
    background: white;
    outline: 1px solid gray;
}

/* In AlarmTooltip, when user has no RL_AlarmConfig permission */
.disabled-alarm-config-btn {
    pointer-events: none;
    background-color: #ccc;
    border-color: #ccc;
    color: #eee
}
/* Style the popup tooltip for users with no alarm config permissions */
.alarm-config-no-permission + .tooltip {
    font-size: 110%;
}
.alarm-config-no-permission + .tooltip > .tooltip-inner {
    padding: 7px 5px;
    background: gainsboro;
    color: black;
}

.alarm-tooltip-config-row {
    line-height: 20px;
    padding-left: 3px;
    border: 1px solid #bbb;
    cursor: pointer;
}
.alarm-tooltip-config-row:hover {
    background: white;
}

/* Setting min width to some grid columns prevent some rows from being too tall */
[id^=DataGrid] [data-field=ReportDate] /*, [id^=DataGrid] [data-title='Controller State'] */ {
    min-width: 70px;
}
/* Keep the Poll and Status columns at their natural minimum widths at all time */
[id^=DataGrid] [data-field=QuickPoll], [id^=DataGrid] [data-field=AlarmState] {
    width: 1% !important;
}

/* These two components are utilized in MMenuHelper to emulate document.body.scrollTop */
#scroll-static-marker {
    position: absolute;
    top: 0;
}
#scroll-moving-marker {
    position: fixed;
    top: 0;
}

/* Remove border from tank level visualization */
div[id^=Tankcontainer] > span > svg > g[class$=background] {
    display: none;
}
/* Override styling of tank measurement box */ 
.TankMeasurementBox {
    border: 0;
    background-color: #f3f3f3;
    margin: 50px 0 -40px;
    box-shadow: none;
    font-size: 19px;
    padding: 2px 5px;
    width: initial;
}
/* Measurement box is to the right of tank graphics when there is space, otherwise it is below */
.tank-value-container { /* prefixes added with the help of https://autoprefixer.github.io */
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.UserSettingsForm { /* Style the User Settings form */
    min-width: 300px;
    max-width: 400px;
    padding: 10px 20px;
}
.UserSettingsForm .form-title {
    border-bottom: 2px solid #ccc;
    padding-bottom: 2px;
    margin-bottom: 8px;
}

/* This class is used if an overlay is to be applied behind a settings window */
#settings-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;
    background: rgba(0,0,0,0.5);
}


.quick-poll-btn {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    background: #599AD0;
    color: white;
    border-radius: 10px;
    line-height: 20px;
    cursor: pointer;
    transition: all 1s ease-in-out;
}
.quick-poll-btn.poll-refreshing {
    background: #1a4f7a;
    animation: 1s infinite linear rotating;
    -moz-animation: 1s infinite linear rotating;
    -webkit-animation: 1s infinite linear rotating;
}
.quick-poll-btn.poll-fail {
    transition: all 1s ease-in-out;
    background: #e30000;
}

.quick-poll-btn.poll-success {
    transition: all 1s ease-in-out;
    background: #0abf00;
}


.page-poll-btn, .meter-report-btn {
    height: 25px;
    background: #599AD0;
    color: white;
    line-height: 20px;
    cursor: pointer;
    text-align: center;
}
    .page-poll-btn.poll-fail {
        transition: background 1s ease-in-out;
        background: #e30000;
    }
    .page-poll-btn.poll-success {
        transition: background 1s ease-in-out;
        background: #0abf00;
    }
.meter-report-btn.is-disabled {
    pointer-events: none;
    opacity: 0.3;
}
.meter-report-btn:hover {
    background: #63ace8;
}
.meter-report-btn:active {
    background: dimgrey;
}
.confirmation-popup.for-meter-report .confirm-btn {
    background: #599AD0;
    color: white;
}
.confirmation-popup.for-meter-report .confirm-btn:hover {
    background: #63ace8;
}

.test-control-preview {
    margin: 20px; 
    border: 1px solid #aaa; 
    padding: 20px 0 20px 20px; 
    border-radius: 10px; 
    position: relative; 
    display: none
}
.test-control-preview .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border-radius: 10px;
    padding: 20px;
    z-index: 1;
    font-size: 14px;
    color: orangered;
}
.test-control-preview .section-title {
    font-size: 14px; 
    margin: 20px 20px -5px 0; 
    text-align: center; 
    background: #eee
}

@keyframes rotating {
    from { transform: rotate(); } to {transform: rotate(360deg); }
}
@-moz-keyframes rotating {
    from {
        transform: rotate(); -moz-transform: rotate();
    }
    to {
        transform: rotate(360deg); -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes rotating {
    from {
        transform: rotate(); -webkit-transform: rotate();
    }
    to {
        transform: rotate(360deg); -webkit-transform: rotate(360deg);
    }
}

/* These styles are used in the history grids in Control Report and Meter pages */
.highlighted-history-row {
    background-color: yellow;
}

/* Falling arrows are shown in hmi viewer loading reminder */
.falling-arrows .arrow-down {
    width: 0;
    height: 0;
    margin-top: -2px;
    border: 5px solid transparent;
    border-top: 9px solid #840a03;
}

    .falling-arrows .arrow-down:nth-child(1) {
        animation: down-arrow-flashing 2s linear 0s infinite;
    }

    .falling-arrows .arrow-down:nth-child(2) {
        animation: down-arrow-flashing 2s linear 0.5s infinite;
    }

    .falling-arrows .arrow-down:nth-child(3) {
        animation: down-arrow-flashing 2s linear 1s infinite;
    }

@keyframes down-arrow-flashing {
    0% {
        border-top-color: #0f9606;
    }

    20% {
        border-top-color: #1de527;
    }
}

/* These two components are utilized in MMenuHelper to emulate document.body.scrollTop */
#scroll-static-marker {
    position: absolute;
    top: 0;
}
#scroll-moving-marker {
    position: fixed;
    top: 0;
}

/*// MMenu custom styling */
/* Hide the menu until the document is done loading */
#my-mmenu:not( .mm-menu ) {
    display: none;
}

#my-mmenu { /* Style the MMenu so that the company header can be above it */
    height: calc(100% - 54px); /* height of company header: 54px */
    transform: translateY(54px);
    -webkit-transform: translateY(54px);
}
#my-mmenu.stick-top-mmenu-page {
    height: 100%;
    transform: initial;
    -webkit-transform: initial;
}
#container.mm-page #pageContainer { /* the main area where the dashlets are shown */
    transform: translateY(54px);
    -webkit-transform: translateY(54px);
}
#container.mm-page .slideOutDiv {
    transform: translateY(54px);
    -webkit-transform: translateY(54px);
    height: calc(100% - 54px);
}
.show-at-top-mmenu-page { /* for the company header */
    position: absolute;
    top: 0;
    z-index: 1;
    width:100%;
}
.main_header.show-at-top-mmenu-page .mainmenu_navigation {
    min-height: 40px;
}
@media screen and (max-width: 899.9px) {
    #my-mmenu { /* Style the MMenu so that the company header can be above it */
        height: calc(100% - 40px); /* height of company header: 40px */
        transform: translateY(40px);
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        border-top: 1px #ddd solid;
    }
    #container.mm-page #pageContainer { /* the main area where the dashlets are shown */
        transform: translateY(40px);
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
    }
    #container.mm-page .slideOutDiv {
        transform: translateY(40px);
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        height: calc(100% - 40px);
    }
}

/* Change the widths of the Mmenu main menu and its sidebar */
/* 280px is the width of the MMenu main panel (see: mwidth) */
/* 50px is the width of the MMenu sidebar (search 'sbwidth') */
/* 42px is the height of each MMenu item row (see 'litemheight' in MMenu CSS file) */
.mm-menu { /* (To support older browsers, CSS variables were not used) */
    min-width: 280px; /* mwidth */
    max-width: 280px; /* mwidth */
    border-right: 1px solid rgba(0,0,0,0.1);
} 
.mm-menu .mm-navbar__title {
    color: #999 !important;
}
.mm-searchfield__input, .mm-navbar__title, .mm-listview {
    font-size: 13px;
}
/* Make the text of the MMenu's list items less dark */
.mm-listitem {
    color: rgba(0,0,0,0.65);
}

/* Dim the placeholder text in the MMenu's search field */
.mm-searchfield__input > input::placeholder {
    color: #bbb;
}

/*> In Locations panel, */
.mm-listitem.not-found {
    color: #777;
}
.mm-listitem.not-found .mm-listitem__text:hover {
    background: inherit;
}
/* Make links without href attributes look clickable when hovered */
a[islink] {
    cursor: pointer;
}
/* Make backgrounds darker when hover a clickable element in a Mmenu panel */
.mm-listitem__text:hover, .mm-listitem__btn:hover {
    background: #ddd;
}
.no-entries .mm-listitem__text:hover, .not-found .mm-listitem__text:hover {
    background: initial;
}
/* Style the location type icons in Locations panel of the MMenu */
#my-mlocations .loc-status-icon {
    position: absolute;
    top: 33%;
    left: 8px;
}
/* Slightly move location list items to right to have more space for location type icons */
#my-mlocations [islink] { 
    padding-left: 28px;
    padding-right: 5px;
}

/* How far the page content slides to the right when Mmenu is opened */
@media (min-width: 0px) {
    .mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened ~ .mm-slideout {
        transform: translate3d(280px,0,0); /* mwidth */
        -webkit-transform: translate3d(280px,0,0);
    }
}
/* The container for the rest of a page where the MMenu is put */
.mm-wrapper_sidebar-collapsed #container { /* styling page when Mmenu is closed */
    margin-left: 0; /* #container is also .mm-page.mm-slideout */
    width: calc(100% - 50px); /* sbwidth */
    min-width: 600px; /* the minimum width that the page content will shrink down to */
}
html.mm-wrapper_opening #container { /* styling page when Mmenu is opened */
    width: calc(100% - 280px); /* mwidth */
}
/*> Style the Navbar container at the top of the menu */
.mm-navbars_top {
    height: 84px;
    overflow: hidden;
}
.mm-navbars_top > .mm-navbar:first-child {
    box-shadow: inset 0 -1px rgba(0,0,0,0.1);
}
/* Style clickable navbar buttons that go back a panel (on hover) */
.mm-btn_prev:hover {
    background: #e4e4e4;
}

.mm-navbar__title[href] { /* disable clicking on the current panel's name to go back */
    pointer-events: none;
    cursor: none;
}
/* Style the buttons on the navbar of the Mmenu */
.close-btn-mmenu-nav {
    background: #bbb;
}
.close-btn-mmenu-nav:hover {
    background: #ef8b75;
}
.close-btn-mmenu-nav i {
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
}
.mm-menu a.close-btn-mmenu-nav { /* style text on the close button */
    color: #eee;
}
.pin-btn-mmenu-nav { /* style the pin button */
    background: #ddd;
    cursor: pointer;
}
.pin-btn-mmenu-nav:hover {
    background: #fcf3b0;
}
.pin-btn-mmenu-nav i {
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
}
.mm-menu a.pin-btn-mmenu-nav { /* style the pin icon (when pinned) */
    color: #8b8b8b;
}
.fa-thumb-tack.unpinned { /* When the mmenu is unpinned, dim the thumbtack icon */
    opacity: 0.51;
}
/* make buttons look normal on older browsers with no support for flexbox */
.pin-btn-mmenu-nav.make-compatible {
    position: absolute;
    right: 43px;
    padding: 10px 14px;
}
.close-btn-mmenu-nav.make-compatible {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
}

/*> Styles for the MMenu's sidebar */
.mm-iconbar { /* make the icon buttons on the sidebar clickable even when Mmenu is collapsed */
    z-index: 3;
    cursor: default; /* make area beyond top sidebar btns look unclickable */
    /* background color is defined later in the "Customize color/theme" section */
}
.mm-iconbar.hovered {
    background: #e4e4e4;
}
.mm-iconbar.hovered #sidebar-arrow {
    color: #888;
}
.mm-menu .mm-iconbar a { /* style the sidebar's icon buttons */
    background: #eee;
    color: #a0a0a0;
    box-shadow: inset -1px -1px rgba(0,0,0,0.1);
}
.mm-menu .mm-iconbar a:hover { /* when user hovers over a sidebar's icon button */
    color: #555;
    background: #e4e4e4;
}

#open-close-btn {
    height: 42px;
    background-color: #f28c10;
    color: #eee;
    transition: 0.5s background-color;
}
#open-close-btn i {
    position: absolute;
    top: 9px;
    left: 15px;
    transition: 0.5s;
}
#open-close-btn.rotated i {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}
#open-close-btn.rotated {
    background-color: #f04545;
}

/* For touch devices, disable hover effects on the Mmenu */
@media (hover: none) {
    .close-btn-mmenu-nav:hover {
        background: #bbb;
    }
    .pin-btn-mmenu-nav:hover {
        background: #ddd;
    }
    .mm-menu .mm-iconbar a:hover {
        background: #eee;
        color: #aaa;
        box-shadow: inset -1px -1px rgba(0,0,0,0.1);
    }
    .mm-iconbar.hovered {
        background: #eee;
    }
    .mm-listitem__text:hover, .mm-listitem__btn:hover {
        background: inherit; /* or #f3f3f3 */
    }
    .mm-btn_prev:hover {
        box-shadow: none;
        background: inherit;
    }
}

/* Change the scaling of grids' widths on a page with MMenu */
.mm-page .DashletSummaryGrid, #container.mm-page [id^=DataGrid_] { /* override some rules */
    min-width: initial;
}

/*// Customize color/theme of main MMenu components */
/* For Sidebar */
.mm-iconbar { /* Sidebar background */
    background: #eee;
}
.mm-iconbar a { 
    background: #eee; /* background color of sidebar button initially */
    cursor: pointer;
}
.mm-iconbar a:hover { /* background color of sidebar button when hovered */
    background: #f4f4f4;
}
/* For The Menu that slides out */
.mm-navbar { /* navbar background (including searchbox and menu's title) */
    background: inherit;
}
.mm-panel { /* main panel (the area below the menu's title) */
    background: inherit;
}

/* for child dashboards in Mmenu */
.mm-listview .child-dashboard-div {
    line-height: 18px;
    padding: 10px;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}
.mm-listview .child-dashboards-toggle {
    width: 22px;
    padding-left: 5px;
    margin-top: -42px;
    font-size: 14px;
    line-height: 42px;
}

.mm-listview .child-dashboard-div:hover, .mm-listview .child-dashboards-toggle:hover {
    background: #ddd;
    cursor: pointer;
}

/*// Styling for TDash */
.popupDiv_NewRow, .popupDiv_NewDashlet {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    user-select: none;
} /* shorthands for styles below: popup1 -> NewRow, popup2 -> NewDashlet */
.popup1-layout-div {
    width: 160px;
    padding: 5px;
    border: 1px dashed #777;
    height: 70px;
    display: flex;
    margin: 5px;
}
.popup1-layout-div:hover {
    background: powderblue;
    cursor: pointer;
}
.popup1-layout-column {
    background: #ccc;
    flex: 1;
    height: 100%;
    display: inline-block;
    font-family: 'segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    text-align: center;
}
.popup1-layout-sep {
    width: 6px;
    height: 100%;
    display: inline-block;
}

.popup2-category-btns {
    width: 100%;
    margin: 0 5px 15px;
}
.popup2-category-btns .is-selected {
    background-color: papayawhip;
}
.popup2-dashlet-module {
    padding: 5px;
    border: 1px dashed #777;
    margin: 5px;
    display: flex;
    align-items: center;
}
.popup2-dashlet-module:hover {
    background: powderblue;
    cursor: pointer;
}
.popup2-dashlet-module .glyphicon {
    font-size: 16px;
    margin-right: 8px;
}
.popup2-dashlet-module .module-title {
    font-weight: bold;
}
.popup2-dashlet-module .module-group {
    font-size: 10px;
    margin-top: 2px;
}

.tdash-dashboard-container {
    padding: 0 20px 20px;
    margin-top: -10px;
}
.tdash-dashboard-container .tdash-layout-row {
    margin: 0 -10px;
}
.tdash-layout-column {
    padding: 0 10px 15px;
    overflow: auto;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    height: 100%;
    position: relative;
}
.tdash-column-title {
    font-size: 14px;
    border: 1px solid rgba(0,0,0,0.3);
    text-align: center;
    margin-top: 20px;
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
}

@media screen and (max-width: 979px) {
    .tdash-layout-column {
        min-width: 100%;
    }
    .tdash-layout-column:not(:first-of-type) {
        margin-left: 0;
    }
}

#tDashDesignModeBtn {
    font-size: 16px;
    padding: 2px 10px;
    margin: 10px 5px 10px 20px;
    background: moccasin;
}

#DashLocationCacheUpdate {
    font-size: 16px;
    padding: 2px 10px;
    margin: 10px 5px 10px 20px;
    background: moccasin;
}

#tDashEditorDashboardTitle {
    font-size: 20px;
    padding-bottom: 2px;
    vertical-align: middle;
}
.tdash-dashboard-editor {
    height: 0;
    overflow: hidden;
    user-select: none;
    background-color: #f7f7f7;
}
.tdash-dashboard-editor select {
    border: 1px grey solid;
    padding: 2px 0;
}
.tdash-dashboard-editor.in-design-mode {
    height: auto;
}
.tdash-dashboard-editor.is-busy, .tdash-modal-popup-content-div.is-busy,
#tDashModalPopupSaveBtn.is-busy, #tDashModalPopupCancelBtn.is-busy {
    opacity: 0.5;
    pointer-events: none;
}
.tdash-dashboard-editor.no-active-dashboard #tDashDashboardEditBtn,
.tdash-dashboard-editor.no-active-dashboard #tDashDashboardDeleteBtn,
.tdash-dashboard-editor.no-active-dashboard .tdash-detached-dashlets-area {
    display: none;
}

#tDashLayoutPreviewer {
    padding: 10px 20px 0;
}
#tDashLayoutPreviewer .tdash-layout-container {
    margin-top: 20px;
}
#tDashLayoutPreviewer .tdash-layout-row {
    padding: 20px 20px 0;
    border: 1px cornflowerblue dashed;
}
#tDashLayoutPreviewer .tdash-layout-row:hover {
    border: 1px dodgerblue solid;
}
#tDashLayoutPreviewer .tdash-layout-column {
    z-index: 1;
    border: 1px dashed #aaa;
    padding: 10px;
    min-height: 80px;
    margin-bottom: 20px;
}
#tDashLayoutPreviewer .tdash-column-title {
    display: inline-block;
    background: none;
    border: 0;
    margin: 0 0 0 5px;
}
.tdash-dashlet-overview, .tdash-new-dashlet-div {
    border: 1px lightcoral dashed;
    padding: 10px 10px 6px;
}
.tdash-dashlet-overview:hover, tdash-new-dashlet-div:hover {
    border: 1px orangered solid;
}
.tdash-dashlet-overview .glyphicon {
    margin-right: 5px;
}
.tdash-dashlet-overview .dashlet-title {
    font-size: 14px;
}
.tdash-dashlet-overview .dashlet-module-title {
    font-size: 11px;
}
.tdash-new-dashlet-div {
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 5px;
}
.tdash-new-dashlet-div:hover {
    background: white;
    font-weight: bold;
}

#tDashDetachedDashletsDiv {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
}
#tDashDetachedDashletsDiv .tdash-dashlet-overview {
    min-width: 200px;
    margin: 15px 15px 0 0;
}
.dashlet-detach-btn {
    float: right;
}
#tDashDetachedDashletsDiv .dashlet-detach-btn, #tDashDetachedDashletsDiv .dashlet-duplicate-btn {
    display: none;
}

.tdash-dashlet-container {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top:20px;
    overflow: hidden;
    background: white;
}
.tdash-dashlet-content {
    position: relative;
}
.tdash-dashlet-title { /* same as .d-title's style (found in old dashlet title elements) */
    font-family: 'segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    padding-left: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 30px;
}
.tdash-dashlet-title.is-loading {
    animation: 1s infinite flickeringGreyBG alternate;
}
@keyframes flickeringGreyBG {
    from {
        background: #fff;
    }
    to {
        background: #e0e0e0;
    }
}
.has-flickering-grey-bg { /* generic class that can be used outside of TDash */
    animation: 1s infinite flickeringGreyBG alternate;
}
.div-with-flickering-grey-bg {
    height: 200px;
    animation: 1s infinite flickeringGreyBG alternate;
}

.dropzone-dashlet {
    height: 20px;
}
.dropzone-row {
    height: 30px;
    background: #e6e6e6;
}
.dropzone-row:hover { /* row-dropzone also acts as clickable area to create new row */
    cursor: pointer;
    background: aliceblue;
}
.dropzone-row:after {
    content: "+ Row";
    color: #aaa;
    display: block;
    font-weight: bold;
    padding-top: 6px;
    text-align: center;
}
.dropzone-row:hover:after {
    content: "Add Row";
    color: #555;
}
.add-new-row-hint {
    height: 0;
    padding: 0px 10px;
    line-height: 28px;
    font-weight: bold;
}
.highlighted-dropzone {
    background: #f8f8f8;
    height: 30px;
    box-shadow: 0px 0px 5px 0px lightcoral;
}

#tDashModalPopupOverlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 10px;
    position: fixed;
    background: rgba(0,0,0,0.5);
    z-index: 10;
}

.tdash-modal-popup-overlay-flex {
    display: flex;
    align-content: center;
    justify-content: center;
}

#tDashModalPopup {
    background: white;
    position: absolute;
    left: 50px;
    right: 50px;
    top: 80px;
    min-height: 200px;
    border-radius: 4px;
    overflow: hidden;
}

#tDashModalPopup.tdash-modal-popup-center {
    background: white;
    position: absolute;
    left: auto;
    right: auto;
    top: 80px;
    min-height: 200px;
    border-radius: 4px;
    overflow: hidden;
}

.tdash-modal-popup-top-bar {
    padding: 5px 10px;
    border-bottom: 1px #bbb solid;
}
#tDashModalPopupTitle {
    font-family: 'segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    margin-left: 10px;
}
#tDashModalPopupCloseBtn {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 23px;
    height: 22px;
    padding: 0;
    font-size: 14px;
    line-height: 10px;
}
.tdash-modal-popup-content-div {
    padding: 20px 20px 55px;
    max-height: 65vh;
    overflow: auto;
}
.tdash-modal-popup-bottom-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 10px;
    text-align: right;
    border-top: 1px #bbb solid;
    background: white;
}
#tDashModalPopupSaveBtn, #tDashModalPopupCancelBtn {
    border: 0;
    padding: 4px 10px;
}
#tDashModalPopupSaveBtn {
    background: #48aace;
    color: white;
    margin-right: 5px;
}
#tDashModalPopupSaveBtn:hover, #tDashModalPopupCancelBtn:hover {
    background: #444;
    color: white;
}

.tdash-loading-indicator {
    position: absolute;
    left: 50%;
    z-index: 1;
    top: 50%;
    margin-top: -40px;
    margin-left: -40px;
    background: rgba(0,0,0,0.3);
}
.tdash-loading-indicator > div {
    position: absolute;
    margin-top: 80px;
    padding: 0 5px;
    background: rgba(255,255,255,0.7);
}
.lds-dual-ring { /* style from loading.io/css/ */
    display: inline-block;
    width: 80px;
    height: 80px;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* end of styling for TDash */

.MeterReportTable {
    vertical-align:top;

}

table.minimalistBlack {
    border: 3px solid #000000;
    width: 99%;
    text-align: center;
    border-collapse: collapse;
}

    table.minimalistBlack td, table.minimalistBlack th {
        border: 1px solid #000000;
        padding: 5px 4px;
    }

    table.minimalistBlack tbody td {
        font-size: 13px;
    }

    table.minimalistBlack thead {
        background: #CFCFCF;
        background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
        background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
        background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
        border-bottom: 3px solid #000000;
    }

        table.minimalistBlack thead th {
            font-size: 15px;
            font-weight: bold;
            color: #000000;
            text-align: center;
        }

    table.minimalistBlack  td:nth-child(2)
    {
        width:25%
    }
    table.minimalistBlack  td:nth-child(3) {
        width: 25%
    }

    table.minimalistBlack tfoot {
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        border-top: 3px solid #000000;
    }

        table.minimalistBlack tfoot td {
            font-size: 14px;
        }


.k-grid .k-dirty {
    display: none;
}

/* styles for location details' Secure Connect */ 
.device-secure-connect-window {
    padding: 10px 20px;
    width: 420px;
}
.device-connect-div {
    margin-bottom: 10px;
}

.device-connect-div .title-bar {
    padding: 5px 10px;
    height: 24px;
    background: #ddd;
}
.device-connect-div .title-bar > .countdown-timer {
    float: right;
    margin: 4px 8px 0 0;
}
.device-connect-div.active .title-bar {
    cursor: pointer;
    background: lightblue;
}
.device-connect-div .status-light {
    display: inline-block;
    margin: 0 0 -1px 6px;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background: darkgrey;
}
.device-connect-div.active .status-light {
    background: mediumseagreen;
}

.device-connect-div .details-area {
    padding: 5px 10px 10px;
    background: #eee;
    line-height: 22px;
}
.device-connect-div.closed .details-area {
    display: none;
}
.device-connect-div .field-label {
    display: inline-block;
    width: 78px;
}
.device-connect-div .field-btn {
    padding: 0 5px;
    margin-left: 5px;
    line-height: 16px;
}
.device-connect-div .field-tooltip {
    font-size: 13px;
    margin-right: 3px;
    color: grey;
}
/* */

.tdash-dashlet-title .poll-all-btn {
    padding: 0 5px 2px;
    border-radius: 6px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 13px;
    vertical-align: bottom;
    user-select: none;
    background: #599AD0;
    color: white;
}
.tdash-dashlet-title .poll-all-btn:hover {
    background: grey;
}
.tdash-dashlet-title .poll-all-btn:active {
    background: #333;
}
/* */

.auth-2fa-details {
    padding: 12px 15px;
    font-size: 13px;
    border: 1px solid #bbb; 
    border-radius: 10px;
    color: black; 
    background: rgba(255,255,255,0.8)
}
.auth-2fa-details .btn-default {
    border-color: gray;
}
.setup-2fa-options button {
    font-size: 14px; 
    font-weight: bold;
    color: dimgray;
}
.setup-2fa-options button:not(:last-child) {
    margin-right: 7px
}
.setup-2fa-options button > i {
    margin-right: 5px
}
.skip-2fa-setup-div:hover {
    color: red;
}
/* */

.sc-text-cursor, .sc-hidden-text-cursor {
    animation: 1.1s infinite cursor-flashing;
    margin-top: -2px;
    margin-left: -2px;
    font-size: 15px;
    position: absolute;
    box-shadow: none;
    background: transparent;
    user-select: none;
    pointer-events: none;
}
.sc-hidden-text-cursor {
    visibility: hidden;
}
@keyframes cursor-flashing {
    0% { opacity: 1; }
    49% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}
        
.sc-macro-editor span {
    box-shadow: 0 0 1px 1px transparent;
}
    
.sc-macro-editor {
    display: inline-block;
    padding-left: 2px;
    word-wrap: break-word;
    font-family: Tahoma;
    color: black;
    line-height: normal;
    position: relative;
    z-index: 1;
    white-space: pre-wrap;
    white-space: break-spaces; /* (not supported in older browsers) */
    background: white;
    cursor: text;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 1px solid darkgray;
}
.sc-macro-editor:focus {
    outline: 2px solid darkgray;
}
    
.sc-macro-editor .sc-macro-span {
    display: inline-block;
    padding: 0 2px;
    box-shadow: inset 0 0 0px 1px yellowgreen;
    background: lightgoldenrodyellow;
}

.sc-macro-btns-div {
    position: absolute;
    font-family: Tahoma;
    width: 87%;
    padding: 10px 7px 4px;
    border: 1px solid dimgray;
    border-radius: 5px;
    background: lightgoldenrodyellow;
    z-index: 1;
    margin-left: -2%;
    user-select: none;
}
.sc-macro-btns-div button {
    margin-right: 4px;
    margin-bottom: 6px;
}
/* */

.k-checkbox:checked {
    color: white;
    background: dodgerblue;
}

.combined-dg-chart .highcharts-range-selector-group {
    transform: translateY(35px);
}
.combined-dg-table th {
    text-align: center;
}
.combined-dg-table td {
    text-align: end;
}
.combined-dg-table th, .combined-dg-table td {
    border: 1px solid;
}
.combined-dg-chart .highcharts-tooltip tspan:first-child {
    font-size: 11px !important;
}
.combined-dg-chart.hide-chart-tooltip .highcharts-tooltip {
    display: none;
}

.report-page-summary-table {
    color: #333;
}
.report-page-summary-table thead {
    background: #eee;
}
.report-page-summary-table td {
    text-align: center;
}
.report-page-summary-table th, .report-page-summary-table td {
    border: 1px solid #ccc;
}
/* */


#exportProgressBar {
    margin: 5px;
    width: 500px;
    background-color: #dddddd;
    overflow: hidden;
    /* Rounded Border */
    border: 1px solid #bbbbbb;
    -moz-border-radius: 15px;
    border-radius: 15px;
    /* Adding some shadow to the progress bar */
    -webkit-box-shadow: 0px 2px 4px #555555;
    -moz-box-shadow: 0px 2px 4px #555555;
    box-shadow: 0px 2px 4px #555555;
}

/* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
doesnotexist:-o-prefocus, #prbar {
    border-radius: 0px;
}

#exportProgressBarPosition {
    width: 0%;
    height: 30px;
    background-color: #3399ff;
    border-right: 1px solid #bbbbbb;
    /* CSS3 Progress Bar Transitions */
    transition: width 2s ease;
    -webkit-transition: width 0s ease;
    -o-transition: width 0s ease;
    -moz-transition: width 0s ease;
    -ms-transition: width 0s ease;
    /* CSS3 Stripes */
    background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff));
    background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-size: 40px 40px;
    /* Background stripes animation */
    animation: bganim 3s linear 2s infinite;
    -moz-animation: bganim 3s linear 2s infinite;
    -webkit-animation: bganim 3s linear 2s infinite;
    -o-animation: bganim 3s linear 2s infinite;
    -ms-animation: bganim 3s linear 2s infinite;
}

@keyframes bganim {
    from {
        background-position: 0px;
    }

    to {
        background-position: 40px;
    }
}

@-moz-keyframes bganim {
    from {
        background-position: 0px;
    }

    to {
        background-position: 40px;
    }
}

@-webkit-keyframes bganim {
    from {
        background-position: 0px;
    }

    to {
        background-position: 40px;
    }
}

@-o-keyframes bganim {
    from {
        background-position: 0px;
    }

    to {
        background-position: 40px;
    }
}

@-ms-keyframes bganim {
    from {
        background-position: 0px;
    }

    to {
        background-position: 40px;
    }
}

@media screen and (max-width: 600px) {
    .highcharts-range-selector-group {
        transform: scale(0.9) translateX(-60px);
    }
}