/* ========================================================================
   Style de la page dashboard
 ========================================================================== */

.dashboard-title{
	text-align: left;
	font-size: 18px;
	color: #333;
	padding: 20px 0px;
	border-bottom: solid 1px #eee;
	margin-bottom: 50px;
}

.dashboard-info{
  background-color: #d8eafc;
  color: #1e87f0;
  text-align: center;
  margin: auto;
  margin-bottom: 50px;
  width: 60%;
}

.dashboard-body .uk-tab::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 0;
    border-bottom: none;
}

.dashboard-body .uk-tab > .uk-active > a {
    color: #1e87f0;
    border: solid 1px #1e87f0;
}

#dashboard-date-container{
  margin-bottom: 40px;
  text-align: center;
}


/********** Compteurs ****************/

#compteurs-container{
	padding-bottom: 10px;
	position: relative;
}

#compteurs-container ul.uk-slider-items li{
	display: inline-block;
	margin: 0px 10px;
}

#compteurs-container .compteur-card{
	border-radius: 30px;
	height: 450px;
	width: 400px;
	color: #fff;
  box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.08);
}

#compteurs-container .compteur-card .uk-card-body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}








#compteurs-container .compteur-card.one{
	background-image: linear-gradient(to right, #de0aff, #a7aaff);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#compteurs-container .compteur-card.two{
	background-image: linear-gradient(to right, #a7aaff, #0ad2ff);
}

#compteurs-container .compteur-card.three{
	background-image: linear-gradient(to right, #0ad2ff, #76eddd);
}

#compteurs-container .compteur-card.four{
	background-image: linear-gradient(to right, #76eddd, #0ad2ff);
}

#compteurs-container .compteur-card.paiements{
	background-image: linear-gradient(to right, #0ad2ff, #a7aaff);
}

#compteurs-container .compteur-card.clients{
	background-image: linear-gradient(to right, #a7aaff, #de0aff);
}

#compteurs-container .compteur-card.partenaires{
	background-image: linear-gradient(to right, #f5c1ff, #cc00f3);
}

#compteur-container-slidenavs{
	position: absolute;
	bottom: 30px;
	right: 100px;
	background-color: #fff;
	border-radius: 25px;
	color: #000;
	padding: 5px 20px;
	border:  solid 1px #eee;
}

#compteur-container-slidenavs a{
	visibility: visible!important;
}

#compteurs-container .uk-slider-nav li a{
	width: 30px;
  border-radius: 0px;
  height: 5px;
}

#compteurs-container .uk-slider-nav li.uk-active a {
	background-color: #3003ff;
}


.compteur-circle-progress{
	margin: auto;
	width: 250px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.compteur-circle-progress .progressbar-text{
	top: 50%;
	bottom: 50%;
}


/* Chiffres des achats, ventes et commandes */

.animated-circle{
  padding: 40px 30px;
}
.animated-circle .circle {
  position: relative;
  height: 230px;
  width: 230px;
  border-radius: 50%;
  border: solid 1px rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: auto;
  font-size: 20px;
}

.animated-circle .circle:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    height: 230px;
    width: 230px;
    border-radius: 50%;
    /*border: solid 1px rgba(255, 255, 255, 1);*/
    background-color: rgba(255, 255, 255, .3);
    text-align: center;
    margin: auto;
    font-size: 20px;
    transform: scale(1.5);
}

.animated-circle .circle:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    height: 230px;
    width: 230px;
    border-radius: 50%;
    border: solid 1px rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, .3);
    text-align: center;
    margin: auto;
    font-size: 20px;
    animation: onded 1s infinite;
}

@keyframes onde{
  0%{
    transform: scale(1.5);
    opacity: .1;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes onded{
  0%{
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(1.5);
    opacity: .1;
  }
}

.animated-circle .element-title{
  text-transform: uppercase;
  font-size: 12px;
  padding-top: 10px;
  font-weight: bold;
}

.animated-circle .montant{    
  background: #fff;
  border-radius: 25px;
  color: #fff;
  padding: 15px;
  text-transform: uppercase;
  font-weight: bold;
  width: 80%;
  margin: 35px auto 0px auto;
}











/***************** Courbes d'evolution *****************/

#courbes-container, .courbes-container{
	border-radius: 15px;
	height: auto;
	width: 100%;
	background-color: #fff;
  box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
  padding: 20px 40px 0px 40px;
  margin-bottom: 40px;
}



.courbe-container{
	width: 100%;
}

#courbe-paiements-depenses, #courbe-contrats{
	height: 650px;
	width: 100%;
}


.part-entreprise-particuliers-title{
    padding: 40px 40px 20px 40px;
}

/***************** Courbes polaire des parts *****************/

#parts-proprietes-container, #parts-contrats-container, #parts-paiements-container{
  border-radius: 15px;
  height: auto;
  background-color: #fff;
  box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
  padding: 20px 40px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.courbe-parts-proprietes-container, .courbe-parts-contrats-container, .courbe-parts-paiements-container{
  height: 400px;
  width: 400px;
  margin: auto;
}

#courbe-parts-proprietes, #courbe-parts-contrats, #courbe-parts-paiements{
  height: 100%;
  width: 100%;
}

#parts-proprietes-progress{
  position: relative;
  text-align: center;
}

##parts-proprietes-progress .progressbar-text{
  text-align: center;
}

#parts-proprietes-progress svg{
  border-radius: 25px;
}

#parts-legends{
  margin: 50px auto 30px auto;
  width: 60%;
}

#parts-legends div{
  padding: 5px 10px;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
}

#parts-legends .sejours{
  background-color: rgba(177, 0, 207,.2);
  color: #820099;
}

#parts-legends .frais{
  background-color: rgba(3, 169, 244,.2);
  color: #037fb7;
}

#parts-legends .loyers{
  background-color: rgba(211, 241, 255,.2);
  color: #008ed5;
}

#parts-legends .ventes{
  background-color: rgba(132, 255, 210,.2);
  color: #00b775;
}




/***************** Statistiques *****************/

#statistiques-container{
  border-radius: 15px;
  height: auto;
  background-color: #fff;
  box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
  padding: 20px 40px 0px 40px;
}

#parts-container{
  border-radius: 15px;
  height: auto;
  background-color: #fff;
  box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
  padding: 20px 40px 0px 40px;
}