.switch-toggle {
	--width: 200px;
	--height: 40px;
	--offset: 2px;
	--radius: 4px;
	position: relative;
	width: var(--width);
	height: var(--height);
	padding: var(--offset);
	background: rgba(183, 184, 185, 0.5);
	border-radius: var(--radius);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	font-style: normal;

	input[type="checkbox"] {
		cursor: pointer;
		position: absolute;
		inset: 0;
		appearance: none;
		z-index: 2;

		&:checked {
			+ label.switch-toggle-label {
				&:before {
					translate: 100% 0;
				}
				span {
					&:nth-child(1) {
						color: gray;
					}
					&:nth-child(2) {
						color: #1a1a1a;
					}
				}
			}
		}

		& + label.switch-toggle-label {
			position: absolute;
			inset: var(--offset, 0);
			padding: 10px 0;
			display: block;
			user-select: none;
			pointer-events: none;
			display: grid;
			gap: 2px;
			grid-auto-flow: column;
			grid-auto-columns: 1fr;
			place-items: center;

			&:before {
				content: "";
				position: absolute;
				width: 50%;
				inset: 0;
				background: #fff;
				border-radius: calc(var(--radius) - var(--offset));
				box-shadow: 0px 10px 20px 0px rgba(16, 39, 68, 0.1);
				translate: 0 0;
				transition: translate 250ms cubic-bezier(0.93, 0.26, 0.07, 0.69);
			}

			span {
				position: relative;
				transition: 200ms linear;

				&:nth-child(1) {
					color: #1a1a1a;
				}

				&:nth-child(2) {
					color: gray;
				}
			}
		}
	}
}
.table-container {
	padding: 0rem;
	max-width: 100%;
	margin: 0 auto;
  }
  
  .responsive-table {
	width: 100%;
	border-collapse: collapse;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  
  .responsive-table thead {
	background-color: #f8f9fa;
	font-weight: bold;
  }
  
  .responsive-table th {
	padding: 1rem;
	text-align: left;
	font-weight: 300;
	color: #333;
	border-bottom: 2px solid #dee2e6;
	font-weight: bold;
  }
  
  .responsive-table td {
	padding: 0.35rem;
	border-bottom: 1px solid #dee2e6;
	color: #444;
  }
  
  .responsive-table tbody tr:hover {
	background-color: #f8f9fa;
  }
  
  /* Mobile view styles */
  @media screen and (max-width: 768px) {
	.responsive-table thead {
	  display: none;
	  font-weight: bold;
	}
  
	.responsive-table tbody tr {
	  display: block;
	  margin-bottom: 1rem;
	  border: 1px solid #dee2e6;
	  border-radius: 8px;
	  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}
  
	.responsive-table td {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0.35rem 1rem;
	  border-bottom: 1px solid #eee;
	}
  
	.responsive-table td:last-child {
	  border-bottom: none;
	}
  
	.responsive-table td::before {
	  content: attr(data-label);
	  font-weight: 300;
	  color: #333;
	}
  }