"HedgeMark Program Page v2"
Bootstrap 3.3.0 Snippet by gumatt

<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); }

Related: See More


Questions / Comments: