.selector-element{position:relative;width:320px;height:38px;font-size:.92rem}.selector-element *{font-family:system-ui,sans-serif;box-sizing:border-box}.selector-element .selector-selected{width:100%;height:38px;cursor:pointer;background:#fff;box-shadow:0 1px 2px #0000000d;padding:0 28px 0 11px;border:1px solid silver;border-radius:6px;transition:.2s ease-in-out}.selector-element .selector-selected.visible{background:#fbfbfb;border-radius:6px 6px 0 0;transition:none}.selector-element .selector-selected:hover{background:#fbfbfb;box-shadow:0 2px 4px #0000001a}.selector-element .selector-selected:after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-top:6px solid silver;border-left:6px solid transparent;border-right:6px solid transparent}.selector-element .selector-selected p{display:inline-block;width:100%;height:100%;line-height:36px;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.selector-element .selector-options{position:absolute;top:100%;left:0;display:none;width:100%;height:auto;max-height:210px;overflow:auto;z-index:99;border:1px solid silver;border-top:0;border-radius:0 0 6px 6px;background:#fff;box-shadow:0 2px 4px #0000001a}.selector-element .selector-options.cover{top:0;border-radius:6px;border-top:1px solid silver}.selector-element .selector-options.visible{display:inline-block}.selector-element .selector-options .selector-filter{position:sticky;top:0;width:100%;height:32px;border-bottom:1px solid silver;z-index:2}.selector-element .selector-options .selector-filter input{width:100%;height:100%;outline:none;border:none;background:#fff url(./search.svg) left 11px center no-repeat;background-size:18px;font-size:.8rem;padding:0 36px}.selector-element .selector-options .selector-filter .selector-filter-clear{position:absolute;right:9px;height:18px;width:18px;top:50%;transform:translateY(-50%);background:url(./clear.svg) center no-repeat;background-size:18px;opacity:.7;cursor:pointer}.selector-element .selector-options .selector-filter .selector-filter-clear:hover{opacity:1}.selector-element .selector-options .selector-group{float:left;width:100%;border-bottom:3px solid silver}.selector-element .selector-options .selector-group .group-text{position:sticky;top:0;float:left;width:100%;line-height:32px;text-transform:uppercase;font-size:.75rem;font-weight:600;background:#fbfbfb;color:#6b6b6b;padding:0 11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:1}.selector-element .selector-options .selector-group[data-disabled],.selector-element .selector-options .selector-group[data-disabled] .selector-option{opacity:.6;cursor:not-allowed}.selector-element .selector-options .selector-option{display:none;width:100%;height:32px;background:#fff;border-bottom:1px solid #ddd;cursor:pointer;transition:.2s ease-in-out}.selector-element .selector-options .selector-option:hover{background:#f5f5f5}.selector-element .selector-options .selector-option[data-selected]{background:#f2f2f2;font-weight:600}.selector-element .selector-options .selector-option.show{display:inline-block}.selector-element .selector-options .selector-option .option-text{display:inline-block;width:100%;line-height:32px;font-size:.85rem;padding:0 11px}.selector-element .selector-options .selector-option:last-of-type{border-bottom:none}.selector-element .selector-options .selector-option[data-disabled]{opacity:.6;cursor:not-allowed}.selector-element.relative{height:auto}.selector-element.relative .selector-options{position:relative;top:0}.selector-element[data-type=find] .group-text,.selector-element[data-type=search] .group-text{top:33px!important}.selector-element[data-disabled]{opacity:.6;cursor:not-allowed}.selector-element[data-disabled]:hover{box-shadow:inherit}.selector-element[data-disabled] .selector-selected{cursor:not-allowed}.selector-element[data-disabled] .selector-selected:hover{background:#fff}
