*, *:before, *:after {
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
 BODY,HTML {
	font-size: 1.00em;
	color: #000;
	background-color: #000;
	background-image:url(./pictsystem/a-bgnew.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-webkit-background-size: 100%;
   -moz-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	height: 100%;
	position:relative;
}


/* Dropdown menu*/
.dropbtn {
    font-family: 'Roboto', sans-serif;
    background-color: transparent;
    color: #fff;
    padding: 15px 15px;
    font-size:1.0em;
    margin:0 0 0 0;
    border: none;
    cursor: pointer;
}

.dropbtn:hover {
    background-color: #20a8d8;
    color:#fff;
}

.dropbtn:focus {
    background-color: #20a8d8;
    color:#fff;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin:0 0 0 0;
    padding:0;
    background-color:transparent;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #20a8d8;
    min-width: 250px;
    padding:0;
    margin:0;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a.submn {
    padding: 10px 15px;
    font-size:0.85em;
    text-decoration: none;
    display: block;
    color:#fff;
	
}

.dropdown a.submn:hover {background-color: #1697c4;}

.show {display:block;}

DIV.topnav {padding:0;margin:0 0 0 15px;border:0;position:relative;z-index:1000;display: inline-flex;align-items: center;}
A.icon {display:none;}
/* koniec Dropdown menu*/


/* --- RESPONZÍVNA NAVIGÁCIA PRE PLÁNOVAČ --- */
.navigation-place {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e1e1e1;
    margin: 15px 0;
}

.navigation-place form {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}


/* --- CSS PRE VÝBER AUTA A PERSONÁLU (GRID KARIET) --- */
.selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.selection-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f8f9fa;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.selection-card:hover {
    background-color: #e9ecef;
    border-color: #20a8d8;
}

.selection-card input[type="radio"],
.selection-card input[type="checkbox"] {
    margin: 0;
    padding: 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.selection-card label {
    margin: 0;
    cursor: pointer;
    font-weight: normal;
    color: #333;
    font-size: 0.95em;
    flex-grow: 1;
}


/* Video navody CSS koniec*/
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 15px;
}

/* Karta videa */
.video-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.12);
}

/* Obal pre náhľadový obrázok a Play ikonu */
.video-thumb-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Pomery strán 16:9 */
    background: #000000;
    overflow: hidden;
}

.video-thumb-container a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.video-thumb-container:hover .video-thumb {
    opacity: 0.85;
}

/* Play tlačidlo cez obrázok */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.play-icon {
    color: #ffffff;
    font-size: 18px;
    margin-left: 3px;
}

.video-thumb-container:hover .play-overlay {
    background: #28a745;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Názov videa */
.video-title {
    padding: 10px 12px;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
    line-height: 1.3;
    flex-grow: 1;
}

/* Tlačidlá akcií (EDIT / DELETE) */
.video-actions {
    display: flex;
    border-top: 1px solid #eeeeee;
    background: #f9f9f9;
}

.btn-action {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-edit {
    color: #007bff;
    border-right: 1px solid #eeeeee;
}

.btn-edit:hover {
    background: #007bff;
    color: #ffffff;
}

.btn-delete {
    color: #dc3545;
}

.btn-delete:hover {
    background: #dc3545;
    color: #ffffff;
}

/* Video navodu CSS koniec*/

/* --- NÁZOV VIDEA (HORE) --- */
.modal-video-title {
    padding: 15px 20px 10px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    border-bottom: 1px solid #f0f0f0;
}

/* --- KONTAJNER PRE VIDEO (STRED) --- */
.modal-video-container {
    width: 100%;
    background: #000000;
    max-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-video-container video {
    width: 100%;
    max-height: 70vh;
    display: block;
}

/* --- POPIS VIDEA (DOLE) --- */
.modal-video-description {
    padding: 15px 20px 5px 20px;
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.5;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    word-wrap: break-word;
}


.form-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 stĺpcov vedľa seba */
    gap: 5px;
    width: 100%;
    max-width: 100%; /* POISTKA: Grid nikdy nepresiahne šírku obrazovky */
}

/* Každé bežné pole */
.form-grid .form-group {
    width: 100%;
    min-width: 0; /* KRITICKÁ POISTKA: Umožní gridu zmenšovať obsah vnútri polí */
    margin-bottom: 0;
    padding: 15px;
    background-color: rgba(0,0,0,0.05);
}

/* FINÁLNA OPRAVA PRE TEXTAREA A INPUTY */
.form-grid input.klasika,
.form-grid textarea.klasika {
    width: 100%;
    max-width: 100%; 
    min-width: 0;  
    display: block;
    margin-top: 5px;
    resize: vertical;
}

.form-grid .full {
    grid-column: 1 / -1; 
}

.form-grid .form-btn-group {
    grid-column: 1;  
    background: transparent;
    padding: 0; 
}

.form-group button.tlacitko {
    width: 100%;
    margin: 0;
    padding: 15px; 
    color: white;
    border: none;
    cursor: pointer;
}

.form-group label {
    display: block;
    font-size: 0.85em;
    margin-bottom: 6px;
    color: #333;    
}

.radio-group {
    display: flex;
    gap: 20px;
    margin-top: 5px;
    flex-wrap: wrap; 
}

.radio-group label {
    font-weight: normal;
    cursor: pointer;
}


/* CSS pre menezment dovolenky */
.calendar-card { max-width: 600px; margin: 30px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        
        /* Navigácia */
        .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .calendar-header h2 { margin: 0; font-size: 1.4rem; }
        .btn { display: inline-block; padding: 8px 14px; background: #007bff; color: #fff; text-decoration: none; border-radius: 4px; font-size: 0.9rem; }
        .btn:hover { background: #0056b3; }

        /* Mriežka kalendára */
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
        .day-header { font-weight: bold; padding: 10px 0; background: #eee; border-radius: 4px; }
        
        .day-cell { 
            padding: 15px 0; 
            border: 1px solid #e0e0e0; 
            border-radius: 4px; 
            background: #fff; 
            cursor: pointer; 
            user-select: none;
            transition: background 0.2s;
        }
        .day-cell:hover:not(.empty) { background: #e9ecef; }
        .day-cell.empty { background: transparent; border: none; cursor: default; }
        .day-cell.weekend { background: #f8d7da; color: #721c24;  border-color: #f5c6cb; }
        .day-cell.selected { background: #28a745 !important; color: #fff; font-weight: bold; border-color: #1e7e34; }
        .day-cell.today { border: 2px solid #007bff; }
		/* Nové pravidlá pre pracovnú cestu a minulé dni */
.day-cell.has-worktrip { 
    background: #ffc107 !important; /* Jemná oranžová/žltá pre pracovnú cestu */
    color: #856404; 
    border-color: #ffebaaca; 
    cursor: not-allowed; 
    font-weight: bold;
}

.day-cell.past { 
    opacity: 0.6; 
    cursor: not-allowed; 
}



/* --- CSS PRE TOGGLE SWITCH (PREPÍNAČ STATUSOV) --- */

/* Hlavný kontajner, ktorý drží prepínač */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  vertical-align: middle;
}

/* Skryjeme pôvodný natívny checkbox */
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

/* Pozadie prepínača v stave OFF (sivá farba) */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 22px;
}

/* Biele guľaté koliesko vo vnútri prepínača */
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Keď je checkbox zaškrtnutý (stav ON) -> zmeníme pozadie na zelené */
.switch input:checked + .slider {
  background-color: #2ecc71; /* Pekná moderná zelená */
}

/* Keď je prepínač aktívny (ON) -> posunieme biele koliesko doprava */
.switch input:checked + .slider:before {
  transform: translateX(18px);
}

/* Voliteľné: Jemný efekt stmavenia pri prejdení myšou (hover) */
.switch:hover .slider {
  filter: brightness(0.95);
}


/* Kontajner galérie - responzívna mriežka */
.galeria-kontajner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin: 15px 0;
}

/* Položka galérie (obal pre obrázok a tlačidlo) */
.galeria-polozka {
  position: relative; /* Dôležité pre absolútne poziciovanie krížika */
  aspect-ratio: 1 / 1; /* Vytvorí dokonalý štvorec */
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f9f9f9;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.galeria-polozka:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Samotný odkaz a obrázok vnútri */
.galeria-odkaz {
  display: block;
  width: 100%;
  height: 100%;
}

.galeria-odkaz img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Oreže obrázok do štvorca bez deformácie */
  display: block;
}

/* Tlačidlo na vymazanie v pravom hornom rohu */
.btn-zmaz {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10; /* Aby bolo vždy nad obrázkom */
  background-color: rgba(231, 76, 60, 0.9); /* Červená s jemnou priehľadnosťou */
  color: white;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.btn-zmaz:hover {
  background-color: rgba(192, 41, 43, 1.0); /* Tmavšia červená pri hoveri */
  color: white;
  text-decoration:none;
}



/* Plynulý prechod pre celý riadok */
.trhv {
    transition: all 0.2s ease-in-out;
}

/* Keď ide kurzor na TR, zmeníme pozadie VŠETKÝM bunkám v tomto riadku naraz */
.trhv:hover td {
    background-color: #e2effd !important; /* Výraznejšia, sýtejšia, no stále elegantná modrá */
    box-shadow: inset 0 1px 0 0 #bcd7ff, inset 0 -1px 0 0 #bcd7ff; /* Ohraničí riadok zhora a zdola, čo ho opticky "vytiahne" */
}

/* Voliteľné: Ak chceš, aby sa mierne zväčšil/vystrčil dopredu celý riadok */
.trhv:hover {
    transform: scale(1.001); /* Mierne zväčšenie, aby to <i>nešklbalo</i> tabuľku, môžeš dať aj 1.01 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* Pekný hlbší tieňok okolo celého riadku */
    position: relative;
    z-index: 10;
}

TABLE.tablefull {width:100%;height:100%;}
TABLE.fullscreen {width:100%;background-color:#fff;padding:0;margin:0 0 15px 0;}
TD.tdhlavicka {height:80px;padding:0;margin:0;background-color: rgba(0, 0, 0, 0.9);border:0;vertical-align:top;text-align:left;}
TD.tdlavastrana {width:200px;padding:0;margin:0;background-color: rgba(0, 0, 0, 0.9);border:0;vertical-align:top;text-align:left;}
TD.tdpravastrana {padding:0;margin:0;background-image:url(./pictsystem/bgright.png);border:0;vertical-align:top;text-align:left;}
TD.tdbottom {height:30px;padding:0;margin:0;background-color: rgba(0, 0, 0, 0.9);border:0;vertical-align:top;text-align:left;}
TD.bgtd0 {background-color:#d9d9d9;padding:3px 5px;}
TD.bgtd1 {background-color:#d2f9bc;padding:3px 5px;}
td.obsahbgoff {background-color:#e5e5e5;text-align:center;padding:15px;margin:0 1px;color:#505557;border:0;border-width:2px 0 0 0;border-color:#e4e9ec;border-style:solid;}
td.editroh {background-image:url(./pictsystem/roh.png);background-position:right top;background-repeat:no-repeat;}

fieldset {margin:15px 0 15px 0;padding: 10px;border:1px solid #000;background-color:#fff;}
legend{background-color:#000;color:#fff;margin:0 0 0 -11px; padding: 15px;}

button.tlacitko {background-color:#20a8d8;cursor:hand;cursor:pointer;padding:15px;;margin:5px;border:1px solid #20a8d8;color:#fff;}
button.tlacitko:hover {background-color:#fff;color:#20a8d8;}
button.tlacitko2 {background-color:#ffa200;cursor:hand;cursor:pointer;padding:5px 10px;;margin:2px;border:0;color:#fff;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;}
button.tlacitko2:hover {background-color:#ffa200;cursor:hand;cursor:pointer;padding:5px 10px;;margin:2px;border:0;color:#fff;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;opacity: 0.5; filter: alpha(opacity=50);}
input {display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:15px;margin:5px;}
input.klasika {display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:15px;margin:5px;min-width:250px;max-width:23px;}
select.klasika {display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:15px;margin:5px;min-width:250px;max-width:23px;}
input.klasika2 {display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:10px;margin:4px 5px;width:200px;}
input.login {display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:15px;margin:5px;width:100%;}
input.popinput {display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:15px;margin:5px;min-width:250px;max-width:23%;}
select.popselect {display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:15px;margin:5px;min-width:250px;max-width:23%;}
select {background-color:#fff;padding:5px;border:1px solid #e1e1e1;margin:2px;}
select.klasika2 {display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:10px;margin:4px 5px;}
textarea.klasika {display: block;font-size:0.9em;font-family: Verdana;background-color:#fff;border:1px solid #e1e1e1;padding:15px;margin:0;width:100%;height:100px;resize: vertical;}
textarea.popinput {display: block;background-color:#fff;border:1px solid #e1e1e1;padding:15px;margin:5px;min-width:250px;max-width:80%;height:90px;}
option {padding:15px;}

.nulovanie {padding:0;margin:0;border:0;text-align:left}
.odsadenie {padding:15px 15px 15px 0;margin:0;border:0;text-align:left}
.vlavo {float:left;}
.vpravo {float:right;}
.zaoblenie {-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;}
.tien {-webkit-box-shadow: 1px 2px 5px 0px #444444;-moz-box-shadow: 1px 2px 5px 0px #444444;box-shadow: 1px 2px 5px 0px #c7c7c7;}
.trans {opacity: 1.0; filter: alpha(opacity=100);}
.trans:hover {opacity: 0.5; filter: alpha(opacity=50);}
.obsah {margin:0;border:0;padding:30px;}
.small {font-size:0.8em;}
.borderred {border:2px solid #000;}

DIV.vlozilreal {wideth:100%;padding:15px;margin:5px;background-color:rgba(255,255,255,0.6);}
span.smallreal {font-size:0.8em;}
img.roh {float:right; margin:0 0 10px 15px;}

DIV.tableplace {padding:0;margin:0;border:0;width:100%;overflow-x: auto;}
DIV.logintable {max-width:300px;margin:auto;padding:30px 50px;border:0;display:block;background-color: rgba(0, 0, 0, 0.8);}
DIV.full {min-height: 100%; _height: 100; margin: 0 auto -30px auto;min-width:960px;padding:0;border:0;background-image:url('/pictsystem/bgleft.png'),url('/pictsystem/bgright.png');background-position:left top,200px top;background-repeat:repeat-y,repeat-y;}
DIV.hlavicka {width:100%;height:50px;margin:auto;padding:0;border-width:0 0 1px 0;border-style:solid;border-color:#313131;display:block;background-color: rgba(0, 0, 0, 0.9);position:absolute;z-index:10;}
DIV.userinfo {padding:0;border:0;color:#fff;padding:23px 10px 0 10px;}
DIV.fullpage {background-color: rgba(0, 0, 0); background-repeat:no-repeat;	-webkit-background-size: 100%;   -moz-background-size: 100%;   -o-background-size: 100%;   background-size: cover; width:100%;margin:0;padding:0;border:0;color:#000;min-height:100%; position: relative;}
DIV.fullpage2 {background-color: rgba(255, 255, 255, 0.9); background-repeat:no-repeat;	-webkit-background-size: 100%;   -moz-background-size: 100%;   -o-background-size: 100%;   background-size: cover; width:100%;margin:0;padding:50px 0 30px 0;border:0;color:#000;position: relative;}
DIV.rozklik {display:block;padding:15px;margin:0;border-width:0 0 0 0;border-color:#e3e3e3;border-style:solid;background-color:#fff;}
DIV.rozklikobsah {display:block;padding:15px;margin:0 0 15px 0;border:0;background-color:#fff;}
DIV.inputclas {font-size:0.90em;display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:14px 15px;margin:5px;text-align:left;}
DIV.inputclaspopis {width:100%;font-size:0.90em;display: inline-table;background-color:#000;border:1px solid #e1e1e1;padding:14px 15px;margin:5px;text-align:left;color:#fff;}
DIV.inputclas2 {font-size:0.90em;display: inline-table;background-color:#fff;border:1px solid #e1e1e1;padding:0 15px;margin:5px;text-align:left;}
DIV.vyznac {background-color:#20a8d8;color:#fff;}

DIV.errorpage {margin:15px;padding:15px;border:0;background-color:#fff0b3;display:block;clear:both;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;}
DIV.obsahfun {margin:2px;padding:5px;border:1px solid #e3e3e3;width:400px;}
DIV.obsahfun2 {margin:2px;padding:15px;border:0;background-color:#e3e3e3;width:150px;}
DIV.obsahfunfr {margin:0;padding:0;border:0;text-align:left;width:350px;}
DIV.aktst {padding:10px;margin:30px 10px 0 10px;border:0;background-color:#fff;color:#000;}
DIV.inspgal{width:250px;height:150px;border:2px solid #ededed;background-size: cover;background-position:center center;padding:0;margin:4px 4px 0 0;}
DIV.mscast {padding:5px;margin:2px;border:1px solid #eeeeee;}
DIV.poznamka {background-color:#fff;padding:0;margin:5px 0;border:1px solid #a4a4a4;}
DIV.poznamkahead {padding:5px 15px;margin:0;border:0;background-color:#a4a4a4;color:#fff;font-size:0.8em;-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;}
DIV.parametretable{width:250px;padding:3px;margin:2px 0 0 2px;background-color:#fff;height:130px;}
DIV.parametretable2{width:760px;padding:3px;margin:2px 0 0 2px;background-color:#fff;}
DIV.obsahtl {margin:2px;padding:15px;border:1px solid #87847f;background-color:#fff;display:inline-table;}

DIV.hlmeno {color:#fff;float:right;padding:15px 15px 0 0;margin:0;}

h1.ndps {font-size:1.0em;font-weight:bold;color:#fff;padding:15px;margin:0;border:0;display:block;background-color: rgba(0, 0, 0, 0.9);}
h1.nadpis {font-size:1.5em;font-weight:normal;color:#000;padding:0 0 15px 0;margin:0;border:0;display:block;}
h2.menuh {font-weight:normal;color:#acacac;padding:15px;margin:0;border:0;display:block;font-size:1.0em;background-color:#2c2c2c;}
h3.parametrenadpis {font-size:0.8em;font-weight:normal;color:#fff;padding:5px;margin:0 0 5px 0;border:0;background-color:#000;display:block;-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;}

td.nazov {text-align:center;padding:15px;margin:0 1px;color:#000;border:0;border-width:2px 0 0 0;border-color:#e4e9ec;border-style:solid;font-size:0.8em;font-weight:bold;}
td.obsah {background-color:#fff;text-align:center;padding:15px;margin:0 1px;color:#505557;border:0;border-width:2px 0 0 0;border-color:#e4e9ec;border-style:solid;}
td.obsah2 {background-color:#fff;background-color: rgba(0, 0, 0, 0.1);text-align:center;padding:15px;margin:1px;color:#505557;border:0;border-width:2px 0 0 0;border-color:#e4e9ec;border-style:solid;}
td.obsahram {font-size:1.0em;text-align:left;padding:5px 10px;background-color:#fff;border:1px solid #c4c4c4;}
td.obsahyes {font-size:1.0em;text-align:left;padding:5px 10px;background-color:#000;border:0;color:#fff;}
td.free {text-align:center;padding:15px;background:none;border:0;color:#000;}
td.obsahkosik {background-color:#fff;text-align:center;padding:15px;margin:0 1px;color:#505557;border:0;border-width:2px 0 0 0;border-color:#e4e9ec;border-style:solid;}
td.obsahkosik2 {background-color:#fff;text-align:center;padding:15px;margin:0 1px;color:#505557;border:0;border-width:2px 0 0 0;border-color:#e4e9ec;border-style:solid;font-weight:bold;}

p.odsadenie{padding:15px;}

A {text-decoration: none; font-weight: normal; color: #20a8d8;}
A:hover {text-decoration:underline;}

A.rozklik {text-decoration: none; font-weight: normal; color: #20a8d8;padding:3px 15px 5px 35px;margin:0;display:block;font-size:1.0em;font-weight:normal;background-image:url(./pictsystem/plus.jpg);background-position:left top;background-repeat:no-repeat;}
A.rozklik:hover {opacity: 0.5; filter: alpha(opacity=50);}

A.menu {
    font-family: 'Roboto', sans-serif;
    background-color: transparent;
    color: #fff;
    padding: 15px 15px;
    font-size: 1.0em;
    margin: 0;
    border: none;
    cursor: pointer;
    display: inline-flex;     /* PRIDANÉ: Správa sa rovnako ako tlačidlo */
    align-items: center;      /* PRIDANÉ: Vertikálne zarovná text na stred */
    text-decoration: none;
    line-height: normal;      /* PRIDANÉ: Zjednotenie výšky riadku */
}

A.menu:hover {
    background-color: #20a8d8;
    color: #fff;
    text-decoration: none;
}



A.menu2 {background-color:#20a8d8;text-decoration: none; font-weight: normal; color: #fff;padding:15px;margin:0;display:block;font-size:1.0em;font-weight:normal;}
A.menu2:hover {opacity: 0.5; filter: alpha(opacity=50);}

A.tlacitko {background-color:#20a8d8;cursor:hand;cursor:pointer;padding:15px;;margin:5px;border:1px solid #20a8d8;color:#fff;}
A.tlacitko:hover {background-color:#fff;color:#20a8d8;text-decoration:none;}

A.tlacitkoaktivne {background-color:#5ea023;cursor:hand;cursor:pointer;padding:5px 10px;;margin:2px;border:0;color:#fff;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;}
A.tlacitkoaktivne:hover {text-decoration: none;background-color:#5ea023;cursor:hand;cursor:pointer;padding:5px 10px;;margin:2px;border:0;color:#fff;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;opacity: 0.5; filter: alpha(opacity=50);}
A.titulnefoto {padding:5px;background-color:#20a8d8;color:#fff;position:absolute;margin:100px 0 0 5px;border:0;z-index:10;}

img.logouvod {margin:auto;border:0;padding:20px;display:block;max-width:300px;}
img.logo {margin:0;border:0;padding:10px;height:50px;}
img.deletepc {margin:0 0 0 15px;border:0;padding:0;width:20px;}

@media screen and (max-width: 1100px) {
    /*html {overflow-x: hidden}*/
    .topnav { display: none; }
    .topnav button {display: none;}
    .topnav a {display: none;}
    .topnav div.dropdown {display: none;}
    .topnav.responsive {
        position: absolute;
        margin: 0; 
        background-color: #20a8d8;
        width: 40%;
        border: 0;
        right: 0;
        top: 50px;
        display: flex;         
        flex-direction: column; /* Položky pod sebou */
        align-items: stretch;  /* PRIDANÉ: Donúti všetky deti (aj .dropdown) rozťiahnuť sa na 100% šírky */
        text-align: left;      /* PRIDANÉ: Základné zarovnanie textu v celom kontajneri */
    }
    
    .topnav.responsive a.menu {
        display: block;
        width: 100%;
        text-align: left;
    }
    .topnav.responsive button {    float: none;    display: block;    text-align: left;  }
    .topnav.responsive DIV.dropdown {    float: none;    display: block;    text-align: left;  }
    
    .dropbtn {
        background: transparent;
        color: #fff;
        padding: 15px;
        margin: 0;
        font-size: 1.00em;
        border: none;
        cursor: pointer;
        width: 100%;
        text-align: left; /* PRIDANÉ: Zarovná text tlačidla v responzívnom menu doľava */
    }

    .topnav.responsive button.dropbtn {
        text-align: left; /* POISTKA: Vynúti zarovnanie doľava v rozbalenom responzívnom menu */
    }
    
    .dropbtn:hover, .dropbtn:focus {
        background-color: #1697c4;
    }
    
    .dropdown {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;           /* PRIDANÉ: Obal rozbaľovacej položky zaberie celú šírku */
        text-align: left;      /* PRIDANÉ: Text vnútri obalu bude vľavo */
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    .dropdown-content {
        display: none;
        position: relative;
        
        width: 100%;
        padding:0;
        margin:0;
        overflow: auto;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
        z-index: 1;
    }
    
    .dropdown-content a.submn {
        color: #fff;
        padding: 12px 25px;
        font-size:0.85em;
        text-decoration: none;
        display: block;
    }
	
	a.submn:hover  {background-color: #1697c4;}
    .show {display:block;}
    
    A.icon {display:block;float:right;background-color:#20a8d8;color:#fff;padding:10px 15px;margin:5px 5px 0 15px;border:0;}
    A.icon:hover {opacity: 0.5; filter: alpha(opacity=50);}
 
	A.menu:hover {background-color: #1697c4;}
}


@media (max-width: 1023px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .form-grid .form-group {
        grid-column: auto; 
    }
    
    .form-grid .full {
        grid-column: 1 / -1; 
    }

    .form-grid .form-btn-group {
        grid-column: 1; 
    }
}


@media (max-width: 767px) {
    .form-grid {
        grid-template-columns: 1fr; 
    }
    
    .form-grid .form-group,
    .form-grid .full,
    .form-grid .form-btn-group {
        grid-column: 1 / -1; 
    }
	
	.navigation-place {
        flex-direction: column;
        align-items: stretch;
    }
    
    .navigation-place form,
    .navigation-place input.klasika,
    .navigation-place a.tlacitko,
    .navigation-place button.tlacitko {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        margin: 2px 0;
    }
	DIV.hlmeno {display:none;}
	
}

@media screen and (max-width: 500px) {
    .topnav.responsive {width:80%;}

}