/* --> */

form {
    max-width: 840px;
    margin: auto;
    font-size: 24px;
}

form dl {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

form dl dt {
    font-weight: bold;
}

form dl dt,
form dl dd {
    flex: 0 0 100%;
}

form dl dt.split,
form dl dd.split {
    flex: 0 0 calc(50% - 10px);
}

form dl dd.space {
    margin-right: calc(50% + 10px);
}

form .optionals {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}

form .optionals > label {
    flex: 0 0 auto;
}

input, 
select, 
form button, 
textarea {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 6px;
    border: 1px solid #000;
    border-radius: 6px;
    line-height: 36px;
    resize: none;
}


/* --> */

input:last-child, 
select:last-child, 
button:last-child, 
textarea:last-child {
    margin: 0;
}

select,
input[type=date] {
    height: 36px;
}

form button {
    background-color: var(--color-red-main);
    border: none;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

textarea {
    resize: vertical;
}


input[type=checkbox] {
    width: auto;
}

::placeholder {
    color: #000;
}




/* --> */

@media all and (max-width: 640px) {
    form dl dt {
        text-align: center;
    }

    form dl dt.split,
    form dl dd.split {
        flex: 0 0 100%;
    }

    form dl dd.space {
        margin-right: 0;
    }
}