/*********************************************************************************
 * Zakladni layout
 ********************************************************************************/

@font-face {
  font-family: 'titillium';
  src: url('https://www.nixa.cz/obrazky/fonty/TitilliumWeb-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'titillium';
  src: url('https://www.nixa.cz/obrazky/fonty/TitilliumWeb-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}

:root {
/*
  breakpoints
  min: 21.875rem = 350px
  max: 87.5rem = 1400px
  btn-span: 33.75rem = 540px
  search: 55rem = 880px
  left-col: 67.5rem = 1080px
  footer-50: 40rem = 640px
  footer-33 = search
  footer-full = left-col
*/

  --font-family: 'titillium',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  --transition-duration: 0.2s;
  --transition-duration-long: 0.5s;
  --transition-timing-function: ease;

  --text-base-px: 16px;
  --page-min-width-px: 350px;
  --page-max-width-px: 1400px;

  --page-min-width: 21.875rem;
  --page-max-width: 87.5rem;
  --page-side-width: 16rem;
  --page-padding: 1rem;

  --category-position-left: 17rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;

  --line-xs: 1rem;
  --line-sm: 1.25rem;
  --line-base: 1.5rem;
  --line-md: 1.75rem;
  --line-lg: 1.75rem;
  --line-xl: 2rem;
  --line-2xl: 2.25rem;
  --line-3xl: 2.5rem;

  --spacing-px-half: 5px;
  --spacing-px: 10px;
  --spacing-px-2x: 20px;

  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.5rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  --color-primary: #5bb112;
  --color-primary-light: #74df16;
  --color-primary-dark: #4d950f;

  --color-secondary: #a31041;
  --color-secondary-light: #cc1452;
  --color-secondary-dark: #820d34;

  --color-success: #16a34a;
  --color-warning: #ea580c;
  --color-error: #dc2626;
  --color-info: #0284c7;

  --color-black: #000;
  --color-dark: #27272A;
  --color-darkgray: #71717a;
  --color-gray: #d1d5db;
  --color-lightgray: #e2e5e7;
  --color-light: #f3f4f6;
  --color-white: #fff;

  --color-facebook: #4267b2;
  --color-twitter: #1da1f2;

  --rounded: 4px;

  /* ui-overlay: 100 <- must be top */
  --z-top: 99;
  --z-modal: 90;
  --z-overlay: 80;
  --z-dropdown: 70;
  --z-header: 60;
  --z-footer: 50;
}

html {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  font-size: var(--text-base-px);
  /* height: 100%; */
  line-height: var(--line-base);
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
     -moz-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  background-color: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-family);
  /* height: 100%; */
  margin: 0;
  padding: 0;
}

#stranka {
  border: 0;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  margin: 0;
  min-height: 100vh;
  min-width: var(--page-min-width);
  overflow-x: hidden;
  overflow-y: visible;
  overflow: hidden visible;
  padding: 0;
  text-align: center;
}

.sirka-stranky {
  margin: 0 auto;
  max-width: var(--page-max-width);
}

#zahlavi {
  background-color: var(--color-white);
  color: var(--color-dark);
  flex: 0 0 auto;
  position: relative;
}

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

#zapati {
  flex: 0 0 auto;
}

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

#zahlavi-top {
  background-color: var(--color-dark);
  color: var(--color-white);
}

#zahlavi-top-obsah {
  align-items: stretch;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: var(--page-max-width);
  padding: 0 0 0 var(--page-padding);
  position: relative;
  text-align: left;
  z-index: var(--z-dropdown);
}

@media (min-width: 87.5rem) {
  #zahlavi-top-obsah {
    padding: 0 var(--page-padding);
  }
}

#zahlavi-obsah {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--page-max-width);
  padding: var(--spacing-md) var(--page-padding);
  position: relative;
  text-align: left;
}

@media (min-width: 55rem) {
  #zahlavi-obsah {
    flex-wrap: nowrap;
    padding-top: var(--spacing-xl);
  }
}

#zahlavi-stred {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-md);
  order: 99;
  width: 100%;
}

@media (min-width: 55rem) {
  #zahlavi-stred {
    margin: 0 var(--spacing);
    max-width: 400px;
    order: 0;
  }
}

#zahlavi-vpravo {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
}

#zahlavi-menu {
  background-color: var(--color-white);
  display: block;
  position: relative;
}

/*
@media (min-width: 55rem) {
  #zahlavi-menu.sticky {
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 99;
  }
}
*/

main {
  background-color: var(--color-white);
  color: var(--color-dark);
  flex: 1 0 auto;
  padding-bottom: var(--spacing-2xl);
  position: relative;
  width: 100%;
}

@media (min-width: 55rem) {
  main::after {
    background-color: rgba(0, 0, 0, 0.25);
    content: '';
    display: block;
    height: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    transition-delay: 1ms, var(--transition-duration);
    transition-duration: 0.1s, 1ms;
    transition-property: opacity, width;
    transition-timing-function: var(--transition-timing-function);
    width: 0;
    z-index: 2;
  }
  
  main.overlay::after {
    opacity: 1;
    transition-delay: 1ms;
    transition-duration: 0.4s, 1ms;
    width: 100%;
  }
}

@media (min-width: 87.5rem) {
  .obsah-vychozi main {
    align-content: flex-start;
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: var(--spacing-md);
  }

  .obsah-vychozi main::after {
    inset: var(--spacing-md) 0 0;
  }
}

#obsah_nahore {
  margin: 0 auto;
  max-width: var(--page-max-width);
  padding: 0 var(--page-padding);
  position: relative;
  text-align: left;
}

@media (min-width: 55rem) {
  #obsah_nahore {
    padding-top: var(--spacing-md);
  }
}

@media (min-width: 87.5rem) {
  .obsah-vychozi #obsah_nahore {
    flex: 0 0 17rem;
    margin: 0;
    padding: 0 0 0 var(--page-padding);
    width: 17rem;
  }
}

#obsah {
  flex: 1 1 auto;
  margin: 0 auto;
  max-width: var(--page-max-width);
  padding: 0 var(--page-padding);
  text-align: left;
}

@media (min-width: 55rem) {
  .obsah-vlevo #obsah {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}

@media (min-width: 87.5rem) {
  .obsah-vychozi #obsah {
    flex: 0 0 70.5rem;
    margin: 0;
    padding: 0 var(--page-padding);
    width: 70.5rem;
  }
}

#komponenta {
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
}

@media (min-width: 55rem) {
  /*
   ? 1. display above `#obsah_nahore`, must not hide menu items
   */
  #obsah_vlevo {
    flex: 0 0 var(--page-side-width);
    width: var(--page-side-width);
    margin: -2rem var(--spacing) 0 0;
    z-index: 1; /* 1. */
  }

  #komponenta {
    flex: 1 1 auto;
  }
}


/*********************************************************************************
 * Zakladni styly
 ********************************************************************************/

a {
  color: var(--color-dark);
  text-decoration: underline;
}

a:hover {
  color: var(--color-primary-dark);
}

a:focus {
  text-decoration: none;
  outline: none;
}

a:focus-visible {
  outline: 2px var(--color-secondary-light) dashed;
  outline-offset: 1px;
}

.nadpis,
.podnadpis,
.podpodnadpis {
  color: var(--color-dark);
  font-weight: bold;
  margin: 0;
  overflow: hidden;
  padding: 0;
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
}

.nadpis {
  font-size: var(--text-2xl);
  line-height: var(--line-2xl);
  margin: 0 0 var(--spacing) 0;
  position: relative;
}

.podnadpis {
  font-size: var(--text-xl);
  line-height: var(--line-xl);
  margin: 0 0 var(--spacing) 0;
}

.podnadpis a {
  text-decoration: none;
}

.podpodnadpis {
  font-size: var(--text-lg);
  line-height: var(--line-lg);
  margin: 0 0 var(--spacing) 0;
}

.cara {
  background-color: var(--color-lightgray);
  border-bottom: 1px solid var(--color-light);
  border-top: 1px solid var(--color-light);
  clear: both;
  height: var(--spacing-px-half);
  margin: var(--spacing) 0;
}

.clanek-vycentrovany {
  text-align: center;
}

.lista-zarovnani-0 {
  text-align: left;
}

.lista-zarovnani-1 {
  text-align: center;
}

.lista-zarovnani-2 {
  text-align: right;
}

.badge {
  background-color: var(--color-primary);
  border-radius: 10px;
  color: var(--color-white);
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: bold;
  line-height: 1em;
  min-height: 20px;
  min-width: 20px;
  padding: 5px;
  text-align: center;
  vertical-align: super;
}


/*********************************************************************************
 * Formulare
 ********************************************************************************/

form {
  margin: 0;
}

form.framed {
  background-color: var(--color-light);
  border-radius: var(--rounded);
  padding: var(--spacing) 0;
}

fieldset {
  border: 0;
  margin: 0;
  margin-bottom: var(--spacing-lg);
  padding: 0;
  position: relative;
}

fieldset legend {
  background-color: var(--color-light);
  border-top-left-radius: var(--rounded);
  border-top-right-radius: var(--rounded);
  font-size: var(--text-md);
  font-weight: bold;
  line-height: var(--text-base);
  margin: 0 0 var(--spacing) 0;
  padding: var(--spacing-sm) var(--spacing);
  width: 100%;
}

label.povinne::before {
  color: var(--color-error);
  content: "*";
  display: inline-block;
  font-weight: bold;
  margin-right: var(--spacing-px-half);
}

div .label {
  display: block;
  font-size: var(--text-base);
  line-height: var(--line-base);
}

.tboxLabel,
.tareaLabel,
.selectLabel,
.cboxLabel,
.rboxLabel {
  text-align: left;
}

div .tareaLabel {
  padding-top: var(--spacing-xs);
}

.tbox,
.tarea {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  color: var(--color-dark);
  font-size: var(--text-base);
  height: auto;
  line-height: var(--line-base);
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-px);
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
  width: auto;
}

/*
 ? 1. padding-block + line-height + border-width
 */
.tbox {
  display: inline-block;
  height: 3rem;
  height: calc(2 * var(--spacing-sm) + var(--line-base) + 2px); /* 1. */
  vertical-align: middle;
}

.tbox:hover,
.tarea:hover {
  border-color: var(--color-darkgray);
}

.tbox:focus,
.tarea:focus {
  border-color: var(--color-primary);
  /* box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary); */
  box-shadow: 0 0 0 2px var(--color-primary);
  outline: 0;
}

.tbox:disabled:focus,
.tarea:disabled:focus,
.tbox:disabled:hover,
.tarea:disabled:hover,
.tbox:disabled,
.tarea:disabled {
  background-color: var(--color-light);
  border-color: var(--color-gray);
  box-shadow: none;
  color: var(--color-darkgray);
  transition-duration: 0;
}

.tbox::placeholder,
.tarea::placeholder {
  color: var(--color-darkgray);
}

.select {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  display: inline-block;
  font-size: var(--text-base);
  height: 3rem;
  height: calc(2 * var(--spacing-sm) + var(--line-base) + 2px);
  line-height: var(--line-base);
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-px);
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
  vertical-align: middle;
}

.select.velkyselect {
  font-size: var(--text-md);
  height: 3.5rem;
  height: calc(2 * var(--spacing) + var(--line-base) + 2px);
  padding: var(--spacing) var(--spacing-px);
}

.select:hover {
  border-color: var(--color-darkgray);
}

.select:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
  outline: 0;
}

.select:disabled:focus-visible,
.select:disabled:hover,
.select:disabled {
  background-color: var(--color-light);
  border-color: var(--color-gray);
  box-shadow: none;
  color: var(--color-darkgray);
  transition-duration: 0;
}

.rbox,
.cbox {
  appearance: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  color: var(--color-dark);
  cursor: pointer;
  display: inline-block;
  height: var(--line-base);
  margin: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  outline: 0;
  position: relative;
  transition-duration: var(--transition-duration);
  transition-property: background, border, opacity;
  transition-timing-function: var(--transition-timing-function);
  vertical-align: middle;
  width: var(--line-base);
}

.rbox {
  border-radius: 100%;
  border-width: 4px;
}

.cbox:hover {
  border-color: var(--color-darkgray);
}

.rbox::before,
.cbox::before {
  border-color: var(--color-white);
  border-style: solid;
  border-width: 0 3px 3px 0;
  content: "";
  display: block;
  height: 80%;
  left: 21%;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
  width: 50%;
}

/*
 ? 1. to display rbox as cbox and vice versa
      (see `.kosik-typ-dopravy .rbox`)
 */
.rbox::before {
  display: none; /* 1. */
}

.cbox::after,
.rbox::after {
  background-color: var(--color-gray);
  border-radius: 100%;
  content: '';
  display: block;
  height: 12px;
  left: 2px;
  position: absolute;
  top: 2px;
  transform: scale(0);
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
  width: 12px;
}

.cbox::after {
  display: none;
}

.rbox:hover::before,
.cbox:hover::before {
  border-color: var(--color-gray);
  opacity: 1;
}

.cbox:hover::after,
.rbox:hover::after {
  transform: scale(1);
}

.cbox:checked {
  color: var(--color-white);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.rbox:checked:hover,
.cbox:checked:hover {
  border-color: var(--color-primary);
}

.rbox:checked::before,
.cbox:checked::before {
  opacity: 1;
}

.rbox:checked:hover::before,
.cbox:checked:hover::before {
  border-color: var(--color-white);
}

.rbox:checked {
  border-color: var(--color-primary);
  transition-timing-function: 0;
}

.cbox:checked::after,
.rbox:checked::after {
  background-color: var(--color-primary);
  transform: scale(1);
  transition-timing-function: 0;
}

.rbox:focus-visible,
.cbox:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: 0;
}

.rbox:checked:focus-visible,
.cbox:checked:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: 0;
}

.rbox:disabled,
.cbox:disabled {
  background-color: var(--color-lightgray);
  cursor: default;
}

.rbox:disabled:hover,
.cbox:disabled:hover {
  border-color: var(--color-gray);
}

.rbox:disabled:hover::before,
.cbox:disabled:hover::before {
  opacity: 0;
}

.cbox:disabled:hover::after,
.rbox:disabled:hover::after {
  transform: scale(0);
}

.rbox:disabled:checked,
.cbox:disabled:checked {
  border-color: var(--color-gray);
  background-color: var(--color-lightgray);
}

.cbox:disabled:checked::after,
.rbox:disabled:checked::after {
  background-color: var(--color-gray);
}

.rbox:disabled:checked:hover::before,
.cbox:disabled:checked:hover::before {
  opacity: 1;
}

.cbox:disabled:checked:hover::after,
.rbox:disabled:checked:hover::after {
  transform: scale(1);
}

.rbox:disabled:focus-visible,
.cbox:disabled:focus-visible {
  box-shadow: none;
  outline: 0;
}

.elementSubmit {
  text-align: right;
}

.submit,
.tlacitko,
.tlacitkoSvetle,
.tlacitkoCervene,
.tlacitkoObjednat {
  border-radius: var(--rounded);
  display: inline-block;
  font-size: var(--text-base);
  line-height: var(--line-base);
  padding: var(--spacing-sm) var(--spacing);
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
  vertical-align: middle;
}

.submit,
.tlacitko,
a.tlacitko {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-white);
  font-weight: bold;
  text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
}

.submit:hover,
.tlacitko:hover,
a.tlacitko:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.submit:focus-visible,
.tlacitko:focus-visible,
a.tlacitko:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: none;
}

.submit:disabled {
  background-color: var(--color-light);
  border: 1px solid var(--color-gray);
  box-shadow: none;
  color: var(--color-darkgray);
  font-weight: normal;
  outline: none;
  text-shadow: none;
  transition-property: color, box-shadow, border;
}

.tlacitkoSvetle,
a.tlacitkoSvetle {
  background-color: var(--color-light);
  background-image: linear-gradient(180deg, var(--color-white) 0%, var(--color-lightgray) 70%);
  border: 1px solid var(--color-gray);
  color: var(--color-darkgray);
  transition-property: color, box-shadow, border;
  text-shadow: none;  
}

.tlacitkoSvetle:hover,
a.tlacitkoSvetle:hover {
  border-color: var(--color-darkgray);
  color: var(--color-dark);
  background-color: var(--color-lightgray);
}

.tlacitkoSvetle:focus-visible,
a.tlacitkoSvetle:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}

.tlacitkoCervene,
a.tlacitkoCervene,
.tlacitkoObjednat,
a.tlacitkoObjednat {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  color: var(--color-white);
  font-weight: bold;
  text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
}

.tlacitkoCervene:hover,
a.tlacitkoCervene:hover,
.tlacitkoObjednat:hover,
a.tlacitkoObjednat:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
}

.tlacitkoCervene:focus-visible,
a.tlacitkoCervene:focus-visible,
.tlacitkoObjednat:focus-visible,
a.tlacitkoObjednat:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-secondary);
  outline: none;
}

/** chyby */

.uspech {
  color: var(--color-success);
}

.varovani {
  color: var(--color-warning);
}

.chyba {
  color: var(--color-error);
}

label.chyba {
  color: var(--color-error);
}

.tbox.chybaElement,
.tarea.chybaElement {
  border-bottom: 2px solid var(--color-error);
}

.tbox.chybaElement:focus,
.tarea.chybaElement:focus {
  border-color: var(--color-error);
  box-shadow: none;
}

.rbox.chybaElement,
.cbox.chybaElement {
  border-color: var(--color-error);
}

.chybaZprava {
  color: var(--color-error);
  display: block;
}

.chybaZprava.chybaCbox {
  margin-left: var(--spacing-px-half);
}

/** specialni pripady */

input.cena,
input.cislo,
input.datum {
  width: 6.5rem;
}

input.kratky {
  width: 4.5rem;
}

#psc,
#dodaciPsc,
#uzivatelPsc {
  width: 10rem;
}

/** form uprostred */

form.uprostred > div .left,
form.uprostred fieldset > div .left {
  display: block;
  float: none;
  margin-bottom: var(--spacing-sm);
  width: 100%;
}

form.uprostred > div .label,
form.uprostred fieldset > div .label {
  margin-bottom: var(--spacing-xs);
}

form.uprostred .tbox,
form.uprostred .tarea,
form.uprostred .mce-tinymce:not(.mce-fullscreen) {
  width: 100%;
}

form.uprostred > div .selectgroup,
form.uprostred fieldset > div .selectgroup {
  align-content: center;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

form.uprostred .selectgroup > .select {
  flex: 0 0 auto;
  margin-right: var(--spacing-px-half);
}

form.uprostred .selectgroup > span {
  flex: 1 1 auto;
  position: relative;
}

form.uprostred .selectgroup .tbox {
  width: 100%;
}

.form-element {
  margin-bottom: var(--spacing-sm);
}

@media (min-width: 48rem) {
  div .label {
    border: 1px solid transparent;
    float: left;
    padding: var(--spacing-sm) var(--spacing-px);
    width: 34%;
  }

  div .tareaLabel {
    padding-top: var(--spacing-xs);
  }

  form.uprostred > div .label,
  form.uprostred fieldset > div .label {
    margin-bottom: var(--spacing-sm);
    text-align: right;
  }

  form.uprostred > div .left,
  form.uprostred fieldset > div .left {
    float: left;
    width: 66%;
  }

  form.uprostred > div .left.spanTextu,
  form.uprostred fieldset > div .left.spanTextu {
    padding: var(--spacing-sm) 0;
  }

  form.uprostred .tbox,
  form.uprostred .tarea,
  form.uprostred .mce-tinymce:not(.mce-fullscreen) {
    max-width: 25rem;
    width: 100%;
  }

  form.uprostred .selectgroup {
    max-width: 25rem;
  }

  .form-element {
    margin-left: 34%;
  }
}

@media (min-width: 87.5rem) {
  form.uprostred > div,
  form.uprostred fieldset > div {
    padding: 0 var(--spacing);
  }
}

.adresaPristupna {
  color: var(--color-darkgray);
  font-size: var(--text-sm);
}

.adresaPristupna .adresaZadana {
  font-weight: bold;
}

div.editor img {
  max-width: 100%;
}

div.editor img.logo {
  max-height: 65px;
  max-width: 350px;
}


/*********************************************************************************
 * Vypisy
 ********************************************************************************/

.divVypis {
  position: relative;
}

.vypisObal {
  overflow-x: auto;
  padding-bottom: 10px;
  position: relative;
  scrollbar-width: thin;
  width: 100%;
}

.vypisObal::-webkit-scrollbar {
  height: 8px;
}

.vypisObal::-webkit-scrollbar-thumb {
  background-color: var(--color-gray);
  border-radius: 8x;
}

.vypis,
.vypis_bez,
.tabulka {
  border-collapse: collapse;
  border-spacing: 0px;
  border: 0;
  min-width: 100%;
  text-align: left;
}

.vypis tbody tr:hover {
  background-color: var(--color-light);
}

.vypis tbody tr.zadnyRadek:hover {
  background-color: var(--color-white);
}

.vypis .sudyRadek {
  background-color: var(--color-white);
}

.vypis .lichyRadek {
  background-color: var(--color-white);
}

.vypis th {
  background-color: var(--color-light);
  color: var(--color-dark);
  font-size: var(--text-base);
  font-weight: bold;
  line-height: var(--line-base);
  min-width: max-content;
  padding: 0.5rem 0.25rem;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}

.vypis th:first-child {
  border-top-left-radius: var(--rounded);
}

.vypis th:last-child {
  border-top-right-radius: var(--rounded);
}

.vypis td,
.vypis_bez td {
  border-bottom: 1px solid var(--color-lightgray);
  padding: 0 0.25rem;
  position: relative;
  vertical-align: middle;
}

.vypis_bez td {
  border: none;
}

.vypis tbody .tdDiv,
.vypis_bez  tbody .tdDiv {
  display: block;
  overflow: hidden;
  padding: 0.75rem 0.25rem;
  position: relative;
  text-overflow: ellipsis;
}

.vypis .cbox,
.vypis_bez .cbox {
  height: var(--text-sm);
  margin: 0 var(--spacing-px-half) 0 0;
  width: var(--text-sm);
}

.vypis .cbox::before,
.vypis_bez .cbox::before {
  border-width: 0 2px 2px 0;
}

/** akce a tlacitka v zahlavi vypisu */

.akce {
  margin: 0 0 var(--spacing-sm) 0;
  padding: 0;
}

.akce .right {
  text-align: right;
}

.akce .tlacitko,
.akce .tlacitkoSvetle {
  padding: var(--spacing-px-half) var(--spacing-sm);
}

/** razeni */

.razeni {
  position: relative;
}

.razeni a {
  background-image: url('https://www.nixa.cz/obrazky/svg/smer.svg');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 18px;
  text-decoration: none;
}

.razeni0 a {
  background-image: url('https://www.nixa.cz/obrazky/svg/smer0.svg');
  text-decoration: underline;
}

.razeni1 a {
  background-image: url('https://www.nixa.cz/obrazky/svg/smer1.svg');
  text-decoration: underline;
}

.vypis thead th .zobrazFiltr {
  display: inline-block;
  margin-left: var(--spacing-px-half);
  position: static;
  vertical-align: middle;
}

th .zobrazFiltr {
  opacity: 0;
  visibility: hidden;
}

th.razeni_hover .zobrazFiltr {
  opacity: 1;
  visibility: visible;
}

/** nastaveni sloupcu */

.nastaveniSloupcu {
  background-color: var(--color-light);
  display: none;
}

.nastaveniSloupcu td {
  border: 0;
  padding: var(--spacing-px-half) 0.5rem;
}

.nastaveniSloupcu .sloupec_cbox_span {
  display: inline-block;
  margin-right: var(--spacing);
  white-space: nowrap;
}

.nastaveniSloupcu .cboxLabel {
  font-size: var(--text-sm);
  line-height: 1em;
}

/** filtry */

.trFiltry {
  background-color: var(--color-light);
  display: none;
}

.vypis tr.trFiltry td {
  border: 0px;
  padding: var(--spacing-px-half) 0.5rem;
  position: relative;
}

.trFiltry .filtrLabel {
  display: inline-block;
  font-size: var(--text-sm);
  line-height: 1em;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  width: 9rem;
}

.trFiltry input.tbox {
  font-size: var(--text-sm);
  height: 26px;
  height: calc(var(--text-sm) + 12px);
  line-height: 1em;
  margin-left: var(--spacing-px-half);
  max-width: 15rem;
  padding: 5px 10px;
}

.trFiltry input.rozsah {
  max-width: 6.5rem;
  text-align: right;
}

.trFiltry input.datum {
  max-width: 6.5rem;
}

.vypis thead img,
.trFiltry img {
  cursor: pointer;
  margin-top: -8px;
  position: absolute;
  right: 0.5rem;
  top: 50%;
}

/** strankovani vypisu */

.zapati {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-px);
  justify-content: flex-end;
  margin-top: var(--spacing-sm);
}

.zapati .stranky {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-start;
  max-width: 100%;
  padding-top: 5px;
  width: max-content;
}

.zapati .stranky ul {
  align-content: flex-start;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-xs);
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zapati ul + .zaznamu {
  padding: 0 0 0 var(--spacing-sm);
}

.zapati .stranky li {
  display: inline-block;
}

.zapati .stranky a {
  background-color: var(--color-light);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  color: var(--color-dark);
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: bold;
  line-height: 1em;
  padding: 5px 10px;
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
}

.zapati .stranky a:hover {
  border-color: var(--color-darkgray);
}

.zapati .stranky a:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}

.zapati .stranky a.b {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary-dark);
  color: var(--color-white);
}

.zapati .stranky a.b:hover {
  background-color: var(--color-primary-dark);
}

.zapati .stranky a.b:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: none;
}

.zapati .nastranku {
  flex: 0 0 auto;
  text-align: right;
}

.zapati .nastranku label {
  display: inline-block;
  font-size: var(--text-sm);
  line-height: 1em;
  margin-right: 5px;
  vertical-align: middle;
}

.zapati .nastranku .select {
  font-size: var(--text-sm);
  height: 36px;
  height: calc(var(--text-sm) + 22px);
  line-height: 1em;
  padding: 10px 5px;
}

.zapati .nastranku a {
  display: none;
}

.vypis-zapati-celkem {
  padding: var(--spacing-xs) 0.5rem;
  text-align: right;
}


/*********************************************************************************
 * Zalozky
 ********************************************************************************/

/*
 ? 1. space for `:focus-visible` and scrollbar
 */
.produkt-zalozky-obal,
.kategorie-razenis-obal,
.zalozky-obal {
  margin: var(--spacing-xl) 0 var(--spacing);
  overflow: auto;
  overflow-y: hidden;
  padding: 4px 4px 10px; /* 1. */
  scrollbar-width: thin;
}

.produkt-zalozky-obal,
.kategorie-razenis-obal {
  margin-top: var(--spacing-3xl);
}

.produkt-zalozky-obal::-webkit-scrollbar,
.kategorie-razenis-obal::-webkit-scrollbar,
.zalozky-obal::-webkit-scrollbar {
  height: 8px;
}

.produkt-zalozky-obal::-webkit-scrollbar-thumb,
.kategorie-razenis-obal::-webkit-scrollbar-thumb,
.zalozky-obal::-webkit-scrollbar-thumb {
  background-color: var(--color-gray);
  border-radius: 8x;
}

.produkt-zalozky,
.kategorie-razenis,
.zalozky {
  border-bottom: 1px solid var(--color-gray);
  display: flex;
  flex-flow: row nowrap;
  gap: var(--spacing-px-half);
  justify-content: flex-start;
}

.produkt-zalozky a,
.kategorie-razenis a,
.zalozky a {
  background-color: var(--color-light);
  border: 1px solid var(--color-gray);
  border-top-left-radius: var(--rounded);
  border-top-right-radius: var(--rounded);
  color: var(--color-darkgray);
  margin-bottom: -1px;
  padding: var(--spacing-sm) var(--spacing);
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
  white-space: nowrap;
}

.produkt-zalozky a:hover,
.kategorie-razenis a:hover,
.zalozky a:hover {
  box-shadow: 0px 4px 0px 0px var(--color-gray) inset;
  color: var(--color-dark);
}

.produkt-zalozky a:focus-visible,
.kategorie-razenis a:focus-visible,
.zalozky a:focus-visible {
  box-shadow: 0px 4px 0px 0px var(--color-gray) inset, 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}

.produkt-zalozky a.aktivni,
.kategorie-razenis a.kategorie-razeni-vybrane,
.zalozky a.aktivni {
  background-color: var(--color-white);
  border-bottom-color: var(--color-white);
  border-top-color: var(--color-primary);
  box-shadow: 0px 4px 0px 0px var(--color-primary) inset;
  color: var(--color-dark);
}

.produkt-zalozky a.aktivni:focus-visible,
.kategorie-razenis a.kategorie-razeni-vybrane:focus-visible,
.zalozky a.aktivni:focus-visible {
  border-top-color: var(--color-primary);
  box-shadow: 0px 4px 0px 0px var(--color-primary) inset, 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: none;
}

.produkt-zalozky a .badge {
  background-color: var(--color-darkgray);
  margin: -5px -5px 0 var(--spacing-px-half);
}

.produkt-zalozky a.aktivni .badge {
  background-color: var(--color-primary);
}

.produkt-zalozka-obsah {
  position: relative;
}

.produkt-zalozka-obsah iframe,
.produkt-zalozka-obsah img {
  max-width: 100%;
}

.produkt-zalozka-obsah img {
  height: auto !important;
}


/*********************************************************************************
 * Dialogy - obecne
 ********************************************************************************/

.dialog {
  display: none;
  text-align: left;
}

.dialog .nadpis:first-child {
  display: none;
}

.dialog .nadpis {
  font-size: var(--text-lg);
  line-height: var(--line-lg);
}

.dialog .podnadpis {
  font-size: var(--text-md);
  line-height: var(--line-md);
}

.dialog .elementSubmit {
  display: none;
}


/*********************************************************************************
 * UI dialogy - potlaceni vychozich stylu
 ********************************************************************************/

.ui-dialog {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
  max-width: 90%;
  max-width: calc(100% - 2rem);
  min-width: 19rem;
  padding: 0;
}

.ui-dialog .ui-dialog-titlebar {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-gray);
  padding: var(--spacing);
}

.ui-dialog .ui-dialog-title {
  font-size: var(--text-md);
  font-weight: normal;
  line-height: 1em;
}

.ui-dialog-titlebar > .ui-button {
  outline-width: 0px;
}

.ui-dialog .ui-dialog-titlebar-close {
  background: none;
  border: 0;
  height: 24px;
  margin-top: -12px;
  right: var(--spacing);
  width: 24px;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
  background: url('https://www.nixa.cz/obrazky/svg/x.svg') no-repeat center center;
  background-size: 24px 24px;
}

.ui-dialog .ui-dialog-content {
  padding: var(--spacing);
}

.ui-dialog .ui-dialog-buttonpane {
  border: 0;
  border-top: 1px solid var(--color-gray);
  margin: 0;
  padding: 0 var(--spacing);
}

.ui-dialog .ui-dialog-buttonpane button {
  border-color: var(--color-gray);
  border-radius: var(--rounded);
  line-height: 1em;
  margin-left: .4em;
  margin-right: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
}

.ui-dialog .ui-dialog-buttonpane button:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}


/*********************************************************************************
 * Vypis produktu - sidebar, strankovani
 ********************************************************************************/

/** FILTRY */

/* `.vypis-filtr*` - levy sloupec parametru */

.vypis-filtry-tlacitko {
  background: url('https://www.nixa.cz/obrazky/svg/filter.svg') no-repeat var(--spacing) center;
  background-size: 16px 16px;
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  color: var(--color-dark);
  display: block;
  margin: var(--spacing) auto;
  padding: var(--spacing-xs) var(--spacing);
  text-align: center;
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: box-shadow, border;
  transition-timing-function: var(--transition-timing-function);
}

.vypis-filtry-tlacitko:hover {
  border-color: var(--color-darkgray);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  color: var(--color-dark);
}

.vypis-filtry-tlacitko:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: none;
}

@media (min-width: 55rem) {
  .vypis-filtry-tlacitko {
    display: none;
  }
}

.vypis-filtry {
  background-color: var(--color-white);
  display: none;
  flex-direction: column;
  inset: 0 auto 0 0;
  max-width: var(--page-min-width);
  min-width: var(--page-side-width);
  position: fixed;
  transform: translateX(-100%);
  transition-duration: var(--transition-duration);
  transition-property: transform;
  transition-timing-function: var(--transition-timing-function);
  width: 75%;
  z-index: var(--z-modal);
}

.vypis-filtry.otevreny {
  display: flex;
  transform: translateX(0);
}

/*
 ? 1. breakpoint, where `.vypis-filtry` resets
 */
.vypis-filtry::after {
  background-color: rgba(0, 0, 0, 0.5);
  content: "";
  display: block;
  inset: 0 auto 0 100%;
  opacity: 0;
  position: absolute;
  transition-duration: var(--transition-duration);
  transition-property: opacity;
  transition-timing-function: var(--transition-timing-function);
  width: 55rem; /* 1. */
}

.vypis-filtry.otevreny::after {
  opacity: 1;
}

@media (prefers-reduced-motion) {
  .vypis-filtry {
    transform: none !important;
    transition: none !important;
  }
}

@media (min-width: 55rem) {
  .vypis-filtry {
    background-color: none;
    display: block;
    inset: auto;
    max-width: none;
    min-width: none;
    position: static;
    transform: none;
    transition: none;
    width: auto;
    z-index: auto;
  }

  /*
   ? 1. should not be here
   */
  .vypis-filtry.skryte {
    display: block; /* 1. */
  }

  .vypis-filtry::after {
    display: none;
  }
}

.vypis-filtry-zahlavi {
  background-color: var(--color-primary);
  color: var(--color-white);
  flex: 0 0 auto;
  height: var(--spacing-xl);
  line-height: var(--spacing-xl);
  overflow: hidden;
  padding: 0 36px 0 var(--spacing);
  position: relative;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vypis-filtry-zavrit {
  background: url('https://www.nixa.cz/obrazky/svg/x-light.svg') no-repeat center center;
  background-size: 24px 24px;
  cursor: pointer;
  inset: 0 0 0 auto;
  position: absolute;
  width: 36px;
}

.vypis-filtry-zavrit:focus-visible {
  background-color: var(--color-primary);
  background-size: 20px 20px;
  box-shadow: inset 0 0 0 1px var(--color-primary), inset 0 0 0 2px var(--color-white);
}

@media (min-width: 55rem) {
  .vypis-filtry-zahlavi {
    display: none;
  }
}

.vypis-filtry-scroll {
  flex: 0 1 100%;
  overflow: scroll;
}

@media (min-width: 55rem) {
  .vypis-filtry-scroll {
    overflow: visible;
  }
}

.vypis-filtr {
  background-color: var(--color-light);
  border-bottom: 1px solid var(--color-gray);
}

.vypis-filtr.vypis-filtr-otevreny {
  padding-bottom: var(--spacing-sm);
}

.vypis-filtr-skupina {
  font-weight: bold;
  padding: var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
}

.vypis-filtr-nadpis {
  background: url('https://www.nixa.cz/obrazky/svg/chevron-right.svg') no-repeat right var(--spacing) center;
  background-size: 14px 14px;
  cursor: pointer;
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  padding: var(--spacing-sm) var(--spacing);
}

.vypis-filtr-otevreny .vypis-filtr-nadpis {
  background-image: url('https://www.nixa.cz/obrazky/svg/chevron-down.svg');
  font-weight: bold;
  padding: var(--spacing-sm) var(--spacing) var(--spacing-xs);
}

.vypis-filtr-nadpis:hover {
  text-decoration: underline;
}

.vypis-filtr-nadpis:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-white), inset 0 0 0 3px var(--color-darkgray);
  font-weight: bold;
  outline: none;
}

.vypis-filtr-obsah {
  display: none;
  padding: var(--spacing-xs) var(--spacing) var(--spacing-px-half);
  max-height: 10rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.vypis-filtr-obsah::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.vypis-filtr-obsah::-webkit-scrollbar-thumb {
  background-color: var(--color-gray);
  border-radius: 8x;
}

.vypis-filtr-otevreny .vypis-filtr-obsah {
  display: block;
}

.vypis-filtr-obsah .slider-range {
  margin-bottom: var(--spacing);
}

.vypis-filtr-hodnota .tbox {
  line-height: 1em;
  font-size: var(--text-sm);
  padding: var(--spacing-px-half);
  height: auto;
}

.vypis-filtr-hodnota .tbox:focus {
  box-shadow: none;
}

.vypis-filtr-hodnota.vypis-filtr-range {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vypis-filtr-hodnota.vypis-filtr-range .tbox {
  width: 6rem;
  text-align: center;
}

.vypis-filtr-hodnota .cbox {
  height: var(--text-sm);
  margin: 0 var(--spacing-px) 0 0;
  width: var(--text-sm);
}

.vypis-filtr-hodnota .cbox::before {
  border-width: 0 2px 2px 0;
}

.vypis-filtr-hodnota .rbox {
  border-width: 2px;
  height: var(--text-sm);
  margin: 0 var(--spacing-px) 0 0;
  width: var(--text-sm);
}

.vypis-filtr-hodnota .rbox::after {
  width: 6px;
  height: 6px;
}

.vypis-filtr-hodnota .hvezda svg {
  fill: var(--color-primary);
  stroke: var(--color-primary);
}

.vypis-filtr.vypis-filtr-podkategorie {
  border: 2px solid var(--color-light);
  /* border-top: 2px solid var(--color-primary); */
  /* box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); */
  display: none;
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 55rem) {
  .vypis-filtr.vypis-filtr-podkategorie {
    display: block;
  }
}

.vypis-filtr-podkategorie a {
  text-decoration: none;
}

.vypis-filtr-podkategorie a:hover {
  text-decoration: underline;
}

.vypis-filtr-podkategorie ul {
  list-style-position: inside;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vypis-filtr-podkategorie li {
  padding: 2px var(--spacing) 2px var(--spacing-lg);
  position: relative;
}

.vypis-filtr-podkategorie > ul > li.last-child {
  margin-bottom: var(--spacing-sm);
}

/*
 ? 1. triangle
 */
.vypis-filtr-podkategorie li::before {
	border-color: transparent transparent transparent var(--color-dark); /* 1. */
	border-style: solid;
	border-width: 4px 0 4px 8px; /* 1. */
	height: 0;
  content: "";
  left: var(--spacing);
  margin-top: -4px;
  position: absolute;
  top: 50%;
  width: 0;
  z-index: 1;
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-zpet {
  background: var(--color-white) url('https://www.nixa.cz/obrazky/svg/chevron-left.svg') no-repeat 8px center;
  background-size: 13px 13px;
  display: block;
  padding: var(--spacing-xs) var(--spacing) var(--spacing-xs) var(--spacing-md);
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-zpet a {
  font-size: var(--text-sm);
  line-height: 1em;
  text-decoration: none;
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni {
  background-color: var(--color-white);
  padding: 0 var(--spacing-sm) var(--spacing-xs);
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni::before {
  display: none;
}

.vypis-filtr-podkategorie > ul > li:not(.vypis-filtr-podkategorie-aktivni):first-child,
.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni + li {
  margin-top: var(--spacing-sm);
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni > a {
  font-size: var(--text-md);
  font-weight: bold;
  line-height: var(--line-md);
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni > ul {
  margin-top: var(--spacing-xs);
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni li {
  border-left: 2px solid var(--color-gray);
  margin-left: var(--spacing-xs);
  padding: 4px 0 4px var(--spacing);
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni li::before {
  background-color: var(--color-gray);
  border: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  width: 8px;
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni .vypis-filtr-podkategorie-dalsi,
.vypis-filtr-podkategorie .vypis-filtr-podkategorie-dalsi {
  border: 0;
  margin-top: var(--spacing-xs);
  margin-left: var(--spacing);
  padding: 2px 0;
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-dalsi {
  margin-bottom: var(--spacing-sm);
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni .vypis-filtr-podkategorie-dalsi {
  margin-left: var(--spacing-xs);
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-aktivni .vypis-filtr-podkategorie-dalsi::before,
.vypis-filtr-podkategorie .vypis-filtr-podkategorie-dalsi::before {
  display: none;
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-dalsi a {
  color: var(--color-primary);
  text-decoration: underline;
}

.vypis-filtr-podkategorie .vypis-filtr-podkategorie-dalsi a:hover {
  color: var(--color-primary-dark);
}

.kategorie-filtry-aktivni {
  background-color: var(--color-white);
  box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.75) inset;
  flex: 0 0 auto;
  height: var(--spacing-xl);
  line-height: var(--spacing-xl);
  text-align: center;
}

@media (min-width: 55rem) {
  .kategorie-filtry-aktivni {
    background: none;
    box-shadow: none;
    flex: none;
    height: auto;
    line-height: 1em;
    margin-top: var(--spacing);
  }
}

.kategorie-filtry-aktivni-zrusit {
  color: var(--color-darkgray);
}

.kategorie-filtry-aktivni-zrusit:hover {
  color: var(--color-secondary-dark);
}

/** KATEGORIE */

.kategorie-obrazek {
  text-align: center;
}

.kategorie-obrazek img {
  border: 0;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  max-width: 100%;
}

.kategorie-nadpis {
  margin-top: var(--spacing-xs);
}

.kategorie-popis {
  margin: var(--spacing-lg) var(--spacing-sm);
}

/** .kategorie-podmenu * - pruh podkategorii */

.kategorie-podmenu {
  align-content: flex-start;
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  margin: var(--spacing-lg) 0;
  padding: 0;
}

.kategorie-podmenu li {
  display: flex;
  flex: 0 0 50%;
  margin: 0;
  padding: var(--spacing-px-half);
  width: 50%;
}

@media (min-width: 72rem) {
  .kategorie-podmenu li {
    flex-basis: 33.33%;
    width: 33.33%;
  }
}

@media (min-width: 87.5rem) {
  .kategorie-podmenu li {
    flex-basis: 25%;
    width: 25%;
  }
}

.kategorie-podmenu a {
  align-items: center;
  /*box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);*/
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  display: flex;
  flex: 1;
  height: 4rem;
  overflow: hidden;
  padding: 0 var(--spacing-sm);
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: border, box-shadow;
  transition-timing-function: var(--transition-timing-function);
}

.kategorie-podmenu a:hover {
  border-color: var(--color-darkgray);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  color: var(--color-dark);
  text-decoration: underline;
}

.kategorie-podmenu a:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: none;
}

.kategorie-podmenu a img {
  height: var(--text-3xl);
  margin: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  width: auto;
}

.kategorie-podmenu .kategorie-text {
  display: inline-block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--text-base);
  line-height: 1.25rem;
  max-height: 2.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .kategorie-razenis - zalozky razeni  */
/* .produkt-zalozka, .kategorie-zalozky definovany u .zalozky vyse */

/** STRANKOVANI */

.vypis-dalsi-stranky {
  margin: var(--spacing-md) 0 0;
  text-align: center;
}

.vypis-dalsi-stranky .vypis-dalsi-obal {
  margin: var(--spacing-md) 0;
}

.vypis-dalsi-stranky .vypis-dalsi {
  background-color: var(--color-light);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  color: var(--color-dark);
  display: inline-block;
  font-weight: bold;
  padding: var(--spacing-xs) var(--spacing);
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
}

.vypis-dalsi-stranky .vypis-dalsi:hover {
  border-color: var(--color-darkgray);
  text-decoration: underline;
}

.vypis-dalsi-stranky .vypis-dalsi:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}

.vypis-dalsi-stranky .vypis-stranky {
  margin: var(--spacing-md) 0;
}

.vypis-dalsi-stranky .vypis-stranka {
  background-color: var(--color-light);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  color: var(--color-dark);
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: bold;
  margin: 0 5px 0 0;
  padding: 5px 10px;
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
}

.vypis-dalsi-stranky .vypis-stranka:hover {
  border-color: var(--color-darkgray);
}

.vypis-dalsi-stranky .vypis-stranka:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}

.vypis-dalsi-stranky .vypis-stranka.aktivni {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary-dark);
  color: var(--color-white);
}

.vypis-dalsi-stranky .vypis-stranka.aktivni:hover {
  background-color: var(--color-primary-dark);
}

.vypis-dalsi-stranky .vypis-stranka.aktivni:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: none;
}

.vypis-dalsi-stranky .vypis-nahoru-obal {
  margin: var(--spacing-md) 0;
}

.vypis-dalsi-stranky .vypis-nahoru {
  color: var(--color-dark);
  display: inline-block;
  padding: 5px 0 5px 15px;
  position: relative;
  text-decoration: none;
}

.vypis-dalsi-stranky .vypis-nahoru:hover {
  text-decoration: underline;
}

.vypis-dalsi-stranky .vypis-nahoru::before {
  border-color: transparent transparent var(--color-dark) transparent;
  border-style: solid;
  border-width: 0 4px 8px 4px;
  content: "";
  display: block;
  height: 0;
  left: 0;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  width: 0;
}

@media (min-width: 64rem) {
  .vypis-dalsi-stranky {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: space-between;
  }

  .vypis-dalsi-stranky .vypis-dalsi-obal {
    flex: 0 0 100%;
    margin: 0;
  }

  .vypis-dalsi-stranky .vypis-stranky {
    flex: 0 0 auto;
    margin: 0;
    order: 99;
    text-align: right;
  }

  .vypis-dalsi-stranky .vypis-nahoru-obal {
    flex: 0 0 auto;
    margin: 0;
    text-align: left;
  }
}


/*********************************************************************************
 * Spolecne styly pro vypis produktu a detail produktu
 ********************************************************************************/
/* - tridy jsou normalne ve jmennem prostoru `.vypis-produkty *` a `.produkt-info *` */

.stitky {
  left: 0;
  position: absolute;
  top: 0;
  text-align: left;
  max-width: 80%;
  z-index: 1;
}

.stitek {
  background-color: var(--color-light);
  border-bottom-right-radius: var(--rounded);
  border-top-right-radius: var(--rounded);
  color: var(--color-dark);
  display: block;
  font-size: var(--text-sm);
  height: var(--line-base);
  line-height: var(--line-base);
  margin: 0 0 4px 0;
  max-width: 100%;
  /* overflow: hidden; */
  padding: 0 var(--spacing-xs);
  text-transform: uppercase;
  /* white-space: nowrap; */
  width: fit-content;
}

.ikony {
  bottom: 0;
  max-width: 50px;
  position: absolute;
  right: 0;
  text-align: right;
  z-index: 1;
}

.stitek.stitek-barva-tmava {
  color: var(--color-white);
  text-shadow: -1px -1px 0px rgba(0,0,0,0.5);
}

.stitek.stitek-barva-svetla {
  color: var(--color-dark);
  text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

.produkt-hodnotit {
  align-items: center;
  color: var(--color-darkgray);
  display: flex;
  flex-flow: row nowrap;
  flex: 0 0 auto;
  justify-content: flex-start;
  text-decoration: none;
}

.produkt-hodnotit:hover {
  color: var(--color-dark);
}

.produkt-hodnoceni-hvezdy {
  text-align: left;
  white-space: nowrap;
}

.produkt-hodnotit .produkt-hodnoceni-hvezdy {
  flex: 0 0 auto;
  padding-top: 5px;
}

.produkt-hvezda {
  display: inline-block;
  margin: 0 2px 0 0;
  vertical-align: middle;
}

.produkt-hvezda svg {
  display: inline-block;
  fill: var(--color-gray);
  height: 17px;
  stroke-width: 1px;
  stroke: var(--color-gray);
  width: 18px;
}

.produkt-hvezda.produkt-hvezda-barevna svg {
  fill: goldenrod;
  stroke: goldenrod;
}

.produkt-hodnotit .produkt-hodnoceni-pocet {
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  flex: 0 0 auto;
  height: 30px;
  line-height: 30px;
  margin: 0 0 0 15px;
  padding: 0 var(--spacing-px);
  position: relative;
}

.produkt-hodnotit .produkt-hodnoceni-pocet:before {
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
  border-right: 8px solid var(--color-gray);
  border-top: 8px solid transparent;
  content: "";
  height: 0px;
  left: -16px;
  position: absolute;
  top: 6px;
  width: 0px;
}

.produkt-hodnotit .produkt-hodnoceni-pocet:after {
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
  border-right: 8px solid var(--color-white);
  border-top: 8px solid transparent;
  content: "";
  height: 0px;
  left: -14px;
  position: absolute;
  top: 6px;
  width: 0px;
}

.produkt-skladem-pripravujeme {
  color: var(--color-produkt-pripravujeme, var(--color-darkgray));
}

.produkt-skladem-predprodej {
  color: var(--color-produkt-pripravujeme, var(--color-darkgray));
  font-weight: bold;
}

.produkt-cena {
  flex: 0 0 auto;
}

.produkt-cena-koupit {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  text-align: left;
}

.produkt-skola-potvrdit {
  background-color: var(--color-light);
  display: block;
  padding: 0 var(--spacing) var(--spacing-xs);
}

.produkt-skola-potvrdit-info {
  font-size: var(--text-sm);
  font-style: italic;
  margin-left: 33px;
  margin-top: -8px;
}

.produkt-cena-bezna,
.produkt-cena-vysledna {
  color: var(--color-secondary);
  font-size: var(--text-xl);
  font-weight: bold;
  line-height: 1em;
}

.produkt-cena-bezna {
  color: var(--color-dark);
}

.produkt-cena-bez-akce {
  color: var(--color-dark);
  font-size: var(--text-base);
  line-height: 1em;
  margin-bottom: var(--spacing-px-half);
  text-decoration: line-through;
}

.produkt-skladem {
  font-size: var(--text-xl);
  line-height: 1em;
  white-space: nowrap;
}

.produkt-skladem1 {
  color: var(--color-primary);
  font-weight: bold;
}

.produkt-skladem1D {
  color: var(--color-primary);
  font-weight: bold;
}

.produkt-skladem0 {
  color: var(--color-darkgray);
  font-size: var(--text-md);
}

.produkt-dostupne-od {
  color: var(--color-primary);
  margin-top: var(--spacing-xs);
}

.produkt-dostupne {
  color: var(--color-darkgray);
  margin-top: var(--spacing-xs);
}

.produkt-dostupne-od a,
.produkt-dostupne a {
  color: var(--color-primary);
}

.produkt-koupit,
.produkt-upozornit {
  background-color: var(--color-primary);
  border-radius: var(--rounded);
  color: var(--color-white);
  font-weight: bold;
  line-height: 1em;
  padding: var(--spacing-xs);
  text-decoration: none;
  text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
}

.produkt-koupit:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.produkt-koupit:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: none;
}

.produkt-upozornit {
  background-color: var(--color-light);
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-lightgray) 70%);
  border: 1px solid var(--color-gray);
  color: var(--color-darkgray);
  font-weight: normal;
  text-shadow: none;
  transition-property: color, box-shadow, border;
}

a.produkt-upozornit:hover {
  color: var(--color-darkgray);
}

a.produkt-upozornit:hover .produkt-upozornit-text {
  text-decoration: underline;
}

a.produkt-upozornit:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}

.produkt-koupit svg,
.produkt-upozornit svg {
  fill: var(--color-white);
  height: 18px;
  margin: 0 var(--spacing-xs) 0 0;
  stroke-width: 0.2px;
  stroke: var(--color-white);
  width: 18px;
}

.produkt-koupit svg {
  filter: drop-shadow(-1px -1px 0px rgb(0 0 0 / 0.5));
}

.produkt-upozornit svg {
  fill: var(--color-darkgray);
  stroke: var(--color-darkgray);
}

.produkt-koupit-text,
.produkt-upozornit-text,
.produkt-koupit .svg,
.produkt-upozornit .svg {
  display: inline-block;
  vertical-align: middle;
}

/** dialog informace o doruceni */

.produkt-doprava .vypis th:last-child {
  min-width: auto;
  white-space: normal;
  text-align: right;
}

.produkt-doprava-obrazek {
  display: block;
  position: relative;
  text-align: center;
  width: 134px;
}

.produkt-doprava-obrazek img {
  display: inline-block;
  max-height: 2rem;
  max-width: 100%;
  vertical-align: middle;
}

.produkt-doprava-nazev {
  font-weight: bold;
}

.produkt-doprava-cena {
  color: var(--color-darkgray);
  white-space: nowrap;
}

.produkt-doprava-datum {
  color: var(--color-primary);
  display: block;
  text-align: right;
  white-space: nowrap;
}

/** dialog upozorneni na naskladneni */

#form_upozorneni > div:first-child {
  margin-bottom: var(--spacing);
}


/*********************************************************************************
 * Vypis produktu / Eshop
 ********************************************************************************/

.vypis-produkty {
}

.vypis-produkty-obsah {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: var(--spacing) 0;
  position: relative;
}

/* yo, WTF?! */
.vypis-produkty-obsah::before,
.vypis-produkty-obsah::after {
  background-color: var(--color-white);
  content: "";
  display: block;
  inset: 0 0 0 auto;
  position: absolute;
  width: 1px;
  z-index: 1;
}

.vypis-produkty-obsah::after {
  height: 1px;
  inset: auto 0 0 0;
  width: auto;
}

/** tabulka/vypis produktu */

.vypis-produkt {
  border-bottom: 1px solid  var(--color-lightgray);
  border-right: 1px solid var(--color-lightgray);
  flex: 1 1 100%;
  padding: var(--spacing) var(--spacing-sm);
}

@media (min-width: 37.5rem) {
  .vypis-produkt {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media (min-width: 64rem) {
  .vypis-produkt {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
}

@media (min-width: 87.5rem) {
  .vypis-produkt {
    flex-basis: 25%;
    max-width: 25%;
  }
}

@media (min-width: 33.75rem) {
  .vypis-produkty-full .vypis-produkt {
    flex: 0 0 50%;
    width: 50%;
  }
}

@media (min-width: 48rem) {
  .vypis-produkty-full .vypis-produkt {
    flex: 0 0 33.33%;
    width: 33.33%;
  }
}

@media (min-width: 64rem) {
  .vypis-produkty-full .vypis-produkt {
    flex: 0 0 25%;
    width: 25%;
  }
}

@media (min-width: 78.75rem) {
  .vypis-produkty-full .vypis-produkt {
    flex: 0 0 20%;
    width: 20%;
  }
}

.vypis-produkt .vypis-produkt-obsah {
  display: flex;
  flex-flow: column;
  height: 100%;
  justify-content: space-between;
  position: relative;
  text-align: center;
  width: 100%;
}

.vypis-produkt .produkt-obrazek {
  align-items: center;
  display: grid;
  flex: 0 0 auto;
  height: 180px;
  margin-bottom: var(--spacing-md);
  position: relative;
}

.vypis-produkt .produkt-obrazek a {
  display: block;
  padding: var(--spacing-sm) 0;
}

.vypis-produkt .produkt-obrazek a:hover img {
  transform: scale(1.1);
}

.vypis-produkt .produkt-obrazek img {
  border: 0;
  display: inline-block;
  margin: 0;
  max-height: 150px;
  max-width: 91%;
  padding: 0;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: transform;
}

@media (prefers-reduced-motion) {
  .vypis-produkt .produkt-obrazek img {
    transform: none !important;
    transition: none !important;
  }
}

.vypis-produkt .ikony .ikona {
  display: block;
  margin: 4px 0 0;
  max-height: 36px;
  max-width: 36px;
}

.vypis-produkt .produkt-hodnoceni-hvezdy {
  left: 0;
  position: absolute;
  top: 100%;
}

.vypis-produkt .produkt-nazev-popis {
  flex: 1 1 auto;
  /* padding: 0 var(--spacing-xs); */
  text-align: left;
}

.vypis-produkt .produkt-nazev {
  font-size: var(--text-lg);
  font-weight: bold;
  line-height: var(--line-base);
  text-decoration: none;
}

.vypis-produkt .produkt-nazev:hover {
  color: var(--color-dark);
  text-decoration: underline;
}

.vypis-produkt .produkt-autori {
  font-size: var(--text-md);
  margin-top: var(--spacing-px-half);
}

.vypis-produkt .produkt-autori a {
  color: var(--color-darkgray);
  text-decoration: none;
}

.vypis-produkt .produkt-autori a:hover {
  color: var(--color-dark);
  text-decoration: underline;
}

.vypis-produkt .produkt-popis {
  font-size: var(--text-base);
  line-height: 1.25em;
  margin-top: var(--spacing);
}

.vypis-produkt .produkt-skladem-dostupne {
  margin: var(--spacing-sm) 0 var(--spacing);
  position: relative;
}

.vypis-produkt .produkt-skladem-dostupne:empty {
  height: 1.5rem;
  height: calc(var(--text-md) + 5px);
}

.vypis-produkt .produkt-skladem {
  font-size: var(--text-md);
  padding-bottom: 5px;
}

.vypis-produkt .produkt-skladem1D {
  font-size: var(--text-base);
}

.vypis-produkt .produkt-skladem0 {
  font-size: var(--text-base);
}

.vypis-produkt .produkt-dostupne-od,
.vypis-produkt .produkt-dostupne {
  color: var(--color-darkgray);
  inset: 100% 0 0 0;
  margin: 0;
  position: absolute;
}

.vypis-produkt .produkt-dostupne-od {
  color: var(--color-primary);
}

.vypis-produkt .produkt-dostupne-od a,
.vypis-produkt .produkt-dostupne a {
  text-decoration: none;
}

.vypis-produkt .produkt-dostupne-od a:hover,
.vypis-produkt .produkt-dostupne a:hover {
  text-decoration: underline;
}

.vypis-produkt .produkt-cena-koupit {
  align-items: flex-end;
  margin-top: var(--spacing);
  padding: 0 var(--spacing-xs);
}

.vypis-produkt .produkt-cena-bezna,
.vypis-produkt .produkt-cena-vysledna {
  font-size: var(--text-lg);
  padding-bottom: var(--spacing-xs);
  padding-top: 0.125rem;
}

.vypis-produkt .produkt-cena-bez-akce {
  font-size: var(--text-sm);
}

.vypis-produkt .produkt-koupit,
.vypis-produkt .produkt-upozornit {
  font-size: var(--text-sm);
  position: relative;
}

.vypis-produkt div.produkt-upozornit:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
}

.vypis-produkt div.produkt-upozornit svg {
  margin: 0;
  stroke: var(--color-success);
}

.vypis-produkt div.produkt-upozornit .produkt-upozornit-text {
  background-color: var(--color-success);
  border-radius: var(--rounded);
  color: var(--color-white);
  display: none;
  margin-top: 5px;
  padding: var(--spacing-px);
  position: absolute;
  right: 0;
  top: 100%;
  white-space: nowrap;
}

.vypis-produkt div.produkt-upozornit:focus .produkt-upozornit-text,
.vypis-produkt div.produkt-upozornit:hover .produkt-upozornit-text {
  display: block;
}

.vypis-produkt div.produkt-upozornit .produkt-upozornit-text::after {
	border-color: transparent transparent var(--color-success) transparent;
	border-style: solid;
	border-width: 0 7.5px 10px 7.5px;
	height: 0;
	width: 0;
  content: "";  
  display: block;
  position: absolute;
  right: 8px;
  top: -10px;
}

.vypis-produkt .produkt-akce-odpocet {
  background-color: var(--bg-akce-odpocet, #ffea9f);
  border-radius: var(--rounded);
  flex: auto;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
  width: 100%;
}

.vypis-produkt .produkt-akce-odpocet .odpocet-obsah {
  display: flex;
  gap: var(--spacing);
  justify-content: center;
}

.vypis-produkt .produkt-akce-odpocet .odpocet-den,
.vypis-produkt .produkt-akce-odpocet .odpocet-hodina,
.vypis-produkt .produkt-akce-odpocet .odpocet-minuta,
.vypis-produkt .produkt-akce-odpocet .odpocet-sekunda {
  color: red;
  flex-basis: fit-content;
  flex: 0 0 auto;
  font-size: var(--text-md);
  font-weight: bold;
  line-height: 1em;
  margin-right: 0;
  text-align: center;
}

.vypis-produkt .produkt-akce-odpocet .popis {
  display: block;
  font-size: var(--text-base);
  font-weight: normal;
  margin-left: 0;
}

.vypis-produkt .produkt-akce-odpocet-popis {
  display: block;
  font-size: var(--text-base);
  font-weight: bold;
  margin-bottom: var(--spacing-px-half);
}

#kategorie-clanek-obsah {
  border-top: 1px solid var(--color-gray);
  margin: var(--spacing) 0 0 0;
  padding: var(--spacing) 0 0 0;
}

#kategorie-clanky-odkazy {
  border-top: 1px solid var(--color-gray);
  margin: var(--spacing) 0 0 0;
  padding: var(--spacing) 0 0 0;
}

#kategorie-clanky-odkazy ul {
  columns: 2;
  margin: 0;
  padding: 0;
}

#kategorie-clanky-odkazy li {
  list-style: none;
}


/*********************************************************************************
 * Produktova stranka / E-shop
 ********************************************************************************/

.autor-detail,
.produkt-detail {
}

.produkt-detail-nadpis {
  border-top: 1px solid var(--color-lightgray);
  font-size: var(--text-lg);
  font-weight: bold;
  line-height: var(--line-md);
  margin: var(--spacing-2xl) 0 var(--spacing-sm);
  padding: var(--spacing) 0 0;
}

.autor-info,
.produkt-info {
  margin-bottom: var(--spacing-xl);
  overflow: visible;
  position: relative;
}

.autor-info::after,
.produkt-info::after {
  clear: both;
  content: "";
  display: table;
}

.autor-zahlavi,
.produkt-zahlavi {
}

@media (min-width: 55rem) {
  .autor-zahlavi,
  .produkt-zahlavi {
    float: right;
    width: calc(100% - 444px);
  }

  .autor-info.sticky .autor-zahlavi,
  .produkt-info.sticky .produkt-zahlavi {
    margin-left: 430px;
  }
}

@media (min-width: 87.5rem) {
  .autor-zahlavi,
  .produkt-zahlavi {
    padding-left: var(--spacing-lg);
    width: 50%;
  }

  .autor-info.sticky .autor-zahlavi,
  .produkt-info.sticky .produkt-zahlavi {
    margin-left: 50%;
  }
}

.autor-media,
.produkt-media {
  position: relative;
}

@media (min-width: 33.75rem) {
  .autor-media,
  .produkt-media {
    align-items: stretch;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: var(--spacing);
    max-height: 22.5rem;
  }
}

@media (min-width: 55rem) {
  .autor-media,
  .produkt-media {
    display: block;
    float: left;
    margin: var(--spacing-sm) 0 0;
    max-height: none;
    width: 428px;
  }

  .autor-info.sticky .autor-media,
  .produkt-info.sticky .produkt-media {
    align-items: stretch;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: var(--rounded);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    float: none;
    inset: 2.625rem;
    margin: 0;
    padding: 0;
    position: fixed;
    width: auto;
    z-index: var(--z-modal);
  }

  .autor-info.sticky .autor-media::after,
  .produkt-info.sticky .produkt-media::after {
    background-color: rgba(0,0,0,0.75);
    content: "";
    display: block;
    inset: 0;
    position: fixed;
    z-index: -1;
  }
}

@media (min-width: 87.5rem) {
  .autor-media,
  .produkt-media {
    padding-right: var(--spacing-lg);
    width: 50%;
  }
}

.autor-obsah,
.produkt-obsah {
}

@media (min-width: 55rem) {
  .autor-obsah,
  .produkt-obsah {
    float: right;
    width: calc(100% - 444px);
  }

  .autor-info.sticky .autor-obsah,
  .produkt-info.sticky .produkt-obsah {
    margin-left: 430px;
  }
}

@media (min-width: 87.5rem) {
  .autor-obsah,
  .produkt-obsah {
    padding-left: var(--spacing-lg);
    width: 50%;
  }

  .autor-info.sticky .autor-obsah,
  .produkt-info.sticky .produkt-obsah {
    margin-left: 50%;
  }
}

/** zahlavi - nadpis, hodnoceni, social */

.autor-info .autor-nazev,
.produkt-info .produkt-nazev {
  color: var(--color-black);
  font-size: var(--text-xl);
  font-weight: bold;
  letter-spacing: 0.01em;
  line-height: var(--line-xl);
  margin: var(--spacing-xs) 0;
}

@media (min-width: 55rem) {
  .autor-info .autor-nazev,
  .produkt-info .produkt-nazev {
    font-size: var(--text-2xl);
    line-height: var(--line-2xl);
  }
}

.produkt-info .produkt-autori {
  font-size: var(--text-lg);
  font-weight: normal;
  line-height: var(--line-lg);
  margin: var(--spacing-sm) 0;
}

.produkt-socials {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

@media (min-width: 33.75rem) {
  .produkt-socials {
    justify-content: flex-start;
  }
}

.produkt-social {
  flex: 0 0 auto;
}

@media (min-width: 33.75rem) {
  .produkt-social {
    margin-left: var(--spacing-lg);
  }

  .produkt-social:first-child {
    margin-left: 0;
  }
}

.produkt-social svg {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.produkt-social .svg {
  display: inline-block;
  fill: var(--color-darkgray);
  height: 100%;
  stroke-width: 0.2px;
  stroke: var(--color-darkgray);
}

.facebook svg {
  fill: var(--color-facebook);
  height: 19px;
  stroke: var(--color-facebook);
  width: 10px;
}

.twitter svg {
  fill: var(--color-twitter);
  height: 13px;
  stroke: var(--color-twitter);
  width: 16px;
}

.email svg {
  height: 12px;
  width: 18px;
}

.produkt-facebook,
.produkt-twitter,
.produkt-email {
  border: 1px solid var(--color-darkgray);
  border-radius: var(--rounded);
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: 0 var(--spacing-px-half) 0 0;
  text-align: center;
  vertical-align: middle;
  width: 30px;
}

.produkt-facebook {
  border-color: var(--color-facebook);
}

.produkt-facebook:hover {
  background-color: var(--color-facebook);
}

.produkt-facebook:focus-visible {
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 2px var(--color-facebook);
  outline: none;
}

.produkt-facebook:hover svg {
  fill: var(--color-white);
  stroke: var(--color-white);
}

.produkt-twitter {
  border-color: var(--color-twitter);
}

.produkt-twitter:hover {
  background-color: var(--color-twitter);
}

.produkt-twitter:focus-visible {
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 2px var(--color-twitter);
  outline: none;
}

.produkt-twitter:hover svg {
  fill: var(--color-white);
  stroke: var(--color-white);
}

.produkt-email:hover {
  background-color: var(--color-light);
  border-color: var(--color-dark);
}

.produkt-email:focus-visible {
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 2px var(--color-dark);
  outline: none;
}

.produkt-email:hover svg {
  fill: var(--color-dark);
  stroke: var(--color-dark);
}

/** media - obrazky, lightbox, stitky */

.produkt-info .stitky {
  top: 10px;
}

.produkt-info .ikony {
  bottom: 10px;
}

.produkt-info .ikony .ikona {
  display: block;
  margin: 4px 0 0;
  max-height: 48px;
  max-width: 48px;
}

@media (min-width: 55rem) {
  .produkt-info .stitky {
    top: 0px;
  }

  .produkt-info .ikony {
    bottom: 0px;
  }
}

.autor-media > .autor-nahled,
.produkt-media > .produkt-nahled {
  position: relative;
  text-align: center;
  width: 100%;
}

@media (min-width: 33.75rem) {
  .autor-media > .autor-nahled,
  .produkt-media > .produkt-nahled {
    align-self: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    padding: 0;
  }
}

@media (min-width: 55rem) {
  .autor-media > .autor-nahled,
  .produkt-media > .produkt-nahled {
    display: block;
  }
}

.autor-media-hlavni,
.produkt-media-hlavni {
  border: 1px solid var(--color-white);
  cursor: default;
  display: inline-block;
  margin: 0 auto;
  padding: var(--spacing-xs);
  pointer-events: none;
  transition-duration: var(--transition-duration);
  transition-property: border, box-shadow;
  transition-timing-function: var(--transition-timing-function);
}

.autor-media-hlavni:focus-visible,
.produkt-media-hlavni:focus-visible {
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: none;
}

.autor-media-hlavni img,
.produkt-media-hlavni img {
  display: inline-block;
  max-height: 17.5rem;
  max-width: 100%;
  vertical-align: middle;
}

.autor-media-hlavni img.autor-media-hlavni-skryte,
.produkt-media-hlavni img.produkt-media-hlavni-skryte {
  height: 1px;
  left: 0;  
  opacity: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 1px;
  z-index: -1;
}

@media (min-width: 33.75rem) {
  .autor-media-hlavni img,
  .produkt-media-hlavni img {
    max-height: 22rem;
    max-width: 95%;
  }
}

@media (min-width: 55rem) {
  .autor-media-hlavni,
  .produkt-media-hlavni {
    cursor: pointer;
    pointer-events: all;
  }

  .autor-media-hlavni img,
  .produkt-media-hlavni img {
    max-height: 25rem;
    max-width: 100%;
  }
}

.autor-soubory,
.produkt-soubory {
  align-items: stretch;
  display: flex;
  gap: 5px;
  justify-content: flex-start;
  overflow: auto;
  padding: var(--spacing) 5px 10px;
  position: relative;
  scrollbar-width: thin;
}

.autor-soubory::-webkit-scrollbar,
.produkt-soubory::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.autor-soubory::-webkit-scrollbar-thumb,
.produkt-soubory::-webkit-scrollbar-thumb {
  background-color: var(--color-gray);
  border-radius: 8x;
}

@media (min-width: 33.75rem) {
  .autor-soubory,
  .produkt-soubory {
    flex: 0 0 112px;
    margin: 0;
    display: flex;
    flex-flow: column nowrap;
    align-content: flex-start;
    overflow: auto;
    padding: 16px;
    gap: 5px;
  }
}

@media (min-width: 55rem) {
  .autor-soubory,
  .produkt-soubory {
    align-content: stretch;
    flex-flow: row nowrap;
    justify-content: center;
    margin: 0;
    padding: var(--spacing-xl) 5px var(--spacing-xs);
  }
}

.autor-media-maly,
.produkt-media-vice,
.produkt-media-maly {
  align-content: center;
  align-items: center;
  border: 1px solid var(--color-white);
  color: var(--color-darkgray);
  display: flex;
  flex-direction: column;
  flex: 0 1 80px;
  height: 80px;
  justify-content: center;
  line-height: 80px;
  transition-duration: var(--transition-duration);
  transition-property: border, box-shadow;
  transition-timing-function: var(--transition-timing-function);
  width: 80px;
}

.autor-media-maly.autor-media-vybrany,
.produkt-media-maly.produkt-media-vybrany {
  border-color: var(--color-lightgray);
}

.produkt-media-vice {
  display: none;
}

.autor-media-maly:hover,
.produkt-media-vice:hover,
.produkt-media-maly:hover {
  border: 1px solid var(--color-gray);
  color: var(--color-darkgray);
}

.autor-media-maly:focus-visible,
.autor-media-maly.autor-media-vybrany:focus-visible,
.produkt-media-vice:focus-visible,
.produkt-media-maly:focus-visible,
.produkt-media-maly.produkt-media-vybrany:focus-visible {
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  outline: none;
}

.autor-media-maly img,
.produkt-media-maly img {
  margin: 0;
  max-height: 70px;
  max-width: 70px;
}

@media (min-width: 55rem) {
  .produkt-media-vice {
    display: flex;
  }

  .produkt-media-maly.vice {
    display: none;
  }
}

.autor-media-nadpis,
.autor-media-prev,
.autor-media-next,
.autor-media-zavrit,
.produkt-media-nadpis,
.produkt-media-prev,
.produkt-media-next,
.produkt-media-zavrit {
  display: none;
}

/** .produkt-info.sticky */

@media (min-width: 55rem) {
  .produkt-info.sticky .ikony,
  .produkt-info.sticky .stitky {
    display: none;
  }

  .autor-info.sticky .autor-media > .autor-nahled,
  .produkt-info.sticky .produkt-media > .produkt-nahled {
    align-items: center;
    align-self: stretch;
    background-color: var(--color-white);
    display: flex;
  }

  .autor-info.sticky .autor-media-hlavni,
  .produkt-info.sticky .produkt-media-hlavni {
    cursor: default;
    height: 100%;
    max-height: 80%;
    max-width: 80%;
    pointer-events: none;
    width: 100%;
  }

  .autor-info.sticky  .autor-media-hlavni:focus-visible,
  .produkt-info.sticky .produkt-media-hlavni:focus-visible {
    border: none;
    box-shadow: none;
    outline: none;
  }

  .autor-info.sticky .autor-media-hlavni img,
  .produkt-info.sticky .produkt-media-hlavni img {
    max-height: 100%;
    max-width: 100%;
  }

  @supports (display: contents) {
    .autor-info.sticky .autor-media-hlavni,
    .produkt-info.sticky .produkt-media-hlavni {
      display: contents;
    }

    .autor-info.sticky .autor-media-hlavni img,
    .produkt-info.sticky .produkt-media-hlavni img {
      max-height: 80%;
      max-height: calc(100vh - 2*2.625rem - 2*32px - 2*1.75rem);
      max-width: 80%;
      max-width: calc(100% - 96px);
    }
  }

  .autor-info.sticky .autor-soubory,
  .produkt-info.sticky .produkt-soubory {
    align-content: flex-start;
    background-color: var(--color-light);
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 152px;
    gap: 10px;
    justify-content: flex-start;
    margin: 0;
    overflow: auto;
    padding: 16px;
  }

  .autor-info.sticky .autor-media-maly,
  .produkt-info.sticky .produkt-media-maly {
    background-color: var(--color-white);
    border-color: var(--color-gray);
    flex: 0 0 120px;
    height: 120px;
    width: 120px;
  }

  .autor-info.sticky .autor-media-maly.autor-media-vybrany
  .produkt-info.sticky .produkt-media-maly.produkt-media-vybrany {
    border-color: var(--color-primary);
  }

  .autor-info.sticky .autor-media-maly:hover,
  .produkt-info.sticky .produkt-media-maly:hover {
    border-color: var(--color-darkgray);
  }

  .produkt-info.sticky .produkt-media-maly.vice {
    display: flex;
  }

  .autor-info.sticky .autor-media-maly img,
  .produkt-info.sticky .produkt-media-maly img {
    max-width: 90px;
    max-height: 90px;
  }

  .produkt-info.sticky .produkt-media-vice {
    display: none;
  }

  .autor-info.sticky .autor-media-nadpis,
  .produkt-info.sticky .produkt-media-nadpis {
    display: block;
    font-size: var(--text-xl);
    font-weight: bold;
    inset: 16px 64px auto 16px;
    letter-spacing: 0.01em;
    line-height: var(--line-md);
    position: absolute;
    text-align: left;
    z-index: 1;
  }

  .autor-info.sticky .autor-media-prev,
  .autor-info.sticky .autor-media-next,
  .autor-info.sticky .autor-media-zavrit,
  .produkt-info.sticky .produkt-media-prev,
  .produkt-info.sticky .produkt-media-next,
  .produkt-info.sticky .produkt-media-zavrit {
    background: url('https://www.nixa.cz/obrazky/svg/x.svg') no-repeat center center;
    background-size: 24px 24px;
    cursor: pointer;
    display: block;
    height: 32px;
    inset: 8px 8px auto auto;
    position: absolute;
    width: 32px;
    z-index: 1;
  }

  .autor-info.sticky .autor-media-prev,
  .produkt-info.sticky .produkt-media-prev {
    background: url('https://www.nixa.cz/obrazky/svg/chevron-left.svg') no-repeat center center;
    background-size: 24px 24px;
    height: 64px;
    inset: 50% auto auto 0;
  }

  .autor-info.sticky .autor-media-next,
  .produkt-info.sticky .produkt-media-next {
    background: url('https://www.nixa.cz/obrazky/svg/chevron-right.svg') no-repeat center center;
    background-size: 24px 24px;
    height: 64px;
    inset: 50% 0 auto auto;
  }
}

@media (min-width: 87.5rem) {
  .autor-info.sticky .autor-soubory,
  .produkt-info.sticky .produkt-soubory {
    flex: 0 0 282px;
  }
}

/** popis, sklad, cena, koupit */

.produkt-info .produkt-popis-kratky {
  display: none;
}

@media (min-width: 33.75rem) {
  .produkt-info .produkt-popis-kratky {
    display: block;
  }
}

.produkt-info .produkt-popis-prejit {
  background: url('https://www.nixa.cz/obrazky/svg/chevron-down.svg') no-repeat right center;
  background-size: 14px 14px;
  display: inline-block;
  margin: var(--spacing) 0;
  padding-right: var(--spacing)  ;
  white-space: nowrap;
}

.produkt-varianty {
  padding-bottom: var(--spacing);
}

.produkt-varianta-nadpis {
  color: var(--color-darkgray);
  font-variant: small-caps;
}

.produkt-varianta-text,
.produkt-varianta-imgs {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.produkt-varianta-link {
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  padding: 3px;
  text-decoration: none;
  vertical-align: middle;
}

.produkt-varianta-link:hover {
  border-color: var(--color-dark);
}

.produkt-varianta-text .produkt-varianta-link {
  background: var(--color-light);
  border-color: var(--color-white);
  border-width: 2px;
  color: var(--color-dark);
  outline: solid var(--color-gray) 1px;
  padding: var(--spacing-xs) var(--spacing);
}

.produkt-varianta-text .produkt-varianta-link:hover {
  border-color: var(--color-white);
  outline-color: var(--color-darkgray);
}

.produkt-varianta-link img {
  display: inline-block;
  height: 64px;
  vertical-align: middle;
}

.produkt-info .produkt-ceny-skoly,
.produkt-info .produkt-ceny-od {
  align-content: flex-start;
  background-color: var(--color-light);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  line-height: 2em;
  padding: var(--spacing-xs) var(--spacing);
  position: relative;
}

.produkt-info .produkt-ceny-skoly .cena-skoly-mnozstvi,
.produkt-info .produkt-ceny-od .cena-od-mnozstvi {
  flex: 0 0 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.produkt-info .produkt-ceny-skoly .cena-skoly-cena,
.produkt-info .produkt-ceny-od .cena-od-cena {
  flex: 0 0 60%;
  font-weight: bold;
  margin: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
}

.produkt-info .produkt-ceny-skoly .cena-skoly-sleva,
.produkt-info .produkt-ceny-od .cena-od-sleva {
  display: inline-block;
  font-weight: normal;
  margin-left: var(--spacing-xs);
  text-align: right;
}

@media (min-width: 37.5rem) and (max-width: 55rem), (min-width: 64rem) {
  .produkt-info .produkt-ceny-skoly .cena-skoly-sleva,
  .produkt-info .produkt-ceny-od .cena-od-sleva {
      margin-left: var(--spacing-sm);
    width: 9.5rem;
  }
}

@media (min-width: 55rem) and (max-width: 64rem) {
  .produkt-info .produkt-ceny-skoly .cena-skoly-sleva,
  .produkt-info .produkt-ceny-od .cena-od-sleva {
    margin-left: var(--spacing-xs);
    width: auto;
  }
}

.produkt-cena-skoly-nadpis {
  font-size: var(--text-xl);
  font-weight: bold;
  margin-top: var(--spacing-lg);
  padding: 0 var(--spacing-xs);
}

.produkt-cena-skoly-nadpis::before {
  background-image: url('https://www.nixa.cz/obrazky//skola.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  content: '';
  display: inline-block;
  height: 32px;
  margin-right: var(--spacing-xs);
  vertical-align: sub;
  width: 32px;
}

.produkt-info .produkt-skladem-dostupne {
  background-color: var(--color-light);
  margin-top: var(--spacing-xs);
  padding: var(--spacing);
}

/*
 ? 1. flexbox defined @ `.produkt-cena-koupit`
 */
.produkt-info .produkt-cena-koupit {
  background-color: var(--color-light);
  flex-direction: column; /* 1. */
  margin-top: var(--spacing-xs);
  padding: var(--spacing);
}

@media (min-width: 37.5rem) {
  .produkt-info .produkt-cena-koupit {
    flex-direction: row;
  }
}

.produkt-info .produkt-cena {
  align-self: flex-end;
  margin-bottom: var(--spacing);
  text-align: right;
}

.produkt-info .produkt-koupit-obsah {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  width: 100%;
}

@media (min-width: 37.5rem) {
  .produkt-info .produkt-cena {
    align-self: auto;
    margin-bottom: 0;
    text-align: left;
  }

  .produkt-info .produkt-koupit-obsah {
    width: auto;
  }
}

.produkt-info .produkt-koupit-mnozstvi-obsah {
  flex: 0 0 auto;
  margin-right: var(--spacing-px);
  position: relative;
}

.produkt-info .produkt-koupit-mnozstvi {
  /* @include .tbox */
  font-size: var(--text-lg);
  padding: var(--spacing-xs) 2rem var(--spacing-xs) var(--spacing);
  width: 6rem;
}

.produkt-koupit-mnozstvi-plus,
.produkt-koupit-mnozstvi-minus {
  background-color: var(--color-light);
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-lightgray) 70%);
  border-left: 1px solid var(--color-gray);
  border-top-right-radius: var(--rounded);
  color: var(--color-darkgray);
  font-weight: bold;
  inset: 1px 1px 50% auto;
  /* line-height: 1em; */
  position: absolute;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0px #fff;
  transition-duration: var(--transition-duration);
  transition-property: box-shadow;
  transition-timing-function: var(--transition-timing-function);
  width: 2rem;
}

.produkt-koupit-mnozstvi-minus {
  border-bottom-right-radius: var(--rounded);
  border-top: 1px solid var(--color-gray);
  inset: 50% 1px 1px auto;
}

.produkt-koupit-mnozstvi-plus:hover,
.produkt-koupit-mnozstvi-minus:hover {
  color: var(--color-dark);
}

.produkt-koupit-mnozstvi-plus:focus-visible,
.produkt-koupit-mnozstvi-minus:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary), inset 0 0 0 4px var(--color-white);
  outline: none;
}

/*
 ? 1. as if font-size was `--text-lg` and line-height was `1em`
 */
.produkt-info .produkt-koupit,
.produkt-info .produkt-upozornit {
  flex: 1 1 auto;
  font-size: var(--text-md);
  line-height: var(--text-lg); /* 1. */
  padding: var(--spacing-xs) var(--spacing);
  text-align: center;
}

.produkt-info .produkt-koupit {
  border: 1px solid var(--color-primary);
  padding: var(--spacing-xs) var(--spacing-md);
}

.produkt-info .produkt-koupit svg,
.produkt-info .produkt-upozornit svg {
  height: 24px;
  width: 24px;
  line-height: 1em;
}

.produkt-info .produkt-koupit-text,
.produkt-info .produkt-koupit-text {
  line-height: 2rem;
}

@media (min-width: 37.5rem) {
  .produkt-info .produkt-koupit,
  .produkt-info .produkt-upozornit {
    flex: 0 0 auto;
  }
}

.produkt-akce-odpocet {
  background-color: var(--bg-akce-odpocet, #ffea9f);
  border-radius: var(--rounded);
  flex: 0 0 100%;
  padding: var(--spacing-sm);
  width: 100%;
}

.produkt-akce-odpocet .odpocet-obsah {
  display: flex;
  justify-content: flex-start;
}

.produkt-akce-odpocet .odpocet-den,
.produkt-akce-odpocet .odpocet-hodina,
.produkt-akce-odpocet .odpocet-minuta,
.produkt-akce-odpocet .odpocet-sekunda {
  color: var(--color-akce-odpocet, red);
  font-size: var(--text-lg);
  font-weight: bold;
  margin-right: var(--spacing-px);
}

.produkt-akce-odpocet .odpocet-konec {
  color: var(--color-akce-odpocet, red);
  display: none;
  font-size: var(--text-lg);
  font-weight: bold;
  text-align: left;
  width: 100%;
}

.produkt-akce-odpocet .popis {
  margin-left: var(--spacing-px-half);
  font-weight: normal;
}

.produkt-akce-odpocet-popis {
  font-size: var(--text-md);
  font-weight: bold;
}

/** zalozky, obsah zalozek */

.produkt-hodnoceni {
  background-color: var(--color-light);
  border-radius: var(--rounded);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing);
  text-align: center;
}

@media (min-width: 33.75rem) {
  .produkt-hodnoceni {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
}

.produkt-hodnoceni-nahled {
  padding-bottom: var(--spacing-md);
}

.produkt-hodnoceni-cislo {
  font-size: var(--text-3xl);
  font-weight: bold;
  line-height: 1em;
  margin-bottom: var(--spacing-px);
}

.produkt-hodnoceni .produkt-hodnoceni-hvezdy {
  text-align: center;
}

.produkt-hodnoceni .produkt-hvezda svg {
  height: 24px;
  width: 24px;
}

.produkt-hodnoceni-pocet {
  margin-top: var(--spacing-px);
}

@media (min-width: 33.75rem) {
  .produkt-hodnoceni-nahled {
    flex: 0 0 50%;
    padding: 0;
  }
}

@media (min-width: 48rem) {
  .produkt-hodnoceni-nahled {
    flex: 0 0 30%;
  }
}

.produkt-hodnoceni-pocty-hvezd {
  display: none;
}

@media (min-width: 48rem) {
  .produkt-hodnoceni-pocty-hvezd {
    border-left: 1px solid var(--color-gray);
    border-right: 1px solid var(--color-gray);
    display: block;
    flex: 1 1 auto;
  }

  .produkt-hvezdy {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: 3px auto;
  }

  .produkt-hvezdy .produkt-hvezda {
    flex: 0 0 auto;
    text-align: right;
  }

  .produkt-hvezdy .produkt-hvezda .svg {
    display: inline-block;
    margin-left: 3px;
    vertical-align: middle;
  }

  .produkt-hvezdy .produkt-hvezda svg {
    height: 18px;
    width: 18px;
  }

  .produkt-hvezdy-graf {
    background-color: var(--color-gray);
    border-radius: var(--rounded);
    flex: 0 0 150px;
    height: 9px;
    margin: 0 var(--spacing-px);
    position: relative;
    width: 150px;
  }

  .produkt-hvezdy-graf > span {
    background-color: var(--color-primary);
    border-radius: var(--rounded);
    inset: 0 auto 0 0;
    position: absolute;
  }

  .produkt-hvezdy-pocet {
    flex: 0 0 auto;
  }
}

.produkt-hodnoceni-hodnotit {
  border-top: 1px solid var(--color-gray);
  padding-top: var(--spacing-md);
}

.produkt-hodnotit-nadpis {
  font-size: var(--text-lg);
  font-weight: bold;
  margin-bottom: var(--spacing-px-2x);
}

@media (min-width: 33.75rem) {
  .produkt-hodnoceni-hodnotit {
    border-top: none;
    flex: 0 0 50%;
    padding: 0;
  }
}

@media (min-width: 48rem) {
  .produkt-hodnoceni-hodnotit {
    flex: 0 0 30%;
  }
}

.popis-polozky-formulare,
.produkt-hodnoceni-komentar-radek {
  color: var(--color-darkgray);
  font-size: var(--text-sm);
}

.produkt-parametr-skupina-vychozi,
.produkt-parametr-skupina {
  border-left: 1px solid var(--color-gray);
  border-top: 1px solid var(--color-gray);
  display: table;
  width: 100%;
}

.produkt-parametr-skupina-nazev {
  display: table-caption;
  font-size: var(--text-md);
  margin: var(--spacing) 0 var(--spacing-xs);
}

.produkt-parametr {
  background-color: var(--color-light);
  display: table-row;
}

.produkt-parametr-skupina-vychozi .produkt-parametr:nth-child(even),
.produkt-parametr:nth-child(odd) {
  background-color: var(--color-lightgray);
}

.produkt-parametr-skupina-vychozi .produkt-parametr:nth-child(odd) {
  background-color: var(--color-light);
}

.produkt-parametr-nazev {
  border-bottom: 1px solid var(--color-gray);
  border-right: 1px solid var(--color-gray);
  display: table-cell;
  font-weight: bold;
  padding: 5px var(--spacing-sm);
  width: 35%;
}

@media (min-width: 45rem) {
  .produkt-parametr-nazev {
    width: 25%;
  }
}

.produkt-parametr-hodnota {
  border-bottom: 1px solid var(--color-gray);
  border-right: 1px solid var(--color-gray);
  display: table-cell;
  padding: 5px var(--spacing-sm);
}

.parametr-graficky {
  display: inline-block;
  height: 20px;
  padding-top: 2px;
  vertical-align: top;
}

.parametr-graficky .svg {
  display: inline-block;
  height: 20px;
}

.parametr-graficky svg {
  display: inline-block;
  height: 20px;
  width: 20px;
}

.parametr-graficky-vyplneny.hvezda svg {
  fill: goldenrod;
  margin-right: 2px;
  stroke-width: 1px;
  stroke: none;
}

.parametr-graficky-prazdny.hvezda svg {
  fill: white;
  margin-right: 2px;
  stroke-width: 1px;
  stroke: goldenrod;
}

.parametr-graficky-vyplneny.ctverec svg {
  fill: var(--color-primary);
  stroke: none;
}

.parametr-graficky-prazdny.ctverec svg {
  fill: var(--color-darkgray);
  stroke: none;
}

.produkt-prilohy,
.produkt-virtualnis {
}

.produkt-autori-nadpis,
.produkt-virtualnis-nadpis,
.produkt-prilohy-nadpis {
  font-size: var(--text-lg);
  line-height: var(--line-lg);
  margin-bottom: var(--spacing);
}

.produkt-prilohy .produkt-priloha,
.produkt-virtualnis .produkt-virtualni {
  background-color: var(--color-light);
  border-top: 1px solid var(--color-gray);
  font-size: var(--text-md);
  line-height: 1em;
  padding: var(--spacing-sm);
}

.produkt-prilohy .produkt-priloha:last-child,
.produkt-virtualnis .produkt-virtualni:last-child {
  border-bottom: 1px solid var(--color-gray);
}

.produkt-prilohy .produkt-priloha:nth-child(odd),
.produkt-virtualnis .produkt-virtualni:nth-child(odd) {
  background-color: var(--color-lightgray);
}

.produkt-prilohy .produkt-priloha-velikost,
.produkt-virtualnis .produkt-virtualni-velikost {
  display: inline-block;
  font-size: var(--text-base);
  font-style: italic;
  margin-left: var(--spacing-xs);
}

/*
 ? 1. slightly less than A4
 */
#produkt-ukazka {
  aspect-ratio: 210 / 280; /* 1. */
  border: 0;
  min-height: 450px;
  width: 100%;
}

@media (min-width: 34rem) {
  #produkt-ukazka {
    min-height: 710px;
  }
}

@media (min-width: 46rem) {
  #produkt-ukazka {
    min-height: 1000px;
  }
}

@media (min-width: 67.5rem) {
  .produkt-ukazky {
    text-align: center;
  }

  #produkt-ukazka {
    aspect-ratio: auto;
    height: 1455px;
    height: min(1455px, 90vh);
    margin: 0 auto;
    width: 1040px;
  }
}

.produkt-recenzes {
}

.produkt-recenze {
  border-bottom: 1px solid var(--color-gray);
  padding: var(--spacing);
}

.produkt-recenze-hodnoceni {
  margin-bottom: var(--spacing);
}

.produkt-recenze-uzivatel {
  font-size: var(--text-md);
  font-weight: bold;
}

.produkt-recenze-datum {
  color: var(--color-darkgray);
}

.produkt-recenze-hvezdy {
  margin-top: 4px;
}

.produkt-recenze-komentar {
  align-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.produkt-recenze-popis {
  flex: 0 0 100%;
  margin-bottom: var(--spacing);
}

.produkt-recenze-klady {
  flex: 0 0 50%;
}

.produkt-recenze-zapory {
  flex: 0 0 50%;
}

.produkt-recenze .span-radek {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--spacing-px-half);
}

.produkt-recenze .span-radek .svg {
  border-radius: 100%;
  flex: 0 0 20px;
  height: 20px;
  margin: 2px var(--spacing) 0 0;
  position: relative;
  width: 20px;
}

.produkt-recenze .span-radek svg {
  display: inline-block;
  fill: none;
  height: 16px;
  left: 50%;
  position: absolute;
  stroke-width: 2px;
  stroke: var(--color-white);
  top: 50%;
  transform: translate(-50%,-50%);
  width: 16px;
}

.produkt-recenze .produkt-recenze-klad {
  background-color: var(--color-success);
}

.produkt-recenze .produkt-recenze-zapor {
  background-color: var(--color-error);
}

.produkt-recenze .span-radek-text {
  flex: 1 1 auto;
  margin-right: var(--spacing-md);
}

.produkt-poradna-dalsi-stranky,
.produkt-recenze-dalsi-stranky {
  margin: var(--spacing-md) 0;
  text-align: center;
}

.produkt-poradna-dalsi-stranky .produkt-poradna-dalsi,
.produkt-recenze-dalsi-stranky .produkt-recenze-dalsi {
  background-color: var(--color-light);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  color: var(--color-dark);
  display: inline-block;
  font-weight: bold;
  padding: var(--spacing-xs) var(--spacing);
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
}

.produkt-poradna-dalsi-stranky .produkt-poradna-dalsi:hover,
.produkt-recenze-dalsi-stranky .produkt-recenze-dalsi:hover {
  border-color: var(--color-darkgray);
  text-decoration: underline;
}

.produkt-poradna-dalsi-stranky .produkt-poradna-dalsi:focus-visible,
.produkt-recenze-dalsi-stranky .produkt-recenze-dalsi:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}

.produkt-poradna-info {
  align-items: center;
  background-color: var(--color-light);
  display: flex;
  gap: var(--spacing);
  justify-content: space-between;
  padding: var(--spacing);
}

.produkt-poradna-popis {
  flex: 1 1 auto;
}

.produkt-poradna-pridat {
  flex: 0 0 auto;
}

.produkt-poradna-dotaz {
  background-image: url('https://www.nixa.cz/obrazky/svg/question.svg');
  background-position: 16px 16px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border-radius: var(--rounded);
  border: 1px solid var(--color-gray);
  margin-top: var(--spacing);
  padding: var(--spacing);
  padding-left: 54px;
  position: relative;
}

.produkt-poradna-dotaz.otevri {
  background-image: none;
  cursor: pointer;
}

.produkt-poradna-dotaz.otevri:hover {
  background-color: var(--color-light);
}

.produkt-poradna-dotaz.otevri::after {
  background: url('https://www.nixa.cz/obrazky/svg/chevron-down.svg') no-repeat center center;
  background-size: 24px 24px;
  content: "";
  display: block;
  height: 24px;
  left: 16px;
  position: absolute;
  top: 16px;
  transform: rotate(0deg);
  transition-duration: var(--transition-duration-long);
  transition-property: transform;
  transition-timing-function: var(--transition-timing-function);
  width: 24px;
}

.produkt-poradna-dotaz.otevri.plus::after {
  transform: rotate(0deg);
}

.produkt-poradna-dotaz.otevri.minus::after {
  transform: rotate(-180deg);
}

.produkt-poradna-zahlavi {
  color: var(--color-darkgray);
  margin-bottom: var(--spacing-sm);
}

.produkt-poradna-jmeno {
  display: inline-block;
}

.produkt-poradna-jmeno img {
  display: inline-block;
  margin-right: var(--spacing-xs);
  vertical-align: middle;
}

.produkt-poradna-datum {
  display: inline-block;
}

.produkt-poradna-odpoved {
  background-color: var(--color-light);
  border-radius: var(--rounded);
  border: 1px solid var(--color-light);
  display: none;
  margin-left: var(--spacing-3xl);
  margin-top: var(--spacing);
  opacity: 0;
  padding: var(--spacing);
  transform: translate(5%, 0);
  transition-duration: var(--transition-duration);
  transition-property: opacity, transform, visibility;
  transition-timing-function: var(--transition-timing-function-long);
  visibility: hidden;
}

.produkt-poradna-odpoved.otevreny {
  display: block;
  opacity: 1;
  transform: translate(0, 0);
  visibility: visible;
}

.produkt-kategories {
  margin: var(--spacing-2xl) 0 0;
}

.produkt-kategorie-nadpis {
  color: var(--color-darkgray);
  font-variant: small-caps;
  margin-bottom: var(--spacing-xs);
}

.produkt-kategorie {
  background: url('https://www.nixa.cz/obrazky/svg/folder.svg') no-repeat left center;
  background-size: 18px 18px;
  display: inline-block;
  margin: 0 var(--spacing-xs);
  padding-left: 22px;
  white-space: nowrap;
}

.produkt-kategorie:first-child {
  margin-left: 0;
}


/*********************************************************************************
 * Homepage
 ********************************************************************************/

.vypis-homepage {
  margin: 0 0 var(--spacing-lg) 0;
}

.produkt-detail .vypis-homepage {
  padding: 0 0 var(--spacing-sm) 0;
}

.vypis-homepage .vypis-produkt {
  border: none;
  border-right: 1px solid var(--color-lightgray);
  max-width: none;
  padding: var(--spacing-xs);
}

.vypis-homepage .vypis-produkt:last-child {
  border: none;
}

.vypis-homepage .vypis-produkt .produkt-obrazek {
  margin-bottom: var(--spacing);
}

.vypis-homepage .vypis-produkt .produkt-hodnoceni-hvezdy {
  bottom: -14px;
  top: auto;
}

.vypis-homepage .vypis-produkt .produkt-nazev {
  font-size: var(--text-md);
  line-height: 1em;
}

.vypis-homepage .vypis-produkt .produkt-autori {
  font-size: var(--text-base);
  margin-top: 0;
}

.vypis-homepage .vypis-produkt .produkt-cena-koupit {
  margin-top: var(--spacing-xs);
  padding: 0;
}

.produkt-samostatne {
  display: inline-flex;
}

.produkt-samostatne .vypis-produkt {
  border: none;
  max-width: 196px;
  padding: var(--spacing-xs);
  margin: 0px;
}

/** Posuvne */

.posuvne {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.posuvne-polozky {
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.posuvne-polozky::-webkit-scrollbar {
  display: none;
}

.posuvne-polozka {
  flex: 0 0 100%;
  width: 100%;
}

@media (min-width: 33.75rem) {
  .posuvne-polozka {
    flex: 0 0 50%;
    width: 50%;
  }
}

@media (min-width: 48rem) {
  .posuvne-polozka {
    flex: 0 0 33.33%;
    width: 33.33%;
  }
}

@media (min-width: 64rem) {
  .posuvne-polozka {
    flex: 0 0 25%;
    width: 25%;
  }
}

@media (min-width: 78.75rem) {
  .posuvne-polozka {
    flex: 0 0 20%;
    width: 20%;
  }
}

.posuvne-zpet,
.posuvne-vpred {
  background-color: var(--color-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  display: block;
  fill: var(--color-white);
  height: 40px;
  position: absolute;
  stroke: var(--color-white);
  text-decoration: none;
  top: 50%;
  transform: translateY(-50%);
  transition-duration: var(--transition-duration);
  transition-property: background-color;
  transition-timing-function: var(--transition-timing-function);
  width: 30px;
  z-index: 2;
}

.posuvne-zpet:hover,
.posuvne-vpred:hover {
  background-color: var(--color-primary-dark);
}

.posuvne-zpet svg,
.posuvne-vpred svg {
  filter: drop-shadow(-1px -1px 0px rgb(0 0 0 / 0.5));
  height: 18px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 10px;
}

.posuvne-zpet {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  display: none;
  left: 0px;
}

.posuvne-vpred {
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  display: none;
  right: 0px;
}

.scroll-zpet .posuvne-zpet,
.scroll-zpet-vpred .posuvne-zpet,
.scroll-vpred .posuvne-vpred,
.scroll-zpet-vpred .posuvne-vpred {
  display: block;
}

/** Nadpis */

.vypis-homepage-nadpis {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-2xl);
  font-weight: normal;
  gap: var(--spacing-xs);
  justify-content: flex-start;
  line-height: var(--line-2xl);
  margin: var(--spacing-lg) 0 var(--spacing) 0;
}

@media (min-width: 55rem) {
  .vypis-homepage-nadpis {
    flex-wrap: nowrap;
  }
}

.vypis-homepage-nadpis-nadpis {
  flex: 1 1 auto;
}

.vypis-homepage-nadpis-tlacitko {
  background-color: var(--color-light);
  background-image: linear-gradient(180deg, var(--color-white) 0%, var(--color-lightgray) 70%);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  color: var(--color-darkgray);
  display: inline-block;
  flex: 0 0 auto;
  font-size: var(--text-sm);
  line-height: 1em;
  margin: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: color, box-shadow, border;
  transition-timing-function: var(--transition-timing-function);
  vertical-align: middle;
  width: auto;
}

.vypis-homepage-nadpis-tlacitko:hover {
  background-color: var(--color-lightgray);
  border-color: var(--color-darkgray);
  color: var(--color-dark);
}

.vypis-homepage-nadpis-tlacitko:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}

/** Bannery */

/*
 ? sirka praveho obsahu
 */
.vypis-bannery {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  margin: var(--spacing-lg) auto;
  max-width: 68.5rem; /* 1. */
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.vypis-banner {
  display: block;
  flex: 0 0 100%;
  text-align: center;
}

.vypis-banner-aktivni {
  order: -1;
}

@supports (display: grid) {
  .vypis-bannery {
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .vypis-banner {
    grid-area: 1 / 1 / 2 / 2;
  }

  .vypis-banner:not(.vypis-banner-aktivni),
  .vypis-banner:not(.vypis-banner-aktivni) ~ .vypis-banner {
    transform: translateX(-100%);
  }

  /* !!! beware specificity !!! */
  .vypis-banner.vypis-banner-aktivni ~ .vypis-banner {
    transform: translateX(100%);
  }

  .vypis-banner-aktivni {
    transform: translateX(0) !important;
    transition: transform 0.5s;
  }

  .vypis-banner-predchozi {
    transition: transform 0.5s;
  }

  @media (prefers-reduced-motion) {
    .vypis-banner-aktivni,
    .vypis-banner-predchozi {
      transition: none;
    }
  }
}

.vypis-banner a {
  display: inline-block;
}

.vypis-banner .obrazek {
  border: 0;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  width: 100%;
}

.vypis-bannery-lista {
  display: block;
  inset: auto 0 0 0;
  padding: var(--spacing-px);
  position: absolute;
  text-align: right;
  z-index: 1;
}

.vypis-bannery-lista-zpet,
.vypis-bannery-lista-vpred {
  display: none;
}

.vypis-bannery-lista-polozky {
  display: inline-block;
}

.vypis-banner-lista-polozka {
  background: var(--color-light);
  border: 2px solid var(--color-primary-dark);
  display: inline-block;
  height: 1.25rem;
  margin: 0 var(--spacing-xs);
  outline: 1px solid var(--color-white);
  vertical-align: middle;
  width: 1.25rem;
}

.vypis-banner-lista-polozka-aktivni {
  background-color: var(--color-primary);
}

/** Text / popis */

.vypis-popis {
  margin: var(--spacing-lg) 0;
}

/** Segmenty a autori */

.vypis-panely .posuvne-polozky {
  align-items: flex-start;
}

.vypis-autor,
.vypis-panel {
  border: 0;
  overflow: hidden;
  padding: var(--spacing-px-half);
  position: relative;
  text-align: center;
}

.vypis-panely-2 .vypis-panel,
.vypis-panely-4 .vypis-panel {
  flex: 0 0 100%;
  width: 100%;
}

.vypis-panely-6 .vypis-panel,
.vypis-panely-8 .vypis-panel {
  flex: 0 0 50%;
  width: 50%;
}

@media (min-width: 25rem) {
  .vypis-panely-8 .vypis-panel {
    flex: 0 0 33.33%;
    width: 33.33%;
  }
}

/* 540px */
@media (min-width: 33.75rem) {
  .vypis-autor,
  .vypis-panel {
    flex: 0 0 50%;
    width: 50%;
  }

  .vypis-panely-4 .vypis-panel {
    flex: 0 0 50%;
    width: 50%;
  }

  .vypis-panely-6 .vypis-panel {
    flex: 0 0 33.33%;
    width: 33.33%;
  }

  .vypis-panely-8 .vypis-panel {
    flex: 0 0 25%;
    width: 25%;
  }
}

@media (min-width: 48rem) {
  .vypis-autor,
  .vypis-panel {
    flex: 0 0 33.33%;
    width: 33.33%;
  }

  .vypis-panely-2 .vypis-panel {
    flex: 0 0 50%;
    width: 50%;
  }

  .vypis-panely-4 .vypis-panel {
    flex: 0 0 33.33%;
    width: 33.33%;
  }

  .vypis-panely-6 .vypis-panel {
    flex: 0 0 25%;
    width: 25%;
  }

  .vypis-panely-8 .vypis-panel {
    flex: 0 0 20%;
    width: 20%;
  }
}

@media (min-width: 64rem) {
  .vypis-autor,
  .vypis-panel {
    flex: 0 0 25%;
    width: 25%;
  }

  .vypis-panely-4 .vypis-panel {
    flex: 0 0 25%;
    width: 25%;
  }

  .vypis-panely-6 .vypis-panel {
    flex: 0 0 20%;
    width: 20%;
  }

  .vypis-panely-8 .vypis-panel {
    flex: 0 0 16.66%;
    width: 16.66%;
  }
}

@media (min-width: 72rem) {
  .vypis-panely-6 .vypis-panel {
    flex: 0 0 16.66%;
    width: 16.66%;
  }

  .vypis-panely-8 .vypis-panel {
    flex: 0 0 12.5%;
    width: 12.5%;
  }
}

@media (min-width: 78.75rem) {
  .vypis-autor,
  .vypis-panel {
    flex: 0 0 25%;
    width: 25%;
  }

  .vypis-panely-4 .vypis-panel {
    flex: 0 0 25%;
    width: 25%;
  }
}

.vypis-autor {
  height: 23rem;
}

.vypis-autor-obrazek,
.vypis-panel-obrazek {
  display: block;
  text-align: center;
}

.vypis-autor-obrazek img,
.vypis-panel-obrazek img {
  border: 0;
  border-radius: var(--rounded);
  display: inline-block;
  margin: 0;
  object-fit: cover;
  padding: 0;
  vertical-align: middle;
  width: 100%;
}

.vypis-autor-obrazek img {
  height: 23rem;
}

.vypis-panel-obsah {
  color: var(--color-white);
  display: block;
  inset: var(--spacing-px-half);
  padding: var(--spacing-lg) var(--spacing) 0;
  position: absolute;
  text-decoration: none;
  text-shadow: 2px 2px 0px rgba(0,0,0,1);
}

.vypis-panel-obsah:hover {
  color: var(--color-white);
}

.vypis-panel-nadpis {
  display: block;
  font-size: var(--text-lg);
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vypis-panel-popis {
  display: block;
  margin: var(--spacing-xs) 0 0 0;
  max-height: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.vypis-autor-obsah {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: var(--rounded);
  inset: auto var(--spacing-px-2x) var(--spacing-px);
  padding: var(--spacing-px);
  position: absolute;
}

.vypis-autor-nazev {
  color: var(--color-white);
  display: block;
  font-size: var(--text-lg);
  font-weight: bold;
  letter-spacing: 0.1em;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 2px 2px 0px var(--color-black);
  white-space: nowrap;
}

.vypis-autor-pocet-knih {
  color: var(--color-white);
  font-size: var(--text-sm);
  text-align: center;
  text-shadow: 0px 0px 10px var(--color-black);
}

.vypis-autor-tlacitko {
  background-color: var(--color-dark);
  background-image: linear-gradient(180deg, var(--color-dark) 0%, var(--color-black) 70%);
  border-color: var(--color-black) var(--color-black) var(--color-dark);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--rounded);
  color: var(--color-white);
  display: inline-block;
  line-height: 1em;
  margin: var(--spacing-px) 0 0 0;
  min-width: 75%;
  padding: var(--spacing-px);
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
  width: max-content;
}

.vypis-autor-tlacitko:hover {
  background-color: var(--color-black);
  border-color: var(--color-darkgray);
  color: var(--color-white);
}

.vypis-autor-tlacitko:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-black);
  outline: none;
}

/** Panely - promo */

.vypis-promo-panel {
  margin: var(--spacing-lg) 0;
  position: relative;
  width: 100%;
}

.vypis-promo-panel-obrazek {
  inset: 0;
  position: absolute;
}

.vypis-promo-panel-obrazek img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.vypis-promo-panel-cela-sirka {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  justify-content: space-between;
  padding: var(--spacing);
  position: relative;
}

@media (min-width: 48rem) {
  .vypis-promo-panel-cela-sirka {
    flex-direction: row;
    gap: var(--spacing-md);
  }
}

.vypis-promo-panel-nadpis-popis {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: var(--rounded);
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--spacing);
  justify-content: center;
  padding: var(--spacing) var(--spacing-sm);
  text-align: center;
  text-shadow: 0px 0px 12px var(--color-white);
}

@media (min-width: 48rem) {
  .vypis-promo-panel-nadpis-popis {
    flex: 0 0 40%;
  }
}

@media (min-width: 64rem) {
  .vypis-promo-panel-nadpis-popis {
    flex: 0 0 30%;
  }
}

.vypis-promo-panel-tmavy .vypis-promo-panel-nadpis-popis {
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-white);
  text-shadow: 0px 0px 10px var(--color-black);
}

.vypis-promo-panel-nadpis {
  display: block;
  font-size: var(--text-xl);
  font-weight: bold;
}

.vypis-promo-panel-podnadpis {
  display: block;
  font-size: var(--text-md);
  font-weight: bold;
}

.vypis-promo-panel-tmavy .vypis-promo-panel-nadpis, 
.vypis-promo-panel-tmavy .vypis-promo-panel-podnadpis {
  text-shadow: 2px 2px 0px var(--color-black);
}

.vypis-promo-panel-popis {
  display: block;
  word-wrap: normal;
}

.vypis-promo-panel-odkaz {
  background-color: var(--color-light);
  background-image: linear-gradient(180deg, var(--color-white) 0%, var(--color-lightgray) 70%);
  border-color: var(--color-lightgray) var(--color-gray) var(--color-darkgray);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--rounded);
  color: var(--color-dark);
  display: inline-block;
  line-height: 1em;
  margin: 0 auto;
  min-width: 50%;
  padding: var(--spacing-sm) var(--spacing);
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: all;
  transition-timing-function: var(--transition-timing-function);
  width: max-content;
}

.vypis-promo-panel-tmavy .vypis-promo-panel-odkaz {
  background-color: var(--color-dark);
  background-image: linear-gradient(180deg, var(--color-dark) 0%, var(--color-black) 70%);
  border-color: var(--color-black) var(--color-black) var(--color-dark);
  color: var(--color-white);
}

.vypis-promo-panel-odkaz:hover {
  background-color: var(--color-lightgray);
  border-color: var(--color-darkgray);
  color: var(--color-dark);
}

.vypis-promo-panel-tmavy .vypis-promo-panel-odkaz:hover {
  background-color: var(--color-black);
  border-color: var(--color-darkgray);
  color: var(--color-white);
}

.vypis-promo-panel-odkaz:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-darkgray);
  outline: none;
}

.vypis-promo-panel-tmavy .vypis-promo-panel-odkaz:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-black);
  outline: none;
}

/**
 ? 1. no idea why, but important
      otherwise content bleeds over right edge
 */
.vypis-promo-panel-produkty {
  flex: 1 1 0;
  padding: var(--spacing) 0;
  min-width: 50%; /* 1. */
}

.vypis-promo-panel-produkty .vypis-homepage {
  margin: 0;
}

.vypis-promo-panel-produkty .posuvne-polozka {
  border: none;
  flex-basis: 100%;
  padding: 0 var(--spacing-px-half);
  width: 100%;
}

@media (min-width: 33.75rem) {
  .vypis-promo-panel-produkty .posuvne-polozka {
    flex-basis: 50%;
    width: 50%;
  }
}

@media (min-width: 48rem) {
  .vypis-promo-panel-produkty .posuvne-polozka {
    flex-basis: 100%;
    width: 100%;
  }
}

@media (min-width: 56rem) {
  .vypis-promo-panel-produkty .posuvne-polozka {
    flex-basis: 50%;
    width: 50%;
  }
}

@media (min-width: 64rem) {
  .vypis-promo-panel-produkty .posuvne-polozka {
    flex-basis: 33.33%;
    width: 33.33%;
  }
}

.vypis-promo-panel-produkty .vypis-produkt-obsah {
  background-color: var(--color-white);
  border-radius: var(--rounded);
  padding: var(--spacing-xs);
}

/** uprava odsazeni */

.vypis-homepage-nadpis:first-child,
.vypis-homepage :first-child,
.vypis-popis:first-child,
.vypis-bannery:first-child,
.vypis-promo-panel:first-child {
  margin-top: 0;
}

.vypis-homepage-nadpis:last-child,
.vypis-homepage:last-child,
.vypis-popis:last-child,
.vypis-bannery:last-child,
.vypis-promo-panel:last-child {
  margin-bottom: 0;
}

.clanek-seznam-clanky {
  padding: 20px 0 0 0;
}

.clanek-seznam-clanek {
  display: flex;
}

@media (max-width: 480px) {
  .clanek-seznam-clanek {
    flex-direction: column;
  }
}

.clanek-seznam-obrazek {
  flex: 0 0 0;
  flex-basis: 160px;
  padding: 0 20px 0 0;
}

.clanek-seznam-obrazek img {
  max-width: 100%;
  vertical-align: middle;
}

.clanek-seznam-obsah {
  flex: 1 1 auto;
  padding: 0 0 20px 0;
}

.clanek-seznam-nazev {
  font-size: 20px;
  font-weight: bold;
}

.clanek-seznam-popis {
  padding: 5px 0 5px 0;
}

.clanek-seznam-odkaz {
  display: block;  
}

/*********************************************************************************
 * Kosik a objednavka
 ********************************************************************************/

/** dialog kosiku */

.kosik-pridano {
  background: #edf7ea url('https://www.nixa.cz/obrazky/svg/check-success.svg') no-repeat 8px 8px;
  background-size: 24px 24px;
  border-radius: var(--rounded);
  color: var(--color-success);
  margin-bottom: var(--spacing);
  padding: 8px var(--spacing) 8px 40px;
}

.kosik-pridano-zbozi {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  position: relative;
}

.kosik-pridano-obrazek {
  margin: var(--spacing) 0 0 0;
  max-height: 200px;
  max-width: 100%;
  order: 1;
}

.kosik-pridano-zbozi .nazev {
  font-size: var(--text-lg);
  font-weight: bold;
  line-height: var(--line-md);
  order: 0;
}

#kosik-koupit-tlacitka {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-top: var(--spacing);
}

#kosik-koupit-zpet,
#kosik-koupit-kosik {
  color: var(--color-white);
  flex: 0 0 auto;
  line-height: 1em;
  padding: var(--spacing-sm) var(--spacing-md);
}

#kosik-koupit-zpet {
  background: url('https://www.nixa.cz/obrazky/svg/chevron-left.svg') no-repeat 8px center;
  background-size: 24px 24px;
  color: var(--color-darkgray);
  margin-right: var(--spacing-sm);
  padding-left: 40px;
}

#kosik-koupit-zpet:hover {
  color: var(--color-dark);
}

/** zahlavi kosiku */

.kosik-zahlavi {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  padding: var(--spacing-xs) 0;
}

.kosik-krok {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  font-size: var(--text-lg);
  justify-content: space-between;
  max-width: fit-content;
}

.kosik-krok::after {
  background: url('https://www.nixa.cz/obrazky/svg/chevron-right.svg') no-repeat center center;
  background-size: 24px 24px !important;
  content: " ";
  display: none;
  flex: 0 0 auto;
  height: 2rem;
  width: 2rem;
}

@media (min-width: 25rem) {
  .kosik-krok::after {
    display: inline-block;
  }
}

@media (min-width: 38rem) {
  .kosik-krok::after {
    width: 4rem;
  }
}

.kosik-krok:last-child::after {
  display: none;
}

.kosik-krok .cislo {
  background-color: var(--color-darkgray);
  border-radius: 100%;
  color: var(--color-white);
  flex: 0 0 2rem;
  font-weight: bold;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  width: 2rem;
}

.kosik-krok .polozka {
  color: var(--color-darkgray);
  flex: 1 1 auto;
  font-weight: bold;
  padding: 0 var(--spacing-px) 0 var(--spacing-px-half);
}

@media (min-width: 25rem) {
  .kosik-krok .polozka {
    padding: 0 0 0 var(--spacing-px);
  }
}

@media (min-width: 33.75rem) {
  .kosik-krok .polozka {
    padding: 0 0 0 var(--spacing-sm);
  }
}

.kosik-krok-aktivni .cislo {
  background-color: var(--color-secondary);
}

.kosik-krok-aktivni .polozka {
  color: var(--color-dark);
}

/** prehled kosiku */

.kosik-benefity,
.kosik-darky,
.kosik-obsah-vypis {
  margin-top: var(--spacing-lg);
}

.kosik-benefity-vypis {
  margin-top: var(--spacing);
}

.kosik-benefity-vypis .vypis,
.kosik-darky .vypis,
.kosik-obsah-vypis .vypis {
  border-collapse: separate;
  border-spacing: 0;
}

.kosik-benefity-vypis .vypis thead th,
.kosik-darky .vypis thead th,
.kosik-obsah-vypis .vypis thead th {
  background-color: var(--color-light);
  color: var(--color-dark);
  font-size: var(--text-sm);
  font-weight: bold;
  line-height: var(--line-xs);
  padding: var(--spacing-px) var(--spacing-xs);
}

.kosik-benefity-vypis .vypis thead th,
.kosik-darky .vypis thead th {
  font-size: var(--text-base);
}

.kosik-benefity-vypis .vypis thead th:first-child,
.kosik-darky .vypis thead th:first-child,
.kosik-obsah-vypis .vypis thead th:first-child {
  border-top-left-radius: var(--rounded);
}

.kosik-benefity-vypis .vypis thead th:last-child,
.kosik-darky .vypis thead th:last-child,
.kosik-obsah-vypis .vypis thead th:last-child {
  border-top-right-radius: var(--rounded);
}

.kosik-benefity-vypis .vypis tbody tr,
.kosik-benefity-vypis .vypis tbody tr:hover,
.kosik-darky .vypis tbody tr,
.kosik-darky .vypis tbody tr:hover,
.kosik-obsah-vypis .vypis tbody tr,
.kosik-obsah-vypis .vypis tbody tr:hover {
  background: none;
}

.kosik-benefity-vypis .vypis tbody td,
.kosik-darky .vypis tbody td,
.kosik-obsah-vypis .vypis tbody td {
  border-bottom: 1px solid var(--color-lightgray);
  border-top: 0;
}

.kosik-obsah-vypis .vypis tbody .tdDiv {
  padding: 1.5rem 0.25rem;
  white-space: nowrap;
}

.kosik-darky .vypis tbody .tdDiv {
  padding: 0.5rem 0.25rem;
}

.kosik-vypis-obrazek {
  max-width: 80px;
}

.kosik-vypis-odkaz {
  color: var(--color-primary);
  display: inline-block;
  font-size: var(--text-md);
  min-width: 12rem;
  white-space: normal;
}

.kosik-mnozstvi-obsah {
  display: block;
  position: relative;
}

.kosik-mnozstvi {
  /* @include .tbox */
  padding: var(--spacing-xs) 2.5rem var(--spacing-xs) var(--spacing-px);
  width: 5rem;
}

.kosik-mnozstvi-chyba {
  color: var(--color-error);
  font-style: italic;
  white-space: normal;
}

.kosik-nabidka-skoly {
  color: var(--color-primary-dark);
  font-style: italic;
  white-space: normal;
}

.kosik-vypis-cena {
  display: inline-block;
  font-size: var(--text-md);
  font-weight: bold;
  vertical-align: middle;
}

.kosik-benefit-pridat,
.kosik-benefit-smazat {
  background-color: var(--color-gray);
  border-radius: var(--rounded);
  color: var(--color-black);
  display: inline-block;
  line-height: 1em;
  padding: var(--spacing-xs) var(--spacing);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

.kosik-benefit-pridat:hover,
.kosik-slevovy-kod-smazat:hover,
.kosik-benefit-smazat:hover,
.kosik-smazat:hover {
  background-color: var(--color-error);
  color: var(--color-white);
}

.kosik-benefit-pridat:focus-visible,
.kosik-slevovy-kod-smazat:focus-visible,
.kosik-benefit-smazat:focus-visible,
.kosik-smazat:focus-visible {
  background-color: var(--color-error);
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-error);
  color: var(--color-white);
  outline: 0;
}

.kosik-benefit-pridat:hover {
  background-color: var(--color-success);
}

.kosik-benefit-pridat:focus-visible {
  background-color: var(--color-error);
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-success);
}

.kosik-slevovy-kod-smazat,
.kosik-benefit-smazat-krizek,
.kosik-smazat {
  background-color: var(--color-gray);
  border-radius: 100%;
  color: var(--color-white);
  display: inline-block;
  font-weight: bold;
  height: 1.3rem;
  line-height: 1.15rem;
  margin-left: 5px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  width: 1.3rem;
}

.kosik-darek-vyber .rbox {
  margin: 0;
}

.kosik-darek-vyber label {
  display: none;
}

.kosik-benefit-nazev-obrazek,
.kosik-darek-nazev-obrazek {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

.kosik-benefit-obrazek,
.kosik-darek-obrazek {
  align-items: center;
  display: flex;
  flex: 0 0 80px;
  justify-content: center;
  margin-right: var(--spacing);
  position: relative;
  width: 80px;
}

.kosik-benefit-obrazek img,
.kosik-darek-obrazek img {
  max-height: 3rem;
  max-width: 100%;
}

.kosik-benefit-nazev,
.kosik-darek-nazev {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.kosik-darek-nazev > div {
  margin: var(--spacing-px) 0;
  width: 100%;
}

.kosik-darek-nazev > div label {
  padding: 0;
}

.kosik-darek-nazev > div span {
  display: block;
}

.kosik-darek-nazev > div .tarea {
  height: 5rem;
  max-width: 26rem;
  width: 100%;
}

.kosik-benefit-spravovat .b {
  margin-right: var(--spacing-px);
}

#kosik-benefit-spravovat {
  display: inline-block;
}

#kosik-zapati-celkem {
  font-size: var(--text-lg);
  line-height: var(--line-lg);
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-md);
  text-align: right;
}

#kosik-sleva {
  color: var(--color-secondary);
  display: inline-block;
  font-size: var(--text-lg);
  font-weight: bold;
  margin-left: .5em;
}

#kosik-celkem {
  display: inline-block;
  font-size: var(--text-xl);
  font-weight: bold;
  line-height: var(--line-xl);
  margin-left: .5em;
}

.kosik-slevovy-kod-zapati {
  margin: var(--spacing-lg) 0;
}

#kosik-slevovy-kod {
  margin-right: var(--spacing-px);
}

.kosik-slevy-nadpis {
  font-weight: bold; 
  margin-top: var(--spacing);
}

.kosik-sleva-kod {
  display: inline-block;
  font-style: italic;
  margin-right: var(--spacing);
}

.kosik-sleva-sleva {
  display: inline-block;
  font-weight: bold;  
  margin-right: var(--spacing);
}

.kosik-zapati {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.kosik-zapati a.tlacitko,
.kosik-zapati a.tlacitkoSvetle {
  padding: var(--spacing-sm) var(--spacing);
}

/** dialog darek */

.ui-dialog[aria-describedby="dialog_darek"] {
  width: 800px !important;
}

.kosik-darek-dialog {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kosik-darek-dialog-obrazek {
  padding-right: var(--spacing-sm);
  position: relative;
  text-align: center;
}

.kosik-darek-dialog-popis {
  padding-left: var(--spacing-sm);
}

@media (min-width: 35rem) {
  .kosik-darek-dialog {
    flex-flow: row nowrap;
  }
  
  .kosik-darek-dialog-obrazek {
    flex: 1 1 50%;
  }
  
  .kosik-darek-dialog-popis {
    flex: 1 1 50%;
  }
}

.kosik-darek-dialog-obrazek img {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

/** doprava a platba */

.kosik-obsah {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-lg);
}

@media (min-width: 55rem) {
  .kosik-obsah {
    align-items: flex-start;
    flex-direction: row;
  }
}

.kosik-vlevo {
  flex: 1 1 auto;
}

.kosik-vpravo {
  align-self: flex-end;
  flex: 1 1 auto;
  margin-bottom: var(--spacing-lg);
  max-width: 100%;
}

@media (min-width: 55rem) {
  .kosik-vpravo {
    align-self: flex-start;
    flex: 0 0 350px;
    margin-left: var(--spacing);
    max-width: 350px;
  }
}

.kosik-typ-platby,
.kosik-typ-dopravy {
  background: linear-gradient(90deg, var(--color-light) 3rem, var(--color-white) 3rem);
  border: 1px solid var(--color-gray);
  display: block;
  margin-bottom: -1px;
  padding: 0 0 0 3rem;
  position: relative;
}

.kosik-typ-platby .rbox,
.kosik-typ-dopravy .rbox {
  background-color: var(--color-white);
  border-radius: var(--rounded);
  border-width: 1px;
  inset: var(--spacing) auto auto 0.75rem;
  margin: 0;
  position: absolute;
}

.kosik-typ-platby .rbox:checked,
.kosik-typ-dopravy .rbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.kosik-typ-platby .rbox::after,
.kosik-typ-dopravy .rbox::after {
  content: initial;
  display: none;
}

.kosik-typ-platby .rbox::before,
.kosik-typ-dopravy .rbox::before {
  display: block;
}

.kosik-typ-platby label,
.kosik-typ-dopravy label {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-px);
  justify-content: flex-end;
  min-height: 3rem;
  padding: var(--spacing) var(--spacing) var(--spacing) 130px;
  position: relative;
}

.kosik-typ-platby .rbox:disabled ~ label,
.kosik-typ-dopravy .rbox:disabled ~ label {
  cursor: default;
}

.kosik-typ-platby .rbox:hover ~ label .kosik-platba-vyber-nazev,
.kosik-typ-platby label:hover .kosik-platba-vyber-nazev,
.kosik-typ-dopravy .rbox:hover ~ label .kosik-doprava-vyber-nazev,
.kosik-typ-dopravy label:hover .kosik-doprava-vyber-nazev {
  text-decoration: underline;
}

.kosik-typ-platby .rbox:checked ~ label .kosik-platba-vyber-nazev,
.kosik-typ-dopravy .rbox:checked ~ label .kosik-doprava-vyber-nazev {
  font-weight: bold;
}

.kosik-typ-platby .rbox:disabled ~ label img,
.kosik-typ-dopravy .rbox:disabled ~ label img {
  filter: grayscale(1);
  opacity: 0.5;
}

.kosik-platba-vyber-obrazek,
.kosik-doprava-vyber-obrazek {
  inset: var(--spacing) auto auto 0;
  position: absolute;
  text-align: center;
  width: 120px;
}

.kosik-platba-vyber-obrazek img,
.kosik-doprava-vyber-obrazek img {
  max-height: 1.75rem;
  max-width: 100px;
}

.kosik-platba-vyber-nazev,
.kosik-doprava-vyber-nazev {
  flex: 0 1 300px;
  padding: 2px 20px 0 0;
}

.kosik-platba-vyber-cena,
.kosik-typ-dopravy-cena {
  flex: 1 1 auto;
  text-align: right;
  width: max-content;
}

.kosik-typ-dopravy-datum-doruceni {
  flex: 0 0 205px;
  color: var(--color-darkgray);
}

.kosik-typ-dopravy-datum-doruceni-do {
  font-size: 13px;
  padding: 0 5px 0 0;
}

.kosik-typ-dopravy-nevyhovujici {
  color: var(--color-darkgray);
  flex: 1 1 100%;
  font-style: italic;
  width: 100%;
}

.kosik-pravy-panel {
  background-color: var(--color-light);
  border-radius: var(--rounded);
  padding: var(--spacing);
}

.objednavka-vypis > .objednavka-polozka:nth-child(even) {
  background-color: var(--color-light);
}

.objednavka-polozka,
.objednavka-doprava-polozka,
.objednavka-platba-polozka,
.objednavka-celkem-polozka,
.kosik-polozka,
.kosik-doprava-polozka,
.kosik-platba-polozka,
.kosik-celkem-polozka {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

.kosik-doprava-polozka,
.kosik-platba-polozka {
  border-top: 1px solid var(--color-gray);
  padding-top: var(--spacing-xs);
}

.kosik-celkem-polozka {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-bottom: none;
  border-top-left-radius: var(--rounded);
  border-top-right-radius: var(--rounded);
  margin: var(--spacing-md) 0 0;
  padding: var(--spacing-px) var(--spacing-px) 0;
}

.kosik-celkem-polozka ~ .kosik-celkem-polozka {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
  padding-top: 0;
}

.kosik-celkem-polozka:last-child {
  border-bottom: 1px solid var(--color-gray);
  border-bottom-left-radius: var(--rounded);
  border-bottom-right-radius: var(--rounded);
  padding-bottom: var(--spacing-px);
}

.kosik-obrazek {
  flex: 0 0 60px;
  margin-right: var(--spacing-px);
  position: relative;
  width: 60px;
}

.kosik-doprava-polozka .kosik-obrazek,
.kosik-platba-polozka .kosik-obrazek,
.kosik-celkem-polozka .kosik-obrazek {
  display: none;
}

.kosik-obrazek.je-obrazek {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  padding: 4px;
}

.kosik-obrazek img {
  display: block;
  max-height: 52px;
  max-width: 52px;
}

.kosik-nazev,
.kosik-doprava-nazev,
.kosik-platba-nazev,
.kosik-celkem-nazev {
  color: var(--color-darkgray);
  flex: 1 1 auto;
  font-size: var(--text-sm);
  line-height: var(--text-md);
}

.kosik-celkem-nazev {
  color: var(--color-dark);
}

.kosik-cena,
.kosik-doprava-cena,
.kosik-platba-cena,
.kosik-celkem-sleva,
.kosik-celkem-cena {
  flex: 0 0 80px;
  font-size: var(--text-sm);
  margin-left: var(--spacing-px);
  text-align: right;
  width: 80px;
}

.kosik-celkem-sleva,
.kosik-celkem-cena {
  flex: 0 0 120px;
  font-weight: bold;
  width: 120px;
}

.kosik-celkem-sleva {
  color: var(--color-secondary);
}

.kosik-celkem-cena {
  font-size: var(--text-base);
}

/** dodaci udaje */

.kosik-udaje-panel {
  margin-bottom: var(--spacing-sm);
  padding: 0 var(--spacing);
}

.kosik-fakturacni-zmenit,
.kosik-dodaci-zmenit {
  padding: var(--spacing-xs) var(--spacing);
  margin: 0 0 0 var(--spacing);
}

.kosik-fakturacni-vlastni-skryte,
.kosik-dodaci-vlastni-skryte {
  display: none;
}

.kosik-vyber-neskladem {
  margin: 0 0 var(--spacing) 0;
}

.kosik-vyber-neskladem .rbox {
  margin: 0 var(--spacing-sm) 0 0;
}

.kosik-vyber-neskladem > div.b {
  padding: 0;
}

.kosik-vyber-neskladem > div {
  padding: var(--spacing-xs) 0 0 0;
}

.kosik-souhlas-podminky {
  margin-bottom: var(--spacing-lg);
}

/** objednavka */

.objednavka-stav {
  font-size: var(--text-xl);
  font-weight: bold;
}

.objednavka-baliky {
  border: 1px solid var(--color-info);
  border-radius: var(--rounded);
  font-weight: normal;
  margin-top: var(--spacing);
  padding: var(--spacing);
}

.objednavka-baliky span,
.objednavka-baliky-balik {
  background-color: var(--color-light);
  border-radius: var(--rounded);
  display: inline-block;
  font-size: var(--text-md);
  margin: var(--spacing-px) var(--spacing) 0 0;
  padding: var(--spacing-sm) var(--spacing);
  width: fit-content;
}

.objednavka-baliky-balik {
  background: var(--color-light) url('https://www.nixa.cz/obrazky/svg/truck.svg') no-repeat 12px center;
  background-size: 24px 24px;
  color: var(--color-primary);
  font-weight: bold;
  padding-left: 48px;
}

.objednavka-zpusob {
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing);
  margin: var(--spacing-md) 0 var(--spacing-md)
}

.objednavka-zpusob > div {
  background-position: var(--spacing) center;
  background-repeat: no-repeat;
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  box-shadow: 0px 4px 10px -5px rgba(0,0,0,0.5);
  color: var(--color-darkgray);
  flex: 0 1 auto;
  font-size: var(--text-sm);
  margin: 0;
  max-width: 33%;
  min-width: var(--page-min-width);
  padding: var(--spacing-sm) var(--spacing) var(--spacing-sm) 80px;
}

.objednavka-zpusob span {
  color: var(--color-dark);
  display: block;
  font-size: var(--text-md);
}

.objednavka-zpusob-dopravy {
  background-image: url('https://www.nixa.cz/obrazky/zpusob-doprava.png');
}

.objednavka-zpusob-pobocka {
  background-image: url('https://www.nixa.cz/obrazky/zpusob-pobocka.png');
}

.objednavka-zpusob-platby {
  background-image: url('https://www.nixa.cz/obrazky/zpusob-platba.png');
}

.objednavka-adresy {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing);
  justify-content: space-between;
  margin: var(--spacing) 0;
}

.objednavka-adresa-fakturacni,
.objednavka-adresa-dodaci {
  border-radius: var(--rounded);
  border: 1px solid var(--color-light);
  flex: 1 1 auto;
  margin: 0;
  padding-bottom: var(--spacing);
}

.objednavka-adresa-fakturacni > div,
.objednavka-adresa-dodaci > div {
  padding: 0 var(--spacing);
}

.objednavka-produkty-nadpis {
  font-size: var(--text-xl);
  font-weight: normal;
}

.objednavka-obrazek {
  flex: 0 0 100px;
  margin-right: var(--spacing);
  position: relative;
  text-align: center;
  width: 100px;
}

.objednavka-obrazek img {
  display: inline-block;
  max-height: 96px;
  max-width: 96px;
  vertical-align: middle;
}

.objednavka-nazev,
.objednavka-doprava-nazev,
.objednavka-platba-nazev,
.objednavka-celkem-nazev {
  color: var(--color-dark);
  flex: 1 1 auto;
}

.objednavka-cena,
.objednavka-doprava-cena,
.objednavka-platba-cena,
.objednavka-celkem-cena,
.objednavka-celkem-sleva {
  flex: 0 0 120px;
  margin-left: var(--spacing-px);
  padding-right: 5px;
  text-align: right;
  width: 120px;
}

.objednavka-polozka,
.objednavka-doprava-polozka,
.objednavka-platba-polozka,
.objednavka-celkem-polozka {
  margin: 0;
  padding: var(--spacing-sm) 0;
}

.objednavka-celkem-polozka {
  border-top: 1px solid var(--color-dark);
  font-weight: bold;  
}

.objednavka-polozka .kosik-obrazek,
.objednavka-doprava-polozka .kosik-obrazek,
.objednavka-platba-polozka .kosik-obrazek,
.objednavka-celkem-polozka .kosik-obrazek {
  display: none;
}

/** dokonceni objednavky */

.objednavka-vytvorena {
  font-size: var(--text-md);
  line-height: var(--line-md);
}

.objednavka-vytvorena-cislo {
  background-color: var(--color-light);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  display: inline-block;
  font-weight: bold;
  margin: 0 0 0 var(--spacing-xs);
  padding: 2px var(--spacing-sm);
}

.objednavka-vytvorena-adresa {
  font-weight: bold;
}

.objednavka-platba {
  border: 1px solid var(--color-warning);
  border-radius: var(--rounded);
  margin: var(--spacing-xl) 0;
  padding-bottom: var(--spacing);
}

.objednavka-platba legend {
  background-color: var(--color-warning);
  color: var(--color-white);
  display: block;
}

.objednavka-platba > div {
  padding: 0 var(--spacing);
}

.objednavka-platba-typ {
  font-style: italic;
  margin-bottom: var(--spacing);
}

.objednavka-platba-typ:last-child {
  margin-bottom: 0;
}

.objednavka-platba-hodnota {
  font-weight: bold;
}

/** platba kartou */

#platba-kartou-tlacitko {
  background-image: url('https://www.nixa.cz/obrazky/svg/card-light.svg');
  background-position: 13px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  cursor: pointer;
  margin: 0 0 var(--spacing-px-half) var(--spacing);
  padding: var(--spacing-sm) var(--spacing) var(--spacing-sm) 48px;
}

#platba-kartou {
  display: none;
  height: 100%;
  inset: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-top);
}

#platba-kartou-pozadi {
  background-color: var(--color-black);
  height: 100%;
  inset: 0;
  opacity: 0.3;
  position: absolute;
  width: 100%;
  z-index: 1;
}

#platba-kartou-dialog {
  background: var(--color-white);
  border-radius: var(--rounded);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
  color: var(--color-dark);
  left: 50%;
  max-width: 90%;
  max-width: calc(100% - 2rem);
  min-width: 19rem;
  opacity: 1;
  padding: var(--spacing-md) var(--spacing-xl);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

#platba-kartou-dialog-obsah {
}

#platba-kartou-chyba {
  color: var(--color-error);
  display: none;
}

/** dopravci / typ dopravy */

.kosik-typ-dopravy-vybrat  {
  display: inline-block;
  margin-bottom: var(--spacing);
  margin-left: var(--spacing-px);
}

.kosik-typ-dopravy-vybrat a {
  background-color: var(--color-light);
  background-image: linear-gradient(180deg, var(--color-white) 0%, var(--color-lightgray) 70%);
  border-radius: var(--rounded);
  border: 1px solid var(--color-gray);
  color: var(--color-darkgray);
  display: inline-block;
  font-size: var(--text-sm);
  line-height: var(--line-base);
  margin-right: var(--spacing-px);  
  padding: var(--spacing-px-half) var(--spacing-sm);
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: color, box-shadow, border;
  transition-timing-function: var(--transition-timing-function);
  vertical-align: middle;
}

.kosik-typ-dopravy-vybrat a:hover {
  background-color: var(--color-lightgray);
  border-color: var(--color-darkgray);
  color: var(--color-dark);
}

.kosik-typ-dopravy-vybrat a:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray);
  outline: none;
}

.kosik-typ-dopravy-nazev {
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}

.kosik-typ-dopravy-pobocky {
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  display: block;
  height: 570px;
  margin: var(--spacing);
  max-width: auto;
  overflow: hidden;
  padding: 15px;
  position: relative;
}

#kosik-typ-dopravy-zasilkovna {
  box-shadow: none;
  position: static;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#kosik-typ-dopravy-dpd {
  padding-top: 0;
}

/*********************************************************************************
 * Clanek - tabulky
 ********************************************************************************/

.benefit-tabulka,
.darky-tabulka,
.platby-tabulka,
.dopravci-tabulka {
  text-align: center;
  width: auto;
}

.benefit-tabulka tr td,
.darky-tabulka tr td,
.platby-tabulka tr td,
.dopravci-tabulka tr td {
  padding: 0.5rem 0.25rem;
}

.benefit-tabulka-nazev-popis-obrazek,
.darky-tabulka-nazev-popis-obrazek {
  align-items: center;
  display: flex;
  justify-content: center;
}

.benefit-tabulka-obrazek,
.darky-tabulka-obrazek {
  flex: 0 0 160px;
  margin-right: var(--spacing);
}

.kosik-darek-dialog-obrazek img,
.benefit-tabulka-obrazek img,
.darky-tabulka-obrazek img {
  max-width: 100%;
  vertical-align: middle;
}

.benefit-tabulka-nazev-popis,
.darky-tabulka-nazev-popis {
  flex: 1 1 auto;
}

.benefit-tabulka-nazev,
.darky-tabulka-nazev {
  font-weight: bold;
}


/*********************************************************************************
 * Fulltext
 ********************************************************************************/

#fulltext-list {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--rounded);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  display: block;
  font-size: var(--text-sm);
  inset: 100% auto auto 50%;
  line-height: var(--line-sm);
  list-style: none;
  margin: 2px 0 0 -2rem;
  max-height: 50rem;
  min-width: var(--page-min-width);
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0 0 0.5rem 0;
  position: absolute;
  scrollbar-width: thin;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  width: 110%;
  width: calc(100% + 4rem);
  z-index: var(--z-overlay);
}

@media (min-width: 33.75rem) {
  #fulltext-list {
    margin-left: -4.5rem;
    width: calc(100% + 9rem);
  }  
}

@media (min-width: 55rem) {
  #fulltext-list {
    margin-left: 0;
    width: 40rem;
  }  
}

#fulltext-list::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
}

#fulltext-list::-webkit-scrollbar-thumb {
  background-color: var(--color-gray);
  border-radius: 8px;
}

#fulltext-list li {
  display: block;
  margin: 0;
  padding: 0;
}

#fulltext-list a {
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  text-decoration: none;
}

#fulltext-list a:hover {
  background-color: var(--color-light);
  color: var(--color-dark);
}

#fulltext-list li.fulltext-list-hledat {
  font-size: var(--text-base);
}

#fulltext-list li.fulltext-list-hledat span {
  font-weight: bold;
}

#fulltext-list li.fulltext-list-oddelovac {
  border: 1px solid var(--color-gray);
  margin: var(--spacing-px-half) 0;
}

#fulltext-list li.fulltext-list-produkt a {
  align-items: center;
  display: flex;
  height: 3.75rem;
  justify-content: space-between;
}

#fulltext-list li.fulltext-list-produkt .fulltext-list-obrazek {
  flex: 0 0 50px;
  margin-right: var(--spacing-px);
  text-align: center;
}

#fulltext-list li.fulltext-list-produkt img {
  border: 0;
  display: inline-block;
  margin: 0;
  max-height: 3.5rem;
  max-width: 50px;
  padding: 0;
  vertical-align: middle;
}

#fulltext-list li.fulltext-list-produkt .fulltext-list-odkaz {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@supports (display: -webkit-box) {
  #fulltext-list li.fulltext-list-produkt .fulltext-list-odkaz {
    display: -webkit-box;
    line-height: normal;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

#fulltext-list li.fulltext-list-produkt .fulltext-list-forma {
  flex: 0 0 25px;
  margin-left: var(--spacing-px);
  text-align: right;
}

#fulltext-list li.fulltext-list-produkt .fulltext-list-cena {
  flex: 0 0 auto;
  font-weight: bold;
  margin-left: var(--spacing-px);
  text-align: right;
}

#hledani-vysledek {
  display: none;
}
ú
#hledani-nenasli {
  margin-top: var(--spacing);
  text-align: center;
}


/*********************************************************************************
 * Hide
 ********************************************************************************/

 #promenne,
 #dialogy {
   display: none;
 }


 /*********************************************************************************
 * Utility Classes
 ********************************************************************************/

.sedy { color: gray; }
.maly { font-size: 14px; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.skryte, .none { display: none; }
.block { display: block; }
.b { font-weight: bold; }
.i { font-style: italic; }
.paddT { padding-top: 10px; }
.paddB { padding-bottom: 10px; }
.paddL { padding-left: 10px; }
.paddR { padding-right: 10px; }
.margT { margin-top: 10px; }
.margB { margin-bottom: 10px; }
.margR { margin-right: 10px; }
.margL { margin-left: 10px; }
.tCenter { text-align: center; }
.tLeft { text-align: left; }
.tRight { text-align: right; }
.ui-datepicker { z-index: 9999 !important; }





/*********************************************************************************
 * Obezne - pouze admin
 ********************************************************************************/

.souborNacitany .souborObrazek {
  background: url('https://www.nixa.cz/obrazky/nacitani_postup.png') no-repeat center center;
  background-position: 0px 0px;
  float: left;
  height: 50px;
  margin: 5px;
  position: relative;
  width: 50px;
}

.souborNacitany.neAjax .souborObrazek {
  background: url('https://www.nixa.cz/obrazky/nacitani2.gif') no-repeat center left;
  width: 100px;
}

.souborNacitany .souborInformace,
.souborNahledy.nahledySloupec .souborNahled {
  float: left;
}

.souborNacitany .souborInformace,
.souborNahledy.nahledySloupec .souborNahled .souborInformace {
  height: 65px;
  margin: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 140px;
}

.souborNahledy.nahledySloupec .souborNahled .souborObrazek {
  height: 85px;
}

.souborNahledy.nahledyRadek .souborNahled {
  display: inline-block;
  padding: 10px 10px 10px 10px;
}

.souborNacitany .souborInformace span,
.souborNacitany .souborInformace a,
.souborNahled .souborInformace span,
.souborNahled .souborInformace a {
  display: block;
  font-size: 13px;
}

.souborNacitany .souborProcenta {
  font-size: 11px;
  left: 10px;
  position: absolute;
  top: 17px;
}

.souborNacitany.neAjax .souborProcenta {
  padding-left: 20px;
  position: static;
}

.souborUpload .souborNacitane,
.souborUpload .souborNahledy,
.souborUpload .souborDiv {
  clear: both;
}

.souborUpload label.tlacitkoSvetle {
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  margin: 0px 5px 5px 10px;
}

.souborUpload .souborObrazek img {
  max-height: 200px;
  max-width: 280px;
}

.dialog .souborUpload .souborObrazek img {
  max-width: 100%;
}

.strom-odsazeni-prvni {
  display: inline-block;
  padding: 0 0 0 5px;
}

.strom-odsazeni {
  display: inline-block;
}

a.strom-odsazeni:before {
  color: #333333;
  content: '└';
  display:inline-block;
  font-size: 12px;
  opacity: 0.7;
  padding: 0 5px 0 0;
  text-decoration: none;
}

.zobraz.plus {
  background: url('https://www.nixa.cz/obrazky/plus.gif') no-repeat left center;
  display: inline-block;
  padding-left: 15px;
}

.zobraz.minus {
  background: url('https://www.nixa.cz/obrazky/minus.gif') no-repeat left center;
  display: inline-block;
  padding-left: 15px;
}


/*********************************************************************************
 * Adresar - pouze admin
 ********************************************************************************/

a.adresarSlozka,
a.adresarSoubor {
  color: black;
  text-decoration: none;
}

.adresarPriponaSlozka {
  background: url('https://www.nixa.cz/obrazky/pripona_slozka.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaAudio {
  background: url('https://www.nixa.cz/obrazky/pripona_audio.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaVideo {
  background: url('https://www.nixa.cz/obrazky/pripona_video.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaObrazek {
  background: url('https://www.nixa.cz/obrazky/pripona_obrazek.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaSoubor {
  background: url('https://www.nixa.cz/obrazky/pripona_soubor.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaPdf {
  background: url('https://www.nixa.cz/obrazky/pripona_pdf.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaDoc {
  background: url('https://www.nixa.cz/obrazky/pripona_doc.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaDocx {
  background: url('https://www.nixa.cz/obrazky/pripona_docx.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaXls {
  background: url('https://www.nixa.cz/obrazky/pripona_xls.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaXlsx {
  background: url('https://www.nixa.cz/obrazky/pripona_xlsx.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaPpt {
  background: url('https://www.nixa.cz/obrazky/pripona_ppt.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaPptx {
  background: url('https://www.nixa.cz/obrazky/pripona_pptx.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaOdt {
  background: url('https://www.nixa.cz/obrazky/pripona_odt.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaEpub {
  background: url('https://www.nixa.cz/obrazky/pripona_epub.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaPrc {
  background: url('https://www.nixa.cz/obrazky/pripona_prc.gif') no-repeat left;
  padding-left: 25px;
}

.adresarPriponaMobi {
  background: url('https://www.nixa.cz/obrazky/pripona_mobi.gif') no-repeat left;
  padding-left: 25px;
}

.adresarNahled {
  border: 1px solid #ecf0f1;
  float: left;
  font-size: 12px;
  margin: 5px;
  overflow: hidden;
  padding: 5px;
  position: relative;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 110px;
}

.adresarNahled:hover {
  background: #ecf0f1;
}

.adresarNastroje {
  display: block;
  overflow: hidden;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 17px;
}

.adresarNastroje span,
.adresarNastroje a {
  display: block;
  padding-top: 2px;
}

.adresarNastroje span {
  padding-left: 2px;
}

.adresarObalka {
  display: inline-block;
  height: 80px;
  line-height: 80px;
  width: 80px;
}

.adresarObalka img {
  vertical-align: middle;
}

.adresarNazev {
  display: block;
  padding-top: 5px;
}


/*********************************************************************************
 * Sloupce - pouze admin
 ********************************************************************************/

.sloupec {
  float: left;
  overflow: hidden;
  padding: 2px 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sloupec .napul > span,
.sloupec .napulOdsazeno > span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
}

.sloupec .napul > span.none,
.sloupec .napulOdsazeno > span.none {
  display: none;
}

.sloupec .napul > span:first-child {
  line-height: 26px;
  text-align: right;
}

.sloupec .napul select,
.sloupec .napulOdsazeno select {
  width: 99%;
}

.sloupec .napulOdsazeno > span {
  line-height: 26px;
  padding: 2px;
  width: 47%;
}

.sloupec .napulOdsazeno > span:first-child {
  text-align: right;
  width: 51%;
}


/*********************************************************************************
 * Kalendar - pouze admin
 ********************************************************************************/

.kalendarDiv {
  margin: 10px 0px 10px 0px;
  text-align: center;
}

.kalendarAktualni,
.kalendarPredchozi,
.kalendarNasledujici {
  background: #f8f8f8;
  border: 1px solid #d7d7d7;
  color: #222;
  display: inline-block;
  font-weight: bold;
  height: 33px;
  line-height: 33px;
  padding: 0px 15px;
  text-decoration: none;
}

.kalendarPredchozi:hover,
.kalendarNasledujici:hover {
  background-color: #fff;
}

.kalendarPredchozi,
.kalendarNasledujici {
  background: #f8f8f8 url('https://www.nixa.cz/obrazky/vzad.png') no-repeat center center;
  padding: 0px;
  width: 33px;
}

.kalendarNasledujici {
  background: #f8f8f8 url('https://www.nixa.cz/obrazky/vpred.png') no-repeat center center;
}

.kalendarMesic {
  float: left;
  padding: 0% 0% 20px 3%;
  width: 30%;
}

.kalendarMesic .kalendarMesicNazev {
  font-weight: bold;
}


/*********************************************************************************
 * Dead Code
 ********************************************************************************/

#social {
  background: rgba(77, 86, 88, 0.2);
  border-radius: 4px;
  position: relative;
}

@media (max-width: 650px) {
  #social {
    text-align: center;
  }
}

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

.social-tlacitko {
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
  box-sizing: border-box;
  color: #4c83b9;
  display: inline-block;
  font-weight: bold;
  height: 48px;
  line-height: 48px;
  margin: 8px 8px;
  min-width: 165px;
  overflow: hidden;
  padding: 0 16px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.social-tlacitko:hover {
  opacity: 0.8;
}

#social .social-tlacitko.sdilet {
  background: #ffffff url('https://www.nixa.cz/obrazky/sdilet_maly.png') no-repeat 16px;
  background-size: 20px 20px;
  padding-left: 40px;
}

#social .vytisknout {
  background: #ffffff url('https://www.nixa.cz/obrazky/tisk_maly.png') no-repeat 16px;
  background-size: 20px 20px;
  padding-left: 40px;
}

#social .social-tlacitko.nahlasit {
  background: #ffffff url('https://www.nixa.cz/obrazky/nahlasit_maly.png') no-repeat 16px;
  background-size: 20px 20px;
  padding-left: 40px;
}

#social .facebook {
  background: url('https://www.nixa.cz/obrazky/fb.png') no-repeat left -1px;
  padding-left: 33px;
}

#social .twitter {
  background: url('https://www.nixa.cz/obrazky/twitter.png') no-repeat left -1px;
  padding-left: 33px;
}

#social .gplus {
  background: url('https://www.nixa.cz/obrazky/gplus.png') no-repeat left -1px;
  padding-left: 33px;
}

#social .email,
#social .skryte_mSocial_sdilet .email {
  background: url('https://www.nixa.cz/obrazky/email.png') no-repeat left -1px;
  margin: 5px 7px 1px 7px;
  padding-left: 33px;
}

#social .skryte_mSocial_sdilet {
  background: white;
  border: 1px solid black;
  border-radius: 4px;
  bottom: 56px;
  left: 8px;
  opacity: 0.93;
  position: absolute;
  text-align: left;
  z-index: 2;
}

#social .skryte_mSocial_sdilet a {
  display: block;
  height: 25px;
  margin: 5px 7px;
}

.vypis-kategories {
  margin: 0px;
  background: rgba(77,86,88, 0.2);
  border-radius: 4px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
}

.vypis-kategories.vypis-kategories-hledani {
  margin: 15px 0;
}

.vypis-kategorie {
  position: relative;
  height: 48px;
  line-height: 48px;
  margin: 8px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  background: #ffffff;
  border-radius: 4px;
  min-width: 147px;
  padding: 0px 10px;
  box-sizing: border-box;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
  text-align: center;
}

.vypis-kategorie-popis {
  margin-bottom: 24px;
}

.vypis-kategorie-obrazek {
  display: inline-block;
  text-align: center;
  padding: 0 5px;
  vertical-align: middle;
  line-height: normal;
}

.vypis-kategorie-obrazek .obrazek {
  max-width: 36px;
  max-height: 36px;
  border: 0;
}

.vypis-kategorie-nazev {
  display: inline-block;
  padding: 0 5px;
  color: #4c83b9;
}

.vypis-clanky {
  margin: 0px -12px;
}

.vypis-clanky-dalsi {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  background: #4c83b9;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
}

.vypis-clanky-dalsi-obal {
  text-align: center;
  margin-top: 15px
}

.vypis-clanek,
.vypis-hledane {
  width: 178px;
  height: 178px;
  margin: 12px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
  border-radius: 4px;
  color: #4D5658;
  text-decoration: none;
  padding: 24px 0px 0px 0px;
  box-sizing: border-box;
}

.vypis-clanek-obrazek,
.vypis-hledane-obrazek {
  padding: 0px 49px 18px 49px;
  height: 80px;
  line-height: 80px;
  display: block;
  text-align: center;
}

.vypis-clanek-obrazek .obrazek,
.vypis-hledane-obrazek .obrazek {
  padding: 0;
  margin: 0;
  border: 0;
  max-width: 80px;
  max-height: 80px;
  vertical-align: middle;
}

.vypis-clanek-nazev,
.vypis-hledane-nazev {
  display: block;
  text-align: center;
  font-weight: bold;
}

.vypis-hledane {
  margin: 0px;
}

.vypis-hledanes {
  margin: 10px 0 32px 0;
}

.vypis-hledane-nadpis,
.vypis-pridane-nadpis {
  font-size: 1.25rem;
  margin-bottom: 4px;  
}

.vypis-pridanes {
  margin: 0px -12px;
  text-align: center;
}

.vypis-pridane {
  width: calc(50% - 24px);
  height: 178px;
  line-height: 114px;
  margin: 12px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
  border-radius: 4px;
  color: #4D5658;
  text-decoration: none;
  padding: 32px 24px;
  box-sizing: border-box;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .vypis-pridane {
    width: calc(100% - 24px);
  }
}

@media (max-width: 400px) {
  .vypis-pridane {
    padding: 32px 16px;
  }
}

.vypis-pridane-obrazek {
  padding: 0px 8px 0px 0px;
  display: inline-block;
  text-align: center;
  width: 108px;
  box-sizing: border-box;
}

.vypis-pridane-obrazek .obrazek {
  padding: 0;
  margin: 0;
  border: 0;
  max-width: 100px;
  max-height: 100px;
  vertical-align: middle;
}

.vypis-pridane-nazev-pridano {
  display: inline-block;
  padding: 0px 0px 0px 8px;
  text-align: left;
  line-height: normal;
  vertical-align: middle;
  width: calc(100% - 108px);
  box-sizing: border-box;
}

.vypis-pridane-nazev {
  display: inline-block;
  font-weight: bold;
  margin-bottom: 8px;
}

.vypis-pridane-pridano {
  white-space: normal;
}

.vypis-clanek:hover,
.vypis-pridane:hover,
.vypis-hledane:hover,
.vypis-kategorie:hover {
  opacity: 0.8;
}