@font-face { font-family: 'Anton'; src: url('../fonts/Anton-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Raleway'; src: url('../fonts/Raleway-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

:root {
  --cassiopeia-color-primary: #1f567c;
  --cassiopeia-color-hover: #1a4f75;
  --cassiopeia-color-link: #1C5E5A;
}

/* ==========================================================
   1. HORNÝ BIELY PÁS (TOPBAR) - STRIKTNÉ CENTROVANIE NA 1320px
   ========================================================== */
.container-topbar {
  background-color: #ffffff !important;
  color: #333333 !important;
  border-bottom: 1px solid #e5e5e5;
  width: 100% !important;
  height: 44px !important;       /* Fixná celková výška topbaru */
  padding: 0 !important;          /* Zrušíme zvislý padding, aby sa výška nezväčšovala */
  box-sizing: border-box !important;
}

.topbar-inner {
  max-width: 1320px !important;
  width: 100% !important;
  height: 100% !important;        /* Vyplní celých 44px */
  margin: 0 auto !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Vlajky vľavo - odstránenie predvoleného natiahnutého pozadia Cassiopeie */
.topbar-left {
  display: flex !important;
  align-items: center !important;
}

.topbar-left .mod-languages ul.lang-inline {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
}

.topbar-left .mod-languages ul.lang-inline li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.topbar-left .mod-languages ul.lang-inline li a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 4px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.topbar-left .mod-languages ul.lang-inline li.lang-active a {
  background-color: #f0f4f8 !important;
  border: 1px solid #c2d6e5 !important;
}

.topbar-left .mod-languages img {
  display: block !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Pravý stĺpec s IP adresou a návštevami */
.topbar-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: right;
  font-size: 0.85rem;
  line-height: 1.25;
}


/* ==========================================================
   2. TMAVOMODRÁ HLAVNÁ LIŠTA (HEADER) A STICKY SPRÁVANIE
   ========================================================== */
header.header,
.container-header {
  background-color: #1a4f75 !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;

  /* Presný posun o výšku topbaru */
  position: sticky !important;
  top: -44px !important;
  z-index: 1040 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Logo */
.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  height: 58px !important;
}

.site-logo img {
  max-height: 38px !important;
  width: auto !important;
  display: block !important;
}

/* Ikony Font Awesome v položkách */
.container-header .mod-menu [class*="fa-"] {
  font-size: 1rem !important;
  line-height: 1 !important;
}


/* ==========================================================
   3. DESKTOP NAVIGÁCIA A MEGAMENU (od 992px vyššie)
   ========================================================== */
@media (min-width: 992px) {

  /* Obal lišty - referenčný bod pre šírku Megamenu */
  .container-header .container-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 58px !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    position: relative !important; /* Dôležité pre centrovanie Megamenu */
  }

  /* KĽÚČOVÉ PRE MEGAMENU: Všetky medzistupne musia byť static */
  .container-header nav,
  .container-header nav.navbar,
  .container-header .navbar-collapse,
  .container-header .mod-menu,
  .container-header .mod-menu > li {
    position: static !important;
  }

  .container-header nav.navbar,
  .container-header .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Vodorovné menu v lište */
  .container-header .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 12px;
  }

  .container-header .mod-menu > li {
    display: inline-flex !important;
    align-items: center !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Odkazy a tlačidlá úrovne 1 - perfektné vertikálne centrovanie */
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button {
    font-size: 0.95rem !important;
    line-height: 1 !important;
    padding: 0 12px !important;
    height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    box-sizing: border-box !important;
    border: none !important;
    border-top: 3px solid transparent !important;
    border-bottom: 3px solid transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    background: transparent !important;
    transition: border-color 0.15s ease-in-out;
    margin: 0 !important;
  }

  /* Reset Bootstrap paddingu p-2 na Font Awesome ikonách */
  .container-header .mod-menu > li > a [class*="fa-"],
  .container-header .mod-menu > li > button [class*="fa-"] {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    margin-right: 4px !important;
    padding: 0 !important;
  }

  /* Šípka pri rozbaľovacom tlačidle */
  .container-header .mod-menu .mm-toggler::after {
    color: #ffffff !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
  }

  /* Hover a aktívny stav */
  .container-header .mod-menu > li.current > a,
  .container-header .mod-menu > li.active > a,
  .container-header .mod-menu > li.active > button,
  .container-header .mod-menu > li:hover > a,
  .container-header .mod-menu > li:hover > button {
    border-bottom: 3px solid #ffffff !important;
    border-top: 3px solid transparent !important;
    color: #ffffff !important;
    background: transparent !important;
  }

  /* --------------------------------------------------------
     MEGAMENU PANEL (Úroveň 1 -> Úroveň 2)
     -------------------------------------------------------- */
  .container-header .mod-menu li:has(.is-megamenu) > ul.mm-collapse {
    display: none;
    position: absolute !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #246a96 !important;
    border: none !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
    margin: 0 !important;
    padding: 2rem 1.5rem 2.5rem 1.5rem !important;
    gap: 2.5rem !important;
    align-items: start !important;
    box-sizing: border-box !important;
    z-index: 1050 !important;
    list-style: none !important;
  }

  /* Zobrazenie megamenu pri prechode myšou */
  .container-header .mod-menu li:has(.is-megamenu):hover > ul.mm-collapse {
    display: grid !important;
  }

  /* Nadpisy stĺpcov (Úroveň 2) */
  .container-header .mod-menu li:has(.is-megamenu) > ul > li {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .container-header .mod-menu li:has(.is-megamenu) > ul > li > a,
  .container-header .mod-menu li:has(.is-megamenu) > ul > li > button {
    color: #0d283c !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    padding: 0 0 0.8rem 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
    cursor: default !important;
    pointer-events: none;
  }

  .container-header .mod-menu li:has(.is-megamenu) > ul > li > button::after {
    display: none !important;
  }

  /* Odkazy v stĺpcoch (Úroveň 3) */
  .container-header .mod-menu li:has(.is-megamenu) > ul > li > ul {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 0.55rem !important;
  }

  .container-header .mod-menu li:has(.is-megamenu) > ul > li > ul a {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    height: auto !important;
    border: none !important;
    display: inline-block !important;
    white-space: normal !important;
    text-decoration: none !important;
    transition: opacity 0.15s ease-in-out;
  }

  .container-header .mod-menu li:has(.is-megamenu) > ul > li > ul a:hover {
    opacity: 0.6 !important;
  }

  /* Angry Bear: logo vľavo + 3 stĺpce */
  .container-header .mod-menu li:has(.menu-angry-bear):hover > ul.mm-collapse {
    grid-template-columns: 140px 1.1fr 1.2fr 1.6fr !important;
  }

  .container-header .mod-menu li:has(.menu-angry-bear) > ul.mm-collapse::before {
    content: "" !important;
    display: block !important;
    width: 130px;
    height: 155px;
    background-image: url("/images/angry-bear-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
  }

  /* Electronics: 3 stĺpce */
  .container-header .mod-menu li:has(.menu-elektronika):hover > ul.mm-collapse {
    grid-template-columns: 1.1fr 1.1fr 1.1fr !important;
  }

}
/* --- B) MOBILNÉ ROZBALENIE (do 991.98px) --- */
@media (max-width: 991.98px) {

  /* 1. Celá hlavička - prvky pod sebou (topbar hore, nav dole) */
  header.header,
  .container-header {
    position: sticky !important;
    top: -44px !important;           /* Pri posune odroluje 44px biely topbar */
    z-index: 1040 !important;
    display: flex !important;
    flex-direction: column !important; /* Topbar nad navbarom */
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* Topbar zostáva navrchu s výškou 44px */
  .container-topbar {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .topbar-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 1rem !important;
  }

  /* 2. Tmavomodrá navigačná lišta - KOTVA PRE ROZBALENÉ MENU */
  header.header .container-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    width: 100% !important;
    padding: 0 1rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background-color: #1a4f75 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;   /* KĽÚČOVÉ: Kotva pre rozbalené menu */
  }

  /* Logo */
  .site-logo {
    display: inline-flex !important;
    align-items: center !important;
    height: 54px !important;
    margin: 0 !important;
  }

  .site-logo img {
    max-height: 32px !important;
    width: auto !important;
    display: block !important;
  }

  /* 3. Tlačidlo hamburgera vycentrované vpravo */
  header.header nav.navbar {
    position: static !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 54px !important;
  }

  header.header .navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important;
    padding: 5px 8px !important;
    background: transparent !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  header.header .navbar-toggler .icon-menu {
    color: #ffffff !important;
    font-size: 1.4rem !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }

  /* 4. Rozbalený panel menu (JEDINÁ DEFINÍCIA) */
  header.header .navbar-collapse.collapse,
  header.header .navbar-collapse.collapsing {
    position: absolute !important;
    top: 100% !important;           /* Presne pod spodným okrajom container-nav */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18) !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 3px solid #1a4f75 !important;
    padding: 0.75rem 1.25rem 1.25rem 1.25rem !important;
    z-index: 1050 !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - 54px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Zrušenie desktopového obrázka medveďa na mobile */
  .container-header .mod-menu li:has(.menu-angry-bear) > ul::before {
    display: none !important;
    content: none !important;
  }

  /* 5. Štruktúra zoznamu menu */
  header.header .mod-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* ÚROVEŇ 1: Hlavné položky */
  header.header .mod-menu > li.level-1 {
    width: 100% !important;
    height: auto !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  header.header .mod-menu > li.level-1 > a,
  header.header .mod-menu > li.level-1 > button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Ikona aj text pekne spolu zľava */
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 6px !important;
    color: #212529 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Iba šípka rozbalenia skočí na pravý okraj riadka */
  header.header .mod-menu > li.level-1 > button::after {
    margin-left: auto !important;
    color: #666666 !important;
  }

  header.header .mod-menu > li.level-1.active > a,
  header.header .mod-menu > li.level-1 > a:hover {
    color: #1a4f75 !important;
  }

  /* ==========================================================
     VNOREborderNÉ HARMONIKOVÉ PODMENU (AKORDEÓN) PRE ÚROVNE 2 A 3
     ========================================================== */

  /* KĽÚČOVÉ: Zrušenie plávajúceho modálneho/dropdown správania */
  header.header .mod-menu ul.mm-collapse {
    position: static !important;      /* Už nevyskakuje nad menu, ale je priamo v toku zoznamu */
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-shadow: none !important;      /* Odstránenie tieňa plávajúceho okna */
    border: none !important;          /* Odstránenie rámika plávajúceho okna */
    background: transparent !important;
    list-style: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* --- ÚROVEŇ 2: Podkategórie (Projekt Angry Bear, Programovanie AVR, Úlohy) --- */
  header.header .mod-menu li.level-1 > ul.mm-collapse {
    padding: 0.25rem 0 0.5rem 1rem !important; /* Odsadenie celej úrovne 2 doprava */
    background-color: #f8fafc !important;      /* Veľmi jemné podfarbenie sekcie */
    border-left: 3px solid #1a4f75 !important; /* Elegantná zvislá vodiaca čiara vľavo */
  }

  header.header .mod-menu li.level-2 {
    width: 100% !important;
    border-top: 1px solid #edf2f7 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  header.header .mod-menu li.level-2:first-child {
    border-top: none !important;
  }

  header.header .mod-menu li.level-2 > a,
  header.header .mod-menu li.level-2 > button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 9px 6px !important;
    color: #1a4f75 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  /* Šípka úrovne 2 úplne vpravo */
  header.header .mod-menu li.level-2 > button::after {
    margin-left: auto !important;
    color: #1a4f75 !important;
  }

  /* --- ÚROVEŇ 3: Samotné lekcie a články --- */
  header.header .mod-menu li.level-2 > ul.mm-collapse {
    padding: 0.25rem 0 0.5rem 1.25rem !important; /* Ešte hlbšie odsadenie pre lekcie */
    background-color: #ffffff !important;
    border-left: 2px dashed #cbd5e1 !important;  /* Jemná prerušovaná vodiaca línia */
  }

  header.header .mod-menu li.level-3 {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  header.header .mod-menu li.level-3 a {
    display: block !important;
    width: 100% !important;
    padding: 7px 4px !important;
    color: #475569 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    transition: color 0.15s ease-in-out;
  }

  header.header .mod-menu li.level-3.current > a,
  header.header .mod-menu li.level-3 a:hover {
    color: #1a4f75 !important;
    font-weight: 700 !important;
  }

  /* Pevná šírka pre ikony, aby boli texty pod sebou v jednej línii */
  header.header .mod-menu [class*="fa-"] {
    width: 1.25rem !important;
    text-align: center !important;
    margin-right: 4px !important;
    color: #1a4f75 !important;
    flex-shrink: 0 !important;
  }
}

/* ==========================================================
   4. METADÁTA ČLÁNKU - JEDEN RIADOK S LOMKAMI
   ========================================================== */
.article-info,
dl.article-info {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-size: 0.9rem !important;
  color: #555555 !important;
  margin: 0.5rem 0 1.5rem 0 !important;
  padding: 0 !important;
}

.article-info dt,
.article-info .icon,
.article-info [class*="fa-"],
.article-info svg {
  display: none !important;
}

.article-info dd {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.article-info dd + dd::before {
  content: "/" !important;
  margin-right: 0.75rem !important;
  color: #888888 !important;
  font-weight: 300 !important;
}

.article-info dd.category-name a {
  color: inherit !important;
  text-decoration: none !important;
}

.article-info dd.category-name a:hover {
  text-decoration: underline !important;
}

/* ==========================================================
   5. ŠTÝL HLAVNÉHO NADPISU A TEXTOV ČLÁNKU
   ========================================================== */
.item-page h1,
.item-page h2,
.page-header h1,
.page-header h2 {
  font-family: 'Anton', sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  color: #212529 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.25rem !important;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

td,th {
    border: 1px solid black;
    padding: 5px;
    font-family: Arial;
}

td.noneborder {
    border: none;
}

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.button {
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 4px 2px;
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    transition-duration: 0.2s;
    border-radius: 7px;
    
}

.button.blue {
    background-color: #1f567c;
    border: 2px solid #1f567c;
    font-size: 1.1em;
}

.button.blue:hover {
    background-color: #ffffff;
    color: black;
    border: 2px solid #1f567c;
}

#sp-main-body {
    padding-top: 50px;
}

#sp-header.header-sticky{
    z-index: 98;    /* modal content has 99*/
}

.articleText {
    font-family: 'Raleway';
    font-size: 1.0em; /*1em=16px*/
    font-weight: normal;
    text-align: justify;
    /*line-height: 20px;*/
}

.mainSectionCaption {
    font-family: 'Anton';
    font-size: 1.7em; /*1em=16px*/
}

.subSectionCaption {
    font-family: 'Anton';
    font-size: 1.4em; /*1em=16px*/
    padding-top: 2rem;
    padding-bottom: 0.5rem;
}

.vzorec {
    display: block;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 200px;
}

a.link1 {
    /*font-family: Book Antiqua;*/
    text-decoration: underline;
    color: blue;
    font-size: 1.1em; /*1em=16px*/	
}

a.link1:visited {
	color: purple;
	text-decoration: underline;
}

a.link1:hover {
	background-color: darkblue;
	color:lightgray;
	text-decoration: none;
}

p.top {
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align:right;
}

.bbsmart-location {
    -webkit-box-flex: 1;
    flex-grow: 1;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    font-size: 0.9em;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    font-family: Tahoma,Arial,Verdana,Segoe,sans-serif;
}

.bbsmart-white-text {
    font-size: 0.8em;
    font-weight: 500;
    color: white;
}

.bbsmart-temperature {
    font-size: 1.4em;
    font-weight: 500;
    color: white;
    font-family: Tahoma,Arial,Verdana,Segoe,sans-serif;
    text-align: center;
}

.picture {
    /*max-width:60%; */
    display: block; 
    margin: 0 auto;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    padding-top: 5px;
    padding-bottom: 5px;
}
.picture:hover {opacity: 0.8;}

.schematic {
    max-width:90%; 
    display: block; 
    margin: 0 auto;
    border-radius: 5px;
    /*cursor: pointer;*/
    transition: 0.3s;
    padding-top: 5px;
    padding-bottom: 5px;
}


.pictureExercise {
    max-width:90%; 
    display: block; 
    margin: 0 auto;
}

img.register {
    width: 90%;
    max-width:1000px; 
    display: block; 
    margin: 0 auto;
}

.pictureExerciseSmall {
    max-width:70%; 
    display: block; 
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pictureCaption {
    font-family: Book Antiqua;
    font-size: 1em; /*1em=16px*/
    color: gray;
    display: block;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px;
}

figcaption {
    font-family: Book Antiqua;
    font-size: 1em; /*1em=16px*/
    color: gray;
    display: block;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px;
}

caption {
    font-family: Book Antiqua;
    font-size: 1.1em; /*1em=16px*/
    color: gray;
    display: table-caption;
    text-align: left;
    padding-top: 20px;
    caption-side: top;
}

.pictureTab {
    max-width:60%; 
    display: block; 
    margin: 0 auto;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    padding-top: 0px;
    padding-bottom: 5px;
}
.figureTab:hover {opacity: 0.8;}

.tabCaption {
    font-family: Book Antiqua;
    font-size: 1em; /*1em=16px*/
    color: gray;
    display: block;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 5px;
}

.code {
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-family: Consolas,monaco,monospace;
    background-color: lightgray;
    padding-left: 10px;
    font-size: 1.0em; /*1em=16px*/
    word-wrap: break-word;
}

.codeHighlight { /*pouziva sa na zvyraznenie kodu v texte*/
    font-family: Consolas,monaco,monospace;
    background-color: lightgray;
    font-size: 1.0em; /*1em=16px*/
}

span.txtConsolas{
    font-family: Consolas,monaco,monospace;
}

.codeNoBgrd {
    font-family: Consolas,monaco,monospace;
    font-size: 1.0em; /*1em=16px*/
}

.codeInText {
    font-family: Consolas,monaco,monospace;
    background-color: lightgray;
    font-size: 1.0em; /*1em=16px*/
}

.keyword {
    color: blue;
    font-family: Consolas,monaco,monospace;
    font-size: 1.0em;
}

.string {
    color: green;
    font-family: Consolas,monaco,monospace;
    font-size: 1.0em;
}

.const {
    color: purple;
    font-family: Consolas,monaco,monospace;
    font-size: 1.0em;
}

 .articleText .const {
    font-size: 1.2em;
}

.func {
    color: darkred;
    font-family: Consolas,monaco,monospace;
    font-size: 1.0em;
}

.comment {
    color: green;
    font-family: Consolas,monaco,monospace;
    font-size: 1.0em;
}

.commentPython {
    color: darkred;
    font-family: Consolas,monaco,monospace;
    font-size: 1.0em;
}

.tab {
    margin-left: 20px;
}

.tab2 {
    margin-left: 40px;
}

.tab3 {
    margin-left: 60px;
}

.tab4 {
    margin-left: 80px;
}

.italic{
    font-style: italic;
}

.styled-table {
    border-collapse: collapse;
    
    margin: 0 auto;
    font-size: 0.9rem;
    font-family: sans-serif;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
    background-color: #2970a3;
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 5px 10px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #2970a3;
}

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #c71f1f;
}

.reg-tab {
    border-collapse: collapse;
    margin: 0 auto;
    font-size: 0.9rem;
    font-family: sans-serif;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.reg-tab thead tr {
    background-color: #737373;
    color: #ffffff;
    text-align: center;
}

.reg-tab th,
.reg-tab td {
    padding: 5px 10px;
    text-align: center;
}

.reg-tab tbody tr {
    border-bottom: 1px solid #dddddd;
    font-weight: bold;
}

.reg-tab tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.reg-tab tbody tr:last-of-type {
    border-bottom: 2px solid #737373;
}

.reg-tab tbody tr.active-row {
    font-weight: bold;
    color: #c71f1f;
}

.center {
    text-align: center;
}

span.red {
    color: red;
    font-weight: bold;
}

span.blue {
    color: darkblue;
    font-weight: bold;
}

div.AdSense {
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2000 !important; /* Site on top */
  padding-top: 70px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  z-index: 2010 !important; /* Zabezpečí klikateľnosť krížika nad všetkým */
  cursor: pointer;
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 90%;
  height: 90%;
  object-fit: contain;
  /*max-width: 1000px;*/
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 90%;
  /*max-width: 1000px;*/
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 10px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
} 

.hero-banner {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 2.5rem auto;

  /* 1. Zaoblenie rohov */
  border-radius: 24px !important;
  
  /*-webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%);*/

  /* 2. Orezanie prečnievajúceho obsahu (kľúčové pre <div>) */
  overflow: hidden;

  /* 3. Oprava pre WebKit/Blink (niekedy počas animácie presvitajú rohy) */
  transform: translateZ(0);

  /* Animácia postupného zobrazenia */
  animation: fadeInEffect 1.2s ease-out forwards;
}

/* Definícia kľúčových snímok */
@keyframes fadeInEffect {
  from {
    opacity: 0;
    transform: translateY(10px); /* voliteľné: jemný posun zdola nahor */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}