body {
  background-color: #ffffff;
}
/* tästä alapäin olevat tyylit lisätään suoraan karttapalvelun tyylitiedostoon */
.pikanakyma {
  font-family: 'Raleway', sans-serif;
  width: 100%;
  max-width: 350px;
}
/* Tooltip text */
.pikanakyma .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  /* z-index: 1; */
  bottom: -5%;
  left: 20%;
  margin-left: -60px;
  margin-bottom: -70px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.pikanakyma .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  /* border-color: #555 transparent transparent transparent;*/
}

/* Show the tooltip text when you mouse over the tooltip container */
.pikanakyma:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
h4.pntitle {
  color: #275a90;
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding-left: 1em;
  position: relative;
  width: 100%;
  border-color: #ddd;
  border-radius: 10%;
}
h4.pnsubtitle {
  color: #275a90;
  display: block;
  font-size: 14px;
  font-weight: 400;
  padding-left: 1em;
  position: relative;
  width: 100%;
  border-color: #ddd;
  border-radius: 5%;
}
.pnGraafiContainer {
  margin-top: 20px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.pnGraafiTitleHeader,
.pnGraafiTitleFooter {
  font-size: 12px;
  font-weight: 600;
  margin: 15px 0;
  text-align: center;
  /*text-transform:uppercase;*/
  text-transform: none;
  width: 100%;
}
.pnGraafiTitleFooter {
  margin-top: 10px;
}
.pnGraafi {
  border: solid 2px #fff;
  border-radius: 23px 23px 23px 23px;
  box-shadow: 0 6px 5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: inline-block;
  /* 19.12 */
  margin-top: -2px;
  margin-bottom: -2px;
  /* 19.12 */
  position: relative;
  width: 28px;
  z-index: 1;
}
.pnGraafi:after {
  /* ns. keskipiste, ei käytössä */
  /*background-color: #000000;
content: ' ';
display: block;
height: 1px;
left: -10px;
position: absolute;
top: 50%;
width: 46px;
z-index: 100;*/
}
.cblock {
  border-bottom: solid 2px #ffffff;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.cblock-first {
  border-radius: 23px 23px 0 0;
}
.cblock-last {
  border-bottom: 0;
  border-radius: 0 0 23px 23px;
}
.pnHeijastus {
  background-image: url(../img/heijastus.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 260px;
  left: -23px;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 58px;
  z-index: 10;
}
.pnNyt {
  position: absolute;
  top: 97px;
  left: 0;
  /* 19.12 */
  /* siirretään ylös puolet nuolen korkeudesta, saadaan piste nuolen kärjen kohdalle */
  /*transform:translateY(-20px);*/
  transform: translateY(-17px);
  /* 19.12 */
  z-index: 100;
}
.pnNytNuoli {
  width: 145px;
  /*height: 40px;*/
  height: 34px;
  overflow: hidden;
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}
.arrNyt {
  /*height: 40px;*/
  height: 34px;
  position: absolute;
  width: auto !important;
  top: 0;
  right: 18px;
}
.arrNytShape {
  /*fill: #db000b!important;*/
}

.pnEnnuste {
  position: absolute;
  top: 239px;
  /* 19.12 */
  /* siirretään ylös puolet nuolen korkeudesta, saadaan piste nuolen kärjen kohdalle */
  /*transform:translateY(-20px);*/
  transform: translateY(-17px);
  /* 19.12 */
  right: 0;
  z-index: 100;
}
.pnEnnusteNuoli {
  width: 145px;
  /*height: 40px;*/
  height: 34px;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
.arrEnnuste {
  /*height: 40px;*/
  height: 34px;
  position: absolute;
  width: auto !important;
  top: 0;
  left: 18px;
}
.arrEnnusteShape {
  /*fill: #db000b!important;*/
}
.pnNytTitle,
.pnEnnusteTitle {
  box-sizing: border-box;
  font-size: 12px;
  margin-bottom: 3px;
  max-width: 145px;
  position: absolute;
  text-align: center;
  transform: translateY(-120%);
  width: 100%;
  z-index: 10;
}
.pnNytTitle {
  padding-right: 35px;
}
.pnEnnusteTitle {
  padding-left: 35px;
}
.pnNytValue,
.pnEnnusteValue {
  color: #ffffff;
  /*font-size: 20px;*/
  font-size: 17px;
  font-weight: 600;
  /*margin-top: 0.35em;*/
  margin-top: 0.18em;
  position: relative;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  width: 125px;
  z-index: 10;
}
.pnNytValue {
  margin-right: 20px;
}
.pnEnnusteValue {
  margin-left: 20px;
}
/* Kuormitustiedot*/ 
/* Dropdown Button */
.dropbtn {
  /* background-color: rgb(0 123 255 / 23%); */
  color: white;
  padding: 1px;
  font-size: 16px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  /* border: none; */
  border-radius: 20px;
  cursor: pointer;
  padding-left: 1;
}

/* Dropdown button on hover & focus */
/* .dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
} */

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu */
.show {
  display: block; 
}
.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 10px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
@media (min-width: 400px) {
  .pnNytNuoli,
  .pnEnnusteNuoli {
    width: 155px;
  }
  .pnNytTitle,
  .pnEnnusteTitle {
    font-size: 12px;
    max-width: 155px;
  }
  .pnNytTitle {
    padding-right: 35px;
  }
  .pnEnnusteTitle {
    padding-left: 35px;
  }
}
@media (min-width: 440px) {
  .pnNytNuoli,
  .pnEnnusteNuoli {
    width: 125px;
  }
  .pnNytTitle,
  .pnEnnusteTitle {
    font-size: 12px;
    max-width: 125px;
  }
  .pnNytValue {
    padding-right: 20px;
  }
}
@media (min-width: 900px) {
  .pnNytNuoli,
  .pnEnnusteNuoli {
    width: 145px;
  }
  .pnNytTitle,
  .pnEnnusteTitle {
    font-size: 12px;
    max-width: 145px;
  }
  .pnNytValue {
    padding-right: 20px;
  }
}
.graafit-linkki {
  font-family: 'Raleway', sans-serif;
  width: 100%;
  max-width: 350px;
  width: 100%;
}
.graafit-linkki-btn {
  background-color: transparent;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.26);
  color: #275a90;
  cursor: pointer;
  display: block;
  font-size: 1em;
  font-weight: 600;
  margin: 20px auto;
  padding: 10px 1rem;
  padding-left: 55px;
  outline: none;
  position: relative;
  text-align: left;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}
.graafit-linkki-btn:disabled {
  cursor: initial;
}

.graafit-linkki .ikoni {
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 24px;
  left: 15px;
  position: absolute;
  top: 5px;
  width: 24px;
}
.graafit-linkki-btn .ikoni {
  background-image: url('../img/graafit-ikoni.svg');
}
.graafit-linkki-btn:disabled .ikoni {
  background-image: url('../img/graafit-ikoni-disabled.svg');
}

.graafitLinkkiBtn-title {
  color: #275a90;
  font-weight: 600;
  display: block;
  position: relative;
  width: 100%;
}
.graafit-linkki-btn:disabled .graafitLinkkiBtn-title {
  color: #bcbccb;
}
.vaikuttavuusmerkki {
  background-size: cover;
  background-repeat: no-repeat;
  /* height: 20px; */
  margin-top: 0;
  position: absolute;
  /* tällä asemoidaan viivalle */
  transform: translateY(-50%);
  /* width: 58px; */
  z-index: 1000;
}
.vaikuttavuusmerkki.vaikuttavuusNyt {
  /* background-image: url(../img/osoitin-vasen.svg); */
  background-position: left top;
  left: -26px;
}
.vaikuttavuusmerkki.vaikuttavuusEnnuste {
  /* background-image: url(../img/osoitin-oikea.svg); */
  background-position: right top;
  right: -24px;
}
.vaikuttavuusmerkki.ajankohdankeskiarvo {
  left: -20px;
}
.vaikuttavuusNytKuvake {
  width: 58px;
}
.vaikuttavuuskuvaus {
  font-size: 12px;
  font-weight: 600;
  padding: 5px;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vaikuttavuusteksti {
  padding-left: 5px;
  margin: 5px 0;
}
.vaikuttavuustekstiNyt {
  /* background-image: url(../img/osoitin-vasen.svg); */
  background-position: left top;
  background-repeat: no-repeat;
}
.vaikuttavuustekstiEnnuste {
  /* background-image: url(../img/osoitin-oikea.svg); */
  background-position: left top;
  background-repeat: no-repeat;
}

.pnGraafilinkki {
  display: flex;
  width: 100%;
  justify-content: left;
  cursor: pointer;
  color: #275a90;
  font-weight: 600;
  text-decoration: underline;
  padding-bottom: 5px;
}

.pnGraafilinkkiIkoni {
  background-image: url(../img/graafit-ikoni.svg);
  width: 24px;
  margin-right: 10px;
  background-repeat: no-repeat;
}
.pnGraafilinkkiIkoni.vesihuolto {
  background-image: url(../img/vesihuolto-ikoni.svg);
}
.pnGraafilinkkiIkoni.citobs {
  background-image: url(../img/Jata_oma_havainto.svg);
}