.custom-color{
  .qr-wrapper{
    .countdown{
      color: var(--theme-color);
    }
  }
  .message{
    svg{
      color: var(--theme-color);
    }
  }
  .btn-theme{
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    &:hover, &:active, &:focus{
      background-color: $themeWhite;
      color: var(--theme-color);
      border-color: var(--theme-color);
    }
    &.inverse{
      color: var(--theme-color);
      &:hover, &:active, &:focus{
        background-color: var(--theme-color);
        color: $themeWhite;
        border-color: var(--theme-color);
      }
    }
  }
  .cssload-spin-box{
    animation: cssload-spin2 ease infinite 3.6s;
    -o-animation: cssload-spin2 ease infinite 3.6s;
    -ms-animation: cssload-spin2 ease infinite 3.6s;
    -webkit-animation: cssload-spin2 ease infinite 3.6s;
    -moz-animation: cssload-spin2 ease infinite 3.6s;
  }
  @include keyframes(cssload-spin2){
    0%,
    100% {
      box-shadow: 18px 18px var(--theme-color), -18px 18px rgb(223,223,223), -18px -18px var(--theme-color), 18px -18px rgb(223,223,223);
    }
    25% {
      box-shadow: -18px 18px rgb(223,223,223), -18px -18px var(--theme-color), 18px -18px rgb(223,223,223), 18px 18px var(--theme-color);
    }
    50% {
      box-shadow: -18px -18px var(--theme-color), 18px -18px rgb(223,223,223), 18px 18px var(--theme-color), -18px 18px rgb(223,223,223);
    }
    75% {
      box-shadow: 18px -18px #dfdfdf, 18px 18px var(--theme-color)Dark, -18px 18px #dfdfdf, -18px -18px var(--theme-color)Dark;
    }
  }
  ::selection {
    background-color: var(--theme-color);
  }

  ::-moz-selection {
    background-color: var(--theme-color);
  }
}