.form-component label.required::before,
.form-component legend.required::before {
	content: "* ";
	color: red;
}

.form-component legend {
	margin-bottom: 0;
}

.form-component fieldset {
	margin-bottom: 20px;
}

/* fs -> fieldset
 * I needed another class name since 'inline' might
 * clash with a bootstrap class
 */

.form-component fieldset.fs-inline {
	margin-bottom: 10px;
}

.form-component fieldset.fs-inline legend {
	margin-bottom: 5px;
}

.form-component fieldset.fs-input-group legend {
	margin-bottom: 15px;
}

.form-component fieldset.fs-input-group {
	border-bottom: 1px solid #dfdfdf;
}

.form-component .radio-inline label,
.form-component .checkbox-inline label {
	font-weight: normal;
}

/* ig -> input group
 * form-inline clashed with bootstrap class
 */
.form-component .ig-inline {
	display: flex;
	margin-right: -5px;
	margin-left: -5px;
}

.form-component .ig-inline .form-group {
	flex-grow: 1;
	margin-right: 5px;
	margin-left: 5px;
}

legend.label-style {
    font-weight: bold;
    max-width: 100%;
    font-size: inherit;
    color: black;
}