/*******************************************************
General fonts 
********************************************************/
/* poppins-regular - latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins-v9-latin-regular.eot"); /* IE9 Compat Modes */
  src: local("Poppins Regular"), local("Poppins-Regular"),
    url("../fonts/poppins-v9-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v9-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v9-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v9-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/poppins-v9-latin-regular.svg#Poppins") format("svg"); /* Legacy iOS */
}

/* poppins-500 - latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/poppins-v9-latin-500.eot"); /* IE9 Compat Modes */
  src: local("Poppins Medium"), local("Poppins-Medium"),
    url("../fonts/poppins-v9-latin-500.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v9-latin-500.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v9-latin-500.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v9-latin-500.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/poppins-v9-latin-500.svg#Poppins")
      format("svg"); /* Legacy iOS */
}

/* The loading screen */

#loader {
	width: 280px;
	height: 177px;
	/*background: url('/Content/Mobile/images/bg.png');*/
	position: fixed;
	z-index: 9999955555;
	top: 50%;
	left: 50%;
	margin-top: -88.5px;
	margin-left: -140px;
	text-align: center;
}

#loader:after {
	display: block;
	height: 32px;
	width: 32px;
	position: absolute;
	left: 50%;
	top: 49px;
	margin-left: -16px;
	margin-top: -16px;
	background: url('/Content/Mobile/images/spinner.gif');
	content: ' ';
}

#loaderSpace {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.5);
	background: -webkit-radial-gradient(50% 50% , ellipse closest-corner, rgba(0, 0, 0, 0.3) 1%, rgba(0, 0, 0, 0.725) 100%) repeat scroll 0 0 transparent;
	background: -moz-radial-gradient(50% 50% , ellipse closest-corner, rgba(0, 0, 0, 0.3) 1%, rgba(0, 0, 0, 0.725) 100%) repeat scroll 0 0 transparent;
	background: -o-radial-gradient(50% 50% , ellipse closest-corner, rgba(0, 0, 0, 0.3) 1%, rgba(0, 0, 0, 0.725) 100%) repeat scroll 0 0 transparent;
	background: -ms-radial-gradient(50% 50% , ellipse closest-corner, rgba(0, 0, 0, 0.3) 1%, rgba(0, 0, 0, 0.725) 100%) repeat scroll 0 0 transparent;
	background: radial-gradient(50% 50% , ellipse closest-corner, rgba(0, 0, 0, 0.3) 1%, rgba(0, 0, 0, 0.725) 100%) repeat scroll 0 0 transparent;
	z-index: 9999955554;
}


#loader span 
{
	display: inline-block;
    font-weight: bold;
    color: #3c3c3c;
	position: relative;
}

/*******************************************************
General variables
********************************************************/
:root,
[data-theme="default"] {
  /* defaults fonts */
  --font-family: "Poppins";
  --font-weight-reg: 400;
  --font-weight-med: 500;
  /* font color */
  --color-primary: hsl(0, 0%, 16%);
  --color-secondary: hsl(0, 0%, 28%);
  --color-default: hsl(0, 0%, 100%);
  --light-grey: hsl(0, 0%, 60%);
  /* color contrasts */
  --color-bg-primary: #f6f6f6;
  --color-bg-secondary: hsl(253, 100%, 61%);
  --color-bg-secondary-low: hsl(253, 100%, 95%);
  --color-bg-third: hsl(276, 100%, 41%);
  --color-bg-third-low: hsl(276, 100%, 95%);
  --color-green: hsl(148, 75%, 46%);
  --color-green-low: hsl(148, 75%, 95%);
  --color-red: hsl(344, 100%, 61%);
  --color-red-low: hsl(344, 100%, 95%);
  --color-contrast-higher: white;
}
/*******************************************************
General styles 
********************************************************/
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--color-bg-primary);
  font-weight: var(--font-weight-reg);
  font-family: var(--font-family);
  font-size: 0.875rem;
}
main#swup {
  padding: 100px 20px 150px;
}
main#swup.has-banner {
  padding-top: 150px;
}
.container,
.container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}
.row {
  margin-left: -20px;
  margin-right: -20px;
}
[class^="col"] {
  padding-left: 10px;
  padding-right: 10px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-med);
  color: var(--color-primary);
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 3rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.8rem;
}
p {
  color: var(--color-secondary);
  font-weight: var(--font-weight-reg);
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
}
a {
  color: var(--color-bg-secondary);
}
a:hover {
  text-decoration: none;
}
.bg-body {
  background-color: var(--color-bg-primary);
}
.primary {
  color: var(--color-primary);
}
.secondary {
  color: var(--color-secondary);
}
.light-grey {
  color: var(--light-grey);
}
.bg-light-grey {
  background-color: var(--light-grey);
}
.green {
  color: var(--color-green);
}
.bg-green {
  background-color: var(--color-green) !important;
}
.bg-green-low {
  background-color: var(--color-green-low) !important;
}
.bl-green {
  border-left: 2px solid var(--color-green) !important;
}
.red {
  color: var(--color-red) !important;
}
.bg-red {
  background-color: var(--color-red) !important;
}
.bg-red-low {
  background-color: var(--color-red-low) !important;
}
.bl-red {
  border-left: 2px solid var(--color-red) !important;
}
.purple-1 {
  color: var(--color-bg-secondary);
}
.bg-purple-1 {
  background-color: var(--color-bg-secondary) !important;
}
.bg-purple-1-low {
  background-color: var(--color-bg-secondary-low) !important;
}
.bl-purple-1 {
  border-left: 2px solid var(--color-bg-secondary) !important;
}
.purple-2 {
  color: var(--color-bg-third);
}
.bg-purple-2 {
  background-color: var(--color-bg-third) !important;
}
.bg-purple-2-low {
  background-color: var(--color-bg-third-low) !important;
}
.bl-purple-2 {
  border-left: 2px solid var(--color-bg-third) !important;
}
.white {
  color: var(--color-contrast-higher) !important;
}
.bg-white {
  background-color: var(--color-contrast-higher) !important;
}

.p-20 {
  padding: 20px;
}
.p-10 {
  padding: 10px;
}
.p-15 {
  padding: 15px;
}
.border-block {
  border-radius: 5px;
  border: 1px solid #ececec;
}
/*******************************************************
Header
********************************************************/
header.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-bg-secondary);
  padding: 5px 0 0;
  z-index: 2;
}
header.top-header [class^="col"] div {
  height: 100%;
}
header.top-header a {
  color: var(--color-default);
}
header.top-header li a {
  position: relative;
  display: table-cell;
  vertical-align: middle;
}
.notif {
  font-size: 1.2rem;
}
header.top-header li span.badge,
.notif span.badge {
  position: absolute;
  display: inline-block;
  top: 0px;
  right: -5px;
  font-size: 9px;
  background-color: var(--color-red);
  color: var(--color-default);
  font-weight: normal;
}
header.top-header i {
  font-size: 30px;
}
header .sub-header {
  padding: 10px 20px;
  margin-top: 5px;
}
header .sub-header a {
  color: var(--color-secondary);
}
/*******************************************************
menu
********************************************************/
.mm-menu {
  background-color: var(--color-bg-primary);
}
.mm-wrapper__blocker {
  background-color: var(--color-bg-secondary);
  opacity: 0.8;
}
.id-user {
  background-color: var(--color-contrast-higher);
  padding: 20px;
}
.id-user h4 {
  font-weight: var(--font-weight-reg);
  line-height: 1;
}
.id-user p {
  font-size: 0.8rem;
  /* line-height: 1.3; */
}
.close-menu a {
  color: var(--color-bg-third) !important;
  background-color: var(--color-bg-secondary-low);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  font-size: 1.5rem;
  line-height: 1;
}
.balance-menu,
.deposit-menu {
  background-color: var(--color-contrast-higher);
  padding: 20px;
  margin-left: 20px;
  border-left: 2px solid var(--color-bg-third);
}
.balance-menu h4:last-child {
  color: var(--color-bg-secondary);
}
.deposit-menu {
  border-color: var(--color-green);
  padding: 15px 20px;
}
.deposit-menu a {
  color: var(--color-green) !important;
  background-color: var(--color-green-low);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  font-size: 1.5rem;
  line-height: 1;
}
.mm-navbar__title {
  justify-content: start;
  font-size: 1.275rem;
  font-weight: var(--font-weight-med);
  color: var(--color-primary) !important;
}
.mm-listitem__text {
  text-transform: none;
}
.mm-listitem__text i {
  color: var(--color-bg-third);
}
.mm-listitem_selected > .mm-listitem__text {
  background: rgba(255, 255, 255, 1);
  background: var(--color-contrast-higher);
}
.btn-menu {
  padding: 0 20px;
  position: absolute;
  width: 100%;
  bottom: 10px;
  z-index: 2;
}
.btn-menu .btn {
  background-color: var(--color-bg-third);
  color: var(--color-contrast-higher);
}
/*******************************************************
search box
********************************************************/
#search-box {
  display: none;
  height: 0;
  opacity: 0;
  transition: all 0.15s;
}
#search-box.show {
  display: block;
  height: auto;
  opacity: 1;
  transition: all linear 0.15s;
}
#swup.search-slide {
  padding-top: 130px;
  transition: all linear 0.15s;
}
/*******************************************************
Welcome
********************************************************/
.welcome-msg {
  background-color: var(--color-contrast-higher);
  padding: 20px 20px 6rem;
  margin-bottom: -5rem;
}
.balance-home {
  background-color: var(--color-bg-secondary-low);
  padding: 20px;
  border-radius: 5px;
}
.balance-home-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--color-bg-secondary);
  color: var(--color-contrast-higher);
  border-radius: 50%;
  font-size: 1.8rem;
  box-shadow: 0px 0px 29px 0px rgba(104, 62, 254, 0.82);
}
.balance-home h4:last-child {
  color: var(--color-bg-third);
}
/*******************************************************
add balance
********************************************************/
.add-balance {
  border-left: 2px solid var(--color-bg-secondary);
  border-right: 2px solid var(--color-bg-secondary);
}
.add-balance h4,
.add-balance a {
  color: var(--color-bg-secondary);
}
.add-balance i {
  font-size: 1.2rem;
}
/*******************************************************
boutons
********************************************************/
.boutons .btn {
  margin-bottom: 1rem;
}
.btn-purple-1 {
  background-color: var(--color-bg-secondary);
  color: var(--color-contrast-higher);
}
.btn-purple-2 {
  background-color: var(--color-bg-third);
  color: var(--color-contrast-higher);
}
.btn-green {
  background-color: var(--color-green);
  color: var(--color-contrast-higher);
}
.btn-red {
  background-color: var(--color-red);
  color: var(--color-contrast-higher);
}
/*******************************************************
saving goals
********************************************************/
.goal-cat {
  padding-left: 20px;
  border-left: 2px solid;
}
.goal-stat {
  padding: 10px 20px;
}
.goal-green .goal-cat {
  border-color: var(--color-green);
}
.goal-green .goal-stat h4 {
  color: var(--color-green);
}
.goal-red .goal-cat {
  border-color: var(--color-red);
}
.goal-red .goal-stat h4 {
  color: var(--color-red);
}
.goal-purple-1 .goal-cat {
  border-color: var(--color-bg-secondary);
}
.goal-purple-1 .goal-stat h4 {
  color: var(--color-bg-secondary);
}
.goal-purple-2 .goal-cat {
  border-color: var(--color-bg-third);
}
.goal-purple-2 .goal-stat h4 {
  color: var(--color-bg-third);
}
/*******************************************************
history
********************************************************/
.history-list-item {
  background-color: var(--color-bg-primary);
}
.history-green h4 {
  color: var(--color-green);
}
.history-red h4 {
  color: var(--color-red);
}
.history-purple-1 h4 {
  color: var(--color-bg-secondary);
}
.history-purple-2 h4 {
  color: var(--color-bg-third);
}
/*******************************************************
my card
********************************************************/
.card-item h4,
.card-item a.dropdown-toggle {
  color: var(--color-contrast-higher);
  margin-bottom: 0.5rem;
}
.card-item p {
  color: var(--color-contrast-higher);
  opacity: 0.8;
}
.card-item i {
  font-size: 1.5rem;
}
.card-item-green {
  background-color: var(--color-green);
}
.card-item-red {
  background-color: var(--color-red);
}
.card-item-purple-1 {
  background-color: var(--color-bg-secondary);
}
.card-item-purple-2 {
  background-color: var(--color-bg-third);
}

/*******************************************************
transactions
********************************************************/
.transaction-list-item p {
  font-size: 0.75rem;
}
.transaction-id img {
  max-width: 50px;
}
.transactions-page .transaction-amount {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  padding: 20px 0;
}
.transactions-page .transaction-list-item a {
  padding: 0 0 0 10px;
}
/*******************************************************
send money
********************************************************/
.send-money {
  margin-left: -20px;
  margin-right: -20px;
  padding: 20px 0;
  background-color: var(--color-bg-secondary);
}
.send-money .title-bloc {
  padding-left: 20px;
  padding-right: 20px;
}
.send-money .owl-carousel .money-user {
  display: block;
  padding: 10px;
  text-align: center;
}
.send-money img {
  max-width: 50px;
  margin: 0 auto;
}
.send-money p {
  text-align: center;
}
/*******************************************************
pay your monthly bill
********************************************************/
.bill-item-id img {
  max-width: 50px;
}
.bill-item-id p {
  font-size: 0.75rem;
}
.bill-item-action a {
  background-color: var(--color-bg-secondary);
  color: var(--color-contrast-higher);
}
.disabled {
  background-color: var(--color-secondary) !important;
}
/*******************************************************
recents post
********************************************************/
.posts-list .row {
  margin-left: -30px;
  margin-right: -30px;
}
.post-item p {
  background-color: var(--color-contrast-higher);
  font-size: 0.75rem;
  padding: 20px;
  border-bottom: 2px solid var(--color-bg-secondary);
}
.recents-posts .owl-theme .owl-dots .owl-dot span {
  background: var(--color-bg-secondary);
  opacity: 0.4;
}
.recents-posts .owl-theme .owl-dots .owl-dot.active span,
.recents-posts .owl-theme .owl-dots .owl-dot:hover span {
  background: var(--color-bg-secondary);
  opacity: 1;
}
.blog-details h4,
.blog-details p {
  margin-bottom: 1rem;
}
/*******************************************************
about
********************************************************/
.about-block span {
  font-size: 0.75rem;
  display: inline-block;
}
.contact-msg-icon i {
  font-size: 1.6rem;
}
/*******************************************************
notifications
********************************************************/
.msg-notif a {
  font-size: 0.75rem;
}
/*******************************************************
verifications
********************************************************/
.verification .container {
  margin-bottom: 10rem;
}
/*******************************************************
contact
********************************************************/
.contact-form input {
  padding: 30px 20px;
}
.contact-form .form-control {
  border-radius: 0;
  border-color: var(--color-bg-primary);
}
.contact-form .btn {
  padding-top: 20px;
  padding-bottom: 20px;
}
/*******************************************************
transactions details
********************************************************/
.payment-details h4 {
  font-size: 1rem;
}
.transaction-details span {
  font-size: 0.8rem;
}
/*******************************************************
user details
********************************************************/
.user-details .welcome-msg {
  z-index: 2;
}
.user-details .photo-profil {
  width: 5rem;
  height: 5rem;
  z-index: 3;
  background-color: var(--color-bg-primary);
  color: var(--color-contrast-higher);
  border-radius: 50%;
  font-size: 1.8rem;
  box-shadow: 0px 0px 29px 0px rgba(104, 62, 254, 0.82);
}
.user-details .photo-profil .icon-photo {
  bottom: 0rem;
  right: 0rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8rem;
}
.user-badge {
  top: -0.5rem;
  right: -0.9rem;
}
/*******************************************************
commandes
********************************************************/
.commande-icon {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.8rem;
}
.commande-id-infos span {
  color: var(--light-grey);
}
/*******************************************************
commande-details
********************************************************/
.commande-icon-bloc {
  width: 4rem;
  height: 4rem;
  font-size: 3rem;
}
.produit-img {
  max-width: 20%;
}
/*******************************************************
dashboard
********************************************************/
.dashboard .nav-link {
  border: 1px solid var(--light-grey);
  border-right: none;
  border-radius: 0;
}
.dashboard .nav li:last-child .nav-link {
  border-right: 1px solid var(--light-grey);
}
.dashboard .nav-link.active {
  background-color: var(--color-bg-secondary);
}
.donnees-tableau table td {
  text-align: center;
}
.donnees-tableau table td p {
  font-size: 0.79rem;
  font-weight: var(--font-weight-med);
}
/*******************************************************
dashboard-home
********************************************************/
.dropdown a::after {
  display: none;
}
/* .dashboard-home-card hr {
  margin: 0;
} */
.dropdown-item {
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
}
.dropdown-item:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-contrast-higher);
}
.card-top p {
  font-size: 0.8rem;
  color: var(--color-primary);
}
.card-top i {
  font-size: 1.2rem;
}
.card-main a span {
  font-size: 4rem;
  font-weight: var(--font-weight-med);
}
.card-main a span sup {
  font-size: 2.5rem;
  font-weight: var(--font-weight-reg);
}
.card-bottom i {
  font-size: 1.2rem;
}
.card-bottom p {
  font-size: 0.8rem;
}
.working-time span {
  font-size: 2.5rem;
  font-weight: var(--font-weight-med);
}
.working-time p {
  font-size: 0.8rem;
}
.working-time a {
  font-size: 3rem;
}
/*******************************************************
count
********************************************************/
.count-total-id h1 {
  font-size: 6rem;
  font-weight: var(--font-weight-reg);
}
.count-total-id a {
  line-height: 1;
}
.progress {
  background-color: var(--color-bg-secondary-low);
  border-radius: 0;
  height: 3px;
}
.progress-bar {
  background-color: var(--color-bg-secondary);
}
.count-total .progress {
  height: 2rem;
  margin: 0 -20px;
  border-radius: 0;
  font-size: 1.8rem;
}
.count-total .progress .progress-bar {
  text-align: right;
  padding-right: 10px;
}
.count-total-id i {
  font-size: 1.1rem;
}
.count-details-list {
  margin: 0 -20px;
}
/*******************************************************
onboard
********************************************************/
.nota-bene {
  font-size: 0.8rem;
}
.ok-validation {
  font-size: 1rem;
  font-weight: var(--font-weight-med);
}
/*******************************************************
pages
********************************************************/
.page-list-item p i {
  margin-right: 0.5rem;
}
/*******************************************************
footer
********************************************************/
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 2;
}
#footer .copy {
  padding: 20px;
  background-color: var(--color-bg-secondary);
  text-align: center;
}
#footer .copy p {
  color: var(--color-contrast-higher);
}
#footer .footer-nav {
  background-color: var(--color-bg-primary);
  padding: 5px 20px;
}
#footer .footer-nav a {
  color: var(--color-secondary);
  font-size: 1.2rem;
}