- ID de l'analyse :
- 92259ea4-f71e-4172-81d6-4065e8e09937Terminée
- URL soumise :
- https://www.greenvelope.com/card/1zMBNDR/0
- Fin du rapport :
Liens : 0 trouvé(s)
Liens sortants identifiés à partir de la page
Variables JavaScript : 401 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
| Nom | Type |
|---|---|
| 0 | object |
| Event | function |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| Notification | function |
| Sentry | object |
| SentryBeforeSend | function |
| SentryIgnoreErrors | object |
| SentryDenyUrls | object |
Messages de journal de console : 1 trouvé(s)
Messages consignés dans la console web
| Type | Catégorie | Enregistrement |
|---|---|---|
| log | other |
|
HTML
Le corps HTML de la page en données brutes
<!DOCTYPE html><html lang="en-US"><head><link rel="preconnect" href="https://js.stripe.com"><link rel="preconnect" href="https://js.greenvelope.com"><link rel="preconnect" href="https://cdn.greenvelope.com"><link rel="preconnect" href="https://cdnjs.greenvelope.com"><link rel="preconnect" href="https://cdnserver.greenvelope.com">
<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflkvQ6Kw/www-widgetapi.js" async=""></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script type="text/javascript" async="" src="https://cdn.mxpnl.com/libs/mixpanel-2.2.min.js"></script><script src="https://cdnjs.greenvelope.com/_js/lib/sentry.7.38.0.min.js"></script>
<script src="https://www.greenvelope.com/viewer2/sentry-init.min.js"></script>
<script>Sentry.init({ dsn: 'https://[email protected]/2302001', environment: 'prod', release: '20241211131122', beforeSend: SentryBeforeSend, ignoreErrors: SentryIgnoreErrors, denyUrls: SentryDenyUrls });Sentry.configureScope(function(scope) { scope.setUser({ id: '1zMBNDR' }) });</script>
<script type="text/javascript">
var cdnURL = 'https://cdn.greenvelope.com/';
</script>
<meta charset="utf-8"><title>
Holiday Card 2024 - US and Canada Clients | Greenvelope.com
</title><meta name="robots" content="noindex">
<link href="https://cdnpng.greenvelope.com/user/favicon.png" rel="shortcut icon" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta property="og:title" content="Holiday Card 2024 - US and Canada Clients"><meta property="og:url" content="https://www.greenvelope.com/card/1zMBNDR/0"><meta property="og:image" content="https://www.greenvelope.com/viewer/envelope.ashx?mode=cardjpg&ActivityCode=1zMBNDR">
<script type="text/javascript">
var activityCodeViewer = '1zMBNDR',
guestAddlIDViewer = '0',
previewStyleID = '',
designTagID = '',
langCode = '',
isReadOnly = false,
eventSenderID = 0,
staticMode = false,
printWithCard = false,
isPrintable = false,
isDetailsOnly = false,
pageQS = '',
previewLabelIDs = '',
backgroundAnimationStart = 0;
</script>
<script src="https://js.greenvelope.com/_js/viewerlib.min.js?v=20230627103135" type="text/javascript"></script>
<script src="https://cdnjs.greenvelope.com/_js/lib/knockout/knockout-3.5.0.js"></script>
<script type="text/javascript">
try {
$
} catch (e) {
alert("Oops, something went wrong. Please try reloading the page");
}
</script>
<script src="https://js.greenvelope.com/_js/global.js?v=20230809104144" type="text/javascript"></script>
<script src="https://www.greenvelope.com/_dist/js/utility.min.js?v=20240919092209" type="text/javascript"></script>
<script src="https://js.greenvelope.com/user/_js/models/app.js?v=20241212161326"></script>
<script src="https://www.greenvelope.com/viewer2/_dist/vm.js?v=20241202114917"></script>
<script src="https://js.greenvelope.com/_js/ko-custom.js?v=20241004111049" type="text/javascript"></script>
<script src="https://js.greenvelope.com/_js/mixpanelV4.js?v=20231212104848" type="text/javascript"></script>
<script src="https://cdnjs.greenvelope.com/_js/lib/jquery.fine-uploader/jquery.fine-uploader.js?v=20231212104848" type="text/javascript"></script>
<script src="https://cdnjs.greenvelope.com/_js/lib/easyXDM.debug.js" type="text/javascript" defer=""></script>
<script type="text/javascript">try { mixpanel.init("db196898200383f6592b80c907d4c4bf"); } catch(err) { }</script><script language="javascript" type="text/javascript">
try {
mixpanel.register_once({'Source URL': 'https://www.greenvelope.com'});
mixpanel.register({'Source First': 'Direct'});
} catch(err) { }
</script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-7668421-1', 'auto');
ga('send', 'pageview');
var apiURL = '/api/v1/';
document.addEventListener('readystatechange', function () {
if (document.readyState === 'complete') {
ko.applyBindings(new DefaultViewModel(), document.getElementById("page"));
enableModalStacking();
$('.modal').on('shown.bs.modal', function () { autosize($('textarea')); });
}
});
// Card Reader Narration
function speak(text) {
$("#srText").text(text);
}
</script>
<link href="https://cdnserver.greenvelope.com/_js/lib/bs/css/bootstrap.min.css?v=2" rel="stylesheet" media="all" type="text/css">
<link href="https://www.greenvelope.com/user/_images/iconsV5/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://www.greenvelope.com/user/_images/iconsV5/css/v4-shims.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnserver.greenvelope.com/_js/lib/owl-carousel/2.3.4/owl.carousel.combined.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="stylesheet" href="https://cdnserver.greenvelope.com/_js/lib/jquery.fine-uploader/fine-uploader-new.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link href="https://www.greenvelope.com/viewer2/_dist/styles.css?v=20241127141601" rel="stylesheet" type="text/css">
<link href="https://www.greenvelope.com/_dist/css/shared.css?v=20221222124602" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.typekit.net/ixj5xdv.css"><style> .fa-circle-notch {color: #94b4c4;} </style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-9R95PN1Y3R"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-9R95PN1Y3R');
</script>
<script type="text/javascript">
var shareEventEnabled = false;
</script>
</head>
<body class="cover">
<div id="page">
<div id="srText" aria-live="assertive" class="visually-hidden">Envelope fading into viewEnvelope addressed to To Our Friends </div>
<!-- ko with: Card -->
<!-- Custom colors and images to replace -->
<span data-bind="html: $root.CustomCSS"><style>.bg-custom {background-color: #94b4c4;}.border-custom {border-color: #94b4c4;}.btnV2 {background-color: #94b4c4;}.btnV2:hover, .btnV2:focus, .btnV2:active {background-color: #6895AC;}.btnV2.btnV2-white {color: #94b4c4; border-color: #94b4c4;}.btnV2.btnV2-white:hover, .btnV2.btnV2-white:focus, .btnV2.btnV2-white:active {background-color: #94b4c4}.btnV2.btnV2-clear {color: #94b4c4; border-color: #94b4c4;}.btnV2.btnV2-clear:hover, .btnV2.btnV2-clear:focus, .btnV2.btnV2-clear:active {color: #6895AC; border-color: #6895AC; background-color: transparent;}.btnV2.btnV2-link {color: #94b4c4;}.btnV2.btnV2-link:hover, .btnV2.btnV2-link:focus, .btnV2.btnV2-link:active {color: #6895AC; background-color: transparent;}.gift-card span {color: #94b4c4;}label.gv-checkbox:hover > input[type='checkbox']:not(:disabled) ~ em {border-color: #94b4c4 !important;}label.gv-checkbox > input[type='checkbox']:checked ~ em {border-color: #94b4c4;background-color: #94b4c4;}label.gv-radiobutton:hover > input[type='radio']:not(:disabled) ~ em {box-shadow: 0 0 0 1px #94b4c4;}label.gv-radiobutton > input[type='radio']:checked ~ em {background-color: #94b4c4;}.gv-form label.gv-input input:focus, .gv-form label.gv-input textarea:focus {border-color: #94b4c4 !important;}label.gv-select > select:focus {border-color: #94b4c4 !important;}#rightcolumncontainer .details-header {color: #94b4c4;}.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background-color: #94b4c4 !important;}</style></span>
<!-- ko if: HeaderFontColor() == 'FFFFFF' --><!-- /ko -->
<!-- /ko -->
<!-- ko if: MusicPathMp3() != '' --><!-- /ko -->
<span style="position: absolute; left: 47%; top: 40%; display: none; font-size: 28px;" data-bind="visible: Loading() || ImagesLoaded() == false">
<i class="fa fa-circle-notch fa-spin"></i>
</span>
<div data-bind="visible: BackgroundLoaded()" style="">
<div id="notificationbar" data-bind="style: { height: LayoutManager.NotificationHeight }, css: { offscreen: !AlertBarVisible() }" class="offscreen" style="height: 0px;">
<div id="notificationbar__inner" data-bind="css: { offscreen: !AlertBarVisible() }" class="offscreen">
<div class="hostnamewarning" data-bind="visible: ShowHostNameWarning" style="display: none;">
<i class="fal fa-info-circle"></i>
<span data-bind="text:HostNameWarning"></span>
</div>
<div class="hostmodewarning" data-bind="visible: IsHostMode" style="display: none;">
You are currently viewing the response page as a host. This means that any changes you make will not be emailed to the recipient.
</div>
<div class="status" data-bind="visible: getStatusMessage, html: getStatusMessage" style="display: none;"></div>
<!-- ko with: MobileGiftCardVM -->
<div class="gift-card mobile" data-bind="fadeVisible: Visible, click: Clicked" style="display: none;">
<img data-bind="attr: {src: ImageSrc}" alt="Gift Card">
<span data-bind="text: Label">View Your Gift Card: $null</span>
</div>
<!--/ko-->
</div>
</div>
<div id="alertbar" class="alert alert-success" onclick="$(this).stop(true).fadeOut();"> </div>
<div id="pagecontainer" data-bind="css: { blur: ShowOpenButton() }, style: { height: LayoutManager.PgHeight(), 'margin-top': LayoutManager.PageMarginTop() }" style="height: 600px; margin-top: 0px; background-image: url("https://cdn.greenvelope.com/viewer/background.ashx?backgroundid=111977&backgroundcolor=081f2d&q=100&w=800");">
<!-- ko if: BackgroundAnimationURL() != '' -->
<script>
function bgVideoPlaying(selector) {
if (backgroundAnimationStart == 0) {
$(selector).transition({ 'opacity': '1' }, 3000);
}
}
function startBGVideo() {
var $videoBG;
if (window.innerWidth > window.innerHeight) {
$videoBG = $('#videoBG');
}
else {
$videoBG = $('#videoBGMobile');
}
if ($videoBG.length > 0) {
$videoBG.transition({ 'opacity': '1' }, 1500);
var videoBG = $videoBG[0];
try {
videoBG.pause();
videoBG.currentTime = 0;
videoBG.play();
}
catch (e) {
console.log(e);
}
}
}
function supportsHEVCAlpha() {
const navigator = window.navigator;
const ua = navigator.userAgent.toLowerCase()
const hasMediaCapabilities = !!(navigator.mediaCapabilities && navigator.mediaCapabilities.decodingInfo)
const isSafari = ((ua.indexOf('safari') != -1) && (!(ua.indexOf('chrome') != -1) && (ua.indexOf('version/') != -1)))
if (hasMediaCapabilities == false) { return false; }
if (isSafari) {
var osx12 = /mac os x 10_12/.test(ua);
var osx13 = /mac os x 10_13/.test(ua);
var osx14 = /mac os x 10_14/.test(ua);
if (osx12 || osx13 || osx14) { return false; }
}
return true
}
</script>
<div style="height: 100vh; overflow: hidden; position: absolute; top: 0px; width: 100%; z-index: 1; pointer-events: none;">
<video id="videoBG" class="videoBG" loop="" muted="" autoplay="" playsinline="" onplay="bgVideoPlaying('#videoBG')" style="opacity: 1; min-width: 100%; z-index: 1; pointer-events: none; transition: opacity 3000ms ease 0s;">
<source data-bind="attr: {src: BackgroundAnimationURL() + '.mov'}" type="video/mp4;codecs=hvc1" src="https://cdn.greenvelope.com/GreenvelopeImages/background/animations/1.mov">
<source data-bind="attr: {src: BackgroundAnimationURL() + '.webm'}" type="video/webm" src="https://cdn.greenvelope.com/GreenvelopeImages/background/animations/1.webm">
</video>
<video id="videoBGMobile" class="videoBG" loop="" muted="" autoplay="" playsinline="" onplay="bgVideoPlaying('#videoBGMobile')" style="display: none; opacity: 0; min-width: 100%; z-index: 1; pointer-events: none;">
<source data-bind="attr: {src: BackgroundAnimationURL() + '-mobile.mov'}" type="video/mp4;codecs=hvc1" src="https://cdn.greenvelope.com/GreenvelopeImages/background/animations/1-mobile.mov">
<source data-bind="attr: {src: BackgroundAnimationURL() + '-mobile.webm'}" type="video/webm" src="https://cdn.greenvelope.com/GreenvelopeImages/background/animations/1-mobile.webm">
</video>
</div>
<!--/ko-->
<div id="maincontainer" data-bind="class: LayoutManager.MainContainer.Css" class="animated">
<div id="cardcontainer">
<div class="page page-card" data-bind="style: { height: VMCard().IOS10PageHeight }, css: { host: $root.AlertBarVisible }">
<!-- ko with: VMCard -->
<!-- ko if: EnvelopeVersion() == 1 --><!-- /ko -->
<!-- ko if: CardMode() == 'animation' && Card() != null -->
<!-- Preload intermediate images if present. #186620686 -->
<!-- ko if: AnimationMapIntermediate()[0] !== '' --><!-- /ko -->
<!-- ko if: Card().TwoSided() && AnimationMapIntermediate()[1] !== '' --><!-- /ko -->
<!-- Animated Card -->
<div data-bind="visible: ImagesLoaded() == false" style="display: none;" class="text-center">
</div>
<div id="wrapper" class="flex-center" data-bind="visible: ImagesLoaded() == true" style="position: relative;">
<div id="container" class="centerCard no-flick" style="max-width: 600px;" data-bind="style: {'max-width': EnvelopeWidth}">
<div id="env-front" class="flex-center" style="position: relative; opacity: 1; transition: opacity 2000ms ease 0s;">
<!-- ko if: ShowLining() == false --><!-- /ko -->
<img id="imgEnvelopeFront" data-bind="event: { load: function (data, event) { imageLoaded('imgEnvelopeFront') } }, attr: { src: EnvelopeFrontSrc, alt: EnvelopeAltText() }" class="imgEnvelopeFront" style="box-shadow: 20px 60px 60px 0px rgba(0,0,0,0.2);" alt="Envelope addressed to To Our Friends " src="/viewer/envelope.ashx?ActivityCode=1zMBNDR&ga=0&nocache=1734732926954">
</div>
<div id="env-back" class="flex-center" style="filter: brightness(0.6); transform: perspective(800px) rotateY(270deg); display: none;">
<div>
<!-- ko if: ShowLining() == false --><!-- /ko -->
<img id="imgEnvelopeBack" data-bind="event: { load: function (data, event) { imageLoaded('imgEnvelopeBack') } }, attr: { src: EnvelopeCoverBack }, style: {'max-width': EnvelopeWidth}" style="box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 25px 0px; width: 100%; max-width: 600px;" alt="Image Only: Envelope Back" src="https://cdn.greenvelope.com/viewer/envelope.ashx?mode=back&coverid=2061&orientation=square&borderid=2013">
<img id="imgEnvelopeBackFlap" data-bind="event: { load: function (data, event) { imageLoaded('imgEnvelopeBackFlap') } }, attr: { src: EnvelopeBackFlapSrc }, style: {'max-width': EnvelopeWidth}" class="imgEnvelopeBackFlap" style="position: absolute; top: 0px; left: 0px; right: 0px; margin: auto; width: 100%; max-width: 600px;" alt="Image Only: Envelope Back" src="https://cdn.greenvelope.com/viewer/envelope.ashx?mode=backflap&lastmodified=638703151546670000&ActivityCode=1zMBNDR&ga=0">
</div>
</div>
</div>
<div id="container2" class="centerCard no-flick" data-bind="style: { 'max-width': EnvelopeWidth, transition: 'max-width .4s' }" style="display: none; transition: max-width 0.4s ease 0s; max-width: 600px;">
<div id="envelopeContainer" style="position:relative; transform-style:flat;">
<img id="imgEnvelopeFrontBG" data-bind="attr: { src: EnvelopeCoverFront }" class="imgEnvelopeFront" style="opacity: 0" alt="Image Only: Envelope Front" src="https://cdn.greenvelope.com/GreenvelopeImages/envelope/cover/2061.square.front.png">
<div class="overlay" style="z-index: 1;">
<img id="imgEnvelopeFront3" data-bind="visible: ShowLining() == false, attr: { src: EnvelopeCoverFront }" class="imgEnvelopeFront" style="position: absolute; top: 0px; left: 0px; display: none;" alt="Image Only: Envelope Front" src="https://cdn.greenvelope.com/GreenvelopeImages/envelope/cover/2061.square.front.png">
<img id="imgLining" data-bind="visible: ShowLining() == true, event: { load: function (data, event) { imageLoaded('imgLining') } }, attr: { src: Lining }" class="imgLining" style="position: absolute; top: 0; left: 0;" alt="Image Only: Envelope Lining" src="https://cdn.greenvelope.com/viewer/lining.ashx?mode=block&liningid=10214&orientation=square&liningcolor=f5333f&coverid=2061">
<div id="img-liningflap" class="img-liningflap square" data-bind="class: Card().Orientation" style="transform: perspective(1800px) rotateX(90deg);">
<img id="imgEnvelopeInsideFlap" data-bind="event: { load: function (data, event) { imageLoaded('imgEnvelopeInsideFlap') } }, attr: { src: InsideFlap }" style="transform: scaleY(-1);" alt="Image Only: Envelope Flap" src="https://cdn.greenvelope.com/viewer/envelope.ashx?mode=combinedflap&coverid=2061&liningid=10214&orientation=square&liningcolor=f5333f&sealid=1009">
</div>
</div>
<div class="overlay" style="z-index: 2;">
<img id="imgCard" data-bind="event: { load: function (data, event) { imageLoaded('imgCard') } }, attr: { src: CardURL(), alt: CardAltText() }, css: { custom: Shape() == 'custom'}" border="0" class="imgCard invitation-card" usemap="#cardmap" style="position: absolute; width: 95%; top: 2.5%; left: 0; right: 0; margin: auto;" src="https://cdnpng.greenvelope.com/GreenvelopeImages/cards/7000000/9444762_7043045.png?lastmodified=638703073003500000" alt=" Card Image Description: This template is totally blank! Get creative. The possibilities are endless. Add images, choose fonts, completely customize this design to suit your needs.">
<!-- ko if: Card().Orientation() == 'portrait' --><!-- /ko -->
</div>
<div class="overlay" style="z-index: 3;">
<img id="imgEnvelopeBack2" class="imgEnvelopeBack2" data-bind="attr: { src: EnvelopeCoverBack }" style="position: absolute; top: 0; left: 0; box-shadow: 20px 60px 60px 0px rgba(0,0,0,0.2);" alt="Image Only: Envelope Back" src="https://cdn.greenvelope.com/viewer/envelope.ashx?mode=back&coverid=2061&orientation=square&borderid=2013">
<img id="imgEnvelopeBackCombined" data-bind="event: { load: function (data, event) { imageLoaded('imgEnvelopeBackCombined') } }, attr: { src: EnvelopeCombined }" class="imgEnvelopeBackCombined" style="position: absolute; top: 0px; left: 0px; width: 100%; display: none; box-shadow: 20px 60px 60px 0px rgba(0,0,0,0.2);" alt="Image Only: Envelope Back" src="https://cdn.greenvelope.com/viewer/envelope.ashx?mode=combinedback&coverid=2061&liningid=10214&orientation=square&liningcolor=f5333f&borderid=2013">
<img id="imgFlapShadow" data-bind="visible: EnvelopeVersion() == 2, attr: { src: FlapShadow }" style="position: absolute; top: 0px; left: 0px; transform-origin: center top;" alt="Image Only: Shadow Image" src="https://cdn.greenvelope.com/GreenvelopeImages/envelope/lining/mask/square.flap.shadow.png">
<div id="img-flap" class="img-flap" style="position: absolute; transform-origin: top; top: 0; left: 0; width: 100%; -webkit-backface-visibility: hidden;-moz-backface-visibility:hidden;">
<img id="imgEnvelopeBackFlap2" data-bind="attr: { src: EnvelopeBackFlapSrc }" alt="Image Only: Envelope Flap" src="https://cdn.greenvelope.com/viewer/envelope.ashx?mode=backflap&lastmodified=638703151546670000&ActivityCode=1zMBNDR&ga=0">
</div>
</div>
</div>
</div>
<div id="container3" class="centerCard no-flick" style="display: none; position: absolute; left: 0px; height: 100%;" data-bind="style: { height: AnimatedHeightMobile }">
<div class="imageMap front" data-bind="style: { 'width': AnimatedWidth, height: AnimatedHeight, transition: 'width .4s, height .4s' }" style="transition: width 0.4s ease 0s, height 0.4s ease 0s; height: 570px; width: 570px;">
<img data-bind="attr: { src: CardURL(), alt: CardAltText() }, css: { custom: Shape() == 'custom' }" border="0" class="imgCard2 front mapper invitation-card" style="filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));" src="https://cdnpng.greenvelope.com/GreenvelopeImages/cards/7000000/9444762_7043045.png?lastmodified=638703073003500000" alt=" Card Image Description: This template is totally blank! Get creative. The possibilities are endless. Add images, choose fonts, completely customize this design to suit your needs.">
<span class="overlay" data-bind="html: ImageMap()[0]"></span>
<!-- ko if: ShowCardAnimations --><!-- /ko -->
</div>
<!-- ko if: Card().TwoSided -->
<div class="imageMap back" style="display: none; height: 570px; width: 570px;" data-bind="style: { 'width': AnimatedWidth, height: AnimatedHeight }">
<img data-bind="attr: { src: BackCardURL(), alt: CardBackAltText() }, css: { custom: Shape() == 'custom' }" border="0" class="imgCard2 back mapper invitation-card" src="https://cdnpng.greenvelope.com/GreenvelopeImages/cards/7000000/9444762_7043045_back.png?lastmodified=638703073003500000" alt="">
<span class="overlay" data-bind="html: ImageMap()[1]"></span>
<!-- ko if: ShowCardAnimations --><!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<!-- ko if: CardMode() == 'static' && Card() != null --><!-- /ko -->
<!-- /ko -->
</div>
<script src="../../_js/lib/video/vimeo_player.js" defer=""></script>
<script src="../../_js/lib/video/youtube_iframe_api.js" defer=""></script>
<div id="card-overlay">
<div class="top left controls" data-bind="style: { top: -LayoutManager.PageMarginTop() }" style="top: 0px;">
<div class="flex-row" data-bind="visible: DesktopGiftCardVM() && DesktopGiftCardVM().Visible(), with: DesktopGiftCardVM" style="display: none;">
<div class="gift-card" data-bind="fadeVisible: Visible, click: Clicked" style="display: none;">
<img data-bind="attr: {src: ImageSrc}" alt="Gift Card">
<span data-bind="text: Label">View Your Gift Card: $null</span>
</div>
</div>
<div class="flex-row" data-bind="if: ShowLeftControls">
<div class="button music" data-bind="if: MusicPathMp3() != '', visible: ShowMusicButton, click: toggleMusic" style="display: none;"></div>
<div class="button pulse-opacity" style="display: none;" data-bind="fadeVisible: ShowFooter() && ShowFlip()">
<a href="#" data-bind="click: flipCard"><img class="flipcard" src="/pub/_images/design/ds-small2.png" loading="lazy" alt="Flip Card"> <!--TOKENSTART-->Flip Card<!--TOKEN:FlipCard--></a></div>
</div>
</div>
<div class="side controls">
<div class="rsvp-widget" data-bind="fadeVisible: ShowFooter() && ShowMessageWidget()" style="display: none;">
<div class="message-btn">
<a href="#messaging" class="btnV2"><!--TOKENSTART-->Send Message<!--TOKEN:SendMessage--></a>
</div>
</div>
<div class="rsvp-widget" data-bind="fadeVisible: ShowFooter() && ShowRSVPWidget()" style="display: none;">
<div class="rsvp" data-bind="visible: VMRsvp().RSVP, with: VMRsvp" style="display: none;">
<!-- ko if: !RSVPAllowed() -->
<div class="rsvp-closed">
<i class="fa fa-minus-circle"></i><span data-bind="text: $root.NoMoreRSVPText">This event is no longer accepting RSVPs.</span>
</div>
<!-- /ko -->
<!-- ko if: RSVPAllowed --><!-- /ko -->
</div>
<div class="mailingaddress" data-bind="visible: PageMailingAddress" style="display: none;">
<a class="btnV2 btnV2-sm btnV2-block pulse" href="#mailingaddress"><!--TOKENSTART-->Submit Your Mailing Address<!--TOKEN:SubmitMailingAddress--></a>
</div>
<div class="survey" data-bind="visible: PageSurvey" style="display: none;">
<a class="btnV2 btnV2-sm btnV2-block pulse" href="#survey"><!--TOKENSTART-->View Survey<!--TOKEN:CompleteSurveyNow--></a>
</div>
<!--ko if: (!ShowSendGiftCardInDetails() && HasSentGiftCard()) || ShowSendGiftCardInWidget()--><!--/ko-->
</div>
</div>
<div class="top right controls" data-bind="if: ShowRightControls, style: { top: -LayoutManager.PageMarginTop() }" style="top: 0px;"></div>
<div class="nff-sticker-container" style="display: none; top: 0px;" data-bind="fadeVisible: ShowFooter() && ShowNFFSticker(), style: { top: -LayoutManager.PageMarginTop() }">
<img class="nff-sticker" src="/user/_images/promo/nff-sticker-nolink.png" loading="lazy" alt="National Forest Foundation Seal">
</div>
<div class="bottom controls" style="display: none;" data-bind="fadeVisible: !LayoutManager.DetailBottom() || MobileBottomButtonState() == 0, css: {'mobile': LayoutManager.MobileView}">
<div style="display: none;" data-bind="fadeVisible: ShowFooter">
<button type="button" class="button" data-bind="click: zoomModalShow" aria-label="Zoom">
<i class="far fa-search-plus"></i>
</button>
</div>
<div id="saveToAccount" class="menu" aria-label="Save Card" style="display: none;" data-bind="css: { 'open': ShowSaveCardMenu }, fadeVisible: ShowSaveCard">
<ul rel="Save Menu">
<!--ko if: ShowSaveCardToAccount-->
<li>
<button id="btnSaveCard" type="button" data-bind="click: saveCard"><!--TOKENSTART-->Save to Your Account<!--TOKEN:SaveToYourAccount--></button>
</li>
<!--/ko-->
<!--ko if: ShowDownloadCard-->
<!--ko if: !ShowFlip()--><!--/ko-->
<!--ko if: ShowFlip-->
<li>
<a data-bind="click: saveCardDownloadFront"><!--TOKENSTART-->Download<!--TOKEN:Download--> <!--TOKENSTART-->Card Front<!--TOKEN:ServiceNameFront--></a>
</li>
<li>
<a data-bind="click: saveCardDownloadBack"><!--TOKENSTART-->Download<!--TOKEN:Download--> <!--TOKENSTART-->Card Back<!--TOKEN:ServiceNameBack--></a>
</li>
<!--/ko-->
<!--/ko-->
<li>
<a data-bind="click: saveCardDownloadAccessible"><!--TOKENSTART-->Download<!--TOKEN:Download--> Accessible <!--TOKENSTART-->Card<!--TOKEN:ServiceName--> (PDF)</a>
</li>
</ul>
<button type="button" class="button" aria-label="Save Card" data-bind="click: toggleSaveCardMenu">
<i class="fal fa-save"></i>
</button>
</div>
</div>
<div id="poweredByGV" class="footer noprint" style="display: none;" data-bind="fadeVisibleIn200: !LayoutManager.DetailBottom() && ShowFooter()">
<span class="logo">
<span class="mobile-hide"><!--TOKENSTART-->Powered by<!--TOKEN:PoweredBy--></span>
<a href="https://www.greenvelope.com" target="_blank">
<img class="hires" border="0" style="height: 18px; width: 141px;" src="https://cdnpng.greenvelope.com/viewer2/_images/greenvelope_textlogo.png" loading="lazy" alt="Greenvelope">
</a>
</span>
</div>
</div>
</div>
<div class="mobile-bottom placeholder collapsed" data-bind="visible: LayoutManager.DetailBottom() && (MobileBottomButtonState() > 0 || ShowMobileBottomButtonSendGiftCard()), css: { collapsed: !LayoutManager.SideContainer.Collapsed() || !ShowFooter() }" style="">
<!--ko if: ShowMobileBottomButtonSendGiftCard--><!--/ko-->
<div class="btnV2" data-bind="visible: MobileBottomButtonState() == 1, click: toggleSidebar" style="display: none;"><!--TOKENSTART-->View Details<!--TOKEN:ViewDetails--></div>
<a class="btnV2" href="#rsvp" data-bind="visible: MobileBottomButtonState() == 2" style="display: none;"><!--TOKENSTART-->View RSVP<!--TOKEN:ViewRSVP--></a>
<div class="btnV2" data-bind="visible: MobileBottomButtonState() == 3, click: toggleSidebar" style="display: none;"><!--TOKENSTART-->View Details / RSVP<!--TOKEN:ViewDetailsRSVP--></div>
<a class="btnV2" href="#rsvp" data-bind="visible: MobileBottomButtonState() == 4" style="display: none;"><!--TOKENSTART-->RSVP Now<!--TOKEN:RSVPNow--></a>
<a class="btnV2" href="#survey" data-bind="visible: MobileBottomButtonState() == 5" style="display: none;"><!--TOKENSTART-->View Survey<!--TOKEN:CompleteSurveyNow--></a>
<a class="btnV2" href="#mailingaddress" data-bind="visible: MobileBottomButtonState() == 6" style="display: none;"><!--TOKENSTART-->Submit Your Mailing Address<!--TOKEN:SubmitMailingAddress--></a>
<a class="btnV2" href="#messaging" data-bind="visible: ShowMobileBottomButtonSendMessage" style=""><!--TOKENSTART-->Send Message<!--TOKEN:SendMessage--></a>
</div>
<div class="mobile-bottom collapsed" data-bind="visible: LayoutManager.DetailBottom() && (MobileBottomButtonState() > 0 || ShowMobileBottomButtonSendGiftCard()), css: { blur: ShowOpenButton, collapsed: !LayoutManager.SideContainer.Collapsed() || !ShowFooter() }" style="">
<!--ko if: ShowMobileBottomButtonSendGiftCard--><!--/ko-->
<div class="btnV2 pulse" data-bind="visible: MobileBottomButtonState() == 1, click: toggleSidebar" style="display: none;"><!--TOKENSTART-->View Details<!--TOKEN:ViewDetails--></div>
<a class="btnV2 pulse" href="#rsvp" data-bind="visible: MobileBottomButtonState() == 2" style="display: none;"><!--TOKENSTART-->View RSVP<!--TOKEN:ViewRSVP--></a>
<div class="btnV2 pulse" data-bind="visible: MobileBottomButtonState() == 3, click: toggleSidebar" style="display: none;"><!--TOKENSTART-->View Details / RSVP<!--TOKEN:ViewDetailsRSVP--></div>
<a class="btnV2 pulse" href="#rsvp" data-bind="visible: MobileBottomButtonState() == 4" style="display: none;"><!--TOKENSTART-->RSVP Now<!--TOKEN:RSVPNow--></a>
<a class="btnV2 pulse" href="#survey" data-bind="visible: MobileBottomButtonState() == 5" style="display: none;"><!--TOKENSTART-->View Survey<!--TOKEN:CompleteSurveyNow--></a>
<a class="btnV2 pulse" href="#mailingaddress" data-bind="visible: MobileBottomButtonState() == 6" style="display: none;"><!--TOKENSTART-->Submit Your Mailing Address<!--TOKEN:SubmitMailingAddress--></a>
<a class="btnV2 pulse" href="#messaging" data-bind="visible: ShowMobileBottomButtonSendMessage" style=""><!--TOKENSTART-->Send Message<!--TOKEN:SendMessage--></a>
</div>
</div>
<div id="rightcolumncontainer" data-bind="class: LayoutManager.SideContainer.Css" class="offscreen animated">
<div class="details-header mobile-only" data-bind="click: toggleSidebar">
<div>
<i class="fal fa-times" aria-hidden="true"></i>
<span><!--TOKENSTART-->Hide Details<!--TOKEN:HideDetails--></span>
</div>
</div>
<div class="rsvp-widget mobile-only" data-bind="visible: ShowSidebarRSVPWidget()" style="display: none;">
<div class="rsvp" data-bind="visible: VMRsvp().RSVP, with: VMRsvp" style="display: none;">
<!-- ko if: !RSVPAllowed() -->
<div class="rsvp-closed">
<i class="fa fa-minus-circle"></i><span data-bind="text: $root.NoMoreRSVPText">This event is no longer accepting RSVPs.</span>
</div>
<!-- /ko -->
<!-- ko if: RSVPAllowed --><!-- /ko -->
</div>
<div class="mailingaddress" data-bind="visible: PageMailingAddress" style="display: none;">
<a class="btnV2 btnV2-sm btnV2-block pulse" href="#mailingaddress"><!--TOKENSTART-->Submit Your Mailing Address<!--TOKEN:SubmitMailingAddress--></a>
</div>
<div class="survey" data-bind="visible: PageSurvey" style="display: none;">
<a class="btnV2 btnV2-sm btnV2-block pulse" href="#survey"><!--TOKENSTART-->View Survey<!--TOKEN:CompleteSurveyNow--></a>
</div>
<!--ko if: (!ShowSendGiftCardInDetails() && HasSentGiftCard()) || ShowSendGiftCardInWidget()--><!--/ko-->
</div>
<div class="rsvp-widget mobile-only" data-bind="visible: ShowSidebarMessageWidget()" style="">
<div class="message-btn">
<a href="#messaging" class="btnV2"><!--TOKENSTART-->Send Message<!--TOKEN:SendMessage--></a>
</div>
</div>
<div id="rightcolumncontent">
<!-- ko if: PageDetails() == true --><!-- /ko -->
<a class="save-card-mobile mobile-only noprint" style="display: none;" data-bind="visible: ShowSaveCard(), attr: {'href': SaveCardURL}" href="/sign-up?ActivityCode=1zMBNDR">
<i class="fal fa-arrow-alt-to-bottom"></i> <!--TOKENSTART-->Save to Your Account<!--TOKEN:SaveToYourAccount-->
</a>
<div class="nff-sticker-container" style="display: none;" data-bind="visible: ShowNFFStickerDetails">
<img class="nff-sticker" src="/user/_images/promo/nff-sticker-nolink.png" loading="lazy" alt="National Forest Foundation Seal">
</div>
<div id="poweredByGVMobile" class="poweredby mobile-only noprint">
<span class="logo">
<span><!--TOKENSTART-->Powered by<!--TOKEN:PoweredBy--></span>
<a href="https://www.greenvelope.com" target="_blank">
<img class="hires" border="0" style="height: 18px; width: 141px;" src="https://cdnpng.greenvelope.com/viewer2/_images/greenvelope_textlogo.png" loading="lazy" alt="Greenvelope">
</a>
</span>
</div>
</div>
<div class="custom-scroll" data-bind="template: { name: "template-GVScrollbar", data: PanelScrollbarVM }">
<div class="gv-scrollbar vertical" data-bind="attr: { "id": ID }, css: { "horizontal": IsHorizontal, "vertical": IsVertical }" id="panel-scroll" style="display: none;">
<div class="handle" style="top: 0px; height: 0px;"></div>
</div>
</div>
<div class="rsvp-widget mobile-hide" data-bind="visible: ShowSidebarRSVPWidget()" style="display: none;">
<div class="rsvp" data-bind="visible: VMRsvp().RSVP, with: VMRsvp" style="display: none;">
<!-- ko if: !RSVPAllowed() -->
<div class="rsvp-closed">
<i class="fa fa-minus-circle"></i><span data-bind="text: $root.NoMoreRSVPText">This event is no longer accepting RSVPs.</span>
</div>
<!-- /ko -->
<!-- ko if: RSVPAllowed --><!-- /ko -->
</div>
<div class="mailingaddress" data-bind="visible: PageMailingAddress" style="display: none;">
<a class="btnV2 btnV2-sm btnV2-block pulse" href="#mailingaddress"><!--TOKENSTART-->Submit Your Mailing Address<!--TOKEN:SubmitMailingAddress--></a>
</div>
<div class="survey" data-bind="visible: PageSurvey" style="display: none;">
<a class="btnV2 btnV2-sm btnV2-block pulse" href="#survey"><!--TOKENSTART-->View Survey<!--TOKEN:CompleteSurveyNow--></a>
</div>
<!--ko if: (!ShowSendGiftCardInDetails() && HasSentGiftCard()) || ShowSendGiftCardInWidget()--><!--/ko-->
</div>
<div class="rsvp-widget mobile-hide" data-bind="visible: ShowSidebarMessageWidget()" style="">
<div class="message-btn">
<a href="#messaging" class="btnV2"><!--TOKENSTART-->Send Message<!--TOKEN:SendMessage--></a>
</div>
</div>
</div>
</div>
<div data-bind="fadeVisibleIn200: ShowOpenButton" class="text-center" id="openButton" style="display:none;">
<a class="btnV2 btnV2-lg" href="" data-bind="click: VMCard().userClickedOpen, text: ViewServiceName">View Card</a>
</div>
</div>
<!-- ko with: VMRsvp -->
<div class="modal fade v2" id="modalRSVP" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !ShowPurchase() && $parent.LayoutManager.SideContainer.Collapsed()">
<i class="far fa-chevron-left"></i>
<!--TOKENSTART-->Back<!--TOKEN:Back-->
</div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !ShowPurchase() && !$parent.LayoutManager.SideContainer.Collapsed()" style="display: none;">
<i class="far fa-chevron-left"></i>
<!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails-->
</div>
<div class="btnV2 btnV2-link" data-bind="visible: ShowPurchase, click: paymentEditRsvp" style="display: none;">
<i class="far fa-chevron-left"></i>
<!--TOKENSTART-->Change RSVP<!--TOKEN:ChangeRSVP-->
</div>
</div>
<div class="modal-content" style="text-align: center; padding: 50px; display: none;" data-bind="visible: !RSVP() && $root.Loading()">
<i class="fa fa-spinner fa-spin fa-lg"></i>
</div>
<div class="modal-content" data-bind="visible: RSVP, if: RSVP" style="display: none;"></div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- /ko -->
<div class="modal v2 top fade" id="modalGVConfirm" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content" data-bind="with: GVConfirmViewModel">
<div class="modal-header">
<span class="fal fa-times close" aria-hidden="true" data-bind="click: no"></span>
</div>
<div class="clearfix"></div>
<div class="modal-body">
<!-- ko with: $parent.VMRsvp-->
<div class="icon" data-bind="css: AutoRsvpStatusClass"></div>
<!-- /ko -->
<div class="message" data-bind="text:Message">Are you sure?</div>
<div class="actions">
<a href="#" class="btnV2 btnV2-clear" data-bind="click: no, text: NoText">No</a>
<a href="#" class="btnV2" data-bind="click: yes, text: YesText">Yes</a>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--ko with: VMSurvey-->
<div class="modal fade v2" id="modalSurvey" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: $parent.LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !$parent.LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content" style="text-align: center; padding: 50px; display: none;" data-bind="visible: $root.Loading">
<i class="fa fa-spinner fa-spin fa-lg"></i>
</div>
<div class="modal-content" data-bind="visible: !$root.Loading(), if: GuestSurveyResponse" style=""></div>
</div>
</div>
<!--/ko-->
<div class="modal fade v2" id="modalMailingAddress" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content" style="text-align: center; padding: 50px; display: none;" data-bind="visible: $root.Loading">
<i class="fa fa-spinner fa-spin fa-lg"></i>
</div>
<div class="modal-content" data-bind="if:!$root.Loading(), visible: !$root.Loading()" style="">
<div class="modal-header">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<h2 class="modal-title" data-bind="text: $root.LanguageReference().getByToken('SubmitMailingAddress')">Submit Your Mailing Address</h2>
</div>
<div class="modal-body" data-bind="with: VMMailingAddress">
<div class="mailing-address gv-form">
<div class="email-form" data-bind="if: showNameEmailForm, visible: showNameEmailForm" style="display: none;"></div>
<div class="flexrow">
<div data-field="Street1">
<div class="invalid inline" style="display: none;">
<i class="fa fa-warning"></i> <!-- ko text: $root.LanguageReference().getByToken('Required') -->Required<!--/ko-->
</div>
<label class="gv-input required" data-bind="css: { required: Street1Required }">
<p><!-- ko text: $root.LanguageReference().getByToken('MailingAddressStreet1') -->Street 1<!--/ko--></p>
<input type="text" data-bind="value: Street1, event: { blur: validateMailingAddressField }">
</label>
</div>
<div data-field="Street2">
<div class="invalid inline" style="display: none;">
<i class="fa fa-warning"></i> <!-- ko text: $root.LanguageReference().getByToken('Required') -->Required<!--/ko-->
</div>
<label class="gv-input" data-bind="css: { required: Street2Required }">
<p><!-- ko text: $root.LanguageReference().getByToken('MailingAddressStreet2') -->Street 2<!--/ko--></p>
<input type="text" data-bind="value: Street2, event: { blur: validateMailingAddressField }">
</label>
</div>
</div>
<div class="flexrow">
<div data-field="City">
<div class="invalid inline" style="display: none;">
<i class="fa fa-warning"></i> <!-- ko text: $root.LanguageReference().getByToken('Required') -->Required<!--/ko-->
</div>
<label class="gv-input required" data-bind="css: { required: CityRequired }">
<p><!-- ko text: $root.LanguageReference().getByToken('MailingAddressCity') -->City<!--/ko--></p>
<input type="text" data-bind="value: City, event: { blur: validateMailingAddressField }">
</label>
</div>
<div data-field="State">
<div class="invalid inline" style="display: none;">
<i class="fa fa-warning"></i> <!-- ko text: $root.LanguageReference().getByToken('Required') -->Required<!--/ko-->
</div>
<label class="gv-input required" data-bind="css: { required: StateRequired }">
<p><!-- ko text: $root.LanguageReference().getByToken('MailingAddressState') -->State / Province<!--/ko--></p>
<input type="text" data-bind="value: State, event: { blur: validateMailingAddressField }">
</label>
</div>
<div data-field="Zip">
<div class="invalid inline" style="display: none;">
<i class="fa fa-warning"></i> <!-- ko text: $root.LanguageReference().getByToken('Required') -->Required<!--/ko-->
</div>
<label class="gv-input required" data-bind="css: { required: ZipRequired }">
<p><!-- ko text: $root.LanguageReference().getByToken('MailingAddressZip') -->Zip / Postal<!--/ko--></p>
<input type="text" data-bind="value: Zip, event: { blur: validateMailingAddressField }">
</label>
</div>
</div>
<div class="flexrow">
<div data-field="Country" data-bind="visible: CollectCountry, if: CollectCountry" style="display: none;"></div>
</div>
</div>
<div class="submit gv-form">
<div class="buttons">
<a id="btnSubmitMailingAddress" href="#" class="btnV2" data-bind="visible: !Saving(), click: submitMailingAddress, text: $root.LanguageReference().getByToken('MailingAddressSubmit')">Submit Address</a>
<button class="btnV2" data-bind="visible: Saving" style="display: none;">
<i class="fa fa-spinner fa-spin fa-lg"></i> <!-- ko text: $root.LanguageReference().getByToken('Working...') -->Working...<!--/ko-->
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ko with: VMMessaging -->
<div class="modal fade v2" id="modalMessaging" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: $parent.LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !$parent.LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
<span class="heading"><!--TOKENSTART-->Message To Sender<!--TOKEN:MessageToHost--></span>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<h4 class="modal-title"><!--TOKENSTART-->Message To Sender<!--TOKEN:MessageToHost--></h4>
</div>
<div class="modal-body">
<div id="messaging">
<div class="main">
<div class="conversation-list">
<div class="margin-t-40 text-center font-size-16" data-bind="style: { display: Loaded() == true && Items().length == 0 ? 'block' : 'none' }" style="display: block;">
<!--TOKENSTART-->No messages... Start the conversation below!<!--TOKEN:NoMessagesStartConversationBelow-->
</div>
<!-- ko if: Items().length > 0 --><!-- /ko -->
<div data-bind="visible: Loaded() == false" style="display: none;" class="text-center">
<div style="padding-top: 30px;">
<i class="fa fa-spinner fa-spin fa-lg"></i> <!--TOKENSTART-->Loading...<!--TOKEN:Loading...-->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="send-container" id="upAttach-dz">
<textarea data-bind="value: MessageBody, attr: { placeholder: SendAMessagePlaceholder() }" class="form-control" aria-label="Send a Message" placeholder="Send a message"></textarea>
<div class="send">
<div class="dropzone" style="text-align: left;">
<span class="mobile-hide">
<i class="fa fa-paperclip fa-lg mobile-hide"></i> <!--TOKENSTART-->Drag & Drop Attachments or<!--TOKEN:DragDropAttachmentsOr--> <a id="btnbrowselist"><!--TOKENSTART-->Select a file<!--TOKEN:Select_a_file--></a>
</span>
<a href="#" class="btnV2 pull-right" style="margin-top: -6px;" data-bind="click: sendMessage, visible: Sending() == false"><!--TOKENSTART-->Send Message<!--TOKEN:SendMessage--></a>
<a href="#" class="btnV2 pull-right" style="margin-top: -6px; display: none;" data-bind="visible: Sending() == true"><i class="fa fa-spinner fa-spin fa-lg"></i> <!-- ko text: SendingLabel() -->Sending...<!-- /ko --></a>
</div>
<div id="upAttach"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /ko -->
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader qq-uploader-minimize">
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone notranslate>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Choose your file to upload</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div style="display: inline-block; vertical-align: top;" notranslate>
<i class="fa fa-file-text-o"></i>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
</div>
<div style="display: inline-block;">
<span class="qq-upload-file-selector qq-upload-file" ignore notranslate></span>
<span class="qq-upload-size-selector qq-upload-size" notranslate></span>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text" notranslate></span>
<div class="qq-progress-bar-container-selector" notranslate>
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
</div>
<a class="qq-upload-cancel-selector fa fa-times-circle font-size-16" href="#"></a>
<a class="qq-upload-delete-selector fa fa-times-circle font-size-16" href="#"></a>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector" notranslate></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector btn btn-default">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector" notranslate></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector btn btn-default">No</button>
<button type="button" class="qq-ok-button-selector btn btn-default">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector" notranslate></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector btn btn-default">Cancel</button>
<button type="button" class="qq-ok-button-selector btn btn-default">Ok</button>
</div>
</dialog>
</div>
</script>
<script type="text/html" id="template-GVScrollbar"></script>
<script type="text/html" id="template-SendAGiftCard">
<!--ko if: $data-->
<div class='send-gift'>
<!--ko if: AcceptGiftCardsFromGuests() && !HasSentGiftCard()-->
<a href='javascript: void(0);' class='btnV2 btnV2-link' data-bind='click: sendGiftCard'>
<i class='fas fa-gift-card' style="margin-bottom: 5px;"></i>
<span class='caps' data-bind='text: SendAGiftCardText'></span>
</a>
<!--/ko-->
<!--ko if: HasSentGiftCard-->
<div class='sent' data-bind='click: showDetails'>
<i class='fas fa-check-circle'></i>
<span class='caps'>
<!--ko text: LanguageReference().getByToken("GiftCardForHost")--><!--/ko--> - $<!--ko text: SentGiftCardAmount--><!--/ko-->
</span>
</div>
<!--/ko-->
</div>
<!--/ko-->
</script>
<script type="text/html" id="template-SendAGiftCard-DetailsModal"></script>
<script type="text/html" id="template-SendAGiftCard-EmailModal"></script>
<script type="text/html" id="template-SendAGiftCard-JifitiModal"></script>
<div class="modal fade v2" id="modalSMSOptIn" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h4 class="modal-title"><!--TOKENSTART-->{HostName} sent you a card<!--TOKEN:HostNameSentYouServiceName--></h4>
<div class="updates"><!--TOKENSTART-->To continue receiving updates from {HostName}, please click "Continue" below:<!--TOKEN:SMSUpdatesFromHost--></div>
<div class="text-center">
<a class="btnV2 btn-block" data-bind="click: smsOptIn.bind($data, true)"><!--TOKENSTART-->Continue<!--TOKEN:SMSAccept--></a>
</div>
<div class="text-center">
<br>
<a href="#" data-bind="click: smsOptIn.bind($data, false)"><!--TOKENSTART-->Opt out, no more messages from {HostName}<!--TOKEN:SMSDecline--></a>
</div>
<div class="rates"><!--TOKENSTART-->You are opting in to receive updates exclusively from {HostName}. We will not sell this information or advertise to you.<!--TOKEN:SMSMessageRates--></div>
</div>
</div>
</div>
</div>
<div class="modal fade v2" id="modalPhotos" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<h4 class="modal-title"><!--TOKENSTART-->Photos<!--TOKEN:Photos--></h4>
</div>
<div class="modal-body">
<!-- ko with: $root.VMPhoto -->
<div data-bind="with: PhotoGallery">
<div class="photos-carousel owl-carousel owl-theme" data-bind="foreach: { data: Photos }"></div>
<!--ko if: AllowComments--><!--/ko-->
</div>
<!-- /ko -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade v2" id="modalTicketList" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
</div>
<div class="modal-body">
<!-- ko if: TicketsVisible() && TicketsVisible().length > 0 && Purchase() --><!-- /ko -->
<!-- ko if: ItemsVisible() && ItemsVisible().length > 0 && VMDetails().EnablePurchaseItemGrid() && Purchase()--><!-- /ko -->
<script type="text/html" id="purchaseItemTemplate">
<div class="item">
<div class="summary">
<div class="name" data-bind="text: Name"></div>
<div class="tags tt" style="display: none;"
data-bind="visible: Labels.length > 0 && $root.ShowLabels(), template: {name: 'template-label', foreach: Labels }"
data-content="Only guests with these tags will see this item. The tags themselves are only visible in preview mode.">
</div>
<div class="price">
<!--ko if: ShowPrice-->
<!--ko text: formatCurrencyCode(Price + DisplayFee, $root.Purchase().TicketingCurrency, 2)--><!--/ko-->
<!--/ko-->
</div>
</div>
<div class="showmore-toggle" data-bind="visible: IsToggleVisible">
<div class="showmore" data-bind="click: toggleDetails">
<a href="#" data-bind="visible: !DetailsVisible()"><!--TOKEN:MoreInfo--></a>
<a href="#" data-bind="visible: DetailsVisible"><!--TOKEN:LessInfo--></a>
</div>
</div>
<div class="morecontent" data-bind="visible: DetailsVisible">
<div class="price" data-bind="visible: PurchaseCharity > 0,text: $root.LanguageReference().getByToken('TaxDeductibleAmount={#}').replace('{#}', formatCurrency(PurchaseCharity))">
</div>
<div class="description" data-bind="text: Descr"></div>
<div class="meta">
<div data-bind="visible: IsAvailable && AvailableQtyVisible > 0">
<!--TOKEN:Remaining-->: <span data-bind="text: RemainingQty"></span>
</div>
<div data-bind="visible: IsAvailable && AvailableEndDt != null">
<!--TOKEN:SaleEnds--> <span data-bind="html: DateDescription"></span>
</div>
<div data-bind="visible: !IsAvailable">
<span class="red-text not-exclaim"><!--TOKEN:NotAvailable--></span>
</div>
</div>
</div>
</div>
</script>
</div>
</div>
</div>
</div>
<div class="modal fade v2" id="modalLocation" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<h2 class="modal-title" data-bind="text: VMDetails().LocationLabel">Location</h2>
</div>
<div class="modal-body">
<h2 class="modal-title mobile-only" data-bind="text: VMDetails().LocationLabel">Location</h2>
<!-- ko with: $root.VMDetails() -->
<div class="locations" data-bind="foreach: Locations"></div>
<!-- /ko -->
</div>
</div>
</div>
</div>
<div class="modal fade v2" id="modalRegistry" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<h2 class="modal-title"><!--TOKENSTART-->Registry<!--TOKEN:WeAreRegistered--></h2>
</div>
<div class="modal-body">
<h2 class="modal-title mobile-only"><!--TOKENSTART-->Registry<!--TOKEN:WeAreRegistered--></h2>
<!-- ko with: $root.VMDetails().Details() -->
<div class="registry-desc" data-bind="html: EventRegistryDescription, visible: EventRegistryDescription" style="display: none;" ignore=""></div>
<div class="registry-list" data-bind="foreach: Registries"></div>
<!-- /ko -->
</div>
</div>
</div>
</div>
<div class="modal fade v2" id="modalSummary" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<h2 class="modal-title"><!--TOKENSTART-->Summary<!--TOKEN:Summary--></h2>
</div>
<div class="modal-body">
<h2 class="modal-title mobile-only"><!--TOKENSTART-->Summary<!--TOKEN:Summary--></h2>
<!-- ko with: VMDetails().Details -->
<div class="description" style="display: none;" data-bind="html: EventDescr, visible: EventDescr"></div>
<!-- /ko -->
</div>
</div>
</div>
</div>
<div class="modal fade v2" id="modalMap" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<div class="modal-title"><!--TOKENSTART-->View Map<!--TOKEN:ViewMap--></div>
</div>
<div class="modal-body">
<iframe width="447" height="377" frameborder="0" title="Location Map" style="border:0" data-bind="attr: { src: MapEmbedAddress }" data-gtm-yt-inspected-6="true"></iframe>
</div>
</div>
</div>
</div>
<div class="modal fade v2" id="modalSection" tabindex="-1" data-keyboard="false" data-bind="with: VMDetails">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<!-- ko with: $parent -->
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
<!-- /ko -->
</div>
<div class="modal-content" data-bind="with: ActiveSection"></div>
</div>
</div>
<div class="modal fade v2" id="modalGuestList" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<div class="modal-title"><!--TOKENSTART-->Guest List<!--TOKEN:GuestList--></div>
</div>
<div class="modal-body">
<h2 class="modal-title mobile-only"><!--TOKENSTART-->Guest List<!--TOKEN:GuestList--></h2>
<!-- ko with: $root.VMDetails() -->
<div class="guest-list-widget" data-bind="visible: GuestListTabs" style="">
<div class="tab-bar" data-bind="foreach: GuestListTabs">
<a href="#" data-bind="css: { active: Selected }, click: selectTab, html: Name" class="active">All</a>
<a href="#" data-bind="css: { active: Selected }, click: selectTab, html: Name" class=""><i class="fa fa-check-circle"></i><span class="mobile-hide">Attending</span></a>
<a href="#" data-bind="css: { active: Selected }, click: selectTab, html: Name" class=""><i class="fa fa-minus-circle"></i><span class="mobile-hide">Not Attending</span></a>
<a href="#" data-bind="css: { active: Selected }, click: selectTab, html: Name" class=""><i class="fa fa-question-circle"></i><span class="mobile-hide">Pending</span></a>
</div>
<div class="content-wrapper">
<div class="content">
<div class="loading" data-bind="visible: LoadingGuestList">
<i class="fa fa-spinner fa-spin fa-lg"></i><!--TOKENSTART-->Loading...<!--TOKEN:Loading...-->
</div>
<span data-bind="html: GuestHTML, visible: !LoadingGuestList()" style="display: none;"></span>
</div>
<div class="custom-scroll" data-bind="template: { name: "template-GVScrollbar", data: $root.GuestListScrollbarVM }">
<div class="gv-scrollbar vertical" data-bind="attr: { "id": ID }, css: { "horizontal": IsHorizontal, "vertical": IsVertical }" id="guestlist-scroll" style="display: block;">
<div class="handle"></div>
</div>
</div>
</div>
</div>
<!-- /ko -->
<script>
document.addEventListener('readystatechange', function () {
if (document.readyState === 'complete') {
var _resizeHandler = function () {
if (typeof $ === 'function') {
var width = $('#rightcolumncontent .guest-list-widget').width();
if (width < 550) {
$('#rightcolumncontent .guest-list-widget .mobile-hide').hide();
} else {
$('#rightcolumncontent .guest-list-widget .mobile-show').hide();
}
}
};
_resizeHandler();
window.addEventListener('resize', _resizeHandler);
}
});
</script>
</div>
</div>
</div>
</div>
<div class="modal fade v2" id="modalSponsors" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<div class="modal-title"><!--TOKENSTART-->Sponsors<!--TOKEN:Sponsors--></div>
</div>
<div class="modal-body">
<h2 class="modal-title mobile-only"><!--TOKENSTART-->Sponsors<!--TOKEN:Sponsors--></h2>
<!-- ko with: $root.VMDetails -->
<div id="logos-list" data-bind="foreach: Logos"></div>
<!-- /ko -->
</div>
</div>
</div>
</div>
<div class="modal fade v2" id="modalAttachments" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<h2 class="modal-title"><!--TOKENSTART-->Attachments<!--TOKEN:Attachments--></h2>
</div>
<div class="modal-body">
<!-- ko with: $root.VMDetails() -->
<div data-bind="foreach: Attachments"></div>
<!-- /ko -->
</div>
</div>
</div>
</div>
<div class="modal fade v2" id="modalShare" tabindex="-1" data-keyboard="false">
<div class="modal-dialog mobile-full">
<div class="mobile-header">
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: LayoutManager.SideContainer.Collapsed"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back<!--TOKEN:Back--></div>
<div class="btnV2 btnV2-link" data-dismiss="modal" data-bind="visible: !LayoutManager.SideContainer.Collapsed()" style="display: none;"><i class="far fa-chevron-left"></i> <!--TOKENSTART-->Back to Details<!--TOKEN:BackToDetails--></div>
</div>
<div class="modal-content">
<div class="modal-header mobile-hide">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<h2 class="modal-title"><!--TOKENSTART-->Share this Event<!--TOKEN:ShareThisEvent--></h2>
</div>
<div class="modal-body" data-bind="with: VMDetails">
<div class="share-email gv-form" data-bind="if: Share"></div>
</div>
</div>
</div>
</div>
<div class="zoom-modal" data-bind="attr: { id: ZoomModalClientID }, css: { 'in': ZoomIn, 'open': ShowZoom }, event: { click: zoomModalClose }" id="gvZoomModal">
<!-- ko if: ShowZoom --><!--/ko-->
<button type="button" title="Close Zoomed Image">
<img src="https://cdnpng.greenvelope.com/viewer2/_images/[email protected]" srcset="https://cdnpng.greenvelope.com/viewer2/_images/[email protected] 1x, https://cdnpng.greenvelope.com/viewer2/_images/[email protected] 2x" alt="Close Zoomed Image" height="49" width="48">
</button>
</div>
<!--ko template: { name: 'template-SendAGiftCard-DetailsModal', data: SendAGiftCardVM() }-->
<!--ko if: $data-->
<div class="modal fade v2 send-gift details-modal" data-bind="attr: { "id": DetailsModalClientID }" data-backdrop="static" data-keyboard="false" id="modal_GiftCardDetails">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span class="fa fa-times close" data-dismiss="modal" aria-hidden="true"></span>
<h4 data-bind="text: LanguageReference().getByToken("GiftCardForHost")">Gift Card Sent!</h4>
</div>
<div class="modal-body">
<img data-bind="attr: { "src": SentGiftCardImage }" alt="Gift Card">
<div>
<strong ignore="">
$<!--ko text: SentGiftCardAmount-->0<!--/ko-->
</strong>
</div>
<div>
<span data-bind="text: SentGiftCardProduct" ignore=""></span>
</div>
<div data-bind="if: HasSentGiftCardPurchaseDate"></div>
</div>
</div>
</div>
</div>
<!--/ko-->
<!--/ko-->
<!--ko template: { name: 'template-SendAGiftCard-EmailModal', data: SendAGiftCardVM() }-->
<!--ko if: $data && AcceptGiftCardsFromGuests()--><!--/ko-->
<!--/ko-->
<!--ko template: { name: 'template-SendAGiftCard-JifitiModal', data: SendAGiftCardVM() }-->
<!--ko if: $data && AcceptGiftCardsFromGuests()--><!--/ko-->
<!--/ko-->
</div>
<script type="text/html" id="template-label">
<div class="gv-tag" data-bind='attr: { style: "background-color: #" + Color + ";" }'>
<span data-bind="text: Label"></span>
</div>
</script>
</body></html>