@import url("https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono&display=swap");

/* image {
            display: none;
        } */

/****PALETTE*****/
:root {
  --southwest: #f93649;
  /* --southwest: #D3544F; */
  --botnia: #ffa500;
  --kokkola: #ff6633;
  --west-lapland: #00ff9d;
  --east-lapland: #63c700;
  /* --east-lapland: #91e700; */
  --kainuu: #0091ff;
  --kuusamo: #91f6fd;
  /* --savo-karelia: #9297FC; */
  --northernmost: #007ef0;
  /* --northernmost: #00cebd; */
  --savo-karelia: #003dff;
  --Inland: #967bfa;
  --evacuated: #993399;
  --text: #e5f2f8;
  --transparent: rgba(4, 18, 23, 0);
  --transparent-white: rgba(250, 250, 250, 0.536);
  --white: rgb(250, 250, 250);
  /* --bg: rgb(7, 29, 36); */
  --bg: rgb(4, 18, 23);
  /* --surface: rgb(16, 37, 43); */
  /* --surface: rgb(22, 41, 46); */
  /* --surface: rgb(43, 54, 57); */
  --surface: rgb(32, 63, 72);
  --surface-transparent: rgba(32, 63, 72, 0);
  --surface-semiTransparent: rgba(32, 63, 72, 0.205);
  /* --surface: rgb(26, 43, 48); superbright*/
  --surface-shadow: rgb(8, 30, 38);
  --surface-bright: rgb(10, 44, 55);
  --link: rgb(66, 123, 142);
  --link-hover: rgb(90, 171, 198);
  /* --bg: #0E3746; */
  /* --map_fill: rgba(121, 152, 163, 0.479); */
  --map_fill: #728f9a7a;
  --map_hover: #e5f2f8b6;
  --selected_map_fill: rgba(121, 152, 163, 0.5);
  --dendrogram-opacityLine: 1;
  --stroke: 2.2;

  --titleBlock-margin-left: 3vw;
  --titleBlock-margin-top: 12vh;
}
body{
  padding:0;
  margin:0;
}
p,
h1,
h2,
h3,
h4,
h5,
h5,
h6,
text,
.text,
.node2 {
  color: var(--text);
  fill: var(--text);
  font-family: "Roboto", sans-serif;
}
a {
  /* text-decoration: none; */
  color: var(--link);
  transition: 0.3s ease-out;
}
a:hover {
  /* text-decoration: none; */
  color: var(--link-hover);
}
body {
  width: 100vw;
  background-color: var(--bg);
}

body {
  left: 0;
  /* transform: scale(0.9) translate(-100px, -40px); */
}
#main_placeholder {
  transition: opacity 0.1s ease-out;
  transform: scale(0.9) translate(-100px, -40px);
}
@media only screen and (max-width: 1400px){
  #main_placeholder {
    transition: opacity 0.1s ease-out;
    transform: scale(0.9) translate(0px, -40px);
  }
}
.axis {
  shape-rendering: crispEdges;
  font-family: "Roboto", sans-serif;
}

/* #title {
            font-family: 'Roboto', sans-serif;
            font-weight: 600;
            font-size: 24px;
            text-align: center;
            fill: var(--text)
        } */
#main_title {
  position: fixed;
  margin-left: calc(var(--titleBlock-margin-left) + 8px);
  margin-top: var(--titleBlock-margin-top);
  text-align: left;
  font-size: 33px;
  line-height: 45px;
}

::-webkit-input-placeholder {
  /* Edge */
  color: var(--text);
  opacity: 1;
}

#text_input:focus::-webkit-input-placeholder {
  /* Edge */
  color: var(--text);
  opacity: 0.5;
}

input {
  outline: none;
}

#text_input {
  position: fixed;
  left: 0.5vw;
  margin-left: calc(var(--titleBlock-margin-left) + 159px);
  /* margin-top: calc(var(--titleBlock-margin-top)*2.5); */
  border: none;
  color: var(--text);
  background-color: var(--bg);
  border-bottom: 2px solid var(--text);
  padding: 0px 3px 6px 0px;
  font-size: 18px;

  transition: 0.1s ease-out;
}

#text_input:focus {
  padding-bottom: 8px;
}

#region_selected {
  position: fixed;
  left: 0.5vw;
  /* color: var(--map_fill); */
  margin-left: var(--titleBlock-margin-left);
  margin-top: calc(var(--titleBlock-margin-top) * 2.2);

  font-size: 2vw;
}

#region_canvas {
  fill: var(--surface);
}

p#intro_text {
  width: 375px;
  text-align: left;
  font-size: 1.1vw;
  position: fixed;
  top: 0;
  margin-top: calc(var(--titleBlock-margin-top) * 2.7);
  color: var(--map_fill);
  transition: 0.3s ease-out;
}

#legend_1,
#legend_2,
#legend_3 {
  transition: color 0.2s ease-out;
}

#language_canvas {
  position: fixed;
  cursor: pointer;
  left: 0;
  margin-left: var(--titleBlock-margin-left);
}

/* #text_input {
            position: absolute;
            color: var(--text);
            margin-left: 500px;
            top: 10px;
            font-size: 18px;
            z-index: +1
        } */

tspan {
  font-family: "Roboto", sans-serif;
}

#main_placeholder {
  text-align: center;
}

.text {
  color: var(--text);
  font-family: "Roboto", sans-serif;
}

#real_regions {
  transition: 0.2s ease-out;
}

.country_map_side {
  stroke: var(--text);
  fill: var(--transparent);
}

.btn_hover {
  /* stroke-dasharray: 170; */
  /* stroke-dashoffset: 600; */
  animation: btnHover 0.3s ease-out forwards;
}

@keyframes btnHover {
  0% {
    fill: var(--bg);
  }

  100% {
    fill: var(--selected_map_fill);
  }
}

/* @keyframes btnHover_old {
            0% {
                fill: var(--bg);
                filter: url(#noShadow);
            }

            15% {
                fill: var(--bg);

            }

            20% {
                fill: var(--bg);
                filter: url(#shadow);
            }


            100% {
                fill: var(--surface-bright);
                filter: url(#shadow);
            }
        } */

/* @keyframes btnHover {
            0% {
                fill: var(--bg);
                filter: url(#noShadow);
            }

            20% {
                filter: url(#noShadow);
            }

            30% {
                fill: var(--surface-bright);

            }

            100% {
                fill: var(--surface-bright);
                filter: url(#shadow);
            }
            } */
#map_ellipses {
  filter: url("#gaussianBlur");
  opacity: 0.2;
  transition: 0.3s ease-out;
}

#map_circles {
  opacity: 0.5;
}

.text_label,
.region_label {
  opacity: 0;
  transition: 0.2s ease-out 0.1s;
}

.notFound {
  animation: notFound 0.2s linear 2;
}

@keyframes notFound {
  0% {
    margin-left: calc(var(--titleBlock-margin-left) + 159px);
  }

  25% {
    margin-left: calc(var(--titleBlock-margin-left) + 152px);
  }

  50% {
    margin-left: calc(var(--titleBlock-margin-left) + 159px);
  }

  75% {
    margin-left: calc(var(--titleBlock-margin-left) + 162px);
  }

  100% {
    margin-left: calc(var(--titleBlock-margin-left) + 159px);
  }
}

.ref_regions {
  transition: 0.3s ease-out;
  /* transition: .1s ease-out .4s; */
}

.stop-right {
  stop-color: var(--surface-semiTransparent);
}

.stop-left {
  stop-color: var(--surface-transparent);
}

#stacked_area_on,
#stacked_area_off {
  cursor: pointer;
}

.confidence_label-unselected {
  fill: var(--surface-bright);
}

.confidence_label-selected:hover {
  fill: var(--surface-bright);
}

.confidence_label-selected {
  transition: 0.2s ease-out;
  fill: var(--surface);
}

#color_circles {
  transition: opacity 0.3s ease-out;
}

.ref_regions,
#country_map2_id,
#country_map2_id path {
  cursor: pointer;
}
.tick {
  opacity: 0.3;
}
#stacked_area_off:hover,
#stacked_area_on:hover {
  fill: var(--surface-bright);
}
.keywordLegend {
  font-weight: "bold";
}
.menu_button {
  fill: var(--transparent);
  transition: 0.3s ease-out;
  opacity: 0.7;
}
/* .menu_button:hover {
  fill: var(--white);
  opacity: 1;
} */
.menu_item {
  font-size: 18px;
  font-family: "Roboto Mono", sans-serif;
  fill: var(--text);
  /* fill: var(--bg); */
  pointer-events: none;
  /* text-anchor: middle; */
}
#menu {
  position: fixed;
  top: 0;
  right: 0;
}
.on {
  opacity: 1;
  pointer-events: all;
}
.off {
  opacity: 0;
  pointer-events: none;
}
#DETAILS,
#INTRO,
#CONTACTS {
  /* width: 100vw;
      height: 100%; */
  background-color: var(--bg);
  /* box-shadow: 0px 0px 10px #000000; */
  position: absolute;
  top: 0;
}
#INTRO{
  overflow-y: scroll;
}
.INTRO-mainTitle {
  width: 40vw;
  margin: 0 auto;
  font-size: 2vw;
  padding-bottom: 1vw;
  padding-top: 4vw;
}
.INTRO-mainText {
  border-top: solid white 3px;
  padding-top: 3vw;
  width: 40vw;
  margin: 0 auto;
  font-size: 1.1vw;
  line-height: 1.6vw;
}
.INTRO-proceed {
  width: 12vw;
  height: 1.3vw;
  border: 2px solid var(--text);
  color: var(--text);
  background-color: var(--transparent);
  position: fixed;
  bottom: 3vw;
  right: 10vw;
  text-align: center;
  padding: 0.5vw;
  font-family: "roboto", sans-serif;
  cursor: pointer;
  font-size: 1vw;
}
.INTRO-proceed:hover {
  background-color: var(--surface-bright);
}
/* @media screen and (max-width: 1400) {
      .INTRO-proceed {
        font-size: 1.2vw;
      } 
    }*/
#DETAILS {
  background-color: #e5e7e7;
  height: 100%;
  overflow: hidden;
}
.DETAILS-proceed {
  width: 5vw;
  height: 5vw;
  background-color: #43545b;
  cursor: pointer;
  position: fixed;
  right: 0;
  color: #e5e7e7;
  text-align: center;
  line-height: 4.5vw;
  font-size: 3vw;
}
.DETAILS-proceed span {
  transform: rotate(45deg);
  display: inline-block;
}
#languagePrompt {
  width: 0vw;
  
  padding: 0vw;
  padding: 1vw 1.8vw;
  background-color: var(--surface-bright);
  position: fixed;
  top: 0;
  left: 0;
  animation: languagePrompt 0.5s ease-out 1.5s forwards;
  opacity: 0;
  display: flex;
  justify-content: space-between;
}

@keyframes languagePrompt {
  to{
    opacity: 1;
    width: 19.5vw;
    color: var(--text);
    padding: 1vw 1.8vw;
  }
}

.promptMenu {
  cursor: pointer;
  font-family: "Roboto Mono", monospace;
  opacity: 0;

  animation: menuOptionsAppear 0.3s ease-out 2s forwards;
}
@keyframes menuOptionsAppear {
  to {
    opacity: 1;
  }
}

#selectedLangPointer {
  width: 1vw;
  height: 2px;
  background-color: var(--text);
  position: absolute;
  bottom: 0.7vw;
  opacity: 0;

  transition: 0.3s ease-out;
  animation: menuOptionsAppear 0.3s ease-out 2s forwards;
}

.icon_eye {
  pointer-events: none;
}

.empty_graph{
  text-anchor: middle;
}

#caption_remove{
  text-anchor: middle;
}

#noMobile{
  width: 100vw;
  height: 100vh;

  position: fixed;
  top:0;
  background-color: var(--bg);
  text-align: center;
  padding-top: 20vh;
}
.reminder{
  display: inline-block;
  background-color: var(--text);
  padding: 2vw;
  color: black;
  margin-top: 10%;
  font-family: "Roboto Mono", sans-serif;
}

.reminder::after{
  content:" >"
}