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

    CONFIG VALUES
    
##############################################################################*/

:root 
{
    --primaryColor: #223755;
    --primaryColor-Hover: #000000;
    
    --mainFont: 'Jost', sans-serif;
    --mainFontSize: 19px;
    
    --mainBorderRadius: 17px;
    --mainBorderThickness: 2px;
}

/*#############################################################################
    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: 180ms;
	
    /* 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: 2px 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
{
    display: none;
}

#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_geburtstag,
{
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.field-wrapper.txfe_bemerkung
{
    display: flex;
    align-items: top;
    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_geburtstag,
#txfe_bemerkung
{
    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: 330px;
    left: 50%;
    max-width: 150px;
    position: absolute;
    transform: translate(-50%, -50%);
}