@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

:root {
  --dark-blue: #0c145a;
  --light-blue: #00baff;
  --dark-grey: #7e8cac;
  --light-grey: #e7eaf5;
  --background: #fbfcfd;
  --purple: #4d17e2;
  --green: #1abc9c;
  --yellow: #febd57;
  --red: #fe5761;
  --white: #ffffff;
}

* {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0 !important;
}

.color-primary {
  color: var(--dark-blue);
}

.color-secondary {
  color: var(--dark-grey);
}

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

.fs-12 {
  font-size: 12px;
}

.sidebar {
  position: fixed;
  min-width: 280px;
  transition: transform 0.5s ease;
}

.sidebar.active {
  transform: translateX(-100%);
}

.menus {
  margin-left: 30px;
}

.item-menu {
  gap: 16px;
  display: flex;
  position: relative;
  text-decoration: none;
  color: var(--dark-grey);
}

svg {
  width: 24px;
  height: 24px;
  fill: none;
}

svg > path {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.item-menu:hover p,
.item-menu.active p {
  color: var(--dark-blue);
  font-weight: 500;
}

.item-menu:hover svg,
.item-menu.active svg {
  color: var(--purple);
}

.item-menu.active::after {
  content: '';
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  position: absolute;
  border-radius: 4px;
  background-color: var(--light-blue);
}

.content {
  gap: 30px;
  padding: 50px;
  min-height: 100vh;
  margin-left: 280px;
  transition: all 0.5s ease;
  background-color: var(--background);
}

.content.active {
  margin-left: 0px;
}

.btn-pill {
  font-size: 14px;
  font-weight: 400;
  padding: 10px 40px;
  text-align: center;
  text-decoration: none;
  color: var(--dark-blue);
  background-color: var(--light-grey);
}

.btn-pill.active,
.btn-pill:hover {
  color: var(--white);
  background-color: var(--dark-blue);
}

.table-card {
  padding: 20px;
  border-radius: 16px;
  background-color: var(--white);
}

.status {
  font-size: 8px;
}

.status.success {
  color: var(--green);
}

.status.pending {
  color: var(--yellow);
}

.status.failed {
  color: var(--red);
}

@media screen and (max-width: 767.98px) {
  .content {
    margin-left: 0;
    padding: 20px;
  }

  .game-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100px;
  }
}