:root {
    --base-notifications-indicator-border-color: var(--bs-border-color);
}

.notifications-indicator {
    /*background-color: #fff;*/
    display: flex;
    align-items: center;
    justify-content: center;
    /*border-radius: 16px;*/
    width: auto;
    height: 34px;
    /*color: rgb(51, 51, 51);*/
    /*font-weight: 500;*/
    font-size: 1rem;
    position: relative;
    /*border: 1px solid rgba(0, 0, 0, 0.15);*/
}

    .notifications-indicator .notifications-indicator-button {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        max-width: 150px;
        /*        padding-right: 4px;
        padding-left: 4px;*/
    }

        .notifications-indicator .notifications-indicator-button .notifications-indicator-icon {
            /*            font-size: 1.3rem;
            cursor: pointer;*/
        }

        .notifications-indicator .notifications-indicator-button .notifications-progressbar {
            position: absolute;
            overflow: hidden;
            height: 2px;
            top: 30px;
            left: 1px;
            bottom: 1px;
            right: 1px;
            transition: opacity 1.5s ease-in-out 1s;
        }

            .notifications-indicator .notifications-indicator-button .notifications-progressbar > div {
                position: absolute;
                width: 60%;
                height: 100%;
                animation: notifications-progressbar-indeterminate-progress 1.5s linear infinite;
            }

    .notifications-indicator .badge {
/*        left: 20px;
        top: 9px;
        font-size: .65rem;*/
        top: -2px;
        right: -3px;
        font-size: .40rem;
        border-color: var(--bs-body-bg) !important;
    }

    .notifications-indicator .offcanvas {
        transition: none;
    }

    .notifications-indicator .offcanvas-end {
        width: 515px;
    }

    .notifications-indicator .offcanvas-header {
        display: block;
        border-bottom: 1px solid var(--base-notifications-indicator-border-color);
    }

    .notifications-indicator .offcanvas-body {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

        .notifications-indicator .offcanvas-body .list-group {
            border-radius: 0;
        }

            .notifications-indicator .offcanvas-body .list-group .list-group-item {
                border-top: none;
                border-left: none;
                border-right: none;
            }


.notification-title-icon {
    font-size: larger;
}

.notification-btn-close {
    font-size: 0.75em;
}

.notification-description {
    font-size: smaller !important;
}

.notification-result-location {
    font-size: smaller !important;
}

.notification-elapsed-time {
}

@keyframes notifications-progressbar-indeterminate-progress {
    0% {
        left: -100%;
    }

    100% {
        left: 150%;
    }
}