.grid-layout {
  margin-left: auto;
  margin-right: auto;
}

#drop1 {
  position: absolute;
  top: 82px;
  left: 88px;
  width: 258px;
  height: 134.5px;
}

#drop2 {
  position: absolute;
  top: 82px;
  left: 356px;
  width: 258px;
  height: 134.5px;
}

#drop3 {
  position: absolute;
  top: 248px;
  left: 88px;
  width: 525.5px;
  height: 60.5px;
}

#drop4 {
  position: absolute;
  top: 342.5px;
  left: 356px;
  width: 258px;
  height: 136px;
}

#drop5 {
  position: absolute;
  top: 508px;
  left: 88px;
  width: 525.5px;
  height: 61.5px;
}

#drop6 {
  position: absolute;
  top: 685px;
  left: 51px;
  width: 565px;
  height: 62px;
}

#drop7 {
  position: absolute;
  top: 783px;
  left: 51px;
  width: 565px;
  height: 62px;
}

/* DRAGGABLE ACTIVITY */

.wjec-drag-and-drop-text .row {
  margin-bottom: 20px;
}

/*DRAG HOLDER
*/
.drags-holder {
  min-height: 50px;
  background-color: #D2D2D2;
  padding: 10px;
  text-align: center;
  margin-top: 20px !important;
}

/*DRAGS
*/
.ui-draggable,
.wjec-drop {
  text-align: center;
}

.ui-draggable {
  cursor: move;
  background: #219eab;
  color: #FFF;
  padding: 5px 7px;
  display: inline-flex;
  font-size: 18px;
  margin: 5px;
}

.ui-draggable-dragging {
  background: #D2D2D2;
  color: #333;
  -webkit-box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
  -moz-box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
  box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
}

.incorrect, .drag-incorrect {
  background-color: #ab2222 !important;
  color: #FFF !important;
}

.correct, .drag-correct {
  background-color: #21ab58 !important;
  color: #FFF !important;
}

.drag-correct, .drag-incorrect {
  border: none !important;
}

.fa-times, .fa-check {
  display: none;
  margin-top: 5px;
}

/*DROPS
*/

.wjec-drag {
  width: auto !important;
  height: auto !important;
}

.wjec-drag-and-drop-text .ui-droppable {
  background: #D2D2D2;
  vertical-align: middle;
}

.wjec-drop .wjec-drag {
  background-color: #D2D2D2;
  color: #333;
  width: auto !important;
  height: auto !important;
  font-size: 14px;
}

.wjec-drag-and-drop-text p {
  line-height: 2em;
  font-size: 16px;
}

.drag-and-drop-text p .drop {
  line-height: 1.8em;
}

/*FEEDBACK*/
.feedback {
  visibility: hidden;
  min-height: 3em;
  margin-top: 20px;
}

.feedback h4 {
  display: none;
}

/*ACTIVITY TWO*/
.complete-diagram {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  #drop1 {
    position: absolute;
    top: 82px;
    left: 104px;
    width: 258px;
    height: 134.5px;
  }

  #drop2 {
    position: absolute;
    top: 82px;
    left: 370px;
    width: 258px;
    height: 134.5px;
  }

  #drop3 {
    position: absolute;
    top: 248px;
    left: 104px;
    width: 525.5px;
    height: 60.5px;
  }

  #drop4 {
    position: absolute;
    top: 342.5px;
    left: 370px;
    width: 258px;
    height: 136px;
  }

  #drop5 {
    position: absolute;
    top: 508px;
    left: 104px;
    width: 525.5px;
    height: 61.5px;
  }

  #drop6 {
    position: absolute;
    top: 685px;
    left: 66px;
    width: 565px;
    height: 62px;
  }

  #drop7 {
    position: absolute;
    top: 783px;
    left: 66px;
    width: 565px;
    height: 62px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #drop1 {
    position: absolute;
    top: 74px;
    left: 65px;
    width: 235px;
    height: 123px;
  }

  #drop2 {
    position: absolute;
    top: 74px;
    left: 308px;
    width: 235px;
    height: 123px;
  }

  #drop3 {
    position: absolute;
    top: 227px;
    left: 65px;
    width: 476.5px;
    height: 53.5px;
  }

  #drop4 {
    position: absolute;
    top: 312.5px;
    left: 308px;
    width: 235px;
    height: 123px;
  }

  #drop5 {
    position: absolute;
    top: 464px;
    left: 64px;
    width: 478px;
    height: 54.5px;
  }

  #drop6 {
    position: absolute;
    top: 623px;
    left: 28px;
    width: 517px;
    height: 62px;
  }

  #drop7 {
    position: absolute;
    top: 714px;
    left: 28px;
    width: 517px;
    height: 62px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #drop1 {
    position: absolute;
    top: 82px;
    left: 90px;
    width: 258px;
    height: 134.5px;
  }

  #drop2 {
    position: absolute;
    top: 82px;
    left: 356px;
    width: 258px;
    height: 134.5px;
  }

  #drop3 {
    position: absolute;
    top: 248px;
    left: 90px;
    width: 525.5px;
    height: 60.5px;
  }

  #drop4 {
    position: absolute;
    top: 342.5px;
    left: 356px;
    width: 258px;
    height: 136px;
  }

  #drop5 {
    position: absolute;
    top: 508px;
    left: 90px;
    width: 525.5px;
    height: 61.5px;
  }

  #drop6 {
    position: absolute;
    top: 685px;
    left: 52px;
    width: 565px;
    height: 62px;
  }

  #drop7 {
    position: absolute;
    top: 783px;
    left: 52px;
    width: 565px;
    height: 62px;
  }
}