* {
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  user-select: none;
  text-decoration: none;
}

: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: #11111150;
  --color-950: #111111;

  /* others colors*/
  --color-accent: rebeccapurple;

  --bg-rgba-950: rgba(15, 20, 26);
  --bg-rgba-950-1: rgba(15, 20, 26, 0.2);
  
  --font-size-050: 8pt;
  --font-size-075: 9pt;
  --font-size-100: 11pt;
  --font-size-200: 12.5pt;
  --font-size-300: 15.6pt;
  --font-size-400: 19.5pt;
  --font-size-500: 24.4pt;
  --font-size-600: 30.5pt;
  --font-size-700: 38.1pt;
  
  --size-icon: 14pt;

  --stroke-width: 1pt;

  --height-header: 5rem;

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

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

  --espace: calc(.9rem + .9vw);
}

.is_language {
  display: none;
}

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

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

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

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

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

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

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

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

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

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

.g_title {
  font-family: "bold";
  font-size: var(--font-size-200);
}

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

.btn {
  border-radius: var(--radius-400);
  background: var(--color-950);
  border: 1px solid var(--color-950);
  color: var(--color-000);
  width: max-content;
  height: 30pt;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.btn .theLoader {
  border: 8px solid var(--color-000);
}

.none {
  all: unset;
  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;
}

.animated_background {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background-color: #f6f7f8;
  background: linear-gradient(to right, #f5f7fa 8%, #eaeef4 18%, #f5f7fa 33%);
  background-size: 800px 104px;
  position: relative;
}

/***** loader *****/
.theLoader {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--color-950);
  animation: l20-1 0.8s infinite linear alternate;
}

@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:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}