/* Header Styles */

#portal_header 															{ background-color: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); z-index: 10;  }
#portal_header .offset 													{ display: flex; align-items: center; max-width: 1500px; min-height: 80px; padding: 9px 2em 9px 10px; }

#portal_header .open_menu												{ margin: 0 2em 0 1em; }
#portal_header .logo_block 												{ margin-left: 1em; width: 30%; display: flex; min-width: 90px; }
#portal_header .details_block 											{ width: 70%; display: flex; align-items: center; justify-content: right; }
#portal_header .details_block .download_icon							{ font-size: 1.5em; position: relative; margin-right: 1em; cursor: pointer; }
#portal_header .details_block .download_icon .notification_count		{ position: absolute; top: -9px; right: -10px; font-size: 0.6em; padding: 0.25em; background-color: #ea580c; border-radius: 50%; height: 22px; width: 22px; display: flex; justify-content: center; align-items: center; line-height: 1em; color: #FFF;  }
#portal_header .details_block .initials									{ margin-right: 1em; background-color: #284a87; border-radius: 50%; padding: 0.75rem; width: 33px; height: 33px; color: #FFF; display: flex; justify-content: center; align-items: center; font-size: 0.875em; }
#portal_header .details_block .customer_details_block					{ margin-right: 2em; display: flex; flex-direction: column;  }
#portal_header .details_block .customer_details_block .name				{ font-size: 1.125em; font-weight: 600; }
#portal_header .details_block .customer_details_block .number			{ font-size: 0.925em; text-decoration: none !important; border-bottom: none !important; pointer-events: none !important; }
#portal_header .details_block .logout									{ color: #284a87; }
#portal_header .details_block .logout .icon								{ margin-right: 0.25rem; }
#portal_header .details_block .logout .text								{ font-weight: 600; }

#portal_header .customer_prompts										{ left: -8px; top:50px; position: absolute; width: 375px; transition: height ease 300ms; background-color: #284A87; color: #FFF; font-size: 1rem }
#portal_header .customer_prompts ul										{ margin: 0; padding: 0.25em 0; list-style-type: none; }
#portal_header .customer_prompts ul li									{ padding: 0; margin: 0; }
#portal_header .customer_prompts ul li a								{ padding: 0 0.5em; display: inline-block; width: 100%; }

#portal_header .customer_prompts .prompt								{ display: flex; }
#portal_header .customer_prompts .prompt .status-box					{ display: flex; align-items: center; justify-content: center; width: 20px; }
#portal_header .customer_prompts .prompt .status-box i					{ font-size: 0.55em; color: #ea580c; }
#portal_header .customer_prompts .prompt .status-box i.read				{ font-size: 0.55em; color: #000; }
#portal_header .customer_prompts .prompt .icon-box						{ display: flex; align-items: center; justify-content: center; width: 30px; }
#portal_header .customer_prompts .prompt .text-box						{ display: flex; flex-wrap: wrap; align-items: center; width: calc(100% - 50px); padding: 0.5em; }
#portal_header .customer_prompts .prompt .text-box .label				{ font-weight: 600; width: 100%; }
#portal_header .customer_prompts .prompt .text-box .time				{ font-size: 0.875em; width: 100%; }

/* Page Styles */

div.page																{ height: 100%; display: flex; flex-direction: column; }
section.main															{ flex: 1; /*background-color: #cccdcf; */ padding: 2em 0; }
section.main.dashboard													{ padding: 0; background: #284A87; background: linear-gradient(90deg,rgba(40, 74, 135, 1) 50%, rgba(204, 205, 207, 1) 50%); }
section.main.dashboard													{ padding: 0; background: #284A87; background: linear-gradient(90deg,rgba(40, 74, 135, 1) 50%, rgba(244, 248, 253, 1) 50%); }
section.main.dashboard > .offset										{ padding: 0; }
section.main > .offset													{ display: flex; height: 100%; max-width: 1500px; justify-content: center; }
section.main .left_section												{ width: 263px; background-color: #284A87; }
/* section.main .right_section												{ width: calc(100% - 250px); background-color: #cccdcf;  } */
section.main .right_section												{ width: calc(100% - 263px); background-color: #f4f8fd;  }

section.main .right_section > .offset									{ padding: 0; max-width: none; }
section.main .right_section > .offset .content							{ padding: 1.75em; }

/* Menu Styles */

#portal_menu															{ display: flex; flex-direction: column; padding: 1rem; width: 263px; }
#portal_menu.stick														{ position: fixed; top: 0; }
#portal_menu ul															{ margin: 0.5em 0; }
#portal_menu ul li														{ margin: 0 0 0.5em; }
#portal_menu ul li:last-of-type											{ margin: 0; }
#portal_menu ul li .section-panel													{ padding: 0.75em 1em; color: #FFF; display: flex; align-items: center; justify-content: space-between; }
#portal_menu ul li .section-panel .icon												{ margin-right: 0.75em; width: 18px; }
#portal_menu ul li .section-panel .section-label										{ font-size: 0.968em; }
#portal_menu ul li .section-panel.active												{ background-color: #FFF; color: #284A87; }
#portal_menu ul li .section-panel .text-notifications								{ display: flex; align-items: center; justify-content: space-between; width: 100%; }
#portal_menu ul li .section-panel .text-notifications .section-label					{ max-width: 140px; word-wrap: break-word; }
#portal_menu ul li .section-panel .section-notifications								{ display: flex; align-items: center; justify-content: center; background-color: #ea580c; color: #FFF; border-radius: 50%; width: 22px; min-width: 22px; height: 22px; font-size: 0.825em; }
#portal_menu ul li .section-panel .left												{ display: flex; align-items: center; }
#portal_menu ul li .section-panel .right												{ display: flex; align-items: center; }
#portal_menu ul li .section-panel .right .icon										{ margin-right: 0; }

/* Footer Styles */

#portal_footer 															{ background-color: #FFF; padding: 2em 0; border-top: 1px solid lightgrey; }
#portal_footer .offset 													{ display: flex; align-items: center; justify-content: space-between; }
#portal_footer .offset .terms											{ font-size: 0.875em; color: grey; }
#portal_footer .offset .copyright										{ font-size: 0.875em; color: grey; }

/* Button Styles */

.button, button															{ cursor: pointer; padding: 0.35em 0.75em; font-size: 0.835em; background-color: #ea580c; border-radius: 5px; color: #FFF; text-transform: none; }

/* Form Styles */

section.main form.formBuilder ul.error, 
form.formBuilder ul.error												{ margin: 0 0 0.5em; }

/* Login Styles  */

section.main.login > .offset > .content 								{ width: 100%; }

/* Popup Styles */

div.popup-panel button													{ background-color: #284a87; }
div.popup-panel															{transition: height 1s ease; }


@media only screen and (min-width: 0px) and (max-width: 800px) {

	/* Mobile Page Styles */

	section.main.dashboard													{ background: #FFF; }
	section.main .left_section												{ position: absolute; left: -263px; z-index: 1000; height: 100vh; transition: all ease 300ms; }
	section.main .right_section												{ width: 100%; /* background-color: #cccdcf; */ }
	body.hover-active-wg #portal_header		 								{ z-index: 0; }

	/* Mobile Background Stles for Menu */
	body.hover-active-wg section.main .right_section						{ opacity: 0.5; }
	/* body.hover-active-wg header#portal_header								{ opacity: 0.5; } */
	/* body.hover-active-wg footer#portal_header								{ opacity: 0.5; } */

	#portal_header .details_block .download_icon							{ position: unset; }
	#portal_header .customer_prompts										{ left: 0; top: 100%; z-index: 1000; width: 100%; }

}

@media only screen and (min-width: 0px) and (max-width: 600px) {

	/* Mobile Footer Styles */

	#portal_footer 														{ padding: 1rem; }
	#portal_footer .offset 												{ flex-direction: column; }
	#portal_footer .offset .terms										{ margin-bottom: 0.75em; }

	/* Content Padding */
	section.main .right_section > .offset .content						{ padding: 1em; }
	#account-management.dashboard .container.info_top					{ margin-bottom: 1em; }

}


@media only screen and (min-width: 0px) and (max-width: 450px) {

	/* Mobile Header Styles */

	#portal_header .details_block .logout .text							{ display: none; }
	#portal_header .details_block .logout								{ width: auto !important; }

	/* Content Padding */
	section.main .right_section > .offset .content						{ padding: 0.5em; }
	#account-management.dashboard .container.info_top					{ margin-bottom: 0.5em; }

}