:host{
    display:inline-block;
}

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

#rating { 
  border: none;
  float: left;
}

#rating > input { display: none; } 
#rating > label:before { 
  margin-left: 5px;
  font-family: 'fontello';
  display: inline-block;
  content: "\e800";
}

#rating > .half:before { 
  content: "\e803";
  position: absolute;
}

#rating > label { 
color: #DDD; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/


#rating > input:checked ~ label, /* show gold star when clicked */
/* The negation pseudo-class is used to hide the rule from older browsers 
which don’t support some of the techniques required */
#rating:not(old) > input:not([disabled]) + label:hover, /* hover current star */
#rating:not(old) > input:not([disabled]) + label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

#rating > input:checked:not([disabled]) + label:hover, /* hover current star when changing rating */
#rating > input:checked:not([disabled]) ~ label:hover,
#rating > label:hover ~ input:checked:not([disabled]) ~ label, /* lighten current selection */
#rating > input:checked:not([disabled]) ~ label:hover ~ label { color: #FFED85;  }