.filter_controls_body {
  display: flex;
  flex-direction: row;
  align-content: stretch;
  margin-left: -10px;
}

.main-body,
.main-dashboard {
  background-color: #fff !important;
}

.dashboard {
  width: 100%;
  max-width: 1300px;
}

.form-container {
  border-radius: 5px;
  margin-top: 20px;
}

.transactions-summary {
  background: linear-gradient(to right, #fe8fc7, #ae7cf2, #5073df);
}

.card {
  border: 0px;
  box-shadow: 0 15px 20px 0 #a0a0a0;
  width: 100%;
  border-radius: 10px;
}

.page-dashboard .card .card-body {
  border-top-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

.email-subject {
  max-width: 350px;
  /* Set a maximum width for the cell */
  white-space: nowrap;
  /* Prevent text from wrapping */
  overflow: hidden;
  /* Hide overflow text */
  text-overflow: ellipsis;
  /* Add ellipsis (...) for overflowed text */
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #ececec;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #fff;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #fff;
}

/* Style the tab content */
.tabcontent {
  display: none;
  /* padding: 6px 12px; */
  /* border: 1px solid #ccc; */
  border-top: none;
}

.tabcontent {
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* tăng-height-chart */
.apexcharts-bar-area {
  stroke-width: 2px !important;
  /* stroke: #0ac6ff !important;
fill: #0ac6ff !important; */
  stroke: #dee2e6 !important;
  fill: #dee2e6 !important;
  transition: all 0.3s ease-in-out;
  line-height: 1rem;
}

.apexcharts-bar-area:hover {
  /* fill: #0ac6ff !important; */
  fill: rgb(138, 138, 138) !important;
  stroke-width: 3px !important;
}

.apexcharts-datalabel {
  fill: #000 !important;
}

.apexcharts-series {
  opacity: 0.9;
}

.apexcharts-series:hover {
  opacity: 1;
}

.fe-more-vertical {
  display: none !important;
}

/* chart-revenue */

@media (min-width: 1200px) and (max-width: 1224px) {
  .page-dashboard .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50% !important;
  }
}

@media (min-width: 1225px) and (max-width: 1328px) {
  .card-body .db-content {
    font-size: 12px !important;
  }

  .card-body .db-content ul li {
    font-size: 14px !important;
  }

  .db-content h6 {
    font-size: 14px !important;
  }

  .card-body .icon-dash {
    font-size: 35px !important;
  }
}

@media (min-width: 1329px) and (max-width: 1344px) {
  .db-content h6 {
    font-size: 15px !important;
  }

  .card-body .icon-dash {
    font-size: 40px !important;
  }
}

@media (min-width: 1345px) and (max-width: 1358px) {
  .card-body .icon-dash {
    font-size: 35px !important;
  }
}

@media (min-width: 1463px) and (max-width: 1539px) {
  .card-body .db-content {
    font-size: 12px !important;
  }

  .card-body .db-content ul li {
    font-size: 14px !important;
  }

  .db-content h6 {
    font-size: 14px !important;
  }
}

@media (min-width: 1653px) and (max-width: 1727px) {
  .card-body .db-content ul li {
    font-size: 14px !important;
  }
}

.dropdown-item:hover {
  text-decoration: none !important;
}

.custom-index .apexcharts-bar-area0 {
  stroke-width: 2px !important;
  stroke: #007fff !important;
  fill: var(--ttr-color) !important;
  transition: all 0.3s ease-in-out;
  line-height: 1rem;
  border-top: 0px !important;
}

.custom-index .apexcharts-bar-area1 {
  stroke-width: 1px !important;
  stroke: #ff0000 !important;
  fill: #ff0000 !important;
  transition: all 0.3s ease-in-out;
  line-height: 1rem;
  margin-left: 2px !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #000 !important;
  content: "/";
}

.main-header-dropdown {
  position: absolute;
  inset: 0px 0px auto auto;
  margin: 0px;
  transform: translate(-113px, 65px);
  width: 200px;
  background-color: #101a33 !important;
}

.dropdown-menu-arrow:after {
  content: "";
  position: absolute;
  top: -8.5px;
  inset-inline-end: 24px;
  border-bottom: 9px solid #101a33 !important;
  border-inline-start: 9px solid transparent;
  border-inline-end: 9px solid transparent;
}

.bg-profile {
  background: #101a33 !important;
  border-bottom: 1px dotted rgb(39, 60, 112) !important;
}

.dropdown-item:hover {
  background-color: #93bbff57 !important;
}

.pulse-badge {
  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6);
  }

  50% {
    transform: scale(1.3);
    /* opacity: 0.7; */
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

.need-help-menu .slide-menu {
  display: block !important;
}

/* .side-menu.collapsed .need-help-menu .side-menu__label {
  display: none;
} */

.side-menu.collapsed .need-help-menu .slide-menu {
  display: none !important;
}

.app-sidebar .slide-menu a:before {
  content: "" !important;
  display: none !important;
}

.side-menu .slide-item:hover {
  color: var(--ttr-color) !important;
}

.side-menu .slide-item.active {
  color: var(--ttr-color) !important;
}

.side-menu .slide-menu a.active:before {
  color: var(--ttr-color) !important;
  display: none !important;
}

.app.sidenav-toggled .app-sidebar {
  min-height: 100vh !important;
}

.app-sidebar {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
  min-height: 100vh !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
}

/* Remove any borders or pseudo-elements that might create vertical lines */
.app-sidebar *,
.app-sidebar *:before,
.app-sidebar *:after {
  border-right: none !important;
  border-left: none !important;
}

.footer-link {
  color: var(--ttr-color) !important;
  text-decoration: none;
  font-size: 14px;
}

.footer-link:hover {
  color: #101a33 !important;
  text-decoration: none;
}
.main-sidebar-header {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    border-bottom: 1px solid rgb(22, 36, 70) !important;
}

/* Ensure all header elements in sidebar have same background */
.app-sidebar .main-sidebar-header {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
}

.app-sidebar .sidebar-header,
.app-sidebar .header,
.app-sidebar .sidebar-logo-header {
    background: transparent !important;
}

.bg-ttr {
  background-color: #08a1f9 !important;
}

.border-btn {
  border-radius: 5px !important;
}

.btn-ttr {
  background-color: #08a1f9 !important;
  color: #fff !important;
}

.btn-ttr:hover {
  background-color: #37b6ff !important;
  color: #fff !important;
}

.btn-secondary {
  background-color: #8693aa !important;
  color: #fff !important;
  border: 2px solid #8693aa !important;
}