:root {
  --clr-compl-1: #1a3a5c;
  --clr-compl-2: #3a1a5c;
  --clr-compl-3: #1a2e5c;
  --clr-compl-4: #1e5c3a;
  --clr-compl-5: #5c3a1a;
  --clr-compl-6: #5c1a2e;
  --clr-compl-7: #2e5c1a;
}
.wp-careernet-plugin {
  --cn-color--border: #ccc;

  .account-content {
    h2, h3 {
      margin-bottom: 1rem;
    }

    p {
      margin-bottom: 1rem;
    }

    .table-wrapper {
      margin: 1.077em -12px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      border-style: none;
    }

    .table-wrapper table {
      margin: 0;
    }

    th, td {
      text-align: left;
      vertical-align: top;
      padding: 0.154em 12px;
    }

    th + th,
    th + td,
    td + th,
    td + td {
      padding-left: 0;
    }

    th {
      font-weight: bold;
    }

    tbody th, tbody td {
      border-bottom: 1px solid #dcdcdc;
    }

    tbody tr:first-child th, tbody tr:first-child td {
      border-top: 1px solid #dcdcdc;
    }

    .nav li:before,
    .nav li a:before {
      content: none;
    }

    .hide {
      display: none !important;
    }

    .cn-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 20px;
      font-size: var(--fs-sm);
      font-weight: var(--fw-semibold);
      line-height: 1;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-cn-btn-primary);
      cursor: pointer;
      transition: var(--transition);
      white-space: nowrap;
      background-color: var(--color-cn-btn-primary);
      color: var(--color-text-inverse);

      &.cn-btn-danger {
        background-color: var(--color-cn-btn-danger);
        color: var(--color-text-inverse);
        border-color: var(--color-cn-btn-danger);
      }
    }

    .callout {
      background-color: var(--color-surface-muted);
      border: 1px solid hsla(0, 0%, 4%, 0.25);
      border-radius: 0;
      margin: 0 0 1rem;
      padding: 1rem;
      position: relative;

      &.success {
        background-color: #e1faea;
        color: #0a0a0a;
      }

      &.alert {
        border-color: var(--color-callout-border-danger);
        background-color: var(--color-callout-bg-danger);
      }
    }

    .cn-job-filter {
      label {
        padding: 0.231em 0 0.308em;
        display: block;
        float: left;
        width: 150px;
        margin-right: 6px;
      }

      .filters {
        display: flex;
        flex-wrap: wrap;

        > div {
          width: 50%;

          span {
            padding-left: .5em;
          }

          .select-all + span {
              font-weight: bold;
          }
        }
      }
    }

    .account-form {
      .table-wrapper+.buttons {
        margin-top: 1em;
      }
    }

    .frm-info {
      font-size: .95em;
    }

    .visuallyhidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
  }

  .cn-job-list {
    padding: 0;

    .hero {
      position: static;
      width: 100%;
      height: auto;
      margin: 0;
      padding: var(--space-16) 0 var(--space-8);
      overflow: visible;
      border: none;
      clip: auto;

      .display {
        font-size: var(--fs-4xl);
      }

      .lead {
        font-size: var(--fs-lg);
        line-height: var(--lh-normal);
        color: var(--color-text-muted);
        max-width: 60ch;
        margin: 0;
      }
    }

    .section {
      .container {
        --filters-width: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-10);
        width: 100%;

        @media (min-width: 961px) {
          --filters-width: 280px;
          flex-flow: row-reverse nowrap;
        }
      }

      .vacancies {
        flex: auto;
        display: block;
        width: 100%;

        header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--space-4);
          height: 2.25rem;
          margin-bottom: var(--space-5);

          .list-header {
            font-family: var(--font-sans);
            font-size: var(--fs-md);
            line-height: var(--lh-normal);
            letter-spacing: normal;
            color: var(--color-text-muted);

            em {
              font-weight: bolder;
              font-style: normal;
              color: var(--color-text);
            }
          }
        }

        .cn-list-pagination {
          .sep-dots {
            display: block;
            padding: .5em;
          }
        }
       }

      .filters {
        flex: none;
        width: var(--filters-width);

        form {
          display: flex;
          flex-flow: column nowrap;
          gap: var(--space-4);
        }

        .filters-header {
          appearance: none;
          font-family: var(--font-sans);
          font-size: var(--fs-xl);
          font-weight: var(--fw-semibold);
          font-style: normal;
          letter-spacing: normal;
          line-height: var(--lh-snug);
        }

        .properties {
          display: flex;
          flex-flow: column nowrap;
          gap: var(--space-4);

          @media (min-width: 620px) {
            display: grid;
            grid-template:
              'a1 a2'
              'b1 b2'
              'c1 c2'
              'c3 c2' / 1fr 1fr;
            flex-flow: column wrap;

            .vacfield {
              grid-area: a1;
            }

            .vacniveau {
              grid-area: c1;
            }

            .vaccategory {
              grid-area: b1;
            }

            .vacprovince {
              grid-area: a2;
            }

            .vacdienst {
              grid-area: b2;
            }

            .vacniv {
              grid-area: c2;
            }

            .vaclocation {
              grid-area: c3;
            }
          }

          @media (min-width: 961px) {
            display: flex;
          }
        }

        .filter-title {
          font-family: var(--font-sans);
          font-weight: var(--fw-semibold);
          font-size: var(--fs-sm);
          line-height: var(--lh-snug);
          margin-bottom: 1.125rem;
        }

        .options {
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-start;
          gap: var(--space-3);

          label {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            gap: .5rem;
            font-size: var(--fs-md);
            line-height: var(--lh-normal);
            cursor: pointer;

            input {
              accent-color: var(--color-accent);
              aspect-ratio: 1;
              width: 1rem;
              margin-top: .25rem;
              border-radius: 3px;
            }
          }
        }

        .buttons {
          display: flex;
          flex-flow: row wrap;
          gap: var(--space-4)  var(--space-3);

          .btn {
            flex: 1;
          }

          .btn-jobalert {
            flex: none;
            display: flex;
            width: 100%;
          }

          @media (min-width: 620px) and (max-width: 960px) {
            flex-flow: row nowrap;

            .btn-jobalert {
              flex: 1;
              width: auto;
              border-radius: var(--radius-md) !important;
            }
          }
        }
      }
    }

    .tag {
      flex: initial;
      display: flex;
      font-size: var(--fs-xxs);
      font-weight: var(--fw-semibold);
      line-height: 1;
      text-transform: uppercase;
      color: var(--color-text-muted);
      padding: 4px 10px;
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);

      &.tag-hi,
      &.tag-new {
        display: inline-flex;
        font-weight: var(--fw-bold);
        color: #fff;
        padding: 6px 11px 7px;
        border-radius: 3px;
      }

      &.tag-hi {
        background: var(--color-navy);
      }

      &.tag-new {
        background: var(--color-accent);
      }
    }
  }

  .cn-job-detail {
    .tag {
      flex: initial;
      font-size: var(--fs-xxs);
      font-weight: var(--fw-semibold);
      color: var(--color-text-muted);
      min-height: 0;
      padding: 4px 10px;
      border-radius: var(--radius-sm);
    }

    .btn-primary {
      &:where(span) {
        opacity: .5;
        cursor: default;
      }
    }

    .vd-body {
      article {
        &.vd-prose {
          > .vd-section {
            &:first-of-type {
              margin-top: 0;
              padding-top: 0;
              border-top: none;
            }
          }

          .vd-gallery {
            &:has(img:first-of-type:last-of-type) {
              grid-template-columns: repeat(1, 1fr);

              img {
                aspect-ratio: auto;
              }
            }
          }
        }
      }
    }

    .cta {
      padding: 0 0 var(--space-16);
      background-color: var(--color-cream);

      .container {
        > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 32px;
          padding: 28px 32px;
          box-sizing: border-box;
          background-color: var(--color-navy);
          border-radius: 16px;

          > div {
            flex: 1;
            min-width: 0;
          }

          strong {
            display: block;
            font-size: var(--fs-lg);
            font-weight: 600;
            color: #fff;
            margin-bottom: 4px;
          }

          p {
            font-size: var(--fs-sm);
            color: rgba(255, 255, 255, .65);
            margin: 0;
            line-height: 1.5;
          }

          .btn {
            flex-shrink: 0;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .tab-nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.05);

    ul {
      flex-direction: row;
      margin: 0 auto;
      padding: 0;
      width: 73em;
      list-style-type: none;

      li {
        border: none;
        float: left;
        display: inline-block;
        margin: 0;
        padding: 0;

        a {
          display: block;
          color: #3C3C3C;
          text-decoration: none;
          padding: 1.5em 1.5em 1em 1.5em;
          font-weight: 500;
          font-size: 1.05em;
          border-bottom: 4px solid transparent;

          &:hover,
          &.active {
            color: var(--color-accent);
            outline: none;
            border-bottom: 4px solid;
          }
        }
      }
    }

    .nav-link {
      display: block;
      padding: .5rem 1rem;
      color: #0d6efd;
      text-decoration: none;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
    }

  }

  .account-content {
    width: 100%;
    margin: 2em auto 2em auto;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.05);
    color: #3C3C3C;

    @media (min-width: 1096px) {
      width: 73.125em;
    }

    h1 {
      font-size: 1.675rem;
    }

    select {
      height: 3.5rem;
      border-radius: 5px;
      padding-left: 1em;
    }

    .property-select {
      padding-bottom: .5em;

      h5 {
        margin-top: 0.75em;
      }

      .checker {
        margin-top: 0.95em;
      }
    }

    .form-collection fieldset.cv-education,
    .form-collection fieldset.cv-experience {
      margin: 0;
      padding: 1em;

      input.year {
        max-width: 5em;
      }
    }

    label {
      color: #3C3C3C;

      input {
        margin-top: 0;
      }

      span {
        color: #999;
      }
    }

    .account-form {
      .name {
        display: flex;

        .first-name, .infix, .last-name {
          float: none;

          label {
            display: block;
          }
        }
      }
    }

    .filters {
      label {
        width: 100%;
      }
    }
  }
}

.cn-organization-list {
  .emp-feat-thumb,
  .emp-card-thumb {
    &.clr-1 {
      background-color: var(--clr-compl-1);
    }

    &.clr-2 {
      background-color: var(--clr-compl-2);
    }

    &.clr-3{
      background-color: var(--clr-compl-3);
    }

    &.clr-4 {
      background-color: var(--clr-compl-4);
    }

    &.clr-5 {
      background-color: var(--clr-compl-5);
    }

    &.clr-6 {
      background-color: var(--clr-compl-6);
    }

    &.clr-7 {
      background-color: var(--clr-compl-7);
    }

    &.is-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: var(--space-5);
      border-bottom: 1px solid var(--color-border);
    }
  }

  .emp-feat-contain-img,
  .emp-card-contain-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .emp-card {
    &[hidden] {
      display: none;
    }
  }

  .clear-char {
    font-size: var(--fs-xs);
    color: var(--color-accent);
    white-space: nowrap;
    min-width: 48px;
    margin-left: var(--space-2);

    &[hidden] {
      display: none;
    }
  }
}