body{
  font: normal 8pt Arial, sans-serif;
}
/*---------------------------------------------------------------*/
a{
  color: navy;
  /* text-decoration: none; */
}
a.folder{
  color: green;
  /* font-style: italic; */
}
a.help{
  font-weight: bold;
  color: blue;
}
/*---------------------------------------------------------------*/
button.dropbutton{
  font-size: 8pt;
  border: none;
  background-color: #f1f1f1;
  color: black;
  padding: 2px;
  cursor: pointer;
  width: 300px;
  text-align: left;
}
button.dropbutton:hover{
  background-color: #555555;
  color: white;
}
/*-----------------------------------------------------------------
Arrows 
Besonderheit: diese Klassen koennen z.B. auch dem "nebenwirkungsfreien" 
              Tag <i class="arrow right"></i> zugewiesen werden
-----------------------------------------------------------------*/
.arrow{
  display: inline-block;     /* entscheidend: inline-block kann im Gegensatz zu inline gedreht werden ! */
  border: solid black;
  border-width: 0 1px 1px 0; /* untere und rechte Linie gefuellt _|  */
  padding: 3px;
}
.arrow:hover{
  border-color: white;
}
.rotateright {
  transform: rotate(-45deg);
}

.rotateleft {
  transform: rotate(135deg);
}

.rotateup {
  transform: rotate(-135deg);
}

.rotatedown {
  transform: rotate(45deg);
}
/*-----------------------------------------------------------------
Grid 
- umschliessendes Grid
  - Hoehe: 100vf (100% viewport-heigt)
  - vertikale Ausrichtung
  - dessen direkte Kinder werden zu Grid-Elementen
  - 2 Elemente
    - oberes Element Hoehe auto 
      - dieses Element benoetigt keine eigene Style-Anweisung
    - unteres Element
      - 1fr (one fraction remaining == gesamter Restplatz)
      - Scrollbalken in y-Richtung
-----------------------------------------------------------------*/
div.divgridvert{
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh
}
div.divgridvertlower{
  overflow-y: auto;
}
/*---------------------------------------------------------------*/
div.dropdiv{
  display: none;
}
/*---------------------------------------------------------------*/
input[type="button"].report{
  font-weight: bold;
  font-size: 8pt;
  background-color: lavender;
}
input[type="range"].report{
  width: 40pt;
}
/*---------------------------------------------------------------*/
table{
  border: 1px solid black; 
  border-collapse: collapse;
}
td,th{
  border: 1px solid black; 
  padding: 3px;
}
th{
  text-align: left;
}
/*---------------------------------------------------------------*/
table.nolines, table.form{
  border: none;
}
.nolines td, .nolines th, .form td, .form th{
  border: none;
}
/*---------------------------------------------------------------*/
table.pivot{
  border: none;
  color: black;
  font-size: 8pt;            /* fuer dynamische Aenderung via Javascript */
  & td, th{
    border: none;
    text-align: right; 
  }
  & tr:nth-child(1){    /* Zeile 1 */
    font-weight: bold;
    color: green;
  }
  & tr.level1{
    background-color: powderblue;
  }
  & tr.level2{
    background-color: #e8f1d4;  /* Chrome White */
  }
  & tr.level3{
    background-color: LemonChiffon;  /* */
  }
  & tr.level4{
  }
}
/*---------------------------------------------------------------
Reports aller Art und 
mit mycsv2htmlplain aus csv erzeugte Tabellen
---------------------------------------------------------------*/
table[class^=report], table[class^=csv]{
  text-align: right;
  font-size: 8pt;
  & col{
    white-space: nowrap;               /* in Firefox keine Funktion wrap/nowrap */
    overflow: hidden;                  /* (fuer: table-layout: fixed  und width <zahl>;) */
    text-overflow: ellipsis;           /* (fuer: table-layout: fixed  und width <zahl>;) */ 
  }
  & td, th{
    border: none;                      /* Keine Rahmen */
    text-align: right; 
    white-space: nowrap;               /* in Firefox keine Funktion wrap/nowrap */
    overflow: hidden;                  /* (fuer: table-layout: fixed  und width <zahl>;) */
    text-overflow: ellipsis;           /* (fuer: table-layout: fixed  und width <zahl>;) */ 
  }
}
/*---------------------------------------------------------------
Report mit Teilsummen:
  - Zwischen-Headerzeilen
  - altiernierende Zeilenfarbe fuer Zeilen der Klasse dataRow
  - Summenzeilen
---------------------------------------------------------------*/
table.reportPartialSum{
  table-layout: auto;    /* Default: auto  fixed bedingt width-Angabe */
  width:  auto;          /* auto entwertet table-layout: fixed (Fixe Zahl zwingend fuer Wirksamkeit) */
  font-size: 8pt;        /* wird via Hotkey in Javascript veraendert */
  & tr.header{
    color: #2F539B; 
    font-weight: bold;
    cursor: pointer;
  }
  & tr.header:nth-child(1){
    background-color: #ffe87c; /* sun yellow */
  }
  & tr.sum{
    background-color: white;
    font-weight: bold;
    & td{
      border: none; 
    }
  }
  & tr.dataRow:nth-child(2n){
    background-color: powderblue;
  }
  & tr.dataRow:nth-child(2n+3){
    background-color: #e8f1d4;  /* Chrome White */
  }
  & tr.empty{
  }
  & th:nth-child(4){
  }
  /*-------------------------------------------------------------
  analog (jedoch nicht zwingend identisch zu) Zell-Klassen fuer 
  mycsv2htmlplain-Tabellen unten
  -------------------------------------------------------------*/
  & td.good{
    color: darkgreen;
  }
  & td.bad{
    color: red;
  }
  & td.virtual{
    color: chocolate;
  }
  & td.marker_1{
    color: darkviolet;
  }
  & td.marker_2{
    color: crimson;
  }
  & td.left{
    text-align: left;
  }
  & td.sum{
    font-weight: bold;
  }
}
/*---------------------------------------------------------------
Technische Tabellen
---------------------------------------------------------------*/
table.reportFilter, table.reportMainConfig, table.reportHistStyle, table.reportSortOrder, table.reportDownload, table.reportPivot, table.reportPlot, table.reportButtons{
  /* border: 1px solid black; */
  border: none;
  border-collapse: collapse;
  & a{
    font-weight: bold;
    text-decoration: underline; 
  }
  & tr.header{
    color: #2F539B;  
    font-weight: bold;
  }
  & th, & td{
    /* border: 1px solid black; */
    border: none;
    text-align: center;
  }
  & td.legend{
    font-weight: bold;
    color: blue;
  }
  & input[type="checkbox"]{
    accent-color: #2F539B;
  }
  & input[type="button"]{
    font-weight: bold;
    background-color: lavender;
  }
}
table.reportMainConfig{
  border: 1px solid black;
  & th, & td{
    /* border: 1px solid black; */
  }
}
/*---------------------------------------------------------------
mit mycsv2htmlplain aus csv erzeugte Tabellen
---------------------------------------------------------------*/
table.csvPlain{
  /* font: normal 8pt Courier, sans-serif; */
  /* border: none; */
  border-collapse: collapse;
  & tr.header{
    background-color: #ffe87c; /* sun yellow */
    color: #2F539B;  
    font-weight: bold;
  }
  & tr.sum{
    font-weight: bold;
  }
  & td,th{
    border: 1px solid black; 
    padding: 3px;
  }
  & td.good{
    color: darkgreen;
  }
  & td.bad{
    color: red;
  }
  & td.virtual{
    color: chocolate;
  }
  & td.left{
    text-align: left;
  }
}
/*---------------------------------------------------------------*/
div.hint{
  font-weight: bold;
  font-size: 8pt;
  color: blue;
}
div.invisible{
  display: none;
}
/*---------------------------------------------------------------*/
textarea, input[type="text"]{
  color:blue;
  font-size: 8pt;
}
/*---------------------------------------------------------------*/
em.problem{
  color: crimson;
}
em.solution{
  color: darkgreen;
}
em.citation{
  color: green;
}
em.demo{
  color: crimson;
  font-weight: bold;
}
em.file{
  color: green;
}
em.bash{
  color: maroon;
}
em.topic{
  color: olive;
}
em.error{
  color: red;
}
em.advert{
  color: orange;
  font-weight: bold;
  font-style: normal;
}
em.bold{
  font-weight: bold;
}
/*---------------------------------------------------------------*/
figcaption{
  font-weight: bold;
  color: blue;
}
figcaption.raw{
  font-weight: normal;
  color: black;
}
/*---------------------------------------------------------------*/
 /* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .sidenavdropbutton {
  padding: 6px 8px 6px 16px;            /* padding ist immer relativ zu padding des Elternelementes => iteratives padding */
  text-decoration: none;
  font-size: 8pt;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .sidenavdropbutton:hover {
  color: #f1f1f1;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.sidenavdropcontainer {
  display: none;
  background-color: #262626;
  padding-left: 8px;     /* padding ist immer relativ zu padding des Elternelementes => iteratives padding */
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 8pt; 
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
  background-color: green;
  color: white;
}