.question-div {
  margin-top: 20px;
}

.div-widgetNPS {
  content: "" !important;
  text-align: center;
  margin-top: 5px !important;
  margin-bottom: 30px !important;
  padding: 0px;
}

.widgetNPS span {
  color: rgb(82, 3, 3);
  font-size: 12px;
}
.widgetNPS button.detractor-hover {
  background: #f44336;
  color: white;
  border-color: lighten(#f44336, 5%);
  transform: scale(1.05);
}

.widgetNPS button.passive-hover {
  background: #f57c00;
  color: white;
  border-color: lighten(#f57c00, 5%);
  transform: scale(1.05);
}

.widgetNPS button.promoter-hover {
  background: #4caf50;
  color: white;
  border-color: lighten(#4caf50, 5%);
  transform: scale(1.05);
}

.widgetNPS .widget-sm {
  width: 315px;
  background: #eee;
  border: 2px solid #ccc;
  padding: 15px 15px 30px;
  box-sizing: border-box;
  position: relative;
}

.commentaire {
  height: 4em;
}

.widgetNPS button {
  border-radius: 10%;
  background: #e5f0fa;
  color: black;
  border: 0.5px solid #eee;
  border-color: lighten(#e5f0fa, 5%);
}


.infosNps {
    display: flex;
    font-size: 14px;
    width: 76vw;
    max-width: 877px;
    margin: 0 auto;
    margin-top:20px;
  }
  .infosNps div {
    width: 48%;
    display: inline-block;
    flex: 1 1;
  }
  
  .infosNps div.end {
    text-align: right;
  }
  

@media screen and (max-width: 1000px) {
  .widgetNPS {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
  }

  .widgetNPS button {
    font-size: 4vw;
    padding: 1vw 2vw;
    flex: 0.2 0.2;
    margin-left: 0.5vw;
    font-weight: 700;
    transition: background 0.2s ease-in, color 0.2s ease-in,
      border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);
  }

  
.infosNps {
    
    font-size: 10px;
    width: 100%;
  }
}
@media screen and (min-width: 1000px) {
  .commentaire {
    height: 10em;
  }
  .widgetNPS {
    margin: 0 auto;
  }

  .widgetNPS button {
    padding: 0.2vw 0.4vw;
    font-size: 3vw;

    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
    border: none;
    box-shadow: none;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    outline: none;
    width: 7vw;
    height: 7vw;
    max-width: 80px;
    max-height: 80px;

    margin-left: 0.2vw;
    margin-top: 0.2vw;
    transition: background 0.2s ease-in, color 0.2s ease-in,
      border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);
  }


}

@media screen and (min-width: 1200px) {
  .widgetNPS button {
    font-size: 36px;
  }

}



.rating {
  display: flex;
  width: 100%;
  /*justify-content: left;*/
  overflow: hidden;
  /*flex-direction: row-reverse;*/
  
}



.rating > input {
  display: none;
}

.rating > label {
  cursor: pointer;
  width: 60px;
  height: 45px;
  margin-top: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76%;
  transition: .3s;
}

.rating > input:checked ~ label,
.rating > input:checked ~ label ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}


.rating > input:not(:checked) ~ label:hover,
.rating > input:not(:checked) ~ label:hover ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}


.gl-star-rating--stars > span{
  width:50px !important;
  height:50px !important;
}

.gl-star-rating--stars > span:hover{
  background-image: url(../img/star-hover.svg) !important;
}