/* ============================================================================================== */

.action-area {
	display:					grid;
	grid-template-columns:		20px 150px 1fr 150px 1fr 150px 20px;
	grid-template-rows:			10px 1fr 10px;
}

.action-area2 {
	display:					grid;
	grid-template-columns:		20px 250px 1fr 250px 100px 250px 20px;
	grid-template-rows:			10px 1fr 10px 1fr 10px;
}

.prev-area {
	grid-row:					2 / 3;
	grid-column:				2 / 3;
}

.next-area {
	grid-row:					2 / 3;
	grid-column:				6 / 7;
}

.center-area {
	grid-row:					2 / 3;
	grid-column:				4 / 5;
}

.prev-area2 {
	grid-row:					4 / 5;
	grid-column:				2 / 3;
}

.next-area2 {
	grid-row:					4 / 5;
	grid-column:				6 / 7;
}

.center-area2 {
	grid-row:					4 / 5;
	grid-column:				4 / 5;
}

button {
	display:					flex;
	position:					relative;
	justify-content:			center;
	align-items:				center;
	width:						150px;
	margin:						0px auto;
	padding:					0.5em 1.2em 0.5em 1.2em;
	border:						none;
	border-radius:				5px;
	font-weight:				normal;
	font-size:					1em;
    cursor:						pointer;
	color:						var(--button-color);
	background-color:			var(--button-background);
}

button:hover {
	background-color:			var(--button-background-hover);
}

button:disabled {
	background-color:			var(--button-disabled-background);
}

button.sub,
button.logout,
button.close {
	color:						var(--button-sub-color);
	background-color:			var(--button-sub-background);
	border:						1px solid var(--button-sub-border);
}
button.sub:hover,
button.logout:hover,
button.close:hover {
	font-weight:				700;
	background-color:			var(--button-sub-background-hover);
}

button.btn-tiny {
	color:						var(--button-tiny-color);
	background-color:			var(--button-tiny-background);
	border:						1px solid var(--button-tiny-border);
}
button.btn-tiny:hover {
	font-weight:				700;
	background-color:			var(--button-tiny-background-hover);
}

button.btn-submit2 {
	display:					inline-block;
	width:						250px;
}

button.btn-act {
	display:					inline-block;
	width:						80px;
	height:						30px;
	margin-left:				5px;
	margin-right:				5px;
	font-size:					0.8em;
}

button.btn-logout {
	display:					inline-block;
	width:						100px;
	height:						30px;
	margin-top:					15px;
	margin-left:				5px;
	margin-right:				5px;
	font-size:					0.8em;
}

button.btn-return {
	display:					inline-block;
	width:						110px;
	height:						30px;
	margin-top:					15px;
	margin-left:				5px;
	margin-right:				5px;
	font-size:					0.8em;
	padding-left:				0.5em;
	padding-right:				0.5em;
}

button.btn-small {
	display:					inline-block;
	width:						100px;
	height:						30px;
	margin-top:					0px;
	margin-left:				0px;
	margin-right:				0px;
	font-size:					0.8em;
}

button.btn-tiny {
	display:					inline-block;
	width:						60px;
	height:						30px;
	margin-top:					0px;
	margin-left:				0px;
	margin-right:				0px;
	font-size:					0.8em;
}