.notification-main-page {
    display: flex;
    flex-direction: column;
    padding-left: 1.5625rem;
    width: 97%;
    height: 100%;
}




    .notification-main-page .notification-top-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap:  1.25rem;
        width: auto;
        height: 10%;
    }

        .notification-main-page .notification-top-bar .left-part {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: inherit;
        }

        .notification-main-page .notification-top-bar .right-part {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: inherit;
            gap: 0.625rem;
        }

    .notification-main-page .notification-grid {
    }



.notif-tooltip * .k-tooltip {
    background-color: var(--bgcolor);
    color: inherit;
    border-color: inherit;
    background: #FFFFFF;
    box-shadow:  0 0.25rem 0.25rem rgba(64, 63, 76, 0.2);
    border-radius: 0.375rem;
    padding: 1rem;
    max-width: 31.25rem;
    max-height: 28.125rem;
}

.notif-tooltip * .k-callout {
    display: none;
}

/* Rail-anchored notifications tooltip: cap width so it fits on small screens
   regardless of which side Telerik picks. */
.rail-notif-tooltip * .k-tooltip {
    /*max-width: 22rem;*/
}

.rail-notifications-popup {
    position: fixed;
    left: calc(var(--rail-width) + 0.75rem);
    bottom: 4.75rem;
    z-index: 10001;
    width: min(31.25rem, calc(100vw - var(--rail-width) - 2rem));
    max-height: 28.125rem;
    padding: 1rem;
    color: inherit;
    background: #FFFFFF;
    box-shadow: 0 0.25rem 0.25rem rgba(64, 63, 76, 0.2);
    border-radius: 0.375rem;
}

.rail-notifications-popup .notifs-list {
    display: flex;
    flex-direction: column;
    max-height: 17.5rem;
    width: 100%;
    gap: 0.9375rem;
    overflow: auto !important;
}

.notif-tooltip .notifs-container {
}

.notif-tooltip .notifs-list {
    display: flex;
    flex-direction: column;
    max-height: 17.5rem;
    width: 100%;
    gap: 0.9375rem;
    overflow: auto !important;
}


.notifs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9375rem;
    border: none;
}

    .notifs-container .notif-link {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--primary);
        cursor: pointer;
    }

    .notifs-container .notifs-count {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--black);
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

.notif-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 2.8125rem;
    margin-bottom: 0.625rem;
}

.notif-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    width:25rem;
    height: 2.8125rem;
}

.notif-card {
    width: 99%;
    height: 5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    background-color: #EFF2FB;
}

    .notif-card .image {
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
        padding: 0.3125rem  0;
        gap: 0.625rem;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .notif-card .notif-titre {
        font-size: 1rem;
        font-weight: 600;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 18.75rem;
    }

    .notif-card .notif-date {
        font-size: 0.875rem;
    }


.notif-card-in-grid {
    width: 99%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.375rem;
    gap: 1rem;
}

    .notif-card-in-grid .image {
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
        padding: 0.3125rem  0;
        gap: 0.625rem;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .notif-card-in-grid .notif-titre {
        font-size: 1rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }