/* Fix for sttk 2020 */
.sttk-infographs .wrapper {
  position: static;
}
#contentwrapper svg {
  height: auto!important;
}

#contentwrapper h1 {
  font-size: 2.5rem;
  /*padding: 6vw 6vw 6vw 0;*/
  display: inline-block;
  width: 100%;
}
#contentwrapper p.description {
  display: inline-block;
  background-color: #F5F5F5;
  color: #002642;
  border-left: 6px solid #002642; 
  padding: 0.6em 0.6em 0.6em 1em;
  font-size: 0.95em;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin-top: 0.5em;
  font-style: italic;
}

#contentwrapper a {
  color: #9155FF;
  text-decoration: none;
}

#contentwrapper a:visited {
  color: #27465E;
}
.toc {
  position: relative;
  background-color: #F5F5F5;
  color: #002642;
  border-left: 6px solid #002642;
  padding: 0.6em 0.6em 0.6em 1em;
  font-size: 0.95em;
}
.toc ul {
  margin-bottom: 0;
}
#contentwrapper .toc ul a {
  color: #27465E;
  text-decoration: underline;
}
#toc-loading {
  background: rgb(145, 85, 255, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
#toc-loading img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#toc-loading p {
	font-weight: bold;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #aa84ee;
    padding: 3px 5px;
}
.loading {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-align: center;
  background-color: #ffffff;
}

.loading img {
  width: 25px;
  margin-top: 50%;
}

.textblock {
  border-top: 1px solid #27465E;
  padding: 0;
  padding-top: 2em;
  width: auto!important;
  margin: 0;
  line-height: 1.45em;
}

.textblock .inlinelabel {
  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  display: inline-block;
  padding: 0.05em 0.3em 0.05em 0.5em;
  margin: 0 0.1em;
  font-size: 0.9em;
}

.textblock .men {
  border: 1px solid rgb(145, 86, 255);
  background-color: #D3BBFF;
}

.textblock .women {
  border: 1px solid rgb(255, 153, 33);
  background-color: #FFC574;
}

#contentwrapper .wrapper {
  display: flex;
  flex-direction: row;
  margin-left: 0;
  padding-left: 0;
}

.controls {
  padding: 16px 2.5vw 16px 1vw;
  margin: 0;
  /*width: 130px;*/
  width: 183px;
}
#contentwrapper .controls ul {
  padding-left: 0;
}
.controls ul, #downloadoptions {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.controls li, #downloadoptions li {
  padding-bottom: 0.08em;
  display: block;
  /*height: 2em;*/
  height: auto;
}

#contentwrapper button, 
#contentwrapper #downloadoptions a {
  font-family: Arial, sans-serif;
  color: #27465E;
  background-color: #ffffff;
  border: 1px solid #27465E;
  padding: 0.2em 0.33em;
  letter-spacing: 0.02em;
  box-shadow: 3px 3px #A6B3BD;
  text-align: left;
  display: inline-block;
}

.controls ul.download {
  padding-top: 30vh;
}
#vanhempainpäivärahat-jakauma .controls ul.download {
  padding-top: 10vh;
  margin-bottom: 10rem;
}
.download button {
  background-color: #E0E5E8;
  color: #002642;
  border: 1px solid #002642;
  padding-left: 0.45em;
}

#downloadoptions {
  position: absolute;
  width: 125px;
  margin-top: 2px;
  padding: 10px 10px 0 10px;
  z-index: 1000;
  background-color: #E0E5E8;
}

.controls button {
  font-size: 11pt;
  width: 125px;
}

#downloadoptions a {
  font-size: 9.5pt;
  display: inline-block;
  background-color: #E0E5E8;
}

.slider {
  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 10pt;
  display: flex;
  flex-direction: row;
  /*flex-wrap: wrap;*/
  flex-wrap: nowrap;
  margin: 1em 0 2em 0.5em;
}

.sliderlabels, .uislider {
  height: 10em;
  padding: 0;
}

.sliderlabels {
  height: 10.6em;
  margin-top: 0.7em;
}

.sliderlabels .min {
  height: 50%;
  display: flex;
  align-items: flex-end;
}

.sliderlabels .max {
  height: 50%;
}

.uislider {
  width: 2em;
  margin-left: 0.3em;
}

.uislider input[type=range] {
  -webkit-appearance: none;
  transform: rotate(-90deg) translateX(-5em) translateY(-5em);
  height: 3pt;
  width: 10em;
  margin: 0 0 0 1em;
  background: rgb(138, 145, 150);
  outline: none;
  padding: 0;
}

input::-moz-focus-outer { 
  border: 0; 
}


.uislider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  background: #27465E;
  cursor: pointer;
}

.slider .bubblelabel {
  position: relative;
  text-align: left;
  height: 2em;
  width: auto;
  /* max-width: 58px; */
  padding: 0.25em 0.4em;
  margin-top: 0.6em;
  color: #ffffff;
  background-color: #27465E;
  /*left: 100%;
  margin-top: -9.5em;*/
}

#contentwrapper .animate {
  padding-left: 0.5em;
  color: #ffffff;
}

@-moz-document url-prefix() {
  .uislider input[type=range] {
    transform: none;
    height: auto;
    width: 2pt;
    height: 10em;
    margin: 1em 0 0 1em;
  }

  .slider .bubblelabel {
  }

}

#sttkviztooltip {
  position: absolute;
  color: #27465E;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  padding: 10px 10px 0 10px;
  font-size: 9.5pt;
  line-height: 1.3em;
  z-index: 1000;
  border: 1px solid #E0E5E8;
  max-width: 285px;
  margin-top: 20em;
}

#sttkviztooltip h2 {
  padding: 0;
  margin: 0.2em 0 0.6em 0;
  line-height: 1.2em;
}

#sttkviztooltip b {
  white-space: nowrap;
}

#sttkviztooltip table {
  margin-bottom: 0.7em;
  width: 100%;
  border-spacing: 0;
}

#sttkviztooltip table.flows th {
  text-align: left;
}

#sttkviztooltip table.flows td {
  white-space: nowrap;
  font-size: 0.83em;
  line-height: 1.3em;
  margin: 0;
}

#sttkviztooltip table.flows td.col2 {
  padding-right: 0.8em;
  text-align: right;
}

#sttkviztooltip table.flows td.col3 {
  padding-left: 0.6em;
  border-left: 1px solid #E0E5E8;
}

#sttkviztooltip table.flows td.col4 {
  text-align: right;
}

#sttkviztooltip table.flows td.spacer {
  width: 33%;
}

#sttkviztooltip td.value {
  text-align: right;
  font-weight: bold;
  padding: 0 0.5em;
}

#sttkviztooltip td.percentage {
  text-align: right;
}

#sttkviztooltip p {
  margin: 0 0 0.5em 0;
}


/* Hover effects */

#contentwrapper a:not(.disabled):hover {
  text-decoration: underline;
}

#contentwrapper a:not(.disabled):focus {
  outline: 0;
  text-decoration: underline;
  color: #BF2828 !important;
}

#contentwrapper button.selected, #contentwrapper button:active, #contentwrapper #downloadoptions a:not(.disabled):hover {
  color: #ffffff;
  background-color: #27465E !important;
  margin: 3px 0 0 3px;
  box-shadow: none;
}

#contentwrapper button:focus, 
#contentwrapper button:hover, 
#contentwrapper #downloadoptions a:not(.disabled):focus, 
#contentwrapper #downloadoptions a:not(.disabled):hover {
  outline: 0;
}

#contentwrapper button:hover, 
#contentwrapper #downloadoptions a:not(.disabled):hover {
  color: #ffffff;
  background-color: #27465E;
}


#contentwrapper a.disabled {
  color: rgba(0, 38, 66, 0.4) !important;
  border: 1px solid rgba(0, 38, 66, 0.4) !important;
}

.animate {
  line-height: 30%;
  margin-left: 7px;
  padding-left: 0;
}

.animate:focus, .animate:hover {
  outline: 0;
  text-decoration: none !important;
}

.men:hover circle, .women:hover circle {
  fill: #FFA321 !important;
  stroke: #222222 !important;
}

.men:hover rect, .men:hover path, .women:hover rect, .women:hover path {
  fill: #FFA321 !important;
}

.women:hover text, .men:hover text {
  fill: #222222 !important;
}

.men:hover rect.background, .women:hover rect.background {
  fill: #E0E5E8 !important;
}

.flowmap .uusimaa.men:hover circle, .flowmap .uusimaa.women:hover circle {
  fill: rgba(255, 255, 255, 0) !important;
  stroke: #6641BF !important;
}

.flowmap .uusimaa.men:hover rect, .flowmap .uusimaa.women:hover rect {
  fill: rgba(255, 255, 255, 0) !important;
}


.chartelement:hover .value {
  fill: #FFA321 !important;
}

.multibars .chartelement:hover rect {
  fill: #000000 !important;
}

.multibars .chartelement:hover .label {
  fill: #ffffff !important;
}


/* #contentwrapper div.content { width: calc(100vw - 3.5vw - 130px); } */

#contentwrapper svg { width: 100%; max-width: 100%;}


/* SVG animation */

.flow {
  animation: dash 40s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 500;
  }

}


/* Tweaks */

#vanhempainpäivärahat-maakunnittain .content.mapwrapper {
  margin-top: -60px;
}


/* Responsive CSS */

@media all and (max-width: 1000px) {

  .sttk-infographs .download {
    display: none !important;
  }

  .sttk-infographs div.content {
    width: 100%!important;
  }

  .textblock {
    /*padding-left: 3vw;
    width: 89vw;*/
    padding-left: 0;
    width: auto!important;
  }

  #contentwrapper .wrapper {
    display: block;
  }

  #contentwrapper .wrapper + .wrapper {
    margin-top: 4em;
  }

  .controls {
    padding: 0;
    padding-bottom: 3em;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  #vanhempainpäivärahat-maakunnittain .controls {
    margin-top: -50px;
    padding-bottom: 90px;
  }

  .controls ul { order: 1; display: flex; }
  .controls li { display: inline-block; margin-right: 1em; }
  .controls .download { order: 2; }

  .sttk-infographs .slider {
    display: block;
    width: 100%;
    margin: 0;
    order: 3;
  }

  .sttk-infographs .sliderlabels, .uislider {
    height: auto;
    padding: 0;
  }

  .sttk-infographs .sliderlabels .max {
    width: 30%;
    height: auto;
    display: block;
    text-align: right;
    float: right;
  }

  .sttk-infographs .sliderlabels .min {
    width: 30%;
    height: auto;
    display: block;
    text-align: left;
    float: left;
  }

  .uislider {
    display: block;
    width: 100%;
    /* margin-left: -0.8vw; */
  }

  .uislider input[type=range] {
    transform: rotate(0) translateX(0) translateY(0);
    height: 3pt;
    width: 100%;
  }

  .sttk-infographs .slider .bubblelabel {
    width: 68px;
  }



}

@media all and (orientation: portrait) {
  .content.mapwrapper, .content.mapwrapper svg {
    height: auto!important;
    width: 100%!important;
  }
  .content.chartwrapper, .content.chartwrapper svg {
    height: auto !important;
  }
  #vanhempainpäivärahat-jakauma .content.chartwrapper, #vanhempainpäivärahat-jakauma .content.chartwrapper svg {
    height: 50vh !important;
  }

  .controls {
    margin-bottom: -1.1em;
  }
}

@media all and (orientation: landscape) and (max-width: 750px) {
  .content.chartwrapper, .content.chartwrapper svg {
    height: auto !important;
    width: 97vw !important;
  }
  .controls {
    margin-bottom: -1.1em;
  }
}

/* @media all and (orientation: landscape) and (max-width: 580px) {
  .content.chartwrapper {
    margin-left: 3vw;
  }
} */

@media all and (max-width: 700px) {
  #contentwrapper #logo {
    width: 20vw;
    height: 25vw;
    padding: 6vw 4vw 6vw 3vw;
  }
  #contentwrapper h1 {
  }
  .textblock {
    /* width: 88vw; */
  }

}

@media all and (max-width: 580px) {

  #contentwrapper .wrapper {
    /* margin-left: 3vw; */
  }

  .controls, .controls ul, .controls ul li {
    width: 100%;
    max-width: 88vw;
    display: inline-block;
  }

  .controls li, #downloadoptions li {
    padding-bottom: 0.6em;
  }

  .controls button {
    width: 100%;
    font-size: 1.05em;
  }

  #contentwrapper .slider {
    padding: 1em 0;
  }

  .uislider input[type=range] {
    max-width: 80vw;
  }

  #contentwrapper .slider .bubblelabel {
    width: 3.7em;
  }


}

@media all and (max-width: 500px) {
  #contentwrapper h1 {
    padding-right: 0;
  }
}


@media all and (max-width: 420px) {
  #contentwrapper h1 {
    font-size: 2rem !important;
  }

  #contentwrapper #logo {
    width: 21vw;
    height: 38vw;
    padding: 0 2vw 6vw 3vw;
  }

}