.page {
  width: 100%;
  padding: 0 16px 16px;
  margin: 0 auto;
  max-width: 560px;
  height: fit-content;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;

  --font-family-main: "SF Pro Text", sans-serif;
  --stone-grey: #95959d;
  --button-color: #121620;
  --svg-blue: var(--strong-blue);
  --pale-lavender: #dee5f9;
  --pale-lavender-20: #dee5f9;
  --orange: #ff9649;
  --coral: #ff5c5d;
  --rich-blue: #2b7cf6;
  --bright-white: #fbfbfb;
  --bright-red: #ff5758;
  --light-gray: #d9d9d9;
  --vivid-yellow: #ffc700;
  --pale-gray: #c2cad8;
  --pale-green: #75db9c;
  --pale-cerulean: #82b7ef;
  --greyish: #afafaf;
  --vivid-green: #00ff38;
  --dark-charcoal: #191f2d;
  --blueish-gray: #6b76aa;
  --violet: #9949ff;
  --light-lavender: #c5c5d1;
  --pale-pink: #fcd3df;
  --cream-yellow: #fffbcd;
  --pale-aqua: #c9fae6;
  --pale-seafoam: #d3f1e1;
  --pale-lilac: #dec6fe;
  --pale-peach: #fdddc8;
  --deep-charcoal: #1e1e1e;
  --black: #000;
  --bright-sea-green: #04a777;
  --deep-cornflower-blue: #4663b7;
  --charcoal-grey: #505051;
  --pale-light-cerulean: #acd1ff;
  --main-gradient: #fff;
  --strong-blue: #066fde;
  --strong-blue-text: #066fde;
  --strong-blue-80: rgba(6, 111, 222, 0.8);
  --midnight-black: #121620;
  --footer-small-text: #121620;
  --button-active: #fff;
  --button-background: var(--pale-blue);
  --button-active-bg: var(--strong-blue);
  --slate-blue: #6b7baa;
  --slate-blue-placeholder: #6b7baa;
  --pale-blue: #eff2fd;
  --pale-blue-input: #eff2fd;
  --midnight-black-input: #121620;
  --greyish-blue: #8e8e93;
  --soft-blue: #4a567a;
  --soft-blue-gray: #4a567a;
  --soft-blue-periwinkle: #4a567a;
  --gentle-blue: #9babd9;
  --gentle-blue-svg: #9babd9;
  --light-silver: #c7c7c7;
  --light-silver-to-white: #c7c7c7;
  --light-silver-to-lilac-blue: #c7c7c7;
  --light-cornflower-blue: #c2ceee;
  --white: #fff;
  --dark-blue: #202b47;
  --progress-line: #00a3ff;
  --footer-shield: #b5c4ff;
  --blue-color-text: #0066fd;
  --black-color-text: #0066fd;
  --transparent-to-gold: transparent;
  --transparent-to-white: transparent;
  --transparent-to-periwinkle: transparent;
  --white-to-transparent: #fff;
  --loader-background: rgba(16, 32, 77, 0.35);
}

.scannedPhotoFromScanHand {
  // position: fixed;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%) scale(1.4);
  // width: 100%;
  // object-fit: cover;
  // transform: scale();
  animation: scaleScannedPhotoFromScanHand 1s ease-in-out forwards;
}

@keyframes scaleScannedPhotoFromScanHand {
  0% {
    transform: scale(3);
  }

  100% {
    transform: scale(1);
  }
}

.title {
  min-height: 36px;
  margin: 0;
  font-size: 24px;
  margin-bottom: 16px;

  &::first-letter {
    text-transform: uppercase;
  }
}

:global(.dark-theme) .title {
  color: #F7F7F7;
}

.photo-container {
  width: 100%;
  height: fit-content;
  position: relative;
  //   background-color: #cbcbcb;
}

.scanned-photo {
  width: 100%;
}

.scannedPhotoSmall {
  animation: small 2s ease-in-out forwards !important;

  :global(.scanned-photo__image-container) {
    position: relative;

    &:after {
      content: "✅";
      position: absolute;
      top: 0;
      right: 0;
      font-size: 26px;
      transform: translate(50%, -50%);
      opacity: 0;
      animation: appear 2s ease-in-out forwards;
    }
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes small {
  0% {
    height: 207px;
    // align-items: center;
    margin-top: 0;
    margin-bottom: 0;
  }

  100% {
    height: 157px;
    // align-items: flex-start;
    margin-top: -75px;
    margin-bottom: -23px;
  }
}

.svg-objects {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.finger-point {
  animation: finger-show 1s linear;
  animation-fill-mode: forwards;
  transform: scale(0);
  transform-origin: center center;
}

.line {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-miterlimit: 1.5;
  stroke-dasharray: 500;
  stroke: #fff;
  fill: none;
  animation: line-show 1.5s linear;
  animation-fill-mode: forwards;

  &.heart {
    stroke: #f8d90f;
    /* animation-delay: 4.5s; */
  }

  &.life {
    stroke: #e51c39;
  }

  &.head {
    stroke: #00d114;
    /* animation-delay: 1.5s; */
  }

  &.fate {
    stroke: #05ced8;
    /* animation-delay: 3s; */
  }
}

@keyframes finger-show {
  100% {
    transform: scale(1);
  }
}

@keyframes line-show {
  100% {
    stroke-dashoffset: 0;
  }
}

.hidden {
  opacity: 0;
  display: none;
}

@keyframes hide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.points-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.points-container {
  padding: 0 17px;
  gap: 50px;
}

.point {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.point__text-container {
  width: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.point__title {
  font-size: 15px;
  line-height: 125%;
  font-weight: normal;
  margin: 0;
  color: #000;
  text-align: left;
}

.point__percentage {
  font-size: 16px;
  font-weight: 600;
  line-height: 125%;
  color: #275DA6;
}

.progress-bar__container {
  background-color: #e6e6e6;
  height: 8px;
}

.progress-bar__line {
  background-color: #908cf2;
}

.modal-container {
  max-width: 290px;
  padding: 24px 0px 0px;
  overflow: hidden;
}

.modal-title {
  font-weight: 600;
  margin-bottom: 16px;
}

.modal-description {
  padding-inline: 24px;
  text-align: center;
}

.modal-answers {
  display: flex;
  flex-direction: row;
  margin-top: 24px;
  border-top: 1px solid #D9D9D9;
}

.modal-answer {
  width: 50%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #275DA7;
  font-weight: 600;
  cursor: pointer;

  &:first-child {
    border-right: 1px solid #D9D9D9;
  }
}

:global(.dark-theme) .waitingTitle {
  color: #F7F7F7;
}

:global(.dark-theme) .waitingDescription {
  color: #F7F7F7;
}

:global(.dark-theme) .modal-container {
  background-color: #343639;

  &>.modal-answers>.modal-answer {
    color: #1e7dff;
  }
}

:global(.dark-theme) .modal-title {
  color: #F7F7F7;
}

:global(.dark-theme) .modal-description {
  color: #F7F7F7;
}

:global(.dark-theme) .point__title {
  color: #F7F7F7;
}