.survey {
	font-family: 'spar-regular',Arial,sans-serif;
	font-weight: 500;
	line-height: 1.1;
	color: #444;
	background-color:#ffffff;
	padding:25px
}
.survey select {
	border: 1px solid #ccc;
	height: 40px;
	font-size: 18px;
}
.survey h2 {
	margin-bottom: 15px;
	color:#444!important;
	font-size:22px;
}
.survey .answer {
	padding: 10px 0px 5px 20px;
	background-color: #fff;
	display: flex;
	/* align-content: flex-start; */
	/* align-items: flex-start; */
}
.survey .answer:has(input.free_choice_input[type="email"]) {
	padding: 10px!important;
	margin-bottom: 20px;
}
.survey .error {
	margin-bottom: 10px;
	color: #ff4444;
	background-color: #fff;
	padding: 5px;
	font-size: 16px;
	font-weight: 600;
}
.survey .question, .survey .response {
	margin-bottom: 10px;
	padding: 20px;
	background-color: #f6f4f1;
}
.survey .dropdown_choice select {
	width: 100%;
	appearance: none; /* Entfernt die native Pfeildarstellung */
	-moz-appearance: none; /* Für Firefox */
	-webkit-appearance: none; /* Für Safari und Chrome */
	width: 100%;
	padding: 10px;
	font-size: 18px;
	font-weight: normal;
	border: 1px solid #ccc;
	border-radius: 0px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 429.3l22.6-22.6 192-192L493.3 192 448 146.7l-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192L256 429.3z' fill='%23000000'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 18px;
	cursor: pointer;
	padding-left: 2em;
}
.survey .dropdown_choice select:focus{
	outline:none;
	border:none;
}
.survey .dropdown_choice select option {
	background-color: white; /* Standard-Hintergrund */
	color: black;
	margin-left: 20px;
}
.survey .dropdown_choice select option:first-child {
	background-color: white; /* Standard-Hintergrund */
	color: black;
	font-style:italic;
}
.survey .dropdown_choice select option:hover {
	/* background-color: #f0f0f0; */
}
.survey .dropdown_choice select option:checked{
	background: #fff!important;
}
.survey .dropdown_choice select option:focus{
	background: #fff!important;
}
.survey .dropdown_choice select option:hover {
	box-shadow: 0 0 10px 100px #000 inset;
	accent-color:red;
	appearance: none; /* Entfernt die native Pfeildarstellung */
	-moz-appearance: none; /* Für Firefox */
	-webkit-appearance: none;
	background: #fff!important;
	background-image: linear-gradient(45deg, black, transparent);
	box-shadow: 0 0 10px 100px #1882A8 inset;
}
.survey .dropdown_choice select:focus {
	border-color: #666;
	outline: none;
}
.survey .question .progressbar {
	border-radius: 0px;
	margin-bottom: 14px;
	background-color: #f6f4f1;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	height: 30px;
	max-width: 100%;
}
.survey .question .progressbar > div {
	background-color: #dd0000 !important;
	height: 30px;
	border-radius: 0px;
	position: relative;
	top: 0;
	overflow: visible;
	display: flex;
	justify-content: flex-end;
	min-width: fit-content;
}
.survey .question .progressbar > div > span {
	box-sizing: border-box;
	color: #fff;
	display: block;
	font-weight: bold;
	line-height: 33px;
	font-size: 18px;
	margin-right: 5px;
	margin-left: 5px;
overflow: visible;
	text-overflow: initial;
	white-space: nowrap;
	position: relative;
	top: 0;
}
.survey input[type=checkbox]:not(old),
.survey input[type=radio   ]:not(old){
	width: 2em;
	margin    : 0;
	padding   : 0;
	font-size: 1em;
	opacity   : 0;
}
.survey input[type=checkbox]:not(old) + label,
.survey input[type=radio   ]:not(old) + label{
	margin-left  : -2em;
	line-height  : 1.5em;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	display: flex;
	max-width: 100%;
	width: 100%;
}
.survey input[type=checkbox]:not(old) + label > span:first-child{
	display          : inline-block;
	width: 20px;
	height: 20px;
	margin: 0.25em 1.75em 0.25em 0.25em;
	border           : 0.0625em solid rgb(192,192,192);
	border-radius: 0px;
	background: #f6f4f1;
	background-image :    -moz-linear-gradient(#f6f4f1,#f6f4f1);
	background-image :     -ms-linear-gradient(#f6f4f1,#f6f4f1);
	background-image :      -o-linear-gradient(#f6f4f1,#f6f4f1);
	background-image : -webkit-linear-gradient(#f6f4f1,#f6f4f1);
	background-image :         linear-gradient(#f6f4f1,#f6f4f1);
	vertical-align: bottom;
}
.survey input[type=radio]:not(old) + label > span:first-child{
	display          : inline-block;
	width: 20px;
	height: 20px;
	margin: 0.25em 1.75em 0.25em 0.25em;
	border           : 0.0625em solid rgb(192,192,192);
	border-radius: 50em;
	background: #f6f4f1;
	background-image :    -moz-linear-gradient(#f6f4f1,#f6f4f1);
	background-image :     -ms-linear-gradient(#f6f4f1,#f6f4f1);
	background-image :      -o-linear-gradient(#f6f4f1,#f6f4f1);
	background-image : -webkit-linear-gradient(#f6f4f1,#f6f4f1);
	background-image :         linear-gradient(#f6f4f1,#f6f4f1);
	vertical-align: bottom;
}
.survey input[type=checkbox]:not(old):checked + label > span:first-child{
	background-image :    -moz-linear-gradient(#f6f4f1,#f6f4f1);
	background-image :     -ms-linear-gradient(rgb#f6f4f1,#f6f4f1);
	background-image :      -o-linear-gradient(#f6f4f1,#f6f4f1);
	background-image : -webkit-linear-gradient(#f6f4f1,#f6f4f1);
	background-image: linear-gradient(#f6f4f1,#f6f4f1);
}
.survey input[type=radio]:not(old):checked + label > span:first-child{
	background-image :    -moz-linear-gradient(#f6f4f1,#f6f4f1);
	background-image :     -ms-linear-gradient(rgb#f6f4f1,#f6f4f1);
	background-image :      -o-linear-gradient(#f6f4f1,#f6f4f1);
	background-image : -webkit-linear-gradient(#f6f4f1,#f6f4f1);
	border: 1px solid #dd0000;
	background-image: linear-gradient(#f6f4f1,#f6f4f1);
}
.survey input[type=checkbox]:not(old):checked + label > span:first-child:before {
	content: '✓';
	display: block;
	width: 1em;
	color: #dd0000;
	font-size: 1.25em;
	line-height: 1em;
	text-align: center;
	font-weight: bold;
}
.survey input[type=radio]:not(old):checked + label > span > span:first-child{
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 2px 2px;
	border: 1px solid #dd0000;
	border-radius: 50px;
	background-color:#dd0000;
	color       : #dd0000;
	background-image :    -moz-linear-gradient(#dd0000,#dd0000);
	background-image :     -ms-linear-gradient(#dd0000,#dd0000);
	background-image :      -o-linear-gradient(#dd0000,#dd0000);
	background-image : -webkit-linear-gradient(#dd0000,#dd0000);
	background-image :         linear-gradient(#dd0000,#dd0000);
}
.survey input[type=submit], .survey .forward.extern, .survey .back.extern {
	background: #dd0000;
	color: #fff;
	font-weight: normal;
	height: 35px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	font-size: 18px;
	padding: 5px 15px;
	border-radius: 0px;
	border: 1px solid #dd0000;
}
.survey .cancel.extern {
	background-color: transparent !important;
	color: #e00 !important;
	border: 1px solid #e00 !important;
	padding: 5px 10px;
}
.survey .cancel.extern:hover, .survey .cancel.extern:focus {
	background-color: #e00 !important;
	color: #fff !important;
	border: 1px solid #fff !important;
	padding: 5px 10px;
}
.survey .free_choice textarea {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
}
.survey .free_choice textarea:focus {
	outline:none;
}
input.free_choice_input, textarea.free_choice_input {
	width: calc(100% - 3em);
}
.survey .free_choice .answer{
	padding: 5px 10px 5px 5px;
}
/* Pagination */
.survey ul.survey_pagination {
	list-style-type: none;
	margin-top: 10px;
	text-align:right;
}
.survey ul.survey_pagination li {
	display: inline;
}
.survey ul.survey_pagination li a{
	text-decoration: none;
	font-size:18px;
}
.survey ul.survey_pagination li.active a {
	text-decoration: underline;
}
.survey .survey_page {
	display: none;
}
.survey .survey_page.page1 {
	display: block;
}
.survey .answer-percentage p {
	font-size: 16px;
	line-height: 1;
	margin-bottom: 3px;
	margin-top: 10px;
}
@media (max-width:586px){
	.survey .question .progressbar > div {
		min-width: fit-content;
	}
}

.survey .submit-cont input[type=submit] {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 50px;
	padding: 10px;
}