:root {
    --primary-color: #14387f;
    --primary-color-transparent-70: rgba(20, 56, 127, 0.7);
    --primary-color-transparent-50: rgba(20, 56, 127, 0.5);
    --primary-color-transparent-30: rgba(20, 56, 127, 0.3);
    --primary-color-transparent-10: rgba(20, 56, 127, 0.10);
    --secondary-color: #406cb2;
    --secondary-color-hover: rgba(64, 108, 178, 0.8);
    --inactive-color: #808080;
    --grey-background: #ddd;
    --grey-background-border: #ddd;
    --font-label: 14px;
}

/***** general *****/ 
#primaryLogo img {
    height: 30px;
    margin-top: 5px;
}
.woocommerce-MyAccount-content .woocommerce-Button.wc-forward.button {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
.font-label {
    font-size: var(--font-label);
}
.bg-primary {
    background-color: var(--primary-color);
}
.bg-primary\/50,
.breadcrumbBorderFilled.bg-primary\/50 {
    background-color: var(--primary-color-transparent-50);
}
.bg-white {
    background-color: #fff;
}
.bg-lightGrey {
    background-color: var(--grey-background);
}
.border-primary {
    border-color: var(--primary-color);
}
.text-disabled {
    color: var(--inactive-color);
}
.text-font {
    color: var(--font-color);
}
.text-white,
.hover\:text-white:hover {
    color: #fff;
}
.text-primary {
    color: var(--primary-color);
}
.text-statusGreen {
    color: var(--status-green);
}
.text-20 {
    font-size: 20px;
}
.hidden {
    display: none;
}
.opacity-0,
.lightbox.opacity-0,
.lightboxOverlay.opacity-0 {
    opacity: 0;
} 
.invisible,
.lightbox.invisible,
.lightboxOverlay.invisible {
    visibility: hidden;
}
.visible,
.lightbox.visible,
.lightboxOverlay.visible {
    visibility: visible;
}
.opacity-100,
.lightbox.opacity-100,
.lightboxOverlay.opacity-100 {
    opacity: 100%;
}
.errorMessageRequiredField.block,
.errorMessageInvalidUid.block,
.errorMessageInvalidUid-CHE.block,
.errorMessageInvalidUid-FL.block,
.errorMessageInvalidAhv.block,
.errorMessageInvalidChecksum.block,
.errorMessageAhvNumberIsInUse.block,
.errorMessageAhvNumberIsInJSON.block,
.errorMessageInvalidSKU.block,
.errorMessageAhvNumberIsInCart.block,
.errorMessageInvalidLogin.block,
.errorMessageInvalidLoginInAvendoo.block,
.errorMessageEmailIsInJSON.block,
.errorMessageInvalidEmailSyntax.block,
.errorMessageCheckTrainerMail.block,
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.items-center {
    align-items: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-center {
    justify-content: center;
}
.gap-10 {
    gap: 10px;
}
.gap-20 {
    gap: 20px;
}
.gap-30 {
    gap: 30px;
}
.gap-x-40 {
    column-gap: 40px;
} 
.gap-y-10 {
    row-gap: 10px;
}
.flex-wrap {
    flex-wrap: wrap;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.top-\[-30px\] {
    top: -30px;
}
.top-\[-45px\] {
    top: -45px;
}
.top-\[\-4px\] {
    top: -4px;
}
.right-0 {
    right: 0;
}
.left-\[-1000\%\] {
    left: -1000%;
}
.left-\[130px\] {
    left: 130px;
}
.m-0,
.startTextWrapper .themeButton.m-0 {
    margin: 0;
}
.mt-0 {
    margin-top: 0;
}
.mt-4 {
    margin-top: 4px;
}
.mt-10 {
    margin-top: 10px;
}
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40,
.mt-40-important,
html body .woocommerce .mt-40-important {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}
.mb-0,
.mb-0-important,
html body .woocommerce .mb-0-important {
    margin-bottom: 0;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-54 {
    margin-bottom: 54px;
}
.ml-30 {
    margin-left: 30px;
}
.p-20 {
    padding: 20px;
}
.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.py-15,
#container .woocommerce #learnerTable .py-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}
.px-20,
#container .woocommerce #learnerTable .px-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.px-10 {
    padding-right: 10px;
    padding-left: 10px;
}
.px-22 {
    padding-right: 22px;
    padding-left: 22px;
}
.w-\[calc\(50\%_-_50px\)\] {
        width: calc(50% - 50px);
}
.w-50 {
    width: 50%;
}
.w-60 {
    width: 60%;
}
.w-\[70px\] {
    width: 70px;
}
.w-full,
.breadcrumbBorderFilled.w-full {
    width: 100%;
}
.w-fit {
    width: fit-content;
}
.max-w-\[1140px\] {
    max-width: 1140px;
}
.max-w-\[1200px\] {
    max-width: 1200px;
}
.min-w-\[70px\] {
    min-width: 70px;
}
.h-\[10px\] {
    height: 10px;
}
.h-\[70px\] {
    height: 70px;
}
.z-10 {
    z-index: 10;
}
.font-semibold {
    font-weight: 600;
}
.text-center {
    text-align: center;
}
.text-start,
#container .woocommerce #learnerTable .text-start {
    text-align: start;
}
.border-collapse {
    border-collapse: collapse;
}
.align-middle {
    vertical-align: middle;
}
.border-b-2-primary {
    border-bottom: 2px solid var(--primary-color);
}
.border-b {
    border-bottom: 1px solid var(--font-color);
}
.border-b-ccc {
    border-bottom: 1px solid #ccc;
}
.shadow {
    box-shadow: var(--box-shadow);
}
.shadow-none,
.shadow-none-important,
html body .woocommerce .shadow-none-important {
    box-shadow: none;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded {
    border-radius: var(--border-radius);
}
.rounded-l {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
.iconSize-18 {
    font-size: 18px
}
.iconSize-32 {
    font-size: 32px
}
.duration-0 {
    transition-duration: 0;
}
.pointer-events-none {
    pointer-events: none;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-none {
    cursor: none;
}
.overflow-x-auto {
    overflow-x: auto;
}

/* Menu */
body:not(.logged-in) .inner-nav .menu-item a[href*="training-center-location"] {
    display: none;
}

/* Start page */
.startSectionWrapper {
    min-height: calc(100vh - 2*130px - 64px - 54px);
}

/* Bestellungen */
.woocommerce-view-order section.woocommerce-customer-details {
    display: none;
}

/* hide language flags */
.mainNavLinkIcon .wpml-ls-flag {
    display: none;
}
.mainNavLinkIcon .wpml-ls-legacy-list-vertical .wpml-ls-flag+span {
    margin-left: 0;
}

/***** woocommerce *****/
.cart_totals tr.cart-subtotal {
    display: none;
}
#container .woocommerce .cart_totals .order-total {
    border-radius: var(--border-radius);
}
#container .woocommerce .cart_totals .order-total th {
    border-top-left-radius: var(--border-radius);
    background-color: #fff;
}
#container .woocommerce .cart_totals .order-total td {
    border-top-right-radius: var(--border-radius);
    background-color: #fff;
}
.woocommerce-checkout-review-order-table tr.cart-subtotal {
    display: none;
}
table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details tfoot tr:first-child {
    display: none; /* Kaufabschlussseite */
}
th.woocommerce-orders-table__header.woocommerce-orders-table__header-order-status, 
td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-status {
    display: none;
}
html .woocommerce form .form-row .required {
    color: var(--font-color);
}
.woocommerce form .form-row label.labelRadioButton, 
.woocommerce-page form .form-row label.labelRadioButton,
.woocommerce form .form-row label.labelCheckbox, 
.woocommerce-page form .form-row label.labelCheckbox {
    display: flex;
}
html .woocommerce form .form-row [placeholder]:focus::-webkit-input-placeholder {
    transition: none;
    opacity: 1;
}
.woocommerce-cart-form .product-price bdi, 
.woocommerce-cart-form .product-subtotal bdi {
    white-space: nowrap;
}
.woocommerce-cart td.product-name[role="rowheader"] {
    font-size: 18px;
}
.wc-gzd-cart-info.wc-gzd-item-desc.item-desc {
    width: 100%;
}
html body .woocommerce form .billingCheckbox .labelFlex.checkbox {
    margin: 0;
    align-items: center;
}

/* X bzw. loeschen im Warenkorb vergroessern */
.woocommerce-cart-form__cart-item a.remove {
    font-size: 50px;
    margin-right: -40px;
}

/* Buttons weisse Schrift auf Blau ohne Border */
html body .woocommerce-Button, html body .woocommerce .button {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border: none !important;
    font-weight: bold !important;
}
html body .woocommerce-Button:hover, html body .woocommerce .button:hover {
    background-color: var(--secondary-color) !important;
}
.tertiaryButton {
    background-color: #fff;
    color: var(--primary-color);
}
.tertiaryButton:hover {
    background-color: #fff;
    color: var(--secondary-color) !important
}
.tertiaryButton i:before {
    color: var(--primary-color) !important;
}
.tertiaryButton:hover i:before {
    color: var(--secondary-color) !important;
}
.arrowButtonBack .dooIconContainer {
    top: 15px;
}
a.singleEventButtonLink {
    background-color: var(--primary-color);
}
a.singleEventButtonLink i:before {
    color: #fff !important;
}
a.singleEventButtonLink:hover,
.eventOverviewTable .singleEvent:hover .singleEventContentInner .singleEventButtonLink {
    background-color: var(--secondary-color);
}
/* Weitere Button Anpassungen */
button {
    text-transform: none;
    background-image: none;
    cursor: pointer;
    border: none;
}
.primaryButton i,
.secondaryButton i,
.secondaryButton:hover,
.secondaryButton:hover i {
    color: #fff;
}
.smallButton {
    width: fit-content;
    min-width: fit-content;
    border-radius: 9999px;
    padding: 7px 20px;
    font-weight: 600;
}
.smallButtonResponsive {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: 9999px;
    font-size: 0;
    transition: none;
}
.buttonDisabled {
    pointer-events: none;
    background-color: var(--grey-background);
    color: var(--inactive-color);
}
.buttonDisabled i {
    color: var(--inactive-color);
}
.fixButtons {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.2);
    width: 100%;
    padding-bottom: 20px;
    backdrop-filter: blur(5px);
    box-shadow: 0 -4px 11px 0 rgba(0,0,0,0.1);
}
.fixButtons > div {
    margin: 0 auto;
}

/* Checkboxes and radio buttons */
.labelCheckbox,
.labelRadioButton {
    display: flex;
    cursor: pointer;
    align-items: center;
}
.checkboxStyle {
    position: absolute;
    margin: 0px;
    min-height: 0px;
    width: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 0px;
    padding: 0px;
    opacity: 0;
}
.checkboxStyle+span {
    margin-right: 10px;
    box-sizing: content-box;
    height: 22px;
    width: 22px;
    min-width: 22px;
    border-radius: 4px;
    border: 1px solid transparent;
    padding: 0px;
}
.checkboxStyle+span:focus {
    box-shadow: 0px 0px 0px 3px var(--primary-color-transparent-30);
}
.checkboxStyle:not(:checked)+span {
    border-color: var(--grey-background-border);
    background-color: #fff;
}
.checkboxStyle[disabled]:not(:checked) + span {
    background: #fff;
}
.checkboxStyle+span::after {
    content: '';
    display: block;
    transform: rotate(45deg) scale(0);
    transition: transform ease 0.2s;
    height: 10px;
    width: 5px;
    margin-left: 7px;
    margin-top: 3px;
    border-width: 1px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-style: solid;
    border-color: #fff;
    box-sizing: content-box;
}
.checkboxStyle[disabled]:not(:checked)+span::after {
    display: none;
}
.checkboxStyle:checked+span {
    background-color: var(--primary-color);
}
.checkboxStyle[disabled]:checked+span {
    background-color: var(--inactive-color);
}
.checkboxStyle:checked+span::after {
    transform: rotate(45deg) scale(1);
}
.radioButton {
    appearance: none;
    border: 1px solid var(--grey-background-border);
    background-color: #fff;
    margin: 0 12px 0 0;
    height: 24px;
    width: 24px;
    min-width: 24px;
    border-radius: 100%;
    cursor: pointer;
    transition: all ease 0.2s;
}
.radioButton:checked {
    background: #fff;
    box-shadow: inset 0 0 0 7px var(--primary-color);
    border: none;
}
.radioButton.disabled:checked,
.radioButton[disabled]:checked {
    box-shadow: inset 0 0 0 7px var(--inactive-color);
}
.radioButton[disabled],
.radioButton.disabled,
.checkboxStyle[disabled]+span,
.checkboxStyle.disabled+span {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Produktpreis Schriftgroesse auf single product Seite aendern */
.customSingleProductPage  h1.productPrice {
    font-size: 24px;
}

.loginRegisterWrapper .pw_custom_field {
    display: none;
}

/* Klassifikation */ 
[data-classification="darstellung-im-webshop"] {
    display: none;
}

/* Error and note Messages */
.errorMessageRequiredField,
.errorMessageInvalidUid,
.errorMessageInvalidUid-CHE,
.errorMessageInvalidUid-FL,
.errorMessageInvalidAhv,
.errorMessageInvalidChecksum,
.errorMessageAhvNumberIsInUse,
.errorMessageAhvNumberIsInJSON,
.errorMessageInvalidSKU,
.errorMessageAhvNumberIsInCart,
.errorMessageInvalidLogin,
.errorMessageInvalidLoginInAvendoo,
.errorMessageEmailIsInJSON,
.errorMessageInvalidEmailSyntax,
.errorMessageCheckTrainerMail {
    color: var(--status-red);
    display: none;
    margin: 4px 0 0 0;
}
.formMessage.info-message::before {
    content: '\e846';
    color: var(--primary-color);
}

/* Lightbox */
.lightbox {
    border-radius: var(--border-radius);
    background-color: #fff;
    padding: 20px;
    max-width: 800px;
    width: fit-content;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: var(--box-shadow);
    transition: ease-out .2s;
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
}
.lightboxOverlay {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: all ease .2s;
    background-color: rgba(0,0,0,0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
}

/* voruebergehend */
html div.woocommerce .checkout-button,
body.woocommerce-checkout #place_order {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
body.woocommerce-checkout #place_order:hover,
html div.woocommerce .checkout-button:hover {
    background-color: var(--secondary-color) !important;
}

/***** Participant and learner registration *****/
.purchasePriceInformation {
    margin-top: 0;
}
html .woocommerce form .form-row input[type="date"].input-text {
    display: block;
}
.input-text::-webkit-calendar-picker-indicator {
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.learnerItem:first-child {
    margin-top: 80px;
}
.purchasePriceInformation .countedPrice span {
    font-size: 20px;
}
.woocommerce-cart .cart_item dd.variation-AHV-Nummer p {
    margin-top: 4px;
}
.learnerOrderDetailsWrapper .wide-training-catalog-image img {
    height: 100%;
    object-fit: cover;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
.learnerOrderDetailsWrapper .wide-training-catalog-content {
    align-items: center;
}

/***** Training center location *****/
.customLoader {
    height: 40px;
    width: 40px;
    border-radius: 9999px;
    display: inline-block;
    border-style: solid;
    border-width: 3px 3px 0px 0px;
    border-top-color: var(--primary-color);
    border-right-color: transparent;
    box-sizing: border-box;
    animation: loader 1s linear infinite;
}
@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.breadcrumbBorder {
    position: relative;
    height: 10px;
    width: 100%;
}
.breadcrumbBorderFilled {
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 0px;
    background-color: #fff;
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: .2s;
    transition-duration: .5s;
}
.bg-gradient-to-b-from-white-\/25-to-white\/25 {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(255,255,255,0.25));
}
#container .woocommerce #learnerTable tbody tr:last-child {
    border-bottom: none;
}

/* Workaround bei Liveschaltung rausnehmen - Fehler beim Plugin-Anpassung anpassen */
.elearning-item.catalog-item {
    display: none;
}
.elearning-item.catalog-item[onclick*="grundlagen"],
.elearning-item.catalog-item[onclick*="ausbildungskurs"] {
    display: flex;
}
/* Workaround END */

/* media queries */
@media(max-width: 1200px) {
    .startSectionWrapper {
        min-height: calc(100vh - 2*70px - 64px - 54px);
    }
    .lg\:max-w-\[1080px\] {
        max-width: 1080px;
    }
    .lg\:w-\[calc\(100\%-120px\)\] {
        width: calc(100% - 120px);
    }
    .lg\:flex-col {
        flex-direction: column;
    }
    .lg\:mb-15,
    .formField.lg\:mb-15 {
        margin-bottom: 15px;
    }
    .lg\:ml-0,
    .formField.lg\:ml-0 {
        margin-left: 0;
    }
    .lg\:mr-0,
    .formField.lg\:mr-0 {
        margin-right: 0;
    }
    .lightbox {
        width: 70%;
        max-width: none;
    }
}
@media(max-width: 900px) {
    .lightbox {
        width: 80%;
    }
}
@media (max-width: 600px) {
    .sm\:top-\[-20px\] {
        top: -20px;
    }
    .sm\:iconSize-24 {
        font-size: 24px;
    }
    .sm\:w-\[50px\] {
        width: 50px;
    }
    .sm\:min-w-\[50px\] {
        min-width: 50px;
    }
    .sm\:h-\[50px\] {
        height: 50px;
    }
    .sm\:w-fit {
        width: fit-content;
    }
    .sm\:w-full {
        width: 100%;
    }
    .sm\:ml-auto {
        margin-left: auto;
    }
    .sm\:flex-col {
        flex-direction: column;
    }
    .fixButtons > div {
        justify-content: end;
        width: calc(100% - 60px);
    }
    .lightbox {
        width: 90%;
    }
}
@media(max-width: 480px) {
    .startTextWrapper {
        margin-left: 30px;
        margin-right: 30px;
    }
    div#primaryLogo img {
        height: 20px;
        margin-top: 10px;
    }
    .header #headerLinks .mainNavLinkIcon {
        padding: 0px 8px;
    }
}