/* Custom Properties */
:root {
  --white: #fff;
  --white-for-alpha: 255, 255, 255;

  --lime: #52D868;
  --green-vuforia: #6DBE4B;
  --green-ptc: #5BB73B;
  --green-bright: #75D85D;
  --green-link: #43A322;
  --green-network-log: #039801;
  --green-passed: #029901;
  --green-dark: #3C7329;
  --green-inactive: #21671e;
  --green-txt-inactive: #6C8B6C;
  --teal: #08EDBB;

  --blue-play: #0096d6;
  --blue-cd: #137efb;
  --blue-annotate: #0083e2;
  --blue-cta-secondary: #2776D2;

  --orange: #FBB23D;
  --orange-yellow: #F5C522;
  --orange-warning: #FFAC2F;
  --orange-red: #DF8600;
  --orange-bold: #FF6627;
  --orange-bold-a: 255, 102, 39;
  --ochre-alert: #F1B434;

  --pink: #EF61FF;
  --red-close: #FC3042;
  --red-remove: #e6002a;
  --red-warning: #FC3042;
  --red-global-warn: #E04C2D;
  --red-fail: #c10000;
  --red-cherry: #C80226;
  --red-fail: #B00B00;
  --red-merlot: #94021D;
  --red-burgundy: #793340;

  --gray-test-modal-bkg: #FEFEFE;
  --off-white: #FEFEFE;
  --gray-test-log: #F2F2F2;
  --gray-lighter: #a8adad;
  --gray-text: #efefef;
   /* below works for $cd-code-txt */
  --gray-med-text: #929292;
  --gray-drk-text: #b1b1b1;

  --gray-neutral: #d3d3d3;
  --gray-neutral-80: #C4C9CA;
  --gray-neutral-50: #747C7D;
  --gray-neutral-33: #555555;
  --gray-neutral-15: #252525;


  --gray-description: #dbdbdb;
  --gray-thumb: #979797;
  --gray-bs: #495057;
  --gray-session-static: #44494E;
  --gray-hover: #575960;
  --gray-contact-hover: #545454;
  --gray-darker: #666666;
  --gray-active-darker: #313438;
  --gray-code: #363E3F;
  --gray-head-side: #3d4246;
  --gray-hex: #384041;
  --gray-inactive: #1F2526;
  --gray-line: #2c3334;
  --gray-sfa-img: #212826;
  --gray-clay: #262C2D;
  --gray-steel: #2C3738;
  --gray-border: #3D4647;
  --text-ideal: #3b4348;

  --blk-modal: #252525;
  --blk-disabled: #171A1A;
  --blk-charcoal: #2A2A2A;
  --blk-text: #212121;
  --blk-dark: #1C1C1C;
  --blk-multi-sesh: #111515;
  --blk-almost: #111515;
  --blk-full: #000000;
  --blk-for-alpha: 0, 0, 0;

  --font-family-sans-serif: "Libre Franklin", -apple-system, BlinkMacSystemFont,
  "Segoe UI", Helvetica, Arial, sans-serif;
  
  /* box shadows */
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --med-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  --f-fam: "Libre Franklin", "Segoe UI", system-ui, -apple-system, Arial,
    sans-serif; 
  --fs-overline-1: 0.625rem;
  --fs-label-1: 0.688rem;
  --fs-caption-1: 0.75rem;
  --fs-body1-1: 0.938rem;
  --fs-body2-1: 1.063rem;
  --fs-title1-1: 1.25rem;
  --fs-title2-1: 1.375rem;
  --fs-title3-1: 1.5rem;
  --fs-headline1-1: 1.75rem;
  --fs-headline2-1: 2rem;
  --fs-headline3-1: 2.25rem;
  --fs-display-1: 2.625rem;

  --fs-9: clamp(5rem, 8vw + 1rem, 9.375rem);

  --fw-2: 200;
  --fw-3: 300;
  --fw-4: 400;
  --fw-5: 500;
  --fw-6: 600;
  --fw-7: 700;
  --f-i: italic;

  --f-letterspace-0: -0.05em;
  --f-letterspace-1: -0.025em;
  --f-letterspace-2: -0.05em;
  --f-letterspace-3: 0.075em;
  --f-letterspace-4: 0.15em;
  --f-letterspace-5: 0.5em;
  --f-letterspace-6: 0.75em;
  --f-letterspace-7: 1em;

  --f-line-height-00: 0.95;
  --f-line-height-0: 1.1;
  --f-line-height-1: 1.25;
  --f-line-height-2: 1.375;
  --f-line-height-3: 1.5;
  --f-line-height-4: 1.75;
  --f-line-height-5: 2;
}

*,
::after,
::before {
  box-sizing: border-box;
}

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 200;
  src: url("assets/fonts/libre-franklin-v3-latin-200.eot");
  /* IE9 Compat Modes */
  src: local("Libre Franklin ExtraLight"), local("LibreFranklin-ExtraLight"),
    url("assets/fonts/libre-franklin-v3-latin-200.eot#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("assets/fonts/libre-franklin-v3-latin-200.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("assets/fonts/libre-franklin-v3-latin-200.woff") format("woff"),
    /* Modern Browsers */ url("assets/fonts/libre-franklin-v3-latin-200.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("assets/fonts/libre-franklin-v3-latin-200.svg#LibreFranklin")
      format("svg");
  /* Legacy iOS */
}

/* libre-franklin-300 - latin */

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 300;
  src: url("assets/fonts/libre-franklin-v3-latin-300.eot");
  /* IE9 Compat Modes */
  src: local("Libre Franklin Light"), local("LibreFranklin-Light"),
    url("assets/fonts/libre-franklin-v3-latin-300.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("assets/fonts/libre-franklin-v3-latin-300.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("assets/fonts/libre-franklin-v3-latin-300.woff") format("woff"),
    /* Modern Browsers */ url("assets/fonts/libre-franklin-v3-latin-300.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("assets/fonts/libre-franklin-v3-latin-300.svg#LibreFranklin")
      format("svg");
  /* Legacy iOS */
}

/* libre-franklin-regular - latin */

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/libre-franklin-v3-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Libre Franklin"), local("LibreFranklin-Regular"),
    url("assets/fonts/libre-franklin-v3-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("assets/fonts/libre-franklin-v3-latin-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("assets/fonts/libre-franklin-v3-latin-regular.woff") format("woff"),
    /* Modern Browsers */
      url("assets/fonts/libre-franklin-v3-latin-regular.ttf") format("truetype"),
    /* Safari, Android, iOS */
      url("assets/fonts/libre-franklin-v3-latin-regular.svg#LibreFranklin")
      format("svg");
  /* Legacy iOS */
}

/* libre-franklin-italic - latin */

@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 400;
  src: url("assets/fonts/libre-franklin-v3-latin-italic.eot");
  /* IE9 Compat Modes */
  src: local("Libre Franklin Italic"), local("LibreFranklin-Italic"),
    url("assets/fonts/libre-franklin-v3-latin-italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("assets/fonts/libre-franklin-v3-latin-italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("assets/fonts/libre-franklin-v3-latin-italic.woff") format("woff"),
    /* Modern Browsers */ url("assets/fonts/libre-franklin-v3-latin-italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("assets/fonts/libre-franklin-v3-latin-italic.svg#LibreFranklin")
      format("svg");
  /* Legacy iOS */
}

/* libre-franklin-500 - latin */

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 500;
  src: url("assets/fonts/libre-franklin-v3-latin-500.eot");
  /* IE9 Compat Modes */
  src: local("Libre Franklin Medium"), local("LibreFranklin-Medium"),
    url("assets/fonts/libre-franklin-v3-latin-500.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("assets/fonts/libre-franklin-v3-latin-500.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("assets/fonts/libre-franklin-v3-latin-500.woff") format("woff"),
    /* Modern Browsers */ url("assets/fonts/libre-franklin-v3-latin-500.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("assets/fonts/libre-franklin-v3-latin-500.svg#LibreFranklin")
      format("svg");
  /* Legacy iOS */
}

/* libre-franklin-600 - latin */

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 600;
  src: url("assets/fonts/libre-franklin-v3-latin-600.eot");
  /* IE9 Compat Modes */
  src: local("Libre Franklin SemiBold"), local("LibreFranklin-SemiBold"),
    url("assets/fonts/libre-franklin-v3-latin-600.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("assets/fonts/libre-franklin-v3-latin-600.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("assets/fonts/libre-franklin-v3-latin-600.woff") format("woff"),
    /* Modern Browsers */ url("assets/fonts/libre-franklin-v3-latin-600.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("assets/fonts/libre-franklin-v3-latin-600.svg#LibreFranklin")
      format("svg");
  /* Legacy iOS */
}

/* libre-franklin-700 - latin */

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 700;
  src: url("assets/fonts/libre-franklin-v3-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Libre Franklin Bold"), local("LibreFranklin-Bold"),
    url("assets/fonts/libre-franklin-v3-latin-700.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("assets/fonts/libre-franklin-v3-latin-700.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("assets/fonts/libre-franklin-v3-latin-700.woff") format("woff"),
    /* Modern Browsers */ url("assets/fonts/libre-franklin-v3-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("assets/fonts/libre-franklin-v3-latin-700.svg#LibreFranklin")
      format("svg");
  /* Legacy iOS */
}

/* ======= end fonts ======= */

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  margin: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  color: var(--white);
  font-family: var(--font-family-sans-serif);
  font-size: 16px;
  line-height: 1.5;
  /* smooth font display */
  /* only use 1st two on dark background */
  /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
  text-rendering: optimizeLegibility;
}

.tippy-tooltip.bkg-theme {
  background-color: black !important;
}

/* Component animations and avoiding FOUC  */

share-session-view,
in-call-timer,
participants-component,
loading-component,
share-view,
video-view,
share-session-view,
not-found-view,
mediacontrols-component,
volume-control,
session-controls,
loading-comp {
  opacity: 1;
  transition: opacity 300ms;
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

share-session-view:unresolved,
in-call-timer:unresolved,
participants-component:unresolved,
loading-component:unresolved,
share-view:unresolved,
video-view:unresolved,
share-session-view:unresolved,
not-found-vie:unresolved,
home-view:unresolved,
mediacontrols-component:unresolved,
volume-control:unresolved,
session-controls:unresolved,
loading-comp:unresolved {
  opacity: 0;
}

/* fade-in Animation for above */
/* ----------------------------------------------
 * Generated by Animista on 2021-10-22 9:54:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.hide {
  display: none;
}

.transform {
  transform: scale(0.9);
}

.tippy-tooltip.zendesk-theme {
  border: 5px solid #5bb73b;
  background-color: white;
  text-align: left;
  transform: translate(-94px, 10px) !important;
  padding: 12px;
  font-family: "Libre Franklin", sans-serif;
}

.tippy-tooltip.zendesk-theme .tippy-arrow {
  border-bottom-color: #5bb73b;
  border-width: 12px 12px 14px 12px;
  left: 194px !important;
  top: -16px !important;
}

/* login background */
.chalk__marks {
  background-image: url(./assets/img/bg-circle-wh.svg),
    url(./assets/img/bg-arrow-up-wh.svg), url(./assets/img/bg-arrow-down-wh.svg);
  background-position: 156px 42vh, 65vw 74vh, 73.7vw 2.2vh;
  background-repeat: no-repeat;
  background-size: 27%, 12%, 20%;
  background-color: var(--white);
}