/*****************LOYALTY 2.0 Style*****************/
@-moz-document url-prefix() { 
    a:focus, button:focus{outline: 2px dotted #0096d6!important;}
}
a:focus, button:focus{otline: 2px dotted #0096d6; outline: 5px auto -webkit-focus-ring-color;  outline-offset: 0px;}
.xo_cart a{color:#0171ad; text-decoration:none}
.xo_cart a:hover{text-decoration:underline}

.lol2-points{display:block;clear: both; font-size: 14px; line-height: 16px; color: #5855B1!important; text-align: right; padding: 5px 0; white-space: nowrap}
.lol2-points:hover{text-decoration: none!important}
.lol2-points::before{content: ""; height: 16px; width: 22px; background: url(/wcsstore/HPStorefrontAssetStore/img/loyalty/loyalty2-icon.svg) no-repeat 0 0; display: inline-block; background-size: contain; overflow: visible; position: relative; top: 3px}

.nCartTooltip{position: relative}
.nCartTooltip .ttCont{opacity: 0; z-index: -1; position:absolute; font-size:12px; font-weight: 100; line-height:16px; color:#767676; cursor:text; background-color:#fff; padding:7px 10px; border:1px solid #ccc; width:230px; top: 28px; right: 0; text-align: left;  box-shadow:1px 1px 5px #ccc;text-decoration: none!important; white-space: normal}
.nCartTooltip:hover .ttCont{opacity: 1; z-index: 1;}

.nCartTooltip .ttCont:after, .nCartTooltip .ttCont:before {	bottom: 100%; right: 45%; border: solid transparent; content: " ";	height: 0;	width: 0; position: absolute; pointer-events: none;}
.nCartTooltip .ttCont:after { border-color: rgba(136, 183, 213, 0);	border-bottom-color: #fff;	border-width: 7px;	margin-left: -7px;}
.nCartTooltip .ttCont:before { border-color: rgba(204, 204, 204, 0); border-bottom-color: #ccc;	border-width: 9px;	margin-left: -9px; right: 44.5%}

.lol2-dontMiss{text-align: center}
.lol2-dontMiss .dm-Content{font-size: 20px; text-align: center; line-height: 30px; padding: 10px 0}
.lol2-dontMiss .dm-Content strong{font-weight: 400}
.lol2-dontMiss .dm-Content p{display: block; margin-top: 10px; font-size: 16px}
.lol2-dontMiss .dm-Content p a{font-weight: normal}
.lol2-dontMiss .dm-Content span.smalltc{margin: 20px 0; font-size: 14px; line-height: 16px; display: block}
.lol2-dontMiss .dm-Content span.smalltc a{display: block; padding-top: 3px;}

.lol2-dontMiss.ltDesk{display: block}
.dontMissContentforMob .lol2-dontMiss{display: none}

.lol2-rewards{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;box-shadow: 0px 0 5px #ccc; padding: 0 0 0 20px; margin: 0 0 0 -20px;margin-bottom:25px;}
.lol2-rewards .lolpadd{padding: 20px 0 10px}
.lol2-rewards h2{font-size: 18px; color: #5855B1; font-weight: normal; padding: 0 0 5px; margin: 0}
.lol2-rewards strong{font-size: 16px; line-height: 20px; font-weight: 400}
.lol2-rewards .lolrpoints{margin: 20px 0; font-size: 16px}
.lol2-rewards .lolrpoints > em{font-style: normal; font-size: 18px; display: inline-block; padding-right: 10px}
.lol2-rewards .lolrpoints > strong{font-weight: 400; color: #5855B1; font-size: 18px; display: inline-block; padding-left: 10px}
.lol2-rewards .lolrpoints > span{display: block; font-size: 12px; line-height: 16px; padding-top: 10px}
.lol2-rewards br{display: none}

.lol2-rewards  #rewardStep2 .lolrpoints > strong{color: #000}
.lol2-rewards  #rewardStep2 .pointsApplied{border-top:1px solid #ccc; display: block; padding: 20px 00; text-align: right}
.lol2-rewards  #rewardStep2 .pointsApplied .pointsReed{display: block; margin-bottom: 15px; }
.lol2-rewards  #rewardStep2 .pointsApplied .pointsReed > em{font-style: normal; font-size: 18px; display: inline-block; padding-right: 10px}
.lol2-rewards  #rewardStep2 .pointsApplied .pointsReed > strong{color: #5855B1; font-size: 18px; display: inline-block; padding-left: 10px; font-weight: normal}
.blueTextLinkArr{text-transform: uppercase;font-weight: normal}
.blueTextLinkArr:hover{color: #075782}
.blueTextLinkArr::before{content: " "; display: inline-block; width: 8px; height: 8px;  -ms-transform: rotate(45deg); transform: rotate(-135deg);border:1px solid #0171AD; border-left:none; border-bottom:none; margin: 0 2px 2px 3px}
.blueTextLinkArr:hover::after{border-color:#075782}

.lol2-rewards #rewardStep3 .pointsNotApplicable{display: block; text-align: left; font-weight: normal; line-height: 20px; margin-bottom: 40px}
.lol2-rewards #rewardStep3 .coverReward{display: block; overflow: hidden; position: relative}
.lol2-rewards #rewardStep3 .coverReward::before{content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .7; background-color: #fafafa}

.lol2-rewards .pointsRedeem{display:block; clear:both; overflow:hidden; position:relative;}
.lol2-rewards .pointsRedeem.pointsError .pointserrortxt{visibility: visible}
.lol2-rewards .pointsRedeem.pointsError input{border-color: #bf2026}
.lol2-rewards .pointsRedeem input{width:calc(100% - 32px)}
.lol2-rewards .pointsTitle{display: block; padding-bottom: 5px; text-align: left}
.lol2-rewards .pointsRedeem .applyPoints{position:absolute; right:15px; top:15px}
.lol2-rewards .pointsRedeem .clearPoints{position:absolute; right:15px; top:15px; display: none}
.lol2-rewards .pointsRedeem.pointsError .clearPoints{display: inline-block}
.lol2-rewards .pointsRedeem.pointsError .applyPoints{display: none}
.lol2-rewards .pointsRedeem .pointserrortxt{color: #bf2026; font-size: 14px;  padding: 5px 0 0; display: block; visibility: hidden; text-align: left}

/*call center style onlye*/
.agentMsg{color: #0000FF; font-size: 16px; line-height: 20px; font-weight: normal; margin: 30px 10px}

@media only screen and (max-width: 1024px) {
.nCartTooltip:hover:after{ top: auto; bottom: 35px }
    
}
@media only screen and (max-width: 642px) {
    .lol2-rewards, .lol2-rewards  #rewardStep2 .pointsApplied, .lol2-rewards #rewardStep3 .pointsNotApplicable{text-align: center}
    .lol2-rewards br{display: inline-block}

    
  /*  .nCartTooltip .ttCont{top: -60px; right: 0;box-shadow:0 0 5px #ccc;}
    .nCartTooltip .ttCont:after, .nCartTooltip .ttCont:before {	top: 100%;transform: rotate(180deg);}*/

}
/*fixing existing style*/
.xo_cart .xocart_total .xolt-cont{border-right: none}
.xo_cart .xocart_total .xort-cont{border-left: 1px solid #ccc;}
.xo_cart .xocart_total .xolt-cont .insidePadding{padding: 10px 0 10px 0}
.xo_cart .xocart_total .xort-cont .insidePadding{padding:  10px 0 10px 20px !important;}
.xo_cart .productrow .supportingtexts .textmsg{color: #bf2026}
.xo_cart .productrow{ display: inline-block; width: 100%; overflow: visible;}
.xo_cart .productrow .supportingtexts a.returnPolicy:hover:before{z-index: 9}
.ul.rewards-icon-list{margin-bottom: 0;}

.xo_cart .productrow .cartHelptt{position: relative}
.xo_cart .productrow .cartHelptt:hover:after{ content:attr(data-cartHelp); position:absolute; font-size:12px; line-height:16px; color:#000; cursor:text; background-color:#fff; padding:5px 10px; border:1px solid #ccc; margin-top:15px; width:150px; font-weight: 100; right: 0}
@media only screen and (max-width: 1200px) and (min-width: 1025px){
    .lol2-points{font-size: 12px}
}
@media only screen and (max-width: 860px) and (min-width: 719px){
  .xo_cart .xocart_total .xort-cont{border-left:none}  
  .lol2-dontMiss.ltDesk{display: none}
  .dontMissContentforMob .lol2-dontMiss{display: block}
  .lol2-dontMiss .dm-Content span.smalltc a{display: inline-block; padding-left: 3px; padding-top: 0}
    .lol2-points{font-size: 12px}
}
@media only screen and (max-width: 720px){
    .xo_cart .qtypriceCont {display: inline-block;width: 85%;}
} 
@media only screen and (max-width: 642px){
   .xo_cart .xocart_total .xort-cont{border-left:none}  
   .lol2-dontMiss.ltDesk{display: none}
   .dontMissContentforMob .lol2-dontMiss{display: block}
        
    .lol2-dontMiss .dm-Content span.smalltc a{display: inline-block; padding-left: 3px; padding-top: 0}
}
@media only screen and (max-width: 560px){
    .xo_cart .qtypriceCont {display: inline-block;width: 80%;}
}
@media only screen and (max-width: 420px){
    .xo_cart .qtypriceCont {display: inline-block;width: 75%;}
    .lol2-points{font-size: 12px}
}

/*MODAL POP UP*/
.reveal-modal-bg{z-index:999;background:rgba(0, 0, 0, 0.7);}
.modalBorder{z-index: 9999;}
.reveal-modal.full {padding: 0;background-color: transparent;border: none;box-shadow: none;overflow: visible;}

#hpRewardsJoinModal .flex-video{overflow:visible;}
#hpRewardsJoinModal{width:80%;margin-left:-40%}
#hpRewardsJoinModal .modalInsidePadding{width:500px;padding:32px 71px;margin: 0 auto;background-color: #FFF;overflow: hidden;position: relative;text-align: center;box-shadow:#D6D6D6;border-radius:7px;}
#hpRewardsJoinModal .modalInsidePadding .modalJoinRewards{float:left;position:relative;width:100%;}

#hpRewardsJoinModal h3{float:left;position:relative;font-size:36px;line-height:42px;font-weight:normal;padding:16px 0 16px 0;color:#000;margin:0;width:100%;}
#hpRewardsJoinModal .hello{float:left;position:relative;font-size:14px;line-height:18px;letter-spacing:0.01px;padding:16px 0 3px 0;margin:0;color:#000;text-align:left;font-weight:100;width:100%;}
#hpRewardsJoinModal .uName{float:left;position:relative;font-size:22px;line-height:22px;letter-spacing:0.02px;padding:0;margin:0;color:#000;text-align:left;font-weight:normal;width:100%;}
#hpRewardsJoinModal .subTitle{font-size:18px;line-height:28px;font-weight:100;color:#000;margin:0;padding:0;width:100%;float:left;position:relative;}
#hpRewardsJoinModal .ucWrapper{float:left;width:100%;position:relative;padding:32px 0 20px 0;}
#hpRewardsJoinModal .chkLyJoin{padding-bottom:20px;}
#hpRewardsJoinModal .chkLyJoin label{font-size:14px;line-height:18px;font-weight:100;color:#000;}
#hpRewardsJoinModal input[type="checkbox"]{display:none;}
#hpRewardsJoinModal input[type="checkbox"]:checked + label span.chekbox{background:url(/wcsstore/HPStorefrontAssetStore/img/loyalty/xo_checkbox_checked.png) no-repeat;}
#hpRewardsJoinModal input[type="checkbox"] + label span.chekbox{float:left;width:18px;height:18px;margin:0;vertical-align:middle;background:url(/wcsstore/HPStorefrontAssetStore/img/loyalty/xo_checkbox_unchecked.png) no-repeat;cursor:pointer;}
#hpRewardsJoinModal input[type="checkbox"] + label span.chktext{padding-left:10px;font-size:14px;line-height:18px;letter-spacing:0.01px;font-weight:100;display:table;vertical-align:middle;text-align:left;}
#hpRewardsJoinModal input[type="checkbox"] + label span.chktext a{color:#0171AD;text-decoration:none;}
#hpRewardsJoinModal input[type="checkbox"] + label span.chktext a:hover,#hpRewardsJoinModal input[type="checkbox"] + label span.chktext a:focus{text-decoration:underline;outline:none;color:#075782;}
#hpRewardsJoinModal input[type="checkbox"] + label span.chekbox:focus,#hpRewardsJoinModal input[type="checkbox"] + label span.chekbox:hover{/*outline:none;*/box-shadow:none;}
#hpRewardsJoinModal input[type="checkbox"]:disabled + label span.chekbox{background:url(/wcsstore/HPStorefrontAssetStore/img/loyalty/xo_checkbox_unchecked.png) no-repeat;cursor:not-allowed;}
#hpRewardsJoinModal input[type="checkbox"]:disabled + label span.chktext{color:#aaa;}
#hpRewardsJoinModal .pgmDesc{float:left;position:relative;font-size:14px;line-height:18px;letter-spacing:0.01px;padding:0 0 8px 0;margin:0;color:#000;text-align:left;font-weight:100;width:100%;}
#hpRewardsJoinModal .pgmDesc a{color:#0171AD;text-decoration:none;}
#hpRewardsJoinModal .pgmDesc a:hover,#hpRewardsJoinModal .pgmDesc a:focus{color:#075782;text-decoration:underline;outline:none;}

#hpRewardsJoinModal .modalInsidePadding .buttoncontWrap{float:left;position:relative;width:100%;}
#hpRewardsJoinModal .modalInsidePadding .buttoncont{float:left;position:relative;cursor:pointer;width:100%;font-size:16px;line-height:16px;font-weight:normal;letter-spacing:0.03px;text-transform:uppercase;background-color:#2C3038;color:#FFF;padding:11px 0;text-align: center;border:1px solid #2C3038;}
#hpRewardsJoinModal .modalInsidePadding .buttoncont:hover{background-color:#5A5A5A !important; text-decoration:underline !important; border-color:#5A5A5A !important;}
#hpRewardsJoinModal .modalInsidePadding .buttoncont:focus{background-color:#5A5A5A !important; text-decoration:underline !important; border-color:#5A5A5A !important;}
#hpRewardsJoinModal .modalInsidePadding .buttoncont.sec{background-color:transparent;color:#2C3038;border:1px solid #2C3038;}
#hpRewardsJoinModal .modalInsidePadding .buttoncont.sec:hover{background-color:#E6E6E6 !important;text-decoration:underline !important;}
#hpRewardsJoinModal .modalInsidePadding .buttoncont.sec:focus{background-color:#E6E6E6 !important;text-decoration:underline !important;}
#hpRewardsJoinModal .modalInsidePadding .buttoncont.disabled,#hpRewardsJoinModal .modalInsidePadding .buttoncont.disabled:hover,#hpRewardsJoinModal .modalInsidePadding .buttoncont.disabled:focus{cursor:not-allowed;background-color:#B7B8B8 !important; text-decoration:none !important; border-color:#B7B8B8 !important; pointer-events: none;}

#hpRewardsJoinModal .modalInsidePadding .buttoncont.sec.disabled,#hpRewardsJoinModal .modalInsidePadding .buttoncont.sec.disabled:hover,#hpRewardsJoinModal .modalInsidePadding .buttoncont.sec.disabled:focus{cursor:not-allowed;background-color:transparent !important; text-decoration:none !important;color:#B7B8B8 !important;border-color:#B7B8B8 !important; pointer-events: none;}
#hpRewardsJoinModal .modalInsidePadding .buttoncontWrap p{font-size:16px;line-height:18px;letter-spacing:0.02px;font-weight:100;text-align:left;width:100%;padding:0;margin:0;color:#000;padding: 24px 0 12px 0;float:left;position:relative;}

#hpRewardsJoinModal .modalInsidePadding .regUser.buttoncont{margin-top:24px;}
#hpRewardsJoinModal .modalInsidePadding .keepLearning{font-size:16px;line-height:30px;font-weight:normal;color:#0171AD;text-transform:uppercase;margin-top:32px;width:100%;float:left;}
#hpRewardsJoinModal .modalInsidePadding .keepLearning:hover,#hpRewardsJoinModal .modalInsidePadding .keepLearning:focus{color:#075782;text-decoration:underline;outline:none;}
.reveal-modal .close-reveal-modal img{top:16px;right:16px;}
#hpRewardsJoinModal .modalInsidePadding #rewardsIcon:focus,#hpRewardsJoinModal .modalInsidePadding #rewardsIcon:hover{outline:none;box-shadow:none;}

@media only screen and (max-width:800px) {
  .reveal-modal.full {width:92%;left:44%;}
  #hpRewardsJoinModal .modalInsidePadding{width:100%;max-width:500px;padding:40px;}
}

@media only screen and (max-width:640px) {
  #hpRewardsJoinModal .modalInsidePadding{max-width:296px;padding:28px 12px;}
  #hpRewardsJoinModal h3 {font-size: 23px;line-height: 27px;padding: 8px 0 17px 0;}
  #hpRewardsJoinModal .hello{padding:12px 0 5px 0;}
  #hpRewardsJoinModal .uName{font-size:20px;line-height:20px;letter-spacing:0.02px;}
  #hpRewardsJoinModal .subTitle{font-size:14px;line-height:20px;padding-top:9px;}
  #hpRewardsJoinModal .ucWrapper{padding:28px 0 12px 0;}
  #hpRewardsJoinModal input[type="checkbox"] + label span.chktext{text-align:left;font-size:14px;line-height:20px;letter-spacing:0.01px;}
  #hpRewardsJoinModal .modalInsidePadding .buttoncontWrap p{padding-top:20px;font-size:14px;line-height:18px;letter-spacing:0.01px;text-align:center;}
  #hpRewardsJoinModal .modalInsidePadding .buttoncont{width: 100%;}
  #hpRewardsJoinModal .modalInsidePadding .keepLearning{margin-top:28px;}
  #hpRewardsJoinModal .modalInsidePadding .regUser.buttoncont{margin-top:20px;}
}

.secureCheckout .wrapGiftInputs{width:auto;}
@media only screen and (max-width: 1279px) and (min-width: 1025px){
  .secureCheckout .lcSecPayment .couponLt{width: calc(100% - 40px)}
  .secureCheckout .lcSecPayment .giftRt{width: calc(100% - 40px);}
  #couponSection{width: calc(100% - 40px);}
  .secureCheckout .wrapGiftInputs{width:auto;}
  .secureCheckout .lcSecPayment .couponWrapper .inputWrapper{width: auto;}
  .secureCheckout .lcSecPayment .giftRt .applyPos{width: auto;}
}

@media only screen and (max-width: 1024px) and (min-width: 720px){
  .secureCheckout .wrapGiftInputs{width:100%;}
}

@media only screen and (max-width:719px){
  .secureCheckout .lcSecPayment .couponLt{width: calc(100% - 40px)}
  .secureCheckout .lcSecPayment .giftRt{width: calc(100% - 40px);}
  #couponSection{width: calc(100% - 40px);}
  .secureCheckout .wrapGiftInputs{width:100%;}
  .secureCheckout .lcSecPayment .couponWrapper .inputWrapper{width: 100%;}
  .secureCheckout .lcSecPayment .giftRt .applyPos{width: auto;}
  .secureCheckout .checkinlinenowrap{display:block;}
}


.secureCheckout .rewardsContainer{width:100%;margin-bottom:30px;}
.secureCheckout .rewardsContainer .rewardsWrapper{float:left;width:calc(100% - 34.5px);padding: 25px 15px 20px 19.5px;background-color: #f2f2f2;}
.secureCheckout .rewardsContainer .rewardsTitle{font-size: 20px;font-weight: 100;padding-bottom: 20px;text-transform: uppercase;width: 100%;}
.secureCheckout .rewardsContainer .rewardsSection{float:left;position:relative;width:100%;padding:12px 0 18px 0;}
.secureCheckout .rewardsContainer .rewardsSection div{display:inline-block;font-size:16px;line-height:24px;font-weight:100;}
.secureCheckout .rewardsContainer .rwEquals{padding:0 20px;}
.secureCheckout .rewardsContainer .rwApplyOrChange{line-height:18px!important;letter-spacing:0.3px;font-weight:normal;padding-left:74px;text-align:right;}
.secureCheckout .rewardsContainer .rwApplyOrChange a{color:#0171AD;text-transform:uppercase;font-weight:normal;}
.secureCheckout .rewardsContainer .rwApplyOrChange a:hover{text-decoration:underline;}
.secureCheckout .rewardsContainer .rewardsSection br{display:none;}
.secureCheckout .couponRewardError{float: left;position: relative;width: 100%;font-size: 16px;font-weight: 100;line-height: 20px;top:5px;height:50px;}
.secureCheckout .rewardsContainer .rwApplyOrChange a span{position: relative;display: inline-block;padding:4px;transform: rotate(-45deg);-webkit-transform: rotate(135deg);border: 1px solid #0171AD;border-width: 0px 1px 1px 0;top:-1px;left:0px;}
.secureCheckout .rewardsContainer .rwOnlyApply{line-height:18px!important;letter-spacing:0.3px;font-weight:normal;padding-left:74px;text-align:right;}
.secureCheckout .rewardsContainer .rwOnlyApply a{color:#0171AD;text-transform:uppercase;font-weight:normal;}
.secureCheckout .rewardsContainer .rwOnlyApply a:hover{text-decoration:underline;}
.secureCheckout .rewardsContainer .rwOnlyApply a span{position: relative;display: inline-block;padding:4px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);border: 1px solid #0171AD;border-width: 0px 1px 1px 0;top:-1px;left:0px;}

.xo_cart #hpRewardsJoinModal a.close-reveal-modal {
	background:none;
}


@media only screen and (max-width: 1024px){
  .secureCheckout .rewardsContainer .rewardsSection{padding:12px 0 0 0;}
}

@media only screen and (max-width: 1279px) and (min-width: 938px){
  .secureCheckout .couponRewardError{top:14px;}
}

@media only screen and (max-width: 1024px) and (min-width: 720px){
  .secureCheckout .rewardsContainer .rewardsWrapper{padding: 20px 10px;width:calc(100% - 20px);}
  .secureCheckout .lcSecPayment .rewardsTitle{font-size: 18px;}
}

@media only screen and (max-width: 719px){
  .secureCheckout .lcSecPayment .rewardsTitle{font-size: 18px;}
  .secureCheckout .couponRewardError{height:auto;}
}

@media only screen and (max-width: 620px) and (min-width: 581px){
  .secureCheckout .rewardsContainer .rwApplyOrChange{padding-left:43px;}
  .secureCheckout .rewardsContainer .rwOnlyApply{padding-left:43px;}
}

@media only screen and (max-width: 580px){
  .secureCheckout .rewardsContainer .rwApplyOrChange{display:block!important;padding-top:30px;line-height: 16px !important;}
  .secureCheckout .rewardsContainer .rwOnlyApply{display:block!important;padding-top:30px;line-height: 16px !important;}
  .rewardsSection.rwPointsCont .rwApplyOrChange{padding-top:0px;}
  .secureCheckout .rewardsContainer .rewardsSection br{display:inline-block;}
  .secureCheckout .rewardsContainer .rewardsSection{text-align:center;}
  .secureCheckout .rewardsContainer .rwEquals{position: relative;top: -12px;}
  .secureCheckout .rewardsContainer .rwApplyOrChange a span { top: -2px;}
  .secureCheckout .rewardsContainer .rwOnlyApply a span { top: -2px;}

@media only screen and (max-width: 420px){
.rewardsSection.rwPointsCont .rwPoints{float:left;}
.rewardsSection.rwPointsCont .rwApplyOrChange{padding-right: 8px !important;float:right !important;text-align:right !important;padding-top:30px;}
.rewardsSection.rwPointsCont .rwOnlyApply{padding-right: 8px !important;float:right !important;text-align:right !important;padding-top:30px;}
}

.rewardsSection.rwPointsCont .rwPoints{float: left;width: 50%;text-align: left;}
.rewardsSection.rwPointsCont .rwApplyOrChange{width: calc(50% - 8px);padding-left: 8px;float: left;text-align: left;line-height:24px !important;}
.rewardsSection.rwPointsCont .rwOnlyApply{width: calc(50% - 8px);padding-left: 8px;float: left;text-align: left;line-height:24px !important;}