.soundex{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:auto auto 1fr;
  height:100%;
  grid-gap:5px;
}
.soundex .header1{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-rows:1fr auto 1fr;
}
.soundex .header1 *:nth-child(1){
  grid-column:2;
  grid-row:2
}
.soundex .mots{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,50px));
  grid-gap:5px;
  padding:5px;
  width:100%;
  height:fit-content;
  max-height:300px;
  overflow:auto;
  margin:0 auto;
}
body{
  background:whitesmoke;
}
.ServiceEtiquete{
  margin: 0;
  width: 164px;
  text-align: center;
  border-radius: 7px;
  box-shadow: 0 0 5px black;
}
.ServiceEtiquete > img{
  box-shadow:initial;
  border-radius: 0;
}
.provisoir{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-row-gap:7px;
  padding:7px;
}
.provisoir p,.provisoir button{
  grid-column:1/4;
  margin:0 auto;
}
.provisoir p{
  text-align:center;
}
.listAchats{
  border-collapse:collapse;
  max-width:500px;
  width:100%;
  max-height:100%;
  grid-column:2;
  margin:0 auto;
}
.listAchats th{
  position:sticky;
  top:0;
}
.listAchats tfoot{
  position:sticky;
  bottom:0;
}
.listAchats tbody tr{
  border-bottom:solid grey 1px;
}
.listAchats input{
  border:none;
  background:none;
  padding:10px;
  text-align:center;
  width:100%;
}
.listAchats button:not(.addCart){
  background:none;
  border:none;
  color:red;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
}
.QtyTicket{
  background: #19b366;
  color: white;
  font-weight: bold;
  width: fit-content;
  height: auto;
  font-size: 10px;
  border-radius: 0;
  position: absolute;
  padding: 5px;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  max-width: 50%;
  top: 0;
  right: 0;
  z-index: 2;
  text-align: center;
}
@keyframes rbtn_anim{
  from{opacity:0;}
  to{opacity:1;}
}
@@keyframes btnClicker {
  from{
    background:#00AB55;
  }to{
    background:auto;
  }
}
@keyframes line{
  from{
    background:linear-gradient(210deg, #19b366, transparent);
  }to{
    background:linear-gradient(45deg, #19b366, transparent);
  }
}
.incbtn:hover{
  filter:brightness(0.3);
}
.alertPanel,#ecommArriere,#Container_paner,.AccountShow,.alertArriere,.boutique{
  animation:rbtn_anim .5s;
}
.shl{
  text-align:center;
  color:white;
  background:#fb1d1d;
  border:none;
  box-shadow:0 0 10px #fb1d1d;
  border-radius:7px;
  margin:7px;
  padding:5px;
}
.freeLiv{
  text-align:center;
  color:white;
  background:#00AB55;
  border:none;
  box-shadow:0 0 10px #00AB55;
  border-radius:7px;
  margin:7px;
}
.freeLiv h3{
  margin:7px;
}
.inlineBloc{
  display:inline;
}
.inlineBloc *{
  display:inline-block;
  vertical-align:middle;
}
.shl p{
  margin:0
}
.shl h3{
  font-weight:bold;
  margin:0;
  padding:5px;
  border-radius:5px;
  background:transparent;
  color:white
}
.returnBtn{
  width:124px;
  border:none;
  background:none;
  cursor:pointer;
  overflow-x:hidden;
  animation:rbtn_anim .5s;
}
.returnBtn:hover path{
  fill:#fb1d1d;
}
.returnBtn path{
  transform: scale(3.5);
}
.scat0Items{
  background:white;
  border:none;
  border-bottom:solid transparent 2px;
}
.scat0Items:hover{
  border-bottom:solid #19b366 2px;
}
.listContainer{
  display:grid;
  grid-template-columns: 1fr;
  position:relative;
  width:100%;
  margin-bottom:5px
}
.scroller{
  position: absolute;
  height: 100%;
  width: 30px;
  background: rgba(0,0,0,.5);
  color: white;
}
.listContainer > div{
  overflow-y: hidden;
  overflow-x: hidden;
  width:auto;
}
.listContainer > div > div{
  width:max-content;
  display:grid;
}
.listContainer > div > div > div{
  grid-row:1
}
.panerProd,.panerProdReadOnly{
  display:grid;
  grid-template-columns:auto auto 1fr;
  padding:5px;
  grid-gap:7px;
  width:auto;
  border-radius:7px;
  margin:5px;
  box-shadow:0 0 5px lightgrey;
  background:white;
}
.panerProd button{
  width:50px;
  border:none;
  font-size:20px;
}
.panerProd .compter{
  display:inline;
  border-radius:7px;
}
.panerProd .compter span{
  display:inline-block;
  vertical-align: middle;
  text-align:center;
  min-width:50px;
  margin-top: 0px;
}
.CompterContainer{
  display:table;
  grid-column: 2/3;
}
.PriceContainer{
  grid-row: 2;
  grid-column:3;
  padding:4px 0
}
.totalDisplayer{

}
.grid3x3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,150px));
  padding-left:25px;
  padding-right:25px;
}
.grid5Mx3,.animProdsList{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,120px));
  grid-gap:5px;
  padding-left:0;
  padding-right:0;
  width:fit-content;
  min-width: 225px;
  max-width:100%;
  margin:0 auto;
}
.animProdsList{
  animation: rbtn_anim .5s;
}
.olClick{
  padding:0;
  margin:0;
  list-style-type:none;
  margin:0 auto;
  width:70%;
}
.olClick li{
  box-shadow:0 0 5px #024242;
  margin:7px;
  padding:7px;
  cursor:pointer;
  text-align:center;
  width:70%;
}
.olClick li:hover{
  background:#024242;
  color:darkcyan;
}
.defaultBtn{
  background:transparent;
  color:black;
  padding:5px;
  border:none;
  cursor:pointer;
  padding:7px;
  font-size:30px;
}
.addCart,.remCart,.majCart,.crosstockBtn,.orejBtn,.gototherPage{
  background:#61CE70;
  color:white;
  padding:5px;
  border-radius:7px;
  border:none;
  cursor:pointer;
  padding:7px;
}
.selectMotif{
  background:green;
  color:white;
  padding:5px;
  border-radius:7px;
  border:none;
  cursor:pointer;
  padding:7px;
}
.addCart *,.remCart *,.majCart *,.crosstockBtn *,.gototherPage *{
  display:inline-block;
  vertical-align: middle;
}
.addCart svg,.remCart svg,.majCart svg,.crosstockBtn svg,.gototherPage svg{
  width:25px;
  height:25px;
}
.addCart label,.remCart label,.majCart label,.crosstockBtn label,.gototherPage label{
  font-weight:bold;
}
.addCart:hover{
  background:#19b366;
}

.trackPage{
  background: white;
  display: grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows: auto auto 1fr auto;
  grid-gap:5px;
  height:100%;
  max-width:500px;
  margin:0 auto;
}
.trackPage > label{
  grid-column:1/4;
}
.trackPage_durationShow{
  grid-column:3;
  padding:5px;
  color:white;
  background:green;
  box-shadow:0 0 5px lightgreen;
  font-weight:bold;
  width:75px;
  text-align:center;
  position:sticky;
  top:0;
  z-index:2;
}
.trackPage_head{
  grid-column: 1/4;
  display:grid;
  grid-template-columns:auto 1fr auto;
}
.trackPage_head *{
  display:table-cell;
  vertical-align: middle;
}
.trackPage_idisplay{
  position:sticky;
  top:0;
  z-index:2;
  margin-bottom: 5px;
  margin-top:5px;
}
.trackPage_timeBar{
  display: grid;
  grid-template-columns: repeat(3,auto 1fr) auto;
  grid-gap: 0;
  padding: 5px;
  width: fit-content;
  margin: 0 auto;
}
.trackPage_timeBar *{
  opacity:.5
}
.trackPage_timeBar span:not(.line,.time,.resolved,.rejected){
  grid-row:1/4;
  border:solid black 1px;
  padding:3px;
  border-radius:3px;
}
.trackPage_timeBar .time{
  text-align:center;
}
.trackPage_timeBar .line{
  height:3px;
  border:solid black 1px;
  border-left:none;
  border-right:none;
  width:30px;
  grid-row:2
}
.trackPage_tableRow{
  display:grid;
  grid-template-columns:auto auto 1fr auto auto;
  grid-template-rows:auto 1fr;
  grid-column:1/4;
  grid-gap:5px;
  width:95%;
  background:whitesmoke;
  margin:0 auto;
  border-radius:8px;
  box-shadow:0 0 5px black;
}
.trackPage_clicSvg{
  display: block;
  width:30px;
  height:30px;
  border:solid green 2px;
  background:rgba(0,255,0,.5);
  border-radius:50%;
  margin-top:8px;
  margin-right:5px;
  grid-row:1/3;
}
.trackPage_clicSvg svg{
  margin-top:3px;
  margin-left:2px;
}
.trackPage_prodRow{
  background:white;
  border-bottom: solid grey 1px;
  display: grid;
  grid-template-columns:auto 1fr auto auto;
  grid-gap:5px;
}
.trackPage_prodRow > span{
  padding-top:10px;
  padding-bottom:10px;
}
.trackPage_foot{
  background:whitesmoke;
  display:grid;
  grid-template-columns:1fr;
  grid-gap:5px;
  grid-column:1/4;
  padding:5px;
  position:sticky;
  bottom: 0
}
.trackPage_foot > span b{
  float:right;
}
.trackPage #cartList{
  display: grid;
  grid-column:1/4;
  grid-template-columns: 1fr;
  padding:5px;
  max-height:33%;
  overflow-y:auto;
}
.trackPage_percentage{
  text-align:center;
  font-size:22px;
}
.trackPage_clicSvg *{
  display: inline;
  vertical-align: middle
}
.trackPage_clicSvg{
  border-radius:15px;
  color:green;
  width: auto;
}
.trackPage_clicSvg label{
  margin-right:5px;
}
.resolved,.rejected{
  opacity: 1;
  font-weight: bold;
  color: white;
  grid-row: 1/4;
  padding:3px;
  border-radius: 3px;
}
.resolved{
  background:#19b366;
  border:solid #19b366 1px;
}
.rejected{
  background:#fb1d1d;
  border:solid #fb1d1d 1px;
}

.MissionPage{
  display:grid;
  grid-template-columns:1fr repeat(5,auto) 1fr auto;
  grid-template-rows:1fr repeat(2,auto) 1fr auto;
  grid-gap:0px;
  grid-row-gap: 10px;
  height:100%;
}
.map{
  border:solid black 1px;
  grid-column:1/9;
}
.WorkPageHead{
  grid-column:1/9;
  background:white;
  grid-row:1;
  display:table
}
.WorkPageHead > *{
  display:table-cell;
  vertical-align: middle;
}
.WorkPageEtiquete{
  background:orange;
  color:yellow;
  font-weight:bold;
  border-radius:50%;
  width:15px;
  height:15px;
  font-size:10px;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Motif{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-row-gap:5px;
  width:300px;
}
.panier td{
  padding:15px;
}
.motif button{
  padding:12px;
  width:100%;
}
.WorkPageFoot{
  grid-column:1/9;
  grid-row:6;
  grid-column-gap: 7px;
  position:sticky;
  padding:7px;
  padding-top:0;
  padding-bottom:0;
  bottom:0;
  display:grid;
  background:white;
  grid-template-columns:repeat(2,1fr);
}
.WorkPageFoot span:nth-child(even){
  text-align:right;
}
.content td:nth-last-child(1){
  text-align:right;
}
.WorkPageSVGBtn{
  border-radius:50%;
  border:none;
  background:transparent;
  position:relative
}
.WorkPageSVGBtn svg{
   width:24px;
   height:24px
}
.WorkPageSVGBtn path{
  fill:black;
}
.WorkPageSVGBtn:hover path{
  fill:#19b366;
}
.WorkPageMapBottom{
  grid-row:2;
  grid-column:1/9;
  display:flex;
  align-items:center;
  justify-content: center;
  width:100%;
}
.WorkPageMapBottom > *{
  margin-left:10px;
  margin-right:10px;
}
.WorkPageContentTop{
  grid-row:3;
  grid-column:1/9;
  display: grid;
  grid-template-columns: 1fr auto;
  padding:7px;
  padding-top:0
}
.addCart:disabled,.remCart:disabled,.majCart:disabled{
  background:lightgrey;
  color:white;
}
.addCart:disabled:hover,.remCart:disabled:hover,.majCart:disabled:hover{
  background:lightgrey;
  color:white;
}
.msgIHM{
  grid-column:2;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr auto;
  width:100%;
  height:inherit;
  max-width: 500px;
  margin:0 auto;
}
.error{
  border:solid red 1px;
  border-radius:7px;
  box-shadow:0 0 5px red;
  background:rgba(255,0,0,.5);
  color:#db1a1a;
}
.error legend{
  font-weight:bold;
}
.error p{
  width:100%;
  text-align:justify;
  text-indent:7px;
}
.trackList{
  display: grid;
  grid-template-columns: 1fr;
  height: fit-content;
  grid-column: 2;
  grid-gap: 10px;
}
.trackList table{
  box-shadow: 0 0 5px black;
  padding: 10px;
  border-radius: 7px;
  border: solid black 1px;
  max-width: 500px;
  background-color: white;
}
#msg{
  resize:none;
  border:solid grey 1px;
  border-radius:7px;
  padding:5px;
  width:100%;
  height:40px;
  font-size:16px;
  font-family:lato;
  padding-right: 34px;
  position:relative;
}
#send{
  position: absolute;
  margin-left: -35px;
  height: 100%;
  border-radius: 0 7px 7px 0;
}
.msgIHM p{
  padding:5px;
  border-radius:7px;
  background:#19b366;
  color:white;
  border:solid green 1px;
  box-shadow:0 0 5px lime;
  width:calc(100% - 10px);
  text-align:justify;
  text-indent:15px;
  margin:0;
}
.msgIHM img,.msgIMG{
  width:30px;
  height:30px;
  border-radius:50%;
}
.msgIHM_head{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-column:1/3;
  position:sticky;
  top:0;
  background:whitesmoke
}
.msgIHM_head span:nth-child(3){
  grid-column: 1/3;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.msgIHM_head span:nth-child(2){
  text-align: right;
}
.msgIHM_foot{
  grid-column:1/3;
  position:sticky;
  bottom:-4px;
  background:whitesmoke
}
.msgIHM_List{
  display:grid;
  grid-template-rows:1fr auto;
  grid-column:1/3;
}
.msgIHM_List > div{
  grid-row:2;
  display:grid;
  grid-template-columns:1fr;
  grid-gap:25px;
  padding:5px;
}
.contact{
  grid-column:2/4;
  display:grid;
  grid-template-columns:auto 1fr;
}
.contact svg{
  width:30px;
  height:30px;
}
.contact *{
  display:inline;
  vertical-align: middle;
}
.contact input:not([type="button"]){
  width:calc(100% - 14px);
}
.contact input[type="button"]{
  width:100%;
}
.personal{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  grid-template-rows:repeat(9,auto) 1fr;
  grid-gap:5px;
  width:fit-content;
  max-width: 500px;
  margin:0 auto;
}
.personal input[type="text"]{
  background:transparent;
  border:solid lightgrey 1px;
}
.personal input:disabled{
  background:inherit;
  opacity:1;
  border:none;
  text-align: center;
}
.vehicule{
  margin: 0;
  padding: 10px;
  padding-top: 0;
  text-align: justify;
  text-indent: 15px;
  line-height: 20px;
}
.personal label{
  text-align:center;
}

.gototherPage{
  background:white;
  color:black;
  border-radius: 7px;
  box-shadow: 0 0 5px lightgrey;
}
.gototherPage:hover{
  background:lightgrey;
}

.remCart{
  background:#fb1d1d;
}
.remCart:hover{
  background:#db1a1a;
}
.orejBtn{
  float: right;
  color: #fb1d1d;
  background: transparent;
}
.orejBtn:hover{
  background:#db1a1a;
  color:white;
}
.crosstockBtn{
  background:#024242;
}
.crosstockBtn:hover,.activeCrosstockBtn{
  background:darkcyan;
}
.majCart{
  background:#ff6700;
}
.majCart:hover{
  background:orange;
}
.Etiquete{
  background: #19b366;
  color:white;
  font-weight: bold;
  width: fit-content;
  height: auto;
  padding:0 5px;
  font-size: 10px;
  border-radius: 50%;
  position:absolute;
  top:0;
  left:18px;
  z-index: 2;
  text-align: center;
}

.favBtn{
  background:none;
  border:none;
  cursor:pointer;
}
.ecommnavBar{
  display:grid;
  grid-template-columns:auto 1fr auto auto auto;
  position:sticky;
  top:0;
  background:#ff6700;
}
.ecommnavBar > div{
  display:table;
}
.ecommnavBar > div > div:not(.MissionPage){
  display:table-cell;
  vertical-align: middle;
}

.ecommnavBar nav{
  grid-column:1/7;
  padding:5px;
}
.ecommnavBar nav button{
  padding:7px;
  background: none;
  border:none;
  cursor:pointer;
  width:200px;
  margin-left:-5px;
  font-size:18px;
  font-weight:bold;
  border-right:solid #CCCCCC 1px;
  color:white;
}
.ecommnavBar nav button:hover{
  color:#19b366;
}
.ecommnavBar nav button:nth-child(1){
  border-left:solid #CCCCCC 1px;
}

.ecommsearchBar{
  display: grid;
  grid-template-columns: 1fr auto auto;
  margin:5px;
  border-radius:8px;
}
.ecommsearchBar span{
  grid-column:1/3;
}
.ecommsearchBar input{
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  width:220px;
  border: solid black 1px;
  color:black;
  border-right: none;
  border-radius: 8px 0 0 8px;
}
.ecommsearchBar button{
  width: 30px;
  height: 30px;
  margin-left: -5px;
  display: inline-block;
  vertical-align: middle;
  border: solid black 1px;
  background: none;
  border-left: none;
  cursor:pointer;
}
.ecommsearchBar #launcher{
  border-radius: 0 8px 8px 0;
}
.ecommsearchBar #disabler{
  border:none;
  padding-left:25px;
  width:auto
}
.ecommsearchBar button:hover svg{
  fill:#19b366;
}
.ecommsearchBar svg{
  margin-left: -5px;
  margin-top: 1px;
}
.compte{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:repeat(2,auto);
  width:fit-content;
  padding:5px;
  margin-right:10px;
  margin-top:3px;
  cursor:pointer;
}
.compte *{
  cursor:pointer;
}
.compte label:nth-last-child(1){
  color:white;
}
.compte:hover{
  background:orange;
}
.compte:hover label:nth-last-child(1){
  color:white;
}
.compte:hover svg{
  fill:white;
}
.compte svg{
  grid-row:1/3;
  transform: scale(1.25);
}
.catrbtn{
  background: #fb1d1d;
  border: none;
  height: 126px;
  width: 126px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  margin: 19%;
}
.catrbtn path{
  transform:scale(5,5)
}
.grid3x32{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,300px));
}
.grid3x32 > div{
  display:table;
  cursor:pointer;
  height:200px;
}
.grid3x32 > div > div{
  display:table-cell;
  vertical-align: middle;
  text-align:center;
}
.grid3x32 > div > div > img{
  width:100px;
  height:75px;
  transition:width 1s,height 1s;
}
.grid3x32 > div:hover img{
  width:150px;
  height:120px;
}
.grid3x32 > div > div > label{
  font-size:20px;
}
.grid3x32 > div:hover label{
  color:#19b366;
}
#addCartContainer{
  display:grid;
  grid-template-columns:1fr auto;
  max-width:153.3125px
}
#addCartContainer input{
  padding:5px;
  padding-top:10px;
  min-width:113px;
}
.catsListContainer > div > div,.categorie > div{
  display:table;
  cursor:pointer;
  margin:0 auto;
}
/*.catsListContainer > div > div:hover label,.categorie:hover label,.selectedCat >div label{
  color:#19b366;
}*/
.selectedCat > div label,.categorie:hover > div,.hoveredCat > div{
  color:white;
  font-size:20px;
}
#catPriority1 > div{
  display: table;
  box-shadow: 0 0 5px lightgrey;
  border-radius: 5px;
  height: fit-content;
  width:100%;
}
#catPriority1 img{
  width: 100px;
  height: 80px;
  display: table-cell;
  vertical-align: middle;
}
#catPriority1 label{
  text-align: left;
display: table-cell;
vertical-align: middle;
}
#catPriority1 > div > div{
  display: table-row;
}

#catPriority2 > div{
  display: table;
  box-shadow: 0 0 5px lightgrey;
  border-radius: 5px;
  height: fit-content;
  width:100%;
}
#catPriority2 > div > div{
  display:table-row;
}
#catPriority2 label{
  text-align:right;display: table-cell;vertical-align: middle;
}
#catPriority2 img{
  width:100px;height:80px;display: table-cell;vertical-align: middle;
}
.categorie,.categorie2{
  background:white;
}
.categorie2 img{
  width:70px;
  height:70px;
  display:table-cell;
  vertical-align: middle;
}
.categorie2 label{
  text-align:right;display: table-cell;vertical-align: middle;
}
.categorie2 > div{
  display: table;
  box-shadow: 0 0 5px lightgrey;
  border-radius: 5px;
  height: fit-content;
  width:100%;
}
.configBoard{
  display:grid;
  grid-template-columns:repeat(2,auto);
  grid-gap:15px;
  padding:15px;
  border:dotted white 1px;
  margin:15px;
  width:fit-content;
}
.clause{
  display:grid;
  grid-template-columns:auto auto;
  grid-gap:5px;
  border:solid white 1px;
  border-radius:7px;
  padding:5px;
  display:table;
}
.clause > label{
  display:table-cell;
  vertical-align: middle;
  color:white;
}
.switcher{
  color:grey;
  background:#3c3c3c;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  width:fit-content;
  position:relative;
  border-radius:7px;
  box-shadow:0 0 5px black;
  margin:7px;
  border:none;
  float:right;
}
.switcher label{
  padding:5px;
  width:80px;
  text-align:center;
}
.Disabler{
  transition:left .5s,background .5s,border-radius .5s,color .5s;
  position:absolute;
  left:0;
  width:80px;
  padding:5px;
  background:#fb1d1d;
  text-align:center;
  text-shadow: 0 0 5px orange;
  color:yellow;
  border-radius:7px 0 0 7px
}
.Enabler{
  transition:left .5s,background .5s,border-radius .5s,color .5s;
  position:absolute;
  left:90px;
  width:80px;
  padding:5px;
  background:#00AB55;
  text-align:center;
  text-shadow: 0 0 5px lightgreen;
  color:lime;
  border-radius:0 7px 7px 0;
}
.ttset{
  border-collapse:collapse
}
.ttset td,.ttset th{
  color:lightgrey;
}
.ttset ol{
  list-style-type: circle;
  margin: 0;
  padding-left: 20px;
  padding-right: 20px;
}
.ttset .liFoot{
  display:grid;
  grid-template-columns:auto 1fr auto;
}
.liFoot button{
  padding:5px;
  width:25px;
  height:25px;
  cursor:pointer;
  border-radius:50%;
}
.categorie2 > div > div{
  display:table-row;
}
.selectedCat > div,.categorie:hover > div,.hoveredCat > div{
  background:#19b366;
  box-shadow:0 0 5px #19b366;
  border-radius:8px;
  transition:width 1s,height 1s;
}
.selectedCat > div label,.selectedCat > div label:hover{
  color:white
}

.catsListContainer > div > div > div,.categorie > div > div{
  display:table-cell;
  vertical-align: middle;
  text-align:center;
}
.catsListContainer > div > div > div img,.categorie > div > div img{
  width:40px;
  height:40px;
  transition:width 1s,height 1s
}
.catsListContainer > div > div > div > label,.categorie > div > div > label{
  font-size:14px;
}
.categorie,.categorie2{
  animation: rbtn_anim .5s;
}
#prodsList1,#prodsList2,#prodsList3{
  padding-bottom:15px;
}
#prodsList1,#prodsList2,#prodsList3,#favprodList,#panerContent,#diversList{
  align-items: middle;
}
#prodsList1 > div,#prodsList2 > div,#prodsList3 > div,#favprodList > div,#panerContent > div:not(.ProfileEditor,.col-sm-12,.col,.row,.panerProd,.panerProdReadOnly,.boutique,.trackPage_foot,.trackPage,.trackPage_head){
  display:grid;
  grid-template-columns:auto;
  padding:5px;
  grid-gap:5px;
  width:fit-content;
  border:solid #ff8d00 1px;
  border-radius:7px;
  background: white;
  box-shadow: 0 0 5px lightgrey;
}
.boutique{
  position:relative;
  display: grid;
  grid-template-columns: auto;
  padding: 5px;
  grid-gap: 5px;
  width: fit-content;
  border: solid #ff8d00 1px;
  border-radius: 7px;
  background: white;
  box-shadow: 0 0 5px lightgrey;
}
#panerContent > div:not(.panerProdReadOnly,.boutique,.trackPage_foot,.col-sm-12,.col,.row,.container-content){
  grid-template-columns:auto 1fr;
  width:auto;
}
#prodsList1 > div,#prodsList2 > div,#prodsList3 > div,#favprodList > div,.boutique{
  border:none;
}
#prodsList1 > div .image,#prodsList2 > div .image,#prodsList3 > div .image,#favprodList > div .image,#panerContent > div .image{
  width:110px;
  height:110px;
  background-size:100% 100%
}
#scrollTop{
  position:fixed;
  bottom:20px;
  right:20px;
  background:rgba(0,0,0,.5);
  color:white;
  font-size:24px;
  display:none;
  width:50px;
  height:50px;
  border-radius:10px;
  box-shadow:0 0 5px black;
  border:none;
  cursor:pointer;
  transition:background .5s;
  z-index:7;
}
#scrollTop:hover{
  background:black;
}

#Container_paner,.Container_paner{
  width:100%;
  overflow-y:auto;
  position:fixed;
  bottom:0;
  z-index: 5;
  background:white;
  transition:height .5s;
  margin-top:250px;
  display:grid;
  grid-template-columns:1fr auto auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap:5px;
  height:0px;
}

.OptionPanel{
  grid-column:2;
  display:grid;
  grid-template-rows:repeat(6,auto) 1fr auto auto 1fr;
  grid-template-columns: repeat(2,1fr);
  width: fit-content;
  overflow:auto;
}
.OptionPanel_URL{
  grid-row:1;
  grid-column:1/3;
}
.OptionPanel_Photo{
  grid-row: 2/5;
  grid-column: 1;
  display:grid;
  grid-template-rows: auto 1fr;
}
.OptionPanel_Desc{
  grid-row: 5/8;
  grid-column: 1;
  width:300px;
}
.OptionPanel_ProdName{
  grid-row: 2;
  grid-column:2
}
.OptionPanel_Marc{
  grid-row: 3;
  grid-column:2
}
.OptionPanel_Vars{
  grid-row: 4;
  grid-column:2
}
.OptionPanel_Price{
  grid-row: 5;
  grid-column:2
}
.OptionPanel_Adder{
  grid-row: 6;
  grid-column:2
}
.OptionPanel_ReviewAdd{
  grid-row: 9;
  grid-column:1/3;
  display: grid;
  grid-template-columns: 1fr auto;
}
.OptionPanel_ReviewSpace{
  grid-row: 10;
  grid-column:1/3
}
.OptionPanel_hr{
  grid-column: 1/3;
  grid-row: 8;
  width:100%;
}

#Container_paner div:nth-child(2):not(.msgIHM,.msgIHM_List,.gaindisplay,.Journal,.HeadEtiquete,.itemList),
.Container_paner div:nth-child(2):not(.msgIHM,.msgIHM_List,.gaindisplay,.Journal,.HeadEtiquete,.itemList){
  display:grid;
  grid-template-rows:repeat(3,auto) 1fr;
  grid-column-gap: 5px
}

.Journal{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(5,auto) 1fr;
  grid-gap:5px;
  width:100%;
  max-width:500px;
  grid-column:2
}
.Journal svg{
  width:30px;
  height:25px;
}
.Journal h3 *{
  display:table-cell;
  vertical-align:middle;
}
.Journal h3{
  margin-top:5px;
  margin-bottom:5px;
}
.gaindisplay{
  grid-column:1/3;
  grid-row:2;
  display:table;
}
.gaindisplay > div{
  display:table-row;
}
.JournalEtiquete{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:repeat(3,auto);
  height:fit-content;
  padding:10px;
  text-align:center;
  color:white;
}
.gaindisplay > div > span{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  font-weight:bold;
  color:#ff6700;
  font-size:20px;
  height:75px;
}
#StarNotation *{
  margin:0 auto;
}
.HeadEtiquete{
  grid-column: 1/3;
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.HeadEtiquete > span{
  display:table-cell;
  vertical-align:middle;
}
.HeadEtiquete > span *{
  display:inline;
  vertical-align:middle;
}
.itemList{
  display:grid;
  grid-template-columns:repeat(3,auto) 1fr repeat(2,auto);
  grid-gap:5px;
  border:none;
  padding:5px;
}
.numDisplay{
  grid-column:1;
  grid-row:1/4;
  display:table;
}
.numDisplay > b{
  display:table-cell;
  vertical-align:top;
  text-align:center;
}
.idDisplay{
  grid-column:2/7;
  grid-row:1;
  font-weight:bold;
  text-align: left;
}
.timeDisplay{
  color:grey;
  grid-column:2/7;
  grid-row:2;
  text-align:left;
}
.timeDisplay font{
  margin-left:15px;
}
.keyxchg{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-gap:5px;
  padding:5px;
}
.keyxchg input{
  padding:5px;
  grid-column:1/3;
}
.title{
  margin-bottom: 0;
}
.desc{
  width:300px;
  padding:5px;
  text-indent:10px;
  line-height:25px;
  text-align:justify;
  margin:0;
}
.desc2{
  width: 300px;
  text-align: justify;
  text-indent: 7px;
  line-height: 25px;
  margin: 0 auto;
}
.price{
  color:brown;
  font-weight:bold;
  font-size:20px;
  text-align:right;
  width:100%;
}
.addList{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:auto 1fr;
  grid-gap: 5px;
}
.addList > div{
  width:300px;
  max-height:300px;
  overflow:auto;
  display: grid;
  grid-template-columns: repeat(2,auto);
  grid-gap: 5px;
}
#form{
  box-shadow:0 0 5px black;
  display:grid;
  grid-template-columns:1fr auto;
}
#form *{
  padding:5px;
}
#form input{
  border:solid #CCCCCC 1px;
  background:#CCCCCC;
  border-right:none;
  min-width:210px;
}
#form select{
  border:solid #CCCCCC 1px;
  background:#CCCCCC;
  padding-top:4px;
  padding-bottom:4px;
  border-left:none;
  margin-left:-5px;
}
.info{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto;
  grid-gap:10px;
}
.variante{
  padding:0;
  margin:0;
  list-style-type:none;
}
.variante dt{
  font-weight:bold;
}
.variante dd{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:5px;
  padding:7px;
}
.variante span{
  padding:5px;
  border:solid #CCCCCC 2px;
  border-radius:7px;
  cursor:pointer;
  min-width:50px;
  min-height:40px;
  display:table-cell;
  vertical-align: middle;
  text-align:center;
}
.variante span:hover,.actived{
  background:#19b366;
  color:white;
  border:solid #19b366 2px;
  box-shadow: 0 0 5px black;
}
.disactived{
  background:#fb1d1d;
  color:white;
  box-shadow:0 0 5px black;
}

#panierShow{
  background:whitesmoke;
  height:0px;
  transition:height .5s;
  grid-column:1/7;
  display:grid;
  grid-template-rows:1fr auto;
  overflow-y:hidden;
}
#trackPage{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:repeat(3,auto) 1fr;
  grid-gap:10px;
  padding:5px;
  background:lightgrey;
}
#diversList{
  grid-column:1/-1;
  padding-left:0px;
  padding-right:0px;
}
#panerContent{
  margin:0 auto;
  width:fit-content;
}
#panerContent,#diversList > div{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,400px));
  grid-template-rows:1fr auto;
  grid-gap:0px;
}
#panerFooter{
  display:grid;
  grid-template-columns:1fr auto;
  grid-gap:10px;
  background:#b0efb0;
  position:sticky;
  bottom:0;
  z-index: 3;
}
#panerFooter .money{
  display:grid;
  grid-template-columns:1fr;
  grid-gap:10px;
  padding:10px;
  font-size:20px;
}
#panerFooter .money b{
  float:right;
  font-weight: normal;
}
#panerFooter .money div{
  min-width:250px;
  max-width:100%;
}
#panierShow fieldset{
  border:none;
}
#panierShow fieldset legend:not(#diversList legend){
  padding:0;
  border-radius:7px;
  color:white;
  width:calc(100% - 14px);
  position:sticky;
  top: 0;
  z-index: 3
}
.money #foot button{
  float:right;
  background:#19b366;
  color:white;
  padding:5px;
  border:none;
  width:100%;
  height:50px;
  cursor:pointer;
  font-size: 20px;
}
.money #foot button:hover{
  background:#0c6c3c;
  box-shadow:0 0 5px black;
}
.money #foot button:active{
  box-shadow:0 0 0 black;
}
.applyBtn{
  display:grid;
  grid-template-columns:1fr auto;
  box-shadow:0 0 5px black;
}
.applyBtn *{
  padding:15px;
  border:none;
}
.applyBtn button{
  background:#19b366;
  color:white;
}
.applyBtn button:hover{
  background:#0c6c3c;
}
.xchgCell{
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 30px;
  border: solid orange 2px;
  padding: 5px;
}
.xchgForm{
  display:grid;
  grid-template-columns:1fr auto;
  grid-gap:30px;
  border:solid orange 2px;
  padding:5px;
  background:orange;
}
.xchgForm *{
  padding:5px;
  border:solid black 1px;
  background:none;
}

.ConfirmContent{
  display:grid;
  grid-template-columns:repeat(2,auto);
  grid-template-rows:auto 1fr;
  width:fit-content;
  grid-gap:5px;
  padding:5px
}
.ConfirmContent .Form input{
  width:100%;
  padding:9px 5px 9px 5px;
  border:none;
  border-radius:8px;
  font-weight: bold;
}
.ConfirmContent .ConfirmFoot{
  grid-column:1/3;
}
.ConfirmContent .ConfirmFoot button{
  float:right;
  width:120px;
  padding:5px;
  border:none;
}
.ConfirmContent .mapContainer{
  display:table;
  grid-row:1/4;
  grid-column-start:2
}
.ConfirmContent .mapContainer > div{
  display: table-cell;
  vertical-align: top;
  text-align: left;
}
.ConfirmContent .Form{
  display:grid;
  grid-gap:5px;
  padding:5px;
  grid-template-columns: 1fr auto;
}
#listCommande{
  display:grid;
  grid-template-columns:1fr;
  grid-gap:5px;
  padding:5px;
  margin:5px;
}
#listCommande > div .identifer{
  color:darkcyan;
  text-decoration: underline;
  grid-column:2
}
#listCommande > div .price{
  grid-column:2;
  color:#fb871d;
  font-weight:bold;
}
#listCommande > div .client,#listCommande > div .price{
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: -10px;
  margin-bottom: -10px;
}
#listCommande > div{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:5px;
  cursor:pointer;
  border-bottom:solid lightgrey 1px;
  transition:box-shadow .5s,background .5s;
}
#listCommande > div:active{
  background:#024242;
  color:white;
}
#listCommande > div:active path{
  fill:white;
}
#listCommande > div:hover{
  box-shadow:0 0 5px lightgrey;
}
#listCommande > div > div{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto 1fr;
}
#listCommande > div > div svg{
  grid-row:1/4;
  width:30px;
  height:23px;
}
#listCommande > div > div label{
  grid-row:2;
  height:fit-content;
}
#listCommande > div button{
  grid-template-columns:1/-1;
  padding:5px;
}
.pcMarc,.pcName{
  display:block;
}
.mobileMarc,.mobileName{
  display:none;
}
.ecommFooter{
  background:#00AB55;
  color:white;
  display:grid;
  padding:15px;
  position:fixed;
  bottom:0;
  width:100%;
  height:auto;
  z-index:6;
}
.ecommFooter > div:nth-child(1){
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:repeat(5,auto) 1fr;
  grid-gap:10px;
  font-size:20px
}
.ecommFooter a{
  color:#19b366;
  text-decoration:underline;
}
.ecommArriere,#ecommArriere{
  height: 100%;
  position: fixed;
  background: rgba(0,0,0,.5);
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.AccountShow{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:repeat(10,auto) 1fr;
  grid-gap:5px;
  padding:10px;
  position:absolute;
  width:0px;
  z-index:3;
  background:white;
  height:100%;
  transition:width .5s,margin-left .5s;
  overflow-x:hidden;
  overflow-y:auto;
  float:right;
}
.AccountShow hr{
  width:100%;
}
.AccountShow button{
  width:100%;
  padding:12px;
  background:none;
  border:none;
  transition:background .5s;
  cursor:pointer;
  text-align:left;
  font-size: 18px;
}
.AccountShow button:hover{
  background:grey;
}

.cellule:not(.Formulaire .Cellule){
  display:grid;
  grid-template-rows:auto 1fr;
  background:white;
  border-radius:7px;
  box-shadow:0 0 5px black;
}
.cellule > div:nth-child(1){
  background:#19b366;
  color:green;
  font-weight:bold;
  font-size:24px;
  padding:7px;
  border-radius:7px 7px 0 0
}
.cellule > div:nth-child(2){
  padding:5px;
}
ul{
  list-style-type: none;
  margin: 0;
  padding:0
}
ul dd{
  margin:5px 0 5px 17px;
  text-align:right
}
ul dt{
  font-weight: bold
}
.timebar{
  display:grid;
  grid-template-columns:repeat(4,auto 1fr);
  grid-template-rows:1fr auto 1fr;
}
.line{
  border:solid grey 1px;
  height:0;
  grid-row:2
}
.cell{
  border:solid grey 1px;
  display:table;
  border-radius:7px;
  width:150px;
  grid-row:1/4;
  padding:5px;
}
.cell span{
  display:table-cell;
  vertical-align: middle;
  text-align:center;
}
.activeStep{
  background:#19b366;
  border:solid #19b366 1px;
  color:white;
}
#trackPage{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:repeat(3,auto) 1fr;
  grid-gap:10px;
  padding:5px;
  background:lightgrey;
}
#trackPage .track{
  grid-column:1/3;
  grid-row:1;
}
#trackPage .Livreur{
  grid-column:2;
  grid-row:2
}
#trackPage .contenu{
  grid-column:1;
  grid-row:2/5;
}
#trackPage .paiement{
  grid-column:2;
  grid-row:3;
}
#trackPage .space{
  grid-column:2;
  grid-row:4
}
.panerProdReadOnly{
  height:fit-content;
  position:relative;
}
.reviewAdd{
  grid-column:2/4;
  grid-row:3
}
.reviewSpace{
  grid-column:2/4;
  grid-row:4
}
.review{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-gap:5px;
  padding:5px;
  border-bottom: solid grey 1px;
}
.review .content{
  grid-column:1/3;
  line-height: 23px;
  text-align:justify;
  padding:10px;
  text-indent:20px;
  width: calc(100% - 20px);
}
.review .writat{
  color:grey;
  font-size:15px;
  text-align: right;
}
#reviewContent{
  width:100%;
  height:80px;
  resize:none;
  border:solid green 1px;
  transition:box-shadow .5s;
  padding:5px;
  grid-column:1/3;
}
#reviewContent:hover,#reviewContent:focus{
  box-shadow:0 0 5px #19b366;
}
.reviewAdd{
  display:grid;
  grid-template-columns:1fr auto;
  height:fit-content;
}
.reviewFooter{
  display:grid;
  grid-template-columns:1fr auto;
  grid-column:1/3
}
h2{
  margin-bottom: 0;
}
#qrcode img{
  margin:16px;
}
#panier_desc{
  max-width: 310px;
  min-width: 310px;
  text-indent: 10px;
  text-align: justify;
  line-height: 20px;
}
.ProfileEditor{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr;
  grid-gap:8px;
  padding:8px;
  width:calc(100% - 22px);
  height:100%;
}
.ProfileEditor fieldset{
  border:none;
  border-top:solid grey 1px;
  padding:8px;
  box-shadow:0 0 5px black;
  background:whitesmoke;
}
.ProfileEditor legend{
  border:none;
  background:white;
  text-align:center;
  padding:5px;
}
.ProfileEditor input{
  padding:7px;
  font-size:20px;
}
.ProfileEditor #personalInfo{
  display:grid;
  grid-template-columns:1fr auto;
  grid-gap:5px;
  width:fit-content;
  height:fit-content;
  padding:5px
}
.ProfileEditor #listAddress{
  grid-column:1/3;
  height:300px;
  overflow-y:auto;
}
.ProfileEditor h2{
  margin-top:5px;
  color:#19b366;
}
.ProfileEditor fieldset:nth-child(2){
  width:100%;
  height:100%;
  overflow-y:auto;
  grid-row:1/3;
  grid-column:2
}
.ProfileEditor fieldset:nth-child(2) > div{
  display:grid;
  grid-template-columns:1fr auto;
  grid-gap:5px;
}
.ProfileEditor fieldset:nth-child(2) > div > div{
  grid-column:1/3;
}
.ProfileEditor .item{
  background:white;
  width:95%;
  box-shadow:0 0 5px black;
  margin:0 auto;
  margin-top:10px;
}
.ProfileEditor .item:hover{
  background:linear-gradient(45deg, #19b366, transparent);
  animation-name:line;
  animation-duration:1s;
}
.ProfileEditor .item label{
  margin:0 auto;
  color:grey;
  font-size:15px;
}
.ProfileEditor .item b{
  margin-left:10px;
}
.ProfileEditor .item td:nth-child(2){
  text-align:center;
}
.ProfileEditor .item td:nth-child(3){
  text-align:right;
}
@media (max-width:726px){
  .mobileNone{
    display:none;
  }

}
@media (max-width:680px){
  .ProfileEditor{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    grid-gap:8px;
    padding:8px;
    width:fit-content;
    margin:0 auto;
    height:100%;
  }
  .ProfileEditor fieldset:nth-child(2){
    height:100%;
    overflow-y:auto;
    width:calc(100% - 20px);
    grid-row:2;
    grid-column:1;
  }
}
.addInsertPanel{
  display:grid;
  grid-template-columns:1fr auto auto;
  grid-template-rows:1fr auto;
  grid-gap:5px;
  width:100%;
  grid-column:2;
  grid-row: 2;
}
.addInsertPanel input{
  font-size:20px;
}
.addInsertPanel .map{
  grid-row:1;
  grid-column:1/4;
}
/* Custom styles for the checkbox */
.custom-checkbox::after {
  content: ""; /* Create an empty content */
  display: inline-block;
  width: 10px; /* Set the width and height of your custom checkbox */
  height: 10px;
  border: 2px solid #19b366; /* Set the border color of the checkbox */
  background-color: white; /* Set the background color of the checkbox */
  margin-right: 10px; /* Optional: add some spacing between the checkbox and the label */
  cursor:pointer;
}

/* Change the checkbox color when it's checked */
.custom-checkbox:checked::after {
  background-color: #19b366; /* Change the background color when the checkbox is checked */
  border-color: #19b366; /* Change the border color when the checkbox is checked */
}
.personal h3{
  grid-column:1/4;
}
.ProfilePicture{
  grid-row:2/5;
}
#panierShow legend button{
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  background:whitesmoke;
  color:black;
}
#panierShow legend svg{
  grid-column: 1;
}
#pageTitle{
  grid-column: 3;
  padding-top: 5px;
}
.carInfo{
  grid-column:2
}
.AppFooter{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr auto 1fr;
  border:none;
  border-top: solid lightgrey 1px;
  padding:10px;
  padding-bottom:70px;
}
@media (max-width:370px){
  .CompterContainer{
    display:table;
    grid-column: 2/4;
  }
  .PriceContainer{
    grid-row: 3;
    grid-column:3;
    padding:4px 0
  }
  #catPriority1 > div > div{
    display: grid;
    grid-template-columns:1fr;
  }
  #catPriority1 > div > div *{
    margin: 0 auto;
  }
  #catPriority1 > div > div label{
    grid-row: 2;
    font-size:85%;
  }
  #catPriority2 > div > div{
    display: grid;
    grid-template-columns:1fr;
  }
  #catPriority2 > div > div *{
    margin: 0 auto;
  }
  #catPriority2 > div > div label{
    grid-row: 2;
    font-size:85%;
  }
  #catPriority3 > div > div{
    display: grid;
    grid-template-columns:1fr;
  }
  #catPriority3 > div > div *{
    margin: 0 auto;
  }
  #catPriority3 > div > div label{
    grid-row: 2;
    font-size:85%;
  }
  #catPriority4 > div > div{
    display: grid;
    grid-template-columns:1fr;
  }
  #catPriority4 > div > div *{
    margin: 0 auto;
  }
  #catPriority4 > div > div label{
    grid-row: 2;
    font-size:85%;
  }
  #catPriority5 > div > div{
    display: grid;
    grid-template-columns:1fr;
  }
  #catPriority5 > div > div *{
    margin: 0 auto;
  }
  #catPriority5 > div > div label{
    grid-row: 2;
    font-size:85%;
  }
  #catPriority6 > div > div{
    display: grid;
    grid-template-columns:1fr;
  }
  #catPriority6 > div > div *{
    margin: 0 auto;
  }
  #catPriority6 > div > div label{
    grid-row: 2;
    font-size:85%;
  }
}
@media (max-width:414px){
  .alertPanel td{
    width: 300px;
  }
  .ProfileEditor{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    grid-gap:8px;
    padding:8px;
    width:calc(100% - 22px);
    height:100%;
  }
  .desc{
    width:97%;
    text-align:justify;
    text-indent:7px;
    line-height: 25px;
    grid-row:7;
    grid-column:1/3;
    margin:0 auto
  }
  .OptionPanel{
    grid-column:1/4;
    display:grid;
    grid-template-columns:1fr;
    overflow: auto;
    width: 97%;
  }
  .OptionPanel_URL{
    grid-column: 1;
    grid-row:1
  }
  .OptionPanel_Photo{
    grid-column: 1;
    grid-row:2
  }
  .OptionPanel_Desc{
    grid-column: 1;
    grid-row:8;
    width:98%;
  }
  .OptionPanel_ProdName{
    grid-column: 1;
    grid-row:3
  }
  .OptionPanel_Marc{
    grid-column: 1;
    grid-row:4
  }
  .OptionPanel_Vars{
    grid-column: 1;
    grid-row: 5;
  }
  .OptionPanel_Price{
    grid-column: 1;
    grid-row: 6
  }
  .OptionPanel_Adder{
    grid-column: 1;
    grid-row: 7
  }
  .OptionPanel_ReviewAdd{
    grid-column: 1;
    grid-row: 10
  }
  .OptionPanel_ReviewSpace{
    grid-column: 1;
    grid-row: 11
  }
  .OptionPanel_hr{
    grid-column: 1;
    grid-row: 9;
  }
  #panerFooter{
    grid-template-columns: 1fr
  }
  #naving{
    display:none;
  }
  .ProfileEditor fieldset{
    padding:8px;
    border:none;
    background:transparent;
    box-shadow:0 0 0 black;
  }
  .personal h3{
    grid-column:1/3;
  }
  .personal{
    grid-template-columns:1fr 1fr;
  }
  .carInfo{
    grid-column:1
  }
  .ProfilePicture{
    grid-column:1/3;
    grid-row:2;
    margin:0 auto
  }
  .contact{
    grid-column:1/3;
  }
  .resolved,.rejected{
    font-size: 15px;
  }
  .trackPage_clicSvg{
    border-radius:50%;
  }
  .trackPage_clicSvg label{
    display:none;
  }
  .addInsertPanel{
    grid-template-rows:1fr repeat(3,auto);

  }
  .addInsertPanel *{
    grid-column:1/4;
  }
  #personalInfo{
    display:grid;
    grid-template-columns:1fr;
    margin:0 auto;
  }
  .categorie > div > div > label{
    font-size:15px;
  }
  #catPriority1 label,#catPriority2 label{
    font-size:18px;
  }
  .ecommsearchBar{
    grid-column:1/4;
    margin-top:10px;
    margin-right:10px;
    margin-left:10px;
  }
  .ecommsearchBar #disabler{
    transform: scale(1.25)
  }
  .ecommsearchBar input{
    width:100%;
    padding:18px;
    font-size: 18px
  }
  .ecommsearchBar button{
    padding-top: 8px;
    padding-bottom: 28px;
  }
  .reviewFooter{
    display:grid;
    grid-template-columns:1fr;
    grid-gap:5px
  }
  #reviewContent{
    width:100%;
    height:170px;
    resize:none;
    border:solid green 1px;
    box-shadow:0 0 5px #19b366;
    padding:5px;
  }
  .review{
    display:grid;
    grid-template-columns:1fr;
  }
  .reviewAdd{
    grid-column:2/3;
    grid-row:3
  }
  .reviewSpace{
    grid-column:2/3;
    grid-row:4
  }
  .reviewAdd{
    display:grid;
    grid-template-columns:1fr;
  }
  .panerProdReadOnly{
    display:grid;
    grid-template-columns:auto repeat(2,1fr);
    grid-template-rows:repeat(3,auto);
    width: auto;
    border:none;
    padding:5px;
    grid-gap:7px;
    border-radius:7px;
    margin:5px;
    box-shadow:0 0 1px black;
    background:white;
  }
  #trackPage{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(2,auto) 1fr auto;
    grid-gap:10px;
    padding:5px;
    background:lightgrey;
  }
  #trackPage #head{
    display:none;
  }
  #trackPage .track{
    grid-row:2;
    grid-column:1;
  }
  #trackPage .Livreur{
    position:sticky;
    top:0;
    grid-row:1;
    grid-column:1
  }
  #trackPage .contenu{
    grid-row:3;
    grid-column:1
  }
  #trackPage .paiement{
    position:sticky;
    bottom:0;
    grid-row:4;
    grid-column:1
  }
  #trackPage .space{
    display:none;
  }
  #panerContent,#diversList{
    margin:0 auto;
  }
  .font{
    max-height:200px;
  }
  .ecommFooter{
    grid-gap:5px;
    padding:5px;
    padding-top:12px;
    padding-bottom:12px;
  }
  .mobileMarc{
    margin-top:-19px
  }
  .mobileMarc,.mobileName{
    display:block;
  }
  .pcMarc,.pcName{
    display:none;
  }
  .ConfirmContent{
    display:grid;
    grid-template-columns: 1fr;
    width:fit-content;
    grid-gap:5px;
    padding:5px;
  }
  .ConfirmContent .mapContainer{
    display:table;
    grid-row:1/4;
    grid-column:1
  }
  .ConfirmContent .mapContainer > div{
    display: table-cell;
    vertical-align: top;
    text-align: left;
  }
  .ConfirmContent .ConfirmFoot{
    grid-column:1;
  }
  .ConfirmContent .ConfirmFoot button{
    width:100%;
    padding:10px;
    margin:5px;
    position:sticky;
    bottom:0
  }
  .ConfirmContent .Form{
    display:grid;
    grid-gap:5px;
    padding:5px;
  }
  .font p{
    padding:15px;
    font-weight:bold;
    font-size:15px;
    background:rgba(100,100,100,.5);
    color:white;
    text-shadow:0 0 5px grey;
    margin:0;
  }

  .ecommnavBar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    position:sticky;
    top:0;
    background: #ff6700
  }
  .ecommnavBar > div{
    display:table;
  }
  .ecommnavBar > div > div:not(.MissionPage){
    display:table-cell;
    vertical-align: middle;
  }

  .ecommnavBar nav{
    display:none
  }
  .ecommnavBar nav button{
    padding:7px;
    background: none;
    border:none;
    cursor:pointer;
    width:200px;
    margin-left:-5px;
    font-size:18px;
    font-weight:bold;
    border-right:solid #CCCCCC 1px;
  }
  .ecommnavBar nav button:hover{
    color:#19b366;
  }
  .ecommnavBar nav button:nth-child(1){
    border-left:solid #CCCCCC 1px;
  }
  .compte label{
    display:none;
  }
  #showAuth label{
    display:block
  }
  #Container_paner,.Container_paner{
    width:100%;
    margin-top:250px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    grid-gap:5px;
  }
  #panier_desc > b{
    display:none;
  }
  .info{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-column:2;
    grid-row:2;
    grid-gap:10px;
  }
  #qrcode,#QRSite{
    display:none;
  }
  .catsListContainer{
    overflow-x:auto;
  }
  .listContainer{
    border-radius:0
  }
}
.pcName{
  margin-top:0px;
}
.Form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-gap:7px;
  width:fit-content;
}
.Form fieldset > div:not(.form){
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:7px;
  padding:10px;
}
.Form .picture{
  width:120px;
  height:120px;
  grid-row:1/5;
  border:solid black 1px;
}
.Form .FormGroup1{
  grid-template-columns:1fr;
}
.Form input{
  padding:5px;
}
.notSelect{
  background:transparent;
  border:solid green 1px;
}
.notSelect label{
  color:green;
}
.notSelect path{
  fill:white;
}
@keyframes Etiquete_anim{
  from{width:0;}
  to{width:fit-content;}
}
.ColisEtiquete{
  font-weight: bold;
  max-height:25px;
  overflow:none;
  font-size: 10px;
  position: absolute;
  top: 0;
  z-index: 2;
  text-align: center;
  left: 0;
  border-radius: 5px 0 7px 0;
  padding: 7px;
  background: yellow;
  color: coral;
  box-shadow: 0 0 5px green;
}
.disabled{
  display:none;
}
.animated{
  animation:Etiquete_anim 1s;
}