*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --border-style: 1px solid #c1c1c1;
  --sir-bg: hsl(0, 0%, 94%);;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header, Main Content, Footer */
  min-height: 100vh;
  margin: 0;
  background-color: var(--sir-bg);
}


header{
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999;
 margin: 0;
} 

.main-content {
  overflow: auto;
}


footer{
  position: sticky;
  bottom: 0;
  width: 100%;
  /* color: hsl(0, 0%, 100%);
  background-color: hsl(210, 9%, 22%);  */
  text-align: center;
}  


.chart-btn {
  width: 150px;
}

.btn-custom-purple {
  background-color: rgb(112, 48, 160);
  border-color: rgb(112, 48, 160);
  color: #fff;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-custom-purple:hover {
  background-color: rgb(96, 40, 145); /* Slightly darker purple */
  border-color: rgb(96, 40, 145);
  color: #fff;
}

.btn-custom-purple:disabled {
  background-color: rgb(112, 48, 160);
  border-color: rgb(112, 48, 160);
  color: #fff;
  opacity: 0.65;
  cursor: not-allowed;
}