div.threeColumn {
	display: flex;
	height: 100%;
	overflow: hidden;
}

div.threeColumn > div {
	width: 100%;
	padding: 5px;
}

div.threeColumn  {
	.haftHeight {
		display: flex;
		height: 50%;
	}
}

div.threeColumn > div:first-child, div.threeColumn > div:last-child {
	width: 30%;
}

div.threeColumn > div:first-child {
	border-right: 1px #DEEBF7 solid;
}

div.threeColumn > div:last-child {
	border-left: 1px #DEEBF7 solid;
}

.two-column-table {
	width: 100%;
	border-collapse: collapse;
}

.two-column-table th, .two-column-table td {
	border: 2px solid #ffffff;
	padding: 8px;
	text-align: left;
}

.two-column-table th {
	background-color: #0067B0; /* Set the header background color (blue) */
    color: white; /* Set the text color to white for contrast */
    font-weight: bold;
    text-align: left;
    padding: 8px;
    border: 0px solid #fff;
}

.two-column-table tbody tr:nth-child(odd) {
    background-color: #ccdfef; /* more dark blue odd rows */
}

.two-column-table tbody tr:nth-child(even) {
    background-color: #e7f0f7; /* light blue */
}

.three-dots {
    float: right; /* Align the dots to the right */
    /*color: #0067B0;*//* Blue color for the dots */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-weight: bold;
}
/* Pop-up container styles */
.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stays in place relative to the viewport */
    z-index: 1; /* Sits on top of other content */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enables scrolling if content overflows */
    background-color: rgba(0,0,0,0.4); /* Semi-transparent black overlay */
    justify-content: center; /* Centers content horizontally when display is flex */
    align-items: center; /* Centers content vertically when display is flex */
}

/* Pop-up content box styles */
.popup-content {
    background-color: #fefefe; /* White background */
    margin: auto; /* Centers the box within the popup container */
    padding: 20px; /* Padding inside the box */
    border: 1px solid #888; /* Border around the box */
    width: 80%; /* Takes 80% of the width */
    max-width: 400px; /* Maximum width for larger screens */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Adds a shadow */
    position: relative; /* Needed for positioning the close button */
}

/* Close button styles */
.close-button {
    color: #aaa; /* Gray color */
    float: right; /* Floats to the right */
    font-size: 28px; /* Larger font size */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Indicates it's clickable */
}

/* Hover and focus states for the close button */
.close-button:hover,
.close-button:focus {
    color: black; /* Changes to black on hover/focus */
    text-decoration: none; /* Removes underline */
    cursor: pointer; /* Keeps cursor as pointer */
}