.elementor-41 .elementor-element.elementor-element-0dda060{--display:flex;}.elementor-41 .elementor-element.elementor-element-5e2d1c0{--spacer-size:10px;}.elementor-41 .elementor-element.elementor-element-5feb1fa2{--display:flex;}.elementor-41 .elementor-element.elementor-element-a36bfac{--display:flex;}.elementor-41 .elementor-element.elementor-element-911ecfe{--spacer-size:150px;}@media(max-width:1024px){.elementor-41 .elementor-element.elementor-element-5e2d1c0{--spacer-size:10px;}}@media(max-width:767px){.elementor-41 .elementor-element.elementor-element-5e2d1c0{--spacer-size:10px;}.elementor-41 .elementor-element.elementor-element-5feb1fa2{--content-width:500px;}}@media(min-width:768px){.elementor-41 .elementor-element.elementor-element-5feb1fa2{--content-width:860px;}}@media(max-width:1024px) and (min-width:768px){.elementor-41 .elementor-element.elementor-element-5feb1fa2{--content-width:500px;}}/* Start custom CSS for shortcode, class: .elementor-element-ae5b49a *//* Style the "Add Job" button */
.jm-dashboard__actions .jm-ui-button {
  background-image: radial-gradient(at top left, #004AAD 0%, #CB6CE6 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: background-image 0.3s ease;
}

.jm-dashboard__actions .jm-ui-button:hover {
  background-image: radial-gradient(at top left, #003580 0%, #9c4ed2 100%);
}



/* Style the Job Dashboard page heading */
.page-header .entry-title {
  font-weight: 300;
  font-size: 30px;
  margin-left: 130px; /* adjust to match the shortcode content alignment */
  margin-top: 70px;
}



.skip-link {
  display: none !important;
}


/* Hide "Views" and "Applications" columns in Job Dashboard */
.jm-dashboard-job-column.stats,
.jm-dashboard-job-column.applications {
  display: none !important;
}





/* Style main 'Delete' button */
a.job-dashboard-action-delete {
  background-color: #000000 !important;
  border-color: #b81c23 !important;
  color: white !important;
}

/* Style dropdown 'Delete' link */
a.job-dashboard-action-delete.jm-ui-button--link {
  color: #b81c23 !important;
}




.jm-dashboard-job-column.date div + small {
  display: block;
  margin-top: 6px; /* Adjust this value to control spacing */
}

.job-status-pending_payment {
  color: #b81c23 !important;
}

.job-status-pending_payment .jm-ui-icon {
  color: #b81c23 !important;
  fill: #b81c23 !important;
}


.job-status-expired {
  color: #b81c23;
}

.job-status-expired .jm-ui-icon {
  color: #b81c23;
}



.jm-dashboard-job {
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  padding: 16px;
  margin-bottom: 20px;
  box-sizing: border-box;

  /* Gradient border */
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-image:
    linear-gradient(#000, #000),
    radial-gradient(at top left, #004AAD 0%, #CB6CE6 100%);
}



.jm-dashboard-job-column a.job-title {
    font-weight: 300 !important;
}

.jm-dashboard-job-column a.job-title:hover {
    color: inherit !important;
}



.jm-dashboard-job-column.company img.company_logo {
  width: 40px !important;          /* Force square size */
  height: 35px !important;
  border-radius: 50% !important;   /* Make it round */
  object-fit: cover !important;    /* Ensure it fills the circle properly */
  display: block !important;
  overflow: hidden !important;
}


a.job-dashboard-action-delete:hover span {
  color: #b81c23 !important;
}

a.job-dashboard-action-delete span {
  transition: color 0.2s ease-in-out;
}


/* delete this - Continue Submission button */
a.job-dashboard-action-continue {
  color: white !important;
  border: 1px solid white;
  transition: border-color 0.2s ease-in-out;
}



a.job-dashboard-action-continue:hover {
  border-color: #ffffff !important;
  color: white !important;
}
 





/* Continue Submission button */
a.job-dashboard-action-continue {
  color: white !important;
  border: 1px solid white !important;
  background-color: transparent !important;
  transition: border-color 0.2s ease-in-out;
}

a.job-dashboard-action-continue:hover {
  border-color: #ffffff !important;
  background-color: transparent !important;
  color: white !important;
}



/* Relist button */
a.job-dashboard-action-relist {
  color: white !important;
  border: 1px solid white !important;
  background-color: transparent !important;
  transition: border-color 0.2s ease-in-out;
}

a.job-dashboard-action-relist:hover {
  border-color: #ffffff !important;
  background-color: transparent !important;
  color: white !important;
}







.jm-ui-action-menu__content {
  border: 1px solid transparent !important; /* transparent border to show gradient */
  background-color: black !important;
  padding: 10px;
  border-radius: 20px; /* Rounded corners */
  
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-image:
    linear-gradient(black, black),
    radial-gradient(at top left, #004AAD 0%, #CB6CE6 100%) !important;
}


.jm-ui-action-menu__content a {
  color: white !important;
  text-decoration: none !important;
  display: block;
  padding: 5px 0;
  transition: none !important;
}

.jm-ui-action-menu__content a:hover {
  text-decoration: underline !important;
  background-color: transparent !important;
  /* Keep text color except for delete */
  color: inherit !important;
}

/* Specifically style the 'Delete' link */
.jm-ui-action-menu__content a.job-dashboard-action-delete {
  color: #b81c23 !important; /* Red color */
}

.jm-ui-action-menu__content a.job-dashboard-action-delete:hover {
  color: #b81c23 !important; /* Keep red on hover */
  text-decoration: underline !important;
  background-color: transparent !important;
}



.jm-ui-action-menu__content a.job-dashboard-action-continue,
.jm-ui-action-menu__content a.job-dashboard-action-relist {
  border: none !important;
  box-shadow: none !important; /* just in case there’s a shadow acting like a border */
}

.jm-ui-action-menu__content a.job-dashboard-action-continue,
.jm-ui-action-menu__content a.job-dashboard-action-relist {
  display: none !important;
}

.jm-ui-action-menu__open-button {
  background-color: black;
  border-radius: 50%;
  transition: border 0.2s ease;
  border: none; /* initial no border */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;  /* set fixed width & height for circle shape */
  height: 32px;
  cursor: pointer;
}




.jm-notice {
  background-color: black !important;
  border: 1px solid #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.jm-notice__message-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jm-notice__message {
  font-weight: 300 !important;
  font-size: 1rem !important; /* adjust size as needed */
  color: white !important;
}

.jm-ui-icon[data-icon="check-circle"] {
  font-weight: 300 !important;
  font-size: 1.2rem !important; /* slightly bigger than text */
  color: #ffffff !important;
}


.jm-job-overlay-header .job_title {
  font-weight: 300 !important;
}

.jm-job-overlay-header .actions a.jm-ui-button--link {
  text-decoration: none !important;
  color: inherit !important;
  transition: none !important;
}

.jm-job-overlay-header .actions a.jm-ui-button--link:hover {
  text-decoration: none !important;
  color: inherit !important;
}


#jmDashboardOverlay > div > div.jm-dialog-modal.jm-dashboard__overlay > div {
  background-color: black !important;
}


#jmDashboardOverlay > div > div.jm-dialog-modal.jm-dashboard__overlay > div {
  font-weight: 300 !important;
  color: white !important;
}

#jmDashboardOverlay .company_logo {
  border-radius: 50% !important;
  width: 30px !important;   /* or the actual width of the logo */
  height: 30px !important;  /* keep height equal to width */
  object-fit: cover !important;
}





#jmDashboardOverlay a.jm-ui-button--link.job-dashboard-action-duplicate,
#jmDashboardOverlay a.jm-ui-button--link.job-dashboard-action-pay {
  text-decoration: none;
  background-color: black;
  border: 1px solid transparent; /* always has border, but invisible */
  transition: border-color 0.2s ease, color 0.2s ease;
  color: white;
}

#jmDashboardOverlay a.jm-ui-button--link.job-dashboard-action-duplicate:hover,
#jmDashboardOverlay a.jm-ui-button--link.job-dashboard-action-pay:hover {
  border-color: #ffffff; /* animate border color */
  color: white;
}





/* Tooltip box for post impressions: black background, white text */
#jmDashboardOverlay .jm-chart-bar-tooltip {
  background-color: black !important;
  color: white !important;
  border-radius: 6px;
  padding: 8px 12px;
  font-weight: 300; /* lighter text */
}

/* Make the strong text inside tooltip also white */
#jmDashboardOverlay .jm-chart-bar-tooltip strong {
  color: white !important;
  font-weight: 600;
}

/* Tooltip text box styling */
.jm-section-header__help .jm-ui-tooltip {
  background-color: black !important;
  color: white !important;
  border: 1px solid #ffffff !important;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 300;
  max-width: 250px; /* Optional: control width */
}





/* 1. Continue Submission and Relist buttons: remove border by default, show border on hover */
.jm-ui-actions-row a.job-dashboard-action-continue,
.jm-ui-actions-row a.job-dashboard-action-relist {
  border: none !important;
  transition: border 0.2s ease;
}

.jm-ui-actions-row a.job-dashboard-action-continue:hover,
.jm-ui-actions-row a.job-dashboard-action-relist:hover {
  border: 1px solid #ffffff !important;
}

/* 2. Delete button: white text and 1px rounded border (#b81c23), hover text color changes to #b81c23 */
.jm-ui-actions-row a.job-dashboard-action-delete {
  color: white !important;
  border: 1px solid #b81c23 !important;
  border-radius: 6px;
  transition: color 0.2s ease;
}

.jm-ui-actions-row a.job-dashboard-action-delete:hover {
  color: #b81c23 !important;
  background: transparent !important;
  border-color: #b81c23 !important;
}

.jm-ui-actions-row a.job-dashboard-action-delete {
  text-decoration: none !important;
}





.jm-ui-action-menu__content {
  display: flex;
  flex-direction: column; /* vertical stacking */
}

.jm-ui-action-menu__content a.job-dashboard-action-delete {
  order: 2; /* put Delete at the bottom */
}

.jm-ui-action-menu__content a.job-dashboard-action-pay {
  order: 1; /* Pay comes before Delete */
}

.jm-ui-action-menu__content a.job-dashboard-action-duplicate {
  order: 0; /* Duplicate at the top */
}





@media (max-width: 600px) {
  #job-manager-job-dashboard {
    max-width: 100% !important;   /* Prevent container from exceeding screen */
    width: 100% !important;       /* Make container use full available width */
    box-sizing: border-box;       /* Include padding/border in width */
    padding: 0 15px;              /* Add horizontal padding for breathing room */
    margin: 0 auto;               /* Center container horizontally */
    overflow-x: hidden;           /* Hide horizontal scrollbar */
  }
}



 

@media (max-width: 600px) {
  /* Keep the main job row horizontal */
  .jm-dashboard-job {
    display: flex !important;
    flex-wrap: wrap; /* allow wrapping */
    align-items: flex-start;
  }

  /* Make company logo column stay in normal place (don’t change) */
  .jm-dashboard-job-column.company {
    flex: 0 0 auto; /* keep natural width */
    order: 0;
  }

  /* Job title column normal */
  .jm-dashboard-job-column.job_title {
    flex: 1 1 60%; /* allow to grow */
    order: 1;
  }

  /* Date column takes full width and order 2 */
  .jm-dashboard-job-column.date {
    flex: 1 1 100%; /* full width */
    order: 2;
    margin-top: 10px;
  }

  /* Actions column takes full width below date, order 3 */
  .jm-dashboard-job-column.actions {
    flex: 1 1 100%; /* full width */
    order: 3;
    margin-top: 8px;
    display: flex !important;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Style actions buttons spacing */
  .jm-dashboard-job-column.actions > a {
    margin-right: 8px;
  }

  /* Action menu button aligned right */
  .jm-dashboard-job-column.actions details.jm-ui-actions-menu {
    margin-left: auto;
  }
}
 
 
@media (max-width: 600px) {
  /* Adjust the page title container */
  h1, 
  h2, 
  .page-title, 
  .entry-title, 
  #job-dashboard-header {
    padding-left: 30px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}










@media (max-width: 1024px) {
  /* Stack job card vertically */
  .jm-dashboard-job {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Ensure logo stays top-right */
  .jm-dashboard-job-column.company {
    order: 1;
    align-self: flex-end;
  }

  /* Job title stays top-left */
  .jm-dashboard-job-column.job_title {
    order: 2;
    align-self: flex-start;
  }

  /* Date is third */
  .jm-dashboard-job-column.date {
    order: 3;
    align-self: flex-start;
  }

  /* Make sure the ACTIONS block comes last */
  .jm-dashboard-job-column.actions {
    order: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align to left */
    gap: 8px;
  }

  /* Style individual buttons if needed */
  .jm-dashboard-job-column.actions a,
  .jm-dashboard-job-column.actions details {
    white-space: nowrap;
    font-size: 14px;
  }

  /* OPTIONAL: Add spacing below the date if needed */
  .jm-dashboard-job-column.date {
    margin-bottom: 4px;
  }
}



@media (min-width: 601px) and (max-width: 1024px) {
  /* Make sure the container wrapping the dashboard headline matches shortcode container */
  .job-dashboard-headline,  /* replace with actual class or ID of your headline container */
  #job-manager-job-dashboard {
    max-width: 100%;
    width: 100%;
    padding-left: 15px;  /* same padding as the shortcode container */
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}







#job-manager-job-dashboard > div.job-manager-jobs.jm-dashboard-table > div.jm-dashboard-rows {
  font-weight: 300 !important;
}












/* Hide the existing 'Sign In' button */
#job-manager-job-dashboard .account-sign-in a.button {
  display: none !important;
}

/* Hide original paragraph text */
p.account-sign-in {
  font-size: 0;  /* hide original text */
  position: relative;
  text-align: center; /* center content horizontally */
}

/* Show custom message instead */
p.account-sign-in::before {
  content: "Sign in via 'Employer Account' to manage your listings.";
  font-size: 16px; /* normal readable size */
  font-weight: 300; /* light font weight */
  color: inherit;
  position: relative;
  display: inline-block;
}/* End custom CSS */