/*

dzs tooltips

arrow-top,
arrow-bottom
 -- align-left
 -- align-center (js)
 -- align-top

arrow-left,
arrow-right
 -- align-top
 -- align-center (js)
 -- align-bottom


custom css3 effects

*see about custom animation

*/

@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;transition-duration: $transition-duration;transition-timing-function: $transition-timing;-moz-transition-property:$transition-property;-moz-transition-duration: $transition-duration;-moz-transition-timing-function:$transition-timing;-webkit-transition-property:$transition-property;-webkit-transition-duration: $transition-duration;-webkit-transition-timing-function:$transition-timing;-o-transition-property:$transition-property;-o-transition-duration: $transition-duration;-o-transition-timing-function:$transition-timing;-ms-transition-property:$transition-property;
  -ms-transition-duration: $transition-duration;-ms-transition-timing-function:$transition-timing;
}

@mixin boxsizing() {
  -moz-box-sizing:    border-box;   -webkit-box-sizing: border-box;    box-sizing:        border-box;
}




$transition-property: visibility, opacity;
$transition-duration: 0.3s;
$transition-timing: ease-out;


$color_bg: rgba(20,20,20, 0.9);
$color_txt: #eeeeee;
.dzstooltip-con{
  position: relative;
  cursor: pointer;

}


.dzstooltip{
  display: inline-block;
  position: absolute;
  cursor: auto;
  visibility: hidden;
  opacity: 0;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);
  @include boxsizing();

  bottom: 100%;
  left:-5px;

  font-size: 13px;
  line-height: 150%;

  margin-bottom: 10px;

  background-color: $color_bg;
  color: $color_txt;
  padding: 10px 15px;

  width: 600px;



  transform: translate3d(0,0px,0);
  -webkit-transform: translate3d(0,0px,0);



  $transition-property: visibility, opacity;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  > .tooltip-close{
    display: block;
    text-align: center;
    line-height: 1;

    position: absolute;
    top: 10px;
    right: 10px;

    padding: 5px 8px;

    text-indent: 1px;
    font-family: "Helvetica", Courier, Arial, sans-serif;
    font-weight: 300;
    border-radius: 50%;

    background-color: #efefef;
    color: #777;

    cursor: pointer;

    visibility: hidden;
    opacity: 0;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  .tooltip-title{
    font-size: 20px;
    display: block;
    font-family: "Lato", "Open Sans",arial;

    margin-bottom: 5px;
  }


  .content-inner{
    padding: 13px 20px;
    display: block;

  }

}

.dzstooltip:hover{
  > .tooltip-close{
    opacity: 1;
    visibility: visible;
  }
}


.dzstooltip.arrow-top{
  top: 100%;
  bottom: auto;
  margin-top: 10px;
  margin-bottom: 0;
}


/* arrow from start means the arrow will start from the very start */
.dzstooltip.arrow-from-start{
  left:-10px;
}
.dzstooltip.arrow-from-start.arrow-bottom:before{
  left:10px;
}

$transition-property: opacity,visibility, z-index,transform;
$transition-duration: 0.3s;
$transition-timing: ease-out;
.dzstooltip.transition-slidein{
  transform: translate3d(0,-5px,0);
  -webkit-transform: translate3d(0,-5px,0);
  @include apply_transition($transition-property, $transition-duration, $transition-timing);
}
.dzstooltip.width-auto{
  width: auto;
  *{
    white-space: nowrap;
  }
}

.dzstooltip.arrow-bottom:before{
  content: "";
  position: absolute;;
  top: 100%;
  left: 15px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;

  border-top: 7px solid $color_bg;
}

/* - aux padder */
.dzstooltip.arrow-bottom:after, .dzstooltip.arrow-top:after, .dzstooltip.arrow-bottom:after, .dzstooltip.arrow-bottom:after{
  content: "";
  position: absolute;;
  top: 100%;
  left: 10px;
  width: 50px;
  height: 10px;

}

.dzstooltip.arrow-top:after{
  top: auto;
  bottom: 100%;
}



.dzstooltip.arrow-left{
  top: 0%;
  bottom: auto;
  left:100%;
  margin-left: 10px;
  margin-bottom: 0;
}

.dzstooltip.arrow-left:before{
  content: "";
  position: absolute;;
  bottom: auto; top: 10px;
  left: auto;
  right: 100%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid $color_bg;

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}


.dzstooltip.arrow-right{
  top: 0%;
  bottom: auto;
  left:auto;
  right: 100%;
  margin-left: -10px;
  margin-bottom: 0;
}

.dzstooltip.arrow-right:before{
  content: "";
  position: absolute;;
  bottom: auto; top: 10px;
  left: 100%;
  right: auto;
  width: 0;
  height: 0;
  border-left: 7px solid $color_bg;
  border-right: 7px solid transparent;

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}




.dzstooltip.arrow-top:before{
  content: "";
  position: absolute;;
  bottom: 100%; top: auto;
  left: 15px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;

  border-bottom: 7px solid $color_bg;
}

.dzstooltip.align-center{
  transform: translate3d(-50%,0,0);

  left:0;
}


/* -- set throught javascript */
.dzstooltip.align-center.arrow-left:before,.dzstooltip.align-center.arrow-right:before{
  top: 50%;
  margin-top: 0px;
}

.dzstooltip.align-center.arrow-bottom:before,.dzstooltip.align-center.arrow-top:before{
  left: 50%;
  margin-left: -4px;
}

/* - aux padder */
.dzstooltip.align-center.arrow-bottom:after{
  left: 50%;
  margin-left: -25px;

}





.dzstooltip.align-right{

  left:auto;
  right: 15px;
}


.dzstooltip.align-bottom{
  top: auto; bottom:-15px;
}
.dzstooltip.align-bottom:before{
  top: auto; bottom:10px;
}


.dzstooltip.align-right.arrow-bottom:before,.dzstooltip.align-right.arrow-top:before{
  left: auto;
  right: 8px;
  margin-left: 0;
}

/* - aux padder */
.dzstooltip.align-right.arrow-bottom:after,.dzstooltip.align-right.arrow-top:after{
  left: 100%;
  margin-left: -25px;

}


.dzstooltip.no-arrow:before{
  display: none;
}

.dzstooltip-con:not(.for-click):hover > .dzstooltip, .dzstooltip.active{
    visibility: visible;
    opacity: 1;

    z-index: 53;
}
.dzstooltip--selector-top{
  position: absolute;
  bottom: 100%;
  height: 20px;
  width: 100%;
  left:0;
}


.dzstooltip.skin-black{
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #eeeeee;
  border-radius: 3px;
  font-size: 0.9rem;
  line-height: 1.5rem;
}
.dzstooltip.skin-white{
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #111111;
  border-radius: 3px;
  font-size: 0.9rem;
  line-height: 1.5rem;
}
.dzstooltip.skin-whiteheading{
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #111111;
  font-size: 0.9rem;
  line-height: 1.5rem;
  padding: 15px;

  .tooltip-heading{
    background-color: #cb1919;
    display: block;

    color: #fff;

    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px;
    margin-bottom: 10px;
    padding: 15px;
  }

  &.arrow-bottom:before{
    border-top-color: #ffffff;
  }
  &.arrow-top:before{
    border-bottom-color: #ffffff;
  }
}

$color_bg: rgba(255,255,255,0.9);
$color_bg: #eee;
.dzstooltip.skin-whiteheading.arrow-top:before{
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;

  border-bottom: 15px solid $color_bg;
}
.dzstooltip.skin-whiteheading.arrow-left{
  margin-left: 15px;
}
.dzstooltip.skin-whiteheading.arrow-right{
  margin-right: 15px;
}
.dzstooltip.skin-whiteheading.arrow-left:before{
  border-left: 10px solid transparent;
  border-right: 10px solid $color_bg;

  border-top : 10px solid transparent;
  border-bottom: 10px solid transparent;

  margin-top: -5px;
}
.dzstooltip.skin-whiteheading.arrow-right:before {
  border-left: 10px solid $color_bg;
  border-right: 10px solid transparent;

  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

  margin-top: -5px;
}



$color_highlight:#e74c3c;

.dzstooltip.skin-red{
  background: $color_highlight;
  border: 0px solid rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border-radius: 0px;
  font-size: 14px;
  font-family: "Open Sans",arial, serif;
  font-weight: bold;

}


.dzstooltip.skin-red.arrow-bottom:before{
  border-top-color: #e74c3c;
  border-top-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;

}
.dzstooltip.skin-red.arrow-right:before{
  border-left-color: #e74c3c;
  border-top-width: 10px;
  border-left-width: 10px;
  border-bottom-width: 10px;

  top: 25px;
}
.dzstooltip.skin-red.arrow-bottom.align-right:before{
  right:20px;

}



$color_highlight:#ffffff;

.dzstooltip.skin-white{
  background: $color_highlight;
  border: 0px solid rgba(0, 0, 0, 0.5);
  color: #444444;
  line-height: 1.9;
  border-radius: 0px;
  font-size: 13px;
  font-family: "Open Sans",arial, serif;
  padding:0;

  box-shadow: 2px 2px 4px rgba(0,0,0,0.34);


}

.dzstooltip.align-top.skin-white.arrow-right{
  //display: none;
}
.dzstooltip.align-top.skin-white.arrow-right:before{
  content: '';
  position: absolute;
  top:0;
  right:-6px;
  width: 6px;
  height: 10px;
}

.dzstooltip[data-css_right]{

}


@media (max-width: 500px){
  body.js {
    .dzstooltip {
      position: fixed;
      width: calc(100% - 20px);
      top: 0;
      height: auto;
      bottom: auto;
      z-index: 500000000;
      margin: 10px;
      left: 0;
      right: auto;
    }
  }
}