fadeicon(image, posx, posx2, size)
  width size
  height size
  position relative 
  &:before
    content ""
    position absolute
    top 0
    left 0
    bottom 0
    right 0
    width size
    height size
    background-image url(../images/icons/image.png)
    background-position posx 0px
    background-repeat no-repeat
    opacity 1
    -webkit-transition opacity 0.5s
  &:after
    content ""
    position absolute
    top 0
    left 0
    bottom 0
    right 0
    width size
    height size
    background-image url(../images/icons/image.png)
    background-position posx2 0px
    background-repeat no-repeat
    opacity 0
    -webkit-transition opacity 0.5s
  &:hover:before
    opacity 0
  &:hover:after
    opacity 1

.left
    float left

.right
    float right

scrollable()
    overflow-x hidden
    overflow-y overlay
    -webkit-overflow-scrolling touch

    &::-webkit-scrollbar
        width 5px

    &::-webkit-scrollbar-track
        background-color $ScrollBarBg
        border-radius 2px

    &::-webkit-scrollbar-thumb
        background-color $ScrollBarThumb
        border-radius 2px

        &:hover
            background-color $ScrollBarThumbHover

    &::-webkit-resizer,
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-button,
    &::-webkit-scrollbar-track-piece
        display none

.tooltip-arrow
  position absolute
  width 0
  height 0
  border-color transparent
  border-style solid

.tooltip
  &.top
    .tooltip-arrow
      bottom 0
      left 50%
      margin-left -5px
      border-width 5px 5px 0
      border-top-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.top-left
    .tooltip-arrow
      bottom 0
      left 5px
      border-width 5px 5px 0
      border-top-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.top-right
    .tooltip-arrow
      right 5px
      bottom 0
      border-width 5px 5px 0
      border-top-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.right
    .tooltip-arrow
      top 50%
      left 0
      margin-top -5px
      border-width 5px 5px 5px 0
      border-right-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.left
    .tooltip-arrow
      top 50%
      right 0
      margin-top -5px
      border-width 5px 0 5px 5px
      border-left-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.bottom
    .tooltip-arrow
      top 0
      left 50%
      margin-left -5px
      border-width 0 5px 5px
      border-bottom-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.bottom-left
    .tooltip-arrow
      top 0
      left 5px
      border-width 0 5px 5px
      border-bottom-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.bottom-right
    .tooltip-arrow
      top 0
      right 5px
      border-width 0 5px 5px
      border-bottom-color rgba(9, 13, 18, 0.75)
      transition all 0.5s

.tooltip-inner
    max-width 280px
    padding 4px 8px
    color #fff
    text-align center
    text-decoration none
    background-color rgba(9, 13, 18, 0.75)
    border-radius 4px
    font-family $MainFont !important
    font-size 12px !important
    line-height 18px !important

.toolcimg
    max-width 102px
    border 1px solid black
    border-radius 5%
    box-shadow 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.3)
