Skip to content

Instantly share code, notes, and snippets.

@CarlBoneri

CarlBoneri/index.html

Created July 1, 2016 23:52
Show Gist options
  • Save CarlBoneri/3ec20527a254f59d705e2cd7fd211b17 to your computer and use it in GitHub Desktop.
Save CarlBoneri/3ec20527a254f59d705e2cd7fd211b17 to your computer and use it in GitHub Desktop.
Download ZIP
why_embed_dt_modal
Raw
index.html
<div class="body skin-black">
<div class="container-fluid" style="overflow:hidden;">
<nav class="menu" style="z-index:10">
<input href="#" type="checkbox" class="menu-open" style="z-index:15" name="menu-open" id="menu-open" />
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item" id="google_one"><i class="fa fa-line-chart fa-lg" style="color:#ff0000;"></i></a>
<a href="#" class="menu-item" id="google_two"><i class="fa fa-plus fa-lg" style="color:#EA2E49"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-comment-o fa-lg" style="color:#1BBC9B;padding-top:-5px;"></i></a>
<a href="#" class="menu-item"> <i class="fa fa-envelope-o fa-lg" style="color:#4688d7"></i></a>
</nav>
<div class="row" style="padding-top:150px;">
<div class="col-sm-6">
<div class="draggable">
<div class="panel" id="divy" style="z-index:6">
<div class="panel-heading">
<h3 class="panel-title pull-left">Notes</h3>
<div class="btn-group pull-right">
<a class="btn btn-primary" href="/contacts/VBMJHwcLX3Vx/notes/add" data-toggle="modal" data-target="#editModal">
<i class="fa fa-plus"></i>
<span>Add</span>
</a>
</div>
</div>
<div class="list-group">
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/ucw9gtbjq7ls">
<i class="fa fa-2x pull-left fa-check-square-o"></i>
<h4 class="list-group-item-heading">Send tracking Number</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:27</p>
</a>
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/1rhen4xigta0w">
<i class="fa fa-2x pull-left fa-file-text-o"></i>
<h4 class="list-group-item-heading">Improved Load Time</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:26</p>
</a>
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/1rhen4xigta0z">
<i class="fa fa-2x pull-left fa-paperclip"></i>
<h4 class="list-group-item-heading">Stingray.pdf</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:26</p>
</a>
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/uywr1g2fnvuo">
<i class="fa fa-2x pull-left fa-picture-o"></i>
<h4 class="list-group-item-heading">Product image</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:26</p>
</a>
</div>
<div class="panel-footer">
<small class="pull-left">Built with Bootcards - List</small>
<a class="btn btn-link btn-xs pull-right" href="/snippets/list-card" data-toggle="modal" data-target="#docsModal">
View Source</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="draggable">
<div class="panel" id="divy_too">
<div class="panel-heading">
<h3 class="panel-title pull-left">Notes</h3>
<div class="btn-group pull-right">
<a class="btn btn-primary" href="/contacts/VBMJHwcLX3Vx/notes/add" data-toggle="modal" data-target="#editModal">
<i class="fa fa-plus"></i>
<span>Add</span>
</a>
</div>
</div>
<div class="list-group">
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/ucw9gtbjq7ls">
<i class="fa fa-2x pull-left fa-check-square-o"></i>
<h4 class="list-group-item-heading">Send tracking Number</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:27</p>
</a>
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/1rhen4xigta0w">
<i class="fa fa-2x pull-left fa-file-text-o"></i>
<h4 class="list-group-item-heading">Improved Load Time</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:26</p>
</a>
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/1rhen4xigta0z">
<i class="fa fa-2x pull-left fa-paperclip"></i>
<h4 class="list-group-item-heading">Stingray.pdf</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:26</p>
</a>
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/uywr1g2fnvuo">
<i class="fa fa-2x pull-left fa-picture-o"></i>
<h4 class="list-group-item-heading">Product image</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:26</p>
</a>
</div>
<div class="panel-footer">
<small class="pull-left">Built with Bootcards - List</small>
<a class="btn btn-link btn-xs pull-right" href="/snippets/list-card" data-toggle="modal" data-target="#docsModal">
View Source</a>
</div>
</div>
</div>
</div>
<!-- filters -->
</div>
<div class="row">
<img src="http://www.fas-advisory.biz/wp-content/uploads/2015/08/Logo4-e1440391065179.png" class="home-img img-responsive" />
</div>
<div class="row" style="text-align:center;padding-left:25%;padding-right:25%;">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-users fa-fw"></i>
</span>
<input id="user_name" class="form-control shiny-input-container" placeholder="username" type="text" />
</div>
</div>
<div class="row" style="text-align:center;padding-left:25%;padding-right:25%;">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-key fa-fw"></i>
</span>
<input id="pw_in" class="form-control shiny-input-container" placeholder="password" type="password" />
<span class="input-group-btn">
<button class="btn btn-primary action-button" type="button" id="pw_action">
<i class="fa fa-sign-in"></i>
</button>
</span>
</div>
<div class="row" style="text-align:center;padding-left:25%;padding-right:25%;">
<a class="action-button pull-right" href="#" id="setup_newusers">
<small class="whyles-pink" style=""><i class="fa fa-users"></i> New Users</small>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="shiny-html-output shiny-bound-output">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-line-chart fa-fw facebook"></i>
</span>
<input id="this_id_text" class="form-control shiny-input-container shiny-bound-input" placeholder="hellommmm" type="password"/>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<!----widgets embed with charts-------->
<!----main box--->
<!---Card header panel--->
<div class="row bootcards-cards">
<!--buttons--->
<div class="row">
<a class="btn btn-instagram" href="#">
<i class="fa fa-instagram fa-lg fa-fw"></i>
<span class="btn-text">Instagram</span>
</a>
<a class="btn btn-facebook" href="#">
<i class="fa fa-facebook fa-fw fa-lg"></i>
<span class="btn-text">Facebook</span>
</a>
<a class="btn btn-twitter" href="#">
<i class="fa fa-twitter fa-fw fa-lg"></i>
<span class="btn-text">Twitter</span>
</a>
<a class="btn btn-googlePlus" href="#">
<i class="fa fa-google-plus fa-fw fa-lg"></i>
<span class="btn-text">Google Plus</span>
</a>
<a class="btn btn-googleAnalytics" href="#">
<i class="fa fa-line-chart fa-fw fa-lg"></i>
<span class="btn-text">Google Analaytics</span>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-search fa-fw fa-lg"></i>
<span class="btn-text">Default</span>
</a>
<a class="btn btn-primary" href="#">
<i class="fa fa-search fa-fw fa-lg"></i>
<span class="btn-text">Primary</span>
</a>
</div>
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group" role="group">
<button class="btn btn-whyles-pink">
<i class="fa fa-bar-chart fa-fw fa-lg"></i>
<span class="btn-text">whyles-pink</span>
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-whyles-yellow" href="#">
<i class="fa fa-file-code-o fa-fw fa-lg"></i>
<span class="btn-text">whyles-yellow</span>
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-whyles-blue" href="#">
<i class="fa fa-file-pdf-o fa-fw fa-lg"></i>
<span class="btn-text">whyles-blue</span>
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-whyles-green" href="#">
<i class="fa fa-file-pdf-o fa-fw fa-lg"></i>
<span class="btn-text">whyles-green</span>
</button>
</div>
</div>
</div>
</div>
<div class="row bootcards-cards draggable">
<div class="col-sm-5">
<small class="do-rotate" style="margin-bottom:25px;">LEFT</small>
<div class="panel draggable">
<div class="panel-heading">
<p class="panel-title pull-left">Notes</p>
<div class="btn-group pull-right">
<a class="btn btn-primary" href="#" data-toggle="modal" data-target="#dtModal">
<i class="fa fa-plus"></i>
<span>Add</span>
</a>
</div>
</div>
<div class="list-group">
<a class="list-group-item" href="/notes/id">
<i class="fa fa-phone fa-2x pull-left"></i>
<h4 class="list-group-item-heading">Subject</h4>
<p class="list-group-item-text">Date</p>
</a>
<a class="list-group-item" href="/notes/id">
<img src="https://scontent-atl3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10368257_10205110776266817_7994776168540927627_n.jpg?oh=5ec336681838d7b53b3d45d8a3da09e3&oe=56865072" class="img-circle pull-left" style="margin-right:10px;">
<h4 class="list-group-item-heading">Subject</h4>
<p class="list-group-item-text">Date</p>
</a>
...
</div>
<div class="panel-footer">
<small class="pull-left">List Card Footer</small>
</div>
</div>
</div>
<div class="col-sm-7">
<h3>controls</h3>
<div class="panel">
<div class="panel-heading">
<p class="panel-title pull-left">Controlers</p>
<div class="btn-group pull-right">
<a class="btn btn-primary" href="#" data-toggle="modal" data-target="#dtModal">
<i class="fa fa-plus"></i>
<span>Add</span>
</a>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user fa-fw"></i>
</span>
<input id="user_name" class="form-control shiny-bound-input" placeholder="username" type="text" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-key fa-fw"></i>
</span>
<input id="pw_in" class="form-control shiny-bound-input" placeholder="password" type="password" />
<span class="input-group-btn">
<button class="btn btn-primary action-button shiny-bound-input" type="button" id="pw_action">
<i class="fa fa-sign-in"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-sm-9 col-sm-offset-2">
<div id="daterange" data-provide="datepicker" class="shiny-date-range-input form-group shiny-input-container">
<label class="control-label" for="daterange">Date range:</label>
<div class="input-daterange input-group">
<input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="mm/dd/yy" data-date-start-view="month" data-min-date="2001-01-01" data-max-date="2012-12-21" data-initial-date="2001-01-01" />
<span class="input-group-addon"> - </span>
<input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="mm/dd/yy" data-date-start-view="month" data-min-date="2001-01-01" data-max-date="2012-12-21" data-initial-date="2010-12-31" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9 col-sm-offset-2">
<div id="daterange" class="shiny-date-range-input form-group shiny-input-container">
<label class="control-label" for="daterange">Date range:</label>
<div class="input-daterange input-group">
<input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="mm/dd/yy" data-date-start-view="month" data-min-date="2001-01-01" data-max-date="2012-12-21" data-initial-date="2001-01-01" />
<span class="input-group-addon"> - </span>
<input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="mm/dd/yy" data-date-start-view="month" data-min-date="2001-01-01" data-max-date="2012-12-21" data-initial-date="2010-12-31" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9 col-sm-offset-2">
<div id="daterange" class="shiny-date-range-input form-group shiny-input-container">
<label class="control-label" for="daterange">Date range:</label>
<div class="input-daterange input-group">
<input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="mm/dd/yy" data-date-start-view="month" data-min-date="2001-01-01" data-max-date="2012-12-21" data-initial-date="2001-01-01" />
<span class="input-group-addon"> - </span>
<input class="input-sm form-control" type="text" data-date-language="en" data-date-weekstart="0" data-date-format="mm/dd/yy" data-date-start-view="month" data-min-date="2001-01-01" data-max-date="2012-12-21" data-initial-date="2010-12-31" />
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<small class="pull-left">List Card Footer</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="bootcards-list" id="list" data-title="Contacts">
<div class="panel panel-default">
<div class="panel-body">
<div class="search-form">
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search fa-fw"></i>
</span>
<input id="pw_in" class="form-control shiny-input-container" placeholder="Search" type="text" />
<span class="input-group-btn">
<button class="btn btn-input-default action-button" type="button" id="pw_action" href="/contacts/add" data-toggle="modal" data-target="#editModal"><i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="list-group">
<a class="list-group-item active" href="/contacts/VBMJHwcLX3Vx">
<img src="https://scontent-atl3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10368257_10205110776266817_7994776168540927627_n.jpg?oh=5ec336681838d7b53b3d45d8a3da09e3&oe=56865072" class="img-circle pull-left">
<h4 class="list-group-item-heading">Acey, Sofia</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item" href="/contacts/sH5PxrdzkZ3T">
<img src="http://www.asdl.gatech.edu/Generic_profile_M.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Barish, Joseph</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item" href="/contacts/s9RSWs87B4qv">
<img src="/images/Jerry Bess.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Bess, Jerry</h4>
<p class="list-group-item-text">ZetaComm</p>
</a>
<a class="list-group-item" href="/contacts/eNK2QXWJa8E3">
<img src="/images/Jamie Biddy.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Biddy, Jamie</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item" href="/contacts/kNQv7Urv7AzX">
<img src="/images/Mark Booth.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Booth, Mark</h4>
<p class="list-group-item-text">Burning Core</p>
</a>
<a class="list-group-item" href="/contacts/HZTBeGFQCzPs">
<img src="/images/Sharon Burns.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Burns, Sharon</h4>
<p class="list-group-item-text">Derenden Systems</p>
</a>
<a class="list-group-item" href="/contacts/3D6vqH8yZrD4">
<img src="/images/Terri Donner.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Donner, Terri</h4>
<p class="list-group-item-text">Elparvis</p>
</a>
<a class="list-group-item" href="/contacts/rvQv8GcxZFaN">
<img src="/images/Josephine Driscoll.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Driscoll, Josephine</h4>
<p class="list-group-item-text">Enmaris Mobile</p>
</a>
<a class="list-group-item" href="/contacts/K4NWfXGSPPWk">
<img src="/images/Evelyn Dwyer.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Dwyer, Evelyn</h4>
<p class="list-group-item-text">Entekra Inc.</p>
</a>
<a class="list-group-item" href="/contacts/FpTLcabz7TFs">
<img src="/images/Jack Floyd.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Floyd, Jack</h4>
<p class="list-group-item-text">Ferakon</p>
</a>
<a class="list-group-item" href="/contacts/RpGBhrAXGP8S">
<img src="/images/Chris Grocott.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Grocott, Chris</h4>
<p class="list-group-item-text">Ganonite Corp.</p>
</a>
<a class="list-group-item" href="/contacts/Gv8h6f4UDL84">
<img src="/images/Fred Hafer.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Hafer, Fred</h4>
<p class="list-group-item-text">GVSB Corp.</p>
</a>
<a class="list-group-item" href="/contacts/6BegTWK928p1">
<img src="/images/Harry Harkins.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Harkins, Harry</h4>
<p class="list-group-item-text">Haven Inc.</p>
</a>
<a class="list-group-item" href="/contacts/cNqW3fUXdrhB">
<img src="/images/Robert Jarrell.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Jarrell, Robert</h4>
<p class="list-group-item-text">Lossless Systems</p>
</a>
<a class="list-group-item" href="/contacts/cA2vBwEZmx88">
<img src="/images/Laura Johnson.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Johnson, Laura</h4>
<p class="list-group-item-text">Lossless Systems</p>
</a>
</div>
<div class="panel-footer">
<small class="pull-left">Built with Bootcards - List</small>
<a class="btn btn-link btn-xs pull-right" href="/snippets/list-detailed" data-toggle="modal" data-target="#docsModal">
View Source</a>
</div>
</div>
</div>
<!------row-------->
</div>
<!----contact from list---->
<div class="row">
<div class="col-sm-7" id="listDetails">
<h3> RIGHT COL</h3>
<div id="contactCard">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left">Contact Details</h3>
<div class="btn-group pull-right visible-xs">
<a class="btn btn-primary" href="/contacts/VBMJHwcLX3Vx/edit" data-toggle="modal" data-target="#editModal">
<i class="fa fa-pencil"></i>
<span>Edit</span>
</a>
</div>
<a class="btn btn-primary pull-right hidden-xs" href="/contacts/VBMJHwcLX3Vx/edit" data-toggle="modal" data-target="#editModal">
<i class="fa fa-pencil"></i>
<span>Edit</span>
</a>
</div>
<div class="list-group">
<div class="list-group-item">
<img src="/images/Sofia Acey.jpg" class="img-rounded pull-left">
<label>Name</label>
<h4 class="list-group-item-heading">Acey, Sofia</h4>
</div>
<div class="list-group-item">
<label>Company</label>
<h4 class="list-group-item-heading">Masung Corp.</h4>
</div>
<div class="list-group-item">
<label>Job Title</label>
<h4 class="list-group-item-heading">Finance Director (ZCT)</h4>
</div>
<div class="list-group-item">
<label>Department</label>
<h4 class="list-group-item-heading">Finance</h4>
</div>
<a class="list-group-item" href="tel://+1 650-555-0055">
<label>Phone</label>
<h4 class="list-group-item-heading">+1 650-555-0055</h4>
</a>
<a class="list-group-item" href="mailto:Sofia.Acey@masung.com">
<label>Email</label>
<h4 class="list-group-item-heading">Sofia.Acey@masung.com</h4>
</a>
</div>
<div class="panel-footer">
<small class="pull-left">Built with Bootcards - Base Card</small>
<a class="btn btn-link btn-xs pull-right" href="/snippets/base-card-form" data-toggle="modal" data-target="#docsModal">
View Source</a>
</div>
</div>
</div>
<!--list of notes-->
<div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title pull-left">Notes</h3>
<div class="btn-group pull-right">
<a class="btn btn-primary" href="/contacts/VBMJHwcLX3Vx/notes/add" data-toggle="modal" data-target="#editModal">
<i class="fa fa-plus"></i>
<span>Add</span>
</a>
</div>
</div>
<div class="list-group">
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/ucw9gtbjq7ls">
<i class="fa fa-2x pull-left fa-check-square-o"></i>
<h4 class="list-group-item-heading">Send tracking Number</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:27</p>
</a>
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/1rhen4xigta0w">
<i class="fa fa-2x pull-left fa-file-text-o"></i>
<h4 class="list-group-item-heading">Improved Load Time</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:26</p>
</a>
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/1rhen4xigta0z">
<i class="fa fa-2x pull-left fa-paperclip"></i>
<h4 class="list-group-item-heading">Stingray.pdf</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:26</p>
</a>
<a class="list-group-item special" href="/contacts/VBMJHwcLX3Vx/notes/uywr1g2fnvuo">
<i class="fa fa-2x pull-left fa-picture-o"></i>
<h4 class="list-group-item-heading">Product image</h4>
<p class="list-group-item-text">Mon 02 Dec 2013 17:26</p>
</a>
</div>
<div class="panel-footer">
<small class="pull-left">Built with Bootcards - List</small>
<a class="btn btn-link btn-xs pull-right" href="/snippets/list-card" data-toggle="modal" data-target="#docsModal">
View Source</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel">
<div class="panel-heading">
<p class="panel-title pull-left">Controlers</p>
<div class="btn-group pull-right">
<a class="btn btn-primary" href="#" data-toggle="modal" data-target="#dtModal">
<i class="fa fa-plus"></i>
<span>Add</span>
</a>
</div>
</div>
<div class="panel-body">
<div class="container">
<div class="tabbable tabs-above">
<ul class="nav nav-tabs shiny-tab-input" id="user_settings_tabs">
<li class="active">
<a href="#tab-9930-1" data-toggle="tab" data-value="Account">
<i class=" fa fa-wrench fa-fw"></i> Account
</a>
</li>
<li>
<a href="#tab-9930-2" data-toggle="tab" data-value="Facebook">
<i class=" fa fa-facebook fa-fw fa-lg"></i> Facebook
</a>
</li>
<li>
<a href="#tab-9930-3" data-toggle="tab" data-value="Instagram">
<i class=" fa fa-instagram fa-fw fa-lg"></i> Instagram
</a>
</li>
<li>
<a href="#tab-9930-4" data-toggle="tab" data-value="Twitter">
<i class=" fa fa-twitter fa-fw"></i> Twitter
</a>
</li>
<li>
<a href="#tab-9930-5" data-toggle="tab" data-value="Google+">
<i class=" fa fa-google-plus fa-fw"></i> Google+
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" data-value="Account" data-icon-class="fa fa-wrench" id="tab-9930-1">
<h5 class="rotate">acct</h5>
<div class="form-group">
<div class="row" style="margin-bottom:15px;">
<label class="col-xs-2 offset2 control-label">First Name</label>
<div class="col-xs-8">
<input type="text" name="firstName" class="form-control" placeholder="First Name" value="Sofia">
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-xs-2 offset2 control-label">Last Name</label>
<div class="col-xs-8">
<input type="text" name="lastName" class="form-control" placeholder="Last Name" value="Acey">
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 offset4 control-label">Salutation</label>
<div class="col-xs-8">
<input type="text" name="salutation" class="form-control" placeholder="Salutation" value="mrs">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Title</label>
<div class="col-xs-8">
<input type="text" name="jobTitle" class="form-control" placeholder="Job Title" value="Finance Director (ZCT)">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Department</label>
<div class="col-xs-8">
<input type="text" name="department" class="form-control" placeholder="Department" value="Finance">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Phone</label>
<div class="col-xs-8">
<input type="text" name="phone" class="form-control" placeholder="Phone" value="+1 650-555-0055">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Email</label>
<div class="col-xs-8">
<input type="email" name="email" class="form-control" placeholder="Email" value="Sofia.Acey@masung.com">
</div>
</div>
</div>
</div>
<div class="tab-pane" data-value="Facebook" data-icon-class="fa fa-facebook" id="tab-9930-2">
<h2>YOLO FABO</h2>
<div class="row">
<div class="col-sm-12">
<table aria-describedby="DataTables_Table_0_info" role="grid" id="DataTables_Table_0" class="table table-striped table-hover dataTable no-footer">
<thead>
<tr role="row">
<th aria-label=" " colspan="1" rowspan="1" class="sorting_disabled"> </th>
<th aria-label="friends: activate to sort column ascending" colspan="1" rowspan="1" aria-controls="DataTables_Table_0" tabindex="0" class="dt-right sorting">friends</th>
<th aria-label="followers: activate to sort column ascending" colspan="1" rowspan="1" aria-controls="DataTables_Table_0" tabindex="0" class="dt-right sorting">followers</th>
</tr>
</thead>
<tbody>
<tr class="odd" role="row">
<td>1</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.8229%, rgb(22, 209, 106) 99.8229%) no-repeat scroll center center / 98% 88%;" class=" dt-right">199</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.915%, rgb(22, 209, 106) 99.915%) no-repeat scroll center center / 98% 88%;" class=" dt-right">96</td>
</tr>
<tr class="even" role="row">
<td>2</td>
<td style="background: transparent linear-gradient(90deg, transparent 98.9948%, rgb(22, 209, 106) 98.9948%) no-repeat scroll center center / 98% 88%;" class=" dt-right">1125</td>
<td style="background: transparent linear-gradient(90deg, transparent 97.7142%, rgb(22, 209, 106) 97.7142%) no-repeat scroll center center / 98% 88%;" class=" dt-right">2557</td>
</tr>
<tr class="odd" role="row">
<td>3</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.5448%, rgb(22, 209, 106) 99.5448%) no-repeat scroll center center / 98% 88%;" class=" dt-right">510</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.4858%, rgb(22, 209, 106) 99.4858%) no-repeat scroll center center / 98% 88%;" class=" dt-right">576</td>
</tr>
<tr class="even" role="row">
<td>4</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.1245%, rgb(22, 209, 106) 99.1245%) no-repeat scroll center center / 98% 88%;" class=" dt-right">980</td>
<td style="background: transparent linear-gradient(90deg, transparent 93.7945%, rgb(22, 209, 106) 93.7945%) no-repeat scroll center center / 98% 88%;" class=" dt-right">6940</td>
</tr>
<tr class="odd" role="row">
<td>5</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.8623%, rgb(22, 209, 106) 99.8623%) no-repeat scroll center center / 98% 88%;" class=" dt-right">155</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.4554%, rgb(22, 209, 106) 99.4554%) no-repeat scroll center center / 98% 88%;" class=" dt-right">610</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane container" data-value="Instagram" data-icon-class="fa fa-instagram" id="tab-9930-3">
<div class="row">
<div class='col-sm-12'>
<p class="do-rotate">
YOLO IG</p></div></div>
</div>
<div class="tab-pane" data-value="Twitter" data-icon-class="fa fa-twitter" id="tab-9930-4">
<h2>YOLO TW</h2>
</div>
<div class="tab-pane" data-value="Google+" data-icon-class="fa fa-google-plus" id="tab-9930-5">
<h2>YOLO FABO</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-----modals------>
<!--noteModal--->
<div class="modal fade in" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModal" aria-hidden="true" style="display:none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="dragable">
<form class="form-horizontal" method="POST" action="/contact//notes" data-pjax="#listDetails">
<div class="modal-header">
<div class="btn-group pull-left">
<button class="btn btn-danger" data-dismiss="modal">
Cancel
</button>
</div>
<div class="btn-group pull-right">
<button class="btn btn-success" data-dismiss="modal">
Save
</button>
</div>
<h3 class="modal-title">
New Note
</h3>
</div>
<div class="modal-body" style="background-color:rgba(10,10,10,.5);">
<input type="hidden" name="_method" value="put">
<input type="hidden" name="_method" value="put">
<input type="hidden" name="contactId" value="">
<div class="form-group">
<label class="col-xs-3 control-label">Type</label>
<div class="col-xs-9">
<select name="type" class="form-control" value="">
<option value="todo" selected="">To Do</option>
<option value="text">Text</option>
<option value="media">Media</option>
<option value="file">File</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Subject</label>
<div class="col-xs-10">
<input type="text" name="subject" class="form-control" placeholder="Subject" value="">
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Date</label>
<div class="col-xs-9">
<input type="datetime" name="date" class="form-control" placeholder="Date" value="Wed Oct 07 2015 14:02:27 GMT-0400 (EDT)">
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Details</label>
<div class="col-xs-9">
<textarea name="details" class="form-control" rows="6" placeholder="Details"></textarea>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<small class="pull-left">Built with Bootcards - Form Card</small>
<a class="btn btn-link btn-xs pull-right" href="/snippets/form-card" data-toggle="modal" data-target="#docsModal">
View Source</a>
</div>
</div>
</div>
</div>
</div>
<!---editModal----->
<div class="modal fade in" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true" style="display:none">
<div class="modal-dialog">
<div class="modal-content">
<div class="dragable">
<form class="form-horizontal" method="POST" action="/contacts/VBMJHwcLX3Vx" data-pjax="#main">
<div class="modal-header">
<div class="btn-group pull-left">
<button class="btn btn-danger" data-dismiss="modal">
Cancel
</button>
</div>
<div class="btn-group pull-right">
<button class="btn btn-success" data-dismiss="modal">
Save
</button>
</div>
<h4 class="modal-title">
Edit Contact
</h4>
</div>
<div class="modal-body">
<input type="hidden" name="companyId" value="">
<input type="hidden" name="_method" value="put">
<div class="form-group">
<label class="col-xs-4 control-label">First Name</label>
<div class="col-xs-8">
<input type="text" name="firstName" class="form-control" placeholder="First Name" value="Sofia">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Last Name</label>
<div class="col-xs-8">
<input type="text" name="lastName" class="form-control" placeholder="Last Name" value="Acey">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Salutation</label>
<div class="col-xs-8">
<input type="text" name="salutation" class="form-control" placeholder="Salutation" value="mrs">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Title</label>
<div class="col-xs-8">
<input type="text" name="jobTitle" class="form-control" placeholder="Job Title" value="Finance Director (ZCT)">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Department</label>
<div class="col-xs-8">
<input type="text" name="department" class="form-control" placeholder="Department" value="Finance">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Phone</label>
<div class="col-xs-8">
<input type="text" name="phone" class="form-control" placeholder="Phone" value="+1 650-555-0055">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Email</label>
<div class="col-xs-8">
<input type="email" name="email" class="form-control" placeholder="Email" value="Sofia.Acey@masung.com">
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-block" onclick="bootcards.confirmDelete('contact'); return false;">
<i class="fa fa-trash-o"></i> Delete Contact
</button>
</div>
<div class="modal-footer">
<small class="pull-left">Built with Bootcards - Form Card</small>
<a class="btn btn-link btn-xs pull-right" href="/snippets/form-card" data-toggle="modal" data-target="#docsModal">
View Source</a>
</div>
</div>
</div>
</div>
</div>
<!-->
<!---container----->
</div>
<div class="modal fade in" id="dtModal" tabindex="-1" role="dialog" aria-labelledby="noteModal" aria-hidden="true" style="display:none;">
<div class="panel panel-default bootcards-table">
<div class="panel-heading">
<h3 class="panel-title">Closed sales by member</h3>
</div>
<div id="htmlwidget-5982" style="width:100%;height:auto;" class="datatables html-widget-static-bound">
<div class="dataTables_wrapper form-inline dt-bootstrap no-footer" id="DataTables_Table_0_wrapper">
<div class="row">
<div class="col-sm-6">
<div id="DataTables_Table_0_length" class="dataTables_length">
<label>Show
<select class="form-control input-sm" aria-controls="DataTables_Table_0" name="DataTables_Table_0_length">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select> entries</label>
</div>
</div>
<div class="col-sm-6">
<div class="dataTables_filter" id="DataTables_Table_0_filter">
<label>Search:
<input aria-controls="DataTables_Table_0" placeholder="" class="form-control input-sm" type="search">
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table aria-describedby="DataTables_Table_0_info" role="grid" id="DataTables_Table_0" class="table table-striped table-hover dataTable no-footer">
<thead>
<tr role="row">
<th aria-label=" " colspan="1" rowspan="1" class="sorting_disabled"> </th>
<th aria-label="friends: activate to sort column ascending" colspan="1" rowspan="1" aria-controls="DataTables_Table_0" tabindex="0" class="dt-right sorting">friends</th>
<th aria-label="followers: activate to sort column ascending" colspan="1" rowspan="1" aria-controls="DataTables_Table_0" tabindex="0" class="dt-right sorting">followers</th>
</tr>
</thead>
<tbody>
<tr class="odd" role="row">
<td>1</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.8229%, rgb(22, 209, 106) 99.8229%) no-repeat scroll center center / 98% 88%;" class=" dt-right">199</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.915%, rgb(22, 209, 106) 99.915%) no-repeat scroll center center / 98% 88%;" class=" dt-right">96</td>
</tr>
<tr class="even" role="row">
<td>2</td>
<td style="background: transparent linear-gradient(90deg, transparent 98.9948%, rgb(22, 209, 106) 98.9948%) no-repeat scroll center center / 98% 88%;" class=" dt-right">1125</td>
<td style="background: transparent linear-gradient(90deg, transparent 97.7142%, rgb(22, 209, 106) 97.7142%) no-repeat scroll center center / 98% 88%;" class=" dt-right">2557</td>
</tr>
<tr class="odd" role="row">
<td>3</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.5448%, rgb(22, 209, 106) 99.5448%) no-repeat scroll center center / 98% 88%;" class=" dt-right">510</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.4858%, rgb(22, 209, 106) 99.4858%) no-repeat scroll center center / 98% 88%;" class=" dt-right">576</td>
</tr>
<tr class="even" role="row">
<td>4</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.1245%, rgb(22, 209, 106) 99.1245%) no-repeat scroll center center / 98% 88%;" class=" dt-right">980</td>
<td style="background: transparent linear-gradient(90deg, transparent 93.7945%, rgb(22, 209, 106) 93.7945%) no-repeat scroll center center / 98% 88%;" class=" dt-right">6940</td>
</tr>
<tr class="odd" role="row">
<td>5</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.8623%, rgb(22, 209, 106) 99.8623%) no-repeat scroll center center / 98% 88%;" class=" dt-right">155</td>
<td style="background: transparent linear-gradient(90deg, transparent 99.4554%, rgb(22, 209, 106) 99.4554%) no-repeat scroll center center / 98% 88%;" class=" dt-right">610</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div aria-live="polite" role="status" id="DataTables_Table_0_info" class="dataTables_info">Showing 1 to 5 of 22 entries</div>
</div>
<div class="col-sm-7">
<div id="DataTables_Table_0_paginate" class="dataTables_paginate paging_simple_numbers">
<ul class="pagination">
<li id="DataTables_Table_0_previous" class="paginate_button previous disabled"><a tabindex="0" data-dt-idx="0" aria-controls="DataTables_Table_0" href="#">Previous</a></li>
<li class="paginate_button active"><a tabindex="0" data-dt-idx="1" aria-controls="DataTables_Table_0" href="#">1</a></li>
<li class="paginate_button "><a tabindex="0" data-dt-idx="2" aria-controls="DataTables_Table_0" href="#">2</a></li>
<li class="paginate_button "><a tabindex="0" data-dt-idx="3" aria-controls="DataTables_Table_0" href="#">3</a></li>
<li class="paginate_button "><a tabindex="0" data-dt-idx="4" aria-controls="DataTables_Table_0" href="#">4</a></li>
<li class="paginate_button "><a tabindex="0" data-dt-idx="5" aria-controls="DataTables_Table_0" href="#">5</a></li>
<li id="DataTables_Table_0_next" class="paginate_button next"><a tabindex="0" data-dt-idx="6" aria-controls="DataTables_Table_0" href="#">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-block">
<i class="fa fa-bar-chart-o"></i> Show Chart
</button>
</div>
<div class="panel-footer">
<small class="pull-left">Built with Bootcards - Table Card</small>
</div>
</div>
</div>
</div>
Raw
script.js
$("#google_one").click(function(){$("#divy").toggle();});
$(document).ready(function(){
$("#google_two").click(function(){
$("#divy_too").toggle();
});
});
$("#divy").draggable({
handle: ".panel"
});
$(".draggable").draggable();
$("#noteModal").draggable({
handle: ".modal-content"
});
$(".draggable").draggable();
$("#editModal").draggable({
handle: ".modal-content"
});
$("#dtModal").draggable({
handle: ".modal-content"
});
$('.datepicker').datepicker()
/*
* Clear the target DOM element and draw the sample charts
* Samples come from the morris.js site at http://www.oesmith.co.uk/morris.js/
*/
var closedSalesChart = null;
var drawChartClosedSales = function() {
$("#chartClosedSales").empty();
//create custom Donut function with click event on the segments
var myDonut = Morris.Donut;
myDonut.prototype.redraw = function() {
var C, cx, cy, i, idx, last, max_value, min, next, seg, total, value, w, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
this.raphael.clear();
cx = this.el.width() / 2;
cy = this.el.height() / 2;
w = (Math.min(cx, cy) - 10) / 3;
total = 0;
_ref = this.values;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
value = _ref[_i];
total += value;
}
min = 5 / (2 * w);
C = 1.9999 * Math.PI - min * this.data.length;
last = 0;
idx = 0;
this.segments = [];
_ref1 = this.values;
for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) {
value = _ref1[i];
next = last + min + C * (value / total);
seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.data[i].color || this.options.colors[idx % this.options.colors.length], this.options.backgroundColor, idx, this.raphael);
seg.render();
this.segments.push(seg);
seg.on('hover', this.select);
seg.on('click', this.select);
last = next;
idx += 1;
}
this.text1 = this.drawEmptyDonutLabel(cx, cy - 10, this.options.labelColor, 15, 800);
this.text2 = this.drawEmptyDonutLabel(cx, cy + 10, this.options.labelColor, 14);
max_value = Math.max.apply(Math, this.values);
idx = 0;
_ref2 = this.values;
_results = [];
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
value = _ref2[_k];
if (value === max_value) {
this.select(idx);
break;
}
_results.push(idx += 1);
}
return _results;
};
closedSalesChart = myDonut({
element: 'chartClosedSales',
data: [
{label: 'Guy Bardsley', value: 550 },
{label: 'Adam Callahan', value: 1500 },
{label: 'Arlo Geist', value: 3750 },
{label: 'Sheila Hutchins', value: 3500 },
{label: 'Jeanette Quijano', value: 1250 },
{label: 'Simon Sweet', value: 5250 }
],
formatter: function (y, data) {
//prefixes the values by an $ sign, adds thousands seperators
nStr = y + '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return '$ ' + x1 + x2;
}
});
};
//draw the charts when the DOM is ready
$(document).ready( function() {
drawChartClosedSales();
});
//on resize of the page: redraw the charts
$(window)
.on('resize', function() {
window.setTimeout( function() {
if (closedSalesChart !== null) { closedSalesChart.redraw(); }
}, 250);
});
bootcards.init( {
offCanvasHideOnMainClick : true,
offCanvasBackdrop : true,
enableTabletPortraitMode : true,
disableRubberBanding : true,
disableBreakoutSelector : 'a.no-break-out'
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/js/bootcards.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="//maxcdn.ion.rangeSlider.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/js/bootcards.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="//maxcdn.ion.rangeSlider.min.js"></script>
Raw
style.css
html,
.body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857;
color: #999;
background-color: #191919;
min-height: 100% !important;
overflow: auto;
display: block;
height: 100% !important;
}
.home {
margin-top: 5%;
}
.home-img {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
align-content: center;
margin-bottom: 5%;
}
.whyles-pink{
color:#E35F4E;
}
.whyles-blue{
color:#4688d7;
}
.whyles-green{
color:#1ed760;
}
.whyles-yellow{
color:#d2d81e;
}
.twitter{
color:#00ffef
}
.twitter-dark{
color: #0084b4
}
.twitter-verified{
color:#1dcaff
}
.instagram-red { color:#fb3958}
.instagram-yellow { color:#ffc838}
.instagram-green { color:#6dc993}
.instagram-blue { color:#458eff}
.instagram-light { color:#ded1c1}
.instagram-dark { color:#9b6954}
.instagram-dark-blue{ color:#125688}
.vimeo-blue{color: #45bbff}
.vimeo-sky-blue{color: #90d5ec}
.vimeo-powder-blue{color: #d1eef7}
.vimeo-purple{color: #c09eda}
.vimeo-green{color: #aad450}
.vimeo-yellow{color: #f7b42c}
.vimeo-orange{color: #ff8a3c}
.vimeo-red{color: #fc575e}
.vimeo-pink{color: #f27490}
.vimeo-magenta{color: #f49ac1}
.vimeo-brown{color: #ccaa55}
.vimeo-gray{color: #99aabb}
.vimeo-mint{color: #66cc99}
.facebook {
color: #3762bd;
}
.facebook-blue{
color:#3b5998
}
.facebook-med-blue{
Hex: #6d84b4
}
.facebook-light-blue{
color: #afbdd4
}
.facebook-lightest-blue{
color:#d8dfea
}
.googlePlus{
color:#ff0000
}
.googleAnalytics {
color: #ff6d00;
}
.whyles-teal{
color: #00d7ed;
}
.whyles-yellow {
color: #d2d81e;
}
.fb {
border-top: 1px solid #1e1e1e;
background-color: #181818;
}
.fb-h4 {
color: yellow
}
.menu {
height: 100px;
position: fixed;
top: 0;
right: 0;
width: 10%;
box-sizing: border-box;
font-size: 20px;
background:transparent;
}
.menu-open-button {
background: #1E1E1F;
border-radius: 100%;
width: 70px;
height: 70px;
top: 50px;
right: 25px;
text-align: center;
line-height: 70px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
box-shadow: 4px 8px 1px rgba(0, 0, 0, 0.4);
z-index: 5000;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
position: fixed;
text-align: center;
}
.menu-item {
top: 50px;
margin-right: 25px;
background: #28262B;
border-radius: 100%;
width: 70px;
height: 70px;
position: fixed;
text-align: center;
line-height: 70px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
box-shadow: 4px 8px 1px rgba(0, 0, 0, 0.4);
}
#divy,#divy_too,.menu-open {
display: none;
}
.menu-item > .fa {
text-shadow: 2px 5px 2px #191919;
}
.hamburger {
width: 30px;
height:3px;
font-weight:600;
background: #28262B;
display: block;
position: absolute;
top:45%;
left: 50%;
margin-left: -15px;
margin-top: 1px;
-webkit-transition: -webkit-transform 200ms;
transition: transform 200ms;
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.4);
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0,8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0,0,0) rotate(45deg);
transform: translate3d(0,0,0) rotate(45deg);
background:#fff;height:3px;width:35px;
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1.2);
transform: translate3d(0, 0, 0) scale(0.1, 1.2);
background:transparent;
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0,0, 0) rotate(-45deg);
transform: translate3d(0,0, 0) rotate(-45deg);
background:#4688d7;height:3px;width:35px;
}
.menu-item:hover {
background:red;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
right: 0;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
right: 0;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
right: 0;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
right: 0;
}
.menu-open-button:hover .hamburger {
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
background-color: #70D068;
}
.menu-open-button:active .hamburger,
.menu-open-button.active .hamburger,
.menu-open:checked .hamburger {
background-color:#0084b4;
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(1, 1) translate3d(0, 0, 0);
transform: scale(1, 1) translate3d(0, 0, 0);
background-color:#70D068;
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
background-color:rgba(73, 73, 73);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 190ms;
transition-duration: 190ms;
-webkit-transform: translate3d(-110px, 0, 0);
transform: translate3d(-110px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 290ms;
transition-duration: 290ms;
-webkit-transform: translate3d(-220px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 390ms;
transition-duration: 390ms;
-webkit-transform: translate3d(-330px, 0, 0);
transform: translate3d(-330px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 490ms;
transition-duration: 490ms;
-webkit-transform: translate3d(-440px, 0, 0);
transform: translate3d(-440px, 0, 0);
}
.nav-tabs,
.nav-tabs .shiny-tab-input {
border-radius: 0px;
-moz-box-shadow: 1px 1px 5px #000;
-webkit-box-shadow: 1px 1px 5px #000;
box-shadow: 1px 1px 5px #000;
width: 100%;
border-bottom-color: #121212;
}
.nav-tabs>li,
.nav-tabs .shiny-tab-input >li {
margin-bottom: -1px;
}
.nav-tabs>li>a,
.nav-tabs .shiny-tab-input >li>a {
color: #808080;
font-size: 16px;
display: inline;
border-radius: 0 !important;
margin: 0 !important;
}
.nav-tabs>li>a:focus >.fa,
.nav-tabs>li>a:hover >.fa,
.nav-tabs>li>a:active> .fa,
.nav-tabs .shiny-tab-input>li>a:focus >.fa,
.nav-tabs .shiny-tab-input>li>a:hover> .fa {
color: #E35F4E
}
.nav-tabs>li>a:focus,
.nav-tabs>li>a:hover,
.nav-tabs>li>a:active,
.nav-tabs .shiny-tab-input>li>a:focus,
.nav-tabs .shiny-tab-input>li>a:hover {
color: #808080;
cursor: default;
background-color: #282828;
border: 1px solid #282828;
border-bottom: 4px solid #E35F4E;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs .shiny-tab-input>li.active>a,
.nav-tabs .shiny-tab-input>li.active:focus>a,
.nav-tabs .shiny-tab-input>li.active:hover>a {
color: #fff;
cursor: default;
font-weight: 500;
background-color: #282828;
border: 1px solid;
border-color: #282828;
border-bottom: 4px solid #E35F4E;
}
.nav-tabs>li.active>a>.fa,
.nav-tabs>li.active>a:focus>.fa,
.nav-tabs>li.active>a:hover>.fa {
color: #4688d7
}
/* NAVBAR */
.navbar-nav {
float: left;
margin: 1px;
z-index: 9999;
}
.nav {
padding-left: 0;
list-style: outside none none;
}
.navbar-custom-menu > .navbar-nav > li {
position: relative;
}
.navbar-nav > li {
float: left;
}
.nav > li {
position: relative;
display: inline-block;
}
.skin-black .main-header > .navbar .navbar-custom-menu .navbar-nav > li > a,
.skin-black .main-header > .navbar .navbar-right > li > a {
border-left: 1px solid transparent;
border-right-width: 0px;
}
.skin-black .main-header > .navbar .navbar-nav > li > a {
border-right: 1px medium rgba(255, 255, 255, 0);
}
.skin-black .main-header > .navbar .nav > li > a {
font-size: 2em;
color: rgb(73, 73, 73);
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.label {
display: inline;
font-weight: 700;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25em;
}
.main-header .navbar .nav > li > a > .label {
position: absolute;
top: 9px;
right: 7px;
text-align: center;
font-size: 9px;
padding: 2px 3px;
line-height: 0.9;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25em;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
position: absolute;
right: 0;
left: auto;
}
.navbar-nav > .messages-menu > .dropdown-menu,
.navbar-nav > .notifications-menu > .dropdown-menu,
.navbar-nav > .tasks-menu > .dropdown-menu {
width: 280px;
padding: 0 !important;
margin: 0 !important;
top: 100%;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-nav .dropdown-menu {
box-shadow: none !important;
}
.open > .dropdown-menu {
display: block;
}
.dropdown-menu {
box-shadow: none;
border-color: #EEE;
}
.navbar-nav > .messages-menu > .dropdown-menu > li.header,
.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .tasks-menu > .dropdown-menu > li.header {
border-radius: 4px 4px 0px 0px;
background-color: #FFF;
padding: 7px 10px;
color: #444;
font-size: 14px;
border-bottom: 1px solid #E1DBDB;
}
.navbar-nav > .messages-menu > .dropdown-menu > li .menu,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
max-height: 200px;
margin: 0px;
padding: 0px;
list-style: outside none none;
overflow-x: hidden;
}
.sidebar-toggle {
color: #0070F6;
border-right: 1px solid transparent;
background-color: transparent;
background-image: none;
font-family: fontAwesome;
padding: 8px;
font-size: 2em;
z-index: 9999;
display: inline-block;
position: fixed;
left: 15px;
top: 5px;
}
.sidebar-toggle {
background-color: transparent;
border-right: medium none !important;
outline: medium none;
color: rgb(227, 95, 78);
font-weight: 500;
}
.sidebar-toggle:hover {
color: #000;
background: transparent;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0px;
margin: -1px;
overflow: hidden;
clip: rect(0px, 0px, 0px, 0px);
border: 0px none;
z-index: 9998;
color: #333;
}
.main-sidebar {
background-color: #282828;
width: 260px;
height: 100%;
z-index: 8000;
color: #F5F5F5;
left: 0px;
box-shadow: 2px 0px 15px rgba(0, 0, 0, 0.85);
}
.sidebar-collapse .main-sidebar {
-moz-transform: translate(-270px, 0px);
-ms-transform: translate(-270px, 0px);
-o-transform: translate(-270px, 0px);
-webkit-transform: translate(-270px, 0px);
transform: translate(-270px, 0px);
}
.aside {
display: block;
}
.main-sidebar {
top: 0px;
padding-top: 0 !important;
min-height: 100%;
z-index: 8000;
transition: transform 0.3s ease-in-out 0s, width 0.3s ease-in-out 0s;
position: fixed;
}
.sidebar {
padding-bottom: 0px !important;
color: #fff;
}
.section {
display: block;
}
.skin-black .user-panel {
position: relative;
display: block;
height: 150px;
width: 100%;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
top: 0;
}
.skin-black .user-panel {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.skin-black .user-panel>.info,
.skin-black .user-panel>.info>a {
font-size: 18px;
font-weight: 300;
line-height: 1.1;
color: #FFF;
text-transform: inherit;
letter-spacing: inherit;
height: 30px;
background: rgba(0, 0, 0, 0.50) none repeat scroll 0% 0%;
width: 100%;
left: 0px;
bottom: 0px;
text-align: right;
}
.skin-black .user-panel>.info,
.skin-black .user-panel>.info>a {
font-size: 18px;
font-weight: 300;
line-height: 1.1;
color: #FFF;
text-transform: inherit;
letter-spacing: inherit;
height: 30px;
background: rgba(0, 0, 0, 0.50) none repeat scroll 0% 0%;
width: 100%;
left: 0px;
bottom: 0px;
text-align: right;
}
.skin-black .user-panel>.info:hover {
color: #fff;
background-color: rgba(0, 0, 0, 0.1);
}
.user-panel > .image > img {
width: 60px;
border-radius: 50%;
position: relative;
transition: all 0.2s ease-in-out 0s;
margin-top: 65px;
margin-left: 10px;
-moz-appearance: -moz-mac-vibrancy-dark;
box-shadow: 1px 1px 0px -10px rgba(0, 0, 0, 0.65);
max-width: 85px;
height: auto;
border: 0px none;
z-index: 11000;
}
.skin-black .sidebar-form .btn {
color: #E35F4E;
border-radius: 0px 2px 2px 0px !important;
box-shadow: none;
background: #282828 none repeat scroll 0% 0%;
border: 1px solid #181818;
outline: medium none !important;
height: 34px;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
border-color: #181818 !important;
}
.sidebar-menu,
.sidebar-menu > li.header {
overflow: hidden;
}
.sidebar-menu {
list-style: outside none none;
margin: 0px;
padding: 0px;
width: 100%;
heigh: 60px;
}
.skin-black .sidebar-menu > li {
position: relative;
list-style-type: none;
border-bottom: 3px solid #494949;
border-left: 0px solid transparent;
width: 100%;
margin-bottom: 10px;
background: transparent;
}
#nav_tabs > li > a {
background: transparent;
text-align: center;
}
.sidebar-menu > li {
margin: 0px;
padding: 0px;
}
.skin-black .sidebar-menu > li > a {
border-left: 0px solid transparent;
}
.skin-black .sidebar-menu > li > .treeview-menu {
position: relative;
width: 100%;
margin: 0px;
padding: 0px;
border: medium none;
border-radius: 0px;
box-shadow: none;
overflow: visible;
}
.skin-black .sidebar-menu > li:active > a,
.skin-black .sidebar-menu > li:hover > a {
border-left-color: #FFF;
box-shadow: none;
outline: none !important;
color: #05AFF2;
background-color: #383838;
font-weight: 400;
}
.content-wrapper {
margin-left: 0px !important;
}
.content-wrapper,
.right-side,
.main-footer {
transition: none 0s ease 0s;
}
.skin-black .main-header .navbar-toggle {
color: transparent;
}
.skin-black .main-header .navbar-brand {
color: #333;
border-right: 1px solid #eee
}
.skin-black .main-header>.navbar {
background-color: transparent;
}
.skin-black .main-header>.navbar .nav>li>a {
color: #666;
font-size: 2em;
}
.skin-black .main-header>.navbar .nav .open>a,
.skin-black .main-header>.navbar .nav .open>a:focus,
.skin-black .main-header>.navbar .nav .open>a:hover,
.skin-black .main-header>.navbar .nav>li>a:active,
.skin-black .main-header>.navbar .nav>li>a:focus,
.skin-black .main-header>.navbar .nav>li>a:hover {
background: transparent;
color: #4688d7;
outline: none !important;
}
.skin-black .main-header>.navbar .navbar-nav>li>a {
border-right: none !important;
}
.skin-black .main-header>.navbar .navbar-custom-menu .navbar-nav>li>a,
.skin-black .main-header>.navbar .navbar-right>li>a {
border-left: 1px solid transparent;
border-right-width: 0
}
.skin-black .main-header>.logo {
background-color: transparent;
color: transparent;
border-bottom: 0 solid transparent;
border-right: 1px solid transparent;
width: .01px;
}
.skin-black .main-header>.logo:hover {
background-color: transparent
}
@media (max-width:767px) {
.skin-black .main-header>.logo {
background-color: transparent;
color: transparent;
border-bottom: 0 solid transparent;
border-right: none !important;
width: .01px;
}
.skin-black .main-header>.logo:hover {
background-color: transparent
}
}
.skin-black .main-header li.user-header {
display: none;
}
.skin-black .content-header {
background: 0 0;
box-shadow: none;
height: 1px;
}
.skin-black .sidebar-menu>li> a i {
color: #bdbdbd;
}
.skin-black .sidebar-menu>li.header {
color: #4b646f;
background: #1e1e1e;
}
.skin-black .sidebar-menu>li {
position: relative;
list-style-type: none;
border-bottom: 3px solid #494949;
width: 100%;
heigh: 50px;
}
.skin-black .sidebar-menu>li>a {
color: #ffffff;
background-color: #141414;
outline: none !important;
}
.skin-black .sidebar-menu>li:hover > a i,
.skin-black .sidebar-menu>li > a:hover i {
color: #05aff2;
}
.skin-black .sidebar-menu>li.active > a,
.skin-black .sidebar-menu>li:hover>a {
border-left-color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
outline: none !important;
color: #05aff2;
background-color: #020202;
font-weight: 400;
}
.skin-black .sidebar-menu>li>.treeview-menu,
.skin-black .sidebar-menu>li>.treeview-menu>li.active {
position: relative;
width: 100%;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
overflow: visible;
outline: none !important;
}
.skin-black .sidebar a {
color: #b8c7ce
}
.skin-black .sidebar a:hover {
-webkit-box-shadow: none;
box-shadow: none;
outline: none !important;
}
.skin-black .treeview-menu>li>a {
color: #4688d7;
background-color: #202020;
border-bottom: 1px solid #454545;
}
.skin-black .treeview-menu>li.active > a,
.skin-black .treeview-menu>li>a:hover {
color: #4688d7;
background-color: #020202;
outline: none !important;
}
.skin-black .sidebar-form {
border-radius: 3px;
border: 1px solid #010101;
margin: 10px;
height: 34px;
}
.skin-black .sidebar-form .btn,
.skin-black .sidebar-form input[type=text] {
box-shadow: none;
background: #282828;
border: 1px solid #181818;
outline: none !important;
height: 34px;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.skin-black .sidebar-form input[type=text] {
color: #e35f4e;
border-radius: 2px 0 0 2px !important
}
.skin-black .sidebar-form input[type=text]:focus,
.skin-black .sidebar-form input[type=text]:focus+.input-group-btn .btn {
background-color: #353535;
color: #e35f4e;
outline: none !important;
}
.skin-black .sidebar-form input[type=text]:focus+.input-group-btn .btn {
color: #e35f4e;
border-left-color: #020202;
outline: none !important;
}
.skin-black .sidebar-menu > li .badge {
background-color: #05aff2;
border-radius: 4px;
color: #fff;
font-weight: 400;
font-size: 1em;
}
.skin-black .sidebar-menu > li:hover .badge {
border-radius: 8px;
}
@media (max-width: 766px) {
.sidebar.open {
min-width: 240px;
width: 240px;
}
}
/* OFFCANVAS MENU */
.offcanvas,
.offcanvas-list {
position: fixed;
top: 0;
bottom: 0;
width: 200px;
overflow-y: auto;
z-index: 1050;
height: 100%;
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
-webkit-transition: 0.25s ease;
-moz-transition: 0.25s ease;
-o-transition: 0.25s ease;
transition: 0.25s ease;
}
.offcanvas-left {
left: -200px;
}
.offcanvas-left.active {
-webkit-transform: translate3d(200px, 0px, 0px);
-moz-transform: translate3d(200px, 0px, 0px);
-o-transform: translate3d(200px, 0px, 0px);
-ms-transform: translate3d(200px, 0px, 0px);
transform: translate3d(200px, 0px, 0px);
}
/* OFFCANVAS LIST FOR TABLET PORTRAIT MODE */
.offcanvas-list {
width: 350px;
left: -350px;
}
.offcanvas-list.active {
-webkit-transform: translate3d(350px, 0px, 0px);
-moz-transform: translate3d(350px, 0px, 0px);
-o-transform: translate3d(350px, 0px, 0px);
-ms-transform: translate3d(350px, 0px, 0px);
transform: translate3d(350px, 0px, 0px);
}
.offcanvas-list-title {
position: fixed;
background: rgba(247, 247, 247, 0.98);
height: 45px;
font-size: 17px;
font-weight: 500;
line-height: 44px;
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.offcanvaslist-toggle {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
-webkit-transition: 0.25s ease;
-moz-transition: 0.25s ease;
-o-transition: 0.25s ease;
transition: 0.25s ease;
}
.offcanvaslist-toggle.active {
-webkit-transform: translate3d(50px, 0px, 0px);
-moz-transform: translate3d(50px, 0px, 0px);
-o-transform: translate3d(50px, 0px, 0px);
-ms-transform: translate3d(50px, 0px, 0px);
transform: translate3d(50px, 0px, 0px);
}
.push-right {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
-webkit-transition: 0.25s ease;
-moz-transition: 0.25s ease;
-o-transition: 0.25s ease;
transition: 0.25s ease;
}
.push-right.active-left {
-webkit-transform: translate3d(200px, 0px, 0px);
-moz-transform: translate3d(200px, 0px, 0px);
-o-transform: translate3d(200px, 0px, 0px);
-ms-transform: translate3d(200px, 0px, 0px);
transform: translate3d(200px, 0px, 0px);
}
.push-right.active-right {
-webkit-transform: translate3d(-200px, 0px, 0px);
-moz-transform: translate3d(-200px, 0px, 0px);
-o-transform: translate3d(-200px, 0px, 0px);
-ms-transform: translate3d(-200px, 0px, 0px);
transform: translate3d(-200px, 0px, 0px);
}
/* BUTTONS */
.btn.icon-only i,
.btn.icononly i {
margin-right: 0;
}
/* LISTS */
.list-group-item {
margin-left: 1px;
padding-left: 0;
}
.list-group-item .list-group-item-text {
line-height: 18px;
margin-bottom: 5px;
overflow: hidden;
}
.list-group-item .list-group-item-heading:last-child,
.list-group-item .list-group-item-text:last-child {
margin-bottom: 0;
}
.list-group-item .row div > .list-group-item-heading:last-child,
.list-group-item .row div > .list-group-item-text:last-child {
margin-bottom: 5px;
}
.list-group-item .row div:last-child > .list-group-item-heading:last-child,
.list-group-item .row div:last-child > .list-group-item-text:last-child {
margin-bottom: 0;
}
.list-group-item img {
height: 40px;
width: 40px;
margin-right: 1px;
}
.list-group-item i {
opacity: 0.3;
width: 40px;
text-align: center;
margin-right: 1px;
color: #a9a9a9;
}
a.list-group-item {
cursor: pointer;
}
a.list-group-item:hover,
a.list-group-item:active,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
margin-left: 0;
padding-left: 1px;
}
.panel > .list-group .list-group-item:last-child {
border-bottom: 0;
}
/* List Images */
.bootcards-list-group-item-content {
overflow: hidden;
}
/* Disclosure Indicators */
a.list-group-item:before {
font-family: 'FontAwesome';
content: '';
position: absolute;
right: 15px;
top: 50%;
font-size: 14px;
line-height: 14px;
margin-top: -7px;
color: #808080;
}
.list-group.bootcards-no-indicators a.list-group-item:before {
display: none;
}
/* List - Subheadings */
.list-group-item.bootcards-list-subheading {
margin-left: 0;
padding-left: 15px;
font-weight: 500;
font-size: 14px;
z-index: 6;
}
a.list-group-item.bootcards-list-subheading {
padding-left: 40px;
}
a.list-group-item.bootcards-list-subheading:before {
font-family: 'FontAwesome';
content: '';
position: absolute;
left: 15px;
top: 50%;
font-size: 14px;
line-height: 14px;
margin-top: -7px;
color: #808080;
}
a.list-group-item.bootcards-list-subheading.collapsed:before {
content: '';
}
/* List - AZ Picker */
.bootcards-az-picker {
position: fixed;
width: 25px;
margin: 0 0 0 -26px;
padding: 0;
list-style: none;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
height: 100%;
background: #ffffff;
padding-bottom: 50px;
padding-top: 5px;
}
.bootcards-az-picker li {
font-size: 11px;
font-weight: 500;
text-align: center;
padding: 0;
background: #ffffff;
height: 3.846%;
/* 100% / 26 */
}
.bootcards-az-picker a {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.bootcards-az-picker a:hover {
text-decoration: none;
}
@media only screen and (min-device-width: 480px) and (max-device-width: 767px) and (orientation: landscape) {
.bootcards-az-picker li {
height: 7.692%;
/* 100% / 13 */
}
.bootcards-az-picker li:nth-child(even) {
display: none;
/* hide every other letter on smartphones/landscape */
}
}
/* List - Search Form */
.bootcards-list .form-group {
position: relative;
margin-bottom: 0;
}
@media (min-width: 768px) {
.bootcards-list .form-group {
margin-bottom: 0;
}
}
.bootcards-list form input,
.bootcards-list .search-form input {
padding-left: 32px;
}
.bootcards-list form .btn,
.bootcards-list .search-form .btn {
color: white;
}
.bootcards-list form i.fa-search,
.bootcards-list .search-form i.fa-search {
position: absolute;
left: 12px;
top: 10px;
color: #999;
font-size: 14px;
}
/* FOOTER */
.bootcards-desktop-footer {
display: none;
}
/* CARDS */
.panel-default .panel-heading {
color: #808080;
background-color: #383838;
border-color: #383838;
}
.panel-body > *:last-child {
margin-bottom: 0;
}
.panel-footer {
overflow: hidden;
}
.panel-footer small,
.modal-footer small {
color: #808080;
display: block;
text-align: center;
line-height: 22px;
/* Line up vertically with .btn */
}
.list-group + .panel-footer {
border-top-width: 1px;
/* ML: panel-footer has a top border, but that's removed by Bootstrap if there's a list-group before it. We restore it here. */
}
/* FORM CARD */
.btn label {
margin: 0;
font-weight: inherit;
cursor: pointer;
}
.bootcards-clearinput {
position: absolute;
right: 0;
top: 11px;
color: #080808;
display: block;
font-size: 0;
}
.bootcards-clearinput i {
line-height: 1;
font-size: 18px;
}
.form-horizontal .form-group div div {
padding: 0;
}
/* Toggle – based on Ratchet.css */
.bootcards-toggle {
position: relative;
display: block;
width: 74px;
height: 30px;
background-color: #383838;
border: 2px solid #383838;
border-radius: 20px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border;
transition-property: background-color, border;
}
.bootcards-toggle .bootcards-toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #454545;
border: 1px solid #454545;
border-radius: 100px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
}
.bootcards-toggle:before {
position: absolute;
top: 3px;
right: 11px;
font-size: 13px;
color: #808080;
text-transform: uppercase;
content: "Off";
}
.bootcards-toggle.active {
background-color: #4688d7;
border: 2px solid #4688d7;
}
.bootcards-toggle.active .bootcards-toggle-handle {
border-color: #4688d7;
-webkit-transform: translate3d(44px, 0, 0);
-ms-transform: translate3d(44px, 0, 0);
transform: translate3d(44px, 0, 0);
}
.bootcards-toggle.active:before {
right: auto;
left: 15px;
color: #808080;
content: "On";
}
.bootcards-toggle input[type="checkbox"] {
display: none;
}
/* CALENDAR */
.bootcards-calendar {
margin-top: -15px;
background: white;
}
.bootcards-calendar .fc-header-left,
.bootcards-calendar .fc-header-right {
padding: 15px;
}
.bootcards-calendar .fc-header-title h2 {
margin: 0;
}
.bootcards-calendar .fc-content th:first-child,
.bootcards-calendar .fc-content td:first-child {
border-left-width: 0;
}
.bootcards-calendar .fc-content th:last-child,
.bootcards-calendar .fc-content td:last-child {
border-right-width: 0;
}
.bootcards-calendar .fc-header-title h2 {
font-size: 14px;
text-transform: uppercase;
color: #8f8f94;
font-weight: 400;
margin: 0;
padding: 8px 0;
line-height: 20px;
}
.bootcards-calendar .fc-header-left,
.bootcards-calendar .fc-header-right {
padding: 0 10px;
}
.bootcards-calendar .fc-button .fc-icon {
margin: 0;
}
.bootcards-calendar .fc-header .fc-button {
background: transparent;
box-shadow: none;
border-color: transparent;
margin: 0;
height: 44px;
line-height: 40px;
font-size: 16px;
text-shadow: none;
padding: 0;
}
.bootcards-calendar .fc-header-left .fc-button {
margin-right: 10px;
}
.bootcards-calendar .fc-header-right .fc-button {
margin-left: 10px;
}
.bootcards-calendar .fc-icon-left-single-arrow:after,
.bootcards-calendar .fc-icon-right-single-arrow:after {
font-family: 'FontAwesome';
font-size: 18px;
font-weight: normal;
}
.bootcards-calendar .fc-icon-left-single-arrow:after {
content: '';
}
.bootcards-calendar .fc-icon-right-single-arrow:after {
content: '';
}
.bootcards-calendar .fc-header .fc-button.fc-state-disabled {
color: #AAA;
opacity: 1;
}
.bootcards-calendar .fc-header .fc-button.fc-state-active {
color: #AAA;
}
.bootcards-calendar .fc-day-header {
font-weight: 400;
font-size: 12px;
border-left-color: transparent;
padding: 5px 0;
padding-right: 3px;
}
.bootcards-calendar .fc-event {
background: #007aff;
border-color: #007aff;
}
.bootcards-calendar .fc-today {
background: #FFF2F2;
}
/* TABLE CARD */
.table > thead > tr > th:first-child,
.table > tbody > tr > th:first-child,
.table > tfoot > tr > th:first-child,
.table > thead > tr > td:first-child,
.table > tbody > tr > td:first-child,
.table > tfoot > tr > td:first-child {
padding-left: 15px;
}
.table > thead > tr > th:last-child,
.table > tbody > tr > th:last-child,
.table > tfoot > tr > th:last-child,
.table > thead > tr > td:last-child,
.table > tbody > tr > td:last-child,
.table > tfoot > tr > td:last-child {
padding-right: 15px;
}
/* FILE CARD */
@font-face {
font-family: 'icomoon';
src: url("../fonts/icomoon.eot?-n2q9vw");
src: url("../fonts/icomoon.eot?#iefix-n2q9vw") format("embedded-opentype"), url("../fonts/icomoon.woff?-n2q9vw") format("woff"), url("../fonts/icomoon.ttf?-n2q9vw") format("truetype"), url("../fonts/icomoon.svg?-n2q9vw#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-file-pdf:before {
content: "\e4e2";
}
.icon-file-word:before {
content: "\e4e4";
}
.icon-file-excel:before {
content: "\e4e5";
}
.icon-file-powerpoint:before {
content: "\e4e7";
}
.icon-file:before {
content: "\e08d";
}
.bootcards-file .list-group-item:first-child {
position: relative;
padding-left: 74px;
}
.bootcards-file .list-group-item:first-child i {
font-size: 64px;
width: 64px;
position: absolute;
left: 0;
top: 10px;
}
.bootcards-file .list-group-item *:last-child {
margin-bottom: 0;
}
/* CHART CARD */
.bootcards-chart .bootcards-chart-canvas {
height: 200px;
}
/* SUMMARY CARD */
.bootcards-summary .panel-body {
padding: 7px 25px;
}
.bootcards-summary .panel-body > .row > div {
padding: 8px;
}
.bootcards-summary-item {
background: #f5f5f5;
display: block;
border-radius: 4px;
padding: 25px 10px;
text-align: center;
position: relative;
height: 130px;
}
@media (max-width: 400px) {
.bootcards-summary-item {
padding: 15px 5px;
}
}
.bootcards-summary-item:hover {
text-decoration: none;
background: #eee;
}
.bootcards-summary-item > i {
color: #bbb;
display: block;
text-align: center;
margin-bottom: 5px;
}
.bootcards-summary-item h4 {
margin: 0 auto;
}
.bootcards-summary-item .badge,
.bootcards-summary-item .label {
position: absolute;
top: 10px;
right: 10px;
}
/* RICH TEXT CARD */
.bootcards-richtext > .panel-body {
padding: 25px;
max-width: 640px;
margin: 0 auto;
}
.bootcards-richtext > .panel-body > *:first-child {
margin-top: 0;
}
/* ALERTS & DIALOGS */
@media (max-width: 767px) {
.modal-dialog.modal-sm {
margin: 15px;
}
}
@media (min-width: 768px) {
.modal-dialog.modal-sm {
width: 400px;
}
}
#bootcards {
padding-top: 80px;
background: #1E1E1F;
}
/* NAVBAR */
.navbar .navbar-brand {
font-weight: bold;
color: #333;
}
.navbar .navbar-brand.navbar-brand-multiline {
margin-top: -12px;
}
.navbar .btn i {
vertical-align: 0;
}
.navbar .btn-back,
.navbar .btn-menu,
.navbar button[data-toggle="offcanvas"] {
display: none !important;
}
/* NAVBAR WITH 2 LINES OF LINKS (DESKTOP ONLY) */
@media (min-width: 768px) {
body.has-bootcards-navbar-double {
padding-top: 110px;
}
body.has-bootcards-navbar-double .bootcards-navbar-double .navbar-brand {
line-height: 50px;
}
body.has-bootcards-navbar-double .bootcards-nav-secondary.navbar-nav > li > a {
padding-top: 5px;
padding-bottom: 5px;
}
body.has-bootcards-navbar-double .bootcards-nav-primary,
body.has-bootcards-navbar-double .bootcards-nav-secondary {
margin-right: -15px;
clear: right;
}
body.has-bootcards-navbar-double .bootcards-nav-secondary,
body.has-bootcards-navbar-double .bootcards-nav-secondary .dropdown-menu {
font-size: 12px;
}
}
/* LISTS */
.list-group label {
font-weight: normal;
}
a.list-group-item.active:before {
color: #e1edf7;
}
/* List Search */
.bootcards-list .panel-body > form > .row > div:first-child,
.bootcards-list .panel-body > .search-form > .row > div:first-child {
padding-right: 0;
}
/* CARDS */
.panel-title {
margin: 7px 0;
}
.panel-content form {
padding: 15px;
}
/* MODAL */
.modal-header {
line-height: 32px;
}
.modal-title {
text-align: center;
}
/* FORMS */
.bootcards-clearinput {
right: 23px;
}
/* FOOTER */
.navbar-fixed-bottom {
position: static;
padding-top: 20px;
padding-bottom: 20px;
background: transparent;
}
.navbar-fixed-bottom .btn-group {
display: none;
}
.navbar-fixed-bottom .bootcards-desktop-footer {
display: block;
text-align: center;
color: #999;
}
/* DOCUMENTATION */
.bootcards-documentation-list > .panel {
position: fixed;
}
@media (min-width: 768px) {
.bootcards-documentation-list > .panel {
width: 163px;
}
}
@media (min-width: 992px) {
.bootcards-documentation-list > .panel {
width: 213px;
}
}
@media (min-width: 1200px) {
.bootcards-documentation-list > .panel {
width: 263px;
}
}
/*---panels---*/
.panel,
panel-default bootcards-chart,
bootcards-chart {
margin-bottom: 20px;
background-color: #1E1E1F;
border: 1px solid #181818 !important;
border-radius: 4px;
-moz-box-shadow: 1px 5px 18px #000000;
-webkit-box-shadow: 1px 5px 18px #000000;
box-shadow: 0 5px 10px #000000;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid #4688d7;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
height: 65px;
background: #1E1E1F;
}
.panel-body {
padding: 6px 12px;
background-color: #292929;
}
.panel-heading > .dropdown .dropdown-toggle {
color: inherit;
}
.panel-title,
panel-default bootcards-chart .panel-title {
font-size: 22px;
color: #3E3D40;
vertical-align: central;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
color: #808080;
}
a.list-group-item {
color: #818181;
}
.panel-footer {
padding: 15px;
background-color: #1E1E1F;
border-top: 1px solid #4688d7 !important;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .list-group,
.panel > .panel-collapse > .list-group {
margin-bottom: 0;
}
.panel > .list-group .list-group-item,
.panel > .list-group .list-group-item-special,
.panel > .panel-collapse > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item-special {
border-width: 1px 0;
border-radius: 0;
background: #1E1E1F;
}
.panel > .list-group .list-group-item-special:hover > .fa,
.panel > .panel-collapse > .list-group .list-group-item-special:hover > .fa .list-only {
color: black;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .list-group:first-child .list-group-item-special:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item-special:first-child {
border-top: 0;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.list-group-item:active>p,
.list-group-item:focus>p .list-group-item:hover>p {
color: #4688d7;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
border-bottom: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0;
}
.list-group + .panel-footer {
border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
margin-bottom: 0;
}
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
padding-left: 15px;
padding-right: 15px;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
border-top-right-radius: 3px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
border-bottom-right-radius: 3px;
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
border-bottom: 0;
}
.panel > .table-responsive {
border: 0;
margin-bottom: 0;
}
.panel-group {
margin-bottom: 20px;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
border-top: 1px solid #dddddd;
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #dddddd;
}
.panel-default {
border-color: #dddddd;
}
.panel-default > .panel-heading {
color: #808080;
background-color: #383838;
border-color: #dddddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #dddddd;
}
.panel-default > .panel-heading .badge {
color: #f5f5f5;
background-color: #617284;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #dddddd;
}
.panel-primary {
border-color: #ee5f5b;
}
.panel-primary > .panel-heading {
color: #ffffff;
background-color: #ee5f5b;
border-color: #ee5f5b;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ee5f5b;
}
.panel-primary > .panel-heading .badge {
color: #ee5f5b;
background-color: #ffffff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ee5f5b;
}
.panel-success {
border-color: #ec445b;
}
.panel-success > .panel-heading {
color: #1ed760;
background-color: #ee5f5b;
border-color: #ec445b;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ec445b;
}
.panel-success > .panel-heading .badge {
color: #ee5f5b;
background-color: #1ed760;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ec445b;
}
.panel-info {
border-color: #bce8f1;
}
.panel-info > .panel-heading {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #bce8f1;
}
.panel-info > .panel-heading .badge {
color: #d9edf7;
background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #bce8f1;
}
.panel-warning {
border-color: #282828;
}
.panel-warning > .panel-heading {
color: #a82439;
background-color: #353535;
border-color: #282828;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #282828;
}
.panel-warning > .panel-heading .badge {
color: #353535;
background-color: #a82439;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #282828;
}
.panel-danger {
border-color: #282828;
}
.panel-danger > .panel-heading {
color: #ff0000;
background-color: #353535;
border-color: #282828;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #282828;
}
.panel-danger > .panel-heading .badge {
color: #353535;
background-color: #ff0000;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #282828;
}
.bootcards-chart-canvas,
.bootcards-cards,
.post-card {
background-color: #282828;
border: 1px solid #282828 !important;
border-radius: 4px;
-moz-box-shadow: 1px 5px 18px #000000;
-webkit-box-shadow: 1px 5px 18px #000000;
box-shadow: 0 5px 10px #000000;
}
.panel-default >.panel-heading,
.panel-default >.panel-heading {
font-weight: bold;
background-color: #454545;
color: #a9a9a9;
}
.list-group-item spcial,
.list-group,
.list-group .list-group-item {
background-color: #424242;
color: #808080;
border-color: #666;
font-weight: 600;
}
a.list-group-item .list-group-item-heading,
button.list-group-item .list-group-item-heading {
color: #f8f8f8 !important;
}
.list-group-item special.active,
.list-group-item.active:focus,
.list-group-item.active:hover,
a.list-group-item:hover,
a.list-group-item:active,
a.list-group-item:focus {
border-top-color: #fff;
border-bottom-color: #fff;
background-color: rgba(5, 175, 242, 0.53) !important;
}
a.list-group-item:hover > .list-group-item-heading,
a.list-group-item:focus > .list-group-item-heading,
.button.list-group-item:focus > .list-group-item-heading {
color: #f9f9f9 !important;
}
a.list-group-item .list-group-item-text,
button.list-group-item .list-group-item-text > p,
.list-group-item-text.active {
color: #05Aff2;
}
a.list-group-item special:hover .list-group-item-text,
a.list-group-item:hover .list-group-item-text,
button.list-group-item:hover .list-group-item-text > p,
a.list-group-item special:focus .list-group-item-text,
a.list-group-item:focus .list-group-item-text,
button.list-group-item:focus .list-group-item-text > p {
color: #989898;
}
a.list-group-item-heading:hover > h4,
list-group-item:hover > .group-item-text,
button.list-group-item:hover > .group-item-text > p,
a.list-group-item:focus,
a.list-group-item:hover,
a.list-group-item:active {
color: #808080;
}
.special:hover > i,
.special:focus >i {
color: #010101;
}
.row {
margin: 5px !important;
}
.img {
vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 10px;
padding: 2px 6px;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
margin-left: 5px;
}
.form-control,
.input-group {
font-family: Helvetica-Light;
height: 38px;
display: inline-table;
position: relative;
background-color: #383838;
outline: none !important;
border-color: #383838 !important;
border-radius: 4px;
}
.input-group .input-group-addon {
height: 38px;
background-color: #383838;
outline: none !important;
border-color: #383838;
border-right: #111111;
color: #E35F4E;
text-align: center;
border-radius-upper-left: 4px !important;
border-radius-lower-left: 4px !important;
border-radius-upper-right: 0px !important;
border-radius-lower-right: 0px !important;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 8px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #383838;
}
.btn-text {
padding-left: 6px;
font-weight: 400;
color: #f1f1f1;
}
.btn.focus >.btn-text,
.btn:focus > .btn-text,
.btn.active > .btn-text,
.btn:active > .btn-text,
btn.hover > .btn-text,
.btn:hover > .btn-text {
color: #313131;
}
.btn:hover >.fa,
.btn.hover >.fa,
.btn:focus > .fa,
.btn.focus >.fa {
color: #fff;
}
.btn:active > .fa,
.btn.active >.fa {
color: #808080;
font-weight: 600;
}
.btn:focus,
.btn:active,
.btn.active,
.btn.focus {
outline: none !important;
outline: none auto -webkit-focus-ring-color;
outline-offset: -2px
}
.btn.hover,
.btn:hover,
.btn:focus,
.btn.focus,
.btn.active,
.btn:active,
.btn-primary.hover,
.btn-primary.active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:hover,
.btn-default:focus,
.btn-default:active {
color: inherit;
text-decoration: none;
outline: none !important;
border-color: transparent !important;
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
a.btn .disabled,
fieldset[disabled] a.btn {
pointer-events: none;
}
.btn-default > .fa {
color: #e35f4e;
}
.btn-default:focus,
.btn-default.focus,
.btn-default:hover,
.btn-default.hover,
.btn-default:active,
.btn-default.active {
background-color: #e35f4e;
}
.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open>.dropdown-toggle.btn-default.focus,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-color: #e35f4e;
}
.btn-default .badge {
color: #e35;
background-color: #000;
}
/*#region opts */
.btn-primary>.fa {
color: #4688d7
}
.btn-primary:focus,
.btn-primary .focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary .active,
.open > .dropdown-toggle .btn-primary {
background-color: #4688d7;
outline: none !important;
}
.btn-primary:active:hover,
.btn-primary .active:hover,
.open > .dropdown-toggle .btn-primary:hover,
.btn-primary:active:focus,
.btn-primary .active:focus,
.open > .dropdown-toggle .btn-primary:focus,
.btn-primary:active .focus,
.btn-primary .active .focus,
.open > .dropdown-toggle .btn-primary .focus {
color: #4688d7;
background-color: #203f63;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary .disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary .disabled .active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
color: #4688d7;
background-color: #203f63;
}
.btn-primary .badge {
color: #d7d7d7;
background-color: #1ed760;
}
.btn-danger,
.btn-success,
.btn-twitter,
.btn-facebook,
.btn-instagram,
.btn-googleAnalytics,
.btn-googlePlus,
.btn-whyles-pink,
.btn-whyles-blue,
.btn-whyles-teal,
.btn-whyles-green {
background-color: #353535;
outline: none !important;
}
.btn-danger>.fa {
color: #a82439;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
background-color: #a82439;
}
.twitter >.fa,
.btn-twitter>.fa {
color: #00ffef;
}
.btn-twitter:hover >.fa {
color: #0084b4;
}
.btn-twitter:hover,
.btn-twitter:active,
.btn-twitter:focus {
background-color: #00ffef;
}
.instagram >.fa,
.btn-instagram>.fa {
color: #ddff2d;
}
.btn-instagram:hover,
.btn-instagram:active,
.btn-instagram:focus {
background-color: #9b6954;
}
.facebook > .fa,
.btn-facebook > .fa {
color: #3762bd;
}
.googlePlus >.fa,
.btn-googlePlus > .fa {
color: #ff0000;
}
.googleAnalytics>.fa,
.btn-googleAnalytics > .fa {
color: #ff6d00;
}
.btn-whyles-pink>.fa {
color: #EF0476;
}
.btn-whyles-blue>.fa {
color: #05AFF2;
}
.btn-whyles-green>.fa {
color: #1ED760;
}
.btn-whyles-teal>.fa {
color: #00d7ed;
}
.btn-whyles-yellow>.fa {
color: #d2d81e;
}
.btn-facebook:hover,
.btn-facebook:active,
.btn-facebook:focus {
background-color: #3b5998;
}
.btn-googleAnalytics:hover,
.btn-googleAnalytics:active,
.btn-googleAnalytics:focus {
background-color: #ff6d00;
}
.btn-googlePlus:active,
.btn-googlePlus:hover,
.btn-googlePlus:focus {
background-color: #ff0000;
}
.btn-whyles-pink:active,
.btn-whyles-pink:focus,
.btn-whyles-pink:hover {
background-color: #EF0476;
}
.btn-whyles-blue:hover,
.btn-whyles-blue:active,
.btn-whyles-blue:focus {
background-color: #4688d7;
}
.btn-whyles-yellow:hover,
.btn-whyles-yellow:active,
.btn-whyles-yellow:focus {
background-color: #d2d81e;
}
.btn-whyles-teal:hover,
.btn-whyles-teal:active,
.btn-whyles-teal:focus {
background-color: #00d7ed;
}
.btn-whyles-green:hover,
.btn-whyles-green:focus,
.btn-whyles-green:active {
background-color: #1ed760;
}
.btn-block {
color: #fff;
font-weight: 500;
}
.rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(-90deg);
word-break:keep-all;
max-width:25px;
word-spacing: 5px;
line-height: 1;
}
.btn-block > .fa {
border-radius: 6px !important;
font-weight: 500;
}
.btn-block:hover,
.btn-block:active {
border-radius: 4px !important;
border-color: 0 none rgba(255, 255, 255, 0);
}
.btn-input-default,
.btn-input-default:active,
.btn-input-default,
.btn-input-default {
background-color: #353535 !important;
color: #4687D7;
height: 38px !important;
}
.btn-group:hover,
.btn-group:active {
outline: none !important;
border-color: #383838 !important;
}
.btn-input-default:hover,
.btn-input-default:focus {
background: #080808 !important;
color: #E35F4E;
outline: none !important;
border-right-color: #383838 !important;
border-bottom-color: #383838 !important;
border-top-color: #383838 !important;
border-radius-top-right: 15px !important;
border-radius-bottom-right: 15px !important;
border-radius-top-left: 5px !important;
border-radius-bottom-left: 5px !important;
margin-left: -5px;
}
.input-group:focus,
.input-group:active,
.form-control:focus,
.form-control:active {
background-color: #010101;
border-radius: 1px !important;
border-color: #666;
font-family: Helvetica-Light;
font-size: 14px;
color: #E35F4E;
width: 100%;
outline: none;
box-shadow: 0 0 0 #1e1e1e;
-moz-transition: background-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
-o-transition: background-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
-webkit-transition: background-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
transition: background-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
/*---------tables---------*/
/*---table region---*/
.panel,
panel-default bootcards-chart,
bootcards-chart {
margin-bottom: 20px;
background-color: #282828;
border: 1px solid #181818 !important;
border-radius: 4px;
-moz-box-shadow: 1px 5px 18px #000000;
-webkit-box-shadow: 1px 5px 18px #000000;
box-shadow: 0 5px 10px #000000;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid #4688d7;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
height: 65px;
background: #232323;
}
.panel-body {
padding: 6px 12px;
background-color: #292929;
}
.panel-heading > .dropdown .dropdown-toggle {
color: inherit;
}
.panel-title,
panel-default bootcards-chart .panel-title {
font-size: 22px;
color: #a9a9a9;
vertical-align: central;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
color: #808080;
}
a.list-group-item {
color: #818181;
}
.panel-footer {
padding: 15px;
background-color: #262626;
border-top: 1px solid #4688d7 !important;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .list-group,
.panel > .panel-collapse > .list-group {
margin-bottom: 0;
}
.panel > .list-group .list-group-item,
.panel > .list-group .list-group-item-special,
.panel > .panel-collapse > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item-special {
border-width: 1px 0;
border-radius: 0;
background: #282828;
}
.panel > .list-group .list-group-item-special:hover > .fa,
.panel > .panel-collapse > .list-group .list-group-item-special:hover > .fa .list-only {
color: black;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .list-group:first-child .list-group-item-special:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item-special:first-child {
border-top: 0;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.list-group-item:active>p,
.list-group-item:focus>p .list-group-item:hover>p {
color: #4688d7;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
border-bottom: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0;
}
.list-group + .panel-footer {
border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
margin-bottom: 0;
}
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
padding-left: 15px;
padding-right: 15px;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
border-top-right-radius: 3px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
border-bottom-right-radius: 3px;
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
border-bottom: 0;
}
.panel > .table-responsive {
border: 0;
margin-bottom: 0;
}
.panel-group {
margin-bottom: 20px;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
border-top: 1px solid #dddddd;
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #dddddd;
}
.panel-default {
border-color: #dddddd;
}
.panel-default > .panel-heading {
color: #808080;
background-color: #383838;
border-color: #dddddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #dddddd;
}
.panel-default > .panel-heading .badge {
color: #f5f5f5;
background-color: #617284;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #dddddd;
}
.panel-primary {
border-color: #ee5f5b;
}
.panel-primary > .panel-heading {
color: #ffffff;
background-color: #ee5f5b;
border-color: #ee5f5b;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ee5f5b;
}
.panel-primary > .panel-heading .badge {
color: #ee5f5b;
background-color: #ffffff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ee5f5b;
}
.panel-success {
border-color: #ec445b;
}
.panel-success > .panel-heading {
color: #1ed760;
background-color: #ee5f5b;
border-color: #ec445b;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ec445b;
}
.panel-success > .panel-heading .badge {
color: #ee5f5b;
background-color: #1ed760;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ec445b;
}
.panel-info {
border-color: #bce8f1;
}
.panel-info > .panel-heading {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #bce8f1;
}
.panel-info > .panel-heading .badge {
color: #d9edf7;
background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #bce8f1;
}
.panel-warning {
border-color: #282828;
}
.panel-warning > .panel-heading {
color: #a82439;
background-color: #353535;
border-color: #282828;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #282828;
}
.panel-warning > .panel-heading .badge {
color: #353535;
background-color: #a82439;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #282828;
}
.panel-danger {
border-color: #282828;
}
.panel-danger > .panel-heading {
color: #ff0000;
background-color: #353535;
border-color: #282828;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #282828;
}
.panel-danger > .panel-heading .badge {
color: #353535;
background-color: #ff0000;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #282828;
}
.bootcards-chart-canvas,
.bootcards-cards,
.post-card {
background-color: #282828;
border: 1px solid #282828 !important;
border-radius: 4px;
-moz-box-shadow: 1px 5px 18px #000000;
-webkit-box-shadow: 1px 5px 18px #000000;
box-shadow: 0 5px 10px #000000;
}
.panel-default >.panel-heading,
.panel-default >.panel-heading {
font-weight: bold;
background-color: #454545;
color: #a9a9a9;
}
.list-group-item spcial,
.list-group,
.list-group .list-group-item {
background-color: #424242;
color: #808080;
border-color: #666;
font-weight: 600;
}
a.list-group-item .list-group-item-heading,
button.list-group-item .list-group-item-heading {
color: #f8f8f8 !important;
}
.list-group-item special.active,
.list-group-item.active:focus,
.list-group-item.active:hover,
a.list-group-item:hover,
a.list-group-item:active,
a.list-group-item:focus {
border-top-color: #fff;
border-bottom-color: #fff;
background-color: rgba(5, 175, 242, 0.53) !important;
}
a.list-group-item:hover > .list-group-item-heading,
a.list-group-item:focus > .list-group-item-heading,
.button.list-group-item:focus > .list-group-item-heading {
color: #f9f9f9 !important;
}
a.list-group-item .list-group-item-text,
button.list-group-item .list-group-item-text > p,
.list-group-item-text.active {
color: #05Aff2;
}
a.list-group-item special:hover .list-group-item-text,
a.list-group-item:hover .list-group-item-text,
button.list-group-item:hover .list-group-item-text > p,
a.list-group-item special:focus .list-group-item-text,
a.list-group-item:focus .list-group-item-text,
button.list-group-item:focus .list-group-item-text > p {
color: #989898;
}
a.list-group-item-heading:hover > h4,
list-group-item:hover > .group-item-text,
button.list-group-item:hover > .group-item-text > p,
a.list-group-item:focus,
a.list-group-item:hover,
a.list-group-item:active {
color: #808080;
}
.table {
background-color: #1e1e1e;
color: #fff;
}
.bootcards-table,
.table .table-hover {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.table > thead,
.table > thead > tr > th,
.table > thead > tr > td {
background-color: #383838;
color: #05AFF2;
border-bottom: 2px solid #05AFF2;
text-align: center;
font-weight: 500;
font-size: 1.15em;
text-transform: uppercase;
}
.dataTables_wrapper,
.dataTables_info {
color: #808080;
}
#DataTables_Table_0_length > label > select >dropdown {
color: green;
}
#DataTables_Table_0_length > label > select {
border-color: #383838;
}
#DataTables_Table_0_paginate > ul > li > a {
background-color: #383838;
color: #808080;
border-color: #454545
}
#DataTables_Table_0_paginate > ul > li:hover > a {
color: #e35f4e;
background: #181818;
border-color: #383838;
font-weight: 500;
}
table.dataTable span.highlight {
color: rgba(240, 52, 82, 1.00) !important;
background-color: rgba(240, 52, 82, 0.14) !important;
}
table-striped.dataTable tbody tr.active:nth-child(2n+1) td,
.table-striped.dataTable tbody tr.active:nth-child(2n+1) th {
background-color: rgba(1, 108, 161, 0.93) !important;
border-top: 1px inset #45BBF6 !important;
border-bottom: 1px inset #45BBF6 !important;
}
table.dataTable tbody tr.active:hover td,
table.dataTable tbody tr.active:hover th {
background-color: rgba(6, 74, 108, 0.44) !important;
}
table.dataTable tbody tr.active td,
table.dataTable tbody tr.active th {
background-color: #017EBC !important;
border-top: medium none #45BBF6 !important;
border-bottom-color: #45BBF6 !important;
}
table.dataTable tbody tr.active th > a,
table.dataTable tbody tr.active td > a {
color: white;
}
table-striped.dataTable tbody tr.active:nth-child(odd) td,
table-striped.dataTable tbody tr.active:nth-child(odd) th {
background-color: #017ebc !important;
}
table.DTTT_selectable tbody tr {
cursor: pointer;
}
div.DTTT .btn:hover {
text-decoration: none !important;
}
ul.DTTT_dropdown.dropdown-menu {
z-index: 2003;
border-color: green;
}
ul.DTTT_dropdown.dropdown-menu a {
color: #111 !important;
/* needed only when demo_page.css is included */
}
ul.DTTT_dropdown.dropdown-menu li {
position: relative;
}
ul.DTTT_dropdown.dropdown-menu li:hover a {
background-color: rgb(227, 95, 78);
color: #333 !important;
}
div.DTTT_collection_background {
z-index: 2002;
}
/* TableTools information display */
div.DTTT_print_info {
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 150px;
margin-left: -200px;
margin-top: -75px;
text-align: center;
color: #333;
padding: 10px 30px;
opacity: 0.95;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
}
div.DTTT_print_info h6 {
font-weight: normal;
font-size: 28px;
line-height: 28px;
margin: 1em;
}
div.DTTT_print_info p {
font-size: 14px;
line-height: 20px;
}
div.dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 60px;
margin-left: -50%;
margin-top: -25px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-size: 1.2em;
background-color: white;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
}
/*
* FixedColumns styles
*/
div.DTFC_LeftHeadWrapper table,
div.DTFC_LeftFootWrapper table,
div.DTFC_RightHeadWrapper table,
div.DTFC_RightFootWrapper table,
table.DTFC_Cloned tr.even {
background-color: white;
margin-bottom: 0;
}
div.DTFC_RightHeadWrapper table,
div.DTFC_LeftHeadWrapper table {
border-bottom: none !important;
margin-bottom: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightBodyWrapper table,
div.DTFC_LeftBodyWrapper table {
border-top: none;
margin: 0 !important;
}
div.DTFC_RightBodyWrapper tbody tr:first-child th,
div.DTFC_RightBodyWrapper tbody tr:first-child td,
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
border-top: none;
}
div.DTFC_RightFootWrapper table,
div.DTFC_LeftFootWrapper table {
border-top: none;
margin-top: 0 !important;
}
div.DTFC_LeftBodyWrapper table.dataTable thead .sorting:after,
div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_asc:after,
div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_desc:after,
div.DTFC_RightBodyWrapper table.dataTable thead .sorting:after,
div.DTFC_RightBodyWrapper table.dataTable thead .sorting_asc:after,
div.DTFC_RightBodyWrapper table.dataTable thead .sorting_desc:after {
display: none;
}
button.DTTT_button,
div.DTTT_button,
a.DTTT_button {
position: relative;
display: inline-block;
margin-right: 3px;
padding: 5px 8px;
border: 1px solid #353535;
cursor: pointer;
font-size: 0.88em;
color: rgb(70, 135, 215) !important;
border-radius: 2px;
box-shadow: 1px 1px 3px #1E1E1E;
background: #090909 !important;
}
button.DTTT_button:hover:not(.DTTT_disabled),
div.DTTT_button:hover:not(.DTTT_disabled),
a.DTTT_button:hover:not(.DTTT_disabled),
button.DTTT_button:hover,
div.DTTT_button:hover,
a.DTTT_button:hover {
position: relative;
display: inline-block;
margin-right: 3px;
padding: 5px 8px;
border: 1px solid #353535;
cursor: pointer;
font-size: 0.88em;
color: rgb(238, 95, 91) !important;
outline: none !important;
background-color: #353535 !important;
border-radius: 2px;
box-shadow: 1px 1px 3px #1E1E1E;
}
.table > thead:hover,
.table > thead:hover > tr > th,
.table > thead:hover > tr > td,
.table > thead:focus,
.table > thead:focus > tr > th,
.table > thead:focus > tr > td,
.table > thead:active,
.table > thead:active > tr > th,
.table > thead:active > tr > td {
color: #454545;
background-color: rgba(5, 175, 242, 0.52);
outline: none;
}
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
text-align: center;
border-top: 1px solid #494949;
color: #05AFF2;
}
.table > thead > tr > th {
vertical-align: bottom;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
.table > tbody + tbody {
border-top: 2px solid #333333;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}
.table-bordered {
border: 1px solid #333333;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #333333;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #272727;
}
.table-hover > tbody > tr:hover {
background-color: #333333;
}
table col[class*="col-"] {
position: static;
float: none;
display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
position: static;
float: none;
display: table-cell;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
background-color: rgba(5, 175, 242, 0.52);
}
.table > tbody > tr:hover,
.table > tfoot > tr:hover,
.table > tbody > tr:focus,
.table > tfoot> tr:focus > td {
color: yellow;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
color: #f8f8f8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
background-color: #4688d7;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
background-color: #317bd2;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
background-color: #1ed760;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
background-color: #1bc156;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
background-color: #ff0000;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
background-color: #e60000;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
background-color: #374850;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
background-color: #2d3a41;
}
.table-responsive {
overflow-x: auto;
min-height: 0.01%;
}
@media screen and (max-width:968px) {
.bootcards-table, .table .table-hover {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-color: #999;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #333333;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #333333;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
.table > tbody + tbody {
border-top: 2px solid #333333;
}
.table {
background-color: #1e1e1e;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}
.table-bordered {
border: 1px solid #333333;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #333333;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #454545;
color: #fff
}
.table-hover > tbody > tr:hover {
background-color: #333333;
}
table col[class*="col-"] {
position: static;
float: none;
display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
position: static;
float: none;
display: table-cell;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
background-color: #333333;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
background-color: #666;
color: #f8f8f8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
background-color: #4688d7;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
background-color: #317bd2;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
background-color: #1ed760;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
background-color: #1bc156;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
background-color: #ff0000;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
background-color: #e60000;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
background-color: #374850;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
background-color: #2d3a41;
}
.table-responsive {
overflow-x: auto;
min-height: 0.01%;
}
}
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #333333;
}
.table-responsive > .table {
margin-bottom: 0;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
.table-responsive > .table-bordered {
border: 0;
}
.table-responsive > .table-bordered > thead > tr > th:first-child,
.table-responsive > .table-bordered > tbody > tr > th:first-child,
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
.table-responsive > .table-bordered > thead > tr > td:first-child,
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.table-responsive > .table-bordered > thead > tr > th:last-child,
.table-responsive > .table-bordered > tbody > tr > th:last-child,
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
.table-responsive > .table-bordered > thead > tr > td:last-child,
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.table-responsive > .table-bordered > tbody > tr:last-child > th,
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}
/*----table region----*/
/*--Modal--*/
.modal .modal-dialog .modal-content,
.modal .form {
color: #808080;
background-color: rgb(55, 55, 55);
background-color: rgba(55, 55, 55, .35);
border-color: #686868;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
overflow: visible;
}
.modal-content {
color: #808080;
border-color: #686868;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
overflow: visible;
}
/*svg */
svg text {
font: 400 12px Arial;
fill: #fff;
}
/*-morris-*/
.morris-hover {
position: absolute;
z-index: 1000;
fill: #808080 color: #999;
stroke: #444;
stroke-opactiy: .25;
stroke-width: .25;
}
.morris-hover.morris-default-style {
border-radius: 10px;
padding: 6px;
color: #909090;
fill: #909090;
background: rgba(255, 255, 255, 0.8);
border: solid 2px rgba(230, 230, 230, 0.8);
font-family: sans-serif;
font-size: 12px;
text-align: center
}
.morris-hover.morris-default-style .morris-hover-row-label {
font-weight: bold;
margin: 0.25em 0;
color: #fff;
fill: #999
}
.morris-hover.morris-default-style .morris-hover-point {
white-space: nowrap;
margin: 0.1em 0
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: rgba(255, 255, 255, 0.15);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
a.label:hover,
a.label:focus {
color: #555;
text-decoration: none;
cursor: pointer;
}
.label:empty {
display: none;
}
.btn .label {
position: relative;
top: -1px;
}
.label-default {
background-color: #333333;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #1a1a1a;
}
.label-primary {
background-color: #ee5f5b;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #e9322d;
}
.label-success {
background-color: #4688d7;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #2a6ec0;
}
.label-info {
background-color: #1ed760;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #18aa4c;
}
.label-warning {
background-color: #ff0000;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #cc0000;
}
.label-danger {
background-color: #374850;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #222d32;
}
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #1e1e1e !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
-webkit-box-shadow: inset 0 0 12px 4px rgba(255, 255, 255, 0);
box-shadow: inset 0 0 12px 4px rgba(255, 255, 255, 0);
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: '!';
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown-header {
position: relative;
padding: 3px 12px;
border-bottom: 1px solid #45BBF6;
background: #1e1e1e;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.selectize-dropdown-header-close {
position: absolute;
right: 12px;
top: 50%;
color: #333333;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
color: #000000;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid rgba(0, 0, 0, 0.175);
border-top: 0 none;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button [data-value] {
position: relative;
padding-right: 24px !important;
}
.selectize-control.plugin-remove_button [data-value] .remove {
z-index: 1;
/* fixes ie bug (see #392) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 17px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 1px 0 0 0;
border-left: 1px solid rgba(0, 0, 0, .075);
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-control.plugin-remove_button [data-value] .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button [data-value].active .remove {
border-left-color: #017EBC;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
background: none;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
border-left-color: rgba(77, 77, 77, 0);
}
.selectize-control {
position: relative;
}
.selectize-dropdown,
.selectize-input,
.selectize-input input {
color: #333333;
font-family: inherit;
font-size: inherit;
line-height: 20px;
-webkit-font-smoothing: inherit;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active {
background: rgb(227, 95, 78);
cursor: text;
display: inline-block;
}
.selectize-input {
border: 1px solid #333333;
padding: 6px 12px;
display: inline-block;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.selectize-input.full {
background-color: rgba(53, 53, 53, 0.31);
}
.selectize-input.disabled,
.selectize-input.disabled * {
cursor: default !important;
}
.selectize-input.dropdown-active {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.selectize-input.dropdown-active::before {
content: ' ';
display: block;
position: absolute;
background: #333333;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-control.multi .selectize-input.has-items {
padding-left: 9px;
padding-right: 9px;
padding: 5px 12px 2px;
}
.selectize-control.multi .selectize-input > div {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.selectize-input > * {
vertical-align: baseline;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 1px 3px;
background: #454545;
color: #45BBF6;
border: 0 solid rgba(0, 0, 0, 0);
}
.selectize-control.multi .selectize-input > div.active {
background: #000000;
color: #017EBC;
border: 0 solid rgba(0, 0, 0, 0.15);
}
.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
color: #45BBF6;
background: #353535;
border: 0 solid rgba(77, 77, 77, 0);
}
.selectize-input > input {
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
-webkit-user-select: auto !important;
-moz-user-select: element !important;
-ms-user-select: element !important;
user-select: elements !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
display: none;
}
.selectize-input > input:focus {
outline: none !important;
}
.selectize-input::after {
content: ' ';
display: block;
clear: left;
}
.selectize-dropdown {
position: absolute;
z-index: 10;
border: 1px solid rgba(0, 0, 0, 0.175);
background: #333333;
margin: -1px 0 0 0;
border-top: 0 none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
border-color: #454545 !important;
}
.form-control input-sm {
border: 1px solid #383838;
background-color: #080808;
outline: none !important;
}
.selectize-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden;
border-color: #383838;
}
.selectize-dropdown [data-selectable] .highlight {
color: #353535;
background: #111;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
border-color: #383838;
}
.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
padding: 3px 12px;
border-color: #383838;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
color: #888;
background: #353535;
cursor: default;
font-size: 12px;
line-height: 1.42857143;
border-color: #383838;
}
.selectize-dropdown .active {
background-color: #333;
color: rgb(227, 95, 78);
border-color: #383838;
}
.selectize-dropdown .active.create {
color: #262626;
border-color: #383838;
}
.selectize-dropdown .create {
color: rgba(51, 51, 51, 0.5);
border-color: #383838;
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: 200px;
border-color: #383838;
}
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
cursor: pointer;
}
.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
cursor: text;
border-color: #383838;
}
.selectize-control.single .selectize-input:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: 17px;
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #333333 transparent transparent transparent;
}
#DataTables_Table_0_length > label > select.dropdown {
border-color: #383838;
}
.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: -4px;
border-width: 0 5px 5px 5px;
border-color: #383838;
;
}
.selectize-control.rtl.single .selectize-input:after {
left: 17px;
right: auto;
}
.selectize-control.rtl .selectize-input > input {
margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
opacity: 0.5;
background-color: #333333;
}
.selectize-dropdown,
.selectize-dropdown.form-control {
height: auto;
padding: 0;
margin: 2px 0 0 0;
z-index: 1000;
background: #333333;
border: 1px solid #353535;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.selectize-dropdown .optgroup:first-child:before {
display: none;
}
.selectize-dropdown .optgroup:before {
content: ' ';
display: block;
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: rgba(53, 53, 53, 0.31);
margin-left: -12px;
margin-right: -12px;
}
.selectize-input.focus {
border-color: #000000;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #000000;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 0, 0, 0.5);
background: #000000;
color: rgba(240, 52, 82, 1.00);
}
.has-error .selectize-input {
border-color: #45BBF6;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .selectize-input:focus {
border-color: #000000;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(0, 0, 0, 0.175);
}
.selectize-control:active > .form-control {
padding: 0;
color: orange;
background: blue;
height: auto;
border: none;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.0.2/rangeslider.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.0.2/rangeslider.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment