<!-- 

:root {
/* ----------------------------------------- Abstand ------------------------------*/

    --abstand_0:                0.5em;
    --abstand_1:                0.3em;

/* ----------------------------------------- Farbe --------------------------------*/

    --gruen:                    lime;
    --rot:                      tomato; /*coral;*/
    --braun:                    maroon;
    --user:                     deepskyblue;
    --farbe_basis:              rgba(0,20,50,0.7);
    --farbe_header:             #010135;
    --farbe_input:              lavender;
    --drueber:                  yellow;
  /* ----------------------------------------- Sonst ------------------------------*/
  
    --tabellenbreite:           37%;
}

.w3-overlay{
    position:                   fixed;
    display:                    none;
    width:                      100%;
    height:                     100%;
    top:                        0;
    left:                       0;
    right:                      0;
    bottom:                     0;
    background-color:           rgba(0,0,0,0.5);
    z-index:                    2
}

.w3-animate-left{
    position:                   relative;
    animation:                  animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}
}

.w3-animate-opacity{
    animation:                  opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}
}

.w3-sidebar{
    height:                     100%;
    width:                      200px;
    background-color:           var(--farbe_header);
    position:                   fixed!important;
    z-index:                    1;
    overflow:                   auto
}

/* ------------------------------------------------------------------------------------------- */
/* Extra small devices (phones, 600px and down)                      max-width:  600px   100%  */
/* Small devices (portrait tablets and large phones, 600px and up)   min-width:  600px   100%  */
/* Medium devices (landscape tablets, 768px and up)                  min-width:  768px   100%  */
/* Large devices (laptops/desktops, 992px and up)                    min-width:  768px    70%  */
/* Extra large devices (large laptops and desktops, 1200px and up)   min-width: 1200px    --   */
/* ------------------------------------------------------------------------------------------- */


/* Extra small devices (phones, 600px and down)*/
@media only screen and (max-width:600px) {
    :root {
        --input_links:          2em;
        /* Handbuch */  
        --abstand_2:                3%;       /* rechts */
        --abstand_3:                1%;
        --abstand_4:                5%;
        --abstand_5:                10%;
        --abstand_6:                13%;
        /* Handbuch */
    }

    .anzeige{
        width:                  100%;
        margin:                 0 auto;      
    }
    
    .form{ 
        width:                  100%;
    }
    
    .optionen{
        width:                  100%;
    }
    
    .text{
        width:                  60%;
    }
    
    table.breit{
        width:                  100%;
    }
       
    img.uebersicht{
        width:                  100%;
        height:                 auto;
        vertical-align:         middle;
    }      
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    :root {
        --input_links:          2em;
        /* Handbuch */  
        --abstand_2:                3%;       /* rechts */
        --abstand_3:                1%;
        --abstand_4:                5%;
        --abstand_5:                10%;
        --abstand_6:                13%;
        /* Handbuch */
    }

    .anzeige{
        width:                  100%;
        margin:                 0 auto;      
    }
    
    .form{ 
        width:                  100%;
    }
    
    .optionen{
        width:                  100%;
    }
    
    .text{
        width:                  60%;
    }
    
    table.breit{
        width:                  100%;
    }
       
    img.uebersicht{
        width:                  100%;
        height:                 auto;
        vertical-align:         middle;
    }      
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    :root {
        --input_links:          2em;
        /* Handbuch */  
        --abstand_2:                3%;       /* rechts */
        --abstand_3:                1%;
        --abstand_4:                5%;
        --abstand_5:                10%;
        --abstand_6:                13%;
        /* Handbuch */
    }

    .anzeige{
        width:                  100%;
        margin:                 0 auto;      
    }
    
    .form{ 
        width:                  100%;
    }
    
    .optionen{
        width:                  100%;
    }
    
    .text{
        width:                  60%;
    }
    
    table.breit{
        width:                  100%;
    }
       
    img.uebersicht{
        width:                  100%;
        height:                 auto;
        vertical-align:         middle;
    }      
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1500px) {
    :root {
        --input_links:          6em;
        /* Handbuch */  
        
        --abstand_2:                3%;       /* rechts */
        --abstand_3:                5%;
        --abstand_4:                8%;
        --abstand_5:                11%;
        --abstand_6:                14%;
        /* Handbuch */
    }

    .anzeige{
        width:                  var(--tabellenbreite);      
        margin:                 0 auto 0 auto;
    }
    
    form{ 
        width:                  70%;
    }
    
    optionen{
        width:                  var(--tabellenbreite);
    }
    
    .text{
        width:                  calc(var(--tabellenbreite) * 0.5);
    }
    
    table.breit{
       width:                   80%;
    }
       
    img.uebersicht{
        width:                  100%;
    }      
}

/* Extra large devices (large laptops and desktops, 1200px and up) 
@media only screen and (min-width:1200px){...}*/


html {
}

body{
    background-image:           url(../img/foto.jpg);
    background-color:           gainsboro;
    background-position:        center;
    background-repeat:          no-repeat;
    background-size:            cover;
    position:                   relative;
    display:                    block;
    font-size:                  medium;
    margin:                     0;
    color:                      white;
}

.container{
    height:                     100vh; 
    overflow:                   auto;
    display:                    grid;
    grid-template-rows:         2.5em 1fr; 
    grid-template-columns:      1fr; 
    grid-template-areas:
       "head"
       "cont";
}

.header {
    align-items:                center;
    grid-area:                  head;
    grid-row:                   1;
    background-color:           var(--farbe_header);
    position:                   sticky;
    overflow-y:                 auto;
    margin:                     0;
}

.content{
    align-items:                start;
    grid-area:                  cont;
    grid-row:                   2;
    overflow-y:                 auto;
    margin:                     0;
}

.rand{
    margin:                     1em 0;
}   

form{
    margin:                     0 auto;
    padding:                    0;
    display:                    flex;
    flex-direction:             column;
    justify-content:            space-around; 
    align-items:                flex-start; 
    flex-wrap:                  wrap; 
}

form.select{
    padding:                    0;
    background-color:           transparent;
}

.form{                                  /* für div */
    margin:                     0 auto;
    padding:                    0.8em 0;
    background-color:           var(--farbe_basis);
}

.flex-item {
    margin:                     0.3em 0 0 var(--input_links);
    flex-grow:                  1;
    flex-shrink:                1;
}

/* ----------------------------------------- input ------------------------------*/

input{
    background-color:           transparent; 
    color:                      yellow;
    font-size:                  medium;
    font-weight:                initial;
    border-style:               none;
    padding:                    0 0 0 0.2em;
}

input[type=number] {
    -moz-appearance:            textfield;
}

input:valid {
    color:                      var(--gruen);
}

input:invalid {
    color:                      yellow; 
}

input.auswahl{
    background-color:           white; 
    font-size:                  medium;
    border-style:               solid;
    padding:                    revert;
    text-align:                 center;
}

input.passwort{
    background-color:           transparent;
    color:                      var(--farbe_header); 
    font-size:                  larger;
    border-bottom:              2px solid black;
    text-align:                 center;
}

input.passwort:valid{}
input.passwort:invalid{}

input.passwort_update{
    background-color:           transparent;
    color:                      yellow; 
    font-size:                  larger;
    border-bottom:              1px solid white;
    text-align:                 center;
}

input.passwort_update:valid{}
input.passwort_update:invalid{}

input.jahreszahl{
    background-color:           transparent;
    color:                      var(--farbe_header); 
    font-size:                  larger;
    border-bottom:              2px solid black;
    text-align:                 center;
}

input.jahreszahl:valid{}
input.jahreszahl:invalid{}

input.login{
    color:                      var(--farbe_header);
    background-color:           lavender;
    border:                     2px solid var(--farbe_header);
    border-radius:              10px;     
    appearance:                 none;
    padding:                    0.1em 1em;
    font-size:                  larger;
    text-align:                 center;
    cursor:                     pointer;
}

input.datum{
    font-size:                  large;
    text-align:                 left;
    border-bottom:              1px solid white;
    width:                      9em;
}

input.zahl, input.string{
    border-bottom:              1px solid white;
}

input.button, input.save, input.delete, input.update, input.exit{
    color:                      white;
    background-color:           rgba(0,20,50,0.2);    /*var(--farbe_basis);*/
    border:                     2px groove white;    
    border-radius:              10px;     
    appearance:                 none;
    padding:                    0.4em 1em 0.4em 1em;
    width:                      8em;
    text-align:                 center;
    cursor:                     pointer;
}

input.save:hover {
    color:                      var(--gruen); 
}

input.delete:hover {
    color:                      red; 
}

input.update:hover {
    color:                      var(--user); 
}

input.exit:hover {
    color:                      yellow; 
}

label{
    padding-left:               0.2em;
}

label.oForm{
    margin:                     0 0 1em 0 ;
    font-size:                  medium;
}

label.schalter{
    color:                      var(--farbe_header);
    text-align:                 center;
    font-weight:                bold;
    font-size:                  medium;    
}

select{
    background-color:           var(--farbe_input);
    color:                      var(--farbe_basis);
    font-size:                  medium;
    font-weight:                bold;
    width:                      auto;
    padding:                    0.2em 0 0.2em 0.5em;
}

select.uhr{
    background-color:           transparent;
    color:                      lavender;
    font-size:                  medium;
    font-weight:                normal;
    width:                      auto;

}

select.input{
    color:                      var(--gruen);
    background-color:           rgba(73, 73, 88, 0.4);
    font-size:                  medium;
    font-weight:                initial;
    border-top:                 0px;
    border-right:               0px;
    border-left:                0px;
    border-bottom:              1px solid white;
    padding:                    0;
    width:                      auto;
}

textarea{
    color:                      var(--gruen);
    background-color:           transparent;
    font-size:                  larger;
    border-top:                 0px;
    border-right:               0px;
    border-left:                0px;
    border-bottom:              1px solid white;
    margin:                     0;
    padding:                    0.1em;
    height:                     initial;
}

.span_zeile {
    display:                    inline;
}

.file_input {
    width:                      0.1px;
	height:                     0.1px;
	opacity:                    0;
	overflow:                   hidden;
	position:                   absolute;
	z-index:                    -1;     
    cursor:                     pointer;
}
   
.file_input + label {
    font-size:                  medium;
    color:                      yellow;
    background-color:           transparent;
    border-bottom:              1px solid white;
    display:                    inline-block;
}

.file_input:focus + label,
.file_input + label:hover {
    cursor:                     pointer;
}  

.file_input_tmp{
    width:                      0.1px;
	height:                     0.1px;
	opacity:                    0;
	overflow:                   hidden;
	position:                   absolute;
	z-index:                    -1;     
    cursor:                     pointer;
 }   

/* ----------------------------------------- button ------------------------------*/

button{
    border:                     none;
    background-color:           transparent;
    cursor:                     pointer; 
    color:                      white;
    font-weight:                bold;
    text-align:                 center;
    text-decoration:            none;
    font-size:                  medium;
    padding-top:                0.2em;
    padding-bottom:             0.2em;
}
  
button:hover {
    background-color:           royalblue;
}

button.header{
    padding:0;
    margin:0;
}

button.header_2{
    padding:0;
    margin:0;
    border:              1px solid white;    
}

button.Home{
    background-color:yellow;
    color:var(--farbe_basis);
    border-radius:0.4em;
}
        
button.Klapp{
    color:                      cyan;
    font-size:                  x-large;
}

button.Delete{
    background-color:           #f43636;
    width:                      3em;
    font-size:                  initial;
    border-radius:              0.4em;
}
  
button.Add{
    background-color:           green;
    border-radius:              0.4em;
    width:                      12em;
    margin-bottom:              2em;    
}

button.Update{
    background-color:           blue;
    width:                      3em;
    font-size                   :initial;
    border-radius:              0.4em;
}

button.Exit{
    background-color:           yellow;
    width:                      3em;
    font-size:                  initial;
    border-radius:              0.4em;
}

button.Read{
    background-color:           red;
    width:                      3em;
    font-size:                  small;
    border-radius:              0.4em;
}

button.Tankstelle{
    border-style:               double;
    text-align:                 center;
    font-size:                  2em;
    margin-bottom:              0.5em;
    color:                      var(--farbe_header);
}

button.kfz{
    border-radius:              0.4em;
    border-style:               double;
    border-color:               var(--farbe_header);
    font-weight:                bold;
    background-color:           lavender;
    color:                      var(--farbe_header);
    text-align:                 center;
    width:                      95%;
    font-size:                  medium;
    padding:                    0.2em 0;
}

button.uhr{
    border-radius:              0.4em;
    border-style:               double;
    border-color:               lavender;
    font-weight:                bold;
    background-color:           var(--farbe_basis);
    color:                      lavender;
    text-align:                 center;
    width:                      95%;
    font-size:                  medium;
    padding:                    0.2em 0;
    margin:                     2em auto auto auto;
}


.Leistungsumfang{
    background-color:           var(--farbe_header);
    border-radius:              0.4em;
    border:                     2px solid yellow;
    color:                      yellow;
    font-weight:                normal;
    font-size:                  unset;
    padding:                    2em;
}


.sitemap{
    border-radius:              0.4em;
    border:                     2px solid;
    font-weight:                bold;
    background-color:           var(--farbe_basis);
    text-align:                 center;
    font-size:                  medium;
    width:                      15em;
    padding:                    1em 0;
}

.unabhaengig{
    color:                      cyan;
    border-color:               cyan;
}

.abhaengig{
    color:                      var(--gruen);
    border-color:               var(--gruen);
}

.ebene2{
    width:                      8em;
}
.ebene3{
    width:                      1em;
}
/* ----------------------------------------- button ------------------------------*/

.headline{
    margin:                     0 auto 1em auto;
    padding:                    0;
    font-size:                  large;
    font-weight:                bold;
    text-align:                 center;
    background-color:           transparent;
    width:                      auto;
    text-decoration:            underline;
    color:                      black;
}*/

.loeschfreigabe{
    white-space:                nowrap;
    display:                    contents;
    margin-top:                 1em;
    color:                      coral;
}

.handbuch{
    color:                      white;
    font-size:                  medium;
    background-color:           transparent;
    margin:                     1em 0 3em 0;
}

.text{
    color:                      white;
    font-size:                  medium;
    margin:                     0 auto 1em auto;
    font-weight:                bold;
    text-align:                 center;
    background-color:           var(--farbe_basis);
}

.text_nav{
    font-size:                  medium;
    font-weight:                bold;
    text-align:                 right;
    padding-right:              var(--abstand_0);
}

.text_ausgabe{
    margin:                     0.1em auto 1em auto;
    width:                      95%;
    font-size:                  medium;
    font-weight:                bold;
    text-align:                 center;
    color:                      white;
}

.text_meldung{
    margin:                     0 auto 1em auto;
    font-weight:                bold;
    text-align:                 center;
    font-size:                  medium;
    background-color:           yellow;
    color:                      black;
}

.text_uebersicht{
    background-color:           white;
    border-style:               double;
    color:                      black;
    text-align:                 center;
    padding-left:               0em;
    margin-bottom:              0.5em;
}

.text_cockpit{
    text-align:                 center;
    color:                      cyan;
    padding:                    0.5em 0 0 0;
}

.verbrauch_ok{
    color:                      var(--gruen);
    font-size:                  medium;
}
  
 .verbrauch_n_ok{
    color:                      var(--rot);
    font-size:                  medium;
    font-weight:                bold;
}

 .verbrauch_ohne{
    color:                      white;
    font-size:                  medium;
}

a{
    text-decoration:            none;
    color:                      var(--gruen);
    background-color:           transparent;
} 


a.link{
    color:                      var(--farbe_input);
}

p.handbuch_0{
    margin:                     1em auto;
    text-align:                 center;
    font-size:                  large;
}

p.handbuch_1{
    margin:                     1em var(--abstand_2) 0 var(--abstand_3);
}

/* fs = fahrzeugspezifisch */
p.handbuch_1_fs{
    margin:                     1em var(--abstand_2) 0 var(--abstand_3);
    color:                      var(--gruen);
}
/* nfs = nicht fahrzeugspezifisch */
p.handbuch_1_nfs{
    margin:                     1em var(--abstand_2) 0 var(--abstand_3);
    color:                      cyan;
}

p.handbuch_1_etb{
    margin:                     1em var(--abstand_2) 0 var(--abstand_3);
    color:                      deepskyblue;
}

p.handbuch_2{
    margin:                     1em var(--abstand_2) 0 var(--abstand_4);
}

p.handbuch_3{
    margin:                     1em var(--abstand_2) 0 var(--abstand_5);
}

p.handbuch_4{
    margin:                     1em var(--abstand_2) 0 var(--abstand_6);
}

p.handbuch_2_L{
    margin:                     1em var(--abstand_2) 0 var(--abstand_4);
    color:                      yellow;    
}

p.handbuch_3_L{
    margin:                     1em var(--abstand_2) 0 var(--abstand_5);
    color:                      yellow;    
}

p.handbuch_4_L{
    margin:                     1em var(--abstand_2) 0 var(--abstand_6);
    color:                      yellow;    
}

p.handbuch_tip{
    border:                     2px;
    border-style:               dotted;
    padding:                    1em;      
    color:                      navajowhite;  
    margin:                     1em var(--abstand_2) 0 var(--abstand_3);
}

p.impressum{
    margin-left:                10%;
    margin-right:               10%;      
}

img.uebersicht{
    border:                     2px solid yellow;
/*    width:                      100%; */
    width:                      -moz-available;          /* WebKit-based browsers will ignore this. */
}

img.logo{
    border:                     2px solid yellow;
    display:                    flex;
}

hr{
    color:                      white;
}

hr.trenn{
    border-bottom:              2px dotted white;
    margin-left:                var(--abstand_2);
}
  
table{
    border:                     0;
    border-spacing:             0;
    margin:                     0 auto;
    white-space:                pre-line;
    width:                      100%;
    color:                      white;
}

table.Handbuch{
    margin:                     0 0 0 var(--abstand_2);
}

table.Screen_uebersicht{
    display:                    table;
    margin-left:                10%;
}

table.oben{
    border:                     0;
    border-spacing:             0;
    margin:                     0 auto 2em auto;
    white-space:                pre-line;
    color:                      white;
}

table.breit{
    background-color:           transparent;
}

table.sidebar{
    margin-left:                1em;
    margin-right:               0;
    margin-top:                 1em;
    width:                      initial;
}

table.loeschen{
    table-layout:               auto;
    margin-top:                 1.3em;
}     

table.app_erfassung{
    padding:                    0;
    width:                      100%;
}

tbody {
}

tr{
    background-color:           var(--farbe_basis);
}

tr.leer {
    background-color:           transparent;
}

tr.klapp {
    margin:                0 auto;
}

tr.abstand {
    background-color:           transparent;
    font-size:                  0.7em;
}

tr.eingabe{
    background-color:           transparent;
    font-size:                  0.3em;
}

tr.nav {
    padding:                    0;
}

td {
    padding:                    var(--abstand_1) 0;
    margin:                     0;
    font-size:                  medium;
}

td.uhr{
    padding-left:               1em;
    color:                      lavender;
}

td.handbuch_1{
    border-bottom:              2px dotted white;  
}

td.handbuch_2{
    color:                      cyan;
    text-align:                 center;
}
td.klapp_button{
    padding:                    0;
    text-align:                 center;
}

td.klapp {
    padding:                    0;
    font-size:                  x-large;   
}

td.sidebar {
    white-space:                break-spaces;
    display:                    flex;
    padding:                    1em 0 0 1em;
}

td.nav {
    padding:                    var(--abstand_1) 0;
}

td.null {
    padding:                    0;
}

ul{
    list-style-type:            none;
    display:                    block;
    margin:                     0;
    margin-block-start:         0;
    margin-block-end:           0;
    margin-inline-start:        0;
    margin-inline-end:          0;
    padding:                    0;
    padding-inline-start:       0;
    overflow:                   hidden;
    text-align:                 left;
}

ul.nav {
    margin-top:                 var(--abstand_0);
    margin-bottom:              var(--abstand_0);  
}

ul li{    
    margin:                     0;
    list-style:                 none;   
    font-size:                  medium;
    float:                      left;
}

ul li.box{
    float:                      inherit;
    background-color:           var(--farbe_basis);
    padding-top:                0.5em;
    padding-left:               0.5em;
}

ul li.ueberfaellig{
    color:                      var(--rot);
}

ul li.faellig{
    color:                      var(--gruen);
}

ul li.nav_rechts {
    margin-top:                 var(--abstand_1);
    margin-bottom:              var(--abstand_1);
    margin-left:                1em;
    float:                      right;
}

ul li.nav_links {
    margin-top:                 var(--abstand_1);
    margin-bottom:              var(--abstand_1);  
    margin-right:               1em;
 }
 
ul li.app {
    float:                      inherit;
    margin-bottom:              var(--abstand_1);
}

ul li.app_rechts {
    float:                      right;
}

canvas{
    width:                      inherit;                                                       /*-webkit-fill-available;  !!!!!!!!!!     */
}                                                                                             /*height:400;*/

pre{
    color:                      black;
    font-size:                  large;
}

.graf{
    width:                      100%;      
}

.kfz_anzeige {
    background-color:           transparent;
    border-width:               0 0 5px 0;
    border-style:               solid;
    border-color:               crimson;
    margin:                     0 auto 1em auto;
    width:                      50%;  
    text-align:                 center;
    color:                      darkblue;
    font-size :                 larger;
    font-weight:                bold;
}

.menuepunkt {
    text-align:                 center;
    margin:                     0.6em 0 0.2em 0;
    font-size:                  large;
    color:                      var(--farbe_header);
    font-weight:                bold;
}

#rectangle{
    width:                      1em;
    height:                     1em;
}

/* -------------------------------------------------------------------------------------------------------- */
/* -------------------------------------     Custom chart  ------------------------------------------------ */

/* Custom chart styling */
.jOrgChart {
    margin:                     10px;
    padding:                    20px;
}

/* Custom node styling */

.node p{
    font-family:                tahoma;
	font-size:                  10px;
	line-height:                11px;
	padding:                    2px;
    color:                      var(--gruen);
}

/* -------------------------------------------------------------------------------------------------------- */

.jOrgChart .line {
    height:                     20px;
    width:                      4px;
}

.jOrgChart .down {
    background-color:           var(--farbe_header);	
    margin:                     0px auto;
}

.jOrgChart .top {
    border-top:                 3px solid var(--farbe_header);
}

.jOrgChart .left {
    border-right:               2px solid var(--farbe_header);
}

.jOrgChart .right {
    border-left:                2px solid var(--farbe_header);
}

/* node cell */
.jOrgChart tr {
    background-color:           transparent;   
}

.jOrgChart td {
    text-align:                 center;
    vertical-align:             top;
    color:                      yellow;
    padding:                    0;
}

/* The node */

.jOrgChart .node {
    display:                    inline-flex;
    margin:                     0;
    padding:                    0 0.5em; 
    z-index:                    10;
}

/* jQuery drag 'n drop */

.drag-active {
    border-style:               dotted !important;
}

.drop-hover {
    border-style:               solid !important;
    border-color:               #E05E00 !important;
}