.scroll-container { width: 40%; overflow: hidden; white-space: nowrap; position: relative; button { position: absolute; z-index: 50; left: 10rem; top: 0px; width: max-content; padding: 4px 12px; font-size: 12px; font-family: 'Poppins'; font-weight: 500; display: none; border: none; outline: none; background-color: rgb(0, 134, 0); color: #fff; border-radius: 6px; align-items: center; gap: 5px; cursor: pointer; } &:hover { background-color: #ffffff80; } } .scroll-container { &:hover { button { display: flex !important; } } } .scroll-text { display: inline-block; padding-left: 100%; animation: scroll-left 8s linear infinite; font-size: 16px; color: #c40000; font-weight: 500; } @keyframes scroll-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } .scroll-container:hover .scroll-text { animation-play-state: unset; } .reliveApproval { display: flex; align-items: flex-start; flex-wrap: nowrap; flex-direction: column; gap: 0; width: 100%; .ant-rate-star-second { color: rgb(0 0 0 / 16%); } } .SalesCountComponent-Master { display: flex; align-items: center; justify-content: space-around; width: 80%; .missingNumCheckIcon { color: #1292ee; svg { display: flex; } } > p { white-space: nowrap; font-weight: 500; } @media (max-width: 499px) { > p { font-size: 10px !important; } } } .blinkStock { border: none; background-color: #bbfbbb; padding: 4px 12px; font-size: 14px; font-weight: 500; cursor: pointer; outline: none; font-family: "Poppins"; color: #40a80c; display: flex; align-items: center; gap: 4px; } .blink { animation: blink 1.2s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }