demo-page-main-content-panel{
	max-width: 900px;
	display: block;
	height: 100%;
}
demo-new-character-form-panel,
demo-new-character-form-panel > div,
demo-edit-character-form-panel,
demo-edit-character-form-panel > div{
	display: block;
	height: 100%;
}
.demo-character-menu-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.demo-character-menu-panel .active-button button{
	background-color: #0056b3; /* Darker shade of primary blue */
	border-color: #004085;
}

@media (max-width: 767.98px) {
	.demo-character-menu-panel {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem; /* A smaller gap for horizontal buttons */
	}
}

.demo-character-menu-panel .left_character_menu_btn_holder{
	display: inline-flex;
	gap: 0.8rem;
	flex-direction: row;
	align-items: center;
	height: 100%;
}
.left_character_menu_btn_holder .left_character_menu_btn{
	display: none;
}
.demo-character-menu-panel .left_character_menu_btn_holder .left_character_menu_btn{
	display: block;
}
@media (max-width: 767.98px) {
	.demo-character-menu-panel .left_character_menu_btn_holder{
		display: block;
	}
	.demo-character-menu-panel .left_character_menu_btn_holder .left_character_menu_btn{
		display: none;
	}
}
@media (min-width: 767.98px) {
	.demo-character-menu-panel .left_character_menu_btn_holder{
		min-width: 170px;
	}
}