@font-face {
  font-family: 'text-security-disc';
  src: url('/assets/fonts/text-security-disc.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: url('/assets/fonts/Montserrat/Montserrat-Regular.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: bold;
  src: url('/assets/fonts/Montserrat/Montserrat-Bold.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: thin;
  src: url('/assets/fonts/Montserrat/Montserrat-Light.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/Montserrat/Montserrat-Black.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/Montserrat/Montserrat-ExtraBold.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/Montserrat/Montserrat-Bold.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/Montserrat/Montserrat-SemiBold.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/Montserrat/Montserrat-Medium.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/Montserrat/Montserrat-Regular.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/Montserrat/Montserrat-Light.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('/assets/fonts/Montserrat/Montserrat-ExtraLight.ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('/assets/fonts/Montserrat/Montserrat-Thin.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: normal;
  src: url('/assets/fonts/Open_Sans/OpenSans-Regular.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: bold;
  src: url('/assets/fonts/Open_Sans/OpenSans-Bold.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: thin;
  src: url('/assets/fonts/Open_Sans/OpenSans-Light.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/Open_Sans/OpenSans-ExtraBold.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/Open_Sans/OpenSans-Bold.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/Open_Sans/OpenSans-SemiBold.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/Open_Sans/OpenSans-Regular.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/Open_Sans/OpenSans-Light.ttf');
}

@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: normal;
  src: url('/assets/fonts/Courier_New/CourierNew-Regular.ttf');
}

@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: bold;
  src: url('/assets/fonts/Courier_New/CourierNew-Bold.ttf');
}

$wide-modal: 900px;

:root {
  --alt-red: #ff4961;
  --alt-orange: #f89248;
  --alt-yellow: #e5d53e;
  --alt-green: #3dcf6f;
  --alt-blue: #00a8a8;
  --alt-purple: #9747ff;

  --portal-header-height: 56px;

  // @TODO rename when make style lib
  --tw-color-black: 0 0 0;
  --tw-color-white: 255 255 255;
  --tw-color-slate-50: 248 250 252;
  --tw-color-slate-100: 241 245 249;
  --tw-color-slate-200: 226 232 240;
  --tw-color-slate-300: 203 213 225;
  --tw-color-slate-400: 148 163 184;
  --tw-color-slate-500: 100 116 139;
  --tw-color-slate-600: 71 85 105;
  --tw-color-slate-700: 51 65 85;
  --tw-color-slate-800: 30 41 59;
  --tw-color-slate-900: 15 23 42;
  --tw-color-slate-950: 2 6 23;
  --tw-color-gray-50: 249 250 251;
  --tw-color-gray-100: 243 244 246;
  --tw-color-gray-200: 229 231 235;
  --tw-color-gray-300: 209 213 219;
  --tw-color-gray-400: 156 163 175;
  --tw-color-gray-500: 107 114 128;
  --tw-color-gray-600: 75 85 99;
  --tw-color-gray-700: 55 65 81;
  --tw-color-gray-800: 31 41 55;
  --tw-color-gray-900: 17 24 39;
  --tw-color-gray-950: 3 7 18;
  --tw-color-zinc-50: 250 250 250;
  --tw-color-zinc-100: 244 244 245;
  --tw-color-zinc-200: 228 228 231;
  --tw-color-zinc-300: 212 212 216;
  --tw-color-zinc-400: 161 161 170;
  --tw-color-zinc-500: 113 113 122;
  --tw-color-zinc-600: 82 82 91;
  --tw-color-zinc-700: 63 63 70;
  --tw-color-zinc-800: 39 39 42;
  --tw-color-zinc-900: 24 24 27;
  --tw-color-zinc-950: 9 9 11;
}

body {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.loading-dots:after {
  content: '...';
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis-dot 1s infinite 0.3s;
  animation-fill-mode: forwards;
  width: 1em;
}

@keyframes ellipsis-dot {
  25% {
    content: '';
  }

  50% {
    content: '.';
  }

  75% {
    content: '..';
  }

  100% {
    content: '...';
  }
}

a {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

/* marketplace */
.background-border {
  border-radius: 0.75rem;
  background-image: linear-gradient(
    to top left,
    rgb(161 161 170 / 0.75),
    #52525b
  );
  padding: 1px;
  margin-top: 1.5rem;
}

.box-shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:
    0 0 #0000,
    0 0 #0000,
    var(--tw-shadow);
}

.shadow-color-light {
  --tw-shadow-color: rgb(161 161 170 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

.additional-detail-title {
  font-family: 'Montserrat';
  font-size: 0.85rem;
  line-height: 1.75rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .06rem;
  margin-bottom: 1rem;
  pointer-events: none;
}

.buttons {
  margin-top: 1rem;

  :first-child {
    margin-right: 0.5rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
hr {
  margin: 0;
}