@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 0; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  /* float: left; */
  display: inline-block;
}

.rating > input { 
    display: none; 
    cursor: pointer;
} 
.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 > span: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: #ddd; 
 float: right; 
}
.rating > span { 
  color: #ddd; 
 float: right; 
}

/***** 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: #22ce99;  } /* 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: #22ce99;  } 

span.checked{
    color: #22ce99;
}

.review-form-title{
    width: 547px;
    height: auto;
    font-family: 'AvenirLTStd-Heavy', Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.07;
    letter-spacing: -0.9px;
    text-align: center;
    color: #000000;
    text-align: center;
    margin: 0 auto;
}
.review-form-description {
    text-align: center;
    margin: 7px auto 5vh;
    color: #111111;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 1px;
}
.woocommerce-account .site-main form label.grid-item{
    display: block;
}
.woocommerce-account .site-main form label.half, .woocommerce-account .site-main form label.full{
    display: block;
}
.woocommerce-account .site-main form#review-form{
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        padding: 0;
        box-sizing: border-box;
}
.f-default__field{
    border-bottom: 1px solid #000;
}
/* input.f-default__field:invalid{
    border-bottom: 1px solid red;
} */
._invalid{
    border-bottom: 1px solid red;
}
label.f-default__label.grid-item{
    margin: 0;
}
.grid-centered{
    margin: 0;
}

.f-default__textarea{
    height: 100px;
}
.rating-label{
    width: auto;
    margin: 0 10px 0 0; 
}

.woocommerce-page form input:not([type='checkbox']){
    border-bottom: 1px solid #525252;
}

::-webkit-input-placeholder { /* Edge */
    color: #84898f;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #84898f;
}

::placeholder {
color: #84898f;
}

.f-default__bottom{
    margin: 0;
}
._sent_ok{
    padding: 0;
    height: auto;
}
.f-review__wrapper{
    transition: 0.3s linear;
    max-width: 690px;
    margin: 0 auto;
    padding: 0;
}
.f-review__wrapper._sent{
    height: auto;
    margin: 0 auto 2vh auto;
}
.thank-you-wrapper {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.thank-you-wrapper svg {
    width: 60px;
    margin: 2vh auto;
}
.grid-centered{
    width: 100%;
}
.grid-md-gap{
    margin: 0 0 2vh 0;
}
._show{
    display: flex;
}
._hide{
    display: none;
}
._hide-up{
    height: 0;
    opacity: 0;
}
@media only screen and (max-width: 740px){
    .f-default__bottom{
        margin: 0;
    }
    .f-default__submit{
        margin: 0;
    }
    ._sent_ok h2{
        font-size: 30px;
    }
    .site-main{
        padding: 0;
        margin: 0 2vw;
    }

}
@media only screen and (max-width: 414px){
    .grid-md-gap {
        gap: 2vh 4vw;
    }
    .review-form-title{
        width: 100%;
        font-size: 32px;
    }
}
    