@font-face {
    font-family: Inter-Regular;
    src: url("fonts/Inter-Regular.ttf");
  }
  @font-face {
    font-family: Inter-Bold;
    src: url("fonts/Inter-Bold.ttf");
  }
  @font-face {
    font-family: Inter-Medium;
    src: url("fonts/Inter-Medium.ttf");
  }

#notifY_container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifY-notification-container {
    position: absolute;
    width: 16vw;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    z-index: 10000;
}

.notifY-notification-container.notification-container-bottom {
    bottom: 20px;
    left: calc((100vw - 13.5vw) / 2);
}

.notifY-notification-container.notification-container-bottomleft {
    left: 1.05%;
    bottom: 24.4vh;
}

.notifY-notification-container.notification-container-bottomright {
    right: 20px;
    bottom: 20px;
}

.notifY-notification-container.notification-container-bottomright .notifY-notification {
    right: 0;
}

.notifY-notification-container.notification-container-top {
    top: 20px;
    left: calc((100vw - 13.5vw) / 2);
}

.notifY-notification-container.notification-container-topleft {
    left: 20px;
    top: 20px;
}

.notifY-notification-container.notification-container-topright {
    right: 20px;
    top: 20px;
}

.notifY-notification-container.notification-container-topright .notifY-notification {
    right: 0;
}

.notifY-notification {
    position: absolute;
    width: 16vw;
    padding: 15px;
    opacity: 95%;
    font-size: 11px;
    background: rgb(0, 0, 0, 0.7);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.9);
    font-family: Inter-Medium, serif;
}

.notifY-notification.pinned::after {
    position: absolute;
    content: "";
    right: 4px;
    top: 4px;
    width: 12px;
    height: 12px;
    font-size: 12px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}


.notifY-notification.success {
    color: #fff;
    background: rgba(43, 107, 255, 0.7);
}

.notifY-notification.success .notification-title {
    color: #fff
}

.notifY-notification.info {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(43, 107, 255, 0.7);
}

.notifY-notification.info .notification-title {
    color: #fff
}

.notifY-notification.warning {
    color: #fff;
    background: rgba(255, 204, 0, 0.7);
}

.notifY-notification.warning .notification-title {
    color: #fff
}

.notifY-notification.error {
    color: #fff;
    background: rgba(239, 7, 93, 0.7);
}

.notifY-notification.error .notification-title {
    margin-top: 3%;
    color: #fff
}


.notifY-notification.default .notification-title {
    color: #fff
}

/* .notifY-notification.with-progress {
    padding-bottom: 12px;
} */

.notifY-notification .notification-header {
    height: 20px;
    font-size: 12px;
    text-transform: uppercase;
}

.notifY-notification .notification-icon {
    width: 38px;
    height: 38px;
    margin-top: -0.5%;
    float: left;
    margin-right: 10px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifY-notification .notification-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notifY-notification .notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.2);
}

.notifY-notification .notification-progress .notification-bar {
    height: 100%;
    width: 100%;
    transform: scale(0, 1);
    transform-origin: 0 0 0;
    background-color: var(--global-main-color);
    box-shadow: 0px 0px 7px var(--global-main-color-dark-80);
}

.notifY-notification.stacked::after {
    content: attr(data-count);
    position: absolute;
    top: -7.5px;
    right: -7.5px;
    min-width: 15px;
    height: 15px;
    padding: 1px;
    background-color: var(--global-main-color);
    /* text-shadow: 0px 0px 2px black; */
    color: #fff;
    border-radius: 2px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0px 3px var(--global-main-color-dark-60);
    pointer-events: none;
    z-index: 2;
    transition: all 0.5s ease;
}

.notifY-notification.light-badge.stacked::after {
    color: #111;
}
.notifY-notification.dark-badge.stacked::after {
    color: #fff;
}

.notifY-notification .w,
.notifY-notification .s {
    color: #fff;
}

.notifY-notification .u {
    color: #000000;
}

.notifY-notification .r {
    color: #FF5454;
}

.notifY-notification .g {
    color: #5fa05d;
}

.notifY-notification .b {
    color: #5eb6e6;
}

.notifY-notification .y {
    color: #c0a24b
}

.notifY-notification .o {
    color: #fb8936;
}

.notifY-notification .p {
    color: #b19bd9;
}

.notifY-notification .za {
    color: #ff00dd;
}

.notifY-notification .h {
    font-weight: bold;
}


.notifY-notification.active.progress .notification-bar {
    animation-name: progress;
    animation-timing-function: linear;
    border-radius: 15px;
}

.notifY-notification.hiding .notification-bar {
    width: 0%;
}

@keyframes progress {
    from {
        transform: scale(0, 1);
    }

    to {
        transform: scale(1, 1);
    }
}

/* Styles pour les notifications d'acceptation */
.accept-buttons {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.accept-option, .refuse-option {
    flex: 1;
    padding: 6px;
    font-family: Inter-Medium, serif;
    font-size: 11px;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.accept-option {
    background-color: rgba(76, 175, 80, 0.1);
    color: rgba(255, 255, 255, 1.0);
    border: 1px solid rgba(0, 255, 0, 0.4);
}

.accept-option:before {
    content: "E";
    background-color: rgba(0, 255, 0, 0.2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-family: Inter-Bold;
}

.refuse-option {
    background-color: rgba(244, 67, 54, 0.1);
    color: rgba(255, 255, 255, 1.0);
    border: 1px solid rgba(255, 0, 0, 0.4);
}

.refuse-option:before {
    content: "Y";
    background-color: rgba(255, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-family: Inter-Bold;
}