body{

    --PAGE_BACKGROUND_COLOR: #F0F2F5;/*green*/
    --PAGE_HEADER_COLOR: var(--PAGE_BACKGROUND_COLOR); /*aqua*/
    --PAGE_BODY_COLOR: var(--PAGE_BACKGROUND_COLOR); /*yellow*/
    --PAGE_ROOT_COLOR: var(--PAGE_BACKGROUND_COLOR); /*blue*/
    --PAGE_LOGIN_COLOR: var(--PAGE_BACKGROUND_COLOR); /*white*/
    
    --PAGE_TITLE_COLOR: var(--PAGE_BACKGROUND_COLOR);
    --PAGE_TITLE_BORDER_COLOR: #505050;/*#D0D0D0;*/
    --PAGE_TITLE_FONT_COLOR: #505050;/*var(--MAIN_COLOR);*/

    --MAIN_COLOR: #bb1e10;
    --H_COLOR: #bb1e10; 
    --BOX_BORDER_COLOR: #A0A0A0;
    --SHADOW_COLOR: #E0E0E0;
    --SHADOW_COLOR_HOVER: #909090;

    --BORDER_RADIUS: 3px;
    --BUTTON_BORDER_RADIUS: 15px;
    --PAGE_WIDTH: 82%;
    --CONTENT_PADDING: 20px;
    --BODY_BORDER_COLOR: var(--PAGE_BACKGROUND_COLOR);
    --BOX_SHADOW: 2px 2px 2px;
    --PAGE_PART_SEPARATOR_HEIGHT: 5px;

    --DEFAULT_LINE_HEIGHT: 1.6;
    /*--DEFAULT_FONT_FAMILY: Arial, Helvetica, sans-serif;*/
    --DEFAULT_FONT_FAMILY: Tahoma, Verdana, sans-serif;
    --DEFAULT_FONT_SIZE: 14.6px;

    --MOTTO_TOP: 21px;

    background-color: var(--PAGE_BACKGROUND_COLOR);
    background-repeat: no-repeat;
    margin: auto;
    margin-top: 0px;
    /* width: 100%; */

}

#root {
    display:block;
    overflow: visible;
    width: var(--PAGE_WIDTH);
    margin: auto; /* centered elemnet */
    /*max-width: 1200px; /* neviem preco to tu takto navrhol */
    /*width: 90%; /*<-----------------------------------------------------------------------------------*/
    padding: 0 0px; /*0 10px;*/

    font-family: var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
    line-height: var(--DEFAULT_LINE_HEIGHT);
    border-radius: var(--BORDER_RADIUS);
    background-color: var(--PAGE_ROOT_COLOR);


   
}

.logo{

    display: block;

    float: left;
    position: absolute;
    top: 7px; 
    margin-left: 20px;

    /* background-color: red; */

}

.logo img{
    width: 80%;
}

#header{
    display: block;
    float: left;
    position: relative;
    height: 60px;
    width: 100%;
    background-color: var(--PAGE_HEADER_COLOR);
    border-radius: var(--BORDER_RADIUS);
    /* background-color: green; */
}

#motto {

    display: block;
    float: left;
    position: absolute;
    left: 150px;
    top: var(--MOTTO_TOP);
    color: var(--MAIN_COLOR);
    letter-spacing: 1px;

    /* background-color: blue; */
 
}


#title{

    display: block;
    float: left;
    width: 100%;
    background-color: var(--PAGE_TITLE_COLOR);
    color: var(--PAGE_TITLE_FONT_COLOR);
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 14px;
    font-weight: bold;
    line-height: 35px;
    letter-spacing: 2px;
    text-align: left;
    font-variant: small-caps; 
    border: 1px solid var(--PAGE_TITLE_BORDER_COLOR);
    border-radius: var(--BORDER_RADIUS);
    margin-top: 115px;
    padding-left: var(--CONTENT_PADDING);



}

#no_title{
    
    display: block;
    float: left;
    width: 100%;
    margin-top: 94px;
}

#page_head{

    position: fixed; 
    z-index: 1; 
    width: inherit;




}

#page_body{
    
    display: block;
    float: left;
    width: 100%;
    background-repeat: repeat-x;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);

    background-color: var(--PAGE_BODY_COLOR);
    padding-bottom: 20px;
    border: 1px solid var(--BODY_BORDER_COLOR);
    border-radius: var(--BORDER_RADIUS);
    margin-top: 0px; /* body position to fixed header*/
    
    /* OSADENIE PAGE BODDY OD OKRAJOV JE O 20PX DOVNUTRA OPROTI HLAVICKE */
    /* padding-left: var(--CONTENT_PADDING);
    padding-right: var(--CONTENT_PADDING); */

}

#page_body li{
    line-height:  var(--DEFAULT_LINE_HEIGHT);
}

#page_body #odkaz{
    color: blue;
    text-decoration: none;

}

#page_body #odkaz:hover{
    color: blue;
    text-decoration: underline;
}

#page_body h1{

    color: var(--H_COLOR);
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 18px;    
    font-weight: bold;

}

#page_body h2{

    color: var(--H_COLOR);
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 16px;
    font-weight: bold;

}

#page_body h3{

    color: var(--H_COLOR);
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 16px;
    font-weight: normal;

}

#page_footer{

    display: block;
    float: left;
    font-style: normal;
    font-weight: normal;
    width: 100%;
    padding-top: 2px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 1px;
    background-color: inherit;
    border-radius: var(--BORDER_RADIUS);
    box-shadow: var(--BOX_SHADOW) var(--SHADOW_COLOR_HOVER);
    color: black;
    margin-top: var(--PAGE_PART_SEPARATOR_HEIGHT);
    margin-bottom: 20px;

}

#page_footer a{

    color: white;
    text-decoration: none;

}

#page_footer a:hover{

    color: white;
    text-decoration: underline;

}

#error_line{

    color: red;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);

}

#table {

    border: 1px solid black;
    border-collapse: collapse;
    margin-top: 10px;

}

#table td{
    border: 1px solid silver;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
    padding-left: 3px;
    padding-right: 3px;
    background-color: white;
}

#table tr{

    height: 23px;

}

#table tr:hover{
    background-color: #ffff74;
}


#table th{

    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 12px;
    font-weight: bold;
    background-color: #2e2e2e;
    color: white;
    padding-left: 3px;
    padding-right: 3px;

}

#table a{

    display: block;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 12px;
    font-weight: bold;
    color: black;
    text-decoration: none;

}

#table a:hover{

    text-decoration: underline;

}

#table tfoot{

}

#table tfoot td{

    background-color: gray;
    color: silver;
    margin-right: 15px;

}

#table tfoot a{

    display: inline;
    color: white;

}

#table tfoot tr:hover{

    background-color: inherit;

}


#table_editor{

    font-family: var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
    border-collapse: collapse;
    margin-top: 5px;
    margin-bottom: 5px;
}

#table_editor td{
    
    font-family: var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
    font-weight: bold;
    padding-right: 10px;
    text-align: left;
}

input{
    font-family: var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
}

input[type=text] {
    font-weight: normal;
}

input[type=password] {
    font-weight: normal;
}

input[type=submit]{
    font-weight: bold;
}

textarea{
    font-family: var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
    font-weight: normal;
    width: 100%;
    /* resize: none; */
}

select{
    font-size: 12px;
    width: 150px;
}

fieldset{

    display: block;
    background-color: lightyellow;
    border: 1px solid silver;
    padding-bottom: 10px;
    padding-left: 5px;

}

#stlpec{

    display: inline-block;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    border-radius: var(--BORDER_RADIUS);
    text-align: justify;
    background-color: white;
    width: 100%;

    border: 1px solid #C0C0C0;
    /* border-right: 1px solid var(--BOX_BORDER_COLOR);
	border-bottom: 1px solid var(--BOX_BORDER_COLOR);
    box-shadow: var(--BOX_SHADOW) var(--SHADOW_COLOR); */

    

    
}

#stlpec #pozadie_obr{
    display: block;
    float: left;
    background-color: inherit;
    padding: 10px; /* new property for 35% */
    width: 35%;/* 50% */

}

#pozadie_obr img{
    width: 100%;
	/* border-right: 1px solid var(--PAGE_BACKGROUND_COLOR); */
}

#stlpec #stlpec_text{

    display: block;
    float: left;
    position: relative;
    width: 65%;
    background-color: inherit;
    margin-bottom: 50px;

}


#stlpec:hover{
    /*
    box-shadow: var(--BOX_SHADOW) var(--SHADOW_COLOR_HOVER);
    */
}

#stlpec h2{

    color: var(--MAIN_COLOR);
    font-weight: bold;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 18px;
    letter-spacing: 1px;
    font-variant: small-caps;
    margin-left: 15px; 
    margin-right: 15px;
    margin-top: 17px;
    margin-bottom: 15px;

}

#stlpec p{

    text-indent: 15px;
    margin: 0px 15px 15px 15px;
    line-height: var(--DEFAULT_LINE_HEIGHT);
    font-size: var(--DEFAULT_FONT_SIZE);

}

#stlpec ul{
}

#stlpec li{

    line-height: var(--DEFAULT_LINE_HEIGHT);
    font-size: var(--DEFAULT_FONT_SIZE);

}

#stlpec #tlacidlo {
   
    display: block;
    float: right;
    position: absolute;
    width: 100px;
    text-align: center;
    bottom: 0px;
    right: 0px;
   
    border-radius: var(--BUTTON_BORDER_RADIUS);
    font-weight: normal;
    text-decoration: none;
    margin: 15px;
    padding: 3px 10px;

    background-color: darkblue;
    color: white;

}

#stlpec #tlacidlo:hover{

    background-color: #00005B;
    color: white;

}


p{

    margin-left: 5px;
    margin-right: 20px;
    line-height: var(--DEFAULT_LINE_HEIGHT);
    text-align: justify;
    
}

ul li a{

    font-weight: bold;

} 

ul li, ol li {

    line-height: var(--DEFAULT_LINE_HEIGHT)/*1.3*/;
    width: 95%;
}


span {

    font-weight: bold;
    font-size: var(--DEFAULT_FONT_SIZE);

}

#aplikacia{

    border: solid 3px #b2b2b2;
    margin: 0px 10px;
    float: right;
    height: 40%;

}

#page_body #casti{

    color: var(--MAIN_COLOR); 

}

#pozadie_obr{
    background-color: white;
}

#efekt_obr{

    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
    max-width: 100%;

}

#efekt_obr img{

    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
}

* {box-sizing:border-box}

.slideshow-container {

    display: block;
    text-align: center;
    float: left; /* change from none to left 14.5.2025 */
    
    width: 100%;
    height: auto;

    position: relative;
    margin: auto;
    margin-top: 20px;
    /* margin-bottom: 20px; */

    padding: 10px;
    /* border: 1px solid var(--BOX_BORDER_COLOR); */
    border: 1px solid #C0C0C0;
    border-radius: var(--BORDER_RADIUS);
    background-color: var(--PAGE_BODY_COLOR);
    
}

.mySlides {

    display: none;

}

/* Next & previous buttons */
.prev, .next {
    
    cursor: pointer;
    position: absolute;
    
    top: 50%;
    width: auto;

    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.3s ease;
    border-radius: var(--BORDER_RADIUS);
    color:black;
    

}

/* Position the "next button" to the right */
.prev {
    left: 10px;
    border-radius: var(--BORDER_RADIUS);

}


/* Position the "next button" to the right */
.next {
    right: 10px;
    border-radius: var(--BORDER_RADIUS);

}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {

    background-color: rgba(255,255,255,0.8);
    border: solid 1px silver;
    color: black;

}

/* Caption text */
.text {

    /* background-color: var(--PAGE_BODY_COLOR); */
    background-color: inherit;
    color: black;
    font-size: 15px;
    padding: 8px 12px;
    width: 100%;
    text-align: center;

}


/* Fading animation */

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    animation-name: fade;
    animation-duration: 1s;
}

@-webkit-keyframes fade {

    from {opacity: .4}
    to {opacity: 1}

}

@keyframes fade {

    from {opacity: .4}
    to {opacity: 1}

}

.galeria{
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
    text-align: center;
    width: 70%;

}

.galeria img{
    width: 100%;
}

.galeria video{
    width: 100%;
}

#box_tovar{

    float: left;  
    margin: 10px;

}

/****************************************************************************************/
/*                             INFO DIALOG                                              */
/****************************************************************************************/


#infodialog_cover{

    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: transparent;
    background-color: rgba(128, 128, 128, 0.8); /* modern browsers */
    /*
    OPACITY FOR IE:
    0.0 = 00
    0.1 = 19
    0.2 = 33
    0.3 = 4c
    0.4 = 66
    0.5 = 7f
    0.6 = 99
    0.7 = b2
    0.8 = cc
    0.9 = e6
    1.0 = ff
    */

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#CC808080', EndColorStr='#CC808080')"; /* For IE8 */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CC808080', EndColorStr='#CC808080'); /* For IE6,IE7 */
    /*zoom: 1!important; /* Trigger hasLayout */    

}

#infodialog_outer{

    display: block;
    position: relative;
    text-align: center;
    top: 30%;

}

#infodialog_inner{

    display: block;
    position: relative;
    text-align: left;
    margin: 0px auto;
    width:300px;
    border: 1px solid silver;

}

#infodialog_inner table{

    background-color: mintcream;
    width: 300px;
    height: 100px;
    border-collapse: collapse;

}

#infodialog_inner th{

    background-image: url('/pictures/dialogtitle.gif');
    background-repeat: repeat-x;
    border-bottom: 1px solid white;
    height: 20px;
    color: white;

}

#infodialog_inner td{

    font-size: var(--DEFAULT_FONT_SIZE);
    font-family:  var(--DEFAULT_FONT_FAMILY);
    border-bottom: 1px solid gray;

}

#infodialog_inner input{

    width: 70px;

}

/****************************************************************************************/
/*                             NAVIGACIA (MENU)                                         */
/****************************************************************************************/

/*Iba koli zobrazovaniu a skryvaniu menu v responzivnom dizajne*/

.hidden{
    display: none !important;
}

nav ul{

    display: block;
    float: left;
    width: 100%;
    height: 35px;/*36px; znizene 28.4.2025*/
    background-color: var(--MAIN_COLOR);
    border-radius: var(--BORDER_RADIUS);
    box-shadow: var(--BOX_SHADOW) var(--SHADOW_COLOR_HOVER);
    margin: 0px;
    padding-left: 20px;
    color: white;

}

nav ul li {

    display: block;
    float: left;
    width: auto;
    line-height: 34px;
    background: var(--MAIN_COLOR);
    color: white;
    border: 1px solid var(--MAIN_COLOR);
    border-radius: var(--BORDER_RADIUS);



    /* display: block; */
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
    font-style: normal;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration: none;
    font-variant: small-caps; 
    color: inherit;
    padding-left: 10px;
    padding-right: 10px;

    cursor: pointer;


}

nav ul li:hover {
    background: white;
    color: black;
}

nav ul li a {

    display: block;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
    font-style: normal;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration: none;
    font-variant: small-caps; 
    color: inherit;
    /* padding-left: 10px;
    padding-right: 10px; */

}

#v_menu_container{

    display:none;
    /* float: left; */
    position: absolute;
    z-index: 2;
    margin: 0px;
    padding: 0px;
    padding-top: 3px;

    margin-left: -7px; /* aby vertikalne menu bolo hned pod hlavnym menu (-10px)*/




    /* background-color: green; */


}


nav ul li ul {

    display:block;
    width: auto;
    height: auto;
    margin-top: 0px;
    margin-left:-5px;
    padding: 0px;
    box-shadow: var(--BOX_SHADOW) var(--SHADOW_COLOR_HOVER);
    
}


nav ul li ul li{

    display: block;
    float: left;
    clear: left;
    width: 100%;
    text-align: left;

}


nav ul li:hover > #v_menu_container {display: block;}
nav ul li div ul li {background: var(--MAIN_COLOR);}
nav ul li div ul li:hover {background: white;}

#highlighted_block{
    

    display: block;
    float: left;
    width: 100%;
    border-radius: var(--BORDER_RADIUS);
    padding-left: 20px;
    padding-right: 20px;
    background-color: white;
    margin-top: 20px;
	
    border: 1px solid #C0C0C0;
    /* border-right: 1px solid var(--BOX_BORDER_COLOR);
	border-bottom: 1px solid var(--BOX_BORDER_COLOR);
    box-shadow: var(--BOX_SHADOW) var(--SHADOW_COLOR); */
    
}


#highlighted_block:hover{

    /*box-shadow: var(--BOX_SHADOW) var(--SHADOW_COLOR);*/

}

#highlighted_block p{

    color: black;
    line-height: var(--DEFAULT_LINE_HEIGHT);

}


#highlighted_block li{

    color: black;
    line-height: var(--DEFAULT_LINE_HEIGHT);

}

#highlighted_block h1{

    color: var(--MAIN_COLOR);
    letter-spacing: 2px;
    font-variant: small-caps;
    font-variant: normal;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 22px;

}

#highlighted_block h2{

    color: var(--MAIN_COLOR);
    letter-spacing: 1px;
    font-variant: small-caps;
    font-variant: normal;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 18px;

}

#highlighted_block h3{
    color: var(--MAIN_COLOR);
    letter-spacing: 1px;
    font-variant: small-caps;
    font-variant: normal;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 16px;
}



#highlighted_block a{

    text-decoration: none;
    color: var(--MAIN_COLOR);

}

#highlighted_block a:hover{
    text-decoration: underline;
}

#highlighted_block_navigation{

    display: table;
    /* width:fit-content; */
    margin-left: auto;
    margin-right: auto;
}

#highlighted_block_navigation a{

    background-color: green;
    color: white;    
    text-decoration: none;
    text-align: center;
    border-radius: var(--BUTTON_BORDER_RADIUS);
    /* box-shadow: var(--BOX_SHADOW) var(--SHADOW_COLOR); */
    padding: 15px;
    
    font-variant: normal;
    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: 16px;
    letter-spacing: 1px;

}
    

#highlighted_block_navigation a:hover{
    background-color: darkgreen;
    color: white;
    text-decoration: none;
    
}

#info_table{

    font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
    text-align: left;
    border: 1px solid silver;
    border-collapse: collapse;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: white;
    
}

#info_table th{

    border: 1px solid silver;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: white;
    background-color: gray;

}

#info_table td{

    border: 1px solid silver;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;

}

#info_table tr{

    height: 28px;

}

#login_nav{

    display: block;
    position: absolute;
    width: auto;
    right: 10px;
    top: var(--MOTTO_TOP);
	color: black;
	text-decoration: none;
    /* background-color: var(--PAGE_LOGIN_COLOR); */
    
    /* pozadie je priesvitne, keby nahodou prekryvalo logo v responzivnom dizajne*/
    background-color: rgba(var(--PAGE_LOGIN_COLOR), 0.7);

}

.login_item{
    
    text-decoration: none;
    margin-left: 15px;
    
}


.login_item:link{

    color: black;
}

.login_item:visited{
    color: black;

}

.login_item:hover{

    color: black;
	text-decoration: underline;

}

#download_button{
	
    color: black;
    padding: 2px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color:transparent; 
    background-image: url('/pictures/page/download-solid-blue.svg');
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 20px;
	
}

#download_button:hover{

    background-image: url('/pictures/page/download-solid.svg');

}


#gdpr_box{

	display:block;
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
    min-height: 56px;
    padding-top: 5px;
	color: yellow;
	background-color:black;
	opacity:0.7;
	font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
	
}

#gdpr_box a{

	color: yellow;
	text-decoration: underline;

}

#gdpr_box a:hover{

	color: white;

}

#gdpr_content{

    display: block;
    float: left;
    margin-bottom: 5px;
    text-align:center; 
    width: 100%;    

}

#gdpr_button_box{

	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 5px;
	width: 200px;
}

#gdpr_button{

	font-family:  var(--DEFAULT_FONT_FAMILY);
    font-size: var(--DEFAULT_FONT_SIZE);
    width: 100%;

}

#socmedia{
    display: table;
    /* background-color: blue; */
    margin-left: auto;
    margin-right: auto;
    
}

#socmedia img{
    display: block;
    float:left;
    /* margin-right: 20px; */
    margin-top: 0px;
}

/* Sekcia skolenia na stranke kamerova-inspekcia.php*/
odkazova_sekcia {
    scroll-margin-top: 110px;
}

@media (max-width: 768px) {

    odkazova_sekcia {
        scroll-margin-top: 0px;
      }    

    #root{

        /* background-color: lime; */
        width: 100%;
    }


    body {
        --DEFAULT_FONT_SIZE: 13px;
        --CONTENT_PADDING: 0px;/**10px*/
    }

    #motto {
        display: block;
        float: none;
        position: relative;
        width: 100%;
        left: 0px;
        top: 0px;
        font-size: 14px;
        text-align: center;
        /* background-color: yellow; */
    }

    .logo {
        position: relative;
        margin-left: 0;
        top: 0px;
        float: none;
        text-align: center;
        /* background-color: yellow; */
    }

    .logo img {
        width: 60%;
        max-width: 100px;
        margin: auto;
    }

    #login_nav{
        top: 0px;
    }

    #header{

        display: block;
        float: none;
        position: relative;
        height: auto;
        width: 100%;
        background-color: var(--PAGE_HEADER_COLOR);
        border-radius: var(--BORDER_RADIUS);
        /* background-color: silver; */
    
    }

    #title {
        font-size: 16px;
        text-align: center;
        padding-left: 10px;
        margin-top: 5px;
    }

    #no_title{
        margin-top: 5px;

    }

    #highlighted_block {
        /* padding-left: 10px;
        padding-right: 10px; */
        /* margin-top: 100px; */
    }

    #page_body {
        float: left;
        padding-left: 4px;
        padding-right: 4px;

        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;

        width: 100%;
    }

    #stlpec #pozadie_obr, 
    #stlpec #stlpec_text {
        width: 100%;
        float: none;
        display: block;
        padding: 0px;
    }

    nav ul li {
        
        float: none;
        width: auto;
        text-align: center;
        /* background-color: blue; */
        margin: auto;

    }

    nav ul li img{
        margin:auto;
    }

    /* Podmenu */
    nav ul li ul {
        width: 100%;
        margin-left: 0px;

    }

    nav ul {

        flex-direction: column;
        padding: 0;
        /*padding: 10px;/*0*/
        background-color: green;
        height: auto;

    }

    #v_menu_container{

        display: none;
        float: none;/*left;*/
        position: absolute;/*absolute*/
        z-index:2;
        margin: 0px;
        margin-left: -10px; /* aby sa vertikalne menu zobrazovalo hned pod hlavnym*/
        padding: 0px;
        padding-top: 3px;
        width: 99%;
    
    }
    

    #gdpr_button_box {
        float: none;
        width: 100%;
        margin: 10px auto;
        margin-bottom: 5px;
    }

    #page_head {
        position: relative;
        width: 100%;
    }

    /**************************************************************************************/

    #stlpec #tlacidlo {
   
    float: none;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    
    }

    #stlpec h2{
        text-align: center;
    }    

    #stlpec #stlpec_text{
        margin-bottom: 0px;
    }

    /* Zarovnavnavanie do stredu aj znaciek odsekov (list-style-position: inside; -> znacky su sucasdtou li) */
    /* #stlpec ul{ 
        list-style-position: inside;
        text-align: center;
    } */

}

@media screen and (max-width: 768px/*600px*/) {
    #table_editor, 
    #table_editor thead, 
    #table_editor tbody, 
    #table_editor th, 
    #table_editor td, 
    #table_editor tr {
      display: block;
      /* background-color: green; */
    }
    #table_editor thead tr {
      display: none;
    }
    #table_editor td {
      position: relative;
      /* padding-left: 50%; */
    }
    #table_editor td::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      font-weight: bold;
    }

  }

/* Pre skryvanie a odkryvanie menu pri responzivnych obrazovkach */
.hidden{
    display: none !important;
}

/* Pri desktopoch sa vobec nebude zobrazovat v menu tlacidlo pre skryvanie / zobrazovanie menu */
@media (min-width: 769px) {
  #hidden_button {
    display: none;
  }
}