.placeditem,
.item { 
  background-color:white;
  padding: 4px;
  text-align:center;
  clear:left;
}

.block-content {
  display: block;
  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;
  text-align:center;
}

.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;
}

#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%;
}

#placestable {
  border-spacing: 5px
}

#placestable td {
  /*border:1px solid red;*/
}

td.row-head {
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  min-width: 50px;
  min-height: 17px;
  height: 100%;
  padding: 5px;
  vertical-align: middle;
}

div.row-head {
  height: 100%;
  display: block;
}

td.col-head {
  min-width: 50px;
  min-height: 17px;
  vertical-align: middle;
  text-align: left;
}

div.col-head {
  color: #41617d;  
  padding: 5px;
  white-space: nowrap;
}

.place {
  background-color: #DDDDDD;
  border: 1px solid #DDDDDD; 
  min-width: 70px;
  min-height: 17px;
  display: block;
  padding: 2px;
}

.place-line {
  vertical-align:middle;
}

.place-line div {
  border-top: 1px solid #000;
  height: 1px;
  width: 40px;
}

.filled {
  border:1px solid transparent;
  background-color: transparent;
  display: block;
}

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

.placeCell {
  vertical-align: middle;
}

.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: block;
  line-height: 1em;
}

.filled .blockElement {
  vertical-align: bottom;
  /*white-space: nowrap;*/
  width: auto;
  text-align: left;
}

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

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

#content {
  background-color: #F5F5F5;
  height:100%;
/*
  padding-left: 5px;
  padding-right: 5px;
  */
}

div.ok {
  text-decoration: none;
  color: #000 !important;
  background-color: #C1E7B8;
  border: 1px solid #C1E7B8;
}

div.wrong {
  text-decoration: none;
  color: #000 !important;
  background-color: #FDC3C2;
  border: 1px solid #FDC3C2;
}

div.ok .res,
div.wrong .res {
  margin-top: 2px;
  border:1px solid #41617d;
  background-color: #FFF;
  padding:5px;
  color: #000 !important;
}

.answer {
  padding-right: 0px;
  padding-left: 0px;
}

.answer-comment, 
div.wrong .res span,
div.ok .res span {
  text-decoration: none  !important;
  color: #000 !important;  
}
  
.answer img {
  vertical-align: bottom;
  padding-bottom: 2px;
}

.res-head {
  font-size: 10px;
  font-family: "Arial", sans;
  text-transform: uppercase;
  color: #41617d;
  margin-top: 10px;
}

.empty {
  display: none;
}