/* #region Notification Small */
/* Typography */
.notifications__error-text {
    margin: 0 auto;
    font-size: 20px;
    font-weight: 700;
    padding: 0 50px;
}

/* Layout */
.notifications__overall-container {
    position: absolute;
}

.notifications__notification-container {
    max-width: 100%;
    height: 60px;
    background: var(--white-op85);
    margin: 15px 0;
    box-shadow: 0 0 20px var(--black-op3);
    display: flex;
    align-items: center;
    position: relative;
    transform: translateX(-100%);
    animation: moveleft 0.5s linear forwards;
}

@keyframes moveleft {
    100% {
        transform: translateX(10%);
    }
}

.notifications__notification-container:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: var(--main-orange);
    animation: anim 5s linear forwards;
}

.notifications__notification-success-container:after {
    background: var(--olive-green);
}

@keyframes anim {
    100% {
        width: 0;
    }
}

.notifications__close-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* #endregion Notification Small */


/* #region Notification Full Size */
/* Typography */
.notifications-fw__message {
    font-size: 1.125rem;
    font-weight: 500;
}

.notifications-fw__message--success {
    color: #22BB33;
    /* green-700 */
}

.notifications-fw__message--error {
    color: red;
    /* red-700 */
}


/* Layout */
.notifications-fw__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.notifications-fw__popup {
    background-color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    max-width: 24rem;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    text-align: center;
}

.notifications-fw__close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #6b7280;
    /* gray-500 */
    cursor: pointer;
    font-size: 1.25rem;
}

.notifications-fw__close-btn:hover {
    color: #000000;
}

/* #endregion Notification Full Size */