/*Kopie von site-0 mit anderen Gutscheinen für TSH*/

/*Stufenname ausblenden*/
body > div.level-header-name {
    display: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*Variablen*/
:root {
    --white: hsl(40, 100%, 97%);
    --bg-color: hsl(220, 23%, 97%);
    --bt-color: #8c2e5a;
    --bt-color-hover: #a04272;
    --bt-color-font: hsl(40, 100%, 97%);
    --color-font: hsl(0, 0%, 45%);
    --th-bg-color: hsl(0, 0%, 80%);
    --th-color-font: hsl(0, 0%, 45%);
    --tr-bg-color-odd: hsl(220, 23%, 97%);
    --tr-bg-color-even: hsl(220, 23%, 97%);
}

.course-events {
    display: none;
}

.required-item:after {
    color: #8c2e5a !important;
}

#lblPartnerBic:after,
label[for="customerBic"]:after,
label[for="partnerIban"]:after,
label[for="partnerAccountOwner"]:after {
    display: none !important;
}

.course-key {
    display: none !important;
}

body {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--bg-color);
    color: var(--color-font);
}

h1, h2, h3, .h1, .h2, .h3 {
    margin-top: 0;
    font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-font);
}

table {
    margin: 15px;
    border-collapse: collapse;
    width: 90%;
}

th {
    background: var(--th-bg-color);
}

tr {
    transition: all .2s ease-in;
    cursor: pointer;
}

h1 {
    font-weight: 600;
    text-align: center;
    color: var(--color-font);
    padding: 10px 0px;
}

tr.odd td {
    background-color: var(--tr-bg-color-odd) !important;
}

tr.even td {
    background-color: var(--tr-bg-color-even) !important;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border: none;
}

td.event-block {
    display: none;
}

.btn-default,
.btn-primary {
    text-decoration: none;
    display: inline-block;
    padding: 5px 14px;
    background-color: var(--bt-color);
    color: var(--bt-color-font);
    border-radius: 5px;
    box-shadow: 0 1px 3px #000;
    transition: all 1s;
}

.btn-default:visited,
.btn-primary:visited {
    text-decoration: none;
    display: inline-block;
    padding: 5px 14px;
    background-color: var(--bt-color);
    color: var(--bt-color-font);
    border-radius: 5px;
    box-shadow: 0 1px 3px #000;
    transition: all 1s;
}

.btn-default:hover,
.btn-primary:hover {
    text-decoration: none;
    display: inline-block;
    padding: 5px 14px;
    background-color: var(--bt-color-hover) !important;
    color: var(--bt-color-font);
}

.btn-default.disabled {
    background-color: var(--bt-color);
    color: var(--bt-color-font);
}

a.btn.btn-xs.btn-warning {
    color: #fff;
    background-color: #848484;
    border-color: #848484;
}
a.btn.btn-xs.btn-warning:hover {
    color: #848484;
    background-color: #fff;
    border-color: #848484;
}

.alert-info {
    color: #fff !important;
    background: #8c2e5a !important;
    border-color: #8c2e5a !important;
    border-radius: 5px;
}

.alert-info .fa,
.alert-info i,
.alert-info a {
    color: #FF8FA3 !important;
}

#public-coupon-form,
.coupon-step-container,
.coupon-step-header {
    background: transparent !important;
}

/*Ausgewählter Gutschein und Betrag in Firmenfarbe, Ticket #46515*/
#public-coupon-form .coupon-template-item.selected,
#public-coupon-form .coupon-value-item.selected {
	border: 2px solid #8c2e5a;
	background-color: #8c2e5a;
	color: #FFF;
}
#public-coupon-form div.coupon-template-item.selected div.coupon-template-preview-link a {
	background-color: #FFF;
	color: #8c2e5a;
}

/*Gutscheine TSH ausblenden*/
#public-coupon-form div[data-template="Fitness1"],
#public-coupon-form div[data-template="Fitness2"],
#public-coupon-form div[data-template="Gastro1"],
#public-coupon-form div[data-template="Gastro2"],
#public-coupon-form div[data-template="Gastro3"],
#public-coupon-form div[data-template="Geburtstag"],
#public-coupon-form div[data-template="Hochzeit1"],
#public-coupon-form div[data-template="Hochzeit2"],
#public-coupon-form div[data-template="Jugend"],
#public-coupon-form div[data-template="Muttertag"],
#public-coupon-form div[data-template="Neutral"],
#public-coupon-form div[data-template="Ostern"],
#public-coupon-form div[data-template="Valentinstag"],
#public-coupon-form div[data-template="Weihnachten"]{
	display:none;
}

.col-remarks,
td.col-remarks {
    font-weight: bold;
}

/* =====================================================
   CHECKBOXEN — unverändert aus site-1
   ===================================================== */

#agb-container, 
#privacy-container, 
#is-guardian-confirmation-container,
#additional-infos-container,
#public-registration-form .row:has(#newsletter) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

#agb-container > .col-xs-4,
#privacy-container > .col-xs-4,
#is-guardian-confirmation-container > .col-xs-4,
#additional-infos-container > .col-xs-4,
#public-registration-form .row:has(#newsletter) > .col-xs-4 {
    width: 33.3333% !important;
    flex: 0 0 33.3333% !important;
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-right: 15px !important;
    float: none !important;
}

#public-registration-form .row:has(#newsletter) > .col-xs-4::after {
    content: "*";
    color: transparent !important;
    visibility: hidden;
    margin-left: 2px;
}

#agb-container > .col-xs-6,
#privacy-container > .col-xs-6,
#is-guardian-confirmation-container > .col-xs-6,
#additional-infos-container > .col-xs-6,
#public-registration-form .row:has(#newsletter) > .col-xs-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
    padding-left: 5px !important;
    float: none !important;
}

.required-item {
    display: inline-block !important;
    margin-left: 2px;
}

/* =====================================================
   NEU: Tabellenheader, Info-Icon, Ausrichtung, Kachel
   ===================================================== */

/* 1. Tabellenheader Firmenfarbe, weiße Schrift */
#courses-table th {
    background-color: #8c2e5a !important;
    color: #fff !important;
}

/* 3. Tabelle linksbündig */
#courses-table {
    margin-left: 0 !important;
}

/* 4. Ausgewählter Buchungskasten Firmenfarbe, weiße Schrift */
.booking-type-item.selected,
.booking-type-item.active {
    background-color: #8c2e5a !important;
    color: #fff !important;
    border-color: #8c2e5a !important;
}

.booking-type-item.selected span,
.booking-type-item.active span {
    color: #fff !important;
}

/*------------------------------MediaQueries-------------------------------------*/
@media screen and (max-width: 600px) {
    thead,
    #courses-table > tbody > tr:nth-child(odd) > td.col-events,
    #courses-table > tbody > tr:nth-child(even) > td.col-events {
        display: none;
    }
    table td[class*="col-"],
    table th[class*="col-"] {
        display: block;
    }
    #courses-table table,
    #courses-table tr,
    #courses-table tbody,
    #courses-table td,
    #courses-table th {
        display: block;
        border: none;
    }
    #courses-table > tbody > tr:nth-child(odd),
    #courses-table > tbody > tr:nth-child(even) {
        background-color: var(--bg-color);
        color: var(--color-font);
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        margin: 5%;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
    }
    #courses-table tbody tr:nth-child(even) td.col-coursename:before,
    #courses-table tbody tr:nth-child(odd) td.col-coursename:before { content: "Kurs:"; }
    #courses-table tbody tr:nth-child(even) td.col-location:before,
    #courses-table tbody tr:nth-child(odd) td.col-location:before { content: "Ort:"; }
    #courses-table tbody tr:nth-child(even) td.col-firstEvent:before,
    #courses-table tbody tr:nth-child(odd) td.col-firstEvent:before { content: "Einstieg: "; }
    #courses-table tbody tr:nth-child(even) td.col-events:before,
    #courses-table tbody tr:nth-child(odd) td.col-events:before { content: "Terminanzahl: "; }
    #courses-table tbody tr:nth-child(even) td.col-price:before,
    #courses-table tbody tr:nth-child(odd) td.col-price:before { content: "Preis: "; }
    #courses-table tbody tr:nth-child(even) td.col-remarks:before,
    #courses-table tbody tr:nth-child(odd) td.col-remarks:before { content: "Anmerkungen: "; }

    td { text-align: right; }
    td::before {
        float: left;
        margin-right: 3rem;
        font-weight: bold;
    }
    #courses-table > tbody > tr:nth-child(odd) > td.col-coursename,
    #courses-table > tbody > tr:nth-child(even) > td.col-coursename { font-weight: bold; }

    .btn-default { width: 100%; }
    .btn, .btn-primary {
        display: block;
        text-align: center;
        margin-top: 10px;
        padding: 0.2em 0.6em;
    }
    .btn-default.disabled {
        background-color: var(--bt-color);
        color: var(--bt-color-font);
    }
    body > div.level-header-name { display: none; }
}