.fade-in {
    display: none;
    background-color: #fff;
    position: absolute;
    width: 149px;
    position: absolute;
    height: 18px;
    bottom: 37px;
    left: 18px;
    border: 1px solid #ccc;
    box-shadow: 5px 5px rgba(102,102,102,.1);
    border-radius: 5px;
    color: red;
    padding: 19px 18px;
}

.notif-part > ul {
    height: 31px;
    font-size: 0;
    display: inline-block;
    margin-left: 5px;
}

    .notif-part > ul > li {
        display: inline-block;
        position: relative;
    }

        .notif-part > ul > li > a {
            display: block;
            padding: 9px 17.1px;
            text-decoration: none;
            border-top: 1px solid #ccc;
            position: relative;
            text-align: center;
            width: 32px;
            height: 32px;
        }

            .notif-part > ul > li > a:not(.notif-selected):hover {
                background-color: #b0d3db;
            }

            .notif-part > ul > li > a:hover:before {
                border: solid;
                border-color: red transparent;
                border-width: .7em .7em 0 .7em;
                bottom: 100%;
                content: "";
                display: block;
                left: 26px;
                position: absolute;
                z-index: 99;
            }

            .notif-part > ul > li > a:hover:after {
                text-align: center;
                bottom: 70px;
                color: #031540;
                font-size: 11px;
                font-weight: bold;
                content: attr(rel);
                display: block;
                position: absolute;
                white-space: nowrap;
                z-index: 98;
                border-bottom: 1px solid red;
                width: 100%;
            }

.task-percent {
    display: inline;
    position: relative;
}

    .task-percent:hover:before {
        border: solid;
        border-color: #333 transparent;
        border-width: 8px 5px 0px 5px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 15000;
        white-space: nowrap;
    }

    .task-percent:hover:after {
        background: #333;
        background: rgba(0,0,0,.7);
        /*background:rgba(50,197,210,.9);*/
        border-radius: 5px;
        bottom: 27px;
        color: #fff;
        content: attr(data-tooltip);
        /*left: 0;*/
        right: -9px;
        padding: 4px 0px;
        position: absolute;
        z-index: 15000;
        min-width: 120px;
        display: inline-block;
        white-space: nowrap;
    }

html[dir=ltr] .notif-part > ul > li:not(.n-notif) > a:hover:after {
    left: 0px;
}

html[dir=ltr] .notif-part > ul > li.n-notif > a:hover:after {
    left: 5px;
}

html[dir=rtl] .notif-part > ul > li:not(.n-notif) > a:hover:after {
    right: 0px;
}

html[dir=rtl] .notif-part > ul > li.n-notif > a:hover:after {
    right: 4px;
}

.notif-part > ul > li > a:hover i {
    color: red;
}

.notif-part > ul > li > a > i {
    color: #534141;
    font-size: 17px;
}

.notif-part > ul > li > a > div.totalNotifCount, .notif-part > ul > li > a > div.totalTaskCount {
    border-radius: 50%;
    font-size: 11.5px;
    color: red;
    font-weight: bold;
}


.notif-selected div.totalNotifCount, .notif-selected div.totalTaskCount {
    color: black !important;
}


/*======================Direction============================*/
html[dir=ltr] .notif-part {
    float: left;
}

    html[dir=ltr] .notif-part > ul > li > a {
        border-right: 1px solid #ccc;
    }


    html[dir=ltr] .notif-part > ul > li {
        float: left;
    }



html[dir=rtl] .notif-part {
    float: right;
}

    html[dir=rtl] .notif-part > ul > li > a {
        border-left: 1px solid #ccc;
    }


    html[dir=rtl] .notif-part > ul > li {
        float: right;
    }


        html[dir=rtl] .notif-part > ul > li > a > div.totalNotifCount {
            right: 7px;
        }

/*=====ul.common-style=======================================================*/


ul.common-style {
    width: 247px;
    height: 309px;
    box-shadow: 5px 5px rgba(102,102,102,.1);
    background-color: #fff;
    border: 1px solid #9f9b9b;
    position: absolute;
    bottom: 100%;
    /*border-left: 4px solid #32c5d2;*/
}


html[dir=ltr] ul.common-style {
    left: 0px;
}

html[dir=rtl] ul.common-style {
    right: 0px;
}

ul.common-style > li > a {
    display: block;
    text-decoration: none;
}

ul.common-style:not(.notif-chat) > li > a {
    border-left: 3px solid #fff;
}

ul.common-style > li:not(:last-child) > a {
    border-bottom: 1px solid #ccc;
}

/*ul.common-style > li > a:hover {
    background-color: #f6f6f6;
}*/

ul.common-style:not(.notif-chat) > li > a:hover {
    border-left: 3px solid red;
}



ul.notif-box li > a {
    height: 21px;
    padding: 8px 10px 8px 12px;   
}

.notif-part *, ::after, ::before {
    -webkit-box-sizing: initial !important;
    box-sizing: initial !important;
    -moz-box-sizing: initial !important;
}


    ul.notif-box li > a span {
        display: inline-block;
        float: left;
    }

    ul.notif-box li > a > span.notif-icon {
        margin-right: 7px;
        width: 3px;
        height: 6px;
        padding: 4px;
    }

        ul.notif-box li > a > span.notif-icon i {
            color: white;
            font-size: 14px;
            line-height: 19px;
            margin-right: 9px;
        }

    ul.notif-box li > a > span.notif-title {
        color: #3b3f42;
        font-size: 11.4px;
        width: 140px;
        text-align: left;
    }

    ul.notif-box li > a > span.float-part {
        float: right;
    }

        ul.notif-box li > a > span.float-part span {
            display: inline-block;
            vertical-align: middle;
        }

        ul.notif-box li > a > span.float-part > span.notif-counter {
            color: red;
            font-size: 13px;
            width: 20px;
            background-color: #eddbdb;
            text-align: center;
            border-radius: 50%;
            margin-right: 4px;
            width: 18px;
            height: 18px;
            padding: 0px 2px 4px 2px;
        }

        ul.notif-box li > a > span.float-part > span.notif-seen {
            padding: 8px 1px;
        }

            ul.notif-box li > a > span.float-part > span.notif-seen > i {
                font-size: 12px;
            }

                ul.notif-box li > a > span.float-part > span.notif-seen > i.setColor {
                    color: #bdb9b9;
                }

        ul.notif-box li > a > span.float-part > span.notif-counter > label {
            font-weight: 300;
            font-size: 11px;
            color: red;
        }


.notif-selected {
    background-color: #32c5d2;
}

    .notif-selected i {
        color: white !important;
    }

.notif-header {
    background-color: #ededed;
    padding: 10px 5px;
    font-size: 11px;
}

ul.notif-task > li > a {
    color: #2D2D2D;
    font-size: 11px;
}


    ul.notif-task > li > a > span.notif-task {
        display: block;
        width: 100%;
        height: 21px;
    }

    ul.notif-task > li > a > span.notif-progress {
        display: block;
        width: 100%;
        background-color: #cdcfd4;
        height: 8px;
        margin-top: 7px;
        position: relative;
    }

        ul.notif-task > li > a > span.notif-progress > .progress-bar-success {
            position: absolute;
            height: 100%;
            left: 0;
        }

            ul.notif-task > li > a > span.notif-progress > .progress-bar-success.green {
                background-color: #32c5d2;
            }

            ul.notif-task > li > a > span.notif-progress > .progress-bar-success.yellow {
                background-color: #E0B407;
            }

            ul.notif-task > li > a > span.notif-progress > .progress-bar-success.red {
                background-color: #f06742;
            }

            ul.notif-task > li > a > span.notif-progress > .progress-bar-success.blue {
                background-color: deepskyblue;
            }

            ul.notif-task > li > a > span.notif-progress > .progress-bar-success.orange {
                background-color: orangered;
            }

    ul.notif-task > li > a > span.notif-task > span.task-desc {
        float: left;
    }

    ul.notif-task > li > a > span.notif-task > span.task-percent {
        float: right;
        font-weight: bold;
        font-size: 11px;
        color: #413a3a;
    }

ul.notif-task > li > a {
    padding: 7px 10px 14px 10px;
}

.clear-both {
    clear: both;
}

.notif-notSeen {
    position: absolute;
    bottom: 26px;
    left: 5%;
    color: white;
    background-color: red;
    border-radius: 50%;
    width: 23px;
    height: 22px;
    font-size: 11px;
    text-align: center;
    /*display: none;*/
}

/*--------------------ChatPart------------------------------*/
.user-avatar, .user-name {
    display: inline-block;
    vertical-align: middle;
    float: left;
}

.user-avatar {
    background-repeat: no-repeat !important;
    background-size: cover;
}


.user-avatar {
    margin-top: 5px;
    margin-right: 8px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #ddd;
}

.notif-chat > li > a > div.user-name > .nameofuser {
    font-size: 11px;
    color: #4e4e4e;
    text-align: left;
}

.notif-chat > li > a:hover {
    background-color: skyblue;
}



.notif-chat > li > a > div.user-name > .lastseen {
    font-size: 9px;
    color: red;
    text-align: left;
}

.notif-chat > li[data-online='true'] > a > div.user-name > .lastseen {
    color: #0bc200;
}

.notif-chat a {
    height: 41px;
    padding: 7px 7px;
}

div.chat-box {
    position: fixed;
    width: 200px;
    height: 265px;
    border: solid 1px;
    background-color: #eaeaea;
    z-index: 99999999;
    top: 0px;
    left: 0px;
}

div.chat-header {
    position: relative;
    width: 100%;
    height: 25px;
    background-color: blue;
}

.user-name {
    color: white;
}

ul.scroll {
    height: 100%;
    overflow: auto;
}

html[dir=ltr] .notif-footer {
    float: right;
}

    html[dir=ltr] .notif-footer > ul > li > a {
        border-right: 1px solid #ccc;
    }


    html[dir=ltr] .notif-footer > ul > li {
        float: left;
    }



html[dir=rtl] .notif-footer {
    float: left;
}

    html[dir=rtl] .notif-footer > ul > li > a {
        border-left: 1px solid #ccc;
    }


    html[dir=rtl] .notif-footer > ul > li {
        float: left;
    }


        html[dir=rtl] .notif-footer > ul > li > a > div.totalNotifCount {
            right: 7px;
        }

#refreshNotifications {
    margin-left: 15px;
}
    #refreshNotifications > i {
        position: absolute;
        right: 9px;
        top: 13px;
    }

.HiddenForceNotifIcon #CallingForcedNotif {
    display:none !important;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.rotating > i {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}
#CallingForcedNotif > i {
    color: #ea6969;
    position: absolute;
    right: 29px;
}