:root {
  --white: white;

  --text_main: #000000;
  --text_secondary: #798488;
  --text_accent: #ca4113;

  --border: #e3e7e7;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: var(--text_main);
}

body {
  margin: 0;
}

p {
  margin: 0;
}

.hidden {
  display: none !important;
}

.container {
  position: relative;
  height: 100%;
}

/* CONTENT */

.content {
  position: relative;

  display: flex;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;

  padding: 24px 16px;
}

.space {
  flex-grow: 1;
}

.controls {
  z-index: 2;

  width: min(100%, 460px);
  margin: 0 auto;
}

.controls > * + * {
  margin-top: 16px;
}

/* QR_CODE_BOX */

.qr_code_box {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px 64px 16px 16px;

  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--white);
}

/* VIEW_APP_BTN */

.view_app_link {
  display: block;
}

.view_app_btn {
  min-height: 56px;
  width: 100%;
  padding: 8px 16px;

  border-radius: 12px;

  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: #f2f2f2;

  background: #313335;
  border: 0;
}

/* OBJECT_VIEW */

.object_viewer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.model_viewer {
  height: 100%;
  width: 100%;
}

.model_viewer > #ar-prompt {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 25%;
  transform: translateX(-50%);
  animation: elongate 2s ease-in-out alternate infinite;
}

model-viewer[ar-status='session-started'] > #ar-prompt {
  display: block;
}

model-viewer > #ar-prompt > img {
  animation: circle 4s linear infinite;
}

model-viewer > #ar-failure {
  display: none;

  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

model-viewer[ar-tracking='not-tracking'] > #ar-failure {
  display: block;
}

model-viewer > *[slot='progress-bar'] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes elongate {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(-100px);
  }
}

@keyframes circle {
  from {
    transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);
  }
}

/* UTILS */

.center {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
}

/* LOADER */

.loader_view {
  position: relative;
  width: 125px;
  height: 125px;
  transform: scale(0.6);
}

.circle {
  position: absolute;
  background-color: rgb(255, 255, 255);
  height: 22px;
  width: 22px;
  border-radius: 12px;
  animation-name: f_fadeG;
  animation-duration: 0.782s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

#circle_1 {
  left: 0;
  top: 51px;
  animation-delay: 0.2895s;
}

#circle_2 {
  left: 15px;
  top: 15px;
  animation-delay: 0.386s;
}

#circle_3 {
  left: 51px;
  top: 0;
  animation-delay: 0.4825s;
}

#circle_4 {
  right: 15px;
  top: 15px;
  animation-delay: 0.589s;
}

#circle_5 {
  right: 0;
  top: 51px;
  animation-delay: 0.6855s;
}

#circle_6 {
  right: 15px;
  bottom: 15px;
  animation-delay: 0.782s;
}

#circle_7 {
  left: 51px;
  bottom: 0;
  animation-delay: 0.8785s;
}

#circle_8 {
  left: 15px;
  bottom: 15px;
  animation-delay: 0.975s;
}

@keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}

@-o-keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}

@-ms-keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}

@-webkit-keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}

@-moz-keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}