app.css

html {
  -webkit-text-size-adjust: 100%; /* 2 */
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

body {
padding:0px; 
margin:0px;
touch-action: pan-x pan-y;
}

#app-container{
text-align: center;
}

.whistle {
font-family: 'TinWhistleFingering';
font-size: 50px;
}

.tabstrich {
display:none;
}

svg {
color:black;
}

.hidebutton {
display: none;
}

.toggle-buttons input[type="radio"] {
display: none;
}

.toggle-buttons label {
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: .6em;
margin-right:10px;
color:black;
-webkit-appearance:none;
}

.toggle-buttons input:checked + label {
background: #ebf5d7;
color: black;
box-shadow: none;
}

@media (hover: hover) {
	input:hover + label,
	input:focus + label {
	background: palegreen;
	}
}

#notation-holder {
text-align: center;
margin-bottom:50px;
height:100%;
display:none;
width:850px;
margin-left:auto;
margin-right:auto;
flex-flow:column;
}

#abc {
font-family:"Courier";
font-size: 13pt;
line-height: 16pt;
padding: 6px;
margin-top: 0px;
margin-bottom: 0px;
-webkit-appearance: none;
-moz-appearance: none;
}

.transpose {
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-right:15px;
margin-left:0px;
background-color: #EEEEEE;
color:black;
-webkit-appearance:none;
}

@media (hover: hover) {
	.transpose:hover{
	background: palegreen;
	}
}

.saveaspdf {
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:14px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
}

.saveaspdfdisabled {
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:14px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity: 0.4;
}

@media (hover: hover) {
	.saveaspdf:hover{
	background: palegreen;
	}
}

.toggleadvancedcontrols{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:5px;
margin-right:0px;
background-color: #E8FFFF;
color:black;
-webkit-appearance:none;
}

@media (hover: hover) {
	.toggleadvancedcontrols:hover{
	background: palegreen;
	}
}

.togglesharecontrols{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:16px;
margin-right:0px;
background-color: lavender;
color:black;
-webkit-appearance:none;
}

@media (hover: hover) {
	.togglesharecontrols:hover{
	background: palegreen;
	}
}

.advancedcontrols{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
background-color: #E8FFFF;
color:black;
-webkit-appearance:none;
}

.advancedcontrolsdisabled{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
background-color: #E8FFFF;
color:black;
-webkit-appearance:none;
opacity:0.4;
}

@media (hover: hover) {
	.advancedcontrols:hover{
	background: palegreen;
	}
}

.urlcontrols{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-right:10px;
margin-left:30px;
background-color: lavender;
color:black;
-webkit-appearance:none;
}

@media (hover: hover) {
	.urlcontrols:hover{
	background: palegreen;
	}
}

.urlcontrolsdisabled{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:16px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity:0.4;
}

.sortbutton{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
background-color: #EEEEEE;
color:black;
-webkit-appearance:none;
margin-left: 7px;
margin-right: 15px;
}

@media (hover: hover) {
	.sortbutton:hover{
	background: palegreen;
	}
}

.clearbutton{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
background-color: #FFCCCC;
color:black;
-webkit-appearance:none;
margin-left: 16px;
margin-right: 0px;
}

@media (hover: hover) {
	.clearbutton:hover{
	background: tomato;
	}
}

#selectabcfile{
-webkit-appearance:none !important;
}

.abcupload {
font-family:"Helvetica" !important;
font-size:11pt !important;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:14px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none !important;
}

#abc-selected{
font-family:"Helvetica" !important;
font-size:11pt !important;
-webkit-appearance: none !important;
margin-top:15px;
margin-bottom:1px;
}


#notenrechts{
margin-top:18px;
margin-left:12px;
display:none;
}

#inputarea{
margin-top:18px;
}

#tabs-selection{
margin-top:20px;
}

#pdf-settings{
margin-top:20px;	
}

#pdf-controls{
display:none;
}

#offscreenrender{
position:absolute; 
left:-2100px;
}

#advanced-controls{
display:none;
margin-top:20px;
}

#share-controls{
display:none;
margin-top:20px;
}

#staff-spacing{
width:50px;
margin-top:6px;
margin-left:4px;
}

.staff-spacing {
font-family:"Helvetica";
font-size:11pt;
}

#capo{
width:35px;
margin-top:6px;
margin-right:10px;
margin-left:4px;
}

.capo {
font-family:"Helvetica";
font-size:11pt;
}

#transpose-controls, #tabs-selection, #pdf-settings{
display:flex;
}


p{
font-size:11pt;
font-family:"Helvetica";
}

#pagestatustext{
font-family:"Helvetica";
font-size:11pt;
}

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
background-size: 12px;
background-position: calc(100% - 10px) center;
background-repeat: no-repeat;
background-color: #efefef;
color:black;
}

#pdfformatlabel{
font-size:11pt;
font-family:"Helvetica";
padding-top: 8px;
margin-left:0px;
margin-right:4px;
}

#pdfformat{
font-size:11pt;
font-family:"Helvetica";
height:32px;
width:213px;
margin-left:4px;
}

#pagenumberslabel{
font-size:11pt;
font-family:"Helvetica";
padding-top:8px;
margin-left:11px;
margin-right:8px;
}

#pagenumbers{
font-size:11pt;
font-family:"Helvetica";
height:32px;
width:152px;
margin-left:4px;
}

#firstpagelabel{
font-size:11pt;
font-family:"Helvetica";
padding-top:8px;
margin-left:11px;
margin-right:8px;
}

#firstpage{
font-size:11pt;
font-family:"Helvetica";
height:32px;
width:64px;
margin-left:4px;
}

#displayformatlabel{
font-size:11pt;
font-family:"Helvetica";
padding-top: 12px;
margin-left:0px;
margin-right:8px;
}

#qrcode{
position:absolute;
left:-3000px;
}

#urlarea{
display:none;
margin-top:9px;
margin-left: -11px;
}

#urltextbox{
font-family:"Courier";
margin-top:8px;
font-size:11pt;
resize: none;
-webkit-appearance: none;
-moz-appearance: none;
}

#testurl{
display:inline;
margin-right:20px	
}

#copyurl{
display:inline;
margin-right:20px	
}

#saveurl{
display:inline;
margin-left:20px	
}

#generateqrcode{
display:inline;
margin-left:25px;
}

#statuspdfname{
margin-top:22px;
font-family:"Helvetica";
font-size:12pt;
}

#statustunecount{
margin-top:13px;
font-family:"Helvetica";
font-size:12pt;
}

#pagestatustext{
margin-top:12px;
margin-bottom:12px;	
font-family:"Helvetica";
font-size:12pt;
}

#toggleannotations, #toggletext{
margin-right:10px;
}

#togglechords{
margin-right:10px;
}

#shareurlcaption{
margin-top:8px;
}

.saveabcfile{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:14px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity:1.0;
}

.saveabcfiledisabled{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:14px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity:0.4;
}

.toggleallcontrols{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:14px;
background-color: #FFF4E6;
color:black;
-webkit-appearance:none;
opacity:1.0;
}

.toggleallcontrolsdisabled{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:14px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity:0.4;
}

@media (hover: hover) {
	.toggleallcontrols:hover{
	background: palegreen;
	}
}

.copybutton{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
margin-left:0px;
margin-right:14px;
padding: 0.6em;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity:1.0;
}

.copybuttondisabled{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
margin-left:0px;
margin-right:14px;
padding: 0.6em;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity:0.4;
}

@media (hover: hover) {
	.copybutton:hover{
	background: palegreen;
	}
}

.playbutton{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
margin-left:0px;
margin-right:14px;
padding: 0.6em;
background-color: #C8ECFE;
color:black;
-webkit-appearance:none;
opacity:1.0;
}

.playbuttondisabled{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
margin-left:0px;
margin-right:14px;
padding: 0.6em;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity:0.4;
}

@media (hover: hover) {
	.playbutton:hover{
	background: palegreen;
	}
}

.newabcfile{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:14px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity:1.0;
}

@media (hover: hover) {
	.newabcfile:hover{
	background: palegreen;
	}
}

.toggletopbar{
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:0px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
opacity:1.0;
}

@media (hover: hover) {
	.toggletopbar:hover{
	background: palegreen;
	}
}

#fileoperations{
text-align:center;
margin-top:16px;
}

@media (hover: hover) {
	.saveabcfile:hover{
	background: palegreen;
	}
}

.noscroller{
background-color: #FAFAFF;
position:fixed;
top: 0px;
width:850px;
z-index: 100;
padding-bottom:16px; 
display:none;
margin-right:auto;
}

#notation-spacer{
background-color: white;
width:850px;
margin-right: 24px;
}

#shareurlcaption{
margin-bottom:-16px;
}

#notenlinks{
padding-top:12px;
}

.zoombutton{
position:fixed;
width:48px;
height:48px;
right:24px;
top:16px;
padding:4px;
z-index:101;
display:none;
}

#notation-placeholder{
margin-top: 100px;
font-family:"Helvetica";
font-size:12pt;
display:none;
width:850px;
background-color:white;

}

.toggletabnames {
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:10px;
background-color: #E8FFFF;
color:black;
-webkit-appearance:none;
}

.toggletabnamesdisabled {
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-left:0px;
margin-right:10px;
background-color: #E8FFFF;
color:black;
-webkit-appearance:none;
opacity: 0.4;
}

/* Spinner */
#loading-bar-spinner.spinner {
left: 50%;
margin-left: -23px;
top: 25%;
margin-top: -23px;
position: fixed;
z-index: 101 !important;
animation: loading-bar-spinner 400ms linear infinite;
display:none;
}

#loading-bar-spinner.spinner .spinner-icon {
width: 46px;
height: 46px;
border:  solid 4px transparent;
border-top-color:  #00C8B1 !important;
border-left-color: #00C8B1 !important;
border-radius: 50%;
}

@keyframes loading-bar-spinner {
0%   { transform: rotate(0deg);   transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}

/* For better tune visual layout on the displayed version.
   Has no effect on the PDF output.
*/
.tunespacer{
margin-bottom:32px;
}


.relativebox {
position:relative;
float:left;
}

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 102; /* Sit on top */
padding-top: 200px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 600px;
}

.cancelpdf {
font-family:"Helvetica";
font-size:11pt;
border: 1px solid #333;
border-radius: 0.3em;
padding: 0.6em;
margin-top: 12px;
margin-bottom: 12px;
background-color: #FFFFFF;
color:black;
-webkit-appearance:none;
}

#fontholder{
position:absolute; 
left:-5000px;
}

@media (hover: hover) {
	.cancelpdf:hover{
	background: palegreen;
	}
}


@media (hover: hover) {
	.toggletabnames:hover{
	background: palegreen;
	}
}

@media (hover: hover) {
	.zoombutton:hover{
	background: palegreen;
	}
}


@media print {
  	.hidden-print {
    display: none !important;
  }
}

/* Browser-based print optimizations */
@media print {

	#app-container{
		width: 100% !important;
		padding: 0px !important;
		margin-left: 0% !important;
		margin-right: 0% !important;
	}

	.notation-holder{
		display: inline-block !important;
		text-align: center !important;
		margin-bottom:0px !important;
		width:97% !important;
		margin-left: 3% !important;
		margin-right: 0% !important;
		position:static !important;
		left: 0% !important;
		right: 0% !important;
		flex-flow: unset !important;
	}

	.relativebox {
		position:static !important;
		float:none !important;
		flex-flow:unset !important;
	}

    .pagebreak { 
     	page-break-after:always !important; 
		width:97% !important;
		margin-left: 1% !important;
		margin-right: 0% !important;
     	position:static !important;
     	display: block !important;
      	flex-flow: unset;

    } 
}

/* For modal dialog prompt replacement */
.modal_flat_background { background-color: #000; opacity: 0.4; }
.modal_flat_main { border: 1px solid #333; box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);  }

/* font size only */
.modal_flat_main, .modal_flat_main input, .modal_flat_main button {  font-size: 16px; }

.modal_flat_main input, .modal_flat_main button {  padding: 5px; box-sizing: border-box; }
.modal_flat_inner { padding: 30px; background: #fff; color: #000; }
.modal_flat_content { font-family:"Helvetica"; margin: 20px 0px;}
.modal_flat_input { margin: 20px 0px;}
.modal_flat_buttons { margin-top: 40px; }
.modal_flat_main button { background-color: #ccc; color: #000; padding: 10px 20px; border: 0px; cursor: pointer; outline: none; width: 100px;  }
.modal_flat_cancel {margin-left: 5px;}