/*##############################################################################

    CONFIG VALUES

##############################################################################*/

:root
{
	--primaryColor: #885426;
	--primaryColor-Hover: #000000; /* if "#000000" hover color is calculated */

	--mainFont: 'Roboto Condensed', sans-serif;
	--mainFontSize: 16px;

	--mainBorderThickness: 2px;
	--mainBorderRadius: 1px;
}

/*#############################################################################
    FORM FIELDS
##############################################################################*/

#grid-wrapper .txfe_vorname     { /*display: none !important;*/ }
#grid-wrapper .txfe_name        { /*display: none !important;*/ }
#grid-wrapper .txfe_email       { /*display: none !important;*/ }
#grid-wrapper .txfe_telefon     { /*display: none !important;*/ }
#grid-wrapper .txfe_confirmSMS  { display: none !important; }
#grid-wrapper .txfe_bemerkung   { /*display: none !important;*/ }

#grid-wrapper .txfe_praefix     { display: none !important; }
#grid-wrapper .txfe_firma       { display: none !important; }
#grid-wrapper .txfe_raumWunsch  { display: none !important; }
#grid-wrapper .txfe_geburtstag  { display: none !important; }
#grid-wrapper .txfe_kinder      { display: none !important; }
#grid-wrapper .txfe_babies      { display: none !important; }
#grid-wrapper .txfe_herkunft    { display: none !important; }

#eval tr[title="txfe_anrede"]>td:first-child        { display: none; }
#eval tr[title="txfe_praefix"]>td:first-child       { display: none; }
#eval tr[title="txfe_vorname"]>td:first-child       { display: none; }
#eval tr[title="txfe_name"]>td:first-child          { display: none; }
#eval tr[title="txfe_email"]>td:first-child         { display: none; }
#eval tr[title="txfe_telefon"]>td:first-child       { display: none; }
#eval tr[title="txfe_bemerkung"]>td:first-child     { display: block; font-size: 15px; font-family: var(--mainFont); }
#eval tr[title="txfe_bemerkung"]>td:last-child      { display: inline; }
#eval tr[title="txfe_anrede"]                       { display: inline; }
#eval tr[title="txfe_praefix"]                      { display: none; }
#eval tr[title="txfe_vorname"]                      { display: inline; margin-left: -10px; margin-right: -10px; }
#eval tr[title="txfe_name"]                         { display: inline; }
#eval tr[title="txfe_bemerkung"]                    { display: inline; margin-top: 10px; }
#eval tr[title="txfe_telefon"]                      { display: block; margin-bottom: 20px; }
#eval tr[title="txfe_telefon"]>tr:last-child::after { content:"<tr></tr>" }

/*##############################################################################
    FONT/S
##############################################################################*/

@font-face
{
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('font/inter-v18-latin-regular.woff2') format('woff2');
}

@font-face
{
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('font/inter-v18-latin-700.woff2') format('woff2');
}

/*##############################################################################
    FURTHER CONFIG VARRIABLES
##############################################################################*/

:root
{
	/* Use this for a widget with fixed width */
	--totalWidth: unset;

	/* Use this for a responsive widget width */
	--totalWidth-Min: 340px;
	--totalWidth-Max: 560px;

	/* Main */
	--mainContentWidth: 96%; /* Main sizes -> How much of the totalWidth is used for displaying content */
	--mainLineHeight: 42px; /* Main sizes -> height of certain main elements */
	--calendarLineHeight: 54px; /* Main sizes -> heihgt of a row for one week in the calendar */
	--watchLineHeight: var(--mainLineHeight);  /* Main sizes -> heihgt of a row for one hour when showing available times */
	--inputLineHeight: var(--mainLineHeight); /* Main sizes -> height of inputs, selects, buttons*/
	--borderRadiusFieldWrapper: var(--mainBorderRadius); /* Border radius -> inputs, selects, textareas */
	--cursorDefault: default;
	--cursorHover: pointer;
	--cursorNot: not-allowed;
	--txTransitionSpeed: 200ms;

	/* Font sizes */
	--progressorInfoFontSize:       calc(var(--mainFontSize) + 0px);
	--monthButtonFontSize-Month:    calc(var(--mainFontSize) + 0px);
	--monthButtonFontSize-Year:     calc(var(--mainFontSize) - 2px);
	--inputFontSize:                calc(var(--mainFontSize) + 0px);
	--fontSizeTime-Hours:           calc(var(--mainFontSize) + 0px);
	--fontSizeTime-Quarters:        calc(var(--mainFontSize) + 0px);

	/* Colors -> main colors */
	--mainFontColor: #121212;
	--mainBackgroundColor: white;
	--mainBorderColor: #343434;

	/* Colors -> calendar -> week days */
	--weekDayFontColor: var(--mainFontColor);

	/* Colors -> calendar -> past days */
	--dayPastFontColor: #232323;
	--dayPastBackgroundColor: transparent;

	/* Colors -> calendar -> today */
	--dayTodayFontColor: var(--primaryColor);
	--dayTodayFontColor-Hover: var(--mainFontColor);
	--dayTodayBackgroundColor: transparent;
	--dayTodayBackgroundColor-Hover: transparent;
	--dayTodayBorderColor: transparent;
	--dayTodayBorderColor-Hover: var(--primaryColor);

	/* Colors -> calendar -> future days */
	--dayActiveFontColor: var(--primaryColor);
	--dayActiveFontColor-Hover: var(--mainFontColor);
	--dayActiveBackgroundColor: transparent;
	--dayActiveBackgroundColor-Hover: transparent;
	--dayActiveBorderColor: transparent;
	--dayActiveBorderColor-Hover: var(--primaryColor-Hover);

	/* Colors -> buttons */
	--buttonFontColor: white;
	--buttonFontColor-Hover: white;
	--buttonBackgroundColor: var(--primaryColor);
	--buttonBackgroundColor-Hover: var(--primaryColor-Hover);
	--buttonBorderColor: var(--primaryColor);
	--buttonBorderColor-Hover: var(--primaryColor-Hover);

	/* Colors -> form -> input fields */
	--inputBackgroundColor: #efefef;
	--inputErrorColor: #bb0000;

	/*------------------------------------------------------------------------------
        VARIABLES FROM  OLD WIDGET VERSION - not all are still in use
    ------------------------------------------------------------------------------*/

	/* Border radius -> progressor, month select */
	--borderRadiusDefault: var(--mainBorderRadius);

	/* Border radius -> zeitauswahl, book button */
	--borderRadiusDayTime: var(--mainBorderRadius);

	/* Colors -> progressor */
	--defaultProgBord: red;
	--currentProg: red;
	--currentProgBord: red;
	--youngerProg: red;
	--youngerProgBord: red;

	/* Colors -> buttons (Absenden, Weiter, Zurück) */
	--bookbuttonfontstyle: bold;
	--backgroundButton: var(--dayTodayBackgroundColor);
	--fontButton: var(--dayTodayFontColor);
	--borderButton: var(--buttonBorderColor);
	--backgroundButtonH: red;
	--fontButtonH: var(--buttonFontColor-Hover);
	--borderButtonH: red;

	/* Colors -> watch, day, month, hover */
	--HoverBackgroundColor: transparent;
	--HoverFontColor: #ffffff;
	--borderColor: #343434;

	/* Colors -> options */
	--backgroundOptions: whitesmoke;

	/* Colors -> grid & lines */
	--gridColor: transparent;
}

/*##############################################################################
    WIDGET MAIN
##############################################################################*/

body
{
	/* Use this for widget with fixed with */
	width: var(--totalWidth);

	/* Use this for responsive widget with a minimum and maximum breakpoint */
	min-width: var(--totalWidth-Min);
	max-width: var(--totalWidth-Max);

	margin: 0 auto;
	padding: 0;

	font-family: var(--mainFont);
	font-size: var(--mainFontSize);
	color: var(--mainFontColor);

	text-align: right;

	cursor: var(--cursorDefault) !important;
}

.limiter
{
	text-align: left;
	box-sizing: border-box;
}

.progressor
{
	display: none !important;
}

section
{
	margin-top: 18px;
}

/*##############################################################################
    OTHER
##############################################################################*/

.fa-arrow-right
{
	display: none !important;
}

section > nav
{
	min-height: 0 !important;
}

.hide
{
	display: none;
}

.show
{
	display: inline !important;
}

.hide-arrow
{
	opacity: 0.2;
	cursor: not-allowed !important;
}

.show-arrow
{
	opacity: 1;
	display: inline !important;
	cursor: pointer !important;
}

@media (min-width:600px)
{
	.remmonth
	{
		float: left;
		cursor: var(--cursorHover);
		top: 23px;
	}

	.addmonth
	{
		float: right;
		cursor: var(--cursorHover);
		top: 23px;
	}
}

@media (min-width: 430px)
{
	.month-button
	{
		margin: 0 1.4% !important;
	}
}

@media (min-width: 580px)
{
	.month-button
	{
		margin: 0 2% !important;
	}
}

.iti__flag-container
{
	padding-top: 0px !important;
}

.iti--separate-dial-code .iti__selected-flag
{
	background-color:inherit !important;
}

/*##############################################################################
    STORNO
##############################################################################*/

#stornomessage
{
	font-size:24px;
	color: #fff;
	text-align:center;
	padding-top:50px;
	padding-bottom:50px;
}

.stornoButton
{
	width: 210px;
	height: 60px;

	font-weight: bold;
	font-size: 16px;
	color: #fff;

	cursor: var(--cursorHover);

	background: #048D66 0% 0% no-repeat padding-box;

	border: var(--mainBorderThickness) solid #048D66;
	border-radius: var(--mainBorderRadius);

	transition: all var(--txTransitionSpeed) ease;
}

.stornoButton:hover
{
	color: #048D66;
	background: #fff;
}

.StornoouterDiv
{
	width: 100%;

	display: flex;

	margin: 0 auto;
	margin-top: 4vh;
	padding: 16px;

	border-radius: calc(var(--mainBorderRadius) * 1.2);
}

@media (min-width:600px)
{
	.StornoouterDiv
	{
		width: 100%;

		display: flex;

		margin: 0 auto;
		margin-top:4vh;

		text-align:center;
	}

	.StornoinnerDiv
	{
		background-color: #2e2e2d;
		max-width: 350px;
		height: 100%;
		color: white;
		margin: 0 auto;
		border-radius: var(--mainBorderRadius);
		padding-bottom: 2%;
	}
}

@media (max-width:599px)
{
	.StornoouterDiv
	{
		width: 100%;
		display: flex;
		margin: 0 auto;
	}

	.StornoinnerDiv
	{
		background-color: #2e2e2d;
		width: 100%;
		height: 100%;
		color: white;
		margin: 0 auto;
		border-radius: 0px;
	}
}

/*##############################################################################
    CUSTON ALERT
##############################################################################*/

div.custom-alert
{
	background-color: rgba(255, 255, 255, 0.6);
}

div.custom-alert>div.alert-window
{
	background-color: rgba(255, 255, 255, 0.8);
	border: var(--mainBorderThickness) solid #eeeeee;
	border-radius: var(--mainBorderRadius);
}

div.custom-alert > div.alert-window>div.closer
{
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 35px;
	line-height: 16px;
	opacity: 0.6;
	cursor: var(--cursorHover);
}

div.custom-alert > div.alert-window>div.message
{

}

/*##############################################################################
    Eval info
##############################################################################*/

div.evalInfo
{
	width: calc(100% - 2 * var(--option-like-padding));
	margin: 0 auto;
	margin-top: 5px;
	border-radius: var(--mainBorderRadius);
	padding: var(--option-like-padding);
	position: relative;
	text-align: left;
	max-width: 340px;
}

div.evalInfo > div
{
	margin-top: 5px;
}

div.evalInfo > div:first-child
{
	margin-top: 0;
}

section#_form > nav > .nav-button-next:nth-of-type(1)
{
	display: none !important;
}

#pickedInfoContainer,
#pickedInfoContainerStart
{
	font-size: var(--progressorInfoFontSize);
	font-weight: bold;

	width: 100%;
	text-align: center;

	color: var(--buttonFontColor);

	display: flex;
	justify-content: space-between;
}

.progressorInfo
{
	font-size: var(--progressorInfoFontSize);
	display: inline !important;
}

#repeatButton
{
	display: none !important;
}

.younger
{
	background-color: #fff;
	border: var(--mainBorderThickness) solid transparent !important;
}

/*##############################################################################
    Autocomplete
##############################################################################*/

div.option-like
{
	font-size: var(--mainFontSize);

	margin: 0 0 5% 0 !important;

	display: inline-block;
	border: var(--mainBorderThickness) solid transparent;

	cursor: var(--cursorPointer);
}

div.pax-select-like
{
	text-align: center;

	width: 100%;
	display: inline-block;

	padding-left: 0 !important;
	margin-left: 0 !Important;

	margin-bottom: 5% !important;

	cursor: var(--cursorHover);
}

#vd
{
	outline: none;
	font-size: var(--mainFontSize);
	cursor:var(--cursorHover);
}

#pax-select
{
	outline: none;
	font-size: var(--mainFontSize) !important;
	font-family: var(--mainFont) !important;
}

.pax-label-right
{
	width: 0px !important;
}

.vd-option-like
{
	background-image: url("img/watch.png");
	background-repeat: no-repeat;
	background-position: 10% 50%;
	background-size: 25px 25px;
	border: var(--mainBorderThickness) solid #ECECEC;
	border-radius: 10px;
}

.vd-option-like select
{
	background-color: inherit;
}

.vd-option-like select:focus
{
	background-color: transparent;
}

.pax-select-like
{
	background-image: url("img/persons.png");
	background-repeat: no-repeat;
	background-position: 10% 50%;
	background-size: 25px 25px;

	border: var(--mainBorderThickness) solid transparent;

	line-height :25px;
	border-radius: var(--mainBorderRadius);

	background-color: var(--buttonBackgroundColor);
}

.pax-select-like:hover
{
	background-color: var(--buttonBackgroundColor-Hover);
}

.pax-select-like:hover #pax-select
{
	background-color: var(--buttonBackgroundColor-Hover);
}

.indicateRed
{
	background-color: rgba(255, 224, 224, 1.0);
}

section > nav
{
	display: flex !important;
	justify-content: center !important;
}

section > nav > div.nav-button
{
	transition: all var(--txTransitionSpeed) ease;
}

section#options > nav:first-child
{
	display:none;
}

.nav-button-center
{
	width: 100%;
}

.nav-button-back
{
	display: none;
}

.container-options-lists .checker
{
	right: 0;
	left: 0 !important;
}

.nav-button-next
{
	color: var(--buttonFontColor);
	background-color: var(--buttonBackgroundColor);

	font-size: var(--mainFontSize);
	font-weight: bold;
	text-align: center;

	border-radius: var(--mainBorderRadius);
	border: var(--mainBorderThickness) solid var(--buttonBorderColor);

	padding: 9px 0;

	width: 100%;
	box-sizing: border-box;
}

.nav-button-next:hover
{
	color: var(--buttonFontColor-Hover);
	background-color: var(--buttonBackgroundColor-Hover);

	border: var(--mainBorderThickness) solid var(--buttonBorderColor-Hover);
}

textarea
{
	margin: 0;
	padding: 0;

	margin-bottom: 9px !important;

	width: 66% !important;

	max-height: 70px !important;
	min-height: var(--mainLineHeight) !important;
}

#repeatButton
{
	margin-left: 44%;
}

#bookButton
{
	background-color: var(--backgroundButton, #fff);
	color: var(--fontButton, #111);
	border: var(--mainBorderThickness) solid var(--borderButton, #fff);
	border-radius: var(--borderRadiusDefault, 5px);
	font-size:var(--mainFontSize);
	width: 240px;
	text-transform: uppercase;
	text-align:center;
	height: 40px;
	padding-top: 9px;
}

#bookButton:hover
{
	background-color: var(--backgroundButtonH, #111);
	color: var(--fontButtonH, #fff);
	border: var(--mainBorderThickness) solid var(--borderButtonH, #111);
}

/* #################################################################
    Gäste + Dauer
################################################################# */

#pax-select
{
	width: 100%;
	border: none !important;
	border-radius: var(--borderRadiusFieldWrapper);

	cursor: var(--cursorHover);
}

#pax:focus
{
	outline: none;
	border: none !important;
}

#pax:hover
{
	outline: none;
	border: none !important;
}

#pax:active
{
	outline: none;
	border: none !important;
}

#xpax
{
	transform: translateY(10px);
	width: 200px !important;
	font-size:var(--mainFontSize);
	border-radius: var(--mainBorderRadius);
	top: 50px !important;
	left: 0px !important;
}

#vd
{
	border:none !important;
	outline:none ;
	color:#000;
}

.vd-option-like select,
.pax-select-like select
{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;

	background-image: url("data:image/svg+xml;utf8,<svg fill='%23fff' height='24' viewBox='0 0 27 27' width='32' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: right;
}

.selections
{
	margin-bottom: 20px;
}

/*##############################################################################
    WATCH
##############################################################################*/

#watch .booked-message
{
	padding: 10px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: var(--mainBorderRadius);
}

#watch .watchInfo
{
	background-color: #fff;
	border-radius: var(--mainBorderRadius);
	display:none;
}

#watch .hour .quarter
{
	background-color: transparent;

	text-align: center;

	border: var(--mainBorderThickness) solid transparent !important;
	border-radius: var(--mainBorderRadius);

	transition: all var(--txTransitionSpeed) ease;

	font-size: var(--fontSizeTime-Hours);
}

#watch .hour .quarter:hover
{
	background-color: var(--dayActiveBackgroundColor-Hover) !important;
	color: var(--dayActiveFontColor-Hover) !important;
	border: var(--mainBorderThickness) solid var(--dayActiveBorderColor-Hover) !important;
}

#watch .h-day-active:first-child{
	margin-top: 1000px !important;

}
#watch .h-day-active{
	height: var(--watchLineHeight);
	margin-bottom: -4px;
}

/*##############################################################################
    MONTH
##############################################################################*/

.month-buttons-container
{
	margin: 0 auto !important;
	width: var(--mainContentWidth);
	padding: 0 !important;
	margin-top: 5% !important;
}

.month-button
{
	background-color: transparent;
	border: var(--mainBorderThickness) solid var(--dayActiveBorderColor);
	border-radius: calc(2 * var(--borderRadiusDefault));

	transition: all var(--txTransitionSpeed) ease;
}

.month-button:hover
{
	background-color: var(--HoverBackgroundColor, #111);
	color: var(--HoverFontColor, #fff);
	border: var(--mainBorderThickness) solid var(--primaryColor-Hover);
}

.m-active
{
	background-color: var(--dayTodayBackgroundColor);
	color: var(--dayTodayFontColor);
	border: var(--mainBorderThickness) solid var(--dayTodayBorderColor);
}

/*##############################################################################
    CALENDAR
##############################################################################*/

.cal-container
{
	border-radius: var(--mainBorderRadius);
}

.cal-container .cal .booked-message
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 15px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: var(--mainBorderRadius);
	border: var(--mainBorderThickness) solid var(--mainBorderColor);
}

.cal-container .cal .day
{
	background-color: transparent;
	line-height: 60px;
	text-align: center;
	padding-bottom: 0;
	font-size: calc(var(--mainFontSize) + 2px);
}

.cal-container .cal .day,
.cal-container .cal .placebo,
.cal-container .cal .wd
{
	display: inline-block;
	width: 13%;
	margin: 0;
	text-align: center;
	padding: 0 !important;
	padding-bottom: 5px;
	margin-bottom: -1px;
	font-size: var(--mainFontSize);
}

.cal-container .cal .placebo {
	background-color: transparent;
	/*border: 1px dashed transparent;*/
}
.cal-container .cal .wd {
	background-color: transparent;

	/*padding-bottom:20px !important;*/
}
.cal-container .cal .d-active {
	color: var(--dayActiveFontColor);
	cursor: var(--cursorHover);
	border-radius: var(--borderRadiusDayTime,0px);
}

/*##############################################################################
    OPTIONS
##############################################################################*/

.option
{
	cursor: var(--cursorHover);
	width: 100%;
}

.active-option
{
	border: var(--mainBorderThickness) solid transparent;
}

.option > div.toolhandle
{
	background-color: #333;
}


#eval .option
{
	background-color: var(--backgroundOptions, #fff);
	border-radius: 5px;
	min-height: 0 !important;

	line-height:2;

	max-width: 400px;
	min-width: 300px;
}

#eval .option > div.toolhandle
{
	background-color: #eeeeee;
}

.option-headline
{
	margin: 0 auto;
	margin-top: 20px !important;

	padding: 0 !important;
	padding-left: 10px !important;

	text-align: left;
	font-weight: bold;

	font-size: calc(var(--mainFontSize) + 0px);
}

/*##############################################################################
    GRID WRAPPER
##############################################################################*/

#grid-wrapper
{
	width: 100%;
	display: inline-block;

	align-items: center;
	/*justify-content: content;*/

	margin-bottom: 20px;
	padding-top: 7px;
	padding-left: 5px;
}

#grid-wrapper .default-wrapper,
#grid-wrapper .select-wrapper,
#grid-wrapper .textarea-wrapper
{
	border: var(--mainBorderThickness) solid var(--mainBorderColor);
	background-color: var(--inputBackgroundColor);

	padding: 0;
	margin: 0 auto;
	margin-bottom: 11px;

	align-content: center;

	display: flex;
	flex-wrap: wrap;
}

.field-wrapper
{
	border-radius: var(--borderRadiusFieldWrapper) !important;
	box-sizing: border-box;
}

.field-wrapper,
.field-wrapper *
{
	color: var(--mainFontColor);
}

.iti
{
	width: 67%;
}

.txfe_confirmSMS,
.txfe_confirmSMS *,
.iti li
{
	color: var(--mainFontColor);
}

.txfe_confirmSMS,
.txfe_confirmSMS *
{
	cursor: pointer !important;
}

#grid-wrapper .default-wrapper label,
#grid-wrapper .select-wrapper label,
#grid-wrapper .textarea-wrapper label
{
	font-size: var(--inputFontSize);
	display: inline-block;

	width: 28.3%;
	padding-left: calc(var(--mainLineHeight) * 0.3);

	vertical-align: baseline;
	display: flex !important;
	flex-wrap: inherit;
	align-content: center;
}
#grid-wrapper .field-wrapper {
	display: flex;
	flex-wrap: wrap;
}
#grid-wrapper .field-wrapper label.mandatory:after
{
	content: ': *';
}

#grid-wrapper .field-wrapper label:after
{
	content: ':';
}

#grid-wrapper .field-wrapper.txfe_confirmSMS label:after
{
	content: '';
}

#grid-wrapper div.issues>div:last-child
{
	color: var(--inputErrorColor) !important;
}

#grid-wrapper .issues label.mandatory
{
	color: var(--inputErrorColor) !important;
}

#grid-wrapper .default-wrapper input,
#grid-wrapper .textarea-wrapper textarea,
#grid-wrapper .select-wrapper select
{
	width: 65.3%;
	height: var(--inputLineHeight);

	padding: 0 0 0 3.3%;
	margin: 0;

	background-color: transparent;

	font-size: var(--inputFontSize);
	font-family: var(--mainFont) !important;
	font-weight: bold !important;

	text-align: left;

	border: 0;
	border-bottom-right-radius: var(--borderRadiusFieldWrapper);
	border-top-right-radius: var(--borderRadiusFieldWrapper);

	box-sizing: border-box;
}

#grid-wrapper .default-wrapper input:focus,
#grid-wrapper .textarea-wrapper textarea:focus,
#grid-wrapper .select-wrapper select:focus
{
	background-color: transparent;
	outline: none;
}

#grid-wrapper .txfe_anrede
{
	order: -5;
}

#Labeltxfe_confirmAGB
{
	font-size: calc(var(--mainFontSize) - 7px) !important;
	width: 100%;
	display: inline-block;
	text-align: center;
	margin-top: 14px;
}

#grid-wrapper .txfe_confirmAGB
{
	grid-column: 1/3;
	font-size: 0.65em;
	padding-top:18px;
}

/*##############################################################################
    Eval
##############################################################################*/

#eval .evalInfoTable,
#eval .evalOptionsInfoTable
{
	width: 100%;
	margin-top: 15px;
}

#eval .evalInfoTable>tr>td,
#eval .evalOptionsInfoTable>tr>td
{
	vertical-align: top;
	padding: 3px;
}

#eval .evalInfoTable>tr>td:first-child:after
{
	content: ":";
}

#eval .evalOptionsInfoTable>tr>td:first-child:after
{
	content: ":";
}

#eval .evalInfoTable>tr>td:first-child,
#eval .evalOptionsInfoTable>tr>td:first-child
{
	width: 35%;
	text-align: left;
}

#eval .evalInfoTable>tr>td:last-child,
#eval .evalOptionsInfoTable>tr>td:last-child
{
	text-align: left;
	width: 90%;
	line-height: 0.8;
}

@media (min-width: 900px)
{
	#eval .evalOptionsInfoTable>tr>td:last-child
	{
		text-align: left;
		padding-left: 35%;
	}
}

@media (min-width: 600px)
{
	#eval .evalInfoTable,
	#eval .evalOptionsInfoTable
	{
		width: 100%;
		margin-top: 15px;
		margin-left:-5px;
		text-align:left;
	}
}

#evalInfoTimeOptions            { padding-left: 0px; padding-right: 0px; }
#evalInfoDateTime               { font-size: var(--progressorInfoFontSize); display:inline;}
#evalInfoPax                    { font-size: var(--progressorInfoFontSize); display:block;}
#evalInfoPax::before            { font-weight: normal !important; color: var(--mainFontColor); }
#evalInfoTimeOptions::before    { font-weight: normal !important; color: var(--mainFontColor); }
#evalInfoVerweildauer           { font-size: var(--progressorInfoFontSize); display:inline; }
#eval .evalInfoTable tr[title="txfe_confirmAGB"] { display: none; }

@media (max-width:599px) {
}

@media (min-width: 600px) {
}

@media (min-width: 900px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1440px) {
}

@media (min-width: 1800px) {
}

/*##############################################################################
    Days
##############################################################################*/

.day
{
	position: relative;
}

/* -----------------
    Active days
----------------- */

.d-active:not(.d-today)::before
{
	content: '';

	position: absolute;
	z-index: -2;

	background-color: var(--dayActiveBackgroundColor);

	border: var(--mainBorderThickness) solid transparent;
	border-radius:  calc(var(--mainBorderRadius) * 1.4);

	left: 0;

	margin-top: calc(var(--calendarLineHeight) * 0);
	margin-left: calc((100% - var(--calendarLineHeight) * 1) / 2);

	width: calc(var(--calendarLineHeight) * 1);
	height: calc(var(--calendarLineHeight) * 1);

	box-sizing: border-box;

	transform: scale(0.91);

	transition: all var(--txTransitionSpeed) ease;
}

.d-active:not(.d-today):hover::before
{
	background-color: var(--dayActiveBackgroundColor-Hover);
	border: var(--mainBorderThickness) solid var(--dayActiveBorderColor-Hover);

	transform: scale(1);
}

.d-active:not(.d-today):hover
{
	color: var(--dayActiveFontColor-Hover);
	font-weight: normal;
}

/* ----------------
    Today
---------------- */

.d-today
{
	color: var(--dayTodayFontColor) !important;
}

.d-today::before
{
	content: '';

	position: absolute;
	z-index: -1;

	background-color: var(--dayTodayBackgroundColor);

	border: var(--mainBorderThickness) solid var(--dayTodayBorderColor);
	border-radius:  calc(var(--mainBorderRadius) * 1.4);

	left: 0;

	margin-top: calc(var(--calendarLineHeight) * 0);
	margin-left: calc((100% - var(--calendarLineHeight) * 1) / 2);

	width: calc(var(--calendarLineHeight) * 1);
	height: calc(var(--calendarLineHeight) * 1);

	box-sizing: border-box;

	transform: scale(0.91);

	transition: all var(--txTransitionSpeed) ease;
}

.d-today:hover
{
	color: var(--dayTodayFontColor-Hover) !important;
}

.d-today:hover::before
{
	background-color: var(--dayTodayBackgroundColor-Hover);
	border: var(--mainBorderThickness) solid var(--dayActiveBorderColor-Hover);

	transform: scale(1);
}

/* -----------------
    Past days
----------------- */

.day:not(.d-active)
{
	color: var(--dayPastFontColor);
	background-color: var(--dayPastBackgroundColor);

	cursor: var(--cursorNot);
}

/*##############################################################################
    Month Buttons
##############################################################################*/

.month-button
{
	position: relative;

	color: var(--dayActiveFontColor);
	background: var(--dayActiveBackgroundColor);

	font-family: var(--mainFont) !important;
	font-size: var(--monthButtonFontSize-Month);

	letter-spacing: 0px;

	width: calc(var(--calendarLineHeight) * 1.4);
	height: calc(var(--calendarLineHeight) * 1.4);

	margin: 0 5px;

	border: var(--mainBorderThickness) solid var(--dayActiveBorderColor);
	border-radius: calc(var(--mainBorderRadius) * 2);

	text-align: center !important;
}

.month-button:hover
{
	color: var(--dayActiveFontColor-Hover);
	background: var(--dayActiveBackgroundColor-Hover);
	border: var(--mainBorderThickness) solid var(--primaryColor-Hover);
}

.m-active
{
	color: var(--buttonFontColor);
	background: var(--primaryColor);
	border: var(--mainBorderThickness) solid var(--primaryColor-Hover);
}

.m-active:hover
{
	color: var(--buttonFontColor-Hover);
	background: var(--primaryColor-Hover);
}

.month-button .m-btn_month
{
	font-size: var(--monthButtonFontSize-Month);

	display: inline-block;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}

.month-button .m-btn_year
{
	font-size: var(--monthButtonFontSize-Year);

	display: inline-block;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

/*##############################################################################
    Grid + lines
##############################################################################*/

.cal-container .cal .day,
.cal-container .cal .placebo,
.cal-container .cal .wd
{
	line-height: var(--calendarLineHeight) !important;
	/*border-right: 1px solid var(--gridColor) !important;*/
}

.cal-container .cal .day,
.cal-container .cal .placebo
{
	/*border-top: 1px solid var(--gridColor) !important;*/
	/*border-right: 1px solid var(--gridColor) !important;*/
	/*border-bottom: 1px solid var(--mainFontColor) !important;*/
}

/* Day of week heading */
.cal-container .cal .wd
{
	color: var(--weekDayFontColor);
	background-color: transparent;

	font-size: calc(var(--mainFontSize) - 2px);
	font-weight: normal;
	text-transform: uppercase;
}

.cal-container .cal .wd:first-child
{
	/*border-left: 1px solid var(--gridColor) !important;*/
}

div.placebo_monday,
div.day_Mon
{
	/*border-left: 1px solid var(--gridColor) !important;*/
}

#watch .hour .quarter
{
	background: var(--dayActiveBackgroundColor);
	color: var(--dayActiveFontColor);
	border: var(--mainBorderThickness) solid var(--dayActiveBorderColor);
}

/*##############################################################################
    Month select dropdown
##############################################################################*/

#monthselect
{
	width: 300px;
	font-size: var(--mainFontSize);
	text-align: center;
	height: 40px;
	font-weight: bold;
	outline: none;
	border : var(--mainBorderThickness) solid transparent;
	color: #000;
	text-align-last: center;
	cursor:var(--cursorHover);
	text-transform: uppercase;
	background-color: #2e2e2d;
	background-repeat: no-repeat;
	background-position: center center;
}

#monthselect option
{
	background: #fff;
	color: #000;

	padding-left: 50%;

	cursor: var(--cursorHover);
}

#monthselect option:hover
{
	background: #000 !important;
	color: #111 !important;
}

/*##############################################################################
    Guests (pax) + duration (vd)
##############################################################################*/

.option-like label
{
	display: none;
}

.pax-select-like,
.vd-option-like
{
	background-image: none !important;
	background-color: var(--buttonBackgroundColor);

	color: var(--buttonFontColor);
	font-family: var(--mainFont) !important;

	cursor: var(--cursorHover);

	padding: 0 !important;

	border-radius: var(--mainBorderRadius);
}

.pax-select-like #pax-select,
.vd-option-like #vd
{
	background-color: transparent !important;
	color: var(--buttonFontColor) !important;

	font-family: var(--mainFont) !important;
	font-weight: normal;

	text-align: center;

	background-position-y: center;
	background-position-x: right;

	margin: 0;
	padding: 1px 20px 5px 14px;

	position: relative;

	width: 100%;
	border: none;

	height: var(--mainLineHeight);
}

.pax-select-like:hover,
.vd-option-like:hover
{
	background-color: var(--buttonBackgroundColor-Hover) !important;
	color: var(--buttonFontColor-Hover) !important;
	cursor: var(--cursorPointer);
}

.pax-select-like #pax-select option,
.vd-option-like #vd option
{
	color: var(--mainFontColor);
	font-weight: normal;
}

#xpax
{
	background-color: var(--buttonBackgroundColor) !important;
	color: var(--buttonFontColor) !important;
}

#xpax .custom-select
{
	background-color: transparent !important;
	color: var(--buttonFontColor) !important;

	text-align: center !important;
}

#xpax .custom-select .custom-option
{
	background-color: var(--buttonBackgroundColor) !important;
	color: var(--buttonFontColor) !important;

	text-align: center !important;
	margin: 0 auto;
}

#xpax .custom-select .custom-option:hover
{
	background-color: var(--primaryColor-Hover) !important;
	color: var(--buttonFontColor-Hover) !important;
}

#xpax .custom-select .custom-option[id="zero"],
#xpax .custom-select .custom-option[id="more"],
#xpax .custom-select .custom-option[id="less"]
{
	opacity: 1;
}

#xpax .custom-select .custom-option[id="zero"],
#xpax .custom-select .custom-option[id="less"]
{
	border-radius: var(--mainBorderRadius) var(--mainBorderRadius) 0 0;
}

#xpax .custom-select .custom-option[id="more"]
{
	border-radius: 0 0 var(--mainBorderRadius) var(--mainBorderRadius);
}

/*##############################################################################
    WATCH custom
##############################################################################*/

div.hour.h-month-active.h-day-active
{
	height: var(--lineHeightWatch);
	border-radius: 0;
}

div.hour.h-month-active.h-day-active
{
	border: none;
	border-bottom: var(--mainBorderThickness) solid transparent !important;
	color: var(--dayActiveFontColor-Hover) !important;
}

div.hour.h-month-active.h-day-active:hover div.quarter.q-active:hover
{
	background-color: var(--dayActiveBackgroundColor-Hover) !important;
	color: var(--mainFontColor) !important;
}

#watch .hour
{
	width: var(--mainContentWidth);
	margin: 0 auto !important;
}

#watch .hour ._00 > div::after,
#watch .hour ._15 > div::after,
#watch .hour ._30 > div::after,
#watch .hour ._45 > div::after
{
	font-size: var(--fontSizeTime-Quarters);
}

/*##############################################################################
    OPTIONS custom
##############################################################################*/

.container-options
{
	width: var(--mainContentWidth);
	margin: 0 auto;
	margin-bottom: 20px;
}

.option
{
	color: var(--mainFontColor);

	border: var(--mainBorderThickness) solid transparent !important;
	border-radius: var(--borderRadiusFieldWrapper) !important;

	margin: 0 !important;

	min-height: 20px;
}

.option > div:first-child
{
	margin-top: 9px;
	margin-left: 42px;
}

#_form .option > div:first-child
{
	margin-top: 6px;
	margin-left: 36px;
}

.option > div.toolhandle
{
	width: 26px;
	height: 26px;

	left: 9px;
	top: 7px;

	border: none;
	border-radius: var(--mainBorderRadius);

	background-color: var(--mainBorderColor);

	font-weight: normal;
	transition: background-color var(--txTransitionSpeed) ease;

	font-size: 22px !important;
}

.option.active-option > div.toolhandle
{
	background-color: var(--primaryColor);
	transition: background-color var(--txTransitionSpeed) ease;
}

.option > div.toolhandle div:first-child
{
	color: #ffffff;
	font-size: 22px !important;
	font-weight: normal;
	position: relative;
	top: -8%;
	left: 10%;
	transform: rotate(12deg) scale(1.4);
	margin: 0 auto;
	display: inline-block;
	width: 100%;
	text-align: center;
}

.option.active-option > div:first-child div
{
	color: var(--primaryColor);
	transition: color var(--txTransitionSpeed) ease;
}

.txfe_email .option
{
	font-size: calc(var(--mainFontSize) - 0px) !important;

	margin-top: 0 !important;
	padding-top: 5px !important;
}

.field-wrapper.txfe_email .container-options.container-options-lists
{
	border-top: var(--mainBorderThickness) solid var(--mainBorderColor);
	font-size: calc(var(--inputFontSize) - 2px) !important;
	margin-top: 0 !important;
}

/*##############################################################################
    Neues select für pax
##############################################################################*/

.option-like.pax-option-like
{
	display: none;
}

.pax-select-like
{
	display: inline-block;
}

.option-like select option,
.select-wrapper select option
{
	color: initial !important;
	background: initial !important;
	border-radius:  initial !important;
	font-weight:  initial !important;
	font-family: unset !important; /* TODO -> entscheiden welche default font */
}

.option-like
{
	border: var(--mainBorderThickness) solid var(--buttonBorderColor-Hover) !important;
	width: 46.5%;
	transition: all var(--txTransitionSpeed) ease;
}

.option-like:hover
{
	border: var(--mainBorderThickness) solid var(--buttonBorderColor-Hover) !important;
}

/*##############################################################################
    Confirmed messages
##############################################################################*/

/* not confirmed */

.tx_not_confirmed_container
{
	text-align: center;
}

.tx_not_confirmed_container .tx_not_confirmed_heading
{
	font-size: calc(var(--mainFontSize) * 1.6);
	color: var(--primaryColor) !important;
	font-weight: bold;
}

.tx_not_confirmed_container .tx_not_confirmed_message
{
	font-size: calc(var(--mainFontSize) + 1px);
	color: var(--mainFontColor);
}

/* confirmed */

.tx_confirmed_container
{
	text-align: center;
}

.tx_confirmed_container .tx_not_confirmed_heading
{
	font-size: calc(var(--mainFontSize) * 1.6);
	color: var(--primaryColor) !important;
	font-weight: bold;
}

.tx_confirmed_container .tx_not_confirmed_message
{
	font-size: calc(var(--mainFontSize) + 1px);
	color: var(--mainFontColor);
}

/*##############################################################################
    OTHER
##############################################################################*/

.tx_pax_button_container
{
	display: flex;
	justify-content: center;

	width: var(--mainContentWidth);

	margin: 0 auto 5% auto;
}

.tx_pax_button
{
	color: var(--primaryColor);
	background-color: transparent;

	border: var(--mainBorderThickness) solid var(--primaryColor);
	border-radius: var(--mainBorderRadius);

	display: inline-block;
	box-sizing: border-box;

	min-width: 14%;
	height: var(--mainLineHeight);

	margin: 0 1.5%;
	padding: 8px 0 0 0;

	cursor: var(--cursorHover);

	transition: all var(--txTransitionSpeed) ease;

	transform: scale(1);
}

.tx_pax_button.active,
.tx_pax_button:hover
{
	background-color: var(--primaryColor);
	border-color: var(--primaryColor);

	font-size: calc(var(--mainFontSize) + 4px);
	font-weight: bold;

	padding: 4px 0 0 0;

	transform: scale(1.16);

	color: white;
}

.tx_pax_buttons_heading
{
	color: var(--mainFontColor);
}

p.subheading
{
	display: inline-block;

	max-height: var(--watchLineHeight);

	margin: 0;
	padding: calc(var(--watchLineHeight) / 4);

	box-sizing: border-box;
	display: inline-block;
}

.nav-button-next,
#sendButton
{
	border: var(--mainBorderThickness) solid var(--primaryColor-Hover);
	height: var(--mainLineHeight);

	display: grid !important;
	padding: 0 !important;
	align-content: center;
}

.nav-button-next:hover,
#sendButton:hover
{
	border: var(--mainBorderThickness) solid var(--primaryColor-Hover);
}

.month-buttons-container a
{
	cursor: var(--cursorHover);
}

.notavailable
{
	display: none !important;
}

.pick-msg
{
	display: none !important;
}

label#Labeltxfe_confirmAGB,
label#Labeltxfe_confirmAGB a
{
	font-size: calc(var(--mainFontSize) - 7px) !important;
}

label#Labeltxfe_confirmAGB
{
	margin-bottom: 18px;
}

.option
{
	padding: 3px 0 0 0 !important;
}

span.tx_newline
{
	display: inline-block;
}

.field-wrapper
{
	width: var(--mainContentWidth);
	min-height: var(--inputLineHeight);

	max-width: var(--mainContentWidth);
	margin: 0 auto;

	border-radius: var(--borderRadiusFieldWrapper);
}

#grid-wrapper
{
	margin: 0;
	padding: 0;
}

.iti__country-list
{
	color: var(--mainFontColor) !important;
	font-size: calc(var(--mainFontSize) - 2px);

	margin: 3px 0 0 0 !important;
	padding: 0 !important;

	box-shadow: none !important;

	border: var(--mainBorderThickness) solid var(--mainBorderColor) !important;
	border-radius: var(--mainBorderRadius) !important;

	background: var(--mainBackgroundColor) !important;

	white-space: nowrap;
}

.iti__country.iti__highlight
{
	background-color: var(--mainBorderColor) !important;
}

.iti__selected-flag
{
	padding-left: 10px !important;
	padding-top: 1px !important;

	font-size: var(--inputFontSize);
}

section > nav
{
	width: var(--mainContentWidth);
	margin: 0 auto;
	padding: 0;
}

div.progressor
{
	width: 100%;
	height: var(--mainLineHeight);

	padding: 0 1%;

	border: 2px solid var(--primaryColor);
	border-radius: var(--mainBorderRadius);

	box-sizing: border-box;
}

div.progressor:hover
{
	border-color: var(--primaryColor-Hover);
}

.tx_not_confirmed_container a
{
	color: var(--primaryColor);
}

#calendar
{
	box-sizing: border-box;
}

#sendButton
{
	width: 100%;
	text-align: center;

	margin-top: 3px;
}

#txfe_bemerkung
{
	font-family: var(--mainFont) !important;
}

#evalInfoDateTime,
#evalInfoDateTimeStart,
#evalInfoTimeOptions,
#evalInfoPax
{
	color: var(--buttonFontColor);
	background-color: var(--primaryColor);

	display: grid !important;

	box-sizing: border-box;

	border: var(--mainBorderThickness) solid var(--primaryColor-Hover);
	border-radius: var(--mainBorderRadius);

	padding: 0 !important; /* 8px 15px  */

	transition: background-color var(--txTransitionSpeed) ease;

	min-width: 32%;

	height: var(--mainLineHeight);

	align-content: center;
}

#evalInfoDateTime:hover,
#evalInfoTimeOptions:hover,
#evalInfoPax:hover
{
	background-color: var(--primaryColor-Hover);
	color: var(--buttonFontColor-Hover);

	cursor: pointer;
}

.vert-align-helper
{
	display: none;
}

.iti__selected-dial-code
{
	font-weight: bold;
}

#calendar .cal-inner
{
	width: calc(var(--mainContentWidth) + 10%);
	max-width: 98%;

	margin: 0 auto;
}

.field-wrapper.issues
{
	border: var(--mainBorderThickness) solid var(--inputErrorColor) !important;
}

/* Form fields -> input date for birthday */

#txfe_geburtstag
{
	height: var(--mainLineHeight) !important;
}

input::-webkit-date-and-time-value
{
	text-align: left !important;
}

/* Form fields -> textarea bemerkung */

.txfe_bemerkung
{
	min-height: var(--mainLineHeight) !important;  /* x */
}

#_form #grid-wrapper
{
	padding: 0 !important;
	margin: 0 !important;
}

/* Form fields -> label-info */

.label-info.fullwidth
{
	display: inline-block;
	width: 100% !important;

	font-size: calc(var(--inputFontSize) - 2px) !important;
	color: var(--mainFontColor);

	margin-bottom: 9px;
	margin-top: 0 !important;

	padding-top: 3px;

	padding-right: calc(var(--mainLineHeight) * 0.33);
	padding-left: calc(var(--mainLineHeight) * 0.33);

	box-sizing: border-box;

	border-top: var(--mainBorderThickness) solid var(--mainBorderColor);
}

#label-info-geb
{
	color: var(--dayPastFontColor);
}

/* Form fields -> SMS */

.txfe_confirmSMS
{
	width: 100%;
	max-width: 100%;

	margin: 0 !important;

	border-top: var(--mainBorderThickness) solid var(--mainBorderColor);
	border-radius: 0 !important;

	padding-left: calc(2px + (var(--mainLineHeight) * 0.33));
}

.txfe_confirmSMS label
{
	color: var(--primaryColor);
	font-size: calc(var(--mainFontSize) - 0px) !important;

	width: auto !important;
	height: var(--inputLineHeight);

	padding-left: 7px !important;

	vertical-align: middle;

	transition: color var(--txTransitionSpeed) ease;
}

#txfe_confirmSMS,
#grid-wrapper .default-wrapper input#txfe_confirmSMS
{
	width: 26px;
	height: 26px;

	margin-left: 0px;
	margin-right: 2px;
	margin-top: 8px;

	vertical-align: middle;

	background-color: var(--mainBorderColor);

	border: none;
	border-radius: var(--mainBorderRadius);

	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;

	cursor: pointer;

	padding: 0 !important;
}

#txfe_confirmSMS:checked,
#grid-wrapper .default-wrapper input#txfe_confirmSMS:checked
{
	background-color: var(--primaryColor);
	transition: all var(--txTransitionSpeed) ease;
}

#txfe_confirmSMS:checked::after,
#grid-wrapper .default-wrapper input#txfe_confirmSMS:checked::after
{
	content: '✓';
	color: #ffffff;

	font-size: 22px !important;
	font-weight: normal;

	position: relative;

	top: -10%;
	left: 20%;

	transform: rotate(10deg);
}

.tx_select_container
{
	display: flex;
	justify-content: space-between;

	width: var(--mainContentWidth);

	margin: 0 auto;
}

/* Abstände */

#_form form
{
	margin-top: 12px;
}

#watch nav
{
	margin-bottom: 3%;
}

/* Progressor Infos */

#watch #evalInfoDateTime,
#calendar #evalInfoDateTimeStart
{
	width: 100%;

	font-size: var(--progressorInfoFontSize);
	font-weight: bold;
	text-align: center;

	display: grid !important;
	padding: 0 !important;
	align-content: center;
}

#evalInfoDateTimeStart
{
	color: var(--inputFontColor);
	display: flex;
	justify-content: space-between;
}

div.option-like.pax-select-like,
div.option-like.vd-option-like
{
	width: 48%;
	height: var(--mainLineHeight);

	margin: 0 0 3% 0 !important;

	box-sizing: border-box;
}

/* sticky */
.tx_sticky_bottom
{
	position: sticky;
	position: -webkit-sticky;

	bottom: 0;
}

/*##############################################################################
    Animations / Transitions
##############################################################################*/

#calendar,
#watch
{
	transition: transform var(--txTransitionSpeed) ease;
}

.tx_scale_animated
{
	transform: scale(1.04) !important;
	filter: blur(3px);
}

.tx_scale_animated_2
{
	transform: scale(0.96) !important;
	filter: blur(3px);
}

.tx_pulse_animated
{
	animation: tx_pulse 900ms infinite alternate ease-in-out;
}

@keyframes tx_pulse
{
	0%
	{
		box-shadow: 0 0 14px 2px var(--primaryColor-Hover);
	}
	70%
	{
		box-shadow: 0 0 0 0 var(--primaryColor-Hover);
	}
	100%
	{
		box-shadow: 0 0 0 0 var(--primaryColor-Hover);
	}
}

/*##############################################################################
    Change mode buttons
##############################################################################*/

.txDevButton
{
	font-size: 13px;
	text-align: center;

	position: fixed;
	display: none;

	left: 50%;

	transform: translateX(-50%);

	width: 140px;
	padding: 6px 10px;

	z-index: 99;

	color: var(--mainBackgroundColor);

	background: var(--mainFontColor);
	opacity: 0.8;

	border: var(--mainBorderThickness) solid var(--mainFontColor);
	border-radius: calc(var(--mainBorderRadius) * 2);

	cursor: var(--cursorHover);

	transition: all var(--txTransitionSpeed) ease;
}

.txDevButton:hover
{
	opacity: 1;
}

#changeColorButton
{
	bottom: 37%;
}

#changeFontSizeButton
{
	bottom: 48%;
}

#changeLangButton
{
	bottom: 26%;
}

#changeAppearenceButton
{
	bottom: 15%;
}

#modeNameSpan
{
	color: #048d66;
	font-weight: bold;
	transition: all var(--txTransitionSpeed) ease;
}

#modeNameSpan2,
#langNameSpan,
#appearenceNameSpan
{
	color: var(--mainBackgroundColor);
	font-weight: bold;
	transition: all var(--txTransitionSpeed) ease;
}

span#buttonSwitcherCircle
{
	position: fixed;
	z-index: 100;

	bottom: 4%;
	left: 50%;

	transform: translateX(-50%);

	display: inline-block;

	width: 52px;
	height: 52px;

	box-sizing: border-box;
	padding: 10px 3px 3px 3px;

	border: var(--mainBorderThickness) solid var(--mainFontColor);
	border-radius: 40px;

	background-color: var(--mainFontColor);
	color: var(--mainBackgroundColor);

	font-size: 16px;
	text-align: center;

	cursor: pointer;

	transition: all var(--txTransitionSpeed) ease;
}

.language-select
{
	display: inline-block;
	position: fixed;

	top: 25px;
	right: 30px;

	z-index: 999;

	cursor: pointer;

	transition: all var(--txTransitionSpeed) ease;
}

.selected-language
{
	background-image: url('/img/uk-de.png');
	background-position: center center;

	background-color: white;

	text-align: center;

	width: 38px;
	height: 28px;

	border: var(--mainBorderThickness) solid var(--mainBorderColor);
	border-radius: var(--mainBorderRadius);

	box-sizing: border-box;

	box-shadow: 0 0 6px rgba(22, 22, 22, 0.36);

	overflow: hidden;

	opacity: 0.8;

	transition: all var(--txTransitionSpeed) ease-out;
}

.selected-language:hover
{
	opacity: 1;

	box-shadow: 0 0 9px rgba(22, 22, 22, 0.42);
}

.language-container
{
	margin-top: -8px;
	margin-left: -145px;

	display: none;
	position: absolute;

	border: var(--mainBorderThickness) solid var(--mainBorderColor);
	border-radius: var(--mainBorderRadius);

	background-color: var(--mainBackgroundColor);

	z-index: 1000;

	box-shadow: 0 0 18px rgba(22, 22, 22, 0.34);

	margin-top: 5px;
	margin-left: -150px;
}

.language
{
	background: var(--mainBackgroundColor);
	color: var(--mainFontColor);

	border-radius: var(--mainBorderRadius);

	padding: 8px 21px;
	margin: 8px 7px;

	text-align: left;
	font-size: calc(var(--mainFontSize) - 1px);

	display: flex;
	align-items: center;

	cursor: pointer;

	transition: all var(--txTransitionSpeed) ease-out;

	border: var(--mainBorderThickness) solid transparent;
}

.language:hover
{
	border: var(--mainBorderThickness) solid var(--primaryColor);

	color: var(--mainFontColor) !important;
}

.language-img
{
	opacity: 1;

	border-radius: var(--mainBorderRadius);

	margin-right: 12px;
	margin-top: 0px;

	height: 24px;
}

.flag-img
{
	display: none;
}

.language-container.active-language
{
	display: block;
}

#txfe_telefon
{
	margin-left: 90px !important;
	padding-left: 6px !important;
	width: 57% !important;
}


/*##############################################################################
    CARD DATA
##############################################################################*/

#_form #payment_information_comment
{
	font-size: calc(var(--mainFontSize) - 2px);
	color: var(--dayPastFontColor);
}

#_form .wpwl-container.wpwl-container-card
{
	margin: 0 auto;
	color: var(--mainFontColor);
	border: var(--mainBorderThickness) solid var(--mainBorderColor);
	border-radius: var(--borderRadiusFieldWrapper);
	width: var(--mainContentWidth);
	margin-bottom: 11px;
}

.wpwl-label
{
	margin-bottom: 3px;
	color: var(--mainFontColor) !important;
	padding-left: calc(var(--mainLineHeight) * 0.3);
}

form.wpwl-form.wpwl-form-card
{
	margin-bottom: 0 !important;
}

.wpwl-wrapper.wpwl-wrapper-submit
{
	display: none;
}

/* saferpay payment form */

form#paymentForm > div.default-wrapper {
	padding: 5px 5px 5px 5px;
	border: 1px solid #ECECEC;
	background-color: #FAFAFA;
	margin-bottom: 10px;
}
form#paymentForm > div.default-wrapper > label {
	font-size: 0.8em;
}
form#paymentForm > div.issues > label {
	color: #FF0000;
}
form#paymentForm > div.default-wrapper > div.placeholder {
	height: 30px;
}

iframe#saferpay-iframe {
	background-color: #ffffff;
}

body.saferpay-iframe {
	display: grid;
	place-items: center;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
}
body.saferpay-iframe > div.content {
	display: flex;
	flex-direction: column;
	gap: 1em;
	align-items: center;
	text-align: center;
	max-width: 75vh;
}
body.saferpay-iframe > div.content > div:first-child {
	font-size: 0.9em;
	padding: 0.9em 0.5em;
	border: 1px solid;
	background-color:rgba(0, 0, 0, 0.05);
	font-style: italic;
}
body.saferpay-iframe > div.content > button {
	display: inline-block;
	cursor: pointer;
	color: #252525;
	font-size: 17px;
	font-weight: normal;
	background-color: #ececec;
	padding: 15px;
	border: 0;
}
.wpwl-group.wpwl-group-brand
{
	display: none;
}

.wpwl-container.wpwl-container-card
{
	background: var(--inputBackgroundColor);
}

.wpwl-control:focus
{
	border-color: #ccc;
}

.wpwl-wrapper
{
	padding-left: calc(var(--mainLineHeight) * 0.3);
	padding-right: calc(var(--mainLineHeight) * 0.3);
}

.wpwl-group.wpwl-group-submit
{
	display: none;
}

.wpwl-wrapper
{
	padding-left: calc(var(--mainLineHeight) * 0.3);
	padding-right: calc(var(--mainLineHeight) * 0.3);
}

@media (min-width: 480px) {
	.wpwl-wrapper {
		width: 66.66666667%;
		box-sizing: border-box;
		padding-right: calc(var(--mainLineHeight) * 0.3);
	}
}

#payment_information_comment
{
	padding: 11px calc(var(--mainLineHeight) * 0.3);

	text-align: center;
}

.hide-month
{
	display: none;
}

.cal-container .cal .booked-message
{
	background-color: rgba(255, 255, 255, 0.8);
}

#calendar .nav-button-next
{
	display: none !important;
}

.field-wrapper.textarea-wrapper.txfe_bemerkung
{
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

label[for="txfe_bemerkung"]
{
	align-content: baseline !important;
}

#evalInfoDateTimeStart
{
	display: block !important;
	justify-content: unset !important;
}

.nav-button-next:nth-of-type(3)
{
	display: none !important;
}

/* fields flex hack if there are long labels possible */

.field-wrapper.txfe_babies,
.field-wrapper.txfe_herkunft,
.field-wrapper.txfe_kinder,
.field-wrapper.txfe_raumWunsch,
.field-wrapper.txfe_bemerkung,
.field-wrapper.txfe_geburtstag
{
	display: flex;
	align-items: center;
	gap: 0.35em;
}

label[for="txfe_babies"],
label[for="txfe_herkunft"],
label[for="txfe_kinder"],
label[for="txfe_raumWunsch"],
label[for="txfe_bemerkung"],
label[for="txfe_geburtstag"]
{
	width: unset !important;
}

#txfe_babies,
#txfe_herkunft,
#txfe_kinder,
#txfe_raumWunsch,
#txfe_bemerkung,
#txfe_geburtstag
{
	flex: 1;
	padding: 0 3.3%;
}

#txfe_geburtstag
{
	padding: 0 3.3%;
}

/* other */

#calendar,
#watch
{
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
}

#payment_information_comment,
#_form
{
	-webkit-user-select: initial;
	-moz-user-select: initial;
	-ms-user-select: initial;
	user-select: initial;
}

/* month arrows */

.addmonth
{
	transform: translateX(-1px);
	transition: all var(--txTransitionSpeed);
}

.remmonth
{
	transform: translateX(1px);
	transition: all var(--txTransitionSpeed);
}

.addmonth:not(.hide-arrow):hover
{
	transform: translateX(2px) scale(1.05);
}

.remmonth:not(.hide-arrow):hover
{
	transform: translateX(-2px) scale(1.05);
}

/* Spinners / Loading animation */

div.spinner
{
	background-color: rgba(0, 0, 0, 0.75);
	transition: all var(--txTransitionSpeed) ease;
}

div.spinner img
{
	display: none !important;
}

div.spinner svg
{
	top: 300px;
	left: 50%;
	max-width: 140px;
	position: absolute;
	transform: translate(-50%, -50%);
}

.booked-message
{
	display: none;
}

/* ### ANPASSUNG START ### 
   PA (26.09.2025) - Infobox mit Mailadresse */

#tx_mailinfo
{
    margin-top: 16px;
}

#tx_mailinfo a
{
    color: var(--primaryColor) !important;
}