/* Container for the datepicker */
 .h-monthpicker-container {
	text-align: center;
	/* margin: 20px; */
	max-width: 100%;
	box-sizing: border-box;
  }

  /* Navigation for months */
  .h-month-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	margin-bottom: 5px;
  }

  /* Update the layout of the month range and buttons */
  .h-month-range {
	flex: 1;
	text-align: left;
	font-size: 18px;
	font-weight: 600;
  }

  .h-prev-month,
  .h-next-month{
	display:flex;
	align-items: center;
  }

  .h-next-month{
	margin-left:20px;
  }

  .h-month-nav button {
	font-size: 16px;
	padding: 5px 10px;
	cursor: pointer;
	border: 1px solid #ccc;
	background-color: #f5f5f5;
	border-radius: 5px;
	transition: background-color 0.3s;
  }

  .h-month-nav button:hover {
	background-color: #e0e0e0;
  }

  /* Row for months */
  .h-months {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	overflow-x: auto;
	margin-top: 10px;
  }

  /* Individual month container */
  .h-month {
	/* flex: 1 0 auto; */
	/* max-width: calc(16.66% - 10px); */
	/* padding: 30px 10px; */
	padding: 20px 10px 35px 10px;
	/* margin: 5px; */
	cursor: pointer;
	border-radius: 16px;
	transition: background-color 0.2s;
	box-sizing: border-box;
	text-align: center;
	position: relative;
	width: 54px;
  }
/* 
  .h-month:hover {
	background-color: #CCE8BD;
  } */

  /* Selected month style */
  .h-month.selected {
	background-color: #94C679;
	/* color: #94C679; */
	color: #FFF !important;
	position:relative;
  }

  .h-month.h-dot::after {
	  content: ''; /* Empty content for the dot */
	  position: absolute;
	  bottom: 15px; /* Position the dot just below the date */
	  left: 50%; /* Center the dot horizontally */
	  transform: translateX(-50%); /* Adjust horizontal centering */
	  width: 6px;
	  height: 6px;
	  border-radius: 50%; /* Make it a circle */
	  background-color: #94C679; /* Set the color of the dot */
  }

  .h-month.selected.h-dot {
	background-color: #FFF !important;
  }

  /* Today's month */
  .h-today-month {
	/* border: 2px solid #2196F3;
	background-color: #e3f2fd; */
	color: #94C679;
  }

  /* Label for month name */
  .h-month-label {
	font-size: 16px;
	font-weight: 600;
  }  

  /* Responsive adjustments */
  @media (max-width: 768px) {
	.h-month-nav {
	  font-size: 16px;
	}

	/* .h-month {
	  max-width: calc(16.66% - 10px);
	} */

	/* .h-month-label {
	  font-size: 14px;
	} */

	/* Disable hover effect on mobile devices */
	/* .h-month:hover {
		background-color: #CCE8BD;
	} */
  }

  @media (max-width: 480px) {
	.h-month-nav {
	  font-size: 14px;
	}

	/* .h-month {
	  max-width: calc(16.66% - 10px);
	} */

	/* .h-month-label {
	  font-size: 12px;
	} */
  }