/*
* Author: Travis - Mediaplus
*/
*{
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes spin-reverse {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
figcaption{
    font-style: normal !important;
}
.jobsearchupoldcover-con.jobsearch-fileUpload span:after{
    content: 'Upload Latest CV' !important;
}
.jobsearch-candcover-uplodholdr .jobsearch-deluser-coverfile{
    left: 150px !important;
}
.mdp-pagination{
    display: flex;
    justify-content: center;
    margin: 30px 0 !important;
}
.mdp-pagination>* {
    background: #fff;
    border: 1px solid #9C9EFE;
    border-radius: 4px;
    width: 49px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    color: #9C9EFE;
    margin: 10px !important;
}
.mdp-pagination .current{
    background: #9C9EFE;
    color: #fff;
}
.searchResults {
    float: unset !important;
}
.wrap-content {
    position: relative;
}
.ajax-loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 40%);
    display: none;
}
.ajax-loading .icon-loading {
    font-size: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 30px;
    height: 30px;
}
.ajax-loading .icon-loading:before, .ajax-loading .icon-loading:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid transparent;
}
.ajax-loading .icon-loading:before {
    border-top-color: #3498db;
    border-bottom-color: #3498db;
    animation: spin 1.5s linear infinite;
}
.ajax-loading .icon-loading:after {
    border-left-color: #f3f3f3;
    border-right-color: #f3f3f3;
    animation: spin-reverse 1.5s linear infinite;
}
.filter-temp {
    background-color: #9c9efe;
    width: 100%;
    margin-bottom: 33px;
    padding: 15px 19px 15px 19px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.filter-temp span {
    background-color: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 2px;
    color: #3b3b3b;
    display: inline-flex;
    font-size: 12px;
    padding: 2px 8px 3px;
    align-items: center;
    margin: 5px;
    cursor: pointer;
}
.filter-temp span i{
    font-style: normal;
}
.filter-temp .filter.action i {
    color: #ffffff !important;
    margin-right: 5px;
    font-size: 16px;
    font-style: normal;
}
.filter-temp span label {
    pointer-events: none;
}
.filter-temp span.clear {
    background: transparent;
    color: #fff;
    border-radius: 30px;
    padding: 0 30px;
    height: 32px;
    border: 1px solid #fff;
}
.filter-temp span.clear i {
    display: none;
}
.filter-temp span.filter {
    background: transparent;
    color: #fff;
    border-radius: 30px;
    padding: 0 30px;
    height: 32px;
    border: 1px solid #fff;
}
.fiter-entry {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}
.fiter-entry .count-items {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    display: flex;
}
.fiter-entry .count-items label {
    line-height: 1.4;
}
.fiter-entry .count-items .count {
    margin-right: 5px;
}
.fiter-entry .sorts {
    display: flex;
    flex-wrap: wrap;
}
.fiter-entry .sorts .orderby {
    display: flex;
    align-items: center;
    margin-right: 30px;
}
.fiter-entry .sorts .per_page {
    display: flex;
    align-items: center;
}
.fiter-entry .sorts select {
    border: none;
}
.filter-wrap .filter-items .filter-item span i {
    font-style: normal;
    width: 20px;
    height: 20px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}
.filter-wrap .filter-items .filter-item:hover span i {
    background: #9C9EFE;
    color: #fff;
}
p.not-found {
    text-align: center;
    padding: 80px 0;
    font-size: 20px;
}
.jobsearch-select-style.sector {
    position: relative;
}
.jobsearch-select-style.sector span {
    padding-left: 20px;
    white-space: nowrap;
}
.jobsearch-select-style.sector .wrap {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    transition: all 350ms;
    min-width: 250px;
    background: #fff;
    box-shadow: 0 3px 3px #999;
    padding: 10px 15px;
    width: 100%;
}
.jobsearch-select-style.sector:hover .wrap {
    visibility: visible;
    opacity: 1;
}
.jobsearch-select-style.sector .wrap .local-search {
    border: 1px solid #ccc !important;
    box-shadow: none;
    height: 28px;
    padding: 5px 10px;
    font-size: 12px;
    margin-bottom: 10px;
    width: 100%;
}
.jobsearch-select-style.sector .wrap ul {
    margin: 0 0 15px 0;
    max-height: 250px;
    overflow-y: auto;
    display: block !important;
    float: none !important;
    width: 100%;
}
.jobsearch-select-style.sector .wrap ul li {
    width: 100% !important;
    float: none !important;
    list-style-type: none;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    line-height: 1.4;
    padding: 5px 0 5px 20px;
    max-width: 100% !important;
}
.jobsearch-select-style.sector .wrap ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 12px;
    margin: 0 0 0 0;
    border: 1px solid #c2d1d3;
    box-shadow: 0 0 0 3px #ffffff inset;
}
.jobsearch-select-style.sector .wrap ul li.active:before {
    background-color: #9c9efe;
}
.jobsearch-select-style.sector .wrap .filter {
    cursor: pointer;
}
.jobsearch-select-style.sector .wrap .filter span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px 20px;
    background: #9C9EFE;
    color: #fff;
    font-size: 14px;
    border-radius: 30px;
    white-space: nowrap;
}
.jobsearch-banner-submit .search-btn {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
    cursor: pointer;
}
.jobsearch-select-style.sector span i {
    font-style: normal;
    width: 20px;
    height: 20px;
    background: #9C9EFE;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}
/*added by jon april 2024*/

.more-less-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px !important;
    margin-top: 50px;
}
.more-less {
    cursor: pointer;
    background: #fff;
    border: 2px solid #9C9EFE;
    color: #9C9EFE;
    border-radius: 30px;
    width: 125px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px !important;
}
.more-less:hover {
    background: #9C9EFE;
    color: #fff;
}
.more-less span.less {
    display: none;
}
.more-less.active span.less {
    display: block;
}
.more-less.active span.more {
    display: none;
}
.filter-temp span {
    font-weight: bold;
}
.filter-temp span label {
    font-weight: normal;
}
.cart-empty.woocommerce-info {
    margin: 50px 0;
    text-align: center;
}
.return-to-shop {
    text-align: center;
}
.return-to-shop a {
    color: #fff !important;
}
.view-all-btn {
    cursor: pointer;
    background: #fff;
    border: 2px solid #9C9EFE;
    color: #9C9EFE;
    border-radius: 30px;
    width: 125px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px !important;
}
.view-all-btn:hover {
    background: #9C9EFE;
    color: #fff;
}
.view-all-btn span.less {
    display: none;
}
.view-all-btn.active span.less {
    display: block;
}
.view-all-btn.active span.more {
    display: none;
}
.candidate-list-for-download-cv .item-inner {
    box-shadow: 0 0 5px #ebebeb;
}
.repost-wrap .choose-package {
    display: none;
}
.repost-wrap .confirm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.repost-wrap p {
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 30px;
    color: #000;
}
.repost-wrap .confirm p {
    margin-bottom: 0;
}
.repost-wrap .confirm span {
    padding: 5px 30px;
    border: 1px solid #9c9efe;
    color: #9c9efe;
    width: 140px;
    margin: 22px 8px 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.repost-wrap .confirm span a {
    color: #9c9efe;
    display: flex;
    align-items: center;
    justify-content: center;
}
.repost-wrap.yes .confirm {
    display: none;
}
.repost-wrap.yes .choose-package {
    display: block;
}
.jobsearch-user-form i.jobsearch-icon{
    bottom: auto !important;
    top: 35px !important;
}
.phon-num-fieldcon{
    position: relative;
}
.phon-num-fieldcon:before{
    content: "\e93c";
    font-family: 'wp-jobsearch-icomoon' !important;
    font-size: 18px;
    color: #9c9efe;
    position: absolute;
    top: 50%;
    right: 15px;
    z-index: 1;
}
.jobsearch-register-form .phon-num-fieldcon:before{
    transform: translateY(-50%);
}
.jobsearch-user-form i.jobsearch-icon.jobsearch-technology{
    display: none !important;
}
.jobsearch-candcover-uplodholdr i.jobsearch-arrows-2{
    color: #fff !important;
}
.jobsearch-applyjob-internalmain .jobsearch-applyjob-btn{
    color: #fff !important;
}
.jobsearch-applyjob-internalmain .jobsearch-applyjob-btn:hover{
    color: #7e80f3 !important;
}

.jobsearch-candcover-uplodholdr li{
    position: relative;
}
.phon-num-fieldcon:before {
    content: "\e93c";
    font-family: 'wp-jobsearch-icomoon' !important;
    font-size: 18px;
    color: #9c9efe;
    position: absolute;
    top: 50%;
    right: 15px;
    z-index: 1;
}
.jobsearch-register-form .jobsearch-modal .jobsearch-modal-title-box h2{
    margin-bottom: 8px;
}
.jobsearch-register-form .jobsearch-modal-title-box{
    margin-bottom: 20px;
}
.jobsearch-register-form .phon-num-fieldcon:before {
    transform: translateY(-50%);
}
.jobsearch-user-form i.jobsearch-icon.jobsearch-technology {
    display: none !important;
}
.jobsearch-candcover-uplodholdr i.jobsearch-arrows-2 {
    color: #fff !important;
}
.jobsearch-applyjob-internalmain .jobsearch-applyjob-btn {
    color: #fff !important;
}
.jobsearch-applyjob-internalmain .jobsearch-applyjob-btn:hover {
    color: #7e80f3 !important;
}
.jobsearch-candcover-uplodholdr li {
    position: relative;
}
.jobsearch-candcover-uplodholdr li>a {
    display: block;
    font-size: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.wrap-skills #cand-skills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
/* ══════════════════════════════════════════════════════════════
   Global Button Style — Primary #9c9efe
   ══════════════════════════════════════════════════════════════ */

/* Primary filled button */
.mpjs-btn-save-profile,
.mdp-flport-add-btn,
.mdp-ai-cv-save-btn,
.mdp-flp-save-btn,
button[class*="mdp-flp-save"],
button[class*="mpjs-btn-save"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #9c9efe !important;
    color: #fff !important;
    border: 2px solid #9c9efe !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 5px 15px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background .15s, border-color .15s, box-shadow .15s !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}
.mpjs-btn-save-profile:hover,
.mdp-flport-add-btn:hover,
.mdp-ai-cv-save-btn:hover,
.mdp-flp-save-btn:hover,
button[class*="mdp-flp-save"]:hover,
button[class*="mpjs-btn-save"]:hover {
    background: #8b8bef !important;
    border-color: #8b8bef !important;
    box-shadow: 0 4px 12px rgba(156, 158, 254, .3) !important;
}
.mpjs-btn-save-profile svg,
.mdp-flport-add-btn svg,
.mdp-ai-cv-save-btn svg {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
}

/* Secondary outlined button */
.mdp-ai-cv-edit-btn,
.mdp-ai-cv-cancel-btn,
.mpjs-btn-preview {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #fff !important;
    color: #9c9efe !important;
    border: 1.5px solid #9c9efe !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
    text-decoration: none !important;
}
.mdp-ai-cv-edit-btn:hover,
.mdp-ai-cv-cancel-btn:hover,
.mpjs-btn-preview:hover {
    background: #f5f3ff !important;
    color: #8b8bef !important;
    border-color: #8b8bef !important;
}


/* ══════════════════════════════════════════════════════════════
   Dashboard Sidebar — Redesign (matching reference design)
   Primary color: #9c9efe
   ══════════════════════════════════════════════════════════════ */

/* Container */
.jobsearch-employer-dashboard-nav {
    box-shadow: none !important;
    border: 1px solid #e8e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 8px !important;
    background: #fff !important;
}

/* All menu items — reset */
.jobsearch-employer-dashboard-nav ul {
    padding: 0 !important;
    margin: 0 !important;
}
.jobsearch-employer-dashboard-nav ul li {
    border: none !important;
    list-style: none !important;
    position: relative !important;
}

/* Menu links */
.jobsearch-employer-dashboard-nav ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333 !important;
    border: none !important;
    border-radius: 8px !important;
    transition: background .15s, color .15s !important;
    text-decoration: none !important;
    position: relative !important;
    margin: 3px 0;
}
.jobsearch-employer-dashboard-nav ul li a
.jobsearch-employer-dashboard-nav ul li a:hover {
    background-color: #eeecff !important;
    color: #9c9efe !important;
}

/* Active state */
.jobsearch-employer-dashboard-nav ul li.active > a {
    background-color: #eeecff !important;
    color: #9c9efe !important;
}

/* SVG icons */
.jobsearch-employer-dashboard-nav ul li a svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
}

/* Old <i> icons fallback — hide text, show as inline-flex */
.jobsearch-employer-dashboard-nav ul li i {
    color: currentColor !important;
    position: static !important;
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Delete Profile button */
.jobsearch-employer-dashboard-nav ul li.profile-del-btnlink a {
    background: #ef4444 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}
.jobsearch-employer-dashboard-nav ul li.profile-del-btnlink a:hover {
    background: #dc2626 !important;
    opacity: 1 !important;
    color: #fff !important;
}
.jobsearch-employer-dashboard-nav ul li.profile-del-btnlink a svg,
.jobsearch-employer-dashboard-nav ul li.profile-del-btnlink a i {
    color: #fff !important;
}

/* ── Collapsible sidebar menu (has-submenu) ── */

/* Parent li — position context for arrow & tooltip */
.jobsearch-employer-dashboard-nav ul li.has-submenu {
    position: relative !important;
}

/* Arrow toggle button */
.jobsearch-employer-dashboard-nav li.has-submenu .menu-arrow {
    position: absolute !important;
    right: 30px !important;
    top: 22px !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #9c9efe !important;
    transition: transform 0.3s ease !important;
    z-index: 2 !important;
    border-radius: 4px !important;
}
.jobsearch-employer-dashboard-nav li.has-submenu .menu-arrow:hover {
    background: #eeecff !important;
}
/* Rotate arrow when open */
.jobsearch-employer-dashboard-nav li.has-submenu.open .menu-arrow {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Tooltip (?) icon */
.jobsearch-employer-dashboard-nav li .menu-tooltip {
    position: absolute !important;
    right: 5px !important;
    top: 22px !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #c4c4d4 !important;
    cursor: help !important;
    z-index: 2 !important;
    border-radius: 50% !important;
    transition: color 0.2s !important;
}
.jobsearch-employer-dashboard-nav li .menu-tooltip:hover {
    color: #9c9efe !important;
}
.jobsearch-employer-dashboard-nav li .menu-tooltip svg {
    width: 16px !important;
    height: 16px !important;
}

/* Tooltip popup */
.jobsearch-employer-dashboard-nav .tooltip-popup {
    display: none;
    position: absolute;
    left: calc(100% + 12px);
    top: -8px;
    width: 260px;
    background: #fff;
    border: 1px solid #e8e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    padding: 16px 18px;
    z-index: 100;
    cursor: default;
}
.jobsearch-employer-dashboard-nav .tooltip-popup::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 16px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #e8e8f0;
    border-bottom: 1px solid #e8e8f0;
    transform: rotate(45deg);
    z-index: 1;
}
.jobsearch-employer-dashboard-nav .tooltip-popup h4 {
    margin: 0 0 8px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2d2d3a !important;
    line-height: 1.3 !important;
}
.jobsearch-employer-dashboard-nav .tooltip-popup p {
    margin: 0 0 10px 0 !important;
    font-size: 12.5px !important;
    color: #6b6b8a !important;
    line-height: 1.5 !important;
}
.jobsearch-employer-dashboard-nav .tooltip-popup ul {
    margin: 0 !important;
    padding: 0 0 0 6px !important;
    list-style: none !important;
}
.jobsearch-employer-dashboard-nav .tooltip-popup ul li {
    font-size: 12px !important;
    color: #6b6b8a !important;
    line-height: 1.7 !important;
    padding-left: 12px !important;
    position: relative !important;
    border: none !important;
}
.jobsearch-employer-dashboard-nav .tooltip-popup ul li::before {
    content: '\2022' !important;
    position: absolute !important;
    left: 0 !important;
    color: #6b6b8a !important;
}
/* Tooltip sources list (Freelance Profile style) */
.jobsearch-employer-dashboard-nav .tooltip-popup ul.tooltip-sources {
    padding: 0 !important;
}
.jobsearch-employer-dashboard-nav .tooltip-popup ul.tooltip-sources li {
    padding-left: 22px !important;
    margin-bottom: 10px !important;
    line-height: 1.55 !important;
    font-size: 12.5px !important;
}
.jobsearch-employer-dashboard-nav .tooltip-popup ul.tooltip-sources li::before {
    display: none !important;
}
.jobsearch-employer-dashboard-nav .tooltip-popup .tooltip-source-icon {
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
.jobsearch-employer-dashboard-nav .tooltip-popup .tooltip-source-icon.up::before {
    content: '\2191' !important;
    color: #9c9efe !important;
}
.jobsearch-employer-dashboard-nav .tooltip-popup .tooltip-source-icon.down::before {
    content: '\2193' !important;
    color: #9c9efe !important;
}

/* Show popup when tooltip is active */
.jobsearch-employer-dashboard-nav .menu-tooltip.tooltip-active .tooltip-popup {
    display: block;
}

/* Make room for arrow + tooltip on parent link */
.jobsearch-employer-dashboard-nav li.has-submenu > a {
    padding-right: 58px !important;
}
/* Non-collapsible items with tooltip only */
.jobsearch-employer-dashboard-nav li:not(.has-submenu) > .menu-tooltip ~ a,
.jobsearch-employer-dashboard-nav li:not(.has-submenu) > a {
    padding-right: 30px !important;
}

/* Submenu container */
.jobsearch-employer-dashboard-nav .sidebar-submenu {
    list-style: none !important;
    padding: 0 0 0 20px !important;
    margin: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease, opacity 0.3s ease !important;
    opacity: 0 !important;
    position: relative !important;
}
/* Show submenu when open */
.jobsearch-employer-dashboard-nav li.has-submenu.open > .sidebar-submenu {
    max-height: 300px !important;
    opacity: 1 !important;
    padding-bottom: 4px !important;
}

/* Submenu left border line */
.jobsearch-employer-dashboard-nav .sidebar-submenu::before {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    top: 4px !important;
    bottom: 8px !important;
    width: 2px !important;
    background: #e8e8f0 !important;
    border-radius: 1px !important;
}

/* Submenu item links */
.jobsearch-employer-dashboard-nav .sidebar-submenu li a {
    padding: 6px 10px 6px 18px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    border-radius: 6px !important;
}
.jobsearch-employer-dashboard-nav .sidebar-submenu li a:hover {
    background-color: #eeecff !important;
    color: #9c9efe !important;
}
.jobsearch-employer-dashboard-nav .sidebar-submenu li.active a {
    background-color: #eeecff !important;
    color: #9c9efe !important;
}

/* Messages badge (unread count) */
.jobsearch-employer-dashboard-nav .bp-better-messages-unread,
.jobsearch-employer-dashboard-nav .bpbmuc {
    background: #9c9efe !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    border-radius: 9px !important;
    text-align: center !important;
    padding: 0 5px !important;
    margin-left: auto !important;
}
.select-country-wrap {
    position: relative;
}
.select-country-wrap .select-country {
    position: absolute;
    top: 100%;
    left: 10px;
    width: calc(100% - 20px);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    background: #fff;
}
.select-country-wrap.active .select-country {
    opacity: 1;
    visibility: visible;
}
.select-country-wrap .select-country {
    max-height: 200px;
    overflow-y: auto;
}
.select-country-wrap .select-country .option {
    padding: 8px 10px;
    cursor: pointer;
}
.select-country-wrap .select-country .option:hover {
    background: #efefef;
}
.countries-wrap input[name="country"]{
    pointer-events: none;
}
.jobsearch-candidate-resume-wrap.jobsearch-employer-profile-form.wrap-skills {
    display: none;
}
.jobsearch-sort.el-drag-item {
    display: none !important;
}
.resume-list-item p {
    margin-bottom: 10px;
}
span.update-cover-letter {
    background: #9c9efe;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    color: #ffffff;
    border-radius: 40px;
    padding: 13px 24px;
    line-height: 1;
    border: none;
    margin-top: 5px;
    cursor: pointer;
    display: inline-block;
}
.editor-length {
    width: 100%;
    margin: 10px 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.editor-length label {
    margin: 0 !important;
}
.counter-wrap {
    display: flex;
    align-items: center;
}
.editor-length .counter{
    width:max-content;
}
.jobsearch-icon.jobsearch-edit.jobsearch-mangjob-act {
    display: none;
}
.jobsearch-filledjobs-links>span {
    font-size: 12px !important;
}
.jobsearch-filledjobs-links>span:before {
    content: none !important;
}
.submit-wrap .jobsearch-postjob-btn {
    margin: 0 15px;
    font-size: 16px;
}
#ad-posting-title {
    color: #000 !important;
    font-weight: 400 !important;
}
.jobsearch-profile-title h2 {
    width: 100%;
    text-align: center;
}
.submit-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.submit-wrap input.jobsearch-employer-profile-submit {
    height: 40px !important;
    font-size: 16px !important;
    text-transform: unset;
    background-color: #9c9efe !important;
    border: 1px solid #9c9efe !important;
    color: #fff !important;
    border-radius: 4px !important;
    margin-right: 15px;
}
.terms-priv-chek-con p {
    font-size: 14px;
}
.custom_fields_skillid .jobsearch-employer-profile-form li {
    width: 50% !important;
}
.custom_fields_skillid .jobsearch-employer-profile-form li .jobsearch-checkbox label{
    width: 100% !important;
}
.custom_fields_skillid .jobsearch-employer-profile-form li .jobsearch-checkbox label span{
    width: 16px !important;
    height: 16px !important;
    top: 6px !important;
    border-color: #9c9efe !important;
    border-radius: 20px;
}
nav.jobsearch-employer-jobnav {
    display: none;
}
.jobsearch-employer-box-section>.jobsearch-profile-title h2 {
    font-weight: bold;
    background: #9c9efe;
    padding: 15px;
    color: #fff !important;
    border-radius: 30px;
}
.package-list-can-buy .heading-center{
    width: 100%;
    display: flex;
    justify-content: center;
}
.package-list-can-buy .heading-center h2{
    font-weight: bold;
    background: #9c9efe;
    padding: 15px 40px;
    color: #fff !important;
    border-radius: 30px;
    display: inline-block;
    width: auto;
}
.jobsearch-joblisting-bottom .company-type-and-industry {
    flex-direction: column;
    margin: 0;
}
#dashboard-tab-stats .jobsearch-stats-list-wrap small{
    display: none;
}
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option {
    display: none;
}
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option[data-value="USD"],
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option[data-value="EUR"],
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option[data-value="AUD"],
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option[data-value="THB"],
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option[data-value="SGD"],
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option[data-value="INR"],
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option[data-value="IDR"],
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option[data-value="MYR"],
#candidate-profilesetings-form .jobsearch_currencies_list .selectize-dropdown-content .option[data-value="default"] {
    display: block;
}
.filter-wrap .filter-item ul[data-key="offered_salary"] li:last-child{
/*  display: none; */
}
.page-template-user-dashboard-template .bp-messages-wrap .bpbm-options-group >*:nth-child(3){
    display: none;
}
.jobsearch-employer-dasboard .jobsearch-notifics-setopts .jobsearch-employer-profile-form li{
    display: none;
}
.jobsearch-employer-dasboard .jobsearch-notifics-setopts .jobsearch-employer-profile-form li:first-child{
    display: block;
}
.jobsearch-employer-dasboard .jobsearch-notifics-setopts .jobsearch-employer-profile-form li:nth-child(3){
    display: block;
}
body.jobsearch_employer #jobsearch-notification-section{
    display: none;
}
.group-info .block i{
    color: #333 !important;
}
.group-info .salary .content{
    display: flex;
    align-items: center;
}
.group-info .salary .content h4{
    margin-right: 5px;
    font-weight: 400;
}
.single-company-location li{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    color: #333;
}
.single-company-location li span{
    color: #333;
}
.single-company-location li i {
    color: #333 !important;
    margin-right: 8px;
}
.jobsearch-jobdetail-services ul li.radio-to-checkbox{
    display: none;
}
.jobsearch-managejobs-list .jobsearch-mangjobs-list-inner{
    border: 1px solid #9c9efe;
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
}
#dashboard-tab-stats .jobsearch-candidate-default-wrap{
    border: 1px solid #9c9efe;
    margin: 10px 0;
    border-radius: 10px;
    overflow: hidden;
}
.mangejob-serch-field input[type="text"]{
    border: 1px solid #9c9efe !important;
    border-radius: 30px !important;
    color: #333 !important;
}
.jobsearch-managejobs-list ul li.fw{
    display: flex;
    flex-direction: column;
}
.head-title-jobs{
    text-align: center;
    margin: 30px 0;
}
.head-title-jobs p{
    color: #333;
}
.jobsearch_candidate_info h2{
    display: flex;
    justify-content: space-between;
}
.jobsearch_candidate_info h2 .right{
    font-size: 14px;
    font-weight: 400;
    padding-top: 10px;
}
tr.pakcge-itm-stats.featured{
    display: none;
}
.related-jobs{
    display: none;
}
.jobsearch-empdetail-activejobs li.jobsearch-column-12,
.related-jobs li.jobsearch-column-12{
    padding: 0;
}
body.jobsearch_candidate .related-jobs{
    display: block;
}
form.jobsearch-employer-dasboard{
    display: flex;
    flex-direction: column;
}
form.jobsearch-employer-dasboard .terms-priv-chek-con{
    text-align: center;
}
form.jobsearch-employer-dasboard input[type="submit"]{
    margin: 0 auto;
}
body.single-employer ul.jobsearch-jobdetail-options{
    display: flex;
    flex-direction: column;
}
/* NOTE (MDP): selectize .item font-size moved to the "MDP FORM STYLE" block (end of file). */
.selectize-input .item,
select.selectize-select option,
.selectize-dropdown-content .option,
.jobsearch-select-style.sector .wrap ul li,
.filter-wrap .filter-items .filter-item .wrap ul li{
    text-transform: capitalize;
}
.bp-messages-wrap .bm-svg{
    position: unset;
}
.jobsearch-profile-title h2 .bpbmuc{
    display: none;
}
.modal-content-area .jobsearch-send-message-form:before{
    content: 'Job Post Enquiry';
    font-size: 14px;
    color: #333;
    display: block;
    width: 100%;
    font-weight: 600;
    text-align: center;
    width: 100%;
}
.modal-content-area .jobsearch-send-message-form form:before{
    content: 'Ensure your message is clear and concise';
    font-size: 14px;
    color: #333;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
}
.jobsearch-send-message-form:has(#jobsearch_reset_pass_form):before {
    content: '';
    font-size: 14px;
    color: #333;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
}
.jobsearch-send-message-form:has(#jobsearch_reset_pass_form) form:before {
    content: 'Please enter your new password';
    font-size: 14px;
    color: #333;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
}
.modal-content-area .jobsearch-send-message-form form .input-field-submit{
    display: flex;
    flex-direction: column-reverse;
}
.modal-content-area .jobsearch-send-message-form form .input-field-submit .terms-priv-chek-con{
    margin: 0 0 10px 0;
}
.noice-post-a-job{
    background: #9c9efe;
    padding: 30px 50px !important;
    max-width: 800px;
    margin: 0 auto !important;
    color: #fff;
    border-radius: 60px;
}
.terms-priv-chek-con p{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.terms-priv-chek-con p a{
    padding: 0 3px;
}
.company-heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.company-heading a{
    font-family: "Inter";
    font-weight: 600;
    fill: #9c9efe;
    color: #9c9efe !important;
    background-color: #FFFFFF00;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #9c9efe;
    border-radius: 5px 5px 5px 5px;
    padding: 6px 20px 6px 20px;
}
.company-warp{
    margin-bottom: 50px;
}
.bp-messages-wrap .bm_user_selector{
    pointer-events: none;
}
.chat-private a{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: #ebebebeb !important;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    background-color: #E6E6FA !important;
    color: #7e80f3 !important;
    font-size: 0;
    padding: 0 !important;
}
.chat-private a:before{
    content: "\e912";
    font-size: 16px;
    font-family: 'wp-jobsearch-icomoon' !important;
    font-weight: bold;
}
.thread-not-selected.empty .bpbm-empty-or,
.thread-not-selected.empty .bpbm-empty-link,
.threads-list.empty .bpbm-empty-link,
.bp-messages-wrap .chat-header>a.new-message{
    display: none !important;
}
#ui-datepicker-div.hide-days .ui-datepicker-header>a,
#ui-datepicker-div.hide-days .ui-datepicker-current,
#ui-datepicker-div.hide-days .ui-datepicker-calendar{
    display: none !important;
}
#ui-datepicker-div.hide-days select.ui-datepicker-month, #ui-datepicker-div.hide-days select.ui-datepicker-year {
    width: 50%;
}
#ui-datepicker-div.hide-days .ui-datepicker-title{
    margin: 0 !important;
}
#job_detail_ifr{
    min-height: 550px;
}
#JobSearchNonuserApplyModal {
    display: none;
}
.work-time a {
    white-space: nowrap;
    line-height: 1.2;
}
.jobsearch-list-option p {
    color: #000;
    font-size: 15px;
    display: flex;
    font-weight: 400;
    margin-bottom: 3px;
}
.jobsearch-list-option p svg{
    stroke: #6e7083;
    margin-top: 3px;
}
.jobsearch-list-option p.company-name {
    position: unset !important;
}
.jobsearch-list-option p.company-name a{
    position: relative;
    z-index: 2;
}
.jobsearch-list-option p i {
    color: #9c9efe;
    margin-right: 7px;
    margin-top: 5px;
}
.jobsearch-list-option small {
    line-height: 1.2;
}
.jobsearch-list-option p a {
    color: #333;
    font-weight: 400;
}
.jobsearch-list-option p small a {
    margin: 0;
    background: none;
    padding: 0;
    border-radius: 0;
    margin: 0;
    font-size: 15px;
    color: #333;
    font-weight: 400;
    padding: 3px 5px 0px 5px;
    font-size: 14px;
    border-radius: 3px;
}
.jobsearch-list-option p.map a {
    font-size: 12px;
    color: #333;
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.jobsearch-list-option p span {
    margin-left: 5px !important;
    font-size: 15px !important;
    color: #333 !important;
    font-weight: 400 !important;
}
.jobsearch-list-option .actions {
    margin-top: 10px;
}
.action-edit a.edit-post {
    width: 120px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #9c9efe;
    color: #fff;
    border-radius: 30px;
    font-family: inherit !important;
}
.filter-wrap .filter-items .filter-item span b {
    font-weight: normal;
}
.filter-item:not(.sector)>span {
    position: relative;
}
.filter-item.has-counter>span b {
    transform: translateX(-10px);
}
.filter-item.has-counter>span i {
    position: absolute;
    right: 15px;
}
body.woocommerce-order-received .woocommerce-order{
    max-width: 900px;
    margin: 0 auto;
}
body.woocommerce-order-received .woocommerce-order .woocommerce-notice{
    font-size: 20px;
    text-transform: uppercase;
    color: #000;
    font-weight: bold;
    text-align: center;
    margin: 50px 0 20px 0;
}
body.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
body.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li{
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    border-right: 1px dotted #fff;
    background: #9c9efe;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 80px;
    padding: 15px 20px;
}
body.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li strong{
    font-size: 14px;
    color: #fff;
}
body.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li span{
    font-size: 14px;
    color: #fff;
}
body.woocommerce-order-received  .woocommerce-bacs-bank-details h2{
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
body.woocommerce-order-received  .woocommerce-bacs-bank-details h3{
    text-align: center;
    font-size: 18px;
    margin-bottom: 0;
}
body.woocommerce-order-received .woocommerce-order ul.wc-bacs-bank-details{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
body.woocommerce-order-received .woocommerce-order ul.wc-bacs-bank-details li{
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    border-right: 1px dotted #fff;
    background: #9c9efe;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 80px;
    padding: 15px 20px;
}
body.woocommerce-order-received .woocommerce-order-details h2{
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
body.woocommerce-order-received .woocommerce-customer-details h2{
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
body.woocommerce-order-received .woocommerce-customer-details p{
    margin: 0;
}
body.woocommerce-order-received .woocommerce-customer-details address{
    text-align: center;
    padding: 30px;
    border: 1px solid #ccc;
}
.jobsearch-add-resume-item-popup .upload-img-holder-sec {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
}
.jobsearch-add-resume-item-popup .note-max-size {
    padding-left: 10px;
    font-size: 12px;
}
.jobsearch-add-resume-item-popup .note-max-size.valid {
    color: red;
}
.jobsearch-main-content .selectize-dropdown{
    padding: 15px 10px;
}
#JobSearchModalAccountActivationForm .jobsearch-modal-title-box{
    text-align: center;
}
#JobSearchModalAccountActivationForm .jobsearch-modal-title-box h2{
    width: 100%;
}
#JobSearchModalAccountActivationForm .jobsearch-modal-title-box .modal-close{
    color: #000;
    position: absolute;
    top: 10px;
    z-index: 1;
}
#JobSearchModalAccountActivationForm .jobsearch-send-message-form:before{
    content: none !important;
}
#JobSearchModalAccountActivationForm .jobsearch-send-message-form form:before{
    content: none !important;
}
.jobsearch-user-form .jobsearch-activcode-popupbtn,
.jobsearch-user-form .jobsearch-resend-accactbtn{
    color: #fff;
    font-size: 14px;
}
.jobsearch-user-form .jobsearch-activcode-popupbtn i,
.jobsearch-user-form .jobsearch-resend-accactbtn i{
    margin: 0 5px;
}
#stateId-selectized{
    min-width: 150px;
}
.selectize-dropdown .highlight{
    float: none !important;
    color: #9c9efe !important;
}
/*css for job alert*/

/* Modal container */

.job-alerts-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1000;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}
/* Form input fields */

.job-alerts-modal-content input[type="email"], .job-alerts-modal-content select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
/* Modal content box */

.job-alerts-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
    max-width: 600px;
    /* Max width for large screens */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /* Add shadows */
    border-radius: 10px;
    /* Rounded corners */
}
/* Close button */

.job-alerts-modal-close {
    color: #aaa;
    float: right;
    font-size: 14px;
    font-weight: bold;
    padding-top: 15px !important;
}
.job-alerts-modal-close:hover, .job-alerts-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Job Alerts Settings form container */

#job-alerts-form-container {
    padding: 10px;
}
.text-align-center{
    text-align:center;
}

.job-alerts-modal-content{
    margin:auto !important;
    margin-top:5%!important;
}

.job-alerts-setting-title{
    text-align:center;
    padding:0px 10% 0px 10% !important; 
}

.job-alert-title-container{
    display: flex;
    justify-content: center;
}

.jobsearch-select-style.job-alert-select-style.sector .wrap{
    width:100%;
    transition: unset;
}

.job-alert-select-style{
    border: 1px solid #9C9EFE;
    padding: 10px 0 10px 0 !important;
    border-radius: 5px;
    margin: 5px 0 0 0 !important;
}
#job-alerts-modal div.jobsearch-select-style:hover .wrap {
    visibility: hidden;
    opacity: 0;
}
#job-alerts-modal div.jobsearch-select-style.active .wrap {
    visibility: visible;
    opacity: 1;
}
#job-alerts-modal div.jobsearch-select-style{
    padding: 0 !important;
}
#job-alerts-modal div.jobsearch-select-style .filter-item-job-alert >span{
    height: 43px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    padding: 0 10px;
}
.job-alert-select-text-style {
    margin: 0 0 15px 0 !important;
    color:red;
    font-size:14px;
}

.job-alert-dropdown>select{
    margin-bottom:0px;
}

.job-alerts-modal-close{
    padding-right:10px !important;
}

.job-alert-select-style:after{
    content:'' !important;
}

.job-alert-dropdown>select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-color:#9C9EFE !important;
}

.job-alert-input-style{
    border-color:#9C9EFE !important;
}

#save-notification-job-alerts>div{
    display: flex !important;
    justify-content: center !important;
}

#save-notification-job-alerts>div>span
{
    background-color:#81E490;
    color: white;
    padding: 8px 30px;
    border-radius: 6px;
}
.job-alert-count
{
    color: white;
    background-color: #9C9EFE;
    padding: 0 15px !important;
    margin-left: 10px !important;
    border-radius:5px !important;
}

.filter-item-job-alert .wrap ul .active{
    background-color:#D6D6FF !important;
}
.filter-item-job-alert .wrap ul li:before{
    margin-left: 10px !important;
}
.filter-item-job-alert .wrap ul li{
    padding-left: 30px !important;
}

.customized-css-for-dashboard-notif .jobsearch-onoffswitch-title{
    width:85% !important;
}
#job-alerts-modal .job-alerts-setting-title {
    font-size: 14px;
    font-weight: bold;
    height: 26px;
    display: flex;
    align-items: center;
}
#job-alerts-modal .job-alerts-modal-close {
    padding-top: 10px !important;
    position: relative;
    z-index: 2;
}
#job-alerts-modal strong, #job-alerts-modal h4 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
#job-alerts-modal input, #job-alerts-modal select, #job-alerts-modal span {
    font-size: 16px;
    font-weight: 400;
}
#job-alerts-form-container {
    position: relative;
}
#job-alerts-form-container #save-notification-job-alerts {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}
.job-alert-count-wrap {
    position: relative;
    text-align: center;
    margin-bottom: 5px !important;
}
.job-alert-count-wrap-inner {
    font-size: 14px;
    color: #fff;
    background: #9C9EFE;
    display: inline-block;
    padding: 0 10px !important;
    border-radius: 5px;
}
.job-alert-count-wrap-inner .job-alert-count {
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
}
.job-alert-count-wrap .close {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0 !important;
    width: 30px;
    height: 20px;
    border: 1px solid #9C9EFE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9C9EFE;
    cursor: pointer;
}
#job-alerts-modal div.jobsearch-select-style .filter-item-job-alert>span {
    cursor: pointer;
}
.buttons-action {
    display: flex;
    justify-content: center;
}
.buttons-action button {
    font-size: 14px;
    color: #fff;
    background: #9C9EFE;
    display: inline-block;
    padding: 3px 20px !important;
    border-radius: 5px;
    border: none;
    margin: 0 20px;
}
#job-alerts-modal div.jobsearch-select-style.active .wrap ul {
    max-height: calc(100vh - 200px);
}
#job-alerts-modal div.jobsearch-select-style.active .wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 350px;
    border: 2px solid #9C9EFE;
    border-radius: 20px;
    max-height: 100%;
}
#job-alerts-modal div.jobsearch-select-style.active:before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
.filter-wrap .filter-items.list-items .ab-carousel-btn {
    padding-top: 0;
}
.list-wrapper {
    overflow-x: clip;
}
.filter-items.list-items {
    transition: transform 0.25s ease;
}
.jobsearch-banner-search #jobsearch-gdapilocs-contrycon>*:not(.countries-wrap) {
    display: none !important;
}
body.locked-status .modal-box-area>* {
    display: none !important;
}
body.locked-status .modal-box-area>.jobsearch-reset-password {
    display: block !important;
}
.opened-info, .locked-info {
    display: none;
}
.mdp-popup .choose-package-download-cvs .choose-package {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
#job-posting-form .it_skills label:after, #job-posting-form .skills label:after {
    content: '(Optional)';
    padding-left: 5px;
}
.bp-messages-wrap-main {
    width: 100%;
}
.bp-messages-wrap .chat-header .thread-info {
    padding: 0 15px;
}
.bp-messages-wrap.bp-messages-mobile .threads-list .thread .actions {
    min-width: 40px;
}
.bp-messages-wrap .threads-list .thread .actions {
    min-width: 40px;
}
.bp-messages-mobile-tap {
    opacity: 1 !important;
}
@media(max-width: 576px) {
    #job-alerts-modal div.jobsearch-select-style.active .wrap {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transform: none;
    }
    #job-alerts-form-container #save-notification-job-alerts {
        left: auto;
        right: 10px;
        transform: none;
    }
}
/*css for job alert end*/

/* Search Form */

.overflow-hidden {
    overflow: hidden;
    height: 100vh;
}
#jobs-search-form {
    position: relative;
    z-index: 3;
}
/* CHANGE: justify-content center for form-top */
#jobs-search-form .form-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
#jobs-search-form.search-freelancers .form-top{
    justify-content: center;
}
#jobs-search-form.search-freelancers .form-top .location .countries-wrap:after{
    content: none;
}
/* CHANGE: Equal width, max-width for filter items to match reference */
#jobs-search-form .form-top .filter-item {
    flex: 1;
    width: 260px;
    padding: 0 10px;
    position: relative;
}
/* CHANGE: Wider max-width for Engineering specialisation */
#jobs-search-form .form-top .filter-item.sector {
    width: 350px;
}
/* CHANGE: Labels above filter fields — margin 0 */
#jobs-search-form .form-top .filter-item .filter-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin: 0;
}
#jobs-search-form .form-top .filter-item.title-company{
    padding-left: 0;
}
/* CHANGE: Compact search boxes, font-size 14px, line-height 1.2, left-aligned */
#jobs-search-form .filter-item .item-inner {
    border: 1px solid #9c9efe;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
#jobs-search-form .filter-item input {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #666;
    border: none;
    background: none;
    padding: 0 5px;
}
#jobs-search-form .filter-item input::placeholder {
    color: #666;
}
#jobs-search-form .filter-item .counter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    line-height: 1;
    font-style: normal;
    background: #9c9efe;
    padding: 2px 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
}
#jobs-search-form .filter-item div.wrap {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
    transition: all 350ms;
    border:  none !important;
    box-shadow: 0 0 3px #ccc !important;
    border-radius: 10px;
    padding: 10px;
}
#jobs-search-form .filter-item:hover div.wrap {
    opacity: 1;
    visibility: visible;
}
#jobs-search-form .filter-item .wrap ul {
    background: #fff;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}
#jobs-search-form .filter-item .wrap ul li {
    padding: 5px 15px;
    width: 100% !important;
    max-width: 100% !important;
    cursor: pointer;
    font-size: 14px;
    list-style: none;
    white-space: pre-wrap;
}
#jobs-search-form .location {
    padding: 0 10px;
}
#jobs-search-form .location .location-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #9c9efe;
    border-radius: 8px;
    height: 48px;
}
/* CHANGE: Left-aligned text for all filter items */
#jobs-search-form .filter-item.title-company input {
    text-align: left;
}
#jobs-search-form .filter-item.sector .item-inner {
    display: flex;
    justify-content: flex-start;
}
/* CHANGE: sector-title flex:1 + overflow hidden so arrow stays visible */
#jobs-search-form .filter-item.sector .item-inner .sector-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
#jobs-search-form .filter-item.sector input {
    padding: 0;
    min-height: unset;
}
#jobs-search-form .filter-item.sector label {
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* CHANGE: Arrow icon on the right for sector dropdown */
#jobs-search-form .filter-item.sector .item-inner {
    position: relative;
    justify-content: space-between;
}
#jobs-search-form .filter-item.sector .item-inner .dropdown-arrow,
#jobs-search-form .filter-item.office-location .item-inner .dropdown-arrow {
    flex-shrink: 0;
    margin-left: auto;
    color: #666;
}
#jobs-search-form .filter-item.sector .wrap input {
    border: 1px solid #ccc !important;
    box-shadow: none;
    min-height: 38px;
    height: 38px;
    padding: 5px 10px;
    font-size: 13px;
    width: 100%;
    margin-bottom: 10px;
}
#jobs-search-form .filter-item.sector:hover .wrap {
    opacity: 1;
    visibility: visible;
}
#jobs-search-form .location .filter-item {
    display: flex;
    align-items: center;
}
#jobs-search-form .location .countries-wrap, #jobs-search-form .location .states-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}
#jobs-search-form .filter-wrap .filter-items .filter-item span {
    padding: 5px 35px;
}
#jobs-search-form .location .countries-wrap:hover .wrap {
    opacity: 1;
    visibility: visible;
}
#jobs-search-form .location .states-wrap:hover .wrap {
    opacity: 1;
    visibility: visible;
}
#jobs-search-form .location .states-wrap .state-list {
    display: none !important;
}
#jobs-search-form .location .states-wrap .state-list.open {
    display: block !important;
}
#jobs-search-form .location .countries-wrap:after {
    content: '';
    height: 20px;
    border-right: 1px solid #9c9efe;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
#jobs-search-form .location img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
}
#jobs-search-form .location .states-wrap span:not(.highlight) {
    color: #666;
    margin: 0;
    padding: 6px 12px;
    line-height: 1.2;
}
/* CHANGE: office-location filter — same pattern as sector */
/* CHANGE: Arrow icon on the right for office-location dropdown */
#jobs-search-form .filter-item.office-location .item-inner {
    display: flex;
    justify-content: space-between;
    position: relative;
}
/* CHANGE: office-location-title flex:1 + overflow hidden so arrow stays visible */
#jobs-search-form .filter-item.office-location .office-location-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
#jobs-search-form .filter-item.office-location .office-location-title svg {
    flex-shrink: 0;
    color: #666;
}
#jobs-search-form .filter-item.office-location label {
    font-size: 16px;
    line-height: 1.2;
    color: #666;
    margin: 0;
}
#jobs-search-form .filter-item.office-location input {
    padding: 0;
    min-height: unset;
}
#jobs-search-form .filter-item.office-location .wrap input {
    border: 1px solid #ccc !important;
    box-shadow: none;
    min-height: 38px;
    height: 38px;
    padding: 5px 10px;
    font-size: 13px;
    width: 100%;
    margin-bottom: 10px;
}
#jobs-search-form .filter-item.office-location:hover .wrap {
    opacity: 1;
    visibility: visible;
}
/* CHANGE(MDP, khach 04/09): so tin / cham chi bao trong bo loc "Preferred job locations".
   Luat hien thi (an 0 tin, cham cho 1-19, so cho 20+) nam o includes/location-counts.php.
   Dung flex de day phan chi bao ve ben phai; o tich la :before dinh vi tuyet doi nen
   khong bi flex lam xe dich. */
#jobs-search-form .filter-item.office-location .wrap ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#jobs-search-form .filter-item.office-location .wrap ul li .mdp-loc-so {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
    color: #666;
    font-variant-numeric: tabular-nums;
}
#jobs-search-form .filter-item.office-location .wrap ul li .mdp-loc-cham {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c2c2cf;
}
/* CHANGE: Search button aligned with filter boxes, with icon */
#jobs-search-form .search-submit {
    align-self: flex-end;
}
#jobs-search-form .search-submit .item-inner {
    border: none;
    padding: 0;
    height: auto;
}
#jobs-search-form .search-submit input {
    border-radius: 8px;
    margin-left: 10px;
    display: none;
}
#jobs-search-form .search-submit .search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #9c9efe;
    color: #fff;
    border: none;
    border-radius: 8px;
    height: 48px;
    padding: 0 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
#jobs-search-form .search-submit .search-btn:hover {
    background: #8a8cf0;
}
#jobs-search-form .search-submit .search-btn svg {
    flex-shrink: 0;
}
#jobs-search-form .filter-item .wrap ul li {
    list-style-type: none;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    line-height: 1.4;
    padding: 5px 5px 5px 22px;
    border: none !important;
}
#jobs-search-form .filter-item .wrap ul li:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 12px;
    height: 12px;
    margin: 0 !important;
    border: 1px solid #c2d1d3;
    box-shadow: 0 0 0 3px #fff inset;
}
#jobs-search-form .location .filter-item .wrap ul li {
    list-style-type: none;
    color: #333;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    line-height: 1.4;
    padding: 5px 0;
}
#jobs-search-form .location .filter-item .wrap ul li:before {
    content: none;
}
#jobs-search-form .filter-item .wrap ul li.active {
    background-color: #D6D6FF;
}
#jobs-search-form.jobs-search-form .filter-item .wrap ul.state-list{
    margin-top: 45px;
}
#jobs-search-form .filter-item .wrap ul li[data-search="yes"]:before{
    content: none;
}
#jobs-search-form .filter-item.states-wrap.state .wrap ul li[data-search="yes"]{
    padding: 0;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    width: calc(100% - 20px) !important;
}
#jobs-search-form .filter-item .wrap ul li[data-search="yes"] input{
    border: 1px solid #ebebeb !important;
    box-shadow: none;
    min-height: 38px;
    height: 38px;
    padding: 5px 10px;
    font-size: 13px;
    width: 100%;
    background: #fff;

}
#jobs-search-form h4{
    text-align: center;
    font-size: 16px !important;
    font-weight: bold;
    margin: 20px 0;
}
.form-advanced .expand {
    text-align: center;
    margin: 20px;
}
.form-advanced .expand .expand-inner {
    border: 1px solid #9c9efe;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.form-advanced .expand .expand-inner h5 {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}
.form-advanced .expand .expand-inner svg {
    width: 16px;
    height: 16px;
}
.filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
}
.filter-actions.one {
    justify-content: center;
}
.filter-actions span {
    background-color: #9c9efe !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 14px !important;
    padding: 3px 25px !important;
    border-radius: 8px !important;
    cursor: pointer;
    width: calc(50% - 5px);
}
.filter-actions.one span {
    width: 100%;
}
.filter-wrap {
    display: none;
}
.form-advanced .local-search {
    min-height: 38px;
    line-height: 26px;
    overflow: hidden;
}

/* ============================================================================
 * Freelancer item card — layout rules for the redesigned card produced by
 * `mdp_render_freelancer_card()` (deck slide 6 / freelancer-item design).
 *
 * Existing colors / icons / typography are inherited from the surrounding
 * jobsearch styles — these rules only handle STRUCTURE + POSITIONING:
 *   - top row : Recommended badge (left)  vs  view + star icons (right)
 *   - identity row : avatar (left)  vs  name / sectors / rates (right)
 *   - footer row : Availability (left)  vs  Member since (right)
 *   - "View more" inline link inside the skills strip
 *
 * Scoped under `.search-freelancers-listing` so they only target cards
 * rendered through the shared function — legacy shortcodes that produce
 * their own markup are unaffected.
 * ============================================================================ */
.search-freelancers-listing article .mdp-fl-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    width: 100%;
}
/* When `recommendation_list` is empty we still render a hidden spacer so the
 * star/view icons stay right-aligned via space-between. */
.search-freelancers-listing article .mdp-fl-card__top .result-count {
    margin: 0;
    flex: 1 1 auto;
}
.search-freelancers-listing article .mdp-fl-card__top .result-count--empty {
    display: block;
    flex: 1 1 auto;
}
/* Pull `.freelance-actions` out of the text column it used to live in so it
 * sits in the top-right corner per the design. The legacy descendant
 * styles on `.jobsearch-joblisting-text .freelance-actions` stay intact for
 * any callers that still use the old position. */
.search-freelancers-listing article .mdp-fl-card__top .freelance-actions {
    position: static;
    margin: 0;
    flex: 0 0 auto;
}

/* Identity row — avatar + text block side-by-side. The `<figure>` already
 * floats/positions itself; we just give the wrapper a flex context so the
 * `.jobsearch-joblisting-text` content sits to its right and the columns
 * stay aligned at the top. */
.search-freelancers-listing article .mdp-fl-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
/* Avatar — fixed-size circle that crops the underlying image with
 * `object-fit: cover`. Both real photos (square or rectangular) and the
 * WP-JobSearch "no-image.jpg" placeholder render identically because
 * overflow is hidden by the circular figure.
 *
 * The img !important overrides are required because an older rule
 * (`.search-freelancers-listing .jobsearch-joblisting-classic-wrap figure img`)
 * higher up in this stylesheet pins the avatar to 95×95 with a 15px
 * border-radius + box-shadow — we re-set those properties so the parent
 * circle clip is the only shape that matters. */
.search-freelancers-listing article .mdp-fl-card__identity > figure {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4ff;
    box-sizing: border-box;
}
.search-freelancers-listing article .mdp-fl-card__identity > figure > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block;
    margin: 0;
}
.search-freelancers-listing article .mdp-fl-card__identity > .jobsearch-joblisting-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Footer row — Availability left, Member since right, on one line. */
.search-freelancers-listing article .mdp-fl-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}
.search-freelancers-listing article .mdp-fl-card__footer > .availability,
.search-freelancers-listing article .mdp-fl-card__footer > .member-sinces {
    margin: 0;
}
.search-freelancers-listing article .mdp-fl-card__footer > .availability--empty {
    display: block;
    flex: 1 1 auto;
}

/* "…View more" inline link inside the Skills strip — highlight via the
 * background color (`#fff59d` ≈ standard pale-yellow highlighter). The
 * design uses the same shade so we keep it consistent. Color of the link
 * itself stays whatever the theme assigns to `<a>`. */
.search-freelancers-listing article .mdp-fl-card__view-more {
    background: #fff59d;
    padding: 0 4px;
    border-radius: 2px;
    text-decoration: none;
    white-space: nowrap;
}
.search-freelancers-listing article .mdp-fl-card__view-more:hover {
    background: #fff176;
    text-decoration: underline;
}

/* Country dropdown `.local-search` — match the Job Function dropdown's input
 * (subtle 1px border, compact 38px height, 13px font). Without this, the
 * `#jobs-search-form .location .countries-wrap input` rule below wins on
 * ID-specificity and gives the input a 40px-tall, center-aligned, borderless
 * look. !important is set on the values that conflict with that rule. */
#jobs-search-form .countries-wrap .wrap-inner .local-search {
    height: 38px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    border: 1px solid #ccc !important;
    border-radius: 3px;
    box-shadow: none;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

#jobs-search-form .form-advanced .filter-item .counter {
    position: absolute;
    top: 7px;
    right: 10px;
    margin-left: 5px;
    transform: unset;
    width: 20px;
    height: 20px;
    background: #fff;
    color: #9C9EFE;
}
#jobs-search-form .form-advanced .filter-item:hover .counter {
    background: #9C9EFE;
    color: #fff;
}
#jobs-search-form .form-advanced .reset-wrap {
    text-align: right;
}
#jobs-search-form .form-advanced .reset-wrap span {
    display: inline-block;
    text-align: center;
    padding: 5px 40px;
    color: #9C9EFE;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
}
#jobs-search-form .form-advanced .reset-wrap span.filter {
    display: none;
}
#jobs-search-form .form-advanced .reset-wrap span i {
    color: red;
    font-style: normal;
    margin-right: 5px;
}
.filter-wrap-top {
    display: none;
}
.filter-item-top {
    display: none;
}
#jobs-search-form .filter-items .location {
    display: none !important;
}
#jobs-search-form .search-submit .expand-inner {
    display: none;
}
.load-more-wrap {
    display: none;
}
.load-more-wrap #load-more-jobs {
    background: #9C9EFE;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #fff;
    padding: 8px 10px;
}
.total-advanced-filter {
    display: none;
    color:  #9966ff;
}
.list-wrapper-container {
    width: 100%;
}
.thjob-title.custom-css-app-applicants-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.thjob-title.custom-css-app-applicants-title h2 {
    width: 100%;
    text-align: center;
    padding: 10px;
    background: #f5f5f5;
}
.jobsearch-all-aplicantslst .jobsearch-applied-jobs li {
    padding: 0;
}
.jobsearch-all-aplicantslst .jobsearch-applied-job-btns a.preview-candidate-profile:hover {
    color: #999 !important;
    background-color: #f9f9f9 !important;
}
.jobsearch-all-aplicantslst .jobsearch-applied-job-btns a.preview-candidate-profile:hover i {
    color: #999 !important;
}
.jobsearch-all-aplicantslst .jobsearch-applied-job-btns a.more-actions i {
    color: #fff !important;
}
.jobsearch-all-aplicantslst .jobsearch-applied-job-btns ul li a {
    display: flex;
    align-items: center;
}
.jobsearch-all-aplicantslst .jobsearch-applied-job-btns ul li a span {
    margin: 0;
}
.lodmore-apps-btnsec {
    text-align: center;
}
.lodmore-apps-btnsec a {
    background-color: #9c9efe;
    border: 1px solid #9c9efe;
    border-radius: 100px;
    color: #fff !important;
    padding: 10px 40px;
}
.jobsearch-notification-item a {
    font-size: 13px;
    color: #9c9efe !important;
}
.bp-messages-wrap.mobile-ready:not(.bp-messages-mobile) .bp-messages-mobile-tap {
    background: rgb(0 0 0 / 60%) !important;
    color: #ffffff !important;
    font-size: 20px;
    font-weight: bold;
}
.chat-header .thread-info {
    pointer-events: none;
}
.jobsearch-recent-applicants-nav a, .job-sector a {
    cursor: none;
    pointer-events: none;
}
.back-to-job-listing {
    display: flex;
    align-items: center;
    padding: 15px 0 !important;
}
.back-to-job-listing a {
    position: static;
    font-size: 25px;
    padding: 10px;
}
.click-to-view-job {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.emp-head-title {
    font-size: 16px !important;
    font-weight: bold !important;
}
.jobsearch-list-option .jobsearch-pst-title {
    margin-bottom: 10px !important;
}
.apply-job .jobsearch_apply_job_wrap {
    padding: 5px 0 !important;
}
.jobsearch_apply_job {
    margin: 0 !important;
}
.apply-job {
    align-items: center !important;
}
.apply-job .careerfy-jobdetail-btn {
    padding: 9px 15px !important;
}
.error404-content {
    margin: 80px 0 !important;
}
a.error-btn.button {
    color: #fff !important;
}
.custom-forgot-password-css {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.custom-forgot-password-css li {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}
.custom-forgot-password-css input[type="submit"], .custom-forgot-password-css input[type="button"] {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.jobsearch-employer-dasboard{
    overflow: unset !important;
}
.selectize-control.multi .selectize-input > div{
    height: auto !important;
}
#job-posting-form{
    display: flex;
    flex-direction: column;
    width: 100%;
}
#job-posting-form >*{
    order: 3;
}
#job-posting-form >.jobsearch-employer-box-section:first-child{
    order: 1;
}
#job-posting-form >.jobsearch-employer-box-section:nth-child(3){
    order: 2;
}
.jobsearch-jobdetail-services .field-hidden, #job-posting-form .field-hidden {
    display: none !important;
}
.jobsearch-jobdetail-content.jobsearch-employerdetail-content {
    margin: 50px 0;
}
.related-view-jobs h2.title {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
}
.custom-css-for-job-listing {
    display: flex;
    flex-wrap: wrap;
}
.jobsearch-jobdetail-list .wrap-thumb {
    min-width: 120px;
}
.jobsearch-jobdetail-list .jobsearch-list-option {
    flex-grow: 1;
}
.group-features {
    min-width: 240px;
    height: 100%;
}
.jobsearch-jobdetail-list .jobsearch-list-option .jobsearch-pst-title {
    padding-right: 15px;
}
.new-chat-private a {
    white-space: nowrap;
}
.submit-wrap input {
    border-radius: 4px;
}
a.jobsearch-mangjob-act {
    animation: none !important;
}
a.jobsearch-mangjob-act.fa-spin:before {
    -webkit-animation: fa-spin 2s linear infinite;
    animation: fa-spin 2s linear infinite;
    display: block;
}
.wrap-back-to-front {
    margin: 15px 0 !important;
}
.wrap-back-to-front a {
    display: flex;
    align-items: center;
}
.wrap-back-to-front i {
    font-size: 25px;
    margin-right: 20px;
}
.wrap-back-to-front span {
    background-color: #9c9efe;
    border: 1px solid #9c9efe;
    border-radius: 30px;
    color: #fff;
    padding: 10px 40px;
}
.selectize-control.single{
    position: relative;
}
.selectize-control.single .selectize-input:before{
    content: none !important;
}
.selectize-control.single .selectize-input:after{
    margin: 0 !important;
    top: 50% !important;
    transform: translatey(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    right: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 350ms;
}
.selectize-control.single .selectize-input.dropdown-active:after {
    transform: translatey(-50%) rotate(180deg) !important;
}
.selectize-control.single .selectize-dropdown{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 999 !important;
    width: 100% !important;
}
.jobsearch-profile-select:after{
    content: none !important;
}
.jobsearch-profile-select.loading {
    pointer-events: none;
}
.jobsearch-profile-select:after {
    position: absolute !important;
    top: 1px !important;
    right: 2px !important;
    z-index: 1;
    width: 34px;
    height: 34px;
    background: #fff;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}
.jobsearch-profile-select i {
    display: none;
    position: absolute !important;
    top: 1px !important;
    right: 2px !important;
    z-index: 2;
    width: 34px;
    height: 34px;
    background: #fff;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 30px;
}
.jobsearch-profile-select.loading i {
    display: flex;
}
.jobsearch-profile-select ul {
    background: #fff;
    padding: 10px 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
    position: absolute;
    top: calc(100% - 5px);
    left: 0;
    width: 100%;
}
.jobsearch-profile-select ul li {
    list-style-type: none;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    line-height: 1.4;
    padding: 5px 5px 5px 25px;
    border: none !important;
}
.jobsearch-profile-select ul li:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 12px;
    height: 12px;
    margin: 0 0 0 0;
    border: 1px solid #c2d1d3;
    box-shadow: 0 0 0 3px #fff inset;
}
.jobsearch-profile-select ul li.active {
    background-color: #D6D6FF;
}
#dashboard-tab-user-job .submit-wrap input{
    margin-bottom: 10px;
}
#dashboard-tab-user-job .jobsearch-profile-select .selectize-input{
    display: flex;
    align-items: center;
    padding: 0 14px !important;
}
#dashboard-tab-user-job .jobsearch-profile-select .selectize-input .item{ 
    line-height: 22px;
    padding: 0 22px 0 5px !important;
}
/* NOTE (MDP): selectize input + option font moved to the "MDP FORM STYLE" block (end of file). */
#dashboard-tab-user-job .selectize-dropdown-content .option {
    padding: 6px 10px;
    line-height: 22px;
}
#dashboard-tab-user-job .selectize-input:not(.has-items) input {
    width: 100% !important;
}
#dashboard-tab-manage-jobs .jobsearch-pst-title a{
    color: #9c9efe !important;
    display: block;
    padding-right: 10px;
}
.jobsearch-modal .jobsearch-modal-title-box h2{
    font-size: 20px;
}
.jobsearch-modal ul{
    margin: 0;
}
.backto-home-btncon a{
    background-color: #9c9efe !important;
    color: #fff !important;
    text-decoration: none;
}
.jobsearch-pst-title .posted-date{
    font-size: 12px;
    color: #999;
    margin: 5px 0;
    font-weight: normal;
}
@media (min-width: 1025px) {
    .hide-desktop{
        display: none !important;
    }
    .form-advanced .filter-wrap .filter-items {
        flex-wrap: nowrap;
        justify-content: center;
        padding: 0;
        margin: 0;
        transition: transform 0.5s ease;
    }
    .form-advanced .list-wrapper-container {
        display: flex;
        align-items: center;
        position: relative;
    }
    .form-advanced .list-wrapper-container .list-wrapper {
        padding: 0 35px;
    }
    .form-advanced .list-wrapper-container:before {
        content: '';
        width: 1000px;
        height: 100%;
        background: #fff;
        position: absolute;
        top: 0;
        right: calc(100% - 35px);
        z-index: 2;
        pointer-events: none;
    }
    .form-advanced .list-wrapper-container:after {
        content: '';
        width: 1000px;
        height: 100%;
        background: #fff;
        position: absolute;
        top: 0;
        left: calc(100% - 40px);
        z-index: 2;
        pointer-events: none;
    }
    .form-advanced .list-wrapper-container .list-wrapper:before {
        content: '';
        width: 1000px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 100%;
        z-index: 2;
    }
    .form-advanced .list-wrapper-container .list-wrapper:after {
        content: '';
        width: 1000px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 2;
    }
    .form-advanced .list-wrapper {
        max-width: 1250px;
        flex: 1;
    }
    .form-advanced .filter-items .filter-item {
        white-space: nowrap;
    }
    .form-advanced .list-wrapper-container>span {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 3px #ccc;
        opacity: 1;
        color: #A020F0;
        position: absolute;
        top: 5px;
        z-index: 9;
        cursor: pointer;
    }
    .form-advanced .list-wrapper-container>span.prev {
        left: 0;
    }
    .form-advanced .list-wrapper-container>span.next {
        right: 0;
    }
    .form-advanced .list-wrapper-container>span:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
    .form-advanced .filter-item:not(.active) div.wrap {
        left: auto !important;
        right: 0;
    }
    #jobs-search-form .filter-item:nth-child(1):not(.active) div.wrap,
    #jobs-search-form .filter-item:nth-child(2):not(.active) div.wrap,
    #jobs-search-form .filter-item:nth-child(3):not(.active) div.wrap,
    #jobs-search-form .filter-item:nth-child(4):not(.active) div.wrap {
        left: 0 !important;
        right: auto !important;
    }
}
@media(max-width: 1200px){
    #jobs-search-form .form-top > .filter-item {
        padding: 0 5px;
    }
}
@media(max-width: 1024px){
    #jobs-search-form .filter-item .wrap ul.state-list{
        margin: 0;
    }
    #jobs-search-form .filter-item .wrap ul li[data-search="yes"]{
        position: unset;
    }
    #jobs-search-form .filter-item .wrap ul li[data-search="yes"] input{
       color: #000;
    }
    .jobsearch-jobexpire-notifyerr-inner{
        width: 100% !important;
    }
    .jobexpire-notify-msgcon h2{
        font-size: 20px !important;
    }
    .mdp-pagination >* {
        width: 30px;
        height: 30px;
        font-size: 16px;
        margin: 3px !important;
    }
    .jobsearch-modal .jobsearch-modal-title-box h2{
        font-size: 16px;
    }
    input, textarea, select {
        font-size: 16px !important;
    }
    .jobsearch-pagination-blog ul li a i {
        font-size: 16px !important;
    }
    .jobsearch-pagination-blog ul li a i {
        font-size: 16px !important;
    }
    #main .jobsearch-page-numbers li>* {
        width: 40px !important;
        ;
        height: 40px !important;
        ;
        font-size: 16px !important;
        ;
        margin: 5px !important;
        ;
    }
    .jobsearch-managejobs-list {
        margin-bottom: 0px !important;
    }
    .error-title {
        font-size: 30px !important;
    }
    .filter-wrap #prevBtn,
    .filter-wrap #nextBtn,
    .form-advanced .list-wrapper-container>span,
    .jobsearch-job .mdp-pagination{
        display: none;
    }
    .form-advanced .local-search {
        margin-bottom: 5px;
    }
    .load-more-wrap{
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
    .hide-mobile {
        display: none !important;
    }
    #jobs-search-form .search-submit {
        position: relative;
    }
    #jobs-search-form .search-submit .expand-inner {
        display: block;
        position: absolute;
        left: 0;
        top: 10px;
        z-index: 1;
    }
    #jobs-search-form .search-submit .expand-inner .total {
        background: #9966ff;
        color: #fff;
        height: 24px;
        display: flex;
        min-width: 24px;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        font-size: 14px;
        position: absolute;
        top: 4px;
        right: -40px;
        z-index: 1;
    }
    #jobs-search-form .search-submit .expand-inner svg {
        width: 40px;
        height: 30px;
        border: 2px solid #9c9efe;
    }
    #jobs-search-form {
        width: 100%;
        margin: 0 auto;
        z-index: auto;
    }
    #jobs-search-form .form-top {
        flex-direction: column;
    }
    #jobs-search-form .form-top .filter-item {
        width: 100% !important;
        padding: 0;
        position: relative;
        margin-bottom: 5px;
    }
    #jobs-search-form .filter-item .item-inner {
        height: 50px;
    }
    #jobs-search-form .location {
        width: 100%;
    }
    #jobs-search-form .location .location-inner {
        width: 100%;
        flex-direction: column;
        border: none;
        border-radius: 0;
        height: auto;
    }
    #jobs-search-form .location .countries-wrap, #jobs-search-form .location .states-wrap {
        border-radius: 8px;
        height: 50px;
    }
    #jobs-search-form .location .countries-wrap input:not(.local-search-state),
    #jobs-search-form .location .states-wrap input:not(.local-search-state) {
        text-align: center;
    }
    #jobs-search-form .location .countries-wrap:after {
        content: none;
    }
    #jobs-search-form .search-submit {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 20px 0 0 0;
    }
    #jobs-search-form .search-submit input {
        border-radius: 8px;
        margin-left: 0;
        margin-top: 10px;
    }
    #jobs-search-form h4 {
        margin: 0 0 10px 0;
        font-size: 12px !important;
    }
    .form-advanced .expand {
        display: none;
    }
    #jobs-search-form .filter-wrap {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 100vw;
        height: 100vh;
        background: #fff;
        padding: 20px 30px;
    }
    #jobs-search-form .filter-wrap.active .filter-wrap-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }
    #jobs-search-form .form-advanced .reset-wrap {
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        padding: 5px 10px;
        background: #fff;
    }
    #jobs-search-form .form-advanced .reset-wrap span {
        background: #9C9EFE;
        border-radius: 8px;
        color: #fff;
        padding: 10px 40px;
    }
    #jobs-search-form .form-advanced .reset-wrap span.filter {
        display: block;
    }
    #jobs-search-form .form-advanced .reset-wrap span i {
        display: none;
    }
    #jobs-search-form .form-advanced .list-items {
        padding: 0;
        z-index: auto;
    }
    .list-wrapper {
        overflow-x: visible;
    }
    #jobs-search-form .form-advanced .reset-wrap, #jobs-search-form .form-advanced .filter-wrap .filter-items {
        width: 100%;
    }
    #jobs-search-form .form-advanced .filter-wrap .filter-items {
        flex-grow: 1;
        display: block;
        max-height: calc(100vh - 170px);
        overflow-y: auto;
        margin: 0;
        transform: unset !important;
    }
    #jobs-search-form .form-advanced .filter-wrap .filter-items .filter-item span {
        background: #fff;
        color: #000;
        font-size: 14px;
        border-radius: 8px;
        border: 1px solid #9C9EFE;
        padding: 5px 20px;
        height: 40px;
    }
    #jobs-search-form .filter-item input.title-company {
        height: 100%;
        font-size: 16px !important;
        font-weight: bold;
    }
    #jobs-search-form .filter-item.title-company{
        position: relative;
    }
    #jobs-search-form .filter-item.title-company:after{
        content: "";
        width: 50px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }
    #jobs-search-form .filter-item.sector .item-inner .sector-title label{
        width: 100%;
        white-space: nowrap;
        font-size: 16px !important;
        font-weight: bold;
    }
    #jobs-search-form .filter-item.office-location label{
        font-size: 16px !important;
        font-weight: bold;
    }
    #jobs-search-form .form-advanced .filter-wrap .filter-wrap-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        width: 100%;
    }
    #jobs-search-form .form-advanced .filter-wrap .filter-wrap-top .close {
        background: #9C9EFE;
        border-radius: 8px;
        color: #fff;
        padding: 10px 40px;
    }
    #jobs-search-form .form-advanced .filter-wrap .filter-wrap-top label {
        color: #000;
        font-size: 22px;
        font-weight: bold;
        margin: 0;
    }
    #jobs-search-form .filter-item div.wrap {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        opacity: 1;
        visibility: visible;
        transition: none;
        box-shadow: none !important;
        border-radius: 0;
        background: #fff;
    }
    #jobs-search-form .filter-item div.wrap .wrap-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    #jobs-search-form .filter-item div.wrap .wrap-inner ul {
        flex-grow: 1;
        display: block;
        max-height: calc(100% - 150px);
    }
    #jobs-search-form .filter-item div.wrap .wrap-inner .filter-actions{
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        width: 100%;
    }
    #jobs-search-form .filter-item .filter-item-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin-bottom: 15px;
    }
    #jobs-search-form .filter-item .filter-item-top .wrap-counter {
        display: flex;
        align-items: center;
        width: 100%;
    }
    #jobs-search-form .filter-item .filter-item-top label {
        color: #000;
        font-size: 22px;
        font-weight: bold;
        margin: 0;
        display: block;
        width: 85%;
    }
    #jobs-search-form .filter-item .filter-item-top .counter {
        position: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: bold;
        font-size: 12px;
        line-height: 1;
        font-style: normal;
        background: #9c9efe;
        padding: 2px 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        transform: unset;
    }
    #jobs-search-form .filter-item.sector .filter-item-top .counter {
        position: unset;
        transform: unset;
        margin-left: 10px;
    }
    #jobs-search-form .filter-item .filter-item-top span.close-filter-item {
        background: #9C9EFE !important;
        border-radius: 8px !important;
        color: #fff !important;
        padding: 10px 40px !important;
    }
    #jobs-search-form .form-advanced .filter-item .counter {
        background: #9C9EFE;
        color: #fff;
    }
    #jobs-search-form .form-advanced .location .filter-item .counter {
        background: #fff;
        color: #9C9EFE;
    }
    #jobs-search-form .form-advanced .location .filter-item  .wrap-counter .counter {
        background: #9C9EFE;
        color: #fff;
    }
    
    #jobs-search-form .form-top .location {
        display: none;
    }
    #jobs-search-form .filter-items .location {
        display: block !important;
        padding: 5px 3px;
    }
    #jobs-search-form .filter-items .location .filter-item {
        background: #9C9EFE;
        height: 40px;
        margin-bottom: 10px;
    }
    #jobs-search-form .filter-items .location .filter-item img {
        display: none;
    }
    #jobs-search-form .filter-items .location .filter-item input:not(.local-search-state) {
        color: #fff;
        font-size: 14px !important;
        display: block;
        text-align: center;
    }
    #jobs-search-form .form-advanced .filter-wrap .filter-items .location .filter-item>span {
        color: #fff;
        font-weight: 500;
        display: block;
        text-align: center;
        width: 100%;
        background: none;
    }
    #jobs-search-form .filter-items .location .filter-item input:not(.local-search-state)::placeholder {
        color: #fff;
    }
    .fiter-entry .sorts {
        display: none;
    }
    .related-view-jobs h2.title {
        font-size: 20px;
        line-height: 1.2;
        text-align: center;
    }
    .related-view-jobs h2.title span{
        display: block;
        width: 100%;
    }
    .jobsearch-jobdetail-content.jobsearch-employerdetail-content {
        margin: 50px 0 !important;
    }
    #jobs-search-form.jobs-search-form .filter-item .wrap ul.state-list{
        margin-top: 0;
    }
    #jobs-search-form .filter-item.states-wrap.state .wrap ul li[data-search="yes"]{
        position: unset;
    }
}
@media (max-width: 768px) {
    .filter-wrap .filter-items .filter-item .wrap {
        padding: 10px !important;
    }
    .filter-wrap .filter-items .filter-item:hover .wrap {
        visibility: visible !important;
        opacity: 1 !important;
    }
    .jobsearch-jobdetail-list .jobsearch-list-option {
        order: 3;
        width: 100%;
        margin-top: 20px;
    }
    .jobsearch-jobdetail-list {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .group-features {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 1;
    }
}
@media (max-width: 576px) {
    .jobsearch-jobexpire-notifyerr-inner{
        padding: 0 !important;
    }
    .jobexpire-notify-msgcon h2 {
        font-size: 18px !important;
    }
    .filter-wrap .filter-items .filter-item {
        width: 100% !important;
    }
    #jobs-search-form .form-advanced .reset-wrap span {
        padding: 5px 20px;
    }
    #jobs-search-form .form-advanced .filter-wrap .filter-wrap-top .close {
        padding: 5px 20px;
    }
    #jobs-search-form .filter-wrap {
        padding: 10px;
    }
    #jobs-search-form .filter-item .filter-item-top span.close-filter-item {
        padding: 5px 20px !important;
    }
    #jobs-search-form .filter-item .filter-item-top label {
        font-size: 16px;
    }
    .group-features {
        flex-wrap: wrap;
    }
    .group-features .new-chat-private {
        order: 3;
        width: 100%;
        text-align: right;
        margin: 10px 0 5px 0;
        padding: 0;
    }
    .group-features .new-apply-job-mobile-button {
        display: flex !important;
        justify-content: flex-end;
        order: 3;
        width: 100%;
        text-align: right;
    }
    .custom-mobile-hide {
        display: none !important;
    }
    .group-features .jobsearch_apply_job_wrap {
        margin-right: 0 !important;
    }
    .group-features .jobsearch_apply_job_wrap a {
        font-size: 12px !important;
        margin: 0 !important;
        font-weight: normal !important;
        line-height: 1;
        border-radius: 15px !important;
        padding: 11px 15px !important;
    }
    .group-features .jobsearch_apply_job_wrap a small {
        font-size: 12px !important;
    }
}
@media (max-width: 480px) {
    #jobs-search-form .form-advanced .filter-wrap .filter-items .filter-item>span {
        padding: 0px 20px;
        height: 36px;
        line-height: 36px;
    }
    #jobs-search-form .filter-items .location .filter-item {
        height: 36px;
        margin-bottom: 6px;
    }
    .filter-wrap .filter-items .filter-item {
        padding: 3px 3px;
    }
}
.single-candidate .jobsearch-candidate-editor {
    margin-bottom: 50px;
}
.single-candidate .jobsearch-typo-wrap {
    color: #58595B;
}
.single-candidate .jobsearch-typo-wrap span, .single-candidate .jobsearch-typo-wrap small {
    font-size: 16px;
    color: #58595B !important;
}
.single-candidate .jobsearch-typo-wrap strong {
    font-weight: bold;
}
.single-candidate .jobsearch-candidate-timeline-text span a {
    color: #9c9efe;
}
.single-candidate .jobsearch-typo-wrap .jobsearch-candidate-timeline-text p {
    font-size: 16px;
    color: #58595B;
}
.single-candidate .jobsearch-typo-wrap .jobsearch-candidate-timeline-text ul, .single-candidate .jobsearch-typo-wrap .jobsearch-candidate-timeline-text ol {
    padding-left: 20px !important;
}
.single-candidate .jobsearch-typo-wrap .jobsearch-candidate-timeline-text ul li {
    list-style: disc !important;
    display: list-item !important;
}
.single-candidate .jobsearch-typo-wrap ol li {
    list-style-type: decimal !important;
    display: list-item !important;
}
.jobsearch-candidate-resume-wrap small {
    font-size: 16px;
}
.jobsearch-candidate-resume-wrap strong {
    font-weight: bold;
}
.jobsearch-candidate-resume-wrap {
    color: #58595B;
}
.load-more-wraper {
    text-align: right;
}
.load-more-wraper #load-more {
    background: #9c9efe !important;
    color: #fff;
    font-size: 14px;
    border: none;
    padding: 5px 15px;
}
.freelance-profile-menu li {
    position: relative;
}


/* Submenu left border line (gray, như D6) */
li.freelance-profile-menu .freelance-profile-list {
    padding-left: 22px;
    margin-top: 2px;
    margin-bottom: 8px;
    position: relative;
}
li.freelance-profile-menu .freelance-profile-list li,
li.freelance-profile-menu .freelance-profile-list a{
    border: none !important;
}
li.freelance-profile-menu .freelance-profile-list:before{
    content: '';
    height: calc(100% - 20px);
    top: 10px;
    left: 15px;
    border-left: 1px solid #eeecff;
    position: absolute;
    z-index: 1;
}
/* Sub-items */
li.freelance-profile-menu li a {
    background-color: transparent !important;
    color: #9c9efe !important;
    margin-left: 15px !important;
    padding: 10px 14px !important;
    border-left: none !important;
    font-size: 13px !important;
    height: 36px !important;
    line-height: 36px !important;
    width: 100% !important;
}
li.freelance-profile-menu li a:hover {
    background-color: #eeecff !important;
    color: #9c9efe !important;
}
li.freelance-profile-menu li.active a {
    background-color: #eeecff !important;
    color: #9c9efe !important;
}
#freelance-profile-form .radio-type .radio-wrap {
    display: inline-block;
    position: relative;
}
#freelance-profile-form .radio-wrap span {
    border: 1px solid #9c9efe;
    color: #000;
    padding: 3px 15px;
    border-radius: 5px;
    display: inline-block;
    margin: 10px 10px 10px 0;
    line-height: 1.4;
}
#freelance-profile-form .radio-wrap input:checked+span {
    background: #9c9efe;
    color: #fff;
}
#freelance-profile-form .radio-wrap input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    cursor: pointer;
    opacity: 0;
}
#freelance-profile-form .submit-wrap {
    margin: 30px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
#freelance-profile-form .submit-status {
    margin-left: 20px;
    color: #fff;
    border-radius: 4px;
    padding: 6px 24px;
    background: green;
    text-transform: uppercase;
}
#freelance-profile-form .slider-type .slider-wrap {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}
#freelance-profile-form .slider-type .slider-wrap .display-value {
    background: #ebebeb;
    padding: 5px 20px;
    border-radius: 10px;
    margin-bottom: 0;
    display: inline-block;
    line-height: 1.4;
    color: #9c9efe;
    font-weight: 500;
}
#freelance-profile-form .slider-type .slider-wrap .display-value i {
    color: #000;
    font-style: normal;
}
#freelance-profile-form .slider-type .slider-wrap p {
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}
#freelance-profile-form .slider-type .ui-slider-horizontal {
    height: 5px;
    background: #000 !important;
}
#freelance-profile-form .ui-slider-handle {
    width: 12px;
    height: 12px;
    background: #9c9efe !important;
    box-shadow: none !important;
    border-radius: 20px !important;
    padding: 0 !important;
}
.result-text {
    padding: 5px 25px !important;
    background: #ebebeb;
}
.required {
    color: red;
}
.open-form {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 185px;
    height: 35px;
    background: #9c9efe;
    color: #fff;
    margin: 30px 0 !important;
    cursor: pointer;
    border-radius: 4px;
}
.unverified_count {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 1;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9c9efe;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.freelance-profile-list > li > a > i {
    font-size: 12px !important;
    color: #9c9efe !important;
    left: 8px !important;
    top: 50% !important;
    margin-top: 0 !important;
}
li.freelance-profile-menu li.active a > i {
    color: #9c9efe !important;
}
.wrap-recommender .result-count {
    font-size: 26px;
    border-bottom: 1px solid #9c9efe;
    margin-bottom: 20px;
    padding-block: 20px;
}
.wrap-recommender .recommender-item {
    border: 1px solid #9c9efe;
    margin-bottom: 20px;
    position: relative;
    border-radius: 20px;
    padding: 20px;
}
.wrap-recommender .recommender-item .item-head {
    max-width: 80%;
    margin-bottom: 20px;
}
.wrap-recommender .recommender-item .item-head .linkedin {
    position: absolute;
    top: 30px;
    right: 20px;
    z-index: 1;
}
.wrap-recommender .recommender-item .item-head h2 {
    font-size: 22px;
}
.wrap-recommender .recommender-item .item-head p {
    font-size: 14px;
    color: #000;
    font-weight: 400;
    width: 100%;
    line-height: 1.8;
    margin: 0;
}
.wrap-recommender .recommender-item .item-head p span {
    font-weight: 500;
}
.wrap-recommender .recommender-item .message {
    font-size: 16px;
    color: #000;
    margin-bottom: 15px;
}
.wrap-recommender .recommender-item .date-publish {
    font-size: 14px;
    color: #000;
}

/* ── Recommendations Redesign ─────────────────────────────────── */
/* Hide the old purple banner when new design is present */
.jobsearch-employer-box-section:has(.mdp-recs) > .jobsearch-profile-title { display: none; }
.mdp-recs { max-width: 100%; }

/* Header */
.mdp-recs-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}
.mdp-recs-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #111827;
}
.mdp-recs-subtitle {
    font-size: 14px !important;
    color: #6b7280;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5;
}
.mdp-recs-request-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 18px !important;
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    line-height: 1.4 !important;
}
.mdp-recs-request-btn:hover { background: #f9fafb !important; border-color: #9ca3af !important; }

/* Stats Row */
.mdp-recs-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}
.mdp-recs-stat {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px 20px !important;
    margin: 0 !important;
    text-align: center;
}
.mdp-recs-stat-num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #111827;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
}
.mdp-recs-stat-num svg { flex-shrink: 0; }
.mdp-recs-stat-label {
    display: block;
    font-size: 13px !important;
    color: #6b7280;
    margin: 6px 0 0 !important;
    padding: 0 !important;
}

/* Pending Section */
.mdp-recs-pending {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 16px;
    padding: 24px !important;
    margin: 0 0 28px !important;
}
.mdp-recs-pending-label {
    display: flex;
    align-items: center;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #92400e;
    margin: 0 0 18px !important;
    padding: 0 !important;
}
.mdp-recs-pending-label svg { color: #f59e0b; }
.mdp-recs-pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 !important;
    margin: 0 !important;
    border-top: 1px solid #fde68a;
}
.mdp-recs-pending-item:first-of-type { border-top: none; padding-top: 0 !important; }
.mdp-recs-pending-info strong {
    display: block;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827;
    margin: 0 !important;
    padding: 0 !important;
}
.mdp-recs-pending-info span {
    display: block;
    font-size: 13px !important;
    color: #6b7280;
    margin: 2px 0 0 !important;
    padding: 0 !important;
}
.mdp-recs-pending-actions {
    display: flex;
    align-items: center;
    gap: 14px !important;
    flex-shrink: 0;
}
.mdp-recs-pending-time {
    font-size: 13px !important;
    color: #9ca3af;
}
.mdp-recs-remind-btn {
    padding: 7px 16px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer;
    transition: all .2s;
    line-height: 1.4 !important;
}
.mdp-recs-remind-btn:hover { background: #f9fafb !important; border-color: #d1d5db !important; }
.mdp-recs-remind-btn.sent { color: #059669 !important; border-color: #a7f3d0 !important; background: #ecfdf5 !important; }

/* Section title */
.mdp-recs-section-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #111827;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

/* Recommendation Cards */
.mdp-recs-list {
    display: flex;
    flex-direction: column;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mdp-recs-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px !important;
    margin: 0 !important;
    transition: box-shadow .2s;
}
.mdp-recs-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.mdp-recs-card-top {
    display: flex;
    align-items: center;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mdp-recs-avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px !important;
    font-weight: 700 !important;
    flex-shrink: 0;
    letter-spacing: .5px;
    margin: 0 !important;
    padding: 0 !important;
}
.mdp-recs-card-info {
    flex: 1;
    min-width: 0;
}
.mdp-recs-card-info strong {
    display: block;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827;
    margin: 0 !important;
    padding: 0 !important;
}
.mdp-recs-card-info span {
    display: block;
    font-size: 13px !important;
    color: #6b7280;
    margin: 1px 0 0 !important;
    padding: 0 !important;
}
.mdp-recs-card-right {
    display: flex;
    align-items: center;
    gap: 10px !important;
    flex-shrink: 0;
}
.mdp-recs-stars {
    display: flex;
    gap: 2px !important;
}
.mdp-recs-stars svg { display: block; }

/* Three-dot dropdown */
.mdp-recs-menu-wrap { position: relative; }
.mdp-recs-menu-btn {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    cursor: pointer;
    color: #9ca3af !important;
    transition: all .15s;
    padding: 0 !important;
}
.mdp-recs-menu-btn:hover { background: #f3f4f6 !important; color: #6b7280 !important; border-color: #e5e7eb !important; }
.mdp-recs-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    min-width: 170px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    padding: 4px;
    display: none;
}
.mdp-recs-dropdown.open { display: block; }
.mdp-recs-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #374151 !important;
    background: none !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s;
}
.mdp-recs-dropdown-item:hover { background: #f3f4f6 !important; }

/* Meta row (date) */
.mdp-recs-meta {
    margin: 14px 0 0 !important;
    padding: 0 !important;
    display: flex;
    gap: 16px !important;
}
.mdp-recs-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px !important;
    font-size: 13px !important;
    color: #9ca3af;
    margin: 0 !important;
    padding: 0 !important;
}
.mdp-recs-meta-item svg { color: #d1d5db; }

/* Quote */
.mdp-recs-quote {
    margin: 16px 0 0 !important;
    padding: 16px 20px !important;
    background: #f9fafb;
    border-left: 3px solid #9c9efe;
    border-radius: 0 8px 8px 0;
    font-size: 14px !important;
    color: #374151;
    line-height: 1.7;
    font-style: italic;
}

/* Empty state */
.mdp-recs-empty {
    text-align: center;
    padding: 60px 20px !important;
    background: #fff;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    margin: 8px 0 0 !important;
}
.mdp-recs-empty svg { margin: 0 0 12px !important; }
.mdp-recs-empty p {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #6b7280;
    margin: 0 0 4px !important;
    padding: 0 !important;
}
.mdp-recs-empty span {
    font-size: 13px !important;
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 640px) {
    .mdp-recs-header { flex-direction: column; }
    .mdp-recs-stats { grid-template-columns: 1fr; }
    .mdp-recs-card-top { flex-wrap: wrap; }
    .mdp-recs-card-right { width: 100%; justify-content: space-between; margin-top: 8px; }
    .mdp-recs-pending-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ── End Recommendations Redesign ─────────────────────────────── */

.freelance-contract-button {
    border-width: 1px;
    border-style: solid;
    color: #fff !important;
    border-radius: 4px;
    display: inline-block;
    padding: 5px 16px !important;
    margin-bottom: 15px !important;
}
.min-max-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.min-max-value span {
    color: #000;
    font-size: 14px;
}
.item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.item-footer .remove-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #9c9efe !important;
    border: 1px solid #9c9efe;
    color: #fff !important;
    border-radius: 4px;
    display: inline-block;
    padding: 5px 16px !important;
    cursor: pointer;
}
.dash-notifics-nofound {
    text-align: center;
}
/*Freelance*/

.single-freelance-profile .wrap-image {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.single-freelance-profile .wrap-image .socials {
    text-align: center;
}
.single-freelance-profile .wrap-image .socials a {
    color: #9c9efe;
    font-size: 22px;
}
.single-freelance-profile .wrap-image .member-since {
    font-size: 14px;
    color: #000;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 5px 0;
    justify-content: center;
}
.single-freelance-profile .wrap-image .member-since span {
    font-weight: 500;
    margin: 0;
    padding-left: 5px;
}
.single-freelance-profile .wrap-info-head {
    width: 80%;
    padding-left: 30px;
}
.single-freelance-profile .wrap-info-head .group {
    display: flex;
    justify-content: space-between;
}
.single-freelance-profile .wrap-info-head .specialization {
    font-size: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.single-freelance-profile .wrap-info-head .specialization span {
    font-weight: 500;
    margin: 0 0 5px 5px;
    background: #9c9efe;
    color: #fff;
    border-radius: 5px;
    padding: 5px 15px;
    display: inline-block;
}
.single-freelance-profile .wrap-info-head .count-recommendation {
    display: flex;
    align-items: center;
}
.single-freelance-profile .wrap-info-head .count-recommendation span {
    font-weight: 500;
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    padding-top: 2px;
    white-space: nowrap;
}
.single-freelance-profile .wrap-info-head .download-cv {
    display: flex;
    align-items: center;
}
.single-freelance-profile .wrap-info-head .download-cv a {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin: 0;
    padding-top: 2px;
    color: #333;
    white-space: nowrap;
}
.single-freelance-profile .wrap-info-head .download-cv img {
    width: 18px;
    margin-right: 8px;
    margin-left: 4px;
}
.single-freelance-profile .wrap-info-head .years_of_experience {
    margin: 15px 0 25px 0;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.single-freelance-profile .wrap-info-head .years_of_experience span {
    color: rgb(102, 1, 255);
    margin: 0;
    padding-left: 5px;
    font-weight: 500;
}
.single-freelance-profile .wrap-info-head .pricing_daily_rate {
    display: flex;
    align-items: center;
}
.single-freelance-profile .wrap-info-head .pricing_daily_rate span {
    font-weight: 500;
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    padding-top: 2px;
    color: #6601FF;
}
.single-freelance-profile .wrap-info-head .pricing_hourly_rate {
    display: flex;
    align-items: center;
}
.single-freelance-profile .wrap-info-head .pricing_hourly_rate span {
    font-weight: 500;
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    padding-top: 2px;
    color: rgb(102, 1, 255);
}
.single-freelance-profile .wrap-info-head .country {
    display: flex;
    align-items: center;
}
.single-freelance-profile .wrap-info-head .country span {
    font-weight: 500;
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    padding-top: 2px;
}
.single-freelance-profile .wrap-info-head .availability {
    display: flex;
    align-items: center;
}
.single-freelance-profile .wrap-info-head .availability span {
    font-weight: 500;
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    padding-top: 2px;
}
.single-freelance-profile .wrap-info-head .languages {
    display: flex;
    align-items: center;
}
.single-freelance-profile .wrap-info-head .languages span {
    font-weight: 500;
    margin: 0;
    margin-left: 5px;
    display: inline-block;
    padding-top: 2px;
}
.single-freelance-profile .wrap-info-head .chat-shortlist {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.single-freelance-profile .wrap-info-head .chat-shortlist .bpbm-pm-button {
    margin-bottom: 10px;
    background: #9c9efe;
}
.single-freelance-profile .wrap-info-head .chat-shortlist .bpbm-pm-button span {
    margin: 0;
    color: #fff;
}
.single-freelance-profile .wrap-info-head .chat-shortlist .short-list-freelancer {
    background: #9c9efe;
    color: #fff;
    border-radius: 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 15px;
}
.single-freelance-profile .wrap-info-head .chat-shortlist .short-list-freelancer span {
    color: #fff;
    font-size: 14px;
    margin: 0 0 0 5px;
}
.single-freelance-profile .wrap-info-head .chat-shortlist .short-list-freelancer .yes {
    display: none;
}
.single-freelance-profile .wrap-info-head .chat-shortlist .short-list-freelancer.saved .yes {
    display: block;
}
.single-freelance-profile .wrap-info-head .chat-shortlist .short-list-freelancer.saved .no {
    display: none;
}
.single-freelance-profile .jobsearch_candidate_info figure {
    border-radius: 10px;
}
.single-freelance-profile .jobsearch-candidate-timeline-text .sub-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 20px;
}
.single-freelance-profile .jobsearch-candidate-timeline-text .sub-title span {
    margin: 0;
    font-size: 20px;
    color: #9c9efe;
}
.single-freelance-profile .timeline-info {
    font-size: 16px !important;
}
.single-freelance-profile .jobsearch-candidate-editor.jobsearch-description {
    margin-bottom: 50px;
}
.single-freelance-profile .top-skill-and-competencies .jobsearch-candidate-timeline-text {
    margin-top: -8px;
}
.single-freelance-profile .top-skill-and-competencies .jobsearch-candidate-timeline-text strong {
    color: #58595B;
    font-weight: 600;
    font-size: 18px;
}
#freelance-profile-form .profile-views-past {
    padding: 15px;
    border: 2px solid #9c9efe;
    margin-bottom: 20px;
    border-radius: 5px;
    clear: both;
    font-size: 18px;
    color: #000;
}
#freelance-profile-form .profile-views-past div:first-child {
    margin-bottom: 10px;
}
#freelance-profile-form .profile-views-past .past-number {
    padding-right: 10px;
}
#freelance-profile-form .profile-views-past .past-days {
    font-weight: bold;
}
#freelance-profile-form .profile-views-by-location {
    padding: 15px;
    border: 2px solid #9c9efe;
    margin-bottom: 20px;
    border-radius: 5px;
    clear: both;
    font-size: 18px;
    color: #000;
}
#freelance-profile-form .profile-views-by-location .title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}
#freelance-profile-form .profile-views-by-location .list-location-view {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}
#freelance-profile-form .profile-views-by-location .list-location-view li {
    width: 25%;
    font-size: 18px;
    color: #000;
    margin-bottom: 20px;
}
#freelance-profile-form .profile-views-by-location .list-location-view li span {
    font-weight: bold;
    padding-right: 5px;
}
/*Search Freelancer*/

.search-freelancers .form-advanced .filter-wrap .filter-items {
    justify-content: center;
}
.search-freelancers-listing .jobsearch-joblisting-classic-wrap .jobsearch-joblisting-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.search-freelancers-listing .jobsearch-pst-title {
    margin-bottom: 0;
    margin-top: 20px;
}
.search-freelancers-listing .result-count {
    width: 100%;
    margin: 0;
    padding-left: 5px;
}
.search-freelancers-listing .result-count span {
    color: #9c9efe;
}
.search-freelancers-listing .jobsearch-joblisting-text .freelance_profile_sector {
    color: #9c9efe;
    margin-bottom: 15px;
}
.search-freelancers-listing .jobsearch-joblisting-text p {
    line-height: 1.3;
    margin-bottom: 6px;
    font-size: 15px;
}
.search-freelancers-listing .jobsearch-joblisting-text p.day-rate, .search-freelancers-listing .jobsearch-joblisting-text p.hourly-rate {
    font-weight: 600;
}
.search-freelancers-listing .jobsearch-joblisting-text .years_of_experience span {
    color: #9c9efe;
    font-weight: 600;
}
.search-freelancers-listing .jobsearch-joblisting-bottom {
    padding: 5px 5px 30px 5px;
    position: relative;
    width: 100%;
}
.search-freelancers-listing .jobsearch-joblisting-bottom p {
    line-height: 1.3;
    margin-bottom: 10px;
    font-size: 15px;
}
.search-freelancers-listing .jobsearch-joblisting-bottom strong {
    font-weight: 600;
}
.search-freelancers-listing .jobsearch-joblisting-bottom .account-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.search-freelancers-listing .jobsearch-joblisting-bottom .account-status p {
    color: #9c9efe;
    margin: 0;
    padding: 10px 5px;
    font-size: 14px;
}
.search-freelancers-listing .jobsearch-joblisting-bottom .account-status p.member-since {
    color: #000
}
.freelance-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    display: flex;
    align-items: center;
}
.freelance-actions a {
    width: 26px;
    height: 26px;
    background: #9c9efe;
    border-radius: 50%;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}
.freelance-actions a:hover {
    opacity: 1;
}
.freelance-actions a i {
    color: #fff;
    font-size: 12px;
}
.freelance-actions span {
    width: 26px;
    height: 26px;
    background: #9c9efe;
    border-radius: 50%;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}
.freelance-actions span:hover {
    opacity: 1;
}
.freelance-actions span i.jobsearch-icon.jobsearch-rubbish, .freelance-actions span i {
    color: #fff !important;
    font-size: 12px;
}
.search-freelancers-listing .view-toggle {
    color: #9c9efe;
    position: relative;
    z-index: 2;
}
.search-freelancers-listing .jobsearch-joblisting-classic-wrap figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.search-freelancers-listing .jobsearch-joblisting-classic-wrap figure img{
    border-radius: 15px;
    box-shadow: 0 0 5px #efefef;
    width: 95px;
    height: 95px;
    object-fit: cover;
}
.search-freelancers-listing .jobsearch-joblisting-classic-wrap figure span {
    text-align: center;
    color: red;
    font-size: 12px;
    line-height: 1.2;
    display: block;
    margin-top: 5px;
}
.search-freelancers .search-input .item-inner {
    position: relative;
}
.search-freelancers .search-input .item-inner .search-input-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: text;
}
.search-freelancers .search-input .item-inner .search-input-placeholder label {
    font-size: 16px;
    color: #666;
    pointer-events: none;
}
.search-freelancers .search-input .item-inner .search-input-placeholder p {
    margin: 0;
    font-size: 12px;
    color: #666;
    margin-top: -5px;
    pointer-events: none;
}
.jobs-listing article .action-link-freelancer:not(.view-detail) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.spin-animation:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    animation: spin 0.8s linear infinite;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4cHgiIGhlaWdodD0iMTI4cHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjY0IiBjeT0iNjQiIHI9IjU2IiBzdHJva2U9IiMwMDc4ZGIiIHN0cm9rZS13aWR0aD0iMTYiIGZpbGw9Im5vbmUiIHN0cm9rZS1kYXNoYXJyYXk9IjkwIDMwIi8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
.short-list-freelancer.saved {
    pointer-events: none;
}
.short-list-freelancer .jobsearch-star {
    display: none;
}
.short-list-freelancer.saved .jobsearch-star {
    display: block;
}
.short-list-freelancer.saved .jobsearch-star-1 {
    display: none;
}
.jobs-listing.grid-column-2 {
    grid-template-columns: repeat(2, 1fr);
}
#jobs-search-form.shortlist_freelance_and_filter_form .location, #jobs-search-form.shortlist_freelance_and_filter_form .form-top>.filter-item {
    width: 40%;
}
#jobs-search-form.shortlist_freelance_and_filter_form .location .countries-wrap:after {
    content: none;
}

.view-type-shortlisted {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px !important;
}
.view-type-shortlisted span {
    width: 120px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #9C9EFE;
    color: #9C9EFE;
    margin: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.view-type-shortlisted span.active {
    background: #9C9EFE;
    color: #fff;
}
.relative {
    position: relative;
}
.add-to-shortlisted .jobsearch-star {
    display: none;
}
.add-to-shortlisted.saved .jobsearch-star {
    display: block;
}
.add-to-shortlisted.saved .jobsearch-star-1 {
    display: none;
}
#jobs-search-form .radio-wrap {
    position: relative;
}
#jobs-search-form .radio-wrap input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    cursor: pointer;
    opacity: 0;
}
#jobs-search-form .radio-wrap input:checked+span {
    background: #9c9efe;
    color: #fff;
}

.wrap-slider {
    position: relative;
    padding: 11px 0 11px 42px !important;
    height: 50px;
    line-height: 50px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 1px solid #eceeef;
}
.wrap-slider > span {
    color: #333333;
    font-size: 16px;
    line-height: 50px;
}
.wrap-slider > span > svg {
    position: absolute;
    left: 12px;
    top: 15px;
    color: #aaaaaa;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}
.wrap-slider .switch {
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    display: inline-block;
    width: 44px;
    height: 20px;
}

.wrap-slider .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.wrap-slider .slider {
    background-color: #ccc;
    position: absolute;
    cursor: pointer;
    border-radius: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.4s;
    font-size: 9px;
    text-align: center;
    line-height: 20px;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3px !important;
}

.wrap-slider .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    top: 1px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    z-index: 2;
}

.wrap-slider input:checked + .slider {
    background-color: #9c9efe;
}

.wrap-slider input:checked + .slider:before {
    transform: translateX(22px);
}
.bp-better-messages-unread.bpbmuc {
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bp-better-messages-unread.bpbmuc{
    right: 5px !important;
}
.wrap-menu-account li ul{
    width: 100%;
}
.wrap-menu-account li ul li a{
    position: relative;
    border: none;
}
.wrap-menu-account li ul li a svg{
    margin-right: 5px;
    width: 14px;
    height: 14px;
}
.jobsearch-modal.modal-xs .modal-content-area {
    max-width: 280px;
}

.jobsearch-modal.modal-xs .modal-box-area {
    border: 1px solid #9c9efe;
    border-radius: 12px;
    padding: 10px 0;
}

.btn-secondary,
.jobsearch-typo-wrap .btn-secondary,
.btn-secondary-outline,
.jobsearch-typo-wrap .btn-secondary-outline {
    font-size: 16px !important;
    line-height: 40px;
    height: 40px;
    display: inline-block;
    padding: 0 16px;
    border-radius: 4px;
    border: 1px solid #9c9efe;
}

.btn-secondary.btn-full,
.btn-secondary-outline.btn-full {
    width: 100%;
}

.btn-secondary.btn-wide,
.btn-secondary-outline.btn-wide {
    min-width: 200px;
}

.btn-secondary,
.jobsearch-typo-wrap .btn-secondary {
    color: #fff !important;
    background-color: #9c9efe !important;
}

.btn-secondary-outline,
.jobsearch-typo-wrap .btn-secondary-outline {
    color: #9c9efe !important;
    background-color: #fff !important;
}

#mpjs-sc-assign-recruiter-modal .modal-close-btn {
    margin: 0 auto 20px;
}

#mpjs-sc-assign-recruiter-modal  .mpjs-submit {
    margin: 30px auto;
}

.jobsearch-form i.jobsearch-icon.jobsearch-technology {
    display: none !important;
}

.jobsearch-form .phon-num-fieldcon:before {
    top: 7px;
}

.jobsearch-form .selectize-control.single .selectize-input {
    height: 42px;
    padding: 10px 14px;
}

.is-invalid input,
.is-invalid select,
.is-invalid textarea,
.is-invalid .selectize-input,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border: 1px solid #ff0000 !important;
}

.text-bold,
button.text-bold,
.btn-secondary.text-bold {
    font-weight: bold;
}
a.view-example{
    color: #9c9efe !important;
}

.mdp-popup.view-example-content .popup-inner .popup-wrap{
    max-height: 65vh;
    overflow-y: auto;
    color: #333;
    font-size: 14px;
}

.mdp-popup.view-example-content {
    line-height: 1.6;
    font-size: 15px;
}

.mdp-popup.view-example-content h2 {
    color: #9c9efe;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
    letter-spacing: unset;
}

.mdp-popup.view-example-content h3 {
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 8px;
    letter-spacing: unset;
}

.mdp-popup.view-example-content p,
.mdp-popup.view-example-content li {
    font-size: 15px;
    margin-bottom: 10px;
}

.mdp-popup.view-example-content ol,
.mdp-popup.view-example-content ul {
    padding-left: 20px;
    margin-bottom: 20px;
}
.mdp-popup.view-example-content ol,
.mdp-popup.view-example-content ol li{
    list-style-type: decimal;
}
.mdp-popup.view-example-content ul,
.mdp-popup.view-example-content ul li{
    list-style-type: disc;
}
.mdp-popup.view-example-content strong {
    font-weight: bold;
}

.jobsearch-employer-dasboard #cometchat{
    position:relative;
    z-index:1;
    width: 100%;
}
.wrap-submit{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.wrap-submit *{
    height: 44px;
    margin: 10px !important;
    float: none;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.jobsearch-joblisting-bottom .jobsearch-job-userlist {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 20px);
}
.jobsearch-joblisting-bottom .jobsearch-job-userlist .workplace_type {
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 17px 8px 17px;
    line-height: 1;
    background-color: #9c9efe;
    color: #ffffff;
    border-radius: 6px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jobsearch-joblisting-bottom .jobsearch-job-userlist .workplace_type.onsite{
    background: #999;
}
.jobsearch-joblisting-bottom .jobsearch-job-userlist .workplace_type.remote{
    background: #8DB600;
}
.jobsearch-joblisting-bottom .jobsearch-job-userlist .workplace_type.hybrid{
    background: #865bcf;
}
#employer-profilesetings-form #jobs-search-form .location,
#candidate-profilesetings-form #jobs-search-form .location,
#job-posting-form #jobs-search-form .location {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#employer-profilesetings-form #jobs-search-form .location .filter-item,
#candidate-profilesetings-form #jobs-search-form .location .filter-item,
#job-posting-form #jobs-search-form .location .filter-item{
    width: 50%;
    flex-direction: column;
}
#employer-profilesetings-form #jobs-search-form .location input,
#candidate-profilesetings-form #jobs-search-form .location input,
#job-posting-form #jobs-search-form .location input{
    border: 1px solid #9c9efe;
    border-radius: 30px;
    font-size: 14px !important;
    font-weight: 400;
}
#employer-profilesetings-form #jobs-search-form .location .countries-wrap:after,
#candidate-profilesetings-form #jobs-search-form .location .countries-wrap:after,
#job-posting-form #jobs-search-form .location .countries-wrap:after{
    content: none;
}
#employer-profilesetings-form #jobs-search-form .filter-item div.wrap,
#candidate-profilesetings-form #jobs-search-form .filter-item div.wrap,
#job-posting-form #jobs-search-form .filter-item div.wrap{
    left: 10px;
    width: calc(100% - 20px);
}
#employer-profilesetings-form #jobs-search-form .filter-item div.wrap li,
#candidate-profilesetings-form #jobs-search-form .filter-item div.wrap li,
#job-posting-form #jobs-search-form .filter-item div.wrap li{
    margin-bottom: 0 !important;
}
#employer-profilesetings-form #jobs-search-form .location .main-tab-section{
    width: 100%;
}
#employer-profilesetings-form #jobs-search-form .location .jobsearch-employer-box-section{
    display: flex;
    flex-wrap: wrap;
}
.salary-select.single .selectize-input {
    height: 42px;
    display: flex;
    align-items: center;
}

/* ── FL Profile Page (?tab=fl-profile) ──────────────────────── */
.mdp-fl-profile-page {
    padding: 28px 32px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.mdp-fl-profile-page .mdp-flp-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
}
.mdp-fl-profile-page .mdp-flp-header-icon {
    color: #5a4fcf;
    margin-top: 2px;
    flex-shrink: 0;
}
.mdp-fl-profile-page .mdp-flp-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}
.mdp-fl-profile-page .mdp-flp-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}
.mdp-fl-profile-page .mdp-flp-section {
    margin-bottom: 28px;
}
.mdp-fl-profile-page .mdp-flp-section-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}
/* Pill buttons */
.mdp-fl-profile-page .mdp-flp-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}
.mdp-fl-profile-page .mdp-flp-pill {
    padding: 8px 20px !important;
    border-radius: 20px !important;
    border: 1px solid #9c9efe !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    line-height: 1.4 !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
}
.mdp-fl-profile-page .mdp-flp-pill:hover {
    border-color: #9c9efe !important;
    color: #5a4fcf !important;
    background: #fff !important;
}
.mdp-fl-profile-page .mdp-flp-pill.active {
    background: #9c9efe !important;
    border-color: #9c9efe !important;
    color: #fff !important;
}
/* Daily Rate slider */
.mdp-fl-profile-page .mdp-flp-slider-wrap {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.mdp-fl-profile-page .mdp-flp-daily-display {
    text-align: center;
    margin-bottom: 18px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    gap: 6px !important;
    border: 1px solid #9c9efe;
    width: 150px;
    height: 40px;
    border-radius: 30px;
}
.mdp-fl-profile-page #mdp-flp-daily-val {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #5a4fcf !important;
    line-height: 1.2 !important;
}
.mdp-fl-profile-page .mdp-flp-per-day {
    font-size: 15px !important;
    color: #6b7280 !important;
    margin-left: 0 !important;
}
.mdp-fl-profile-page .mdp-flp-slider-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.mdp-fl-profile-page .mdp-flp-slider-min,
.mdp-fl-profile-page .mdp-flp-slider-max {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}
.mdp-fl-profile-page .mdp-flp-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.mdp-fl-profile-page .mdp-flp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5a4fcf;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(90,79,207,0.35);
}
.mdp-fl-profile-page .mdp-flp-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5a4fcf;
    cursor: pointer;
    border: 2px solid #fff;
}
/* Footer */
.mdp-fl-profile-page .mdp-flp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
}
.mdp-fl-profile-page .mdp-flp-saved-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #16a34a;
    font-weight: 500;
}
.mdp-fl-profile-page .mdp-flp-save-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #9c9efe !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    outline: none !important;
    box-shadow: none !important;
}
.mdp-fl-profile-page .mdp-flp-save-btn:hover {
    background: #4a3fbf !important;
}

/* ── Availability & Rates Page (?tab=cust-availability-rates) ── */
.mdp-ar-page {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.mdp-ar-page-header {
    margin-bottom: 24px !important;
}
.mdp-ar-page-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}
.mdp-ar-page-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}
.mdp-ar-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 28px 28px 24px !important;
    margin-bottom: 20px !important;
}
.mdp-ar-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
    padding-bottom: 0 !important;
}
.mdp-ar-card-header svg {
    color: #5a4fcf;
    flex-shrink: 0;
}
.mdp-ar-card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Toggle row */
.mdp-ar-toggle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin-top: 4px !important;
}
.mdp-ar-toggle-info {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mdp-ar-toggle-icon {
    color: #5a4fcf;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #ededff;
    border-radius: 8px;
}
.mdp-ar-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.3;
}
.mdp-ar-toggle-desc {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}
/* Toggle switch */
.mdp-ar-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.mdp-ar-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.mdp-ar-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #d1d5db;
    border-radius: 24px;
    transition: 0.25s;
}
.mdp-ar-switch-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.25s;
}
.mdp-ar-switch input:checked + .mdp-ar-switch-slider {
    background-color: #5a4fcf;
}
.mdp-ar-switch input:checked + .mdp-ar-switch-slider:before {
    transform: translateX(20px);
}
/* Footer outside cards */
.mdp-ar-page .mdp-flp-footer {
    margin-top: 4px;
    padding-top: 0;
}
/* Daily rate slider inside card - no outer border */
.mdp-ar-card .mdp-flp-slider-wrap {
    border: none;
    padding: 0;
}

/* ── Profile Visibility Page (?tab=cust-profile-visibility) ── */
.jobsearch-employer-box-section:has(.mdp-pv-page) > .jobsearch-profile-title {
    display: none !important;
}
.jobsearch-employer-box-section:has(.mdp-pv-page) {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.jobsearch-employer-dasboard:has(.mdp-pv-page) {
    padding: 0 !important;
    margin: 0 !important;
}
.mdp-pv-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 22px !important;
    border-radius: 10px !important;
    margin-bottom: 20px !important;
}
.mdp-pv-banner--warning {
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
}
.mdp-pv-banner-icon {
    flex-shrink: 0;
    color: #ea580c;
    margin-top: 1px;
}
.mdp-pv-banner-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #c2410c !important;
    margin-bottom: 4px !important;
}
.mdp-pv-banner-desc {
    font-size: 13px;
    color: #9a3412;
    line-height: 1.5;
}
.mdp-pv-toggle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
}
.mdp-pv-toggle-row--active {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}
.mdp-pv-status-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    flex-shrink: 0 !important;
}
.mdp-pv-status-icon--on {
    background: #dcfce7 !important;
    color: #16a34a !important;
}
/* Green toggle for visibility */
.mdp-pv-page .mdp-ar-switch input:checked + .mdp-ar-switch-slider {
    background-color: #16a34a !important;
}

/* ── Application Hub — sidebar indicator icon ── */
.sidebar-submenu .mdp-app-sidebar-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}
.sidebar-submenu .mdp-app-sidebar-indicator {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.sidebar-submenu .mdp-app-sidebar-indicator svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    stroke: #ef4444 !important;
}

/* ── Application Hub Page (?tab=cust-application) ── */
.jobsearch-employer-box-section:has(.mdp-app-page) > .jobsearch-profile-title {
    display: none !important;
}
.jobsearch-employer-box-section:has(.mdp-app-page) {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.jobsearch-employer-dasboard:has(.mdp-app-page) {
    padding: 0 !important;
    margin: 0 !important;
}
.mdp-app-badge {
    display: inline-block !important;
    background: #fef3c7 !important;
    color: #92400e !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
}
.mdp-app-status-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 18px 22px !important;
    margin-bottom: 16px !important;
    background: #fff !important;
}
.mdp-app-status-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.mdp-app-progress-circle {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
}
.mdp-app-progress-svg {
    width: 48px !important;
    height: 48px !important;
}
.mdp-app-progress-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 3;
}
.mdp-app-progress-fill {
    fill: none;
    stroke: #7c3aed;
    stroke-width: 3;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.mdp-app-progress-text {
    fill: #374151;
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}
.mdp-app-status-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}
.mdp-app-status-desc {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
}
.mdp-app-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    cursor: pointer !important;
    border: none !important;
    text-decoration: none !important;
    transition: opacity .15s !important;
    white-space: nowrap !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.mdp-app-btn--primary {
    background: #7c3aed !important;
    color: #fff !important;
}
.mdp-app-btn--primary:hover {
    opacity: .9 !important;
}
.mdp-app-btn--outline {
    background: #fff !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
}
.mdp-app-btn--outline:hover {
    background: #f9fafb !important;
}
.mdp-app-btn--disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
}
.mdp-app-btn--full {
    width: 100% !important;
    padding: 14px 22px !important;
    font-size: 15px !important;
}
.mdp-app-info-banner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1e40af !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.mdp-app-info-banner svg {
    flex-shrink: 0;
}
.mdp-app-info-banner--yellow {
    background: #fefce8 !important;
    border-color: #fde68a !important;
    color: #854d0e !important;
}
/* Checklist Card */
.mdp-app-checklist-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.mdp-app-checklist-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.mdp-app-checklist-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    flex-shrink: 0 !important;
}
.mdp-app-checklist-icon--done {
    background: #dcfce7 !important;
    color: #16a34a !important;
}
.mdp-app-checklist-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}
.mdp-app-checklist-count {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
}
.mdp-app-checklist-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.mdp-app-badge-sm {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.mdp-app-badge-sm--progress {
    background: #fef3c7 !important;
    color: #92400e !important;
}
.mdp-app-badge-sm--complete {
    background: #dcfce7 !important;
    color: #166534 !important;
}
.mdp-app-badge-sm--review {
    background: #fef3c7 !important;
    color: #92400e !important;
}
.mdp-app-badge-sm--rejected {
    background: #fef2f2 !important;
    color: #991b1b !important;
}
.mdp-app-badge-sm--cooldown {
    background: #fff7ed !important;
    color: #9a3412 !important;
}
.mdp-app-badge-sm--eligible {
    background: #dcfce7 !important;
    color: #166534 !important;
}
.mdp-app-checklist-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 24px !important;
    padding-top: 16px !important;
}
.mdp-app-checklist-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
.mdp-app-check-icon {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}
.mdp-app-check-icon--done {
    color: #16a34a !important;
}
.mdp-app-check-icon--pending {
    color: #9ca3af !important;
}
.mdp-app-checklist-label {
    font-size: 14px !important;
    color: #111827 !important;
    font-weight: 500 !important;
}
.mdp-app-checklist-label--pending {
    color: #6b7280 !important;
}
.mdp-app-checklist-hint {
    display: block !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    margin-top: 1px !important;
}
.mdp-app-checklist-note {
    font-size: 13px !important;
    color: #9ca3af !important;
    font-style: italic !important;
    padding-top: 14px !important;
    border-top: 1px solid #f3f4f6 !important;
    margin-top: 14px !important;
}
/* Banners */
.mdp-app-banner {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 18px 22px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
}
.mdp-app-banner-left {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}
.mdp-app-banner-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.mdp-app-banner-icon--review {
    background: #fef3c7 !important;
    color: #d97706 !important;
}
.mdp-app-banner-icon--rejected {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}
.mdp-app-banner-icon--cooldown {
    background: #fff7ed !important;
    color: #ea580c !important;
}
.mdp-app-banner-icon--eligible {
    background: #dcfce7 !important;
    color: #16a34a !important;
}
.mdp-app-banner--review {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
}
.mdp-app-banner--rejected {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}
.mdp-app-banner--cooldown {
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
}
.mdp-app-banner--eligible {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}
.mdp-app-banner-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 4px !important;
}
.mdp-app-banner-desc {
    font-size: 13px !important;
    color: #4b5563 !important;
    line-height: 1.5 !important;
}
/* Timeline */
.mdp-app-timeline-header {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #6b7280 !important;
    margin-bottom: 20px !important;
}
.mdp-app-timeline {
    position: relative !important;
    padding-left: 0 !important;
}
.mdp-app-timeline-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    position: relative !important;
    padding-bottom: 24px !important;
    padding-left: 0 !important;
}
.mdp-app-timeline-item:last-child {
    padding-bottom: 0 !important;
}
.mdp-app-timeline-item:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    left: 15px !important;
    top: 32px !important;
    bottom: 0 !important;
    width: 2px !important;
    background: #e5e7eb !important;
}
.mdp-app-timeline-item--done:not(:last-child)::after {
    background: #16a34a !important;
}
.mdp-app-timeline-dot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    z-index: 1 !important;
}
.mdp-app-timeline-dot--done {
    background: #16a34a !important;
}
.mdp-app-timeline-dot--active {
    background: #f59e0b !important;
    animation: spin 2s linear infinite;
}
.mdp-app-timeline-num {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
}
.mdp-app-timeline-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}
.mdp-app-timeline-desc {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
}
/* Feedback */
.mdp-app-feedback-header {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #6b7280 !important;
    margin-bottom: 18px !important;
}
.mdp-app-feedback-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.mdp-app-feedback-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
.mdp-app-feedback-dot {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #dc2626 !important;
    flex-shrink: 0 !important;
    margin-top: 5px !important;
}
.mdp-app-feedback-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}
.mdp-app-feedback-desc {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
}
.mdp-app-help-text {
    text-align: center !important;
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-top: 12px !important;
}
.mdp-app-help-text a {
    color: #7c3aed !important;
    text-decoration: underline !important;
}
/* Cooldown */
.mdp-app-cooldown-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 12px !important;
}
.mdp-app-cooldown-bar-wrap {
    margin-bottom: 8px !important;
}
.mdp-app-cooldown-bar {
    height: 8px !important;
    background: #e5e7eb !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
.mdp-app-cooldown-bar-fill {
    height: 100% !important;
    background: #f59e0b !important;
    border-radius: 4px !important;
    transition: width .3s !important;
}
.mdp-app-cooldown-dates {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-bottom: 4px !important;
}
.mdp-app-cooldown-remaining {
    font-size: 13px !important;
    color: #6b7280 !important;
}
/* Active state */
.mdp-app-active-wrap {
    text-align: center !important;
    padding: 60px 20px !important;
}
.mdp-app-active-text {
    font-size: 16px !important;
    color: #374151 !important;
    margin-bottom: 20px !important;
}
.mdp-app-btn--dark {
    background: #111827 !important;
    color: #fff !important;
}
.mdp-app-btn--dark:hover {
    background: #1f2937 !important;
}

/* ============================================================
   A9 SECTION CARDS & HEADERS (shared across dashboard tabs)
   ============================================================ */
.mpjs-a9-card {
    background: #fff;
    border: 1px solid #e8e8f0;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
    overflow: visible;
}
.mpjs-a9-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px 10px 0 0;
    padding: 14px 20px;
}
.mpjs-a9-header.dark {
    background: #111;
    border-radius: 10px;
}
.mpjs-a9-header.purple {
    background: transparent;
    padding: 0;
}
.mpjs-a9-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    flex-shrink: 0;
}
.mpjs-a9-header.dark .mpjs-a9-header-icon {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.mpjs-a9-header-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.mpjs-a9-header.dark .mpjs-a9-header-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0;
}
.mpjs-a9-header-required {
    color: #e74c3c;
    margin-left: 2px;
    font-size: 18px;
}
.mpjs-section-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #9c9efe;
    color: #fff;
    font-size: 15px;
    font-weight: 700 !important;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: default;
    font-family: inherit;
}
.mpjs-section-header-btn svg { flex-shrink: 0; }
.mpjs-section-header-btn .mpjs-header-required { color: #e74c3c; margin-left: 2px; }
.mpjs-a9-subtitle {
    color: #555;
    font-size: 13px;
    margin: 10px 0 20px 0;
}

/* ============================================================
   FL PORTFOLIO BLOCK
   ============================================================ */
#mdp-fl-portfolio-block {
    background: #fff;
    border: 1px solid #e8e8f0;
    border-radius: 14px;
    padding: 24px;
    margin-top: 24px;
}

/* Header */
.mdp-flport-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 25px !important;
}
.mdp-flport-header-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mdp-flport-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mdp-flport-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    flex-shrink: 0;
    background: #9c9efe;
    color: #fff;
}
.mdp-flport-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
.mdp-flport-subtitle {
    font-size: 13px !important;
    color: #888 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.mdp-flport-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #9c9efe !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    outline: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}
.mdp-flport-add-btn:hover {
    background: #4a3fbf !important;
}

/* Empty state */
.mdp-flport-empty {
    text-align: center;
    padding: 40px 20px;
    color: #aaa;
    font-size: 14px;
}
.mdp-flport-empty p {
    margin: 12px 0 0 !important;
    color: #aaa !important;
}

/* Project card */
.mdp-flport-card {
    background: #fafafa;
    border: 1px solid #e4e4f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s;
    padding: 15px !important;
    margin-bottom: 30px !important;
}
.mdp-flport-card:last-child {
    margin-bottom: 0;
}
.mdp-flport-card:hover {
    box-shadow: 0 2px 12px rgba(90,79,207,0.08);
}

/* Card header */
.mdp-flport-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px !important;
    flex-wrap: wrap;
}
.mdp-flport-card-num {
    font-size: 12px;
    font-weight: 500;
    color: #5a4fcf;
    background: #f0eeff;
    padding: 2px 10px !important;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;

}
.mdp-flport-name-input {
    flex: 1;
    min-width: 160px;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid #9c9efe !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #222 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    font-weight: 500 !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}
.mdp-flport-name-input:focus {
    border-color: #9c9efe !important;
    box-shadow: 0 0 0 3px rgba(156,158,254,0.12) !important;
}
.mdp-flport-delete-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #fff !important;
    border: 1px solid #e0dff8 !important;
    border-radius: 7px !important;
    color: #aaa !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: border-color 0.2s, color 0.2s !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.mdp-flport-delete-btn:hover {
    border-color: #f87171 !important;
    color: #ef4444 !important;
}

/* Field */
.mdp-flport-field {
    margin-bottom: 25px !important;
}

#dashboard-tab-fl-profile .mdp-flport-duration-input{
    width: auto;
}
.mdp-flport-field:last-child {
    margin-bottom: 0;
}
.mdp-flport-cat-section-label,
.mdp-flport-field > label {
    display: block;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-bottom: 13px !important;
}
.mdp-flport-field-hint {
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
    margin-left: 6px;
}

/* 2-column row */
.mdp-flport-row-2col {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.mdp-flport-row-2col .mdp-flport-field {
    flex: 1;
    min-width: 180px;
    margin-bottom: 0;
}

/* Timeline row */
.mdp-flport-timeline-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Month/Year wrapper widths inside timeline row */
.mdp-flport-mon-wrap { width: 130px !important; flex: none !important; }
.mdp-flport-yr-wrap  { width: 90px !important;  flex: none !important; }

/* Selectize controls inside FL Portfolio inherit full width of wrapper */
#dashboard-tab-fl-profile .mdp-flport-field .selectize-control {
    width: 100%;
}
#dashboard-tab-fl-profile .mdp-flport-field .selectize-input {
    border: 1px solid #9c9efe !important;
    border-radius: 30px !important;
    height: 41px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 36px 0 14px !important;
    font-size: 15px !important;
    box-shadow: none !important;
    background: #fff !important;
}
#dashboard-tab-fl-profile .mdp-flport-field .selectize-input.focus {
    border-color: #9c9efe !important;
    box-shadow: 0 0 0 3px rgba(156,158,254,.12) !important;
}
#dashboard-tab-fl-profile .mdp-flport-field .selectize-dropdown {
    border: 1px solid #9c9efe !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
}

/* Description textarea */
.mdp-flport-desc-textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #9c9efe !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    color: #333 !important;
    background: #fff !important;
    resize: vertical !important;
    outline: none !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s !important;
    font-family: inherit !important;
}
.mdp-flport-desc-textarea:focus {
    border-color: #9c9efe !important;
    box-shadow: 0 0 0 3px rgba(156,158,254,0.1) !important;
}

.mdp-flport-selected-box.has-items { display: block; }
.mdp-flport-selected-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px !important;
}
.mdp-flport-selected-count {
    font-size: 14px;
    color: #555;
    font-weight: 500;
}
.mdp-flport-clear-all {
    background: none !important;
    border: none !important;
    font-size: 14px !important;
    color: #9c9efe !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    outline: none !important;
}
.mdp-flport-clear-all:hover { color: #e74c3c !important; }
.mdp-flport-skills-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px !important;
}
.mdp-flport-skills-chips:empty { 
    display: none; 
}
#mdp-fl-profile-form span.mdp-flport-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #9c9efe;
    color: #fff;
    font-size: 14px;
    padding: 5px 10px 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.mdp-flport-chip-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.mdp-flport-chip-remove:hover {
    background: rgba(255,255,255,0.4) !important;
}

/* Skills search */
.mdp-flport-skill-search-box {
    position: relative;
    width: 100%;
}
.mdp-flport-skill-search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
}

/* OR divider */
.mdp-flport-or-divider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px !important;
}
.mdp-flport-or-line {
    flex: 1;
    height: 1px;
    background: #e2e2f0;
}
.mdp-flport-or-text {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    letter-spacing: 0.04em;
}
.mdp-flport-cat-section-label {
    font-size: 12px;
    color: #888;
    margin: 6px 0 6px;
}
/* Inline search results (chips row below input) */
.mdp-flport-skill-inline-results {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px !important;
}
.mdp-flport-inline-result-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px !important;
    background: #fff;
    border: 1px solid #9c9efe;
    border-radius: 20px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.mdp-flport-inline-result-chip:hover {
    border-color: #9c9efe;
    background: #edeeff;
    color: #5052cc;
}
.mdp-flport-inline-result-chip.selected {
    background: #9c9efe;
    color: #fff;
    border-color: #9c9efe;
}
.mdp-flport-inline-result-plus {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
/* No-match + add custom skill */
.mdp-flport-no-match {
    padding: 6px 2px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mdp-flport-no-match-text {
    margin: 0 !important;
    font-size: 12px !important;
    color: #999 !important;
    line-height: 1.4 !important;
}
.mdp-flport-add-custom-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 15px !important;
    background: transparent !important;
    border: 1px solid #9c9efe !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    color: #333 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    outline: none !important;
    align-self: flex-start !important;
    transition: background 0.15s, color 0.15s !important;
}
.mdp-flport-add-custom-btn:hover {
    background: #edeeff !important;
    border-color: #7c7ccc !important;
    color: #4a3fbf !important;
}

/* Category trigger button */
.mdp-flport-cat-trigger-wrap {
    position: relative;
}
.mdp-flport-skills-wrap .mdp-flport-cat-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 12px !important;
    background: #fff !important;
    border: 1px solid #d8d8f0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #666 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: border-color 0.2s, color 0.2s !important;
    box-shadow: none !important;
    line-height: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    outline: none !important;
    height: 41px;
}
.mdp-flport-skills-wrap .mdp-flport-cat-trigger:hover {
    border-color: #9c9efe !important;
    color: #5a4fcf !important;
    background: #fff !important;
}
.mdp-flport-cat-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #d8d8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 200;
    overflow: hidden;
}
.mdp-flport-cat-dropdown-item {
    padding: 5px 10px !important;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}
.mdp-flport-cat-dropdown-item:hover {
    background: #f0f0ff;
    color: #5a4fcf;
}

/* Category panel */
.mdp-flport-cat-panel {
    margin-top: 10px !important;
    border: 1px solid #e0e0f8;
    border-radius: 8px;
    padding: 10px 12px !important;
}
.mdp-flport-cat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.mdp-flport-cat-panel-title {
    font-size: 12px;
    font-weight: 600;
    color: #5a4fcf;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mdp-flport-cat-panel-close {
    background: none !important;
    border: none !important;
    font-size: 16px !important;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 2px;
}
.mdp-flport-cat-panel-close:hover { color: #e74c3c; }
.mdp-flport-cat-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.mdp-flport-cat-skill-chip {
    display: inline-block;
    padding: 4px 10px !important;
    background: #fff;
    border: 1px solid #d8d8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.mdp-flport-cat-skill-chip:hover {
    border-color: #9c9efe;
    color: #5a4fcf;
}
.mdp-flport-cat-skill-chip.selected {
    background: #9c9efe;
    border-color: #9c9efe;
    color: #fff;
}

/* ---- Other Tools card ---- */
.mdp-flport-tools-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mdp-flport-tools-card-header { display: flex; flex-direction: column; gap: 3px; }
.mdp-flport-tools-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mdp-flport-tools-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2d2d3f !important;
    line-height: 1.4 !important;
    border: none !important;
    background: none !important;
}
.mdp-flport-info-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    color: #aaa !important;
    flex-shrink: 0 !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}
.mdp-flport-info-btn:hover { color: #7c7ccc !important; }
.mdp-flport-tools-subtitle {
    margin: 0 !important;
    font-size: 12px !important;
    color: #999 !important;
    line-height: 1.4 !important;
}

.mdp-flport-tools-added-box.has-items { border-color: #cdd0f3; }
.mdp-flport-tools-added-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.mdp-flport-tools-count {
    font-size: 14px;
    font-weight: 500;
    color: #555;
}
.mdp-flport-tools-clear {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: #9c9efe !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    outline: none !important;
}
.mdp-flport-tools-clear:hover { color: #f87171 !important; }

/* ---- Tagbox (Key Outcomes) ---- */
.mdp-flport-tagbox {
    border: 1px solid #9C9EFE;
    border-radius: 10px;
    padding: 12px 15px !important;
    margin-bottom: 10px !important;
    background: #fff;
    display: none;
}
.mdp-flport-tagbox.has-items { display: block; }
.mdp-flport-tagbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px !important;
}
.mdp-flport-tagbox-count {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}
.mdp-flport-tagbox-clear {
    font-size: 14px !important;
    color: #9c9efe !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    font-family: inherit;
    box-shadow: none !important;
}
.mdp-flport-tagbox-clear:hover { color: #e74c3c !important; }
.mdp-flport-tagbox-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Tagbox input (below the box) */

.mdp-flport-tagbox-input-wrap:focus-within {
    border-color: #9c9efe;
    box-shadow: 0 0 0 3px rgba(156, 158, 254, .12);
}
.mdp-flport-tagbox-input {
    border: none !important;
    outline: none !important;
    width: 100% !important;
    font-size: 13px !important;
    background: transparent !important;
    padding: 10px 15px !important;
    box-sizing: border-box;
    height: 41px !important;
    border: 1px solid #9C9EFE !important;
    border-radius: 30px !important;
}

/* ---- Shared tags ---- */
.mdp-flport-tags-display {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mdp-flport-tools-display:empty,
.mdp-flport-outcomes-display:empty { display: none; }
.mdp-flport-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #9c9efe;
    color: #fff;
    font-size: 14px;
    padding: 4px 10px 4px 12px !important;
    border-radius: 99px;
    margin: 0;
    flex-shrink: 0;
}
.mdp-flport-tag-chip button {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #fff !important;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: background .15s;
}
.mdp-flport-tag-chip button:hover {
    background: rgba(156, 158, 254, .2) !important;
}
.mdp-flport-tag-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    border-radius: 50% !important;
    color: #5052cc !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: background .15s;
}
.mdp-flport-tag-remove:hover { background: rgba(156, 158, 254, .2) !important; color: #5052cc !important; }
.mdp-flport-tag-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13px !important;
    color: #333 !important;
    padding: 2px 0 !important;
    flex: 1 !important;
    min-width: 120px !important;
    box-shadow: none !important;
    font-family: inherit !important;
}
/* tools input standalone below the card */
.mdp-flport-card .mdp-flport-skill-search,
.mdp-flport-card .mdp-flport-duration-input,
.mdp-flport-card .mdp-flport-industry-other-input input,
.mdp-flport-card .mdp-flport-client-input,
.mdp-flport-card .mdp-flport-name-input,
.mdp-flport-tools-card .mdp-flport-tag-input {
    height: 41px !important;
    border: 1px solid #9c9efe !important;
    border-radius: 30px !important;
    padding: 9px 12px !important;
    background: #fff !important;
    font-size: 16px !important;
    color: #333 !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
}
.mdp-flport-card .mdp-flport-skill-search{
    padding-left: 40px !important;
}
.mdp-flport-tools-card .mdp-flport-tag-input:focus {
    border-color: #9c9efe !important;
    outline: none !important;
    box-shadow: none !important;
}
.mdp-saved-fl__heading{
    color: #fff !important;
    font-weight: 400 !important;
    font-size: 26px !important;
}

/* ── Freelance Profile Preview (?tab=fl-profile) ── */
.mdp-fl-preview { max-width: 900px !important; }
.mdp-fl-preview-header { margin-bottom: 16px !important; }
.mdp-fl-preview-header h3 {
    font-size: 22px !important; font-weight: 700 !important;
    color: #111827 !important; margin: 0 0 4px !important;
}
.mdp-fl-preview-subtitle {
    font-size: 14px !important; color: #6b7280 !important; margin: 0 !important;
}
.mdp-fl-preview-info-banner {
    display: flex !important; align-items: flex-start !important; gap: 10px !important;
    background: #f0f4ff !important; border: 1px solid #dbeafe !important;
    border-radius: 8px !important; padding: 12px 16px !important; margin-bottom: 20px !important;
    font-size: 13px !important; color: #374151 !important; line-height: 1.5 !important;
}
.mdp-fl-preview-info-banner svg {
    flex-shrink: 0 !important; margin-top: 2px !important; stroke: #6366f1 !important;
}
.mdp-fl-preview-info-banner a { color: #6366f1 !important; text-decoration: underline !important; }

/* Hero Card */
.mdp-fl-preview-hero-card {
    border: 1px solid #e5e7eb !important; border-radius: 12px !important;
    overflow: hidden !important; margin-bottom: 20px !important; background: #fff !important;
}
.mdp-fl-preview-cover {
    height: 100px !important; background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    background-size: cover !important; background-position: center !important;
}
.mdp-fl-preview-hero-body {
    display: flex !important; align-items: flex-start !important; gap: 16px !important;
    padding: 0 24px 20px !important; margin-top: -36px !important;
}
.mdp-fl-preview-avatar {
    width: 72px !important; height: 72px !important; border-radius: 50% !important;
    border: 3px solid #fff !important; overflow: hidden !important; flex-shrink: 0 !important;
    background: #6366f1 !important; display: flex !important; align-items: center !important;
    justify-content: center !important;
}
.mdp-fl-preview-avatar img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.mdp-fl-preview-initials {
    font-size: 22px !important; font-weight: 700 !important; color: #fff !important;
}
.mdp-fl-preview-hero-info { padding-top: 42px !important; }
.mdp-fl-preview-name {
    font-size: 20px !important; font-weight: 700 !important; color: #111827 !important;
    margin: 0 0 2px !important;
}
.mdp-fl-preview-jobtitle {
    font-size: 14px !important; color: #6b7280 !important; margin: 0 0 4px !important;
}
.mdp-fl-preview-location {
    font-size: 13px !important; color: #6b7280 !important; margin: 0 0 8px !important;
    display: flex !important; align-items: center !important; gap: 4px !important;
}
.mdp-fl-preview-location svg { stroke: #9ca3af !important; }
.mdp-fl-preview-avail-badge {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    font-size: 12px !important; font-weight: 600 !important; color: #15803d !important;
    background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important;
    padding: 4px 10px !important; border-radius: 999px !important;
}
.mdp-fl-preview-avail-badge svg { stroke: #22c55e !important; }

/* Columns */
.mdp-fl-preview-columns {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 20px !important; align-items: start !important;
}
@media (max-width: 768px) {
    .mdp-fl-preview-columns { grid-template-columns: 1fr !important; }
}

/* Cards */
.mdp-fl-preview-card {
    border: 1px solid #e5e7eb !important; border-radius: 12px !important;
    padding: 20px !important; margin-bottom: 20px !important; background: #fff !important;
}
.mdp-fl-preview-card-title {
    font-size: 16px !important; font-weight: 700 !important; color: #111827 !important;
    margin: 0 0 14px !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
.mdp-fl-preview-card-header-row {
    display: flex !important; justify-content: space-between !important;
    align-items: center !important; margin-bottom: 14px !important;
}
.mdp-fl-preview-card-header-row .mdp-fl-preview-card-title { margin-bottom: 0 !important; }
.mdp-fl-preview-count-badge {
    font-size: 12px !important; font-weight: 500 !important; color: #6366f1 !important;
    background: #eef2ff !important; padding: 3px 10px !important; border-radius: 999px !important;
}
/* Years experience badge */
.mdp-fl-preview-years-badge {
    display: flex !important; align-items: center !important; gap: 6px !important;
    border: 2px solid #6366f1 !important; border-radius: 12px !important;
    padding: 8px 14px !important; font-size: 24px !important; font-weight: 700 !important;
    color: #6366f1 !important; line-height: 1 !important;
}
.mdp-fl-preview-years-badge small {
    font-size: 11px !important; font-weight: 500 !important; color: #6b7280 !important;
    line-height: 1.2 !important;
}
/* Responsibilities list */
.mdp-fl-preview-exp-responsibilities {
    list-style: none !important; padding: 0 !important; margin: 6px 0 0 !important;
}
.mdp-fl-preview-exp-responsibilities li {
    font-size: 13px !important; color: #4b5563 !important; margin-bottom: 4px !important;
    padding-left: 20px !important; position: relative !important; line-height: 1.5 !important;
}
.mdp-fl-preview-exp-responsibilities li::before {
    content: '' !important; position: absolute !important; left: 0 !important; top: 7px !important;
    width: 10px !important; height: 10px !important; border-radius: 50% !important;
    background: #d1fae5 !important; border: 2px solid #10b981 !important;
}
/* Card title with icon */
.mdp-fl-preview-card-title svg {
    vertical-align: -3px !important; margin-right: 6px !important; color: #7b68ee !important;
}

/* Tags */
.mdp-fl-preview-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.mdp-fl-preview-tag {
    display: inline-block !important; font-size: 13px !important; color: #374151 !important;
    background: #f3f4f6 !important; padding: 5px 12px !important; border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
}

/* About */
.mdp-fl-preview-about-text {
    font-size: 14px !important; line-height: 1.65 !important; color: #374151 !important;
}
.mdp-fl-preview-about-text p { margin: 0 0 10px !important; }

/* Experience */
.mdp-fl-preview-exp-list { display: flex !important; flex-direction: column !important; gap: 20px !important; }
.mdp-fl-preview-exp-item { display: flex !important; gap: 12px !important; }
.mdp-fl-preview-exp-icon {
    flex-shrink: 0 !important; width: 36px !important; height: 36px !important;
    background: #f3f4f6 !important; border-radius: 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.mdp-fl-preview-exp-icon svg { stroke: #6b7280 !important; }
.mdp-fl-preview-exp-content { flex: 1 !important; min-width: 0 !important; }
.mdp-fl-preview-exp-header {
    display: flex !important; justify-content: space-between !important;
    align-items: flex-start !important; gap: 8px !important;
}
.mdp-fl-preview-exp-header strong { font-size: 14px !important; color: #111827 !important; }
.mdp-fl-preview-exp-date {
    font-size: 12px !important; color: #6b7280 !important; white-space: nowrap !important;
    background: #f3f4f6 !important; padding: 2px 8px !important; border-radius: 4px !important;
}
.mdp-fl-preview-exp-company {
    font-size: 13px !important; color: #6b7280 !important; margin: 2px 0 6px !important;
}
.mdp-fl-preview-exp-desc {
    font-size: 13px !important; color: #4b5563 !important; line-height: 1.5 !important;
}
.mdp-fl-preview-exp-desc p { margin: 0 0 6px !important; }
.mdp-fl-preview-exp-desc ul { padding-left: 18px !important; margin: 4px 0 !important; }
.mdp-fl-preview-exp-desc li {
    font-size: 13px !important; color: #4b5563 !important; margin-bottom: 3px !important;
}

/* Portfolio */
.mdp-fl-preview-portfolio-list { display: flex !important; flex-direction: column !important; gap: 20px !important; }
.mdp-fl-preview-portfolio-item { display: flex !important; gap: 12px !important; }
.mdp-fl-preview-portfolio-icon {
    flex-shrink: 0 !important; width: 36px !important; height: 36px !important;
    background: #fffbeb !important; border-radius: 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.mdp-fl-preview-portfolio-content { flex: 1 !important; min-width: 0 !important; }
.mdp-fl-preview-portfolio-header {
    display: flex !important; justify-content: space-between !important;
    align-items: flex-start !important; gap: 8px !important;
}
.mdp-fl-preview-portfolio-header strong { font-size: 14px !important; color: #111827 !important; }
.mdp-fl-preview-portfolio-meta {
    display: flex !important; gap: 8px !important; align-items: center !important;
    font-size: 12px !important; color: #6b7280 !important; white-space: nowrap !important;
}
.mdp-fl-preview-portfolio-date { color: #9ca3af !important; }
.mdp-fl-preview-portfolio-client {
    font-size: 13px !important; color: #6b7280 !important; margin: 2px 0 6px !important;
    display: flex !important; align-items: center !important; gap: 4px !important;
}
.mdp-fl-preview-portfolio-desc {
    font-size: 13px !important; color: #4b5563 !important; line-height: 1.5 !important;
    margin: 0 !important;
}

/* Rates */
.mdp-fl-preview-rates { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.mdp-fl-preview-rate-row {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
}
.mdp-fl-preview-rate-row span { font-size: 13px !important; color: #6b7280 !important; }
.mdp-fl-preview-rate-row strong { font-size: 14px !important; color: #111827 !important; }

/* Contact */
.mdp-fl-preview-contact { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.mdp-fl-preview-contact-row {
    display: flex !important; align-items: center !important; gap: 10px !important;
    font-size: 13px !important; color: #374151 !important;
}
.mdp-fl-preview-contact-row svg { stroke: #6b7280 !important; flex-shrink: 0 !important; }

/* Work Preferences */
.mdp-fl-preview-prefs { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.mdp-fl-preview-pref-row {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    font-size: 13px !important;
}
.mdp-fl-preview-pref-row > span { color: #6b7280 !important; }
.mdp-fl-preview-pref-row > strong { color: #111827 !important; font-size: 14px !important; }
.mdp-fl-preview-pref-row > svg { flex-shrink: 0 !important; }
.mdp-fl-preview-pref-locations {
    flex-direction: column !important; align-items: flex-start !important; gap: 8px !important;
}
.mdp-fl-preview-loc-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.mdp-fl-preview-loc-tag {
    font-size: 12px !important; color: #374151 !important; background: #f3f4f6 !important;
    padding: 3px 10px !important; border-radius: 6px !important; border: 1px solid #e5e7eb !important;
}

/* Hide default dashboard title for this tab */
#dashboard-tab-fl-profile .jobsearch-employer-box-section > .jobsearch-profile-title { display: none !important; }
.jobsearch-userdash-menumain .elementor-nav-menu--dropdown a{
    border: none !important;
}

/* ── Dashboard Redesign ────────────────────────────────────────────── */

/* ── Job Alerts Section — match reference card layout ── */
#jobsearch-notification-section {
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
}
#jobsearch-notification-section > .jobsearch-profile-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
#jobsearch-notification-section > .jobsearch-profile-title h2 {
    width: 100% !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    background: #9c9efe !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}
/* Settings / Notifications List toggle — outline buttons below header */
#jobsearch-notification-section .dash-hdtabchng-btn {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    background: #fff !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-top: 16px !important;
}
#jobsearch-notification-section .dash-hdtabchng-btn:hover {
    background: #f9fafb !important;
}
/* Content padding */
#jobsearch-notification-section > .jobsearch-notifics-loistitms,
#jobsearch-notification-section > .jobsearch-notifics-setopts {
    padding: 12px 20px !important;
    text-align: center !important;
}
#jobsearch-notification-section > .jobsearch-notifics-loistitms {
    font-size: 14px !important;
    color: #64748b !important;
}
/* View Job Alerts Settings button — purple filled */
#jobsearch-notification-section > .text-align-center {
    padding: 0 20px 20px !important;
    text-align: center !important;
}
#jobsearch-notification-section > .text-align-center .dash-hdtabchng-btn,
#jobsearch-notification-section > .text-align-center a,
#jobsearch-notification-section > .text-align-center button {
    display: inline-block !important;
    background: #9c9efe !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    height: 32px !important;
    line-height: 20px !important;
    border: none !important;
    cursor: pointer !important;
}
#jobsearch-notification-section > .text-align-center .dash-hdtabchng-btn:hover,
#jobsearch-notification-section > .text-align-center a:hover,
#jobsearch-notification-section > .text-align-center button:hover {
    background: #6d28d9 !important;
}
/* Tab Switcher — segmented control */
.mdp-dash-tabs {
    display: inline-flex !important;
    gap: 0 !important;
    margin-bottom: 24px !important;
    border: none !important;
    border-radius: 10px !important;
    overflow: visible !important;
    background: #f1f0f5 !important;
    padding: 4px !important;
}
.mdp-dash-tab {
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
}
.mdp-dash-tab:hover {
    color: #111827 !important;
}
.mdp-dash-tab.active {
    color: #7c3aed !important;
    font-weight: 500 !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* Stat Cards — individual bordered cards */
.mdp-dash-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}
.mdp-dash-stat-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 20px !important;
    background: #fff !important;
}
.mdp-dash-stat-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    color: #64748b !important;
}
.mdp-dash-stat-header span {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}
.mdp-dash-stat-header svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}
.mdp-dash-stat-number {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 32px !important;
    margin-bottom: 0 !important;
}
.mdp-dash-stat-sub {
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 4px !important;
}

/* Green Approval Banner */
.mdp-dash-approval-banner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
}
.mdp-dash-approval-banner svg {
    flex-shrink: 0 !important;
}
.mdp-dash-approval-text {
    flex: 1 !important;
}
.mdp-dash-approval-text strong {
    display: block !important;
    color: #15803d !important;
    font-size: 14px !important;
    margin-bottom: 2px !important;
}
.mdp-dash-approval-text span {
    color: #16a34a !important;
    font-size: 13px !important;
}
.mdp-dash-approval-btn {
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: none !important;
}
.mdp-dash-approval-btn.mdp-btn-green {
    background: #16a34a !important;
    color: #fff !important;
}
.mdp-dash-approval-btn.mdp-btn-green:hover {
    background: #15803d !important;
    color: #fff !important;
}

/* Freelancer Status Banner */
.mdp-dash-fl-status-banner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
    color: #16a34a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.mdp-dash-fl-status-banner svg {
    flex-shrink: 0 !important;
}

/* Freelancer CTA Banner */
.mdp-dash-fl-cta-banner {
    text-align: center !important;
    padding: 48px 24px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
}
.mdp-dash-fl-cta-banner svg {
    margin-bottom: 16px !important;
}
.mdp-dash-fl-cta-banner h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 8px !important;
}
.mdp-dash-fl-cta-banner p {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin-bottom: 20px !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.mdp-dash-fl-cta-btn {
    display: inline-block !important;
    background: #7c3aed !important;
    color: #fff !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.mdp-dash-fl-cta-btn:hover {
    background: #6d28d9 !important;
    color: #fff !important;
}

/* Activity Card */
.mdp-dash-activity-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #fff !important;
    padding: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}
.mdp-dash-activity-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}
.mdp-dash-activity-header h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 !important;
}
.mdp-dash-activity-header a {
    font-size: 13px !important;
    color: #7c3aed !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.mdp-dash-activity-empty {
    text-align: center !important;
    padding: 40px 20px !important;
}
.mdp-dash-activity-empty p {
    color: #9ca3af !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}

/* Restyle "Jobs Applied Recently" → "Latest activity"
   CHANGE (MDP, client 08/08): :last-of-type used to also catch the recruiter
   landing page, whose last box section is now the Recent Applicants column of
   the two-column redesign — it arrived with a 20px padding and a 16px heading
   that belong to the job-seeker card. Exclude the two dashboard columns. */
#dashboard-tab-stats .jobsearch-employer-box-section:last-of-type:not(.mdp-dash-col-apps):not(.mdp-dash-col-jobs) {
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 20px !important;
    background: #fff !important;
    box-shadow: none !important;
}
#dashboard-tab-stats .jobsearch-employer-box-section:last-of-type:not(.mdp-dash-col-apps):not(.mdp-dash-col-jobs) > .jobsearch-profile-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    border-radius: 0 !important;
}
#dashboard-tab-stats .jobsearch-employer-box-section:last-of-type:not(.mdp-dash-col-apps):not(.mdp-dash-col-jobs) > .jobsearch-profile-title h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    background: none !important;
    padding: 0 !important;
}

/* Freelancer panel hides Job Seeker content */
#mdp-panel-freelancer ~ .jobsearch-employer-box-section { display: none !important; }

/* Contact Request List */
.mdp-dash-contact-list {
    display: flex !important;
    flex-direction: column !important;
}
.mdp-dash-contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
}
.mdp-dash-contact-item:last-child {
    margin-bottom: 0 !important;
}
.mdp-dash-contact-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(124, 58, 237, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.mdp-dash-contact-info {
    flex: 1 !important;
    min-width: 0 !important;
}
.mdp-dash-contact-info strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.3 !important;
}
.mdp-dash-contact-info span {
    font-size: 13px !important;
    color: #6b7280 !important;
}
.mdp-dash-contact-time {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.mdp-dash-contact-time span {
    font-size: 13px !important;
    color: #9ca3af !important;
}
.mdp-dash-new-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    display: inline-block !important;
}

/* Freelancer tab stats */
#mdp-panel-freelancer .mdp-dash-stats-grid {
    grid-template-columns: 1fr 1fr !important;
}

/* Responsive */
@media (max-width: 768px) {
    .mdp-dash-stats-grid { grid-template-columns: 1fr !important; }
    .mdp-dash-approval-banner { flex-direction: column !important; text-align: center !important; }
    .mdp-dash-tabs { overflow-x: auto !important; }
}
.jobsearch-employer-box-section.mdp-stats-list{
    padding: 0;
    margin: 0;
}
.jobsearch-employer-box-section.mdp-stats-list .jobsearch-stats-list{
    display: block;
}
@media (min-width: 1025px) {
    #JobSearchModalLogin .jobsearch-user-form ul li:last-child{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #JobSearchModalLogin .jobsearch-user-form ul li:last-child .terms-priv-chek-con{
        width: 100%;
    }
}

/* === Job-card listing-source badge (External listing / Employer-posted) + info tooltip === */
.mdp-listing-badge-wrap { margin: 0 0 12px; }
/* z-index lifts the badge above the card-wide .action-link overlay (z-index:1) so the badge can receive hover for the tooltip. */
.mdp-listing-badge { position: relative; z-index: 9; display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.mdp-listing-badge--employer { background: #816feb; color: #fcfcfc; }
.mdp-listing-badge--external { background: #ebebff; color: #2b2b5f; border: 1px solid #dddde8; cursor: help; }
.mdp-listing-info { display: inline-flex; align-items: center; cursor: help; color: inherit; }
.mdp-listing-info > svg { display: block; }
/* Tooltip opens BELOW the badge (.jobsearch-joblisting-classic-wrap has overflow:hidden, which clips an upward tooltip). Anchored to .mdp-listing-badge so it stays inside the card. */
.mdp-listing-info::after { content: attr(data-tooltip); position: absolute; left: 0; top: calc(100% + 8px); width: 240px; max-width: 70vw; background: #2b2f3a; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; padding: 8px 10px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.22); white-space: normal; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; z-index: 60; pointer-events: none; }
.mdp-listing-badge--external:hover .mdp-listing-info::after,
.mdp-listing-badge--external:focus-within .mdp-listing-info::after,
.mdp-listing-info:hover::after,
.mdp-listing-info:focus::after { opacity: 1; visibility: visible; transform: translateY(0); }
#dashboard-tab-user-job select[name="jobsearch_field_office_location"]{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 22px;
}
.pkg-loding-msg{
    color: #fff !important;
    height: 45px !important;
    border-radius: 30px !important;
    
}
/* CHANGE: even 2-column grid for the job-detail overview blocks (Job ID, Experience Level,
   Industry, Minimum Education, Workplace Type, Company Type) */
.jobsearch-jobdetail-services > .jobsearch-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 22px;
    align-items: start;
}
.jobsearch-jobdetail-services > .jobsearch-row > li{
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
}
@media (max-width: 480px){
    .jobsearch-jobdetail-services > .jobsearch-row{
        grid-template-columns: 1fr;
    }
}

/* CHANGE: sign-up modal subtext under the "Create your account" heading */
.jobsearch-modal-title-box .jobsearch-signup-subtext{
    clear: both;
    display: block;
    width: 100%;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    color: #666;
}

/* =========================================================================
   CHANGE: Registration popup restyled to match the reference design
   (springcube-market-focus.vercel.app/register): clean labelled fields,
   no in-field icons, rounded 10px inputs, full-width indigo submit button.
   Scoped to the register form so the login form is untouched.
   ========================================================================= */
/* Field label above the input */
form[id^="registration-form-"] .jobsearch-user-form ul li > label{
    display: block;
    float: none;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #111633;
    text-transform: none;
    letter-spacing: 0;
}
/* Clean inputs — reference: 44px tall, 1px light-grey border, 10px radius */
form[id^="registration-form-"] .jobsearch-user-form ul li input[type="text"],
form[id^="registration-form-"] .jobsearch-user-form ul li input[type="email"],
form[id^="registration-form-"] .jobsearch-user-form ul li input[type="password"],
form[id^="registration-form-"] .jobsearch-user-form ul li input[type="tel"],
form[id^="registration-form-"] .jobsearch-user-form ul li input[type="number"]{
    height: 46px;
    width: 100%;
    padding: 0 16px;
    border: 1px solid #9C9EFE;
    border-radius: 30px;
    background: #fff;
    box-shadow: none;
    line-height: 46px;
}
/* NOTE (MDP): register input colour + placeholder colour moved to the "MDP FORM STYLE" block below. */

/* Reference has no icons inside the fields — hide them and reclaim the space */
form[id^="registration-form-"] .jobsearch-user-form ul li > i.jobsearch-icon{
    display: none !important;
}
/* Even vertical rhythm between rows */
form[id^="registration-form-"] .jobsearch-user-form ul li{
    margin-bottom: 18px;
}
/* Full-width indigo submit button, matching the reference "Create account" CTA */
form[id^="registration-form-"] .custom-sign-up-button-lightbox{
    width: 100%;
}
form[id^="registration-form-"] .jobsearch-register-submit-btn{
    display: block;
    width: 100%;
    height: 48px;
    margin: 4px 0 0;
    padding: 0 16px !important;
    border: none;
    border-radius: 10px !important;
    background: #6366f1 !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 48px;
    text-transform: none !important;
    letter-spacing: 0;
    cursor: pointer;
    transition: background .15s ease;
}
/* CHANGE (MDP, PM 2026-07): plugin.css loads AFTER this file and carries
   `.jobsearch-user-form input[type="submit"]:hover { background:#fff !important }`
   — same specificity, same !important, later order → it won, giving a white
   button with the base rule's white text (invisible label on hover).
   The first selector out-specifies it so hover stays dark indigo regardless of
   stylesheet order; the :not() guards keep the white disabled/submitting style
   from being overridden when hovering a disabled button. */
form[id^="registration-form-"] .jobsearch-user-form input[type="submit"].jobsearch-register-submit-btn:hover:not(:disabled):not(.disabled-btn):not(.jobsearch-disable-btn),
form[id^="registration-form-"] .jobsearch-register-submit-btn:hover{
    background: #5457e0 !important;
    color: #fff;
}
/* CHANGE (MDP, PM 2026-07): disabled/submitting state used to be pale lavender
   (#c3c4f2) with the plugin's .disabled-btn opacity on top — on click the button
   read as ALL WHITE with invisible white text (client video). Per client: white
   background, blue border, blue font. Covers all three disabled variants:
   .jobsearch-disable-btn (password gate), .disabled-btn (added while the submit
   AJAX runs) and the disabled attribute itself. opacity:1 defeats the plugin's
   .disabled-btn{opacity:.7} / .jobsearch-disable-btn{opacity:.3}. */
form[id^="registration-form-"] .jobsearch-register-submit-btn.jobsearch-disable-btn,
form[id^="registration-form-"] .jobsearch-register-submit-btn.disabled-btn,
form[id^="registration-form-"] .jobsearch-register-submit-btn:disabled{
    background: #fff !important;
    border: 1px solid #6366f1 !important;
    color: #6366f1 !important;
    opacity: 1 !important;
    line-height: 46px; /* 48px height minus the 1px border top/bottom */
    cursor: not-allowed;
}
/* CHANGE (MDP, PM 2026-07): nicer loading state while the signup AJAX runs.
   The plugin dumps an old FontAwesome `fa fa-refresh fa-spin` icon into
   .form-loader next to the button — hide that and instead draw a blue CSS
   spinner INSIDE the button (right edge), same pattern as the job-alerts Save
   button. The button is an <input> (no ::after allowed on replaced elements),
   so the spinner hangs off the wrapper via :has(). mdp-scripts.js swaps the
   label to "Creating account…" for the same window (.disabled-btn = AJAX in
   flight; the password-gate .jobsearch-disable-btn state gets NO spinner). */
form[id^="registration-form-"] .custom-sign-up-button-lightbox{
    position: relative;
}
form[id^="registration-form-"] .custom-sign-up-button-lightbox .form-loader{
    display: none !important;
}
form[id^="registration-form-"] .jobsearch-register-submit-btn.disabled-btn{
    cursor: progress;
}
form[id^="registration-form-"] .custom-sign-up-button-lightbox:has(.jobsearch-register-submit-btn.disabled-btn)::after{
    content: '';
    position: absolute;
    top: calc(50% + 2px); /* wrapper = 4px button top-margin + 48px button */
    right: 18px;
    width: 16px;
    height: 16px;
    margin-top: -10px; /* half of 16px + 2x2px border */
    border: 2px solid rgba(99, 102, 241, .25);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: mdp-reg-spin .6s linear infinite;
    pointer-events: none;
}
@keyframes mdp-reg-spin{
    to { transform: rotate(360deg); }
}
/* NOTE: deliberately no prefers-reduced-motion override here — Windows'
   "Show animations" toggle is off on enough machines (incl. the client's) that
   the ring showed up frozen and read as broken. The spin always runs. */

/* ---------------------------------------------------------------------------
   Post a Job — helper line under "Salary Display"         (MDP, client 28/07)
   --------------------------------------------------------------------------- */
.mdp-salary-note{
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}

/* ---------------------------------------------------------------------------
   Manage Jobs — real "Remove Job" control + confirm       (MDP, client 28/07)
   ---------------------------------------------------------------------------
   Replaces the relabelled Filled toggle. Button = small checkbox-style box;
   the confirm overlay reuses the register-discard visual language. */
/* NOTE: an inline style uses `#dashboard-tab-manage-jobs .jobsearch-filledjobs-links a`
   (ID selector) with !important — it painted a grey 1px border that peeked out
   below the checkbox. Match its specificity with the same ID prefix. */
.mdp-removejob-links .mdp-remove-job-btn,
#dashboard-tab-manage-jobs .mdp-removejob-links .mdp-remove-job-btn{
    display: inline-flex;           /* shrink-wraps the box exactly */
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
    cursor: pointer;
    border: none !important;
    padding: 0 !important;
    line-height: 1;
    background: transparent !important;
    box-shadow: none !important;
}
.mdp-removejob-links .mdp-rj-box{
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #333;
    border-radius: 3px;
    background: #fff;
    transition: background .15s, border-color .15s;
}
.mdp-removejob-links .mdp-remove-job-btn:hover .mdp-rj-box{
    border-color: #d63638;
    background: #fdf2f2;
}
.mdp-removejob-links .mdp-remove-job-btn.is-busy .mdp-rj-box{
    border-color: #9C9EFE;
    background: #E7E7FD;
    animation: mdp-ja-spin 0s; /* no spin needed; busy tint only */
}
.mdp-rj-confirm{
    position: fixed; inset: 0; z-index: 100070; display: none;
    align-items: start; justify-items: center; padding: 12vh 20px 20px;
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mdp-rj-confirm.show{ display: grid; }
.mdp-rj-confirm .rj-card{
    background: #fff; border: 1px solid #E6E6F5; border-radius: 14px;
    padding: 22px 22px 18px; max-width: 400px;
    box-shadow: 0 20px 50px -18px rgba(3,4,81,.4);
}
.mdp-rj-confirm h2{ font-size: 17px; font-weight: 700; margin: 0 0 7px; color: #030451; }
.mdp-rj-confirm .rj-job{ margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: #3B4079; }
.mdp-rj-confirm p{ margin: 0 0 16px; font-size: 13.5px; color: #6E749B; line-height: 1.5; }
.mdp-rj-confirm .rj-row{ display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
.mdp-rj-confirm .rj-cancel{
    height: 40px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer;
    background: #6265E4; color: #fff; font-size: 14px; font-weight: 600;
}
.mdp-rj-confirm .rj-cancel:hover{ background: #4F52CE; }
.mdp-rj-confirm .rj-remove{
    height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer;
    border: 1px solid #D6D7EA; background: #fff; color: #D0342C; font-size: 14px; font-weight: 500;
}
.mdp-rj-confirm .rj-remove:hover{ border-color: #D0342C; background: #FEF3F2; }

/* ---------------------------------------------------------------------------
   Applicants Dashboard — empty state                       (MDP, PM 2026-07)
   ---------------------------------------------------------------------------
   Message printed by class-employer-all-applicants.php (plugin core, CHANGE(MDP))
   when the recruiter has no jobs with applicants — page used to be blank. */
.jobsearch-allaplicants-holder .mdp-no-applicants-msg{
    margin: 8px 0 0;
    font-size: 16px;
    color: #444;
    text-align: center;
}
/* Center the "Already have an account? Login" link below the form */
form[id^="registration-form-"] .jobsearch-user-form-info{
    text-align: center;
}
form[id^="registration-form-"] .jobsearch-user-form-info p{
    width: 100%;
    margin: 0;
    text-align: center;
}
form[id^="registration-form-"] .reg-tologin-btn{
    display: inline-block;
    float: none;
}
/* Job Function selectize box — vertically centered content, consistent with inputs */
form[id^="registration-form-"] .jobsearch-user-form ul li .selectize-input{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.4;
    height: 46px !important;
    border-radius: 30px !important;
    border-color: #9c9efe;
}
form[id^="registration-form-"] .jobsearch-user-form ul li .selectize-input > input{
    line-height: normal;
    margin: 0 !important;
}
form[id^="registration-form-"] .jobsearch-user-form .jobsearch-user-form-info{
    margin: 0 auto;
}
form[id^="registration-form-"] .jobsearch-user-form .jobsearch-regfield-sector .selectize-dropdown-content{
    max-height: unset;
}
.selectize-input.items.has-options.has-items{
    padding-left: 16px !important;
}

/* =============================================================================
   MDP FORM STYLE — single source of truth for form-field typography
   -----------------------------------------------------------------------------
   Unifies the Register popup + the Recruiter and Job-Seeker dashboard forms:
   text inputs, textareas, native <select>, and Selectize ("select 2") controls.

   Spec (PM, 2026-07):
     font-family : "Open Sans", sans-serif
     font-size   : 16px
     color       : #000
     font-weight : 400
     placeholder : #999

   Scopes:
     .main-tab-section            -> every dashboard tab panel (candidate + employer)
     .jobsearch-employer-dasboard -> the profile-settings forms (candidate/employer/recruiter)
     .jobsearch-modal             -> Sign In popup
     form[id^="registration-form-"] -> "Create your account" popup
   Selectize is styled globally (it is only used inside these forms + the search bar).

   All previously-scattered font/colour rules for these fields were removed from
   here and from the child theme's style.css and consolidated into this block.
   Layout rules (height, border, radius, padding) intentionally stay where they were.
   Buttons, checkboxes and radios are excluded so their styling is untouched.
   ============================================================================= */

/* --- Native fields: text inputs, textareas, native selects --- */
.main-tab-section input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.main-tab-section textarea,
.main-tab-section select,
.jobsearch-employer-dasboard input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.jobsearch-employer-dasboard textarea,
.jobsearch-employer-dasboard select,
.jobsearch-modal input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.jobsearch-modal textarea,
.jobsearch-modal select,
form[id^="registration-form-"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
form[id^="registration-form-"] textarea,
form[id^="registration-form-"] select {
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* --- Selectize ("select 2"): value box, typed text, chosen items, options list --- */
.selectize-input,
.selectize-input input,
.selectize-input .item,
.selectize-dropdown,
.selectize-dropdown .option,
.selectize-dropdown .optgroup-header {
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* --- Placeholder colour #999 for all of the above fields --- */
.main-tab-section input::placeholder,
.main-tab-section textarea::placeholder,
.jobsearch-employer-dasboard input::placeholder,
.jobsearch-employer-dasboard textarea::placeholder,
.jobsearch-modal input::placeholder,
.jobsearch-modal textarea::placeholder,
form[id^="registration-form-"] input::placeholder,
form[id^="registration-form-"] textarea::placeholder,
.selectize-input > input::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* CHANGE (MDP, client 12/08 doc, screenshot 2): the candidate Contact email is
   now a mailto link (it used to be plain text, and usually empty). Elementor's
   global link colour is too pale against the card, so match the other contact
   values and only colour it on hover. */
.jobsearch-candidate-detail .contact .wrap.email .title p a,
.contact .wrap.email .title p a {
    color: #444 !important;
    text-decoration: none;
    word-break: break-word;
}
.contact .wrap.email .title p a:hover {
    color: #6b6ef0 !important;
    text-decoration: underline;
}

/* =============================================================================
   MDP: Manage Jobs redesign (client 12/08).
   Follows the approved prototype melodious-cocada-43109e.netlify.app: a four
   column label strip over one card per job — title + meta | applicants | status
   | actions — with a three-cell stats footer, plus the confirmation dialogs for
   Pause / Make live / Delete.
   Markup: hello-elementor-child/wp-jobsearch/user-dashboard/employer/user-manage-jobs.php
   Behaviour: mediaplus-addons/assets/js/mdp-manage-jobs.js + includes/job-pause.php

   Same specificity trap as the dashboard block below: plugin.css loads after
   this file and carries .jobsearch-typo-wrap * { margin:0; padding:0 } at
   specificity (0,1,0), which ties with a bare class and therefore wins. Every
   rule here that sets margin or padding is prefixed with .mdp-mj-holder,
   .mdp-mj-list or .mdp-mj-card to clear that.
   ============================================================================= */

/* Section heading: "Active posts (6)" */
.jobsearch-employer-dasboard .mdp-mj-heading {
    clear: both;
    margin: 8px 0 18px !important;
}
.jobsearch-employer-dasboard .mdp-mj-heading p {
    margin: 0 !important;
    color: #333;
    font-size: 18px;
    font-weight: 400;
}
.jobsearch-employer-dasboard .mdp-mj-heading strong { font-weight: 700; }

/* Column label strip */
.mdp-mj-holder .mdp-mj-thead {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) 0.8fr 0.6fr 108px;
    gap: 16px;
    padding: 16px 20px !important;
    border-radius: 6px;
    background: #f0f0f4;
    color: #333;
    font-size: 15px;
    font-weight: 700;
}

.mdp-mj-holder .mdp-mj-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px !important;
}

/* ---------- Card ---------- */
.mdp-mj-list .mdp-mj-card {
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid #c6c7f2;
    border-radius: 12px;
    background: #fff;
}
.mdp-mj-card .mdp-mj-main {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) 0.8fr 0.6fr 108px;
    gap: 16px;
    align-items: center;
    padding: 18px 20px !important;
}
.mdp-mj-info { min-width: 0; }

.mdp-mj-card h2.mdp-mj-title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    background: none !important;
}
/* Elementor sets a global link colour inline and wins on load order. */
.mdp-mj-title a {
    color: #8e8ff5 !important;
    text-decoration: none;
}
.mdp-mj-title a:hover { text-decoration: underline; }

/* One-line explanation of a non-obvious state, under the title */
.mdp-mj-card .mdp-mj-state {
    display: block;
    margin: 0 0 9px !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.mdp-mj-state.paused { color: #e8890c; }
.mdp-mj-state.expired { color: #ff4d63; }

.mdp-mj-card .mdp-mj-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    color: #444;
    font-size: 13px;
    line-height: 1.5;
}
.mdp-mj-metarow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.mdp-mj-metarow i { color: #9a9a9a; font-size: 13px; }

.mdp-mj-apps a {
    color: #555 !important;
    font-size: 14px;
    text-decoration: none;
}
.mdp-mj-apps a:hover { text-decoration: underline; }
.mdp-mj-apps a.is-disabled {
    pointer-events: none;
    text-decoration: none;
}

.mdp-mj-status { font-size: 14px; font-weight: 700; }
.mdp-mj-status.approved { color: #4bbf7a; }
.mdp-mj-status.paused   { color: #e8890c; }
.mdp-mj-status.expired  { color: #ff4d63; }
.mdp-mj-status.draft    { color: #8a8a95; }
.mdp-mj-card .mdp-mj-status-sub {
    display: block;
    margin-top: 4px !important;
    color: #888;
    font-size: 11.5px;
    font-weight: 400;
}

/* ---------- Action buttons ---------- */
.mdp-mj-card .mdp-mj-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mdp-mj-card .mdp-mj-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 40px;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.mdp-mj-card .mdp-mj-btn:hover {
    background: #fafafa !important;
    border-color: #b9b9e6 !important;
}
.mdp-mj-btn svg { width: 20px; height: 20px; }

/* Tooltip to the left of the button (the actions column is flush right) */
.mdp-mj-tip { position: relative; }
.mdp-mj-tip::after {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: calc(100% + 10px);
    padding: 6px 9px;
    border-radius: 5px;
    background: #222;
    color: #fff;
    content: attr(data-tip);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity .15s ease;
    white-space: nowrap;
}
.mdp-mj-tip:hover::after,
.mdp-mj-tip:focus-visible::after { opacity: 1; }

/* ---------- Stats footer ---------- */
.mdp-mj-card .mdp-mj-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #e9e9ef;
    background: #f8f8fb;
}
.mdp-mj-card .mdp-mj-stat {
    padding: 12px !important;
    text-align: center;
}
.mdp-mj-stat + .mdp-mj-stat { border-left: 1px solid #e9e9ef; }
.mdp-mj-card .mdp-mj-stat-value {
    margin-bottom: 4px !important;
    color: #555;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.mdp-mj-stat-label { color: #333; font-size: 13px; line-height: 1.3; }

.mdp-mj-exp-label { color: #555; font-size: 15px; font-weight: 700; }
.mdp-mj-card .mdp-mj-exp-date { margin-top: 3px !important; color: #444; font-size: 13px; }
.mdp-mj-card .mdp-mj-exp-note {
    margin-top: 4px !important;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
}
.mdp-mj-exp-note.remaining { color: #6b6ef0; }
.mdp-mj-exp-note.gone { color: #ff4d63; }

/* ---------- Empty folder ---------- */
.jobsearch-employer-dasboard .mdp-mj-empty {
    margin-top: 20px !important;
    padding: 48px 20px !important;
    border: 1px dashed #cdcdea;
    border-radius: 12px;
    color: #777;
    text-align: center;
}
.jobsearch-employer-dasboard .mdp-mj-empty p {
    max-width: 460px;
    margin: 0 auto !important;
    font-size: 15px;
    line-height: 1.55;
}
.jobsearch-employer-dasboard a.mdp-mj-empty-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 18px !important;
    padding: 9px 20px !important;
    border-radius: 22px;
    background: #8588ec;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.jobsearch-employer-dasboard a.mdp-mj-empty-btn:hover { background: #7679e6; }

/* ---------- Confirmation dialog ---------- */
.mdp-mj-modal {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 20px 20px;
    background: rgba(0, 0, 0, .42);
}
.mdp-mj-modal.is-open { display: flex; }
.mdp-mj-modal .mdp-mj-modal-card {
    width: min(470px, 100%);
    padding: 28px !important;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .2);
}
.mdp-mj-modal h2 {
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: none !important;
    color: #272727 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
.mdp-mj-modal .mdp-mj-modal-body p {
    margin: 0 0 12px !important;
    color: #555;
    font-size: 15px;
    line-height: 1.55;
}
.mdp-mj-modal .mdp-mj-modal-error {
    margin-top: 4px !important;
    color: #d0342c !important;
    font-weight: 700;
}
.mdp-mj-modal .mdp-mj-modal-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 12px;
    margin: 20px 0 !important;
    padding: 15px !important;
    border-radius: 8px;
    background: #f5f5ff;
    font-size: 14px;
}
.mdp-mj-modal .mdp-mj-modal-details dt {
    margin: 0 !important;
    color: #333;
    font-weight: 700;
}
.mdp-mj-modal .mdp-mj-modal-details dd {
    margin: 0 !important;
    color: #333;
    word-break: break-word;
}
.mdp-mj-modal .mdp-mj-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px !important;
}
.mdp-mj-modal .mdp-mj-modal-btn {
    min-width: 120px;
    padding: 11px 18px !important;
    border-radius: 22px !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.mdp-mj-modal .mdp-mj-cancel {
    border: 1px solid #c9c9c9 !important;
    background: #fff !important;
    color: #444 !important;
}
.mdp-mj-modal .mdp-mj-confirm {
    border: 1px solid #8588ec !important;
    background: #8588ec !important;
    color: #fff !important;
}
.mdp-mj-modal .mdp-mj-confirm:hover { background: #7679e6 !important; border-color: #7679e6 !important; }
.mdp-mj-modal .mdp-mj-confirm.is-danger {
    border-color: #ff4d63 !important;
    background: #ff4d63 !important;
}
.mdp-mj-modal .mdp-mj-confirm.is-danger:hover { background: #f0374f !important; border-color: #f0374f !important; }
.mdp-mj-modal .mdp-mj-modal-btn[disabled] { opacity: .7; cursor: default; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .mdp-mj-holder .mdp-mj-thead,
    .mdp-mj-card .mdp-mj-main {
        grid-template-columns: minmax(0, 1.4fr) 0.8fr 0.7fr 96px;
        gap: 12px;
    }
    .mdp-mj-card .mdp-mj-btn { width: 96px; }
}
@media (max-width: 680px) {
    /* Stack: the label strip has nothing to label once the grid collapses, and
       the action buttons read better as a row under the card content. */
    .mdp-mj-holder .mdp-mj-thead { display: none; }
    .mdp-mj-card .mdp-mj-main {
        grid-template-columns: 1fr;
        row-gap: 12px;
        padding: 16px !important;
    }
    .mdp-mj-card .mdp-mj-actions { flex-direction: row; }
    .mdp-mj-card .mdp-mj-btn { flex: 1 1 0; width: auto; }
    /* Tooltips would sit off-screen beside a full-width button. */
    .mdp-mj-tip::after { display: none; }
    .mdp-mj-card .mdp-mj-stats { grid-template-columns: 1fr; }
    .mdp-mj-stat + .mdp-mj-stat { border-left: 0; border-top: 1px solid #e9e9ef; }
}

/* =============================================================================
   MDP: recruiter dashboard landing — TWO-COLUMN layout (client 08/08).
   Follows the approved prototype glittery-macaron-32f9aa.netlify.app:
     left  = "Job Post Activity", a height-capped panel that scrolls internally
     right = "Recent Applicants", a sticky by-role panel + designed empty state
   Markup: hello-elementor-child/wp-jobsearch/user-dashboard/employer/user-stats.php

   Everything below is scoped under .mdp-dash-grid (or the two column classes) so
   it cannot leak into the other dashboard tabs, which reuse the same plugin
   classes (.jobsearch-employer-box-section, .jobsearch-profile-title, ...).

   IMPORTANT — why nearly every rule carries the .mdp-dash-grid prefix even when
   the class alone would be unique: plugin.css loads after this file and contains
   .jobsearch-typo-wrap * { margin: 0; padding: 0 }. That is specificity (0,1,0),
   the same as a bare class, so on a tie it wins and every padding/margin below
   silently collapses to zero. The prefix lifts these rules to (0,2,0) and they
   hold. Rules that set no spacing do not need it.
   The remaining !important flags are for properties the theme sets with
   equal-or-higher specificity: the purple pill heading, Elementor's global link
   colour, and a small-screen rule that turns box sections into flex rows.
   ============================================================================= */
/* CHANGE (MDP, client 18/08 thu muc 3, muc 3): hai hop "Job Post Activity" va
   "Recent Applicants" dinh sat mep tren cua vung noi dung, nhin rat chat.
   Them khoang tho o tren, 22px cho khop voi gap giua hai cot.
   PHAI viet la ".jobsearch-typo-wrap .mdp-dash-grid" chu khong phai ".mdp-dash-grid" khong:
   plugin.css co ".jobsearch-typo-wrap * { margin:0 }" cung do uu tien (0,1,0), ma no
   nap SAU mdp-style.css nen no thang — margin-top bi nuot mat. Them mot lop cha la
   (0,2,0), an chac. Day dung la cai bay da ghi trong ghi chu du an. */
.jobsearch-typo-wrap .mdp-dash-grid,
.mdp-dash-grid {
    margin-top: 22px;
    display: grid;
    /* CHANGE (MDP, client 18/08): khach yeu cau bo bo cuc 2 cot. Job Post Activity
       full width o tren, Recent Applicants full width o duoi. Thu tu trong markup
       da dung san (jobs truoc, apps sau) nen chi can ep ve mot cot. */
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
}
/* Both columns are plugin "box sections"; re-style them as prototype panels.
   display:block is forced because a small-screen rule elsewhere turns box
   sections into centred flex rows, which would centre the panel head and lay
   the head and the job list side by side. */
.mdp-dash-grid > .jobsearch-employer-box-section {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #e7e7f3;
    border-radius: 16px;
    background: #fff;
}
/* Right panel stays in view however long the job feed gets. 100px clears the
   sticky site header; the dashboard has no other fixed chrome. */
.mdp-dash-col-apps {
    /* CHANGE (MDP, client 18/08): het 2 cot thi khong con gi de dinh ben canh. */
    position: static;
}

/* ---------- Panel head (title + count on one row) ---------- */
.mdp-dash-grid .mdp-dash-panel-head {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    float: none !important;       /* plugin floats .jobsearch-profile-title left */
    width: auto !important;
    margin: 0 !important;
    padding: 18px 20px 6px !important;
    border: 0 !important;
}
/* Dashboard section headings are normally a full-width purple pill
   (.jobsearch-employer-box-section > .jobsearch-profile-title h2, line ~1043).
   Inside these panels the heading is plain text with the count beside it. */
.mdp-dash-grid .mdp-dash-panel-head h2 {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    color: #222 !important;
}
.mdp-dash-grid .mdp-dash-panel-head h2:after {
    display: none;                /* theme underlines dashboard headings */
}
.mdp-dash-grid .mdp-dash-panel-count {
    flex: 0 0 auto;
    color: #8a8a95;
    font-size: 13px;
}

/* ---------- Left column: Job Post Activity ---------- */
.mdp-dash-grid .mdp-active-jobs {
    clear: both;
    padding: 0;
}
.mdp-dash-grid .mdp-job-scroll {
    max-height: 620px;
    overflow-y: auto;
    padding: 8px 20px 14px;
}
.mdp-job-scroll::-webkit-scrollbar { width: 8px; }
.mdp-job-scroll::-webkit-scrollbar-thumb { background: #dedef2; border-radius: 8px; }

.mdp-dash-grid .mdp-dash-job {
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid #e7e7f3;
    border-radius: 12px;
    background: #fff;
}
.mdp-dash-grid .mdp-dash-job:last-child { margin-bottom: 0; }

.mdp-dash-grid .mdp-dash-job-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: start;
    padding: 14px 16px;
}
.mdp-dash-job-main { min-width: 0; }
.mdp-dash-grid h3.mdp-dash-job-title {
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
/* Elementor's global link colour (#58595b) is injected inline and wins on load
   order, so both link colours in these panels have to be forced. */
.mdp-dash-job-title a {
    color: #8e8ff5 !important;
    text-decoration: none;
}
.mdp-dash-job-title a:hover { text-decoration: underline; }
.mdp-dash-job-created {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8a8a95;
    font-size: 12px;
}
.mdp-dash-job-created i { color: #b3b3bd; font-size: 12px; }

.mdp-dash-job-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.mdp-dash-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: #4bbf7a;
    font-size: 13px;
    font-weight: 700;
}

.mdp-dash-job-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #eeeef4;
    background: #f8f8fb;
}
.mdp-dash-grid .mdp-dash-stat {
    display: block;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
}
.mdp-dash-stat + .mdp-dash-stat { border-left: 1px solid #eeeef4; }
a.mdp-dash-stat:hover { background: #f1f1f8; }
.mdp-dash-stat-value {
    display: block;
    color: #555;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
.mdp-dash-grid .mdp-dash-stat-label {
    display: block;
    margin-top: 2px;
    color: #6a6a74;
    font-size: 11.5px;
    line-height: 1.3;
}
.mdp-dash-stat-label.strong { color: #444; font-weight: 700; }

/* ---------- Panel footer (both columns) ---------- */
.mdp-dash-grid .mdp-dash-panel-foot {
    padding: 14px 20px;
    border-top: 1px solid #eeeef4;
    text-align: center;
}
.mdp-dash-panel-foot a {
    color: #6b6ef0 !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}
.mdp-dash-panel-foot a:hover { text-decoration: underline; }

/* ---------- Right column: Recent Applicants (by role) ---------- */
.mdp-dash-grid .mdp-role-list { padding: 8px 12px 4px; }
.mdp-dash-grid .mdp-role-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 10px;
    border-radius: 10px;
    text-decoration: none;
}
.mdp-role-row + .mdp-role-row { border-top: 1px solid #f0f0f5; }
.mdp-role-row:hover { background: #faf9ff; }
.mdp-role-main { min-width: 0; }
.mdp-dash-grid .mdp-role-title {
    display: block;
    margin-bottom: 3px;
    color: #8e8ff5;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.mdp-role-sub {
    display: block;
    color: #9a9aa4;
    font-size: 11.5px;
    line-height: 1.4;
}
.mdp-role-end {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.mdp-role-new { color: #2f9e63; font-size: 11.5px; font-weight: 700; }
.mdp-dash-grid .mdp-role-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 13px;
    background: #eef0ff;
    color: #6d6ef0;
    font-size: 13px;
    font-weight: 700;
}
.mdp-role-chevron { width: 15px; height: 15px; color: #b7b7c4; flex: 0 0 auto; }

/* Empty state (right panel) */
.mdp-dash-grid .mdp-apps-empty {
    padding: 44px 24px 40px;
    text-align: center;
}
.mdp-dash-grid .mdp-apps-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #f1f1fb;
    color: #a9a9e0;
}
.mdp-apps-empty-icon svg { width: 28px; height: 28px; }
.mdp-dash-grid p.mdp-apps-empty-title {
    margin: 0 0 6px !important;
    color: #444;
    font-size: 15px;
    font-weight: 700;
}
.mdp-dash-grid p.mdp-apps-empty-text {
    max-width: 240px;
    margin: 0 auto !important;
    color: #8a8a95;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Empty state (left panel) — kept from the PM 2026-07 pass, restyled to match. */
.mdp-dash-grid .mdp-active-jobs-empty {
    padding: 44px 24px 40px;
    color: #6b6b8a;
    text-align: center;
}
.mdp-dash-grid .mdp-active-jobs-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 0 14px;
    border-radius: 50%;
    background: #f1f1fb;
    color: #a9a9e0;
    font-size: 24px;
}
.mdp-dash-grid .mdp-active-jobs-empty p {
    margin: 0 0 16px !important;
    color: #8a8a95;
    font-size: 14px;
}
.mdp-dash-grid a.mdp-active-jobs-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 30px;
    background: #8588ec;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease;
}
.mdp-active-jobs-empty-btn:hover { background: #7679e6; }
.mdp-active-jobs-empty-btn i { font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    /* Bo cuc da la mot cot o moi be ngang; o day chi bo cap chieu cao vi tao mot
       hop cuon ben trong mot trang dang cuon tren dien thoai la kho dung. */
    .mdp-dash-grid .mdp-job-scroll { max-height: none; padding: 8px 14px 14px; }
}
@media (max-width: 600px) {
    .mdp-dash-grid .mdp-dash-panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    /* The card header keeps its two columns down to the smallest width — the
       status badge is only ~70px, and stacking it left a dead band of white
       space between "Created:" and "Active". Just tighten the gap. */
    .mdp-dash-grid .mdp-dash-job-top {
        gap: 6px 10px;
        padding: 12px 14px;
    }
    .mdp-dash-stat-value { font-size: 13.5px; }
    .mdp-dash-grid .mdp-dash-stat-label { font-size: 11px; }
}

/* =============================================================================
   MDP: prevent FOUC on the job-seeker "Your Current Location" Country / State
   fields. filters.js mdpLocToSelectize() converts these readonly inputs into
   selectize dropdowns on DOM-ready; on this (server-slow) dashboard DOM-ready
   lands ~1-2s after first paint, so the raw inputs show first with a visibly
   different box (padding-left 5px, transparent bg) then "jump" to the selectize
   look (padding-left 16px, white bg, 42px tall). Pre-style the raw inputs to
   match the final control so there is no perceptible jump. Scoped to the
   dashboard so the job-search filters (same .countries-wrap markup) are untouched.
   ============================================================================= */
.page-template-user-dashboard-template #jobs-search-form .countries-wrap > input.filter-data,
.page-template-user-dashboard-template #jobs-search-form .states-wrap.in-job > input.filter-data {
    min-height: 42px;
    line-height: 40px;
    padding-left: 16px;
    background-color: #fff;
}

/* --- Mobile fix (PM 2026-07): on the dashboard "Your Current Location", the raw hover
   dropdown (.wrap holding .country-list/.state-list) is replaced by a selectize control
   (filters.js mdpLocToSelectize). On touch devices the raw .wrap opened on tap (hover
   emulation) and could not be dismissed ("doesn't let me exit") and rendered unstyled —
   and during the (slow) pre-conversion window it was the only thing there. Hide the raw
   .wrap on the dashboard so ONLY the selectize control is interactive. mdpLocToSelectize
   still reads the (display:none) .country-list/.state-list items from the DOM to build the
   selectize options, so this does not break population. Scoped to the dashboard template
   so the job-search page filters (which rely on :hover to open .wrap) are untouched
   (see search-filters-hover memory). */
.page-template-user-dashboard-template .countries-wrap > .wrap,
.page-template-user-dashboard-template .states-wrap.in-job > .wrap {
    display: none !important;
}
.jobsearch-row.jobsearch-employer-profile-form{
    width: 100%;
}
/* ---------------------------------------------------------------------------
   JOB ALERTS — selectize skin for Location + Annual Base Salary   (MDP, PM 2026-07)
   ---------------------------------------------------------------------------
   These two fields used to be native <select>s. Their CLOSED border was already
   #9C9EFE, but the open option list is drawn by the browser/OS and always came out
   with a black border on a bare white panel — nothing like the three custom
   dropdowns above them, and impossible to reach with CSS. They are now selectize
   controls (see job_alerts_settings_form()), so both the closed control AND the
   open panel are real DOM and take the brand border.
   Scoped to .job-alerts-settings so no other selectize on the site is affected. */
.job-alerts-settings .selectize-control {
    margin-bottom: 0;
}
.job-alerts-settings .selectize-input {
    border: 1px solid #9C9EFE !important;
    border-radius: 5px !important;
    min-height: 46px;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center;
    box-shadow: none !important;
    background: #fff !important;
    cursor: pointer;
}
/* selectize adds .focus/.dropdown-active on open — keep the same border, and square
   off only the bottom corners so the control and the panel read as one element. */
.job-alerts-settings .selectize-input.focus,
.job-alerts-settings .selectize-input.dropdown-active {
    border-color: #9C9EFE !important;
    box-shadow: none !important;
}
.job-alerts-settings .selectize-input.dropdown-active {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* The panel that replaces the black native popup. */
.job-alerts-settings .selectize-dropdown {
    border: 1px solid #9C9EFE !important;
    border-top: 0 !important;
    border-radius: 0 0 5px 5px !important;
    box-shadow: 0 2px 6px rgba(156, 158, 254, .25);
    z-index: 10000; /* the form lives inside #job-alerts-modal */
}
.job-alerts-settings .selectize-dropdown .option {
    padding: 8px 10px;
    color: #000;
}
/* Match the highlight the other three dropdowns use for a chosen row. */
.job-alerts-settings .selectize-dropdown .active {
    background-color: #D6D6FF !important;
    color: #000;
}
.job-alerts-settings .selectize-input > input {
    height: auto !important;
    line-height: normal !important;
}
.job-alerts-settings .selectize-control.single .selectize-input:after {
    content: none; /* the native fields showed no caret; stay consistent */
}

/* ---------------------------------------------------------------------------
   JOB ALERTS — typography parity with the other forms   (MDP, PM 2026-07)
   ---------------------------------------------------------------------------
   The three custom dropdowns (Job Function / Experience Level / Industry) are a
   bespoke widget, so they never picked up the "MDP FORM STYLE" block above: their
   option rows rendered at 13px/300 while every other field on the site — and the
   two selectize controls now sitting right beside them — is 16px/400 Open Sans.
   The chosen value also came out pure #000 (an inline color:black the widget's own
   JS writes on the wrapper) instead of the #333 used everywhere else.
   Scoped to .job-alerts-settings so the same widget on the job-search filter bar
   keeps its own compact sizing. */
.job-alerts-settings .filter-item-job-alert .wrap ul li,
.job-alerts-settings .filter-item-job-alert > span {
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}
/* Beats the inline color:black the widget writes on the .jobsearch-select-style wrapper. */
.job-alerts-settings .filter-item-job-alert > span {
    color: #333 !important;
}
/* The "Search Job Function / Experience Level / Industry" box inside each dropdown panel.
   It shipped at 28px tall with a grey #ccc border, which read as a stray third-party control
   next to the #9C9EFE fields around it. Taller + brand border; kept below the 46px of the
   main fields so it still reads as a secondary control inside the panel. */
.job-alerts-settings .filter-item-job-alert .wrap input.local-search {
    height: 38px;
    padding: 8px 12px !important;
    line-height: normal;
    border: 1px solid #9C9EFE !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}
.job-alerts-settings .filter-item-job-alert .wrap input.local-search:focus {
    border-color: #9C9EFE !important;
    outline: none;
}
/* Empty state: these widgets show their default text ("Job Function", "Experience Level",
   "Industry") in the value slot, i.e. it is a placeholder. It used to render as dark body
   text, which sat badly next to the real #999 selectize placeholder directly below it.
   .mdp-has-value is written server-side on load and kept in sync by updateSelectedValues(). */
.job-alerts-settings .jobsearch-select-style:not(.mdp-has-value) .filter-item-job-alert > span {
    color: #999 !important;
}

/* ---------------------------------------------------------------------------
   JOB ALERTS — "Saving..." state for the Save preferences button
   ------------------------------------------------------------------------ */
#save-preferences-job-alerts.is-saving {
    opacity: .75;
    cursor: progress;
    pointer-events: none; /* belt and braces: the JS guard already blocks re-entry */
    position: relative;
    padding-right: 34px;
}
#save-preferences-job-alerts.is-saving:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 13px;
    height: 13px;
    margin-top: -7px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mdp-ja-spin .6s linear infinite;
}
@keyframes mdp-ja-spin {
    to { transform: rotate(360deg); }
}
/* Respect users who ask the OS to reduce motion — keep the state, drop the spin. */
@media (prefers-reduced-motion: reduce) {
    #save-preferences-job-alerts.is-saving:after { animation: none; }
}

/* ---------------------------------------------------------------------------
   "Create your account" (Sign Up) — Select Job Function dropdown panel
                                                            (MDP, PM 2026-07)
   ---------------------------------------------------------------------------
   The closed control already matched the form's other fields (46px, 1px #9C9EFE,
   30px pill, Open Sans 16/400 #333) because the MDP FORM STYLE block covers it.
   The OPEN panel, however, was still stock Selectize: no border at all, a 3px
   square-ish radius, a faint grey shadow and Selectize's own pale-blue #f5fafd
   highlight — nothing to do with the brand.
   Give the panel the same border/'brand' treatment used elsewhere. The control is
   a pill, so the panel is NOT welded to its bottom edge (squaring off the corners
   of a 30px pill looks broken); it floats just below as its own rounded card.
   Scoped to the registration form so no other Selectize on the site is affected. */
form[id^="registration-form-"] .selectize-dropdown {
    border-radius: 12px !important;
    margin-top: 3px;
    overflow: hidden; /* keeps the row highlight inside the rounded corners */
    box-shadow: 0 4px 12px rgba(156, 158, 254, .25) !important;
    z-index: 10000; /* the form lives inside .jobsearch-modal */
    padding: 10px;
}
/* NOTE: deliberately NO max-height here. An earlier rule above sets
   .jobsearch-regfield-sector .selectize-dropdown-content { max-height: unset }
   so the whole sector list is shown without an inner scrollbar — leave that alone. */
/* Align the option text with the control's own 18px inset. */
form[id^="registration-form-"] .selectize-dropdown div.option {
    padding: 6px 10px !important;
}
/* Replace Selectize's pale-blue hover/selected tint with the brand highlight. */
form[id^="registration-form-"] .selectize-dropdown .active {
    background-color: #D6D6FF !important;
    color: #333 !important;
}

/* ---------------------------------------------------------------------------
   Register form — inline password-mismatch message + button/link spacing
                                                            (MDP, PM 2026-07)
   ---------------------------------------------------------------------------
   1. .mdp-cpass-msg is injected by mdp-scripts.js under the Confirm Password
      field while the user types (replaces the old red alert bar that only
      appeared under the button after clicking Create account).
   2. The "Already have an account? Login" link sat flush against the Create
      account button border — give it a clear line space. */
form[id^="registration-form-"] .mdp-cpass-msg {
    display: block;
    color: #d63638;
    font-size: 13px;
    line-height: 1.3;
    margin: 6px 0 0;
}
/* NOTE: an earlier MDP rule (form[...] .jobsearch-user-form .jobsearch-user-form-info
   { margin: 0 auto; }) centers the link — match its specificity so this later
   margin-top wins while the centering stays. */
form[id^="registration-form-"] .jobsearch-user-form .jobsearch-user-form-info {
    margin-top: 14px;
}
#job-posting-form .jobsearch-employer-profile-form .offered_salary:after{
    content: 'Include your specific pay range and compensation details in the job description, where applicable.';
    font-size: 14px;
    line-height: 1.3;
    display: block;
}
#job-posting-form .jobsearch-employer-profile-form .offered_salary .jobsearch-profile-select{
    margin-bottom: 5px;
}
.jobsearch-jobdetail-content.jobsearch-employerdetail-content .jobsearch-content-title{
    margin-top: 30px;
}
.jobsearch-jobdetail-content.jobsearch-employerdetail-content .jobsearch-content-title h2{
    margin-bottom: 10px;
}
/* =============================================================================
   MDP: luoi an toan cho khoi "account under review" (khach 20/08)
   Khoi nay da duoc go khoi wp-jobsearch/templates/user-dashboard/user-dashboard-template.php.
   Do do la FILE LOI PLUGIN, moi lan update plugin no se quay lai. Dong duoi giu cho no
   khong hien ra trong khoang thoi gian tu luc update den luc co nguoi sua lai lo`i.
   Khong xoa dong nay khi da sua lai lo`i — giu ca hai cho chac.
   ============================================================================= */
.jobsearch-unapproved-user-con { display: none !important; }