:root {
  --primary-color: #0370b6;
  --secondary-color: #3a0091;
  --supplemental-color: #a366ff;
  --submenu-supplemental-color: #2c0a4a;
  --white: #ffffff;
  --header-color: #023e64;
  --light: #fafafa;
  --dark: #0d0d11;
  --textbox-primary: #e6f1f8;
  --textbox-secondary: #ecfaf8;
  --textbox-info: #fff5d6;
  --textbox-light: #fafafa;
  --textbox-white: #ffffff;
  --textbox-alert: #daf0d3;
  --textbox-dark: #023e64;
}

/* Buttons */

.button-primary {
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
}
.button-secondary {
  background-color: var(--secondary-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;
} 
.button-info {
  background-color: var(--textbox-info) !important;
  color: var(--dark) !important;
}
/* Table Headers */

.table-header {
  background-color: var(--header-color) !important;
  color: var(--white) !important;
}

/* Text Boxe Backgrounds */
.gradient-primary {
  background: linear-gradient(90deg, #012F4C 0%, #266F64 100%);
}
.gradient-secondary {
  background: linear-gradient(90deg, #0370B6 0%, #2D7D8C 86%);
}
.gradient-tertiary {
  background: linear-gradient(90deg, #023E64 0%, #22606B 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-alert {
  background-color: var(--textbox-alert) !important;
 }
 .text-box-light {
  background-color: var(--textbox-light) !important;
 }
 .text-box-dark {
    background-color: var(--textbox-dark) !important;
 }
 .text-box-white {
  background-color: var(--textbox-white) !important;
 }