.campaign-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-size: cover;
  /* Remove the display:none rule and update icon image in case we want to use a special icon for the campaign */
  display: none;
  background-image: url(../../images/rabbit.svg);
}

.campaign-tab-animation {
  background: linear-gradient(
    to right,
    #6666ff,
    #0099ff,
    #00ff00,
    #ff3399,
    #6666ff
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 6s ease-in-out infinite;
  background-size: 400% 100%;
}

.Navigation .download-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  background-image: url(../../images/download.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.Navigation .dcl.tabs .ui.container {
  display: flex;
}

.Navigation .dcl.tabs .dcl.tabs-right {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .Navigation .dcl.tabs-left {
    display: flex;
    flex-direction: row;
    overflow: scroll;
    width: 100%;
  }

  .Navigation .dcl.tab {
    margin: 0 16px;
    padding: 0;
    padding-bottom: 14px;
    white-space: nowrap;
  }

  .Navigation .dcl.tab.active {
    border-bottom: 3px solid var(--primary);
    border-left: 0;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .Navigation .dcl.tabs-left::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .Navigation .dcl.tabs-left {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

@keyframes rainbow_animation {
  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}
