#formation-progressbar {
  padding: 0px 20px;
}

#formation-progressbar-header,
#formation-progressbar-state {
  color: white;
}

#formation-progressbar-header {
  background: #4e4e4e;
  border-radius: 20px;
  padding: 4px 10px;
  display: table;
}

#formation-progressbar-body,
#formation-progressbar-footer,
#formation-progressbar,
#formation-progressbar-header {
  position: relative;
}

#formation-progressbar-max {
  right: 0;
}

#formation-progressbar-max,
#formation-progressbar-quota,
#formation-progressbar-count-position,
#formation-progressbar-quota-position,
#formation-progressbar-background,
#formation-progressbar-background-fill,
#formation-progressbar-state,
#formation-progressbar-quota-position-top,
#formation-progressbar-quota-position-bottom,
#formation-progressbar-before,
#formation-progressbar-after,
#formation-progressbar-quota-legende {
  position: absolute;
}

#formation-progressbar-state {
  padding: 4px 0px;
}

#formation-progressbar-count-position,
#formation-progressbar-quota-position,
#formation-progressbar-background,
#formation-progressbar-background-fill,
#formation-progressbar-before,
#formation-progressbar-after {
  height: 100%;
}

#formation-progressbar-count-position {
  border-left: 2px solid;
  margin-left: -1px;
}

#formation-progressbar-quota-position-top,
#formation-progressbar-quota-position-bottom {
  width: 0;
  height: 0;
  border-style: solid;
  margin-left: -6px;
}

#formation-progressbar-quota-position-top {
  border-width: 6px 6px 0 6px;
  border-color: #4e4e4e transparent transparent transparent;
}

#formation-progressbar-quota-position-bottom {
  bottom: 0;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #4e4e4e transparent;
}

#formation-progressbar-content,
#formation-progressbar-before,
#formation-progressbar-after,
#formation-progressbar-background,
#formation-progressbar-background-fill,
#formation-progressbar-after,
#formation-progressbar-before,
#formation-progressbar-count-position {
  border-color: #4e4e4e;
}

#formation-progressbar-content,
#formation-progressbar-before,
#formation-progressbar-after,
#formation-progressbar-background,
#formation-progressbar-background-fill {
  border-top: 2px solid;
  border-bottom: 2px solid;
}

#formation-progressbar-content {
  padding: 2px 0px;
  height: 28px;
}

#formation-progressbar-background {
  width: 100%;
}

#formation-progressbar-background,
#formation-progressbar-before,
#formation-progressbar-after {
  background: #c4c4c4;
}

#formation-progressbar-before,
#formation-progressbar-after {
  width: 20px;
}

#formation-progressbar-after {
  margin-right: -20px;
  right: 0;
  border-right: 2px solid;
  border-radius: 0px 5px 5px 0px;
}

#formation-progressbar-before {
  margin-left: -20px;
  left: 0;
  border-left: 2px solid;
  border-radius: 5px 0px 0px 5px;
}

/*En cours de remplissage*/
#formation-progressbar-body div[data-state="0"] {
  background: #f09700;
}

/*Quota atteint*/
#formation-progressbar-body div[data-state="1"] {
  background: #00bb00;
}

/*Validée*/
#formation-progressbar-body div[data-state="2"] {
  background: #00bb00;
}

/*Annulée*/
#formation-progressbar-body div[data-state="3"] {
  background: #c4c4c4;
}

/*Terminée*/
#formation-progressbar-body div[data-state="4"] {
  background: #0069cc;
}