.hopmans-scroll-labels {
position: fixed;
left: 100%;
top: 200px;
z-index: 99;
padding: 0;
}
.hopmans-scroll-labels-track {
display: flex;
flex-direction: column;
gap: 5px;
}
.hopmans-scroll-label {
display: flex;
align-items: center;
text-decoration: none;
transition: margin-left 0.5s ease-out;
margin-left: -50px;
background-color: var(--e-global-color-primary, #1e3a5f);
border-radius: 4px 0 0 4px;
height: 50px;
position: relative;
}
.hopmans-scroll-label:hover {
margin-left: var(--hover-width, -200px);
} .hopmans-scroll-label-logo-wrap {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hopmans-scroll-label-logo {
padding: 5px;
height: 40px;
width: 40px;
object-fit: contain;
} .hopmans-scroll-label-title {
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 50px;
padding: 0 20px 0 10px;
white-space: nowrap;
height: 50px;
} .hopmans-scroll-label-current,
.hopmans-scroll-label-current .hopmans-scroll-label-logo {
background-color: var(--e-global-color-secondary, #10aa9e);
} @media (max-width: 768px) {
.hopmans-scroll-labels {
display: none;
}
}