/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : May 5, 2026, 5:21:11 PM
    Author     : nidas
*/

.block-ui-material {
    background: #fff;
    padding: 22px 28px;
    border-radius: 14px;
    text-align: center;
    min-width: 150px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.2);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: #6366f1;
    transition: width 0.2s ease;
}

.progress-text {
    font-size: 13px;
    color: #555;
}

.blockOverlay {
    backdrop-filter: blur(4px);
    background: rgba(0,0,0,0.25) !important;
}

.bg-gradient-ukim{
   background: linear-gradient(90deg, #081B8F 0%, #0F24B5 40%, #2E46FF 100%);
   color: #F5F5F5;
}

.page-item.active .page-link {
    background-color: #081B8F;
    border-color: #081B8F;
    color: #fff;
}

.preview-container img {
    transition: 0.3s;
}
.preview-container img:hover {
    transform: scale(1.1);
}

.toast-header {
    border-bottom: 1px solid #dee2e6;
}

.toast-header small.text-white-50, .toast-header strong.me-auto {
    text-transform: capitalize;
}

#pagelogin {
    position: relative;
    overflow: hidden;
    background: linear-gradient(-45deg, #0f172a, #1e293b, #2563eb, #9333ea);
    background-size: 400% 400%;
    animation: gradientMove 12s ease infinite;
}

/* animasi gradient background */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* efek cahaya floating */
#pagelogin::before,
#pagelogin::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    z-index: 0;
    animation: floatBlob 10s infinite ease-in-out;
}

#pagelogin::before {
    background: #60a5fa;
    top: 10%;
    left: 15%;
}

#pagelogin::after {
    background: #a855f7;
    bottom: 10%;
    right: 15%;
    animation-delay: 3s;
}

@keyframes floatBlob {
    0% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-30px) scale(1.1);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

/* supaya card tetap di atas animasi */
#pagelogin .container {
    position: relative;
    z-index: 2;
}