@import url('https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap');

*:focus {
	outline:none;
}

.h5p-content {
	background:transparent;
}

.h5p-task-description {
	display:none;
	text-align:center;
	border:none;
}

.h5p-image-sequencing > ul {
	padding:0;
	border:none;
	overflow:visible!important;
	width:auto;
	margin:2em auto 0 auto;
	list-style-type: none;
}

.h5p-image-sequencing > ul:focus {
	outline:none;
}
@media (max-width:730px) {
	.h5p-image-sequencing > ul li {
		counter-increment: step-counter;
		position:relative;
	}
	.h5p-image-sequencing > ul li::before {
		position:absolute;
		left:-5px;
		top:-5px;
		
		content: counter(step-counter);
		font-size: 0.8em;
		background-color:#000;
		color: white;
		padding:1px 9px 0 9px;
		border-radius: 50%;
	}
}

.sequencing-item {
	margin: 0 5px 1em 5px;
	border-radius:0;
	background-color:#fff;
	border-color:transparent!important;
	transition:0.2s;
	width:100px;
	height:7.2em;
}
.draggabled .image-container,
.sequencing-dropzone {
	width:100px;
	height:7.2em;
}
.draggabled .image-container {
	height:6em;
}
.sequencing-item:focus {
	outline:none;
}
.sequencing-item:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.draggabled .image-container {
	width:100%;
}

.sequencing-correct-mark {
	background-color:#95c100;
}
.sequencing-correct {
	border: solid 2px #95c100!important;
}
.sequencing-incorrect {
	border: solid 2px #dd2e2e!important;	
}
.h5p-joubelui-score-bar-progress {
	background: #95c100;
  background: linear-gradient(to right, #52ca8d, #95c100);
}

.h5p-joubelui-button:first-child {
	float:right;
}
.h5p-joubelui-button:last-child {
	margin-left:0;
	float:left;
}

.sequencing-status {
	box-sizing:border-box;
  font-size: 19.2px;
  font-size: 1.3rem;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding:0.2em 1.1em 2em 1.1em;
  font-size: 1.2rem;
  font-family: "Patrick Hand",sans-serif;
}
.sequencing-status dt {
	clear: left;
	float: left;
	margin: 0 1em 0 0;
	font-weight: bold;
	font-family: "Patrick Hand",sans-serif!important;
	min-width:87px;
}
.sequencing-status dd {
  float: left;
  width: auto;
  margin:0;
  font-family: "Patrick Hand",sans-serif!important;
}

.sequencing-feedback-show {
	padding: 0 1.1em;
}
.feedback-element {
	margin-bottom:0.5em;
}
.h5p-joubelui-score-bar {
	border-color:transparent!important;
}
.h5p-joubelui-score-bar:focus,
.feedback-element:focus,
.sequencing-feedback:focus {
	outline:none;
}
.h5p-joubelui-score-bar-star-shadow {
  fill: transparent;
}
.h5p-joubelui-score-bar-star-border {
	stroke: #008a9b;
	stroke-width: 4px;
}
.sequencing-feedback {
  font-family: "Patrick Hand",sans-serif;	
}

.h5peditor .ui-dialog .h5p-joubelui-button, .h5peditor .h5p-joubelui-button, .h5p-joubelui-button {
	background: url('img/button-nav.svg') center center no-repeat;
  background-size: 100% 100%;
  padding: 0.4em 0.8em 0.7em;
  color: #000;
  text-decoration: none;
  font-size: 20.8px;
  font-size: 1.3rem;
  transition: 0.2s;
  font-family: "Patrick Hand",sans-serif;
}
.h5peditor .ui-dialog .h5p-joubelui-button:hover, 
.h5peditor .h5p-joubelui-button:hover, 
.h5p-joubelui-button:hover {
	background: url('img/button-nav.svg') center center no-repeat;
  background-size: 100% 100%;
  padding: 0.4em 0.8em 0.7em;
  color: #000;
  text-decoration: none;
  font-size: 20.8px;
  font-size: 1.3rem;
  transition: 0.2s;
  font-family: "Patrick Hand",sans-serif;
	transform: scale(1.1);
}

.draggabled .image-desc .text {
	font-size:0.7em;
}
.draggabled .image-desc {
	padding: 0.1em 0;
}

.sequencing-feedback-show {
	width:100%;
	max-width:300px;
}

@media (min-width: 290px) {
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 87px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:87px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 310px) {
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 96px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:96px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 330px) {
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 107px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:107px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 360px) {
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 122px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:122px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 380px) {
	.draggabled .image-desc .text {
		font-size:0.9em;
	}
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 132px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:132px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 434px) {
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 160px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:160px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 470px) {
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 110px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:110px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 510px) {
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 130px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:130px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 592px) {
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 150px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:150px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 616px) {
	.h5p-image-sequencing > ul {
		padding:0 2em;
	}
	.sequencing-item {
	  width: 112px;
	  height:8.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:112px;
		height:8.5em;
	}
	.draggabled .image-container {
	  height:6.5em;
	}
}

@media (min-width: 650px) {
	.sequencing-item {
	  width: 140px;
	  height:9em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:140px;
		height:9em;
	}
	.draggabled .image-container {
	  height:7.5em;
	}
}

@media (min-width: 919px) {
	.sequencing-item {
	  width: 145px;
	  height:11.5em;
	}
	.draggabled .image-container,
	.sequencing-dropzone {
		width:145px;
		height:11.5em;
	}
	.draggabled .image-container {
	  width: 145px;
	  height:10em;
	}
}

@media (max-width:480px) {
	.h5p-joubelui-button:first-child {
		float:left;
		clear:both;
	}
	.h5p-joubelui-button:last-child {
		margin-left:0;
		float:left;
		clear:both;
	}
}