/* ==========================================================================
   SPECIFICS
   --------------------------------------------------------------------------
   * LOCAL IMAGES
      : Header logo
      : Main banner
      : Mobile menu
      : Dataset
      : File upload
      : Photo upload
      : Blocking lo: MAIN
   * INVERTING CLICKABLE COLORS (commented and ready to use)
      : Nav
      : Tabs
      : Switcher
      : Dropdown
   * WRAPPER
   * BANNER
   * SEARCH JOBS
      : Section
      : Article
   * ATTACHMENT UPLOAD
   * STEPS BAR
   * LOGIN AND SUCCESS
   * REGISTER
   * HELPER
   * ERROR MESSAGE
   ========================================================================== */

/* LOCAL IMAGES: Main banner
   -------------------------------------------------------------------------- */

.banner--main {
  background-image: var(--banner--background--image);
}

/* LOCAL IMAGES: Mobile menu
   -------------------------------------------------------------------------- */

a[class*="__trigger"] {
  background-image: var(--menu--icon--image);
}

/* LOCAL IMAGES: Dataset
   -------------------------------------------------------------------------- */

.removeDatasetRow {
  background-image: var(--dataset--icon--remove);
}

.addDatasetRow {
  background-image: var(--dataset--icon--add);
}

/* LOCAL IMAGES: File upload
   -------------------------------------------------------------------------- */

.fieldSpec.FileField .removeFile,
.fieldSpec.FileField .removeFile:link,
.fieldSpec.FileField .removeFile:visited,
.fieldSpec.FileField .removeFile:hover,
.fieldSpec.FileField .removeFile:active,
.fieldSpec.FileField .removeFile:focus {
  background-image: var(--file--icon--remove);
}

/* LOCAL IMAGES: Photo upload
   -------------------------------------------------------------------------- */

.fieldSpec.FileField
  div[id*="fileInputContainer_"]
  .photoInputPreviewWrapper
  .photoInputPreviewContainer.photoPreviewUnselected {
  background-image: var(--photo--upload--icon--user);
}

.fieldSpec.FileField .fileInputCancelButton,
.fieldSpec.FileField .fileInputCancelButton:link,
.fieldSpec.FileField .fileInputCancelButton:visited,
.fieldSpec.FileField .fileInputCancelButton:hover,
.fieldSpec.FileField .fileInputCancelButton:active,
.fieldSpec.FileField .fileInputCancelButton:focus {
  background-image: var(--photo--upload--icon--remove);
}

/* LOCAL IMAGES: Blocking login
   -------------------------------------------------------------------------- */

.body--login {
  background-image: var(--login__body--background--image);
}

/* INVERTING CLICKABLE COLORS: Nav
   -------------------------------------------------------------------------- */

/* TO BE DELETED - when library changes to 1.3 or 2
in lines 120, 129 and 153, fallback var(--color--clickeable) */

/* INVERTING CLICKABLE COLORS: Tabs
   -------------------------------------------------------------------------- */

/* INVERTING CLICKABLE COLORS: Switcher
   -------------------------------------------------------------------------- */

/* INVERTING CLICKABLE COLORS: Dropdown
   -------------------------------------------------------------------------- */

/* WRAPPER
   -------------------------------------------------------------------------- */

/* Media query to target only desktop */
@media all and (min-width: 1025px) {
  [class*="__wrapper"] {
    --content--w--full: calc(
      0.875 * var(--grid--columns--1) * var(--grid--columns--amount) +
        ((0.875 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap)
    );
  }
}

/* BANNER
   -------------------------------------------------------------------------- */

/* Media query to target only mobile */
@media all and (max-width: 750px) {
  .banner__wrapper {
    padding-right: 13rem;
  }
}

/* SEARCH JOBS
   -------------------------------------------------------------------------- */

/* Media query to target tablet and desktop */
@media all and (min-width: 751px) {
  .body--search-jobs .main {
    --main--background--color: var(--color--brand--sub-2);
  }

  .body--search-jobs
    h2.section__header__text__title.section__header__text__title--5 {
    text-align: center;
  }
}

/* SEARCH JOBS: Section
   -------------------------------------------------------------------------- */

/* Media query to target tablet and desktop */
@media all and (min-width: 751px) {
  .body--search-jobs .main__wrapper {
    --main--padding--bottom: 0;
  }

  .section--search-jobs .section__content__results {
    padding: var(--spacer--m) 0;
    border-bottom-width: 0.1rem;
    border-bottom-style: solid;
    border-bottom-color: var(--dividers--border--color);
  }
}

/* Media query to target only tablet */
@media all and (min-width: 751px) and (max-width: 1024px) {
  .section--search-jobs {
    border-radius: var(--boxes--border--radius) var(--boxes--border--radius) 0 0;
    background-color: var(--main--background--color);
    padding: var(--spacer--l) var(--spacer--l);
  }

  .section--search-jobs.section--collapsible-form-search .form--search {
    top: var(--spacer--l);
  }

  .section--search-jobs.section--collapsible-form-search
    .form--search
    .form__toggle {
    right: var(--spacer--l);
  }
}

/* Media query to target only desktop */
@media all and (min-width: 1025px) {
  .body--search-jobs .form--search {
    padding: var(--spacer--xl) var(--spacer--xxxl);
  }

  .section--search-jobs .section__header {
    display: none;
  }

  .section--search-jobs .section__header + .section__content {
    margin-top: 0;
  }

  .section--search-jobs .section__content + .section__content {
    border-radius: var(--boxes--border--radius) var(--boxes--border--radius) 0 0;
    background-color: var(--main--background--color);
    padding: var(--spacer--xl) var(--spacer--xxxl);
  }

  .section--search-jobs .section__content__results {
    border-top-width: 0.1rem;
    border-top-style: solid;
    border-top-color: var(--dividers--border--color);
  }
}

.section--search-jobs .section__content.padding {
  padding: 2.5rem 0;
}

/* SEARCH JOBS: Article
   -------------------------------------------------------------------------- */

.article--result + .article--result {
  margin-top: 1.2rem;
}

.article--result .article__header__text__title a {
  color: var(--color--clickeable);
}

.article--result .article__header__text__subtitle {
  margin-top: var(--spacer--xxs);
}

.article--result .article__header__actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Media query to target only mobile */
@media all and (max-width: 750px) {
  .article--result {
    border-radius: var(--boxes--border--radius);
    border-width: 0.1rem;
    border-style: solid;
    border-color: var(--boxes--border--color);
  }

  .article--result .article__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .article--result .article__header > * {
    width: 100%;
    padding-right: var(--boxes--padding--outers);
    padding-left: var(--boxes--padding--outers);
  }

  .article--result .article__header__text {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    min-height: var(--boxes__heading--height);
    padding: var(--boxes--padding--outers) var(--boxes--padding--outers);
  }

  .article--result .article__header__text__title {
    font-size: 1.8rem;
  }

  .article--result .article__header__text__subtitle {
    font-size: 1.4rem;
  }

  .article--result .article__header__actions {
    border-top-width: 0.1rem;
    border-top-style: solid;
    border-top-color: var(--boxes--border--color);
    padding-top: var(--boxes--padding--inners);
    padding-bottom: var(--boxes--padding--inners);
  }

  .article--result .article__header__actions > * + * {
    margin-left: var(--boxes--padding--inners);
  }

  .article--result .article__header__actions .button {
    display: block;
    min-height: 0;
    border-radius: 0;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-color: transparent;
    border-left-width: 0;
    background-color: transparent;
    padding: 0;
    font-size: 1.2rem;
    text-transform: uppercase;
    line-height: 1.4rem;
    color: var(--color--clickeable);
  }

  .article--result .article__header__actions .button:hover {
    background-color: transparent;
    border-bottom-color: var(--color--clickeable);
  }

  .article--result .social-share--open .social-share__popup {
    bottom: calc(100% + var(--spacer--s));
    left: calc(-1 * var(--spacer--xs));
  }
}

/* Media query to target tablet and desktop */
@media all and (min-width: 751px) {
  .article--result {
    padding-top: calc(var(--boxes--padding--inners) * 0.5);
    padding-bottom: calc(var(--boxes--padding--inners) * 0.5);
  }

  .article--result .article__header__actions > * + * {
    margin-left: var(--spacer--s);
  }
}

/* ATTACHMENT UPLOAD
   -------------------------------------------------------------------------- */

.article--attachments-upload {
  border-radius: var(--boxes--border--radius);
  border-width: 0.1rem;
  border-style: dashed;
  border-color: var(--boxes--border--color);
  background-color: var(--main--background--color);
  padding: var(--boxes--padding--outers) var(--boxes--padding--outers);
}

.article--attachments-upload .article__header {
  margin-bottom: var(--boxes--padding--outers);
  border-bottom-width: 0.1rem;
  border-bottom-style: solid;
  border-bottom-color: var(--dividers--border--color);
  padding-bottom: var(--boxes--padding--outers);
}

.article--attachments-upload .article__header .fv {
  vertical-align: middle;
}

/* STEPS BAR
   -------------------------------------------------------------------------- */

/* Media query to target tablet and desktop */
@media all and (min-width: 751px) {
  .list--steps .list__item__text__subtitle {
    margin-bottom: -0.6rem;
    width: 1.6rem;
    height: 1.6rem;
    text-indent: -999.9rem;
    overflow: hidden;
  }
}

/* LOGIN AND SUCCESS
   -------------------------------------------------------------------------- */

/* Media query to target only desktop */
@media all and (min-width: 1025px) {
  .grid--2--divider > .grid__item {
    max-width: none;
  }

  .grid--2--divider > .grid__item:nth-of-type(odd) {
    flex: 0 0
      calc(
        0.375 * var(--grid--columns--1) * var(--grid--columns--amount) +
          ((0.375 * var(--grid--columns--amount)) - 1) *
          var(--grid--columns--gap)
      );
  }

  .grid--2--divider > .grid__item:nth-of-type(even) {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }

  .grid--2--divider > .grid__item:nth-of-type(even) {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}

/* REGISTER
   -------------------------------------------------------------------------- */
.form select[multiple] option:checked {
  background-color: #cccccc;
  color: var(--color--font);
}

@media (min-width: 751px) {
  .body--register .Education .fieldSpec.form__item--even,
  .body--register .Education .fieldSpec.form__item--odd {
      width: 100%;
  }
}

/* ERROR MESSAGE - Register page
   -------------------------------------------------------------------------- */

  .duplicate-email--error {
    background-color: var(--main--background--color);
    font-size: large;
    padding: 0rem;
  }

  .has--duplicate .alert--error {
    display: none;
  }