:root {
  --theme-colour-1-values: 61, 67, 193;
  --theme-colour-2-values: 168, 0, 150;

  --theme-colour-1: rgb(var(--theme-colour-1-values));
  --theme-colour-2: rgb(var(--theme-colour-2-values));

  --theme-gradient: linear-gradient(
    to right,
    var(--theme-colour-2) 0,
    var(--theme-colour-1) 100%
  );
}

.bg-gold {
  background: var(--theme-gradient) !important;
  border-color: var(--theme-colour-1) !important;
  background-attachment: fixed !important;
}

.btn-gold,
.btn-success,
.btn-primary,
.label-success {
  color: #fff;
  background: var(--theme-gradient) !important;
  border: 1px solid var(--theme-gradient) !important;
}

.btn-gold:hover,
.btn-success:hover {
  opacity: 0.8 !important;
}

.page-aside .list-group-item.active {
  border-left: 5px solid var(--theme-colour-1) !important;
}
.page-aside .list-group-item.active:focus,
.page-aside .list-group-item.active:hover {
  background-color: var(--theme-colour-1) !important;
  border-left: 5px solid var(--theme-colour-1) !important;
}
/* .page-aside .list-group-item.active > .icon, */
.text-gold {
  color: var(--theme-colour-1) !important;
}
.page-aside .list-group-item:focus,
.page-aside .list-group-item:hover {
  background-color: var(--theme-colour-1) !important;
}
.pagination > .active > a {
  color: #fff;
  background-color: var(--theme-colour-1) !important;
  border-color: var(--theme-colour-1) !important;
}

.message_channel .btn-outline.active {
  background: var(--theme-gradient) !important;
  background-attachment: fixed !important;
}

.page-brand-info {
  background: linear-gradient(
    135deg,
    var(--theme-colour-1) 0,
    var(--theme-colour-2) 100%
  ) !important;
}

.page-login-main {
  background: rgba(var(--theme-colour-1-values), 0.1) !important;
}

.badge-success {
  color: #fff;
  background: rgba(var(--theme-colour-1-values), 1) !important;
}