#documentBody {
    height: 100%;
    width: 100%;
}

.ath-container {
    background: var(--default-panel-background)!important;
    box-shadow: none!important;
}
.ath-container p {
    text-shadow: none!important;
    font-size: initial!important;
    color: var(--main-text-color)!important;
}

hr {
    border: 1px solid var(--default-border-color);
    background: none;
}
#complete_view_area {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}
#pagedatacontainer {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}
#popupcontainer{
    width: 100%;
    overflow: auto;
}

#alarm-tooltip {
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
    z-index: 60;
}

#content-config {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 16;
    background: var(--loader-background-color);
}

.pika-label {
    color: var(--input-text-color);
}

#xml_error_popup {
    z-index: 100;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: white
}
.xml_error_popup_inner_container {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 40px;
    border: 1px solid;
    overflow: auto
}
#xml_error_textarea {
    height: 100%;
    padding: 5px
}
.xml_error_button {
    position: absolute !important;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

/* WEBKIT SCROLLBAR STYLES */
::-webkit-scrollbar{
    width: var(--global-scrollbar-width);
    height: var(--global-scrollbar-height);
}
.small_scroll_bar::-webkit-scrollbar{
    width: var(--global-small-scrollbar-width);
    height: var(--global-small-scrollbar-height);
}
.small_vert_scroll_bar::-webkit-scrollbar{
    width: var(--global-small-vert-scrollbar-width);
    height: var(--global-small-vert-scrollbar-height);
}
.visibleScrollbar::-webkit-scrollbar{
    display: none;
}
::-webkit-scrollbar-track {
    background-color: var(--scrollbar-background);
    border: 1px solid var(--scrollbar-border-color);
}
::-webkit-scrollbar-thumb {
    border: 1px solid var(--scrollbar-thumb-border-color);
    background: var(--scrollbar-thumb-background-fallback);
    background: var(--scrollbar-thumb-background-webkit);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-background-fallback);
    background: var(--scrollbar-thumb-hover-background-webkit);
}

/* UI Resizer */
.ui-layout-resizer	{
    background:	var(--ui-resize-background);
}
.ui-layout-toggler {
    background-color: var(--ui-resize-thumb-background);
}
.ui-layout-resizer-open-hover,
.ui-layout-resizer-dragging {
    background: var(--ui-resize-drag-background);
}

/* Solarex Main and Login*/
#login-translation-loader {
    background: var(--popup-window-background);
}
.default-border-color{
    border-color: var(--default-border-color) !important;
}
.triangle-border-color{
    border-color: transparent transparent var(--default-border-color) transparent;
}

body{
    margin: 0;
    font-family: var(--main-font-family-name);
    color: var(--main-text-color);
    font-size: 14px;
    height: 100%;
    width: 100%;
}

.main-content{
    clear: both;
    position: fixed;
    top: 30px;
    bottom: 37px;
    right: 0px;
    left: 0px;
    padding-left: 0px;
    background: var(--main-bg-background-img);
}
.login-content{
    width: 100%;
    position: fixed;
    top: 28px;
    bottom: 41px;
    left: 0px;
    overflow: auto;
    background: var(--login-bg-background-color);
}

#login-translation-loader{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.overwrite_wallpaper{
    background: url('../images/solarex/alt_wallpaper.png') no-repeat left 28px fixed !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

.solarex-header{
    position: fixed;
    top: 0px;
    left: 0px;
    height: 29px;
    width: 100%;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--header-footer-icon-text-color);
    background: var(--header-color-fallback);
    background: var(--header-color-moz);
    background: var(--header-color-webkit);
    opacity: 1;
    display: flex;
    border-width: 0px 0px 1px 0px;
    border-color: var(--select-and-input-border-color);
    border-style: solid;
}

.main-headline-caption{
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.6em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    text-align: center;
    opacity: 1;
    font-size: 15px;
    z-index: 1;
    color: var(--header-footer-icon-text-color);
    flex-grow: 1;
}

.main-footer{
    height: 31px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    color: var(--header-footer-icon-text-color);
    background: var(--footer-color-fallback);
    background: var(--footer-color-moz);
    background: var(--footer-color-webkit);
    font-family: "Segoe UI", Arial, sans-serif;
    text-shadow: 0px 1px #000000;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.login-footer{
    height: 41px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    color: var(--header-footer-icon-text-color);
    background: var(--footer-color-fallback);
    background: var(--footer-color-moz);
    background: var(--footer-color-webkit);
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.legal_div{
    margin-left: 8px;
    display: flex;
}

.main_control_bar {
    background-color: var(--main-control-bar-background);
    border: 1px solid var(--select-and-input-border-color);
    width: 100%;
    color: var(--input-text-color);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 3px;
}

.side_menu_small_container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    left: 0px;
    top: 30px;
    bottom: 0px;
    width: 100%;
    overflow-x: hidden;
}

.side_menu_nav {
    position: fixed;
    left: 0px;
    top: 29px;
    bottom: 36px;
    background: var(--side-menu-background);
    background-size: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: calc(100% - 65px);
}
.side_menu_button_container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    overflow-x: hidden;
    flex-grow: 1;
}
.side_menu_nav_small {
    position: fixed;
    left: 0px;
    top: 30px;
    bottom: 36px;
    background: var(--side-menu-background);
    background-size: 100%;
    width: 42px;
    float: left;
    padding-right: 0px;
    overflow-x: hidden;
}

.side_menu_top_framed{
    height: 31px;
    overflow: hidden;
    background: var(--header-color-fallback);
    color: var(--header-footer-icon-text-color);
    background: var(--header-color-moz-end);
    background: var(--header-color-webkit-end);
    display: flex;
}

#auto_refresh,
.new_tab_button,
.pin_side_menu,
.popup_tab_button,
.refresh_button {
    color: var(--header-footer-icon-text-color);
    opacity: 0.7;
    height: 28px;
    width: 40px;
    padding: 6px 0px;
    background: none;
    border-style: none;
}

#auto-refresh-helper {
    position: fixed;
    top: 30px;
    right: 0px;
    padding: 10px;
    background: var(--popup-window-background);
    z-index: 1;
    border: 1px solid var(--default-border-color);
}

.refresh_button{
    opacity: 1;
}
.top_spacer{
    flex-grow: 1;
}

.side_menu_top_bar_small {
    width: 100%;/*263px;*/
    height: 30px;
    text-align: center;
    margin-top: 0px;
    opacity: 1;
}

.side_menu_top_bar {
}

#auto_refresh.active-button,
.new_tab_button.active-button,
.pin_side_menu.active-button,
.popup_tab_button.active-button
{
    -moz-box-shadow:    var(--header-button-active-color);
    -webkit-box-shadow: var(--header-button-active-color);
    box-shadow:         var(--header-button-active-color);
    opacity: 1;
}
#top_bar_activate_automatic_mode.active-button{
    color: #00ff00 !important;
}

#auto-refresh-helper .active-button {
    color: var(--active-button-background-color);
}

#toggle_side_menu_button,
#Toggle_Mini_Menu_Button,
#Toggle_Overview_Filter_Bar_Button{
    height: 30px;
    width: 30px;
    min-width: 30px;
    background: none;
    border-width: 0px 1px 0px 0px;
    border-color: var(--nav-item-border-color);
    border-style: solid;
    color: var(--header-footer-icon-text-color);
    padding: 0px;
}
#Main_Refresh_Button,
#Open_Overview_All_Button,
#Toggle_Top_Bar_Button_Icon,
#Index_Configuration_Button,
#top_bar_toggle_app_fullscreen,
.overview_all_bar{
    height: 30px;
    width: 30px;
    min-width: 30px;
    background: none;
    border-width: 0px 0px 0px 1px;
    border-color: var(--nav-item-border-color);
    border-style: solid;
    color: var(--header-footer-icon-text-color);
    padding: 0px;
}

#Plant_Select_Div_Mobile {
    height: 38px;
    opacity: 1 !important;
    flex-grow: 1;
}
#Plant_Select_Div_Mobile button{
    color: var(--header-footer-icon-text-color);
    background: none;
    border-width: 0px;
}

#Toggle_Mini_Menu_Button2 {
    color: var(--nav-item-text-color);
    border-width: 0px 0px 1px 0px;
    border-color: var(--nav-item-border-color);
    border-style: solid;
    cursor: pointer;
    background: none;
}

.nav-item {
    height: 36px;
    width: 100%;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: var(--nav-item-border-color);
    background-color: var(--nav-item-background);
    color: var(--nav-item-text-color);
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}
.nav-item-icon{
    margin: 0px 10px 0px 8px;
    width: 16px;
}
.logout_button{
    height: 32px;
    border-top: 1px solid;
    border-color: var(--nav-item-border-color);
}

.nav-item-small {
    height: 36px;
    width: 42px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: var(--nav-item-border-color);
    background-color: var(--nav-item-background);
    color: var(--nav-item-text-color);
    cursor: pointer;
}
.nav-item-small_no-link {
    height: 36px;
    width: 42px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: var(--nav-item-border-color);
    background-color: var(--nav-item-background);
    color: var(--nav-item-text-color);
    cursor: pointer;
}

.nav-item:hover {
    text-shadow: none;
    color: var(--nav-item-hover-text-color);
    border-color: var(--nav-item-hover-border-color);
    background: var(--nav-item-hover-fallback);
    background: var(--nav-item-hover-moz);
    background: var(--nav-item-hover-webkit);
}
.logout_button:hover{
    border-top: 0px;
}

.nav-item-snd{
    background: var(--nav-item-2nd-background);
    color: var(--nav-item-2nd-text-color);
    padding-left: 10px;
}
.nav-item-snd-small{
    height: 36px;
    width: 42px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: var(--nav-item-border-color);
    background: var(--nav-item-2nd-background);
    color: var(--nav-item-2nd-text-color);
    cursor: pointer;
}

.nav-item-snd.type5 {
    background-color: var(--nav-item-active-background);
}
.nav-item-snd-small.type5 {
    background-color: var(--nav-item-active-background);
}
.icon-white {
    fill: var(--nav-item-2nd-text-color);
    stroke: var(--nav-item-2nd-text-color);
    padding: 0px 10px 0px 10px;
    vertical-align: middle;
}
.icon-white-small {
    fill: var(--nav-item-2nd-text-color);
    stroke: var(--nav-item-2nd-text-color);
}
.icon-svg-small {
    fill: var(--button-text-color);
    stroke: var(--button-text-color);
}

.overview_toolbar{
    background-color: #2a6496;
}

.footer-progress-loader-box{
    background: var(--progress-refresh-box-background);
    height: 6px;
    overflow: hidden;
    width:100%;
    position: fixed;
    bottom: 31px;
    left: 0px;
}
.progress_loader_margin{
    margin-top: 2px;
}
.alt_footer-progress-loader-box{
    background: var(--progress-refresh-box-background);
    height: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid;
}
.progress_timer {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--refresh-timer-background);
    height: 6px;
    width: 0%;
    z-index: 3;
}
.footer-progress-loader-box .PROGRESS_LOADER,
.alt_footer-progress-loader-box .PROGRESS_LOADER
{
    width: 0%;
    left: 0px;
    background: var(--progress-loader-background);
    position: absolute;
    top: 0px;
    z-index: 5;
    height: 6px !important;
}
.footer-progress-loader-box .ALT_PROGRESS_LOADER{
    width: 0%;
    background: var(--progress-loader-background);
    position: absolute;
    top: 0px;
    z-index: 5;
    height: 6px !important;
}
.alt_footer-progress-loader-box .ALT_PROGRESS_LOADER{
    width: 0%;
    background: var(--progress-loader-background);
    position: absolute;
    top: 0px;
    z-index: 5;
}

.footer-progress-text-box{
    background: var(--progress-refresh-box-background);
    height: 22px;
    overflow: hidden;
    right: 5px;
    position: fixed;
    bottom: 4px;
    left: 5px;
    display: flex;
}
.PROGRESS_TEXT_BOX{
    margin-top: 2px;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loader-icon{
    margin-left: 5px;
}

.loader_abort_button{
    width: 100px;
}

.footer-spacer{
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.footer-icon{
    width: 30px;
    height: 30px;
    background: none;
    border-width: 0px;
    color: var(--header-footer-icon-text-color);
    padding: 0px;
}
.footer-icon_no-width{
    height: 30px;
    width: 85px;
    background: none;
    border-width: 0px;
    color: var(--header-footer-icon-text-color);
    padding: 0px 10px 0px 10px;
}
.footer-icon-flag{
    width: 40px;
    height: 30px;
    background: none;
    border-width: 0px;
    margin-top: 1px;
    cursor: pointer;
}
.footer-icon-flag_mobile{
    width: 75px;
    text-align: left;
    width: 50px;
}
.footer-icon-flag-login{
    width: 40px;
    height: 40px;
    background: none;
    border-width: 0px;
    margin-top: 2px;
    cursor: pointer;
}
.footer-icon-border-right{
    border-width: 0px 1px 0px 0px;
    border-style: solid;
}
#company_logo{
    width: 82px;
    margin-right: 8px;
}
.company_logo-1{
    width: 70px!important;
    margin: 5px 8px 5px 5px;
}
.company_logo-2{
    width: 50px!important;
    margin: 5px 8px 5px 5px;
}

.scroll_up_button_div {
    color: white;
    white-space: nowrap;
    text-align: center;
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    width: 100px;
    margin-right: 20px;
}
@media	screen and (min-width: 450px) {
    .scroll_up_button_div.mobile {
        margin-right: 120px;
    }
}

.scroll_up_margin{
    margin-top: -7px;
}

#Language_Box {
    position: fixed;
    right: 15px;
    bottom: 12px;
    background-color: var(--popup-window-background);
    border: 1px solid;
    z-index: 4;
    display: flex;
    flex-direction: column;
}
#wizardLanguageBox {
    position: fixed;
    background-color: white;
    border: 1px solid;
    display: flex;
    flex-direction: column;
}
.language-button {
    padding: 5px;
    color: var(--popup-window-text-color);
    letter-spacing: normal;
    word-spacing: normal;
    font: 14px Arial;
    width: 120px;
    border: 0px;
    background: none;
    text-align: left;
}
.language-button:hover{
    cursor: pointer;
    background: var(--item-selected-color) !important;
    color: var(--item-selected-text-color) !important;
}
.language-image{
    margin: 0px 10px 0px 10px
}

#plant_alarms_control,
#plant_checklist_control {
    margin: 5px 0px 2px 5px;
    display: flex;
    flex-wrap: nowrap;
}
#button_create_checklist_entry,
#button_get_all_checklist_entries {
    height: 32px;
}
#active_alarms_tb_button{
    min-width: 50px;
    height: 32px;
}
#na_alarms_tb_button,
#known_alarms_tb_button,
#scheduled_alarms_tb_button,
#repair_alarms_tb_button{
    min-width: 50px;
    height: 32px;
    border-left: 0px;
}

#automatic_mode_button_control{
    margin: 5px 0px 2px 5px;
    display: flex;
    flex-wrap: nowrap;
}
#button_automatic_mode{
    height: 32px;
}

/* Global Elements */
*, input, select, textarea, option, button {
    outline: none!important;
}

/* Disabled Elements Global */
input.typedisabled {
    color: gray!important;
    cursor: not-allowed!important;
}
label.typedisabled {
    color: gray!important;
    cursor: not-allowed!important;
}
div.typedisabled {
    color: gray!important;
    cursor: not-allowed!important;
}
.button.typedisabled {
    color: gray!important;
    cursor: not-allowed!important;
}
.select.typedisabled {
    color: gray!important;
    cursor: not-allowed!important;
}
.button.typedisabled2 {
    color: gray!important;
}
#ALARM_FILTER.typedisabled {
    color: gray!important;
    cursor: not-allowed!important;
}
.disabledLabel {
    color: gray!important;
    cursor: not-allowed!important;
}
.disabledText {
    color: gray!important;
}

#content-config input:-moz-read-only { /* For Firefox */
    background-color: lightgrey;
    border: 1px solid grey;
}
#content-config input:read-only {
    background-color: var(--disabled-input-background);
    border: 1px solid grey;
    color: var(--disabled-input-text-color);
}

/* Loaders */
#Page_Change_Loader_Div,
#Config_Popup_Loader_Div,
#Device_View_Popup_Loader_Div,
#Chart_Popup_Loader_Div,
#Energy_Year_Popup_Loader_Div,
#DEV_MODE_INPUT_WINDOW_LOADER,
#PRIVATE_MODE_WARNING_WINDOW_LOADER,
#Modal_Wait_Hint_Dialog,
.solarex_modal_loader,
#CDB_Loader_Div {
    cursor: wait;
    display: flex;
    justify-content: center;
    align-items: center;
}
#DEV_MODE_INPUT_WINDOW{
    width: 350px;
    height: 112px;
    position: relative;
    overflow: hidden
}
#PRIVATE_MODE_WARNING_WINDOW{
    position: relative;
    overflow: hidden;
    cursor: default;
}
#Config_Popup_Loader,
#Page_Change_Loader{
    width: 250px;
    height: 102px;
    position: relative;
    overflow: hidden
}
#Device_View_Popup_Loader,
#Chart_Popup_Loader{
    width: 250px;
    height: 142px;
    position: relative;
    overflow: hidden;
    padding-bottom: 0px;
}
.Device_View_Loader_Bars_Container,
.Chart_Loader_Bars_Container{
    display: flex;
    align-content: flex-end;
    flex-direction: column;
    padding: 2px 5px 5px 5px;
}
#Device_View_Popup_Device_Text,
#Chart_Popup_Device_Text{
    width: calc(100% - 10px);
}
#Modal_Wait_Hint_Dialog_Container {
    position: relative;
    height: 200px;
    width: 400px;
    overflow: hidden;
    cursor: default;
}
#Energy_Year_Popup_Loader{
    width: 300px;
    height: 102px;
    position: relative;
    overflow: hidden
}
#CDB_Loader_Style_1{
    height: calc(100% - 30px);
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#CDB_Loader_Style_2{
    height: calc(100% - 30px);
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cdb_loader_box {
    height: 6px;
    width: calc(100% - 10px);
    border: 1px solid;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 12px;
}

#CDB_Load_Loader {
    width: 270px;
    height: 102px;
    position: relative;
    overflow: hidden;
}
#CDB_Loader_CAPTION {
    margin-left: 3px;
    margin-right: 3px;
    width: 100%;
}
#CDB_Loader_Style{
    height: calc(100% - 30px);
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#DEV_MODE_INPUT_WINDOW_CONTAINER{
    height: calc(100% - 30px);
    width: calc(100% - 20px);
    position: relative;
    margin: 32px 10px 10px 10px;
}
#PRIVATE_MODE_WARNING_WINDOW_CONTAINER{
    height: calc(100% - 60px);
    width: 100%;
    position: relative;
    margin: 30px 0px;
    overflow: auto;
}

#Config_Popup_Loader_Container,
#Energy_Year_Loader_Container
{
    height: calc(100% - 30px);
    width: 100%;
    margin-top: 30px;
    position: relative;
    text-align: center;
    padding-top: 10px;
}
#Device_View_Popup_Loader_Container,
#Chart_Popup_Loader_Container{
    position: relative;
    top: 32px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0px;
    height: calc(100% - 32px);
}
#Modal_Wait_Dialog_Container
{
    height: calc(100% - 40px);
    margin-top: 30px;
    position: relative;
    padding: 10px;
}
.config_loader_box {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 36px;
    height: 6px;
    width: initial;
    border: 1px solid;
}
.config_loader_abort_button {
    position: absolute !important;
    left: 5px;
    right: 5px;
    bottom: 6px;
    height: 26px;
    width: calc(100% - 10px);
}
.device_view_loader_abort_button {
    width: calc(100% - 10px);
    position: absolute!important;
    bottom: 5px;
    left: 5px;
    right: 5px;
}
.Modal_Wait_Hint_Dialog_Button {
    position: absolute !important;
    right: 5px;
    bottom: 6px;
    height: 26px;
    width: 100px;
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--loader-background-color);
    display: table;
}
.loader_2 {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: table;
}

.loader_height_15{
    height: 15px;
}
.loader_height_10{
    height: 10px;
}
.loader_height_5{
    height: 5px;
}
.loader_height_3{
    height: 3px;
}

/* Tooltips */
.Tooltip_outer {
    position: fixed;
    top: 307px;
    left: 902px;
    padding: 2px;
    border: 1px solid var(--plot-tooltip-outer-border-color);
    background-color: var(--plot-tooltip-background);
    opacity: 0.9;
    z-index: 59;
    display: block;
}
.Tooltip_clone_line{
    background: var(--color_gray);
    border-color: var(--color_gray);
}
.Tooltip_inner{
    padding: 5px;
    border: 1px solid var(--plot-tooltip-border-color);
    background-color: var(--plot-tooltip-background);
    color: var(--plot-tooltip-text-color);
    text-align: center;
}

/* Fancytree Definitions */
.backgrnd-white .fancytree-container{
    background: var(--fancytree-background) !important;
}

.fancytree-node.Child1 > span.fancytree-icon {
    height: 14px;
    width: 14px;
}
.fancytree-node.Child2 > span.fancytree-icon {
    height: 12px;
    width: 12px;
}

.fancytree-expander {
    color: var(--fancytree-icon-color);
    background-image: none !important;
}

.fancytree-container{
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.fancytree-icon use,
.device-icon use{
    fill: var(--fancytree-icon-color);
}

.fancytree-icon.curve use,
.device-icon.curve use{
    fill: var(--fancytree-icon-curve-color);
}
.fancytree-icon.function use,
.device-icon.function use{
    fill: var(--fancytree-icon-function-color);
}
.fancytree-icon.state_track use,
.device-icon.state_track use{
    fill: var(--fancytree-icon-state-color);
}
.fancytree-icon.error_track use,
.device-icon.error_track use{
    fill: var(--fancytree-icon-error-color);
}


.error_check_fancy_tree .fancytree-container,
.error_plant_fancy_tree .fancytree-container,
#Config_NSM_Track_Tree_Content .fancytree-container{
    min-height: calc(100% - 15px);
}


span.fancytree-node:hover {
  background-color: var(--color_main_brighter_2);
  border-color: var(--color_main);
}
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-focused {
  border-color: #3399FF;
}
span.fancytree-node.fancytree-active,
span.fancytree-node.fancytree-selected {
  background-color: #F7F7F7;
  border-color: #DEDEDE;
}
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-active,
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-selected,
span.fancytree-node.fancytree-active:hover,
span.fancytree-node.fancytree-selected:hover {
      background-color: #CBE8F6;
      border-color: #26A0DA;
}

span.fancytree-title {
    color: var(--fancytree-text-color)!important;
}
span.fancytree-selected:hover .fancytree-title {
    color: var(--fancytee-text-color-selected)!important;
}
span.fancytree-focused span.fancytree-title {
    color: var(--fancytee-text-color-selected)!important;
}
.fancytree-node span.fancytree-title:hover {
    color: var(--fancytee-text-color-selected)!important;
}

#Config_NSM_tree .fancytree-container {
    height: calc(100% - 6px);
    margin: 0px;
}

.fancytree-checkbox.icon-check-empty{
    background-image: none!important;
}
.fancytree-checkbox.icon-check{
    background-image: none!important;
}
.fancytree-checkbox.icon-check-empty::before {
    content: "\f096";
    font-family: fontawesome;
    font-weight: 900;
    margin-right: 8px;
    color: var(--fancytree-icon-color);
}
.fancytree-checkbox.icon-check::before {
    content: "\f14a ";
    font-family: FontAwesome;
    font-weight: 900;
    margin-right: 8px;
    color: var(--fancytree-icon-color);
}

.fancytree-expander.icon-caret-right{
    background-image: none!important;
    background-size: 0 0;
}
.fancytree-expander.icon-caret-right::before{
    content: "\f0da  ";
    font-family: FontAwesome;
    font-weight: 900;
    margin: 5px;
    color: var(--fancytree-icon-color);
}
.fancytree-expander.icon-caret-down{
    background-image: none!important;
    background-size: 0 0;
}
.fancytree-expander.icon-caret-down::before{
    content: "\f0d7";
    font-family: FontAwesome;
    font-weight: 900;
    margin: 5px;
    color: var(--fancytree-icon-color);
}

/* Highlighted Options */
.highlight_value{
    background: var(--item-hovered-color) !important;
    color: var(--item-selected-text-color) !important;
}
.plant_invoice_container:hover,
.plant_group_select_div:hover {
    cursor: pointer;
    background: var(--item-hovered-color);
    color: var(--item-selected-text-color);
}

.connected_line_div:hover,
.condition_line:hover,
#Load_Save_View_Popup_Content tr:hover,
.e_mail_address_div:hover,
.server_test_div:hover,
.plant_group_select_div:hover,
.plant_invoice_container.selected_address,
#Available_Plant_Groups_Box .activeGroup,
#Available_Stations_Box .activeGroup,
#Available_Plant_Groups_Box_2 .activeGroup {
    cursor: pointer;
    background: var(--item-selected-color) !important;
    color: var(--item-selected-text-color) !important;
}

select option:checked {
    cursor: pointer;
    background: var(--item-selected-color-snd) !important;
    color: var(--item-selected-text-color) !important;
}

.station-device-hovered-cell,
.station-device-hovered-color:not(tr),
.error_grid_box.station-device-hovered-color .Inner_Color_Container,
.connected_line_div.Selected,
.e_mail_address_selected ,
.hover_color:hover{
    background: var(--item-selected-color) !important;
    color: var(--item-selected-text-color) !important;
}

/* Select */
select.styled-select,
select {
    border: 1px solid var(--select-and-input-border-color);
    background: var(--select-and-input-background);
    color: var(--select-text-color);
}
#Select_Connection_Box .styled-select:after,
#Plant_Select_Div_Mobile .styled-select:after{
    padding: 5px 8px;
}
select::-ms-expand {
    display: none;
}
.styled-select {
    font-size: .93em;
    line-height: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance:none;
}
.styled-select-2 {
    color: hsl( 0, 0%, 30%);
    font-size: .93em;
    line-height: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance:none;
}
.styled-select:after {
    content: "\f0dd";
    font-family: FontAwesome;
    color: var(--select-text-color);
    padding: 8px 8px;
    position: absolute;
    right: 0;
    top: 0;
    background: transparent;
    z-index: 1;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
}
.styled-select-2:after {
    content: "\f0dd";
    font-family: FontAwesome;
    color: var(--select-text-color);;
    padding: 3px 8px;
    position: absolute;
    right: 0;
    top: 0;
    background: transparent;
    z-index: 1;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
}
.Plant_Select_Div .styled-select {
    position: relative;
    width: calc(100% - 52px);
    background: var(--select-and-input-background);
    border: 1px solid var(--select-and-input-border-color);
    height: 30px;
    white-space: nowrap;
}
@media	screen and (min-width: 800px){
    .Plant_Select_Div .styled-select {
        position: relative;
        width: calc(100% - 102px);
    }
}
.ios-select{
    border: 1px solid var(--select-and-input-border-color);;
}

#previous_plant {
    width: 50px;
    height: 32px;
    border-right: 0px;
}

#next_plant {
    width: 50px;
    height: 32px;
    border-left: 0px;
}

#Plant_Select {
    width: 100%;
    height: 30px;
    padding: 3px 15px 3px 3px;
    border: 0px solid
}

#Plant_Select_Div_Mobile .Plant_Select_Div{
    margin: 0px;
    height: 29px;
    overflow: hidden;
    border-width: 0px 0px 0px 0px;
    border-style: solid;
    border-color: var(--select-and-input-border-color);
}
#Plant_Select_Div_Mobile .styled-select{
    height: 26px;
    overflow: hidden;
}
#Plant_Select_Div_Mobile button{
    height: 28px;
    border-top: 0px;
    border-bottom: 0px;
}


/* Table */
table {
    font-family: "Segoe UI", Arial, sans-serif;
    border-collapse: collapse;
    border-width: 1px;
    border-style: solid;
    background: var(--table-background-color);
    border-color: var(--table-border-color);
    color: var(--table-font-color);
}

th {
    color: var(--table-header-font-color);
    background: var(--table-header-background);
    border-color: var(--table-header-border-color);
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    text-align: center;
    height: 15px;
    padding: 2px 5px 2px 5px;
    font-weight: bold;
    font-size: 11px;
}
.plant_overview_table th {
    color: var(--table-header-font-color);
    background: var(--table-header-background-alt);
    border-color: var(--table-header-border-color-alt);
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    text-align: center;
    min-height: 30px;
    height: 30px;
    padding: 0px;
    font-weight: bold;
    font-size: 0.875rem;
}
.plant_outage_table th {
    color: var(--table-header-font-color);
    background: var(--table-header-background-alt2);
    border-color: var(--table-header-border-color-alt2);
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    text-align: center;
    min-height: 30px;
    height: 30px;
    padding: 0px;
    font-weight: bold;
    font-size: 0.875rem;
}

th:last-child {
    border-right: 0px;
}
.Window_Panel th{
    color: var(--table-header-font-color);
    background: var(--table-fixed-header-background);;
    white-space: nowrap;
}
.table_window th,
#plant_device_table th,
#plant_device_tracks_table th,
#Plant_Checklist_Table th{
    color: var(--table-header-font-color);
    background: var(--table-fixed-header-background);
    text-align: left;
    white-space: normal;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

tbody{
    font-size: 12px;
}
#Year_Table tbody > tr > td,
#Month_Table tbody > tr > td,
.chart_popup_table tbody > tr > td,
#Popup_Table_Body tr > td,
.Window_Panel tbody > tr > td{
    text-align: left !important;
}

tbody > tr > td {
    white-space: nowrap;
    text-align: right;
    padding: 2px 4px;
    border-right: 1px solid;
    border-color: var(--table-body-border-color);
    color: var(--table-body-odd-row-text-color);
    background: var(--table-background-color);
    width: auto;
    font-size: 12px;
}
.plant_overview_table tbody > tr > td {
    white-space: nowrap;
    text-align: right;
    padding: 2px 4px;
    border-right: 1px solid;
    border-color: var(--table-body-border-color-alt);
    color: var(--table-body-odd-row-text-color);
    width: auto;
    font-size: 0.875rem;
    height: 30px;
}
.plant_outage_table tbody > tr > td {
    white-space: nowrap;
    text-align: right;
    padding: 2px 4px;
    border-right: 1px solid;
    border-color: var(--table-body-border-color-alt2);
    color: var(--table-body-odd-row-text-color);
    width: auto;
    font-size: 0.875rem;
    height: 30px;
}
tbody > tr > td:first-child,
tbody > tr > td.NAME {
    text-align: left;
    font-weight: bold;
    padding-right: 10px;
}
tbody > tr > td:last-child {
    border-right: 0px;
}
tbody > tr:nth-of-type(even) > td {
    color: var(--table-body-even-row-text-color);
    background: var(--table-body-odd-row-background);
}
.plant_overview_table tbody > tr:nth-of-type(even) > td {
    color: var(--table-body-even-row-text-color);
    background: var(--table-body-odd-row-background-alt);
}
.plant_outage_table tbody > tr:nth-of-type(even) > td {
    color: var(--table-body-even-row-text-color);
    background: var(--table-body-odd-row-background-alt2);
}
tbody > tr:nth-of-type(odd) .no_ch_style{
    background: var(--table-body-no-ch-odd-row-background);
}
tbody > tr:nth-of-type(even) .no_ch_style{
    background: var(--table-body-no-ch-even-row-background);
}

tbody > tr > td .COLOR {
    text-align: center;
    padding: 2px 4px;
    width: 8%;
}
tbody > tr:last-child > td{
    border-bottom: 0px solid;
}

.table-fixed-header{
    border-width: 0px 1px 1px 1px;
}
.table-fixed-header-sticky-left{
    border-width: 0px 0px 0px 0px;
}

.table-fixed-header-wrapper {
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: var(--table-border-color);
}
.table-fixed-header-wrapper-all-borders {
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: var(--default-border-color);
}
.bold_td{
    font-weight: bold;
}
.text_left_td{
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plant_overview_table{
    margin: 0px 10px 0px 10px;
    width: calc(100% - 20px);
    border-color: var(--table-body-border-color-alt);
    border-spacing: 0;
    border-collapse: separate;
}
.plant_overview_table_rounded{
    border-radius: 15px;
}

.plant_outage_table{
    border-color: var(--table-body-border-color-alt2);
}
.plant_overview_table_rounded tr:last-child td:first-child {
    border-bottom-left-radius: 15px;
}
.plant_overview_table_rounded tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}
.plant_overview_table_rounded tr:last-child th:first-child {
    border-top-left-radius: 15px;
}
.plant_overview_table_rounded tr:last-child th:last-child {
    border-top-right-radius: 15px;
}

.sticky_header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}
.sticky_left_column {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: var(--table-fixed-column-even-backgound)!important;
    z-index: 1;
}
.sticky_date_column{
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 3;
}
tbody > tr:nth-of-type(even) > td.sticky_left_column {
    background: var(--table-fixed-column-odd-background) !important;
}

/* Device View sticky table headers */
.device_view_table_fixed_header {
    color: var(--table-header-font-color);
    background: var(--table-fixed-header-background);
}

.device_view_sticky_left {
    position: sticky;
    left: 0px;
    z-index: 1;
}
.device_view_sticky_right {
    position: sticky;
    right: -1px;
    z-index: 1;
}

.device_view_sticky_timestamp_cell{
    border-left: 1px solid;
    border-color: var(--table-body-border-color);
}
.timestamp_border {
    border-left: 1px solid;
    border-color: var(--table-body-border-color);
}


tbody > tr:nth-of-type(odd) > td.device_view_sticky_cell:not(.no_padding_cell) {
    border-right: 1px solid;
    border-color: var(--table-body-border-color);
    background: var(--dv-panel-background);
}
tbody > tr:nth-of-type(even) > td.device_view_sticky_cell:not(.no_padding_cell) {
    border-right: 1px solid;
    border-color: var(--table-body-border-color);
    background: var(--table-fixed-column-odd-background);
}
tbody > tr:nth-of-type(odd) > td .td_background_color_container {
    background: var(--table-background-color);
}
tbody > tr:nth-of-type(even) > td .td_background_color_container {
    background: var(--table-fixed-column-odd-background);
}


.station-device-wrong-configuration-color{
    background: var(--global-wrong-configuration-value-warning-color) !important;
    overflow: visible !important;
}
.station-device-warning-color{
    background: var(--global-zero-value-warning-color) !important;
    overflow: visible !important;
}

tbody > tr:not(.station-device-hovered-color):nth-of-type(odd) .station-device-warning-color{
    background: var(--global-zero-value-warning-color) !important;
    overflow: visible !important;
}
tbody > tr:not(.station-device-hovered-color):nth-of-type(even) .station-device-warning-color{
    background: var(--global-zero-value-warning-color-darken) !important;
    overflow: visible !important;
}

tbody > tr:not(.station-device-hovered-color).station-device-all-td-warning-color:nth-of-type(odd) .td_background_color_container,
tbody > tr:not(.station-device-hovered-color).station-device-all-td-warning-color:nth-of-type(odd) td:not(.no_padding_cell):not(.device_view_sticky_timestamp_cell){
    background: var(--global-zero-value-warning-color) !important;
    overflow: visible !important;
}
tbody > tr:not(.station-device-hovered-color).station-device-all-td-warning-color:nth-of-type(even) .td_background_color_container,
tbody > tr:not(.station-device-hovered-color).station-device-all-td-warning-color:nth-of-type(even) td:not(.no_padding_cell):not(.device_view_sticky_timestamp_cell){
    background: var(--global-zero-value-warning-color-darken) !important;
    overflow: visible !important;
}

tbody > tr:not(.station-device-hovered-color).station-device-all-td-warning-color-user-defined:nth-of-type(odd) .td_background_color_container,
tbody > tr:not(.station-device-hovered-color).station-device-all-td-warning-color-user-defined:nth-of-type(odd) td:not(.no_padding_cell):not(.device_view_sticky_timestamp_cell){
    background: var(--global-zero-value-warning-color-user-defined) !important;
    overflow: visible !important;
}
tbody > tr:not(.station-device-hovered-color).station-device-all-td-warning-color-user-defined:nth-of-type(even) .td_background_color_container,
tbody > tr:not(.station-device-hovered-color).station-device-all-td-warning-color-user-defined:nth-of-type(even) td:not(.no_padding_cell):not(.device_view_sticky_timestamp_cell){
    background: var(--global-zero-value-warning-color-user-defined-darken) !important;
    overflow: visible !important;
}

tbody > tr:not(.station-device-hovered-color).station-device-all-td-no-data-color:nth-of-type(odd) .td_background_color_container,
tbody > tr:not(.station-device-hovered-color).station-device-all-td-no-data-color:nth-of-type(odd) td:not(.no_padding_cell):not(.device_view_sticky_timestamp_cell){
    background: var(--global-no-data-warning-color) !important;
    color: var(--global-no-data-warning-text-color);
    overflow: visible !important;
}
tbody > tr:not(.station-device-hovered-color).station-device-all-td-no-data-color:nth-of-type(even) .td_background_color_container,
tbody > tr:not(.station-device-hovered-color).station-device-all-td-no-data-color:nth-of-type(even) td:not(.no_padding_cell):not(.device_view_sticky_timestamp_cell){
    background: var(--global-no-data-warning-color-darken) !important;
    color: var(--global-no-data-warning-text-color);
    overflow: visible !important;
}

tbody > tr:not(.station-device-warning-color):not(.station-device-all-td-warning-color):nth-of-type(odd).station-device-hovered-color,
tbody > tr:not(.station-device-warning-color):not(.station-device-all-td-warning-color):nth-of-type(odd).station-device-hovered-color td {
    background: var(--item-selected-color) !important;
    color: var(--item-selected-text-color) !important;
}
tbody > tr:not(.station-device-warning-color):not(.station-device-all-td-warning-color):nth-of-type(even).station-device-hovered-color,
tbody > tr:not(.station-device-warning-color):not(.station-device-all-td-warning-color):nth-of-type(even).station-device-hovered-color td {
    background: var(--item-selected-color-darken) !important;
    color: var(--item-selected-text-color) !important;
}

tbody > tr:nth-of-type(odd).station-device-hovered-color td.sticky_left_column {
    background: var(--item-selected-color-not-transparent) !important;
}
tbody > tr:nth-of-type(even).station-device-hovered-color td.sticky_left_column {
    background: var(--item-selected-color-not-transparent-darken) !important;
}
tbody > tr:nth-of-type(odd).station-device-hovered-color .td_background_color_container {
    background: var(--item-selected-color-not-transparent)!important;
}
tbody > tr:nth-of-type(even).station-device-hovered-color .td_background_color_container {
    background: var(--item-selected-color-not-transparent-darken)!important;
}

tbody > tr.station-device-hovered-color:nth-of-type(odd) .station-device-warning-color{
    background: color-mix(in srgb, var(--global-zero-value-warning-color) 50%, var(--item-selected-color) 50%) !important;
}
tbody > tr.station-device-hovered-color:nth-of-type(even) .station-device-warning-color{
    background: color-mix(in srgb, var(--global-zero-value-warning-color-darken) 50%, var(--item-selected-color) 50%) !important;
}

tbody > tr.station-device-hovered-color.station-device-all-td-warning-color:nth-of-type(odd) .td_background_color_container,
tbody > tr.station-device-hovered-color.station-device-all-td-warning-color:nth-of-type(odd) td:not(.no_padding_cell){
    background: color-mix(in srgb, var(--global-zero-value-warning-color) 50%, var(--item-selected-color) 50%) !important;
}
tbody > tr.station-device-hovered-color.station-device-all-td-warning-color:nth-of-type(even) .td_background_color_container,
tbody > tr.station-device-hovered-color.station-device-all-td-warning-color:nth-of-type(even) td:not(.no_padding_cell){
    background: color-mix(in srgb, var(--global-zero-value-warning-color-darken) 50%, var(--item-selected-color) 50%) !important;
}

tbody > tr.station-device-hovered-color.station-device-all-td-warning-color-user-defined:nth-of-type(odd) .td_background_color_container,
tbody > tr.station-device-hovered-color.station-device-all-td-warning-color-user-defined:nth-of-type(odd) td:not(.no_padding_cell){
    background: color-mix(in srgb, var(--global-zero-value-warning-color-user-defined) 50%, var(--item-selected-color) 50%) !important;
}
tbody > tr.station-device-hovered-color.station-device-all-td-warning-color-user-defined:nth-of-type(even) .td_background_color_container,
tbody > tr.station-device-hovered-color.station-device-all-td-warning-color-user-defined:nth-of-type(even) td:not(.no_padding_cell){
    background: color-mix(in srgb, var(--global-zero-value-warning-color-user-defined-darken) 50%, var(--item-selected-color) 50%) !important;
}

tbody > tr.station-device-hovered-color.station-device-all-td-no-data-color:nth-of-type(odd) .td_background_color_container,
tbody > tr.station-device-hovered-color.station-device-all-td-no-data-color:nth-of-type(odd) td:not(.no_padding_cell){
    background: color-mix(in srgb, var(--global-no-data-warning-color) 50%, var(--item-selected-color) 50%) !important;
}
tbody > tr.station-device-hovered-color.station-device-all-td-no-data-color:nth-of-type(even) .td_background_color_container,
tbody > tr.station-device-hovered-color.station-device-all-td-no-data-color:nth-of-type(even) td:not(.no_padding_cell){
    background: color-mix(in srgb, var(--global-no-data-warning-color-darken) 50%, var(--item-selected-color) 50%) !important;
}

.no_padding_cell {
    margin: 0px!important;
    padding: 0px!important;
    background: var(--table-background-color)!important;
}

.station-device-all-td-warning-color .device_view_sticky_timestamp_cell td{
    background: var(--dv-panel-background)!important;
}

.STATE_PRIO_WARNING_1 .td_background_color_container,
.STATE_PRIO_WARNING_1 td:not(.no_padding_cell){
    background: var(--global-state-prio-1) !important;
}
.STATE_PRIO_WARNING_2 .td_background_color_container,
.STATE_PRIO_WARNING_2 td:not(.no_padding_cell){
    background: var(--global-state-prio-2) !important;
}
.STATE_PRIO_WARNING_3 .td_background_color_container,
.STATE_PRIO_WARNING_3 td:not(.no_padding_cell){
    background: var(--global-state-prio-3) !important;
}
.STATE_PRIO_WARNING_4 .td_background_color_container,
.STATE_PRIO_WARNING_4 td:not(.no_padding_cell){
    background: var(--global-state-prio-4) !important;
}
.STATE_PRIO_WARNING_5 .td_background_color_container,
.STATE_PRIO_WARNING_5 td:not(.no_padding_cell){
    background: var(--global-state-prio-5) !important;
}
.STATE_PRIO_WARNING_6 .td_background_color_container,
.STATE_PRIO_WARNING_6 td:not(.no_padding_cell){
    background: var(--global-state-prio-6) !important;
}
.STATE_PRIO_WARNING_7 .td_background_color_container,
.STATE_PRIO_WARNING_7 td:not(.no_padding_cell){
    background: var(--global-state-prio-7) !important;
}
.STATE_PRIO_WARNING_8 .td_background_color_container,
.STATE_PRIO_WARNING_8 td:not(.no_padding_cell){
    background: var(--global-state-prio-8) !important;
}
.STATE_PRIO_WARNING_9 .td_background_color_container,
.STATE_PRIO_WARNING_9 td:not(.no_padding_cell){
    background: var(--global-state-prio-9) !important;
}
.STATE_PRIO_WARNING_10 .td_background_color_container,
.STATE_PRIO_WARNING_10 td:not(.no_padding_cell){
    background: var(--global-state-prio-10) !important;
}

.ERROR_PRIO_WARNING_1 .td_background_color_container,
.ERROR_PRIO_WARNING_1 td:not(.no_padding_cell){
    background: var(--global-error-prio-1) !important;
}
.ERROR_PRIO_WARNING_2 .td_background_color_container,
.ERROR_PRIO_WARNING_2 td:not(.no_padding_cell){
    background: var(--global-error-prio-2) !important;
}
.ERROR_PRIO_WARNING_3 .td_background_color_container,
.ERROR_PRIO_WARNING_3 td:not(.no_padding_cell){
    background: var(--global-error-prio-3) !important;
}

.ERROR_PRIO_WARNING_4 .td_background_color_container,
.ERROR_PRIO_WARNING_4 td:not(.no_padding_cell){
    background: var(--global-error-prio-4) !important;
}
.ERROR_PRIO_WARNING_5 .td_background_color_container,
.ERROR_PRIO_WARNING_5 td:not(.no_padding_cell){
    background: var(--global-error-prio-5) !important;
}
.ERROR_PRIO_WARNING_6 .td_background_color_container,
.ERROR_PRIO_WARNING_6 td:not(.no_padding_cell){
    background: var(--global-error-prio-6) !important;
}
.ERROR_PRIO_WARNING_7 .td_background_color_container,
.ERROR_PRIO_WARNING_7 td:not(.no_padding_cell){
    background: var(--global-error-prio-7) !important;
}
.ERROR_PRIO_WARNING_8 .td_background_color_container,
.ERROR_PRIO_WARNING_8 td:not(.no_padding_cell){
    background: var(--global-error-prio-8) !important;
}
.ERROR_PRIO_WARNING_9 .td_background_color_container,
.ERROR_PRIO_WARNING_9 td:not(.no_padding_cell){
    background: var(--global-error-prio-9) !important;
}
.ERROR_PRIO_WARNING_10 .td_background_color_container,
.ERROR_PRIO_WARNING_10 td:not(.no_padding_cell){
    background: var(--global-error-prio-10) !important;
}

tr:nth-of-type(even)[class^="STATE_PRIO_WARNING_"] .td_background_color_container,
tr:nth-of-type(even)[class^="STATE_PRIO_WARNING_"] td:not(.no_padding_cell){
    background-color: rgba(255, 196, 0, 0.34) !important;
}
tr:nth-of-type(even)[class^="ERROR_PRIO_WARNING_"] .td_background_color_container,
tr:nth-of-type(even)[class^="ERROR_PRIO_WARNING_"] td:not(.no_padding_cell) {
    background-color: #ff000057 !important;
}

.device_view_table_no_border{
    border-left: 0px;
    border-right: 0px;
    border-collapse: separate;
    border-spacing: 0;
}
.device_view_table_border{
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: var(--table-border-color);
}

.td_background_color_container{
    padding: 2px 4px;
    min-height: 16px;
    height: 100%;
}
.td_background_color_container_name{
    padding-right: 10px;
}


    /* Div Table */
.div_table_body {
    display: table;
    width: 100%
}
.div_table_row{
    display: table-row
}
.div_table_cell{
    display: table-cell;
}
.div_table_cell.right_align{
    text-align: right;
}
.div_table_cell.top_align{
    vertical-align: top;
}
.div_table_header_row{
    display: table-row
}

.div_header_style{
    color: var(--table-header-font-color);
    background: var(--table-fixed-header-background);
    text-align: left;
    white-space: normal;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    display: table-cell;
    align-content: center;
    vertical-align: middle;
}

.div_table_cell_even{
    white-space: nowrap;
    padding: 2px 4px;
    border-right: 1px solid;
    border-color: var(--table-body-border-color);
    color: var(--table-body-odd-row-text-color);
    background: var(--table-body-odd-even-background);
    width: auto;
    font-size: 12px;
    display: table-cell;
}

.border_bottom{
    border-bottom: 1px solid;
    border-color: var(--table-body-border-color);
}
.border_left{
    border-left: 1px solid;
    border-color: var(--table-body-border-color);
}

.div_table_cell_odd{
    white-space: nowrap;
    padding: 2px 4px;
    border-right: 1px solid;
    border-color: var(--table-body-border-color);
    color: var(--table-body-odd-row-text-color);
    background: var(--table-body-odd-row-background);
    width: auto;
    font-size: 12px;
    display: table-cell;
}

.div_table_cell_even_sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: var(--table-body-even-row-background)!important;
    z-index: 1;
}

.div_table_cell_odd_sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: var(--table-fixed-column-odd-background)!important;
    z-index: 1;
}

.station-device-hovered-color .div_table_cell_odd_sticky,
.station-device-hovered-color .div_table_cell_even {
    background: var(--item-selected-color-not-transparent) !important;
}


/* Inputs */
input {
    color: var(--input-text-color);
    background: var(--select-and-input-background);
    border-radius: 1px;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.25em;
    padding: .312em;
    margin: 0 0 5px 0;
    width:100%;
    border: 1px solid var(--select-and-input-border-color);
    box-sizing: border-box;
}

/* Plant Search Bar used in Overview_all */
.fast_page_access{
    margin-right: 5px;
}

#Overview_All_Filter_Div{
    display: flex;
}

.plant_search_bar{
    width: calc(100% - 124px);
    border: 1px solid var(--select-and-input-border-color);
    background: var(--select-and-input-background);
    color: var(--input-text-color);
    height: 30px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.plant_search_filter_icon{
    margin-left: 10px;
}
.filter_div{
    padding: 2px 5px 2px 5px;
    border: 1px solid var(--plant-group-border-color);
    background: var(--plant-group-background);
}
#Overview_Filter_Plant_Name {
    border: 0px;
    outline-width: 0;
    margin: 0px;
    flex-grow: 1;
    height: 100%
}
.plant_search_clear_button {
    height: 30px;
    width: 38px;
    border-width: 0px 0px 0px 1px!important;
}
.more_filter_button {
    height: 32px;
    position: absolute!important;
    right: 44px;
}
#adv_filter_div {
    right: 44px;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: var(--default-border-color);
    background: var(--dialog-background);
    z-index: 3;
    position: absolute;
    width: calc(100% - 62px);
    padding: 5px;
    overflow: auto;
    margin-top: -3px;
    white-space: nowrap;
}
.mobile_checkbox{
    width: 15px;
    vertical-align: sub;
}
.more_filters{
    font-weight: bold;
    margin-bottom: 5px;
}
.mobile_label{
    display: inline-block!important;
    margin: 0px!important;
    vertical-align: middle;
}

.hide_filter_bar{
    position: absolute!important;
    height: 32px;
    right: 3px;
}

.dialog_background{
    background: var(--dialog-background) !important;
}

.page_background{
    background: var(--default-panel-background);
}

.page_border{
    border-color: var(--default-panel-border-color) !important;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
}
.page_border_with_top{
    border: 1px solid var(--default-panel-border-color) !important;
}

@media screen and (min-width: 600px) {
    .plant_search_bar {
        width: 300px;
    }
    .more_filter_button{
        position: absolute!important;
        right: initial!important;
        left: 310px!important;
        width: 95px;
    }
    #adv_filter_div{
        right: initial;
        left: 6px;
        width: 372px;
    }
    .hide_filter_bar{
        right: initial;
        left: 394px;
    }
}

textarea{
    background-color: var(--select-and-input-background);
    border-color: var(--select-and-input-border-color);
    color: var(--input-text-color);
}

/* Buttons */
.button.typeNoColor
{
    border: solid 1px var(--button-no-color-border-color);
    background: var(--button-no-color-background);
    color: var(--button-no-color-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.button.noButtonStyle{
    border: 0px solid;
    background: transparent;
    font-weight: normal;
}

.button,
.button:hover{
    cursor: pointer;
    text-decoration: none;
    position: relative;
}
.button.type2 {
    margin: 0em;
    padding: .25em 1em;
    font-weight: normal;
    border: 1px solid var(--button-border-color);
    color: var(--button-text-color);
    background: var(--button-background-fallback);
    background: var(--button-background-moz);
    background: var(--button-background-webkit);
}
.button.type5 {
    margin: 0em;
    padding: .25em 1em;
    font-weight: normal;
    border: 1px solid var(--button-border-color);
    color: var(--button-text-color);
    background: var(--button-type5-background-fallback);
    background: var(--button-type5-background-moz);
    background: var(--button-type5-background-webkit);
}

.button_only_icon{
    width: 50px;
    padding: 0px !important;
}
.topbar_resize_icon{
    width: 50px;
    padding: 0px !important;
}

.config_select_button,
.tabbed_button {
    height: 38px;
    margin-left: -5px !important;
    min-width: 65px;
    border: 1px solid;
    color: var(--config-select-button-text-color) !important;
}
.config_select_button.type5,
.tabbed_button.type5 {
    box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.57);
}

/* Datepickers */
#Date_Select_Div {
    display: flex;
    flex-wrap: nowrap;
    margin: 5px 0px 2px 5px;
}
#date_prev {
    width: 25px;
    height: 32px;
    border-right: 0px;
}
#datepicker{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    background: var(--select-and-input-background);
    border: 1px solid var(--select-and-input-border-color);
    height: 30px;
    width: 32px;
}
.calender_icon_new{
    width: 30px;
    text-align: center;
}
#Date_Select {
    display: none;
    border-width: 0px 0px 0px 1px;
    border-style: solid;
    border-color: var(--select-and-input-border-color);
    margin-bottom: 0px;
    height: 30px;
    padding: 3px 3px 3px 3px
}
#date_next {
    width: 25px;
    height: 32px;
    border-left: 0px;
}

#timepicker_control{
    margin: 5px 0px 2px 5px;
    display: flex;
    flex-wrap: nowrap;
}
.main_timepicker_container{
    border: 1px solid var(--select-and-input-border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 30px;
    overflow: hidden;
    max-width: 70px;
    padding: 0px 5px 0px 5px;
    background: var(--select-and-input-background);
}
#timezone_label{
    cursor: default;
}
#timepicker {
    margin-bottom: 0px;
    width: 42px;
    border-width: 0px;
    height: 28px;
    padding: 0px;
}

@media screen and (min-width: 800px) {
    .main_timepicker_container {
        max-width: initial;
    }
}

#button_lock_time,
#button_set_time_now{
    border-left: 0px solid black;
    width: 40px;
    height: 32px;
    font-size: 10px;
    width: 25px;
}

#date_changed_hint {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: white;
    border: 1px solid;
    padding: 3px;
    z-index: 3;
    text-align: center;
}

#year_month_control,
#Avail_Year_Month_Control,
#Avail_Date_Control{
    margin: 5px 0px 2px 5px;
    display: flex;
    flex-wrap: nowrap;
}

#month_prev,
#Avail_Month_Prev,
#Avail_Day_Prev{
    width: 25px;
    height: 32px;
    font-size: 10px;
    border-right: 0px;
}
.Month_Select_Container {
    position: relative;
    width: 100px;
    border-width: 1px 0px 1px 1px;
    border-style: solid;
    margin-right: 0px;
    height: 30px;
    border-color: var(--select-and-input-border-color);
}
.Day_Select_Container {
    position: relative;
    width: 110px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    margin-right: 0px;
    height: 30px;
    border-color: var(--select-and-input-border-color);
}
#Month_Select,
#Avail_Month_Select,
#Zoom_to_Date{
    width: 100%;
    height: 30px;
    padding: 3px 15px 3px 3px;
    border: 0px solid
}
.Year_Select_Container {
    position: relative;
    width: 65px;
    border: 1px solid var(--select-and-input-border-color);
    margin-right: 0px;
    height: 30px;
}
#Year_Select,
#Avail_Year_Select{
    width: 100%;
    height: 30px;
    padding: 3px 15px 3px 3px;
    border: 0px solid
}
#month_next,
#Avail_Month_Next,
#Avail_Day_Next{
    width: 25px;
    height: 32px;
    font-size: 10px;
    border-left: 0px;
    margin-right: 5px;
}
#Select_Month_Year_Button {
    font-size: 1.45em;
    height: 32px;
    width: 50px;
    margin-right: 10px;
}
#Print_Doc {
    font-size: 1.45em;
    height: 32px;
    width: 50px;
}


@media screen and (min-width: 800px){
    #Date_Select_Div {
        width: 250px;
    }
    #date_prev,
    #Avail_Month_Prev,
    #Avail_Day_Prev{
        width: 50px;
    }
    #datepicker {
        position: relative;
        width: calc(100% - 100px);
    }
    #Date_Select{
        display: block;
        width: calc(100% - 30px);
    }
    #date_next,
    #Avail_Month_Next,
    #Avail_Day_Next{
        width: 50px;
    }

    #button_lock_time,
    #button_set_time_now {
        font-size: 16px;
        width: 40px;
    }

    #month_prev,
    #month_next {
        font-size: 16px;
        width: 49px;
    }
}


#dismiss_datepicker,
#Mover_Chart_Date_Picker,
#IPC_Chart_Date_Picker,
#BOX_Chart_Date_Picker,
#Snow_Mode_datepicker,
#Snow_Mode_Start_datepicker,
#DV_Config_Start_datepicker,
#DV_Config_End_datepicker,
#Access_Code_Valid_Until_Datepicker,
#Access_Valid_Until_Datepicker,
#customer_datepicker{
    position: relative;
    width: 100%;
    height: 30px;
    border: 1px solid var(--select-and-input-border-color);
    background-color: var(--select-and-input-background);
}

.calender_icon{
    height: 30px;
    width: 32px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    border-color: var(--select-and-input-border-color);
    color: var(--input-text-color);
}

.chart_day_picker_div{
    white-space: nowrap;
    display: inline-block;
    width: 150px;
    height: 30px;
    color: var(--input-text-color);
}
.chart_day_picker_input .calender_icon {
    width: 32px;
    text-align: center;
    display: inline-block;
    color: var(--input-text-color);
    height: 30px;
    vertical-align: middle;
}
.chart_day_picker_input {
    background-color: var(--select-and-input-background);
    display: inline-block;
    border: 1px solid var(--select-and-input-border-color);
    height: 30px;
    position: relative;
}

.date_picker_border_color{
    border-color: var(--select-and-input-border-color);
}

/* Popup Definitions */
.backgrnd-white{
    background: var(--popup-window-background);
}
.config_panel{
    background: var(--popup-window-background);
}

.Popup_Window {
    position: fixed;
    top: 0px;
    left: 0px;
    background: var(--popup-window-background);
    border: 1px solid var(--popup-window-border-color)!important;
    overflow: auto;
    padding-bottom: 10px;
    z-index: 15;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .7);
}
.Popup_Topbar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 28px;
    cursor: default;
    background-color: var(--popup-window-topbar-background);
    border-color: var(--popup-window-border-color)!important;
    border-bottom: 1px solid;
}

.Popup_Topbar_Float {
    width: 100%;
    height: 28px;
    cursor: default;
    background-color: var(--popup-window-topbar-background);
    border-color: var(--popup-window-border-color)!important;
    border-bottom: 1px solid;
}

#News_Alert.dialog_background {
    background: var(--warning-window-background-color)!important;
    color: var(--warning-window-text-color)!important;
}

.Topbar {
    cursor: default;
    background-color: var(--popup-window-topbar-background);
    flex-shrink: 0;
    height: 28px;
}
.topbar_border{
    border-left: 1px solid !important;
    border-right: 1px solid !important;
}
.Popup_Caption {
    width: calc(100% - 76px);
    text-align: left;
    font-size: 12px;
    margin-top: 7px;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--popup-window-topbar-text-color);
    font-weight: bold;
}
.Popup_Caption_Float {
    text-align: left;
    font-size: 12px;
    margin-top: 7px;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--popup-window-topbar-text-color);
    font-weight: bold;
    float: left;
}
.Popup_Button_Border_Color{
    border-color: var(--popup-window-border-color)!important;
}
.Popup_Maximizebutton {
    position: absolute;
    right: 38px;
    top: 0px;
    width: 38px;
    height: 28px;
    color: var(--popup-window-button-text-color);
    background: var(--button-background-fallback);
    background: var(--button-background-moz);
    background: var(--button-background-webkit);
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    border-color: var(--popup-window-border-color)!important;
    margin: 0em;
    font-weight: normal;
}
.Popup_Closebutton {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 38px;
    height: 28px;
    color: var(--popup-window-button-text-color);
    border-color: var(--button-border-color);
    background: var(--button-background-fallback);
    background: var(--button-background-moz);
    background: var(--button-background-webkit);
    border-width: 0px 0px 0px 0px;
    border-style: solid;
    border-color: var(--popup-window-border-color)!important;
    margin: 0em;
    font-weight: normal;
}
.Popup_Closebutton_Float {
    float: left;
    width: 38px;
    height: 28px;
    color: var(--popup-window-button-text-color);
    border-color: var(--button-border-color);
    background: var(--button-background-fallback);
    background: var(--button-background-moz);
    background: var(--button-background-webkit);
    border-width: 0px 1px 0px 0px;
    border-color: var(--popup-window-border-color)!important;
    margin: 0em;
    font-weight: normal;
}

.Popup_Caption.no_button {
    width: calc(100% - 10px);
    text-align: left;
    font-size: 12px;
    padding: 5px 0px 0px 5px;
    height: 23px;
    margin: 0px;
    display: inline-block;
}
.Popup_Caption.one_button {
    /* Button width: 38 + 5 margin = 43 */
    width: calc(100% - 38px);
    text-align: left;
    font-size: 12px;
    padding: 5px 0px 0px 5px;
    height: 23px;
    margin: 0px;
    display: inline-block;
}
.Popup_Caption.two_button {
    /* Button width: 2*38 = 76 + 5 margin = 81 */
    width: calc(100% - 81px);
    text-align: left;
    font-size: 12px;
    padding: 5px 0px 0px 5px;
    height: 23px;
    margin: 0px;
    display: inline-block;
}
.Popup_Caption.two_button_lr {
    /* Button width: 2*38 = 76 + 5 margin = 81 */
    width: calc(100% - 162px);
    text-align: left;
    font-size: 12px;
    padding: 5px 0px 0px 81px;
    height: 23px;
    margin: 0px;
    display: inline-block;
}

.Alarm_Chart_Panel {
    margin-bottom: 5px;
    border: 1px solid var(--default-border-color);
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    padding: 2px;
    background: var(--default-panel-background);
}

@media	screen and (min-width: 450px){
    .Popup_Caption{
        width: calc(100% - 152px);
        text-align: center;
        font-size: 14px;
        margin-top: 5px;
        margin-left: 76px;
    }
    .Popup_Caption.no_button{
        text-align: center;
        font-size: 14px;
    }
    .Popup_Caption.one_button{
        /* 2x 38 */
        width: calc(100% - 76px);
        text-align: center;
        font-size: 14px;
        padding: 5px 0px 0px 38px;
    }
    .Popup_Caption.two_button{
        /* 2x 76 */
        width: calc(100% - 152px);
        text-align: center;
        font-size: 14px;
        padding: 5px 0px 0px 76px;
    }
    .Popup_Caption.two_button_lr{
        /* 2x 76 */
        width: calc(100% - 152px);
        text-align: center;
        font-size: 14px;
        padding: 5px 0px 0px 76px;
    }
    .Popup_Caption_Float{
        font-size: 14px;
        margin-top: 5px;
    }
}

.Popup_Content {
    position: absolute;
    top: 38px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
}

.Station_Topbar {
    position: relative;
    width: 100%;
    height: 28px;
    cursor: default;
    background-color: var(--popup-window-topbar-background);
    border-color: var(--popup-window-border-color)!important;
    border-style: solid;
    border-width: 1px 0px 1px 0px;
}

.Station_Caption {
    position: absolute;
    top: 0px;
    text-align: left;
    margin-top: 8px;
    margin-left: 5px;
    font-size: 11px;
    left: 0px;
    width: calc(100% - 90px);
    bottom: 0px;
    height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--popup-window-topbar-text-color);
    font-weight: bold;
}

.Topbar_Color{
    background-color: var(--popup-window-topbar-background);
}

.chart_maximized .Station_Topbar {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

.header_margin_right{
    left: 38px;
}
@media	screen and (min-width:450px){
    .Station_Caption{
        text-align: center;
        margin-top: 4px;
        margin-left: 90px;
        font-size: 14px;
        width: calc(100% - 180px);
    }
    .header_margin_right{
        left: 0px;
    }
}

/* Overview_all.html */
.icons {
    color: var(--oa-control-bar-icon-text-color);
}

.pie svg {
}
.circular-chart{
    width: 16px;
    height: 16px;
    margin: 5px 0px 0px 1px;
}
.alt-circular-chart{
    width: 16px;
    height: 16px;
}
.circle {
    stroke: var(--oa-time-pie-stroke);
    fill: none;
    stroke-width: 22;
}
.inner_circle {
    stroke: var(--oa-time-pie-background);
    fill: none;
    stroke-width: 22;
}
.pie {
    width: 16px;
    height: 16px;
}

.progress {
    background: var(--oa-progress-bar-background);
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    height: 6px;
    border: 1px solid var(--oa-progress-bar-border-color);
    overflow: hidden;
}
.progress_alt {
    background: var(--oa-progress-bar-background);
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    height: 14px;
    width: 100%;
    border: 1px solid var(--oa-progress-bar-border-color);
    overflow: hidden;
}
.progress_dv {
    background: var(--dv-progress-bar-background);
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    height: 6px;
    border: 1px solid var(--oa-progress-bar-border-color);
    overflow: hidden;
}

.progress_dv_alt_bgnd .progress_dv,
.progress_dv_alt_bgnd .progress_dv_mobile {
    background: var(--global-zero-value-warning-color-bar-background);
    font-weight: bold;
}

.progress_dv_mobile {
    background: var(--dv-progress-bar-background);
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    height: 4px;
    border: 1px solid var(--oa-progress-bar-border-color);
    overflow: hidden;
}
.progressbar {
    transition: 0.3s all ease;
    background: var(--oa-progress-bar-p_ac-fill-background);
    padding: 0.25em 0em .25em 0em;
    height: 100%;
    line-height: 1em;
}
.progressbar_p_ac {
    transition: 0.3s all ease;
    background: var(--oa-progress-bar-p_ac-fill-background);
    padding: 0.25em 0em .25em 0em;
    height: 100%;
    line-height: 1em;
}
.progressbar_radiation {
    transition: 0.3s all ease;
    background: var(--oa-progress-bar-radiation-fill-background);
    padding: 0.25em 0em .25em 0em;
    height: 100%;
    line-height: 1em;
}
.progressbar_pr {
    transition: 0.3s all ease;
    background: var(--oa-progress-bar-pr-fill-background);
    padding: 0.25em 0em .25em 0em;
    height: 100%;
    line-height: 1em;
}
.combined_progress_table{
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 19px;
}
.combined_inline_value{
    position: absolute;
    top: 1px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: 12px;
    text-align: center;
}

.flex_bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grayed {
    background: none;
    color: #a5a5a5;
}

.row1 .PLANT_NAME {
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: var(--oa-control-bar-plant-name-text-color);
}

.row1 {
    border-bottom: solid 1px;
    border-color: var(--oa-row1-border-color);
    display: flex;
    flex-direction: row;
    height: 23px;
    line-height: 20px
}

.row2
{
    height: 25px;
    line-height: 25px;
    border-bottom: solid 1px;
    border-color: var(--oa-row2-border-color);
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
}
.row3 {
    height: 30px;
    line-height: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}
.row3-middle {
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    margin-top: 0px;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    min-width: 50px;
}
.row3-alarms {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 120px;
}
.alarm_icon_div{
    width: 30px;
}
@media screen and (min-width:400px){
    .alarm_icon_div{
        width: 40px;
    }
    .row3-alarms{
        width: 160px;
    }
}

.bold_alarm{
    font-weight: bold;
}

.router_icon {
    width: 100%;
    text-align: center;
    margin-right: 2px;
    font-size: 14px;
    color: var(--oa-router-icon-color);
}

.dvstate_icon {
    margin-right: 2px;
    fill: var(--oa-router-icon-color);
    stroke: var(--oa-router-icon-color);
}

.plant_box_icon_text_color {
    color: var(--oa-plant-box-text-color);
}

.plant_icons_divider,
.inverter_icon,
.combiner_icon {
    color: var(--oa-router-icon-color);
}

.internet_status_icon {
    margin-left: 2px;
    margin-right: -2px;
    font-size: 16px;
    color: var(--oa-plant-state-ok);
}
.icon-menu {
    margin-top: 1px;
    fill: var(--oa-plant-state-ok);
    stroke: var(--oa-plant-state-ok);
}
.plant_state_error {
    color: var(--oa-plant-state-error) !important;
}
.plant_state_error .icon-menu{
    fill: var(--oa-plant-state-error) !important;
    stroke: var(--oa-plant-state-error) !important;
}
.plant_state_warning {
    color: var(--oa-plant-state-warning) !important;
}
.plant_state_warning .icon-menu{
    fill: var(--oa-plant-state-warning) !important;
    stroke: var(--oa-plant-state-warning) !important;
}
.plant_state_router_warning {
    color: var(--oa-plant-state-warning) !important;
}
.plant_state_router_warning .icon-menu{
    fill: var(--oa-plant-state-warning) !important;
    stroke: var(--oa-plant-state-warning) !important;
}
.plant_state_unknown .icon-menu{
    color: var(--oa-plant-state-unknown);
    fill: var(--oa-plant-state-unknown);
    stroke: var(--oa-plant-state-unknown);
}

.plant-state-nsm_1{
    color: var(--oa-plant-state-1-background) !important;
}
.plant-state-nsm_1 .icon-menu,
.plant-state-nsm_1.header_svg {
    fill: var(--oa-plant-state-1-background) !important;
    stroke: var(--oa-plant-state-1-background) !important;
}
.plant-state-nsm_2{
    color: var(--oa-plant-state-2-background) !important;
}
.plant-state-nsm_2 .icon-menu,
.plant-state-nsm_2.header_svg {
    fill: var(--oa-plant-state-2-background) !important;
    stroke: var(--oa-plant-state-2-background) !important;
}
.plant-state-nsm_3{
    color: var(--oa-plant-state-3-background) !important;
}
.plant-state-nsm_3 .icon-menu,
.plant-state-nsm_3.header_svg {
    fill: var(--oa-plant-state-3-background) !important;
    stroke: var(--oa-plant-state-3-background) !important;
}
.plant-state-nsm_4{
    color: var(--oa-plant-state-4-background) !important;
}
.plant-state-nsm_4 .icon-menu,
.plant-state-nsm_4.header_svg {
    fill: var(--oa-plant-state-4-background) !important;
    stroke: var(--oa-plant-state-4-background) !important;
}
.plant-state-nsm_5{
    color: var(--oa-plant-state-5-background) !important;
}
.plant-state-nsm_5 .icon-menu,
.plant-state-nsm_5.header_svg {
    fill: var(--oa-plant-state-5-background) !important;
    stroke: var(--oa-plant-state-5-background) !important;
}
.plant-state-nsm_6{
    color: var(--oa-plant-state-6-background) !important;
}
.plant-state-nsm_6 .icon-menu,
.plant-state-nsm_6.header_svg {
    fill: var(--oa-plant-state-6-background) !important;
    stroke: var(--oa-plant-state-6-background) !important;
}
.plant-state-nsm_7{
    color: var(--oa-plant-state-7-background) !important;
}
.plant-state-nsm_7 .icon-menu,
.plant-state-nsm_7.header_svg {
    fill: var(--oa-plant-state-7-background) !important;
    stroke: var(--oa-plant-state-7-background) !important;
}
.plant-state-nsm_8{
    color: var(--oa-plant-state-8-background) !important;
}
.plant-state-nsm_8 .icon-menu,
.plant-state-nsm_8.header_svg {
    fill: var(--oa-plant-state-8-background) !important;
    stroke: var(--oa-plant-state-8-background) !important;
}
.plant-state-nsm_9{
    color: var(--oa-plant-state-9-background) !important;
}
.plant-state-nsm_9 .icon-menu,
.plant-state-nsm_9.header_svg {
    fill: var(--oa-plant-state-9-background) !important;
    stroke: var(--oa-plant-state-9-background) !important;
}
.plant-state-nsm_10{
    color: var(--oa-plant-state-10-background) !important;
}
.plant-state-nsm_10 .icon-menu,
.plant-state-nsm_10.header_svg {
    fill: var(--oa-plant-state-10-background) !important;
    stroke: var(--oa-plant-state-10-background) !important;
}

.Plant_Details_Panel{
    border-top: 1px solid;
    border-color: var(--oa-row2-border-color);
    background-color: var(--oa-details-panel-background);
}

.Plant_Details_Background{
    background-color: var(--oa-details-panel-background);
}

.Plant_Details_Panel .PLOT_CHART{
    background-color: var(--oa-details-panel-background);
    width: calc(100% - 100px);
    float: right;
}
.Plant_Details_Panel .PLOT_CHART_BAR{
    width: 100%;
}

@media	screen and (min-width:600px) {
    .Plant_Details_Panel .PLOT_CHART{
        width: calc(50% - 50px);
        float: none;
    }
    .Plant_Details_Panel .PLOT_CHART_BAR{
        width: calc(50% - 50px);
        float: right;
    }
}

/* Alarm Popup */
.Alarm_Container_Background{
    background: var(--alarm-container-background);
}
.Alarm_Details_Background{
    background: var(--alarm-container-details-background);
}
.selected-alarm{
    background: var(--alarm-container-selected-alarm-background) !important;
}

.svg_button_color {
    fill: var(--button-text-color) !important;
    stroke: var(--button-text-color) !important;
}
.SVG_Background{
    fill: var(--button-text-color) !important;
}
.SVG_Fill {
    fill: #fff;
}
.SVG_Stroke{
    stroke: #fff;
}

.sp_cell{
    text-align: center !important;
}

#Alarm_Popup .ui-resizable-s {
    bottom: 0px;
}

/* Overview */
.chart_panel_background{
    background: var(--default-chart-panel-background);
}
div.column{
    float:left;
    padding: 1em;
    box-sizing: border-box;
    width: 100%;
}
.card.radiation{
    height: 31em;
    display: table;
    width: 100%;
}
div.card div.graph{
    display: table-cell;
    height: 100%;
    overflow: hidden;
    vertical-align: top;
}
div.card div.pr{
    color: var(--oa-details-panel-plant-pr-color);
    white-space: nowrap;
    width: 9em;
    padding: 2em 1em 2em 2em;
    position: relative;
}
div.level{
    float: left;
    height: 100%;
    background: var(--oa-progress-bar-background);
    position: relative;
    width:2em;
    margin:0 0 0 1em;
}
div.levelbar{
    color: var(--oa-progress-bar-background);
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.pr div.legend{
    bottom: 0;
    position: absolute;
}
div.card div.pr{
    white-space: nowrap;
    width: 9em;
    padding: 2em 1em 2em 2em;
    position: relative;
}

div.pr div.scale{
    display: table;
    float: left;
    height: 100%;
    width: 3em;
    border-color: var(--oa-details-panel-plant-pr-color);
    border-style: solid;
    border-width: 0 0 1px 1px;
}
div.pr div.scale span{
    display: table-row;
    height: 16.66%;

}

div.pr div.scale span:before{
    content: "—";
}

div.level{
    float: left;
    height: 100%;
    position: relative;
    width:2em;
    margin:0 0 0 1em;
}
div.levelbar{
    background: var(--oa-details-panel-plant-pr-color);
    color: var(--oa-progress-bar-background);
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
div.card{
    padding: .5em .5em .0em .5em;
    margin: 0.5em 0 0em;
    font-size: .85em;
}

/* Config Window */
#Plant_Checklist_Table .tablesorter-header-inner{
    text-align: center;
}

.plant_nsm_config_device{
    background: var(--select-and-input-background);
}

#Plant_Prio_Container_Parent{
    padding: 10px;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#Plant_Prio_Container{
    margin-top: 5px;
    border: 1px solid;
    overflow: auto;
    flex-grow: 1
}

.Plant_Prio_Button_Container{
    padding: 5px 0px 0px 0px;
}

#New_User_Hint_Container ul,
#User_Group_Hint_Container ul{
    list-style-type: disc;
    margin-block-start: 5px;
    margin-block-end: 5px;
}

/* Device View */
.wrong_resolution_selected {
    background: var(--yellow)!important;
}

.refresh_overlay_table{
    position: relative;
}
.table_loader_overlay {
    position: absolute;
    left: 0px;
    background: var(--loader-background-color);
    border: 1px solid var(--default-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    width: calc(100% - 2px);
    z-index: 2;
}

.changed_device_view_setting{
    border: 1px dotted;
    border-color: var(--default-border-color);
    background: var(--item-selected-color);
    padding: 2px;
    margin-bottom: 1px;
}

.device_view_panel_background{
    background: var(--dv-panel-background);
    border: 1px solid var(--popup-window-border-color)!important;
}

.device_view_panel_background{
    background: var(--dv-panel-background);
    border: 1px solid var(--popup-window-border-color)!important;
}

.detail_plant{
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 0.5em;
    color: var(--dv-station-details-font-color);
    font-size: 10px;
}

.detail_plant span{
    color: var(--dv-station-details-font-color);
    margin-left: 0.4em;
}

.graph-wrap{
    width: 48%;
    float: right;
    margin: 0px 10px 10px 10px;
    background-color: var(--dv-chart-background);
    border-color: var(--dv-chart-border-color) !important;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    position: relative;
}

.device_view_legend_background{
    background-color: var(--dv-chart-background);
    border-color: var(--popup-window-border-color)!important;
}

.chart_maximized {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    margin: 0px;
    border: 1px solid var(--default-border-color);
    z-index: 5 !important;
}

.configure_pdc_label{
    display: flex;
}

.ERROR_PRIO_WARNING {
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    border-left: 1px dotted;
    border-right: 1px dotted;
    border-color: var(--global-error-prio-10)
}

.alarm_td{
    padding: 4px;
}

.table_wrapper_div{
    margin-bottom: 5px;
    width: 100%
}

.no_node_highlight .fancytree-selected:not(:hover){
    background-color: initial!important;
    border-width: 0px!important;
}

.plant_configuration_view_container{
    margin-bottom: -10px;
}

.checklist_check_entry {
    display: flex;
    flex: 1 1 0px;
    justify-content: space-between;
}

.flex_item_right{
    display: flex;
    justify-content: flex-end;
}

.plotStateLabelOverlay {
    position: absolute;
    top: 30px;
    left: 0px;
    background: hsla(213, 40%, 87%, 0.75);
    height: calc(100% - 89px);
    width: calc(100% - 2px);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--default-border-color);
}

.stickyPlotWindow{
    position: sticky;
    top: 0;
}

.deviceviewChartCheckbox{
    margin-right: 5px;
    width: 16px;
}

/* Switch View */
.popup_chart{
    background: var(--dv-chart-background);
}


/* Alarms View */
ul, #Error_Occurrence_List_View {
    list-style-type: none;
}
#Error_Occurrence_List_View {
    margin: 5px;
    padding: 0;
}
.Tree_Caret {
    cursor: pointer;
    user-select: none;
    font-weight: bold;
}
.Tree_Caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
}
.Tree_Caret_Down::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}
.Tree_Item_Nested {
    display: none;
}
.Tree_Item_Active {
    display: block;
    margin-bottom: 2px;
}
.Tree_Item_Active:hover {

}
.clickable_date {
    text-decoration: underline;
}.clickable_date:hover {
    background: var(--item-selected-color) !important;
    color: var(--item-selected-text-color) !important;
}

#Alarm_Details_Container{
    padding: 0px 10px 0px 10px;
}

.chart_refresh_counter_label{
    text-align: right;
    width: calc(100% - 15px);
    margin-top: -5px;
}

/* Charts */
.chart_td{
    width: initial;
    padding: 0px 2px 0px 2px !important;
}

.main_data_tracks .unittd{
    position: relative;
}
.main_data_tracks select.disabledChartTd{
    min-width: 150px;
    color: transparent;
}
.autoformatDisabled{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: var(--disabled-select-overlay-background);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    cursor: not-allowed;
    font-weight: bold;
    color: var(--color_gray);
}
.station-device-hovered-color .autoformatDisabled{
    background: var(--item-selected-color);
}

.Date_And_Time_Info_Parent{
    border-width: 1px;
    border-style: solid;
    border-color: var(--button-border-color);
    background: var(--button-background-webkit);
    color: var(--select-text-color);
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.Date_And_Time_Info{
}

.chart_button.active{
    background: var(--active-button-background-color);
    opacity: 1;
}
.datapoints_button.active{
    background: var(--automatic-button-background-color);
    opacity: 1;
}
.datapoints_button.automatic{
    background: var(--active-button-background-color);
    opacity: 1;
}

.chart_mobile_page{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}
.mobile_chart_page_container {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    color: black;
    font-size: 8px;
    z-index: 3;
    display: flex;
    justify-content: center;
}
#mobile_container_page1{
    bottom: 39px;
}
#mobile_container_page2{
    bottom: 40px;
}
#mobile_container_page3{
    bottom: 23px;
}
.mobile_chart_page_container .mobile_chart_button {
    flex-grow: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 40px;
}
.mobile_chart_page_container .mobile_chart_button.noborder {
    border-width: 1px 0px 1px 0px;
}


/* New Switch View */
.smallHeadlineButton{
    font-size: 10px !important;
    width: 25px !important;
    height: 30px;
    font-size: 1.45em;
}
.smallHeadlineButton.borderRight{
    border-width: 0px 1px 0px 0px;
    border-style: solid;
}
.smallHeadlineButton.borderLeft{
    border-width: 0px 0px 0px 1px;
    border-style: solid;
}
#Dashboard_Timepicker_Control{
    border: 1px solid var(--select-and-input-border-color);
    height: 30px;
}
#Dashboard_Timepicker_Input{
    border: 0px solid;
    height: 30px;
    margin-bottom: 0px;
    width: 75px;
    padding: 3px 3px 3px 3px
}

#Dashboard_Date_Picker_Control{
    height: 30px;
}
#Dashboard_Date_Picker_Input,
#BOX_Chart_Date_Picker_Input {
    display: none;
}

#Dashboard_Date_Picker_Control,
#BOX_Chart_Date_Picker {
    width: 32px;
}

@media screen and (min-width: 800px) {
    .smallHeadlineButton {
        font-size: 16px !important;
        width: 49px !important;
    }
    #Dashboard_Date_Picker_Control {
        width: initial;
    }
    #BOX_Chart_Date_Picker {
        width: calc(100% - 297px);
    }
    #Dashboard_Date_Picker_Input,
    #BOX_Chart_Date_Picker_Input {
        display: block;
    }
}

.box_error_value    {
    animation: blinkingBox 0.75s infinite;
}
@keyframes blinkingBox{
    0% {background: red;}
    50% {background: transparent;}
    100% {background: red;}
}

#view_area {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#main_window_area{
    position: relative;
}
#main_window_area.mobileMode{
    position: relative;
    height: calc(100% - 5px);
}

#Picker_Container{
    white-space: nowrap;
    position: absolute;
    right: 8px;
    top: 36px;
}
#Picker_Container.mobileMode{
    white-space: nowrap;
    position: initial;
    margin: 4px 8px 0px 8px;
}

#Tab_Button_Container {
    margin: 8px 8px 0px 8px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    height: 36px;
}
#Tab_Button_Container.mobileMode {
    margin: 2px 8px 0px 8px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    height: 38px;
    width: calc(100% - 16px);
}
#Tab_Button_Container button *:first-child{
    margin-left: 0px
}

#Tab_Panel {
    margin: -1px 8px 8px 8px;
    width: calc(100% - 17px);
    height: calc(100% - 83px);
    border: 1px solid;
    overflow: auto;
}

#Tab_Panel.mobileMode {
    margin: -1px 8px 8px 8px;
    width: calc(100% - 17px);
    height: calc(100% - 110px);
    border: 1px solid;
    overflow: auto;
}
#Tab_Panel.mobileMode.date_toggled {
    height: calc(100% - 40px);
}

#SHOW_DATE_CONTROLS_BUTTON{
    position: absolute;
    right: 3px;
    top: 2px;
}

.panel_edit_view{
    position: absolute;
    left: 10px;
    top: -15px;
}
.panel_delete_view{
    position: absolute;
    right: 10px;
    top: -15px;
}

.dashboard_change_view_button{
    height: 38px;
    top: 0px;
    bottom: 0px;
}

.dashboard_view_container{
    position: relative;
}

.dashboard_switch_svg{
    height: 100%;
    width: 100%;
    position: absolute;
}

.dashboard_legend_item {
    display: flex;
    flex: 0 0 50%;
    gap: 10px;
    font-size: 12px;
    justify-content: space-between;
    flex-wrap: wrap
}

.dashboard_aspect_ratio_image {
    object-fit: contain
}

.preview_image_container {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    flex-grow: 1;
    gap: 10px;
    justify-content: space-evenly;
    align-items: flex-start;
    align-content: flex-start;
    padding: 5px;
    border: 1px solid var(--default-border-color);
}

.image_preview_controls{
    display: flex;
    justify-content: space-between;
}
.image_preview_controls_sub{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.image_preview_buttons{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5px;
    margin-bottom: 5px;
}
.preview_image{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 5px;
    flex-grow: 1;
    border: 1px dotted;
    border-color: var(--default-border-color);
    cursor: pointer;
    position: relative;
}
.preview_image.selected .preview_image_hover_overlay{
    opacity: 0.8;
}
.preview_image .hideNonSelected {
    display: none;
}
.preview_image.selected .hideNonSelected {
    display: flex;
}
.preview_image_scale_overlay {
    flex-direction: row;
    gap: 5px;
    background: var(--default-panel-background);
    padding: 2px 5px 2px 5px;
    border: 1px solid var(--default-border-color);
    z-index: 9;
    margin-top: 5px;
}
.no_margin_input {
    padding: initial;
    margin: initial;
    width: initial;
}

.preview_image_hover_overlay {
    background: var(--item-selected-color);
    opacity: 0;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 9;
}
.preview_image_hover_overlay:hover{
    opacity: 0.3;
}

.smallPreviewImage{
    width: 233px;
}
.mediumPreviewImage{
    width: 360px;
}
.largePreviewImage{
    width: 745px;
}

.data_track_box{
    position: absolute;
    top: 0px;
    left: 0px;
}
.data_track_box .ui-resizable-se {
    right: -3px!important;
    bottom: -3px!important;
}

.box_settings_inner{
    margin-top: 28px;
    padding: 8px 5px 10px 10px;
    height: calc(100% - 35px);
    display: flex;
    flex-direction: column;
    align-content: space-between;
}

#box_settings_container{
    overflow: auto;
    margin-right: 5px;
    flex-grow: 1;
}

.box_settings_header{
    margin: 0px 5px 5px 0px;
    display: flex;
    justify-content: space-between;
}
.box_settings_footer{
    margin: 5px 5px 0px 0px;
    display: flex;
    justify-content: space-between;
}

.settings_element_left{
    display: inline-block;
    width: 49%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings_element_right{
    display: inline-block;
    width: 49%;
    float: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings_element_caption{
    margin-top: 5px;
}
.switch_view_checkbox{
    width: auto;
    margin-right: 5px;
}
.switch_view_checkbox_label{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.config_section_header{
    font-weight: bold;
}

.data_track_box{
    z-index: 1;
}

.data_track_box .font_bold{
    font-weight: bold;
}
.data_track_box .font_italic{
    font-style: italic;
}
.data_track_box .font_underline{
    text-decoration: underline;
}
.box_element.flex_top{
    align-items: flex-start;
}
.box_element.flex_center{
    align-items: center;
}
.box_element.flex_stretch{
    align-items: stretch
}
.box_element.flex_bottom{
    align-items: flex-end;
}

.data_track_box .align_left{
    justify-content: flex-start;
    text-align: left;
}
.data_track_box .align_right{
    justify-content: flex-end;
    text-align: right;
}
.data_track_box .align_center{
    justify-content: center;
    text-align: center;
}

.data_track_box_inner{
    display: flex;
}
.data_track_box_inner.flex_wrap{
    flex-wrap: wrap;
}
.data_track_box_inner.flex_space{
    justify-content: space-between;
}
.data_track_box_inner.flex_row{
    flex-direction: row;
}
.data_track_box_inner.flex_column{
    flex-direction: column;
}

.data_track_box_inner .flex_grow_0{
    flex-grow: 0;
}
.data_track_box_inner .flex_grow_1{
    flex-grow: 1;
}
.data_track_box_inner .flex_grow_2{
    flex-grow: 2;
}

.progress_bar_and_value_container{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%
}
.box_progress_bar{
    border-width: 1px;
    border-style: solid;
    border-color: var(--oa-progress-bar-border-color);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    padding: 2px;
    position: relative;
    background: var(--dv-progress-bar-background);
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
}
.box_progress_bar_no_text{
    border-width: 1px;
    border-style: solid;
    border-color: var(--oa-progress-bar-border-color);
    position: relative;
    background: var(--dv-progress-bar-background);
    box-shadow: none;
    border-radius: 0;
    flex-grow: 2;
    height: 100%;
    overflow: hidden;
}

.box_progress_bar_progress {
    transition: 0.3s all ease;
    z-index: 0;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    text-align: left;
}

.box_progress_bar_value {
    z-index: 1;
}
.box_progress_bar_value_no_bar {
    flex-grow: 1;
}
.box_progress_bar_value_no_bar_vertical {
    flex-grow: 1;
    display: flex;
    justify-content: inherit;
    align-items: center;
}

.box_progress_bar_step_color{
    width: 1%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

.box_progress_indicator{
    position: absolute;
    bottom: -3px;
    z-index: 2;
    font-weight: bold !important;
}
.box_progress_value_indicator{
    position: absolute;
    top: -2px;
    z-index: 2;
    font-weight: bold !important;
}

.box_element{
    display: flex;
}

.ui-accordion .ui-accordion-content{
    padding: 8px;
}

.error_group_id_parent.ui-accordion-content{
    padding: 0px;
}

.data_track_box_back_color{
    position: absolute;
    z-index: 0;
}

.station-device-hovered-color .data_track_box_inner {
    background: var(--item-selected-color) !important;
    opacity: 0.7;
}
.station-device-hovered-color .data_track_box_inner div {
    opacity: 1;
}

.settings_flex_box{
    display: flex;
    justify-content: space-between
}
.settings_flex_box.linebreak{
    flex-direction: column;
}

.settings_flex_box input{
    margin-right: 5px;
	min-width: 0; /* Firefox Workaround */
}
.settings_flex_box input:last-child{
    margin-right: 0px;
}

.chroma_range_bar{
    padding: 5px;
    height: 16px;
    position: relative;
}

.box_progress_bar_progress{
    border: 1px;
    border-style: solid;
    border-color: var(--default-border-color);
    width: calc(100% - 2px);
}



/* Overview All NEW */
.investor_panel_target {
    position: relative;
    display: block !important;
    overflow-y: auto;
    margin: 10px 5px 0px 5px;
    height: 420px;
    width: calc(100% - 10px);
}

#Portfolio_Main_Container {
    position: relative;
    overflow: hidden;
    margin: 5px 5px 0px 5px;
    height: 200px;
    width: calc(100% - 10px);
}

#Map_Container{
    position: relative;
    margin: 10px 5px 0px 5px;
    height: 330px;
    width: calc(100% - 10px);
    overflow: hidden;
}

#Profit_Container{
    position: relative;
    margin: 10px 5px 0px 5px;
    min-height: 400px;
    width: calc(100% - 10px);
    overflow: hidden;
}

@media screen and (min-width: 900px) and (min-height: 720px){
    .investor_panel_target {
        position: absolute;
        top: 210px;
        left: 410px;
        right: 5px;
        bottom: 5px;
        height: initial;
        width: initial;
        margin: 0px;
    }

    #Portfolio_Main_Container {
        position: absolute;
        top: 5px;
        left: 410px;
        right: 5px;
        height: 200px;
        width: initial;
        margin: 0px;
    }

    #Map_Container {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        margin: 0px;
        width: 400px;
    }

    #Profit_Container{
        position: absolute;
        top: 340px;
        left: 5px;
        bottom: 5px;
        width: 400px;
        height: initial;
        min-height: initial;
        margin: 0px;
    }
}

#Profit_Container.maximized,
#Map_Container.maximized{
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: initial;
    height: initial;
    z-index: 1;
}

#Portfolio_Main_Container.maximized,
#content_target.maximized{
    left: 5px;
}

#Map_Container .googleMap {
    margin-top: 28px;
    height: 300px;
    min-width: 400px;
    width: 100%;
}

.Profit_Inner_Container {
    margin: 33px 5px 0px 5px;
    height: calc(100% - 40px);
}

.Portfolio_Main_Container_Inner_Wrapper {
    overflow: auto;
    position: absolute;
    top: 28px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}
.Portfolio_Main_Container_Inner_Container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
#ALL_PR_GAUGE{
    width: 80px;
    height: 70px;
}
.Portfolio_Info_Container{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

@media screen and (min-width: 700px) {
    .Portfolio_Main_Container_Inner_Container {
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #ALL_PR_GAUGE{
        width: 200px;
        height: 140px;
        margin: 0 auto;
    }
    .Portfolio_Info_Container{
        flex-grow: 0;
    }
}

.Portfolio_Info_Label {
    font-weight: bold;
    font-size: 18px;
    width: 100%;
    text-align: center;
}

#PROFIT_SELECT_PARENT,
#PROFIT_SELECT_GROUP_MODE_PARENT,
#PLANT_CURRENCIES_PARENT {
    width: 100%;
    height: 32px;
    position: relative;
    margin-bottom: 5px;
}

#PROFIT_SELECT,
#PROFIT_SELECT_GROUP_MODE,
#PLANT_CURRENCIES {
    width: 100%;
    height: 32px;
    padding: 3px 15px 3px 3px;
}

#portfolio-main-content{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#PROFIT_PIE{
    text-align: center;
    z-index: 10;
}

#profitwarning {
    color: red;
    white-space: normal;
}

#PROFIT_TOTAL{
    margin-top: 10px;
    font-size: 24px;
}

.investor_plants{
    overflow-y: auto;
    height: calc(100% - 29px);
    margin-top: 29px;
}

.plant_box_panel .PLANT_NAME
{
    flex-grow: 1;
    font-size: 10px;
    font-weight: bold;
    padding-left: .5em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
@media screen and (min-width: 350px) {
    .plant_box_panel .PLANT_NAME {
        font-size: 12px;
    }
}

.plant_group_top_bar{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.plant_group_top_bar_search_hidden{
    outline: 2px dotted red!important;
}
.button_toggle_group_plants {
    margin-left: 5px;
    height: 16px;
    width: 30px;
}
.button_hide_group_plants {
    margin-right: 5px;
    height: 16px;
    width: 30px;
    text-align: right;
}
.group_name {
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}
.table_group_name {
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    margin: 5px;
}
.table_group_name_alt {
    font-weight: bold;
    font-size: 0.875rem;
    margin: 3px 1px 1px 7px;
    display: inline-block;
}
.call_table_config_button{
    margin: 2px 7px 2px 0px !important;
}
.alt_chart_button{
    margin: -8px 5px 5px 0px;
}
.group_hidden{
    margin-bottom: 3px;
}
.group_target{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.inner_caret{
    vertical-align: top;
}

.highlighted_plant_group {
    border: 1px solid var(--plant-group-border-color);
    background-color: var(--plant-group-background);
    color: var(--plant-group-text-color);
}

.outer_plant_box{
    vertical-align:top;
}

.plant_box_panel {
    height: auto;
    margin: 5px;
    background: var(--oa-plant-box-background);
    color: var(--oa-plant-box-text-color);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    position: relative;
    min-height: 80px;
}

.plant_box_panel_no_details{
    height: 80px;
}

.quick_link_icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--oa-control-bar-icon-text-color);
    margin: 2px 0px 2px 0px;
}

.table_quick_link_icons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: var(--oa-control-bar-icon-text-color);
    margin: 0px 5px 0px 5px;
}
.table_quick_link_icons_alt {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--oa-control-bar-icon-text-color);
}

.anti_theft_status_icon {
    margin: 6px 0px 0px 10px;
    width: 14px;
    height: 20px;
}
.snow_mode_status_icon {
    margin: 5px 0px 0px 6px;
    width: 18px;
    height: 20px;
    color: #001dff
}
.maintenance_mode_status_icon {
    margin: 5px 0px 0px 6px;
    width: 18px;
    height: 20px;
    color: #001dff
}
.no_alarm_tool_running {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 4px;
    color: black;
    opacity: 0.5;
    font-weight: bold
}
.overview_table_spacer{
    display: inline-block;
    height: 20px;
    width: 23px;
}
.no_alarm_tool_running_table {
    left: 8px;
    top: 10px;
}

.timeindex{
    margin-left: 2px;
}

.LAST_DATA, .LAST_DATA_ROUTER {
    font-size: 10px;
    margin: 5px 0px 0px 2px;
}

.plant_data_values {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-end;
}
.plant_data_values_portfolio {
    display: flex;
    flex-direction: column;
    flex: 1 1 130px;
    min-height: 140px;
    padding-right: 10px;
}
.plant_data_values_portfolio.left_padding{
    padding-left: 10px;
}
.plant_data_values_portfolio.relative{
    position: relative;
}
.plant_data_values_portfolio.top{
    justify-content: flex-start;
}
.plant_data_values_bars{
    margin-bottom: 2px;
}
.plant_data_values_portfolio_no_resize{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 140px;
}

.plant-state{
    width: 90px;
    display: flex;
    flex-direction: row
}

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

.internet_status_icon_fa{
    margin-top: 2px;
}

.internet_status_divider{
    margin: 0px -2px 0px -2px;
}

.nsm_icon{
    margin-right: 5px;
    min-width: 28px;
}
.dvstatebox{
    margin-right: 5px
}
.pingtogooglebox{
    margin-right: 5px
}
.levelgsmbox{
    margin-right: 5px
}
.pingtogoogle{
    margin-left: 2px;
}
.levelgsm{
    margin-left: 2px;
}

.additional_labels{

}
@media screen and (min-width:400px){
    .additional_labels{

    }
}

.plant_chart_container{
    min-width: 100px;
    min-height: 180px;
    display: inline-block;
}

.portfolio_plant_charts_container .plant_chart_container{
    min-width: 130px;
    min-height: 111px;
    max-width: 243px;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: var(--oa-details-panel-graph-grid-border-color);
    margin: 5px;
}
.portfolio_plant_charts_container{
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
}

.portfolio_plant_charts_container .plant_chart_container{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.portfolio_plant_data_container{
    display: flex;
    flex-direction: column;
    flex: 1 1 130px;
    padding-right: 10px;
    overflow: hidden;
}

.portfolio_pr_container{
    display: flex;
    flex-direction: column;
    flex: 1 1 130px;
    overflow: hidden;
}
.PORTFOLIO_PR_GAUGE{
    width: 100%;
    height: 30px;
}

.portfolio_plant_data_row{
    display: flex;
    justify-content: space-between;
}
.portfolio_plant_data_row.centered{
    justify-content: center;
}
.portfolio_plant_data_row_alt{
    display: flex;
    justify-content: space-around;
}

.PLOT_PING_CHART_CONTAINER,
.PLOT_NSM_CHART_CONTAINER {
    display: inline-block;
    width: 100%;
}

.No_Production_Router_Chart{
    width: calc(100% - 90px);
}

.PLOT_PING_CHART_CONTAINER_INNER,
.PLOT_NSM_CHART_CONTAINER_INNER{
    margin: 0px 10px 0px 10px;
    padding-bottom: 5px;
    height: 180px;
    position: relative;
}

.router_chart_button,
.nsm_chart_button{
    float: right;
    margin-right: 5px;
}

.router_chart_loader{
    text-align: center;
    border: 1px solid;
    width: 100%;
    height: 181px;
}

.PLOT_PING_CHART,
.PLOT_NSM_CHART{
    min-width: 100px;
    min-height: 180px;
    direction: ltr;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 180px;
}

.WEBCAM_IMAGE_HOLDER{
    margin: 2px 10px 0px 10px;
    padding-bottom: 5px;
    position: relative;
}

.WEBCAM_IMAGE_CONTAINER{
    width: 100%;
    min-height: 30px;
}

.Webcam_Loader{
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0px;
    height: 30px;
    text-align: center;
}

.Webcam_Maximize_Button {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 16px;
    border: 1px solid;
    padding: 5px;
    cursor: pointer;
}

.config_link{
    text-decoration: underline;
    cursor: pointer;
}

.nsm_hint {
    border: 2px solid;
    background: var(--popup-window-background);
    padding: 4px;
    position: fixed;
    font-size: 12px;
    white-space: nowrap;
    -webkit-box-shadow: 5px 5px 10px -1px #000000;
    box-shadow: 5px 5px 10px -1px #000000;
}

#overview_temp_loading_panel {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.margin_bottom_row{
    margin-bottom: 5px;
}
.plant_info_td{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.plant_info_plots{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.flex_grow_1_200{
    flex-grow: 1;
    max-width: 200px;
    min-height: 203px;
}
.flex_grow_2{
    flex-grow: 2;
}
.plant_info_left_margin{
    margin-left: 10px;
}
.plant_info_col{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: white;
}

.plant_info_view_table{
    display: table;
}
.plant_info_view_table_row{
    display: table-row;
}
.plant_info_view_table_cell{
    display: table-cell;
    padding: 0px 7px 0px 0px;
}
.LAST_DATE_TD,
.LAST_TIME_TD,
.LAST_DATE_ROUTER_TD,
.LAST_TIME_ROUTER_TD{
    font-weight: normal;
}

.plant_info_column{
    border-top: 1px solid !important;
    border-color: var(--table-body-border-color-alt) !important;
    background: var(--table-background-color) !important;
}

.plant_info_column.bottom_border{
    border-top: 0px solid !important;
    border-bottom: 1px solid !important;
    border-color: var(--table-body-border-color-alt) !important;
}

.button_hide_group_plants_alt{
    height: 16px;
    width: 16px;
    text-align: left;
    margin-top: 2px;
}

#Plant_Loading_Overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 5;
}

.Table_Group_Wrapper{
    width: 100%;
    overflow: auto;
    padding-bottom: 2px;
}

#Table_Config_Window_Loader {

}

#Table_Config_Window,
#DV_Config_Window,
#Edit_Plant_Outage_Window,
#Relations_Config_Window{
    overflow: hidden;
}

#Table_Config_Window_Container,
#Edit_Plant_Outage_Container,
#DV_Config_Window_Container,
#Relations_Config_Window_Container{
    margin-top: 29px;
    height: calc(100% - 29px);
    padding: 5px 10px 10px 10px;
}

#Edit_Plant_Outage_Container{
    overflow: auto;
}

#Edit_Plant_Outage_Container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#DV_Config_Outage_Comment{
    resize: none;
    height: 100px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 5px;
}

#DV_Config_Edit_Plants_Container{
    font-weight: bold;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#DV_Plants_Container{
    border: 1px solid;
    padding: 10px;
    overflow: auto;
    height: calc(100% - 36px);
    margin: 5px 0px 5px 0px;
    min-width: 50%;
}

.DV_Pant_Parent_Container{
    margin-bottom: 20px;
}
.DV_Pant_Parent_Container.no_bottom_margin{
    margin-bottom: 0px;
}
.DV_Container_First_Row{
    color: var(--table-header-font-color);
    background: var(--table-header-background-alt);
    border-color: var(--table-header-border-color-alt);
    display: flex;
    height: 35px;
    align-items: center;
    padding: 0px 10px 0px 10px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
}
.DV_Container_Second_Row{
    color: var(--table-header-font-color);
    border-color: var(--table-header-border-color-alt);
    display: flex;
    min-height: 35px;
    align-items: center;
    padding: 5px 10px 5px 10px;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.round_row{

}
.DV_Container_Third_Row{
    color: var(--table-header-font-color);
    background: var(--table-header-background-alt);
    border-color: var(--table-header-border-color-alt);
    min-height: 25px;
    align-items: center;
    padding: 5px 10px 5px 10px;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
}

.DV_Config_Toggle_Button{
    margin: 10px 0px 10px 0px !important;
}

.DV_Config_Toggle_Button{
    width: 100%;
    margin-bottom: 5px;
}
#DV_Config_Toggle_Button_Span{
    margin-right: 5px;
}

.DV_Config_Other_Plants_Container{
}

.DV_Info_Column_Container{
    min-width: 30%;
    display: flex;
    flex-direction: column;
}

.DV_Info_Container{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.DV_Config_Datepicker_Container{
    display: flex;
    flex-wrap: wrap;
}

.DV_Config_UL{
    list-style-type: disc;
}

.Plant_Assignment{
    width: 200px;
    display: flex;
}

.DV_Plant_Label{
    font-weight: bold;
    flex-grow: 1;
    cursor: pointer;
}
.DV_Plant_Label_Not_Bold{
    flex-grow: 1;
    cursor: pointer;
}
.DV_Info_Label{
    font-weight: bold;
    margin-right: 5px;
}

.UL_Scroll_Parent{
    height: calc(100% - 30px);
    overflow: auto;
    border: 1px solid;
}

.DV_Config_Table_Parent{
    overflow: auto;
}

#Table_Config_Parent_Container,
#DV_Config_Parent_Container{
    overflow: auto;
}

.scroll_margin_small{
    padding-right: 30px !important;
}

.autosize_table_parent{
    width: 100% !important;
    height: 50%;
    margin-right: 0px;
}
@media screen and (min-width: 420px) {
    .autosize_table_parent{
        width: calc(50% - 5px) !important;
        height: 100%;
        margin-right: initial;
    }
}

#Table_Config_Hint_Container{
    display: flex;
    justify-content: space-between;
}

#Table_Config,
#Avail_Headers,
#Plant_Prio_Select{
    padding: 0px 5px 5px 5px;
    list-style-type: none;
    overflow: auto;
    margin: 0px;
    height: calc(100% - 5px);
}

.header_obj{
    margin-top: 5px;
    padding: 0px 5px 0px 5px;
    height: 40px;
    overflow: hidden;
    border: 1px solid;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: var(--table-body-odd-row-background-alt2);
    border-color: var(--table-header-border-color-alt);
    font-weight: bold;
}
.header_obj:hover{
    background: var(--item-selected-color) !important;
    color: var(--item-selected-text-color) !important;
}
.table_option_element{
    text-align: left;
    width: 66%;
}
.table_option_element_2{
    display: flex;
    justify-content: flex-end;
    width: 33%;
}
.table_option_element_icon{
    margin: 3px 5px 0px 0px;
}
.table_option_element_svg{
    margin: 2px 5px 0px 0px;
}

.trigger_warning_icon{
    margin-left: 5px;
    font-size: 16px !important;
    color: red;
}
.blink{
    animation:blinkingText 0.75s infinite;
}
@keyframes blinkingText{
    0%{ color: red;}
    50% {color: transparent;}
    100% {color: red;}
}

/* error configuration */
#mail_groups_wrap {
    padding: 10px;
    border: 1px solid;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}

.configured_mail {
    color: var(--disabled-input-background);
}
.configured_mail.active {
    color: var(--main-text-color);
}

.HINT_LABEL_CONTAINER {
    color: var(--popup-window-text-color);
}

.mail_groups_outer_container{
    background: var(--popup-window-background);
    border: 1px solid var(--popup-window-border-color)!important;
    position: relative;
    margin-bottom: 10px;
}
.mail_groups_inner_container{
    margin-top: 28px;
    padding: 10px 0px 10px 10px;
    display: flex;
    flex-wrap: wrap;
    min-height: 100px;
}

.mail_controls{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.mail_control_element {
    flex: 1 1 0px;
    min-width: calc(100% - 10px);
    margin-right: 10px;
}
.mail_controls_button{
    margin-bottom: 5px!important;
    width: 100%;
}
@media	screen and (min-width: 600px){
    .mail_control_element {
        max-width: 300px;
        min-width: initial;
    }
}

.error_group_check_input{
    display: flex;
    align-items: center;
}
.error_group_check_input > input{
    margin: 0px 5px 0px 0px;
    width: 15px;
}

.flex_size_1_1_0{
    flex: 1 1 0px;
}

.popup_background{
    background: var(--popup-window-topbar-background) !important;
    color: var(--popup-window-topbar-text-color) !important;
}
.box_caption_container.popup_background{
    font-weight: bold !important;
}

.error_group_name_label{
    font-weight: bold;
    color: var(--main-text-color);
}

.HINT_LABEL_CONTAINER{
    white-space: normal;
}

.all_tree_container{
    flex: 1 1 0px;
    overflow: hidden;
}

.error_check_fancy_tree,
.device_relation_parent{
    height: 100%;
    width: calc(50% - 5px);
    border-width: 0px 1px 0px 1px;
    border-style: solid;
    border-color: var(--default-border-color);
    display: inline-block;
    position: relative
}

.error_plant_fancy_tree,
.device_relation_child{
    height: 100%;
    width: calc(50% - 5px);
    border-width: 0px 1px 0px 1px;
    border-style: solid;
    border-color: var(--default-border-color);
    display: inline-block;
    position: relative;
    float: right
}
.device_relation_parent,
.device_relation_child{
    border-width: 1px 1px 1px 1px;
    height: calc(100% - 5px);
}

.error_group_id_parent{
    font-size: 14px;
    font-family: var(--main-font-family-name);
    line-height: inherit;
}

.error_group_id_parent .odd_even_div{
    padding: 8px;
    color: var(--popup-window-text-color);
}

.error_group_id_parent .odd_even_div:nth-of-type(even) {
    background-color: var(--table-body-odd-row-background);
    border-color: var(--table-body-border-color);
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    color: var(--popup-window-text-color);
}

#Edit_Error_Groups_Button{
    height: 32px;
    margin-right: 5px;
    float: right;
}
#Save_Positions_Button{
    margin-right: 10px;
    float: right;
}
#Save_Connections_Button{
    margin-right: 10px;
    float: right;
}
#Remove_Connections_Button{
    margin-right: 10px;
    float: right;
}

.error_group_maximized{
    border: 1px solid var(--popup-window-border-color)!important;
}

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

.Relations_Tree_Parent {
    flex-grow: 1;
}

.Relations_Button_Parent,
.Relations_Label_Parent{
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;
}
.Relations_Button_Parent > button{
    width: calc(50% - 5px);
}
.Relations_Label_Parent > div{
    width: calc(50% - 5px);
}

.relations_hint{
    margin-bottom: 5px;
}

#Device_Parent_Label,
#Device_Children_Label{
    font-weight: bold;
}

.Relations_Input_Parent{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
}

#Relations_Select_Dialog {
    max-height: 95%;
    width: 250px;
    left: 20px;
    top: 50px;
    border: 1px solid;
    overflow: hidden
}

.Relations_Select_Dialog_Container {
    padding: 0px 10px 2px 10px;
    font-size: 12px;
    overflow: auto;
    height: calc(100% - 32px);
    margin-top: 32px;
}

.Inner_Color_Container.notconnectedbox {
    background: #656565 !important;
}

/* Device assignment */
.main_device_assignment_window {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 4px;
}

#main_device_assignment_container{
    margin-top: 30px;
    height: calc(100% - 30px);
}

#Available_Devices_Container,
#New_Devices_Container{
    padding: 5px;
}

#device_info_container{
    margin-bottom: 8px;
}

.device_assignment_table{
    width: 100%;
    margin-bottom: 8px;
}

.device_assignment_table td{
    text-align: left;
}

#ND_Top_Container{
    margin-bottom: 8px;
    height: 88px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#Device_Mappings_Container {
    height: 51px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}


/* AVAILABILITY_VIEW */
.main_device_avail_window {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 4px;
}

#Avail_Main_Container{
    margin-top: 30px;
    height: calc(100% - 30px);
}

#Available_Devices_Container {
    padding: 5px;
}

.tree_allow_checkbox span.fancytree-checkbox{
    display: inline-block;
    margin-right: 3px;
}

#Main_Plant_Data_Container{
    height: 100%;
}

#Main_Plot {
    position: absolute;
    top: 42px;
    left: 10px;
    bottom: 10px;
    right: 55px;
}

#Plant_Data_Select_Controls,
#Plant_Chart_Select_Controls{
    display: flex;
    flex-wrap: wrap;
}

.solarex_input_control {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.solarex_input_control input{
    margin: 0px;
    cursor: pointer;
}
.solarex_input_control label{
    cursor: pointer;
}

#MIN_RADIATION_VALUE{
    width: 65px;
}

#Avail_Main_Plot{
    position: absolute;
    top: 42px;
    left: 10px;
    bottom: 10px;
    right: 205px;
}
#Legend_Container{
    display: inline-block;
    position: absolute;
    right: 0px;
    width: 190px;
    overflow: auto;
    top: 42px;
    bottom: 0px;
}


/* Dynamic modal confirm dialog */
.solarex_confirm_dialog_container{
    position: relative;
    overflow: hidden;
    cursor: default;
    background: var(--popup-window-background);
    border: 1px solid var(--popup-window-border-color)!important;
    overflow: auto;
    z-index: 15;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .7);
}
.solarex_confirm_dialog{
    cursor: default;
    display: flex;
    justify-content: center;
    align-items: center;
}
.solarex_resizeable_confirm_dialog{
    cursor: default;
}
.solarex_resizeable_confirm_dialog .solarex_confirm_dialog_container{
    overflow: hidden;
}
.solarex_confirm_dialog_content {
    margin-top: 28px;
    position: relative;
    padding: 5px 10px 10px 10px;
}
.solarex_confirm_dialog_modal_buttons{
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.solarex_confirm_dialog_content.full_content {
    height: calc(100% - 43px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.solarex_confirm_dialog_content_maxed {
    height: calc(100% - 43px);
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
}
.solarex_confirm_dialog_label{
    margin-bottom: 10px;
    color: var(--main-text-color);
}
.solarex_confirm_dialog_maxed_content_container{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    margin-bottom: 10px;
}
.solarex_confirm_dialog_label_no_margin{
    margin-bottom: 0px;
}
.solarex_confirm_dialog_input_label{
    margin-bottom: 0px;
}
.solarex_confirm_dialog_input{
    width: 100%;
}
.solarex_confirm_dialog_buttons{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 1;
}
.solarex_confirm_dialog_buttons button{
    margin-right: 5px;
    padding: .25em 1em;
    font-weight: normal;
    border: 1px solid var(--button-border-color);
    color: var(--button-text-color);
    background: var(--button-background-fallback);
    background: var(--button-background-moz);
    background: var(--button-background-webkit);
}
.solarex_confirm_dialog_buttons button:last-child{
    margin-right: 0px;
}

.solarex_modal_loader_info_container {
    width: 100%;
    margin-top: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: baseline;
}
.solarex_wizard_loader_info_container {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: baseline;
}

.solarex_modal_loader_window {
    position: relative;
    overflow: hidden;
}

.solarex_modal_loader_progress_bar_container{
    border: 1px solid;
    width: calc(100% - 12px);
    height: 5px;
    margin: 5px 0px 5px 5px;
    position: relative;
}
.solarex_wizzard_loader_progress_bar_container{
    border: 1px solid;
    height: 10px;
    position: relative;
}
.solarex_wizzard_loader_progress_bar_container_big{
    border: 1px solid;
    height: 15px;
    position: relative;
}

.solarex_modal_loader_cancel_button {
    height: 26px;
    width: calc(100% - 10px);
    margin: 0px 5px 0px 5px !important;
}

.solarex_modal_loader_progress_bar {
    width: 0%;
    background: var(--progress-loader-background);
    position: absolute;
    top: 0px;
    z-index: 5;
}


/* Auto consumption view */
.autoconso_view_panel{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--default-border-color);
}

.autoconso_top_row {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-bottom: 1px solid;
}

.autoconso_row1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.autoconso_row2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-grow: 1;
}
.autoconso_row3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.conso_border_right{
    border-right: 1px solid;
}
.conso_grow{
    flex-grow: 1;
}

.autoconso_label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-grow: 1;
    margin: 5px;
}
.autoconso_label_no_margin {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1;
}
.autoconso_label_2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 5px;
    text-align: center;
}

.autoconso_table_row{
    display: table-row;
}
.autoconso_table_cell{
    display: table-cell;
}

.autoconso_tariff_container{
    display: table;
    border-collapse: separate;
    border-spacing: 3px;
}
.padding-r10{
    padding-right: 10px;
}

.margin-r5{
    margin-right: 5px;
}
.margin-r10{
    margin-right: 10px;
}
.margin-t5{
    margin-top: 5px;
}

.autoconso_middle_row{
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}

.autoconso_bottom_row{
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    border-top: 1px solid;
}

.autoconso_chart_spinner{
    text-align: center;
    width: 100%;
    font-size: 25px;
    position: absolute;
    top: 50%;
}

.soleco_image{
    width: 80px;
}

.autoconso_canvas_panel{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.image_value_container{
    display: flex;
}

.flex_eq_size{
    flex: 1 1 0px;
}

.autoconso_image_container{
    display: flex;
    justify-content: flex-end;
    max-width: 170px;
}

.autoconso_margin_top_10{
    margin-top: 10px;
}

.autoconso_flex-start{
    justify-content: flex-start;
}
.autoconso_flex-end{
    justify-content: flex-end;
}
.autoconso_flex-center{
    justify-content: center;
}
.autoconso_flex-space-around{
    justify-content: space-around;
}

.autoconso_flex_container{
    display: flex;
}

.autoconso_arrow{
    font-size: 30px!important;
}

#autoconso_plot_container{
    height: calc(100% - 80px);
    min-width: 200px;
}

.auto_conso_no_data_overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: gray;
    opacity: 0.5;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-weight: bold;
}
.autoconso_no_transparent{
    background: initial;
    opacity: 1;
}
.no_data_label{
    background: black;
    padding: 10px;
    opacity: 1;
    color: white;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.no_data_button{
    margin-top: 5px!important;
}

.autoconso_led{
    height: 32px;
}

.autoconso_plot_parent {
    min-height: 250px;
    height: calc(100% - 10px);
    overflow: hidden;
    padding: 5px;
    position: relative;
}

#autoconso_button_container{
    margin-bottom: 10px;
}
#autoconso_legend{
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#autoconso_legend table{
    border-width: 0px;
}
#autoconso_legend td{
    border-width: 0px;
}

#autoconso_button_container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.auto_conso_interval_button{
    height: 25px;
    margin-right: 5px!important;
}

.auto_conso_date_picker{
    display: flex;
    justify-content: flex-start;
    flex-grow: 1;
    margin-top: 5px;
}
@media	screen and (min-width: 700px){
    .auto_conso_date_picker {
        margin-top: 0px;
        justify-content: flex-end;
    }
}

.autoconso_image_row_1{
    flex-direction: column;
}
.image_value_container{
    width: 100%;
}
.autoconso_image_container{
    justify-content: center;
    margin-left: 20px;
}
.autoconso_label_2{
    text-align: left;
}
.autoconso_image_label{
    flex-grow: 1;
    text-align: center;
}
.autoconso_flex_container{
    flex-wrap: wrap;
}
.autoconso_left_column{
    justify-content: space-between;
    margin-bottom: -5px;
}
.autoconso_right_column{
    justify-content: space-between;
}
.autoconso_yield_button_container{
    display: flex;
    justify-content: flex-end;
}

@media	screen and (min-width: 800px){
    .autoconso_image_row_1 {
        flex-direction: row;
    }
    .image_value_container{
        width: initial;
    }
    .autoconso_image_container{
        justify-content: flex-end;
        flex-grow: 1;
    }
    .autoconso_image_row_1{
        justify-content: space-between;
    }
    .autoconso_image_row_2{
        justify-content: center;
    }
    .autoconso_image_row_3{
        justify-content: flex-end;
    }
    .autoconso_image_label{
        flex-grow: 0;
    }
    .autoconso_min-size_label{
        width: 100px;
    }
    .autoconso_min-size_label_2{
        width: 150px;
    }
    .autoconso_left_column{
        justify-content: flex-start;
    }
    .autoconso_right_column{
        justify-content: flex-end;
    }
    .autoconso_yield_button_container{
        display: block;
        position: absolute;
        top: 5px;
        right: 5px;
    }
}

.autoconso_disabled_item {
    color: darkgray!important;
}
.autoconso_disabled_item .autoconso_legend_icon {
    background: darkgray!important;
}

.energy_label{
    min-width: 100px;
    text-align: right;
}

.flex_date_picker_button{
    height: 30px;
}
.flex_date_picker_button_2{
    height: 32px;
    margin-left: 5px!important;
}
.flex_date_picker_button.borderRight{
    border-width: 0px 1px 0px 0px;
    border-style: solid;
}
.flex_date_picker_button.borderLeft{
    border-width: 0px 0px 0px 1px;
    border-style: solid;
}

.flex_date_picker_container {
    display: flex;
    flex-wrap: nowrap;
    background-color: var(--select-and-input-background);
    border: 1px solid var(--select-and-input-border-color);
    width: 100%;
    justify-content: space-around;
}
.flex_date_picker_container_only_date {
    display: flex;
    flex-wrap: nowrap;
    background-color: var(--select-and-input-background);
    border: 1px solid;
    border-color: var(--select-and-input-border-color);
    width: 320px;
    justify-content: space-around;
    flex-shrink: 0;
    height: 30px;
}

#Autoconso_Now_Button{
    visibility: hidden;
}
@media	screen and (min-width: 700px){
    #Autoconso_Now_Button {
        visibility: initial;
    }
    .flex_date_picker_container{
        width: 280px;
    }
}

#own_consumption_rate_container {
    border: 1px solid;
    height: 20px;
    background: #1d8b1d;
    overflow: hidden;
    position: relative;
    border-radius: 7px;
}
#autonomy_rate_container {
    border: 1px solid;
    height: 20px;
    background: #31bff9;
    overflow: hidden;
    position: relative;
    border-radius: 7px;
}
#own_consumption_rate {
    background: rgba(0, 189, 0, 0.69);
    height: 100%;
    text-align: center;
    transition: all 0.5s;
    width: 0%;
}
#autonomy_rate {
    background: skyblue;
    height: 100%;
    text-align: center;
    transition: all 0.5s;
    width: 0%;
}
#own_consumption_rate_label,
#autonomy_rate_label{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    color: #2a362a;
    justify-content: center;
    align-items: center;
}
#autonomy_rate_label{
    color: #2a2a45;
}

.flex_date_picker{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-grow: 1;
}
.flex_date_picker.left{
    justify-content: flex-start;
}

.flex_date_input{
    border: 0px;
    margin: initial;
    padding: 0px;
    flex-grow: 1;
}
.flex_date_input_1{
    max-width: 95px;
}
.flex_date_input_2{
   margin-right: 5px;
}

.flex_calender_icon{
    color: var(--input-text-color);
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    flex-grow: 1;
}

#solarex_frame {
    background: var(--main-bg-background-img);
}
#solarex_frame_inner{
}
#solarex_frame_overlay{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/* Check list */
.check_list_item_plant_name,
.check_list_item_comment,
.check_list_item_inverter_count,
.check_list_item_inverter_running,
.check_list_item_kwp{
    font-weight: bold;
}

#plant_checklist_control{
    gap: 5px;
}

.checklist_button_container{
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

#Plant_Checklist_Table tr:last-child td{
    border-bottom: 0px !important;
}

/* Login OTP */
.pinAdvOptionContainer {
    display: flex;
    align-items: center;
    gap: 5px;
}

.otpContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.otp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.otp__input {
    margin-top: 20px;
    font-size: 3rem;
    outline: none;
    padding: 0.25rem 0.5rem;
    text-align: center;
    width: 2.5rem;
    background-color: #EBEDF3;
    border-color: #EBEDF3;
    color: #3F4254;
    border-radius: 5px;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.otp__input:focus {
    box-shadow: 0px 0px 10px 3px var(--item-selected-color);
    border: 1px solid var(--default-border-color);
}

.passOrPinContainer{
    width: 100%;
}

.credentialsHint{
    margin: 7px 0px 7px 0px;
}

#pinPad {
    margin-top: 20px;
    width: 90%;
    padding: 10px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 10px;
}

.pinOverlayTouchController{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    z-index: 10;
}

.pinRequiredLabel{
    margin: 0px 10px 0px 10px;
    white-space: normal;
    text-align: center;
}

.pinRow {
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
}
.passwordRow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.passwordRow input{
    flex-grow: 1;
}

.pinButton {
    border: none;
    background: none;
    font-size: 1.5em;
    font-weight: 550;
    min-height: 60px;
    min-width: 60px;
    color: transparent;
    text-shadow: 0 0 0 rgb(102, 101, 101);
    border-radius: 10px;
    flex: 1 1 0px;
}
.clear {
    font-size: 1em !important;
}
.pinButton:hover {
    box-shadow: var(--default-border-color) 0 0 2px 2px;
}
.pinButton:active {
    background: var(--button-background-fallback);
    background: var(--button-background-moz);
    background: var(--button-background-webkit);
}
.pinButton.active {
    box-shadow: var(--default-border-color) 0 0 2px 2px;
}

.enter:hover {
    box-shadow: #47cf73 0 0 1px 1px;
}
.enter:active {
    background: #47cf73;
    color: #fff;
}

.wizardLanguageSwitcher{
    position: absolute;
    left: 10px;
    bottom: 10px;
}
.wizardLanguageSwitcher .footer-icon-flag-login{
    height: 30px;
     padding: 2px 1px 2px 1px;
}

.secureConnectionModeContainer{
    margin-top: 10px;
    display: flex;
    gap: 10px;
    align-items: stretch;
    justify-content: flex-start;
}

.secureConnectionModeHintContainer{
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.secureConnectionModeHintContainer.hint4{
    justify-content: flex-start;
}

.secureConnectionModeExtendedContainer{
    display: flex;
    justify-content: flex-end;
    align-content: center;
    gap: 5px;
    cursor: pointer;
}
.secureConnectionModeContainer input{
    width: 16px;
    height: 20px;
}

.connectionImage{
    width: 150px;
    border: 1px solid var(--default-border-color);
}
.connectionImage2{
    height: 60px;
    border: 1px solid var(--default-border-color);
    flex-shrink: 1;
}
@media	screen and (min-width: 500px){
    .connectionImage2 {
        height: 86px;
    }
}

.wizardSpacer{
    height: 5px;
}
.wizardSpacer10{
    height: 10px;
}
.wizardSpacer15{
    height: 10px;
}
.wizardFlexRow{
    display: flex;
    gap: 5px;
}

.wizDA_debugStateParent {
    height: 100px;
    border: 1px solid
}
.wizDA_debugStateText {
    height: 100%;
    overflow: auto
}

.pinWaitContainer,
.languageChangeLoadContainer{
    cursor: wait;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--loader-background-color);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    font-size: 48px;
    z-index: 999999;
}

@keyframes shake {
    0% { margin-left: 0rem;}
    25% { margin-left: 1rem;}
    75% { margin-left: -1rem;}
    100% { margin-left: 0rem;}
}

.invalidInputShake {
    animation: shake 0.2s ease-in-out 0s 2;
}

#appInfoLabel{
    position: fixed;
    right: 5px;
    bottom: 45px;
}

.checkboxlabel {
    display: flex;
    gap: 5px;
    align-items: center
}
.checkboxlabel.padding{
    padding-left: 20px;
}

/* accordion */
.ui-widget-content {
    border: 1px solid var(--default-border-color);
    background: var(--alarm-container-background);
}

.ui-state-default {
    border: 1px solid var(--default-border-color);
    background: var(--accordion-tab-inactive-background);
    color: var(--popup-window-text-color);
}

.ui-state-active {
    border: 1px solid var(--default-border-color);
    background: var(--accordion-tab-active-background);
    color: var(--popup-window-text-color);
}

.ui-state-hover {
    border: 1px solid var(--default-border-color);
    background: var(--item-selected-color);
    color: var(--item-selected-text-color);
}

.enabled_error_check{
    background: var(--enabled-error-check-background);
}
.disabled_error_check{
    background: var(--disabled-error-check-background);
}