@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
  background-color: #222;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
}
.form-control {
  width: auto;
}
.sidebar {
  /* background-color: #444 !important; */
  /* color: #ddd !important; */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 90px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  z-index: 99;
}

@media (max-width: 767.98px) {
  .sidebar {
      top: 11.5rem;
      padding: 0;
  }
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}

@media (min-width: 767.98px) {
  .navbar {
      top: 0;
      position: sticky;
      z-index: 999;
  }
}

.sidebar .nav-link {
  color: #ccc;
  font-size: 16px;
}

.sidebar .nav-link.active {
  color: #34d141;
}
/* my css */
.navbar-brand {
  color: #34d141! important;
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
}
.dropdown {
  padding-right: 20px;
}
.dropdown button {
  background-color: #34d141! important;
  color: #222;
  border: 1px solid #2db939;
}
.main_body {
  color: #fff;
}
.main_body h2 {
  font-size: 18px;
  margin-left: 20px;
}
.popular-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.card {
  max-width: 10rem !important;
  min-width: 10rem !important;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: none;
  margin: 3px;
  color: #222;
}
.card-body {
  display: none !important; /*bootstrap fix*/
}
.card-title {
  font-size: 14px;
  line-height: 1.1rem;
}
.card-text {
  background-color: #272727d2;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
}
.overview p.green {
  color: lightgreen;
}

.overview p.orange {
  color: orange;
}

.overview p.red {
  color: red;
}
.overview {
  background-color: #2a2a2ee0 !important;
  color: #eee;
  text-align: left;
  font-size: 12px;
  padding: 1rem;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  will-change: transform;
  transform: translateY(110%);
  overflow-y: auto;
  transition: transform 0.2s ease-in;
}
.overview h3 {
  color: #2db939;
  font-size: 14px;
}
.card:hover .overview {
  transform: translateY(0);
}
.box-02 {
  margin-top: 25px;
}
.items_scroll {
  transition: all 0.2s;
  will-change: transform;
  cursor: pointer;

}
.items_scroll.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.popular-container::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.popular-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}