body {
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
}
div {
  font-size: 28px;
}
.basic {
  font-size: 28px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  align-content: center;
  text-align: center;
}
.input_form {
  position: absolute;
  left: 10%;
  top: 10%;
  display: block;
  text-align: left;
  width: 80%;
  font-size: 28px;
  
  
}
.rating_scale {
  display: block;
  position: absolute;
  text-align: center;
  left: 10%;
  width: 80%;
  font-size: 0;
  top: 70%;
  align-content: center;
  text-align: center;
}
.top20 {
  margin: 0;
  position: absolute;
  top: 20%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.rating_confirmation {
  display: block;
  position: absolute;
  text-align: center;
  left: 46%;
  font-size: 0;
  top: 80%;
}
.rating_scale span {
    box-sizing: border-box;
    padding: .3em .8em;
    font-size: 26px;
    font-weight: 100;
    width: 2.8em;
    background: #0f99d6;
    color: #eee;
    margin: .3em;
    cursor: pointer;
  }

input[type="radio"] {
    display: none;
}    
    input[type="radio"]:checked ~ span {
      background: #eb7823;
      color: #fff;
 }