Looking to customize the appearance of a checkbox in a web framework utilizing bootstrap 4, I attempted to override the custom-control-label class by setting the position property to auto instead of its default value of relative. Although I achieved the desired result using the browser's development tools, adding the style to my custom.css did not have the same effect due to the predefined property in _custom-forms.scss. How can I successfully override this property?
#form
<div class="custom-control custom-checkbox">
<input type="checkbox" name="custom_checkbox_name" class="checkboxinput custom-control-input" id="id_custom_checkbox">
<label class="custom-control-label" for="id_custom_checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"> Custom Checkbox Label</span>
</label>
</div>
#custom.css
.custom-control-label {
position: auto;
}