.ici-tour {
  position: absolute;
  min-height: 100px;
  max-height:40%;
  max-width:40%;
  background-color: #50596c;
  color: #fff;
  border-radius: 3px;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.5));
  padding: 1rem;
  text-align: center;
  z-index: 10000;
  font-size:14px;

  .tour-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: .5rem;
    border-color: #50596c;
  }

  &.tour-right {
    .tour-arrow {
      border-width: .5rem .5rem .5rem 0;
      border-left-color: transparent;
      border-top-color: transparent;
      border-bottom-color: transparent;
      left: -.5rem;
      top: calc(50% - 1rem);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &.tour-left {
    .tour-arrow {
      border-width: .5rem 0rem .5rem .5rem;
      border-right-color: transparent;
      border-top-color: transparent;
      border-bottom-color: transparent;
      right: -.5rem;
      top: calc(50% - 1rem);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &.tour-top {
    .tour-arrow {
      border-width: .5rem .5rem 0 .5rem;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      bottom: -.5rem;
      left: calc(50% - 1rem);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &.tour-bottom {
    .tour-arrow {
      border-width: 0 .5rem .5rem .5rem;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top-color: transparent;
      top: -.5rem;
      left: calc(50% - 1rem);
      margin-top: 0;
      margin-bottom: 0;
    }
  }


  .tour-content {
      margin-bottom:10px;
  }

  .tour-handler {

  }
}

.tour-enter-active, .tour-leave-active {
  transition: opacity 200ms;
}

.tour-enter, .tour-leave-to {
  opacity: 0;
}