/* Copyright 2012-2013 Metropolitan Life Insurance, All Rights Reserved */
/* .confirmError{
	background: url("../../img/error-close.png") no-repeat scroll 0 0px transparent;
    color: #D42932;
    font-size: 11px;
    height: 25px;
    margin-left: 220px;
    margin-top: -38px;
    padding-left: 20px;
    position: absolute;
    width: 200px;
} */

.dijitBorderContainerNoGutterPane#dijit_layout_ContentPane_1{
	top: 125px !important;
}

.inline {
	display: inline-block;
}

.contentBox, .phoenixSection {
	background: white;
	border-radius: 2px !important;
	box-shadow: 0 1px 0 0 #C6C6C6;
	border: 1px solid #D5D5D5;
	/*margin-bottom: 14px;*/
}

.phoenixHoldings > .phoenixSection:last-child {
    margin-bottom: 0;
}

.phoenixprofileCode {
	border: solid 2px #666666;
	border-radius: 10px;
	margin: 10px 0px 10px 0px;
	padding: 5px;
	padding-top: 15px;
	width:100%;
}

.pBot{
padding-bottom:20px;
}

.flLeft{
float:left;
}

.clr{
clear:both;
}

.flRight{
float:right;
}
.flNone{
float:none !important;
}
.mTop{
margin-top:10px;
}

.phoenixError {
	color: #D42932;
}

.confirmError{
	background: url("../../img/error-close.png") no-repeat scroll 0 13px transparent;
    color: #D42932;
    font-size: 11px;
    margin: -38px 0 0 217px;
    padding-left: 20px;
    position: absolute;
    width: 200px;
	height: 40px;
	display: table;
	line-height: 14px;
}
.newPasswordError{
	background: url("../../img/error-close.png") no-repeat scroll 0 0px transparent;
    color: #D42932;
    font-size: 11px;
    height: 25px;
    margin: -84px 0 0 217px;
    position: absolute;
    padding: 2px 0px 0px 20px; 
    width: 200px;
}

.oldPasswordError{
	background: url("../../img/error-close.png") no-repeat scroll 0 6px transparent;
    color: #D42932;
    font-size: 11px;
    height: 25px;
    margin: -153px 0px 0px 217px;
    padding: 2px 0px 0px 20px;
    position: absolute;
    width: 200px;
}

.lightbox .borderless {
	border: 0 none;
}	

/********************************************************
	ALL ABOVE CSS PROPERTIES ARE MOVED FROM PHOENIX.CSS
*********************************************************/
.snoopyContent .popupLeftPanel{
	border-right: none !important;
	width: auto !important;
}

.error{
	color:#D42932;
	font-size: 11px;
	line-height: 14px;
}

.buttonBar {
	margin: 12px 0px 40px 0px;
}

.phoenixSection.Style02 {
	border-color: #d5d5d5;
	box-shadow: 0px 4px 10px -2px rgba(128, 128, 128, 1);
	behavior: url('/edge/ui/public/res/polyfill/PIE.htc');
	font-size: 11px;
	padding: 12px 12px 8px;
}

.metlife.phoenix  .dijitSelectSelectedOption * {
	font-family: "FrutigerBold";
	font-weight: normal !important;
}

/********************************************************
					dijit Dialog
*********************************************************/

.metlife.phoenix .dijitDialogUnderlay {
	background: none repeat scroll 0 0 #000000;
}

/* dijit Dialog - lightbox edition */
/* FIXME lightbox styling may extend beyond just the Dialog.
   If that's in fact the case, more lightbox styling to its
   own CSS
 */
.lightbox.dijitDialog {
	border-radius: 3px;
	box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.4);
	background: #ffffff;
	border: none;
	max-width: 800px; /* FIXME smart or dumb? */
	behavior: url(/edge/ui/public/res/polyfill/PIE.htc);
	z-index:1001 !important;
	
	/* FIXME for now we'll position all Lightboxes absolute to the top
	 * of the page.  This presents issues where the dialog may scroll
	 * (or be positioned on show()) off the region of the page displayed
	 * in the browser viewport.  Setting the display to fixed will
	 * resolve the issue, but may screw up the PIE VML layer positioning.
	 * Ultimate fix is to extend the Dialog sizing/positioning algorithm
	 * but until then we'll go the fixed route....
	 * Gallery examples are broken using fixed....but
	 * see js-src/phoenix/tests/test_DialogOnLongPage.html for working
	 * example (need to identify exactly how many cases follow DialogOnLongPage
	 * vs. Gallery!!!!)
	 position: fixed !important;
	 top: 140px !important;
	 */
}
/*Tracker Item - 495 starts here*/
.lightboxForProfile.dijitDialog {
	border-radius: 3px;
	box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.4);	
	border: none;
	max-width: 800px;
	z-index:1001 !important;
}

.lightboxForProfile.dijitDialog .dijitDialogTitleBar {
	border: none;
	background: inherit;
	height: 0px;
	margin-bottom: 25px;
	padding: 0px;
}

.lightboxForProfile.dijitDialog .dijitDialogCloseIcon,
.lightboxForProfilet.dijitDialog .dijitDialogCloseIconHover {
	background-image: url("../img/icon-dialog-close.png");
	background-position: 0px 0px;
	height: 19px;
	width: 18px;
	top: 6px;
	right: 7px;
}

.lightboxForProfile.dijitDialog .dijitDialogPaneContent {
	background: transparent; 
	border: none;
	padding: 0px;
	height: auto !important;
	overflow: visible !important;
}
/*Tracker Item - 495 ends here*/

.lightbox.dijitDialog .dijitDialogTitleBar {
	/* lightboxes don't use the Dialog titleBar, but the close icon
	 * is a child of the titleBar so it needs to be displayable.
	 * HACK is to size is to 0px high, but set the margin tall enough
	 * so that the close icon appears.  The titleBar margin will most
	 * likely collapse w/ the paneContent margin (meaning it won't have
	 * any effect since hte paneContent topmargin is larger), but we'll 
	 * set it here anyway just in case we need to add a custom style
	 * to the paneContent
	 */
	border: none;
	background: inherit;
	height: 0px;
	margin-bottom: 25px;
	padding: 0px;
}
.dijitDialogCloseIcon:focus{
	outline: 2px solid #007CC2;
	outline-offset: 1px;
}
.lightbox.dijitDialog .dijitDialogCloseIcon,
.lightbox.dijitDialog .dijitDialogCloseIconHover {
	background-image: url("../img/icon-dialog-close.png");
	background-position: 0px 0px;
	height: 19px;
	width: 18px;
	top: 6px;
	right: 7px;
}
.lightbox.dijitDialog .dijitDialogPaneContent {
	background: transparent; 
	border: none;
	/* use margin instead of padding so content margins
	   will collapse (prevent additional vertical spacing)
	 */
	padding: 0px;
	height: auto !important;	  /*Make sure all contents display within overlay window*/
	overflow: visible !important; /* prevent Dialog from setting overflow to auto
	                                 which kills margin collapse */
}

/* FIXME this should be either in layout.css or lightbox should get
   it's own CSS.  For now we'll keep all the lightbox styles together.
 */
.lightboxed .mainContent,
.lightbox.dijitDialog .dijitDialogPaneContent .mainContent {
	display: block;
	float: none;
	width: auto;
	margin-right: 166px; /* 151px for rail (below) + 15 more padding */
}
x.lightboxed .mainContent:after,
x.lightbox.dijitDialog .dijitDialogPaneContent .mainContent:after {
	/* clearfix */
	content: ".";
	clear: right;
	display: block;
	height: 0px;
	overflow: hidden;
}
.lightboxed .marketingRail,
.lightbox.dijitDialog .dijitDialogPaneContent .marketingRail {
	border-left: 1px solid #D5D5D5;
	display: block;
	width: 135px;
	height: 190px; /* GETRIDOFME */
	float: right;
	margin: 0px;
	padding: 0px;
	padding-left: 15px;
}
.lightboxed .inputField,
.lightbox.dijitDialog .inputField {
	margin: 10px 0px 10px 0px;
}
.lightboxed .inputField label,
.lightbox.dijitDialog .inputField label {
	font-size: 12px;
	font-family: "FrutigerBold";
	display: block;
}

/* for lightboxes that contains IFRAMEs */
.lightbox.dijitDialog IFRAME {
	border: none;
	border-radius: 3px !important;
	float: left;
}
.metlife.phoenix.lightboxed, 
body.lightboxed {
	background: #ededed;
	margin: 0px;
	padding: 0px;
}
/* this isn't perfect since the margins of nested children
   may still collapse to a >0px margin...but the IFRAME
   contents will have to handle those nuanced cases
   themselves
 */
.metlife.phoenix.lightboxed > *:first-child, 
body.lightboxed > *:first-child {
	margin-top: 0px;
} 
.metlife.phoenix.lightboxed > *:last-child, 
body.lightboxed > *:last-child {
	margin-bottom: 0px;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}
/**** 	Need to be modified to make it more reusable ****/
/****	Phoenix Custom Dialog [css3pie IE Dialog compatible fixes ****/
.phoenixDialog.dijitDialog {
	background: none;
	border: none;
	box-shadow: none;	
	margin:0px;
	padding:0px;
}
.phoenixDialog.dijitDialog .dijitDialogCloseIcon, .phoenixDialog.dijitDialog .dijitDialogCloseIconHover {
    background-image: url("../img/icon-dialog-close.png");
    background-position: 0 0;
    height: 19px;
    right: 17px;
    top: 16px;
    width: 18px;
}
.phoenixDialog.dijitDialog .dijitDialogHolder {
	border-radius: 5px;
	box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.3);
	background: #ededed;
	background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 30%, #dedede 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(30%,#ffffff), color-stop(100%,#dedede));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 30%,#dedede 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 30%,#dedede 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 30%,#dedede 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 30%,#dedede 100%);
	border: none;
	behavior: url(/edge/ui/public/res/polyfill/PIE.htc);
	height: auto !important;
    margin: 10px !important;
	max-width: 800px; /* FIXME smart or dumb? */
	min-height: 212px;
    padding: 30px 25px 38px !important;
    width: 630px !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );
}

.phoenixDialog.dijitDialog .dijitDialogHolder .dijitDialogTitleBar {
    background: none;
    border: none;
    height: 0;
    padding: 0;
}
.phoenixDialog.dijitDialog .dijitDialogPaneContent {
	background: transparent; 
	border: none;
	height: auto !important;
	padding: 0px;
	overflow: visible !important;
}
/***** CMP[defect fixes] ******/

.phoenixSection.Style02 {
	border-radius: 3px;
	border-color: #CCC;
	box-shadow: 0px 2px 6px 0px rgba(128, 128, 128, 0.5);
}

html.dj_chrome .metlife.phoenix.checkProfile.lightboxed .checkProfileBegin .popupHeader {
	margin-bottom:17px;
}
.metlife.phoenix.checkProfile.lightboxed .checkProfileBegin .actionButtons {
	margin-top:21px;
}
html.dj_chrome .metlife.phoenix.checkProfile.lightboxed .checkProfileBegin .actionButtons, html.dj_gecko .metlife.phoenix.checkProfile.lightboxed .checkProfileBegin .actionButtons{
	margin-top:20px;
}
.errorHighLightBox {
	border: 1px solid #DDDDDD;
	border-radius: 10px 10px 10px 10px;
	padding: 10px;
	text-align: center;
}	
.phoenixDialog.dijitDialog{
	border: 0px solid transparent;
	z-index: 1001 !important;
}
/*Leaving Metonline Dialog*/
.leavingMetonlineExpe .cancelAndContinue p > a{float: left;margin-right: 16px;margin-top: 7px;}

.ChangePrimaryState .dijitDialogTitleBar { margin:0 !important;}

/** Profile Security Question Update Account lock Overlay Starts */

#profileSecQueAccLock {
	border: 0;
	//border-radius: 0;
	//box-shadow:none !important;
}

#profileSecQueAccLock .nextBtn button {
    background-image: none;
    background-color: #a0c323;
    border: 0;
    text-decoration: none;
    color: #fff;
    padding: 9px 20px;
    border-radius: 4px;
    height: 45px;
    cursor: pointer;
    margin-top:12%;
    clear:both;
}
#profileSecQueAccLock .row .contentSection
{
position:relative;
top:40px;
font-size:13px;
}
#profileSecQueAccLock.lightbox.dijitDialog
{
//max-width:460px;
}
#profileSecQueAccLock .actionItemsWithText {
    margin: 30px 0 0 !important;
    overflow: hidden;
}
#profileSecQueAccLock .popupTwoColumn .popupLeftPanel {
	min-height: 100px !important;
}
.newPassword .pwdtooltiptext{font-family: "Frutigerbold";
float: left;
line-height: 24px;}
.newPassword .obcTooltip{float:left}
/** Profile Security Question Update Account lock Overlay Ends*/