@font-face {
    font-family: "flaticon";
    src:  url("../fonts/flaticon.ttf?") format("truetype"),
          url("../fonts/flaticon.woff?") format("woff"),
          url("../fonts/flaticon.woff2?") format("woff2"),
          url("../fonts/flaticon.eot?#iefix") format("embedded-opentype"),
          url("../fonts/flaticon.svg?#flaticon") format("svg");
}

div.rating-cancel a::before, 
div.star-rating a::before {
    font-family: flaticon !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 26px;
}

.flaticon-close::before {
    content: "\f101";
}
.flaticon-star-1::before {
    content: "\f102";
}
.flaticon-star::before {
    content: "\f103";
}



div.rating-cancel,
div.star-rating {
  float:left;
  width:26px;
  height:26px;
  cursor:pointer;
  display:block;
  background:transparent;
  overflow:hidden;
  margin-right: 4px;
}

div.rating-cancel,
div.rating-cancel a {
  /* background:url(delete.png) no-repeat 0 0px */
}

div.rating-cancel a::before {
    content: "\f101";
    font-size: 16px;
}

div.star-rating,
div.star-rating a{
  /* background:url(star-fill.svg) no-repeat 0;
  background-size: contain; */
}

div.star-rating a::before {
    content: "\f102";
}


div.rating-cancel a,
div.star-rating a {
  display:block;
  font-size: 1.125rem;
  background-position:0 0px;
  border:0
}

div.star-rating-on a {
  color: orange;
}

div.star-rating-on a::before {
  color: orange;
}

div.star-rating-hover a::before,
div.star-rating-on a::before {
  content: "\f103";
}

div.rating-cancel.star-rating-hover a::before {
  content: "\f101";
  color: red;
}

div.star-rating-readonly a {
  cursor:default !important
}

div.star-rating{
  background:transparent!important;
  overflow:hidden!important
}