@tailwind base;
@tailwind components;
@tailwind utilities;

.unselectable {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  -webkit-touch-callout: none; /* iOS Safari */
}

#loadingScreen {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 50px;
  text-align: center;
  background-color: transparent;
  z-index: 9999;

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

  overflow: hidden;
  display: none;
}

#spinning-logo-div {
  background-color: transparent;
}

#spinning-logo {
  z-index: 100000;
  position: absolute;

  width: 350px;

  transform: rotateY(45deg);
  animation: rotateAnimation 1.7s linear infinite;
  -webkit-transform: translateZ(-1000px);
}

.visible {
  visibility: visible;
  opacity: 1;
}

/* .hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 500ms, opacity 500ms ease-out;
} */

@keyframes rotateAnimation {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

#loadingScreen-story {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}

.logo-small-container {
  width: auto;
  height: auto;
  position: absolute;
  top: 20px;
  left: 34px;
}

.logo-small {
  width: 114px;
  height: 38px;
  object-fit: cover;
}

.text-container {
  max-height: min-content;
  display: flex;
  flex-direction: column;
  padding-left: 1.675rem;
  padding-right: 1.675rem;
  align-items: center;
  justify-content: center;
}

.text-title {
  font-weight: 500;
  font-family: 'InterMedium';
  font-size: 48px;
  line-height: 58px;
  text-align: center;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0px 4px 4px rgba(255, 255, 255, 0.25);
  display: flex;
}

.text-subtext {
  font-family: 'InterRegular';
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #ffffff;
  display: flex;
}

#poi-screen {
  visibility: hidden;
  position: absolute;
  z-index: 60;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
}

.poi-iframe-container {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: start;
  align-items: start;
  height: 95%;
  width: 100%;
  opacity: 0.98;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
}

#poi-iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 95%;
  --resolution: 2.656;
  display: block;
  border: none;
  -ms-zoom: var(--resolution);
  -moz-transform: scale(var(--resolution));
  -moz-transform-origin: 0 0;
  -o-transform: scale(var(--resolution));
  -o-transform-origin: 0 0;
  -webkit-transform: scale(var(--resolution));
  -webkit-transform-origin: 0 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(5px);
  background-color: rgba(255, 255, 255, 0.8);
}

.poi-close-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5%;
  background: rgba(0, 0, 0, 0.8);
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
}

.poi-close-img {
  object-fit: contain;
  max-width: 75%;
  max-height: 90%;
}

@font-face {
  font-family: 'InterRegular';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter/Inter-Regular.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'InterBold';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter/Inter-Bold.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'InterSemiBold';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter/Inter-SemiBold.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'InterExtraBold';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/inter/Inter-ExtraBold.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'InterMedium';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter/Inter-Medium.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'InterBoldItalic';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/inter/Inter-BoldItalic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'SpaceMonoRegular';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/space-mono/SpaceMono-Regular.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'SpaceMonoBold';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/space-mono/SpaceMono-Bold.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'ArsenalRegular';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/arsenal/Arsenal-Regular.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'ArsenalBold';
  font-style: bold;
  font-weight: 700;
  src: url('../fonts/arsenal/Arsenal-Bold.ttf');
  font-family: 'TradeWinds';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/trade-winds/TradeWinds-Regular.ttf');
  font-display: swap;
}

/* Samsung One Font Family */
@font-face {
  font-family: 'SamsungOne';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/samsung-one/SamsungOne-200_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOne';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/samsung-one/SamsungOne-300_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOne';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/samsung-one/SamsungOne-400_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOne';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/samsung-one/SamsungOne-500_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOne';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/samsung-one/SamsungOne-600_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOne';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/samsung-one/SamsungOne-700_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOne';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/samsung-one/SamsungOne-800_v1.1.ttf') format('truetype');
  font-display: swap;
}

/* Samsung One Condensed Font Family */
@font-face {
  font-family: 'SamsungOneCondensed';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/samsung-one/SamsungOne-200C_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOneCondensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/samsung-one/SamsungOne-300C_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOneCondensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/samsung-one/SamsungOne-400C_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOneCondensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/samsung-one/SamsungOne-500C_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOneCondensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/samsung-one/SamsungOne-600C_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOneCondensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/samsung-one/SamsungOne-700C_v1.1.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SamsungOneCondensed';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/samsung-one/SamsungOne-800C_v1.1.ttf') format('truetype');
  font-display: swap;
}

#authScreen {
  font-family: 'InterRegular';
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.iti__flag-container {
  font-size: 18px;
}

.iti__selected-dial-code {
  font-size: 18px;
}

/* .iti--container,
.iti__country-list {
  font-family: 'InterRegular';
  font-size: 13px;
  z-index: 100001 !important;
  width: 60%;
  height: 60%;

  top: 50%;
  left: 50%;
  transform: translateX(-50%) and translateY(-50%);
  position: absolute;

  -webkit-overflow-scrolling: touch;
} */

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

@media (min-width: 1025px) {
  #auth-input {
    max-width: 50%;
  }

  #sign-in-instead-disclaimer {
    font-size: 35px;
  }
}

.lds-circle-center {
  display: inline-block;
  position: absolute;
  width: 40px;
  height: 40px;

  right: 0;
  left: 0;
  bottom: 3%;

  margin: auto;
}
.lds-circle {
  display: inline-block;
  position: absolute;
  right: 3%;
  bottom: 3%;
  opacity: 100%;
}

.lds-circle-small {
  margin: auto;
  display: inline-block;
  width: 30px;
  height: 30px;
  opacity: 100%;
}

.spin-logo-small {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.spin-logo {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 8px;
  border-radius: 50%;
  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@media (min-width: 1025px) {
  .lds-circle-center {
    width: 80px;
    height: 80px;
  }

  .spin-logo {
    width: 80px;
    height: 80px;
  }

  .spin-logo-small {
    width: 50px;
    height: 50px;
  }

  .lds-circle-small {
    width: 50px;
    height: 50px;
  }

  .iti--container,
  .iti__country-list {
    font-size: 18px;
  }
}

@keyframes lds-circle {
  0%,
  100% {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  100% {
    transform: rotateY(3600deg);
  }
}

.fade-out {
  animation: fadeOut ease-out 350ms;
  animation-fill-mode: forwards;
}

.fade-out-fast {
  animation: fadeOut ease-out 200ms;
  animation-fill-mode: forwards;
}

.fade-out-100 {
  animation: fadeOut ease-out 100ms;
  animation-fill-mode: forwards;
}

.fade-out-50 {
  animation: fadeOut ease-out 50ms;
  animation-fill-mode: forwards;
}

.fade-out-slow {
  animation: fadeOut ease-out 650ms;
  animation-fill-mode: forwards;
}

.fade-out-custom {
  animation: fadeOut ease-out var(--fade-out-ms);
  animation-fill-mode: forwards;
}

.fade-in {
  animation: fadeIn ease-in 350ms;
  animation-fill-mode: forwards;
}

.fade-in-100 {
  animation: fadeIn ease-in 100ms;
  animation-fill-mode: forwards;
}

.fade-in-50 {
  animation: fadeIn ease-in 50ms;
  animation-fill-mode: forwards;
}

.fade-in-slow {
  animation: fadeIn ease-in 650ms;
  animation-fill-mode: forwards;
}

.fade-in-custom {
  animation: fadeIn ease-in var(--fade-in-ms);
  animation-fill-mode: forwards;
}

.fade-in-600 {
  animation: fadeIn ease-in 600ms;
  animation-fill-mode: forwards;
}

.fade-white-out {
  animation: fadeWhiteOut ease-out 900ms;
  animation-fill-mode: forwards;
}

.fade-white-in {
  animation: fadeWhiteIn ease-in 150ms;
  animation-fill-mode: forwards;
}

.fade-black-out {
  animation: fadeBlackOut ease-out 900ms;
  animation-fill-mode: forwards;
}

.fade-white-out-slow {
  animation-name: fadeWhiteOutSlow, blurOut;
  animation-duration: 1000ms, 2600ms;
  animation-timing-function: linear, cubic-bezier(0, 0.53, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: 0ms, 300ms;
}

.fade-out-collapse {
  animation: fadeOutCollapse ease-out 700ms;
  animation-fill-mode: forwards;
}

.blur-in {
  animation-name: blurIn;
  animation-duration: 600ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.blur-in-custom {
  animation-name: blurInCustom;
  animation-duration: var(--blur-in-ms);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.blur-out-custom {
  animation-name: blurOutCustom;
  animation-duration: var(--blur-out-ms);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOutMoreEase {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (-webkit-min-device-pixel-radio: 0) {
  textarea:focus {
    font-size: 14px;
  }
}

@keyframes fadeWhiteOut {
  0% {
    opacity: 1;
    backdrop-filter: blur(40px);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.7);
  }
  100% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
  }
}

@keyframes fadeWhiteIn {
  0% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0);
  }
  100% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
  }
}

@keyframes fadeBlackOut {
  0% {
    opacity: 1;
  }
  50% {
    background-color: rgba(0, 0, 0, 0.5);
  }
  100% {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
  }
}

@keyframes fadeBlackIn {
  0% {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
  }
  50% {
    background-color: rgba(0, 0, 0, 0.5);
  }
  100% {
    opacity: 1;
    background-color: rgba(0, 0, 0, 1);
  }
}

@keyframes fadeWhiteOutSlow {
  0%,
  30% {
    background: rgba(255, 255, 255, 0.75);
  }
  100% {
    background: rgba(255, 255, 255, 0);
  }
}

@keyframes blurIn {
  0%,
  48% {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  100% {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

@keyframes blurInCustom {
  0%,
  48% {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  100% {
    backdrop-filter: blur(var(--blur-in-px));
    -webkit-backdrop-filter: blur(var(--blur-in-px));
  }
}

@keyframes blurOut {
  0%,
  48% {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  100% {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}

@keyframes blurOutCustom {
  0%,
  48% {
    backdrop-filter: blur(var(--blur-out-px));
    -webkit-backdrop-filter: blur(var(--blur-out-px));
  }
  100% {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}

@keyframes fadeOutCollapse {
  0% {
    opacity: 1;
    max-height: 1000px;
  }
  50% {
    opacity: 0;
    max-height: 1000px;
  }
  100% {
    opacity: 0;
    max-height: 0px;
  }
}

.overlay-screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10002;
}

.spin-animation {
  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}