/* ----------------------------------------------------------------
    Copyright (c) Demosphere International Inc.
    No permission is granted for any purpose without prior
    written consent from Demosphere International Inc.
-------------------------------------------------------------------*/

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --client-gradient: linear-gradient(to bottom, var(--client-primary-darken) 0%, var(--client-primary-lighten) 10%, var(--client-primary-darken) 100% );
  --font-roboto: 'Roboto', sans-serif;
  --color-blue: #214375;
  --color-blue-1: color-mix(in srgb, var(--color-blue), var(--color-white) 90%);
  --color-blue-3: color-mix(in srgb, var(--color-blue), transparent 70%);
  --color-blue-5: color-mix(in srgb, var(--color-blue), transparent 50%);
  --color-gold: #dfa608;
  --color-gold-1: color-mix(in srgb, var(--color-gold), var(--color-white) 86%);
  --color-gold-5: color-mix(in srgb, var(--color-gold), transparent 50%);
  --color-red: #f43825;
  --color-red-0: color-mix(in srgb, var(--color-red), var(--color-white) 95%);
  --color-red-1: color-mix(in srgb, var(--color-red), var(--color-white) 86%);
  --color-red-3: color-mix(in srgb, var(--color-red), transparent 70%);
  --color-red-5: color-mix(in srgb, var(--color-red), transparent 50%);
  --color-sky: #27a0f2;
  --color-sky-1: color-mix(in srgb, var(--color-sky), var(--color-white) 86%);
  --color-sky-3: color-mix(in srgb, var(--color-sky), transparent 70%);
  --color-sky-5: color-mix(in srgb, var(--color-sky), transparent 50%);
  --color-green: #2baa1d;
  --color-green-1: color-mix(in srgb, var(--color-green), var(--color-white) 86%);
  --color-green-3: color-mix(in srgb, var(--color-green), transparent 70%);
  --color-green-5: color-mix(in srgb, var(--color-green), transparent 50%);
  --color-orange: #f57c00;
  --color-orange-0: color-mix(in srgb, var(--color-orange), var(--color-white) 95%);
  --color-orange-1: color-mix(in srgb, var(--color-orange), var(--color-white) 90%);
  --color-orange-2: color-mix(in srgb, var(--color-orange), var(--color-white) 80%);
  --color-orange-3: color-mix(in srgb, var(--color-orange), var(--color-white) 70%);
  --color-orange-5: color-mix(in srgb, var(--color-orange), var(--color-white) 50%);
  --color-orange-7: color-mix(in srgb, var(--color-orange), var(--color-white) 30%);
  --color-aqua: #20aabe;
  --color-aqua-1: color-mix(in srgb, var(--color-aqua), var(--color-white) 90%);
  --color-aqua-5: color-mix(in srgb, var(--color-aqua), transparent 50%);
  --color-rose: #e91e63;
  --color-rose-1: color-mix(in srgb, var(--color-rose), var(--color-white) 90%);
  --color-rose-2: color-mix(in srgb, var(--color-rose), transparent 80%);
  --color-rose-5: color-mix(in srgb, var(--color-rose), transparent 50%);
  --color-teal: #3caea3;
  --color-teal-1: color-mix(in srgb, var(--color-teal), var(--color-white) 90%);
  --color-teal-5: color-mix(in srgb, var(--color-teal), transparent 50%);
  --color-violet: #7b1fa2;
  --color-violet-1: color-mix(in srgb, var(--color-violet), var(--color-white) 90%);
  --color-violet-5: color-mix(in srgb, var(--color-violet), transparent 50%);
  --color-text: #222324;
  --color-white-5: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-gray-0: #f7f8f9;
  --color-gray-1: #f4f6f7;
  --color-gray-2: #ebeef1;
  --color-gray-3: #e2e7eb;
  --color-gray-4: #d9dfe5;
  --color-gray-5: #d0d8de;
  --color-gray-6: #c7d0d8;
  --color-gray-7: #bec9d2;
  --color-gray-8: #b5c1cb;
  --color-gray-9: #acbac5;
  --color-gray-10: #a3b2bf;
  --color-gray-11: #9baab8;
  --color-gray-12: #92a3b2;
  --color-gray-13: #899bac;
  --color-gray-14: #748a9d;
  --color-gray-15: #6b8297;
  --color-gray-16: #647a8e;
  --color-gray-17: #5e7385;
  --color-gray-18: #576b7c;
  --color-gray-19: #516373;
  --color-gray-20: #4b5b6a;
  --transition: 0.3s cubic-bezier(.25,.8,.25,1);
  --elevation-1: 0 1px 2px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.05);
  --elevation-2: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --elevation-3: 0 4px 8px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);
  --elevation-4: 0 8px 16px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.08);
  --elevation-5: 0 16px 32px rgba(0,0,0,0.07), 0 32px 96px rgba(0,0,0,0.09);
}
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--color-gray-10);
  box-shadow: 0 0 1px rgba(255,255,255,.5);
}