/** New Announcements **/
.announcement {
    border:none;
}

.announcement:hover {
    cursor: pointer;
}

.announcement a {
    text-decoration: none;
}

/** Topbar Announcement **/

.announcement.bar {
    position:relative;
    width:100%;
    padding:0;
}

.announcement > form {
    position: absolute;
    top:0;
    left:0;
    visibility: hidden;
    z-index:9998;
    background-color:rgba(250, 250, 250, 0.800);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow:2px 2px 4px 0 hsla(120, 0%, 24%, 0.500);
    border-radius:100%;
    padding:4px .25rem;
    margin:4px;
    line-height:.5rem;
}

.announcement > form button {
    background-color:transparent;
    padding:0;
    line-height: 0;
}

.announcement:hover > form {
    visibility: visible;
}

.announcement.bar .announcement-inner {
    display:grid;
    grid-template-columns: [first] 16px [line2] 1fr [line3] 128px [line4] auto [col5-start] 128px [six] 1fr [end];
    gap: 4px;
    padding:8px;
    align-content: center;
}

.announcement.bar img {
    grid-column-start: 3;
}

.announcement.bar h4 {
    grid-column-start: 4;
    font-size:18px;
}

.announcement.bar .announcement-content {
    grid-column-start: 4;
}

.announcement.bar .announcement-cta {
    grid-column-start: 5;
    place-self: center;
    padding:8px 24px;
    background-color:#ccc;
    border-radius:4px;
}

/** Bubble Announcement **/

.announcement.bubble {
    z-index: 9997;
    position: fixed;
    right: 1rem;
    bottom: 16px;
    margin:0 0 0 auto;
    padding:0;
    background-color: transparent;
}

.announcement.bubble > form {
    margin:-8px 0 0 -8px;
}

.announcement.bubble .announcement-inner {
    display:grid;
    grid-template-columns: [first] 128px [line2] 1fr [end];
    gap: 8px;
    background-color:rgba(250, 250, 250, 0.800);
    border-radius: 8px;
    padding:8px .5rem;
    width:420px;
    margin:0;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
}

.announcement.bubble img {
    border-radius: 4px;
    grid-column-start: 1;
    align-self: start;
}

.announcement.bubble h4 {
    font-size:18px;
    grid-column-start: 2;
    align-self: start;
}

.announcement.bubble .announcement-content {
    grid-column-start: 2;
    align-self: start;
    font-size:16px;
}

.announcement .bubble .announcement-content p {
    margin:0 !important;
}

.announcement.bubble .announcement-cta {
    grid-column-start: 2;
    align-self: start;
}