.cardname, .cardprice, .cardchange{
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding-right: 10px;
}
.cardname{
    font-size: 18px;
}
.card{
    padding-top: 5px;
}
:root {
    --marquee-width: 84%;
    /* --marquee-elements: 12; */ /* defined with JavaScript */
    --marquee-elements-displayed: 7;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 1.5s);
}
.marquee {
    width: var(--marquee-width);
    height: var(--marquee-height);
    float: left;
    overflow: hidden;
    position: relative;
    height: 100%;
}
:root {
    --marquee1-width: 100%;
    /* --marquee-elements: 12; */ /* defined with JavaScript */
    --marquee1-elements-displayed: 10;
    --marquee1-element-width: calc(var(--marquee1-width) / var(--marquee-elements-displayed));
    --marquee1-animation-duration: calc(var(--marquee-elements) * 1.5s);
}
.marquee1 {
    width: var(--marquee1-width);
    height: var(--marquee1-height);

    overflow: hidden;
    position: relative;
}

.marquee-content, .marquee-content2, .marquee-content1,.marquee-card {
    display: flex;
    animation: scrolling var(--marquee-animation-duration) linear infinite;
    white-space: nowrap;
}
.marquee-content:hover,.marquee-content1:hover,.marquee-card:hover{
    animation-play-state: paused;
}
.marquee-content2:hover{
    animation-play-state: paused;
}

@media (max-width: 600px) {
    :root {
        --marquee-width: 100vw;
        --marquee-height: 16vh;
        --marquee-elements-displayed: 3;
    }
}
/* .marquee-content:hover {
  animation-play-state: paused;
} */
@keyframes scrolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content div, .marquee-content2 div, .marquee-content1 div, .marquee-card div {
    display: flex;
    max-height: 100%;
    font-size: 12px;
}

body{
    font-family: 'corisanderegularregular',Arial,Helvetica,sans-serif;
}
@media only screen and (min-width: 768px) {
    .tickerbod{
        width: 16%;
        font-size: 12px;
        float: left;
        padding-left: 10px;
    }
    .tickerbody{
        width: 84%;
    }
    #datarow {
        /*height: 21%;*/
        /*background: #2c3238;*/
    }
}
@media only screen and (max-width: 767px) {
    .tickerbod{
        width: 100%;
        font-size: 12px;
        float: left;
    }
    .tickerbody{
        width: 100%;
    }
    #time{
        display:flex;
    }
    #time .date{
        padding-right: 15px;
    }
    #time2{
        display:flex;
    }
    #time2 .date{
        padding-right: 15px;
    }
    .bodyt, .tickerbody {
    background: #000000;
    height: 73px !important;
}
.marquee{
    width:100%;
}
    #datarow {
        /*height: 21%;*/
        /*background: #2c3238;*/
    }
}

@keyframes swap {
    0%, 50% {
        left: 0%;
    }
    50.01%,
    100% {
        left: 100%;
    }
}

.negative:after{
    content: "\f0d7";
    font-family: FontAwesome;
    margin-left: 15px;
    margin-right: -7px;
}
.positive:after{
    content: "\f0d8";
    font-family: FontAwesome;
    margin-left: 15px;
    margin-right: -7px;
}
.nochange:after{
    content: "\f0dc";
    font-family: FontAwesome;
    margin-left: 12px;
    margin-right: -7px;
}
.date,.text{
    color: #fff;
    font-weight: 600;
}
.date{
    padding-bottom: 0;
        height: 17px;
}
.bodyt, .tickerbody{
    background: #000000;
    height: 43px;
}
.greybody, .tickerbody{
    background: #ECECEC;
    height: 37px;
    padding-top: 2px;
}
/*.greybody .items:after{*/
/*    content: "|";*/
/*    color:#000000;*/

/*}*/

.tickerbody{
    display: flex;
    background: #2c3238;
    font-size: 12px;
}
.ticker{
    display: flex;
}
.items, items2{
    padding: 10px;
    display: flex;
    padding: 6px 10px;
}
.pricedata, .changedata{
    padding-left: 10px;
}
.issuerdata{
    color: #ffffff;
    /*font-weight: 600;*/
}
.positive, .positive ~ .changedata{
    color: #4BAC43;
    font-weight: 600;
}
.negative, .negative ~ .changedata{
    color: #ff0e30;
    font-weight: 600;
}
.nochange, .nochange ~ .changedata{
    color: #FFBF00;
    font-weight: 600;
}
.statusnegative{
    color: #ff0e30;
    font-weight: 600;
    text-transform:capitalize;

}

.statuspositive{
    color: #4BAC43;
    font-weight: 600;
    text-transform: capitalize;
}
.ticker:hover{
    animation-play-state: paused !important;
}
.tickerbody{
    overflow: hidden;
}

#datarow{
    padding: 4px 2%;
    /*display: block;*/
}