/* Brand Colours */

:root {
  --wk-primary-blue: #03a9f4;
  --wk-primary-blue-hover: #0286c2;
  --wk-primary-blue-disabled: #92dcfe;
  --wk-primary-green: #34ba0b;
  --wk-primary-green-hover: #29a005;
  --wk-primary-green-disabled: #9bdd8f;
  --wk-secondary-color: #21242b;
  --wk-warning-color: #d50000;
  --wk-warning-color-hover: #bf0606;
  --wk-light-color: #fff;
  /* Greys */
  --wk-brand-grey-a: #eee;
  --wk-brand-grey-b: #ddd;
  --wk-brand-grey-c: #ccc;
  --wk-brand-grey-d: #888;
  --wk-brand-grey-e: #555;
  /* Text Colors */
  --wk-input-placeholder: #b9cddb;
  /* Card Colors */
  --wk-item-desc: #57636c;
  --wk-item-border: #cddae2;
  --wk-item-border-hover: #a5bec9;
  /* Banner Color */
  --wk-banner-color: #ec407a;
}

/* BODY */

body {
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, "Lucida Sans", "Noto Sans",
    "Noto Color Emoji", sans-serif, Arial;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* FONT SIZE */

.fs--xxs {
  font-size: 12px;
  font-size: 0.75rem;
}

.fs--xs {
  font-size: 13px;
  font-size: 0.8125rem;
}

.fs--s {
  font-size: 14px;
  font-size: 0.875rem;
}

.fs--m {
  font-size: 16px;
  font-size: 1rem;
}

.fs--ml {
  font-size: 18px;
  font-size: 1.125rem;
}

.fs--l {
  font-size: 20px;
  font-size: 1.25rem;
}

.fs--xl {
  font-size: 24px;
  font-size: 1.5rem;
}

.fs--lxl {
  font-size: 28px;
  font-size: 1.75rem;
}

.fs--xxl {
  font-size: 37px;
  font-size: 2.3125rem;
}

.fs--xxxl {
  font-size: 42px;
  font-size: 2.625rem;
}

.fs--xxxxl {
  font-size: 56px;
  font-size: 3.5rem;
}

/* FONT WEIGHT */

.fw--l {
  font-weight: 300;
}

.fw--r {
  font-weight: 400;
}

.fw--m {
  font-weight: 500;
}

.fw--sb {
  font-weight: 600;
}

/* TEXT COLOURS */

.text--primary {
  color: #34ba0b;
}

.text--secondary {
  color: #888;
}

/* BUTTONS */

.paper-button {
  font-weight: 600;
  min-width: 80px;
  height: 38px;
  text-transform: none;
  font-family: "Helvetica Neue", Helvetica, Lucida Sans, sans-serif, Arial;
  white-space: nowrap;
  font-size: 14px;
  line-height: 18px;
  padding: 8px 16px 10px;
  margin: 0;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
}

/* BUTTON COLOURS */

.btn--primary {
  background: #34ba0b;
  line-height: 20px;
  color: #fff;
}

.btn--primary:hover {
  background: #29a005;
}

.btn--primary[disabled],
[disabled] .btn--primary {
  background: #9bdd8f;
  color: #fff;
}

.btn--primary-blue {
  background: #03a9f4;
  line-height: 20px;
  color: #fff;
}

.btn--primary-blue:hover {
  background: #0286c2;
}

.btn--primary-blue[disabled],
[disabled] .btn--primary-blue {
  background: #92dcfe;
  color: #fff;
}

.btn--primary-inverse {
  background: #34ba0b;
  color: var(--wk-light-color);
}

.btn--secondary {
  background: #fff;
  color: #34ba0b;
  border: #34ba0b;
}

.btn--secondary:hover {
  color: #29a005;
  border-color: #29a005;
}

.btn--secondary[disabled] {
  border-color: #9bdd8f;
  color: #9bdd8f;
  background: #fff;
}

.btn--tertiary {
  color: #555;
  background: #eee;
}

.btn--tertiary:hover {
  background: #ddd;
}

.btn--tertiary[disabled] {
  background: #fcfcfc;
  color: #d5d5d5;
}

.btn--inverse {
  color: #fff;
  border: 2px solid var(--wk-light-color);
}

.btn--inverse:hover {
  background: rgba(255, 255, 255, 0.3);
}

.btn--negative {
  color: #fff;
  background: #d50000;
}

.btn--negative:hover {
  background: #bf0606;
}

.btn--negative[disabled] {
  background: #eb8388;
}

/* SPACING */

.p--none {
  padding: 0;
}

.p--xs {
  padding: 0.25rem;
}

.p--s {
  padding: 0.5rem;
}

.p--m {
  padding: 1rem;
}

.p--l {
  padding: 1.5rem;
}

.p--xl {
  padding: 2rem;
}

.p--xxl {
  padding: 2.5rem;
}

/* BORDER RADIUS */

.br--xs {
  border-radius: 2px;
}

.br--s {
  border-radius: 3px;
}

.br--m {
  border-radius: 4px;
}

.br--l {
  border-radius: 5px;
}

.br--full {
  border-radius: 1000px;
}

.br--circle {
  border-radius: 50%;
}