.ski_form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    column-gap: 20px;
    row-gap: 10px;
    box-sizing: border-box;
}

.ski_form .field {
    box-sizing: border-box;
}

.ski_form .field {
    flex-basis: 100%;

}

.ski_form .field.width-50 {
    /*flex-basis: 50%;*/
    flex: calc(50% - 20px);
}

.ski_form .field.width-33 {
    flex: calc(33% - 20px);
}

.ski_form .field.width-25 {
    flex: calc(25% - 20px);
}

.ski_form .field-group.ski-group-inline.fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px 40px; /* Erhöhter Abstand zwischen den Feldern */
    margin: 0 0.5em 1em !important;
}

.ski_form .field-group.ski-group-inline.fields>label {
    width: 100%;
    margin-bottom: 8px; /* Abstand zwischen dem Titel (z.B. Tierart) und den Checkboxen */
    font-weight: bold;
    font-size: 0.92857143em;
    color: rgba(0, 0, 0, 0.87);
}

.ski_form .field-group.ski-group-inline.fields>.field {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    display: flex !important;
    align-items: center;
}

.ski_form .field-group.ski-group-inline.fields>.field .ui.checkbox,
.ski_form .field-group.ski-group-inline.fields>.field .ui.radio.checkbox {
    width: auto !important;
}

.ui.form.ski_form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
    margin-top: 10px;
}



/* Make the dimmer overlay the entire screen and fix it to the viewport */
.ski_form_dimmer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
}

.ski_signature_field canvas {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
}

/* Verhindert, dass das Modal auf dem iPad zu breit wird */
.ui.modal.signature_modal {
    width: 90% !important;
    max-width: 680px !important;
    height: auto !important;
    max-height: calc(100vh - 4rem) !important;
}

/* Keep success modal compact and centered after submit */
.ui.modal.ski_form_modal_success {
    width: auto !important;
    max-width: min(92vw, 560px) !important;
    height: auto !important;
}

.modals.dimmer .ui.scrolling.modal.signature_modal:not(.fullscreen),
.modals.dimmer .ui.scrolling.modal.ski_form_modal_success:not(.fullscreen) {
    top: auto !important;
    margin: auto !important;
}