.rating {
  display: block;
  position: relative;
  height: 70px;
  line-height: 70px;
  font-size: 70px;
}
@media screen and (max-width: 52.5em) {

.rating {
  display: block;
  position: relative;
  height: 50px;
  line-height: 50px;
  font-size: 50px;
}

}

.rating label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  cursor: pointer;
}

.rating label:last-child {
  position: static;
}

.rating label:nth-child(1) {
  z-index: 5;
}

.rating label:nth-child(2) {
  z-index: 4;
}

.rating label:nth-child(3) {
  z-index: 3;
}

.rating label:nth-child(4) {
  z-index: 2;
}

.rating label:nth-child(5) {
  z-index: 1;
}

.rating label input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.rating label .icon {
  float: left;
  color: transparent;
/*  color: #0d162dbd;*/
}

.rating label:last-child .icon {
  color: #007f73;
  color: #a0cfcd;
  color: #2e474661;
}

.rating:not(:hover) label input:checked ~ .icon,
.rating:hover label:hover input ~ .icon {
  color: #ffc107;
}

/*.rating:not(:hover) label input:checked ~ .bad-icon,
.rating:hover label:hover input ~ .bad-icon {
  color: #c62828;
}

.rating:not(:hover) label input:checked ~ .poor-icon,
.rating:hover label:hover input ~ .poor-icon {
  color: #fc4b6c;
}

.rating:not(:hover) label input:checked ~ .average-icon,
.rating:hover label:hover input ~ .average-icon {
  color: #ffb22b;
}

.rating:not(:hover) label input:checked ~ .good-icon,
.rating:hover label:hover input ~ .good-icon {
  color: #7fda06 ;
}*/

.rating label input:focus:not(:checked) ~ .icon:last-child {
  color: #000;
  text-shadow: 0 0 5px #09f;
}

label.wimg > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label.wimg > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  opacity : .4;
}
label.wimg > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  /*border:2px solid #f00;*/
opacity : 1;
}
.cst-ctrl {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-height: 1.5rem !important;
    padding-left: 0rem !important;
    margin-right: 1.6rem !important;
}
.qblock {
  margin : 25px 0 10px 0;
}
#dvChoice {
  display: none;
}




/* Customize the label (the container) */
.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 21px;
  width: 21px;
border: 5px solid #0000001f;
    background-color: #30303040;
    border-radius: 10%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .checkmark {
  background-color: #cddc39;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white !important;
}

.radio-container input:checked ~ .checkmark.complaint{
background-color: #d32f2f;
    border: 5px solid #b71c1c;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
  }

  .radio-container input:checked ~ .checkmark.concern {
    background-color: #ffa000;
    border: 5px solid #f57c00;
  -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
  }

    .radio-container input:checked ~ .checkmark.suggestion {
    background-color: #8bc34a;
    border: 5px solid #004D40;
      -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
  }

    .radio-container input:checked ~ .checkmark.compliment {
background-color: #43a047;
    border: 5px solid #2e7d32;
      -webkit-animation: ripple 0.2s linear forwards;
  animation: ripple 0.2s linear forwards;
  }