@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.alert-box {
    z-index: 1050;
}

form[name*="newReview"] > .rating-container fieldset, label {
    margin: 0 auto;
    padding: 0;
    display: inline;
}

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

.rating-container > .rating {
    border: none;
}

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

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

.rating-container > .rating > label {
    color: #ff9700;
    float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

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

.rating-container > .rating:not(:checked) > label:hover ~ label.full:before,
.rating-container > .rating > label.full:hover:before {
    content: "\f005";
}



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

.rating-container > .rating > input:checked ~ label.full:before {
    content: "\f005";
}

.rating-container > .rating > input:not(:checked) ~ label.half {
    opacity: 0;
}

.rating-container > .rating > input:not(:checked) ~ label.half:hover,
.rating-container > .rating > input:checked ~ label.half {
    opacity: 1;
}

.review-modal form[name*="newReview"] *::-webkit-scrollbar {
    display: none;
}

.review-modal form[name*="newReview"] > * {
    margin-top: 15px;
}

.review-modal form[name*="newReview"] > div > textarea {
    min-height: 8rem;
    resize: none;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 3px;
    width: 75%;
    margin: 0 auto;
    background-color: #F0F0F0;
    padding: 1rem;
    line-height: 19px;
}

.review-modal form[name*="newReview"] div > input {
    resize: none;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 3px;
    min-height: 2rem;
    width: 75%;
    margin: 0 auto;
    background-color: #F0F0F0;
    padding: 1rem;
}

.review-modal form[name*="newReview"] div > input:focus,
.review-modal form[name*="newReview"] div > textarea:focus {
    outline: none;
    border: 1px solid rgb(242, 122, 0);
    background-color: #E5E5E5
}

.review-modal form[name*="newReview"] .input-label {
    align-self: flex-start;
    margin-left: 12.5%;
}

.review-modal form[name*="newReview"] .input-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.review-modal > .modal-box {
    display: flex;
    flex-direction: column;
}

.review-modal > .modal-box > .modal-body {
    text-align: center;
}

.review-modal > .modal-box .score-text {
    font-size: 2rem;
    color: #ff9700;
}

.review-modal .modal-body > .send-review {
    background-color: #fe9700;
    border-radius: 5px;

}

.review-modal .input-section .length {
    text-align: right;
    margin-right: 10%;
}

.review-modal .input-section .-red {
    color: red;
}

.review-modal .input-section .warning {
    text-align: left;
    margin-left: 10%;
    margin-top: 10px;
}

.review-modal .input-section > .footer-text {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.review-modal .modal-footer {
    border: none;
}

@media only screen and (min-width: 500px) {
    .rating-container > .rating > input:checked + label:hover, /* hover current star when changing rating */
    .rating-container > .rating > input:checked ~ label:hover,
    .rating-container > .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
    .rating-container > .rating > input:checked ~ label:hover ~ label { color: #ff7a01;  }

    #review-modal > .modal-box {
        width: 80%;
        max-width: 720px;
    }

    .rating > label:before {
        font-size: 3em;
    }

    .review-modal form[name*="newReview"] .input-label  {
        margin-left: auto;
    }

    .review-modal .input-section .length {
        margin-right: 12.5%;
    }

    .review-modal .input-section .warning {
        margin-left: 12.5%;
    }

    .review-modal .input-section > .footer-text {
        flex-direction: row;
    }

    .review-modal > .modal-box .score-text {
        font-size: 2.5rem;
    }

    .review-modal .input-section .length {
        margin-top: 10px;
    }
}

@media only screen and (orientation: portrait) {
    #review-modal > .modal-box > .modal-body,
    #review-modal > .modal-box > .modal-footer
    {
        position: static;
        overflow: hidden;
    }


    #review-modal > .modal-box {
        max-height: 500px;
        margin: 10vh auto;
    }
}