@layer default, theme, custom;

@layer theme {
        form {
        /* background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%);
         background-blend-mode: soft-light,screen;*/
        font-size: var(--font-size-interactive);

        fieldset {
            border: none;
            /*box-shadow: var(--global-box-shadow);*/
            /*background-color: var(--palette-color-3);*/
            }
        }
}


@layer default {
    form {
        container-name:form;
        padding: 1vh 3vw;
        width: 100%;
        margin: auto;


        .field {
            /*display: flex;
            grid-gap:1rem;*/
            padding: 0px 1vw;
            /*width: max-content;
            margin: auto;*/
            small.help {
                margin-inline-start: 1rem;
            }
            small.errors {
                margin-inline-start: 1rem;
                color:#ffbec985;
            }
        }

        .formgrid {
            display: grid;
            > label{
                margin-left: 25%;
                margin-right: 25%;
                color: #000;

                + textarea {
                    vertical-align:top;
                }
            }
        }

        > .errorlist{
            list-style-type: none;
            color:#c10000;
            margin: 0px;
        }

        /*> button[type="submit"] {
            width: fit-content;
            margin: auto;
        }*/

        .multifield{
            margin: 1rem;
            width: 90%;
            /*border: var(--global-border);
            border-radius: var(--global-border-radius);*/
            padding: 1rem;
            gap: 2rem;
        }

        .controls {
            grid-area:controls;
                margin: auto;
        }

        .fieldcontrols {
            display: grid;
            grid-template-areas: "fields controls";
            grid-template-columns: auto 10%;
            grid-gap: 2rem;
            margin:1rem 0;
        }

        .grupposubfields {
            grid-area:fields;
            display: grid;
            grid-auto-flow: row;
            grid-gap:2rem;

            border: var(--global-border);
            box-shadow: var(--global-box-shadow);
            background: #f1f2f6;
            padding: 1rem;
            /*display:flex;
            flex-flow:column;*/
        }

        fieldset {
            margin:10px;
            padding: 1vh 3vw;

            &.col1 {
                .field > input {
                    /*width:100%;*/
                }
            }

            > .left {
                text-align: left;
            }

            > div > label {
                text-wrap: nowrap;
                line-height:2;
                padding: 0 1rem;
            }
        }

        legend {
            background-color: var(--palette-color-4);
            box-shadow: var(--global-box-shadow);
            padding: 0 20px;
            font-weight: bold;
        }

        .profileimg {
            border: solid 1px black;
            width: auto;
            height: 500px ;
            text-align: center;
        }

        .subfield {
            margin: 0 3rem;

            >input {
                width: 100%;
            }

            >textarea {
                width: 100%;
            }
        }

        .hidden {
            display:none;
        }
    }
}