﻿body {
	margin-bottom: 250px;
	margin-top: 20px;
	margin-left: 0px;
	margin-right: 0px;
	background-color:#333;
	
}
#backgrounds {
	position: absolute;
	top: 0;
	right: 0;
	bottom:0;
	left: 0;
	background-color:rgba(0,0,0,0.3);
	background-image: url(bg/01.jpg); 
	z-index: 0;
	display: block;
}
#bg_overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom:0;
	left: 0;
	background:rgba(0,0,0,0.3);
	z-index: 0;
	display: none;
}
#intro {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
#questions {
	border-radius: 0px;
	padding:0px;
	padding-top:0px;
	width:95%;
	min-width:300px;
	max-width:700px;
    margin: 0px auto;
}

.box, .alert_type, .scanner_wrap {
	opacity: 0;
}

#right {
	margin: 0px auto;
	overflow:hidden;
	border-left:0px solid #cccccc;
	border-radius: 0px;
	width:;
}

.box {
	position: relative;
	background-color: #fff;
	border: 1px solid #999;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 0 0 6px 6px;
	background-clip: padding-box;
	outline: 0;
	-webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	
	width:600px;

	display:none;
	position:absolute;
	left: 50%;
	top: 50%;
	margin-top: -185px;
	margin-left: -300px;
    line-height:28px;
    font-size:22px; 
    color: #000; 
    font-family: 'Open Sans',sans-serif;
}

.box .top {
	width:100%;
	min-height:20px;
	background-color:#cc0000;
	color: #fff; 

	font-family: 'Open Sans',sans-serif;
	font-size:23px;
	font-weight:bold; 
	line-height: 1em;
	padding: 22px 0;
	position: relative;
	display: block;
}

.box .top > * {
	font-family: 'Open Sans',sans-serif; 
	font-weight:bold
}

.top .step_label {
	font-weight: normal;
	margin-right: 10px;
}

.box .btn_wrap {
	padding: 20px 0 30px;
}

.navbtn {
	outline: 0px none;
}

.dialog .navbtn,
.prompt .navbtn,
.modal-wrapper .btn {
	font-family: 'Open Sans',sans-serif;
	font-size:30px; 
	font-weight:bold;
	text-decoration:none;
	width:45%;
	
	padding: 15px 0px;
  	border-radius: 4px;
	display:inline-block;
	cursor:pointer;
	border:1px solid rgba(0,0,0,0);
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.modal-wrapper .btn {
	width: 48%;
}
.modal-wrapper .btn .btn-cancel {

}
.modal-wrapper .btn-ok {
	margin-right:-4px;
}

.btnyes,
.box .ok,
.box .yes {
	border-radius: 4px 0 0 4px !important;
	margin-right: -6px;
	color: #fff; 
	background-color:#00cc00;
    background-image: -moz-linear-gradient( 90deg, rgb( 0, 153, 0 ) 0%, rgb( 0, 204, 0 ) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb( 0, 153, 0 ) 0%, rgb( 0, 204, 0 ) 100%);
}

.btnno,
.box .cancel,
.box .no {
	border-radius: 0px 4px 4px 0px !important;
	color: #fff;
	background-color:#cc0000;
	background-image: -moz-linear-gradient( 90deg, rgb( 153, 0, 0 ) 0%, rgb( 204, 0, 0 ) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb( 153, 0, 0 ) 0%, rgb( 204, 0, 0 ) 100%);
}
.box .next,
.box .agree,
.prompt .ok {
	font-size:30px; 
	font-family: 'Open Sans',sans-serif;
	font-weight:bold;
	text-decoration:none;

	width:40%;
	min-width:200px;
	padding: 15px 0px;
  	border-radius: 4px;
	display:inline-block;
	cursor:pointer;

	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.52);
	color: rgba(0, 0, 0, 0.59);
}

.box_copy {
	margin: 0 auto;
	padding:30px;
	font-family: arial,sans-serif;
  	font-size: 21px;
  	line-height: 1.2em;
  	color: #626262;
}
.box2 {
	font-family: arial,sans-serif;
	width:55%;
	min-width:300px;
	margin: 0 auto;
	padding:10px;
}

.option_row {
	display: block;
	margin: 0 0 4px;
	position: relative;
}

.box2 label {
	color: #575757;
	position: relative;
  	display: inline-block;
  	left: 45px;
  	width: 80%;
  	cursor: pointer;
}
.box2 input {
	position: absolute;
	left: 15px;
	top: 5px;
	display: inline-block;
}
.h1 { font-size:36px; color: #fff; font-family: 'Open Sans', sans-serif;}
.prompt .h1 {display: block; width: 100%; height: auto; }

.style1 {
	margin: 10px 0 15px;
  	display: block;
	font-size:19px; 
	color: #666; 
	font-family: 'Open Sans',sans-serif;
	text-align: center;
}
.style2 { font-size:18px; color: #444; font-family: 'Open Sans',sans-serif; }
.styleq1 { font-size:23px; color: #000; font-family: 'Open Sans',sans-serif; font-weight:bold; }
.circle1 { font-size:23px; color: #000; font-family: 'Open Sans',sans-serif; font-weight:bold; background:#e7e7e7; border-radius:100px; padding:5px 15px; }
.circle2 { font-size:23px; color: rgba(255,255,255,0.8); font-family: 'Open Sans',sans-serif; font-weight:bold; background:#555; border-radius:100px; padding:5px 15px; text-shadow:0 1px #666; }
.circle1, .circle2 {
	font-weight: normal !important;
	margin-left: 0px;
}
#user_wrap {
	position: absolute;
	top: 10px;
	left: 10px;
}
#user_status {
	position: relative;
	top: 5px;
  	left: 20px;
	float: left;
	clear: none;
	background: rgba(0,0,0,0.6);
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	border-radius: 20px;
	padding: 3px 10px 4px 25px;
	box-shadow: 0px 1px 0px rgba(255,255,255,0.1);
	color: #fff;
}
.online_marker {
	width: 8px;
	height: 8px;
	position: absolute;
	left: 8px;
	top: 6px;
	border-radius: 30px;
	border: 1px solid rgba(0,0,0,0.1);

}
.online_marker.online {
	background: #46fe42;
	box-shadow: 0 0 10px #BDFF88;
	/*background: url(../images/icon-online.png) 0 0 no-repeat;*/
}
.online_marker.offline {
	background: #ff0000;
	/*background: url(../images/icon-offline.png) 0 0 no-repeat;*/
}

.online_marker.online {
    -webkit-animation: pulsate 500ms infinite alternate;
    -moz-animation: pulsate 200ms infinite alternate;
    -ms-animation: pulsate 200ms infinite alternate;
    -o-animation: pulsate 200ms infinite alternate;
    -animation: pulsate 200ms infinite alternate;
}
@-webkit-keyframes pulsate {
    from { box-shadow: 0 0 10px #2C8002; }
    to { box-shadow: 0 0 1px #2C8002; }
}
@-moz-keyframes pulsate {
    from { opacity: 1; }
    to { opacity: 0; }
}
@-ms-keyframes pulsate {
    from { opacity: 1; }
    to { opacity: 0; }
}
@-o-keyframes pulsate {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes pulsate {
    from { box-shadow: 0 0 10px #BDFF88; }
    to { box-shadow: 0 0 1px #BDFF88; }
}


#flag {
	position: relative;
	top: 0px;
	left: 10px;
	float: left;
	clear: none;
}

/*!
 * ---------------------------
 * LOADING BAR 
 * Loadbar styles
 * ---------------------------
/*/

#progressbar {
	width: 80%;
	margin: 0px auto 0;
	position: relative;
 }
.ui-progressbar{
	position:relative;
}
.progress-label{
	position:absolute;
	left:47%;
	top:6px;
	font-weight:bold;
	text-shadow:1px 1px 0 #fff;

}
.progress_wrap {
	font-family: 'Open Sans',sans-serif;
	width: 80%;
	margin: 0px auto;
	border: 10px solid #333;
	border-radius: 10px;
	padding: 10px 20px;
	background: #333;
	z-index:999;
	position: relative;
	margin-top: 20%;
	height: 110px;
}
.progress_wrap h3{
	font-size:110%;
	font-weight: normal;
	line-height:40px;
	color: white;
	margin-top: 0px;
	text-align:center;
}
/* scanner jquery-ui styles */
.ui-progressbar {
  position: relative;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
  border-bottom-right-radius: 4px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
  border-bottom-left-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
  border-top-right-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
  border-top-left-radius: 4px;
}
.ui-widget-content {
  border: 1px solid #aaaaaa;
  background: #ffffff url("../images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
  color: #222222;
}
.ui-widget {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1.1em;
}
.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}
.ui-widget-header {
  border: 1px solid #aaaaaa;
  background: #cccccc url("../images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
  color: #222222;
  font-weight: bold;
}


/* radar */
h3.radar_title {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size:110%;
	font-weight: normal;
	line-height:40px;
	color: white;
	margin-top: 60px;
	text-align:center;
}
#radar{
  position:relative;
  width:321px;
  height:321px;
  background:#222 url(../images/radar_bg.png);
  border-radius:320px;
  overflow:hidden;
  margin: 10% auto;
}

#rad{
  position:absolute;
  width:321px;
  height:321px; background:url(../images/radar_sweep.png);
  -webkit-animation: all 1s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    
    animation: all 1s linear infinite;
}
.obj{
  background:#cf5;
  position:absolute;
  border-radius:10px;
  width:4px;
  height:4px;
  margin-top:-2px;
  margin-left:-2px;
  box-shadow:0 0 10px 5px rgba(100,255,0,0.5);
  opacity:0.2;
}


/* pulse */


.scanner_wrap  {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.scanner_wrap .overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px;
}

.scanner_wrap .loader {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 220px;
	left: 50%;
	margin-left: -150px;
	z-index: 4;
}
.scanner_wrap .loader img {
    display: block;
    width: 32px;
    height: 32px;
    margin-top: -11px;
    margin-left: -14px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    overflow: hidden;
}

.scanner_wrap .loader .title {
	display: block;
    width: 340px;
    height: auto;
    margin-top: 15px;
    margin-left: -168px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    text-align: center;
    font-size: 16px;
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 400;

	letter-spacing: 0px;
	background: rgba(0,0,0,0.0);
	padding: 4px;
	border-radius: 4px;
	color: #fff;
}

.scanner_wrap .loader .percent {
	display: block;
    width: 100px;
    height: auto;
    margin-top: -33px;
    margin-left: -43px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    text-align: center;
    font-size: 39px;
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 300;

	letter-spacing: 1px;
	background: rgba(0,0,0,0.0);
	padding: 4px;
	border-radius: 4px;
	color: #fff;
}

.scanner_wrap .loader .circle {
    width: 0px;
    height: 0px;
    margin-top: 0px;
    margin-left: 0px;
    border: 4px solid #ff0000;
    -webkit-border-radius: 300px;
    -moz-border-radius: 300px;    
    border-radius: 300px;
    background: #ff0000;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
}
/*!
 * ---------------------------
 * ALERT POPUP
 * JS Alert browser style
 * ---------------------------
/*/

.alert_wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.popup_alert {
	position: absolute; 
	width: 380px; 
	height: 113px; 
	left: 50%;
	top: 50%;
	margin-left: -210px;
	margin-top: -90px;
	display: none; 
	z-index: 9999; 
	padding: 20px; 
	overflow: hidden; 
	border: 1px solid rgb(148, 148, 148);
	border-top-color: #C0C0C0;
	background-color: rgb(237, 237, 237);
	border-radius: 5px;
	box-shadow: 0 0 18px rgba(0,0,0,0.4);
}

.popup_alert .top {
	position:absolute;
	left:-1px;
	top:-1px;
	width:390px;
	height:7px;
	padding: 8px 20px 6px 10px;
	background: url(../images/bg_topbar.png) 0 0 repeat-x;
	border: 1px solid #696969;
}

.popup_alert .copy_area {
	display: block; 
	height: 100px;
	padding-top: 0px;
	position: relative;
	left: 85px;
	width: 80%;
}

.popup_alert .copy_area h5 {
	font-family: Arial, sans-serif;
	font-size: 14px;
		font-weight: bold;
	color: #000000;
	margin: 0;
	position: relative;
	top: 20px;
}

.popup_alert .copy_area h5.text {
	font-family: Arial, sans-serif;
	font-weight: normal;
		font-size: 13px;
		margin-top:5px;
}

.popup_alert .btn_area {
	display: block;
	width: 170px;
	margin: 11px auto;
	float: right;
	position: relative;
		top: -8px;
		left: 10px;
}

.popup_alert .btn_area button {
	position: relative;
	bottom: 10px;
	width: 78px;
	height: 21px;
	border-radius: 4px !important;
	border: 1px solid #9A9A9A;
	background: url(../images/bg_btn.png) 0 0 repeat-x;
}

.popup_alert .btn_area button.cancel {
	/*right: 8px;*/
}

.popup_alert .btn_area button span {
	font: 14px Arial;
}

.popup_alert .alert_icon {
	width: 62px;
	height: 56px;
	background: url(../images/alert_icon_b.png) 0 0 no-repeat;
	position: absolute;
	left: 23px;
		top: 45px;
}


.modal-wrapper {
  position: absolute;
  display: none;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1500;
}
#modal-overlay {
  position: absolute;
  display: none;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1501;
  background: #333;
  opacity: 0.6;
  filter: alpha(opacity=40);
}

.modal-dialog {
	position: relative;
	width: auto;
	margin: 0px auto;
	width: 330px;
	z-index: 5;
	top: 50%;
	left: 0px;
	margin-top: -150px;
}
.modal-content {
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 0 0 6px 6px;
  background-clip: padding-box;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.modal-header {
  background: #EC0000;
  color: #fff;
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 16px;
}
.modal-title {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 2.5em;
  margin: 0;
  line-height: 1em;
  font-weight: bold;
}
.modal-body {
  position: relative;
  padding: 20px;
  max-height: none !important;
  font-family: arial,sans-serif;
  font-size: 25px;
  line-height: 1.2em;
  color: #626262;
  background-color: #fff;
}
.modal-footer {
  margin-top: 0;
  padding-top: 5px!important;
  border-top: none!important;
  text-align: center;
}
.modal-footer {
  margin-top: 15px;
  padding: 19px 20px 20px;
  text-align: center;
  border-top: 1px solid #e5e5e5;
}
.btn {
  width: 48%;
  font-size: 120%;
}
.modal-footer .btn+.btn {
  margin-left: 0px;
  margin-bottom: 0;
}
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143em;
  border-radius: 4px;
  outline: 0px none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn-ok {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
  border-radius: 4px 0 0 4px !important;
}
.btn-cancel {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
  border-radius: 0px 4px 4px 0px !important;
  
}

/*!
 * ---------------------------
 * QUESTION MODULE STYLES
 * set via global class
 * ---------------------------
/*/

.checkbox_icon {
	display: none;
}

.qtheme_one input[type=checkbox] {
	visibility: hidden;
}

.qtheme_one .box2 label {
	left: 5px;
	padding-left: 40px;
}

.qtheme_one .checkbox_icon { 
	display:inline-block; 
	width: 16px;
	height: 16px;
	background: rgba(255,255,255,0.1); 
	border: 3px solid rgba(186, 186, 186, 1);
	border-radius: 25px;
	margin-top:-3px;
	visibility: visible;
	position: absolute;
	left: 5px;
	top: 6px;
}

.qtheme_one input[type=checkbox]:checked + .checkbox_icon { 
	background: rgba(255,255,255,0.1); 
	border: 3px solid rgba(186, 186, 186, 1);
	box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.88);
	visibility: visible;
}

.qtheme_one .checkbox_icon .checkbox_state {
	width: 10px;
	height: 10px;
	background: rgba(0,0,0,0);
	border-radius: 15px;
	visibility: visible;
	display: block;
	position: absolute;
	top: 3px;
	left: 3px;
	visibility: visible;
}

.qtheme_one input[type=checkbox]:checked + .checkbox_icon .checkbox_state {
	background: #000;
	visibility: visible;
}


/* QUESTION THEME TWO */

.qtheme_two .options.box {
  background-color: rgba(255, 255, 255, 0);
  box-shadow: none;
  border: 0 none;
}

.qtheme_two .box2 {
  font-family: arial,sans-serif;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
}

.qtheme_two .option_row {
  display: block;
  margin: 0 0 4px;
  position: relative;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
}

.qtheme_two .box2 label {
	left: 5px;
	padding-left: 40px;
}

.qtheme_two .box2 input {
  position: absolute;
  left: 10px;
  top: 10px;
}

.qtheme_two input[type=checkbox] {
	visibility: hidden;
}

.qtheme_two .checkbox_icon { 
	display:inline-block; 
	width: 22px;
	height: 22px;
	background: rgba(255,255,255,0.1); 
	border: 3px solid rgba(186, 186, 186, 1);
	border-radius: 25px;
	margin-top:-3px;
	visibility: visible;
	position: absolute;
	top: 12px;
	left: 14px;
}

.qtheme_two input[type=checkbox]:checked + .checkbox_icon { 
	background: rgba(255,255,255,0.1); 
	border: 3px solid rgba(186, 186, 186, 1);
	box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.88);
	visibility: visible;
}

.qtheme_two .checkbox_icon .checkbox_state {
	width: 16px;
	height: 16px;
	background: rgba(0,0,0,0);
	border-radius: 15px;
	visibility: visible;
	display: block;
	position: absolute;
	top: 3px;
	left: 3px;
	visibility: visible;
}

.qtheme_two input[type=checkbox]:checked + .checkbox_icon .checkbox_state {
	background: #000;
	visibility: visible;
}

.qtheme_two .box .next {
	width: 100%;
	padding: 25px 0px;
}



/*!
 * ---------------------------
 * COLOUR SETS
 * set via global class
 * ---------------------------
/*/

.box {
	background-color: #fff;
}

.box .top,
.modal-header {
	background: #EC0000;
	color: #fff;
}

.btn-ok,
.btnyes {
	color: #fff;
	background-color:#00cc00;
    background-image: -moz-linear-gradient( 90deg, rgb( 0, 153, 0 ) 0%, rgb( 0, 204, 0 ) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb( 0, 153, 0 ) 0%, rgb( 0, 204, 0 ) 100%);
}
.btn-cancel,
.btnno {
	color: #fff;
	background-color:#cc0000;
	background-image: -moz-linear-gradient( 90deg, rgb( 153, 0, 0 ) 0%, rgb( 204, 0, 0 ) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb( 153, 0, 0 ) 0%, rgb( 204, 0, 0 ) 100%);
}
.agree,
.next,
.btnnext {
	color: rgba(0, 0, 0, 0.62);
	background-color: #FFE459;
	background-image: -moz-linear-gradient( 90deg, rgb( 254, 188, 0 ) 0%, rgb( 255, 229, 0 ) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb( 254, 188, 0 ) 0%, rgb( 255, 229, 0 ) 100%);
	border: 1px solid rgba(0,0,0,0.02);
}

/*!
 * ---------------------------
 * RESPONSIVE MEDIA QUERIES
 * Screen size dependant rules
 * ---------------------------
/*/

@media screen and (max-width: 615px) {
	.alert_type {
		zoom: 100%;
	}
	.popup_alert {
		width: 360px;
		margin-left: -200px;
	}
	.popup_alert .copy_area {
		width: 80%;
	}

	.box {
		zoom: 90%;
		margin-top: -215px;
	}
	.box .top {
		font-size: 200%;
		padding: 40px 0;
	}
	.box .box_copy {
		font-size: 120%;
  		line-height: 1.18em;
	}
	.box .box2 > * {
		zoom: 140%;
  		line-height: 1.18em;
	}
	.circle1, .circle2 {
		 zoom: 150%;

	}
}
@media screen and (max-width: 595px) {
	.alert_type {
		zoom: 100%;
	}
	.popup_alert {
		width: 360px;
		margin-left: -200px;
	}
	.popup_alert .copy_area {
		width: 80%;
	}

	.box {
		zoom: 75%;
	}
	.box .top {
		font-size: 200%;
		padding: 40px 0;
	}
	.box .box_copy {
		font-size: 120%;
  		line-height: 1.18em;
	}
	.box .box2 > * {
		zoom: 140%;
  		line-height: 1.18em;
	}
	.circle1, .circle2 {
		 zoom: 150%;

	}
}
@media screen and (max-width: 500px) {
	.alert_type {
		zoom: 95%;
	}
	.popup_alert {
		width: 360px;
		margin-left: -250px;
	}
	.popup_alert .copy_area {
		width: 80%;
	}

	.box {
		zoom: 65%;
		margin-top: -255px;
	}
	.box .top {
		font-size: 200%;
		padding: 40px 0;
	}
	.box .box_copy {
		font-size: 120%;
  		line-height: 1.18em;
	}
	.box .box2 {
		width: 80%;
	}
	.box .box2 > * {
		zoom: 150%;
  		line-height: 1.18em;
	}
	.circle1, .circle2 {
		 zoom: 150%;

	}
}
@media screen and (max-width: 480px) {
	.alert_type {
		zoom: 85%;
	}
	.popup_alert {
		width: 330px;
		margin-left: -185px;
	}
	.popup_alert .copy_area {
		width: 80%;
	}

	.box {
		zoom: 60%;
		margin-top: -205px;
	}
	.box .top {
		font-size: 200%;
		padding: 40px 0;
	}
	.box .box_copy {
		font-size: 120%;
  		line-height: 1.18em;
	}
	.box .box2 {
		width: 80%;
	}
	.box .box2 > * {
		zoom: 150%;
  		line-height: 1.18em;
	}
	.circle1, .circle2 {
		 zoom: 150%;

	}
	.scanner_wrap {
		margin-top: 80px;
	}
}
@media screen and (max-width: 415px) {
	.alert_type {
		zoom: 85%;
	}
	.popup_alert {
		width: 330px;
		margin-left: -285px;
	}
	.popup_alert .copy_area {
		width: 80%;
	}

	.box {
		zoom: 55.5%;
		margin-top: -205px;
	}
	.box .top {
		font-size: 200%;
		padding: 40px 0;
	}
	.box .box_copy {
		font-size: 120%;
  		line-height: 1.18em;
	}
	.box .box2 {
		width: 80%;
	}
	.box .box2 > * {
		zoom: 150%;
  		line-height: 1.18em;
	}
	.circle1, .circle2 {
		 zoom: 150%;

	}
}
@media screen and (max-width: 400px) {
	.alert_type {
		zoom: 75%;
	}
	.popup_alert {
		width: 300px;
		margin-left: -170px;
	}
	.popup_alert .copy_area {
		width: 80%;
	}

	.box {
		zoom: 58%;
		margin-top: -275px;
	}
	.box .top {
		font-size: 200%;
		padding: 40px 0;
	}
	.box .box_copy {
		font-size: 120%;
  		line-height: 1.18em;
	}
	.box .box2 {
		width: 80%;
	}
	.box .box2 > * {
		zoom: 150%;
  		line-height: 1.18em;
	}
	.circle1, .circle2 {
		 zoom: 150%;

	}
}
@media screen and (max-width: 375px) {
	.alert_type {
		zoom: 75%;
	}
	.popup_alert {
		width: 300px;
		margin-left: -170px;
	}
	.popup_alert .copy_area {
		width: 80%;
	}

	.box {
		zoom: 52%;
		margin-top: -275px;
	}
	.box .top {
		font-size: 200%;
		padding: 40px 0;
	}
	.box .box_copy {
		font-size: 120%;
  		line-height: 1.18em;
	}
	.box .box2 {
		width: 80%;
	}
	.box .box2 > * {
		zoom: 150%;
  		line-height: 1.18em;
	}
	.circle1, .circle2 {
		 zoom: 150%;

	}
}
@media screen and (max-height: 320px) {
	.alert_type {
		zoom: 100%;
	}
	.popup_alert {
		width: 300px;
		margin-left: -170px;
	}
	.popup_alert .copy_area {
		width: 80%;
	}

	.box {
		zoom: 52%;
		margin-top: -210px;
	}
	.box .top {
		font-size: 200%;
		padding: 40px 0;
	}
	.box .box_copy {
		font-size: 120%;
  		line-height: 1.18em;
	}
	.box .box2 {
		width: 65%;
	}
	.box .box2 > * {
		zoom: 150.5%;
  		line-height: 1.18em;
	}
	.circle1, .circle2 {
		 zoom: 150%;

	}
}

@media screen and (max-width: 320px) {
	.alert_type {
		zoom: 80.5%;
	}
	.popup_alert {
		width: 300px;
		margin-left: -170px;
	}
	.popup_alert .copy_area {
		width: 80%;
	}

	.box {
		zoom: 46%;
		margin-top: -305px;
	}
	.box .top {
		font-size: 200%;
		padding: 40px 0;
	}
	.box .box_copy {
		font-size: 120%;
  		line-height: 1.18em;
	}
	.box .box2 {
		width: 65%;
	}
	.box .box2 > * {
		zoom: 150.5%;
  		line-height: 1.18em;
	}
	.circle1, .circle2 {
		 zoom: 150%;

	}
}



/*!
 * ---------------------------
 * THEME SETS
 * colour scheme rules
 * ---------------------------
/*/


/* gradient set one */
.gradi_one .box {
	background-color: #fff;
}

.gradi_one .box .top,
.gradi_one .modal-header {
	background: #646359;
	color: #fff;
}

.gradi_one .btn-ok,
.gradi_one .btnyes {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
	background-image: -moz-linear-gradient( 90deg, rgb(54, 137, 20) 0%, rgb(106, 161, 55) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(54, 137, 20) 0%, rgb(106, 161, 55) 100%);
}
.gradi_one .btn-cancel,
.gradi_one .btnno {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
	background-image: -moz-linear-gradient( 90deg, rgb(176, 56, 35) 0%, rgb(208, 60, 41) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(176, 56, 35) 0%, rgb(208, 60, 41) 100%);
}
.gradi_one .agree,
.gradi_one .next,
.gradi_one .btnnext {
	color: rgba(0, 0, 0, 0.62);
	background-color: #FFE459;
	background-image: -moz-linear-gradient( 90deg, rgb(255, 232, 0) 0%, rgb(245, 209, 22) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(255, 232, 0) 0%, rgb(245, 209, 22) 100%);
}

/* blue tone set */
.btone .box {
	background-color: #fff;
}

.btone .box .top,
.btone .modal-header {
	background: #74A5BE;
	color: #fff;
}

.btone .btn-ok,
.btone .btnyes {
	color: #FFF;
	background-color: #4BA4DA;
	border-color: rgba(0,0,0,0.1);
	background-image: none;
}
.btone .btn-cancel,
.btone .btnno {
	color: #fff;
	border-color: rgba(0,0,0,0.1);
	background-color: #d9534f;
	background-image: none;
}
.btone .agree,
.btone .next,
.btone .btnnext {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.52);
	background-color: #FF9841;
	background-image: none;
}

.btone .scanner_wrap {
	background: rgba(0, 0, 0, 0.5);
	border: 0px none;
}
.btone .ui-progressbar {
	border: 0px none;
	border-radius: 3px;
}
.btone .ui-widget-content {
	background: rgba(255,255,255,0.8);
}

.btone .ui-widget-header {
	background: #72CFFF;
	background-image: -moz-linear-gradient( -45deg, rgb(187, 234, 255) 0%, rgb(15, 164, 229) 100%);
	background-image: -webkit-linear-gradient( -45deg, rgb(187, 234, 255) 0%, rgb(15, 164, 229) 100%);
	border: 0px solid rgba(255,255,255,0);
	border-radius: 3px;
}

.btone .progress-label {
	color: rgba(0,0,0,0.8);
  	font-weight: bold;
	text-shadow: none;
}
.btone .scanner_wrap .loader .circle {
	background: #72CFFF; 
	border-color: #72CFFF; 
}
/* gtone set */
.gtone .box {
	background-color: #fff;
}

.gtone .box .top,
.gtone .modal-header {
	background: #546B79;
	color: #fff;
}

.gtone .btn-ok,
.gtone .btnyes {
	color: #FFF;
	background-color: #4B93DA;
	border-color: rgba(0, 0, 0, 0.12);
	background-image: none;
}
.gtone .btn-cancel,
.gtone .btnno {
	color: #fff;
	border-color: rgba(0, 0, 0, 0.12);
	background-color: #d9534f;
	background-image: none;
}
.gtone .agree,
.gtone .next,
.gtone .btnnext {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.52);
	background-color: #FFD636;
	background-image: none;
}

.gtone .scanner_wrap {
	background: rgba(84, 107, 121, 0.4);
	border: 0px none;
}
.gtone .ui-progressbar {
	border: 0px none;
	border-radius: 3px;
}
.gtone .ui-widget-content {
	background: rgba(0,0,0,0.8);
}

.gtone .ui-widget-header {
	background: #4B93DA;
	border: 0px solid rgba(255,255,255,0);
	border-radius: 3px;
}

.gtone .progress-label {
	color: #fff;
  	font-weight: normal;
	text-shadow: none;
}
.gtone .scanner_wrap .loader .circle {
	background: #4B93DA; 
	border-color: #4B93DA; 
}

/* ptone set */
.ptone .box {
	background-color: #fff;
}

.ptone .box .top,
.ptone .modal-header {
	background: #EF2B93;
	color: #fff;
}

.ptone .btn-ok,
.ptone .btnyes {
	color: #FFF;
	background-color: #4BDAC4;
	border-color: rgba(0, 0, 0, 0.12);
	background-image: none;
}
.ptone .btn-cancel,
.ptone .btnno {
	color: #fff;
	border-color: rgba(0, 0, 0, 0.12);
	background-color: #F999AB;
	background-image: none;
}
.ptone .agree,
.ptone .next,
.ptone .btnnext {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.52);
	background-color: #74CCE7;
	background-image: none;
}

.ptone .scanner_wrap {
	background: rgba(0, 0, 0, 0.5);
	border: 0px none;
}
.ptone .ui-progressbar {
	border: 0px none;
	border-radius: 3px;
}
.ptone .ui-widget-content {
	background: rgba(255,255,255,0.8);
}

.ptone .ui-widget-header {
	background: #EF2B93;
	border: 0px solid rgba(255,255,255,0);
	border-radius: 3px;
}

.ptone .progress-label {
  	font-weight: normal;
	text-shadow: none;
}
.ptone .scanner_wrap .loader .circle {
	background: #EF2B93; 
	border-color: #EF2B93; 
}

/* black/yellow set */
.blkyellow .box,
.blkyellow .modal-content,
.blkyellow .modal-body {
	background-color: #000;
	color: #fff;
}

.blkyellow .box .top,
.blkyellow .modal-header {
	background: #FFDF00;
	color: #000;
}
.blkyellow .box .h1 {
	color: #000;
}

.blkyellow .box_copy,
.blkyellow .box2 label,
.blkyellow .style1 {
	color: #fff;
}

.blkyellow .btn-ok,
.blkyellow .btnyes {
	color: #FFF;
	background-color: #D1DA4B;
	border-color: rgba(0,0,0,0.1);
	background-image: none;
}
.blkyellow .btn-cancel,
.blkyellow .btnno {
	color: #fff;
	border-color: rgba(0,0,0,0.1);
	background-color: #d9534f;
	background-image: none;
}
.blkyellow .agree,
.blkyellow .next,
.blkyellow .btnnext {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.52);
	background-color: #FF9841;
	background-image: none;
}

.blkyellow .scanner_wrap {
	background: rgba(0, 0, 0, 0.5);
	border: 0px none;
}
.blkyellow .ui-progressbar {
	border: 0px none;
	border-radius: 3px;
}
.blkyellow .ui-widget-content {
	background: rgba(0,0,0,0.8);
}

.blkyellow .ui-widget-header {
	background: #FFDF00;
	background-image: none;
	border: 0px solid rgba(255,255,255,0);
	border-radius: 3px;
}

.blkyellow .progress-label {
	color: rgba(0,0,0,0.8);
  	font-weight: bold;
	text-shadow: none;
}
.blkyellow .qtheme_one input[type=checkbox]:checked + .checkbox_icon .checkbox_state,
.blkyellow .qtheme_two input[type=checkbox]:checked + .checkbox_icon .checkbox_state { 
	background:#FFDF00; 
}
.blkyellow .qtheme_one input[type=checkbox]:after,
.blkyellow .qtheme_two input[type=checkbox]:after {
	background: #000; 
}
.blkyellow .qtheme_one input[type=checkbox]:checked:after,
.blkyellow .qtheme_two input[type=checkbox]:checked:after {
	background: #fff;
}
.blkyellow .scanner_wrap .loader .circle {
	background: #FFDF00; 
	border-color: #FFDF00; 
}

/* black/orange set */
.blkorange .box,
.blkorange .modal-content, 
.blkorange .modal-body {
	background-color: #000;
	color: #fff;
}

.blkorange .box .top,
.blkorange .modal-header {
	background: #FF7E00;
	color: #000;
}
.blkorange .box .h1 {
	color: #000;
}

.blkorange .box_copy,
.blkorange .box2 label,
.blkorange .style1 {
	color: #fff;
}

.blkorange .btn-ok,
.blkorange .btnyes {
	color: #FFF;
	background-color: #4BA4DA;
	border-color: rgba(0,0,0,0.1);
	background-image: none;
}
.blkorange .btn-cancel,
.blkorange .btnno {
	color: #fff;
	border-color: rgba(0,0,0,0.1);
	background-color: #d9534f;
	background-image: none;
}
.blkorange .agree,
.blkorange .next,
.blkorange .btnnext {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.52);
	background-color: #FF9841;
	background-image: none;
}

.blkorange .scanner_wrap {
	background: rgba(0, 0, 0, 0.5);
	border: 0px none;
}
.blkorange .ui-progressbar {
	border: 0px none;
	border-radius: 3px;
}
.blkorange .ui-widget-content {
	background: rgba(0,0,0,0.8);
}

.blkorange .ui-widget-header {
	background: #FF7E00;
	background-image: none;
	border: 0px solid rgba(255,255,255,0);
	border-radius: 3px;
}

.blkorange .progress-label {
	color: rgba(0,0,0,0.8);
  	font-weight: bold;
	text-shadow: none;
}
.blkorange .qtheme_one input[type=checkbox]:checked + .checkbox_icon .checkbox_state,
.blkorange .qtheme_two input[type=checkbox]:checked + .checkbox_icon .checkbox_state { 
	background:#FF7E00; 

}

.blkorange .scanner_wrap .loader .circle {
	background: #FF7E00; 
	border-color: #FF7E00; 
}

/* black/pink set */
.blkpink .box,
.blkpink .modal-content, 
.blkpink .modal-body {
	background-color: #000;
	color: #fff;
}

.blkpink .box .top,
.blkpink .modal-header {
	background: #EF2B93;
	color: #fff;
}

.blkpink .box .h1 {
	color: #000;
}

.blkpink .box_copy,
.blkpink .box2 label,
.blkpink .style1 {
	color: #fff;
}

.blkpink .btn-ok,
.blkpink .btnyes {
	color: #FFF;
	background-color: #4BDAC4;
	border-color: rgba(0, 0, 0, 0.12);
	background-image: none;
}
.blkpink .btn-cancel,
.blkpink .btnno {
	color: #fff;
	border-color: rgba(0, 0, 0, 0.12);
	background-color: #F999AB;
	background-image: none;
}
.blkpink .agree,
.blkpink .next,
.blkpink .btnnext {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.52);
	background-color: #74CCE7;
	background-image: none;
}

.blkpink .scanner_wrap {
	background: rgba(0, 0, 0, 0.5);
	border: 0px none;
}
.blkpink .ui-progressbar {
	border: 0px none;
	border-radius: 3px;
}
.blkpink .ui-widget-content {
	background: rgba(255,255,255,0.8);
}

.blkpink .ui-widget-header {
	background: #EF2B93;
	border: 0px solid rgba(255,255,255,0);
	border-radius: 3px;
}

.blkpink .progress-label {
  	font-weight: normal;
	text-shadow: none;
}

.blkpink .qtheme_one input[type=checkbox]:checked + .checkbox_icon .checkbox_state,
.blkpink .qtheme_two input[type=checkbox]:checked + .checkbox_icon .checkbox_state { 
	background:#EF2B93; 
}


.blkpink .scanner_wrap .loader .circle {
	background: #EF2B93; 
	border-color: #EF2B93; 
}

/* global black theme elements */

.blkyellow .qtheme_two .option_row,
.blkorange .qtheme_two .option_row,
.blkpink .qtheme_two .option_row {
	background: #000;
}