@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/assets/font/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* styles.css */
:root {
  --bg-color: #fff;
  --empty-bg-color: #f2f2f2;
  --empty-bg-color-2: #fbfbfb;
  --text-color: #111827;
  --text-color-2: #687588;
  --primary-color: #2664EB;
  --primary-bold: #2664eb;
  --primary-light: #f8faff;
  --border-color: #e0e4eb;
  --black-color: #000;
  --success-color: #3D9456;
  --error-color: #FA2B37;
}

.dark-theme {
  --bg-color: #121212; /* Dark background */
  --empty-bg-color: #1e1e1e; /* Slightly lighter for empty containers */
  --empty-bg-color-2: #1e1e1e; /* Same as above for consistency */
  --text-color: #e0e0e0; /* Light text for readability */
  --text-color-2: #a0a0a0; /* Muted light text */
  --primary-color: #0d6efd; /* Retaining primary accent color */
  --primary-bold: #2664eb; /* Retaining primary bold */
  --primary-light: #28303e; /* A darker variant of the primary light */
  --border-color: #333333;
  --black-color: #ffffff;
}

body {
  font-family: 'Satoshi', sans-serif;
  padding-bottom: env(safe-area-inset-bottom) !important;
  color: var(--text-color);
}

.disabled {
  cursor: not-allowed;
  color: gray;
}

.divider {
  height: 1px;
  background: var(--border-color);
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700display=swap');
*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--empty-bg-color);
}

a {
  text-decoration: none;
}

.accordion-button {
  border: 1px solid rgba(0, 0, 0, 0.125) !important;
  color: var(--text-color) !important;
  box-shadow: unset !important;
  background-color: unset !important;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2664eb;
}

.notification-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.notification-description {
  font-weight: 400;
  color: var(--text-color-2);
  font-size: 13px;
}

.scale {
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.scale:hover {
  transform: scale(1.1);
}
.scale:active {
  transform: scale(0.95);
}

.profile-icon-container {
  position: relative;
  &.online {
    &::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: #34c759;
      border-radius: 100px;
      right: 2px;
      bottom: 2px;
      box-shadow: 0 0 0 2px var(--bg-color);
      z-index: 1;
    }
  }
  &.one {
    .profile-icon {
      background-color: #c795a0;
    }
  }
  &.two {
    .profile-icon {
      background-color: #404e69;
    }
  }
  &.three {
    .profile-icon {
      background-color: #5c5470;
    }
  }
  &.four {
    .profile-icon {
      background-color: #6b4226;
    }
  }
  &.five {
    .profile-icon {
      background-color: #556872;
    }
  }
  &.six {
    .profile-icon {
      background-color: #3d3a4b;
    }
  }
  &.seven {
    .profile-icon {
      background-color: #b08bbb;
    }
  }
  &.eight {
    .profile-icon {
      background-color: #7a6c5d;
    }
  }
  &.nine {
    .profile-icon {
      background-color: #6d6875;
    }
  }
  &.ten {
    .profile-icon {
      background-color: #4c5b5c;
    }
  }
}

@media (max-width: 576px) {
  input[type='checkbox'] {
    width: 12px;
    height: 12px;
  }

  .notification-title {
    font-size: 12px;
  }

  .notification-description {
    font-size: 9px;
  }
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar-menu {
  z-index: 60001;
}

.info-item-title {
  color: var(--text-color-2);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  .info-item-title-icon {
    svg path {
      stroke: var(--text-color-2);
    }
  }
}
.info-item-data {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.info-item-text {
  color: var(--text-color-2);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

hr {
  border: none;
  height: 1px;
  background-color: var(--border-color);
  margin: 0;
  opacity: 1;
}

svg.stroke path {
  fill: transparent;
}

.dropdown-notification .dropdown-menu ,
.user-container .dropdown-menu {
  background-color: var(--bg-color);
}