:root {
  --primary-color: #6300ff;
  --secondary-color: #3a0091;
  --supplemental-color: #a366ff;
  --submenu-supplemental-color: #2c0a4a;
  --white: #ffffff;
  --dark: #0d0d11;
  --light: #e6f1f8;
  --header-color: #3a0091;
  --textbox-info: #fff5d6;
  --textbox-primary: #e6f1f8;
  --textbox-secondary: #ecfaf8;
  --textbox-light: #fafafa;
  --textbox-white: #ffffff;
}

.button-primary {
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
}
.button-white {
  background-color: var(--white) !important;
  color: var(--dark) !important;
}
.button-transparent {
  background-color: transparent !important;
  color: var(--white) !important;
}
.button-opacity-20 {
  background-color: var(--white) !important;
  color: var(--dark) !important;
  opacity: 0.2 !important;
}
.button-light {
  background-color: var(--light) !important;
  color: var(--primary) !important;
}
.gradient-primary {
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--supplemental-color) 86%);
}
.gradient-secondary {
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}
.gradient-bg {
  background-image: url(https://gideon.mcnet.com.hk/mwcb27/images/166b9998427f228d89816ff64d1a780a2782e4e5.jpg);
}
.text-box-primary {
  background-color: var(--textbox-primary) !important;
 }
 .text-box-secondary {
  background-color: var(--textbox-secondary) !important;
 }
 .text-box-info {
  background-color: var(--textbox-info) !important;
 }
 .text-box-light {
  background-color: var(--textbox-light) !important;
 }
 .text-box-white {
  background-color: var(--textbox-white) !important;
 }
.table-header {
  background-color: var(--header-color) !important;
  color: var(--white) !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
  color: #fff !important;
  background-color: var(--primary-color) !important;
}
.gradient-4,
.gradient-1 {
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--supplemental-color) 86%) !important;
}

#sub-menu-wrapper {
  background: linear-gradient(to right,var(--primary-color) 34%, var(--submenu-supplemental-color) 98%) !important;
}
.circle-number {
  background-color: var(--primary-color) !important;
}
#accordion-left-nav .accordion-body a.active, 
#accordion-left-nav .accordion-header a.active #accordion-left-nav .accordion-header a.active span {
  color: var(--primary-color) !important;
}
#accordion-left-nav .accordion-body a {
  color: #0d0d11 !important;
  font-weight: 400;
}
#accordion-left-nav .accordion-body a:hover {
  color: var(--primary-color) !important;
  font-weight: 600;
}
main a {
  color: var(--primary-color) !important;
}
.primary-bg {
  background-color: var(--primary-color) !important;
}
.secondary-bg {
  background-color: var(--secondary-color) !important;
}
.supplemental-bg {
  background-color: var(--supplemental-color);
}
.transparent-bg {
  background-color: transparent !important;
}
.primary-border {
  border-color: var(--primary-color) !important;
}
.primary-font-color {
  color: var(--primary-color) !important;
}
@media (min-width: 768px) {
  .nav-item > a:hover, .nav-item.active > a {
    color: var(--primary-color) !important;
    font-weight: 600;
  }
}