<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="col-md-8">
<div class="flex-height row">
<div class="col-md-6">
<div id="charges-to-date-panel">
<div class="panel panel-default ">
<div class="panel-heading">Charges to Date
<div class="pull-right">
<a href="/020-1145433/usage">View
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="panel-body">
<div class="text-center">
<div class="overview-est-charges-total" style="margin-bottom: 114px;">
<dl class=" ">
<dt>Estimated Charges To Date</dt>
<dd>
<span>$0.00</span>
</dd>
</dl>
</div>
<div class="overview-cycle-ends">
<dl class=" ">
<dt>Cycle Ends</dt>
<dd>
<span>Oct 11, 2018</span>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div id="month-to-month-panel">
<div class="panel panel-default ">
<div class="panel-heading">Month to Month</div>
<div class="panel-body">
<div class="text-center">
<img src="https://mybill.rackspace.com/site_media/empty-line-graph.svg" style="max-width: 222px;">
<p>You currently have no invoice history.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="overview-transactions-panel">
<div class="panel panel-default " id="panel-transaction-list">
<div class="panel-heading">Transactions
<div class="pull-right">
<a href="/020-1145433/transaction-list">View
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="panel-body">
<div class="collapse-table collapse-table-small">
<div class="collapse-body">
<div class="text-center">
<p> No Transactions to Display. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/*! CSS Used from: https://mybill.rackspace.com/lib/bootstrap/dist/css/bootstrap.min.css */
a {
background-color: transparent;
}
a:active,a:hover {
outline: 0;
}
img {
border: 0;
}
@media print {
*,:after,:before {
color: #000!important;
text-shadow: none!important;
background: 0 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
a,a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
img {
page-break-inside: avoid;
}
img {
max-width: 100%!important;
}
p {
orphans: 3;
widows: 3;
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #337ab7;
text-decoration: none;
}
a:focus,a:hover {
color: #23527c;
text-decoration: underline;
}
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
img {
vertical-align: middle;
}
p {
margin: 0 0 10px;
}
.text-center {
text-align: center;
}
dl {
margin-top: 0;
margin-bottom: 20px;
}
dd,dt {
line-height: 1.42857143;
}
dt {
font-weight: 700;
}
dd {
margin-left: 0;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-md-6,.col-md-8 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width:992px) {
.col-md-6,.col-md-8 {
float: left;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-6 {
width: 50%;
}
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel-body {
padding: 15px;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-default {
border-color: #ddd;
}
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.panel-body:after,.panel-body:before,.row:after,.row:before {
display: table;
content: " ";
}
.panel-body:after,.row:after {
clear: both;
}
.pull-right {
float: right!important;
}
/*! CSS Used from: https://mybill.rackspace.com/lib/font-awesome/css/font-awesome.min.css */
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.pull-right {
float: right;
}
.fa-long-arrow-right:before {
content: "\f178";
}
/*! CSS Used from: Embedded */
a {
color: #0c7c84;
}
a:focus,a:hover {
color: #008085;
text-decoration: underline;
}
.col-md-6,.col-md-8 {
padding-right: 10px;
padding-left: 10px;
}
.row {
margin-right: -10px;
margin-left: -10px;
}
.text-center {
text-align: center;
}
.collapse-table {
border: 1px solid #d4d8d8;
}
dl dt {
color: #707070;
font-weight: 400;
margin-bottom: 4px;
}
.panel {
border-radius: 0;
border-color: #e3e6e6;
box-shadow: none;
margin-bottom: 20px;
width: 100%;
transition: all .1s ease;
}
.panel .panel-heading {
border-radius: 0;
border-color: transparent;
font-weight: 500;
background-color: #e8eaea;
color: #4f4e4e;
}
.panel .panel-heading a {
font-weight: 300;
}
.panel .panel-body {
padding: 16px;
}
.panel .collapse-table {
border: 0;
}
#OverviewPage .panel-body .collapse-table {
margin: -16px;
max-height: 600px;
overflow-y: scroll;
}
#OverviewPage .flex-height {
display: flex;
margin-bottom: 20px;
}
#OverviewPage .flex-height>* {
flex-grow: 1;
}
#OverviewPage .flex-height #month-to-month-panel {
height: 100%;
width: 100%;
}
#OverviewPage .flex-height .panel {
height: 100%;
}
/*! CSS Used fontfaces */
@font-face {
font-family:'FontAwesome';src:url('https://mybill.rackspace.com/lib/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('https://mybill.rackspace.com/lib/font-awesome/fonts/fontawesome-webfont.eot#iefix&v=4.7.0') format('embedded-opentype'),url('https://mybill.rackspace.com/lib/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://mybill.rackspace.com/lib/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('https://mybill.rackspace.com/lib/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('https://mybill.rackspace.com/lib/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;
}
