/* ############################################################################
TABLEX ONLINE WIDGET DESIGN 2025 - CUSTUM CSS
############################################################################ */
/*+++++++++++++++++++++++++++++++++
+ +
+ MAIN CONFIG VALUES - CSS +
+ +
+++++++++++++++++++++++++++++++++*/
:root
{
--primaryColor: #273583; /* #0d9542 */
--mainFont: 'Open Sans', sans-serif;
--mainFontSize: 18px;
--mainBorderRadius: 2px;
--mainBorderThickness: 1px;
}
/*++++++++++++++++++++++++++++++++++++++
+ +
+ OTHTER CONFIG VARIABLES - CSS +
+ +
+++++++++++++++++++++++++++++++++++++++*/
:root
{
/* -------------------
MAIN SIZES
------------------- */
/* Use this for a widget with fixed width */
--totalWidth: unset;
/* Use this for a responsive widget width */
--totalWidth-Min: 330px;
--totalWidth-Max: 560px;
/* Main sizes -> How much of the totalWidth is used for displaying content */
--mainContentWidth: 92%;
/* Main sizes -> main font size (most of the other font sizes are calculated based on this main value) */
/*
--mainFontSize: 19px;
*/
/* Main sizes -> height of certain main elements */
--mainLineHeight: 48px;
/* Main sizes -> heihgt of a row for one week in the calendar */
--calendarLineHeight: calc(var(--mainLineHeight) * 1.15);
/* Main sizes -> heihgt of a row for one hour when showing available times */
--watchLineHeight: calc(var(--mainLineHeight) * 0.9);
/* Main sizes -> height of inputs, selects, buttons*/
--inputLineHeight: var(--mainLineHeight);
/* Main sizes --> main thikness of elements with border like buttons, limiter, inputs, ... */
/*
--mainBorderThickness: 3px;
*/
/* -------------------
BORDER RADIUS
------------------- */
/* Border radius -> main border radius */
/*
--mainBorderRadius: 26px;
*/
/* Border radius -> inputs, selects, textareas */
--borderRadiusFieldWrapper: var(--mainBorderRadius);
/* ------------------
FONTS
------------------- */
/* Fonts -> main font */
/*
--mainFont: 'BalooChettan', 'Afacad', 'Alatsi', 'Dosis', 'Bebas Neue', 'Arial', sans-serif;
*/
/* Fonts -> progressor info */
--progressorInfoFontSize: calc(var(--mainFontSize) + 0px);
/* Fonts -> month-button */
--monthButtonFontSize-Month: calc(var(--mainFontSize) - 2px);
--monthButtonFontSize-Year: calc(var(--mainFontSize) - 0px);
/* Fonts -> inputs, selects, textareas */
--inputFontSize: var(--mainFontSize);
/* Fonts -> watch -> quarters */
--fontSizeTime-Hours: calc(var(--mainFontSize) + 0px);
--fontSizeTime-Quarters: calc(var(--mainFontSize) + 0px);
/* -------------------
COLORS
----------------------
Demo color values to try:
Color HEX RGB
````` ``` ```
"Tablex Green Primary" #048d66 4, 141, 102
"Tablex Green Hover" #016347 1, 99, 71
"Windows 11 Blue Primary" #0283f2 2, 131, 242
"Windows 11 Blue Hover" #0258a3 2, 88, 163
"Random Orange" #ff8800 255, 136, 0
"Random Orange Hover" #bf6600 191, 102, 0
/* Colors -> primary color */
/*--primaryColor: #ff8800;*/
--primaryColor-Hover: #06c58f;
/* Colors -> main colors */
--mainFontColor: #333333;
--mainBackgroundColor: white;
--mainBorderColor: #333333;
/* Colors -> calendar -> week days */
--weekDayFontColor: var(--mainFontColor);
/* Colors -> calendar -> past days */
--dayPastFontColor: #555555;
--dayPastBackgroundColor: transparent;
/* Colors -> calendar -> today */
--dayTodayFontColor: #333;
--dayTodayFontColor-Hover: var(--primaryColor);
--dayTodayBackgroundColor: transparent;
--dayTodayBackgroundColor-Hover: transparent;
--dayTodayBorderColor: transparent;
--dayTodayBorderColor-Hover: var(--primaryColor);
/* Colors -> calendar -> future days */
--dayActiveFontColor: #333;
--dayActiveFontColor-Hover: var(--primaryColor);
--dayActiveBackgroundColor: transparent;
--dayActiveBackgroundColor-Hover: transparent;
--dayActiveBorderColor: transparent;
--dayActiveBorderColor-Hover: var(--primaryColor-Hover);
/* Colors -> buttons */
--buttonFontColor: white; /* var(--mainFontColor) */
--buttonFontColor-Hover: white; /* var(--mainFontColor) */
--buttonBackgroundColor: var(--primaryColor);
--buttonBackgroundColor-Hover: var(--primaryColor-Hover);
--buttonBorderColor: var(--primaryColor);
--buttonBorderColor-Hover: var(--primaryColor-Hover);
/* Colors -> form -> input fields */
--inputBackgroundColor: #222222;
--inputErrorColor: #dd0000;
/* ----------------------
HOVER + ANIMATION
---------------------- */
--txTransitionSpeed: 250ms;
/* -------------------
CURSORS
------------------- */
--cursorDefault: default;
--cursorHover: pointer;
--cursorNot: not-allowed;
/* --------------------------------
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: #333333;
/* Colors -> options */
--backgroundOptions: whitesmoke;
/* Colors -> grid & lines */
--gridColor: transparent;
}
/* #################################################################
####################################################################
Widget
####################################################################
################################################################# */
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);
cursor: var(--cursorDefault) !important;
text-align: right;
}
.limiter
{
text-align: left;
box-sizing: border-box;
}
section
{
margin-top: 18px; /* 5% */
}
.progressor
{
display: none !important;
}
#calendar,
#watch
{
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
/* #################################################################
####################################################################
Fields
####################################################################
################################################################# */
#grid-wrapper .txfe_praefix { display:none !important; }
#grid-wrapper .txfe_vorname { }
#grid-wrapper .txfe_name { }
#grid-wrapper .txfe_firma { }
#grid-wrapper .txfe_email {}
#grid-wrapper .txfe_telefon { flex-wrap:wrap; }
#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_confirmSMS { }
#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_telefon"]>tr:last-child::after { content:"|
" }
#eval tr[title="txfe_bemerkung"]>td:first-child { font-size:15px; display: block; 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 !important; }
#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; }
.iti__flag-container
{
padding-top: 0px !important;
}
.fa-arrow-right
{
display: none !important;
}
section > nav
{
min-height: 0 !important;
}
.hide
{
display: none;
}
.show
{
display: inline !important;
}
.iti--separate-dial-code .iti__selected-flag
{
background-color:inherit !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;
}
}
/* #################################################################
####################################################################
Storno
####################################################################
################################################################# */
#stornomessage
{
font-size:25px;
color: #fff;
text-align:center;
padding-top:70px;
padding-bottom:70px;
}
.stornoButton
{
width: 220px;
height: 70px;
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: 0px;
}
.stornoButton:hover
{
color: #048D66;
background: #fff;
}
.StornoouterDiv
{
width: 100%;
display: flex;
margin: 0 auto;
margin-top: 5vh;
}
@media (min-width:600px)
{
.StornoouterDiv
{
width: 100%;
display: flex;
margin: 0 auto;
margin-top:5vh;
text-align:center;
}
.StornoinnerDiv
{
background-color: #2e2e2d;
max-width: 350px;
height: 100%;
color: white;
margin: 0 auto;
border-radius: var(--mainBorderRadius);
/*
-webkit-box-shadow: 9px 10px 34px 11px rgba(46,46,45,0.61);
-moz-box-shadow: 9px 10px 34px 11px rgba(46,46,45,0.61);
box-shadow: 9px 10px 34px 11px rgba(46,46,45,0.61);
*/
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;
}
}
/* #################################################################
####################################################################
Custom alert
####################################################################
################################################################# */
div.custom-alert
{
background-color: rgba(255, 255, 255, 0.5);
}
div.custom-alert>div.alert-window
{
background-color: rgba(255, 255, 255, 0.75);
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.5;
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;
}
/* #################################################################
####################################################################
Progressor
####################################################################
################################################################# */
div.progressor
{
display: flex;
align-items: center;
justify-content: center;
}
div.progressor div.indicator
{
display: inline-block;
min-width: 40px;
width: auto;
min-height: 32px;
max-height: 43px;
height: auto;
margin: 0;
padding: 0 5px;
cursor: var(--cursorHover);
font-size: 0.7em;
line-height: 70px !important;
text-align: center;
border-radius: var(--borderRadiusDefault);
background-color: transparent;
}
div.progressor div:first-child
{
margin-left: 0;
}
.indicator:nth-last-child(2){
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:%23ccc" d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" /%3E%3C/svg%3E') !important;
background-size: 23px 23px;
background-position: 45% 45% !important;
background-repeat:no-repeat;
border-radius: 20px;
line-height: 37.5px;
background-color: #fff;
}
.indicator:nth-last-child(2).current,
.indicator:nth-last-child(2).younger
{
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:%23fff" d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" /%3E%3C/svg%3E') !important;
}
.indicator:last-child
{
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:%23ccc" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /%3E%3C/svg%3E');
background-size: 23px 23px;
background-position: 45% 45% ;
background-repeat: no-repeat;
line-height: 37.5px;
background-color: #fff;
}
.indicator:last-child.current,
.indicator:last-child.younger
{
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:%23ccc" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /%3E%3C/svg%3E');
}
.indicator:nth-of-type(3)
{
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" style="fill:%23ccc"%3E%3Crect fill="none" fill-rule="evenodd" height="24" width="24"/%3E%3Cg%3E%3Cpath d="M12,4c4.41,0,8,3.59,8,8s-3.59,8-8,8c-1.18,0-2.34-0.26-3.43-0.78c-0.27-0.13-0.56-0.19-0.86-0.19 c-0.19,0-0.38,0.03-0.56,0.08l-3.2,0.94l0.94-3.2c0.14-0.47,0.1-0.98-0.11-1.42C4.26,14.34,4,13.18,4,12C4,7.59,7.59,4,12,4 M12,2 C6.48,2,2,6.48,2,12c0,1.54,0.36,2.98,0.97,4.29L1,23l6.71-1.97C9.02,21.64,10.46,22,12,22c5.52,0,10-4.48,10-10 C22,6.48,17.52,2,12,2L12,2z"/%3E%3C/g%3E%3Cpolygon fill-rule="evenodd" points="13,8 11,8 11,11 8,11 8,13 11,13 11,16 13,16 13,13 16,13 16,11 13,11"/%3E%3C/svg%3E');
background-size: 23px 23px;
background-position: 52% 45%;
background-repeat:no-repeat;
line-height: 37.5px;
background-color: #fff;
}
.indicator:nth-of-type(3).current,
.indicator:nth-of-type(3).younger
{
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" style="fill:%23fff"%3E%3Crect fill="none" fill-rule="evenodd" height="24" width="24"/%3E%3Cg%3E%3Cpath d="M12,4c4.41,0,8,3.59,8,8s-3.59,8-8,8c-1.18,0-2.34-0.26-3.43-0.78c-0.27-0.13-0.56-0.19-0.86-0.19 c-0.19,0-0.38,0.03-0.56,0.08l-3.2,0.94l0.94-3.2c0.14-0.47,0.1-0.98-0.11-1.42C4.26,14.34,4,13.18,4,12C4,7.59,7.59,4,12,4 M12,2 C6.48,2,2,6.48,2,12c0,1.54,0.36,2.98,0.97,4.29L1,23l6.71-1.97C9.02,21.64,10.46,22,12,22c5.52,0,10-4.48,10-10 C22,6.48,17.52,2,12,2L12,2z"/%3E%3C/g%3E%3Cpolygon fill-rule="evenodd" points="13,8 11,8 11,11 8,11 8,13 11,13 11,16 13,16 13,13 16,13 16,11 13,11"/%3E%3C/svg%3E');
}
.indicator:nth-of-type(2)
{
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:%23ccc" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M12.5,7H11v6l5.2,3.2l0.8-1.3l-4.5-2.7V7z" /%3E%3C/svg%3E');
background-size: 23px 23px;
background-position: 45% 45%;
background-repeat:no-repeat;
line-height: 37.5px;
background-color: #fff;
}
.indicator:nth-of-type(2).current,
.indicator:nth-of-type(2).younger
{
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:%23fff" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M12.5,7H11v6l5.2,3.2l0.8-1.3l-4.5-2.7V7z" /%3E%3C/svg%3E');
}
.indicator:nth-of-type(1)
{
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:%23ccc" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z" /%3E%3C/svg%3E');
background-size: 23px 22.7px;
background-position: 45% 45%;
background-repeat:no-repeat;
line-height: 37.5px;
background-color: #fff;
}
.indicator:nth-of-type(1).current,
.indicator:nth-of-type(1).younger
{
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cpath style="fill:%23fff" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z" /%3E%3C/svg%3E');
}
/* peab */
#pickedInfoContainer,
#pickedInfoContainerStart
{
font-size: var(--progressorInfoFontSize);
font-weight: normal;
width: 100%;
text-align: center;
color: var(--primaryColor);
display: flex;
justify-content: space-between;
}
.progressorInfo
{
font-size: var(--progressorInfoFontSize);
display: inline !important;
/*font-weight: bold !important;*/ /* peab */
}
#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;
/*line-height: 25px;*/ /* peab */
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(--primaryColor);
background-color: #fff
font-size: var(--mainFontSize);
font-weight: normal;
text-align: center;
border-radius: var(--mainBorderRadius);
border: var(--mainBorderThickness) solid var(--primaryColor);
/* peab */
padding: 9px 0;
/*height: var(--inputLineHeight);*/
/* peab */
width: 100%;
box-sizing: border-box;
}
.nav-button-next:hover
{
color: var(--primaryColor);
background-color: #fff;
border: var(--mainBorderThickness) solid var(--primaryColor);
}
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,");
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.75);
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
{
/* peab */
/*background-color: var(--HoverBackgroundColor, #111);
border-radius: var(--borderRadiusDayTime, 0px);*/
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); /* peab */
margin-bottom: -4px;
}
/*
#watch .hour ._30
{
left: 48.4%;
}
#watch .hour ._15{
left: 24.95%;
}
#watch .hour ._45{
left:71.85%;
}
#watch .hour ._00{
left: 1.49%;
}
/*
/* #################################################################
####################################################################
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: 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
{
/* peab */
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.75);
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
{
/* peab */
padding: 0;
border: var(--mainBorderThickness) solid var(--mainBorderColor);
background-color: var(--inputBackgroundColor);
margin: 0 auto;
margin-bottom: 11px;
display:flex;
}
.field-wrapper
{
/* peab */
border-radius: var(--borderRadiusFieldWrapper) !important;
box-sizing: border-box;
}
/* peab */
.field-wrapper,
.field-wrapper *
{
color: var(--mainFontColor);
}
.iti
{
width: 67%;
align-content: center;
}
/* peab */ /* xxx */
.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
{
/* peab */
font-size: 16px;
display: inline-block;
width: 26.3%;
padding-left: calc(var(--mainLineHeight) * 0.3);
display:block;
align-content:center;
}
#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
{
/* peab */
width: 67.3%;
padding: 7px 0 7px 3.3%;
margin: 0;
background-color: transparent;
font-size:16px;
font-family: var(--mainFont) !important;
font-weight: bold !important;
border: 0;
border-bottom-right-radius: var(--borderRadiusFieldWrapper);
border-top-right-radius: var(--borderRadiusFieldWrapper);
box-sizing: border-box;
text-align: left;
}
#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;
}
#grid-wrapper .txfe_bemerkung
{
grid-column: 1/3;
}
#Labeltxfe_confirmAGB
{
font-size: calc(var(--mainFontSize) - 7px) !important;
width: 100%;
display: inline-block;
text-align: center;
margin-top: 13px; /* peab */
}
#grid-wrapper .txfe_confirmAGB
{
grid-column: 1/3;
font-size: 0.7em;
padding-top:16px;
}
#grid-wrapper .select-wrapper select
{
/*padding-left: 6px !important;*/ /* peab */
}
/* #################################################################
####################################################################
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 { /*content: " | ";*/ /* peab */ font-weight: normal !important; color: var(--mainFontColor); }
#evalInfoTimeOptions::before { /*content: " | ";*/ /* peab */ 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); /* peab 0.1 */
margin-left: calc((100% - var(--calendarLineHeight) * 1) / 2); /* peab 0.8 */
width: calc(var(--calendarLineHeight) * 1); /* peab 0.8 */
height: calc(var(--calendarLineHeight) * 1); /* peab 0.8 */
box-sizing: border-box;
transform: scale(0.8);
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); /* peab 0.1 */
margin-left: calc((100% - var(--calendarLineHeight) * 1) / 2); /* peab 0.8 */
width: calc(var(--calendarLineHeight) * 1); /* peab 0.8 */
height: calc(var(--calendarLineHeight) * 1); /* peab 0.8 */
box-sizing: border-box;
transform: scale(0.8);
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(--dayTodayBorderColor-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(--primaryColor);
background: #fff;
font-family: var(--mainFont) !important;
font-size: calc(var(--mainFontSize) - 1px);
letter-spacing: -0.28px;
width: calc(var(--calendarLineHeight)* 1.37);
height: calc(var(--calendarLineHeight)* 1.37);
margin: 0 3px;
border: 1px solid var(--primaryColor);
border-radius: 2px;
text-align: center !important;
max-width:70px;
}
.month-button:hover
{
color: var(--buttonFontColor);
background: var(--primaryColor);
border: 1px solid var(--primaryColor);
}
.m-active
{
color: var(--buttonFontColor);
background: var(--primaryColor);
border: var(--mainBorderThickness) solid var(--primaryColor-Hover);
}
.m-active:hover
{
color: var(--buttonFontColor);
background: var(--primaryColor);
border: var(--mainBorderThickness) solid 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;
}
.month-button.m-active .m-btn_month
{
font-size: var(--monthButtonFontSize-Month);
color: var(--mainFontColor) !important;
}
.month-button.m-active .m-btn_year
{
font-size: var(--monthButtonFontSize-Year);
color: var(--mainFontColor) !important;
}
/* #################################################################
####################################################################
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: #fff;
color: var(--primaryColor);
font-family: var(--mainFont) !important;
border: 1px solid var(--primaryColor);
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(--primaryColor) !important;
font-family: var(--mainFont) !important;
font-weight: normal;
background-position-y: center;
background-position-x: right;
margin: 0;
/*padding: 1px 20px 5px 14px;*/
display: grid !important;
align-content: center;
justify-content: center;
text-align:center;
position: relative;
width: 100%;
border: none;
height: var(--mainLineHeight);
/*text-align: center !important;*/
}
.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
####################################################################
################################################################# */
div.hour.h-month-active.h-day-active
{
height: var(--lineHeightWatch);
border-radius: 0;
}
/*
div.hour.h-month-active.h-day-active:hover
{
background-color: var(--dayActiveBackgroundColor-Hover);
}
div.hour.h-month-active.h-day-active:hover div.quarter.q-active._00
{
background-color: var(--dayTodayBackgroundColor) !important;
color: var(--dayTodayFontColor) !important;
}
*/
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._00:hover
{
background-color: var(--dayTodayBackgroundColor-Hover) !important;
color: var(--dayTodayFontColor-Hover) !important;
}
*/
div.hour.h-month-active.h-day-active:hover div.quarter.q-active:hover
{
/*background-color: #d9d9d9 !important;*/
background-color: var(--dayActiveBackgroundColor-Hover) !important;
color: var(--mainFontColor) !important;
/*font-weight: bold;*/
}
#watch .hour
{
width: var(--mainContentWidth);
margin: 0 auto !important;
}
/*
#watch .hour ._00 > div::before
{
font-weight: bold;
}
#watch .hour ._15 > div::before,
#watch .hour ._30 > div::before,
#watch .hour ._45 > div::before
{
content: '';
}
*/
#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
####################################################################
################################################################# */
.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: 2px;
margin-left: 43px;
}
#_form .option > div:first-child
{
margin-top: 7px;
margin-left: 36px;
}
.option > div.toolhandle
{
width: 26px;
height: 26px;
left: 9px;
top: 5px;
border: none;
border-radius: var(--mainBorderRadius);
background-color: var(--mainBorderColor);
font-weight: normal;
transition: background-color var(--txTransitionSpeed) ease;
}
.option.active-option > div.toolhandle
{
background-color: var(--primaryColor);
transition: background-color var(--txTransitionSpeed) ease;
}
.option > div.toolhandle div:first-child
{
color: var(--primaryColor-Hover);
font-size: 20px;
font-weight: normal;
transition: transform var(--txTransitionSpeed) ease;
}
.option.active-option > div.toolhandle div:first-child
{
transform: translate(-8px, -18px) rotate(10deg);
font-size: 36px !important;
}
.option.active-option > div:first-child div
{
color: var(--primaryColor);
transition: color var(--txTransitionSpeed) ease;
}
.txfe_email .option
{
font-size: calc(var(--mainFontSize) - 2px) !important;
margin-top: -6px !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;
display: none !important;
}
/* #################################################################
####################################################################
Neues Select für Gäste
####################################################################
################################################################# */
.option-like.pax-option-like
{
display: none;
}
.pax-select-like
{
display: inline-block; /* xxx */
}
.option-like select option,
.select-wrapper select option
{
color: var(--mainFontColor) !important;
background: var(--inputBackgroundColor) !important;
border-radius: 0 !important;
font-weight: normal !important;
font-family: var(--mainFont) !important;
}
.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) + 2px)
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) + 2px)
color: var(--mainFontColor);
}
/* #################################################################
####################################################################
Other
####################################################################
################################################################# */
/* Pax buttons */
.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);
}
#txfe_bemerkung
{
margin-bottom: 0 !important;
}
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);;
height: var(--mainLineHeight);
}
.nav-button-next:hover,
#sendButton:hover
{
border: var(--mainBorderThickness) solid var(--primaryColor);;
}
.month-buttons-container a
{
cursor: var(--cursorHover);
}
.notavailable
{
display: none !important;
}
.pick-msg
{
display: none !important;
}
#_form .container-options-lists.label-info.fullwidth .option > div.toolhandle.checker
{
top: 10px !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;
}
#txfe_telefon
{
padding-top: 5px;
}
#evalInfoDateTime,
#evalInfoDateTimeStart,
#evalInfoTimeOptions,
#evalInfoPax
{
color: var(--primaryColor);
background-color: #fff;
display: inline-block !important;
box-sizing: border-box;
border: var(--mainBorderThickness) solid var(--primaryColor-Hover);
border-radius: var(--mainBorderRadius);
display: grid !important;
justify-content: center;
align-content: center;
text-align: center;
transition: background-color var(--txTransitionSpeed) ease;
min-width: 32%;
height: var(--mainLineHeight);
}
#evalInfoDateTime:hover,
#evalInfoTimeOptions:hover,
#evalInfoPax:hover
{
background-color: #fff;
color: var(--primaryColor);
border: var(--mainBorderThickness) solid var(--primaryColor-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 rgba(221,0,0,0.6) !important;
}
/* Form fields -> input date for birthday */
#txfe_geburtstag
{
height: 42px !important;
}
input::-webkit-date-and-time-value
{
text-align: left !important;
}
/* Form fields -> textarea bemerkung */
.txfe_bemerkung
{
height: auto !important;
min-height: 44px !important;
}
.textarea-wrapper
{
height: auto !important;
}
#_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: 14px;
margin-top: 0 !important;
padding-top: 5px;
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;
padding-left: 33%;
padding-top: 9px;
padding-bottom: 9px;
border-top: var(--mainBorderThickness) solid var(--mainBorderColor);
border-radius: 0 !important;
}
.txfe_confirmSMS label
{
color: var(--primaryColor);
font-size: calc(var(--mainFontSize) - 2px) !important;
width: auto !important;
padding-left: 6px !important;
margin-top: 2px !important;
}
.txfe_confirmSMS input
{
width: auto !important;
margin-left: 0px !important;
}
.tx_select_container
{
display: flex;
justify-content: space-between;
width: var(--mainContentWidth);
margin: 0 auto;
}
/* Spinner */
div.spinner
{
transition: all 220ms ease;
background-color: rgba(255, 255, 255, 0.4);
}
div.spinner img
{
top: 34%;
}
/* 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: normal;
display: grid !important;
align-content: center;
justify-content: center;
text-align: center;
}
/*
#calendar #evalInfoDateTimeStart
{
font-size: var(--progressorInfoFontSize);
font-weight: bold;
text-align: center;
padding: 7px 38px 0 38px !important;
margin: 0 auto;
}
*/
#evalInfoDateTimeStart
{
color: var(--inputFontColor);
display: flex;
justify-content: space-between;
}
div.option-like.pax-select-like,
div.option-like.vd-option-like
{
width: 48% !important;
height: var(--mainLineHeight);
margin: 0 0 2% 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.06) !important;
filter: blur(3px);
}
.tx_scale_animated_2
{
transform: scale(0.94) !important;
filter: blur(3px);
}
.tx_pulse_animated
{
animation: tx_pulse 500ms infinite alternate ease-in-out;
}
@keyframes tx_pulse
{
0%
{
box-shadow: 0 0 16px 2px var(--primaryColor-Hover);
}
100%
{
box-shadow: 0 0 0 0 var(--primaryColor-Hover);
}
}
/* #################################################################
####################################################################
Fonts
####################################################################
################################################################# */
/* "Inter" */
@font-face
{
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('font/inter-v13-latin-regular.woff2') format('woff2');
}
/* "Dosis" */
@font-face
{
font-display: swap;
font-family: 'Dosis';
font-weight: 400;
src: url('font/dosis-v32-latin-regular.woff2') format('woff2');
}
@font-face
{
font-display: swap;
font-family: 'Dosis';
font-weight: 700;
src: url('font/dosis-v32-latin-700.woff2') format('woff2');
}
/* "Afacad" */
@font-face
{
font-display: swap;
font-family: 'Afacad';
font-weight: 400;
src: url('font/afacad-v1-latin-regular.woff2') format('woff2');
}
@font-face
{
font-display: swap;
font-family: 'Afacad';
font-weight: 700;
src: url('font/afacad-v1-latin-700.woff2') format('woff2');
}
/* "Matrix" */
@font-face
{
font-family: 'Matrix';
src: url('font/matrix.ttf');
}
/* "Alatsi" */
@font-face
{
font-display: swap;
font-family: 'Alatsi';
font-style: normal;
font-weight: 400;
src: url('font/alatsi-v13-latin-regular.woff2') format('woff2');
}
/* "BalooChettan" */
@font-face
{
font-display: swap;
font-family: 'BalooChettan';
font-style: normal;
font-weight: 400;
src: url('font/baloo-chettan-2-v21-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'BalooChettan';
font-style: normal;
font-weight: 700;
src: url('font/baloo-chettan-2-v21-latin-700.woff2') format('woff2');
}
@font-face
{
font-display: swap;
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
src: url('font/bebas-neue-v14-latin-regular.woff2') format('woff2');
}
/* "Jost" */
@font-face
{
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 400;
src: url('font/jost-v15-latin-regular.woff2') format('woff2');
}
@font-face
{
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 700;
src: url('font/jost-v15-latin-700.woff2') format('woff2');
}
/* open-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('font/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* #################################################################
####################################################################
Breakpoint values
####################################################################
################################################################# */
@media (max-width:479px)
{
.wpwl-label.wpwl-label-brand
{
float: unset;
}
.wpwl-wrapper.wpwl-wrapper-brand
{
font-size: calc(var(--mainFontSize) - 1px);
display: block;
}
}
@media (max-width:355px)
{
#evalInfoDateTime
{
font-size: calc(var(--mainFontSize) - 4px);
}
}
@media (max-width:380px)
{
#evalInfoDateTime,
#evalInfoPax,
#evalInfoTimeOptions
{
font-size: calc(var(--mainFontSize) - 2px);
}
}
@media (max-width:400px)
{
#grid-wrapper .default-wrapper label,
#grid-wrapper .select-wrapper label,
#grid-wrapper .textarea-wrapper label
{
font-size: calc(var(--inputFontSize) - 2px);
}
.wpwl-label
{
font-size: calc(var(--inputFontSize) - 2px);
}
}
@media (max-width:370px)
{
#grid-wrapper .default-wrapper label,
#grid-wrapper .select-wrapper label,
#grid-wrapper .textarea-wrapper label
{
font-size: calc(var(--inputFontSize) - 3px);
}
.wpwl-label
{
font-size: calc(var(--inputFontSize) - 3px);
}
}
/* #################################################################
####################################################################
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
{
position: fixed;
z-index: 999;
display: inline-block;
top: 27px;
right: 33px;
transform: translateX(var(--));
cursor: pointer;
transition: all var(--txTransitionSpeed) ease;
}
.selected-language
{
background-image: url('/img/both_flags2.png');
background-position: center center;
background-color: white;
text-align: center;
width: 38px;
height: 30px;
border: var(--mainBorderThickness) solid var(--mainBorderColor);
border-radius: 20px;
box-sizing: border-box;
box-shadow: 0 0 5px rgba(22, 22, 22, 0.3);
overflow: hidden;
opacity: 0.8;
transition: all var(--txTransitionSpeed) ease-out;
}
.selected-language:hover
{
opacity: 1;
box-shadow: 0 0 8px rgba(22, 22, 22, 0.38);
}
.language-container
{
margin-top: -8px;
margin-left: -145px;
display: none;
position: absolute;
border: var(--mainBorderThickness) solid var(--mainBorderColor);
border-radius: 30px;
background-color: var(--mainBackgroundColor);
z-index: 1000;
box-shadow: 0 0 20px rgba(22, 22, 22, 0.28);
}
.language
{
background: var(--mainBackgroundColor);
color: var(--mainFontColor);
border-radius: 30px;
padding: 8px 21px;
margin: 8px 7px;
text-align: left;
font-size: calc(var(--mainFontSize) - 1.5px);
display: flex;
align-items: center;
cursor: pointer;
transition: all var(--txTransitionSpeed) ease-out;
}
.language:hover
{
background-color: var(--primaryColor);
color: white !important;
}
.language-img
{
width: 24px;
height: 24px;
opacity: 1;
border-radius: 9px;
margin-right: 14px;
margin-top: 0px;
}
.flag-img
{
display: none;
}
.language-container.active-language
{
display: block;
}
#txfe_telefon
{
margin-left: 90px !important;
padding-left: 6px !important;
width: 57% !important;
}
/* #################################################################
####################################################################
Card
####################################################################
################################################################# */
#_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;
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial;
}
#_form
{
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial;
}
.hide-month
{
display: none;
}
.cal-container .cal .booked-message
{
background-color: rgba(255, 255, 255, 0.8);
}
#calendar .nav-button-next
{
display: none !important;
}
#watch .hour ._00
{
left: 25%;
}
#watch .hour ._15,
#watch .hour ._45
{
display: none;
}