.scrolla-ticker {
background: #fafafa;
border-bottom: 1px solid #e5e5e5;
border-top: 3px solid #ac2608;
overflow: hidden;
position: relative;
font-size: 13px;
line-height: 1;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
} .scrolla-ticker__controls {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: stretch;
background: #ac2608;
box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08);
min-width: 68px;
max-width: 68px;
} .scrolla-ticker__label {
color: #fff;
padding: 5px 8px 4px;
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
flex-shrink: 0;
} .scrolla-ticker__toggle {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.85);
padding: 3px 6px 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
transition: background 0.15s, color 0.15s;
margin: 0;
box-shadow: none;
text-shadow: none;
flex: 1;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
gap: 3px;
}
.scrolla-ticker__toggle:hover,
.scrolla-ticker__toggle:focus {
background: #8b1f06;
color: #fff;
outline: none;
}
.scrolla-ticker__toggle-mode {
color: inherit;
display: inline-flex;
align-items: center;
gap: 3px;
}
.scrolla-ticker__toggle-mode::after {
content: "\21BB";
font-size: 10px;
opacity: 0.7;
font-weight: 400;
}
.scrolla-ticker__controls::after {
content: "";
position: absolute;
right: -10px;
top: 0;
bottom: 0;
width: 10px;
background: linear-gradient(to right, rgba(250, 250, 250, 1), rgba(250, 250, 250, 0));
pointer-events: none;
} .scrolla-ticker__track {
display: flex;
padding: 10px 0 10px 78px;
white-space: nowrap;
animation: scrolla-ticker-scroll 95s linear infinite;
width: max-content;
}
.scrolla-ticker:hover .scrolla-ticker__track {
animation-play-state: paused;
}
@keyframes scrolla-ticker-scroll {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
} .scrolla-ticker-item {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 0 10px;
border-right: 1px solid #e8e8e8;
font-size: 13px;
}
.scrolla-ticker-item__name {
font-weight: 700;
color: #111;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.4px;
}
.scrolla-ticker-item__price {
font-weight: 500;
color: #111;
font-variant-numeric: tabular-nums;
font-size: 13px;
}
.scrolla-ticker-item__change {
font-weight: 700;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.scrolla-ticker-item__change.up   { color: #c62828; }
.scrolla-ticker-item__change.down { color: #2e7d32; }
.scrolla-ticker-item__change.flat { color: #777; }
.scrolla-ticker-item__change .arrow {
display: inline-block;
font-size: 9px;
margin-right: 1px;
transform: translateY(-1px);
} .scrolla-ticker-source {
background: #fafafa;
border-bottom: 1px solid #e5e5e5;
padding: 3px 10px;
margin: 0;
font-size: 9px;
color: #888;
text-align: right;
letter-spacing: 0.2px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.scrolla-ticker-source a {
color: #ac2608;
text-decoration: none;
font-weight: 600;
}
.scrolla-ticker-source a:hover {
text-decoration: underline;
} @media (max-width: 767px) {
.scrolla-ticker,
.scrolla-ticker-source {
display: block !important;
margin: 0 !important;
}
.scrolla-ticker__track {
padding: 10px 0 10px 78px !important;
}
.scrolla-ticker-item {
padding: 0 8px !important;
font-size: 12px !important;
}
.scrolla-ticker-item__name {
font-size: 10px !important;
}
.scrolla-ticker-item__price {
font-size: 12px !important;
}
.scrolla-ticker-item__change {
font-size: 11px !important;
}
.scrolla-ticker-source {
padding: 3px 8px !important;
text-align: center;
font-size: 8px !important;
}
}