:root,
[data-bs-theme="light"] {
  --background-color: #fafafa;
  --text-color: hsla(0, 0%, 0%, 0.8);
  --primary-color: #6200ee;
  --border-color: #222c3a;
  --border-color-hover: rgb(79 148 255);
  --toggle-bg: #fafafa;
  --toggle-hover-bg: #2f466a;
  --toggle-handle-color: #020617;
  --link-color: #00344f;
  --drop-shadow: 0px 0px 20px #00344f;
  --radial-gradient: radial-gradient(24.56% 150px at 50% 0%,
      rgb(58, 113, 225) 0%,
      rgba(252, 252, 252, 0) 100%);
}

[data-bs-theme="dark"] {
  --background-color: #020617;
  --text-color: 255, 255, 255;
  --primary-color: #bb86fc;
  --border-color: #222c3a;
  --border-color-hover: rgb(79 148 255);
  --toggle-bg: #fafafa;
  --toggle-hover-bg: #2f466a;
  --toggle-handle-color: #020617;
  --link-color: #00344f;
  --drop-shadow: 0px 0px 20px #00344f;
  --radial-gradient: radial-gradient(24.56% 150px at 50% 0%,
      rgb(8, 30, 75) 0%,
      rgba(2, 6, 23, 0) 100%);

  --bs-tertiary-bg-rgb: 39, 42, 73;
  --bs-border-color: #4950574f;
  --bs-body-bg: #020617;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: rgb(var(--bs-tertiary-bg-rgb));
  color: var(--text-color);
}

.header {
  padding-left: 1rem;
}

.sidebar {
  width: 200px;
  transform: translate(-100%);
}

.main {
  background-color: var(--bs-body-bg);
}

.menu-open .header {
  padding-left: 0;
}

.menu-open .main {
  margin-left: 0;
}

.menu-open .sidebar {
  transform: translate(0);
  z-index: 10;
}

.menu-open .blur {
  display: block;
}

.menu-hide .sidebar {
  transform: translate(-100%);
}

.menu-hide .header {
  padding-left: 1rem;
}

.menu-hide .main {
  margin-left: 0;
}

@media screen and (min-width: 768px) {
  .header {
    padding-left: 220px;
  }

  .sidebar {
    transform: translate(0);
  }

  .main {
    margin-left: 200px;
    border-top-left-radius: 1rem;
  }

  .menu-open .header {
    padding-left: 220px;
  }
  
  .menu-open .main {
    margin-left: 200px;
  }

  .menu-hide .main{
    border-top-left-radius: 0;
  }

  .menu-open .blur {
    display: none;
  }
}



.blur {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100%;
  height: 100%;
  background-color: #0003;
  z-index: 9;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.blur .close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: var(primary-color);
  border-radius: 50%;
  background-color: white;
}



/* sign in */
.form-signin {
  max-width: 440px;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.eye-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.input-group {
  position: relative;
}

/* theme switcher */

.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}

.btn-outline-bd-primary {
  --bs-btn-color: #712cf9;
  --bs-btn-border-color: #712cf9;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #712cf9;
  --bs-btn-hover-border-color: #712cf9;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #712cf9;
  --bs-btn-active-border-color: #712cf9;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #712cf9;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #712cf9;
  --bs-gradient: none;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

.menu-item {
  text-decoration: none;
  color: rgba(var(--text-color), 0.5);
}

.menu-item.active {
  background-color: color-mix(in srgb, var(--toggle-bg) 10%, var(--bs-primary));
}

.fs-xs {
  font-size: 0.75rem !important;
}

.f-red {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  filter: brightness(1) invert(1) sepia(0.8) hue-rotate(-30deg) saturate(20);
  position: relative;
}

.f-blue {
  filter: brightness(1) invert(1) sepia(1) hue-rotate(180deg) saturate(5);
}

.f-pink {
  filter: brightness(1) invert(1) sepia(1) hue-rotate(240deg) saturate(5);
}