#exercise{  
  max-width: 900px; 
}

/*#exercise{  
  padding-top:20px;  
  clear:both;
  overflow: hidden;  
  max-width: 900px; 
  margin: 0px auto;       
  min-height:650px;
  text-align: center;  
  background-color: transparent;
  border:0px;
  padding-bottom: 50px;
}
*/
/* UNI BOX DO NEJ PISU */
#exercise .box{
  text-align: center;
  max-width:700px;
  border-radius:6px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;    
  margin-bottom: 10px;    
  padding: 20px;  
  background-color: white;
}

#screensaver{
  background-color: #d3ffd7;
}

#exercise .robot{
  display: inline-block;  
  font-size: 12px;
  margin:5px; 
  padding:5px;
  border:1px solid transparent;
  border-radius: 6px;
  text-align: center;
}
#exercise .robot.correct{
  border:2px solid #3bcc75;
}
#exercise .robot.wrong{
  border:2px solid #e55043;
}
#exercise .robot.none{
  border:2px solid #dfe6e9; 
}


#exercise #infoScreen img{
  max-height: 300px;
}
#players img, #watchers img{
  height: 40px;
  margin: 0px;
}


/* CHART */
#chart {
  max-width: 500px;
  height: 250px;
  display: inline-block;    
  margin-bottom: 40px;
  margin-top: 10px;
}
#chart #bars {
  display: inline-block;  
  max-width: 500px;
  height: 250px;
  padding: 0px;
  margin: 0px;  
  box-shadow: 0 0 0 0px #444;
}
#chart #bars li {
  display: inline-block;
  width: 200px;
  height: 250px;
  margin: 0px;
  text-align: center;
  position: relative;  
}
#chart #bars li .bar {
  display: block;
  width: 80px;
  margin-left: 60px;
  height: 0px; /* pridano by petr at jedeme z nuly */
  background: #49E;
  position: absolute;
  bottom: 0;
}
#chart #bars li .bar:before {  
  color: #31485f;
  content: attr(data-answers) '';  
  font-weight: bold;
  position: relative;
  font-size: 28px;
  bottom:32px;
}
#chart #bars li span {  
  color: #31485f;
  width: 100%;
  position: absolute;
  bottom: -2em;
  left: 0;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
#chart #bars li .bar.green {
  background-color: #27ae60;
}
#chart #bars li .bar.red {
  background-color: #e74c3c;
}

#exercise #histogram img{
  max-width: 300px;
  max-height: 300px;
}

#content .bar.wide{  
  width:80px;
  margin: 0px 20px;
}
#content .bar.wide h2{  
  margin:5px;
  color: white;
  text-align: center;
}


/********************** MAPY *****************************/
#exercise .map{  
  display:block;
}

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

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

.map #bg > *, .map .land {
  fill: white;
}

/*** PRI ZOBRAZENI MAPY V HISTOGRAMU AT JE MENSI ***/
#exercise #histogram .map svg{  
  height: 300px;
  width: auto;
}