.preview-messages {
    direction: rtl;
    text-align: right;
}

    .preview-messages .show-all:hover {
        background-color: #EEEEEE;
    }

    .preview-messages .show-all {
        cursor: pointer;
        border-top: 1px solid #F2F2F2;
        text-align: center;
        padding: 10px;
        background-color: #F8F8F8;
        font-size: 14px;
        color: #999999;
    }

        .preview-messages .show-all a {
            color: #999999;
            display: block;
        }

    .preview-messages .wrapper {
        max-height: 550px;
        padding-top: 0;
    }

    .preview-messages ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .preview-messages ul li:hover {
            background-color: #eef6ff;
        }

        .preview-messages ul li {
            display: block;
            position: relative;
        }

            .preview-messages ul li a {
                display: block;
                padding: 10px 25px 10px 25px;
            }

            .preview-messages ul li .date {
                font-size: 13px;
                color: #d3d3d4;
                margin: 15px 0;
            }

            .preview-messages ul li .title {
                margin-bottom: 5px;
                font-size: .9em;
            }

            .preview-messages ul li a > span {
                display: block;
            }

            .preview-messages ul li .name {
                color: black;
                font-size: 14px;
            }

            .preview-messages ul li .message {
                font-size: 13px;
                color: black;
                width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: block;
                overflow: hidden;
            }


            .preview-messages ul li div.hr {
                margin: 0 20px;
                padding: 1px;
                background-color: #F1F1F7;
                margin: 15px 25px 0 25px;
            }

            .preview-messages ul li:hover div.actions {
                opacity: .8;
            }

            .preview-messages ul li div.actions .fa {
                opacity: .5;
            }

            .preview-messages ul li div.actions {
                position: absolute;
                left: 0px;
                opacity: 0;
                transition: all .2s linear;
                background-color: white;
                color: #7d7d7d;
                height: 100%;
                width: 100px;
                text-align: center;
                font-size: 1.3em;
                padding-top: 45px;
                cursor: pointer;
            }

                .preview-messages ul li div.actions:hover .fa {
                    opacity: 1;
                }
              

    .preview-messages .animate-repeat.ng-leave {
        -webkit-transition: .2s linear all;
        -moz-transition: .2s linear all;
        -o-transition: .2s linear all;
        transition: .2s linear all;
        position: relative;
        opacity: 1;
        left: 0;
    }

    .preview-messages .animate-repeat.ng-leave-active {
        opacity: 0;
        left: 50%;
    }