﻿.rs-notice-widget {
    position: relative;
    padding: 35px;
    background-color: var(--whiteColor);
    border-radius: 16px
}

    .rs-notice-widget .notice-heading {
        margin: 0 0 30px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--borderColor);
        display: inline-flex;
        align-items: center
    }

        .rs-notice-widget .notice-heading .pulse-icon {
            position: relative;
            margin-inline-end: 12px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--secondaryColor)
        }

            .rs-notice-widget .notice-heading .pulse-icon::after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background-color: inherit;
                animation: notice_pulse 2s infinite
            }

    .rs-notice-widget .notice-items {
        display: flex;
        flex-direction: column;
        --item-gap: 40px
    }

    .rs-notice-widget .notice-item:not(:last-child) {
        margin-bottom: calc(var(--item-gap)/ 2);
        padding-bottom: calc(var(--item-gap)/ 2);
        border-bottom: 1px solid var(--borderColor)
    }

    .rs-notice-widget .notice-item .notice-title {
        margin: 0 0 10px
    }

    .rs-notice-widget .notice-item .notice-bottom {
        display: flex;
        align-items: flex-end;
        justify-content: space-between
    }

    .rs-notice-widget .notice-item .notice-date-id {
        display: flex;
        flex-direction: column;
        gap: 5px
    }

    .rs-notice-widget .notice-item .notice-date, .rs-notice-widget .notice-item .notice-id {
        display: flex;
        align-items: center;
        color: var(--bodyColor)
    }

        .rs-notice-widget .notice-item .notice-date i, .rs-notice-widget .notice-item .notice-date svg {
            margin-right: 8px
        }

    .rs-notice-widget .notice-item .file-link {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--bodyColor);
        font-size: 20px
    }

@keyframes notice_pulse {
    0% {
        scale: 1;
        opacity: 1
    }

    100% {
        scale: 2.5;
        opacity: 0
    }
}
