button{-webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none} #search-form{width:400px; margin:auto} .search-wrapper{position:relative} .search-wrapper input{width:100%; padding:8px 12px 8px 40px; font-size:16px; border:1px solid #5a5a5a; border-radius:6px; outline:none} .search-wrapper input:focus{border-color:#007bff; box-shadow:0 0 0 2px rgba(0, 123, 255, 0.15)} .search-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#999; fill:none; pointer-events:none} input[type="search"]::-webkit-search-cancel-button{cursor:pointer} #autoComplete-search-list{top:100%; width:100%} #autocomplete-search{} .search-wrapper-block{display:flex; justify-content:flex-start; align-items:center} #search-wrapper-back{display:none} .search-wrapper{flex:1} #autoComplete-search-list-results>ul{position:absolute; min-width:100px; box-sizing:border-box; left:0; margin:0; padding:0; z-index:1; list-style:none; border-radius:0.6rem; background-color:#fff; border:1px solid rgba(33, 33, 33, 0.07); box-shadow:0 3px 6px rgba(149, 157, 165, 0.15); outline:none; transition:opacity 0.15s ease-in-out; -moz-transition:opacity 0.15s ease-in-out; -webkit-transition:opacity 0.15s ease-in-out} #autoComplete-search-list-results>ul[hidden], #autoComplete-search-list-results>ul:empty{display:block; opacity:0; transform:scale(0)} #autoComplete-search-list-results>ul>li{margin:0.3rem; padding:0.3rem 0.5rem; text-align:left; color:#212121; font-size:12px; text-transform:uppercase; border-radius:0.35rem; background-color:rgba(255, 255, 255, 1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all 0.2s ease} #autoComplete-search-list-results>ul>li mark{background-color:transparent; color:rgba(255, 122, 122, 1); font-weight:bold} #autoComplete-search-list-results>ul>li:hover{cursor:pointer; background-color:#ebeeff} #autoComplete-search-list-results>ul>li[aria-selected="true"]{background-color:#ebeeff} #autoComplete-search-list-results{position:relative} button.search-toggle{display:none} #search-wrapper-back{color:#505050; background-color:white; border:none; outline:none; cursor:pointer; padding-right:7px} #autoComplete-tags-list{bottom:100%} .upload-tag-container{display:flex; justify-content:center; align-items:center; position:relative; text-align:left; padding:7px 6px} .upload-tag-contents{flex-grow:1; display:flex; gap:5px; flex-wrap:wrap} .upload-tag-counter{padding:0 6px; color:#808080; font-size:14px} .autocomplete-tag-container, .autocomplete-tag-container>ul{} .autocomplete-tag-container{flex-grow:1; display:inline-block; position:relative; display:flex; align-items:center; justify-content:flex-start; width:10ch; min-width:100px} #autocomplete-tag{display:block; width:100%; margin:5px 0; font-size:14px; text-overflow:ellipsis; outline:none; border:none; transition:all 0.4s ease; -webkit-transition:all -webkit-transform 0.4s ease} .autocomplete-tag-container>ul{position:absolute; max-height:226px; min-width:100px; box-sizing:border-box; left:0; margin:0; padding:0; z-index:1; list-style:none; border-radius:0.6rem; background-color:#fff; border:1px solid rgba(33, 33, 33, 0.07); box-shadow:0 3px 6px rgba(149, 157, 165, 0.15); outline:none; transition:opacity 0.15s ease-in-out; -moz-transition:opacity 0.15s ease-in-out; -webkit-transition:opacity 0.15s ease-in-out} .autocomplete-tag-container>ul[hidden], .autocomplete-tag-container>ul:empty{display:block; opacity:0; transform:scale(0)} .autocomplete-tag-container>ul>li{margin:0.3rem; padding:0.3rem 0.5rem; text-align:left; color:#212121; font-size:12px; text-transform:uppercase; border-radius:0.35rem; background-color:rgba(255, 255, 255, 1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all 0.2s ease} .autocomplete-tag-container>ul>li mark{background-color:transparent; color:rgba(255, 122, 122, 1); font-weight:bold} .autocomplete-tag-container>ul>li:hover{cursor:pointer; background-color:#ebeeff} .autocomplete-tag-container>ul>li[aria-selected="true"]{background-color:#ebeeff} .upload-tag-contents>.selected-tag-container{background-color:#deecff; border-radius:5px; white-space:nowrap; padding:7px 7px; cursor:pointer; display:flex; align-items:center; gap:3px} .upload-tag-contents>.selected-tag-container:hover{background-color:#cbe1ff} .upload-tag-contents>.selected-tag-container>svg{color:#0065db; width:12px; height:12px} .upload-tag-contents>.selected-tag-container>.selected-tag{font-size:11px; color:#0065db; text-transform:uppercase} .autoComplete_wrapper{display:inline-block; position:relative} .autoComplete_wrapper>input{height:3rem; width:370px; margin:0; padding:0 2rem 0 3.2rem; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; font-size:1rem; text-overflow:ellipsis; color:rgba(255, 122, 122, 0.3); outline:none; border-radius:10rem; border:0.05rem solid rgba(255, 122, 122, 0.5); background-size:1.4rem; background-position:left 1.05rem top 0.8rem; background-repeat:no-repeat; background-origin:border-box; background-color:#fff; transition:all 0.4s ease; -webkit-transition:all -webkit-transform 0.4s ease} .autoComplete_wrapper>input::placeholder{color:rgba(255, 122, 122, 0.5); transition:all 0.3s ease; -webkit-transition:all -webkit-transform 0.3s ease} .autoComplete_wrapper>input:hover::placeholder{color:rgba(255, 122, 122, 0.6); transition:all 0.3s ease; -webkit-transition:all -webkit-transform 0.3s ease} .autoComplete_wrapper>input:focus::placeholder{padding:0.1rem 0.6rem; font-size:0.95rem; color:rgba(255, 122, 122, 0.4)} .autoComplete_wrapper>input:focus::selection{background-color:rgba(255, 122, 122, 0.15)} .autoComplete_wrapper>input::selection{background-color:rgba(255, 122, 122, 0.15)} .autoComplete_wrapper>input:hover{color:rgba(255, 122, 122, 0.8); transition:all 0.3s ease; -webkit-transition:all -webkit-transform 0.3s ease} .autoComplete_wrapper>input:focus{color:rgba(255, 122, 122, 1); border:0.06rem solid rgba(255, 122, 122, 0.8)} .autoComplete_wrapper>ul{position:absolute; max-height:226px; overflow-y:scroll; box-sizing:border-box; left:0; right:0; margin:0.5rem 0; padding:0; z-index:1; list-style:none; border-radius:0.6rem; background-color:#fff; border:1px solid rgba(33, 33, 33, 0.07); box-shadow:0 3px 6px rgba(149, 157, 165, 0.15); outline:none; transition:opacity 0.15s ease-in-out; -moz-transition:opacity 0.15s ease-in-out; -webkit-transition:opacity 0.15s ease-in-out} .autoComplete_wrapper>ul[hidden], .autoComplete_wrapper>ul:empty{display:block; opacity:0; transform:scale(0)} .autoComplete_wrapper>ul>li{margin:0.3rem; padding:0.3rem 0.5rem; text-align:left; font-size:1rem; color:#212121; border-radius:0.35rem; background-color:rgba(255, 255, 255, 1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all 0.2s ease} .autoComplete_wrapper>ul>li mark{background-color:transparent; color:rgba(255, 122, 122, 1); font-weight:bold} .autoComplete_wrapper>ul>li:hover{cursor:pointer; background-color:rgba(255, 122, 122, 0.15)} .autoComplete_wrapper>ul>li[aria-selected="true"]{background-color:rgba(255, 122, 122, 0.15)} #search-wrapper-back.active{display:block} @media (max-width:900px){#search-form{display:none} #search-form.active{display:block; height:100vh; position:fixed; right:0; top:0; z-index:10; background:#fff; width:100%; padding:8px 10px} } @media (max-width:768px){} @media (max-width:615px){.autoComplete_wrapper>input{width:18rem} #search-form{display:block; margin-bottom:0px} #search-form:not(.active) .search-wrapper input{padding:5px 10px 5px 32px; font-size:14px} #search-form:not(.active) .search-wrapper .search-icon{left:10px; width:16px; height:16px} #bottom-bar{grid-template-columns:14% auto 14%} #search-form{display:block; width:100%} #search-form.active{display:block; height:100vh; position:fixed; right:0; top:0; z-index:10; background:#fff; width:100%; padding:8px 10px} #autoComplete-search-list-results>ul{border:none; box-shadow:none} #autoComplete-search-list-results>ul>li{padding:0.5rem 0.5rem; font-size:14px} }