.item { 
  background-color:white;
  display:inline-block;
  padding: 4px;
  text-align:center;
  clear:left;
}

.block-content {
  border: 0px dashed black;
  margin: 4px;    
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.35);
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.35);
}

.ui-draggable-dragging {
  cursor: grabbing !important;
  z-index:1000;
}

.draggeditem {
  background-color:white;
  padding: 4px;
  z-index: 1000;
  display:inline-block;
  text-align:center;
  line-height: 1em;
}

.block-content:hover {
  cursor: grab;
}

#source-wrap {
  display: flex;
  display: -webkit-flex;  
          flex-direction: row;  
  -webkit-flex-direction: row;
}

#source {
  background-color: #DDDDDD;
  border: 1px solid #DDDDDD;
  overflow-x: hidden;
  overflow-y: auto;
  order: 1;
}

#destination {
  /*width: 100%;*/
  border: 1px solid #DDDDDD;
  overflow-x: auto;
  overflow-y: auto;  
  order: 3;
}

#content {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#resizer {
  cursor: col-resize;
  order: 2;
  width: 8px;
  height: 8px;
  /*
  margin-left: 0px;
  border-top: 1px solid #C0C0C0;
  border-left: 2px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
  */
  background-color: #A0A0A0;
  /*background-color: #F5F5F5;*/
  visibility: hidden;
}

#resizer div.ico {
  position: relative;
  top: 49%;
  left: 0px;
  width: 5px;
  height: 5px;
  margin-top: 0px;
  z-index:100;
  visibility: hidden;  
}

#container {
  width: 100%;
}

.paragraph {
  line-height: 2em;
}

.place {
  background-color: #DDDDDD;
  border: 1px solid #DDDDDD; 
  min-width: 50px;
  display: inline;
  padding: 2px;
}

.place::after {
  content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
}

.filled {
  border:0px solid transparent;
  background-color: transparent;
  display: inline;
}

.filled::after {
  content: none;
}

.line-filled {
/*  padding-top: 5px; */
}

.placeditem {
  background-color: #EFEFEF;
  border: 1px solid #EFEFEF;
  color: #315fe4;
  cursor: grab;
  display: inline;  /* inline - pokud je to jen text */
  text-align: center;
  padding: 2px;
  
  /*
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: blue;
  */
}

.activate {
/*  background-color: red; */
}

.place-hover {
  background-color: red !important;
}

#source.place-hover {
  background-color: #b8cbff !important;
}

.place-activate {
  border: 1px solid #4374ff;
}

#wrap {
 width:100%;
}

#source, #destination {
  min-height: 50px;
  min-width: 50px;
}

.blockElement {
  display: inline-block;
  line-height: 1em;
}

.filled .blockElement {
  vertical-align: bottom;
}

.drag-active {
  border: 1px solid #B7B7B7;
  background-color: #b8cbff;
}

.ok, .ok span {
/*
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: green; 
  color: green !important;
*/
  color: black !important;
}

div.ok {
  background-color: #C1E7B8;
  border: 1px solid #C1E7B8;
}

.wrong, .wrong span {
/*
  text-decoration: line-through;
  text-decoration-style: solid;
  text-decoration-color: red; 
  color: red !important;
*/
  color: black !important;
}

div.wrong {
  background-color: #FDC3C2;
  border: 1px solid #FDC3C2;
}


.groupAnswer {
  display: inline-block;
  border: 1px solid #B0B0B0;
  line-height: 1.55em;
}