@import url('../plugins/fontawesome_5.15.1/css/all.min.css')!important;

.rate *{
    margin: 0!important;
    padding: 0!important;
}
.rate {
    float: left!important;
    height: 46px!important;
    padding: 0 10px!important;
}
.rate:not(:checked) > input {
    position:absolute!important;
    /* top:-9999px!important; */
    top:0px!important;
    /* z-index:1!important; */
}
.rate:not(:checked) > label {
    float:right!important;
    width:1em!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    font-size:30px!important;
    color:#ddd!important;
}
.rate:not(:checked) > label:before {
    content: '★ '!important;
}
.rate > input:checked ~ label {
    color: var(--mainColor)!important;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: var(--mainColor)!important;
}
.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: var(--mainColor)!important;
}

input[type="radio"] + label:after {
    background-color: transparent!important;
}

input[type="radio"] + label:before,input[type="radio"] + label:after {

    border-color: unset!important;
    border-style: unset!important;
    border-width: unset!important;
}
input[type="radio"] + label:hover:before {
    background-color: transparent!important;
}
input[type="radio"] + label:before, input[type="radio"] + label:after {

    height: auto!important;

    width: auto!important;
}
input[type="radio"] + label {

    min-width: 50px!important;
    padding: 20px!important;

}
input[type="radio"]:focus,input[type="radio"]:active {
    border-color: unset!important;
    border-style: unset!important;
    border-width: unset!important;

/* Modified from: https://github.com/mukulkant/Star-rating-using-pure-css */