/* DO NOT EDIT THIS CSS, COPY IT ONLY TO YOUR OWN CSS FILE */
/*--Default Layout Styling ------------------*/
html, body { background:#fff; font-family: 'Fira Sans', sans-serif; color:#000; height:100% }

a { color:#0077af; }

ul { margin:0; padding-left:20px; }

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

ul#fields, li#FormFields ul, 
#AdditionalFormFields ul, #Invoice_Form, .creditCardPayment ul, #registration-details, li.primary ul, li.additional ul,
#questions, .transactionalForm, .transactionalForm ul { list-style:none; padding:0; margin:0; }

.wrap { min-height:100%; margin-bottom:-147px; }

.wrap:after { content: ""; display: block; }
.wrap:after, footer { height:147px; }

.container { max-width:700px; padding:0 20px; margin:0 auto; }

#report .content .container { max-width:900px; }

header { background:#0077af; padding:30px 0; }
header .container { max-width:1000px; }

.content { padding:35px 0; }

footer { background:#092342; font-size:12px; line-height:16px; color:#fff; padding:20px 0; }
footer .container { max-width:900px; }

.logos { border-bottom:1px solid #fff; margin-bottom:20px; padding-bottom:20px; }

.footer-mbie img, .footer-nzgovt img { height:40px; width:auto !important; }

.footer-mbie { float:left; }
.footer-nzgovt { float:right; }

footer a { color:#d0d2d3; text-decoration:none; transition: all .1s; }
	footer a:hover { color:#fff; }

.links { float:left; }
.copyright { float:right; }

.links a { display:inline-block; margin-right:40px; }

/*-- Heading styles -------------------------*/
h1, h2, h3, h4, h5, h6 { margin:0 0 15px; color:#0077af; font-family:'Gustan', Verdana, Arial, sans-serif; }

h1 { font-size:35px; line-height:37px; }
h2 { font-size:30px; line-height:33px; }
h3 { font-size:25px; line-height:27px; }
h4 { font-size:22px; line-height:25px; }
h5 { font-size:14px; line-height:18px; }
h6 { font-size:12px; line-height:16px; }

p, li { margin:0 0 15px; font-size:14px; line-height:20px; }


/*-- Submit Buttons -------------------------*/
/* These will always be text (Except for the save button in survey) */
.btn-style { float:right; line-height:1; background:#0077af; padding:14px 20px; font-size:16px; color:#fff; text-decoration:none; cursor:pointer; min-width:80px; transition: .2s all ease; border-radius:3px; text-align:center; }
.btn-style:hover, .btn-style.selected { background:#6F94AA; }

.buttons .right, #event-form .remove { float:right; }

.add, .back { float:left; }

.engage-save-button { cursor:pointer; float:right; margin-right:10px; }

.buttons.disabled { display:none; }


/*-- DEFAULT SECTION STYLING ----------------------*/
#IntroText, #FormFields { margin-bottom:20px; }


/*-- DEFAULT INPUT STYLING ------------------*/
.field::before, .field::after { content: ""; display: table; }
.field::after { clear: both; }
.field::before, .field::after { content: ""; display: table; }

.field-text span.required { color:red; }

.field-value, .survey-answer { position:relative; }
.field-value em.format { display:none; }

img.ui-datepicker-trigger { position:absolute; right:10px; top:7px; }

.qq-upload-button { position:relative !important; box-shadow:none !important; height:29px !important; }

input[type=text], textarea, select { width:100%; box-sizing:border-box; border:1px solid #C8C8C8; box-shadow:none; font-size:14px; line-height:18px; padding:10px; color:#000; -webkit-appearance:none; -moz-appearance:none; border-radius:3px; }
input[type=text]:focus, textarea:focus, select:focus { outline:none; }

select { background:url(dropdown.png) center right no-repeat #fff; padding-right:20px; }

select::-ms-expand {
	display: none;
}

/* Fancy radio/checkbox CSS */

/* To allow for the positioned checkbox / radio */
.field td, .survey-answer td { position:relative; }

/* Move this old element out of the way */
input[type=checkbox], input[type=radio] { position:absolute; top:0; left:0; opacity:0; }

/* Add in replacement, not supported in IE7 and below */
input[type=checkbox] + label:before, input[type=radio] + label:before {
	content: "";
	display:block;
	float:left;
	border:1px solid #C8C8C8;
	box-sizing: border-box;
	width:20px;
	height:20px;
	margin-left:-30px;
}

input[type=radio] + label:before { border-radius:10px; }

/* IE 8 doesn't support this bit, we will need a polyfill for IE8 */
input[type=checkbox]:checked + label:before { background:url(checkbox-select.png) no-repeat center center; }
input[type=radio]:checked + label:before { background:url(radio-select.gif) no-repeat center center; }

/* this is for survey quesitons */
label.empty { display:none; }

.rating label.empty, .netpromoterscore label.empty { display:block; }

.rating input[type=radio] + label.empty:before,
.netpromoterscore input[type=radio] + label.empty:before,
.selectgroup input[type=radio] + label.empty:before,
.rankinggroup input[type=radio] + label.empty:before{ 
	content: "";
	float:none;
	display:block;
	border:1px solid #C8C8C8;
	border-radius:10px;
	box-sizing: border-box;
	width:20px;
	height:20px;
	margin:0 auto;
}

.selectgroup input[type=checkbox] + label.empty:before {
	content: "";
	float:none;
	display:block;
	border:1px solid #C8C8C8;
	box-sizing: border-box;
	width:20px;
	height:20px;
	margin:0 auto;
}

.vertical input[type=radio] + label.empty:before, .vertical label.empty { float:left; margin:0; }

.rankinggroup label.empty {  margin:0 auto; }

.checkbox input,
.checkboxlist input,
.radiolist input,
.vertical input { float:left; margin-top:2px; }

label { font-size:14px; line-height:20px; }

.checkbox label,
.checkboxlist label,
.radiolist label,
.vertical label,
.booleanfield label { display:block; margin-left:30px; color: #4A4F53; }

.radiolist td,
.checkboxlist td,
.booleanfield td { padding:0 20px 10px 0; }

div.other { overflow:hidden; margin-bottom:10px; }
.other label { margin-bottom:5px; }


/*-- FORM STYLING ---------------------------*/
#form .validation { display:none; }

#form .field { margin-bottom:20px; }

#form .beside .field-text { float:left; width:150px; }
	#form .field .field-text p { margin-bottom:5px; }
	#form .beside .field-text p { margin-bottom:0; margin-top:5px; }
	
	#form .beside .field-value { margin-left:180px; }
	
	#form .error { font-size:13px; color:red; padding:5px 0; }
	#form .beside .error { margin-left:180px; }
	
	
/*-- EVENT STYLING -------------------------*/
#event .validation { display:none; }

#event .creditCardPayment .validation { display:block;  }
	#event .creditCardPayment .validation div.fail { border:1px solid red; padding:10px; margin-bottom:20px !important; color:red !important; } 
	#event .creditCardPayment .validation p { font-weight:600; font-size:12px; margin-bottom:5px; }
	#event .creditCardPayment .validation ol { margin:0; font-size:12px; padding-left:20px; }
	#event .creditCardPayment .validation li { margin-bottom:5px; }
	#event .creditCardPayment .validation li label { font-size:12px; }
	#event .creditCardPayment .validation li:last-child { margin:0; }

#event .field { margin-bottom:20px; }
	
#event .beside .field-text { float:left; width:150px; }
	#event .field .field-text p { margin-bottom:5px; }
	#event .beside .field-text p { margin-bottom:0; margin-top:5px; }
	
	#event .beside .field-value { margin-left:180px; }
	
	#event .error { font-size:13px; color:red; padding:5px 0; }
	#event .beside .error { margin-left:180px; }
	#event #Captcha .error { margin-left:0; }

.additional-contacts, #registration-details .additional { margin-bottom:30px; padding-top:30px; border-top:1px dotted #C8C8C8; }
	.additional-contacts .contact-heading { margin-bottom:20px; }

#Invoice { margin-bottom:30px; }
	#Invoice table td { border-bottom:1px solid #C8C8C8; padding:10px 0; }
		#Invoice table td.amount { text-align:right; }
		#Invoice table td.total { font-weight:600; }

#payment-selector { margin-bottom:15px; overflow:hidden; }		
.invoice-button,.creditcard-button { float:left; margin-right:10px; } 

#Card_Help { margin-bottom:30px; }

#Card_Expiry .select2-container { width:250px; }
#s2id_ExpiryMonth { margin-right:15px; }

#registration-details .field-text { width:200px; }
#registration-details .field-value { margin-left:230px !important; font-size:14px; line-height:18px; font-weight:600; border:1px solid #C8C8C8; padding:5px 10px; height:30px; box-sizing:border-box; }


/*-- SURVEY STYLING ---------------------*/
#survey .validation, #survey .validation li { display:none; }

#survey .validation { color:red; margin-bottom:20px;  }
#survey .validation p { font-weight:bold; margin: 0; }
#survey .validation li { margin-bottom:10px; }

.progressbar .background { border:1px solid #C8C8C8; height:7px; border-radius:5px; }
	.progressbar .background .bar { background:#C8C8C8; height:7px; }
.progressbar p { font-size:12px; line-height:16px; text-align:right; }

#survey #PageIntroText, #survey .field, #survey .htmlsection {  margin-bottom:30px; padding-bottom:30px; border-bottom:1px dotted #C8C8C8; }

	
#survey .beside .q-container { float:left; width:150px; }
	
	#survey .beside .survey-answer { margin-left:180px; }

#survey .field .error { font-size:13px; color:red; padding:5px 0; }
#survey .beside .error { margin-left:180px; }
	
.number { float:left; font-size:14px; line-height:18px; }
.question.push-left { margin-left:30px; }	

table.rating { background:#FFF; }
.rating td, .rating th { padding:10px; border:1px solid #C8C8C8; }
.rating input, .rating label { display:block; margin:0 auto; text-align:center; }

.vertical input { float:left; margin-top:2px; }
.vertical label { font-weight:normal; margin:0 0 0 30px; text-align:left; }

/*selectgroup questions */
table.selectgroup, table.rankinggroup, table.netpromoterscore { background:#FFF; width:100%; }
.selectgroup td, .selectgroup th, .rankinggroup td, .rankinggroup th, .netpromoterscore td, .netpromoterscore th { padding:10px; border:1px solid #C8C8C8; }

.netpromoterscore thead tr:first-child th:first-child { border-right:none; }
.netpromoterscore thead tr:first-child th:last-child { border-left:none; }

.selectgroup thead th, .rankinggroup thead th, .netpromoterscore thead th { text-align:center; }
.selectgroup input, .selectgroup label, .rankinggroup input, .netpromoterscore input { display:block; margin:0 auto; text-align:center; }
.selectgroup input, .rankinggroup input, .netpromoterscore input { float:none; }

.textboxlist td { padding:5px; }
.textboxlist input { text-align:left; }

table th, table td { font-size:14px; line-height:18px; }

table thead th { font-weight:400; }
table tbody th { font-weight:700; }

.uq-rating-draggable-container, .uq-rating-droppable-container { list-style:none; padding:0; margin:0 0 10px; clear:left; }
.uq-rating-draggable-container .uq-draggable-item { background-color:#0077af; border-radius: 3px; cursor: move; float: left; margin: 0 10px 10px 0; padding: 10px; color:#fff; z-index:100;  }

.uq-rating-droppable-container li { margin-bottom:5px; border:1px solid #C8C8C8; }
.uq-rating-droppable-container table { width:100%; }
.uq-rating-droppable-container table td { border:none;  }
.uq-rating-droppable-container table td:first-child { width:20px; }
.uq-item-hover { background:#eee; }
.uq-droppable-desc { font-size:14px; line-height:18px; margin-bottom:10px; }

.uq-droppable-desc { text-align:left; }
.uq-rating-draggable-container .uq-item-number { display: none; }
.uq-rating-draggable-container .uq-draggable-item td{ border:none; padding:0 !important; width:auto; font-size:14px; line-height:18px; }
.uq-rating-droppable-container .uq-draggable-item td { width:auto; }

.slider select, .slider .select2-container { display:none; }

.selectedquestion-span-slider { display: block; margin: 0 auto 10px; text-align: center; }
.slider-container .left-span { float:left; }
.slider-container .right-span { float:right; }
.slider-container .slider-span { margin:0 50px; display:block; }

.slider-ui.ui-slider.ui-slider-horizontal {
    background-color: #eeeeee;
    border-radius: 5px;
    box-shadow: none;
    height: 10px;
    margin-top: 15px;
}

.slider-ui div.ui-slider-range {
    background: #6F94AA;
    border-radius: 5px 0 0 5px;
    height: 10px;
}

.slider-ui .ui-slider-handle.ui-state-default {
    background: #0077af none repeat scroll 0 0;
    border-radius: 15px;
    height: 20px;
    width: 20px;
    z-index: 1;
}

/*-- REPORT STYLING ---------------------*/
#asatHeader { margin-bottom:20px; }
.reportASAT { display:block; clear:both; font-size:14px; line-height:20px; margin-bottom:10px; }

#report .field { margin-bottom:30px; padding-bottom:30px; border-bottom:1px dotted #eee; }

#report .number { font-weight:bold; font-size:12px; margin-bottom:5px; }
#report .question, .map { margin-bottom:10px; }

#report .table-graph { width:100%; }
.table-graph td, .table-graph th { padding:10px; border:1px solid #eee; }

.table-graph th { font-weight:bold; }

#report .table-graph:first-child { margin-bottom:10px; }

#report .mobile-label { display:none; }

.dialog { position:fixed; min-width:420px; background-color:#FFFFFF; padding:30px; border-radius:20px; border:2px solid #ddd; }

.dialog h3 {  margin-top: 0; background: url(http://engage.ubiquity.co.nz/assets/images/icon-set/move_25.png) right 7px no-repeat; font-size: 30px; font-weight: bold; cursor: move; line-height:1.1em; }

.form-field { margin:0 0 15px; }
	
@media only screen and (max-width: 700px) {
	
}

@media only screen and (max-width: 480px) {
	

.wrap { min-height:100%; margin-bottom:-245px; }

.wrap:after { content: ""; display: block; }
.wrap:after, footer { height:245px; }

.logos { padding-bottom:0; text-align:center }

.footer-mbie, .footer-nzgovt { float:none; margin-bottom:20px; display:inline-block; }


.links, .copyright { float:none; text-decoration:none; text-align:center; }
	
	.links { margin-bottom:10px; }

.links a { display:inline-block; margin-right:0; padding:5px 10px; }	
	

/*-- Submit Buttons -------------------------*/
.engage-save-button { margin-right:5px;  }


/*-- DEFAULT INPUT STYLING ------------------*/
.radiolist td,
.checkboxlist td { display:block; padding:0 0 10px; }

.rating input[type=radio] + label.empty:before, .rating label.empty,
.netpromoterscore input[type=radio] + label.empty:before, .netpromoterscore label.empty{ float:left; margin:0; }


/*-- FORM STYLING ---------------------------*/
#form .beside .field-text { float:none; width:auto; margin-bottom:5px; }
	#form .field-text p { margin-top:0; }
	
	#form .field-value, #form .field .error { margin-left:0 !important; }
	
/*-- EVENT STYLING -------------------------*/
#event .beside .field-text { float:none; width:auto; margin-bottom:5px; }
	#event .field-text p { margin:0; }
	
	#event .beside .field-value, #event .beside .error { margin-left:0; }


	#Invoice table td { border-bottom:1px solid #C8C8C8; padding:10px 0; }
		#Invoice table td.amount { text-align:right; width:30%; }
		#Invoice table td.total { font-weight:600; }

#payment-selector { margin-bottom:15px; }		
.invoice-button,.creditcard-button { float:left; margin-right:10px; } 

#Card_Help { margin-bottom:30px; }

select#ExpiryMonth, select#ExpiryYear { width:100%; }
select#ExpiryMonth { margin-right:0; margin-bottom:10px; }

#registration-details .field-text { }
#registration-details .field-value { margin-left:0 !important; }


/*-- SURVEY STYLING ---------------------*/
#survey .beside .q-container { float:none; width:auto; }
	
#survey .beside .survey-answer, #survey .beside .error { margin-left:0; }


table.selectquestion  { width:100%; }
	table.rating thead, table.selectgroup thead, table.rankinggroup thead, table.netpromoterscore thead  { display:none; }
	
	table.rating, table.selectgroup, table.rankinggroup, table.netpromoterscore { border-bottom:1px solid #C8C8C8; }
	
	.rating td, .rating th, .selectgroup td, .selectgroup th, .rankinggroup td, .rankinggroup th, .radiolist td, .checkboxlist td, .netpromoterscore td  { display:block; width:auto !important; border-bottom:none; }
	
	.radiolist td, .checkboxlist td { padding:0 0 10px; }
	.rating td, .rating th, .selectgroup td, .selectgroup th, .rankinggroup td, .rankinggroup th, .netpromoterscore td, .netpromoterscore th { padding:5px 10px; }
	
	.uq-rating-droppable-container td { display:inline-block; padding:10px; }
	
	.radiolist input, .selectquestion input { float:left; margin-top:2px; }
	label.mobile-label { display:block !important; margin-left:30px; text-align:left; }
	
	.vertical label.mobile-label { display:none !important; }
	
	.spreadsheet label.mobile-label { margin:0 0 5px; }
	
#registration-details .field-text { float:none; max-width:none; }
#registration-details .field-value { margin-left:0; }

.selectgroup input[type=radio] + label.empty:before,
.rankinggroup input[type=radio] + label.empty:before,
.selectgroup input[type="checkbox"] + label.empty::before { float:left; }

}