#exercise{  
  max-width: 1000px;
  touch-action: manipulation;
}

/*#exercise{    
  padding-top:20px;  
  padding-bottom: 100px;  
  overflow: hidden;
  max-width: 1000px; 
  margin: 0px auto;       
  min-height:600px;
  text-align: center;        
}
*/


#exercise #wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;
  margin: 30px 0 20px;
}

#exercise h1{  
  font-size: 24px;  
  margin-bottom: 40px;
  margin-top: 5px;
  color:black;
  text-align: center;
}

#exercise #sentence{    
  font-size: 26px;  
}

/* CHUNK PRO TEXTY */
#exercise .chunk{    
  cursor: pointer;   
  margin:3px;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#exercise .chunkText{
  border:1px solid #ecf0f1;
  border:1px solid #bcc3c7;
  font-size: 26px;  
  line-height: 1.6em;  
  border-radius: 6px;
  padding: 0px 5px;
  display:inline-block;  
}

#exercise .chunkCategory{ 
  margin-top:10px;
  font-size: 14px;  
  line-height: 1.6em;
}

#exercise .otherText{
  margin:3px;
  border:1px solid transparent;
  font-size: 26px;  
  line-height: 1.6em;  
  border-radius: 6px;
  padding: 0px 0px;
  display:inline-block;  
}


/* pokud jsou to rovnou znaky, tak nema zadne deti a vse je v nem */
#exercise .character{
  cursor: pointer;     
  font-size: 36px;  
  line-height: 1.2em;    
  padding: 0px 3px;  
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* PRI VYHODNOCENI ZVYRAZNIM SPRAVNE A SPATNE ODPOVEZENE CHUNKY / CHARACTERY */
#exercise .chunkText.correct1, #exercise .character.correct1{
  background-color: #35cc73;
  color: white;
}  
#exercise .chunkText.correct2, #exercise .character.correct2{
  background-color: white;
  color: #35cc73;
}  
#exercise .chunkText.wrong1, #exercise .character.wrong1{
  background-color: #e55043;
  color: white;
}
#exercise .chunkText.wrong2, #exercise .character.wrong2{
  background-color: white;
  color: #e55043;
}

/* POUZE PRO CHARACTER BASED MAME I RESENI */
#exercise #solution{    
  display: inline-flex;
  font-size: 42px;
  line-height: 50px;  
  text-align: center;  
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #ecf0f1;
}

/* KYBLIKY NA VYBER */
#exercise #markers{      
  margin-top: 20px;
}

#exercise .marker{
  font-size: 20px;  
  line-height: 130%;
  display: inline-block;  
  padding:5px 7px;
  margin: 5px 5px;
  border: 3px solid transparent;
  border-radius: 6px;
  color: white;
}

#exercise .marker:hover {     
  cursor: pointer;     
  opacity: 0.9;
}

#exercise .marker.selectedMarker{
  border:3px solid #35495d;
}

#exercise #bucket{
  position: absolute;    
  width:30px;
  height:30px;  
  border-radius: 20px;
  z-index: 50;
}

@media screen and (hover: none) {
  #bucket {
    display: none;
  }
}

/* aktualne nepouzivam */
#exercise .marker.categoryHovered {
      
}

/* PREBIJIME */
#exercise .chunkText{ background-color: white; }
#exercise .character{ background-color: white; }
#exercise .marker { color: white; }

#exercise #explanation{
  border-radius: 6px;
  background-color: white;
}

#exercise #explanation-content {
  margin: 20px;
}

#exercise #plan{
  padding: 30px;
  background-color: white;
  border-radius: 6px;
  width: max-content;
  max-width: 100%;
}

#exercise #message .message {
  margin: 0;
}

.control-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/********************** WHITE SCREEN *****************************/

#exercise.whiteScreen #wrapper {
  gap: 0;
}

#exercise.whiteScreen #plan {
  padding: 10px;
}

/********************** MOBILE SCREEN *****************************/

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

  #exercise #plan{
    padding: 10px;
    width: 100%;
  }

  #exercise #explanation {
    width: 100%;
  }

}