.info > .announcements {
    position : relative;
    grid-template-areas   : "date" "body" "buttons";
}
.info > .announcements:before {
    font-family : var(--FontAwesome);
    content     : var(--FA-icon-bullhorn);
}
.info-item.announcements[data-announcement-count]:after {
    font-size        : .8rem;
    font-weight      : bold;
    position         : absolute;
    top              : -4px;
    right            : -8px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    box-sizing       : border-box;
    width            : 15px;
    height           : 15px;
    content          : attr(data-announcement-count);
    color            : var(--theme-font-on-error);
    border           : 1px solid darkred;
    border-radius    : 50%;
    background-color : var(--theme-error);
}

/*****************************
    Announcements
*****************************/

#announcements-popup {
    display: inline-block;
    position: fixed;
    padding: 15px;
    background-color: var(--theme-secondary-dark);
    box-shadow: var(--standard-box-shadow);
    border-radius: var(--theme-border-radius);
    min-width: 400px;
    max-width: 900px;
    max-height: 600px;
    overflow-y: auto;
    z-index: var(--z-index-popup);
}

#announcements-header {
    height: 20px;
    font-weight: 700;
    display: inline-block;
}

.announcements-close {
    display: inline-block;
    position: relative;
    float: right;
    top: -4px;
    font-size: 20px;
    padding: 0 10px;
    cursor: pointer
}
.announcements-close:before {
    font-family: var(--FontAwesome);
    content: var(--FA-icon-times);
}
.announcements-handle:before {
    font-family: var(--FontAwesome);
    content: var(--FA-icon-arrows);
}

#announcements-handle {
    display: inline-block;
    position: relative;
    float: right;
    font-size: 15px;
    padding: 0 10px;
    cursor: move;
}

.announcements-content {
    background-color: var(--color-translucent-white-lvl-1);
    padding: 10px;
    margin-top: 10px;
    border-radius: var(--theme-border-radius);
}

.announcements-content-subject,
.announcements-content-body {
    background-color: var(--color-translucent-black-lvl-0);
    max-width: 100%;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
    padding: 10px;
    margin-right: 10px;
    border-radius: var(--theme-border-radius);
}

#announcements-popup .announcements-content > .announcements-content-confirm > a,
#announcements-popup > #announcements-footer > a {
    padding: 7px 15px;
    background-color: rgba(128, 128, 128, .8);
    text-decoration: none;
    border: 1px solid rgba(32, 32, 32, .6);
    border-radius: var(--theme-border-radius);
}

#announcements-popup > .announcements-content > .announcements-content-confirm > a:hover,
#announcements-popup > #announcements-footer > a:hover {
    background-color: rgba(160, 160, 160, .8);
}

#announcements-popup > .announcements-content > .announcements-content-confirm > a:active,
#announcements-popup > #announcements-footer > a:active {
    background-color: rgba(96, 96, 96, .8);
}

#announcements-footer {
    margin-top: 15px;
}

#announcements-tabs {
    display: flex;

}

#announcements-tabs > div {
    display: inline-block;
    white-space: nowrap;
    padding: 5px 15px;
    margin-right: 5px;
    background-color: rgba(128, 0, 0, .6);
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#announcements-tabs div:hover {
    background-color: rgba(128, 0, 0, 1);
}

#announcements-tabs div:active {
    background-color: rgba(96, 0, 0, 1);
}