<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 arrow"></span></a> <ul id="dashboard-link" class="collapse"> <li><a href="#" class="active">SubTest1</a></li> <li><a href="#">SubTest1</a></li> <li><a href="#">SubTest1</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 arrow"></span></a> <ul id="transactions-link" class="collapse"> <li><a href="#">SubTest2</a></li> <li><a href="#">SubTest2</a></li> </ul> </li> <li class="panel inv"> <a data-toggle="collapse" class="collapsed" data-parent="#menu-accordion" href="#inv-link">Inventories <span class="glyphicon arrow"></span></a> <ul id="inv-link" class="collapse"> <li><a href="#">SubTest2</a></li> <li><a href="#">SubTest2</a></li> <li><a href="#">SubTest2</a></li> <li><a href="#">SubTest2</a></li> </ul> </li> <li class="panel settings"> <a data-toggle="collapse" class="active" data-parent="#menu-accordion" href="#settings-link">Settings <span class="glyphicon arrow"></span></a> <ul id="settings-link" class="collapse active"> <li><a href="#">User Profile</a></li> <li class="active"><a href="#">Company Settings</a></li> <li><a href="#">Account Settings</a></li> <li><a href="#">Billing Info</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="content-body"> <div class="col-lg-12 main-box-container"> <div class="box"> <div class="box-head clearfix"> <h1 class="pull-left">M2M Account</h1> <div class="actions pull-right"> <a href="javascript:;" class="btn btn-add" data-toggle="modal" data-target="#add-user" title="Add User"> <i class="glyphicon glyphicon-user" aria-hidden="true"></i> Add User</a> <a href="javascript:;" class="btn btn-add" data-toggle="modal" data-target="#add-fuel-type" title="Fuel Type"> <i class="fa fa-plus" aria-hidden="true"></i>Create Product</a> <a href="javascript:;" class="btn btn-add" data-toggle="modal" data-target="#add-inventory" title="Create Inventory"> <i class="fa fa-plus" aria-hidden="true"></i>Create Inventory</a> <a href="javascript:;" class="btn btn-add" data-toggle="modal" data-target="#add-hedge-account" title="Create Hedge Account"> <i class="fa fa-plus" aria-hidden="true"></i>Create Hedge Account</a> <a href="javascript:;" class="btn btn-add" data-toggle="modal" data-target="#add-hedge-account" title="Create Counterparty"> <i class="fa fa-plus" aria-hidden="true"></i>Create Counter-Party</a> </div> </div> <!-- <div> <select class="form-control selectpicker" style="width:255px; display:inline-block;"> <option>No Filter</option> <option>Company</option> <option>User Name</option> <option>Email</option> </select> </div> --> <div class="box-content"> <div class="table-container"> <table id="edit_account" class="table is-datatable dataTable"> <thead> <tr> <th>Column name</th> <th>Content</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Id</td> <td><a>30</a></td> <td></td><td> </td></tr> <tr> <td>Create Date</td> <td>Dec. 13, 2016, 2:18 p.m.</td> <td></td> </tr> <tr> <td>Name</td> <td><input type="text" value="Oilman, Inc" class="form-control"></td> <td></td> </tr> <tr> <td>Address</td> <td><input type="text" value="Portland" class="form-control"></td> <td></td> </tr> <tr> <td>Email</td> <td><input type="text" value="gumatt@gmail.com" class="form-control"></td> <td></td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button id="update_account" type="submit" class="btn btn-primary" onclick="update_account()">Save</button> </div> </div> <div class="box-head clearfix"> <h1 class="pull-left">Account Users</h1> </div> <div class="box-content"> <div class="table-container"> <!-- <div class="table-controls clearfix"> <div class="table-actions pull-right"> <div class="separator"> <a title="Print selected rows" class="btn-print" href="javascript:;"></a> <a class="btn-edit" href="javascript:;"></a> <a id="delete_inventory" title="Delete selected rows" class="btn-delete" data-target="#remove_user" href="javascript:;"></a> </div> </div> <div class=" input-group table-search col-lg-4 pull-right"> <span class="input-group-addon"><i class="fa fa-search" aria-hidden="true"></i></span> <input type="search" placeholder="Search" class="form-control"> </div> </div> --> <table id="users" class="table is-datatable"> <thead> <tr> <th class="select-checkbox no-filter"></th> <th class="no-filter">Username</th> <th>Full Name</th> <th>Email Address</th> <th>Account Owner</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td class="select-checkbox no-filter"></td> <td class="no-filter">oilman</td> <td>Bob Smith</td> <td>bob@brownrice.com</td> <td style="text-align: left"><i class="glyphicon glyphicon-ok"></i></td> <td></td> </tr> <tr> <td class="select-checkbox no-filter"></td> <td class="no-filter">admin-brownrice</td> <td>Susie Smith</td> <td>susie@brownrice.com</td> <td></td> <td style="text-align: left"><span href="#" class="btn btn-xs btn-danger">Remove</span></td> </tr> <tr> <td class="select-checkbox no-filter"></td> <td class="no-filter"></td> <td>John Jackson</td> <td>john@brownrice.com</td> <td></td> <td style="text-align: left"><span href="#" class="btn btn-xs btn-danger">Remove</span></td> </tr> </tbody> </table> </div> </div> <div class="box-head clearfix"> <h1 class="pull-left">Inventories</h1> </div> <div class="box-content"> <div class="table-container"> <!-- <div class="table-controls clearfix"> <div class="table-actions pull-right"> <div class="separator"> <a title="Print selected rows" class="btn-print" href="javascript:;"></a> <a class="btn-edit" href="javascript:;"></a> <a id="delete_inventory" title="Delete selected rows" class="btn-delete" data-target="#remove_user" href="javascript:;"></a> </div> </div> <div class=" input-group table-search col-lg-4 pull-right"> <span class="input-group-addon"><i class="fa fa-search" aria-hidden="true"></i></span> <input type="search" placeholder="Search" class="form-control"> </div> </div> --> <table id="inventories" class="table is-datatable"> <thead> <tr> <th class="select-checkbox no-filter"></th> <th class="no-filter">Inventory Name</th> <th>Fuel Type</th> <th>Location</th> <th>Identifier Number</th> <th>Volume</th> <th>Create Date</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <div class="box-head clearfix"> <h1 class="pull-left">Hedge Accounts</h1> </div> <div class="box-content"> <div class="table-container"> <table id="hedge_accounts" class="table is-datatable"> <thead> <tr> <th class="select-checkbox no-filter"></th> <th>Hedge Name</th> <th>Institution</th> <th>Account Number</th> <th>Create Date</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <div class="box-head clearfix"> <h1 class="pull-left">Products</h1> </div> <div class="box-content"> <div class="table-container"> <table id="products" class="table is-datatable"> <thead> <tr> <th class="select-checkbox no-filter"></th> <th>Product Name</th> <th>Desctiption</th> <th>Fuel Class</th> <th>Create Date</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <div class="box-head clearfix"> <h1 class="pull-left">Counter Parties</h1> </div> <div class="box-content"> <div class="table-container"> <table id="products" class="table is-datatable"> <thead> <tr> <th class="select-checkbox no-filter"></th> <th>ID</th> <th>Name</th> <th>Type</th> <th>Address</th> <th>Identifier</th> <th>Create Date</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> <!-- modals --> <div id="add-user" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <form id="invite_user_info" action=""> <input type="hidden" name="csrfmiddlewaretoken" value="EWOIvVzzLzQnlowipCXQAQ49b9rS4aNE"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Invite User</h4> </div> <div class="modal-body clearfix"> <div class="col-lg-12"> <div class="form-group"> <label for="name">Full Name</label> <input type="text" name="name" class="form-control"> </div> <div class="form-group"> <label for="email">email address </label> <input type="text" name="email" class="form-control"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" onclick="invite_user('User')">Save</button> </div> </form> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div id="add-fuel-type" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <form id="product_type_info" action=""> <input type="hidden" name="csrfmiddlewaretoken" value="EWOIvVzzLzQnlowipCXQAQ49b9rS4aNE"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Set Fuel Type</h4> </div> <div class="modal-body clearfix"> <div class="col-lg-12"> <div class="form-group"> <label>please input comma separated values:</label> <div class="bootstrap-tagsinput"><input type="text" placeholder=""></div><input type="text" id="fuel_type" value="" name="fuel_type" class="form-control" data-role="tagsinput" style="display: none;"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" onclick="add_fuel_type()">Save</button> </div> </form> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div id="add-inventory" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <form id="inven_hedge_info" action=""> <input type="hidden" name="csrfmiddlewaretoken" value="EWOIvVzzLzQnlowipCXQAQ49b9rS4aNE"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Add Inventory</h4> </div> <div class="modal-body clearfix"> <div class="col-lg-12"> <div class="form-group"> <label for="">name</label> <input type="text" name="name" class="form-control"> </div> <div class="form-group"> <label for="">fuel type </label> <select name="fuel_type" class="form-control"> </select> </div> <div class="form-group"> <label for="">location</label> <input type="text" name="location" class="form-control"> </div> <div class="form-group"> <label for="">Identifier Number</label> <input type="text" name="id_number" class="form-control"> </div> <div class="form-group"> <label for="">volume</label> <input type="text" name="volume" class="form-control"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" onclick="add_inventory('Inventory')">Save</button> </div> </form> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div id="add-hedge-account" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <form id="inven_hedge_info2" action=""> <input type="hidden" name="csrfmiddlewaretoken" value="EWOIvVzzLzQnlowipCXQAQ49b9rS4aNE"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Add Hedge Account</h4> </div> <div class="modal-body clearfix"> <div class="col-lg-12"> <div class="form-group"> <label for="">name</label> <input type="text" name="name" class="form-control"> </div> <div class="form-group"> <label for="">institution </label> <input type="text" name="institution" class="form-control"> </div> <div class="form-group"> <label for="">account number </label> <input type="text" name="id_number" class="form-control"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" onclick="add_inventory('HedgeAccount')">Save</button> </div> </form> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div id="variables" style="display:none"> <span id="current_account_id">30</span> </div> <!-- <div id="remove_user" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="bootbox-body">Are you sure you want to delete the items? </div> </div> </div> </div> --> </div> </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; } li .active { color: white; font-weight: 400; border-right-color: #55a4d3; } .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: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} @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; }