@charset "UTF-8";
form, form * { box-sizing:border-box;}
#main_box { container:main_box / inline-size;}
.formTable {
    border:none;

    & table { font-size:0.675em;}
    & tr { border-top:none; border-inline:none; border-bottom:solid 1px}
    & tr:last-of-type { border-bottom:none;}
    & :is(th, td) { padding-block:1rem; border:none;}
    & th { width:30%; background-color:transparent; vertical-align:baseline;}
    & th:has(+ td textarea) { vertical-align:top;}
    & label { width:fit-content;}
    & input:not([type="radio"], [type="checkbox"]), textarea { width:100%; padding:0.5rem 0.25rem;}
    & textarea { min-height:5lh; resize:vertical;}

    & .required {
        display:inline-block;
        margin-left:1em;
        font-size:0.875em;
        color:#fff;
        background-color:red;
        border-radius:100vmax;
        padding:0.1em 0.75em;
    }
    & .flex {
        display:flex;
        flex-wrap:wrap;
        gap:1rem 2rem;

        &.hasRadio { flex-direction:column; row-gap:0px;}
        & input { width:auto;}
    }
}
.btnWrap {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    margin-top:2rem;

    & button {
        padding:0.25rem 1.25rem;
        color:#fff;
        font-weight:bold;
        font-size:1.25rem;
        border:none;
        border-radius:0.25rem;
        cursor:pointer;

        &[type="submit"] { background-color:#009ace;}
        &[type="button"] { background-color:#aaa;}

        &:focus { filter:brightness(1.1);}
        @media(any-hover:hover){
            &:hover { filter:brightness(1.1);}
        }
        @media(any-hover:none){
            &:active { filter:brightness(1.1);}
        }
    }
}
#formWrap {
    & h4 { margin-block:1em; font-size:1em;}
    & p[align="center"] { margin-block:3em; font-size:0.75em;}
    & p.error_messe { color:red; font-size:0.75em;}
}

@container main_box (max-width:600px){
    .formTable {
        & :is(th, td) { display:block; width:100%;}
        & td { padding-top:0px;}
    }
}