/**
 * Yle Design System
 * v1.1.1
 */

:root #saamelaiskarajavaalit-2024 {
  --yds-color-background: #ffffff;
  --yds-color-background-variant: #f8f9fa;
  --yds-color-background-negative: #131415;
  --yds-color-background-control: rgba(0, 0, 0, 0.41);
  --yds-color-background-control-disabled: rgba(0, 0, 0, 0.15);
  --yds-color-background-dialog: #ffffff;
  --yds-color-background-dialog-overlay: rgba(0, 0, 0, 0.41);
  --yds-color-background-highlight: #e8e9eb;
  --yds-color-background-interactive: #f1f2f4;
  --yds-color-background-navigation: #ffffff;
  --yds-color-background-info-primary: #9fc8ee;
  --yds-color-background-info-secondary: #f1f2f4;
  --yds-color-background-success: #62f9c2;
  --yds-color-background-warning: #ffce8b;
  --yds-color-background-error: #f99fb5;
  --yds-color-background-input: #ffffff;
  --yds-color-text-default: #131415;
  --yds-color-text-negative: #f8f9fa;
  --yds-color-text-input-placeholder: #4a4f54;
  --yds-color-text-high-emphasis: rgba(0, 0, 0, 0.79);
  --yds-color-text-medium-emphasis: rgba(0, 0, 0, 0.7);
  --yds-color-text-disabled: rgba(0, 0, 0, 0.29);
  --yds-color-action-primary: #131415;
  --yds-color-action-primary-variant: rgba(0, 0, 0, 0.7);
  --yds-color-action-secondary: rgba(0, 0, 0, 0.05);
  --yds-color-action-secondary-variant: rgba(0, 0, 0, 0.09);
  --yds-color-action-disabled: rgba(0, 0, 0, 0.15);
  --yds-color-feedback-highlight: #009cb5;
  --yds-color-feedback-error: #d10b3d;
  --yds-color-feedback-warning: #f1722a;
  --yds-color-feedback-success: #058657;
  --yds-color-feedback-live: #e90e43;
  --yds-color-info-primary-background: #9fc8ee;
  --yds-color-border: #131415;
  --yds-color-border-disabled: rgba(0, 0, 0, 0.29);
  --yds-color-border-separator: #e8e9eb;
  --yds-color-border-primary-focus: #009cb5;
  --yds-color-border-secondary-focus: #131415;
  --yds-color-player-progress-bar: rgba(255, 255, 255, 0.3);
  --yds-color-player-progress-indicator: #29ccde;
  --yds-color-illustrative-icons-icon-primary: #131415;
  --yds-color-illustrative-icons-icon-secondary: #5ddbe9;
  --yds-color-spinner-default: #000000;
  --yds-color-spinner-negative: #ffffff;
  --yds-color-spinner-highlight-default: #009cb5;
  --yds-color-spinner-highlight-negative: #29ccde;
  --yds-color-spinner-background-default: #d8d9db;
  --yds-color-spinner-background-negative: #292b2d;
}

@font-face {
  font-family: 'Yle Next';
  src: url('https://design-system.cdn.yle.fi/fonts/yle-next/1.0.0/YleNextVar.woff2')
      format('woff2-variations'),
    url('https://design-system.cdn.yle.fi/fonts/yle-next/1.0.0/YleNextVar.woff')
      format('woff-variations');
  font-weight: 300 900;
  font-style: normal;
}

@font-face {
  font-family: 'Yle Next';
  src: url('https://design-system.cdn.yle.fi/fonts/yle-next/1.0.0/YleNextVar-Italic.woff2')
      format('woff2-variations'),
    url('https://design-system.cdn.yle.fi/fonts/yle-next/1.0.0/YleNextVar-Italic.woff')
      format('woff-variations');
  font-weight: 300 900;
  font-style: italic;
}

#saamelaiskarajavaalit-2024 *,
#saamelaiskarajavaalit-2024 *::before,
#saamelaiskarajavaalit-2024 *::after {
  box-sizing: border-box;
}

#saamelaiskarajavaalit-2024 * {
  margin: 0;
}

#saamelaiskarajavaalit-2024 {
  background-color: var(--yds-color-background-interactive);
  font-family: 'Yle Next';
}

#sk-content {
  -webkit-box-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 8px;

  @media screen and (min-width: 1024px) {
    row-gap: 24px;
  }
}

#saamelaiskarajavaalit-2024 button {
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

#saamelaiskarajavaalit-2024 header {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 155px;
  background-image: url(https://plus.yle.fi/2024-07-saamelaiskarajavaalit/img/saamelaiskarajavaalit_banner_xl.png);
}

#saamelaiskarajavaalit-2024 .sk-logo-container {
  position: absolute;
  width: calc(100vw - 32px);
  max-width: 1032px;
  margin-top: 50px;
}

#saamelaiskarajavaalit-2024 .sk-logo {
  background-size: contain;
  background-repeat: no-repeat;
  width: 135px; /* 564px */
  height: 60px; /* 250px */
  background-position: left;
  background-image: url(https://plus.yle.fi/2024-07-saamelaiskarajavaalit/img/saamelaiskarajavaalit_logo_vaaka_m.png);
}

@media screen and (min-width: 768px) {
  #saamelaiskarajavaalit-2024 header {
    height: 200px;
  }
  #saamelaiskarajavaalit-2024 .sk-logo-container {
    margin-top: 65px;
  }
  #saamelaiskarajavaalit-2024 .sk-logo {
    width: 169px;
    height: 75px;
  }
}

@media screen and (min-width: 1024px) {
  #saamelaiskarajavaalit-2024 header {
    height: 300px;
  }
  #saamelaiskarajavaalit-2024 .sk-logo-container {
    margin-top: 105px;
  }
  #saamelaiskarajavaalit-2024 .sk-logo {
    width: 248px;
    height: 110px;
  }
}

#saamelaiskarajavaalit-2024 nav {
  width: 100%;
  background-color: var(--yds-color-background);
  border-bottom: 1px solid var(--yds-color-border-separator);
}

#saamelaiskarajavaalit-2024 nav ul {
  display: flex;
  flex-direction: row;
  max-width: 680px;
  margin: 0 auto;
  padding: 0px;
  overflow-x: auto;
  list-style: none;
}

#saamelaiskarajavaalit-2024 nav button {
  display: flex;
  padding: 12px 24px;
  line-height: 150%;
  letter-spacing: 0px;
  white-space: nowrap;
  color: var(--yds-color-text-default);
  border-bottom: 4px solid transparent;
  font-size: 14px;
  font-family: 'Yle Next';
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  text-decoration: none;
}

#saamelaiskarajavaalit-2024 nav button:focus-visible {
  outline: black solid 2px;
  outline-offset: -2px;
}

#saamelaiskarajavaalit-2024 nav button.active {
  border-bottom: 4px solid var(--yds-color-border-primary-focus);
}

#saamelaiskarajavaalit-2024 .heading {
  background-color: var(--yds-color-background);
  padding: 32px 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#saamelaiskarajavaalit-2024 .heading h1 {
  color: var(--yds-color-text-default);
  font-size: 28px;
  font-family: 'Yle Next';
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  line-height: 130%;
  text-decoration: none;
  text-align: center;
}

#saamelaiskarajavaalit-2024 .banner {
  display: flex;
  width: 100%;
  max-width: 680px;
  column-gap: 12px;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
  background-color: var(--yds-color-info-primary-background);
  font-size: 14px;

  @media screen and (min-width: 768px) {
    font-size: 16px;
  }
}

#saamelaiskarajavaalit-2024 .banner:before {
  content: '';
  width: 24px;
  min-width: 24px;
  height: 24px;
  background-image: url(https://plus.yle.fi/2024-07-saamelaiskarajavaalit/img/icons/info.svg);
}

#saamelaiskarajavaalit-2024 .banner .title {
  font-weight: 700;
}

#saamelaiskarajavaalit-2024 .block {
  background-color: var(--yds-color-background);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  max-width: 680px;
  width: 100%;
}

#saamelaiskarajavaalit-2024 .block.description {
  padding: 16px;

  @media screen and (min-width: 1024px) {
    padding: 24px;
  }
}

#saamelaiskarajavaalit-2024 .block.description p + p {
  margin-top: 16px;
}

#saamelaiskarajavaalit-2024 .block h2 {
  color: var(--yds-color-text-default);
  font-size: 20px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  line-height: 140%;
  text-decoration: none;
  -webkit-box-align: center;
  align-items: center;
  background-color: transparent;
  border-bottom: 1px solid var(--yds-color-border-separator);
  border-radius: 4px 4px 0px 0px;
  display: flex;
  height: 60px;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 0px 16px;
  margin: 0px;

  @media screen and (min-width: 1024px) {
    padding: 0px 24px;
  }
}

#saamelaiskarajavaalit-2024 .block.stats-grid {
  display: flex;
  padding: 16px 0;
  row-gap: 16px;

  .row {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;

    &.disclaimer {
      flex-direction: column;
      gap: 12px;
      padding: 16px 16px 0 16px;
      border-top: 1px solid var(--yds-color-border-separator);
    }
  }
  .label {
    font-weight: 400;
  }
  .value {
    font-weight: 700;
  }

  @media screen and (min-width: 1024px) {
    padding: 24px 0;
    row-gap: 24px;

    .row {
      padding: 0 24px;

      &.disclaimer {
        padding: 24px 24px 0 24px;
      }
    }
  }
}

#saamelaiskarajavaalit-2024 .candidate-list {
  display: flex;
  flex-direction: column;
  margin: 16px;
  gap: 16px;
}

#saamelaiskarajavaalit-2024 .candidate-list .row {
  display: flex;
  column-gap: 16px;
  justify-content: center;
}

#saamelaiskarajavaalit-2024 .candidate-list .row + .row {
  border-top: 1px solid var(--yds-color-border-separator);
  padding-top: 16px;
}

#saamelaiskarajavaalit-2024 .candidate-list .info {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  width: 100%;
  max-width: 320px;
}

#saamelaiskarajavaalit-2024 .candidate-list .row .header {
  display: flex;
  justify-content: space-between;
  column-gap: 16px;
}

#saamelaiskarajavaalit-2024 .candidate-list .row .header h3 {
  font-size: 16px;
}

#saamelaiskarajavaalit-2024 .candidate-list .occupation {
  font-size: 12px;
}

#saamelaiskarajavaalit-2024 .candidate-list .result {
  display: flex;
  justify-content: space-between;
  column-gap: 16px;
  font-size: 12px;
  font-weight: 700;
}

#saamelaiskarajavaalit-2024 .candidate-list .result .status {
  display: flex;
  column-gap: 8px;
}

#saamelaiskarajavaalit-2024 .candidate-list .result .status:before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
}

#saamelaiskarajavaalit-2024 .candidate-list .result .new {
  color: var(--yds-color-feedback-highlight);
}

#saamelaiskarajavaalit-2024 .candidate-list .result .new:before {
  background-image: url(https://plus.yle.fi/2024-07-saamelaiskarajavaalit/img/icons/new.svg);
}

#saamelaiskarajavaalit-2024 .candidate-list .result .elected {
  color: var(--yds-color-feedback-success);
}

#saamelaiskarajavaalit-2024 .candidate-list .result .elected:before {
  background-image: url(https://plus.yle.fi/2024-07-saamelaiskarajavaalit/img/icons/elected.svg);
}

#saamelaiskarajavaalit-2024 .candidate-list .result .onSubstitutePlace {
  color: var(--yds-color-text-default);
}

#saamelaiskarajavaalit-2024 .candidate-list .result .onSubstitutePlace:before {
  background-image: url(https://plus.yle.fi/2024-07-saamelaiskarajavaalit/img/icons/on_substitute_place.svg);
}

#saamelaiskarajavaalit-2024 .candidate-list .result .notElected,
#saamelaiskarajavaalit-2024 .candidate-list .result .ineligible {
  color: var(--yds-color-text-default);
}

#saamelaiskarajavaalit-2024 .candidate-list .result .notElected:before,
#saamelaiskarajavaalit-2024 .candidate-list .result .ineligible:before {
  background-image: url(https://plus.yle.fi/2024-07-saamelaiskarajavaalit/img/icons/not_elected.svg);
}

#saamelaiskarajavaalit-2024 .candidate-list .row .municipality {
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  line-height: 150%;
  text-decoration: none;
  -webkit-box-align: center;
  align-items: center;
  background-color: var(--yds-color-background-interactive);
  border-radius: 4px;
  color: var(--yds-color-text-default);
  display: inline-flex;
  height: 20px;
  min-width: 2em;
  padding: 0px 8px;
}

#saamelaiskarajavaalit-2024 .candidate-list .row img {
  width: 48px;
  height: 65px;
  border-radius: 4px;
}

#saamelaiskarajavaalit-2024 .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#saamelaiskarajavaalit-2024 .visualization-image {
  width: 100%;
  height: auto;

  @media screen and (min-width: 768px) {
    width: 65%;
  }
}

#saamelaiskarajavaalit-2024 .candidate-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  width: 48px;
  height: 65px;

  img {
    opacity: 0;
  }
}

#saamelaiskarajavaalit-2024 .candidate-image-placeholder {
  border-radius: var(--yds-border-radius-medium);
  color: var(--yds-color-gray-50);
  position: absolute;
}

#saamelaiskarajavaalit-2024 .candidate-image-container img {
  position: absolute;
}

#sk-footer {
  align-items: center;
  background-color: var(--yds-color-background-variant);
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 64px 16px;
  width: 100%;
}