.RussiaChoropleth {
  position: relative;
  .RussiaChoroplethScroll {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: #e2edff;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #5097f4;
      border: 2px solid #e2edff;
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
      background-color: #e2edff;
      border-radius: 5px;
    }
    path {
      stroke: white;
      stroke-width: 1px;
      cursor: pointer;
    }
    .legend {
      font-size: 12px;
    }
    & > svg {
      transform-origin: top left;
    }
  }
  .download_map {
    position: absolute;
    right: 16px;
    bottom: 140px;
    & > btn {
      width: 50px;
      height: 50px;
      border: none;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition-duration: .3s;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
      .svgIcon {
        fill: #5097f4;
      }
      .icon2 {
        width: 18px;
        height: 5px;
        border-bottom: 2px solid #5097f4;
        border-left: 2px solid #5097f4;
        border-right: 2px solid #5097f4;
      }
      .tooltip {
        position: absolute;
        left: -80px;
        opacity: 0;
        background-color: #5097f4;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition-duration: .2s;
        pointer-events: none;
        letter-spacing: 0.5px;
        &::before {
          position: absolute;
          content: "";
          width: 10px;
          height: 10px;
          background-color: #5097f4;
          background-size: 1000%;
          background-position: center;
          transform: rotate(45deg);
          right: -5%;
          transition-duration: .3s;
        }
      }
      &:hover .tooltip {
        opacity: 1;
        transition-duration: .3s;
      }
      &:hover {
        background-color: #5097f4;
        transition-duration: .3s;
      }
      &:hover .icon2 {
        border-bottom: 2px solid rgb(235, 235, 235);
        border-left: 2px solid rgb(235, 235, 235);
        border-right: 2px solid rgb(235, 235, 235);
      }
      &:hover .svgIcon {
        fill: rgb(255, 255, 255);
        animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      }
    }
    @keyframes slide-in-top {
      0% {
        transform: translateY(-10px);
        opacity: 0;
      }
      100% {
        transform: translateY(0px);
        opacity: 1;
      }
    }
  }
  .scale-panel {
    display: block;
    align-self: flex-end;
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 6px;
    background: #fff;
    box-shadow: 1px 3px 9px 1px rgb(209 209 209 / 66%);
    user-select: none;
    .flex-row {
      
      gap: 6px;
    }
    .flex-btns {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      .plus,
      .minus {
        display: block;
        cursor: pointer;
        padding: 4px 4px;
        text-align: center;
        font-size: 22px;
        line-height: 1;
        font-weight: 100;
        width: 25px;
        font-family: fantasy;
        color: #5097f4;
        text-decoration: none;
        transition: all 0.2s;
        border-radius: 2px;
        &:hover {
          box-shadow: 1px 3px 9px 1px rgb(209 209 209 / 66%);
          color: #222;
        }
      }
    }
    .scale-range {
      padding: 2px;
      height: 100px;
      input[type="range"] {
        height: 100%;
        width: 4px;
        border-radius: 5px;
        background: #d5dbe1;
        outline: none;
        opacity: 0.7;
        -webkit-transition: 0.2s;
        transition: opacity 0.2s;
        writing-mode: vertical-lr;
        direction: rtl;
        appearance: slider-vertical;
        -webkit-appearance: none;
        vertical-align: bottom;
        &::-webkit-slider-thumb {
          appearance: none;
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: #5097f4;
          cursor: pointer;
          transition: 0.3s ease-in-out;
          &:hover {
            box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.16);
            transition: 0.3s ease-in-out;
          }
        }
        &::-moz-range-thumb {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: #000000;
          cursor: pointer;
        }
      }
    }
  }
}
.mapTooltip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  flex-direction: column;
  width: 250px;
  
  padding: 8px;
  font-size: 10px;
  background: #ffffe0;
  border: 1px;
  border-radius: 8px;
  pointer-events: none;
  font: 16px sans-serif;
  background: #fff;
  pointer-events: none;
  border: 10px;
  user-select: none;
  z-index: 1;
}
@keyframes slide-in-top {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}