.margin-bottom-xs {
  margin-bottom: 4px;
}
.margin-bottom-sm {
  margin-bottom: 7px;
}
.margin-bottom-md {
  margin-bottom: 14px;
}
.margin-bottom-lg {
  margin-bottom: 28px;
}

.left-margin-sm {
  margin-left: 5px;
}

.right-margin-sm {
  margin-right: 5px;
}

.wjec-drag-and-drop .drag-and-drop-activity ul {
  list-style-type: none;
}
.wjec-drag-and-drop .drag-and-drop-activity .fixed-list li,
.wjec-drag-and-drop .drag-and-drop-activity .drag-list li.ui-droppable {
  font-size: 1em;
  min-height: 7em;
  margin-bottom: 0.2em;
}
.wjec-drag-and-drop .drag-list li.ui-droppable {
  line-height: 3em;
  position: relative;
  list-style: none;
  cursor: move;
  background-color: #dedede;
  border: 1px solid #fff;
  border-radius: 7px;
}
.wjec-drag-and-drop .fixed-list li {
  line-height: 1.2em;
  padding: 0.5em;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #000;
}
.wjec-drag-and-drop span.swappableElement {
  position: absolute;
  font-size: 1em;
  padding:0.5em;
  min-height:7em;
  line-height:1.2em;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}
.wjec-drag-and-drop .swappableElement i {
  display: none;
}
.wjec-drag-and-drop .ui-draggable.being-dragged {
  z-index: 6;
  background: rgba(245, 245, 245, .8);
  box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
  -webkit-box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
}
.wjec-drag-and-drop .allCorrect {
  display: none;
}

.correct {
  color:#fff;
  background-color: #3da759 !important;
}

.incorrect {
  color:#fff;
  background-color: #9a2222 !important;
}


/* Tablet (portrait) */
@media (min-width: 768px) {
  .wjec-drag-and-drop .drag-and-drop-activity .fixed-list li,
  .wjec-drag-and-drop .drag-and-drop-activity .drag-list li.ui-droppable {
    font-size: 1.3em;
    min-height: 5em;
  }

  .wjec-drag-and-drop span.swappableElement {
    padding:0.5em;
    min-height:5em;
    line-height:1.2em;
  }
}

/* Desktop and tablet (landscape) */
@media (min-width: 992px) {

}

/* Large Desktop */
@media (min-width: 1200px) {
  .wjec-drag-and-drop .drag-and-drop-activity .fixed-list li,
  .wjec-drag-and-drop .drag-and-drop-activity .drag-list li.ui-droppable {
    font-size: 1.3em;
    min-height: 4em;
  }

  .wjec-drag-and-drop span.swappableElement {
    padding:0.5em;
    min-height:4em;
    line-height:1.2em;
  }
}