/* Menu bar styling fixes */
body > .menus,
.sound-recorder > .menus {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  background-color: var(--Menu, #d4d0c8) !important;
  color: var(--MenuText, #000) !important;
  height: 20px !important;
  padding: 2px !important;
  width: 100% !important;
}

body > .menus .menu-button,
.sound-recorder > .menus .menu-button {
  display: inline-block !important;
  float: left !important;
  white-space: nowrap !important;
  height: 18px !important;
  line-height: 14px !important;
  padding: 2px 6px !important;
  margin: 0 2px !important;
  border: none !important;
  background: transparent !important;
  font-family: 'PixelatedMsSansSerif', 'Tahoma', sans-serif !important;
  font-size: 11px !important;
  position: relative !important;
  min-width: 0 !important;
  box-sizing: content-box !important;
  
}

/* Menu popup styling */
.menu-popup {
  position: fixed !important; /* Use fixed positioning for popups */
}

/* When sound recorder is used in an iframe */
body.in-iframe .menus {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* Extra specificity for menu buttons */
html body .menus .menu-button {
  display: inline-block !important;
  
  float: left !important;
  white-space: nowrap !important;
}

/* Add default position for menu popups */
html body .menu-popup {
  left: 0 !important;
  top: 22px !important; /* Position below menu bar */
}