$shortTimer: 0.25s;
$medTimer: 0.25s;
$itapp-viz-text-color: $itdarkgray;
$itapp-viz-vertical-slide-distance:  220;
$itapp-font-family: 'Titillium Web', sans-serif;
text {
    font: 9px $itapp-font-family;
    stroke: none;
    fill: $itapp-viz-text-color;
}
@include keyframes(growDialog) {
    0% {
	    opacity: 0;
	    left: -#{$popover-width}px;
    }
    30% { 
	    opacity: 1;
    }
    100% {
	    left: 0;
    }
}
.DialogIn {
	@include animation(growDialog, ease-in-out);
}

.DialogIn-enter {
	@include animation-duration($shortTimer);
}

.fadeOut-leave {
	-webkit-animation-duration: $shortTimer;
	animation-duration: $shortTimer;
}

@include keyframes(fadeOutRightToLeft) {
    0% {
        @include transform(translate(0, 0px));
        opacity: 1;
    }
    100% {
        @include transform(translate(-200px, 0px));
        opacity: 0;
    }
}

.fadeOutRightToLeft {
	@include animation(fadeOutRightToLeft, ease);
}

.fadeOutRightToLeft-enter {
	@include animation-duration($shortTimer);
}

@include keyframes(fadeInRightToLeft) {
    0% {
        @include transform(translate(200px, 0px));
        opacity: 0;
    }
    100% {
        @include transform(translate(0px, 0px));
        opacity: 1;
    }
}
.fadeInRightToLeft-enter {
	@include animation-duration($shortTimer);
}
.fadeInRightToLeft {
	@include animation(fadeInRightToLeft, ease);
}
