/* THIS FILE IS COPIED FROM THE COMMON LIBRARY AS OF 2025-09-30 11:14:35 GMT. DO NOT EDIT THIS FILE. EDIT THE ORIGINAL IN THE COMMON LIBRARY INSTEAD. */
.notifications-page {
    padding: 8px;
    height: 100%;
    box-sizing: border-box;
}
.notifications-page agile-accordion ~ agile-accordion {
    margin-top: 8px;
}
.notifications-page .agile-accordion-title {
    font-weight: normal;
}

.notification-wrapper {
    display: flex;
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;
    border: solid 2px transparent;
    transition: 0.3s;
    text-align: center;
    padding: 2px 8px 2px 0px;
    border-radius: 8px;
    line-height: 1;
    gap: 8px;
}
.notification-wrapper > :last-child {
    margin-left: auto;
}
.notification-wrapper ~ .notification-wrapper {
    margin-top: 8px;
}
.notification-wrapper:hover {
    border-color: var(--primary-color);
}

.notification-created {
    text-align: right;
    font-size: 80%;
    white-space: nowrap;
    align-self: start;
    text-transform: uppercase;
}
.notification-subject {
    text-align: left;
    align-self: start;   
}
.notification-page .notification-subject {
  border-bottom: solid 2px gray;  
}
.notification-page :is(.notification-user, .notification-created) {
    text-align: right;
}
.notification-user {
    font-size: 80%;
    white-space: nowrap;
    text-align: left;
    align-self: start;
    text-transform: uppercase;
}
.notification-page .notification-controls {
    margin-top: 16px;
    text-align: center;
    border-top: solid 2px gray;
    padding: 8px;
}
:is(.notification-controls, .notification-toolbar) :is(button, .button) {
    cursor: hand;
    transition: 0.3s;
    user-select: none;    
}
.notification-controls button {
    background: var(--primary-color-dark);
    color: white;
    border: solid 2px var(--primary-color-dark);
    border-radius: 8px;
    padding: 8px;
    font-weight: bold;
    width: 150px;
}
:is(.notification-controls, .notification-toolbar) :is(button, .button):hover {
    color: var(--primary-color-dark);
    background: white;
}
:is(.notification-controls, .notification-toolbar) > :is(button, .button):disabled {
    color: white;
    background: gray;
    cursor: not-allowed;
}

.notification-page {
    padding: 8px;
    position: relative;
}
.notification-page .notification-message {
    margin-top: 32px;
}
.notification-page .notification-toolbar {
    text-align: right;
    white-space: nowrap;
    user-select: none;
    margin-bottom: 16px;
}
.notification-page .notification-toolbar > * {
    vertical-align: middle;
}
.notification-page .notification-toolbar > * ~ * {
    margin-left: 8px;
}
.notification-page .notification-toolbar .notification-status {
    text-transform: uppercase;
    display: inline-block;
}
.notification-page .notification-status > * {
    color: white;
    background: var(--primary-color);
    border-radius: 8px;
    padding: 2px 8px 2px 8px;
    line-height: 1;
    display: inline-block;
    font-size: 75%;
}
.notification-page .notification-status-new {
    
}
.notification-page .notification-status-archived {
    background: gray;
}

.notification-message-grouped-component {
    border-top: solid 2px gray;
}
.notification-message-grouped-component ~ .notification-message-grouped-component {
    margin-top: 16px;
}