.ticker-wrapper {
  background: #1c202a;
  font-family: ralewaysemibold, sans;
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker-wrapper.news {
  background: #9397a0;
}

.ticker-wrapper > .ticker-title {
  margin: 0;
  font-size: 11px;
  color: #719a30;
  text-transform: uppercase;
  min-width: 110px;
  padding-left: 10px;
  white-space: nowrap;
}
.ticker-wrapper.news > .ticker-title {
  color: #325b81;
}

.ticker-wrapper > .tickercontainer {
}

.ticker-wrapper > .tickercontainer > .mask {
  padding: 8px 10px;
  overflow: hidden;
}

.ticker-wrapper > .tickercontainer > .mask > ul.newsticker {
  -webkit-transition: all 0s linear;
  -moz-transition: all 0s linear;
  -o-transition: all 0s linear;
  transition: all 0s linear;
  position: relative;
  margin-left: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.ticker-wrapper > .tickercontainer > .mask > ul.newsticker > li {
  float: left;
  margin: 0;
}

.ticker-wrapper > .tickercontainer > .mask ul.newsticker > li > .index-slide {
  position: relative;
  padding: 0 1.5rem;
  height: 2rem;
  display: inline-block;
}
.ticker-wrapper
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 60%;
  border-right: 2px solid white;
  margin-bottom: calc(
    8px * 40 / 100
  ); /* the padding of the element * remaining height */
}
.ticker-wrapper > .tickercontainer > .mask ul.newsticker > li > .index-slide a {
  font-size: 14px;
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide
  a {
  text-transform: none;
}
.ticker-wrapper
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:hover
  a,
.ticker-wrapper
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:active
  a,
.ticker-wrapper
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:focus
  a {
  color: #719a30;
}

.ticker-wrapper
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide.ticker-span {
  padding-right: 2rem;
}

.ticker-wrapper
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide
  .icon {
  font-size: 2.5rem;
  display: flex;
  justify-content: center;
  padding-left: 1rem;
}

.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide {
  padding-right: 0;
}
.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:after {
  display: none;
}

.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide
  .bullet {
  height: 6px;
  width: 6px;
  background-color: #325b81;
}

.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide
  .article-date {
  padding: 0 8px;
  margin-right: 8px;
  border-right: 1px white solid;
}
.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:hover
  a,
.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:active
  a,
.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:focus
  a {
  color: #325b81;
}
.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:hover
  .article-date,
.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:active
  .article-date,
.ticker-wrapper.news
  > .tickercontainer
  > .mask
  ul.newsticker
  > li
  > .index-slide:focus
  .article-date {
  border-right: 1px #325b81 solid;
}