/* Bell preview: independent of the navigation's inherited icon type scale. */
.NotificationList,
.NotificationList.Show {
    box-sizing: border-box;
    width: 26rem;
    max-width: calc(100vw - 1rem);
    border: 1px solid #dce2e8;
    border-radius: .75rem;
    background: #fff;
    color: #243447;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    box-shadow: 0 .5rem 2rem rgba(25, 42, 62, .16);
}

.NotificationList > .Notification {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

.NotificationList .NotificationPopupTitle {
    flex: 0 0 auto;
    padding: .875rem 1rem;
    border-bottom: 1px solid #e8edf2;
    font-size: 1rem;
    font-weight: 600;
}

.NotificationList .Notification > .RowContainer {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: 26rem;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.NotificationList .NotificationRow {
    min-height: 4.5rem;
    padding: .875rem 1rem .875rem 3.75rem;
    border-bottom: 1px solid #e8edf2;
    margin-bottom: 0;
    background: #fff;
    color: #344256;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.NotificationList .NotificationRow:last-child {
    border-bottom: 0;
}

.NotificationList .NotificationRow.Read_0 {
    background: #f0f6fc;
    box-shadow: inset 3px 0 #3275b5;
}

.NotificationList .NotificationRow .Avatar {
    top: 1rem;
    left: 1rem;
}

.NotificationList .NotificationRow .Name {
    color: #243447;
    font-weight: 600;
}

.NotificationList .NotificationRow .What {
    font-weight: 400;
}

.NotificationList .NotificationContext {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .375rem;
    color: #627184;
}

.NotificationList .NotificationRow .Date {
    font-size: .875rem;
}

.NotificationList .NotificationRow i,
.NotificationList .NotificationRow .BroadcastDetails > i {
    font-size: 1rem;
    line-height: 1;
}

.NotificationList .NotificationRow .BroadcastDetails {
    position: static;
    padding: 0;
}

.NotificationList .NotificationRow:hover,
.NotificationList .NotificationRow:focus-visible {
    background: #f3f7fb;
    color: #243447;
}

.NotificationList .All {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    border-top: 1px solid #e8edf2;
    border-radius: 0 0 .75rem .75rem;
    background: #fff;
    color: #245b91;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

.NotificationList .All:hover,
.NotificationList .All:focus-visible {
    background: #f3f7fb;
    text-decoration: underline;
}

.NotificationList .NotificationRow:focus-visible,
.NotificationList .RowContainer:focus-visible,
.NotificationList .All:focus-visible {
    outline: 2px solid #3275b5;
    outline-offset: -3px;
}

.NotificationList .NotificationPopupEmpty {
    padding: 2rem 1rem;
    color: #627184;
    font-size: 1rem;
    text-align: center;
}