/* Target any unwanted margin/padding in .navbar-brand wrappers */

.navbar-brand, .navbar-brand > span, .navbar-brand > span > a, .navbar-brand > span > a > div {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

/* Make sure the brand image is not centered or set to auto margin */

.navbar-brand img {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: inline-block !important;
  text-align: left !important;
  max-width: 100px;
  height: auto;
}

/* Remove any auto margin that flex might give due to Bootstrap Studio's wrappers */

.navbar .navbar-brand, .navbar .navbar-brand > span, .navbar .navbar-brand > span > a, .navbar .navbar-brand > span > a > div {
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}

/* As a last resort, absolutely position the logo on mobile */

@media (max-width: 991.98px) {
  .navbar-brand {
    position: absolute !important;
    left: 0 !important;
    top: 0;
    z-index: 2;
    padding-left: 1rem !important;
  }
}

@media (max-width: 991.98px) {
  .navbar .container-fluid {
    position: relative;
  }
}

/* CSS: place in custom code or global CSS */

@media (max-width: 575.98px) {
  .d-sm-block {
    margin-top: 0.0rem !important;
  }
}