.rate {
    float: unset;
    height: 46px;
    /* padding: 0 10px; */
}

.rate {
    float: unset;
    height: 46px;
    /* padding: 0 10px; */
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: row-reverse;
}

.rate:not(:checked) > input {
    position:absolute;
    display: none;
}

.rate:not(:checked) > label {
    float:unset;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}

.rated:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.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;
}

.star-rating-complete{
    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;
}

.rated {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rated:not(:checked) > input {
    position:absolute;
    display: none;
}

.rated:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ffc700;
}

.rated:not(:checked) > label:before {
    content: '★ ';
}

.rated > input:checked ~ label {
    color: #ffc700;
}

.rated:not(:checked) > label:hover,
    .rated:not(:checked) > label:hover ~ label {
    color: #deb217;
}

.rated > input:checked + label:hover,
.rated > input:checked + label:hover ~ label,
.rated > input:checked ~ label:hover,
.rated > input:checked ~ label:hover ~ label,
.rated > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

.modal.show .modal-dialog.rating-modal {
    transform: none;
    top: 26%;
}

span.send-feedback {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #3ebf5c;
    background: #c3e6cb;
}

.rate:not(:checked) > label:before {
    content: '★ ';
    cursor: default;
}

.review-submit-btn {
    text-align: center;
    margin-top: 8px;
}

button#review-submit {
    color: #fff;
    background-color: black;
}

button#food-review-submit {
    color: #fff;
    background-color: black;
}

/* star rating css */
[data-star] {
    text-align:left;
    font-style:normal;
    display:inline-block;
    position: relative;
    unicode-bidi: bidi-override;
    font-size: 30px;
  }
  [data-star]::before {
    display:block;
    content: '★★★★★';
    color: #eee;
  }
  [data-star]::after {
    white-space:nowrap;
    position:absolute;
    top:0;
    left:0;
    content: '★★★★★';
    width: 0;
    color: #c59b08;
    overflow:hidden;
    height:100%;
  }
  [data-star^="0.1"]::after{width:2%}
  [data-star^="0.2"]::after{width:4%}
  [data-star^="0.3"]::after{width:6%}
  [data-star^="0.4"]::after{width:8%}
  [data-star^="0.5"]::after{width:10%}
  [data-star^="0.6"]::after{width:12%}
  [data-star^="0.7"]::after{width:14%}
  [data-star^="0.8"]::after{width:16%}
  [data-star^="0.9"]::after{width:18%}
  [data-star^="1"]::after{width:20%}
  [data-star^="1.1"]::after{width:22%}
  [data-star^="1.2"]::after{width:24%}
  [data-star^="1.3"]::after{width:26%}
  [data-star^="1.4"]::after{width:28%}
  [data-star^="1.5"]::after{width:30%}
  [data-star^="1.6"]::after{width:32%}
  [data-star^="1.7"]::after{width:34%}
  [data-star^="1.8"]::after{width:36%}
  [data-star^="1.9"]::after{width:38%}
  [data-star^="2"]::after{width:40%}
  [data-star^="2.1"]::after{width:42%}
  [data-star^="2.2"]::after{width:44%}
  [data-star^="2.3"]::after{width:46%}
  [data-star^="2.4"]::after{width:48%}
  [data-star^="2.5"]::after{width:50%}
  [data-star^="2.6"]::after{width:52%}
  [data-star^="2.7"]::after{width:54%}
  [data-star^="2.8"]::after{width:56%}
  [data-star^="2.9"]::after{width:58%}
  [data-star^="3"]::after{width:60%}
  [data-star^="3.1"]::after{width:62%}
  [data-star^="3.2"]::after{width:64%}
  [data-star^="3.3"]::after{width:66%}
  [data-star^="3.4"]::after{width:68%}
  [data-star^="3.5"]::after{width:70%}
  [data-star^="3.6"]::after{width:72%}
  [data-star^="3.7"]::after{width:74%}
  [data-star^="3.8"]::after{width:76%}
  [data-star^="3.9"]::after{width:78%}
  [data-star^="4"]::after{width:80%}
  [data-star^="4.1"]::after{width:82%}
  [data-star^="4.2"]::after{width:84%}
  [data-star^="4.3"]::after{width:86%}
  [data-star^="4.4"]::after{width:88%}
  [data-star^="4.5"]::after{width:90%}
  [data-star^="4.6"]::after{width:92%}
  [data-star^="4.7"]::after{width:94%}
  [data-star^="4.8"]::after{width:96%}
  [data-star^="4.9"]::after{width:98%}
  [data-star^="5"]::after{width:100%}

.star-rating-related i {
    font-size: 18px;
}

.rating-modal {
    max-width: 30% !important;
}