.spinner {
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 12px;
    height: 12px;
    background-color: #333;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
      }
}

/* ==========================================================================
   Beautiful Notification Overrides
   ========================================================================== */

.uk-notification {
    width: 400px;
}

@media (max-width: 639px) {
    .uk-notification {
        width: auto;
        left: 12px;
        right: 12px;
        margin: 0;
    }
}

.uk-notification-message {
    position: relative;
    padding: 0;
    background: #ffffff;
    color: #374151;
    font-size: 0.925rem;
    line-height: 1.5;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-left: 4px solid #9ca3af;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13), 0 2px 10px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    cursor: default;
    -webkit-animation: notifySlideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation: notifySlideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

* + .uk-notification-message {
    margin-top: 10px;
}

.uk-notify-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
    padding: 14px 40px 14px 16px;
}

.uk-notify-icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.uk-notify-text {
    -webkit-flex: 1;
    flex: 1;
    font-size: 0.925rem;
    font-weight: 500;
    word-break: break-word;
}

/* Progress bar */
.uk-notify-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: 0.25;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-animation: notifyProgress var(--notify-dur, 3s) linear forwards;
    animation: notifyProgress var(--notify-dur, 3s) linear forwards;
}

/* Close button */
.uk-notification-close {
    display: none;
    position: absolute;
    top: 50%;
    right: 14px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0.35;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.uk-notification-message:hover .uk-notification-close {
    display: block;
    opacity: 0.65;
}

/* ---- Success ---- */
.uk-notification-message-success {
    border-left-color: #10b981;
    background: -webkit-linear-gradient(135deg, #f0fdf4 0%, #ffffff 65%);
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 65%);
}

.uk-notification-message-success .uk-notify-icon {
    color: #10b981;
}

.uk-notification-message-success .uk-notify-progress {
    color: #10b981;
}

/* ---- Warning ---- */
.uk-notification-message-warning {
    border-left-color: #f59e0b;
    background: -webkit-linear-gradient(135deg, #fffbeb 0%, #ffffff 65%);
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 65%);
}

.uk-notification-message-warning .uk-notify-icon {
    color: #f59e0b;
}

.uk-notification-message-warning .uk-notify-progress {
    color: #f59e0b;
}

/* ---- Danger ---- */
.uk-notification-message-danger {
    border-left-color: #ef4444;
    background: -webkit-linear-gradient(135deg, #fef2f2 0%, #ffffff 65%);
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 65%);
}

.uk-notification-message-danger .uk-notify-icon {
    color: #ef4444;
}

.uk-notification-message-danger .uk-notify-progress {
    color: #ef4444;
}

/* ---- Primary ---- */
.uk-notification-message-primary {
    border-left-color: #6366f1;
    background: -webkit-linear-gradient(135deg, #eef2ff 0%, #ffffff 65%);
    background: linear-gradient(135deg, #eef2ff 0%, #ffffff 65%);
}

.uk-notification-message-primary .uk-notify-icon {
    color: #6366f1;
}

.uk-notification-message-primary .uk-notify-progress {
    color: #6366f1;
}

/* ---- Animations ---- */
@-webkit-keyframes notifySlideDown {
    from {
        -webkit-transform: translateY(-20px) scale(0.95);
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes notifySlideDown {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes notifyProgress {
    from { -webkit-transform: scaleX(1); transform: scaleX(1); }
    to   { -webkit-transform: scaleX(0); transform: scaleX(0); }
}

@keyframes notifyProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}