/* #region Root */
:root {
	--c-page-bg: #fafafa;
	--c-content-bg: #ffffff;
	--c-motive: #a6192e;
	--c-motive-hover: #c81b35;
	--c-motive-hover-hover: #e71b3a;
	--c-motive-gray: #dadada;
}

* {
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-Thin.ttf") format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-ThinItalic.ttf") format('truetype');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-Light.ttf") format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-LightItalic.ttf") format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-Regular.ttf") format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-Italic.ttf") format('truetype');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-Medium.ttf") format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-MediumItalic.ttf") format('truetype');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-Bold.ttf") format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-BoldItalic.ttf") format('truetype');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-Black.ttf") format('truetype');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("/resources/fonts/Roboto-BlackItalic.ttf") format('truetype');
	font-weight: 900;
	font-style: italic;
}


/* #region Global */
html {
	min-height: 100%;
	overflow-y: scroll;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--c-page-bg);
}

body {
	position: relative;
	margin: 0;
	min-height: 100%;
	background-color: var(--c-content-bg);
	display: flex;
	flex-direction: column;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.xdebug-var-dump, .xdebug-var-dump * {
	font-size: 14px;
}
/* #endregion */

/* #region Survey-Layout */
.survey__header {
	background-color: var(--c-motive);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	gap: 0.75rem;
    padding: 1.75rem 4.5rem;
	flex-wrap: wrap;
	min-height: 84px;
	box-sizing: border-box;
}

.survey__header a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.75rem;
	transition-duration: 0.2s;
}

.survey__header a:hover {
	color: #000000;
	transition-duration: 0.2s;
}

@media (max-width: 768px) {
	.survey__header {
		flex-direction: column;
		justify-content: center;
		padding-top: 2rem;
		padding-left: 1rem;
		padding-right: 1rem;
		gap: 1.5rem;
	}

	.survey__header a {
		font-size: 1rem;
	}
}

.survey__headerLangs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.survey__logo img {
	height: 3rem;
}

.survey__banner {
	width: 100%;
	object-fit: cover;
	height: 25vh;
}

.survey__content {
	padding: 2.75rem 4.5rem
}

@media (max-width: 768px) {
	.survey__content {
		padding: 2rem 1.5rem;
	}
}

@media (max-width: 520px) {
	.survey__content {
		padding: 2rem 1rem;
	}
}
/* #endregion */


/* #region Landing */
.landing__title {
	font-size: 2.85rem;
	font-weight: bold;
	color: var(--c-motive);
	margin-bottom: 4rem;
	text-align: center;
	margin-top: 1rem;
}

.landing__text {
	font-size: 1rem;
	margin-bottom: 1.5rem;
	line-height: 1.4;
}

.landing__text.-line1 {
	font-weight: bold;
}

.landing__text.-line4 {
	margin-bottom: 5rem;
}

.landing__text.-line3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.landing__imgTime {
	width: 2.5rem;
	height: auto;
	flex-shrink: 0;
}

.finish__text {
	text-align: center;
	font-size: 1.25rem;
	margin-bottom: 2rem;
	line-height: 1.4;
}
/* #endregion */


/* #region SurveyButton */
.survey__buttonRow {
	display: flex;
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.survey__buttonRow.-right {
	justify-content: flex-end;
}

@media (max-width: 768px) {
	.survey__buttonRow.-right {
		justify-content: center;
	}
}

.survey__button {
	text-decoration: none;
	text-transform: uppercase;
	background-color: var(--c-motive);
	color: white;
	border-radius: 0.33rem;
	cursor: pointer;
	font-size: 13px;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-top: 1.2rem;
	padding-bottom: 1.4rem;
	border: none;
}

.survey__button::after {
	content: ">";
	margin-left: 0.5rem;
	transition-duration: 0.2s;
}

.survey__button:hover {
	background-color: var(--c-motive-hover);
	transition-duration: 0.2s;
}
/* #endregion */

/* #region ProgressBar */
.progressBar {
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
	justify-content: center;
}
.progressStep__step {
	flex-grow: 1;
	height: 0.75rem;
	background-color: var(--c-motive-gray);
	border-radius: 0.1rem;
	transition-duration: 0.2s;
}

.progressStep__step.-completed {
	background-color: #cb7885;
}

.progressStep__step.-current {
	background-color: var(--c-motive-hover);
}

.progressStep__step.-pending {
	background: linear-gradient(135deg, #cb7885 0%, #cb7885 49%, var(--c-motive-gray) 50%, var(--c-motive-gray) 100%);
}

.progressStep__step.-current:hover,
.progressStep__step.-completed:hover {
	cursor: pointer;
	transition-duration: 0.2s;
	background-color: var(--c-motive-hover-hover);
}

.progressStep__step.-pending:hover {
	cursor: pointer;
	transition-duration: 0.2s;
	background: linear-gradient(135deg, var(--c-motive-hover-hover) 0%, var(--c-motive-hover-hover) 49%, var(--c-motive-gray) 50%, var(--c-motive-gray) 100%);
}
/* #endregion */

/* #region Step */
.step__title {
	font-size: 2.25rem;
	font-weight: bold;
	color: var(--c-motive);
	margin-bottom: 1rem;
	text-align: left;
	text-transform: uppercase;
}

.step__instructions {
	font-size: 0.8rem;
	margin-bottom: 1rem;
	line-height: 1.4;
	border-bottom: 2px solid var(--c-motive-gray);
	padding-bottom: 1.5rem;
}
/* #endregion */

/* #region Question */
.question {
	margin-bottom: 4rem;
}

.question__title {
	display: flex;
	font-weight: bold;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.question__titleNumber {
	color: var(--c-motive);
}

.question__answers {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	width: 100%;
	flex-wrap: wrap;
}

.question__answer {
	background-color: #f4f4f4;
	border-radius: 0.25rem;
	padding: 0.75rem 0.75rem;
	display: flex;
	justify-content: space-between;
	width: calc(25% - (3rem/4));
	box-sizing: border-box;
}

.question__answer.-notRated {
	width: 100%;
}

@media (max-width: 980px) {
	.question {
		margin-bottom: 3rem;
	}

	.question__answer {
		width: calc(50% - (1rem/2));
	}
}

@media (max-width: 520px) {
	.question {
		margin-bottom: 4rem;
	}

	.question__answer {
		width: 100%;
	}

	.question__answers {
		gap: 1rem;
	}
}

.question__rating {
	display: flex;
	align-items: center;
}

.question__rating img {
	max-height: 1rem;
	height: 1rem;
}

.question__input {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.question__input input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	cursor: pointer;
}

.question__input label {
	font-size: 0.85rem;
	cursor: pointer;
}

.question__textArea {
	width: 100%;
}

.question__textArea textarea {
	width: 100%;
	min-height: 6rem;
	resize: vertical;
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	padding: 0.5rem;
	box-sizing: border-box;
}

.question__textArea textarea::placeholder {
	color: #bdbdbd;
	font-size: 0.8rem;
}

.question.-chk textarea {
	margin-top: 1rem;
}

textarea:disabled {
	background-color: #f4f4f4;
}

.question__checkAnswers {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	width: 100%;
	flex-wrap: wrap;
}

.question__checkAnswer {
	background-color: #f4f4f4;
	border-radius: 0.25rem;
	padding: 0.75rem 0.75rem;
	display: flex;
	justify-content: space-between;
	width: calc(25% - (3rem/4));
	box-sizing: border-box;
}

@media (max-width: 980px) {
	.question__checkAnswer {
		width: calc(50% - (1rem/2));
	}
}

@media (max-width: 520px) {
	.question__checkAnswers {
		gap: 1rem;
	}

	.question__checkAnswer {
		width: 100%;
	}
}

.question__checkInput {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.question__checkInput label {
	font-size: 0.85rem;
	cursor: pointer;
}
/* #endregion */

/* #region GDPR */
.gdpr__title {
	font-size: 2.85rem;
	font-weight: bold;
	color: var(--c-motive);
	margin-bottom: 4rem;
	text-align: center;
	margin-top: 1rem;
}

.gdpr__text {
	font-size: 0.8rem;
	text-align: center;
	line-height: 1rem;
}

@media (max-width: 520px) {
	.gdpr__text {
		text-align: justify;
	}
}

.gdpr__accept {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.gdpr__input {
	background-color: #f4f4f4;
	border-radius: 0.25rem;
	padding: 0.75rem 0.75rem;
	display: flex;
	width: 25%;
	box-sizing: border-box;
	align-items: center;
	gap: 0.5rem;
}

@media (max-width: 980px) {
	.gdpr__input {
		width: 50%;
	}
}

@media (max-width: 520px) {
	.gdpr__input {
		width: 100%;
	}
}


.gdpr__input label {
	font-size: 0.85rem;
	cursor: pointer;
}

.gdpr__input input {
	cursor: pointer;
	margin: 0;
}

.gdpr__text a::after {
    content: attr(href);
	font-size: 0.8rem;
	line-height: 1rem;
}

.gdpr__text a {
	text-decoration: none;
}
/* #endregion */

/* #region Panel */
.panel__header {
	background-color: var(--c-motive);
	color: #ffffff;
	display: flex;
	align-items: center;
	gap: 0.75rem;
    padding: 1.75rem 4.5rem;
	flex-wrap: wrap;
	min-height: 84px;
	box-sizing: border-box;
	text-transform: uppercase;
	font-weight: bold;
	justify-content: space-between
}

.panel__headerButtons a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.75rem;
	transition-duration: 0.2s;
}

.panel__headerButtons a:hover {
	color: #000000;
	transition-duration: 0.2s;
}

.panel__export {
	padding: 1.75rem 4.5rem;
}

.panel__answersCount {
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 2rem;
}

.panel__exportRow {
	margin-bottom: 0.5rem;
}

.panel__exportRow.-button {
	margin-top: 2rem;
}

.panel__export label {
	margin-right: 0.5rem;
}

.panel__export select {
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	cursor: pointer;
}

.panel__export button {
	background-color: var(--c-motive);
	color: white;
	border-radius: 0.33rem;
	cursor: pointer;
	font-size: 13px;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	border: none;
	transition-duration: 0.2s;
}

.panel__export button:hover {
	background-color: var(--c-motive-hover);
	transition-duration: 0.2s;
}


.infoArea {
	padding: 1rem;
	background-color: #f4f4f4;
	border-radius: 0.25rem;
	line-height: 1.4;
	color: #000000;
}

.login__container {
	display: flex;
	flex-direction: column;
	padding: 3rem;
	align-items: center;
}

.login__floater {
	max-width: 20rem;
	width: 20rem;
	padding: 2rem;
	border: 3px solid var(--c-motive);
	border-radius: 0.5rem;
}

.login__title {
	font-size: 2rem;
	font-weight: bold;
	color: var(--c-motive);
	margin-bottom: 2rem;
	text-align: center;
}

.login__row {
	margin-bottom: 0.5rem;
}

.login__row.-input {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.login__row.-button {
	margin-top: 1.5rem;
	display: flex;
	justify-content: end;
}

.login__row.-button button {
	background-color: var(--c-motive);
	color: white;
	transition-duration: 0.2s;
	border-radius: 0.25rem;
	border: none;
	padding: 0.5rem 1rem;
	cursor: pointer;
}

.login__row.-button button:hover {
	background-color: var(--c-motive-hover);
	transition-duration: 0.2s;
}

.login__error {
	background-color: #e7bcc3;
	color: #6d0909;
	padding: 0.5rem;
	border-radius: 0.25rem;
	margin-bottom: 1rem;
}
/* #endregion */