#notification_container {

    position: relative;
    height: 100%;

    display: flex;
    align-items: center;

}

#notification_btn {

    margin: auto;
    display: flex;

    padding: 10px;

    border-radius: 50%;

    background-color: transparent;
    border: 0;

}

#notification_btn:hover,
#notification_btn[data-active=true] {

    background-color: var(--white-25);

}

#notification_btn svg {

    transform: scale(1.3);

}

span#notifications_badge {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;

    font-size: var(--font-size--small-2);

    position: absolute;
    top: 20%;
    right: -5%;

    border-radius: 50%;
    background: var(--brand-color);
    color: var(--white-100);

}

/* NOTIFICATIONS RESULTS */
#results_container {

    box-shadow: 4px 4px 12px 0px var(--black-100);

    width: 95vw;
    max-width: 400px;

    position: absolute;
    right: calc(0px - 68px);
    top: 60px;

    background-color: var(--background);
    border: 2px solid var(--brand-color);
    border-radius: 8px;

    padding: 16px;

}

@media(min-width: 580px) {

    #results_container {
        min-width: 290px;
        transform: translate(-75%, 0%) !important;
        left: 0;
    }

}

@media(min-width: 1780px) {

    #results_container {
        transform: translate(-50%, 0%) !important;
        left: 50%;
    }

}

#results_container>h4 {

    color: var(--white-100);
    font-size: var(--font-size--h5);
    font-weight: 600;

    margin-bottom: 24px;

}

#results_container>ul {

    max-height: 500px;
    overflow: auto;

    display: flex;
    flex-direction: column;
    gap: 8px 0;

}

#results_container>ul::-webkit-scrollbar {
    width: 4px;
}

#results_container>ul::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px var(--white-05);
    border-radius: 10px;
}

#results_container>ul::-webkit-scrollbar-thumb {
    background: var(--white-50);
    border-radius: 6px;
}

/* NOTIFICATION ITEM */
.notification_item_container {

    background: var(--black-75);
    border-radius: 8px;

    color: var(--white-100);

    display: grid;
    grid-template-columns: minmax(70px, 120px) 1fr;
    gap: 0 16px;

}

.notification_item_container .img_container {

    position: relative;
    height: inherit;

    aspect-ratio: 46 / 65;

}

.notification_item_container .notification_item_info {

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    margin: 6px 8px;

}

.notification_item_container h5 {


    font-weight: 500;

    font-size: var(--font-size--p);

}

.notification_item_container small {

    font-weight: 300;

    margin-top: 4px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.notification_item_container p {

    margin: 12px 0;

    font-size: var(--font-size--small-1);

}

.notification_item_container a {

    font-weight: 500;

    text-align: center;

    border-radius: 6px;

    background: var(--brand-color);

    width: 100%;

    padding: 8px 16px;

    font-size: var(--font-size--small-1);

}