/*

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: 12px;
  line-height: 150%;

  margin-bottom: 10px;

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

  width: 600px;



}
.dzstooltip.width-auto{
  width: auto;
}

.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{
  content: "";
  position: absolute;;
  top: 100%;
  left: 10px;
  width: 50px;
  height: 10px;

}

.dzstooltip.align-center{

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

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

}


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

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

    z-index: 53;
  }
}