html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

body {
  padding-top: 56px;
}

@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(-100%);
  }
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.nav-link.active{
  background-color: none;
  color: #343a40;
}

.text-white-50 { color: rgba(255, 255, 255, .5); }

.bg-purple { background-color: #6f42c1; }

.hlavne-menu{
  box-shadow: 5px 0px 10px rgb(0 0 0 / 50%);
    background-color: #126da1;
    height: 50px;
}

.hlavne-menu .nav-link{
  color: #f5f5f5 !important;
}

.hlavne-menu .nav-link a:hover{
  color: #b3dbff !important;
}

.prihlasit-odhlasit{
  background-color: #2a85cf;
  width: 120px;
  text-align: center;
  font-weight: 400;
  border-radius: 5px;
  padding: 5px;
}

.prihlasit-odhlasit:hover{
  background-color: #04458f;
}

.registracia-box .row{
  margin: 10px;
}

/* Štýly pre nadpis a navigáciu */
.main-skola-nadpis {
  /* Tu sú tvoje existujúce vlastnosti */
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #ebebeb;
  padding: 0px;
  margin: -7px;
  box-sizing: border-box; /* Pridané, aby sa padding nepripočítaval k celkovej šírke */

  /* Nové doplnené vlastnosti */
  position: fixed;
  top: 55px;
  left: 0;
  z-index: 500; /* Ak je potrebné, uprav hodnotu podľa potreby */
}
.main-skola-oddelenie {
  height: 50px; /* Výška prázdneho priestoru, prispôsob podľa potreby */
}

.main-skola-nadpis h2 {
  font-size: 20px;
  margin: 0;
  padding: 0;
  text-align: center; /* Zarovnanie textu na stred aj na mobilných zariadeniach */
}


/* Štýly pre navigačné odkazy */
.sub-navigacia {
  background-color: #fff;
  margin: 0px!important;
}

.sub-navigacia .nav-links {
  display: flex;
  gap: 0px!important;
  justify-content: left;
}

.sub-navigacia .nav-link {
  background-color: #189dc5;
  padding: 20px 15px;
  height: 60px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  transition: color 0.3s ease;
}

.sub-navigacia .nav-link:hover {
  background-color: #ffffff;
  color: #0451a3;
}

.sub-navigacia .nav-link.active {
  background-color: #ffffff;
  color: #0451a3;
}

.content{
  color: #2e2e2e;
  padding: 5px 5px;
}
.content h1{
  font-size: 35px;
  text-align: left;
  margin-top: 20px;
  color: #074892;
}
@media (max-width: 767px) {
  .content h1{
    font-size: 20px!important;
    margin-top: 10px!important;
  }

  .sub-navigacia .nav-link {
    background-color: #189dc5;
    font-size: 14px;
    padding: 5px 10px;
    height: 50px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 300;
    transition: color 0.3s ease;
  }
  .main-skola-oddelenie {
    height: 80px; 
  }

  .profil-skoly-oddelovac {
    height: 30px; 
  }
}

.content h2, .content h3, .content h4{
  color: #074892;
}

h2{
  font-size: 25px;
}

h3, h4{
  font-size: 20px;
}

@media (max-width: 576px) {
  .content h1 {
    font-size: 23px; /* Veľkosť písma pre small zariadenia */
  }

  .content h2, .content h3, .content h4{
    color: #074892;
  }
  
  h2{
    font-size: 20px;
  }
  
  h3, h4{
    font-size: 17px;
  }
}




.content h1 .nadpis-datum{
  font-size: 0.7em;
  color: #555;
  font-weight: 400;
}

.content .miesto-konania{
  font-size: 18px;
  color: #8e8e8e;
}

.content .miesto-konania-title{
  font-size: 0.8em;
}

.card-results{
  width: 100%;
  border: 1px solid #d7dfe3;
    border-radius: 4px;
    -webkit-box-shadow: 0px 5px 20px rgb(0 0 0 / 5%);
    box-shadow: 0px 5px 20px rgb(0 0 0 / 5%);
    color: #455a64;
}

.nav-pills .nav-link.active{
  background-color: transparent;
  color: #007bff;
  font-weight: 600;
  border-bottom-color: #77abe4;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-radius: 0rem;
}

.scroll-container {
  overflow-x: scroll; /* umožní horizontálne posúvanie */
  -webkit-overflow-scrolling: touch; /* prehladávač Safari pre plynulé posúvanie */
  width: 100%; /* nastaví šírku kontajnera na 100% obrazovky */
}

.table-jednotlivci,
.table-druzstva,
.table-stafeta,
.table-utok{
  font-size: 12px;
}

.table-jednotlivci .poradie,
.table-jednotlivci .sc,
.poradie,
.sc{
  padding: 5px 1px!important;
  text-align: center;
}

.table-jednotlivci .poradie,
.table-jednotlivci .lepsi,
.table-druzstva .poradie{
  font-size: 13px;
  font-weight: 700;
}
.table-jednotlivci .meno,
.table-druzstva .meno{
  font-size: 13px;
  font-weight: 700;
}

.table-jednotlivci .druzstvo{
  font-size: 11px;
  font-weight: 400;
}

.celkove-discipliny{
  font-size: 11px;
  font-weight: 400;
}

.celkove-discipliny strong{
  font-size: 12px;
  font-weight: 600;
}


.card {
  margin-bottom: 1.875rem;
  border: none;
  border-radius: 0;
  box-shadow: 0 10px 40px 0 rgb(62 57 107 / 7%), 0 2px 9px 0 rgb(62 57 107 / 6%);
}

.card-body .media .icon{
  display: block;
  width: 100%;
}
.card-body .media .media-body{
  display: block;
  width: 100%;
}
.card-body .media i{
  font-size: 45px;
}

.admin-menu-wrap{
  width: 100%;
  margin: 0;
  padding: 0;
}
.admin-menu-wrap .menu-item,
.admin-menu-wrap-f .menu-item {
  display: inline-block;
  margin: 0 0 10px 0;
  width: 100%;
  height: 100%;
  color: #343a40;
  background-color: #fff;
  border-radius: 5px;
  text-decoration: none;
  transition: box-shadow .2s;
  position: relative;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
}

.admin-menu-wrap .menu-item .image-menu-background,
.admin-menu-wrap-f .menu-item .image-menu-background {
  display: inline-block;
  width: 100%;
  height: 150px;
  color: #343a40;
  background-color: #fff;
  border-radius: 5px;
  padding: 2% 0%;
  text-decoration: none;
  transition: box-shadow .2s;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
  position: relative;
}

.admin-menu-wrap .menu-item .image-menu-background .cena,
.admin-menu-wrap-f .menu-item .image-menu-background .cena {
  text-align: center;
  padding: 0 5px;
  position: absolute;
  left: 15px;
  bottom: -15px;
}

@media (max-width: 767px) {
  .admin-menu-wrap .menu-item,
  .admin-menu-wrap-f .menu-item {
  }
}

.admin-menu-wrap .menu-item .name,
.admin-menu-wrap-f .menu-item .name {
  font-size: 18px;
  font-weight: 500;
  margin: 20px 0 0px 15px;
  display: flex;
  align-items: left;
  justify-content: left;
}

.admin-menu-wrap .menu-item .nazov-strediska,
.admin-menu-wrap-f .menu-item .nazov-strediska {
  font-size: 15px;
  font-weight: 350;
  margin: 5px 0 0px 15px;
  display: flex;
  align-items: left;
  justify-content: left;
}

.admin-menu-wrap .menu-item .region,
.admin-menu-wrap-f .menu-item .region {
  font-size: 12px;
  font-weight: 350;
  margin: 5px 0 0px 15px;
  color: #1e88e5;
}

.admin-menu-wrap .menu-item .info,
.admin-menu-wrap-f .menu-item .info  {
  font-size: 14px;
  margin: 0 0 16px 0;
  min-height: 2.2em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-menu-wrap .menu-item .button,
.admin-menu-wrap-f .menu-item .button {
  display: inline-block;
  line-height: 30px;
  padding: 0 15px !important;
  max-width: 100%;
  background-color: #2a85cf;
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  transition: background-color .2s;
  position: relative;
  left: 25%;
}

.admin-menu-wrap .menu-item .rezervuj,
.admin-menu-wrap-f .menu-item .rezervuj  {
  background-color: #04a748;
  text-align: center;
  padding: 0 8px!important;
  border-radius: 5px;
  color: #fff;
  font-weight: 650;
  font-size: 11px;
  transition: background-color .2s;
  position: relative;
  left: 0px!important;
}

.admin-menu-wrap .menu-item .rezervuj-none,
.admin-menu-wrap-f .menu-item .rezervuj-none {
  background-color: #c23409;
  text-align: center;
  padding: 0 3px!important;
  border-radius: 5px;
  color: #fff;
  font-weight: 650;
  font-size: 10px;
  transition: background-color .2s;
  position: relative;
  left: 0px!important;
}

.admin-menu-wrap .menu-item .button small{
  font-size: 11px;
}

.admin-menu-wrap .menu-item .otvorit {
  background-color: #1655dc;
}

#accordionZoznamStartoviek .accordion-item{
  margin: 3px 0;
}

.startovka .title,
.startovka h2{
  font-size: 16px;
  color: #d80d0d;
}

.check-box-nadpis{
  font-size: 18px;
  margin: 15px 0;
}

.startovka .miesto-konania{
  font-size: 15px;
  color: #6d6d6d;
}

.startovka .datum-konania{
  font-size: 15px;
  color: #236cd9;
  margin: 5px 0;
}

.startovka .posledne-miesta{
  font-size: 12px;
  color: #479c0a;
}


.startovka .otvorenie,
.startovka .uzavretie{
  max-width: 100%;
  background-color: #2879d6;
  text-align: right;
  font-size: 12px;
  color: #f7f7f7;
  object-fit: contain;
}

.startovka .poznamka{
  font-size: 13px;
  color: #696969;
  padding: 10px;
}

#accordionZoznamStartoviek .accordion-item .accordion-header button,
#accordionZoznamStartoviek .accordion-item .accordion-header button::after{
  background-color: #1d7add;
  color: #fff;
  font-weight: 500;
}


.main-header{
  width: 100%;
  text-align: center;
  margin-bottom: 5px;
}

.home-nazov-region{
  font-size: 20px;
  font-weight: 500;
  color: #5e97d8;
  margin: 0 0 0 5px;
}
.home-nazov-region a{
  color: #5e97d8;
  text-decoration: none;
}
.home-nazov-region a:hover{
  color: #4b4b4b;
}

.home-nazov-region .region{
  font-size: 30px;
  font-weight: 500;
}

.home-nazov-region .pocet a{
  margin-left: 0px;
  font-size: 14px;
  color: #4e4e4e;
  text-decoration: none;
}
.home-nazov-region .pocet a:hover{
  color: #1d5add;
  text-decoration: underline;
}

.vsetky-regiony{
  width: 100%;
  text-align: right;
}

.vsetky-regiony .btn {
  background-color: rgb(12, 161, 32);
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  border: none;
  font-weight: 300;
  display: inline-block;
  padding: 5px 10px;
  margin: 0 15px 0 0;
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s; /* Plynulá zmena farby */
}

/* Po prejdení myšou zmení farbu */
.vsetky-regiony .btn:hover {
  color: white; /* Zmena farby po najazdení myšou */
  background-color: rgb(7, 121, 22); /* Zmena pozadia po najazdení myšou */
}

@media (max-width: 767px) {
  /* .main-header{
    margin-top: 50px;
  } */

  .main-header .breadcrumb{
    font-size: 10px;
    margin: 0px;
  }

  .home-nazov-region{
    margin: 10px 0 0 5px;
  }

  .vsetky-regiony{
    text-align: center;
  }
  
}

.table-startovky-pridat-sportovcov .meno{
  min-width: 20%;
  vertical-align: middle;
  font-weight: 500;
  padding: 0 25px;
}
.table-startovky-pridat-sportovcov .nastavenia{
  text-align: center;
  width: 6%;
  font-size: 12px;
  font-weight: 500;
}
.table-startovky-pridat-sportovcov .nastavenia.stafeta{
  width: 8%;
}

.nadpis-vysledkova-listina{
  padding: 24px 0 0 30px;
  font-size: 22px;
  color: #3d4447;
}

.zapis-utoky input{
  margin: 3px 0;
}

.input-ligove{
  max-height: 10px!important;
}

.zapis-vysledkov-poznamka{
  margin: 25px 0 10px 15px;
  font-size: 13px;
}

.startovanie{
  width: 50%;
  margin: 15px 0;
}

.administrator-startovky,
.facebook{
  margin: 15px 0;
}

.startovky .form-control{
  margin: 5px 0;
}

.druzstvo-jednotlivec-platny{
  background-color: #b8fcd4;
  border-right: #cccccc solid 1px;
  text-align: center;
  font-weight: 400;
}

.druzstvo-jednotlivec-neplatny{
  background-color: #e0e0e0;
  border-right: #cccccc solid 1px;
  text-align: center;
  font-weight: 400;
}
.druzstvo-jednotlivec-platny:nth-child(3n), .druzstvo-jednotlivec-neplatny:nth-child(3n){
  border-bottom: #cccccc solid 1px;
}


@media print {
  
  html, head, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .hlavne-menu,
  .menu-startovky-tlac,
  .mobile-druzstva {
    display: none!important;
  }

  .content, .container{
    width: 100%!important;
    height: 90%;
    padding: 0px 0px;
    margin-bottom: 30px;
    position: absolute;
    top: 0;
    left: 5px;
    border: 0;
    }

    table{
      min-width: 100%!important;
    }
    thead, th{
      font-size: 11px!important;
      background-color: #afafaf;
    }

    th, td {
      break-inside: avoid;
    }

    .zapis-jednotlivca{
      padding: 10px 0;
    }

    .table-jednotlivci,
    tr, td, th{
      font-size: 13px!important;
      padding: 1px 5px!important;
      white-space: nowrap;
      border: #c0c0c0 solid 1px;
    }
  
    .print-jednotlivci-box tr{
      padding: 15px 0 0 0px;
    }

    .mobile-only {
      display: none!important;
    }

    .table-cell,
    .pc-druzstva {
      display: table-cell!important;
    }

    .print-visible {
      display: table-cell!important;
      display: block;
    }

    .p-3,
    .rounded,
    .shadow-sm{
      width: 100%;
      box-shadow:none!important;
    }

    .print-druzstva{
      font-size: 10px!important;
      margin: 0;
      padding: 0;
      border: 0;
    }

  
    .lepsi{
      font-size: 15px!important;
    }
}

@media (max-width: 767px) {
  .p-3 {
    padding: 5px !important;
  }
}


/* .table-startovka tr:nth-child(4n+1),
.table-startovka tr:nth-child(4n+2) {
  background-color: #ffffff; 
}

.table-startovka tr:nth-child(4n+3),
.table-startovka tr:nth-child(4n+4) {
  background-color: #f1f1f1; 
} */


.btn-orange {
  color: #fcfcfc;
  background-color: rgb(214, 124, 22);
}

.menu-vysledky{
  margin: 20px 0;
}

.vysledky-head{
  background-color: #1861d6;
  color: #eaeff5;
}

.liga-head{
  background-color: #e48d29;
  color: #ffffff;
}


.btn-vysledky, .btn-startovky{
  margin: 5px 2px;
}

.btn-extra-small {
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
}

.zapis-druzstva{
  padding: 3px;
  border-bottom: #b3b3b3 solid 1px;
}
.col-1{
  white-space: nowrap;
}
.zapis-druzstva .form-label{
  font-size: 11px;
  font-weight: 500;
  margin-bottom: -5px;
}
.zapis-druzstva .nazov-druzstva{
  font-size: 15px;
  font-weight: 700;
  color: #0a4fbf;
  padding: 10px 0 0 0;
}
.id-druzstva{
  font-size: 10px;
  font-weight: 400;
  color: #858585;
  padding: 0 0 11px 0;
  display: inline-block;
}

.zapis-druzstva .poznamka-druzstva,
.zapis-druzstva .poznamka-kategoria{
  font-size: 12px;
  font-weight: 400;
  color: #757575;
}
.zapis-druzstva .poznamka-druzstva .kategoria{
  font-size: 13px;
  font-weight:700;
  color: #ef0909;
}

.fast-navigation{
  background-color: #d75f09;
  font-size: 12px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  display: inline-block;
  text-align: center;
  vertical-align: middle; 
}

.fast-navigation div.col{
  padding: 15px 0;
  align-items : center;
  border-right: #974609 1px solid;
}

.fast-navigation a{
  color: rgb(255, 255, 255);
  text-decoration: none;
}

.fast-navigation a:hover{
  color: rgb(205, 226, 249);
}

.fast-navigation i{
  display: block;
  transform: scaleY(1.5,1);
}

.fast-navigation .euro{
  font-weight: 900;
}




.f-text{
  width: 100%;
}

.zakladne-udaje-boxes{
  background-color: #e6f2ff!important;
}

.datum-otvorenia-boxes{
  background-color: #3c8eec!important;
  color: #fdfdfd;
}

.datum-otvorenia-boxes h2{
  color: #fdfdfd;
}

.datum-otvorenia-boxes input[type="checkbox"]:checked{
  border-color: green; /* Change the border color */
  background-color: green; /* Change the background color */
}

.zakladne-udaje-boxes .row{
  margin: 10px 0px!important;
  padding: 0px;
}

.zakladne-udaje-boxes label{
  font-weight: 600;
}

.zakladne-udaje-boxes checkbox{
  margin-left: 10px;
}







.header-article-skola {
  width: 100%;
  height: 380px; /* Nastaví pevnú výšku hlavičky */
  position: relative;
  top: -10px;
  overflow: visible; /* Umožní presahujúci obsah */
  margin: 0;
  padding-top: -10px !important;
  text-align: center;
}

.header-article-skola::before {
  content: "";
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  min-height: 400px; /* Minimálna výška pozadia */
  z-index: -1;
}


@media (min-width: 1200px){
  .banner-box{
    text-align: right;
    max-width: 1140px;
  }

  .footer-kontakty{
    max-width: 1140px;
  }
}


.home-header-article-skola {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 280px!important; /* Výchozí výška */
}

/* Media query pro mobilní zařízení */
@media (max-width: 767px) {
  .home-header-article-skola {
    height: 190px!important; /* Výška pro mobilní zařízení */
  }
}

.home-banner-box{
  text-align: center;
}


.home-banner-box h1 {
  font-size: 55px;
  font-weight: 700;
  color: #ffffff;
  margin: 60px 0 20px 0;
  -webkit-text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.65);
  text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.33);
}

.home-banner-box .podnadpis{
  font-size: 23px;
  font-weight: 400;
  color: #ffffff;
  -webkit-text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.33);
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.33);
  margin-bottom: 30px;
}

.vyhladavac {
  max-width: 700px;
  background-color: #ffffff;
  border-radius: 5px;
  margin: 0 auto;
  padding: 5px; /* Přidání vnitřního odsazení */
}

.vyhladavac .flex-container {
  display: flex;
}

.vyhladavac .pole-hladaj {
  flex: 1;
  margin-right: 10px;
  border: 0px;
  font-size: 18px;
  color: #3b3b3b;
}

.vyhladavac .button-hladaj {
  flex: 0 0 auto;
  background-color: #2a85cf;
  padding: 0 25px;
  border: 1px solid #2a85cf;
}
#moznosti {
  width: 100%; /* Nastavení stejné šířky jako vyhledávací pole */
  /* Další styly pro datalist */
}

@media (max-width: 767px) {
  .home-banner-box h1 {
    font-size: 30px!important;
    font-weight: 500!important;
    margin: 30px 0 15px 0!important;
  }
  .home-banner-box .podnadpis{
    font-size: 12px!important;
    margin-bottom: 10px!important;
  }
  .vyhladavac {
    max-width: 90%!important;
    height: 35px!important;
  }

  .vyhladavac .pole-hladaj {
    flex: 1;
    margin-right: 0px!important;
    border: 0px;
    font-size: 13px!important;
    color: #3b3b3b;
    height: 25px!important;
    padding: 0px!important;
  }
  
  .vyhladavac .button-hladaj {
    flex: 0 0 auto;
    background-color: #2a85cf;
    padding: 0 5px!important;
    height: 25px!important;
    font-size: 13px!important;
  }
}

.banner-left{
  display: flex;
  align-items: flex-end;
}
.prevadzka-open{
  width: 250px;
  background-color: #04903e;
  padding: 2px 5px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
}
.prevadzka-neskor{
  width: 250px;
  background-color: #e68e1b;
  padding: 2px 5px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
}
.prevadzka-zatvorene{
  width: 250px;
  background-color: #df4242;
  padding: 2px 5px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
}

/* Štýly pre form pri šírke 1140px a viac */
@media (min-width: 1140px) {
  .rezervacia-form {
    background-color: #ffffff;
  text-align: center;
  width: 300px;
  min-height: 300px;
  padding: 0px 20px 15px 25px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 10px rgb(0 0 0 / 65%);
  box-shadow: 0px 5px 10px rgb(0 0 0 / 33%);
  position: absolute;
  top: 35px;
  left: 70%;
  transform: translateX(-50%);
  z-index: 2;
    width: 350px; /* Ponechá šírku 350px */
    margin-left: auto; /* Umiestni do pravého okraja */
    margin-right: 0; /* Zruší ľavý margin */
    float: none; /* Zruší float */
  }
}

/* Štýly pre form pri mobilných zariadeniach */
@media (max-width: 767px) {
  .rezervacia-form {
    background-color: #ffffff;
  text-align: center;
  min-height: 300px;
  padding: 0px 20px 15px 25px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 10px rgb(0 0 0 / 65%);
  box-shadow: 0px 5px 10px rgb(0 0 0 / 33%);
  position: absolute;
  top: 35px;
  transform: translateX(+5%);
  z-index: 2;

    width: 90%; /* Bude mať šírku 90% na mobilných zariadeniach */
    margin-left: auto; /* Umiestni do stredu */
    margin-right: auto; /* Umiestni do stredu */
    float: none; /* Zruší float */
  }
}

.rezervacia-form .row{
  margin-top: 22px;
}

.rezervacia-form h2{
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #074892;
  padding: 0px;
  margin: 0px;
}

.rezervacia-form h3{
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #3a3a3a;
  padding: 0px;
  margin: 15px 0 0 0px;
}

.rezervacia-form label{
  font-size: 13px;
  font-weight: 700;
  color: #101010;
}

.rezervacia-form select,
.rezervacia-form input{
  font-size: 14px;
  color: #101010;
}

.rezervacia-form .button {
  border: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  width: 80%;
  margin-top: 10px;
  position: relative;
  transition: 0.3s ease;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* pridávanie tieňa */
}

.rezervacia-form .button-ano {
  background-color: #04a748;
}

.rezervacia-form .button-nie {
  background-color: #b60000;
}

.rezervacia-form .button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background-color: rgba(0, 0, 0, 0.9); /* farba stmavenia */
  transition: 0.3s ease;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

.rezervacia-form .button:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.rezervacia-form .button:hover {
  color: #ffffff; /* farba textu po prejdení myšou */
  background-color: rgb(6, 129, 77);
}



.profil-skoly-info dt, .profil-kontakty dt{
  font-weight: 600;
  color: #074892;
  font-size: 16px;
}

.profil-skoly-info dd, 
.profil-kontakty dd, 
.otvaracie-hodiny{
  color: #383838;
  font-weight: 400;
  font-size: 14px;
}


.profil-skoly-cenniky h3{
  font-size: 15px;
  color: #393939;
  margin: 30px 0 10px 10px;
}

.profil-skoly-cenniky table{
  font-size: 14px;
}

.table-cenniky thead th {
  background-color: #1750ac;
  color: #ffffff;
}

.table-cenniky .lekcie {
  font-weight: 700;
}

.front-skola{
  /* margin-bottom: 15px; */
  display: flex;
  flex-direction: column;
}


.front-skola .row-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.front-skola .platba{
  font-size: 10px;
  color: #04a748;
  margin: 5px 0 0 15px;
}

.storno{
  font-size: 14px;
  color: #941212;
}

.rezervacia-udaje .udaje-lekcie{
  padding: 10px 0;
}
.rezervacia-udaje label{
  font-size: 14x;
  font-weight: 500;
  margin-top: 20px;
}

.rezervacia-udaje .cena{
  font-size: 40px;
  color: #1ba324;
  font-weight: 700;
}

.rezervacia-udaje .platba{
  font-size: 14px;
  color: #0a9a14;
  font-weight: 500;
}

.rezervacia-udaje .button-dokoncit{
  margin-top: 30px;
  width: 90%;
  text-align: center;
  background-color: #04903e;
  font-weight: 500;
  border: #05923f 1px solid;
}


.status-button {
  min-width: 90px;
  padding: 3px 6px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.status-button.new {
  background-color: #3498db;
  color: #fff;
}

.status-button.confirmed {
  background-color: #2ecc71;
  color: #fff;
}

.status-button.canceled {
  background-color: #e74c3c;
  color: #fff;
}

.status-button.processed {
  background-color: #f1c40f;
  color: #fff;
}

.status-button.completed {
  background-color: #9b59b6;
  color: #fff;
}



footer{
  width: 100%;
  background-color: #252525;
  color: #a5a5a5;
  text-align: center;
}

.footer-kontakty{
  color: #ffffff;
  margin: 0 auto;
  padding: 50px;
  text-align: left;
}

.footer-kontakty h5{
  font-size: 22px;
  margin-bottom: 10px;
}

.footer-kontakty .email{
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.footer-kontakty .telefon {
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
}


footer .copyright{
  color: #dadada;
  font-size: 14px;
  width: 100%;
  background-color: #1f1f1f;
  padding: 15px 0!important;
  margin: 0px!important;
}

@media (max-width: 767px) {
  .footer-kontakty .email,
  .footer-kontakty .telefon {
    font-size: 12px!important;
  }

  .footer-kontakty h5{
    font-size: 15px!important;
  }

  footer .copyright{
    font-size: 10px!important;
  }
}

.admin-photos .col,
.photos .col {
  padding: 10px;
  overflow: hidden; /* zabráni pretečeniu obrázka cez rámec stĺpca */
}

.admin-photos .col img,
.photos .col img {
  max-height: 100%; /* obrázok sa zmenší na maximálnu výšku stĺpca */
  width: auto; /* zachová pôvodný pomer strán */
  display: block; /* odstráni medzery pod obrázkom */
}



/* Na mobilných zariadeniach */
@media (max-width: 767px) {
  .scrollable-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Plynulý scrollbar na iOS */
  }

  .scrollable-content {
    overflow-x: auto; /* Umožní posouvání, pokud jsou prvky širší než obrazovka */
    -webkit-overflow-scrolling: touch; /* Plynulé posouvání na zařízeních s dotykovým rozhraním */
    scroll-behavior: smooth; /* Plynulé posouvání */
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Skryje scroll bar ve Windows zařízeních */
  }

  .admin-menu-wrap {
    display: flex;
    flex-wrap: nowrap; /* Zabraňuje převíjení na další řádek */
    
  }

  .front-skola {
    max-width: 80%; /* Na mobilných zariadeniach šírka podľa obsahu */
    display: inline-flex;
    white-space: normal; /* Obnovenie zalamovania riadkov */
    vertical-align: top; /* Zarovnanie objektov hore */
    float: left; 
  }

  .front-skola.region {
    max-width: 100%; 
  }

  .front-skola h3 {
    max-width: 100%;
    font-size: 16px!important;
  }

  .front-skola .region {
    font-size: 11px!important;
  }

  .vsetky-regiony {
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 998; /* Zabezpečí, že tlačidlo bude nad obsahom */
    margin-top: 10px; /* Prispôsobte podľa potreby */
  }
}

/* Na ostatných zariadeniach */
@media (min-width: 768px) {
  .scrollable-container {
    /* Ak chceš skryť scrollbar na väčších zariadeniach */
    overflow-x: hidden;
  }
}



.table-rezervacie{
  text-align: center;
}

.table-rezervacie tr{
  font-size: 12px;
}

.table-rezervacie td{
  font-size: 13px;
}

.table-rezervacia-modal{
  width: 100%;
}
.table-rezervacia-modal td{
  padding: 2px 10px;
}
.table-rezervacia-modal label{
  font-weight: 500;
  margin: 10px 0 2px 0;
}
.table-rezervacia-modal input,
.table-rezervacia-modal select{
  height: 30px;
  font-size: 14px;
  padding: 2px 10px;
}





#cookie-banner {
  display: none; /* Predvolene skryté */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: center; /* Zarovnanie na stred */
  align-items: center;
}

.cookie-content {
  display: flex;
  align-items: center;
}

.cookie-content p {
  margin-right: 10px;
  margin-bottom: 0; /* Odstrániť dávku z p elementu */
  color: #fff;
}

#accept-cookies {
  background-color: #fff;
  color: #333;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

  







/* Štýly pre kontajner s výsledkami vyhľadávania */
.results {
  max-width: 100%;
  margin-top: 0px auto; /* Oddeľovač od vyhľadávacieho poľa */
  /* border: 1px solid #ccc; */
  border-radius: 5px;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  z-index: 9999;
  position: relative;
}

/* Štýly pre výsledky vyhľadávania zoznamu */
#searchResults {
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 9999;
  position: relative;
}

#searchResults li {
  padding: 10px 35px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  transition: background-color 0.3s ease;
  z-index: 9999;
  position: relative;
  text-align: left;
  font-weight: 500;
}

#searchResults li:hover {
  background-color: #f9f9f9;
  cursor: pointer;
}


.bg-secondary-box{
  background-color: #d1d1d1;
}

.step {
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 8px; 
}

.step h3 {
  font-size: 30px;
  margin-bottom: 10px;
}

.step a {
  display: inline-block;
  padding: 8px 20px;
  margin-top: 10px;
  text-decoration: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  transition: background-color 0.3s ease;
}

.step a:hover {
  background-color: #0056b3;
}

/* .step h3, 
.step p {
  color: #ffffff;
} */




.callcentrum {
  border-collapse: collapse;
  width: 100%;
  background-color: #fbfffa;
}

.callcentrum th,
.callcentrum td {
  padding: 8px;
  text-align: left;
  vertical-align: top; /* Zarovnanie inputov hore */
}

.callcentrum th {
  background-color: #f2f2f2;
}

.callcentrum tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.callcentrum tbody tr:hover {
  background-color: #f2f2f2;
}

.callcentrum td > label {
  display: block;
  margin-bottom: 5px;
}

.callcentrum .form-control {
  width: calc(100% - 12px); /* Odčítame padding */
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.callcentrum textarea.form-control {
  max-height: 100px; /* Maximálna výška pre textové pole */
  overflow-y: auto; /* Scrollbar ak prekročí výšku */
}

.callcentrum .btn {
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.callcentrum .btn:hover {
  background-color: #0056b3;
}


/* Obdĺžnik */
.steps-container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #e46918;
  padding: 10px;
  border-radius: 10px;
  color: #ffffff;
  text-align: center;
}

.steps-heading {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.step-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* Jednotlivé kroky */
.step-banner {
  display: flex;
  align-items: center;
  text-align: left;
  margin: 5px 30px 5px 5px;
}

/* Číslo kroku */
.step-number {
  font-size: 3em;
  color: #ffffff;
  font-weight: bold;
  margin-right: 10px; /* Oddeľovač medzi číslom a názvom kroku */
}


/* Názov kroku */
.step-title {
  font-size: 1.2em;
  color: #ffffff;
}

@media (max-width: 768px) {
  .steps-container {
    width: 100%;
    margin: 10px auto;
  }
  
  .steps-heading {
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .step-links {
  }
  
  /* Jednotlivé kroky */
  .step-banner {
    margin: 5px 10px 5px 5px;
  }
  
  /* Číslo kroku */
  .step-number {
    font-size: 20px;
  }
  
  
  /* Názov kroku */
  .step-title {
    font-size: 14px;
  }
}