.navbar-brand img {
    width: 185px;
}

@media (max-width: 399.98px) {
    .navbar-brand {
        margin-right: .5rem;
    }
    .navbar-brand img {
        width: 150px;
    }
}

.page-header > .d-flex {
    min-height: calc(1.5em + .75rem + 2px);
}

.card-body > .card-tabs {
    margin-bottom: -1px;
    border-bottom: 0;
}

.select2-container--bootstrap-5 .select2-selection--multiple {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232B353B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {
    right: 2.25rem;
}

.nav-bell {
    padding-left: 12px;
    font-size: 19px;
    line-height: 1;
}

.nav-bell-badge {
    top: -9px;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
}

/* A depot row's state: a small mark in the icon's corner, cut out of the row background. */
.depo-mark-deviation,
.depo-mark-order,
.depo-mark-done {
    position: relative;
    align-self: flex-start;
}
.depo-mark-deviation::after,
.depo-mark-order::after,
.depo-mark-done::after,
.depo-mark-cart {
    position: absolute;
    right: -.5em;
    bottom: -.25em;
    font-size: .65em;
    --cut: var(--bs-list-group-bg, #fff);
    text-shadow: 1px 1px var(--cut), -1px -1px var(--cut), 1px -1px var(--cut), -1px 1px var(--cut),
        0 1.5px var(--cut), 0 -1.5px var(--cut), 1.5px 0 var(--cut), -1.5px 0 var(--cut);
}
.depo-mark-deviation::after {
    content: "\f071";
}
.depo-mark-order::after,
.depo-mark-cart::before {
    content: "\f07a";
}
.depo-mark-done::after {
    content: "\f00c";
}
.depo-mark-cart {
    top: -.3em;
    bottom: auto;
}
/* Both a deviation and an order: the icon is split yellow over red. */
.depo-mark-split::before {
    background: linear-gradient(to bottom left, var(--bs-warning) 60%, var(--bs-danger) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* A list in a card already draws the line below it, as Bootstrap does before a card footer. */
.card > .list-group + .border-top {
    border-top: 0 !important;
}

/* The shift form's buttons float in core: when they wrap, the rows touch each other and the card below. */
.form-group:has(> [name="copyShift"]) {
    display: flow-root;
}
.form-group:has(> [name="copyShift"]) > .btn {
    margin-bottom: .5rem;
}

/* A row in a card keeps the phone layout on every screen: its column is as narrow as a phone. */
@media (min-width: 992px) {
  .card .event-list-item .grid-wrapper {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title badge" "title signup" "time signup";
  }
  .card .event-list-item .grid-time {
    padding-left: 0;
  }
  .card .event-list-item .grid-signup {
    justify-self: end;
  }
  .card .event-list-item .grid-time .d-lg-none {
    display: inline !important;
  }
  .card .event-list-item .grid-time .d-lg-inline {
    display: none !important;
  }
}