.app{display:flex;flex-direction:column;align-items:center;padding:20px}:root{--color-border: #ccc;--color-hover-background: #bfd6ff;--color-active: #0c67c2;--color-shadow: #daeeff;--color-active-background: #e5f2ff;--input-background: #f7f7f7}.multi-select{position:relative;width:100%;max-width:400px;font-family:Arial,Helvetica,sans-serif}.multi-select__input-wrapper{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--color-border);border-radius:10px;padding:4px 8px;transition:all .5s;height:36px}.multi-select__input-wrapper--active{border-color:var(--color-active)!important;box-shadow:0 0 0 3px var(--color-shadow)}.multi-select__input{width:100%;padding:5px 8px;font-size:16px;border-radius:12px;background:transparent;color:#333;border:none;outline:none}.multi-select__input:focus{border-color:var(--color-active)}.multi-select__arrow-icon{transition:all .3s ease-in-out;opacity:.4}.multi-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;border:1px solid var(--color-border);border-radius:16px;max-height:200px;z-index:10;overflow-y:auto;padding:8px}.multi-select__dropdown .highlighted{background-color:var(--color-hover-background)}.multi-select__dropdown-item{padding:8px 12px;font-size:14px;border-radius:4px;margin:2px 0;cursor:pointer;transition:all .4 ease-in-out}.multi-select__dropdown-item:hover{background-color:var(--color-hover-background)}.multi-select .selected-item{color:var(--color-active);background:var(--color-active-background);display:flex;justify-content:space-between;align-items:center}.multi-select .new-item{font-weight:700;color:#7878ff}.multi-select__input::placeholder{color:#aaa}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background-color:#f2f2f2;border-radius:32px}::-webkit-scrollbar-thumb{background-color:#d2d2d2;border-radius:8px}::-webkit-scrollbar-button{display:none!important}body{font-family:Arial,Helvetica,sans-serif}