.ts-flex-element, .ts-flex-container, input, .ts-member-div,
.tsMemberBox , .tsMemberNameBox, #ts-flex-right-content {
    border-radius: 3px;
}
.maintable td {
    width: 50%;
}
.tsMessages:empty {
    display: none;
}
.hidden {
    display: none !important;
}
.tsMessage--error {
    background-color: inherit !important;
    padding: 0 !important;
}
.tsMessage--success {
    background-color: inherit !important;
    padding: 0 !important;
}
#ts-new-registration-div {
    display: flex;
    gap: 20px; /* optional */
}

.ts-flex-sidebar {
    position: relative;
    max-width: 50%;
    background-color: white !important;
    padding: 0 !important;
}
.ts-flex-sidebar .tsTrainings {
    grid-template-columns: 1fr 1fr;
    padding: 0 !important;
    //margin-top: 1.6rem !important;
    background-color: inherit !important;
}
.ts-flex-sidebar h4 {
    //position: absolute;
    //top: -40px;
    margin-top: 0 !important;
}

.ts-flex-container {
    display: flex;
    flex-grow: inherit;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
    flex-direction:row;
    flex-wrap: wrap;
}
.ts-flex-element {
    background-color: #eeeeee;
    margin: 0 10px 10px 0;
    padding: 20px;
    flex: 1;
    width: 100%;
    //min-width: 350px;
}

.ts-input {
    margin: 0 !important;
}
#ts-flex-left {
    flex: 2;
}
#ts-flex-right {
//height: 300px;
    flex: 1;
    border: none !important;
    background-color: white !important;
    padding: 0 !important;
}
#ts-flex-right-content {
    position: fixed;
    background-color: #eeeeee !important;
    padding: 20px;
    width: 30%;
    min-width: 250px;
}
#ts-data-protection {
    margin: 13px 0 20px 0;
}

.page-content input, .page-content select, .ui-dialog input, .ui-dialog select {
    margin: 10px 0;
}

.ts-group, .tsGroup, .ui-widget {
    margin-bottom: 0 !important;
    font-family: inherit !important;
}

#registration-coupon-code-info {
    color:green;
}
#registration-coupon-code-info-error {
    color:red;
}
#registration-coupon-code {
    width: calc(100% - 60px); min-width: 200px;
}
#ts-selected-members-wrapper .ts-member-div {
//background-color: #eeeeee !important;
//color: white;
}

#ts-imported-members-wrapper,
#ts-selected-members-wrapper {
    //display: flex;
    flex-flow: wrap;
}
#ts-account-data {
    display: flex;
}
#ts-account-data .ts-flex-element {
    padding: 0;
    //width: 50%
}
.ts-edit-icon {
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
}
.fa-edit {
    color: #999999;
}
.ts-purple .ts-edit-icon {
    color: #ffffff !important;
}

.ts-purple {
    //max-width: 400px !important;
}
.ts-width-100 {
    //max-width: calc(100% - 18px) !important;
}
#ts-account-data .ts-flex-element > div {
    background-color: white !important;
    border: 1px grey solid;
    padding: 10px;
}
.ts-member-div {
    //width: 32%;
    min-width: 180px;
    color: black;
    border: 1px grey solid;
    background-color: white !important;
    padding: 10px 10px 30px 15px;
    //margin: 0 5px 5px 0;
    position: relative;
    font-size: 14px;
}

.ts_member_box li
{
    list-style: none;
}
.ts_member_box ul
{
    padding: 0 !important;
}
.ts-label-mini {
    font-size: 13px;
    font-weight: bold;
    margin-top: 20px;
}
.ts-select-member-button,
.ts-deselect-member-button {
    position: absolute;
    bottom: -10px;
    left: 0;
    height: 20px;
    padding: 0 0 2px 0;
    font-size: 12px;
    border: none;
    border-top: 1px grey solid;
    width: 100%;
    border-radius: 0;
}
#registration-inv-number {
    margin-top: 0;
}
#coupon-check {
    font-size: 16px;
}
#coupon-check-button {
    cursor: pointer;
    color: #FFF;
    background-color: #4599d4;
}
#ts-imported-members-wrapper {
    margin-top: 15px;
}
#ts-imported-members-wrapper:empty {
    margin-top: 0;
}
.ts-select-member-button {
    color: white;
    background-color: #4599d4 !important;
}
.ts-deselect-member-button {
    color: black;
    background-color: #ffffff !important;
}
.ts-deselect-member-button:hover {
    color: black !important;
}
#ts-selected-members-wrapper .ts-select-member-button {
    background-color: #ffffff !important;
}
.ts-member-just-registered .ts-select-member-button {
    background-color: white !important;
}
.ts-select-member-button:disabled {
    background-color: white !important;
    border: 1px black solid !important;
    color: black !important;
}
.ts-member-just-registered {
    background-color: #ffffff !important;
}
.ts-member-collect-account{
    border: 1px #008800 solid;
}
.ts-collect-account-label {
    color: green;
}
.ts-member-collect-account .ts-select-member-button {
    background-color: #008800 !important;
}
.ts-button-disabled {
    background-color: #eeeeee !important;
}
[type="button"]:disabled {
    border-top: 1px grey solid !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}
.ts-member-collect-account .ts-select-member-button:disabled {
    color: white !important;
}
#ts-register-button {
    display: none;
}
h4 {
    font-size: 20px;
    font-weight: bold;
}
.ts-purple {
    background-color: #4599d4 !important;
    color: white;
}
table.maintable td {
    padding: 5px 10px 5px 0 !important;
    background-color: #eeeeee;
    border: none;
}
table.maintable input {
    margin: 0 !important;
}
#dia-error-display:empty {
    display: none;
}
#dia-error-display {
    color: red;
}
.error_email_exists {
    color: red;
    //max-width: 350px;
}/* =========================
   GLOBAL RESPONSIVE FIXES
   ========================= */

* {
    box-sizing: border-box;
}

.tsGroup input,
.tsGroup select,
.tsGroup button {
    width: 100%;
    max-width: 100%;
}

.tsGroup {
    margin-bottom: 15px;
}

/* =========================
   MEMBER BOXES
   ========================= */

.ts-member-div {
    //width: 100%;
    //margin-bottom: 15px;
}

/* =========================
   FLEX WRAPPING
   ========================= */

.tsMemberBox,
.tsMemberNameBox {<div class="ts-subline-div">
    //display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ts-subline-div {
    margin-bottom: 1rem;
}
    /* =========================
       BUTTONS MOBILE
       ========================= */

.ts-select-member-button,
.ts-deselect-member-button,
.ts-purple {
    width: 100%;
}

    /* =========================
       SUMMARY BOX
       ========================= */

    #ts-summary-participants-div {
        font-size: 13px;
    }
    #registration-coupon-code-info {
        margin-top: 7px;
        font-size: 13px;
    }
    #registration-coupon-code-info-error {
        font-size: 13px;
        margin-top: 7px;
    }
    #ts-summary-price-per-participant {
        font-size: 13px;
    }
    #ts-summary-price {
        font-weight: bold;
    }
    #ts-summary-mwst-label {

    }
    .ts-summary-info {
        margin-top: 10px;
    }
    .ts-summary-box {
        background: #f2f2f2;
    //border: 1px solid #ddd;
    //padding: 15px;
    //border-radius: 6px;
    }

    .ts-summary-box.hidden {
        display: none;
    }

    /* =========================
       JQUERY UI DIALOG MOBILE
       ========================= */

    .ui-dialog {
    //max-width: 95vw !important;
    //width: 95vw !important;
    }

    .ui-dialog-content {
        max-height: 80vh;
        overflow-y: auto;
    }


    /* =========================
       LAYOUT
       ========================= */

    .ts-registration-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .ts-salutation-label {
        margin-right: 15px;
        cursor: pointer;
    }

    .ts-salutation-label input {
        width: inherit !important;
        margin-right: 3px;
    }


    /* Hauptlayout */
    .container {
        display: flex;
        flex-grow: inherit;
        gap: 20px;
        align-items: flex-start;
    }

    /* Hauptlayout */
    .container-element {
        padding: 20px;
        background-color: #f2f2f2;
        margin-bottom: 20px;
    }
    .container-element:last-child {
        margin-bottom: 0 !important;
    }

    input.ts-purple {
    //max-width: 300px;
    }

    /* LINKE BOX */
    .left {
        flex: 2;
    }
    /* LINKE BOX */
    .left-inner {
        flex: 1;
        padding: 0 !important;
        width: 100%;
    }
    .fa-inner {
        cursor: pointer;
        float: right;
        font-size: 15px;
        line-height: 25px;
    }
    /* LINKE BOX INHALT */
    .left-content {
        display: grid;
    //grid-template-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, minmax(250px, 1fr));
        gap: 15px;
    }
    .element-zweispaltig {
        grid-template-columns: repeat(2, minmax(250px, 1fr)) !important;
    }

    .left .item {
        background: #fff;
        padding: 15px;
        border: 1px solid #ccc;
    //min-width: 250px;
    }

    /* RECHTE BOX */
    .right {
        width: 100%;
        background: #f2f2f2;
        padding: 20px;
        position: sticky;
        top: 20px;
        flex: 1;
    }

    .right:empty {
        padding: 0;
    }

    .grid-right {
        grid-column: 2;
    }
    .grid-left {
        grid-column: 1;
    }
    .grid-colspan-2 {
        grid-column: span 2;
    }
    .grid-colspan-3 {
        grid-column: span 3;
    }

    .group-label {
        width: 220px;
    }

    #coupon-check-button {
        width: inherit;
    }
    #add-member-button {
        grid-column: 1 / 1
    }
    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
        font-family: inherit;
        font-size: 1.0rem;
    }
#dia-error-display {
    line-height: 1.25;
}
/*style="background-color: grey; padding: 20px calc(50% - 20px); display: none"*/
#ts-loader-div {
    background-color: rgba(0, 0, 0, 0.3);
    /* padding: 20px calc(50% - 20px); */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    text-align: center;
    width: 100%;
}
    #ts-loader {
        width: 48px;
        top: 45%;
        height: 48px;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        border: 10px solid;
        border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }

.ts-loading-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.ts-loading-overlay.show{
    display: flex;
}
.ts-spinner{
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ts-spin 1s linear infinite;
}
@keyframes ts-spin {
    to { transform: rotate(360deg); }
}

#ts-submit-loader-div {
    background-color: rgba(0, 0, 0, 0.3);
    /* padding: 20px calc(50% - 20px); */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 1000%;
    text-align: center;
    width: 100%;
    z-index: 1000;
}
#ts-submit-loader {
    width: 48px;
    top: 10%;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 10px solid;
    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /* =========================
       MEDIA QUERIES
       ========================= */

    /* =========================
       DESKTOP STICKY
       ========================= */

    @media (min-width: 1024px) {

        .ts-registration-layout {
            flex-direction: row;
            align-items: flex-start;
        }

        .ts-registration-main {
            flex: 1 1 auto;
            min-width: 0;
        }

        .ts-summary-box {
            flex: 0 0 320px;
            position: sticky;
            top: 120px; /* Abstand zum Header */
            max-height: calc(100vh - 140px);
        //min-width: 200px;
            overflow-y: auto;
        }
    }

    /* Mobile klein*/
    @media (min-width: 3000px) {
        .group-label {
            width: 200px;
        }
        .tsGroup input,
        .tsGroup select {
            width: calc(100% - 220px);;
        }
    }
    /* 📱 Mobile */
    @media (max-width: 880px) {
        #ts-register-button {
            position: sticky;
            bottom: 0;
            width: 100%;
            z-index: 10;
            padding: 15px;
            background: #fff;
            border-top: 1px solid #ddd;
        }
        .container {
            flex-direction: column;
        }

        .col-2-element {
            display: none;
        }
        .grid-colspan-2 {
            grid-column: span 1;
        }

        .left,
        .right {
        //width: 100%;
        }

        .grid-left {
            grid-column: 1;
        }
        .grid-right {
            grid-column: 1;
        }

        .right {
            position: static;
        }

        #ts-new-registration-div {
            flex-direction: column;
        }

        #ts-flex-left,
        #ts-flex-right {
            flex: none;
            width: 100%;
        }
        .left-content {
        //grid-template-columns: 1fr 1fr;
            grid-template-columns: repeat(2, minmax(250px, 1fr));
        }
        .element-zweispaltig {
            grid-template-columns: repeat(1, minmax(250px, 1fr)) !important;
        }
        .tsGroup input[type=checkbox],
        .tsGroup input[type=radio] {
            width: auto;
        }

        .ts-select-member-button,
        .ts-deselect-member-button {
        //width: auto;
        }
    }

    @media (max-width: 980px) {

        .ts-flex-sidebar .tsTrainings {
            grid-template-columns: 1fr;
        }
    }
    /* Mobile klein*/
    @media (max-width: 700px) {
        .ts-flex-sidebar {
            max-width: 100%;
            margin-top: 50px;
        }
        .ts-flex-sidebar .tsTrainings {
            grid-template-columns: 1fr 1fr;
        }
    }
    /* Mobile klein*/
    @media (max-width: 480px) {
        .ts-flex-element {
            flex: 0 0 100%;
            width: 100%;
            margin-right: 0; /* kein rechter Abstand mehr */
        }
        .left-content {
        //grid-template-columns: 1fr;
            grid-template-columns: repeat(1, minmax(250px, 1fr));
        }
    }