.custom-alert {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    text-align: center;
    font-size: 16px;
    color: white;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.success-alert {
    background-color: #0d6efd; /* Bootstrap primary blue */

}

.error-alert {
    background-color: #e3342f; /* Red */
}


#kt_app_sidebar_toggle{
          transform: scale(1.1) !important;
}


/* Animated login background and improved auth card */
.auth-bg-anim{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.auth-bg-anim .bubble{
    position: absolute;
    border-radius: 50%;
    filter: blur(26px);
    opacity: 0.55;
    transform: translate3d(0,0,0);
    animation-name: floaty;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.auth-bg-anim .b1{ width: 420px; height:420px; left: -80px; top: 6%; background: radial-gradient(circle at 30% 30%, rgba(0,102,204,0.26), rgba(0,102,204,0.04)); animation-duration: 14s; }
.auth-bg-anim .b2{ width: 260px; height:260px; right: -40px; top: 18%; background: radial-gradient(circle at 30% 30%, rgba(3,169,244,0.22), rgba(3,169,244,0.03)); animation-duration: 11s; animation-delay: 1s; }
.auth-bg-anim .b3{ width: 300px; height:300px; left: 10%; bottom: -70px; background: radial-gradient(circle at 30% 30%, rgba(0,123,85,0.18), rgba(0,123,85,0.02)); animation-duration: 16s; animation-delay: 2s; }
.auth-bg-anim .b4{ width: 180px; height:180px; right: 18%; bottom: -40px; background: radial-gradient(circle at 30% 30%, rgba(255,193,7,0.18), rgba(255,193,7,0.02)); animation-duration: 12s; animation-delay: 0.5s; }
.auth-bg-anim .b5{ width: 120px; height:120px; left: 50%; top: 36%; background: radial-gradient(circle at 30% 30%, rgba(156,39,176,0.14), rgba(156,39,176,0.02)); animation-duration: 10s; animation-delay: 3s; }

@keyframes floaty{
    0%{ transform: translate3d(0,0,0) scale(1); }
    50%{ transform: translate3d(20px,-36px,0) scale(1.03); }
    100%{ transform: translate3d(0,0,0) scale(1); }
}

.auth-card{ position: relative; z-index: 2; background: rgba(255,255,255,0.78); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(2,6,23,0.12); transition: transform .25s ease, box-shadow .25s ease; }
.auth-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 50px rgba(2,6,23,0.16); }
.auth-card .text-center h1{ color: #07203a; }
.auth-card input.form-control{ transition: box-shadow .15s ease, border-color .15s ease; }
.auth-card input.form-control:focus{ box-shadow: 0 6px 18px rgba(3,10,34,0.06); border-color: rgba(0,102,204,0.4); }

/* make sure background image stays behind animation */
body { position: relative; }

/* Floating CV/pen icons */
.auth-bg-anim .float-icon{ position: absolute; width: 54px; height: 54px; opacity: 0.18; transform-origin: center; filter: drop-shadow(0 6px 20px rgba(2,6,23,0.06)); animation: floatIcon 8s ease-in-out infinite; }
.auth-bg-anim .fi1{ left: 6%; top: 22%; width: 68px; opacity: 0.14; animation-duration: 14s; }
.auth-bg-anim .fi2{ right: 8%; top: 8%; width: 56px; opacity: 0.12; animation-duration: 11s; animation-delay: .8s; }
.auth-bg-anim .fi3{ left: 22%; bottom: 10%; width: 72px; opacity: 0.16; animation-duration: 13s; animation-delay: 1.6s; }
.auth-bg-anim .fi4{ right: 16%; bottom: 20%; width: 60px; opacity: 0.12; animation-duration: 10s; animation-delay: 2.2s; }

@keyframes floatIcon{
    0%{ transform: translate3d(0,0,0) rotate(-6deg) scale(1); }
    25%{ transform: translate3d(12px,-18px,0) rotate(-2deg) scale(1.02); }
    50%{ transform: translate3d(0,-28px,0) rotate(6deg) scale(0.98); }
    75%{ transform: translate3d(-10px,-18px,0) rotate(-2deg) scale(1.01); }
    100%{ transform: translate3d(0,0,0) rotate(-6deg) scale(1); }
}

/* reduce motion on small screens */
@media (max-width: 767px){
    .auth-bg-anim .bubble, .auth-bg-anim .float-icon{ display: none; }
}