/******* VARIABLEN *******/
:root {
	/* Fonts */
	--vpv-font-headline: dinmedium, sans-serif;
	--vpv-font-headline-light: dinlight, sans-serif;
	--vpv-font-subline: roboto-slap-medium, sans-serif;
	--vpv-font-subline-light: roboto-slap-regular, sans-serif;
	--vpv-font-text: dinmedium, sans-serif;
	--vpv-font-text-regular: dinregular, sans-serif;

	/* font sizes */
	--vpv-font-size-base: 1rem;
	--vpv-font-size-display-2xl: 3.75rem;
	--vpv-font-size-display-xl: 3rem;
	--vpv-font-size-display-lg: 2.5rem;
	--vpv-font-size-display-md: 2rem;
	--vpv-font-size-display-sm: 1.65rem;
	--vpv-font-size-display-xs: 1.5rem;
	--vpv-font-size-text-xl: 1.25rem;
	--vpv-font-size-text-lg: 1.125rem;
	--vpv-font-size-text-md: 1rem;
	--vpv-font-size-text-sm: 0.875rem;
	--vpv-font-size-text-xs: 0.75rem;

	/* Blue */
	--vpv-color-blue-25: #D0EFFF;
	--vpv-color-blue-50: #A6D4F2;
	--vpv-color-blue-100: #7DBEE5;
	--vpv-color-blue-200: #53A5D8;
	--vpv-color-blue-300: #2A8DCB;
	--vpv-color-blue-400: #0074BE;
	--vpv-color-blue-500: #0062B2;
	--vpv-color-blue-600: #0050A6;
	--vpv-color-blue-700: #003C7D;
	--vpv-color-blue-800: #002853;
	--vpv-color-blue-900: #00142A;

	/* Green */
	--vpv-color-green-25: #EDFCB3;
	--vpv-color-green-50: #DBF790;
	--vpv-color-green-100: #CAF16C;
	--vpv-color-green-200: #B8EC49;
	--vpv-color-green-300: #B1DF3F;
	--vpv-color-green-400: #A9D336;
	--vpv-color-green-500: #A2C62C;
	--vpv-color-green-600: #88B12F;
	--vpv-color-green-700: #6D9C32;
	--vpv-color-green-800: #538735;
	--vpv-color-green-900: #387238;
	--vpv-color-success-green: #039855;

	/* Gray */
	--vpv-color-white: #FFF;
	--vpv-color-gray-25: #FAF8F7;
	--vpv-color-gray-50: #F5F3F0;
	--vpv-color-gray-100: #D9D7D4;
	--vpv-color-gray-200: #C6C4C2;
	--vpv-color-gray-300: #A8A7A5;
	--vpv-color-gray-400: #8D8C8A;
	--vpv-color-gray-500: #6F6E6D;
	--vpv-color-gray-600: #525150;
	--vpv-color-gray-700: #393938;
	--vpv-color-gray-800: #262625;
	--vpv-color-gray-900: #161616;
	--vpv-color-black: #000;

	/* Berry */
	--vpv-color-berry-25: #FFF4FB;
	--vpv-color-berry-50: #FAEAF4;
	--vpv-color-berry-100: #F7DAEC;
	--vpv-color-berry-200: #F5CBE5;
	--vpv-color-berry-300: #EAAED3;
	--vpv-color-berry-400: #DF86BD;
	--vpv-color-berry-500: #CB62A3;
	--vpv-color-berry-600: #A84281;
	--vpv-color-berry-700: #95276B;
	--vpv-color-berry-800: #771F56;
	--vpv-color-berry-900: #591740;
	--vpv-volor-alert-red: #D92D20; /*TODO: Border von Textfeldern bei Fehler*/
	
	/* Color Assignments */
	--vpv-color-primary: var(--vpv-color-blue-600);
	--vpv-color-secondary: var(--vpv-color-green-500);
	--vpv-color-brand: var(--vpv-color-blue-400);
	--vpv-color-gray: var(--vpv-color-gray-400);
	--vpv-color-body-background: transparent;
	--vpv-color-headline: var(--vpv-color-blue-900);
	--vpv-color-text: var(--vpv-color-blue-900);

	/* Animation Speeds */
	--vpv-animation-speed-slow: .5s;
	--vpv-animation-speed-fast: .25s;

	/* Borders Radius */
	--vpv-border-radius-sm: 0.25rem;
	--vpv-border-radius-md: 0.5rem;
	--vpv-border-radius-lg: 0.75rem;
	--vpv-border-radius-xl: 1rem;
	--vpv-border-radius-xxl: 1.5rem;
	--vpv-border-radius-input: var(--vpv-border-radius-sm);
	
	/* Border Size */
	--vpv-border-size: 0.188rem;

	/* Padding Size */
	--vpv-button-padding-left: 1.25rem;
	--vpv-button-padding-right: 1.25rem;
	--vpv-button-padding-top: 1.25rem;
	--vpv-button-padding-bottom: 1.25rem;

	/* Shadow */
	--vpv-box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 24%);
	--vpv-box-shadow-hover: 0px 0px 16px 0px rgb(16 24 40 / 16%);
	
	/* Height */
	--vpv-button-height: 3rem;
	--vpv-input-height: 3rem;
}

html,
body {
	height: 100%;
	margin: 0;
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-base);
	color: var(--vpv-color-text);
	overflow: auto;
	background-color: var(--vpv-color-body-background);
}

/******* BUTTONS *******/
.dynas-button {
	width: 100%;
	background-color: var(--vpv-color-white);
	font-family: var(--vpv-font-text);
	border-radius: var(--vpv-border-radius-xxl);
	border: 1px solid var(--vpv-color-text);
}

.dynas-button-select {
	font-family: var(--vpv-font-text);
	border-color: var(--vpv-color-gray-400);
	color: var(--vpv-color-text);
	border-radius: var(--vpv-border-radius-xl);
	height: var(--vpv-button-height);
}

.dynas-button-icon-select {
	font-family: var(--vpv-font-text);
	border-color: var(--vpv-color-gray-400);
	color: var(--vpv-color-text);
	border-radius: var(--vpv-border-radius-xl);
	padding-top: var(--vpv-button-padding-top);
}

.dynas-button-select:hover,
.dynas-button-icon-select:hover {
	background-color: var(--vpv-color-primary);
	color: var(--vpv-color-white);
}

.dynas-button-zurueck,
.dynas-button-bearbeiten {
	width: auto;
	height: var(--vpv-button-height);
	font-family: var(--vpv-font-text);
	border: 0.063rem solid var(--vpv-color-primary);
	color: var(--vpv-color-text);
	padding-left: var(--vpv-button-padding-left);
	padding-right: var(--vpv-button-padding-right);
}

.dynas-button-zurueck:hover,
.dynas-button-bearbeiten:hover {
	border: 0.188rem solid var(--vpv-color-blue-200);
	background-color: var(--vpv-color-white);
}

.dynas-button-uebernehmen,
.dynas-button-submit,
.dynas-button-speichern,
.dynas-button-unterschrift-ok,
.dynas-button-unterschrift-clear {
	width: 50%;
	color: var(--vpv-color-text);
	background-color: var(--vpv-color-green-200);
	font-family: var(--vpv-font-text);
	border: none;
	height: var(--vpv-button-height);
}

.dynas-button-uebernehmen:hover,
.dynas-button-submit:hover,
.dynas-button-speichern:hover,
.dynas-button-unterschrift-ok:hover,
.dynas-button-unterschrift-clear:hover {
	color: var(--vpv-color-green-200);
	background-color: var(--vpv-color-text);
}

/******* TEXTFIELDS *******/
.dynas-textfield,
.dynas-textfield.ui-selectonemenu .ui-selectonemenu-label {
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md);
	height: var(--vpv-input-height);
	border-color: var(--vpv-color-gray-900);
	color: var(--vpv-color-gray-800);
}

.dynas-textfield:focus,
.dynas-textfield.ui-selectonemenu:focus .ui-selectonemenu-label:focus {
	border: var(--vpv-border-size) solid var(--vpv-color-gray-900);
	box-shadow: none;
}

.dynas-textfield:hover,
.dynas-textfield.ui-selectonemenu:hover .ui-selectonemenu-label:hover {
	border: var(--vpv-border-size) solid var(--vpv-color-blue-300);
}

.dynas-textarea {
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md);
	border-color: var(--vpv-color-gray-900);
	color: var(--vpv-color-gray-800);
}

.dynas-textarea:focus {
	border: var(--vpv-border-size) solid var(--vpv-color-gray-900);
	box-shadow: none;
}

.dynas-textarea:hover {
	border: var(--vpv-border-size) solid var(--vpv-color-blue-300);
}

/******* DROPDOWNS *******/
.dynas-dropdown,
.dynas-dropdown.ui-selectonemenu .ui-selectonemenu-label .ui-selectonemenu-trigger,
.dynas-dropdown.ui-selectcheckboxmenu .ui-selectcheckboxmenu-label .ui-selectcheckboxmenu-trigger {
	font-family: var(--vpv-font-text-regular) !important;
	font-size: var(--vpv-font-size-text-md) !important;
	height: var(--vpv-input-height) !important;
	border-color: var(--vpv-color-gray-900) !important;
	vertical-align: middle !important;
	color: var(--vpv-color-gray-800) !important;
	min-width: 0 !important;
}

.dynas-dropdown:focus,
.dynas-dropdown.ui-selectonemenu:focus .ui-selectonemenu-label:focus .ui-selectonemenu-trigger:focus,
.dynas-dropdown.ui-selectcheckboxmenu:focus .ui-selectcheckboxmenu-label:focus .ui-selectcheckboxmenu-trigger:focus {
	border: var(--vpv-border-size) solid var(--vpv-color-gray-900) !important;
	box-shadow: none !important;
}

.dynas-dropdown:hover,
.dynas-dropdown.ui-selectonemenu:hover .ui-selectonemenu-label:hover .ui-selectonemenu-trigger:hover,
.dynas-dropdown.ui-selectcheckboxmenu:hover .ui-selectcheckboxmenu-label:hover .ui-selectcheckboxmenu-trigger:hover {
	border: var(--vpv-border-size) solid var(--vpv-color-blue-300) !important;
	box-shadow: none !important;
}

.ui-selectonemenu-item, .ui-selectonemenu-list-item, .ui-selectonemenu-filter-container input,
.ui-selectcheckboxmenu-item, .ui-selectcheckboxmenu-list-item, .ui-selectcheckboxmenu-filter-container input {
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md);
}

/******* LABELS *******/
.dynas-label-fragetext {
	font-family: var(--vpv-font-text);
	font-size: var(--vpv-font-size-text-xl);
	color: var(--vpv-color-headline);
}

.dynas-label-fragebeschreibung {
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md);
	color: var(--vpv-color-text);
}

.dynas-label-antworttext {
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md);
	color: var(--vpv-color-text);
}

.dynas-label-antwortlabel {
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md);
	color: var(--vpv-color-text);
}

.dynas-label-antwortlabel-error {
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md);
	font-weight: bold;
	color: var(--vpv-volor-alert-red);
}

.dynas-label-errortext {
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md);
	color: var(--vpv-volor-alert-red);
}

.dynas-label-button-icon {
	font-family: var(--vpv-font-text);
	padding-top: 7px;
	cursor: pointer;
}

/******* KALENDER  *******/
.dynas-kalender input {
	width: 100%;
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md);
	height: var(--vpv-input-height);
	border-color: var(--vpv-color-gray-900);
}

.dynas-kalender input:focus {
	border: var(--vpv-border-size) solid var(--vpv-color-gray-900);
	box-shadow: none;
}

.dynas-kalender input:hover {
	border: var(--vpv-border-size) solid var(--vpv-color-blue-300);
}

.ui-datepicker-header, .ui-datepicker-calendar,
.ui-datepicker-month, ui-datepicker-year {
	font-family: var(--vpv-font-text-regular);
	font-size: var(--vpv-font-size-text-md)
}

/******* CONTAINERS *******/
.dynas-container-frage {
	background-color: var(--vpv-color-white);
	border-radius: var(--vpv-border-radius-xl);
	box-shadow: var(--vpv-box-shadow);
	border: 1px solid var(--vpv-color-gray-100);
}

.dynas-container-frage-bearbeiten {
	border-radius: var(--vpv-border-radius-xl);
	box-shadow: var(--vpv-box-shadow);
	background-color: var(--vpv-color-gray-50);
	border: 0.063rem solid var(--vpv-color-gray-900);
}

.dynas-container-frage-authentifiziert {
	border-radius: var(--vpv-border-radius-xl);
	box-shadow: var(--vpv-box-shadow);
	border: 0.063rem solid var(--vpv-color-gray-900);
}

.dynas-container-tabelle-heading {
	font-family: var(--vpv-font-text);
}

.dynas-container-tabelle-row {
	padding-top: var(--vpv-button-padding-top);
	padding-bottom: var(--vpv-button-padding-bottom);
	border-top: 0.25rem solid var(--vpv-color-gray-900);
}

.dynas-container-auswahl {
	background-color: var(--vpv-color-gray-50);
	margin: 1rem;
	padding-top: 0.5rem;
}

/******* ICON *******/
.dynas-icon {
	cursor: pointer;
}

.dynas-icon-tabelle {
	cursor: pointer;
	color: var(--vpv-color-text);
	width: var(--vpv-font-size-display-xl);
	height: var(--vpv-font-size-display-xl);
}

.dynas-icon-tabelle:hover {
	color: var(--vpv-color-primary);
}

/******* TOOLTIP *******/
.ui-tooltip .ui-tooltip-text {
	background-color: var(--vpv-color-gray-200) !important;
}

.ui-tooltip-right .ui-tooltip-arrow {
	border-right-color: var(--vpv-color-gray-200) !important;
}

/******* OTHERS *******/
.dynas-fullwidth {
	width: 100%;
}

/* MEDIUM */
@media screen and (max-width:767px) {

	/******* BUTTONS *******/
	.dynas-button {
		font-size: var(--vpv-font-size-text-sm);
	}

	/******* TEXTFIELDS *******/
	.dynas-textfield,
	.dynas-textfield.ui-selectonemenu .ui-selectonemenu-label {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-textarea {
		font-size: var(--vpv-font-size-text-sm);
	}

	/******* DROPDOWNS *******/
	.dynas-dropdown.ui-selectonemenu .ui-selectonemenu-label {
		font-size: var(--vpv-font-size-text-sm);
	}

	/******* LABELS *******/
	.dynas-label-fragetext {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-fragebeschreibung {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-antworttext {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-antwortlabel {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-antwortlabel-error {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-errortext {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-button-icon {
		font-size: var(--vpv-font-size-text-sm);
	}

	/******* KALENDER  *******/
	.dynas-kalender input {
		font-size: var(--vpv-font-size-text-sm);
	}
}

/* SMALL */
@media screen and (max-width:450px) {

	/******* BUTTONS *******/
	.dynas-button {
		font-size: var(--vpv-font-size-text-sm);
	}

	/******* TEXTFIELDS *******/
	.dynas-textfield,
	.dynas-textfield.ui-selectonemenu .ui-selectonemenu-label {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-textarea {
		font-size: var(--vpv-font-size-text-sm);
	}

	/******* DROPDOWNS *******/
	.dynas-dropdown.ui-selectonemenu .ui-selectonemenu-label {
		font-size: var(--vpv-font-size-text-sm);
	}

	/******* LABELS *******/
	.dynas-label-fragetext {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-fragebeschreibung {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-antworttext {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-antwortlabel {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-antwortlabel-error {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-errortext {
		font-size: var(--vpv-font-size-text-sm);
	}

	.dynas-label-button-icon {
		font-size: var(--vpv-font-size-text-sm);
	}

	/******* KALENDER  *******/
	.dynas-kalender input {
		font-size: var(--vpv-font-size-text-sm);
	}
}