#confetti-canvas {
	position:absolute;
	top:0;
}	
										
.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
	display:none;
}

.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
	
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.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: #c59b08;
}

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



.btn-scale {
  padding: 4px;
  width: 40px;
  text-align: center;
  font-weight: bold;
  color: black;
  font-size: 16px;
  border: solid 3px white;
  border-radius: 10px;
  background: #DDD;
  
}

.btn-scale.selected {
	outline: 2px solid #268DC2;
	outline-offset: 0px;
}

.btn-scale-asc-1, .btn-scale-desc-10 {
  background-color: #33FF00;
}

.btn-scale-asc-1:hover,
.btn-scale-desc-10:hover {
  background-color: #2CDE00;
}

.btn-scale-asc-2,
.btn-scale-desc-9{
  background-color: #66FF00;
}

.btn-scale-asc-2:hover,
.btn-scale-desc-9:hover{
  background-color: #59DE00;
}

.btn-scale-asc-3,
.btn-scale-desc-8 {
  background-color: #99FF00;
}

.btn-scale-asc-3:hover,
.btn-scale-desc-8:hover {
  background-color: #85DE00;
}

.btn-scale-asc-4,
.btn-scale-desc-7 {
  background-color: #CCFF00;
}

.btn-scale-asc-4:hover,
.btn-scale-desc-7:hover {
  background-color: #B1DE00;
}

.btn-scale-asc-5,
.btn-scale-desc-6 {
  background-color: #FFFF00;
}

.btn-scale-asc-5:hover,
.btn-scale-desc-6:hover {
  background-color: #DEDE00;
}

.btn-scale-asc-6,
.btn-scale-desc-5 {
  background-color: #FFCC00;
}

.btn-scale-asc-6:hover,
.btn-scale-desc-5:hover {
  background-color: #DEB100;
}

.btn-scale-asc-7,
.btn-scale-desc-4 {
  background-color: #FF9900;
}

.btn-scale-asc-7:hover,
.btn-scale-desc-4:hover {
  background-color: #DE8500;
}

.btn-scale-asc-8,
.btn-scale-desc-3 {
  background-color: #FF6600;
}

.btn-scale-asc-8:hover,
.btn-scale-desc-3:hover {
  background-color: #DE5900;
}

.btn-scale-asc-9,
.btn-scale-desc-2 {
  background-color: #FF3300;
}

.btn-scale-asc-9:hover,
.btn-scale-desc-2:hover {
  background-color: #DE2C00;
}

.btn-scale-asc-10,
.btn-scale-desc-1 {
  background-color: #FF0000;
}

.btn-scale-asc-10:hover,
.btn-scale-desc-1:hover {
  background-color: #DE0000;
}

.btn-scale-5stars {
	background-color: #c59b08;
}