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

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

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

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

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

    .preview-notifications ul {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

        .preview-notifications ul li:hover {
            background-color: #eef6ff;
            cursor: pointer;
        }

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

            .preview-notifications ul li div.row {
                display: block;
                padding: 10px 25px 10px 25px;
            }

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

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

            .preview-notifications ul li div.row span {
                display: block;
            }

            .preview-notifications ul li div.row .icon {
                font-size: 2em;
                text-align: center;
                margin-top: 45px;
            }

                .preview-notifications ul li div.row .icon.share {
                    color: #A9EA2F;
                }

                .preview-notifications ul li div.row .icon.system {
                    color: #118dcf;
                }
                .preview-notifications ul li div.row .icon.permissions {
                    color: #cf1111;
                }

            .preview-notifications ul li .body-content {
                color: black;
                font-size: 13px;
            }

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

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

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

            .preview-notifications ul li div.actions {
                position: absolute;
                z-index: 1;
                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: 60px;
                cursor: pointer;
            }

                .preview-notifications ul li div.actions:hover .fa {
                    opacity: 1;
                    color: #24c318;
                }

    .preview-notifications .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-notifications .animate-repeat.ng-leave-active {
        opacity: 0;
        left: 50%;
    }