/* moncompte_mobile css template */


.bloc_title {font-size: 1.5rem; font-weight: 600;}
.bloc_content {font-size: 1.5rem; line-height: 30px}
.bloc_corps {font-size: 1.1rem;}
.bloc_bouton {font-size: 1.1rem;}


div[class*=bloc_moncompte] p {font-size: 1.15rem; line-height: 24px}
div[class*=bloc_moncompte] a {font-size: 1.1rem; font-weight: 500}
div[class*=bloc_moncompte] button {font-size: 1.1rem; font-weight: 500}

#sidebar ul li span {font-size: 1.3rem; font-weight: 400}
#sidebar a span {font-size: 1.3rem; font-weight: 400}


.bg-solde {background-color: #E04C3C}
.bg-cadeaux {background-color: #d44137}
.bg-vacances {background-color: #3797d3}
.bg-culture {background-color: #d32e61}
.bg-dejeuner {background-color: #ffaa33}
.bg-rechargement {background-color: #ff5733}
.bg-frais {background-color: #ffaa33}
.bg-complement {background-color: #ff5733}

.bg-white {background-color: #f7f7f7}
.bg-orange {background-color: #ff5733}
.bg-jaune {background-color: #ffaa33}
.bg-mauve {background-color: #d32e61}
.bg-bleu {background-color: #3797d3}
.bg-parme {background-color: #d44137}
.bg-rouge {background-color: #E04C3C}

.bloc_moncompte {width: 350px; margin-right: 0px; margin-bottom: 10px}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  /* border: 1px solid silver; */
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.nowrap  { 
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
} 

.flex-item {
  padding: 5px;
  width: 400px;
  /* height: 100px; */
  margin-right: 10px;
  margin-bottom: 10px;
  /* line-height: 100px; */
  /* background-color: greenyellow; */
}

/*
<div class="circle">
  <span class="initials">V</span>
</div>
*/

:root {
  --avatar-size: 10rem;
  /* change this value anything, e.g., 100px, 10rem, etc. */
}

.circle {
  background-color: red;
  border-radius: 50%;
  height: var(--avatar-size);
  text-align: center;
  width: var(--avatar-size);
}

.initials {
  font-size: calc(var(--avatar-size) / 2); /* 50% of parent */
  line-height: 1;
  position: relative;
  top: calc(var(--avatar-size) / 4); /* 25% of parent */
  color: white;
}

.alert {
  border-radius: 1rem;

}

.alert-light {background-color: #f3f3f3}
.alert-danger {border-width: 0}