/*
 * Top Top - Elementor Widget
 * Base styles + keyframes.
 * Per-instance sizing/colors are output by Elementor controls (selectors) and inline effect CSS in render.
 */

.top-top-widget .top-top-wrapper{
	position: fixed;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: opacity;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.top-top-widget .top-top-icon{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-style: solid;
	overflow: visible;
	text-decoration: none;
}

.top-top-widget .top-top-icon-inner i{
	display: inline-block;
	font-size: inherit;
	color: inherit;
	z-index: 2;
	position: relative;
}

.top-top-widget .top-top-icon-inner svg{
	width: 1em;
	height: 1em;
	z-index: 2;
	position: relative;
	display: inline-block;
}

.top-top-widget .top-top-ring{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transform: rotate(-90deg);
	z-index: 1;
	shape-rendering: geometricPrecision;
}

.top-top-widget .top-top-ring circle{
	fill: none;
	vector-effect: non-scaling-stroke;
}

/* Keyframes used by some effects */
@keyframes pulseIn{0%{opacity:0;transform:scale(0.95)}50%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes pulseOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.95)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1)}}
@keyframes bounceOut{0%{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(0.3)}}
@keyframes scaleIn{0%{opacity:0;transform:scale(0.7)}70%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes scaleOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}
@keyframes shakeIn{0%{opacity:0;transform:translateX(-10px)}25%{opacity:1;transform:translateX(10px)}50%{transform:translateX(-10px)}75%{transform:translateX(10px)}100%{transform:translateX(0)}}
@keyframes shakeOut{0%{opacity:1;transform:translateX(0)}25%{transform:translateX(10px)}50%{opacity:0;transform:translateX(-10px)}100%{opacity:0;transform:translateX(0)}}

/* Respect reduced motion when enabled via widget */
.top-top-widget[data-reduced-motion="yes"] .top-top-wrapper,
.top-top-widget[data-reduced-motion="yes"] .top-top-wrapper *{
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce){
	.top-top-widget[data-respect-prm="yes"] .top-top-wrapper,
	.top-top-widget[data-respect-prm="yes"] .top-top-wrapper *{
		animation: none !important;
		transition: none !important;
	}
}