/* Screen 1 */

#title-container {
  background: rgb(12,5,52);
  color: #FFF;
  border-radius: 7px;
  border: 1px solid #FFF;
  font-size: 1.2em;
  line-height: 3em;
  margin-bottom: .2em;
  min-height: 3em;
  text-align: center;
}

#activitySortableList li.ui-droppable {
    background-color: #999;
    border-radius: 7px;
    border: 1px solid #FFF;
    color: #FFF;
    cursor: move;
    font-size: 1.2em;
    line-height: 3em;
    list-style: none;
    margin-bottom: .2em;
    min-height: 3em;
    position: relative;
}

span.swappableElement {
    background: rgb(144,1,40);
    border-radius: 7px;
    color: #FFF;
    height: 2.9em;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 5;
}

.ui-draggable.being-dragged {
  background: rgba(144,1,40,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);
  z-index: 6;
}

#feedback-1 {
  margin-top: 20px;
}

/* Screen 2 */

.table {
  font-size: 16px;
}

#statementStack {
  text-align: center;
  margin-bottom: 20px;
}

.draggable {
  background: rgb(144,1,40);
  border-radius: 7px;
  color: #FFF;
  cursor: move;
  font-size: 16px;
  padding: 6px;
  text-align: center;
  z-index: 2;
  height: auto!important;
  line-height: 1.6em;
  display: block;
}

.dropZone .draggable {
  background: transparent;
  color: #333;
  font-size: 16px;
  padding: 0;
  text-align: left;
  display: inline!important;
}

.table>thead>tr>th {
  background: rgb(12,5,52);
  color: #FFF;
  font-weight: 400;
  vertical-align: middle;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  padding: 12px;
}

table.fixed {
  table-layout: fixed;
  width: 100%;
}

/* Screen 3 */

.task-2, #task1Btn {
  display: none;
}

.dropZone-2 {
  background-color: rgba(29,78,137,0.15);
  border-radius: 4px;
  margin-bottom: 1em;
  min-height: 380px;
  padding: 1em;
  text-align: center;
}

.dropZone-2 hr {
  border-color: rgba(208,208,208,1);
  margin: 20px 0;
}

.draggable-2, .dropZone-2 .draggable-2 {
  background-color: rgb(144,1,40);
  border-radius: 7px;
  color: #FFF;
  cursor: move;
  display: inline-block;
  font-size: 16px;
  padding: .5em;
  text-align: center;
  z-index: 2;
}

.draggable-2 {
  width: 100%;
}

.dropZone-2 .draggable-2 {
  height: auto!important;
  margin-bottom: 6px;
  width: 96%!important;
}

.dropZone-2 .draggable-2:last-child {
  margin-bottom: 0;
}

#statementStack-2 {
  text-align: center;
}

#feedback-3 {
  margin-top: 20px;
}

.text-entry {
  background: #f3f3f3;
  border-radius: 6px;
  border: 2px solid #0c0534;
  margin-bottom: 10px;
  min-height: 100px;
  padding: 10px;
  font-size: 16px;
}

.text-entry:focus {
  outline: 0;
}



/* Tablet */
@media(min-width: 768px){

  #heading-1 {
    padding: 30px 0 20px;
  }

}

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



}

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

  #heading-1 {
    padding: 16px 0 8px;
  }

}

/* Print */
@media print {


}