@import url("variables.css");
@import url("dashboard.css");

.nav-link:hover {
  background: #0d6efd !important;
  color: #fff !important;
}

.sidebar-width {
  width: 240px !important;
  margin-left: 0 !important;
  transition: all 0.5s !important;
}

.sidebar-hidden {
  margin-left: -240px !important;
}

.white-stroke {
  border: 2px solid white !important;
  border-radius: 50% !important;
  padding: 2px !important;
}

.dark-stroke {
  border: 2px solid var(--primary-dark) !important;
  border-radius: 50% !important;
  padding: 2px !important;
}

.remove-extra-margin > * {
  margin-top: 0 !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary-dark) !important;
}

.nav-link:hover {
  background-color: var(--primary-dark) !important;
}

.nav-link.text-dark.active {
  color: #fff !important;
}

.my-nav-dark .nav-link.active {
  color: var(--primary-green) !important;
  background-color: #fff !important;
}

.my-nav-dark .nav-link {
  background-color: var(--primary-green) !important;
  color: #fff !important;
}

.my-nav-dark .nav-link:hover {
  background-color: #fff !important;
  color: var(--primary-green) !important;
}

.bg-primary-orange {
  background-color: var(--primary-orange) !important;
  color: #fff !important;
}

.bg-primary-green {
  background-color: var(--primary-green) !important;
}

.bg-primary-light-green {
  background-color: var(--primary-light-green) !important;
}

.bg-primary-red {
  background-color: var(--primary-red) !important;
}

.text-primary-orange {
  color: var(--primary-orange) !important;
}

.text-primary-green {
  color: var(--primary-green) !important;
}

.text-primary-light-green {
  color: var(--primary-light-green) !important;
}

.text-primary-red {
  color: var(--primary-red) !important;
}

.btn-primary-orange {
  background: linear-gradient(0deg, #ff9540, #ff9540),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
  box-shadow: 0px 0px 0px 1px rgba(3, 7, 18, 0.8);
  box-shadow: 0px 1px 2px 0px rgba(3, 7, 18, 0.4);
  box-shadow: 0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset;
}

.cl-avatarBox {
  width: 100px !important;
  height: 100px !important;
}

.dt-empty {
  text-align: center !important;
}

#sidebar {
  height: 100vh;
  overflow-y: scroll !important;
}

.active-dark a.active {
  background-color: var(--primary-dark) !important;
  color: #fff !important;
}

.auth-w-100 {
  width: 60% !important;
}

.m-row-0.row {
  margin-right: 0px !important;
}

@media only screen and (max-width: 768px) {
  .sidebar-width {
    margin-left: -240px !important;
  }

  .sidebar-hidden {
    margin-left: 0 !important;
  }

  .nav-link:hover {
    background-color: var(--primary-dark) !important;
    color: #fff !important;
  }

  #sidebar {
    height: 90vh;
  }
}

@media only screen and (max-width: 440px) {
  .scan-options .card-header {
    display: flex !important;
    flex-direction: column !important;
  }
}

@media only screen and (max-width: 576px) {
  .auth-w-100 {
    width: 90% !important;
  }
}

@media (min-width:576px) and (max-width:950px) {
  .auth-w-100 {
    width: 80% !important;
  }
}