.ratings {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.rating-option {
    text-align: center;
    cursor: pointer;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.rating-option input {
    display: none;
}

.rating-option label {
    display: inline-block;
    -webkit-transition: color 0.2s, -webkit-transform 0.2s;
    transition: color 0.2s, -webkit-transform 0.2s;
    transition: transform 0.2s, color 0.2s;
    transition: transform 0.2s, color 0.2s, -webkit-transform 0.2s;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
}

@media (max-width: 575px) {
    .rating-option label {
        width: 30px;
        height: 30px;
    }

    .rating-option label.v-unsatisfied::before {
        background-size: 30px;
    }
}

.rating-option label.v-unsatisfied:hover:before {
    background-image: url("../images/user-feedback/v-fill.svg");
}

.rating-option label.unsatisfied:hover {
    background-color: #EB9632;
}

.rating-option label.unsatisfied:hover:before {
    background: #BF6A25;
}

.rating-option label.neutral:hover {
    background-color: #EEC200;
}

.rating-option label.neutral:hover:before {
    background: #C49500;
}

.rating-option label.satisfied:hover {
    background-color: #53B964;
}

.rating-option label.satisfied:hover:before {
    background: #3D8A4A;
}

.rating-option label.v-satisfied:hover {
    background-color: #19C56C;
}

.rating-option label.v-satisfied:hover:before {
    background: #128953;
}

.rating-option span {
    display: block;
    color: rgba(52, 76, 96, 0.5019607843);
    font-weight: 500;
    font-size: 18px;
}

@media (max-width: 575px) {
    .rating-option span {
        display: none;
    }
}

.rating-option input:checked+label.v-unsatisfied:before {
    background-image: url("../images/user-feedback/v-fill.svg");
}

.rating-option input:checked+label.unsatisfied {
    background-color: #EB9632;
}

.rating-option input:checked+label.unsatisfied:before {
    background: #BF6A25;
}

.rating-option input:checked+label.neutral {
    background-color: #EEC200;
}

.rating-option input:checked+label.neutral:before {
    background: #C49500;
}

.rating-option input:checked+label.satisfied {
    background-color: #53B964;
}

.rating-option input:checked+label.satisfied:before {
    background: #3D8A4A;
}

.rating-option input:checked+label.v-satisfied {
    background-color: #19C56C;
}

.rating-option input:checked+label.v-satisfied:before {
    background: #128953;
}

.rating-option input:checked+label+span {
    color: #344C60 !important;
}

.feedback-section {
    margin-bottom: 20px;
}

.options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    /* margin-bottom: 32px; */
}

.options label {
    border: 1px solid rgba(52, 76, 96, 0.2);
    border-radius: 54px;
    padding: 8px 16px;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    color: #344C60;
    font-size: 20px;
    font-weight: 500;
}

@media (max-width: 575px) {
    .options label {
        font-size: 16px;
    }
}

.options input {
    display: none;
}

.options input:checked+label {
    background: #344C60;
    color: #fff;
    border-color: #344C60;
}

.rating-option label:before {
    content: "";
    display: inline-block;
    width: 80px;
    height: 80px;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

@media (max-width: 575px) {
    .rating-option label:before {
        width: 30px;
        height: 30px;
    }
}

.rating-option label.v-unsatisfied:before {
    background-image: url("../images/user-feedback/v-unsatisfied.svg");
}

.rating-option label.unsatisfied:before {
    -webkit-mask-image: url("../images/user-feedback/unsatisfied.svg");
    background: #8594A0;
}

.rating-option label.neutral:before {
    -webkit-mask-image: url("../images/user-feedback/neutral.svg");
    background: #8594A0;
}

.rating-option label.satisfied:before {
    -webkit-mask-image: url("../images/user-feedback/satisfied.svg");
    background: #8594A0;
}

.rating-option label.v-satisfied:before {
    -webkit-mask-image: url("../images/user-feedback/v-satisfied.svg");
    background: #8594A0;
}

.feedback-query label {
    font-weight: 600 !important;
    font-size: 20px !important;
    margin-bottom: 20px !important;
}

.feedback-query textarea {
    resize: none;
    background-color: #F8F8F8;
    border-radius: 10px;
}

.feedback-query textarea:focus {
    border: 1px solid rgba(48, 70, 84, 0.1019607843);
}

.feedback-query .icon {
    width: 35px !important;
    height: 35px !important;
}

.feedback-query .icon:after {
    width: 2.8rem !important;
    height: 2.8rem !important;
}

.feedback-query .card-footer.bg-grey13 {
    padding-inline: 0 !important;
}

@media (max-width: 575px) {
    .btn-shareclip {
        font-size: 16px;
    }
}

.btn-shareclip:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("../images/user-feedback/share-clip.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background: rgba(52, 76, 96, 0.8);
}

.font-500.mb-0 {
    margin-bottom: 0 !important;
}

.btn-feedback {
    position: fixed;
    top: 50%;
    inset-inline-end: 0;
    background: linear-gradient(99deg, #A22349 -19.34%, #2B5A7B 91.32%);
    color: #fff;
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 8px 20px 8px 16px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    z-index: 999;
}

.btn-feedback:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("../images/user-feedback/feedback-icon.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background: #fff;
}

.btn-feedback:hover {
    color: #fff;
}

@media(max-width: 575px) {
    .btn-feedback {
        font-size: 14px;

        &:before {
            @include size(14px);
        }
    }
}
.rating-number {
    border: 1px solid rgba(52, 76, 96, 0.1215686275);
    border-radius: 6px;
  }
  .rating-number input {
    display: none;
  }
  .rating-number input:checked + label {
    background-color: #344C60;
    color: #fff;
    border-radius: inherit;
  }
  .rating-number label {
    cursor: pointer;
    padding: 14px 20px;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  .ratings-holder {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 10px;
  }
  
  .rating-comments {
    display: none;
  }