h1, h2, h3, p, span {
	font-family: 'Lato', sans-serif;
	font-style: normal;
}

h1 {
	font-weight: bold;
	font-size: 22px;
	line-height: 26px;

	margin-bottom: 24px;

	color: #222222;
}

h2 {
	font-weight: bold;
	font-size: 16px;
	line-height: 19px;

	color: #222222;

	margin-bottom: 24px;
}

body {
	margin:0px;
}


.top_bar {
	width: 100vw;
	height: 70px;
	margin: 0px;
	border-bottom: 2px solid #1C2ECC;
	background: #F9FBFF;
	text-align: center;
}

progress[value] {
	-webkit-appearance: none;
   	appearance: none;

	width: 100vw;
	height: 10px;
}

progress[value]::-webkit-progress-bar {
  background-color: #F9FBFF;
  border-radius: 0px;
}

progress[value]::-webkit-progress-value {
	background-color: #1C2ECC;
	border-radius: 0px 5px 5px 0px;
}

iframe {
	width: 100%;
	height: 60%;
}

.changing_frame {
	width: 60vw;
	margin-top: 35px;
	margin-right:auto;
	margin-left: auto;
}

.control {
	width: 100vw;
	height: 135px;
	bottom: 0px;
	left: 0px;
	margin-top: 20px;
	text-align: center;

	position:absolute;

}

.control_feedback {
	border-top: 2px solid #1C2ECC;
	background: #F9FBFF;
}

.btn-container {
	margin:0px;
	text-align: center;
	/*top:40px;*/

}

.fb-container {
	position: relative;
	top: 0px;
	height: 40px;

}

.quiz_row {
	display: flex;
	/*margin-left: 107px;*/
	justify-content:space-between;
}

.quiz_pic {
	width: 298px;
}

.title {
	padding-top: 20px;
  	padding-bottom: 20px;
  	color: #1C2ECC;
}

.large-pic {
	width: 100%;
}

.large-pic-cont {
	width: 80%;
	margin: auto;
}

.quote {
	background: #FFFFFF;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
	border-radius: 20px;
	width: 100%;
	display: flex;
	margin-bottom: 8px;
}

.quote-line-1 {
	padding-left: 30px;
	padding-right: 15px;
	padding-top: 5px;
}

.quote-line-2 {
	padding-left: 30px;
	padding-right: 15px;
	padding-top: 5px;
	padding-bottom: 15px;
}

.highlight {
	font-weight: bold;
	color: #01CD62;
}

.teacher_avatar {
	width: 26px;
	height: 26px;
	margin-top:0px;
	padding-top: 20px;
	padding-left: 20px;

}


/* multiple_choice section*/

.multiple_choice {

	width: 219px;
	height: 38px;

	border: 1px solid #B6B6B6;
	box-sizing: border-box;
	border-radius: 19px;

	text-align: left;

	margin-bottom: 11px;

}

.multiple_choice span {
	font-size: 14px;
	line-height: 17px;
	color: #222222;
	padding-left: 18px;

}

.selected_choice {
	background: #F9FBFF;
	border: 1px solid #1C2ECC;
}

.selected_choice span {
	color: #1C2ECC;
	font-weight: bold;
}

/*input box*/

.input_box {
	/*width: 624px;*/
	width: 100%;
	height: 131px;

	border: 1px solid #B6B6B6;
	box-sizing: border-box;
	border-radius: 10px;
}

.input_box_sm {
	width: 30%;
	height: 40px;

	border: 1px solid #B6B6B6;
	box-sizing: border-box;
	border-radius: 10px;
}

.main-btn {
	width: 136px;
	height: 42px;

	background: #01CD62;
	border: 2px solid #01CD62;
	box-sizing: border-box;
	border-radius: 10px;

	text-align: center;

	position: relative;
	margin:0 auto;
}

.main-btn span {
	font-weight: bold;
	font-size: 18px;
	line-height: 22px;

	align-items: center;

	color: #FFFFFF;
}

/*#back {
	height: 39px;
	width: 39px;
}*/

.fb-container p {
	margin: 0 atuo;
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	color: #222222;
}

.flex_display {
	display: flex;
	align-items: center;
}

.margin-right-20 {
	margin-right: 20px;
}

/*drag n drop*/


.drag_item_cont {
	display:flex;
    flex-direction:row;
	/*justify-content: space-around;*/
}

.drag_item_cont div {
	margin-right: 5px;
}

.tag {
	background: #F9FBFF;
	box-sizing: border-box;
	border-radius: 20px;
	width: 70px;
	height: 30px;
	margin:0;
	text-align: center;
	justify-content: center;
}


.tag_temp_solid_border {
	border: 2px solid #1C2ECC;
}

.tag_temp_dashed_border {
	border: 2px dashed #1C2ECC;
}

.tag_state_solid_border {
	border: 2px solid #01CD62;
}

.tag_state_dashed_border {
	border: 2px dashed #01CD62;
}

#drop_1 {
	position: absolute;
	left: 35vw;
	/*top:64vh;*/
	top:32vw;
}

#drop_2 {
	position: absolute;
	left: 48vw;
	top:32vw;
}

#drop_3 {
	position: absolute;
	left: 63vw;
	top: 20vw;
}

#drop_4 {
	position: absolute;
	left: 35vw;
	top:34.3vw;
}

#drop_5 {
	position: absolute;
	left: 48vw;
	top:34.3vw;
}

#drop_6 {
	position: absolute;
	left: 63vw;
	top: 22.3vw;
}