@import "compass";
@import url(materialize.css);


.message-right{
    height: 100%;
    position: relative;
    transform-origin: 100% 100% 0px;
    padding-right: 0;
    padding-left: 0;
    padding-top: 5px;

    .list {
        overflow-y: scroll;
        max-height: 360px;
        vertical-align: bottom;
        margin-bottom: 10px;
        padding-left: 0;

        .card {
            &.horizontal {
                margin: 0;

                .card-content .create-date {
                    padding-right: 6px;
                    font-size: 0.8em;
                    padding-top: 10px;

                }

                .card-image {
                    max-width: 40px;
                    max-height: 40px;
                }
                .card-content p{
                    white-space: pre-line;
                }

            }
        }

    }

    .reply-form {
        height: 40%;
    }

}

.message-left{
    background: none;
    margin-left: 0;
    padding-left: 0;
    padding-right: 8px;

    a{
        text-decoration: none;
    }

    .card.horizontal:hover{
        background: #f1f1f1;
    }

    .card.horizontal.unread{
        background: #3e6694;
        color: #FFF;

        &:hover{
            background: #3e5583;
        }
    }
}


.message-right .display-message{
    display: block;
    height: 80%;
    width: 100%;
    border-bottom: 1px solid #ccc;
    overflow-y:scroll;
}
.message-right .send-message{
    height: 20%;
    background: #eee;
    padding: 10px;
}
.display-message .pmessage{
    min-height: 60px;
    padding: 5px;
}
.pmessage .img-con{
    width: 10%;
    float: left;
    height: inherit;
}
.pmessage .img-con > img{
    height: 50px;
    width: 50px;
}
.pmessage .text-con{
    width: 90%;
    float: left;
    height: inherit;
}
hr{
    margin-top: 0;
    margin-bottom: 0;
    border-top:1px solid #ccc;
}