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

body
{
	font-family: Calibri, sans-serif;
	font-size: 18px;
	line-height: 22px;
	font-weight: normal;
	font-style: normal;
	text-transform: none;
	text-decoration: none;
	background-color: rgba(246, 246, 246, 1);
}

.background
{
	background-image:      url(https://cdn.surveypal.com/media/H71NOcv4MVMUVvdEShL2YyWUgsoIDv3qlSXpm8-2YUlJLLQTcVXhdEZHeRl-qyKA);
	background-position: center top;
	background-size: $background-size;
	background-repeat: $background-repeat;
	opacity: 1;
	-moz-opacity: 1;
}

.survey
{
	width: 90%;
	max-width: 960px;
	background-color: rgba(246, 243, 243, 0.9);
	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: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-width: 1px;
	border-color: rgba(238, 238, 238, 1);
}

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

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

.element.half
{
	width: 49%;
}

.element h1
{
	color: rgba(130, 132, 146, 1);
	font-family: inherit;
	font-size: 2.6em;
	font-weight: normal;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: 1em;
	margin-top: 0em;
	margin-bottom: 0.1em;
}

.element h2
{
	color: rgba(85, 85, 85, 1);
	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: rgba(51, 51, 51, 1);
	font-family: inherit;
	font-size: 1.2em;
	font-weight: normal;
	font-style: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	line-height: 1em;
	margin-top: 0em;
	margin-bottom: 1em;
}

.element h4
{
	color: rgba(51, 51, 51, 1);
	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: rgba(51, 51, 51, 1);
	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: rgba(66, 66, 66, 1);
	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 rgba(204, 204, 204, 1);
	border-radius: 4px;
	background-color: rgba(238, 238, 238, 1);
}

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

.field.checkbox label:after
{
	border-color: rgba(51, 51, 51, 1);
}

.field.radio
{
	border: 1px solid rgba(204, 204, 204, 1);
	background-color: rgba(238, 238, 238, 1);
}

.field.radio label:after
{
	background: rgba(51, 51, 51, 1);
}

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

.progress .outer
{
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background-color: rgb(62, 62, 62);
}

.progress .inner
{
	background-color: rgba(236, 236, 236, 0.76);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	color: rgba(51, 51, 51, 1);
}

.element.required .asterisk
{
	color: rgba(255, 77, 77, 1);
}

.element.required > .heading > *:last-child:after
{
	color: rgba(255, 77, 77, 1);
}

.warning
{
	color: rgba(255, 77, 77, 1);
	font-family: Calibri, sans-serif;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	text-transform: none;
	text-decoration: none;
	line-height: 22px;
}

a
{
	color: rgba(0, 172, 238, 1);
}

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: rgba(51, 51, 51, 1);
	background-color: rgba(238, 238, 238, 1);
	border-color: rgba(204, 204, 204, 1);
	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: rgba(245, 245, 245, 1);
	border: $button-border-width solid rgba(204, 204, 204, 1);
	color: rgba(51, 51, 51, 1);
	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(245, 245, 245);
	border: $button-border-width solid rgba(204, 204, 204, 1);
	color: rgba(51, 51, 51, 1);
	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: rgb(245, 245, 245);
	border-color: rgba(204, 204, 204, 1);
	color: $secondary-button-hover-text-color;
}

.controls button.primary:hover
{
	background-color: rgb(245, 245, 245);
	border-color: rgba(204, 204, 204, 1);
	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.05);
}

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

@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: rgba(66, 66, 66, 1);
}

.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: rgba(66, 66, 66, 1);
}

.element.escale .extreme.right
{
	color: rgba(66, 66, 66, 1);
}

.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: rgba(66, 66, 66, 1);
}

.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: rgba(238, 238, 238, 1);
	color: rgba(51, 51, 51, 1);
	border: 1px solid rgba(204, 204, 204, 1);
	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: rgba(66, 66, 66, 1);
}

.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: rgba(66, 66, 66, 1);
}

.element.eslider .tick .line
{
	border-left: 1px solid rgba(204, 204, 204, 1);
}

.element.eslider .outer
{
	background-color: rgb(238, 238, 238);
	border: 1px solid rgba(204, 204, 204, 1);
}

.element.eslider .inner
{
	background-color: rgba(66, 66, 66, 1);
}

.element.eslider .switch a.handle
{
	background-color: rgba(66, 66, 66, 1);
}

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

.element.eslider .switch div.shade
{
	background-color: rgb(238, 238, 238);
	border: 1px solid rgba(204, 204, 204, 1);
}

.element.eslider .disabled .switch div.shade
{
	background-color: rgba(66, 66, 66, 1);
	border: 1px solid rgba(204, 204, 204, 1);
}

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

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

/* Edge */
_:-ms-lang(x),
_:-webkit-full-screen,
.element:first-child
{
	margin-right: calc(2%/2);
}
.controls button.primary, .controls button.secondary, label.upload-button
{
	-webkit-box-shadow: 0 0 0 1px rgba(218, 243, 253, 0), inset 0px 1em 5px 1px rgba(255, 255, 255, 0.45);
	-moz-box-shadow:    0 0 0 1px rgba(218, 243, 253, 0), inset 0px 1em 5px 1px rgba(255, 255, 255, 0.45);
	box-shadow:         0 0 0 1px rgba(218, 243, 253, 0), inset 0px 1em 5px 1px rgba(255, 255, 255, 0.45);
}
.controls button.primary:hover, .controls button.secondary:hover, label.upload-button:hover
{
	-webkit-box-shadow: 0 0 10px 2px rgba(218, 243, 253, 1), inset 0px 1em 5px 1px rgba(255, 255, 255, 0.45);
	-moz-box-shadow:    0 0 10px 2px rgba(218, 243, 253, 1), inset 0px 1em 5px 1px rgba(255, 255, 255, 0.45);
	box-shadow:         0 0 10px 2px rgba(218, 243, 253, 1), inset 0px 1em 5px 1px rgba(255, 255, 255, 0.45);
}
.controls button.primary:active, .controls button.secondary:active, label.upload-button:active
{
	-webkit-box-shadow: 0 0 10px 1px rgba(218, 243, 253, 0), inset 0px 1px 1px 0 rgba(0, 0, 0, 0.75);
	-moz-box-shadow:    0 0 10px 1px rgba(218, 243, 253, 0), inset 0px 1px 1px 0 rgba(0, 0, 0, 0.75);
	box-shadow:         0 0 10px 1px rgba(218, 243, 253, 0), inset 0px 1px 1px 0 rgba(0, 0, 0, 0.75);
}
.field.radio
{
	-webkit-box-shadow: inset 0px 0.5em 5px 1px rgba(255, 255, 255, 0.65);
	-moz-box-shadow:    inset 0px 0.5em 5px 1px rgba(255, 255, 255, 0.65);
	box-shadow:         inset 0px 0.5em 5px 1px rgba(255, 255, 255, 0.65);
}
.field.checkbox
{
	-webkit-box-shadow: inset 0px 0.5em 5px 1px rgba(255, 255, 255, 0.65);
	-moz-box-shadow:    inset 0px 0.5em 5px 1px rgba(255, 255, 255, 0.65);
	box-shadow:         inset 0px 0.5em 5px 1px rgba(255, 255, 255, 0.65);
}
.element.eoption .select select
{
	-webkit-box-shadow: inset 0px 0.7em 1.3em 1px rgba(255, 255, 255, 0.85);
	-moz-box-shadow:    inset 0px 0.7em 1.3em 1px rgba(255, 255, 255, 0.85);
	box-shadow:         inset 0px 0.7em 1.3em 1px rgba(255, 255, 255, 0.85);
}
input.text, textarea.text
{
	-webkit-box-shadow: inset 0px 0.2em 5px 0 rgba(0, 0, 0, 0.05);
	-moz-box-shadow:    inset 0px 0.2em 5px 0 rgba(0, 0, 0, 0.05);
	box-shadow:         inset 0px 0.2em 5px 0 rgba(0, 0, 0, 0.05);
}
.background{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}