Я не знаю, почему моя переключаемая боковая панель не работает. Что-то не хватает в моем коде. Когда я нажимаю на кнопку меню, ничего не происходит. Предположительно, боковая панель рухнет, когда я нажму на переключатель меню, но ничего не работает. Надеюсь, есть кто-то с ответом. Это мой html.
<!doctype html>
<html class="no-js" lang="">
<head>
</head>
<body>
<!-- Left Panel -->
<aside id="left-panel" class="left-panel">
<nav class="navbar navbar-expand-sm navbar-default">
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="/home"><i class="menu-icon fa fa-laptop"></i>Dashboard</a>
</li>
<li class="menu-title">Human Resource</li><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-user-circle"></i>User Management</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-list"></i><a href="{{url('userlist')}}">Users List</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-id-badge"></i>Company Management</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-list"></i><a href="{{url('companylist')}}">Company List</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-id-badge"></i>Option</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-list"></i><a href="{{url('optioncontrol')}}">Option Control</a></li>
</ul>
</li>
<li class="menu-title">Worker Execution</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" area-expended="false">
<i class="menu-icon fa fa-users"></i>Execution Management</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-list"></i><a href="{{url('workerexecution')}}" target="_blank">Execution List</a></li>
<li><i class="menu-icon fa fa-list-ul"></i><a href="{{url('qccheck')}}">QC Check</a></li>
</ul>
</li>
<li class="menu-title">Inventory Management</li><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-briefcase"></i>Inventories</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-list-alt"></i><a href="{{url('inventorylist')}}">Inventories List</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-file-text-o"></i>Bill Of Material (BOM)</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-list-ul"></i><a href="{{url('bomlist')}}">BOM List</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-area-chart"></i>Line Management</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-sitemap"></i><a href="{{url('line')}}">Lines List</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-calendar"></i>Scheduler</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-calendar-check-o"></i><a href="{{url('scheduler')}}">Scheduler</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-calendar"></i>Leakage</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-calendar-check-o"></i><a href="{{url('leakpoin')}}">Leakage</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</aside>
<!-- /#left-panel -->
<!-- Right Panel -->
<div id="right-panel" class="right-panel">
<!-- Header-->
<header id="header" class="header">
<div class="top-left">
<div class="navbar-header">
<a class="navbar-brand" href="./">Line: {{Session::get('line')}} | Station: {{Session::get('station')}}</a>
<a class="navbar-brand hidden" href="./"><img src="{{asset('img/logo.jpg')}}" alt="Logo"></a>
<a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a>
</div>
</div>
<div class="top-right">
<div class="header-menu">
<div class="header-left">
<!-- <button class="search-trigger"><i class="fa fa-search"></i></button> -->
<div class="form-inline">
<form class="search-form">
<input class="form-control mr-sm-2" type="text" placeholder="Search ..." aria-label="Search">
<button class="search-close" type="submit"><i class="fa fa-close"></i></button>
</form>
</div>
<div class="dropdown for-notification">
<button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell"></i>
<span class="count bg-danger">3</span>
</button>
<div class="dropdown-menu" aria-labelledby="notification">
<p class="red">You have 3 Notification</p>
<a class="dropdown-item media" href="#">
<i class="fa fa-check"></i>
<p>100 Items Completed</p>
</a>
<a class="dropdown-item media" href="#">
<i class="fa fa-info"></i>
<p>50 Items Pending</p>
</a>
<a class="dropdown-item media" href="#">
<i class="fa fa-warning"></i>
<p>3 Items Failed</p>
</a>
</div>
</div>
</div>
<div class="user-area dropdown float-right">
<a href="#" class="dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="user-avatar rounded-circle" src="{{asset('img/admin.jpg')}}" alt="User Avatar">
</a>
<div class="user-menu dropdown-menu">
<a class="nav-link" href="/myprofile"><i class="fa fa- user"></i>My Profile </a>
<a class="nav-link" href="#"><i class="fa fa- user"></i>Notifications <span class="count">13</span></a>
<a class="nav-link" href="#"><i class="fa fa -cog"></i>Settings</a>
<a class="nav-link" href="{{url('logout')}}"><i class="fa fa-power -off"></i>Logout</a>
</div>
</div>
</div>
</div>
</header>
<div class="content">
@yield('content')
</div>
<!-- /#header -->
<!-- /#right-panel -->
</body>
</html>
Это мой js файл
$.noConflict();
jQuery(document).ready(function($) {
// Menu Trigger
$('#menuToggle').on('click', function(event) {
var windowWidth = $(window).width();
if (windowWidth<1010) {
$('body').removeClass('open');
if (windowWidth<760){
$('#left-panel').slideToggle();
} else {
$('#left-panel').toggleClass('open-menu');
}
} else {
$('body').toggleClass('open');
$('#left-panel').removeClass('open-menu');
}
});
$(".menu-item-has-children.dropdown").each(function() {
$(this).on('click', function() {
var $temp_text = $(this).children('.dropdown-toggle').html();
$(this).children('.sub-menu').prepend('<li class="subtitle">' + $temp_text + '</li>');
});
});
// Load Resize
$(window).on("load resize", function(event) {
var windowWidth = $(window).width();
if (windowWidth<1010) {
$('body').addClass('small-device');
} else {
$('body').removeClass('small-device');
}
});
});
Это мой css
/* Main Styles */
aside.left-panel {
background: #fff;
height: 100vh;
padding: 0;
vertical-align: top;
width: 280px;
-webkit-box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
position: fixed;
left: 0;
bottom: 0;
top: 55px;
z-index: 999; }
aside.left-panel:hover {
overflow-x: scroll; }
.open aside.left-panel:hover {
overflow-x: inherit; }
.small-device .right-panel {
margin-left: 83px; }
.navbar {
background: #fff;
border-radius: 0;
border: none;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: top; }
.navbar .main-menu {
float: left;
padding: 0;
padding-bottom: 50px; }
.navbar .menu-title {
color: #41434d;
clear: both;
display: block;
font-family: 'Open Sans';
font-size: 14px;
font-weight: 700;
line-height: 50px;
padding: 0;
text-transform: uppercase;
width: 100%; }
.navbar .navbar-nav {
float: none;
position: relative; }
.navbar .navbar-nav > li {
padding-left: 30px;
padding-right: 30px; }
.navbar .navbar-nav > li.active {
background: #fafafa; }
.navbar .navbar-nav li {
width: 100%; }
.navbar .navbar-nav li.active .menu-icon, .navbar .navbar-nav li:hover .toggle_nav_button:before,
.navbar .navbar-nav li .toggle_nav_button.nav-open:before {
color: #03a9f3; }
.navbar .navbar-nav li .dropdown-toggle:after {
display: none; }
.navbar .navbar-nav li > a {
background: none !important;
color: #607d8b;
display: inline-block;
font-size: 14px;
line-height: 26px;
padding: 10px 0;
position: relative;
width: 100%; }
.navbar .navbar-nav li > a:hover, .navbar .navbar-nav li > a:hover .menu-icon {
color: #03a9f3; }
.navbar .navbar-nav li > a .menu-icon {
color: #607d8b;
float: left;
margin-top: 8px;
width: 55px;
text-align: left;
z-index: 9; }
.navbar .navbar-nav li > a .menu-title-text {
font-size: 14px; }
.navbar .navbar-nav li > a .badge {
border-radius: 0;
font-weight: 600;
float: right;
margin: 6px 0 0 0;
padding: 0.4em 0.5em; }
.navbar .navbar-nav li.menu-item-has-children {
position: relative; }
.navbar .navbar-nav li.menu-item-has-children a {
line-height: 30px; }
.navbar .navbar-nav li.menu-item-has-children a:before {
content: "";
position: absolute;
top: 23px;
right: 0;
width: 8px;
height: 8px;
border-style: solid;
border-width: 1px;
border-color: #607d8b #607d8b transparent transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .25s ease;
transition: all .25s ease; }
.navbar .navbar-nav li.menu-item-has-children a:hover:before {
border-color: #03a9f3 #03a9f3 transparent transparent; }
.navbar .navbar-nav li.menu-item-has-children .sub-menu {
background: #fff;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
overflow-y: hidden;
padding: 0 0 0 35px; }
.navbar .navbar-nav li.menu-item-has-children .sub-menu li {
position: relative; }
.navbar .navbar-nav li.menu-item-has-children .sub-menu i {
color: #c8c9ce;
float: left;
padding: 0;
position: absolute;
left: 0;
font-size: 14px;
top: 9px; }
.navbar .navbar-nav li.menu-item-has-children .sub-menu a {
padding: 2px 0 2px 30px; }
.navbar .navbar-nav li.menu-item-has-children .sub-menu a:before {
content: '';
display: none; }
.navbar .navbar-nav li.menu-item-has-children .sub-menu a .menu-icon {
top: 13px;
text-align: left;
width: 25px; }
.navbar .navbar-nav li.menu-item-has-children.show a:before {
border-color: transparent #607d8b #607d8b transparent;
top: 20px;
right: -5px; }
.navbar .navbar-nav li.menu-item-has-children.show a:hover:before {
border-color: transparent #03a9f3 #03a9f3 transparent; }
.navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
max-height: 1000px;
opacity: 1;
position: static !important; }
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:focus,
.navbar .navbar-nav > .active > a:hover {
color: #03a9f3; }
.navbar-nav li span.count {
background: #a9d86e;
border-radius: 50%;
color: #fff;
font-family: 'Open Sans';
font-size: 9px;
font-weight: 700;
float: right;
height: 20px;
width: 20px;
line-height: 20px;
margin-right: 15px;
text-align: center; }
.open .navbar .navbar-brand.hidden {
display: block; }
.open .sub-menu .subtitle {
display: block;
font-size: 15px;
line-height: 35px;
color: #607d8b;
border-bottom: 1px solid rgba(96, 125, 139, 0.15); }
.open .sub-menu i {
left: 15px !important; }
.sub-menu .subtitle {
display: none; }
.sub-menu .subtitle > .menu-icon {
display: none; }
.open aside.left-panel {
max-width: 83px;
width: 83px; }
.open aside.left-panel .navbar .navbar-header {
padding: 0; }
.open aside.left-panel .navbar .navbar-brand {
display: none; }
.open aside.left-panel .navbar .navbar-brand.hidden {
display: block !important;
text-align: center;
width: 100%; }
.open aside.left-panel .navbar .navbar-brand.hidden img {
max-width: 100%;
margin: 0 auto; }
.open aside.left-panel .navbar .navbar-brand.d-md-none {
display: block !important;
margin: 13px 0 0;
min-height: 67px;
padding: 0;
text-align: center; }
.open aside.left-panel .navbar .navbar-nav:before {
display: none !important; }
.open aside.left-panel .navbar .navbar-nav li {
position: relative;
padding: 0 15px; }
.open aside.left-panel .navbar .navbar-nav li a {
font-size: 0;
z-index: 0;
-webkit-transition: none;
transition: none; }
.open aside.left-panel .navbar .navbar-nav li a .menu-icon {
font-size: 20px;
z-index: -1;
text-align: center;
width: inherit; }
.open aside.left-panel .navbar .navbar-nav li a .menu-title-text {
font-size: 0; }
.open aside.left-panel .navbar .navbar-nav li a .badge {
display: none; }
.open aside.left-panel .navbar .navbar-nav li > a {
max-width: 60px;
padding-left: 0; }
.open aside.left-panel .navbar .navbar-nav li.menu-item-has-children {
overflow: hidden; }
.open aside.left-panel .navbar .navbar-nav li.menu-item-has-children ul {
padding-left: 0; }
.open aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu {
display: block;
left: 83px;
top: 0; }
.open aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu li a {
display: block;
font-size: 14px;
max-width: inherit;
padding: 2px 15px 2px 25px;
width: 100%; }
.open aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu li a .menu-icon {
text-align: center; }
.open aside.left-panel .navbar .navbar-nav li.menu-item-has-children.show {
overflow: visible; }
.open aside.left-panel .navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
position: absolute !important;
width: 180px;
-webkit-box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08); }
.open aside.left-panel .navbar .navbar-nav li span.count {
display: none;
margin-right: 5px;
z-index: 1; }
.open aside.left-panel .navbar .navbar-nav li.active a:after {
content: '';
display: none; }
.open aside.left-panel .navbar .navbar-nav .menu-title {
font-size: 0;
line-height: 0;
opacity: 0;
padding: 0; }
.open aside.left-panel .menutoggle {
background-color: #dc3545;
color: #fff !important;
right: -20px;
text-align: center; }
/* Right panel */
.right-panel {
background: #f1f2f7;
margin-left: 280px;
margin-top: 55px; }
.right-panel .top-left {
width: 350px;
float: left; }
.right-panel .top-rigth {
float: left; }
.right-panel .breadcrumbs {
float: left;
margin-top: 30px;
padding: 0 1.875em;
width: 100%; }
.right-panel .breadcrumbs .breadcrumbs-inner {
background-color: #fff; }
.right-panel .breadcrumbs .col-lg-8 .page-header {
float: left; }
.right-panel .page-header {
min-height: 50px;
margin: 0px;
padding: 0px 15px;
background: #ffffff;
border-bottom: 0px; }
.right-panel .page-header h1 {
font-size: 18px;
padding: 15px 0; }
.right-panel .page-header .breadcrumb {
margin: 0px;
padding: 13.5px 0;
background: #fff;
text-transform: capitalize; }
.right-panel .page-header .breadcrumb > li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0"; }
.right-panel header.header {
background: #fff;
border-bottom: 1px solid #e8e9ed;
-webkit-box-shadow: none;
box-shadow: none;
clear: both;
padding: 0 30px;
height: 55px;
position: fixed;
left: 280px;
left: 0;
right: 0;
top: 0;
z-index: 999; }
.right-panel .navbar-brand {
width: 250px;
display: inline-block; }
.right-panel .menutoggle {
padding-top: 7px; }
.right-panel .navbar-header {
width: 100%;
background-color: #fff;
padding: 0 1.25em 0 0; }
.right-panel .navbar-header > a {
display: inline-block; }
.right-panel .navbar-brand {
line-height: 42px; }
.right-panel .navbar-brand img {
max-width: 145px; }
.right-panel .navbar-brand.hidden {
display: none; }
.open .right-panel {
margin-left: 83px; }
.open .let-panel {
z-index: 999; }
header.fixed-top {
background: #fff;
padding: 20px; }
.menutoggle {
background-color: transparent;
color: #99abb4 !important;
cursor: pointer;
font-size: 1em;
height: 40px;
line-height: 40px;
width: 40px;
display: block;
text-align: right; }
/* Tabs */
.nav-tabs a.active {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent; }
.nav-tabs .dropdown .dropdown-menu {
top: 100% !important; }
.custom-tab .nav-tabs > a.active,
.custom-tab .nav-tabs > .active > a:focus,
.custom-tab .nav-tabs > li.active > a:hover {
border-color: transparent transparent;
color: #ff2e44;
position: relative; }
.custom-tab .nav-tabs > a.active:after,
.custom-tab .nav-tabs > li.active > a:focus:after,
.custom-tab .nav-tabs > li.active > a:hover:after {
background: #ff2e44;
bottom: -1px;
content: "";
height: 2px;
left: 0;
position: absolute;
right: 0;
width: 100%;
z-index: 999; }
@media (max-width: 1024px) {
.open aside.left-panel {
width: 280px;
max-width: 280px; }
aside.left-panel:hover {
overflow-x: inherit; }
aside.left-panel.open-menu {
overflow-x: scroll; }
aside.left-panel {
max-width: 83px;
width: 83px; }
aside.left-panel .navbar .navbar-header {
padding: 0; }
aside.left-panel .navbar .navbar-brand {
display: none; }
aside.left-panel .navbar .navbar-brand.hidden {
padding: 0 0 10px;
text-align: center;
width: 100%; }
aside.left-panel .navbar .navbar-brand.hidden img {
max-width: 100%;
margin: 0 auto; }
aside.left-panel .navbar .navbar-brand.d-md-none {
margin: 13px 0 0;
min-height: 67px;
padding: 0;
text-align: center; }
aside.left-panel .navbar .navbar-nav:before {
display: none !important; }
aside.left-panel .navbar .navbar-nav li {
position: relative; }
aside.left-panel .navbar .navbar-nav li a {
font-size: 0;
z-index: 0;
-webkit-transition: none;
transition: none; }
aside.left-panel .navbar .navbar-nav li a .menu-icon {
font-size: 20px;
z-index: -1;
text-align: center;
width: inherit; }
aside.left-panel .navbar .navbar-nav li a .menu-title-text {
font-size: 0; }
aside.left-panel .navbar .navbar-nav li a .badge {
display: none; }
aside.left-panel .navbar .navbar-nav li > a {
max-width: 60px;
padding-left: 0; }
aside.left-panel .navbar .navbar-nav li.menu-item-has-children {
overflow: hidden; }
aside.left-panel .navbar .navbar-nav li.menu-item-has-children a:before {
content: '';
display: none; }
aside.left-panel .navbar .navbar-nav li.menu-item-has-children ul {
padding-left: 0; }
aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu {
display: block;
left: inherit;
right: -160px;
top: 0; }
aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu li a {
display: block;
font-size: 14px;
max-width: inherit;
padding: 2px 15px 2px 35px;
width: 100%; }
aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu li a .menu-icon {
text-align: center; }
aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu i {
left: 10px; }
aside.left-panel .navbar .navbar-nav li.menu-item-has-children.show {
overflow: visible; }
aside.left-panel .navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
position: absolute !important; }
aside.left-panel .navbar .navbar-nav li span.count {
display: none;
margin-right: 5px;
z-index: 1; }
aside.left-panel .navbar .navbar-nav li.active a:after {
content: '';
display: none; }
aside.left-panel .navbar .navbar-nav .menu-title {
font-size: 0;
line-height: 0;
opacity: 0;
padding: 0; }
aside.left-panel .menutoggle {
display: none; }
aside.left-panel.open-menu {
max-width: 280px;
width: 280px; }
aside.left-panel.open-menu .navbar .navbar-nav li > a {
width: 100%;
max-width: 100%;
font-size: 14px; }
aside.left-panel.open-menu .navbar .navbar-nav li > a .menu-icon {
width: 55px;
font-size: inherit;
text-align: left; }
aside.left-panel.open-menu .navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
position: static !important;
margin-left: 45px; }
aside.left-panel.open-menu .navbar .navbar-nav .menu-title {
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
line-height: 50px;
opacity: 1; }
.navbar .main-menu {
padding: 50px; }
}
@media (max-width: 768px) {
.navbar {
height: 100vh; }
.navbar .navbar-nav li.menu-item-has-children > a:before {
display: block !important; }
.navbar .main-menu {
float: none;
padding-bottom: 70px; }
.left-panel {
display: none; }
aside.left-panel {
overflow: scroll; }
.right-panel header.header {
height: 62px; }
.right-panel .top-left, .right-panel .top-right {
width: 100%;
float: none;
background: white; }
.right-panel .menutoggle {
float: right; }
.right-panel .navbar-header {
padding: 0; }
.right-panel header.header {
position: static; }
.right-panel header.header .top-left {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0 30px;
z-index: 999;
border-bottom: 1px solid #dcdcdc; }
.right-panel header.header .top-right {
padding: 0 30px; }
.small-device .right-panel {
margin-left: 0; }
#left-panel {
max-width: 100%;
width: 100%; }
#left-panel .navbar .navbar-nav li > a {
max-width: inherit;
font-size: 14px; }
#left-panel .navbar .navbar-nav li > a .menu-icon {
width: 55px;
text-align: left;
font-size: 14px; }
#left-panel .navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
position: static !important;
padding-left: 50px; }
.orders {
overflow: hidden; }
.order-table .avatar, .order-table .serial {
display: none; } }
@media (max-width: 575px) {
#left-panel .navbar {
display: inherit; }
#left-panel .navbar .main-menu {
display: inherit; }
#left-panel .navbar .sub-menu.children {
display: none; }
#left-panel .navbar .sub-menu.children.show {
display: block; }
.right-panel .navbar-brand {
width: 220px;
padding-bottom: 5px; }
.right-panel .menutoggle {
width: 20px; } }
#cellPaiChart {
height: 160px; }
#cellPaiChart .pieLabel {
top: 50px !important; }
#cellPaiChart .pieLabel div {
font-size: 16px !important; }
#cellPaiChart #pieLabel1 {
left: 20px !important; }
#cellPaiChart #pieLabel0 {
left: inherit !important;
right: 20px !important; }
.modal-backdrop {
background-color: grey;
opacity: 0.8;
}
/*# sourceMappingURL=style.css.map */