:root{
  --zf-radius: 16px;
}

.card{
  border-radius: var(--zf-radius);
}

.icon-badge{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.project-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  vertical-align: middle;
}

.table > :not(caption) > * > *{
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.running-timer{
  font-variant-numeric: tabular-nums;
}

.bg-body-tertiary{
  border-radius: 14px;
}

.navbar-brand img{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

/* Slightly larger brand logo for better readability */
.navbar-brand img.navbar-logo{
  width: 36px;
  height: 36px;
}

@media (min-width: 992px){
  .navbar-brand img.navbar-logo{
    width: 40px;
    height: 40px;
  }
}

footer{
  opacity: .9;
}


.project-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

.project-dot-lg{
  width:14px;
  height:14px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  vertical-align:middle;
}

.project-color-select{
  border-left: .45rem solid var(--project-color, var(--bs-border-color));
  transition: border-color .15s ease, box-shadow .15s ease;
}

.project-color-select:focus{
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}