/* CSS pro daný web
 * Verze 3.9.2019
 * dokumentace na:
 * https://docs.google.com/spreadsheets/d/1HV7JUECJavTNSYOburjemgWhfErRqC8b9kI4I-YvLwg/edit#gid=0
 */

/* Základní barevnost webu - staci vzdy hromadne nahradit ctrl+h
 * Primární: 014959
 * Sekundární: 6C9BA8
 * Background hlavičky, doplňková: EFE9EB
 * Inverzní text: fcfcfc (inverzní k primární barvě)
 */

/* Barevnost */
:root {
  --primaryRGB: 49,70,59;
  --secondaryRGB: 173,141,14;
  --primary: rgb(var(--primaryRGB));  /* #014959; */
  --header: var(--primary);
  --alpha: 0.8;
  --secondary:rgb(var(--secondaryRGB));  /*  #6C9BA8; */
  --secondaryAlpha: rgba(var(--secondaryRGB), var(--alpha) );
  
  --banner: #ebe6e6; /* #EFE9EB; */
}
/* #2f3834 	#1aae9b 	#c2c6bf 	#626558 	#8c9286 
rgb(47,56,52) 	rgb(26,174,155) 	rgb(194,198,191) 	rgb(98,101,88) 	rgb(140,146,134)


#bac7c3 	#ad8d0e 	#7c8d86 	#31463b 	#14b4a3
rgb(186,199,195) 	rgb(173,141,14) 	rgb(124,141,134) 	rgb(49,70,59) 	rgb(20,180,163)
 */
header {
  background-image: url('../pics/header.png'); 
  background-color: var(--banner); /* pozadí pod obrázkem hlavičky - musí být čitelný text a loga !!! */
  background-size: auto 300px;
  background-position: calc(50% + 400px) calc(50% + 60px); /* vypočítané dle použitého obrázku */
}
#titulka header {
  background-size: auto 600px;
  background-position: calc(50% + 400px) center; /* vypočítané dle použitého obrázku */
}
@media screen and (max-width: 39.9375em) {
  header h1, #titulka header h1, header h2, #titulka header h2, header h3, #titulka header h3 {color: var(--primary)!important; /* primary */ }
  header {background-color: var(--banner)!important; }
}
header h1, header h2 {color: var(--primary); /* primary */ }
#titulka header h1 { color: var(--header); /* primary */ }
#titulka header h2 { color: var(--header); /* primary */ }
#titulka header h3 { color: var(--header); /* primary */ }
nav { background: var(--secondary); /* secondary */ }
nav .menu a { background-color: var(--secondary); /* secondary */ }
nav .menu a:hover, nav a.active, nav .menu .is-active a { background-color: var(--primary); /* primary */ }
#tiraz {
  background-color: var(--primary); /* primary */
  color: #fcfcfc; /* inverzní text */
}
#tiraz a { color: #fcfcfc; /* inverzní text */ }
#tiraz h3 { color: #fcfcfc; /* inverzní text */ }
a.toc-item, span.toc-item { background-color: var(--secondaryAlpha); /* secondary v rgba, pro menu s tmavým písmem na šedém pozadí použijeme např. color: #333333; background-color: rgba(206, 209, 215, 0.95); */ }
a.toc-item.active { background-color: var(--primary); /* primary */ }
a.toc-item:hover { background-color: var(--primary); /* primary */ }
.toc_kapitola .cap-num { color: var(--primary); /* primary */ }
.toc_kapitola a.toc-item:hover { background-color: var(--primary); /* primary */ }
.separated::before, .toc-section.toc-section.toc-section h2 { background-color: var(--primary); /* primary */ }	
h2 {color: var(--secondary)} /* secondary */
.t1, .t1 strong, .t1 em {background: var(--primary)!important; color: #fafafa;} /* primary */
.t2, .t2 strong, .t2 em {background: var(--secondary)!important; color: #fafafa;} /* secondary */
.t3, .t3 strong, .t3 em {background: var(--banner)!important; color: #333333;} /* doplnkova */
sup a, sup a:visited { color: var(--secondary)!important; } /* secondary */
sup a:hover { color: #fff!important; }
/* KONEC - Barevnost */

/* ************************** */
/* Barevnost vysouvacího menu */
nav .submenu::before {	border-top-color: var(--secondary); /* kontrastni - tečky*/ }
/* vysouvací menu tmavé */
/*
nav .submenu { background-color: #767676 !important; }
nav .submenu a { background-color: #767676 !important; color: #eee !important; }
nav .submenu a:hover {	background-color: var(--secondary) !important; color: #fff !important; }
*/
/* vysouvací menu dle barevnosti webu */
/*
nav .submenu { background-color: var(--primary) !important; }
nav .submenu a {	background-color: var(--primary) !important; color: var(--secondary) !important; }
nav .submenu a:hover {	color: #fff !important; }
*/

/*  *********
 *  Vlastní styly
 *  ********* */

 .glossary dt { font-weight: bold; }

 .glossary dd +  dt {
   margin-top: 1.5rem;
 }

 
 /********** formular pokusu ***********/

.hidden {display: none;}

.edit-form {display: none;}
.edit-form.shown {display: block;}

.exp-list input {
  margin-bottom: 0;margin-right: 0.5rem;
}
.exp-name {width: 60%}
.exp-name:hover { cursor:pointer; background-color: #f0f0f0; }

#utils-list td {position:  relative;}
  .item-count, .chem-konc, .chem-form { display: inline-block; width: 5em;}
  .deleter { /* width: 24px; */ height: 24px; display:inline-block; vertical-align: middle; padding: 0 0.5rem;}
  .button2 { cursor: pointer; }
  .datalist {height: 10rem; overflow: auto; margin-bottom: 1rem; }
.datalist .option {padding: 0.2rem; cursor: pointer; color: #666; font-size: 80%;}
.option + .option { border-top: 1px solid #ddd}
.option:hover { background-color: #eee; }

.note, .item-count, .util-types, .chem-konc, .chem-form {
    margin-bottom: 0;
    padding-bottom: 0;
}
[contenteditable] {background-color: #ffd; border: 1px solid #ddd}

figcaption.cke_widget_editable {
    text-align: center;
}

/* rvp zarazeni */
.psp {border-collapse: collapse}
  .laac { margin-left: 5rem; width: 40rem}
  /* .laac.laac.laac .element label {width: 2rem !important;} */
  .element input {display: none;}
  .psp td,   .element {padding: 0; font-size: 90%; background-color: #fff; border: 1px solid #ddd !important; text-align: center;}
  .element.el_p label { background-color: rgb(158, 182, 250) ;}
  .element.el_alk label { background-color: rgb(247, 158, 250);}
  .element.el_d label { background-color: rgb(244, 250, 158);}
  .element.el_f label { background-color: rgb(150, 250, 146);}
  .element.inactive label { background-color: #eee; color: #999; cursor: default}

  .element sub {font-size: 70%; display: none}
  .element.element.element label {display: block; width: 100%; height: 100%; margin: 0; padding: 0.5rem }
  .element :checked + label {text-shadow: 1px 0 0 #bbb; 
  background-color: #666; color: #eee;
  border: 1px solid #bbb}


.preview-image { max-width: 80%}
.preview-caption {padding: 0.5rem; text-align: center;}

.toolbar {display: flex;}
.tool-label {white-space: nowrap; padding: 0.5rem;}

.thumb-gallery {
  /*   display: flex; */
    /* flex-flow: row wrap; */

    display: grid;
  flex-flow: row wrap;
  grid-template-columns: repeat(auto-fit, minmax(150px, 240px));
  gap: 1rem;
}

.thumb {
    position: relative;
    flex: 1 0 20%;
    border: 1px solid #eee;
    margin: 0.3rem;
    padding: 0.3rem;
    display: flex;
    justify-content: space-between;
    flex-flow: column;
    text-align: center;
}

.thumb .deleter {
  position: absolute; right: 5px; top: 5px;
  width: 24px; height: 24px;
  background: url(../pics/remove.svg) transparent;
  background-size: cover;
  cursor: pointer;
}

.thumb-caption {text-align: center;}

.publisher {display: none;}
.publisher + label {cursor: pointer}
.publisher + label::before {content: url(hidden.png)}
.publisher:checked + label::before {content: url(visible.png)}

.pub-label.pub-label {
  vertical-align: middle;
}

fieldset .level0 { display: block;}
.level0 { display: flex;}
.level0 > li { flex: 0 0 33%}
.level0 > li + li { margin-left: 1rem;}

.gallery {display: flex; flex-flow: row wrap}
.gallery .thumb { flex: 0 1 30%;}

main h2 {
    margin-top: 1.5rem;
}

.main {  
    position: relative;
}

.ghs-line {
    position: absolute;
    right: 1rem;
    top: 2rem;
}

.ghs-symbol {
    height: 5rem;
    padding: 0.3rem;
    cursor: help;
}

.sec-info:hover { cursor: pointer; text-decoration: underline;}

  .logo-verkon {
    height: 4rem;
}

.h-code.h-code { text-decoration: none}

.h-code:hover { text-decoration: underline dotted;}

.column.sidebar.small-12.large-4 {
padding-top: 4rem;
}

fieldset legend {
  font-weight: bold;
}

#exp-display {
    margin-top: 2rem;
   
}
#exp-list {margin-left: 0;
 border-bottom: 1px solid #bbb;
    padding-bottom: 1rem;
  display: flex; flex-flow: row wrap; gap: 0.5em;
}
#exp-list li {padding: 0.2rem; list-style: none; flex: 1 0 40%}
#exp-list li:before {display: none}
#exp-list li:hover {
  cursor: pointer;
  background-color: #eee;
}

header h1 {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    font-size: 150%;
}

.general-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 1em;
  background: #f9f9f9;
  width: 100%;
  padding: 1em;
  border-top: 1px solid #bbb;
  padding-left: 10em;
}