﻿@media screen and (max-width: 1460px) {
    .notification_li {
        position: relative
    }

    .notificationContainer {
        background-color: #fff;
        border: 1px solid rgba(100, 100, 100, .4);
        -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        overflow: visible;
        position: center;
        top: 60px;
        width: 600px;
        display: none;
    }

    /*.notificationContainer:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    color: transparent;
    border: 10px solid black;
    border-color: transparent transparent white;
    margin-top: 500px;
    margin-left: 300px;
}*/

    .notificationTitle {
        font-weight: bold;
        padding: 8px;
        font-size: 13px;
        background-color: #f8f8f8;
        border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        -webkit-border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        position: relative;
        z-index: 1000;
        width: 598px;
        border-bottom: 1px solid #dddddd;
    }

    .notificationsBody {
        padding: 33px 0px 0px 0px !important;
        min-height: 20vh;
        max-height: 70vh;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
        text-align: center;
    }

        .notificationsBody::-webkit-scrollbar { /* WebKit */
            width: 0;
            height: 0;
        }

    .notificationFooter {
        background-color: #f8f8f8;
        text-align: center;
        font-weight: bold;
        padding: 8px;
        font-size: 12px;
        border-top: 1px solid #dddddd;
        border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-bottom-right-radius: 4px;
    }

        .notificationFooter a {
            text-decoration: none;
            color: #d22630;
        }

            .notificationFooter a:link {
                color: #d22630;
            }

            .notificationFooter a:hover {
                text-decoration: underline;
                color: #A81E26;
            }

    .notification_count {
        padding: 3px 7px 3px 7px;
        background: #cc0000;
        color: #ffffff;
        font-weight: bold;
        margin-left: 30px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        position: absolute;
        margin-top: 5px;
        font-size: 11px;
        font-weight: 600;
    }

}

    .notification_li {
        position: relative
    }

.notificationContainer {
    background-color: #fff;
    border: 1px solid rgba(100, 100, 100, .4);
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    overflow: visible;
    position: absolute;
    top: 60px;
    margin-left: -430px;
    width: 600px;
    z-index: -1;
    display: none;
}

    /*.notificationContainer:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    color: transparent;
    border: 10px solid black;
    border-color: transparent transparent white;
    margin-top: 500px;
    margin-left: 300px;
}*/

    .notificationTitle {
        font-weight: bold;
        padding: 8px;
        font-size: 13px;
        background-color: #f8f8f8;
        border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        -webkit-border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        position: fixed;
        z-index: 1000;
        width: 598px;
        border-bottom: 1px solid #dddddd;
    }

    .notificationsBody {
        padding: 33px 0px 0px 0px !important;
        min-height: 200px;
        max-height: 70vh;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
        text-align: center;
    }

        .notificationsBody::-webkit-scrollbar { /* WebKit */
            width: 0;
            height: 0;
        }

    .notificationFooter {
        background-color: #f8f8f8;
        text-align: center;
        font-weight: bold;
        padding: 8px;
        font-size: 12px;
        border-top: 1px solid #dddddd;
        border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-bottom-right-radius: 4px;
    }

        .notificationFooter a {
            text-decoration: none;
            color: #d22630;
        }

            .notificationFooter a:link {
                color: #d22630;
            }

            .notificationFooter a:hover {
                text-decoration: underline;
                color: #A81E26;
            }

    .notification_count {
        padding: 3px 7px 3px 7px;
        background: #cc0000;
        color: #ffffff;
        font-weight: bold;
        margin-left: 30px;
        border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        position: absolute;
        margin-top: 5px;
        font-size: 11px;
        font-weight: 600;
    }

    .notification-datagrid td {
        padding: 5px;
    }

    .notification-datagrid img {
        width: 16px;
        height: 16px;
    }

    .notification-datagrid th {
        padding: 6px;
    }

    .notification-datagrid {
        border: none;
    }

    .notification-rows {
        background-color: #fff;
        font-family: Arial;
        font-size: 12px;
        color: #000;
        min-height: 20px;
        text-align: left;
        border: none 0px transparent;
        border-bottom: 1px lightgrey;
        text-decoration: none;
    }

        .notification-rows:hover {
            background-color: #CFEBFD;
            font-family: Arial;
            color: #000;
            text-align: left;
        }

    .notification-altrows {
        background-color: lightgrey;
        font-family: Arial;
        font-size: 12px;
        color: #000;
        min-height: 20px;
        text-align: left;
        border: none 0px transparent;
        border-bottom: 1px whitesmoke;
    }

        .notification-altrows:hover {
            background-color: #CFEBFD;
            font-family: Arial;
            color: #000;
            text-align: left;
        }

.notification-rows a {
    text-decoration: underline;
    color: whitesmoke;
}

    .notification-rows a:link {
        color: whitesmoke;
    }

    .notification-rows a:hover {
        text-decoration: underline;
        color: darkred;
    }
