.progress-container {
    background-color: lightgrey;
    border-radius: 10px;
    overflow: hidden;
    height: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  }
  
  

  
  .progress-bar {
    height: 100%;
    background-color:blue;
    transition: width 0.4s ease-in-out;
  }



/*  //De 0 à 20 % : e8412a

  //De 20 à 40 % : eb6109
  
  //De 40 à 60 : ffde59
  
  De 60 à 80 : bbce00
  
  De 80 à 100 : 009640
*/

  .scan_0,  
  .scan_1,
  .scan_2,
  .scan_3,
  .scan_4,
  .scan_5, 
  .scan_6,
  .scan_7,
  .scan_8,
  .scan_9,
  .scan_10,
  .scan_11,
  .scan_12,
  .scan_13,
  .scan_14,
  .scan_15,
  .scan_16,
  .scan_17,
  .scan_18,
  .scan_19,
  .scan_20
  {
    background-color:#e8412a;
  }

  .scan_21,
  .scan_22,
  .scan_23,
  .scan_24,
  .scan_25, 
  .scan_26,
  .scan_27,
  .scan_28,
  .scan_29,
  .scan_30,
  .scan_31,
  .scan_32,
  .scan_33,
  .scan_34,
  .scan_35,
  .scan_36,
  .scan_37,
  .scan_38,
  .scan_39,
  .scan_40
  {
    background-color:#eb6109;
  }


  .scan_41,
  .scan_42,
  .scan_43,
  .scan_44,
  .scan_45, 
  .scan_46,
  .scan_47,
  .scan_48,
  .scan_49,
  .scan_50,
  .scan_51,
  .scan_52,
  .scan_53,
  .scan_54,
  .scan_55,
  .scan_56,
  .scan_57,
  .scan_58,
  .scan_59,
  .scan_60
  {
    background-color:#ffde59;
  }


  .scan_61,
  .scan_62,
  .scan_63,
  .scan_64,
  .scan_65, 
  .scan_66,
  .scan_67,
  .scan_68,
  .scan_69,
  .scan_70,
  .scan_71,
  .scan_72,
  .scan_73,
  .scan_74,
  .scan_75,
  .scan_76,
  .scan_77,
  .scan_78,
  .scan_79,
  .scan_80
  {
    background-color:#bbce00;
  }


  .scan_81,
  .scan_82,
  .scan_83,
  .scan_84,
  .scan_85, 
  .scan_86,
  .scan_87,
  .scan_88,
  .scan_89,
  .scan_90,
  .scan_91,
  .scan_92,
  .scan_93,
  .scan_94,
  .scan_95,
  .scan_96,
  .scan_97,
  .scan_98,
  .scan_99,
  .scan_100
  {
    background-color:#009640;
  }



.scan_0 {
    width: 1%;
}


.scan_1 {
    width: 1%;
}

.scan_2 {
    width: 2%;
}

.scan_3 {
    width: 3%;
}

.scan_4 {
    width: 4%;
}

.scan_5 {
    width: 5%;
}

.scan_6 {
    width: 6%;
}

.scan_7 {
    width: 7%;
}

.scan_8 {
    width: 8%;
}

.scan_9 {
    width: 9%;
}

.scan_10 {
    width: 10%;
}

.scan_11 {
    width: 11%;
}

.scan_12 {
    width: 12%;
}

.scan_13 {
    width: 13%;
}

.scan_14 {
    width: 14%;
}

.scan_15 {
    width: 15%;
}

.scan_16 {
    width: 16%;
}

.scan_17 {
    width: 17%;
}

.scan_18 {
    width: 18%;
}


.scan_19 {
    width: 19%;
}

.scan_20 {
    width: 20%;
}

.scan_21 {
    width: 21%;
}

.scan_22 {
    width: 22%;
}

.scan_23 {
    width: 23%;
}

.scan_24 {
    width: 24%;
}

.scan_25 {
    width: 25%;
}

.scan_26 {
    width: 26%;
}

.scan_27 {
    width: 27%;
}

.scan_28 {
    width: 28%;
}

.scan_29 {
    width: 29%;
}

.scan_30 {
    width: 30%;
}

.scan_31 {
    width: 31%;
}

.scan_32 {
    width: 32%;
}

.scan_33 {
    width: 33%;
}


.scan_33 {
    width: 33%;
}

.scan_34 {
    width: 34%;
}

.scan_35 {
    width: 35%;
}

.scan_36 {
    width: 36%;
}

.scan_37 {
    width: 37%;
}

.scan_38 {
    width: 38%;
}

.scan_39 {
    width: 39%;
}

.scan_40 {
    width: 40%;
}

.scan_41 {
    width: 41%;
}

.scan_42 {
    width: 42%;
}

.scan_43 {
    width: 43%;
}

.scan_44 {
    width: 44%;
}

.scan_45 {
    width: 45%;
}

.scan_46 {
    width: 46%;
}

.scan_47 {
    width: 47%;
}

.scan_48 {
    width: 48%;
}

.scan_49 {
    width: 49%;
}

.scan_50 {
    width: 50%;
}

.scan_51 {
    width: 51%;
}

.scan_52 {
    width: 52%;
}

.scan_53 {
    width: 53%;
}

.scan_54 {
    width: 54%;
}

.scan_55 {
    width: 55%;
}

.scan_56 {
    width: 56%;
}

.scan_57 {
    width: 57%;
}

.scan_58 {
    width: 58%;
}

.scan_59 {
    width: 59%;
}

.scan_60 {
    width: 60%;
}

.scan_61 {
    width: 61%;
}

.scan_62 {
    width: 62%;
}

.scan_63 {
    width: 63%;
}

.scan_64 {
    width: 64%;
}

.scan_65 {
    width: 65%;
}

.scan_66 {
    width: 66%;
}

.scan_67 {
    width: 67%;
}

.scan_68 {
    width: 68%;
}

.scan_69 {
    width: 69%;
}

.scan_70 {
    width: 70%;
}

.scan_71 {
    width: 71%;
}

.scan_72 {
    width: 72%;
}

.scan_73 {
    width: 73%;
}

.scan_74 {
    width: 74%;
}

.scan_75 {
    width: 75%;
}

.scan_76 {
    width: 76%;
}

.scan_77 {
    width: 77%;
}

.scan_78 {
    width: 78%;
}

.scan_79 {
    width: 79%;
}

.scan_80 {
    width: 80%;
}

.scan_81 {
    width: 81%;
}

.scan_82 {
    width: 82%;
}

.scan_83 {
    width: 83%;
}

.scan_84 {
    width: 84%;
}

.scan_85 {
    width: 85%;
}

.scan_86 {
    width: 86%;
}

.scan_87 {
    width: 87%;
}

.scan_88 {
    width: 88%;
}

.scan_89 {
    width: 89%;
}

.scan_90 {
    width: 90%;
}

.scan_91 {
    width: 91%;
}

.scan_92 {
    width: 92%;
}

.scan_93 {
    width: 93%;
}

.scan_94 {
    width: 94%;
}

.scan_95 {
    width: 95%;
}

.scan_96 {
    width: 96%;
}

.scan_97 {
    width: 97%;
}

.scan_98 {
    width: 98%;
}

.scan_99 {
    width: 99%;
}

.scan_100 {
    width: 100%;
}