*,
*:after,
*:before {
 -webkit-appearance: none;
}

:root {
  --vivus_tm: #00532c;
  --vivus_sv: #b3d335;
  --zelena_med: #6B9845;
  --zelena_med_sv: #8bb16a;
  --zelena_sv: #f1ffba;
  --zelena_sv_sv: #f9ffe3;
  --cervena: #ff0000;
  --cervena_sv: #f7e1e1;
  --seda_sv: #bfbfbf;
  --seda_str: #7F7F7F;
  --seda_sv_sv: #ebebeb;
  --seda_tm: #5c5c5c;
  --vyska_input: 49px;
  --vyska_input_small: 35px;
  --vyska_checkbox: 30px;
  --fontsize: 14px;
  --main1pad: 75px;
  --padding_base: 60px;
  --padding_w_right: 66px;
  --padding_input_lr: 20px;
  --padding_input_lrm: 15px;
  --padding_input_tb: 17px;
  --padding_input_tbm: 11px;
}


body{color:#505050;font-size:11pt; font-family: 'AvenirRegular', sans-serif; background-color:#ffffff;margin-top:20px;}
input::placeholder, input, textarea { font-family: 'AvenirRegular', sans-serif; }
#all {top:25px; display:block; max-width:1200px; position:relative; padding: 0px 40px 0px 40px}
#maska, #maskaprogress { display: none; position: fixed; opacity: 0.3; width:110%; height:110%; margin-top:-5%; margin-left:-5%; padding:0px; background-color: #000000; z-index: 500;}
#maskaprogress {z-index: 502;}
#head { width:100%; text-align:left}
#logo { width:220px; margin-bottom:30px; text-align: left; position:relative; left:0px}
#nazevPortal {vertical-align:top; font-size:22px; margin: -2px 5px 26px 5px}
#headmenu { float:right; right:0px; margin-top:-3px; }
#headmenu span:not(:first-child) { border-left: 1px solid rgb(164, 164, 164); padding-left: 11px; margin-left: 9px }
#all, #headmenu, #head, .menu { display:block}
#logo, #nazevPortal { display:inline-block}
b {font-family: 'AvenirBold';}
.nwr { white-space: nowrap;}
input {font-size: 12px; text-align:center; border-radius: 0px; padding: 9px 9px 9px 9px; border: 1px solid rgb(180, 180, 180)}
h1, h2, h3, b {font-weight:normal;}
h1 {font-family: 'AvenirLight', sans-serif; font-size:40px; margin-bottom:35px; color:rgba(157, 185, 70, 1); display: block; }
h2 {font-family: 'AvenirMedium', sans-serif; font-size:17px; margin-top:0px; margin-bottom:30px; color:rgba(157, 185, 70, 1);  }
.odkaz i {color:rgba(0, 0, 0, 0.4); margin-right:5px;}
.menu {border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin-bottom:35px; text-align:right; width:100%}
.odkaz, a, a:link, a:visited {cursor: pointer; color:#738700}
.odkaz:hover, a:hover {color:#171d00}
a, a:link, a:visited, a:hover {text-decoration:none}
.menu .odkaz {background: rgba(0, 0, 0, 0.5); display:inline-block; margin-left:1px; color: white; padding: 6px 2% 6px 2%;}
.menu .odkaz:hover {background: rgba(0, 0, 0, 1);}
.menu .odkaz i {color: #dddddd;}
#plovokno { display: none; position: absolute; padding: 60px 20px 20px 20px; margin-left: auto; margin-right: auto; top: 100px; left: 0; right: 0; width: 60%; min-width: 200px; max-width: 650px; background-color: #ffffff; z-index: 501;}
#plovokno h1 { color:#ffffff; position: absolute; margin: -60px 0px 0px -20px; padding:2%; width: 96.3%; height: auto; background-color: #6a7075; }
#plovoknozavri {position:absolute; cursor: pointer; display:block; top: 10px; right: 10px; border-radius: 5px; width: 22px; height: 22px; }
#progressicon {display: none;font-size: 80px; position: fixed; margin-left: auto; margin-right: auto; top: 200px; color: #ffffff; left: 0; right: 0; z-index: 502;}
.hlavniblok {width:100%; display:block;  }
.blok {display:inline-block; background:rgba(0, 0, 0, 0.0); vertical-align:top; margin-bottom:55px; width:100%}
.hlavniblok {text-align:left; display:none}
.hlavniblok h1 {color:#55555; margin-top:0px }
#hlavniblok1 .radekProdukt, #hlavniblok2 .radekProdukt {margin-bottom:20px; line-height:23px}
.radekProdukt h3 {font-family: 'AvenirBold'; color:rgba(0, 0, 0, 1);font-size:18px; margin:0px 0px 10px 0px}
.poznamka {margin-bottom:16px; z-index:1}
#pata {font-family: 'AvenirLight', sans-serif; font-size:10px; text-align:right; width:100%; margin-bottom: 70px; padding-top:15px; border-top: 1px solid rgba(0, 0, 0, 0.2);}


#hlavniblok1 .blok1,
#hlavniblok1 .blok2,
#hlavniblok1 .blok3,
#hlavniblok2 .blok1,
#hlavniblok3 .blok1,
#hlavniblok3 .blok2,
.hlavniblok4 .blok1,
.hlavniblok4 .blok2,
.hlavniblok4 .blok3,
.hlavniblok4 .blok4,
#hlavniblok3 .blok span,
#hlavniblok1 .blok3 .radekProdukt div,
#hlavniblok2 .blok1 .radekProdukt div,
.hlavniblok4 .blok div span,
.grafobal,
.grafinfo {text-align:left; display:inline-block; }

#hlavniblok1 .blok1 {width:55%; margin-right: 5%}
#hlavniblok1 .blok2 {width:40%; vertical-align:bottom}
#hlavniblok1 .blok3 {width:100%;}
.blok .flexBox {width:100%; display: flex; flex-wrap: wrap; gap:76px}
.blok .flexBox div {width:calc(50% - 38px); box-sizing: border-box;}

#hlavniblok2 .blok1 {width:100%;}

#hlavniblok3 .blok1 {width:45%; margin-right:9%; vertical-align:bottom; }
#hlavniblok3 .blok2 {width:45%;}

.hlavniblok4 .blok1 {width:45%; margin-bottom:66px; }

.hlavniblok4 .blok1 span {vertical-align:top; }
.grafinfo {width:39%;}
.grafobal {width:60%;}


#hlavniblok1 .blok3 .radekProdukt div:nth-child(1) {width:25%;}
#hlavniblok1 .blok3 .radekProdukt div:nth-child(2) {width:35%;}
#hlavniblok1 .blok3 .radekProdukt div:nth-child(3) {width:23%;}
#hlavniblok1 .blok3 .radekProdukt div:nth-child(4) {width:17%; text-align:right; }

#hlavniblok2 .blok1 .radekProdukt div:nth-child(1) {width:100%;}
#hlavniblok2 .blok1 .radekProdukt div:nth-child(2) {width:24%;}
#hlavniblok2 .blok1 .radekProdukt div:nth-child(3) {width:44%;}
#hlavniblok2 .blok1 .radekProdukt div:nth-child(4) {width:19%;}
#hlavniblok2 .blok1 .radekProdukt div:nth-child(5) {width:13%; font-size: 13px; text-align:right; }
#hlavniblok2 .blok1 .radekProdukt div .odkaz {background: rgba(0, 0, 0, 0.5); display:inline-block; margin-left:1px; color: white; padding: 1px 9px 0px 9px ;}
#hlavniblok2 .blok1 .radekProdukt div .odkaz:hover {background: rgba(0, 0, 0, 1);}
#hlavniblok2 .blok1 .radekProdukt div .odkaz i {color: #dddddd;}

#hlavniblok3 .blok1 div span:nth-child(1) {width:50%;}
#hlavniblok3 .blok1 div span:nth-child(2) {width:50%;}
#hlavniblok3 .blok2 div span:nth-child(1) {width:35%;}
#hlavniblok3 .blok2 div span:nth-child(2) {width:65%;}

.hlavniblok4 .blok1 div span:nth-child(1) {width:23%; }
.hlavniblok4 .blok1 div span:nth-child(2) {width:77%; }
.hlavniblok4 .blok2 div span:nth-child(1) {width:45%;}
.hlavniblok4 .blok2 div span:nth-child(2) {width:55%;text-align:right;}
.hlavniblok4 .blok3 div span:nth-child(1),
.hlavniblok4 .blok4 div span:nth-child(1) {width:64%;}
.hlavniblok4 .blok3 div span:nth-child(2),
.hlavniblok4 .blok4 div span:nth-child(2) {width:36%;text-align:right; }


.graf {
	width: 85%;
	height: 85%;
	display: inline-block;
	margin: 10px;
}

.graf svg {
	border-radius: 50%;
  transform: rotate(-90deg);
}

.graf circle {
	fill: transparent;
}

.grafpopis{
display:block; margin-bottom:20px;
}

.grafpopiscolor {
width:13px; height:13px;
}

.grafpopis span, .grafpopis div {
display:inline-block;
}

.grafpopis span:first-of-type {
margin: 0px 5px 0px 5px;
}

.right {text-align:right}

.tlacitko {color: #fef7ff;
background-color: #a29e9e;
font-size: 11px;
text-transform: uppercase;
margin-top: 28px;
padding: 14px 20px;
border: 0px;
border-radius: 0px;
cursor:pointer;}

.tlacitko:hover {color: #ffffff;
background-color: #000000;
}

label.chybahlaska  {color: rgb(173, 156, 0); margin-top: 10px; font-size:11px; font-weight: normal; display:block}
input[type=text].chybahlaska, textarea.chybahlaska { border: 1px solid #d9adb0; background: rgba(237,89,0,0.1);}
.pole, #loginchyba {display:block; }
.pole {margin:0px 0px 20px 0px; }
#loginchyba { margin:35px 0px 10px 0px; font-weight: 12pt; color: rgb(173, 156, 0); }
.polePopis {display:block; margin-bottom:13px; }
.loginPozn {font-size: 11px; margin-top: 48px; line-height:15px}
.login, .okno {width: 100%; text-align:center; height: 558px;  position:absolute;  left:0; right:0;  top:0; bottom:0;  margin:auto;  max-width:100%;   max-height:100%;   overflow:hidden;}
.login div {position:relative; }
.login, .logo {color:#888888; font-family: 'Roboto', sans-serif; }
.login img {width:140px; margin-bottom: 15px}
.login .nazev {font-size: 24px; }
.logo {font-size:15px;}
.logo img {width:50px; margin-bottom:-10px; margin-right:15px}
.logo .nazev {font-size: 35px; display:inline-block; }
.logoblok {display:inline-block}
.hlavicka .logo {display:inline-block; left:0px; }


hr {
height: 1px;
margin-left: auto;
margin-right: auto;
background-color:#dbdbdb;
border: 0 none;
margin-top: 20px;
margin-bottom:20px;
}

.inp100 {width:100%}
.inp50 {width:50%}
.inp30 {width:30%}
.inp25 {width:25%}
.inp15 {width:15%}
.inpPevna300 {width:300px}


.info {background-color:#edebe8;padding:8px 15px 10px 15px}
.tabcenashn{color:#868686;font-size:12px;font-weight:bold;}
.tabkoushn{color:#E0955F;font-size:12px;font-weight:bold;}
.tabshlshn{color:#97AE42;font-size:12px;font-weight:bold;}
.statpol{margin-top:5px}
.vyberprava select{font-size:10px;}
.vyber select{font-size:10px;}
#miniform{display:inline}
.cislodrazky {position:absolute; margin-top: -22px; padding-right:5px; background-color: #ffffff; color: #888888;font-size:13px;font-weight:bold }
.plovokno {position:absolute; z-index:100; left:10%; right:10%; top:115px; font-size: 12px; text-transform: uppercase; }
.plovoknotabh {background-image: url(../zdroje/chybahp.png); background-repeat: repeat-x; }
.plovoknotabp {background-image: url(../zdroje/chybabprp.png); background-repeat: repeat-y; background-position: right top;}
.plovoknotabd {background-image: url(../zdroje/chybadp.png); background-repeat: repeat-x; }
.plovoknotabl {background-image: url(../zdroje/chybablp.png); background-repeat: repeat-y; }
.plovoknonapln {padding: 0px 5px 5px 25px }
#plovoknozavri {position:absolute; cursor: pointer; float:none; display:block; top: 11px; right: 24px; width: 22px; height: 22px;}
.plovoknohpr {position:relative; width: 56px; height:39px; background-image: url(../zdroje/chybahpr.png); background-repeat: no-repeat; }


.an1 {  animation-delay: 0s;}
.an2 {  animation-delay: 0.15s;}
.an3 {  animation-delay: 0.3s;}
.an4 {  animation-delay: 0.3s;}
.an5 {  animation-delay: 0.45s;}
.an6 {  animation-delay: 0.60s;}
.an7 {  animation-delay: 0.70s;}
.an8 {  animation-delay: 0.80s;}


.blok_vertical_graf {
  width: 46%;
  padding:2%;
  display: inline-block;
}

.graf_vert_pole {
	width:5.33%;
	margin-left:1.5%;
	margin-right: 1.5%;
	background-color: rgb(194, 200, 179);
	display:inline-block;
	position:relative;
}

.graf_vert_pole_popis {
	width:5.33%;
	margin-left:1.5%;
	margin-right: 1.5%;
  font-size:11px;
	display:inline-block;
  position:relative;
  top:50%
}

.graf_vert_pole_popis.negative {
top:0%;
}

.graf_vert_pole_popis span{
  display: block;
  writing-mode: vertical-rl;
  height: 84px;
  padding:8px 0px 8px 0px;
  text-align: left;
  width: 76%;
  margin:0;
  }

.graf_vert_pole_popis.negative span{
  text-align: right;
  }

.graf_vert_pole.negative{
	background-color: rgba(214, 187, 187, 1);
}





@media screen and (max-width: 1024px) {
.hlavniblok4 .blok1 {width:47%; margin-right:5%; }
.hlavniblok4 .blok2 {width:47%;}
.hlavniblok4 .blok4 {width:47%;}
.blok .flexBox {gap:40px}
.blok .flexBox div {width:calc(50% - 20px);}
}

@media screen and (max-width: 900px) {
	#hlavniblok1 .blok1 {width:45%; margin-right: 5%}
	#hlavniblok1 .blok2 {width:50%; vertical-align:top}
	.grafobal {width:90%;}
	.grafinfo {width:89vw; margin-top: 30px;}
	.grafpopis {	display:inline-block; margin-right:20px;	}
	.radekProdukt h3 {margin-bottom: 6px; font-size: 17px}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(1) {width:100%;}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(2) {width:46%;}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(3) {width:34%;}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(4) {width:20%; text-align:right; }
	.hlavniblok4 .blok1 {width:45%; margin-right:9%; vertical-align:bottom;}
	.hlavniblok4 .blok2 {width:45%;}
	.hlavniblok4 .blok3 {width:100%; margin-right:0%}
	.hlavniblok4 .blok4 {width:100%;}
}

@media screen and (max-width: 850px) {
	#logo { width:170px; margin-bottom:30px;}
	#nazevPortal {font-size:18px;}
	#headmenu { font-size:13px; }
	h1 {font-size:38px; margin-bottom:25px}
	.blok {margin-bottom:25px;}
}

@media screen and (max-width: 810px) {
.blok .flexBox div {width:100%;}
.main_table:not(.forlowres) tr th, .main_table:not(.forlowres) tr td {width:50%;}
}

@media screen and (max-width: 720px) {
	.menu .odkaz {display:inline-block; margin-right:0.25%; margin-left:0px; text-align:left; width:45.5%; margin-bottom:2px; }
	.menu {width: 100.5%; border-bottom:0px;}
	#hlavniblok1 .blok1 {width:100%; margin-right: 0%}
	.grafobal {width:53%;}
	.grafinfo {width:45%; vertical-align: bottom}
	.grafpopis {margin-right:0px;	}
	#hlavniblok1 .radekProdukt {margin-bottom: 30px;}
	#hlavniblok1 .blok2 {width:100%;}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(1) {width:40%;}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(2) {width:60%; text-align:right;}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(3) {width:60%; }
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(4) {width:40%; text-align:right; }
	#hlavniblok3 .blok1 {width:100%; margin-right:0%; vertical-align:none; }
	#hlavniblok3 .blok2 {width:100%;}
	#hlavniblok3 .blok1 div span:nth-child(1) {width:40%;}
	#hlavniblok3 .blok1 div span:nth-child(2) {width:60%;}
	#hlavniblok3 .blok2 div span:nth-child(1) {width:40%;}
	#hlavniblok3 .blok2 div span:nth-child(2) {width:60%;}
	.hlavniblok4 .blok1 {width:100%; margin-right:0%; vertical-align:none; }
	.hlavniblok4 .blok2 {width:100%;}
  .blok_vertical_graf { width: 100%; padding:0; }

}

@media screen and (max-width: 670px) {
	#all {padding: 0px 30px 0px 30px}
	#logo { width:33vw; margin-bottom:20px;}
	#nazevPortal {font-size:3.5vw;}
	#head {text-align: center}
	#headmenu { float: none; margin-bottom:35px;}
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(2) {width:35%;}
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(3) {width:65%; text-align:right;}
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(4) {width:50%; }
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(5) {width:50%; text-align:right; margin-top:6px}
}

@media screen and (max-width: 520px) {
	.menu .odkaz {margin-right:0%; width:96%; margin-bottom:2px; padding: 8px 2% 8px 2%;}
	.menu {width: 100%; }
	#logo { width:39vw; margin-bottom:25px;}
	#nazevPortal {font-size:4vw;}
	#headmenu { margin-bottom:40px;}
	.grafobal, .grafinfo {width:100%;}
	.grafpopis { display:block }
	.graf {width:76%; height:76%}
	.hlavniblok, .grafobal, #hlavniblok1 .blok2, #pata, h2, #hlavniblok1 .blok3 .radekProdukt, .grafinfo, #head, .menu .odkaz {text-align:center;}
	.radekProdukt h3 {margin-bottom: 3px;}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(1) {width:100%; text-align:center;}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(2) {width:100%; text-align:center;}
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(3) {display: inline; border-right: 1px solid rgb(164, 164, 164); padding-right: 11px; margin-right: 9px }
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(4) {display: inline; }
	#hlavniblok3 .blok1 div {line-height: 22px}
	#hlavniblok3 .blok1 div span:nth-child(1),
	#hlavniblok3 .blok1 div span:nth-child(2),
	#hlavniblok3 .blok2 div span:nth-child(1),
	#hlavniblok3 .blok2 div span:nth-child(2) {width:100%;text-align:center;}
	#hlavniblok3 .blok1 div span:nth-child(2),
	#hlavniblok3 .blok2 div span:nth-child(2) {margin-bottom: 13px;}
	.hlavniblok4 .blok1 div span:nth-child(2) {text-align:right;}
}



@media screen and (max-width: 490px) {
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(3) { border-right: 0px solid rgb(164, 164, 164); padding-right: 0px; margin-right: 0px }
	#hlavniblok1 .blok3 .radekProdukt div:nth-child(4), #hlavniblok1 .blok3 .radekProdukt div:nth-child(3) {width:100%; text-align:center; display: block;}
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(2) {width:100%;}
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(3) {width:100%; text-align:left; }
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(4) {width:50%; }
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(5) {width:50%; text-align:right; }
}

@media screen and (max-width: 420px) {
	#logo { width:59vw; margin-bottom:13px;}
	#nazevPortal {display:block; font-size:6vw;}
	#headmenu span:first-child { display:block; margin-bottom: 8px }
	#headmenu span:nth-child(2) { border-left: 0px; padding-left: 0px; margin-left: 0px  }
	#hlavniblok2 .blok1 .radekProdukt div {line-height: 22px}
	#hlavniblok2 .blok1 .radekProdukt div span {display:block}
	#hlavniblok2 .blok1 .radekProdukt div span:nth-child(2) {margin-bottom: 13px; }
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(2),
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(3),
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(4),
	#hlavniblok2 .blok1 .radekProdukt div:nth-child(5),
	.radekProdukt h3  {width:100%; text-align:center; }
	#hlavniblok2 .blok1 .radekProdukt div span:nth-child(5) {margin-bottom: 13px; }
	.hlavniblok4 .blok div {line-height: 22px}
	.hlavniblok4 .blok div span:nth-child(1),
	.hlavniblok4 .blok div span:nth-child(2) { width:100%; text-align:center}
	.hlavniblok4 .blok div span:nth-child(2) {margin-bottom: 13px; }
}