/* ============================================================
   FORMIO CONTAINER — CSS CUSTOM PROPERTIES
   ============================================================ */

.formio_container {
    
    padding-left: 1rem;
    
    --qld-soft-grey:                var(--qld-soft-grey);
    --qld-input-border-color:       var(--qld-border-color);
    --qld-input-border-color-hover: var(--qld-border-color-hover);
    --qld-border-width:             var(--qld-border-width-default);

    --qld-primary:                  var(--qld-color-light-action-primary);
    --qld-sapphire-blue:            var(--qld-color-light-action-primary);
    --qld-light-blue:               var(--qld-color-light-action-primary);
    --qld-light-green-dark:         var(--qld-color-light-action-primary-hover);

    --qld-white:                    var(--qld-color-light-link-on-action);
    --qld-text-darkest:             var(--qld-color-light-link-on-action);

    --qld-body-color:               var(--qld-color-light-text);
    --qld-light-text-text:          var(--qld-color-default-color-light-text-default);

    --qld-focus-color:              var(--qld-color-light-focus);
    --qld-link-color:               var(--qld-color-light-link);
    --qld-link-visited:             var(--qld-color-light-link-visited);

    --qld-color-default-color-light-text-heading: var(--QLD-color-light__heading);

    --qld-dark-hover:               var(--qld-color-dark-hover);
    --qld-dark-text-text:           var(--qld-color-default-color-light-text-default);
    --qld-dark-focus:               var(--qld-color-dark-focus);

    --qld-form-invalid-color:       #e22339;
    --qld-text-grey:                #636363;
    --qld-hint-color:               #6f777b;
}


/* ============================================================
   SHORTHAND — targets both .formio-component-form and .formio-form
   ============================================================ */

/* Headings inside form components */
.formio_container :is(.formio-component-form, .formio-form) h2:not(:first-child) {
    margin-top: unset;
}

.formio_container :is(.formio-component-form, .formio-form)
    :is(.formio-component.formio-component-htmlelement, .form-group.formio-component)
    :is(h2, h3) {
    margin-top: 1.5rem;
}

.formio_container :is(.formio-component-form, .formio-form)
    :is(.formio-component.formio-component-htmlelement, .form-group.formio-component)
    legend {
    margin-top: 0.5rem;
}


/* ============================================================
   PANELS
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form) .formio-component.formio-component-panel {
    margin-bottom: 1rem;
}

.formio_container :is(.formio-component-form, .formio-form) .formio-component.formio-component-panel .card {
    --qld-input-border-color: var(--qld-soft-grey);
    border: 3px solid var(--qld-soft-grey) !important;
    overflow: visible;
    border-radius: 0.25em;
}

.formio_container :is(.formio-component-form, .formio-form) .formio-component.formio-component-panel div.card-header {
    border: none !important;
    text-decoration: none;
}

.formio_container :is(.formio-component-form, .formio-form) .formio-component.formio-component-panel div.card-header:hover {
    text-decoration: underline;
}

.formio_container :is(.formio-component-form, .formio-form) .formio-component.formio-component-panel div.card-body {
    --qld-input-border-color: var(--qld-soft-grey);
    border-top: 3px solid var(--qld-soft-grey) !important;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.formio_container :is(.formio-component-form, .formio-form) .formio-component.formio-component-panel .form-check.checkbox {
    margin-bottom: 0;
}


/* ============================================================
   FORM GROUPS & INPUT GROUPS
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form) :is(.form-group, .input-group) {
    margin: 0 0 2rem;
}

.formio_container :is(.formio-component-form, .formio-form) :is(.form-group, .input-group) .form-text {
    color: var(--qld-hint-color);
    display: block;
    font-size: 1em;
    line-height: 1.5;
    margin: 0.5rem 0;
}

.formio_container :is(.formio-component-form, .formio-form) :is(.form-group, .input-group) .form-text.text-muted {
    color: var(--qld-text-grey) !important;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-block: 0.5rem;
    order: 2;
}

.formio_container :is(.formio-component-form, .formio-form) :is(.form-group, .input-group) .form-radio.radio {
    order: 3;
}

.formio_container :is(.formio-component-form, .formio-form) :is(.form-group, .input-group) .formio-errors .error {
    color: var(--qld-form-invalid-color);
    display: inline-block;
    width: 95%;
}

.formio_container :is(.formio-component-form, .formio-form) :is(.form-group, .input-group) .invalid-feedback {
    position: relative;
}

.formio_container :is(.formio-component-form, .formio-form) :is(.form-group, .input-group) .invalid-feedback:before {
    display: none;
}

.formio_container :is(.formio-component-form, .formio-form) :is(.form-group, .input-group) .invalid-feedback:has(.error):before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
}

.formio_container :is(.formio-component-form, .formio-form) .form-group:has(.form-group:last-child) {
    margin-bottom: 0;
}


/* ============================================================
   RADIO & CHECKBOX
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form)
    :is(.radio.form-check, .radio.form-check-inline, .checkbox.form-check) {
    padding-left: 0;
}

.formio_container .formio-form .checkbox.form-check + .checkbox.form-check {
    margin-top: 0.5rem;
}

.formio_container :is(.formio-component-form, .formio-form)
    :is(.radio.form-check, .radio.form-check-inline, .checkbox.form-check)
    .form-check-label {
    display: flex;
    align-items: center;
    margin-left: 0;
}

.formio_container :is(.formio-component-form, .formio-form)
    :is(.radio.form-check, .radio.form-check-inline, .checkbox.form-check)
    .form-check-input {
    margin-left: 0;
}

.formio_container :is(.formio-component-form, .formio-form)
    :is(.radio.form-check, .radio.form-check-inline, .checkbox.form-check)
    span {
    margin-left: 1rem;
}

.formio_container :is(.formio-component-form, .formio-form)
    :is(.radio.form-check, .radio.form-check-inline, .checkbox.form-check):last-child {
    margin-bottom: 0;
}

.formio_container :is(.formio-component-form, .formio-form) .checkbox.form-check .form-check-label {
    padding-right: 0.25rem;
}


/* ============================================================
   SURVEY COMPONENT
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form) .formio-component-survey .form-check {
    justify-content: center;
    padding-left: 0;
}

.formio_container :is(.formio-component-form, .formio-form) .formio-component-survey .form-check input[type="radio"] {
    margin: unset;
}


/* ============================================================
   DATAGRID & EDITGRID
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-datagrid table.datagrid-table button.btn-tertiary {
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-datagrid table.datagrid-table td:has(.formio-button-remove-row) {
    text-align: center !important;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-editgrid .editgrid-listgroup button.btn:is(.editRow, .removeRow) {
    min-width: 3rem;
    padding: 0.75rem;
    min-height: 1rem;
    text-decoration: none;
}

.formio_container :is(.formio-component-form, .formio-form) .formio-component-editgrid button.btn-primary {
    width: fit-content;
}


/* ============================================================
   LABELS
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form) .col-form-label {
    margin-left: 0;
}

.formio_container :is(.formio-component-form, .formio-form) .col-form-label > i.fa,
.formio_container :is(.formio-component-form, .formio-form) .col-form-label:after {
    padding-left: 0.25rem;
}


/* ============================================================
   TEXT INPUTS
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form)
    :is(
        .formio-component.formio-component-textarea textarea.form-control,
        .formio-component.formio-component-textfield input.form-control,
        .formio-component.formio-component-email input.form-control,
        .formio-component-phoneNumber1 input.form-control,
        .formio-component-phoneNumber input.form-control
    ) {
    width: 100%;
}


/* ============================================================
   INPUT GROUP — APPEND & PREPEND (shared base)
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form) .formio-component:has(.input-group-append),
.formio_container :is(.formio-component-form, .formio-form) .formio-component:has(.input-group-prepend) {
    --qld-input-border-color: var(--qld-soft-grey);
    --qld-border-width: 2px;
}

/* Append */
.formio_container :is(.formio-component-form, .formio-form)
    .formio-component:has(.input-group-append) .input-group .form-control.input {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component:has(.input-group-append) .input-group-append {
    display: flex;
    border-color: var(--qld-input-border-color);
    border-style: solid;
    border-width: var(--qld-border-width) var(--qld-border-width) var(--qld-border-width) 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component:has(.input-group-append) span.input-group-text {
    border: 0;
}

/* Prepend */
.formio_container :is(.formio-component-form, .formio-form)
    .formio-component:has(.input-group-prepend) .input-group .form-control.input {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component:has(.input-group-prepend) .input-group-prepend {
    display: flex;
    border-color: var(--qld-input-border-color);
    border-style: solid;
    border-width: var(--qld-border-width) 0 var(--qld-border-width) var(--qld-border-width);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component:has(.input-group-prepend) span.input-group-text {
    border: 0;
}


/* ============================================================
   TIME INPUT
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form) .formio-component-time input[type="time"]::selection {
    background: var(--qld-primary);
    color: #fff;
}

.formio_container :is(.formio-component-form, .formio-form) .formio-component-time input[type="time"]::-webkit-clear-button,
.formio_container :is(.formio-component-form, .formio-form) .formio-component-time input[type="time"]::-webkit-inner-spin-button,
.formio_container :is(.formio-component-form, .formio-form) .formio-component-time input[type="time"]::-moz-clear-button,
.formio_container :is(.formio-component-form, .formio-form) .formio-component-time input[type="time"]::-moz-inner-spin-button {
    display: none;
}


/* ============================================================
   SELECT / CHOICES
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component.formio-component-select .choices__list--single {
    display: block;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component.formio-component-select .formio-choices .dropdown {
    height: calc(3rem + 6px) !important;
}

.formio_container :is(.formio-component-form, .formio-form) .formio-component.formio-component-multiple {
    border-color: var(--qld-soft-grey);
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component.formio-component-multiple .choices__list--multiple .choices__item {
    margin: 0 0.5rem 0 0;
    list-style-type: none;
    display: inline-block;
    border-radius: 16px;
    padding: 0 0.5rem;
    border: 1px solid var(--qld-sapphire-blue);
    font-size: 0.875rem;
    line-height: 1.5rem;
    text-align: center;
    background: #fff;
    color: var(--qld-sapphire-blue);
    position: relative;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component.formio-component-multiple .choices__list--multiple .choices__item[data-deletable] {
    padding-right: 2rem;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component.formio-component-multiple .choices__list--multiple .choices__item:hover {
    background-color: var(--qld-sapphire-blue);
    color: #fff;
    text-decoration: underline;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component.formio-component-multiple .choices__list--multiple .choices__item button.choices__button {
    background-color: var(--qld-sapphire-blue);
    background-image: none;
    color: var(--qld-sapphire-blue);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 256L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 256L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 256L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 256L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 1.125rem;
    -webkit-mask-size: 1.125rem;
    mask-position: center;
    -webkit-mask-position: center;
    width: 1.5rem;
    position: absolute;
    right: 0.25rem;
    top: 0;
    bottom: 0;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component.formio-component-multiple .choices__list--multiple .choices__item:hover button.choices__button {
    background-color: #fff;
}


/* ============================================================
   PAGINATION
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form) .formio-form > div > nav > ul.pagination {
    gap: 0.25rem;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-form > div > nav > ul.pagination li.page-item button.page-link {
    background: var(--qld-primary) !important;
    border: 1px solid var(--qld-primary) !important;
    border-bottom: 0 !important;
    border-radius: 0.25rem 0.25rem 0 0 !important;
    width: auto !important;
    height: auto !important;
    color: var(--qld-white) !important;
    font-weight: 400;
    padding: 0.5rem 1.25rem !important;
    text-decoration: none !important;
    box-shadow: none;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-form > div > nav > ul.pagination li.page-item button.page-link:focus {
    outline-offset: 0;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-form > div > nav > ul.pagination li.page-item button.page-link:hover {
    background: var(--qld-light-green-dark) !important;
    border: 1px solid var(--qld-light-green-dark) !important;
    border-bottom: 0 !important;
    color: var(--qld-text-darkest) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--qld-text-darkest) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0.3rem !important;
    box-shadow: none;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-form > div > nav > ul.pagination li.page-item.active button.page-link {
    border: 1px solid var(--qld-soft-grey) !important;
    border-bottom: 0 !important;
    background: var(--qld-white) !important;
    margin-top: -0.175rem !important;
    padding-top: 0.675rem !important;
    color: var(--qld-body-color) !important;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: none;
    position: relative;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-form > div > nav > ul.pagination li.page-item.active button.page-link:after {
    content: "";
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    background-color: var(--qld-light-blue);
    border-radius: 4px 4px 0 0;
}


/* ============================================================
   ALERTS / NOTIFICATION CONTENT
   ============================================================ */

.formio_container :is(.formio-component-form, .formio-form) .formio-component-content.formio-hidden.alert {
    border: none;
}

/* Shared pseudo-element base for all alert types */
.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-content:is(.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-error)
    .formio-component-htmlelement:before,
.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-content:is(.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-error)
    .formio-component-htmlelement:after {
    content: "";
    width: 3rem;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-content:is(.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-error)
    .formio-component-htmlelement:after {
    color: #fff;
    background-image: var(--alert-icon);
    background-repeat: no-repeat;
    background-position: center center;
}

/* Text inside alerts */
.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-content:is(.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-error)
    .formio-component-htmlelement :is(p, ul, ol) {
    line-height: 1.5;
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-content:is(.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-error)
    .formio-component-htmlelement :is(p, ul, ol):last-of-type {
    margin-bottom: 0;
}

/* Links inside alerts */
.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-content:is(.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-error)
    .formio-component-htmlelement a {
    color: var(--qld-link-color);
}

.formio_container :is(.formio-component-form, .formio-form)
    .formio-component-content:is(.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-error)
    .formio-component-htmlelement a:visited {
    color: var(--qld-link-visited);
}


/* ============================================================
   CHECKBOX & RADIO — CUSTOM STYLED INPUTS
   ============================================================ */

.formio_container label:has(.form-check-input) {
    --_background-color: transparent;
    cursor: pointer;
    position: relative;
    vertical-align: bottom;
    line-height: 2rem;
    padding-left: 2rem;
}

.formio_container label:has(.form-check-input):before,
.formio_container label:has(.form-check-input):after {
    visibility: visible;
    content: " ";
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 9;
    border: 2px solid var(--qld-light-text-text);
    width: 2rem;
    height: 2rem;
}

.formio_container label:has(.form-check-input):before {
    background-color: var(--_background-color);
    border-color: var(--qld-light-text-text);
    background-image: none !important;
}

.formio_container label:has(.form-check-input):after {
    z-index: 101;
    background-color: transparent;
}

.formio_container label:has(.form-check-input:active):before,
.formio_container label:has(.form-check-input:focus):before {
    border-color: var(--qld-input-border-color-hover);
    outline: 3px solid var(--qld-focus-color, #002e85);
    outline-offset: 2px;
    box-shadow: none;
}

.formio_container label:has(.form-check-input:hover) {
    --_background-color: var(--qld-extra-light-grey);
}

.formio_container label:has(.form-check-input:checked):after {
    content: "";
    display: block;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--qld-light-text-text);
}

/* Checkbox tick */
.formio_container label:has(.form-check-input[type="checkbox"]:checked):after {
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5498 13.8L0.0498047 7.30002L2.2998 5.05002L6.5498 9.30002L15.6998 0.150024L17.9498 2.40002L6.5498 13.8Z' fill='currentColor'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5498 13.8L0.0498047 7.30002L2.2998 5.05002L6.5498 9.30002L15.6998 0.150024L17.9498 2.40002L6.5498 13.8Z' fill='currentColor'/%3E%3C/svg%3E");
    mask-size: 1.125rem;
    -webkit-mask-size: 1.125rem;
}

/* Radio — circular shape */
.formio_container label:has(.form-check-input[type="radio"]):before,
.formio_container label:has(.form-check-input[type="radio"]):after {
    border-radius: 50%;
}

.formio_container label:has(.form-check-input[type="radio"]):after {
    mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"%3e%3ccircle cx="16" cy="16" r="11" fill="%23000000"/%3e%3c/svg%3e');
    -webkit-mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"%3e%3ccircle cx="16" cy="16" r="11" fill="%23000000"/%3e%3c/svg%3e');
    mask-size: 100%;
    -webkit-mask-size: 100%;
}

/* Validation state outlines */
.formio_container .valid label:has(.form-check-input:focus):before,
.formio_container .invalid label:has(.form-check-input:focus):before {
    outline: 3px solid var(--qld-focus-color, #002e85);
    outline-offset: 2px;
    box-shadow: none;
}

.formio_container .valid label:has(.form-check-input):before {
    outline: var(--qld-notify-success) solid 2px;
}

.formio_container .invalid label:has(.form-check-input):before {
    outline: var(--qld-notify-warning) solid 2px;
}


/* ============================================================
   SMALL VARIANT
   ============================================================ */

.formio_container .small label:has(.form-check-input) {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    padding-left: 1.875rem;
}

.formio_container .small label:has(.form-check-input):before,
.formio_container .small label:has(.form-check-input):after {
    width: 1.375rem;
    height: 1.375rem;
    border-width: 2px;
}

.formio_container .small label:has(.form-check-input:checked):before {
    background-size: 22px 22px;
}

.formio_container .small label:has(.form-check-input[type="checkbox"]:checked):after {
    mask-size: 0.84906rem 0.63988rem;
    -webkit-mask-size: 0.84906rem 0.63988rem;
}

.formio_container .small label:has(.form-check-input[type="radio"]):after {
    mask-image: url('data:image/svg+xml,%3csvg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M11 17.5C14.5899 17.5 17.5 14.5899 17.5 11C17.5 7.41015 14.5899 4.5 11 4.5C7.41015 4.5 4.5 7.41015 4.5 11C4.5 14.5899 7.41015 17.5 11 17.5Z" fill="%23000000"/%3e%3c/svg%3e');
    -webkit-mask-image: url('data:image/svg+xml,%3csvg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M11 17.5C14.5899 17.5 17.5 14.5899 17.5 11C17.5 7.41015 14.5899 4.5 11 4.5C7.41015 4.5 4.5 7.41015 4.5 11C4.5 14.5899 7.41015 17.5 11 17.5Z" fill="%23000000"/%3e%3c/svg%3e');
}


/* ============================================================
   DARK / DARK-ALT VARIANT
   ============================================================ */

.formio_container :is(.dark, .dark-alt) label:has(.form-check-input:hover) {
    --_background-color: var(--form-check-hover);
}

.formio_container :is(.dark, .dark-alt) label:has(.form-check-input:hover):after {
    background-color: var(--qld-dark-hover);
}

.formio_container :is(.dark, .dark-alt) label:has(.form-check-input):before,
.formio_container :is(.dark, .dark-alt) label:has(.form-check-input):after {
    border-color: var(--qld-dark-text-text);
}

.formio_container :is(.dark, .dark-alt) label:has(.form-check-input:checked):after {
    background-color: var(--qld-dark-text-text);
}

.formio_container :is(.dark, .dark-alt) label:has(.form-check-input:focus) {
    outline: 3px solid var(--qld-dark-focus);
}


/* ============================================================
   FOOTER FEEDBACK FORM
   ============================================================ */

.formio_container #qg-footer-feedback #feedbackFormIO label:has(.form-check-input):before,
.formio_container #qg-footer-feedback #feedbackFormIO label:has(.form-check-input):after {
    border-color: var(--qld-light-text-text);
}

.formio_container #qg-footer-feedback #feedbackFormIO label:has(.form-check-input:checked):after {
    background-color: var(--qld-light-text-text);
}

.formio_container #qg-footer-feedback #feedbackFormIO label:has(.form-check-input:hover):after {
    background-color: var(--qld-light-text-text);
}

.formio_container #qg-footer-feedback #feedbackFormIO label:has(.form-check-input:focus) {
    outline: unset;
}

.formio_container #qg-footer-feedback #feedbackFormIO input:has(.form-check-input) {
    display: none;
}


/* ============================================================
   GLOBAL LABEL STYLES
   ============================================================ */

.formio_container .col-form-label {
    color: var(--qld-text-grey);
    display: block;
    font-weight: 600;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}

.formio_container .col-form-label.field-required:after {
    content: "";
}

.formio_container .col-form-label.field-required:before {
    color: #e22339;
    content: " *";
}

.formio_container .form-check-label.field-required span:after {
    color: #e22339;
    content: " *";
}

.formio_container .form-text.text-muted {
    color: var(--qld-text-grey);
    display: block;
    font-size: 1em;
    line-height: 1.5;
    margin: 0;
    order: 2;
}

.formio_container .form-text.text-muted p {
    margin: 0;
}


/* ============================================================
   FIELDSET / LEGEND
   ============================================================ */

.formio_container fieldset legend {
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--qld-color-default-color-light-text-heading);
}


/* ============================================================
   FORM GROUP LAYOUT
   ============================================================ */

.formio_container .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.formio_container .form-group.formio-component-button {
    align-items: flex-start;
}

.formio_container div[ref="element"] {
    order: 3;
}


/* ============================================================
   HTML ELEMENT COMPONENTS
   ============================================================ */

.formio_container .formio-component-htmlelement.alert.alert-info h2 {
    line-height: 1.5;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem;
    padding: 0;
    color: var(--qld-color-default-color-light-text-heading);
}

.formio_container .formio-component-htmlelement.alert.alert-info h2 span.fa {
    display: none;
}

.formio_container .formio-component-htmlelement p {
    margin-bottom: 16px;
}


/* ============================================================
   MISC UTILITY
   ============================================================ */

.formio-form .formio-select-autocomplete-input {
    border: none;
    display: block;
    height: 0;
    opacity: 0;
    position: relative;
    z-index: -1;
    margin: 0;
    padding: 0;
}

.formio-hidden,
.sortable-table .formio-hidden,
.formio-component-hidden.formio-component-label-hidden {
    margin-bottom: 0 !important;
}

.formio_container .formio-error-wrapper {
    background-color: unset;
}

.formio_container :is(.formio-error-wrapper, .formio-warning-wrapper) {
    padding: 0;
}

.formio_container .form-check-label:has(:is(.is-invalid, .invalid).form-check-input):before {
    outline: var(--qld-notify-warning) solid 2px;
}


/* ============================================================
   PRIMARY BUTTON
   ============================================================ */
.formio_container .btn-primary {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    background-color: #005eb8;
    color: #fff;
    border-radius: 4px;
    border: 3px solid #005eb8;
    text-align: center;
    min-width: 8.75rem;
}

.formio_container .btn-primary:hover {
    background-color: #00509c;
    color: #fff;
    border-color: #00509c;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
}

.formio_container .btn-primary:is(.focus, :focus) {
    background-color: var(--QLD-color-light-button__hover);
    color: var(--QLD-color-light-button__text);
    border-color: var(--QLD-color-light-button__hover);
    box-shadow: none;
    outline: 3px solid var(--QLD-color-light__focus);
    outline-offset: 2px;
}

.formio_container .btn-primary:not(:disabled):not(.disabled):is(.active, :active),
.show > .formio_container .btn-primary.dropdown-toggle {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
    color: var(--QLD-color-light__heading);
}

.formio_container .btn-primary:is(.disabled, :disabled, :disabled:hover) {
    cursor: not-allowed;
    background-color: #E0E0E0;
    color: var(--qld-text-grey);
    box-shadow: none;
    border-color: transparent;
    font-weight: 400;
}