/*
body
    {
	background-color: var(--OQS_COL3);
    }
*/

/*
#top, p.outerbottom, input.flex-btn, input.editbtn, .meter > span
	{
	background-color: #005f6f;
	}


#top, .qarea, input.flex-btn, input.editbtn, .meter, .radio-cell input[type="radio"]:checked + label
	{
    border-color: #005f6f;	
	}
*/



@media only screen and (max-width: 640px) 
	{
	body, p
		{
		-moz-text-size-adjust: auto;
		-webkit-text-size-adjust: auto;
		-ms-text-size-adjust: auto;
		}
	}

h1
	{
	font-size: 140%;
	/*color: maroon;*/
	}
input
	{
	font-size: 100%;
	margin: 0em;
	padding: 0em;
	}
select
	{
	font-size: 100%;
	}
button
	{
	font-size: 100%;
	}
textarea
	{
	font-size: 100%;
	}
p
	{
	font-size: 100%;
	}


	
@media only screen and (max-width: 1040px) 
	{
	span.never_tasted
		{
		display: inline-block;
		}
	}



	
#mainbod
	{
	text-align: left;
	margin: 1em 5em 1em 5em;
	padding: 0em;
	background-color: var(--OQS_COL_GREY);
	border-radius: 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	
	}
@-moz-document url-prefix() 
	{
    	#mainbod { margin-top: 0.3em; }
	}

@media only screen and (max-width: 1000px) 
	{
	#mainbod
		{
		margin: 1em 4em 1em 4em;
		}
	}
@media only screen and (max-width: 800px) 
	{
	#mainbod
		{
		margin: 1em 3em 1em 3em;
		}
	}
@media only screen and (max-width: 600px) 
	{
	#mainbod
		{
		margin: 1em 2em 1em 2em;
		}
	}
@media only screen and (max-width: 400px) 
	{
	#mainbod
		{
		margin: 1em 0.5em 1em 0.5em;
		}
	}
	
	
#main
	{
	margin: 0em;
	}
div.mainpg
	{
	padding: 1.3em 1em 0.5em 1em; 
	margin: 0em;
	/*max-width: 50em;*/
	}
@media only screen and (max-width: 640px) 
	{
	div.mainpg
		{
		padding: 0.5em 1.0em 0em 1.0em;
		}
	}

.section-title
	{
	font-size: 2em;
	font-weight: bold;
	color: #005161;
	padding: 0.5em 0em 0em 1em;
	margin-block-start: 0em;
	margin-block-end: 0em;
	}	

.qarea
	{
	color: #000000;
	background-color: #ffffff;
	padding: 0.5em 1em 0.5em 1em;
	border-left-style: solid;
	border-left-width: 0.0em;	
	}
	
*.bd
	{
	font-weight: bold;
	color: #300;
	}
@media only screen and (max-width: 640px) 
	{
	ul.bd li
		{
		text-align: left;
		}
	}
*.it
	{
		font-style: italic;
        font-size: 100%;

	}
*.it-small
	{
		font-style: italic;
        font-size: 90%;

	}	
*.under
	{
		text-decoration: underline;

	}
*.bullet
	{
		float: top;
		width: 6px;
		padding: 0em 0.5em 0em 0.5em;
		vertical-align: top;
	}		
*.copyright
	{
		font-size: 75%;
	}
*.text-80pc
	{
		font-size: 80%;
	}
*.questionnum
	{
		font-size: 80%;
	}
	
*.highlight
	{
		background-color: #FFF966;
		border: 1px solid #000000;
	}
	
*.highlight:after
	{
	content: ' *';
	color: #000000;
	font-weight: bold;
	font-variant: small-caps;
	}
	
@media only screen and (max-width: 640px) 
	{
	ul.bd li
		{
		text-align: left;
		}
	}        

p.notes, span.notes
	{
	color: blue;
	font-style: italic;
	}
table
	{
	border-collapse: collapse;
	}

/*td, th
	{
	border: thin solid black;
	padding: 0.3em;
	text-align: left;
	}
*/	
input[type=number]
	{
	text-decoration: none;
	}
p.welback
	{
	}
p.remember
	{
	color: #000000;
	font-weight: bold;
	}        
p.selection_warning
	{
	padding-left: 1em;
	}        
div.cloakarea
	{
	visibility: hidden;
        display: none;
        margin: 0em 0em;
	}
p.plsAnswer
	{
	font-weight: bold;
	color: #000000;
	font-size: 110%;
	margin: 0em;
	padding: 0em 0em 0em 0em;
	}
#footer
	{
	}
p.outerbottom
    {
	color: white;
	margin: 0em; 
	padding: 0.15em 0.9em 0.15em 1.2em;
	text-align: right;
    }
p.pfiller
	{
	background-color: #f8f5f0; 
	margin: 5.2em 0em 0em 0em; 
	padding: 2.5em 0em;
	}

span.catchphrase
	{
	font-weight: bold;
	font-size: smaller; 
	}
*.commonfont
	{
	font-size: 100%;
	}
input.next
	{
	margin: 0em;
	padding: 0.1em 0.5em;
	}
input.fnext
	{
	float: right;
	margin: 0.1em 0.5em 0.1em 0em;
	padding: 0.1em 0.05em;
	min-width: 4.0em;
	}	
		
input.flex-btn {
    padding: 0.5em;
    margin: 0.2em;
    line-height: 1em;
    color: white;
    font-weight: bold;
    font-size: 1.0em;
    text-align: center;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid;
}

input.editbtn
	{
	float: right;
	padding: 0.1em 0.05em;
	min-width: 2.3em;
    padding: 0.5em;
    margin: 0.5em;
    line-height: 0.8em;
    color: white;
    font-weight: bold;
    font-size: 1.0em;
    text-align: center;
    -moz-border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    border-radius: 1.5em;
    border: 1px solid #005f6f;
	}

@media only screen and (max-width: 35em) 
{
	input.fnext
		{
		min-width: 0.5em;
		padding: 0.5em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;		
		}
}
*.fleft
	{
	float: left;
	margin-right: 1em;
	}
*.fright
	{
	float: right;
	margin-left: 1em;
	}
hr.qsep
	{
	clear: both;
	width: 49em;
	height: 1px;
	border: dashed 1px navy;
	text-align: left;
	padding: 0em;
	margin: 0em;
	}
*.sink
	{
	clear: both;
	float: none;
	}
div.fresh
	{
	clear: both;
	}
div.fresh, div.fresh p
	{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-top: 0em;
	padding-bottom: 0em;
	}
input.yesopt, input.noopt, input.dunnoopt
	{
	padding: 0em 0em 0em 0.2em;
	margin: 0em;
	float: left;
	}	
label.yesopt, label.noopt, label.dunnoopt
	{
	white-space: nowrap;
	float: left;
	}
label.yesopt
	{
	width: 2.4em;
	margin: 0em 0.7em 0em 0em;
	padding: 0em 0em 0em 0.2em;
	}
label.noopt
	{
	width: 2.0em;
	margin: 0em 0.6em 0em 0em;
	padding: 0em 0em 0em 0.2em;
	}
label.dunnoopt
	{
	width: 6.9em;
	margin: 0em 0.2em 0em 0em;
	padding: 0em 0em 0em 0.2em;
	}

span.incomplete
	{
	color: DarkRed;
	font-variant: small-caps;
	}
span.incomplete:before
	{
	content: "-- ";
	}
span.incomplete:after
	{
	content: "!";
	}
span.educlash
	{
	color: navy;
	background-color: Coral;
	font-variant: small-caps;
	}
span.educlash:before
	{
	content: " ";
	}
span.educlash:after
	{
	content: " ";
	}
button.butshadow:hover
	{
	box-shadow: 0px 0px 10px 2px DimGray;
	}
*.tight
	{
	padding: 0em;
	margin: 0em;
	}
*.mid
	{text-align: center;
	}
*.shy
	{display: none;
	}


*.lev:before
	{
	font-weight: bold;
	font-size: 110%;
	content: "\21D2";
	
	padding: 0em;
	margin: 0em 0.2em 0.2em 0em;
	}

span.nearly
	{
	font-size: 120%;
	font-weight: bolder;
	padding-right: 0.3em;
	}

*.nearly
	{
	color: maroon;

	-webkit-animation: colchg_mt 30s infinite;	/* Chrome, Safari, Opera */
	animation: colchg_mt 30s infinite;		/* Standard syntax */
	}


*.jus
	{text-align: justify;
	}

p.submitbt
	{
	clear: both;
	margin-top: 0em;
	}
	
input[type=submit] {
  font-weight: normal;
}
	
span.missing
	{
	background-color: red;
	padding: 0.2em;
	color: yellow;
	}
table.tim
	{
	background-color: white;
	margin: 0em 0em 1em 0em;
	}
table.tim th
	{
	background-color: #d9d9d9;
	}

div.history
	{
	margin: 0em;
	padding: 0em;
	display: none;
	}
div ~ div.history
	{display: block;
	}

input[type="radio"]:disabled+label
	{color: #545454;
	}
input[type="radio"]:checked+label
	{
	font-weight: bold;
	}
	
input[type="text"]:disabled+label
	{color: #545454;
	}

input[type="checkbox"].tline, label.tline
	{
	float: right;
	}
label.tline
	{
	margin: 0em 0.5em;
	padding-bottom: 0em;
	border-style: solid none;
	border-color: #502916;
	border-width: 1px;
	background-color: #EDEAE5;
	}
input[type="checkbox"].tline
	{
	margin-top: 0.1em;
	}
div.tline
	{
	visibility: collapse;
	display: none;
	padding-bottom: 0em;
	}

input[type="checkbox"]:checked.tline ~ div.tline, label:hover.tline ~ div.tline
	{
	visibility: visible;
	display: block;	
	}

@media only screen and (max-width: 35em) 
{
	input[type="checkbox"].tline, label.tline
		{
		float: none;
		}
	label.tline
		{
		margin-left: 0.3em;
		}
	input[type="checkbox"]:checked.tline ~ div.tline
		{
		padding-top: 0.5em;
		}
}
tr.blank
	{
	background-color: #E6CDCA;
	font-variant: small-caps;
	}
td.blankmsg
	{
	}
*.indent1
	{padding-left: 1em;
	}
*.indent2
	{padding-left: 2em;
	}
*.error_colour_text
	{color: red;
	}
span.roomy
	{display: inline;
	}
span.squeezed
	{display: none;
	}
@media only screen and (max-width: 30em) 
{
	span.roomy
		{display: none;
		}
	span.squeezed
		{display: inline;
		}
	span.slash:after
		{
		content: " ";
		font-size: xx-small;
		}
}

*.awaiting
	{
	background-color: LightSalmon;
	}

p.worstblue
	{

	}

p.prog
	{
	font-size: 100%;
	float: left;
	padding: 0em;
	margin: 0% 0.5% 0% 0%;
	}
p.done
	{
	background-color: #d9d9d9;
	color: #d9d9d9;
	}
p.yet
	{
	background-color: #EEC5CF;
	color: #EEC5CF;
	}
*.here
	{
	background-color: #84F4ED;
	color: #84F4ED;
	}
div.prog
	{
	clear: both;
	float: none;
	padding: 0em;
	margin: 0.1em 0em 0.05em 0em;
	}
p.progtxt
	{
	font-variant: small-caps;
	padding: 0em;
	margin: 0em;
	}


.infobutton{
     display:inline-block;
     width:20px;
     height:20px;
     background: url(info.png) no-repeat;
	 background-size: 20px 20px;
     cursor:pointer;
     /* remove default text */
     line-height: 0;
     font-size: 0;
     border:0;
}

	
.meter { 
	height: 0.7em;  
	position: relative;
	background: #ffffff;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border: 2px solid;	
	border-radius: 1em;
	padding: 0.1em;
	margin: 0em;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}	

.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.status_bar {
	width : 50em;
	}
	
	
@media only screen and (max-width: 55em) {
	.status_bar {
		width : 100%;
		}
	}

@media only screen and (max-width: 45em) {
	.status_bar {
		width : 100%;
		}
	}	
	
p.qcom_ask
	{
	float: left;
	text-align: left;
	margin: 0em 0.7em 0em 0em;
	padding: 0em;
	}
div.qcom_ask
	{
	float: left;
	text-align: left;
	margin: 0em 0.7em 0em 0em;
	padding: 0em;
	}
div.qcom_set_yndp
	{
	width: 14em;
	}
div.qcom_set
	{
	margin: 0em 0em 0.6em 0em;
	padding: 0.2em 0.8em 0.2em 0.2em;
	border: solid 1px #d9d9d9;
	text-align: left;
	}
div.qcom_set:hover
	{
	border: solid 1px #a6a6a6;
	}

@media only screen and (max-width: 590px) 
{
	p.qcom_ask
		{
		float: none;
		clear: both;
		padding: 0.3em;
		}
	div.qcom_set_yndp
		{
		width: 95%;
		}	
}
div.title_set
	{
	margin: 0em 0em 0.6em 0em;
	padding: 0.2em 0.8em 0.2em 0.2em;
	border: solid 1px #d9d9d9;
	text-align: left;
	}



fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
.largeradio
    {
    width: 1.5em;
    height: 1.5em;
	vertical-align: middle; 
	margin: 0px;
    }
*/

.image-container {
	display: flex;
	justify-content: left;
	align-items: left;
	/*height: 50vh;*/ /* Set the container height to half of the viewport height */
}

.image-container img {
	max-height: 100%;
	height: auto;
	width: auto;
}


/* --------------------------------------------------- */

	input[type="text"].input_text  
		{
		margin:2px 0px 5px 2px;
		}

	label.input_text 
		{
		display:inline; padding-left:0px;
		}

		
/* --------------------------------------------------- */
		
p#qnum 
	{
        position: relative;
        font-size: 60%;   
		margin: 0em;
	}
	
*.qnum_bottomright
	{
		position: absolute;
		bottom: 1px;
		right: 1px;		
		text-align: right;
		vertical-align: bottom;
		line-height: normal;
	}
	
*.qnum_topright
	{
		position: absolute;
		top: 1px;
		right: 1px;
		font-size: 60%;
		text-align: right;
		vertical-align: top;
		line-height: normal;
	}
	
	
*.qnum_a
	{
		display: inline-block;
		text-align: right;
		vertical-align: top;
		line-height: normal;
		font-size: 66%;
		float: right;
		margin-left: 0em;	
	}

.popuparea {
	visibility: visible;
	display: block;
}	

.qn_popuparea {
	visibility: hidden;
	display: none;
}
		
/* --------------------------------------------------- */
	
.radio-cell {
  margin: 0.1em;
  padding: 0em 0.2em 0em 0.2em;
  display: inline;
}


.radio-cell input[type="radio"] {
	display:none; 
}

.radio-cell label {
	display:inline-block;		
	padding: 0.5em 0.7em;
	font-size:0.6em;
	border: 0.5em solid #fff;
	border-radius: 1.5em;    
}

.radio-cell label:hover {
  background-color: #bbb;
}

.radio-cell input[type="radio"]:checked + label { 
	background-color: #eff2f6;
	padding: 0.5em 0.7em;
    border: 0.5em solid;
}	

.title_cell
	{
	width: 3em;
	text-align: center;
	}
	
.cell_align_left
	{
	text-align: left;
	}

.cell_align_right
	{
	text-align: right;
	}
	
.nevtaste
	{
	width: 5em;
	padding: 0em 0em 0em 1em;
	}
	
.qnum_cell
	{
	width: 2em;
	align: right;		
	}
	
.display_vertical
	{ 
	visibility: hidden; 
	display: none;
	}

.hide_vertical
	{ 
	visibility: visible; 
	display: inline;
	}
	
	
	
@media only screen and (max-width: 700px) 
{
	.radio-cell 
		{
		display: block;
		}
		
	.radio-cell label {
		display:inline-block;
		padding: 0.5em 0.7em;
		font-size:0.6em;
		color: #e6dcd8;
		border: 0.5em solid #fff;
		border-radius: 1.5em;    
	}
	
	.radio-cell label:hover {
	  background-color: #bbb;
	  color: #bbb;
	}

	.radio-cell input[type="radio"]:checked + label {
		color: #eff2f6;
	}
	
	.radio-cell input[type="radio"]:checked + label:hover {
	  color: #eff2f6;
	}
	
	.radio-cell input[type="radio"]:not(:checked) + label:hover {
	  color: #bbb;
	}
	
	.nevtaste
		{
		width: auto;
		padding: 0em 0.2em 0em 0.2em;
		}
	.display_vertical
		{ 
		visibility: visible; 
		display: inline;
		}
		
	.hide_vertical
		{ 
		visibility: hidden; 
		display: none;
		}
		
	.vertical_options
		{
		height: 2em;
		margin: 0.15em 0em 0.15em 0.15em;
		padding: 0.15em 0em 0.15em 0.3em;
		border: 0.15em solid #fff;
		border-radius: 2em;
		text-align: middle; 
		}
		

}

/* accessibility */

p.focus 
	{
	background-color: #f7f7f7;
	}	


/* overwritting oqs.css */
/*
.oqs_nav_btn:hover
	{
	cursor: pointer;
	}
*/

/*
@media only screen and (max-width: 490px)
	{
	div.oqs_banner_top
		{
		min-height: 100px;
		}
	}
	
@media only screen and (max-width: 400px)
	{
	div.oqs_banner_top
		{
		min-height: 130px;
		}
	}	
*/	
	
div.oqs_popup_content
	{
	width: 360px;
	white-space: normal;
	word-wrap: break-word;
	}

@media only screen and (max-width: 440px)
	{
	div.oqs_popup_content
		{
		width: 300px;
		}
	}		

@media only screen and (max-width: 360px)
	{
	div.oqs_popup_content
		{
		width: 260px;
		}
	}	

/*
.oqs_nav_btn_pause
	{
	width: 340px;
	}
	
@media only screen and (max-width: 440px)
	{
	.oqs_nav_btn
		{
		font-size: 120%;
		}		
	.oqs_nav_btn_pause
		{
		-webkit-appearance: none;
		-moz-appearance: none;
		font-size: 100%;
		width: 280px;
		white-space: normal;
		word-wrap: break-word;
		}
	}

.oqs_nav_btn_aban
	{
	width: 350px;
	}
	
@media only screen and (max-width: 440px)
	{
	.oqs_nav_btn
		{
		font-size: 120%;
		}		
	.oqs_nav_btn_aban
		{
		-webkit-appearance: none;
		-moz-appearance: none;
		font-size: 100%;
		width: 280px;
		white-space: normal;
		word-wrap: break-word;
		}
	}		
*/
	
h2.oqs_ptitle span.oqs_ptitle
	{
	padding-bottom: 9px;
	}	
	
@media only screen and (max-width: 520px)
	{
	h2.oqs_ptitle
		{
		padding-left: 0.2em;
		font-size: 1.5em;
		}	
	}	

@media only screen and (max-width: 470px)
	{
	h2.oqs_ptitle
		{
		padding-left: 0.2em;
		font-size: 1.3em;
		}	
	}	

@media only screen and (max-width: 415px)
	{
	h2.oqs_ptitle
		{
		padding-left: 0.2em;
		font-size: 1.1em;
		}	
	}