.dot {
    height: 0.8em;
    width: 0.8em;
    border-radius: 50%;
    display: inline-block;
  }

  .displayNone {
    visibility:hidden;
  }
  .tableButton {
    visibility:visible;
  }
 .responsive-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}
@media (max-width: 768px) {
	.responsive-table thead {
		display: none !important;
	}
	.responsive-table tbody {
		display: flex !important;
		flex-direction: row !important;
		gap: 1rem !important;
		padding: 0.5rem !important;
	}
	.responsive-table tr {
		flex: 0 0 auto !important;
		max-width: 90% !important;
		background: #fff !important;
		border: 1py solid #ccc !important;
		border-radius: 8px !important;
		padding: 1rem !important;
		box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
		scroll-snap-align: center !important;
	}
	.responsive-table td {
		display: flex !important;
		width: 90% !important; 
		justify-content: space-between !important;
		border: none !important;
		padding: 0.5rem 0 !important;
	}
	.responsive-table td::before {
		content: attr(data-label) !important;
		font-weight: bold !important;
		color: #555 !important;
		margin-right: 0.5rem !important;
	}
}