body {
	padding: 2rem;
	font-family: 'Computer Modern Serif';
}

button {
	margin-bottom: 0.5rem;
}

.container {
		max-width: 100%;
		max-height: 500px;
		width: fit-content;
		height: fit-content;
		padding: 8px;
		background-color: #fafafa;
		border-radius: 4px;
		transition-duration: 200ms;
		cursor: pointer;
}

.container:hover {
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
}

/* table styling */
.table-value-image {
    overflow-x: auto;
	overflow-y: auto;
    width: 100%;
	max-height: 20rem;
}

.table-value-image table {
    border: 1px solid #dededf;
    height: auto;
    width: auto;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: center;
}

.table-value-image caption {
    caption-side: top;
    text-align: left;
}

.table-value-image th {
    border: 1px solid #dededf;
    background-color: #eceff1;
    color: #000000;
    padding: 12px;
}

.table-value-image td {
    border: 1px solid #dededf;
    background-color: #ffffff;
    color: #000000;
    padding: 12px;
}

/* scroll styling */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #6E6E6E #DFE9EB;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
*::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #DFE9EB;
}

*::-webkit-scrollbar-track:hover {
  background-color: #B8C0C2;
}

*::-webkit-scrollbar-track:active {
  background-color: #B8C0C2;
}

*::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #6E6E6E;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #000000;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #000000;
}