.header-custom {
  background-color: #333333;
}

.search-button-custom {
  color: #c41c1c;
  border-color: #c41c1c;
  background-color: transparent;
}
.search-button-custom:hover {
  color: #fff;
  border-color: #c41c1c;
  background-color: #c41c1c;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

main {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.flex-fill {
  flex: 1;
}

nav.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 10px 0;
}
footer a {
  color: #fff;
  text-decoration: underline;
}
footer a:hover {
  color: #ccc;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
}

.content-container {
  flex: 1;
  overflow-y: auto;
  margin-top: 56px;
  margin-bottom: 40px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
}

.bodyParts {
  border-color: black;
  fill: #0056b3;
  cursor: pointer;
}

area.bodyParts {
  fill: black;
  stroke: gray;
  stroke-width: 4;
  cursor: pointer;
}
area.bodyParts:hover {
  stroke: black;
}

.chart-container {
  position: relative;
  height: 400px;
  width: 100%;
  margin-bottom: 20px;
}

canvas#category-chart,
canvas#product-chart {
  max-width: 100%;
  height: auto !important;
}

.tooltip {
  background-color: rgba(51, 51, 51, 0.9) !important;
  color: white !important;
  border-radius: 5px !important;
  padding: 10px !important;
  font-weight: bold !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 768px) {
  .chart-container {
    height: 300px;
  }
}
@media (max-width: 576px) {
  .chart-container {
    height: 250px;
  }
}