﻿/*https://codepen.io/recodenow/pen/YZqgZW */
#hubspotFeedbackForm .rating {
    /*margin-top: 40px;*/
    border: none;
    float: left;
}

    #hubspotFeedbackForm .rating > label {
        color: #90A0A3;
        float: right;
        /*unset the stuff form style.css*/
        padding-left: unset !important;
    }

        #hubspotFeedbackForm .rating > label:before {
            margin: 5px;
            font-size: 2em;
            font-family: 'Font Awesome 6 Pro';
            content: "\f005";
            font-weight: 400; /*use outline*/
            display: inline-block;

            /*unset the stuff from style.css*/
            background-color: unset;
            border: unset;
            border-radius: unset;
            /*content: "";*/
            /*display: inline-block;*/
            height: unset;
            line-height: unset;
            margin-left: unset;
            position: unset;
            top: unset;
            transition: unset;
            width: unset;
        }

    #hubspotFeedbackForm .rating > input {
        display: none;
    }

        #hubspotFeedbackForm .rating > input:checked ~ label,
        #hubspotFeedbackForm .rating:not(:checked) > label:hover,
        #hubspotFeedbackForm .rating:not(:checked) > label:hover ~ label {
            color: #F79426;
        }

            #hubspotFeedbackForm .rating > input:checked ~ label:before,
            #hubspotFeedbackForm .rating:not(:checked) > label:hover:before,
            #hubspotFeedbackForm .rating:not(:checked) > label:hover ~ label:before {
                font-weight: 900; /*use filled*/
            }

            #hubspotFeedbackForm .rating > input:checked + label:hover,
            #hubspotFeedbackForm .rating > input:checked ~ label:hover,
            #hubspotFeedbackForm .rating > label:hover ~ input:checked ~ label,
            #hubspotFeedbackForm .rating > input:checked ~ label:hover ~ label {
                color: #FECE31;
            }

                #hubspotFeedbackForm .rating > input:checked + label:hover:before,
                #hubspotFeedbackForm .rating > input:checked ~ label:hover:before,
                #hubspotFeedbackForm .rating > label:hover ~ input:checked ~ label:before,
                #hubspotFeedbackForm .rating > input:checked ~ label:hover ~ label:before {
                    font-weight: 900; /*use filled*/
                }
