:root {
  --sidebar-width: 4.5rem;
}

/*
NOTE  NOTE  NOTE  NOTE  NOTE  NOTE  NOTE  

DO NOT TRY TO OVERRIDE BOOTSTRAP HERE 
IF YOU NEED TO EDIT STYLES, CREATE NEW CSS
ONE FOR EACH FUNCTION YOU NEED TO OVERRIDE
AS OTHERWISE IT WOULD BE A PAIN TO UPDATE
BOOTSTRAP AND UNDERSTAND WHY IT DOESN'T WORK

NOTE  NOTE  NOTE  NOTE  NOTE  NOTE  NOTE  
*/

/* // Media queries breakpoints */
/* // -------------------------------------------------- */

/* // Extra small screen / phone */
/* @screen-xsmall:              480px; */
/* @screen-phone:               @screen-xsmall; */

/* // Small screen / tablet */
/* @screen-small:               768px; */
/* @screen-tablet:              @screen-small; */

/* // Medium screen / desktop */
/* @screen-medium:              992px; */
/* @screen-desktop:             @screen-medium; */

/* // Large screen / wide desktop */
/* @screen-large:               1200px; */
/* @screen-large-desktop:       @screen-large; */

/* // So media queries don't overlap when required, provide a maximum */
/* @screen-small-max:           (@screen-medium - 1); */
/* @screen-tablet-max:          (@screen-desktop - 1); */
/* @screen-desktop-max:         (@screen-large-desktop - 1); */

/* // Grid system */
/* // -------------------------------------------------- */

/* // Number of columns in the grid system */
/* @grid-columns:              12; */
/* // Padding, to be divided by two and applied to the left and right of all columns */
/* @grid-gutter-width:         30px; */
/* // Point at which the navbar stops collapsing */
/* @grid-float-breakpoint:     @screen-tablet; */

/* body { */
/*   padding-top: 0px; */
/*   padding-bottom: 20px; */
/* } */

/* .logo-brand { */
/*   width: 103px; */
/*   height: 50px; */
/* } */

/* /\* Custom container *\/ */
/* .container-narrow { */
/*   margin-left: 20px; */
/*   margin-right: 20px; */
/*   /\* max-width: 1024px; *\/ */
/* } */

/* /\* Smaller table row padding *\/ */
/* .table th, .table td { */
/*   padding: 6px; */
/* } */

/* /\* Smaller and smaller table row padding *\/ */
/* .table-smaller tbody tr td { */
/*   padding: 2px; */
/* } */

/* /\* useful in dropdowns *\/ */
/* .scrollable-menu { */
/*   height: auto; */
/*   max-height: 30em; */
/*   overflow-x: hidden; */
/* } */

/* /\* Custom container *\/ */
/* .progress { */
/*   margin-bottom: 0px; */
/* } */
/* .container-narrow > hr { */
/*   margin: 30px 0; */
/* } */

/* /\* Main marketing message and sign up button *\/ */
/* .jumbotron { */
/*   margin: 20px 0; */
/*   text-align: center; */
/* } */
/* .jumbotron h1 { */
/*   font-size: 22px; */
/*   line-height: 1; */
/* } */
/* .jumbotron .btn { */
/*   font-size: 21px; */
/*   padding: 14px 24px; */
/* } */

/* /\* Supporting marketing content *\/ */
/* .marketing { */
/*   margin: 20px 0; */
/* } */
/* .marketing p + h4 { */
/*   margin-top: 28px; */
/* } */

/* .table th.text-right, */
/* .table td.text-right { */
/*   text-align: right; */
/* } */

/* .navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;} */
/* .navbar {min-height:42px !important} */
/* .nav-pills {min-height:42px !important} */

/* /\* Fix for Google Maps and Twitter Bootstrap */
/* https://github.com/twbs/bootstrap/issues/1552 */
/* *\/ */
/* img { */
/*   max-width: none; */
/* } */

/* /\*Custom tooltip dimension*\/ */
/* .tooltip-inner { */
/*   max-width: 350px; */
/* } */

/* /\*Flow dropdown resize*\/ */
/* #flow_dropdown { */
/*   min-width: 110px; */
/* } */

/* /\*Host dropdown resize*\/ */
/* #host_dropdown { */
/* min-width: 100px; */
/* } */

/* /\*Footer sticky*\/ */
/* #footer { */
/*   /\*position: absolute;*\/ */
/*   /\*bottom: 10px;*\/ */
/*   width: 100%; */
/*   /\* Set the fixed height of the footer here *\/ */
/*   height: 120px; */
/*   /\*background-color: #f5f5f5;*\/ */
/* } */

/* /\* For shaper id selection, should also inherit from form-control *\/ */
/* .shaper-selector { */
/*   width: 11em; */
/*   margin: 0 auto; */
/* } */

/* /\* Pool name selector *\/ */
/* .pool-selector { */
/*   margin-right: 1em; */
/*   width: 23em; */
/*   margin-left: 1em; */
/* } */

/* .well-wizard { */
/*   background: rgb(249, 249, 249); */
/* } */

/* nav-wizard a:active, a:focus { */
/*   outline:0; */
/*   border:none; */
/*   -moz-outline-style: none; */
/* } */

/* .text-middle, .table > tbody > tr > td.text-middle { */
/*   vertical-align: middle; */
/* } */

/* /\*Hide numeric input box spinners for 'no-spinner' class *\/ */
/* input.no-spinner[type=number]::-webkit-inner-spin-button, */
/* input.no-spinner[type=number]::-webkit-outer-spin-button { */
/*   -moz-appearance: none; */
/*   -webkit-appearance: none; */
/*   appearance: none; */
/*   margin: 0; */
/* } */
/* input.no-spinner[type=number] { */
/*   -moz-appearance:textfield; */
/* } */

.masthead > .nav > .nav-item {
  margin-left: 3px;
  margin-right: 3px;
}

/* sprobe ****************************** */

.circle {
  border-radius: 50%/50%;
  width: 9px;
  height: 9px;
  margin-right: 5px;
}

.node circle {
  cursor: pointer;
  stroke-width: 1.5px;
}

.node text {
  font-size: 11px;
}

.report-icon {
  font-size: 18px;
}

path.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

/* ****************************** */

/* /\* http://stackoverflow.com/questions/13516534/how-to-avoid-page-break-inside-table-row-for-wkhtmltopdf *\/ */
/* table, tr, td, th, tbody, thead, tfoot { */
/*     page-break-inside: avoid !important; */
/* } */

/* .badge-error { */
/*   background-color: #b94a48; */
/* } */
/* .badge-error:hover { */
/*   background-color: #953b39; */
/* } */
/* .badge-warning { */
/*   background-color: #f89406; */
/* } */
/* .badge-warning:hover { */
/*   background-color: #c67605; */
/* } */
/* .badge-success { */
/*   background-color: #468847; */
/* } */
/* .badge-success:hover { */
/*   background-color: #356635; */
/* } */
/* .badge-info { */
/*   background-color: #3a87ad; */
/* } */
/* .badge-info:hover { */
/*   background-color: #2d6987; */
/* } */
/* .badge-inverse { */
/*   background-color: #333333; */
/* } */
/* .badge-inverse:hover { */
/*   background-color: #1a1a1a; */
/* } */
/* .badge-top-right { */
/*   position: relative; */
/*   top: -8px; */
/*   right: 2px; */
/* } */
/* .menu-item { */
/*   border: 1px solid #ddd !important; */
/* } */

/* tr.quotas > td { */
/*   padding: 0px; */
/* } */

/* .overall_quota { */
/*   width: 400px; */
/*   text-align: left; */
/*   margin-left: 1px; */
/* } */

/* .overall_quota label.btn { */
/*   width: 55px; */
/* } */

/* .table-borderless tbody tr td, */
/* .table-borderless tbody tr th, */
/* .table-borderless thead tr th, */
/* .table-borderless thead tr td, */
/* .table-borderless tfoot tr th, */
/* .table-borderless tfoot tr td { */
/*     border: none; */
/* } */

/* /\* Avoids popup data-original-title flickering *\/ */
/* .fade { */
/*    opacity: 0; */
/*    -webkit-transition: opacity 0s linear; */
/*       -moz-transition: opacity 0s linear; */
/*        -ms-transition: opacity 0s linear; */
/*         -o-transition: opacity 0s linear; */
/*            transition: opacity 0s linear; */
/*  } */

/* .local-ip-selector input { */
/*   width: 5em; */
/*   display: inline-block; */
/*   text-align: right; */
/* } */

/* .local-ip-selector select { */
/*   width: 7em; */
/*   display: inline-block; */
/* } */

/* .local-ip-selector { */
/*   min-width: 22em; */
/*   text-align: right; */
/* } */

/* /\* Fix icons width in header *\/ */
/* .masthead > ul.nav > li > ul > li > a > i { */
/*   width: 15px; */
/*   text-align: center; */
/*   margin-right: 2px; */
/* } */

/* .list-group > a.disabled { */
/*   color: #999999; */
/* } */
/* .list-group > a.disabled:hover, */
/* .list-group > a.disabled:focus { */
/*   color: #999999; */
/*   text-decoration: none; */
/*   background-color: transparent; */
/*   cursor: not-allowed; */
/* } */

.line-dashed .nv-line {
  stroke-dasharray: 5, 5;
}

.chart-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
}

/* .timeseries-dropdown { */
/*   padding-left: 5px; */
/*   padding-right: 10px; */
/*   min-width: 7em; */
/* } */

/* #chart1-flows td:last-child a:not(:first-child) { */
/*   margin-left: 5px; */
/* } */

/* NOTE: this is commented to avoid highliting overlapping line issues due to
 * curves interpolation. */
#historical-tab-chart .nv-area-stroke-hint {
  animation-name: line-stroke-appear;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}

@keyframes line-stroke-appear {
  from {
    stroke-opacity: 0;
    stroke-width: 0;
  }
  to {
    stroke-opacity: 1;
    stroke-width: 1.2;
  }
}

.line-animated .nv-line {
  animation-name: line-appear;
  animation-delay: 0.25s;
  animation-duration: 1.25s;
  animation-fill-mode: backwards;
}

@keyframes line-appear {
  from {
    -webkit-clip-path: polygon(
      0px -1000px,
      0px -1000px,
      0px 1000px,
      0px 1000px
    );
  }
  to {
    -webkit-clip-path: polygon(
      0px -1000px,
      100% -1000px,
      100% 1000px,
      0px 1000px
    );
  }
}

/* .zoom-reset { */
/*   margin-right: 8px; */
/*   font-size: 0.75em; */
/* } */

/* .zoom-reset:hover, .zoom-reset:focus { */
/*   outline:0 !important; */
/* } */

/* .chart-action-buttons button:not(:first-child) { */
/*   margin-left: 5px; */
/* } */

/* .chart-action-buttons button { */
/*   /\* margin-top: 2px; *\/ */
/* } */

.ntop-progress-stacked {
  width: 400px;
}

.ntop-progress-stacked-legend {
  margin-top: 4px;
}

.ntop-progress-stacked-legend > span > span:last-child {
  margin-left: 3px;
}

.ntop-progress-stacked-legend > span:not(:first-child) {
  margin-left: 20px;
}

.form-inline {
  display: inline;
}

/* /\* ntop fix: Keep old behaviour after commit https://github.com/twbs/bootstrap/commit/a15c24410be8b94671dcfc3b154e0034a3aaf35f *\/ */
/* .form-inline .input-group .input-group-addon { */
/*   width: 1% !important; */
/* } */

/* /\* Hide second axis completely *\/ */
/* /\* #historical-tab-chart .nv-y2 { *\/ */

/* /\* Hide second axis lines *\/ */
/* #historical-tab-chart .nv-y2 .tick line { */
/*   display: none; */
/* } */

/* #chart1-flows table { */
/*   margin-top: 10px; */
/*   font-size: 14px; */
/* } */

/* .typeahead-dropdown-right .dropdown-menu { */
/*   left: auto !important; */
/*   right: 0; */
/* } */

/* .dialog-body-full-height { */
/*   padding: 15px; */
/*   padding-bottom: 0; */
/* } */

/* .label-empty { */
/*   background-color: #EFEFEF !important; */
/* } */

/* CSS for eBPF process charts */
.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.link.proc2host {
  stroke-dasharray: 0, 2 1;
}

.ebpf_circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

.ebpf_text {
  font: 10px sans-serif;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

.drilldown-icon {
  font-size: 16px;
}

/* Fix for fa-share blocked by adblock */
.fa-topology-alt:before {
  content: "\f1e0";
}

/* end of CSS for EBPF charts */

.mt-6 {
  margin-top: 6rem !important;
}

.navbar-shadow {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.01), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.table td,
.table th {
  padding: 0.45rem !important;
}

.traffic-report-table {
  height: auto !important;
}

.filter-scripts-button {
  padding: 0;
  background: none;
  border: none;
  color: #007bff;
  padding: .5rem 1rem;
}

.filter-scripts-button.active {
  color: #ffffff;
  background-color: #007bff;
  border-radius: 0.5rem;
}

.filter-scripts-button.active:hover {
  background-color: #007bff;
  color: #ffffff;
}

.filter-scripts-button:hover {
  color: #0050a5;
  background: none;
}

.square-btn {
  width: 2rem;
  height: 2rem;
}

.scrollable-dropdown {
  max-height: 20rem;
  height: auto;
  overflow-y: auto;
}

.dark-gray {
  color:#363943;
}

.ntop-color {
  color: #ff7500;
}

/* increase switches size */
.custom-control-label-lg {
  transform: scale(1.5);
}


/* New Sidebar and container */

#wrapper {
  height: 100vh;
  max-height: 100vh;
  overflow-y: hidden;
}

#n-sidebar #sidebar li {
  position: relative;
}

#n-sidebar.bg-light #sidebar li:hover {
  background-color: #dedede;
}

#n-container {
  margin-left: 13.5rem;
  height: calc(100% - 56px);
  overflow-y: auto;
  max-height: fit-content;
}

#n-sidebar {
  position: fixed;
  width: var(--sidebar-width);
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  color: white;
  transition: width .5s;
  z-index: 1050;
  box-shadow: 0px 0px 6px #2f2f2f52;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.nav-side {
  padding: 0;
  list-style: none;
}

#n-sidebar.active {
  width: 13.5rem;
}


#n-sidebar .sidebar-info, 
#n-sidebar.active .sidebar-info {
  background-color: #ececec;
  color: #363943;
  position: fixed;
  bottom: 0;
  width: inherit;
  padding: 1rem;
  text-align: center;
}

#n-sidebar .sidebar-info a {
  background-color: #ececec;
  color: #363943;
  text-decoration: none;
}

#collapse-sidebar {
  position: relative;
}

#collapse-sidebar span{
  position: absolute;
  margin-left: 0.5rem;
  color: #363943;
}

/** Dark theme for sidebar **/

#n-sidebar.bg-dark .sidebar-info {
  background-color: #353535;
  color: #e2e2e2;
}
#n-sidebar.bg-dark .sidebar-info a {
  background-color: #353535;
  color: #e2e2e2;
  text-decoration: none;
}

#n-sidebar.bg-dark {
  background-color: #1f1f1f !important;
  color: #e2e2e2;
}

#n-sidebar.bg-dark #toggle-theme {
  color: #ccc;
}

#n-sidebar.active.bg-dark .sidebar-info {
  color: #e2e2e2 !important;
}

#n-sidebar.bg-dark ul>li.nav-item div.collapse,
#n-sidebar.bg-dark ul>li.nav-item div.collapsing {
  background-color: #353535;
  color: #e2e2e2;
}

#n-sidebar.bg-dark .dropdown-divider {
  border-top: 1px solid #1f1f1f;
}

#n-sidebar.bg-dark ul>li.nav-item div.collapse>ul li>a:hover,
#n-sidebar.bg-dark ul>li.nav-item div.collapsing>ul li>a:hover {
  background-color: #272727;
}

#n-sidebar.bg-dark li,
#n-sidebar.bg-dark ul>li.nav-item>a,
#n-sidebar.bg-dark ul>li.nav-item div.collapse>ul li>a,
#n-sidebar.bg-dark ul>li.nav-item div.collapsing>ul li>a {
  color: #e2e2e2;
}

#n-sidebar.bg-dark li:hover, #n-sidebar.bg-dark ul>li.nav-item>a:hover
{
  background-color: #353535;
}
#n-sidebar.bg-dark ul>li.nav-item>a:focus {
  background-color: #1f1f1f;
}

#n-sidebar.bg-dark ul>li.nav-item>a[aria-expanded="true"] {
  background-color: #353535 !important;
}

#n-sidebar.bg-dark.active #sidebar li::after {
  display: none;
}

#n-sidebar.bg-dark #sidebar li::after {
  background-color: #42424236; 
  content: '';
  display: block;
  height: 1px;
  width: 3rem;
  right: calc(50% - 1.5rem);
  position: absolute;
}

#n-sidebar.bg-dark #sidebar li:last-child::after {
  display: none;
}

/** end dark theme **/

#n-sidebar .dropdown-divider {
  border-top: 1px solid #c5c5c5;
}

#n-sidebar h3.muted {
  padding: 0.1rem 0.5rem;
  margin-bottom: 2px; 
  position: relative;
}

#n-sidebar h3.muted div>a, #n-sidebar h3.muted div>button {
  display: inline-block;
}
#n-sidebar.bg-dark button[data-toggle='sidebar']>i {
  color: white;
}

#n-sidebar.active ul {
  width: 100%;
}

#n-sidebar.active ul li {
  width: 100%;
  text-align: left;
}
#n-sidebar ul li {
  width: 100%;
  text-align: center;
}

#n-sidebar.active ul li span.title {
  display: inline-block;
  font-size: 1rem;
}

#n-sidebar ul li span.title {
  font-size: 0.75rem;
  display: block;
}

#n-sidebar.bg-light ul>li.nav-item div.collapse>ul li>a:hover,
#n-sidebar.bg-light ul>li.nav-item div.collapsing>ul li>a:hover {
  background-color: #dedede;
}

#n-sidebar ul>li.nav-item>a {
  display: block;
  padding: 0.8rem 0rem;
  text-decoration: none; 
  transition: background 0.5s;
  color:#363943;
  white-space: nowrap;
  font-size: 0.75rem;
}
#n-sidebar ul>li.nav-item>a>span {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1rem;
}

#n-sidebar.active ul>li.nav-item>a {
  padding: 0.8rem;
  font-size: 1rem;
}
#n-sidebar.active ul>li.nav-item>a>span {
  display: inline;
  font-size: 1rem;
}

#n-sidebar.active .submenu::after {
  display: inline-block;
  margin-left: auto;
  margin-right: 0px;  
  vertical-align: .260em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

#n-sidebar.active .sidebar-info {
  display: block;
  text-align: left;
}


#n-sidebar ul>li.nav-item a.active {
  color: #ffffff;
  background-color: #ff7500;
  border-radius: 0;
}

#n-sidebar ul>li.nav-item div.collapse, #n-sidebar ul>li.nav-item div.collapsing {
  background-color:rgb(237, 237, 237);
  color:rgb(56, 59, 69);
  min-height: 40px;
}

#n-sidebar ul>li.nav-item div.collapse>ul li>a.active,
#n-sidebar ul>li.nav-item div.collapsing>ul li>a.active {
  background-color: #f57f17
}

#n-sidebar ul>li.nav-item div.collapse>ul li>a, #n-sidebar ul>li.nav-item div.collapsing>ul li>a {
  padding: 0.5rem;
  transition: all 0.5s;
  display: block;
  font-size: 0.95rem;
  color:#363943;
  text-decoration: none;
}

#n-container.extended {
	margin-left: var(--sidebar-width);
}

#ntop-logo {
  height: 3.2rem;
  width: 100%;
}
#ntop-logo>svg {
  width: 100%;
  height: 2.5rem;
  margin-top: 6px;
}

.squared-logo {
  display: none;
}

.side-collapse {
  animation: none;
  transition: none;
  left: var(--sidebar-width);
  z-index: 1050;
  width: 16rem;
  top: 0;
  position: absolute;
  overflow-y: auto;
  box-shadow:rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
} 

.side-collapse a {
  text-align: left;
}
.info-stats div.down {
  margin-top: -.55rem;
}
.info-stats a {
  color:rgb(56, 59, 69);
  text-decoration: none;
}

#network-load {
  display: contents;
}
#network-load div.d-flex a {
  margin: 0 0.1em;
}

.w-10 {
  max-width: 12rem;
}


#n-navbar {
  left: 13.5rem;
  z-index: 1020;
  transition: 0.5s left;
  box-shadow: 8px 1px 3px rgba(0,0,0,0.10), 2px 1px 2px rgba(0,0,0,0.15);
}

#n-navbar.extended {
  left: var(--sidebar-width);
}

/* scrollbar theme */
::-webkit-scrollbar {
  width: 6px;
  height: 4px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #f67504;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f5811b; /* orange */
}
::-webkit-scrollbar-thumb:active {
  background: #ea6f02;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.no-scroll {
  overflow-y: hidden;
}

@media (min-width: 480px) and (max-width: 800px) {
  #n-container {
    padding-top: 16rem !important;
  }
}
@media (min-width: 800px) and (max-width: 992px) {
  #n-container {
    padding-top: 12rem !important;
  }
}
@media (min-width: 992px) and (max-width: 1500px) {
  #n-container {
    padding-top: 2rem !important;
  }
}


@media (min-width: 320px) and (max-width: 480px) {

  #n-sidebar.bg-dark #sidebar li::after {
    display: none;
  }

  #n-sidebar.active .submenu::after {
    display: none;
  }

  #n-navbar {
    left: 0rem;
  }
  
  #n-navbar.extended {
    left: 0rem;
    z-index: 0;
  }

  #n-container { 
    margin-left: 0;
    padding: 0rem 0.2rem;
    padding-top: 14rem !important;

  }
  #n-container.extended { margin-left: 0; }

  #n-sidebar.active { width: 0; }
  #n-sidebar { 
    height: 100vh;
    width: 100%;
  }

  #n-sidebar > h3.muted {
    display: none;
  }

  #n-sidebar > ul.nav.flex-column {
    width: 100%;
  }

  button[data-toggle='sidebar'] {
    font-size: 1.4rem;
  }

  #n-sidebar ul li {
    width: 100%;
    font-size: 1.05rem;
    text-align: left;
    transition: background 0.5s;
  }

  #n-sidebar ul li:hover>a, #n-sidebar ul li:active>a {
    background: none;
  }
  #n-sidebar ul li:hover, #n-sidebar ul li:active {
    background-color: rgb(216, 216, 216);
  }
  #n-sidebar.bg-dark ul li:hover, #n-sidebar.bg-dark ul li:active,
  #n-sidebar.bg-dark ul li.nav-item:hover,  #n-sidebar.bg-dark ul li.nav-item:focus  {
    background-color: #353535;
  }

  #n-sidebar ul>li.nav-item>a {
    font-size: inherit;
  }
  #n-sidebar ul>li.nav-item>a>span {
    display: inline;
    font-size: inherit;
  }

  #n-sidebar ul>li.nav-item>a {
    padding: 1.2rem;  
  }
  #n-sidebar ul>li.nav-item div.collapse>ul li>a {
    padding: 1.2rem 1.2rem 1.2rem 1.8rem;  
  }

  #n-sidebar ul li.nav-item.active {
    background-color: #ff7500;
  }

  #n-sidebar ul li.nav-item:hover,
  #n-sidebar ul li.nav-item:focus  {
    background-color: #ededed;
  }

  #n-sidebar ul li.nav-item:hover > a,
  #n-sidebar ul li.nav-item:focus > a {
    background: none;
  }
}


.chips-container {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}
.chips-container > input[type='text'] {
  border: none;
  outline: none;
  display: inline-block;
  width: auto;
  min-width: 100%;
}
.chips-container > input[type='text']:focus {
  border: none !important;
  outline: none !important;
}
.input-group.template input.form-control {
  border-top-right-radius: .25rem !important;
  border-bottom-right-radius: .25rem !important;
}

#multiple-select {
  height: 12rem;
  max-height: 20rem;
}

.pointer {
  cursor: pointer;
}

.p-btn {
  padding: .375rem 0rem;
}

.scroll-x {
  white-space: nowrap;
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch;
}

details#dt-top-summary {
  margin: 1.25rem 0;
}
details div.progress {
  height: 0.55rem;
}
details summary::-webkit-details-marker {
  display: none;
}


details div.details {
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
}

details ul {
  margin: 0;
  width: 100%;
  padding: 0;
  display: table;
}

details ul li {
  display: table-cell;
  margin: 0.5rem;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

details ul li:only-child {
  border: none;
}
details ul li:first-child {
  border-right: 1px solid #ccc;
}
details ul li {
  border-right: 1px solid #ccc;
}
details ul li:last-child {
  border: none;
}

details ul li i.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
details ul li>span {
  color: #8e8e8e;
}

.switches-list-container {
  width: 100%;
  height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.5rem;
  background-color: #fbfbfb;
}

#updates-install-li {
  font-size: .875rem;
}