/* OVERRIDES !important must be included on all styles */

/* container for all pages */
/* main text color default is set here - IMPORTANT */
/* can change background, or add borders and padding */
.jb--jobs {
  /*color: #000 !important;*/
  color: #141414 !important;
  /* background: #fff !important; */
  padding: 1rem !important;
}

/* page titles */
.jb--wrapper h2 {
  color: #333 !important;
}

/* links */  /*This styles the Back To List link when you click on a job to view the description. It needs this styling to be consistent with the site.
This affects not just the Back to List link but all links, including Job Titles.
I added the styles inside the wrapper that were empty.  The colors used are the default colors to set them off from the h1, h2, h3 colors.
I had to style this or the Back To List link was black and had no link interaction but it worked as a link.  These styles work for all the links.*/
.jb--wrapper a {
  color: #0000EE;
  text-decoration: underline;
  font-weight: bold;
}

/*I added these styles.  The a:visited works on the job titles and they turn purple after visiting/clicking. It doesn't on the Back To List link, 
which is great. Back To List stays blue after visiting, which is excellent.  I don't want that link to stay purple after clicking it once to return.  
It resets.  However, on the apply page, the a:visited works on the Back To List as it it purple there.  Interesting.*/
.jb--wrapper a:hover, a:active, a:visited {
  color: #551A8B;
  text-decoration: underline;
  font-weight: bold;
}



/* search and apply buttons, pagination */
/* can change background, or add borders, change border-radius and padding */
.jb--button {
  /*background-color: #D3D3D3 !important;
  border: 1px solid #000 !important;
  color: #000 !important;
  border-radius: 6px;*/
  background-color: #ffc84d !important;
  border: 3px solid #eeaf23 !important;
  color: #141414 !important;
  border-radius: 6px;
  transition: background-color 0.5s ease;
}
.jb--button:hover {
  /*background-color: #f5f5f5 !important;
  border: 1px solid #000 !important;
  color: #808080 !important;*/
  background-color: #eeaf23 !important;
  border: 3px solid #eeaf23 !important;
  color: #141414 !important;
}
/* button with arrow when they are at the beginning or end */
.jb--button.disabled {
  background-color: #eaeaea !important;
  border: 1px solid #cecece !important;
  color: #cecece !important;
}
/* button active depending which page of the search results */
.jb--button-active {
  background-color: #a9a9a9 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
}
.jb--wrapper input {
  border-radius: 6px !important;
}
/* height of buttons and form fields */
.jb--wrapper input, button, .jb--button {
    /*height: 36px !important;*/
    height: 48px !important;
}

/* Change the color of the placeholder text in inputs */
::-webkit-input-placeholder {
  color: #808080;
}
:-ms-input-placeholder {
  color: #808080;
}
::-moz-placeholder {
  color: #808080;
}
:-moz-placeholder {
  color: #808080;
}

/* Changes the loading indicator */
.jb--loading {
  color: #D3D3D3;
  width: 100px;
}

/* container that holds search description */
/* can change background, or add borders and padding */
.jb--job-listing {
  background: #fff !important;
  /*background: #fafafa !important;*/
  padding: 1rem !important;
}
.jb--job-listing:hover {
  /*background: #f7f7f7 !important;*/ /*#f7f7f7 too light and #d3d3d3 too dark for WCAG AA standard. #e5e5e5 in the middle and meets WCAG AA for mid gray text.*/
  /*background: #d3d3d3 !important;*/
  background:#E5E5E5 !important;
}

/* container that holds search description for featured jobs */
/* can change background, or add borders and padding */
.jb--job-listing-featured {
  background: #fff !important;
  /*background: #fafafa !important;*/
   /*background: white !important;*/
  padding: 1rem !important;
}
.jb--job-listing-featured:hover {
  background: #f7f7f7 !important;
}

/* featured job label on search results */
.jb--wrapper .jb--featured-label {
  background: #555555;
  /*background: #ffc84d;    THIS DOES NOT Change the Hybrid, no Remote labels.*/
}

/* job title on search results */
/* should pick up <a> color, can change if necessary */
.jb--title a {

}

/*I added these two selectors.  they change to "Hybrid" tag and the "No Remote" Tag.  ARE THERE OTHER TAGS??? If Yes, I need to add the code for them.
Note:  This will not work unless the keyword !important is used.  I used the dev tools to identify the class for these tags.
I also coded this to overrite not only the background color but the text color, too.
I had to add the sidebar styles, too, for when you click a job and get the sidebar. This works. I don't see other categories like -remote.
I checked another Top Echleon feed and saw a "full Remote" and "Remote Available" tag. However, I'm unsure of the exact CSS selector.*/

.jb--remoteStatus-hybrid, .jb--remoteStatus-none, .jb--sidebar-remoteStatus-hybrid, .jb--sidebar-remoteStatus-none {
  background: #ffc84d!important;
  color: #141414!important;
}
/*.jb--remoteStatus-none {
  background: #ffc84d!important;
  color: #494c4f!important;
}*/



/* location on search results */
.jb--location {
  /*color: #808080 !important;*/
  color: #494c4f !important;
}

/* date posted on search results */
.jb--date-posted {
  /*color: #000 !important;*/
  color: #141414 !important;
}

/* job descriptions on search results */
.jb--description {
  /*color: #808080 !important;*/
  color: #494c4f !important;
}

/* job count on bottom of search results */
.jb--job-count {
  /*color: #000 !important;*/
  color: #141414 !important;
}

/* container for the sidebar on job detail page */
/* can add background, border, padding */
.jb--sidebar {

}

/* titles in sidebar */
.jb--sidebar-title {
   /*color: #808080 !important;*/
  color: #494c4f !important;
}

/* content in sidebar */
.jb--sidebar-content {
 /*color: #000 !important;*/
  color: #141414 !important;
}

/* container for job description on job detail page */
/* can add background, border, padding */
.jb--content {

}

/* applying for at top of apply page */
.jb--applying-for {
  color: #333 !important;
}

/* labels on form field on apply page */
.jb--label {
  /*color: #808080 !important;*/
  color: #494c4f !important;
}


/* accepted file types below resume picker */
.jb--file-type {
  /*color: #666 !important;*/
  color: #494c4f !important;
}