.data-box{display:flex;align-items:center;flex-direction:column;margin-top:15px;max-height:600px;overflow-y:scroll;width:calc(100% + 15px)}.data-box-item{flex:1;width:75%;border-radius:1em;box-shadow:0 10px 20px #dbdbdb;font-family:sans-serif;margin:0 2em 1em 2em}.data-box-item .item{width:100%;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:1em;box-sizing:border-box;border-radius:1em}.search-box-wrapper{display:inline-block;width:75%;position:relative;margin-top:.5em}.search-box-wrapper .search-box-input-container{position:relative;display:flex;align-items:center;background:#fff;border:2px solid #4a4a4a;border-radius:12px;padding:10px 14px;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:all .5s cubic-bezier(.65,0,.35,1);overflow:hidden}.search-box-wrapper .search-box-input{flex-grow:1;background:transparent;border:none;outline:none;font-family:sans-serif;font-size:1rem;color:#333;padding:6px 10px;width:100%;position:relative;z-index:2;transition:color .4s cubic-bezier(.4,0,.2,1)}.search-box-wrapper .search-box-input::-moz-placeholder{color:#888;font-style:italic}.search-box-wrapper .search-box-input::placeholder{color:#888;font-style:italic}.search-box-wrapper .icon-container{position:relative;width:20px;height:20px;transition:all .5s cubic-bezier(.7,-.5,.3,1.5);cursor:pointer;z-index:2}.search-box-wrapper .search-box-icon path{fill:#4a4a4a;transform-origin:center;transition:all .5s cubic-bezier(.4,0,.2,1)}.search-box-wrapper .underline-effect{position:absolute;bottom:0;left:0;width:0;height:2px;background:#372b74;transition:all .6s cubic-bezier(.25,.8,.25,1);z-index:1}.search-box-wrapper .ripple-circle{position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(55,43,116,.2);border-radius:50%;transform:translate(-50%,-50%);transition:all .7s cubic-bezier(.4,0,.2,1);z-index:0}.search-box-wrapper .floating-dots{position:absolute;inset:0;pointer-events:none;z-index:1}.search-box-wrapper .floating-dots span{position:absolute;width:3px;height:3px;background:#372b74;border-radius:50%;opacity:0;transition:opacity .3s ease,transform .6s cubic-bezier(.7,-.5,.3,1.5)}.search-box-wrapper .bg-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(55,43,116,.05),hsla(0,100%,96%,.1));opacity:0;transition:all .5s cubic-bezier(.25,.8,.25,1);z-index:0}.search-box-wrapper .search-box-input-container:hover,.search-box-wrapper .search-box-input:focus-within .search-box-input-container{border-color:#372b74;box-shadow:0 6px 20px rgba(55,43,116,.3);transform:translateY(-4px)}.search-box-wrapper .search-box-input-container:hover .icon-container,.search-box-wrapper .search-box-input:focus-within .icon-container{transform:translateY(-2px) scale(1.1)}.search-box-wrapper .search-box-input-container:hover .search-box-icon path,.search-box-wrapper .search-box-input:focus-within .search-box-icon path{fill:#372b74;transform:scale(1.1) rotate(5deg);animation:gentleBounce .5s cubic-bezier(.7,-.5,.3,1.5) infinite alternate}.search-box-wrapper .search-box-input-container:hover .underline-effect,.search-box-wrapper .search-box-input:focus-within .underline-effect{width:100%}.search-box-wrapper .search-box-input-container:hover .ripple-circle,.search-box-wrapper .search-box-input:focus-within .ripple-circle{width:75%;height:750%}.search-box-wrapper .search-box-input-container:hover .floating-dots span,.search-box-wrapper .search-box-input:focus-within .floating-dots span{opacity:1;animation:floatUp 1.2s cubic-bezier(.65,0,.35,1) infinite}.search-box-wrapper .search-box-input-container:hover .bg-fade,.search-box-wrapper .search-box-input:focus-within .bg-fade{opacity:1}.search-box-wrapper .search-box-input:focus{color:#372b74}@keyframes gentleBounce{0%{transform:scale(1.1) translateY(1px)}to{transform:scale(1.1) translateY(-1px)}}@keyframes floatUp{0%{transform:translate(var(--x),var(--y)) scale(1);opacity:0}50%{transform:translate(var(--x),calc(var(--y) - 15px)) scale(1.3);opacity:1}to{transform:translate(var(--x),calc(var(--y) - 30px)) scale(1);opacity:0}}.search-box-wrapper .floating-dots span:first-child{--x:10px;--y:10px;animation-delay:0s}.search-box-wrapper .floating-dots span:nth-child(2){--x:-5px;--y:5px;animation-delay:.2s}.search-box-wrapper .floating-dots span:nth-child(3){--x:15px;--y:0px;animation-delay:.4s}.search-box-wrapper .floating-dots span:nth-child(4){--x:-10px;--y:15px;animation-delay:.6s}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;overflow:hidden}