.wrappertable {
	border: 1px solid var(--white);
	margin: auto;
	padding: 3px;
	width: 80%;
	border-radius: 10px;
	background-color: var(--white);
	box-shadow: 10px 10px 16px 4px var(--grayverydark);
    display: block;
}

.fixTableHead {
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
    height: 300px;
}

/* table styling */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* header styling */
thead th {
    position: sticky;
    top: 0;
    background-color: var(--white); 	/* set background color for header */
    color: var(--black); 				/* text color */
	padding: 5px; 						/* padding inside the header */
    text-align: left; 					/* align text to the left */
    z-index: 10; 						/* ensure header stays on top */
}

/* styling for table cells */
th, td {
    padding: 5px;
    word-wrap: break-word;
}

/* first column */
table td:nth-child(1),
table th:nth-child(1) {
    width: 30%;
}

/* second column */
table td:nth-child(2),
table th:nth-child(2) {
    width: 70%;
}

/* alternating row colors for better readability */
tr:nth-child(even) {
    background-color: var(--grayverylight);
}

tr:nth-child(odd) {
    background-color: var(--white);
}	

/* hover effect on rows */
tr:hover {
    background-color: var(--graydark);
}