/*
******************************************************************
Default und Custom CSS for Module Form

(c) sinntun.codes
******************************************************************
*/

/*** form-info / form-error
******************************************************************/

:root {
    --defaultform-outline: 0.1875rem solid #00528c;
    --defaultform-outline-offset: 3px;
    --defaultform-hover-border: solid 1px #00528c;
}


.form-info {
    margin-bottom: 1.2500rem;
}

.form-error p {
    padding: 0.7500rem;
    border: 0.0625rem solid #ff0000;
    display: block;
    margin-bottom: 1.2500rem;
}

.form-row input.error {
    border: 0.0625rem solid #B00020 !important;
}

.form-row select.error {
    border: 0.0625rem solid #B00020 !important;
}

.form-row textarea.error {
    border: 0.0625rem solid #B00020 !important;
}

.form-row:has(.error) > label,
.form-row:has(.error) > legend {
    color: #B00020;
}

/*****************************************************************
**** form-rows
******************************************************************/

.form-row {
    display: flex;
    flex-flow: column;
    margin-bottom: 1.2500rem;
    width: 100%;
    font-size: 1.125rem;
}

/*****************************************************************
**** FormElements
******************************************************************/

.form-row label {
    padding: 0.3125rem 0;
}

.form-row label a {
    font-size: inherit;
    text-decoration: underline;
    color: #00528c;
}

.form-row label a:hover {
    color: #707070;
}

.form-row label a:focus-visible {
    outline: var(--defaultform-outline);
    outline-offset: var(--defaultform-outline-offset);
}

/* honeypot */
.form-row.email {
    display: none;
}

/*** text, textarea
******************************************************************/

.defaultform textarea {
    display: block;
    border: 0.0625rem solid #000;
    padding: 0.3125rem;
    color: #000;
    font-size: 1.125rem;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: 'Tahoma';
}

.defaultform .textbox {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: #000;
    height: 3.7500rem;
    border: solid 0.0625rem #707070;
    font-size: 1.1250rem;
    padding: 1.2500rem;
}

.defaultform textarea:focus,
.defaultform .textbox:focus {
    border: var(--defaultform-hover-border);
}

.defaultform textarea:focus-visible,
.defaultform .textbox:focus-visible {
    outline: var(--defaultform-outline);
    outline-offset: var(--defaultform-outline-offset);
}

.form-row.message textarea {
    width: 100%;
    clear: both;
}

/*** selectbox
******************************************************************/

.form-row select {
    display: inline-block;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    border: 0.0625rem solid #000;
    padding: 0.3125rem 0.6250rem;
    font-size: 1.125rem;
    color: #000;
}

.form-row select:focus {
    border: var(--defaultform-hover-border);
}

.form-row select:focus-visible {
    outline: var(--defaultform-outline);
    outline-offset: var(--defaultform-outline-offset);
}

/*** dateselector
******************************************************************/
.form-row .dateselector-form,
.form-row .dateselector_container {
    display: flex;
    gap: 0.1875rem;
}

  .form-row select.dateselector_day {
    width: 5.0000rem;
    float: left;
    display: block;
    box-sizing: border-box;
    border: 0.0625rem solid #000;
    padding: 0.3125rem 0.6250rem;
    font-size: 1.0000rem;
    background: #fff;
}

.form-row select.dateselector_month {
    width: 5.0000rem;
    float: left;
    display: block;
    box-sizing: border-box;
    border: 0.0625rem solid #000;
    padding: 0.3125rem 0.6250rem;
    font-size: 1.0000rem;
    background: #fff;
}

.pageelement-events-registration .defaultform .form-row select.dateselector_year {
    width: 7.5000rem;
    float: left;
    display: block;
    box-sizing: border-box;
    border: 0.0625rem solid #000;
    padding: 0.3125rem 0.6250rem;
    font-size: 1.0000rem;
    background: #fff;
}

/*** checkbox
******************************************************************/

.form-row .checkbox-text {
    padding-left: 0.6250rem;
}

/*** radiobuttons
******************************************************************/

.form-row input[type="radio"] {
    margin: 0 .3125rem 0 0;
    height: 1.2500rem;
}

.radiobutton-wrapper label {
    width: fit-content;
}

.radiobuttons-wrapper input {
    float: left;
}

.radiobuttons-wrapper {
    display: flex;
    gap: 1.5625rem;
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.radiobuttons-wrapper .radiobutton-wrapper {
    display: flex;
    width: fit-content;
    align-items: center;
}

.radiobuttons-wrapper .radiobutton-wrapper input {
    appearance: auto;
}

.radiobuttons-wrapper .radiobutton-wrapper:has(input[type="radio"]:focus) {
    outline: var(--defaultform-outline);
    outline-offset: var(--defaultform-outline-offset);
}

.radiobuttons-wrapper.rows .radiobutton-wrapper label {
    max-width: 34.3750rem;
}

/*** .postcode and place in one line
******************************************************************/

.form-row.postcode-place label {
    float: left;
    width: auto;
}

.form-row .form-postcode-place-label {
    float: left;
    width: 12.5000rem;
}

.form-row .form-postcode-place-label span {
    float: left;
    margin-top: 0.3125rem;
}

.form-row .form-postcode-place-input-wrapper {
    width: calc(100% - 12.5000rem);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.form-row .form-postcode-input,
.form-row .form-place-input {
    display: block;
    overflow: hidden;
}

.form-row .form-postcode-input {
    width: calc(40% - 0.5000rem);
}

.form-row .form-place-input {
    width: 100%;
    padding-left: 0.5000rem;
}

.form-row .form-postcode-input .textbox {
    width: 100% !important;
}

.form-row .form-place-input .textbox {
    width: 100% !important;
}

/*** .dateselector
******************************************************************/

.dateselector_day {
    width: 3.4375rem;
}

.dateselector_month {
    width: 3.4375rem;
}

.dateselector_year {
    width: 6.8750rem;
}

/* .dateselector_monthyear used in DateSelector2 */
.dateselector_monthyear {
    width: 12.5000rem;
}

.dateselector_textbox_day {
    width: 3.4375rem;
}

.dateselector_textbox_month {
    width: 3.4375rem;
}

.dateselector_textbox_year {
    width: 6.8750rem;
}

.datetimeselector_day {
    width: 3.4375rem;
}

.datetimeselector_month {
    width: 3.4375rem;
}

.datetimeselector_year {
    width: 6.8750rem;
}

.datetimeselector_hour {
    width: 3.1250rem;
}

.datetimeselector_minute {
    width: 3.1250rem;
}

/*** checkbox
******************************************************************/
.checkbox-wrapper:has(input[type="checkbox"]:focus) {
    outline: var(--defaultform-outline);
    outline-offset: var(--defaultform-outline-offset);
}

.checkbox-wrapper {
    width: fit-content;
    display: flex;
    gap: 0.5000rem;
    align-items: start;
}

.checkbox-wrapper input {
    top: 0.75rem;
    position: relative;
}

/*** captcha
******************************************************************/
.form-row.captcha div {
    display: flex;
    flex-direction: column;
}

.form-row.captcha div img {
    max-width: 18.7500rem;
    margin-bottom: 0.5000rem;
}

.form-row.captcha div input {
    width: 100%;
    max-width: 18.7500rem;
}

/*** files
******************************************************************/
.form-row .imageupload {
    display: block;
    padding: 0.3125rem 0;
}

.form-row .imageupload tbody,
.form-row .imageupload tbody tr,
.form-row .imageupload tbody tr td {
    display: block;
}

.form-row .imageupload .filepond--item * {
    color: #fff;
}

.form-row input[type="file"]:focus-visible {
    outline: var(--defaultform-outline);
    outline-offset: var(--defaultform-outline-offset);
}

/*** submit
******************************************************************/

.defaultform .form-submit-container {
    width: 100%;
    display: block;
    margin-top: 0.6250rem;
}

.defaultform .button-submit {
    border: none;
    cursor: pointer;
    color: #ffffff;
    background-color: #00528C;
    display: block;
    width: 27.5000rem;
    margin-top: 0.6875rem;
    padding: 0.6250rem 0.9375rem;
    font-size: 1.5rem;
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;
    text-wrap: wrap;
    max-width: 100%;
    transition: all .25s;
}

.defaultform .button-submit:focus-visible {
    outline: var(--defaultform-outline);
    outline-offset: var(--defaultform-outline-offset);
}

.defaultform .button-submit:hover {
    background: #ffffff !important;
    box-shadow: inset 0 0 0 0.2500rem #005CA2;
    color: #005CA2 !important;
}

.pageElement-contactform .button-submit {
    background-color: #cc3f35;
    color: #fff;
}

.pageElement-contactform .button-submit:hover {
    cursor: pointer;
    background-color: #0072bb;
}

.pageelement-contactform .form-submit-container .spinner-wrapper {
    transform: translate(14.3750rem, -2.1875rem);
}


.pageelement-contactform .form-submit-container .spinner {
    width: 1.2500rem;
    height: 1.2500rem;
    border: 0.2500rem solid rgba(255, 255, 255, .1);
    border-top: 0.2500rem solid rgb(230, 230, 230);
    border-radius: 50%;
    animation: process-upload 1s linear infinite;
}


@keyframes process-upload {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}









/***********************************************/
/* Anmerkung Teil 1*/
/* Die @media Regeln sollten eigentlich mit absteigender Bildschirmbreite aufgelistet werden */
/* Weil ich momentan keine Zeit habe das zu sortieren aber für Responsiveness etwas umsetzten möchte,  */
/* schriebe ich einfach selbst meine Regeln in der "korrekten" Reihenfolge  */
/* Das ganze kann dann später einmal sortiert werden */
/***********************************************/

@media only screen and (max-width: 90.6250rem) {
    .pageelement-contactform .form-submit-container .spinner-wrapper {
        transform: translate(12.5000rem, -2.1875rem);
    }
}

@media only screen and (max-width: 64.0000rem) {
    .pageelement-contactform .form-submit-container .spinner-wrapper {
        transform: translate(25%, -2.1875rem);
    }
}

@media only screen and (max-width: 47.5000rem) {
    .pageelement-contactform .form-submit-container .spinner-wrapper {
        transform: translate(1.2500rem, -2.1875rem);
    }

    .pageelement-contactform .defaultform .button-submit {
        padding-left: 2.8125rem;
        padding-right: 2.8125rem;
    }
}

/***********************************************/
/* Anmerkung Teil 2*/
/* Hier kommen die Regeln die davor so im code in der Reihenfolge standen */
/***********************************************/


@media only screen and (max-width: 40.6250rem) {
    .form-row input[type="text"],
    .form-row input[type="password"],
    .form-row input[type="email"],
    .form-row textarea {
        width: 100%;
        box-sizing: border-box;
    }

    .defaultform select {
        max-width: 100%;
    }

    .form-postcode-place-label {
        width: 100%;
    }

    .button-submit {
        margin-left: 0;
    }

    .form-postcode-place-input-wrapper {
        width: 100%;
        box-sizing: border-box;
    }

    .form-postcode-input {
        width: 30%;
    }

    .form-place-input {
        width: calc(70% - 0.6250rem);
    }

    .form-postcode-input .textbox {
        width: 100% !important;
        box-sizing: border-box;
    }

    .form-place-input .textbox {
        width: 100% !important;
        box-sizing: border-box;
    }

    .form-row label[for="gender-1"],
    .form-row label[for="gender-2"] {
        width: auto;
    }

    .form-row label[for="gender-1"] {
        margin-right: 0.9375rem;
    }

    .form-row label[for="gender"] {
        width: auto;
        margin-right: 0.9375rem;
    }
}

@media only screen and (max-width: 47.5000rem) {
    .form-info {
        margin-bottom: 1.2500rem;
    }
}

@media only screen and (max-width: 64rem) {
    .defaultform {
        width: 100%;
    }
}

@media only screen and (max-width: 32.5rem) {
    .radiobuttons-wrapper {
        flex-flow: column;
    }
}

@media only screen and (max-width: 90.6250rem) {

    .defaultform .form-row.message {
        display: block;
    }

    .form-place-input {
        width: calc(70% - 1.8750rem);
    }
}

/*.pageelement-contactform .checkbox-wrapper,
.pageelement-contactform p {
    display: inline;
}*/