/* Global variables */
:root {
  --default-font: Verdana,
  Arial,
  Helvetica,
  sans-serif;
  --highlight-font: ag-book-rounded,
  Arial,
  Helvetica,
  sans-serif;
}

/* Colours */
/* Font */
/* Animations */
/* Background colours */
.bg-primary {
  background-color: #003575 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bg-secondary {
  background-color: #f5a417 !important;
}
.bg-tone-0 {
  background-color: #6596d7;
}
.bg-tone-1 {
  background-color: #79a3dc;
}
.bg-tone-2 {
  background-color: #97b4de;
}
.bg-tone-3 {
  background-color: #becfeb;
}
.bg-tone-4 {
  background-color: #f1f4fb;
}
.bg-tone-5 {
  background-color: #f5ac24;
}
.bg-tone-6 {
  background-color: #fada9e;
}
.bg-tone-7 {
  background-color: #fce3b6;
}
.bg-tone-8 {
  background-color: #fef6e7;
}
.bg-black {
  background-color: #000;
}
.bg-white {
  background-color: #fff;
}
.bg-green {
  background-color: #7a9e6b;
}

/* border colours */
.border-primary {
  border-color: #003575 !important;
}
.border-primary2 {
  border-color: #003575 !important;
}
.border-secondary {
  border-color: #f5a417 !important;
}
.border-tone-0 {
  border-color: #6596d7;
}
.border-tone-1 {
  border-color: #79a3dc;
}
.border-tone-2 {
  border-color: #97b4de;
}
.border-tone-3 {
  border-color: #becfeb;
}
.border-tone-4 {
  border-color: #f1f4fb;
}
.border-tone-5 {
  border-color: #f5ac24;
}
.border-tone-6 {
  border-color: #fada9e;
}
.border-tone-7 {
  border-color: #fce3b6;
}
.border-tone-8 {
  border-color: #fef6e7;
}
.border-black {
  border-color: #000;
}
.border-white {
  border-color: #fff;
}
.border-green {
  border-color: #7a9e6b;
}

/* Text colours */
.text-primary {
  color: #003575 !important;
}
.text-primary a:not([class]),
.text-primary button:not([class]) {
  color: #003575;
}
.text-primary a:not([class]):hover,
.text-primary button:not([class]):hover {
  color: #003575;
}
.text-secondary {
  color: #f5a417 !important;
}
.text-secondary a:not([class]),
.text-secondary button:not([class]) {
  color: #f5a417;
}
.text-secondary a:not([class]):hover,
.text-secondary button:not([class]):hover {
  color: #f5a417;
}
.text-tone-0 {
  color: #6596d7;
}
.text a:not([class]),
.text button:not([class]) {
  color: #6596d7;
}
.text a:not([class]):hover,
.text button:not([class]):hover {
  color: #6596d7;
}
.text-tone-1 {
  color: #79a3dc;
}
.text a:not([class]),
.text button:not([class]) {
  color: #79a3dc;
}
.text a:not([class]):hover,
.text button:not([class]):hover {
  color: #79a3dc;
}
.text-tone-2 {
  color: #97b4de;
}
.text a:not([class]),
.text button:not([class]) {
  color: #97b4de;
}
.text a:not([class]):hover,
.text button:not([class]):hover {
  color: #97b4de;
}
.text-tone-3 {
  color: #becfeb;
}
.text a:not([class]),
.text button:not([class]) {
  color: #becfeb;
}
.text a:not([class]):hover,
.text button:not([class]):hover {
  color: #becfeb;
}
.text-tone-4 {
  color: #f1f4fb;
}
.text a:not([class]),
.text button:not([class]) {
  color: #f1f4fb;
}
.text a:not([class]):hover,
.text button:not([class]):hover {
  color: #f1f4fb;
}
.text-tone-5 {
  color: #f5ac24;
}
.text a:not([class]),
.text button:not([class]) {
  color: #f5ac24;
}
.text a:not([class]):hover,
.text button:not([class]):hover {
  color: #f5ac24;
}
.text-tone-6 {
  color: #fada9e;
}
.text a:not([class]),
.text button:not([class]) {
  color: #fada9e;
}
.text a:not([class]):hover,
.text button:not([class]):hover {
  color: #fada9e;
}
.text-tone-7 {
  color: #fce3b6;
}
.text a:not([class]),
.text button:not([class]) {
  color: #fce3b6;
}
.text a:not([class]):hover,
.text button:not([class]):hover {
  color: #fce3b6;
}
.text-tone-8 {
  color: #fef6e7;
}
.text a:not([class]),
.text button:not([class]) {
  color: #fef6e7;
}
.text a:not([class]):hover,
.text button:not([class]):hover {
  color: #fef6e7;
}
.text-black {
  color: #000;
}
.text-black a:not([class]),
.text-black button:not([class]) {
  color: #000;
}
.text-black a:not([class]):hover,
.text-black button:not([class]):hover {
  color: #000;
}
.text-white {
  color: #fff;
}
.text-white a:not([class]),
.text-white button:not([class]) {
  color: #fff;
}
.text-white a:not([class]):hover,
.text-white button:not([class]):hover {
  color: #fff;
}

/* Right to left alignment */
.rtl {
  direction: rtl;
  text-align: right;
}
.rtl ul li {
  padding-right: 1.25rem;
}
.rtl ul li:before {
  content: none !important;
}
.rtl ul li:after {
  content: "";
  position: absolute;
  top: 0.5625rem;
  right: 0;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 100%;
  background-color: #f5a417;
}
.rtl ul li li:before {
  content: none;
}
.rtl ul li li:after {
  background-color: #003575;
}

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

h1,
.h1 {
  font-family: var(--highlight-font);
  font-size: 2.5rem;
}
h1 span:not([class]),
.h1 span:not([class]) {
  font-size: 1.25rem;
}

h2,
.h2 {
  font-family: var(--highlight-font);
  font-size: 2.1428571429rem;
}

h3,
.h3 {
  font-family: var(--highlight-font);
  font-size: 1.6071428571rem;
}

h4,
.h4 {
  font-family: var(--highlight-font);
  font-size: 1.4285714286rem;
}

h5,
.h5 {
  font-family: var(--highlight-font);
  font-size: 1.25rem;
}

h6,
.h6 {
  font-family: var(--highlight-font);
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: 3.5714285714rem;
  }
  h2,
  .h2 {
    font-size: 3.125rem;
  }
  h3,
  .h3 {
    font-size: 1.7857142857rem;
  }
  h4,
  .h4 {
    font-size: 1.6071428571rem;
  }
  h5,
  .h5 {
    font-size: 1.4285714286rem;
  }
  h6,
  .h6 {
    font-size: 1.4285714286rem;
  }
}