/* Copyright 2012-2013 Metropolitan Life Insurance, All Rights Reserved */

/********************************************************
	Global customizations of Dijit-based widgets
*********************************************************/

.metlifeViewer .label {
	display: inline-block;
	width: 8em;
}
.metlifeViewer .value {
	display: inline-block;
	width: 13em;
}
.show{
	display:block;
}

.hide{
	display:none;
}
.labels{
	margin: 15px 0;
}

.img{
background: url(../img/grp_img.png) no-repeat;
display: inline-block;
    width: 103px;
    height:59px;
    padding-right:5px;
} 

.img_q{
background: url(../img/question.png) no-repeat;
width:16px;
height:16px;
} 

.img_q span{
margin-left:20px;
}

.passwordRequirements {
	font-size: 11px;
	margin: -1px 0px 0px -1px;
}

.userNameRequirements {
	font-size: 11px;
}

.confpasswordMeterWrapper .phoenixSection.Style02 {
	padding: 10px; 
	position: relative;
	margin-left: 17px;
	width: 182px;
	/*top:154px; */
	
}

/********************************************************
		Password & UserName Strength
*********************************************************/

.passwordMeterSection, .userNameRuleSection {
	position: relative;
	margin-left: 17px;
	width: 182px;
	/*top:94px;*/
}
.entryModeUpdate .passwordMeterSection {
	margin-top: 46px;
}
.passwordMeterThumb,.userNameRuleThumb {
	background-image: url("../img/bdr-arrow-l.png");
	left: -14px;
	position: absolute;
	top: 2px;
	width: 14px; height: 34px;
}
.passwordMeterThumb{
	background-image: url("../img/bdr-arrow-P.png");
}
.passwordMeter label, .userNameRequirements label {
	display: block;
	font-family: "FrutigerBold";
    padding-bottom: 4px;
}
.passwordMeter .passwordStrength {
	margin: 0px 0px 10px -7px;
	line-height: 1.1em;
	visibility: hidden;
}
.passwordMeter.passwordIsInvalid .passwordStrength {
	display: none;
}
.passwordMeter.passwordFocused .passwordStrength {
	display: none;
	visibility: visible;
}
.passwordMeter.passwordFocused .passwordMeterError {
	display: none;
}

.userNameRuleBox {
	display: inline-block;
	margin: -17px 0px 0px 3px;
	position: absolute;
	width: 260px;
	vertical-align: top;
	z-index: 100;
}


.regUserNameAvailableMsg {
	background: url("../../img/tick_mark.png") no-repeat scroll 18px 10px transparent;
	color: #62A642;
	display: inline-block;
	font-size: 11px;
	padding: 12px 0px 0px 42px;
	position: absolute;
	width: 200px;
	word-wrap: break-word;
}

.metlife.phoenix.beneRegBody .regUserNameAvailableMsg {
	background: url("../../img/tick_mark-b.png") no-repeat scroll 18px 10px transparent;
	color: #51833c;
	display: inline-block;
	font-size: 11px;
	padding: 12px 0px 0px 42px;
	position: absolute;
	width: 200px;
	word-wrap: break-word;
}

.PolicyNoStyleArrow {
	background-image: url("../img/bdr-arrow-l.png");
	left: -14px;
	position: absolute;
	top: 2px;
	width: 14px; height: 34px;
}


.userNameRuleValid {
	list-style-image: url("../img/icon-list-valid.png");
}

.userNameRuleInValid{
	color:#D42932;
	list-style-image: url('../img/icon-list-violation.png');
}

.regUserNameNotAvailablemsg {
	background: url("../../img/error-close.png") no-repeat scroll 0 7px transparent;
    color: #D42932;
    font-size: 11px;
    margin: -32px 0 0 217px;
    padding-left: 20px;
    position: absolute;
    width: 225px;
	height: 28px;
	display: table;
    word-wrap: break-word;
    line-height: 14px;
}
.regUserNameNotAvailablemsg span {
	display: table-cell;
	vertical-align: middle;
}
/********************************************************
					Stoplight
*********************************************************/

.passwordMeter .passwordStoplight {
	background: #dedede;
	line-height: 10px;
	margin: 0px;
	padding: 0px;
}
.passwordMeter .passwordStoplightInner {
	display: inline-block;
	height: 10px;
	width: 0%;
}
.passwordMeter.passwordGrade-F .passwordStoplightInner,
.passwordMeter.passwordGrade-D .passwordStoplightInner {
	width: 33%;
	background: #ED1B2E;
}
.passwordMeter.passwordGrade-C .passwordStoplightInner {
	width: 66%;
	background: #F8A810;
}
.passwordMeter.passwordGrade-B .passwordStoplightInner,
.passwordMeter.passwordGrade-A .passwordStoplightInner {
	width: 100%;
	background: #67A935;
}
.passwordMeter.passwordGrade-F .passwordStrengthDescriptionText,
.passwordMeter.passwordGrade-D .passwordStrengthDescriptionText {
	color: #ED1B2E;
}
.passwordMeter.passwordGrade-C .passwordStrengthDescriptionText {
	color: #F8A810;
}
.passwordMeter.passwordGrade-B .passwordStrengthDescriptionText,
.passwordMeter.passwordGrade-A .passwordStrengthDescriptionText {
	color: #67A935;
}
.passwordMeter .passwordStrengthDescriptionIcon {
	display: inline-block;
	height: 22px;
	width: 22px;
}
.passwordMeter.passwordGrade-B .passwordStrengthDescriptionIcon,
.passwordMeter.passwordGrade-A .passwordStrengthDescriptionIcon {
	background: url('../img/icon-pwd-strong.png');
}

/********************************************************
				password requirements
*********************************************************/
	
.passwordMeter .passwordreqnote {
	font-size:10px;
	
}
.passwordMeter ul,.userNameRequirements ul {
	margin: 0 0 0 12px;
	padding-left: 3px;
}
.passwordMeter ul li,.userNameRequirements ul li{
	padding-bottom: 4px;
}
.passwordMeter ul{
	margin: 0;
	padding-left: 0;
}
.passwordMeter ul li{
	margin-left:18px;
	font-family:'Noto Sans';
	font-size:13px;
}
.passwordEntryWidget li.ruleIsValid {
list-style:none;
	background: url('../img/tick_mark.png') 0px 0px no-repeat;
	padding-left:25px;
	margin-left:0px !important;
}
.metlife.phoenix.beneRegBody .passwordEntryWidget li.ruleIsValid {
list-style:none;
	background: url('../img/tick_mark-b.png') 0px 0px no-repeat;
	padding-left:25px;
	margin-left:0px !important;
}
.passwordEntryWidget li.ruleInValid {
list-style:none;
	color:#D42932;
	background: url('../img/error-close.png') 0px 0px no-repeat;
	padding-left:25px;
	margin-left:0px !important;
}
.confpasswordMeterWrapper .passwordMeterSection li{margin-left:18px}
.passwordMeterWrapper .passwordMeterSection.phoenixSection.Style02 {
	background:#F2F2F2;
}
.confpasswordMeterWrapper .passwordMeterSection.phoenixSection.Style02 {
	background:#F2F2F2;
}
.metlife.phoenix.claro .passwordMeterWrapper{
	display: inline-block;
    vertical-align: top;
    width: 250px;
}


.metlife.phoenix.claro .passwordChangeWidget.tempPasswordPage .buttonBar {
	/* This is to display button bar 24px below the text field (as given in style guide) */
	margin-top: .75em;
}

/** 
passwordMeterWrapper is being changed here for correct display in various pages.
TODO - If possible, have common styles.
**/

.metlife.phoenix.claro .passwordChangeWidget .passwordMeterWrapper{
	display: inline-block;
	left: 202px;
    position: absolute;
    vertical-align: top;
    width: 270px;
    z-index:1;
    top: 0px;
}

.metlife.phoenix.claro .passwordChangeWidget .confpasswordMeterWrapper {
	display: inline-block;
	left: 202px;
    position: absolute;
    vertical-align: top;
    width: 270px;
}

.ansBox{
	margin-top: 8px;
	width: 358px;
}

.MyProfile .passwordInValid,.tempPasswordPage .passwordInValid {
	margin-top: 76px !important;
}

.MyProfile .passwordValid,.tempPasswordPage .passwordValid {
    margin-top: 75px !important;
}

.forgotPwdReset .passwordValid,.forgotPwdReset .passwordInValid {
	margin-top: 20px;
}

.passwordValid {
	background: url("../../img/tick_mark.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin-top: 15px;
    padding-left: 15px;
    position: static;
    width: 20px;
}
.metlife.phoenix.beneRegBody .passwordValid {
	background: url("../../img/tick_mark-b.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin-top: 15px;
    padding-left: 15px;
    position: static;
    width: 20px;
}
.passwordInValid {
	background: url("../../img/error-close.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin-top: 15px;
    padding-left: 15px;
    position: static;
    width: 20px;
}

.oldpasswordValid {
	background: url("../../img/tick_mark.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin: -169px 0px 0px 200px;
    padding-left: 15px;
    position: absolute;
    width: 20px;
}
.metlife.phoenix.beneRegBody .oldpasswordValid {
	background: url("../../img/tick_mark-b.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin: -169px 0px 0px 200px;
    padding-left: 15px;
    position: absolute;
    width: 20px;
}
.oldpasswordInValid {
	background: url("../../img/error-close.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin: -169px 0px 0px 200px;
    padding-left: 15px;
    position: absolute;
    width: 20px;
}
.newpasswordInValid {
	background: url("../../img/error-close.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin: -109px 0px 0px 200px;
    padding-left: 15px;
    position: absolute;
    width: 20px;
}
.newpasswordValid, .confirmPwdValid {
	background: url("../../img/tick_mark.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 13px;
    margin: -85px 0px 0px 218px;
    position: absolute;
    width: 16px;
}
.metlife.phoenix.beneRegBody .newpasswordValid, .confirmPwdValid {
	background: url("../../img/tick_mark-b.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 13px;
    margin: -85px 0px 0px 218px;
    position: absolute;
    width: 16px;
}
.confirmPwdValid {
    margin-top: -26px;
}
.cfmpasswordInValid {
	background: url("../../img/error-close.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin: -49px 0px 0px 200px;
    padding-left: 15px;
    position: absolute;
    width: 20px;
}

.cfmpasswordValid {
	background: url("../../img/tick_mark.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin: -49px 0px 0px 200px;
    padding-left: 15px;
    position: absolute;
    width: 20px;
}
.metlife.phoenix.beneRegBody .cfmpasswordValid {
	background: url("../../img/tick_mark-b.png") no-repeat scroll 18px 10px transparent;
    display: inline-block;
    height: 25px;
    margin: -49px 0px 0px 200px;
    padding-left: 15px;
    position: absolute;
    width: 20px;
}
.passwordUpdateValidation {
    background: url("../../img/!-img.png") no-repeat scroll 2.3% 50% #FFECB4;
    border: 1px solid #E8BF60;
    display:inline-block;
    font-size: 13px;
    height: 13px;
    margin: 10px 0px 10px 0px;
    padding: 10px 10px 10px 26px;
    width: 450px;
}

.confpasswordMeterWrapper ul {
	padding-left: 0;
	margin: 0;
}

/********************************************************
					tooltip css starts
*********************************************************/

.metlife.phoenix .dijitTooltipContainer {
      background: none repeat scroll 0 0 #429ED2;
      behavior: url('/edge/ui/public/res/polyfill/PIE.htc');
      border: 1px solid #266097;
      border-radius: 3px;
      box-shadow: 0 2px 6px rgba(3, 3, 3, 0.4);
      color: #FFFFFF;
      line-height: 16px;
      padding: 12px;
      width: 196px;
      word-wrap: break-word;
}

.metlife.phoenix .dijitTooltipConnector {
      background-image: url("../img/tooltip-connector.png") !important;
      background-repeat: no-repeat;
      border: 0 none;
      height: 25px !important;
      width: 25px !important;
      z-index: 2;
}
.metlife.phoenix.beneRegBody .dijitTooltipConnector {
      background-image: url("../img/tooltip-connector-b.png") !important;
}
.metlife.phoenix.myClaimsBody .dijitTooltipConnector {
      background-image: url("../img/tooltip-connector-b.png") !important;
}
.metlife.phoenix .dijitTooltipLeft .dijitTooltipConnector {
      background-position: -48px 0;
      height: 25px !important;
      right: 0;
      width: 15px !important;
}

.metlife.phoenix .dijitTooltipRight .dijitTooltipConnector {
      background-position: 3px 0;
      height: 25px !important;
      left: 0;
      width: 15px !important;
}

.metlife.phoenix .dijitTooltipAbove .dijitTooltipConnector {
	background-position: -62px 0;
	width: 30px !important;
	bottom: 0px;
}

.metlife.phoenix .dijitTooltip {
	z-index: 1;	
}

.metlife.phoenix.PHPpages .dijitTooltipContainer {
      width: 276px;
}

.metlife.phoenix.PHPpages .dijitTooltipContainer.phoenixTooltip {
	width: 196px;
}

.metlife.phoenix.PHPpages .dijitTooltipBelow{
	margin-left: -12px;

}
.metlife.phoenix.PHPpages .dijitTooltipBelow .dijitTooltipConnector {
    background-position: -17px 0 !important;
    left:10px !important;
}
/********************************************************
					tooltip css ends
*********************************************************/

.popupWidgetAuto.passwordMeterThumb, .userNameRuleThumb{
    background-image: url("../img/bdr-arrow-l.png");
    height: 34px;
    left: -14px;
    position: absolute;
    top: 15px ! important;
    width: 14px;

}
.popupWidgetAuto.passwordMeterThumb{
	background-image: url("../img/bdr-arrow-P.png");
}

.popupWidgetAuto .passwordMeterWrapper .passwordMeterThumb {
    background-image: url("../img/bdr-arrow-P.png");
    height: 34px;
    left: -14px;
    position: absolute;
    top: 14px;
    width: 14px;
}
.popupWidgetAuto .passwordChangeWidget .confpasswordMeterWrapper{
    display: inline-block;
    left: 202px;
    position: absolute;
    top: 76px;
    vertical-align: top;
    width: 270px;
}

.phoenix .phoenixSpinnerMessage {
	text-align: center;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border: none;
	color: white;
	font-weight: bold;
	text-shadow: #000000 0px 2px 2px;
	z-index: 1200;
}
.obcTooltip{position: relative;display:inline}
.passwordField  .obcTooltip .dijitTooltipRight{
top: -62px !important;;
left: 28px;
}
body.metlife.phoenix .passwordField .obcTooltip .dijitTooltipRight .dijitTooltipConnector{
top: 59px !important;
}