#og-prototype h7 {
  margin-top: 20px;
}

.og-pattern-colorcircle {
  width: 45px;
  height: 45px;
}

.og-color-item {
  margin: 5px;
  padding: 5px;
  border: solid #f8f9fa 3px;
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100%;
}

.usecase {
  border-left: solid #000000 4px;
  padding-left: 10px;
  font-size: 14px;
}

#og-prototype-scrollspy-nav {
  position: fixed;
  right: -250px;
  top: 50px;
  z-index: 9;
  max-height: 75vh;
  overflow-y: auto;
  overflow-x: visible;
}
#og-prototype-scrollspy-nav:hover {
  right: 0;
  transition: all ease 0.5s;
}
#og-prototype-scrollspy-nav .nav-link, #og-prototype-scrollspy-nav .navbar-brand {
  padding: 4px;
  font-size: 12px;
  width: 100%;
}
#og-prototype-scrollspy-nav .nav-link.level-1-link, #og-prototype-scrollspy-nav .navbar-brand.level-1-link {
  font-weight: bold;
}

.badge.badge-success {
  background-color: #198754 !important;
}
.badge.badge-working {
  background-color: #ffc107 !important;
}
.badge.badge-notstarted {
  background-color: darkgray !important;
}
.badge.badge-htmlcomplete {
  background-color: pink !important;
}

.og-demo-card {
  border: solid black 2px;
  width: 200px;
  min-height: 100px;
}
.og-demo-card .bg-dark {
  color: #fff;
}

#og-componentlibray-repository {
  background: gray;
}

.dxbs-scheduler .og-prototype-item {
  border: solid silver 2px;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 10px;
}
.dxbs-scheduler .dxbs-sc-apt {
  position: inherit;
  height: 60px;
  width: 134px;
}