@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  --white: #ffffff;
  --black: #171717;

  --bg-light: #edf0f7;
  --bg-light-100: #f5f5f5;

  --text-dark: #363636;

  --warning: #ff5733;
  --warning-light: #fff0f1;
  --success: #31ac54;
  --success-light: #eefff3;
  --info-yellow: #f0c117;
  --info-yellow-light: #fff8e1;
  --disabled: #b9b9b9;

  --primary-10: #eaf0ff;
  --primary-20: #d3ddfd;
  --primary-30: #b0c2fb;
  --primary-40: #8aa1f8;
  --primary-50: #6b83f5;
  --primary-60: #5566f0;
  --primary-70: #4a45ec;
  --primary-80: #4526e9;
  --primary-90: #3f16e6;
  --primary-100: #3807e3;
  --primary-100-hover: #2d00d1;
  --primary-200: #5261e3;
  --primary-200-hover: #6975e4bf;
  --primary-300: #07a8e3;
  --primary-400: #2900b8;
  --primary-500: #000f8f;

  --secondary-10: #f6ecfd;
  --secondary-20: #ecd9fb;
  --secondary-20-hover: #e0c4f9;
  --secondary-30: #ddb8f7;
  --secondary-40: #cd93f3;
  --secondary-50: #bd6ef0;
  --secondary-60: #ad4bed;
  --secondary-70: #9f2ce9;
  --secondary-80: #941ae7;
  --secondary-90: #8908e6;
  --secondary-100: #7e00e5;
  --secondary-200: #7a68f5;
  --secondary-300: #8878f2;
  --secondary-400: #4b4dbd;
  --secondary-500: #4345b8;
  --secondary-600: #8378d2;

  --grey-100: #e8e8e8;
  --grey-200: #dadada;
  --grey-500: #a0a0a0;
  --grey-600: #767676;

  --border-radius-4: 4px;
  --border-radius-8: 8px;
  --border-radius-12: 12px;

  --input-focus: #4248ff;
  --input-padding: 10px 16px;
  --input-height: 44px;

  --border-box: #efefef;

  --border-table: #d5d5d5;
  --hover-table: #f4f3ff;

  --font-family: "Poppins", sans-serif;

  --box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
}

html,
body {
  overflow-x: hidden;
}

body {
  color: var(--black);
  background: var(--bg-light);
  font-family: var(--font-family);
  font-size: 16px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

/*LIST*/
ul {
  list-style: none;
  padding: 0;
}

/*TABLE*/
table {
  border-collapse: collapse;
  width: 100%;
}

/*TITLES*/
h1 {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/*PICTURE*/
picture {
  line-height: 0;
}

/*SCROLLBAR*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light-100);
  border-radius: var(--border-radius-4);
}

::-webkit-scrollbar-thumb {
  background-color: var(--disabled);
  border-radius: var(--border-radius-4);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}