#refresh-button {
  background-color: rgba(0, 0, 139, 0.6);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

#refresh-button:hover {
  background-color: darkcyan;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background-color: rgb(70, 69, 69);
  background-size: cover;
  margin: 0; /* Remove default margin to eliminate any gaps */
}

header {
  text-align: center;
  background-color: #ebebeb;
  color: rgba(0, 0, 139, 0.716);
  padding: 20px;
  margin-bottom: 20px;
}

header h1 {
  margin: 0;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-bottom: 10px;
}

.table-container {
  text-align: center;
  /* background-color: #fff; */
  padding: 30px;
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
}

footer {
  margin-top: 20px;
  background-color: #5a5656;
  color: #fff;
  text-align: center;
  padding: 10px;
}

table {
  width: 100%;
  font-size: 16px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  display: none; /* Hide the header cells */
}

td {
  border: 2px solid #000;
  padding: 8px;
  text-align: center;
  color: #000;
  width: 20%; /* Equal width for all cells */
}

tr:nth-child(even) {
  background-color: rgba(184, 183, 183, 0.715);
}

/* Style for table container */
.table-container {
  overflow: auto; /* Fix for the button not showing */
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
  border-radius: 5px;
  padding: 10px;
  position: relative; /* Position relative for button placement */
}

/* Style for the first column (reduce width) */
tr:first-child {
  background-color: #f0f0f0;
  max-width: 10px; /* Adjust the max-width as needed */
  white-space: nowrap; /* Prevent text from wrapping */
  text-align: center;
}

/* Style for the button container */
.button-container {
  position: absolute;
  overflow: auto; /* Fix for the button not showing */
  top: auto; /* Adjust the position as needed */
  left: 50%;
  transform: translateX(-50%);
}

header h1::after {
  content: "";
  position: absolute;
  width: 99%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    grey 10px,
    darkblue 30px
  );
  transform: scaleY(2);
  transition: background-color 0.3s ease;
}

header h1:hover::after {
  background-color: #ebebeb;
}

/* Style for the "Time Now" and "TIMINGS" divs */
.time-container {
  display: flex;
  justify-content: center; /* Space between the two divs */
  width: fit-content; /* Adjust the width as needed */
  height: fit-content;
  margin: auto; /* Center the container horizontally */
  padding: 10px; /* Add padding to both divs */
}

/* Style for the "Time Now" div */
#liveTime {
  padding: 10px;
  width: fit-content; /* Set width to 45% */
  height: fit-content; /* Set a fixed height (adjust as needed) */
  border: #5a5656 solid;
  background-color: #faf9f6;
  display: flex;
  margin: auto; /* Add this line to center horizontally and vertically */
  flex-direction: column;
  /* justify-content: center; Center content vertically */
  /* align-items: center; Center content horizontally */
}

/* Style for the "TIMINGS" div */
#GymTimings {
  border: #5a5656 solid;
  background-color: #faf9f6;
  padding: 30px;
  width: fit-content; /* Set width to 45% */
  height: 100px; /* Set the same fixed height as "Time Now" div */
  display: flex;
  margin: auto; /* Add this line to center horizontally and vertically */
  flex-direction: column;
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
}

/* Add gap between the underline and text */
#GymTimings strong u {
  text-decoration: underline;
  text-decoration-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Set the color of the underline */
  text-underline-offset: 5px; /* Adjust the gap between text and underline */
}
#chart-image {
  width: 100%;
  max-width: 800px; /* Adjust the maximum width as needed */
  display: block;
  margin: 0 auto; /* Center the image horizontally */
}