/* ----- INDEX ----- */
:root {
	--container_title_background: BlanchedAlmond;
	--container_background: ghostwhite;
}
#content.index{
	height: 100%;
	min-height: 100%;
	max-height: 90vh;
	grid-template-rows: 1fr;
	grid-template-columns: minmax(0px, 2fr) 1fr;
	grid-template-areas: 
		"left right"
	;
	grid-gap: 5px;
}
.banner { 
	border: 1px solid rgba(100, 100, 100, 0.5);
	font-size: 1em !important;
	font-weight: bold !important;
}
.panel_title {
	justify-content: center !important;
	align-self: stretch;
	padding: 5px;
	background:	var(--container_title_background) !important;
	border-bottom: 1px solid rgba(100, 100, 100, 0.5);
}
#news {
	height: 100%;
	padding: 0px;
	grid-area: left;
	display: grid;
	grid-template-rows: 30px repeat(4, 1fr);
	grid-auto-rows: 0fr;
	grid-gap: 5px;
	align-items: start;
	justify-content: stretch;
	background-color: var(--nav_background);
	border: none !important;
}
#mumble {
	grid-area: right;
	background-color: var(--nav_background);
	display: grid;
	grid-gap: 5px;
	grid-template-rows: 30px 2fr 1fr;
	grid-template-areas:
	"banner"
	"status"
	"connect"
	;
	align-items: start;
	justify-content: stretch;
}
#mumble > #banner {
	grid-area: banner;
}
#mumble > #status {
	grid-area: status;
}
#mumble > #connect {
	grid-area: connect;
}
#news > article {
	max-height: 100%;
	min-height: 100%;
	background-color: var(--container_background);
	border: 1px solid rgba(100, 100, 100, 0.5);
	display: grid;
	grid-template-rows: 30px 9fr 0px;
	grid-template-columns: 1fr repeat(2, 125px);
	white-space: pre-wrap;
	overflow: clip;
}
#news > article > :is(.title, .date){
	background-color: BlanchedAlmond;
	border-bottom: 1px solid rgba(100, 100, 100, 0.5);
	align-content: center;
	padding: 0px 5px;
}
#news > article > .title {
	grid-column: 1;
	text-wrap: nowrap;
	text-align: start;
	overflow: clip;
	text-overflow: ellipsis;
}
#news > article > .date {
	grid-column: 2 / span 2;
	text-align: end;
}
#news > article > .article_content{
	display: flex;
	text-align: start;
	justify-content: start;
	align-content: start;
	margin: 5px 5px;
	grid-row: 2;
	grid-column: 1 / span 3;
}
#mumble > .wrapper {
	display: grid;
	grid-template-rows: 30px;
	grid-auto-rows: 1fr;
	align-items: center;
	width: auto;
	align-self: stretch;
	overflow-y: auto;
	border: 1px solid rgba(100, 100, 100, 0.5);
}
#mumble > .wrapper > .container {
	background-color: var(--container_background);
	width: 100%;
	display: flex;
	justify-content: center;
}
#mumble > #connect > .imagelink {
	height: 100%;
	width: 100%;
	color: skyblue;
	font-size: 1.5rem;
	display: flex;
	justify-content: center;
}
#mumble > #connect > .imagelink > img {
	align-self: center;
	object-fit: fill;
	height: 100%;
	width: 100%;
}
#mumble > #status > #users{
	height: 100%;
	width: 100%;
	display: grid !important;
	grid-auto-flow: row;
	grid-auto-rows: 1.5em;
	padding: 0px 0px;
	justify-content: stretch;
}
#mumble > #status > #users > div.row {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: auto 100px;
	align-content: stretch;
	text-align: stretch;
	white-space: nowrap;
	font-size: 0.8em;
	border-bottom: 1px solid gray;
	margin-bottom: 0px;
	background-color: white;
}
#mumble > #status > #users > div.row > div {
	display: flex;
	align-items: center;
	overflow: hidden;
	text-overflow: clip;
	padding: 0px 5px;

}
#mumble > #status > #users > div.row > div:first-child{
	border-right: 1px solid gray;
}