:root {
   --tummaSininen: #222784;
   --kirkasSininen: #444AC0;
   --vaaleaSininen: #EAE9F7;
   --vihrea: #007D5D;
   --vaaleaBeige: #F9F2EC;
   --tummaSininen30: #BDBEDA;
   --tummaSininen20: #D3D4E6;
   --tummaSininen10: #E9E9F3;
   
}


body {
  font-family: "Raleway", sans-serif !important;
  font-weight: normal;
  font-style: normal;
}

h1, h2, h3, .h3, h4, .h4, p, a, a:link {
  font-family: "Raleway", sans-serif !important;
  font-weight: 400 !important;
}



h1 {
   font-size: 3rem !important;
   line-height: 3.75rem !important;
   margin: 0 0 3rem !important;
   font-weight: 700 !important;
}

h2 {
   font-size: 2.625rem !important;
   line-height: 3.4rem !important;
   margin: 0 0 2rem !important;
   font-weight: 700 !important;
}

h3, .h3 {
  font-size: 2.25rem !important;
  line-height: 3rem;
  margin: 3rem 0 2rem !important;
  font-weight: 700 !important;
}

h4, .h4 {
  font-size: 1.5rem !important;
  line-height: 2.25rem;
  margin: 0.5rem 0 1rem !important;
}

h5 {
  font-size: 1.125rem !important;
  line-height: 1.875rem;
  margin-bottom: 0.8rem !important;
}

p {
   font-size: 1.125rem !important;
   line-height: 1.75rem !important;
   margin-bottom: 2rem !important;
}

figcaption {
   margin-bottom: 1rem;
   margin-top: 1rem;
   font-style: italic;
   color: var(--tummaSininen);
}


@media only screen and (max-width: 768px) {
  h1 {
    font-size: 2rem !important;
    line-height: 2.75rem !important;
    margin-bottom: 1.2rem !important;
  }

  h2 {
    font-size: 1.75rem !important;
    line-height: 2.5rem !important;
    margin-bottom: 1rem !important;
  }

  h3, .h3 {
    font-size: 1.5rem !important;
    line-height: 2.25rem !important;
    margin-bottom: 1rem !important;
  }

  h4, .h4 {
    font-size: 1.1875rem !important;
    line-height: 2rem !important;
    margin-bottom: 0.8rem !important;
  }

  h5 {
    font-size: 1rem !important;
    line-height: 1.75rem !important;
    margin-bottom: 0.8rem !important;
  }

  p {
    font-size: 1.25rem !important;
    line-height: 2.25rem !important;
    margin-bottom: 1rem !important;
  }
}

.btn-with-icon {
   display:flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   border-radius: 2rem !important;
   padding: 0 1rem !important;
   white-space: nowrap;
}

.font-icon {
   display:flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.arrow_forward {
   margin-left: 0.5rem;
   height: 32px;

   &:after {
      content: "\e5c8"; 
      font-family: "Material Icons";
      font-size: 1.5rem;
      font-weight: lighter;
   }
}

.expand_all {
   margin-left: 0.5rem;
   height: 32px;
   
   &:after {
      content: "\e5cf"; 
      font-family: "Material Icons";
      font-size: 2rem;
      font-weight: lighter;
   }
}

/* HEADER */
.navbar-brand.navbar-header {
   width: 100%;

   div[class^="xrm-"] {
      width: 100%;
   }

   a:hover {
      text-decoration: none;
   }
   img {
      height: 64px !important;
      margin-left: 1.5rem;
   }

   h1 {
      margin-left: -10% !important;      
   }

}



@media screen and (max-width: 1350px) {
   .navbar-brand.navbar-header {
      h1 {
         margin-left: 0 !important;
         text-align: left !important;
      }
   }
}

@media screen and (max-width: 560px) {
   .navbar-brand.navbar-header {
      h1 {
         word-wrap: break-word;
         margin: 0 0.5rem !important;
      }
      img {
        margin: 1rem 0;
    }
   }
}


/* FOOTER */

.footer-content {
   display: flex;
   flex-direction: row;
   align-items: center;
   a { color: #fff; }
   
}


/* REPORT SELECTION ON TOP OF PAGE */
.report-selection-block {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 1rem;
      background-color: var(--tummaSininen); 

      .h3 {  
         color: #ffffff !important;
         margin-top: 0 !important;
         margin-bottom: 1rem !important;
      }
   }

   .report-selection {
      display: flex;
      flex-direction: row;
      justify-content: center;
   }

   .dropdown-toggle, .btn-forward {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;
      color: #222784;
      font-weight: 600;
      border-radius: 1.75rem;
      padding: 0.5rem 1.75rem;
      margin: 0;

      &:after {
         display: none;
      }
   }

   .dropdown-toggle, .dropdown-menu {
      width: 250px;
   }

   .dropdown-menu a, .dropdown-menu a:hover {
      display: flex !important;
      justify-content: space-between !important;
      padding: 0.5rem 1rem !important;
      text-decoration: none !important;

   }

@media screen and (max-width: 680px) {
   .report-selection {
      flex-direction: column;
   }

   .dropdown .btn-group {
      padding-bottom: 1rem;
   }
   
   .dropdown-toggle, .dropdown-menu {
      width: 100%;
   }
}



/* BREADCRUMB */

.breadcrumb * {
   font-weight: 400 !important;
   font-size: 1.125rem !important;
} 

.breadcrumb-item+.breadcrumb-item {
   padding-left: 0;
}
.breadcrumb-item+.breadcrumb-item::before {
      content: "\e5cc"; 
      font-family: "Material Icons";
      font-size: 1.25rem;
      color: var(--tummaSininen);
      padding-right: 0;
}

.breadcrumb-custom {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   white-space: nowrap;

   .area-link {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      &:after {
         content: "\e5cc"; 
         font-family: "Material Icons";
         font-size: 1.25rem;
         color: var(--tummaSininen);
         padding-right: 0;
      }
   }
}

@media (max-width: 992px) {
   .breadcrumb-custom {
      white-space: normal;
      .area-link {
         align-items: flex-start;
      }
   }
}



.breadcrumb-block {
    padding: 0.5rem 0;
    margin: 0;

    ul {
        padding: 0;
        margin: 0 0 0 2rem;

      li * {
         margin: 0;
         padding: 0;
      }
    }

    .publish-date {
      color: var(--tummaSininen);
      padding-right: 2rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding-top: 0.25rem;
      
      span {
         white-space: nowrap;
         margin-left: 0.5rem;
      }
    }
}

@media screen and (max-width: 992px) {
   .breadcrumb-block {

      .publish-date {
         padding-right: 0;
         padding-left: 3rem;
         justify-content: flex-start;
         padding-top: 0.75rem;

         span {
            margin-left: 0;
            margin-right: 0.5rem;
         }
      }
   }


}



@media (max-width: 560px) {
   .breadcrumb-block {
        
      .breadcrumb {
         margin-left: 0;
      }

      .publish-date {
         padding-left: 1rem;
         margin-top: 0.5rem;
         margin-bottom: 0.5rem;
      }
   }
}



.btn.btn-primary:focus, .btn.btn-primary:active {
   background-color: #444AC0 !important;
   border-color: #444AC0 !important;
}

.btn.btn-secondary:hover {
   background-color: #D3D4E6 !important;
   border-color: #4449BF !important;
}

.btn.btn-secondary:focus, .btn.btn-secondary:active {
   background-color: #E9E9F3 !important;
   border-color: #444AC0 !important;
}





.map {
   svg {
         max-width: 100%;
         height: auto;
         margin-top: 2rem;
   }
        
   text.small {
         font-size: 16px;
         fill: #000000;
   }

   a:hover, a:focus {
         path {
            fill: var(--tummaSininen);
            cursor: pointer;
         }

         text.small {
            display: none;
           }

         rect{ display: none;}

         text.small-with-rect {
            display: none;
            fill: #000000 !important;
         }
   }

   a:hover + rect {
      display: none;
   }

   a:hover + rect + text.small {
      display: none;
   }

   a:hover + rect + text.small + text.small {
      display: none;
   }

   a:hover + rect + rect {
      display: none;
   }

   a:hover + rect + rect + text.small {
      display: none;
   }
   a:hover + rect + rect + text.small + text.small {
      display: none;
   }

   a.disabled {
      path {
         opacity: 0.3;
      }
   }

   a.disabled:hover, a.disabled:focus {
         path {
            fill: #ffffff;
            cursor:default;
         }

         text.small {
            display: block;
            fill: #000000;
            cursor: default;
         }
   }
}

.map.map-alue {
   text.small {
         font-size: 24px;
         fill: #000000;
   }
}

        /* --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height}; */

.custom-tooltip {
   --bs-tooltip-max-width: 500px;
   --bs-tooltip-padding-x: 1.25rem;
   --bs-tooltip-padding-y: 0.25rem;
   --bs-tooltip-bg: var(--tummaSininen);
   --bs-tooltip-color: var(--bs-white);
   --bs-tooltip-font-size: 34px;
   --bs-tooltip-border-radius: 0;
   --bs-tooltip-opacity: 1;
   --bs-tooltip-arrow-width: 0;
   --bs-tooltip-arrow-height: 0;
   --bs-tooltip-font-family: "Raleway", sans-serif !important;
   --bs-tooltip-font-weight: 400 !important;
   white-space: nowrap;
   font-family: "Raleway", sans-serif !important;

   .arrow {
      display: none !important;
   }
}




/* TITLE */
.report-title-block {
   background-color: var(--vaaleaSininen);
   padding: 2rem 0;

   .pdf-link {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      padding-right: 2rem;

      .btn {
         display: flex;
         flex-direction: row;
         align-items: center;
      }

      span { padding-left: 0.5rem; }
   }

   .row {
      margin: 0;
   }

   h1 { margin: 0 0 0 2rem !important;}
}

@media screen and (max-width: 992px) {
   .report-title-block {
      padding: 2rem 0;

      .title {
         display: flex;
         justify-content: center;
         align-items: center;

         h1 { 
            text-align: center;
            margin: 0 !important;
         }
      }

      .pdf-link {
         display: flex;
         justify-content: center;
         align-items: center;
         margin-top: 2rem;
         margin-left: 0;
         padding-right: 0;
         
      }
   }
}

@media screen and (max-width: 780px) {
   .report-title-block {
      padding: 2rem 0;
      h1 { word-break: break-word; margin: 0 !important;}

   }
}