body { 
	display: flexbox; 
	text-align: center; 
	align-items: center; 
} 

.summary { 
	width: 25rem; 
	display: flex; 
	flex-direction: column; 
	text-align: center; 
	margin: auto; 
	margin-bottom: 40px; 
	padding: 1%; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
} 


.total { 
	display: flex; 
	flex-direction: row; 
	margin: auto; 
} 

.total>div { 
	width: 200px; 
} 

.root { 
	width: fit-content; 
	background-color: white; 
	display: flex; 
	margin: auto; 
	padding: 2%; 
	padding-top: 1%; 
	justify-content: center; 
	text-align: center; 
	border-width: 6px; 
	border: 6px grey; 
	box-sizing: content-box; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
	min-height: 30vh; 
} 

.vertical { 
	color: rgb(35, 35, 106); 
	margin: 0 2%; 
	border-width: 2px; 
} 

#table { 
	border-collapse: collapse; 
	width: 50vw; 
	border: 1px solid #ddd; 
	font-size: 18px; 
} 

#table th, 
#table td { 
	text-align: left; 
	padding: 12px; 
} 

#table tr { 
	border-bottom: 1px solid #ddd; 
} 

#table tr.titles { 
	background-color: lightgreen; 
} 

.inputitem { 
	display: flex; 
	flex-direction: row; 
	font-weight: bolder; 
	font-size: large; 
	padding: 1%; 
} 

input, 
select, 
option { 
	padding: 2%; 
	border-radius: 5px; 
	margin: 2%; 
} 

button { 
	font-size: large; 
	border-radius: 5px; 
	padding: 1%; 
} 

.zoom { 
	color: black; 
	transition: transform .2s; 

} 

.zoom:hover { 
	transform: scale(1.23); 

	color: green; 
}

footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    color: white;
    text-align: center;
  }
  footer a {
    text-decoration: none;
    color: white;
  }