:root {
    /*************************** Page-wide variables ****************************/

    /* Colours */
    --text-muted-light: #969fa8 /* light gray on black background - will be used in suitability tooltip and floating nav */;
}

/* JD: I don't think the overrides up to the modal ones are needed any more. */
.form-control:focus {
    border-color: #3c307b;
    box-shadow: 0 0 0 0.2rem rgb(60 48 123 / 25%);
}

.was-validated .form-control:valid,
.form-control.is-valid {
    background-image: url("data:image/svg+xml,%3csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 10.5C8.48528 10.5 10.5 8.48528 10.5 6C10.5 3.51472 8.48528 1.5 6 1.5C3.51472 1.5 1.5 3.51472 1.5 6C1.5 8.48528 3.51472 10.5 6 10.5Z' stroke='%2353A451'/%3e%3cpath d='M8.72581 4.53931L8.2621 4.0756C8.18145 3.9748 8.02016 3.9748 7.91936 4.0756L5.07661 6.89819L3.86694 5.68851C3.76613 5.5877 3.625 5.5877 3.52419 5.68851L3.06048 6.13206C2.97984 6.23286 2.97984 6.39415 3.06048 6.4748L4.89516 8.32964C4.99597 8.43044 5.1371 8.43044 5.2379 8.32964L8.72581 4.88206C8.80645 4.78125 8.80645 4.61996 8.72581 4.53931Z' fill='%2353A451'/%3e%3c/svg%3e");
}

.custom-select:focus {
    border-color: #3c307b;
    box-shadow: 0 0 0 0.2rem rgb(60 48 123 / 25%);
}

.custom-select.is-valid,
.was-validated .custom-select:valid {
    background:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 2 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
            right 0.75rem center/8px 10px no-repeat,
        #fff
            url("data:image/svg+xml,%3csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 10.5C8.48528 10.5 10.5 8.48528 10.5 6C10.5 3.51472 8.48528 1.5 6 1.5C3.51472 1.5 1.5 3.51472 1.5 6C1.5 8.48528 3.51472 10.5 6 10.5Z' stroke='%2353A451'/%3e%3cpath d='M8.72581 4.53931L8.2621 4.0756C8.18145 3.9748 8.02016 3.9748 7.91936 4.0756L5.07661 6.89819L3.86694 5.68851C3.76613 5.5877 3.625 5.5877 3.52419 5.68851L3.06048 6.13206C2.97984 6.23286 2.97984 6.39415 3.06048 6.4748L4.89516 8.32964C4.99597 8.43044 5.1371 8.43044 5.2379 8.32964L8.72581 4.88206C8.80645 4.78125 8.80645 4.61996 8.72581 4.53931Z' fill='%2353A451'/%3e%3c/svg%3e")
            center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}

.custom-select.is-invalid,
.was-validated .custom-select:invalid {
    background:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 2 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
            right 0.75rem center/8px 10px no-repeat,
        #fff
            url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a3003c' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e")
            center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}

.modal-header .close {
    margin: -7px;
    padding: 0;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    position: relative;
    font-size: 0;
}

.modal-header .close::before,
.modal-header .close::after {
    position: absolute;
    left: 21px;
    content: " ";
    height: 15px;
    width: 3px;
    background-color: #333;
}

.modal-header .close::before {
    transform: rotate(45deg);
}

.modal-header .close::after {
    transform: rotate(-45deg);
}

.modal-header .close:hover {
    background: #ebebeb;
}

/*
This is here to override a style from styles.css which otherwise makes headers look bad
This should be removed when we move away from styles.css
*/
.modal-header h5 {
    font-size: 19px;
    margin: 0;
}

label.custom-control-label {
    font-weight: var(--font-weight-regular);
}

.btn-outline-primary,
.btn-outline-secondary {
    background-color: white;
}

.input-group-text {
    cursor: pointer;
}

.input-group-text.is-disabled {
    cursor: default;
}

fieldset {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

fieldset legend {
    width: auto;
    margin-left: 10px;
    font-size: 100%;
    font-weight: var(--font-weight-bold);
    padding-left: 5px;
    padding-right: 5px;
}

/*  badge class: custom styles */
.badge-primary {
    background-color: var(--surface-primary-subtle);
    color: var(--text-primary);
}
.badge-secondary {
    background-color: var(--surface-subtle-dark);
    color: var(--text-subtle);
}
.badge-success {
    background-color: var(--surface-success-subtle);
    color: var(--text-success);
}
.badge-danger {
    background-color: var(--surface-danger-subtle);
    color: var(--text-danger);
}
.badge-danger--highlighted {
    background-color: var(--surface-danger);
    color: var(--text-inverse);
}
.badge-warning {
    background-color: var(--surface-warning);
    color: var(--text-warning);
}
.badge-info {
    background-color: var(--surface-info-subtle);
    color: var(--text-info);
}

/* END of badges - custom styles*/