@charset "UTF-8";
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* ------------------------------------- RESET ------------------------------------- */

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

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

.rating { 
align-items: center;
justify-content: center;
text-align:center;
transform: rotate(180deg);

}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

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

.rating > label { 
  color: #c2c2c2; 
align-items: center;
justify-content: center;
text-align:center;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
.survey-rating{
 float:left;
}
.survey-rating > input { display: none; } 
.survey-rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
.survey-rating > .half:before { 
  content: "\f089";
  position: absolute;
}
.survey-rating > label { 
  color: #C2C2C2; 
 float:right;
}


.survey-rating > input:checked ~ label, /* show gold star when clicked */
.survey-rating:not(:checked) > label:hover, /* hover current star */
.survey-rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.survey-rating > input:checked + label:hover, /* hover current star when changing rating */
.survey-rating > input:checked ~ label:hover,
.survey-rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.survey-rating > input:checked ~ label:hover ~ label { color: #FFED85;  }