@import"https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap";body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#00c3ff;color:#eee}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.capitalize{text-transform:capitalize;text-align:center}.App{display:flex;width:100%}.container{margin-top:10vh;width:100%}@media (max-width: 800px){.home-inputs{width:90%!important;margin-top:1rem!important}.cards{width:80%!important}.values{display:none!important}}@media (max-width: 600px){.home-inputs{flex-direction:column;align-items:center!important}.home-inputs input{width:100%!important}.home-inputs button{margin-top:1rem!important}.sidebar{position:fixed!important;bottom:0!important;height:10vh!important;width:100%!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;padding:0!important}.sidebar .bank-logo{display:none}.sidebar-nav{justify-content:center!important;width:100%!important;flex-direction:row!important;margin:0!important}.input-write{width:60%!important}.card-bank{width:70%!important;min-width:300px}.visa-mark{top:0!important}.values{display:none!important}.values:before{display:none!important}}.sidebar{height:100vh;width:10%;background-color:#222;display:flex;align-items:center;flex-direction:column;padding:0 4rem}.sidebar a{color:#000;filter:invert(100%);font-size:2rem;transition:.4s all ease;width:50px;height:50px;display:grid;place-items:center}.sidebar a:hover{transform:scale(1.1)}.sidebar-nav{margin-top:4rem;display:flex;flex-direction:column}.bank-logo{position:absolute;bottom:2rem}.sidebar-user{box-shadow:4px 4px 12px #00000057;text-transform:uppercase;border-radius:12px;position:fixed;top:1rem;left:1rem}.home{display:flex;flex-direction:column;align-items:center}.card-bank{background-color:#222;border-radius:12px;height:228px;width:380px;display:flex;justify-content:flex-start;position:relative;animation:animate 1s infinite alternate infinite}.bank-logo-finances{width:120px;height:120px;margin:.5rem 2rem}.type-name{position:absolute;bottom:0;left:0;margin:2rem;text-transform:uppercase;font-family:Quantico,sans-serif}.number-card{position:absolute;bottom:0;left:0;margin:4rem 2rem;font-family:Quantico,sans-serif}.input-write{width:60%;outline:none;background-color:transparent;border:none;color:#fff;border:3px solid #222;padding:10px;border-radius:4px;font-family:Quantico,sans-serif}.input-write::selection{background-color:#222;color:#06f}.input-write::-webkit-input-placeholder{color:#fff}.visa-mark{position:absolute;bottom:0;right:0;margin:2rem}.visa-logo{object-fit:cover;width:100%}.home-inputs{display:flex;width:60%;align-items:center;margin-top:5rem;justify-content:center}.home-button{background-color:#222;padding:10px 18px;height:100%;margin-left:.5rem;cursor:pointer;box-shadow:4px 4px 12px #00000050;outline:none;border:none;color:#eee}.finances{display:flex;width:100%;align-items:center;flex-direction:column}.finances-balance{display:flex;align-items:center}.finances-balance button{height:40px;width:40px;border:none;outline:none;color:#222;margin-left:.4rem;border-radius:4px;background-color:transparent;font-size:1rem;cursor:pointer}.finances-balance .balance{position:absolute;font-weight:700;background-color:#222;border-radius:50px;width:90px;display:flex;justify-content:center;align-items:center;font-weight:200;height:30px;right:1rem;top:1rem}.finances-balance .balance:before{content:"R$";position:absolute;transform:translate(-60px)}.content-extract{background-color:#222;border-radius:12px;display:flex;align-items:center;width:218px;padding:1rem;color:#eee;font-weight:600;position:relative;cursor:pointer;transform:scale(.9);transition:.3s ease}.values:before{content:"";position:absolute;right:-1rem;top:50%;transform:translateY(-50%);clip-path:polygon(0% 20%,60% 20%,60% 0%,100% 50%,60% 100%,60% 80%,0% 80%);width:100px;height:40px;background-color:#222}.values{opacity:0;width:100%;height:auto;background-color:#222;position:absolute;transition:.6s ease;left:-24rem;display:flex;padding:1rem;border-radius:12px;cursor:none;flex-direction:column;z-index:1}.values p{width:60%;text-align:start;text-transform:capitalize;border-bottom:1px solid #eee}.total{position:absolute;right:1rem}.content-extract:hover .values{opacity:1}.content-extract .date-buy{position:absolute;right:2rem;font-size:.6rem}.payments{display:flex;align-items:center;flex-direction:column;text-align:center}.cards{width:60%;background-color:#d5d5d52f;height:auto;border-radius:3px}.cards-content{display:flex;justify-content:center}.card{transform:scale(.8);display:flex;flex-direction:column;align-items:center}.card button{height:40px;width:200px;margin:0;margin-top:1rem}