#bnm_questionnaire{
	display:flex;
	flex-direction:row;
	width:100%;
	min-height:50vh;
	overflow-y:scroll;
}

#bnm_avatar_layers{
	width:45%;
	background-color:#F0EFEF;
	position:relative;
}

.avatar_layer{
	position:absolute;
	bottom:0px;
	left:0px;
	opacity:1;
	transition:all 0.3s ease-out;
}

.avatar_layer.not_used{
	opacity:0;
}

#bnm_avatar_layers:before{
	content:'';
	display:block;
	width:100%;
	padding-top:100%;
}

#bnm_question_wrapper{
	width:55%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	position:relative;
	padding:0px 20px;
	box-sizing:border-box;
}

#bnm_question_innerwrapper{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	width:80%;
	max-width:650px;
}

#bnm_question{
	text-align:center;
}

#bnm_answer{
	width:100%;
	text-align:center;
}

#bnm_answer h5{
	text-align:center;
	font-weight:400;
	color:#7368AF;
}

#bnm_multiple_answers{
	list-style-type:none;
	padding-left:0px;
	display:flex;
	flex-wrap:wrap;
}

.bnm_answer_btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:45%;
	flex-grow:1;
	text-align:center;
	border:solid 1px #D2D0CB;
	border-radius:5px;
	margin:5px 0px;
	padding:5px;
	box-sizing:border-box;
	cursor:pointer;
	user-select:none;
	transition:all 0.3s ease-out;
}

.bnm_answer_btn.selected{
	background-color:var(--e-global-color-accent);
	color:white;
	border-color:var(--e-global-color-accent);
}

.bnm_answer_btn:nth-child(odd){
	margin-right:5px;
}


.bnm_answer_btn:last-child{
	margin-right:0px;
	margin-left:0px;
}


.bnm_answer_btn:nth-child(even){
	margin-left:5px;
}

.bnm_answer_btn:hover{
	border-color:var(--e-global-color-accent);
}

#bnm_question_footer{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:100%;
	justify-self:flex-end;
	position:absolute;
	bottom:0px;
	left:0px;
	padding:0px 40px;
}

#bnm_prev_question{
	position:absolute;
	top:20px;
	left:20px;
	text-transform:uppercase;
	color:#D2D0CB;
	cursor:pointer;
	opacity:0;
	pointer-events:none;
	font-size:0.8em;
}

#bnm_prev_question.ready{
	opacity:1;
	pointer-events:auto;
}

#bnm_next_question, #bnm_submit{
	display:inline-block;
	height:0;
	opacity:0;
	user-select:none;
	width:100%;
	flex-grow:1;
	text-align:center;
	border:solid 1px #D2D0CB;
	border-radius:5px;
	margin:15px 5px 5px 5px;
	padding:5px;
	color:#333;
	pointer-events:none;
	transition:opacity 0.3s ease-out;
}

#bnm_submit{
	display:none;
}

#bnm_next_question:hover, #bnm_submit:hover{
	background-color:#333;
	color:white;
}

#bnm_next_question.ready, #bnm_submit.ready{
	display:block;
	height:auto;
	opacity:1;
	pointer-events:auto;
	cursor:pointer;
}

#bnm_slider{
	width:100%;
	height:5px;
	background-color:#fff;
	height: 38px;
	-webkit-appearance: none;
	margin: 10px 0;
	width: 100%;
}

#bnm_slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000;
  background: #EFEFEF;
  border-radius: 5px;
  border: 0px solid #000000;
}

#bnm_slider::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #7368AF;
  border: 1px solid #5856A5;
  height: 30px;
  width: 10px;
  background: #7368AF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}

#bnm_slider::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000;
  background: #EFEFEF;
  border-radius: 5px;
  border: 0px solid #000000;
}
	
#bnm_slider::-moz-range-thumb {
  box-shadow: 1px 1px 1px #7368AF;
  border: 1px solid #5856A5;
  height: 30px;
  width: 10px;
  border-radius: 5px;
  background: #7368AF;
  cursor: pointer;
}
	
#bnm_slider::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
	
#bnm_slider::-ms-fill-lower {
  background: #EFEFEF;
  border: 0px solid #000000;
  border-radius: 10px;
  box-shadow: 0px 0px 0px #000000;
}
	
#bnm_slider::-ms-fill-upper {
  background: #EFEFEF;
  border: 0px solid #000000;
  border-radius: 10px;
  box-shadow: 0px 0px 0px #000000;
}
	
#bnm_slider::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 1px #7368AF;
  border: 1px solid #5856A5;
  height: 30px;
  width: 10px;
  border-radius: 5px;
  background: #7368AF;
  cursor: pointer;
}

#bnm_progress_wrapper{
	width:100%;
	text-align:center;
}

#bnm_slider_answer{
	text-align:center;
}

#bnm_slider_output{
	color:#D2D0CB;
	text-align:center;
	text-transform:uppercase;
	font-size:2em;
	font-weight:400;
}

#bnm_slider_output .subtext{
	font-size:0.5em;
}

#bnm_text_answer{
	display:block;
	width:100%;
	margin:0 auto;
}

#bnm_title_slide{
	display:block;
	margin:0 auto;
	width:80%;
	max-width:600px;
	text-align:center;
}

#bnm_text_input{
	width:100%;
	border-width:1px;
	border-color:#efefef;
	border-style:solid;
	text-align:center;
	padding:5px;
}

#question-counter{
	font-size:1em;
	font-weight:400;
	margin-bottom:5px;
}

#bnm_progress_bar, #progress_bar_fill{
	display:inline-block;
	width:100%;
	height:20px;
	border-radius:5px;
	background-color:#efefef;
	position:relative;
	transition:all 0.3s ease-out;
}

#progress_bar_fill{
	position:absolute;
	left:0px;
	width:0%;
	background-color:var(--e-global-color-accent);
}

#text-error{
	display:none;
	color:red;
}

#text-error.active{
	display:block;
}

#bnm_checklist_answers{
	display:inline-block;
    list-style-type:none;
}

.bnm_checklist_item{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:15px;
	margin:10px 0px;
}

.bnm_checklist_item label{
    font-size:1.25em;
}

.bnm_checklist_checkbox{
    width:15px;
    height:15px;
}

/*Media queries*/
@media (max-width:800px){
	#bnm_questionnaire{
		flex-direction:column;
		justify-content:flex-start;
	}
	
	#bnm_question_wrapper{
		width:100%;
	}

	#bnm_question_wrapper{
		padding:10px;
		flex-grow:5;
	}
	
	#bnm_avatar_layers{
		width:100% !important;
		flex-grow:1;
	}
	
	#bnm_question_innerwrapper #bnm_question{
		font-size:1.5em !important;
	}
	
	.bnm_answer_btn{
		font-size:0.8em;
	}
	
	#bnm_question_footer{
		position:relative;
		margin-top:20px;
	}
	
	#bnm_progress_wrapper{
		display:flex;
		align-items:center;
		justify-content:center;
		padding-bottom:20px;
	}
	
	#bnm_progress_wrapper h5{
		margin:0px 5px 0px 0px;
	}
	
	#bnm_progress_bar, #progress_bar_fill{
		height:10px;
	}
	
}