<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}</style><style type="text/css">
header.signinpage {
background: none repeat scroll 0 0 #f0f0f0 !important;
padding: 24px 0 24px 10px;
}
header.signinpage>div {
max-width: 960px;
margin: 0 auto;
}
@media all
and (min-width: 1024px)
{
header.signinpage {
background: none repeat scroll 0 0 #f0f0f0 !important;
padding: 24px 0 24px 10px;
}
header.signinpage>div {
max-width: 960px;
margin: 0 auto;
}
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="dns-prefetch" href="https://d.monetate.net"><link rel="dns-prefetch" href="https://sb.monetate.net"><iframe src="javascript:false" style="width: 0px; height: 0px; border: 0px;"></iframe><iframe src="javascript:false" style="width: 0px; height: 0px; border: 0px;"></iframe><script type="text/javascript" async="" charset="utf-8" src="//ad.atdmt.com/m/a.js;m=11147200806464;cache=0.5459102438762784?" id="utag_179"></script><script type="text/javascript" async="" charset="utf-8" src="//connect.facebook.net/en_US/fbds.js" id="utag_172"></script><script type="text/javascript" async="" charset="utf-8" src="/bizcontent/foresee/foresee-trigger.js" id="utag_89"></script><script type="text/javascript" async="" charset="utf-8" src="//www.googleadservices.com/pagead/conversion_async.js" id="utag_181"></script><script type="text/javascript" async="" charset="utf-8" src="//ad.atdmt.com/m/a.js;m=11147200806464;cache=0.7872680551372468?" id="utag_179"></script><script type="text/javascript" async="" charset="utf-8" src="https://secure-ds.serving-sys.com/SemiCachedScripts/ebOneTag.js" id="ebOneTagUrlId"></script><script type="text/javascript" async="" charset="utf-8" src="//connect.facebook.net/en_US/fbds.js" id="utag_172"></script><script type="text/javascript" async="" charset="utf-8" src="//bat.bing.com/bat.js" id="utag_168"></script><script type="text/javascript" async="" charset="utf-8" src="/bizcontent/foresee/foresee-trigger.js" id="utag_89"></script><script type="text/javascript" async="" id="tealium-tag-7001" src="https://ssl.google-analytics.com/ga.js"></script><script src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.js" type="text/javascript" async=""></script><script type="text/javascript" async="" src="https://sb.monetate.net/js/1/a-815a421c/p/cvs.com/404235/g"></script><script src="/webcontent/customerCheckout/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
var monetateT = new Date().getTime();
(function() {
var p = document.location.protocol;
if (p == "http:" || p == "https:") {
var m = document.createElement('script'); m.type = 'text/javascript'; m.async = true; m.src = (p == "https:" ? "https://s" : "http://") + "b.monetate.net/js/1/a-815a421c/p/cvs.com/" + Math.floor((monetateT + 2976028) / 3600000) + "/g";
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(m, s);
}
})();
</script>
<!-- End Monetate tag. -->
<script>
window.envName="";
$(document).ready(function(){
window.envName = $("#envName").html();
if (! window.envName || window.envName == "" )
window.envName = $("#envName").text();
});
</script>
<script type="text/javascript" src="https://d.monetate.net/trk/4/s/a-815a421c/p/cvs.com/1960307831-0?mr=t1448912680&mi='2.1203452957.1455242648769'&mt=!n&cs=!t&e=!(gr,viewPage,gt)&pt=checkout&cv=(favorite_store:true,uSeg_fa286745:t,uSeg_fa286756:t,uSeg_fa286770:t,uSeg_fa294336:t,uSeg_fa297402:t,uSeg_fa297412:t,uSeg_fa301343:t,uSeg_fa318914:t,uSeg_fa322091:t,uSeg_fa322110:t,uSeg_fa342740:t,uSeg_fa350401:t)&r=''&sw=798&sh=600&sc=24&j=!f&u='https://www.cvs.com/checkout/fs/checkout.jsp%3F_requestid%3D868980%23/'&fl=!t&hvc=!t&eoq=!t" charset="utf-8" async=""></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.34.js?utv=201511140519" id="utag_cvs.cvs_34"></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.24.js?utv=201510231717" id="utag_cvs.cvs_24"></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.89.js?utv=201510231717" id="utag_cvs.cvs_89"></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.78.js?utv=201602112158" id="utag_cvs.cvs_78"></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.152.js?utv=201510231717" id="utag_cvs.cvs_152"></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.168.js?utv=201601071949" id="utag_cvs.cvs_168"></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.172.js?utv=201510231717" id="utag_cvs.cvs_172"></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.174.js?utv=201510231717" id="utag_cvs.cvs_174"></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.179.js?utv=201512031523" id="utag_cvs.cvs_179"></script><script type="text/javascript" async="" charset="utf-8" src="//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.181.js?utv=201601071949" id="utag_cvs.cvs_181"></script><style type="text/css">#oo_feedback_fl_spacer { display: block; height: 1px; position: absolute; top: 0; width: 100px; }
.oo_feedback_float { width: 100px; height: 50px; overflow: hidden; font: 12px Tahoma, Arial, Helvetica, sans-serif; text-align: center; color: #252525; cursor: pointer; z-index: 999997; position: fixed; bottom: 5px; border: 1px solid #cccccc; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; right: 10px; -webkit-transition: -webkit-transform 0.3s ease; }
.oo_feedback_float .screen_reader { color: transparent; display: block; position: relative; height: 0; width: 0; line-height: 0; overflow: hidden; }
.oo_feedback_float .olUp { width: 100%; height: 100%; background: url(/oo_float_icon.gif) center 10px no-repeat; text-align: center; padding: 31px 0 5px 0; position: relative; z-index: 2; filter: alpha(opacity=100); opacity: 1; transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; }
.oo_feedback_float .olUp img { margin-bottom: 5px; }
.oo_feedback_float .oo_transparent { display: block; background: white; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; opacity: 0.8; filter: alpha(opacity=80); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
.oo_feedback_float:hover .oo_transparent { opacity: 1.0; filter: alpha(opacity=100); }
.oo_feedback_float:hover .olUp { display: block; opacity: 0; filter: alpha(opacity=0); }
.oo_feedback_float .fbText { display: block; }
.oo_feedback_float .olOver { display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; min-height: 50px; z-index: 2; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; }
.oo_feedback_float .olOver span { display: block; padding: 10px 5px; }
.oo_feedback_float:hover .olOver { opacity: 1.0; filter: alpha(opacity=100); top: 0; }
.oo_cc_wrapper { left: 0; padding: 0; position: fixed; text-align: center; top: 25px; width: 100%; z-index: 999999; }
.oo_cc_wrapper .screen_reader { color: transparent; display: block; position: relative; height: 0; width: 0; line-height: 0; overflow: hidden; }
.oo_cc_wrapper span { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }
.oo_cc_wrapper .iwrapper { background-color: white; margin: 0 auto; position: relative; width: 535px; z-index: 2; box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px; -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; }
.oo_cc_wrapper iframe { position: relative; border: none; width: 100%; z-index: 4; }
.oo_cc_wrapper .oo_cc_close { position: absolute; display: block; background: white; height: 20px; width: 20px; border: 1px solid #cccccc; cursor: pointer; right: -12px; top: -9px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: background 0.5s; -moz-transition: background 0.5s; -webkit-transition: background 0.5s; -o-transition: background 0.5s; font: 14px/20px Tahoma, Arial, Helvetica, sans-serif; text-align: center; z-index: 5; color: #252525; text-decoration: none; }
.oo_cc_wrapper .oo_cc_close:hover { background: #eeeeee; }
.oo_bar { padding-bottom: 22px; }
#oo_bar { cursor: pointer; color: #252525; border-top: 1px solid #cccccc; background: #ffffff; bottom: 0; display: block; font: 12px Tahoma, Arial, Helvetica, sans-serif; height: 22px; left: 0; line-height: 22px; position: fixed; text-align: left; width: 100%; z-index: 999997; -webkit-transition: -webkit-transform 0.3s ease; transition: background 0.5s; -moz-transition: background 0.5s; -webkit-transition: background 0.5s; -o-transition: background 0.5s; }
#oo_bar:hover { background: #eeeeee; }
#oo_bar .screen_reader { color: transparent; display: block; position: relative; height: 0; width: 0; line-height: 0; overflow: hidden; }
#oo_bar span { background: url(/oo_bar_icon.gif) left no-repeat; display: block; margin: 0 15px; height: 100%; padding-left: 17px; }
#oo_tab { background-color: #CC0000; border: 2px solid #ffffff; display: block; position: fixed; top: 40%; padding: 55px 0px 55px 0px; _height: 110px; _padding: 0px; _top: 45%; width: 35px; z-index: 999995; cursor: pointer; }
#oo_tab span { bottom: 15px; _bottom: 5px; display: block; background: url(/oo_tab_icon.gif) no-repeat; height: 9px; position: absolute; width: 9px; }
#oo_tab div { background-image: url(/oo_tab.png); _background-image: url(/oo_tabie6.png); background-repeat: no-repeat; position: absolute; display: block; height: 100%; left: 0; top: 0; width: 100%; }
#oo_tab.wcag a { background: url(/oo_tab.png) no-repeat; background-repeat: no-repeat; background-position: center bottom; border: none; outline: none; position: absolute; display: block; bottom: 15px; left: -6px; top: 0; width: 100%; }
#oo_tab.wcag img { border: none; outline: none; display: block; position: absolute; left: 0; top: -10px; }
#oo_tab .screen_reader { color: transparent; display: block; position: relative; height: 0; width: 0; line-height: 0; overflow: hidden; }
.oo_tab_left { left: -13px; border-radius: 0px 9px 9px 0px; -moz-border-radius: 0px 9px 9px 0px; -webkit-border-radius: 0px 9px 9px 0px; transition: left 0.5s; -moz-transition: left 0.5s; -webkit-transition: left 0.5s; -o-transition: left 0.5s; background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#eeeeee), to(white)); background-image: -webkit-linear-gradient(left, #eeeeee, white); background-image: -moz-linear-gradient(left, #eeeeee, white); background-image: -ms-linear-gradient(left, #eeeeee, white); background-image: -o-linear-gradient(left, #eeeeee, white); background-image: linear-gradient(left, #eeeeee, white); }
.oo_tab_left span { right: 6px; }
.oo_tab_left div { background-position: 6px -10px; }
.oo_tab_left:hover { left: -5px; }
.oo_tab_right { right: -13px; border-radius: 9px 0px 0px 9px; -moz-border-radius: 9px 0px 0px 9px; -webkit-border-radius: 9px 0px 0px 9px; transition: right 0.5s; -moz-transition: right 0.5s; -webkit-transition: right 0.5s; -o-transition: right 0.5s; background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#B70000), to(#CC0000)); background-image: -webkit-linear-gradient(left, #B70000, #CC0000); background-image: -moz-linear-gradient(left, #B70000, #CC0000); background-image: -ms-linear-gradient(left, #B70000, #CC0000); background-image: -o-linear-gradient(left, #B70000, #CC0000); background-image: linear-gradient(left, #B70000, #CC0000); -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 3px; box-shadow: rgba(0, 0, 0, 0.7) 0 0 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 3px; }
.oo_tab_right span { left: 7px; }
.oo_tab_right div { background-position: -6px -10px; }
.oo_tab_right:hover { right: -5px; }
.oo_tab_ie_right { border-right: none !important; right: 1px; width: 25px !important; }
.oo_tab_ie_right:hover { right: 6px; width: 30px !important; }
.oo_tab_ie_right { border-right: none !important; right: 1px; width: 25px !important; }
.oo_tab_ie_right:hover { right: 6px; width: 30px !important; }
#oo_tab.oo_tab_ie67_right.wcag { overflow: hidden !important; right: 0px !important; width: 26px !important; }
#oo_tab.oo_tab_ie67_right.wcag:hover { right: 0px !important; width: 31px !important; }
#oo_tab.oo_tab_ie67_right.wcag a { background: none; z-index: 1; }
#oo_tab.oo_tab_ie67_right.wcag .screen_reader { bottom: 15px; display: block; background: url(/oo_tab.png) no-repeat; height: 9px; width: 9px; position: absolute; left: 7px; top: auto; z-index: 9999; }
#oo_container { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 999999; }
html body #oo_invitation_prompt { background: white; box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px; -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 8px; -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 8px; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; color: #252525; font: 14px/20px Tahoma, Arial, san-serif; line-height: 20px; margin: 50px auto; text-align: left; padding: 20px 10px; position: relative; width: 350px; z-index: 999999; }
html body #oo_invitation_prompt h1 { font-size: 24px; font-weight: 100; margin-bottom: .6em; }
html body #oo_invitation_prompt p { margin-bottom: 1.5em; }
html body #oo_invitation_prompt #prompt_buttons { padding-bottom: 15px; position: relative; z-index: 5; }
html body #oo_invitation_prompt #oo_launch_prompt { text-decoration: none; color: white; border: 1px solid #006633; padding: 5px 11px; margin-right: 17px; }
html body #oo_invitation_prompt #oo_no_thanks { text-decoration: none; color: #252525; border: 1px solid #cccccc; padding: 5px 11px; margin-right: 18px; }
html body #oo_ol_brand { display: block; height: 22px; }
#oo_ol_brand { background: url(/oo_inv_opinionlab.png) bottom right no-repeat; border-top: 1px solid #cccccc; }
#oo_invitation_prompt a { background: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: background 0.5s; -moz-transition: background 0.5s; -webkit-transition: background 0.5s; -o-transition: background 0.5s; }
#oo_invitation_prompt a:hover { background: #eeeeee; }
a#oo_launch_prompt { background: #006633; }
a#oo_launch_prompt:hover { background: #009966; }
#oo_close_prompt { position: absolute; display: block; background: white; height: 20px; width: 20px; border: 1px solid #cccccc; cursor: pointer; right: 5px; top: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: background 0.5s; -moz-transition: background 0.5s; -webkit-transition: background 0.5s; -o-transition: background 0.5s; font: 14px/20px Tahoma, Arial, Helvetica, sans-serif; text-align: center; }
#oo_close_prompt:hover { background: #eeeeee; }
#oo_close_prompt .screen_reader { color: transparent; display: block; position: relative; height: 0; width: 0; line-height: 0; overflow: hidden; }
@media only screen and (max-device-width: 480px) { /* Styles */
html body #oo_invitation_prompt { -webkit-text-size-adjust: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 90%; padding: 3%; } }
@media all and (-webkit-min-device-pixel-ratio: 2) { #oo_ol_brand { background: url(/[email protected]) bottom right no-repeat; -webkit-background-size: 85px 13px; } }
#oo_overlay, #oo_invitation_overlay { background: black url(/oo_loading.gif) 50% 80px no-repeat; display: block; height: 1000%; left: 0; position: fixed; top: 0; width: 100%; z-index: 999998; opacity: 0.5; filter: alpha(opacity=50); }
#oo_overlay.no_loading, #oo_invitation_overlay.no_loading { background: black; opacity: 0.5; filter: alpha(opacity=50); }
@media print { #oo_bar, .oo_feedback_float, #oo_tab { display: none; } }</style><script type="text/javascript" src="/bizcontent/foresee/foresee-surveydef.js?build=13"></script></head><body><div id="envName" style="display:none;">PROD</div>
<!--[if lt IE 7]><html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html lang="en" xmlns:ng="https://angularjs.org" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<!--<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>CVS pharmacy | Guest Checkout</title>
<link rel="stylesheet" href="/webcontent/guestCheckout/lib/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="/webcontent/guestCheckout/lib/html5-boilerplate/css/main.css">
<!-- Latest compiled and minified CSS -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> -->
<link href="/webcontent/guestCheckout/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/webcontent/guestCheckout/css/main.css">
<!--[if IE 8]>
<link rel="stylesheet" href="/webcontent/guestCheckout/css/ie8quirks.css">
<!-->
<script src="/webcontent/guestCheckout/lib/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lte IE 7]>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
document.createElement('ng-class');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<style>
.search-filter input[type="checkbox"] {
display: inline-block !important;
}
.search-filter input[type="checkbox"] + label:before {
display:none !important;
}
.radio input[type="radio"] {
display: inline-block !important;
}
.radio input[type="radio"] + label:before {
display:none !important;
}
</style>
<script src="lib/angular-ui-utils/ie-shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.3/es5-shim.min.js"></script>
<![endif]-->
<!--[if gte IE 9]>
<script src="/webcontent/guestCheckout/lib/jquery/dist/jquery.min.js"></script>
<script src="/webcontent/guestCheckout/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script src="/webcontent/guestCheckout/lib/jquery/dist/jquery.min.js"></script>
<script src="/webcontent/guestCheckout/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- <![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="/webcontent/guestCheckout/lib/selectivizr/selectivizr.js"></script>
<![endif]-->
<header class="signinpage">
<div>
<img src="/webcontent/images/signin/CVS_Pharma_logo.jpg" alt="Loading Logo">
</div>
</header>
<script>
if (isAppCheckout()) {
document.getElementsByClassName('signinpage')[0].style.display = 'none';
}
function isAppCheckout () {
var USER_STRINGS = ['CVS_ANDROID_APP', 'CVS_iPHONE_APP', 'CVS_iPAD_APP'];
if ((getCookie('FROM_NATIVE') + '').toLowerCase() === 'yes') return true;
for (var i = 0, l = USER_STRINGS.length; i < l; i++) {
if (navigator.userAgent.toLowerCase().indexOf(USER_STRINGS[i].toLowerCase()) >=0) return true;
}
return false;
}
// from https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
function getCookie (sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"
+ encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
}
</script>
<div id="oneClickCustomerCheckout" class="ng-scope">
<div ng-http-loader="" template="/webcontent/guestCheckout/partials/spinner.html" class="ng-isolate-scope"><!-- ngInclude: template --><div class="http-loader__wrapper ng-scope ng-hide" ng-include="template" ng-show="showLoader"><div class="ng-scope">
<div class="spinner-box">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
<h2 style="color:white;">LOADING</h2>
</div>
</div>
<div class="modal-backdrop fade in"></div>
</div></div></div>
<!-- ngView: --><div class="page ng-scope" ng-class="pageClass" ng-view=""><div ng-show="isBopus" class="ng-scope ng-hide">
<div class="container content hidden-xs">
<div class=" col-md-12" ng-class="{'col-sm-9':isIpadApp}">
<div class="row">
<div class="col-sm-12 col-md-12 backgroundClr mobileBCCView font-size-13px width-bcc-content width-bcc-content-header" style="padding:15px; margin-top:5px;" ng-class="{'width-bcc-content-header':!isIpadApp,'width-bcc-content-ipad-app':isIpadApp}">
<p ng-show="bopusHeader" ng-bind-html="bopusHeader" class="ng-binding ng-hide"></p>
<p ng-show="!bopusHeader" class="">Please enter your name, email address and phone number. If someone else is picking up your order, enter his or her name instead ( but leave in your email and phone number). This person will need to show a valid government-issued photo ID pick up the order. By providing this information, you authorize us to contact you by email and phone (including automated calls) concerning this offering and other CVS/pharmacy<sup>®</sup> products and services.
</p>
</div>
</div>
</div>
</div>
</div>
<div resize="" class="container content fix removePadding ng-scope" style="overflow-y:hidden;">
<div class="col-lg-7 col-md-7 col-sm-7" ng-class="desktopView == false ? '' : ''">
<div ng-show="isBopus" class="mar-LR ng-hide">
<div class="content visible-xs">
<div class=" col-md-12" ng-class="{'col-sm-9':isIpadApp}">
<div class="row">
<div class="col-sm-12 col-md-12 backgroundClr mobileBCCView font-size-13px" style="padding:15px; margin-top:5px;width: 100% !important;">
<p ng-show="bopusHeader" ng-bind-html="bopusHeader" class="ng-binding ng-hide"></p>
<p ng-show="!bopusHeader" class="">Please enter your name, email address and phone number. If someone else is picking up your order, enter his or her name instead ( but leave in your email and phone number). This person will need to show a valid government-issued photo ID pick up the order. By providing this information, you authorize us to contact you by email and phone (including automated calls) concerning this offering and other CVS/pharmacy<sup>®</sup> products and services.
</p>
</div>
</div>
</div>
</div>
</div>
<error-msg><div class="row mrgnlft ng-hide" ng-show="errors.length>0">
<div class="col-md-11 col-sm-11 col-xs-11" style="margin-left: 5px;">
<div class="row error-box remove-margin-left" id="errorBox">
<div class="col-md-1 col-sm-1 col-xs-1">
<img src="/webcontent/customerCheckout/img/alert.png" class="alert-img">
</div>
<div class="col-md-11 col-sm-11 col-xs-11">
<!-- ngRepeat: error in errors -->
</div>
</div>
</div>
</div>
</error-msg>
<!-- error list -->
<!-- Mobile View Partial Start -->
<div class="visible-xs">
<div class="row ng-hide" ng-show="!errorListDisplayFlag">
<div class="col-xs-12 col-sm-12" style="border: solid 1px; border-color:red white;">
<div class="row">
<div class="col-xs-2 col-sm-2">
<span class="glyphicon glyphicon-warning-sign" style="color:red;font-size:xx-large;margin-top:15px;"></span>
</div>
<div class="col-xs-10 col-sm-10">
<div class="row" style="margin-top:15px;">
<div class="col-sm-10 col-xs-10">
<b>Your City,State and ZIP Code don't match.Please check them and try again.</b>
</div>
</div>
<div class="row" style="margin-top:15px;">
<div class="col-sm-10 col-xs-10">
<b>The credit card number you entered is invalid.Please check it and try again.</b>
</div>
</div>
<div class="row" style="margin-top:15px; margin-bottom:15px;">
<div class="col-sm-10 col-xs-10">
<b>Please enter a credit card to pay for the items in your basket that are not FSA eligible, or adjust your order accordingly.</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile View Partial End -->
<div class="row">
<div class="col-md-12 col-sm-12">
<!-- <div class="row addPadding15RL"> - Dinesh -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h2 ng-show="shipTo" class="">Shipping & Payment <span ng-show="placeOrder && desktopView && tickMarkSymbol" style="margin-right:1px;" class="ng-hide"><img src="/webcontent/customerCheckout/img/checkmarkheader.png"></span></h2>
<h2 ng-show="isBopus && !shipTo" class="ng-hide">Your Store Pickup Information</h2>
</div>
</div>
</div>
</div>
<div ng-show="serviceReturnFlag" class="">
<div class="row remove-marginLR">
<div class="col-md-12 col-sm-12">
<div class="row">
<div class="col-md-8 col-sm-11 removePadding">
<!-- <form class="form-horizontal addPadding15RL" novalidate name="guest"> - Dinesh -->
<form class="form-horizontal ng-pristine ng-invalid ng-invalid-required" novalidate="" name="guest" onsubmit="sendPlaceOrderRequest()">
<div ng-show="shipTo" class="">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 style="font-size:18px !important;">Ship To</h4>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': firstName.length != firstName, 'cInputFocusFalse': firstName.length == firstName}">First Name</label>
<input type="text" id="ifirstName" class="form-control ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-required-remove ng-valid-remove-active ng-invalid ng-invalid-add-active ng-valid-required-remove-active ng-invalid-required" placeholder="First Name" name="fname" ng-model="firstName" ng-required="shipTo" ng-class="{ 'has-error' : guest.fname.$invalid && guest.fname.$error.required && !guest.fname.$pristine }" blur-valid="" required="required" style="">
</div>
<div class="col-md-12 col-sm-12 col-xs-12 visible-xs removePadding">
<label class="control-label error ng-hide" ng-show="(guest.fname.$invalid && guest.fname.$error.required && !guest.fname.$pristine)"> Please enter First name.</label>
</div>
</div>
<div class="col-md-6 inline col-sm-6 col-xs-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': lastName.length != lastName, 'cInputFocusFalse': lastName.length == lastName}">Last Name</label>
<input type="text" class="form-control ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-required-remove ng-valid-remove-active ng-invalid ng-invalid-add-active ng-valid-required-remove-active ng-invalid-required" placeholder="Last Name" name="lname" ng-model="lastName" ng-required="shipTo" ng-class="{ 'has-error' : guest.lname.$invalid && guest.lname.$error.required && !guest.lname.$pristine }" blur-valid="" required="required" style="">
</div>
<div class="col-md-12 col-sm-12 col-xs-12 visible-xs removePadding">
<label class="control-label error ng-hide" ng-show="(guest.lname.$invalid && guest.lname.$error.required && !guest.lname.$pristine)"> Please enter Last name.</label>
</div>
</div>
<div class="col-md-12 col-sm-12 visible-lg visible-md visible-sm removePadding">
<label class="control-label error padding-left-15px ng-hide" ng-show="(guest.fname.$invalid && guest.fname.$error.required && !guest.fname.$pristine) || (guest.lname.$invalid && guest.lname.$error.required && !guest.lname.$pristine)"> Please enter a <span ng-show="guest.fname.$invalid && guest.fname.$error.required && !guest.fname.$pristine" class="ng-hide">First </span> <span ng-show="(guest.fname.$invalid && guest.fname.$error.required && !guest.fname.$pristine) && (guest.lname.$invalid && guest.lname.$error.required && !guest.lname.$pristine)" class="ng-hide"> and </span> <span ng-show="guest.lname.$invalid && guest.lname.$error.required && !guest.lname.$pristine" class="ng-hide">Last </span> name.</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': streetAddress.length != streetAddress, 'cInputFocusFalse': streetAddress.length == streetAddress}">Street Address</label>
<!--<div class="aptBldg" ng-show="aptBldgFlag" ng-click="aptBldgFieldFlag=!aptBldgFieldFlag" element-focus="aptBldgAddNewAddressFSA">+Apt/Bldg</div>-->
<input type="text" class="form-control alpha-text ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-required-remove ng-valid-remove-active ng-invalid ng-invalid-add-active ng-valid-required-remove-active ng-invalid-required" placeholder="Street Address" name="streetAddr" ng-model="streetAddress" ng-required="shipTo" ng-class="{ 'has-error' : guest.streetAddr.$invalid && guest.streetAddr.$error.required && !guest.streetAddr.$pristine }" ng-focus="aptBldgFuncFocus()" blur-valid="" required="required" style="">
<label class="control-label error ng-hide" ng-show="guest.streetAddr.$invalid && guest.streetAddr.$error.required && !guest.streetAddr.$pristine"> Please enter a Street Address.</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': streetAddress1.length != streetAddress1, 'cInputFocusFalse': streetAddress1.length == streetAddress1}">Apartment, Building, Floor, Etc</label>
<input type="text" name="aptstreetAddr" class="form-control alpha-text pad60 ng-pristine ng-valid" placeholder="Apartment, Building, Floor and etc" ng-model="streetAddress1" ng-class="{ 'has-error' : guest.aptstreetAddr.$invalid && guest.aptstreetAddr.$error.required && !guest.aptstreetAddr.$pristine }" ng-focus="aptBldgFlag=!aptBldgFlag" id="aptBldgAddNewAddressFSA" blur-valid="">
<span class="apartmentText"><i>optional</i></span>
<label class="control-label error ng-hide" ng-show="guest.aptstreetAddr.$invalid && guest.aptstreetAddr.$error.required && !guest.aptstreetAddr.$pristine"> Please enter Apartment, Building, Floor and etc.</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-xs-12 col-sm-5">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': cityValue.length != cityValue, 'cInputFocusFalse': cityValue.length == cityValue}">City</label>
<input type="text" class="form-control ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-required-remove ng-valid-remove-active ng-invalid ng-invalid-add-active ng-valid-required-remove-active ng-invalid-required" ng-change="updateShippingClicked=false" placeholder="City" name="city" ng-model="cityValue" ng-required="shipTo" ng-class="{ 'has-error' : guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine || updateShippingClicked}" blur-valid="" required="required" style="">
</div>
<div class="col-md-12 col-xs-12 col-sm-12 visible-xs removePadding">
<label class="control-label error ng-hide" ng-show="(guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine || updateShippingClicked)"> <span>Please enter a City</span>
</label>
</div>
</div>
<div class="col-md-4 col-xs-4 col-sm-4 inline pad-rt-0">
<div class="form-group visible-lg visible-md visible-sm visible-xs">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': stateid != 0, 'cInputFocusFalse': stateid == 0}">State</label>
<div class="selectBox">
<select id="stateName" style="background-position: 90% !important;" class="form-control ng-pristine ng-valid ng-valid-required" ng-model="stateid" ng-init="stateid='0'" name="stateName" ng-required="shipTo" ng-class="{ 'selectError' : showErr == 0 || updateShippingClicked}" blur-valid="" ng-change="checkStateSelection();updateShippingClicked=false;" ng-blur="clickStateSelection()" required="required">
<option value="0">State</option>
<!-- ngRepeat: state in states --><option ng-repeat="state in states" value="AA" class="ng-binding ng-scope">AA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AE" class="ng-binding ng-scope">AE</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AK" class="ng-binding ng-scope">AK</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AL" class="ng-binding ng-scope">AL</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AP" class="ng-binding ng-scope">AP</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AR" class="ng-binding ng-scope">AR</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AS" class="ng-binding ng-scope">AS</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AZ" class="ng-binding ng-scope">AZ</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="CA" class="ng-binding ng-scope">CA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="CO" class="ng-binding ng-scope">CO</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="CT" class="ng-binding ng-scope">CT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="DC" class="ng-binding ng-scope">DC</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="DE" class="ng-binding ng-scope">DE</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="FL" class="ng-binding ng-scope">FL</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="GA" class="ng-binding ng-scope">GA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="GU" class="ng-binding ng-scope">GU</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="HI" class="ng-binding ng-scope">HI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="IA" class="ng-binding ng-scope">IA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="ID" class="ng-binding ng-scope">ID</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="IL" class="ng-binding ng-scope">IL</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="IN" class="ng-binding ng-scope">IN</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="KS" class="ng-binding ng-scope">KS</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="KY" class="ng-binding ng-scope">KY</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="LA" class="ng-binding ng-scope">LA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MA" class="ng-binding ng-scope">MA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MD" class="ng-binding ng-scope">MD</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="ME" class="ng-binding ng-scope">ME</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MI" class="ng-binding ng-scope">MI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MN" class="ng-binding ng-scope">MN</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MS" class="ng-binding ng-scope">MS</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MO" class="ng-binding ng-scope">MO</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MT" class="ng-binding ng-scope">MT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NE" class="ng-binding ng-scope">NE</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NV" class="ng-binding ng-scope">NV</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MP" class="ng-binding ng-scope">MP</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NH" class="ng-binding ng-scope">NH</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NJ" class="ng-binding ng-scope">NJ</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NM" class="ng-binding ng-scope">NM</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NY" class="ng-binding ng-scope">NY</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NC" class="ng-binding ng-scope">NC</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="ND" class="ng-binding ng-scope">ND</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="OH" class="ng-binding ng-scope">OH</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="OK" class="ng-binding ng-scope">OK</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="OR" class="ng-binding ng-scope">OR</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="PA" class="ng-binding ng-scope">PA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="PR" class="ng-binding ng-scope">PR</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="RI" class="ng-binding ng-scope">RI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="SC" class="ng-binding ng-scope">SC</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="SD" class="ng-binding ng-scope">SD</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="TN" class="ng-binding ng-scope">TN</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="TX" class="ng-binding ng-scope">TX</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="UT" class="ng-binding ng-scope">UT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="VT" class="ng-binding ng-scope">VT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="VA" class="ng-binding ng-scope">VA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WA" class="ng-binding ng-scope">WA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WV" class="ng-binding ng-scope">WV</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WI" class="ng-binding ng-scope">WI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="VI" class="ng-binding ng-scope">VI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WY" class="ng-binding ng-scope">WY</option><!-- end ngRepeat: state in states -->
</select>
<span class="newCaret visible-xs hidden-lg hidden-md hidden-sm"></span>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 visible-xs removePadding">
<label class="control-label error ng-hide" ng-show="(isVisited == 1 && stateid == 0 && showErr ==0 )|| updateShippingClicked "> <span>Please enter a State</span>
</label>
</div>
<!--<div class="dropdown dropdown-toggle form-control stateText visible-xs" ng-class="{'has-error':updateShippingClicked}">-->
<!--{{-->
<!-- selectedState===""?'State':selectedState -->
<!--}}-->
<!--<ul class="dropdown-menu stateDimensionLimit" role="menu" aria-labelledby="dropdownText">-->
<!--<li role="presentation" ng-repeat="state in statesMobile" ng-model="stateid" name="stateName"><a role="menuitem" tabindex="-1" ng-click="selectState('state',state)">-->
<!--{{state.abv}} </a>-->
<!--</li>-->
<!--</ul>-->
<!--<div class="glyphicon glyphicon-chevron-down pull-right CCDropDown stateIcon"></div>-->
<!--</div>-->
</div>
<div class="col-md-3 col-xs-8 col-sm-3 inline">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': zipCode.length != zipCode, 'cInputFocusFalse': zipCode.length == zipCode}">ZIP Code</label>
<input type="text" id="zipCodeId" ng-change="updateShippingClicked=false" pattern="\d*" class="visible-xs visible-md visible-sm visible-lg form-control ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-required-remove ng-valid-remove-active ng-invalid ng-invalid-add-active ng-valid-required-remove-active ng-invalid-required" placeholder="ZIP" name="zip" ng-model="zipCode" ng-required="shipTo" ng-class="{ 'has-error' : guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine || updateShippingClicked }" maxlength="5" blur-valid="" zipcode="" required="required" style="">
<!-- <input type="text" pattern="\d*" class="visible-xs form-control" placeholder="ZIP" name="zipMobile" ng-model="zipCode" required ng-class="{ 'has-error' : guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine }" ng-blur="getDetailsByZIPMobile()" blur-valid zipcode> -->
</div>
<div class="col-xs-12 col-sm-12 visible-xs removePadding">
<label class="control-label error ng-hide" ng-show="(guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine || updateShippingClicked)"> Please enter a Zip
</label>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 visible-lg visible-md visible-sm removePadding">
<!-- <label class="control-label error" ng-show="(guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine) || (guest.stateName.hasVisited && guest.stateName.$invalid && stateid == 0) || (guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine)"> Please enter a <span ng-show="guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine"> City</span><span ng-show="guest.stateName.$invalid && guest.stateName.$error.required && !guest.stateName.$pristine">, State</span> <span ng-show="((guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine) && (guest.stateName.$invalid && guest.stateName.$error.required && !guest.stateName.$pristine)) || ((guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine) && (guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine)) || ((guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine) && (guest.stateName.$invalid && guest.stateName.$error.required && !guest.stateName.$pristine))"> and </span> <span ng-show="guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine">Zip Code</span>
</label> -->
<label class="control-label error padding-left-15px ng-hide" ng-show="(guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine) || (isVisited == 1 && stateid == 0 && showErr ==0 ) || (guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine)"> Please enter a <span ng-show="guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine" class="ng-hide"> City</span><span ng-show="(guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine) && (isVisited == 1 && stateid == 0)" class="ng-hide">, </span><span ng-show="isVisited == 1 && stateid == 0 && showErr== 0" class="ng-hide">State</span> <span ng-show="(((guest.city.$invalid && guest.city.$error.required && !guest.city.$pristine)||(isVisited == 1 && stateid == 0 && showErr== 0))&&(guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine))" class="ng-hide"> and </span> <span ng-show="guest.zip.$invalid && guest.zip.$error.required && !guest.zip.$pristine" class="ng-hide">ZIP Code</span>
</label>
</div>
</div>
<!-- Mobile View -->
<div class="row visible-xs">
<div class="col-xs-12 col-sm-12 marginTop borderstyleTotal zipPanel ng-hide" ng-show="restricted" style="margin-left: -12px;width: 111%;">
<div class="row addPadding15RL marginTop">
<div class="col-xs-10 col-sm-10 borderstyle">
<div class="row modal-title paa add-padding-10px-TB">
<span class="col-sm-2 col-xs-2 glyphicon glyphicon-warning-sign removePadding" style="color: rgb(216, 71, 67); font-size: x-large; margin-top: 15px;">
</span> <span class="col-sm-10 col-xs-10 thickFont removePadding">One
or more items in your cart can't be delivered to this ZIP
Code.</span>
</div>
</div>
<div class="col-xs-2 col-sm-2 ">
<span class="remove-icon" ng-click="removeInlinePanel()">X</span>
</div>
</div>
<!-- <div class="row" ng-show=!isNoMobileZIPItemsAvailable>-->
<div class="row">
<div class="col-md-12 removePadding">
<div class="list-group">
<!-- ngRepeat: item in zipItems -->
</div>
</div>
</div>
<h5 class="thickFont" style="cursor:pointer;color:rgb(109,109,109)" ng-click="showReason=!showReason"> Why not?</h5>
<h6><b ng-show="showReason" class="ng-hide">This item is prohibited by law from shipping to the following locations: AB, AL, FL, MA, MI, TX.</b></h6>
<div class="row">
<div class="col-sm-12 col-xs-12">
<h5>Please choose one of the following options:</h5>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12">
<button class="btn btn-danger btn-lg mobileupdatebutton" type="button" ng-click="updateShippingAddress()">Update Shipping Address</button>
<h5>All items in your order must ship to this address.</h5>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12">
<button class=" btn btn-default btn-lg mobiledeletebutton thickFont" type="button" ng-click="deleteMobileZIPItems()">Delete Item
</button>
</div>
</div>
</div>
</div>
<!-- Mobile View End -->
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': phoneNumber.length != phoneNumber, 'cInputFocusFalse': phoneNumber.length == phoneNumber}">Phone Number</label>
<input type="tel" class="form-control ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-required-remove ng-valid-remove-active ng-invalid ng-invalid-add-active ng-valid-required-remove-active ng-invalid-required" ng-class="{'has-error' : guest.phone.$invalid && guest.phone.$error.required && !guest.phone.$pristine}" placeholder="Phone" name="phone" ng-model="phoneNumber" ng-required="shipTo" format-phone="" blur-valid="" maxlength="16" placeholder-change="(123) 456-7890" required="required" style="">
<!-- <input type="tel" class="form-control visible-xs" maxlength="16" ng-class="{'has-error' : guest.mphone.$invalid && guest.mphone.$error.required && !guest.mphone.$pristine}" placeholder="Phone Number" name="mphone" ng-model="mphoneNumber" format-phone blur-valid> -->
<label class="control-label error ng-hide" ng-show="guest.mphone.$invalid && guest.mphone.$error.required && !guest.mphone.$pristine"> Please enter a valid Phone Number.</label>
<label class="control-label error ng-hide" ng-show="guest.phone.$invalid && guest.phone.$error.required && !guest.phone.$pristine"> Please enter a valid Phone Number.</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12 emailIDdisp">
<input type="checkbox" id="orderConfirmation" ng-model="sendOrderInfo" class="ng-pristine ng-valid">
<label class="auto_sync_pickup font-color-lbl" for="orderConfirmation" style="font-weight:bold;">
<span class="ng-binding">Send order information to [email protected].</span>
</label>
</div>
</div>
<div class="row collapse" collapse="sendOrderInfo" style="height: 0px;">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<label class="control-label" for="inputSuccess3">Specify a different email address:</label>
<input type="text" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="Email" name="cemail" ng-model="cemail" ng-required="!sendOrderInfo && shipTo" ng-class="{ 'email-error' : !validEmail}" blur-valid="" ng-blur="validateEmail(cemail)" autocapitalize="none">
<label class="control-label error ng-hide" style="text-align:left" ng-show="(!validEmail)">Please enter an Email Address in the format [email protected].</label>
</div>
<br>
</div>
</div>
</div>
<!-- Code for BOPUS start -->
<div class="row ng-hide" ng-show="BOPUS.bopusmode">
<div class="col-md-12 col-xs-12 col-sm-12" ng-show="shipTo" style="margin-bottom:10px;margin-top:6px;">
<input type="checkbox" id="bopusPerson" ng-model="BOPUS.bopusPersonDetails" class="ng-pristine ng-valid">
<label class="auto_sync_pickup font-color-lbl" for="bopusPerson" style="font-weight:bold;">
<span>
<span ng-show="!firstName && !lastName" class="">...</span>
<span ng-show="firstName.length" class="ng-binding ng-hide"> </span>
<span ng-show="lastName.length" class="ng-binding ng-hide"> </span>will pick up order.
</span>
</label>
</div>
<div class="col-md-12 col-xs-12 col-sm-12">
<div collapse="BOPUS.bopusPersonDetails && shipTo" class="collapse in" style="height: auto;">
<div class="row ng-hide" ng-show="isBopus && !shipTo" style="margin-top: -10px;">
<div class="col-md-12" style="height: 20px;">
<h4>Pick Up Person</h4>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess3" data-ng-class="{'cInputFocusTrue': BOPUS.pickupBy.firstName.length != BOPUS.pickupBy.firstName, 'cInputFocusFalse': BOPUS.pickupBy.firstName.length == BOPUS.pickupBy.firstName}">First Name</label>
<input type="text" name="bdfname" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="First Name" ng-model="BOPUS.pickupBy.firstName" ng-required="isBopus && !BOPUS.bopusPersonDetails" ng-class="{ 'has-error' : guest.bdfname.$invalid && guest.bdfname.$error.required && !guest.bdfname.$pristine }" blur-valid="" auto-focus="">
<!-- <input type="text" name="bdfname" class="form-control" placeholder="First Name" ng-model="BOPUS.pickupBy.firstName" required ng-class="{ 'has-error' : guest.bdfname.$invalid && guest.bdfname.$error.required && !guest.bdfname.$pristine }"> -->
<span class="visible-xs">
<label class="control-label error ng-hide" ng-show="(guest.bdfname.$invalid && guest.bdfname.$error.required && !guest.bdfname.$pristine)">Please enter a First name.</label> </span>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 inline">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess3" data-ng-class="{'cInputFocusTrue': BOPUS.pickupBy.lastName.length != BOPUS.pickupBy.lastName, 'cInputFocusFalse': BOPUS.pickupBy.lastName.length == BOPUS.pickupBy.lastName}">Last Name</label>
<input type="text" name="bdlname" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="Last Name" ng-required="isBopus && !BOPUS.bopusPersonDetails" ng-model="BOPUS.pickupBy.lastName" ng-class="{ 'has-error' : guest.bdlname.$invalid && guest.bdlname.$error.required && !guest.bdlname.$pristine }" blur-valid="">
<!-- <input type="text" name="bdlname" class="form-control" placeholder="Last Name" required ng-model="BOPUS.pickupBy.lastName" ng-class="{ 'has-error' : guest.bdlname.$invalid && guest.bdlname.$error.required && !guest.bdlname.$pristine }"> -->
<span class="visible-xs">
<label class="control-label error ng-hide" ng-show="(guest.bdlname.$invalid && guest.bdlname.$error.required && !guest.bdlname.$pristine)">Please enter a Last name.</label> </span>
</div>
</div>
<div class="col-md-12 col-sm-12 hidden-xs">
<label class="control-label error ng-hide" ng-show="(guest.bdfname.$invalid && guest.bdfname.$error.required && !guest.bdfname.$pristine) || (guest.bdlname.$invalid && guest.bdlname.$error.required && !guest.bdlname.$pristine)"> Please enter a <span ng-show="guest.bdfname.$invalid && guest.bdfname.$error.required && !guest.bdfname.$pristine" class="ng-hide">First </span> <span ng-show="(guest.bdfname.$invalid && guest.bdfname.$error.required && !guest.bdfname.$pristine) && (guest.bdlname.$invalid && guest.bdlname.$error.required && !guest.bdlname.$pristine)" class="ng-hide"> and </span> <span ng-show="guest.bdlname.$invalid && guest.bdlname.$error.required && !guest.bdlname.$pristine" class="ng-hide">Last </span> name.</label>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess3" data-ng-class="{'cInputFocusTrue': BOPUS.pickupBy.phoneNumber.length != BOPUS.pickupBy.phoneNumber, 'cInputFocusFalse': BOPUS.pickupBy.phoneNumber.length == BOPUS.pickupBy.phoneNumber}">Phone Number</label>
<input type="tel" name="bdphone" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="Phone Number" ng-model="BOPUS.pickupBy.phoneNumber" ng-required="isBopus && !BOPUS.bopusPersonDetails" format-phone="" ng-class="{ 'has-error' : guest.bdphone.$invalid && guest.bdphone.$error.required && !guest.bdphone.$pristine }" blur-valid="" maxlength="16" placeholder-change="(123) 456-7890">
<!-- <input type="text" name="bdphone" class="form-control" placeholder="Phone" ng-model="BOPUS.pickupBy.phoneNumber" required format-phone ng-class="{ 'has-error' : guest.bdphone.$invalid && guest.bdphone.$error.required && !guest.bdphone.$pristine }"> -->
<label class="control-label error ng-hide" ng-show="guest.bdphone.$invalid && guest.bdphone.$error.required && !guest.bdphone.$pristine"> Please enter a valid Phone Number.</label>
</div>
</div>
</div>
<br>
<div ng-show="!shipTo && isBopus" class="ng-hide">
<div class="col-md-12 col-xs-12 col-sm-12 phone-number-agreement phone-number-agreement-mobile-expand" style="padding-left:0px;">
<!-- <input type="checkbox" id="bopusSMSagree" ng-model="BOPUS.pickupBy.SMSagreeDetails" ng-true-value="Y" ng-false-value="N" /> -->
<input type="checkbox" id="bopusSMSagree" ng-model="BOPUS.pickupBy.SMSagreeDetails" ng-true-value="Y" ng-false-value="N" class="ng-pristine ng-valid">
<label class="auto_sync_pickup font-color-lbl" for="bopusSMSagree" style="font-weight:bold;">
<span>Text me information from CVS/pharmacy, <br>including information about my order.<!-- <b style="font-weight: 800;">Full Details</b> -->
<br><b>I Agree to the Mobile Terms of Use.</b>
</span>
</label>
</div>
<div class="row">
<div class="row col-md-12 col-sm-12 bcc right mobileExpandSMS ng-hide" ng-show="BOPUS.pickupBy.SMSagreeDetails">
<div ng-show="textMeContent" ng-bind-html="textMeContent" class="ng-binding ng-hide"></div>
<div ng-show="!textMeContent" class="">
<p>
By checking this box, you consent that you may receive autodialed and/or pre-recorded telemarketing calls, emails, and text messages from or on behalf of CVS/pharmacy, or one of its affiliated companies, at the telephone number and email address you provided above. Your consent is not a condition, directly or indirectly, of purchasing any good or service. You may revoke this consent at any time by contacting us to be placed on our do-not-call list. Your carrier's message and data rates may apply.
</p>
<p>You will receive text messages from CVS/pharmacy: SHOP about your orders status. Message and data rates may apply. Message frequency depends on account activity. Text HELP to 287747 for help or call us at 1-877-833-9620.Text STOP to 287747 to cancel. Message frequency depends on account activity. Participating carriers include T-Mobile�, Verizon Wireless, AT&T, Sprint, Boost, U.S. Cellular�, MetroPCS, Virgin Mobile and Cricket. Wireless carriers are not liable for delayed or undelivered messages.</p>
<p><a target="_blank" href="/help/privacy_policy.jsp" style="color:#333; text-decoration:none;">Privacy Policy</a></p>
</div>
</div>
</div>
</div>
<div ng-show="isBopus && !shipTo" class="ng-hide">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12 emailIDdisp">
<input type="checkbox" id="orderConfirmation1" ng-model="sendOrderInfo" class="ng-pristine ng-valid">
<label class="auto_sync_pickup font-color-lbl ng-binding" for="orderConfirmation1" style="font-weight:bold;">
Send order information to .
</label>
</div>
</div>
<div class="row collapse" collapse="sendOrderInfo" style="height: 0px;">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<label class="control-label" for="inputSuccess3">Specify a different email address</label>
<input type="text" name="bdemail" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="Email" ng-model="BOPUS.pickupBy.email" ng-required="!sendOrderInfo && isBopus && !shipTo" ng-class="{ 'email-error' :guest.bdemail.$invalid && guest.bdemail.$error.required && !guest.bdemail.$pristine }" blur-valid="" ng-blur="validateEmail(BOPUS.pickupBy.email)" autocapitalize="none">
<!-- <input type="text" name="bdemail" class="form-control" placeholder="Email" ng-model="BOPUS.pickupBy.email" required ng-class="{ 'has-error' : guest.bdemail.$invalid && guest.bdemail.$error.required && !guest.bdemail.$pristine }"> -->
<label class="control-label error email-align ng-hide" ng-show="guest.bdemail.$invalid && guest.bdemail.$error.required && !guest.bdemail.$pristine">Please enter an Email Address in the format [email protected].</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-show="shipTo && isBopus" class="ng-hide">
<div class="col-md-12 col-xs-12 col-sm-12 phone-number-agreement phone-number-agreement-mobile-expand" style="padding-left:15px;">
<!-- <input type="checkbox" id="bopusSMSagree" ng-model="BOPUS.pickupBy.SMSagreeDetails" ng-true-value="Y" ng-false-value="N" /> -->
<input type="checkbox" id="bopusSMSagree1" ng-model="BOPUS.pickupBy.SMSagreeDetails" ng-true-value="Y" ng-false-value="N" class="ng-pristine ng-valid">
<label class="auto_sync_pickup font-color-lbl" for="bopusSMSagree1">
<span>Text me information from CVS/pharmacy<sup>�</sup>, <br>including information about my order.<!-- <b style="font-weight: 800;">Full Details</b> -->
<br><b>I Agree to the Mobile Terms of Use.</b>
</span>
</label>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 bcc right mobileExpandSMS ng-hide" ng-show="BOPUS.pickupBy.SMSagreeDetails" style="padding-top:5px;">
<div ng-show="textMeContent" ng-bind-html="textMeContent" class="ng-binding ng-hide"></div>
<div ng-show="!textMeContent" class="">
<p>
By checking this box, you consent that you may receive autodialed and/or pre-recorded telemarketing calls, emails, and text messages from or on behalf of CVS/pharmacy, or one of its affiliated companies, at the telephone number and email address you provided above. Your consent is not a condition, directly or indirectly, of purchasing any good or service. You may revoke this consent at any time by contacting us to be placed on our do-not-call list. Your carrier's message and data rates may apply.
</p>
<p>You will receive text messages from CVS/pharmacy: SHOP about your orders status. Message and data rates may apply. Message frequency depends on account activity. Text HELP to 287747 for help or call us at 1-877-833-9620.Text STOP to 287747 to cancel. Message frequency depends on account activity. Participating carriers include T-Mobile�, Verizon Wireless, AT&T, Sprint, Boost, U.S. Cellular�, MetroPCS, Virgin Mobile and Cricket. Wireless carriers are not liable for delayed or undelivered messages.</p>
<p><a target="_blank" href="/help/privacy_policy.jsp" style="color:#333; text-decoration:none;">Privacy Policy</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- bopusPersonDetails end -->
<!-- Code for BOPUS end -->
<div class="row">
<div class="col-md-12 payment-color-545454">
<h4 style="margin-bottom:11px !important;margin-top:27px !important;font-size:18px !important">Payment</h4>
</div>
</div>
<!-- FSA Code START -->
<div ng-show="FSA.fsamode" class="ng-hide">
<div class="row">
<div class="col-md-12 fsaContent col-xs-12 col-sm-12 visible-lg visible-md visible-sm">
<input type="checkbox" id="fsaValue" ng-model="FSA.fsaDetails" onclick="getBilling();" class="ng-pristine ng-valid">
<label id="fsaContentId" class="auto_sync_pickup font-color-lbl" for="fsaValue">
<span class="ng-binding">I would like to apply $0.00 of eligible items in this order to my FSA Debit Card.</span>
<!-- <small>I would like to apply ${{FSA.amountFSA}} of eligible items in this order to my FSA Debit Card.</small> -->
</label><br>
<span id="fsa1-popover" style="margin-left: 36px;"><b data-trigger="click" load-popover="" data-placement="top" data-toggle="popover" data-content="<a type='button' title='Close' data-dismiss='modal'><span class='icon-arrow-right pull-right close margin-right-20px'><img id='closeIconGuest' ng-mouseover='changeIcon1();' ng-mouseleave='hoverOut1();' ng-click='clickIconChange();' src='/webcontent/customerCheckout/img/icon-modal-close.png'></span></a>FSA stands for Flexible Spending Account.Some companies allow their employees to set aside pre-payroll tax dollars into an FSA account. That money can spent on FSA-eligible purchases." data-original-title="" title=""><span class="whatIsThis">What is this?</span></b> </span>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 visible-xs">
<input type="checkbox" id="fsaValue1" ng-model="FSA.fsaDetails" class="ng-pristine ng-valid">
<label class="auto_sync_pickup font-color-lbl" for="fsaValue1">
<span class="ng-binding">I would like to apply $0.00 of eligible items in this order to my FSA Debit Card.</span>
</label>
<b ng-click="whatIsThisFlag=true" class="whatIsThis">What is this?</b>
</div>
</div>
<div class="row ng-hide" ng-show="whatIsThisFlag">
<div class="form-control fsaPanelContent col-sm-12 col-xs-12" id="fsaInfoId">
<span class="glyphicon glyphicon-remove pull-right" ng-click="whatIsThisFlag=false"></span> FSA stands for Flexible Spending Account.Some companies allow their employees to participate in a FSA program by setting aside pre-payroll tax dollars for health related and medical expenses.
</div>
</div>
<div collapse="!FSA.fsaDetails" class="collapse" style="height: 0px;">
<div class="row ccarea" id="fsaarea">
<div class="col-md-12 col-xs-12 col-sm-12" style="width:100%">
<cc-field cc-focussed="isFieldFocussed" cc-val="FSA.cardno" exp-val="FSA.exp" cvc-val="FSA.cvv" validate="FSA.fsaDetails" f-title="FSAtitle" popover-text="FSApopoverText" class="ng-isolate-scope"><div class="row credit-card visible-lg visible-md visible-sm">
<div class="col-md-8 col-sm-8 col-xs-8" style="width: 63%;">
<label class="control-label ng-binding" for="inputSuccess2">FSA Card</label>
<input type="tel" pattern="[0-9]*" class="form-control cc-field ng-isolate-scope ng-pristine ng-animate ng-invalid-remove ng-valid-add ng-invalid-required-remove ng-valid-add-active ng-invalid-remove-active ng-valid ng-invalid-required-remove-active ng-valid-required" name="ccfield" id="inputSuccess1" placeholder="Credit Card Number" ng-model="ccVal" credit-card="" ng-required="validate" blur-valid="" disable-paste="" placeholder-change="1234 1234 1234 1234" style="">
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': expVal.length >0, 'cInputFocusFalse': !expVal || expVal.length <=0}">Exp</label>
<input type="tel" pattern="[0-9]*" class="form-control add-padding-6px ng-isolate-scope ng-pristine ng-animate ng-invalid-remove ng-valid-add ng-invalid-required-remove ng-valid-add-active ng-invalid-remove-active ng-valid ng-invalid-required-remove-active ng-valid-required" name="expfield" id="inputSuccess2" placeholder="| Exp" ng-model="expVal" disable-paste="" cc-exp="" ng-required="validate" blur-valid="" placeholder-change="MMYY" credit-card-exp-n-cvv="" style="">
</div>
<div class="col-md-2 col-sm-2 col-xs-2 cvvToolTip popdiv ng-scope" popover-html-unsafe="" popover-placement="right">
<label class="control-label cInputFocusFalse" for="inputSuccess3" data-ng-class="{'cInputFocusTrue': $parent.cvcVal.length >0, 'cInputFocusFalse': !cvcVal || cvcVal <=0}">CVV</label>
<input type="password" style="padding-right: 0px;" pattern="[0-9]*" inputmode="numeric" class="form-control hidden-xs ng-isolate-scope ng-pristine ng-animate ng-invalid-remove ng-valid-add ng-invalid-required-remove ng-valid-add-active ng-invalid-remove-active ng-valid ng-invalid-required-remove-active ng-valid-required" name="cvvfield" id="inputSuccess3" placeholder="| CVV" ng-model="$parent.cvcVal" cc-cvv="" ng-required="validate" blur-valid="" ng-blur="cvvBlur()" maxlength="" disable-paste="" credit-card-exp-n-cvv="">
<input type="tel" pattern="[0-9]*" inputmode="numeric" class="form-control visible-xs hidden-md hidden-lg hidden-sm pw ng-isolate-scope ng-pristine ng-animate ng-invalid-remove ng-valid-add ng-invalid-required-remove ng-valid-add-active ng-invalid-remove-active ng-valid ng-invalid-required-remove-active ng-valid-required" name="cvvfield" id="inputSuccess3" placeholder="| CVV" ng-model="$parent.cvcVal" cc-cvv="" ng-required="validate" blur-valid="" ng-blur="cvvBlur()" maxlength="" disable-paste="" style="">
</div>
</div>
<div class="row credit-card visible-xs padding-right-10px pad-rt-15" ng-class="{'card-info-mobile-arrow':cvvCCInfoFlag}" style="width:116%;">
<div class="col-sm-7 col-xs-7 col-xs-8">
<!--data-ng-class="{'cInputFocusTrue': ccVal.length != ccVal, 'cInputFocusFalse': ccVal.length == ccVal}"-->
<label class="control-label ng-binding" for="inputSuccess2">FSA Card</label>
<input type="tel" class="form-control cc-field ng-isolate-scope ng-pristine ng-animate ng-invalid-remove ng-valid-add ng-invalid-required-remove ng-valid-add-active ng-invalid-remove-active ng-valid ng-invalid-required-remove-active ng-valid-required" style="padding-right: 0px; font-size: 13px !important;" name="ccfield" id="inputSuccess1" placeholder="Credit Card Number" ng-model="ccVal" credit-card="" ng-required="validate" blur-valid="" disable-paste="" placeholder-change="1234 1234 1234 1234">
</div>
<div class="col-sm-3 col-xs-2">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': expVal.length >0, 'cInputFocusFalse': !expVal || expVal.length <=0}">Exp</label>
<input type="tel" pattern="[0-9]*" style="padding-right: 0px; padding-left: 0px !important; font-size: 13px !important;" class="form-control add-padding-6px-LR ng-isolate-scope ng-pristine ng-animate ng-invalid-remove ng-valid-add ng-invalid-required-remove ng-valid-add-active ng-invalid-remove-active ng-valid ng-invalid-required-remove-active ng-valid-required" name="expfield" id="inputSuccess2" placeholder="| EXP" ng-model="expVal" cc-exp="" ng-required="validate" blur-valid="" disable-paste="" placeholder-change="MMYY">
</div>
<div class="col-sm-2 col-xs-2">
<label class="control-label cInputFocusFalse" for="inputSuccess3" data-ng-class="{'cInputFocusTrue': cvcVal.length >0, 'cInputFocusFalse': !cvcVal || cvcVal.length <=0}">CVV</label>
<input type="password" style="padding-right: 0px; padding-left: 0px !important; font-size: 13px !important;" pattern="[0-9]*" inputmode="numeric" class="form-control hidden-xs ng-isolate-scope ng-pristine ng-animate ng-invalid-remove ng-valid-add ng-invalid-required-remove ng-valid-add-active ng-invalid-remove-active ng-valid ng-invalid-required-remove-active ng-valid-required" maxlength="" name="cvvfield" id="inputSuccess3" placeholder="|CVV" ng-model="cvcVal" cc-cvv="" ng-required="validate" blur-valid="" ng-blur="cvvBlur()" disable-paste="">
<input type="tel" pattern="[0-9]*" inputmode="numeric" style="padding-left: 0px !important; font-size: 15px !important;" class="form-control visible-xs hidden-md hidden-lg hidden-sm pw ng-isolate-scope ng-pristine ng-animate ng-invalid-remove ng-valid-add ng-invalid-required-remove ng-valid-add-active ng-invalid-remove-active ng-valid ng-invalid-required-remove-active ng-valid-required" maxlength="" name="cvvfield" id="inputSuccess3" placeholder="|CVV" ng-model="cvcVal" cc-cvv="" ng-required="validate" blur-valid="" ng-blur="cvvBlur()" disable-paste="">
</div>
<!-- cvv-cc info panel -->
<div class="col-xs-12 pad-0 card-info-mobile ng-hide" ng-show="cvvCCInfoFlag && popoverTextMobile">
<div class="col-xs-12 col-sm-12 cvvInfoPanelCC ng-binding" style=" ">
</div>
</div>
</div>
<div class="row col-md-12 col-sm-12 col-xs-12">
<label class="control-label error ng-hide" ng-show="expCCNo" ng-class="creditError" id="errCC">Please enter a credit card number</label>
<label class="control-label error ng-hide" ng-show="expError" ng-class="creditError" id="errExp">Please enter an expiration date</label>
<label class="control-label error ng-hide" ng-show="cvvError" id="errCvv">Please enter a valid CVV code</label>
</div>
<div class="row visible-xs">
<div class="col-xs-12 col-sm-12 cvvInfoPanel ng-binding ng-hide" style="" ng-show="cvvInfoFlag">
Please enter the -digit security code found on the back of your card
</div>
</div>
<!--<div class="col-md-12 visible-md visible-lg visible-sm">
<label class="control-label error" ng-show="ccInvalidDirFlag"> Please enter a valid Credit Card Number</label>
</div>
-->
</cc-field>
<div class="row">
<div class="col-md-12 removePadding">
<label class="error ng-binding"></label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<input type="checkbox" id="fsabilling" ng-model="FSA.defaultFSAShippingAddress" ng-change="changeDefaultFSAShippingAddress()" name="chk1" class="ng-pristine ng-valid">
<label class="auto_sync_pickup font-color-lbl" for="fsabilling" style="font-weight:bold;margin-bottom:27px !important;">
<span>Use
<span ng-show="!firstName.length && !lastName.length && !streetAddress.length" class="">...</span>
<span ng-show="(firstName.length || lastName.length || streetAddress.length)" class="ng-binding ng-hide">
<span ng-show="firstName.length" class="ng-binding ng-hide"> </span>
<span ng-show="lastName.length" class="ng-binding ng-hide"> <span ng-show="streetAddress.length" class="ng-hide">,</span></span>
</span>as Billing Address.
</span>
</label>
</div>
</div>
<div collapse="FSA.defaultFSAShippingAddress" class="collapse in" style="height: auto;">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<h4 ng-show="shipTo" class="">Specify a Different Billing Address</h4>
<h4 ng-show="!shipTo" class="ng-hide">Specify a Billing Address:</h4>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': ffirstName.length != ffirstName, 'cInputFocusFalse': ffirstName.length == ffirstName}">First Name</label>
<input type="text" name="ffname" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="First Name" ng-model="ffirstName" ng-required="!FSA.defaultFSAShippingAddress && FSA.fsamode" ng-class="{ 'has-error' : guest.ffname.$invalid && guest.ffname.$error.required && !guest.ffname.$pristine }" blur-valid="" fsa-address="">
</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs">
<label class="control-label error ng-hide" ng-show="guest.ffname.$invalid && guest.ffname.$error.required && !guest.ffname.$pristine"> Please enter a First name.</label>
</div>
<div class="col-md-6 inline col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': flastName.length != flastName, 'cInputFocusFalse': flastName.length == flastName}">Last Name</label>
<input type="text" name="flname" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="Last Name" ng-model="flastName" ng-required="!FSA.defaultFSAShippingAddress && FSA.fsamode" ng-class="{ 'has-error' : guest.flname.$invalid && guest.flname.$error.required && !guest.flname.$pristine }" blur-valid="">
</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs">
<label class="control-label error ng-hide" ng-show="guest.flname.$invalid && guest.flname.$error.required && !guest.flname.$pristine"> Please enter Last name.</label>
</div>
<div class="col-md-12 col-sm-12 visible-lg visible-md visible-sm">
<label class="control-label error ng-hide" ng-show="(guest.ffname.$invalid && guest.ffname.$error.required && !guest.ffname.$pristine) || (guest.flname.$invalid && guest.flname.$error.required && !guest.flname.$pristine)"> Please enter a <span ng-show="guest.ffname.$invalid && guest.ffname.$error.required && !guest.ffname.$pristine" class="ng-hide">First </span> <span ng-show="(guest.ffname.$invalid && guest.ffname.$error.required && !guest.ffname.$pristine) && (guest.flname.$invalid && guest.flname.$error.required && !guest.flname.$pristine)" class="ng-hide"> and </span> <span ng-show="guest.flname.$invalid && guest.flname.$error.required && !guest.flname.$pristine" class="ng-hide">Last </span> name.</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': fstreetAddress.length != fstreetAddress, 'cInputFocusFalse': fstreetAddress.length == fstreetAddress}">Street Address</label>
<!-- <div class="aptBldg" ng-show="aptBldgFlagFSA" ng-click="aptBldgFieldFlag2=!aptBldgFieldFlag2" element-focus="aptBldgAddNewAddress2">+Apt/Bldg</div> -->
<input type="text" name="fstreetAddr" class="form-control alpha-text ng-pristine ng-valid ng-valid-required" placeholder="Street Address" ng-model="fstreetAddress" ng-required="!FSA.defaultFSAShippingAddress && FSA.fsamode" ng-class="{ 'has-error' : guest.fstreetAddr.$invalid && guest.fstreetAddr.$error.required && !guest.fstreetAddr.$pristine }" ng-focus="aptBldgFlagFSA=true" blur-valid="">
<label class="control-label error ng-hide" ng-show="guest.fstreetAddr.$invalid && guest.fstreetAddr.$error.required && !guest.fstreetAddr.$pristine"> Please enter a Street Address.</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': fstreetAddress1.length != fstreetAddress1, 'cInputFocusFalse': fstreetAddress1.length == fstreetAddress1}">Apartment, Building, Floor, Etc</label>
<input type="text" name="fstreetAddr1" class="form-control alpha-text pad60 ng-pristine ng-valid" placeholder="Apartment, Building, Floor and etc" ng-model="fstreetAddress1" ng-class="{ 'has-error' : guest.fstreetAddr1.$invalid && guest.fstreetAddr1.$error.required && !guest.fstreetAddr1.$pristine }" ng-focus="aptBldgFlagFSA=!aptBldgFlagFSA" id="aptBldgAddNewAddress2" blur-valid="">
<span class="apartmentText"><i>optional</i></span>
<label class="control-label error ng-hide" ng-show="guest.fstreetAddr1.$invalid && guest.fstreetAddr1.$error.required && !guest.fstreetAddr1.$pristine">Apartment, Building, Floor, Etc</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': fcity.length != fcity, 'cInputFocusFalse': fcity.length == fcity}">City</label>
<input type="text" name="fcity" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="City" ng-model="fcity" ng-required="!FSA.defaultFSAShippingAddress && FSA.fsamode" ng-class="{ 'has-error' : guest.fcity.$invalid && guest.fcity.$error.required && !guest.fcity.$pristine }" blur-valid="">
</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs">
<label class="control-label error ng-hide" ng-show="(guest.fcity.$invalid && guest.fcity.$error.required && !guest.fcity.$pristine)"> Please enter a City</label>
</div>
<div class="col-md-4 inline col-xs-4 col-sm-4 pad-rt-0">
<div class="form-group visible-lg visible-md visible-sm visible-xs">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': ustateid != 0, 'cInputFocusFalse': ustateid == 0}">State</label>
<div class="selectBox">
<select class="form-control ng-pristine ng-valid ng-valid-required" name="sstateName" ng-model="ustateid" ng-init="ustateid='0'" ng-required="!FSA.defaultFSAShippingAddress && FSA.fsamode" ng-class="{ 'selectError' : showFSAStateErr == 0 }" blur-valid="" ng-change="checkFSAStateSelection()" ng-blur="clickFSAStateSelection()">
<option value="0">State</option>
<!-- ngRepeat: state in states --><option ng-repeat="state in states" value="AA" class="ng-binding ng-scope">AA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AE" class="ng-binding ng-scope">AE</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AK" class="ng-binding ng-scope">AK</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AL" class="ng-binding ng-scope">AL</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AP" class="ng-binding ng-scope">AP</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AR" class="ng-binding ng-scope">AR</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AS" class="ng-binding ng-scope">AS</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AZ" class="ng-binding ng-scope">AZ</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="CA" class="ng-binding ng-scope">CA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="CO" class="ng-binding ng-scope">CO</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="CT" class="ng-binding ng-scope">CT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="DC" class="ng-binding ng-scope">DC</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="DE" class="ng-binding ng-scope">DE</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="FL" class="ng-binding ng-scope">FL</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="GA" class="ng-binding ng-scope">GA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="GU" class="ng-binding ng-scope">GU</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="HI" class="ng-binding ng-scope">HI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="IA" class="ng-binding ng-scope">IA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="ID" class="ng-binding ng-scope">ID</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="IL" class="ng-binding ng-scope">IL</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="IN" class="ng-binding ng-scope">IN</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="KS" class="ng-binding ng-scope">KS</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="KY" class="ng-binding ng-scope">KY</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="LA" class="ng-binding ng-scope">LA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MA" class="ng-binding ng-scope">MA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MD" class="ng-binding ng-scope">MD</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="ME" class="ng-binding ng-scope">ME</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MI" class="ng-binding ng-scope">MI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MN" class="ng-binding ng-scope">MN</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MS" class="ng-binding ng-scope">MS</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MO" class="ng-binding ng-scope">MO</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MT" class="ng-binding ng-scope">MT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NE" class="ng-binding ng-scope">NE</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NV" class="ng-binding ng-scope">NV</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MP" class="ng-binding ng-scope">MP</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NH" class="ng-binding ng-scope">NH</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NJ" class="ng-binding ng-scope">NJ</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NM" class="ng-binding ng-scope">NM</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NY" class="ng-binding ng-scope">NY</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NC" class="ng-binding ng-scope">NC</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="ND" class="ng-binding ng-scope">ND</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="OH" class="ng-binding ng-scope">OH</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="OK" class="ng-binding ng-scope">OK</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="OR" class="ng-binding ng-scope">OR</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="PA" class="ng-binding ng-scope">PA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="PR" class="ng-binding ng-scope">PR</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="RI" class="ng-binding ng-scope">RI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="SC" class="ng-binding ng-scope">SC</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="SD" class="ng-binding ng-scope">SD</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="TN" class="ng-binding ng-scope">TN</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="TX" class="ng-binding ng-scope">TX</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="UT" class="ng-binding ng-scope">UT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="VT" class="ng-binding ng-scope">VT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="VA" class="ng-binding ng-scope">VA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WA" class="ng-binding ng-scope">WA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WV" class="ng-binding ng-scope">WV</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WI" class="ng-binding ng-scope">WI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="VI" class="ng-binding ng-scope">VI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WY" class="ng-binding ng-scope">WY</option><!-- end ngRepeat: state in states -->
</select>
<span class="newCaret"></span>
</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs pad-0">
<label class="control-label error ng-hide" ng-show=" (isFSAVisited == 1 && ustateid == 0 && showFSAStateErr == 0)"> Please enter a State</label>
</div>
<!--<div class="dropdown dropdown-toggle form-control stateText visible-xs">-->
<!--{{sselectedState===""?'State':sselectedState}}-->
<!--<ul class="dropdown-menu stateDimensionLimit" role="menu" aria-labelledby="dropdownText">-->
<!--<li role="presentation" ng-repeat="state in statesMobile" ng-model="ustateid" name="stateName"><a role="menuitem" tabindex="-1" ng-click="selectState('sstate',state)">-->
<!--{{state.abv}} </a>-->
<!--</li>-->
<!--</ul>-->
<!--<div class="glyphicon glyphicon-chevron-down pull-right CCDropDown stateIcon"></div>-->
<!--</div>-->
</div>
<div class="col-md-3 inline col-xs-8 col-sm-3">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': fzipCode.length != fzipCode, 'cInputFocusFalse': fzipCode.length == fzipCode}">ZIP Code</label>
<input type="text" pattern="\d*" id="zipCodeId" name="fzip" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="ZIP" ng-model="fzipCode" ng-required="!FSA.defaultFSAShippingAddress && FSA.fsamode" ng-class="{ 'has-error' : guest.fzip.$invalid && guest.fzip.$error.required && !guest.fzip.$pristine }" maxlength="5" zipcode="" blur-valid="">
</div>
<div class="col-xs-12 col-sm-12 col-sm-offset-4 visible-xs">
<label class="control-label error ng-hide" ng-show="(guest.fzip.$invalid && guest.fzip.$error.required && !guest.fzip.$pristine)"> Please enter a Zip</label>
</div>
</div>
<div class="col-md-12 col-sm-12 visible-lg visible-md visible-sm">
<label class="control-label error ng-hide" ng-show="(guest.fcity.$invalid && guest.fcity.$error.required && !guest.fcity.$pristine) || (isFSAVisited == 1 && ustateid == 0 && showFSAStateErr == 0) || (guest.fzip.$invalid && guest.fzip.$error.required && !guest.fzip.$pristine)"> Please enter a <span ng-show="guest.fcity.$invalid && guest.fcity.$error.required && !guest.fcity.$pristine" class="ng-hide"> City</span><span ng-show="((guest.fcity.$invalid && guest.fcity.$error.required && !guest.fcity.$pristine) && (isFSAVisited == 1 && ustateid == 0))" class="ng-hide">, </span><span ng-show="isFSAVisited == 1 && ustateid == 0 && showFSAStateErr == 0" class="ng-hide">State</span> <span ng-show="((guest.fcity.$invalid && guest.fcity.$error.required && !guest.fcity.$pristine) || (isFSAVisited == 1 && ustateid == 0 && showFSAStateErr == 0)) && (guest.fzip.$invalid && guest.fzip.$error.required && !guest.fzip.$pristine)" class="ng-hide"> and </span> <span ng-show="guest.fzip.$invalid && guest.fzip.$error.required && !guest.fzip.$pristine" class="ng-hide">ZIP Code</span>
</label>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': fphoneNumber.length != fphoneNumber, 'cInputFocusFalse': fphoneNumber.length == fphoneNumber}">Phone Number</label>
<input type="tel" name="fphone" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="Phone Number" ng-model="fphoneNumber" ng-required="!FSA.defaultFSAShippingAddress && FSA.fsamode" format-phone="" ng-class="{ 'has-error' : guest.fphone.$invalid && guest.fphone.$error.required && !guest.fphone.$pristine }" blur-valid="" maxlength="16" placeholder-change="(123) 456-7890">
<label class="control-label error ng-hide" ng-show="guest.fphone.$invalid && guest.fphone.$error.required && !guest.fphone.$pristine"> Please enter a valid Phone Number.</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FSA Code END -->
<div class="row ccarea" id="nccarea">
<div class="col-md-12 col-xs-12 col-sm-12" style="width:100%">
<div class="form-group">
<cc-field cc-focussed="isFieldFocussed" cc-val="cc.cardno" exp-val="cc.exp" cvc-val="cc.cvv" validate="!FSA.fsaDetails" f-title="cctitle" popover-text="popoverText" class="ng-isolate-scope"><div class="row credit-card visible-lg visible-md visible-sm">
<div class="col-md-8 col-sm-8 col-xs-8" style="width: 63%;">
<label class="control-label ng-binding" for="inputSuccess2">Credit Card</label>
<input type="tel" pattern="[0-9]*" class="form-control cc-field ng-isolate-scope ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-remove-active ng-invalid ng-invalid-add-active ng-invalid-required" name="ccfield" id="inputSuccess1" placeholder="Credit Card Number" ng-model="ccVal" credit-card="" ng-required="validate" blur-valid="" disable-paste="" placeholder-change="1234 1234 1234 1234" required="required" style="">
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': expVal.length >0, 'cInputFocusFalse': !expVal || expVal.length <=0}">Exp</label>
<input type="tel" pattern="[0-9]*" class="form-control add-padding-6px ng-isolate-scope ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-remove-active ng-invalid ng-invalid-add-active ng-invalid-required" name="expfield" id="inputSuccess2" placeholder="| Exp" ng-model="expVal" disable-paste="" cc-exp="" ng-required="validate" blur-valid="" placeholder-change="MMYY" credit-card-exp-n-cvv="" required="required" style="">
</div>
<div class="col-md-2 col-sm-2 col-xs-2 cvvToolTip popdiv ng-scope" popover-html-unsafe="" popover-placement="right">
<label class="control-label cInputFocusFalse" for="inputSuccess3" data-ng-class="{'cInputFocusTrue': $parent.cvcVal.length >0, 'cInputFocusFalse': !cvcVal || cvcVal <=0}">CVV</label>
<input type="password" style="padding-right: 0px;" pattern="[0-9]*" inputmode="numeric" class="form-control hidden-xs ng-isolate-scope ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-remove-active ng-invalid ng-invalid-add-active ng-invalid-required" name="cvvfield" id="inputSuccess3" placeholder="| CVV" ng-model="$parent.cvcVal" cc-cvv="" ng-required="validate" blur-valid="" ng-blur="cvvBlur()" maxlength="" disable-paste="" credit-card-exp-n-cvv="" required="required">
<input type="tel" pattern="[0-9]*" inputmode="numeric" class="form-control visible-xs hidden-md hidden-lg hidden-sm pw ng-isolate-scope ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-remove-active ng-invalid ng-invalid-add-active ng-invalid-required" name="cvvfield" id="inputSuccess3" placeholder="| CVV" ng-model="$parent.cvcVal" cc-cvv="" ng-required="validate" blur-valid="" ng-blur="cvvBlur()" maxlength="" disable-paste="" required="required" style="">
</div>
</div>
<div class="row credit-card visible-xs padding-right-10px pad-rt-15" ng-class="{'card-info-mobile-arrow':cvvCCInfoFlag}" style="width:116%;">
<div class="col-sm-7 col-xs-7 col-xs-8">
<!--data-ng-class="{'cInputFocusTrue': ccVal.length != ccVal, 'cInputFocusFalse': ccVal.length == ccVal}"-->
<label class="control-label ng-binding" for="inputSuccess2">Credit Card</label>
<input type="tel" class="form-control cc-field ng-isolate-scope ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-remove-active ng-invalid ng-invalid-add-active ng-invalid-required" style="padding-right: 0px; font-size: 13px !important;" name="ccfield" id="inputSuccess1" placeholder="Credit Card Number" ng-model="ccVal" credit-card="" ng-required="validate" blur-valid="" disable-paste="" placeholder-change="1234 1234 1234 1234" required="required">
</div>
<div class="col-sm-3 col-xs-2">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': expVal.length >0, 'cInputFocusFalse': !expVal || expVal.length <=0}">Exp</label>
<input type="tel" pattern="[0-9]*" style="padding-right: 0px; padding-left: 0px !important; font-size: 13px !important;" class="form-control add-padding-6px-LR ng-isolate-scope ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-remove-active ng-invalid ng-invalid-add-active ng-invalid-required" name="expfield" id="inputSuccess2" placeholder="| EXP" ng-model="expVal" cc-exp="" ng-required="validate" blur-valid="" disable-paste="" placeholder-change="MMYY" required="required">
</div>
<div class="col-sm-2 col-xs-2">
<label class="control-label cInputFocusFalse" for="inputSuccess3" data-ng-class="{'cInputFocusTrue': cvcVal.length >0, 'cInputFocusFalse': !cvcVal || cvcVal.length <=0}">CVV</label>
<input type="password" style="padding-right: 0px; padding-left: 0px !important; font-size: 13px !important;" pattern="[0-9]*" inputmode="numeric" class="form-control hidden-xs ng-isolate-scope ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-remove-active ng-invalid ng-invalid-add-active ng-invalid-required" maxlength="" name="cvvfield" id="inputSuccess3" placeholder="|CVV" ng-model="cvcVal" cc-cvv="" ng-required="validate" blur-valid="" ng-blur="cvvBlur()" disable-paste="" required="required">
<input type="tel" pattern="[0-9]*" inputmode="numeric" style="padding-left: 0px !important; font-size: 15px !important;" class="form-control visible-xs hidden-md hidden-lg hidden-sm pw ng-isolate-scope ng-pristine ng-animate ng-valid-remove ng-invalid-add ng-valid-remove-active ng-invalid ng-invalid-add-active ng-invalid-required" maxlength="" name="cvvfield" id="inputSuccess3" placeholder="|CVV" ng-model="cvcVal" cc-cvv="" ng-required="validate" blur-valid="" ng-blur="cvvBlur()" disable-paste="" required="required">
</div>
<!-- cvv-cc info panel -->
<div class="col-xs-12 pad-0 card-info-mobile ng-hide" ng-show="cvvCCInfoFlag && popoverTextMobile">
<div class="col-xs-12 col-sm-12 cvvInfoPanelCC ng-binding" style=" ">
</div>
</div>
</div>
<div class="row col-md-12 col-sm-12 col-xs-12">
<label class="control-label error ng-hide" ng-show="expCCNo" ng-class="creditError" id="errCC">Please enter a credit card number</label>
<label class="control-label error ng-hide" ng-show="expError" ng-class="creditError" id="errExp">Please enter an expiration date</label>
<label class="control-label error ng-hide" ng-show="cvvError" id="errCvv">Please enter a valid CVV code</label>
</div>
<div class="row visible-xs">
<div class="col-xs-12 col-sm-12 cvvInfoPanel ng-binding ng-hide" style="" ng-show="cvvInfoFlag">
Please enter the -digit security code found on the back of your card
</div>
</div>
<!--<div class="col-md-12 visible-md visible-lg visible-sm">
<label class="control-label error" ng-show="ccInvalidDirFlag"> Please enter a valid Credit Card Number</label>
</div>
-->
</cc-field>
<div class="col-md-12 removePadding">
<label class="error ng-binding"></label>
</div>
</div>
</div>
</div>
<div class="row" ng-show="shipTo">
<div class="col-md-12 col-sm-12 col-xs-12">
<input type="checkbox" id="billing" ng-model="defaultShippingAddress" ng-change="changeDefaultShippingAddress()" class="ng-pristine ng-valid">
<label class="auto_sync_pickup font-color-lbl" for="billing" style="font-weight:bold;margin-bottom:24px !important;">
<!-- <small>Use <span ng-show="!firstName.length && !lastName.length && !streetAddress.length">...</span> <span ng-show="firstName.length || lastName.length || streetAddress.length">{{firstName}} <span ng-show="lastName.length && firstName.length"></span> {{lastName}} <span ng-show="streetAddress.length && lastName.length">,</span> {{streetAddress}}</span> as Billing Address.</small> -->
<!-- <small>Use <span ng-show="!ufirstName.length && !ulastName.length && !ustreetAddress.length">...</span> <span ng-show="ufirstName.length || ulastName.length || ustreetAddress.length">{{ufirstName}} <span ng-show="ulastName.length && ufirstName.length"></span> {{ulastName}} <span ng-show="ustreetAddress.length && ulastName.length">,</span> {{ustreetAddress}}</span> as Billing Address.</small> -->
<span>Use
<span ng-show="!firstName.length && !lastName.length && !streetAddress.length" class="">...</span>
<span ng-show="(firstName.length || lastName.length || streetAddress.length)" class="ng-binding ng-hide">
<span ng-show="firstName.length" class="ng-binding ng-hide"> </span>
<span ng-show="lastName.length" class="ng-binding ng-hide"> <span ng-show="streetAddress.length" class="ng-hide">,</span></span>
</span> as Billing Address.
</span>
</label>
</div>
</div>
<div ng-show="(!defaultShippingAddress) || (isBopus && !shipTo)" class="ng-hide">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<h4 ng-show="shipTo" class="">Specify a Different Billing Address</h4>
<h4 ng-show="!shipTo" class="ng-hide">Specify a Billing Address:</h4>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<select id="newaddress" ng-class="{ 'has-error' : guest.newaddress.$invalid && !guest.newaddress.$pristine }" class="form-control select" name="newaddress" required="">
<option value="" class="" style="color:#7f7f7f;">Select a Saved Address....</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': ufirstName.length != ufirstName, 'cInputFocusFalse': ufirstName.length == ufirstName}">First Name</label>
<input type="text" id="difAdrsufname" name="ufname" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="First Name" ng-model="ufirstName" ng-required="!defaultShippingAddress && !FSA.fsaDetails" ng-class="{ 'has-error' : guest.ufname.$invalid && guest.ufname.$error.required && !guest.ufname.$pristine }" blur-valid="" cc-address="">
</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs">
<label class="control-label error ng-hide" ng-show="(guest.ufname.$invalid && guest.ufname.$error.required && !guest.ufname.$pristine)"> Please enter a First name.</label>
</div>
<div class="col-md-6 inline col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': ulastName.length != ulastName, 'cInputFocusFalse': ulastName.length == ulastName}">Last Name</label>
<input type="text" name="ulname" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="Last Name" ng-model="ulastName" ng-required="!defaultShippingAddress && !FSA.fsaDetails" ng-class="{ 'has-error' : guest.ulname.$invalid && guest.ulname.$error.required && !guest.ulname.$pristine }" blur-valid="">
</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs">
<label class="control-label error ng-hide" ng-show="(guest.ulname.$invalid && guest.ulname.$error.required && !guest.ulname.$pristine)"> Please enter Last name.</label>
</div>
<div class="col-sm-12 col-md-12 visible-md visible-sm visible-lg">
<label class="control-label error ng-hide" ng-show="(guest.ufname.$invalid && guest.ufname.$error.required && !guest.ufname.$pristine) || (guest.ulname.$invalid && guest.ulname.$error.required && !guest.ulname.$pristine)"> Please enter a <span ng-show="guest.ufname.$invalid && guest.ufname.$error.required && !guest.ufname.$pristine" class="ng-hide">First </span> <span ng-show="(guest.ufname.$invalid && guest.ufname.$error.required && !guest.ufname.$pristine) && (guest.ulname.$invalid && guest.ulname.$error.required && !guest.ulname.$pristine)" class="ng-hide"> and </span> <span ng-show="guest.ulname.$invalid && guest.ulname.$error.required && !guest.ulname.$pristine" class="ng-hide">Last </span> name.</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': ustreetAddress.length != ustreetAddress, 'cInputFocusFalse': ustreetAddress.length == ustreetAddress}">Street Address</label>
<!--<div class="aptBldg" ng-show="aptBldgFlag3" ng-click="aptBldgFieldFlag3=!aptBldgFieldFlag3" element-focus="aptBldgAddNewAddressCC">+Apt/Bldg</div>-->
<input type="text" name="ustreetAddr" class="form-control alpha-text ng-pristine ng-valid ng-valid-required" placeholder="Street Address" ng-model="ustreetAddress" ng-required="!defaultShippingAddress && !FSA.fsaDetails" ng-class="{ 'has-error' : guest.ustreetAddr.$invalid && guest.ustreetAddr.$error.required && !guest.ustreetAddr.$pristine }" ng-focus="aptBldgFlag3=true" blur-valid="">
<label class="control-label error ng-hide" ng-show="guest.ustreetAddr.$invalid && guest.ustreetAddr.$error.required && !guest.ustreetAddr.$pristine"> Please enter a Street Address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': ustreetAddress1.length != ustreetAddress1, 'cInputFocusFalse': ustreetAddress1.length == ustreetAddress1}">Apartment, Building, Floor, Etc</label>
<input type="text" name="ustreetAddr1" class="form-control alpha-text pad60 ng-pristine ng-valid" placeholder="Apartment, Building, Floor and etc" ng-model="ustreetAddress1" ng-class="{ 'has-error' : guest.ustreetAddr1.$invalid && guest.ustreetAddr1.$error.required && !guest.ustreetAddr1.$pristine }" id="aptBldgAddNewAddressCC" ng-focus="aptBldgFlag3=false" blur-valid="">
<span class="apartmentText"><i>optional</i></span>
<label class="control-label error ng-hide" ng-show="guest.ustreetAddr1.$invalid && guest.ustreetAddr1.$error.required && !guest.ustreetAddr1.$pristine">Apartment, Building, Floor, Etc</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-xs-12 col-sm-5">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': ucity.length != ucity, 'cInputFocusFalse': ucity.length == ucity}">City</label>
<input type="text" name="ucity" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="City" ng-model="ucity" ng-required="!defaultShippingAddress && !FSA.fsaDetails" ng-class="{ 'has-error' : guest.ucity.$invalid && guest.ucity.$error.required && !guest.ucity.$pristine }" blur-valid="">
</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs">
<label class="control-label error ng-hide" ng-show="(guest.ucity.$invalid && guest.ucity.$error.required && !guest.ucity.$pristine)"> Please enter a City.</label>
</div>
<div class="col-md-4 inline col-xs-4 col-sm-4 pad-rt-0">
<div class="form-group visible-lg visible-md visible-sm visible-xs">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': uccstateid != 0, 'cInputFocusFalse': uccstateid == 0}">State</label>
<div class="selectBox">
<select class="form-control ng-pristine ng-valid ng-valid-required" ng-model="uccstateid" ng-init="uccstateid='0'" name="ustateName" ng-required="!defaultShippingAddress && !FSA.fsaDetails" ng-class="{ 'selectError' : showCCErr == 0 }" ng-change="checkCCStateSelection()" ng-blur="clickCCStateSelection()" blur-valid="">
<option value="0">State</option>
<!-- ngRepeat: state in states --><option ng-repeat="state in states" value="AA" class="ng-binding ng-scope">AA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AE" class="ng-binding ng-scope">AE</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AK" class="ng-binding ng-scope">AK</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AL" class="ng-binding ng-scope">AL</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AP" class="ng-binding ng-scope">AP</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AR" class="ng-binding ng-scope">AR</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AS" class="ng-binding ng-scope">AS</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="AZ" class="ng-binding ng-scope">AZ</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="CA" class="ng-binding ng-scope">CA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="CO" class="ng-binding ng-scope">CO</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="CT" class="ng-binding ng-scope">CT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="DC" class="ng-binding ng-scope">DC</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="DE" class="ng-binding ng-scope">DE</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="FL" class="ng-binding ng-scope">FL</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="GA" class="ng-binding ng-scope">GA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="GU" class="ng-binding ng-scope">GU</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="HI" class="ng-binding ng-scope">HI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="IA" class="ng-binding ng-scope">IA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="ID" class="ng-binding ng-scope">ID</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="IL" class="ng-binding ng-scope">IL</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="IN" class="ng-binding ng-scope">IN</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="KS" class="ng-binding ng-scope">KS</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="KY" class="ng-binding ng-scope">KY</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="LA" class="ng-binding ng-scope">LA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MA" class="ng-binding ng-scope">MA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MD" class="ng-binding ng-scope">MD</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="ME" class="ng-binding ng-scope">ME</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MI" class="ng-binding ng-scope">MI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MN" class="ng-binding ng-scope">MN</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MS" class="ng-binding ng-scope">MS</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MO" class="ng-binding ng-scope">MO</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MT" class="ng-binding ng-scope">MT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NE" class="ng-binding ng-scope">NE</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NV" class="ng-binding ng-scope">NV</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="MP" class="ng-binding ng-scope">MP</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NH" class="ng-binding ng-scope">NH</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NJ" class="ng-binding ng-scope">NJ</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NM" class="ng-binding ng-scope">NM</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NY" class="ng-binding ng-scope">NY</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="NC" class="ng-binding ng-scope">NC</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="ND" class="ng-binding ng-scope">ND</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="OH" class="ng-binding ng-scope">OH</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="OK" class="ng-binding ng-scope">OK</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="OR" class="ng-binding ng-scope">OR</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="PA" class="ng-binding ng-scope">PA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="PR" class="ng-binding ng-scope">PR</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="RI" class="ng-binding ng-scope">RI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="SC" class="ng-binding ng-scope">SC</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="SD" class="ng-binding ng-scope">SD</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="TN" class="ng-binding ng-scope">TN</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="TX" class="ng-binding ng-scope">TX</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="UT" class="ng-binding ng-scope">UT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="VT" class="ng-binding ng-scope">VT</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="VA" class="ng-binding ng-scope">VA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WA" class="ng-binding ng-scope">WA</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WV" class="ng-binding ng-scope">WV</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WI" class="ng-binding ng-scope">WI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="VI" class="ng-binding ng-scope">VI</option><!-- end ngRepeat: state in states --><option ng-repeat="state in states" value="WY" class="ng-binding ng-scope">WY</option><!-- end ngRepeat: state in states -->
</select>
<span class="newCaret"></span>
</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs pad-0">
<label class="control-label error ng-hide" ng-show="(isCCVisited == 1 && uccstateid == 0 && showCCErr== 0)"> Please enter a State.</label>
</div>
<!--<div class="dropdown dropdown-toggle form-control stateText visible-xs">-->
<!--{{
<!--uselectedState===""?'State':uselectedState-->
<!--}}-->
<!--<ul class="dropdown-menu stateDimensionLimit" role="menu" aria-labelledby="dropdownText">-->
<!--<li role="presentation" ng-repeat="state in statesMobile" ng-model="ustateid" name="stateName"><a role="menuitem" tabindex="-1" ng-click="selectState('ustate',state)">-->
<!--{{state.abv}} </a>-->
<!--</li>-->
<!--</ul>-->
<!--<div class="glyphicon glyphicon-chevron-down pull-right CCDropDown stateIcon"></div>-->
<!--</div>-->
</div>
<div class="col-md-3 inline col-xs-8 col-sm-3">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': uzipCode.length != uzipCode, 'cInputFocusFalse': uzipCode.length == uzipCode}">ZIP Code</label>
<input type="text" pattern="\d*" id="zipCodeId" name="uzip" class="form-control ng-pristine ng-valid ng-valid-required" placeholder="ZIP" maxlength="5" zipcode="" ng-model="uzipCode" ng-required="!defaultShippingAddress && !FSA.fsaDetails" ng-class="{ 'has-error' : guest.uzip.$invalid && guest.uzip.$error.required && !guest.uzip.$pristine }" blur-valid="">
</div>
<div class="col-xs-12 visible-xs pad-0">
<label class="control-label error ng-hide" ng-show="(guest.uzip.$invalid && guest.uzip.$error.required && !guest.uzip.$pristine)"> Please enter ZIP Code.</label>
</div>
</div>
<div class="col-md-12 col-sm-12 visible-md visible-sm visible-lg">
<label class="control-label error ng-hide" ng-show="(guest.ucity.$invalid && guest.ucity.$error.required && !guest.ucity.$pristine) || (isCCVisited == 1 && uccstateid == 0 && showCCErr== 0) || (guest.uzip.$invalid && guest.uzip.$error.required && !guest.uzip.$pristine)">Please enter a <span ng-show="guest.ucity.$invalid && guest.ucity.$error.required && !guest.ucity.$pristine" class="ng-hide"> City</span><span ng-show="((guest.ucity.$invalid && guest.ucity.$error.required && !guest.ucity.$pristine) && (isCCVisited == 1 && uccstateid == 0))" class="ng-hide">, </span><span ng-show="isCCVisited == 1 && uccstateid == 0 && showCCErr == 0" class="ng-hide">State</span> <span ng-show="((guest.ucity.$invalid && guest.ucity.$error.required && !guest.ucity.$pristine)||(isCCVisited == 1 && uccstateid == 0 && showCCErr == 0)) && (guest.uzip.$invalid && guest.uzip.$error.required && !guest.uzip.$pristine)" class="ng-hide"> and </span> <span ng-show="guest.uzip.$invalid && guest.uzip.$error.required && !guest.uzip.$pristine" class="ng-hide">ZIP Code</span>
</label>
</div>
</div>
<div class="row" style="margin-bottom: 20px;">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<label class="control-label cInputFocusFalse" for="inputSuccess2" data-ng-class="{'cInputFocusTrue': uphoneNumber.length != uphoneNumber, 'cInputFocusFalse': uphoneNumber.length == uphoneNumber}">Phone Number</label>
<input type="tel" name="uphone" maxlength="16" class="form-control visible-md visible-xs visible-sm visible-lg ng-pristine ng-valid ng-valid-required" placeholder="Phone Number" ng-model="uphoneNumber" ng-required="!defaultShippingAddress && !FSA.fsaDetails" format-phone="" ng-class="{ 'has-error' : guest.uphone.$invalid && guest.uphone.$error.required && !guest.uphone.$pristine }" blur-valid="" placeholder-change="(123) 456-7890">
<label class="control-label error ng-hide" ng-show="guest.uphone.$invalid && guest.uphone.$error.required && !guest.uphone.$pristine"> Please enter a valid Phone Number.</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- <hr class="visible-md visible-sm visible-lg" style="border-top: 1px solid #C1BEBE;"> -->
<div class="hidden-lg hidden-sm hidden-md visible-xs" ng-show="shipTo">
<div class="col-md-12 col-lg col-sm-12 pad-0">
<div class="col-md-12" ng-show="shipTo && ((shipping.length)||(selectShipToAddressFlag))" style="width:136%; margin-left:-45px;">
<div class="col-md-12 col-lg col-sm-12">
<h4><span style="font-size:18px !important;">Shipping Speed</span></h4>
<!-- ngRepeat: shipMethod in shipping --><div class="cpaddingradio ng-scope" ng-repeat="shipMethod in shipping" style="margin-left:-2px !important;">
<input type="radio" class="radio col-sm-1 col-xs-1 col-md-1 radioButtonClass ng-pristine ng-valid" name="shippingSelectMobile" ng-model="selectedShipping.data" value="500" id="shipOption0" ng-change="selectShippingMethod(selectedShipping.data)">
<label for="shipOption0" class="FAST_GR_label"><span class="radioContainer ng-hide" ng-show="shipping.length>1"><span class="radioSelection ng-hide" ng-show="shipping.length>1"></span></span><b class="ng-binding">2 business days<span ng-show="shipMethod.displayValue.split('**')[1]" class="">*</span></b><br><span ng-show="shipMethod.displayValue.split('**')[1]" class="ng-binding">* If ordered by 12 pm ET</span></label>
</div><!-- end ngRepeat: shipMethod in shipping -->
<br>
</div>
</div>
</div>
</div>
<div class="reviewSeperator visible-xs reviewSeperatorWidthEdit" ng-show="!isBopus || shipTo"></div>
<div class="row">
<div class="row editCart visible-xs">
<!-- <span class="itemsCart">Items in Your Cart </span><span class="editCartDisp" ng-click="redirectTo('checkout/fs/shoppingcart_items.jsp')" style="cursor:pointer;">Edit Cart</span> -->
<span class="itemsCart ng-binding" style="font-weight:normal;">Items in Your Cart (1) </span><span class="editCartDisp" ng-click="redirectTo('checkout/fs/shoppingcart_items.jsp')" style="cursor:pointer;font-weight:700;">Edit Cart</span>
<a class="clr_black"> </a>
<span class="glyphicon glyphicon-chevron-right clr_black" aria-hidden="true"></span>
</div>
<div class="reviewSeperator visible-xs widthReviewSeparator reviewSeperatorWidthExp"></div>
<!-- BOPUS for Mobile Start -->
<div id="bopusItes" ng-show="BOPUS.bopusmode && BOPUS.bopusitems.length>0 && showBopusPickup" class="mobileshow ng-hide">
<div id="pickUpBopusMobile" class="row editCart visible-xs itemCart ng-hide" style="background-color:#f5f5f5;" ng-click="clickedEditCart()" ng-show="totalBOPUSItemsCount>0" ng-class="{'background-white':pickupToday}">
<div class="col-md-12">
<div class="row">
<div class="col-xs-1 removePadding">
<span class="glyphicon glyphicon-chevron-right removePadding marginTop15 clr_black" aria-hidden="true" ng-show="!pickupToday"></span>
<span class="glyphicon glyphicon-chevron-down removePadding marginTop15 clr_black ng-hide" ng-click="clickedEditCart()" aria-hidden="true" ng-show="pickupToday"></span>
</div>
<div class="col-xs-11 removePadding">
<span class="itemsCart boldText">Pick Up at
<span ng-show="!pickupToday" class="ng-binding">myCVS<sup>®</sup> Store Today<br>(0 item</span>
<span ng-show="pickupToday" class="ng-binding ng-hide"> (0 item</span>
<span ng-show="totalBOPUSItemsCount>1" class="ng-hide">s</span>)</span>
</div>
</div>
</div>
</div>
<div class="reviewSeperator visible-xs widthReviewSeparator reviewSeperatorWidthExp"></div>
<div aria-hidden="true" ng-show="pickupToday" style="margin-left:-15px;margin-right:-15px;" class="ng-hide">
<div class="row marginleft5 marginBottom25">
<div class="col-xs-12 col-sm-12 paddingLeft">
<div class="list-group">
<!-- ngRepeat: item in BOPUS.bopusitems -->
</div>
</div>
<div ng-show="BOPUS.storeDetails.storeTimings.length" class="ng-hide">
<div>
<h4>Store & Photo Hours</h4>
</div>
<br>
<table class="table tableWidth">
<colgroup><col width="60">
<col width="60">
<col width="60">
</colgroup><tbody><tr ng-class="{'active':day!='Sun' && day!='Sat','hiddenBorder':day=='Sun'||day=='Sat'}" class="active">
<td><b>M-F</b>
</td>
<td class="thickFont" style="width:100%;">07:00 AM - 10.00 PM
</td>
<!-- <td><b>{{BOPUS.storeDetails.storeTimings[0].Hours}}</b>
</td> -->
<!--<td>
<div class="open-text-label"><span style="font-size: 11px;font-weight: bold;">OPEN<span></div></td>-->
</tr>
<tr ng-class="{'active':day=='Sat','hiddenBorder':day!='Sat'}" class="hiddenBorder">
<td><b>SAT</b>
</td>
<td class="thickFont ng-binding" style="width:100%;">
</td>
<!-- <td><b>{{BOPUS.storeDetails.storeTimings[BOPUS.storeDetails.storeTimings.length -2].Hours}}</b>
</td> -->
</tr>
<tr ng-class="{'active':day=='Sun','hiddenBorder':day!='Sun'}" class="hiddenBorder">
<td><b>SUN</b>
</td>
<td class="thickFont ng-binding" style="width:100%;">
</td>
<!-- <td><b>{{BOPUS.storeDetails.storeTimings[BOPUS.storeDetails.storeTimings.length -1].Hours}}</b>
</td> -->
</tr>
</tbody></table>
</div>
<div ng-show="BOPUS.storeDetails.pharmacyTimings.length" class="ng-hide">
<div>
<h4>Pharmacy Hours</h4>
</div>
<br>
<table class="table tableWidth hiddenBorder">
<colgroup><col width="60">
<col width="60">
<col width="60">
</colgroup><tbody><tr ng-class="{'active':day!='Sun' && day!='Sat','hiddenBorder':day=='Sun'||day=='Sat'}" class="active">
<td><b>M-F</b>
</td>
<td class="thickFont ng-binding" style="width:110%;">
</td>
<!-- <td><b>{{BOPUS.storeDetails.pharmacyTimings[0].Hours}}</b>
</td> -->
<!--<td><div class="open-text-label"><span style="font-size: 11px;font-weight: bold;">OPEN<span></div></td>-->
</tr>
<tr ng-class="{'active':day=='Sat','hiddenBorder':day!='Sat'}" class="hiddenBorder">
<td><b>SAT</b>
</td>
<td class="thickFont ng-binding" style="width:100%;">
</td>
<!-- <td><b>{{BOPUS.storeDetails.pharmacyTimings[BOPUS.storeDetails.storeTimings.length -2].Hours}}</b>
</td> -->
</tr>
<tr ng-class="{'active':day=='Sun','hiddenBorder':day!='Sun'}" class="hiddenBorder">
<td><b>SUN</b>
</td>
<td class="thickFont ng-binding" style="width:100%;">
</td>
<!-- <td><b>{{BOPUS.storeDetails.pharmacyTimings[BOPUS.storeDetails.storeTimings.length -1].Hours}}</b>
</td> -->
</tr>
</tbody></table>
</div>
<div>
<h4>Phone Number</h4>
</div>
<br>
<div><b class="ng-binding"></b>
</div>
</div>
<div class="reviewSeperator visible-xs widthReviewSeparator"></div>
</div>
</div>
<div class="visible-xs ">
<div class="visible-xs ">
<div id="expectedColorOnclick" class="row editCart itemCart" style="background-color:#f5f5f5;" ng-show="totalHDItemsCount>0" ng-class="{'background-white':expectedDelivery}" ng-click="clickedExpectedDelivery()">
<div class="col-md-12">
<div class="row">
<div class="col-xs-1 removePadding">
<span class="glyphicon glyphicon-chevron-right removePadding marginTop15 clr_black" aria-hidden="true" ng-show="!expectedDelivery"></span>
<span class="glyphicon glyphicon-chevron-down removePadding marginTop15 clr_black ng-hide" ng-click="clickedExpectedDelivery()" aria-hidden="true" ng-show="expectedDelivery"></span>
</div>
<div class="col-xs-10 removePadding">
<span class="itemsCart removePadding boldText ng-binding">
Expected Delivery in 2 business days<br> (1 Item<span ng-show="totalHDItemsCount>1" class="ng-hide">s</span>)
</span>
</div>
</div>
</div>
</div>
<div class="visible-xs">
<div class="reviewSeperator widthReviewSeparator ng-hide" ng-show="expectedDelivery"></div>
</div>
<div ng-show="expectedDelivery" style="background-color:white;margin-left:-15px;margin-right:-15px;" class="ng-hide">
<div class="row marginleft5">
<div class="col-xs-12 col-sm-12 paddingLeft">
<div class="list-group" style="margin-bottom:0px;">
<!-- ngRepeat: item in items track by $index --><li class="list-group-item backgroundPanelStyle ng-scope" ng-repeat="item in items track by $index" style="margin-left:-17px;max-height:165px;margin-top:10px;">
<div class="row">
<div class="col-xs-8 col-sm-8">
<div class="row">
<div class="col-sm-12 col-xs-12 clipped thickFont removePadding"><span style="color:black;padding-left:10px;" class="ng-binding">Culturelle Culturelle Digestive Health Dairy Free Probiotic Supplement</span>
</div>
<div class="col-xs-5 col-sm-5 marginTop">
<img class="img-rounded cImage" alt="Description" src="/bizcontent/merchandising/productimages/small/4910040009.jpg" height="70" width="70" data-holder-rendered="true" style="max-height:80px !important;width: auto !important;min-height: 30px !important;">
</div>
<div class="col-xs-7 col-sm-7 marginTop">
<h5><strong id="displayNamenQty" class="ng-binding">Qty 1</strong></h5>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="box-grey text-right paddingTop" style="right:auto;">
<h3 class="priceContent ng-binding" style="float:left;margin-left:25%;color:black;margin-top:35px;" id="totalPrice">$24.99</h3>
</div>
</div>
</div>
</li><!-- end ngRepeat: item in items track by $index -->
</div>
</div>
</div>
</div>
</div>
<div class="reviewSeperator widthReviewSeparator reviewSeperatorWidthExp"></div>
</div>
<div class="col-md-12 col-sm-12 visible-lg visible-md visible-sm" style="padding-left:0px;border-top: 1px solid #d3d3d3;">
<h2><span style="font-weight:400px !important;" class="ng-binding">Items in Your Cart (1)</span> <b><a class="edit-cart-style" style="color: black;"><span class="cspanEditCartFont" ng-click="redirectTo('checkout/fs/shoppingcart_items.jsp')" style="cursor:pointer;margin-left: -9px !important;">Edit Cart<p class="editcartimg r-aimg"></p></span></a></b></h2>
<!-- Bopus items start -->
<div ng-show="BOPUS.bopusmode" class="ng-hide">
<div id="bopusItes" class="visible-lg visible-md visible-sm">
<div class="row">
<h4 class="col-md-12 ng-binding">
Pick Up at myCVS<sup>®</sup> Store Today (0 Item<span ng-show="totalBOPUSItemsCount>1" class="ng-hide">s</span>)
</h4>
</div>
<div class="row">
<h4 class="col-md-9 col-sm-9 ng-binding" style="width: inherit;padding-right: 0;"> |</h4>
<!-- <h4 class="col-md-4">
Details
</h4> -->
<h4><a class="details-style edit-cart-style" ng-href="" load-popover="" data-placement="top" data-toggle="popover" data-content="<a type='button' title='Close' data-dismiss='modal'><span class='icon-arrow-right pull-right close margin-right-20px'><img id='closeIconGuest' ng-mouseover='changeIcon1();' ng-mouseleave='hoverOut1();' ng-click='clickIconChange();' src='/webcontent/customerCheckout/img/icon-modal-close.png'></span></a>
<div class='text-left'><h5>Store & Photo Hours</h5></div>
<table class='storeDetailsFont store-details-table'>
<col width='60'>
<col width='120'>
<tr class='mon-to-fri details-table-rows'>
<td class='add-padding-td'>M-F
</td>
<td class='add-padding-td'>
</td>
</tr>
<tr class='sat details-table-rows'>
<td class='add-padding-td'>SAT
</td>
<td class='add-padding-td'></td>
</tr>
<tr class='sun details-table-rows'>
<td class='add-padding-td'>SUN
</td>
<td class='add-padding-td'></td>
</tr>
</table>
<div class='text-left'><h5>Pharmacy Hours</h5></div>
<table class='storeDetailsFont store-details-table'>
<col width='60'>
<col width='120'>
<tr class='mon-to-fri details-table-rows'>
<td class='add-padding-td'>M-F
</td>
<td class='add-padding-td'>
</td>
</tr>
<tr class='sat details-table-rows'>
<td class='add-padding-td'>SAT
</td>
<td class='add-padding-td'>
</td>
</tr>
<tr class='sun details-table-rows'>
<td class='add-padding-td'>SUN
</td>
<td class='add-padding-td'>
</td>
</tr>
</table>
<div class='text-left'><h4>Phone Number</h4>
</div>
<div class='text-left margin-bottom-10'><b></b>
</div>" data-original-title="" title=""> <span class="detailsHover">Details</span></a>
</h4>
<!-- <div class="col-md-4" popover-template="info.html" popover-trigger="mouseenter">
<h4>Details</h4>
</div> -->
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<!-- ngRepeat: item in BOPUS.bopusitems -->
</div>
</div>
</div>
</div>
</div>
<!-- BOPUS Items list end -->
<!-- Bopus items end -->
<div ng-show="shipTo" class="">
<div class="row">
<h4 class="col-md-12 ng-binding" style="font-size:18px !important;">
Expected Delivery in 2 business days (1 Item<span ng-show="totalHDItemsCount>1" class="ng-hide">s</span>)
</h4>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<!-- ngRepeat: item in items --><li class="list-group-item box-grey height-flexible ng-scope" ng-repeat="item in items" style="min-height:0px !important">
<div class="row">
<div class="col-md-2 col-sm-2">
<img class="img-rounded cImage" alt="Description" src="/bizcontent/merchandising/productimages/small/4910040009.jpg" height="70" width="70" data-holder-rendered="true" style="max-height:80px !important;width: auto !important;min-height: 30px !important;">
</div>
<div class="col-md-5 col-sm-5" style="padding-left:25px;">
<h5 class="marg-btm0" id="displayNamenQty"><strong style="font-weight:400 !important;" class="ng-binding">Culturelle Culturelle Digestive Health Dairy Free Probiotic Supplement</strong></h5>
<span ng-show="item.itemCatalogData.fsaEligibleFlag=='Y'" class="ng-hide"><div class="fsaIconClassGuest"></div><span>FSA</span></span>
<p class="small size-font ng-binding">Size: 30 EA</p>
<span ng-show="item.itemOrderData.selectedShipSaveOption" class="ng-hide"><img src="/webcontent/customerCheckout/img/shippay.png"> <span class="ng-binding">Ship every </span></span>
</div>
<div class="col-md-5 col-sm-5">
<span ng-show="i.itemCatalogData.fsaEligibleFlag=='Y'" class="ng-hide"><div class="fsaIconClassGuest"></div><span>FSA</span></span>
</div>
<div class="col-md-2 col-sm-3">
<h5><strong id="displayNamenQty" class="ng-binding">Qty 1</strong></h5>
</div>
<div class="col-md-3 col-sm-3 box-grey text-right box-grey-container">
<h4><b id="totalPrice" class="ng-binding">$24.99</b></h4>
<p class="small" id="discountsStyle"><span ng-show="item.itemCatalogData.itemPrice['Sale Price']" class="ng-binding">$24.99 </span><s ng-show="item.itemCatalogData.itemPrice['Sale Price'] && item.itemCatalogData.itemPrice['Sale Price'] != item.itemCatalogData.itemPrice.listPrice" class="ng-binding ng-hide">$24.99</s><span ng-show="!item.itemCatalogData.itemPrice['Sale Price']" class="ng-binding ng-hide">$24.99</span></p>
<p class="small ng-binding ng-hide" ng-show="item.itemCatalogData.itemPrice.offer" id="discountsStyle"> </p>
<p class="small ng-binding ng-hide" ng-show="item.itemOrderData.itemSavings.savings" id="discountsStyle">$ savings
</p>
</div>
</div>
</li><!-- end ngRepeat: item in items -->
</div>
</div>
</div>
</div>
</div>
<div ng-show="isBopus" class="ng-hide">
<div class="visible-xs mar-LR">
<div class="container content">
<div class="col-md-12 pad-0">
<div class="row">
<div class="col-md-12 col-sm-12 backgroundClr width-bcc-content bopus-footer">
<p ng-show="bopusFooter" ng-bind-html="bopusFooter" class="font-size-12 ng-binding ng-hide"></p>
<p ng-show="!bopusFooter" class="font-size-12">PICKUP INFORMATION: Your order can be picked up at the selected myCVS<sup>®</sup> store in as little as 1 hour and will be held for 2 days. Orders placed while store is closed, or within 1 hour of closing, will be ready for pickup 1 hour after the store re-opens.
</p>
<p ng-show="!bopusFooter" class="font-size-12">EXTRABUCKS<sup>®</sup> REWARDS: To earn 2% back in Quarterly ExtraBucks<sup>®</sup> Rewards. customer must enter their ExtraCare<sup>®</sup> card number during online checkout.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-5" id="docDiv" ng-class="desktopView == false ? 'dockableDiv':''">
<div class="col-md-12 col-sm-12 fixedcontclass" id="orderSummaryBcc" style="padding: 0 !important;z-index:1039 !important;" ng-class="desktopView ? hideLegalNotice ? 'fixedcontclass':'absolutecontclass':''">
<div class="reviewSeperator visible-xs widthReviewSeparator order-summary"></div>
<div class="visible-lg visible-md visible-sm hidden-xs" ng-show="shipTo">
<div class="col-md-12 col-lg col-sm-12 pad-0">
<div class="col-md-12" ng-show="shipTo && ((shipping.length)||(selectShipToAddressFlag))" style="width:136%; margin-left:-45px;">
<div id="summaryBoxTop" class="col-md-12 col-lg col-sm-12 box-grey box-grey-desktop width-tablet-web" ng-class="{'width-tablet-web':!isIpadApp}">
<h4><b>Shipping Speed</b></h4>
<!-- ngRepeat: shipMethod in shipping --><div class="cpaddingradio ng-scope" ng-repeat="shipMethod in shipping">
<input type="radio" class="radio col-sm-1 col-xs-1 col-md-1 radioButtonClass ng-pristine ng-valid" name="shippingSelect" ng-model="selectedShipping.data" value="500" id="shipOption0" ng-change="selectShippingMethod(selectedShipping.data)">
<label for="shipOption0" class="FAST_GR_label"><span class="radioContainer ng-hide" ng-show="shipping.length>1"><span class="radioSelection ng-hide" ng-show="shipping.length>1"></span></span><b class="ng-binding">2 business days<span ng-show="shipMethod.displayValue.split('**')[1]" class="">*</span></b><br><span ng-show="shipMethod.displayValue.split('**')[1]" class="ng-binding">* If ordered by 12 pm ET</span></label>
</div><!-- end ngRepeat: shipMethod in shipping -->
</div>
</div>
</div>
</div>
<div ng-show="serviceReturnFlag" class="">
<div class="row ipadPotrait width-tablet-web" ng-class="{'order-summary-bopus-margin':!shipTo,'width-tablet-web':!isIpadApp}">
<div class="col-md-12 removePadding">
<div class="box-grey addPadding15RL ipadPotarit-margin-top-20" id="summaryBoxBottom">
<div class="row">
<div class="col-md-12 visible-lg visible-md visible-sm">
<h4 style="margin-top:10px;margin-bottom:15px;font-size:18px;color:#404040;">Order Summary</h4>
<div class="text-left cFloatLeft" style="margin-bottom:5px;">Subtotal <span ng-show="couponsDetails.length" class="ng-hide">(including <b ng-click="showCoupons()" class="font-color-12 boldText detailsHover" style="cursor:pointer;font-size: 14px !important;">coupons</b>)</span>
</div>
<div class="text-right cFloatRight ng-binding" style="margin-bottom:5px;">$24.99</div>
</div>
<div class="col-md-12 visible-xs marginTop" style="margin-bottom:5px;">
<div class="text-left cFloatLeft">Subtotal <span ng-show="couponsDetails.length" class="ng-hide">(including <b ng-click="couponFlagTrigger()" style="cursor:pointer;font-size: 14px !important;" class="boldText detailsHover">coupons</b>)</span>
</div>
<div class="text-right cFloatRight ng-binding">$24.99</div>
</div>
<div class="row ng-hide" ng-show="couponFlag" ng-class="{'couponFlagArrow' : couponFlag==true}" style="margin-bottom:5px;">
<div class="col-sm-12 col-xs-12 coupons">
<div class="row marginTop10">
<div class="col-sm-6 col-xs-6">
<h5 class="removeMargin">Coupons Applied</h5>
</div>
<div class="col-sm-6 col-xs-6">
<span class="remove-icon cFloatRight" ng-click="couponFlag=false">X</span>
</div>
</div>
<div class="row marginTop10">
<span class="col-sm-6 col-xs-6">
<h5 class="removeMargin">Offer Details:</h5>
</span>
<div class="col-sm-6 col-xs-6">
<h5 class="removeMargin rightAlign">Savings</h5>
</div>
</div>
<!-- ngRepeat: coupon in couponsDetails -->
</div>
</div>
</div>
<div class="row ng-hide" ng-show="orderSummary.extraCareRewards > 0" style="margin-bottom:5px;">
<div class="col-md-12">
<div class="text-left cFloatLeft">ExtraBucks<sup>®</sup> Rewards </div>
<div class="text-right cFloatRight ng-binding">-$0.00</div>
</div>
</div>
<div class="row" ng-show="shipTo" style="margin-bottom:5px;">
<div class="col-md-12">
<div class="text-left cFloatLeft">Shipping</div>
<div ng-show="orderSummary.shippingCost == 0" class="text-right cFloatRight ng-binding ng-hide" ng-bind="'Free'">Free</div>
<div ng-show="orderSummary.shippingCost > 0" class="text-right cFloatRight ng-binding" ng-bind="(orderSummary.shippingCost | currency)">$5.49</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin-bottom:5px;">
<div class="text-left cFloatLeft" id="estimated-tax-id">
<div class="pull-left">Estimated Tax </div>
<!-- <span class="glyphicon glyphicon-question-sign" popover="Your order may be subject to state and local taxes depending on the shipping address or store location you requested and will be charged when your order is shipped or picked up." popover-trigger="mouseenter">
</span> -->
<img id="questn-icon-gust" ng-mouseover="changeIcon();" ng-mouseleave="hoverOut();" src="/webcontent/customerCheckout/img/questn_icon.png" style="margin-left: 7px;margin-top: 3px;" ng-href="" load-popover="" data-placement="top" data-toggle="popover" data-content="<a type='button' title='Close' data-dismiss='modal'><span class='icon-arrow-right pull-right close margin-right-20px'><img id='closeIconGuest' ng-mouseover='changeIcon1();' ng-mouseleave='hoverOut1();' ng-click='clickIconChange();' src='/webcontent/customerCheckout/img/icon-modal-close.png'></span></a>Your order may be subject to state and local taxes depending on the shipping address or store location you requested and will be charged when your order is shipped or picked up." popover-trigger="mouseenter" class="visible-lg visible-md visible-sm cFloatRight" data-original-title="" title="">
<img src="/webcontent/guestCheckout/img/questn_icon.png" id="estimatedTax" class="visible-xs pull-left pad-lt-5px" ng-click="taxFlagTrigger()">
</div>
<div class="row clearfix ng-hide" ng-show="taxFlag" ng-class="{'taxFlagArrow' : taxFlag==true}" style="margin-bottom:5px;">
<div class="col-sm-12 col-xs-12 coupons">
<div class="row marginTop10">
<div class="col-sm-10 col-xs-10">
<p class="removeMargin">Your order may be subject to state and local taxes depending on the shipping address or store location you requested and will be charged when your order is shipped or picked up.</p>
</div>
<div class="col-sm-2 col-xs-1 estimation-close">
<span class="remove-icon" ng-click="taxFlag=false">X</span>
</div>
</div>
</div>
</div>
<div class="text-right cFloatRight ng-binding" ng-show="shipTo" ng-bind="(zipCode.length >=5) ? '$'+(orderSummary.estimatedCost) : '-' " ng-filter="decimalPlaces">-</div>
<div class="text-right cFloatRight ng-binding ng-hide" ng-show="isBopus && !shipTo">$0.00</div>
</div>
</div>
<div class="row">
<div class="col-md-12 hidden-xs">
<div class="text-left cFloatLeft">
<b>TOTAL</b>
</div>
<div class="text-right cFloatRight">
<b class="ng-binding">$30.48</b>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 hidden-xs">
<button type="button" class="btn btn-danger btn-lg btn-block" id="button-hover" ng-click="sendPlaceOrderRequest()" style="color:white !important;">Place Order</button>
</div>
<div class="col-md-12 visible-xs">
<button type="button" class="placeorder-btn btn btn-danger btn-lg btn-block" ng-click="sendPlaceOrderRequest()">
<span style="float: left">Place Order</span><span style="margin-left: 10px;float: right;" class="pull-right ng-binding">$30.48</span>
</button>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 footer-list">
<ul>
<li ng-show="isSSItemPresent" class="ng-hide">
<p ng-click="ClickedShipnSave()" style="margin-left:-4px!important;" class="font-color-12" ng-mouseover="changeIconEdit1();" ng-mouseleave="hoverOutEdit1();"><img id="edit_hover_guest1" class="r-aimg1 ng-hide" src="/webcontent/customerCheckout/img/arrow-grey-down_for_shipping_normal.png" ng-show="!hideShipnSave"><img id="edit_hover_guest" src="/webcontent/customerCheckout/img/arrow_for_edit_shipping_normal.png" class="r-aimg1" ng-show="hideShipnSave "> <b>About Ship & Save</b>
</p>
<p ng-show="!hideShipnSave && shipnSavebccContent" ng-bind-html="shipnSavebccContent" class="ng-binding ng-hide"></p>
<p ng-show="!hideShipnSave && !shipnSavebccContent" class="ng-hide">Must have CVS.com<sup>®</sup> account to enroll. You will receive free shipping on all subscription items, and 20% off price of item(s) (or the sale price on a first-time order if sale discount is greater than 20%). Discounts cannot be combined. Savings are not transferable. No cash back. Tax charged on full price where required. Free standard shipping applies to all Ship & Save subscription orders. Surcharges may apply.</p>
<!-- <p ng-show="!showLoading" >
<img class="col-md-offset-5 col-sm-offset-5 col-lg-offset-5" src="https://www.getjsresource.com/customer-checkout/img/ajax-loader.gif">
</p> -->
</li>
<li>
<p style="margin-left:-4px!important;" ng-click="ClickedLegalNotice()" class="font-color-12" ng-mouseover="changeIconEdit();" ng-mouseleave="hoverOutEdit();"><img id="edit_hover_guestt1" src="/webcontent/customerCheckout/img/arrow-grey-down_for_shipping_normal.png" ng-show="!hideLegalNotice" class="ng-hide"><img id="edit_hover_guestt" src="/webcontent/customerCheckout/img/arrow_for_edit_shipping_normal.png" ng-show="hideLegalNotice" class=""><b> Shipping & Returns Policies</b>
</p>
<p ng-show="!hideLegalNotice && legalContent" ng-bind-html="legalContent" class="ng-binding ng-hide"></p>
<p ng-show="!hideLegalNotice && !legalContent" class="ng-hide">Certain items are flagged "This item cannot be shipped by air" and must ship ground via our standard delivery option. To proceed with priority or express shipping, or for shipments to Alaska, Hawaii, APO/FPO or US territory addresses, you will need to remove these items from the order. Additional item surcharges or weight surcharges for orders over ten pounds may apply.
<br><b><a class="details-style" target="_blank" href="/help/help_subtopic_details.jsp?parentTopicName=Shopping+Online+&parentTopicId=500012&subtopicName=Shipping+Information&topicid=300004#shippingRates">Review our Shipping Rates</a></b>
<br>
<b><a class="details-style" target="_blank" href="/help/help_subtopic_details.jsp?parentTopicName=Shopping+Online+&parentTopicId=500012&subtopicName=Shipping+Information&topicid=300004">Review our Shipping and Handling Policy</a></b>
<br>
<b><a class="details-style" target="_blank" href="/help/help_subtopic_details.jsp?parentTopicName=Shopping+Online+&parentTopicId=500012&subtopicName=Return+Policy&topicid=300002">Review our Return Policy</a></b>
</p>
<!-- <p ng-show="!showLegalLoading" >
<img class="col-md-offset-5 col-sm-offset-5 col-lg-offset-5" src="https://www.getjsresource.com/customer-checkout/img/ajax-loader.gif">
</p> -->
<!-- <p ng-show="!hideLegalNotice">
<br><b><a class="details-style" target="_blank" href="/help/help_subtopic_details.jsp?parentTopicName=Shopping+Online+&parentTopicId=500012&subtopicName=Shipping+Information&topicid=300004#shippingRates">Review our Shipping Rates</a></b>
<br>
<b><a class="details-style" target="_blank" href="/help/help_subtopic_details.jsp?parentTopicName=Shopping+Online+&parentTopicId=500012&subtopicName=Shipping+Information&topicid=300004">Review our Shipping and Handling Policy</a></b>
<br>
<b><a class="details-style" target="_blank" href="/help/help_subtopic_details.jsp?parentTopicName=Shopping+Online+&parentTopicId=500012&subtopicName=Return+Policy&topicid=300002">Review our Return Policy</a></b>
</p> -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sticky-anchor"></div>
</div>
<!-- Right Side -->
<div ng-show="isBopus && desktopView" class="ng-scope ng-hide">
<div class="container content">
<div class="col-md-12 ipadcustom col-sm-12" ng-class="{'ipadcustom':!isIpadApp,'col-sm-12':!isIpadApp,'col-sm-9':isIpadApp}">
<div class="row">
<div class="col-md-12 col-sm-12 backgroundClr font-size-13px width-bcc-content width-bcc-content-footer" style="padding:20px; margin-top:15px;margin-bottom:15px;width:55% !important;" ng-class="{'width-bcc-content-footer':!isIpadApp,'width-bcc-content-ipad-app':isIpadApp}">
<p ng-show="bopusFooter" ng-bind-html="bopusFooter" class="ng-binding ng-hide"></p>
<p ng-show="!bopusFooter" class="">PICKUP INFORMATION: Your order can be picked up at the selected myCVS<sup>®</sup> store in as little as 1 hour and will be held for 2 days. Orders placed while store is closed, or within 1 hour of closing, will be ready for pickup 1 hour after the store re-opens.
</p>
<p ng-show="!bopusFooter" class="">EXTRABUCKS<sup>®</sup> REWARDS: To earn 2% back in Quarterly ExtraBucks<sup>®</sup> Rewards. customer must enter their ExtraCare<sup>®</sup> card number during online checkout.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Coupons Popup -->
<script type="text/ng-template" id="modalCoupons" class="ng-scope">
<div class="modal-header noBorderBottom">
<div>
<div class="text-left cFloatLeft">
<h3 class="modal-title">Coupons Applied</h3>
</div>
<div class="text-right cFloatRight"><span style="font-size: 150%;cursor:pointer;" ng-click="CloseCouponsModal()">X</span>
</div>
</div>
</div>
<div class="modal-body">
<table class="coupons cCouponsBackGround">
<tr>
<th class="text-left nobold">Offer Details</th>
<th class="text-right nobold">Savings</th>
</tr>
<tr ng-repeat="coupon in couponsDetails" class="cCouponsRowBackGround">
<td class="text-left">{{coupon.desc}}</td>
<td class="text-right">{{coupon.discount | currency}}</td>
</tr>
</table>
<table class="coupons cCouponsBackGround">
<tbody>
<tr>
<td class="text-left" style="
width: 56%;
">
</td>
<td class="text-right"><b class="ng-binding">Total Savings: {{totalCouponsDiscount | currency}}</b>
</td>
</tr>
</tbody>
</table>
</div>
<!-- <div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div> -->
</script>
<!-- Out ZIP Code Items -->
<script type="text/ng-template" id="ZIPitems" class="ng-scope">
<div class="modal-header">
<h3 class="modal-title">
<span class="restrictedModelTitle" ng-click="CloseZIPModal();">X</span>
</h3>
</div>
<div class="outOfZIPerr">
<h5 class="modal-title paa"><span class="glyphicon glyphicon-warning-sign iconColourSize"></span><b> One or more items cant be delivered to your ZIP Code.</b>
</h5>
</div>
<div class="modal-body">
<h5><b style="cursor:pointer;" ng-click="showReason = true"> > Why not? </b></h5>
<h6><b ng-show="showReason">This item is prohibited by law from shipping to the following locations: AB, AL, FL, MA, MI, TX.</b></h6>
<div class="row" ng-show="!isNoZIPItemsAvailable">
<div class="col-md-12">
<div class="list-group">
<li class="list-group-item box-grey" ng-repeat="item in zipItems">
<div class="row">
<div class="col-md-2 col-sm-2">
<img class="img-rounded cImage" alt="Description" src="/bizcontent/merchandising/productimages/small/{{item.itemCatalogData.upcNumber}}.jpg" height="70" width="70" data-holder-rendered="true" style="max-height:80px !important;width: auto !important;min-height: 30px !important;">
</div>
<div class="col-sm-offset-1 col-md-offset-1 col-md-4 col-sm-4">
<h5><strong>{{item.itemCatalogData.brand}} {{item.itemCatalogData.displayName}}</strong></h5>
<p class="small size-font" ng-show="item.itemCatalogData.size">Size: {{item.itemCatalogData.size}} {{item.itemCatalogData.measure}}</p>
</div>
<div class="col-md-2 col-sm-3">
<h5><strong id="displayNamenQty">Qty {{item.itemOrderData.qty}}</strong></h5>
</div>
<div class="col-md-3 col-sm-3 box-grey text-right box-grey-container">
<h4 id="totalPrice">${{item.itemOrderData.itemTotal}}</h4>
<p class="small" id="discountsStyle"><span ng-show="item.itemCatalogData.itemPrice['Sale Price']">${{item.itemCatalogData.itemPrice['Sale Price']}} </span><s ng-show="item.itemCatalogData.itemPrice['Sale Price'] && item.itemCatalogData.itemPrice['Sale Price'] != item.itemCatalogData.itemPrice.listPrice">${{item.itemCatalogData.itemPrice.listPrice}}</s><span ng-show="!item.itemCatalogData.itemPrice['Sale Price']">${{item.itemCatalogData.itemPrice.listPrice}}</span>
<p class="small" ng-show="item.itemCatalogData.itemPrice.offer" id="discountsStyle">{{item.itemCatalogData.itemPrice.offer}}</p>
<p class="small" ng-show="item.itemOrderData.itemSavings.savings" id="discountsStyle">${{item.itemOrderData.itemSavings.savings}} savings</p>
</div>
</div>
</li>
</div>
</div>
</div>
<div class="row" ng-show="isNoZIPItemsAvailable">
<div class="col-md-12 successRestrict">
<h5>You've successfully removed these items from your order</h5>
</div>
</div>
<div class="row" ng-show="showError">
<div class="col-md-12 successRestrict">
<h5>Items are not removed. Please try again.</h5>
</div>
</div>
<div class="row" ng-show="!isNoZIPItemsAvailable">
<div class="col-md-12">
<h5>Please choose one of the following:</h5>
</div>
</div>
<div class="row" ng-show="!isNoZIPItemsAvailable">
<div class="col-md-5 col-sm-5">
<button class=" btn btn-danger btn-lg btnRestricted btnClr" type="button" ng-click="updateShipping()">Update Shipping Address</button>
</div>
<div class="col-md-4 col-sm-4" ng-show="!isNoZIPItemsAvailable">
<button class=" btn btn-lg btnRestricted" type="button" ng-click="deleteZIPItems()">Delete Items</button>
</div>
</div>
<div class="row" ng-show="!isNoZIPItemsAvailable">
<div class="col-md-12">
<h5>All items in your order must ship to this address.</h5>
</div>
</div>
</div>
</script></div>
</div>
<!-- other libraries -->
<script src="/webcontent/guestCheckout/lib/x2js/xml2json.min.js"></script>
<!-- angular -->
<script src="/webcontent/guestCheckout/lib/angular/angular.min.js"></script>
<script src="/webcontent/guestCheckout/lib/angular-route/angular-route.min.js"></script>
<script src="/webcontent/guestCheckout/lib/angular-resource/angular-resource.min.js"></script>
<script src="/webcontent/guestCheckout/lib/angular-animate/angular-animate.min.js"></script>
<script src="/webcontent/guestCheckout/lib/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/webcontent/guestCheckout/lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/webcontent/guestCheckout/lib/angular-http-loader/angular-http-loader.min.js"></script>
<script src="/webcontent/guestCheckout/js/ie8-shim.js"></script>
<!-- other libraries -->
<script src="/webcontent/guestCheckout/lib/selectivizr/selectivizr.js"></script>
<script src="/webcontent/guestCheckout/lib/iframe-resizer/iframeResizer.contentWindow.min.js"></script>
<!--- Placeholders for IE 8 -->
<script src="/webcontent/guestCheckout/lib/placeholders/placeholders.min.js"></script>
<!-- encryption -->
<script src="/webcontent/guestCheckout/lib/cryptojs/rollups/aes.js"></script>
<script src="/webcontent/guestCheckout/lib/cryptojs/components/mode-ecb-min.js"></script>
<script src="/webcontent/guestCheckout/lib/cryptojs/rollups/sha256.js"></script>
<script src="/webcontent/guestCheckout/lib/cryptojs/components/enc-base64.js"></script>
<!-- App Files -->
<script src="/webcontent/guestCheckout/js/app.js"></script><script src="/webcontent/guestCheckout/lib/angular-base64/angular-base64.min.js"></script>
<script src="/webcontent/guestCheckout/js/controllers.js"></script>
<script src="/webcontent/guestCheckout/js/directives.js"></script>
<script src="/webcontent/guestCheckout/js/factories.js"></script><script src="/webcontent/guestCheckout/js/factories/localytics.js"></script><script src="/webcontent/guestCheckout/lib/cryptojs/rollups/aes.js"></script><script src="/webcontent/guestCheckout/lib/cryptojs/components/mode-ecb-min.js"></script><script src="/webcontent/guestCheckout/lib/cryptojs/rollups/sha256.js"></script><script src="/webcontent/guestCheckout/lib/cryptojs/rollups/pbkdf2.js"></script> <script src="lib/cryptojs/components/enc-base64.js"></script>
<script src="/webcontent/guestCheckout/js/filters.js"></script>
<script src="/webcontent/guestCheckout/js/services.js"></script>
<!-- Controllers -->
<script src="/webcontent/guestCheckout/js/controllers/shipnpayCtrl.js"></script>
<!-- Directives -->
<!-- Factories -->
<script src="/webcontent/guestCheckout/js/factories/activeModel.js"></script>
<script src="/webcontent/guestCheckout/js/factories/cookieService.js"></script>
<script src="/webcontent/guestCheckout/js/factories/encryption.js"></script>
<script src="/webcontent/guestCheckout/js/factories/errorFactory.js"></script>
<script src="/webcontent/guestCheckout/js/factories/help.js"></script>
<script src="/webcontent/guestCheckout/js/factories/serviceFactory.js"></script>
<script src="/webcontent/guestCheckout/js/factories/urlMaker.js"></script>
<script src="/webcontent/guestCheckout/js/factories/xdrService.js"></script>
<script src="/webcontent/guestCheckout/js/factories/creditcardFactory.js"></script>
<script src="/webcontent/guestCheckout/js/factories/gcheckoutFactory.js"></script>
<script src="/webcontent/guestCheckout/js/factories/states.js"></script>
<script src="/webcontent/guestCheckout/js/factories/taggingFactory.js"></script>
<!-- Services -->
<script src="/webcontent/guestCheckout/js/services/configService.js"></script>
<script src="/webcontent/guestCheckout/js/services/eccrFactory.js"></script>
<script>
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById("oneClickCustomerCheckout"), ['gcheckout']);
});
</script>
<!--Fix for the defect 6667 - Calling a dummy service for every 5 minutes for 4 times as per the approach given in CVS architect -->
<script>
var increment = 0;
var returnVal;
window.onload=function() {
returnVal = window.setInterval("redirect()", 300000);
};
function redirect() {
increment = increment + 1;
if (increment < 5) {
$.ajax({
type: 'GET',
url: "/rest/model/cvs/commerce/order/CvsCheckoutActor/dummyOrderService",
dataType: "JSON",
success: function (json) {
},
});
} else {
window.clearInterval(returnVal)
}
}
</script>
<!--Fix for the defect 6667 end -->
<script type="text/javascript">
var utag_data = {
platform : "CVS_DESKTOP",
UTEMD : "",
state_extracare_link : "false",
ExtracareCookieFlag : "false",
state_logged_in : "ANONYMOUS",
site_name : "CVS.COM",
UTEPHID : "",
state_authentication : "false",
bopus_eligible_store_flag : "",
currency : "USD",
country : "US",
breadcrumb : [],
my_cvs_store_id : "",
navigation_page : "",
page_category : "",
UTCNO : "kQc97Mp19th3liddFiTMiA==",
environment : "www.cvs.com",
popup_flag : "STANDARD",
language : "EN",
server_timestamp : "2016:02:11-21:34:08",
page_name : "",
UTECNID : "",
}
</script>
<script type="text/javascript">
(function(a,b,c,d){
a='//tags.tiqcdn.com/utag/cvs/cvs/prod/utag.js'
b=document;c='script';d=b.createElement(c);d.src=a;d.type='text/java'+c;d.async=true;
a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);})();
</script>
<div style="width:0px; height:0px; display:none; visibility:hidden;" id="batBeacon0.6028700801543891"><img style="width:0px; height:0px; display:none; visibility:hidden;" id="batBeacon0.8791841322090477" width="0" height="0" src="https://bat.r.msn.com/action-uic/0?ti=4016386&Ver=2&mid=c05ef242-1611-60bd-0e16-11a8aa10b7bb&evt=pageLoad&lt=730&pi=-1748725250&lg=en-US&sw=798&sh=600&sc=24&tl=CVS pharmacy | Guest Checkout&p=https%3A%2F%2Fwww.cvs.com%2Fcheckout%2Ffs%2Fcheckout.jsp%3F_requestid%3D868980%23%2F&r=&rn=444465"><img style="width:0px; height:0px; display:none; visibility:hidden;" id="batBeacon0.591590026859194" width="0" height="0" src="https://bat.bing.com/action/0?ti=4016386&Ver=2&mid=c05ef242-1611-60bd-0e16-11a8aa10b7bb&evt=pageLoad&lt=730&pi=-1748725250&lg=en-US&sw=798&sh=600&sc=24&tl=CVS pharmacy | Guest Checkout&p=https%3A%2F%2Fwww.cvs.com%2Fcheckout%2Ffs%2Fcheckout.jsp%3F_requestid%3D868980%23%2F&r=&rn=493312"></div><script type="text/javascript" src="https://bs.serving-sys.com/Serving?cn=ot&onetagid=3821&dispType=js&sync=0&pageurl=$$https%3A//www.cvs.com/checkout/fs/checkout.jsp%3F_requestid%3D868980%23/$$&activityValues=$$Session=1455242650111$$&ns=0&rnd=6339283345732838" async=""></script><script type="text/javascript" src="https://bs.serving-sys.com/Serving?cn=ot&onetagid=3821&dispType=js&sync=0&pageurl=$$https%3A//www.cvs.com/checkout/fs/checkout.jsp%3F_requestid%3D868980%23/$$&activityValues=$$Session=1455242650111$$&ns=0&rnd=2779276368673891" async=""></script><iframe scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="display: none; width: 0px; height: 0px;"></iframe><iframe scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="display: none; width: 0px; height: 0px;"></iframe></body></html>