.alerty {
    position: fixed;
    z-index: 12500;
    left: 50%;
    top: 50%;
    width: 400px;
    margin-left: -200px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(20px) saturate(80%);
    -webkit-backdrop-filter: blur(20px) saturate(80%);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.90) inset, 0 32px 64px rgba(60, 100, 140, 0.22), 0 8px 20px rgba(60, 100, 140, 0.12), 0 2px 6px rgba(60, 100, 140, 0.08);
    font-family: Poppins, 'Open Sans Condensed',sans-serif !important;
    font-size: 13pt;
    color: #111111;
}

    .alerty::before {
        content: '';
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 1px;
        background: rgba(255, 255, 255, 0.95);
        pointer-events: none;
        z-index: 1;
    }

    .alerty.alerty-show {
        animation: ag-in 0.38s cubic-bezier(0.34, 1.45, 0.64, 1) both;
        -webkit-animation: ag-in 0.38s cubic-bezier(0.34, 1.45, 0.64, 1) both;
    }

    .alerty.alerty-hide {
        animation: ag-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
        -webkit-animation: ag-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
    }

    .alerty .alerty-title {
        padding: 22px 22px 0;
        font-size: 15pt;
        font-weight: 600;
        color: #111111;
        line-height: 1.25;
        letter-spacing: -0.018em;
    }

        .alerty .alerty-title + .alerty-content {
            padding-top: 6px;
        }

    .alerty .alerty-content {
        padding: 10px 22px 20px;
    }

        .alerty .alerty-content .alerty-message {
            margin: 0;
            padding-top: 1px;
            font-size: 13pt;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.52);
            line-height: 1.6;
            letter-spacing: -0.01em;
        }

        .alerty .alerty-content .alerty-prompt {
            margin-top: 12px;
            position: relative;
        }

            .alerty .alerty-content .alerty-prompt input {
                width: 100%;
                height: 38px;
                padding: 0 12px;
                display: block;
                background: rgba(255, 255, 255, 0.60);
                border: 1px solid rgba(0, 0, 0, 0.10);
                border-radius: 10px;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.90) inset;
                outline: none;
                font-size: 14pt;
                color: #111111;
                transition: border-color 0.18s ease, box-shadow 0.18s ease;
            }

                .alerty .alerty-content .alerty-prompt input::placeholder {
                    color: rgba(0, 0, 0, 0.30);
                }

                .alerty .alerty-content .alerty-prompt input:focus {
                    border-color: #3c8dbc;
                    box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.15), 0 1px 0 rgba(255, 255, 255, 0.90) inset;
                }

            .alerty .alerty-content .alerty-prompt .input-line {
                display: none;
            }

    .alerty .alerty-action {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        padding: 13px 15px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        text-align: unset;
    }

        .alerty .alerty-action [class*="btn-"] {
            height: 38px;
            font-size: 12pt;
            min-width: 88px;
            padding: 0 20px;
            border-radius: 50px;
            border: 1px solid rgba(0, 0, 0, 0.12);
            background: rgba(255, 255, 255, 0.55);
            cursor: pointer;
            font-weight: 500;
            letter-spacing: -0.012em;
            color: rgba(0, 0, 0, 0.65);
            margin-left: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.80) inset;
            transition: background 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }

            .alerty .alerty-action [class*="btn-"]:hover {
                background: rgba(255, 255, 255, 0.75);
            }

            .alerty .alerty-action [class*="btn-"]:active {
                background: rgba(255, 255, 255, 0.90);
            }

        .alerty .alerty-action .btn-ok {
            background: #3c8dbc;
            border-color: rgba(255, 255, 255, 0.30);
            color: #ffffff !important;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 3px 10px rgba(60, 141, 188, 0.40);
        }

            .alerty .alerty-action .btn-ok:hover {
                background: #4a9dcc;
                color: white;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 4px 14px rgba(60, 141, 188, 0.50);
            }

            .alerty .alerty-action .btn-ok:active {
                background: #2d7aaa;
            }

        .alerty .alerty-action .btn-cancel {
            color: rgba(0, 0, 0, 0.55);
            background-color: rgba(255, 255, 255, 0.3);
        }

    .alerty.toasts {
        height: 35px;
        min-width: 260px;
        max-width: 520px;
        margin-left: 0;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: 24px;
        border-radius: 2.5rem;
        background: rgba(240, 240, 240, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.80);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 48px rgb(135 135 135 / 0.45), 0 6px 16px rgb(130 130 131 / 0.30);
    }

        .alerty.toasts::before {
            left: 15%;
            right: 15%;
        }

        .alerty.toasts .alerty-content {
            height: 35px;
            text-align: center;
            align-items: center;
            padding: 6px 18px 0px 18px;
            gap: 10px;
        }

            .alerty.toasts .alerty-content .alerty-message {
                font-size: 10pt;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.6);
                white-space: nowrap;
                letter-spacing: -0.01em;
            }

        .alerty.toasts.alerty-show {
            animation: ag-toast-up 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
            -webkit-animation: ag-toast-up 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
        }

        .alerty.toasts.alerty-hide {
            animation: ag-toast-down 0.22s cubic-bezier(0.4, 0, 1, 1) both;
            -webkit-animation: ag-toast-down 0.22s cubic-bezier(0.4, 0, 1, 1) both;
        }

        .alerty.toasts.place-top {
            top: 24px;
            bottom: auto;
        }

            .alerty.toasts.place-top.alerty-show {
                animation: ag-toast-top-in 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
                -webkit-animation: ag-toast-top-in 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
            }

            .alerty.toasts.place-top.alerty-hide {
                animation: ag-toast-top-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
                -webkit-animation: ag-toast-top-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
            }

.alerty-overlay {
    position: fixed;
    inset: 0;
    z-index: 10600;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 0.32s cubic-bezier(0.23, 1, 0.32, 1), backdrop-filter 0.32s cubic-bezier(0.23, 1, 0.32, 1);
}

    .alerty-overlay.active {
        background: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(6px) saturate(140%);
        -webkit-backdrop-filter: blur(6px) saturate(140%);
    }

.no-scrolling {
    height: 100%;
    overflow: hidden;
}

@media (max-width: 540px) {
    .alerty {
        width: auto;
        margin-left: 0;
        left: 16px;
        right: 16px;
        border-radius: 20px;
    }

        .alerty.toasts {
            right: 12px;
            bottom: 16px;
            transform: none;
            max-width: none;
            border-radius: 13px;
        }

            .alerty.toasts .alerty-content .alerty-message {
                white-space: normal;
            }
}

@keyframes ag-in {
    0% {
        opacity: 0;
        transform: scale(0.84) translateY(8px);
    }

    60% {
        opacity: 1;
        transform: scale(1.03) translateY(-2px);
    }

    80% {
        transform: scale(0.98) translateY(1px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

@-webkit-keyframes ag-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.84) translateY(8px);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.03) translateY(-2px);
    }

    80% {
        -webkit-transform: scale(0.98) translateY(1px);
    }

    100% {
        -webkit-transform: scale(1) translateY(0);
    }
}

@keyframes ag-out {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.90) translateY(4px);
    }
}

@-webkit-keyframes ag-out {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.90) translateY(4px);
    }
}

@keyframes ag-toast-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@-webkit-keyframes ag-toast-up {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(18px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
    }
}

@keyframes ag-toast-down {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(18px);
    }
}

@-webkit-keyframes ag-toast-down {
    from {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(18px);
    }
}

@keyframes ag-toast-top-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@-webkit-keyframes ag-toast-top-in {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-18px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
    }
}

@keyframes ag-toast-top-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-18px);
    }
}

@-webkit-keyframes ag-toast-top-out {
    from {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-18px);
    }
}