td .clearfix:after,
.odpo_otazka_telo .clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
td .clearfix,
.odpo_otazka_telo .clearfix {
	display: inline-block;
}
 
html[xmlns] td .clearfix,
html[xmlns] .odpo_otazka_telo .clearfix {
	display: block;
}
 
* html td .clearfix,
* html .odpo_otazka_telo .clearfix {
	height: 1%;
}

.question {width: 80em; background: #fff;  border: 1px solid #ddd; margin-top: 1em; margin-bottom: 1em }
.odpo_otazka_telo .question { width: unset }
.question .title {
 padding: 0.5em; 
font-weight: bold; font-size: 120%}



.whole {width: 100%}

.question .task {
  /*font-style: italic;*/ font-weight: bold;
  border-bottom: 1px solid #ddd;
  padding: 0.5em;
  padding-bottom: 0.5em;

}

.question p {
  margin-top: 0; margin-bottom: 0.3em;
}


div.sloztest span.nedurazne {display: none !important}
.task .cz {
  font-weight: normal
}

.question .content {
   margin-left: 2em; padding: 0.3em;
   clear: both;
}
.question .content:after {
    display: table; content: " ";
}
.question li {margin-top: 0; margin-bottom: 0.8em !important }

.question h1, .question h2, .question h3 {padding: 5px 10px}
.question h3 { font-size: 115%}

ol.abc { list-style-type: lower-alpha}

.example { font-style: normal; font-weight: normal}
.ul {text-decoration: underline}
em.person {font-style: normal; font-variant: small-caps }


.question table {border-collapse: collapse; margin-bottom: 0.5em; margin-top: 0.5em}
.question td {padding-top: 0.5em; padding-left: 0.5em; padding-right: 0.5em}
.question th {border-bottom: 1px solid}
.content table td {vertical-align: top;}
table.center { text-align: center;}
table.center td {border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 0.3em}

.wmiddle td, .wmiddle th { vertical-align: center}
.wmiddle th { border: 0px none }

.centered {text-align: center}

tr.example td { background-color: lightyellow; border: 0px none}
.content table.bracket td { vertical-align: middle}
table.normal { border: 1px solid #000}
table.normal th, table.normal td { border: 1px solid #999}
table.normal th { background: #ddd}

table.hlines td, table.hlines th {  border-top: 1px solid #bbb; border-bottom: 1px solid #bbb}

td.levy { text-align: left } 
.question dt {margin-top: 1em}
.question p.task_help {margin-left: 2em;}

 .textbox { border: 2px inset; padding: 0.1em}

.schema { border: 2px outset #bbb; margin-right: auto; margin-left: auto }
.fonetika, .fonetika input, .fonetika select, .fonetika textarea { font-family: "Lucida Sans Unicode"; font-size: 110% }

/*********** foneticke styly **********************/
  span.apl { float: left; width: 1.7em; padding: 0.2em; border: 1px outset; cursor: pointer; text-align: center;
  font-family: "Lucida sans unicode"; font-size: 120%;
  
  }
  div.klavesnice {width: 600px; font-size: 100% }
div.klavesnice br {float: none; clear: both}
  div.klavesnice input {/*width: 500px;*/ font-size: 100%; font-family: "Lucida sans unicode"  }
  div.klavesnice p {clear: both; margin-top: 1em;}

.ipas input, .ipas textarea { font-family: "Lucida Sans Unicode" }


/****** Drag and Drop ***********/

.smaller-drags span.draggable {
    font-size: 85%;
}
.droparea { display: inline-block; background-color: #fed; padding: 0.2em; }    
  .testitem { display: inline-block; background-color: #fff; padding: 0.2em; margin: 0 0.2em; }
  
  .testitem { color: white; background-color: darkblue}
  .qArea { padding: 0.5em; width: 600px; border: 1px solid #bbb}
  
  #dragbase { color: #ddd; min-height: 3em; width: 600px}
  
  .qArea table, .qArea td, .qArea th { border: 1px solid #bbb}
  .qArea th { background: #ddd }
  
  .sidebar { /*float: right;*/ position: absolute;  left: 600px; top:300px; width: 100px; }
 
   p.label, p.droparea_copy, p.checks { display: inline-block} 
  p.label {}
  p.droparea_copy {width: 150px; height: 80px;
    padding: 0.3em;
   background: #fed; border: 1px solid #bbb; vertical-align: top;}
  
  .droparea_move, .droparea_move_sc, .droparea_clone { display: inline-block; 
    min-height: 1.4em; padding-left: 0.0em;
  background: #eee /*#fed*/; border: 2px solid #ddd; vertical-align: -0.3em;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
   }
  .droparea_move {text-align: left; }

  p.checks { width: 200px} 
  
  .droparea .draggable { display: block}
  *[draggable='true'], .draggable { display: inline-block; padding: 0.2em; margin: 2px 5px; font-weight: bold; 
    position: relative; 
  border: 1px solid #999; 
  border-radius: 5px; 
  color: black; background: transparent
  } 
  
  .but_delete {display: inline-block; width: 16px; height: 16px; 
    background: url(images/delete.png) no-repeat; 
    position: absolute; top: -2px; right: -8px;
    cursor: pointer;
      }
  .droparea_copy .draggable { display: block; margin-bottom: 0.3em }
  .droparea_move_sc .draggable { margin: 1px 5px 1px 0 ; border: 0px none; background-color: transparent; font-weight: bold; padding: 0; 
    vertical-align: 0.3em;   }
  .droparea_move .draggable {margin: 1px 10px 1px 0 ;}

  .droparea_copy input, .droparea_move input, .droparea_move_sc input { display: none; vertical-align: middle}
  .dragbase { min-height: 2em; background: #ddd; margin-bottom: 1em; }

.droparea_clone span[draggable] {
     border: 0px none; padding: 0;
}
  p.lines7 { height: 8.4em }
.checks  { display: none; }

span.droparea_move_sc {
    min-height: 2.5em;
    min-width: 5em;
    vertical-align: top;
}

p span.droparea_move_sc {
min-height: 2.0em;
vertical-align: middle;
padding: 0.2em;
}

/**/ [data_target] { display: none; } 
ul.flown li { float: left; width: 30% }

/* .droparea_move .ok, .droparea_move_sc .ok,  */
.droparea_move_sc font, .droparea_move_sc img[src*=checked_green], .droparea_move_sc img[src*=cross_red], .droparea_move_sc input, .droparea_move_sc .ok {display: none}
.droparea_clone font, .droparea_clone img, .droparea_clone input {display: none}
.droparea_move_sc img[draggable], .droparea_clone img[draggable] {display: inline-block; margin: 0 auto }
.ans_correct, .ans_correct * { border-color: green; color: darkgreen; font-weight: bold;}
.ans_wrong, .ans_wrong * { border-color: red; color: red; font-weight: bold;}

.first-word [draggable]::first-letter { text-transform: uppercase}

.column2 { float: left; width: 45%; }

.question blockquote { 
font-family: Georgia, serif !important; font-size: 110%;
margin: 1em 1em 1em 1em;
   border: 1px solid #ccc;
   padding: 0.5em;
   background: #eee;
    -moz-box-shadow:    2px 2px 2px 2px #ccc;
  -webkit-box-shadow: 2px 2px 2px 2px #ccc;
  box-shadow:         2px 2px 2px 2px #ccc;

}

.popisovaci:before { position: absolute; left: 0; top: 0; content: ""; width: 50%; height: 100%; background: transparent} 

/*************** pocitadlo znaku a slov ********/
.charCounter, .wordCounter { display: block}
.warning  {color: red}

  


/**** otazky s napovedou ****/
.hinted { display: inline-block; vertical-align: bottom}
.hinted .hint { display: block; font-size: 90%; font-weight: bold; color: #999}

/**** cviceni s klicem ****/
.solution, .solutionDisplayed { 
      display: inline-block; min-height: 40px; /*width: auto; 400px; */
       padding-left: 25px; padding-top: 0.0em; 
     background: url(https://is.muni.cz/pics/icons/mini-key.gif) no-repeat 0 5px;
     font-style: italic; font-size: 90%;
     vertical-align: top;
     cursor: help;
     
       
  }
  
  label + .solution, label + .solutionDisplayed {  width: 250px}   
  .solution * { display: none}
  .solutionDisplayed p {text-indent: 0}


.block.droparea_move_sc {
    display: block;
    min-height: 2.5em;
}

.marked { display: inline-block; padding: 0.2em; background-color: #aaa; vertical-align: baseline }
.variant {display: inline-block}
.variant + .variant { margin-left: 3em; }

.parallel { display: flex;}
.parallel-frame { flex: 1 0 50%; padding: 1rem }
.parallel-frame label + h4 {margin-top: 1rem}
.parallel-frame label {display: block}