.all{
font-family: 'Open Sans', sans-serif;
}
.form-row {
    display: flex;
    flex-wrap: wrap; /* Pokud potřebujete, aby se prvky zabalily na další řádek při malém prostoru */
    gap: 30px; /* Mezera mezi prvky */
}

.form-row .form-group {
    flex: 0 1 auto; /* Přizpůsobí se dostupnému prostoru */
    }

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    
}

.form-header {
    text-align: left;
    margin-bottom: 10px;
}

.form-controls {
    display: flex;
    justify-content: space-between; /* Zarovná prvky rovnoměrně s mezerou mezi nimi */
    gap: 10px; /* Vytvoří mezeru mezi jednotlivými položkami */
}

.form-control-item {
    flex: 0 1 45%; /* Zmenší šířku každého input pole na 45% rodičovského prvku */
}



/* Zajistí, aby formulář vypadal dobře na mobilních zařízeních */
@media only screen and (max-width: 768px) {
    .form-controls {
        flex-direction: column; /* Přepne rozložení na vertikální na malých obrazovkách */
    }
}

.form-input-small {
width: 200px;
}

.ohraniceny-div {
    border: 3px solid #ddd; 
    padding: 15px; /* Vytvoří vnitřní odsazení uvnitř divu */
    border-radius: 5px; /* Opatří rohy rámečku zaoblením */
    margin-bottom: 20px; /* Vytvoří odsazení pod divem */
    font-size:  14px;
}


.form-row .form-group input ,
.form-row .form-group select,
.form-header p {
    width: 100%; /* Zajistí, že input/select vyplní celý prostor svého kontejneru */
    box-sizing: border-box; /* Zahrne padding do šířky */
    height: 35px; /* Nastavení výšky pro textová pole */
    font-size: 1em;
    padding: 5px;
}



 


 /* Stylování celého slideru */
.ui-slider {
    height: 25px !important; /* Výška slideru */
    background: #ddd !important; /* Barva dráhy slideru */
    border-radius: 5px !important; /* Zaoblené rohy */
    width: 200px;
    
}

/* Stylování úchytů */
.ui-slider-handle {
    width: 30px !important; /* Šířka úchytu */
    height: 30px !important; /* Výška úchytu */
    background: #3FBABC !important;; /* Barva úchytu */
    border: 1px solid #3FBABC !important; /* Okraj úchytu */
    border-radius: 20% !important; /* Kulatý úchyt */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important; /* Stín úchytu */
}

/* Stylování vybrané části (range) */
.ui-slider-range {
    background: LightCyan !important; /* Barva vybrané části */
    border-radius: 5px !important; /* Zaoblené rohy pro range */
}

/*stylovani check boxu */
.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* Mezera mezi jednotlivými prvky */
}

.form-check-input {
    margin-right: 10px; /* Mezera mezi checkboxem a label */
}

.form-check-label {
    font-size: 16px ;
    color: #333;
}

/*poznámka s hvězdičkou*/
.notice {
   color: grey;
    font-size: 15px ;
}

/* Zajištění viditelnosti měsíců a roků v jQuery UI Datepickeru */
/* Zvýšení specifikace pomocí přidání více selektorů */
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year {
    width: 70px !important;
    display: inline-block !important;
    font-size: 10px !important; /* Ujistěte se, že text je čitelný */
    background-color:#ffffff !important; color:#000000 !important;
}

.ui-datepicker {
    font-size: 14px !important;
}

.ready {
color: #3FBABC;
}

.delete {
color: red;
}



/*pro mapu ve view*/
.gmap_canvas {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%; /* Poměr 16:9 pro malé obrazovky */
    height: 0;
    max-width: 100%;
}

#gmap_canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Media query pro velké obrazovky */
@media (min-width: 1200px) {
    .gmap_canvas {
        width: 800px; /* Nastavení pevné šířky na 800px pro velké obrazovky */
        height: 200px; /* Nastavení pevné výšky na 200px pro velké obrazovky */
        padding-bottom: 0; /* Vypnutí poměru stran */
        margin: 0 auto; /* Centrování mapy na stránce */
    }

    #gmap_canvas {
        width: 100%; /* Šířka iframe uvnitř kontejneru */
        height: 100%; /* Výška iframe uvnitř kontejneru */
    }
}


/* Pro tlačítko na telefon */
  .info-box {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        
        

.multiselect-box {
    padding-top: 10px !important;
    width: 200px !important; /* Původní šířka */
    height: 135px !important; 
    transition: width 0.3s ease, height 0.3s ease !important; /* Přechodový efekt */
}


.podtrzeni {
    text-decoration: underline; /* Aktivuje podtržení */
    text-underline-offset: 10px; /* Nastaví mezeru mezi textem a podtržením */
    text-decoration-thickness: 1px; /* Tloušťka podtržení */
    padding-bottom: 10px;
}

.container-icon {
    display: flex;
    gap: 20px; /* Nastaví mezeru mezi prvky */
    font-size: 10; /* Skryje bílé mezery */
}

.box-icon {
    flex: 100px; /* Nebo zadej pevnou šířku, např. width: 100px; */
    
    padding: 20px;
    text-align: left;
    
    margin: 0; /* Zruší margin */
   
  }

.login-field {
height: 30px;  
}


.icon-container {
    display: flex;
    flex-direction: column; /* Pro zarovnání textu pod obrázek */
    align-items: center; /* Centrované zarovnání obrázku i textu */
    justify-content: center; /* Zarovnání obsahu na střed */
    gap: 10px; /* Mezera mezi obrázkem a textem */
}

.icon-container img {
    display: block; /* Aby se obrázek zobrazoval správně */
    /*margin: 0 auto; /* Pro jistotu centrování */
    margin-left: 20px;
}

.icon-container span {
    text-align: center; /* Zarovnání textu na střed */
    margin-left: 20px;
}

/*pro stránkování*/
ul.pagination {
    list-style: none;
    display: flex;
    gap: 5px;
}

ul.pagination li {
    display: inline-block;
    padding: 5px 10px;
  /*  border: 1px solid #3FBABC;
    border-radius: 5px;*/
}

ul.pagination li a {
    text-decoration: none;
    color: #3FBABC;
    
}

ul.pagination li.active {
    border: 1px solid #3FBABC;
    border-radius: 5px;
  
    
}



/*Zápatí */
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #3FBABC;
}

.footer-left, .footer-center, .footer-right {
    flex: 1;
    text-align: center;
}

.footer-left a, .footer-center a, .footer-right a {
    text-decoration: none;
    color: white;
}

.footer-left a:hover, .footer-center a:hover, .footer-right a:hover {
    color: #007bff;
}

.fixed-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #3FBABC;
    z-index: 100;
    padding: 10px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

/* Nastavení základního layoutu */
html, body {
    height: 90% !important;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Zajišťuje, že wrapper bude minimálně tak vysoký jako výška obrazovky */
}

.content {
    flex: 1; /* Hlavní obsah zabírá všechnu dostupnou výšku */
    padding: 20px;
}


ol {
    list-style-type: decimal !important;
}


}