/******* EXERCISE ******/
#exercise{  
  margin: 0px auto;
  padding-top:8px;
  padding-bottom:40px;  
  border:0px solid black;  
  min-height: 900px;
  overflow: visible;
  text-align: center;
  box-sizing: content-box;
}

#exercise i {
  /* override texting.css */
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

#exercise.fullScreen{
  min-height: 100%;    
}

#exercise #controlPanel{  
 
}

#exercise #controlPanel .group{

}

#exercise #controlPanel .tlacitko{  
  margin:10px 15px;
}

/******* WHITE SCREEN PRO EXERCISE ******/

#exercise.whiteScreen{

}

#content.whiteScreen{  
  background-color: white;
}

#skillBar.whiteScreen{      
  background-color: #f7f7f7; /* BILE HRATKY MEDAL BASED */
  background-color: var(--lightGray);
}

#exercise #levelBar.whiteScreen .barBox.unsolved{
  background-color: #f7f7f7; /* BILE HRATKY PRO TETRIS */
  background-color: var(--lightGray);
}

/******* HLAVICKA EXERCISE ******/
#exercise .exercise-header{    
  margin-bottom: 15px;
  padding: 0;
}

@media (max-width: 550px) {#exercise .exercise-header{padding-left: calc(var(--unit) * 0.5); padding-right: calc(var(--unit) * 0.5);}}

#exerciseSettings p {margin-bottom: 0;}

#exercise .exercise-header-left, #exercise .exercise-header-right {    
  gap: calc(var(--unit) * 1);
}

#exercise .exercise-header a:not(.tooltip a) {
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--unit) * 0.5);
}

#exercise .exercise-header img {
  height: 22px;
  filter: grayscale(1);
  opacity:0.6;
}

#exercise .exercise-header a.showPinItClasses > span, #exercise .exercise-header a.textual > span {
  opacity:0.6;
  color: var(--black);
  filter: grayscale(1);
  font-weight: 500;
  text-decoration: none;
  margin-left: 7px;
}

#exercise .exercise-header a.showPinItClasses:hover > span, #exercise .exercise-header a.textual:hover > span {
  color: white;
  opacity: 1;
}

#exercise .exercise-header a.showPinItClasses:hover, #exercise .exercise-header a.textual:hover {text-decoration: none;}

#exercise .exercise-header a.showPinItClasses.active > span, #exercise .exercise-header a.textual.active > span {
  color: white;
  opacity: 1;
}

#exercise .exercise-header a.active, #exercise .exercise-header > * > a:hover, #exercise .exercise-header #sound-switch a:hover {
  background-color: var(--black);
}

#exercise .exercise-header a.pulse {
  animation: pulseBg 0.45s ease 10 alternate;
}

@keyframes pulseBg {
  0% {background: transparent}
  100% {background: var(--yellow)}
}

#exercise .exercise-header a.active img, #exercise .exercise-header a:hover img{
  filter: invert() brightness(20);
  opacity: 1;
}

.code-url {font-size: 22px; padding: 10px; border-radius: var(--unit); border: 2px dashed var(--gray); display: inline-flex; cursor: pointer; background: var(--white);}

#exercise .histogramToggle img{
  border-bottom:2px solid transparent;
}

#exercise .histogramToggle img.on{
  border-bottom:2px solid #5dca68;
  opacity: 1.0;
}

/******* SKRYTE HORNI PANELY ******/
#exercise #rules{  
  display: inline-block;
  background-color: white;  
  padding:15px;
  margin-bottom: 15px;
  border-radius: 6px;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.1);
}

#exercise #ruleShort{
  background-color: white;  
  text-align: left;
  padding:15px;
  margin:10px;
  margin-bottom: 15px;
  border-radius: 6px;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.1);  
  margin-top:10px;  
  display: none;
}

#exercise #pinIt,#exercise #related,#exercise #related2,#exercise #exerciseSettings, #exercise #licence-info{
  background-color: white;  
  text-align: left;
  padding:15px;
  margin-bottom: 15px;
  border-radius: 6px;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.1);  
  margin-top:10px;  
  display: none;
  /* display: block; */
}

#exercise #licence-info {column-count: 3; column-gap: var(--unit);}

@media (max-width: 780px) {#exercise #pinIt,#exercise #related,#exercise #related2,#exercise #exerciseSettings, #exercise #licence-info{
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  column-count: 1;
} }

.qr-grid {display: grid; grid-template-rows: 1fr; grid-template-columns: auto auto;}
.qr-grid img, .qr-grid canvas {cursor: pointer;}
@media (max-width: 550px) {.qr-grid{grid-template-columns: auto; grid-template-rows: auto auto;} .qr-grid img {width: 100%; height: auto;}}

#exercise #histogram{
  display: none;    
  text-align: center;
  max-width:620px;
  border: 1px solid #dfdfe1;  
  border-radius:2px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;    
  padding: 30px 10px;  
  background-color: white;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.1);  
}

#exercise #messageWrapper{

}

#exercise .tlacitko .tick{
  display: inline-block;  
  width:10px;  
}

#exercise .text.optional {
  color: var(--grayHover);
}

#exercise #explanation .text.optional {
  display: block;
}

#exercise .image {
  display: flex;
  justify-content: center;
  align-items: center;
}

#exercise .image.nowrap img {
  min-width: 0;
}

#exercise .emoji {
  font-family: "Noto Color Emoji";
}

@media screen and (min-width: 600px) {
  #exercise .image.wrap {
    flex-wrap: nowrap;
  }
}

#exercise .prominent {
  display: flex;
  justify-content: center;
  text-align: left;

  font-size: 2em;
  margin: 10px 0;
}

/******* PATICKA STATS ******/
/*
#exercise hr{  
  display: inline-block;
  color:#dde0e5;  
  margin-top:50px;
  margin-bottom:10px;
  width: 300px;
}

#exercise .statsBox{      
  display:inline-block;
  width:70px;
  color:#2c3e50;
  font-size: 14px;    
  padding: 0px;
  margin:0px 30px;
}

#exercise .statsBox .stats{  
  font-weight: 400;
  font-size: 24px;
  color:#2c3e50;
  display: block;  
  margin:10px;
}
#exercise .statsBox p{  
  margin:0px;
}
*/


#exercise .dropbtn .headerToggle img.blink{
  opacity:1.0;
  background-color: #f3e17b;
  background-color: var(--yellow);
}

#exercise .dropbtn .showRelated2 img{
  border-radius: 3px;
}

#exercise .dropbtn .showRelated2 img.blink{
  opacity:1.0;
  border-radius: 3px;
  background-color: #f3e17b;
  background-color: var(--yellow);
}

/******* PATICKA NEW STATS ******/
#exercise .exerciseFooter{   
  margin-top:20px;
}

#exercise .statsBox{   
  color:#2c3e50;
  color:var(--black);
  padding: 0px;
  margin:0px auto;
  margin-top:40px;
}

#exercise .statsBox .statsNumber{
  /*
  font-weight: 400;  
  font-size: 18px;
  color:#2c3e50;  
  margin:0px;*/
}

#exercise .statsBox .statsDesc{
  margin:0px;
  font-size: 14px;
}

/********************* SPPED SLIDER ********************************/
.ui-slider, .ui-slider-handle {
  cursor: pointer !important;
}

.speed-slider {
  margin: 20px 15px 5px;
  width: 100px;
}

.speed-slider::before, .speed-slider::after {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  background-size: cover;
  bottom: calc(100% + 5px);
}

.speed-slider::before {
  background-image: url("https://umimeto.org/asset/global/img/speed-turtle.svg");
  left: -10px;
}

.speed-slider::after {
  background-image: url("https://umimeto.org/asset/global/img/speed-hare.svg");
  right: -10px;
}

@media (pointer: coarse) {
  .speed-slider {
    width: 150px;
  }
}

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

@media screen and (max-width: 550px) {
  .header-share-2 {order: 1;}
  .header-share-1 {order: 2;}
  
  #exercise{  
    min-height: 700px;
  }

  .exercise-header{  
    background-color: transparent;
    margin-bottom: 15px;
    padding: 0px 20px;
  }


  .overlayLayerImage img{
    max-height: 100%;
    max-width: 100%;
  }

  .overlayLayerRule{
    padding-top: 10px;
  }

}

/***** WRITE US *****/
@media screen and (min-width: 601px) {
  #exercise {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/***** ANIMATIONS *****/
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(6px);
  }
  75% {
    transform: translateX(-6px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

:root {
  --animation-shake: shake 150ms 2 ease-in-out;
  --animation-pulse: pulse 200ms ease-in-out;
  --animation-blink: blink 333ms 3 ease-in-out;
}