.form-block, .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: auto;
    max-width: 100%;
}

.form-block {
    --form-border-corner: 0.25em;
    --form-gap-x: 1em;
    --form-gap-y: var(--form-gap-x);
    width: 1000px;
    container-type: inline-size;
    gap: var(--form-gap-y, 1em) var(--form-gap-x, 1em);
}
.form-group {
    flex-grow: 1;
    flex-shrink: 0;
    gap: var(--form-gap-y, 1em) var(--form-gap-x, 1em);
}

.input-block {
    flex: 1 1 fit-content;
    box-sizing: border-box;
    max-width:100%;
}

.input-wrapper {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    border: solid 1px #888;
    padding: 0;
    cursor: text;
    border-radius: var(--form-border-corner, 0.25em);
    overflow: hidden;
    background: #FFF;
    z-index:10;
    position:relative;
    box-shadow: #8888 2px 2px 3px -1px;
}

.input-wrapper:focus-within {
    border-color:#08F;
    outline:solid 1px #000;
}

.input-wrapper>.suffix {
    margin-right: 0.5em;
    user-select: none;
}
.input-wrapper>.prefix {
    margin-left: 0.5em;
    user-select: none;
}

.input-block :is(input, select, textarea) {
    border: none;
    padding: 0.5em;
    margin:0;
    flex-grow:1;
    flex-shrink:1;
    box-sizing: border-box;
    outline: none;
    font: inherit;
    line-height: 1.25;
}

.input-block :is(input, select, textarea):not([type="radio"], [type="checkbox"]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: inherit;
}

.input-wrapper:has(:is(input, select, textarea):disabled:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"])), {
    background: #EEE;
    box-shadow: none;
}

.input-wrapper:has(:is(input, textarea):read-only:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"])) {
    background: #EEE;
    box-shadow: none;
}


.input-block {
    --highlight:#DDE;
    position: relative;
}
.input-block:focus-within {
    z-index:25;
}

.input-block-link>a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 0.5em;
}
.input-block-link>a:after {
    content: '[\2197]';
    display: inline-block;
    font-size: 0.7em;
    vertical-align: text-top;
    margin-left: 0.2em;
    margin-top: -.2em;
    margin-bottom: .2em;
}

.input-block :is(input[type="button"], input[type="submit"], a) {
    position: relative;
    top: 0px;
    box-shadow: #00000080 2px 2px 2px 0px;
    font-weight: bold;
    background: var(--highlight);
    padding-left: 2em;
    padding-right: 2em;
    border: solid 1px #888;
}
.input-block :is(input[type="button"], input[type="submit"], a):not(:disabled) {
    cursor:pointer;
}
.input-block :is(input[type="button"], input[type="submit"], a):is(:hover,:focus-visible):not(:disabled) {
    top:-2px;
    box-shadow: #000000C0 2px 3px 2px 0px;
}
.input-block :is(input[type="button"], input[type="submit"], a):focus-visible:not(:disabled) {
    outline: solid 1px #08F;
}
.input-block :is(input[type="button"], input[type="submit"], a):active:not(:disabled) {
    top:0px;
    box-shadow: #00000040 1px 1px 1px 0px;
}

.input-block :is(input, select) {
    vertical-align: middle;
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
}

.input-block :is(textarea) {
    resize: vertical;
}

.input-block :is(select) {
    height: 2.25em;
}

form :is(h1,h2,h3,h4,h5,h6) {
    flex-basis: 100%;
}

.input-block .title {
    width: fit-content;
    font-weight: bold;
    background:var(--color-background);
    outline: solid var(--color-background);
    border-radius: var(--form-border-corner, 0.25em);
}

.input-block-radio,
.input-block-checkbox {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5em;
    padding: 0.5em;
    line-height: 1.25;
    cursor:pointer;
    flex-grow:0;
}
.input-block-radio:focus-within:has(:focus-visible),
.input-block-checkbox:focus-within:has(:focus-visible) {
    border-radius: var(--form-border-corner, 0.25em);
    outline: solid 1px #08F;
}
.input-block-radio>input[type="radio"],
.input-block-checkbox>input[type="checkbox"] {
    flex-grow: 0;
    margin: 0;
    cursor:inherit;
}

.input-box-list {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    gap: 0.5em;
}



.input-block .input-error {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background: #FCC;
    z-index: 25;
    border: var(--border-standard) #F00;
    padding: 0.25em;
    margin: 0.25em;
    font-weight: bold;
    border-radius: var(--form-border-corner, 0.25em);
    box-shadow: 1px 1px 2px 0px #0008;
}
.input-block .input-error:empty { display:none; }
.input-block .input-error:before {
    display: block;
    content: '';
    position: absolute;
    left:0.3em;
    bottom:100%;
    border: solid 0.3em transparent;
    border-bottom: solid 0.6em #F00;
}




/* @TODO move to custom_drawing.css */

.input-block-custom-drawing {
    position: relative;
    width: 100%;
    display: flex;
    flex-basis: auto;
    align-self: flex-start;
}
.input-block-custom-drawing>img {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
}
.input-block-custom-drawing>svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
.input-block-custom-drawing>.drawing-utils {
    position:absolute;
    bottom:100%;
    right:0;
    display:flex;
    gap:0.5em;
    padding-bottom:0.5em;
}