.control-menu-message {
    display:none;
}
body.slash-menu .control-menu-message {
    display:block;
	position:absolute;
	/* right:10px; */
	top:350px;
	background:#fff;
	z-index: 6;
	padding:5px;
	border:solid #8d8 2px;
	border-radius:3px;
}
.menuElement {
	position:absolute;
	list-style:none;
  z-index: 13;
  background: #fff;
	padding:0;
  max-height: calc(100% - 80px);
  overflow-y: auto;
}
.menuContainer .menuElement .menuOption {
  display: flex;
  flex-flow: row;
}
.menuContainer .menuElement .menuOption a.dropdown-item {
  display: flex;
}
.menuContainer .menuElement .menuOption a.dropdown-item span {
  margin-right: 10px;
}
.menuOption .menuText {
    display:block;
    flex:3;
}
.menuContainer {
  position: absolute;
  z-index: 13;
}

.menuOption .icon {
    display:block;
    flex:1;
}

.menuOption .menuKey {
    flex:1;
    display:block;
}
.menuElement 	.menuOption button:focus-within {
	background:#ccf;
	border:2px green solid;
	font-weight: bold;
}

.menuElement .menuOption button {
	width: 100%;
  height: 100%;
  display:flex;
  flex-flow:row;
  padding: 8px 5px;
}
.separator {
	width:15px;
	/* text-align: center; */
	display: inline-block;
	font-weight: bold;
	text-justify:center;
}

body.modal .overlay,body.showAttributeDialog .overlay {
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	z-index:2;
    opacity: 0.2;
	background: #333;
}

body.showAttributeDialog.textEditor .overlay {
	display:none;
}
.mbtn {
    display: grid;
    grid-template-columns: 1rem minmax(0, 142px) var(--menu-key-w) 6px;
    align-items: center;
    gap: 10px;
    height: var(--menu-btn-h);
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--dlg-radius-btn);
    color: var(--color-text);
    font: 400 1rem / 1 var(--font-body);
    cursor: pointer;
    background: transparent;
    text-align: left;
}
.mbtn:hover, .mbtn.is-hover {
    background: var(--color-accent-100);
    border-color: var(--color-accent-300);
}
.mbtn.is-open {
    background: var(--color-accent);
    border-color: var(--color-accent-700);
    color: #fff;
}
.side {
    width: var(--menu-rail);
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) 6px var(--space-3);
    background: var(--color-neutral-100);
    border-right: 1px solid var(--dlg-rule);
    font-family: var(--font-body);
}
.mi {
    font-family: "Material Symbols Outlined";
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    line-height: 1;
    flex: none;
    width: 20px;
    text-align: center;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}
.mbtn > .mi, .mbtn > .bv {
    grid-column: 1;
}
.mbtn-key {
    font: 400 11px / 1 var(--font-body);
    color: var(--color-neutral-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: .02em;
}
.mbtn > .mbtn-key {
    grid-column: 3;
    text-align: right;
}
.bv {                                    /* Bravura / SMuFL */
  font-family: "Bravura"; 
  font-size: 1.5rem; 
  line-height: 1; 
  flex: none;
  width: 20px; text-align: center; user-select: none;
}
.smoi {
    font-family: "Smoosic";
    font-size: 22px;
    line-height: 1;
    flex: none;
    width: 20px;
    text-align: center;
    user-select: none;
}
.mbtn-label {
  font-size: 0.9rem;
}
.side-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 10px;
    font: 600 12px / 1 var(--font-heading);
    letter-spacing: .12em;
    text-transform: uppercase;
}
/* The open score's name after the app name; long names are truncated, the full name is in the tooltip.
   The right padding keeps the name clear of the unsaved-changes asterisk. */
.side-brand .side-score {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}
/* Unsaved-changes asterisk: pinned to the right edge of the brand area so it is visible
   even when the score name is truncated. */
.side-brand .side-changed {
    position: absolute;
    top: 4px;
    bottom: 10px;
    right: 6px;
    display: flex;
    align-items: center;
    letter-spacing: normal;
    font-weight: 700;
}
.side-group {
    margin-top: var(--space-3);
    padding: 0 6px 4px;
    font: 600 9.5px / 1 var(--font-heading);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}
.side {
    width: var(--menu-rail);
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 2px;
    padding: var(--space-2) 6px var(--space-3);
    background: var(--color-neutral-100);
    border-right: 1px solid var(--dlg-rule);
    font-family: var(--font-body);
}
.mitem {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--menu-item-h);
    padding: 0 12px;
    font: 400 13.5px / 1 var(--font-body);
    color: var(--color-text);
    border-left: 3px solid transparent;
    cursor: pointer;
}
.mitem-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mitem-label {
  font-size: 0.9rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mitem-key {
    font: 400 11.5px / 1 var(--font-body);
    color: var(--color-neutral-500);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}
.mitem:hover, .mitem.is-hover {
    background: var(--color-accent-100);
    border-left-color: var(--color-accent);
}
.mitem:hover .mitem-key, .mitem.is-hover .mitem-key {
    color: var(--color-accent-700);
}
.mitem:focus-visible, .mitem.is-focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}
.mitem.is-checked {
    font-weight: 600;
}
.mitem.is-open {
    background: var(--color-accent-100);
    border-left-color: var(--color-accent);
}
.mitem.is-checked .mi.check {
    color: var(--color-accent-700);
}
.mitem.is-disabled {
    opacity: .45;
    cursor: default;
}
.mitem .mi.check {
    width: 16px;
    font-size: 16px;
}
.mitem.is-danger {
    color: var(--color-accent-2-700);
}
.mitem.is-danger:hover, .mitem.is-danger.is-hover {
    background: var(--color-accent-2-100);
    border-left-color: var(--color-accent-2);
}
.mdrop-sep {
    height: 1px;
    margin: 5px 12px;
    background: var(--dlg-rule);
}
.mdrop-note {
    padding: 6px 12px 2px;
    font: 400 11.5px / 1.4 var(--font-body);
    color: var(--color-neutral-700);
}
.mdrop {
    position: relative;
    min-width: 276px;
    background: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-500);
    border-radius: var(--dlg-radius);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-body);
    padding: 5px 0 6px;
}
/* a submenu opens to the right of its parent item's panel, staying up
   alongside it until the submenu itself closes */
.msub {
    position: absolute;
    top: 34px;
    left: calc(100% - 6px);
}
.menu-layer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
}
.mdrop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--dlg-rule);
    font: 600 10.5px / 1 var(--font-heading);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
}
.bv.sm { font-size: 18px; }
.bv.oversize {
  font-size: 1rem;
}
.icon-smo.oversize {
  font-size: 0.5rem;
}
.bv.tall {
  height: 1rem;
  padding-top:0.25rem;
}
.icon.oversize {
  font-size: 1rem;
}