.search-box{display:flex;align-items:center;border:1px solid #ccc;border-radius:20px;padding:0 5px;width:100%;max-width:280px;background-color:#fff;position:relative}.search-box.widthstyle{max-width:-moz-fit-content;max-width:fit-content}body.dark .search-box{border-color:#27334b;background-color:#27334b}body.dark .search-input::placeholder{color:#fff}body.dark .search-button{color:#fff}body.dark .search-input{background-color:#27334b;color:#FFF}.search-input{border-radius:20px;flex:1 1;border:none;outline:none;padding:5px 8px;font-size:13px}.search-button{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#b5b5b5}.clear-button{position:absolute;right:40px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;color:#888}@media(max-width:650px){.search-box{max-width:max-content}}@media(max-width:575px){.search-box.widthstyle{max-width:calc(100% - 150px)}.search-box{max-width:100%}.search-input{font-size:12px;padding:3px 8px;width:100%}}@media(max-width:450px){.search-button svg{width:15px}}