.close-btn-icon {
  font-size: 15px;
  color: #cad5e4;
  cursor: pointer;
}
.close-btn-icon:hover {
  color: #e95772;
}
.badge {
  padding-top: 6px;
  font-size: 12px;
}

@media (min-width: 768px) {
  .navbar-brand {
    color: #fff !important;
  }
  .navbar-vertical.navbar-expand-md .navbar-nav .nav-link {
    width: 0;
    overflow: hidden;
    width: 52px;
    margin-right: 9px;
    font-size: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .navbar-vertical ul.flex-column {
    height: 0px;
    overflow: hidden;
  }

  .navbar-vertical .navbar-heading {
    height: 0px;
    overflow: hidden;
    padding: 0;
  }

  .navbar-vertical.navbar-expand-md.fixed-left {
    width: 80px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .navbar-nav .nav-link > .far {
    font-size: 23px;
    margin-left: 8px;
  }

  .navbar-vertical.navbar-expand-md .navbar-collapse > * {
    padding-left: 12px;
  }

  .navbar-vertical.navbar-expand-md.fixed-left:not([style*='display: none']) ~ .main-content {
    margin-right: 80px !important;
  }
  .remove-sidebar
    .navbar-vertical.navbar-expand-md.fixed-left:not([style*='display: none'])
    ~ .main-content {
    margin-right: 0px !important;
  }

  .navbar-vertical.navbar-expand-md .navbar-brand {
    font-size: 0px;
  }

  .navbar-vertical.navbar-expand-md .navbar-brand-img {
    max-width: 40px !important;
    margin-right: -8px !important;
    height: auto;
    max-height: 100%;
  }
}

.navbar-vertical.navbar-expand-md.fixed-left {
  background: linear-gradient(-105deg, #222831, #393E46, #000);
  transition: 0.5s;
  max-width: 290px;
}

.navbar-vertical.navbar-expand-md.fixed-left:hover {
  width: 290px;
  overflow-y: scroll;
}

.navbar-vertical.navbar-expand-md.fixed-left:hover .navbar-nav .nav-link {
  width: auto;
  margin-right: 0;
  font-size: 17px;
}

.navbar-vertical.navbar-expand-md.fixed-left:hover ul.flex-column {
  height: auto;
}

.navbar-vertical.navbar-expand-md.fixed-left:hover .nav-link.router-link-exact-active.active {
  display: block;
}
.navbar-vertical.navbar-expand-md.fixed-left:hover .navbar-brand {
  font-size: 24px;
}

.navbar {
  background: linear-gradient(203deg, #393E46, #393E46, #000);
}

.navbar-light .navbar-user-link:focus,
.navbar-light .navbar-user-link:hover {
  color: #ffffff;
}

.navbar-light .navbar-user-link {
  color: #ffffff;
}

.btn-primary {
  color: #fff;
  background-color:#393E46 ;
  border-color: #000;
}

.btn-outline-primary {
  color: linear-gradient(203deg, #393E46, #393E46, #000);
  border-color: #000;
}

.btn-primary:hover,
.btn-outline-primary:hover,
.btn-primary.focus,
.btn-primary:focus {
  color: #fff;
  background-color: #393E46;
  border-color: #393E46;
}
.btn-primary.focus,
.btn-primary:focus {
  box-shadow: 0 0 0 0.15rem rgba(99, 18, 99, 0.32);
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #393E46;
  border-color: #393E46;
}
.form-control:focus {
  border-color: #393E46;
}
.btn-success {
  color: #fff;
  background-color: #88c457;
  border-color: #88c457;
}
.btn-success.focus,
.btn-success:focus {
  background-color: #88c457;
  border-color: #88c457;
  outline: unset;
  box-shadow: unset;
}
.btn-success:hover {
  color: #fff;
  background-color: #4b8818;
  border-color: #4b8818;
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #393E46;
  border-color: #393E46;
}
.urgent-actions .col-md-4:hover {
  background: #393E46;
}
.page-item.active .page,
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #393E46;
  border-color: #393E46;
}
.btn-dark,
.btn-dark:hover {
  color: #fff;
  background-color: #222831;
  border-color: #222831;
}

.btn-outline-danger {
  color: #c55778;
  border-color: #c55778;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #88183a;
  border-color: #88183a;
}
.btn-outline-success {
  color: #4b8818;
  border-color: #4b8818;
}
.btn-outline-success:hover {
  color: #fff;
  background-color: #4b8818;
  border-color: #4b8818;
}

.badge-primary {
  color: #fff;
  background-color: #393E46;
}

.badge-success {
  color: #fff;
  background-color: #88c457;
}

.badge-danger {
  color: #fff;
  background-color: #c55778;
}

.badge-dark {
  color: #fff;
  background-color: #222831;
}
.badge-soft-danger {
  color: #62021f;
  background-color: #e68ca794;
}
.badge-soft-success {
  color: #2d6202;
  background-color: #b4e58c8a;
}
.alert-success {
  color: #fff;
  background-color: #4b8818;
  border-color: #4b8818;
}
.alert-danger {
  color: #fff;
  background-color: #c55778;
  border-color: #c55778;
}
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.15rem #e6375780;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: #ffffff;
}

.navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before {
  display: none;
}

.navbar-light .navbar-nav .nav-link.router-link-exact-active {
  background: #f8fafc;
  color: #12263f;
  border-radius: 0px 30px 30px 0px;
  width: 100px;
}

.navbar-light .navbar-nav .nav-link.router-link-exact-active:hover,
.navbar-light .navbar-nav .nav-link.router-link-exact-active:focus {
  color: #12263f;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: #fff;
}

.invoice-table-header,
.data-table-header .col-xl-2 .row .col-6:first-child,
.data-table-header .col-xl-1 .row .col-6:first-child {
  background: linear-gradient(203deg, #393E46, #393E46, #000);
  color: #fff !important;
}
.data-table-header {
  border: 2px solid #f9fbfd;
}

.data-table-header .col-xl-3 .row .col-6:first-child,
.data-table-header .col-xl-2 .row .col-6:first-child,
.data-table-header .col-xl-1 .row .col-6:first-child {
  background: #393E46c9;
  color: #fff !important;
}

@media (max-width: 768px) {
  .navbar-light .navbar-nav .nav-link.router-link-exact-active {
    width: 100%;
  }
  .navbar-vertical.navbar-expand-md.fixed-left {
    background: linear-gradient(#222831, #393E46, #000);
    transition: 0.5s;
    max-width: 100%;
    width: 100%;
    position: fixed;
    z-index: 10;
  }
  .navbar-vertical.navbar-expand-md.fixed-left:hover {
    width: 100% !important;
    overflow-y: scroll;
  }
  .navbar-light .navbar-nav .nav-link.router-link-exact-active {
    border-radius: 0px;
  }

  #sidebarCollapse {
    position: fixed;
    z-index: 99999999;
    right: 7px;
    background: linear-gradient(-105deg, #222831, #393E46, #000);
    height: calc(100% - 60px);
    top: 61px;
    width: 90%;
    overflow-y: scroll;
  }
  #sidebarCollapse .ps--active-x > .ps__rail-x,
  .ps--active-y > .ps__rail-y,
  .ps--active-x > .ps__rail-x,
  #sidebarCollapse .ps--active-y > .ps__rail-y {
    display: none !important;
  }
  .navbar-light .navbar-collapse::before {
    border: none;
  }
  .main-content {
    padding-top: 60px;
  }
  .navbar-vertical.navbar-expand-md.fixed-left .navbar-brand {
    font-size: 24px;
  }
  .navbar-vertical.navbar-expand-md.fixed-left .nav-link.router-link-exact-active.active {
    display: block;
  }
  .navbar-vertical.navbar-expand-md.fixed-left .navbar-nav .nav-link {
    width: auto;
    margin-right: 0;
    font-size: 17px;
  }
  .icon {
    font-size: 0px;
  }
  .icon i {
    font-size: 18px;
  }
  .navbar-vertical.navbar-expand-md.fixed-left {
    overflow-y: hidden !important;
  }
}
@media (min-width: 1200px) {
  .data-table-header .col-xl-2 .row .col-6:last-child,
  .data-table-header .col-xl-1 .row .col-6:last-child {
    padding: 13px;
    padding-bottom: 0px;
  }
}
.multiselect__tag,
.multiselect__option--highlight,
.multiselect__option--highlight:after {
  background: #222831 !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #222831;
  background-color: #222831;
}
.navbar-light .navbar-heading {
  color: #fff;
}