/** Customizations */
.bs {

    /* Color match links to 'SharePoint Blue' */
    a,
    .link-primary {
        color: var(--sp-theme-primary, #0078d4);
    }

    /* Color match hover links */
    a:hover,
    a:focus,
    .link-primary:hover,
    .link-primary:focus {
        color: var(--sp-theme-darker, #004578);
    }

    /* Color match active links */
    a:active,
    .link-primary:active {
        color: var(--sp-theme-light, #c7e0f4);
    }

    /* Color match accordion */
    .accordion {
        --bs-accordion-btn-focus-border-color: var(--sp-theme-secondary, #2b88d8);
        --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
        --bs-accordion-active-bg: var(--sp-theme-light, #c7e0f4);
        --bs-accordion-active-color: var(--sp-theme-primary, #0078d4);
    }

    .accordion-button::after {
        background: transparent;
        background-color: var(--sp-neutral-dark, #201f1e);
        -webkit-mask: var(--bs-accordion-btn-icon);
        -webkit-mask-repeat: no-repeat;
    }

    .accordion-button:not(.collapsed)::after {
        background: transparent;
        background-color: var(--sp-theme-darker, #004578);
        -webkit-mask: var(--bs-accordion-btn-active-icon);
        -webkit-mask-repeat: no-repeat;
    }

    .badge {
        cursor: pointer;
    }

    .bg-danger {
        background-color: var(--sp-error-icon, #a80000) !important;
    }

    .bg-dark {
        background-color: var(--sp-neutral-dark, #201f1e) !important;
    }

    .bg-info {
        background-color: var(--sp-accent, #8764b8) !important;
    }

    .bg-light {
        background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
    }

    .bg-primary {
        background-color: var(--sp-theme-primary, #0078d4) !important;
    }

    .bg-secondary {
        background-color: var(--sp-info-icon, #605e5c) !important;
    }

    /* Create a reusable 'SharePoint' background color */
    .bg-sharepoint {
        background-color: var(--sp-theme-dark, #005a9e) !important;
    }

    .bg-success {
        background-color: var(--sp-success-icon, #107c10) !important;
    }

    .bg-warning {
        background-color: var(--sp-severe-warning-icon, #d83b01) !important;
    }

    .bg-white,
    .bg-body {
        background-color: var(--sp-white, #ffffff) !important;
    }

    /* Fix breadcrumb alignment */
    .breadcrumb {
        margin-bottom: 0;
    }

    /* Color match breadcrumb links */
    .breadcrumb-item.active,
    .breadcrumb-item>a {
        color: var(--sp-primary-button-text, #ffffff);
        text-decoration: none;
    }

    /* Color match breadcrumb hover links */
    .breadcrumb-item>a:hover,
    .breadcrumb-item>a:focus {
        color: var(--sp-neutral-quaternary, #d2d0ce);
        text-decoration: underline;
    }

    /* Color match breadcrumb active links */
    .breadcrumb-item>a:active {
        color: var(--sp-primary-text, #333333);
        text-decoration: underline;
    }

    /* Fix breadcrumb alignment */
    .breadcrumb-item+.breadcrumb-item::before {
        padding-top: 0.15rem;
    }

    /* Close button adjustments */
    .btn-close {
        --bs-btn-close-color: var(--sp-black, #000000);
        background: transparent;
        background-color: var(--bs-btn-close-color);
        min-width: auto;
        transition: background-color 0.2s;
        -webkit-mask: var(--bs-btn-close-bg);
        -webkit-mask-origin: content-box;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
    }

    .btn:focus-visible {
        background-color: var(--sp-neutral-dark, #201f1e);
        border-color: var(--sp-neutral-dark, #201f1e);
        color: var(--sp-neutral-lighter, #f3f2f1);
    }

    /** Button Icon - Custom class */
    .btn-icon {
        font-size: 0.875rem;
        min-width: 0px;
        padding: 2px;
    }

    /* Align icon properly when using btn-sm */
    .btn-icon-sm {
        margin: 0 0.25rem 0.14rem -0.25rem;
    }

    /* Don't reorder the btn- classes. It breaks active colors. */
    .btn-outline-danger {
        --bs-btn-color: var(--sp-error-icon, #a80000);
        --bs-btn-border-color: var(--sp-error-icon, #a80000);
        --bs-btn-hover-color: var(--sp-white, #ffffff);
        --bs-btn-hover-bg: var(--sp-error-icon, #a80000);
        --bs-btn-hover-border-color: var(--sp-error-icon, #a80000);
        --bs-btn-active-color: var(--sp-white, #ffffff);
        --bs-btn-active-bg: var(--sp-error-icon, #a80000);
        --bs-btn-active-border-color: var(--sp-error-icon, #a80000);
        --bs-btn-disabled-color: var(--sp-error-icon, #a80000);
        --bs-btn-disabled-border-color: var(--sp-error-icon, #a80000);
    }

    .btn-outline-light {
        --bs-btn-color: var(--sp-neutral-lighter, #f3f2f1);
        --bs-btn-border-color: var(--sp-neutral-lighter, #f3f2f1);
        --bs-btn-hover-color: var(--sp-black, #000000);
        --bs-btn-hover-bg: var(--sp-neutral-lighter, #f3f2f1);
        --bs-btn-hover-border-color: var(--sp-neutral-lighter, #f3f2f1);
        --bs-btn-active-color: var(--sp-black, #000000);
        --bs-btn-active-bg: var(--sp-neutral-lighter, #f3f2f1);
        --bs-btn-active-border-color: var(--sp-neutral-lighter, #f3f2f1);
        --bs-btn-disabled-color: var(--sp-neutral-lighter, #f3f2f1);
        --bs-btn-disabled-border-color: var(--sp-neutral-lighter, #f3f2f1);
    }

    .btn-outline-primary {
        --bs-btn-color: var(--sp-theme-primary, #0078d4);
        --bs-btn-border-color: var(--sp-theme-primary, #0078d4);
        --bs-btn-hover-color: var(--sp-white, #ffffff);
        --bs-btn-hover-bg: var(--sp-theme-primary, #0078d4);
        --bs-btn-hover-border-color: var(--sp-theme-primary, #0078d4);
        --bs-btn-active-color: var(--sp-white, #ffffff);
        --bs-btn-active-bg: var(--sp-theme-primary, #0078d4);
        --bs-btn-active-border-color: var(--sp-theme-primary, #0078d4);
        --bs-btn-disabled-color: var(--sp-theme-primary, #0078d4);
        --bs-btn-disabled-border-color: var(--sp-theme-primary, #0078d4);
    }

    .btn-outline-secondary {
        --bs-btn-color: var(--sp-info-icon, #605e5c);
        --bs-btn-border-color: var(--sp-info-icon, #605e5c);
        --bs-btn-hover-color: var(--sp-white, #ffffff);
        --bs-btn-hover-bg: var(--sp-info-icon, #605e5c);
        --bs-btn-hover-border-color: var(--sp-info-icon, #605e5c);
        --bs-btn-active-color: var(--sp-white, #ffffff);
        --bs-btn-active-bg: var(--sp-info-icon, #605e5c);
        --bs-btn-active-border-color: var(--sp-info-icon, #605e5c);
        --bs-btn-disabled-color: var(--sp-info-icon, #605e5c);
        --bs-btn-disabled-border-color: var(--sp-info-icon, #605e5c);
    }

    .btn-outline-success {
        --bs-btn-color: var(--sp-success-icon, #107c10);
        --bs-btn-border-color: var(--sp-success-icon, #107c10);
        --bs-btn-hover-color: var(--sp-white, #ffffff);
        --bs-btn-hover-bg: var(--sp-success-icon, #107c10);
        --bs-btn-hover-border-color: var(--sp-success-icon, #107c10);
        --bs-btn-active-color: var(--sp-white, #ffffff);
        --bs-btn-active-bg: var(--sp-success-icon, #107c10);
        --bs-btn-active-border-color: var(--sp-success-icon, #107c10);
        --bs-btn-disabled-color: var(--sp-success-icon, #107c10);
        --bs-btn-disabled-border-color: var(--sp-success-icon, #107c10);
    }

    .btn-outline-warning {
        --bs-btn-color: var(--sp-severe-warning-icon, #d83b01);
        --bs-btn-border-color: var(--sp-severe-warning-icon, #d83b01);
        --bs-btn-hover-color: var(--sp-white, #ffffff);
        --bs-btn-hover-bg: var(--sp-severe-warning-icon, #d83b01);
        --bs-btn-hover-border-color: var(--sp-severe-warning-icon, #d83b01);
        --bs-btn-active-color: var(--sp-white, #ffffff);
        --bs-btn-active-bg: var(--sp-severe-warning-icon, #d83b01);
        --bs-btn-active-border-color: var(--sp-severe-warning-icon, #d83b01);
        --bs-btn-disabled-color: var(--sp-severe-warning-icon, #d83b01);
        --bs-btn-disabled-border-color: var(--sp-severe-warning-icon, #d83b01);
    }

    .btn-primary {
        --bs-btn-color: var(--sp-white, #ffffff);
        --bs-btn-bg: var(--sp-theme-primary, #0078d4);
        --bs-btn-border-color: var(--sp-theme-primary, #0078d4);
        --bs-btn-hover-color: var(--sp-white, #ffffff);
        --bs-btn-hover-bg: var(--sp-theme-dark, #005a9e);
        --bs-btn-hover-border-color: var(--sp-theme-secondary, #2b88d8);
        --bs-btn-active-color: var(--sp-white, #ffffff);
        --bs-btn-active-bg: var(--sp-theme-secondary, #2b88d8);
        --bs-btn-active-border-color: var(--sp-theme-dark-alt, #106ebe);
        --bs-btn-disabled-color: var(--sp-white, #ffffff);
        --bs-btn-disabled-bg: var(--sp-theme-primary, #0078d4);
        --bs-btn-disabled-border-color: var(--sp-theme-primary, #0078d4);
    }

    .btn-secondary {
        --bs-btn-color: var(--sp-white, #ffffff);
        --bs-btn-bg: var(--sp-info-icon, #605e5c);
        --bs-btn-border-color: var(--sp-info-icon, #605e5c);
        --bs-btn-hover-color: var(--sp-white, #ffffff);
        --bs-btn-hover-bg: var(--sp-neutral-primary, #323130);
        --bs-btn-hover-border-color: var(--sp-neutral-primary-alt, #3b3a39);
        --bs-btn-active-color: var(--sp-white, #ffffff);
        --bs-btn-active-bg: var(--sp-neutral-primary-alt, #3b3a39);
        --bs-btn-active-border-color: var(--sp-neutral-secondary-alt, #8a8886);
        --bs-btn-disabled-color: var(--sp-white, #ffffff);
        --bs-btn-disabled-bg: var(--sp-info-icon, #605e5c);
        --bs-btn-disabled-border-color: var(--sp-info-icon, #605e5c);
    }

    /* Fix color for outline light focus */
    .btn-outline-light:focus {
        color: var(--sp-neutral-lighter, #f3f2f1);
    }

    /* Fix color for outline light active */
    .btn-outline-light:active,
    .btn-outline-light:hover {
        color: var(--sp-black, #000000);

        svg.brand path {
            fill: var(--sp-black, #000000);
        }
    }

    /* Color match primary outline button focus */
    .btn-check:focus+.bs .btn-outline-primary,
    .btn-outline-primary:focus {
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
    }

    /* Color match the primary button focus */
    .btn-check:focus+.btn-primary,
    .btn-primary:focus {
        background-color: var(--sp-theme-darker, #004578);
        border-color: var(--sp-theme-darker, #004578);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
    }

    /* Color match the shadow on active */
    .btn-check:checked+.btn-primary:focus,
    .btn-check:active+.btn-primary:focus,
    .btn-primary:active:focus,
    .btn-primary.active:focus,
    .show>.btn-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
    }

    .card {
        --bs-card-border-color: var(--bs-border-color);
        --bs-card-cap-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 95%);
        --bs-card-cap-color: var(--bs-body-color);
        --bs-card-color: var(--bs-body-color);
    }

    .carousel-caption {
        color: var(--sp-neutral-dark, #201f1e) !important;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        filter: invert(1);
    }

    .carousel-indicators [data-bs-target] {
        background-color: var(--sp-neutral-dark, #201f1e) !important;
    }

    .dropdown-divider {
        border-color: var(--sp-neutral-quaternary, #d2d0ce);
    }

    /* Color match dropdown hover */
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--sp-neutral-quaternary, #d2d0ce);
        cursor: pointer;
    }

    /* Color match dropdown active */
    .dropdown-item.active,
    .dropdown-item:active {
        background-color: var(--sp-theme-primary, #0078d4);
    }

    /* Dropdown Menu - Using the popover component for the menu, so we don't need to hide it by default */
    .dropdown-menu {
        --bs-dropdown-header-color: var(--sp-info-icon, #605e5c);
        --bs-dropdown-link-active-color: var(--sp-white, #ffffff);
        --bs-dropdown-link-active-bg: var(--sp-theme-primary, #0078d4);
        display: contents;
    }

    /* Show checkboxes & toggles as buttons */
    .form-check .form-check-input,
    .form-select:hover {
        cursor: pointer;
    }

    /* Adjust checkbox size */
    .form-check:not(.form-switch) .form-check-input[type=checkbox] {
        height: 1.25rem;
        width: 1.25rem;
    }

    .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] {
        --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z'/%3e%3c/svg%3e");
        background: transparent;
        background-color: var(--sp-theme-primary, #0078d4);
        transition: background-color 0.2s;
        -webkit-mask: var(--bs-form-check-bg-image);
    }

    /* Fix checkbox label alignment */
    .form-check:not(.form-switch) .form-check-label {
        display: inline;
        margin-left: .5rem;
        margin-top: .25rem;
    }

    /** Color match the toggle background color to 'SharePoint Blue' */
    .form-check-input:checked {
        background-color: var(--sp-theme-primary, #0078d4);
        border-color: var(--sp-theme-primary, #0078d4);
    }

    /* Fix for readonly */
    .form-check>.form-check-input[readonly] {
        pointer-events: none;
    }

    .form-control:hover,
    .form-select:hover {
        border-color: var(--sp-theme-tertiary, #71afe5);
    }

    /* Color match disabled form elements */
    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--sp-neutral-quaternary, #d2d0ce);
        border-color: var(--sp-neutral-light, #edebe9);
        color: var(--sp-primary-text, #333333);
    }

    /* Fix validation styling */
    .form-control.is-invalid,
    .form-select.is-invalid {
        --bs-control-invalid-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a80000'%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='%23a80000' stroke='none'/%3e%3c/svg%3e");
    }

    .form-control.is-invalid {
        background-image: var(--bs-control-invalid-image);
        border-color: var(--sp-error-icon, #a80000) !important;
    }

    .form-control.is-valid,
    .form-select.is-valid {
        --bs-control-valid-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23107c10' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    }

    .form-control.is-valid {
        background-image: var(--bs-control-valid-image);
        border-color: var(--sp-success-icon, #107c10) !important;
    }

    .form-control::placeholder {
        color: var(--sp-info-icon, #605e5c);
    }

    .form-range::-webkit-slider-thumb {
        background-color: var(--sp-theme-primary, #0078d4);
    }

    /* Bootstrap Icon: Custom - caret-up-fill + caret-down-fill */
    .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 25.333' fill='%23605e5c' width='1em' height='1em'><path d='M0.34 8.03C-0.44 8.92 0.2 10.32 1.38 10.32C2.71 10.32 13.3 10.32 14.62 10.32C15.38 10.32 16 9.7 16 8.94C16 8.61 15.88 8.28 15.66 8.03C15 7.28 9.7 1.23 9.04 0.47C8.54 -0.1 7.67 -0.16 7.09 0.34C7.05 0.38 7 0.43 6.96 0.47C6.96 0.47 1.01 7.28 0.34 8.03Z'/><path d='M0.34 17.3C-0.44 16.41 0.2 15.01 1.38 15.01C2.71 15.01 13.3 15.01 14.62 15.01C15.38 15.01 16 15.63 16 16.39C16 16.73 15.88 17.05 15.66 17.3C15 18.06 9.7 24.11 9.04 24.86C8.54 25.43 7.67 25.49 7.09 24.99C7.05 24.95 7 24.91 6.96 24.86C6.96 24.86 1.01 18.06 0.34 17.3Z'/></svg>");
    }

    /* Color match form-select active */
    .form-select:active,
    .form-select:focus {
        border-color: var(--sp-theme-secondary, #2b88d8);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
    }

    .form-select.is-invalid:not([multiple]):not([size]),
    .form-select.is-invalid:not([multiple])[size="1"] {
        --bs-select-invalid-image: var(--bs-form-select-bg-img), var(--bs-control-invalid-image);
        background-image: var(--bs-select-invalid-image);
        border-color: var(--sp-error-icon, #a80000) !important;
    }

    .form-select.is-valid:not([multiple]):not([size]),
    .form-select.is-valid:not([multiple])[size="1"] {
        --bs-select-valid-image: var(--bs-form-select-bg-img), var(--bs-control-valid-image);
        background-image: var(--bs-select-valid-image);
        border-color: var(--sp-success-icon, #107c10) !important;
    }

    /* Fix text width on dataTables_length */
    .form-select-sm {
        background-size: 8px 10px;
        padding-right: 1.65rem;
    }

    /* Color match the toggle */
    .form-switch {
        .form-check-input {
            height: 1.25em;
        }

        .form-check-input:focus:not(:checked):not(.dark) {
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238a8886'/%3e%3c/svg%3e");
        }

        .form-check-input.dark,
        .form-check-input.dark:focus,
        .form-check-input.dark:checked {
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23faf9f8'/%3e%3c/svg%3e");
        }
    }

    :not(.btn-group).invert,
    .btn-group.invert::after,
    img.invert {
        filter: invert(1);
    }

    .jumbotron-danger {
        background-color: var(--sp-error-icon, #a80000) !important;
        color: var(--sp-white, #ffffff);
    }

    .jumbotron-dark {
        background-color: var(--sp-neutral-dark, #201f1e) !important;
        color: var(--sp-black, #000000);
    }

    .jumbotron-info {
        background-color: var(--sp-accent, #8764b8) !important;
        color: var(--sp-white, #ffffff);
    }

    .jumbotron-light {
        background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
        color: var(--sp-black, #000000);
    }

    .jumbotron-primary {
        background-color: var(--sp-theme-primary, #0078d4) !important;
        color: var(--sp-white, #ffffff);
    }

    .jumbotron-secondary {
        background-color: var(--sp-info-icon, #605e5c) !important;
        color: var(--sp-white, #ffffff);
    }

    .jumbotron-success {
        background-color: var(--sp-success-icon, #107c10) !important;
        color: var(--sp-white, #ffffff);
    }

    .jumbotron-warning {
        background-color: var(--sp-severe-warning-icon, #d83b01) !important;
        color: var(--sp-white, #ffffff);
    }

    .line-limit-1 {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    /* Color match the active list group item */
    .list-group {
        --bs-list-group-active-color: var(--sp-white, #ffffff);
        --bs-list-group-active-bg: var(--sp-theme-primary, #0078d4);
        --bs-list-group-active-border-color: var(--sp-theme-primary, #0078d4);
    }

    /* Use a pointer for tabs */
    .list-group[role="tablist"]>.list-group-item {
        cursor: pointer;
    }

    .modal {
        --bs-modal-color: var(--bs-body-color);
    }

    /* Increase modal border size */
    .modal-footer {
        border-top: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
    }

    /* Increase modal border size */
    .modal-header {
        border-bottom: 2px solid var(--sp-neutral-quaternary, #d2d0ce);

        .btn-close {
            padding: 1rem;
        }
    }

    /* Align modal header to the left */
    .modal-title {
        line-height: 1.2;
        margin: 0;
    }

    /* Define a custom margin-end value */
    .me-75 {
        margin-right: 0.75rem !important;
    }

    /* Define a custom margin-start value */
    .ms-75 {
        margin-left: 0.75rem !important;
    }

    /* Define a custom margin-x value */
    .mx-75 {
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
    }

    /* Set max-width to fit content */
    .mw-fit {
        max-width: fit-content !important;
    }

    /* Set color for active nav links */
    .nav-link:active,
    .navbar-brand:active {
        color: var(--bs-navbar-active-color);
    }

    .nav-tabs {
        border-bottom: 0;
    }

    /* Set background color and border for nav-tabs */
    .nav-tabs .nav-link {
        background-color: color-mix(in srgb, var(--sp-black, #000000), transparent 95%);
        border-radius: 0.25rem 0.25rem 0 0;
        border: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
    }

    /* Color match nav-tabs hover to secondary color */
    .nav-tabs .nav-link:hover {
        background-color: var(--sp-info-icon, #605e5c);
        border-color: var(--sp-info-icon, #605e5c);
        color: var(--sp-primary-button-text, #ffffff);
    }

    /* Color match nav-tabs active to SharePoint */
    .nav-tabs .nav-link.active,
    .nav-tabs .show>.nav-link,
    .nav-tabs .nav-link:focus {
        background-color: var(--sp-theme-primary, #0078d4);
        border-color: var(--sp-theme-primary, #0078d4);
        color: var(--sp-primary-button-text, #ffffff);
    }

    .navbar {
        --bs-navbar-color: var(--sp-primary-button-text, #ffffff);
        --bs-navbar-hover-color: var(--sp-theme-darker, #004578);
        --bs-navbar-disabled-color: var(--sp-neutral-tertiary, #a19f9d);
        --bs-navbar-active-color: var(--sp-theme-light, #c7e0f4);
        --bs-navbar-brand-color: var(--sp-primary-button-text, #ffffff);
        --bs-navbar-brand-hover-color: var(--sp-theme-darker, #004578);
    }

    span.navbar-brand:hover,
    span.navbar-brand:focus {
        color: var(--bs-navbar-brand-color);
    }

    /* Properly align the navbar brand text */
    .navbar-brand {
        align-items: baseline;
    }

    /* Match off-canvas border color to modal */
    .offcanvas-header {
        border-bottom: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
        padding: 0.5rem 0.5rem 0.5rem 1rem;
    }

    /* Off-canvas close button alignment */
    .offcanvas-header .btn-close {
        margin: 0rem 0rem 0rem auto;
        padding: 1rem;
    }

    /* Off-canvas sizes (Small 1) */
    .offcanvas-start.offcanvas-size-sm1,
    .offcanvas-end.offcanvas-size-sm1 {
        width: 20vw;
    }

    .offcanvas-top.offcanvas-size-sm1,
    .offcanvas-bottom.offcanvas-size-sm1 {
        height: 20vh;
    }

    /* Off-canvas sizes (Small 2) */
    .offcanvas-start.offcanvas-size-sm2,
    .offcanvas-end.offcanvas-size-sm2 {
        width: 25vw;
    }

    .offcanvas-top.offcanvas-size-sm2,
    .offcanvas-bottom.offcanvas-size-sm2 {
        height: 25vh;
    }

    /* Off-canvas sizes (Small 3) */
    .offcanvas-start.offcanvas-size-sm3,
    .offcanvas-end.offcanvas-size-sm3 {
        width: 30vw;
    }

    .offcanvas-top.offcanvas-size-sm3,
    .offcanvas-bottom.offcanvas-size-sm3 {
        height: 30vh;
    }

    /* Off-canvas sizes (Medium 1) */
    .offcanvas-start.offcanvas-size-md1,
    .offcanvas-end.offcanvas-size-md1 {
        width: 40vw;
    }

    .offcanvas-top.offcanvas-size-md1,
    .offcanvas-bottom.offcanvas-size-md1 {
        height: 40vh;
    }

    /* Off-canvas sizes (Medium 2) */
    .offcanvas-start.offcanvas-size-md2,
    .offcanvas-end.offcanvas-size-md2 {
        width: 50vw;
    }

    .offcanvas-top.offcanvas-size-md2,
    .offcanvas-bottom.offcanvas-size-md2 {
        height: 50vh;
    }

    /* Off-canvas sizes (Medium 3) */
    .offcanvas-start.offcanvas-size-md3,
    .offcanvas-end.offcanvas-size-md3 {
        width: 60vw;
    }

    .offcanvas-top.offcanvas-size-md3,
    .offcanvas-bottom.offcanvas-size-md3 {
        height: 60vh;
    }

    /* Off-canvas sizes (Large 1) */
    .offcanvas-start.offcanvas-size-lg1,
    .offcanvas-end.offcanvas-size-lg1 {
        width: 75vw;
    }

    .offcanvas-top.offcanvas-size-lg1,
    .offcanvas-bottom.offcanvas-size-lg1 {
        height: 75vh;
    }

    /* Off-canvas sizes (Large 2) */
    .offcanvas-start.offcanvas-size-lg2,
    .offcanvas-end.offcanvas-size-lg2 {
        width: 80vw;
    }

    .offcanvas-top.offcanvas-size-lg2,
    .offcanvas-bottom.offcanvas-size-lg2 {
        height: 80vh;
    }

    /* Off-canvas sizes (Large 3) */
    .offcanvas-start.offcanvas-size-lg3,
    .offcanvas-end.offcanvas-size-lg3 {
        width: 90vw;
    }

    .offcanvas-top.offcanvas-size-lg3,
    .offcanvas-bottom.offcanvas-size-lg3 {
        height: 90vh;
    }

    /* Off-canvas sizes (Full) */
    .offcanvas-start.offcanvas-size-full,
    .offcanvas-end.offcanvas-size-full {
        width: 100vw;
    }

    .offcanvas-top.offcanvas-size-full,
    .offcanvas-bottom.offcanvas-size-full {
        height: 100vh;
    }

    .page-item {
        cursor: pointer;

        .page-link {
            cursor: pointer;
        }
    }

    /* Color match the pagination link color to 'SharePoint Blue' */
    .page-link {
        border-color: var(--sp-info-icon, #605e5c);
        color: var(--sp-theme-primary, #0078d4);
        font-size: 13px;
    }

    /* Color match the pagination disabled border colors */
    .page-item.disabled .page-link {
        background-color: var(--sp-white, #ffffff);
        border-color: var(--sp-info-icon, #605e5c);
        color: var(--sp-info-icon, #605e5c);
        pointer-events: none;
    }

    /* Color match the pagination active link colors */
    .page-item.active .page-link {
        background-color: var(--sp-info-icon, #605e5c);
        border-color: var(--sp-info-icon, #605e5c);
        color: var(--sp-primary-button-text, #ffffff);
        z-index: inherit;
    }

    /* Color match for SharePoint */
    .page-link:focus {
        background-color: var(--sp-neutral-quaternary, #d2d0ce);
    }

    /* Color match for SharePoint */
    .page-link:hover {
        color: var(--sp-primary-text, #333333);
        background-color: var(--sp-neutral-quaternary, #d2d0ce);
        border-color: var(--sp-info-icon, #605e5c);
    }

    /* Color match for SharePoint */
    .page-link:focus,
    .form-control:focus,
    .form-check-input:focus {
        border-color: var(--sp-theme-secondary, #2b88d8);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
        color: var(--sp-primary-text, #333333);
    }

    /* Define a custom padding-end value */
    .pe-06 {
        padding-right: 0.6rem !important;
    }

    /* Define a custom padding-end value */
    .pe-75 {
        padding-right: 0.75rem !important;
    }

    /* Define a custom padding-start value */
    .ps-75 {
        padding-left: 0.75rem !important;
    }

    /* Define a custom padding-top value */
    .pt-03 {
        padding-top: 0.3rem !important;
    }

    /* Define a custom padding-x value */
    .px-75 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Popover */
    .popover {
        max-width: fit-content;
    }

    /* Fix Rich Textbox rounded corners */
    .rich-textbox {
        .editor-container {
            border-radius: 0 0 var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) !important;
        }

        .toolbar-container {
            border-radius: var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0 0 !important;
        }
    }

    svg.brand path {
        fill: var(--sp-white, #ffffff);
    }

    svg.icon-svg path {
        fill: currentColor;
    }

    .table {
        --bs-table-striped-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 95%);
        --bs-table-active-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 90%);
        --bs-table-hover-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 92%);
    }

    /* Add the default text color */
    .text-body {
        color: var(--sp-primary-text, #333333) !important;
    }

    .text-danger {
        color: var(--sp-error-icon, #a80000) !important;
    }

    .text-dark {
        color: var(--sp-neutral-dark, #201f1e) !important;
    }

    .text-default {
        color: var(--sp-primary-text, #333333) !important;
    }

    .text-info {
        color: var(--sp-accent, #8764b8) !important;
    }

    .text-light {
        color: var(--sp-neutral-lighter, #f3f2f1) !important;
    }

    .text-muted {
        color: var(--sp-neutral-secondary-alt, #8a8886) !important;
    }

    .text-primary {
        color: var(--sp-theme-primary, #0078d4) !important;
    }

    .text-secondary {
        color: var(--sp-info-icon, #605e5c) !important;
    }

    .text-success {
        color: var(--sp-success-icon, #107c10) !important;
    }

    .text-warning {
        color: var(--sp-severe-warning-icon, #d83b01) !important;
    }

    .text-white {
        color: var(--sp-white, #ffffff) !important;
    }

    /* Auto size the toast width */
    .toast {
        width: auto;
    }

    /* Define a custom width value */
    .w-5 {
        width: 5% !important;
    }
}

/** Modal background - Shouldn't be under the .bs class */
.modal-backdrop {
    --bs-backdrop-zindex: #{$zindex-modal-backdrop};
    --bs-backdrop-bg: #{$modal-backdrop-bg};
    --bs-backdrop-opacity: #{$modal-backdrop-opacity};

    @include overlay-backdrop(var(--bs-backdrop-zindex), var(--bs-backdrop-bg), var(--bs-backdrop-opacity));
}

/** Offcanvas background - Shouldn't be under the .bs class */
.offcanvas-backdrop {
    @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
}