/* This styles for Front End */
ul.job_listings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 !important;
  border-top: none !important;
  margin-top: 2rem;
}
@media screen and (max-width: 1080px) {
  ul.job_listings {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  ul.job_listings {
    grid-template-columns: repeat(1, 1fr);
  }
}
ul.job_listings li.job_listing {
  padding: 16px;
  height: 100% !important;
  border: none !important;
  margin: 0 !important;
}
ul.job_listings li.job_listing > a {
  padding: 20px !important;
  border-radius: 20px;
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  height: 100% !important;
  border: 1px solid var(--job_cards_border) !important;
  background-color: var(--job_cards_bg) !important;
}
ul.job_listings li.job_listing a img.company_logo {
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  visibility: visible !important;
}
ul.job_listings li.job_listing div.position {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  padding: 0 0 0 66px !important;
}
ul.job_listings li.job_listing a .position h3 {
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.2;
  color: var(--job_cards_position);
}
ul.job_listings li.job_listing a .position .company strong {
  color: var(--job_cards_position);
}
ul.job_listings li.job_listing a h3.job_listing-company {
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.2;
  color: black;
}
ul.job_listings li.job_listing .location {
  width: 100% !important;
  color: var(--job_cards_location) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  position: relative;
  padding: 0 0 0 24px !important;
  margin: 20px 0 !important;
}
ul.job_listings li.job_listing .location::before {
  content: "\f3c5";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 900;
}
ul.job_listings li.job_listing .meta li {
  font-size: 12px !important;
}
ul.job_listings li.job_listing .meta {
  display: flex;
  flex-wrap: wrap;
  width: 100% !important;
  padding: 0 !important;
  justify-content: center;
  gap: 8px;
}
ul.job_listings li.job_listing .meta li.job-type {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 0 0 calc(50% - 4px);
  padding: 4px;
  border-radius: 12px;
}
ul.job_listings li.job_listing .meta li.date {
  position: relative;
  padding: 0 0 0 24px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.job_listings li.job_listing .meta li.date::before {
  content: "\f133";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}
ul.job_listings li.job_listing .meta li.date time {
  float: left !important;
  text-align: left !important;
}
div.job_listings a.load_more_jobs {
  background-color: var(--load_btn_bg) !important;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 20px 10px 40px;
  border-radius: 24px;
  text-transform: uppercase !important;
  font-size: 14px !important;
  position: relative;
  text-decoration: none !important;
  border: 1px solid var(--load_btn_border) !important;
  color: var(--load_btn_text) !important;
}
div.job_listings a.load_more_jobs strong {
  color: var(--load_btn_text) !important;
}
div.job_listings a.load_more_jobs::before {
  content: "\2b";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: bold;
}

div.job_listings .job_filters li {
  list-style-type: none !important;
}

div.job_listings .job_types li label {
  padding: 0 !important;
  margin: 0 !important;
  color: var(--hero_job_types_text);
}

form.job_filters {
  background: transparent !important;
}

form.job_filters .search_jobs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background-color: var(--hero_job_filters_bg);
  padding: 16px;
  border-radius: 32px;
  border: 1px solid var(--hero_job_filters_border);
}

div.showing_jobs {
  background-color: var(--hero_job_search_results_bg) !important;
  border: none !important;
  color: var(--hero_job_search_results_text) !important;
  display: flex;
  justify-content: space-around;
}

div.showing_jobs a {
  color: var(--hero_job_search_results_text) !important;
  background-color: transparent !important;
  text-decoration: none;
}

ul.job_listings {
  gap: 16px;
}

.load_more_jobs {
  margin-top: 4rem !important;
}
.job_types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--hero_job_types_bg, red);
  padding: 16px;
  gap: 16px;
  margin: 1rem 0 !important;
  border-radius: 32px !important;
}
.job_listings {
  padding: 32px;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--cs-color-border);
  max-width: 1296px !important;
  margin-left: auto;
  margin-right: auto;
}
.search_jobs label {
  display: none !important;
}

div.job_listings a.load_more_jobs {
  display: flex;
}

/* Search Button */

div.job_listings .search_submit input {
  border-radius: 16px;
  background-color: var(--hero_job_search_button_bg) !important;
  background: var(--hero_job_search_button_bg) !important;
  color: var(--hero_job_search_button_text) !important;
  transition: 200ms all ease;
  width: 100%;
  height: 46px;
}

div.job_listings .search_submit input:hover {
  transform: scale(1.05);
}

div.job_listings .search_submit input::before {
  display: none !important;
}

/* Categorys */

div.job_listings .search_categories select {
  border-radius: 16px !important;
  height: 46px !important;
  background-color: var(--hero_job_search_categorys_bg) !important;
  background: var(--hero_job_search_categorys_bg) !important;
  color: var(--hero_job_search_categorys_text) !important;
}

div.job_listings .search_categories option {
  color: var(--hero_job_search_categorys_dd_text) !important;
  background-color: var(--hero_job_search_categorys_dd_bg) !important;
  background: var(--hero_job_search_categorys_dd_bg) !important;
  opacity: 0.9;
  transition: 200ms all ease !important;
}

div.job_listings .search_categories option:hover {
  opacity: 1 !important;
}

/* Regions */

div.job_listings .search_region select.search_region,
div.job_listings
  .search_region
  span.select2-selection.select2-selection--single {
  background-color: var(--hero_job_search_regions_bg) !important;
  background: var(--hero_job_search_regions_bg) !important;
  color: var(--hero_job_search_regions_text) !important;
  border-radius: 16px;
  border: none !important;
}
div.job_listings .search_region option,
li.select2-results__option {
  background-color: var(--hero_job_search_regions_dd_bg) !important;
  background: var(--hero_job_search_regions_dd_bg) !important;
  color: var(--hero_job_search_regions_dd_text) !important;
  opacity: 0.9;
  transition: 200ms all ease !important;
}

div.job_listings .search_region option:hover,
li.select2-results__option {
  opacity: 1;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 50% !important;
  transform: translatey(-50%);
  right: 8px !important;
}

/* Keyword */

div.job_listings .search_keywords input {
  border-radius: 16px;
  background-color: var(--hero_job_search_keyword_bg) !important;
  background: var(--hero_job_search_keyword_bg) !important;
  color: var(--hero_job_search_keyword_text) !important;
  height: 46px !important;
}

div.search_remote_position {
  display: none !important;
}

.search_keywords,
.search_region,
.search_categories,
.search_submit {
  flex: 0 0 calc(25% - 16px);
}
@media screen and (max-width: 768px) {
  .search_keywords,
  .search_region,
  .search_categories,
  .search_submit {
    flex: 0 0 100%;
  }
  ul.job_listings li.job_listing a div.location {
    text-align: left !important;
    float: left !important;
  }
}

.select2.select2-container.select2-container--default {
  width: 100% !important;
  height: 46px !important;
}

.select2-selection.select2-selection--single,
.select2-selection__rendered {
  height: 46px !important;
}

.select2-selection__rendered {
  line-height: 46px !important;
}