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

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

:root {
  /* ==========COLORS ======= */
  --body-color: #e4e9f7;
  --sidebar-color: #fff;
  --primary-color: #125f82;
  --primary-color-light: #f6f5ff;
  --toggle-color: #dddd;
  --text-color: #707070;
  --table-color: #fff;

  --main-font-color: #212529;

  /* ========== TRANSITION ======= */
  --tran-02: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.4s ease;
  --tran-05: all 0.5s ease;
}

body.dark {
  --main-font-color: #fff;
  --body-color: #18191a;
  --sidebar-color: #242526;
  --primary-color: #3a3b3c;
  --primary-color-light: hsl(180, 0%, 57%);
  --toggle-color: #fff;
  --text-color: #ccc;
  --table-color: #3a3b3c;
}

.isidebar a,
li {
  color: var(--main-font-color);
}

.logo-midlle {
  width: 120px;
  align-items: center;
  margin-bottom: 10px;
}

.top-middle {
  position: fixed;
  margin-top: 50px;
  background: var(--body-color);
  margin-bottom: 10px;

  span {
    margin-left: auto;
    padding-right: 20px;
  }
}

.accordion-button{
  position: static;
}