main {
	align-content: center;
}

.navbar-brand img {
	width: 120px;
	margin-right: 20px;
}

main .container {
	width: 100%;
	margin-top: 62px;
	justify-content: center; /* columns centered horizontally*/
	align-items: center; /* columns centered vertically*/
}

main .container .data-header {
	padding: 0.75rem 2.75rem;
}

main .container .data-body {
	padding: 0.75rem 2.75rem;
}

.buttons-bar {
	height: 2.5em;
}

fieldset {
	margin-inline-start: 2px! important;
	margin-inline-end: 2px! important;
	padding-block-start: 0.35em! important;
	padding-inline-start: 0.75em! important;
	padding-inline-end: 0.75em! important;
	padding-block-end: 0.625em! important;
	border-width: 1px! important;
	border-style: groove! important;
	border-color: threedface! important;
	border-image: initial! important;
	margin-bottom: 1.25em! important;
}

legend {
	width: auto! important;
	padding: 0 0.45em 0.3em! important;
	font-size: 1.2rem! important;
	margin-bottom: 0.25em! important;
}

.modal-body {
	font-size:1rem;
}

.readme-paragraph {
	margin: .7rem 0 0;
}
.readme-paragraph-item {
	margin: .2rem 0 0;
}

.mbank-contents .wpwl-container {
	max-width: 220px;
}

.mbank-contents .mBankButtonBlock {
	float: right;
	margin-right: .3rem;
	width: 200px;
    height: 82px;
}
.mbank-contents .mbWayButtonBlock {
	float: left;
	margin-left: .3rem;
	width: 200px;
    height: 82px;
}

.mbank-contents #mbank-img {
  margin: -13px -210px 0 -57px;
  background-image: url(../images/mbank.png);
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  min-height: 84px;
  min-width: 300px;
  cursor: pointer;
}

.mbank-contents #mbway-img {
  margin: -13px 3px 0 -210px;
  background-image: url(../images/mbway.png);
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  min-height: 84px;
  min-width: 300px;
  cursor: pointer;
}

.mbank-data-text {
	margin: 0 auto;
	max-width: 200px;
}
.mbank-data-text.mbank-data-lg {
	max-width: 270px;
}

.qr-code-img {
	text-align: center;
	margin: 0 auto;
	max-width: 210px;
}
#qr-code {
	width:150px;
	height:150px;
	margin:15px 30px;
}

@media only screen and (max-width: 767px){
	h2 {
		font-size: 1.3rem !important;
	}
	h3 {
		font-size: 1.2rem !important;
	}
	h4 {
		font-size: 1rem !important;
	}
	h5 {
		font-size: .9rem !important;
	}
	h6 {
		font-size: .7rem !important;
	}
	.modal {
		width: 88% !important;
	}
	.table {
		width: 93% !important;
	}
	table {
		font-size: 0.3rem !important;
	}
	.modal-body, .footer, .btn, p, ul {
		font-size: .65rem !important;
	}
	legend {
		font-size: .8rem !important;
	}
	.mbank-contents .wpwl-container {
		margin: 0 auto;
	}
	.mbank-contents .mBankButtonBlock {
		float: none;
		margin-right: 0;
		width: auto;
    	height: auto;
	}
	.mbank-contents .mbWayButtonBlock {
		float: none;
		margin-left: 0;
		width: auto;
    	height: auto;
	}
	.mbank-contents #mbank-img {
		margin-left: 0px;
	}
	.mbank-contents .wpwl-group {
		margin: 0 14px;
	}

	.mbank-data-text {
		max-width: 150px;
	}
	.mbank-data-text.mbank-data-lg {
		max-width: 190px;
	}

	.qr-code-img {
		text-align: center;
		margin: 0 auto;
		max-width: 140px;
	}
	#qr-code {
		width:80px;
		height:80px;
		margin:15px 30px;
	}
}