.wizard .sections
{
	height: 100%;
	overflow: hidden;
	padding-top: 0.5em;
}

.wizard .sections .section {
	display: none;
	background: white;
}

.wizard .sections .section.active {
	display: grid;
	height: 100%;
	overflow: hidden;
	grid-template-rows: auto 1fr auto;
}

.wizard .sections .section.active .content {
	position: relative;
		
	height: 100%;
	overflow: hidden;
	border: solid 1px #c9c9c9;
	border-radius: 4px;
	padding: 1em;
}

.wizard .sections .section.active .footer {
	margin-top: 0.5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wizard .sections .section.active .footer button 
{
	margin:0.3em 0;
}

.wizard .sections .section .button {
	display: flex;
	flex-basis: 15%;
}

.wizard .sections .section .button button {
	margin-top: 0;
	width: 100%;
}

.wizard .sections .section .button:last-child {
	padding-left: 0.3em;
}

.wizard .sections .section .title {
	text-align: center;
	font-size: 14pt;
	width: 100%;
	background: #def0f8;
	border-radius: 6px;
	padding: 0.5em;
	margin-bottom: 0.5em;
}

.wizard .sections .section .controls {
	margin-top: 1em;
	overflow-y: auto;
	align-items: normal;
	flex-grow: 1;
}

.wizard .sections label {
	cursor: pointer;
}

.wizard .sections .alert {
	font-size: 10pt;
	padding: 0.4em;
	margin: 0;
	display: flex;
	align-items: anchor-center;
}

.wizard .sections .alert i {
	font-size: 20pt;
}

.wizard .sections .alert span {
	padding-left: 0.6em;
}

.wizard #busy {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background: white;
	opacity: 0.8;
}

.wizard #busy.active {
	display: flex;
}

.wizard #busy .status {
	padding-left: 0.5em;
	font-weight: bold;
}

html, body
{
	height: 100%;
}

html > body
{
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
}

body > .container > .row
{
	height: 100%;
}

.page-content
{
	height: 100%;
}

.main-banner
{
	height: 100%;
	min-height: unset;
}


.main-banner
{
	display: flex;
	flex-direction: column;
}

.main-banner .row
{
	height: 100%;
	flex-grow: 1;
}

.main-banner .row > div
{
	display: flex;
	flex-direction: column;
	height: 100%;
}

#mainContent.wizard
{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

body > .container
{
	height: 100%;
	overflow: hidden;
}

body > .container > div.row > div
{
	height: 100%;
	overflow: hidden;
}