* {
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  user-select: none;
  text-decoration: none;
  will-change: transform, opacity, top, left, bottom, right, scroll-position, contents, auto;
  box-sizing: border-box;
}

:root {
  --color-000: #FFFFFF;
  --color-050: #f6f6f6;
  --color-100: #e7e7e7;
  --color-200: #d1d1d1;
  --color-300: #b0b0b0;
  --color-400: #888888;
  --color-500: #6d6d6d;
  --color-600: #5d5d5d;
  --color-700: #4f4f4f;
  --color-800: #454545;
  --color-900: #3d3d3d;
  --color-925: #141414;
  --color-950: #000000;
  --color-960: #F56416;
  --color-965: #ff5252;

  --bg-000: #141414;
  --bg-000-AA: #141414AA;
  --bg-gradient-000: linear-gradient(45deg, #E50914, #0072CE);

  --rgba-950: rgba(0, 0, 0);
  --rgba-950-1: rgba(0, 0, 0, 0.5);

  --font-size-000: 7pt;
  --font-size-050: 8pt;
  --font-size-075: 9pt;
  --font-size-100: 10pt;
  --font-size-150: 11pt;
  --font-size-200: 12pt;
  --font-size-300: 15pt;
  --font-size-400: 19pt;
  --font-size-500: 24pt;
  --font-size-600: 30pt;
  --font-size-700: 38pt;

  --size-icon: 15pt;
  --size-btn-play: 25pt;

  --stroke-width: 1pt;

  --height_app_nav: 45pt;
  --height-button-000: 30pt;
  --height-beforeimg: 1.5pt;

  --radius-000: 2.5px;
  --radius-050: 5px;
  --radius-100: 10px;
  --radius-200: 20px;
  --radius-300: 30px;
  --radius-400: 40px;

  --transition-ease: .5s ease-in-out;
  --transition-cubic-bezier: cubic-bezier(0.23, 1, 0.320, 1);

  --espace-050: calc(.5rem + .5vw);
  --espace-100: calc(1rem + 1vw);
  --espace-200: calc(2rem + 2vw);


  --splashScreen: linear-gradient(135deg, #b39ddb, #587c9f);

  /* ALERT COLOR */
  --error-critical: #DC3545;
  --error-serious: #FF6B35;
  --error-moderate: #FFC107;
  --error-notice: #17A2B8;
  --error-success: #28A745;
}

@font-face {
  font-family: "normal";
  src: url('/assets/fonts/regular.ttf') format('truetype');
}

@font-face {
  font-family: "light";
  src: url('/assets/fonts/light.ttf') format('truetype');
}

@font-face {
  font-family: "medium";
  src: url('/assets/fonts/medium.ttf') format('truetype');
}

@font-face {
  font-family: "bold";
  src: url('/assets/fonts/bold.ttf') format('truetype');
}

@font-face {
  font-family: "black";
  src: url('/assets/fonts/black.ttf') format('truetype');
}

a,
input,
select,
input::placeholder,
textarea,
button,
body {
  border: none;
  font-family: "normal";
  background: none;
  color: var(--color-050);
  font-size: var(--font-size-100);
  cursor: default;
}

svg {
  stroke-linecap: round;
  stroke-linecap: round;
  stroke: var(--color-050);
  fill: var(--color-050);
  stroke-width: var(--stroke-width);
}

svg line {
  stroke-linecap: butt;
}

svg polygon {
  stroke-linejoin: miter;
}

svg.tiktok {
  stroke: none;
  fill: var(--color-100);
}

.icon {
  width: var(--size-icon);
  height: var(--size-icon);
  fill: none;
}

.none {
  display: none !important;
}

.nowebkit::-webkit-scrollbar {
  display: none !important;
}

.nowebkit::-webkit-scrollbar-track {
  display: none !important;
}

.nowebkit::-webkit-scrollbar-thumb {
  display: none !important;
}

.nowebkit::-webkit-scrollbar-thumb:hover {
  display: none !important;
}

@keyframes message-pulse {
  0% {
    border-radius: var(--radius-050);
  }

  25% {
    border-radius: var(--radius-100) var(--radius-300) var(--radius-300) var(--radius-100) / var(--radius-100) var(--radius-100) var(--radius-300) var(--radius-300);
  }

  50% {
    border-radius: var(--radius-400);
  }

  75% {
    border-radius: var(--radius-300) var(--radius-100) var(--radius-100) var(--radius-300) / var(--radius-300) var(--radius-300) var(--radius-100) var(--radius-100);
  }

  100% {
    border-radius: var(--radius-050);
  }
}

/***** squa_load *****/
.squa_load {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #141414 8%, #2a2a2a 18%, #141414 33%);
  background-size: 800px 104px;
  position: relative;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

/***** theLoader *****/
.theLoader {
  width: var(--size-icon);
  height: var(--size-icon);
  border: var(--stroke-width) solid var(--color-960);
  border-radius: 50%;
  animation: l20-1 0.8s infinite linear alternate;
  /*, l20-2 1.6s infinite linear;*/
}

@keyframes l20-1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)
  }

  12.5% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%)
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%)
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
  }

  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
  }

  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%)
  }

  100% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%)
  }
}

@keyframes l20-2 {
  0% {
    transform-origin: center;
    transform: rotate(0deg);
  }

  50% {
    transform-origin: center;
    transform: rotate(180deg);
  }

  100% {
    transform-origin: center;
    transform: rotate(360deg);
  }
}

@keyframes message-pulse {
  0% {
    border-radius: var(--radius-050);
  }

  25% {
    border-radius: var(--radius-100) var(--radius-300) var(--radius-300) var(--radius-100) / var(--radius-100) var(--radius-100) var(--radius-300) var(--radius-300);
  }

  50% {
    border-radius: var(--radius-400);
  }

  75% {
    border-radius: var(--radius-300) var(--radius-100) var(--radius-100) var(--radius-300) / var(--radius-300) var(--radius-300) var(--radius-100) var(--radius-100);
  }

  100% {
    border-radius: var(--radius-050);
  }
}

@keyframes bell-ring {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(15deg);
  }

  75% {
    transform: rotate(-15deg);
  }

  100% {
    transform: rotate(0deg);
  }
}