* {
   font-family: sans-serif;
}

:root {
   --highlightColor: red;
}

header {
   height: 50px;
   background-color: #333;
   color: #fff;
   display: flex;
   justify-content: space-between;
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 100;
}

header div {
   display: flex;
   gap: 0.5rem;
}

#logo {
   display: inline-block;
   width: 40px;
   height: 50px;
   margin-left: 0.5rem;
}

header h1 {
   font-size: 1.15rem;
   margin-top: 0;
   line-height: 50px;
   display: inline-block;
}

label[for="sound"] {
   background: transparent url(../images/sound-off.svg) no-repeat center;
   height: 50px;
   width: 60px;
   cursor: pointer;
}

label[for="sound"]:has(input:checked) {
   background: transparent url(../images/sound-on.svg) no-repeat center;
}

label[for="sound"]:has(input:focus) {
   outline: 2px solid #ccccff;
}

#sound {
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
}

#keyboardShortcutsBtn {
   background: transparent url(../images/ic-keyboard.svg) no-repeat center;
   border: none;
   border-radius: 0;
   width: 60px;
   height: 50px;
   cursor: pointer;
   display: none;
}

#about {
   height: 100%;
   line-height: 50px;
   background-color: transparent;
   color: #fff;
   border: none;
   border-radius: 0;
   padding: 0 1rem;
   text-decoration: none;
   font-size: 1rem;
   cursor: pointer;
}

#about:hover,
#keyboardShortcutsBtn:hover,
label[for="sound"]:hover,
label[for="sound"]:has(input:checked):hover {
   background-color: #555;
}

.copyright {
   color: #767676;
}

.keyboard-shortcut {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1rem;
}

.keyboard-shortcut div:first-child {
   white-space: nowrap;
}

kbd {
   background-color: #ddd;
   border: 1px solid #767676;
   border-radius: 4px;
   box-sizing: border-box;
   padding: 0.25rem 0.5rem;
   display: inline-block;
}

body {
   background-color: #fafafa;
   text-align: center;
}

#default-view-container {
   padding-bottom: 2rem;
}

/* #viewer {
   min-height: calc(100vh - 15rem);
} */

button {
   padding: 0;
   background-color: #fff;
   color: #333;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* #keyboard button:hover {
   background-color: purple;
   color: #fff;
} */


.natural,
.sharp,
.top,
.bottom,
#chords button {
   font-size: 0.875rem;
}

.natural {
   border: 1px solid #767676;
   border-left: none;
   border-radius: 0;
   position: relative;
   height: 150px;
   width: 40px;
   display: inline-flex;
   align-items: flex-end;
   justify-content: center;
   padding-bottom: 1rem;
   background-color: #fff;
   z-index: 1;
   vertical-align: baseline;
   cursor: pointer;

}

.natural:first-child {
   border-left: 1px solid #767676;
}

.sharp:first-child+.natural {
   margin-left: 0;
   border-left: 1px solid #767676;
}

.sharp {
   border: 1px solid #fff;
   border-top: none;
   height: 80px;
   width: 25px;
   padding: 0;
   background-color: #000;
   color: #fff;
   margin-left: -12.5px;
   border-radius: 0 0 5px 5px;
   z-index: 50;
   word-break: break-all;
   cursor: pointer;
}

.sharp:first-child {
   margin-left: 0;
   margin-right: -12.5px;
}

.sharp:hover {
   background-color: #555;
}

.sharp+.natural {
   margin-left: -12.5px;
}

#keyboard .absent {
   background-color: #ccc;
   color: #555;
}

#keyboard .sharp.absent {
   border: 1px solid #767676;
}

#keyboard .sharp.absent.selected {
   border-top: 1px solid #767676;
   border-left: 1px solid #fff;
   border-right: 1px solid #fff;
   border-bottom: 1px solid #fff;
}

#keyboard .absent.selected,
#keyboard .absent.selected:hover {
   background-color: #c588ff;
}

#keyboard-container {
   margin-top: 70px;
}

#keyboard-container,
#anglo-container,
#editor-anglo-container,
#editor-options-container {
   margin-left: auto;
   margin-right: auto;
   width: fit-content;
   max-width: 100%;
   overflow-x: auto;
}

#anglo-container {
   margin-top: 1rem;
}

#keyboard {
   display: flex;
   width: fit-content;
   /* white-space: nowrap; */
}

#chords {
   border: 1px solid #767676;
   border-top: none;
   border-radius: 0 0 8px 8px;
   width: fit-content;
   overflow-x: auto;
   max-width: 100%;
   white-space: nowrap;
   margin: 0 auto;
   visibility: hidden;
}



#chords button {
   height: 40px;
   padding: 0 1rem;
   border-left: 1px solid #767676;
   border-right: none;
   border-top: none;
   border-bottom: none;
   border-radius: 0;
   cursor: pointer;
}

#chords button:hover {
   background-color: #eee;
}

#chords button.selected {
   background-color: #CC0093;
   color: #fff;
}

#major {
   border-left: none !important;
}

#viewer-options {
   display: flex;
   text-align: left;
   max-width: fit-content;
   margin: 2rem auto;
   gap: 2rem;
   flex-wrap: wrap;
}

#view-preferences,
#bellows-preferences {
   display: flex;
   flex-direction: column;
}

#layout-actions {
   display: flex;
   gap: 4px;
   position: relative;
}

#editLayoutBtn,
#getLinkBtn {
   flex-grow: 1;
}

/* #layout-preferences div {
   display: flex;
   align-items: baseline;
   gap: 0.3rem;
} */

#viewer-options {
   margin-top: 1rem;
}

button {
   height: 30px;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   border: 1px solid #767676;
   border-radius: 5px;
   cursor: pointer;
}

button:hover {
   background-color: #eee;
}

button:active {
   background-color: #333;
   color: #fff;
}

select {
   height: 30px;
   background-color: white;
   border: 1px solid #767676;
   border-radius: 0%;
   margin-bottom: 0.5rem;
   cursor: pointer;
}

select:hover {
   background-color: #eee;
}

#layout {
   width: 100%;
}

#layout, #layout-actions button {
   font-size: 1rem;
}

#display-options {
   display: none;
   flex-direction: column;
   gap: 0.6rem;
   margin-top: 1rem;
}

#layout-preferences #first-row {
   display:flex;
   gap: 1.5rem;
}

#layout-preferences select,
#layout-preferences button {
   height: 40px;
}

#layoutActionsBtn {
   width: 40px;
}

#more-layout-actions {
	display: none;
	flex-direction: column;
	border: 1px solid #777;
	position: absolute;
	bottom: 40px;
	right: 0;
}

#more-layout-actions button {
	border: none;
	border-bottom: 1px solid #777;
	border-radius: 0;
	line-height: 40px;
	height: 40px;
}

#bellows-preferences-container {
   position: relative;
}

#bellows-preferences {
   display: none;
   position: absolute;
   right: -9px;
   top: -70px;
   flex-direction: row;
   gap: 6px;
   border: 1px solid black;
   padding: .5rem;
   width: fit-content;
   font-size: .8rem;
   background-color: #fff;
}

#layout-preferences #bellowsPickerBtn {
	height: 50px;
	width: 50px;
	border-radius: 25px;
	padding: 0;
	line-height: 50px;
   border-color: #000;
}

#bellowsPickerBtn span {
	display: block;
	height: 25px;
	line-height: 25px;
}

#bellowsPickerBtn span + span {
	border-top: 1px solid #000;
}

#bellows-preferences input {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
}

#bellows-preferences label {
   position: relative;
   display: block;
   box-sizing: border-box;
   cursor: pointer;
   border: 1px solid black;
   width: 50px;
   height: 50px;
   border-radius: 100%;
   text-align: center;
   padding: 0;
}

#bellows-preferences label:has(input:checked) {
   background-color: #3279ec;
   color: white;
   border: none;
}

#bellows-preferences label:has(input:focus) {
	outline: 2px solid #3279ec;
	outline-offset: 1px;
}

#bellows-preferences label span {
   display: block;
   height: 25px;
   line-height: 25px;
}

#bellows-preferences label span+span {
   border-top: 1px solid black;
}

#bellows-preferences label:has(input:checked) span+span {
   border-color: white;
}

#bellows-preferences label:not(:has(span)) {
   line-height: 50px;
}

#accidentals-label {
   margin-top: .6rem;
}

#accidentals {
   display: flex;
   flex-direction: row;
   gap: 4px;
}

#accidentals input {
	opacity: 0;
	position: absolute;
	top: 0;
	display: block;
	margin: 0;
	width: 100%;
	height: 100%;
}

#accidentals label {
   position: relative;
   display: block;
   flex-basis: 50%;
   box-sizing: border-box;
   cursor: pointer;
   border: 1px solid black;
   height: 40px;
   line-height: 40px;
   text-align: center;
   padding: 0;
}

#accidentals label:has(input:checked) {
   background-color: #3279ec;
   color: white;
   border: none;
}

#accidentals label:has(input:focus) {
   outline: 2px solid #3279ec;
	outline-offset: 1px;
}

label:has(input[type=checkbox]) {
   cursor: pointer;
}

.toggle {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 22px;
}

.toggle input {
   position: absolute;
   opacity: 0;
   width: 100%;
   height: 100%;
}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   border-radius: 11px;
   -webkit-transition: .1s;
   transition: .1s;
}

.slider:before {
   position: absolute;
   content: "";
   height: 16px;
   width: 16px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   border-radius: 50%;
   -webkit-transition: .1s;
   transition: .1s;
}

input:checked+.slider {
   background-color: #3279ec;
}

input:focus + .slider {
	outline: 2px solid #3279ec;
	outline-offset: 1px;
}

input:checked+.slider:before {
   -webkit-transform: translateX(18px);
   -ms-transform: translateX(18px);
   transform: translateX(18px);
}

.toggle .label {
   text-wrap: nowrap;
   line-height: 22px;
   margin-left: 48px;
}

/* #editLayoutBtn {
   flex-basis: 60%;
}

#getLinkBtn {
   flex-basis: 40%;
}

#drone-option {
   margin-bottom: 0.5rem;
}

button#addToLayoutsBtn,
button#removeFromLayoutsBtn {
   display: none;
   padding: 0;
   margin-top: 0.5rem;
   border-color: transparent;
   background-color: transparent;
   cursor: pointer;
}

button#removeFromLayoutsBtn:hover,
button#removeFromLayoutsBtn:active {
   color: #A30014;
   background-color: transparent;
   text-decoration: underline;
}

button#addToLayoutsBtn:hover,
button#addToLayoutsBtn:active {
   background-color: transparent;
   text-decoration: underline;
   color: #000;
} */

#anglo-keyboard,
#editor-anglo-keyboard {
   text-align: left;
   width: fit-content;
   white-space: nowrap;
}

.button {
   display: inline-block;
   width: 60px;
   height: 60px;
   white-space: normal;
}

.top {
   padding: 5px 5px 0 5px;
}

.bottom {
   padding: 0 5px 5px 5px;
}

.button .top button {
   position: relative;
   width: 50px;
   height: 25px;
   border-radius: 25px 25px 0 0;
   border: 1px solid #767676;
   border-bottom-width: 0.5px;
   box-sizing: border-box;
   cursor: pointer;
}

.button .top button:hover,
.button .bottom button:hover,
.natural:hover {
   background-color: #eee;
   color: #333;
}

.button .bottom button {
   position: relative;
   width: 50px;
   height: 25px;
   border-radius: 0 0 25px 25px;
   border: 1px solid #767676;
   border-top-width: 0.5px;
   box-sizing: border-box;
   cursor: pointer;
}

#keyboard .selected,
#keyboard .selected:hover {
   background-color: #8400FF;
   color: #fff;
   /* border-color: #fff; */
}

.natural.selected {
   border-bottom-color: #767676;
   border-top-color: #767676;
   border-left-color: #fff;
   border-right-color: #fff;
}

.pushpull .top button.selected,
.pushpull .top button.selected:hover,
.pullpush .bottom button.selected,
.pullpush .bottom button.selected:hover,
.push-only button.selected,
.push-only button.selected:hover {
   background-color: #0000FF;
   color: white;
}

.pushpull .bottom button.selected,
.pushpull .bottom button.selected:hover,
.pullpush .top button.selected,
.pullpush .top button.selected:hover,
.pull-only button.selected,
.pull-only button.selected:hover {
   background-color: #A30014;
   color: white;
}

.button.push-only .top,
.button.pull-only .bottom {
   padding: 5px;
}

.button.push-only .top button {
   height: 50px;
   border-radius: 25px;
   border: 1px solid #767676;
}

.button.push-only .bottom {
   display: none;
}

.button.pull-only .bottom button {
   height: 50px;
   border-radius: 25px;
   border: 1px solid #767676;
}

.button.pull-only .top {
   display: none;
}

/*========== HIGHLIGHT CONTROLS ============*/

/* #editHighlightsBtn, #moreDisplayOptionsBtn {
   display: inherit;
   line-height: 1.5;
   font-size: 1rem;
   padding: 0;
   margin-left: 1.3rem;
   color: inherit;
   border-color: transparent;
   background-color: transparent;
   cursor: pointer;
} */

/* #moreDisplayOptionsBtn {
   margin-left: 0;
} */

/* #editHighlightsBtn:hover, #editHighlightsBtn:active, #moreDisplayOptionsBtn:hover, #moreDisplayOptionsBtn:active {
   text-decoration: underline;
} */

#highlight-controls {
   display: none;
   text-align: left;
   max-width: fit-content;
   margin: 2rem auto;
   gap: 0.5rem;
   flex-wrap: wrap;
   align-items: center;
}

#highlight-colors {
   display: flex;
   gap: 6px;
}

#highlight-colors input[type="radio"] {
   position: absolute;
   opacity: 0;
   height: 100%;
   width: 100%;
   margin: 0;
}

#highlight-colors label {
   position: relative;
   height: 100%;
   height: 2rem;
   width: 2rem;
   border-radius: 1rem;
   cursor: pointer;
}

#highlight-colors label:has(input:checked) {
   outline: 2px solid black;
   outline-offset: 2px;
}

#highlight-colors label[for="red"] {
   background-color: red;
}

#highlight-colors label[for="orange"] {
   background-color: orange;
}

#highlight-colors label[for="green"] {
   background-color: green;
}

#highlight-colors label[for="blue"] {
   background-color: blue;
}

#highlight-colors label[for="pink"] {
   background-color: magenta;
}

#highlight-colors label[for="purple"] {
   background-color: purple;
}

.highlightable:not(.highlighted):hover {
   outline: 2px solid var(--highlightColor);
   outline-offset: -3px;
   border-radius: 100%;
}

.button.highlighted {
   outline: 4px solid red;
   outline-offset: -5px;
   border-radius: 100%;
}

.button.highlighted.orange {
   outline-color: orange;
}

.button.highlighted.green {
   outline-color: green;
}

.button.highlighted.blue {
   outline-color: blue;
}

.button.highlighted.pink {
   outline-color: magenta;
}

.button.highlighted.purple {
   outline-color: purple;
}

/* ===== VIEWER OPTIONS ===== */

#viewer-options #highlight-option {
   display: none;
}


/* ===== OCTAVE COLORS ===== */

.octave-top {
   height: 30px;
   width: 60px;
   z-index: 0;
   position: relative;
   margin: 0 0 -25px -5px;
}

.octave-bottom {
   height: 30px;
   width: 60px;
   z-index: 0;
   position: relative;
   margin: 0 0 -30px -5px;
}

#anglo-container.pretty .o2 {
   background-color: #FACD91;
}

#anglo-container.pretty .o3 {
   background-color: #FFFF80;
}

#anglo-container.pretty .o4 {
   background-color: #CAF982;
}

#anglo-container.pretty .o5 {
   background-color: #80FFFF;
}

#anglo-container.pretty .o6 {
   background-color: #81D3F8;
}

#anglo-container.pretty .o7 {
   background-color: #8080FF;
}

#keyboard-container.pretty .natural.o2 {
   box-shadow: 0 16px 0 0 #FACD91 inset;
}

#keyboard-container.pretty .natural.o3 {
   box-shadow: 0 16px 0 0 #FFFF80 inset;
}

#keyboard-container.pretty .natural.o4 {
   box-shadow: 0 16px 0 0 #CAF982 inset;
}

#keyboard-container.pretty .natural.o5 {
   box-shadow: 0 16px 0 0 #80FFFF inset;
}

#keyboard-container.pretty .natural.o6 {
   box-shadow: 0 16px 0 0 #81D3F8 inset;
}

#keyboard-container.pretty .natural.o7 {
   box-shadow: 0 16px 0 0 #8080FF inset;
}

#more-display-options {
   flex-direction: column;
   padding-left: 1rem;
   border-left: 2px solid #ccc;
   margin-bottom: 1rem;
}

#openComposerBtn {
	position: fixed;
	bottom: 0;
	left: 10px;
   display: flex;
   align-items: center;
   gap: .25rem;
	border-radius: 8px 8px 0 0;
	height: 50px;
	padding: 0 1rem;
   font-size: 1rem;
	background-color: #efefef;
	border: 4px solid #ccc;
	border-bottom: none;
}

#openComposerBtn svg,
#close-composer svg {
   height: 100%;
   width: 1.2em;
   fill: currentColor;
}

/* ===== COMPOSER ===== */

#composer-container {
   display: none;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #fff;
   margin-top: 2rem;
}

#close-composer {
	position: absolute;
	height: 40px;
   display: flex;
   align-items: center;
   gap: .25rem;
	background-color: #efefef;
	border: 4px solid #ccc;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	left: 10px;
	top: -36px;
   padding: 0 1rem;
   z-index: 1;
}

#composer {
   width: 100%;
   display: flex;
   flex-direction: column;
}

#composer-controls {
   border-top: 4px solid #ccc;
   display: flex;
   justify-content: space-between;
   gap: 2rem;
   overflow-x: auto;
   padding: 0.5rem;
   background-color: #efefef;
   position: relative;
}

#composer-controls select {
   margin-bottom: 0;
}

#composerActionsBtn {
   padding: 0;
   width: 30px;
}

#composerActionsBtn img {
   width: 26px;
}

/* TODO: rework this into something less bad */
#composer-controls div:has(#composition) {
	display: flex;
	gap: 4px;
}

#composition {
   max-width: 200px;
   text-overflow: ellipsis;
}

#composer-actions {
	flex-direction: column;
	position: fixed;
   top: 0;
	left: 0;
	background-color: #fff;
	border: 1px solid #777;
}

#composer-actions button {
   background-color: transparent;
   border: none;
   border-radius: 0;
   border-bottom: 1px solid #777;
   height: 40px;
   text-align: left;
}

#layout-mismatch {
   display: none;
   line-height: 1.9;
   white-space: nowrap;
}

#comp-layout-button {
   background: none;
   border: none;
   font-size: inherit;
   padding: 0px;
   color: inherit;
   text-decoration: underline;
}

#composer-controls div {
   white-space: nowrap;
}

#composer-help {
   line-height: 30px;
}

#timeline-container {
   display: flex;
}

#timeline {
   width: 100%;
   height: 100%;
   padding: 1rem;
   box-sizing: border-box;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   text-align: left;
   display: flex;
   gap: 1rem;
}

#timeline:has(.composer-frame):has(.marker) {
   padding-top: 2rem;
}

#new-composition-message {
   display: flex;
   align-items: center;
   line-height: 1.25;
   text-wrap: balance;
   text-align: center;
   color: #767676;
}

#new-composition-message button {
   padding: 0;
   border: none;
   font-size: inherit;
   color: #0000FF;
   border-radius: 0;
}

#new-composition-message button:hover {
   background-color: transparent;
   text-decoration: underline;
}

#playback-controls {
   display: flex;
}

#playback-controls button {
   height: 100%;
   padding: 0 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 4px;
   border-radius: 0;
}

#playback-controls button svg {
   width: 1.5rem;
   fill: currentColor;
}

.composer-frame {
   display: inline-block;
   position: relative;
}

.composer-frame button {
   display: inline-block;
   box-sizing: border-box;
   width: 3rem;
   height: 3.5rem;
   text-align: center;
   background: #ddd;
   background: linear-gradient(135deg, rgba(221, 221, 255, 1) 48%, rgba(255, 255, 255, 1) 48%, rgba(255, 255, 255, 1) 52%, rgba(255, 221, 221, 1) 52%);
   border: none;
}

.composer-frame[data-bellows="push-only"] button {
   background: #ddf;
}

.composer-frame[data-bellows="pull-only"] button {
   background: #fdd;
}

.composer-frame.selected button,
.composer-frame.selected button:hover {
   background: linear-gradient(135deg, rgba(0, 0, 255, 1) 50%, rgba(163, 0, 20, 1) 50%);
   color: #fff;
}

.composer-frame button:hover {
   border-top: 3px solid #0000ff;
   border-bottom: 3px solid #a30014;
   border-right: 3px solid #a30014;
   border-left: 3px solid #0000ff;
}

.composer-frame.selected[data-bellows="push-only"] button,
.composer-frame.selected[data-bellows="push-only"] button:hover {
   background: #0000FF;
   color: #fff;
}

.composer-frame[data-bellows="push-only"] button:hover {
   border: 3px solid #0000FF;
}

.composer-frame.selected[data-bellows="pull-only"] button,
.composer-frame.selected[data-bellows="pull-only"] button:hover {
   background: #A30014;
   color: #fff;
}

.composer-frame[data-bellows="pull-only"] button:hover {
   border: 3px solid #A30014;
}

.marker {
   display: inline-block;
   position: absolute;
   top: -1.6rem;
   left: 0;
   border: 1px solid #8400FF;
   background-color: #f5eaff;
   color: #5800aa;
   padding: 2px .5rem 0 .5rem;
   border-radius: 3px;
}

.composer-frame.selected .marker {
   background-color: #8400FF;
   color: #fff;
   z-index: 10;
}


/* ===== EDITOR ===== */

#editor {
   display: none;
   margin-top: 5rem;
}

#editor-header {
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
   max-width: 700px;
   /* flex-wrap: wrap; */
}

#editor-header input {
   height: 36px;
   padding-left: 0.5rem;
   font-size: 1.25rem;
   border-top: none;
   border-bottom: 1px solid #ccc;
   border-left: none;
   border-right: none;
   box-sizing: border-box;
   background-color: transparent;
   flex-basis: 66%;
   max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
}

#editor-header input:hover {
   border-bottom: 2px solid #999;
}

#editor-header input.invalid {
   border-color: red;
   border-width: 2px;
}

#cancelBtn {
   height: 36px;
   padding-left: 1rem;
   padding-right: 1rem;
   border: 1px solid #767676;
   border-radius: 5px;
}

#cancelBtn:hover {
   background-color: #eee;
}

#finishedBtn {
   height: 36px;
   padding-left: 1rem;
   padding-right: 1rem;
   border: none;
   background-color: #6CAC04;
   color: #fff;
   border-radius: 5px;
}

#finishedBtn:hover {
   background-color: #578609;
}

#editor-anglo-container {
   margin-top: 2rem;
}

.editor-button {
   display: inline-block;
   width: 60px;
   height: 60px;
   white-space: normal;
   /* background-color: pink; */
}

.editor-button.selected {
   background-color: #e6ccff;
   border-radius: 8px;
}

.editor-button .top {
   padding-bottom: 1px;
}

.editor-button .bottom {
   padding-top: 1px;
}

.editor-button input[type=text] {
   width: 50px;
   height: 24px;
   padding: 0;
   box-sizing: border-box;
   text-align: center;
   border: 1px solid #767676;
   font-family: monospace;
   font-size: 16px;
   /* has to be 16px instead of 1rem for iOS */
}

.editor-button input[type=text]:focus {
   outline: none;
}

.editor-button .top input {
   border-radius: 5px 5px 0 0;
}

.editor-button input[placeholder=push]:focus {
   border: 2px solid #0000FF;
}

.editor-button input[placeholder=push]:hover {
   background-color: #E9E9FF;
}

.editor-button .bottom input {
   border-radius: 0 0 5px 5px;
}

.editor-button input[placeholder=pull]:focus {
   border: 2px solid #A30014;
}

.editor-button input[placeholder=pull]:hover {
   background-color: #FFE7EA;
}

.editor-button input.invalid {
   border-color: red;
   border-width: 2px;
}

.editor-button.deleted {
   width: 0;
   opacity: 0;
}

#editor-options-container {
   /* overflow-x: auto; */
   margin: 2rem auto 0 auto;
   max-width: 100%;
}

#editor-options {
   display: flex;
   text-align: left;
   padding: 1rem 0;
   box-sizing: border-box;
   gap: 2rem;
   width: fit-content;
   max-width: 100%;
   margin: 0 auto;
   overflow-x: auto;
}

#editor-options div {
   padding: 0;
   white-space: nowrap;
}

#editor-options span {
   display: block;
}

#editor-options button {
   margin-top: 0.5rem;
}

#editor-options #deleteBtn {
   border-color: #A30014;
   color: #A30014;
}

#editor-options #deleteBtn:hover {
   background-color: #A30014;
   color: #fff;
}

#editor-error {
   max-width: 700px;
   margin: 1rem auto 1rem auto;
   text-align: left;
   display: none;
}

.error-text {
   color: #A30014;
   display: block;
   padding: 0.25rem;
   font-size: .825rem;
   margin-bottom: 0.5rem;
}

#mobile-note-picker {
   margin: 0 auto;
   width: fit-content;
   max-width: 100%;
   overflow-x: auto;
   background-color: #f5f5f5;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   display: flex;
   box-sizing: border-box;
}

#mobile-note-picker div {
   display: flex;
   width: 100%;
   padding: 0.2rem 0.4rem;
}

#mobile-notes,
#mobile-accidental {
   border-right: 1px solid #ccc;
}

#mobile-note-picker #picker-nav {
   display: none;
   border-left: 1px solid #ccc;
}


#mobile-note-picker button {
   height: 40px;
   background-color: transparent;
   border: none;
   border-radius: 5px;
   font-size: 1rem;
   min-width: 40px;
}

#mobile-note-picker button.selected,
#mobile-note-picker button.selected:hover {
   background-color: #8400FF;
   color: #fff;
}

#mobile-note-picker button:hover {
   background-color: #eee;
}


/* ===== MODALS ===== */

/* overlay */
.modal {
   display: none;
   position: fixed;
   z-index: 100;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(47, 79, 79);
   /* Fallback color */
   background-color: rgba(47, 79, 79, 0.6);
}

/* modal content */
.modal-content {
   background-color: #fff;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   padding: 1.5rem;
   border: 1px solid #888;
   width: calc(100% - 2rem);
   max-width: 400px;
   max-height: 100vh;
   text-align: left;
   border-radius: 8px;
   overflow-y: scroll;
   box-sizing: border-box;
}

.modal-content h2 {
   margin-top: 0;
}

.modal-content p {
   line-height: 1.3;
}

.modal-content input[type=text] {
   display: block;
   box-sizing: border-box;
   width: 100%;
   height: 25px;
   margin-bottom: 0.5rem;
}

.modal-content .error-text {
   visibility: hidden;
   border-width: 0;
}

.modal-actions {
   display: flex;
   justify-content: right;
   gap: 0.5rem;
   padding-top: .5rem;
}

.modal-actions:has(div) {
   justify-content: space-between;
}

.modal-actions .destructive {
   background-color: #eb0000;
   color: #fff;
   border: none;
}

.modal-actions .destructive:hover {
   background-color: #A30014;
}

.modal-actions .primary {
   background-color: #6CAC04;
   color: #fff;
   border: none;
}

.modal-actions .primary:hover {
   background-color: #578609;
}

.modal-content .success-text {
   color: #4D7A06;
   visibility: hidden;
   display: block;
   margin-bottom: 0.5rem;
}

.light-destructive {
   border-color: #A30014;
   color: #A30014;
}

.light-destructive:hover {
   background-color: #eb0000;
   border-color: #eb0000;
   color: #fff;
}

#share-highlights-preference {
   display: none;
}

/* close button */
.close {
   color: #aaaaaa;
   float: right;
   font-size: 28px;
   font-weight: normal;
}

.close:hover,
.close:focus {
   color: #000;
   text-decoration: none;
   cursor: pointer;
}

/* version info */
#version {
   background-color: #555;
   color: #fff;
   margin: 0 -1.5rem -1.5rem -1.5rem;
   padding: 0.8rem;
   border-radius: 0 0 7px 7px;
   text-align: center;
}

#version a,
#version a:visited {
   color: #fff;
}


/* ===== ARROWS, ICONS ===== */

.arrow::before {
   border-top: 3px solid #555;
   border-right: 3px solid #555;
   content: '';
   display: inline-block;
   height: 8px;
   width: 8px;
   left: 1px;
   position: relative;
   top: 1px;
   transform: rotate(-45deg);
   vertical-align: top;
}

.arrow.up:before {
   top: 3px;
}

.arrow.right:before {
   left: -2px;
   transform: rotate(45deg);
}

.arrow.down:before {
   top: 0;
   transform: rotate(135deg);
}

.arrow.left:before {
   left: 2px;
   transform: rotate(-135deg);
}

svg.icon-button {
   height: 100%;
   width: 100%;
   fill: currentColor;
}

#layout-preferences .accordion-button {
   display: flex;
   align-items: center;
   height: 20px;
	border: none;
	padding: 0;
	margin: 1rem 0;
	font-size: 1rem;
   border-radius: 0;
   background-color: transparent;
}

#layout-preferences .accordion-button:hover {
   background-color: transparent;
}

.accordion-button svg {
   height: 100%;
   width: 20px;
   fill: currentColor;
}

.accordion-button.closed .right {
   display: block;
}

.accordion-button.closed .down {
   display: none;
}

.accordion-button.open .right {
   display: none;
}

.accordion-button.open .down {
   display: block;
}


@media only screen and (max-width: 630px) {

   #viewer-options div:first-child {
      flex-grow: 1;
   }

   #layout {
      width: 100%;
      height: 40px;
   }

}



@media only screen and (max-width: 600px) {

   #timeline-container {
      flex-direction: column;
   }

   #playback-controls button {
      width: 50%;
      height: 40px;
      align-items: center;
   }

   #playback-controls button span {
      display: none;
   }

   #editor-header {
      flex-direction: column;
      justify-content: left;
   }

   #editor-header input {
      flex-basis: 100%;
      max-width: 100%;
   }

   #editor-actions {
      margin-top: 0.5rem;
      text-align: right;
   }

   #editor-anglo-container {
      padding-bottom: 14rem;
   }

   #editor-options-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #f5f5f5;
      border-top: 1px solid #ccc;
      display: flex;
      flex-direction: column-reverse;
      box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
   }

   #editor-options {
      padding: 0.5rem;
      margin-left: auto;
      margin-right: auto;
   }

   #editor-options button {
      height: 40px;
      min-width: 44px;
      margin-right: 4px;
      margin-top: 2px;
   }

   #mobile-note-picker {
      flex-wrap: wrap;
   }

   #mobile-note-picker button {
      flex-grow: 1;
      min-width: 33px;
      height: 50px;
   }

   #mobile-accidental {
      flex-basis: 20%;
      border-right: none;
   }

   #picker-nav {
      flex-basis: 40%;
   }

   #mobile-note-picker #picker-nav {
      display: flex;
   }
}

@media only screen and (max-width: 430px) {
   #viewer-options {
      max-width: 100%;
   }
}