body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
}
body {
    background-color: #555e69;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
    font-family: Mitr;
}
legend {
    font-size: 16px;
}
iframe {
    border: none;
}
#preloader {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99997; /* makes sure it stays on top */
}
#formular {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99996; /* makes sure it stays on top */
}
#formular_sim {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99996; /* makes sure it stays on top */
}
form {
    margin-block-end: 0px;
}
.opac {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99998; /* makes sure it stays on top */
    opacity: 0.6;
    background-color: black;
}
.status {
    width:128px;
    height:128px;
    position: absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color: #000;
    border: 5px solid white;
    border-radius: 10px;
    z-index:99999; /* path to your loading animation */
    color: white;
    text-align: center;
    padding-top: 5px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.status_form {
    width:630px;
    height:340px;
    position: absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color: #555e69;
    border: 5px solid white;
    border-radius: 10px;
    z-index:99999; /* path to your loading animation */
    color: white;
    text-align: center;
    padding-top: 5px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.status_form_polozka {
    width:630px;
    height:306px;
    position: absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color: #555e69;
    border: 5px solid white;
    border-radius: 10px;
    z-index:99999; /* path to your loading animation */
    color: white;
    text-align: center;
    padding-top: 5px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.status_form_sim {
    width:630px;
    height:306px;
    position: absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color: #555e69;
    border: 5px solid white;
    border-radius: 10px;
    z-index:99999; /* path to your loading animation */
    color: white;
    text-align: center;
    padding-top: 5px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.loader {
    position: absolute;
    left: 25%;
    top: 25%;
    margin: 0;
    -ms-transform: translate(-25%, -25%);
    transform: translate(-25%, -25%);
    border: 10px solid #bbb7b7;
    border-radius: 50%;
    border-top: 10px solid #232324;
    border-bottom: 10px solid #232324;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
} 
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

a:link, a:visited {
    background-color: #337a36;
    color: white;
    padding:5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}  
a:hover, a:active {
    background-color: #000000;
}

/* Specifický styl pro přepínač jazyků - zrušení zeleného pozadí */
#language-switcher a {
    background-color: transparent; /* Zprůhlední pozadí */
    padding: 0;                    /* Odstraní odsazení, které roztahovalo rámeček */
    margin: 0;
}

/* Zrušení černého pozadí při najetí myší (hover) */
#language-switcher a:hover {
    background-color: transparent;
}

/* část s loginem */
#stredy {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 350px;
	width: 400px;
	margin: -175px 0 0 -200px;
	border: none;
    background-color: whitesmoke;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 5px;
}
#stredy_load {
    position: absolute;
	top: 50%;
	left: 50%;
	height: 100px;
	width: 400px;
	margin: -50px 0 0 -200px;
    padding: 20px;
	border: none;
    background-color: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#optext {
    margin: 0 5px 0 25px;
}
.login-text {
    font-family: Mitr;
    font-size: 30px;
    color: black;
    margin-top: 10px;
}
#login {
    width: 350px;
    align-content: center;
    margin-top: 20px;
}
.input-user {
    background: #cacfd2;
    font-family: Mitr;
    font-size: 18px;
    width: 270px;
    border: none;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
}
.input-user-red {
    background: #e68686;
    font-family: Mitr;
    font-size: 18px;
    width: 270px;
    border: none;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
}
.input-user-blank {
    background-color: whitesmoke;
    font-family: Mitr;
    font-size: 18px;
    width: 270px;
    border: none;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
}
.input-text {
    background-color: #cacfd2;
    margin: 2px;
    font-family: Mitr;
    font-size: 14px;
    width: 250px;
    height: 35px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    border-radius: 5px;
}
.input-text.invalid {
    /* Nová třída pro neplatné pole */
    border-color: red;
    background-color: #e68686;
}
.input-text-red {
    background-color: #e68686;
    margin: 2px;
    font-family: Mitr;
    font-size: 14px;
    width: 280px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid red;
}
.input-uuid {
    background-color: #cacfd2;
    margin: 2px;
    font-family: Mitr;
    font-size: 14px;
    width: 350px;
    height: 35px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    border-radius: 5px;
}
.button-login {
    border: 1px solid black;
    border-left: 5px solid black; 
    background-color: #0055A5;
    width: 290px;
    font-family: Mitr;
    font-size: 25px;
    color: white;
    text-align: center;
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px;
}
.button-login:hover {
   background-color: black;
}
.forget {
    width: auto;
    color: black;
    padding: 10px;
    text-align: center;
}
.forget a {
    color: black;
    text-decoration: underline;
    background-color: whitesmoke;
}
/* Hlavička */

#header {
    background-color: whitesmoke;
    font-family: Mitr;
    font-size: 30px;
    text-align: left;
    padding-left: 20px;
}

/* Menu */

.navbar {
    overflow: hidden;
    background-color: #333; 
}
.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    background-color: #333;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}
.subnav {
    float: left;
    overflow: hidden;
}
.subnav .subnavbtn {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 20px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    height: 35px;
}
.navbar a:hover, .subnav:hover .subnavbtn {
    background-color: black;
}
.subnav-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: #333f;
    width: 100%;
    z-index: 1;
    border-top: 1px dotted white;
    border-bottom: 1px dotted white;
}
.subnav-content a {
    float: left;
    color: white;
    text-decoration: none;
}
.subnav-content a:hover {
    background-color: black;
}
.subnav:hover .subnav-content {
    display: block;
}
.navbar a[href="logout.php"] {
    float: right;
}

/* Tabulka */
#tbl {
    font-family: Mitr;
    border-collapse: collapse;
    margin: 20px auto;
    background-color: #464646;
    border-radius: 5px;
}
#tbl td, #tbl th {
    font-family: Mitr;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    padding: 8px;
    color: white;
}
#tbl th {
    font-family: Mitr;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #1f1f1f;
}
#tbl tr:first-child th:first-child {
    border-top-left-radius: 5px;
}

#tbl tr:first-child th:last-child {
    border-top-right-radius: 5px;
}
.tbl-settings {
    width: calc(100% - 40px);
}
#data_tab {
    font-family: Mitr;
    border-collapse: collapse;
    margin: 20px;
    background-color: #464646;
}
#data_tab td, #data_tab th {
    font-family: Mitr;
    border: 2px solid #333;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    color: white;
    text-align: center;
}
#data_tab th {
    font-family: Mitr;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #1f1f1f;
}
.td-red {
    background-color: #cc0505;
}
.td-blue {
    background-color: #0055A5;
}
.tblspace {
    background-color: #333;
}
/* Tlačítka */
.btn {
    font-family: Mitr;
    background-color: #337a36;
    border: none;
    color: white;
    padding: 5px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 2px;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 5px;
}
.btn_red {
    background-color: #f44336;
}
.btn_blue {
    background-color: #0055A5;
}
.btn_oznaceni {
    width: 150px;
}
.btn_ip {
    width: 150px;
}
.btn_smartenvi {
    width: 100%;
    text-align: left;
}
.btn_copy {
    background-image: url('/img/copy.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    width: 30px; /* Nastavte podle velikosti ikony */
    height: 30px; /* Nastavte podle velikosti ikony */
    text-indent: -9999px; /* Skryje text zobrazením mimo viditelnou oblast */
}
.btn:hover {
    background-color: black;
}
/* Alarmy a upozorneni */
.note-red {
    font-family: Mitr;
    color: #a11c1c;
    border-left: 5px solid #a11c1c;
    background-color: #e09595;
    padding: 10px;
    margin: 20px;
    border-radius: 5px;
}
.note-green {
    font-family: Mitr;
    color: #186609;
    border-left: 5px solid #186609;
    background-color: #97c493;
    padding: 10px;
    margin: 20px;
    border-radius: 5px;
}
.note-blue {
    font-family: Mitr;
    color: #101e96;
    border-left: 5px solid #101e96;
    background-color: #8490f5;
    padding: 10px;
    margin: 20px;
    border-radius: 5px;
}
.txt_div {
    background-color: #333;
    margin: 10px;
    font-family: Mitr;
    color: white;
    padding: 15px;
    border-radius: 5px;
}
.txt_div_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.txt_div_flex_half {
    display: flex;
    flex-wrap: nowrap;
}
.txt_div_flex_half>div {
    width: 100%;
}
/* Vstupní pole*/
.input-form {
    background-color: #cacfd2;
    font-family: Mitr;
    width: 280px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
}
.addw {
    border: none;
    background: none;
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Jockey One;
    font-size: 25px;
    color: white;
    cursor: pointer;
}
#pm_g {
    border: 2px solid black;
    height: 480px;
    margin-bottom: 10px;
    margin-top: 10px;
}
#ppb_g {
    border: 2px solid black;
    height: 480px;
    margin-bottom: 10px;
    margin-top: 10px;
}
#ppm_g {
    border: 2px solid black;
    height: 480px;
    margin-bottom: 10px;
    margin-top: 10px;
}
#wind {
    border: 2px solid black;
    height: 900px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.map {
    width: 800px;
    height: 500px;
    border: 2px solid black;
}
.map a {
    background-color: white;
    color: black;
}
.map_main {
    width: auto;
    height: 700px;
    border: 2px solid black;
    border-radius: 5px;
}
.map_gps{
    width: calc(100% - 40px);
    height: 450px;
    margin: 20px;
    margin-top: 10px;
    margin-bottom: 22px;
    border-radius: 5px;
}
.map_main a:link {
    font-family: Mitr;
    color: black;
    background-color: lightskyblue;
    padding: 0px;
    margin: 0px;
}
.map_main a:visited {
    font-family: Mitr;
    color: black;
    background-color: lightskyblue;
    padding: 0px;
    margin: 0px;
}
.bunka {
    background-color: lightskyblue;
    border: 2px solid black;
    color: #000;
}
.legenda_bunka {
    font-family: Mitr;
    font-size: 20px;
}
.nadpis_bunka {
    font-family: Mitr;
    background-color: lightskyblue;
    color: #000;
    text-align: center;
    font-size: 20px;
    margin: 2px;
}
.hodnota_bunka {
    font-family: Mitr;
    font-size: 14px;
    border-bottom: 1px solid black;
    padding: 2px;
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #333;
    margin-left: 10px;
    margin-right: 10px;
}
.flex {
    border: 2px solid black;
    margin: 10px;
    background-color: black;
    border-radius: 5px;
}
.nadpis {
    background-color: black;
    color: white;
    font-size: 16px;
    padding: 2px;
    text-align: center;
    height: 29px;
}
.hodnota {
    background-color: #dfd7d7;
    color: black;
    width: 100px;
    font-size: 30px;
    text-align: center;
    padding: 10px;
    height: 44px;
}
.flex-main {
    width: 750px;
    border: 0;
    margin: 10px;
}
.flex-main-nadpis {
    color: white;
    background-color: black;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.flex-main-row {
    color: white;
    border-bottom: 1px dotted white;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Snackbar */

#snackbar {
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #ff6e6e; /* Black background color */
    border: 2px solid #771616;
    color: #771616; /* White text color */
    font-size: 20px;
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    right: 20px; /* Center the snackbar */
    top: 20px; /* 30px from the bottom */
    border-radius: 5px;
}
#snackbar_green {
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #92ff76; /* Black background color */
    border: 2px solid #12680a;
    color: #12680a; /* White text color */
    font-size: 20px;
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    right: 20px; /* Center the snackbar */
    top: 20px; /* 30px from the bottom */
    border-radius: 5px;
}
#page {
    position: fixed;
    top:10;
    left:10;
    right:10;
    bottom:10;
    background-color: #333;
    border: 5px solid whitesmoke;
    border-radius: 10px;
    padding: 15px;
    z-index:99990; /* makes sure it stays on top */
    display: none;
}
#page-header {
    background-color: whitesmoke;
    margin: 0px;
    padding: 10px;
    font-size: 20px;
    color: #000;
}
#station_div {
    width: 100%;
    height: 100%;
    border: 1px solid white;
}
.row_green {
    background-color: #12680a;
}
.header-container {
    font-size: 20px;
    display: flex; /* Zapne Flexbox pro tento kontejner */
    justify-content: space-between; /* Rozmístí položky na krajích: první vlevo, druhá vpravo */
    align-items: center; /* Zarovná položky vertikálně na střed */
    width: 100%; /* Zajistí, že kontejner zabírá celou šířku */
}
/* Styly pro váš dropdown a label, pokud potřebujete */
.aplikace-form {
    /* Můžete zde přidat specifické styly pro formulář, např. aby se label a select zarovnaly */
    display: flex; /* Použijeme Flexbox i pro formulář, aby label a select byly na jednom řádku */
    align-items: center;
    gap: 10px; /* Mezera mezi labelem a selectem */
    margin-bottom: 0px;
}
#aplikace_filter {
    width: auto; /* Zkuste tuto hodnotu a upravte ji podle potřeby */
    box-sizing: border-box;
}
/* Skrytí skutečného checkboxu */
.switch input {
    display: none;
}

/* Styl pro přepínač (ověřený i neověřený) */
.switch {
    position: relative;
    display: inline-flex; /* Zajistí, že přepínač a text budou vedle sebe */
    align-items: center;  /* Vertikální centrování obsahu */
    width: 60px;
    height: 32px;  /* Výška přepínače */
    margin: 3.5px;
}

/* Styl pro ovál */
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f44336;
    transition: 0.4s;
    border-radius: 34px;
}

/* Styl pro kuličku (vnitřní část přepínače) */
.switch .slider:before {
    position: absolute;
    content: "";
    height: 24px; /* Výška kuličky */
    width: 24px;  /* Šířka kuličky */
    border-radius: 50%;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

input:checked + .slider:before {
    transform: translateX(28px); /* Posune kuličku doprava */
}

/* Pokud není zaškrtnutý, přepínač bude červený */
input:checked + .slider {
    background-color: #4CAF50; /* Červená pro neaktivní stav */
}

/* Nastavení pro text vedle přepínače */
.status-text {
    margin-left: 70px; /* Odstup mezi přepínačem a textem */
    white-space: nowrap; /* Zabrání textu zalamovat se na více řádků */
}