table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-collapse: collapse;
text-align: center;
margin:auto;
display:table;
transform: translateY(50%)
}
th, td:first-child, .withPopupButton {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
th:first-child, td:first-child {
text-align: left;
}
.marks {
	font-weight: bold;
	font-size: 21px;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;
}
#popup{
	background-color:#7f7f7fb5;
	position:absolute;
	z-index:10;
	width:100%;
	height:100%;
	display:none;
	vertical-align:middle;
	flex-direction: column;
	align-items: flex-start;
}
.counter{
	width:50px;
}
#confirmForm {
	width:50%;
	min-height:50%;
	background:white;
	border:1px solid black;
	margin: auto;
}
#confirmForm h1{
	text-align:center;
}
#x-mark{
	border: 2px solid black;
	margin:10px;
	top:5px;
	padding:0px 6px;
	border-radius:50%;
	float:right;
	cursor:pointer;
	color:black;
	background-color:white;
	
}

#x-mark:hover{
	background-color:black;
	color:white;
}
#order *{
	
	display:flex;
}
#order{
	padding:50px;
	width:90%;
	margin:auto;
	display:table;
}

.row {
	width:100%;
	height:25px;
	flex-direction: row;
	align-items: flex-start;
}
.col{
	flex-direction: column;
	width:33%;
	border:1px solid black;
}