﻿.navbar .dropdown-menu.notify-drop {
    min-width: 350px;
    max-width: 350px;
    background-color: #fff;
    /*min-height: 396px;*/
    max-height: 837px;
    padding: 0;
    border-radius: 15px;
    /*box-shadow: 0 1px 6px 0;*/
}

    .navbar .dropdown-menu.notify-drop .notify-drop-title {
        padding: 15px;
        font-weight: 500;
        background-color: #fff;
    }

    .navbar .dropdown-menu.notify-drop .drop-content {
        /*min-height: 306px;*/
        max-height: 310px;
        overflow-y: auto;
    }

        .navbar .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-track {
            background-color: #F5F5F5;
        }

        .navbar .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar {
            width: 8px;
            background-color: #F5F5F5;
        }

        .navbar .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-thumb {
            background-color: #ccc;
        }

        .navbar .dropdown-menu.notify-drop .drop-content > li {
            border-bottom: 1px solid #e2e2e2;
            padding: 10px 0px 5px 0px;
        }

            .navbar .dropdown-menu.notify-drop .drop-content > li:nth-child(2n+0) {
                background-color: #fafafa;
            }

            .navbar .dropdown-menu.notify-drop .drop-content > li:after {
                content: "";
                clear: both;
                display: block;
            }

            .navbar .dropdown-menu.notify-drop .drop-content > li:hover {
                background-color: #fcfcfc;
            }

            .navbar .dropdown-menu.notify-drop .drop-content > li:last-child {
                border-bottom: none;
            }

            .navbar .dropdown-menu.notify-drop .drop-content > li .notify-img {
                float: left;
                display: inline-block;
                width: 45px;
                height: 45px;
                margin: 0px 0px 8px 0px;
            }

    .navbar .dropdown-menu.notify-drop .allRead {
        margin-right: 7px;
    }

    .navbar .dropdown-menu.notify-drop .rIcon {
        float: right;
        color: #999;
    }

        .navbar .dropdown-menu.notify-drop .rIcon:hover {
            color: #333;
        }

    .navbar .dropdown-menu.notify-drop .drop-content > li a {
        font-size: 12px;
        font-weight: normal;
    }

    .navbar .dropdown-menu.notify-drop .drop-content > li {
        font-weight: bold;
        font-size: 11px;
    }

        .navbar .dropdown-menu.notify-drop .drop-content > li hr {
            margin: 5px 0;
            width: 70%;
            border-color: #e2e2e2;
        }

    .navbar .dropdown-menu.notify-drop .drop-content .pd-l0 {
        padding-left: 0;
    }

    .navbar .dropdown-menu.notify-drop .drop-content > li p {
        font-size: 11px;
        color: #666;
        font-weight: normal;
        margin: 3px 0;
    }

.drop-content .time {
    color: #aaa;
    margin: 10px 0 0 15px;
}

.drop-content .notifi-content {
    padding:10px 0;
    margin: 0 15px;
    display: block;
    background-color: #ffffff;
    color: #404040;
    border-bottom: 1px solid #e2e2e2;
}

    .drop-content .notifi-content:first-child {
        margin-top: 0;
    }

    .drop-content .notifi-content:last-child {
        /*border-bottom: none;*/
    }

    .drop-content .notifi-content.hidden {
        display: none;
    }

.drop-content .notifi-subject {
    font-size: 88%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

    .drop-content .notifi-subject div.dot {
        background-color: var(--web_color3);
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

        .drop-content .notifi-subject div.dot.read {
            background-color: inherit;
        }

    .drop-content .notifi-subject .noticeTitle {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width:calc(100% - 8px - 40px);
        line-height:1.5em;
    }

    .drop-content .notifi-subject a i {
        font-size: 25px;
        color: #a1a1a1;
        position: absolute;
        right: 5px;
        top: -7px;
        cursor: pointer;
    }

        .drop-content .notifi-subject a i:hover {
            color: #c3c3c3;
        }

.drop-content .notifi-message {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 0 5px 0 15px;
    line-height:1.5em;
}

.navbar .dropdown-menu.notify-drop a:hover {
    text-decoration: none !important;
}

.navbar .dropdown-menu.notify-drop .notify-drop-footer {
    height: 46px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 2px solid var(--web_color2);
    border-radius: 8px;
    color: var(--web_color2);
    padding-left: 27px;
    padding-right: 27px;
    font-size: 88%;
    line-height: 22px;
    -ms-flex-align: center !important;
    align-items: center !important;
}

    .navbar .dropdown-menu.notify-drop .notify-drop-footer:hover {
        border: 2px solid #1788AD;
        color: #1788AD;
    }

.time-group-heading {
    padding: 10px 0px 0px 25px;
    font-size: 12px;
    color: #9e9d9d;
    font-weight: 600;
    text-transform: uppercase;
}

.mark-all-as-read {
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

div.notify-drop-title > div.d-flex > .p-2 {
    padding: 0px !important;
}
