/*Forms*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:focus-visible,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

select:focus,
select:active {
    outline: 0  !important;
}

.labeled-input {
    display: inline-block;
    /*padding: 3px;*/
    border: 1px solid #565656;
    background: #FFF;
}

.labeled-input input {
    outline: none;
    border: none;
    display:block;
    padding: 0.40625em 0 0.7em 0;
    /* M/form-input-topline */
    font-size: 1.0625em;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 1.1375rem */
    letter-spacing: 0.00875em;
}

.labeled-input input::placeholder
{
    color: #A6A6A6;
}

.labeled-input label, .form-group label {
    display: block;
    color: #565656;
    font-feature-settings: 'clig' off, 'liga' off;

    /* M/form-input-topline */
    font-size: 0.875em;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 1.1375rem */
    letter-spacing: 0.00875em;
}

.labeled-input label {
    margin-left: 10px;
}

.form-group {
    display: inline-block !important;
}

.form-group label,
label:has(div.select) {
    display: block;
    color: var(--text, #1F1F1F);
    font-feature-settings: 'clig' off, 'liga' off;
    /* DT/label */
    font-size: 1.03125em;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 1.2375rem */
}

.form-group input[type="text"],
.form-group input[type="date"] {
    /* M/form-input-topline */
    font-size: 1.0625em;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 1.1375rem */
    letter-spacing: 0.00875em;

    display: flex;
    padding: 0.72em 0.9375em;
    align-items: center;
    gap: 3.4375em;
    flex: 1 0 0;
    align-self: stretch;
    border: 1px solid #1F1F1F;
}

.form-group.spacer,
.labeled-input.spacer,
label.spacer {
    /*margin-top: 1.62em;*/
    margin-top: 1.25em;
}

label:has(div.select.spacer) {
    margin-top: 1.62em;
}

/* custom select */
:root {
    --select-border: #1F1F1F;
    --select-arrow: var(--select-border);
}

select {
    width: 100%;
}

body {
    & select {
        appearance: none;
        background-color: transparent;
        border: none;
        padding: 0.62em 1em 0.62em 0;
        margin: 0;
        width: 100%;
        font-size: 1.0625em;
        font-family: inherit;
        cursor: inherit;
        line-height: inherit;
        z-index: 1;

        &::-ms-expand {
            display: none;
        }

        outline: none;
    }

    & .select {
        display: grid;
        grid-template-areas: "select";
        align-items: center;
        position: relative;

        select,
        &::after {
            grid-area: select;
        }

        border: 1px solid var(--select-border);
        padding: 0.236em 0.5em;
        font-size: inherit;
        cursor: pointer;
        line-height: 1.1;

        background-color: #fff;
        background-image: linear-gradient(to top, #f9f9f9, #fff 33%);

        &:not(.select--multiple)::after {
            content: "";
            justify-self: end;
            width: 1em;
            height: 1em;
            background-color: CanvasText;
            clip-path: polygon(19% 37%, 50% 68%, 81% 37%, 78% 33%, 50% 62%, 22% 33%);
        }
    }

    & select[multiple] {
        padding-right: 0;
        height: 6rem;

        option {
            white-space: normal;
            outline-color: var(--select-focus);
        }
    }

    & .select--disabled {
        cursor: not-allowed;
        background-color: #eee;
        background-image: linear-gradient(to top, #ddd, #eee 33%);
    }

    & .select + label {
        margin-top: 2rem;
    }
}

/*custom radio button*/
:root {
    --radio-color: #2BA400;
}

label.radio {
    margin-right: 1em;
}

body {
    & .radio {
        display: grid;
        grid-template-columns: 1em auto;
        gap: 0.5em;
    }

    & label:has(input[type="radio"]) {
        display: inherit;
    }

    & .radio:focus-within {
        /*color: var(--radio-color);*/
    }

    & input[type="radio"] {
        -webkit-appearance: none;
        appearance: none;
        background-color: var(--form-background);
        margin: 0;

        font: inherit;
        color: currentColor;
        width: 1.75em;
        height: 1.75em;
        border: 0.15em solid currentColor;
        border-radius: 50%;
        transform: translateY(-0.075em);

        display: grid;
        place-content: center;
    }

    & input[type="radio"]::before {
        content: "";
        width: 0.875em;
        height: 0.875em;
        border-radius: 50%;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--radio-color);
        /* Windows High Contrast Mode */
        background-color: CanvasText;
    }

    & input[type="radio"]:checked::before {
        transform: scale(1);
    }

    & input[type="radio"]:checked {
        color: var(--radio-color);
    }
}