/******************* GRID MAP ********************************/
.grid-container-map {
  display: grid;
  grid-gap: 0px;  
  padding: 0px;
  grid-template-columns: 40% 60%;
  margin:10px 0px;
}
.grid-item-map p{  
  margin: 0px;
}
.grid-item-map{  
  border-bottom:1px solid #dfdfe1;
  display: inline-flex;  
  align-items: center;    
  flex-wrap:wrap;
}

@media screen and (max-width: 550px) {
  .grid-container-map {
    grid-template-columns: auto;
  }
}

/******************* GRID MEDAL BASED TREE ********************************/
.grid-container {  
  display: grid;
  grid-gap: 0px;  
  padding: 0px;
  grid-template-columns: auto repeat(3, 130px);
  grid-auto-rows: minmax(35px, auto)
}

.grid-item {
  border-bottom: 1px dotted var(--lightGrayHover);
  padding: 3px;
}

.grid-item.wide{
  grid-column: 1 / span 4;
  display: flex;
  align-items: center;
}

.grid-item.gray{
  background-color: #f7f7f7;
}

.grid-item.item0 {
  grid-column: 1 / span 1;  
  display: inline-flex;  
  align-items: center;
}
.grid-item.whiteSpace {
  display: none;
}    
.grid-item.item1 {
  grid-column: 2 / span 1; display: flex; justify-content: center;
}
.grid-item.item2 {
  grid-column: 3 / span 1; display: flex; justify-content: center;
}
.grid-item.item3 {
  grid-column: 4 / span 1; display: flex; justify-content: center;
}

.grid-item.whiteSpace{
  display: none;
}

.grid-item.level-grid-span {grid-column: span 3; align-items: center; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 5px;}

@media (width > 700px){
  .grid-item.level0{ padding-left: 5px;} 
  .grid-item.level1{ padding-left: 40px;} 
  .grid-item.level2{ padding-left: 80px;} 
  .grid-item.level3{ padding-left: 120px;} 
  .grid-item.level4{ padding-left: 160px;}
  }

@media (width < 700px){
  .grid-item.level2{ padding-left: 20px;} 
  .grid-item.level3{ padding-left: 40px;} 
  .grid-item.level4{ padding-left: 60px;}
  }

@media screen and (max-width: 550px) {
  .grid-item.item1, .grid-item.item2, .grid-item.item3 {display: flex; border: none;}
  
  .grid-container {  
    grid-template-columns: 0 repeat(3, 1fr);
  }
  .grid-item.wide {
    grid-column: 1 / span 4;
    border-top: 1px solid var(--lightGray);
    border-bottom: none;
    
  }  
  .grid-item.item0 {
    grid-column: 1 / span 4;  
    /* border-top: 1px solid var(--lightGray); */
    border-bottom: none;
    padding-bottom: calc(var(--unit) * 0.75);  
    
  }
  .grid-item.whiteSpace {    
    grid-column: 1;
    padding: 10px 5px;    
    display: inline-block;
    border-bottom: 1px solid white;
  }
  .grid-item.item1 {    
    grid-column: 2;
    /*border-bottom: 1px dotted #dfdfe1;*/
    padding: 10px 5px;
    padding-top:0px;        
    padding-bottom:10px; /* nove, driv 20 px */
    justify-content: flex-end;
  }
  .grid-item.item2 {    
    grid-column: 3;
    /*border-bottom: 1px dotted #dfdfe1;*/
    padding: 10px 5px;
    padding-top:0px;
    padding-bottom:10px; /* nove, driv 20 px */
    
  }
  .grid-item.item3 {  
    grid-column: 4;
    /*border-bottom: 1px dotted #dfdfe1;*/
    padding: 10px 5px;
    padding-top:0px;
    padding-bottom:10px; /* nove, driv 20 px */
    justify-content: flex-start;
  }

  .grid-item.level-grid-span {grid-column: span 4; justify-content: center;}
}

/******************* RECS BOX (NEW 2022) ********************************/

#content .recs-box{ 
  background-color: white;    
  background-color: #f5f6f7;    

  border:1px solid var(--lightGray);  
  border:1px solid var(--lightGrayHover);    
  border-radius:6px;    
  width: 260px;  
  padding:3px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;  

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

#content .recs-box:hover{
  text-decoration: none; 
/*  background-color: var(--lightGray);
*/  
  border:1px solid var(--blue);
}

#content .recs-box img{
  height: 35px;  
  margin:5px 5px;  
  border-radius: 10px;
}

#content .recs-box > span{
  font-weight: normal;  
  font-size: 14px;
  color:var(--black);
  text-align:left; 
  flex-grow:1;  
  padding-left: 5px;
}
#content .recs-box gray{
  font-size: 13px;
  color:var(--grayHover);
}
#content .recs-box strong{
  font-size: 15px;
  line-height: 1.3em;
  display: block;
}

#content .recs-box p{
  font-size: 14px;
  margin:0px;  
  color:var(--black);
}

/******************* RECOMMENDATION BOX ********************************/

#content .recommendation-box{ 
  background-color: white;  
  box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.08);

  border-radius:6px;  
  width: 260px;  
  padding:3px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;  

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

#content .recommendation-box:hover{
  text-decoration: none; 
  background-color: #f8efbc;
  background-color: #ecf0f1;
  background-color: var(--lightGray);
  box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.0);
  
}

#content .recommendation-box img{
  height: 50px;  
  margin:5px 5px;  
  border-radius: 10px;
}

#content .recommendation-box strong{
  display: block;
}

#content .recommendation-box p{
  font-size: 14px;
  margin:0px;  
  color:var(--black);
}

#content .recommendation-box span{
  font-weight: normal;  
  font-size: 14px;
  color:var(--black);
  text-align:left; 
  flex-grow:1;  
  padding-left: 5px;
}

#content .recommendation-box medal.large img{
  margin:5px 0px;
}

/******************* DROPDOWNS ********************************/

#content .tlacitko .tick{
  display: inline-block;  
  width:10px;  
}
/******************* OBAL NA MEDAILE ********************************/

#content medal.large img{
  width: 30px;  
  height: auto;
}

#content medal.medium img{
  width: 25px;
  height: auto;
}



/********************** MOBILNI VERZE *****************************/

@media screen and (max-width: 550px) {

  #content .recommendation-box{   
    width: 260px;
    padding:0px;
    margin-right: 10px;  
    margin-bottom: 10px;
  }

}