.pulseinandout {
    animation: fadeIn 4s ease-in-out infinite;
}

@keyframes fadeIn {
    0%   { opacity:0; }
    10%  { opacity:1; }
    90%  { opacity:1; }
    100% { opacity:0; }
}




/* Below entries are expirimental and in testing for future use */

.callout-warning {
	/*
    background: black;
	border-radius: 50%;
	margin: 10px;
	height: 20px;
	width: 20px;
    */

	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}


@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}


.dot-span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    font-size: 1.5em;
}
  
.dot-span::before {
content: "\2022"; /* Unicode character for bullet point */
}



/* Callout Warning with a border pulsing in and out */
.rt-warning-pulse {
	/* Animate border */
	animation: rtAnimate-PulseBorder 5s infinite;
}

/* Animate border keyframes */
@keyframes rtAnimate-PulseBorder {
	0% {
		border-color: #fff;
	}
	25% {
		border-color: #007bff;
	}
	50% {
		border-color: #fff;
	}
	75% {
		border-color: #007bff;
	}
	100% {
		border-color: #fff;
	}
}


/* Create rotating border */
.rt-btn-rotate-border {
	position: relative;
	overflow: hidden;
}

.rt-btn-rotate-border::after {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	height: calc(100% + 4px);
	width: calc(100% + 4px);
	border: 5px solid transparent;
	border-top-color: #007bff;
	border-radius: 50%;
	animation: rtAnimate-RotateBorder 5s linear infinite;
}

/* Rotate border keyframes */
@keyframes rtAnimate-RotateBorder {
	to {
		transform: rotate(360deg);
	}
}




		/* Create rotating border */
		.rt-btn-rotate {
			position: relative;
			overflow: hidden;
			padding: 0.5rem 1rem;
			font-size: 0.8rem;
			border-radius: 0.2rem;
			background-color: #dc3545;
			border: 2px solid #fff;
			color: #fff;
		}
		.rt-btn-rotate::after {
			content: '';
			position: absolute;
			top: -2px;
			left: -2px;
			height: calc(100% + 4px);
			width: calc(100% + 4px);
			border: 2px solid transparent;
			border-right-color: #007bff;
			border-radius: 0.2rem;
			animation: rotateBorder 4s linear infinite;
			box-sizing: border-box;
		}
		/* Rotate border keyframes */
		@keyframes rotateBorder {
			0% {
				transform: translateX(0);
			}
			25% {
				transform: translateX(calc(100% - 4px));
			}
			50% {
				transform: translateX(calc(100% - 4px)) translateY(calc(100% - 4px));
			}
			75% {
				transform: translateY(calc(100% - 4px));
			}
			100% {
				transform: translateX(0);
			}
		}



.pop-element {
    visibility: hidden;
    opacity: 0;
    transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}
  
.pop-element.show-element {
    visibility: visible;
    opacity: 1;
    transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
}


.pop-out-custom {
    opacity: 0;
    transform: scale(0.5);
    transition: all 8s ease-in-out;
  }
  
.pop-in-custom {
    opacity: 1;
    transform: scale(1);
}