#content .preview-box-png{    
  background-color: white;      
  border-radius:5px;
  padding:0px; 
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 30px;  
  text-align: left;  
  min-width: 300px;
  max-width: 300px;
  max-height: 208px; 
  display: inline-block;  
  cursor: pointer;
  border: 1px solid #D9D9D9;      
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
  color: var(--black);     
  overflow:hidden;      
}

@media screen and (max-width: 550px) {
  #content .preview-box-png{    
    margin-bottom: 10px;
  }
}
#content .preview-box-png .upper-bar{
  min-height: 52px;
  padding: 5px 3px;  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--yellow);
  background-color: var(--faintYellow);  
  background-color: #F5F5F5;    
}

#content .preview-box-png .upper-bar span{
  overflow: hidden; 
}

#content .preview-box-png .upper-bar.line{
  border-bottom: 1px solid #D9D9D9;      
}

#content .preview-box-png.without-image .upper-bar {
  border-bottom: none;
  height: 63px;
}

#content .preview-box-png .upper-bar img{  
  height:35px; 
  margin:0px;
  margin-right:7px;  
  margin-top:3px;
  margin-bottom:3px;
  flex-shrink: 0;
}

#content .preview-box-png .upper-bar medal img{  
  height: auto;
}
#content .preview-box-png .upper-bar medal{  
  flex-shrink: 0; margin-left: 10px;
}

#content .preview-box-png .upper-bar h3{  
  margin:0px;
  font-size: 15px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}

#content .preview-box-png .upper-bar p{    
  font-size: 13px;
  color: var(--grayHover);
  margin:0px;
  margin-top:1px;
  line-height: 1em;
}


#content .preview-box-png img{
  max-height: 220px;  
  max-width: 100%;
  margin:5px 5px;
  margin-bottom: 0px;
  border-radius: 5px;
  display: block;  
}

#content .preview-box-png object{
  max-height: 220px;  
  max-width: 100%;  
  margin:5px 5px;
  margin-bottom: 0px;
  border-radius: 5px;
  display: block;    
}

#content .preview-box-png object img{
  margin:0px 0px;
}

#content .preview-box-png:hover{
  text-decoration: none;       
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
  border: 1px solid var(--gray);
}

#content .preview-box{    
  background-color: white;
  border-radius:5px;
  padding:10px;
  text-align: center;  
  /* min-width: 450px;
  max-width: 450px; */
  /* display: inline-block; */
  cursor: pointer;
  border: 0px solid #e7e9ea;      
  box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.05);
  color: var(--black);   
  max-height: 420px;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
}


#content .preview-box ul:has(li:only-child){padding: 0;}

#content .preview-box li:only-child{    
  list-style-type: none;
}

.preview-box.fader::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, transparent 0%, white 80%);
    display: block;
}

.preview-shadow {box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.05);}


#content .preview-box h3{
  margin-top:20px;
}

#content .preview-box ul{    
  text-align: left;
}

#content .preview-box fade{
	display: block;
      /* border: 0px solid #e7e9ea;      
      mask-image: linear-gradient(180deg, #000 360px, transparent 400px);  
      -webkit-mask-image: linear-gradient(180deg, #000 360px, transparent 400px);       */
}

#content .preview-box code{    
  font-size: 14px;
}

#content .preview-box:hover{
  text-decoration: none;     
  box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.12); 
}

#content .preview-box img{
  /*max-height: 120px;*/
  max-height: 180px;  
  max-width: 85%;  
  margin:5px 5px;
  border-radius: 5px;
  display: block;
  margin:auto;
}

#content .preview-box ul img{
  max-height: 50px;
  max-width: 85%;  
  margin:5px 5px;
  border-radius: 5px;
  display: block;
  margin: auto;
}

#content .preview-box .card{

  display: inline-block;  
  vertical-align: middle;     
  margin: 5px; 
  padding:10px; 
  min-width: 130px;
  margin-bottom:0px;
  margin-top:9px;  
  
  font-size: 18px;    
  font-weight: 400;        
  text-align: center;  
  background-color: white;
  color: var(--black);
      
  border: 1px solid #7f8c8d;
  border-radius:2px;

  /* NOVE ROZSIRENI NA BILOU */
  border-radius:6px;
  border: 2px solid white;
  margin: 10px;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.1);  
      
}

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

/* PREKLADATEL */
#content input.answer{
  display: block;
  margin:5px auto;
  width:200px;
  min-width:200px;
  height: 40px;    
  font-size: 28px;
  line-height: 1.4em;      
  font-weight: 400;
  padding:5px 15px;  
  color: var(--black);
}

/* VPISOVACKA, SLOVNI ULOHUY */
#content input.answerInline{
  display: inline-block;
  width: 60px;
  min-width: 60px;
  line-height: 1em;  
  padding:3px;
  margin:3px 3px;  
  cursor: pointer;  
  color: var(--black);
}

/* PRO ROZRAZOVACKU */
#content .column{
  font-size: 16px;  
  height: 130px;
  min-width: 80px;
  max-width: 120px;  
  line-height: 130%;
  display: inline-block;  
  padding:5px 7px;
  margin: 5px 5px;      
  background-color: #f2f4f9;
  border-radius: 6px;
  vertical-align: bottom;
}

/* BUBLINY PRO ROZRAZOVACKU A STAVBU VET */
#content .buble{
  font-size: 20px;  
  line-height: 130%;
  display: inline-block;  
  padding:1px 7px;
  margin: 3px 3px;
  border: 3px solid transparent;
  border-radius: 6px;
  background-color: #3498db;
  color:white;
}

/* PRO STAVBU VET */
#content .bubleSentence{
  font-size: 20px;  
  line-height: 130%;
  width: 100px;
  display: inline-block;  
  padding:1px 7px;
  margin: 3px 1px;
  border: 3px solid transparent;
  border-radius: 6px;
  background-color: #ecf0f1;
}


/* DIKTATY */
#content .bubleDictate{
  font-size: 20px;    
  line-height: 1.0em;
  width: 50px;
  display: inline-block;
  margin: 1px 5px;
  border: 3px solid transparent;
  border-radius: 6px;
  background-color: #ecf0f1;
}


/* PEXESO */
#content table.pexeso{
  display: inline-block;
  margin-top:10px; 
}

#content table.pexeso td{  
  margin:1px;
  border:0px;   
}

#content .pexesoCard{    
  width:90px;  
  height: 60px; 
  background-color: white;
  color: #34495E;     
  font-size: 14px;  
  display: inline-flex;  
  justify-content: center;  
  align-items: center;
  border: 1px solid #ededef;
  overflow: hidden;
}

#content .pexesoCard.suda{    
  color:var(--blueHover);
}

#content .pexesoCard.licha{
  color:var(--orangeHover);
}

#content .pexesoCard img{
  max-width: 90%;
  max-height: 80%;    
}

#content .pexesoCard .map svg{
  max-height: 80px;
  max-width: 80px;
  width: auto;
}

#exercise .pexesoCard .vzorec{
  font-size: 10px;
}


/* OTAZKY */
#content .otazkyVariant{  
  font-size: 18px;
  color: #34495e;
  background-color: white;
  padding: 15px;
  border:1px solid #dfe6e9;
  border-radius:3px;
  margin-bottom:0px;
  margin-top:10px;
  display: inline-block;
  text-align: left;
  width: 95%;
}

/* CHAT */
#content .chat{    
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;    
  margin:5px;  
}

#content .chat img{    
/*  height: 35px; */    
  width: auto;
  margin:0px;
}

#content .personA, #exercise .personB{
  margin-left: 5px;  
  border-radius: 6px;  
  color:white;
  padding:6px 10px;
  line-height: 1.2em;
}

#content .personA{
  color:white;
  background-color: #3897d9;  
}

#content .personB{
  color:white;  
  background-color: #35cc73;     
}

#content .personA.pure{  
  border-radius: 5px;  
  color:#2c3e50;   
  background-color: #d8e5ef;  
}

#content .personB.pure{
  border-radius: 5px;  
  color:#2c3e50;   
  background-color: white; 
  margin-top: 15px;
  margin-bottom: 15px;
}

/* POSLECH SLOVICEK */
#content .poslechSlovicekCard{    
  width:90px;  
  height: 90px; 
  background-color: white;
  color: #34495E;     
  font-size: 14px;  
  display: inline-flex;  
  flex-direction: column;
  justify-content: center;  
  align-items: center;
  border: 1px solid #ededef;
}

#content .poslechSlovicekCard img{
  max-width: 90%;
  max-height: 80%;    
}


/* TETRIS */
#content .block{  
  width:136px;    /* byvalo 140 kuvli faktum vetis */
  border-radius: 6px;

  padding-left:0px;
  padding-right:0px;
  white-space: nowrap;   
  border: 1px solid white;
  font-size: 16px;
  height: 45px;
  line-height: 45px;  
  display: inline-block;    
}

#content .block.new{    
  color:white;  
  box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);  
  border-color:transparent;  
  background: linear-gradient(to right, #fe9a27, #feb52a 100%);
}

#content .void{
  background-color: transparent;
  border-color:transparent;
}


#content .category{
  background-color: #e0e6eb;
  font-weight: bold;
}

/* ROZBORY */
#content .marker{
  font-size: 18px;    
  display: inline-block;  
  padding:5px 10px;
  margin: 5px;
  border: 1px solid #ededef;
  border-radius: 6px;
  color: white;
}

/* ROZBORY */
#content .po { background-color: #fac642;  color: #fac642; } /* podmet */
#content .ps{ background-color: #50d140;  color: #50d140; } /* prisudek */
#content .pk{ background-color: #fd7d7f; color:#fd7d7f; } /* privlastek */
#content .pks{ background-color: #fd7d7f; color:#fd7d7f; } /* privlastek */
#content .pkn{ background-color: #fd7d7f; color:#fd7d7f; } /* privlastek */
#content .pt{ background-color: #1489b4; color:#1489b4; } /* predmet */
#content .dop{ background-color: #9a59b4; color:#9a59b4; } /* doplnek */
#content .pum{ background-color: #16a6fc; color:#16a6fc; } /* prislovecne urceni mista */
#content .pumi{ background-color: #16a6fc; color:#16a6fc; } /* prislovecne urceni miry */
#content .puc{ background-color: #16a6fc; color:#16a6fc; } /* prislovecne urceni casu */
#content .puz{ background-color: #16a6fc; color:#16a6fc; } /* prislovecne urceni zpusobu */
#content .pup{ background-color: #16a6fc; color:#16a6fc; } /* prislovecne urceni priciny */
#content .puucelu{ background-color: #16a6fc; color:#16a6fc; } /* prislovecne urceni ucelu */
#content .pupod{ background-color: #16a6fc; color:#16a6fc; } /* prislovecne urceni podminky */
#content .puprip{ background-color: #16a6fc; color:#16a6fc; } /* prislovecne urceni pripustky */

/* VETY */
#content .vh{ background-color: #fac642; color:#fac642; } 
#content .vvpodmet{ background-color: #fac642; color:#fac642; } 
#content .vvprisudek{ background-color: #50d140; color:#50d140; } 
#content .vvpredmet{ background-color: #1489b4; color:#1489b4; } 
#content .vvprivlastek{ background-color: #4a7dae; color:#4a7dae; } 
#content .vvpumisto{ background-color: #16a6fc; color:#16a6fc; } 
#content .vvpucas{ background-color: #16a6fc; color:#16a6fc; } 
#content .vvpuzpusob{ background-color: #16a6fc; color:#16a6fc; }
#content .vvpumira{ background-color: #16a6fc; color:#16a6fc; }
#content .vvpupodminka{ background-color: #16a6fc; color:#16a6fc; } 
#content .vvpuucel{ background-color: #16a6fc; color:#16a6fc; } 
#content .vvpupricina{ background-color: #9a59b4; color:#9a59b4; } 
#content .vvpupripustek{ background-color: #9a59b4; color:#9a59b4; } 
#content .vvdoplnek{ background-color: #9a59b4; color:#9a59b4; } 

/* VETY */
#content .oznamovaci{ background-color: #50d140; color:#50d140; } 
#content .tazaci{ background-color: #fac642; color:#fac642; } 
#content .praci{ background-color: #16a6fc; color:#16a6fc; } 

/* SLOVNI DRUHY */
#content .podstatnejm{ background-color: #fac642; color:#fac642; } 
#content .pridavnejm{ background-color: #fe7b7c; color:#fe7b7c; } 
#content .zajmeno{ background-color: #50d140; color:#50d140; } 
#content .cislovka{ background-color: #16a6fc; color:#16a6fc; } 
#content .sloveso{ background-color: #1489b4; color:#1489b4; } 
#content .prislovce{ background-color: #e35340; color:#e35340; } 
#content .predlozka{ background-color: #9c87fc; color:#9c87fc; } 
#content .spojka{ background-color: #5f23ca; color:#5f23ca; }
#content .castice{ background-color: #80d3dc; color:#80d3dc; } 
#content .citoslovce{ background-color: #72a0fc; color:#72a0fc; } 

/* SLOVA */
#content .predpona{ background-color: #fac642; color:#fac642; } 
#content .koren{ background-color: #16a6fc; color:#16a6fc; } 
#content .pripona{ background-color: #50d140; color:#50d140; } 
#content .koncovka{ background-color: #9c87fc; color:#9c87fc; } 

/* SAMO SOUHLASKY */
#content .samo{ background-color: #50d140; color:#50d140; } 
#content .sou{ background-color: #fac642; color:#fac642; } 
#content .rl{ background-color: #1489b4; color:#1489b4; }
#content .dift { background-color: #e35340; color: #e35340; }
#content .soum { background-color: #fe7b7c; color: #fe7b7c; }
#content .souo { background-color: #1489b4; color: #1489b4; }
#content .sout { background-color: #6a89cc; color: #9c87fc; }

/* PADY */
#content .pad1{ background-color: #fac642;  color: #fac642; }
#content .pad2{ background-color: #9c87fc;  color: #9c87fc; }
#content .pad3{ background-color: #16a6fc;  color: #16a6fc; }
#content .pad4{ background-color: #4a7dae;  color: #4a7dae; }
#content .pad5{ background-color: #50d140;  color: #50d140; }
#content .pad6{ background-color: #fd6e6f;  color: #fd6e6f; }
#content .pad7{ background-color: #e64628;  color: #e64628; }

/* SLABIKY */
#content .slabika1{ background-color: #fac642;  color: #fac642; }
#content .slabika2{ background-color: #9c87fc;  color: #9c87fc; }
#content .slabika3{ background-color: #16a6fc;  color: #16a6fc; }
#content .slabika4{ background-color: #4a7dae;  color: #4a7dae; }

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


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

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

  #content .preview-box{  
    min-width: 200px;
  }
}