.bm-dropdown
{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid var(--borderColor);
    float: left;
}

    .bm-dropdown *,
    .bm-dropdown *::before,
    .bm-dropdown *::after
    {
        box-sizing: border-box;
    }


/* ============================================================
   Closed control
   ============================================================ */

.bm-dropdown-control,
.bm-dropdown-static-select
{
    border-width: 0;
    width: 100%;
    margin: 0;
    padding: calc((2.5rem - (1em * 1.7)) / 2) 2.375rem calc((2.5rem - (1em * 1.7)) / 2) 0.75rem;
    line-height: 1.7 !important;
    background-color: var(--contentBackColor);
    color: var(--primaryTextColor);
    font: inherit;
    font-size: inherit;
    outline: none;
    height: auto;
}

button.bm-dropdown-control
{
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.bm-dropdown.text-center button.bm-dropdown-control
{
    justify-content: space-around;
}

button.bm-dropdown-control:hover, button.bm-dropdown-control:active
{
    background-color: transparent;
}

.bm-dropdown-control:focus-visible,
.bm-dropdown-static-select:focus-visible
{
    border: none;
    box-shadow: none;
}

.bm-dropdown-control:disabled,
.bm-dropdown-static-select:disabled
{
    cursor: default;
    opacity: 1;
}

.bm-dropdown-selected-text
{
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bm-dropdown-placeholder
{
    color: var(--placeholderText, #86868b);
}


/* Validation classes supplied through InputBase */

.bm-dropdown-control.invalid,
.bm-dropdown-static-select.invalid
{
    border-color: var(--errorColor, #dc2626);
}


/* ============================================================
   Arrow
   ============================================================ */

.bm-dropdown-arrow
{
    position: absolute;
    top: 50%;
    right: 0.6875rem;
    width: 1.35rem;
    height: 1.35rem;
    transform: translateY(-50%);
    pointer-events: none;
}

    .bm-dropdown-arrow svg
    {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        transition: transform 415ms;
    }

.bm-dropdown-control-open
.bm-dropdown-arrow svg
{
    -webkit-transform: rotate3d(1, 0, 0, 180deg);
    transform: rotate3d(1, 0, 0, 180deg);
}

.bm-dropdown-arrow path
{
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   Static/native version
   ============================================================ */

.bm-dropdown-static-select
{
    position: relative;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

    .bm-dropdown-static-select:disabled
    {
        cursor: default;
    }


/* ============================================================
   Popup

   The popover API places this element in the browser top layer.
   This means it isn't clipped by overflow:hidden ancestors.
   ============================================================ */

.bm-dropdown-popup
{
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0.9375rem 0;
    overflow: hidden;
    border: 1px solid var(--borderColor);
    border-radius: 0.625rem;
    background: var(--userMenuBackColor);
    color: var(--primaryTextColor);
    box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.14);
    z-index: 10000;
    opacity: 0;
    transform: scale(0.99);
}

.bm-dropdown-popup-down
{
    transform: scale(0.99);
    transform-origin: top center;
}

.bm-dropdown-popup-up
{
    transform: scale(0.99);
    transform-origin: bottom center;
}

.bm-dropdown-popup:popover-open
{
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* Start after popup positioning is complete, on every opening. */
.bm-dropdown-popup-animate-in
{
    animation: bm-dropdown-popup-fade-in 415ms ease both;
}

@keyframes bm-dropdown-popup-fade-in
{
    from
    {
        opacity: 0;
    }

    to
    {
        opacity: 1;
    }
}


/*
   Fallback used by the JS if the browser doesn't expose
   showPopover().
*/
.bm-dropdown-popup:not(:popover-open):not(.bm-dropdown-popup-fallback-open)
{
    display: none;
}

.bm-dropdown-popup-fallback-open
{
    display: block;
    opacity: 1;
    transform: none;
}


/* ============================================================
   Search
   ============================================================ */

.bm-dropdown-search-container
{
    position: relative;
    width: 100%;
    padding: 0 0.9375rem;
    margin-bottom: 0.9375rem;
    background: var(--userMenuBackColor);
}

.bm-dropdown-search
{
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 2.1875rem 0 0.625rem;
    border: 1px solid var(--borderColor);
    border-radius: 0.625rem;
    outline: none;
    font: inherit;
    font-size: inherit;
    float: none !important;
    background: var(--userMenuBackColor) !important;
}

    .bm-dropdown-search::placeholder
    {
        color: var(--placeholderText);
    }

    .bm-dropdown-search:focus
    {
        outline: 2px solid var(--buildmatrixBlueHover);
        outline-offset: -2px;
    }

.bm-dropdown-search-icon
{
    position: absolute;
    top: 50%;
    right: 1.45rem;
    width: 1.15rem;
    height: 1.15rem;
    transform: translateY(-50%);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
}


/* ============================================================
   Options
   ============================================================ */

.bm-dropdown-options
{
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
}

.bm-dropdown-option
{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--bm-item-height);
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.bm-dropdown-option-content
{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 0.875rem 0 1.625rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
}

.bm-dropdown.text-center .bm-dropdown-option-content
{
    padding: 0 1rem 0 1rem;
    justify-content: space-around;
}

/*
   We deliberately do NOT apply a normal :hover background.
   The single moving background below supplies the hover state.
*/
.bm-dropdown-option:hover
{
    background: transparent;
}


/* ============================================================
   Moving hover / keyboard background
   ============================================================ */

.bm-dropdown-moving-background
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: none;
    margin: 0;
    padding: 0;
    background: var(--movingBackgroundHoverColour);
    pointer-events: none;
    will-change: transform, width, height;
    /*transition: transform 260ms linear( 0, 0.09 6.3%, 0.32 13.5%, 0.57 21.2%, 0.77 29.4%, 0.91 38.3%, 0.99 48.2%, 1.02 59.8%, 1.01 73.6%, 1 ), width 260ms ease, height 260ms ease, opacity 100ms ease;*/
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms ease, height 260ms ease, opacity 100ms ease;
    opacity: 0;
}

    .bm-dropdown-moving-background.visible
    {
        display: block;
        opacity: 1;
    }

/* The moving background supplies the pressed state for each option. */
.bm-dropdown-options:has(.bm-dropdown-option:active)
.bm-dropdown-moving-background
{
    background: var(--buildmatrixBlueTenPercent);
}

.bm-dropdown-moving-background.no-transition
{
    transition: none;
}


/* Blue bar */

.bm-dropdown-moving-background::before
{
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 6px;
    width: 4px;
    border-radius: 3px;
    background: var(--buildmatrixBlue);
    content: "";
}


/* ============================================================
   Selected / keyboard states

   These classes don't paint backgrounds because the animated
   background owns that appearance.
   ============================================================ */

.bm-dropdown-option-selected
{
    color: var(--buildmatrixBlue);
}

    .bm-dropdown-option-selected .bm-dropdown-option-content
    {
        font-weight: 500;
    }

.bm-dropdown-option-keyboard-highlighted
{
    outline: none;
}


/* ============================================================
   No results
   ============================================================ */

.bm-dropdown-no-data
{
    position: relative;
    display: flex;
    align-items: center;
    height: var(--bm-item-height);
    padding: 0 0.875rem 0 1.625rem;
    color: var(--placeholderText, #86868b);
}


/* ============================================================
   Motion accessibility
   ============================================================ */

@media (prefers-reduced-motion: reduce)
{
    .bm-dropdown-popup,
    .bm-dropdown-moving-background,
    .bm-dropdown-arrow svg
    {
        animation: none;
        transition: none;
    }
}


/* ============================================================
   Scrollbar track extensions

   Keep the list and its native thumb in their existing positions.
   Paint matching track colour through the popup padding instead.
   These selectors override common.css only inside dropdown popups.
   ============================================================ */

.bm-dropdown-popup
{
    --bm-dropdown-track-color: var(--pageBackColor);
    --bm-scrollbar-width: 0px;
}

[data-theme="dark"] .bm-dropdown-popup
{
    --bm-dropdown-track-color: var(--contentBackColor);
}

.bm-dropdown-popup.bm-dropdown-has-scrollbar::before,
.bm-dropdown-popup.bm-dropdown-has-scrollbar::after
{
    content: "";
    position: absolute;
    right: 0;
    width: var(--bm-scrollbar-width);
    background: var(--bm-dropdown-track-color);
    pointer-events: none;
}

/* Bottom padding: follow the inside of the popup's rounded corner. */
.bm-dropdown-popup.bm-dropdown-has-scrollbar::after
{
    bottom: 0;
    height: var(--bm-scrollbar-bottom-padding);
    border-bottom-right-radius: max(0px, calc(0.625rem - 1px));
}

/* Top padding is filled only when there is no search header. */
.bm-dropdown-popup.bm-dropdown-has-scrollbar:not(.bm-dropdown-has-search)::before
{
    top: 0;
    height: var(--bm-scrollbar-top-padding);
    border-top-right-radius: max(0px, calc(0.625rem - 1px));
}

.bm-dropdown-popup .bm-dropdown-options.scrollable
{
    scrollbar-width: auto;
    scrollbar-color: auto;
}

    .bm-dropdown-popup .bm-dropdown-options.scrollable::-webkit-scrollbar-track
    {
        background: var(--bm-dropdown-track-color);
        border-radius: 0;
    }

/* With a search header, round the exposed top of the track itself. */
.bm-dropdown-popup.bm-dropdown-has-search .bm-dropdown-options.scrollable::-webkit-scrollbar-track
{
    border-top-left-radius: 7.5px;
    border-top-right-radius: 7.5px;
}