/*@import url('./layout.css');

@import url('https://fonts.googleapis.com/css?family=Roboto');
*/
/* um den Footer immer unten auf der Seite zu halten */
/*
* {
border-collapse: collapse;
}*/





@media print {
    .no_print { display: none !important; }
}

@media screen {
    .print_only { display: none !important; }
}




/* IExplorer Neolithic Editions */
img { border: none; }

/* common styles */
* { box-sizing: border-box; }
a { color: inherit; font-weight: inherit; text-decoration: none;}
a:hover { text-decoration: underline; cursor: pointer; }
a.nounder {text-decoration: none;}
a.nounder:hover {/*text-decoration: underline;*/}
/* Innen und Aussenabstände zur allg. Verwendung */

a.disabled,
.watchdog_disabled {
  /*color: inherit;
  pointer-events: none;*/
  cursor: not-allowed !important;
  opacity: 0.5;
  text-decoration: none;
}

.watchdog_disabled[onclick]{
    pointer-events: none;
}


.breadcrumbnavOffline {
    visibility: hidden;/**/
 
    position: absolute;
    margin-left: 0.2em;
    margin-top: 0.25em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    
    /*border: 0px solid red;*/
    border-radius: 5px;
    color: #E0E0E0;
    background-color: #ce0e0e;
    font-size: 0.7em;
    font-weight: bold;
    color: white;
    vertical-align: baseline;

}

/* setzt Elemente bei Verbindungsausfall sichtbar */
.breadcrumbnavOffline.watchdog_enabled {
    visibility: visible;
}

/* Warnmeldungs-Badges - werden vom watchdog (watchdog_toggleAlertingMessagesBadges) sichtbar gesetzt */
*[watchdogAlertMessagesBadge]{
    visibility: hidden;
    position: absolute;
    right: -1.2em;
    bottom: 0.2em;
    
    text-align: center;
    width: 1.8em;
    height: 1.8em;
    /*vertical-align: baseline;*/
    
    border: 0px solid red;
    border-radius: 50%;
    padding-top: 0.2em;
    background-color: red;
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    
}
*[watchdogAlertMessagesBadge].watchdog_enabled {
    visibility: visible;
}



.pad_s   {      padding: 0.2em;}
.pad_s_ou{      padding-top: 0.2em; padding-bottom: 0.2em;}
.pad_s_lr{      padding-left: 0.2em; padding-right: 0.2em;}
.pad_s_l{       padding-left: 0.2em;}
.pad_s_r{       padding-right: 0.2em;}
.pad_s_o{       padding-top: 0.2em;}
.pad_s_u{       padding-bottom: 0.2em;}

.mar_s   {      margin: 0.2em;}
.mar_s_ou{      margin-top: 0.2em; margin-bottom: 0.2em;}
.mar_s_lr{      margin-left: 0.2em; margin-right: 0.2em;}
.mar_s_l{       margin-left: 0.2em;}
.mar_s_r{       margin-right: 0.2em;}
.mar_s_o{       margin-top: 0.2em;}
.mar_s_u{       margin-bottom: 0.2em;}

.pad_m   {      padding: 0.6em;}
.pad_m_ou{      padding-top: 0.6em; padding-bottom: 0.6em;}
.pad_m_lr{      padding-left: 0.6em; padding-right: 0.6em;}
.pad_m_l{       padding-left: 0.6em;}
.pad_m_r{       padding-right: 0.6em;}
.pad_m_o{       padding-top: 0.6em;}
.pad_m_u{       padding-bottom: 0.6em;}

.mar_m   {      margin: 0.6em;}
.mar_m_ou{      margin-top: 0.6em; margin-bottom: 0.6em;}
.mar_m_lr{      margin-left: 0.6em; margin-right: 0.6em;}
.mar_m_l{       margin-left: 0.6em;}
.mar_m_r{       margin-right: 0.6em;}
.mar_m_o{       margin-top: 0.6em;}
.mar_m_u{       margin-bottom: 0.6em;}

.pad_b   {      padding: 1.1em;}
.pad_b_ou{      padding-top: 1.1em; padding-bottom: 1.1em;}
.pad_b_lr{      padding-left: 1.1em; padding-right: 1.1em;}
.pad_b_l{       padding-left: 1.1em;}
.pad_b_r{       padding-right: 1.1em;}
.pad_b_o{       padding-top: 1.1em;}
.pad_b_u{       padding-bottom: 1.1em;}

.mar_b   {      margin: 1.1em;}
.mar_b_ou{      margin-top: 1.1em; margin-bottom: 1.1em;}
.mar_b_lr{      margin-left: 1.1em; margin-right: 1.1em;}
.mar_b_l{       margin-left: 1.1em;}
.mar_b_r{       margin-right: 1.1em;}
.mar_b_o{       margin-top: 1.1em;}
.mar_b_u{       margin-bottom: 1.1em;}

.pad_c  {       padding: 0.6em 2.5em 1.2em 2.5em;}
.pad_c_l{       padding-left: 2.5em;}
.pad_c_r{       padding-right: 2.5em;}
.pad_c_o{       padding-top: 0.6em;}
.pad_c_u{       padding-bottom: 1.2em;}

.mar_c   {      margin: 0 0 0.2em 0}
.mar_c_ou{      margin-top: 0; margin-bottom: 0.2em;}
.mar_c_lr{      margin-left: 0; margin-right: 0;}
.mar_c_l{       margin-left: 0;}
.mar_c_r{       margin-right: 0;}
.mar_c_o{       margin-top: 0;}
.mar_c_u{       margin-bottom: 0.2em;}

.border_dark  { border: 1px groove gray;}
.border_light { border-bottom: 1px solid #ececec;
                border-right: 1px solid #e9e9e9;
                border-top: 1px solid #e0e0e0;
                border-left: 1px solid #e9e9e9;}
.border_ishadow {
                border: 1px solid #AAAAAA;
                /*box-shadow: 0 0 0.2em 0 #AAA inset !important;*/
                box-shadow: 0.05em 0.05em 0.1em 0 #dddddd inset !important;
}
.bg_light {     background-color: #fafafe;    }

.cshadow {      box-shadow: 2px 2px 4px #bbb; }
.oshadow {      box-shadow: 0 0 0.2em 0 #AAA; }
.font_color_normal{
    font-weight: normal;
    color: black;
}
.font_bold{
    font-weight: bold;
}
.font_small{
    font-size: 75%;
}
.tooltip_dim{
    max-width: 550px;
    max-height: 550px;
    height: auto;
    width: auto;
}

.nowrap {white-space: nowrap;}


/* allg. Styleclass für Hervorgehobenes, z.B. Fehlermeldungen */
.alert{
    color: #e60000;
}
.alert_bg{
    color: #fff;
    background-color: tomato;
}
.warning_bg{
    color: #e60000;
    background-color:lemonchiffon;
}

.ok{
    color: darkgreen;
}
.ok_bg{
    color: #fff;
    background-color:lightgreen;
}
.ok_border{
    border: 1px solid darkgreen;
}


html, body{
    height: 100%;
    min-height:100%;
    position:relative;/**/
    margin: 0;
    padding: 0;
    border-width: 0;
}
body {
    
    
    /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;/**/
    background-color: #f5f5fa;
    /*background-image: url("../img/background/background.gif");
    background-repeat: repeat;
    background-attachment: scroll;*/
}




/* um den Footer immer unten auf der Seite zu halten */
#wrapper{
    height:  100%;/*calc(100% - 35px) footer-Höhe */
    min-height: 100%; /*calc(100% - 35px) footer-Höhe 
    max-height: 100%;*/
    margin:  0 0 0 0;
    border-width: 0;
    /* ausschalten für eine Ansicht mit flexibler Breite */
    max-width: 1020px;
    min-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

#container {
    height:  100%;
    min-height: 100%;
    /*z-index: 100;*/
    display: flex;
    flex-direction: column;
    /*min-width: 700px;*/
    border: 0;
}

#masthead {
    position: relative;
    
    /*z-index: 800;*/
    flex: 0 0 content;
    font-family: 'Roboto', sans-serif;
    /*min-width: 995px;*/
    background-color: #fff;
    
}
#LSAMenue {
    z-index: 150;
    /*flex: 0 0 content;*/
    font-family: 'Roboto', sans-serif;
    margin-bottom: -1px;
}

#content {
    /*z-index: 1000;*/
    flex: 0 0 auto;
    background-color: #fff;
    /*height: auto;
    min-height: 100%;
    position: relative;
    box-shadow: 2px 2px 4px #bbb;*/
}
#content_full {
    /*z-index: 1000;*/
    flex: 1 0 auto;
    background-color: #fff;
    
    /* für Kindelemente -> navTitle, mapWrapper, msgWrap */
    display: flex;
    flex-direction: column;
    /* box-shadow: 2px 2px 4px #bbb; */
}

/* der sich dynamisch weitende Teil im vertikalen flex-Design */
#content_filler{
    max-height: 100%;
    flex: 1 1 auto;
    /*border: black 1px solid;*/
    overflow: auto;
}

/* die Class vom Impressum/Datenschutzhinweis */
.overlay {
  position: fixed; /* Sit on top of the page content */
  display: none;   /* Hidden by default */
  width: 100%;     /* Full width (cover the whole page) */
  height: 100%;    /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7); /* Black background with opacity */
  z-index: 1110;      /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  /* flex-sachen */
  align-items: center;
  justify-content: center;
  
  
}
.overlay_content {
  padding: 3em;
  max-width: 65%;
  background-color: white;
  overflow-y: auto;
  max-height: calc(100% - 3em); 
}

#footer {
        margin: 0;
	padding: 0;
	text-align: center;
	clear: both;
	/*min-width: 698px;*/
	
	background-color: #fefeff;
	
        /* Positionierung unten auf der Seite */
        /*height: 25px; /* Muss dem */
        width:100%;
        position: fixed;
        /*position: absolute;*/
        left: 0;
        bottom: 0;
        z-index: 1100;
}
/* sitzt im Flex-layout ganz unten "hinter" dem fixierten #footer (wegen Scrollbereich, wenn flex-Teil länger als Viewport */ 
#footer_sim{
    min-height: 32px; /* footer-höhe */
    flex: 0 1 content; /* footer-höhe */
}

#watchdogLoginstatWrap{
    flex: 0 0 content;
    display:block; 
    /*overflow:auto;*/
    font-family: 'Roboto Condensed', sans-serif;
    background-color: #fff;
    text-align: right;
}
#watchdog{
    float:left;
}
#watchdogClock{}
.watchdogState{}

.watchdogAni{
    /*animation: watchdogState_Ani 700 steps(2);*/
    animation: watchdogState_Ani 1.5s linear;
    animation-iteration-count: l; /*infinite */
    animation-delay: 5s;
    animation-fill-mode: both;
    visibility: hidden;
    background-color: red;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    
    /*animation-fill-mode: forwards;*/
    
    /*animation-iteration-count: 1; */
}

@keyframes watchdogState_Ani { 
  /*0 { 
    background-color: white;
    color: red;
    font-weight: bold;
    visibility: visible;
  }*/ 
  from {
    background-color: inherit; 
    color: inherit;
    visibility: hidden;
    
  } 
  to { 
    background-color: red;
    color: white;
    font-weight: bold;
    /*content: "Störung";*/
    visibility: visible;
  } 
}

#loginstat{
    /*float:right;*/
    text-align: right;
    /*min-width: 698px;*/
    
}


#breadcrumbnav {
    flex: 0 0 auto;
    font-family: 'Roboto Condensed', sans-serif;
    /*font-size: 1.2em;*/
    text-align: center;
    padding: 0;
    margin: 0;
}


#navdiv {
    display: inline-block;
}
#navdiv div{
    float: left;
    background-color: #EEE;
    
    /*border-right: 1px grey solid;
    border-bottom: 1px grey solid;
    */
}

#navdiv div.LSAMenueUnselected:hover{
    background-color: #5f8ea9; /*#2d4e62;*/
    color: white;
    transition: 0.2s ease;
}

#navdiv div.LSAMenueUnselected:hover .middleicon {
     filter: brightness(200%);
}




#navdiv div.LSAMenueSelected{
    border-bottom: 1px solid white;
    background-color: #fff;
    font-weight: bold;
}

#navdiv div.LSAMenueBackNav{
    border-style: none;
    /*filter: alpha(opacity=60);
    opacity: 0.6;*/
    background-color:rgba(0,0,0,0);
}

#navdiv div a{
    text-decoration: none;
}

#navdiv div .clickableElement{
    cursor: pointer;
}

.middleicon{
    vertical-align: middle;
    padding-bottom: 0.15em;
    /*padding-right: 0.2em;*/
}

/* Material-Icons im Hauptmenü haben einen Rand */
.middleicon.md24{
    height: 28px;
    margin-bottom: -4px;
    margin-top:    -4px;
}
.middleicon.md20{
    height: 24px;
    margin-bottom: -2px;
    margin-top:    -2px;
}

.middleicon.common18{
    height: 18px;
}
.middleicon.common16{
    height: 16px;
}



#mastheadlogo {
    text-align: center;
    margin-left: -2em;

}

#masthead h3 {
    font-size: 1em;
    /*text-shadow: 2px 2px 4px #bbb;*/
    text-align: center;
    color: #5f8ea9;
    margin: 0.2em 0 0.7em 0;
}

#masthead h3 img{
    display: none;
}

/* Navigation Styles */

#breadcrumbnavlist {
       padding:0;
       margin:0;
}

#breadcrumbnavlist ul{
        list-style-type: none;
        
}
#breadcrumbnavlist li {
        display: inline;

        /*border: 1px solid #fff;
        background-color: #fff;*/

}
#breadcrumbnavlist li+li:before {
	content: " » "; /* \23e9\00A0";/*21A6*/
	color: #3d6c87;

}
#breadcrumbnavlist a {
	color: #2d4e62;/*#3d6c87;*/
	font-weight: normal;
	text-decoration: none;
	/*display: block;*/
	/*padding: 5px;
	border: 1px solid #fff;
	background-color: #fff;*/
}

#breadcrumbnavlist a:hover {
	/*color: #fff;*/
	text-decoration: underline;

	/*border: 1px solid #5f8ea9;
	background-color: #5f8ea9;*/
}
#breadcrumbnavlist a img{
	padding-right: 3px;
	vertical-align:sub; 
	padding-bottom:0.1em;
}

#navigationlogout img{
	padding-left: 5px;
	vertical-align:sub; 
	padding-bottom:0.1em;
}

#navigationlogout {
    margin: 0;
    padding: 5px 10px;

}

.navForm fieldset legend {
    font-size: 0.8em;
    font-style: italic;
}

/* Zähldatengraph - Auswahlflächen */
#graphdates select, #graphdates input {
    vertical-align: top;
    height: 20px;
    /*line-height: 20px;*/
}

/* Fehlerseiten */

.exeptionMessageDiv {
    text-align: center;
    padding-bottom: 2em;
}
.exeptionMessageNote{
    
}
.exeptionMessageWarning{}
.exeptionMessageError{
    color: red;
}

.interactiveElement{
    color: #2d4e62;
}
.interactiveElement:hover{
    color: black;
    text-decoration: underline;
    
}
/* Content Styles 
#content h1,h2,h3,h4,h5,h6 {
        color: #2d4e62;
}*/
#content h2,
#content_full h2  {
	text-align: center;
}

#content.a,
#content_full.a {
    text-decoration: none;
}



/* Create two unequal columns that floats next to each other */
#content div.column,
#content_full div.column {
    float: left;
}

#content div.left,
#content_full div.left {
  /*width: 30%;*/
}

#content div.right,
#content_full div.right {
  /*width: 70%;*/
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer Styles */
#footer p {
	color: #808080;
	margin-top: 5px;
        margin-bottom: 5px;
}
#footer a {
	color: #5f8ea9;
	text-decoration: underline;
}
#footer a:hover {
	color: #33627d;
	text-decoration: none;
}




#LSAHeader {
        background-color: #fafaff;
}
.LSAHeaderName{
    flex: 0 0 auto;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #2d4e62;/*#3d6c87;*/
}

#scop_loginrotor {
    float: right;
    margin-top: 1em;
}



/*########################################
  Debugausgaben
  ######################################## */

#debug{
    position: fixed;
    /*max-height: 80%;*/
    height: 10em;
    overflow: auto;
    resize: both;
    bottom: 0;
    left: 0;
    
    z-index: 999999;
    background-color:rgba(255,255,255,1);
    /*z-index:0;*/
    /* width: 100%; */
}    
#debughead{
    text-align: center;
    background-color: rgba(200,0,0,1);
    color: #FFFFFF;
    font-weight:bolder;
    font-size: 12px;
}    
#debughead a{
    background-color: rgba(200,0,0,1);
    color: #FFFFFF;
}    
    
#debuglog{
    pointer-events: none;
    text-align: left;
    

    color:#000000;
    font-weight:normal;
    font-family:"Courier New", Courier, monospace;
    font-size: 12px;
    padding: 0.5em;
    height: 100%;
    /*position: fixed;
    position: absolute;*/
    /*left: 5px;
    top: 23px;
    
    right: 300px;
    bottom: calc(100% - height -23px);*/

}
#debuglog.alert{
    background-color: #ffe6e6;
}
   



/*########################################
  State/Program-Sachen
  ######################################## */

/* "Rück"formatierung des Anlagenstatus und -Programmes auf der Serviceseite */
#json_LSAConnection_Service .mar_b_o{ margin-top:0;}
#json_LSAConnection_Service .pad_m_o{ padding-top:0;}
#json_LSAProgram_Service .mar_b_o{ margin-top:0;}
#json_LSAProgram_Service .pad_m_o{ padding-top:0;}


#json_LSAProgramHistoryWrap {
    clear: both;
    padding: 0.7em 0.3em 0.1em 0.3em;
}
#json_LSAStateHistoryWrap {
    clear: both;
    padding: 0.7em 0.3em 0.1em 0.3em;
}


/* die Tiles auf der map bei bestimmten Zoomstufen ausblenden */
#mapid.grayout div.leaflet-pane.leaflet-tile-pane div.leaflet-layer div.leaflet-tile-container img.leaflet-tile.leaflet-tile-loaded {
   filter: contrast(35%) brightness(135%);/*  grayscale(1)*/
}
#mapid div.leaflet-pane.leaflet-tile-pane div.leaflet-layer div.leaflet-tile-container img.leaflet-tile.leaflet-tile-loaded {
    /*filter: grayscale(1);*/
}

/*########################################
  Messages Liste 
  ######################################## */
/* alle logeinträge -> füllen die Seite vertikal bis zum Footer */

#json_LSAMessagesWrap { /* auf Anlagen- und Service-Seite */
   /*border: 1px solid red;*/
   max-height: 35em;
   overflow: auto;
   /* min-height: 7em; wird von JS ausgewertet */
}

#msgWrapNav #json_LSAMessagesWrap { /* auf Navigationsseite */
   /*border: 1px solid red;*/
   max-height: 7em;
   overflow: auto;
   /*min-height: 7em; */ /*wird von JS ausgewertet! */
}

/* einzelner Logeintrag */
.json_LSAMessageWrap {
  display: table;/*
  position: absolut;*/
  width: 100%;
  height: auto;
}

.json_LSAMessageTimeTextConfWrap {
    float: left;
    width: 100%;
    font-family: "Lucida Console", Monaco, courier, monospace;
    font-size: 0.8em;
}
.json_LSAMessageTime {
    float: left;
    width: 18em;
}
.json_LSAMessageText {
    float: left;
}

.json_LSAMessageMaintenance{
    background-color: lightgreen;
    color: black;
}

.json_LSAMessageConf {
    clear: both;
    float: right;
    /*background-color: whitesmoke;
    color: black;
    margin: 0.1em;*/
    vertical-align: middle;
    background-color: whitesmoke;
    color: black;
}
.json_LSAMessageDoConf {
    clear: both;
    float: right;
    /*background-color: whitesmoke;
    color: black;
    margin: 0.1em;*/
    vertical-align: middle;
    /*background-color: whitesmoke;
    color: black;*/
    font-weight: normal;
}

 
.json_LSAMessageConfArrow{
    line-height: 0.8em;
}
.json_LSAMessageConfButton {
    float: right;
    padding: 0;
    margin: 0;
}

#json_LSAMessagesTypeName {
    clear: both;
    float: left;
}

#json_LSAMessagesTypeSwitch{
   visibility: hidden;/* */
}

#json_LSAMessagesTypeSwitch:hover {
    /*font-weight: bold;*/
    /*text-decoration: underline;*/
    /*cursor: pointer;*/
}

#json_LSAMessagesTypeSwitchRotor,
#json_LSAMessagesTypeSwitchText,
#json_LSAMessagesTypeSwitchCB/*,
#json_LSAMessagesTypeSwitchCBLabel*/{
    /*display: inline;
    visibility: hidden;*/
}

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


.LSALogTitle,
.sysLogTitle{
    /*flex: 0 0 auto;*/
    /*text-align: left;*/
    /*font-size: 1.2em;*/
    font-weight: bold;
}
#LSALogTitleRotorDyn{
    display: none;
}
.LSALogLinkWrap{
    /* flex: 0 0 auto; */
}
.LSALogLink{
    float:right;
    font-weight: normal;
}

.LSALogData{
    font-family: monospace;
    flex: 1 1 20em;
    overflow: auto;
}

.sysLogData{
   overflow: auto; 
}
.sysLogDataServices {
    flex-shrink: 3;
}


.LSALogSG_Data {
    font-family: monospace;
    overflow: auto;
    height: 27em;
}

/* Detektordaten */
.LSADetLog_Data {
    font-family: monospace;
    overflow: auto;
    flex: 1 1 20em;
}



/* Zähldaten (Anlagenserver) */
#json_LSADetFileWrap{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#json_LSADetFileWrapRotorDyn{
    display: none;
}

#json_LSADetDataWrap{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#json_LSAEventsLogWrap pre{}
#json_LSAErrorLogWrap pre{}

#dygraphLegend{
    display: flex;
    flex-direction: row;
    /*border: red solid 1px;*/
}
#dygraphLegendEntries{
    flex: auto;  /* bezieht sich auf das Elternelement! */
    
    /*border: green solid 1px;*/
    columns: auto 180px;
    column-rule: 1px solid #ddd;
    column-gap: 2em;
}

.dygraphLegendEntry{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;/**/
    cursor: pointer;
    
}
.dygraphLegendEntryCol1{
    overflow: hidden;
    flex-grow: 0;
   /* width: 140px;*/
    white-space: nowrap;
}
.dygraphLegendEntryCol2{
    /**/text-align: right;
    vertical-align: middle;
    /*overflow: hidden;*/
    flex-grow: 1;
}
.dygraphLegendEntryImg{
    margin-top: 0.65em;
    overflow: hidden;
    
}

.dygraphLegendEntryCol3{
    width: 20%;
    flex-grow: 0;
    /*margin:auto;*/
}

/* Hintergrund Legendeneintrag Zähldaten */
.dygraphLegendEntryBGHighlight{
    background-color: #DDD;
}
.dygraphLegendEntryBGNormal{
    background-color: transparent;
}

/* zweispaltiger Div, der die Summendaten etc. hält */
.dygraphLegendValueField{
    /* flex: auto;  bezieht sich auf das Elternelement! */
    
    width: 25%;
    border-left: 1px solid #ddd;;
}

.dygraphLegendValueField:after{
    content: "";
    display: table;
    clear: both;
}
.dygraphLegendValueFieldCol1{
    float: left;
}

.dygraphLegendValueFieldCol2{
    text-align: right;
    /*margin:auto;*/
}

#dygraph_tabViewPre{
    max-height: 90vh; /* Screensize */
}

/* ##################################################################

Setup-Formularelemente

##################################################################### */


/* Formular Setupseiten */ 
.setupFormLabel{
    width: 10em;
    min-width: 10em;
    /*display: inline-block;*/
    
    text-align: right;
}
.setupFormLabelDyn{
    flex-basis: 10em;
    flex-shrink: 100;
    /*display: inline-block;*/
}


.setupFormLabel_grayout{ /* deaktivierte Elemente */
    color: gray;
    font-style: italic;
}
.setupFormInfoMsg{ /* Infobereich - Hinweistext */
    /*font-size: 0.8em;*/
    font-style: italic;
}
.setupFormErrDiv{
    /*background-color: red;*/
    background-color: rgba(255, 0, 0, 0.2);
}

.setupFormSelectOption_hideactive:checked{
   display:none;
}

.setupForm input::placeholder{
    opacity: 0.5;
}

.setupFormImgPreviewEnc{
    height: 4.5em;
    width:  4.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
}

.setupFormImgPreview{
    max-height: 100%;
    max-width:  100%;
    height: auto;
    width:  auto;
}
/* wird dem Vorschaubild zum Ausgrauen zugewiesen */
.setupFormImgPreviewGrayout{
    opacity: 0.3;
    /*filter: alpha(opacity=30);*/
}

.setupFormImgDeleted{
    position: absolute;
}

.setupFormDragFileBackground{
    background-color: lightblue !important;
    cursor: move;
}
.setupFormUploadEnc{
    display: flex;
    flex-wrap: wrap;
}
.setupFormUploadEnc .setupFormErrDiv{
    flex-basis: 100%;
}


.setupFormHasFileBackground{
    background-color: lightgreen;
}
.setupFormPublic_bg{
    background-color: #fff1a3;
}
.setupFormDelete_bg{
    background-color: rgba(255, 0, 0, 0.2);
}

option.setupFormSelectOption_gray{ /* Bitte auswählen ... */
    color: lightgray;
}

option.setupFormSelectOption_grayout{ /* deaktivierte Elemente */
    color: gray;
    font-style: italic;
}
option.setupFormSelectOption_bold{ /* fette Elemente */
    font-weight: bold;
}

fieldset>legend.setupFormLegend{
    font-size: 0.8em;
    font-style:italic;
}


option.setupFormSelectOption_active:not(:checked){
    /*color: lightgreen;*/
    background-color: lightgreen;
}

option.setupFormSelectOption_notactive:not(:checked){
    /*olor: red;*/
    background-color: red;
}
/*
.buttonIconEdit{
    background-image: url("../img/icons/edit.png");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 16px;
}
*/










 /* Dropdown Button */
.dropbtn {
    border: none;
    cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    background-color: white;
    display: none;
    position: absolute;
    left: 0;
    margin-top: 2px;
    min-width: 160px;
    box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover {
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    /*background-color: #3e8e41;*/
} 


/*
    Notizen auf der LSA-Main-Seite (lsaState)
*/

.noticePublic_bg{
    background-color: #fff1a3;
}
.noticeSDL_bg{ /* interne Notiz */
    background-color: #d5ebf6; /*#2b8cbe;*/
}

/* Legenden an Notizenfeldern*/
.noticeFieldset{
    /*border: 2px #ccc solid;*/
    padding: 0.0em 0.2em 0.2em 0.2em;
    /*background-color:#d5ebf6;#2b8cbe*/
}
.noticeLegend{
    background-color: white;
    margin-left: 0.5em;
    padding: 0.1em 0.3em;
    font-size: 70%;
}

#noticeSDLTextWrap {}

#noticeSDLFormWrap,
#noticePublicFormWrap{
    display: none;
}
/* Notizenanzeige auf NavPage */
.navNoticeEntry{
   border-bottom: solid 1px lightgray;
   padding: 0.2em;
   width: 20em;/**/
}
.navNoticeEntry:last-child{
    border-bottom: none;
}

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

a div.navNoticeTitle,
a:visited div.navNoticeTitle {
    text-decoration: none !important;
    color: black;
}

.navNoticeTitle{}

.navNoticeTitle div.navNoticeText{
    max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
}

.navNoticeTitle:hover div.navNoticeText{
    max-height: 30em;
    transition: max-height 1s ease-in;
}

.navNoticeText{}

/* Animation für die Serverrequest-Mitteilungen auf der LSA-Service-Seite */
.dissolve5{
    animation: dissolveAnimation 2s ease-in 5s forwards;
    transition: height 2s;
}
@keyframes dissolveAnimation {
    
  to { opacity: 0; 
       /*width:0;*/
       height:0;
       overflow:hidden;
  }  
/*    to {
        width:0;
        height:0;
        overflow:hidden;
        border-style: none;
    }
*/
}



/*
#noticeSDLWrap{
    max-height: 8000;
    transition: max-height 10 ease-out;
    overflow: hidden;
    background: #d5d5d5;
}
*/
/*#noticeSDLWrap {
    max-height: 500px;
    transition: max-height 2s ease-in;
}*/




/*
*
* CSS für die Toggle-Switches
    Benutzung:
    <label class="switch">
        <input type="checkbox" checked>
        <span class="slider round"></span>
    </label>
*
*/
.switchWrap {
    display: flex;
}
.switch {
  position: relative;
  top: 2px; 
  display: inline-block;
  width: 26px;
  height: 14px;
}

.slider_hoveractive:hover{
    background-color: #5f8ea9;
}

.switch_print{
  display: none;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:disabled + .slider:before{
    background-color: #ccc;
}
    
input:checked + .slider {
  background-color: #5f8ea9;/*#2196F3;*/
}

input:focus + .slider {
  box-shadow: 0 0 1px  #5f8ea9;/*#2196F3;*/
}

input:checked + .slider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateX(12px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 14px;
}

.slider.round:before {
  border-radius: 50%;
}



/* #########################################################
   Rotor / Spinner / Loader
   ######################################################### */
.rotor_s,
.rotor_m,
.rotor_b
{
  
  border-color:  #555555;
  border-top-color: #e4e4e4;
  border-style: solid;
  border-radius: 50%;
  
  display: inline-block;
  vertical-align: middle;
  
  -webkit-animation: spin 0.7s linear infinite; /* Safari */
  animation: spin 0.7s linear infinite;
}
.rotor_s{ border-width: 2px;  width: 12px;  height: 12px; margin-bottom: 2px; margin-right: 0.2em; flex-shrink: 0;}
.rotor_m{ border-width: 3px;  width: 16px;  height: 16px; margin-bottom: 3px; margin-right: 0.2em; flex-shrink: 0;}
.rotor_b{ border-width: 4px;  width: 20px;  height: 20px; margin-bottom: 4px; margin-right: 0.2em; flex-shrink: 0;}  

#json_JobWrapType_1000_serverRequestRotor  {
    display: none !important;
}
#DivLSASonderprogrammMsg[sp_state="undef"]{
    color: gray;
}
#DivLSASonderprogrammMsg[sp_state="sonderprogramm"]{
    color: darkgreen;
    font-weight: bold;
}
#DivLSASonderprogrammMsg[sp_state="normalprogramm"]{
    color: inherit;
}



/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }

@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}


@media screen and (max-height: 750px){
    #watchdogLoginstatWrap {font-size: 0.9em;}
    #watchdogLoginstatWrap img {display: none;}
    #mastheadlogo    {display: none;}
    #masthead        {margin: -1px 0 0.4em 0; font-size: 0.9em; border-top: none;
                      min-height: 3em;
                      display: flex;
                      justify-content: center;
                      align-items: center;}
    #masthead .mar_m {margin-top:0.5em;}
    #masthead h3     {margin:0.1em 0; font-size: 1.2em;}
    #masthead h3 img {display: inline;}
    .LSAHeaderName   {font-size: 0.8em;}
    .pad_c_u         {padding-bottom: 0.4em;}
    .pad_c_o         {padding-top: 0.4em;}
    .pad_c_ou        {padding-top: 0.4em; padding-bottom: 0.4em;}
    .pad_c           {padding: 0.4em 2.5em 0.4em 2.5em;}
    
    .LSAMenueUnselected {padding-top: 0.2em; padding-bottom: 0.2em; }
    .LSAMenueSelected   {padding-top: 0.2em; padding-bottom: 0.2em;}
}

/* #########################################################
   Overlay-Sachen
   ######################################################### */
#commonPageOverlay {
    
    /*display: none;*/
    
    width: 100%;
    min-height: 100%;
    position: absolute;
    
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;

    /*background-color: rgba(255,255,255,1);  transparent - einblenden durch adden der blendIn-Class und setzen von display:flex*/
    background-color: rgba(250,250,250,0);
    transition: background 200ms ease-in;
    z-index: 2000;
}

/* nach Setzen von display: flex zur Classlist adden */
#commonPageOverlay.blendIn{
    background-color: rgba(0,0,0,0.7);
    /*transition: background 1000ms ease-in;*/
}
/* scrollen des unterliegenden Wrappers verhindern, wenn das Overlay gezeigt wird */
#commonPageOverlay.blendIn + #wrapper {
    overflow: hidden;      /* deaktiviert Scrollen */
}
#commonPageOverlayContent {
    background-color: #fff;
    width: 97%;  /* verdammter margin */
    /* border-radius: 3px;*/
    
}

/* zieht den Inhalt auf maximale Höhe */
#commonPageOverlayContent.maximizeHeight {
    align-self: stretch;
}
/*
    Vergrößerbare Elemente (Setupseite))
*/
.setupForm_enlargedReplacement{
    background-color: whitesmoke;
}

/* Wrapper-Div bei vergrößerbaren Elementen */
.setupForm_EnlargeableWrapper {
    display: flex;
    width: 100%;
   
}

.setupForm_EnlargeableWrapper.enlargeElementEnlarged {
    height: 100%;
}

.setupForm_EnlargeableWrapper.enlargeElementEnlarged > .setupForm_EnlargeableContent {
    margin: 1em 0em 1em 1em;
}

/* der Schalter in der vergrößerten Ansicht */
.setupForm_EnlargeableWrapper.enlargeElementEnlarged > .setupForm_Enlargeable_SwitchIcon{
    margin: 0.2em;
    padding: 0;
}

/* Elemente, die nur im vergrößerten Overlay sichtbar sind */
.setupForm_EnlargeableHidden {
    display: none;
}
.setupForm_EnlargeableWrapper.enlargeElementEnlarged > .setupForm_EnlargeableHidden {
    display: block;
}

.setupForm_EnlargeableWrapper.enlargeElementEnlarged > setupform_noticePrivate {
    width: 100%;
    height: 100%;
}

/* Navlink (Anlagenauswahl) im header der Seite */
#navLinkHead {
    position: absolute;
    left: 0;
    bottom: 0;
}


/* Configmenü im Header der Seite */
#configWrap {
    position: absolute;
    right: 0;
    top: 0;
    
    text-align: right;
}
#configWrap a:hover {
    text-decoration: none;
}

#configWrap .configMenuWrap {
    display: none;
    opacity: 0;
    transition: opacity 0.5s;
    /*animation: blendOutDisplay 0.5s;
    animation-fill-mode: forwards;*/
}

#configWrap:hover .configMenuWrap {
    /*visibility: visible;*/
    display: flex;
    opacity: 1;
    
/*    animation: blendInDisplay 0.5s;
    animation-fill-mode: forwards;*/
}

@keyframes blendInDisplay {
  0%   {opacity: 0;}
  /*1%   {display: flex;}*/
  100%  {opacity: 1;}
}

@keyframes blendOutDisplay {
  0%   {opacity: 1;}
  99%  {opacity: 0;}
  100% {display: none;}
}

#configWrap .configHeadtext {
    cursor: pointer;
    display: flex;
    justify-content: right;
    align-items: center;
}

#configWrap .configHeadtext .expandIcon {
     margin-left: 0.2em;
     transition: transform 0.5s;
}

#configWrap:hover .configHeadtext .expandIcon {
     transform: rotate(-180deg);
     
}
/*
#configWrap .configMenuWrap{
    pointer-events: none;
}

#configWrap:hover,
#configWrap .configMenuWrap .configMenuItem:hover
#configWrap .configHeadtext:hover .configMenuWrap,
#configWrap .configMenuWrap:hover {
    pointer-events: all;
}*/
/**/


#configWrap .configMenuWrap {
    background-color: white;
    position: relative;
    z-index: 1100;  /* leaflet hat 400/800 */
    
    /*display: flex;*/
    flex-direction: column;
    align-items: stretch;
    padding: 0.5em;
    padding-bottom: 0;
    
    border-radius: 0.2em;
    
}



#configWrap .configMenuWrap .configMenuItem {
    padding: 0.7em 0.5em;
    /*transition: 0.2s ease;*/
}
#configWrap .configMenuWrap a.configMenuItem:first-of-type {
    margin-top: 0.2em;
}
#configWrap .configMenuWrap a.configMenuItem:last-of-type {
    margin-bottom: 0.2em;
}

#configWrap .configMenuWrap .configMenuItem > div {
    display: flex;
    justify-content: space-between;
}

#configWrap .configMenuWrap .configMenuItem img.middleicon {
    opacity: 0.5;
}
#configWrap .configMenuWrap .configMenuItem:hover img.middleicon {
    opacity: 1;
}

#configWrap .configMenuWrap > a.configMenuItem:hover {
    background-color: #eee;
}

#configWrap .configMenuItem.trenner {
    border-bottom: 1px solid #ececec;
}

#configWrap .configMenuWrap .configMenuItem span.iconWrap {
    display: inline-block;
    width: 1.5em;
    text-align: center;
    margin-left: 0.5em;
}


#configWrap .showAccessgroupName {
    text-align: center;
    color: gray;
}
#configWrap .setupAccountByUser { border-bottom: 1px solid lightgray;}
#configWrap .setupLSA { border-bottom: 1px solid lightgray;}
#configWrap .listSystemData {}
#configWrap .systemLog {}
#configWrap .systemUsage {text-align: right; border-bottom: 1px solid lightgray;}
#configWrap .logout {}

/* WatchDogArea im Header der Seite */
#watchdogClockHead {
    position: absolute;
    left: 0;
    top: 0;
}

#watchdogAlertHead {
    position: absolute;
    right: 0;
    bottom: 0;
}



/*####################################################
Systemauslastungsanzeige
####################################################*/

.liveSystemdataContainer {
    width: 100%;
}
.liveSystemdataGrid{
    /*display: none;*/ 
    
    display: grid;
    grid-template-rows: 1fr 1fr; 
    grid-template-columns: 1fr auto; 
    /* grid-auto-flow: column;  Elemente werden in ihrer Reihenfolge nach dem Schema Spalte->Zeilen angeordnet */
    /*padding: 0.5em;*/
    gap: 0.5em;
    
}
.liveSystemdataContainer .title {
    display: flex;
    /*justify-content: flex-start;*/
    align-items: center;
}

.liveSystemdataContainer .diags {
    border: 1px solid #ddd;
    width: 100%;
}
.liveSystemdataContainer .diags .diag{
    /*border: 1px solid green;*/
    background-color: #eee;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    position: relative;   /* damit das absolut positionierte Kindelement .diagLine hier seinen Parent hat */
}

.liveSystemdataContainer .diags .diag .diagVal,
.liveSystemdataContainer .diags .diag .diagTitle {
    z-index: 1;
    text-shadow: -1px 0 0.3px #eee, 0 1px 0.3px #eee, 1px 0 0.3px #eee, 0 -1px 0.3px #eee;
    min-width: 2.5em;
}

.liveSystemdataContainer .diags .diag .diagLine {
    position: absolute;
    top: 0;
    left: 0;
    background-color: lightgray;
    height: 100%;
    width: 0;
    transition: all 3s cubic-bezier(.45,.05,.55,.95);
}

.liveSystemdataContainer .diags .diag .CPUavgLine[state="ok"],
.liveSystemdataContainer .diags .diag .CPUcurrLine[state="ok"],
.liveSystemdataContainer .diags .diag .STORsysLine[state="ok"],
.liveSystemdataContainer .diags .diag .STORdataLine[state="ok"]{
    background-color: darkgreen;
}
.liveSystemdataContainer .diags .diag .CPUavgLine[state="warn"],
.liveSystemdataContainer .diags .diag .CPUcurrLine[state="warn"],
.liveSystemdataContainer .diags .diag .STORsysLine[state="warn"],
.liveSystemdataContainer .diags .diag .STORdataLine[state="warn"]{
    background-color: orange;
}
.liveSystemdataContainer .diags .diag .CPUavgLine[state="alert"],
.liveSystemdataContainer .diags .diag .CPUcurrLine[state="alert"],
.liveSystemdataContainer .diags .diag .STORsysLine[state="alert"],
.liveSystemdataContainer .diags .diag .STORdataLine[state="alert"]{
    background-color: red;
}
.liveSystemdataContainer .diags .diag .CPUavgLine[state="fail"],
.liveSystemdataContainer .diags .diag .CPUcurrLine[state="fail"],
.liveSystemdataContainer .diags .diag .STORsysLine[state="fail"],
.liveSystemdataContainer .diags .diag .STORdataLine[state="fail"]{
    background-color: lightgray;
}

/*
.liveSystemdataContainer .diags .diag .CPUavgLine{width: 0;}
.liveSystemdataContainer .diags .diag .CPUcurrLine{width: 0;}
.liveSystemdataContainer .diags .diag .STORsysLine{width: 0;}
.liveSystemdataContainer .diags .diag .STORdataLine{width: 0;}
*/

/*####################################################
 Leaflet - Kartenansicht - Map
####################################################*/

path.leaflet-interactive:focus {
    outline: none;
}