.account-page{
	width:100%;
	display:flex;
	flex-direction:row;
}

/* ---------------- ICON STYLES ---------------- */

.account-icon {
	margin-left: 0.5rem;
}

.account-icon svg {
	width:1.5rem;
	height:1.5rem;
	box-sizing: border-box;
	margin: 0 auto;
	transition: color 0.2s ease;
}

.account-menuitem:hover .account-icon svg {
	color: var(--whitecolor); /* affects fill if set to currentColor */
	stroke: var(--whitecolor); /* override stroke color */
}

.account-menuitem:hover .account-menuitem-label {
	color: var(--whitecolor);
}

/*  ........................... NAVIGATION...................................*/    

.account-navbar {
    background-color: var(--whitecolor);
	width: 30%;
	margin-right: 1rem; /* Adds breathing room */
	box-sizing: border-box;
}

.account-navbar .navbar-header {
	text-align: center;
	height:7rem;
}

.account-navbar .account-navigation {
	width:100%;
}			

.account-navigation .account-menu{
	width:100%;
	padding-left:1.0rem;
	padding-right: 0.5rem;
	box-sizing: border-box;
}		

.account-menu .account-menuitem {
	display:flex;
	flex-direction:row;
	align-items: center;
	margin:0;
	border-bottom: 0.2rem solid var(--lightgreycolor); 
	height:3.5rem;
	width:100%;
	box-sizing: border-box;
}
	
.account-menu .account-menuitem:hover,
.account-menu .account-menuitem-label:hover{
	background-color:var(--vlightbluecolor); 
	cursor:pointer;
}

.account-menuitem .account-menuitem-label {
	padding-left:1.0rem;
	width: 100%; /* Let it take full available space */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-grow: 1;
}  

/*  .................................FORM DATA...................................*/ 

.account-data{
	/*background-color: var(--whitecolor); */
	padding-bottom: 5.0rem;
}

.account-data .account-form {
	display:flex;
	flex-direction:column;
}

.account-data .form-header {
	display: flex;
	height: 7.0rem;
	justify-content: center;   /* horizontal centering */
	align-items: center;       /* vertical centering */
}

.account-form .account-form-data {
	float:left;
	width:100%;
}

.account-form .account-form-controller {
	display: flex;
    justify-content: center; /* Centers the button horizontally */
	margin-top:3rem;
	padding: 0 5rem;
}

.account-form-data-menu .account-form-menuitem {
	display:flex;
	flex-direction:row;
	align-items: center;
	height:3.5rem;
	padding-left:5%;
	margin:0;
	box-sizing: border-box;
	width:95%;
}

.account-form-menuitem .account-form-menuitem-label {
	width:80%;
	padding-left:10%;
}  

.account-form .account-form-data-content {
	padding: 0 5rem;
}	

/*............................................ MEDIA QUERIES................................... */

@media (max-width: 65rem) {
	
	.account-data .account-form {
		margin:0;
		width:100%;
	}
	
	.account-data{
		width:100%;
	}
	
	.account-navbar{
		width:5.0rem;
	}
	
	.account-menuitem-label{
		display:none;
	}
	
	.navbar-header{
		visibility: hidden;
	} 
	
	.account-form-menu{
		display:block;
	}	

	.account-form-data .account-form-data-menu {
		visibility: visible;
	}	

}

@media (min-width: 65rem){

	.account-data .account-form{
		margin:auto;
		width:70%;
	}
	
	.account-data{
		width:70%;
	}
	
	.account-navbar{
		width:30%;
	}

	.account-menuitem-label{
		display:flex;
	}
	
	.navbar-header{
		visibility:visible;
	}

	.account-form-menu{
		display:none;
	}	
	
	.account-form-data .account-form-data-menu {
		visibility: hidden;
	}	

	.account-menu .account-menuitem-label {
		padding-left: 5%; /* Existing spacing for large screens */
		display: flex;
	}
}