$error : #E57373;
$success : #81C784;

.Tooltip {
  position           : absolute;
  display            : block;
  background-color   : #FFFFFF; /*#B0BEC5;*/
  color              : #000000;
  border             : 1px solid $success;
  height             : auto;
  width              : auto;
  padding            : 10px;
  overflow           : visible;

  border-radius      : 5px;
  -webkit-box-shadow : 0 0 3px 0 rgba(50, 50, 50, 0.4);
  -moz-box-shadow    : 0 0 3px 0 rgba(50, 50, 50, 0.4);
  box-shadow         : 0 0 3px 0 rgba(50, 50, 50, 0.4);
}

.Tooltip:after {
  position : absolute;
  display  : block;
  content  : "";
}

.Tooltip.TooltipAbove:after {
  bottom             : -7px;
  height             : 14px;
  width              : 14px;
  left               : calc(50% - 7px);
  transform          : rotate(45deg);
  -webkit-transform  : rotate(45deg);
  background         : #FFFFFF;
  border-right       : 1px solid $success;
  border-bottom      : 1px solid $success;
  -webkit-box-shadow : 2px 2px 2px 0 rgba(50, 50, 50, 0.3);
  -moz-box-shadow    : 2px 2px 2px 0 rgba(50, 50, 50, 0.3);
  box-shadow         : 2px 2px 2px 0 rgba(50, 50, 50, 0.3);
}

.Tooltip.TooltipBelow:after {
  top                : -7px;
  height             : 14px;
  width              : 14px;
  left               : calc(50% - 7px);
  transform          : rotate(45deg);
  -webkit-transform  : rotate(45deg);
  border-left        : 1px solid $success;
  border-top         : 1px solid $success;
  background         : #FFFFFF;
  -webkit-box-shadow : -1px -1px 2px -1px rgba(50, 50, 50, 0.4);
  -moz-box-shadow    : -1px -1px 2px -1px rgba(50, 50, 50, 0.4);
  box-shadow         : -1px -1px 2px -1px rgba(50, 50, 50, 0.4);
}

.Tooltip.TooltipLeft:after {
  right              : -7px;
  height             : 14px;
  width              : 14px;
  top                : calc(50% - 7px);
  transform          : rotate(45deg);
  -webkit-transform  : rotate(45deg);
  border-right       : 1px solid $success;
  border-top         : 1px solid $success;
  background         : #FFFFFF;
  -webkit-box-shadow : 2px -1px 2px -2px rgba(50, 50, 50, 0.4);
  -moz-box-shadow    : 2px -1px 2px -2px rgba(50, 50, 50, 0.4);
  box-shadow         : 2px -1px 2px -2px rgba(50, 50, 50, 0.4);
}

.Tooltip.TooltipRight:after {
  left               : -7px;
  height             : 14px;
  width              : 14px;
  top                : calc(50% - 7px);
  transform          : rotate(45deg);
  -webkit-transform  : rotate(45deg);
  border-left        : 1px solid $success;
  border-bottom      : 1px solid $success;
  background         : #FFFFFF;
  -webkit-box-shadow : -2px -1px 2px -2px rgba(50, 50, 50, 0.4);
  -moz-box-shadow    : -2px -1px 2px -2px rgba(50, 50, 50, 0.4);
  box-shadow         : -2px -1px 2px -2px rgba(50, 50, 50, 0.4);
}

.Tooltip.TooltipAlignRight:after {
  left: auto;
  right : 30px;
}

.Tooltip.TooltipAlignLeft:after {
  right: auto;
  left : 30px;
}

.TooltipLeft.TooltipAbove.autoplace:after, .TooltipRight.TooltipAbove.autoplace:after {
  bottom             : -7px;
  top                : auto;
  border             : none;
  border-right       : 1px solid $success;
  border-bottom      : 1px solid $success;
  -webkit-box-shadow : 2px 2px 2px 0 rgba(50, 50, 50, 0.3);
  -moz-box-shadow    : 2px 2px 2px 0 rgba(50, 50, 50, 0.3);
  box-shadow         : 2px 2px 2px 0 rgba(50, 50, 50, 0.3);
}

.TooltipLeft.TooltipAbove.autoplace:after {
  left  : 30px;
  right : auto;
}

.TooltipRight.TooltipAbove.autoplace:after {
  right : 30px;
  left  : auto;
}

.TooltipLeft.TooltipBelow.autoplace:after, .TooltipRight.TooltipBelow.autoplace:after {
  top                : -7px;
  bottom             : auto;
  border             : none;
  border-left        : 1px solid $success;
  border-top         : 1px solid $success;
  -webkit-box-shadow : -1px -1px 2px -1px rgba(50, 50, 50, 0.4);
  -moz-box-shadow    : -1px -1px 2px -1px rgba(50, 50, 50, 0.4);
  box-shadow         : -1px -1px 2px -1px rgba(50, 50, 50, 0.4);
}

.TooltipLeft.TooltipBelow.autoplace:after {
  left  : 30px;
  right : auto;
}

.TooltipRight.TooltipBelow.autoplace:after {
  right : 30px;
  left  : auto;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity           : 0;
    -webkit-transform : translate3d(0, -100%, 0);
    transform         : translate3d(0, -100%, 0);
  }

  to {
    opacity           : 1;
    -webkit-transform : none;
    transform         : none;
  }
}

@keyframes fadeInDown {
  from {
    opacity           : 0;
    -webkit-transform : translate3d(0, -20%, 0);
    transform         : translate3d(0, -20%, 0);
  }

  to {
    opacity           : 1;
    -webkit-transform : none;
    transform         : none;
  }
}

.fadeInDown {
  -webkit-animation-name : fadeInDown;
  animation-name         : fadeInDown;
}