:root {
  --bs-body-bg: var(--bs-gray-100);
}

body {
  color: #555;
 font: 14px Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;
}

h1 {
  font-size: 180%;
}

h1 i {
  font-size: 1rem;
}

h1 a:hover {
  text-decoration: none;
}

.breadcrumb {
  display: none;
}

.breadcrumb-item.active a, .breadcrumb-item.active a:hover {
  color: #555;
  text-decoration: none;
}

.navbar-brand img {
  height: 48px;
  vertical-align: sub;
  margin-right: 15px;
}

.navbar-brand {
  color: #1690c6;
}

a {
  color: #1690c6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #116f98
}

#app {
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 20rem;
  margin: 5px;
  background-color: #f0f3f6;
}

.card.empty {
  opacity: 0;
}

.card img {
  height: 40px;
  right: 15px;
}
.card h5 { font-size: 1.2em}
.card h6 { font-size: 1em}

.card .btn {
  --bs-btn-padding-y: .2rem; 
  --bs-btn-padding-x: .2rem; 
  --bs-btn-font-size: .65rem;
}

.card .btn.btn-secondary {
  background-color: rgb(220, 220, 220);
  border-color: rgb(220, 220, 220);
  font-weight: bold;
  color: #000;
  --bs-btn-padding-x: .4rem; 
}

.branch-btn {
  max-width: 80px;
}

.card-subtitle,
.card-title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.titles {
  width: 100%;
  overflow: hidden;
  padding-right: 10px;
}

.card-text {
  font-size: 0.7rem;
  color: #555;
}
.dynamic-info {
  padding-left: 10px;
}

.dynamic-info em {
  font-size: 50%;
  font-weight: normal;
}
.btn.btn-running {
  background-color: #afebb2;
}

.card.failed-production {
  background-color: rgba(227, 31, 50, .4);
  border: 13px solid rgb(227, 31, 50);
}

.card.project-is-okay {
  background-color: #dcf2dc; 
}