@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,600,700|IBM+Plex+Serif:400,400i,600,700&display=swap&subset=latin-ext');

@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: 'IBM Plex Serif';
  --secondary-font: 'IBM Plex Sans';
  --text-block-size: 25px;

  /* Barvy ve VisualBooku */
  
  --brand-barva: var(--light-blue50);
  --nadpisy-barva: var(--dark-blue70);
  
  --sidebar-barva: var(--dark-blue70);
  --sidebar-barva-text: var(--gray10);
  --sidebar-barva-text-aktivni: var(--light-blue50);
  --sidebar-barva-linky: var(--dark-blue70);
  --sidebar-barva-nadpis: var(--dark-blue70);
  --hamburger-color: var(--light-blue50);
  
  --h1-barva: var(--dark-blue70);
  --h2-barva: var(--dark-blue70);
  --h3-barva: var(--light-blue60);
  --h4-barva: var(--dark-blue70);
  --h5-barva: var(--dark-blue70);

  --tlacitko-aktivni-barva: var(--light-blue60);
  --tlacitko-pasivni-barva: var(--light-blue50);
  
  --text-block-light-barva-pozadi: var(--white);
  --text-block-light-barva: var(--dark-blue70);
  --text-block-dark-barva-pozadi: var(--dark-blue70);
  --text-block-dark-barva: var(--white);
  
  --horni-pruh-barva-pozadi: var(--gray10);
  --horni-pruh-barva-text-maly: var(--light-blue50);
  --horni-pruh-barva-text-velky: var(--dark-blue70);
  
  --pozadi-webu: var(--gray10);
  --text-barva: var(--dark-blue60);
  --text-odkaz-barva: var(--light-blue60);
  
  --dolni-pruh-barva-pozadi: var(--gray10);
  --dolni-pruh-barva-text-maly: var(--dark-blue70);
  --dolni-pruh-barva-text-velky: var(--dark-blue70);
  
  --tabulka-horni-pruh: var(--white);
  --tabulka-nadpis: var(--dark-blue70);
  --tabulka-linka: var(--gray20);
  --tabulka-hover: var(--gray15);
  
  --kod-block-barva-pozadi: var(--gray15);
  --kod-block-barva-okraj: var(--gray20);
  --kod-block-barva-text: var(--dark-blue70);
  
  --color-avoid: #ea0029;
  --color-allowed: #00a537;
  
  /* Definice barev */
  
  --dark-blue80: #061338;
  --dark-blue70: #162459;
  --dark-blue60: #243471;

  --light-blue50: #009EE2;
  --light-blue60: #007AC9;
  --light-blue70: #06539F;

  --gray70: #455270;
  --gray60: #5f6f94;
  --gray50: #818eaf;

  --gray30: #bbc5ee;
  --gray20: #dddfe6;
  --gray10: #f3f3f6;

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

.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: 700;
}
      
.bold-italic {
font-style: italic;
font-weight: 700;
}
      
.uppercase {
text-transform: uppercase;
}
      
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
background-color: #F1F3FD;
}

.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 {
  border-top: var( --color-avoid) solid 4px;
  color: var( --color-avoid);
}

.catalog-pyf5f-Html-Html {
  background: transparent;
  border: none;
  font-family: var(--secondary-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-12qq0nz-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-rejvmi-PageHeader-PageHeader {
  font-family: var(--primary-font);
  font-weight: 600;
  color: var(--horni-pruh-barva-text-velky);
  margin-top: -74px;
  font-size: 37px;
  letter-spacing: -0.5px;
}

.catalog-4g86b3-Page-Page {
  margin-top: -33px;
}

.catalog-18zmhq9-PageHeader-PageHeader {
  display: none;
}

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

[class^="catalog-"][class$="-h2-headingStyle"] {
  font-family: var(--secondary-font);
  font-weight: 700;
  color: var(--h2-barva);
  line-height: 1.3em;
  font-size: 22px;
}

[class^="catalog-"][class$="-h3-headingStyle"] {
  font-family: var(--secondary-font);
  font-weight: 600;
  color: var(--h3-barva);
  line-height: 1.3em;
  font-size: 20px;
}

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

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

[class^="catalog-"][class$="-linkStyle"] {
  font-weight: 400;
}

[class^="catalog-"][class$="-activeLinkStyle"] {
  font-weight: 400;
}


/* Textace obecna */
.catalog-1xnrd5e-p-Styled {
  line-height: 1.4em;
  color: var(--text-barva);
  font-size: 18px;
  font-weight: 400;
}

.catalog-11428nq-linkStyle {
  font-weight: 400;
}

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

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

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

.catalog-12qq0nz-Color-Color {
text-transform: uppercase;
}

.catalog-16ma5oi-_ColorPaletteItem-_ColorPaletteItem {
text-transform: uppercase;
font-weight: 700;
}

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

/* Kotvy */
.catalog-1peqbsk-HeadingLink {
  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;
  font-weight: 700;
}

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

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

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

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

.material-icons.bttn {
margin-top: -10px;
padding-right: 5px;
position: relative;
top: 6px
}
  
.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;
}

p, h3, h2, h3, h4 {
  max-width: 600px;
}
    
.button {
background-color: var(--tlacitko-pasivni-barva);
color: white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.15s;
transition-duration: 0.15s;
cursor: pointer;
width: 100%;
font-weight: 700;
}
     
.button:hover {
background-color: var(--tlacitko-aktivni-barva);
color: white;
}

.text-avoid {
height: 200px;
color: var(--color-avoid);
background-color: var(--white);
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: solid 1px var(--white);
}
        
.text-avoid p {
font-family: var(--primary-font);
font-size: 18px;
color: var(--color-avoid);
font-weight: 700;
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(--white);
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: solid 1px var(--white);
}
        
.text-allowed p {
font-family: var(--primary-font);
font-size: 20px;
color: var(--color-allowed);
font-weight: 700;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
 -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

/* Menu scrollbar width */
.catalog-1v5ftys-AppLayout-AppLayout::-webkit-scrollbar {
  width: 6px;
}

/* Menu scrollbar pozadi */
.catalog-1v5ftys-AppLayout-AppLayout::-webkit-scrollbar-track {
  background: var(--dark-blue70);
}

/* Menu scrollbar Handle */
.catalog-1v5ftys-AppLayout-AppLayout::-webkit-scrollbar-thumb {
  background: var(--light-blue60);
  border-radius: 10px;
}

/* Menu scrollbar Handle on hover */
.catalog-1v5ftys-AppLayout-AppLayout::-webkit-scrollbar-thumb:hover {
  background: var(--light-blue50);
}

/* width */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Pozadi scrollbaru */
::-webkit-scrollbar-track {
  background: var(--gray10);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--gray50);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--light-blue50);
  width: 10px;
}

/* Menu pozadi policka hover */
.catalog-11428nq-linkStyle:hover {
  background: var(--dark-blue70);
}

/* Menu pozadi vnoreneho policka hover */
.catalog-8kz8mj-linkStyle-linkStyle-linkStyle:hover {
  background: var(--dark-blue70);
}

/* Menu pozadi vnoreneho aktivniho policka hover */
.catalog-1ju7vtz-linkStyle-linkStyle-linkStyle-activeLinkStyle-activeLinkStyle:hover {
  background: var(--dark-blue70);
}

/* Menu pozadi aktivniho policka hover */
.catalog-1y99svp-linkStyle-activeLinkStyle-activeLinkStyle:hover {
  background: var(--dark-blue70);
}

/* Menu vnorene policko text */
.catalog-8kz8mj-linkStyle-linkStyle-linkStyle {
  font-size: 16px;
}