/*
 * Vodafone Questionnaire – Frontend Styles
 *
 * All selectors are prefixed with .vq-questionnaire to avoid conflicts
 * with the host theme. Vodafone brand red: #e60000.
 */

.vq-questionnaire {
	padding: 20px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
	line-height: 175%;
	}
	.vq-questionnaire .vq-step {
		}
		.vq-questionnaire .vq-step.vq-step-1 {
			display: flex;
			min-height: 71px;
			gap: 6px;
		}
		.vq-questionnaire .vq-step.vq-step-2a,
		.vq-questionnaire .vq-step.vq-step-2b,
		.vq-questionnaire .vq-step.vq-step-3,
		.vq-questionnaire .vq-step--done {
			border: 1px solid #ccc;
			padding: 15px;
			background: #fff;
			margin-top: 10px;
			margin-bottom: 10px;
			border-radius: 3px;
			}
			.vq-questionnaire .vq-step.vq-step-3.vq-step-3--nein {
				position: relative;
				z-index: 2;
				border-top-color: #ffffff;
				top: -23px;
			}
		.vq-questionnaire .vq-step.vq-step-3 {
		}
		.vq-questionnaire .vq-step .vq-question {
		}
		.vq-questionnaire .vq-step .vq-actions {
			}
			.vq-questionnaire .vq-step .vq-actions .vq-btn {
				text-decoration: none;
				cursor: pointer;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				border-radius: 3px;
				color: #fff;
				display: inline-block;
				font-family: "Vodafone", Arial, sans-serif;
				font-weight: bold;
				text-align: center;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				outline: 0;
				background: #fff;
				color: #333;
				box-shadow: 0 1px 3px rgba(50, 50, 50, .6);
				border: none;
				font-size: 14px;
				width: 80px;
				padding: 13px 15px 12px;
				margin-bottom: 10px;
				margin-right: 6px;
				line-height: 1em;
				}
				.vq-questionnaire .vq-step .vq-actions.vq-actions-small .vq-btn {
					padding: 9px 15px 9px;
				}
				.vq-questionnaire .vq-step .vq-actions .vq-btn:active {
					background: #f4f4f4;
					box-shadow: 0 1px 3px rgba(50, 50, 50, .6) inset;
					border: 1px solid #e9e9e9;
					color: #333;
				}
				.vq-questionnaire .vq-step .vq-actions .vq-btn:hover {
					background: #f4f4f4;
				}
				.vq-questionnaire .vq-step .vq-actions .vq-btn--pressed {
					background: #f4f4f4;
					box-shadow: 0 1px 3px rgba(50, 50, 50, .6) inset;
					border: 1px solid #e9e9e9;
					color: #333;
					position: relative;
					overflow: visible;
				}
				.vq-questionnaire .vq-step .vq-actions .vq-btn--pressed::after {
					content: "";
					position: absolute;
					width: 22px;
					height: 12px;
					background: no-repeat 50% 50% / 100% 100%;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpolygon points='11,1 21,11 1,11' fill='%23ffffff'/%3E%3Cline x1='11' y1='1' x2='21' y2='11' stroke='%23d0d0d0' stroke-width='1'/%3E%3Cline x1='11' y1='1' x2='1' y2='11' stroke='%23d0d0d0' stroke-width='1'/%3E%3C/svg%3E");
					top: 100%;
					left: 50%;
					transform: translateX(-50%) translateY(31px);
				}
				.vq-questionnaire .vq-step .vq-actions .vq-btn--ja {
				}
				.vq-questionnaire .vq-step .vq-actions .vq-btn--nein {
				}
				.vq-questionnaire .vq-step .vq-actions .vq-btn--senden {
					background: #9c2aa0;
					color: #ffffff;
					}
					.vq-questionnaire .vq-step .vq-actions .vq-btn--senden:hover {
						background: #5e2750;
					}
				.vq-questionnaire .vq-step .vq-actions .vq-btn--senden[disabled] {
					color: #b5b5b5;
					background: #f4f4f4;
					pointer-events: none;
					text-shadow: none;
					border-color: #f4f4f4;
					box-shadow: 0 1px 3px rgba(50, 50, 50, .6);
					border: 1px solid #e9e9e9;
				}
				.vq-questionnaire .vq-step .vq-actions .vq-btn--link {
				}
		.vq-questionnaire .vq-step .vq-radios {
			display: grid;
			gap: 0px;
			margin-top: 10px;
			}
			.vq-questionnaire .vq-step .vq-radios .screen-reader-text {
			}
			.vq-questionnaire .vq-step .vq-radios .vq-radio-label {
				font-size: 14px;
				font-weight: normal;
				background: url('../img/radio-unchecked.png') no-repeat;
				background-position: 0 4px;
				display: inline-block;
				padding: 0px 0 0px 30px;
				}
				.vq-questionnaire .vq-step .vq-radios .vq-radio-label:has(input[type="radio"]:checked) {
					background-image: url('../img/radio-checked.png');
					font-weight: bold;
				}
				.vq-questionnaire .vq-step .vq-radios .vq-radio-label .vq-radio {
					position: absolute;
					left: -9999px;
				}
		.vq-questionnaire .vq-step .vq-step3-header {
		}
		.vq-questionnaire .vq-step .vq-step3-note {
			color: #ff0000;
			}
			.vq-questionnaire .vq-step .vq-step3-note svg {
				width: 16px;
				height: auto;
				}
				.vq-questionnaire .vq-step .vq-step3-note svg path {
					stroke: #ff0000;
				}
		.vq-questionnaire .vq-step .vq-textarea {
			border-radius: 3px;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			box-shadow: 0 1px 3px rgba(50, 50, 50, .6) inset;
			border: 1px solid #e9e9e9;
			font-size: 14px;
			padding: 10px;
			scroll-margin-top: calc(var(--navi-height, 0px) + var(--scroll-margin-top, 32px));
			width: 100%;
			max-width: 100%;
			height: 120px;
			margin-bottom: 5px;
			font-family: "Vodafone", Arial, sans-serif;
			box-sizing: border-box;
		}
		.vq-questionnaire .vq-step .vq-actions--step3 {
			}
			.vq-questionnaire .vq-step .vq-actions--step3 .vq-btn {
				width: auto;
			}
	.vq-questionnaire .vq-step--done {
		}
		.vq-questionnaire .vq-step--done .vq-done-heading {
		}
		.vq-questionnaire .vq-step--done .vq-done-subheading {
			margin: 10px 0 15px;
		}
		.vq-questionnaire .vq-step--done .vq-share {
			}
			.vq-questionnaire .vq-step--done .vq-share li {
				}
				.vq-questionnaire .vq-step--done .vq-share li .vq-share-btn {
				}
				.vq-questionnaire .vq-step--done .vq-share li .vq-share-link {
				}
		.vq-questionnaire .vq-step--done .vq-bookmark-hint {
		}
		.vq-questionnaire .vq-step--done .vq-btn--community {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			border-radius: 3px;
			color: #fff;
			display: inline-block;
			font-family: "Vodafone", Arial, sans-serif;
			font-weight: bold;
			margin: 0 10px 10px 0;
			text-align: center;
			line-height: 16px;
			border: 1px solid #3d3d3d;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			outline: 0;
			background: #3d3d3d;
			box-shadow: 0 1px 3px rgba(50, 50, 50, .6);
			text-shadow: none;
			width: auto;
			font-size: 14px;
			padding: 8px 15px;
			}
			.vq-questionnaire .vq-step--done .vq-btn--community:hover {
				
			}
@media (max-width: 599px) { 
	.vq-questionnaire .vq-step.vq-step-1 {
		flex-direction: column;
		}
		.vq-questionnaire .vq-step .vq-actions .vq-btn--pressed::after {
			transform: translateX(-50%) translateY(11px);
		}
}