/* QUESTION */
#exercise #questionParent{  
  margin-top: 40px;  
  display: none;   
}

#exercise #question{  
  display: inline-block;
  text-align: center;     
  vertical-align: top;
  margin-bottom: 40px;
  font-size: 28px;
  line-height: 36px; 
  font-weight: 400;
}

#exercise #question code{  
  font-size: 28px;
}
#exercise #question i{  
  font-size: 28px;
}

#question img{
  max-height:300px;    
  max-width:500px;    
  margin-top:10px;
  margin-bottom:10px;
  display: inline-block;
}

/* CISTE PRO VZOREC V OTAZCE */
#question .vzorec{
  font-size: 28px;  
}

#question code{
  font-size: 20px;  
}

/* CARDS */
#exercise .card{

  display: inline-block;  
  vertical-align: middle;     
  cursor: pointer;
  margin: 5px;  
  padding: 0px 0px;
  min-width: 270px; /* predimt bylo width, ale pro python sem to roztahl */
  margin-bottom:0px;
  margin-top:9px;  
 
  font-size: 26px;    
  font-weight: 400;          
  color: var(--black);
  text-align: center;  
  background-color: white;
       
  /* NOVE ROZSIRENI NA BILOU */  
  border-radius:6px;  
  margin: 10px;
  border: 2px solid white;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.15);
      
}

#exercise.whiteScreen .card{
  box-shadow: 0 0 32px 0 rgba(0,0,0,0.0);
  border: 2px solid var(--lightGrayHover);
}

#exercise .card:hover{ 
  border: 2px solid #3498db;
}

#exercise .card.correct{
  border:2px solid #27ae60;  
  background-color: #2ecc71;
  border:2px solid var(--greenHover);
  background-color: var(--correct);
  color: white;
  box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.15);
}

#exercise .card.wrong{
  border:2px solid #e74c3c;
  background-color: #ec7063;
  border:2px solid var(--redHover);
  background-color: var(--wrong);
  color:white;
  box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.15);
} 

#exercise .card img{ 
  display: inline-block;
  vertical-align: middle;   
  max-width: 350px;
  max-height: 300px;
}

#exercise .card.disabled{
  border:2px solid var(--lightGrayHover);
  background-color: var(--lightGray);
}

#exercise .card .text{ 
  display: inline-block;
  margin:10px 15px; 
  line-height: 1.0em;  
}

#exercise .card .vzorec{ 
  display: inline-block;
  margin:10px 15px; 
}

/* tohle je kvuli katexu, dava si tam jeste vlastni elementy s tridou text, ktere nechceme odsazovat */
#exercise .card .vzorec .text{ 
  margin:0px;
}

#exercise .card code{
  font-size: 20px;  
}

#exercise .para{ 
  display: block
}

#exercise #explanation{
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  margin:10px;
  margin-top: 20px;
  border-radius: 3px;
  padding: 20px;
  background-color: white;
  display:none;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.1);
}

#exercise #explanation.whiteScreen{
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0);
}

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

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

  #exercise .card{
    display: inline-block;  
    vertical-align: middle;     
    cursor: pointer;
    margin: 5px;  
    padding: 0px 0px;
    min-width: 160px; 
    margin-bottom:0px;
  }

  #question img{    
    max-width:96%;
  }

}