.hi_heatmap {
  width: 208px;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(4, 1fr);
  column-gap: 2px;
  row-gap: 2px;
  margin: 0 auto;

  .hi_heatmap_dot {
    height: 12px;
    height: 12px;
    border-radius: 2px;
  }

  .dot_level_0 {
    background: #ebedf0;
  }
  .dot_level_1 {
    background: #9be9a8;
  }
  .dot_level_2 {
    background: #40c463;
  }
  .dot_level_3 {
    background: #30a14e;
  }
  .dot_level_4 {
    background: #216e39;
  }
  .dot_level_5 {
    background: #216e39;
  }

[data-tooltip] {
    position: relative
}

[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before {
    display: block;
    z-index: 99;
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding: .25rem .5rem;
    overflow: hidden;
    transform: translate(-50%,-.25rem);
    border-radius: 0.25rem;
    background: #1b2832;
    content: attr(data-tooltip);
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: .875rem;
    text-decoration: none;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    width: 120px;
    word-break: keep-all;
    white-space: break-spaces;
    opacity: 0;
    pointer-events: none
}

[data-tooltip]::after,[data-tooltip][data-placement=top]::after {
    padding: 0;
    transform: translate(-50%,0);
    border-top: .3rem solid;
    border-right: .3rem solid transparent;
    border-left: .3rem solid transparent;
    border-radius: 0;
    background-color: transparent;
    content: "";
    color: #1b2832;
  width: 8px;
  height: 4px;
}

[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before {
    top: 100%;
    bottom: auto;
    transform: translate(-50%,.25rem)
}

[data-tooltip][data-placement=bottom]:after {
    transform: translate(-50%,-.3rem);
    border: .3rem solid transparent;
    border-bottom: .3rem solid
}

[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before {
    top: 50%;
    right: 100%;
    bottom: auto;
    left: auto;
    transform: translate(-.25rem,-50%)
}

[data-tooltip][data-placement=left]:after {
    transform: translate(.3rem,-50%);
    border: .3rem solid transparent;
    border-left: .3rem solid
}

[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 100%;
    transform: translate(.25rem,-50%)
}

[data-tooltip][data-placement=right]:after {
    transform: translate(-.3rem,-50%);
    border: .3rem solid transparent;
    border-right: .3rem solid
}

[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before {
    opacity: 1
}

@media (hover: hover) and (pointer:fine) {
    [data-tooltip]:hover::after,[data-tooltip]:hover::before,[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after,[data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before {
        animation-duration:.2s;
        animation-name: tooltip-slide-top
    }

    [data-tooltip]:hover::after,[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after {
        animation-name: tooltip-caret-slide-top
    }

    [data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before {
        animation-duration: .2s;
        animation-name: tooltip-slide-bottom
    }

    [data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:hover::after {
        animation-name: tooltip-caret-slide-bottom
    }

    [data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before {
        animation-duration: .2s;
        animation-name: tooltip-slide-left
    }

    [data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:hover::after {
        animation-name: tooltip-caret-slide-left
    }

    [data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before {
        animation-duration: .2s;
        animation-name: tooltip-slide-right
    }

    [data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:hover::after {
        animation-name: tooltip-caret-slide-right
    }
}

@keyframes tooltip-slide-top {
    from {
        transform: translate(-50%,.75rem);
        opacity: 0
    }

    to {
        transform: translate(-50%,-.25rem);
        opacity: 1
    }
}

@keyframes tooltip-caret-slide-top {
    from {
        opacity: 0
    }

    50% {
        transform: translate(-50%,-.25rem);
        opacity: 0
    }

    to {
        transform: translate(-50%,0);
        opacity: 1
    }
}

@keyframes tooltip-slide-bottom {
    from {
        transform: translate(-50%,-.75rem);
        opacity: 0
    }

    to {
        transform: translate(-50%,.25rem);
        opacity: 1
    }
}

@keyframes tooltip-caret-slide-bottom {
    from {
        opacity: 0
    }

    50% {
        transform: translate(-50%,-.5rem);
        opacity: 0
    }

    to {
        transform: translate(-50%,-.3rem);
        opacity: 1
    }
}

@keyframes tooltip-slide-left {
    from {
        transform: translate(.75rem,-50%);
        opacity: 0
    }

    to {
        transform: translate(-.25rem,-50%);
        opacity: 1
    }
}

@keyframes tooltip-caret-slide-left {
    from {
        opacity: 0
    }

    50% {
        transform: translate(.05rem,-50%);
        opacity: 0
    }

    to {
        transform: translate(.3rem,-50%);
        opacity: 1
    }
}

@keyframes tooltip-slide-right {
    from {
        transform: translate(-.75rem,-50%);
        opacity: 0
    }

    to {
        transform: translate(.25rem,-50%);
        opacity: 1
    }
}

@keyframes tooltip-caret-slide-right {
    from {
        opacity: 0
    }

    50% {
        transform: translate(-.05rem,-50%);
        opacity: 0
    }

    to {
        transform: translate(-.3rem,-50%);
        opacity: 1
    }
}
}