:root > * {

  /**
  * Colors
  */
  /* --white: #fff;
  --black: #000; */
  --gray-50: #F7F7F7;

  /**
  * Font
  */
  --font-family-default: "Speedee", "Noto Sans", "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-promo: "Speedee", "Noto Sans", "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  /**
  * Easing
  */
  --ease-fast-out-slow-in: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-linear-out-slow-in: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-fast-out-linear-in: cubic-bezier(0.4, 0.0, 1, 1);

  /* VIE */
  --vie-toy-width: 198px;
  --vie-toy-height: 120px;

  /* DEFAULTS */
  /* --colors-fg: var(--white, white);
  --colors-bg: var(--black, black); */

  /* --colors-primary: #b80404;*/
  --colors-secondary: #2579b9;
  --colors-cta-border: var(--colors-primary-100);
  --colors-onboarding-h1: #115690; 

  /* primary cta */
   --colors-gradient-primary-start: var(--colors-primary-100);
  --colors-gradient-primary-middle: var(--colors-primary-200);
  --colors-gradient-primary-stop: var(--colors-primary-200); 

  /* primary cta hover */
  /* --colors-gradient-primary-start-hover: #ae0303;
  --colors-gradient-primary-middle-hover: #6a0e0e;
  --colors-gradient-primary-stop-hover: #521613; */

  /* secondary cta */
  /* --colors-gradient-secondary-start: var(--colors-secondary-80);
  --colors-gradient-secondary-middle: var(--colors-tertiary-100);
  --colors-gradient-secondary-stop: var(--colors-secondary-10); */

  /* secondary cta hover */
  /* --colors-gradient-secondary-start-hover: #2372af;
  --colors-gradient-secondary-middle-hover: #225197;
  --colors-gradient-secondary-stop-hover: #223f89; */

  /* options menu */
  /* volume slider + toggles */
  --colors-volume-slider-border: var(--colors-tertiary-100);
  /* --colors-gradient-volume-slider-start: #b80404; */
  --colors-gradient-volume-slider-middle: #730f0f;
  --colors-gradient-volume-slider-stop: #5b1815;

  --colors-gradient-volume-slider-bg-1: #7F2AEC;
  --colors-gradient-volume-slider-bg-2: #5A21C7;
  --colors-settings-panel-underline : #9238FF;

  --colors-gradient-volume-slider-thumb-start: var(--colors-secondary-100);
  --colors-gradient-volume-slider-thumb-middle1: var(--colors-secondary-100);
  --colors-gradient-volume-slider-thumb-middle2: var(--colors-secondary-100);
  --colors-gradient-volume-slider-thumb-middle3: var(--colors-secondary-100);
  --colors-gradient-volume-slider-thumb-end: var(--colors-secondary-100);

  --colors-ui-main: var(--colors-secondary-base);
  --colors-ui-rear-gradient-start: var(--colors-secondary-200);
  --colors-ui-rear-gradient-middle: var(--colors-secondary-100);
  --colors-ui-rear-gradient-stop: var(--colors-secondary-400);
}

.cta-btn {
  border-radius: 1.5rem;
  border-width: 0.5rem;
  border-style: solid;
  /* transform: skewX(10deg); */
}
.cta-btn > * {
  display: inline-block;
  /* transform: skewX(-20deg); */
}


.primary-cta-btn {
  background: var(--colors-primary);
  background: linear-gradient(0deg, var(--colors-gradient-primary-stop) 0%, var(--colors-gradient-primary-middle) 50%, var(--colors-gradient-primary-start) 100%); 
  border-color: var(--colors-primary-400);
}

.cta-btn.primary-cta-btn {
  filter: drop-shadow(0rem 0.75rem 0 var(--colors-primary-400));
}

/* .primary-cta-btn:hover {
  background: var(--colors-gradient-primary-middle);
  background: linear-gradient(0deg, var(--colors-gradient-primary-stop-hover) 0%, var(--colors-gradient-primary-middle-hover) 50%, var(--colors-gradient-primary-start-hover) 100%); 
} */

.primary-cta-btn .cta-btn-txt, 
.cta-btn > * {
  color: #fff;
}

.secondary-cta-btn {
  background: var(--colors-secondary);
  background: linear-gradient(180deg, var(--colors-secondary-100) 0%, var(--colors-secondary-200) 50%,var(--colors-secondary-200) 100%); 
  border-color: var(--colors-secondary-400) !important;
}


.cta-btn.secondary-cta-btn {
  filter: drop-shadow(0rem 0.75rem 0 var(--colors-secondary-400));
}

.secondary-cta-btn .cta-btn-txt, 
.cta-btn > * {
  color: #fff;
}
/* 
.secondary-cta-btn:hover {
  background: var(--colors-gradient-secondary-middle);
  background: linear-gradient(0deg, var(--colors-gradient-secondary-stop-hover) 0%, var(--colors-gradient-secondary-middle-hover) 50%, var(--colors-gradient-secondary-start-hover) 100%); 
} */

/* Volume Control  */
.SettingsPanel li[data-item-name="VolumeControls"] {
    background: #fff;
    border-radius: 1.5rem;
    margin: 0.75rem 0;
}

.volume-setting-container-label {
  color: #000 !important;
  font-size: 2.75rem !important;
}
#VolumeSlider {
  /* @2DO: Why. */
  background-color: rgba(255, 255, 255, 0) !important;
}

input[type=range].volume-range #thumb,
input[type=range].volume-range::-webkit-slider-thumb,
input[type=range].volume-range::-moz-range-thumb {
 }


/* Settings Toggle Switch */
.SettingsPanel-Container .toggle-switch span.slider {
  /* background: #464748; */
  background-repeat: no-repeat !important; 
  border: 2px solid var(--colors-secondary-400);
}

.SettingsPanel-Container .toggle-switch span.slider:before {
  top: 1.5px;
  /* background: linear-gradient(0deg, var(--colors-gradient-primary-stop) 0%, var(--colors-gradient-primary-middle) 50%, var(--colors-gradient-primary-start) 100%);  */
  background: linear-gradient(180deg, var(--colors-secondary-400) 0%, var(--colors-secondary-400) 100%) !important;
  border: 2.5px solid var(--colors-secondary-400) !important;
}

.SettingsPanel-Container .toggle-switch input:checked + .slider {
  background: linear-gradient(0deg, var(--colors-primary-200) 0%,var(--colors-primary-200) 100%) !important;;
  background-repeat: no-repeat !important; 
}

.SettingsPanel-Container .toggle-switch input:checked + .slider:before {
  background: linear-gradient(180deg, var(--colors-secondary-400) 0%, var(--colors-secondary-400) 100%) !important;
}




/* ui. */

.ui,
button[data-function],
button[data-icon],
div.pause-icon:after {
  box-shadow: unset;
  /* fill: var(--elements-ui-assets-color-ii, #AAA); */  /* WBDC: COPIED FROM FIGMA DIRECTLY – DO NOT USE */
  background-color: var(--colors-ui-main);
  background: linear-gradient(180deg, #3BB1FC 0%, #3BB1FC 100%);
  /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);  */ /* WBDC: COPIED FROM FIGMA DIRECTLY – DO NOT USE */
  /* fill: var(--elements-ui-assets-color-ii, #AAA); */ /* WBDC: COPIED FROM FIGMA DIRECTLY – DO NOT USE */
  /* filter: drop-shadow(-2px 2px 0px rgba(0, 0, 0, 0.60)); */ /* WBDC: COPIED FROM FIGMA DIRECTLY – DO NOT USE */
  /* filter: drop-shadow(-0.25rem 0.25rem rgba(0, 0, 0, 0.60)); @2DO: COLOR VALUE NOT IN THEME */
  /* box-shadow: 0px 0.55rem 0.55rem 0px rgba(0, 0, 0, 0.25); @2DO: COLOR VALUE NOT IN THEME */
}

.ui.shadowed {
  box-shadow: 1px 0px 10px 5px var(--colors-tertiary-80);
}
.ui.filled {
  /* background-color: magenta; */
  /* background: radial-gradient(circle, var(--colors-tertiary-0) 0%, var(--colors-tertiary-80) 100%); */
}
/* .ui:before {
  background-color: orange;
  background: linear-gradient(to bottom, var(--colors-primary-0) 0%, var(--colors-primary-50) 100%);
  box-shadow: 10px 1px 1px red;
} */
.ui.filled:active {
  box-shadow: 0 0 10px black;
}

.ui.correct {
}
.ui.correct.filled {
  /* background: #100865; */
}
.ui.correct:before {
  /* background: #6eebfc; */
}


button[data-function="pause"],
button[data-icon="dots"],
button[data-icon="close"],
button[data-icon="back"],
#SettingsPanel-Toggler[data-icon="dots"] {
}
.ui:before,
button[data-icon]:before,
div.pause-icon:before,
#SettingsPanel-Toggler[data-icon]:before {
  background-color: var(--colors-primary); /* @2DO: var(--property-primary-base in FIGMA  */ 
  /* background: linear-gradient(180deg, var(--colors-tertiary-100) 0%, var(--colors-tertiary-100) 67.19%, var(--colors-tertiary-100) 100%); */
  background: var(--colors-secondary-400);
}
svg.pause-icon * {
  opacity: 0;
}



.ui.filled:hover {
  background: url(/___grimace_face.png);
  background-size: 100% 100%;
}
.ui.filled:hover:before {
  opacity: 0.5;
}


#VIE-Player {
  /* background-color: magenta; */
}

.cta-btn span {
  position: relative;
}

.cta-btn span:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: 0.5rem #000;
  z-index: -1;
}

.cta-btn span:after {
  display: none;
  /* content: attr(data-text);
  position: absolute;
  top: 0.2rem;
  left: -0.2rem;
  color: transparent;
  z-index: -2;
  -webkit-text-stroke: 0.35rem rgba(0, 0, 0, 0.5); */
}