@charset "UTF-8";
/* Moved from inline <style> in _EmployeeCornerPartial.cshtml -> W3C-valid + CSP-clean. */
    .employee-card {
        display: none;
        animation: slideFade 0.6s ease;
    }

    .active-slide {
        display: block;
    }

    .modern-card {
        background: linear-gradient(135deg, #ffffff 0%, #f2f7ff 100%);
        border-radius: 20px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        overflow: hidden;
        border: 1px solid #e5ecff;
    }

    .left-panel {
        background: linear-gradient(135deg, #eef3ff, #ffffff);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px 20px;
        border-right: 1px solid #e1e6ff;
        text-align: center;
    }

    .emp-wrapper {
        width: 100%;
        position: relative;
    }

    .emp-banner {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        z-index: 2;
    }

    .emp-user-img {
        width: 53.5%; /* Relative to wrapper width */
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        object-fit: cover;
        position: absolute;
        left: 50%;
        top: 48%; /* Perfectly centered in the red circle area */
        transform: translate(-50%, -50%);
        z-index: 1; /* Behind the ribbon and labels */
    }

    .right-panel {
        padding: 35px;
        background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    }

    .slider-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 46px;
        height: 46px;
        border: none;
        border-radius: 50%;
        background: white;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        cursor: pointer;
        z-index: 10;
    }

    @keyframes slideFade {
        from

    {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

    }