:root {
	--mobile-header-content-height: 31px;
	--privacy-powered-by-footer-content-height: 25px;
}

.yalst-field-tail-icon .ui-button.yalst-clean-tooltip-button,
.yalst-field-tail-icon .ui-button.yalst-clean-tooltip-button:hover,
.yalst-field-tail-icon .ui-button.yalst-clean-tooltip-button:active
{
    background: none;
    border: 0;
}

.yalst-borderless,
.ui-field-contain.yalst-borderless,
.yalst-field-contain-with-tail-icon.yalst-borderless
{
    border-style: none;
}

.yalst-field-tail-icon a {
	 width: 36px;
    height: 31px;
    padding: 15px 5px 0 10px;
	 margin: 0px;
}

.ui-checkboxradio-label ~ .yalst-field-tail-icon a {
    padding: 13px 5px 0 10px;
}

.ui-mobile label.ui-checkboxradio-label {
	 display: flex;
    flex-wrap: inherit;
    align-items: center;
}

.ui-mobile label.ui-checkboxradio-label .ui-checkboxradio-icon-space {
	margin: 0 5px;
	display: inline-block;
}

div.embedded-chat-page[data-role=page][id^=chatPage]
{
    margin-top: 0;
    height: calc(100% - 36px);
    min-height: 420px !important;
    padding-bottom: 0 !important;
}


/* utilities */

.yalst-hidden
{
    display: none;
    /*visibility: hidden;*/
}

.ui-controlgroup-controls .yalst-loosen-up-vertically-light.ui-button
{
    margin: 4px 0 4px;
}

/* start form pages */
.welcome-text
{
    font-size: smaller;
    text-align: center;
}

/* footer */

.statusText
{
    padding: 5px;
    font-size: 0.8em;
    font-weight: normal;
    text-align: left;
}

/******** Mobile Page Header ********/

#wizard-department-choice-page .faq-header-button,
#all-departments-form-page .faq-header-button,
#fixed-or-any-department-form-page .faq-header-button {
	margin-top: 1px;
	z-index: 10;
	border-radius: 50%;
	width: var(--mobile-header-content-height);
	height: var(--mobile-header-content-height);
	text-align: center;
	color: inherit;
}

.faq-header-button .faq-icon {
	position: absolute;
	height: 28px;
	width: 28px;
	top: 1px;
	left: 1px;
}

.faq-header-button .faq-icon ellipse {
	display: none;
}

body:not([has-faqs]) .faq-header-button {
	display: none;
}


/********* chat page footer toolbar ********/

:root {
    /* I need this to place the toolbar above the On-Screen-Keyboard in iOS */
    --chat-toolbar-footer-total-height: 53px;
}

/* just to try something (https://benfrain.com/how-to-get-the-value-of-phone-notches-environment-variables-env-in-javascript-from-css/) */
/* TODO: in Embedded mode, detect if we need safe-are-inset-left/right:
	     in landscape mode (window.orientation = 90/-90 on iOS) find that
	     window.innerWidth == screen.height
	     , then set CSS props to env(safe-area-inset-left) */

:root {
	/* set to zero by JS when embedded on mobile and on a NON-viewport-fit=cover host page */
	/* Currently JS detects viewport-fit=cover when the page first goes to landscape orientation. */
	/* In the OTHER cases (e.g.
	   - when in own tab on mobile mobile/index.php is always in viewport-fit=cover mode,
	   - on desktop those insets are all zero by the browser,
	   so everything here is already ok.
	 */
	--safe-area-inset-left-when-viewport-fit-cover: env(safe-area-inset-left);
	--safe-area-inset-right-when-viewport-fit-cover: env(safe-area-inset-right);
	
	--div-with-role-content-right-padding: max(10px, var(--safe-area-inset-right-when-viewport-fit-cover));
	--div-with-role-content-left-padding: max(10px, var(--safe-area-inset-left-when-viewport-fit-cover));
}

html {
	overscroll-behavior-y: none;
}

html.apple-safari-webkit-engine .chat-input-toolbar-footer.above-on-screen-keyboard {
    bottom: unset; /* unhinge "display: fixed" from the bottom. This must be replaced by setting the inline style top value */
    /*height: var(--chat-toolbar-footer-total-height);*/
}

/* make the text input stretch and shrink */
div.ui-page[data-role=page][id^=chatPage] .chat-input-toolbar-footer
{
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    padding-left: var(--safe-area-inset-left-when-viewport-fit-cover);
    padding-right: var(--safe-area-inset-right-when-viewport-fit-cover);
	 font-weight: unset; /* Emojis are black in windows otherwise */
}

div.ui-page[data-role=page][id^=chatPage] .chat-input-toolbar-footer .ui-input-text
{
    flex: 1;
}

div.ui-page[data-role=page][id^=chatPage] .chat-input-toolbar-footer > *
{
	margin-left: 0.2em;
	margin-right: 0.2em;
}

div.ui-page[data-role=page][id^=chatPage] .chat-input-toolbar-footer .ui-textinput
{
	flex-grow: 1;
}

/**** the Send Button ****/

.send-text-button
{
    border: 1px solid black;
}

/**** the icon tool buttons ****/

.chat-input-toolbar-footer .icon-button
{
    position: relative;
    height: auto;
    width: 30px;

    /* center the child svg */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chat-input-toolbar-footer .icon-button  svg
{
    fill: #000000;
}

.chat-input-toolbar-footer .upload-icon-button,
.chat-input-toolbar-footer .download-icon-button,
.chat-input-toolbar-footer .send-text-button
{
    display: none;
}

.inputfile
{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label
{
	cursor: pointer; /* "hand" cursor */
}

/**** toolbar modi *****/

.chat-input-toolbar-footer .icon-button,
.chat-input-toolbar-footer .icon-button label
{
    cursor: pointer;
}

/*** text-layout ***/
.chat-input-toolbar-footer.text-layout:not(.chat-paused) .send-text-button
{
    display: inherit;
}

/*** file-layout ***/
.chat-input-toolbar-footer:not(.chat-paused).file-transfer-enabled .upload-icon-button
{
    display: inherit;
}

/*** transcript/share button ***/
.chat-input-toolbar-footer:not(.text-layout).transcript-export-enabled .download-icon-button,
.chat-input-toolbar-footer.chat-paused.transcript-export-enabled .download-icon-button {
	display: inherit;
}


/*** chat-paused-layout ***/
.chat-input-toolbar-footer.chat-paused .upload-icon-button,
.chat-input-toolbar-footer.chat-paused .send-text-button,
.chat-input-toolbar-footer .icon-button.disabled
{
    pointer-events: none;
    opacity: 0.5;
    cursor: default;
}

/*** emoji-layout ***/
.chat-input-toolbar-footer .emoji-icon-button {
    display: none; /* the default */
}
.chat-input-toolbar-footer.emoji-input-enabled .emoji-icon-button {
    display: inherit;
}

.chat-input-toolbar-footer.emoji-input-enabled .emoji-picker-layer:not(.yalst-hidden) {
    position: absolute;
	left: 37px;
	display: flex;
	bottom: 100%;
	width: 210px;
	flex-wrap: wrap;
    background-color: #ffffff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.2);
	*border-right-width: 2px;
	*border-bottom-width: 2px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
    padding: 20px 5px 0px 5px;
}

.chat-input-toolbar-footer:not(.emoji-input-enabled) .emoji-picker-layer {
    display: none; /* hide the emoji layer if the chat gets closed remotely */
}

.chat-input-toolbar-footer.emoji-input-enabled .emoji-picker-layer *:not(.utf8-smileys-close) {
	height: 20px;
	width: 20px;
	padding: 0 10px 10px 0;
	font-size: 20px;
	line-height: 20px;
	cursor: pointer;
}

.chat-input-toolbar-footer.emoji-input-enabled .emoji-picker-layer .utf8-smileys-close {
    cursor: pointer;
    font-size: x-large;
	 padding: 0;
    position: absolute;
    right: 3px;
    top: -10px;
}

/*** Audio/Video ***/

.ui-page[id^=chatPage]:not(.audio-video-visitor-can-enter-at-will) .chat-input-toolbar-footer .audio-video-button {
    display: none;
}

/************ validation errors ***********/

label.error
{
    color: red;
}

.ui-content.yalst-error[data-role=popup]
{
    /*color: red;*/ /* deactivated so that it is taken over by A-Swatch text color. In order to ensure readability on A-swatch background */
}

/*** any display size ***/

.ui-field-contain.yalst-mini-padding {
	/* undo wide display setting in jquery.mobile.tweaks.css */
	margin-bottom: inherit;
	margin-top: inherit;
	padding: 0.5em 0 0 0;
}

/****** tall or narrow displays *******/

@media (max-width: 28em)
{

    .yalst-mini-padding,
    .yalst-field-contain-with-tail-icon.yalst-mini-padding
    {
        padding: 0.5em 0 0 0;
    }

    /* reduce some blank space above */
    .ui-content .ui-field-contain:first-child
    {
        margin: -13px 0 0 0;
    }

    .yalst-mini-padding .ui-checkbox
    {
        margin-bottom: 0;
    }
}

/******* wide or landscape displays *******/

@media (min-width: 28em)
{
    /* reduce some blank space above */
    .ui-content .ui-field-contain:first-child
    {
        margin: -3px 0 0 0;
    }
}

.ui-alt-icon.ui-icon-alert:after {
    background: url("images/error.svg") no-repeat top left;
    background-size: contain;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
}

.ui-alt-icon.ui-icon-info:after,.ui-alt-icon .ui-icon-info:after {
    background: url("images/info.svg") no-repeat top left;
    background-size: contain;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
}

.yalst-button-icon-notext {
    width: 32px;
    height: 32px;
}

.yalst-button-icon-notext.ui-button:focus,.yalst-button-icon-notext.ui-button,.yalst-button-icon-notext.ui-button-active {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

/**** text input fields ****/
/* placeholder styling see
    https://css-tricks.com/almanac/selectors/p/placeholder/
     and this comment
    https://css-tricks.com/almanac/selectors/p/placeholder/#comment-864116
*/
.warning-placeholder-text::-webkit-input-placeholder
{
    color: rgb(216, 91, 91);
    font-weight: bold;
    opacity: 1;
}

.warning-placeholder-text::-moz-placeholder
{
    color: rgb(216, 91, 91);
    font-weight: bold;
    opacity: 1;
}

.warning-placeholder-text:-ms-input-placeholder
{
    color: rgb(216, 91, 91);
    font-weight: bold;
    opacity: 1;
}

.info-placeholder-text::-webkit-input-placeholder
{
    color: rgb(69, 138, 199);
    font-weight: bold;
    opacity: 1;
}

.info-placeholder-text::-moz-placeholder
{
    color: rgb(69, 138, 199);
    font-weight: bold;
    opacity: 1;
}

.info-placeholder-text:-ms-input-placeholder
{
    color: rgb(69, 138, 199);
    font-weight: bold;
    opacity: 1;
}

/**** Footer Imprint Links ****/

.footer-imprint {
    font-size: 0.9em;
    text-shadow: none;
    z-index: 21;
}

.footer-imprint a,
.footer-imprint a:visited {
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

.footer-imprint a:hover {
    text-decoration: none;
}

.copyright {
    right: 0.7em;
}

.contactFormCopyrightLink {
    right: 0.7em;
}

.privacy {
    left: 0.7em;
}

.contactFormPrivacyLink {
    left: 0.7em;
}

.privacy, .copyright, .contactFormCopyrightLink, .contactFormPrivacyLink {
	position: fixed;
	bottom: .4em;
}

div[data-role=page][id^=chatPage] .copyright,
div[data-role=page][id^=chatPage] .privacy {
    bottom: 65px;
    right: 20px;
    z-index: inherit;
}

@media screen and (orientation: landscape) {
	.isSmartphone :is(
	.privacy,
	.copyright,
	.contactFormCopyrightLink,
	.contactFormPrivacyLink,
	div[data-role=page][id^=chatPage] .copyright,
	div[data-role=page][id^=chatPage] .privacy
	 ) {
		bottom: max(.4em, env(safe-area-inset-bottom));
	}
	
	.isSmartphone .privacy-powered-by-footer {
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.isSmartphone div.ui-page[data-role=page][id^=chatPage] .chat-input-toolbar-footer {
		display: none;
	}
	
	.isSmartphone div.ui-page[data-role=page][id^=chatPage] {
		min-height: -webkit-fill-available !important;
	}
	
	.isSmartphone #outputcontactphp_form {
		margin-bottom: calc(var(--privacy-powered-by-footer-content-height) + env(safe-area-inset-bottom));
	}
}

/* see that the last bubble does not cover the view of the copyright line */
body:not(.white-label) .chat-conversation-view .scroll-target-below_all_bubbles
{
    margin-top: 1em;
}

/* file transfer icons */

.image-file .viewable-image
{
    display: inline-block;
}

.zip-file .zip-file-icon
{
    display: inline-block;
}

.pdf-file .pdf-file-icon
{
    display: inline-block;
}

.doc-file .doc-file-icon
{
    display: inline-block;
}

.unknown-file .unknown-file-icon
{
    display: inline-block;
}

.viewable-image
{
    max-width: 100%;
    display: none;
}

.pdf-file-icon,
.doc-file-icon,
.zip-file-icon,
.unknown-file-icon
{
    display: none;
}

/******* the upload review dialog box **********/

.upload-dialog-subtitle
{
    font-size: small;
}

/* set heights for the column flexbox design to work    */
/* The total height will be dynamic according to the screen height */
/* while the contained image will adapt its height. */

/* the height must not exceed 500px or the dialog will look ugly */
#upload-review-dialog
{
    height: 100%;
    max-height: 500px;
    min-height: inherit !important;
    z-index: 1;  /* sollte die <leyve-app> überdecken */
}

#upload-review-dialog div[role=dialog]
{
    height: 95%;
    margin-top: 0.5em;
    top: 0;
}

#upload-review-dialog .ui-content
{
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 91%; /* div[role=dialog] parent height - vertical margins */
}

#upload-review-dialog .ui-content > *,
#text-review-dialog .ui-content .upload-dialog-title
{
    margin: 0.5em 0 0.5em; /* avoid a too crammed UI */
}

#upload-review-dialog div.viewable-image
{
    flex: 1 1 auto;
}

#upload-review-dialog svg
{
    flex: 1 1 auto;
    height: auto;
    width: auto;
    align-self: stretch;
}

#upload-review-dialog .dialog-button-footer
{
    align-self: stretch;
}

/**** for small heights (smartphone landscape) save some height ****/

@media (max-height: 500px)
{
    body:not(.in-page-embedded) #upload-review-dialog .upload-dialog-subtitle
    {
        display: none;
    }

    body:not(.in-page-embedded) #upload-review-dialog .upload-dialog-title
    {
        margin-top: 0.2em;
        margin-bottom: 0.2em;
    }
}


#upload-review-dialog .upload-review-error,
#upload-review-dialog .image-down-sampling
{
    display: none;
}

#upload-review-dialog .dialog-button-footer
{
    display: flex;
    justify-content: space-between;
}

#upload-review-dialog .dialog-button-footer .ui-button-inline,
#text-review-dialog .dialog-button-footer .ui-button-inline
{
    margin: 0;        /* remove awkward jQuery Mobile setting */
}

#upload-review-dialog .ui-content.error .upload-review-error,
#upload-review-dialog .ui-content.compression-pending .image-down-sampling
{
    display: inherit;
}

#upload-review-dialog .ui-content.error #use-file-for-upload-button,
#upload-review-dialog .ui-content.compression-pending #use-file-for-upload-button
{
    display: none;
}

/******* Close Chat dialog box **********/

.close-chat-button-group {
	text-align: center;
}

.close-chat-button-group .ui-button {
	margin: 0.5em;
}

.close-chat-button-group .ui-button-inline{
	margin-right: 0em;
	margin-left: 1em;
}

/******* Rating dialog box **********/

.rating-dialog-button-group {
	text-align: center;
}

/******* Transcipt email dialog box **********/

.email-button-group {
	text-align: center;
}

/******* Privacy Statement (Text Review) dialog box **********/

#text-review-dialog
{
    height: 100%;       /* must set all heights to prevent the text field from overflowing */
}

#text-review-dialog div[role=dialog]
{
    height: 95%;
    margin-top: 0.5em;
    top: 0;
}
#text-review-dialog div.ui-content[role=main]
{
    text-align: center;
    height: 95%;
    display: flex;
	 flex-direction: column;
}

#text-review-dialog p
{
    padding: 0.3em;
    overflow-y: auto;
    max-height: 90%;
}

.text-do-not-break-out
{
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

#text-review-dialog .dialog-button-footer
{
    justify-content: center;
}

/*******  Export Transcript Popup *****/
.transcript-export-choice-buttons-container
{
    display: flex;
	margin: 1em 0;
	justify-content: space-around;
}

.transcript-export-choice-buttons-container .icon-button
{
    text-align: center;
    cursor: pointer;
}

.transcript-export-choice-buttons-container .icon-button:active
{
    border-width: 1px;
	border-color: black;
	border-style: solid;
	border-radius: 3px;
}

.transcript-export-choice-buttons-container .icon-button.disabled
{
    cursor: default;
    pointer-events: none;
    opacity: 0.5;
}

.transcript-export-choice-buttons-container a.download-icon-button {
    outline: none;
    text-decoration: none;
    /* Do not style the download transcript link as anchor tag */
    color: inherit;
}

.ui-collapsible-content.export-transcript-error {
    text-align: center;
}

/******* Email Send Popup ****/

.email-send-popup
{
    max-width:400px;
}

.email-send-popup .email-send-error,
.email-send-popup .email-send-ok
{
    text-align: center;
}

.email-send-popup .email-send-error,
.email-send-popup .email-send-ok,
.email-send-popup .email-close-button-group
{
    display: none;
}

.email-send-popup .ui-content.error .email-send-error,
.email-send-popup .ui-content.done .email-send-ok,
.email-send-popup .ui-content.done .email-close-button-group
{
    display: block;
}

.email-send-popup .ui-content.done .email-button-group
{
    display: none;
}

.email-send-popup .input[type=email] {
    width: 100%;
}

/**** the privacy checkbox ****/

label[for^=privacy] {
	font-size: 13px;
	font-weight: normal;
}

/*** Undo jQuery Mobile Fix for Firefox ***/

@-moz-document url-prefix() {
    .ui-mobile fieldset {
        display: inherit;
        vertical-align: inherit;
    }
}

/***** Changes for Mobile before relaunch ****/

.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
	font-weight: normal;
}

.ui-button {
	font-size: 1em;
	line-height: 1.2em;
	margin: .5em 0;
	padding: .5em 1em;
	font-weight: normal;
}

.ui-button.send-text-button {
	font-size: 1em;
	line-height: 1em;
	font-weight: normal;
}

/* TODO: The next few lines are copied from jquery.mobile.theme.css. Can they be deleted? */
/* Focus */
.ui-page-theme-a .ui-button:focus,
html .ui-bar-a .ui-button:focus,
html .ui-body-a .ui-button:focus,
html body .ui-group-theme-a .ui-button:focus,
html head + body .ui-button.ui-button-a:focus,
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-a .ui-focus,
html .ui-bar-a .ui-focus,
html .ui-body-a .ui-focus,
html body .ui-group-theme-a .ui-focus,
html head + body .ui-button-a.ui-focus,
html head + body .ui-body-a.ui-focus {
	-webkit-box-shadow: none /*{a-active-background-color}*/;
	-moz-box-shadow: none /*{a-active-background-color}*/;
	box-shadow: none /*{a-active-background-color}*/;
}

/* Active button */
.ui-page-theme-a .ui-button.ui-button-active,
html .ui-bar-a .ui-button.ui-button-active,
html .ui-body-a .ui-button.ui-button-active,
html body .ui-group-theme-a .ui-button.ui-button-active,
html head + body .ui-button.ui-button-a.ui-button-active {
	background-color: #DDDDDD /*{a-active-background-color}*/;
	border-color: #999999 /*{a-active-border}*/;
	color: #000000 /*{a-active-color}*/;
	text-shadow: none;
}

.ui-button-icon-left:after,
.ui-button-icon-right:after,
.ui-button-icon-top:after,
.ui-button-icon-bottom:after,
.ui-button-icon-notext:after {
	background-color: #4D4D4D /*{global-icon-color}*/;
}

.ui-page-theme-a .ui-button.ui-checkbox-off:not(.ui-button-c),
.ui-page-theme-a .ui-button.ui-checkbox-on:not(.ui-button-c),
.ui-page-theme-a .ui-button.ui-checkbox-off:not(.ui-button-c):hover,
.ui-page-theme-a .ui-button.ui-checkbox-on:not(.ui-button-c):hover
{
	border: 0px;
	background: initial;
	background-color: initial;
	color: initial;
}

.ui-page-theme-a .ui-button.ui-checkbox-off ~ input,
.ui-page-theme-a  .ui-button.ui-checkbox-on ~ input{
	opacity: 0;
}

.ui-button.ui-checkbox-off:after {
	background-color: #FFFFFF;
	border: 1px solid #4D4D4D;
	opacity: 1;
	border-radius: 5px;
	margin-left: -0.5em;
}

.ui-button.ui-checkbox-on:after {
	border: 1px solid #4D4D4D;
	border-radius: 5px;
	margin-left: -0.5em;
}

.ui-alt-icon.ui-icon-info:after, .ui-alt-icon .ui-icon-info:after {
	filter: invert(100%) sepia(82%) saturate(0%) hue-rotate(203deg) brightness(102%) contrast(77%);
}

.welcome-text {
	font-size: 1em;
}

p.welcome-text[data-bind$="welcomeDetailPhrase"],
p.welcome-text[data-bind$="commonWelcomeDetailPhrase"]{
	font-size: 1em;
}

.ui-button-icon-left {
	padding-left: 2em;
}

label.ui-button {
	font-weight: normal;
}

.yalst-button-icon-notext {
    padding: 0px;
}

/*** Styling for privacy and imprint fake footer ***/

.privacy-powered-by-footer {
	position: fixed;
	height: var(--privacy-powered-by-footer-content-height);
	bottom: 0;
	left: 0;
	width: calc(100% - 14px);
	padding: 0;
	z-index: 20;
	border-top: 1px solid black;
	margin: 0 7px;
}

.footer-imprint.privacy a, .footer-imprint.privacy a:hover ,.footer-imprint.privacy a:visited  {
	background-color: transparent !important;
	border: none;
}

div[data-role=content] {
	padding: 15px var(--div-with-role-content-right-padding) 40px var(--div-with-role-content-left-padding);
}
div[data-role=main].ui-content {
	padding-left: max(1em, var(--safe-area-inset-left-when-viewport-fit-cover)); /* 1em is jQueryMobile original */
	padding-right: max(1em, var(--safe-area-inset-right-when-viewport-fit-cover));
}
#wizard-department-choice-page div.ui-content[data-role=main] {
	padding-bottom: calc(var(--privacy-powered-by-footer-content-height) + env(safe-area-inset-bottom));
}

.ui-shadow,
.ui-page-theme-d .ui-button:focus,
html .ui-bar-d .ui-button:focus,
html .ui-body-d .ui-button:focus,
html body .ui-group-theme-d .ui-button:focus,
html head + body .ui-button.ui-button-d:focus,
.ui-page-theme-d .ui-focus,
html .ui-bar-d .ui-focus, html .ui-body-d .ui-focus,
html body .ui-group-theme-d .ui-focus,
html head + body .ui-button-d.ui-focus,
html head + body .ui-body-d.ui-focus {
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

#answerfaqphp_searchform_p,
#searchfaqphp_searchform_p,
#outputfaqphp_searchform_p{
	 display: flex;
	 padding: 10px;
}

#answerfaqphp_searchform_p div,
#searchfaqphp_searchform_p div,
#outputfaqphp_searchform_p div {
	 flex-grow: 4;
}

#answerfaqphp_searchform_p button,
#searchfaqphp_searchform_p button ,
#outputfaqphp_searchform_p button {
	 margin-left: 10px;
    flex-grow: 1;
    width: 70px;
}

#outputfaqphp_body .ui-page-theme-a .ui-button.ui-shadow:hover,
#outputcontactphp_form .ui-button.ui-shadow:hover {
	text-decoration: none;
}

#outputfaqphp_body #answerfaqphp_mailthis_link2,
#outputfaqphp_body #searchfaqphp_home_div {
	text-decoration: none;
}

#searchfaqphp_home_div2 {
	 text-align: -webkit-center;
	 text-align: -moz-center;
	 padding: 0 10px;
}

#searchfaqphp_home_div2 button {
	 display: flex;
    justify-content: center;
	 align-items: center;
	 padding: 0.3em 1em;
}

.ui-mobile .upload-icon-button label {
	margin: 0 0 -0.3em;
}

.ui-page-theme-a a.faqarticlelink,
.ui-page-theme-a a.faqtoplink,
.ui-page-theme-a a.faqnewlink
{
	font-weight: normal;
	font-style: italic;
}

.ui-page-theme-a a, .ui-page-theme-a a:link, .ui-page-theme-a a:visited, .ui-page-theme-a a:hover, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
    font-weight: normal;
	 /*color: #252525;*/
}

.ui-page-theme-a a:hover {
	 text-decoration: underline;
}

/*** Styling for new parameter mobileInNewTab ***/

.dont-show {
	display: none !important;
}


/**** The department choice page ****/

.department-selector-label {
	     text-align: center;
		  margin-top: 25px;
}

#wizard-department-choice-page fieldset {
		  padding: 10px;
}

/**** The header buttons ****/

div[data-type=header] .ui-button {
     margin-top: 3px;
}

div[data-type=header] .ui-toolbar-header-button-left {
    margin-left: calc(var(--safe-area-inset-left-when-viewport-fit-cover) / 2);
}

div[data-type=header] .ui-toolbar-header-button-right {
    margin-right: calc(var(--safe-area-inset-right-when-viewport-fit-cover) / 2);
}

/** Language toggle button **/

language-toggle-button {
	 margin-top: 1px
}

language-toggle-button svg {
	 border: solid 1px #999999;
}

html .ui-bar-e .ui-button:focus {
	 box-shadow: none !important;
}

/**** Popup and Dialog headers ****/

.ui-header .ui-title
{
    margin: 0 15%;
}

.ui-popup .ui-title,
.dialog-popup-button-group,
.email-close-button-group
{
    /* looks better on both mobile and inpage for dialog contents and buttons */
    text-align: center;
}

.ui-popup .ui-title {
	 font-size: 1em;
    min-height: 1.1em;
}


.ui-title-rating {
	 margin-bottom: 0px;
}

.ui-toolbar .ui-toolbar-title, .ui-toolbar-header .ui-toolbar-title, .ui-toolbar-footer .ui-toolbar-title {
	 margin: 0;
}

/*** Popup Dialog Inline SVGs Colouring ***/
.ui-popup .ui-content svg {
    fill: currentColor; /* supports dark/light mode */
}

/*** Darkmode settings ***/

@media(prefers-color-scheme:dark) {
	 .privacy-powered-by-footer{
		  /*background: #252525;*/
	 }
	 privacy-powered-by-footer .privacy-powered-by-footer {
		  border-top: 1px solid white;
	 }
	 .footer-imprint.privacy a {
		  background: transparent;
		  color: white;
	 }
	 .footer-imprint.privacy a:hover, .footer-imprint.privacy a:visited {
		  background: transparent;
		  color: #CCCCCC;
	 }
	 powered-by-yalst span {
		  color: white;
	 }
	 powered-by-yalst a {
		  color: white;
	 }
	 img.faqquestion, img.faqsections_icon  {
		  filter: invert(1);
	 }
	 language-toggle-button svg {
		  border: none;
	 }
	 #searchfaqphp_home_div2 img {
		  filter: invert(98%) sepia(1%) saturate(2%) hue-rotate(129deg) brightness(104%) contrast(101%);
	 }
}

@media(prefers-color-scheme:light) {
	 .ui-page-theme-a#text-review-dialog  a {
		  background-color: inherit !important;
	 }
}

/**** Invitations with Preset-Based Integration ****/

.launched-on-invitation .welcome-text {
    display: none;
}

/*** bugfix for check boxes in flex on mobile devices ****/

.ui-checkboxradio-label .ui-icon.ui-checkboxradio-icon {
	min-width: 18px;
}