/* release-test 2026-10-26T10:42 */
/* Barvy webu. Všechny barvy stránky berou hodnotu odsud, noční režim je jen přepíše. */
:root {
   --mobile-break-point-width: 768px;
   /* Systémové písmo: nic se nestahuje, takže text po načtení nepřeskočí (CLS). */
   --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;

   --color-page: #f0f0f0;            /* pozadí kolem stránky */
   --color-bg: #ffffff;              /* pozadí stránky, postranního panelu a hlavičky */
   --color-text: #222222;            /* základní text a odkazy mimo článek */
   --color-text-strong: #000000;     /* text článku, odkazy při najetí myší */
   --color-text-muted: #333333;      /* patička, citace */
   --color-code: #444444;
   --color-accent: #cc0000;          /* nadpis článku, odkazy v článku */
   --color-surface: #f0f0f0;         /* šedé plochy: citace, kapitoly, mobilní předchozí/další */
   --color-surface-strong: #dddddd;  /* tip v navigaci, kalkulačky */
   --color-youtube: #cccccc;
   --color-border: #cccccc;
   --color-border-light: #dddddd;
   --color-table-border: #aaaaaa;
   --color-example: #ddddff;
   --color-example-border: #ccccff;
   --color-row-highlight: rgba(175, 175, 175, .3);
   --color-key-highlight: red;
   --color-input-border: grey;
   --search-icon: url("/files/infrastructure/glass.svg");
   --color-calculator-box: #ffffff;
   --color-calculator-result: #eeffee;

   /* Menu v postranním panelu (desktop) a rozbalovací menu (mobil) */
   --color-menu-header: #aaaaaa;
   --color-menu-group: #848484;
   --color-menu-item: #dddddd;
   --color-menu-item-text: #000000;
   --color-menu-item-border: #9a9a9a;
   --color-menu-hover: #ffffff;
   --color-menu-active: #404040;
   --color-menu-active-border-top: #5f5f5f;
   --color-menu-active-border-bottom: #7b7b7b;
   --color-menu-sub: #757575;
   --color-menu-inverse-text: #ffffff;
   --color-menu-mobile: #9a9a9a;

   --color-inline-blue: blue;        /* barvy natvrdo v článcích (style="color: blue", \color{blue}) */
   --color-inline-green: green;
   --logo-filter: none;              /* logo je černé, v nočním režimu se invertuje */
}

/* Noční režim. Řídí ho atribut data-theme na <html> (volba uložená přepínačem) a bez volby
   nastavení systému. Hodnoty jsou proto dvakrát, v obou blocích stejné. Jen pro obrazovku:
   tisk zůstává světlý. Obrázky se nemění, mají vlastní bílé pozadí. */
@media screen {
   :root[data-theme="dark"] {
      color-scheme: dark;
      --color-page: #101215;
      --color-bg: #1a1d21;
      --color-text: #d4d7db;
      --color-text-strong: #eceef1;
      --color-text-muted: #b3b8be;
      --color-code: #c9cdd2;
      --color-accent: #ff6f61;
      --color-surface: #24282d;
      --color-surface-strong: #2d3238;
      --color-youtube: #2d3238;
      --color-border: #3b4148;
      --color-border-light: #30353b;
      --color-table-border: #555c64;
      --color-example: #232645;
      --color-example-border: #3a3f70;
      --color-row-highlight: rgba(255, 255, 255, .08);
      --color-key-highlight: #ff6f61;
      --color-input-border: #555c64;
      --search-icon: url("/files/infrastructure/glass-dark.svg");
      --color-calculator-box: #1a1d21;
      --color-calculator-result: #1f3324;
      --color-menu-header: #3b4148;
      --color-menu-group: #2a2e33;
      --color-menu-item: #2d3238;
      --color-menu-item-text: #eceef1;
      --color-menu-item-border: #3b4148;
      --color-menu-hover: #3b4148;
      --color-menu-active: #59616b;
      --color-menu-active-border-top: #6b737d;
      --color-menu-active-border-bottom: #4a5159;
      --color-menu-sub: #23272c;
      --color-menu-inverse-text: #eceef1;
      --color-menu-mobile: #2d3238;
      --color-inline-blue: #6ea8ff;
      --color-inline-green: #5cc761;
      --logo-filter: invert(1);
   }
}
@media screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
      color-scheme: dark;
      --color-page: #101215;
      --color-bg: #1a1d21;
      --color-text: #d4d7db;
      --color-text-strong: #eceef1;
      --color-text-muted: #b3b8be;
      --color-code: #c9cdd2;
      --color-accent: #ff6f61;
      --color-surface: #24282d;
      --color-surface-strong: #2d3238;
      --color-youtube: #2d3238;
      --color-border: #3b4148;
      --color-border-light: #30353b;
      --color-table-border: #555c64;
      --color-example: #232645;
      --color-example-border: #3a3f70;
      --color-row-highlight: rgba(255, 255, 255, .08);
      --color-key-highlight: #ff6f61;
      --color-input-border: #555c64;
      --search-icon: url("/files/infrastructure/glass-dark.svg");
      --color-calculator-box: #1a1d21;
      --color-calculator-result: #1f3324;
      --color-menu-header: #3b4148;
      --color-menu-group: #2a2e33;
      --color-menu-item: #2d3238;
      --color-menu-item-text: #eceef1;
      --color-menu-item-border: #3b4148;
      --color-menu-hover: #3b4148;
      --color-menu-active: #59616b;
      --color-menu-active-border-top: #6b737d;
      --color-menu-active-border-bottom: #4a5159;
      --color-menu-sub: #23272c;
      --color-menu-inverse-text: #eceef1;
      --color-menu-mobile: #2d3238;
      --color-inline-blue: #6ea8ff;
      --color-inline-green: #5cc761;
      --logo-filter: invert(1);
   }
}

/* Přepínač vzhledu vpravo nahoře (na mobilu vedle hamburgeru): podle systému → opačný → stejný jako systém → zpět. */
#theme-toggle {
   width: 40px;
   height: 40px;
   border: 1px solid var(--color-border);
   border-radius: 50%;
   background: transparent;
   color: var(--color-text);
   font-size: 20px;
   line-height: 1;
   cursor: pointer;
}
#theme-toggle:hover {
   background: var(--color-surface);
}
/* Ikona ukazuje zvolený stav: ◐ podle systému (bez data-theme), ☀ světlý, ☾ tmavý. */
.theme-icon-auto, .theme-icon-light, .theme-icon-dark {
   display: none;
}
:root:not([data-theme]) .theme-icon-auto, :root[data-theme="light"] .theme-icon-light, :root[data-theme="dark"] .theme-icon-dark {
   display: inline;
}
#header-left-logo img {
   filter: var(--logo-filter);
}
/* Články a vzorce mají místy barvu natvrdo; tmavě modrá a zelená by v nočním režimu zanikly.
   Ve dne mají proměnné původní hodnotu, takže se nic nemění. */
.obsah [style*="color: blue"], .obsah [style*="color:blue"], .obsah [color="blue"] {
   color: var(--color-inline-blue) !important;
}
.obsah [style*="color: green"], .obsah [style*="color:green"], .obsah [color="green"] {
   color: var(--color-inline-green) !important;
}
@media print {
   #theme-toggle {
      display: none;
   }
}

/******************* * 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;
}

/* Názvy funkcí, text a velká řecká písmena jsou ve vzorcích stojaté jako v MathJaxu. */
.inline-math .upright {
   font-style: normal;
}

.video-container iframe, .video-container object, .video-container embed {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
}
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: var(--color-text-strong);
}
.left {
   float: left;
}
/******************* * GLOBAL * ********************/
body {
   background: var(--color-page);
   font: 12px/17px var(--font-sans);
   color: var(--color-text);
   margin-left: auto;
   margin-right: auto;
}
input {
   font-family: var(--font-sans);
}
/******************* * HYPERLINKS * ********************/
a, a:visited {
   color: var(--color-text);
   text-decoration: none;
}
a:hover {
   color: var(--color-text-strong);
   text-decoration: none;
}
a img {
   border: none;
}
a:focus, a:hover, a:active {
   outline: none;
}
form {
   margin: 0px;
   padding: 0px;
}
/******************* * OBSAH * ********************/
.obsah strong {
   font-weight: bold;
}
.obsah h1 {
   font-size: 24px;
   font-weight: bold;
   padding: 0px 0px 7px 0px;
   color: var(--color-accent);
}
.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: var(--color-accent);
   text-decoration: underline;
}
.obsah a:hover {
   text-decoration: underline;
   color: var(--color-text-strong);
}
.page {
   margin: 10px 0px 0px 0px;
}
code {
   color: var(--color-code);
   font: 10px/12px/17px georgia;
}
pre {
   margin-bottom: 15px;
}
blockquote {
   background: var(--color-surface);
   margin: 0px 0px 0px 0px;
   color: var(--color-text-muted);
   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: var(--color-text-strong);
   text-decoration: none;
}
blockquote a:hover {
   color: var(--color-accent);
   text-decoration: underline;
}
#sidebar {
   background: var(--color-bg);
   float: right;
   width: 300px;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 20px 0px;
   top: 0px;
   position: relative;
}
#sidebar li ul {
   color: var(--color-text-strong);
}
#sidebar li li {
   color: var(--color-text-strong);
}
.navigation-tip a {
   display: block;
   border: 1px solid var(--color-border);
   background-color: var(--color-surface-strong);
   margin-top: 40px;
   padding: 15px;
   font-size: 133%;
   line-height: 133%;
   text-align: center;
}
.navigation-tip span {
   color: var(--color-accent);
}
/* Karta s příběhem z Miroteky pod pravým menu: náhled 9 : 16 oříznutý na
   výšku 4 : 5 (kresba je dole), nahoře nadpis přes tmavý přechod jako na
   přehledu miroteka.com. Má vlastní tmavé barvy, v nočním režimu se nemění. */
.miroteka-story {
   position: relative;
   display: block;
   margin-top: 30px;
   aspect-ratio: 4 / 5;
   overflow: hidden;
   border-radius: 14px;
   background: #090c26;
   text-decoration: none;
}
.miroteka-story img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center bottom;
}
.miroteka-story-label, .miroteka-story-title {
   position: relative;
   display: block;
   text-align: center;
}
.miroteka-story-label {
   padding: 18px 12px 0;
   background: #090c26e6;
   font-size: 80%;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #ffd27a;
}
.miroteka-story-title {
   padding: 6px 16px 36px;
   background: linear-gradient(#090c26e6 45%, #090c2600);
   font-size: 130%;
   font-weight: bold;
   line-height: 1.2;
   /* Barva přímo tady, ne zděděná z odkazu: globální a:visited a a:hover
      barví text načerno a mají vyšší specificitu než .miroteka-story. */
   color: #f4f1ff;
}
.miroteka-story:hover .miroteka-story-title {
   text-decoration: underline;
}
.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: var(--color-text-muted);
   border-top: 1px solid var(--color-border);
   clear: both;
}
#footer a:hover {
   border-bottom: none;
}
#footer .language-versions {
   margin-top: 6px;
}
#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.xlarge {
   font-size: x-large;
}
a.on {
   color: var(--color-bg);
}
a.off {
   color: var(--color-text-strong);
}
a.off:hover {
   color: var(--color-bg);
}
.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: var(--color-example);
   border: 1px solid var(--color-example-border);
}
.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;
}
.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 var(--color-table-border);
   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 var(--color-border);
   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: var(--color-row-highlight);
}
.ajaxloader {
   padding-left: 15px;
   display: none;
}
#content table, #content form {
   clear: both;
}
.highlightkey {
   color: var(--color-key-highlight);
}
.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;
}
#wrapper {
   background: var(--color-bg);
}
#content {
   color: var(--color-text-strong);
   font-family: var(--font-sans);
}
.obsah li {
   padding-top: 5px;
   padding-bottom: 5px;
}
.web table td, .web table th {
   border: 1px solid var(--color-table-border);
   padding: 3px 10px;
   text-align: center;
}

.web table {
   margin: 10px 0;
}
.article-chapters {
   background-color: var(--color-surface);
   padding: 10px;
   margin-top: 25px;
   margin-bottom: 15px;
   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 var(--color-youtube);
   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: var(--color-youtube);
   background-size: 35px;
}

/* Kalkulačka vložená do článku jako HTML (public/javascript/calculators.js, docs/kalkulacky.md). */
form.calculator {
   display: flex;
   flex-direction: column;
   gap: 12px;
   max-width: 420px;
   margin: 1.5em auto;
   padding: 16px 18px;
   border-radius: 10px;
   background-color: var(--color-surface-strong);
}

form.calculator label,
form.calculator .calculator-row {
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-size: 0.95em;
}

form.calculator .calculator-value {
   display: flex;
   align-items: center;
   gap: 6px;
}

form.calculator input,
form.calculator output,
form.calculator select,
form.calculator textarea {
   box-sizing: border-box;
   font-size: 1.1em;
   font-family: inherit;
   padding: 6px 8px;
   border: 1px solid var(--color-input-border);
   border-radius: 6px;
   color: var(--color-text-strong);
   background-color: var(--color-calculator-box);
}

form.calculator input,
form.calculator output {
   flex: 1;
   min-width: 0;
}

form.calculator select {
   flex: 0 0 auto;
   width: auto;
   min-width: 5.5em;
}

form.calculator input[aria-invalid="true"] {
   border-color: var(--color-accent);
   outline-color: var(--color-accent);
}

form.calculator output {
   min-height: 1.5em;
   font-weight: bold;
   overflow-wrap: anywhere;
   white-space: pre-line;
   background-color: var(--color-calculator-result);
}

form.calculator output.calculator-error,
form.calculator output.calculator-empty,
form.calculator .calculator-message {
   font-weight: normal;
   font-size: 1em;
}

form.calculator .calculator-message {
   margin: 0;
   color: var(--color-accent);
}

/* Pole nebo výsledek se znakem na konci (data-suffix) a tlačítkem na zkopírování výsledku. */
form.calculator .calculator-field {
   position: relative;
   display: flex;
   flex: 1;
   min-width: 0;
}

form.calculator .calculator-with-suffix > input,
form.calculator .calculator-with-suffix > output {
   padding-right: 3.2em;
}

form.calculator .calculator-with-copy > output {
   padding-right: 2.6em;
}

form.calculator .calculator-with-suffix.calculator-with-copy > output {
   padding-right: 5.6em;
}

form.calculator .calculator-suffix {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.1em;
   color: var(--color-text-muted);
   opacity: 0.6;
   pointer-events: none;
}

form.calculator .calculator-with-copy .calculator-suffix {
   right: 2.4em;
}

form.calculator button.calculator-copy {
   position: absolute;
   right: 4px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   padding: 5px;
   border: none;
   border-radius: 4px;
   color: var(--color-text-muted);
   background: transparent;
}

form.calculator button.calculator-copy:hover,
form.calculator button.calculator-copy:focus-visible {
   color: var(--color-text-strong);
   background-color: var(--color-surface-strong);
}

form.calculator button.calculator-copy[hidden],
form.calculator .calculator-copy .calculator-copied-icon,
form.calculator .calculator-copied .calculator-copy-icon {
   display: none;
}

form.calculator .calculator-copied .calculator-copied-icon {
   display: block;
}

form.calculator button:not(.calculator-copy) {
   align-self: center;
   font-size: 1.05em;
   padding: 6px 24px;
   border: 1px solid var(--color-input-border);
   border-radius: 6px;
   color: var(--color-text-strong);
   background-color: var(--color-calculator-box);
   cursor: pointer;
}

form.calculator label.calculator-choice {
   flex-direction: row;
   align-items: center;
}

form.calculator label.calculator-choice input {
   flex: 0 0 auto;
}

/* Zlomky: čitatel nad jmenovatelem, mezi nimi zlomková čára. */
form.calculator .calculator-fractions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-size: 1.2em;
}

form.calculator .calculator-fraction {
   display: inline-flex;
   flex-direction: column;
   gap: 6px;
   width: 4.5em;
}

form.calculator .calculator-row .calculator-fraction {
   align-self: center;
}

form.calculator .calculator-fraction > :first-child {
   position: relative;
}

form.calculator .calculator-fraction > :first-child::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -4px;
   border-bottom: 2px solid var(--color-text-strong);
}

form.calculator .calculator-fraction > * {
   height: 2.2em;
   min-height: 0;
   text-align: center;
}

/* Věta pod kalkulačkou s dosazenými hodnotami (class="calculator-sentence"). */
form.calculator p.calculator-sentence {
   margin: 0;
   text-align: center;
}

form.calculator .calculator-sentence[hidden] {
   display: none;
}

/* S postupem ve zlomku se celý příklad vejde na řádek až v širším formuláři. */
form.calculator:has(.calculator-steps) {
   max-width: 600px;
}

/* Postup ve zlomku: čitatel a jmenovatel jako text, širší než pole. */
form.calculator .calculator-fraction.calculator-steps {
   width: auto;
   min-width: 4.5em;
}

form.calculator .calculator-steps > .calculator-sentence {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   white-space: nowrap;
}

/* Trojčlenka: dva řádky „hodnota … hodnota“. */
form.calculator .calculator-proportion {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 8px;
}

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

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

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


/*
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;
   }

   #header-left {
       background: var(--color-bg);
       height: 90px;
       width: 350px;
       float: left;
   }
   #header-left-logo {
       background: var(--color-bg);
       height: 90px;
       width: 472px;
       float: left;
   }
   #header {
       background: var(--color-bg);
       width: 970px;
       padding-bottom: 20px;
   }
   #header-right {
       background: var(--color-bg);
       height: 90px;
       width: 304px;
       float: right;
   }
   #hledani {
       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: var(--color-text-strong);
       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 {
       width: 970px;
       margin: 0px auto;
       padding: 0px 40px 0px 40px;
       border-top: 20px var(--color-bg) solid;
       border-bottom: 10px var(--color-bg) solid;
   }
   #content {
       float: left;
       width: 630px;
       margin-left: 0px;
       padding-top: 30px;
       margin-bottom: 30px;
       top: 0px;
       position: relative;
   }
   .previouslink {
       float: left;
   }
   .nextlink {
       float: right;
   }
   .obsah ul, .obsah ol {
       margin-left: 19px;
   }
   #searchform {
      position: relative;
      width: 300px;
      padding-bottom: 10px;
   }
   #searchinput {
      box-sizing: border-box;
      width: 300px;
      padding: 10px 40px 10px 10px;
      border: 1px solid var(--color-input-border);
   }
   /* lupa uvnitř pole, kliknutím odešle hledání */
   #search-submit {
      position: absolute;
      top: 1px;
      right: 1px;
      bottom: 11px;
      width: 40px;
      padding: 0;
      border: 0;
      background: var(--search-icon) no-repeat center / 18px 18px;
      cursor: pointer;
   }
   #hamburger-icon {
       display: none;
   }
   #theme-toggle {
       float: right;
       margin-top: 25px;
   }
   .main-navigation {
       margin: 0;
       padding: 0;
       width: 300px;
       list-style-type: none;
       line-height: 35px;
       font-size: 14px;
       font-weight: normal;
   }
   .main-navigation .closed {
       padding-right: 10px;
       background-position: 98% 50%;
       background-repeat: no-repeat;
   }
   .main-navigation .header {
       background-color: var(--color-menu-header);
   }
   .main-navigation a {
       display: block;
       text-decoration: none;
   }
   .main-navigation a.hover {
       border-top: 1px solid var(--color-menu-active-border-top);
       border-bottom: 1px solid var(--color-menu-active-border-bottom);
       background-color: var(--color-menu-active-border-bottom);
       color: var(--color-menu-inverse-text);
   }
   .main-navigation ul {
       margin: 0;
       padding: 0;
       overflow: hidden;
   }
   .main-navigation li {
       margin: 0;
       padding: 0;
       list-style-type: none;
       background-color: var(--color-menu-group);
       color: var(--color-menu-inverse-text);
       line-height: 35px;
   }
   .main-navigation li a {
       padding: 2px 10px 2px 10px;
       border-top: 1px solid var(--color-menu-item-border);
       background-color: var(--color-menu-item);
       color: var(--color-menu-item-text);
   }
   .main-navigation li li {
      padding-left: 20px;
      background-color: var(--color-menu-hover);
   }
   .main-navigation li li a {
       padding: 2px 10px 2px 10px;
       background-color: var(--color-menu-item);
       color: var(--color-menu-item-text);
   }
   .main-navigation li a:hover {
       padding: 2px 10px 2px 10px;
       background-color: var(--color-menu-hover);
       color: var(--color-menu-item-text);
   }
   .main-navigation li.active a:hover {
       padding: 2px 10px 2px 10px;
       background-color: var(--color-menu-item);
       color: var(--color-menu-item-text);
   }
   .main-navigation li.active a, .main-navigation li li.active a {
       border-top: 1px solid var(--color-menu-active-border-top);
       border-bottom: 1px solid var(--color-menu-active-border-bottom);
       background-color: var(--color-menu-active);
       color: var(--color-menu-inverse-text);
   }
   .main-navigation li.active li a, .main-navigation li li a {
       padding: 2px 4px 2px 8px;
       background-color: var(--color-menu-sub);
       color: var(--color-menu-inverse-text);
   }
   .main-navigation li.active ul li {
       display: block!important;
   }
   #mobile-navigation {
    display: none;
   }
   .nextpreviouslinks {
      margin-top: 20px;
      border-top: 1px solid var(--color-border-light);
      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;
   }

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

   #sidebar {
       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%;
   }
   #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 var(--color-accent);
       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: var(--color-surface);
   }
   #footer {
       text-align: center;
   }
   #footer>div {
       float: none;
   }
   #footer .left {
       margin-bottom: 10px;
   }
   .obsah p {
       padding-bottom: 10px;
   }
   .obsah {
       color: var(--color-text-strong);
       line-height: 1.7em;
       font-size: 130%;
   }
   #search input {
       height: 45px;
       width: 100%;
       background-color: var(--color-menu-header);
       background-repeat: no-repeat;
       background-position-y: center;
       padding-left: 33px;
       font-size: 17px;
       font-weight: bold;
       color: var(--color-menu-inverse-text);
       border: 0px solid var(--color-border-light);
   }
   #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: var(--color-menu-mobile);
       color: var(--color-menu-inverse-text);
       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: var(--color-menu-sub);
   }
   #invisible-content-while-menu-is-open {
       display: block;
   }
   #close-mobile-navigation {
    text-align: right;
    font-size: 400%;
    line-height: 100%;
    color: var(--color-menu-mobile);
   }



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

   #mobile-top-row {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      background: var(--color-menu-header);
      overflow: hidden;
   }

   #theme-toggle {
      margin-left: 10px;
      color: var(--color-menu-inverse-text);
      border-color: var(--color-menu-inverse-text);
   }

   body {
      position: initial;
   }
}

@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;
   }
}