#exercise{  
  max-width: 1600px; 
}

#exercise .exercise-header{  
  max-width: 900px; 
  margin: 0px auto;
}

#exercise #question{          
  font-size: 28px;
  line-height: 1em;
  font-weight: 400;          
  background-color: white;
  min-width: 270px; /* predimt bylo width, ale pro python sem to roztahl */
  border-radius:6px;
  border: 2px solid white;  
  margin: 10px;
  margin-top: 20px;
  padding: 10px 20px;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.0);
  border: 2px solid #e8eced;
}

#exercise #cards{  
  margin: 10px;
  margin-top: 20px;
  margin-bottom: 0px;  
}

#exercise #cards .card{  
  padding: 10px 20px;
}

/* EXPLANATION, STATS */
#exercise #explanation{    
  font-size: 18px;  
  line-height: 28px;    
  text-align: left;  
  margin:10px;      
  margin-top: 20px;
  border:1px solid orange;
  border-radius: 3px;
  padding: 20px;    
  background-color: white;
  display:none;
  box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.15);
}

#exercise #map{
  display: block;    
}

#exercise #map svg{  
  background-color: #e0f9fb;
  border-radius:6px;  
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.0);    
  border: 2px solid #e8eced;
}

#exercise #map.small svg{
  height: 270px;
  width: auto;
}

#exercise #map.medium svg{
  height: 520px;
  width: auto;
}

#exercise #map.large svg{
  height: 800px;
  width: auto;
}

/* U MATIKY MAME TEXT A TEN NECHCEME OZNACIT A CHCEME MU DAT FONT SIZE */
#exercise #map text{
  z-index: 10;
  font-size: 18px;  
  fill:#130f3f;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}

/* HVEZDICKY PROTO, ZE SE TO APLIKUJE BUD NA PATH NEBO NA CIRCLE ELEMENT */
#exercise #map *.active{  
  stroke-width: 4;
  cursor: pointer;
  fill:none;  
}
#exercise #map *.active.fill{
  stroke-width: 2;
  fill:#d1d5d8;    
}

#exercise #map *.activeHover{ 
  stroke-width: 4;
  stroke:red;
  stroke:var(--orange);
  cursor: pointer;
  fill:none;
}
#exercise #map *.activeHover.fill{
  stroke-width: 2;
  fill:#f0c52f;
}

#exercise #map *.correct{
  stroke-width: 4;
  stroke:#2dae62; 
}
#exercise #map *.correct.fill{
  stroke-width: 2;
  fill:#35cc73;  
}

#exercise #map *.wrong{
  stroke-width: 4;
  stroke:#C0392B; 
}
#exercise #map *.wrong.fill{
  stroke-width: 2;
  fill:#E74C3C;  
}

#exercise #map *.selected{
  stroke-width: 4;
  stroke:#fe9800;  
}
#exercise #map *.selected.fill{
  stroke-width: 2;
  fill:yellow;
}

.land{
  fill:#ffffed;  
  fill:white;  
}