/* Taken from https://aisingapore.org/ homepage */
:root {
    --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
    --global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
    --global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
    --global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
    --global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
    --global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);

    --global-palette1: #ae2514;
    --global-palette2: #da7f4d;
    --global-palette3: #1f1f1f;
    --global-palette4: #383838;
    --global-palette5: #7a7a7a;
    --global-palette6: #a5a5a5;
    --global-palette7: #f1f1f1;
    --global-palette8: #f8f8f8;
    --global-palette9: #ffffff;
    --global-palette9rgb: 255, 255, 255;
    --global-palette-highlight: var(--global-palette1);
    --global-palette-highlight-alt: var(--global-palette5);
    --global-palette-highlight-alt2: var(--global-palette9);
    --global-palette-btn-bg: var(--global-palette1);
    --global-palette-btn-bg-hover: var(--global-palette5);
    --global-palette-btn: var(--global-palette9);
    --global-palette-btn-hover: var(--global-palette9);
    --global-body-font-family: 'Work Sans', sans-serif;
    --global-heading-font-family: 'Work Sans', sans-serif;
    --global-primary-nav-font-family: 'Work Sans', sans-serif;
    --global-fallback-font: sans-serif;
    --global-display-fallback-font: sans-serif;
    --global-content-width: 1290px;
    --global-content-narrow-width: 842px;
    --global-content-edge-padding: 1.5rem;
    --global-calc-content-width: calc(1290px - var(--global-content-edge-padding) - var(--global-content-edge-padding));

    --global-gray-400: #CBD5E0;
    --global-gray-500: #A0AEC0;
    --global-xs-spacing: 1em;
    --global-sm-spacing: 1.5rem;
    --global-md-spacing: 2rem;
    --global-lg-spacing: 2.5em;
    --global-xl-spacing: 3.5em;
    --global-xxl-spacing: 5rem;
    --global-edge-spacing: 1.5rem;
    --global-boxed-spacing: 2rem;
}

:root {
    --font-heading: 'Work Sans', Helvetica, Arial, sans-serif;
    --font-body: 'Work Sans',  Helvetica, Arial, sans-serif;
    --font-logo: 'good_timing_rg',  Helvetica, Arial, sans-serif;
    --font-btn: 'Libre Franklin',  Helvetica, Arial, sans-serif;


    --border-radius-common: 0px;

    --bs-primary-rgb: 174, 37, 20;
    --color-accent: var(--global-palette1);
    --bs-primary-bg-subtle: #fff5f4;
    --color-practice: #4B68A5;
    --color-success: #15803d;
    --color-muted: #6d6d6d; /* Custom shade with better contrast on light background */
    --color-border: var(--global-palette6);
    --color-background-light: var(--global-palette8);
    --color-body: var(--global-palette4);
    --color-heading: var(--global-palette3);
    --color-info: #02469A;
    --color-warning: #b26000;
    --color-danger: var(--global-palette1);

    --color-prize: var(--color-accent);
    --color-completed: var(--color-success);

    --color-active: var(--color-accent);

    --background-log: var(--color-body);

    --bs-code-color: #e83e8c;
    --bs-light: var(--color-background-light);
    --bs-secondary: var(--color-muted);
    --bs-success: var(--color-success);
    --bs-info: var(--color-info);
    --bs-warning: var(--color-warning);
    --bs-danger: var(--color-danger);
    --bs-primary: var(--color-accent);
    --bs-link-color: var(--color-accent);
    --bs-link-hover-color: var(--color-accent);
    --bs-btn-disabled-bg: var(--color-accent);
    --bs-btn-disabled-border-color: var(--color-accent);
    --bs-border-color: var(--color-border);

    --bs-border-radius: var(--border-radius-common);

    --min-width-mobile-supported: 360px;
}

body {
  font-family: var(--font-body);
}

.panel {
  box-shadow: 0 15px 25px -10px rgba(0,0,0,.05);
  --bs-border-color: var(--global-palette7);
}

.fw-bold {
  font-weight: 600 !important;
}

.nav-footer a {
  transition: all .2s ease-in-out;
  color: white;
  text-decoration: none;
}
.nav-footer a:hover {
  color: var(--global-palette1) !important;
}
.navbar-header a:hover:after {
  transform: scale(1, 1) translate(50%, 0);
}
.navbar-header a[aria-current]:after {
  transform: scale(1, 1) translate(50%, 0);
}
.navbar-default .navbar-nav > li > a:hover {
  color: var(--global-palette2) !important;
}
.navbar-header a {
  position: relative;
  padding: 10px 0;
  display: inline-block;
}
.navbar-header a:after {
  content: '';
  width: 100%;
  position: absolute;
  bottom: 0px;
  height: 2px;
  right: 50%;
  background: currentColor;
  transform: scale(0, 0) translate(-50%, 0);
  transition: transform .2s ease-in-out, color .0s ease-in-out;
}

.font-logo {
  font-family: var(--font-logo) !important;
}
.icon-reward {
  color: var(--color-accent);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-accent);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-accent);
  --bs-btn-active-border-color: var(--color-accent);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color-accent);
  --bs-btn-disabled-border-color: var(--color-accent);
}
.btn {
  font-weight: 600;
  text-transform: uppercase;
  --bs-btn-border-radius: 0;
  font-family: var(--font-btn);
}
.btn-lg {
  --bs-btn-font-size: inherit;
}

.sidebar-toc .toc {
  padding-bottom: 0.3em;
}
.toc a {
  text-decoration: none;
  color: var(--color-body);
  font-size: 14px;
}
.sidebar h2 {
  color: var(--color-body);
  font-weight: 600;
  font-family: var(--font-logo);
  font-size: 18px;
  margin-bottom: 1rem;
}
.sidebar a[aria-current] {
  color: var(--color-accent);
  font-weight: 600;
}
.nav-subpages,
.sidebar-toc {
  background: var(--global-palette7);
  padding: 1rem;
}
.nav-subpages a {
  text-decoration: none;
  color: var(--color-body);
  line-height: 1.9;
  width: 100%;
  display: inline-block;
}

.form-control,
.form-control-lg,
.form-select {
  padding: 0.8rem 1rem;
  border-radius: var(--border-radius-common);
  border: 1px solid var(--color-border);
}

.svg-icon-circle {
  display: flex;
  border: 1px currentColor solid;
}

.table thead {
  border-bottom: 3px solid var(--global-palette6);
}
.table {
  border: 1px solid var(--bs-border-color);
}

.my-communities {
  display: none;
}

.panel .panel-logo {
  display: none !important;
}
.panel .panel-competition-title {
  font-weight: 600;
}