:root{
	--running-text-height : 50px;
	--running-text-bgcolor : #3A6D8C;
}

.running-text-container {
	display: block;
	position: sticky;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: var(--running-text-height);
	background-color: var(--running-text-bgcolor);
	z-index: 999;
}
.running-text-main-container {
	height: var(--running-text-height);
	overflow: hidden;
	position: relative;

	& .running-text{
		font-size: 15px;
	}
}

.running-text-main-container .running-text {
	white-space: nowrap;
	position: absolute;
	height: var(--running-text-height);
	margin: 0;
	line-height: var(--running-text-height);
	text-align: left;

	-webkit-transform:translateX(20%);
	-moz-transform:translateX(20%);
	transform:translateX(20%);

	-webkit-animation: animrun 200s linear infinite;
   	-moz-animation: animrun 200s linear infinite;
		animation: animrun 200s linear infinite;
}

.running-text-capsule{
	padding: 4px 8px;
	border-radius: 8px;
	background-color: #0597FF;
}

.running-text-dots{
	position: relative;
	top: 7px;
	padding : 0px 4px;
}

.running-text-judul{
	text-decoration: none;
	color: #fff;
}

.running-text .running-text-judul:hover{
	cursor: pointer;
	background-color: #5784A7;
	padding : 4px 0px;
	border-radius: 4px;
	text-decoration: none;
}

.running-text:hover{
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}

@-moz-keyframes animrun {
	0%   { -moz-transform: translateX(20%); }
	100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes animrun {
	0%   { -webkit-transform: translateX(20%); }
	100% { -webkit-transform: translateX(-100%); }
}
@keyframes animrun {
	0%   {
		-webkit-transform: translateX(20%);
		   -moz-transform: translateX(20%);
				transform: translateX(20%);
	}
	100% {
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
				transform: translateX(-100%);
	}
}