@charset "UTF-8";
/* CSS Document */

.pedagometer_wrapper {
  height: 300px;
 margin: 0 auto;
  width: 70%;
}

.target-wrapper {
  position: relative;
  width: 400px;
  height: 200px;
top:50px;
}

.circle_100 {
  height: 200px;
  width: 400px;
  border-radius: 200px 200px 0 0;
  -moz-border-radius: 200px 200px 0 0;
  -webkit-border-radius: 200px 200px 0 0;
  border: solid #686868;
  border-bottom: none;
  border-width: 1px;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.circle_75 {
  height: 173px;
  width: 346px;
  border-radius: 173px 173px 0 0;
  -moz-border-radius: 173px 173px 0 0;
  -webkit-border-radius: 173px 173px 0 0;
  border: solid #686868;
  border-width: 1px;
  background: none;
  border-bottom: none;
  position: absolute;
  top: 27px;
  left: 27px;
}

.circle_50 {
  height: 142px;
  width: 284px;
  border-radius: 142px 142px 0 0;
  -moz-border-radius: 142px 142px 0 0;
  -webkit-border-radius: 142px 142px 0 0;
  border: solid #686868;
  border-bottom: none;
  border-width: 1px;
  background: none;
  position: absolute;
  top: 58px;
  left: 58px;
}

.circle_25 {
  height: 100px;
  width: 200px;
  border-radius: 100px 100px 0 0;
  -moz-border-radius: 100px 100px 0 0;
  -webkit-border-radius: 100px 100px 0 0;
  border: solid #686868;
  border-bottom: none;
  border-width: 1px;
  background: none;
  position: absolute;
  top: 100px;
  left: 100px;
}

.tag_title {
  color: #686868;
  bottom: -42px;
  left: 20px;
  position: absolute;
}

.tagl_title {
  color: #686868;
  bottom: -42px;
  left: 290px;
  position: absolute;
}

.green-circle {
  background: #428F89;
  border: 0px;
  position: absolute;
  border-bottom: none;
}

.yellow-circle {
  background: #FBA827;
  position: absolute;
  border-bottom: none;
}

.tag_100 {
  color: #686868;
  bottom: -23px;
  left: -15px;
  position: absolute;
}

.tag_75 {
  color: #686868;
  bottom: -23px;
  left: 15px;
  position: absolute;
}

.tag_50 {
  color: #686868;
  bottom: -23px;
  left: 50px;
  position: absolute;
}

.tag_25 {
  color: #686868;
  bottom: -23px;
  left: 92px;
  position: absolute;
}

.tagl_100 {
  color: #686868;
  bottom: -23px;
  left: 390px;
  position: absolute;
}

.tagl_75 {
  color: #686868;
  bottom: -23px;
  left: 367px;
  position: absolute;
}

.tagl_50 {
  color: #686868;
  bottom: -23px;
  left: 335px;
  position: absolute;
}

.tagl_25 {
  color: #686868;
  bottom: -23px;
  left: 295px;
  position: absolute;
}

.sensibility-wrapper {
  position: relative;
  top: 138px;
  left: 23px;
}

.sensibility-50 {
  height: 215px;
  width: 2px;
  border: solid #686868;
  border-bottom: none;
  border-top: none;
  border-right: none;
  border-width: 1px;
  position: absolute;
  background: none;
  left: 200px;
  bottom: 0px;
}

.sensibility-17 {
  height: 215px;
  width: 2px;
  border: solid #686868;
  border-bottom: none;
  border-top: none;
  border-right: none;
  border-width: 1px;
  transform: rotate(-60deg);
  position: relative;
  background: none;
  left: 107px;
  bottom: -37px;
}

.sensibility-33 {
  height: 215px;
  width: 2px;
  border: solid #686868;
  border-bottom: none;
  border-top: none;
  border-right: none;
  border-width: 1px;
  transform: rotate(-30deg);
  position: absolute;
  background: none;
  left: 147px;
  bottom: -15px;
}

.sensibility-00 {
  height: 2px;
  width: 430px;
  border: solid #686868;
  border-top: none;
  border-right: none;
  border-left: none;
  border-width: 1px;
  position: absolute;
  background: none;
  left: -15px;
  bottom: 0px;
}

.sensibility-67 {
  height: 215px;
  width: 2px;
  border: solid #686868;
  border-bottom: none;
  border-top: none;
  border-right: none;
  border-width: 1px;
  transform: rotate(30deg);
  position: absolute;
  background: none;
  left: 255px;
  bottom: -15px;
}

.sensibility-83 {
  height: 215px;
  width: 2px;
  border: solid #686868;
  border-bottom: none;
  border-top: none;
  border-right: none;
  border-width: 1px;
  transform: rotate(60deg);
  position: absolute;
  background: none;
  left: 294px;
  bottom: -55px;
}

.tag_00 {
  color: #686868;
  left: -24px;
  bottom: -10px;
  position: absolute;
}

.tag_17 {
  color: #686868;
  position: absolute;
  bottom: 100px;
  left: -17px;
}

.tag_33 {
  color: #686868;
  bottom: 185px;
  left: 84px;
  position: absolute;
}

.tag_50s {
  color: #686868;
  position: absolute;
  bottom: 220px;
  left: 193px;
}

.tag_67 {
  color: #686868;
  bottom: 185px;
  left: 303px;
  position: absolute;
}

.tag_83 {
  color: #686868;
  bottom: 98px;
  left: 390px;
  position: absolute;
}

.tag_100s {
  color: #686868;
  left: 418px;
  bottom: -10px;
  position: absolute;
}


.arrow {
  width: 2px;
  border-left: 2px solid #0033cc;
  position: absolute;
}

.point {
  width: 0px;
  height: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #0033cc;
  right: -4px;
  top:-2px;
  position: absolute;
}

.tag_sensibilite {
  color: #686868;
  position: absolute;
  left: -10px;
  top: 20px;
  transform: rotate(-45deg);
}

.tag_elitisme {
  color: #686868;
  position: absolute;
  left: 330px;
  top: 20px;
  transform: rotate(45deg);
}