/*@import url('https://fonts.cdnfonts.com/css/linux-biolinum?styles=33783,33785,33784,33787,33788,33790,33786,33789');

 */               

/*@font-face
{
font-family: "Linux Biolinum";
src: url("../fonts/LinBiolinum_R_G.ttf");
}  */
/*
@font-face
{
font-family: "Linux Biolinum Italic";
src: url("../fonts/LinBiolinum_RI_G.ttf");
}   */

@font-face
{
font-family: "Roboto";
src: url("../fonts/Roboto/Roboto-Regular.ttf");
}

@font-face
{
font-family: "Roboto Thin";
src: url("../fonts/Roboto/Roboto-Thin.ttf");
}

html
{
  /*scroll-behavior: smooth;*/
}

body
{          
  background : url("../img/nebe1-comp-prog-less.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;           
  background-color: rgb(220, 221, 225);
                                                
  font-family: 'Roboto Thin', sans-serif;
  font-weight: 100;
  font-size : 15pt;
  color: white;   
  
  /*margin: 0 6px 6px 6px;*/    
  margin: 0 9px 9px 9px;  
  /*margin: 0; */
  
  /*width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;    */ 
}  

strong {
  font-family: "Roboto";
}
  
img#logo
{
  display : block;
  /*width : 33%;*/
  
  
  margin : 2.1vh auto 1.5vh auto;
  /*height: 356px;    
  max-height: 356px;    */
  height: 33vh;             
  max-width: 90vw;
  
  /*height: 93%;  
  margin : 4% auto 3% auto; */
  
  /*max-height: 33vh;  */
}  

.svgShadow {
  filter: drop-shadow( 0px 0px 1px rgb(0,0,0));
}

img#tinylogo
{
  display : inline;
  height: 39px;
  margin: 0 0 -9px 0;  
  
  -webkit-filter: drop-shadow( 0px 0px 1px rgb(0,0,0));
}

table#topBarTable
{            
    border-spacing: 0;
    z-index: 80;
    /*height: 425px;   */
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    top: 0;          
    padding-top: 9px;
    padding-bottom: 13px;
    text-align: center;
    
    background : url("../img/nebe1-comp-prog-less.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    /*background-color: rgb(220, 221, 225);       */
}         
     
#centerTD a
{
    color: white;
}     

table#topBarTable td, 
table#fixedTopBarTable td
{
    vertical-align:bottom;
}

a
{
    text-decoration: none;
    color: white; 
}


/*.cs
{
  font-family : Georgia, Times, serif;
  font-size : 95%;
  line-height : 170%;   
}     */

#bigTop
{
    text-align:center;
    /*vertical-align: bottom;
    background : url("../img/fenix1-yin-yang-white.svg") no-repeat center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;     
    
    margin : 2.1vh auto 1.5vh auto;
    
    /*height: 356px;    
    max-height: 356px;    */
    
    /*height: 33vh;     */        
    
    /*max-width: 90vw;    
    padding-top: 27vh;    */
}

.cs h1,h2
{
  line-height : normal;  
  margin-top : 0.2em;  
}

h1, h2, h3, h4, h5
{
    text-align: center;
}

h1
{
  margin-top : 0;
  margin-bottom : 0.2em;
  padding-top : 0;                                        
  font-family : "Roboto", Georgia, Times, serif;     
  font-size : 330%;
  font-style : normal;
  font-weight : normal;
  display: inline;
  text-align: center;
}  
   
h2
{
  margin-top : 0;
  margin-bottom : 18px;
  padding-top : 0;  
  font-family : "Roboto";
  font-size : 200%;
  /*font-style : italic;*/
  font-weight : normal;
}   

h3
{
  margin-top : 6px;
  margin-bottom : 9px;
  padding-top : 0; 
  font-family : "Roboto";
  font-size : 120%;
  /*font-style : italic;*/
  /*font-weight : normal;*/
}

h3#tinyBarTitle
{
  margin-top : 0;
  margin-bottom : 0;
  padding-top : 0; 
  margin-right: 15px;
  font-family : "Roboto";
  font-size : 150%;
  /*font-style : italic;*/
  font-weight : normal;
  display: inline;
}    
   
h4
{
  margin-top : 9px;
  margin-bottom : 9px;
  padding-top : 0; 
  font-family : "Roboto";
  font-size : 130%;
  /*font-style : italic;*/
  /*font-weight : normal;*/
}

h5
{    
  margin-top : 18px;
  margin-bottom : 6px;
  padding-top : 0; 
  font-family : "Roboto";
  font-size : 110%;
}

.white
{
    color: white;
}

.textShadow
{
    text-shadow: 0px 0px 3px black;
}     
 
.textShadowHeavy
{
    text-shadow: 0px 0px 6px black,  0px 0px 6px black;
}

.shadowSuperHeavy
{
    text-shadow: 0px 0px 12px black,  0px 0px 12px black,  0px 0px 12px black,  0px 0px 12px black;
}

.menu a
{
  text-decoration : none;
}

.noUnderline
{
  text-decoration : none;
}

.iconLink
{
  width : 2em;
}

a
{
    color : rgb(133, 166, 233);     
    cursor: pointer;
    /*color : #00b7ff;       */
}

div.cellLink
{
  margin : 0;
  padding : 0.7em 0 0.5em 0;
  width : 100%;
  height : 100%;
}

  
img#logosmall
{
  display : block;
  margin : 1em;
  height : 39px;  
}

#menu
{     
    display : block;
    width: 39px;
    height: 39px;
}    
#lock
{     
    width: 18px;
    height: 18px;
}    


.circle
{
  width: 33px; /* == 39 - 2*3px kv�li okraj�m*/
  height: 33px;
  border-radius: 50%;
  border: 3px solid rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.3);
  font-size: 18px; 
  color: white;
  margin-left: auto;
  margin-right: 0;
}   

#leftTD {
  width: 280px;
}

#menuTD
{
    width: 39px; 
    position: relative;
}  

#userTD
{
    width: 45px;
    padding-right: 6px; 
    position: relative;
}

.userInitial
{              
    width: 33px; /* == 39 - 2*3px kv�li okraj�m*/
    height: 33px;
    margin: 7px auto 0 auto;
    text-align: center;
}

#userMenuDiv,
#mainMenuDiv
{             
    position: absolute;
    padding : 1.5em 2em 1em 2em;
    border : none;/*1px solid rgb(210, 210, 220);*/
    border-radius: 3px;   
    background : rgba(33, 33, 39, 0.66);
    margin: 0 0 12px 0;
    z-index: 100;
    /*transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;*/
}     
  
#userMenuDiv
{             
  text-align: center;  
  display: none;   
  left: 0;
  min-width: 139px;
}

#mainMenuDiv
{           
  text-align: center;  
  display: none;     
  right: 0;
  min-width: 189px;
}  

#userMenuDiv ul,
#mainMenuDiv ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#userMenuDiv ul li,
#mainMenuDiv ul li
{  
    text-align: center;
    margin-bottom: 12px;
}

/*   WELCOME PAGE   */

div#sWrap
{
  /*min-width : 50%;*/    
  margin : 0 auto 0 auto;
}

div#fenixBGWrap
{ 
  background : url("../img/fenix1-yin-yang-white-BG-alternating-a84.svg") repeat-y 50% 0;
  background-size: 230%;    
  /*background : url("../img/fenix1-yin-yang-white-BG-alternating-a84.svg") repeat-y 50% -100% fixed;
  background-size: 230%;    */
  /*background : url("../img/fenix1-yin-yang-white-BG-alternating-a84-clipped.svg") repeat-y 50% 0;
  background-size: 100%;        */
  
  margin: 0;
  padding: 0;
  width: 100%;  
  
  position: relative;
}   

table#sMenu
{
  width : 80%;  
  /*max-width : 100vh;        */
  text-align : center;
  margin : 0 auto 0 auto;
  font-size : 200%;
  font-style : italic;
  border-top : 2px solid rgb(210, 210, 220); 
  border-bottom : 2px solid rgb(210, 210, 220);
  border-spacing : 0.5em 0;
}

table#sMenu td
{
  width : 50%;
  border-bottom : 1px solid rgb(210, 210, 220);
}
   
table#sMenu td:hover
{
  background : rgb(33, 33, 93);
}
   
table#sMenu tr:last-child td
{   
  border: none; 
}
 
div.prefooter
{
  text-align : center;
  padding : 1.5em;
  //font-size : 70%;
  width : 30%;
  margin : 0 auto 0 auto;
  color : rgb(145, 150, 160);
  border-bottom : 1px solid rgb(210, 210, 220);
}

div.footer
{
  min-width : 50%;
  max-width : 100%;  
  margin : 33px auto 0 auto;
  text-align : center;
  padding : 1.5em;
  //font-size : 70%;
    border-radius: 3px;   
  background : rgba(33, 33, 39, 0.66);
}

.greyText
{
  color : rgb(145, 150, 160);  
}

.numeriFont
{
    font-family: Arial;
    font-size: 16px;
}

table#sFooterTable
{
  margin : 0 auto 0 auto;
}

table#sFooterTable td
{
    text-align: left;
    width : 150px;
}

table#sFooterTable tr td:first-child
{
    width: 100px;
}

table#sFooterTable td.mFB, td.mYou
{
  display : none;
}

#mFooterCopyright
{
  display : none;
}

table#footerTable
{
  margin : 0 auto 0 auto;
  width : 100%;
}

table#footerTable td.center
{
  width : 80%;
  vertical-align : middle;
}

table#footerTable img.iconLink
{
  width : 2em;
}

td.left
{
  text-align : left;
}
td.right
{
  text-align : right;
}


/*  CONTENT PAGE  */
div#wrap
{
  width : 95%;
  padding : 0;
  margin : 0 auto 0 auto; 
  font-size : 100%;
}

table#mainTable
{
  margin : 0 auto 0 auto;
  max-width : 75em;
}

table#mainTable td
{
  vertical-align : top;
}

td#sideBar
{
  min-width : 20%;   
  max-width : 15em;
  padding-top : 0;
}

div#sideBarDiv
{
  /*max-width : 15em;   */
  padding : 0;
  margin : 0;          
}

div#sideBarDiv img#logo
{
  margin : 0.7em auto 2em auto;
}

div#sideBarDiv div.cellLink
{
  margin : 0;
  padding : 0.4em 0 0.2em 0;
  width : 100%;
  height : 100%;
}

td#contentTD
{             
  padding: 0 0 0 5%;   
  width : 80%;
}

.tabContent
{
  margin : 0 0 27px 0;
  padding : 1.5em 2em 2em 2em;  
  border : 1px solid rgb(38, 142, 212);
  border-radius: 0 6px 6px 6px;   
  background : rgba(33, 33, 39, 0.66);    
  background-blend-mode: color;     
  text-align: justify;  
  position: relative;
  z-index:1; 
  overflow: hidden;     
  opacity: 1;               
} 

.groupContent
{
  padding : 6px 9px 9px 9px;  
  border : 1px solid rgb(38, 142, 212);
  border-radius: 0 9px 9px 9px;   
  background : rgba(33, 33, 39, 0.66);    
  background-blend-mode: color;     
  text-align: justify;  
  position: relative;
  z-index:1; 
  overflow: hidden;     
  opacity: 1;               
}   

.sharpRightCorner
{
  border-top-right-radius: 0;
}

.content2
{
  margin : 0 0 27px 0;
  padding : 1.5em 2em 2em 2em;  
  border : 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;   
  background : rgba(33, 33, 39, 0.66); 
  text-align: justify;  
  position: relative;
  z-index: 10;            
}  

.content2 *
{
  position: relative;
  z-index: 10;  
}   
    

.polozky a
{
    text-decoration: none;
    color: white;
}    

.polozky a:hover .polozkaWrap
{
    box-shadow: 0px 0px 9px rgb(133, 166, 233), 0px 0px 9px rgb(133, 166, 233);  
    border: 1px solid rgb(133, 166, 233); 
}  

.polozkaWrap
{
  margin : 0 0 27px 0;
  padding : 0;  
  border : none;/*1px solid rgba(255, 255, 255, 0);*/  
        border : 1px solid rgba(189, 189, 189, 1);  
  border-radius: 3px;   
  background : rgba(33, 33, 39, 0.66); 
  text-align: justify;  
  position: relative;
  z-index: 10;    
}  

.polozkaWrap *
{
  position: relative;
  z-index: 10;  
}   

.polozkaContent
{                 
    padding : 1.5em 2em 2em 2em;  
    margin-left: auto;  
    margin-right: 0;         
    background : rgba(33, 33, 39, 0.66);
    height: 100%; 
    max-width: 300px;
}  
 
@media only screen and (max-width: 580px)
{   
    .polozkaWrap
    {
    }
    
    .polozkaContent
    {              
        padding : 1.5em 0 2em 0;    
        margin-left: 0;          
        margin-right: 0;    
        max-width: 100%; 
        width: 100%;        
        background : rgba(33, 33, 39, 0.66); 
    }   
       
    .polozky a:hover .polozkaWrap
    {
        border: 1px solid rgb(133, 166, 233);
    }  
}

.content3
{
  margin : 0 auto 27px auto;
  padding : 1.5em 2em 2em 2em;  
  border : none;
    border-radius: 3px;   
  background : rgba(33, 33, 39, 0.66); 
  text-align: justify;  
  position: relative;
  z-index: 10;          
  max-width: 333px;  
}  

.content3 *
{
  position: relative;
  z-index: 10;  
}

/*.content:before
{
    z-index:-1;
    position:absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: " ";                               
    background : url("../img/nebe1-comp-prog-less.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;                         
    background-color : rgba(33, 33, 39, 0.66);  
    background-blend-mode: color-dodge;      
    background-blend-mode: color;     
    background-blend-mode: overlay;             
    opacity: 0.9;        
}                */

.odstavec
{
  text-align : justify;
  margin-bottom : 1em;
  font-size : 110%;
}

.listerTitle
{
  padding : 1.5em 2em 0 2em;
  border-bottom : 2px solid rgb(210, 210, 220);
}

ul.simpleList
{
  margin-top : 0.1em;
  padding-left : 1.5em;
}

.youTubeVideo
{
  width : 560px;
  height : 315px;
  max-width : 90%;
}


table#contactTable td
{
  vertical-align : middle;
  padding : 1em 1em 1em 0;
}        

table#contactTable img.iconLink
{
  width : 2em;
}
#contactDL img.iconLink
{
  width : 2em;
}

dl#contactDL
{
  display : none;
}

div#mWrap
{
  display : none;
}

.mMenuCell
{
  display : none;
}

.italic
{
  font-style: italic;
}

.center
{
  text-align: center;
}   

.justify
{
  text-align: justify;
}

/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 25:14 
   
   p�evzato odsud: https://stackoverflow.com/questions/25302836/responsive-video-iframes-keeping-aspect-ratio-with-only-css
   */
.aspect-ratio
{
  position: relative;
  width: 100%;
  height: 0;
  /* horizont�ln� video z m�ho mobilu */
  padding-bottom: 56.29%; /* The height of the item will now be 56.25% of the width.  100/56.25 = 560/315 = 1.778 */    
}       

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe
{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: none;
}

.currentUserDiv
{
    text-align: center;
    background: #333366;
}

.currentUserDiv #button
{
    background-color:  #00b7ff;    
}

textarea {
  resize: vertical;
  min-height: 93px;
}
      
input[type=text],  
input[type=number],  
input[type=password],  
input[type=email],
input[type=date],
input[type=datetime-local],
textarea
{
    text-align: left;
    padding: 12px 20px;
    box-sizing: border-box;  
    border-radius: 5px;
    border: 1px solid white;
    /*background-color:#272728;
    color:#f0f0fa;       */
    font-family: 'Roboto Thin', sans-serif;
    font-size : 13pt;      
    outline: none;
}

input[type=text],  
input[type=password],  
input[type=email],
input[type=number],
textarea {
  width: 100%;
}

input.small
{
  min-width: 273px;
  max-width: 303px;
}
 
.input-wrapper:focus-within
{
    box-shadow: 0px 0px 9px #00b7ff;  
    border: 1px solid #00b7ff;
}         

.input-wrapper:hover
{
    box-shadow: 0px 0px 6px white; 
}  

button.dialogButton
{
    background-color:  #00b7ff;
    border: none;
    padding: 12px 21px 12px 21px;   
    color: white;  
    font-family : "Roboto Thin";
    font-size : 15pt;
    cursor: pointer; 
}    

.veryRound {
  border-radius: 22px;
}

button:hover
{
    box-shadow: 0px 0px 6px #00b7ff;
}   

button:disabled
{            
    cursor: default; 
    height: 33px;     
    background-color: rgb(122, 122, 127), rgb(122, 122, 127);
} 
     
button:disabled:hover
{
    box-shadow: none;
}   

.button,
.wideButton
{                          
    color : white;     
    font-family : "Roboto Thin";
    font-size : 15pt;
    background-color: rgb(89, 108, 199);
    padding: 12px 21px 12px 21px;   
    display: inline-block;
    margin-left: auto;
    margin-right: auto; 
    margin-top: 6px;
    font-size: 15pt;
}    

.wideButton
{                          
    padding: 12px 72px 12px 72px;   
}    

.button:hover,  
.wideButton:hover
{
    box-shadow: 0px 0px 6px rgb(89, 108, 199),  0px 0px 6px rgb(89, 108, 199);///*#00b7ff;//*/rgb(129, 148, 239);
}
 
.specialButton
{
    background-color:  #00b7ff;    
    padding: 12px 21px 12px 21px;   
    border: none;                  
    font-family : "Roboto Thin";
    font-size : 15pt;
    color: white;
    font-size: 15pt;
    cursor: pointer;  
    margin-top: 6px;  
    margin-left: auto;
    margin-right: auto; 
    display: inline-block;
}    

.specialButton:hover
{
    box-shadow: 0px 0px 6px #00b7ff;
}

#emailWarning,
#usernameWarning,
#passwordWarning,
#captchaWarning
{
    display: none;
    color: #00b7ff;
}    

#loginWarning
{
    display: none;
    color: #00b7ff;
    line-height: 1.2;
    padding-top: 9px;
    padding-bottom: 9px;
}

#loginBreakLine
{
    display:none;
}

#registerWarning 
{
    display: none;
    color: #aaaaab;
}     

#regButton
{
    display: none;
}

a.anchor
{
    display: block;
    position: relative;
    top: -93px;
    visibility: hidden;
}

.inverted-border-radius::before {
  content: "";
  position: absolute;
  
  background-color: transparent;
  bottom: -50px;
  height: 50px;
  width: 25px;
  border-top-left-radius: 25px;
  box-shadow: 0 -25px 0 0 #F66969;
}

.groupHeader
{   
    color: rgba(38, 142, 212, 0.574);  
    font-family: "Roboto";
    background-color: rgba(255, 255, 255, 0.774);  
    padding: 9px 18px 9px 18px;   
    border : 1px solid rgb(184, 184, 184);
    border-top: none;
    display: inline-block;
    border-radius: 0 0 6px 6px;
    font-size: 15pt;
    max-width: 100%;  
    position: relative;
    z-index: 100;
    margin: -10px auto 9px auto; 
    vertical-align: top;
} 

.groupHeaderSingleLine
{   
    color : white;
    background-color: rgba(38, 142, 212, 0.574);  
    padding: 9px 9px 9px 9px;   
    border : 1px solid rgb(38, 142, 212);
    /*border-top: none;
    border-left: none;*/
    display: inline-block;
    border-radius: 3px;
    font-size: 15pt;
    max-width: 100%;  
    position: relative;
    z-index: 100;
    margin: -10px 9px -10px -10px; 
    vertical-align: top;
} 

.posAbsolute
{
  position: absolute;
}

.absoluteCenter
{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.content
{
  margin : 0 0 27px 0;
  padding : 1.5em 2em 2em 2em;  
  border : none;
  border-radius: 3px;   
  color:rgb(33, 33, 39);
  background : rgba(255, 255, 255, 0.66);    
  background-blend-mode: color;     
  text-align: justify;  
  position: relative;
  z-index:1;     
  opacity: 1;               
}     

#contentDiv {
  max-width: 600px;
  margin: 0 auto 0 auto;
  min-height: 100px;
}

.groupWrapper
{
  border : 1px solid rgb(38, 142, 212);
  border-radius: 3px;
  margin : 0 0 18px 0;
  padding: 9px 18px 18px 18px;
  vertical-align: top;
  position: relative;
  /*max-width: 90%;
  /*display: inline-block;*/
}

.groupWrapperSingleLine
{
  border : 1px solid rgb(38, 142, 212);
  border-radius: 3px;
  margin : 0 0 9px 0;
  padding: 9px 18px 9px 9px;
  vertical-align: top;
  position: relative;
}

.groupHeaderWrap
{
  text-align: center;
}

.imgWrap
{
  padding: 0;
  overflow: hidden;
}

.img
{
  margin-bottom: -5px;
}

.imgWrapHeader
{
  margin: 0; 
}

.groupBottomMargin
{
  margin : 0 0 18px 0;
}

.checkBottomMargin
{
  margin : 0 0 18px 0;
}

.inlineBlock
{
  display: inline-block;
  min-width: 90px;
}

.check
{   
    color : white;
    background-color: rgba(38, 142, 212, 0.574);  
    padding: 6px 9px 6px 9px;   
    margin-right: 9px;   
    margin-left: 9px;   
    border : 1px solid rgb(38, 142, 212);
    display: inline-block;
    border-radius: 3px;
    font-size: 15pt;
    max-width: 100%;  
    vertical-align: top;
} 

button
{   
    color : white;
    background-color: rgb(65, 39, 179);
    padding: 6px 9px 6px 9px;   
    margin-right: 9px;   
    border : 1px solid rgb(38, 142, 212);
    display: inline-block;
    border-radius: 3px;
    font-size: 15pt;
    max-width: 100%;  
    vertical-align: top;
} 

.qr
{
  position: relative;
  top: 0;
  left: 0;
}


.tab
{   
    color : white;
    background-color: rgb(33, 33, 39);  
    padding: 12px 18px 12px 18px;   
    /*display: inline-block;*/
    border-radius: 18px 18px 0 0;
    margin: 0;
    border: none;
    font-size: 15pt;
    max-width: 100%;  
    position: relative; /* proto�e automaticky m� position static, a na tu z-index nem� vliv  */
    z-index: 0;
} 

.tab:hover
{                  
    background-color: rgb(44, 54, 99);
    box-shadow: 0px 0px 6px #00b7ff;
    /*box-shadow: 0px 0px 6px rgb(44, 54, 99);  */   
    z-index: 11;
}

.tab_selected
{
  background-color: rgb(38, 142, 212); 
  color: black;
}

.tab_selected:hover
{                  
    background-color: rgb(95, 182, 240);
    box-shadow: 0px 0px 6px white;
    /*box-shadow: 0px 0px 6px rgb(89, 108, 199);*/
    z-index: 11;
}

.activeTab
{   
    background-color: rgb(89, 108, 199);
}    

.activeTab:hover
{                                 
    background-color: rgb(89, 108, 199);
    box-shadow: 0px 0px 6px rgb(89, 108, 199);
    z-index: 11;
}

.tabTable
{
    width: 100%; 
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    border-bottom: 3px solid rgb(89, 108, 199);
}

.tabTable td,
.tabTable tr
{
    padding: 0;
    margin: 0;
}      

.tabTable td
{
    width: 50%;
}

:root 
{
    --plyr-font-family: "Arial";
}

.nodisplay
{
    display: none;
}

.listButton
{   
    color : white;
    background-color: rgb(33, 33, 39);  
    padding: 12px 6% 12px 6%;   
    display: inline-block;   
    font-size: 15pt;
    width: 88%;  
    position: relative; /* proto�e automaticky m� position static, a na tu z-index nem� vliv */ 
    z-index: 0;
} 

.listButton:hover
{                   
    background-color: rgb(44, 54, 99);
    z-index: 11;
}

.activeListButton
{   
    background-color: rgb(89, 108, 199);
}     

.activeListButton:hover
{                                 
    background-color: rgb(89, 108, 199);
    box-shadow: 0px 0px 6px rgb(89, 108, 199);
    z-index: 11;
}

ul
{
    padding-left: 18px;
}

li
{
    margin-bottom: 9px;
    text-align: justify;
}

p.small
{
    margin-top: 9px;
    margin-bottom: 9px;
}

.disable-select
{
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

.roundImg
{
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 180px;    
    max-width: 90%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.roundImgLink
{
    display: block;
    width: 180px;    
    max-width: 90%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.imgLinkDiv
{
    margin-left: auto;
    margin-right: auto;
}

.imgLinkDiv a
{
    display: inline-block;  
    margin-left: auto;
    margin-right: auto;
}

#fotkaVasek
{
    width: 330px;
    max-width: 90%;
}   

#fotkaVasek2
{
    width: 330px;
    max-width: 90%; 
    border-radius: 33px;
    -moz-border-radius: 33px
    -webkit-border-radius: 33px;
}   

#logoKvety:hover
{
    box-shadow: 0px 0px 9px rgb(250, 185, 91); 
}   

#logoWutslav:hover
{
    box-shadow: 0px 0px 9px rgb(0, 0, 233); 
}


#logoKvetyTall
{
    //display: none;
    margin-left: auto;
    margin-right: auto;
    max-height: 21vh;
}

label
{
    display: inline-block;
    margin-top: 12px;
    margin-bottom: 6px;
}

a.iblock
{
    display: inline-block;
    margin-top: 12px;
    margin-bottom: 6px;
}

#kolaz
{
    background : url("../img/pics/tqm2.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;   
    
    padding: 56.25% 0 0 0;         
}       

.aspectText
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#kurz1
{
    background : url("../img/pics/Meditace2.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;           
}

#kurz2
{
    background : url("../img/pics/Taiji.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;           
}

#kurz3
{
    background : url("../img/pics/Qigong2.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;           
}     

#kurz4
{
    background : url("../img/pics/Meditace2.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;           
}

.topLabel
{
  margin-top : 0;
  margin-bottom : 18px;
  padding-top : 0;  
  font-family : "Roboto Thin";
  font-size : min(4.66vw, 230%);/*250%;*/
  
  /*font-style : italic;*/
  font-weight : normal;  
  color: white;
}  

.topLabel:hover
{                  
    text-shadow: 0px 0px 12px rgb(89, 108, 199), 0px 0px 12px rgb(89, 108, 199);  
}
 
select
{
  font-family: 'Roboto Thin', sans-serif;
  font-size : 15pt;
  background-color: rgba(33, 33, 39, 0.66);
  color: white;
  border:rgb(38, 142, 212) 1px solid;
  border-radius: 9px;
  padding: 9px;
}

select.rightMargin
{
  margin-right: 9px;
}

select.select-table
{
  margin-bottom: 18px;
}

#taijiLabel
{
    position: absolute;
    left: 18%;
    top: 21%;  
    transform: translate(-50%, -50%);
}    

#qigongLabel
{
    position: absolute;
    left: 50%;
    top: 50%; 
    transform: translate(-50%, -50%);
}

#meditLabel
{
    position: absolute;
    left: 82%;
    top: 78%;      
    transform: translate(-50%, -50%);
} 

/*@media only screen and (max-width: 958px)
{
  .topLabel
  {
    font-size: 200%;
  }     
}    
@media only screen and (max-width: 848px)
{
  .topLabel
  {
    font-size: 150%;
  }
}     
@media only screen and (max-width: 758px)
{
  .topLabel
  {
    font-size: 130%;
  }
}   
@media only screen and (max-width: 578px)
{
  .topLabel
  {
    font-size: 100%;
  }
}      
@media only screen and (max-width: 474px)
{
  .topLabel
  {
    font-size: 80%;
  }
}    */

img.imgItem
{
  display: inline-block;
  max-width: 39vw;
  max-height: 50vh;
  margin-right: 9px;
  cursor: pointer;
}

img.imgItem:last-child
{
  margin-right: 0;
}

.noLineWrap {
  white-space: nowrap;
}

.noPadding {
  padding: 0;
}

.smallPadding {
  padding: 9px;
}

.smallPaddingWithoutTop {
  padding: 0 9px 9px 9px;
}

.smallPaddingOnlyTop {
  padding: 9px 0 0 0;
}

.smallMarginOnlyTop {
  margin: 9px 0 0 0;
}

.noBorder {
  border: none;
}

.noBackground {
  background: none;
}

.noMargin {
  margin: 0;
}

#pathTD {
  text-align: left;
}

#vyhledat
{     
  width: 27px;
  height: 27px;
  vertical-align: bottom;
} 

#vyhledatInput {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;    
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  border-bottom: 3px white solid;
  background: rgba(255, 255, 255, 0.2);  
  text-align: left;
  min-width: 27px;
  max-width: 9000px;
  width: 100%;
  padding: 12px 20px;
  color:#f0f0fa;       
  font-family: 'Roboto', sans-serif;
  font-size : 16pt;   
  padding: 3px;
}

#vyhledatInput:focus 
{
    box-shadow: 0px 0px 9px #00b7ff;  
    border: none;
    border-bottom: 3px white solid;
    outline: none;
}             

#vyhledatInput:hover 
{
    box-shadow: 0px 0px 6px white; 
}

/* Change placeholder text color */
input#vyhledatInput::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Firefox-specific styles */
@-moz-document url-prefix() {
  .my-input::placeholder {
    color: rgba(255, 255, 255, 0.8);
  }
}

#vyhledatDiv {
  width: 100%;
  margin-bottom: 3px;
}

#vyhledatInput-autocomplete-list
{             
    position: absolute;
    padding : 0.3em 0 0.9em 0;
    text-align : left;
    border : none;/*1px solid rgb(210, 210, 220);*/
    border-bottom-left-radius: 3px;   
    border-bottom-right-radius: 3px;   
    color:rgb(33, 33, 39);
    background : rgb(233, 233, 239);
    margin: 0;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 85vh;
    -webkit-filter: drop-shadow( 0px 6px 6px rgba(39, 39, 39, 0.716));
    box-shadow: drop-shadow( 0px 6px 6px rgba(39, 39, 39, 0.716));
    /*transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;*/
}     

#vyhledatInput-autocomplete-list div {
  cursor:pointer;
  padding : 3px 0.9em 3px 0.9em;
}

#vyhledatInput-autocomplete-list div:hover {
  background:rgb(200, 205, 230);
  cursor:pointer;
}

.autocomplete-active {
  background:rgb(160, 171, 226);
}

table.listTable {
  border-spacing: 0;
  border-radius: 9px;
  width: 100%;
}

table.listTable td {
  padding: 12px 18px 12px 18px;
  text-align: center;
}

table.listTable tr {
  background-color: #f1f1f1;
  cursor: pointer;
}

table.listTable tr:hover {
  background-color: #d4e4ff;
}

table.label-value-list {
  border-spacing: 9px;
  width: 100%;
}

table.label-value-list tr td:first-of-type {
  font-family : "Roboto";
  font-weight: bold;
  padding-right: 18px;
  color :rgba(8, 116, 216, 0.574);
}

table.label-value-list tr td:last-of-type {
  width: 100%;
}

table.tableTable td,th {
  padding-right: 18px;
  padding-left: 9px;
  padding-bottom: 9px;
}

tr.extraTableLine td {
  font-weight: bold;
}

.noPadding {
  padding: 0;
}

.verticalOverflow {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 50vh;
}

.horizontalOverflow {
  overflow-x: auto;
  overflow-y: hidden;
}

.flexContainer {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  margin-right: -18px; /* Adjust for the gutter */
}

.flexItem {
  flex: 1; /* Distribute available space equally among flex items */
  min-width: 270px; /* Ensure flexibility even if content overflows */
  box-sizing: border-box; /* Include padding and border in the total width */
  padding: 10px;
  text-align: center;
  margin-right: 18px;
}

#fullscreen-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#fullscreen-image {
  max-width: 93%;
  max-height: 93%;
}

#close-button {
  position: absolute;
  top: 9px;
  right: 18px;
  color: white;
  font-size: 39px;
  font-weight: bold;
  cursor: pointer;
}

#arrow-left, #arrow-right {
  position: absolute;
  top: 50%;
  color: white;
  width: 39px;
  height: 39px;
  cursor: pointer;
}

#arrow-left {
  left: 10px;
}

#arrow-right {
  right: 10px;
}

.pathItem {
  color: white;
  cursor: pointer;
}

.pathItem:hover {
  text-shadow: 0px 0px 9px #007cad, 0px 0px 9px #007cad, 0px 0px 9px #007cad;
}

.pathItem:hover .pathIcon {
  filter: drop-shadow( 0px 0px 2px #007cad);
}

.pathSeparator {
  width: 27px;
  height: 27px;
  margin-left: 9px;
  margin-right: 9px;
  vertical-align: bottom; 
}

#searchButtonTD {
  width: 39px;
}

#searchTD { 
  padding-left: 9px;
}

#searchButtonTD { 
  padding-bottom: 6px;
}

#pathTD { 
  padding-left: 9px;
  font-weight: bold;
  font-size: 110%;
  max-height: 27px;
  overflow: hidden;
  white-space: nowrap;
}

#currentPathDiv {
  max-height: 27px;
  display: inline-block;
}

.autocomplete-icon {
  width: 27px;
  height: 27px;
  vertical-align: bottom; 
}

.pathIcon {
  width: 27px;
  height: 27px;
  vertical-align: bottom; 
  filter: drop-shadow( 0px 0px 1px rgb(0,0,0));
}

#hiddenPathButton {
  display: none;
}

#hiddenPathButtonImg {
  width: 27px;
  height: 27px;
  vertical-align: bottom; 
  filter: drop-shadow( 0px 0px 1px rgb(0,0,0));
  margin-bottom: 6px;
}

#hiddenPathButtonImg:hover {
  filter: drop-shadow( 0px 0px 2px #007cad);
}

.editButton {
  display: none;
  position: absolute;
  top: 9px;
  right: 9px;
}

.editButtonImg {
  width: 27px;
  height: 27px;
}

.groupWrapper:hover > .editButton {
  display: inline-block;
}

.noPadding {
  padding: 0;
}

table.foodCalculation {
}

table.foodCalculation td:first-child {
  min-width: 208px;
}

table.foodCalculation td:nth-child(2) {
  
}

.input-wrapper{
  display: flex;
  background-color: #ffffff;
  border: 1px solid #7b7b93;
  margin: 0;
  border-radius: 5px;
  width: 100%;
}
.prefix,
.suffix{
  position: relative;
  color: #7b7b93;
}
.prefix{
  padding: 15px 0 15px 15px;
}
.suffix{
  padding: 15px 15px 15px 0;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

table.calcTable td {
  width: 50%;
}

div.resultDiv {
  text-align: center;
}

table.calcTable th {
  text-align: center;
}

img.infoButton
{     
    width: 21px;
    height: 21px;
    cursor: pointer;
    transition: transform 0.2s ease;
}    

img.infoButton:hover {
    transform: scale(1.05);
}

.info-popup-wrap {
  display: none;
  align-items: center; /* Vertical centering */
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.info-popup-wrap.show-popup {
  display: flex;
  animation: dimfadeIn 0.3s ease;
}

.info-popup {
  display: none;
  background-color: white;
  color:rgb(33, 33, 39);
  padding: 30px 30px 20px 30px;
  border-radius: 30px;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
  z-index: 100;
  text-align:center;
}

.info-popup.show-popup {
  display: block;
  animation: fadeIn 0.3s ease;
}

.info-popup-close {
  margin-top: 22px;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: /*translateX(-50%)*/ translateY(10px);
  }
  to {
      opacity: 1;
      transform: /*translateX(-50%)*/ translateY(0);
  }
}

@keyframes dimfadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

div.login {
  max-width: 390px;
  margin: 0 auto;
}

div.register {
  max-width: 390px;
  margin: 0 auto;
}