/*  CSS des Plugins */


/* Ein (großer) Bereich mit abgerundeten Ecken */
div.tqwafr-contentblock {
    background-color: #ffffff;
    padding: 20px 30px 30px 30px;
    margin: 10px 0 40px 0;
    border-radius: 4px;
}

div.tqwafr-contentblock-grey {
    background-color: #d2d2d2;
    padding: 20px 30px 30px 30px;
    margin: 10px 0 40px 0;
    border-radius: 4px;
}

/* Ein (großer) Bereich der einen Schatten nach unten hat */
div.tqwafr-shadow {
    box-shadow: 0 1px 15px #ecebeb; /* x y ... */
}


/* Das rechts fix angedockte Panel für Debug-Ausgaben. Nur wenn Admin angemeldet. */
#tqwafr-debug-panel {
    position: fixed;
    left: 10px;
    top: 40px; /* wegen Admin-Bar. Koennen wir mit dem aktuellen Theme nicht erkennen. */
    width: 250px;
    bottom: 10px;
    padding: 5px;
    background-color: #ffeeff;
    border: 1px solid #cccccc;
    overflow: auto;
    font-size: 70%;
}

div.tqwafr-debug-segment {
    border-top: 1px solid #808080;
    margin-top: 10px;
}

/* Allgemeiner Debug-Text */
div.tqwafr-debug {
    font-size: 80%;
    line-height: 90%;
    color: #808080;
    background-color: #ffddff;
}

hr {
    border-width: 0;
    border-style: solid;
    margin-top: 15px;
    margin-bottom: 15px;
    border-top: 1px solid #a0a0a0;
    padding: 0;
    width: 100%;
    border-radius: 0;
}

hr.fullwidth-narrow {
    margin: 5px 0px 5px 0px;
}


/*
 Das äusserste div von Wabe. Enthält alles, z.B. den Assistenten, Subnav, Fehlermeldungen, Request-Liste etc.
 */
#tqwafr-content-container {
    margin: 0 0 15px 0;
    font-size: 1em;
    width: 100%; /* sonst nutzt es nicht voll - weiss nicht wieso */
    display: table;
    padding: 0;
    /* min-height: 400px; Firefox ignoriert das. Opera und Chrome verwenden es */
    color: #404040;
    line-height: 130%;
}

#tqwafr-content-container h1 {
    color: #404040;
    font-size: 1.5rem;
    letter-spacing: 0;
    font-weight: 600;
    margin: 1.5rem 0 2rem 0;
}

#tqwafr-content-container h2 {
    color: #404040;
    font-size: 1.4rem;
    letter-spacing: 1px;
    font-weight: 600;
    margin: 1rem 0 2rem 0;
}

/* Tagesüberschrift. Datum */
#tqwafr-content-container h3 {
    margin-bottom: 5px;
    font-size: 1.1em;
}

#tqwafr-content-container h4 {
    padding-bottom: 10px;
    font-size: 1.1em;
}

#tqwafr-content-container h5 {
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
}

#tqwafr-content-container h6 {
    font-size: 1.0em;
    font-weight: bold;
}

#tqwafr-content-container input.form-control,
#tqwafr-content-container select.form-control,
#tqwafr-content-container textarea.form-control {
    padding: 5px 8px 5px 8px;
    border-radius: 0;
}


#tqwafr-content-container .tqwafr-error-container,
#tqwafr-previewpanel-dynamiccontent .tqwafr-error-container {
    border-color: #dc3545;
    color: #dc3545;
}

#tqwafr-content-container .tqwafr-error-container .tqwafr-price {
    color: #dc3545;
}

#tqwafr-content-container input[type=checkbox] {

}

#tqwafr-content-container .btn {
    border-radius: 0;
    min-width: 100px;
}

#tqwafr-content-container .btn-primary {
    background-color: #404040;
    border-color: #404040;
    color: #ffffff;
    border-radius: 3px;
}

#tqwafr-content-container .btn-secondary {
    background-color: #606060;
    border-color: #606060;
    color: #ffffff;
    border-radius: 3px;
}

#tqwafr-content-container .btn-info {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
    color: #ffffff;
}

/** Bei gepflegtem HTML haben wir Absätze als p. Da wollen wir keinen langen Abstand am Ende */
#tqwafr-content-container .alert p {
    margin-top: 4px;
    margin-bottom: 6px;
}

button.btn-textonly {
    border: 0;
    background-color: transparent;
    color: #404040;
}

/* Spezielle Farbtöne: green für sofort buchbar, yellow für anfragbar */
#tqwafr-content-container button.btn-primary-green,
#tqwafr-content-container a.btn-primary-green {
    background-color: #0fa851;
    border-color: #0fa851;
}

#tqwafr-content-container button.btn-primary-yellow,
#tqwafr-content-container a.btn-primary-yellow {
    background-color: #FAA028;
    border-color: #FAA028;
}

#tqwafr-content-container button.btn-primary-blue,
#tqwafr-content-container a.btn-primary-blue {
    background-color: #8090FF;
    border-color: #6060FF;
}

#tqwafr-content-container .alert-green {
    background-color: #0fa851;
    border-color: #0fa851;
    color: #ffffff;
}

#tqwafr-content-container .alert-yellow {
    background-color: #FAA028;
    border-color: #FAA028;
    color: #ffffff;
}


/* Container in #tqwafr-content-container aber ausserhalb der einzelnen Inhalte/Schritte */
#tqwafr-content-assistant-container {
    display: table-cell;
    vertical-align: middle;
}


/**
 * Login (interner Assistent)
 */

/* im Step 1 + 2 sind die komplette Inhalte in einem Kasten. Danach sind die einzelne Tage selbst Kästen */
#tqwafr-content-login {
    margin: 100px auto 0 auto;
    background: #ffffff;
    border-radius: 6px;
    width: 420px;
    padding: 30px 70px 30px 70px;
}

/**
 * Step 1: Teilnehmer, Datum ...
 */

/* seeehr gestreckter Inhalt */
#tqwafr-content-login .row {
    margin-top: 30px;
}

#tqwafr-content-login label {
    font-size: 100%;
    margin-bottom: 10px;
}

/**
 *  Step 1
 */

/* im Step 1 + 2 sind die komplette Inhalte in einem Kasten. Danach sind die einzelne Tage selbst Kästen */
#tqwafr-assistant-step1-content {
    margin: 100px auto 0 auto;
    background: #ffffff;
    border-radius: 6px;
    width: 420px;
    padding: 30px 70px 30px 70px;
}

/**
 * Step 1: Teilnehmer, Datum ...
 */

/* seeehr gestreckter Inhalt */
#tqwafr-assistant-step1-content .row {
    margin-top: 30px;
}

#tqwafr-assistant-step1-content label {
    font-size: 100%;
    margin-bottom: 10px;
}

#tqwafr-assistant-step1-content div.form-check {
}

#tqwafr-assistant-step1-content label.form-check-label {
    text-transform: none;
    font-size: 100%;
}

#tqwafr-assistant-step1-content div.form-group {
    margin-bottom: 10px;
}

/**
 * Step 2: Terminauswahl im Kalender
 */

#tqwafr-calendar-container {
    position: relative;
}

#tqwafr-calendar-container .btn-textonly {
    font-weight: bold;
}

/* Absolute zu #tqwafr-calendar-container. Blockiert/überlagert den Kalender */
#tqwafr-calendar-blocker {
    position: absolute;
    z-index: 50;
    width: 0; /* Wird per js auf Parent gesetzt */
    height: 0; /* Wird per js auf Parent gesetzt */
    display: flex;
    justify-content: center;
    align-items: start;
    text-align: center;
    opacity: 0.8;
    background-color: #ffffff;
    color: #000000;
    font-size: 25px;
    line-height: 150%;
}

/* Container mit der Auswahl der Bestuhlungsform */
#tqwafr-seatings-selection {
    width: 100%;
    /*
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        */
}

#tqwafr-seatings-selection label {
    display: inline-block;
    white-space: normal;
    margin-bottom: 10px;
    /*    margin-right: 30px; */
}

#tqwafr-seatings-selection input[type="radio"] {
    width: 20px;
    margin: 0;
}

#tqwafr-seatings-selection span.tqwafr-seating-name {
    display: inline-block;
}

#tqwafr-seatings-selection span.tqwafr-seating-description {
    display: inline-block;
    margin-left: 28px;
    font-size: 90%;
}

#tqwafr-assistant-step2-content .tqwafr-monthname {
    line-height: 32px;
}

#tqwafr-assistant-step2-content div.tqwafr-buttonbar {
    margin-bottom: 40px;
}

img.tqwafr-seating-icon {
    display: inline-block;
    width: 20px;
    height: auto;
    min-height: 10px;
    margin: 0 5px 0 5px;
}

/* Die Tabelle des Kalenders. Ist in div.tqwafr-calendar-container um die 5px border-spacing links und recht auszugleichen */
table.tqwafr-calendar {
    width: 100%;
    border-width: 0;
    border-spacing: 0;
    border-collapse: collapse;
    margin: 10px 0 10px 0;
}

table.tqwafr-calendar th,
table.tqwafr-calendar td {
    border: 1px solid #dadada;
    padding: 10px;
    text-align: center;
}

/* Die Borders an den Rändern entfernen - es bleibt nur das Kreuzgitter */

/* In der ersten Zeile bei allen Zellen den Border oben */
table.tqwafr-calendar tr:first-child th,
table.tqwafr-calendar tr:first-child td {
    border-top-width: 0;
}

table.tqwafr-calendar tr:last-child th,
table.tqwafr-calendar tr:last-child td {
    border-bottom-width: 0;
}

/* In der ersten Spalte bei allen Zellen den Border links */
table.tqwafr-calendar tr th:first-child,
table.tqwafr-calendar tr td:first-child {
    border-left-width: 0;
}

table.tqwafr-calendar tr th:last-child,
table.tqwafr-calendar tr td:last-child {
    border-right-width: 0;
}

table.tqwafr-calendar th {
    padding: 5px 10px 5px 5px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
}

table.tqwafr-calendar td {
    width: 14.28%;
    line-height: 120%;
}

table.tqwafr-calendar td.tqwafr-calendar-day {
    font-size: 100%;
    padding: 2px 5px 5px 5px;
    vertical-align: top;
    height: 106px; /* tds können kein min-height? */
}


/* Zusatzinfos im internen Modus (Assistant) */
table.tqwafr-calendar td.tqwafr-calendar-day div.tqwafr-date-ratecluster,
table.tqwafr-calendar td.tqwafr-calendar-day div.tqwafr-date-seasonname {
    margin-top: -14px;
    margin-bottom: 2px;
    color: #000000;
    font-size: 12px;
}

/**
 * Jeder Tag hat einen Statustext z.B. "direkt buchen" oder "nicht verfügbar". Von diesen wird normal aber
 * nicht alles angezeigt, sondern manches erst nach Klick oder hover.
 * Hier das, was normalerweise ausgeblendet ist...
 * Um ein Springen des Inhalts zu vermeiden machen wir das über die Visibility
 */
td.tqwafr-calendar-day.date-is-available .tqwafr-date-availability {
    visibility: hidden;
}

/**
 *  ... nun das das, was abweichend von oben dann doch angezeigt wird.
 */
/*
td.tqwafr-calendar-day.currentdatefree-alldays .tqwafr-date-availability,
td.tqwafr-calendar-day.currentdateoptional-alldays .tqwafr-date-availability,
td.tqwafr-calendar-day.currentdatefailed-alldays .tqwafr-date-availability,
td.tqwafr-calendar-day.virtualdate-alldays .tqwafr-date-availability {
    display: block;
    visibility: visible;
}
*/

/*  Markiert im Kalender den einen Tag des Startdatums zum aktuell gewählten Termin */
table.tqwafr-calendar td.date-is-current {
}

/*  Markiert im Kalender Startdatums-Tage die auswählbar/verfügbar sind (Radio haben) */
table.tqwafr-calendar td.date-is-available {
    color: #0A8226;
}

/*  Markiert im Kalender Startdatums-Tage die nicht auswählbar/verfügbar sind */
table.tqwafr-calendar td.date-is-unavailable {
    color: #dadada;
}

table.tqwafr-calendar td.date-is-unavailable .tqwafr-date-date {
    color: #dadada;
}

/*  Markiert im Kalender Startdatums-Tage die auswählbar/verfügbar aber optional sind (Radio haben) */
table.tqwafr-calendar td.date-is-available.date-is-optional {
    color: #c0a010;
}

/* Markierung des derzeit ausgewählten und verfügbaren Zeitraums im Kalender - die Tage von Anfang bis Ende */

/* normales frei, grün */
td.tqwafr-calendar-day.currentdatefree-alldays {
    background-color: #0A8226;
    color: #ffffff;
}

td.tqwafr-calendar-day.currentdatefree-alldays .tqwafr-date-date,
td.tqwafr-calendar-day.currentdatefree-alldays .tqwafr-date-price,
td.tqwafr-calendar-day.currentdatefree-alldays .tqwafr-date-availability {
    color: #ffffff;
}

/* optionales frei, orange */
td.tqwafr-calendar-day.currentdateoptional-alldays {
    background-color: #FAA028;
    color: #ffffff;
}

td.tqwafr-calendar-day.currentdateoptional-alldays .tqwafr-date-date,
td.tqwafr-calendar-day.currentdateoptional-alldays .tqwafr-date-price,
td.tqwafr-calendar-day.currentdateoptional-alldays .tqwafr-date-availability {
    color: #ffffff;
}


/* Markierung des derzeit ausgewählten und NICHT verfügbaren Zeitraums im Kalender - die Tage von Anfang bis Ende */

td.tqwafr-calendar-day.currentdatefailed-alldays {
    background-color: #801010;
    color: #ffffff;
}

td.tqwafr-calendar-day.currentdatefailed-alldays .tqwafr-date-date,
td.tqwafr-calendar-day.currentdatefailed-alldays .tqwafr-date-price,
td.tqwafr-calendar-day.currentdatefailed-alldays .tqwafr-date-availability {
    color: #ffffff;
}


/* Markieren des per mouse-hover ausgewählten (alternativen Zeitraums) analog zu td.currentdate... Klassen werden in JS gesetzt */
td.tqwafr-calendar-day.virtualdate-alldays {
    background-color: #b0b0b0;
    color: #ffffff;
}

td.tqwafr-calendar-day.virtualdate-alldays .tqwafr-date-date,
td.tqwafr-calendar-day.virtualdate-alldays .tqwafr-date-price,
td.tqwafr-calendar-day.virtualdate-alldays .tqwafr-date-availability {
    color: #ffffff;
}


/* Kompliziert: An den Folgedaten eines currentdate oder eines virtualdate sollen Informationen
   der nächsten Kalendertage, z.B. Preis und Verfügbarkeit, nicht angezeigt werden. Denn das wirkt
   so als würde es zu den Tagen des Termins gehören.
   Am Starttag soll es zu sehen sein, auch in der besonderen Kombination, dass das virtualdate (hover)
   im currentdate liegt.
   2023-12-09: Die Liste wird immer länger. Wir machen für solche Daten nun eine eigene Klasse
               tqwafr-date-hideonfollowup
*/

/* Elemente, die an Folgetagen versteckt werden sollen, ausblenden */
td.currentdatefree-alldays .tqwafr-date-hideonfollowup,
td.currentdateoptional-alldays .tqwafr-date-hideonfollowup,
td.virtualdate-alldays .tqwafr-date-hideonfollowup {
    visibility: hidden;
}

/* Elemente, die an Folgetagen versteckt werden sollen, am Starttag sichtbar machen */
td.currentdatefree-start .tqwafr-date-hideonfollowup,
td.currentdateoptional-start .tqwafr-date-hideonfollowup,
td.virtualdate-start .tqwafr-date-hideonfollowup {
    visibility: visible !important;
}

/*
 * Kalender: Abschnitt zur Verfügbarkeits der vorausgewählten externen Varianten.
 * Darstellung vorerst als farbiges Icon per CSS und einen Tooltip mit Details.
 * Hängt am unteren Ende eines jeden Kalendertages.
 *
 * Sichtbar nur wenn der ausgewählte Termin oder Hover.
 */
td.tqwafr-calendar-day .tqwafr-date-extvars {
    font-size: 80%;
    min-height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
/*    background-color: #ffffff; */
    padding: 2px 0 0 0;
}

/**
 * Kalender Extvars: Abschnitt in .tqwafr-date-extvars der den Status optisch ausdrückt, z.B. als span.tqwafr-date-extvars-status-free
 */
span.tqwafr-date-extvars-status {
    display: inline-block;
    font-size: 80%;
    min-height: 18px;
    width: 51px; /* Passend zum Icon welches 51 x 18 ist */
}


div.tqwafr-date-extvars span.tqwafr-tooltip-marker {
    border-width: 0;
    font-size: inherit;
    background-color: transparent;
}

/*
 * Kalender Extvars: Verfügbarkeit von vorausgewählten externen Varianten ist gut
 * Wird derzeit nicht benutzt, sondern bei voller Verfügbarkeit zeigen wir keine Verfügbarkeit an.
 */
td.tqwafr-calendar-day .tqwafr-date-extvars-status-free {
    background-image: url( ../assets/images/extvar-avail-yes.png );
}

/*
 * Kalender Extvars: Verfügbarkeit von vorausgewählten externen Varianten ist leidlich
 */
td.tqwafr-calendar-day .tqwafr-date-extvars-status-low {
    background-image: url( ../assets/images/extvar-avail-low.png );
}

/* Kalender Extvars: Verfügbarkeit von vorausgewählten externen Varianten ist schlecht */
td.tqwafr-calendar-day .tqwafr-date-extvars-status-out {
    background-image: url( ../assets/images/extvar-avail-no.png );
}

/* Kalender Extvars: Tooltip-Marker e */
td.tqwafr-calendar-day .tqwafr-date-extvars .tqwafr-tooltip-marker {
}

/* Formatierung der Texte an den Tagen des Kalenders */

span.tqwafr-date-date {
    display: inline-block;
    color: #383838;
    margin: 10px 0 10px 0;
}

span.tqwafr-date-day {
    font-size: 130%;
}

span.tqwafr-date-month {
    font-size: 130%;
    text-transform: uppercase;
}

span.tqwafr-date-availability {
    display: inline-block;
    font-size: 90%;
    line-height: 110%;
    font-weight: normal;
}

span.tqwafr-date-price {
    display: inline-block;
    font-size: 80%;
    line-height: 110%;
    font-weight: normal;
}


/* Step 3/4/5: Auswahl der Produkte/Varianten/Vorschau */


/* Etwas weniger Platz in der Höhe verbrauchen */
#tqwafr-assistant-step3-content .form-group,
#tqwafr-assistant-step3n4-content .form-group,
#tqwafr-assistant-step34-content .form-group {
    margin-bottom: 0.6rem;
}

/* Alle number-Felder gleich breit machen. Sonst hängen die von der Breite ihres Containers
   ab der z.B. bei form-check ein anderer ist
 */
#tqwafr-assistant-step3n4-content input[type=number] {
    max-width: 110px;
}

/* Ein Preis mit nach folgender Währung. Kann aber auch ein Text "auf Anfrage" sein */
#tqwafr-assistant-step3n4-content .tqwafr-price {
    color: #a0a0a0;
}

#tqwafr-assistant-step3n4-content button.btn-decrement,
#tqwafr-assistant-step3n4-content button.btn-increment {
    min-width: 2rem !important;
    max-width: 1.5rem;
    padding-left: 6px;
    padding-right: 6px;
}

/* Hinweistext mit mit/max Angabe zu einer Variante. Optisch wie Preis. */
div.tqwafr-variant-minmax {
    margin: 2px 0px 2px 0px;
    color: #a0a0a0;
    font-style: italic;
    font-size: 90%;
}

/* Hinweistext mit Beschreibung zu einer Variante (falls nicht als Tooltip) */
div.tqwafr-variant-description {
    margin: 2px 0px 2px 0px;
    color: #808080;
    font-size: 90%;
}

input[inputmode="decimal"] {
    max-width: 70px;
}

/* Alles zu einem Tag */
div.tqwafr-day-container {
}

div.tqwafr-day-container-head {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #dadada;
    margin: 0;
    margin-top: -20px;
    font-size: 0.9rem;
    font-weight: bold;
    padding-top: 10px;
}

/** Im Head wollen wir keine Margins/Paddings aber mehrere Spalten und es muss zu mpdf kompatibel sein. Wir basteln
    deswegen etwas ohne Bootstrap. Drei Spalten ist aber übelst umzusetzen. Daher: Zwei Spalten wobei die linke
    zwei Elemente enthält. */

div.tqwafr-dayhead-left {
    /* BK 20230707    float: left; */
    /* BK 20230707 width: 60%; */
    padding-left: 0;
}

/* Tagesüberschrift Text vorne, z.B. Tag 1. Mit dunklem Hintergrund. */
div.tqwafr-dayhead-left div.tqwafr-dayhead-main {
    float: left;
    /* BK 20230707    width: 90px; */
    width: 120px;
    background-color: #404040;
    color: #ffffff;
    padding: 15px 10px 15px 10px;
    margin-right: 20px;
}

/* Tagesüberschrift Text hinten, z.B. Freitag, 27.11.2020 */
div.tqwafr-dayhead-left div.tqwafr-dayhead-details {
    margin-top: 16px;
}

div.tqwafr-dayhead-right {
    /* BK 20230707    text-align: right; */
}

/* Die Anzahl der Teilnehmer rechts in der Überschrift des Tages */
#tqwafr-assistant-step3n4-content div.tqwafr-dayhead-right div.tqwafr-dayhead-participants {
    text-align: right;
    margin-top: 10px;
}

/* Anzahl Teilnehmer in Readonly-Ansichten */
#tqwafr-assistant-step5-content div.tqwafr-dayhead-right div.tqwafr-dayhead-participants,
#tqwafr-requestdisplay div.tqwafr-dayhead-right div.tqwafr-dayhead-participants {
    text-align: right;
    margin-top: 16px;
}

div.tqwafr-dayhead-right div.tqwafr-dayhead-teilnehmer-label {
    margin-top: 6px;
}

div.tqwafr-dayhead-right div.tqwafr-dayhead-teilnehmer-input {
    padding-right: 0px;
}

div.tqwafr-pauschale-container {
}

div.tqwafr-bookingdata-container {
}

div.tqwafr-pauschalendetails,
div.tqwafr-raumdetails {
    font-size: 90%;
    color: #a0a0a0;
    max-width: 270px;
    margin: 5px 0 0 0;
    line-height: 120%;
}

div.tqwafr-pauschalendetails ol,
div.tqwafr-pauschalendetails ul,
div.tqwafr-raumdetails ol,
div.tqwafr-raumdetails ul {
    margin: 3px 0px 3px 0px;
    padding: 0px 0px 0px 15px;
}


.tqwafr-price {
    font-style: italic;
    font-size: 90%;
}

div.tqwafr-pauschalleistung {
}

/* Ausblenden von Produkten die in einer Pauschale enthalten sind */
div.tqwafr-blockedbyinclusive {
    display: none;
}


/* Anstelle-Text für div.tqwafr-blockedbyinclusive */
div.tqwafr-blockedbyinclusive-infotext {
    font-style: italic;
}

div.tqwafr-inclusiveselection {
    margin: 15px 0 10px 0;
    padding: 0;
}

div.tqwafr-inclusiveselection-head {
}

div.tqwafr-inclusiveselection-head h6 {
    margin: 10px 0 10px 0;
}

div.tqwafr-inclusiveselection-body {
    padding-right: 5px;
}


/* Bei den Details eines Tages (3n4 und Vorschau) sind innerhalb eines Tages mehrere sections (Pauschalen,
   Ausstattung etc) übereinanader
 */
div.tqwafr-intraday-section {
    margin: 0 0 0 0;
    padding: 20px 0 20px 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #dadada;
}

div.tqwafr-pauschalendetails {
}

div.tqwafr-intraday-section:last-child {
    border: 0;
}

div.tqwafr-intraday-section-leadcol {
    font-weight: bold;
    padding-left: 40px;
}

/* Im rechten Bereich eine row. Ist zudem ein .row */
div.tqwafr-intraday-section-row {
    padding-top: 0;
    padding-bottom: 5px;
}

/* Im rechten Bereich eine column. Ist zudem ein .col-6 */
div.tqwafr-intraday-section-col {
    padding-top: 0;
    padding-bottom: 5px;
}

/**
 * Die Titelzeile. Ist zudem eine div.tqwafr-intraday-section
 */
div.tqwafr-intraday-section-title {
    padding-bottom: 10px;
    color: #a0a0a0;
}

div.tqwafr-intraday-section-title div.tqwafr-intraday-section-row {
    padding-bottom: 0;
}

/**
 * Die Summenzeile. Ist zudem eine div.tqwafr-intraday-section
 */
div.tqwafr-intraday-section-total {
    background-color: #e6e6e6;
}

div.tqwafr-intraday-section-total div.tqwafr-intraday-section-row {
    padding-bottom: 0;
}

/* Der innere Block zur Tagungsflex */
div.tqwafr-intraday-section-bookingflex {
    background-color: #e6e6e6;
    padding-right: 20px;
    padding-left: 20px;
}

/*
 * div.tqwafr-sector-container ist der Container für einen Oberbereich des Tages, z.B. "Zusätzliches", "Nebenprodukte", "Abendprogramm"
 * Ist unterteilt in -head und -body und kann zudem -night und -day sein
 */
div.tqwafr-sector-container {
    margin: 15px 0 10px 0;
    padding: 0;
}

/* Darstellung: Tag über die Breite - reduzierte Margins */

div.tqwafr-inclusiveselection {
    margin-top: 5px;
}

div.tqwafr-sector-container {
    margin-top: 5px;
}

div.tqwafr-sector-container-night {
}

div.tqwafr-sector-container-day {
}

div.tqwafr-sector-container h6 {
    margin: 10px 0 10px 0;
}

#tqwafr-content-container div.tqwafr-day-container h5 {
    font-weight: 500;
    margin-top: 10px;
}

div.tqwafr-sector-container-body {
}

div.tqwafr-sector-container-body input[type="text"],
div.tqwafr-sector-container-body input[type="number"] {
    padding-left: 5px;
    padding-right: 5px;
}

div.tqwafr-product-container div.form-group {
    margin-bottom: 5px;
}

/* Container um alle Varianten eines Produkts */
div.tqwafr-variants-container,
div.tqwafr-extvars-container {
    margin: 0 0 10px 0;
}

/**
 * Bei Hauptprodukten ist normalerweise das Produkt per checkbox anwählbar und wird dann per Radio für eine Variante
 * entschieden.
 * Bei Pflichtprodukten machen wir die checkbox unsichtbar (zudem ist sie per JS fix checked) und rücken zudem den
 * Label nach links, damit der Text optisch korrekt ausgerichtet ist.
 */
div.tqwafr-product-container-mandatory input[type="checkbox"][data-mandatoryfield="1"] {
    display: none;
}

div.tqwafr-product-container-mandatory label.tqwafr-product-label {
    margin-left: -1.25em;
}

div.tqwafr-inclusive-description {
    margin: 5px;
    font-style: italic;
    font-size: 90%;
}

/** Die Verfügbarkeit ist kritisch baer vermutlich machbar */
div.tqwafr-availability-low {
    color: #d09000;
    font-weight: 400;
    font-size: 90%;
}

/** Die Verfügbarkeit wohl nicht möglich */
div.tqwafr-availability-out {
    color: #e01000;
    font-weight: 400;
    font-size: 90%;
}

/* Im Vorschau-Schritt sollen tabellenartige Border gemalt werden - erst mal nicht */
#tqwafr-assistant-step5-content div.tqwafr-intraday-section {
}

/* 2021-07-19: die neuen optionalen Pauschalen und Artikel darstellen
               Ist je ein eigenes div um den gesamten Block (der pauschale bzw. der Variante)
*/
#tqwafr-assistant-step5-content div.tqwafr-display-optional,
#tqwafr-requestdisplay div.tqwafr-display-optional {
    opacity: 0.7;
    /*
    Blauer Streifen links
        padding-left: 10px;
        padding-right: 0px;
        border-width: 0 0 0 2px;
        border-style: solid;
        border-color: #2040d0;

     */
}

#tqwafr-assistant-step5-content div.tqwafr-display-optional div.tqwafr-pauschalendetails,
#tqwafr-requestdisplay div.tqwafr-display-optional div.tqwafr-pauschalendetails {
    color: #606060;
}

/* der "optional"-Text bei den optionalen Varianten */
#tqwafr-assistant-step5-content span.tqwafr-optional-marker,
#tqwafr-requestdisplay span.tqwafr-optional-marker {
    color: #404040;
    display: inline-block;
    font-size: 90%;
}

/* Alt: Der Block mit den alternativen Pauschalen (die nicht ausgewählten */

#tqwafr-assistant-step5-content div.tqwafr-inclusive-alternatives {
    opacity: 0.5;
}

/* Alt: Die Schrift der Details ist ohnehin schon blass. mit opacity wird die unsichtbar */
#tqwafr-assistant-step5-content div.tqwafr-inclusive-alternatives div.tqwafr-pauschalendetails {
    color: #404040;
}

#tqwafr-assistant-step5-content div.row.form-group {
    margin-bottom: 0.5rem;
}

/**
 *  Breadcrumb
 */

div.tqwafr-breadcrumb {
    margin: 10px 0 10px 0;
    padding: 10px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #dadada;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0;
    font-size: 90%;
}

div.tqwafr-breadcrumb span.breadcrumb-passed {
    font-weight: bold;
    color: #0fa851;
}

div.tqwafr-breadcrumb span.breadcrumb-passed a {
    color: #0fa851;
}

div.tqwafr-breadcrumb span.breadcrumb-current {
    font-weight: bold;
    color: #383636 !important;
}

div.tqwafr-breadcrumb span.breadcrumb-coming {
    color: #bbbbbb !important;
}

div.tqwafr-breadcrumb span.tqwafr-breadcrumb-delimiter {
    font-size: 1.5rem;
    color: #bbbbbb;
}

/* Graue Schrittnummer in grauem Kreis */
span.breadcrumb-icon-number {
    font-size: 12px;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 11px 5px 11px;
    border-radius: 16px;
    border-width: 1px;
    border-style: solid;
    background-color: #ffffff;
    border-color: #bbbbbb;
    color: #bbbbbb;
}

/* Weiße Schrittnummer in grün gefüllten Kreis) */
span.breadcrumb-current span.breadcrumb-icon-number {
    background-color: #383636;
    border-color: #383636;
    color: #ffffff;
}

/* Weißer Haken in einem grünen */
span.breadcrumb-icon-check {
    font-size: 10px;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 11px 5px 11px;
    border-radius: 16px;
    border-width: 1px;
    border-style: solid;
    background-color: #0fa851;
    border-color: #0fa851;
    color: #ffffff;
}

/**
 *  Anzeige einer Anfrage (auch Step 5)
 */
#tqwafr-requesturl2copy {
    margin: 20px 0 20px 0;
}

#tqwafr-requesturl2copy input,
#tqwafr-requesturl2copy button {
    width: 100%;
    font-size: 13px;
    padding: 5px;
    height: 34px;
    border: 1px solid #808080;
}

#tqwafr-requesturl2copy input {
    background-color: #e1e1e1;
}

#tqwafr-requesturl2copy button.btn-info {
    background-color: #464646;
}


/**
 *  Preview-Panel. Das Panel ist dafür gedacht vom Theme in einen Rahmen
 *  verpackt zu werden und ist daher hinsichtlich eigenen Styling zurückhaltend.
 */

/** das braucht nach unten etwas Margin weil unten am Rand fix die Links (Kacheln) sind */
#tqwafr-previewpanel-dynamiccontent {
    line-height: 140%;
    margin-bottom: 35px;
}

#tqwafr-previewpanel-dynamiccontent p {
    padding: 0;
    margin: 5px 0 5px 0;
}

div.tqwafr-previewpanel-block-anfrage {
    margin-top: 1.0rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

div.tqwafr-previewpanel-block-anfrage p {
    color: #a0a0a0;
}

div.tqwafr-previewpanel-block-external {
    margin-top: 1.0rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    line-height: 125%;
}

div.tqwafr-previewpanel-block-external label {
    min-width: 70px;
}

div.tqwafr-previewpanel-block-zusammenfassung {
    margin-top: 1.3rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

div.tqwafr-previewpanel-block-zusammenfassung p {
    color: #a0a0a0;
}

div.tqwafr-previewpanel-block-kosten {
    margin-top: 1.3rem;
}

div.tqwafr-previewpanel-block-kosten-head {
    border-color: #cccccc;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    border-radius: 3px 3px 0 0;
    padding: 10px;
    cursor: pointer;
}

div.tqwafr-previewpanel-block-kosten-head h5 {
    margin: 0;
    font-weight: 500;
}

div.tqwafr-previewpanel-block-kosten-body {
    border-color: #cccccc;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    padding: 10px;
}

div.tqwafr-previewpanel-block-kosten-foot {
    border-color: #cccccc;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-radius: 0 0 3px 3px;
    padding: 10px;
    background-color: #4B4B4B;
    color: #ffffff;
}

div.tqwafr-previewpanel div.tqwafr-rows-tablelike {
    /* ohne explizite width ist da immer eine Scrollbar */
    width: 100%;
    padding: 0;
    margin: 0;
}

div.tqwafr-rows-tablelike div.row {
    padding: 2px 0 2px 0;
}

div.tqwafr-previewpanel .tqwafr-taxincluded {
    padding-top: .2rem;
    font-style: italic;
    font-size: 85%;
    font-weight: normal;
}

div.tqwafr-previewpanel i.fixwidth-1 {
    width: 30px;
    text-align: center;
}

/* Preview-Panel: Auswahl Raumkategorie */
select.tqwafr-select-raumkategorie {
    padding: 0.2rem;
    height: auto;
}

/* Preview-Panel: Auswahl Bestuhlungsform */
select.tqwafr-select-seating {
    padding: 0.2rem;
    height: auto;
}

/* Preview-Panel: Optionsdatum */
#tqwafr-input-optiondate {
    padding: 0.2rem;
    height: auto;
}

/* Preview-Panel: Event-ID */
#tqwafr-input-external_key {
    padding: 0.2rem;
    height: auto;
}

/* Preview-Panel: Checkbox unter Event-ID */
#tqwafr-input-external_key_ignore {
    margin-top: 5px;
}

/* Preview-Panel: Event-Status */
#tqwafr-input-external_status {
    padding: 0.2rem;
    height: auto;
}


div.tqwafr-previewpanel-block-stornierung {
    margin-top: 15px;
}

div.tqwafr-previewpanel-block-bookingflex {
    margin-top: 15px;
    font-size: 90%;
    line-height: 120%;
}

table.tqwafr-cancellations {
    width: 100%;
}

/**********
 *  Liste der gespeicherten Anfragen und Anzeige einer fertigen Anfrage
 **********/

table.tqwafr-requestslist {
    width: 100%;
    margin-bottom: 0;
}

table.tqwafr-requestslist th,
table.tqwafr-requestslist td {
    padding: 0.6rem 0.4rem 0.6rem 0.4rem;
}

table.tqwafr-requestslist th {
    font-weight: normal;
    color: #a0a0a0;
}

table.tqwafr-requestslist a {
    /*    display: block; */
}

/**********
 *  Buchung der Anfrage
 **********/

#tqwafr-requestbooking {
}

#tqwafr-requestbooking div.tqwafr-requestbooking-formfields {
    max-width: 600px;
}

/*
#tqwafr-requestbooking div.form-group input,
#tqwafr-requestbooking div.form-group textarea,
#tqwafr-requestbooking div.form-group select {
    background-color: #e0e0e0;
    padding: 5px 5px 5px 10px;
    border-radius: 0;
    border: 1px solid #d0d0d0;
}
*/
/**********
 *  Allgemeines
 **********/

div.tqwafr-buttonbar {
    clear: both;
    margin: 15px 0 10px 0;
}

div.tqwafr-buttonbar button.float-right,
div.tqwafr-buttonbar a.float-right {
    margin-left: 20px;
}

div.tqwafr-buttonbar button.float-left,
div.tqwafr-buttonbar a.float-left {
    margin-right: 20px;
}

#tqwafr-content-container input.disabled {
    opacity: 0.5;
}

#tqwafr-content-container input:read-only {
}

span.tqwafr-alertbox-mini-cancelforfree {
    display: inline-block;
    padding: 3px 10px 3px 0px;
    color: #0fa851;
}

/* Spezielle Texte für direkt buchbar markierten */
span.tqwafr-alertbox-mini-directbook {
    display: inline-block;
    /*    border: 2px solid #0fa851; */
    padding: 3px 10px 3px 0px;
    color: #0fa851;
}

/* Spezielle Texte für optionale Anfragen markierten */
.tqwafr-alertbox-mini-requestoffer {
    display: inline-block;
    padding: 3px 10px 3px 0px;
    color: #FAA028;
}

table.tqwafr-profilingtable th,
table.tqwafr-profilingtable td {
    border: 1px;
    font-size: 10px;
    padding: 2px 5px 2px 5px;
}

/* Text "optional" bei den Checkboxen (Step 3n4) */
label.tqwafr-container-optional {
    color: #6060b0;
}


/* 2022-01-15: Diff zwischen neuer Wert und alter Wert bei bearbeiteten anfragen */

div.tqwafr-diff-new,
span.tqwafr-diff-new {
    opacity: 1.0 !important;
}

div.tqwafr-diff-old,
span.tqwafr-diff-old {
    opacity: 0.7 !important;
    font-weight: normal;
    text-decoration: line-through;
}

/* Interner Modus: Preisangabe und Anfrageauswahl für "auf Anfrage"-Preise */
#tqwafr-content-container input.tqwafr-price-input,
#tqwafr-content-container select.tqwafr-price-input {
    display: inline;
    height: auto;
    max-width: 120px; /** seltsam... "bei width: 120px" sind die zwei unterschiedlich breit */
    margin: 0;
    padding: 4px 2px 4px 2px;
    line-height: 130%;
    border-color: #6060b0;
}

/* Container um das Input-Feld für den Preis */
#tqwafr-content-container span.tqwafr-container-enterprice {
    display: block;
}

/* Container um das Select-Feld für den Requesttype */
#tqwafr-content-container span.tqwafr-container-onrequesttype {
    display: block;
}

span.tqwafr-abitsmaller {
    font-size: 90%;
}

/**
 * Tagungs-Flex.
 */

div.tqwafr-bookingflex-title {
    font-weight: bold;
    font-size: 110%;
    margin: 0px 0px 10px 0px;
}

div.tqwafr-bookingflex-description {
    margin: 0px 0px 10px 0px;
}

/**
 * Umsatzsteuer
 */

div.tqwafr-salestax-container {
    font-size: 85%;
    color: #808080;
    font-weight: normal;
    line-height: 130%;
}

div.tqwafr-salestax-line {
}

/**
 * 2023-02-13: Tooltip. Neu mit Zebra
 * Das Theme selbst liegt als Kopie eines Originals in css/zebra_tooltips.css
 */
span.tqwafr-tooltip-marker {
    padding: 0 5px 0 5px;
    margin-left: 5px;
    position: relative;
    display: inline;
    cursor: alias;
    font-weight: bold;
    font-size: 12px;
    border: 1px solid #808080;
    background-color: #ffffff;
    color: #404040;
}

.Zebra_Tooltip_Message p {
    margin: 0;
}

.Zebra_Tooltip_Message ul,
.Zebra_Tooltip_Message ol {
    margin: 0;
    padding-left: 20px;
}

/** Abschnitt der (mehr-paragrafisches) HTML enthält, inbesondere mit TinyMCE gepflegt */
div.tqwafr-html-multiline p {
    margin: 0 0 6px 0;
}

/* span nur um den Marker, z.B. '*' */
span.tqfawr-mandatory-marker {
}


/* div um Marker und Explain */
div.tqfawr-mandatory-explain {
    margin: 15px 0 5px 0;
    text-align: left;
    font-style: italic;
}

a.tqwafr-hiddenassistent {
    display: inline-block;
    text-decoration: none !important;
    width: 20px;
}