/* The notification panel */

/* Scrollbar -- Start */
.notificationPanel::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.notificationPanel::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.notificationPanel::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 0px solid slategrey;
}

/* firefox */
body {
    scrollbar-width: thin;
    scrollbar-color: #444444 #FFFFFF;
}
/* Scrollbar -- End */

.notificationPanel {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    background-color: #424242;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s; /* 0.5 second transition effect to slide in the panel */

    -webkit-box-shadow: -10px 0px 15px 0px rgba(0,0,0,0.20);
    -moz-box-shadow: -10px 0px 15px 0px rgba(0,0,0,0.20);
    box-shadow: -10px 0px 15px 0px rgba(0,0,0,0.20);
}

.notificationPanel table td {
    color: #000;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
}

.notificationPanel table td div,
.notificationPanel table td div a {
    color: #000;
    font-size: 14px;    
}

.notificationPanelHTMLRowHeader {
    cursor: pointer;
}

.notificationPanelHTMLRowHeader:hover {
    background-color: #eee;
}

#notificationPanelHTMLContent td {
    line-height: 20px;
}

#notificationPanelHTMLContent i {
    position: relative;
    top:5px;
    margin-right: 10px;
}

.notificationMessageRows:hover {
    cursor: auto;
    background-color: #ffffff;
}

.notificationPanelHTMLRowLink td {
    padding-top:10px;
}

#messageContainer {
    max-height: 100%;
    max-width: 580px;
    width: 100%;
    margin-right: -5px;
    overflow: hidden;
    word-break: break-word;
}

.notificationDivider {
    padding: 0;
    margin: 0;
    border-bottom-style: solid;
    border-width: 1px;
    border-color: #eee;
}

/* The notification popup */

#notificationPopup {
    position: absolute;
    top:-100px;
    right: 10px;
}

#notificationPopupContent {
    width: 250px;
    height: 70px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.20);
    -moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.20);
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.20);
}

#notificationPopupContent i {
    color: #c9252f;
    float: left;
    font-size: 70px;
}

#notificationPopupContentText {
    font-family: 'robotoregular';
    font-size: 16px;
    color: #444444;
    padding-top: 10px;
}

/* The notification panel menu */

#notificationsDropdownButton {
    position: relative;
    top:1px;
}

#notificationsSearchButton,
#notificationsDropdownButton,
#notificationsDropdown div {
    cursor:pointer;
}

#notificationsDropdown {
    display: none;
    position: absolute;
    top:56px;
    left: 10px;
    width: 200px;
    z-index: 100;
    padding: 10px 0 10px 0;
}

#notificationsDropdown div {
    font-size: 14px;
    color: #444444;
    line-height: 30px;
    padding: 0 10px 0 10px;
    text-align: left;
}

#notificationsDropdown div:hover,
.clickable:hover {
    background-color: #c9252f;
    color: #ffffff !important;
}

.notificationsSearchContainer,
.notificationsDropdownContainer,
#notificationsSearchInput {
    background-color: #ffffff;
    -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.20);
    -moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.20);
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.20);
}

#notificationsSearchInput {
    display: none;
    position: absolute;
    top:10px;
    right: 90px;
    height: 25px;
    width: 200px;
    margin: 2px 4px 0 0;
    padding: 5px;
    font-size: 14px;
    z-index: 100;
    box-sizing: border-box;
}

#notificationsSearchReset {
    display: none;
    position: absolute;
    top:15px;
    right: 97px;
    z-index: 110;
    cursor: hand;
}

/* Notification messages */

.acknowledgeNo {
    background-color: #fffbe5;
    width: 100%;
    margin-top: 5px;
    padding: 3px 6px 3px 6px;
}

.acknowledgeYes {
    background-color: transparent;
    width: 100%;
    margin-top: 5px;
    padding: 3px 6px 3px 6px;
}

.notificationsGreen {
    color: green;
}

.notificationsHide {
    display: none;
}

.disable-scroll {
    overflow-y: hidden !important;
}

.rowBodies {
    display:none;
}

.notification-open {
    display: block;
}