/*DRAG HOLDER
*/
.drags-holder {
  min-height: 50px;
  margin-bottom: 20px;
}

span.drag-inner{            /*use flex to vertically align the text in the draggables */
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
  padding: 2px;
  font-size: 16px;
  line-height: 18px;
}

#dragAndDrop2 span.drag-inner{
  font-size: 16px;
  line-height: 18px;
  padding:4px;
}

/*DRAGS*/

.wjec-drag {
  cursor: move;
  color: #fff;
  background-color: #219eab;
  border: 1px solid #219eab;
  display: inline-block;
  vertical-align: middle;
  width:115px;
  height:78px;
}

#dragAndDrop2 .wjec-drag {
  width:300px;
  height:64px;
}

.drags-holder .wjec-drag {
  margin: 5px 10px;
  vertical-align:middle;
  text-align: center;
}

.ui-draggable-dragging {
  background: #219eab;
  opacity: 0.8;
  -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);
}

/*DROPS
*/
.wjec-drop {
  background: #FFF;
  border: 1px dotted #000;
  position: relative;
  margin:0;
  display: inline-block;
  height: 100%;
  min-height: 60px;
  width:115px;
}

#dragAndDrop2 .wjec-drop {
  width:300px;
}

.wjec-drop .wjec-drag{
  margin:0;
  text-align:center;
}

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

.feedback h4 {
  display: none;
}

th{
  color: #fff;
  background-color: #219eab;
  width: 115px;
  font-size:16px;
}

#dragAndDrop2 th{
  width:300px;
  font-size:16px;
}


.table>tbody>tr>td {
    border-top: 1px solid #ddd;
    padding:4px;
    font-size:16px;
    line-height:18px;
    height:40px;
    vertical-align:middle;
}


#dragAndDrop2 .table>tbody>tr>td {
    font-size:16px;
    line-height:18px;
}

.btn-default{
  margin-bottom:10px;
}




/*** Breakpoints ***/


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

  .table>tbody>tr>td {
    font-size:16px;
    line-height:18px;
  }

  th{
    width: 149px;
  }

  #dragAndDrop2 th{
    width:300px;
    font-size:16px;
  } 

  .wjec-drag {
    width:149px;
  }

  #dragAndDrop2 .wjec-drag {
    width:300px;
    height:60px;
  }

  .wjec-drop {
    width:149px;
  }

  #dragAndDrop2 .wjec-drop {
    width:300px;
  }

}

/* Large Desktop */
@media(min-width: 1200px){

  .table>tbody>tr>td {
    font-size:18px;
    line-height:20px;
  }


  th{
    width: 186px;
    font-size:18px;
  }

  #dragAndDrop2 th{
    width:390px;
    font-size:18px;
  }   

  .wjec-drag {
    width:186px;
  }

  #dragAndDrop2 .wjec-drag {
    width:390px;
    height:64px;
  }

  .wjec-drop {
    width:186px;
  }

  #dragAndDrop2 .wjec-drop {
    width:390px;
  }

  span.drag-inner{ 
    font-size: 18px;
    line-height: 20px;
  }

  #dragAndDrop2 span.drag-inner{
    font-size: 18px;
    line-height: 20px;
  }

}