/* ================================
Build: 10/06/25
Edit to enable auto-scrolling to hidden next button.
Removes position: absolute from #stageContent
Removes height: 100% from #stageContent
Changes stage1 
Removes display: flex; and flex-direction: column;
Adds overflow-y: auto; height: 100%;
===================================*/

/* ================================================
 * CONVENTIONS
 * All true css classes are in lower case.  
 * Class definitions with capital letters appear
 * in dynamically created HTML for
 * labeling and event manipulation purposes.
 * Classes commencing with the word trigger are
 * used only for dynamic actions not style definitions.
 * ===============================================*/

/* ================================================
 * COLOURS
 * Blues
 * Title bar #03335e
 * Title bar shades (dark to light)
 * #1b4a7f
 * #3163a2
 * #467dc7 - colour of bottom bar

 * Orange 
 * Forward and back: #d54200
 * Question blob: #f9ad8e 
 * Answer blob: #fedfd3
 * Complimentary orange: #eb7a4d

 * Legacy colours
 * Pale yellow #f6d49c
 * Buttn blue #228fe4 #237AA9
 * Grid background #8bcaf7
 * Warning / don't know borders #e71a05
 * ================================================*/

/* ================================================
 * GOOGLE MATERIAL ICONS
 * ================================================*/

@font-face {
  font-family: 'Material Symbols Sharp';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v156/gNMyW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV08dDFHsF-H5uf1kw.woff2) format('woff2');
}

.material-symbols-sharp {
  font-family: 'Material Symbols Sharp';
  font-weight: normal;
  font-style: normal;
  font-size: 40px; 
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
  
  .material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 40px; 
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}


/* ================================================
Setting box-sizing to border box ensures that width and height properties
(and min/max properties) includes content, padding and border.
 * ===============================================*/


html {
	box-sizing: border-box;
	font-size: 100%;	/*addresses old IE scalable font */
	height  : 100%;
    overflow: hidden;
    position: relative;
	min-height: -webkit-fill-available;
}
*, *:before, *:after {
  box-sizing: inherit;
}

* {
	margin: 0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
     /*pointer-events: none; */   
}

body {
	height: 100%;
	line-height:1;
	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
    text-size-adjust: 100%;
	overflow: hidden;
	font-family: 'Karla', sans-serif !important;
	min-height: 100vh; 
  	min-height: -webkit-fill-available;
    position: relative;
}

body * {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

a, .user_select {
	-webkit-user-select: text;
  	-moz-user-select: text;
  	-ms-user-select: text;
  	user-select: text;
}

.button, .buttn {
	background-color: #237AA9; /* #228fe4; */
	color:#FFFFFF;
	border-radius: 8px;
	border: 2px solid #eeeeee;
	padding: 8px;
	font-family: 'Karla', sans-serif;
	font-size: 16px;
	min-width: 120px;
	min-height: 36px;
	margin: 0px auto;
	text-align: center;
    display: inline-block;
}


.regular_device .buttn {
    padding: 10px;
    font-size: 18px;
    min-width: 130px;
}

.tall_device .buttn {
    padding: 12px;
    font-size: 20px;
    min-width: 140px;
}

/* addresses an IE problem */
img{
	margin: auto;
	display: block;
	max-width: 100%;
} 

.no-touchevents .button:hover {
	background-color: #1e80d3;
}

.button:active:hover {
	background-color: #4ea1eb;
}

a, .AreaControl, .Action, .autocomplete-suggestion, .Buttn, .Button, .Chrome, .Control, .Dont, .Enlarger, .Fly, .Hotspot, .Progress, .Rotator, .Tick, .Undo {
    pointer-events: all;
} 

a, .AreaControl, .Action, .autocomplete-suggestion, .Buttn, .Button, .Chrome, .Dont, .Enlarger, .Fly, .Hotspot, .Progress, .Rotator, .swi, .Tick, .Undo {
	cursor: pointer;
}

/* 	=================================================
     Problem solving css
	=================================================*/
/** clearfix hack to contain floats replaced by display: flow-root


/* 	=================================================
        Modifications to default html formatting
	=================================================*/
input, ._input, .autocomplete-suggestions, select, ._select, .select_text, textarea {
	font-family: 'Karla', sans-serif;
	font-size: 17px;
	border: 2px solid #89bfff;
	padding: 4px 8px;
	border-radius: 3px;
	background-color: #ffffff;
	cursor: text;
	margin-top: 8px;
	margin-bottom: 8px;
}

.s_device input, .s_device select, .s_device textarea {
	font-size: 17px;
}

.m_device input, .m_device select, .m_device textarea {
	font-size: 18px;
}

.l_device input, .l_device select, .l_device textarea {
	font-size: 20px;
}

.x_device input, .x_device select, .x_device textarea {
	font-size: 22px;
}

.short_device input, .short_device select, .short_device textarea {
	font-size: 17px;
}

.autocomplete-suggestions {
	color: #444444;
}

select, ._select .select_text{
	border-radius: 6px 0 0 6px;
}

input[type="file"] {
    visibility: hidden;
	width: 0;
	padding: 0;
	border: 0;
}

textarea {
	overflow: auto;
	border-width: 3px;
}

::placeholder {
	color: #bbb;
	opacity: 1; /* Firefox */
}
  
::-ms-input-placeholder { /* Edge 12 -18 */
	color: #bbb;
}

textarea:focus::placeholder {
	color: transparent;
}

iframe {
	margin: auto;
    pointer-events: all;
}

select, ._select {cursor: pointer;}

svg { pointer-events: none; }

ul {
	list-style: none; 
  }
  
ul li::before {
	content: "\2022";  
	color: #943634; 
	font-weight: bold; 
	display: inline-block; 
	margin-left: 16px;
	margin-right: 16px;
}

/*==============================================
	mode modifiers
  ============================================*/
.modelive {
	display: none;
}


/*==============================================
	h1 main headings centred 
  ============================================*/	
h1, .h_one {
	color: #03335e ; 
	text-align: center;
	font-size: 24px;
	margin: 0 6px 8px;
}

.m_device h1, .m_device .h_one{
	font-size: 28px;
	margin: 0 12px 12px;
}

.l_device h1, .l_device .h_one{
	font-size: 32px;
	margin : 0 20px 16px;
}

.x_device h1, .x_device .h_one {
	font-size: 36px;
	margin : 0 30px 18px;
}

.short_device h1, .short_device .h_one {
	font-size: 24px;
	margin: 0 6px 6px;
}

.swiper_frame .h_one{
	color: #04214a;
	font-weight: bold;
}



/*==============================================
		h2:  headings
  ============================================*/ 
h2, .h_two {
	color: #04214a;
	font-size: 18px;
	font-weight: bold;
}

.m_device h2,.m_device .h_two  {
	font-size: 20px;
}

.l_device h2,.l_device .h_two  {
	font-size: 22px;
}

.x_device h2, .x_device .h_two {
	font-size: 24px;
}

.short_device h2, .short_device .h_two {
	font-size: 18px;
}

/*==============================================
		h3 and li: Big text for intros etc
  ============================================*/
h3, .h_three {
	color: #04214a;
	text-align: left;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	padding: 6px 20px 0 20px;
}

.m_device h3,.m_device .h_three {
	font-size: 20px;
	line-height: 28px;
	padding: 6px 30px 0 24px;
}

.l_device h3,.l_device .h_three {
	font-size: 22px;
	line-height: 31px;
	padding: 6px 36px 0 24px;
}

.x_device h3,.x_device .h_three {
	font-size: 24px;
	line-height: 34px;
	padding: 6px 48px 0 36px;
}

.short_device h3,.short_device .h_three {
	font-size: 18px;
	line-height: 24px;
	padding-top: 4px;
}

/*==============================================
	h4 question_text
  ============================================*/
h4, .h_four, .question_text, p, ul li {
	font-weight: 500;
	text-align: left;
	color: #121212;
	font-size: 14px;
	line-height: 20px;
	padding: 6px 20px 0 20px;
}

.m_device h4, .m_device .h_four, .m_device p, .m_device ul li {
	font-size: 18px;
	line-height: 25px;
	padding: 6px 30px 0 24px;
}

.l_device h4, .l_device .h_four, .l_device p, .l_device ul li {
	font-size: 20px;
	line-height: 28px;
	padding: 6px 36px 0 30px;
}

.x_device h4, .x_device .h_four, .x_device p, .x_device ul li {
	font-size: 22px;
	line-height: 30px;
	padding: 6px 48px 0 36px;
}

.short_device h4, .short_device .h_four, .short_device p, .short_device ul li {
	font-size: 14px;
	line-height: 18px;
	padding-top: 4px;
}

.flexchild h4, flexchild p {
	margin: 0;
}

.swiper_frame P{
	margin-top: 16px;
}

.instruction, .advice_text {
	color: #125f95;
	font-size: 14px;
}

.m_device .instruction, .m_device .advice_text {
	font-size: 16px;
}

.l_device .instruction, .l_device .advice_text {
	font-size: 18px;
}

.x_device .instruction, .x_device .advice_text {
	font-size: 20px;
}

.short_device .instruction, .short_device .advice_text {
	font-size: 14px;
}

.advice_text {
    margin-top: 6px;
}

.comment_text {
    margin-top: 6px;
	color: #e71008;
}
/*==============================================
	h5 info text
  ============================================*/
h5, .h_five {
	font-weight: 500;
	text-align: left;
	color: #121212;	
}

.s_device h5, .s_device .h_five {
	font-size: 14px;
	line-height: 18px;
}

.m_device h5, .m_device .h_five {
	font-size: 16px;
	line-height: 20px;
}

.l_device h5, .l_device .h_five {
	font-size: 18px;
	line-height: 24px;
}

.x_device h5, .x_device .h_five {
	font-size: 18px;
	line-height: 24px;
}

.short_device h5, .short_device .h_five {
	font-size: 14px;
	line-height: 18px;
}

h6 {
	text-align: center; 
	margin: 12px auto 8px; 
	font-size: 0.8em;
}

/*========================
	box-e 
  ======================*/
.box-e {
	position: relative;
	display: block;
	width: 100%;
	max-width: 1400px;
	padding-bottom: 12px;
}

.regular_device .box-e{
	padding-bottom: 16px;
}

.tall_device .box-e{
	padding-bottom: 24px;
}

/*========================
	Question 
  ======================*/

.question-box-concept {
	border-radius: 5px;
	background-color: #00ffb845;
}

.unit {
	display: inline-block;
	vertical-align: middle;
}

/*========================
	Control Text
  ======================*/
.control_text, .control_image, .control_image_container {cursor: pointer;}

.control_text, .control_mappage, .control_image_container {
	border-radius: 6px;
    transition: border 0.2s;

}

.control_box_mappage {
	position: absolute;
	text-align: center;
	background-color: #d64011; /* #8b4600; /* rgb(255, 166, 0); #ed9426 #eca804 ; #fce73a;  #fcda3a #f8cb73*/
	color: white; /*#125072; */
	cursor: grabbing;
}
/*
.no-touchevents .control_box_mappage:hover {
	background-color: #ea6b1f;  
} 
*/
.control_image_container {
	 border: solid 4px #fafafa;
}

.control_image {
	border-radius: 4px;
}

.control_text {
	background-color: #bcddf5 ; /* #8bcaf7 #bedafc;  #ddeafa; #bcdfff  #cce3ff  */
	color: #121212;
	border: solid 4px #ffffff;
	padding: 4px;
	text-align: center;
	font-size: 16px;
}

.s_device .control_text {
	margin-bottom: 16px;
}

.m_device .control_text {
	font-size: 18px;
}

.l_device .control_text {
	font-size: 20px;
}
	
.x_device .control_text {
	font-size: 22px;
}

.short_device .control_text {
	font-size: 16px;
}

.control_mappage {
	position: absolute;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

/*========================
	box_oz 
  ======================*/
.box_oz {
	padding :  8px 36px;
	background-color: white;
}

.m_device .box_oz {
	padding : 12px 72px;
}

.l_device .box_oz {
	padding : 16px 108px;
}
	
.x_device .box_oz {
	padding : 24px 144px;
}

.short_device .box_oz {
	padding : 8px 36px;
}

/*========================
	az_box 
  ======================*/
.az_box, .cz_box {
	text-align: center;
	position: relative;
}

.az_ctr_pie{
	position: absolute;
	top: 0;
	left: 55%;
	width: 35%;
	height: 100%;
}

.az_ctr_pie:before {
	content: "";
	background: black;
	position: absolute;
	top: -4px;
	left: 0;
	width: 71.42%;
	height: 4px;
}

.az_ctr_pie:after {
	content: "";
	background: black;
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 71.42%;
	height: 4px;
}

.inline_block {
	overflow:visible;
	display: inline-block;
	vertical-align: top;
	margin-top: 6px;
}

/*========================
	asp_header + label
  ======================*/
.subj_label, .asp_header {
	color: #095590;
	font-size: 18px;
}

.asp_header {
	background-color:  #bedafc40;  /* #f2f4f9; #e7edfc;*/
	text-align: center;
	padding: 4px 4px;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 10px;
}

.subj_label  {
	text-align: right;
	padding: 8px;
}

.m_device .asp_header, .m_device .subj_label {
	font-size: 20px;
}

.l_device .asp_header, .l_device .subj_label {
	font-size: 22px;
}

.x_device .asp_header, .x_device .subj_label {
	font-size: 24px;
}

.short_device .asp_header, .short_device .subj_label {
	font-size: 17px;
}

/* Counteracts the default image auto margin */
.subj_label_image {
	margin: 0;
}

.subj_label_mappage, .subj_label_axe {
	width: 100%;
	font-size: 1.0em;
	font-weight: bold;
	color: #125080;
	text-align: center;
}

.subj_label_mappage{
	position: absolute;
}

.subj_label_axe {
	position: static;
	padding-top: 20px;
}

/*=======================
   control_mappage_text
  ======================*/
.control_mappage_text {
	font-size: 18px;
	padding: 2px;
}

.m_device .control_mappage_text {
	font-size: 20px;
	padding: 3px;
}

.l_device .control_mappage_text {
	font-size: 22px;
	padding: 5px;
}

.x_device .control_mappage_text {
	font-size: 24px;
	padding: 6px;
}

.short_device .control_mappage_text {
	font-size: 18px;
	padding: 2px;
}

.plot_text {
	font-size: 18px; 
	font-weight: bold;
    text-align: center;
}

.m_device .plot_text {
	font-size: 20px;
}

.l_device .plot_text {
	font-size: 22px;
}

.x_device .plot_text {
	font-size: 24px;
}

.short_device .plot_text {
	font-size: 18px;
}
/*=======================
	tag
  ======================*/ 
.tag {
	color: #1b3983;
	font-size: 12px;
	font-weight: bold;
	cursor: default;
	padding: 6px 3px;
}

.tag_left {
	text-align: left;
}

.tag_right  {
	text-align: right;
}

.tag_center  {
	text-align: center;
}

.tag_image {cursor: help;}

.m_device .tag {
	font-size: 14px;
}

.l_device .tag {
	font-size: 16px;
}

.x_device .tag {
	font-size: 16px;
}

.short_device .tag {
	font-size: 12px;
}

/* 	=================================================
               FRAME => STAGE => SURVEY
	=================================================*/
#frameHolder {
	width: 100%;
	max-width: 1400px;
	height: 100vh;
	margin: 0 auto;
	overflow: hidden;
	display: block;
}

#frameTop {
	top: 0;
}

#frameBottom {
	position: fixed;
	width: 100%;
	bottom: 0; 
	max-width: 1400px;
	padding-top: 5px;
}

.frame {
	position: absolute;
	width: 100%;
	max-width: 1400px;
	height: 40px;
	background-color: #03335e; /* #e3524e; */
}

#screenModal {
    position: absolute; 
    display: none;
    left: 0;
    top: 0;
    width: calc(100vw);
    height: calc(100vh);
    background-color: #777777; 
	z-index: 200;
}

#stageContent {
	width: 100%;
/*	height: 100%; 
	position: absolute;*/
	max-width: 1400px;
	pointer-events: all;
	overflow: hidden;
	overflow-y:auto;
}

.stage {
	visibility: visible;
	width: 100%;
	max-width: 1400px;
	top: 40px;
	height: calc(100% - 60px);
	overflow-y: auto;
	overflow-x: hidden;
	background-repeat:no-repeat;
    pointer-events: all;
	position: absolute;
	background-color: #FFFFFF;
}

#stage1 {
/*  display: flex;
	flex-direction: column;*/ 
	overflow-y: auto;
    height: 100%;
}

.conversation {
	display: flex;
    flex-flow: column;
    /* flex-direction: column-reverse; */
    width: 100%;
    height: 60vh;
    overflow-y: auto;
}

#transmogrifyButton {
	background-color: #ffffff;
	color: #000000; 
	position: absolute; 
	bottom: 30px;
	left: 20px
}

/* 	=================================================
               ELEMENTS + boxQ & boxA
	=================================================*/

	.element {
		opacity: 0;
		display: flex;
		flex-direction: column;
	}
	 
	.onstage.element {
		display: block;
		opacity: 1.0;
	}

	.offstage.element {
		display: none;
	}

	.question {
		width: 100%;
		background-color: #f1f4fa; /* e2e6ed */
		padding: 18px 12px 12px;
	}

	.question.user {
		background-color: #00ddee;
	}

	.answer {
		padding: 18px 12px 0 12px;
	}

	.ayi .answer {
		position: fixed;
		bottom: 30px;
	}

	.question, .answer {
		display: flex;
		justify-content: center;
	}


	.short_device .question, .short_device .answer {
		padding-top: 12px;
	}

	.tall_device .question, .tall_device .answer {
		padding-top: 24px;
	}	
	
	.m_device .question, .m_device .answer {
		padding-left: 16px;
		padding-right: 16px;
	}
	
	.l_device .question, .l_device .answer {
		padding-left: 18px;
		padding-right: 18px;
	}

	.x_device .question, .x_device .answer {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.question-avatar, .answer-avatar {
		min-width: 32px;
		max-width: 32px;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-weight: 500;
		color: white;
	}
	
	.question-avatar {
		background-color: #467dc7;
		font-size: 16px;
	}
	
	.answer-avatar {
		background-color:  #03335e;
		font-size: 16px;
	}

	/* styles wrapQ + wrapA - the boxes holding the avatar and the content */ 
	.content-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		max-width: 1360px;
		width: 100%;
		margin: 0 auto;
	}
	
	.content-with-avatar {
		padding-left: 18px;
	}
 
/*  ===========================================================
         NAVIGATION 
	==========================================================*/

#topNav {
	position: absolute;
    left: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    max-width: calc(100% - 40px);
    height: 40px;
}


.navsolo {
	position: absolute;
}

.hotspot {
	cursor:pointer;
	position:absolute;
	background-repeat:no-repeat;
	background-position: 0 0;
	overflow: hidden;
	visibility: visible;
}

.nav {
	padding: 0 12px 0 0;
}

.nav-round {
	width : 36px;
	opacity: 0.8;
	margin-bottom: 16px;
}

.ayi .nav-round {
	position : absolute;
	right: 40px;
	top: 40px;
}

.regular_device .nav-round {
	width : 40px;
}

.nav-round:hover {
	opacity: 1.0;
}

/* contains client mode screen navigation buttons */
#navWrapper {
	width: 80px;
	height: 40px;
	position: absolute;
	top : 0px;
	right: 20px;
}

#prevNav, #nextNav {
	position: absolute;
  	top: 1px;
}

#prevNav {
	left: 0;
}

#nextNav {
	right: 0;
}

.LiveMode #navWrapper {
	display: none;
}

.LiveMode .nav-arrows-wrapper {
	left: 50%;
	transform: translate(-50%, 0);
}

.no-touchevents .shadow {
    filter:
      drop-shadow(
        1px 2px 3px hsl(220deg 60% 50% / 0.3)
      )
      drop-shadow(
        2px 4px 6px hsl(220deg 60% 50% / 0.3)
      )
      drop-shadow(
        4px 8px 12px hsl(220deg 60% 50% / 0.3)
      );
  }

/* 	=================================================
               FRAME INFO
	=================================================*/
.infopage, .infoquestion {
	width: 34px;
	height: 34px;
	line-height: 34px;
	border-radius: 50%;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	z-index: 2;
}	
	
.infopage {
	margin: 3px 4px 0 20px;
	color: #943634;
	background-color: #fff;
	font-weight: bold;
}

.infoquestion {
	margin: 3px 4px;
	color: #f6d49c;
	background-color: #943634;
}

.no-touchevents .infoquestion:hover {
	background-color: #f6d49c;
	color: #943634;
}

/* 	=================================================
               FRAME HEADER AND FOOTER
	=================================================*/
#header, #footer {
	left: 0;
	width: 100%;
}

#header {
	top: 0;
	height: 40px;
}

#footer {
	bottom: 0;
	display: none;
}
/* 	=================================================
               PROGRESS BAR
	=================================================*/
#progressOuter {
	height: 20px;
	position: relative;
	width: 100%;
	display:flex;
	background-color: #467dc7;
}

#progressBar {
	height: 20px;
	width: 0;
	background-color: #03335e;
	display: flex;
	justify-content: flex-end;
	align-items: center; 
}

#progressPageInfo {
	position: absolute;
	border: solid 2px #03335e;
	margin: 0;
	line-height: 30px;
	z-index: 10;
}

#progressPageNumber {
	padding-right: 4px;
	font-size: 12px;
	color: white; 
}

/* 	=================================================
               PAGE FINDER / SELECTOR
	=================================================*/

 #areaInput {
	margin-bottom: 3px;
	cursor: auto;
	color: #943634;
	width: 38px;
	border: 2px solid #cccccc;
	margin-left: 3px;
	margin-top: 2px;
	height: 22px;
	text-align: right;
	font-size: 0.85em;
	padding: 2px;
}

.pageMenu {
	margin-bottom: 3px;
	cursor: pointer;
}

.pageunit {
	height: 16px;
	width: 44px;
	border-top: 2px solid #f6d49c;
	border-left: 2px solid #f6d49c;
	border-right: 2px solid #f6d49c;
	cursor: pointer;
	text-align: right;
	background-color: #e3524e;
}

.no-touchevents .pageunit:hover {
	background-color: #943634;
    transition: background-color 0.3s;
}

.pageunithilited {
	background-color: #943634;
}

.fontpageunit {
	font-size: 12px;
	color: white;
	margin: 0 12px 0 0;
}

/* ===========================================================
          Buttn  Switch status modifiers
	==========================================================*/

.turnedon {			/* 3 */
	filter: brightness(150%);
}

body.pc .active {			/* 2 */
	cursor: pointer;
}

.quiet {			/* 1 */
	cursor: auto;
}

.disabled {			/* 0 */
	opacity: 0.1;
}

.hidden {			/* -1 */
	visibility: hidden;
}

.removed {			/* -2 */
	display: none;
}

.concept {
	width: 90%;
	margin: 0 auto;
	border: 2px solid #eeeeee;
	border-radius: 8px;
	background-color:#eeeeee;
	padding: 8px 18px;
	font-size: 0.9em;
}

/* ===========================================================
         CLIP IMAGES - PARTS OF IMAGES SELECTED 
   ==========================================================*/
.clip_container {
    display: grid;
	justify-content: space-evenly;
    
}

.clip_item {
    background-repeat: no-repeat;
    border: solid 3px black;
	border-radius: 30%;
}

/* ===========================================================
         FLEXBOX
   ==========================================================*/
.flex_container {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.flex_container_column {
	display: flex;
	flex-direction: column;
}

.flex_centre {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex_container_see {
	margin: 10px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Flex container modifier */

.flexchild {
	flex: 0 1 auto;
}
 
.flexchild_ques {
	padding-right: 24px;
}

.flexchild_grid {
	flex: none;
}

.flexchild_pie {
    flex: 1 1 auto;
}

.flexchild_arrow {
    flex: 0 0 auto;
}

.flexchild_tag_pie {
    width: 45%;
}

.flexchild_tag_inner_pie {
    text-align: right;
    padding-right: 10px; 
}

.flexchild_value_pie {
	text-align: right;
	padding-right: 8px; 
	width: 10%;
}	

.flexchild_block_pie {
	align-self: stretch;
	width: 25%;
}

.flexchild_handle_pie {
	width: 20%;
}


/* ==============================================
		VERTICAL ALIGNMENT / SPACING
=================================================
* Height must be declared
* Ideally overflow: auto should be set
* responsive with %
* For reference go to http://codepen.io/shshaw/pen/gEiDt
* -------------------------------------------*/

.absolute_centre {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}


/* -------------------------------------------
* for centering labels inside boxes vertically
* see http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
----------------------------------------------*/
.vertical_centre {
	position: relative;
	top: 50%;
	transform: perspective(1px) translateY(-50%);
}

/* ==============================================
 * spacer hack prevents outer divs containing
 * floated elements from collapsing.
 * Add div with class spacer to the end.
 * ==============================================*/
.spacer{
	clear: both;
}

.colclear{
	clear: both;
	height: 2px;
	line-height: 2px;
	width: 100%
}

/* ===========================================================
         SPACE-L  SPACE-M  SPACE-S  SPACE-B
   ==========================================================*/
.space-l {
	margin-top: 12px;
	margin-bottom: 12px;
}

.regular_device .space-l {
	margin-top: 16px;
	margin-bottom: 16px;
}

.tall_device .space-l {
	margin-top: 24px;
	margin-bottom: 24px;
}

.space-m {
	margin-top: 6px;
}

.regular_device .space-m {
	margin-top: 8px;
}

.tall_device .space-m {
	margin-top: 12px;
}

.space-s {
	margin-top: 3px;
}

.regular_device .space-s {
	margin-top: 4px;
}

.tall_device .space-s {
	margin-top: 6px;
}

.space-b {
	margin-bottom: 16px;
}

.regular_device .space-b {
	margin-bottom: 20px;
}

.tall_device .space-b {
	margin-bottom: 24px;
}

/* 	=================================================
               CONSOLE
	=================================================*/
	#consoleBox {
		position: absolute;
		bottom: 0;
		left: 0;
		min-width: 300px;
		width: 100%;
		background-color: white;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 20;
	}
	
	#consoleMenuBar {
		width: 100%;
		height: 20px;
		padding-left: 40px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		background-color: #308589;
		z-index: 8;
		position: fixed;
	}
	
	#consoleResizeHandle {
		position: absolute;
		height: 12px;
		width: 100%;
		top: -6px;
		left: 0;
		z-index: 10;
		cursor: n-resize;
	}
	
	#consoleContent {
		padding: 3px 24px;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		user-select: text;
		background-color: #FFFFFF;
		position: relative;
		top: 20px;
		text-align: left;
	}
	
	#consoleContent .title {
		margin: 18px 0 6px;
	}
	 #consoleContent h1 {
		 font-size: 1.4em;
		 font-weight: bold;  
	}
	
	 #consoleContent h2 {
		 font-size: 1.1em;
		 font-weight: bold;
		 text-align: left;
		 margin: 12px 0 6px;
	}
	
	 #consoleContent h3 {
		font-size: 1.0em;
		color: #222211;
	}
	
	 #consoleContent h4 {
		font-size: 0.9em;
		color: #222211;
	}
	
	#consoleContent h5 {
		font-size: 0.9em;
		color: #4444bb;
		font-weight: 500;
	}
	
	#consoleContent h5 {
		padding-left: 16px;
	}
	#consoleContent h6 {
		padding-left: 24px;
	}
	
	.consolebutton {
		color: #fff;
		font-size: 0.75em;
		text-align: center;
		width: 100px;
		height: 20px;
		position: relative;
		flex: 0 1 auto;
		padding-top: 2px;
	}
	
	.no-touchevents .consolebutton:hover{
		background-color: #0B5D61;
		cursor: pointer;
	}
	
/* 	=================================================
              AXE
	=================================================*/
.axe_bg {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#75f1dc+50,13a59b+100&0+0,1+100 */

	border: solid 1px grey;
	background: -moz-linear-gradient(45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 30%, rgba(249,230,25,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 30%,rgba(249,230,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 30%,rgba(249,230,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f9d945',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* 	=================================================
              AYI
	=================================================*/
.ai-input-wrapper {
	position: absolute;
    bottom: 50px;
    max-width: 600px;
    width: 90%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.ai-input {
	width: 100%;
    height: 100%;
    padding: 15px 70px 15px 15px;
    outline: 0;
}

textarea .ai-input {
	color: #ffffff;
}


/* 	=================================================
             AXE ARROWS
	=================================================*/
	.arrowline_vertical {
		border-left: 4px solid #a0fac1;
		position: absolute;
		left: 44px;
		width: 0;
		height: 400px;
	}
	
	.arrowline_vertical:before {
		content: "";
		height: 0;
		width: 0;
		position: absolute;
		display: block;
		left: -14px;
		top: -13px;
		border: 12px solid white;
		border-color: transparent;
		border-bottom-color: #a0fac1;
	}
	
	.arrowline_vertical:after {
		content: "";
		height: 0;
		width: 0;
		left: -14px;
		top: 100%;
		position: relative;
		display: block;
		border: 12px solid white;
		border-color: transparent;
		border-top-color: #a0fac1;
	}
	
	.arrowline_horizontal {
		border-top: 4px solid #a0fac1;
		position: absolute;
		left: 0px;
		width: 600px;
		height: 0;
	}
	
	.arrowline_horizontal:before {
		content: "";
		height: 0;
		width: 0;
		position: absolute;
		display: block;
		left: -13px;
		top: -14px;
		border: 12px solid white;
		border-color: transparent;
		border-right-color: #a0fac1;
	}
	
	.arrowline_horizontal:after {
		content: "";
		height: 0;
		width: 0;
		top: -14px;
		left: 100%;
		position: relative;
		display: block;
		border: 12px solid white;
		border-color: transparent;
		border-left-color: #a0fac1;
	}
	
	.arrowhead_right {
		width: 0; 
		height: 0; 
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-right: 20px solid transparent;
		border-left: 20px solid #693f81;
	}

/* 	=================================================
              BEANS
	=================================================*/
	#beantester {height: 475px; width: 730px; background-image:url("../../../graphics/magicbeans/beanbg.jpg"); background-repeat:repeat-x}
	#beansign {position: absolute; left: 115px; bottom: -260px; height: 260px; width: 500px; background-image:url("../../../graphics/magicbeans/beansign.png"); background-repeat:no-repeat; z-index: 2000}
	#beanguide {position: absolute; left: 24px; top: 15px; height: 150px; width: 450px; background-image:url("../../../graphics/magicbeans/beanguide1.png"); background-repeat:no-repeat; z-index: 2000}
	#earth {position: absolute; left: 0; bottom: -3px; height: 25px; width: 800px; background-image:url("../../../graphics/magicbeans/earth.png"); background-repeat: no-repeat; z-index: 1000}
	#beanscale {position: absolute; bottom: 0; right: 4px; height: 24px; width: 17px; background-image:url("../../../graphics/magicbeans/beanpile.png"); background-repeat:no-repeat; z-index: 100}
	#beancloud {position: absolute; top: 36px; left: 146px; height: 118px; width: 438px; background-image:url("../../../graphics/magicbeans/brandcloud.png"); background-repeat:no-repeat}
	#beanbrand {
		position: absolute;
		top: 42px;
		left: 60px;
		width: 318px;
		font-weight: 700;
		text-align: center;
		font-size: 1.8em;
		color: #333399;
	}
	
	.bean {position: absolute; bottom: -102px; height: 119px; width: 180px; background-image:url("../../../graphics/magicbeans/paper.gif"); background-repeat:no-repeat; z-index: 100; cursor:pointer}
	
	#beanmap {position: absolute; left: 300px; top: 80px; height: 360px; width: 420px; background-image:url("../../../graphics/magicbeans/mapmaster.png"); background-repeat:no-repeat; z-index: 200}
	#beantitle {position: absolute; left: 0px; top: 30px; height: 40px; width: 760px;}
	#beanstory {position: absolute; left: 10px; top: 80px; height: 360px; width: 280px; overflow:auto; overflow-x: hidden; z-index: 200}
	
	/* 	=================================================
				BINGO
		=================================================*/	
	.bingo_text{
		text-align: center;
		color: #333333;
	}
	
	.bingo_text:hover {
		color: black;
	}
	.x_device .bingo_text{font-size: 24px;}	
	.l_device .bingo_text{font-size: 20px;}
	.m_device .bingo_text{font-size: 18px;}	
	.s_device .bingo_text{font-size: 14px;}
	
	.plot_ex_bingo, .drag_bingo {
		border: solid 5px #dddddd;
	}
	
	.drag_bingo {
		background-color:#9a9797; 
	}
	
	.droppable_hover_bin {
		border: solid 5px #ec8916;
	}
	
	.plot_box_row {
		border-bottom: solid 2px white;
	}
	
	.plot_box_col {
		border-left: solid 2px white;
		float: left;
	}
	
	.plot_tag {
		position: absolute;
		color:#00000f;
		font-weight: bold;
	}
	
	.plot_tag_mappage{
		font-weight: bold;
		line-height: 30px;
	}
	
	.plot_tag_tm {
		width: 100%;
		top: 12px;
		text-align: center;
	}
	
	.plot_tag_tr {
		width: 100%;
		text-align: right;
	}
	
	.plot_tag_l {
		text-align: left;
	}
	
	.plot_tag_ml {
		top: 50%;
		left: 0;
		width: 45%;
		text-align: left;
		padding-left: 16px;
		margin: -15px 0 0 0;
	}
	
	.plot_tag_mm {
		top: 50%;
		left: 50%;
		width: 50%;
		text-align:center;
		margin: -15px 0 0 -25%;
	}
	
	.plot_tag_mr {
		top: 50%;
		right: 0;
		width: 45%;
		text-align: right;
		padding-right: 16px;
	   margin: -15px 0 0 0;
	}
	
	.plot_tag_tos_ml {
		left: 0;
		padding-left: 9px;
		text-align: left;
		margin: 0;
	}
		
	.plot_tag_bm {
		bottom: 12px;
		width: 100%;
		text-align:center;
	}
	
	.plot_tag_rotate_left{
		transform-origin: center;
		transform: rotate(-90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	
	}
	
	.plot_tag_rotate_right{
		transform-origin: center;
		transform: rotate(90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	
	}
	
	.plot_tag_light{
		color:#FFFFFF;
	}
	
	.plot_tag.name {
		left: 20%;
		width: 60%;
		color: #664500;
	}
	
	.plot_tag .inner {
		background-color:#FFFFFF;
		filter: alpha(opacity=70);
		opacity: 0.7;
		padding: 3px;
	}
		
	.map_styler {
		position: relative;
		background-color:#fafafa;
		border: 2px solid #bbbbbb;
	}
	
/* 	=================================================
               BUBBLE
	=================================================*/	
.bubble_plot {
	overflow: hidden;
	border: solid 2px #03335e; 
	position: relative;
	background-image: linear-gradient(#9dd0f8, white)
}	

.bubble_float_up { 
	transition: top 6s cubic-bezier(0, 0.47, .77, .51);  
}

.bubble_disappear {
	transform: scale(0.0);
	transition: transform 0.5s cubic-bezier(0.4, 0.0, 1, 1) 0.2s;
}

.control_text_bubble {
	border: solid 6px #ffffff;
	background-color: #ed5263;
	cursor: pointer;
	border-radius: 48%;
	font-size: 1.1em;
	position: absolute;
}

.control_bubble_text {
	font-size: 14px;
	padding: 2px;
}

.m_device .control_bubble_text {
	font-size: 15px;
	padding: 3px;
}

.l_device .control_bubble_text {
	font-size: 16px;
	padding: 4px;
}

.x_device .control_bubble_text {
	font-size: 18px;
	padding: 4px;
}

/* 	=================================================
        BULLSEYE
	=================================================*/

.bull_ring {
	position: absolute;
	border-radius: 50%;
}

.bull_ring_centre {
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
}

/* 	=================================================
         CONSOLE 'ADMIN' TEXT
	=================================================*/
	p.admin {margin: 2px 0}

	.admintext {
		color: #333333;
		margin-top: 5px;
		min-width: 120px;
		margin-bottom: 5px;
		float: left;
		font-size: 0.8em;
		text-align: left;
		font-weight: 500;
		padding-left: 8px;
	}
	
	.admintext.title {
		margin-top: 12px;
		width: 100%;
		text-align: center;
		font-size: 1.1em;
		color: #f51e59;
	}
	
	.admintext.data {
		margin-top: 12px;
		width: 100%;
		text-align: right;
		padding-right: 8px;
	}
	
	.admintext.heading, .admintext.paragraph {
		width: 94%;
		padding-left: 3%;
		text-align: left;
	}
	.admintext.heading {color: #f51e59}
	.admintext.paragraph {color: #333333}
	.admintext.colheader {color: #f51e59}

/* 	=================================================
               CONTEXT
	=================================================*/
.context {
	margin: 12px auto;
	text-align: center;
}

/* 	=================================================
               DON'T KNOW  ENLARGER  SHRINKER
	=================================================*/

	.dont_img, .enlarger, .shrinker {
		background-size: 28px 28px;
		background-repeat: no-repeat;
		display: inline-block;
	}
	
	.svgasimg .dont_img {
		/*background-image: url("../../../graphics/frame14/dont2.svg");*/
		background-image: url("../../../graphics/frame14/dontcross.svg");
		background-position: center center;
	}
	
	.no-svgasimg .dont_img {
		background-image: url("../../../graphics/frame14/dont1.gif");
	}
	
	.dont_img, .enlarger, .shrinker {
		cursor: pointer;
	}
	
	.enlarger, .shrinker {
		position: absolute;
		top: 0;
		right: 0;
		background-size: 30px 30px;
		background-color: #ffffff;
		background-repeat: no-repeat;
		height: 40px;
		width: 40px;
		background-position: center center;
	}
	
	.enlarger_small {
		position: absolute;
		top: -18px;
		right: -18px;
		background-size: 20px 20px;
		background-repeat: no-repeat;
		height: 36px;
		width: 36px;
	}
	
	.shrinker {
		top: 0;
		right: 0;
		background-size: 30px 30px;
	}
	
	.svgasimg .enlarger, .svgasimg .enlarger_small {
		background-image: url("../../../graphics/gdesign/plus.svg");
	}
	
	.no-svgasimg .enlarger {
		background-image: url("../../../graphics/frame14/enlarge.png");
	}
	
	.shrinker{
		background-image: url("../../../graphics/gdesign/cross1.svg");
	}
	
	.dont_off, .enlarger, .shrinker {
		filter: alpha(opacity=70);
		opacity: 0.7;
	}
	
	.no-touchevents .enlarger:hover, .no-touchevents .shrinker:hover{
		filter: alpha(opacity=100);
		opacity: 1.0;
	}
	
	.no-touchevents .dont_off:hover{
		filter: alpha(opacity=100);
		opacity: 1.0;
	}
	
	.dont_on {opacity: 1.0;}
	
	.dont_hilite{background-color: #eb5978;}

/* 	=================================================
               DRAGGABLES SORTERS BULLSEYE
	=================================================*/
.drag_subj {
	position: absolute;
	border-radius: 7px;
}

.box_resp {
	background-color: #eafaf1;
}

/* colours for spectrum of dragger backgrounds */
.colour_0 { background-color: #B2D4EF }
.colour_1 { background-color: #80B3DA }
.colour_2 { background-color: #508CBB }
.colour_3 { background-color: #2E74AA }
.colour_4 { background-color: #0B61A4 }
.colour_5 { background-color: #084B7F }
.colour_6 { background-color: #053A64 }
/*
.ui-draggable, .ui-droppable {
    touch-action: none;
	-ms-touch-action: none;
}
*/
#temp_wipe {position:absolute;}


p.right{float:right;}
p.left{float:left;}
p.help {padding: 0 30px;}

p.dragger {
	color:#FFFFFF;
	text-align: center;
	font-size: 1em;
}

a, .hot {
	text-decoration: none;
	cursor:pointer;
}

a {
	color:#228fe4;
}

.hot {
	color:#ee3333;
}

#box_message {
	width : 88%;
	margin-left: 6%;
	padding : 10px;
}

/* 	=================================================
              FAVOURITE
	=================================================*/

    .plot_label_box {
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
    }
    
    .label_text_rotated {
        position: absolute;
        top: 50%;
        height: 2px;  /* actual text will overlap! */
        margin-top: -1px;  /* subtract half the height */
        line-height: 0px;  /* centre the text on the base line */
        white-space: nowrap;
    }

/* 	=================================================
               FEEDBACK / ENLARGER
	=================================================*/
.feedback_image_outer {
	position: relative;
	margin: 0 auto;
	background-color: #fafafa;
	text-align: center;
}

.feedback_text {
	background-color: #fafafa;
	color: #2381B5;
	font-weight: 1000;
	font-size: 18px;
	text-align:center;
	border-radius: 9px;
}

.feedback_float {
	background-color: #943634;
	color: #ffffff;
	font-weight: 1000;
	font-size: 18px;
	text-align: center;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	line-height: 32px;
    top: 8px;
	position: absolute;
}

.map_feedback_text {
	color: #2381B5;
	font-size: 1.2em;
	font-weight: 1000;
	text-align:center;
	height: 36px;
}

.mappage_feedback {
	color: #ffffff;
	background-color: #41d65a;
	text-align:center;
	font-size: .8em;
	border-radius: 9px;
	padding: 4px 6px;
}

.feedback_number {
	color: #ffffff;
	background-color: #943634;
	text-align: center;
	border-radius: 50%;
}

.feedback_flashtext {
	color: #ffffff;
	background-color: #943634;
	text-align: center;
	border-radius: 10px;
    padding: 6px;
}

/* 	=================================================
              GRID
	=================================================*/
.grid_disabled{
	background-color: #f3f6f9;
	color:#dddddd;
}

.borderon {
	background-color: #f0f5f9; /* #bcdfff; #bcdfff */
	border-color: #5d6a89;
	transition: .2s;
}

.borderoff {
	border-color: #f2f5fc;
	transition: 0.2s;
}

.no-touchevents .borderoff:hover{
	border-color: #c7cfd3;
	background-color: #d4e7f7; /* #a2d4fb; */
}

.od_image {
	width: 44px;
}

.svgasimg .od_image {
	filter: alpha(opacity=80);
	opacity: 0.8;
}

/* 	=================================================
              LOVE
	=================================================*/

.love_plot_ex {
	border-radius: 50%;
	background-color: white;
	border: solid 3px transparent /* green #3aeb3a; red #ed5263 */
}

.love_plot_in {
	border-radius: 50%;
	background-color: white /* green  #3aeb3a; red #ed5263 */
}

.love_button {
	background-color: #228fe4;
	color:#FFFFFF;
	border-radius: 8px;
	cursor: pointer;
	padding:6px;
	text-align: center;
}

.no-touchevents .love_button:hover{
	background-color: #1875bd;
}

.love_heart_ex {
	background-image: url('../graphics/gdesign/heart-outline2.png');
	background-size: contain;
	background-repeat: no-repeat;
}

.love_heart_in {
	background-image: url('../graphics/gdesign/heart-solid1.png');
	background-size: contain;
	background-repeat: no-repeat;
}

/* 	=================================================
            MESSAGE
	=================================================*/
	#screenMsg {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100px;
		background-color: #3d6a92;
		z-index: 50000;
		display: none;
		color: #fff;
	}
	
	.close{
		float: right;
		margin-top:8px;
		margin-right: 8px;
		cursor:pointer;
		color: #ddd;
		border: 2px solid #228fe4;
		border-radius: 30px;
		background: #03335e;
		font-size: 31px;
		font-weight: bold;
		line-height: 0px;
		padding: 11px 3px;       
	}
	
	.close:before {
		content: "×";
	}
	
	.no-touchevents .close:hover {
		color: #fff;
	}

/* 	=================================================
              PICTURE
	=================================================*/
.pic_ctr_blob {
	background-color: #fd374d;
	border-radius: 50%;
	filter: alpha(opacity=85);
	opacity: 0.85;
	position: absolute;
}

.pic_star {
	aspect-ratio: 1;
	z-index: 100;
	cursor: not-allowed; 
	clip-path: polygon(100.00% 50.00%,78.98% 57.76%,93.30% 75.00%,71.21% 71.21%,75.00% 93.30%,57.76% 78.98%,50.00% 100.00%,42.24% 78.98%,25.00% 93.30%,28.79% 71.21%,6.70% 75.00%,21.02% 57.76%,0.00% 50.00%,21.02% 42.24%,6.70% 25.00%,28.79% 28.79%,25.00% 6.70%,42.24% 21.02%,50.00% 0.00%,57.76% 21.02%,75.00% 6.70%,71.21% 28.79%,93.30% 25.00%,78.98% 42.24%);
	}

.pic_zone {
	border: solid black 4px;
	position: absolute;
}

.pic_plot {
	cursor : move;
	position : relative;
}

.pic_ctr {
	cursor : crosshair;
}

/* colours for delineating picture zones */
.colour-pic_0 { background-color: #FF0000 } /* red */ 
.colour-pic_1 { background-color: #0000FF } /* blue */
.colour-pic_2 { background-color: #00FFFF } /* aqua */ 
.colour-pic_3 { background-color: #FF8000 } /* orange */
.colour-pic_4 { background-color: #00FF00 } /* lime */
.colour-pic_5 { background-color: #FFFF00 } /* yellow */
.colour-pic_6 { background-color: #FF00FF } /* fushia */
.colour-pic_7 { background-color: #808080 } /* gray */
.colour-pic_8 { background-color: #800000 }   /* maroon' */
.colour-pic_9 { background-color: #000080 } /* navy */
.colour-pic_10 { background-color: #008080 } /* ? */
.colour-pic_11 { background-color: #8000FF } /* purple */
.colour-pic_12 { background-color: #608800 } /* autumn green */
.colour-pic_13 { background-color: #BB4400 } /* burnt orange */
.colour-pic_14 { background-color: #00BB44 } /* */
.colour-pic_15 { background-color: #4400BB } /*  */
.colour-pic_16 { background-color: #BB0044 } /*  */
.colour-pic_17 { background-color: #44BB00 } /*  */
.colour-pic_18 { background-color: #2288CC } /*  */
.colour-pic_19 { background-color: #CC2288 } /*  */
.colour-pic_20 { background-color: #88CC22 } /*  */
.colour-pic_21 { background-color: #cccccc } /*  */
.colour-pic_22 { background-color: #123456 } /*  */
.colour-pic_23 { background-color: #654321 } /*  */
.colour-pic_24 { background-color: #fedbca } /*  */

/* 	=================================================
        PIE
	=================================================*/
	.helper {
		z-index: 100000;
		border: 2px solid #e71a05;
		padding: 2px;
		position: relative;
		-webkit-box-shadow: 4px 4px 3px 0px rgba(50, 50, 50 , 0.35);
		box-shadow: 4px 4px 3px 0px rgba(50, 50, 50 , 0.35);
		cursor: pointer;
		font-size: 0.8em;
		background-color:#FFFFFF;
		border-radius: 5px;
	}
	
	#helper {
		position: absolute;
	}
	
	#helper.on {
		display: block;
		opacity: 0;
	}
	
	#helper.off {
		display: none;
	}
	
	.helper_draglineupdown {
		position: absolute;
		top: -14px;
		right: 0px;
		width: 20px;
		height: 36px;
		background-image: url('../graphics/gdesign/resize-ns.svg');
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: center;
	}

.line_vertical {
	border-left: 1px solid #f1da0b;
	position: absolute;
}

.line_horizontal {
	border-top: 1px solid #f1da0b;
	position: absolute;
}

.line_pie:before {
    content: "";
    bottom: -20px;
    top: -20px;
    position: absolute;
    cursor: row-resize;
	/* background-color: rgb(0, 255,255,0.5);	/* xx */
    left: 60px;
    right: 0;
}
  
.line_pie {
    position: absolute;
    left: 0;
    height: 8px;
    width: 100%;
    background-color: black;
    cursor: row-resize
}

.line_lock {
    position: absolute;
    top: -11px;
    left: 10px;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.line_lock:before {
    content: "";
    bottom: -20px;
    top: -20px;
	/* background-color: rgb(0, 255,255,0.5); /* xx */
    position: absolute;
    cursor: pointer;
    left: -20px;
    right: -20px;
	z-index: 50;
}

.line_lock_off {
    display: none;
	cursor: row-resize;
}

.line_lock_available {
    display: block;
   	background-image: url('../graphics/gdesign/lock_available.svg'); 
	cursor: pointer;
}

.line_lock_on {
    display: block;
    background-image: url('../graphics/gdesign/lock_on.svg'); 
	cursor: pointer;
}

/* 	============================================
	POPUP 
	============================================*/
	#popUp {
		position: absolute;
		top: 40px;
		left: 0;
		height: calc(100vh - 60px);
		width: calc(100vw);
		z-index: 300;
		display: none;
	}
	
	#boxPop {
		z-index: 4000;
		max-width: 400px;
		margin: 10px auto 0 auto;
		box-shadow: 4px 4px 3px 0px rgba(0,0,0,0.5);
	}
	
	.boxPop_advice, .boxPop_text {
		border-radius: 12px;
		padding: 16px;
		text-align: center;
		background-color: #03335e;
	}
	
	.boxPop_img {
		border-radius: 12px 12px 0 0;
		background-color: #ffffff;
	}
	
	.boxPop_video {
		background-color: #ffffff;
	}
	
	#popInner {
		color: white;
	}
	
	#popBackground {
		background-color: white;
	}
	
	#pop_con {
		position: absolute;
		left: 0px;
		bottom: 0px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
		width: 100%;
		background-color: #f6d49c;
		height: 36px;
	}
	
	.pop_img {
		border-radius: 6px 6px 0px 0px;
	}
	.pop_nav {
		padding: 0 10px 0 0;
		flex: 0 1 auto;
		cursor: pointer;
	}
	
	.s_device .pop_nav {
		padding: 0 16px 0 0;
	}
	
	.pop_exit {
		position: absolute;
		top: 0;
		right: 0%;
		padding: 4px 4px 0 0;
	}

	/* 	============================================
	OVERLAY 
	============================================*/
	#overlay {
		position: absolute;
		z-index: 300;
		font-size: 36px;
		color:#f9d945;
		width: 100%;
		top: 120px;
		margin: 0 auto;
		transition: font-size 1s;
	}

	.overlay-shrink {
		font-size: 6px; 
	} 

	.material-icons.md-36 {
		font-size: 36px; 
		color: #03335e;
	}

	.material-icons.md-48 {
		font-size: 48px; 
		color: #03335e;
	}

	#popContent {right: 24px; top: 24px; background-color: #FFFFFF;}

	.title {
		font-size: 1.1em;
		margin: 8px 0 12px;
	}

	#tipup {
		position: absolute;
		z-index: 100000;
	}
	
	.tipupbox {
		background-color: #5dbde9;
		color: #FFFFFF;
		font-size: 0.7em;
		padding: 3px 7px;
		border-radius: 4px;
		position: absolute;
		z-index: 10000;
	}
/* 	=================================================
               REVEAL
	=================================================*/
	.mask_on {
		position: absolute;
		background-color: #827f7f;
	}
	
	.mask_off {
		position: absolute;
		opacity: 0;
	}

/* 	=================================================
              RESIZE HANDLES
	=================================================*/
	.resize_handle {
		position: absolute;
		width: 8px;
		height: 8px;
		background-color: #ff0000;
	}
	
	.resize_nw {
		cursor: nw-resize;
	}
	
	.resize_ne {
		cursor: ne-resize;
	}
	
	.resize_sw {
		cursor: sw-resize;
	}
	
	.resize_se {
		cursor: se-resize;
	}

/* 	=================================================
               ROTATORS
	=================================================*/

.rotate_left, .rotate_right, .rotate_outerleft, .rotate_outerright {
	background-image:url("../../../graphics/frame14/buttonsprite3.png");
	filter: alpha(opacity=60);
	opacity: 0.6;
	height: 44px;
	width: 44px;
	cursor:pointer;
}

.rotate_left, .rotate_outerleft {
	background-position: -308px 0;
	float: left;
}

.no-touchevents .rotate_left:hover, .rotate_right:hover, .rotate_outerleft:hover, .rotate_outerright:hover{
	filter: alpha(opacity=90);
	opacity: 0.9;
}

.rotate_right, .rotate_outerright {
	background-position: -352px 0;
	float: right;
}

.inner_box_center{
	margin: 6px auto;
}

/* Rotator flags are either live (on) or not.
   They may also be complete (or not).
 */ 

.rotator_flag {
	height: 10px;
	width: 10px;
	border: solid 2px #ccc;
	background-color: #ccc;
	cursor: pointer;
}

.is_complete {
	background-color: #00905A;
	border-color: #00905A;
}

.is_live {
	border-color: #222;
}

/* 	=================================================
               SLIDERS AND TIMER BARS
	=================================================*/
.sli_ctr {
	position: relative;
	height: 41px;
	display:inline-block;
	cursor:pointer;
}

.sli_inner {
	left: 11px;
	top: 9px;
}

.sli_bar {
	height: 9px;
	left: 0;
	top: 7px;
	background-color: #5dbde9;
}

.sli_off, .sli_on {
	height: 3px;
	top: 10px;
}

.sli_off {
	left: 2px;
	background-color: #f0f9fb;  /* #70d8f6 */
}

.sli_on{
	width: 0%;
	left: 2px;
	background-color: #0FD565; /* #ffbd12; 283CD1  0FD565 */
}

.sli_tick {
	width: 5px;
	height: 21px;
	top: 2px;
	background-color: #f0f9fb; /* #70d8f6 */
	border: solid 1px #5dbde9;
	cursor: pointer;
}

.sli_tick_polar {
	height: 31px;
	top: -4px;
}

.tick_on {
	background-color: #0FD565;
}

.slider_disabled {
	background-color: #dddddd;
}

.sli_marker {
	background-image:url("../../../graphics/slider/marker_off.png");
	background-repeat: no-repeat;
	width:27px;
	height: 41px;
	cursor:pointer;
}

.timer_outer {
	position: relative;
	height: 24px;
	border: solid 3px #5dbde9;
	background-color: #ffffff;
	border-radius: 3px;
}

.timer_inner {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 18px;
	width: 95%;
	background-color: #123456;
}

/* 	=================================================
               SORTERS
	=================================================*/
/* styling for sorter plot boxes */

.slot_number_sor {
	align-items: center;
	justify-content: center;
	width: 40px;
	position:absolute;
	display: flex;
}

.number_style {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	 display: flex;
	align-items: center;
	justify-content: center;
}

.number_style_on {
	background-color: rgb(213, 66, 0);
	color: #ffffff;
}

.number_style_off {
	color: #ebd4d4;
	background-color: #ebd4d4;
}

/* 	=================================================
               STORY
	=================================================*/
.story_restore {
	background-color: #d9e6f5;
	padding: 0 3px;
	border-radius: 5px;
	cursor: pointer
}

.story_frame {
	position: relative;
	top: 0;
	left: 0;
	text-align: left;
}
.story_frame select {
	border: 2px solid #89bfff;
	padding: 1px;
	color:#333399;
	font-size: 0.9em;
	border-radius: 4px;
	min-width: 50px;
	box-shadow: 2px 2px 4px #888888;
	margin: 0;
}

.story_frame input {
	border: 2px solid #89bfff;
	padding: 1px; color:#333399;
	border-radius: 4px;
	min-width: 50px;
	box-shadow: 2px 2px 4px #888888;
	margin: 0;
	width: 160px;
	display: inline;
	font-size: 1em;
}

.story_frame p {
	margin-top: 8px;
}

.story_next {
	position: relative;
	top: 5px;
	border: 10px solid transparent;
	border-left-color: #dddddd;
	margin-left: 8px;
	cursor: pointer;
	width: 0px;
	height: 0px;
	display: inline-block;
}

.floating_box {
	position: relative; 
	top: 6px;
	border-radius: 12px;
	background-color:#fbdeda;
}

.floating_next {
	position: absolute;
	top: 12px;
	right: -12px;
	border: 20px solid white;
	border-color: transparent;
	border-left-color: #228fe4;
	border-left-width: 18px;
	width: 0;
	height: 0;
	display: block;
	cursor: pointer;
	opacity: 0.8;
}

.no-touchevents .floating_next:hover {
 	opacity: 1.0;
}

.floating_pointer {
	position: relative;
	border: 17px solid transparent;
	border-bottom-color: #fbdedabf;
	width: 0;
	height: 0;
	display: block;
}

.floating_ele {
	position: absolute;
	background-color:#FFF;
	text-align: center;
	padding: 3px;
	border: 2px solid #e5b0a9;
	border-radius:5px;
	cursor: pointer;
	zoom: 1;
}

.no-touchevents .floating_ele:hover {
 	border: 2px solid #070707; /* #ad5246; */
}

.floating_ele.clicked{
	border: 2px solid #070707;
	opacity: 1.0;
}

.floating_img {
	padding: 0;
	border: 0;
}

.undo_text {
	color: #121212;
	font-weight: bold;
	cursor: pointer;
}

span.float_anchor {
	position: relative;
	left: 0;
	top: 0;
	background-color:#FFF;
	padding: 1px 6px;
	text-align: center;
	/* border: 3px solid #89bfff; */
	border: 3px solid #fa6887;
	margin-right: 0 3px;
	border-radius: 50%;
	box-shadow: 2px 2px 4px #888888;
}

.undo {
	position: absolute;
	left: 20px;
	top: 52px;
	width: 40px;
	height: 16px;
	background:url("../../../graphics/furniture1/undosprite.png");
	background-repeat: no-repeat;
	cursor: pointer;
	overflow: hidden;
}

/* 	=================================================
               SWIPER and KEY
	=================================================*/
.swiper_frame {
	background-color: #fcfcfc;
    border: 2px solid #aaaaaa;
	box-shadow: 3px 3px 3px #777777;
    padding: 16px;
	border-radius: 6px;
	font-size: 1.1em;
	line-height: 1.5em;
}

.swi0, .swi1, .swi2, .swi3, .swi4, .swi5 {
	border-radius: 3px;
}

.swi0{
	background-color: #7CFC00; /* green */
}

.swi1{
	background-color: #f57c8b; /* red */
}

.swi2{
	background-color: #FFFF00; /* yellow */
}

.swi3{
	background-color: #7eb5ee; /* blue */
}

.swi4{
	background-color: #A0522D; /* Sienna */
}

.swi5{
	background-color: #708090; /* SlateGrey */
}

.key_ex{
	float: left;
	background-color: #eeeeee;
	border: 2px solid white;
	border-radius: 6px;
	cursor: pointer;
}

.marker_pen_on{
	border-color: black;
	background-color: white;
}

.key_sign {
	position: relative;
	margin: 8px;
	width: 18px;
	height: 18px;
}

.key_label {
	position: relative;
	top: -27px;
	left: 36px;
	font-size: 0.9em;
}

.negation_label{
	position: relative;
	font-size: 0.9em;
	padding: 3px;
}

/* 	=================================================
			TOSSER
	=================================================*/
.cssgradients .plot_bg_tos_left {
	background: #f9d945;
	background: -moz-linear-gradient(left, #f9d945, white); /* For Firefox 3.6 to 15 */
	background: -webkit-linear-gradient(left, #f9d945, white); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(left, #f9d945, white); /* For Opera 11.1 to 12.0 */
	background: -ms-linear-gradient(left, #f9d945, white);/*For IE10*/
	background: linear-gradient(left, #f9d945, white); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
	height: 1%;/*For IE7*/
	float: left;
}

.no-cssgradients .plot_bg_tos_left{
	background-image:url("../../../graphics/frame14/black-to-white.jpg");
	background-repeat:repeat-y;
	height: 1%;
	float: left;
}

.cssgradients .plot_bg_tos_right {
	background: #37ed7b;
	background: -moz-linear-gradient(left, white, #37ed7b); /* For Firefox 3.6 to 15 */
	background: -webkit-linear-gradient(left, white, #37ed7b); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(left, white, #37ed7b); /* For Opera 11.1 to 12.0 */
	background: -ms-linear-gradient(left, white, #37ed7b);/*For IE10*/
	background: linear-gradient(left, white, #37ed7b); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
	height: 1%;/*For IE7*/
	float: right;
}

.no-cssgradients .plot_bg_tos_right {
	background-image:url("../../../graphics/frame14/white-to-yellow.jpg");
	background-repeat:repeat-y;
	height: 1%;
	float: right;
}

/* 	=================================================
               PRE AND CODE TAGS
	=================================================*/
code, samp, kbd {
	font-family: "Courier New", Courier, monospace, sans-serif;
	text-align: left;
	color: #555;
	}


/* 	=================================================
              BOT_TLE
	=================================================*/
.bottle {
	position: absolute;
	left: -2500px;
}
	
/* 	=================================================
               MISC - JUNK?
	=================================================*/
/* target IE7 and IE6 */
	*:first-child+html pre {
		padding-bottom: 2em;
		overflow-y: hidden;
		overflow: visible;
		overflow-x: auto;
		}

	*html pre {
		padding-bottom: 2em;
		overflow: visible;
		overflow-x: auto;
		}

	*html .floating_pointer {
			border-width: 0;
	}

	.timer {
		width: 100px;
		height: 40px;
		cursor: pointer;
		background-image: url("../../../graphics/furniture1/inlinebut1.gif");
		background-repeat: no-repeat;
		left: -200px;
		top: -200px;
		margin-top: 8px;
		display: inline-block;
	}

/* https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/ */
.hyphenate {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* 	=================================================
            SINGLE ATTRIBUTES
	=================================================*/

.ali_centre {text-align: center;}

.bac_grey { background-color: #eeeeee;}

.centered {text-align:center;}

.flo_left {float:left;}
.flo_right {float: right}

.full { width: 100%;}

.mar_auto {margin: 0 auto;}
.mar_left {margin: 0 0}

.no_wrap { white-space: nowrap;}

.ove_hidden {overflow: hidden;}

.pos_abs {position: absolute;}
.pos_rel {position: relative;}

.text_large {font-size: 18px;}
.m_device .text_large {font-size: 20px;}
.l_device .text_large {font-size: 22px;}
.x_device .text_large {font-size: 24px;}
.short_device .text_large {font-size: 18px;}

.text_align_c {text-align: center;}
.text_bold {font-weight: bold;}

.vis_hid {visibility: hidden;}
.vis_invisible {visibility: hidden; display: none;}
.vis_opaque {opacity: 0;}
.vis_low {opacity: 0.2;}
.vis_high {opacity: 0.7;}
.vis_visible {visibility:visible; display: block;}
  
.mobileBlock {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 20px solid #12325b;
	padding: 30px;
	background-color: #ffffff;
}

/*============= FONTSIZE SCALERS =================================*/
.fontsize24 {padding: 6px !important; font-size: 24px !important;}
.fontsize23 {padding: 6px !important; font-size: 23px !important;}
.fontsize22 {padding: 6px !important; font-size: 22px !important;}
.fontsize21 {padding: 6px !important; font-size: 21px !important;}
.fontsize20 {padding: 5px !important; font-size: 20px !important;}
.fontsize19 {padding: 5px !important; font-size: 19px !important;}
.fontsize18 {padding: 4px !important; font-size: 18px !important;}
.fontsize17 {padding: 4px !important; font-size: 17px !important;}
.fontsize16 {padding: 4px !important; font-size: 16px !important;}
.fontsize15 {padding: 4px !important; font-size: 15px !important;}
.fontsize14 {padding: 3px !important; font-size: 14px !important;}
.fontsize13 {padding: 3px !important; font-size: 13px !important;}
.fontsize12 {padding: 2px !important; font-size: 12px !important;}
.fontsize11 {padding: 2px !important; font-size: 11px !important; }
.fontsize10 {padding: 1px !important; font-size: 10px !important;}
.fontsize9 {padding: 0 !important; font-size: 9px !important;}
.fontsize8 {padding: 0 !important; font-size: 8px !important;}

.fontsize11, .fontsize10, .fontsize9, .fontsize8 {
  overflow-wrap: break-word;
}

/* 	=================================================
             classes added via styling 'cla'
	=================================================*/

.centre-white {
	text-align: center;
	background-color: white;
}

.footer {
	position: fixed;
	bottom: 22px;
}


/* 	=================================================
             street_interview dependent elements
	=================================================*/

@media only screen and (orientation:portrait){
	body.street_interview #reorientationBlock {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		border: 20px solid #12325b;
		padding: 30px;
		background-color: #ffffff;
	}
	body.street_interview #frameHolder {display: none;}
}

	body.street_interview .control_text, body.street_interview .feedback_text {
		font-size: 24px;
	}

	body.street_interview .label_text {
		font-size: 18px;
	}
	body.street_interview .control_mappage_text {
		font-size: 22px;
	}

	/* 	=================================================
             SKEW TEXT OPENER AND CLOSER
	=================================================*/
	.skew_body {
		background-color: #e2e6ed;
		color: #aaa;
		font-size: 36px;
   }
	.skew_text {
		display: flex;
		justify-content: center;
		margin-top: 100px;
		transform: translateY(-50%);
		text-align: center;
		transition: transform 0.3s ease-in-out;
		pointer-events: all;
   }

   .tall_device .skew_text {
		margin-top: 120px;
   }

   .short_device .skew_text{
		margin-top: 80px;
   }

	.skew_text:hover {
		transform: rotateX(35deg), translateY(-50%);
   }
	.skew_text:hover .skew_span {
		color: #ccc;
   }
	.skew_text:hover .skew_span:nth-child(odd) {
		transform: skewY(15deg);
   }
	.skew_text:hover .skew_span:nth-child(even) {
		transform: skewY(-15deg);
		background-color: #f9f9f9;
		color: #a6a6a6;
   }
	.skew_text > .skew_span {
		display: block;
		background-color: #fff;
		width: 120px;
		height: 120px;
		line-height: 120px;
		transition: transform 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out;
		box-shadow: 0 40px 50px rgba(0, 0, 0, 0.1);
   }
	.skew_text > .skew_span:first-child {
		border-radius: 5px 0 0 5px;
   }

/* ================================
STA HTML 
Source -https://dev.to/link2twenty/star-rating-using-unicode-stars-3np2
===================================*/

/* this code is lifted from InHuOfficial */
.hide-visually,
.star-rating>input {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

fieldset {
	border: none;
	outline: none;
	box-shadow: none;
}

fieldset:focus-within {
	outline: none;
	box-shadow: none;
}

.star-rating {
  font-size: 60px;
  display: inline-flex;
  padding: 0;
}

.star-rating label {
  cursor: pointer;
  line-height: 1em;
  text-align: center;
}

.star-rating label .star {
  height: 1em;
  width: 1em;
  display: inline-block;
}

.star-rating>label {
  -webkit-text-stroke: 2px #82BBE5;
}

.star-rating input:checked~label>span.star,
.star-rating>label:hover~input~label>span.star {
  color: #fff;
}

.star-rating span.star,
.star-rating:hover>input+label>span.star,
.star-rating>input:checked+label>span.star,
.star-rating>input~label:hover>span.star {
  color: #E97451;
}

/*.star-rating>input~label:hover>span.star {
  color: orange;
} */
/* 	=================================================
        ELEMENT SPECIFIC MODIFIERS
	=================================================*/

	.love .plot_tag_mm{
		color: #5EDFAB;
		font-size: 28px;
	}

 	/* 	=================================================
            CHRISTMAS COLOUR SHEME
	=================================================*/

	.christmas .frame, .christmas #progressOuter  {
		background-color: #006f57;		/* green */
	}

	.christmas .question, .christmas .skew_body {
		background-color: transparent;
	}	

	.christmas .az_box {
		background: white;
	}

	.christmas #progressBar {
		background-color: #B61915;
	}	

	.christmas #logonavImg {
		src: "../graphics/frame/logonavtransparent.png";
	}	


 	/* 	=================================================
            ZURICH COLOUR SHEME
	=================================================*/
	.zurich .control_box_mappage {
		background-color: #4f7ebe;
	}
	
	.zurich .control_text {
		background-color: #bedeff;  
	}

	/* 	=================================================
            ZURICH SWITZERLAND COLOUR SHEME
	=================================================*/
	.zurichsw #header {
		background-color: #2167AE;		/* Zurich Blue */
	}
	
	.zurichsw #progressOuter {
		background-color: #2167AE; 	/* Zurich Blue */
	}

	.zurichsw .question {
		background-color: #DDE4E3; 	/* Dove */
	}

	.zurichsw .instruction {
		color: #1FB1E6; 	/* Sky Blue */
	}

	.zurichsw .floating_box {
		background-color: #DAD2BD; 	/* Sand Stone */
	}

	.zurichsw .floating_ele {
		border: 2px solid #DAD2BD; /* Sand Stone */
	}

	.zurichsw .floating_pointer {
		border-bottom-color: #DAD2BD;
	}

	.cssgradients .zurichsw .plot_bg_tos_left {
		background: -webkit-linear-gradient(left, #DAD2BD, white); /* Sand Stone */
		background: -o-linear-gradient(left, #DAD2BD, white);
		background: -ms-linear-gradient(left, #DAD2BD, white);
	}

	.cssgradients .zurichsw .plot_bg_tos_right {
		background: -webkit-linear-gradient(left, white, #A6E9AB); /* Mint */
		background: -o-linear-gradient(left, white, #A6E9AB);
		background: -ms-linear-gradient(left, white, #A6E9AB);
	}

	.zurichsw .axe_bg {
		background: none; 	/* White */
	}

	.zurichsw .arrowline_vertical {
		border-left: 4px solid #1FB1E6;	/* Sky Blue */
	}

	.zurichsw .arrowline_vertical:before { /* Sky Blue */
		border-bottom-color: #1FB1E6;
	}

	.zurichsw .arrowline_vertical:after { /* Sky Blue */
		border-top-color: #1FB1E6;
	}

	.zurichsw .arrowline_horizontal {
		border-top: 4px solid #1FB1E6;	/* Sky Blue */
	}

	.zurichsw .arrowline_horizontal:before { /* Sky Blue */
		border-right-color: #1FB1E6;
	}

	.zurichsw .arrowline_horizontal:after { /* Sky Blue */
		border-left-color: #1FB1E6;
	}

	.zurichsw .control_box_mappage {
		background-color: #2167AE; 	/* Zurich Blue */
	}

	.zurichsw .plot_tag_light {
		color: #000000;
	}

	/* 	=================================================
            BLUEGREY COLOUR SHEME
	=================================================*/
.bluegrey .control_box_mappage {
	background-color: #ffa600;
	color: #0f0404;
}