/* ---- definice proměnných ---- */
:root {
  /*--barvy--*/
  --main-bg-color: rgb(250,247,204);
  --main-bg-color-medium: rgb(240,237,194);
  --main-bg-color-dark: rgb(230,227,184);
  --main-border-color: rgb(214,159,53);
  --nadpis-color: rgb(6,66,103);
  /*--rozměry--*/
  --top-box-height: 35px;
  --left-box-width: 260px;  
  --setup-top: 260px;
  --setup-height: 505px;
  --panorama-width: 320px;
  --panorama-height: 240px;  
}

/* ---- obecné ---- */

* {
  font-family: Arial;
  color: black;
}

body {
  padding: 0;        
}

/* ---- boxy ---- */

#top_box {        
  height: var(--top-box-height);  
  border-bottom: solid 1px var(--main-border-color);  
  font-size: calc(var(--top-box-height) / 4);
  color: var(--nadpis-color);
}

#nadpis {
  font-size: calc(var(--top-box-height) / 2);
  color: var(--nadpis-color);
}
#logo {  
  width: var(--width);                  
  padding: 5px;
  margin-right: calc(var(--width) * 2 / 3);        
}
#logo img {  
  height: 25px;
  width: auto;
}


#msg_box {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 200px;
  width: auto;
  max-width: calc(100vw);
  min-height: 3em;
  height: auto;
  max-height: calc(100vh - 20px); 
  background-color: green;
  color: yellow;
  border: solid 1px silver;
  border-radius: 5px;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  z-index: 100;
  overflow: auto;   
}

#msg_box.red {
  background-color: darkred;
  color: white;
}


#left_box {
  width: calc(100vw - 30px);  
  height: calc(100vh - 30px);  
  background-color: var(--main-bg-color);
  border: solid 1px var(--main-border-color);
  border-radius: 5px;
  //box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.75);
  padding: 5px;
  margin: 0;
  overflow: hidden;   
  z-index: 3;   
}


/* ---- okna ---- */

#win_panorama {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 320px;
  max-width: calc(100vw - 20px);
  height: 240px;
  max-height: calc(100vh - 20px);
  background-color: white;
  border: solid 1px gray;
  border-radius: 5px;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
  z-index: 5;
}


#main_mapa, #main_graf, #main_kontakt, #main_statistika, iframe {
  
  height: calc(100vh - 30px);
  /*margin-left: 265px;*/
  margin: 0;  
  border: solid 1px var(--main-border-color);
  border-radius: 5px;
  //box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.75);
  overflow: hidden;
  position: absolute;
  /*top: calc(var(--top-box-height) + 20px);*/
  left: 5px; 
}
#main_graf, #main_kontakt, #main_statistika, iframe {
  padding: 5px;
  width: calc(100vw - 20px);
}
#main_mapa {
  width: calc(100vw - var(--left-box-width) - 30px);
  left: 279px;
  border-radius: 0 5px 5px 0;
  padding: 0;
  height: calc(100vh - 17px);    
}
iframe {
  overflow: auto;
}
#mapa, #kontakt {
  height: calc(100vh - 40px);
  width: calc(100vw - var(--left-box-width) - 30px);
}
#mapa {
  height: calc(100vh - 15px);
}
#graf {
  width: calc(100vw - 20px);   
  height: calc(100vh - 220px);
  max-height: calc(50% - 20px);
  //border: solid 1px red;   
}

#layers {
  position: fixed;
  left: 10px;  
  bottom: 10px;
  width: calc(100vw - 30px);
  max-width: 250px; 
  background-color: var(--main-bg-color-medium);
  border: none; //solid 1px var(--main-border-color);  
  z-index: 1;
  padding: 5px;
  border-radius: 5px;  
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  max-height: calc(100vh - 30px);
  overflow-x: hidden;
  overflow-y: auto; 
}

#help {
  position: fixed;
  /*bottom: 30px;*/
  top: 20px;
  left: 250px;
  /*font-style: italic;*/
  font-size: small;
  color: silver;
  border-radius: 10px;
  border: solid 1px silver;
  width: 17px;
  height: 17px; 
  text-align: center;
}

#main_poruchy {
  margin-top: 10px;
  font-size: small;
}

#poruchy {  
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;         
  padding: 5px;
  min-height: 30px;
  max-height: calc(100vh - 300px);
  font-size: small;       
}

#poruchy td {
  border: none;
  padding: 0 2px;
}

#poruchy tr:hover {
  background-color: rgb(255,255,204);
}

#log, #refreshWindow, #debugLog {
  min-width: 200px;
  max-width: 50%;
  min-height: 200px;
  max-height: 50%; 
  position: absolute;  
  top: calc(var(--top-box-height) + 250px);
  background-color: white;
  border: solid 1px var(--main-border-color);
  border-radius: 5px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  z-index: 1;
  padding: 5px;  
  font-size: small; 
  overflow: auto; 
}

#log, #refreshWindow {
  right: 30px;
  text-align: center;
}

#logData {
  width: 100%;
  font-size: small;
  text-align: left;  
}

#refreshWindow {
  top: calc(var(--top-box-height) + 550px);   
}

#debugLog {
  top: calc(var(--top-box-height) + 15px);
  left: 300px; 
}


/* ---- menu ---- */

ul.menuV {
  margin-top: 10px;
  //border: solid 1px var(--main-border-color);
  border: none;    
}
ul.menuV li {
  //border: solid 1px rgb(240,240,240);
  border-bottom: none; 
  background-image: linear-gradient(to right bottom, var(--main-bg-color-dark), var(--main-bg-color));  
  /*margin: 3px 3px 3px 0;
  box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.5);*/  
}      
ul.menuV li:hover {
  background: var(--main-border-color); 
  color: white;
  /*box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.5);
  margin: 3px 2px 1px 1px;*/
}
ul.menuV li.selected {
  //background-color: var(--main-border-color);
  //background-image: linear-gradient(to right bottom, var(--main-bg-color), var(--main-bg-color-dark));
  color: rgb(175,42,42); //yellow;
  /*box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.5);
  margin: 3px 1px 1px 2px;*/
  font-weight: bold;
}

ul.menuV li.disabled {
  color: silver;
  background-image: linear-gradient(to right bottom, var(--main-bg-color-dark), var(--main-bg-color));
}

ul.menuH {
  border: solid 1px var(--main-border-color);  
}
ul.menuH li {
  border-bottom: solid 1px var(--main-border-color);
}      
ul.menuH li:hover {
  background-color: var(--main-border-color);  
}
ul.menuH li.selected {
  background-color: var(--main-border-color);
  color: yellow;
}


/*
table.sticky0 thead {
  position: sticky;
  top: 0;
}
*/


/* ---- mapy ---- */

table.mapa-karta {
  width: 100%;
  font-size: small;
  background-color: var(--main-bg-color);
  border: solid 1px var(--main-border-color);
  border-collapse: collapse;  
}    
table.mapa-karta td {
  text-align: right;
  font-size: small;
  border: solid 1px var(--main-border-color);
  padding: 2px;
}
table.mapa-karta thead td {
  font-style: italic;
  background-color:  var(--main-bg-color-dark);
}
.mapa-karta-cas {
  width: 70px;  
  font-size: small;
  margin-top: 2px;
  margin-right: 50px;
  float: right;
}

table.cardfoot {
  width: 100%;
  height: 5px;
}
table.cardfoot td {  
  height: 3px;
}


/* ---- grafy ---- */

#graf_hlavicka {  
  margin-left: 65px;
  height: 50px;
  color: blue;
  max-height: 60px;
  overflow: hidden;
}

#graph_legend {
  width: calc(100% - 30px);
  position: absolute;
  left: 10px;
  bottom: 10px;
  border: solid 1px green;
  padding: 5px;
  max-height: calc(40% - 20px);
  overflow-x: hidden;
  overflow-y: auto;
}
#graph_legend_choices {   
  //background-color: yellow;
  float: left;
  list-style-type: none;
  margin: 10px 0 10px 0;
  padding: 0;
}

#graph_legend_choices li {
  display: block;
  float: left;
  padding: 5px;
  width: 100%;
}

#graph_legend_choices label {
  display: inline-block; 
  width: 90px; 
}

#graph_legend_choices span.value {
  display: inline-block; 
  margin-left: 20px; 
  width: 30px; 
  text-align: right;
}

#graph_legend_X {  
  //color: blue;
  //clear: both;
  font-size: small;
  margin-left: 30px;     
}

#graph_legend p {
  margin-top: 10px;
  clear: both;
  font-size: small;
  //padding-left: 100px;
}

.y1Label, .y2Label, .y3Label, .y4Label, .y5Label {  
  font-size: small;
}
.y1Label {  
  fill: violet;
}
.y2Label {  
  fill: green;
}
.y3Label {  
  fill: black;
}
.y4Label {  
  fill: red;
}
.y5Label {  
  fill: brown;
}
.y5Label {  
  fill: blue;
}
.legend {
	display: block;
	-webkit-padding-start: 2px;
	-webkit-padding-end: 2px;
	border-width: initial;
	border-style: none;
	border-color: initial;
	border-image: initial;
	padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: small;
}

.legendLayer .background {
  fill: rgba(255, 255, 255, 0.5);
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 1;
}


/* ---- statistika ---- */  

#statistikaH1 {
  font-size: 100%;
  margin-left: 70px;
}

#statistika_data {
  margin-top: 10px;
  padding: 0;
  height: calc(100vh - 120px); 
  overflow: auto;
}

#statistika_data thead {  
  position: sticky;
  top: 0px;
}

#statistika_data thead td, #statistika_data thead th {
  background-color: white;
  border: solid 1px gray;
}

#statistika_data thead tr.filtr th {
  background-color: silver;
  font-weight: normal;     
}

table.chyby {
  border-collapse: separate;
}
table.chyby td, table.chyby th {
  border: solid 1px gray;
  padding: 2px 5px;
}
table.chyby thead td, table.chyby th {
  background-color: white;
}
table.chyby tbody tr:hover {
  background-color: rgb(255,255,204); 
}


/* ---- mobilní tlačítka ---- */

#cmdMenu {
  position: absolute; 
  top: 20px; 
  left: 15px; 
  //width: 50px; 
  height: 25px; 
  background-color: var(--main-bg-color); 
  border: solid 1px var(--main-border-color);
  border-radius: 5px; 
  z-index: 2; 
  overflow: hidden;
}

#cmdOptions {
  position: absolute; 
  bottom: 22px; 
  left: 15px;    
  height: 25px;  
  background-color: var(--main-bg-color); 
  border: solid 1px var(--main-border-color);
  border-radius: 5px; 
  z-index: 2; 
  overflow: hidden;
}

#layersClose {
  position: fixed; 
  bottom: 20px; 
  right: 20px;
  border-radius: 5px;
  height: 25px;
}



/* ==== mobil ==== */

@media screen and (max-height: 640px) and (orientation: landscape), (max-width: 640px) and (orientation: portrait) {

  #main_mapa, #main_graf {
    width: calc(100vw - 2px);
    height: calc(100vh - 2px);
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;    
    border-radius: 0;
    border: solid 1px var(--main-border-color);
    overflow: hidden;
    position: fixed;
  }
  
  #main_graf {
    padding: 5px;
  }  
  
  #mapa {
    width: calc(100vw - 2px);
    height: calc(100vh - 2px);
    position: fixed;
  }
  
  /*#mainMenu {
    position: fixed;
    top: 0;
    left: 0;    
  }*/
  
  #win_graficek, #win_panorama,
  #win_graficek .closeButton, #win_graficek .zoomButton,
  #grafik {
    /*width: 1px;
    height: 1px;*/
    display: none !important;
  }
  
  #chk_graf, label[for=chk_graf],
  #chk_panorama, label[for=chk_panorama] {
    display: none !important;
  }
   
  div.card  {
    max-width: calc(100vw - 2px) !important;
    left: 0 !important;
    bottom: 50px !important;
    position: fixed !important;
  }

  #graf_menu {
    margin-left: 70px;
  }
    
  #statistikaMenu, #graf_menu ul {
    font-size: 12px;
    width: calc(100vw - 2px);    
  }
  
  ul.menuH {
    border: none;
  }
  
  #statistikaMenu li, #graf_menu ul li {
    padding: 0 3px;
    margin: 0;    
  }
  
  #graf_hlavicka {
    margin-top: 20px;
    height: auto;
  }
  
  #main_poruchy table {
    border-spacing: 10px
  } 
  
}

/* ==== mobil naležato ==== */

@media screen and (max-height: 640px) and (orientation: landscape) {
  
  #main_poruchy {
    margin-left: 300px;    
  }
  #poruchy {
    max-height: calc(100vh - 105px);    
  }
  #logo {  
    float: right;
    margin-right: 80px;     
  }
  #help {
    margin-left: 10px;  
  }
  ul.menuV {
    float: left;
    width: 280px;          
  }
  ul.menuV li {
    padding: 2px 4px;
  }
  #graf {
    width: calc(100vw - 170px);        
    height: calc(100vh - 85px);
    max-height: 100%;            
  }
  #graph_legend {
    float: right; 
    width: 125px;
    position: relative;
    left: auto;
    top: 0px;
    right: 5px;
    font-size: small;
    height: calc(100vh - 95px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    max-height: calc(100% - 20px);    
  }
}



/* ==== mobil na stojato ==== */

@media screen and (max-width: 640px) and (orientation: portrait) {

  #mainMenu {
    position: absolute;
    top: calc(var(--top-box-height) + 50px);
    left: 15px;
    width: calc(100vw - 32px);
    z-index: 10;
  }
  
  #left_box {
    top: 0;
    left: 0;
    margin: 0;
    padding: 5px;
    border-radius: 0;
    width: calc(100vw - 12px);    
    height: calc(100vh - 2px);
    position: fixed;
    overflow: hidden;
  }
  
  #main_poruchy {
    position: absolute;
    top: 250px;
    width: calc(100vw - 22px);
    padding: 5px;    
  }
  
  #main_poruchy table {
    border-spacing: 10px
  }
    
  
  #graph_legend {
    font-size: 14px;
    bottom: 50px;
    width: calc(100vw - 32px);
  }
 
}


 
/* ==== zobrazení na PC ==== */

@media screen and (min-width: 640px) and (orientation: portrait), (min-height: 640px) and (orientation: landscape) {
  #main_mapa {
    width: calc(100vw - var(--left-box-width) - 30px);
    left: 279px;
    border-radius: 0 5px 5px 0;
  }
  #main_graf, #main_kontakt, #main_statistika, iframe {
    width: calc(100vw - var(--left-box-width) - 40px);
    height: calc(100vh - 27px);
    left: 279px;
    border-radius: 0 5px 5px 0;
  }
  #mapa, #kontakt {    
    width: calc(100vw - var(--left-box-width) - 30px);
  }
  #graf {
    width: calc(100vw - var(--left-box-width) - 80px); 
    height: calc(100vh - 140px);
    max-height: 100%; 
    padding: 20px;
  }
  #left_box {
    width: var(--left-box-width);    
    float: left;    
    border-radius: 5px 0 0 5px;
    height: calc(100vh - 27px);
  }
  #graph_legend {     
    width: calc(var(--left-box-width) - 22px);    
    position: fixed;    
    top: var(--setup-top);    
    left: 14px;         
    background-color: white;
    border: solid 1px var(--main-border-color);
    max-height: var(--setup-height);
    padding: 10px;
  }
  #graph_legend_choices {
    /*border: solid 1px silver;
    border-radius: 5px;*/    
  }  
  #graph_legend_choices li {
    clear: both;
  }
  #graph_legend_choices label {
    display: inline-block; 
    width: 90px; 
  }
  #graph_legend_choices span.value {
    display: inline-block; 
    margin-left: 20px; 
    width: 30px; 
    text-align: right;
  }
  #graph_legend p {
    position: relative;
    top: 20px;
    //bottom: 20px;
    border-top: solid 2px gray; 
    padding-top: 10px;
  }
  #graph_legend_X {
    display: inline-block; 
    width: 150px;
    text-align: right;
  }
  #layers {    
    left: 14px;         
    top: var(--setup-top);
    width: calc(var(--left-box-width) - 12px);
    box-shadow: none;
    border-radius: 0;
    max-height: var(--setup-height);     
  }  
  #poruchy {    
    width: 250px;
  }
  #main_poruchy {
    display: none;
  }
  #statistikaH1 {
    margin-left: 0;
  }
  .mapa-karta-cas {
    width: auto;
  }
  
  #mainMenu {
    position: absolute;
    top: calc(var(--top-box-height) + 50px);
    left: 15px;
    width: calc(var(--left-box-width) - 2px);
  }
  
  #win_panorama {    
    left: calc(var(--left-box-width) + 25px);
    top: 10px;    
    width: var(--panorama-width);
    height: var(--panorama-height);
    overflow: hidden;    
  }
  #win_panorama.maximized {
    height: calc(100vh - 40px);
    width: calc(100vw - var(--left-box-width) - 30px);
  }
  #win_panorama_canavas {
    width: var(--panorama-width);
    height: var(--panorama-height);    
  }
  
  #win_panorama_big {
    position: fixed;    
    left: calc(var(--left-box-width) + 25px);
    top: 10px;    
    height: calc(100vh - 30px);
    width: calc(100vw - var(--left-box-width) - 40px);
    background-color: white;
    border: solid 1px gray;
    border-radius: 5px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    overflow: hidden;    
    z-index: 9;
  }
  #win_panorama_big_canavas {
    height: calc(100vh - 30px);
    width: calc(100vw - var(--left-box-width) - 40px);    
  }
  
  .closeButton, .zoomButton, .smap .card .close, .refreshButton {
    position: absolute;    
    top: 5px;        
    right: 5px;
    width: 20px;
    height: 20px;
    text-align: center;
    color: black;
    background-color: white;
    border: solid 1px silver;    
    z-index: 10;
    cursor: pointer;
    font-size: 18px;    
  }
  .smap .card .close::after {
    padding-top: 10px;
    content: 'c';
    font-size: 13px;    
  }  
  .zoomButton {
    right: 28px;            
  }
  .closeButton:hover, .zoomButton:hover, .smap .card .close:hover, .refreshButton:hover {
    color: blue;
    font-weight: bold;
    border: solid 1px blue;
    background-color: silver;
  }
  .refreshButton {
    top: 25px;
  }  
  
  
  #msg_box {
    top: 5px;
    left: 5px;
    width: auto;
    min-width: 150px;
    min-height: calc(1em + 5px);
    padding: 5px 10px;
  }
  
  #win_graficek {
    position: absolute;
    bottom: 10px;
    left: calc(var(--left-box-width) + 25px);
    //width: 600px;
    max-width: calc(50vw);
    //height: 400px;
    background-color: white;
    border: solid 1px gray;
    border-radius: 5px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
    z-index: 5;
    padding: 5px;    
  }
  
  .card {
    background: white url("img/sipka_dolu.png") no-repeat center bottom;
  }
  
  input:not(:placeholder-shown) {
    background-color: rgb(255,255,204);
    border: solid 1px red;
  }
  
  #graf_menu {
    width: auto;
    height: 40px;        
  }  
}