#lightMode {
    display: none; /* Na za��tku je sv�tl� re�im, tak schov�me tmav� */
}

#darkMode {
    display: block; /* Na za��tku je tmav� re�im neaktivn�, tak zobraz�me sv�tlou ikonu */
}

body {
	font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
	font-weight:300;
	color: var(--color-primary);
    display: block;
    line-height:1.6em;
}

.logo-text{
  width:300px;
  height:50px;
  float:left;
  
}

.logo-text-prim {
  float:left;
    font-size:18px;
}

.logo-text-sec {
   float:left;
    font-size:13px;
}

.mini-menu {
    margin-right:40px;
}

.search-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background-color: #2e3440;
    border: 1px solid #444c5e;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    transition: border 0.3s ease;
    height:35px;
}

.search-container:focus-within {
    border-color: #88c0d0;
}

.search-icon {
    width: 20px;
    height: 20px;
    fill: #d8dee9;
    margin-right: 8px;
    flex-shrink: 0;
}

.search-input {
    flex-grow: 1;
    background: transparent;
    border: none !important;
    outline: none;
    color: #eceff4;
    font-size: 16px;
}

.clear-icon {
    cursor: pointer;
    color: #d8dee9;
    font-size: 18px;
    margin-left: 8px;
    transition: color 0.3s;
}

.clear-icon:hover {
    color: #bf616a;
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #3b4252;
    border: 1px solid #4c566a;
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    display: none;
    animation: fadeIn 0.2s ease-in-out;
    font-weight:200;
    font-size:16px;
}

.search-suggestions li {
    padding: 10px 15px;
    color: #d8dee9;
    cursor: pointer;
    transition: background 0.2s;
}

.search-suggestions li:hover {
    background: #434c5e;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== Odd�lovac� ��ra v menu obor� */

.cara-menu {
  width: 60%; 
  margin: 30px auto 10px auto;
  border-top: 2px solid  #ffffff22;  
}

.popisek-menu {
  text-align: center;
  color: #6abf4b;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* ====== Odd�lovac� ��ra v menu obor� konec */

/* ====== Stranka rozestn�k obor� */

.discipliny {
width:200px;
float:right;
margin-left:50px;
margin-top:5px;
background-color: #0b76b3;
padding:7px;
border-radius: 8px;
}

.discipliny a {
color:white;

}

.free-zona {
width:200px;
float:right;
margin-left:50px;
margin-top:5px;
background-color: #357c5b;
padding:7px;
color:white;
border-radius: 8px;
}

.free-zona a {
color:white;

}

.zabava {
width:200px;
float:right;
margin-left:50px;
margin-top:5px;
background-color: #dbd538;
padding:7px;
color:rgb(10, 10, 10);
border-radius: 8px;
}

.zabava a {
color:white;

}

.discipliny-acc {
width:250px;
float:right;
margin-right:50px;
margin-left:100px;
margin-top:5px;
background-color: #0b76b3;
padding:7px;
border-radius: 8px;
}

.discipliny-acc a {
color:white;
}

.karta-vedy h3 a {
  color: var(--rozcestnik-odkaz-veda);
  text-decoration: none;
}

.karta-vedy h3 a:hover {
  text-decoration: underline;
}



.obory-seznam {
  margin-top: 10px;

  padding-bottom:15px;
}

.obory-seznam a {
  width:100%;
  background-color: #292929;
  border-radius: 5px;
  font-size: 13px;
  color: #ccc;
  text-decoration: none;
  transition: background 0.2s ease;
  padding: 3px 10px;
  margin-bottom:4px;
}

.obory-seznam a:hover {
  background-color: #444;
  color: #fff;
}


.rozcestnik-columns {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.aktivni {
  width:50%;
  padding:5px;
}

.aktivni a {
  width:100%;
  background-color: var(--rozcestnik-odkaz);
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-box-color);
  text-decoration: none;
  transition: background 0.2s ease;
  display:block;
  padding: 3px 10px;
  margin-bottom:4px;
}

.pripravuje-se {
  width:50%;
  padding:5px;
}

.pripravuje-se a {
  width:100%;
  background-color: var(--rozcestnik-odkaz);
  border-radius: 5px;
  font-size: 13px;
  color: #7a7979;
  text-decoration: none;
  transition: background 0.2s ease;
  display:block;
  padding: 3px 10px;
  margin-bottom:4px;
}

.vsechny-obory {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 40px 5%;
  background-color: var(--rozcestnik-pozadi);
}

.karta-vedy {
  background-color: var(--background-box);
  color: var(--color-primary);
  width: 500px;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
  border: 1px solid #2c2c2c;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.karta-vedy:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.karta-vedy h3 {
  color: var(--rozcestnik-odkaz-veda);
  font-size: 20px;
  margin-bottom: 10px;
}

.karta-vedy p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.mini-portal-info {
  font-size: 13px;
  color: #aaaaaa;
  border-top: 1px solid #333;
  padding-top: 10px;
}

.karta-vedy-pristup {
  background-color: #1c1c1c;
  color: #f0f0f0;
  width: 700px;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
  border: 1px solid #2c2c2c;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  margin: 40px auto;   /* <-- tohle vycentruje */
}

.karta-vedy-pristup p {
 color: #f0f0f0;
 }   

.ea-intro-center {
  color: #f0f0f0;
  width: 700px;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
  border: 1px solid #2c2c2c;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  margin: 40px auto;   /* <-- tohle vycentruje */
}

.ea-layout {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
    margin-top: 40px;
    margin-bottom:160px;
}

/* aby se to na menších displejích zalomilo */
@media (max-width: 900px) {
    .ea-layout {
        flex-direction: column;
        align-items: center;
    }
}


/* ==== Konec rozcestn�ku */


/* ==== Pro v�echny podobory */

.field-note {
  color: #46c646;
  font-weight: bold;
  font-size: 0.9em;
  margin-left: 10px;
  padding-top:20px;
}

/* ==== Pro v�echny podobory  Konec*/


.avatar-top img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 50%;
}

.global-portal {
width:100%;
height:50px;
float:left;
position:fixed;
  background-color: var(--background-primary);
}

/* socialni ikony panel novy */
.dropbtn {
  width:20px !important;
  height:20px !important;
  display:flex;
  background-color: none;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
    border-radius: 50%;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: -20px;
    background-color: #f9f9f9;
    width: 200px;
    margin-top:15px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: inline-block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.ikona {
    width: 45px;
    float: left;
    margin: 5px;
    transition: background-color 0.3s ease;
    border-radius: 50%;
}

.ikona:hover {
    background-color: #ddd;
}



.dropbtn:hover {
    cursor: pointer;
}

.dropdown:hover .dropbtn {
    background-color: none;
}

.social {
width:50px;
float:left;
margin-top:7px;
}

.column {
width:33%;
float:left;
padding:20px;
padding-top:0;
}


/*======== Drobe�kov� navigace ========*/

/* Z�kladn� stylov�n� breadcrumb navigace */
.breadcrumb-nav {
    background-color: var(--background-primary);
    padding: 8px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-style: italic;
    overflow-x: auto; /* P�id� rolov�n� v p��pad� pot�eby na men��ch obrazovk�ch */
}

.breadcrumb {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    margin: 0;
    padding: 0;
    white-space: nowrap; /* Zabra�uje zalamov�n� textu */
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 400;
    display: flex;
    align-items: center;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent; /* Zabr�n� klep�n� textu */
}

.breadcrumb li a:hover {
    color: #2c81ba;
    border-bottom: 2px solid #2c81ba;
}

.breadcrumb li i {
    margin-right: 8px;
    font-size: 18px;
}

.breadcrumb li.active {
    font-weight: 700;
    border-bottom: 2px solid #2c3e50; /* Podtr�en� aktivn� polo�ky */
}

.breadcrumb li::after {
    content: ">";
    margin-left: 10px;
    color: #7f8c8d;
}

.breadcrumb li:last-child::after {
    content: "";
}

/* Responzivn� stylov�n� */
@media (max-width: 768px) {
    .breadcrumb-nav {
        padding: 6px 10px;
        font-size: 1rem;
    }

    .breadcrumb li i {
        margin-right: 6px;
        font-size: 1.2rem;
    }

    .breadcrumb li::after {
        margin-left: 8px;
    }
}

@media (max-width: 480px) {
    .breadcrumb-nav {
        padding: 5px 8px;
        font-size: 0.9rem;
    }

    .breadcrumb {
        gap: 5px;
    }

    .breadcrumb li i {
        margin-right: 5px;
        font-size: 1.1rem;
    }

    .breadcrumb li a {
        padding-bottom: 1px;
    }

    .breadcrumb li::after {
        margin-left: 5px;
    }
}



/*======== Radkovo CotoJ�tka ========*/

/*======== Te�ky menu Fyzika (odstranim a� nebudou t�eba) ========*/

.red-dot {
    color: red;
    font-size: 30px;
    padding-right:10px;
}

.blue-dot {
    color: #17a1d4;
    font-size: 30px;
    padding-right:10px;
}


/*======== Te�ky menu Fyzika (odstranim a� nebudou t�eba) konec ========*/

/* T��da elementu kter� bude m�t n�pov�du */
.tip {
  border-bottom: 1px dotted black; /* Te�kovan� si ten elemen podtrhnem */
  line-height:1.2em;
}

/* Selekce! element (tag) span v prvku s t��dou tip */
.tip span {
  --sirka: 150px; /* Toto je d�le�it� prvek,
					nastavuje se j�m ���ka n�pov�dy. Nesm� se smazat.
				   	Pokud bude ���e deklarov�na klasicky pomoc� width,
					nebude n�pov�da vycentrov�na! */
  font: normal normal normal 1vw Sans-serif;
  bottom: 120%;
  left: 50%;
  background-color: transparent;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  border:1px solid;
  border-color:white;
  padding: 5px;
  transition: background-color 1s, width 2s;
}

/* Vytvo�� spodn� zob��ek na t� bublin� */
.tip span::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

/* Zobraz� n�pov�du */
.tip:hover span {

  background-color: #656464;
}

.content {
    float: left;
    margin-left: 350px;
    width: calc(100% - 350px);
    margin-top: 70px;
}

.content-portal {
margin-top:5px;
float:left;
width:100%;
}

.content-tutorial {
    float: left;
    margin-left: 350px;
    width: calc(100% - 350px);
    margin-top: 0px;
    background-color: #0f111a; 
}

* {
  box-sizing: border-box;

}

.bez-tecky {
list-style-type: none;
}

.znacka-img {
width:150px;
}

body.dark {
  --white-color: #333;
  --blue-color: #fff;
  --grey-color: #f2f2f2;
  --grey-color-light: #aaa;
}


/* navbar   p�vodn� */

.navbar-vyuka {  /* ano */
    background-color:var(--background-body-primary);
    padding: 15px 20px;
    position:fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
      
}

/* Styl pro naviga�n� menu */
.navbar-new-acc {
    background-color: var(--background-body-primary);
    padding: 10px 0;
    text-align: center;
    position:fixed;
    width: 100%;
    top: 70px;
    z-index: 999;
     border-bottom: 1px solid #ffffff22;
}

.navbar {
    background-color: var (--background-primary);
    padding: 15px 20px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar_content {   /* ano */
  float:right;
  align-items: center;
  column-gap: 25px;
}

.navbar-container {   /* ano */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ---------------  upln� nov� uspo��d�n� menu na uvodu portalu  -------  navbar */

/* Styl pro horn� box */
.top-bar-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-body-primary);
    color: var(--color-primary);
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-bar-left-new {
    flex: 1;
    display: flex;
    align-items: center;
}

.top-bar-left-new  {
    height: 40px;
    margin-right: 10px;
}

.top-bar-left-new  {
    font-size: 18px;
    font-weight: bold;
}

.logo-img-new {
width: 40px;
height: 40px;
margin-right: 10px;
}


/* Styl pro naviga�n� menu */
.navbar-new {
    background-color: var(--background-body-primary);
    padding: 10px 0;
    text-align: center;
    position: sticky;
    top: 60px;
    z-index: 999;
     border-bottom: 1px solid #ffffff22;
}




/* oprava */

/* Z�kladn� styl pro naviga�n� menu */
.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0;
    margin: 0;
}


/* �ipka se zobraz� pouze u polo�ek s podmenu */
.nav-links li:has(.submenu-new) > a:after {
    content: '\25BC'; /* Unicode pro dol� �ipku */
    float: right;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* Oto�en� �ipky nahoru p�i rozbalen� submenu-new */
.nav-links li.active > a:after {
    transform: rotate(180deg);
}


/* Rozbalovac� �ipka p�idan� pouze u polo�ek s submenu */
.nav-links li > .submenu-new {
    display: none; /* Zajist�, �e submenu je skryt� ve v�choz�m stavu */
}

.nav-links li > a:after {
    content: '';
}

.nav-links li {
    position: relative;
}

.nav-links li a {
    color: var(--color-primary);
    width:100%;
    display: block;
    text-decoration: none;
    font-size: 1rem;
    padding: 10px 15px;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 4px;
}

.nav-links li a:hover {
    background-color: #1abc9c;
    color: #fff;
}

/* Submenu */
.submenu {
    display: none;
    position: relative;
    background-color: #34495E;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Styl pro submenu-new (mobiln� verze) */
.submenu-new {
    width:270px;
    display: none;
    flex-direction: column;
    background: #2C3E50;
    padding-left: 20px;
    
    }

.submenu-new li {
list-style-type: none;
}



.nav-links li.active > .submenu-new {
    display: flex;
}

/* Rozbalovac� �ipka pro submenu-new */
.nav-links li > .submenu-new + a:after {
    content: '\25BC'; /* P�id�n� �ipky pouze u polo�ek s submenu */
    float: right;
    margin-left: 10px;
    transition: transform 0.3s ease;
    
}

.nav-links li.active > .submenu-new + a:after {
    transform: rotate(180deg); /* Oto�en� �ipky nahoru p�i rozbalen� submenu */
}

/* Mobiln� menu je standardn� skryt� */
.mobile-menu {
    display: none;
    position: relative;
    cursor: pointer;
    padding: 10px;
    background-color: #2C3E50;
    border-radius: 4px;
    text-align: center;
    width: 100%;
}

.mobile-menu:before {
    content: '\2630'; /* Unicode pro hamburger ikonu (t�i ��ry) */
    font-size: 24px;
    color: #ecf0f1;
}

/* Zav�rac� ikona pro mobiln� menu */
.mobile-menu.active:before {
    content: '\2715'; /* Unicode pro zav�rac� ikonu (k��ek) */
}

/* Styl pro naviga�n� menu na mobiln�ch za��zen�ch */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        background-color: #34495E ;
        position: relative;
        width: 100%;
        text-align: left;
        padding: 10px 0;
        z-index: 999;
        border-radius: 0 0 4px 4px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 0;
    }

    .nav-links li a {
        padding: 15px 20px;
        border-bottom: 1px solid #1abc9c;
        color: #ecf0f1;
        text-decoration: none;
        display: block;
        transition: background-color 0.3s ease;
    }

    .nav-links li a:hover {
        background-color: #1abc9c;
        color: #ffffff;
    }

    .mobile-menu {
        display: block; /* Zobraz hamburger menu na mal�ch obrazovk�ch */
    }
}

/* Styl pro submenu-new (pouze desktopov� verze) */
@media (min-width: 769px) {
    .submenu-new {
        position: absolute;
        top: 100%; /* Posunout pod hlavn� menu */
        left: -60px;
        display: none;
        background-color: var(--background-primary) ;
        padding: 10px 20px;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* P�id�n� st�nu pro zv�razn�n� */
        z-index: 1000; /* Aby bylo submenu nad ostatn�m obsahem */
    }

    .nav-links li {
        position: relative; /* Aby submenu bylo absolutn� um�st�no relativn� k jeho rodi�i */
    }

    .nav-links li.active > .submenu-new {
        display: block; /* Zobrazen� submenu p�i kliknut� */
    }
}

.acc-dash-menu {
margin-top:100px;
}


/* ---------------  upln� nov� uspo��d�n� menu na uvodu portalu  -------  konec */








/* --------------- Navbar konec  ------------------------- */

/* ===============================
P�id�no do sidebaru  dal�� urove� submenu 
================================ */

/* Z�kladn� styl pro uni-submenu */
.uni-submenu {
    display: none; /* Skryt� ve v�choz�m stavu */
    padding-left: 20px; /* M�rn� odsazen� pro hierarchii */
    list-style: none; /* Odstran�n� odr�ek */
}

.uni-submenu li {
    margin: 5px 0; /* Mezera mezi polo�kami */
    margin-bottom:8px;
   
}

/* Styl pro zobrazen� submenu p�i aktivaci */
.uni-submenu-active {
    display: block; /* Zobrazen� submenu */
}

/* Odsazen� pro uni-submenu */
.uni-submenu {
    padding-left: 20px; /* Nastav� odsazen� pro t�et� �rove� submenu */
    margin-left: 10px; /* P�id� mal� odsazen� vlevo */
    background-color: var(--jina-cerna); /* Sv�tlej�� pozad� pro lep�� odli�en� */
    border-radius: 5px;
}

/* Styl pro �ipku, aby byla zarovnan� a m�nila sm�r */
.nav_link .arrow-left {
    transition: transform 0.3s; /* Animace pro zm�nu sm�ru �ipky */
}

.nav_link .arrow-down {
    transform: rotate(90deg); /* Nato�� �ipku dol� p�i otev�en� */
    transition: transform 0.3s; /* Plynul� p�echod */
}

.nav_link i {
    margin-left: 5px; /* Odsazen� �ipky od textu */
}

ul.menu_items.uni-submenu > li:nth-child(1) > ul.menu_items.uni-submenu {
    background-color: var(--sub-menu); /* Nastaven� pozad� pro cel� submenu */
    padding-left:30px;
    padding-top:5px;
    padding-bottom:5px;
    border-radius: 3px; /* Zaoblen� roh� */
}


/* ===============================
Cel� lev� navigace sidebar za��tek 
================================ */

.sidebar {
  background-color: var(--background-body-primary);
  width: 350px;
  position: fixed;
  top: 70px;
  left:0;
  font-size:17px;
  height: 100%;
  z-index: 100;
  overflow-y: scroll;
  box-shadow: 0 0 1px var(--grey-color-light);
  transition: all 0.5s ease;
  float:left;
}

.sidebar.close {
  padding: 60px 0;
  width: 80px;
}

.sidebar::-webkit-scrollbar {
  display: none;
}
.menu_content {
  position: relative;
}

.menu_content-tutorial {
  position: relative;
  top:100px;
}

.menu-nadpis {
text-align:center;
}

.menu_title {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 16px;
}
.sidebar.close .menu_title {
  padding: 6px 30px;
}
.menu_title::before {
  color: var(--grey-color);
  white-space: nowrap;
}

.sidebar.close .menu_title::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 18px;
  border-radius: 12px;
  background: var(--grey-color-light);
}
.menu_items {
  padding: 0;
  list-style: none;
  margin-bottom:15px;
}
.navlink_icon {
  position: relative;
  font-size: 18px;
  min-width: 50px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}
.navlink_icon::before {
  content: "";
  position: absolute;
  height: 100%;
  width: calc(100% + 100px);
  left: -20px;
}
.navlink_icon:hover {
  background: var(--blue-color);
}
.sidebar .nav_link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 10px;

  border-radius: 8px;
  text-decoration: none;
  color: var(--grey-color);
  white-space: nowrap;
}

.sidebar.close .navlink {
  display: none;
}
.nav_link:hover {
  color: var(--white-color);
  background: var(--blue-color);
}
.sidebar.close .nav_link:hover {
  background: var(--white-color);
}
.submenu_item {
  cursor: pointer;
}
.submenu {
  display: none;
}

.submenu_item .arrow-left {
  position: absolute;
  right: 40px;
  display: inline-block;
  margin-left: auto;
  padding-right:20px;
  width:20px;
}

.show_submenu .arrow-left {
  transform: rotate(90deg);
}

.sidebar.close .submenu {
  display: none;
}
.show_submenu ~ .submenu {
  display: block;
}

.submenu .sublink {
  padding: 8px 15px 8px 52px;
}
.bottom_content {
  position: fixed;
  bottom: 0px;
  height:99px;
  left: 0;
  width: 350px;
  background-color: #141824;
  transition: all 0.5s ease;
    border-top: 1px solid #ffffff22; 
}
.bottom {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  justify-content: space-around;
  padding: 18px 0;
  text-align: center;
  width: 100%;
  color: var(--grey-color);
  border-top: 1px solid var(--grey-color-light);
  background-color:#2c3e50;
}
.bottom i {
  font-size: 20px;
}
.bottom span {
  font-size: 18px;
}
.sidebar.close .bottom_content {
  width: 50px;
  left: 15px;
}
.sidebar.close .bottom span {
  display: none;
}
.sidebar.hoverable .collapse_sidebar {
  display: none;
}
#sidebarOpen {
  display: none;
}
@media screen and (max-width: 768px) {
  #sidebarOpen
   {
    font-size: 25px;
    display: block;
    margin-right: 10px;
    cursor: pointer;
    color: var(--grey-color);
  }
  .sidebar.close {
    left: -100%;
  }
  .search_bar {
    display: none;
  }
  .sidebar.close .bottom_content {
    left: -100%;
  }
}

/* ===============================
Cel� lev� navigace sidebar KONEC 
================================ */


/* Styl pro cel� p�ep�na� jazyka */
.language-switcher {
width: 100px;
    float:left;
    position: relative;
    display: flex;
    font-family: Arial, sans-serif;
}

/* Styl pro tla��tko p�ep�na�e */
.switcher-button {
    background-color: #007bff;  /* Modr� pozad� */
    color: white;               /* B�l� p�smo */
    padding: 10px 20px;         /* V�t�� vnit�n� odsazen� */
    font-size: 16px;            /* Velikost p�sma */
    border: none;               /* Bez r�me�ku */
    cursor: pointer;            /* Ukazatel my�i */
    border-radius: 5px;         /* Zaoblen� rohy */
    display: flex;              /* Flexbox layout */
    align-items: center;        /* Vertik�ln� zarovn�n� obsahu */
}

/* Styl pro ikonu vlajky uvnit� tla��tka */
.flag-icon {
    width: 20px;                /* ���ka ikony */
    height: auto;               /* Automatick� v��ka */
    margin-right: 10px;         /* Odsazen� od textu */
}

/* Styl pro �ipku (caret) uvnit� tla��tka */
.caret {
    margin-left: auto;          /* Odsazen� vlevo */
    border-top: 5px solid white; /* B�l� �ipka sm�rem dol� */
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    display: inline-block;
    margin-left: 10px;
}

/* Obsah dropdownu (skryt� ve v�choz�m stavu) */
.switcher-content {
    display: none;              /* Skryt� obsah */
    position: absolute;         /* Absolutn� pozicov�n� */
    background-color: white;    /* B�l� pozad� */
    min-width: 200px;           /* Minim�ln� ���ka */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* St�n */
    z-index: 1;                 /* Vrstva z-index */
    border-radius: 5px;         /* Zaoblen� rohy */
    overflow: hidden;           /* Skr�t p�et�kaj�c� obsah */
}

/* Odkazy uvnit� dropdownu */
.switcher-content a {
    color: black;               /* �ern� p�smo */
    padding: 12px 16px;         /* Vnit�n� odsazen� */
    text-decoration: none;      /* Bez podtr�en� */
    display: flex;              /* Flexbox layout */
    align-items: center;        /* Vertik�ln� zarovn�n� obsahu */
    transition: background-color 0.3s ease; /* P�echod pro pozad� */
}

/* Hover efekt pro odkazy */
.switcher-content a:hover {
    background-color: #f1f1f1;  /* Sv�tl� �ed� pozad� p�i najet� my�� */
}

/* Zobraz� dropdown obsah p�i hover na tla��tko */
.language-switcher:hover .switcher-content {
    display: block;             /* Zobrazen� obsahu */
}

/* Zm�n� barvu tla��tka p�i hover */
.language-switcher:hover .switcher-button {
    background-color: #0056b3;  /* Tmav�� modr� */
}

/* Reagov�n� na mal� obrazovky */
@media (max-width: 600px) {
    .switcher-button {
        font-size: 14px;        /* Men�� p�smo */
        padding: 8px 16px;      /* Men�� vnit�n� odsazen� */
    }
    .switcher-content a {
        font-size: 14px;        /* Men�� p�smo uvnit� dropdownu */
    }
    .flag-icon {
        width: 16px;            /* Men�� ikony vlajek */
        margin-right: 8px;      /* Men�� odsazen� od textu */
    }
}

.obsah {
width:100%;
float:left;
margin-bottom:50px;
margin-top:50px;
}

.center-schem {
text-align:center;
font-size:30px;

}

.center {
    text-align: center; /* Zarovn� text na st�ed */
    margin-top: 20px; /* P�id� horn� okraj pro lep�� vzhled */
    font-weight: bold; /* Zv�razn� text tu�n�m p�smem (voliteln�) */
 
}

.volny-text {
margin-top:50px;
margin-bottom:50px;
}

a {
color:#2873c8;
text-decoration:none;
}

a:hover {
color:#00bfff;
}


.odkazy {
width:100%;
float:left;
margin-top:50px;
}



/*======== St�le se pou��v� v textech panel  podpora ========*/

.odkaz {   
  width:250px;
 text-align:left;
 font-size:20px;
 float:right; 
}

.odkaz a {
text-decoration:none;
text-align:center;
color:white;
font-weight:700;
 background:#1582bb;
 display:block;
   
}

.odkaz a:hover {
color:#0f93d7;
background:white;
}



/*======== Používá  se v tabulkách ========*/
td {
padding:10px;
text-align:center;
}

th {
padding:5px;
}
/*======== konec používá se v tabulkách ========*/

/*======== Zarovnání obrázků okolo textu ========*/

.img-right-text {
width:30%;
float:left;
padding:40px;
padding-left:0px;
}

/*======== Zarovnání obrázků okolo textu konec ========*/





/*========---------- Nov� baner styl   za��tek ----------========*/

.baner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.baner-postava {
    flex: 1 1 25%;
    max-width: 25%;
    margin-top: 10px;
}

.baner-postava img {
    width: 100%;
    height: auto;
    display: block;
}

.kontainer-baner-stred {
    flex: 1 1 45%;
    padding: 0 20px;
    text-align: center;
}

.baner-text {
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 5px;
}

.nadpis-temat {
    text-align: left;
    color: #1684c4;
    font-weight: bold;
    margin-bottom: 10px;
}

.baner-temat-nadpis h2 {
    font-size: 28px;
    color: #333;
}

.img-baner-vpravo {
    flex: 1 1 30%;
    max-width: 30%;
    margin-top: 70px;
    display: block;
}

.img-baner-vpravo img {
    width: 100%;
    height: auto;
    display: block;
}


/*========-----Nov� baner styl konec ----------========*/

/*========-----Obr�ceny baner styl za��tek ----------========*/


/* Z�kladn� stylov�n� pro desktop */
.img-baner-vlevo, .baner-postava-vpravo {
    width: 25%;
    float: left;
    text-align: center;
}

.img-baner-vlevo img, .baner-postava-vpravo img {
    max-width: 100%;
    height: auto;
}



.baner-text h3 {
    font-size: 24px;
    margin: 10px 0;
}

.baner-temat-nadpis h2 {
    font-size: 28px;
    color: #1684c4;
    margin-top: 10px;
}

/* Responzivn� �pravy pro tablety (768px - 1024px) */
@media (max-width: 1024px) {
    .img-baner-vlevo, .baner-postava-vpravo {
        width: 30%;
    }

    .kontainer-baner-stred {
        width: 40%;
        padding: 15px;
    }

    .baner-text h3 {
        font-size: 22px;
    }

    .baner-temat-nadpis h2 {
        font-size: 24px;
    }
}

/* Responzivn� �pravy pro mobily (a� 768px) */
@media (max-width: 768px) {
    .img-baner-vlevo, .baner-postava-vpravo, .kontainer-baner-stred {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }

    .kontainer-baner-stred {
        padding: 10px;
    }

    .baner-text h3 {
        font-size: 20px;
    }

    .baner-temat-nadpis h2 {
        font-size: 22px;
    }
}

/* �pravy pro velmi mal� obrazovky (a� 480px) */
@media (max-width: 480px) {
    .baner-text h3 {
        font-size: 18px;
    }

    .baner-temat-nadpis h2 {
        font-size: 20px;
    }
}

/* Responsivn� styl pro breakpoint od 320px do 480px */
/* Responsivn� styl pro breakpoint od 320px do 480px */
/* Responsivn� styl pro breakpoint od 320px do 480px */
@media (min-width: 320px) and (max-width: 480px) {
  .baner {
    padding: 10px; /* Lehk� sn�en� paddingu */
    width: 100%; /* Pln� ���ka pro lep�� vyu�it� prostoru */
  }

  .baner-postava {
    flex: 1 1 30%; /* �prava pro zachov�n� proporc� */
    max-width: 30%; /* Zaji�t�n�, �e se postava nep�ekr�v� */
    margin-top: 5px; /* Sn�en� margin pro lep�� uspo��d�n� */
  }

  .baner-postava img {
    width: 100%; /* Obr�zek se p�izp�sob� rodi�i */
    height: auto; /* Zachov�n� pom�ru stran */
  }

  .kontainer-baner-stred {
    flex: 1 1 40%; /* P�izp�soben� prostoru pro text */
    padding: 5px 10px; /* Men�� padding pro zaji�t�n� �itelnosti */
    text-align: center; /* Vycentrov�n� obsahu */
  }

  .baner-text {
    padding: 10px; /* Sn�en� padding pro lep�� �itelnost */
  }

  .nadpis-temat {
    font-size: 16px; /* Men�� velikost pro lep�� �itelnost na men�� obrazovce */
    margin-bottom: 8px; /* Sn�en� spodn� margin */
  }

  .baner-temat-nadpis h2 {
    font-size: 20px; /* Zmen�en� nadpisu pro lep�� p�ehlednost */
    color: #333;
  }

  .img-baner-vpravo {
    flex: 1 1 25%; /* Upraven� velikost pro spr�vn� zobrazen� */
    max-width: 25%; /* Zachov�n� proporc� */
    margin-top: 20px; /* �prava horn�ho okraje */
  }

  .img-baner-vpravo img {
    width: 100%; /* Obr�zek se p�izp�sob� ���ce kontejneru */
    height: auto; /* Zachov�n� pom�ru stran */
    display: block;
    margin: 0 auto; /* Vycentrov�n� obr�zku */
  }
}





/*========---------- Obr�ceny baner styl   konec ----------========*/

/*========---------- Funkce detail  a zv�t�ov�n� obr�zk�  za�atek----------========*/

/* Stylov�n� pro zv�t�en� obr�zek v mod�ln�m okn� */

.img-detail {
cursor: pointer;
}


/* Stylov�n� pro mod�ln� okno */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal-content {
    max-width: 80%;
    max-height: 80%;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.modal-content.zoomed {
    cursor: zoom-out;
    transform: scale(2); /* Dvojn�sobn� p�ibl�en� */
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

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

/* Stylov�n� pro popis pod obr�zkem */
.modal-description {
    color: #fff;
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
    max-width: 80%;
}

/* Stylov�n� pro informa�n� text */
.modal-info {
    color: #ccc;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}


/* Footer */
footer {
  width:100%;
  float:left;
    border-top: 1px solid #ffffff22; 
    text-align:center;
    padding-top:10px;
}

footer hr {
    border-color: #7f8c8d;
}



/* Footer konec */

/* toto je t�ida pro footer ve v�uce */
.vyuka {
width:100%;
float:right;
padding:20px;
margin-top:40px;
}

/* Footer v�uka konec */



/* Kontejner pro kv�z */
#quiz-container {
  max-width: 500px;
  background-color: #ffffff; /* B�l� pozad� pro kv�z */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* Nadpis kv�zu */
#quiz-container h2 {
  color: #333333;
  margin-bottom: 20px;
}

/* Mo�nosti odpov�d� */
#options button {
  display: inline-block;
  margin: 5px;
  padding: 10px 15px;
  border: none;
  background-color: #007bff; /* Modr� tla��tko */
  color: #ffffff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#options button:hover {
  background-color: #0056b3; /* Tmav�� modr� p�i najet� my�i */
}

/* Tla��tko pro dal�� ot�zku */
#next-button {
  display: none; /* Skryjeme, dokud nen� t�eba */
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  background-color: #28a745; /* Zelen� tla��tko */
  color: #ffffff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#next-button:hover {
  background-color: #218838; /* Tmav�� zelen� p�i najet� my�i */
}

/* Zp�tn� vazba */
#feedback {
  margin-top: 20px;
  font-size: 16px;
}

.language-switcher {
  position: relative;
  display: inline-block;
   top:5px;
}

.language-current {
  background-color: var(--background-primary);
 
  width: 25px;
  height: 25px;
  border: 1px solid ;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.language-menu {
  display: none;
  position: absolute;
  top: 45px; /* Posun dol�, aby bylo menu pod tla��tkem */
  left: -40px; /* Zarovn�n� menu na st�ed tla��tka */
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 100;
  width: max-content;
}

.language-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.language-menu ul li {
  padding: 5px 10px;
}

.language-menu ul li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
}

.flag-icon {
  width: 16px;
  height: 12px;
  margin-right: 5px;
}

/* Styl pro akordeonov� dropdown */
.acc-dropdown{
    position: relative;
    display: inline-block;
}

.acc-current{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.acc-menu{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 14px;
    border-radius: 16px;
    background: rgba(8, 14, 28, 0.98);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    box-sizing: border-box;
    z-index: 9999;
}

.acc-menu__header{
    padding: 4px 2px 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.acc-menu__eyebrow{
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255,255,255,0.58);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.acc-menu__name{
    display: block;
    font-size: 15px;
    line-height: 1.35;
    color: #fff;
    word-break: break-word;
}

.acc-menu__section + .acc-menu__section{
    margin-top: 8px;
}

.acc-menu__link{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: rgba(255,255,255,0.88);
    background: rgba(255,255,255,0.02);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    border: 1px solid rgba(255,255,255,0.04);
    box-sizing: border-box;
}

.acc-menu__link:hover{
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.acc-menu__link i{
    font-size: 17px;
    opacity: 0.86;
    flex: 0 0 auto;
}

.acc-menu__link span{
    display: block;
    line-height: 1.35;
}

.acc-menu__link--danger:hover{
    background: rgba(255,255,255,0.06);
}

.top-footer-podpora {
float:right;
margin-right:10%;
margin-left:400px;
}

.podpora-container {
padding:30px;
}


.mini-postava {
width:20%;
float:left;
}

.mini-postava img {
width:90%;
}


/* Logo v horn�m lev�m rohu */
.logo-header {
    position: fixed;
    top: 10px;
    left: 20px;
    display: flex;
    align-items: center;
    z-index: 10;
}

.header-logo {
    max-width: 40px;
    height: auto;
    margin-right: 10px; /* Odstup mezi logem a textem */
}

.logo-text {
    font-size: 20px; /* Velikost textu vedle loga */
    color: #ffffff; /* Barva textu, p��padn� uprav dle pozad� */
    font-weight: bold;
    margin-top:20px;
    margin-left:20px;
}


.login-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.left-acc {
    background-color: #004d80;
    color: #ffffff;
    width: 50%;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}

.left-acc .main-image {
    max-width: 150px; /* Nastaven� maxim�ln� ���ky obr�zku */
    margin-bottom: 20px;
    border-radius: 10px;
}

.left-acc h1 {
    font-size: 26px;
    margin-bottom: 15px;
}

.left-acc p {
    font-size: 16px;
    line-height: 1.5;
}

.right-acc {
    width: 50%;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 450px;
    margin: auto;
}

/* Tab styling */
.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f5f5f5;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 16px;
}

.tab-link.active {
    border-bottom: 2px solid #d9534f;
    color: #d9534f;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.right h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

label {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    display: block;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background-color: #d9534f;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

.form-group {
    position: relative;
    margin-top: 20px;
}

.form-group input {
    width: 100%;
    padding: 10px 5px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    background: none;
}

.form-group label {
    position: absolute;
    top: 40%;
    left: 10px;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s ease all;
    transform-origin: left top;
    transform: translateY(-50%);
}

.form-group input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}


/* T��da pro aktivn� stav popisku */
.form-group label.active {
    top: -1px;
    font-size: 0.75em;
    color: #333;
    opacity: 1;
    background-color: white;
    padding: 0 5px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-top: 15px;
    font-size: 0.9em;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 30px; /* Vzd�lenost mezi checkboxem a popiskem */
    transform: scale(1.2); /* Zv�razn�n� checkboxu */
}

.checkbox-container label {
    margin-left:  5px  ; /* Posun textu vedle checkboxu */
    margin-top: 5px;
}

/* ========== ��ry od�lova�e ===============*/

hr.stred { width: 50%; margin: 0 auto; border: none; border-bottom: 1px solid ; }
hr.left   { width: 40%; margin: 0;       border: none; border-bottom: 1px solid ; }
hr.left-vic   { width: 50%; margin: 0;       border: none; border-bottom: 1px solid ; }

/* ========== ��ry od�lova�e Konec===============*/

/* ========== Marginy ===============*/

.no-marg-bottom {
margin-bottom:0;
}

.no-marg-min-bottom {
margin-bottom:5px;
}

.no-marg-top {
margin-top:0;
}

.margin-top {
margin-top:20px !important;
}

.no-margin,
.null-marg {
margin:0;
}

/* ========== konec===============*/

/* ========== Barvy texty a nadpisy ===============*/

.white {
color:white;
}

.green {
color:#53b029;
}

.svetle-modra {
color: #40b8e4;
}

.svetle-cerv {
color: #e0593e;
}

.violet {
color: #b43ee0;
}


.zluta {
color: #d5c116;
}

.oranz-hneda {
color: #c17c2b;
}

.priprava-silver {
color: #7a7979 !important;
}

/* ========== Barvy bordery ===============*/
.border-orange {
border: 1px solid #e19338 !important;
}

.border-blue {
border: 1px solid #389fe1 !important;
}


.cara-menu-obory-submenu {
  width: 60%; 
  margin: 10px auto 10px auto;
  border-top: 2px solid  #ffffff22; 
}

.kurzor {
cursor:pointer;
}

/* ========== konec===============*/

/* ========== Velikosti nadpisů ===============*/

h1 {
 font-size: 2.5rem;
line-height:1.3em;
}

h2 {
font-size:30px;
line-height:1.3em;
}

h3 {
font-size:24px;
}

.h3 {
font-size:21px;
}

h4 {
font-size:19px;
}

h5 {
font-size:16px;
}

h6 {
font-size:14px;
}

/* ========== konec===============*/

/* ========== Velikosti písma textů ===============*/

.text-maly {
font-size:14px;
}

/* ========== konec===============*/

/* ========== Tlačitka (butony) = odkazy ===============*/

.btn-normal {
font-size:14px;
margin-top:10px;
}

/* ========== konec===============*/

/* ========== Ikony===============*/

.icon-check {
  font-size: 22px;
  vertical-align: middle;
  margin-right: 8px;
  margin-bottom:4px;
}

/* ========== konec===============*/


/* DŮLEŽITÉ: rodiče nesmí dropdown ořezávat */
.portal-topbar,
.portal-topbar__row,
.portal-topbar__actions,
.portal-topbar__right,
.portal-topbar__controls {
    overflow: visible !important;
}

/* wrapper */
.lang-switch {
    position: relative;
    display: inline-block;
}

/* tlačítko */
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* dropdown */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 260px;
    min-width: 260px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(8, 14, 28, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    z-index: 9999;
    box-sizing: border-box;
}

/* hidden atribut */
.lang-dropdown[hidden] {
    display: none !important;
}

/* položka */
.lang-item {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: default;
}

.lang-item span {
    display: block;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
}

.lang-item small {
    display: block;
    margin-top: 3px;
    opacity: 0.68;
    font-size: 11px;
    line-height: 1.35;
}

.lang-item.active {
    background: rgba(255, 255, 255, 0.05);
}

/* info část */
.lang-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.78;
}

/* info část pod novým to barem duležité */

.rozces-intro{
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px 0;
  padding-left: 150px;
  margin-top:30px;
}

.rozces-intro p{
  font-size:14px;
  margin:0px;
}

    .top-note{
      display:flex;
      align-items:center;
      gap:10px;
      color:#9adbbd;
      font-size:.83rem;
      letter-spacing:.04em;
      margin:0 0 10px;
      text-transform:uppercase;
    }

    .top-note i{
      font-size:1rem;
    }