body {																											/* vanilla abc tools settings */

	--abctools-font-fallback-code: var(--abctools-font-code), 'Fira Mono', Courier, monospace;
	--abctools-font-fallback-ui: var(--abctools-font-ui), 'Fira Sans', Helvetica, sans-serif;
	
	--abctools-font-code: 'Fira Mono';												/* Courier */
	--abctools-font-ui: 'Fira Sans';													/* Helvetica */
  --abctools-font-size-header-xl-24: 2rem;                  /* 24pt */
  --abctools-font-size-header-l-20: 1.667rem;               /* 20pt */
  --abctools-font-size-header-m-18: 1.5rem;                 /* 18pt */
  --abctools-font-size-header-s: 1.125rem;                  /* 18px */
	--abctools-font-size-label-l-14: 1.167rem;    					  /* 14pt */
	--abctools-font-size-code-13: 1.083rem;								    /* 13pt */
	--abctools-font-size-label-m-12: 1rem;    					      /* 12pt */
	--abctools-font-size-label-s-11: 0.917rem;							  /* 11pt */
  --abctools-font-size-contextmenu: 0.917rem;               /* 11pt */
  --abctools-font-size-select: 0.917rem;                    /* 11pt */
	--abctools-font-size-label-xs-10: 0.833rem;						    /* 10pt */
  --abctools-ui-btn-bgcolor: #d8d8d8; 										 /* #d8d8d8 */
  --abctools-ui-btn-bordercolor: gray; 	 								 /* darken(#d8d8d8, 7.5%) */
	--abctools-ui-btn-boxshadow: none; 												/* 0 0.1rem 0.1rem rgba(0, 0, 0, 0.25), 0 -0.1rem 0.5rem rgba(0, 0, 0, 0.1) inset */
  --abctools-ui-btn-flarecolor: transparent;								/* #ffffff */
  --abctools-ui-btn-hovercolor: #a5fb98;									 /* palegreen */
  --abctools-ui-btn-outlinecolor: slateblue;              /* none */
	--abctools-ui-btn-textcolor: #000000;									 /* #000000 */
  --abctools-ui-input-bordercolor: #767676;               /* #767676 */
	--abctools-ui-float-btn-height: 3rem;											/* 48px */
	--abctools-ui-float-btn-padding: 0.25rem;									/* 4px */
	--abctools-ui-float-btn-filter: drop-shadow(1px 1px 7px white);
  --abctools-ui-tab-btn-bgcolor: #d5ebfdba;               /* #ffffff */
  --abctools-notation-fullscreen-scaling: 50%;              /* 50% */

  --abctools-color-attention: #8ac716;                    /* red */
  --abctools-color-update: #1c741c;                       /* red */
}

/*//////////////////////////////////////////
// APP LITE: FONT DECLARATIONS
/////////////////////////////////////////*/

@font-face {
  font-family: 'Fira Sans';
  font-weight: 400;
  font-style: normal;
  src: url('./fonts/FiraSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans';
  font-weight: 400;
  font-style: italic;
  src: url('./fonts/FiraSans-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans';
  font-weight: 600;
  font-style: normal;
  src: url('./fonts/FiraSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans';
  font-weight: 600;
  font-style: italic;
  src: url('./fonts/FiraSans-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans Bold';
  font-weight: 600;
  font-style: normal;
  src: url('./fonts/FiraSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans Bold';
  font-weight: 600;
  font-style: italic;
  src: url('./fonts/FiraSans-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans Semibold';
  font-weight: 600;
  font-style: normal;
  src: url('./fonts/FiraSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans Semibold';
  font-weight: 600;
  font-style: italic;
  src: url('./fonts/FiraSans-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans Semibold Italic';
  font-weight: 600;
  font-style: normal;
  src: url('./fonts/FiraSans-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans Bold Italic';
  font-weight: 600;
  font-style: normal;
  src: url('./fonts/FiraSans-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans Italic';
  font-weight: 400;
  font-style: normal;
  src: url('./fonts/FiraSans-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Sans Italic';
  font-weight: 600;
  font-style: normal;
  src: url('./fonts/FiraSans-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Mono';
  font-weight: 400;
  font-style: normal;
  src: url('./fonts/FiraMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Mono';
  font-weight: 500;
  font-style: normal;
  src: url('./fonts/FiraMono-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Mono';
  font-weight: 700;
  font-style: normal;
  src: url('./fonts/FiraMono-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Mono Medium';
  font-weight: 500;
  font-style: normal;
  src: url('./fonts/FiraMono-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Fira Mono Bold';
  font-weight: 700;
  font-style: normal;
  src: url('./fonts/FiraMono-Bold.woff2') format('woff2');
}

/*//////////////////////////////////////////
// APP LITE: CODE MIRROR
/////////////////////////////////////////*/

.CodeMirror {
  font-family: var(--abctools-font-fallback-code) !important;
}

/*//////////////////////////////////////////
// APP LITE: CONTEXT MENU
/////////////////////////////////////////*/

.ContextMenu * {
  font-family: var(--abctools-font-fallback-ui);
  font-size: var(--abctools-font-size-contextmenu);
}

/*//////////////////////////////////////////
// APP LITE: MODAL DIALOGS
/////////////////////////////////////////*/

.modal_flat_main *:not(.abcjs-container *),
.modal_flat_wide_main *:not(.abcjs-container *) {
  font-family: var(--abctools-font-fallback-ui);
}

.modal_flat_main input,
.modal_flat_main label,
.modal_flat_wide_main input,
.modal_flat_wide_main label,
div.modal_flat_form_item_label {
  font-size: var(--abctools-font-size-label-m-12);
  /* color: purple; */
}

.modal_flat_main select,
.modal_flat_wide_main select {
  font-size: var(--abctools-font-size-select);
  /* color: blue !important; */
}

.modal_flat_main textarea,
.modal_flat_wide_main textarea {
  font-size: var(--abctools-font-size-code);
  /* color: green !important; */
}

.modal_flat_main .modal_flat_buttons button,
.modal_flat_wide_main .modal_flat_wide_buttons button {
  font-size: var(--abctools-font-size-label-m-12);
  border: 1px solid var(--abctools-ui-btn-bordercolor);
  border-radius: 0.12em;
}

.modal-header {
  font-weight: 400;
  text-align: center;
  margin: 1em 0;
}

.modal-header-settings {
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 15px;
}

.modal-header-spaced {
  margin-bottom: 2.25em;
}

.modal-header-ui {
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 2rem;
  text-decoration: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-link-help {
  left: 0.75rem;
  top: 0.75rem;
}

.modal-link-help-player {
  left: 0.3rem;
  top: 0.3rem;
}

.modal-btn-share-player {
  right: 0.3rem;
  top: 0.3rem;
}

.modal-subheader {
  font-size: 1.125rem;
  font-weight: 400;
  text-align: center;
  margin: 0 0 1em;
}

.modal-text-updated {
  color: var(--abctools-color-update);
}

.modal-text-updateinfo {
  font-size: 0.845rem;
  line-height: 1.4;
  color: dimgray;
  position: absolute;
  left: 30px;
  bottom: 30px;
  margin: 0;
  cursor: pointer;
}

.modal-textgroup-explanation.modal-header {
  font-size: var(--abctools-font-size-header-m-18);
}

.modal-textgroup-explanation ~ p {
  font-size: var(--abctools-font-size-label-l-14);
  line-height: 1.57;
}

.modal-table-row-octavelabel {
  text-align: left;
  font-size: var(--abctools-font-size-label-m-12);
}

.modal-table-row-notelabel {
  text-align: center;
  font-size: var(--abctools-font-size-label-s-11);
}

.modal-table-row-spacer {
  text-align: center;
  font-size: 0.167rem;
}

/*//////////////////////////////////////////
// APP LITE: UI ELEMENTS
/////////////////////////////////////////*/

/* UI: Common Elements */

.btn,
.btn-lite,
.btn-uioverlay,
.ContextMenu,
input[type="button"],
input[type="checkbox"],
select {
	cursor: pointer;
}

input[type="text"],
input[type="number"],
select,
textarea:not(.abc) {
  border: none;
  outline: 1px solid var(--abctools-ui-input-bordercolor);
  border-radius: 0.17rem;
}

button:focus-visible,
button[type="button"]:focus-visible,
label:has(input[type="file"]):focus-within,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.btn-uioverlay:focus-visible,
.modal-header-ui:focus-visible {
  outline: 0.17rem solid var(--abctools-ui-btn-outlinecolor);
}

input[type="checkbox"]:focus-visible {
  outline-style: auto;
  outline-width: 0.2rem;
  border-radius: 0.17rem;
}

.abc:focus-visible {
  outline-width: 0.15rem;
}

.abc:focus-visible,
.abcjs-btn:focus-visible {
  border-radius: 0.17rem;
}

.btn-lite {
  appearance: none;
  border: none;
  box-shadow: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
}

.adv-tab-bar .adv-tab-btn.active {
  background: var(--abctools-ui-tab-btn-bgcolor);
}

.abc-btn:focus-visible,
.abcjs_custom_css-btn:focus-visible,
.adv-tab-bar .adv-tab-btn:focus-visible,
.modal_flat_buttons .modal_flat_cancel:focus-visible,
.modal_flat_wide_buttons .modal_flat_wide_cancel:focus-visible {
  outline: 0.185rem solid var(--abctools-ui-btn-outlinecolor);
}

.abc-btn.primary:focus-visible,
.abcjs_custom_css-btn.primary:focus-visible,
.modal_flat_buttons .modal_flat_ok:focus-visible,
.modal_flat_wide_buttons .modal_flat_wide_ok:focus-visible {
  outline: 0.185rem solid green;
}

.modal-header-ui:focus-visible {
  outline-width: 0.19rem;
}

@supports (-webkit-tap-highlight-color: rgba(0,0,0,0)) {
  .btn, .btn-lite, .btn-uioverlay, .ContextMenu,
  a, input, label, select {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}

/* UI: Bottom Button Bar */

[data-abctools-ui-bottom-bar="show"][data-notation="minimized"] .notenrechts {
  display: inline-block;
}

/* UI: Overlay Buttons */



/* UI: Settings Menu */

.lite-custom-setting {
  font-weight: bold;
}

/*//////////////////////////////////////////
// APP LITE: EDITOR SHELL COMPONENTS
/////////////////////////////////////////*/

/* Editor: ABC No Input */

[data-abc="noinput"] .notation-spacer,
[data-abc="noinput"] .noscroller {
  display: block;
}

[data-abc="noinput"] .notation-placeholder {
  display: block;
  margin-bottom: 0.33rem;
}

[data-share-link="true"] .notation-placeholder {
  display: none;
}

/* Editor: ABC Input Rendered */

[data-abc="rendered"] .notation-spacer,
[data-abc="rendered"] .noscroller {
  display: none;
}

[data-abc="rendered"] .notation-holder {
  display: inline;
}

/* Editor: Notation Maximized */

[data-abc="rendered"][data-notation="maximized"] .notation-holder {
  display: flex;
}

[data-abc="rendered"][data-notation="maximized"] .notation-spacer,
[data-abc="rendered"][data-notation="maximized"] .noscroller {
  display: none;
}

[data-notation-scaling="auto"][data-notation="maximized"] .notation-holder {
  width: var(--abctools-notation-fullscreen-scaling);
}

/* Editor: Notation Minimized */

[data-abc="rendered"][data-notation="minimized"] .notation-spacer,
[data-abc="rendered"][data-notation="minimized"] .noscroller {
  display: block;
}

[data-abc="rendered"][data-notation="minimized"] .notation-holder {
  display: inline;
}

[data-abc="rendered"][data-mode="mobile"][data-notation="minimized"] .notation-holder {
  display: block;
}

/*//////////////////////////////////////////
// APP LITE: MEDIA RULES / BREAKPOINTS
/////////////////////////////////////////*/

/* Two-column view breakpoint rules */

/* @media screen and (min-width: 1798px) { */
@media screen and (min-width: 112.375rem) {

  /* Notation Minimized :: Viewport >= 1798px */

	[data-notation="minimized"] .notation-container {
		align-items: flex-start;
	}

	[data-notation="minimized"] .app-container {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
	}

  /* Notation Maximized :: Viewport >= 1798px */

	#notation-spacer {
		margin-right: 24px;
	}

	#noscroller {
		left: calc(50% - 850px);
		margin-left: 0;
	}
}

/*
////////////////////////////////////////////
// APP LITE: CUSTOM FORCED STYLES
////////////////////////////////////////////
*/

/* Always Two Columns Mode (Formerly iPad Two-Column) */

[data-mode="always-two-columns"] #noscroller,
[data-mode="always-two-columns"] #notation-holder,
[data-mode="always-two-columns"] #notation-placeholder,
[data-mode="always-two-columns"] #notation-spacer,
[data-mode="always-two-columns"] #uioverlay {
  width: 860px;
}

[data-mode="always-two-columns"] #diagnostics {
  width: 836px;
}

[data-mode="always-two-columns"][data-abc="rendered"][data-notation="minimized"] #notation-holder {
  display: inline;
  float: left;
}

[data-mode="always-two-columns"][data-abc="rendered"][data-notation="maximized"] #notation-holder {
  width: 70%;
}

[data-mode="always-two-columns"] #rawmodebutton {
  display: none;
}

[data-mode="always-two-columns"] #transpose-controls {
  display: inline-block;
}

[data-mode="always-two-columns"][data-notation="minimized"] #notation-container {
  align-items: center;
}

[data-mode="always-two-columns"] #notation-spacer {
  margin-right: 0;
}

/*
////////////////////////////////////////////
// APP LITE: USER-PREFERS FORCED STYLES
////////////////////////////////////////////
*/

@media (prefers-reduced-motion: reduce) {

  @media (hover: hover) {
    .btn,
    .btn-uioverlay,
    .dialogcornerbutton,
    .modal_flat_buttons button,
    .modal_flat_wide_buttons button {
      transition: none !important;
      transform: none !important;
    }
  }
}

/*
////////////////////////////////////////////
// APP LITE: UTILITY CLASSES
////////////////////////////////////////////
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}