form {
    max-width: 500px;
    margin: 20px auto;
}

* {
    box-sizing: border-box;
}

body.standalone {
    font:
        100%/1.5 system-ui,
        sans-serif;
    padding: 0;
    margin: 0;
    color: var(--black);
}

.standalone form {
    width: 90%;
    max-width: 600px;
    margin: 20px auto;
}
.standalone label {
    display: block;
    margin: 0 0 5px 0;
}
.standalone input {
    form-family: inherit;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    width: 100%;
}

.standalone .form-group {
    margin-bottom: 12px;
}

.standalone button {
    background: var(--brand-color);
    border: 0 none;
    border-radius: 0;
    color: #fff;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

.standalone fieldset {
    margin-bottom: 20px;
    border: 0 none transparent;
    /* border: 1px solid var(--border-color); */
    padding: 0;
}
.standalone fieldset legend {
    padding-inline: 0;
}
.standalone select {
    display: inline-block;
    /* width: 100%; */
    max-width: 100%;
    padding: 5px 30px 5px 12px;
    margin: 0;
    border: 1px solid var(--border-color);
    font-size: inherit;
    font-family: inherit;
    line-height: normal;
    color: inherit;
    background-color: #fff;
    border-radius: 3px;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
    background-size: 9px 6px;
    background-position: right -20px center;
    background-origin: content-box;
    background-repeat: no-repeat;
}