#loadingScreen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000000000000000000;
  width: 100%;
    height: 100%;
  background-color: rgba(49, 47, 47, 0.5);
}

#loadingScreenContent{
  position: fixed;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: larger;
  font-weight: bolder;
  color: #fafafa;
}

.lds-hourglass {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
}

.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid rgb(72, 70, 70);
  border-color: rgb(49, 47, 47) transparent #99367D transparent;
  animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

body{
	color: black;
}

.outsideLoggedIn{
	max-width: 500px;
	margin: auto;
}

.cashbuddyIconInOutter{
	max-width: 250px;
	margin: auto;
}

.cashbuddyIconInOutter img{
	width: 100%;
}

.btn-home, .btn-home:hover{
	background: #7367F0;
	color: white;
}

.outterBody{
	height: 100vh;  
	background: linear-gradient(to right, #6f3490cc, #6f3490cc), url(../images/outter-body-background.jpg);
}

.form-control{
	font-weight: bold;
	height: 3.5rem;
}

b, strong, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, p, .p{
	color: black;
}

input[type="file"]{
	padding-top: 10px;
}

.card{
	box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072);
  color: black;
}

.cardFromDashboard{
	border-radius: 20px;
}

.cardContentPhase1FromDashboard{
	width: 80%;
	float: left;
	padding-right: 10px;
}

.cardSubContentTitle{
	font-size: 10px;
	font-weight: bolder;
}

.cardSubContentBody{
	font-size: 20px;
	position: relative;
	top: 5px;
	font-weight: bolder;
}

.cardIcons{
	width: 20%;
	float: right;
}

.iconBoxFromDashboard{
	width: 50px;
	height: 50px;
	margin: auto;
    border-radius: 50px
}

.iconBoxFromDashboard.first{
	background: #6302ac;
}

.iconBoxFromDashboard.second{
	background: #35A450;
}

.iconBoxFromDashboard.third{
	background: #8D52BA;
}

.innerIconFromDashboard{
	width: 30px;
    height: 30px;
    position: relative;
    top: 10px;
    left: 10px;
	color: white;
}


.cardContentPhase2FromDashboard{
	width: 20%;
	float: left;
}

.iconBoxFromDashboard.phase2{
	background: #fafafa;
	border-radius: 20px;
	width: 80px;
	height: 80px;
	box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072);
	cursor: pointer;
}

.iconBoxFromDashboard.phase2 .iconify{
    position: relative;
	top: 10px;
	left: 10px;
	width: 60px;
	height: 60px;
}

.iconBoxFromDashboard.phase2 .iconify.icon1{
    color: red;
}

.iconBoxFromDashboard.phase2 .iconify.icon2{
    color: black;
}

.iconBoxFromDashboard.phase2 .iconify.icon3{
    color: #8D0909;
}

.iconBoxFromDashboard.phase2 .iconify.icon4{
    color: #491371;
}

.iconBoxFromDashboard.phase2 .iconify.icon5{
    color: #300DBF;
}

.iconBoxFromDashboard.phase2 .iconify.icon6{
    color: #CC1884;
}

.iconBoxFromDashboard.phase2 .iconify.icon7{
    color: #139C0E;
}

.iconBoxFromDashboard.phase2 .iconify.icon8{
    color: #0510AA;
}

.iconBoxFromDashboard.phase2 .iconify.icon9{
    color: #F5A608;
}

.iconBoxFromDashboard.phase2 .iconify.icon10{
    color: #040101;
}

.iconTextFromDashboard.phase2{
	font-size: 10px;
	text-align: center;
    bottom: 10px;
    position: relative;
    font-weight: bolder;
}

.bannerRef img{
	border-radius: 20px;
	width: 100%;
	height: 250px;
}


/*Input Image Radio*/
.imgRadio [type=radio] { 
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.imgRadio img {
	padding: 5px;
}

.imgRadio [type=radio] + img {
	cursor: pointer;
}

.imgRadio [type=radio]:checked + img {
	outline: 2px solid tomato;
}


/**Airtime to Cash page**/
.networkOperatorsFromAirtime{
	width: 20%;
	float: left;
	text-align: center;
}
.networkOperatorsFromAirtime img{
	cursor: pointer;
	border-radius: 10px;
}

.networkOperators{
	width: 25%;
	float: left;
	text-align: center;
}
.networkOperators img{
	cursor: pointer;
	border-radius: 10px;
}

.cardFromDashboard.otherDetails{
	background: #F1EEEE;
}

.otherDetailsFromAirtimeToCash .title{
	font-size: 12px;
	font-weight: bold;
}

.otherDetailsToRightFromAirtimeToCash{
	float: right;
}

.buttonDescFromAirtimeToCash{
	color: #240651;
}


.buttonFromAirtimeToCash{
	background: #240651;
	color: #ffffff;
	width: 50%;
	border-radius: 20px;
	margin: auto;
}

/**Airtime page**/
.phoneNumberFromAirtime{
	width: 100%;
}

.phoneNumberInputFromAirtime input{
	padding-right: 60px;
}

.phoneNumberIconFromAirtime{
	float: right;
	position: relative;
	right: 20px;
	bottom: 48px;
	font-size: 30px;
	color: #6302AC;
	margin-bottom: -43px;
}

.amountListFromAirtime{
	width: 25%;
	float: left;
}

.actualAmountFromAirtime{
	margin: auto;
	text-align: center;
	background: #fafafa;
	border-radius: 20px;
	width: 70%;
	height: 50px;
	box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072);
	cursor: pointer;
}

.actualAmountFromAirtime p{
	position: relative;
    top: 15px;
	color: #000000;
	font-weight: bolder;
}

.amountListFromAirtime.first, .amountListFromAirtime.second, .amountListFromAirtime.third, .amountListFromAirtime.forth{
	margin-bottom: 10px;
}


.amountEnteredFromAirtime{
	width: 100%;
}

.amountEnteredLeftIconFromAirtime{
	float: left;
    position: relative;
    left: 10px;
    top: 10px;
    font-size: 20px;
    color: #6302AC;
    margin-bottom: -43px;
}

.amountEnteredInputFromAirtime input{
	padding: 0px 50px 0px 40px;
}

.amountEnteredRightIconFromAirtime{
	float: right;
	position: relative;
	right: 20px;
	bottom: 48px;
	font-size: 30px;
	color: #6302AC;
	margin-bottom: -43px;
}

.submitBtnFromAirtime{
	background: #240651;
	color: #ffffff;
	width: 400px;
	border-radius: 20px;
	padding: 10px;
	margin: auto;
}


/**Data page**/
.networkOperatorsFromData{
	width: 16.66%;
	float: left;
	text-align: center;
}

.networkOperatorsFromData img{
	cursor: pointer;
}

.amountEnteredFromData{
	width: 100%;
}

.amountEnteredInputFromData input{
	padding: 0px 0px 0px 0px;
}




/**Fundraising page**/
.topCardFromFundraising{
	background: #6302AC;
	height: 70px;
}

.btn1FromFundraising{
	background: #32DD54;
	color: white;
}

.btn2FromFundraising{
	background: #6302ac;
	color: white;
}

.btn3FromFundraising{
	background: red;
	color: white;
	float: right;
}

.btn4FromFundraising{
	background: #6302ac;
	color: white;
	float: left;
}

.textarea1FromFundraising{
	width: 100%;
	max-height: 150px;
    min-height: 150px;
}


/**Fundraising homepage**/
.fundraisingHomepageTopCard{
	width: 100%;
}

.fundraisingHomepageTopCard .btn1{
	width: 50%;
	float: left;
}

.fundraisingHomepageTopCard .btn2{
	width: 50%;
	float: left;
}

.fundraisingHomepageTopCard .btn2 button{
	float: right;
}

.cardheaderFromFundRaisingHomepage{
	margin: 0px;
}

.defaultBodyFromFundRaisingHomepage{
	max-height: 200px;
	height: 200px;
	overflow: auto;
}

.loadingBarFromFundRaisingHomepage .progress{
	width: 100%;
	height: 50px;
	margin: 0;
}

.loadingBarFromFundRaisingHomepage .progress-bar{
	background: #5D0560;
}

.moreInfoFromFundRaisingHomepage{
	width: 90%;
	margin: auto;
}

.moreInfoFromFundRaisingHomepage .text1{
	width: 50%;
	float: left;
}

.moreInfoFromFundRaisingHomepage .text2{
	width: 50%;
	float: left;
}

.moreInfoFromFundRaisingHomepage .text2 .p2{
	float: right;
}


/*Electricity page*/
.accountTypeFromElectricity{
	width: 100%;
}

.accountTypeInputFromElectricity input{
	padding: 0px 0px 0px 0px;
}


/*Cable page*/
.networkOperatorsFromCable{
	width: 33.33%;
	float: left;
	text-align: center;
}

.networkOperatorsFromCable img{
	cursor: pointer;
	border-radius: 10px;
}

.inputWithShadow{
	box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034);
}

/*Betting page*/
.networkOperatorsFromBetting{
	width: 20%;
	float: left;
	text-align: center;
}

.networkOperatorsFromBetting img{
	cursor: pointer;
}

/*Savings page*/
.boxFromSavings{
	border-radius: 20px;
	box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072);
}

.boxFromSavings .boxContentFromSavings.first{
	width: 40%;
	float: left;
	padding-left: 20px;
}

.boxFromSavings .boxContentFromSavings.second{
	width: 55%;
    float: left;
    padding-top: 20px;
}

.boxFromSavings .boxContentFromSavings.first .textContent{
	padding-left: 10px;
}

.smartCardFromSavings{
    width: 50%;
	float: left;
}

.smartCardFromSavings .adaptiveCard{
	width: 80%;
    height: 50px;
    margin: auto;
    color: white;
    text-align: center;
    border-radius: 10px;
}

.smartCardFromSavings .adaptiveCard.first{
    background: #F10606;
}

.smartCardFromSavings .adaptiveCard.second{
    background: #0BA500;
}

.smartCardFromSavings span{
	position: relative;
	top: 15px;
}

.smartCardFromSavings .iconify{
	width: 20px;
    height: 20px;
	color: white;
	position: relative;
	top: 15px;
}

.amountEnteredFromSavings{
	width: 100%;
}

.amountEnteredLeftIconFromSavings{
	float: left;
    position: relative;
    left: 10px;
    top: 11px;
    font-size: 20px;
    color: #6302AC;
    margin-bottom: -43px;
}

.amountEnteredInputFromSavings input{
	padding: 0px 10px 0px 40px;
}

/*Transfer page*/
.boxContentFromTransfer{
	width: 50%;
	float: left;
	padding: 20px;
}

.boxContentFromTransfer .buttonBoxFromTransfer{
	width: 80%;
	margin: auto;
}

.boxContentFromTransfer .buttonBoxFromTransfer button{
	height: 50px;
}

.boxContentFromTransfer .buttonBoxFromTransfer button.first{
	background: #EBEBEB;
}

.boxContentFromTransfer .buttonBoxFromTransfer button.second{
	background: #FCF5F5;
}

.iconFromTransfer{
	color: #F10606;
	width: 20px;
	height: 20px;
}

.textareaFromTransfer{
	width: 100%;
	max-height: 100px;
    min-height: 100px;
}

/*Withdrawal page*/
.boxContentFromTransfer .buttonBoxFromTransfer button.ForWithdrawal{
	color: white;
}

.boxContentFromTransfer .buttonBoxFromTransfer button.ForWithdrawal.first{
	background: #fafafa;
	color: black;
}

.boxContentFromTransfer .buttonBoxFromTransfer button.ForWithdrawal.second{
	background: #fafafa;
	color: black;
}

.ForWithdrawalIcon{
	width: 20px;
	height: 20px;
}

.ForWithdrawalIcon.first{
	color: #f74444;
}

.ForWithdrawalIcon.second{
	color: #19B06A;
}

/*Add Money page*/
.boxContentFromTransfer .buttonBoxFromTransfer button.ForAddMoney.first{
	background: #FBECEC;
}

.boxContentFromTransfer .buttonBoxFromTransfer button.ForAddMoney.second{
	background: #BDF3D2;
}

/*Card page*/
.btn1FromCard{
	background: #41057D;
	color: white;
}

.btn2FromCard{
	background: #534E4E;
	color: white;
}

.cardBoxFromCard{
	height: 290px;
    background: #442E61;
    width: 500px;
    border-radius: 20px;
}

.cardBoxFromCard .cardInnerFromCard{
	padding: 20px;
}

.cardBoxFromCard .cardInnerFromCard .topLogoIcons{
	display: grid;
	grid-template-columns: 90% 10%;
}

.cardBoxFromCard .cardInnerFromCard .topLogoIcons .cashLogo img{
	max-width: 150px;
}

.cardBoxFromCard .cardInnerFromCard .creditCardChip img{
	max-width: 80px;
}

.cardBoxFromCard .cardInnerFromCard .cardPinFromCard{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}

.cardBoxFromCard .cardInnerFromCard .cardPinFromCard p{
	color: white;
	font-family: Montserrat, Helvetica, Arial, serif;
	font-weight: 400;
	font-size: 25px;
	text-align: center;
}

.cardBoxFromCard .cardInnerFromCard .cardCVVFrontFromCard{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}

.cardBoxFromCard .cardInnerFromCard .cardCVVFrontFromCard p{
	color: white;
	font-family: Montserrat, Helvetica, Arial, serif;
	font-weight: 400;
	text-align: center;
}

.cardBoxFromCard .cardInnerFromCard .cardDateFromCard{
	display: flex;
	float: right;
	color: white;
}

.cardBoxFromCard .cardInnerFromCard .cardDateFromCard .arrowTriangle{
	margin: auto;
}

.cardBoxFromCard .cardInnerFromCard .cardDateFromCard .arrowTriangle .iconify{
	width: 20px;
}

.cardBoxFromCard .cardInnerFromCard .cardDateFromCard .validityInText{
	color: #afafaf;
}

.cardBoxFromCard .cardInnerFromCard .cardDateFromCard .dateOfExpiry{
	font-size: 20px;
	font-family: Montserrat, Helvetica, Arial, serif;
	font-weight: 400;
	margin: auto;
    font-weight: lighter;
	letter-spacing: 3px;
}


/*Card 2 page*/
.cardBoxFromCard2{
	height: 250px;
    background: #442E61;
    max-width: 500px;
    border-radius: 20px;
}

.cardBoxFromCard2 .cardInnerFromCard2{
	transition: all 0.75s ease;
	transform-style: preserve-3d;
}

.cardBoxFromCard2:hover .cardInnerFromCard2 {
	transform: rotateY(180deg);
}

.cardBoxFromCard2 .cardInnerFromCard2 .frontCardPage{
	backface-visibility: hidden;
	position: absolute;
	top: 20px;
	left: 10px;
	right: 10px;
	bottom: 0px;
}

.cardBoxFromCard2 .cardInnerFromCard2 .backCardPage{
	backface-visibility: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding: 0px 20px;
}

.cardBoxFromCard2 .cardInnerFromCard2 .backCardPage {
  transform: rotateY(180deg);
}

.cardBoxFromCard2 .cardInnerFromCard2 .topLogoIcons2{
	display: grid;
	grid-template-columns: 20% 80%;
}

.cardBoxFromCard2 .cardInnerFromCard2 .topLogoIcons2 .cashBalance{
	color: white;
	font-weight: bold;
	font-size: 16px;
}

.cardBoxFromCard2 .cardInnerFromCard2 .topLogoIcons2 .cashLogo img{
	max-width: 150px;
	float: right;
}

.cardBoxFromCard2 .cardInnerFromCard2 .poweredBy{
	float: right;
	font-size: 11px;
	padding-right: 25px;
}

.cardBoxFromCard2 .cardInnerFromCard2 .poweredBy img{
	width: 30px;
}

.cardBoxFromCard2 .cardInnerFromCard2 .cardPinFromCard2{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}

.cardBoxFromCard2 .cardInnerFromCard2 .cardPinFromCard2 p{
	color: white;
	font-family: Montserrat, Helvetica, Arial, serif;
	font-weight: 400;
	font-size: 25px;
	text-align: center;
}

.cardBoxFromCard2 .cardInnerFromCard2 .cardDateAndUsername{
	display: grid;
	grid-template-columns: 80% 20%;
	color: white;
}

.cardBoxFromCard2 .cardInnerFromCard2 .cardDateAndUsername .first p{
	color: white;
	font-weight: bold;
	font-size: 15px;
	padding-top: 11px
}

.cardBoxFromCard2 .cardInnerFromCard2 .cardDateAndUsername .second .dateOfExpiry{
	font-size: 15px;
	font-family: Montserrat, Helvetica, Arial, serif;
	font-weight: 400;
	margin: auto;
    font-weight: light;
	letter-spacing: 3px;
}

.cardBoxFromCard2 .cardInnerFromCard2 .cardDateAndUsername .second .validityInText{
	color: #afafaf;
}

.cardBackSlide{
	position: relative;
	top: 60px;
	height: 30px;
	background: #fafafa;
}

.cardBackSlide img{
	width: 60px;
    position: relative;
    bottom: 5px;
}

.cardBackSlide span{
	float: right;
	font-size: 15px;
    font-weight: bold;
    padding-right: 15px;
    position: relative;
    top: 5px;
}



/*Ugrade Account pag*/
.acctUpgradeTopBar{
	height: 50px;
	background: #1A079E;
	border-radius: 20px;
	color: white;
}

.acctUpgradeTopBar p{
	color: white;
	padding: 15px 0px 0px 20px;
	font-size: 20px;
	font-weight: bold;
}

.acctUpgradeTopBar .leftBar{
	width: 60%;
	float: left;
}

.acctUpgradeTopBar .rightBar{
	width: 40%;
	float: left;
}

.acctUpgradeTopBar .rightBar .topRightBar{
	float: right;
	padding: 10px 20px 0px 0px;
	font-size: 20px;
	font-weight: bold;
}

.acctUpgradeTopBar .rightBar .topRightBar .iconify{
	width: 30px;
	height: 30px;
	position: relative;
	bottom: 2px;
}

.planSelectionFromAcctUpgrade .box1{
	height: 350px;
	background: #EEA7F6;
	width: 90%;
	margin: auto;
	border-radius: 20px;
}

.planSelectionFromAcctUpgrade .box2{
	height: 350px;
	background: #7CC981;
	width: 90%;
	margin: auto;
	border-radius: 20px;
}

.planSelectionFromAcctUpgrade .box3{
	height: 350px;
	background: #7590E8;
	width: 90%;
	margin: auto;
	border-radius: 20px;
}

.planSelectionFromAcctUpgrade .amountAndYear{
	width: 85%;
	margin: auto;
	background: #5A058A;
	height: 50px;
	border-radius: 20px;
	font-size: 12px;
	color: white;
}

.planSelectionFromAcctUpgrade .amountAndYear.second{
	width: 85%;
	margin: auto;
	background: #00A410;
	height: 50px;
	border-radius: 20px;
	font-size: 12px;
	color: white;
}

.planSelectionFromAcctUpgrade .amountAndYear.third{
	width: 85%;
	margin: auto;
	background: #1129FF;
	height: 50px;
	border-radius: 20px;
	font-size: 12px;
	color: white;
}

.planSelectionFromAcctUpgrade .amountAndYear .someText{
	color: white;
	position: relative;
	top: 15px;
	text-align: center;
}

.planSelectionFromAcctUpgrade .amountAndYear .someText b{
	color: white;
}

.planSelectionFromAcctUpgrade .stageText{
	width: 90%;
	margin: auto;
}

.planSelectionFromAcctUpgrade .stageText p{
	color: white;
	text-align: center;
	font-weight: bold;
}

.planSelectionFromAcctUpgrade .stageBtn{
	width: 90%;
	margin: auto;
}

.planSelectionFromAcctUpgrade .stageBtn button.first{
	background: #5a058a;
}

.planSelectionFromAcctUpgrade .stageBtn button.second{
	background: #00A410;
}

.planSelectionFromAcctUpgrade .stageBtn button.third{
	background: #1129FF;
}

.planSelectionFromAcctUpgrade .stageBtn button .iconify{
	width: 20px;
	height: 20px;
	color: white;
}

.planSelectionFromAcctUpgrade .stageBtn button span b{
	color: white;
}

/*Profile page*/
.profileTopBar{
	border-radius: 20px;
	box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072);
  padding: 10px 10px;
}

.profileTopBar p{
	padding: 15px 0px 0px 20px;
	font-size: 20px;
	font-weight: bold;
}

.profileTopBar .leftBar{
	width: 30%;
	float: left;
}

.profileTopBar .rightBar{
	width: 70%;
	float: left;
}

.profileTopBar .rightBar .topRightBar{
	float: right;
	padding: 5px 20px 0px 0px;
	display: grid;
	grid-template-columns: 50% 50%;
}

.profileTopBar .rightBar .topRightBar button{
	color: white;
	height: 52px;
	width: 90%;
	margin: auto
}

.profileTopBar .rightBar .topRightBar button.first{
	background: #5B0494;
}

.profileTopBar .rightBar .topRightBar button.second{
	background: #FF0E0E;
}

.boxCardFromProfile{
	height: 70px;
	background: #6A06B5;
	border-radius: 20px;
	display: grid;
	grid-template-columns: 50% 50%;
}

.boxCardFromProfile .text{
	padding: 23px 0px 0px 20px;
	color: white;
	font-size: 17px;
}

.boxCardFromProfile div.first div{
    width: 100%; 
	padding-right: 10px;
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 
}

.boxCardFromProfile div.second div{
	float: right;
	padding: 18px 20px 0px 0px;
	cursor: pointer;
}

.boxCardFromProfile div.second div .iconify{
	width: 35px;
	height: 35px;
}

.alertBox{
	padding: 15px 20px 0px;
	background: #0bbc90;
	color: white;
	height: 50px;
	display: none;
	grid-template-columns: 80% 20%;
	border-radius: 20px;
}

.alertBox div.close{
	position: relative;
	bottom: 25px;
	font-size: 5rem;
	color: white;
	cursor: pointer;
}

.inputsFromProfile input{
	padding: 0px 10px;
}

.inputsFromProfile label{
	font-weight: bolder;
	font-size: 17px;
}


/*Coming soon page*/
.comingSoonBox{
	width: 100%;
	height: 400px;
	background: #E6E3EF;
	border-radius: 20px;
}

.comingSoonBox p{
	padding: 30px 0px 0px 30px;
	font-weight: bolder;
	font-size: 20px;
}

/*outsideNavbar*/
nav{
	height: 70px;
	width: 100%;
	background: white;
	border-radius: 0px 0px 10px 10px;
	box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072);
	transition: 1s;
}

.navbar-nav .nav-link {
    color: black;
}

.navbar-nav .nav-link:hover {
    color: #72315A;
	font-weight: bolder;
	transition: 1s;
}

nav .userStateBtn{
    border-radius: 20px;
	color: #72315A;
	border: 2px solid #72315A !important;
}

.mainBarInOtherPages{
	margin-top: 120px;
}


/*Prvacy page*/
.privacyPage{
	width: 75%;
	margin: auto;
	padding: 50px;
	background: white;
	border-radius: 5px;
	box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072);
	font-family: sans-serif;
}

.privacyPage h5{
	color: #999999;
	font-weight: bold;
}

.privacyPage p, .privacyPage b, .liParagraph{
	color: #333333;
}

.privacyPage .titleHead{
	color: #444F60;
}

.privacyPage .titleHead, .privacyPage .subtitle, .privacyPage .article-meta{
	padding-left: 30px;
}

.privacyPage .article-meta{
	display: flex;
}

.privacyPage .article-meta .iconify{
	width: 25px;
	height: 25px;
	margin: auto 0px;
}

.privacyPage .article-meta .status{
	color: #999999;
	padding-left: 10px;
	margin: auto 0px;
}

.privacyPage h5.subSubtitle{
	color: #444F60;
}

/*Footer Bar*/
footer.footerBar{
	margin-top: 70px;
	width: 100%;
	background: white;
}

footer.footerBar .innerFooter{
	padding: 50px;
	display: grid;
	grid-template-columns: 40% 60%;
}

footer.footerBar .innerFooter .first .writeUp{
	color: #999999;
	padding: 0px 80px 0px 0px;
	font-weight: bold;
	font-size: 13px;
}

footer.footerBar .innerFooter .first .socialMediaicons a{
	color: #333333;
}

footer.footerBar .innerFooter .first .socialMediaicons .iconify{
	width: 20px;
	height: 20px;
}

footer.footerBar .innerFooter .second{
	padding: 50px;
	display: grid;
	grid-template-columns: 33.333% 33.333% 33.333%;
}

footer.footerBar .innerFooter .second .titleHeader b{
	color: #333333;
}

footer.footerBar .innerFooter .second .linkContent div a{
	color: #999999;
}

footer.footerBar .innerFooter .second .linkContent div a:hover{
	color: #72315A;
}


/*Transactions page*/
.cardContentPhase1FromTransactions{
	width: 80%;
	float: left;
	padding-right: 10px;
}

.cardContentPhase1FromTransactions .subContent{
	margin: auto;
	padding-top: 15px;
	font-weight: bold;
}

/*All cards page*/
.modalHeaderFromAllCards{
	padding: 20px 0px 10px;
	border-bottom: 1px solid black;
}

.submitBtnFromAllCards{
	background: #240651;
}

.btnBoxShadowFromAllCards{
	border: 1px solid #333333;
}

.viewCardRightPage{
	border: 1px solid #333333;
	border-radius: 10px;
	max-width: 400px;
}


/**Media screen settings**/
@media (max-width: 991px) {
	nav{
		height: auto;
		width: 100%;
		background: white;
		border-radius: 0px 0px 10px 10px;
		box-shadow:
	  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
	  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
	  0 22.3px 17.9px rgba(0, 0, 0, 0.072);
	}
	
	nav .userStateBtn{
		width: 100%;
	}
	
	footer.footerBar .innerFooter{
		display: grid;
		grid-template-columns: 100%;
	}
}

@media (max-width: 700px) {
	.networkOperatorsFromBetting{
		width: 25%;
		float: left;
		text-align: center;
	}
	
	.privacyPage{
		width: 97%;
		margin: auto;
		padding: 10px;
	}
	
	.privacyPage .titleHead, .privacyPage .subtitle, .privacyPage .article-meta{
		padding-left: 0px;
	}
	
	footer.footerBar{
		margin-top: 70px;
		width: 100%;
		background: white;
	}
	
	footer.footerBar .innerFooter .first .writeUp{
		color: #999999;
		padding: 0px 0px 0px 0px;
		font-weight: bold;
		font-size: 13px;
	}
	
	footer.footerBar .innerFooter .second{
		padding: 0px;
		display: grid;
		grid-template-columns: 50% 50%;
		margin-top: 30px;
	}
	
	footer.footerBar .innerFooter .second .thirdContent{
		margin-top: 30px;
	}
}

@media (max-width: 767px) {
	.cardContentPhase2FromDashboard{
		width: 33.33%;
	}
}

@media (max-width: 691px) {
	.planSelectionFromAcctUpgrade .box1, .planSelectionFromAcctUpgrade .box2, .planSelectionFromAcctUpgrade .box3{
		height: 390px
	}
}

@media (max-width: 667px) {
	.smartCardFromSavings{
		width: 100%;
		float: left;
	}
	
	.smartCardFromSavings.first{
		margin-bottom: 10px;
	}
}

@media (max-width: 618px) {
	.planSelectionFromAcctUpgrade .box1, .planSelectionFromAcctUpgrade .box2, .planSelectionFromAcctUpgrade .box3{
		height: 410px
	}
}

@media (max-width: 573px) {
	.planSelectionFromAcctUpgrade .box1, .planSelectionFromAcctUpgrade .box2, .planSelectionFromAcctUpgrade .box3{
		height: 350px
	}
}

@media (max-width: 560px) {
	.acctUpgradeTopBar .leftBar p{
		color: white;
		padding: 15px 0px 0px 20px;
		font-size: 15px;
		font-weight: bold;
	}
	
	.profileTopBar .leftBar{
		width: 100%;
		float: left;
	}
	
	.profileTopBar p {
		padding: 15px 0px 0px 0px;
		font-size: 17px;
		font-weight: bold;
	}

	.profileTopBar .rightBar{
		width: 100%;
		float: left;
	}

	.profileTopBar .rightBar .topRightBar{
		float: left;
		padding: 0px;
	}

	.bannerRef img{
		border-radius: 20px;
		width: 100%;
		height: 150px;
	}
}

@media (max-width: 545px) {
	.networkOperatorsFromBetting img{
		width: 70px;
	}
	
	.boxContentFromTransfer{
		width: 100%;
		float: left;
		padding: 5px 20px;
	}
	
	.boxContentFromTransfer .buttonBoxFromTransfer button{
		height: auto;
	}
}

@media (max-width: 500px) {
	.cardContentPhase2FromDashboard{
		width: 50%;
	}
	
	.iconBoxFromDashboard.phase2{
		width: 70px;
		height: 70px;
	}
	
	.iconBoxFromDashboard.phase2 .iconify{
		position: relative;
		top: 15px;
		left: 15px;
		width: 40px;
		height: 40px;
	}
	
	.buttonFromAirtimeToCash, .submitBtnFromAirtime{
		width: 100%;
	}
	
	.cardBoxFromCard{
		width: 98%;
		margin: auto;
	}
}


@media (max-width: 450px) {
	.networkOperatorsFromData{
		width: 33.33%;
	}
	
	.networkOperatorsFromData.first, .networkOperatorsFromData.second, .networkOperatorsFromData.third, .networkOperatorsFromData.forth{
		margin-bottom: 10px;
	}

	.boxCardFromProfile div.second div span#copyLinkText{
		display: none;
	}
}


@media (max-width: 400px) {
	.amountListFromAirtime{
		width: 33.33%;
		float: left;
	}
	
	.amountListFromAirtime.fifth, .amountListFromAirtime.sixth{
		margin-bottom: 10px;
	}
	
	.boxFromSavings .boxContentFromSavings.first{
		width: 100%;
		float: left;
		text-align: center;
		padding: 0px;
		margin: 0px;
	}

	.boxFromSavings .boxContentFromSavings.second{
		width: 100%;
		float: left;
	}
}


@media (max-width: 350px) {
	.networkOperators{
		width: 50%;
	}
	
	.networkOperators.first, .networkOperators.second{
		margin-bottom: 10px;
	}
	
	.networkOperatorsFromAirtime{
		width: 50%;
	}
	
	.amountListFromAirtime{
		width: 50%;
		float: left;
	}
	
	.amountListFromAirtime.fifth, .amountListFromAirtime.sixth{
		margin-bottom: 10px;
	}
	
	.networkOperatorsFromBetting{
		width: 50%;
		float: left;
		text-align: center;
	}
	
	footer.footerBar .innerFooter .second{
		padding: 0px;
		display: grid;
		grid-template-columns: 100%;
		margin-top: 30px;
	}
	
	footer.footerBar .innerFooter .second .secondContent{
		margin-top: 30px;
	}
}


@media (max-width: 270px) {
	.networkOperatorsFromData{
		width: 50%;
	}
}