/******************* 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 130px 130px 130px;
}
.grid-item{  
  font-size: 16px;
  font-weight: 300;
  border-bottom:1px solid #dfdfe1;
  padding:5px;
}

.grid-item.wide{
  grid-column: 1 / span 4;
  padding: 10px 5px;
}

.grid-item.level0{ padding-left: 0px;} 
.grid-item.level1{ padding-left: 20px;} 
.grid-item.level2{ padding-left: 40px;} 
.grid-item.level3{ padding-left: 60px;} 
.grid-item.level4{ padding-left: 80px;} 

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

@media screen and (max-width: 550px) {
  
  .grid-container {
    grid-template-columns: 125px 110px 110px;
  }
  .grid-item.wide {
    grid-column: 1 / span 3;
    border-top: 0px solid #dfdfe1;
    border-bottom: 0px solid #dfdfe1;
    
  }
  .grid-item.item0 {
    grid-column: 1 / span 3;  
    border-top: 0px solid #dfdfe1;
    border-bottom: 0px solid #dfdfe1;    
    
  }
  .grid-item.item1 {
    grid-column: 1;
    border-bottom: 0px solid #dfdfe1;
    padding: 10px 5px;
    padding-top:0px;
    padding-bottom:20px;
    padding-left:20px;
  }
  .grid-item.item2 {
    grid-column: 2;
    border-bottom: 0px solid #dfdfe1;
    padding: 10px 5px;
    padding-top:0px;
    padding-bottom:20px;
  }
  .grid-item.item3 {
    grid-column: 3;
    border-bottom: 0px solid #dfdfe1;
    padding: 10px 5px;
    padding-top:0px;
    padding-bottom:20px;
  }

}

/******************* 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;
}
/******************* 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;
  }

}