<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="center-container panel panel-default receipt-voucher-panel">
<div class="panel-heading text-center receipt-voucher-heading">
<h3 class="panel-title receipt-voucher-title">Your money has been sent.</h3>
<p>We have also sent a receipt to <span class="sender-emailID">[authur.dent@gmail.com]</span></p>
</div>
<div class="panel-body text-center receipt-voucher-body">
<p class="trackingMTCN">Tracking number (MTCN) <span class="mtcn-number"> 345 678 7863</span></p>
<hr />
<div class="listed-text">
<p>When picking up cash, your receiver will need</p>
<ul class ="reciever-doc-list">
<li>Government-issued photo ID.</li>
<li>Tracking number (MTCN)</li>
</ul>
</div>
<div class="receipt-share-box text-center">
<p class="text-center"> Add a free greeting to your transfer.</p>
<button type="button" class="btn btn-default btn-lg btn-voucher-greeting">Add a greeting</button>
</div>
<p class="voucher-share-text"> Share transfer information only </p>
<p class="voucher-transfer-Info">Share the transfer information with your receiver.</p>
<button type="button" class="btn btn-default btn-lg btn-voucher-share">Share</button>
</div>
</div>
</div>
<div class = "row">
<div class="center-container">
<div class="well">Basic Well</div>
</div>
</div>
</div>
/* Reciept Voucher Css */
/* .receipt-voucher-panel{{} */
.center-container{
margin: auto;
padding: 0px;
max-width: 630px;
}
.panel-heading.receipt-voucher-heading{
background: rgb(66, 183, 180);
border-radius: 0px;
color: #fff;
padding: 20px;
border: none;
}
.panel-heading.receipt-voucher-heading .receipt-voucher-title {
margin-bottom: 15px;
color: rgb(255, 255, 255);
font-family: OpenSans-SemiBold;
font-size: 18px;
font-weight: 600;
letter-spacing: 0px;
line-height: 17px;
text-align: center;
}
.panel-heading.receipt-voucher-heading p{
color: rgb(255, 255, 255);
font-family: OpenSans-SemiBold;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.1px;
line-height: 16px;
text-align: center;
margin-bottom: 0;
}
.panel-body.receipt-voucher-body {
background: rgb(33, 42, 51);
border-radius: 0px;
color: #fff;
}
.panel-body.receipt-voucher-body hr{
width: 50%;
margin: 15px auto;
display:block;
}
.receipt-voucher-body .trackingMTCN {
line-height: 19px;
color: rgb(255, 255, 255);
font-size: 14px;
font-family: OpenSans;
text-align: center;
letter-spacing: -0.1px;
margin: 15px 0 10px;
}
.receipt-voucher-body .mtcn-number{
color: rgb(255, 255, 255);
font-family: OpenSans-SemiBold;
font-size: 20px;
font-weight: 600;
line-height: 27px;
letter-spacing: -0.14px;
text-align: center;
padding-left: 15px;
}
.listed-text{
font-family: OpenSans;
display: block;
width: 300px;
margin: 10px auto 20px;;
}
.listed-text .reciever-doc-list{
font-family: OpenSans;
padding-left: 66px;
text-align: justify;
}
.listed-text p{
color: rgb(255, 255, 255);
font-family: OpenSans;
font-size: 14px;
letter-spacing: -0.15px;
line-height: 17px;
}
.receipt-share-box{
display:block;
width: 320px;
height: auto;
background: rgb(255, 255, 255);
border-radius: 8px;
margin: 0 auto;
color:#000;
position: relative;
padding: 15px 20px;
margin-bottom:25px;
}
.receipt-share-box p{
margin-top: 60px;
height: 18px;
color: rgb(0, 0, 0);
font-size: 14px;
font-family: OpenSans;
letter-spacing: 0px;
line-height: 20px;
}
.receipt-share-box .btn-voucher-greeting {
background: rgb(255, 221, 0);
border-radius: 3px;
width: 284px;
color: rgb(0, 0, 0);
font-family: OpenSans-SemiBold;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.27px;
border: none;
display: block;
}
.receipt-share-box .btn-voucher-greeting:focus, .btn-voucher-share:focus{
outline:none !important;
}
.btn-voucher-share{
width: 235px;
background: rgb(255, 221, 0) !important;
border-radius: 3px;
color: rgb(0, 0, 0)!important;
font-family: OpenSans-SemiBold;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.27px;
border: none !important;
display: block !important;
margin: 0 auto 10px;
}
.voucher-share-text {
line-height: 16px;
color: rgb(255, 221, 0);
font-size: 14px;
font-family: OpenSans-SemiBold;
font-weight: 600;
letter-spacing: -0.23px;
display:block;
text-align:center;
margin-bottom: 15px;
}
.voucher-transfer-Info {
font-size:14px;
font-family: OpenSans;
line-height:18px;
letter-spacing: 0px;
}
@media only screen and (max-width: 767px) {
.panel-heading.receipt-voucher-heading{padding:15px;}
.panel-heading.receipt-voucher-heading .receipt-voucher-title{
font-size:16px;
}
.panel-heading.receipt-voucher-heading p{font-size:12px;}
.panel-heading.receipt-voucher-heading .sender-emailID {
display: block;
padding-top:4px;
}
.receipt-voucher-body .mtcn-number{
display: block;
padding: 10px 0 5px;
}
.panel-body.receipt-voucher-body hr{
margin: 0px auto 15px;
width: 80%;
}
}
@media (max-width: 320px) {
.receipt-share-box {
width: 285px;
}
.receipt-share-box .btn-voucher-greeting {
width: 240px;
}
}
