/* ------ MAIN STYLES ------ */

body {
    direction: ltr;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    width: 100%;
    min-height: 100%;
    position: absolute;
}

h1, h2, h3, h4, h5, h6, p, small {
    font-family: 'Source Sans Pro', sans-serif;
}

.clearfix {
    clear: both;
}

.pull-end {
    float: right;
}

.pull-start {
    float: left;
}

.text-start {
    text-align: left;
}

.text-end {
    text-align: right;
}

.container {
    margin-bottom: 100px;
}

.footer {
    position: absolute !important;
    clear: both;
    width: 100%;
    bottom: 0;
    right: 0;
    padding: 10px 0;
    margin: 50px 0 0 0 !important;
    border-radius: 0 !important;
}

.img-placeholder {
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/****** Style Star Rating Widget *****/
.rating {
    border: none;
    direction: ltr;
}

.rating > input {
    display: none;
}

.rating > label:before {
    margin: 0 2px;
    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;
}

/***** 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: #FFD700;
    cursor: pointer;
}

/* 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: #FFED85;
}

/****** Style Like Widget *****/

.like {
    border: none;
}

.like > input {
    display: none;
}

.like > label:before {
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f08a";
    color: red;
}

.like > label {
    color: #ddd;
    float: right;
}

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

.like > input:checked ~ label:before, /* show gold star when clicked */
.like:not(:checked) > label:hover, /* hover current star */
.like:not(:checked) > label:hover ~ label:before {
    content: "\f004";
    cursor: pointer;
}

/* hover previous stars in list */
.like > input:checked + label:hover, /* hover current star when changing rating */
.like > input:checked ~ label:hover,
.like > label:hover ~ input:checked ~ label:before, /* lighten current selection */
.like > input:checked ~ label:hover ~ label:before {
    content: "\f004";
}

/* MESSAGES */

.messages {
    clear: both;
    margin: 0;
    overflow-y: scroll;
    padding: 0 10px;
    height: calc(100vh - 350px);
}

.messages::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.20);
    border-radius: 5px;
    transition: .5s all;
}

.messages:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.35);
}


.message {
    background: #F5F5F5;
    border-radius: 20px;
    padding: 20px;
    width: 80%;
    margin-bottom: 10px;
}

.message.sent {
    float: left;
    border-top-left-radius: 0;
}

.message.received {
    background: #fff0f5;
    float: right;
    border-top-right-radius: 0;
}

.message.received.new {
    background-image: linear-gradient(to bottom right, #ff8a00, #e52e71);
    color: white;
}

.message .thumb {
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #999;
    float: left;
}

.message .sender {
    margin: 0 0 0 5px;
    font-weight: bold;
    font-size: 14px;
}

.message .time {
    margin: 0 0 0 5px;
}

.message .status {
    color: green;
}

.message.received .status {
    display: none;
}

.col {
    float: left;
}