/* V1.3 */

@font-face {
    font-family: "Altis";
    src: 	 url("fonts/AltisWeb-Regular.eot");
    src: 	 url("fonts/AltisWeb-Regular.eot?#iefix") format("embedded-opentype"),
        url("fonts/AltisWeb-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Altis";
    src: 	 url("fonts/AltisWeb-RegularItalic.eot");
    src: 	 url("fonts/AltisWeb-RegularItalic.eot?#iefix") format("embedded-opentype"),
        url("fonts/AltisWeb-RegularItalic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Altis";
    src: 	 url("fonts/AltisWeb-Medium.eot");
    src: 	 url("fonts/AltisWeb-Medium.eot?#iefix") format("embedded-opentype"),
        url("fonts/AltisWeb-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Altis";
    src: 	 url("fonts/AltisWeb-Bold.eot");
    src: 	 url("fonts/AltisWeb-Bold.eot?#iefix") format("embedded-opentype"),
        url("fonts/AltisWeb-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Altis";
    src: 	 url("fonts/AltisWeb-ExtraBold.eot");
    src: 	 url("fonts/AltisWeb-ExtraBold.eot?#iefix") format("embedded-opentype"),
        url("fonts/AltisWeb-ExtraBold.woff") format("woff");
    font-weight: 900;
    font-style: normal;
}


:root {
    --tummansininen: #002395;
    --tummansininen-2: #0c4a8e;
    --vaaleansininen: #00a0e0;
    --vaaleansininen-50: #74b2d6;
    --vaaleansininen-25: #d3e5ee;
    --vaaleansininen-kontrasti-1: #009DDB;
    --vaaleansininen-kontrasti-2: #005F85;
    --purppura: #b52358;
    --musta: #222222;
    --harmaa: #949494;
    --vaaleanharmaa: #eeeeee;
    --taustaväri: #e6f5fc;
    --grid-color: #7e9299;
    --column-width: clamp(calc(58vw + 12px), calc(58rem + 12px), calc(100vw - 4rem + 12px));
    --column-padding-right: clamp(2rem, calc(50vw - var(--column-width) / 2 + 6px), calc(50vw - var(--column-width) / 2 + 6px));
    --column-padding-left:  clamp(2rem, calc(50vw - var(--column-width) / 2 + 6px), calc(50vw - var(--column-width) / 2 + 6px));
    --chart-content-height: 14rem;
    --chart-vertical-padding: 10px;
    --chart-horizontal-padding: 10px;
    --horizontal-bar-chart-spacing: 0.667;
    --vertical-axis-width-wide:   clamp(7.8em, 30%, 15em);
    --vertical-axis-width-narrow: clamp(3em, 13%, 4.5em);
    --transition-length: 0;
}

html {
    overflow-x: hidden;
    overscroll-behavior: none;
    font-size: 100%;
}

body.oajd {
    margin: 0;
    background-color: var(--taustaväri);
    overscroll-behavior: none;
    color: var(--musta);
    font-size: 100%;
}

body.oajd * {
    font-family: Altis, sans-serif;
    font-size: 14pt;
}

body.oajd a {
    color: var(--tummansininen);
    text-decoration: none;
}

body.oajd a:hover {
    text-decoration: underline;
}

body.oajd > header {
    position: sticky;
    top: 5px;
    z-index: 9;
    width: var(--column-padding-left);
}

body.oajd > header #site-logo {
    width: 18vw;
    margin-top: 2vw;
    transition: width var(--transition-length), top var(--transition-length);
}

body.oajd > main #mobile-site-logo {
    display: none;
}

body.oajd.scrolled > header #site-logo {
    width: 12vw;
    margin-top: -0.4vw;
    transition: width var(--transition-length), margin-top var(--transition-length);
}

body.oajd > div#back-to-top {
    position: fixed;
    bottom: 1em;
    right: 2em;
    padding: 0 0.3em;
    opacity: 0;
    transition: opacity var(--transition-length);
}

body.oajd > div#back-to-top > a {
    color: black;
    font-size: 0.8em !important;
}

body.oajd.scrolled > div#back-to-top {
    opacity: 1;
}

body.oajd h1 {
    max-width: var(--column-width);
    margin: 1em auto;
    font-size: 3em;
    line-height: 1.1em;
}

body.oajd > main {
    display: flex;
    flex-direction: column;
}

body.oajd > main > section {
    width: var(--column-width);
    margin: 0 auto;
}
body.oajd > main > section:is(#intro-text, #anchor-links) {
    background-color: white;
    padding: 0 var(--column-padding-right) 2em var(--column-padding-left);
} 

body.oajd > main > section#intro-text {
    font-size: 1.2em;
    line-height: 1.8em;
    margin-top: -9em;
    padding-top: 9em;
}

body.oajd > main > section#intro-text > p {
    font-size: 1em;
    line-height: 1.8em;
}

body.oajd > main > section#intro-text > p.small {
    font-size: 0.71em;
    font-style: italic;
    line-height: 2em;
}

body.oajd > main > section#anchor-links {
    background-color: white;
}

body.oajd > main > section#anchor-links > ul {
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;
}

body.oajd > main > section#anchor-links > ul > li {
    display: inline-block;
    padding: 0.25em 0.5em;
    font-size: 1em;
    background-color: var(--taustaväri);
    border: 1px solid var(--vaaleansininen-kontrasti-2);
    color: var(--musta);
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}

body.oajd > main > section#anchor-links > ul > li:hover {
    background-color: var(--vaaleansininen);
}

body.oajd > main > section#anchor-links > ul > li {
    margin-right: 0.6em;
    margin-bottom: 0.6em
}

body.oajd > main > section#anchor-links > ul > li > a {
    color: black;
    font-size: 0.85em;
    letter-spacing: 0.01em;
}

body.oajd > main > section#anchor-links > ul > li:hover > a {
    color: white;
}

body.oajd > main > section#anchor-links > ul > li > a:hover {
    text-decoration: none;
}

body.oajd > main > section#oajd-data > section:is(.oajd-content-group, .oajd-content) {
    width: var(--column-width);
    align-items: flex-start;
}

body.oajd > main > section#oajd-data > section:is(.oajd-content-group, .oajd-content) {
    margin-right: 1rem;
}

body.oajd > main > section#oajd-data > section.oajd-content-group > .oajd-content:not(:has(.oajd-map-wrapper)) {
    width: calc(var(--column-width) / 2 - 1rem);
}

body.oajd > main > section#oajd-data section:is(.oajd-content-group, .oajd-content) {
    margin: 0 auto;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
}

body.oajd > main > section#oajd-data section.oajd-content.oajd-compact {
    margin: -1em 0 0 0;
    display: inline-block;
}

body.oajd > main > section#oajd-data section:is(.oajd-content-group) {
    margin-bottom: 8em;
}

body.oajd > main > section#oajd-data section:is(.oajd-content):has(p.oajd-chart-extra-info) {
    flex-direction: column;
}

body.oajd > main > section#oajd-data section:is(.oajd-content) > p.oajd-chart-extra-info {
    font-size: 0.875em;
}

body.oajd > main > section#oajd-data {
    width: clamp(var(--column-width), calc(100vw - 10rem), calc(2 * var(--column-width))) !important;
    margin: 5em auto 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

body.oajd > main div.oajd-map-wrapper > svg#map {
    max-height: calc(100vh - 10vw) !important;
}

body.oajd > main h2 {
    font-size: 2.2em;
    color: var(--tummansininen);
    width: var(--column-width);
    margin: 0 auto 0 auto;
}

body.oajd > main h3 {
    font-size: 1.5em;
    display: inline-block;
    width: 100%;
    flex: 0 0 100%;
    margin: 2em 0 1em 0;
}

body.oajd > main > section#oajd-data > section.oajd-content-group :not(.map-texts) > h3 {
    font-size: 1.3em;
}

div.oajd-map-wrapper {
    width: clamp(calc(var(--column-width) / 2.5), 30vw, var(--column-width));
    max-height: calc(100vh - 10vw);
    flex: 3;
    margin-bottom: 1em;
}

div.oajd-chart-wrapper {
    width: clamp(calc(var(--column-width) / 2.5), 30vw, var(--column-width));
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 1em 1em 0;
    flex: 3;
}

body.oajd > main section.oajd-content-group > p {
    margin: 1em 0 0 0;
}

body.oajd > main section.oajd-content > div.map-texts,
body.oajd > main section.oajd-content > p {
    display: inline-block;
    margin-top: 5px;
    flex: 2;
}

body.oajd > footer {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    color: white;
    padding: 1em var(--column-padding-left) 4.5em var(--column-padding-right);
    background-color: var(--tummansininen);
}

body.oajd > footer > div {
    margin: 0.5em 0 0 4em;
    font-size: 0.85em !important;
}

body.oajd > footer > div > p {
    line-height: 1.5em;
}

body.oajd > footer > div > p > a {
    color: rgba(220, 220, 255, 0.85) !important;
}

body.oajd > footer > div > p.cta > a {
    display: inline-block;
    margin-top: 0.6em;
    font-weight: bold;
    font-size: 1.15em;
    letter-spacing: 0.02em;
    color: white !important;
    text-decoration: underline !important;
}

body.oajd > footer > div > p.cta > a:hover {
    text-decoration: none !important;
}


/* Map */
body.oajd > main section.oajd-content > div.map-texts > table.oajd-map-legend {
    border-spacing: 0;
}

body.oajd > main section.oajd-content > div.map-texts > table.oajd-map-legend td {
    font-size: 0.9em;
}

body.oajd > main section.oajd-content > div.map-texts > table.oajd-map-legend td.oajd-swatch {
    width: 21pt;
    height: 21pt;
}

body.oajd > main section.oajd-content > div.map-texts > table.oajd-map-legend td.oajd-swatch-label {
    padding-left: 0.5em
}

body.oajd > main section.oajd-content > div.map-texts button.oajd-map-zoom {
    color: black;
    background-color: var(--vaaleanharmaa);
    border: 0.5px solid black;
    font-size: 0.9em;
    margin-top: 1.5em;
    padding: 0.25em 0.5em;
    cursor: pointer;
}


/* Charts */
div.oajd-chart-wrapper * {
    box-sizing: border-box;
}

div.oajd-chart-wrapper > div.oajd-above {
    width: 100%;
    display: none;
}

div.oajd-chart-wrapper > div.oajd-above > h4.oajd-chart-headline {
    display: inline-block;
    font-size: 1.5em;
    height: 3.9em;
    margin: 2em 0 0 0;
}

div.oajd-chart-wrapper:is(.oajd-horizontal-bar) > div.oajd-left {
    height: var(--chart-content-height);
    max-height: var(--chart-content-height);
    min-height: var(--chart-content-height);
    width: var(--vertical-axis-width-wide);
}

div.oajd-chart-wrapper:is(.oajd-vertical-bar, .oajd-line, .oajd-area) > div.oajd-left {
    height: var(--chart-content-height);
    max-height: var(--chart-content-height);
    min-height: var(--chart-content-height);
    width: var(--vertical-axis-width-narrow);
}

div.oajd-chart-wrapper:is(.oajd-vertical-bar, .oajd-line, .oajd-area).no-value-axis > div.oajd-left {
    width: 0;
}

div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels {
    height: calc(100% - 10px);
    margin-top: 7px;
    display: flex;
    flex-direction: column;
}

div.oajd-chart-wrapper:is(.oajd-line) > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels {
    justify-content: space-between;
}

div.oajd-chart-wrapper:is(.oajd-line) > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels { margin-top: 0; height: calc(100% - 5px); }

div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label {
    display: table;
    width: 100%;
}

div.oajd-chart-wrapper:is(.oajd-horizontal-bar) > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label {
    flex-grow: 1;
}

div.oajd-chart-wrapper > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels {
    width: calc(97% - var(--vertical-axis-width-narrow) + 8% - var(--chart-horizontal-padding) - 5px);
    margin-left: calc(var(--vertical-axis-width-narrow) - 8% + var(--chart-horizontal-padding) + 12.5px);
    display: flex;
    flex-direction: row;
    margin-top: 0.75em;
    justify-content: space-between;
}

div.oajd-chart-wrapper.oajd-horizontal-bar > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels {
    width: calc(97% - var(--vertical-axis-width-wide) + 16% - var(--chart-horizontal-padding) - 5px);
    margin-left: calc(var(--vertical-axis-width-wide) - 12% + var(--chart-horizontal-padding) + 12.5px);
}

div.oajd-chart-wrapper.oajd-horizontal-bar > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels.oajd-axis-label-3-steps { 
    width: calc(97% - var(--vertical-axis-width-wide) + 16% - var(--chart-horizontal-padding) - 5px);
    margin-left: calc(var(--vertical-axis-width-wide) - 12% + var(--chart-horizontal-padding) + 12.5px);
}

div.oajd-chart-wrapper.oajd-horizontal-bar > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels.oajd-axis-label-4-steps { 
    width: calc(97% - var(--vertical-axis-width-wide) + 16% - var(--chart-horizontal-padding) - 5px);
    margin-left: calc(var(--vertical-axis-width-wide) - 12% + var(--chart-horizontal-padding) + 12.5px);
}

div.oajd-chart-wrapper.oajd-horizontal-bar > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels.oajd-axis-label-5-steps { 
    width: calc(97% - var(--vertical-axis-width-wide) + 16% - var(--chart-horizontal-padding) - 5px);
    margin-left: calc(var(--vertical-axis-width-wide) - 12% + var(--chart-horizontal-padding) + 12.5px);
}

div.oajd-chart-wrapper.oajd-horizontal-bar > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels.oajd-axis-label-6-steps { 
    width: calc(97% - var(--vertical-axis-width-wide) + 16% - var(--chart-horizontal-padding) - 5px);
    margin-left: calc(var(--vertical-axis-width-wide) - 12% + var(--chart-horizontal-padding) + 12.5px);
}

div.oajd-chart-wrapper.oajd-horizontal-bar > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels.oajd-axis-label-7-steps { 
    width: calc(97% - var(--vertical-axis-width-wide) + 16% - var(--chart-horizontal-padding) - 5px);
    margin-left: calc(var(--vertical-axis-width-wide) - 12% + var(--chart-horizontal-padding) + 12.5px);
}

div.oajd-chart-wrapper.oajd-horizontal-bar > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels.oajd-axis-label-8-steps { 
    width: calc(97% - var(--vertical-axis-width-wide) + 16% - var(--chart-horizontal-padding) - 5px);
    margin-left: calc(var(--vertical-axis-width-wide) - 12% + var(--chart-horizontal-padding) + 12.5px);
}

div.oajd-chart-wrapper.oajd-horizontal-bar > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels.oajd-axis-label-9-steps { 
    width: calc(97% - var(--vertical-axis-width-wide) + 16% - var(--chart-horizontal-padding) - 5px);
    margin-left: calc(var(--vertical-axis-width-wide) - 12% + var(--chart-horizontal-padding) + 12.5px);
}

div.oajd-chart-wrapper > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels > div.oajd-label {
    width: 3.1em;
    padding: 0;
}

div.oajd-chart-wrapper.oajd-line > div.oajd-below > div.oajd-chart-supplementary-texts,
div.oajd-chart-wrapper:is(.oajd-big-number, .oajd-big-number-ownership) > div.oajd-chart-supplementary-texts,
div.oajd-chart-wrapper.oajd-plain-list > div.oajd-source {
    margin-top: 0.5em;
}

body.oajd > main section.oajd-content > div.map-texts > h3 + p {
    margin-top: -1em;
}

body.oajd > main section.oajd-content > div.map-texts > div.oajd-source {
    margin-top: 2em;
    max-width: 17em;
}

div.oajd-chart-wrapper.oajd-plain-list > div.oajd-source {
    margin-top: 1em;
}

div.oajd-chart-wrapper > div.oajd-below > div.oajd-chart-supplementary-texts > div,
div.oajd-chart-wrapper:is(.oajd-big-number, .oajd-big-number-ownership) > div.oajd-chart-supplementary-texts > div,
div.oajd-chart-wrapper.oajd-plain-list > div.oajd-source,
body.oajd > main section.oajd-content > div.map-texts > div.oajd-source,
body.oajd > main section.oajd-content div.oajd-source-mobile {
    line-height: 0.8em;
    margin-top: 0.8em;
}

div.oajd-chart-wrapper > div.oajd-below > div.oajd-chart-supplementary-texts > div > span,
div.oajd-chart-wrapper:is(.oajd-big-number, .oajd-big-number-ownership) > div.oajd-chart-supplementary-texts > div > span,
div.oajd-chart-wrapper.oajd-plain-list > div.oajd-source > span,
body.oajd > main section.oajd-content > div.map-texts > div.oajd-source > span,
body.oajd > main section.oajd-content div.oajd-source-mobile > span {
    font-size: 0.75em;
}

div.oajd-chart-wrapper > div.oajd-below > div.oajd-chart-supplementary-texts > div.oajd-source > span.source-before,
div.oajd-chart-wrapper:is(.oajd-big-number, .oajd-big-number-ownership) > div.oajd-chart-supplementary-texts > div.oajd-source > span.source-before,
div.oajd-chart-wrapper.oajd-plain-list > div.oajd-source > span.source-before,
body.oajd > main section.oajd-content > div.map-texts > div.oajd-source > span.source-before,
body.oajd > main section.oajd-content div.oajd-source-mobile > span.source-before {
    font-weight: bold;
}

body.oajd > main section.oajd-content div.oajd-source-mobile {
    display: none;
}

div.oajd-chart-wrapper > div.oajd-chart-supplementary-texts > div.oajd-comment {
    margin: -0.5em 0 0.25em 0;
}

div.oajd-chart-wrapper:is(.oajd-big-number-ownership) > table.oajd-big-number-table {
    margin-bottom: 10px;
}
div.oajd-chart-wrapper:is(.oajd-big-number-ownership) > table.oajd-big-number-table td {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: -6px -2px;
}
div.oajd-chart-wrapper:is(.oajd-big-number-ownership) > table.oajd-big-number-table span {
    margin-right: 10pt;
}

div.oajd-chart-wrapper:is(.oajd-big-number-ownership) > table.oajd-big-number-table span.percent-sign {
    margin-left: -6px;
}

div.oajd-chart-wrapper:is(.oajd-big-number-ownership) > table.oajd-big-number-table span:is(.target, .value) {
    text-align: left;
}

div.oajd-chart-wrapper:is(.oajd-big-number-ownership) > table.oajd-big-number-table span:is(.verb, .extra-info) {
    display: inline-block;
    font-size: 10pt;
    max-width: 155px;
}

div.oajd-chart-wrapper:is(.oajd-big-number-ownership) > table.oajd-big-number-table span:is(.extra-info) {
    margin-left: 20pt;
}

div.oajd-chart-wrapper:is(.oajd-big-number-ownership) > table.oajd-big-number-table span.verb.no-verb {
    display: none;
}

div.oajd-chart-wrapper.oajd-plain-list {
    display: inline-block;
    padding-top: 0.5em;
}

div.oajd-chart-wrapper.oajd-plain-list span.oajd-lead-text {
    font-weight: bold;
}

div.oajd-chart-wrapper.oajd-plain-list > ul {
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;
}

div.oajd-chart-wrapper.oajd-plain-list > ul > li {
    display: inline;
    color: rgba(0, 17, 75, 0.6);
}

div.oajd-chart-wrapper.oajd-plain-list > ul > li:not(:last-child)::after {
    content: ", ";
  }


/* Horizontal bar chart label spacing based on number of bars */
/*
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(2) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 1 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(3) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 2 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(4) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 3 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(5) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 4 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(6) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 5 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(7) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 6 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(8) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 7 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(9) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 8 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(10) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 9 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(11) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 10 + 1)); }
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-child:nth-last-child(12) ~ div.oajd-label { padding-top: calc(100% / ((1 + var(--horizontal-bar-chart-spacing)) * 11 + 1)); }
*/
/*
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:first-of-type {
    padding-top: 0;
}
*/
 
div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label > div {
    display: table-cell;
    vertical-align: middle;
    padding-right: 0.5em;
    line-height: 1.2em;
}

div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label > div > span.oajd-label-extra-info {
    display: inline-block;
    margin-top: 0.3em;
    font-size: 0.75em;
}

div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label.oajd-axis-label > div {
    font-size: 0.8em;
    text-align: right;    
}

div.oajd-chart-wrapper > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels > div.oajd-label.oajd-axis-label > div {
    font-size: 0.8em;
    text-align: center;
}

div.oajd-chart-wrapper div.oajd-label.oajd-axis-label > div > div.oajd-axis-label-extra {
    font-size: 0.75em;
    margin-top: -3px;
}

div.oajd-chart-wrapper > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label:is(.oajd-individual-municipality, .oajd-individual-1, .oajd-individual-2, .oajd-individual-3),
div.oajd-chart-wrapper:is(#taiteen-perusopetus, #tk-toiminta) > div.oajd-left > div.oajd-chart-vertical-axis-grid-labels > div.oajd-label.oajd-region {
    font-weight: bold;
}

div.oajd-chart-wrapper > div.oajd-right {
    display: none;
    height: var(--chart-content-height);
    max-height: var(--chart-content-height);
    min-height: var(--chart-content-height);
}

div.oajd-chart-wrapper:is(.oajd-horizontal-bar) > svg.oajd-chart-graphic {
    height: var(--chart-content-height);
    width: calc(100% - var(--vertical-axis-width-wide));
}

div.oajd-chart-wrapper:is(.oajd-vertical-bar, .oajd-line, .oajd-area) > svg.oajd-chart-graphic {
    height: var(--chart-content-height);
    width: calc(100% - var(--vertical-axis-width-narrow));
}

div.oajd-chart-wrapper:is(.oajd-vertical-bar, .oajd-line, .oajd-area).oajd-no-value-axis > svg.oajd-chart-graphic {
    width: 100%;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic line.oajd-chart-gridline {
    stroke: var(--grid-color);
    stroke-width: 0.5;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic line.oajd-chart-baseline {
    stroke: var(--musta);
    stroke-width: 1.5;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-bar {
    fill: var(--vaaleansininen-50);
    stroke: var(--tummansininen-2);
    stroke-width: 0.75;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-bar:is(.oajd-individual-municipality, .oajd-individual-1, .oajd-individual-2, .oajd-individual-3),
div.oajd-chart-wrapper:is(#taiteen-perusopetus, #tk-toiminta) > svg.oajd-chart-graphic rect.oajd-bar.oajd-region {
    fill: var(--tummansininen-2);
    stroke: var(--tummansininen-2);
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-bar.oajd-national {
    fill: white;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-bar.oajd-second-series {
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-bar:is(.oajd-individual-municipality, .oajd-individual-1, .oajd-individual-2, .oajd-individual-3).oajd-second-series,
div.oajd-chart-wrapper:is(#taiteen-perusopetus, #tk-toiminta) > svg.oajd-chart-graphic rect.oajd-bar.oajd-region.oajd-second-series {
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-bar.oajd-national.oajd-second-series {
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-bar.oajd-percentage-no {
    fill: var(--taustaväri);
    stroke: var(--tummansininen-2);
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic polyline.oajd-line {
    stroke: var(--tummansininen-2);
    fill: none;
    stroke-width: 0.75;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic circle:is(.oajd-line-marker, .oajd-legend-marker) {
    stroke: var(--tummansininen-2);
    fill: var(--vaaleansininen);
    stroke-width: 0.25;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic polyline.oajd-line:is(.oajd-individual-municipality, .oajd-individual-1, .oajd-individual-2, .oajd-individual-3) {
    stroke: var(--tummansininen);
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic circle:is(.oajd-line-marker, .oajd-legend-marker):is(.oajd-individual-municipality, .oajd-individual-1, .oajd-individual-2, .oajd-individual-3) {
    fill: var(--tummansininen);
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic circle:is(.oajd-line-marker, .oajd-legend-marker).oajd-national {
    fill: white;
    stroke-width: 0.75px;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic g.oajd-legend-entry text {
    font-size: calc(0.85 * 8px);
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-legend-bg-box {
    fill: var(--taustaväri);
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-chart-forecast-range-shading {
    fill: white;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic text.oajd-label {
    fill: black;
    font-size: 1.2em;
    transform: translate(0, 0.33em);
    font-variant-numeric: tabular-nums;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic text.oajd-label.oajd-category-label {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


div.oajd-chart-wrapper > svg.oajd-chart-graphic text.oajd-label:is(.oajd-individual-municipality, .oajd-individual-1, .oajd-individual-2, .oajd-individual-3),
div.oajd-chart-wrapper:is(#taiteen-perusopetus, #tk-toiminta) > svg.oajd-chart-graphic text.oajd-label.oajd-region {
    fill: white;
}

div.oajd-chart-wrapper > div.oajd-below {
    width: 100%;
}

rect.oajd-chart-bg {
    fill: transparent;
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic .oajd-empty {
    visibility: hidden;
}

/* Big numbers */

div.oajd-chart-wrapper > table.oajd-big-number-table {
    width: 100%;
    height: 100%;
    margin-top: -0.9em;
}

div.oajd-chart-wrapper > table.oajd-big-number-table > tbody > tr > td:is(.oajd-main-number, .oajd-second-number, .oajd-third-number) {
    font-size: 2.4em;
}

div.oajd-chart-wrapper.oajd-big-number-ownership  > table.oajd-big-number-table td > span.target {
    font-weight: bold;
}

div.oajd-chart-wrapper.oajd-big-number-ownership  > table.oajd-big-number-table td span:is(.number, .target, .percent-sign) {
    color: var(--tummansininen);
}

div.oajd-chart-wrapper.oajd-big-number > table.oajd-big-number-table td {
    text-align: center;
}

div.oajd-chart-wrapper.oajd-big-number > table.oajd-big-number-table > tbody > tr > td:is(.oajd-main-number) {
    font-size: 5em;
}

div.oajd-chart-wrapper.oajd-big-number > table.oajd-big-number-table > tbody > tr > td:is(.oajd-main-number) > span {
    color: var(--tummansininen);
}

div.oajd-chart-wrapper.oajd-big-number#kiusaaminen > table.oajd-big-number-table > tbody > tr > td:is(.oajd-main-number) > span {
    color: var(--purppura);
}

div.oajd-chart-wrapper > table.oajd-big-number-table > tbody > tr > td > span.number {
    font-size: 100% !important;
    font-weight: 900;
}
div.oajd-chart-wrapper > table.oajd-big-number-table > tbody > tr > td > span.percent-sign {
    display: inline-block;
    font-size: 80% !important;
    font-weight: 400 !important;
    margin-left: 0.2em;
    margin-right: -0.5em;
}

div.oajd-chart-wrapper > table.oajd-big-number-table > tbody > tr > td > span.percent-sign.has-comment::after {
    content: "*";
    color: black;
    font-size: 80% !important;
    font-weight: 400 !important;
}

div.oajd-chart-wrapper > table.oajd-big-number-table .oajd-number-headline {
    font-size: 0.8em;
}


/* Dropdown menus */

section#municipality-selection {
    position: sticky;
    top: 0;
    display: flex;
    align-items: baseline;
    background-color: white;
    padding: 1.5em var(--column-padding-left) 1.5em var(--column-padding-right);
    border-bottom: 0.5px solid var(--harmaa);
}

section#language-selection {
    margin-top: calc(-9em + 90px);
    display: flex;
    align-items: baseline;
}

#oajd-municipality-selection-dropdown, 
#oajd-language-selection-dropdown  {
    position: relative;
    display: inline-block;
    margin-left: 0.5em;
}

#oajd-municipality-selection-dropdown button.oajd-menu-button {
    position: absolute;
    margin-top: -1.5em;
    width: 14em;
}

#oajd-language-selection-dropdown button.oajd-menu-button::before {
    content: url("images/chevron-down-solid.svg");
    display: inline-block;
    width: 1rem;
    margin: 0 0.75rem 0 -10px;
    transform: rotate(0deg);
    transition: transform .3s ease-in-out;
}

#oajd-language-selection-dropdown button.oajd-menu-button.selected::before {
    transform: rotate(180deg);
}

#oajd-language-selection-dropdown button.oajd-menu-button {
    border: none;
    margin-left: -10px;
}

#oajd-municipality-selection-dropdown button.oajd-menu-button,
#oajd-language-selection-dropdown button.oajd-menu-button,
#oajd-municipality-selection-dropdown input#oajd-dropdown-search {
    background-color: white;
    color: var(--musta);
    padding: 0.5em 0.7em;
    font-size: 1em;
    cursor: pointer;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
}

#oajd-municipality-selection-dropdown button.oajd-menu-button,
#oajd-municipality-selection-dropdown input#oajd-dropdown-search {
    border: 1px solid var(--harmaa);
}

#oajd-municipality-selection-dropdown input#oajd-dropdown-search {
    margin: -1px 0 0 -1px;
    width: calc(12.6em - 2px);
}
  
#oajd-municipality-selection-dropdown input#oajd-dropdown-search:focus {
    outline: 3px solid #ddd;
}
  
#oajd-municipality-selection-dropdown .oajd-dropdown-content,
#oajd-language-selection-dropdown .oajd-dropdown-content {
    display: none;
    position: absolute;
    font-size: 1em;
    cursor: pointer;
    text-align: left;
    padding: 0;
}

#oajd-municipality-selection-dropdown .oajd-dropdown-content {
    margin-top: -1.4em;
    border: 1px solid var(--harmaa);
    background-color: white;
    width: calc(14em - 2px);
}

#oajd-language-selection-dropdown .oajd-dropdown-content {
    margin-top: -0.5em;
    margin-left: 0.5em;
}

#oajd-municipality-selection-dropdown ul,
#oajd-language-selection-dropdown ul {
    list-style-type: none;
    margin: 0.25em 0;
    padding: 0;
    max-height: 15.8em;
    overflow-y: scroll;
    overflow-x: hidden;
}

#oajd-municipality-selection-dropdown li {
    padding: 0.25em 0 0.25em 0.7em;
}

#oajd-language-selection-dropdown li {
    padding: 0.05em 0.7em 0 0.75em;
    border-radius: 0.75em;
}

#oajd-municipality-selection-dropdown li:hover,
#oajd-language-selection-dropdown li:hover {
    background-color: var(--vaaleansininen);
    color: white;
}

#oajd-municipality-selection-label {
    min-width: 13rem;
}

#oajd-municipality-selection-extra-info {
    margin-left: 17rem;
    font-size: 0.85em;
    max-width: calc(var(--column-width) - 19em);
}


/* Tooltip */

#geoviztooltip {
    display: none;
}

body.oajd div.viz-popup {
    position: absolute;
    background-color: white;
    max-width: 250px;
    padding: 0.75em 0.5em 0.25em 0.75em;
    box-shadow: 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

body.oajd div.viz-popup div.viz-popup-content {
    margin-bottom: -0.75em;
    font-size: 1em;
}

body.oajd div.viz-popup div.viz-popup-content div.oajd-tooltip-value-block {
    padding-top: 0.35em;
}

body.oajd div.viz-popup div.viz-popup-content span.oajd-tooltip-value {
    font-weight: bold;
}

body.oajd div.viz-popup div.viz-popup-content .oajd-tooltip-extra {
    font-size: 0.8em;
}

body.oajd div.viz-popup div.viz-popup-content div.oajd-tooltip-extra {
    margin-top: -0.1em;
}

body.oajd div.viz-popup svg.viz-popup-pointer {
    margin: 0 0 -23px calc(50% - 0.75em);
}

body.oajd div.viz-popup svg.viz-popup-pointer path {
    fill: white;
}

/* Hover effect */

body.oajd .oajd-map-wrapper > svg#map > g > path.hover {
    fill: var(--tummansininen);
}

body.oajd #maahanmuuttajat-kartta > .oajd-map-wrapper > svg#map > g > path.hover {
    fill: var(--purppura);
}

div.oajd-chart-wrapper > svg.oajd-chart-graphic circle.oajd-line-marker.hover {
    filter: drop-shadow(0 0 2px var(--purppura));
}

/* Responsive styles */

@media only screen and (max-width: 1250px) {
    body.oajd:not(.scrolled) > header #site-logo {
        width: 270px;
    }
    body.oajd.scrolled > header #site-logo {
        width: 170px;
    }
    body.oajd > main > section:is(#intro-text, #anchor-links) {
        width: 720px;
        padding-right: calc(50vw - 366px);
        padding-left: calc(50vw - 336px);    
    }
    section#municipality-selection {
        padding-left: 170px;
        padding-right: 0;
        width: calc(100vw - 170px + 12px);
    }
    body.oajd > div#back-to-top {
        background-color: var(--taustaväri);
    }
}

@media only screen and (max-width: 1180px) {
    body.oajd:not(.scrolled) > header #site-logo {
        width: 250px;
    }
    body.oajd > main > section:is(#intro-text, #anchor-links) {
        width: calc(85vw - clamp(150px, 15vw, 250px));
        padding-right: clamp(150px, 15vw, 250px);
        padding-left: 250px;
    }
}

@media only screen and (max-width: 1080px) {
    #oajd-municipality-selection-extra-info {
        display: none;
    }
    section#municipality-selection {
        width: calc(100vw - clamp(170px, 25vw, 340px));
        padding-left: clamp(182px, calc(25vw + 12px), 352px);
    }
}

@media only screen and (min-width: 760px) and (max-width: 900px) {
    div.oajd-chart-wrapper div.oajd-label.oajd-axis-label > div > div.oajd-axis-label-extra {
        font-size: 0.6em;
    }
}

@media only screen and (max-width: 710px) {
    body.oajd > header #site-logo {
        transition: opacity var(--transition-length);
    }
    body.oajd:not(.scrolled) > header #site-logo {
        width: 140px;
        opacity: 0;
    }
    body.oajd.scrolled > header #site-logo {
        width: 140px;
        opacity: 1;
    }
    body.oajd > main #mobile-site-logo {
        display: block;
        position: absolute;
        top: 1rem;
        width: 16rem;
    }
    body.oajd h1 {
        margin-top: 2em;
    }
    body.oajd > main > section:is(#intro-text, #anchor-links) {
        width: calc(100vw - 6rem);
        padding-right: 3rem;
        padding-left: 3rem;
    }
    section#municipality-selection {
        font-size: 12pt;
        padding-left: clamp(140px, 20vw, 240px);
        width: calc(100vw - clamp(140px, 20vw, 240px) + 12px);
    }
    section#municipality-selection > * {
        font-size: 12pt;
    }
    section#language-selection {
        margin-left: 210px;
        margin-top: -30px;
    }
    
}

@media only screen and (max-width: 700px) {
    body.oajd > main > section#oajd-data > section.oajd-content-group > .oajd-content:not(:has(.oajd-map-wrapper)),
    body.oajd > main > section#oajd-data .oajd-content {
        width: var(--column-width);
    }
}

@media only screen and (max-width: 660px) {
    body.oajd > footer > div {
        margin-left: 1em;
    }
    body.oajd > footer > div > p,
    body.oajd > footer > div > p > :is(span, a, strong) {
        font-size: 12pt;
    }
}

@media only screen and (max-width: 625px) {
    body.oajd > main > section#oajd-data > section.oajd-content-group > .oajd-content:has(.oajd-map-wrapper) {
        width: var(--column-width);
        flex-direction: column;
    }
    body.oajd > main div.oajd-map-wrapper > svg#map {
        margin-top: 1em;
        max-height: calc(90vh - 10vw) !important;
    }    
    div.oajd-map-wrapper {
        width: calc(45vh - 5vw);
        margin: auto;
    }
    body.oajd > main section.oajd-content > div.map-texts > div.oajd-source:not(.oajd-source-mobile) {
        display: none;
    }
    body.oajd > main section.oajd-content div.oajd-source-mobile {
        display: inline;
        margin-top: 1em;
        margin-bottom: 1em;
        max-width: 100%;
    } 
}

@media only screen and (max-width: 620px) {
    body.oajd.scrolled > header #site-logo {
        width: 120px;
        margin-left: 10px;
    }
    section#municipality-selection {
        padding: 60px calc(2rem + 12px) 1.25rem 2rem;
        width: calc(100vw - 4rem);
    }
}

@media only screen and (max-width: 600px) {
    body.oajd:not(.scrolled) > header > #site-logo,
    body.oajd.scrolled > header #site-logo {
        width: 140px;
    }
    body.oajd > main #mobile-site-logo {
        width: 210px;
    }
    body.oajd > main > section:is(#intro-text, #anchor-links) {
        width: calc(100vw - 3.5rem);
        padding-right: 1.5rem;
        padding-left: 2rem;
    }
    body.oajd > main > section#intro-text {
        font-size: 1.05em;
        line-height: 1.5em;
        margin-top: -6em;
        padding-top: 6em;
    }
    body.oajd h1 {
        font-size: clamp(24pt, 9.5vw, 36pt);
        margin-bottom: 0;
    }
    section#language-selection {
        margin-left: 180px;
        margin-top: -38px;
    }
}

@media only screen and (max-width: 550px) {
    body.oajd > footer {
        padding: 0.5em 1em 4em 0.5em;
    }
    body.oajd > footer > img#secondary-logo {
        width: clamp(80px, 30vw, 164px);
    }
    body.oajd > footer > div {
        margin-left: 0.5em;
        margin-right: 2.5em;
    }
    body.oajd > footer,
    body.oajd > footer > div > p,
    body.oajd > footer > div > p > :is(span, a, strong) {
        font-size: clamp(10pt, 3vw, 12pt);
    }
}

@media only screen and (max-width: 530px) {
    body.oajd > main #mobile-site-logo {
        width: clamp(170px, 40vw, 210px);
    }
    body.oajd > main > section#intro-text {
        font-size: clamp(0.9em, 3.5vw, 1.2em);
        line-height: 1.35em;
        margin-top: -6em;
        padding-top: 5em;
    }
    div.oajd-chart-wrapper {
        width: calc(100vw - 3rem);
        margin: 0 0 1em 0;    
    }
    section#language-selection {
        margin-left: clamp(140px, calc(40vw - 30px), 180px);
        margin-top: -22px;
    }
}

@media only screen and (max-width: 485px) {
    body.oajd * {
        font-size: 13pt;
    }
    section#municipality-selection,
    section#municipality-selection > *,
    #oajd-municipality-selection-dropdown .oajd-dropdown-content > ul > li {
        font-size: 12pt;
    }
    #oajd-municipality-selection-label {
        font-size: 3.6vw !important;
        min-width: auto;
    }
    #oajd-municipality-selection-label > span {
        font-size: 3.6vw !important;
    }
    #oajd-municipality-selection-dropdown button {
        width: 120pt;
    }
    #oajd-municipality-selection-dropdown .oajd-dropdown-content {
        width: calc(120pt - 2px);
    }
    #oajd-municipality-selection-dropdown input#oajd-dropdown-search {
        width: 101.8pt;
    }
    #oajd-municipality-selection-dropdown ul {
        max-height: 50vh;
    }
    div.oajd-chart-wrapper > svg.oajd-chart-graphic text.oajd-label {
        fill: black;
        font-size: 1em;
    }    
}


@media only screen and (max-width: 440px) {
    section#language-selection {
        margin-top: clamp(-32px, -6.5vw, -24px);
    }
}


@media only screen and (max-width: 440px) {
    div.oajd-chart-wrapper div.oajd-label.oajd-axis-label > div > div.oajd-axis-label-extra {
        font-size: 0.6em;
    }
    div.oajd-chart-wrapper > svg.oajd-chart-graphic g.oajd-legend-entry text {
        font-size: calc(5.8px);
    }
}

@media only screen and (max-width: 425px) {
    div.oajd-chart-wrapper > div.oajd-below > div.oajd-chart-horizontal-axis-grid-labels > div.oajd-label {
        font-size: 4.5vw;
    }
}

@media only screen and (max-width: 410px) {
    div.oajd-map-wrapper {
        width: calc(100vw - 3rem);
    }
}

@media only screen and (max-width: 390px) {
    div#oajd-municipality-selection-label {
        font-size: 12pt !important;
    }
    div#oajd-municipality-selection-label > span.can-be-hidden {
        display: none;
    }
}

@media only screen and (max-width: 370px) {
    div.oajd-chart-wrapper > svg.oajd-chart-graphic rect.oajd-legend-bg-box {
        display: none;
    }
}