.stock-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    z-index: 1000;
    background-color: #131722;

    font-size: 15px;
    padding-block: 4px;
    border-block: 1px solid;
    overflow: hidden;
    user-select: none;

    --gap: 30px;
    display: flex;
    gap: var(--gap);
    }

    .stock-ticker ul{
    list-style: none;
    flex-shrink: 0;
    min-width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);

    animation: scroll 80s linear infinite;
    }

    .stock-ticker:hover ul {
    animation-play-state: paused;
    }

    .stock-ticker ul li {
        position: relative;
        padding-right: 20px; /* Add some spacing to the right of the content */
        border-right: 1px solid #b8b5b5; /* Add a vertical line */
    }

    .stock-ticker ul li:last-child {
        border-right: none; /* Remove the line from the last item */
    }

    @keyframes scroll {
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
    }


    .stock-ticker .company,
    .stock-ticker .price {
    font-weight: bold;
    color: #ffffff;
    padding-right: 20px;
    }

    .stock-ticker .price {
    margin-inline: 4px;
    }

    .stock-ticker .plus .change::before {
    content: "↑";
    color: #089981;
    margin-right: 3px;
    }
    .stock-ticker .minus .change::before {
    content: "↓";
    color: #f23645;
    margin-right: 3px;
    }

    .stock-ticker .plus .change,
    .stock-ticker .plus::before {
    color: #089981;
    }

    .stock-ticker .minus .change,
    .stock-ticker .minus::before {
    color: #f23645;  
    }

.live-market {
    position: fixed;
    display: flex;
    min-width: 10%;
    height: 10%;
    align-items: center;
    justify-content: center;
    width: 15%;
    bottom: 0;
    left: 0;
    color: #ffffff;
    font-size: 1em;
    z-index: 1001;
    background-color: #f23645;
    }