/**
 * nf-gms/frontend.css
 *
 * Minimal styles for the Grouped Multi-Select field on the front end.
 * The field inherits Ninja Forms' own .nf-field-element styles; we just
 * add a few sensible defaults for the <select multiple>.
 */

.nf-field-container.groupedmultiselect-container .nf-field-element select[multiple] {
    width: 100%;
    min-height: 120px;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    font-size: inherit;
    font-family: inherit;
    box-sizing: border-box;
    background-image: none;
}

.nf-field-container.groupedmultiselect-container .nf-field-element select[multiple] optgroup {
    font-weight: 700;
    font-style: normal;
    color: #333;
    padding-top: 4px;
}

.nf-field-container.groupedmultiselect-container .nf-field-element select[multiple] optgroup option {
    font-weight: 400;
    padding-left: 1em;
    color: #555;
}

.nf-field-container.groupedmultiselect-container .nf-field-element select[multiple]:focus {
    outline: 2px solid #0073aa;
    border-color: #0073aa;
}

/* Error state */
.nf-field-container.groupedmultiselect-container.nf-error .nf-field-element select[multiple] {
    border-color: #e2401c;
}