/**
 * This style file contains basic styles for the basic components of a survey layout.
 */
body.survey {
	overflow-y: scroll;
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	font-family: Arial, Helvetica, Sans-Serif;
}

div.survey {
	overflow: visible;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

div.loading {
	width: 32px;
	height: 32px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin:-16px 0 0 -16px;
	visibility: hidden;
}

div.wrongInput {
	padding: 5px; 
	width: 300px; 
	height: 30px; 
	position: absolute; 
	vertical-align: middle;
	display: none; 
}

div.contentArea {
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 5px;
}

div.title {
	 
}

div.progressBarPanel {
	
}

div.continueLaterPanel {
	display: none;
}

div.continueLaterInformation {
	display: none;
}

div.surveyPassword {
	font-weight: bold; 
	color: #FF0000;	
}

div.sentResult {
	display: none;
}

div.sentReminderResult {
	display: none;
}

div.invisible {
	display: none;
}

div.email.reminder {
	display: none;
}

table {
	border: 0px;
	border-spacing: 0px;
	border-collapse: separate;
}

td {
	padding: 0px;
}

div.headword.container {
	display: table;
	width: 70%;
	/*border-collapse: collapse;*/
}

div.headword.row {
	width: 100%;
	padding-bottom: 15px;
	display: table-row;
}

div.headword.field {
	display: table-cell;
	min-width: 80%;
	max-width: 80%;
	width: 80%;
	height: 40px;
	text-align: left;
	vertical-align: middle;
}

div.headword.plus {
	display: table-cell;
	width: 20%;
	height: 40px;
	padding-left: 10px;
	text-align: left;
	vertical-align: middle;
}

input.itemText {
	height: 30px;
}

input.headword {
	width: 100%;
	box-sizing: border-box;
	height: 30px;
}

button.headword.button {
	box-sizing: border-box;
	width: 24px;
	min-height: 24px;
	font-size: 13.5px;
	font-weight: bold;
	vertical-align: middle;
	margin: 2px 0px 0px 0px;
	background-image: url(../../../../../../survey/img/plus.png);
	background-position: center center;
	background-repeat: no-repeat;
}

input:focus {
	border-color: #6b6ba6;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(107,107,166,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(107,107,166,0.6);
    background-color: #ffffff;
}

input:hover {
	border-color: #6b6ba6;
}

select:focus {
	border-color: #6b6ba6;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(107,107,166,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(107,107,166,0.6);
    background-color: #ffffff;
}

select:hover {
	border-color: #6b6ba6;
}

.survey.tooltip {
	text-align: justify;
	font-style: italic;
	color: #888888;
}


/* DIV-Table */
div.table {
    display: table;
    border-collapse: collapse;
}

div.tr {
    display: table-row;
}

div.td {
    display: table-cell;
    border: 0px;
    padding: 0px 0px 0px 0px;
}

/* Selector */

.selector {
	cursor: pointer;
}

/* Cookie */
div.cookie.warning {
	position: fixed;
	z-index: 10000;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 20px 5px 20px;
	width: 900px;
	background: #c7c7e1;
	border-radius: 3px 3px 0px 0px;
	-moz-border-radius: 3px 3px 0px 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	box-shadow: 2px 3px 14px 1px rgba(100,100,100,1);	
}

div.cookie.text {
	text-decoration: none;
	text-align: justify;
	font-size: 13px;
	font-weight: normal;
}

button.cookie.closer {
	background: #6b6ba6;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: .5px;
	cursor: pointer;
	width: 125px;
	height: 30px;
	border: 0px solid #000000;
	border-radius: 3px 3px 0px 0px;
	-moz-border-radius: 3px 3px 0px 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	box-shadow: 1px 2px 6px 0px rgba(100,100,100,1);
	transition: .3s ease-out;
}

/* Buttons */

.nextButtonButton.meanwhile {
	font-weight: normal;
	height: 25px;
}

/* Debug */
div.debug.information {
	position: fixed;
	z-index: 10000;
	top: 0px;
	left: 0px;
	right: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 20px 5px 20px;
	width: 100%;
	min-height: 74px;
	height: 74px;
	max-height: 74px;
	background: rgba(199,199,193,0.7);
	box-shadow: 2px 3px 14px 1px rgba(100,100,100,1);
	box-sizing: border-box;
}

div.debug.text {
	font-size: 55px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 30px;
    font-weight: bold;
    color: rgba(100,100,100,0.5);
}

.arrow {
	border: 6px solid #ffffff;
	font-size: 2px; line-height: 0; height: 0; padding: 0; margin: 0;
	margin-right: 10px;
}
.arrow.down {
	border-right-color:  transparent;
	border-bottom-color: transparent;
	border-left-color:   transparent;
}

.survey.server {
	width: 100%;
	height: 100%;
	z-index: 100;
	position: fixed;
	background: rgba(0,0,0,0.2);
}
.survey.server.message {
	width: 400px;
	height: 150px;
	position: relative;
	margin: auto;
	background: #ffffff;
	top: 40%;
	border: 1px solid #6b6ba6;
    border-radius: 4px;
    padding: 0px 10px 10px 10px;
}

.survey.finished {
	z-index: 100;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	background: rgba(22,22,22, 0.8);
}

.survey.finishMessage {
	position: absolute;
	left: 25%;
	top: 50%;
	width: 50%;
	height: 50px;
	text-align: center;
	color: rgba(246, 184, 138, 0.85);
	font-size: 20px;
	font-weight: bold;
}@CHARSET "utf-8";

@viewport {
	width: device-width;
	zoom: 1.0;
}

/*
 * General styles
 */
html {
  height:100%;
  width:100%;
}

body {
	background-color: #FFFFF6;
	color: #0b023d;
	background-image: url(../../../../../../survey/img/bg_verlauf_bottom2.png);
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: bottom;
}

div.background {
	min-height: 300px;
	background-image: url(../../../../../../survey/img/bg_verlauf2.png);
	background-repeat: repeat-x;
	background-attachment: fixed;
	position: absolute; 
	left: 0px; 
	right: 0px;
}

div.albWrongInput {
	border: 1px solid #6b6ba6;
	background-color: #c7c7e1;
}

div.contentArea div.albContentArea {
	background-color: #FFFFF6;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
	-webkit-box-shadow: 2px 3px 14px 1px rgba(170,170,170,1);
	-moz-box-shadow: 2px 3px 14px 1px rgba(170,170,170,1);
	box-shadow: 2px 3px 14px 1px rgba(170,170,170,1);
	padding: 20px;
	width: 900px;
}

div.title div.albTitle {
	/*padding: 3px 0px 3px 0px;*/
	padding: 0px 20px 0px 20px;
	background-color: #6b6ba6;
}

table.albTitle {
	width: 100%;
	border-spacing: 0px;
	border-collapse: separate;
}

td.albTitle {
	padding: 0px;	
}

td.albTitleLeft {
	background-image: url(../../../../../../survey/img/ule.png); 
	background-repeat: no-repeat;
	width: 469px; 
	height: 64px;	
}

td.albTitleCenter {
	height: 64px;	
}

td.albTitleRight {
	width: 350px; 
	height: 64px;
	text-align: right;
}

div.contentArea div.albBorder {
	
}

div.progressBarPanel div.albProgressBarPanel {
	height: 20px;
	display: flex;
	align-items: center;
}

div.progressPercentage {
	width: 75px;
	height: 10px;
	text-align: left;
	font-size:11px;
	color:#6b6ba6;
	white-space:nowrap;
	float: left;
}

div.progressBar {
	width: 675px;
	height: 12px;
	background-color: #f6b88a;
	border: 1px solid #000000;/*#6b6ba6*/
	float: left;
	font-size: 0.1em; /* Needed for IE, otherwise small height not applied. */
	margin: 0px 10px 0px 10px;
	overflow: hidden;
}

div.survey.progressBar.colorVisited {
	background-color: #6b6ba6;
}

div.progressBarState {
	height: 10px;
	background-color: #6b6ba6;
	float: left;
	text-align: left;
	padding-left: 5px;
	vertical-align: middle;
	font-size: 10px;
	color: #ffffff;
	/*font-size: 0.1em; /* Needed for IE, otherwise small height not applied. */
}

div.progressPage {
	width: 75px; 
	height: 20px; 
	text-align: right; 
	vertical-align: middle; 
	font-size: 11px;
	color: #6b6ba6;
	white-space: nowrap;
	float: left;
	display: none;
}

div.continueLaterPanel {
	width: 100%;
	margin: 10px 0px 10px 0px;
}

a.button {
	color: #EF7113;
	text-decoration: none;
	font-weight: normal;
	cursor: pointer;
}

div.continueLaterStoredTextTop {
	text-align: justify;
	margin-bottom: 15px;
}

div.continueLaterStoredPassword {
	text-align: justify;
	margin-bottom: 15px;
	margin-right: 10px;
	float: left;
}

div.continueLaterStoredTextBottom {
	text-align: justify;
	margin-bottom: 15px;
	clear: both;
}

div.albSentResult {
	clear: both;
}

input.continueLaterEmail {
	width: 250px;
}




h1 {
	color:#7a759d;
	font-size:30px;
}

h3 {
  width:100%;
  border-bottom:1px solid #c7c7e1;
  padding-left:0px;
  font-size:18px;
  font-weight:normal;
}

a:link { 
	color: #EF7113;
	text-decoration: none;
	font-weight: normal;
}

a:visited { 
	color: #EF7113; 
	text-decoration: none; 
	font-weight: normal; 
}

a:hover   { 
	color: #0b023d; 
	text-decoration: underline; 
}

a:active  { 
	color: #0b023d; 
	text-decoration: underline; 
}

/*
 * Table styles
 */
 
td {
	vertical-align: middle; 
	height: 2em;
}

/*
 * Ordinary table
 */
table.normal {
	border-spacing: 0px;
	padding: 4px;
	border-collapse: collapse;
	width: 100%;
}

table.normal td {
	padding-bottom: 5px;
	padding-top: 5px;
	height: 35px;
}

table.normal tr:first-child {
	padding-left: 0px;
}

table.normal tr:last-child {
	padding-right: 0px;
}

td.itemCheckRadioOnRight {
	width: 20px;
	max-width: 100px;
	min-width: 20px;
	padding-right: 19px;
	text-align: right;
}

td.itemCheckRadioOnLeft {
	width: 40px;
	max-width: 100px;
	min-width: 40px;
	padding-right: 15px;
	text-align: right;
}

td.itemContent {
	width: 100%;
	text-align: left;
}

select.itemStandalone {
	padding-left: 4px;
}

input.itemStandalone {
	padding-left: 4px;
}

input.minItemText {
    text-align: center;
    width: 20px;
    box-sizing: border-box;
    min-width: 30px;
    font-size: 14px;
    min-height: 30px;
    border-radius: 4px;
}

textarea.itemText {
	padding-left: 8px;
	padding-right: 8px;
	width: 100%;
	box-sizing: border-box;
}

td.itemOnCenter {
	text-align: center;
	min-width: 30px;
	width: 30px;
	max-width: 35px;
}

td.itemOnLeft {
	text-align: right;
	padding-right: 0px;
	min-width: 50px;
	width: 50px;
	max-width: 50px;
}

td.itemRatingScaleHeader {
	vertical-align: bottom;
  	font-size: 8pt;
  	font-style: italic;
}

td.itemRatingScale {
	vertical-align: middle;
	font-size: 8pt;
	font-style: italic;
	min-width: 30px;
}

td.itemBorder {
	border-bottom: 1px solid #c7c7e1;
}

tr.itemDifferentRows:nth-child(odd) {
	background-color: #E9E9FA;
}

tr.itemDifferentRows:nth-child(even) {
	background-color: #FFFFF6;
}

div.container {
    padding-bottom: 10px;
}

div.failureMessage {
	background-color: #F78181;
  	border: 3px solid #6b6ba6;
  	margin: 15px 0px 25px 0px;
  	font-weight: bold;
	padding: 5px 15px 5px 15px;
}

div.itemTopBottomPadding {
	padding-top: 5px;
	padding-bottom: 5px;
}

img.inner {
	float: right;
	padding-left: 15px;
	padding-right: 15px;
}

div.clear {
	clear: both;
	height: 0px;
	max-height: 0px;
	min-height: 0px;
}

div.remainingCharacters {
	//background-color: rgb(255, 255, 153);
	//border: 1px solid rgb(51, 41, 0);
	//border-radius: 50%;
	font-size: 10px;
	color: #6b6ba6;
	width: 100px;
	height: 15px;
	font-weight: bold;
	text-align: right;
	vertical-align: middle;
	line-height: 15px;
	display: block;
	border: 1px solid #c7c7e1;
}

/*
 * Item styles
 */
div.item {
	background-color: #FFFFF6;
	border: 1px solid #6b6ba6;
	border-radius: 4px;
	margin: 15px 0px 25px 0px;
	padding: 0px;
}

div.itemquestion {
	font-weight: bold;
	margin: 0px;
	padding: 10px 15px 10px 15px;
	border-bottom: 1px solid #6b6ba6;
	border-radius: 4px 4px 0px 0px;
	background-color: #c7c7e1;
}

div.itemslidedown {
  font-weight: bold;
  margin: 0px;
  padding: 0px 15px 0px 15px;
  max-height: 25px;
  background-color: #c7c7e1;
}

div.itemslidedown:hover {  
  background-color: #6b6ba6;
  cursor: pointer;
}

div.itemanswerslidedown {
  margin: 0px;
  padding: 15px;
  text-align: left;
  border-top: 1px solid #6b6ba6;
}

div.itemanswer {
  margin: 0px;
  padding: 15px;
  text-align: left;
}

/*
 * Input field styles
 */
.itemfield {
	border: 1px solid #c7c7e1;
	border-radius: 4px;
	background-color: #FFFFF6;
	font-family: Arial, Helvetica, Sans-Serif;
	min-width: 250px;
	min-height: 30px;
	font-size: 14px;
	padding-left: 8px;
	padding-right: 8px;
	box-sizing: border-box;
}

input.itemfieldRadioCheck {
  padding: 2px;
}

select.itemfield {
	font-size: 14px;
	color: #0b023d;
	min-width: 100px;
	width: 100%;
	max-width: 250px;
	min-height: initial;
	border-radius: 4px;
	padding-top: 5px;
	padding-bottom: 5px;
	max-height: 30px;
}

input[type="checkbox"] {
	transform: scale(1.25);
	box-sizing: border-box;
	margin: 0px 3px 0px 4px;
}

input[type="radio"] {
	transform: scale(1.25);
	box-sizing: border-box;
}

input.continuePassword {
	border: 1px solid #c7c7e1;
	border-radius: 4px;
	background-color: #FFFFF6;
	font-family: Arial, Helvetica, Sans-Serif;
	min-width: 50px;
	width: 50px;
	max-width: 50px;
	min-height: 30px;
	font-size: 14px;
	padding-left: 8px;
	padding-right: 8px;
	box-sizing: border-box;
}

input.continuePassword:hover {
    border-color: #6b6ba6;
}

input.continuePassword:focus {
	border-color: #6b6ba6;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(107,107,166,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(107,107,166,0.6);
    background-color: #ffffff;
}

/*
 * Button styles
 */

table.button {
  margin-top: 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
}

input.button {
  width: 200px;
  margin: 0px 20px 0px 0px;
  background-color: #c7c7e1;
  border: 1px solid #6b6ba6;
  box-sizing: border-box;
}

button.button {
	width: 200px;
	min-height: 30px;
	margin: 0px 20px 0px 0px;
	background-color: #c7c7e1;
	border: 1px solid #6b6ba6;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 14px;
}

/*
 * Link styles
 */
div.evaluation.link {
  background-color: #FFFFF6;
  border: 1px solid #6b6ba6;
  margin: 15px 5px 25px 5px;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}

div.evaluation.link:hover {
	background-color: #c7c7e1;
}

/*
 * Text supplement styles
 */
div.choices {
	background-color: #ffffff;
	color: #000000;//#c7c7e1;
	width: 100px;
	height: 150px;
	text-align: left;
	vertical-align: middle;
	display: block;
	border: 1px solid #6b6ba6;
	position: absolute; 
}

table.choices {
	width: 100%;
	border: 0px;
	border-spacing: 0px;
	padding: 0px;
	border-collapse: collapse;
}

td.choices {
	 height: 28px;
	 width: 100%;
	 vertical-align: middle;
	 padding-left: 5px;
	 padding-right: 5px;
}

td.choices:hover {
	background-color: #6b6ba6;
	color: #ffffff;
	cursor: pointer;
}

/*
 * Variable styles
 */
select.itemfield.systemVariable {
	background-color: rgb(124, 239, 198);
}

.systemVariable {
	background-color: rgb(124, 239, 198);
}

div.systemVariablePanel {
	background-color: rgb(124, 239, 198);
	border: 1px solid #6b6ba6;
	margin: 15px 5px 25px 5px;
	padding: 10px;
	text-align: justify;
	font-weight: bold;
	vertical-align: middle;
	display: none;
}

img.albFsu {
	margin-right: -20px;
}

/*
 * Grid 30 tables
 */
div.table.grid30 {
	padding-top: 0px;
	padding-bottom: 0px;
}

div.tr.grid30 {
	min-height: 40px;
	height: 40px;
	max-height: 40px;
	box-sizing: content-box;
}

div.tr.grid30.differ:nth-child(odd) {
	background-color: #E9E9FA;
}

div.tr.grid30.differ:nth-child(even) {
	background-color: #FFFFF6;
}

div.td.grid30 {
	min-height: 30px;
	height: 30px;
	max-height: 30px;
	box-sizing: content-box;
	vertical-align: middle;
}

div.td.grid30.rating.number {
	text-align: right;
	color: #c7c7e1;
	width: 30px;
	min-width: 30px;
	max-width: 30px;
}

div.td.grid30.rating.check {
	width: 20px;
	max-width: 200px;
	min-width: 20px;
}

div.td.width100 {
	width: 100%;
}

div.td.minWidth300px {
	min-width: 300px;
}

div.grid.grid30 {
	display: flex;
	min-height: 30px;
	height: 30px;
	max-height: 30px;
	align-items: center;
}

div.grid.gridPadding10 > * {
	padding-bottom: 10px; 
}

div.grid.gridPadding20 > * {
	padding-bottom: 20px; 
}

/*div.grid.gridPadding20 > *:first-child {
	padding-top: 0px; 
}*/

div.grid.gridPadding40 > * {
	padding-top: 40px; 
}

/*div.grid.gridPadding40 > *:first-child {
	padding-top: 0px; 
}*/

div.grid.gridPadding0 > * {
	padding: 0px; 
}

div.td.rightPadding15 {
	padding-right: 15px;
}

div.td.rightPadding45 {
	padding-right: 45px;
}

div.td.bottomBorder {
	border-bottom: 1px solid #c7c7e1;
}

div.td.justifyAlign {
	text-align: justify;
}

div.td.leftAlign {
	text-align: center;
}

div.td.rightAlign {
	text-align: right;
}

div.td.centerAlign {
	text-align: center;
}

div.table.width100 {
	width: 100%;
}

div.td.grid30.verticalTop {
	vertical-align: top;
}

div.description {
	text-align: justify;
	padding: 0px 0px 30px 0px;
}

div.description.paddingTop30 {
	padding-top: 30px;
}

div.description.paddingBottom10 {
	padding-bottom: 10px;
}

div.tooltip {
	text-align: justify;
	font-style: italic;
	color: #888888;
	padding: 30px 0px 0px 0px;
}


/*
 * Rating
 */
tr.rating {
	
}
tr.rating.different:nth-child(odd) {
	background-color: #E9E9FA;
}

tr.rating.different:nth-child(even) {
	background-color: #FFFFF6;
}
 
td.rating.number {
	color: #c7c7e1;
}

td.rating.header {
	font-size: 8pt;
  	font-style: italic;
}

td.rating.borderLeft {	
	border-left: 1px solid #c7c7e1;
}

td.rating.borderBottom {
	border-bottom: 1px solid #c7c7e1;
}

td.rating.verticalTop {
	vertical-align: top;  	
}

td.rating.verticalMiddle {
	vertical-align: middle;  	
}

td.rating.verticalBottom {
	vertical-align: bottom;  	
}

td.rating.alignLeft {
	text-align: left;
}

td.rating.alignCenter {
	text-align: center;
}

td.rating.alignRight {
	text-align: right;	
}

td.rating.s20 {
	min-width: 20px;
	width: 20px;
	max-width: 20px;
}

td.rating.s30 {
	min-width: 30px;
	width: 30px;
	max-width: 30px;
}

td.rating.s50 {
	min-width: 50px;
	width: 50px;
	max-width: 50px;
}

td.rating.s100P {
	width: 100%;
}

td.rating.paddingLeft0 {
	padding-left: 0px;
}

td.rating.paddingLeft10 {
	padding-left: 10px;
}

td.rating.paddingRight0 {
	padding-right: 0px;
}

td.rating.paddingRight15 {
	padding-right: 15px;
}

td.rating.paddingRight20 {
	padding-right: 20px;
}




/*
 * Debug Context Menu
 */
td.debugContextMenuItem {
	padding: 5px;
	color: #000000;
	background-color: rgba(20,20,20,0.6);
}
td.debugContextMenuItem:hover {
	color: #ffffff;
	background-color: rgba(120,120,120,0.3);
	cursor: pointer; 	
}