div.stars {
    /*width: 270px;*/
    display: inline-block;
}

input.star {
    display: none;
}

@media (max-width: 362px) {
    label.star {
        font-size: 25px !important;
    }

    .sm-margin-rate {
        margin-right: 10% !important;
    }
}

label.star {
    float: right;
    padding: 10px;
    font-size: 36px;
    color: rgba(0, 136, 221, 0.37) !important;
    transition: all .2s;
    cursor: pointer;
}

input.star:checked ~ label.star:before {
    content: '\f005';
    color: #FF9800;
    transition: all .25s;
}


input.star-5:checked ~ label.star:before {
    color: #8BC34A;
}

input.star-1:checked ~ label.star:before {
    color: #f44336;
}

label.star:before {
    content: '\f006';
    font-family: FontAwesome;
}

.rev-box {
    overflow: hidden;
    height: 0;
    width: 100%;
    transition: all .25s;
}

textarea.review {
    background: #222;
    border: none;
    width: 100%;
    max-width: 100%;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    color: #EEE;
}

label.review {
    border: none;
    width: 100%;
    max-width: 100%;
    height: 50%;
    padding: 10px;
    box-sizing: border-box;
    color: #444;
}

div.review {
    border: none;
    width: 100%;
    max-width: 100%;
    height: 50%;
}

.full-height {
    height: 100%;
}

/*form .star-wrapper input.star:checked ~ form .rev-box {
    height: 100%;
    background: #333;
}*/

.rating-title {
    color: #0088dd;
    font-weight: bold;
    min-height: 48px;
}

.para {
    color: #444;
}

#rating .image-checkbox .caption {
    min-height: 120px;
}

#rating .image-checkbox .para{
    min-height: 64px;
}

.star-wrapper {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}


@media (min-width: 425px) and (max-width: 768px) {
    label.star {
        margin-right: 9% !important;
    }

    .rating-title {
        font-size: 1em;
    }

    .image-checkbox {
        padding: 1em !important;
    }
}

@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
    #rating .img-fluid {
        max-width: 180px;
    }
}
