:root {
   --mobile-break-point-width: 768px;
}

/******************* * RESET * ********************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent 
}
body {
   line-height: 1;
}
blockquote, q {
   quotes: none 
}
blockquote:before, blockquote:after, q:before, q:after {
   content: '';
   content: none 
}
:focus {
   outline: 0 
}
ins {
   text-decoration: none 
}
del {
   text-decoration: line-through 
}
table {
   border-collapse: collapse;
   border-spacing: 0 
}
a {
   text-decoration: none;
}
.video-container {
   position:relative;
   padding-bottom:56.25%;
   padding-top:30px;
   height:0;
   overflow:hidden;
}

.inline-math {
   font-style: italic;
}

.video-container iframe, .video-container object, .video-container embed {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
fieldset, img {
   border: 1px;
}
caption, th {
   text-align: left;
}
h1, h2, h3, h4, h5, h6 {
   font-size: 100%;
   font-weight: normal;
}
q:before, q:after {
   content: '';
}
abbr, acronym {
   border: 0;
}
.clear {
   clear: both;
}
.right {
   float: right;
   color: #000;
}
.left {
   float: left;
}
.left-img {
   float: left;
   margin-bottom: 10px;
   border: 1px solid #DDDDDD;
}
/******************* * GLOBAL * ********************/
body {
   background: #f0f0f0;
    /*background: white;
    */
    font: 12px/17px Open Sans, sans-serif;
    color: #222222;
    margin-left: auto;
    margin-right: auto;
}
input {
   font-family: Open Sans, sans-serif;
}
/******************* * HYPERLINKS * ********************/
a, a:visited {
   color: #222222;
   text-decoration: none;
}
a:hover {
   color: #000000;
   text-decoration: none;
}
a:active {
}
a img {
   border: none;
}
a:focus, a:hover, a:active {
   outline: none;
}
/******************* * TOP * ********************/
/******************* * SEARCH FORM * ********************/
form {
   margin: 0px;
   padding: 0px;
}
/******************* * HEADER * ********************/
/******************* * MENU * ********************/
.tucne {
   font-weight: normal;
}
/******************* * HOMEPAGE * ********************/
/******************* * CONTENT * ********************/
/******************* * OBSAH * ********************/
.obsah strong {
   font-weight: bold;
}
.obsah h1 {
   font-size: 24px;
   font-weight: bold;
   padding: 0px 0px 7px 0px;
   color: #CC0000;
}
.obsah h2 {
   font-size: 18px;
   font-weight: bold;
   margin: 0px 0px 0px 0px !important;
   padding: 20px 0px 10px 0px !important;
   clear: both;
}
.obsah h3 {
   font-size: 16px;
   font-weight: bold;
   padding: 0px 40px 15px 0px;
   margin-left: 0px;
}
.obsah h4 {
   font-size: 14px;
   font-weight: bold;
   padding: 0px 0px 7px 0px;
}
.obsah h5 {
   font-size: 13px;
   font-weight: bold;
   padding: 0px 0px 7px 0px;
}
.obsah h6 {
   font-size: 12px;
   font-weight: bold;
   padding: 0px 0px 7px 0px;
}
.obsah a {
   color: #CC0000;
   text-decoration: underline;
}
.obsah a:hover {
   text-decoration: underline;
   color: #000000;
}
.obsah a img {
   border: none;
}
.page {
   margin: 10px 0px 0px 0px;
}
code {
   color: #444444;
   font: 10px/12px/17px georgia;
}
pre {
   margin-bottom: 15px;
}
blockquote {
   background: #F0F0F0;
   margin: 0px 0px 0px 0px;
   color: #333333;
   clear: both;
}
blockquote p {
   font-style: italic;
}
blockquote li {
   padding: 2px 0px 2px 10px;
   font-size: 1em;
   line-height: 1.5em;
   font-style: italic;
}
blockquote a {
   color: #000000;
   text-decoration: none;
}
blockquote a:hover {
   color: #CC0000;
   text-decoration: underline;
}
time {
   display: block;
   font-size: 80%;
   margin-bottom: 15px;
}
#sidebar {
   background: #ffffff;
   float: right;
   width: 300px;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 20px 0px;
   border-left: 0px solid #E0E0E0;
   top: 0px;
   position: relative;
}
#sidebar li ul {
   color: #000000;
}
#sidebar li li {
   color: #000000;
}
.navigation-tip a {
   display: block;
   border: 1px solid #CCCCCC;
   background-color: #DDDDDD;
   margin-top: 40px;
   padding: 15px;
   font-size: 100%;
   font-size: 133%;
    line-height: 133%;
    text-align: center;
}
.navigation-tip span {
   color: #CC0000;
}
.wordBreakBreakAll  {
   word-break: break-all;
}
.navigation {
   margin: 15px 0px 5px 0px;
   padding: 5px;
   font-size: 12px;
   font-weight: normal;
   text-transform: uppercase;
}
/****************** * FOOTER * *******************/
#footer {
   margin: 10px 0px 0px 0px;
   padding: 10px 0px 20px 0px;
   color: #333333;
   border-top: 1px solid #CCCCCC;
   clear: both;
}
#footer a {
}
#footer a:hover {
   border-bottom: none;
}
#footer ul {
   display: inline;
   padding: 0px 0px 0px 23px;
}
#footer li ul {
   background: none;
   border: none;
   margin: 0;
   padding: 0;
}
#footer ul li {
   margin: 0px 0px 0px 0px;
   padding: 0px 11px 0px 0px;
   float: left;
   list-style: none;
}

p.center {
   text-align: center;
}

p.larger {
   font-size: large;
}

p.xlarge {
   font-size: x-large;
}
a.on {
   color: #ffffff;
}
a.off {
   color: #000000;
}
a.off:hover {
   color: #ffffff;
}
.obrazek {
   text-align: center;
   display: block;
}
.obrazek img {
   width: 100%;
   object-fit: contain;
}
.obrazek .popisek {
   font-size: 0.9em;
   font-style: italic;
   display: block;
}
.priklad {
   margin: 25px;
   padding: 10px;
   background: #ddf;
   border: 1px solid #ccf;
}
.priklad p {
   margin-right: 0;
}
.zobraz {
   text-align: center;
}
.blatex {
   text-align: center;
   margin: 10px 0;
   clear: both;
}
sup {
   font-size: 0.83em;
   vertical-align: super;
   line-height: 0;
}
sub {
   font-size: 0.83em;
   vertical-align: sub;
   line-height: 0;
}
.obsah li p {
   float: none;
}
.invisible {
   position: absolute;
   top: -10000px;
}
.headerlink {
   font-size: 70%;
}
.with-border {
   margin-left: auto;
   margin-right: auto;
}
.with-margin {
   margin-bottom: 40px;
   position: relative;
   top: 15px;
}
.with-border td, .with-border th {
   border: 1px solid #aaa;
   padding: 1px 4px;
}
.with-padding td {
   padding: 3px 6px;
}
.center-text {
   text-align: center;
}
.ciphertool td {
   vertical-align: middle;
}
.ciphertool input[type=text] {
   width: 400px;
}
.ciphertool input[type=submit] {
   margin-top: 20px;
}
.cracktool textarea, .ciphertool textarea {
   width: 400px;
   height: 130px;
}
.vspace {
   padding-top: 30px;
}
.hidden {
   display: none;
}
.ciphertool {
   clear: both;
}
#vigeneruv-ctverec-platno table td {
   border: 1px solid #ccc;
   text-align: center;
   padding: 0 3px;
}
#vigeneruv-ctverec-platno {
   clear: both;
   margin: 20px 0;
}
#vigeneruv-ctverec-platno tr:hover, .hover, table.highlighttr tr:hover {
   background-color: rgba(175, 175, 175, .3);
}
.ajaxloader {
   padding-left: 15px;
   display: none;
}
#content table, #content form {
   clear: both;
}
.highlightkey {
   color: red;
}
.courier {
   font-family: courier;
   font-size: 13px;
}
.table-form, .table-form td, .table-form tr, .table-form th {
   border: none!important;
}
table.bmi input {
   width: 7em;
   height: 2em;
   font-size: 1.5em;
}
.GodBlessEUCookies {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   color: white;
   background-color: black;
   z-index: 1000;
   text-align: center;
}
.GodBlessEUCookies button {
   background: green;
   color: white;
}
#odkazy-na-kategorie a {
   display: block;
   float: left;
   padding-left: 5px;
   padding-right: 5px;
   font-weight: bold;
}
#odkazy-na-kategorie a:hover {
   text-decoration: underline;
}
#odkazy-na-kategorie {
   font-size: 120%;
   position: absolute;
   bottom: 0;
}
#wrapper {
   background: #FFFFFF;
}
#content {
   color: #000;
   font-family: Open Sans, sans-serif;
}
.obsah li {
   padding-top: 5px;
   padding-bottom: 5px;
}
.web table td, .web table th {
   border: 1px solid #aaa;
   padding: 3px 10px;
   text-align: center;
}

.web table {
   margin: 10px 0;
}
.article-chapters {
   background-color: #f0f0f0;
   padding: 10px;
   margin-top: 10px;
   margin-bottom: 15px;
}
.article-chapters {
   font-weight: bold;
}

.youtubebox a {
   display: block;
   text-decoration: none;
}

.obsah p.youtubebox {
   margin-left: 10%;
   margin-right: 10%;
   margin-top: 15px;
   margin-bottom: 15px;
   text-align: center;
   border: 1px solid #CCC;
   border-radius: 10px;
   padding: 10px;
   padding-left: 50px;
   font-weight: bold;
   background-image: url("/files/infrastructure/youtube-icon.svg");
   background-repeat: no-repeat, no-repeat;
   background-position-x: 2%;
   background-position-y: center;
   background-color: #CCC;
   background-size: 35px;
}

.navigation-icon-links {
   text-align: center;
   margin-top: 2em;
}

.calculator label {
   font-size: smaller;
}

.fraction-calculator {
   padding: 1ex;
   margin-bottom: 1ex;
   margin-top: 1ex;
   background-color: #DDDDDD;
}

.fraction-calculator table {
   margin: 0 auto;
   padding: 0!important;
}

.fraction-calculator table td {
   border: none;
   padding: 0;
}

.fraction-calculator input[type="text"] {
   padding: 5px;
}

.fraction-calculator hr {
   border: 1px solid black;
}

.inner-calculator {
   padding-bottom: 1ex;
   padding-top: 1ex;
   margin-bottom: 1ex;
   margin-top: 1ex;
   background-color: #DDDDDD;
}

.inner-calculator table td {
   padding: 0;
   margin: 0;
}

.inner-calculator table {
   margin-left: auto;
   margin-right: auto;
}

.inner-calculator td.input {
   padding-bottom: 20px;
   text-align: left;
}

.inner-calculator table td {
   border: none;
}

.inner-calculator td.label {
   text-align: left;
}

.inner-calculator td.output {
   text-align: left;
}

.inner-calculator input, .inner-calculator select {
   height: 40px;
   box-sizing: border-box;
   font-size: 120%;
}

.inner-calculator select {
   margin-left: 1em;
   max-width: 175px;
}

.inner-calculator input[type="radio"] {
   height: auto;
}

.cross-multiplication .input {
   width: 30%;
}

.cross-multiplication .input input {
   width: 100%;
}

.cross-multiplication .direction {
   text-align: left;
}

.cross-multiplication {
   padding: 3ex 2ex;
}

.cross-multiplication table {
   max-width: 450px;
}

.cross-multiplication .filling {
   padding: 0 5px;
}

.cross-multiplication .lastChanged input {
   border: 2px solid #1A7CFA;
}

.category h3 {
   padding: 0;
   margin-top: 25px;
}

#body-kategorie-kalkulacky .web li {
   padding: 0 0 0 0;
   padding-bottom: 2px;
}

.video-preview {
   position: relative;
   display: inline-block;
   cursor: pointer;
}

.video-preview .title {
   position: absolute;
   top: 10px;
   left: 10px;
   font-size: 200%;
   color: white;
   line-height: 125%;

   text-shadow: 
    1px 1px 0px black,   
   -1px 1px 0px black,  
    1px -1px 0px black, 
   -1px -1px 0px black; 
}

.video-preview img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 10px;
}

.video-preview .play-button {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 80px; 
   height: 55px; 
   background-color: rgba(255, 255, 255, 0.6);
   border-radius: 10px; 
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .video-preview .play-button:before {
   content: '';
   display: inline-block;
   width: 0;
   height: 0;
   border-left: 18px solid red; 
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
   margin-left: 2px; 
 }

.video-preview:hover .play-button {
   background-color: rgba(255, 255, 255, 0.9);
 }

.video-preview:hover .play-button:before {
   border-left: 18px solid red; 
}

 .navigation-tip img {
   width: 100%;
 }

 .navigation-tip .video-preview .title {
   font-size: 90%;
 }


/*
STYLES FOR PRINTING
*/

@media print {
   #sidebar {
      display: none;
   }
}


/*
STYLES FOR BIGGER DEVICES (DESKTOP)
*/
@media (min-width: 769px) {
   .imgleft img, .imgright img {
      border-radius: 5%;
   }

   .imgleft {
      float: left;
      margin-right: 10px;
   }

   .obsah p.imgright {
      float: right;
      margin-left: 5px;
   }

   .hide-in-desktop-view {
      display: none;
   }

   #flag-top {
      background-color: #0057b7;
      font-size: 150%;
   }

   #flag-bottom {
      background-color: #ffd700; 
      font-size: 110%;
      position: relative;
   }

   #flag-bottom span {
      background-color: #0057b7; 
      padding: 10px; border: 3px solid white; 
      color: white;
   }

   #flag-bottom img  {
      width: 80px; 
      position: absolute; 
      top: 10px;
      left: 10px;
   }

   #header-left {
       background: #FFFFFF;
       height: 90px;
       width: 350px;
       float: left;
   }
   #header-left-logo {
       background: #FFFFFF;
       height: 90px;
       width: 472px;
       float: left;
   }
   #header {
       background: #FFFFFF;
       width: 970px;
       padding-bottom: 20px;
   }
   #header-right {
       background: #FFFFFF;
       height: 90px;
       width: 304px;
       float: right;
   }
   #hledani {
       width: 620px;
       height: 50px;
       position: relative;
   }
   .logo {
       position: relative;
       left: 0;
       float: left;
       width: 332px;
       height: 52px;
       margin: 0;
       padding: 0;
   }
   .active-link a::before {
      content: "» ";
   }
   .obsah {
       width: 630px;
       float: left;
       margin: 0px 0px 25px 0px;
       color: #000;
       line-height: 1.7em;
       font-size: 16px;
   }
   .obsah p {
       margin-bottom: 10px;
       margin-left: 0px;
   }
   #inhalt {
       width: 1050px;
       margin-left: auto;
       margin-right: auto;
   }
   #wrapper {
       background: #FFFFFF;
       width: 970px;
       margin: 0px auto;
       padding: 0px 40px 0px 40px;
       border-top: 20px #FFFFFF solid;
       border-bottom: 10px #FFFFFF solid;
   }
   #content {
       float: left;
       width: 630px;
       margin-left: 0px;
       padding-top: 30px;
       margin-bottom: 30px;
       color: #000;
       font-family: Open Sans, sans-serif;
       border-right: 0px solid #DDDDDD;
       top: 0px;
       position: relative;
   }
   .previouslink {
       float: left;
   }
   .nextlink {
       float: right;
   }
   .obsah ul, .obsah ol {
       margin-left: 19px;
   }
   #searchform {
      width: 300px;
      padding-bottom: 10px;
   }
   #searchinput {
      padding: 10px;
      width: 276px;
      background: url("/files/infrastructure/glass.svg") no-repeat 98% center;
      border: 1px solid grey;
   }
   #hamburger-icon {
       display: none;
   }
   .main-navigation {
       margin: 0;
       padding: 0;
       width: 300px;
       list-style-type: none;
       line-height: 35px;
       font-face: Open Sans, sans-serif;
       font-size: 14px;
       font-weight: normal;
   }
   .main-navigation .closed, .main-navigation .opened {
       padding-right: 10px;
       background-position: 98% 50%;
       background-repeat: no-repeat;
   }
   .main-navigation .header {
       background-color: #AAAAAA;
   }
   .main-navigation .opened {
       background-image: url("/files/infrastructure/ha-up.gif");
   }
   .main-navigation a {
       display: block;
       text-decoration: none;
   }
   .main-navigation a.hover {
       border-top: 1px solid #5F5F5F;
       border-bottom: 1px solid #7B7B7B;
       background-color: #7B7B7B;
       color: #FFFFFF;
   }
   .main-navigation ul {
       margin: 0;
       padding: 0;
       overflow: hidden;
   }
   .main-navigation li {
       margin: 0;
       padding: 0;
       list-style-type: none;
       background-color: #848484;
       color: #FFFFFF;
       line-height: 35px;
   }
   .main-navigation li a {
       padding: 2px 10px 2px 10px;
       border-top: 1px solid #9A9A9A;
       background-color: #DDDDDD;
       color: #000000;
   }
   .main-navigation li li {
      padding-left: 20px;
      background-color: white;
   }
   .main-navigation li li a {
       padding: 2px 10px 2px 10px;
       background-color: #DDDDDD;
       color: #000000;
   }
   .main-navigation li a:hover {
       padding: 2px 10px 2px 10px;
       background-color: white;
       color: #000000;
   }
   .main-navigation li.active a:hover {
       padding: 2px 10px 2px 10px;
       background-color: #DDDDDD;
       color: #000000;
   }
   .main-navigation li.active a, .main-navigation li li.active a {
       border-top: 1px solid #5F5F5F;
       border-bottom: 1px solid #7B7B7B;
       background-color: #404040;
       color: #FFFFFF;
   }
   .main-navigation li.active li a, .main-navigation li li a {
       padding: 2px 4px 2px 8px;
       background-color: #757575;
       color: #FFFFFF;
   }
   .main-navigation li.active ul li {
       display: block!Important;
   }
   #mobile-navigation {
    display: none;
   }
   .nextpreviouslinks {
      margin-top: 20px;
      border-top: 1px solid #DDD;
      padding-top: 20px;
   }
   
}

/*
STYLES FOR SMALLER DEVICES (MOBILE)
*/
@media (max-width: 768px), print {
   #mobile-searchinput {
      width: 100%;
      font-size: 200%;
      margin-bottom: 10px;
      padding-left: 10px;
      height: 40px;
      box-sizing: border-box;
   }

   #mobile-search-submit {
      box-sizing: border-box;
      height: 40px;
      width: 100%;
   }

   #mobile-searchform > div {
      display: flex;
      flex-direction: row;
   }

   .imgleft, .imgright {
      display: none;
   }

   .inner-calculator {
      display: flex;
      flex-flow: column;
      padding-bottom: 3ex;
      padding-top: 3ex;
      margin-bottom: 1em;
      margin-top: 1em;
      background-color: #DDDDDD;
   }

   .hide-in-mobile-view {
      display: none;
   }

   #flag-top {
      background-color: #0057b7;
      font-size: 120%;
   }

   #flag-bottom {
      background-color: #ffd700; 
      font-size: 100%;
   }

   #flag-bottom span {
      background-color: #0057b7; 
      padding: 10px; border: 3px solid white; 
      color: white;
   }

   #flag-bottom img  {
      display: none;
   }

   .web ul {
      margin-left: 15px;
   }

   #sidebar, #lista-media, #div-gpt-ad-1614763719924-0 {
       display: none;
   }
   body, #wrapper, #inhalt, #content, #header, #header-left {
       max-width: var(--mobile-break-point-width);
   }
   .obsah {
       max-width: calc(var(--mobile-break-point-width) - 10px);
   }
   #wrapper {
       padding: 0;
   }
   #content .obsah {
       padding-left: 10px;
       padding-right: 10px;
   }
   #content img {
       width: 100%;
       object-fit: contain;
   }
   #header-left-logo {
       padding-top: 20px;
       padding-left: 10px;
       padding-right: 10px;
   }
   #header-left-logo span {
      display: block;
      text-align: center;
   }
   #header-left-logo img {
      max-width: 75%;
   }
   #odkazy-na-kategorie {
       display: none;
   }
   #header .clear {
       clear: initial;
   }
   #content .obsah h1 {
       font-size: 200%;
       margin-bottom: 20px;
       margin-top: 20px;
       text-align: center;
       padding-bottom: 15px;
       border-bottom: 1px solid #CC0000;
       line-height: 133%;
   }
   .nextpreviouslinks {
      text-align: center;
      margin-top: 25px;
   }
   .previouslink {
       margin-bottom: 5px;
   }
   .nextpreviouslinks div a {
       display: block;
       padding-top: 10px;
       padding-bottom: 10px;
       background-color: #f0f0f0;
   }
   #footer {
       text-align: center;
   }
   #footer>div {
       float: none;
   }
   #footer .left {
       margin-bottom: 10px;
   }
   .obsah p {
       padding-bottom: 10px;
   }
   .obsah {
       color: #000;
       line-height: 1.7em;
       font-size: 130%;
   }
   #search input {
       height: 45px;
       width: 100%;
       background-color: #AAAAAA;
       background-repeat: no-repeat;
       background-position-y: center;
       padding-left: 33px;
       font-size: 17px;
       font-weight: bold;
       color: white;
       border: 0px solid #DDDDDD;
   }
   #search {
       height: 33px;
       margin-right: 33px;
   }
   #hamburger-icon {
       display: grid;
       justify-items: end;
       padding-right: 10px;
   }
   #mobile-navigation {
    display: none;
   }
   .main-navigation li a {
       display: block;
       padding-top: 20px;
       padding-bottom: 20px;
       background-color: #9A9A9A;
       color: white;
       padding-left: 10px;
       font-size: 175%;
       margin-bottom: 1px;
   }
   .main-navigation > li > span {
       display: block;
       background-color: red;
   }
   .main-navigation ul {
       display: none;
   }

   .main-navigation ul li a {
    padding-left: 30px;
    background-color: #757575;
   }
   #invisible-content-while-menu-is-open {
       display: block;
   }
   #close-mobile-navigation {
    text-align: right;
    font-size: 400%;
    line-height: 100%;
    color: #9A9A9A;
   }



   #header {
     display:flex;
     flex-direction: column-reverse;
   }

   #mobile-top-row {
      display: grid;
      background: #AAAAAA;
      overflow: hidden;
   }

   body {
      position: initial;
   }

   .category-chapters li {
      margin-top: 10px;
   }
}

@media print {
   #header-right, .nextpreviouslinks, iframe, .adsbygoogle, .google-auto-placed, .ap_container, .left-side-rail-edge, .left-side-rail-dismiss-btn, .right-side-rail-dismiss-btn, .right-side-rail-edge {
      display: none!Important;
   }

   #header {
      display: block;
   }

   #footer .left, .calculator {
      display: none;
   }

   .obsah {
      width: 708px;
      padding-left: 30px!Important;
      padding-right: 30px!Important;
   }
}