@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v133/syl7-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-obHph2-jOcZTKPqw.woff2) format('woff2');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.rate {height: 70px;padding: 0 10px;width: 450px;margin: 0 auto;display: block;position: relative;display: flex;flex-direction: row-reverse;flex-wrap: nowrap;justify-content: space-between;}
.rate:not(:checked) > input {
position:absolute;
display: none;
}
.rate:not(:checked) > label {
float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 70px;
    line-height: 70px;
    color: #ccc;
    margin: 0px 5px;
}
.rate:not(:checked) > label:before {content: '\e838';font-family: 'Material Symbols Rounded';}
.rate > input:checked ~ label {
color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
color: #c59b08;
}
.rating-container .form-control:hover, .rating-container .form-control:focus{
background: #fff;
border: 1px solid #ced4da;
}
.rating-container textarea:focus, .rating-container input:focus {
color: #000;
}

#add_raiting_post #sendmessage {
    border: none;
    padding: 10px;
    text-align: center;
    background: transparent;
    color: #0f3c01;
    display: none;
    z-index: 2;
    position: absolute;
    right: -64px;
    top: -5px;
    font-size: 64px;
    line-height: 64px;
    width: 80px;
    margin: 0 auto;
}

.useful-info {
  display: flex;
  flex-direction: column;
}

.useful-info .voices {
  margin-block-start: 32px;
}

@media screen and (max-width: 700px) {
  .useful-info #add_raiting_post.validateform {
    margin-block: 0;
    padding-block: 0;
  }
  .useful-info .voices {
  margin-block-start: 15px;
}
  .rate:not(:checked) > label {
    font-size: 48px;
  }
  .rate {
    width: 90vw;
    max-width: 380px;
  }

  .rate > input:checked + label:hover, .rate > input:checked + label:hover ~ label, .rate > input:checked ~ label:hover, .rate > input:checked ~ label:hover ~ label, .rate > label:hover ~ input:checked ~ label {
    color: #ffc700;
  }
  
}