<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="wrapper" class="">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav" id="menu-accordion">
<li class="sidebar-brand">
<a href="/">
Company logo
</a>
</li>
<li class="panel dashboard"> <a data-toggle="collapse" class="collapsed" data-parent="#menu-accordion" href="#dashboard-link">Dashboard <span class="glyphicon glyphicon-home pull-right menu-icon"></span></a>
</li>
<li class="panel inv"> <a data-toggle="collapse" class="collapsed active" data-parent="#menu-accordion" href="#inv-link">Programs <span class="glyphicon glyphicon-chevron-down pull-right menu-icon"></span></a>
<ul id="inv-link" class="open">
<li class="active"><a href="#" class="active">Winter Fuel Oil</a></li>
<li><a href="#">Gasoline</a></li>
<li><a href="#">Newton Schl Dist</a></li>
<li><a href="#">Propane</a></li>
<li><a href="#">Crack Spreads</a></li>
<li><a href="#">Profit Enhancement</a></li>
</ul>
</li>
<li class="panel transactions"> <a data-toggle="collapse" class="collapsed" data-parent="#menu-accordion" href="#transactions-link">Transactions <span class="glyphicon glyphicon-chevron-down pull-right menu-icon"></span></a>
<ul id="transactions-link" class="collapse">
<li><a href="#">Trade Log</a></li>
<li><a href="#">Supply Log</a></li>
</ul>
</li>
<li class="panel settings"> <a data-toggle="collapse" class="collapsed" data-parent="#menu-accordion" href="#settings-link">Settings <span class="glyphicon glyphicon-chevron-down pull-right menu-icon"></span></a>
<ul id="settings-link" class="collapse">
<li><a href="#">Profile</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Programs</a></li>
</ul>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div id="topbar">
<div class="pull-left">
<a href="#menu-toggle" class="" id="menu-toggle">=<i class="fa fa-bars"></i></a>
<li class="dropdown company-name">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><h1 class="company-name">BrownRice, Inc.</h1> <i class="glyphicon glyphicon-chevron-down onhover"></i></a>
<ul class="dropdown-menu">
<li><a href="#">BrownRice II, Inc.<span class="glyphicon glyphicon-paperclip pull-right"></span></a></li>
<li class="divider"></li>
<li><a href="#">Bob's Oil, Inc. <span class="glyphicon glyphicon-paperclip pull-right"></span></a></li>
<li class="divider"></li>
<li><a href="#">Add New Company <span class="glyphicon glyphicon-cog pull-right"></span></a></li>
</ul>
</li>
</div>
<div class="pull-right">
<div id="header_user">
Hi, oilman <a href="/logout/">Sign off</a>
</div>
</div>
<div class="clearfix"></div>
</div>
<div id="main-content">
<div class="col-lg-12 content-head">
<h1 class="pull-left">Program Summary - Winter Fuel Oil</h1>
</div> <!-- /.content-head -->
<div class="clearfix"></div>
<div class="content-body">
<div class="box-row">
<div class="col-lg-6">
<div class="box-card inv">
<div class="box-head">
<div class="card-title" >Program Volume</div>
<div class="card-title-number">310,000<span style="font-size: 50%"> gal</span></div>
</div>
<div class="box-content">
<div class='chart-container'>
<div class='bar-row'>
<div class='bar-label'>
PHYS
</div>
<div class='bar physical' style='width: 50%;'>
310,000
</div>
</div>
<div class='bar-row'>
<div class='bar-label'>
HEDGE
</div>
<div class='bar hedge' style='width: 80%;'>
-388,000
</div>
</div>
</div>
<div class="table-container">
<table class="table">
<tbody>
<tr>
<td class="row-title">Volume at Risk</td>
<td class="danger">-78,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="box-card inv">
<div class="box-head">
<div class="card-title" >Mark-to-Market Cost</div>
<div class="card-title-number">$ 1.5827</div>
</div>
<div class="box-content">
<div class="table-container">
<table class="table table-condensed">
<tbody>
<tr class="tr-condensed">
<td class="row-title">Avg Cost of Physical</td>
<td>$ 1.6213</td>
</tr>
<tr>
<td class="row-title">Avg Hedge Impact</td>
<td>$-0.0386</td>
</tr>
<tr>
<td class="row-title">Mark-to-Market Fuel Cost</td>
<td>$ 1.5827</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="main-boxes">
<div class="col-lg-12">
<div class="box">
<div class="box-head">
<div class="title pull-left">Program Details</div>
</div>
<div class="clearfix"></div>
<div class="box-content">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#supply" aria-controls="home" role="tab" data-toggle="tab">Positions</a></li>
<li role="presentation"><a href="#hedge-pos" aria-controls="profile" role="tab" data-toggle="tab">trade log</a></li>
<li role="presentation"><a href="#supply-log" aria-controls="profile" role="tab" data-toggle="tab">supply log</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="supply">
<table class="table data-table">
<thead>
<tr>
<th>Contract<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter" data-toggle="collapse" data-target="#filter-row"></i></th>
<th>Product<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter" data-toggle="collapse" data-target="#filter-row"></i></th>
<th class="number">Volume<i class="glyphicon glyphicon-sort"></i></th>
<th class="number">Entry Price<i class="glyphicon glyphicon-sort"></i></th>
<th class="number">Exit Price<i class="glyphicon glyphicon-sort"></i></th>
<th class="number">Gain/Loss<i class="glyphicon glyphicon-sort"></i></th>
<th class="number">Status<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter" data-toggle="collapse" data-target="#filter-row"></i></th>
<th class="number">Date Opened<i class="glyphicon glyphicon-sort"></i></th>
<th>Actions</th>
</tr>
<tr class="filters collapse" id="filter-row">
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="Short Inventory Test">HOG2017</option>
<option value="Short Inventory Test 2">HOH2017</option>
</select>
</th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="Diesel">Heating Oil</option>
</select>
</th>
<th rowspan="1" colspan="1"> </th>
<th rowspan="1" colspan="1"></th>
<th rowspan="1" colspan="1"></th>
<th rowspan="1" colspan="1"> </th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="2017-01-12 11:16">Closed</option>
<option value="2017-01-12 11:17">Open</option>>
</select>
</th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td>HOG2017</td>
<td>Heating Oil</td>
<td class="number">-84,000</td>
<td class="number">1.4865</td>
<td class="number">1.5465</td>
<td class="number">-0.0600</td>
<td class="number">Closed</td>
<td class="number">2017-01-12 11:16</td>
<td class="number"></td>
</tr>
<tr>
<td>HOG2017</td>
<td>Heating Oil</td>
<td class="number">-210,000</td>
<td class="number">1.4865</td>
<td class="number">1.4656</td>
<td class="number">0.0209</td>
<td class="number">Closed</td>
<td class="number">2017-01-12 11:16</td>
<td class="number"></td>
</tr>
<tr>
<td>HOG2017</td>
<td>Heating Oil</td>
<td class="number">-42,000</td>
<td class="number">1.4875</td>
<td class="number">1.4656</td>
<td class="number">0.0219</td>
<td class="number">Closed</td>
<td class="number">2017-01-12 11:16</td>
<td class="number"></td>
</tr>
<tr>
<td>HOG2017</td>
<td>Heating Oil</td>
<td class="number">-168,000</td>
<td class="number">1.4875</td>
<td class="number">1.5361</td>
<td class="number">-0.0486</td>
<td class="number">Closed</td>
<td class="number">2017-01-12 11:16</td>
<td class="number"></td>
</tr>
<tr>
<td>HOH2017</td>
<td>Heating Oil</td>
<td class="number">-84,000</td>
<td class="number">1.5598</td>
<td class="number">1.6329</td>
<td class="number">-0.0731</td>
<td class="number">Open</td>
<td class="number">2017-01-12 11:16</td>
<td class="number"><a href="#">Roll</a></td>
</tr>
<tr>
<td>HOH2017</td>
<td>Heating Oil</td>
<td class="number">-126,000</td>
<td class="number">1.5545</td>
<td class="number">1.6329</td>
<td class="number">-0.0784</td>
<td class="number">Open</td>
<td class="number">2017-01-12 11:16</td>
<td class="number"><a href="#">Roll</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td class="number">210,000</td>
<td class="number"></td>
<td class="number"></td>
<td class="number">-0.0386</td>
<td class="number"></td>
<td class="number"></td>
</tr>
</tfoot>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="hedge-pos" name="Trade Log">
<table class="table data-table">
<thead>
<tr>
<th>Product<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter" data-toggle="collapse" data-target="#trade-filter-row"></i></th>
<th>Contract<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter" data-toggle="collapse" data-target="#trade-filter-row"></i></th>
<th>Type<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter" data-toggle="collapse" data-target="#trade-filter-row"></i></th>
<th class="number">Volume</th>
<th class="number">Price</th>
<th class="number">Trader<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter" data-toggle="collapse" data-target="#trade-filter-row"></i></th>
<th class="number">Status<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter" data-toggle="collapse" data-target="#trade-filter-row"></i></th>
<th class="number">Timestamp</th>
</tr>
<tr class="filters collapse" id="trade-filter-row">
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="Diesel">Heating Oil</option>
</select>
</th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="HOG2017">HOG2017</option>
<option value="HOH2017">HOH2017</option>
</select>
</th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="buy">Buy</option>
<option value="sell">Sell</option>
</select>
</th>
<th rowspan="1" colspan="1"></th>
<th rowspan="1" colspan="1">
</th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="2017-01-12 11:16">mbw</option>
</select>
</th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="confirmed">Confirmed</option>
<option value="reconciled">Reconciled</option>
<option value="working">Working</option>
</select>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Heating Oil</td>
<td>HOG2017</td>
<td>Sell</td>
<td class="number">4200</td>
<td class="number">1.1222</td>
<td class="number">mbw</td>
<td>Working</td>
<td>2017/01/20 10:23:24</td>
</tr>
<tr>
<td>Heating Oil</td>
<td>HOH2017</td>
<td>Sell</td>
<td class="number">4200</td>
<td class="number">1.4876</td>
<td class="number">mbw</td>
<td>Confirmed</td>
<td>2017/01/20 10:13:54</td>
</tr>
<tr>
<td>Heating Oil</td>
<td>HOG2017</td>
<td>Sell</td>
<td class="number">4200</td>
<td class="number">1.1222</td>
<td class="number">mbw</td>
<td>Working</td>
<td>2017/01/20 09:48:32</td>
</tr>
<tr>
<td>Heating Oil</td>
<td>HOH2017</td>
<td>Sell</td>
<td class="number">4200</td>
<td class="number">1.4876</td>
<td class="number">mbw</td>
<td>Confirmed</td>
<td>2017/01/20 09:13:54</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td class="number"></td>
<td class="number"></td>
<td class="number"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="supply-log" name="Supply Log">
<table id="users" class="table data-table" role="grid" aria-describedby="users_info">
<thead>
<tr>
<th class="select-checkbox no-filter sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 7px;">
</th>
<th class="sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" aria-label="Product: activate to sort column ascending">
Product<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter" data-toggle="collapse" data-target="#phys-filter-row"></i>
</th>
<th class="sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending">
Type<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter"></i>
</th>
<th class="no-filter sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" aria-label="Net Volume: activate to sort column ascending">
Net Volume<i class="glyphicon glyphicon-sort"></i>
</th>
<th class="no-filter sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending">
Price<i class="glyphicon glyphicon-sort"></i>
</th>
<th class="sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" aria-label="Counter Party: activate to sort column ascending">
Counter Party<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter"></i>
</th>
<th class="sorting_asc" tabindex="0" aria-controls="users" rowspan="1" colspan="1" aria-label="Transaction Date: activate to sort column descending" aria-sort="ascending">
Transaction Date<i class="glyphicon glyphicon-sort"></i><i class="glyphicon glyphicon-filter"></i>
</th>
</tr>
<tr class="filters collapse" id="phys-filter-row">
<th class="select-checkbox" rowspan="1" colspan="1">
</th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="Diesel">Diesel</option>
</select>
</th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="Purchase">Purchase</option>
<option value="Sell">Sell</option>
</select>
</th>
<th rowspan="1" colspan="1"></th>
<th rowspan="1" colspan="1"></th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="CustomerA">CustomerA</option>
<option value="SupplierA">SupplierA</option>
</select>
</th>
<th rowspan="1" colspan="1">
<select class="form-control">
<option value=""></option>
<option value="2017-01-12 11:16">2017-01-12 11:16</option>
<option value="2017-01-12 11:17">2017-01-12 11:17</option>
<option value="2017-01-12 11:22">2017-01-12 11:22</option>
<option value="2017-01-12 11:27">2017-01-12 11:27</option>
<option value="2017-01-13 11:45">2017-01-13 11:45</option>
<option value="2017-01-17 09:47">2017-01-17 09:47</option>
<option value="2017-01-17 10:20">2017-01-17 10:20</option>
<option value="2017-01-17 10:21">2017-01-17 10:21</option>
<option value="2017-01-17 10:23">2017-01-17 10:23</option>
<option value="2017-01-17 10:26">2017-01-17 10:26</option>
</select>
</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr role="row" class="odd">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Purchase</td>
<td class="number">500000</td>
<td>1.3456</td>
<td>SupplierA</td>
<td class="sorting_1">2017-01-12 11:16</td>
</tr>
<tr role="row" class="even">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Sell</td>
<td class="number">245000</td>
<td>1.5112</td>
<td>CustomerA</td>
<td class="sorting_1">2017-01-12 11:17</td>
</tr>
<tr role="row" class="odd">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Sell</td>
<td class="number">140000</td>
<td>1.5345</td>
<td>CustomerA</td>
<td class="sorting_1">2017-01-12 11:22</td>
</tr>
<tr role="row" class="even">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Purchase</td>
<td class="number">90000</td>
<td>1.5113</td>
<td>SupplierA</td>
<td class="sorting_1">2017-01-12 11:27</td>
</tr>
<tr role="row" class="odd">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Sell</td>
<td class="number">500000</td>
<td>1.5879</td>
<td>CustomerA</td>
<td class="sorting_1">2017-01-13 11:45</td>
</tr>
<tr role="row" class="even">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Sell</td>
<td class="number">500000</td>
<td>1.5879</td>
<td>CustomerA</td>
<td class="sorting_1">2017-01-17 09:47</td>
</tr>
<tr role="row" class="odd">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Purchase</td>
<td class="number">500000</td>
<td>1.3456</td>
<td>SupplierA</td>
<td class="sorting_1">2017-01-17 10:20</td>
</tr>
<tr role="row" class="even">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Sell</td>
<td class="number">245000</td>
<td>1.5112</td>
<td>CustomerA</td>
<td class="sorting_1">2017-01-17 10:21</td>
</tr>
<tr role="row" class="odd">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Sell</td>
<td class="number">140000</td>
<td>1.5345</td>
<td>CustomerA</td>
<td class="sorting_1">2017-01-17 10:23</td>
</tr>
<tr role="row" class="even">
<td class=" select-checkbox"></td>
<td>Diesel</td>
<td>Purchase</td>
<td class="number">90000</td>
<td>1.5113</td>
<td>SupplierA</td>
<td class="sorting_1">2017-01-17 10:26</td>
</tr></tbody>
</table>
<div class="dataTables_info" id="users_info" role="status" aria-live="polite">Showing 1 to 10 of 10 entries</div><div class="dataTables_paginate paging_simple_numbers" id="users_paginate"><ul class="pagination"><li class="paginate_button previous disabled" id="users_previous"><a href="#" aria-controls="users" data-dt-idx="0" tabindex="0">Previous</a></li><li class="paginate_button active"><a href="#" aria-controls="users" data-dt-idx="1" tabindex="0">1</a></li><li class="paginate_button next disabled" id="users_next"><a href="#" aria-controls="users" data-dt-idx="2" tabindex="0">Next</a></li></ul></div>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="col-lg-3 sidebar-container">
<div class="sidebar">
<div class="box">
<div class="box-head">
<h3>Sample Diesel Inventory</h3>
</div>
<div class="box-content">
<div class="item">
<div class="type">diesel</div>
<div class="amount">390,00 (gal)</div>
</div>
</div>
</div>
</div>
</div>
-->
</div>
</div> <!-- /.content-body -->
</div> <!-- /#main-content -->
</div>
<!-- /#page-content-wrapper -->
</div>
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
.hamburger {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.company-name {
display: inline-block;
padding-left: 15px;
}
.company-name:hover {
cursor: pointer;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand a:hover {
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
html{
background-color:#f2f4f7
}
html body {
font-family:Montserrat,sans-serif;color:#727272
}
html body #wrapper #sidebar-wrapper {
background-color:#222d30
}
html body #wrapper #sidebar-wrapper .sidebar-nav .sidebar-brand{
padding:20px;
margin-bottom:10px;
background-color:#55a4d3;
text-transform:uppercase;
text-align:center
}
html body #wrapper #sidebar-wrapper .sidebar-nav .sidebar-brand a {
color:#fff;
font-weight:700;
font-size:16px
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel{
border-radius:0;
background-color:transparent;
margin-bottom:0;border:none
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel:last-child>a{
border-bottom:1px solid #283537
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a{
color:#fff;
position:relative;
text-transform:uppercase;
font-size:13px;
padding:16px 0 16px 53px;
border-top:1px solid #283537;
border-right:3px solid #222d30
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a.active{
border-right-color:#55a4d3
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a.collapsed{
color:#a7abac
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a.collapsed:hover{
color:#fff
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a.collapsed .arrow:before{
content:"\e258"
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a .arrow{
position:absolute;
right:0;
margin-top:20px;
font-size:11px;
margin-right:18px
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a .arrow:before{
content:"\e259"
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel ul{
list-style-type:none
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.dashboard>a{
background:url(../images/ico_dashboard_on.png) 20px 18px no-repeat
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.dashboard>a.collapsed{
background:url(../images/ico_dashboard.png) 20px 18px no-repeat
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.dashboard>a.collapsed:hover{
background-image:url(../images/ico_dashboard_on.png)
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.transactions>a{
background:url(../images/ico_transactions_on.png) 20px 16px no-repeat
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.transactions>a.collapsed{
background-image:url(../images/ico_transactions.png)
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.transactions>a.collapsed:hover{
background-image:url(../images/ico_transactions_on.png)
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.inv>a{
background:url(../images/ico_inventories_on.png) 20px 16px no-repeat
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.inv>a.collapsed{
background-image:url(../images/ico_inventories.png)
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.inv>a.collapsed:hover{
background-image:url(../images/ico_inventories_on.png)
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.hid>a{
background:url(../images/ico_transactions_on.png) 20px 16px no-repeat
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.hid>a.collapsed{
background-image:url(../images/ico_transactions.png)
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.hid>a.collapsed:hover{
background-image:url(../images/ico_transactions_on.png)
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.settings>a{
background:url(../images/ico_settings_on.png) 20px 16px no-repeat
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.settings>a.collapsed{
background-image:url(../images/ico_settings.png)
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel.settings>a.collapsed:hover{
background-image:url(../images/ico_settings_on.png)
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel ul li a{
color:#a7abac;
margin:20px 0 20px 15px
}
html body #wrapper #sidebar-wrapper .sidebar-nav .panel ul li a:hover,
html body #wrapper #sidebar-wrapper .sidebar-nav .panel ul li a.active{
color:#fff
}
html body #wrapper #page-content-wrapper{
background-color:#f2f4f7;
padding:0
}
html body #wrapper #page-content-wrapper #topbar{
background-color:#fff;padding:17px 20px;border-bottom:1px solid #eaeaea
}
html body #wrapper #page-content-wrapper #topbar a#menu-toggle{
color:#666;
font-size:25px
}
html body #wrapper #page-content-wrapper #topbar a#menu-toggle:hover,
html body #wrapper #page-content-wrapper #topbar a#menu-toggle:focus,
html body #wrapper #page-content-wrapper #topbar a#menu-toggle:active{
text-decoration:none
}
html body #wrapper #page-content-wrapper #main-content{
padding:20px 5px
}
html body #wrapper #page-content-wrapper #main-content .box-row .box:first-child{
margin-left:0
}
html body #wrapper #page-content-wrapper #main-content .box-row .box:last-child{
margin-right:0
}
html body #wrapper #page-content-wrapper #main-content .box{
background-color:#fff;
margin-top:20px;
border:1px solid #eaeaea;
border-top:3px solid #909090;
min-height:237px
}
html body #wrapper #page-content-wrapper #main-content .box .box-head{
padding:19px
}
html body #wrapper #page-content-wrapper #main-content .box .box-head .agg-data{
text-align:right
}
html body #wrapper #page-content-wrapper #main-content .box .box-head .agg-data .title{
font-size:18px;
text-transform:uppercase
}
.card-title, .card-title-number {
font-size: 18px;
font-weight: 400;
text-transform:uppercase;
}
.card-title-number {
font-weight: 800;
}
html body #wrapper #page-content-wrapper #main-content .box .box-head .agg-data .amount{
font-size:16px
}
html body #wrapper #page-content-wrapper #main-content .box .box-head .agg-data .amount strong{
font-size:25px
}
html body #wrapper #page-content-wrapper #main-content .box.inv{
border-top-color:#55a4d3
}
html body #wrapper #page-content-wrapper #main-content .box.price{
border-top-color:#e0d14f
}
html body #wrapper #page-content-wrapper #main-content .box.margin{
border-top-color:#30a076
}
html body #wrapper #page-content-wrapper #main-content .box.sales{
border-top-color:#454545
}
html body #wrapper #page-content-wrapper #main-content .main-box-container .box{
margin-top:0;
padding-top:0
}
html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-head{
border-bottom:1px solid #eaeaea;
padding:0
}
html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-head h1{
font-size:16px;
font-weight:400;
padding:17px 0 0 20px
}
html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-head .actions{
padding:5px 15px
}
html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-head .actions a{
text-transform:uppercase;
padding-left:20px;
padding-right:20px
}
html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-content .table-container{
margin:0;
padding:20px
}
html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-content .table-container table tbody tr td{
padding:10px!important
}
html body #wrapper #page-content-wrapper #main-content .sidebar-container{
margin:0
}
html body #wrapper #page-content-wrapper #main-content .sidebar{
margin:0
}
html body #wrapper #page-content-wrapper #main-content .sidebar .box-head{
padding:0
}
html body #wrapper #page-content-wrapper #main-content .sidebar h3{
font-size:15px;
padding:20px;
margin:0;
border-bottom:1px solid #eaeaea
}
html body #wrapper #page-content-wrapper #main-content .sidebar .item{
padding:10px 20px
}
html body #wrapper #page-content-wrapper #main-content .sidebar .item .type{
font-size:12px;
text-transform:uppercase;
color:#909090
}
html body #wrapper #page-content-wrapper #main-content .sidebar .item .amount{
font-size:16px
}
html body .table-container{
padding-left:20px
}
html body .table-container .table-controls{
margin-bottom:10px
}
html body .table-container .table-controls .table-actions .separator{
display:inline-block;
padding:0 7px;
border-left:1px solid #eaeaea
}
html body .table-container .table-controls .table-actions a{
display:inline-block;
margin:5px 7px
}
html body .table-container .table-controls .table-actions a.btn-maximize{
width:17px;
height:17px;
background:url(../images/ico3.png) no-repeat
}
html body .table-container .table-controls .table-actions a.btn-minimize{
width:17px;
height:17px;
background:url(../images/ico2.png) no-repeat
}
html body .table-container .table-controls .table-actions a.btn-print{
width:21px;
height:17px;
background:url(../images/ico_print.png) no-repeat
}
html body .table-container .table-controls .table-actions a.btn-edit{
width:16px;
height:17px;
background:url(../images/ico_edit.png) no-repeat
}
html body .table-container .table-controls .table-actions a.btn-delete{
width:14px;
height:18px;
background:url(../images/ico_delete.png) no-repeat
}
html body .table-container .table-controls .table-actions a.btn-popout{
width:16px;
height:16px;
background:url(../images/ico1.png) no-repeat
}
html body table:not(.table-condensed){
margin-bottom:0!important
}
html body table.is-datatable tfoot{
display:table-row-group!important
}
html body table:not(.table-condensed).dataTable td.select-checkbox:after{
width:20px!important;
height:20px!important;
margin-top:-6px!important;
margin-left:-5px!important
}
html body table:not(.table-condensed).dataTable td.select-checkbox:before{
border:1px solid #e0e0e0;
width:20px!important;
height:20px!important
}
html body table:not(.table-condensed).data-table{
margin-top:20px
}
html body table.data-table tbody{
margin-bottom:1px solid #eaeaea
}
html body table:not(.table-condensed).data-table tbody tr td{
padding:10px 20px!important
}
html body table:not(.table-condensed).data-table thead tr th,
html body table:not(.table-condensed).data-table tfoot tr th,
html body table:not(.table-condensed).data-table thead tr td,
html body table:not(.table-condensed).data-table tfoot tr td{
padding:10px 20px
}
html body table:not(.table-condensed) thead tr th{
border-bottom:none!important;
border-top:1px solid #eaeaea!important;
background-color:#f9f9f9
}
html body table:not(.table-condensed) thead tr th.number{
text-align:right
}
html body table:not(.table-condensed) tbody{
border-top-color:#fff!important
}
html body table:not(.table-condensed) tbody tr td{
padding:20px!important;
border-top:1px solid #eaeaea!important
}
}
html body table-condensed tbody tr td{
border-top:1px solid #eaeaea!important
}
html body table:not(.table-condensed) tbody tr td:last-child,
html body table:not(.table-condensed) tbody tr td.number{
text-align:right
}
html body table:not(.table-condensed) tbody tr td.row-title{
text-transform:uppercase
}
html body table:not(.table-condensed) tfoot tr td{
font-weight:700
}
html body table:not(.table-condensed) tfoot tr td.number{
text-align:right
}
html body .nav-tabs{
border-top:1px solid #eaeaea;
border-bottom:1px solid #eaeaea;
margin-top:10px
}
html body .nav-tabs li.active a{
border-bottom:3px solid #55a4d3!important;
color:#55a4d3!important
}
html body .nav-tabs li a{
border:none!important;
text-transform:uppercase;
color:#727272;
font-size:13px;
margin-left:20px
}
html body .nav-tabs li a:hover{
background-color:#fff
}
html body .modal .modal-dialog .modal-content{
background-color:#f9f9f9
}
html body .modal .modal-dialog .modal-content .modal-header{
color:#454545
}
html body .modal .modal-dialog .modal-content .modal-header .modal-title{
padding-left:10px
}
html body .modal .modal-dialog .modal-content .modal-body .form-group label{
text-transform:uppercase;
font-weight:400;
display:block;
font-size:13px
}
html body .modal .modal-dialog .modal-content .modal-body .form-group label a{
float:right;
display:inline-block;
padding-left:20px;
color:#55a4d3;
font-size:12px;
background:url(../images/ico_plus.png) 0 0 no-repeat
}
html body .tab-content{
padding:0 20px
}
html body h1{
font-size:24px;
font-weight:400;
padding:0;
margin:0
}
html body a.btn{
background-color:#fcfcfc;
border:1px solid #eaeaea;
color:#666;
padding:10px 15px
}
html body a.btn:hover{
background-color:#666;color:#fcfcfc
}
/*@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);html{background-color:#f2f4f7}html body{font-family:Montserrat,sans-serif;color:#727272}html body #wrapper #sidebar-wrapper{background-color:#222d30}html body #wrapper #sidebar-wrapper .sidebar-nav .sidebar-brand{padding:20px;margin-bottom:10px;background-color:#55a4d3;text-transform:uppercase;text-align:center}html body #wrapper #sidebar-wrapper .sidebar-nav .sidebar-brand a{color:#fff;font-weight:700;font-size:16px}html body #wrapper #sidebar-wrapper .sidebar-nav .panel{border-radius:0;background-color:transparent;margin-bottom:0;border:none}html body #wrapper #sidebar-wrapper .sidebar-nav .panel:last-child>a{border-bottom:1px solid #283537}html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a{color:#fff;position:relative;text-transform:uppercase;font-size:13px;padding:16px 0 16px 53px;border-top:1px solid #283537;border-right:3px solid #222d30}html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a.active{border-right-color:#55a4d3}html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a.collapsed{color:#a7abac}html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a.collapsed:hover{color:#fff}html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a.collapsed .arrow:before{content:"\e258"}html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a .arrow{position:absolute;right:0;margin-top:20px;font-size:11px;margin-right:18px}html body #wrapper #sidebar-wrapper .sidebar-nav .panel>a .arrow:before{content:"\e259"}html body #wrapper #sidebar-wrapper .sidebar-nav .panel ul{list-style-type:none}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.dashboard>a{background:url(../images/ico_dashboard_on.png) 20px 18px no-repeat}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.dashboard>a.collapsed{background:url(../images/ico_dashboard.png) 20px 18px no-repeat}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.dashboard>a.collapsed:hover{background-image:url(../images/ico_dashboard_on.png)}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.transactions>a{background:url(../images/ico_transactions_on.png) 20px 16px no-repeat}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.transactions>a.collapsed{background-image:url(../images/ico_transactions.png)}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.transactions>a.collapsed:hover{background-image:url(../images/ico_transactions_on.png)}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.inv>a{background:url(../images/ico_inventories_on.png) 20px 16px no-repeat}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.inv>a.collapsed{background-image:url(../images/ico_inventories.png)}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.inv>a.collapsed:hover{background-image:url(../images/ico_inventories_on.png)}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.hid>a{background:url(../images/ico_transactions_on.png) 20px 16px no-repeat}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.hid>a.collapsed{background-image:url(../images/ico_transactions.png)}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.hid>a.collapsed:hover{background-image:url(../images/ico_transactions_on.png)}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.settings>a{background:url(../images/ico_settings_on.png) 20px 16px no-repeat}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.settings>a.collapsed{background-image:url(../images/ico_settings.png)}html body #wrapper #sidebar-wrapper .sidebar-nav .panel.settings>a.collapsed:hover{background-image:url(../images/ico_settings_on.png)}html body #wrapper #sidebar-wrapper .sidebar-nav .panel ul li a{color:#a7abac;margin:20px 0 20px 15px}html body #wrapper #sidebar-wrapper .sidebar-nav .panel ul li a:hover,html body #wrapper #sidebar-wrapper .sidebar-nav .panel ul li a.active{color:#fff}html body #wrapper #page-content-wrapper{background-color:#f2f4f7;padding:0}html body #wrapper #page-content-wrapper #topbar{background-color:#fff;padding:17px 20px;border-bottom:1px solid #eaeaea}html body #wrapper #page-content-wrapper #topbar a#menu-toggle{color:#666;font-size:25px}html body #wrapper #page-content-wrapper #topbar a#menu-toggle:hover,html body #wrapper #page-content-wrapper #topbar a#menu-toggle:focus,html body #wrapper #page-content-wrapper #topbar a#menu-toggle:active{text-decoration:none}html body #wrapper #page-content-wrapper #main-content{padding:20px 5px}html body #wrapper #page-content-wrapper #main-content .box-row .box:first-child{margin-left:0}html body #wrapper #page-content-wrapper #main-content .box-row .box:last-child{margin-right:0}html body #wrapper #page-content-wrapper #main-content .box{background-color:#fff;margin-top:20px;border:1px solid #eaeaea;border-top:3px solid #909090;min-height:237px}html body #wrapper #page-content-wrapper #main-content .box .box-head{padding:19px}html body #wrapper #page-content-wrapper #main-content .box .box-head .agg-data{text-align:right}html body #wrapper #page-content-wrapper #main-content .box .box-head .agg-data .title{font-size:13px;text-transform:uppercase}html body #wrapper #page-content-wrapper #main-content .box .box-head .agg-data .amount{font-size:16px}html body #wrapper #page-content-wrapper #main-content .box .box-head .agg-data .amount strong{font-size:25px}html body #wrapper #page-content-wrapper #main-content .box.inv{border-top-color:#55a4d3}html body #wrapper #page-content-wrapper #main-content .box.price{border-top-color:#e0d14f}html body #wrapper #page-content-wrapper #main-content .box.margin{border-top-color:#30a076}html body #wrapper #page-content-wrapper #main-content .box.sales{border-top-color:#454545}html body #wrapper #page-content-wrapper #main-content .main-box-container .box{margin-top:0;padding-top:0}html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-head{border-bottom:1px solid #eaeaea;padding:0}html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-head h1{font-size:16px;font-weight:400;padding:17px 0 0 20px}html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-head .actions{padding:5px 15px}html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-head .actions a{text-transform:uppercase;padding-left:20px;padding-right:20px}html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-content .table-container{margin:0;padding:20px}html body #wrapper #page-content-wrapper #main-content .main-box-container .box .box-content .table-container table tbody tr td{padding:10px!important}html body #wrapper #page-content-wrapper #main-content .sidebar-container{margin:0}html body #wrapper #page-content-wrapper #main-content .sidebar{margin:0}html body #wrapper #page-content-wrapper #main-content .sidebar .box-head{padding:0}html body #wrapper #page-content-wrapper #main-content .sidebar h3{font-size:15px;padding:20px;margin:0;border-bottom:1px solid #eaeaea}html body #wrapper #page-content-wrapper #main-content .sidebar .item{padding:10px 20px}html body #wrapper #page-content-wrapper #main-content .sidebar .item .type{font-size:12px;text-transform:uppercase;color:#909090}html body #wrapper #page-content-wrapper #main-content .sidebar .item .amount{font-size:16px}html body .table-container{padding-left:20px}html body .table-container .table-controls{margin-bottom:10px}html body .table-container .table-controls .table-actions .separator{display:inline-block;padding:0 7px;border-left:1px solid #eaeaea}html body .table-container .table-controls .table-actions a{display:inline-block;margin:5px 7px}html body .table-container .table-controls .table-actions a.btn-maximize{width:17px;height:17px;background:url(../images/ico3.png) no-repeat}html body .table-container .table-controls .table-actions a.btn-minimize{width:17px;height:17px;background:url(../images/ico2.png) no-repeat}html body .table-container .table-controls .table-actions a.btn-print{width:21px;height:17px;background:url(../images/ico_print.png) no-repeat}html body .table-container .table-controls .table-actions a.btn-edit{width:16px;height:17px;background:url(../images/ico_edit.png) no-repeat}html body .table-container .table-controls .table-actions a.btn-delete{width:14px;height:18px;background:url(../images/ico_delete.png) no-repeat}html body .table-container .table-controls .table-actions a.btn-popout{width:16px;height:16px;background:url(../images/ico1.png) no-repeat}html body table:not(.table-condensed){margin-bottom:0!important}html body table:not(.table-condensed).is-datatable tfoot{display:table-row-group!important}html body table:not(.table-condensed).dataTable td.select-checkbox:after{width:20px!important;height:20px!important;margin-top:-6px!important;margin-left:-5px!important}html body table:not(.table-condensed).dataTable td.select-checkbox:before{border:1px solid #e0e0e0;width:20px!important;height:20px!important}html body table:not(.table-condensed).data-table{margin-top:20px}html body table:not(.table-condensed).data-table tbody{margin-bottom:1px solid #eaeaea}html body table:not(.table-condensed).data-table tbody tr td{padding:10px 20px!important}html body table:not(.table-condensed).data-table thead tr th,html body table:not(.table-condensed).data-table tfoot tr th,html body table:not(.table-condensed).data-table thead tr td,html body table:not(.table-condensed).data-table tfoot tr td{padding:10px 20px}html body table:not(.table-condensed) thead tr th{border-bottom:none!important;border-top:1px solid #eaeaea!important;background-color:#f9f9f9}html body table:not(.table-condensed) thead tr th.number{text-align:right}html body table:not(.table-condensed) tbody{border-top-color:#fff!important}html body table:not(.table-condensed) tbody tr td{padding:20px!important;border-top:1px solid #eaeaea!important}html body table:not(.table-condensed) tbody tr td:last-child,html body table:not(.table-condensed) tbody tr td.number{text-align:right}html body table:not(.table-condensed) tbody tr td.row-title{text-transform:uppercase}html body table:not(.table-condensed) tfoot tr td{font-weight:700}html body table:not(.table-condensed) tfoot tr td.number{text-align:right}html body .nav-tabs{border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea;margin-top:10px}html body .nav-tabs li.active a{border-bottom:3px solid #55a4d3!important;color:#55a4d3!important}html body .nav-tabs li a{border:none!important;text-transform:uppercase;color:#727272;font-size:13px;margin-left:20px}html body .nav-tabs li a:hover{background-color:#fff}html body .modal .modal-dialog .modal-content{background-color:#f9f9f9}html body .modal .modal-dialog .modal-content .modal-header{color:#454545}html body .modal .modal-dialog .modal-content .modal-header .modal-title{padding-left:10px}html body .modal .modal-dialog .modal-content .modal-body .form-group label{text-transform:uppercase;font-weight:400;display:block;font-size:13px}html body .modal .modal-dialog .modal-content .modal-body .form-group label a{float:right;display:inline-block;padding-left:20px;color:#55a4d3;font-size:12px;background:url(../images/ico_plus.png) 0 0 no-repeat}html body .tab-content{padding:0 20px}html body h1{font-size:24px;font-weight:400;padding:0;margin:0}html body a.btn{background-color:#fcfcfc;border:1px solid #eaeaea;color:#666;padding:10px 15px}html body a.btn:hover{background-color:#666;color:#fcfcfc}
*/
[hidden] { display: none; }
div.awesomplete {
display: inline-block;
position: relative;
}
div.awesomplete > input {
display: block;
}
div.awesomplete > ul {
position: absolute;
left: 0;
z-index: 999;
min-width: 100%;
box-sizing: border-box;
list-style: none;
padding: 0;
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0,0%,100%,.9);
background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
border: 1px solid rgba(0,0,0,.3);
box-shadow: .05em .2em .6em rgba(0,0,0,.2);
text-shadow: none;
}
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
display: none;
}
@supports (transform: scale(0)) {
div.awesomplete > ul {
transition: .3s cubic-bezier(.4,.2,.5,1.4);
transform-origin: 1.43em -.43em;
}
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
div.awesomplete > ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0; height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div.awesomplete > ul > li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
div.awesomplete > ul > li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
div.awesomplete > ul > li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
div.awesomplete mark {
background: hsl(65, 100%, 50%);
}
div.awesomplete li:hover mark {
background: hsl(68, 101%, 41%);
}
div.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 102%, 21%);
color: inherit;
}
.dropdown {
background:#fff;
/*border:1px solid #ccc;*/
/*border-radius:4px;*/
width:300px;
}
.dropdown-menu>li>a {
color:#428bca;
}
.dropdown ul.dropdown-menu {
border-radius:4px;
box-shadow:none;
margin-top:20px;
width:300px;
}
.dropdown ul.dropdown-menu:before {
content: "";
border-bottom: 10px solid #fff;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: -10px;
right: 16px;
z-index: 10;
}
.dropdown ul.dropdown-menu:after {
content: "";
border-bottom: 12px solid #ccc;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
position: absolute;
top: -12px;
right: 14px;
z-index: 9;
}
.box-head > .icon > i {
font-size: 20px;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background: #e1e1e1;
}
.card {
float: left;
background: #fff;
padding: 20px;
margin: 0 20px 0 0;
}
.donut-chart {
position: relative;
border-radius: 50%;
overflow: hidden;
}
.donut-chart .slice {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.donut-chart .chart-center {
position: absolute;
border-radius: 50%;
}
.donut-chart .chart-center span {
display: block;
text-align: center;
}
.donut-chart.chart3 {
width: 120px;
height: 120px;
background: #353535;
}
.donut-chart.chart3 .slice.one {
clip: rect(0 120px 60px 0);
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
background: #e1e1e1;
}
.donut-chart.chart3 .slice.two {
clip: rect(0 60px 120px 0);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
background: #e1e1e1;
}
.donut-chart.chart3 .chart-center {
top: 5px;
left: 5px;
width: 110px;
height: 110px;
background: #fff;
}
.donut-chart.chart3 .chart-center span {
font-size: 40px;
line-height: 110px;
color: #353535;
}
.donut-chart.chart3 .chart-center span:after {
content: "15%";
}
/* **************************** */
.chart {
display: table;
table-layout: fixed;
width: 30%;
max-width: 300px;
height: 60px;
margin: 0 auto;
padding-left: 5px;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
background-size: 100% 50px;
background-position: left top;
}
.chart li {
position: relative;
display: table-cell;
vertical-align: bottom;
height: 60px;
}
.chart span {
margin: 0 0.5em;
font-size: 60%;
display: block;
/* background: rgba(209, 236, 250, 0.75); */
animation: draw 1s ease-in-out;
}
.chart span:before {
position: absolute;
left: 0;
right: 0;
top: 100%;
padding: 5px 0.5em 0;
display: block;
text-align: center;
content: attr(title);
word-wrap: break-word;
}
.physical {
background: rgba(9, 114, 74, 0.75);
}
.hedge {
background: rgba(220, 143, 28, 0.90);
}
@keyframes draw {
0% {
height: 0;
}
}
table:not(.table-condensed).dataTable td.select-checkbox:before {
border: 1px solid #e0e0e0;
width: 20px!important;
height: 20px!important;
}
table.dataTable td.select-checkbox:before {
content: ' ';
margin-top: -6px;
margin-left: -6px;
border: 1px solid black;
border-radius: 3px;
}
table.dataTable td.select-checkbox:before, table.dataTable td.select-checkbox:after {
display: block;
position: absolute;
top: 1.2em;
left: 50%;
width: 12px;
height: 12px;
box-sizing: border-box;
}
.item-heading {
text-transform: uppercase;
}
.item-row {
padding-bottom: 8px;
font-size: larger;
}
.menu-icon {
padding-right: 8px;
}
.box-row {
padding-top: 20px;
}
th > i {
color: silver;
float: right;
}
html body #wrapper #page-content-wrapper #main-content .box-card {
background-color: #fff;
margin-top: 20px;
border: 1px solid #eaeaea;
border-top: 3px solid #909090;
}
.card-title {
padding: 4%;
}
.card-title-number {
padding: 4%;
}
.box-head {
display: flex;
justify-content: space-between;
}
.tr-condensed {
padding: 4%;
}
/* horizontal bar charts */
.chart-container {
background: white;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 9%;
width: 80%;
height: 50px;
}
.bar-row {
display: flex;
flex-direction: row;
justify-content: flex-start;
font-size: 9px;
}
.bar-label {
display: flex;
width: 15%;
font-size: 10px;
justify-content: flex-end;
padding-right: 1%;
border-right: 1px solid black;
}
.bar {
color: white;
font-weight: 400;
float: right;
padding-top: 1px;
width: 85%;
}
.physical {
background: rgba(9, 114, 74, 0.75);
}
.hedge {
background: rgba(220, 143, 28, 0.90);
}
