.cgl--ticker .crypto-ticker {
padding: 12px 0;
overflow: hidden;
white-space: nowrap;
position: relative;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
width: 100%;
mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 5%, hsl(0 0% 0% / 1) 95%, hsl(0 0% 0% / 0));
}
.cgl--ticker .crypto-ticker .ticker-wrapper {
display: flex;
animation: cgl-ticker-moveLeft 80s linear infinite;
width: fit-content;
}
.cgl--ticker .crypto-ticker .ticker-content {
display: flex;
align-items: center;
gap: 12px;
padding-right: 12px;
}
.cgl--ticker .crypto-ticker .crypto-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
background: var(--global-palette8);
border: 1px solid var(--global-palette7);
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
min-width: 200px;
}
.cgl--ticker .crypto-ticker .crypto-icon {
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 14px;
flex-shrink: 0;
}
.cgl--ticker .crypto-ticker .crypto-icon img {
width: 100%;
height: 100%;
}
.cgl--ticker .crypto-ticker .crypto-details {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.cgl--ticker .crypto-ticker .crypto-details .crypto-det1 {
display: flex;
align-items: center;
gap: 8px;
line-height: 1;
}
.cgl--ticker .crypto-ticker .crypto-details .crypto-det2 {
line-height: 1;
}
.cgl--ticker .crypto-ticker .crypto-name {
font-weight: 500;
color: #2c3e50;
font-size: 14px;
}
.cgl--ticker .crypto-ticker .crypto-symbol {
color: #7f8c8d;
font-size: 14px;
font-weight: 400;
}
.cgl--ticker .crypto-ticker .crypto-price {
font-weight: 400;
color: #2c3e50;
font-size: 14px;
}
.cgl--ticker .crypto-ticker .crypto-change {
font-size: 14px;
font-weight: 400;
}
.cgl--ticker .crypto-ticker .positive { color: #27ae60; }
.cgl--ticker .crypto-ticker .negative { color: #e74c3c; }
.cgl--ticker .crypto-ticker .mini-chart {
width: 35px;
height: 18px;
margin-left: 6px;
flex-shrink: 0;
line-height: 0; }
.cgl--ticker .crypto-ticker .mini-chart svg {
width: 100%;
height: 100%;
display: block;
} @keyframes cgl-ticker-moveLeft {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
} @media (max-width: 768px) {
.cgl--ticker .crypto-ticker { padding: 8px 0; }
.cgl--ticker .crypto-ticker .crypto-item { min-width: 140px; padding: 5px 10px; gap: 6px; }
.cgl--ticker .crypto-ticker .crypto-icon { width: 30px; height: 30px; font-size: 14px; }
.cgl--ticker .crypto-ticker .crypto-name { font-size: 12px; }
.cgl--ticker .crypto-ticker .crypto-symbol { font-size: 10px; }
.cgl--ticker .crypto-ticker .crypto-price { font-size: 12px; }
.cgl--ticker .crypto-ticker .crypto-change { font-size: 10px; }
.cgl--ticker .crypto-ticker .mini-chart { width: 25px; height: 14px; }
.cgl--ticker .crypto-ticker .mini-chart svg { width: 25px; height: 14px; }
.cgl--ticker .crypto-ticker .ticker-content { gap: 12px; padding-right: 12px; }
.cgl--ticker .crypto-ticker .ticker-wrapper { animation-duration: 60s; }
}
@media (max-width: 480px) {
.cgl--ticker .crypto-ticker .crypto-item { min-width: 120px; padding: 3px 6px; }
.cgl--ticker .crypto-ticker .crypto-details { gap: 4px; }
.cgl--ticker .crypto-ticker .ticker-content { gap: 12px; padding-right: 12px; }
.cgl--ticker .crypto-ticker .ticker-wrapper { animation-duration: 45s; }
}