/************************************* RESET **********************************/
body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, address, a, strong, em, dl, dt, dd, table, thead, tbody, tfoot, tr, td, th, form, fieldset, legend, caption { padding: 0px; margin: 0px; outline: none; background-position: left top; background-repeat: no-repeat; }
body { color: #000000; font-size: 16px; line-height: 18px; background-color: #FFFFFF; }
blockquote, address { font-style: normal; }
* { outline: none; }
img,a img { border: none;}
strong { font-weight: bold; }

/******************* BODY ********************************/

body{
  padding: 0px;
  margin: 0px;      
  font-family: 'Roboto', sans-serif;
  color:#2c3e50; /* implicitni barva textu */
  color: var(--black);
}

* {
  box-sizing: border-box;
}
/* *, *:before, *:after {
  box-sizing: inherit;
} */
/*
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}*/

/********************************** MENU ***************************/

header{  
}

.header-row{
  border-bottom: 1px solid #ecedee;  
}




header .header-row.gray{  
  background-color: #2c3e50;
  padding:0px 0px;
}
header .header-row.gray .dropbtn{
  color:white;
  background-color: #485b6e;   /*svetlejsi*/
}
header .header-row.gray .dropbtn.gray a{  
  color:white;
}
header .header-row.gray .dropdown:hover .dropbtn.gray {  
  background-color: #71808e;
}


header .header-row.gray .dropdown.logo .dropbtn{
  /* kdybych to chtel jinak nastylovat */
}
header .header-row.gray .dropdown.logo:hover .dropbtn {
  /* kdybych to chtel jinak nastylovat */
}
header .header-row.gray .dropdown.logo .logo-second{
  color: white;
}


header .header-row.gray .flex-middle.gray{
  background-color: var(--gray); 
  background-color: #F5F5F5;
}
header .header-row.gray .search-field .search-input{  
  background-color: var(--gray);
  background-color: #F5F5F5;
  color:var(--black);
}
header .header-row.gray .search-field .search-input::placeholder{
  color:var(--gray);  
}




.header-row-center{    
  margin:0px auto;
  max-width: 1330px; /* protoze jinak horni radek pretika na 2 radky v nekterych pripadech */
  color:#34495e;
  padding:6px 10px;
  display: flex;  
  align-items: center;  
  flex-wrap: wrap;  
  gap: 5px;  /* gap mezi radky a sloupci */
}

.header-row-center.corners{
  justify-content: space-between;  
}

.header-row-center.left{
  justify-content: flex-start;  
}  

header .flex-middle{
  display: flex;  
  align-items: center;
  justify-content: flex-start;  
}

header .flex-middle.gray{
  background-color: #eff0f2;
  padding:0px 10px;
  border-radius: 6px;
}

/********************************** DROP DOWN MENU ***********************************/
/* The container <div> - needed to position the dropdown content */
header .dropdown {
  display: inline-block;
  position: relative;  
}

header .dropdown a:hover{
  text-decoration: none;
}

/********************************** BUTTONKY ***********************************/
/* Style The Dropdown Button */
header .dropbtn {    
  text-align: center;
  text-decoration:none; 
  cursor: pointer;
  gap:5px; 
  border-radius: 6px;
  padding:8px 15px;  

  display: flex;
  align-items: center;
  justify-content: flex-start;    
}

.header-row-center span
{gap: 5px;}

/* Change the background color of the dropdown button when the dropdown content is shown */
header .dropdown:hover .dropbtn {  
    background-color: var(--lightGray);
}

header .dropbtn.gray{
  background-color: var(--lightGray);
} 
header .dropdown:hover .dropbtn.gray {
  background-color: var(--lightGrayHover);
}

header .dropbtn.blue{
  color: #FFFFFF;
  background-color: #0AB9F3;  
  background-color: var(--blue);
} 
header .dropdown:hover .dropbtn.blue {
  color: #FFFFFF;
  background-color: #089DCE; 
  background-color: var(--blueHover);
}

header .dropbtn.green{
  color: #FFFFFF;
  background-color: #16ca67;  
  background-color: var(--green);
} 
header .dropdown:hover .dropbtn.green {
  color: #FFFFFF;
  background-color: #0e974d; 
  background-color: var(--greenHover);
}

header .dropbtn.orange{
  color: #FFFFFF;
  background-color: #fba439;  
  background-color: var(--orange);
} 
header .dropdown:hover .dropbtn.orange {
  color: #FFFFFF;
  background-color: #f29e2c; 
  background-color: var(--orangeHover);
}

header .dropbtn.yellow{
  color: #FFFFFF;
  background-color: #f0c52f;  
  background-color: var(--yellow);
} 
header .dropdown:hover .dropbtn.yellow {
  color: #FFFFFF;
  background-color: #f29e2c; 
  background-color: var(--yellowHover);
}

header .dropbtn.green a{ color: #FFFFFF; }
header .dropbtn.blue a{ color: #FFFFFF; }
header .dropbtn.orange a{ color: #FFFFFF; }
header .dropbtn.yellow a{ color: #FFFFFF; }
header .dropbtn.purple a{ color: #FFFFFF; }


/********************************** TEXT NA BUTTONKU ***********************************/

header .dropbtn .menu-text{  
  font-size: 16px;
  line-height: 1.6em;    
}

header .dropbtn a{  
  font-size: 16px;
  line-height: 1.6em;
  text-decoration:none;
  color: #34495e;  
  color: var(--black)
}

header img{
  height: 35px;  
  width: auto;
}

header img.down-arrow{
  margin-left:6px; 
  height:12px;
}

header img.svg-icon{
  height:12px;
  cursor: pointer;
}

header .dropdown-content img.svg-icon{
  height:18px;
  margin:0px; 
  margin-right:8px;
}
header .dropdown-content .placeholder{
  height:18px;
  width: 18px;
  margin:0px; 
  margin-right:8px;  
}

header .logo-first{
  font-family: 'Roboto', sans-serif; 
  color: #00ca65;   
  color: var(--black);
  font-weight:700; 
  font-size:22px;
  margin-left: 8px;
}

header .logo-second{
  font-family: 'Roboto', sans-serif;  
  color:#34495e;
  color: var(--black);
  font-weight:300; 
  font-size:22px;
  margin-left: 8px;
}

/* SPECIALNE PRO USERNAME A JEHO INDIKATOR */
header .dropbtn .menu-text.username{
  font-size: 16px;
  line-height: 1.3em;    
}

header .dropbtn .menu-text.small, header .mobile-dropbtn .menu-text.small{
  font-size: 12px;
  line-height: 1.2em;    
}

header .menu-text.green{ 
  color:#16ca68; 
  color:var(--green);
}
header .menu-text.orange{ 
  color:#fdcc00; 
  color:var(--orange);
}
header .menu-text.red{ 
  color:#e74c3c; 
  color:var(--red);
}

/********************************** OBSAH DROPDOWNU ***********************************/

/* Show the dropdown menu on hover */
header .dropdown:hover .dropdown-content {
    display: block;
}

/* Dropdown Content (Hidden by Default) */
header .dropdown-content {  
    display: none;
    position: absolute;
    background-color: white;    
    min-width: 230px;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.15);
    z-index: 35; /* at nezavazi ulohy */
    border-radius: 10px;
    overflow: hidden;    
}

/* pro prave menu ucitel trochu jine nastaveni */ 
header .dropdown-content.right {
    right: 0;
}

/* Links inside the dropdown */

header .dropdown-content.subjects a{  
	font-size: 18px;    
	font-weight: 300;
}

header .dropdown-content.subjects img{  
	height: 32px;
}

header .dropdown-content a{  
  font-size: 16px;    
  padding:10px 15px;
  
  display:flex;  
  justify-content:flex-start;
  align-items: center;
  flex-wrap:no-wrap;  

  text-decoration:none;
  border-bottom: 3px solid transparent; 
  color:#34495e;
  color:var(--black);    
}

header .dropdown-content.subjects a img, header .header-row-center .dropdown-content a img, header .mobile-dropdown-content a img {  
  margin: 0px; 
  margin-right: 10px;
}

header .dropdown-content.subjects a img {height: 35px;}

/* Change color of dropdown links on hover */
header .dropdown-content a:hover {
  background-color: #f5f6f7;    
  background-color: var(--lightGray);
}

header .dropdown-content a.active{
  background-color: #00CA65;  
  color: #FFFFFF;
  background-color: var(--lightGray);
}

header .dropdown-content a.active:hover{
  background-color: #00AB55;
  background-color: var(--lightGray);
}

header .dropdown-content .divider{  
  display: block;
  height: 0px;  
  margin:5px 0px;
  border-bottom: 1px solid #ecedee;
}

header .dropdown-content .description{  
  font-size: 12px;  
  padding:0px 10px;
  padding-top:10px;
  display:block;  
  color:var(--grayHover);
}


/*
header .dropdown-content a.green, header .mobile-dropdown-content a.green{ 
  color:#16ca68; 
}
header .dropdown-content a.orange, header .mobile-dropdown-content a.orange{ 
  color:#fdcc00; 
}
header .dropdown-content a.red, header .mobile-dropdown-content a.red{ 
  color:#e74c3c; 
}
*/

/********************************** SEARCH FIELD ***********************************/

header .search-field{
  display: inline-block;
  position: relative;     
}

header .search-field .search-input{  
  font-size: 16px;
  line-height: 2.2em;
  border-radius: 6px;
  color:var(--black);
  font-weight: 400;
  background-color: var(--lightGray);
}

header .search-field .search-input::placeholder { 
  /* Most modern browsers support this now. */
  color: #bdc3c7;
}

header .search-field .search-results{
  position: absolute;  
  z-index: 25;

  margin-left:0px;
  width: 600px;
  display: none;
  border-left:1px solid #dfdfe1;
  border-right:1px solid #dfdfe1;    
  border-left:1px solid var(--lightGrayHover);
  border-right:1px solid var(--lightGrayHover);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
}

header .search-field .search-results .search-item, #content .search-item, .overlayLayerSearch .search-item{  
  text-align: left;
  width: 100%;  
  padding: 10px 10px;
  border-bottom:1px solid #dfdfe1;
  border-bottom:1px solid var(--lightGrayHover);
  
  display: flex;  
  justify-content:flex-start;
  justify-content:space-between;
  align-items: flex-start;       
  flex-wrap: nowrap;
  align-content: flex-start;
  text-decoration: none;
  background-color: white;
}

header .search-field .search-results .search-item img, #content .search-item img, .overlayLayerSearch .search-item img{    
  height: 36px;  
  border-radius: 6px;  
}

header .search-field .search-results .search-item img.subjectLogo, #content .search-item img.subjectLogo, .overlayLayerSearch .search-item img.subjectLogo{    
  height: 30px;  
  margin-left:20px;
}

header .search-field .search-results .search-item .search-item-text, #content .search-item-text, .overlayLayerSearch .search-item-text{
  color: #2d3e4f;
  margin-left: 10px;
  font-size: 16px;
  color: var(--black);
}

header .search-field .search-results .search-item span, #content .search-item span, .overlayLayerSearch .search-item span{  
  font-size: 14px;
  color: #95a5a6;
  color: var(--grayHover);
}

header .search-field .search-results .search-item:hover, #content .search-item:hover, .overlayLayerSearch .search-item:hover{
  background-color: #eff0f2;  
  background-color: var(--lightGray);
}

header .search-field .search-results .search-item.selected, #content .search-item.selected, .overlayLayerSearch .search-item.selected{
  background-color: #eff0f2;
  background-color: var(--lightGray);
}

#content .search-input{
  font-size: 16px;  
  line-height: 2.6em;
  border-color: #00a5ff;  
  border-color: #92a6a7;
  border-color: var(--lightGray);
}

/*******************************************************************************/
/*************************** MOBILE HEADER *************************************/
/*******************************************************************************/

header .header-mobile{ 
  width: 100%;
  color:#34495e;
  padding:0px 0px;
  display: none;
}

header .mobile-menu{
  display: none;
}

header .mobile-menu-avatar{
  display: none;
}

header .mobile-row{
  padding: 5px 20px; 
  padding: 1px 10px; 
  width: 100%; 
  color:#34495e; 
  color: var(--black);
}

header .mobile-row-logo{  
  padding: 10px 20px; 
  width: 100%; 
  color:#34495e;  
  color: var(--black);
  border-bottom: 1px solid #ecedee;  
  display: flex;   
  justify-content: space-between;
  align-items: center;  
}

header .mobile-row-logo.gray{
  background-color: var(--black);  
}
header .mobile-row-logo.gray .logo-second{
  color: white;
}

header .mobile-row-logo .svg-icon-menu{    
  height: 20px; 
  margin-right: 20px;
}

header .mobile-row a{    
  padding:15px 15px; 
  width:100%;
  font-size: 16px;  
  border-radius: 6px;  

  text-decoration: none;
  display: block;  
  color: #34495e;
  color: var(--black);
}

header .mobile-row a:hover {
  background-color: #f5f6f7;
  background-color: var(--lightGray);
}

header .header-mobile .divider{  
  display: block;
  height: 0px;  
  margin:5px 0px;
  border-bottom: 1px solid #ecedee;
}

header .mobile-menu-avatar .mobile-row a{    
  margin-left: 10px;
  padding: 10px 15px;  
  display:flex;  
  justify-content:flex-start;
  align-items: center;
  flex-wrap:no-wrap;  
}

header .mobile-menu-avatar .mobile-row .description{  
  font-size: 12px;  
  padding:0px 10px;
  padding-top:10px;
  display:block;  
  color:var(--grayHover);
}


/********************************** MOBILE DROPDOWN BUTTON ***********************************/

header .mobile-dropbtn {    
  text-decoration:none; 
  cursor: pointer;    
  border-radius: 6px;  

  display: flex;   
  justify-content: space-between;   
  align-items: center; 

}

header .mobile-dropbtn:hover {
  background-color: #f5f6f7;    
}

header .mobile-dropbtn.blue{
  color: #FFFFFF;
  background-color: #0AB9F3;  
  background-color: var(--blue);
} 

header .mobile-dropbtn.green{
  color: #FFFFFF;
  background-color: #16ca67;  
} 
header .mobile-dropbtn.green a:hover{
  background-color: #16ca67;  
}

header .mobile-dropbtn.gray{  
  background-color: var(--lightGray);
} 
header .mobile-dropbtn.gray a:hover{
  background-color: var(--gray);
}

header .mobile-dropbtn.green a{ color: #FFFFFF; }
header .mobile-dropbtn.blue a{ color: #FFFFFF; }

header .mobile-dropbtn .menu-text{    
  max-width:100%;
  padding: 10px 15px;   
  font-size: 16px;  
}
header .mobile-dropbtn .svg-icon{    
  margin-right: 15px;
}
header .mobile-dropdown-content img.svg-icon, header .mobile-menu-avatar img.svg-icon {
  height:18px;
  margin:0px; 
  margin-right:8px;
}
header .mobile-dropdown-content .placeholder{
  height:18px;
  width: 18px;
  margin:0px; 
  margin-right:8px;  
}


/* PRIDANO KVULI SSO, JSOU TAM OSAMELY BAREVNY ODKAZY RODINA, PODOBNE JAKO UVOD (MENU-TEXT) */
header .mobile-dropbtn a{    
  max-width:100%;
  padding: 10px 15px;   
  font-size: 16px;  
}

/********************************** MOBILE DROPDOWN CONTENT ***********************************/

header .mobile-dropdown-content { 
  width: 100%;
  display: none;    
  background-color: white;  
  overflow: hidden;     
  /* border-bottom: 1px solid #ecedee; */
}

header .mobile-dropdown-content .description{  
  font-size: 12px;  
  padding:0px 10px;
  padding-top:10px;
  display:block;  
  color:var(--grayHover);
}

/* Links inside the dropdown */
header .mobile-dropdown-content a{  
  /* margin-left:40px; */
  padding: 10px 15px;  
  padding-left: 40px;
  display:flex;  
  justify-content:flex-start;
  align-items: center;
  flex-wrap: no-wrap;
}

/* header .mobile-dropdown-content a img{  
  height: 35px;
  margin:0px; 
  margin-right:5px;
} */

/********************************** PREPINAC PREDMETU ***********************************/

header .mobile-menu-subjects{
  display: none;
}

header .mobile-menu-subjects a{
  display: flex;
  align-items: center;
  justify-content: flex-start;    
  padding: 10px 10px;    
}
header .mobile-menu-subjects a img{
  height: 26px;
  margin:0px; 
  margin-right:7px;
}

/********************************** MOBILE PODMINKA ***********************************/


@media screen and (max-width: 1200px) {
  .search-field .search-input {min-width: auto;}

  /* mensi tlacitka v menu */
  header .dropbtn {    
    margin-right:6px;  
    border-radius: 6px;
    padding:6px 6px;  
    border:0px solid lightgray;
  }
}

/**** OVERLAY SEARCH ****/

.overlayLayerSearch{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  display:none; 
  position:fixed;
  background-color: rgba(255, 255, 255, 0.9); /* 0.7 = 70% opacity */
  background-color: transparent;
  background-color: white;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  z-index: 30;    
  padding-top:7px;
}

.search-field {max-width: 100%;}
  
.overlayLayerSearch .search-input{    
  flex-shrink: 1;
  font-size: 16px;  
  line-height: 2.2em;
  padding-left:10px;    
  border-radius: 6px;
  border:0px;
  color:#2c3e50;  
  font-weight: 400;  
  background-color: #eff0f2;
  border:1px solid var(--yellow);
}

.overlayLayerSearch .search-input::placeholder {     
  color: #bdc3c7;
}

.overlayLayerSearch .search-results{      
  margin-top:0px;
  width: 100%;  
  max-height: calc(100vh - 60px);
  padding: 10px 10px;
  background-color: white;  
  border-radius: 6px;
  overflow-y: scroll;     
}