body.dark-mode {
  background-color: #1f2d3d;
  color: #c2c7d0;
  --chat-avatar-placeholder-bg: #1a2330;
}

body.dark-mode .content-wrapper {
  background-color: #1f2d3d;
  color: #c2c7d0;
}

body.dark-mode .main-footer {
  background-color: #1f2d3d;
  border-top: 1px solid #3f474f;
  color: #c2c7d0;
}

body.dark-mode .main-header {
  border-bottom: 1px solid #3f474f;
}

body.dark-mode .main-sidebar .brand-link {
  border-bottom: 1px solid #3f474f;
}

body.dark-mode .main-logo-image-light {
  filter: brightness(100);
}

body.dark-mode .main-sidebar .brand-link.main-logo {
  --a: 210deg;
  background: linear-gradient(
    var(--a),
    #111927 20%,
    #1f2d3d 60%,
    #2b333e 100%
  );
  animation: dark-logo-gradient-oscillation 28s linear infinite;
}

@keyframes dark-logo-gradient-oscillation {
  0% {
    --a: 210deg;
  }
  50% {
    --a: 140deg;
  }
  100% {
    --a: 210deg;
  }
}

body.dark-mode .chat-group-header {
  color: #0d1620;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.dark-mode .card,
body.dark-mode .small-box,
body.dark-mode .info-box,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item {
  background-color: #2b333e;
  color: #d7dde5;
  border-color: #3f474f;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode .card-header,
body.dark-mode .card-footer {
  border-color: #3f474f;
}

body.dark-mode .bg-white,
body.dark-mode .card-footer.bg-white {
  background-color: #2b333e !important;
}

body.dark-mode .text-dark {
  color: #d7dde5 !important;
}

body.dark-mode .dropdown-divider {
  border-top-color: #3f474f;
}

body.dark-mode .dropdown-item {
  color: #d7dde5 !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: #3a4350;
  color: #ffffff !important;
}

body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode .input-group-text,
body.dark-mode .btn-default,
body.dark-mode .note-editor.note-frame {
  background-color: #343a40;
  color: #f1f3f5;
  border-color: #495057;
}

body.dark-mode .form-control::placeholder {
  color: #9aa4ad;
}

body.dark-mode .btn-secondary {
  background-color: #495057;
  border-color: #5c6670;
}

body.dark-mode .btn-link {
  color: #8ab4f8;
}

body.dark-mode .table,
body.dark-mode .table td,
body.dark-mode .table th {
  color: #d7dde5;
  border-color: #3f474f;
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: #303842;
}

body.dark-mode .pagination .page-link {
  background-color: #2b333e;
  border-color: #3f474f;
  color: #d7dde5;
}

body.dark-mode .pagination .page-item.active .page-link {
  background-color: #3f6791;
  border-color: #3f6791;
  color: #ffffff;
}

body.dark-mode .sidebar .nav-link {
  color: #c2c7d0;
}

body.dark-mode .sidebar .nav-link:hover {
  background-color: #3a4350;
  color: #ffffff;
}

body.dark-mode .sidebar .nav-link.active {
  background-color: #3f6791;
  color: #ffffff;
}

body.dark-mode .settings-window-container,
body.dark-mode .create-new-chat-container {
  background-color: #2b333e;
  color: #d7dde5;
  border: 1px solid #3f474f;
}

body.dark-mode .drop-down-list {
  background-color: #2b333e;
  border: 1px solid #3f474f;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

body.dark-mode .drop-down-button {
  background-color: #2b333e !important;
  border-color: #3f474f !important;
  color: #d7dde5 !important;
}

body.dark-mode .react-datetimerange-picker__wrapper,
body.dark-mode .harvested-datetimerange-picker-button {
  background-color: #343a40;
  border-color: #495057;
  color: #f1f3f5;
}

body.dark-mode .harvested-datetimerange-picker-button:hover {
  background-color: #3f474f;
}

body.dark-mode .react-calendar,
body.dark-mode .react-daterange-picker,
body.dark-mode .react-datetimerange-picker,
body.dark-mode .react-clock {
  background-color: #2b333e;
  color: #d7dde5;
}

body.dark-mode .react-calendar button {
  color: #d7dde5;
}

body.dark-mode .react-calendar__tile:enabled:hover,
body.dark-mode .react-calendar__tile:enabled:focus {
  background-color: #3a4350;
}

body.dark-mode .react-calendar__tile--active {
  background-color: #3f6791;
  color: #ffffff;
}

body.dark-mode .chat-list-container,
body.dark-mode .chat-layout,
body.dark-mode .header-chat-container,
body.dark-mode .input-chat-container,
body.dark-mode .chat-instance-container,
body.dark-mode .chat-instance-avatar-channel-badge-wrapper {
  background-color: #2b333e;
}

body.dark-mode .chat-list-wrapper {
  scrollbar-color: #465261 #202a35;
}

body.dark-mode .chat-list-wrapper::-webkit-scrollbar {
  width: 10px;
}

body.dark-mode .chat-list-wrapper::-webkit-scrollbar-track {
  background: #202a35;
}

body.dark-mode .chat-list-wrapper::-webkit-scrollbar-thumb {
  background-color: #465261;
  border-radius: 10px;
  border: 2px solid #202a35;
}

body.dark-mode .chat-list-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #5b6877;
}

body.dark-mode .messages-chat-container {
  scrollbar-color: #465261 #202a35;
}

body.dark-mode .messages-chat-container::-webkit-scrollbar {
  width: 10px;
}

body.dark-mode .messages-chat-container::-webkit-scrollbar-track {
  background: #202a35;
}

body.dark-mode .messages-chat-container::-webkit-scrollbar-thumb {
  background-color: #465261;
  border-radius: 10px;
  border: 2px solid #202a35;
}

body.dark-mode .messages-chat-container::-webkit-scrollbar-thumb:hover {
  background-color: #5b6877;
}

body.dark-mode .chat-list-header,
body.dark-mode .header-chat-container,
body.dark-mode .chat-instance-header,
body.dark-mode .create-new-chat-header {
  border-color: #3f474f;
}

body.dark-mode .chat-instance-container:hover,
body.dark-mode .highlighted {
  background-color: #3a4350;
}

body.dark-mode .chat-instance-name,
body.dark-mode .header-chat-name {
  color: #f1f3f5;
}

body.dark-mode .chat-instance-text,
body.dark-mode .chat-instance-timestamp,
body.dark-mode .header-chat-phone,
body.dark-mode .header-chat-amo-id {
  color: #b6bdc5;
}

body.dark-mode .message-bubble.left {
  background-color: #3a4350;
  color: #f1f3f5;
}

body.dark-mode .message-bubble.tail-left::before {
  border-color: transparent #3a4350 transparent transparent;
}

body.dark-mode .chat-instance-avatar {
  border-color: #3f474f;
}

body.dark-mode .client-null-avatar {
  background-color: var(--client-avatar-bg-dark) !important;
  color: var(--client-avatar-letter-dark) !important;
}

body.dark-mode .client-null-avatar-letter {
  color: inherit;
}

body.dark-mode .chats-group-helper,
body.dark-mode .chats-group-close-container,
body.dark-mode .button-upload-more {
  background-color: #3a4350;
  color: #d7dde5;
}

body.dark-mode .button-upload-more:hover {
  background-color: #465260;
}

body.dark-mode .search-component-input .form-control {
  background-color: #343a40;
}

body.dark-mode .chat-search-input {
  background-color: #1f2732;
  border-color: #314151;
  color: #e8edf3;
}

body.dark-mode .chat-search-input::placeholder {
  color: #94a3b3;
}

body.dark-mode .chat-search-icon,
body.dark-mode .chat-create-client-icon {
  fill: #8fa2b6;
  color: #8fa2b6;
}

body.dark-mode .search-component-button:hover .chat-search-icon,
body.dark-mode .search-component-create-new-client:hover .chat-create-client-icon {
  fill: #d8e2ec;
  color: #d8e2ec;
}

body.dark-mode .tooltip-container .tooltip {
  background-color: #1f2732 !important;
  border: 1px solid #314151 !important;
  color: #d9e2ec !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

body.dark-mode .slider-container {
  background-color: #151d26;
  border: 1px solid #2e3b4a;
  border-radius: 12px;
  padding: 8px;
}

body.dark-mode .slide.active-slide {
  background-color: #151d26;
  border-radius: 10px;
}

body.dark-mode .rc-slider-rail {
  background-color: #2b343f;
}

body.dark-mode .rc-slider-track {
  background-color: #3f6791;
}

body.dark-mode .rc-slider-handle {
  border: 2px solid #8cb5e3;
  background-color: #1f2d3d;
  box-shadow: none;
}

body.dark-mode .rc-slider-dot {
  background-color: #2b343f;
  border-color: #465261;
}

body.dark-mode .rc-slider-dot-active {
  border-color: #8cb5e3;
}

body.dark-mode .rc-slider-mark-text {
  color: #b9c6d3;
}

body.dark-mode .skeleton {
  background: #3a4350;
}

body.dark-mode .skeleton::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

body.dark-mode .login-page-bb-light {
  background: linear-gradient(140deg, #111927 0%, #1f2d3d 50%, #2b333e 100%);
}

body.dark-mode .login-box .card {
  background-color: #2b333e;
  color: #d7dde5;
}

body.dark-mode .login-box .login-box-msg {
  color: #f1f3f5;
}

body.dark-mode .login-box .input-group-text .fas {
  color: #b6bdc5 !important;
}

body.dark-mode .card-outline-bb-light {
  border-top-color: #3f6791 !important;
}

body.dark-mode .btn-blue {
  background-color: #3f6791 !important;
  border-color: #3f6791 !important;
}

body.dark-mode [style*="color: black"] {
  color: #d7dde5 !important;
}