@charset "utf-8";
/* CSS Document */

@import url("base_00.css");

.ex-container {
	display:block; width: 95%;
	/*background-color: CORNSILK;*/
	margin: 0 auto; padding: 1%;
}

.task {
	display: block; position: relative;
	align-items: center; justify-content: center; align-content: center;
	/*background-color: white;*/
	padding: 0;
	margin: 0 auto 15px auto;
}

.answer_img {
	display:block; position: relative;
	width:3.5rem; height:3.5rem; top:21px;
	margin:0 auto; padding: 0px;
}

.task_number {
	display:block; width:3rem; height:3rem;
	position: absolute; top:30px; right:0px;
	font-size:20pt; font-weight: bold; font-family: 'square-text';
	text-align: center; line-height: 1.75;
	margin:0; padding: 0px;
	border-radius: 50% 0 0 50%;
	background-color: darkslategray; color: white;
}
.media-player {
	position:relative; display:block;
	/*background-color:white;*/
	height: 50px!important; width: 100%!important;
	border-right: solid 4px darkslategray!important;
}

.sequence {
  display: flex; flex-direction: row; flex-wrap: wrap;
	align-items: center; justify-content: flex-start; align-content: center;
	width: 100%; border-right: solid 4px darkslategray;
  margin: 0px auto 0px!important; padding: 25px 10px 10px;
}
#seq_01, #seq_01 + .media-player  {
	background-color: BURLYWOOD;
}
#seq_02, #seq_02 + .media-player {
	background-color: GOLD;
}
#seq_03, #seq_03 + .media-player {
	background-color: THISTLE;
}
#seq_04, #seq_04 + .media-player {
	background-color: SPRINGGREEN;
}
#seq_05, #seq_05 + .media-player {
	background-color: INDIANRED;
}
#seq_05 .ready_answer {
	color: white;
}
#seq_06, #seq_06 + .media-player {
	background-color: DEEPPINK;
}
#seq_06 .ready_answer {
	color: white;
}
#seq_07, #seq_07 + .media-player {
	background-color: DARKKHAKI;
}
#seq_08, #seq_08 + .media-player {
	background-color: CRIMSON;
}
#seq_08 .ready_answer {
	color: white;
}
#seq_09, #seq_09 + .media-player {
	background-color: MEDIUMPURPLE;
}
#seq_09 .ready_answer {
	color: white;
}
#seq_10, #seq_10 + .media-player {
	background-color: MEDIUMSEAGREEN;
}
#seq_10 .ready_answer {
	color: white;
}

.sequence li:not(.ready_answer) {
  display: block; min-width: 60px;
  padding: 7px 14px; margin: 2px 2px;
  /*border-bottom: 1px solid #fff;*/
  cursor: grab;
	font-family: 'square-text'; font-size:17pt;
	text-align: center;
	background-color: white; color:black;
}
.sequence li:first-child:first-letter {
  text-transform:capitalize!important;
}.sequence li:first-child {
	border-radius: 12px 0 0 12px;
	margin-left:0;
}.sequence li:last-child {
	border-radius: 0 12px 12px 0;
	margin-right:0;
}


.dark-background-class {
	background-color: yellow!important; color:black!important;
  -moz-box-shadow: 3px 3px 2px 0px black;
  -webkit-box-shadow: 3px 3px 2px 0px black;
	box-shadow: 3px 3px 2px 0px black;
}
.sortable-drag {
	background-color: MIDNIGHTBLUE!important; color:white!important;
}

.ready_answer {
	display: inline-block;
  padding: 5px; margin: 0px;
  cursor: default;
	font-family: 'square-text'; font-size:17pt; line-height: 1.25;
	font-weight: bold; text-align: center;
	letter-spacing: 0.75px;
	border-bottom: solid thin; border-radius:0!important;
}


.hiddenA {
	display:block; margin:0; padding:5px 0;
	background-color: darkslategray;
	border-radius: 0 0 0px 20px;
}
.hiddenA div {
	display:block;
}
.hiddenA p {
	font-size: 14pt; line-height: 1.5; font-family: 'square-text';
	color:white;
	margin:0 0 0 25px; padding:0px;
}

#showA.disabled {
	background-color: dimgray!important; color:white; 
	border: none;
	-moz-box-shadow: 4px 4px 0px 0px black!important;
  -webkit-box-shadow: 4px 4px 0px 0px black!important;
  box-shadow: 4px 4px 0px 0px black!important;
}#showA.disabled:hover {
	background-color: teal!important; color:white!important; 
	transition: background 0.4s ease, color 0.4s ease!important;
}
#ShowHide {
  display:block;
	min-width: 400px; min-height:2.5em;
	margin:20px auto; padding:0px 8px;
	font-size: 13pt; font-weight: bold; line-height: 1.25;
  border: solid 2px ROYALBLUE;
	-moz-box-shadow: 4px 4px 0px 0px darkblue;
  -webkit-box-shadow: 4px 4px 0px 0px darkblue;
  box-shadow: 4px 4px 0px 0px darkblue;
	color: black; background-color: white;
	cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
#ShowHide:hover {
  color: white; background-color: darkblue;
	border: solid 2px floralwhite;
}


@media screen and (max-width: 980px) {
.sequence li:not(.ready_answer) {
	font-size:16pt;
	padding: 6px 12px;
}

.ready_answer {
	font-size:16pt;
}

}


@media screen and (max-width: 690px) {
.ex-container {
	width: 100%;
	margin: 0 auto; padding: 0%;
}
.sequence li:not(.ready_answer) {
	font-size:15pt;
	padding: 4px 8px;
}

.ready_answer {
	font-size:15pt;
}

}