.wjec-drag-and-drop .drag-and-drop-activity .drag-list li.ui-droppable, .static-list li {
  min-height: 50px;
  margin-bottom: 44px;
  height: auto;
}

.wjec-drag-and-drop .drag-list li.ui-droppable {
  background-color: #E4E4E4;
  line-height: 28px !important;
}

.static-list li {
  list-style: none;
  border: 1px solid #fff;
  border-radius: 7px;
  font-size: 1.2em;
}

.wjec-drag-and-drop span.swappableElement, .static-list li {
  padding: 10px;
}

.wjec-drag-and-drop span.swappableElement, .static-list span.staticElement {
  color: #31708f;
  background-color: #bce8f1;
  min-height: 50px;
  height: auto;
}

.wjec-drag-and-drop li, .static-list li {
  color: #31708f;
  background-color: #bce8f1;
  border-color: #bce8f1;
  margin-bottom: 25px;
  position: relative;
}

.static-list li.staticElement {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  border-radius: 7px;
  background: #009FE3;
}

.wjec-drag-and-drop span.swappableElement:after, .static-list span.staticElement:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #bce8f1;
  border-bottom: 0;
  margin-left: -20px;
  margin-bottom: -20px;
}

.wjec-drag-and-drop .ui-draggable.being-dragged {
  background-color: #b2f2ff !important;
}

.wjec-drag-and-drop .ui-draggable.being-dragged:after {
  border-top-color: #bce8f1 !important;
}

.highlighted-text {
  background-color: #ffef7d;
  margin-left: 0 !important;
}

.fa-times, .fa-check {
  margin-left: 10px;
}

/* Highlight Text */

.highlighted {
  font-style: normal;
}

.key {
  margin-bottom: 20px;
}

.key-list li {
  line-height: 36px;
}

.highlight.yellow {
  background: #FFFF7B;
}

.highlight-key {
  height: 30px;
  width: 30px;
  background: #FFFF7B;
  border-radius: 50%;
  display: inline-block;
  box-shadow: #666 0 0 4px 2px;
  margin-left: 15px;
  vertical-align: middle;
}