styles.css */

/* CSS für den Container, der den Terminbuchungsbereich umgibt */
.appointment-branches-container {
    width: 80%;
    /* Beispiel: Begrenzt die Breite auf 80% der Seitenbreite */
    margin: 0 auto;
    /* Zentriert das Element horizontal */
    background-color: #ffffff;
}


/* CSS für die Tabelle, die den Terminbuchungsbereich darstellt */
.appointment-table {
    flex-grow: 1;
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
    display: block;
    unicode-bidi: isolate;
    color: rgb(17 24 39);
    border: 0 solid #e5e7eb;
    margin-left: -27%;
    width: 150%;
    /* Beispiel: Begrenzt die Breite auf 80% der Seitenbreite */
    font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}




/* CSS für die Zellen in der Tabelle */



/* CSS für die linke Spalte */
.left-column {
    padding: 1rem !important;
    width: 14rem;
    display: block;
    visibility: visible;
    background-color: rgb(14 165 233);
    border-bottom-left-radius: .375rem;
    border-top-left-radius: .375rem;
    box-sizing: border-box;
    unicode-bidi: isolate;
    border: 0 solid #e5e7eb;
    color: #fff;
    font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}


/* CSS für die rechte Spalte */
.right-column {
    width: 200%;
    /* Breite der rechten Spalte */
    vertical-align: top;
    border-bottom: 5px solid #ccc;
    font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Neue Schriftart verwenden */
    padding: 5px;
    font-size: 1rem;
}




/* CSS für die Checkbox, wenn sie ausgewählt ist */
.appointment-service:checked {
    background-color: #0d6efd; /* Blau leuchtende Farbe */
    border-color: #0d6efd; /* Rand in der gleichen Farbe */
}


/* CSS für die Checkbox, wenn sie standardmäßig angezeigt wird */
.appointment-service {
    appearance: none; /* Entfernt das Standard-Aussehen der Checkbox */
    background-color: #fff; /* Hintergrundfarbe */
    float: left;
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, .25);
}

    


/* CSS für das Kontrollkästchen, wenn es ausgewählt ist, um den Haken anzuzeigen */
.appointment-service:checked::before {
    content: '✔'; /* Haken-Symbol */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; /* Hakenfarbe weiß */
}


/* Weiter Button */
.appointment-button {
    border-radius: .375rem;
    /* Vereinfachte Schreibweise für alle Ecken */
    cursor: pointer;
    color: #fff !important;
    padding: .60rem 2rem !important;
    /* Erhöhte Padding-Werte für mehr Größe */
    font-weight: 600;
    border: 0 solid #e5e7eb;
    background-color: rgb(14, 165, 233);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1rem;
    /* Optional: Schriftgröße anpassen */
}


/* CSS für das Element, das die ausgewählte Filiale anzeigt */
#selected-branch {
    font-weight: bold;

}

.selected-service {
    color: #1e2460;
    /* or any other blue color you prefer */

}


/* CSS für die Überschrift innerhalb der linken Spalte */
.left-column h4 {
    margin: 0;
    font-size: 1.5rem !important;
    font-weight: bold;
}


/* CSS für die Überschrift "Bitte wählen Sie die Filiale ihres Termins" */
.font-semibold {
    font-size: 1.25rem !important;
    margin: 0 !important;
    line-height: 1.2;
    box-sizing: border-box;
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    box-shadow: 0 2px 0px rgba(26, 44, 55, 0.15);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-right: .5rem !important;
    padding-left: .5rem !important;
    box-sizing: border-box;

}



/* CSS für die Elemente innerhalb des Abschnitts "branch-info" */
.branch-info .info-item {
    border-radius: .375rem;
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
    padding: .5rem !important;
    margin-bottom: .5rem !important;
    background-color: rgb(56 189 248);
    font-weight: 600;
    flex-grow: 1;
    color: #fff !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}


/*step5 */
#salutation,
.form-input {
    display: inline-block;
    margin-bottom: .5rem;
    width: 176%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    background-image: url('icon.svg');
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.form-label {
    font: 16;
    margin-bottom: .5rem;
    display: inline-block;
    box-sizing: border-box;
    cursor: default;
    border: 0 solid #e5e7eb;
    color: rgb(17 24 39 / var(--tw-text-opacity));
    font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}


.input-group {
    display: flex;
    gap: 10px;
    /* Abstand zwischen Vorwahl und Telefonnummer */
    width: 100%;
    /* Volle Breite innerhalb des Formulars */
}

.input-group select {
    flex: 0 0 auto;
    /* Kein flexibles Wachstum für das Dropdown-Menü */
}

.input-group input {
    flex: 1;
    /* Flexibles Wachstum für das Eingabefeld, um den verfügbaren Platz auszufüllen */
}

/* CSS für die Zurück-Schaltfläche */
.appointment-back-button {
    border-radius: .375rem;
    /* Vereinfachte Schreibweise für alle Ecken */
    cursor: pointer;
    color: #fff !important;
    padding: .60rem 2rem !important;
    /* Erhöhte Padding-Werte für mehr Größe */
    font-weight: 600;
    border: 0 solid #e5e7eb;
    background-color: rgb(100, 116, 139);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1rem;
    /* Optional: Schriftgröße anpassen */
}

.appointment-reset-button {
    border-radius: .375rem;
    /* Vereinfachte Schreibweise für alle Ecken */
    cursor: pointer;
    color: #fff !important;
    padding: .60rem 2rem !important;
    /* Erhöhte Padding-Werte für mehr Größe */
    font-weight: 600;
    border: 0 solid #e5e7eb;
    background-color: rgb(239, 68, 68);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1rem;
    /* Optional: Schriftgröße anpassen */
}

.appointment-cancel-button {
    border-radius: .375rem;
    /* Vereinfachte Schreibweise für alle Ecken */
    cursor: pointer;
    color: #fff !important;
    padding: .60rem 2rem !important;
    /* Erhöhte Padding-Werte für mehr Größe */
    font-weight: 600;
    border: 0 solid #e5e7eb;
    background-color: rgb(239, 68, 68);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1rem;
    /* Optional: Schriftgröße anpassen */
}

#appointment_services {
    display: flex;
}

#calendar {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
}


/* CSS für verfügbare Termine */
.event-available {
    background-color: #ffffff !important;
    border: none !important;
}

/* CSS für nicht verfügbare Termine */
.event-unavailable {
    background-color: #cccccc !important;
    border: none !important;
}


.inverse-background {
    background-color: #cccccc;
}

.closed {
    background-color: #ffffff;
}


#error-message {
    color: red;
    display: none;
}

#step5content {
    width: 100%;
    display: none;
    /* Anfangs ausgeblendet */
}

.text-danger {
    color: #dc3545 !important;
}

.styled-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    background-image: url('icon.svg');
    background-position: right .75rem center;
    background-size: 16px 12px;
    background-repeat: no-repeat;
    border-radius: .25rem;
    appearance: none;
}

.label {
    margin-bottom: .5rem;
    margin-top: .5rem;
    display: inline-block;
    box-sizing: border-box;
}

.buttoncs {
    text-align: right;
    box-shadow: 0 -2px 3px rgba(26, 44, 55, 0.15);
    padding: 20px !important;
    flex-direction: row-reverse !important;
    border: 0 solid #e5e7eb;
}

.waiting-list {

    padding-left: 5px;
    color: #fff;
    background-color: #212529;
    border-color: #212529;
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control {
    display: block;
    width: 170%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-text {
    margin-top: .25rem;
    font-size: .875em;
    color: #6c757d;
}

.form-area {

    width: 176%;
    display: block;
    box-sizing: border-box;
    border-radius: .375rem;
    margin-top: .25rem !important;
    margin-bottom: 5%;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
    border-width: 1px;
    font-size: 1rem;
    line-height: 1.5rem;
    outline-color: #93c5fd;
    outline-width: 1px;
    padding: .5rem .75rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.appointment-waiting-button {
    border-radius: .375rem;
    /* Vereinfachte Schreibweise für alle Ecken */
    cursor: pointer;
    color: #fff !important;
    padding: .60rem 2rem !important;
    /* Erhöhte Padding-Werte für mehr Größe */
    font-weight: 600;
    border: 0 solid #e5e7eb;
    background-color: rgb(14, 165, 233);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1rem;
    /* Optional: Schriftgröße anpassen */
}

.appointment-finish-button {
    border-radius: .375rem;
    /* Vereinfachte Schreibweise für alle Ecken */
    cursor: pointer;
    color: #fff !important;
    padding: .60rem 2rem !important;
    /* Erhöhte Padding-Werte für mehr Größe */
    font-weight: 600;
    border: 0 solid #e5e7eb;
    background-color: rgb(14, 165, 233);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1rem;
    /* Optional: Schriftgröße anpassen */
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    display: block;
    width: 100%;
    height: 1.5rem;
    float: left;
    box-sizing: border-box;
    padding-bottom: 5%;
    line-height: 1, 5%;

}







/* Media Queries für responsives Design */
@media (max-width: 1200px) {
    .appointment-branches-container {
        width: 90%;
    }

    .appointment-table {
        margin-left: -20%;
        width: 130%;
    }

    .left-column {
        width: 12rem;
    }

    .right-column {
        width: 160%;
    }

    .form-input,
    .form-control {
        width: 150%;
    }

    .form-area {
        width: 150%;
    }
}

@media (max-width: 992px) {
    .appointment-branches-container {
        width: 95%;
    }

    .appointment-table {
        margin-left: -15%;
        width: 120%;
    }

    .left-column {
        width: 10rem;
    }

    .right-column {
        width: 140%;
    }

    .form-input,
    .form-control {
        width: 130%;
    }

    .form-area {
        width: 130%;
    }
}

@media (max-width: 768px) {
    .appointment-branches-container {
        width: 100%;
    }

    .appointment-table {
        margin-left: 0;
        width: 100%;
    }

    .left-column {
        width: 100%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .right-column {
        width: 100%;
    }

    .form-input,
    .form-control {
        width: 100%;
    }

    .form-area {
        width: 100%;
    }
}



@media (max-width: 768px) {
    .left-column {
        display: none;
    }

    .right-column {
        width: 100%;
    }

    #appointment_services {
        display: block;
    }


}