/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

.form-control::placeholder {
    color: #999999;
}

.rating {
display: flex;
flex-direction: row-reverse;
justify-content: center
}

.rating > input {
  opacity: 0;
	position: absolute;
	z-index: -1;
}

.rating > label {
position: relative;
width: 1em;
font-size: 6vw;
color: #FFD600;
cursor: pointer
}

.rating > label::before {
content: "\2605";
position: absolute;
opacity: 0
}

.rating > label:hover:before,
.rating > label:hover ~ label:before {
opacity: 1 !important
}

.rating > input:checked ~ label:before {
opacity: 1
}

.rating:hover > input:checked ~ label:before {
opacity: 0.4
}