RS-QPX-PasswordReset-Spanish-US

/*!
* jQuery Mobile 1.4.5
* VIVR CSS Template for SC QuickPage - Bart Ridge
*/
/* Globals */
/* Font
-----------------------------------------------------------------------------------------------------------*/
html {
font-size: 100%;
}
body,
input,
select,
textarea,
button,
.ui-btn {
font-size: 1em;
line-height: 1.3;
font-family: sans-serif /*{global-font-family}*/;
}
legend,
.ui-input-text input,
.ui-input-search input {
color: inherit;
text-shadow: inherit;
}
/* Form labels (overrides font-weight bold in bars, and mini font-size) */
.ui-mobile label,
div.ui-controlgroup-label {
font-weight: normal;
font-size: 16px;
}
/* Separators
-----------------------------------------------------------------------------------------------------------*/
/* Field contain separator (< 28em) */
.ui-field-contain {
border-bottom-color: #828282;
border-bottom-color: rgba(0,0,0,.15);
border-bottom-width: 1px;
border-bottom-style: solid;
}
/* Table opt-in classes: strokes between each row, and alternating row stripes */
/* Classes table-stroke and table-stripe are deprecated in 1.4. */
.table-stroke thead th,
.table-stripe thead th,
.table-stripe tbody tr:last-child {
border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
border-bottom: 1px solid rgba(0,0,0,.1);
}
.table-stroke tbody th,
.table-stroke tbody td {
border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback */
border-bottom: 1px solid rgba(0,0,0,.05);
}
.table-stripe.table-stroke tbody tr:last-child th,
.table-stripe.table-stroke tbody tr:last-child td {
border-bottom: 0;
}
.table-stripe tbody tr:nth-child(odd) td,
.table-stripe tbody tr:nth-child(odd) th {
background-color: #eeeeee; /* non-RGBA fallback */
background-color: rgba(0,0,0,.04);
}
/* Buttons
-----------------------------------------------------------------------------------------------------------*/
.five9-ln-back-btn-caption {
color: #FFFFFF !important;
text-shadow: none !important;
font-weight: bold !important;
}
.five9-ln-right-btn-caption {
color: #FFFFFF !important;
text-shadow: none !important;
font-weight: bold !important;
}
.five9-ivr-cancel-btn {
background-color: #2E4E9E !important;
color: #FFFFFF !important;
}
.five9-ivr-cancel-btn:hover {
background-color: #ffffff !important;
color: #000000 !important;
}
.ui-btn,
label.ui-btn {
font-weight: bold;
border-width: 1px;
border-style: solid;
}
.ui-btn {
text-decoration: none !important;
}
.ui-btn-active {
cursor: pointer;
}
/* Corner rounding
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-btn-corner-all deprecated in 1.4 */
.ui-corner-all {
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
}
/* Buttons */
.ui-btn-corner-all,
.ui-btn.ui-corner-all,
/* Slider track */
.ui-slider-track.ui-corner-all,
/* Flipswitch */
.ui-flipswitch.ui-corner-all,
/* Count bubble */
.ui-li-count {
-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
border-radius: .3125em /*{global-radii-buttons}*/;
}
/* Icon-only buttons */
.ui-btn-icon-notext.ui-btn-corner-all,
.ui-btn-icon-notext.ui-corner-all {
-webkit-border-radius: 1em;
border-radius: 1em;
}
/* Radius clip workaround for cleaning up corner trapping */
.ui-btn-corner-all,
.ui-corner-all {
-webkit-background-clip: padding;
background-clip: padding-box;
}
/* Popup arrow */
.ui-popup.ui-corner-all > .ui-popup-arrow-guide {
left: .6em /*{global-radii-blocks}*/;
right: .6em /*{global-radii-blocks}*/;
top: .6em /*{global-radii-blocks}*/;
bottom: .6em /*{global-radii-blocks}*/;
}
/* Shadow
-----------------------------------------------------------------------------------------------------------*/
.ui-shadow {
-webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
}
.ui-shadow-inset {
-webkit-box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-moz-box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
}
.ui-overlay-shadow {
-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
-moz-box-shadow: 0 0 12px rgba(0,0,0,.6);
box-shadow: 0 0 12px rgba(0,0,0,.6);
}
/* Icons
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
background-color: #666666 /*{global-icon-color}*/;
background-color: rgba(0,0,0,.15) /*{global-icon-disc}*/;
background-position: center center;
background-repeat: no-repeat;
-webkit-border-radius: 1em;
border-radius: 1em;
}
/* Alt icons */
.ui-alt-icon.ui-btn:after,
.ui-alt-icon .ui-btn:after,
html .ui-alt-icon.ui-checkbox-off:after,
html .ui-alt-icon.ui-radio-off:after,
html .ui-alt-icon .ui-checkbox-off:after,
html .ui-alt-icon .ui-radio-off:after {
background-color: #666666 /*{global-icon-color}*/;
background-color: rgba(0,0,0,.15) /*{global-icon-disc}*/;
}
/* No disc */
.ui-nodisc-icon.ui-btn:after,
.ui-nodisc-icon .ui-btn:after {
background-color: transparent;
}
/* Icon shadow */
.ui-shadow-icon.ui-btn:after,
.ui-shadow-icon .ui-btn:after {
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.3) /*{global-icon-shadow}*/;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.3) /*{global-icon-shadow}*/;
box-shadow: 0 1px 0 rgba(255,255,255,.3) /*{global-icon-shadow}*/;
}
/* Checkbox and radio */
.ui-btn.ui-checkbox-off:after,
.ui-btn.ui-checkbox-on:after,
.ui-btn.ui-radio-off:after,
.ui-btn.ui-radio-on:after {
display: block;
width: 18px;
height: 18px;
margin: -9px 2px 0 2px;
}
.ui-checkbox-off:after,
.ui-btn.ui-radio-off:after {
filter: Alpha(Opacity=30);
opacity: .3;
}
.ui-btn.ui-checkbox-off:after,
.ui-btn.ui-checkbox-on:after {
-webkit-border-radius: .1875em;
border-radius: .1875em;
}
.ui-btn.ui-checkbox-off:after {
background-color: #666;
background-color: rgba(0,0,0,.3);
}
.ui-radio .ui-btn.ui-radio-on:after {
background-image: none;
background-color: #fff;
width: 8px;
height: 8px;
border-width: 5px;
border-style: solid;
}
.ui-alt-icon.ui-btn.ui-radio-on:after,
.ui-alt-icon .ui-btn.ui-radio-on:after {
background-color: #000;
}
/* Loader */
.ui-icon-loading {
background: url("images/ajax-loader.gif");
background-size: 2.875em 2.875em;
}
/* Swatches */
/* A
-----------------------------------------------------------------------------------------------------------*/
/* Bar: Toolbars, dividers, slider track */
.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit,
html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit,
html body .ui-group-theme-a .ui-bar-inherit {
background-color: #003B5D /*{a-bar-background-color}*/;
border-color: #FFFFFF /*{a-bar-border}*/;
color: #FFFFFF /*{a-bar-color}*/;
text-shadow: none;
font-weight: bold;
}
.ui-bar-a {
border-width: 1px;
border-style: solid;
}
/* Page and overlay */
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
background-image: url('');
background-position: 50% 80%;
background-size: 30%;
background-repeat: no-repeat;
background-color: #FFFFFF /*{a-page-background-color}*/;
border-color: #bbbbbb /*{a-page-border}*/;
color: #000000 /*{a-page-color}*/;
font-weight: bold;
text-shadow: none;
}
/* Body: Read-only lists, text inputs, collapsible content */
.ui-body-a,
.ui-page-theme-a .ui-body-inherit,
html .ui-bar-a .ui-body-inherit,
html .ui-body-a .ui-body-inherit,
html body .ui-group-theme-a .ui-body-inherit,
html .ui-panel-page-container-a {
background-color: #FFFFFF /*{a-body-background-color}*/;
border-color: #dddddd /*{a-body-border}*/;
color: #333333 /*{a-body-color}*/;
}
.ui-body-a {
border-width: 1px;
border-style: solid;
}
/* Links */
.ui-page-theme-a a,
html .ui-bar-a a,
html .ui-body-a a,
html body .ui-group-theme-a a {
color: #FFFFFF /*{a-link-color}*/;
font-weight: bold;
}
.ui-page-theme-a a:visited,
html .ui-bar-a a:visited,
html .ui-body-a a:visited,
html body .ui-group-theme-a a:visited {
color: #FFFFFF /*{a-link-visited}*/;
}
.ui-page-theme-a a:hover,
html .ui-bar-a a:hover,
html .ui-body-a a:hover,
html body .ui-group-theme-a a:hover {
color: #FFFFFF /*{a-link-hover}*/;
}
.ui-page-theme-a a:active,
html .ui-bar-a a:active,
html .ui-body-a a:active,
html body .ui-group-theme-a a:active {
color: #FFFFFF /*{a-link-active}*/;
}
/* Button up */
.ui-page-theme-a .ui-btn,
html .ui-bar-a .ui-btn,
html .ui-body-a .ui-btn,
html body .ui-group-theme-a .ui-btn,
html head + body .ui-btn.ui-btn-a,
/* Button visited */
.ui-page-theme-a .ui-btn:visited,
html .ui-bar-a .ui-btn:visited,
html .ui-body-a .ui-btn:visited,
html body .ui-group-theme-a .ui-btn:visited,
html head + body .ui-btn.ui-btn-a:visited {
background-color: #2E4E9E /*{a-bup-background-color} menu buttons */;
border-color: #ffffff /*{a-bup-border}*/;
color: #FFFFFF /*{a-bup-color}*/;
font-weight: bold;
text-shadow: none;
}
/* Button hover */
.ui-page-theme-a .ui-btn:hover,
html .ui-bar-a .ui-btn:hover,
html .ui-body-a .ui-btn:hover,
html body .ui-group-theme-a .ui-btn:hover,
html head + body .ui-btn.ui-btn-a:hover {
background-color: #FFFFFF /*{a-bhover-background-color}*/;
border-color: #8c8c8c /*{a-bhover-border}*/;
color: #000000 /*{a-bhover-color}*/;
text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #eeeeee /*{a-bhover-shadow-color}*/;
}
/* Button down */
.ui-page-theme-a .ui-btn:active,
html .ui-bar-a .ui-btn:active,
html .ui-body-a .ui-btn:active,
html body .ui-group-theme-a .ui-btn:active,
html head + body .ui-btn.ui-btn-a:active {
background-color: #FFFFFF /*{a-bdown-background-color}*/;
border-color: #8c8c8c /*{a-bdown-border}*/;
color: #000000 /*{a-bdown-color}*/;
text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #eeeeee /*{a-bdown-shadow-color}*/;
}
/* Active button */
.ui-page-theme-a .ui-btn.ui-btn-active,
html .ui-bar-a .ui-btn.ui-btn-active,
html .ui-body-a .ui-btn.ui-btn-active,
html body .ui-group-theme-a .ui-btn.ui-btn-active,
html head + body .ui-btn.ui-btn-a.ui-btn-active,
/* Active checkbox icon */
.ui-page-theme-a .ui-checkbox-on:after,
html .ui-bar-a .ui-checkbox-on:after,
html .ui-body-a .ui-checkbox-on:after,
html body .ui-group-theme-a .ui-checkbox-on:after,
.ui-btn.ui-checkbox-on.ui-btn-a:after,
/* Active flipswitch background */
.ui-page-theme-a .ui-flipswitch-active,
html .ui-bar-a .ui-flipswitch-active,
html .ui-body-a .ui-flipswitch-active,
html body .ui-group-theme-a .ui-flipswitch-active,
html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,
/* Active slider track */
.ui-page-theme-a .ui-slider-track .ui-btn-active,
html .ui-bar-a .ui-slider-track .ui-btn-active,
html .ui-body-a .ui-slider-track .ui-btn-active,
html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
html body div.ui-slider-track.ui-body-a .ui-btn-active {
background-color: #0b1f28 /*{a-active-background-color}*/;
border-color: #81111d /*{a-active-border}*/;
color: #ffffff /*{a-active-color}*/;
text-shadow: 0 /*{a-active-shadow-x}*/ 0px /*{a-active-shadow-y}*/ 0 /*{a-active-shadow-radius}*/ #444444 /*{a-active-shadow-color}*/;
}
/* Active radio button icon */
.ui-page-theme-a .ui-radio-on:after,
html .ui-bar-a .ui-radio-on:after,
html .ui-body-a .ui-radio-on:after,
html body .ui-group-theme-a .ui-radio-on:after,
.ui-btn.ui-radio-on.ui-btn-a:after {
border-color: #0b1f28 /*{a-active-background-color}*/;
}
/* Focus */
.ui-page-theme-a .ui-btn:focus,
html .ui-bar-a .ui-btn:focus,
html .ui-body-a .ui-btn:focus,
html body .ui-group-theme-a .ui-btn:focus,
html head + body .ui-btn.ui-btn-a:focus,
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-a .ui-focus,
html .ui-bar-a .ui-focus,
html .ui-body-a .ui-focus,
html body .ui-group-theme-a .ui-focus,
html head + body .ui-btn-a.ui-focus,
html head + body .ui-body-a.ui-focus {
-webkit-box-shadow: 0 0 12px #FFFFFF /*{a-active-background-color}*/;
-moz-box-shadow: 0 0 12px #FFFFFF /*{a-active-background-color}*/;
box-shadow: 0 0 12px #FFFFFF /*{a-active-background-color}*/;
}
/* Structure */
/* Disabled
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-disabled deprecated in 1.4. :disabled not supported by IE8 so we use [disabled] */
.ui-disabled,
.ui-state-disabled,
button[disabled],
.ui-select .ui-btn.ui-state-disabled {
filter: Alpha(Opacity=30);
opacity: .3;
cursor: default !important;
pointer-events: none;
}
/* Focus state outline
-----------------------------------------------------------------------------------------------------------*/
.ui-btn:focus,
.ui-btn.ui-focus {
outline: 0;
}
/* Unset box-shadow in browsers that don't do it right */
.ui-noboxshadow .ui-shadow,
.ui-noboxshadow .ui-shadow-inset,
.ui-noboxshadow .ui-overlay-shadow,
.ui-noboxshadow .ui-shadow-icon.ui-btn:after,
.ui-noboxshadow .ui-shadow-icon .ui-btn:after,
.ui-noboxshadow .ui-focus,
.ui-noboxshadow .ui-btn:focus,
.ui-noboxshadow input:focus,
.ui-noboxshadow .ui-panel {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.ui-noboxshadow .ui-btn:focus,
.ui-noboxshadow .ui-focus {
outline-width: 1px;
outline-style: auto;
}
.five9-ln-last-page-thanks {
               display: none;
}
.five9-ln-last-page-appreciation {
               display: none;
}
.five9-ln-last-page-goodbye {
               display: none;
}
.five9-ln-last-page-thanks:after {
               content: 'Thank You!';
}
.five9-ln-last-page-appreciation:after {
               content: 'We appreciate your business and loyalty.';
}
.five9-ln-last-page-goodbye:after {
               content: 'Have a nice day!';
}

Lets Chat

Text Us

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Agent-script</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    .ttable, th, td{
    border: none;
    }
/* table1 added for R13 fix */
	.table1 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 1em;
    border: none;
    }	
		
    .table2 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 1em;
    border: none;
    }

.column-1 {
    background-color: #1478B3 !important;
    color: #fff;
    width: 75px;
    font-weight: 700;
    padding: 8px;
    }

.column-2 {
    background-color: #e6e6e6 !important;
    color: #000000;
    width: 150px;
    font-weight: 700;
    }

.column-2:hover {
    background-color: #ffffff !important;
    }

.row {
    color: #5a5d60;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.7857;
    border-bottom: 1px solid #ddd;
    }
    .head-img {
      object-fit: contain;
      width: 100%;
      max-width: 300px;
      max-height: 170px;
    }

.title{
      font-family: Arial;
      color: #000000;
      text-align: center;
  }
  .tabContainer{
      width: 100%;
      height: 50%;
  }
  .tabContainer .buttonContainer{
      height: 15%;
  }
  .tabContainer .buttonContainer button{
      width: 20%;
      height: 100%;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 10px;
      font-family: sans-serif;
      font-size: 18px;
      background-color: #eeeeee;
  }
  .tabContainer .buttonContainer button:hover{
      background-color: #d7d4d4;
  }
  .tabContainer .tabPanel{
      height: 85%;
      background-color: none !important;
      color: white;
      text-align: center;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: sans-serif;
      font-size: 22px;
      display: none;
  }

</style>

</head>
<body style="padding: 20px; background: #ffffff">

<table class="table1"><tbody>
<tr class="row">
<td style="height: 170px;background-color: #FFFFFF;text-align: center">
<img class="head-img" src="" valign="top" align="center">
</td>
<td style="text-align: center">
<font color="#000000" size="9" face="Arial"><strong>Inbound Call</strong></font><br>
<font class="ivi1" style="text-align: center" size="4"><strong>Intent: </font><font class="ivi2" color="#82050b" size="4">@IVA.SCOPS.Intent@</strong><br></font>
<font class="vb1" style="text-align: center" size="4"><strong>IVA Authorization: </font><font class="vb2" color="#82050b" size="4">@IVA.SCOPS.AuthStatus@</strong><br></font>
<font class="vb1" style="text-align: center" size="4"><strong>Authorization Method: </font><font class="vb2" color="#82050b" size="4">@IVA.SCOPS.AuthType@</strong><br></font>
<font class="is1" style="text-align: center" size="4"><strong>IVA Primary Intent Statement: </font><font class="is2" color="#82050b" size="4">@IVA.SCOPS.Utterance@</strong></font>
</td>
<td valign="center" align="center"><h3><font face="Arial">
Hello my name is <font color="#82050b">@Agent.full_name@ </font>with Company Name Here How may I assist you today?<br>
Is this <font color="#82050b">@Customer.first_name@ @Customer.last_name@?<br></h3>
</td>
</tr>
</tbody></table>

<div class="tabContainer">
    <div class="buttonContainer">
        <button onclick="showPanel(0,'#1478B3')">Customer Information</button>
		<button onclick="showPanel(1,'#1478B3')">IVA Data</button>
        <button onclick="showPanel(2,'#1478B3')">Interaction Data</button>
        <button onclick="showPanel(3,'#1478B3')">Last Interaction</button>
		<button onclick="showPanel(4,'#1478B3')">Training Videos</button>
    </div>

<div class="tabPanel">
    <table class="table2">
    <tbody>
    <tr class="row">
    <td class="column-1">Customer Name</td>
    <td class="column-2">@Customer.first_name@ @Customer.last_name@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Street</td>
    <td class="column-2">@Customer.street@</td>
    </tr>
    <tr class="row">
    <td class="column-1">State</td>
    <td class="column-2">@Customer.city@, @Customer.state@ @Customer.zip@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Phone Number</td>
    <td class="column-2">@Customer.number1@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Customer Email</td>
    <td class="column-2">@Customer.email@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Account Number</td>
    <td class="column-2">@Customer.Account Number@</td>
    </tr>
    </tbody>
    </table>
  </div>
	
	<div class="tabPanel">
    <table class="table2">
    <tbody>
    <tr class="row">
    <td class="column-1">Intent</td>
    <td class="column-2">@IVA.SCOPS.Intent@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Utterance</td>
    <td class="column-2">@IVA.SCOPS.Utterance@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Customer Journey</td>
    <td class="column-2">@IVA.SCOPS.CustomerJourney@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Account Balance</td>
    <td class="column-2">@IVA.SCOPS.Banking.AccountBalance@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Loan Balance</td>
    <td class="column-2">@IVA.SCOPS.Banking.LoanBalance@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Auth Confidence</td>
    <td class="column-2">@IVA.SCOPS.AuthConfidence@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Auth Status</td>
    <td class="column-2">@IVA.SCOPS.AuthStatus@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Tracking Number</td>
    <td class="column-2">@IVA.SCOPS.Retail.TrackingNumber@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Order Number</td>
    <td class="column-2">@IVA.SCOPS.Retail.OrderNumber@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Case Subject</td>
    <td class="column-2">@IVA.SCOPS.CaseSubject@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Change Address Complete</td>
    <td class="column-2">@IVA.SCOPS.ChangeAddress.AddressComplete@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Change Address City</td>
    <td class="column-2">@IVA.SCOPS.ChangeAddress.City@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Change Address State</td>
    <td class="column-2">@IVA.SCOPS.ChangeAddress.State@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Change Address Street</td>
    <td class="column-2">@IVA.SCOPS.ChangeAddress.Street@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Change Address Zip</td>
    <td class="column-2">@IVA.SCOPS.ChangeAddress.Zipcode@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Description</td>
    <td class="column-2">@IVA.SCOPS.Description@</td>
    </tr>
	<tr class="row">
    <td class="column-1">IVA Session Result</td>
    <td class="column-2">@IVA.SCOPS.IVA_Session_Result@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Param One</td>
    <td class="column-2">@IVA.SCOPS.Param1@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Param Two</td>
    <td class="column-2">@IVA.SCOPS.Param2@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Param Three</td>
    <td class="column-2">@IVA.SCOPS.Param3@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Param Four</td>
    <td class="column-2">@IVA.SCOPS.Param4@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Param Five</td>
    <td class="column-2">@IVA.SCOPS.Param5@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Param Six</td>
    <td class="column-2">@IVA.SCOPS.Param6@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Param Seven</td>
    <td class="column-2">@IVA.SCOPS.Param7@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Task Value</td>
    <td class="column-2">@IVA.SCOPS.TaskValue@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Task Value Number</td>
    <td class="column-2">@IVA.SCOPS.TaskValueNum@</td>
    </tr>
	<tr class="row">
    <td class="column-1">IVA Summary</td>
    <td class="column-2">@IVA.SCOPS.Call.Summary@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Form Image</td>
    <td class="column-2 imageurl"></td>
    </tr>
    </tbody>
    </table>
  </div>

<div class="tabPanel">
    <table class="table2">
    <tbody>
    <tr class="row">
    <td class="column-1">Interaction Type</td>
    <td class="column-2">@Call.type_name@</td>
    </tr>
	<tr class="row">
    <td class="column-1">Media Type</td>
    <td class="column-2">@Call.mediatype@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Queue Time</td>
    <td class="column-2">@Call.queue_time@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Skill Group</td>
    <td class="column-2">@Call.skill_name@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Dialed Number</td>
    <td class="column-2">@Call.DNIS@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Customer ANI</td>
    <td class="column-2">@Call.ANI@</td>
    </tr>
    <tr class="row">
    <td class="column-1">Campaign Name</td>
    <td class="column-2">@Call.campaign_name@</td>
    </tr>
    </tbody>
    </table>
</div>

<div class="tabPanel">
  <table class="table1">
  <tbody>
  <tr class="row">
  <td class="column-1">Last Campaign</td>
  <td class="column-2">@Customer.last_campaign@</td>
  </tr>
  <tr class="row">
  <td class="column-1">Last Agent</td>
  <td class="column-2">@Customer.last_agent@</td>
  </tr>
  <tr class="row">
  <td class="column-1">Last Disposition</td>
  <td class="column-2">@Customer.last_disposition@</td>
  </tr>
  <tr class="row">
  <td class="column-1">Last Interaction Date</td>
  <td class="column-2">@Customer.Last_Interaction_Date@</td>
  </tr>
  </tbody>
  </table>
</div>

</body>
</html>