@import url('job_portal_variables.css');

/*--wjportal-cp-guest-banner--*/

/* --- 1. Main Banner Container Styling --- */
        .wjportal-cp-guest-banner-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 25px 25px;
            width: 100%;
            background-color:var(--wpjp-primary-color);
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            gap: 20px;
        }

        /* --- 2. Left Icon Area --- */
        .wjportal-cp-guest-banner-left {
            /* Ensures the icon area doesn't shrink and aligns center */
            display: flex;
            align-items: center;
        }

        .wjportal-cp-guest-banner-left-icon-wrap {
            /* Container for the icon visual styling */
            width: 50px;
            height: 50px;
            position: relative;
            background-color:#fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Lock Icon (Inserted via SVG Data URI) */
        .wjportal-cp-guest-banner-left-icon-wrap::before {
            content: "";
            display: block;
            width: 28px;
            height: 28px;
            /* SVG for a simple lock icon (white stroke) */
            background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="11" width="18" height="11" rx="2" ry="2"%3E%3C/rect%3E%3Cpath d="M7 11V7a5 5 0 0 1 10 0v4"%3E%3C/path%3E%3C/svg%3E');
            background-repeat: no-repeat;
            background-size: contain;
            /* Ensures the icon is vertically and horizontally centered in the 50x50 area */
        }

        /* --- 3. Middle Content (Text) --- */
        .wjportal-cp-guest-banner-middle {
            flex-grow: 1; /* Allows text to take up available space */
            color: #fff;
            line-height: 1.3;
        }

        .wjportal-cp-guest-banner-middle-top {
            font-size: var(--wpjp-sub-heading);
            font-weight: 600;
            padding-bottom: 5px;
        }

        .wjportal-cp-guest-banner-middle-bottom {
            font-size:var(--wpjp-body-font-size);
            opacity: 0.85;
        }

        /* --- 4. Right Button Area --- */
        .wjportal-cp-guest-banner-right {
            display: flex;
            gap: 10px; /* Space between the two buttons */
            align-items: center;
            flex-shrink: 0;
        }

        .wjportal-cp-guest-banner-right a {
            /* General button styling */
            font-size: var(--wpjp-body-font-size);
            text-decoration: none;
            padding: 10px 18px;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s ease-in-out;
            text-align: center;
            min-width: 80px;
            display: inline-block;
        }

        /* Login Button (White Background, Blue Border) */
        .wjportal-cp-guest-banner-login-link {
            background-color: #fff;
            color: #1f5795;
            border: 1px solid #fff; /* Match background for seamless look */
        }
        .wjportal-cp-guest-banner-login-link:hover {
            background-color:var(--wpjp-secondary-color);
            color: #fff;
            border-color: var(--wpjp-secondary-color);
        }

        /* Register Button (Solid Blue Background, Blue Border) */
        .wjportal-cp-guest-banner-register-link {
            background-color:var(--wpjp-secondary-color);
            color: #fff;
            border: 1px solid #fff;
        }
        .wjportal-cp-guest-banner-register-link:hover {
            background-color:#fff;
            border-color:var(--wpjp-secondary-color);
            color: var(--wpjp-secondary-color);
        }

        /* --- Responsive Adjustments (Optional but recommended) --- */
       

/* ==============================================
 * RESPONSIVE MEDIA QUERIES
 * ==============================================
 */

/* 1. Large Desktop / Laptops (Max Width 1280px) */
@media (max-width: 1280px) {
    .wjportal-cp-guest-banner-wrap {
        padding: 20px 20px; /* Slight reduction in padding */
        gap: 15px; /* Slight reduction in internal spacing */
    }
}

/* 2. Mid-size Laptops / Large Tablets (Max Width 1080px) */
@media (max-width: 1080px) {
    .wjportal-cp-guest-banner-wrap {
        padding: 18px 18px;
        gap: 12px;
    }
}

/* 3. Tablets (Max Width 767px) - Horizontal Layout is still maintained, but compressed */
@media (max-width: 767px) {
    .wjportal-cp-guest-banner-wrap {
        padding: 15px 15px;
    }
    
    .wjportal-cp-guest-banner-right a {
        padding: 8px 14px; /* Slightly smaller buttons */
    }
}

/* 4. Small Tablets / Large Phones (Max Width 650px) - STACKED LAYOUT STARTS HERE */
@media (max-width: 650px) {
    .wjportal-cp-guest-banner-wrap {
        flex-direction: column;
        padding: 20px;
        text-align: center;
        gap: 15px;
    }
    
    .wjportal-cp-guest-banner-left {
        order: 1; /* Icon on top */
        margin-bottom: 5px;
    }

    .wjportal-cp-guest-banner-middle {
        order: 2; /* Text in middle */
        text-align: center;
        flex-grow: 0;
    }

    .wjportal-cp-guest-banner-right {
        order: 3; /* Buttons on bottom */
        width: 100%;
        justify-content: space-around;
        margin-top: 10px;
    }
    
    .wjportal-cp-guest-banner-right a {
        flex: 1; /* Make buttons equally wide for mobile */
        max-width: 48%; /* Ensure a small gap between buttons */
    }
}

/* 5. Mobile Phones (Max Width 480px) - Refinements for smaller screens */
@media (max-width: 480px) {
    .wjportal-cp-guest-banner-wrap {
        padding: 15px;
    }
    
    /* Shrink the icon wrapper slightly */
    .wjportal-cp-guest-banner-left-icon-wrap {
        width: 40px;
        height: 40px;
    }
    .wjportal-cp-guest-banner-left-icon-wrap::before {
        width: 24px;
        height: 24px;
    }

    /* Smaller button padding for ultra-small screens */
    .wjportal-cp-guest-banner-right a {
        padding: 10px 10px;
        font-size: smaller; /* Rely on variable for size, or use a specific px value if variable is too large */
        min-width: unset;
    }
}
/* * --- ATTRACTIVE CSS DESIGN START ---
 * Color Palette: Deep Purple (Primary) and Gold Accent (Highlight) 
 * Typography: Modern System Font Stack
 */

/* --- Global & Base Styles --- */
#wjportal-job-cp-wrp {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

a {
    text-decoration: none;
    color: var(--wpjp-primary-color); /* Primary link color */
    transition: color 0.3s, opacity 0.3s;
}

a:hover {
    color: var(--wpjp-secondary-color);
}

/* --- Top Section: User Profile & Quick Actions --- */
.wjportal-cp-top {
    width: 100%;
    border: 1px solid var(--wpjp-border-color);
    padding:20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-top: 5px solid var(--wpjp-primary-color);
    background: linear-gradient(to bottom, var(--wpjp-primary-color), var(--wpjp-secondary-color));
}

.wjportal-cp-user {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.wjportal-user-logo {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--wpjp-border-color); /* Gold ring accent */
    box-shadow: 0 0 0 2px var(--wpjp-border-color);
    flex-shrink: 0;
    background-color: white;
    padding: 5px;
}

.wjportal-user-logo-image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.wjportal-user-name {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.wjportal-user-tagline {
    font-size: var(--wpjp-body-font-size);
    color: #fff; 
    margin-top: 2px;
    font-weight: 500;
}

.wjportal-cp-user-action {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Action Buttons with SVG Icons via Data URI --- */
a.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-add-resume,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-search-job,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
}
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile{
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);
}
a.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-add-resume:hover,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-search-job:hover,
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile:hover{
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);

}
.wjportal-cp-user-act-btn.wjportal-cp-user-act-profile-edit-profile:hover{
    background-color: #ffffff;
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
}

/* 1. Make the links align icon and text nicely */
.wjportal-cp-user-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em; /* Creates space between the icon and the text */
}

/* 2. Common styles for all icons */
.wjportal-cp-user-act-btn::before {
    content: "";
    display: inline-block;
    width: 1em;  /* Adjust icon size as needed */
    height: 1em;

    /* --- This is your icon color! --- */
    /* Change this one color to update all icons. */
    background-color: currentColor; /* Example: A standard blue */

    /* Standard mask properties for all icons */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* 3. Specific icon for "Add Resume" (File-plus icon) */
.wjportal-cp-user-act-profile-add-resume::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

/* 4. Specific icon for "Search Job" (Magnifying glass icon) */
.wjportal-cp-user-act-profile-search-job::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

/* 5. Specific icon for "Edit Profile" (Pencil icon) */
.wjportal-cp-user-act-profile-edit-profile::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z'/%3E%3C/svg%3E");
}

/* --- Stats Boxes Section (Key Metrics) --- */
/* --- Main Container --- */
.wjportal-cp-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 10px; /* Space between boxes */
    width: 100%;
    margin-top: 30px;
    text-align: center;
    border-top: 1px dotted #ffffff80;
    padding-top: 25px;
}
   

/* --- Individual Box Styling --- */
.wjportal-cp-box {
    overflow: hidden; /* Ensures content respects the border radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--wpjp-border-color);
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
}

.wjportal-cp-box:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* --- Top Section of the Box --- */
.wjportal-cp-box-top {
    padding: 10px 25px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 0;
}

/* Hide the original IMG tag */
.wjportal-cp-box-top img {
    display: none;
}



/* --- Number and Title --- */
.wjportal-cp-box-num {
    font-size: 35px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    order: 2;
    width: 100%;
}

.wjportal-cp-box-tit {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin-top: 60px;
    font-weight: 600;
    order: 1;
    text-align: center;
    width: 100%;
}

/* --- Bottom Link Section --- */

.wjportal-cp-box-btm a {
    display: flex;
    padding: 10px 20px;
    text-decoration: none;
    color: #555555;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease, background-color 0.3s ease;
    justify-content: center;
    align-items: center;
}
.wjportal-cp-box-btm.clearfix{
    background-color: var(--wpjp-background-color);
    border-top: 1px solid var(--wpjp-border-color);
}
/* Color link text on hover */
.wjportal-cp-box-btm a:hover .wjportal-cp-box-text {
    color:var(--wpjp-primary-color);
}

/* Remove Font Awesome icon */
.wjportal-cp-box-btm i.fa {
    display: none;
}

/* Add CSS Arrow */
.wjportal-cp-box-btm a::after {
    content: '→';
    font-size: 18px;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.wjportal-cp-box-btm a:hover::after {
    transform: translateX(4px); /* Animate arrow on hover */
    color: var(--wpjp-primary-color);
}

/* Styling for specific box accent colors */
#wjportal-job-cp-wrp .wjportal-cp-box.box1 { border-top: 4px solid #3498db; }
#wjportal-job-cp-wrp .wjportal-cp-box.box2 { border-top: 4px solid #30cd72; }
#wjportal-job-cp-wrp .wjportal-cp-box.box3 { border-top: 4px solid #f5a623; }
#wjportal-job-cp-wrp .wjportal-cp-box.box4 { border-top: 4px solid #bd10e0; }

/* Hide the original IMG tag */
.wjportal-cp-box-top img {
    display: none;
}

/* Common style for the new SVG icon */
.wjportal-cp-box-top::before {
    content: ''; /* The icon will be set below */
    position: absolute;
    width: 48px;
    height: 48px;
    top: 10%;
    right: 43%;
}

/* Specific SVG icons for each box */
/* Icon 1: My Resumes (Document) */
.wjportal-cp-box.box1 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%234A90E2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"%3E%3C/path%3E%3Cpolyline points="14 2 14 8 20 8"%3E%3C/polyline%3E%3Cline x1="16" y1="13" x2="8" y2="13"%3E%3C/line%3E%3Cline x1="16" y1="17" x2="8" y2="17"%3E%3C/line%3E%3Cpolyline points="10 9 9 9 8 9"%3E%3C/polyline%3E%3C/svg%3E');

}

/* Icon 2: Applied Jobs (Clipboard Check) */
.wjportal-cp-box.box2 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%2350E3C2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"%3E%3C/path%3E%3Crect x="8" y="2" width="8" height="4" rx="1" ry="1"%3E%3C/rect%3E%3Cpolyline points="9 14 12 17 15 11"%3E%3C/polyline%3E%3C/svg%3E');
}

/* Icon 3: Newest Job (Bell) */
.wjportal-cp-box.box3 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23F5A623" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"%3E%3C/path%3E%3Cpath d="M13.73 21a2 2 0 0 1-3.46 0"%3E%3C/path%3E%3C/svg%3E');
}

/* Icon 4: Shortlisted Jobs (Star) */
.wjportal-cp-box.box4 .wjportal-cp-box-top::before {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23BD10E0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"%3E%3C/polygon%3E%3C/svg%3E');
}

/* --- Mid Banner Section --- */
.wjportal-cp-mid-full-banner {
    display: inline-flex; /* Aligns icon and text */
    align-items: center; /* Vertically centers icon and text */
    gap: 0.6em; /* Space between icon and text */
    width: 100%;
    background-color: #e0f2fe;
    color: #0284c7;
    padding: 15px 25px;
    border-radius: 8px;
    font-weight: bold;
    justify-content: center;
    border: 1px solid #bde6fa;
}

.wjportal-cp-mid-full-banner::before {
    content: "";
    display: inline-block;
    flex-shrink: 0; /* Prevents icon from shrinking */

    /* Set icon size (1em matches the text size) */
    width: 1.1em;
    height: 1.1em;

    /* This is the icon's color. 'currentColor' makes it match the text. */
    background-color: currentColor;

    /* --- The SVG "Eye" Icon --- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-4 0V4H2v10h2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-4 0V4H2v10h2z'/%3E%3C/svg%3E");
    /* Ensure the icon scales correctly */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
/* --- Layout: Left Sidebar and Right Content --- */
.wjportal-cp-left {
    flex: 0 0 280px; 
    border-radius: 10px;
    height: max-content;
    position: sticky;
    top: 4.5rem;
    padding: 0;
    overflow: hidden;
    min-height: 800px;
}

.wjportal-cp-right {
    flex: 1; 
    min-width: 550px;
}

/* --- Sidebar Short Links --- */
/* --- Left Column: Short Links --- */
#wjportal-job-cp-wrp .wjportal-cp-sec-title,
.wjportal-my-invoices-sec-tit-txt {
    font-size:var(--wpjp-sub-heading);
    color: var(--text-secondary);
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wpjp-border-color);
    text-align: left;
}
#wjportal-job-cp-wrp #wpjobportal-center .wjportal-cp-sec-title{
    margin-bottom: 20px;
}
h3.wjportal-section-title{
    font-size:var(--wpjp-body-font-size);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    padding: 15px 0 15px 0;
    padding-left: 0;
    margin: 0;
    border-bottom: 1px solid var(--wpjp-border-color);
    text-align: left;
}
#wjportal-job-cp-wrp .wjportal-jobs-list.wpjobportal-list-item-is-featured{
    border: 1px solid #ffb63b;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
}

#wjportal-job-cp-wrp .wjportal-cp-short-links-wrp {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 10px 24px;
    text-align: center;
    margin-bottom: 20px;
}
.wjportal-cp-short-links-wrp .wjportal-cp-sec-title{
    display: none;
}
#wjportal-job-cp-wrp .wjportal-cp-short-links-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#wjportal-job-cp-wrp .wjportal-list-anchor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;

}

#wjportal-job-cp-wrp .wjportal-list-anchor:hover {
    background-color: var(--wpjp-background-color);
    color: var(--wpjp-primary-color);
    filter: none;
    border-radius: 8px;
}

#wjportal-job-cp-wrp .wjportal-list-anchor img {
    width: 24px;
    height: 24px;
    filter: grayscale(1) opacity(0.6);
}
#wjportal-job-cp-wrp .wjportal-list-anchor:hover img{
    filter: unset;
}

#wjportal-job-cp-wrp .app-status {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.9em;
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--bg-body);
    flex-shrink: 0;
}
/* --- Main Job Card Container --- */
/* --- 1. Root Variables (for easy theme changes) --- */
/* --- 1. Root Variables (Scoped to the parent ID) --- */


/* --- 2. Main Card Container --- */
#wjportal-job-cp-wrp .wjportal-resume-status-dashboard-data {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    margin-bottom: 10px;
    /* Use flex to stack and space the 3 sections */
    display: flex;
    gap: 1.25rem; /* This creates space between the 3 sections */
    transition: all 0.3s ease-in-out;
}
#wjportal-job-cp-wrp .wjportal-resume-status-dashboard-data:hover{
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

#wjportal-job-cp-wrp .wjportal-resume-status-dashboard-data .wjportal-resume-logo{
    width: 100px;
    height: 100px;
}
#wjportal-job-cp-wrp.wjportal-resume-status-dashboard-left-data {
    width: 20%;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.wjportal-resume-status-dashboard-right-data {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 0;
    flex-grow: 1;
    overflow: hidden;
}

#wjportal-job-cp-wrp .wjportal-resume-data a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}


#wjportal-job-cp-wrp .wjportal-resume-name {
    display: block;
    font-size:var(--wpjp-body-font-size);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    line-height: 1.3;
    padding: 10px 0;
}

#wjportal-job-cp-wrp .wjportal-resume-title {
    display: block;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    line-height: 1.3;
}

/* --- 4. Progress Bar Section --- */
#wjportal-job-cp-wrp .wjportal-progress-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

#wjportal-job-cp-wrp .wjportal-progress-bar-title {
    color: var(--wpjp-secondary-color);
    font-weight: 500;
    font-size: 15px;
}

#wjportal-job-cp-wrp .wjportal-progress-bar-percentage {
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    font-size: 15px;
}
#wjportal-job-cp-wrp .wjportal-progress-bar-container{
    padding-top: 10px;
    margin-bottom: 5px;
}
#wjportal-job-cp-wrp .wjportal-progress-complete-resume-wrap {
    margin-bottom: 10px;
    width: 100%;
}
#wjportal-job-cp-wrp .wjportal-progress-bar-wrapper {
    width: 100%;
    height: 20px;
    background-color: #e9ecef; /* The 'track' color */
    border-radius: 4px;
    overflow: hidden; /* Important for the fill's border-radius */
}

#wjportal-job-cp-wrp .wjportal-progress-bar-fill {
    height: 100%;
    background-color: var(--wpjp-primary-color); /* The 'fill' color */
    border-radius: 4px;
    transition: width 0.4s ease-in-out;

}

/* --- 5. Button Section --- */
#wjportal-job-cp-wrp .wjportal-progress-complete-resume-wrap a {
    display: flex;  
    text-align: center;
    background-color: #fff;
    color: var(--wpjp-primary-color);
    border:1px solid var(--wpjp-primary-color);
    padding: 5px;
    border-radius: 6px;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    transition: background-color 0.2s;
    box-sizing: border-box; /* Ensures padding doesn't break layout */
}

#wjportal-job-cp-wrp .wjportal-progress-complete-resume-wrap a:hover {
    background-color: var(--wpjp-secondary-color); /* Darker shade of primary color */
    color: #fff;
}
.wjportal-progress-complete-resume-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centers the icon + text */
    gap: 0.5em; /* This creates space between the icon and text */
}
.wjportal-progress-complete-resume-wrap a::before {
    content: "";
    display: inline-block;
    
    /* Set size (1em matches the text size) */
    width: 0.9em;
    height: 0.9em;

    /* This makes the icon white (matching the text color) */
    background-color: currentColor;

    /* --- The SVG "Pencil/Edit" Icon --- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V12h2.293l6.5-6.5-.707-.707zM5 13l-1.5-1.5L2 13.5l1.5 1.5L5 13z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V12h2.293l6.5-6.5-.707-.707zM5 13l-1.5-1.5L2 13.5l1.5 1.5L5 13z'/%3E%3C/svg%3E");

    /* Standard mask properties */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}


#wjportal-job-cp-wrp .wjportal-cp-graph-wrp.wjportal-cp-sect-wrp #wpjobportal-center {
    border:none;
    box-shadow: none;
    padding: 0;

}
#wjportal-job-cp-wrp div#wpjobportal-center {
    width: 100%;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
}
#wjportal-job-cp-wrp div#wpjobportal-center #wjportal-job-cp-wrp div#wpjobportal-center{
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#wjportal-job-cp-wrp .wjportal-jobs-list {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--wjportal-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden; /* Clips the featured bar */
}
#wjportal-job-cp-wrp .wjportal-jobs-list{
    border:1px solid var(--wpjp-border-color);
}   

/* --- Featured Item (Yellow Bar) --- */
#wjportal-job-cp-wrp .wpjobportal-list-item-is-featured::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: var(--wjportal-featured-color);
}

/* --- Top Section: Logo + Main Content --- */
#wjportal-job-cp-wrp .wjportal-jobs-list-top-wrp {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    /* Extra left padding to account for the yellow bar */
    padding: 1.25rem 1.25rem 1.25rem 1.75rem;
}
#wjportal-job-cp-wrp .wjportal-jobs-data{
    gap:0;
}
/* --- Logo Box --- */
#wjportal-job-cp-wrp .wjportal-jobs-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#wjportal-job-cp-wrp .wjportal-jobs-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Use 'contain' to prevent distortion */
}

/* --- Main Content Wrapper (Hiding extra parts) --- */
#wjportal-job-cp-wrp .wjportal-jobs-cnt-wrp {
    flex: 1; /* Takes up remaining space */
    min-width: 0; /* Prevents text overflow */
}

/* HIDE elements not in the image */
#wjportal-job-cp-wrp .wjportal-jobs-right-wrp,
#wjportal-job-cp-wrp .wjportal-jobs-bottom-full-wrp,
#wjportal-job-cp-wrp .wjportal-featured-tag-wrp {
    display: none;
}

/* --- Middle Column: Title, Company, Location --- */
#wjportal-job-cp-wrp .wjportal-jobs-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 10px;
}

#wjportal-job-cp-wrp .wjportal-job-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

#wjportal-job-cp-wrp .wjportal-job-title a {
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);
    text-decoration: none;
    font-weight: 700;

}
#wjportal-job-cp-wrp .wjportal-job-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-primary-color);
}

/* --- Company & Location Line Styling --- */
#wjportal-job-cp-wrp .wjportal-companyname {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    text-decoration: none;
}
#wjportal-job-cp-wrp .wjportal-companyname:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}


#wjportal-job-cp-wrp
    .wjportal-jobs-middle-wrp
    > .wjportal-jobs-data:nth-of-type(3) {
    /* This targets the div holding category/location */
    line-height: 1.5;
}

/* Hide the "Computer/IT" span */
#wjportal-job-cp-wrp .wjportal-jobs-data-text:first-of-type {
    display: none;
}
#wjportal-job-cp-wrp .wjportal-jobs-data-text::before{
    display: none;
}

/* Style the Location span and add the pipe "|" */
#wjportal-job-cp-wrp .wjportal-jobs-data-text:last-of-type {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}
#wjportal-job-cp-wrp .wjportal-jobs-list-resume-data:not(:last-of-type){
    margin-bottom: 0;
}
#wjportal-job-cp-wrp .wjportal-jobs-list-resume-wrp{
    padding: 0;
}
#wjportal-job-cp-wrp .wjportal-jobs-data-text:last-of-type::before {
    content: "|";
    margin: 0 0.5em;
    color: var(--wjportal-text-light);
}


/* View All Button */
#wjportal-job-cp-wrp .wjportal-cp-view-btn-wrp,
.wjportal-my-invoices-sec-action-wrp {
    text-align: center;
    margin-top: 30px;
    display: block;
}
#wjportal-job-cp-wrp div#job-applied-resume-wrapper {
    width: 100%;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
}
#wjportal-job-cp-wrp .wjportal-cp-view-btn {
    background-color: var(--wpjp-secondary-color); /* Use dark text color for contrast */
    color: white;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: background-color 0.3s;
    width: 100%;
}

#wjportal-job-cp-wrp .wjportal-cp-view-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: white;
}

/* --- Invoices Table Section --- */
#wjportal-job-cp-wrp .wjportal-my-invoices-wrapper {
    width: 100%;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
}
.wjportal-table-wrp {
    min-width: 600px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-table-wrp thead tr {
    background-color: #f0e6ff; /* Custom light header background based on primary color */
}

.wjportal-table-wrp th {
    color: var(--wpjp-primary-color);
}

.wjportal-table-w50 {
    width: 45%; 
}

.wjportal-my-invoices-list-payment-method-type {
    background-color: var(--wpjp-primary-color);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
}

.wjportal-paypal {
    /* Using a darker primary color derivative for Paypal to keep the theme */
    background-color: #4b1c97; 
}

.wjportal-list-act-btn-view-all {
    background-color: var(--wpjp-primary-color);
    padding: 8px 20px;
    border-radius: 4px;
}

.wjportal-list-act-btn-view-all:hover {
    background-color: var(--wpjp-highlight-color);
    color: var(--wpjp-secondary-color);
}
.wjportal-my-invoices-sec-act-btn.wjportal-list-act-btn-view-all{
    background-color: var(--wpjp-secondary-color);
    color: white;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: background-color 0.3s;
}
.wjportal-my-invoices-sec-act-btn.wjportal-list-act-btn-view-all:hover{
    background-color: var(--wpjp-primary-color);
    color: white;
}
/* --- Icon for the Guest Banner --- */
.wjportal-cp-guest-banner-left-icon-wrap {
    /* Define the container's width/height to properly contain the icon */
    width: 50px;
    height: 50px;
    padding: 5px;
    /* You might want to add background, border-radius, etc., here for a stylistic container */
}

.wjportal-cp-guest-banner-left-icon-wrap::before {
    content: "";
    display: block; /* Important for the background to show */
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    
    /* SVG: Simple User Icon (Placeholder/Guest) */
    /* The SVG uses a light blue stroke: #4A90E2 */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="11" width="18" height="11" rx="2" ry="2"%3E%3C/rect%3E%3Cpath d="M7 11V7a5 5 0 0 1 10 0v4"%3E%3C/path%3E%3C/svg%3E');
}
/* ------------------------------------------- */
/* --- Responsive Design Media Queries --- */
/* ------------------------------------------- */

/* 1. Large Laptops / Desktops (Max Width 1280px) */
@media (max-width: 1280px) {
    /* Font scaling for slightly smaller screens */
    :root {
        --wpjp-main-heading: 2.0em;
        --wpjp-second-sub-heading: 1.5em;
        --wpjp-sub-heading: 1.15em;
        --wpjp-body-font-size: 0.95em;
    }
}

/* 2. Tablets / Small Laptops (Max Width 1080px) - Main Layout Break */
@media (max-width: 1080px) {
    /* Font scaling */
    :root {
        --wpjp-main-heading: 1.8em;
        --wpjp-second-sub-heading: 1.4em;
        --wpjp-sub-heading: 1.1em;
        --wpjp-body-font-size: 0.95em;
    }

    /* Stack the main dashboard container (Left/Right columns) */
    #wjportal-job-cp-wrp {
        flex-direction: column;
        gap: 20px;
    }

    /* Sidebar (Left) and Content (Right) take full width */
    .wjportal-cp-left,
    .wjportal-cp-right {
        flex: 1 1 100%;
        min-width: 100%;
        min-height: auto;
        position: static; /* Remove sticky positioning on smaller screens */
        top: auto;

    }

    .wjportal-cp-left {
        /* Make sidebar area less dominant when it's at the top */
        min-height: auto;
        margin-bottom: 20px;
    }
    
    .wjportal-cp-right {
        /* Remove inner padding that might look bad when stacking */
        padding: 0;
        width: 100%;
    }
    
    .wjportal-cp-boxes {
        /* Change from 4 columns to 3 columns on medium screens */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 3. Smaller Tablets / Large Phones (Max Width 767px) */
@media (max-width: 767px) {
    /* Font scaling */
    :root {
        --wpjp-main-heading: 1.6em;
        --wpjp-second-sub-heading: 1.3em;
        --wpjp-sub-heading: 1.0em;
        --wpjp-body-font-size: 0.9em;
    }
    
    /* Stats Boxes change to 2 columns */
    .wjportal-cp-boxes {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 20px;
    }

    /* Top User Profile Adjustments: Stack user info and actions */
    .wjportal-cp-top {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    
    .wjportal-cp-user {
        /* Remove 100% width from inner user wrapper that was constraining it */
        width: auto;
        margin-bottom: 20px;
    }

    .wjportal-cp-user-action {
        margin-left: 0;
        justify-content: flex-start;
        width: 100%;
    }
    
    /* Resume/Job Card adjustments */
    #wjportal-job-cp-wrp .wjportal-resume-status-dashboard-data {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    #wjportal-job-cp-wrp .wjportal-resume-data {
        /* Ensure resume details take full width */
        width: 100%;
    }
    
    #wjportal-job-cp-wrp .wjportal-progress-bar-container{ width:100%; }
    /* Invoice Table Responsiveness (stacking rows) */
    .wjportal-table-wrp {
        min-width: unset; /* Allow table to shrink */
        border: none;
    }

    .wjportal-table-wrp thead {
        display: none;
    }

    .wjportal-table-wrp tbody,
    .wjportal-table-wrp tr {
        display: block;
    }

    .wjportal-table-wrp tbody tr {
        margin-bottom: 15px;
        border: 1px solid var(--wpjp-border-color);
        border-radius: 4px;
    }

    .wjportal-table-wrp td {
        display: block;
        text-align: right;
        border-bottom: 1px dotted var(--wpjp-border-color);
        position: relative;
        padding: 10px 15px;
    }

    .wjportal-table-wrp td::before {
        /* Add column header label */
        content: attr(data-th); 
        font-weight: bold;
        float: left;
        color: var(--wpjp-primary-color);
    }
    
    .wjportal-table-w50 {
        width: 100%; 
    }
}

/* 4. Large Mobile Phones (Max Width 650px) */
@media (max-width: 650px) {
    /* Font scaling */
    :root {
        --wpjp-main-heading: 1.5em;
        --wpjp-second-sub-heading: 1.2em;
        --wpjp-sub-heading: 1.0em;
        --wpjp-body-font-size: 0.9em;
    }
    
    /* Simplify button wrapping in top section */
    .wjportal-cp-user-act-btn {
        width: 100%;
        justify-content: center;
    }
    .wjportal-cp-user-action {
        gap: 8px;
    }

    /* Reduce dashboard item padding */
    #wjportal-job-cp-wrp div#wpjobportal-center {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    
}


/* 5. Small Mobile Phones (Max Width 480px) */
@media (max-width: 480px) {
    /* Final font scaling for smallest screens */
    :root {
        --wpjp-main-heading: 1.4em;
        --wpjp-second-sub-heading: 1.1em;
        --wpjp-sub-heading: 0.95em;
        --wpjp-body-font-size: 0.85em;
    }

    /* Stats Boxes collapse to a single column */
    .wjportal-cp-boxes {
        grid-template-columns: 1fr; /* 1 column */
        margin-top: 10px;
        padding-top: 10px;
        gap: 15px;
    }
   #wjportal-job-cp-wrp .wjportal-cp-box-top::before{
        top: 11px;
    right: 145px;
    }
    .wjportal-applied-job-resume-status {
        top: 88% !important;
    right: 0rem !important;
}
    /* Shrink the user logo */
    .wjportal-user-logo {
        width: 80px;
        height: 80px;
    }
    
    /* Adjust padding on the list items */
    #wjportal-job-cp-wrp .wjportal-jobs-list-top-wrp {
        width: 100%;
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    
    /* Ensure action buttons are always full width if they stack */
    .wjportal-cp-user-act-btn {
        padding: 8px 12px;
    }
    
    /* Adjust short links padding */
    #wjportal-job-cp-wrp .wjportal-cp-short-links-wrp {
        padding: 10px 15px;
    }
    
    .wjportal-cp-box-num {
        font-size: 30px;
    }
    .wjportal-cp-box-tit {
        margin-top: 50px;
    }
}