/* Add this to your application.css or a separate stylesheet */

/* First, reset any potential styling on the link element */
.topbar-wrapper a.link,
.swagger-ui .topbar a.link {
  background-image: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

/* Then, create your own logo */
.topbar-wrapper a.link,
.swagger-ui .topbar a.link {
  display: block !important;
  width: 150px !important;  /* Adjust as needed */
  height: 40px !important;  /* Adjust as needed */
  background-image: url('/mega_logo.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  color: transparent !important; /* Hide any text inside */
}

/* Remove any SVG that might be inside */
.topbar-wrapper a.link svg,
.swagger-ui .topbar a.link svg {
  display: none !important;
}

/* Hide any span elements that might contain text or icons */
.topbar-wrapper a.link span,
.swagger-ui .topbar a.link span {
  display: none !important;
}

.swagger-ui .topbar {
  background-color: #cecece !important;
}