/* Activity one and two */

.drag-and-drop ul 
{
    list-style-type: none;
}

.order li, .activitySortableList li.ui-droppable 
{
    font-size: 16px;
    min-height: 70px;
    margin-bottom: 5px;
}

.activitySortableList li.ui-droppable 
{
    position: relative;
    list-style: none;
    cursor: move;
    color: #fff;
    background-color: #E8E8E8;
	margin-bottom: 5px;
}

.order li 
{
    background-color: #E3E3E3;
	color: #333;
	padding: 10px;
}

span.swappableElement 
{
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 70px;
	padding: 10px;
    color: #fff;
    background: rgb(12,5,52);
	cursor: move;
}

.ui-draggable.being-dragged 
{
    z-index: 6;
    opacity: 0.9;
    -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);
}

.feedback p
{
    display: none;
}

.allCorrect 
{
    display: none;
}

/* Activity two */

sup 
{
	font-size: 60%;
	top: -0.8em;
}

.text-entry 
{
    min-height: 50px;
	padding: 10px;
	border: 2px solid #0c0534;
	background: #f3f3f3;
	border-radius: 6px;
	margin-top: 20px;
}

#section-2 .order li
{
	min-height: 50px;
}

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

#section-1 .fa-check, #section-1 .fa-times, #section-2 .fa-check, #section-2 .fa-times
{
	color: #fff;
	margin-top: 5px;
}

span.sortableElement 
{
    z-index: 5;
    width: 100%;
    min-height: 50px;
	padding: 10px;
    color: #fff;
    background: rgb(12,5,52);
	cursor: move;
	display: block;
	margin-bottom: 5px;
	font-size: 16px;
}

#section-2 .order li 
{
	list-style-type: none;
}

/* Activity three */

.statementStack 
{
	text-align: center;
	margin-bottom: 20px;
	padding: 10px;
	background-color: #E8E8E8;
	min-height: 60px;
}

.draggable 
{
    border: solid 2px #333;
    border-radius: 10px;
    color: #333;
    cursor: move;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin: 0 5px;
    padding: 8px;
    text-align: center;
    z-index: 2;
    min-height: 36px;
    min-width: 30px;
}

.statementStack .draggable .fa-times, .statementStack .draggable .fa-check, .draggable.ui-draggable-dragging  .fa-check, .draggable.ui-draggable-dragging .fa-times
{
	display: none !important;
}

.wider-draggable
{
	min-width: 52px;
}

#diagram-area 
{
  position: relative;
  margin-bottom: 50px;
}

.dropZone 
{
	border: 2px solid #333;
	border-radius: 10px;
	height: 36px;
	position: absolute;
	text-align: center;
	min-width: 30px;
	z-index: 2;
	color: #333;
}

.dropZone .draggable 
{
	border-radius: 10px;
	color: #333;
	font-size: 12px;
	font-weight: bold;
	line-height: 36px;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100% !important;
	border: none;
}

.draggable.ui-draggable-dragging 
{
  	min-width: 30px!important;
	max-height: 36px;
}

.smallest-fragment
{
	background-color: #3F76D8;	
}

.biggest-fragment
{
	background-color: #F21C3B;
}

.smallest-fragment, .biggest-fragment
{
	border: 4px solid #196BCE;
	height: 15px;
	width: 35px;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
}

.dropped 
{
	max-height: 36px;
}

.dropped .smallest-fragment, .dropped .biggest-fragment
{
	margin-top: 5px;
}

#drop-1
{
	top: 57px;
    left: 192px;
}

#drop-2
{
	top: 112px;
	left: 328px;
}

#drop-3
{
	top: 220px;
    left: 248px;
}

#drop-4
{
	top: 234px;
    left: 284px;
}

#drop-5
{
	top: 320px;
    left: 318px
}

#drop-6
{
	top: 340px;
    left: 354px;
}

#drop-7
{
	top: 370px;
    left: 528px;
}

#section-3 .fa-check, #section-3 .fa-times
{
	position: absolute;
    margin-left: -17px;
    font-size: 20px;
    margin-top: 14px;
}

#section-3 .fa-check
{
	color: #6b926c;
}

#section-3 .fa-times
{
	color: #c74d4d;
}

/* Tablet */
@media (min-width: 768px)
{
	.dropZone
	{
		min-width: 28px;
		height: 32px;
	}
	
	.draggable
	{
		min-height: 32px;
		font-size: 12px;	
	}
	
	.dropZone .draggable
	{
		line-height: 32px;
	}
	
	.draggable.ui-draggable-dragging 
	{
		min-width: 28px!important;
		max-height: 32px;
	}
	
	.dropped 
	{
		max-height: 32px;
	}
	
	#drop-1
	{
		top: 52px;
    	left: 54px;
	}

	#drop-2
	{
		top: 95px;
    	left: 184px;
	}

	#drop-3
	{
		top: 200px;
    	left: 110px;
	}

	#drop-4
	{
		top: 215px;
    	left: 145px;
	}
	
	#drop-5
	{
		top: 284px;
    	left: 160px;
	}
	
	#drop-6
	{
		top: 304px;
    	left: 194px;
	}
	
	#drop-7
	{
		top: 335px;
    	left: 354px;
	}
}

/* Desktop */
@media(min-width:992px)
{
	.order li, .activitySortableList li.ui-droppable 
	{
		min-height: 50px;
	}
	
	span.swappableElement
	{
		min-height: 50px;
	}
	
	.dropZone
	{
		min-width: 30px;
		height: 36px;
	}
	
	.draggable
	{
		min-height: 36px;
		font-size: 14px;
	}
	
	.dropZone .draggable
	{
		line-height: 36px;
		font-size: 14px;
	}
	
	.draggable.ui-draggable-dragging 
	{
		min-width: 30px!important;
		max-height: 36px;
	}
	
	.dropped 
	{
		max-height: 36px;
	}
	
	#drop-1
	{
		top: 57px;
    	left: 110px;
	}

	#drop-2
	{
		top: 112px;
    	left: 256px;
	}

	#drop-3
	{
		top: 218px;
    	left: 170px;
	}

	#drop-4
	{
		top: 230px;
    	left: 208px;
	}
	
	#drop-5
	{
		top: 320px;
    	left: 225px;
	}
	
	#drop-6
	{
		top: 340px;
    	left: 262px;
	}
	
	#drop-7
	{
		top: 370px;
    	left: 445px;
	}
}

/* Large Desktop */
@media(min-width:1200px)
{
	#drop-1
	{
		top: 57px;
		left: 177px;
	}

	#drop-2
	{
		top: 112px;
    	left: 328px;
	}

	#drop-3
	{
		top: 218px;
    	left: 232px;
	}

	#drop-4
	{
		top: 230px;
    	left: 265px;
	}
	
	#drop-5
	{
		top: 320px;
    	left: 300px;

	}
	
	#drop-6
	{
		top: 340px;
    	left: 336px;
	}
	
	#drop-7
	{
		top: 370px;
    	left: 510px;
	}
}