@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 400;
  src: url("/public/LeagueSpartan.ttf") format("truetype");
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400;
  src: url("/public/Lexend.ttf") format("truetype");
}
:root {
  --nuitininterrompu: #19191B;
  --nuitininterrompu-darker10: rgb(22.5, 22.5, 24.3);
  --nuitininterrompu-darker20: rgb(20, 20, 21.6);
  --nuitininterrompu-darker30: rgb(17.5, 17.5, 18.9);
  --nuitininterrompu-darker40: rgb(15, 15, 16.2);
  --nuitininterrompu-darker50: rgb(12.5, 12.5, 13.5);
  --nuitininterrompu-lighter10: rgb(47.0192307692, 47.0192307692, 50.7807692308);
  --nuitininterrompu-lighter20: rgb(69.0384615385, 69.0384615385, 74.5615384615);
  --nuitininterrompu-lighter30: rgb(91.0576923077, 91.0576923077, 98.3423076923);
  --nuitininterrompu-lighter40: rgb(113.0769230769, 113.0769230769, 122.1230769231);
  --nuitininterrompu-lighter50: rgb(136.0961538462, 136.0961538462, 144.9038461538);
  --nuitininterrompu-shade1: #393A41;
  --nuitininterrompu-shade1-darker10: rgb(51.3, 52.2, 58.5);
  --nuitininterrompu-shade1-darker20: rgb(45.6, 46.4, 52);
  --nuitininterrompu-shade1-darker30: rgb(39.9, 40.6, 45.5);
  --nuitininterrompu-shade1-darker40: rgb(34.2, 34.8, 39);
  --nuitininterrompu-shade1-darker50: rgb(28.5, 29, 32.5);
  --nuitininterrompu-shade1-lighter10: rgb(75.1278688525, 76.4459016393, 85.6721311475);
  --nuitininterrompu-shade1-lighter20: rgb(93.2557377049, 94.8918032787, 106.3442622951);
  --nuitininterrompu-shade1-lighter30: rgb(111.3836065574, 113.337704918, 127.0163934426);
  --nuitininterrompu-shade1-lighter40: rgb(130.9672131148, 132.8754098361, 146.2327868852);
  --nuitininterrompu-shade1-lighter50: rgb(151.6393442623, 153.2295081967, 164.3606557377);
  --rougevivant: #DB3333;
  --rougevivant-darker10: rgb(206.55, 36.45, 36.45);
  --rougevivant-darker20: rgb(183.6, 32.4, 32.4);
  --rougevivant-darker30: rgb(160.65, 28.35, 28.35);
  --rougevivant-darker40: rgb(137.7, 24.3, 24.3);
  --rougevivant-darker50: rgb(114.75, 20.25, 20.25);
  --rougevivant-lighter10: rgb(222.6, 71.4, 71.4);
  --rougevivant-lighter20: rgb(226.2, 91.8, 91.8);
  --rougevivant-lighter30: rgb(229.8, 112.2, 112.2);
  --rougevivant-lighter40: rgb(233.4, 132.6, 132.6);
  --rougevivant-lighter50: #ed9999;
  --orangefruite: #F4A22F;
  --orangefruite-darker10: rgb(242.5383561644, 149.6424657534, 19.3616438356);
  --orangefruite-darker20: rgb(221.1068493151, 133.9397260274, 11.6931506849);
  --orangefruite-darker30: rgb(193.4684931507, 117.197260274, 10.2315068493);
  --orangefruite-darker40: rgb(165.8301369863, 100.4547945205, 8.7698630137);
  --orangefruite-darker50: rgb(138.1917808219, 83.7123287671, 7.3082191781);
  --orangefruite-lighter10: rgb(245.1, 171.3, 67.8);
  --orangefruite-lighter20: rgb(246.2, 180.6, 88.6);
  --orangefruite-lighter30: rgb(247.3, 189.9, 109.4);
  --orangefruite-lighter40: rgb(248.4, 199.2, 130.2);
  --orangefruite-lighter50: rgb(249.5, 208.5, 151);
  --eucaliptusmalade: #84C445;
  --eucaliptusmalade-darker10: rgb(118.7632653061, 181.0653061224, 57.4346938776);
  --eucaliptusmalade-darker20: rgb(105.5673469388, 160.9469387755, 51.0530612245);
  --eucaliptusmalade-darker30: rgb(92.3714285714, 140.8285714286, 44.6714285714);
  --eucaliptusmalade-darker40: rgb(79.1755102041, 120.7102040816, 38.2897959184);
  --eucaliptusmalade-darker50: rgb(65.9795918367, 100.5918367347, 31.9081632653);
  --eucaliptusmalade-lighter10: rgb(144.3, 201.9, 87.6);
  --eucaliptusmalade-lighter20: rgb(156.6, 207.8, 106.2);
  --eucaliptusmalade-lighter30: rgb(168.9, 213.7, 124.8);
  --eucaliptusmalade-lighter40: rgb(181.2, 219.6, 143.4);
  --eucaliptusmalade-lighter50: rgb(193.5, 225.5, 162);
  --neigeglaciale: #ffffff;
  --neigeglaciale-darker10: rgb(229.5, 229.5, 229.5);
  --neigeglaciale-darker20: #cccccc;
  --neigeglaciale-darker30: rgb(178.5, 178.5, 178.5);
  --neigeglaciale-darker40: #999999;
  --neigeglaciale-darker50: rgb(127.5, 127.5, 127.5);
  --neigeglaciale-lighter10: white;
  --neigeglaciale-lighter20: white;
  --neigeglaciale-lighter30: white;
  --neigeglaciale-lighter40: white;
  --neigeglaciale-lighter50: white;
  --neigeglaciale-shade1: #F2F2F2;
  --neigeglaciale-shade1-darker10: rgb(217.8, 217.8, 217.8);
  --neigeglaciale-shade1-darker20: rgb(193.6, 193.6, 193.6);
  --neigeglaciale-shade1-darker30: rgb(169.4, 169.4, 169.4);
  --neigeglaciale-shade1-darker40: rgb(145.2, 145.2, 145.2);
  --neigeglaciale-shade1-darker50: #797979;
  --neigeglaciale-shade1-lighter10: rgb(243.3, 243.3, 243.3);
  --neigeglaciale-shade1-lighter20: rgb(244.6, 244.6, 244.6);
  --neigeglaciale-shade1-lighter30: rgb(245.9, 245.9, 245.9);
  --neigeglaciale-shade1-lighter40: rgb(247.2, 247.2, 247.2);
  --neigeglaciale-shade1-lighter50: rgb(248.5, 248.5, 248.5);
  --neigeglaciale-shade2: #d9d9d9;
  --neigeglaciale-shade2-darker10: rgb(195.3, 195.3, 195.3);
  --neigeglaciale-shade2-darker20: rgb(173.6, 173.6, 173.6);
  --neigeglaciale-shade2-darker30: rgb(151.9, 151.9, 151.9);
  --neigeglaciale-shade2-darker40: rgb(130.2, 130.2, 130.2);
  --neigeglaciale-shade2-darker50: rgb(108.5, 108.5, 108.5);
  --neigeglaciale-shade2-lighter10: rgb(220.8, 220.8, 220.8);
  --neigeglaciale-shade2-lighter20: rgb(224.6, 224.6, 224.6);
  --neigeglaciale-shade2-lighter30: rgb(228.4, 228.4, 228.4);
  --neigeglaciale-shade2-lighter40: rgb(232.2, 232.2, 232.2);
  --neigeglaciale-shade2-lighter50: #ececec;
}

:root {
  --discord-color: #5865F2;
}

.text-nuitininterrompu {
  color: #19191B;
}

.text-nuitininterrompu-shade1 {
  color: #393A41;
}

.text-rougevivant {
  color: #DB3333;
}

.text-orangefruite {
  color: #F4A22F;
}

.text-eucaliptusmalade {
  color: #84C445;
}

.text-neigeglaciale {
  color: #ffffff;
}

.text-neigeglaciale-shade1 {
  color: #F2F2F2;
}

.text-neigeglaciale-shade2 {
  color: #d9d9d9;
}

.bold {
  font-weight: 600;
}

.tw-500 {
  font-weight: 500;
}

.tw-600 {
  font-weight: 600;
}

.mt-button {
  margin-top: 5px;
}

pre {
  color: #19191B;
}

.badge {
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #DB3333;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--neigeglaciale);
  margin: 5px;
}

.badge-success {
  background-color: #84C445;
}

button {
  border: none;
  border-radius: 5px;
  width: 100%;
  max-height: 50px;
  height: 50px;
  font-family: "League Spartan", sans-serif;
  font-size: medium;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  gap: 5px;
  padding: 10px;
  background-color: #19191B;
  color: #ffffff;
}

.btn-discord {
  background-color: #5865F2;
  color: white;
}

.btn-danger {
  background-color: #DB3333;
  color: white;
}

.btn-light .btn-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.field {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid #19191B;
  border-radius: 5px;
}

.field-error {
  border: #DB3333 2px solid !important;
}

.field-error .input-container .field-icon {
  color: #DB3333 !important;
  fill: #DB3333 !important;
}

.field-error .input-container input::placeholder {
  color: #DB3333 !important;
}

.field-error .input-container input {
  color: #DB3333 !important;
}

.field-error .label {
  color: #DB3333 !important;
}

.label {
  width: 100%;
  font-family: "League Spartan", sans-serif;
  font-size: medium;
  color: #ffffff;
  margin-bottom: 5px;
}

.input-container {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) scale(1.3);
  z-index: 1;
  pointer-events: none;
}

.field-input {
  font-size: 120%;
  font-weight: 550;
}

input[type=text],
input[type=password] {
  width: 100%;
  height: 60px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #19191B;
  background-color: #19191B;
  color: #ffffff;
  font-family: "League Spartan", sans-serif;
  font-size: medium;
  outline: none;
}

input.has-icon {
  padding-left: 40px;
}

input::placeholder {
  color: #19191B;
}

.table {
  width: 100%;
  display: table;
  margin: 0;
}

.row {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.row.header {
  color: #ffffff;
  background: #84C445;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.cell {
  display: table-cell;
}

.row .cell {
  font-size: 15px;
  color: #19191B;
  line-height: 1.2;
  font-weight: unset !important;
  padding: 10px;
}

.row.header .cell {
  font-size: 18px;
  color: #ffffff;
  line-height: 1.2;
  font-weight: unset !important;
  height: 60px;
  display: flex;
  align-items: center;
}

.row .cell {
  width: 100%;
}

.row:not(.header):nth-child(odd) {
  background-color: #F2F2F2;
}

.table, .row {
  width: 100% !important;
}

.row:not(.header):hover {
  background-color: #d9d9d9;
  cursor: pointer;
}

p, h1, h2, h3, h4, h5, h6, span, li {
  color: #19191B;
  vertical-align: center;
  padding: 0;
  font-family: "League Spartan", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  font-family: "League Spartan", sans-serif;
  background-color: #19191B;
  color: #ffffff;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
}

main {
  width: var(--main-frame-width, 25%);
  height: var(--main-frame-height, fit-content);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 100px 50px 100px 50px;
  box-shadow: 5px 5px 10px rgba(88, 88, 88, 0.25);
}

#app {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}