/* liScroll styles */

.tickercontainer { /* the outer div with the black border */
	width: 100%; 
	min-height: 50px;
	margin: 0; 
	padding: 0;
	overflow: hidden; 
	text-align: center;
    background-color:#0b253d;
}
/* that serves as a mask. so you get a sort of padding both left and right */
.tickercontainer .mask { 
	position: relative;
	width: 100%;
	overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
list-style-type: none;
margin: 0;
padding: 0;

}
/* important: display inline gives incorrect results when you check for elem's width */
ul.newsticker li {
	float: left; 
	margin: 10px 20px;
	padding: 0;
	display:flex;
	gap: 10px;
	align-items: center;
	line-height:25px;
	font-size: .8rem;
}

ul.er-controls{
	list-style: none;
	display: inline-block;
	padding: 0;
	margin-bottom:0;
}
ul.er-controls > li{
	display: inline-block;
	padding: 0 10px;
	background: #f0f0f0;
	margin: 5px;
	border-radius: 5px;
	height: 20px;
	line-height: 40px;
}
ul.er-controls > li:hover{
	background: #f5f5f5;
	cursor: pointer;
}
.row.card{
	border: inherit;
	border-radius: inherit;
}
.tickervar .decrease:after {
    padding-left: 5px;
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='19' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.816 15.177V8L19 .823V8l-9.184 7.177zM0 .823V8l9.19 7.177V8L0 .823z' fill='%23FF2439'/%3E%3C/svg%3E");
}
.tickervar .increase:after {
    padding-left: 5px;
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='19' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.816.823V8L19 15.177V8L9.816.823zM0 15.177V8L9.19.823V8L0 15.177z' fill='%2364FBA0'/%3E%3C/svg%3E")
}
.tickervar .nocrease:after {
    content: "";
    display: inline-block;
    padding-left: 5px;
    width: 18px;
    height: 6px;
    background-color: #bbb;
    transform: translate(5px, -2px);
}
.tickervar{
    display: flex;
    align-items: center;
    flex-direction: column;
}