hr.style1{
	border-top: 1px solid #8c8b8b;
}


hr.style2 {
	border-top: 3px double #8c8b8b;
}

hr.style3 {
	border-top: 1px dashed #8c8b8b;
}

hr.style4 {
	border-top: 1px dotted #8c8b8b;
}

hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}

hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}

hr.style7 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}


hr.style8 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

hr.style8:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

hr.style9 {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}

hr.style10 {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #fff;
}

hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/images/hr-11.png) repeat-x 0 0;
	border: 0;
}

hr.style12 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/images/hr-12.png) repeat-x 0 0;
	border: 0;
}

hr.style13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

hr.style14 { 
	border: 0; 
	height: 1px; 
	background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}


hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}

hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

hr.style16 { 
	border-top: 1px dashed #8c8b8b; 
} 

hr.style16:after { 
	content: '\002702'; 
	display: inline-block; 
	position: relative; 
	top: -12px; 
	left: 40px; 
	padding: 0 3px; 
	background: #f0f0f0; 
	color: #8c8b8b; 
	font-size: 18px; 
}

hr.style17 {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}

hr.style17:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}

hr.style18 { 
	height: 30px; 
	border-style: solid; 
	border-color: #8c8b8b; 
	border-width: 1px 0 0 0; 
	border-radius: 20px; 
} 
hr.style18:before { 
	display: block; 
	content: ""; 
	height: 30px; 
	margin-top: -31px; 
	border-style: solid; 
	border-color: #8c8b8b; 
	border-width: 0 0 1px 0; 
	border-radius: 20px; 
}
/*LOADING DOTS*/

.dot-elastic {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #9880ff;
	color: #9880ff;
	animation: dotElastic 1s infinite linear;
}

.dot-elastic::before, .dot-elastic::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
}

.dot-elastic::before {
	left: -15px;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #9880ff;
	color: #9880ff;
	animation: dotElasticBefore 1s infinite linear;
}

.dot-elastic::after {
	left: 15px;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #9880ff;
	color: #9880ff;
	animation: dotElasticAfter 1s infinite linear;
}

@keyframes dotElasticBefore {
	0% {
		transform: scale(1, 1);
	}
	25% {
		transform: scale(1, 1.5);
	}
	50% {
		transform: scale(1, 0.67);
	}
	75% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(1, 1);
	}
}

@keyframes dotElastic {
	0% {
		transform: scale(1, 1);
	}
	25% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(1, 1.5);
	}
	75% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(1, 1);
	}
}

@keyframes dotElasticAfter {
	0% {
		transform: scale(1, 1);
	}
	25% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(1, 0.67);
	}
	75% {
		transform: scale(1, 1.5);
	}
	100% {
		transform: scale(1, 1);
	}
}

/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
 .dot-pulse {
 	position: relative;
 	left: -9999px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	box-shadow: 9999px 0 0 -5px #9880ff;
 	animation: dotPulse 1.5s infinite linear;
 	animation-delay: .25s;
 }

 .dot-pulse::before, .dot-pulse::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 }

 .dot-pulse::before {
 	box-shadow: 9984px 0 0 -5px #9880ff;
 	animation: dotPulseBefore 1.5s infinite linear;
 	animation-delay: 0s;
 }

 .dot-pulse::after {
 	box-shadow: 10014px 0 0 -5px #9880ff;
 	animation: dotPulseAfter 1.5s infinite linear;
 	animation-delay: .5s;
 }

 @keyframes dotPulseBefore {
 	0% {
 		box-shadow: 9984px 0 0 -5px #9880ff;
 	}
 	30% {
 		box-shadow: 9984px 0 0 2px #9880ff;
 	}
 	60%,
 	100% {
 		box-shadow: 9984px 0 0 -5px #9880ff;
 	}
 }

 @keyframes dotPulse {
 	0% {
 		box-shadow: 9999px 0 0 -5px #9880ff;
 	}
 	30% {
 		box-shadow: 9999px 0 0 2px #9880ff;
 	}
 	60%,
 	100% {
 		box-shadow: 9999px 0 0 -5px #9880ff;
 	}
 }

 @keyframes dotPulseAfter {
 	0% {
 		box-shadow: 10014px 0 0 -5px #9880ff;
 	}
 	30% {
 		box-shadow: 10014px 0 0 2px #9880ff;
 	}
 	60%,
 	100% {
 		box-shadow: 10014px 0 0 -5px #9880ff;
 	}
 }

/**
 * ==============================================
 * Dot Flashing
 * ==============================================
 */
 .dot-flashing {
 	position: relative;
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotFlashing 1s infinite linear alternate;
 	animation-delay: .5s;
 }

 .dot-flashing::before, .dot-flashing::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 }

 .dot-flashing::before {
 	left: -25px;
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotFlashing 1s infinite alternate;
 	animation-delay: 0s;
 }

 .dot-flashing::after {
 	left: 25px;
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotFlashing 1s infinite alternate;
 	animation-delay: 1s;
 }

 @keyframes dotFlashing {
 	0% {
 		background-color: #9880ff;
 	}
 	50%,
 	100% {
 		background-color: #ebe6ff;
 	}
 }

/**
 * ==============================================
 * Dot Collision
 * ==============================================
 */
 .dot-collision {
 	position: relative;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 }

 .dot-collision::before, .dot-collision::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 }

 .dot-collision::before {
 	left: -10px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotCollisionBefore 2s infinite ease-in;
 }

 .dot-collision::after {
 	left: 10px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotCollisionAfter 2s infinite ease-in;
 	animation-delay: 1s;
 }

 @keyframes dotCollisionBefore {
 	0%,
 	50%,
 	75%,
 	100% {
 		transform: translateX(0);
 	}
 	25% {
 		transform: translateX(-15px);
 	}
 }

 @keyframes dotCollisionAfter {
 	0%,
 	50%,
 	75%,
 	100% {
 		transform: translateX(0);
 	}
 	25% {
 		transform: translateX(15px);
 	}
 }

/**
 * ==============================================
 * Dot Revolution
 * ==============================================
 */
 .dot-revolution {
 	position: relative;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 }

 .dot-revolution::before, .dot-revolution::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 }

 .dot-revolution::before {
 	left: 0;
 	top: -15px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	transform-origin: 5px 20px;
 	animation: dotRevolution 1.4s linear infinite;
 }

 .dot-revolution::after {
 	left: 0;
 	top: -30px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	transform-origin: 5px 35px;
 	animation: dotRevolution 1s linear infinite;
 }

 @keyframes dotRevolution {
 	0% {
 		transform: rotateZ(0deg) translate3d(0, 0, 0);
 	}
 	100% {
 		transform: rotateZ(360deg) translate3d(0, 0, 0);
 	}
 }

/**
 * ==============================================
 * Dot Carousel
 * ==============================================
 */
 .dot-carousel {
 	position: relative;
 	left: -9999px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
 	animation: dotCarousel 1.5s infinite linear;
 }

 @keyframes dotCarousel {
 	0% {
 		box-shadow: 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff;
 	}
 	50% {
 		box-shadow: 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff;
 	}
 	100% {
 		box-shadow: 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff;
 	}
 }

/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */
 .dot-typing {
 	position: relative;
 	left: -9999px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
 	animation: dotTyping 1.5s infinite linear;
 }

 @keyframes dotTyping {
 	0% {
 		box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
 	}
 	16.667% {
 		box-shadow: 9984px -10px 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
 	}
 	33.333% {
 		box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
 	}
 	50% {
 		box-shadow: 9984px 0 0 0 #9880ff, 9999px -10px 0 0 #9880ff, 10014px 0 0 0 #9880ff;
 	}
 	66.667% {
 		box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
 	}
 	83.333% {
 		box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px -10px 0 0 #9880ff;
 	}
 	100% {
 		box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
 	}
 }

/**
 * ==============================================
 * Dot Windmill
 * ==============================================
 */
 .dot-windmill {
 	position: relative;
 	top: -10px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	transform-origin: 5px 15px;
 	animation: dotWindmill 2s infinite linear;
 }

 .dot-windmill::before, .dot-windmill::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 }

 .dot-windmill::before {
 	left: -8.66px;
 	top: 15px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 }

 .dot-windmill::after {
 	left: 8.66px;
 	top: 15px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 }

 @keyframes dotWindmill {
 	0% {
 		transform: rotateZ(0deg) translate3d(0, 0, 0);
 	}
 	100% {
 		transform: rotateZ(720deg) translate3d(0, 0, 0);
 	}
 }

/**
 * ==============================================
 * Dot Bricks
 * ==============================================
 */
 .dot-bricks {
 	position: relative;
 	top: 8px;
 	left: -9999px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
 	animation: dotBricks 2s infinite ease;
 }

 @keyframes dotBricks {
 	0% {
 		box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
 	}
 	8.333% {
 		box-shadow: 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
 	}
 	16.667% {
 		box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff;
 	}
 	25% {
 		box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
 	}
 	33.333% {
 		box-shadow: 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
 	}
 	41.667% {
 		box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
 	}
 	50% {
 		box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
 	}
 	58.333% {
 		box-shadow: 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
 	}
 	66.666% {
 		box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
 	}
 	75% {
 		box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
 	}
 	83.333% {
 		box-shadow: 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
 	}
 	91.667% {
 		box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
 	}
 	100% {
 		box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
 	}
 }

/**
 * ==============================================
 * Dot Floating
 * ==============================================
 */
 .dot-floating {
 	position: relative;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
 }

 .dot-floating::before, .dot-floating::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 }

 .dot-floating::before {
 	left: -12px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotFloatingBefore 3s infinite ease-in-out;
 }

 .dot-floating::after {
 	left: -24px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1);
 }

 @keyframes dotFloating {
 	0% {
 		left: calc(-50% - 5px);
 	}
 	75% {
 		left: calc(50% + 105px);
 	}
 	100% {
 		left: calc(50% + 105px);
 	}
 }

 @keyframes dotFloatingBefore {
 	0% {
 		left: -50px;
 	}
 	50% {
 		left: -12px;
 	}
 	75% {
 		left: -50px;
 	}
 	100% {
 		left: -50px;
 	}
 }

 @keyframes dotFloatingAfter {
 	0% {
 		left: -100px;
 	}
 	50% {
 		left: -24px;
 	}
 	75% {
 		left: -100px;
 	}
 	100% {
 		left: -100px;
 	}
 }

/**
 * ==============================================
 * Dot Fire
 * ==============================================
 */
 .dot-fire {
 	position: relative;
 	left: -9999px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	box-shadow: 9999px 22.5px 0 -5px #9880ff;
 	animation: dotFire 1.5s infinite linear;
 	animation-delay: -.85s;
 }

 .dot-fire::before, .dot-fire::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 }

 .dot-fire::before {
 	box-shadow: 9999px 22.5px 0 -5px #9880ff;
 	animation: dotFire 1.5s infinite linear;
 	animation-delay: -1.85s;
 }

 .dot-fire::after {
 	box-shadow: 9999px 22.5px 0 -5px #9880ff;
 	animation: dotFire 1.5s infinite linear;
 	animation-delay: -2.85s;
 }

 @keyframes dotFire {
 	1% {
 		box-shadow: 9999px 22.5px 0 -5px #9880ff;
 	}
 	50% {
 		box-shadow: 9999px -5.625px 0 2px #9880ff;
 	}
 	100% {
 		box-shadow: 9999px -22.5px 0 -5px #9880ff;
 	}
 }

/**
 * ==============================================
 * Dot Spin
 * ==============================================
 */
 .dot-spin {
 	position: relative;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: transparent;
 	color: transparent;
 	box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
 	animation: dotSpin 1.5s infinite linear;
 }

 @keyframes dotSpin {
 	0%,
 	100% {
 		box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
 	}
 	12.5% {
 		box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
 	}
 	25% {
 		box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
 	}
 	37.5% {
 		box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
 	}
 	50% {
 		box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
 	}
 	62.5% {
 		box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
 	}
 	75% {
 		box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
 	}
 	87.5% {
 		box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #9880ff;
 	}
 }

/**
 * ==============================================
 * Dot Falling
 * ==============================================
 */
 .dot-falling {
 	position: relative;
 	left: -9999px;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	box-shadow: 9999px 0 0 0 #9880ff;
 	animation: dotFalling 1s infinite linear;
 	animation-delay: .1s;
 }

 .dot-falling::before, .dot-falling::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 }

 .dot-falling::before {
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotFallingBefore 1s infinite linear;
 	animation-delay: 0s;
 }

 .dot-falling::after {
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotFallingAfter 1s infinite linear;
 	animation-delay: .2s;
 }

 @keyframes dotFalling {
 	0% {
 		box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
 	}
 	25%,
 	50%,
 	75% {
 		box-shadow: 9999px 0 0 0 #9880ff;
 	}
 	100% {
 		box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
 	}
 }

 @keyframes dotFallingBefore {
 	0% {
 		box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
 	}
 	25%,
 	50%,
 	75% {
 		box-shadow: 9984px 0 0 0 #9880ff;
 	}
 	100% {
 		box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
 	}
 }

 @keyframes dotFallingAfter {
 	0% {
 		box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
 	}
 	25%,
 	50%,
 	75% {
 		box-shadow: 10014px 0 0 0 #9880ff;
 	}
 	100% {
 		box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
 	}
 }

/**
 * ==============================================
 * Dot Stretching
 * ==============================================
 */
 .dot-stretching {
 	position: relative;
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	transform: scale(1.25, 1.25);
 	animation: dotStretching 2s infinite ease-in;
 }

 .dot-stretching::before, .dot-stretching::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 }

 .dot-stretching::before {
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotStretchingBefore 2s infinite ease-in;
 }

 .dot-stretching::after {
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 	background-color: #9880ff;
 	color: #9880ff;
 	animation: dotStretchingAfter 2s infinite ease-in;
 }

 @keyframes dotStretching {
 	0% {
 		transform: scale(1.25, 1.25);
 	}
 	50%,
 	60% {
 		transform: scale(0.8, 0.8);
 	}
 	100% {
 		transform: scale(1.25, 1.25);
 	}
 }

 @keyframes dotStretchingBefore {
 	0% {
 		transform: translate(0) scale(0.7, 0.7);
 	}
 	50%,
 	60% {
 		transform: translate(-20px) scale(1, 1);
 	}
 	100% {
 		transform: translate(0) scale(0.7, 0.7);
 	}
 }

 @keyframes dotStretchingAfter {
 	0% {
 		transform: translate(0) scale(0.7, 0.7);
 	}
 	50%,
 	60% {
 		transform: translate(20px) scale(1, 1);
 	}
 	100% {
 		transform: translate(0) scale(0.7, 0.7);
 	}
 }

/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Gathering
 * ==============================================
 */
 .dot-gathering {
 	position: relative;
 	width: 12px;
 	height: 12px;
 	border-radius: 6px;
 	background-color: black;
 	color: transparent;
 	margin: -1px 0;
 	filter: blur(2px);
 }

 .dot-gathering::before, .dot-gathering::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 	left: -50px;
 	width: 12px;
 	height: 12px;
 	border-radius: 6px;
 	background-color: black;
 	color: transparent;
 	opacity: 0;
 	filter: blur(2px);
 	animation: dotGathering 2s infinite ease-in;
 }

 .dot-gathering::after {
 	animation-delay: .5s;
 }

 @keyframes dotGathering {
 	0% {
 		opacity: 0;
 		transform: translateX(0);
 	}
 	35%,
 	60% {
 		opacity: 1;
 		transform: translateX(50px);
 	}
 	100% {
 		opacity: 0;
 		transform: translateX(100px);
 	}
 }

/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Hourglass
 * ==============================================
 */
 .dot-hourglass {
 	position: relative;
 	top: -15px;
 	width: 12px;
 	height: 12px;
 	border-radius: 6px;
 	background-color: black;
 	color: transparent;
 	margin: -1px 0;
 	filter: blur(2px);
 	transform-origin: 5px 20px;
 	animation: dotHourglass 2.4s infinite ease-in-out;
 	animation-delay: .6s;
 }

 .dot-hourglass::before, .dot-hourglass::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 12px;
 	height: 12px;
 	border-radius: 6px;
 	background-color: black;
 	color: transparent;
 	filter: blur(2px);
 }

 .dot-hourglass::before {
 	top: 30px;
 }

 .dot-hourglass::after {
 	animation: dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
 }

 @keyframes dotHourglass {
 	0% {
 		transform: rotateZ(0deg);
 	}
 	25% {
 		transform: rotateZ(180deg);
 	}
 	50% {
 		transform: rotateZ(180deg);
 	}
 	75% {
 		transform: rotateZ(360deg);
 	}
 	100% {
 		transform: rotateZ(360deg);
 	}
 }

 @keyframes dotHourglassAfter {
 	0% {
 		transform: translateY(0);
 	}
 	25% {
 		transform: translateY(30px);
 	}
 	50% {
 		transform: translateY(30px);
 	}
 	75% {
 		transform: translateY(0);
 	}
 	100% {
 		transform: translateY(0);
 	}
 }

/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Overtaking
 * ==============================================
 */
 .dot-overtaking {
 	position: relative;
 	width: 12px;
 	height: 12px;
 	border-radius: 6px;
 	background-color: transparent;
 	color: black;
 	margin: -1px 0;
 	box-shadow: 0 -20px 0 0;
 	filter: blur(2px);
 	animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
 }

 .dot-overtaking::before, .dot-overtaking::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 12px;
 	height: 12px;
 	border-radius: 6px;
 	background-color: transparent;
 	color: black;
 	box-shadow: 0 -20px 0 0;
 	filter: blur(2px);
 }

 .dot-overtaking::before {
 	animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
 	animation-delay: .3s;
 }

 .dot-overtaking::after {
 	animation: dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
 	animation-delay: .6s;
 }

 @keyframes dotOvertaking {
 	0% {
 		transform: rotateZ(0deg);
 	}
 	100% {
 		transform: rotateZ(360deg);
 	}
 }

/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Shuttle
 * ==============================================
 */
 .dot-shuttle {
 	position: relative;
 	left: -15px;
 	width: 12px;
 	height: 12px;
 	border-radius: 6px;
 	background-color: black;
 	color: transparent;
 	margin: -1px 0;
 	filter: blur(2px);
 }

 .dot-shuttle::before, .dot-shuttle::after {
 	content: '';
 	display: inline-block;
 	position: absolute;
 	top: 0;
 	width: 12px;
 	height: 12px;
 	border-radius: 6px;
 	background-color: black;
 	color: transparent;
 	filter: blur(2px);
 }

 .dot-shuttle::before {
 	left: 15px;
 	animation: dotShuttle 2s infinite ease-out;
 }

 .dot-shuttle::after {
 	left: 30px;
 }

 @keyframes dotShuttle {
 	0%,
 	50%,
 	100% {
 		transform: translateX(0);
 	}
 	25% {
 		transform: translateX(-45px);
 	}
 	75% {
 		transform: translateX(45px);
 	}
 }

/**
 * ==============================================
 * Experiment-Emoji
 * Dot Bouncing
 * ==============================================
 */
 .dot-bouncing {
 	position: relative;
 	height: 10px;
 	font-size: 10px;
 }

 .dot-bouncing::before {
 	content: '⚽🏀🏐';
 	display: inline-block;
 	position: relative;
 	animation: dotBouncing 1s infinite;
 }

 @keyframes dotBouncing {
 	0% {
 		top: -20px;
 		animation-timing-function: ease-in;
 	}
 	34% {
 		transform: scale(1, 1);
 	}
 	35% {
 		top: 20px;
 		animation-timing-function: ease-out;
 		transform: scale(1.5, 0.5);
 	}
 	45% {
 		transform: scale(1, 1);
 	}
 	90% {
 		top: -20px;
 	}
 	100% {
 		top: -20px;
 	}
 }

/**
 * ==============================================
 * Experiment-Emoji
 * Dot Rolling
 * ==============================================
 */
 .dot-rolling {
 	position: relative;
 	height: 10px;
 	font-size: 10px;
 }

 .dot-rolling::before {
 	content: '⚽';
 	display: inline-block;
 	position: relative;
 	transform: translateX(-25px);
 	animation: dotRolling 3s infinite;
 }

 @keyframes dotRolling {
 	0% {
 		content: '⚽';
 		transform: translateX(-25px) rotateZ(0deg);
 	}
 	16.667% {
 		content: '⚽';
 		transform: translateX(25px) rotateZ(720deg);
 	}
 	33.333% {
 		content: '⚽';
 		transform: translateX(-25px) rotateZ(0deg);
 	}
 	34.333% {
 		content: '🏀';
 		transform: translateX(-25px) rotateZ(0deg);
 	}
 	50% {
 		content: '🏀';
 		transform: translateX(25px) rotateZ(720deg);
 	}
 	66.667% {
 		content: '🏀';
 		transform: translateX(-25px) rotateZ(0deg);
 	}
 	67.667% {
 		content: '🏐';
 		transform: translateX(-25px) rotateZ(0deg);
 	}
 	83.333% {
 		content: '🏐';
 		transform: translateX(25px) rotateZ(720deg);
 	}
 	100% {
 		content: '🏐';
 		transform: translateX(-25px) rotateZ(0deg);
 	}
 }

 /* TABLE BACKGROUND color (match the original theme) */
table.hover-highlight td:before,
table.focus-highlight td:before {
  background: #fff;
}

/* ODD ZEBRA STRIPE color (needs zebra widget) */
.hover-highlight .odd td:before, .hover-highlight .odd th:before,
.focus-highlight .odd td:before, .focus-highlight .odd th:before {
  background: #ebf2fa;
}
/* EVEN ZEBRA STRIPE color (needs zebra widget) */
.hover-highlight .even td:before, .hover-highlight .even th:before,
.focus-highlight .even td:before, .focus-highlight .even th:before {
  background-color: #fff;
}

/* FOCUS ROW highlight color (touch devices) */
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
  background-color: lightblue;
}
/* FOCUS COLUMN highlight color (touch devices) */
.focus-highlight td:focus::after, .focus-highlight th:focus::after {
  background-color: lightblue;
}
/* FOCUS CELL highlight color */
.focus-highlight th:focus, .focus-highlight td:focus,
.focus-highlight .even th:focus, .focus-highlight .even td:focus,
.focus-highlight .odd th:focus, .focus-highlight .odd td:focus {
  background-color: #d9d9d9;
  color: #333;
}

/* HOVER ROW highlight colors */
table.hover-highlight tbody > tr:hover > td, /* override tablesorter theme row hover */
table.hover-highlight tbody > tr.odd:hover > td,
table.hover-highlight tbody > tr.even:hover > td {
  background-color: #ffa;
}
/* HOVER COLUMN highlight colors */
.hover-highlight tbody tr td:hover::after,
.hover-highlight tbody tr th:hover::after {
  background-color: #ffa;
}

/* ************************************************* */
/* **** No need to modify the definitions below **** */
/* ************************************************* */
.focus-highlight td:focus::after, .focus-highlight th:focus::after,
.hover-highlight td:hover::after, .hover-highlight th:hover::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 999em;
  left: 0;
  top: -555em;
  z-index: -1;
}
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
  content: '';
  position: absolute;
  width: 999em;
  height: 100%;
  left: -555em;
  top: 0;
  z-index: -2;
}
/* required styles */
.hover-highlight,
.focus-highlight {
  overflow: hidden;
}
.hover-highlight td, .hover-highlight th,
.focus-highlight td, .focus-highlight th {
  position: relative;
  outline: 0;
}
/* override the tablesorter theme styling */
table.hover-highlight, table.hover-highlight tbody > tr > td,
table.focus-highlight, table.focus-highlight tbody > tr > td,
/* override zebra styling */
table.hover-highlight tbody tr.even > th,
table.hover-highlight tbody tr.even > td,
table.hover-highlight tbody tr.odd > th,
table.hover-highlight tbody tr.odd > td,
table.focus-highlight tbody tr.even > th,
table.focus-highlight tbody tr.even > td,
table.focus-highlight tbody tr.odd > th,
table.focus-highlight tbody tr.odd > td {
  background: transparent;
}
/* table background positioned under the highlight */
table.hover-highlight td:before,
table.focus-highlight td:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -3;
}