/* toto je pro vsechna zarizeni (tedy v zakladu pro mobil),
   pozdeji nastavujeme jine parametry pro monitory, podle minimalni sirky */
body {font-size: 12pt; background: #e7e7ff;}
body.cAdmin {   /* zmena barvy pozadi v Admin rezimu */
  background: #ffa7a7;
}
label, option, select, input, button {font-size: 12pt;}


.cLabelForText{display: inline-block; width:8em; margin-top:0.3em;}

/* --------- tabulka se seznamem kesi ---------- */
.cDivTable{
  margin: auto;
  margin-top: 15px;
  border: red 0px solid;
  color:black;
  font-size: 10pt;
  line-height:12pt;
}
.cDivTr{line-height:0pt; /* height:12pt; */ width:1405x; margin:0px; padding: 0px;}
.cAdmin .cDivTr{ width:1460px;} /* navic 2 tlacitka pro editaci a archivaci */

/* sude radky odlisnou barvou */
/* .cDivTr:nth-child(odd){ background-color:#f1f1f1;} */

/* prvni radek je s nadpisy, tedy "vzdy nahore" */
.cDivTable .cDivTr:nth-child(1){
  position: sticky;
  top: 0px;
  border:none;
  z-index:2;
}
/*Fixování 1. sloupce tabulky při rolování vlevo
 ale pozadi je pruhledne ... */
.cDivTable .cDivTd:nth-child(1),.cDivTable .cDivTh:nth-child(1){
  position: sticky;
  left: 0px;
  z-index:1;
}

/* radky s archivovanymi kesemi jsou jinou barvou */
/* .cDivTr.cArchiv{color: rgba(255,0,0,0.5); text-decoration: line-through;} */
.cDivTr.cArchiv{color: rgba(205,133,63,0.7); text-decoration: line-through;}
/* .cDivTr.cArchiv{color: #cd853f; text-decoration: line-through;} */

.cDivTh{         /* zakladni nadpis */
  display: inline-block;
  background-color:#fff781;
  text-align: center;
  font-weight: bold;
  padding: 3px;
  margin:0px;
  border-top:1px solid #c9c9c9; /* rgba(0,0,0,0.6); */
  border-bottom:1px solid #c9c9c9; /* rgba(0,0,0,0.6); */
  border-right:1px solid #c9c9c9; /* rgba(0,0,0,0.6); */
  line-height:12pt;
  color: blue;
  text-decoration: underline;
  cursor: ns-resize;
  overflow: hidden;
}
.cDivTh.cDivSorted{        /* nadpis sloupce, podle ktereho se radi */
  background-color:#dfd761;
}
.cDivTd{                     /* zakladni pole tabulky */
  display: inline-block;
  height: 12pt;
  text-align: left;
  padding: 1px 3px 1px 3px;
  margin:0px;
  border-bottom:1px solid #c9c9c9; /* rgba(0,0,0,0.6); */
  border-right:1px solid #c9c9c9; /* rgba(0,0,0,0.6); */
  line-height:12pt;
  overflow: hidden;       /* pretekani popisu a jmena je reseno tooltipem */
}
.cDivTd.cDivSorted{        /* pole tabulky, podle ktereho se radi */
  /* neni potreba, staci asi oznacene zahlavi. Tohle je neprehledne v miste
     obrazku na pozadi
  background-color:rgba(255,246,129,0.15) !important;
  */
}

/* prvni sloupec musi mit ramecek i vlevo */
.cDivTd:nth-child(1),.cDivTh:nth-child(1){ border-left:1px solid #c9c9c9;} /* rgba(0,0,0,0.6); */

/* sirky sloupcu a zmena implicitniho zarovnani textu */
.cDivTd:nth-child(1), .cDivTh:nth-child(1) {width:80px;} /* GC kod */
.cDivTd:nth-child(2), .cDivTh:nth-child(2) {width:50px;}  /* stat */
.cDivTd:nth-child(3), .cDivTh:nth-child(3) {width:90px;}  /* okres */
.cDivTd:nth-child(4), .cDivTh:nth-child(4) {width:40px;}  /* archiv */
.cDivTd:nth-child(5), .cDivTh:nth-child(5) {width:200px;} /* jmeno kese */
.cDivTd:nth-child(6), .cDivTh:nth-child(6) {width:75px;}  /* autor popisu */
.cDivTd:nth-child(7), .cDivTh:nth-child(7) {width:75px;}  /* datum popisu */
.cDivTd:nth-child(8), .cDivTh:nth-child(8) {width:120px;} /* typ T5 */
.cDivTd:nth-child(9), .cDivTh:nth-child(9) {width:120px;} /* obtiznost */
.cDivTd:nth-child(10), .cDivTh:nth-child(10) {width:120px;} /* pouzita technika */
.cDivTd:nth-child(11), .cDivTh:nth-child(11) {width:250px;} /* popis */
.cDivTd:nth-child(12), .cDivTh:nth-child(12) {width:115px;} /* datum a cas posledni zmeny */

/* uprava 1. sloupce v Admin rezimu */
/* navic 2 tlacitka k editaci a archivaci */
.cAdmin .cDivTd:nth-child(1), .cAdmin .cDivTh:nth-child(1) {width:120px;}
/* a zarovnani vlevo, aby se tam talcitka vesla,
   relative je proto, aby vnoreny div s tlacitky mohl byt pozicovany vpravo */
.cAdmin .cDivTd:nth-child(1) {text-align:left; position:relative;}


/* zmena implicitniho zarovnani textu */
.cDivTd:nth-child(1) {text-align: center;}  /* stat */
.cDivTd:nth-child(2) {text-align: center;}  /* archiv */
.cDivTd:nth-child(4) {text-align: center;}  /* GC kod */
.cDivTd:nth-child(6) {text-align: center;}  /* autor popisu */
.cDivTd:nth-child(7) {text-align: center;}  /* datum popisu */
.cDivTd:nth-child(12) {text-align: center;} /* posledni aktualizace */

/* --- barvy pod kurzorem --- */
/* prvni sloupec musi byt nepruhledny, aby nedoslo k prekryvani textu
   pri rolovani tabulkou vlevo */
/* sude radky bile, liche sedou */
.cDivTr:nth-child(even) .cDivTd { background-color:white;}
.cDivTr:nth-child(odd) .cDivTd { background-color:#f1f1f1;}

/* na prvnim sloupci musime pouzit presnejsi selektor, aby se to promitlo */
.cDivTr:nth-child(even):hover .cDivTd {background-color:#ffed98}
.cDivTr:nth-child(odd):hover .cDivTd { background-color:#ffed98}

/* tlacitka v Admin rezimu pro editaci a archivaci ... */
.cButtons{
  position: absolute;
  right:1px;
  top:2px;
  display:inline-block;
  width:40px;
  text-align:right;
}
.cButton{
  display:inline-block;
  cursor: pointer;
  width:17px;
  height:16px;
  margin-right:3px;
}
.cArch{ background: transparent url("Images/archiv.png") no-repeat;}
.cEdit{ background: transparent url("Images/edit.png") no-repeat;}

/* ------- tooltip u editacnich ikon -------- */
#iButtonTooltip{
  position: absolute;
  z-index: 5;
  /*  pozice se nastavuje javascriptem podle polohy mysi
  transform: translateX(-50%);
  transform: translateY(+10px);
   */
  background-color:white;
  border:1px solid rgba(0,0,0,0.7);
  color: rgba(0,0,0,0.7);
  font-size: 12pt;
  padding:2px;
  display:none;
}

#iButtonTooltip.active{
  display: block;
}

/* formular pro vykonani tlacitkem vybrane funkce a pro zmenu razeni */
#iFormExec{ display:none;}
#iFormOrder{ display:none;}

/* ------- tooltip s celym popisem a jmenem kese -------- */
#iToolDesc, #iToolName, #iToolOkres{
  /* pointer-events: none; */
  position: absolute;
  z-index: 5;
  transform: translateX(-50%);
  display: none;
  border:3px solid gray;
  border-radius:1em;
  padding:1em;
  background-color:rgb(240,240,240);
  width:200px;
  color:black;
}
#iToolDesc.active, #iToolName.active, #iToolOkres.active{
  display: block;
}

/* ------- tooltip s celym jmenem kese -------- */
#iToolName{
  border-radius: 8px;
  padding:10px;
}
/* ------- chybovy vypis --------- */
.cERR{ padding-left:0px; font-weight: bold; font-size:medium; color:red; text-align:center;}
.cMess{ padding-left:3em; font-weight: bold; font-size:small; color:blue;}

/* ------- formular pro zadani hodnot -------- */
.cChoose{display:inline-block; width: 11em; margin-right:0.1em;}


/* ------- popisy -------- */
#iMan{
  top: 4em;
  width:730px;
  font-size: 13px;
	background-color: rgb(250, 250, 250);
	padding: 20px;
	margin: 30px auto;
	box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  border: 6px solid #305A72;
}
#iMan *{ color: #606060;   font-family: 'Arial CE', 'Helvetica CE', Arial, helvetica, sans-serif;}
#iMan h1{ text-align: center;}
#iMan h2{ color: rgba(0,0,0,0.6); text-align: center;}
#iMan h3{ font-size: 15px; font-weight: bold; margin:10px 10px 10px 0px;}
#iMan dd{display:none;}
#iMan dl{margin: 10px;}
#iMan p{
  width: 650px;
  font-size: 13px;
  margin: 0px 0px 25px 20px;
  padding-top:6px;
 /* background-color: #ececec; */
  text-align:justify;
  }
#iMan dt{ /* vzhled otazky */
  width: 680px;
  margin:3px 20px 2px 0em;
  padding: 3px;
  padding-left:30px;
  text-indent:-26px;
  font-size: 13px;
  font-weight: bold;
  /* text-transform:uppercase; */
  cursor: pointer;
  color:#305a72;
  background-color: #dcdcdc;
  border: 1px solid #305a72;
  border-radius:4px;
  transition-duration: 0.2s;
}
#iMan dt:hover {
  background-color: #7d8faa;
  color: white;
}
#iMan dd{ /* vzhled odpovedi */
  width: 650px;
  font-size: 13px;
  margin: 0px 0px 20px 20px;
  padding-top:6px;
  /* background-color: #ececec; */
  text-align:justify;
}
#iMan h3{margin-left:1em;}
#iMan ul{
  font-size: 13px;
  margin:0em;
  /* list-style-type: none; */
}
#iMan li{
  padding-left: 1em;
  margin-bottom:5px;
}
#iMan tt{ color: darkred;}
tt{color: darkred;}

/* ------- nastaveni pro siroka zarizeni, monitor, ... -------- */

@media (min-width: 700px){
  /*
  body {font-size:12pt;}
  label, option, select {font-size: 12pt; color:blue;}
  */
  /* kdyz je na monitoru misto, pridame obrazek Admin rezimu */
  body {
    background: #e7e7ff url("Images/logo.png") no-repeat fixed 100% 1%;
  }
  body.cAdmin {
    background: #ffa7a7 url("Images/logo-admin.png") no-repeat fixed 100% 1%;
  }

}

/* ------- nastaveni pro uzka zarizeni. -------- */

@media (max-width: 400px){
  body {font-size:12pt;}
  label, option, select {font-size: 12pt; color:blue;}

  /* zmena poradi sloupcu */
  cDivTr{display: flex;}       /* musi to byt ve flexboxu */
  .cDivTd, .cDivTh{ flex: 1;}   /* musi to byt ve flexboxu */
  .cDivTd[data-name="Name"] {
    order: -1;
    /* color: red; */
  }
  .cDivTh{
    color:green;
  }
}