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

:root {
  --font-roboto: 'Roboto', sans-serif;
  --client-gradient: linear-gradient(to bottom, var(--client-primary-darken) 0%, var(--client-primary-lighten) 10%, var(--client-primary-darken) 100% );
  --client-primary-darker: hsl(from var(client-primary) h s calc(l - 10));
  --color-white: #ffffff;
  --color-white-5: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-black: #000000;
  --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-gray-0: #f7f8f9;
  --color-gray-1: #f4f6f7; /* lightBase */
  --color-gray-2: #ebeef1; /* lightUp1 */
  --color-gray-3: #e2e7eb; /* lightUp2 */
  --color-gray-4: #d9dfe5; /* lightUp3 */
  --color-gray-5: #d0d8de; /* lightUp4 */
  --color-gray-6: #c7d0d8; /* lightUp5 */
  --color-gray-7: #bec9d2; /* lightUp6 */
  --color-gray-8: #b5c1cb; /* lightUp7 */
  --color-gray-9: #acbac5; /* lightUp8 */
  --color-gray-10: #a3b2bf; /* lightUp9 */
  --color-gray-11: #9baab8; /* lightUp10 */
  --color-gray-12: #92a3b2; /* lightUp11 */
  --color-gray-13: #899bac; /* lightUp12 */
  --color-gray-14: #748a9d; /* darkDown12 */
  --color-gray-15: #6b8297; /* darkDown11 */
  --color-gray-16: #647a8e; /* darkDown10 */
  --color-gray-17: #5e7385; /* darkDown9 */
  --color-gray-18: #576b7c; /* darkDown8 */
  --color-gray-19: #516373; /* darkDown7 */
  --color-gray-20: #4b5b6a; /* darkDown6 */
  --color-darkDown-5: #445461;
  --color-darkDown-4: #3e4c58;
  --color-darkDown-3: #38444f;
  --color-darkDown-2: #313c46;
  --color-darkDown-1: #2b353d;
  --color-darkBase: #252d34;
  --color-darkUp-1: #1e252b;
  --color-darkUp-2: #181e22;
  --color-darkUp-3: #121619;
  --color-darkUp-4: #0b0e10;
  --color-darkUp-5: #050607;
  --color-text: #222324;
  --color-text-gray: var(--color-gray-14);
  --color-border: var(--color-gray-3);
  --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);
}

/* ---- Dark Mode ---- */

.dark dii-navigation {
  --color-blue-1: color-mix(in srgb, var(--color-sky), var(--color-darkUp-3) 83%);
  --color-gold-1: color-mix(in srgb, var(--color-gold), var(--color-darkUp-3) 83%);
  --color-red-0: color-mix(in srgb, var(--color-red), var(--color-darkUp-3) 93%);
  --color-red-1: color-mix(in srgb, var(--color-red), var(--color-darkUp-3) 85%);
  --color-sky-1: color-mix(in srgb, hsl(from var(--color-sky) h s 45%), var(--color-darkUp-3) 85%);
  --color-green-1: color-mix(in srgb, var(--color-green), var(--color-darkUp-3) 85%);
  --color-orange-0: color-mix(in srgb, var(--color-orange), var(--color-darkUp-3) 95%);
  --color-orange-1: color-mix(in srgb, var(--color-orange), var(--color-darkUp-3) 90%);
  --color-orange-2: color-mix(in srgb, var(--color-orange), var(--color-darkUp-3) 80%);
  --color-orange-3: color-mix(in srgb, var(--color-orange), var(--color-darkUp-3) 70%);
  --color-orange-5: color-mix(in srgb, var(--color-orange), var(--color-darkUp-3) 50%);
  --color-orange-7: color-mix(in srgb, var(--color-orange), var(--color-darkUp-3) 30%);
  --color-aqua-1: color-mix(in srgb, var(--color-aqua), var(--color-darkUp-3) 90%);
  --color-rose-1: color-mix(in srgb, var(--color-rose), var(--color-darkUp-3) 90%);
  --color-teal-1: color-mix(in srgb, var(--color-teal), var(--color-darkUp-3) 90%);
  --color-violet-1: color-mix(in srgb, var(--color-violet), var(--color-darkUp-3) 90%);
  --color-text: #d6d8da;
  --color-border: var(--color-darkDown-1);
}

.dark combination-offer {
  --color-white: var(--color-darkUp-3);
  --color-gray-1: var(--color-darkUp-2);
  --color-border: var(--color-darkDown-1);
  --default-vi-radio-default-border: var(--color-text);
}