/* your styles go here */
.cursor-pointer {
    cursor: pointer;
}

.cellule1 {
    width: 9%;
    text-align: right;
    font-family: "Quicksand";
    font-size: 1em;
}

.cellule1-2 {
    width: 9%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
}

.cellule2 {
    width: 9%;
    text-align: right;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
}

.cellule2-2 {
    width: 9%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
}

.cellule3 {
    width: 12.5%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
}

.cellule4 {
    width: 12.5%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
    color: white;
    background-color: #4680ff;
}

.cellule5 {
    width: 12.5%;
    text-align: right;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
    color: white;
    background-color: #4680ff;
}

.cellule6 {
    width: 12.5%;
    text-align: right;
    font-family: "Quicksand";
    font-size: 1em;
}

.cellule7 {
    width: 12.5%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
}

.cellule8 {
    width: 12.5%;
    text-align: right;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
}

.cellule9 {
    width: 12.5%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
}

.cellule10 {
    width: 20%;
    text-align: right;
    font-family: "Quicksand";
    font-size: 1em;
}

.cellule11 {
    width: 20%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
}

.cellule12 {
    width: 25%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
}

.cellule13 {
    width: 15%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
}

.cellule14 {
    width: 10%;
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
}

.celluledata {
    text-align: right;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
}

.cellulegrasdroit {
    text-align: right;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
}

.cellulegrasgauche {
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
    font-weight: bold;
}

.celluledroit {
    text-align: right;
    font-family: "Quicksand";
    font-size: 1em;
}

.cellulegauche {
    text-align: left;
    font-family: "Quicksand";
    font-size: 1em;
}

.graphique {
    width: 1500px;
    height: 800px;
    margin: 0 auto;
}

.quicksand {
    font-family: "Quicksand";
}

.quicksandBold {
    font-family: "Quicksand";
    font-weight: bold;
}

.quicksandWhite {
    font-family: "Quicksand";
    color: white;
}

.quicksandBoldWhite {
    font-family: "Quicksand";
    color: white;
    font-weight: bold;
}

.lightgrey {
    background-color: #e5e5e5;
}

.headerLightBlue {
    background-color: cornflowerblue;
}

.headerBlue {
    background-color: #0077b6;
}

.cursor-pointer {
    cursor: pointer;
}

.progress-bar {
    border-radius: 10px;
}

.progress {
    border-radius: 10px;
}

.center {
    text-align: center;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}

.badge-bronze {
    background-color: brown;
}

.badge-gold {
    background-color: gold;
    color: black;
}

/* --------- 
     GAUGE
   --------- */

/* TAILLE DE LA GAUGE */
.outer {
    position: relative;
    width: 150px;
    height: 100px;
}

.canvas2 {
    position: absolute;
}

/* DECALAGE DU TEXTE */
.percent {
    position: absolute;
    left: 55%;
    /* (Horizontale , Verticale) */
    transform: translate(-50%, 0%);
    font-size: 15px;
    font-family: "Quicksand";
    font-weight: bold;
    bottom: 15%;
    color: #808080;
}

/* ---------- */