.vui-notice-bar {
  --vui-notice-bar-fill: rgba(89, 158, 248, 0.08);
  --vui-notice-bar-font-size: var(--vui-font-body-normal);
  --vui-notice-bar-color: var(--vui-color-primary);
  --vui-notice-bar-border-radius: 32px;
  --vui-notice-bar-fill-warning: #ffeeef;
  --vui-notice-bar-color-warning: #ff5b60;
  --vui-notice-bar-fill-activity: #ffedde;
  --vui-notice-bar-color-activity: #ff843d;
  --vui-notice-bar-zindex: 999;
}
.vui-notice-bar {
  display: flex;
  z-index: var(--vui-notice-bar-zindex);
  font-size: 14px;
  background-color: var(--vui-notice-bar-fill);
  color: var(--vui-notice-bar-color);
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}
.vui-notice-bar.vui-notice-bar-round {
  border-radius: var(--vui-notice-bar-border-radius);
}
.vui-notice-bar.activity {
  background-color: var(--vui-notice-bar-fill-activity);
  color: var(--vui-notice-bar-color-activity);
}
.vui-notice-bar.warning {
  background-color: var(--vui-notice-bar-fill-warning);
  color: var(--vui-notice-bar-color-warning);
}
.vui-notice-bar-left,
.vui-notice-bar-right {
  display: flex;
  align-items: center;
}
.vui-notice-bar-left {
  padding-right: 12px;
}
.vui-notice-bar-right {
  padding-right: 32px;
}
.vui-notice-bar-empty {
  padding-right: 0;
}
.vui-notice-bar-content {
  flex: 1;
  margin: auto;
  width: auto;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.vui-notice-bar-content.vui-notice-bar-multi-content {
  padding: var(--vui-h-gap-md) 0;
  line-height: var(--vui-font-caption-large);
  white-space: normal;
}
.vui-notice-bar-content .vui-notice-bar-content-animate {
  padding-left: 100%;
  display: inline-flex;
  animation: vui-notice-bar-animation linear 16s infinite both;
}
@-moz-keyframes vui-notice-bar-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes vui-notice-bar-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@-o-keyframes vui-notice-bar-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@-moz-keyframes vui-notice-bar-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes vui-notice-bar-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@-o-keyframes vui-notice-bar-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes vui-notice-bar-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}