body,html{color:#2e3439;padding:0;margin:0;min-height:100%;font-size:16px}
#menu{width:210px;background-color:#1e2026;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;transition:left 1s}
#menu li#titre_panel{background-color:#9b2323}
#menu li#titre_panel > div{padding-left:5px;font-size:75%}
.menu_titre div{text-align:center;margin:30px 20px 10px}
.sous_menu li{margin:0}
#menu ul,#menu li{list-style:none}
#menu,#menu a{color:#fff}
#menu a{display:block;padding:10px;width:100%;text-decoration:none;cursor:pointer;transition:1.5s}
#menu a:hover,#menu a.active{transition:0.2s;padding-left:15px;background:#9b2323}
#contenu{margin-left:210px;padding:30px;position:relative;min-height:100%;transition-duration:1.5s;transition-property:margin-left;animation-timing-function:ease-in-out;overflow-y:auto}
#footer{margin-top:30px;padding-top:15px;border-top:1px solid #ddd;font-size:13px;font-weight:700}
#footer a{text-decoration:none;padding:5px;color:#fff;background:#9b2323}
.sticky_left{border:1px solid #ccc;position:sticky;left:0}
.tr_bg td{background:cornsilk}
.tr_bg_red td{background:#ffcece}


.circular-chart {
  display: block;
  margin: 10px auto;
  width: 100px;
  height: 100px;
}

.circle-bg {
  fill: none;
  stroke: #e8e8e8;
  stroke-width: 2.8;
	filter: drop-shadow(0px 0.5px 0.2px #cac9c9);
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 3s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: #ff9f00;
}

.circular-chart.green .circle {
  stroke: #4CC790;
}

.circular-chart.blue .circle {
  stroke: #3c9ee5;
}

.percentage,.comptage {
  fill: #333;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}
.comptage {
  fill: #666;
  font-size: 0.35em;
}

.table_with_svg_percent td{
	min-width: 200px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* tarifs */
#tarifs{margin:40px auto;display:flex}
#tarifs .tarif_width_100pct .bloc{max-width:unset!important}
#tarifs > .bloc:first-child{margin-left:0px}
#tarifs > .bloc:last-child{margin-right:0px}
#tarifs .header {
  min-height:125px;
  padding-top:10px;
  margin: -1px;
  border-radius: 9px 9px 0 0;
  border-bottom: 1px solid #fff;
}
#tarifs .titre{display:block;font-size:25px;text-transform:uppercase;text-align:center;border-radius:inherit}
#tarifs .prix{font-size:26px;display:block}
#tarifs .prix span{margin-left:10px;font-size:56px}
#tarifs .prix sup{font-size:27px}
#tarifs .bloc {
  position:relative;
  width:100%;
  padding-bottom: 80px;
}

#tarifs ul{list-style:none;margin-top:30px}
#tarifs ul li{position:relative}
#tarifs hr{margin-top:30px}
#tarifs .btn{display:block}

/*surcharge helper*/
table.table th, table.table td{
padding: 5px;
}
.btn, input[type="submit"] {
padding: 3px 7px;
}
.btn_small {
padding: 2px 5px;
}
input[type=submit]{height: 32px;}