/* Activity one */ 
#order li, .ui-droppable {
  font-size: 1.2em;
  line-height: 1.3em;
  margin-bottom: 5px;
  min-height: 3em;
}

 #activity{
  font-size: 1.1em;
  line-height: 1.2em;
}

.ui-droppable {
  background-color: rgba(33, 105, 94, 1);
  color: rgb(253,157,0);
  cursor: move;
  line-height: 3em;
  list-style: none;
  position: relative;
  width: 100%;
  margin-bottom: 5px !important;
}

#order li {
    background-color: rgb(255, 255, 255);
    color: #000;
    line-height: 1.4em;
    padding: 0 0.5em;
    border: 1px dotted rgb(4, 146, 148);
}

span.swappableElement {
  background: rgb(4, 146, 148);
  border-radius: 4px;
  color: rgb(255,255,255);
  height: 3em;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 5;
}

.ui-draggable.being-dragged {
  background: rgb(207, 106, 36);
  z-index: 6;
  -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);
}

.totalCorrectHolder {
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
}

.totalCorrectHolder.alert {
  border-radius: 0;
  font-size: 16px;
  font-weight: bold;
  padding: 20px;
}

.totalCorrectHolder.alert-warning {
  border: 1px solid #8a6d3b;
}

.totalCorrectHolder.alert-success {
  border: 1px solid #3c763d;
}

.activity-feedback p {
  display: none;
}

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

.alert {
    margin-bottom: 20px;
  }

}

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

  .alert {
    margin-bottom: 0;
  }

  #activityControls {
    text-align: right;
  }
	
}

/* Large Desktop */
@media(max-width:1200px){
		#order li 
	{
		min-height: 102px;
	}
	
	.ui-droppable
	{
		min-height: 102px;
	}
	
	span.swappableElement
	{
		min-height: 102px;
		padding: 24px;
	}


}

/* Print */
@media print {


}

/* General */

img
{
	margin-left: auto;
	margin-right: auto;
}

.key
{
	margin-top: 20px;
}

.key h6
{
	display: inline-block;
}

.blue-key, .green-key, .black-key, .red-key
{
	border-radius:100%;
	margin-right: 10px;
	display: inline-block;
	width: 30px;
	height: 30px;
}

.blue-container, .green-container, .black-container, .red-container
{
	margin-right: 20px;
}

.blue-key
{
	background-color: rgb(0, 64, 255);
}

.green-key
{
	background-color: rgb(0, 166, 11);
}

.black-key
{
	background-color: rgb(0, 0, 0);
}

.red-key
{
	background-color: rgb(255, 0, 17);
}

#penToolOptions2, #penToolOptions3, #penToolOptions4{
	visibility: visible;
}