/* The page loads this file after the shared components, so a rule here beats the same specificity in form.css. */
@layer components {
    select.filter-select {
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        border: 1px solid var(--theme-color-dark-prev);
        border-radius: 0;
    }

    select.filter-select:focus {
        border-color: var(--theme-color-main-dark);
        outline: 0;
    }

    .filter-select.ts-wrapper {
        position: relative;
    }

    select.ts-hidden-accessible {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .ts-control {
        position: relative;
        box-sizing: border-box;
        display: block;
        width: 100%;
        min-width: 20em;
        height: calc(2.25rem + 2px);
        padding: 0.375rem 1.5rem 0.375rem 0.5rem;
        font-size: 1rem;
        line-height: 1.5;
        color: #495057;
        cursor: default;
        background-color: #fff;
        border: 2px solid var(--theme-color-dark-prev);
        border-radius: 0;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .ts-wrapper.focus .ts-control {
        border-color: var(--theme-color-main-dark);
    }

    .ts-wrapper.dropdown-active .ts-control {
        border-color: var(--theme-color-dark-prev);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .ts-control .item {
        display: block;
        overflow: hidden;
        color: #555;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ts-control > input {
        width: 100%;
        padding: 0;
        margin: 0;
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
        outline: 0;
    }

    .ts-wrapper.has-items .ts-control > input {
        display: none;
    }

    .ts-wrapper::before,
    .ts-wrapper::after {
        position: absolute;
        z-index: 1;
        pointer-events: none;
        content: "";
    }

    .ts-wrapper::before {
        top: 1px;
        right: 1px;
        box-sizing: border-box;
        width: 1.25rem;
        height: 98%;
        border-left: 1px solid #aaa;
        border-radius: 0 0.25rem 0.25rem 0;
    }

    .ts-wrapper::after {
        top: calc(1px + 49% - 0.125rem);
        right: calc(0.375rem + 0.5px);
        width: 0;
        height: 0;
        border-color: #888 transparent transparent;
        border-style: solid;
        border-width: 0.375rem 0.25rem 0;
    }

    .ts-wrapper.dropdown-active::before {
        border-left-color: transparent;
    }

    .ts-wrapper.dropdown-active::after {
        border-color: transparent transparent #888;
        border-width: 0 0.25rem 0.375rem;
    }

    .ts-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1056;
        box-sizing: border-box;
        width: 100%;
        margin-top: -1px;
        overflow-x: hidden;
        background-color: #fff;
        border: 1px solid #80bdff;
        border-top: 0;
        border-radius: 0 0 4px 4px;
    }

    .ts-dropdown .dropdown-input-wrap {
        padding: 4px;
    }

    .ts-dropdown .dropdown-input {
        box-sizing: border-box;
        width: 100%;
        padding: 4px;
        color: #555;
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAv0lEQVR42mNgQAIdHR28QCwDwu3t7YwMhABQYTUQvwbi/1B8AYgD8GmYDVV4H4jLgHgKkuZwbBo8oJJ7gJgfSdwMiN8D8VsgFkHXNAeI/wKxBhYDK6EGeqBLrALiH9g8juSKAHSJHqiEDxZNC6GusEaX0IJqAoWcO1SMB4groOIPcYVePFJo3QDiF0h8kE1duDRaAPFyIL4CxJeAuB6Iu5E09zIQC4CK25A0TgBiLmI11gLxL6hGZ1Js3AX1nyYA7Vu2Ihp52ewAAAAASUVORK5CYII=") right 0.625rem top 0.625rem no-repeat;
        border: 1px solid #ccc;
        border-radius: 0.25rem;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        outline: 0;
    }

    .ts-dropdown .dropdown-input::placeholder {
        color: #999;
    }

    .ts-dropdown-content {
        max-height: 200px;
        overflow-y: auto;
    }

    .ts-dropdown .option,
    .ts-dropdown .no-results {
        padding: 6px;
        color: #333;
        cursor: pointer;
    }

    .ts-dropdown .no-results {
        color: #856404;
        cursor: default;
        background-color: #fff3cd;
    }

    .ts-dropdown .option.selected {
        color: #31708f;
        background-color: #d9edf7;
    }

    .ts-dropdown .option.active {
        color: #fff;
        background-color: #337ab7;
    }

    .ts-dropdown .highlight {
        color: inherit;
        background: none;
    }
}