@charset "UTF-8";

/* Headers & Paragraphs */

h2 {
	font-family: 'Quicksand', sans-serif;
	font-size: 25px;
	font-weight: 400;
}

h3 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	margin-block-start: 0;
    margin-block-end: 5px;
}

h4 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 13px;
	color: #00000;
	margin-block-start: 0;
    margin-block-end: 5px;
}

h5 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 11px;
	color: #7E7E7E;
	margin-block-start: 0;
    margin-block-end: 0;
}

/* Navbar */

.navbar-div {
	position: absolute;
	text-align: center;
	align-items: center;
	width:393px;
	height: 100px;
	justify-content: center;
	z-index: 200;
}


.navbar2 {
	position: absolute;
	text-align: center;
	margin-left: 11px;
	margin-bottom: 50px;
	
}

.navbar1 {
	margin-top: 15px;
	
}

.icons {
	position: absolute;
	display: flex;
	margin-top: 40px;
	margin-left: 40px;
	justify-content: center;
	align-items: center;
	column-gap: 30px;
}

.stats-icon {
	margin-left: 110px;
	
}

.transfersbutton{
	background-color: #000000;
	color: #FFFFFF;
	width: 100px;
	height: 40px;
	border-radius: 30px;
	border: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 14px;
	z-index: 30;
}

.transfersbutton:hover {
	background-color: #5E5E5E;
	transition: 0.2s
}

.empty {
	height: 40px;
}

/* Intro Page */

.main-intro {
	align-items: center;
	background-color:#FBF7F7;
	height: 852px;
	width:393px;
	margin:auto;
	clip-path: inset(0px 0px 20px 0px);
	
}

.signin {
	text-align: center;
	padding-top: 230px;
}

.dot1 {
	position: absolute;
	padding-left: 270px;
	padding-top: 50px;
}

.dot2 {
	position: absolute;
	padding-left: 40px;
	padding-top: 650px;
	
}

.dot3 {
	position: absolute;
	padding-left: 270px;
	padding-top: 470px;
}

.dot4 {
	position: absolute;
	padding-left: 40px;
	padding-top: 250px;
}

.tagline{
	position: absolute;
	padding-left: 220px;
	padding-top: 590px;
}

.welcome {
	position: absolute;
	padding-top: 240px;
	padding-left: 40px;
}

/* Home Page */

.main-home {
	align-items: center;
	background-color:#FBF7F7;
	height: 852px; /*852px*/
	width:393px;
	margin:auto;
	clip-path: inset(0px 0px 20px 0px);
	
}

.home-column1 {
	display: flex;
	column-gap: 30px;
	align-items: center;
	padding-top: 50px;
}

.helloaudrey{
	margin-left: 50px;
}

.walletbuttons {
	width: 156px;
	margin-left: 30px;
	column-gap: none;
}

.buttonmovement {
	padding-left: 10px;
	height: 7px;
	transition: 0.2s;
}

.buttonmovement:hover {
	padding-left: 30px;
	transition: 0.3s;
}

.home-column2 {
	display: flex;
	column-gap: 35px;
	margin-left: 50px;
	margin-top: 50px;
}

.home-column3 {
	position: absolute;
	z-index: 10;
	margin-top: 712px;
}

/* Home Buttons */

.btn-wallet1 {
	background-color: #F2421B;
	color: #FFFFFF;
	width: 135px;
	height: 35px;
	border-radius: 30px;
	border: none;
	box-shadow: inset 0 0 10px #CB2E0C;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 11px;
}



.btn-wallet2 {
	background-color: #1737A9;
	color: #FFFFFF;
	width: 135px;
	height: 35px;
	border-radius: 30px;
	border: none;
	box-shadow: inset 0 0 10px #052183;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 11px;
}

.btn-wallet3 {
	background-color: #FCD201;
	color: #FFFFFF;
	width: 135px;
	height: 35px;
	border-radius: 30px;
	border: none;
	box-shadow: inset 0 0 10px #E0BB00;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 11px;
}


.btn-wallet1:hover {
	background-color: #CB2E0C;
	transition: 0.2s;
}

.btn-wallet2:hover {
	background-color: #052183;
	transition: 0.2s;
}

.btn-wallet3:hover {
	background-color: #E0BB00;
	transition: 0.2s;
}

.transferbutton:hover {
	padding-top: 10px;
	padding-bottom: 10px;
	transition: all 0.4s;
}


.transferbutton{
	transition: all 0.4s;
}

/* My Wallet Page */

.main-mywallet {
	align-items: center;
	background-color:#FBF7F7;
	height: 852px;
	width:393px;
	margin:auto;
	clip-path: inset(0px 0px 20px 0px);
	
}

.mywallet-column1 {
	position: absolute;
	z-index: 10;
	align-items: center;
	
}

.mywallet-column2 {
	width:320px;
	align-items: center;
	justify-content: center;
	margin-left:40px;
	padding-top: 150px;
	
}

.bluewallets {
	margin-left:5px;
}


.mywallet-column3 {
	margin-left:40px;
}

.mywallet-column4 {
    position: absolute;
    z-index: 10;
    margin-top: 550px;
    top: 9px;
}

.trend {
	width:35px;
}

.transactionlist {
	display: flex;
}

.money{
	align-items:flex-start;
	justify-content: flex-start;
	margin-left: 20px;
}
.whitesquare {
	background-color: #FFFFFF;
	position: absolute;
	width: 393px;
	height: 15px;
	padding-top:160px;
	z-index: 10;
}


/* QR Code Page */
.main-qrcode {
	align-items: center;
	background-color:#FBF7F7;
	height: 852px;
	width:393px;
	margin:auto;
	clip-path: inset(0px 0px 20px 0px);
	
}

.qrcode-column1 {
	position: absolute;
	z-index: 10;
	align-items: center;
	
}

.qrcode-column2 {
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 160px;
}

.btn-qrcode {
	background-color: #F2421B;
	color: #FFFFFF;
	width: 184px;
	height: 50px;
	border-radius: 30px;
	border: none;
	box-shadow: inset 0 0 7px #CB2E0C;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 15px;
}
.btn-qrcode:hover {
	background-color: #CB2E0C;
	transition: 0.2s;
}

/* Profile Page */

.main-profile {
	align-items: center;
	background-color:#FBF7F7;
	height: 852px;
	width:393px;
	margin:auto;
	clip-path: inset(0px 0px 20px 0px);
	
}

.profile-column1 {
	position: absolute;
	z-index: 10;
	align-items: center;
	
}

.profile-column2 {
	padding-top: 70px;
	text-align: center;
}

.profile-column3 {
	position: absolute;
	z-index: 11;
	margin-top: 110px;
	margin-left: 40px;
	display: flex;
	column-gap: 20px;
}

.loginstatus {
	padding-top: 10px;
}

.btn-profile {
	background-color: #01773E;
	color: #FFFFFF;
	width: 184px;
	height: 50px;
	border-radius: 30px;
	border: none;
	box-shadow: inset 0 0 7px #004B27;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 15px;
	transition: 0.2s;
}

.btn-profile:hover {
	background-color: #004B27;
	transition: 0.2s;
}

/* Scan Page */

.scanphoto {
	position: absolute;
	width:393px;
	height:852px;
	z-index: -5;
}

.main-scan {
	align-items: center;
	background-color:none;
	height: 852px;
	width:393px;
	margin:auto;
	clip-path: inset(0px 0px 20px 0px);
	
}

.scan-column3 {
	position: absolute;
	z-index: 10;
	align-items: center;
	text-align: center;
	padding-left: 100px;
	padding-top: 40px;
	
}

.scan-column1 {
	position: absolute;
	padding-top: 620px;
}

.whiteblur {
	height: 235px;
}

.scan-column2 {
	padding-top: 200px;
	padding-left: 75px;
}


.scan-column4 {
	padding-top: 200px;
	position: absolute;
	padding-left: 50px;
}


/* Monthly Statistics Page */

.main-statisticsmonthly {
	align-items: center;
	background-color:#FBF7F7;
	height: 852px;
	width:393px;
	margin:auto;
	clip-path: inset(0px 0px 20px 0px);
	
}

.statsmonthly-column1 {
	z-index:30;
	
}

.statsmonthly-column2 {
	padding-left: 40px;
	padding-top: 30px;
	
}

.blueslider {
	z-index: 2;
	position: absolute;
	padding-left: 135px;
	padding-top: 25px;
}

.slidertext {
	z-index: 5;
	position: absolute;
	padding-left: 40px;
	padding-top: 45px;
}

.statsmonthly-column3 {
	padding-top: 20px;
	text-align: center;
	
}

/* Wallet Selection Page */

.main-walletselection {
	align-items: center;
	background-color:#FBF7F7;
	height: 852px;
	width:393px;
	margin:auto;
	clip-path: inset(0px 0px 20px 0px);
}

.selectwallets {
	position: absolute;
	margin-left: 500px;
	
}

.wallettext{
	position: absolute;
	padding-left: 120px;
	padding-top: 70px;
	z-index: 30;
}

.walletbutton {
	position: absolute;
	background-color: #000000;
	color: #FFFFFF;
	width: 88px;
	height: 35px;
	border-radius: 30px;
	border: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 14px;
	box-shadow: 0px 5px 15px grey;
	margin-left: 150px;
	margin-top: 340px;
	z-index: 30;
}

.walletbutton:hover {
	background-color: #5E5E5E;
	transition: all 0.2s
}

/* Transfer 1 Page */
.main-transfer {
	align-items: center;
	background-color:#FBF7F7;
	height: 852px;
	width:393px;
	margin:auto;
	text-align: center;
	clip-path: inset(0px 0px 20px 0px);
}

.back {
	position: absolute;
	z-index: 5;
	padding-left: 30px;
	padding-top: 68px;
}

/* Transfer Successful Page */

.main-transfersuccessful {
	align-items: center;
	background-color:#FFFFFF;
	height: 852px;
	width:393px;
	margin:auto;
	text-align: center;
	clip-path: inset(0px 0px 20px 0px);
}

.transferbuttons {
	display: flex;
	text-align: center;
	align-content: center;
	justify-content: center;
	column-gap: 10px;
	z-index: 30;
}

.ellipses {
	position: absolute;
}


.ellipse1 {
	position: absolute;
	padding-top: 770px;
	padding-left: 20px;
	z-index: -3;
}


.ellipse2 {
	position: absolute;
	margin-left: 280px;
	margin-top: -80px;
	z-index: 30;
}


.ellipse3 {
	position: absolute;
	margin-top: -80px;
	z-index: 30;
}

/* Scan & QR Codes button */

.pay {
	z-index: 50;
	position: absolute;
	padding-top: 62px;
	padding-left: 145px;
	
}

.receive {
	z-index: 50;
	position: absolute;
	margin-top: 62px;
	margin-left: 255px;
	
}


.receivepay {
	z-index: 40;
	position: absolute;
	padding-left: 150px;
	padding-top: 65px;
}


/* Logout */

.logout {
	z-index: 90;
	position: absolute;
	padding-left: 200px;
	padding-top: 65px;
}

.bye {
	position: absolute;
	margin-left: 48px;
	margin-top: 250px;
}

.logo {
	position: absolute;
	margin-left: 200px;
	margin-top: 600px;
}

/* Statistics */

.path {
	position: absolute;
	z-index: 30;
	margin-top: 420px;
}

.stats-button1 {
	z-index: 50;
	position: absolute;
	width: 90px;
	height: 50px;
	background-color: none;
	margin-top: 152px;
	margin-left: 50px;
}


.stats-button2 {
	z-index: 50;
	position: absolute;
	width: 90px;
	height: 50px;
	background-color:none;
	margin-top: 152px;
	margin-left: 150px;
}


.stats-button3 {
	z-index: 50;
	position: absolute;
	width: 90px;
	height: 50px;
	background-color:none;
	margin-top: 152px;
	margin-left: 250px;
}

.blueslider-year {
	z-index: 2;
	position: absolute;
	padding-left: 238px;
	padding-top: 25px;
}


.blueslider-week {
	z-index: 2;
	position: absolute;
	padding-left: 30px;
	padding-top: 25px;
}

.reddot-week {
	position: absolute;
	padding-top: 380px;
	padding-left: 9px;
	z-index: 31;
	text-align: center;
	
}


.reddot-month {
	position: absolute;
	padding-top: 410px;
	padding-left: 7px;
	z-index: 31;
	text-align: center;
	
}


.reddot-year {
	position: absolute;
	padding-top: 405px;
	padding-left: 29px;
	z-index: 31;
	text-align: center;
	
}