/*----------------------------------------------
 			WP Job Portal New CSS 
------------------------------------------------*/
/* ---
  Modern CSS for WP Job Portal
--- */

/* ----------------------------------------- */
/* == 1. Global Styles & Variables         == */
/* ----------------------------------------- */
@import url('job_portal_variables.css');

/* new start*/
.wjportal-main-up-wrapper {
    width: 100%;
    max-width: 1350px !important;
    margin: 0 auto !important;
}
.wjportal-main-up-wrapper{
    box-sizing: border-box;
}
.wjportal-main-up-wrapper * {
    box-sizing: border-box;
}
.wjportal-main-up-wrapper div.wjportal-cp-content-mainwrp{display: flex;width:100%;gap: 30px;}
.wjportal-main-up-wrapper .wjportal-cp-right{min-width: unset;max-width:100%;width: calc(100% - 310px);flex: 1 1 auto;}
.wjportal-main-up-wrapper .wjportal-cp-graph *{max-width: 100% !important;}

/* new end*/
.wjportal-main-up-wrapper a,
.wjportal-main-up-wrapper .wjportal-main-wrapper a:focus {
    text-decoration: unset;

}


/* ----------------------------------------- */
/* == 1. Top Header       == */
/* ----------------------------------------- */


.wjportal-page-header {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;

}

div.wjportal-breadcrumbs-wrp {
    width: 100%;
    margin-top: 10px;
    display: flex;
    gap: 2px;
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-breadcrumbs-wrp div.wjportal-breadcrumbs-links a.wjportal-breadcrumbs-link {
    color: var(--wpjp-primary-color);
}

.wjportal-breadcrumbs-links.wjportal-breadcrumbs-firstlinks {
    color: var(--wpjp-primary-color);
}

.wjportal-breadcrumbs-links.wjportal-breadcrumbs-lastlink {
    color: var(--wpjp-body-font-color);
}

.wjportal-page-heading {
    font-size: var(--wpjp-main-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    position: relative;
    width: 100%;
}

/* Main Header Container */
.wjportal-page-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Left Side: Title and Breadcrumbs --- */

.wjportal-page-header-cnt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.wjportal-breadcrumbs-links {
    display: inline-block;
}

.wjportal-breadcrumbs-link {
    color: #007bff;
    /* Standard link blue */
    text-decoration: none;
    transition: color 0.3s ease;
}

.wjportal-breadcrumbs-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.wjportal-breadcrumbs-links:not(:first-child)::before {
    content: '/';
    margin: 0 8px;
    color: #adb5bd;
}

/* --- Right Side: Actions --- */

.wjportal-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between filter and button */
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
}

div.wjportal-header-actions div.wjportal-act-btn-wrp {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Filter/Sort Dropdown Styling */

.wjportal-filter-wrp {
    display: flex;
    align-items: center;
    background-color: var(--background-color);
    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-main-up-wrapper #sorting {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 12px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    outline: none;
}

.wjportal-filter select#sorting {
    height: auto !important;
}

.wjportal-filter-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-right: 5px;
    transition: background-color 0.3s ease;
    border-left: 1px solid var(--wpjp-border-color);
}

.wjportal-main-up-wrapper #sortingimage {
    width: 16px;
    height: 16px;
}

/* "Add New Job" Button Styling */
.wjportal-act-btn {
    background-color: var(--wpjp-primary-color);
    /* Primary action color */
    color: #ffffff;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.wjportal-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-act-btn i {
    font-size: var(--wpjp-body-font-size);
}

/* ----------------------------------------- */
/* == 5. Modern Search Filter Styles       == */
/* ----------------------------------------- */

/* Main wrapper for the entire filter section */
.wjportal-filter-search-main-wrp {
    background-color: var(--wpjp-card-background);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    margin-bottom: 2rem;
}

.wjportal-main-up-wrapper form#job_form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* Flex container for the form fields and buttons */
.wjportal-filter-search-wrp {
    display: flex;
    align-items: center;
    /* Vertically align items */
    gap: 1rem;
    /* Space between fields */
    width: 100%;
}

/* Wrapper for each input field, allows them to grow */
.wjportal-filter-search-field-wrp {
    flex: 1 1 auto;
    /* Allows input fields to take available space */
    position: relative;
    width: calc(100% / 2 - 100px - 1rem);
    background-color: white;

}

.wjportal-filter-search-input-field {
    width: 100% !important;
    padding: 12px 15px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px !important;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 55px !important;
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal input[type="text"] {
    color: var(--wpjp-body-font-color);
    border: unset;
    height: 100% !important;
    min-width: fit-content;
}

.wpjobportal-input-list-wpjobportal:focus-within {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal li {
    list-style-type: none;
    margin-bottom: 0;
}

.wjportal-filter-search-input-field:focus {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    outline: none;
}

.wjportal-main-up-wrapper p,
.wjportal-main-up-wrapper ul,
.wjportal-main-up-wrapper ol {
    background: #fff;
}

/* Wrapper for the search and reset buttons */
.wjportal-filter-search-btn-wrp {
    display: flex;
    gap: 0.5rem;
}

/* Base styles for both buttons */
.wjportal-filter-search-wrp .wjportal-filter-search-btn,
.wjportal-filter-search-wrp .wjportal-filter-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    min-height: 55px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: var(--wpjp-body-font-size);
    /* Adjust icon size */
}

/* Primary search button */
.wjportal-filter-search-wrp .wjportal-filter-search-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-filter-search-wrp .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    text-decoration: none !important;
    color: #fff;
}

/* Secondary reset button */
.wjportal-filter-search-wrp .wjportal-filter-reset-btn {
    background-color: var(--wpjp-border-color);
    color: var(--wpjp-secondary-color);
}

.wjportal-filter-search-wrp .wjportal-filter-reset-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    text-decoration: none !important;
}

.wjportal-main-up-wrapper input[type="text"],
.wjportal-main-up-wrapper input[type="email"],
.wjportal-main-up-wrapper input[type="url"],
.wjportal-main-up-wrapper input[type="password"],
.wjportal-main-up-wrapper input[type="search"],
.wjportal-main-up-wrapper input[type="number"],
.wjportal-main-up-wrapper input[type="tel"],
.wjportal-main-up-wrapper input[type="range"],
.wjportal-main-up-wrapper input[type="date"],
.wjportal-main-up-wrapper input[type="month"],
.wjportal-main-up-wrapper input[type="week"],
.wjportal-main-up-wrapper input[type="time"],
.wjportal-main-up-wrapper input[type="datetime"],
.wjportal-main-up-wrapper input[type="datetime-local"],
.wjportal-main-up-wrapper input[type="color"],
.wjportal-main-up-wrapper textarea,
.wjportal-main-up-wrapper select {
    border-radius: 8px !important;
    height: 55px !important;
    color: var(--wpjp-body-font-color) !important;
    border-color: var(--wpjp-border-color) !important;
    background-color: white !important;
    width:100%;
}

/* ----------------------------------------- */
/* == Responsive for Search Filter         == */
/* ----------------------------------------- */

@media (max-width: 768px) {
    .wjportal-filter-search-wrp {
        flex-direction: column;
        /* Stack fields vertically */
        align-items: stretch;
        /* Make items full-width */
    }

    .wjportal-form-wrp.wjportal-search-job-aiform .wjportal-filter-search-btn-wrp {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .wjportal-filter-search-btn-wrp {
        display: grid;
        justify-content: center;
        width: 100%;
    }

    .wjportal-resume-detail-left-wrapper .wjportal-resume-left-section {
        position: relative;
    }
}

/* ----------------------------------------- */
/* == AI Modern Search Filter Styles       == */
/* 
/* ----------------------------------------- */

/* --- Main Container --- */
.wjportal-filter-aisearch-main-wrp {
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    width: 100%;
}

/* --- Main Flex Layout (Logo + Content) --- */
.wjportal-filter-ai-searchfrm-wrp {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 10px;
    padding-bottom: 30px;
    padding-top: 20px;
    align-items: flex-start;
}

/* --- AI Logo Styling --- */
.wjportal-ai-searchfrm-logo-wrp {
    flex-shrink: 0;
    width: 125px;
    height: 125px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, var(--wpjp-primary-color) 0%, var(--wpjp-secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Show and style the original image */
.wjportal-ai-searchfrm-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    /* Makes the PNG icon white */
}

/* --- Content Wrapper (Title, Input, Button) --- */
.wjportal-aifilter-search-wrp {
    display: flex;
    gap: 15px;
    width: 100%;
    flex-wrap: wrap;
}

.wjportal-aifilter-search-wrp .wjportal-filter-ai-searchfrm-title {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    line-height: 1.4;
    /* Trendy gradient text */
    background: var(--wpjp-secondary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
    padding-top: 10px;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-field-wrp {
    position: relative;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-input-field {
    width: 100%;
    height: 55px;
    padding: 12px 16px 12px 48px;
    /* Add left padding for an icon */
    font-size: 16px;
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;

}

.wjportal-form-wrp.wjportal-search-job-aiform .wjportal-aifilter-search-wrp .wjportal-filter-search-input-field {
    text-align: center;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-input-field:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 4px rgba(232, 48, 48, 0.1);
}

/* Add a search icon inside the input field */
.wjportal-aifilter-search-wrp .wjportal-filter-search-field-wrp::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--wpjp-body-font-color);
    opacity: 0.5;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    transition: opacity 0.2s ease;
}

.wjportal-filter-search-main-wrp.wjportal-filter-aisearch-main-wrp {
    margin-bottom: 40px;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-input-field:focus+.wjportal-filter-search-field-wrp::before {
    opacity: 0.8;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn-wrp {
    align-self: flex-end;
    /* Pushes button to the right */
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(232, 48, 48, 0.2);
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn::before {
    content: '';
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);

}

.wjportal-form-wrp.wjportal-search-job-aiform {
    display: flex;
    width: 100%;
    padding: 5px 10px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
}

span.wjportal-filter-ai-searchfrm-discription {
    width: 100%;
}

.wjportal-main-up-wrapper input#aijobsearch {
    padding-left: 40px;
}

/* Hide original button image */
.wjportal-aifilter-search-wrp .wjportal-filter-search-field-icon {
    display: none;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .wjportal-filter-ai-searchfrm-wrp {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .wjportal-aifilter-search-wrp {
        align-items: center;
        justify-content: center;
    }

    .wjportal-aifilter-search-wrp .wjportal-filter-search-btn-wrp {
        align-self: stretch;
    }

    .wjportal-aifilter-search-wrp .wjportal-filter-search-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ----------------------------------------- */
/* == AI Job Search Page            == */
/* ----------------------------------------- */

/* --- Main Form Container --- */
.wjportal-form-wrp.wjportal-search-job-aiform {
    /* Glassmorphism Effect */
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);

    border-radius: 24px;
    padding: 2.5rem;
    /* Increased padding */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    width: 100%;
}

/* --- Main Flex Layout (Column Direction) --- */
.wjportal-search-job-aiform .wjportal-filter-ai-searchfrm-wrp {
    display: flex;
    flex-direction: column;
    /* Stack elements vertically */
    align-items: center;
    /* Center everything horizontally */
    text-align: center;
    gap: 1.5rem;
    /* Space between elements */
}

/* --- AI Logo Styling --- */
.wjportal-search-job-aiform .wjportal-ai-searchfrm-logo-wrp {
    flex-shrink: 0;
    width: 125px;
    height: 125px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, var(--wpjp-primary-color) 0%, var(--wpjp-secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Show and style the original image */
.wjportal-search-job-aiform .wjportal-ai-searchfrm-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    /* Makes the PNG icon white */
}

/* --- Content Wrapper (Title, Input, Button) --- */
.wjportal-search-job-aiform .wjportal-aifilter-search-wrp {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.wjportal-search-job-aiform .wjportal-filter-ai-searchfrm-title {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    line-height: 1.4;
}

.wjportal-search-job-aiform .wjportal-filter-ai-searchfrm-discription {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin: 0 auto;
    /* Center the description text */
    line-height: 1.6;
}

.wjportal-search-job-aiform .wjportal-filter-search-field-wrp {
    position: relative;
    width: 100%;
}

.wjportal-search-job-aiform .wjportal-elegant-addon-filter-search-input-field {
    width: 100%;
    height: 55px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    text-align: center;
    color: var(--wpjp-body-font-color);
    background-color: white;
    border: 1px solid rgba(233, 236, 239, 0.8);
    border-radius: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.wjportal-search-job-aiform .wjportal-elegant-addon-filter-search-input-field:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 4px rgba(232, 48, 48, 0.1);
}

.wjportal-search-job-aiform .wjportal-filter-search-btn-wrp {
    width: 100%;
}

.wjportal-search-job-aiform .wjportal-filter-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 15px;
    /* Slightly taller button */
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(232, 48, 48, 0.2);
}

.wjportal-search-job-aiform .wjportal-filter-search-btn::before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.wjportal-search-job-aiform .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);

}

/* Hide original button image */
.wjportal-search-job-aiform .wjportal-filter-search-field-icon {
    display: none;
}

/* ----------------------------------------- */
/* == 2. Job List Page Styles              == */
/* ----------------------------------------- */

.wjportal-filter-search-main-wrp {
    display: flex;
    width: 100%;
    padding: 15px 10px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
}

/* Main job item card */
.wjportal-jobs-list {
    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;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wjportal-jobs-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Flex container for the top section (logo + main content) */
.wjportal-jobs-list-top-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    width: 100%;
}

/* Company Logo */
.wjportal-jobs-logo {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-jobs-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* Container for all job info */
.wjportal-jobs-cnt-wrp {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 0;
    flex-grow: 1;
}

/* Middle content: title, company, location */
.wjportal-jobs-middle-wrp {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin-bottom: 8px;
}

span.wjportal-job-title {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.wjportal-job-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wjportal-job-title a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline !important;
}

.wjportal-companyname {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;

    color: var(--wpjp-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-custom-field {
    padding-bottom: 5px;
}

span.wjportal-shortlist-job-comment-tit {
    font-size: var(--wpjp-body-font-size);
}

/*.wjportal-jobs-list-wrapper.wjportal-my-jobs-wrp .wjportal-jobs-middle-wrp{gap:10px;}*/
.wjportal-jobs-list-wrapper.wjportal-my-jobs-wrp a.wjportal-companyname {
    padding-top: 10px;
}

.wjportal-main-wrapper.wjportal-clearfix a.wjportal-companyname {
    padding: 5px 0;
}

.wjportal-jobs-data-text:not(:last-child)::after {
    content: "•";
    margin: 0 0.5rem;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-custom-field-tit {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-custom-field-val {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

/* Right content: job type, salary, date */
.wjportal-jobs-right-wrp {
    width: 30%;
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-direction: column;
    gap: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-cp-cnt .wjportal-jobs-middle-wrp {
    width: 100%;
}

.wjportal-cp-cnt .wjportal-jobs-right-wrp {
    width: 100%;
    flex-shrink: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
}

.wjportal-job-type {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5em;
    /* Space between icon and text */
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

/* --- The CSS Clock Icon --- */
.wjportal-job-type::before {

    /* The clock shape created using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");

}

.wjportal-jobs-salary {
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    font-size: 18px;

}

span.wjportal-salary-type {
    font-weight: 400;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-shortlist-job-comments {
    flex-basis: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

span.wjportal-shortlist-job-comment-val {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-jobs-list-wrapper.wjportal-shortlisted-jobs-wrp .wjportal-container-small {
    padding: 10px;
    margin-top: 0 !important;
}

/* Bottom controls bar */
.wjportal-jobs-list-btm-wrp {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

/* This uses flexbox to perfectly align the icon and the text */
.wjportal-newest-jobs-date {
    display: inline-flex;
    /* Keeps the element inline while enabling flex alignment */
    align-items: center;
    /* Vertically centers the icon with the text */
    gap: 0.5rem;
    /* The space between the icon and the text */
    width: 40%;
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    padding-left: 10px;
}

/* --- The CSS Clock Icon --- */
.wjportal-newest-jobs-date::before {
    content: '';
    display: block;
    width: 1em;
    /* Icon size will scale with the font size */
    height: 1em;

    /* The icon will automatically match the text color */
    background-color: currentColor;

    /* The clock shape is created using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

a.wjportal-jobs-act-btn-apply {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-jobs-act-btn-apply:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* --- Shared Styles for ALL Buttons --- */
.wjportal-jobs-act-btn,
.wjportal-jobs-act-btn-apply {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    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;
    cursor: pointer;
}

/* --- Base Icon Style for ALL Buttons --- */

a.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied {
    background: #fafafa;
    color: #a09e9e;
}

a.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied:hover {
    background: var(--wpjp-secondary-color);
}

/* --- Secondary Button Style (Short List, Tell a friend) --- */
.wjportal-jobs-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
}

.wjportal-jobs-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: white;
}

.wjportal-popup-field.wjportal-popup-field-job-title {
    font-weight: 700;
}

.wjportal-popup-field-email-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    padding: 10px 0;
}

/* --- Primary Button Style (Apply Now) --- */
.wjportal-jobs-act-btn-apply {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}


/* ----------------------------------------- */
/* == 8. Action Bar with Star Rating       == */
/* ----------------------------------------- */

/* Main flex container for the bottom action bar */
.wjportal-jobs-action-wrp {
    display: flex;
    justify-content: space-between;
    /* Pushes items to the edges */
    align-items: center;
    gap: 1rem;
}

/* Re-styling the action buttons to match the image */
.wjportal-jobs-list-btm-wrp .wjportal-jobs-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    /* Layout for Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */

    /* Sizing and Shape */
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;

    /* Re-ordering with Flexbox */
    order: 2;
    /* Puts buttons after the stars */
}

/* Hover effect for the buttons */
.wjportal-jobs-list-btm-wrp .wjportal-jobs-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

.wjportal-jobs-act-btn.wjportal-jobs-act-btn-ai-suggested-resumes {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

/* Base style for icons added via CSS */

/* Featured tag icon */
span.wjportal-featured-tag-icon-wrp span.wjportal-featured-tag-icon {
    color: #fff;
    background: var(--wpjp-primary-color);
    display: inline-block;
    position: absolute;
    top: -64px;
    left: -28px;
    z-index: 1;
    transform: rotate(45deg);
    height: 126px;
    width: 76px;
}

span.wjportal-featured-tag-icon-wrp span.wjportal-featured-tag-icon i {
    position: absolute;
    bottom: 42px;
    right: 7px;
    font-size: 25px;
}

span.wjportal-featured-tag-icon-wrp span.wjportal-featured-hover-wrp {
    background: #e83030;
    color: #fff;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

span.wjportal-item-act-status.wjportal-waiting {
    background-color: #f28d19;
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

span.wjportal-item-act-status.wjportal-rejected {
    background-color: #bb0906;
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

/* --- Popup Backdrop --- */
.wjportal-main-up-wrapper #payment-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 35, 39, 0.6);
    /* Use secondary color for backdrop */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.quickviewfullwidth.tell-a-friend-captcha-wrapper .wjportal-form-value input {
    background-color: var(--background-color);
}

/* --- Payment Methods Layout --- */
.wjportal-payemt-methods-wrp {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    /* Allows items to stack on small screens */
}

/* --- Individual Payment Method Styling --- */
.wjportal-payemt-method-item {
    display: block;
    padding: 1rem;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.wjportal-payemt-method-item:hover {
    transform: translateY(-5px);
    border-color: var(--wpjp-primary-color, #e83030);
    box-shadow: var(--wpjp-card-hover-shadow, 0 6px 20px rgba(0, 0, 0, 0.12));
}

.wjportal-payemt-method-item:hover img {
    /* Bring the logo to full color on hover */
    filter: grayscale(0%);
    opacity: 1;
}

.wjportal-payemt-method-item img {
    display: block;
    max-height: 80px;
    /* Controls the logo size */
    width: auto;
}

/* --- Stripe Button Specifics --- */
/* This makes the clickable area of the Stripe form fill the container */
.wjportal-payemt-method-stripe form {
    display: flex;
}

.wjportal-payemt-method-stripe .stripe-button-el {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Makes the default Stripe button invisible */
    cursor: pointer;
}

.wjportal-payemt-method-stripe .stripe-button-el span {
    display: none !important;
    /* Hide the default "Stripe" text */
    height: auto;
}

/* Hide the duplicate Stripe image that is outside the form */
.wjportal-payemt-method-stripe img {
    max-height: 115px;
}

.wjportal-main-up-wrapper button#proceedPaymentBtn {
    border: 1px solid var(--wpjp-border-color);
    background: var(--wpjp-primary-color);
    color: #fff;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-main-up-wrapper button#proceedPaymentBtn:hover {
    background: var(--wpjp-secondary-color);
    color: #fff;

}

a.wjportal-payment-act-btn {
    background-color: var(--wpjp-card-background);
    color: #1b50ef;
    border: 1px solid #1b50ef;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-payment-act-btn:hover {
    background-color: #1b50ef;
    color: #fff !important;
}

.wjportal-jobs-list-wrapper.wjportal-applied-jobs-wrp a.wjportal-payment-act-btn {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}


/* Style for the primary "Make Payment" button */
.wjportal-payment-act-btn {
    /* Button Appearance */
    background-color: var(--wpjp-primary-color);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;

    /* Layout for Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    /* Space between icon and text */

    /* Effects */
    transition: background-color 0.3s ease;
}

.wjportal-payment-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    text-decoration: none;
}



/* ----------------------------------------- */
/* == 10. Job Data Icons (Category & Location) == */
/* ----------------------------------------- */
/* Make the parent a flex container to handle spacing */
.wjportal-jobs-data {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap on smaller screens */
    align-items: center;
    gap: 0.5rem 1rem;
    /* Row and column gap */
    font-weight: 500;
}

/* Prepare the text span to hold an icon */
.wjportal-jobs-data-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);

}

/* The ::before pseudo-element creates the icon */
.wjportal-jobs-data-text::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color matches the text */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for the map pin icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

.wjportal-companyinfo-data::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color matches the text */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for the map pin icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

.wjportal-companyinfo a.wjportal-companyinfo-link::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color matches the text */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for the email icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3e%3cpolyline points='22,6 12,13 2,6'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3e%3cpolyline points='22,6 12,13 2,6'/%3e%3c/svg%3e");
}

/* Base styles for the icons */
.wjportal-jobs-data-text::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    /* Use the light text color for the icons to match */
    -webkit-mask-size: cover;
    mask-size: cover;
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-body-font-color) !important;
}

/* Icon for the first span (Category) */
.wjportal-jobs-data .wjportal-jobs-data-text:first-child::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
}

/* Container for the star rating */
.wjportal-shortlist-stars {
    order: 1;
    /* Puts the stars first */
    /*border: 1px solid var(--wpjp-border-color);
  border-radius: 6px;
  padding: 6px 10px;
*/
    margin-right: auto;

}

div.wjportal-jobs-list-btm-wrp div.wjportal-jobs-action-wrp {
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
}

/* ----------------------------------------- */
/* == Job Details              == */
/* ----------------------------------------- */

.wjportal-jobdetail-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.wjportal-company-job-viewjob-wrp {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.wjportal-view-job-title-wrp {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-view-job-page-wrapper.wjportal-view-page-featured-flag .wjportal-job-company-wrp {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    border: 1px solid #ffb63b !important;
}

.wjportal-view-job-page-wrapper.wjportal-view-page-featured-flag div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-tit,
.wjportal-view-job-page-wrapper.wjportal-view-page-featured-flag div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-val {
    color: var(--wpjp-secondary-color);
}

.wjportal-company-job-viewjob-leftwrp {
    flex-wrap: wrap;
    display: flex;
    flex: 2;
    min-width: 320px;
    gap: 30px;
}

.wjportal-job-data-map-wrp {
    width: 100%;
}

.wjportal-job-company-wrp {
    float: left;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem;
    background-color: var(--wpjp-card-background);
    position: relative;
    overflow: hidden;
}

.wjportal-job-company-logo {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d4d4d5;
}

img.wjportal-job-company-logo-image {
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: inline-block;
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt {
    float: left;
    width: calc(100% - 150px);
    padding: 0 0 0 20px;
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info {
    padding-bottom: 10px;
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info a.wjportal-job-company-name {
    display: inline-block;
    font-size: var(--wpjp-body-font-size);
    text-decoration: underline;
    color: var(--wpjp-primary-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info {
    padding-bottom: 10px;
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-tit {
    margin-right: 3px;
    display: inline-block;
    color: var(--wpjp-body-font-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-val {
    display: inline-block;
    color: var(--wpjp-body-font-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp {
    float: left;
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-job-detail-about-job-title,
div.wjportal-jobdetail-wrapper div.wjportal-job-sec-title,
.wjportal-tags-sec-title {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    font-size: var(--wpjp-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wpjp-primary-color);
}

.wjportal-main-up-wrapper .wjportal-view-job-page-job-apply-form-wraper {
    width: 100%;
}

a.wjportal-login-to-apply-btn {
    display: inline-flex;
    /* Allows for easy alignment of text and icon */
    align-items: center;
    /* Vertically centers the icon and text */
    gap: 0.6em;
    /* Adds space between the icon and text */
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease,

}

.wjportal-form-wrp.wpjobportal-quickapply-form .wjportal-login-to-apply-btn::before {
    content: '';
    /* This is required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes the icon color the same as the text color (white) */

    /* The SVG login icon (arrow pointing into a door) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v-2h8V5h-8V3h8c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v-2h8V5h-8V3h8c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

a.wjportal-apply-as-visitor-btn {
    display: inline-flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color) !important;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
    width: 100%;
    justify-content: center;
}

.wjportal-job-apply-or-visitor span {
    font-weight: 700;
    font-size: var(--wpjp-body-font-size);
}

a.wjportal-apply-as-visitor-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

a.wjportal-jobs-act-btn.wjportal-job-act-btn-shortlist {
    font-weight: 500;
}

.wjportal-form-wrp.wpjobportal-quickapply-form .wjportal-form.has-validation-callback .wjportal-form-btn-wrp {
    padding: 0;
    margin: 0;
    border-top: 0px;
    font-size: var(--wpjp-body-font-size);
    width: 100%;
}

a.wjportal-login-to-apply-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
}

a.wjportal-login-to-apply-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-job-apply-or-visitor {
    text-align: center;
    padding: 12px 0;
}

.wjportal-company-job-viewjob-leftwrp .wjportal-job-data .wjportal-job-data-tit,
.wjportal-company-job-viewjob-leftwrp .wjportal-custom-field .wjportal-custom-field-tit {
    color: var(--wpjp-secondary-color);
    font-weight: 500;

}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp div.wjportal-job-data {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
    margin-right: 10px;
    color: var(--wpjp-body-font-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp div.wjportal-custom-field {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    border-bottom: 1px solid var(--wpjp-border-color);

}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp div.wjportal-custom-field:nth-child(even) {
    margin-right: 10px;
}

div.wjportal-jobdetail-wrapper div.wjportal-job-map {
    float: left;
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-job-data-tags-wrp {
    width: 100%;
}

.wjportal-form.has-validation-callback {
    /*padding-top: 80px*/
}

/* --- Popup Overlay and Container --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-container {
    background-color: var(--wpjp-card-background);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-container {
    transform: scale(1);
}

/* --- Popup Header --- */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wpjp-border-color);
}

.popup-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.popup-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--wpjp-secondary-color);
    transition: color 0.2s;
}

.popup-close-btn:hover {
    color: var(--wpjp-primary-color);
}

/* --- Provided HTML Styling --- */
.wjportal-job-apply-price-msg {
    background-color: #eaf6ec;
    color: #2f6f42;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    margin-bottom: 2rem;
    border: 1px solid #2f6f42;
}

.wjportal-job-apply-price-msg strong {
    font-weight: 700;
}

.wjportal-form-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wjportal-form-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
}

.wjportal-form-title font {
    color: var(--wpjp-primary-color);
}

.wjportal-job-apply-payment-method {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Custom Radio Button Styling --- */
.wpjobportal-form-radio-field input[type="radio"] {
    display: none;
    /* Hide the default radio button */
}

.wpjobportal-form-radio-field label {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;

    font-size: 16px;
    font-weight: 500;
}

.wpjobportal-form-radio-field label img {
    height: 24px;
    width: auto;
    margin-right: 12px;
}

.wpjobportal-form-radio-field label:hover {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.1);
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label {
    border-color: var(--wpjp-primary-color);


}

.jssection_hide {
    display: none;
}

.wjportal-resume-section-undo {
    display: none;
}

/* --- Popup Overlay and Container --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

/* 1. Container Styling & Layout */
.wpjobportal-form-radio-field {
    /* Use flex to align the hidden input and the label horizontally */
    display: inline-flex;
    align-items: center;
    position: relative;
    /* Essential for positioning the checkmark later */
    cursor: pointer;
}

/* 2. Visually Hide the Default Checkbox */
/* We use the specific attribute selector to ensure we only target the checkbox */
.wpjobportal-form-radio-field input[type="checkbox"] {
    /* Standard method to hide an element but keep it accessible/tabbable */
    position: absolute;
    opacity: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* 3. Style the Checkbox Label Text */
.wpjobportal-form-radio-field label {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    display: flex;
    /* Helps align the text with the pseudo-element */
    align-items: center;
    cursor: pointer;
}

/* 4. Create the Custom Square Box (The UNCHECKED State) */
.wpjobportal-form-radio-field label::before {
    content: '';
    display: block;
    /* Change from inline-block for better control */
    min-width: 20px;
    /* Size of the box */
    height: 20px;
    border: 2px solid #555;
    /* Dark grey border */
    border-radius: 4px;
    /* Slightly rounded corners for a checkbox */
    background-color: #fff;
    margin-right: 10px;
    /* Space between the box and the text */
    transition: all 0.2s ease;
}

/* 5. Style the Checked State: Background/Border */
.wpjobportal-form-radio-field input[type="checkbox"]:checked+label::before {
    background-color: var(--wpjp-primary-color);
    /* Blue background when checked */
    border-color: var(--wpjp-primary-color);
}

/* 6. Style the Checked State: The Checkmark (✓) */
.wpjobportal-form-radio-field input[type="checkbox"]:checked+label::after {
    content: '\2713';
    /* Unicode for a checkmark (✓) */
    position: absolute;
    /* Calculate position based on the label::before size (20px wide) */
    left: 5px;
    /* Adjust to center the checkmark inside the 20px box */
    top: 47%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    /* Ensure no extra line-height pushes the position */
    color: #fff;
    /* White checkmark */
    font-weight: bold;
    background-color: unset;

}

/* Style the help text for completeness */
.wjportal-form-help-txt {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    padding-left: 5px;
    /* Indent slightly */
    width: 100%;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-container {
    background-color: var(--wpjp-card-background);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-container {
    transform: scale(1);
}

/* --- Popup Header --- */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wpjp-border-color);
}

.popup-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.popup-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--wpjp-secondary-color);
    transition: color 0.2s;
}

.popup-close-btn:hover {
    color: var(--wpjp-primary-color);
}



.wjportal-job-apply-price-msg strong {
    font-weight: 700;
}

.wjportal-form-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wjportal-form-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
}

.wjportal-form-title font {
    color: var(--wpjp-primary-color);
}

.wjportal-job-apply-payment-method {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Custom Radio Button Styling --- */
.wpjobportal-form-radio-field input[type="radio"] {
    display: none;
    /* Hide the default radio button */
}

.wpjobportal-form-radio-field label {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    font-size: 16px;
    font-weight: 500;
}

.wpjobportal-form-radio-field label img {
    height: 24px;
    width: auto;
    margin-right: 12px;
}

.wpjobportal-form-radio-field label:hover {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.1);
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label {
    border-color: var(--wpjp-primary-color);

}

/* --- Trigger Button (for demo) --- */
#open-popup-btn {
    background-color: var(--wpjp-secondary-color);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease;
}

#open-popup-btn:hover {
    box-shadow: var(--wpjp-card-hover-shadow);
    transform: translateY(-3px);
}

.wjportal-company-job-viewjob-rightwrp {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-wrap: wrap;
    height: max-content;
    position: sticky;
    top: 2.5rem;
}

.wjportal-jobinfo-wrp {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem 2rem;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    background-color: var(--background-color);
}

.wjportal-jobinfo {
    display: flex;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    float: left;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-jobtype {
    display: inline-block;
    padding: 6px 15px;
    vertical-align: middle;
    color: #fff;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-jobinfo-data {
    align-items: center;
    display: flex;
    color: var(--wpjp-secondary-color);
    gap: 15px;
    vertical-align: middle;
    font-weight: 500;
    gap: 8px;
    font-size: var(--wpjp-body-font-size);

}

/* --- Icon for Salary --- */
.wjportal-jobinfo-right-data-salary .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
}

/* --- Icon for Category --- */
.wjportal-jobinfo-right-data-category .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>');
}

/* --- Icon for Created Date --- */
.wjportal-jobinfo-right-data-created .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
}

/* --- Icon for Closing Date --- */
.wjportal-jobinfo-right-data-close-date .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}

/* --- Icon for Location --- */
.wjportal-jobinfo-right-data-location .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
}

/* --- Icon for Views --- */
.wjportal-jobinfo-right-data-views .wjportal-jobinfo-data-view::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
}

.wjportal-jobinfo-highlight {
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    float: left;
    font-size: var(--font-size);
    background-color: #ffeeec;
    border-color: #f29d99;
}

/* --- Step 1: Hide the old PNG image icons --- */
.wjportal-jobinfo-data img {
    display: none !important;

}


/* --- Main Container --- */
/* This lays out all the info blocks in a flexible, wrapping row */
.wjportal-jobinfo-wrp,
.wjportal-jobinfo.wjportal-jobinfo-right-data-location {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    /* Vertical and horizontal spacing */
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);
}

/* --- General Styling for Each Info Block --- */
/* Targets all spans like "salary", "category", etc. */
.wjportal-jobinfo-data,
.wjportal-jobinfo-data-view {
    display: flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
}

/* --- Hide Old PNG Images --- */
/* We target the specific images within each block and hide them */
.wjportal-jobinfo-wrp img {
    display: none;
}

/* --- Other Cosmetic Styles --- */
/* Style for the "Full-Time" badge */
.wjportal-jobtype {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    color: white;
    font-weight: 500;
}

/* Style for highlighted info, like the closing date */
.wjportal-jobinfo-highlight .wjportal-jobinfo-data {
    color: #c0392b;
    /* A subtle red to draw attention */
    font-weight: 500;
}

a.wpjobportal_tags_a.wjportal-tags-item {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    margin: 5px;
}

div#wpjobportal_jstags {
    float: left;
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-tags-item::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    /* Adds space between icon and text */
    vertical-align: middle;
    /* Aligns icon with the text */

    /* This makes the icon color match the text color */
    background-color: currentColor;

    /* Use the SVG shape as a mask */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* SVG icon for a "tag" */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg>');
}

a.wpjobportal_tags_a.wjportal-tags-item:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-job-company-btn-wrp {
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem;
    gap: 10px;
    background-color: var(--wpjp-card-background);
}

a.wjportal-job-act-btn {
    display: inline-flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 5px;
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

a.wjportal-job-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-job-detail-about-company-wrap {
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-job-detail-about-company-title {
    width: 100%;
    margin-bottom: 15px;
    font-size: var(--wpjp-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-job-detail-about-company-description {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    font-weight: normal;
}

a.wjportal-company-view-all-jobs-btn,
.wjportal-company-view-company-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    justify-content: center;
    background-color: #fff;
    color: var(--wpjp-secondary-color);
    margin-top: 20px;
}

.wjportal-company-btn-wrp-viewjobs {
    width: 100%;
}

.wjportal-job-detail-about-company-buttons-wrap {
    display: flex;
    flex-wrap: wrap;
    /* Allows buttons to stack on smaller screens */

}

/* --- Base Button & Icon Style --- */
/* This is a shared style for both buttons */
.wjportal-company-btn-wrp a {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);


}

/* Base style for the icon's pseudo-element */
.wjportal-company-btn-wrp a::before {
    content: '';
    display: inline-block;
    width: 20px;
    /* Icon size */
    height: 20px;
    /* Icon size */
    background-color: currentColor;
    /* Colors the SVG icon */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Primary Button: "View All Jobs" --- */
.wjportal-company-view-all-jobs-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    background-color: var(--wpjp-primary-color);
    /* Uses your variable with a fallback */
    color: #ffffff;
    border-color: var(--wpjp-primary-color);
}

.wjportal-company-view-all-jobs-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Secondary Button: "View Company" --- */
.wjportal-company-view-company-btn {
    background-color: transparent;
    color: var(--wpjp-primary-color);
    border-color: var(--wpjp-primary-color);

}

.wjportal-company-view-company-btn:hover {
    background-color: var(--wpjp-primary-color, );
    color: #ffffff;
}

.wjportal-main-up-wrapper .wjportal-form-wrp.wpjobportal-quickapply-form {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem;
    background-color: #fffdf7;
}

.wjportal-company-job-viewjob-rightwrp .wjportal-job-company-btn-wrp a.wjportal-job-act-btn-tell,
a.wjportal-job-act-btn-short {
    display: inline-flex;
    align-items: center;
    padding: 10px 10px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    justify-content: center;
    background-color: #fff;
    color: var(--wpjp-secondary-color);
    gap: 10px;
}

a.wjportal-job-act-btn-tell:hover,
a.wjportal-job-act-btn-short:hover {
    background-color: var(--wpjp-secondary-color) !important;
    color: #fff !important;
}

.wjportal-jobinfo-data.wjportal-job-close-date {
    color: #b72e2e;
}

/* --- Icon for Views Count --- */

/* First, hide the old PNG image */
.wjportal-jobinfo-data-view img {
    display: none;
}

/* Optional: Improve alignment */
.wjportal-jobinfo-data-view {
    display: inline-flex;
    align-items: center;
    color: var(--wpjp-secondary-color);
    font-weight: 500;
}

/* ----------------------------------------- */
/* == Applied Job List Page Styles              == */
/* ----------------------------------------- */

.wjportal-jobs-list-wrapper.wjportal-applied-jobs-wrp {
    width: 100%;
}

/* --- Popup Backdrop --- */
#no-folder-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 35, 39, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* --- Popup Card --- */
.wjportal-applied-job-actions-popup {
    background: var(--wpjp-card-background);
    border-radius: 16px;
    box-shadow: var(--wpjp-card-shadow);
    width: 100%;
    max-width: 400px;
    padding: 3rem 2rem;
    position: relative;
    box-sizing: border-box;
    text-align: center;
}

/* --- CSS-Only Close Icon --- */
#close-section {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-color: var(--wpjp-body-font-color);
    border-radius: 50%;
    font-size: 0;
    /* Hides broken image alt text */
    transition: all 0.2s ease;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}


#close-section:hover {
    background-color: var(--wpjp-primary-color);
    transform: rotate(90deg);
}

/* --- Message Content Styling --- */
.wjportal-applied-job-actions-popup-norec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    /* Space between text and button */
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-body-font-color);
}

/* --- "Add Folder" Button Styling --- */
.wjportal-applied-job-actions-popup-norec-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.wjportal-applied-job-actions-popup-norec-link:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}


/* --- Popup Backdrop --- */
#add-note-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 35, 39, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* --- Popup Card --- */
.wjportal-applied-job-actions-popup {

    background: var(--wpjp-card-background);
    border-radius: 16px;
    box-shadow: var(--wpjp-card-shadow);
    width: calc(100% - 80px);
    max-width: 100%;
    margin: 0 40px;
    padding: 2.5rem;
    position: relative;
    box-sizing: border-box;
}

/* --- CSS-Only Close Icon --- */
#close-section {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-color: var(--wpjp-body-font-color);
    border-radius: 50%;
    font-size: 0;
    /* Hides broken image alt text */
    transition: all 0.2s ease;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

#close-section:hover {
    background-color: var(--wpjp-primary-color);
    transform: rotate(90deg);
}


/* --- Form Content Styling --- */
.wjportal-applied-job-actions-wrp {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.wjportal-applied-job-actions-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wjportal-main-up-wrapper #comments-label {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-body-font-color);
}

/* --- Textarea Styling --- */
.wjportal-main-up-wrapper textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px 16px;
    font-size: 1rem;

    color: var(--wpjp-body-font-color);
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    resize: vertical;
    transition: all 0.2s ease;
}

textarea:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

/* --- Save Button --- */
.wjportal-job-applied-actions-btn-wrp {
    display: flex;
    justify-content: flex-end;
}

.wjportal-job-applied-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wjportal-job-applied-actions-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* Add a "save" icon to the button */
.wjportal-job-applied-actions-btn::before {
    content: '';
    display: block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E");
}

.wjportal-applied-job-actions-row #comments {
    margin: 0px;
    padding: 0;
}

.wjportal-applied-job-actions-wrp.wjportal-note-actions-wrp .wjportal-applied-job-actions-row #comments {
    padding: 10px;
}

.wjportal-applied-job-actions-row label {
    font-size: var(--wpjp-body-font-size);
    text-align: justify;
    font-weight: 500;
}

/* --- Main Notification Wrapper --- */
/* This can be used for positioning, e.g., position: fixed; bottom: 20px; right: 20px; */
.wjportal-visitor-msg-btn-wrp {
    width: clamp(300px, 90%, 450px);
    /* Responsive width */
}

/* --- Notification Bar (#notification-ok) --- */
#notification-ok {
    /* Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    /* Space between message and button */
    width: 100%;
    /* Appearance */
    background-color: #f0fdf4;
    /* Light green for success */
    color: #166534;
    /* Dark green text for readability */
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #4ade80;
    /* Green border */

    /* Effects */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    animation: slideInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hide the original images */
#notification-ok img {
    display: none;
}

/* --- Message Label (#popup_message) --- */
#popup_message {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between icon and text */
    font-weight: 500;
    font-size: 16px;
}

/* --- SVG Icon for the Message --- */
#popup_message::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    /* Inherits the dark green color */

    /* SVG checkmark-in-circle icon */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Close Button --- */
.applynow-closebutton {
    /* Reset default button styles */
    background: none;
    border: none;
    padding: 4px;

    /* Layout & Sizing */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;

    /* Appearance & Effects */
    color: #166534;
    /* Match text color */
    font-size: 0;
    /* Hides the "Close" text */
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.applynow-closebutton:hover {
    background-color: rgba(22, 101, 52, 0.1);
    /* Subtle hover effect */
}

/* --- SVG Icon for the Close Button --- */
.applynow-closebutton::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: currentColor;

    /* SVG 'X' icon */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Animation for the notification appearing --- */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------------------------------------- */
/* == 6. Resume/Cover Letter Info Styles (V3) == */
/* ----------------------------------------- */

/* Main container for the resume info */
.wjportal-jobs-list-resume-wrp {
    position: relative;
    /* Establishes a positioning context for the status tag */
    padding: 1rem;
    /* Add padding on the right to prevent text from overlapping the positioned tag */

    width: 100%;
}

span.wjportal-item-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

div#job-applied-resume:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Container for each title/value pair */
.wjportal-jobs-list-resume-data {
    display: block;
    /* Make the divs stack vertically */
}

/* Add space between the "Resume Title" and "Cover Letter Title" sections */
.wjportal-jobs-list-resume-data:not(:last-of-type) {
    margin-bottom: 0.75rem;
}

/* Style for the title (e.g., "Resume Title:") */
.wjportal-jobs-list-resume-tit {
    font-weight: 600;
    color: var(--wpjp-body-font-color);
    margin-right: 0.5rem;
    font-size: var(--wpjp-body-font-size);
}

/* Style for the value (the resume name/link) */
.wjportal-jobs-list-resume-val a {
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-jobs-list-resume-val {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-jobs-list-resume-val a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

/* Status tag styling */
.wjportal-applied-job-resume-status {
    /* Positioning to place it on the right */
    position: absolute;
    top: 50%;
    right: 1rem;
    /* Aligns with the parent's padding */
    transform: translateY(-50%);
    /* Ensures perfect vertical centering */

    /* Visual styling to match the image */
    padding: 8px 18px;
    border-radius: 6px;
    /* Less rounded than a pill */
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

/* Green color for the "Inbox" status */
.wjportal-applied-job-resume-status.wjportal-inbox {
    background-color: #28a745;
    /* Green color from image */
}

/* You can add other status colors like this */
.wjportal-applied-job-resume-status.wjportal-rejected {
    background-color: #dc1b18;
    /* Red for rejected */
}

span.wjportal-applied-job-resume-status.statustags.wjportal-shortlist {
    background-color: #85a94a;
}

span.wjportal-applied-job-resume-status.statustags.wjportal-spam {
    background-color: #e69108;
}

.wjportal-applied-job-resume-status.statustags.wjportal-hired {
    background-color: #35811e;
}

.wjportal-applied-job-resume-status.wjportal-primary {
    background-color: var(--wpjp-primary-color);
    /* Blue */
}


/* ----------------------------------------- */
/* == 12. Resume Action Buttons with Icons == */
/* ----------------------------------------- */

/* Wrapper for the action buttons */
.wjportal-resume-action-wrp {
    display: flex;
    flex-wrap: wrap;
    /* Allows buttons to wrap on smaller screens */
    align-items: center;
    gap: 0.75rem;
    justify-content: end;
}

/* Base style for all action buttons */
.wjportal-resume-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Styling for the secondary action links */
.wjportal-resume-act-btn.action-links {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-resume-act-btn.action-links:hover {
    background-color: var(--wpjp-secondary-color);
    /* A very light gray */
    border-color: #ced4da;
    color: #fff;
}

/* Styling for the primary "View Profile" button */
.wjportal-resume-act-btn[title="view"] {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid transparent;
}

.wjportal-resume-act-btn[title="view"]:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}


.wjportal-view-job-count {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 16px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-job-listing-description-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    margin-bottom: 5px;

}

span.wjportal-job-listing-description-val p {
    font-size: var(--wpjp-body-font-size) !important;
    font-weight: normal;
    border: none;
}

.wjportal-custom-field-wrp {
    font-weight: normal;
    width: 100%;
    margin-top: -6px;
}

/* ----------------------------------------- */
/* == 2. Resume List Page Styles              == */
/* ----------------------------------------- */

.wjportal-save-search-form-wrp {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 20px;
}

a.wjportal-error-msg-act-btn.wjportal-error-msg-act-login-btn {
    color: #fff !important;
}

.wjportal-error-msg-actions-wrp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wjportal-error-msg-txt {
    text-align: center;
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: bold;
    width: 100%;
    margin-bottom: 15px;
}

.wjportal-resume-listing-skills-data-text {
    margin-bottom: 10px;
    width: 100%;
}

/*.wjportal-error-msg-actions-wrp:hover {
background-color: var(--wpjp-secondary-color);
    color: #fff!important; }*/

div.wjportal-job-applied-resume-list div#job-applied-resume {
    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;
    border: 1px solid var(--wpjp-border-color);
    overflow: visible;
    position: relative;
    width: 100%;
}

div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-middle-wrp {
    width: 70%;
}

div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-right-wrp {
    width: 30%;
    flex-direction: column;
    align-items: flex-end;
}

.wjportal-resume-list {
    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;
    border: 1px solid var(--wpjp-border-color);
    position: relative;
    width: 100%;
}

.wjportal-resume-list-top-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
    border-radius: 10px;
}

.wjportal-resume-logo {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-resume-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: static;
    border-radius: 6px;
}

.wjportal-resume-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 80%;
    margin-bottom: 8px;
}

.wjportal-resume-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-weight: 500;
}

span.wjportal-resume-job-type {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
    color: white;
}

/* The CSS code for the icon */
.wjportal-resume-job-type::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-login-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-login-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-register-btn {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-register-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

span.wjportal-resume-name {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none !important;
}

span.wjportal-resume-name:hover {
    text-decoration: underline !important;
}

span.wjportal-resume-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-resume-data-text {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and title */

}

.wjportal-resume-right-wrp {
    width: 20%;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: flex-start;
}

span.wjportal-resume-status-heading {
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-secondary-color);
}

.wjportal-resume-listing-bottom-full-wrap {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.wjportal-resume-cnt-wrp {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 70%;
}

.wjportal-resume-list-btm-wrp {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

.wjportal-resume-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-featured-tag-icon-wrp .featurednew-onhover.wjportal-featured-hover-wrp {
    background: #e83030;
    color: #fff;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

.wjportal-resume-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

a.wjportal-resume-act-btn.wjportal-resume-act-btn-ai-suggested-jobs {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

a.wjportal-resume-act-btn.wjportal-resume-act-btn-ai-suggested-jobs:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

/* Style for the data title (e.g., "City:") */
.wjportal-resume-data-title {
    display: none;
}

/* Style for the data value */
.wjportal-resume-data-value {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

/* Base style for the icons */
.wjportal-resume-data-text::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    /* Prevents icon from shrinking */
    width: 18px;
    height: 18px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color */
    -webkit-mask-size: cover;
    mask-size: cover;
}


/* --- Individual Icons (Based on Order) --- */

/* Icon for the 1st item (City) */
.wjportal-resume-data-text:nth-of-type(1)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

/* Icon for the 2nd item (Desired Salary) */
.wjportal-resume-data-text:nth-of-type(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='12' y1='1' x2='12' y2='23'/%3e%3cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='12' y1='1' x2='12' y2='23'/%3e%3cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3e%3c/svg%3e");
}

/* Icon for the 3rd item (Experience) */
.wjportal-resume-data-text:nth-of-type(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3e%3cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3e%3cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3e%3c/svg%3e");
}

/* Icon for the 4th item (Category) */
.wjportal-resume-data-text:nth-of-type(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
}

a.wjportal-resume-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-resume-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

div.wjportal-job-applied-resume div.wjportal-section-heading {
    width: 100%;
    margin-bottom: 25px;
    font-size: var(--wpjp-second-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-applied-job-adv-search-field {
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
}

input#btnsubmit-search {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
}

input#btnsubmit-search:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-main-up-wrapper input#reset {
    background-color: var(--wpjp-border-color);
    color: var(--wpjp-secondary-color);
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
}

.wjportal-main-up-wrapper input#reset:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-applied-job-adv-search-action-wrp {
    text-align: center;
}

div#wpjobportal_appliedresume_tab_search {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color) !important;
    border: 1px solid var(--wpjp-border-color);
    padding: 30px;
    border-radius: 8px;
}

/* --- Dropdown Container --- */
.wjportal-resume-act-actions-dropdown {
    position: relative;
    display: flex;
    order: 5;
}

/* --- Dropdown Toggle Button --- */
.wjportal-resume-act-actions-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    font-family: inherit;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wjportal-resume-act-actions-dropdown-toggle span {
    transition: transform 0.2s ease-in-out;
}

.wjportal-resume-act-actions-dropdown-toggle:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* --- Dropdown Menu (Initially Hidden) --- */
.wjportal-resume-act-actions-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    position: absolute;
    right: 0;
    /* Align to the right of the button */
    top:auto;
    bottom: calc(100% + 6px);
    /* Position it right below the button */
    min-width: 220px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    z-index: 10;
    overflow: hidden;
    padding: 6px;
}

/* Show the menu when the container is focused */
.wjportal-resume-act-actions-dropdown:hover .wjportal-resume-act-actions-dropdown-menu,
.wjportal-resume-act-actions-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 99999;
}

div#job-applied-resume-wrapper.wjportal-job-applied-resume {
    position: relative;
    z-index: 10;
}

.wjportal-resume-act-actions-dropdown:focus-within .wjportal-resume-act-actions-dropdown-toggle span {
    transform: rotate(180deg);
}

.wjportal-resume-act-actions-dropdown:hover .wjportal-resume-act-actions-dropdown-toggle span {
    transform: rotate(180deg);
}

/* --- Styling for links inside the dropdown --- */
.wjportal-resume-act-actions-dropdown-menu .wjportal-resume-act-action-links {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.wjportal-resume-act-actions-dropdown-menu .wjportal-resume-act-action-links:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}

.wjportal-resume-act-actions-dropdown-menu .wjportal-resume-act-action-links svg {
    color: #6b7280;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

.wjportal-visitor-msg-btn-wrp input {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-visitor-msg-btn-wrp input:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-spam.action-links {
    order: 1;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-not-spam.action-links {
    order: 2;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-rejected.action-links {
    order: 3;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-hired.action-links {
    order: 4;
}

button.wjportal-resume-act-actions-dropdown-toggle {
    order: 5;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-view-profile {
    order: 6;
}


/* ----------------------------------------- */
/* == 15. Tabbed Navigation Actions        == */
/* ----------------------------------------- */

/* Main container for the tab list */
.wjportal-job-applied-resume-actions {
    margin: 50px 0 40px 0;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-job-applied-resume-actions ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Allows tabs to wrap on smaller screens */
    list-style: none;
    margin: 0 0 1.5rem 0;
    /* Adds space below the tabs */
    padding: 0;
    border-bottom: 1px solid var(--wpjp-border-color);
}

/* Individual list item */
.wjportal-job-applied-resume-actions li {
    margin: 0;
    padding: 0;
}

/* ----------------------------------------- */
/* ==  Resume Details              == */
/* ----------------------------------------- */

/* --- Main Layout --- */
.wjportal-resume-detail-wrapper {
    display: flex;
    flex-direction: column;
    /* Stack columns on small screens by default */
    gap: 24px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-detail-left-wrapper {
    flex: 0 0 320px;
    /* Fixed width for left column on larger screens */
    position: sticky;
    /* Sticky left column */
    top: 4.5rem;
    /* Adjust as needed for header height */
    align-self: flex-start;
    /* Prevent stretching */
    overflow: hidden;
    border-radius: 8px;

}

.wjportal-resume-detail-wrapper.wjportal-view-page-featured-flag .wjportal-personal-data {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    border: 1px solid #ffb63b;
}

.wjportal-resume-detail-wrapper .wjportal-resume-right-wrapper {
    flex: 1;
    min-width: 0;
    /* Prevent flex overflow */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Left Column Card --- */
.wjportal-resume-detail-wrapper .wjportal-resume-left-section {
    background-color: var(--wpjp-card-background);
    text-align: center;


}

.wjportal-resume-detail-wrapper .wjportal-resume-image img {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

.wjportal-resume-detail-wrapper .wjportal-personal-data {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 20px;
    margin-bottom: 24px;
    width: 100%;
    display: inline-block;
}

.wjportal-resume-detail-wrapper .wjportal-resume-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    margin-bottom: 10px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-info {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center info items */
    gap: 8px;
    font-size: calc(var(--wpjp-body-font-size) - 1px);
    /* Slightly smaller text */
    color: var(--wpjp-secondary-color);
    margin-bottom: 8px;
    word-break: break-all;
    /* Prevent long emails/numbers from overflowing */
    background-color: var(--wpjp-card-background);
}

/* --- Hide existing images --- */
.wjportal-resume-detail-wrapper .wjportal-resume-info-salary img,
.wjportal-resume-detail-wrapper .wjportal-resume-info-cell img,
.wjportal-resume-detail-wrapper .wjportal-resume-info-email-address img {
    display: none;
}

/* --- Common Icon Styles using ::before --- */

.wjportal-resume-detail-wrapper .wjportal-resume-info-salary::before,
.wjportal-resume-detail-wrapper .wjportal-resume-info-cell::before {
    content: '';
    display: inline-block;
    width: 1em;
    /* Icon size */
    height: 1em;
    /* Icon size */
    flex-shrink: 0;
    /* Prevent icon shrinking */

    /* Icon color and opacity */
    background-color: currentColor;
    /* Inherits text color */
    opacity: 0.7;
    /* Match previous icons */

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

/* Add the icon using ::before */
.wjportal-resume-detail-wrapper .wjportal-resume-info-email-address::before {
    content: '';
    display: inline-block;
    width: 1em;
    /* Match the size of other icons */
    height: 1em;
    /* Match the size of other icons */
    flex-shrink: 0;
    /* Prevent icon from shrinking */

    /* Color the icon using the current text color */
    background-color: currentColor;
    opacity: 0.7;
    /* Match the opacity of other icons */

    /* Email/Mail SVG Icon */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'%3E%3C/path%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* --- Specific Icons --- */
/* Salary Icon (Dollar Sign) */
.wjportal-resume-detail-wrapper .wjportal-resume-info-salary::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
}

/* Cell/Phone Icon */
.wjportal-resume-detail-wrapper .wjportal-resume-info-cell::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14z'%3E%3C/path%3E%3C/svg%3E");
}

/* Icons for left column info */
.wjportal-resume-detail-wrapper .wjportal-resume-info img {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}


/* --- Left Column Action Buttons --- */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-wrp {
    align-self: flex-start;
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    text-align: center;
    padding: 2rem;
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    transition: all 0.3s ease;
    cursor: pointer;
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-card-background);
    border-color: var(--wpjp-secondary-color);
}

a.downloadall.wjportal-resume-download-all-btn.wjportal-resume-adv-act-btn {
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
}

a.downloadall.wjportal-resume-download-all-btn.wjportal-resume-adv-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* Add Icons to Action Buttons */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Specific Icons */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-pdf::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9a1 1 0 11-2 0 1 1 0 012 0zm-3 5.5a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4zm3 0a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4zm3 0a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4z'%3E%3C/path%3E%3C/svg%3E");
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'%3E%3C/path%3E%3C/svg%3E");
    /* Using download icon for export */
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-print-resume::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'%3E%3C/path%3E%3C/svg%3E");
}

.wjportal-resume-detail-wrapper .wjportal-resume-download-all-btn::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 12l-5 5-5-5h3V4h4v8z'%3E%3C/path%3E%3Cpath d='M19 18H5v-2h14v2z'%3E%3C/path%3E%3C/svg%3E");
    /* Simpler download icon */
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-send-message-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');

}

/* --- Right Column Content --- */
.wjportal-resume-section-records-wrap {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 20px;
    margin-bottom: 24px;
    width: 100%;
}

.wjportal-resume-detail-wrapper .wjportal-resume-section-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wpjp-primary-color);
    margin-bottom: 16px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-inner-sec-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 20px;
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    padding: 10px;
    border-radius: 5px;
    padding-left: 2rem;
}

.wjportal-resume-detail-wrapper .resume-map {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
    margin-right: 10px;
    color: var(--wpjp-body-font-color);
}

/* Add top border to distinguish inner sections like Languages */
.wjportal-resume-detail-wrapper .wjportal-resume-right-wrapper .wjportal-resume-section-wrapper+.wjportal-resume-section-wrapper[data-section="languages"] {
    border-top: 1px dashed var(--wpjp-border-color);
    border-radius: 0;
    box-shadow: none;
    padding: 15px 20px;
    margin-bottom: 0;
}

.wjportal-resume-detail-wrapper .wjportal-resume-inner-sec-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Wrap dates if needed */
    gap: 10px;
}

.wjportal-resume-detail-wrapper .wpjp-resume-employer-dates {
    font-size: 14px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    background-color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-resume-detail-wrapper .wjportal-resume-section-wrapper.-resumedetail-sec-data {
    padding: 0 !important;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-row {
    gap: 16px;
    margin-bottom: 16px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-row:last-child {
    margin-bottom: 0;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-data {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    line-height: 1.6;
    display: flex;
    width: 100%;
    padding: 15px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-data-title {
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 4px;
    display: flex;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-data-value {
    word-break: break-word;
    /* Prevent overflow */
}

/* File Attachments */
.wjportal-resume-detail-wrapper .wjportal-resume-attachments-wrp .wjportal-resume-sec-data-value {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachments-wrp .wjportal-resume-sec-data-value a.file {

    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachments-wrp .wjportal-resume-sec-data-value a.file:hover {
    background-color: var(--wpjp-primary-color);
    border-color: var(--wpjp-primary-color);
    color: white;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachment-filename {
    font-weight: 500;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachment-file-download {
    width: 16px;
    height: 16px;

}

/* Map Section */
.wjportal-resume-detail-wrapper .resume-map .row-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    cursor: pointer;
}

.wjportal-resume-detail-wrapper .resume-map .row-title img {
    width: 25px;
    height: 25px;
    order: 2;
    background: aliceblue;
}

.wjportal-resume-detail-wrapper .resume-map .map {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--wpjp-border-color);
}

/* --- Responsive Layout --- */
@media (min-width: 992px) {
    .wjportal-resume-detail-wrapper {
        flex-direction: row;
        /* Side-by-side columns on large screens */
        align-items: flex-start;
        /* Align columns to the top */
    }

    .wjportal-resume-detail-wrapper .wjportal-resume-sec-row:not(.wjportal-resume-row-full-width):not(.wjportal-resume-attachments-wrp) {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 991px) {

    /* Un-stick the left column when it's stacked */
    .wjportal-resume-detail-wrapper .wjportal-resume-detail-left-wrapper {
        position: static;
        flex-basis: auto;
        /* Allow it to take full width */
    }
}


/* ----------------------------------------- */
/* ==  Resume Details---              == */
/* ----------------------------------------- */



.wjportal-custom-field.wjportal-resume-sec-data {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
    margin-right: 10px;
    color: var(--wpjp-body-font-color);
}

.wjportal-custom-field-tit.wjportal-resume-sec-data-title {
    float: left;
    font-weight: 500;
}

.wjportal-custom-field-val.wjportal-resume-sec-data-value {
    float: left;
    margin-left: 8px;
    /*width: calc(100% - 20% - 8px);*/
    width: calc(100% - 32% - 10px);
}

.wjportal-resume-info {
    float: left;
    margin: 5px 15px 5px 0;
    font-size: var(--wpjp-body-font-size);
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 1rem 1rem;
    border-radius: 5px;
    font-weight: 500;
}

.wjportal-resume-adv-act-wrp {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.wjportal-resume-detail-wrapper a.wjportal-resume-adv-act-btn {
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 8px;
    /*padding: 12px 40px;*/
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    flex-wrap: wrap;
    justify-content: center;
}

a.downloadall.wjportal-resume-download-all-btn.wjportal-resume-adv-act-btn {
    order: 1;
}

a.wjportal-resume-adv-act-btn.wjportal-list-act-btn-pdf {
    order: 2;
}

a.wjportal-resume-adv-act-btn.wjportal-list-act-btn-print-resume {
    order: 3;
}

a.wjportal-resume-adv-act-btn {
    order: 4;
}

a.wjportal-resume-adv-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* ----------------------------------------- */
/* == Folders         == */
/* ----------------------------------------- */

.wjportal-folder-list {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    margin-bottom: 3rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wjportal-folder-cnt-wrp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    flex-wrap: wrap;
}

.wjportal-folder-middle-wrp {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 75%;
}

.wjportal-folder-title {
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-folder-data {
    display: flex;
    align-items: center;
    gap: 2em;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding: 5px 0;
}

.wjportal-folder-info-data {
    padding-bottom: 5px;
}

/* Container for "Resumes" and Date */
.wjportal-folder-data:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

}

.wjportal-folder-info-tit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

/* Icons for Resume Count and Date */
.wjportal-folder-info-tit::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Resume Icon */
.wjportal-folder-info-data:nth-child(1) .wjportal-folder-info-tit::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
}

/* Date Icon */
.wjportal-folder-info-data:nth-child(2) .wjportal-folder-info-tit::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}

span.wjportal-folder-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

.wjportal-folder-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}


input.wjportal-form-wrp.wjportal-resume-form-btn-primary.wjportal-form-btn.wjportal-form-save-btn {
    font-size: var(--wpjp-body-font-size);
    background-color: var(--wpjp-primary-color);
    border: 1px solid var(--wpjp-primary-color);
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: unset;

    transition: unset;

}

input.wjportal-form-wrp.wjportal-resume-form-btn-primary.wjportal-form-btn.wjportal-form-save-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}

.wjportal-folder-list-btm-wrp {
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
    background-color: var(--background-color);
    width: 100%;
}

/* --- Action Buttons --- */
.wjportal-folder-action-wrp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: end;
}

.wjportal-folder-act-btn {
    font-weight: 500;
    border: 1px solid var(--wpjp-border-color);
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);

}

.wjportal-folder-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* Base style for all button icons */

a.wjportal-folder-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

/* Special styling for "Resume" button (primary action) */
.wjportal-folder-act-resume-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-folder-act-resume-btn:hover,
.wjportal-folder-act-btn.wjportal-folder-act-resume-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-folder-act-btn.wjportal-folder-act-resume-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* ----------------------------------------- */
/* == View Folders         == */
/* ----------------------------------------- */

.wjportal-folderdetail-wrapper {
    display: flex;
    flex-wrap: wrap;
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 16px 20px;
}

.wjportal-folder-data-wrp {
    width: 100%;
}

span.wjportal-folder-data-tit {
    display: none;
}

.wjportal-folder-sec-title {
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    width: 100%;
}

.wjportal-folder-desc p {
    width: 100%;
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color);
}

/* ----------------------------------------- */
/* ==  Departments             == */
/* ----------------------------------------- */

/* --- Main Card Layout --- */
.wjportal-department-list {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    /* Modern rounded corners */
    box-shadow: var(--wpjp-card-shadow);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    margin-bottom: 3rem;
    overflow: hidden;
    /* Ensures child elements respect the border radius */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wjportal-department-list:hover {
    box-shadow: var(--wpjp-card-hover-shadow);
    transform: translateY(-5px);
    /* Subtle lift effect on hover */
}

/* --- Top Content Section --- */
.wjportal-department-cnt-wrp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;

    flex-wrap: wrap;
}

.wjportal-department-middle-wrp {
    flex-grow: 1;
    /* Allows this section to take up available space */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 75%;
}

.wjportal-department-right-wrp {}

.wjportal-department-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

/* --- Typography and Content Styling --- */
.wjportal-department-title {
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    /* Using the dark color for the title */
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-department-data {
    display: grid;
}

.wjportal-department-data:last-child {
    margin-bottom: 0;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-department-info-data {
    display: inline-block;
    /* Aligns company and date side-by-side */
    margin-right: 1rem;
    font-size: var(--wpjp-body-font-size);
    color: #6c757d;
    padding: 3px 0;
}

/* Optional: To ensure perfect vertical alignment */
.wjportal-department-info-tit {
    display: inline-flex;
    align-items: center;

}

span.wjportal-department-info-tit {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-department-info-tit {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-department-info-tit::before {
    content: '';
    display: block;
    width: 1.1em;
    height: 1.1em;

    /* The icon's color will match the text color above */
    background-color: currentColor;

    /* -- Calendar Icon SVG Mask -- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");

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



a.wjportal-companyname {
    color: var(--wpjp-primary-color);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;

}

.wjportal-companyname:hover {
    color: var(--wpjp-secondary-color);
}

.wjportal-department-desc p {
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color);
    line-height: 1.6;
    margin: 0;

    /* Modern line-clamping to truncate long text */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* Shows a maximum of 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Status Badge --- */
.wjportal-department-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

/* --- Bottom Action Bar --- */
.wjportal-department-list-btm-wrp {
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
    background-color: var(--background-color);
}

.wjportal-department-action-wrp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Space between buttons */
    flex-wrap: wrap;
    justify-content: end;
}

.wjportal-department-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-department-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-department-act-btn.wjportal-list-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-department-act-btn.wjportal-list-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* ----------------------------------------- */
/* == View Departments Detail            == */
/* ----------------------------------------- */

.wjportal-departmentdetail-wrapper {
    display: flex;
    flex-wrap: wrap;
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 16px 20px;
}

.wjportal-department-data-wrp {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding-top: 5px;
}

.wjportal-department-sec-title {
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;

}

span.wjportal-department-data-tit {
    display: none;
}

.wjportal-department-data:last-child {
    margin-bottom: 0;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding: 3px 0;
}

.wjportal-departmentdetail-wrapper .wjportal-department-desc p {
    display: flex;
    flex-wrap: wrap;
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;

}

/* ----------------------------------------- */
/* == Cover Letter Button         == */
/* ----------------------------------------- */

span.wjportal-no-coverletter-btn {
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0px 16px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
    border: 1px solid var(--wpjp-border-color);
    background-color: var(--wpjp-card-background);
}


/* Main style for the "View Cover Letter" button */
.wjportal-coverletter-act-btn {
    /* Button Appearance */
    background-color: #fff;
    color: var(--wpjp-secondary-color);
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--wpjp-border-color);
    /* Layout for Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);
    margin-top: 5px;

}

.wjportal-coverletter-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

/* The ::before pseudo-element creates the icon */
.wjportal-coverletter-act-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    /* Icon color will be white */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for a document/file icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' 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%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' 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%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
}

/* Styling for each tab link */
.wjportal-job-applied-resume-actions li a {
    display: block;
    padding: 10px 15px;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    /* Overlaps the container's border for a seamless look */
    transition: color 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--wpjp-border-color);
    background: #fafafa;
    border-radius: 6px 6px 0 0;
}

/* Hover state for inactive tabs */
.wjportal-job-applied-resume-actions li a:not(.selected):hover {
    color: var(--wpjp-body-font-color);
}

.wjportal-job-applied-resume-actions li a:hover {
    color: #fff !important;
    background-color: var(--wpjp-secondary-color);
}

/* Active tab styling */
.wjportal-job-applied-resume-actions li a.selected {
    color: var(--wpjp-primary-color);
    font-weight: 600;
    border-bottom-color: var(--wpjp-primary-color);
}

/* Styling for the "Export All" button */
.wjportal-export-all-btn {
    /* Pushes the button to the far right */
    margin-left: auto;
    /* Button appearance */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 6px 6px 0 0;
    color: var(--wpjp-body-font-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.wjportal-export-all-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-export-all-btn svg {
    width: 1em;
    height: 1em;
}

.wjportal-coverletter-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

/* ----------------------------------------- */
/* == Responsive for Tabs                  == */
/* ----------------------------------------- */

@media (max-width: 768px) {
    .wjportal-job-applied-resume-actions ul {
        flex-direction: column;
        /* Stack tabs vertically */
        align-items: stretch;
        /* Make tabs full-width */
        border-bottom: none;
    }

    .wjportal-job-applied-resume-actions li {
        width: 100%;
        border-bottom: 1px solid var(--wpjp-border-color);
    }

    .wjportal-job-applied-resume-actions li a {
        border-bottom: none;
        /* Remove bottom border indicator */
        margin-bottom: 0;
    }

    .wjportal-job-applied-resume-actions li a.selected {
        background-color: #f0f5fc;
        /* Light blue background for active mobile tab */
    }

    .wjportal-export-all-btn {
        margin-left: 0;
        margin-top: 1rem;
        justify-content: center;
    }
}

/* --- Popup Overlay / Backdrop --- */
/* This creates the dark, semi-transparent background behind the popup */
.wjportal-main-up-wrapper #popup-main-outer.sendmessage {
    position: fixed;
    /* Cover the entire screen */
    backdrop-filter: blur(4px);
    /* Modern blur effect */
    display: flex;
    /* Center the popup vertically and horizontally */
    align-items: center;
    justify-content: center;
}

.wjportal-main-up-wrapper #popup-main-outer.sendmessage #popup-main {
    width: 100%;
}

/* --- Form Fields & Inputs --- */
.wjportal-popup-contentarea .wjportal-popup-field-wrp {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

*/ div#wjportal-listpopup .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-popup-cnt {
    height: 50% !important;
}

.wjportal-form-wrp.wjportal-search-job-form .wjportal-form-row {
    width: 100%;
}

/* Style for the text input box */
.wjportal-popup-field .inputbox {
    width: 100%;
    padding: 12px 15px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wjportal-popup-field .inputbox::placeholder {
    color: #a0a0a0;
}

/* Highlight effect when the input is focused */
.wjportal-popup-field .inputbox:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.15);
}

/* --- Rich Text Editor Styling --- */
/* Basic styling to make the WordPress editor fit the design */
#wp-jobseekermessage-wrap {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Highlight the whole editor when it's in focus */
#wp-jobseekermessage-wrap:focus-within {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.15);
}

#wp-jobseekermessage-editor-container {
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-main-up-wrapper .wjportal-filter-search-field-wrp ul.wpjobportal-input-list-wpjobportal,
.wjportal-main-up-wrapper .wjportal-form-value ul.wpjobportal-input-list-wpjobportal {
    margin: 0;
    width: 100%;
    overflow-x: auto;
    position: relative;
    display: flex;
    padding: 0;
    height: 55px !important;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: inherit !important;
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal li {
    display: flex;
    align-items: center;
    min-width: fit-content;
    margin: 3px;
    background-color: transparent;
}

li.wpjobportal-input-token-wpjobportal span {
    font-size: var(--wpjp-body-font-size);
}

div.wpjobportal-input-dropdown-wpjobportal {
    font-family: inherit !important;
    color: var(--wpjp-body-font-color) !important;
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal li p {
    margin: 0;
    background-color: transparent;
}


/* --- Hover Effect --- */
/* Simply change the background color to change the icon color */
#wjportal-popup-close-btn:hover {
    background-color: var(--wpjp-primary-color);
    border-radius: 50%;
}

/* ----------------------------------------- */
/* == 2. Company List Page Styles              == */
/* ----------------------------------------- */

.wjportal-company-list {
    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;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wjportal-company-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

.wjportal-company-list-top-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    gap: 10px;
    width: 100%;
}

.wjportal-company-list-wrapper.wjportal-my-company-wrp {
    width: 100%;
}

.wjportal-jobs-logo {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-company-logo {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-company-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.wjportal-company-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

span.wjportal-company-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

span.wjportal-company-title a:hover {
    text-decoration: underline !important;
}

.wjportal-company-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-weight: 500;
    width: 100%;
    font-size: var(--wpjp-body-font-size);

}

span.wjportal-company-data-value {
    color: var(---wpjp-body-font-color);
}

.wjportal-company-listing-data-description {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

.wjportal-company-list-btm-wrp {
    justify-content: flex-end;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

.wjportal-company-action-wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
    align-items: center;
    gap: 1rem;
}

a.wjportal-company-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    padding: 10px 15px;

}

a.wjportal-company-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    text-decoration: none;
}

.wjportal-company-act-btn.wjportal-company-list-view-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

.wjportal-company-act-btn.wjportal-company-list-view-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}


.wjportal-payment-action-wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
    gap: 1rem;
}

span.wjportal-company-data-title {
    display: none;
}

.wjportal-company-data-wrp .wjportal-company-data .wjportal-company-data-tit {
    /*    color: var(--wpjp-secondary-color);*/
    font-weight: 500;
}

/* --- Company Data Item Base Styles --- */
.wjportal-company-data-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-company-data-text.wjportal-company-data-text-created span.wjportal-company-data-title,
.wjportal-company-data-text.wjportal-company-data-location span.wjportal-company-data-title,
.wjportal-company-data-text.wjportal-company-data-status span.wjportal-company-data-title {
    display: none;
}

/* --- Common Icon Styles using ::before --- */
.wjportal-company-data-text-created::before,
.wjportal-company-data-status::before,
.wjportal-company-data-location::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    background-color: currentColor;
    /* Inherits text color */
    opacity: 0.7;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* --- Specific Icons --- */

/* Created Icon (Calendar/Clock) */
.wjportal-company-data-text-created::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'%3E%3C/path%3E%3Cpath d='M13 7h-2v6l5.25 3.15.75-1.23-4-2.42V7z'%3E%3C/path%3E%3C/svg%3E");
    /* Clock Icon */
}

/* Status Icon (Check Circle for Approved, could add others for different statuses) */
.wjportal-company-data-status::before {
    /* Default Icon (e.g., Info) */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM11 11h2v6h-2zm0-4h2v2h-2z'%3E%3C/path%3E%3C/svg%3E");
    /* Info Icon */
}


/* Location Icon (Map Pin) */
.wjportal-company-data-location::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

/* --- Optional: Align Title and Value Vertically --- */
/* This helps if the value wraps to multiple lines */
.wjportal-company-data-text .wjportal-company-data-title,
.wjportal-company-data-text .wjportal-company-data-value {
    display: inline-block;
    /* Or block depending on desired wrap behavior */
    vertical-align: top;
    /* Align to the top */
}

.wjportal-company-data-text .wjportal-company-data-title {
    font-weight: 600;
    /* Make title bold */
    color: var(--wpjp-secondary-color);
    /* Darker title */
    margin-right: 4px;
    /* Small space after title */
}

.wjportal-company-act-btn {
    /* Layout & Alignment */
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */

    /* Appearance */
    background-color: var(--primary-button-bg);
    color: var(--primary-button-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #ced4da;

    /* Effects */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* --- Button Container --- */
.wjportal-company-action-wrp {
    display: flex;
    gap: 0.75rem;
    /* Adds space between buttons */
}

/* --- General Button Styling --- */
.wjportal-company-act-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    color: #333;
    background-color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wjportal-company-act-btn:hover {
    background-color: #f5f5f5;
}



/* ----------------------------------------- */
/* --- Main Success Message Container --- */
/* ----------------------------------------- */

/* --- Main Alert Styling --- */
.wjportal-main-up-wrapper .frontend.updated {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 1rem 0;
    font-size: var(--wpjp-body-font-size);
    color: #2e7d32;
    background-color: #e8f5e9;

    border-radius: 8px;
    border-left: 5px solid #4caf50;
    /* Accent border color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    width: 100%;

    /* Adds a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

.wjportal-main-up-wrapper .frontend.updated p {
    background-color: transparent;
}

/* --- Icon using ::before pseudo-element --- */
.wjportal-main-up-wrapper .frontend.updated::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;

    /* Icon color is inherited from the parent's text color */
    background-color: currentColor;

    /* SVG Checkmark-in-a-circle icon */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Paragraph Styling --- */
.wjportal-main-up-wrapper .frontend.updated p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/* --- Animation Keyframes --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------- */
/* --- Apply to job message  --- */
/* ----------------------------------------- */
/* --- Job Apply Message Styling --- */

/* Main wrapper for the message box */
.job-detail-jobapply-message-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
    background-color: #FFFBEB;
    border: 1px solid #FEF3C7;

}

/* The message part with icon and text */
.job-detail-jobapply-message-msg {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #92400E;
    font-weight: 500;
}

.job-detail-jobapply-message-msg img {
    width: 24px;
    height: 24px;
}

/* --- Link/Button Styling with Icon --- */

/* The "Add Resume" link styled as a button */
.job-detail-jobapply-message-link {
    display: inline-flex;
    /* Use flexbox for easy icon alignment */
    align-items: center;
    /* Vertically center icon and text */
    gap: 0.5em;
    /* Space between icon and text */
    padding: 0.6rem 1.2rem;
    background-color: #D97706;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

.job-detail-jobapply-message-link:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* This adds the icon BEFORE the text */
.job-detail-jobapply-message-link::before {
    content: '';
    /* Required for pseudo-elements */
    display: block;
    width: 1.1em;
    /* Icon size relative to font size */
    height: 1.1em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG icon shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* ---------------------------------------- */
/* --- Main Errors Message Container --- */
/* ----------------------------------------- */
/* --- Modern Message Design --- */
.wjportal-visitor-msg {
    /* Layout & Box Model */
    display: inline-flex;
    /* Aligns icon and text nicely */
    align-items: center;
    gap: 10px;
    /* Space between the icon and the text */
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #facc15;
    /* Warning color border */
    width: 100%;
    /* Colors & Typography */
    background-color: #fffbeb;
    /* Light yellow background for warning */
    color: #854d0e;
    /* Darker yellow/brown text for readability */
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;

    /* Effects */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    animation: slideDownFade 0.4s ease-out;
}

/* --- SVG Icon Implementation --- */
/* Creates a virtual element before the text to hold our icon */
.wjportal-visitor-msg::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking if text wraps */
    width: 20px;
    height: 20px;

    /* The icon's color is inherited from the text color (#854d0e) */
    background-color: currentColor;

    /* The SVG shape is applied as a mask */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
}

/* --- Animation for appearing --- */
@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------- */
/* --- Main Errors Message Container --- */
/* ----------------------------------------- */


/* --- Main Error Alert Styling --- */
.wjportal-main-up-wrapper .frontend.error {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 1rem 0;
    width: 100%;
    color: #c62828;
    /* Dark red text/icon color */
    background-color: #ffdfe2;
    /* Light red background */

    border-radius: 8px;
    border-left: 5px solid #d32f2f;
    /* Accent border color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    /* Adds a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

/* --- Icon using ::before pseudo-element --- */
.wjportal-main-up-wrapper .frontend.error::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;

    /* Icon color is inherited from the parent's text color */
    background-color: currentColor;

    /* SVG Error X-in-a-circle icon */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Paragraph Styling --- */
.wjportal-main-up-wrapper .frontend.error p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    background-color: transparent;
}

/* --- Animation Keyframes (can be reused) --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------- */
/* --- Main Info Message --- */
/* ----------------------------------------- */
/* --- Main Info Alert Styling --- */
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 1rem 0;
    margin-bottom: 20px;
    color: #0d47a1;
    /* Dark blue text/icon color */
    background-color: #e3f2fd;
    /* Light blue background */

    border-radius: 8px;
    border-left: 5px solid #1976d2;
    /* Accent border color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    font-size: 16px;
    font-weight: 500;

    /* Adds a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

/* --- Hide the old PNG image --- */
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message img {
    display: none;
}

/* --- Icon using ::before pseudo-element --- */
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;

    /* Icon color is inherited from the parent's text color */
    background-color: currentColor;

    /* SVG Info "i"-in-a-circle icon */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Animation Keyframes (can be reused) --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------- */
/* == Company Detail           == */
/* ----------------------------------------- */

.wjportal-companyinfo-wrp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-weight: 500;
    width: 100%;
    padding-top: 10px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-companydetail-wrapper.wjportal-view-page-featured-flag .wjportal-company-wrp {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    border: 1px solid #ffb63b !important;
}

.wjportal-company-wrp {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    margin-bottom: 25px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 24px;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    background-color: white;
    overflow: hidden;
    position: relative;
}

.wjportal-companyinfo-middle-wrap {
    display: flex;
    flex-direction: column;
    width: 55%;
    margin-bottom: 8px;
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.wjportal-companyinfo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-main-up-wrapper span.wjportal-companyinfo-data{
    font-size: var(--wpjp-body-font-size);
}
.wjportal-companydetail-wrapper.wjportal-view-page-featured-flag .wjportal-companyinfo {
    color: var(--wpjp-secondary-color);
}

.wjportal-companyinfo img {
    display: none;
}

.wjportal-company-data-wrp {
    width: 100%;
    display: flex;
    margin-bottom: 25px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 24px;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    background-color: white;
}

.wjportal-company-sec-title {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    font-size: var(--wpjp-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wpjp-primary-color);
}

.wjportal-companyinfo-link,
.wjportal-companyinfo-data {
    align-items: center;
    display: flex;
    gap: 10px;
}

a.wjportal-companyinfo-link {
    color: var(--wpjp-primary-color);
}

a.wjportal-companyinfo-link:hover {
    color: var(--wpjp-secondary-color);
}

/*
.wjportal-companyinfo-right-wrap{
 text-align: right;
    width: 25%;
}*/
/* --- Base Button Style --- */
.wjportal-show-contact-det-btn,
.wjportal-main-up-wrapper input#jsre_featured_button {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 10px;
    /* Space between icon and text */

    /* Appearance */
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* --- Hover Effect --- */
.wjportal-show-contact-det-btn:hover,
.wjportal-main-up-wrapper input#jsre_featured_button:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}


/* --- Icon Implementation --- */
.wjportal-show-contact-det-btn::before,
.wjportal-main-up-wrapper input#jsre_featured_button::before {
    content: '';
    display: inline-block;
    width: 20px;
    /* Icon size */
    height: 20px;
    /* Icon size */

    /* This uses the button's text color to color the SVG icon */
    background-color: currentColor;

    /* The SVG icon shape is applied as a mask */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.wjportal-companydetail-wrapper .wjportal-company-data,
.wjportal-company-data-wrp .wjportal-custom-field {
    float: left;
    width: calc(100% / 2 - 20px);
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wjportal-company-desc {
    display: flex;
    width: 100%;
}

.wjportal-company-data-wrp .wjportal-custom-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    width: 100%;
}

.wjportal-company-data-wrp .wjportal-company-data {
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    width: 100%;
}

.wjportal-companyinfo-social-links-wrapper {
    font-size: 25px;
}

a.wjportal-companyinfo-social-link {
    display: inline-flex;
    align-items: center;
    padding: 15px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    justify-content: center;
    background-color: #fff;
    color: var(--wpjp-secondary-color);
}

a.wjportal-companyinfo-social-link:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-company-btn-wrp {
    display: flex;
    width: 100%;
    justify-content: center;
}

.wjportal-company-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-popup-wrp.wjportal-packages-popup .wjportal-pkg-item.wjportal-pkg-selected {
    border: 1px solid var(--wpjp-primary-color) !important;
}

/* ----------------------------------------- */
/* ==Login Form Design          == */
/* ----------------------------------------- */

/* --- This is the key part --- */
/* We style each <p> tag as a form row */
.wjportal-main-up-wrapper #loginform-custom p {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
    width: 100%;
}

.wjportal-main-up-wrapper #loginform-custom p:last-child {
    border-bottom: none;
}

/* Style the labels */
.wjportal-main-up-wrapper #loginform-custom label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-main-up-wrapper #loginform-custom p .login-remember {
    width: 100%;
    align-items: flex-start;
    display: grid;
    grid-template-columns: 200px 1fr;
}

/* Add the purple asterisk like in the image */
.wjportal-main-up-wrapper #loginform-custom .login-username label::after,
.wjportal-main-up-wrapper #loginform-custom .login-password label::after {
    content: ' *';
    color: #6742f5;
    font-weight: 600;
}

/* Style the input fields */
.wjportal-main-up-wrapper #loginform-custom .input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    background-color: #f8f9fa;
    /* Light gray from image */
    font-size: var(--wpjp-body-font-size);
    box-sizing: border-box;
    /* Important for padding */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wjportal-main-up-wrapper #loginform-custom .input:focus {
    outline: none;
    border-color: #6742f5;
    box-shadow: 0 0 0 3px rgba(103, 66, 245, 0.1);
}

/* --- Handle the special rows --- */

/* "Keep me login" row */
.wjportal-main-up-wrapper #loginform-custom .login-remember {
    /* Override the grid to be a single column */
    grid-template-columns: 1fr;
    background-color: #fdfdfd;
    margin-bottom: 0;
    border-bottom: unset;
    margin-top: 0;
}

.wjportal-main-up-wrapper #loginform-custom .login-remember label {
    display: flex;
    align-items: center;
    font-size: var(--wpjp-body-font-size);
    font-weight: 400;
    color: var(--wpjp-body-font-color);
    cursor: pointer;
    margin-top: 0;
    padding-top: 0;
}

.wjportal-main-up-wrapper #loginform-custom .login-remember input {
    margin-right: 0.5rem;
    width: 16px;
    height: 16px;
}

/* "Login" button row */
.wjportal-main-up-wrapper #loginform-custom .login-submit {
    /* Override grid to be single column */
    grid-template-columns: 1fr;
    padding: 1.5rem 2rem;
    border-bottom: unset;

}

a.wjportal-form-add-comp {
    border: 1px solid var(--wpjp-border-color);
    padding: 5px 20px;
    border-radius: 5px;
    background-color: var(--wpjp-background-color);
    color: var(--wpjp-secondary-color);
}

a.wjportal-form-add-comp :hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-error-messages-wrp {
    width: 100%;
}

.wjportal-main-up-wrapper #loginform-custom #wp-submit {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #6742f5;
    /* Modern purple/blue */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.wjportal-main-up-wrapper #loginform-custom #wp-submit:hover {
    background-color: #5a38d1;
}

.wjportal-main-up-wrapper #loginform-custom #wp-submit:active {
    transform: scale(0.99);
}

/* "Lost your password?" link */
#loginform-custom .wjportal-form-lost-password {
    display: block;
    /* Make it a block element */
    padding: 1.5rem 2rem;
    text-align: center;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    text-decoration: none;
    border-bottom: none;
    /* Remove duplicate border */
    transition: color 0.2s ease;
}

#loginform-custom .wjportal-form-lost-password:hover {
    text-decoration: underline;
    color: #5a38d1;
}

/* --- Responsive behavior for mobile --- */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper #loginform-custom p {
        /* Stack label and input on top of each other */
        grid-template-columns: 1fr;
        gap: 0.75rem;
        /* Smaller gap */
        padding: 1.25rem 1.5rem;
    }

    .wjportal-main-up-wrapper #loginform-custom label {
        /* Ensure label isn't centered */
        text-align: left;
    }
}





/* ----------------------------------------- */
/* == Form Design          == */
/* ----------------------------------------- */
div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section {
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section img.wjportal-resume-section-delete {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section div.wjportal-resume-section-undo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 99999;
    display: none;
    background: #fff;
    opacity: 0.8;
}

.jsundo.wjportal-resume-section-undo img {
    vertical-align: middle;
}

div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section div.wjportal-resume-section-undo img.wjportal-resume-section-undo-image {
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}

.section_wrapper.form.wjportal-resume-section.jssection_wrapper.jssection_skills_0 .wjportal-form-row {
    border-bottom: 0;
}

/* --- Form Row Layout (Grid-based) --- */
.wjportal-form-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
    width: 100%;
}

.wjportal-form-title {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-form-title font {
    color: var(--wpjp-primary-color);
    margin-left: 4px;
    font-weight: bold;
}

/* --- Unified Input Styling --- */
.wjportal-main-up-wrapper .wjportal-form-input-field,
.wjportal-main-up-wrapper .wjportal-form-select-field,
.wjportal-main-up-wrapper .wjportal-form-textarea-field,
.wpjobportal-input-list-wpjobportal .wjportal-main-up-wrapper .chosen-container-multi .chosen-choices {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 55px;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container-multi .chosen-choices {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    border: 1px solid var(--wpjp-border-color) !important;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 55px !important;
    display: flex;
    align-items: center;
    border: 1px solid;
    flex-wrap: wrap;
    padding: 10px;
}

.wjportal-form-value .chosen-container-multi .chosen-choices li.search-choice {
    width: fit-content;
}

.wjportal-form-value .chosen-container-multi .chosen-choices input {
    height: 25px !important;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container-multi .chosen-choices li.search-field input[type=text] {
    font-family: inherit !important;
    color: var(--wpjp-body-font-color) !important;
}

/* Focus State for all inputs */
.wjportal-form-input-field:focus,
.wjportal-form-select-field:focus,
.wjportal-form-textarea-field:focus,
.wjportal-main-up-wrapper .chosen-container-multi .chosen-choices:focus,
.wpjobportal-input-list-wpjobportal:focus-within {
    outline: none;
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

.wjportal-form-value .chosen-container .chosen-results li,
.wjportal-form-value .chosen-container-multi .chosen-choices li.search-choice {
    line-height: inherit !important;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container .chosen-results li.active-result {
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color) !important;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container .chosen-results li.active-result:hover {
    color: #fff !important;
}

.wjportal-form-value .chosen-container .chosen-results li.highlighted {
    color: #fff !important;
}

.wjportal-form-value .chosen-container-multi .chosen-drop .result-selected {
    font-size: var(--wpjp-body-font-size) !important;

}

/* Select field custom arrow */
.wjportal-main-up-wrapper .wjportal-form-select-field,
.wjportal-main-up-wrapper .wjportal-form-value .chosen-container-multi .chosen-choices {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23656575'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 1.5em;
    padding-right: 40px;
}

.wjportal-form-inner-fields {
    margin: 10px 0;
}

.wjportal-main-up-wrapper .wjportal-form-inner-fields .anchor.map-link.wjportal-form-map-link {
    margin-top: 10px;
}

/* --- Specific Field Group Styling --- */
.wjportal-form-5-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* .wjportal-form-inner-fields {
     margin-top: 20px;
} */
.wjportal-main-up-wrapper .wjportal-form-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    background-color: var(--background-color);
}

/* Rich Text Editor & Map */
.wjportal-main-up-wrapper #wp-description-wrap,
.wjportal-main-up-wrapper .wjportal-form-map {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#wp-description-wrap:focus-within {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

/* --- Custom Radio Buttons --- */
.wjportal-form-email-field-wrp {
    padding: 0 26px 30px 10px;
}

.wpjobportal-form-radio-field input[type="radio"] {
    opacity: 0;
    position: absolute;
}

.wpjobportal-form-radio-field label {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    font-weight: 500;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-form-radio-field label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.2s ease;
    margin-left: 10px;
}

.wpjobportal-form-radio-field label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--wpjp-primary-color);
    transition: transform 0.2s ease;
    margin-left: 10px;
}

.wjportal-main-up-wrapper label#forselected_payment_method {
    background: #fff;
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label::before {
    border-color: var(--wpjp-primary-color);
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label::after {
    transform: translateY(-50%) scale(1);
}

.wjportal-form-email-field-txt {
    font-size: 15px;
    color: var(--wpjp-body-font-color);
    padding-left: 5px;
    padding-top: 10px;
}

a.resume_submits.cancel.wjportal-form-wrp.wjportal-resume-form.wjportal-form-btn.wjportal-form-cancel-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
}

a.resume_submits.cancel.wjportal-form-wrp.wjportal-resume-form.wjportal-form-btn.wjportal-form-cancel-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #ffffff !important;
}

.wpjobportal-terms-and-conditions-wrap,
.wpjobportal-terms-and-conditions-wrap .js-col-md-12.js-form-value {
    border-radius: 8px !important;
    height: 55px !important;
    color: var(--wpjp-body-font-color) !important;
    border: 1px solid var(--wpjp-border-color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background-color: var(--background-color);
}

.wpjp-resume-section-button .wpjobportal-terms-and-conditions-wrap .js-col-md-12.js-form-value {
    margin-bottom: 0px;

    height: unset;
    color: var(--wpjp-body-font-color) !important;
    border: 0px;
    padding: 0px;
    padding-left: 0;
}

/* --- Info/Link Icon Styling --- */
.wpjobportal-terms-and-conditions-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

.wpjobportal-terms-and-conditions-wrap a:hover {
    background-color: var(--wpjp-primary-color);
    color: white;
    border-color: var(--wpjp-primary-color);
    transform: scale(1.1);
}

/* --- Hide the default checkbox and the old image --- */
.wpjobportal-terms-and-conditions-wrap img {
    display: none;
}

/* The "i" info icon */
.wpjobportal-terms-and-conditions-wrap a::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: currentColor;
    /* Inherits color from parent 'a' tag */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    mask-size: contain;
}

.wjportal-form-wrp.wjportal-job-alert-form .wjportal-form-row.wjportal-form-captcha {
    border-bottom: none;
    margin-bottom: 0;
}

span.wpjobportal-form-chkbox-field label {
    margin: 0;
}

.wjportal-main-up-wrapper span.wpjobportal-form-chkbox-field {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
}

.wjportal-main-up-wrapper div#input-text-joblink {
    width: 100%;
    display: none;
}

.wpjobportal-terms-and-conditions-wrap .wpjobportal-form-chkbox-field {
    border: unset;
    width: unset;
    padding-left: 0;
}

.wpjobportal-terms-and-conditions-wrap .wpjobportal-form-chkbox-field label {
    margin-bottom: unset;
}

.checkbox-field.wpjp-form-value.wjportal-searchable-wrp span.wpjobportal-form-chkbox-field {
    padding-top: 5px !important;
    padding: 0px;
    border: 0px;
}

/* --- Save Button --- */
.wjportal-form-btn-wrp {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding-top: 1.5rem;
    font-size: var(--wpjp-body-font-size);
    border-top: 1px solid var(--wpjp-secondary-color);

}

.wjportal-main-up-wrapper .wjportal-form-btn,
.wjportal-main-up-wrapper .button.wjportal-form-btn.wjportal-save-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-primary-color);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    line-height: inherit;
}

.wjportal-main-up-wrapper .wjportal-form-btn:hover,
.wjportal-main-up-wrapper .button.wjportal-form-btn.wjportal-save-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-secondary-color);
    color: #fff;
    text-decoration: none;
}

/* --- Input Button Styling with Background Icon --- */

/*.wjportal-form-wrp.wjportal-search-job-form .wjportal-form-btn.wjportal-save-btn {
   padding-left: 40px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center; 
    background-size: 18px 18px; 
}*/

/* --- Base Container for the Error State --- */
.wjportal-form-value.has-error {
    position: relative;

}

/* --- Styling the Input Field in an Error State --- */
.has-error .wjportal-form-input-field.error {
    /* Use the CSS variable for the border instead of inline styles */
    border-color: var(--error-color);

    /* Make space on the right for the icon */
    padding-right: 40px;
}

/* --- Styling the Focus State for the Error Field --- */
/* This ensures the red border and a red shadow appear when the user clicks to fix the error */
.has-error .wjportal-form-input-field.error:focus {
    outline: none;
    border-color: var(--error-color);
    box-shadow: var(--error-focus-shadow);
}

/* --- Adding the Icon INSIDE the Input Field --- */
/* This uses a pseudo-element on the container to place an icon */
.wjportal-main-up-wrapper .has-error::after {
    content: '';
    position: absolute;
    /* Position it vertically centered and on the right */
    top: 14px;
    /* Adjust this value to perfectly center the icon */
    right: 12px;
    width: 20px;
    height: 20px;

    /* Set the icon color */
    background-color: var(--error-color);

    /* Use a CSS mask for the icon shape (a modern warning symbol) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;

    /* This prevents the icon from blocking clicks on the input */
    pointer-events: none;
}

.wjportal-main-up-wrapper .wp-editor-wrap,
.wjportal-main-up-wrapper .wjportal-form-upload {
    width: 100%;
}

/* Card Styling (Kept as is) */
.wjportal-main-up-wrapper .card-container {
    max-width: 600px;
    width: 100%;
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.wjportal-main-up-wrapper h3 {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 600;
    /* semibold */
    margin-bottom: 1rem;
    color: #1f2937;
    /* gray-800 */
}

/* Group Container (Kept as is) */
.wjportal-main-up-wrapper .wjportal-form-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    /* 3 units of gap */
}

.wjportal-main-up-wrapper input[type="checkbox"] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    font-size: 16px;
    font-weight: 500;
}

.wjportal-main-up-wrapper label#foruf_checkbox1 {
    font-weight: 500;
}

.wjportal-main-up-wrapper input[type=file] {
    padding: 14px 12px;
    border-radius: 0px;
    font-size: 15px;
    letter-spacing: 0px;
    font-weight: 500;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #171822;
    background: #fff;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    border: 1px solid #e5e5e5;
    display: block;
    width: 100%;
    border-radius: 8px;
}

.wjportal-main-up-wrapper div#js_cust_file_ext {
    color: var(--wpjp-body-font-color);
    width: 100%;
}


/* =============================================
        === Modern Alert Box Design                 ===
        =============================================
        */

.wjportal-packages-wrp {
    width: 100%;
}

/* --- Main Alert Container (#autohidealert) --- */
.wjportal-main-up-wrapper .alert.alert-danger {
    /* Layout & Spacing */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Space between icon and text */
    padding: 1rem 1.5rem;
    position: relative;
    /* For positioning the close button */

    /* Appearance */
    background-color: #fef2f2;
    /* Light red background */
    color: #991b1b;
    /* Dark red for text */
    border: 1px solid #fca5a5;
    /* Softer red for the border */
    border-left: 5px solid #e53e3e;
    /* Strong accent line */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    /* Typography */
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;

    /* Animation */
    animation: slideInFade 0.5s ease-out forwards;
}

/* --- Hide the original, broken image --- */
.wjportal-main-up-wrapper .alert-danger img {
    display: none;
}

/* --- Add a new SVG icon using a pseudo-element --- */
.wjportal-main-up-wrapper .alert-danger::before {
    content: '';
    flex-shrink: 0;
    /* Prevents icon from shrinking */
    width: 24px;
    height: 24px;

    /* The icon color will match the text color */
    background-color: currentColor;

    /* SVG "warning/error" icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Close Button Styling --- */
.wjportal-main-up-wrapper .alert-danger .close {
    /* Reset default button styles */
    background: none;
    border: none;
    padding: 0;

    /* Positioning */
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;

    /* Appearance & Interaction */
    color: #991b1b;
    /* Dark red for text */
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wjportal-main-up-wrapper .alert-danger .close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* --- Replace the '×' with a cleaner SVG icon --- */
.wjportal-main-up-wrapper .alert-danger .close span {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;

    /* SVG 'X' icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

/* --- Animation for the alert appearing --- */
@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Styling the Error Message Text --- */
.wjportal-main-up-wrapper .help-block.form-error {
    color: var(--error-color);
    font-size: 14px;
    font-weight: 500;
    margin-top: 0.5rem;

    /* Align the text with a prepended icon */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e53e3e;
    padding: 5px;
    border-radius: 5px;
    background: #fff6f6;
}

/* --- Main Uploader Dropzone --- */
.wjportal-main-up-wrapper .wjportal-form-upload {
    background-color: var(--background-color);
    border: 2px dashed var(--wpjp-border-color);
    border-radius: 12px;
    padding: 2rem;

    /* Center content using flexbox */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

/* Hover state for the dropzone */
.wjportal-main-up-wrapper .wjportal-form-upload:hover {
    border-color: var(--wpjp-primary-color);
    background-color: #fff;
}

.wjportal-main-up-wrapper a.file,
span.wjportal-form-upload-btn-wrp-txt {
    justify-items: center;
    border: 1px solid var(--wpjp-border-color);
    padding: 5px;
    background: white;
    border-radius: 5px;
    color: black;
    font-size: 17px;
    margin: 5px;
    display: inline-block;
    width: 100%;
}

span.wpjobportal-form-chkbox-field label {
    font-size: var(--wpjp-body-font-size);
    margin-left: 10px;
    margin-right: 10px;
}

/* --- CSS Upload Icon --- */
/* This adds a cloud icon before the button container */
 .wjportal-form-upload .wjportal-form-upload-btn-wrp::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background-color: var(--wpjp-body-font-color);
    transition: background-color 0.2s ease-in-out;

    /* The SVG icon shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
}

.wjportal-form-upload:hover .wjportal-form-upload-btn-wrp::before {
    background-color: var(--wpjp-primary-color);
    width: 48px;
    height: 48px;
}

/* --- Custom "Upload Image" Button --- */
.wjportal-form-upload-btn {
    position: relative;
    /* Crucial for positioning the hidden file input */
    display: inline-block;
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    /* Hides the parts of the input that might stick out */
    transition: all 0.2s ease;
}

.wjportal-form-upload-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* The actual file input, hidden but functional */
.wjportal-form-upload-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Makes it invisible */
    cursor: pointer;
}

/* --- Help Text Styling --- */
.wjportal-form-help-txt {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin-top: 0.5rem;
}

/* --- Image Preview Styling --- */
.wjportal-form-image-wrp {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--wpjp-card-shadow);
    border: 2px solid #fff;
}

.wjportal-form-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the area without distortion */
}

/* --- CSS-only Delete Icon (replaces broken img) --- */
#wjportal-form-delete-image {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-color: rgba(29, 35, 39, 0.7);
    /* Use secondary color with transparency */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0;
    /* Hides broken image alt text */

    /* The 'X' icon shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

#wjportal-form-delete-image:hover {
    background-color: var(--wpjp-primary-color);
    transform: scale(1.1) rotate(90deg);
}

.wjportal-main-up-wrapper div#jsresume_sectionid1,
.wjportal-main-up-wrapper div#jsresume_sectionid2,
.wjportal-main-up-wrapper div#jsresume_sectionid3,
.wjportal-main-up-wrapper div#jsresume_sectionid4,
.wjportal-main-up-wrapper div#jsresume_sectionid5,
.wjportal-main-up-wrapper div#jsresume_sectionid6,
.wjportal-main-up-wrapper div#jsresume_sectionid7,
.wjportal-main-up-wrapper div#jsresume_sectionid8,
.wjportal-main-up-wrapper div#jsresume_sectionid9,
.wjportal-main-up-wrapper div#jsresume_sectionid10,
.wjportal-job-sec-heading {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
    margin-bottom: 40px;
    padding: 15px 10px 15px 5px;
    border-bottom: 3px dotted var(--wpjp-primary-color);
}

.wjportal-main-up-wrapper .wjportal-form-title label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-resume-section-wrp .form-control {
    letter-spacing: 0;
    font-size: 15px;
    height: 55px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 2px;
    transition: all 0.4s ease-in-out 0s;
    color: #171822;
}

.wjportal-main-up-wrapper .checkbox-field.wpjp-form-value.wjportal-searchable-wrp {
    padding-top: 12px;
    width: 100% !important;
    padding: 12px 15px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px !important;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 55px !important;
}

/* --- Section Title --- */

.wjportal-resume-section-head {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 20px;
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    padding: 10px;
    border-radius: 5px;
    padding-left: 2rem;
}

.wjportal-resume-section-undo {
    margin-left: auto;
    border: 1px solid var(--wpjp-border-color);
    padding: 10px 15px;
    border-radius: 6px;
}

a.anchor.map-link.wjportal-form-map-link {
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
}

a.anchor.map-link.wjportal-form-map-link:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;

}

.wpjp-add-new-section-link.wjportal-resume-add-new-section-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    padding: 10px 15px;
    border-radius: 6px;
    background-color: var(--wpjp-card-background) #ffffff;
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
    margin-bottom: 20px;
}

.wpjp-add-new-section-link.wjportal-resume-add-new-section-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

label.wjportal-input-box-switch {
    padding-top: 12px;
}

/* --- Form Field Grid Layout --- */
.wjportal-popup-field-wrp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 1.25rem;
}

/* --- Input & Textarea Styling --- */
.wjportal-popup-field input[type="text"],
.wjportal-popup-field textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--wpjp-body-font-color);
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    height: 55px;
}

.wjportal-popup-field input[type="text"]::placeholder,
.wjportal-popup-field textarea::placeholder {
    color: #999;
}

div.wjportal-form-row div.wjportal-form-value input[type="text"]::placeholder {
    color: var(--wpjp-body-font-color) !important;
    font-size: var(--wpjp-body-font-size) !important;

}

.wjportal-popup-field input[type="text"]:focus,
.wjportal-popup-field textarea:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

.wjportal-popup-field input[disabled] {
    background-color: #f1f1f1;
    color: #888;
    cursor: not-allowed;
}

/* Make the message textarea span both columns */
.wjportal-popup-fullwidth {
    grid-column: 1 / -1;
    text-align: left;
}

.wjportal-popup-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* --- Send Button --- */
.wjportal-visitor-msg-btn-wrp {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    width: 100%;
}

.wjportal-visitor-msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;

}

.wjportal-visitor-msg-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* --- Main Pagination Container --- */
.wjportal-pagination-wrp {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    /* Space between each pagination item */
    padding: 2rem 0;
}

/* --- Base Style for All Pagination Items (Links and Current) --- */
.wjportal-main-up-wrapper .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
    /* Create uniform, rounded squares */
    padding: 20px;
    border-radius: 12px;

    /* Effects */
    transition: all 0.2s ease-in-out;
}

/* --- Style for Clickable Page Numbers (not the current one) --- */
.wjportal-main-up-wrapper a.page-numbers {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
}

/* --- Hover Effect for Clickable Pages --- */
.wjportal-main-up-wrapper a.page-numbers:hover {

    border-color: var(--wpjp-secondary-color);
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* --- Style for the Current/Active Page --- */
.wjportal-main-up-wrapper .page-numbers.current {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--wpjp-card-shadow);
    cursor: default;
}

/* Add an Arrow Icon to the "Next" button */
.wjportal-main-up-wrapper .next.page-numbers::after {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.4em;
    background-color: currentColor;
    /* The icon color will match the text */

    /* The Arrow Shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Main Form Wrapper --- */
.wjportal-save-search-form-wrp {

    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
    max-width: 600px;
    margin: 2rem auto;
    /* Centers the component */
}

/* --- Form Layout --- */
/* Uses flexbox for a responsive, single-line layout */
.wjportal-save-search-form {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to stack on small screens */
    align-items: center;
    gap: 0.75rem;
    position: relative;
    /* Needed for the error icon positioning */
}

/* --- Form Label --- */
.wjportal-save-search-label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
    flex-shrink: 0;
    /* Prevents the label from shrinking */
}

/* --- Input Field --- */
.wjportal-save-search-input-field {
    flex-grow: 1;
    /* Allows the input to take up available space */
    width: auto;
    padding: 12px 16px;
    font-size: 1rem;
    color: var(--wpjp-body-font-color);
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.wjportal-save-search-input-field:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

/* --- Error State Styling --- */
/* IMPORTANT: Remove the inline style="border-color: red;" from your HTML for this to work */
.has-error .wjportal-save-search-input-field.error {
    border-color: var(--error-color);
    padding-right: 40px;
    /* Make space for the icon */
}

.has-error .wjportal-save-search-input-field.error:focus {
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.25);
    /* Error focus glow */
}



/* --- Save Button --- */
.wjportal-save-search-btn {
    background-color: var(--wpjp-primary-color);
    border-color: 1px solid var(--wpjp-primary-color);
    color: #ffffff;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px
}

.wjportal-save-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: 1px solid var(--wpjp-secondary-color);
    color: #ffffff !important;
}

.wjportal-coverletter-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

.wjportal-coverletter-list {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wjportal-coverletter-cnt-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    width: 100%;
    flex-wrap: wrap;
}

.wjportal-coverletter-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

span.wjportal-coverletter-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

span.wjportal-coverletter-info-tit {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}


.wjportal-coverletter-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 75%;
    margin-bottom: 8px;
}

.wjportal-coverletter-right-wrp {
    width: 25%;
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-direction: column;
    gap: 12px;
}

.wjportal-coverletter-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.wjportal-coverletter-list-btm-wrp {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

.wjportal-coverletterdetail-wrapper {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 16px 20px;
}

.wjportal-coverletter-action-wrp {
    display: flex;
    font-size: var(--wpjp-body-font-size);
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.wjportal-coverletter-sec-title {
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
}

span.wjportal-coverletter-data-tit {
    display: none;
}

.wjportal-coverletter-data {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);

}

.wjportal-coverletterdetail-wrapper .wjportal-coverletter-data {
    padding: 10px 0;
}

.wjportal-coverletter-data-wrp {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

a.wjportal-coverletter-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;

}

a.wjportal-coverletter-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

/* 1. Primary "View" Button */
.wjportal-coverletter-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* --- The CSS Clock Icon --- */
.wjportal-coverletter-info-tit::before {
    content: '';
    display: block;
    width: 1.1em;
    /* Icon size will scale with the font size */
    height: 1.1em;

    /* The icon will automatically match the text color */
    background-color: currentColor;

    /* The clock shape is created using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Main Grid Container --- */
.wjportal-by-type-wrp {
    display: grid;
    /* Creates a responsive grid that fits as many 250px columns as possible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    background-color: var(--background-color);
    border-radius: 8px;
}

/* These wrappers are not needed for the grid, so we reset them */
.wjportal-type-row-wrapper,
.wjportal-type-wrapper {
    width: 100% !important;
    /* Override inline styles */

}

.wjportal-type-wrapper {
    margin-bottom: 15px;
}

/* --- The Link Card Styling --- */
.wjportal-type-wrapper a {
    /* Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;

    /* Appearance & Glassmorphism */
    background: linear-gradient(135deg, var(--wpjp-card-background));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--wpjp-card-shadow);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* Important for the glow effect */

    /* Effects */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Interactive Glow Effect on Hover --- */
.wjportal-type-wrapper a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* The glow is a radial gradient that follows the mouse */
    transition: opacity 0.3s ease;
}

.wjportal-type-wrapper a:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--wpjp-primary-color);
}

.wjportal-type-wrapper a:hover::before {
    opacity: 1;
}

/* --- Title and Number Styling --- */
.wjportal-type-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    z-index: 1;
    /* Keep text above the glow */
}

.wjportal-type-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wpjp-primary-color);
    background-color: var(--background-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/*.wjportal-type-wrapper:hover{
    border:1px solid var(--wpjp-primary-color);
}*/

/* --- Arrow Icon on Hover --- */
.wjportal-type-wrapper a::after {
    content: '→';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    font-size: 3rem;
    color: var(--wpjp-primary-color);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.wjportal-type-wrapper a:hover .wjportal-type-num {
    opacity: 0;
    transform: scale(0.8);
}

.wjportal-type-wrapper a:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/*jave need to add */
/*<script>
document.querySelectorAll('.wjportal-type-wrapper a').forEach(card => {
    card.addEventListener('mousemove', e => {
        const rect = card.getBoundingClientRect();
        card.style.setProperty('--x', e.clientX - rect.left + 'px');
        card.style.setProperty('--y', e.clientY - rect.top + 'px');
    });
});
</script>*/

/*--------------jobs by category-------------------------
---------------------------------------
-------------------------
---------------*/

div#wpjobportal-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 2rem;
    background-color: var(--background-color);
    border-radius: 8px;
}

div#wpjobportal-wrapper .wjportal-by-category-wrp {
    font-size: var(--wpjp-body-font-size);
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--wpjp-card-background), #fdfdfd);
    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: var(--wpjp-card-shadow);
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

div#wpjobportal-wrapper .wjportal-by-category-wrp:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--wpjp-primary-color);
}

div#wpjobportal-wrapper .wjportal-by-sub-catagory .wjportal-by-category-wrp:hover {
    border: 1px solid var(--wpjp-primary-color);
}

div#wpjobportal-wrapper .wjportal-by-sub-catagory .wjportal-by-category-wrp {
    padding: 10px;

}

div#wpjobportal-wrapper .wjportal-by-category-wrp {
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;

    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: var(--wpjp-card-shadow);
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

div#wpjobportal-wrapper .wjportal-by-category-wrp a:hover::before {
    opacity: 1;
}

div#wpjobportal-wrapper .wjportal-by-category-wrp a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(232, 48, 48, 0.15), transparent 40%);*/
    opacity: 0;
    transition: opacity 0.3s ease;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-by-sub-catagory {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    /* Add some padding to the main container */
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-job-by-catg-popup .wjportal-by-sub-catagory {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-by-category-wrp {
    width: 47% !important;
    padding: 8px;
    /* Adds spacing between the items */
    box-sizing: border-box;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-by-sub-catagory .wjportal-by-category-wrp {
    margin: 10px;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-popup-navigation {
    margin-top: 20px;
}

div#wpjobportal-wrapper .wjportal-by-sub-catagory {
    margin-top: 15px;
    position: absolute;
    top: 84%;
    left: 0px;
    right: 0px;
    padding: 10px;
    height: auto;
    z-index: 9999;
    display: block;
    width: auto;
    box-shadow: 0 0 8px #c9c9c9;
    /*background-color: var(--background-color);*/
    background-color: #fff;
    z-index: 2147483647;
    border-radius: 8px;
}

div#wpjobportal-wrapper a.wjportal-by-category-item-btn {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    justify-content: center;
    width: 100%;
}

div#wpjobportal-wrapper a.wjportal-by-category-item-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

div#wpjobportal-wrapper span.wjportal-by-category-item-number {
    font-size: var(--wpjp-body-font-size);
    font-weight: 700;
    color: var(--wpjp-primary-color);
    background-color: var(--background-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-left: auto;
}

div#wpjobportal-wrapper .wjportal-by-category-item {
    display: flex;


}

div#wpjobportal-wrapper span.wjportal-by-category-item-title {
    display: flex;
    align-items: center;
    color: var(--wpjp-secondary-color);
    font-weight: 500;

}

.wjportal-error-msg-image-wrp {
    text-align: center;
}
.wjportal-error-msg-image-wrp img{
    margin: auto;
}
.wjportal-error-messages-wrp {
    text-align: center;
}

div#wpjobportal-wrapper .wjportal-error-messages-wrp {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

div#wpjobportal-wrapper .wjportal-error-msg-image-wrp {
    width: 100%;
    justify-items: center;
    display: grid;
}


/* Card Container */
.wjportal-popup-contentarea {
    background-color: white;
    border-radius: 1rem;
    padding: 1.5rem;
}

/* Header */
.wjportal-popup-contentarea h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    /* Dark Gray 800 */
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    /* Light Gray 200 */
}

/* Responsive Flexbox Layout (REPLACES GRID) */
.wjportal-by-sub-catagory {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap onto the next line */
    gap: 1rem;
    /* Spacing between items */
}

/* Category Wrapper (Default to full width on mobile) */
.wjportal-by-category-wrp {
    width: 100%;
}

/* Tablet/Desktop breakpoint */
@media (min-width: 640px) {
    .wjportal-popup-contentarea {
        /*padding: 2rem;*/
    }

    /* Calculate width for two columns, accounting for the 1rem gap */
    .wjportal-by-category-wrp {
        width: calc(50% - 0.5rem);
    }
}

/* Category Item Link Styling */
.wjportal-by-category-wrp a {
    display: block;
    text-decoration: none;
    background-color: #f3f4f6;
    /* Light Gray 100 */
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1rem;
    transition: all 0.2s ease-in-out;
    height: 100%;
    /* Ensures card fills wrapper height for consistency */
}

/* Category Item Hover Effect */
.wjportal-by-category-wrp a:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);

}

/* Category Item Content Layout */
.wjportal-by-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Title and Number Styling */
.wjportal-by-category-item-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: #374151;
    /* Dark Gray 700 */
    transition: color 0.2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 80%;
}

.wjportal-by-category-wrp a:hover .wjportal-by-category-item-title {
    color: var(--wpjp-primary-color);
    /* Primary Color (Emerald) */
}

.wjportal-by-category-item-number {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #6b7280;
    /* Gray 500 */
    background-color: #e5e7eb;
    /* Light Gray 200 */
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.wjportal-by-category-wrp a:hover .wjportal-by-category-item-number {}

/* Navigation Footer */
.wjportal-popup-navigation {
    display: flex;
    border-top: 1px solid #e5e7eb;
    /* Light Gray 200 */
    padding-top: 1rem;
    margin-top: 1.5rem;
    list-style: none;
    padding-left: 0;
}

.wjportal-popup-navigation li {
    cursor: pointer;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #6b7280;
    padding: 10px;
    background-color: #f3f4f6;
    border-radius: 4px;
    transition: all 0.15s;
}

.wjportal-popup-navigation li:hover {
    color: var(--wpjp-primary-color);
    /* Primary Color (Emerald) */

}


/*--------------Resume save search -------------------------
---------------------------------------
-------------------------
---------------*/
/* --- New Card Design --- */

/* Main card container */
.wjportal-save-search-list {
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    background-color: var(--wpjp-card-background);

    box-shadow: var(--wpjp-card-shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-bottom: 3rem;
    overflow: hidden;
    /* Ensures child elements respect the border-radius */
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-save-search-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Wrapper for the main content (title and date) */
.wjportal-save-search-content {
    padding: 24px;
}

.wjportal-save-search-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    padding: 24px 10px 0px 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-save-search-created {
    margin-bottom: 15px;
}

.wjportal-save-search-created-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding: 10px 10px 0px 24px;
}

.wjportal-save-search-created-text::before {
    content: '';
    display: block;
    width: 1.1em;
    height: 1.1em;

    /* The icon's color will match the text color above */
    background-color: currentColor;

    /* -- Calendar Icon SVG Mask -- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");

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

/* Footer area for action buttons */
.wjportal-save-search-action-wrp {
    display: flex;
    justify-content: flex-end;
    /* Aligns buttons to the right */
    gap: 12px;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

/* Base button styles */
.wjportal-save-search-act-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
    border: 1px solid var(--wpjp-border-color);
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-save-search-act-btn-remove {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-save-search-act-btn-remove.wjportal-list-act-btn-delete:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

a.wjportal-save-search-act-btn.wjportal-list-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}

.wjportal-save-search-act-btn,
.wjportal-save-search-act-btn-remove {
    color: var(--wpjp-secondary-color);
    display: inline-flex;
    /* Aligns icon and text horizontally */
    align-items: center;
    /* Aligns them vertically in the middle */
    gap: 0.5em;
    /* Creates a small space between the icon and text */
    text-decoration: none;

}


/*===========================================================
--------------  Messages  ----------
=============================================================*/

/* --- Single Column (100% Width) Message List Design --- */

/* Main container for the cards */
.wjportal-messages-list-wrapper {
    display: flex;
    /* Changed from grid to flex */
    flex-direction: column;
    /* Stacks items vertically */
    gap: 20px;
    /* Space between cards */
}

/* Individual message card styling */
.wjportal-messages-list {
    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: var(--wpjp-card-shadow);

    display: flex;
    flex-direction: column;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* No width property needed; as a flex item, it will default to 100% width */
}

/* A subtle lift effect on hover to provide feedback */
.wjportal-messages-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Top section of the card (Name) */
.wjportal-msg-list-top {
    padding-bottom: 15px;
    padding: 20PX;

}

.wjportal-msg-name {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

/* Bottom section (Info and Action Button) */
.wjportal-msg-list-btm {
    gap: 15px;
    flex-wrap: wrap;
    display: flex;
    border-radius: 0 0 10px 10px;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
    justify-content: end;
}

/* Styling for the "Resume: Sample Resume 3" text */
.wjportal-msg-info-data {
    font-size: var(--wpjp-body-font-size);
}

.wjportal-msg-info-data-tit {
    color: var(--wpjp-secondary-color);
}

.wjportal-msg-info-data-val a {
    color: var(--wpjp-primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.wjportal-msg-info-data-val a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

/* The main action button */
.wjportal-msg-act-btn {
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}


/* Darken button slightly on hover */
.wjportal-msg-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-msg-act-btn {
    /* Button Layout & Spacing */
    display: inline-flex;
    /* Aligns icon and text nicely */
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
    padding: 10px 20px;

    /* Button Appearance */
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Smooth Transition for Hover */
    transition: all 0.3s ease;
}

/* --- Trendy Message Display Design --- */

/* The main container for the message content */
.wjportal-send-message {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    /* Consistent soft corners */
    box-shadow: var(--wpjp-card-shadow);
    padding: 25px 30px;
    /* Generous padding for a clean look */
    margin: 25px 0;
    /* Adds space above and below the component */
}

/* The subject line of the message */
.wjportal-send-msg-subject {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    /* Make the subject stand out */
    color: var(--wpjp-secondary-color);
    margin-bottom: 15px;
    padding-bottom: 15px;
    /* A subtle line to cleanly separate the subject from the body */
    border-bottom: 1px solid var(--wpjp-border-color);
}

/* The main body/text of the message */
.wjportal-send-msg-text {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    line-height: 1.7;
    /* Increased line height is crucial for readable paragraphs */
}

/* It's good practice to remove default margins from paragraphs within components */
.wjportal-send-msg-text p {
    margin: 0;
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color);
    line-height: 1.7;
    /* Increased line height is crucial for readable paragraphs */
}

/* --- Trendy Message History / Chat Design --- */

/* Main wrapper for the entire message history component */
.wjportal-message-history-wrp {
    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Creates vertical space between title and messages */
}

/* The main title "Message History" */
.wjportal-msg-history-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--wpjp-border-color);
}

/* A single message row (avatar + bubble) */
.wjportal-msg-history {
    display: flex;
    align-items: flex-end;
    /* Aligns avatar with the bottom of the bubble */
    gap: 15px;
    /* Space between avatar and message bubble */
    max-width: 85%;
    /* Prevents a message from taking the full screen width */
}

/* --- Sent Message Styling (Aligned Right) --- */
.wjportal-msg-history.mesend {
    align-self: flex-end;
    /* Aligns the entire row to the right */
    flex-direction: row-reverse;
    /* Puts the avatar on the right */
}

.mesend .wjportal-msg-history-cnt {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    /* Custom border-radius for a chat bubble effect */
    border-radius: 18px 18px 5px 18px;
}

/* Change color of meta-data for better contrast on the dark background */
.mesend .wjportal-msg-history-name,
.mesend .wjportal-msg-history-created {
    color: var(--wpjp-secondary-color);
    opacity: 0.9;
}

/* --- Received Message Styling (Example) ---
You can create another class like "mereceived" for messages from the other person.
This would align them to the left with a different color.

.wjportal-msg-history.mereceived {
    align-self: flex-start;
}
.mereceived .wjportal-msg-history-cnt {
    background-color: var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    border-radius: 18px 18px 18px 5px;
}
*/

/* The user's avatar image */
.wjportal-msg-history-image img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--wpjp-border-color);

}

/* The message bubble content */
.wjportal-msg-history-cnt {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Space between the header and the text */
}

/* Top part of the bubble (name and date) */
.wjportal-msg-history-top {
    display: flex;
    align-items: center;
    /* Vertically aligns all items */
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 15px;
    /* Adds space between items */
    /* REMOVED: justify-content: space-between; */
}

/* The sender's name */
.wjportal-msg-history-name {
    font-weight: 600;
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-body-font-color);
}

/* The creation date */
.wjportal-msg-history-created {
    font-size: 13px;
    color: #6c757d;
    /* Muted color for secondary info */
    white-space: nowrap;
    margin-left: auto;
    /* ADDED: This is the magic property! */
}

/* --- Status Badge Styling --- */

/* Base style for all status badges */
.wjportal-msg-history-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Style for the "rejected" status */
.wjportal-msg-history-status.rejected {
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
}

/* Style for a potential "approved" status */
.wjportal-msg-history-status.approved {
    background-color: #28a745;
    color: #ffffff;
}

/* Style for a potential "pending" status */
.wjportal-msg-history-status.pending {
    background-color: #eeba1f;
    color: #fff;
}

/* The actual message text */
.wjportal-msg-history-text {
    font-size: var(--wpjp-body-font-size);
    line-height: 1.6;
    word-break: break-word;
    /* Ensures long text doesn't break the layout */
    color: var(--wpjp-body-font-color);
}

.wjportal-msg-history-cnt.message-other,
.wjportal-msg-history-cnt.message-admin {
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    /* Custom border-radius for a chat bubble effect */
    border-radius: 18px 18px 5px 18px;

}

.wjportal-msg-history-text p {
    margin: 0;
    background: transparent;
}


.wjportal-msg-history-image {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

/*===========================================================
--------------  Special Cases  ----------
=============================================================*/

.wpjobportal-list-item-status-rejected {
    border-left: 5px solid #bb0906 !important;
}

.wpjobportal-list-item-status-pending {
    border-left: 5px solid #ffa500 !important;
}

.wpjobportal-list-item-status-approved {
    border-left: 5px solid #008000 !important;
}

.wpjobportal-list-item-status-no-payment {
    border-left: 5px solid #ffa500 !important;
}

.wpjobportal-list-item-is-featured {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
}

.wjportal-resume-list.wpjobportal-list-item-is-featured .wjportal-resume-list-top-wrp {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    position: relative;
    overflow: hidden;
}

.wjportal-resume-list.wpjobportal-list-item-status-no-payment .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #ffa500;
    opacity: 0.3;
}

.wjportal-resume-list.wpjobportal-list-item-status-rejected .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #bb0906;
    opacity: 0.3;
}

.wjportal-resume-list.wpjobportal-list-item-status-approved .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #008000;
    opacity: 0.3;
}

.wjportal-resume-list.wpjobportal-list-item-status-pending .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #ffa500;
    opacity: 0.3;
}

/*===========================================================
--------------  Credits Pack ----------
=============================================================*/
.wjportal-packages-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin: auto;
    /*background: var(--background-color);*/
    padding: 50px;
    border-radius: 8px;
}

/* 1. Main Wrapper Styling (ID updated to stripe-wrap) */
.wjportal-main-up-wrapper #stripe-wrap {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin: 0;
}

/* 2. Content Area and Checkbox */
.wjportal-payemt-method-desc-data {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.wjportal-payemt-method-desc-data label {
    display: flex;
    /* Use flex for better alignment */
    align-items: center;
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
    cursor: pointer;
}

.wjportal-main-up-wrapper #recurringstripe {
    /* Basic styling for the checkbox */
    margin-right: 10px;
    transform: scale(1.1);
}

/* 3. Description Text Styling */
.wjportal-payemt-method-desc-txt {
    display: block;
    /* Ensures the span takes up full width */
    font-size: 13px;
    color: #777777;
    line-height: 1.5;
    padding-left: 2px;
    /* Slight indent to align with text */
}

/* 4. Form and Button Styling */
.wjportal-main-up-wrapper #stripe-form {
    display: block;
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

.wjportal-main-up-wrapper div#stripe-wrap form#stripe-form button.stripe-button-el {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-size: 17px !important;
    margin-top: 15px;
    background-color: #0070ba;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wjportal-main-up-wrapper .stripe-button-el span {
    height: unset;
    font-size: 17px !important;
}

.wjportal-main-up-wrapper .stripe-button-el span {
    background-image: none !important;
    background-color: unset !important;
    box-shadow: unset !important;
}

.wjportal-main-up-wrapper .stripe-button-el:hover,
.wjportal-main-up-wrapper button.stripe-button-el:hover,
.wjportal-main-up-wrapper .stripe-button-el span:hover {
    background: #0f67d6 !important;
}

.wjportal-main-up-wrapper .stripe-button-el {
    width: 100%;
}

/* Targeting the Stripe generated button element */
.wjportal-main-up-wrapper .stripe-button-el {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    background-color: #5469D4;
    /* Stripe purple/blue color */
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1;
    /* Fix vertical alignment */
}

.wjportal-main-up-wrapper .stripe-button-el:hover {
    background-color: #4355a6;
    /* Darker shade on hover */
}

/* 5. Mobile Responsiveness */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper #stripe-wrap {
        padding: 15px;
        margin: 10px;
        border-radius: 8px;
    }

    .wjportal-main-up-wrapper .stripe-button-el {
        font-size: 16px;
        padding: 10px 0;
    }
}

/* 1. Main Wrapper Styling */
.wjportal-main-up-wrapper #paypal-wrap {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Reset the inline style from the provided HTML */
    margin: 0;
}

/* 2. Content Area and Checkbox */
.wjportal-payemt-method-desc-data {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.wjportal-payemt-method-desc-data label {
    display: flex;
    /* Use flex for better alignment */
    align-items: center;
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
    cursor: pointer;
}

.wjportal-main-up-wrapper #recurringpaypal {
    /* Basic styling for the checkbox */
    margin-right: 10px;
    transform: scale(1.1);
}

/* 3. Description Text Styling */
.wjportal-payemt-method-desc-txt {
    display: block;
    /* Ensures the span takes up full width */
    font-size: 13px;
    color: #777777;
    line-height: 1.5;
    padding-left: 2px;
    /* Slight indent to align with text */
}

/* 4. Button Styling */
.wjportal-payemt-method-desc-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    margin-top: 15px;
    background-color: #0070ba;
    /* PayPal Blue */
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wjportal-payemt-method-desc-btn:hover {
    background-color: #005ea6;
    /* Darker blue on hover */
    color: #fff;
}

/* 5. Mobile Responsiveness (optional, but good practice) */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper #paypal-wrap {
        padding: 15px;
        margin: 10px;
        border-radius: 8px;
    }

    .wjportal-payemt-method-desc-btn {
        font-size: 16px;
        padding: 10px 0;
    }
}

/*
 * 3. THE PACKAGE CARD ITSELF
*/
.wjportal-pkg-list-item {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 16px;
    box-shadow: var(--wpjp-card-shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    /* Important for the badge */
    width: 100%;
    border-top: 5px solid;

}

.wjportal-pkg-list-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/*
 * 3.1. FEATURED CARD "MOST POPULAR" BADGE
*/
.wjportal-pkg-list-item.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: 20px;
    right: -35px;
    background: var(--primary-gradient);
    color: white;
    padding: 8px 40px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/*
 * 4. CARD HEADER (Top Section)
*/
.wjportal-pkg-list-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background-color: var(--background-color);
    border-bottom: 3px dotted var(--wpjp-primary-color);
}

.wjportal-pkg-list-item-title-txt {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    margin-bottom: 5px;
}

span.wjportal-pkg-list-item-disc {
    border: 1px solid;
    padding: 5px 30px;
    border-radius: 6px;
    background: black;
    color: #fff;
    font-weight: 500;
}

.wjportal-pkg-list-item-crt-date {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin-top: 10px;
}

.wjportal-pkg-list-item-price-txt {
    font-size: 32px;
    font-weight: 700;
    color: var(--wpjp-primary-color);
}

span.wjportal-pkg-list-item-price-discount {
    text-decoration: line-through;
    padding-right: 10px;
    font-size: 17px;
    color: #808080;
}

.wjportal-pkg-list-item-price-txt span {
    font-size: 16px;
    font-weight: 500;
    color: var(--wpjp-secondary-color);
}

/*
 * 5. CARD BODY (Middle Section) with ICONS
*/
.wjportal-pkg-list-item-mid {
    padding: 20px 30px;
    flex-grow: 1;
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-pkg-list-item-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Creates two equal-width columns */
    gap: 20px;
    /* Space between grid items */
    background-color: var(--wpjp-card-background);
    border-radius: 10px;
    margin: 20px auto;
}

.wjportal-pkg-list-item-btm {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    gap: 15px;
    padding: 30px;
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-packages-list .wjportal-pkg-list-item-act-btn {
    color: rgb(255, 255, 255);
    text-align: center;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    width: 100%;
    background: var(--wpjp-primary-color);
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
}


.wjportal-packages-list .wjportal-pkg-list-item-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: white;
}

.wjportal-pkg-list-item-exp-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    text-align: center;
    border: 1px solid #a66e2d;
    background: antiquewhite;
    color: #a66e2d;
    padding: 5px;
    border-radius: 5px;
    width: 30%;
    margin: auto;
}

/* 2. GRID ITEM STYLING 
   Each row is now a self-contained item within the grid.
*/
.wjportal-pkg-list-item-row {
    display: flex;
    align-items: center;
    /* Vertically aligns the icon and text */
    padding: 12px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    transition: all 0.3s ease;
}

.wjportal-pkg-list-item-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--wpjp-card-shadow);
    border-color: var(--wpjp-primary-color);
}


/* 3. ICON STYLING (using ::before)
   This adds an icon to the start of each row without changing the HTML.
*/
.wjportal-pkg-list-item-row::before {
    content: '';
    display: inline-block;
    width: 18px;
    /* Icon size */
    height: 18px;
    margin-right: 12px;
    /* Space between icon and text */
    background-color: var(--wpjp-primary-color);
    /* Icon color */

    /* Generic checkmark icon using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
    mask-size: contain;
    mask-repeat: no-repeat;
}

/* 4. TEXT STYLING */
.wjportal-pkg-list-item-row-tit {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    white-space: nowrap;
    /* Prevents long titles from wrapping awkwardly */
}

.wjportal-pkg-list-item-row-val {
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    font-size: var(--wpjp-body-font-size);
    margin-left: auto;
    /* Pushes the value to the far right */
    padding-left: 10px;
    /* Ensures space between title and value */
}

/** 6. CARD FOOTER (Bottom Section)*/
.wjportal-pkg-list-item-btm {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-pkg-list-item-action-wrp {
    display: flex;
    align-items: center;
    width: 100%;
}



/*==========================================================================
===========Login from =========================
==================================*/

.wjportal-main-up-wrapper p.login-username,
.wjportal-main-up-wrapper p.login-password {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
}

.wjportal-main-up-wrapper .login-username label,
.wjportal-main-up-wrapper p.login-password label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-form-sec-heading {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--wpjp-secondary-color);
}

a.wjportal-form-lost-password {
    display: block;
    text-align: center;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    transition: color 0.3s;

}

.wjportal-form-reg-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
    margin-top: 15px;
    text-align: center;
}

/* Create the icon using a ::before pseudo-element */
.wjportal-form-reg-btn::before {
    content: '';
    /* Required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG "person add" icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

a.wjportal-form-reg-btn {
    justify-content: center;
}

.wjportal-main-up-wrapper input#rememberme {
    font-size: var(--wpjp-body-font-size);
}

.wjportal-form-reg-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}

.wjportal-main-up-wrapper form#loginform-custom p.login-submit {
    border-top: 1px solid black;
    padding-top: 20px;
    margin-bottom: 0;
}

.wjportal-main-up-wrapper form#loginform-custom input#wp-submit {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 15px 28px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.wjportal-main-up-wrapper form#loginform-custom input#wp-submit:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/*==========================================================================
===========My Invoices =========================
==================================*/

/* --- Main Table Wrapper & Layout --- */
.wjportal-table-wrp {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    overflow: hidden;
    table-layout: fixed;
    /* ADD THIS LINE: Ensures the table respects the column widths */
}

/* --- Column Widths --- */
/* This section sets the width for each specific column */
#wjportal-table th:nth-child(1),
#wjportal-table td:nth-child(1) {
    width: 40%;
    /* Description column */
}

#wjportal-table th:nth-child(2),
#wjportal-table td:nth-child(2) {
    width: 15%;
    /* Amount column */
}

#wjportal-table th:nth-child(3),
#wjportal-table td:nth-child(3) {
    width: 10%;
    /* Payment Method column */
}

#wjportal-table th:nth-child(4),
#wjportal-table td:nth-child(4) {
    width: 10%;
    /* Created column */
}

#wjportal-table th:nth-child(5),
#wjportal-table td:nth-child(5) {
    width: 15%;
    /* Created column */
}

#wjportal-table th:nth-child(6),
#wjportal-table td:nth-child(6) {
    width: 10%;
    /* Created column */
}

/* --- Table Header Styling --- */
#wjportal-table thead th {
    background-color: var(--background-color);
    padding: 1rem 1.5rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--wpjp-border-color);
}

/* --- Table Body & Row Styling --- */
#wjportal-table tbody tr {
    border-bottom: 1px solid var(--wpjp-border-color);
    transition: background-color 0.2s ease;
}

#wjportal-table tbody tr:last-of-type {
    border-bottom: none;
}

#wjportal-table tbody tr:hover {
    background-color: var(--background-color);
}

/* --- Table Cell Styling --- */
#wjportal-table td {
    padding: 1rem 1.5rem;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    vertical-align: middle;
    /* Helps prevent long text from breaking the layout */

}

.wjportal-my-invoices-list-wrapper table td>a {
    padding: 1rem 0;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    vertical-align: middle;
    box-shadow: unset;
}

.wjportal-my-invoices-list-wrapper table td>a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline;
}


/* --- Special Badge for Payment Method --- */
.wjportal-my-invoices-list-payment-method-type {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}

.wjportal-paypal {
    background-color: #e3f2fd;
    color: #1565c0;
}


/*==========================================================================
===========popup =========================
==================================*/

/* A nice highlight color when user selects text */
.wjportal-main-up-wrapper ::selection {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* --- Popup Container --- */
.wjportal-popup-cnt {
    background-color: var(--wpjp-card-background);
    border-radius: 20px;
    /* Softer, more modern corners */
    padding: 32px;
    width: 100%;

    position: relative;

    /* NEW: A more pronounced, layered shadow for depth */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);

    /* NEW: A subtle gradient border at the top for a premium feel */
    border-top: 4px solid transparent;
    border-image: linear-gradient(to right, var(--wpjp-primary-color), var(--wpjp-secondary-color)) 1;

    /* NEW: A more dynamic entry animation */
    animation: slideInFade 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* --- Close Button --- */
#wjportal-popup-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
    background-color: var(--wpjp-secondary-color);
    border-radius: 50%;
}

#wjportal-popup-close-btn:hover {
    opacity: 1;
    transform: scale(1.1) rotate(90deg);
    /* NEW: Added scale effect */
}

/* --- Popup Header --- */
.wjportal-popup-title {
    /*text-align: center;*/
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    /* Bolder for more impact */
}

.wjportal-popup-title2 {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    /* Bolder for more impact */
    color: var(--wpjp-secondary-color);
    position: relative;
    display: inline-block;
    /* Required for the ::after element */
}

/* NEW: A stylish gradient underline accent */
.wjportal-popup-title2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--wpjp-primary-color), var(--wpjp-secondary-color));
    border-radius: 2px;
}

/* --- Form Fields & Labels --- */
.wjportal-popup-field {
    margin-bottom: 20px;
}

.wjportal-popup-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-popup-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    /* Softer radius */
    font-size: var(--wpjp-body-font-size);
    background-color: var(--background-color);
    transition: all 0.3s ease;
    resize: vertical;
    box-sizing: border-box;
}

/* NEW: A more prominent "glow" effect on focus */
.wjportal-popup-field textarea:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 4px rgba(232, 48, 48, 0.1);
}

/* --- Star Rating --- */
.wjportal-container-small {
    display: flex;
    justify-content: center;
    /*margin-bottom: 24px;*/
    border: 1px solid var(--wpjp-border-color);
    padding: 10px 10px 5px 10px;
    border-radius: 8px;
    background: var(--wpjp-card-background);
}

/* --- Save Button --- */
a.wjportal-visitor-msg-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    /* Adds a small space between the icon and text */
    /* NEW: Attractive gradient background */
    background-image: linear-gradient(45deg, var(--wpjp-primary-color) 0%, var(--wpjp-primary-color-light) 100%);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    border: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: all 0.3s ease;
    justify-content: center;
}

/* This creates the icon before the text */
div#wjportal-listpopup .wjportal-visitor-msg-btn::before {
    content: '';
    display: block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18h14v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V18h6v-1.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18h14v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V18h6v-1.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* --- NEW Animation Keyframes --- */
@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Popup Overlay === */
#wjportal-popup-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to bottom, rgba(var(--wpjp-primary-color), 0.41), rgba(var(--wpjp-secondary-color), 0.84));*/
    /*background: rgba(0, 0, 0, 0.55);*/
    z-index: 999998;
    display: none;
}

#wjportal-popup-background::before {
    content: '';
    /* Pseudo-elements must have a content property */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--wpjp-primary-color), var(--wpjp-secondary-color));
    z-index: -1;
    border-radius: 8px;
    opacity: 0.85;
    /* Control the transparency of the entire gradient here */
}

/* === Popup Wrapper === */
.wjportal-popup-wrp {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    z-index: 999999;
    display: none;
    overflow: hidden;
    width: 50%;
}


/* === Payment Methods Layout === */
.wjportal-payemt-methods-wrp {
    display: flex;
    justify-content: center;
    /* Center the payment cards */
    gap: 20px;
    /* Space between cards */
    flex-wrap: wrap;
    /* Allow cards to stack on smaller screens */
    padding: 20px 0;
}

/* === Payment Item === */
.wjportal-payemt-method-item {
    position: relative;
    /* Crucial for positioning the Stripe button later */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    padding: 20px;
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 12px;
    background-color: var(--wpjp-card-background, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}

/* === Payment Logos === */
.wjportal-payemt-method-item img {
    max-width: 120px;
    height: auto;
    object-fit: contain;
    /* NEW: Grayscale effect for a clean, uniform look */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
}


.wjportal-payemt-method-item img:hover {
    transform: scale(1.05);

}

/* === Stripe Method === */
.wjportal-payemt-method-stripe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Normalize Stripe Button Layout */
.wjportal-payemt-method-stripe form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}


.wjportal-main-up-wrapper .stripe-button-el:hover,
.wjportal-main-up-wrapper button.stripe-button-el:hover {
    background: #0f67d6 !important;
}

/* Ensure the Stripe inner span displays properly */
.wjportal-main-up-wrapper .stripe-button-el>span,
.wjportal-main-up-wrapper button.stripe-button-el>span {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === Proceed Button === */
.wjportal-payment-act-btn {
    background: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;

}

.wjportal-payment-act-btn:hover {
    background: var(--wpjp-secondary-color);
    color: #fff;
}

/* === Responsive Adjustments === */
@media (max-width: 480px) {
    .wjportal-popup-wrp {
        width: 90%;
        padding: 0;
    }

    .wjportal-payemt-methods-wrp {
        flex-direction: column;
        gap: 15px;
    }

    .wjportal-payemt-method-item img {
        width: 120px;
    }
}

/* --- Responsive Design for Mobile --- */
@media (max-width: 768px) {

    /* Reset column widths for mobile */
    #wjportal-table th,
    #wjportal-table td {
        width: 100% !important;
        /* The !important ensures it overrides the desktop widths */
    }

    /* Hide the original table header */
    #wjportal-table thead {
        display: none;
    }

    /* Make rows and cells stack vertically */
    #wjportal-table tr {
        display: block;
        margin-bottom: 3rem;
        border-bottom: 2px solid var(--wpjp-border-color);
        padding: 15px;
    }

    #wjportal-table tr:last-of-type {
        margin-bottom: 0;
    }

    #wjportal-table td {
        display: block;
        text-align: right;
        padding: 0.75rem 1rem;
        border-bottom: 1px dotted var(--wpjp-border-color);
    }

    #wjportal-table td:last-child {
        border-bottom: none;
    }

    /* Use the data-th attribute to create labels */
    #wjportal-table td::before {
        content: attr(data-th);
        float: left;
        font-weight: 600;
        color: var(--wpjp-secondary-color);
    }
}

/* --- Responsive Layout for Mobile --- */
@media (max-width: 768px) {
    .wjportal-popup-field-wrp {
        grid-template-columns: 1fr;
        /* Stack to a single column */
    }
}

/* --- Responsive Layout for Mobile --- */
@media (max-width: 768px) {
    .wjportal-form-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .wjportal-form-title {
        text-align: left;
        padding-top: 0;
    }

    .wjportal-form-btn-wrp {
        justify-content: center;
        font-size: var(--wpjp-body-font-size);
    }

    .wjportal-form-btn {
        width: 100%;
        justify-content: center;
    }

    .wjportal-form-wrp {
        padding: 1.5rem;
    }

    div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt {
        width: 100%;
        padding-left: 0;
    }
}

/* ----------------------------------------- */
/* == Responsive          == */
/* ----------------------------------------- */

@media (max-width: 480px) {
    .wjportal-company-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-jobs-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-resume-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-newest-jobs-date {
        margin-bottom: 15px;
    }

    .wjportal-jobs-list-btm-wrp {
        flex-wrap: wrap;
    }

    .wjportal-jobs-right-wrp {
        align-items: flex-start;
        width: 100%;
    }

    .wjportal-packages-list {
        padding: 5px;
    }

    .wjportal-department-cnt-wrp {
        flex-wrap: wrap;
    }

    .wjportal-department-desc-wrap {
        padding-top: 10px;
    }
}

@media (max-width: 650px) {
    .wjportal-jobs-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-job-listing-description-wrap {
        width: 100%;
    }

    .wjportal-jobs-right-wrp {
        gap: 5px;
    }

    .wjportal-coverletter-cnt-wrp {
        flex-wrap: wrap;
    }

    .wjportal-coverletter-middle-wrp {
        width: 100%;
    }

    .wjportal-coverletter-right-wrp {
        width: 100%;
        align-items: flex-start;
    }

    .wjportal-coverletter-action-wrp {
        justify-content: end;
    }

    .wjportal-company-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-pkg-list-item-top {
        flex-wrap: wrap;
    }

    .wjportal-pkg-list-item-exp-date {
        width: 100%;
    }

    .wjportal-department-middle-wrp {
        width: 100%;
    }

    .wjportal-pkg-list-item-row-tit {
        white-space: unset;
    }

    .wjportal-by-categories-row-wrp {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.wjportal-by-categories-row-wrp {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
}

@media (max-width: 768px) {

    .wjportal-jobs-cnt-wrp {
        flex-wrap: wrap;
    }

    .wjportal-jobs-right-wrp {
        align-items: flex-start;
        width: 100%
    }

    div.wjportal-page-header div.wjportal-header-actions div.wjportal-filter-wrp {
        display: flex !important;
    }

    div.wjportal-page-header div.wjportal-header-actions {
        margin-top: 20px;
    }

    .wjportal-jobs-middle-wrp {
        width: 100%;
    }

    .wjportal-resume-right-wrp {
        width: 100%;
        justify-content: start;
    }

    .wjportal-resume-middle-wrp {
        width: 100%;
    }

    .wjportal-resume-data {
        width: 100%;
    }

    .wjportal-applied-job-resume-status {
        position: static;
        transform: none;
        display: inline-block;
    }

    .wjportal-applied-job-resume-status {
        margin-bottom: 10px;
    }

    span.wjportal-resume-job-type {
        margin-bottom: 10px;
    }

    .wjportal-pkg-list-item-row {
        width: 100%;
    }

    .wjportal-department-desc-wrap {
        padding-top: 10px;
    }

    .wjportal-companydetail-wrapper .wjportal-company-data,
    .wjportal-company-data-wrp .wjportal-custom-field {
        width: 100%;
    }

    .wjportal-companyinfo-wrp {
        width: 100%;
    }

    .wjportal-companyinfo-middle-wrap {
        width: 100%;
    }


}

@media (max-width: 1080px) {
    .wjportal-pkg-list-item-data {
        grid-template-columns: repeat(1, 1fr);
    }

    .wjportal-by-categories-row-wrp {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        width: 100%;
    }

    .wjportal-by-category-wrp {
        width: 100% !important;
    }
}

/* ----------------------------------------- */
/* == Responsive for this Section          == */
/* ----------------------------------------- */
@media (max-width: 576px) {
    .wjportal-jobs-list-resume-wrp {
        padding-right: 1rem;
        /* Reset right padding */
    }

}

/* featured styling all listing  */
.wpjobportal-list-item-is-featured {
    border: 1px solid #ffb63b;
}

.wpjobportal-list-item-is-featured .wjportal-jobs-logo,
.wpjobportal-list-item-is-featured .wjportal-company-logo,
.wpjobportal-list-item-is-featured .wjportal-resume-logo {
    border: 1px solid #ffb63b;
    width: 155px;
    height: 155px;
    padding: 10px;
}

.wpjobportal-list-item-is-featured .wjportal-resume-data-value,
.wpjobportal-list-item-is-featured .wjportal-jobs-data-text,
.wpjobportal-list-item-is-featured .wjportal-company-data-text-created span.wjportal-company-data-value,
.wpjobportal-list-item-is-featured .wjportal-company-data-location span.wjportal-company-data-value,
.wpjobportal-list-item-is-featured .wjportal-company-data-status span.wjportal-company-data-value {
    color: var(--wpjp-secondary-color);
}

/*==========================================
icons =================================
=========================================*/


.wjportal-resume-action-wrp a::before,
.wjportal-job-type::before,
.wjportal-newest-jobs-date::before,
.wjportal-jobs-act-btn::before,
.wjportal-jobs-act-btn-apply::before,
.wjportal-payment-act-btn::before,
.wjportal-jobs-data-text::before,
.wjportal-companyinfo-data::before,
.wjportal-companyinfo a.wjportal-companyinfo-link::before,
a.wjportal-apply-as-visitor-btn::before,
.wjportal-jobinfo-data::before,
.wjportal-jobinfo-data-view::before,
.wjportal-jobinfo-right-data-location .wjportal-jobinfo-data::before,
.wjportal-tags-item::before,
.wjportal-job-act-btn::before,
.wjportal-job-act-btn-tell::before,
.wjportal-job-act-btn-short::before,
.wjportal-company-btn-wrp a::before,
.wjportal-company-view-all-jobs-btn::before,
.wjportal-company-view-company-btn::before,
.wjportal-applied-job-actions-popup-norec-link::before,
.wjportal-job-applied-actions-btn::before,
.wjportal-main-up-wrapper #popup_message::before,
.wjportal-main-up-wrapper .applynow-closebutton::before,
.wjportal-resume-action-wrp a::before,
.wjportal-resume-job-type::before,
.wjportal-resume-data-text::before,
.wjportal-resume-act-btn.wjportal-resume-act-btn-ai-suggested-jobs::before,
a.wjportal-resume-act-btn-view::before,
.wjportal-folder-act-btn::before,
.wjportal-department-info-tit::before,
.wjportal-department-act-btn::before,
.wjportal-coverletter-act-btn::before,
.wjportal-company-act-btn::before,
.wjportal-main-up-wrapper .frontend.updated::before,
.wjportal-visitor-msg::before,
.wjportal-main-up-wrapper .frontend.error::before,
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message::before,
.wjportal-show-contact-det-btn::before,
.wpjobportal-terms-and-conditions-wrap a::before,
.wjportal-main-up-wrapper .alert-danger::before,
.wjportal-coverletter-act-btn::before,
.wjportal-coverletter-act-btn-view::before,
.wjportal-coverletter-info-tit::before,
.wjportal-save-search-created-text::before,
.wjportal-save-search-act-btn::before,
.wjportal-save-search-act-btn-remove::before,
.wjportal-msg-act-btn::before,
.wjportal-pkg-list-item.featured::before,
.wjportal-pkg-list-item-row::before {
    content: '';
    display: inline-block;
    align-items: center;
    width: 1em;
    height: 1em;
    gap: 0.8rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.wjportal-error-msg-act-btn-back-btn ::before {
    /* User/Profile Icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e");
}

a.wjportal-payment-act-btn::before,
.wjportal-list-act-btn-proceed-payment::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
}

.wjportal-list-act-btn-delete::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

a.wjportal-list-act-btn-edit::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}

.wjportal-list-act-btn-mark-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-list-act-btn-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-company-btn-wrp a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
}

.wjportal-company-view-all-jobs-btn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-view::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
}

.wjportal-list-act-btn-already-applied::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied:before,
.wjportal-list-act-btn-apply::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-copy-job::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
}

.wjportal-list-act-btn-tell-a-friend::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

.wjportal-resume-act-btn-ai-suggested-jobs::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
}

.wjportal-jobs-act-btn-ai-suggested-resumes::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
}


.wjportal-jobs-act-btn-delete-shortlist::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

div#wjportal-listpopup a.wjportal-visitor-msg-btn.wpjobportal-save-shortlist-popup-button::before,
.wjportal-job-act-btn-shortlist::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-applied-resumes::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' 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%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' 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%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
}

.wjportal-list-act-btn-mark-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-list-act-btn-add-note::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/></svg>');
}

.wjportal-list-act-btn-info-details::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
}

.wjportal-list-act-btn-mark-spam::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.wjportal-list-act-btn-mark-not-spam::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.wjportal-list-act-btn-mark-hired::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>');
}

.wjportal-list-act-btn-mark-rejected::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>');
}

.wjportal-list-act-btn-pdf-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
}

.wjportal-list-act-btn-print-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>');
}

.wjportal-list-act-btn-view-message::before,
.wjportal-msg-act-btn::before,
.wjportal-resume-act-btn.wjportal-resume-act-action-links.wjportal-list-act-btn-tell-a-friend.action-links::before,
.wjportal-list-act-btn-send-message-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}

.wjportal-list-act-btn-folder-view-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

.wjportal-list-act-btn-copy-to-folder::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>');
}

.wjportal-list-act-btn-export-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
}

.wjportal-list-act-btn-folder-delete-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

.wjportal-list-act-btn-view-profile::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
}

.wjportal-list-act-btn-change-package::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-select-package {}

.wjportal-list-act-btn-pdf::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
}

.wjportal-list-act-btn-add {}

.wjportal-list-act-btn-unsub-job-alert {}

.wjportal-list-act-btn-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-company-job-viewjob-rightwrp .wjportal-job-detail-about-company-wrap .wjportal-company-btn-wrp a.wjportal-company-view-all-jobs-btn::before,
.wjportal-companydetail-wrapper .wjportal-company-act-btn::before,
.wjportal-company-view-all-jobs-btn::before,
.wjportal-company-view-company-btn::before,
.wjportal-list-act-btn-view-all::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
}

.wjportal-list-act-btn-make-payment::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
}

.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
}

a.wjportal-apply-as-visitor-btn::before,
.wjportal-job-act-btn::before,
.wjportal-jobs-act-btn-apply:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

a.wjportal-apply-as-visitor-btn::before {}

.wjportal-error-msg-act-btn::before {}

.wjportal-list-act-btn-buy-now {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
}

.wjportal-list-act-btn-buy-now::before {
    content: '';
    /* Required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG shopping cart icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

a.wjportal-act-btn.wjportal-unsubscribed-btn-wrp.wjportal-list-act-btn-unsub-job-alert {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
}

.wjportal-list-act-btn-unsub-job-alert::before {
    content: '';
    /* Required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG "notifications off" (bell with a slash) icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM2.1 2.1L.69 3.51 3 5.83V11c0 .32.04.63.1.94L1.6 13.43c-.15.27-.16.6.01.88.17.28.48.45.8.45h2.61l1.82 1.82c-.37.05-.74.08-1.13.08-1.93 0-3.6-1.03-4.55-2.64l-1.5-2.61c0 .02 0 .03-.01.05l-1.49-1.49L2.1 2.1zM20 12.94c.06-.31.1-.62.1-.94V11c0-2.89-1.86-5.4-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S12.5.67 12.5 4v.68c-.5.14-.98.34-1.43.57l1.5 1.5c.16-.05.32-.08.49-.11h.01c2.48 0 4.5 2.02 4.5 4.5v.91l2.02 2.02.53-.29c.17-.28.16-.6-.01-.88l-1.54-2.43z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM2.1 2.1L.69 3.51 3 5.83V11c0 .32.04.63.1.94L1.6 13.43c-.15.27-.16.6.01.88.17.28.48.45.8.45h2.61l1.82 1.82c-.37.05-.74.08-1.13.08-1.93 0-3.6-1.03-4.55-2.64l-1.5-2.61c0 .02 0 .03-.01.05l-1.49-1.49L2.1 2.1zM20 12.94c.06-.31.1-.62.1-.94V11c0-2.89-1.86-5.4-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S12.5.67 12.5 4v.68c-.5.14-.98.34-1.43.57l1.5 1.5c.16-.05.32-.08.49-.11h.01c2.48 0 4.5 2.02 4.5 4.5v.91l2.02 2.02.53-.29c.17-.28.16-.6-.01-.88l-1.54-2.43z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

div#wpjobportal-wrapper.wjportal-by-categories-main-wrp.wjportal-job-by-categories-wrp {
    display: flex;
    flex-wrap: wrap;
}

div#wpjobportal-wrapper.wjportal-by-categories-main-wrp.wjportal-job-by-categories-wrp .wjportal-by-categories-row-wrp {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
}

.wjportal-form-roles .wjportal-form-text {
    padding-top: 12px;
}

a.wjportal-error-msg-act-btn.wjportal-error-msg-act-btn-back-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
}

a.wjportal-error-msg-act-btn.wjportal-error-msg-act-btn-back-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border: 1px solid var(--wpjp-secondary-color);
}

.wjportal-main-up-wrapper a,
.wjportal-main-up-wrapper .wjportal-main-wrapper a:focus {
    text-decoration: unset;
}

.color-accent,
.color-accent-hover:hover,
.color-accent-hover:focus,
:root .has-accent-color,
.has-drop-cap:not(:focus):first-letter,
.wp-block-button.is-style-outline,
a {
    color: #e98d26;
}


.wjportal-pkg-list-item.wpjobportal-packages-list-item-status-expired .wjportal-pkg-list-item-act-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    /* Adds space between the icon and text */

}

.wjportal-pkg-list-item.wpjobportal-packages-list-item-status-expired .wjportal-pkg-list-item-act-btn::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}


/* --- NEW: Linear Progress Bar for Profile Status --- */
.wjportal-progress-bar-container {
    width: 100%;
    padding: 10px 0px;
}

.wjportal-progress-bar-container .wjportal-progress-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.wjportal-progress-bar-container .wjportal-progress-bar-title {
    font-size: var(--font-size);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
}

.wjportal-progress-bar-container .wjportal-progress-bar-percentage {
    font-size: var(--font-size);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-progress-bar-container .wjportal-progress-bar-wrapper {
    width: 100%;
    background-color: #eeeff1;
    border-radius: 5px;
    height: 20px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wjportal-progress-bar-container .wjportal-progress-bar-fill {
    opacity: 0.3;
    height: 100%;
    border-radius: 6px;
    /*background-color: #cbc8ea;*/
    background-color: var(--wpjp-primary-color);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    transition: width 0.6s ease;
    animation: progress-bar-stripes 1s linear infinite;
}

/* * Packages Wrapper
     * This will hold the package items using Flexbox
    */
.wjportal-packages-popup .wjportal-packages-wrp {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap to next line */
    margin: 0 -10px;
    /* Negative margin to counteract padding on items */
}

/* * Individual Package Item (Card)
*/
.wjportal-packages-popup .wjportal-pkg-item {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    margin: 10px;
    /* Space between cards */
    background-color: #fcfcfc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

    /* Flex properties for column layout */
    flex-grow: 1;
    /* Allow items to grow */
    flex-shrink: 1;
    /* Allow items to shrink */
    flex-basis: 300px;
    /* Base width - 2 cards will fit in 800px */

    display: flex;
    flex-direction: column;
    /* Stack top and bottom sections */
    transition: box-shadow 0.2s, transform 0.2s;
}

.wjportal-packages-popup .wjportal-pkg-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.wjportal-packages-popup .wjportal-pkg-item-top {
    padding: 15px 20px;
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wjportal-packages-popup .wjportal-pkg-item-title {
    font-size: var(--wpjp-sub-heading);
    /* 20px */
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    /* A primary blue color */
}

.wjportal-packages-popup .wjportal-pkg-item-btm {
    padding: 20px;
    flex-grow: 1;
    /* Makes bottom section fill available space */
    display: flex;
    flex-direction: column;
}

.wjportal-packages-popup .wjportal-pkg-item-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.95rem;
    /* 15px */
}

.wjportal-packages-popup .wjportal-pkg-item-tit {
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-packages-popup .wjportal-pkg-item-val {
    color: var(--wpjp-body-font-color);
    text-align: right;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-packages-popup .wjportal-pkg-item-btn-row {
    margin-top: auto;
    /* Pushes the button to the bottom */
    padding-top: 15px;
}

/* "Select Package" Button (Link) */
.wjportal-packages-popup .wjportal-pkg-item-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 6px;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    transition: background-color 0.2s;
}

.wjportal-packages-popup .wjportal-pkg-item-btn:hover {
    background-color: var(--wpjp-secondary-color);
}

/* Highlighted/Selected Package */
.wjportal-packages-popup .wjportal-pkg-item.selected {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* Message area */
.wjportal-packages-popup .wjportal-popup-msgs {
    margin-top: 15px;
    font-size: var(--wpjp-body-font-size);
    color: #28a745;
    /* Success color */

}

/* Bottom "Add To Featured" button area */
.wjportal-packages-popup .wjportal-visitor-msg-btn-wrp {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* "Add To Featured" Button */
.wjportal-packages-popup .wjportal-visitor-msg-btn {
    background-color: #28a745;
    /* Green color */
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wjportal-packages-popup .wjportal-visitor-msg-btn:hover {
    background-color: #218838;
}

/* Help Text */
.wjportal-packages-popup .wjportal-pkg-help-txt {
    font-size: var(--wpjp-body-font-size);
    color: #d9534f;
    /* A subtle error/warning color */
    background-color: #fdf7f7;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 20px;
}

/* --- Company list Widget Styles --- */

/* NEW: This is the main wrapper for the *list* of widgets */
.wpjobportal-companies-widget-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* This creates the space *between* the company rows */
}

/* This is the main card container for EACH widget row */
.wpjobportal-companies-list-row {
    width: 100%;
    /* max-width: 700px; */
    /* No longer needed, as wrapper handles width */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 1.5rem;
    box-sizing: border-box;
    /* Ensures padding is included in width */

    /* We use CSS Grid for a robust layout.
      It creates two columns: one for the logo, one for the content.
      The content column itself has two rows: title and details.
    */
    display: grid;
    grid-template-columns: auto 1fr;
    /* logo | content */
    grid-template-rows: auto auto;
    /* title | details */
    grid-template-areas:
        "logo title"
        "logo details";
    gap: 0rem 1.5rem;
    /* 1rem row-gap, 1.5rem column-gap */
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-companies-list-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Logo column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-col-logo {
    grid-area: logo;
    /* Assigns this div to the 'logo' area */
}

.wpjobportal-companies-list-row .wpjobportal-companies-list-col-logo img {
    display: block;
    width: 100px;
    /* Fixed width */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 15px;
    border: 1px solid #eee;
    padding: 10px;
}

/* Title row in the content column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-col-title {
    grid-area: title;
    /* Assigns this div to the 'title' area */
    align-self: end;
    /* Aligns title to the bottom of its cell */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-companies-list-row .wpjobportal-companies-list-col-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    transition: color 0.2s ease;

    /* Prevents long titles from breaking the layout */
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-companies-list-row .wpjobportal-companies-list-col-title a:hover {
    color: var(--wpjp-primary-color);
    /* Same purple as login button */
    text-decoration: underline;
}

/* Details row in the content column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-copmany-detail-wrap {
    grid-area: details;
    /* Assigns this div to the 'details' area */
    align-self: start;
    /* Aligns details to the top of its cell */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Space between Location and Posted */
    padding-top: 0.5rem;
}

.wpjobportal-companies-list-row .wpjobportal-company-field {
    justify-content: flex-start;
}

.wpjobportal-companies-list-row .wpjobportal-company-field {
    font-size: var(--wpjp-body-font-size);
    color: #495057;
}

.wpjobportal-companies-list-row .wpjobportal-company-field-label {
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    margin-right: 0.25rem;
}

/* --- Responsive behavior for mobile --- */
@media (max-width: 600px) {
    .wpjobportal-companies-list-row .wpjobportal-companies-list-row {
        /* Change to a single column layout on mobile.
          Logo goes on top, then title, then details.
        */
        grid-template-columns: 1fr;
        /* Full width */
        grid-template-areas:
            "logo"
            "title"
            "details";
        gap: 1rem;
        padding: 1.25rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .wpjobportal-companies-list-row .wpjobportal-companies-list-col-logo {
        justify-self: start;
        /* Align logo to the left */
    }

    .wpjobportal-companies-list-row.wpjobportal-companies-list-col-title {
        align-self: start;
        /* Reset alignment */
    }

    .wpjobportal-companies-list-row .wpjobportal-companies-list-copmany-detail-wrap {
        padding-top: 0;
        /* Remove extra padding */
    }
}


/* --- Company grid Widget Styles --- */

/* This creates the responsive grid */
/* --- New Widget Styles --- */

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .elementor-widget-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* This creates the responsive grid */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-companies-grid-wrapper {
    display: grid;
    /* Creates a responsive grid:
       - On large screens: 3 columns
       - On medium screens: 2 columns
       - On small screens: 1 column
       - minmax(300px, 1fr) ensures cards are at least 300px wide
    */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* This is the main card for each company */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 2rem 1.5rem;
    margin-bottom: 15px;
    /* Use flex to align content vertically and center it */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Company Logo */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-logo img {
    display: block;
    border-radius: 10%;
    /* Make it circular */
    border: 2px solid #f0f0f0;
    object-fit: contain;
    /* Prevents image stretching */
    margin-bottom: 1.25rem;
    padding: 10px;
}

/* Company Title */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-title {
    margin-bottom: 0.75rem;
    /* Ensure title doesn't take up extra space */
    flex-grow: 0;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    word-break: break-word;
    transition: color 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-title a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

/* Company Details (Location, Posted) */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);

    /* This makes the details section grow to fill space,
       pushing the button to the bottom */
    flex-grow: 1;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-field {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* In case value is long */
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-field-label {
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    margin-right: 0.35rem;
}

/* "View Company" Button */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-grid-view-company-button {
    border: 1px solid var(--wpjp-border-color);
    display: inline-block;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    background-color: #fff;
    /* Light purple */
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    /* Make button full width of card padding */
    max-width: 250px;
    box-sizing: border-box;

    /* This ensures the button is at the bottom */
    flex-grow: 0;
    margin-top: auto;
    /* Pushes button to bottom */

}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-grid-view-company-button:hover {
    background-color: var(--wpjp-secondary-color);
    color: #ffffff;
}


/* ========================================================================================================
---------------- job List Widget Styles --- 
=============================================================================================*/

/* Wrapper for the whole widget */
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list.wpjobportal-cols-1 {
    width: 100%;
}

/* The main list item card */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-box {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    /* 24px */
    background-color: white;
    border-radius: 0.75rem;
    /* 12px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    /* 24px */
    width: 100%;
    box-sizing: border-box;
    /* Ensures padding doesn't break width */
    border: 1px solid var(--wpjp-border-color);

}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-box.wpjobportal-floatbox {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-box.wpjobportal-floatbox:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Logo container */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-logo {
    flex-shrink: 0;
    /* Prevents logo from shrinking */
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-logo img {
    border-radius: 0.5rem;
    /* 8px */
    object-fit: contain;
    border: 1px solid #e5e7eb;
    /* Light border */
    display: block;
    padding: 10px;
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data.wpjobportal-job-apply_before {
    color: #a11616;
}

/* Main details section (grows to fill space) */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-details {
    flex-grow: 1;
    min-width: 0;
    /* Fix for flexbox overflow */
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    margin-bottom: 0.25rem;
    /* 4px */
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-title a {
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-primary-color);
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-company {
    font-size: var(--wpjp-body-font-color);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    margin-bottom: 0.75rem;
    /* 12px */
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-company a {
    color: var(--wpjp-primary-color);
    text-decoration: none;
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-company a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);

}

/* Wrapper for the metadata items */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-meta-row {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 0.75rem 1.5rem;
    /* 12px row gap, 24px column gap */
    padding-top: 0.75rem;
    /* 12px */
    border-top: 1px solid #f3f4f6;
    /* Light divider */
}

/* Individual metadata item */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    font-size: var(--wpjp-body-font-size);
    /* 14px */
    color: var(--wpjp-body-font-color);
}


/* Responsive adjustments */
@media (max-width: 640px) {
    .wpjobportal-job-box {
        flex-direction: column;
        /* Stack logo on top */
        align-items: center;
        /* Center-align content */
        gap: 1rem;
        padding: 1.5rem 1rem;
    }

    .wpjobportal-job-details {
        text-align: center;
        /* Center text */
    }

    .wpjobportal-job-meta-row {
        justify-content: center;
        /* Center meta items */
        gap: 0.5rem 1rem;
    }
}


/*===================================================================================================
========================job grid widget=======================================================
==================================================================================*/

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-row {
    background-color: white;
    border-radius: 0.75rem;
    /* 12px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 2rem 1.5rem;
    /* Vertical and horizontal padding */
    text-align: center;
    /* Center everything inside */
    width: 100%;
    display: flex;
    justify-content: center;
    border: 1px solid var(--wpjp-border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

}


.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}



.wpjobportal-layout-grid.wpjobportal-cols-1 .company-logo {
    display: inline-block;
    /* Allows centering with text-align on parent */
    margin-bottom: 1.5rem;
    /* Space below the logo */
    padding: 0.75rem;
    /* Padding inside the logo container */
    border-radius: 0.5rem;
    /* Rounded corners for the container */
    background-color: #f9fafb;
    /* Very light gray background */
    border: 1px solid #e5e7eb;
    /* Light border */
    justify-content: center;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-logo {
    display: flex;
    justify-content: center;

}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-logo img {
    border-radius: 0.5rem;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    display: block;
    padding: 10px;
}


.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-title {
    font-size: var(--wpjp-sub-heading);
    /* 20px */
    font-weight: 600;
    /* Semi-bold */
    color: var(--wpjp-secondary-color);
    /* Darker gray */
    margin-bottom: 0.5rem;
    text-decoration: none;
    display: block;
    /* Ensures it takes full width and centers */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-title :hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-title a {
    font-size: var(--wpjp-sub-heading);
    /* 20px */
    font-weight: 600;
    /* Semi-bold */
    color: var(--wpjp-secondary-color);
    /* Darker gray */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-company a {
    font-size: var(--wpjp-body-font-size);
    /* 16px */
    font-weight: 500;
    color: var(--wpjp-primary-color);
    /* Medium gray */
    margin-bottom: 1.5rem;
    /* Space below company name */
    text-decoration: none;
    display: block;
    /* Ensures it takes full width and centers */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-company a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline;
}

/* Container for all detail fields */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-meta-col {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    /* Divider line */
    display: flex;
    /* Use flexbox for vertical stacking */
    flex-direction: column;
    /* Stack items vertically */
    gap: 0.75rem;
    /* Space between each detail item */
}

/* Individual detail field */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data {
    display: flex;
    /* Makes content and icon align horizontally */
    align-items: center;
    justify-content: center;
    /* Center the content of each item */
    gap: 0.5rem;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);
    /* About 15px */
    color: var(--wpjp-body-font-color);
    /* Medium gray */
    line-height: 1.5;
    width: 100%;
    /* Ensures it takes full width */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data svg {
    width: 1rem;
    /* 16px */
    height: 1rem;
    /* 16px */
    color: #9ca3af;
    /* Icon color */
    flex-shrink: 0;
    /* Prevents icon from shrinking */
}

/* Specific styling for job type tag */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wjportal-job-type {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    padding: 5px;
    /* 2px 10px */
    border-radius: 9999px;
    color: white;
    background-color: #b557b5;
    /* From original inline style */
    display: inline-block;
    /* Allows padding and background */
    margin-left: 0.25rem;
    /* Small space after "Job Type:" */
    width: 50%;
}


.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-apply_before svg {
    color: #d9480f;
}

/* Small adjustment for the Job Type line to prevent wrapping if possible */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-job_type {
    white-space: nowrap;
    /* Tries to keep "Job Type: Part-Time" on one line */

}

/*===================================================================================================
========================job Card widget=======================================================
==================================================================================*/

.wpjobportal-layout-card.wpjobportal-cols-1 {
    width: 100%;
    margin: 0 auto;
    display: grid;
    /* Creates a responsive grid:
       - minmax(320px, 1fr) ensures cards are at least 320px wide
       - auto-fit fills the space
    */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* This is the main card for each job */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 1.5rem;

    /* Use Grid to lay out the logo and details */
    display: grid;
    grid-template-columns: auto 1fr;
    /* col 1 for logo, col 2 for details */
    gap: 1.25rem;
    align-items: start;
    /* Align logo and text block to the top */

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Job Logo */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-logo img {
    display: block;
    border-radius: 8px;
    /* Rounded square logo */
    border: 1px solid #eee;
    object-fit: contain;
    padding: 10px;
}

/* Container for all text content */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Small gap between title and company */
}

/* Job Title */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-title a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

/* Company Name */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-company a {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-company a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline;
}

/* Container for all the meta fields */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-meta-col {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    /* Space between each meta item */
    margin-top: 1.25rem;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding-top: 1.25rem;
}

/* Individual meta field (e.g., Salary, Location) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    line-height: 1.5;
    justify-content: flex-start;
}

/* Add icons to the meta fields */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
    width: 16px;
    text-align: center;
    color: #8a94a6;
}


/* Style for the "Part-Time" tag */
.wpjobportal-layout-card.wpjobportal-cols-1 .wjportal-job-type {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
}


/*===================================================================================================
========================Resume Card widget=======================================================
==================================================================================*/


/* 1. Main Widget Container */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-widget-multi-style-wrapper {
    max-width: 480px;
    /* Constrain widget width */
    width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 15px;
    box-sizing: border-box;
}

/* 2. Individual Resume Row Separator */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--wpjp-border-color);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-row:last-child {
    border-bottom: none;
    /* Remove border from the last item */
    margin-bottom: 0;
}

/* 3. Resume Box (Flexbox for Alignment) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    padding: 5px 0;
}

/* 4. Resume Photo */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-photo {
    flex-shrink: 0;
    /* Prevent photo from shrinking */
    border-radius: 10px;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-photo img {
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    /* Blue ring for emphasis */
    padding: 5px;
}

/* 5. Resume Details (Text content area) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-details {
    flex-grow: 1;
    /* Take up remaining space */
}

/* 6. Name and Title */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading);
    /* 16px */
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    /* Dark text */
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-title a {
    font-size: var(--wpjp-body-font-size);
    /* Slightly smaller title */
    font-weight: 500;
    color: var(--wpjp-primary-color);
    /* Medium gray */
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-widget-detail-field-data {
    width: 100%;
}

/* 7. Meta Information */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-meta-col {
    font-size: var(--wpjp-body-font-size);
    /* 12px for meta data */
    color: var(--wpjp-body-font-color);
    /* Light gray text */
    display: flex;
    flex-wrap: wrap;
    /* Allows meta fields to wrap on very small screens */
    gap: 5px 10px;
    /* Vertical and horizontal gap between meta items */
}

.wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
}

/* Highlight specific meta data if desired (e.g., Category) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-category {
    color: var(--wpjp-body-font-color);
    /* Blue for category */

}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-posted {
    font-style: italic;
}

/* 8. View All Button */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-view-all-button {
    display: block;
    width: calc(100% - 10px);
    /* 100% minus the widget padding */
    margin: 15px auto 5px auto;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Button Styling */
    background-color: var(--wpjp-primary-color);
    /* Light gray background */
    color: #fff;
    /* Dark gray text */

}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-view-all-button:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/*===================================================================================================
========================Resume box widget=======================================================
==================================================================================*/

/* 1. Main Widget Container */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-widget-multi-style-wrapper {
    max-width: 480px;
    /* Constrain widget width */
    width: 100%;
    background-color: #f8fafc;
    /* Light background for the overall widget */
    border-radius: 12px;
    padding: 10px;
    /* Reduced overall padding since inner boxes will have it */
    box-sizing: border-box;
}


/* 2. Individual Resume Row Separator - Used for vertical spacing between boxes */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-row {
    padding: 10px 0;
    /* Vertical margin between boxes */
    border-bottom: none;
    /* No separator line */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-row:last-child {
    padding-bottom: 0;
}

/* 3. Resume Box (New "Box Style" Container) */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-box {
    display: flex;
    flex-direction: column;
    /* Stack photo and details vertically */
    align-items: center;
    /* Center content horizontally */
    background: #ffffff;
    padding: 20px;
    /* Internal padding for the box */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* Light shadow for box depth */
    border: 1px solid var(--wpjp-border-color);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* 4. Resume Photo */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-photo {
    flex-shrink: 0;
    margin-bottom: 15px;
    /* Space below the photo */
    border-radius: 10px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-photo img {
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    padding: 5px;
}

/* 5. Resume Details (Text content area) */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-details {
    width: 100%;
    /* Ensure details section uses full width */
    text-align: center;
    /* Center name and title */
}

/* 6. Name and Title */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-name {
    margin-bottom: 5px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading);
    /* 18px - slightly larger name */
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-title a {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

/* 7. Meta Information - FULL-WIDTH STACKED FIELDS (NOW CENTER ALIGNED) */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-meta-col {
    font-size: var(--wpjp-body-font-size);
    /* 14px - slightly larger meta data for readability */
    color: var(--wpjp-body-font-color);
    display: flex;
    flex-direction: column;
    /* STACKED FIELDS */
    width: 100%;
    gap: 4px;
    /* Small space between stacked fields */
    text-align: center;
    /* CENTER ALIGNED TEXT */
    border-top: 1px dashed #e5e7eb;
    padding-top: 10px;
    margin-top: 10px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
    width: 100%;
    /* Ensure each field takes full width */
    padding: 2px 0;
}

/* Highlight specific meta data */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-category {

    color: var(--wpjp-body-font-color);
    /* Use a green color for category highlight */
}


/* 8. View All Button */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-view-all-button {
    display: block;
    width: calc(100% - 10px);
    margin: 20px auto 5px auto;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Button Styling */
    background-color: var(--wpjp-primary-color);
    /* Primary blue button */
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-view-all-button:hover {
    background-color: var(--wpjp-secondary-color);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
}

/*===================================================================================================
========================Resume List widget=======================================================
==================================================================================*/

/* 1. Main Widget Container */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-widget-multi-style-wrapper {
    width: 100%;
    background-color: #f8fafc;
    /* Light background for the overall widget */
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
}


/* 2. Individual Resume Row Separator - Used for vertical spacing between boxes */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-row {
    padding: 10px 0;
    /* Vertical margin between boxes */
    border-bottom: none;
    /* No separator line */

}


.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-row:last-child {
    padding-bottom: 0;
}

/* 3. Resume Box (List Item Card) */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-box {
    display: flex;
    flex-direction: row;
    /* Horizontal List Layout */
    align-items: flex-start;
    /* Center content vertically in the row */
    background: #ffffff;
    padding: 15px;
    /* Slightly less internal padding */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--wpjp-border-color);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* 4. Resume Photo */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-photo {
    flex-shrink: 0;
    margin-bottom: 0;
    /* Removed vertical margin */
    margin-right: 15px;
    /* Added horizontal spacing */
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-photo img {
    padding: 5px;
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    /* Adjusted border width */
    box-shadow: none;
    /* Removed shadow on image */
}

/* 5. Resume Details (Text content area) */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-details {
    flex-grow: 1;
    text-align: left;
    /* Left align text */
    color: var(--wpjp-body-font-color);

}

/* 6. Name and Title */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-name {
    margin-bottom: 2px;
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading);
    /* Slightly smaller name for list view */
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-title a {
    font-size: var(--wpjp-body-font-size);
    /* Smaller title */
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    /* Reduced vertical spacing */
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-resume-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

/* 7. Meta Information - FULL-WIDTH STACKED FIELDS (NOW LEFT ALIGNED) */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-meta-col {
    font-size: var(--wpjp-body-font-size);
    /* Smaller meta font for list */
    color: var(--wpjp-body-font-color);
    display: flex;
    flex-direction: column;
    /* Keep fields stacked for full-width info display */
    width: 100%;
    gap: 2px;
    /* Reduced space between stacked fields */
    text-align: left;
    /* LEFT ALIGNED TEXT */
    border-top: none;
    /* Removed separator dash line */
    padding-top: 0;
    margin-top: 5px;
    /* Small top margin */
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
    padding: 0;
}

/* Highlight specific meta data */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-category {
    color: var(--wpjp-body-font-color);
    /* Use a green color for category highlight */
}

/* 8. View All Button */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-view-all-button {
    display: block;
    width: calc(100% - 10px);
    margin: 20px auto 5px auto;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Button Styling */
    background-color: var(--wpjp-primary-color);
    /* Primary blue button */
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-view-all-button:hover {
    background-color: var(--wpjp-secondary-color);

}


/*===================================================================================================
======================== Resume seach Widget =======================================================
==================================================================================*/

/* 1. Main Widget Container Styling (Card Effect) */
#wpjobportal_mod_wrapper {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

/* 2. Form Title */
.wjportal-search-mod.wjportal-form-mod h2 {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 700;
    color: #1f2937;
    /* Dark gray text */
    margin-bottom: 24px;
    text-align: center;
}

/* 3. General Form Row Layout (Stacked - mobile first) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Space between rows */
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Override the inline width: 100% is fine, but need to ensure it stacks */
    width: 100% !important;
    margin-bottom: 0;
    gap: 10px;
}


/* 4. Labels */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-tit {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    /* 14px */
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    /* Medium gray text */
    margin-bottom: 4px;
}

/* Style the hidden/dummy title div in the button row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row .wjportal-form-tit {
    display: none;
}

/* 5. Inputs and Selects */
.wjportal-search-mod.wjportal-form-mod.wjportal-search-mod.wjportal-form-mod .wjportal-form-val {
    width: 100%;
}

.wjportal-search-mod.wjportal-form-mod .inputbox {
    box-sizing: border-box;
    /* Important for padding/border not breaking width */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    color: #1f2937;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    /* Remove default browser styling for select */
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
}

.wjportal-search-mod.wjportal-form-mod .inputbox:focus {
    outline: none;
    border-color: #3b82f6;
    /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 6. Buttons and Button Row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row {
    display: flex;
    width: 100%;
    gap: 12px;
    padding-top: 16px;
}


.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn,
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    /* For the <a> tag button */
    box-sizing: border-box;
}

/* Primary Button (Search Resume) */
.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn {
    background-color: var(--wpjp-primary-color);
    /* Blue */
    color: #ffffff;
    border: none;

}

.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    /* Darker blue */

}

/* Secondary Button (Advance Search) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    background-color: #f3f4f6;
    /* Light gray */
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn:hover {
    background-color: #e5e7eb;
    /* Darker light gray */
    color: #1f2937;
}

/* Styling for nested options for better visual hierarchy */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option {
    color: #1f2937;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="56"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="57"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="58"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="59"] {
    padding-left: 10px;
    background-color: #fefefe;
}

/*===================================================================================================
======================== Resume seach Widget =======================================================
==================================================================================*/

/* 1. Main Widget Container Styling (Card Effect) */
#wpjobportal_mod_wrapper {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

/* 2. Form Title */
.wjportal-search-mod.wjportal-form-mod h2 {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 700;
    color: #1f2937;
    /* Dark gray text */
    margin-bottom: 24px;
    text-align: center;
}

/* 3. General Form Row Layout (Stacked - mobile first) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Space between rows */
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Override the inline width: 100% is fine, but need to ensure it stacks */
    width: 100% !important;
    margin-bottom: 0;
    gap: 10px;
}


/* 4. Labels */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-tit {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    /* 14px */
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    /* Medium gray text */
    margin-bottom: 4px;
}

/* Style the hidden/dummy title div in the button row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row .wjportal-form-tit {
    display: none;
}

/* 5. Inputs and Selects */
.wjportal-search-mod.wjportal-form-mod.wjportal-search-mod.wjportal-form-mod .wjportal-form-val {
    width: 100%;
}

.wjportal-search-mod.wjportal-form-mod .inputbox {
    box-sizing: border-box;
    /* Important for padding/border not breaking width */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    color: #1f2937;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    /* Remove default browser styling for select */
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
}

.wjportal-search-mod.wjportal-form-mod .inputbox:focus {
    outline: none;
    border-color: #3b82f6;
    /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 6. Buttons and Button Row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row {
    display: flex;
    width: 100%;
    gap: 12px;
    padding-top: 16px;
}


.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn,
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    /* For the <a> tag button */
    box-sizing: border-box;
}

/* Primary Button (Search Resume) */
.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn {
    background-color: var(--wpjp-primary-color);
    /* Blue */
    color: #ffffff;
    border: none;

}

.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    /* Darker blue */

}

/* Secondary Button (Advance Search) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    background-color: #f3f4f6;
    /* Light gray */
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn:hover {
    background-color: #e5e7eb;
    /* Darker light gray */
    color: #1f2937;
}

/* Styling for nested options for better visual hierarchy */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option {
    color: #1f2937;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="56"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="57"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="58"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="59"] {
    padding-left: 10px;
    background-color: #fefefe;
}

/* job by category / type widget =======================================*/
/* job by category / type widget - Flexbox Conversion */

div.wjportal-job-by-mod {
    display: inline-block;
    width: 100%;
}

div.wjportal-job-by-mod div.wjportal-job-by {
    display: inline-block;
    width: 100%;
}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item {
    display: flex;
    width: 100% !important;
    padding: 10px 0;
    justify-content: flex-start;
}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item .wjportal-job-by-item-cnt {
    display: block;
    padding: 1.5rem;
    /* p-6 */
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--wpjp-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item .wjportal-job-by-item-cnt:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.03);
    border-color: var(--wpjp-primary-color);
    color: var(--wpjp-primary-color);

}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item .wjportal-job-by-item-cnt span.wjportal-job-by-item-num {
    text-align: right;
}


/* job Stats / stats =======================================*/
div#wpjobportals_mod_wrapper {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

div#wpjobportals-mod-heading {
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    padding: 0 0 10px 0;
}

div#wpjobportals-data-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wpjobportals-value.wjportal-stats-data {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--wpjp-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

.wpjobportals-value.wjportal-stats-data:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.03);
    border-color: var(--wpjp-primary-color);
    color: var(--wpjp-primary-color);
}

.wjportal-job-by-loc-item {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--wpjp-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

.wjportal-job-by-loc-item:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.03);
    border-color: var(--wpjp-primary-color);
    color: var(--wpjp-primary-color);
}

a.wjportal-job-by-loc-item-cnt {
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

a.wjportal-job-by-loc-item-cnt:hover {
    color: var(--wpjp-primary-color);

}


/*======= Add Shees ===============*/

.wjportal-form-row.visible.js-form-custm-flds-wrp {
    display: none;
}

.wjportal-company-desc {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: column;
}

div#job-applied-resume-wrapper.wjportal-job-applied-resume {
    position: relative;
    z-index: 9999 !important;
    width: 100%;
}

/* Show the menu when the container is focused */
/*.wjportal-resume-act-actions-dropdown:focus-within .wjportal-resume-act-actions-dropdown-menu, .wjportal-resume-act-actions-dropdown:hover .wjportal-resume-act-actions-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 99999;
}*/
div.wjportal-elegant-addon-main-up-wrapper div.wjportal-applied-job-adv-search-wrp div.wjportal-applied-job-adv-search-action-wrp {
    justify-content: center;
}

.wjportal-main-up-wrapper .wjportal-form-map {width: 600px;max-width: 100%;}
.wjportal-job-applied-actions-btn-wrp input#send,
.wjportal-main-up-wrapper input.wjportal-visitor-msg-btn,
.wjportal-main-up-wrapper .wjportal-form-btn-wrp input#save, .wjportal-main-up-wrapper input#save-comments {background-color: var(--wpjp-primary-color);color: #fff;border: 1px solid var(--wpjp-primary-color);border-radius: 8px;padding: 10px 15px;font-size: var(--wpjp-body-font-size);font-weight: 600;cursor: pointer;transition: all 0.2s ease;display:inline-flex;align-items: center;gap: 8px;text-transform: none;line-height: inherit;}

.wjportal-job-applied-actions-btn-wrp input#send:hover,
.wjportal-main-up-wrapper input.wjportal-visitor-msg-btn:hover,
.wjportal-main-up-wrapper .wjportal-form-btn-wrp input#save:hover, .wjportal-main-up-wrapper input#save-comments:hover {background-color: var(--wpjp-secondary-color);border: 1px solid var(--wpjp-secondary-color);color: #fff;text-decoration: none;}
.wjportal-featured-tag-icon-wrp .featurednew-onhover.wjportal-featured-hover-wrp{margin-left: 10px;}

@media (max-width: 1750px) {
    .wjportal-main-up-wrapper {
        max-width: 1250px !important;
    }
}

@media (max-width: 1550px) {
    .wjportal-main-up-wrapper {
        max-width: 1200px !important;
    }
}

@media (max-width: 1280px) {
    .wjportal-main-up-wrapper {
        max-width: 1080px !important;
    }
}
@media (max-width: 1080px) {
    div.wjportal-cp-content-mainwrp{
        flex-wrap: wrap;
    }
}