@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

:root {

  /* Písma ve VisualBooku */

--primary-font: 'DM Sans';
--secondary-font: 'DM Sans';
--text-block-size: 26px;

/* Barvy ve VisualBooku */

--brand-barva: #0b172e;
--nadpisy-barva: #393839;

--sidebar-barva: #0b172e;
--sidebar-barva-text: #f89e7a;
--sidebar-barva-text-aktivni: white;
--sidebar-barva-linky: #0b172e;
--sidebar-barva-nadpis: #104c97;
--sidebar-barva-pozadi-policko-hlavni-aktivni-hover: #0b172e;
--sidebar-barva-pozadi-policko-hlavni-neaktivni-hover: #0b172e;
--sidebar-barva-pozadi-policko-vnorene-aktivni-hover: #0b172e;
--sidebar-barva-pozadi-policko-vnorene-neaktivni-hover: #0b172e;

--scrollbar-hlavni-pozadi: white;
--scrollbar-hlavni-handle: #104c97;
--scrollbar-hlavni-handle-hover: #0b172e;
--scrollbar-menu-pozadi: #104c97;
--scrollbar-menu-handle: #f89e7a;
--scrollbar-menu-handle-hover: white;

--hamburger-color: #104c97;

--h1-barva: var(--nadpisy-barva);
--h2-barva: var(--nadpisy-barva);
--h3-barva: var(--nadpisy-barva);
--h4-barva: var(--nadpisy-barva);
--h5-barva: var(--nadpisy-barva);

--text-block-light-barva-pozadi: var(--white);
--text-block-light-barva: #104c97;
--text-block-dark-barva-pozadi: #104c97;
--text-block-dark-barva: var(--gray10);

--horni-pruh-barva-pozadi: var(--pozadi-webu);
--horni-pruh-barva-text-maly: #393839;
--horni-pruh-barva-text-velky: #393839;

--pozadi-webu: var(--gray10);
--text-barva: #58595b;
--text-odkaz-barva: #104c97;

--tlacitko-aktivni-barva: #f89e7a;
--tlacitko-pasivni-barva: #104c97;

--dolni-pruh-barva-pozadi: var(--gray10);
--dolni-pruh-barva-text-maly: #104c97;
--dolni-pruh-barva-text-velky: #104c97;

--tabulka-horni-pruh: var(--white);
--tabulka-nadpis: var(--gray100);
--tabulka-linka: var(--gray80);
--tabulka-hover: var(--gray90);

--kod-block-barva-pozadi: var(--white);
--kod-block-barva-okraj: var(--gray20);
--kod-block-barva-text: #104c97;

--color-avoid: #f95355;
--color-allowed: #13a454;
--color-alert: #eb6307;

/* Definice barev */

--gray100: #161616;
--gray90: #262626;
--gray80: #393939;
--gray70: #525252;
--gray60: #6F6F6F;
--gray50: #8D8D8D;
--gray40: #A8A8A8;
--gray30: #C6C6C6;
--gray20: #E0E0E0;
--gray15: #eeeeee;
--gray10: #f8f8f9;

--white: #ffffff;
--black: #000000;
}

a {
  color: #104c97;
}

.displayG1-text-block-big {
  font-family: var(--displayG1-font);
  color: var(--text-block-dark-barva);
  font-size: 130px;
  margin-left: 15px;
}

.displayG2-text-block {
  font-family: var(--displayG2-font);
  color: var(--text-block-light-barva);
  font-size: var(--text-block-size);
  margin-left: 15px;
}

.displayG3-text-block {
  font-family: var(--displayG3-font);
  color: var(--text-block-light-barva);
  font-size: var(--text-block-size);
  margin-left: 15px;
}

.displayG1-text-block {
  font-family: var(--displayG1-font);
  color: var(--text-block-light-barva);
  font-size: var(--text-block-size);
  margin-left: 15px;
}

  .primary-text-block-big {
      font-family: var(--primary-font);
      color: var(--text-block-dark-barva);
      font-size: 130px;
      margin-left: 15px;
    }
    
    .primary-text-block {
      font-family: var(--primary-font);
      color: var(--text-block-dark-barva);
      font-size: var(--text-block-size);
      margin-left: 15px;
    }
    
    .secondary-text-block-big {
      font-family: var(--secondary-font);
      color: var(--text-block-dark-barva);
      font-size: 130px;
      margin-left: 15px;
    }
    
    .secondary-text-block {
      font-family: var(--secondary-font);
      color: var(--text-block-dark-barva);
      font-size: var(--text-block-size);
      margin-left: 15px;
    }
    
    .primary-h1 {
      font-family: var(--primary-font);
      margin: 15px;
      font-size: var(--text-block-size);
      text-transform: uppercase;
    }
    
    .secondary-h1 {
      font-family: var(--secondary-font);
      margin: 15px;
      font-size: var(--text-block-size);
    }
    
    .primary-p {
      font-family: var(--primary-font);
      margin: 15px;
      font-size: var(--text-block-size);
      color: var(--text-block-light-barva);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      letter-spacing: 1px;
    }
    
    .secondary-p {
      font-family: var(--secondary-font);
      margin: 15px;
      font-size: var(--text-block-size);
      color: var(--text-block-light-barva);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      letter-spacing: 1px;
    }
    
    .regular {
      font-style: normal;
      font-weight: normal;
    }
    
    .regular-italic {
      font-style: italic;
      font-weight: normal;
    }
    
    .semibold {
      font-style: normal;
      font-weight: 600;
    }
    
    .semibold-italic {
      font-style: italic;
      font-weight: 600;
    }
    
    .bold {
      font-style: normal;
      font-weight: bold;
    }
    
    .bold-italic {
      font-style: italic;
      font-weight: bold;
    }
    
    .uppercase {
      text-transform: uppercase;
    }
    
    body {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      background-color: #161616;
    }

.grid-XL { 
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-gap: 20px;
align-items: stretch;
}

.grid-XL img {
max-width: 100%;
font-size: 16px;
}

.grid-L { 
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: stretch;
}

.grid-L img {
max-width: 100%;
}

.grid-M { 
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
align-items: stretch;
font-size: 16px;
}

.grid-M img {
max-width: 100%;
}

.grid-S { 
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 20px;
align-items: stretch;
font-size: 15px;
text-align:center;
}

.grid-XS { 
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
align-items: stretch;
font-size: 15px;
text-align:center;
}

.grid-S img {
max-width: 100%;
}

div.solo-image {
float: left;
}

div.solo-image img {
width: 100%;
}

.image-avoid {
color: var(--color-avoid);
}

.image-allowed {
color: var(--color-allowed);
}

.text-avoid {
height: 200px;
color: var(--color-avoid);
background-color: var(--gray90);
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: solid 1px var(--gray90);
}

.text-avoid p {
font-family: var(--primary-font);
font-size: 16px;
color: var(--color-avoid);
font-weight: 600;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.text-allowed {
height: 200px;
color: var(--color-allowed);
background-color: var(--gray90);
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: solid 1px var(--gray90);
}

.text-allowed p {
font-family: var(--primary-font);
font-size: 18px;
color: var(--white);
font-weight: 600;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}


div.navigace {
background: transparent;
border: none;
font-family: var(--secondary-font);
font-size: 19px;
line-height: 2;
color: #107e49;
}

.catalog-fp8r7r-hintStyle-hintStyle-hintStyle {
color: #1bce2c;
}

.catalog-pyf5f-Html-Html {
background: transparent;
border: none;
font-family: var(--primary-font);
font-size: 17px;
line-height: 1.6;
color: var(--text-barva);
}

.catalog-1hv7whf-AppLayout-AppLayout {
color: var(--hamburger-color);
}

/* Odrážky */
.catalog-1p7s4r-ul-Styled {
color: var(--text-barva);
}

/* DO NOT popisky */
[class^="catalog-"][class$="-Image-Image"] {
color: var(--text-barva);
}

/* Barvy popisky */
.catalog-kvcxn5-Color-Color {
color: var(--text-barva);
}

/* Barvy HEX popisky */
.catalog-14g93bm-Color-Color {
color: var(--text-barva);
font-weight: bold;
}

[class^="catalog-"][class$="Code"] {
background-color: var(--kod-block-barva-pozadi);
border-color: var(--kod-block-barva-okraj);
}

.catalog-uhgdsm-PageHeader-PageHeader {
font-family: var(--primary-font);
font-weight: 600;
color: var(--horni-pruh-barva-text-velky);
line-height: 1.7em;

}

.catalog-3gwipn-PageHeader-PageHeader {
font-family: var(--primary-font);
font-weight: normal;
color: var(--horni-pruh-barva-text-maly);
opacity: 1.0;
}

[class^="catalog-"][class$="-p-Styled"] {
font-family: var(--primary-font);
font-weight: normal;
color: var(--text-barva);
line-height: 1.6em;
}

[class^="catalog-"][class$="-h1-headingStyle"] {
font-family: var(--primary-font);
font-weight: 600;
color: var(--h1-barva);
}

[class^="catalog-"][class$="-h2-headingStyle"] {
font-family: var(--primary-font);
font-weight: 600;
color: var(--h2-barva);
line-height: 1.4em;
}

[class^="catalog-"][class$="-h3-headingStyle"] {
font-family: var(--primary-font);
font-weight: 600;
color: var(--h3-barva);
}

[class^="catalog-"][class$="-h4-headingStyle"] {
font-family: var(--primary-font);
font-weight: 600;
color: var(--h4-barva);
}

[class^="catalog-"][class$="-h5-headingStyle"] {
font-family: var(--primary-font);
font-weight: 600;
color: var(--h5-barva);
}

p, h2 {
max-width: 600px;
}

/* Navigace */
.catalog-1o7e4u9-linkStyle {
color: var(--text-odkaz-barva);
}

.catalog-144rlyb-NavigationBar-NavigationBar {
font-family: var(--primary-font);
font-weight: normal;
color: var(--dolni-pruh-barva-text-maly);
}

.catalog-1mmqys6-NavigationBar-NavigationBar {
font-family: var(--primary-font);
font-weight: 700;
color: var(--horni-pruh-barva-text-velky);
}

/* Powered by... */
.catalog-o6mnmr-Menu-Menu {
display: none;
}

/* Small header title */
.catalog-3gwipn-PageHeader-PageHeader {
display: none;
}

.catalog-116v0ww-PageHeader-PageHeader {
  margin-top: -39px;
  margin-bottom: 0px;
}

/* Header title */
.catalog-uhgdsm-PageHeader-PageHeader {
  font-size: 28px;
}

/* Dolni navigace */
.catalog-xk2ba6-NavigationBar-NavigationBar {
display: none;
}

/* Tabulka linky */
.catalog-1149i8c-Table-Table tr {
border-color: var(--tabulka-linka);
}

/* Tabulka nadpisy */
[class^="catalog-"][class$="-HeadingCell-HeadingCell"] {
color: var(--tabulka-nadpis);
background-color: var(--tabulka-horni-pruh);
padding-left: 18px;
height: 24px;
vertical-align: middle;
}

/* Tabulka texty */
[class^="catalog-"][class$="-Cell-Cell"] {
padding-left: 18px;
height: 28px;
vertical-align: middle;
}

tr:hover {
background-color: var(--tabulka-hover);
}

.button {
background-color: #f8f8f9;
color: black;
border: 2px solid var(--tlacitko-pasivni-barva);
color: #104c97;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
cursor: pointer;
width: 100%;
font-weight: 500;
}


.button:hover {
background-color: var(--tlacitko-aktivni-barva);
border: 2px solid var(--tlacitko-aktivni-barva);
color: white;
}

.material-icons.allowed {
color:var(--color-allowed);
}

.material-icons.avoid {
color: var(--color-avoid);
}

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

.catalog-1v5ftys-AppLayout-AppLayout::-webkit-scrollbar {
  width: 4px;
}

.catalog-1v5ftys-AppLayout-AppLayout::-webkit-scrollbar-track {
  background: var(--scrollbar-menu-pozadi);
}

.catalog-1v5ftys-AppLayout-AppLayout::-webkit-scrollbar-thumb {
  background: var(--scrollbar-menu-handle);
  border-radius: 10px;
}

.catalog-1v5ftys-AppLayout-AppLayout::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-menu-handle-hover);
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-hlavni-pozadi);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-hlavni-handle);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hlavni-handle-hover);
}

.catalog-rus7op-linkStyle:hover {
  background: var(--sidebar-barva-pozadi-policko-hlavni-neaktivni-hover);
}

.catalog-iqngyy-linkStyle-linkStyle-linkStyle:hover {
  background: var(--sidebar-barva-pozadi-policko-vnorene-neaktivni-hover);
}

.catalog-ey0n6x-linkStyle-linkStyle-linkStyle-activeLinkStyle-activeLinkStyle:hover {
  background: var(--sidebar-barva-pozadi-policko-vnorene-aktivni-hover);
}

.catalog-1vfyi0d-linkStyle-activeLinkStyle-activeLinkStyle:hover {
  background: var(--sidebar-barva-pozadi-policko-hlavni-aktivni-hover);
}

.catalog-iqngyy-linkStyle-linkStyle-linkStyle {
  font-size: 16px;
}