:root { --color-background: #ffffff; --color-border: #ced4da; --color-background--option: #d6dde6; --color-background--option--hover: #cbd5e0a1; --color-text--normal: #0c0c0c; --color-text--grey: #24262c; --color-text--red: #cc6666; --color-text--placeholder: #ced4da; --border-radius--base: 6px; --border-radius--small: 4.5px }
.multiselect-dropdown { position: relative; display: inline-flex; flex-wrap: wrap; padding: 5px 30px 5px 5px; gap: 6px; border-radius: var(--border-radius--base); border: solid 1px var(--color-border); background: var(--color-background); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 6px center; background-size: 16px 12px; min-width: 160px; max-width: 360px; cursor: pointer }
span.optext, span.placeholder { display: inline-flex; justify-content: center; align-items: center; border-radius: var(--border-radius--small) }
span.optext { background-color: var(--color-background--option); padding: 0 12px 2px 6px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
span.optext .optdel { float: right; margin: 0 -6px 1px 6px; cursor: pointer; color: var(--color-text--grey) }
span.optext .optdel:hover { color: var(--color-text--red) }
span.placeholder { color: var(--color-border) }
.multiselect-dropdown-list-wrapper { z-index: 100; border-radius: var(--border-radius--base); border: solid 1px var(--color-border); display: none; margin: -1px; position: absolute; top: 0; left: 0; right: 0; background: var(--color-background) }
.multiselect-dropdown-search { padding: 5px 6px 6px 5px; border-top-left-radius: var(--border-radius--base); border-top-right-radius: var(--border-radius--base); border: solid 1px transparent; border-bottom: solid 1px var(--color-border); font-size: inherit }
.multiselect-dropdown-search::placeholder { color: var(--color-text--placeholder) }
.multiselect-dropdown-search:focus, .multiselect-dropdown-search:focus-visible { outline: none }
.multiselect-dropdown-list { overflow-y: auto; overflow-x: hidden; height: 100%; max-height: 180px }
.multiselect-dropdown-list::-webkit-scrollbar { width: 4px }
.multiselect-dropdown-list::-webkit-scrollbar-thumb { background-color: var(--color-background--option); border-radius: 1000px }
.multiselect-dropdown-list div, .multiselect-dropdown-list div > input, .multiselect-dropdown-list div > label { cursor: pointer; border-radius: var(--border-radius--base) }
.multiselect-dropdown-list div { display: flex; align-items: center; justify-content: flex-start; column-gap: 6px; padding: 3px; margin: 3px 4px 3px 3px; transition: 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955) }
.multiselect-dropdown-list div:hover { background-color: var(--color-background--option--hover) }
.multiselect-dropdown-list-input { height: 14px; width: 14px; border: solid 1px var(--color-text--grey); margin: 0 }
.multiselect-dropdown span.maxselected { width: 100% }
.multiselect-dropdown-all-selector { border-bottom: solid 1px var(--color-border) }