* { 
box-sizing:border-box;}
html, body {
margin:0;
}
.stop-scroll {
	overflow: hidden;
}
	@keyframes blink {
  0%   {background-color: rgba(211, 211, 211, 0.3);}
  50% {background-color: rgba(211, 211, 211, 0.6);}
  100% {opacity:rgba(211, 211, 211, 1.0) ;}
  }
/*Scroll bar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0.0.6);
  border: 0px none transparent;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #343C52;
}
::-webkit-scrollbar-thumb:active {
  background: #343C52;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0.0.6);
  border: 0px none transparent;
  border-radius: 53px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button  {
 -webkit-appearance: none;margin: 0;
}
input[type=number] {-moz-appearance: none}
/*Scrollbar ends*/
.forefront {
	z-index: 1001;
}
.trans-input {
background-color: ;
}
.trans-input:focus {
	background-color: ;
	color: ;
}
/*Flags*/
.fflag {
    background-image:url(../../image/flags/flagSprite42.png);
    background-repeat:no-repeat;
    background-size: 100% 49494%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    box-sizing: content-box;
}
.fflag-CM {background-position:center 0.2287%}
.fflag-GH {background-position:center 0.4524%}
.fflag-KE {background-position:center 0.6721%}
.fflag-NG {background-position:center 0.8958%}
.fflag-RW {background-position:right 1.1162%}
.fflag-SL {background-position:center 1.3379%}
.fflag-ZA {background-position:left 1.5589%}
.fflag-UG {background-position:center 1.7836%}

.fflag.ff-sm {width: 18px;height: 11px}
.fflag.ff-md {width: 27px;height: 17px}
.fflag.ff-lg {width: 42px;height: 27px}
.fflag.ff-xl {width: 60px;height: 37px}
/*End of Flags*/
/*
Responsive CSS Sprite created using: https://responsive-css.us/
*/

.sprite-about, .sprite-advertising, .sprite-assistant, .sprite-businessman, .sprite-checkmark, .sprite-faq, .sprite-home, .sprite-idea, .sprite-manager, .sprite-reading, .sprite-search, .sprite-shop, .sprite-sms 
{display:inline-block; overflow:hidden; background-repeat: no-repeat;
background-image:url(png.png);}

.sprite-about {width: 32px; height: 32px; background-position: 15.1786% 0.446429%; background-size: 800.000%; }
.sprite-advertising {width: 32px; height: 32px; background-position: 0.446429% 0.446429%; background-size: 800.000%; }
.sprite-assistant {width: 32px; height: 32px; background-position: 29.9107% 0.446429%; background-size: 800.000%; }
.sprite-businessman {width: 32px; height: 32px; background-position: 44.6429% 0.446429%; background-size: 800.000%; }
.sprite-checkmark {width: 32px; height: 32px; background-position: 74.1071% 15.1786%; background-size: 800.000%; }
.sprite-faq {width: 32px; height: 32px; background-position: 59.3750% 0.446429%; background-size: 800.000%; }
.sprite-home {width: 32px; height: 32px; background-position: 74.1071% 0.446429%; background-size: 800.000%; }
.sprite-idea {width: 32px; height: 32px; background-position: 88.8393% 0.446429%; background-size: 800.000%; }
.sprite-manager {width: 32px; height: 32px; background-position: 15.1786% 15.1786%; background-size: 800.000%; }
.sprite-reading {width: 32px; height: 32px; background-position: 0.446429% 15.1786%; background-size: 800.000%; }
.sprite-search {width: 32px; height: 32px; background-position: 29.9107% 15.1786%; background-size: 800.000%; }
.sprite-shop {width: 32px; height: 32px; background-position: 44.6429% 15.1786%; background-size: 800.000%; }
.sprite-sms {width: 32px; height: 32px; background-position: 59.3750% 15.1786%; background-size: 800.000%; }
.link_active {
	color: #ff255b !important;
}
/*Animations for processing*/
@keyframes boxes {
25% {background-color: yellow;
}
50% {background-color: pink;
}
75% {background-color: white;
}
100% {background-color: red;
}
}
@keyframes box2 {
0% {background-color: red;
}
50% {background-color: violet;
}
70% {background-color: skyblue;
}
100% {background-color: yellow;
}
}
@keyframes box1 {
0% {background-color: yellow;
}
50% {background-color: red;
}
70% {background-color: cyan;
}
100% {background-color: white;
}
}
.bg-light{
	background-color: unset !important;
	background-color: #EDF1F2 !important;
}
.full-width {
	left: 0;
	right: 0;
}
.top{
	top: 0;
}
.bottom{
	bottom: 0;
}
.left{
	left: 0;
}
.right{
	right: 0;
}

.cursor {
	cursor: pointer;
}
.theme-text-color {
	color : #313131;
}
.theme-bg {
background-color: #313131;
}
.center-in-div {
	display: flex;justify-content: center;align-items: center;
}
.space-around {
	display: flex;justify-content: space-around;align-items: center;
}
.space-btn {
	display: flex;justify-content: space-between;align-items: center;
}
.img-fit-center {
object-fit: cover;object-position: center;
}
.img-fit-contain {
object-fit: contain;object-position: center;
}
.img-fit-top {
object-fit: cover;object-position: top;
}
.absolute {
	position: absolute;
}
.relative {
	position: relative;
}
.fixed {
	position: fixed;
}
.sticky {
	position: sticky;
}
.hr-overflow-scroll {/*Horizontal overflow*/
		white-space: nowrap;
	overflow: hidden;
	overflow-x: scroll;
}
.v-overflow-scroll {/*Vertical overflow*/
		white-space: nowrap;
	overflow: hidden;
	overflow-y: scroll;
}
	header.normal {
position: sticky;
top: 0;
padding: 0 10px;
height : 70px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 15px 0 0.5 black;
z-index: 1000;
}
.pr-mob-padding {
	padding: 2px !important;
}
.search-card {
	padding: 2px;
	margin-bottom: 60px;
}
.toast-msg {
	top: 0;left: 0;right: 0;margin: 0 auto;width: 80%;z-index: 1;
}
@media only screen and (max-width: 576px) {
	/*only on mobile */

	.d-mobile {
		display: none;
	}}

.card-balance {
	background-image: url(../../image/card-bg.jpg);
	background-position: left;
	background-repeat: no-repeat;
width: 100%;
height: 250px;
}
.auth-container {
	width:90vw;height: 80vh;border-radius: 0.6em;background: #232124; }
@media only screen and (min-width: 576px) {
	/*IPAD & PC*/
	.auth-container {
	width:300px;height: 80vh;border-radius: 0.6em;background: #232124;
	}
.card-balance {
	background-image: url(../../image/card-bg.jpg);
	background-position: left;
	background-repeat: no-repeat;
width: 350px;
height: 250px;
}
.search-card {
	width: 50vw;
	margin: 0 auto;
	margin-bottom: 60px;
}
header.normal {
position: sticky;
top: 0;
padding: 0 10px;
height : 70px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 15px 0 0.5 black;
z-index: 1000;
}
}
header.home {
position: sticky;
top: 0;
padding: 0 10px;
height : 70px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 15px 0 0.5 black;
z-index: 1000;
}
a {
text-decoration: none;
}
a:hover {
opacity: 0.6;
color: #ff255b !important;
}
a.header-links {color: rgba(0,0,0,0.6)
}
.states {
display :flex;
justify-content: center;
align-items: center;
height : 100px;
border-radius: 10px;
border: 1px solid lightgrey;
font-weight: bold;
margin: 8px 0;
font-size: 100%;
transition: font-size 0.3s;
}
.states:hover {
border: 1px solid red;
color: red;
font-size: 120%;
}
.states-box {
display : flex;
justify-content: center;
align-items: center;
margin-top: -90px;
}
.mobile-state-box {
display : flex;
justify-content: center;
align-items: center;
margin-top: 90px;
}
.state-intro {
background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
height: 300px;
display : flex;
justify-content: center;
align-items: center;
color: white;
}
.logo,.center-bars {
font-weight: bolder;
font-size: 180%;
}
.slogan {
height: 50px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 110%;
}

ul {
list-style-type: none;
}
/*Specifics for homepage 2 starts */

div.few-listing {
	white-space: nowrap;
	overflow: hidden;
	overflow-x: scroll;

}
@media only screen and (min-width: 769px) {

div.few-listing {
	white-space: nowrap;
	overflow: hidden;
	overflow-x: scroll;

}
/*Hide scroll bar on desktop */
.hr-overflow-scroll {/*Horizontal overflow*/
		white-space: nowrap;
	overflow: hidden;
	overflow-x: scroll;

}
.w-md-60 {
	width: 60%;
}

}

div.few-listing .items {
background-color: white;
	border-radius: 5px;
	display:inline-block;
	padding: 4px;
	height: 240px;
	width: 240px;
	transition: box-shadow 0.5s;
}
div.few-listing .items:hover {

	background-color: white;box-shadow: -12px 14px 23px -13px rgba(0,0,0,0.75);
-webkit-box-shadow: -12px 14px 23px -13px rgba(0,0,0,0.75);
-moz-box-shadow: -12px 14px 23px -13px rgba(0,0,0,0.75);
}
div.few-listing > div.img-desc-wrapper {
padding: 1px;

display: table;
}
.text-ellipsis-home {
	white-space: nowrap;overflow:hidden;text-overflow: ellipsis;width: 234px;
}
div.few-listing .img-desc-wrapper .desc {
white-space: pre-wrap;text-overflow: ellipsis; display: table-cell;padding: 0 2px;}

div.few-listing .few-image {

	border-radius: 10px;
	width: 100%;height: 150px;

}
/*Specifics for homepage 2 ends here */
ul.social-accounts > li {
	display: inline-block;
font-size: 130%;
padding: 6px 2px 2px 2px;

}
.dropdown-states {
	position: absolute;
	top: 100%;
	width: 200px;
}
.dropdown-states::after {
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 50%;
	border-width: 10px;
	border: 8px solid;
	border-color: transparent transparent white transparent;
}
ul.dropdown-states-ul  > li {
margin-left: 0;
padding:4px 0px;
}
ul.dropdown-states-ul  > li:hover {
background-color: ghostwhite;
}
/*Home-2 css */
.nav-mobile {
	/*For mobile */
	display: flex;
width :100%;
margin-top: -20px;
padding:4px 20px;
  height : 60px;
  display: flex;
  justify-content:space-between;
  align-items: center;
  line-height:63%;
  position: fixed;
  bottom: -60px;
  transition: bottom 1s;
  z-index: 1000;
}
div.bottom-nav{
  text-decoration: none;
  display: inline-block;
  text-align:center;
  position: relative;
}
div.md-nav{
	padding: 0 18px;
	line-height: 12px;
  text-decoration: none;
  display: inline-block;
  text-align:center;
  position: relative;
}
.small-number {
  text-align: center;
  position: absolute;
  left: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 11px;
  width: 11px;
  border-radius :100%;
  background: white;top: 0;
  color: red;
  font-weight: bold;
  font-size: 70%;
  
}

ul.sub-navigation {display: flex;justify-content: space-around;align-items: center;height: 50px; position: relative;
} 
ul.sub-navigation > li {padding: 8px 15px 6px;font-weight: bold;font-size: small;
}
ul.sub-navigation > li:hover {color: #313131;font-weight: bold;
}
ul.sub-class {
	position: absolute;
	top: 120%;
	background-color: white;
	border-radius: 4px;
	z-index: 100;
	margin-left: 0px;
}
ul.sub-class > li {
display: block;
padding: 4px 4px 4px 0px;
color: black !important;
}
ul li div.sub-listings {
	height: 90px;width: 150px; border-radius: 5px;
	box-shadow: 2px 1px 19px -1px rgba(244,244,244,1);
-webkit-box-shadow: 2px 1px 19px -1px rgba(244,244,244,1);
-moz-box-shadow: 2px 1px 19px -1px rgba(244,244,244,1);
}

.modals {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.8);
	z-index: 1001;
	opacity: 1;
	transition: opacity 1s;
}
.profile-head {
	/*Contains arrow and menu bar to show bottom menu*/
	width: 100%;
	height: 50vh;
}
.profile-pages-head {
	/*Contains arrow and menu bar to show bottom menu on pages oriaginating from profile page*/
	width: 100%;
	height: 30vh;
}
.profile-body {
	/*Formats the card links under profile.php*/
	padding-top: 40px;
	margin-top: -6vh;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}
@media only screen and (min-width: 576px) {
.profile-head {
	/*Contains arrow and menu bar to show bottom menu*/
	width: 100%;
	height: 100vh;
}
}
.back-arrow {
	/*Takes users back to previous page must in addition to .fixed class*/
top: 5px;
padding: 8px;
color: rgba(255,255,255, 0.6);
}
.side-menu {
	background:#31373D;width:70%;position: fixed;top:49px;left: -100%;bottom: 0;right: 0;transition: left 1s;z-index: 1000;
}
@media only screen and (min-width: 576px) {
	.side-menu {
	background:#31373D;width:250px;position: fixed;top:49px;left: 0;bottom: 0;right: 0;z-index: 1000;
}}
.borderless-input {
	width:100%;background: transparent; outline: none;border: none;border-bottom: 1px solid rgba(248, 248, 255, 0.4);
color: lightgrey;}
.borderless-input::placeholder, .borderless-input::-webkit-input-placeholder, .borderless-input::-moz-placeholder {
color: white;
}
.alert {
	height: 100px;
}
.bring-forward{
	z-index: 1001;
}
.light {
	background-color: rgb(247, 247, 247);
}
.tooltiptext{
	width: 120px;
	background-color: black;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -60px;

}
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}