:root{
	--full-width: 100%;
	--max-width: 1600px;
	--header-height: 100px;
	--header-fixed-height: 40px;
	--footer-height: 60px;
	--gutter-padding: 10px;
	--gutter-size: 2.5px; /* half of intended size */
	--main-menu-height: 24px;
	--page-bottom-height: 28px;

	--logo-height: 60px;
	--logo-fixed-height: 36px;
	--logo-position: 20px;

	--header-padding:var(--gutter-padding);

	--main-content-width:var(--full-width);
	--main-wrapper-padding:var(--gutter-padding);
	--footer-padding:var(--gutter-padding);

	--gap:5px;
}



.main-wrapper{
/*	width: 100vw; */
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	z-index: 1;
	align-items: center;
	padding:var(--main-wrapper-padding);

}

.main-content,.main-content-bottom{
	width:100%;
	max-width: var(--main-content-width);
	display: flex;
	justify-content: center; /* Center the child horizontally */
	align-items: center;
	flex-direction: column;
	flex-grow: 1;
}

.header-wrapper{
	width: var(--full-width);
	min-height: var(--header-height);
	display: flex;
	justify-content: center;
	z-index:15;
}

.main-header{}
.header-content{
	padding: var(--header-padding);
}

.page-content-wrapper{
	display:flex;
	width: var(--full-width);
	flex-grow: 1;
	flex:1;
	justify-content: center;
}

.page-content{
	max-width: var(--max-width);
	width:100%;
	height:100%;
}


.main-content-wrapper{
	width:var(--full-width);
	display: flex;
	flex-direction: column;
	z-index: 2;
	align-items: center;
}





/*
.main-frame{
	width:var(--full-width);
	display: flex;
	flex-direction: column;
	z-index: 2;
}
*/



.header-container.fixed-header{
	position: fixed;
	top: 0;
	min-height: var(--header-fixed-height);
}


.header-content{
	width: 100%;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	margin: 0 5px;
}



.footer-wrapper{
	width: var(--full-width);
	min-height: var(--footer-height);
	margin: auto auto 0 auto;
	display: flex;
	align-items:center;
	justify-content: center;
	position: relative;
	z-index: 10;
}



.footer-content{
	max-width: var(--max-width);
	margin: 0 ;
	width: 100%;
	height:100%;
	flex:1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--footer-padding);
	overflow: hidden;
	position: relative;
}

.footer-left{
	display:flex;
	flex:1;
	justify-content:left;
}

.footer-right{
	display:flex;
	flex:1;
	justify-content:right;
}




.manage-row{
	display: grid;
	grid-template-columns: minmax(180px, 5fr) 7fr;
	gap: var(--gutter-size);
	align-items: center;
}


.stack{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.cluster{
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	align-items: flex-start;
}

.split{
	display: flex;
	gap: var(--gap);
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;


	background-color: #ffffff;
	padding: var(--gap);
	border-radius:10px;
}

.panel{

	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
	background-color: #f2f2f2;
	border-radius:10px;

}



.panel-heading{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	font-weight: 600;
	background: var(--panel-heading-bg);
	border-bottom: 1px solid var(--border-color);
	padding: var(--gap);
}

.panel-body{
	padding: var(--gap);
}


.section{
	width: 100%;
	box-sizing: border-box;
	border:1px dotted #EEEEEE;
	background-color: #EEEEEE;
}


.split > .panel{
	flex: 1 1 0;
	min-width: 0;
	padding
}

.split .panel-heading{
	text-align: center;
}






.data-row{
	display: flex;
	gap: var(--gap);
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.data-heading{
	font-weight: 600;
}

.data-main{
	flex: 1 1 auto;
	min-width: 0;
}

.data-num{
	flex: 0 0 90px;
	text-align: right;
}

.data-error{
	flex: 1 1 auto;
	text-align: right;
	color: var(--red);
}



/* Comparison Tool */

.compare-view{

	display: flex;
	gap: var(--gutter-size);
	align-items: flex-start;

}

.compare-panel{

	flex: 1 1 0;
	min-width: 0;

}


/*
.main-menu-container{
	display: flex;
	align-items: right;
	position: relative;
	float:right;
}

.main-menu-content{
	display: flex;
	align-items: right;
	visibility: hidden;
	position: relative;
}

.main-menu-container.fixed-menu{
	position: fixed;
	top:0;
	right:0;
}


.menu-item{
	display: flex;
	align-items: center; 
	justify-content: center; 
	position: relative;
}

.submenu-container{
	position:absolute;
	top:100%;
	display:none;
}

.submenu-content{
	display: flex;
	flex-direction: column;
}

.submenu-item{
	align-items: center; 
	justify-content: center; 
}



.main-container{
	max-width: var(--full-width);
	width:100%;
	display: flex;
	justify-content: center;
	z-index: 5;
}
*/