/*
 * Copyright (c) Surveypal Ltd 2019. All rights reserved.
 *
 * This file is part of Surveypal.
 *
 * Last modification Jan 16, 2020 by Pauli.
 */

body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 24px;
	font-weight: normal;
	font-style: normal;
	text-transform: none;
	text-decoration: none;
	background-color: rgb(162, 166, 168);
}

.background
{
	background-image:      url('');
	background-position: center top;
	background-size: $background-size;
	background-repeat: $background-repeat;
	opacity: 1;
	-moz-opacity: 1;
}

.survey
{
	width: 100%;
	max-width: 100%;
	background-color: rgb(255, 255, 255);
	margin-left: auto;
	margin-right: auto;
	margin-top: 0em;
	margin-bottom: 3em;
	padding-top: 3em;
	padding-bottom: 3em;
	padding-left: 6%;
	padding-right: 6%;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-width: 1px;
	border-color: rgb(154, 154, 154);
}

.survey > .background
{
	background-image:      url('');
	background-position: center top;
	background-size: $page-background-size;
	background-repeat: $page-background-repeat;
	opacity: 1;
	-moz-opacity: 1;
}

.element:first-child
{
	margin-right: 6%;
}

.element.half
{
	width: 47%;
}

.element h1
{
	color: rgb(38, 38, 38);
	font-family: inherit;
	font-size: 48px;
	font-weight: normal;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: 54px;
	margin-top: 0em;
	margin-bottom: 0.1em;
}

.element h2
{
	color: rgb(38, 38, 38);
	font-family: inherit;
	font-size: 2em;
	font-weight: normal;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: 1em;
	margin-top: 0em;
	margin-bottom: 0.1em;
}

.element h3
{
	color: rgb(38, 38, 38);
	font-family: inherit;
	font-size: 1.3em;
	font-weight: normal;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: 1.3em;
	margin-top: 0em;
	margin-bottom: 0.2em;
}

.element h4
{
	color: rgb(38, 38, 38);
	font-family: inherit;
	font-size: 1em;
	font-weight: normal;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: 1em;
	margin-top: 0em;
	margin-bottom: 1em;
}

.element h5
{
	color: rgb(38, 38, 38);
	font-family: inherit;
	font-size: 0.8em;
	font-weight: normal;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: 1em;
	margin-top: 0em;
	margin-bottom: 1em;
}

.element p
{
	color: rgb(154, 154, 154);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
	margin-top: 0em;
	margin-bottom: 0em;
}

.field.checkbox
{
	border: 1px solid rgb(234, 234, 234);
	border-radius: 4px;
	background-color: rgb(250, 250, 250);
}

.field.checkbox label
{
	border-radius: 4px;
}

.field.checkbox label:after
{
	border-color: rgb(28, 108, 153);
}

.field.radio
{
	border: 1px solid rgb(234, 234, 234);
	background-color: rgb(250, 250, 250);
}

.field.radio label:after
{
	background: rgb(28, 108, 153);
}

.progress
{
	font-family: inherit;
	font-size: 7px;
	line-height: 1em;
	font-weight: normal;
	font-style: normal;
	text-transform: none;
	text-decoration: inherit;
	color: $page-number-color;
}

.progress .outer
{
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	background-color: rgba(0, 0, 0, 0.04);
}

.progress .inner
{
	background-color: rgb(28, 108, 153);
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding-top: 0.1em;
	padding-bottom: 0em;
	color: rgb(28, 108, 153);
}

.element.required .asterisk
{
	color: rgb(231, 0, 0);
}

.element.required > .heading > *:last-child:after
{
	color: rgb(231, 0, 0);
}

.warning
{
	color: rgb(231, 0, 0);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: normal;
	font-style: normal;
	text-transform: none;
	text-decoration: none;
	line-height: 24px;
}

a
{
	color: rgb(0, 128, 255);
}

input.text.small
{
	width: 100%;
}

textarea.text.large
{
	width: 100%;
	height: 120px;
}

input.text, textarea.text
{
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	color: rgb(28, 108, 153);
	background-color: rgb(250, 250, 250);
	border-color: rgb(234, 234, 234);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
	margin-top: 0em;
	margin-bottom: 0em;
	outline: none;
}

input.text:focus, textarea.text:focus
{
	background-color: $form-element-hover-background-color;
	border-color: $form-element-focus-border-color;
}

.controls button,
label.upload-button
{
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.controls button.secondary,
label.upload-button
{
	background-color: rgb(255, 255, 255);
	border: $button-border-width solid rgb(0, 0, 0);
	color: rgb(28, 108, 153);
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

.controls button.primary
{
	background-color: rgb(28, 108, 153);
	border: $button-border-width solid rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

.controls button.secondary:hover,
label.upload-button:hover
{
	background-color: rgba(28, 108, 153, 0.2);
	border-color: rgb(0, 0, 0);
	color: $secondary-button-hover-text-color;
}

.controls button.primary:hover
{
	background-color: rgba(28, 108, 153, 0.8);
	border-color: rgb(0, 0, 0);
	color: $primary-button-hover-text-color;
}

.element.eoption .label
{
	color: $option-color;
	font-family: $option-font-family;
	font-size: $option-font-size;
	font-weight: $option-font-weight;
	font-style: $option-font-style;
	text-transform: $option-text-transform;
	text-decoration: $option-text-decoration;
	line-height: $option-line-height;
	margin-top: $option-space-before;
	margin-bottom: $option-space-after;
}

.element.eoption .option:hover
{
	background-color: $form-element-hover-background-color;
}

.element.escale .tr.statement
{
	background-color: rgba(0, 0, 0, 0);
}

.element.escale .tr.statement:nth-child(2n+1)
{
	background-color: rgba(0, 0, 0, 0.04);
}

@media (min-width: 767px)
{
	.element.escale .tr.statement:nth-child(2n+1):hover,
	.element.escale .tr.statement:hover
	{
		background-color: $form-element-hover-background-color;
	}
}

.element.escale .topics
{
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
	margin-top: 0em;
	margin-bottom: 0em;
}

.element.escale .topics > .td,
.element.escale .shared-statement.mobile
{
	color: rgb(154, 154, 154);
}

.element.escale .options
{
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}

.element.escale .extreme
{
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}

.element.escale .shared-statement
{
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
	margin-top: 0em;
	margin-bottom: 0em;
}

.element.escale .extreme.left
{
	color: rgb(154, 154, 154);
}

.element.escale .extreme.right
{
	color: rgb(154, 154, 154);
}

.element.escale .question
{
	color: $statement-color;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

.element.escale .table .options
{
	color: rgb(154, 154, 154);
}

.element.escale .options .td
{
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

.element.eoption .select
{
	width: 100%;
}

.element.eoption .select:after
{
	border-color: rgba(51, 51, 51, 1) transparent transparent transparent;
	right: 0.5em;
	margin-right: 0.5em;
}

.element.eoption .select select
{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: $dropdown-corner-radius;
	background: rgb(28, 108, 153);
	color: rgba(51, 51, 51, 1);
	border: 1px solid rgb(28, 108, 153);
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
}

.element.eimageselection .option.selected
{
	background-color: $selected-image-option-color;
}

.element.eslider .statement .question
{
	font-family: $slider-statement-font-family;
	font-size: $slider-statement-font-size;
	font-weight: $slider-statement-font-weight;
	font-style: $slider-statement-font-style;
	text-transform: $slider-statement-text-transform;
	text-decoration: $slider-statement-text-decoration;
	line-height: $slider-statement-line-height;
	padding-top: $slider-statement-space-before;
	padding-bottom: $slider-statement-space-after;
	color: $statement-color;
}

.element.eslider .extremes
{
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	color: rgb(154, 154, 154);
}

.element.eslider .labels
{
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: inherit;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	color: rgb(154, 154, 154);
}

.element.eslider .tick .line
{
	border-left: 1px solid rgb(222, 226, 229);
}

.element.eslider .outer
{
	background-color: rgb(222, 226, 229);
	border: 1px solid rgb(222, 226, 229);
}

.element.eslider .inner
{
	background-color: rgb(28, 108, 153);
}

.element.eslider .switch a.handle
{
	background-color: rgb(28, 108, 153);
}

.element.eslider .disabled .switch a.handle
{
	background-color: rgb(222, 226, 229);
}

.element.eslider .switch div.shade
{
	background-color: rgb(222, 226, 229);
	border: 1px solid rgb(222, 226, 229);
}

.element.eslider .disabled .switch div.shade
{
	background-color: rgb(28, 108, 153);
	border: 1px solid rgb(222, 226, 229);
}

.poweredBy a:link, .poweredBy a:visited
{
	color: rgb(255, 255, 255);
}

/* IE10 + IE11  */
_:-ms-lang(x),
.element:first-child
{
	margin-right: calc(6%/2);
}

/* Edge */
_:-ms-lang(x),
_:-webkit-full-screen,
.element:first-child
{
	margin-right: calc(6%/2);
}.survey,h1,h2,h3, p, .option {
font-family:"Helvetica Neue", Helvetica, Ariail, sans-serif ! important;
    font-weight: 300 !important;
    letter-spacing: -0.015em;
    margin-bottom: 32px;
}

.row {
margin-bottom: 0;
}



.rows {
width: 100%;
max-width: 1000px;
margin: auto;
}


.controls {
width: 80%;
max-width: 700px;
margin: auto;
display: table;
}


.element.eimageselection .option.selected {
    opacity: 1;
    background-color: #333333;
    border-radius: 40px;
}


textarea {
    -webkit-font-smoothing: antialiased;
}


.controls button.primary, .controls button.secondary{

-webkit-box-shadow: 0 1px 2px rgba(38, 38, 38, 0.15);
-moz-box-shadow: 0 1px 2px rgba(38, 38, 38, 0.15);
box-shadow: 0 1px 2px rgba(38, 38, 38, 0.15);
overflow: hidden;
-webkit-font-smoothing: antialiased;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 0;
font-size: 16px;
font-weight: 700;
line-height: 24px;
padding: 12px 20px;
}

div[elementname='p0e2'], div[elementname='p0e3'] {
display:none;
}