.green {
  color: #6dbe4b; }

/* cd specific */
/* darks */
/* media colors */
/* for loading animation */
/* volume control slider controls */
/* animation delay */
.green {
  color: #6dbe4b; }

/* cd specific */
/* darks */
/* media colors */
/* for loading animation */
/* volume control slider controls */
/* animation delay */
/* ! DO NOT ADD ANY NEW COLORS TO THIS FILE!!! */
/* ! Add all new colors to the styles.css file, at the application level */
:host {
  --white: #ffffff;
  --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;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --med-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --dark-shadow: 0px 1px 11px 0px rgba(0, 0, 0, 0.63); }

.intro__logo--chalk {
  width: 306px;
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  transform: translateY(210px);
  transition: transform 0.3s ease-out;
  margin-right: auto;
  margin-left: auto;
  padding: 20px; }
  .intro__logo--chalk h4 {
    margin-top: 28px;
    color: var(--text-ideal); }
  .intro__logo--chalk img {
    width: 286px; }

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  z-index: 10;
  color: var(--white); }

.modal-content {
  position: absolute;
  top: 36%;
  left: 50%;
  width: 515px;
  min-height: 185px;
  padding: 1rem 1.5rem;
  transform: translate(-50%, -35%);
  background-color: var(--blk-modal);
  border-radius: 10px;
  box-shadow: var(--dark-shadow); }
  @media screen and (min-height: 1026px) {
    .modal-content {
      transform: translate(-50%, -50%);
      transition: transform 0.3s ease-in-out; } }
  .modal-content h1,
  .modal-content h2,
  .modal-content h3,
  .modal-content p {
    color: var(--white); }
  .modal-content h1 {
    margin-top: 0;
    font-size: 1.125rem;
    font-weight: 500; }
  .modal-content p {
    font-size: 0.9rem;
    font-weight: 400; }
  .modal-content hr {
    opacity: 0.3; }

.message-container p {
  font-size: 0.9rem; }

.browser-logo {
  display: flex;
  justify-content: space-evenly;
  align-items: center; }
  .browser-logo img {
    width: 91px;
    height: auto;
    margin-top: 10px; }

.links__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center; }

.links__text {
  margin: 5px 0;
  font-weight: 500; }
  .links__text a {
    font-size: 0.8rem;
    color: var(--white);
    text-decoration: none; }
    .links__text a:hover {
      border-bottom: 1px dotted var(--white); }

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; }

.download-options {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px; }

.qr-code {
  margin-right: 15px; }
  .qr-code img {
    width: 109px;
    height: auto; }
    @media screen and (max-width: 1088px) {
      .qr-code img {
        width: 80px; } }

.app-options {
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px; }
  .app-options a {
    display: flex;
    margin-left: 0; }
  .app-options img,
  .app-options svg,
  .app-options span {
    display: block;
    width: 128px;
    height: auto;
    align-self: center; }

@media screen and (max-height: 613px) {
  .intro-card__container {
    margin-top: unset !important;
    transform: translateY(203px);
    transition: transform 0.3s ease-out; } }

:host {
  visibility: visible !important;
  opacity: 1 !important; }

.link {
  color: var(--white); }

.google-play {
  margin-left: -14px; }

.google-play > svg {
  width: 126px;
  height: auto;
  margin-left: 15px; }

.google-play > svg .st0 {
  fill-rule: evenodd;
  clip-rule: evenodd; }

.google-play > svg .st1 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #a6a6a6; }

.google-play > svg .st2 {
  fill: #ffffff; }

.google-play > svg .st3 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ffffff; }

.google-play > svg .st4 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: url(#SVGID_1_); }

.google-play > svg .st5 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: url(#SVGID_2_); }

.google-play > svg .st6 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: url(#SVGID_3_); }

.google-play > svg .st7 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: url(#SVGID_4_); }

.google-play > svg .st8 {
  opacity: 0.2;
  fill-rule: evenodd;
  clip-rule: evenodd;
  enable-background: new; }

.google-play > svg .st9 {
  opacity: 0.12;
  fill-rule: evenodd;
  clip-rule: evenodd;
  enable-background: new; }

.google-play > svg .st10 {
  opacity: 0.25;
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ffffff;
  enable-background: new; }