/*
=========================================================
REACHME
=========================================================
 * Innehåller styling för Lediga jobb
 * 
 * Copyright (C) 2024 Limepark AB
=========================================================*/

/*
---------------------------------------------------------
FILTRERING
--------------------------------------------------------- */

.lp-jobListing-reachme,
.lp-jobListing-reachme-job {
  margin-bottom: 2rem;

  --lp-joblisting--background-color: #f1f6f7;
  --lp-joblisting--border-color: #e3e3e3;
  --lp-joblisting__button--background-color: #09428f;
  --lp-joblisting__button--contrast-color: #fff;
  --lp-joblisting__hero--background-color: #143a84;
  --lp-joblisting__hero--contrast-color: #fff;
  --lp-joblisting__link--color: #143a84;
}

.lp-jobListing-reachme form {
  background-color: var(--lp-joblisting--background-color);
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.lp-jobListing-reachme label,
.lp-jobListing-reachme legend {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.3em;
}

.lp-jobListing-reachme legend {
  margin-bottom: 0.6em;
}

.lp-jobListing-reachme select {
  background-color: #fff;
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2030.58%2019.64\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23333\'%3E%3Cpath%20%20d%3D%22M30.22%203.49L27.07.36a1.19%201.19%200%200%200-1.71%200L15.29%2010.44%205.22.36a1.19%201.19%200%200%200-1.71%200L.36%203.49a1.21%201.21%200%200%200%200%201.73l14.08%2014.06a1.19%201.19%200%200%200%201.71%200L30.22%205.22a1.21%201.21%200%200%200%200-1.73z%22%2F%3E%3C%2Fsvg%3E');
  background-position: bottom 50% right 10px;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  border: 1px solid rgba(151, 151, 151, 0.4);
  border-radius: 5px;
  box-sizing: border-box;
  color: #03310f;
  cursor: pointer;
  font-family: 'open sans', arial, helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  padding: 0.8em 2em 0.8em 1.2em;
  width: 100%;
  max-width: 25rem;
  appearance: none;
}

.lp-jobListing-reachme select:focus,
.lp-jobListing-reachme input[type="text"]:focus {
  border-color: #b3b3b3;
} 

.lp-reachme-filter-wrapper {
  display: flex;

  flex-wrap: wrap;
  gap: 2rem 1rem;
  margin-top: 2rem;
}

.lp-reachme-filter-wrapper > div {
  display: none;
  /*
  display: flex;
  flex-direction: column;

  flex: 1 1 auto;
  width: 100%;
  */
}

.lp-reachme-filter-wrapper fieldset {
  flex: 1 1 1px;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 20rem;
}

.lp-reachme-filter-wrapper fieldset label {
  font-weight: 400;
  margin: 0;
}

.lp-reachme-info-text {
  margin-bottom: 0;
}

.lp-reachme-query-wrapper {
  display: grid;
}

.lp-jobListing-reachme form input[type="text"] {
  background-color: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  box-sizing: border-box;
  color: #03310f;
  font-family: 'open sans', arial, helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  padding: 0.8em 1.2em;
  width: auto;
  grid-area: 1 / 1;
  padding-right: 80px;
  min-width: 0;
}

.lp-jobListing-reachme form input[type="text"] + button {
  background-color: #09428f;
  color: #fff;
  border-color: #09428f;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  font-family: 'open sans', arial, helvetica, sans-serif;
  transition: all 0.3s ease;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: end;
  margin: 8px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0.8em 1.6em;
  min-height: 44px;
}

.lp-jobListing-reachme form input[type="text"] + button:before {
  content: '';
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  background-color: #fff;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22M10.149%201.714a8.434%208.434%200%201%200%200%2016.869%208.434%208.434%200%200%200%200-16.869zM0%2010.15C0%204.544%204.544%200%2010.149%200c5.605%200%2010.148%204.544%2010.148%2010.149%200%205.605-4.543%2010.148-10.148%2010.148C4.544%2020.297%200%2015.754%200%2010.15z%22%3E%3C%2Fpath%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22M16.108%2016.108a.857.857%200%200%201%201.213%200l6.428%206.429a.857.857%200%201%201-1.212%201.212l-6.428-6.429a.857.857%200%200%201%200-1.212z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22M10.149%201.714a8.434%208.434%200%201%200%200%2016.869%208.434%208.434%200%200%200%200-16.869zM0%2010.15C0%204.544%204.544%200%2010.149%200c5.605%200%2010.148%204.544%2010.148%2010.149%200%205.605-4.543%2010.148-10.148%2010.148C4.544%2020.297%200%2015.754%200%2010.15z%22%3E%3C%2Fpath%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22M16.108%2016.108a.857.857%200%200%201%201.213%200l6.428%206.429a.857.857%200%201%201-1.212%201.212l-6.428-6.429a.857.857%200%200%201%200-1.212z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.lp-jobListing-reachme form input[type="text"] + button span {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

.lp-jobListing-reachme form input[type="text"] + button:hover,
.lp-jobListing-reachme form input[type="text"] + button:focus {
  background-color: #000;
}

.lp-rechme-filter-group-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.lp-reachme-filter input[type='checkbox'] {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

.lp-reachme-filter input[type='checkbox'] + label {
  position: relative;
  padding: 0.4em 0 0.4em 1.8em;
  cursor: pointer;
  font-size: 16px;
}

.lp-reachme-filter input[type='checkbox'] + label:hover {
  text-decoration: underline;
}

.lp-reachme-filter input[type='checkbox']:focus-visible + label {
  outline: 2px solid #333;
  outline-offset: 2px;
} 

.lp-reachme-filter input[type='checkbox'] + label:before {
  background-color: #fff;
  /* border: 1px solid var(--lp-joblisting--border-color); */
  border-radius: 2px;
  content: '';
  height: 1.3em;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1.3em;
}

.lp-reachme-filter input[type='checkbox']:checked + label:before {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2026%2026\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23333\'%3E%3Cpath%20%20d%3D%22M19.689%203.445c-.12.06-.258.153-.307.206-.049.054-2.064%203.013-4.478%206.576a4684.822%204684.822%200%200%201-4.404%206.497c-.009.011-.946-.908-2.084-2.042C7%2013.269%206.287%2012.588%206.153%2012.52a1.156%201.156%200%200%200-.953%200c-.12.062-.524.426-1.053.951-.968.961-1.093%201.141-1.088%201.57.003.154.038.313.096.433.067.138%201.017%201.113%203.398%203.49%203.067%203.061%203.326%203.309%203.587%203.429.758.35%201.359.264%201.885-.269.193-.195%2010.708-15.653%2010.923-16.057.111-.208.11-.657-.002-.884a1.301%201.301%200%200%200-.218-.304c-.188-.186-2.046-1.431-2.227-1.492a1.115%201.115%200%200%200-.812.058%22%2F%3E%3C%2Fsvg%3E');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80% auto;
}

/*
---------------------------------------------------------
LISTNING
--------------------------------------------------------- */

.lp-jobListing-reachme #lp-reachme-jobList {
  max-width: 100%;
  overflow: scroll;
}

.lp-jobListing-reachme caption {
  font-size: 14px;
  margin-bottom: 1em;
  text-align: left;
}

.lp-jobListing-reachme table {
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
  width: 100%;
}

.lp-jobListing-reachme tr {
  background-color: #fff;
  border-bottom: 1px solid var(--lp-joblisting--border-color);
  border-top: 1px solid var(--lp-joblisting--border-color);
}

.lp-jobListing-reachme tbody tr:nth-child(odd) {
  background-color: var(--lp-joblisting--background-color);
}

.lp-jobListing-reachme td,
.lp-jobListing-reachme th {
  padding: 1em;
}

.lp-jobListing-reachme th {
  font-weight: 600;
}

/*
---------------------------------------------------------
SIDA
--------------------------------------------------------- */

.lp-reachme-job-details-content {
  margin: 0 auto 2rem;
  max-width: 620px;
}

.lp-reachme-job-details-content p {
  margin-bottom: 1em;
  margin-top: 0;
}

.lp-reachme-job-details-content h1,
.lp-reachme-job-details-content h2,
.lp-reachme-job-details-content h3 {
  margin-top: 0;
}

.lp-reachme-job-details-content h2 {
  margin-bottom: 0.3em;
}

.lp-reachme-job-details-content ul {
  line-height: 1.5;
  margin: 0 0 1.5em;
  padding-left: 2em;
}

/*--- Hero ----*/

.lp-reachme-job-details-hero {
  display: grid;
  margin-bottom: 2rem;

  grid-template-columns: min(1360px, 100vw);
  grid-template-rows: auto 5rem auto;
  justify-content: center;
}

.lp-reachme-job-details-info {
  background-color: var(--lp-joblisting--background-color);
  box-sizing: border-box;
  max-width: 620px;
  padding: 1.5rem;
  width: 100%;

  grid-column: 1 / 1;
  grid-row: 2 / 4;
  justify-self: center;
}

.lp-reachme-job-details-hero img {
  max-width: 100%;
  width: 100%;

  grid-column: 1 / 1;
  grid-row: 1 / 3;
}

/*--- Info ----*/


.lp-reachme-job-details-info dl {
  display: grid;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  max-width: 76%;
}

.lp-reachme-job-details-info dt {
  font-weight: 600;
  margin-bottom: 0.2em;
}

.lp-reachme-job-details-info dd {
  margin-left: 0;
}

.lp-reachme-job-details-info dl a {
  color: var(--lp-joblisting__link--color);
}

.lp-reachme-job-details-info--socials {
  display: flex;

  flex-wrap: wrap;
  gap: 0.8em;
}

.lp-reachme-job-details-info--socials a {
  display: flex;
  flex-direction: column;
}

.lp-reachme-job-details-info--socials a .lp-icon {
  font-size: 1.2em;
}

.env-button.lp-reachme-job-details-button {
  background-color: var(--lp-joblisting__button--background-color);
  color: var(--lp-joblisting__button--contrast-color);
  font-size: 18px;
}

.env-button.lp-reachme-job-details-button:hover {
  text-decoration: underline;
}

.lp-reachme-job-details-info .lp-reachme-job-details-button {
  align-self: flex-start;
  justify-self: stretch;
}

.lp-reachme-job-details-apply {
  border-top: 1px solid var(--lp-joblisting--border-color);
  display: grid;
  margin: 1.5rem 0 0;
  padding: 1.5rem 0 0;
  /* gap: 1rem; */
  grid-template-columns: auto max-content;
}

.lp-reachme-job-details-protected.lp-collapsable-container {
  background-color: transparent;
  margin: 0;
}

.lp-reachme-job-details-protected.lp-collapsable-container .lp-toolbar-wrapper {
  background-color: transparent;
}

.lp-reachme-job-details-protected.lp-collapsable-container .lp-toolbar-button {
  border: 1px solid var(--lp-joblisting--border-color);
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.lp-reachme-job-details-protected.lp-collapsable-container .lp-toolbar-button:hover {
  background-color: #fff;
  text-decoration: underline;
}

.lp-reachme-job-details-protected.lp-collapsable-container:not(.lp-collapsed) .lp-toolbar-wrapper .lp-toolbar-button {
  background-color: #fff;
}

.lp-reachme-job-details-protected.lp-collapsable-container .lp-toolbar-wrapper .lp-toolbar-button:before {
  border-color: var(--lp-joblisting--border-color);
  transition: all 0.3s ease;
}

.lp-reachme-job-details-protected.lp-collapsable-container .lp-toolbar-wrapper .lp-toolbar-button:hover:before {
  background-color: #fff;
  color: #000;
}

.lp-reachme-job-details-protected.lp-collapsable-container:not(.lp-collapsed) .lp-toolbar-wrapper .lp-toolbar-button:before {
  background-color: #fff;
  color: #000;
}

p.lp-reachme-job-details-protected--strong {
  font-weight: 600;
  margin-bottom: 0.5em;
  margin-top: 0;
}

.lp-reachme-job-details-protected.lp-collapsable-container.lp-collapsable-active .lp-collapsable-content {
  padding-top: 20px;
}

.lp-reachme-job-details-protected.lp-collapsable-container .lp-close-collapsable-content {
  color: var(--lp-joblisting__link--color);
  text-decoration: underline;
}

/*
---------------------------------------------------------
MOBIL
--------------------------------------------------------- */

@media screen and (max-width: 640px) {
  .lp-reachme-job-details-hero {
    grid-template-rows: initial;
  }
  .lp-reachme-job-details-hero img,
  .lp-reachme-job-details-info {
    grid-column: initial;
    grid-row: initial;
  }
  .lp-reachme-job-details-info dl,
  .env-button.lp-reachme-job-details-button {
    font-size: 16px;
  }
  .lp-reachme-job-details-apply {
    grid-template-columns: 1fr;
  }
  .lp-reachme-filter-wrapper {
    flex-direction: column;
  }
  .lp-reachme-filter-wrapper fieldset {
    min-width: 0;
  }
}

/*
---------------------------------------------------------
HERO
--------------------------------------------------------- */

.lp-hero-layout {
  display: grid;
  grid-template-columns: min(1360px, 100vw);
  justify-content: center;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.lp-hero-layout > * {
  grid-area: 1/1;
}

.lp-hero-layout .sv-image-portlet {
  display: block;
}

.lp-hero-layout .sv-image-portlet img {
  max-width: 100% !important;
  max-height: 100% !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}

.lp-hero-layout > .sv-layout {
  align-self: end;
  max-width: 940px;
  width: 94%;
  justify-self: center;
  margin: clamp(1.5rem, 4vw, 3rem) 0;
}

.lp-hero-layout > .sv-layout .sv-text-portlet {
  padding: clamp(1.5rem, 3vw, 2rem);
  background-color: rgba(0,0,0,0.7);
  display: inline-block;
}

.sv-edit-mode .lp-hero-layout > .sv-layout .sv-text-portlet {
  z-index: 50000;
}

.lp-hero-layout > .sv-layout .sv-text-portlet .normal {
  color: #fff;
  margin-bottom: 0;
  font-size: clamp(1.4em, 2.4vw, 1.7em);
  line-height: 1.5;
}

.lp-reachme-job-details-contact-info table {
  width: 100%;
}

#filter-wrapper-toggler {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.upper-container {
    display: flex;
    justify-content: space-between;
}