@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);@import url(https://fonts.googleapis.com/css2?family=Montserrat&display=swap);*{padding:0;margin:0;box-sizing:border-box}body{background-color:#fff;font-family:"Montserrat",sans-serif}button,input{-webkit-appearance:none;appearance:none;background:none;border:none;outline:none}.login-form{width:100%;height:100%}.login-form .input-span{margin-left:80px;margin-top:10px;color:#ff9201}.login-content{width:100%;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;margin-top:50px}.login-content .login-input{position:relative;font-size:1.125rem;width:80%;padding:6px 12px;border-bottom:2px solid grey;margin:0}.login-content .underline{margin-top:34px;height:2px;width:76%}.login-content .underline,.login-content .underline:before{position:absolute;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.login-content .underline:before{content:"";height:100%;width:100%;background:red;-webkit-transform:scaleX(0);transform:scaleX(0)}.login-btn-container{display:-webkit-flex;display:flex;-webkit-justify-content:space-evenly;justify-content:space-evenly;-webkit-align-items:center;align-items:center;margin-top:50px}.login-btn-container .login-btn{border:2px solid red;border-radius:4px;background:transparent;padding:8px 18px;font-size:1.125rem;color:#d40000;transition:.2s;cursor:pointer}.login-btn-container .login-btn:hover{color:#e7e6dd;background-color:#d40000;border-radius:4px;transition:.4s}.login-content input:focus~.underline:before,.login-content input:valid~.underline:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.popup-content{margin:auto;width:25%;height:40%;transition:.4s ease-in;-webkit-animation:anvil;animation:anvil;padding:10px;background-color:#e7e6dd;box-shadow:0 0 5px 5px rgba(0,0,0,.4)}.modal{height:100%}.modal,.modal>.header{padding:5px;width:100%}.modal>.header{border-bottom:1px solid grey;font-size:2rem;color:#d40000}.modal>.close{cursor:pointer;position:absolute;display:block;padding:2px 5px;line-height:20px;right:-10px;top:-10px;font-size:24px;background:#fff;border-radius:18px;border:1px solid #cfcece}@-webkit-keyframes anvil{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);opacity:0;box-shadow:0 0 0 hsla(0,0%,94.5%,0)}1%{-webkit-transform:scale(.96) translateY(10px);transform:scale(.96) translateY(10px);opacity:0;box-shadow:0 0 0 hsla(0,0%,94.5%,0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);opacity:1;box-shadow:0 0 500px hsla(0,0%,94.5%,0)}}@keyframes anvil{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);opacity:0;box-shadow:0 0 0 hsla(0,0%,94.5%,0)}1%{-webkit-transform:scale(.96) translateY(10px);transform:scale(.96) translateY(10px);opacity:0;box-shadow:0 0 0 hsla(0,0%,94.5%,0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);opacity:1;box-shadow:0 0 500px hsla(0,0%,94.5%,0)}}.signup-form{width:100%;height:100%}.signup-form .input-span{margin-left:60px;margin-top:10px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-btn-container{display:-webkit-flex;display:flex;-webkit-justify-content:space-evenly;justify-content:space-evenly;-webkit-align-items:center;align-items:center;margin-top:80px}.input-btn-container .nextBtn,.input-btn-container .prevBtn,.input-btn-container .signup-btn{color:#d40000;background:transparent;border:2px solid red;border-radius:4px;padding:8px 18px;font-size:1.125rem;transition:.2s;cursor:pointer}.input-btn-container .nextBtn:hover,.input-btn-container .prevBtn:hover,.input-btn-container .signup-btn:hover{color:#e7e6dd;background-color:#d40000;border-radius:4px;transition:.4s}.signup-content{width:100%;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;margin-top:80px}.signup-content .signup-input{position:relative;font-size:1.125rem;width:80%;padding:6px 12px;border-bottom:2px solid grey;margin:0}.signup-content .underline{margin-top:34px;height:2px;width:76%}.signup-content .underline,.signup-content .underline:before{position:absolute;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.signup-content .underline:before{content:"";height:100%;width:100%;background:red;-webkit-transform:scaleX(0);transform:scaleX(0)}.signup-content input:focus~.underline:before,.signup-content input:valid~.underline:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.nav-bar{grid-column:1/11;height:100px;display:grid;grid-template-columns:repeat(10,10%);-webkit-align-content:center;align-content:center;font-size:1.125rem;font-family:"Montserrat",sans-serif;position:relative}.navbar-logo{grid-column:1;color:#d40000;cursor:pointer;place-self:center;transition:.4s}.navbar-logo:hover{color:#ff9201;transition:.4s}.nav-menu{grid-column:4/8;grid-gap:10px;height:100%;list-style:none;text-align:center;place-self:center;border-bottom:2px solid red}.nav-links,.nav-menu li{text-decoration:none}.nav-links{color:#d40000;padding:.5rem 1rem;transition:.4s;font-size:1.125rem}.nav-links:hover{color:#000;transition:.4s;font-weight:800}.hamburger-menu{display:none}.btn-container{grid-column:9/11;place-self:center}.btn-container button{color:#d40000;font-size:1.125rem;margin-right:40px;cursor:pointer}.btn-container .signup-btn{border-radius:4px;border:2px solid red;background:transparent;padding:8px 14px;color:#d40000;transition:.4s}.btn-container .signup-btn:hover{border-radius:4px;color:#e7e6dd;background-color:#d40000;transition:.4s}.btn-container .login-btn{padding:4px 14px;color:#d40000}.logo-img{grid-column:5/7;grid-row:3/7;display:grid;position:relative}.logo-img img{width:90%;place-self:center}.mobile-img{grid-column:1/5;grid-row:4/11;display:grid;position:relative}.mobile-img img{place-self:center}.stores-img{width:100%;height:100%;grid-column:4/8;grid-row:8/11;display:grid;position:relative}.stores-img img{place-self:center;width:45%}.home-content{grid-column:2/4;grid-row:3/9;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;position:relative}.home-content .tag-line{color:#d40000}.home-content .message{margin-top:40px;font-size:1.125rem}.card-a{grid-column:8/10;grid-row:3/5;display:grid;grid-template-rows:repeat 3,90% 5% 5%;padding:12px 18px;border-radius:8px;position:relative}.card-a img{place-self:center;width:40%}.card-a .textContent{grid-row:1}.card-a .textContent h3{color:#d40000}.card-a .textContent span{font-size:1rem}.card-a .creditCards{grid-row:2;place-self:center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;width:40%}.card-a .creditCards img:not(last-child){margin-top:45px;margin-right:20px}.card-a .wallets{grid-row:3;place-self:center;display:-webkit-flex;display:flex;width:60%}.card-a .wallets img:not(last-child){margin-right:20px}.card-b{grid-column:8/10;grid-row:6/9;display:grid;grid-template-rows:25% 75%;padding:12px 18px;position:relative}.card-b img{place-self:center;width:40%}.card-b .textContentB{grid-row:1}.card-b .textContentB h3{color:#d40000}.card-b .textContentB span{font-size:1rem}.card-b .security{grid-row:2;place-self:center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;width:40%}.card-b .security img:not(last-child){margin-right:20px}.Home{display:grid;grid-template-columns:repeat(10,10%);grid-template-rows:repeat(10,10%);width:100%;height:100vh;font-family:"Montserrat",sans-serif;background-color:#e7e6dd;position:relative}.Home:before{content:"";background-image:url(/static/media/test2.37fedffc.jpg);background-size:cover;background-position:50%;background-repeat:no-repeat;position:absolute;border-radius:4px;top:0;right:0;bottom:0;left:0;opacity:.4}.profile-container{grid-column:1/17;grid-row:1/4;display:grid;place-items:center}.profile-bar{width:90%;height:80px;display:grid;grid-template-columns:repeat(16,6.25%);position:relative;border:1px solid grey;border-radius:4px;box-shadow:0 0 18px -1px #2e2e2e}.profile-bar .profile-logo{grid-column:1/3;place-self:center;color:#d40000}.profile-bar .profile-name{grid-column:3/7;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;place-items:center}.profile-bar .profile-name h2{color:#d40000}.profile-bar .profile-name h1{font-weight:400;margin-left:10px}.profile-bar .profile-number{grid-column:7/11;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;place-items:center}.profile-bar .profile-number h4{color:#d40000}.profile-bar .profile-number h2{margin-left:10px;font-weight:400}.profile-bar .profile-balance{grid-column:11/14;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;place-items:center}.profile-bar .profile-balance h4{color:#d40000}.profile-bar .profile-balance h2{margin-left:10px;font-weight:400}.profile-bar .profile-btn{position:relative;grid-column:14/17;place-self:center}.profile-bar .profile-btn .logout-btn{padding:8px 18px;color:#d40000;font-size:1.125rem;transition:.4s;cursor:pointer}.profile-bar:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;opacity:.25}.sm-container{grid-column:6/9;grid-row:4/8;padding:0 40px;position:relative;display:grid;place-items:center}.sm-container .sm-form{position:relative;width:100%;height:100%;border:1px solid grey;border-radius:4px;box-shadow:0 0 18px -1px #2e2e2e;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-around;justify-content:space-around;margin-left:30px}.sm-container .sm-form h3{position:relative;margin-left:20px;color:#000}.sm-container .sm-form h3 i{color:#d40000;margin-right:12px;font-size:1.5rem}.sm-container .sm-form .sm-input-container{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center}.sm-container .sm-form .sm-input-container .recipient{position:relative;margin-bottom:20px}.sm-container .sm-form .sm-input-container .recipient .sm-input{border:1px solid grey;border-radius:4px;background:#e7e6dd;padding:4px 8px;font-size:1rem}.sm-container .sm-form .sm-input-container .recipient .sm-input:focus{border:1px solid #d40000}.sm-container .sm-form .sm-input-container .amount{position:relative;margin-bottom:20px}.sm-container .sm-form .sm-input-container .amount .sm-input{border:1px solid grey;border-radius:4px;background:#e7e6dd;padding:4px 8px;font-size:1rem}.sm-container .sm-form .sm-input-container .amount .sm-input:focus{border:1px solid #d40000}.sm-container .sm-form .sm-input-container .sm-btn{position:relative;padding:4px 12px;border-radius:4px;font-size:1.125rem;color:#d40000;cursor:pointer;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.sm-container .sm-form .sm-input-container .sm-btn:active{-webkit-transform:translateY(3px);transform:translateY(3px)}.sm-container .sm-form:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;opacity:.25}.am-container{grid-column:9/12;grid-row:4/8;padding:0 40px;position:relative;display:grid;place-items:center}.am-container .am-form{position:relative;width:100%;height:100%;border:1px solid grey;border-radius:4px;box-shadow:0 0 18px -1px #2e2e2e;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-around;justify-content:space-around;margin-right:30px}.am-container .am-form h3{position:relative;margin-left:20px;color:#000}.am-container .am-form h3 i{color:#d40000;margin-right:12px;font-size:1.5rem}.am-container .am-form .am-input-container{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center}.am-container .am-form .am-input-container .am-dropdown{position:relative;margin-bottom:20px}.am-container .am-form .am-input-container .am-dropdown .am-option{border:1px solid grey;border-radius:4px;background:#e7e6dd;padding:4px 23px;font-size:1rem}.am-container .am-form .am-input-container .amount{position:relative;margin-bottom:20px}.am-container .am-form .am-input-container .amount .am-input{border:1px solid grey;border-radius:4px;background:#e7e6dd;padding:4px 8px;font-size:1rem}.am-container .am-form .am-input-container .amount .am-input:focus{border:1px solid #d40000}.am-container .am-form .am-input-container .am-btn{position:relative;padding:4px 12px;border-radius:4px;font-size:1.125rem;color:#d40000;cursor:pointer;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.am-container .am-form .am-input-container .am-btn:active{-webkit-transform:translateY(3px);transform:translateY(3px)}.am-container .am-form:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;opacity:.25}.history-container{grid-column:6/12;grid-row:9/16;padding:0 60px}.history-container,.history-container .history-list{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column}.history-container .history-list{padding:20px;width:100%;height:100%;border:1px solid grey;border-radius:4px;box-shadow:0 0 18px -1px #2e2e2e}.history-container .history-list h1{margin-top:40px;margin-left:40px}.history-container .history-list h2{grid-row:1;position:relative;margin-left:20px;color:#000}.history-container .history-list h2 i{color:#d40000;margin-right:12px;font-size:1.5rem}.history-container .history-list .history-details{width:100%;margin-top:10px}.history-container .history-list .history-details ul{list-style-type:none;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}.history-container .history-list .history-details ul li{border-bottom:1px solid grey;font-size:.75rem;padding:15px;display:grid;grid-template-columns:100px 100px 100px 100px 100px;place-items:center}.history-container .history-list .history-details ul li .type{grid-column:1}.history-container .history-list .history-details ul li .source{grid-column:2;font-weight:400}.history-container .history-list .history-details ul li .amount{grid-column:3}.history-container .history-list .history-details ul li .date{grid-column:4;font-weight:400}.history-container .history-list .history-details ul li .time{grid-column:5;font-weight:400}.history-container .history-list:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;opacity:.25}.wrapper{grid-column:12/16;grid-row:4/16;width:100%;height:100%;border:1px solid grey;border-radius:4px;box-shadow:0 0 18px -1px #2e2e2e;position:relative;display:grid;grid-template-columns:80% 20%;grid-template-rows:40% 60%}.wrapper .subscription{place-self:center;grid-column:1/3;grid-row:2;width:80%;height:100%;border-top:1px solid #d40000;padding:20px 10px}.wrapper .subscription i{color:#d40000}.wrapper .subscription .items{margin-top:20px;border-bottom:1px solid grey;width:100%;height:60px;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;place-items:center}.wrapper .subscription .items i{font-size:2rem}.wrapper .subscription .items:nth-child(2) i{color:#1db954}.wrapper .subscription .items:nth-child(4) i{color:#ff9201}.wrapper .subscription .items:nth-child(5) i{color:#7289da}.wrapper .shop-icons{margin-right:45px;place-self:center;grid-column:2;grid-row:1;position:relative;padding:12px 4px;cursor:pointer}.wrapper .shop-icons,.wrapper .shop-icons .icon-name{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column}.wrapper .shop-icons .icon-name{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-align-items:center;align-items:center;padding:10px 0}.wrapper .shop-icons .icon-name i{font-size:1.5rem;text-align:center;margin-bottom:8px}.wrapper .shop-icons .icon-name:hover{color:#ff9201}.wrapper .cc{place-self:center;grid-column:1;grid-row:1;position:relative;font-family:"Montserrat",sans-serif;font-size:16px;color:#fff;width:295px;height:174px;border-radius:16px;box-shadow:0 0 18px -1px #2e2e2e}.wrapper .cc.visa{background-image:linear-gradient(to top right,#52b6fe,#6154fe)}.wrapper .cc.mastercard{background-image:linear-gradient(to top right,#843e3d,#040b2e)}.wrapper .cc:after{content:"";position:absolute;width:100%;height:100%;border-radius:16px;background-image:linear-gradient(0deg,transparent,#fff);opacity:1%}.wrapper .cc svg{position:absolute;top:80px}.wrapper .cc svg path{fill:transparent;stroke:#fff;stroke-width:2px;stroke-linecap:round}.wrapper .cc .container{position:absolute;top:25px;left:25px;right:25px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between}.wrapper .cc .holder{position:absolute;bottom:25px;left:25px}.wrapper .cc .holder span{display:block}.wrapper .cc .holder span.name{font-size:14px;color:#ccc}.wrapper .cc .holder span.number{font-weight:500}.menu-container{position:relative;grid-column:2/6;grid-row:4/8;padding:10px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-evenly;justify-content:space-evenly;border:1px solid grey;border-radius:4px;box-shadow:0 0 18px -1px #2e2e2e}.menu-container .time-container{border-bottom:1.5px solid #d40000;display:grid;grid-template-columns:60% 40%;padding:20px 0}.menu-container .time-container .date{grid-column:1;place-self:center}.menu-container .time-container .time{grid-column:2;place-self:center}.menu-container .menu-icons{position:relative;display:-webkit-flex;display:flex;-webkit-justify-content:space-evenly;justify-content:space-evenly;padding:12px 4px;cursor:pointer}.menu-container .menu-icons .icon-name{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center}.menu-container .menu-icons .icon-name i{font-size:1.5rem;text-align:center;margin-bottom:8px}.menu-container .menu-icons .icon-name:first-child{color:#d40000}.menu-container .menu-icons .icon-name:hover:not(:first-child){color:#ff9201}.wip-img{grid-column:2/6;grid-row:10/17}.wip-img img{width:80%}.Wallet{display:grid;grid-template-columns:repeat(16,6.25%);grid-template-rows:repeat(16,6.25%);width:100%;height:100vh;font-family:"Montserrat",sans-serif;position:relative}.Wallet,.Wallet:before{background-color:#e7e6dd}.Wallet:before{content:"";position:absolute;border-radius:4px;top:0;right:0;bottom:0;left:0;opacity:.2}
/*# sourceMappingURL=main.3b227faa.chunk.css.map */