:root {

    --ufc-s-1: 1px;
    --ufc-s-5: 5px;
    --ufc-s-15: 15px;
    --ufc-s-72: 72px;
    --ufc-s-62: 62px;

    --notify-bell-sidebar-top: var(--ufc-s-72);
    --notify-bell-sidebar-right: var(--ufc-s-0);
    --notify-bell-sidebar-bottom: var(--ufc-s-0);
    --notify-bell-notify-m: var(--ufc-s-0);
    --notify-bell-sidebar-width: 395px;
    --notify-bell-sidebar-padding: var(--ufc-s-24);
    --notify-bell-title-top: var(--ufc-s-0);
    --notify-bell-title-pb: var(--ufc-s-4);
    --notify-bell-title-border-b: var(--ufc-s-1);
    --notify-bell-border-b-color: #E0E0E0;
    --notify-bell-title-font-size: var(--ufc-font-size-lg);
    --notify-bell-title-font-weight: var(--ufc-semibold-font-weight);
    --notify-bell-heading-mb: var(--ufc-s-10);
    --notify-bell-notify-mb: var(--ufc-s-15);
    --notify-bell-card-padding-tb: var(--ufc-s-10);
    --notify-bell-card-padding-lr: var(--ufc-s-20);
    --notify-bell-card-border-radius: var(--ufc-s-8);
    --notify-bell-notify-title-mb: var(--ufc-s-5);
    --notify-bell-notify-msg-mt: var(--ufc-s-5);
    --notify-bell-notify-msg-font-size: var(--ufc-font-size-sm);
    --notify-bell-notify-title-color: var(--purple-dark);
    --notify-bell-notify-title-font-size: var(--ufc-font-size-md);
    --notify-bell-notify-card-color: var(--white);
    --notify-bell-notify-card-hover-color: var(--gray-border);
    --notify-bell-notify-msg-color: var(--dark);
    --notify-bell-notify-msg-weight: var(--ufc-medium-font-weight);
    --notify-bell-notify-grp-mt: var(--ufc-s-20);
    --notify-bell-notify-grp-h-color: #381F56;
    --notify-bell-notify-grp-pb: var(--ufc-s-5);
    --notify-bell-notify-grp-ul-padding: var(--ufc-s-0);
    --notify-bell-notify-grp-list-pl: var(--ufc-s-0);
    --notify-bell-notify-ul-gap: var(--ufc-gap-32);
    --notify-bell-notify-cards-gap: var(--ufc-gap-8);
    --notify-bell-notify-dc-gap: var(--ufc-gap-10);
}


/* Notification Bell Position */

#ufc-notification-bell {
    position: relative;
    height: auto;
    width: auto;
    cursor: pointer;
    z-index: 9999;
}


#ufc-notification-sidebar {
    position: fixed;
    right: var(--notify-bell-sidebar-right);
    top: var(--notify-bell-sidebar-top);
    bottom: var(--notify-bell-sidebar-bottom);
    width: var(--notify-bell-sidebar-width);
    max-width: 100vw;
    background: var(--content-background-color);
    padding: var(--notify-bell-sidebar-padding);
    z-index: 9998;
    overflow-y: auto;
    box-sizing: border-box;
}

.ufc-section-title {
    font-size: var(--notify-bell-title-font-size);
    font-weight: var(--notify-bell-title-font-weight);
    color: var(--primary-color);
    margin-top: var(--notify-bell-title-top);
    margin-bottom: var(--notify-bell-heading-mb);
    border-bottom: var(--notify-bell-title-border-b) solid var(--notify-bell-border-b-color);
    padding-bottom: var(--notify-bell-title-pb);
    font-family: var(--ufc-font-primary);
}

.ufc-notification-card:hover {
    background: var(--notify-bell-notify-card-hover-color);
}

.ufc-notification-card {
    background: var(--notify-bell-notify-card-color);
    padding: var(--notify-bell-card-padding-tb) var(--notify-bell-card-padding-lr);
    border-radius: var(--notify-bell-card-border-radius);
    border: 1px solid var(--notify-bell-notify-card-hover-color);
    margin-bottom: var(--notify-bell-notify-mb);
}


.ufc-notification-title {
    font-weight: var(--notify-bell-title-font-weight);
    color: var(--notify-bell-notify-title-color);
    display: block;
    margin-bottom: var(--notify-bell-notify-title-mb);
    font-family: var(--ufc-primary-font-family);
    font-size: var(--notify-bell-notify-title-font-size);

}

.ufc-notification-message {
    margin: var(--notify-bell-notify-m);
    color: var(--notify-bell-notify-msg-color);
    font-family: var(--ufc-primary-font-family);
    font-weight: var(--notify-bell-notify-msg-weight);
    font-size: var(--notify-bell-notify-msg-font-size);
    line-height: 150%;
    letter-spacing: 0.5px;
    margin-top: var(--notify-bell-notify-msg-mt);

}

/* Notification Grouping (Today, Yesterday, Earlier) */

.ufc-notification-group {
    margin-top: var(--notify-bell-notify-grp-mt);
}

.ufc-notification-group h3 {
    color: var(--notify-bell-notify-grp-h-color);
    margin-bottom: var(--notify-bell-heading-mb);
    border-bottom: var(--notify-bell-title-border-b) solid var(--notify-bell-border-b-color);
    padding-bottom: var(--notify-bell-notify-grp-pb);
}

.ufc-notification-group ul {
    list-style-type: none;
    padding: var(--notify-bell-notify-grp-ul-padding);
}

.ufc-notification-group ul li {
    margin-bottom: var(--notify-bell-notify-mb);
}

#ufc-notification-list {
    list-style: none;
    padding-left: var(--notify-bell-notify-grp-list-pl);
    /* margin: var(--notify-bell-notify-m); */
    display: flex;
    flex-direction: column;
    gap: var(--notify-bell-notify-ul-gap);
}

#ufc-notification-list .ufc-notification-date-container {
    display: flex;
    flex-direction: column;
    gap: var(--notify-bell-notify-dc-gap);
}

#ufc-notification-list .ufc-notification-date-container .ufc-notification-cards {
    display: flex;
    flex-direction: column;
    gap: var(--notify-bell-notify-cards-gap);
}

.ufc-notification-cards .ufc-notification-card,
.ufc-notification-date-container .ufc-section-title {
    margin: 0;
}

@media (max-width: 768px) {
    :root {
        --notify-bell-card-padding-tb: var(--ufc-s-20);
        --notify-bell-sidebar-top: var(--ufc-s-62);
        --notify-bell-sidebar-width: 350px;
    }
}

@media (max-width: 576px) {
    :root {
        --notify-bell-notify-title-font-size: var(--ufc-font-size-md);
        --notify-bell-notify-msg-font-size: var(--ufc-font-size-sm);
        --notify-bell-sidebar-width: 300px;
    }
}

@media (max-width: 360px) {
    #ufc-notification-sidebar {
        width: 100vw;
    }
}