@import '../helpers/helpers';

.hotspot {

  &__img-wrap {
    width: 100%;
    position: relative;

    img {
      width: 100%;
      max-width: 100%;
    }
  }

  &__number {
    width: 38px;
    height: 38px;
    background-color: $white;
    display: inline-flex;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    color: $blue;
    border: 1px solid $blue;
    border-radius: 50px;
    cursor: pointer;
  }

  &__hotspot-list {
    position: absolute;
    top: 0;
    left: 15px;
    width: calc(100% - 30px);
    height: 100%;
    padding: 0;
    list-style: none;
    display: none;

    @include media-breakpoint-up(lg) {
      display: block;
    }
  }

  &__hotspot-item {
    width: 38px;
    height: 38px;
    background-color: $white;
    display: flex;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    color: $blue;
    border-color: $blue;
    border-radius: 50px;
    position: absolute;
    cursor: pointer;
  }

  &__1 {
    top: 27.2%;
    left: 7.5%;
  }

  &__2 {
    top: 10.3%;
    left: 46.3%;
  }

  &__3 {
    top: 12.6%;
    left: 58.8%;
  }

  &__4 {
    top: 17.4%;
    left: 78.6%;
  }

  &__5 {
    top: 24.4%;
    left: 88.3%;
  }

  &__6 {
    top: 21.5%;
    left: 58.6%;
  }

  &__7 {
    top: 39.5%;
    left: 48.8%;
  }

  &__8 {
    top: 45.7%;
    left: 56.6%;
  }

  &__9 {
    top: 59.7%;
    left: 57.4%;
  }

  &__10 {
    top: 65%;
    left: 45.7%;
  }

  &__11 {
    top: 67.7%;
    left: 58%;
  }

  &__12 {
    top: 91.2%;
    left: 49.5%;
  }

  &__13 {
    top: 93.3%;
    left: 58.7%;
  }
}

.popover-body {
  padding: 20px;

  ul {
    font-size: 15px;
  }
}

.hide {
  display: none;
}