.elementor-widget-notifier {
    --notifier-accent-color: var(--e-global-color-primary, olive);

    --notifier-icon-size: 24px;
    --notifier-icon-color: slategray;

    --notifier-foreground-color: black;
    --notifier-background-color: white;

    --notifier-unread-background-color: var(--e-global-color-accent);

    --notifier-font-family: var(--e-global-typography-text-font-family);
    --notifier-font-weight: var(--e-global-typography-text-font-weight);

    --notifier-badge-font-size: 10px;
    --notifier-badge-padding: 4px;
    --notifier-badge-border-radius: 4px;
    --notifier-badge-color: white;
    --notifier-badge-background-color: #d35656;
    --notifier-badge-font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    --notifier-tab-titles-color: inherit;
}

.elementor-widget-notifier .notifier {
    all: unset;
    position: relative;
    display: flex;
}
.elementor-widget-notifier .notifier-icon,
.elementor-widget-notifier button.notifier svg {
    height: var(--notifier-icon-size);
    width: var(--notifier-icon-size);
    font-size: var(--notifier-icon-size);
    /* padding: 2px 4px 0 0; */
    fill: var(--notifier-icon-color);
    color: var(--notifier-icon-color);
}
.elementor-widget-notifier .notifier-icon:hover,
.elementor-widget-notifier button.notifier svg:hover {
    fill: var(--notifier-icon-color-hover);
    color: var(--notifier-icon-color-hover);
}
.elementor-widget-notifier .notifier-badge {
    all: unset;
    font-size: var(--notifier-badge-font-size);
    background-color: var(--notifier-badge-background-color);
    font-family: var(--notifier-badge-font-family);
    color: var(--notifier-badge-color);
    border-radius: var(--notifier-badge-border-radius);
    padding: var(--notifier-badge-padding);
    position: absolute;
    top: 0;
    right: 0;
}
.elementor-widget-notifier .notifier-popup {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid lightgray;
    border-radius: 4px;
    fill: var(--e-global-color-primary);
    /* padding: 16px 8px; */
    padding-inline: 0;
    padding-block: 0 16px;
    width: 400px;
    /* max-height: 430px; */
    z-index: 999;
    /* overflow-y: auto; */
    box-shadow:
        0px 3px 3px -2px #00000033,
        0px 3px 4px 0px #00000024,
        0px 1px 8px 0px #0000001f;
    font-family: var(--notifier-font-family);
    font-weight: var(--notifier-font-weight);
}
.elementor-widget-notifier .notifier-popup > * {
    padding-inline: 8px;
    padding-block: 0;
}
.elementor-widget-notifier .notifier-scrollable {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 300px;
}
.elementor-widget-notifier .notifier-scrollable > .notifier-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.elementor-widget-notifier .notifier-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.elementor-widget-notifier .notifier-popup,
.elementor-widget-notifier .notifier-empty,
.elementor-widget-notifier .notifier-controls,
.elementor-widget-notifier .notifier-loading,
.elementor-widget-notifier .notifier-items .notifier-item,
.elementor-widget-notifier .notifier-popup .notifier-tabs {
    background-color: var(--notifier-background-color);
}
/*
.elementor-widget-notifier .notifier-items .notifier-item:nth-child(2n) {
    background-color: #f8f8f8;
}
.elementor-widget-notifier .notifier-items .notifier-item:hover {
    background-color: #f0f0f0;
}
*/
.elementor-widget-notifier .notifier-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    flex-grow: 1;
    cursor: default;
    padding: 4px;
    color: var(--notifier-foreground-color);
}
.elementor-widget-notifier .notifier-item:link {
    cursor: pointer;
}
.elementor-widget-notifier .notifier-empty {
    line-height: 3;
}
.elementor-widget-notifier .notifier-empty,
.elementor-widget-notifier .notifier-controls,
.elementor-widget-notifier .notifier-loading {
    text-align: center;
}
.elementor-widget-notifier .notifier-item:not(.unread):hover {
    background-color: color-mix(in srgb, var(--notifier-background-color) 80%, var(--notifier-unread-background-color));
}
.elementor-widget-notifier .notifier-item.unread {
    background-color: var(--notifier-unread-background-color);
}
.elementor-widget-notifier .notifier-item.unread:hover {
    background-color: color-mix(in srgb, var(--notifier-unread-background-color) 80%, var(--notifier-background-color));
}
.elementor-widget-notifier .notifier-item.marking-as-read {
    background-color: #dae69e;
}
.elementor-widget-notifier .notifier-item.marking-as-read:hover {
    background-color: #748038;
    color: white;
}
.elementor-widget-notifier .notifier-item-status > .notifier-item-toggle-status,
.elementor-widget-notifier .notifier-item-status > .notifier-item-toggle-status:hover,
.elementor-widget-notifier .notifier-item-status > .notifier-item-toggle-status:focus,
.elementor-widget-notifier .notifier-item-status > .notifier-item-toggle-status:active {
    background: none;
    border: none;
    padding: 2px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    aspect-ratio: 1/1;
}
.elementor-widget-notifier .notifier-item-status > .notifier-item-toggle-status:hover,
.elementor-widget-notifier .notifier-item-status > .notifier-item-toggle-status:focus,
.elementor-widget-notifier .notifier-item-status > .notifier-item-toggle-status:active {
    border: 1px solid lightgray;
}
.elementor-widget-notifier .notifier-popup .notifier-tabs {
    display: flex;
    position: sticky;
    top: 0;
}
.elementor-widget-notifier .notifier-tabs > ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    gap: 0em;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 0;
    margin: 0;
}
.elementor-widget-notifier .notifier-tabs > ul > li {
    flex-grow: 1;
}
.elementor-widget-notifier .notifier-tabs > ul > li,
.elementor-widget-notifier .notifier-tabs > ul > li a {
    display: block;
    height: 100%;
}
.elementor-widget-notifier .notifier-tabs > ul > li a {
    color: var(--notifier-tab-titles-color);
    text-align: center;
    transition-property: border-bottom-color;
    transition-duration: 1s;
    border-bottom-color: lightgray;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-inline: 1em;
    padding-block: 0.5em;
}
.elementor-widget-notifier .notifier-tabs > ul > li.is-active a {
    border-bottom-color: var(--notifier-accent-color);
}
.elementor-widget-notifier .notifier-tabs > ul > li:hover a {
    border-bottom-color: black;
}
.elementor-widget-notifier .notifier-item-icon {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--notifier-accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.elementor-widget-notifier .notifier-item-icon-image {
    height: 64%;
    width: 64%;
    fill: white;
    color: white;
}
.elementor-widget-notifier .notifier-tab[data-notifier-type="messages"] .notifier-item-icon-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.elementor-widget-notifier .notifier-tab[data-notifier-type="messages"] .notifier-item-icon-image.missing {
    height: auto;
    width: auto;
    font-size: 26px;
    margin: 3px auto 0;
}
.elementor-widget-notifier .notifier-conversations,
.elementor-widget-notifier .notifier-markallread {
    background-color: var(--notifier-accent-color);
    padding: 0.5em 1.5em;
    border-radius: 0.5em;
    color: white;
    text-transform: uppercase;
    font-size: 90%;
}
.elementor-widget-notifier .notifier-loading-first-time-image,
.elementor-widget-notifier .notifier-loading-more-image {
    margin: 0 auto;
    height: 35px;
    width: 35px;
}
.elementor-widget-notifier .notifier-divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    width: 90%;
    margin: auto;
}