*{
  box-sizing: border-box;
  outline: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

body{
  background: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6{
  font-weight: 500;
}

nav{
  display: none;
}

select{
  font-family: 'Montserrat', sans-serif;
}

.main-login{
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #045F32;
}

.container{
  width:80%;
  margin: 0 auto;
}

.admin-left{
  float: left;
  width: 48%;
  height: 100vh;
  display: flex;
flex-direction: column;
justify-content: center;
}

.buttonClass{
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  background: #105F37;
}

.admin-right{
  float: right;
  width: 48%;
  height: 100vh;
}

.admin-right img{
  height: 100%;
  width: auto;
  display: block;
}

.form-login{
  padding: 40px 50px;
  background: #044926;
  border-radius: 50px 0 50px 0;
  color: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(7, 78, 42, 0.96);
}

.form-login a{
  color: #ffffff;
  font-size: 12px;
}

.form-login h1{
  font-size: 40px;
  line-height: 43.5px;
  padding: 40px 0 60px;
}

.form-login h1 span{
  font-weight: 300;
  display: block;
}

.logo-header img{
  display: block;
  margin: 30px auto 30px;;
}

.form-login label{
  display: block;
}

.form-login .form-text{
  position: relative;
}

.form-login .form-text input{
  display: block;
  margin: 10px 0;
  padding: 0 30px;
  border: 0;
  line-height: 40px;
  width: 100%;
  border-radius: 15px 0 15px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5) !important;
}

.form-login .form-text input.email{
  background: rgba(255, 255, 255, 0.05) url(../images/profil.svg) no-repeat left 10px center;
}

.form-login .form-text input.password{
  background: rgba(255, 255, 255, 0.05) url(../images/cadnar.svg) no-repeat left 10px center;
}

.form-login .form-text .eye{
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;
  right: 10px;
  bottom: 15px;
  background: url(../images/oeil.svg) no-repeat left top;
}

.form-login .form-submit input{
  width: 200px;
  display: block;
  font-size: 15px;
  color: #ffffff;
  margin: 60px 0 10px;
  border: 0;
  padding: 0 20px;
  line-height: 40px;
  border-radius: 15px 0 15px 0;
  background: linear-gradient(92.54deg, rgba(255, 255, 255, 0.08) -7.59%, rgba(255, 255, 255, 0.24) 104.54%);
  cursor: pointer;
}

.btn-logout {
    position: absolute;
    bottom: 20px;
    padding: 0 20px;
}

.btn-logout a{
    color: #ffffff;
    font-size: 18px;
}

.main-aside{
  width: 300px;
  min-height: 100vh;
  background: #5C964A;
  padding: 40px 15px;
  float: left;
  position: fixed;
  left: 0;
  top: 0;
  background: linear-gradient(186.72deg, #E6F5ED 3.47%, #F4FBF7 98.34%);
}

.main-aside:before{
  content: "";
  width: 300px;
  min-height: 100vh;
  background: linear-gradient(186.72deg, #E6F5ED 3.47%, #F4FBF7 98.34%);
  left: 0;
  top: 0;
  position: fixed;
  z-index: -1;
}

.main-aside .logo-header{
  padding: 0 20px;
}

.main-aside .logo-header img{
  display: block;
  margin: 30px 0;
  max-width: 100%;
  height: auto;
}

.main-aside .profil{
  overflow: hidden;
  padding: 10px 20px;
  background: #ffffff;
  border-radius: 15px 0 15px 0;
}

.main-aside .icon-profil{
  width:40px;
  height: 40px;
  float: left;
}

.main-aside .icon-profil img{
  width:40px;
  height: 40px;
  display: block;
  object-fit: cover;
}

.text-profil{
  width: calc(100% - 40px);
  float: left;
  padding:0px 0 0 10px;
  color: #0A1B3E;
  font-size: 14px;
  font-weight: 500;
}

.text-profil span{
  line-height: 22px;
  color: #034B27;
  font-size: 15px;
  font-weight: 600;
  display: block;
}

.menu-aside{
  padding: 20px 0 0;
}

.menu-aside li{
  display: block;
}

.menu-aside li a{
  display: block;
  padding: 10px 0px 10px 40px;
  margin: 15px 0;
  color: #034B27;
  font-size: 16px;
  font-weight: 600;
}

.menu-aside li a.home{
  background: url(../images/home.svg) no-repeat left 10px center;
}

.menu-aside li a.fans{
  background: url(../images/fan.svg) no-repeat left 10px center;
}

.menu-aside li a.admin{
  background: url(../images/admin.svg) no-repeat left 10px center;
}

.menu-aside li a.contenus{
  background: url(../images/contenu.svg) no-repeat left 10px center;
}

.menu-aside li a.services{
  background: url(../images/service.svg) no-repeat left 10px center;
}

.menu-aside li a.commandes{
  background: url(../images/commandes.svg) no-repeat left 10px center;
}

.menu-aside li a.statistics{
  background: url(../images/statistics.svg) no-repeat left 10px center;
}

.menu-aside li a.logout{
  background: url(../images/logout.svg) no-repeat left 10px center;
}

.menu-aside li a:hover,
.menu-aside li a.acitve{
  background-color: rgba(255,255,255,0.9)
}

h1{
  display: block;
  padding-bottom: 40px;
}

h2{
  padding-bottom: 20px;
}

.full-width{
  width: 100%;
  overflow: hidden;
  margin: 0 -10px;
  padding-bottom: 40px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.content-page{
  width: calc(100% - 300px);
  padding:0px 30px 30px;
  float: left;
  background: #ffffff;
  margin-left: 300px;
}

.content-page .header{
  padding: 40px 30px;
  background: linear-gradient(269.72deg, #E6F5ED 3.27%, #F4FBF7 99.99%);
  margin-bottom: 40px;
  overflow: hidden;
  width: calc(100% + 60px);
  margin-left: -30px;
}

.content-page .header h1{
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  color: #0A1B3E;
  float: left;
  padding: 0;
}

.content-page .header h1 span{
  font-size: 10px;
  line-height: 30px;
  font-weight: 500;
  display: block;
}

.content-page .header .notifications{
  width: 52px;
  padding: 5px 20px;
  float: right;
  background: #ffffff;
  border-radius: 15px 0 15px 0;
}

.bloc-stat{
  width: 25%;
  float: left;
  padding:0 10px;
}

.bloc-stat .content{
  padding: 15px 20px;
  color: #0A1B3E;
  height: 100%;
  background: rgba(225, 242, 234, 0.54);
  border-radius: 15px 0 15px 0;
  font-weight: 600;
}

.bloc-stat .content p{
  font-size: 14px;
  padding: 5px 0;
}

.bloc-stat .content h3{
  font-size: 24px;
  padding: 5px 0;
}

.bloc-stat .content h3 span{
  font-size: 14px;
  font-weight: 400;
  float: right;
  line-height: 31px;
  padding-right: 21px;
  background: url(../images/fleche.svg) no-repeat right center;
}

.list-winner{
  width: 33.33%;
  float: left;
  padding:0 10px;
}

.col-md-6{
  width: 50%;
  float: left;
  padding:0 10px;
}

.col-md-8{
  width: 66.66%;
  float: left;
  padding:0 10px;
}

.col-md-12{
  width: 100%;
  padding:0 10px;
}

.list-winner .content{
  padding:20px 10px;
  min-height: 200px;
  border-radius: 15px 0 15px 0;
  overflow: hidden;
  background: rgba(225, 242, 234, 0.54);
}

.total-gagnant{
  padding-top: 20px;
}

.list-winner .content ul{
  max-height: 300px;
  overflow-y: auto;
}

.list-winner .content li{
  display: block;
  padding: 10px 0;
  overflow: hidden;
}

.list-winner .content li .img-profil{
  width: 35px;
  float: left;
  border-radius: 50%;
  overflow: hidden;
}

.list-winner .content li .img-profil img{
  width: 100%;
  height: auto;
  display: block;
}

.list-winner .content li .nom-profil{
  width: calc(100% - 35px);
  float: left;
  padding-left: 10px;
  line-height: 35px;
}

.img-diagramme{
  width: 100%;
  display: block;
}

.img-diagramme img,
.img-charts img{
  width: 100%;
  height: auto;
  display: block;
}

.img-charts{
  width: 80%;
  margin: 0 auto;
  display: block;
}

/* Listes elts */

.content-listes{
  margin-bottom: 40px;
}

.listes-elts{
  padding: 10px 0px;
  box-shadow: 0 2px 0 rgb(23 43 77 / 10%);
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.img-liste{
  width: 16%;
}

.libele-list,
.point-list,
.actif-list{
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}

.libele-list{
  width: 30%;
  font-size: 16px;
  padding: 0 10px 0 30px;
  font-weight: bold;
}

.point-list{
  width: 14%;
  font-size: 16px;
  padding: 0 10px;
}

.actif-list{
  width: 10%;
  font-size: 16px;
  padding: 0 10px;
}

.actions{
  width: 30%;
  overflow: hidden;
  text-align: right;
}

.actions a,
.btn-actions a{
  margin: 0 10px;
  width: 40px;
  height: 40px;
  display: inline-block;
  text-indent: -9999px;
}

a.edit{
  background: url(../images/draw.svg) no-repeat center center;
  background-size: 50%;
}

a.details{
  background: url(../images/vision.svg) no-repeat center center;
  background-size: 50%;
}

a.blocked{
  background: url(../images/signal.svg) no-repeat center center;
  background-size: 50%;
}

a.remove{
  background:  url(../images/cross.svg) no-repeat center center;
  background-size: 50%;
}

.valid{
  height: 25px;
  line-height: 25px;
  display: inline-block;
  margin-right: 10px;
  background: url(../images/check.svg) no-repeat left center;
  background-size: 25px;
  padding-left: 30px;
  margin-left: 10px;
}

.unvalid{
  height: 25px;
  line-height: 25px;
  display: inline-block;
  margin-left: 10px;
  background: url(../images/multiply.svg) no-repeat left center;
  background-size: 25px;
  padding-left: 30px;
  margin-left: 10px;
}

.img-liste img,
.img-tab img{
  width: 100%;
  height: 50px;
  object-fit: cover;
  display: block;
}

.btn-add-form{
  overflow: hidden;
  padding: 0px 0 50px;
}

.bloc-header-user label{
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  color: #0A1B3E;
  padding-right: 15px;
}

.btn-add-form select{
  width: 145px;
  height: 34px;
  margin-right: 20px;
  font-size: 15px;
  color: #105F37;
  font-weight: 600;
  background: #CFE4DB;
  border: 0;
  padding: 0 12px;
  border-radius: 15px 0 15px 0;
  display: none;
}
.btn-add-form.filter-fan select{
  display: block;
}

.btn-add-form input{
  margin-right: 0px;
  padding: 10px 25px 10px 15px;
  border: 0;
  background: #F2FAF6 url(../images/icon-loupe.svg) no-repeat right 15px center;
  border-radius: 15px 0 15px 0;
  color: rgba(10, 27, 62, 0.48);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  width: 250px;
  display: none;
}

.image-categorie img {
    max-height: 50px;
    width: auto;
    display: block;
}

.btn-add-form a{
  float: right;
  font-size: 24px;
  color: #ffffff;
  background: #f60;
  padding: 10px 15px;
}

.form-add{
  width: 100%;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0px 6px 12px -2px rgb(9 30 66 / 24%), 0 0 0 1px rgb(9 30 66 / 8%);
  border-radius: 12px;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  overflow-y: auto;
  z-index: 12;
}

.form-add form{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.form-add.open{
  right: 8px;
}

.form-add .form-text label,
.form-add .form-file label,
.form-add .form-select label{
  display: block;
  padding: 10px 0;
  font-weight: bold;
  font-size: 18px;
}

.form-add .form-text{
  padding: 10px 0;
  width: 49%;
}

.form-add .form-text li{
  padding: 10px 0;
  overflow: hidden;
  line-height: 35px;
}

.icon-joueur{
  width: 35px;
  margin-right: 10px;
  float: left;
  border-radius: 50%;
  overflow: hidden;
}

.icon-joueur img{
  width: 35px;
  height: auto;
  display: block;
}

.form-add .form-check{
  display: block;
  padding: 10px 0;
  width: 49%;
}

.bloc-user-access {
    width: 100%;
    display: flex;
    padding: 10px 0;
}

.form-add .form-file{
  display: block;
  padding: 10px 0;
}

.form-add .form-check label{
  padding-left: 10px;
}

.form-add .form-text input,
.form-add .form-text textarea,
.form-add .form-select select{
  display: block;
  width: 100%;
  padding: 10px 10px;
}

.form-add .form-text textarea{
  display: block;
  width: 100%;
  height: 100px;
  padding: 10px 10px;
}

.form-add .form-submit{
  padding: 30px 0 10px;
}

.form-add .form-submit input{
  padding: 10px 30px;
  margin-right: 15px;
  cursor: pointer;
  color: #ffffff;
  font-size: 18px;
  background: #f60;
  border: 0;
}

.form-add .form-submit input.reset{
  background: #000000;
}

.tableau-list{
  border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

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

.tableau-list tr{
  background: rgba(242, 250, 246, 1);
  border-radius: 15px 0 15px 0;
  border-bottom: 10px solid #ffffff;
  position: relative;
}

.tableau-list tr .photo,
.tableau-list tr .pays,
.tableau-list tr .status{
  float: left;
  border-radius: 50%;
  display: flex;
margin-right: 7px;
height: 25px;
justify-content: center;
flex-direction: column;
}

.tableau-list tr .photo img,
.tableau-list tr .pays img{
  display: block;
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}

.tableau-list tr .status img{
  display: block;
}

.tableau-list .action{
  display: block;
  position: absolute;
  height: 200px;
  overflow: visible;
  right: 0;
  width: 200px;
  z-index: 99;
}

.tableau-list .edit-fan .action{
  height: 65px;
}

.edit-content{
  height: 159px;
  position: absolute !important;
  right: 0;
  width: 177px;
  z-index: 9;
}

.edit-content:hover{
  z-index: 99999;
}

.edit-content a{
  cursor: pointer;
}

.tableau-list .action span{
  width: 14px;
  height: 14px;
  display: block;
  background: url(../images/icon-edit.svg) no-repeat left center;
  text-indent: -9999px;
  float: right;
  margin-top: 10px;
}

.tableau-list .action div{
  position: absolute;
  right: 23px;
  top: 13px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  background: #ffffff;
  border-radius: 15px 0 15px 0;
  width: 270px;
}

.tableau-list .action div a{
  display: block;
  text-align: left;
  color: #0A1B3E;
  font-weight: 600;
  font-size: 13px;
  padding-left: 30px;
}

.tableau-list .action div a.edit{
  background: url(../images/icon-edit-pub.svg) no-repeat left 5px center;
}

.tableau-list .action:hover div{
  opacity: 1;
  visibility: visible;
}

.tableau-list th,
.tableau-list td{
box-sizing: border-box;
cursor: auto;
display: table-cell;
font-weight: normal;
padding: 8px;
top: 0;
-webkit-transition: background-color 100ms;
transition: background-color 100ms;
z-index: 1;
text-align: left;
vertical-align: middle;
font-size: 14px;
padding: 13px 10px;
line-height: 25px;
}

.tableau-list th{
  font-weight: bold;
}

a.add-user{
  width: 210px;
  height: 48px;
  font-size: 12px;
  line-height: 48px;
  color: #035C30;
  font-weight: 500;
  text-align: center;
  display: block;
  margin-top: 40px;
  background: linear-gradient(93.09deg, #EEF9F3 11.06%, #CFE4D9 109.12%);
  /*border-radius: 15px 0 15px 0;*/
  position: relative;
}

a.add-user:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-top: 18px solid #ffffff;
  border-right: 18px solid transparent;
}

a.add-user:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 18px solid #ffffff;
  border-top: 18px solid transparent;
}

.statusUser{
  max-width: 80px;
  height: 32px;
  font-size: 15px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
  display: block;
  color: #105F37;
  padding: 0 15px;
  background: #CFE4DB;
  position: relative;
}

.statusUser.premium{
  max-width: 120px;
  color: #ffffff;
  padding: 0 15px;
  background: #105F37 url(../images/star.svg) no-repeat left 10px center;
}

.statusUser:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-top: 12px solid #F2FAF6;
  border-right: 12px solid transparent;
}

.statusUser:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 12px solid #F2FAF6;
  border-top: 12px solid transparent;
}

.tableau-list tr:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-top: 18px solid #ffffff;
  border-right: 18px solid transparent;
  display: none;
}

.tableau-list tr:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 18px solid #ffffff;
  border-top: 18px solid transparent;
  display: none;
}

.ReactModal__Overlay{
  z-index: 99;
  background-color: rgba(242, 250, 246, 0.6) !important;
}

.ReactModal__Content{
  border: 0 !important;
  width: 60% !important;
  max-width: 988px;
  max-height: 80vh;
  overflow-y: auto;
}

.contentModal{
  font-weight: 500;
}

.headerModal{
  font-size: 10px;
  color: #0A1B3E;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
}

.headerModal p{
  padding-left: 20px;
  font-weight: 500;
  background: url(../images/edit.svg) no-repeat left center;
}

.headerModal span{
  display:block;
  color: #105F37;
  font-weight: 600;
}

.contentModal > .profil{
  display: block;
  margin: 10px auto 20px;
  width: 95px;
  position: relative;
}

.contentModal .profil img,
.contentModal .profil video{
  display: block;
  margin: 0;
  width: 95px;
  height: 65px;
  position: relative;
  object-fit: cover;
}

.file-list {
    display: flex;
    justify-content: center;
}

.apercuMedia .profil{
    position: relative;
    width: 95px;
    display: block;
    margin: 5px;
}

.contentCommande .apercuMedia .profil{
    width: 60%;
    margin: 15px 5px 5px;
}

.contentCommande .apercuMedia .profil video{
    width: 100%;
}

.apercuMedia .profil button{
    position: absolute;
    top:0;
    right:0;
    color: #ffffff;
    background: #105F37;
    border:1px solid #105F37;
    padding: 5px;
    font-size: 12px;
}

.contentModal .profil:before,
.apercuMedia .profil:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-top: 25px solid #ffffff;
    border-right: 25px solid transparent;
    z-index: 2;
}

.contentModal .profil:after,
.apercuMedia .profil:after{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-top: 25px solid transparent;
    border-right: 25px solid #ffffff;
    z-index: 2;
}

.apercuMedia .profil:before{
    border-top: 25px solid #EEF9F3;
    left: -1px;
}

.apercuMedia .profil:after{
    border-right: 25px solid #EEF9F3;
    right: -1px;
}

.contentModal form{
  display: block;
  width: 80%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-weight: 500;
  padding-top: 40px;
  margin: 0 auto;
}

.contentModal.contentContenu form{
  width: 96%;
  padding-top: 10px;
}

.contentModal form .form-text{
  width: 48%;
}

.contentModal form .form-text.country{
  position: relative;
}

.contentModal form .col-md-6 .form-text,
.contentCommande .form-text{
  width: 100%;
  position: relative;
}

.contentModal form label,
.contentCommande form label{
  color: #0A1B3E;
  font-size: 10px;
  display: block;
  padding: 10px 0 7px 15px;
}

.contentModal form .form-text input,
.contentModal form .form-select select,
.contentModal form .form-text textarea,
.contentCommande form input,
.contentCommande form textarea{
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  color: #0A1B3E;
  font-weight: 500;
  padding: 0 30px 0 40px;
  background-color: #EEF9F3;
  background-repeat: no-repeat;
  background-position: left 20px center;
  border-radius: 15px 0 15px 0;
  border: 0;
}

.contentModal ul li{
  padding: 10px 30px;
  width: 100%;
  line-height: 20px;
  font-size: 12px;
  color: #0A1B3E;
  font-weight: 500;
  background-color: #EEF9F3;
  border-radius: 15px 0 15px 0;
  margin: 10px 0;
}

.contentModal ul li button{
  padding: 7px 10px;
  clear: both;
  font-size: 12px;
  color: #ffffff;
  font-weight: 500;
  background-color: #105F37;
  margin: 10px 0 0;
  border: 0;
  display: block;
}



.contentCommande form .rightForm input,
.contentCommande form .rightForm textarea{
  color: #0A1B3E;
  background-color: #ffffff;
}

.contentCommande form .rightForm .form-button input{
  width: 196px;
  color: #ffffff;
  font-weight: 500;
  margin-top: 50px;
  background: #045F32;
  cursor: pointer;
}

.contentCommande form .rightForm .form-button input.desactive{
  cursor: default;
  opacity: 0.5;
}

.livrer,
.enprepa,
.custom,
.nouveau {
    display: inline-block;
    padding: 5px 10px;
    color: #ffffff;
    background: #105F37;
    font-weight: 500;
    width: 80px;
    text-align: center;
    position: relative;
}

.enprepa {
    background: #CFB042;
    width: 130px;
}

.nouveau{
  background: #4ea87a;
}

.custom{
  background: #ff8000 ;
}

.livrer:before,
.enprepa:before,
.nouveau:before,
.custom:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-top: 10px solid #ffffff;
    border-right: 10px solid transparent;
}

.livrer:after,
.enprepa:after,
.nouveau:after,
.custom::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #ffffff;
}

.page-commande{
  background: #EEF9F3;
  padding: 0 0 30px 0;
}

.page-commande .header {
    margin-bottom: 0px;
    width: 100%;
    margin-left: 0px;
}

.headerCommande {
    padding: 40px 30px;
    background: #ffffff;
    margin-bottom: 2px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.infoCommande {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.infoCommande div{
    display: inline-block;
    position: relative;
    width: auto;
    height: 32px;
    line-height: 32px;
    padding: 0 25px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: #44536C;
    white-space: nowrap;
}

.infoCommande div.nouveau{
  background: #4ea87a;
}
.infoCommande div.enprepa{
    background: #CFB042;
}

.infoCommande div.custom{
  background: #ff8000;
}

.infoCommande div.livre{
    background: #F4FBF7;
    color: #0A1B3E;
}

.numeroCommande h2{
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0A1B3E;
}

.numeroCommande p{
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  color: #0A1B3E;
}

.fanCommande{
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  color: #0A1B3E;
  line-height: 25px;
  display: flex;
  align-items: center;
}

.fanCommande img{
  margin-right: 15px;
    width: 25px;
    height: 25px;
    object-fit: cover;
    border-radius: 50%;
}

.infoCommande div:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-top: 10px solid #ffffff;
    border-right: 10px solid transparent;
}

.infoCommande div:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #ffffff;
}

.contentCommande form textarea{
  height: 150px;
  padding: 10px 30px;
  line-height: 18px;
}

.contentCommande form{
  display: flex;
  justify-content: space-between;
}

.contentCommande .leftForm,
.contentCommande .rightForm{
  width: 49%;
  padding: 50px;
}

.contentCommande .leftForm{
  background: #ffffff;
}

.comment-component img{
  display: block;
  float: left;
  width: 34px;
  height: 34px;
  object-fit: cover;
  margin-right: 10px;
}

.comment-component li{
  font-size: 12px;
  overflow: hidden;
  clear: both;
  width: 100%;
  line-height: 32px;
  padding: 5px 10px;
  margin: 5px 0;
  background:#EEF9F3 ;
}

.comment-component button {
    width: 120px;
    height: 34px;
    font-size: 12px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    display: block;
    margin-top: 20px;
    background: linear-gradient(272.63deg, #045F32 2.21%, #024724 99.92%);
    /* border-radius: 15px 0 15px 0; */
    position: relative;
    border: 0;
    float: right;
}

.comment-component button:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-top: 18px solid #EEF9F3;
    border-right: 18px solid transparent;
}

.comment-component button:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-right: 18px solid #EEF9F3;
    border-top: 18px solid transparent;
}

.sub-comment-component{
  clear: both;
  width: 100%;
  overflow: hidden;
  padding-left: 50px;
}

.react-tags-wrapper{
  width: 100%;
  padding: 20px;
  background-color: #EEF9F3;
  border-radius: 15px 0 15px 0;
}

.tag-wrapper{
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  font-size: 11px;
  color: #105F37;
  font-weight: 600;
  background: #CFE4DB;
  margin-right: 7px;
  position: relative;
  display: inline-block;
}

.ReactTags__suggestions{
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  font-size: 11px;
  color: #105F37;
  font-weight: 600;
  background: #CFE4DB;
  display: inline-block;
}

.tag-wrapper .ReactTags__remove{
  background: none;
  border: 0;
  margin-left: 5px;
  color: #105F37;
}

.tag-wrapper:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-top: 14px solid #EEF9F3;
    border-right: 14px solid transparent;
}

.tag-wrapper:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-top: 14px solid transparent;
    border-right: 14px solid #EEF9F3;
}

.listeServices{
  display: flex;
  flex-wrap: wrap;
  gap:2%;
}

.contentModal ul li button.blocked{
  background: red;
}

.listeServices .elts{
  width: 32%;
  margin-bottom: 20px;
}

.listeServices .btnAdd{
  width: 32%;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  background: #F2FAF6;
}

.listeServices .btnAdd a{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 18px;
  color: #035C30;
  font-weight: 500;
  background: #F2FAF6;
}

.listeServices .btnAdd a span{
  width: 79px;
  height: 79px;
  display: block;
  margin-bottom: 20px;
  background: url(../images/icon-add-service.svg) no-repeat left center;
}

.listeServices .imgService{
  position: relative;
  width: 100%;
  display: block;
}

.listeServices .imgService img{
  width: 100%;
  height: auto;
  display: block;
  height: 270px;
  object-fit: cover;
}

.listeServices .imgService:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-top: 20px solid #ffffff;
    border-right: 20px solid transparent;
}

.listeServices .imgService:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid #F2FAF6;
}

.infoService{
  background: #F2FAF6;
  padding: 20px 7px;
  display: flex;
  justify-content: space-between;
}

.infoService h3{
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  color: #0A1B3E;
}

.infoService .form-choice{
  width: auto;
  padding: 0;
  height: 24px;
  border-radius: 0;
}

.infoService .form-choice .form-check,
.infoService .form-choice .form-check label{
  padding: 0 !important;
  line-height: 24px;
  display: flex;
}

.infoService .form-choice .form-check label:before{
  display: none;
}

.infoService .form-choice label span{
  width: 41px;
  height: 24px;
  background: #105F37;
  border-radius: 12px;
  display: inline-block;
  margin-left: 7px;
  position: relative;
  opacity: 0.5;
}

.infoService .form-choice label span:before{
  content:"";
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  left: 3px;
  top: 3px;
}

.infoService .form-check input:checked ~ label span {
  opacity: 1;
}

.infoService .form-check input:checked ~ label span:before {
  right: 3px;
  left: auto;
}

.infoService .actionsServices{
    position: relative;
}

.infoService .actionsServices span {
    width: 14px;
    height: 14px;
    display: block;
    background: url(../images/icon-edit.svg) no-repeat left center;
    text-indent: -9999px;
    float: right;
    margin-top: 3px;
}

.infoService .editRemove {
    position: absolute;
    right: 0px;
    top: 100%;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    background: #ffffff;
    border-radius: 15px 0 15px 0;
    z-index: 9;
}

.infoService .actionsServices:hover .editRemove{
    visibility: visible;
    opacity: 1;
}

.infoService .editRemove a{
    display: block;
    padding: 5px 30px;
    font-size: 13px;
    font-weight: bold;
    color: #0A1B3E;
    cursor: pointer;
}

.infoService .editRemove  a.edit {
    background: url(../images/icon-edit-pub.svg) no-repeat left 5px center;
}

.infoService .editRemove  a.remove {
    background: url(../images/icon-remove.svg) no-repeat left 5px center;
}

.blocPrixDevise{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.blocPrixDevise .form-text,
.blocPrixDevise .form-select{
  width: 48% !important;
}

.contentModal form .form-text .react-tags-wrapper input{
  background-color: inherit;
  border-radius: 0;
  padding: 0 !important;
}

.apercuMedia{
  width: 100%;
  font-size: 12px;
  color: #034B27;
  font-weight: 600;
  padding: 20px 20px 10px 20px;
  background-color: #EEF9F3;
  border-radius: 15px 0 15px 0;
  overflow: hidden;
  margin-top: 37px;
}

.apercuMedia img{
  display: block;
  margin: 40px auto 30px;
}

.contentModal.contentContenu form .form-text input,
.contentModal.contentContenu form .form-select select,
.contentModal.contentContenu form .form-text textarea{
  font-weight: 600;
  padding: 0 20px 0 20px;
  color: #034B27;
}

.contentModal form .form-text textarea{
  height: 90px;
  line-height: 20px;
  padding: 10px 20px 10px 20px;
}

.contentModal form .form-text.name input{
  background-image: url(../images/icon-profil.svg);
}

.contentModal form .form-text.email input{
  background-image: url(../images/icon-mail.svg);
}

.contentModal form .form-text.tel input{
  background-image: url(../images/icon-tel.svg);
}

.contentModal form .form-text.age input{
  background-image: url(../images/icon-age.svg);
}

.contentModal form .form-text.adresse input{
  background-image: url(../images/icon-adresse.svg);
}

.contentModal form .form-text.cp input{
  background-image: url(../images/icon-cp.svg);
}

.contentModal form .form-text.ville input{
  background-image: url(../images/icon-ville.svg);
}

.contentModal form .form-text.country .country-flag{
  position: absolute;
  left: 15px;
  bottom: 17px;
  border-radius: 50%;
  overflow: hidden;
  width: 17px;
  height: 17px;
  display: block;
}

.contentModal form .form-text.country .country-flag img{
  width: 100%;
  height: 100%;
  display: block;
}

.contentModal form .form-button{
  width: 100%;
  display: flex;
  overflow: hidden;
  justify-content: center;
  padding-top: 30px;
}

.contentModal form .form-button button,
.contentModal form .form-button a{
  width: 220px;
  height: 48px;
  text-align: center;
  font-size: 12px;
  color: #035C30;
  line-height: 48px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(92.56deg, #EEF9F3 9.21%, #CFE4D9 90.92%);
  border-radius: 15px 0 15px 0;
  border: 0;
  cursor: pointer;
}

.contentModal form .form-button button.desactive,
.contentModal form .form-button a.desactive{
  color: #ffffff;
  background: linear-gradient(272.63deg, #045F32 2.21%, #024724 99.92%);
  margin-left: -30px;
}

.form-choice{
  overflow: hidden;
  width: 100%;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  color: #0A1B3E;
  font-weight: 500;
  padding: 20px 20px 0 20px;
  background-color: #EEF9F3;
  background-repeat: no-repeat;
  background-position: left 20px center;
  border-radius: 15px 0 15px 0;
  border: 0;
}

.form-choice .form-check{
  float: left;
  padding-right: 30px;
}

.form-check label{
  display: block;
  height: 20px !important;
  line-height: 20px;
  position: relative;
  padding:0 28px 0 0 !important;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #0A1B3E;
  font-weight: 500;
}

.form-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.form-check label:before {
  position: absolute;
  top: 0;
  right: 0;
  height: 20px;
  width: 20px;
  border: 6px solid #CFE4DB;
  border-radius: 50%;
  content: "";
  box-sizing: border-box;
}

.form-check:hover input ~ label:before,
.form-check input:checked ~ label:before {
  border: 5px solid #105F37;
}

.react-datepicker-wrapper{
  width: 100%;
  display: block;
}

.form-date .react-datepicker{
  width: 100%;
  border: 0;
  background-color: #EEF9F3;
  border-radius: 15px 0 15px 0;
}

.form-date .react-datepicker__header {
    text-align: center;
    background-color: transparent;
    border-bottom: 0;
    border-top-left-radius: 0;
    padding: 8px 0;
    position: relative;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
    padding: 10px 0;
}

.react-datepicker__day-name{
    background: #ffffff;
}

.form-date > div{
  padding: 10px 0;
}

.form-date .react-datepicker__month-container {
    float: none;
}

.form-date .react-datepicker__day--selected{
    background-color: #105F37;
}

.form-date .react-datepicker__day-name,
.form-date .react-datepicker__day,
.form-date .react-datepicker__time-name {
    width: 12%;
    color: #0A1B3E;
}

.form-date .react-datepicker__day--selected{
    background-color: #105F37;
    color: #ffffff;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.contentModal form .inputfile + label,
.contentCommande .inputfile + label{
  height: 62px;
  font-size: 12px;
  line-height: 47px;
  font-weight: 600;
  color: white;
  background-color: #EEF9F3;
  background-image: url(../images/icon-file.svg);
  background-position: right 20px center;
  background-repeat: no-repeat;
  border-radius: 15px 0 15px 0;
  cursor: pointer;
  color: #034B27;
}

.contentCommande .inputfile + label{
  background-color: #ffffff;
  color: #034B27;
}

.contentModal form .inputfile + label span,
.contentCommande .inputfile + label span{
  font-weight: 300;
}

ul.pagination {
    display: flex;
    justify-content: center;
    gap:10px;
    margin-top: 40px;
}

ul.pagination li{
    position: relative;
    width: 80px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    padding: 0;
    color: #035C30;
    font-weight: 500;
    text-align: center;
    display: block;
    background: linear-gradient(93.09deg, #EEF9F3 11.06%, #CFE4D9 109.12%);
}

ul.pagination li:hover,
ul.pagination li.pagination__link--active{
  background: linear-gradient(272.63deg, #045F32 2.21%, #024724 99.92%);
}

ul.pagination li:hover a,
ul.pagination li.pagination__link--active a{
  color: #ffffff;
}

ul.pagination li a{
    display: block;
    cursor: pointer;
}

ul.pagination li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-top: 14px solid #ffffff;
    border-right: 14px solid transparent;
}

ul.pagination li:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-top: 14px solid transparent;
    border-right: 14px solid #ffffff;
}

.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

td.image-categorie {
  text-align: right;
}

.text-time {
  display: grid;
  grid-template-columns: 1fr 1fr auto; /* Deux colonnes de largeur égale, puis une colonne pour le bouton */
  gap: 10px; /* Espacement entre les éléments */
  align-items: center; /* Centrer verticalement */
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.break {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;

}


.break:hover{
  white-space: normal;
  text-overflow: unset;
}