:root {
  --online: hsl(84, 49%, 52%);
  --offline: hsl(59, 100%, 75%);

  --editpanelWidth: 300px;
  --notespanelWidth: 280px;
  --openpanelSpeed: 0.3s;
  --transitionSpeed: 0.3s;


  --modeTxtCol: #222;
  --modeBgCol:#fff;
  --modePanelTxtCol: #333;
  --modePanelBgCol: #eee;
  --modeTtlCol: #999;
  --modeFeatureCol:  hsl(84, 49%, 45%);

  /* Default Theme */

  --themeTxtCol: #ededed;
  --themeBgCol: #3f7ba6;
  --themePnlBgCol: #789dbe;
  --themeLiTxtCol: #3f7ba6;
  --themeLiBgCol: #eef2f7;
  --themeLiActiveTxtCol: #ededed;
  --themeLiActiveBgCol: #0e5a82;
  --themeSrchTxtCol: #3f7ba6;
  --themeSrchBgCol: #ededed;
  --themeSrchPhCol: #789dbe;
  --themePlTxtCol: #ededed;
  --themePlBgCol: #3f7ba6;
  --themePlTrackCol: #3f7ba6;
  --themeFeatureLite: #3f7ba6;
  --themeFeatureDark: #789dbe;



  --font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";


  --defFontSize: 1.8rem;
  --defLineHeight: 1.6;


  --lyricFontSize: 1.8rem;

  --delBgCol: hsl(341, 73%, 43%);
  --svgDel: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" viewBox="0 0 512 512"><path fill="white" d="M296 64h-80a7.91 7.91 0 0 0-8 8v24h96V72a7.91 7.91 0 0 0-8-8"/><path fill="none" d="M292 64h-72a4 4 0 0 0-4 4v28h80V68a4 4 0 0 0-4-4"/><path fill="white" d="M447.55 96H336V48a16 16 0 0 0-16-16H192a16 16 0 0 0-16 16v48H64.45L64 136h33l20.09 314A32 32 0 0 0 149 480h214a32 32 0 0 0 31.93-29.95L415 136h33ZM176 416l-9-256h33l9 256Zm96 0h-32V160h32Zm24-320h-80V68a4 4 0 0 1 4-4h72a4 4 0 0 1 4 4Zm40 320h-33l9-256h33Z"/></svg>');



  --svgRemove: url('data:image/svg+xml;utf8,<svg width="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><path d="M5 3H3v14h14V3H5zm10 2v10H5V5h10zm4 2v12H7v2h14V7h-2zm-6 2H7v2h6V9z" fill="black"></path></g></svg>');


  --svgArchive: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" viewBox="0 0 36 36"><path fill="white" d="M19.41 20.6L18 22l-1.41-1.4L16 20H5v12a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V20H20ZM22 24a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1" class="clr-i-solid clr-i-solid-path-1"/><path fill="white" d="M30.5 12h-3.84v.13a3 3 0 0 1-.88 2.12L22 18h10v-4.5a1.5 1.5 0 0 0-1.5-1.5" class="clr-i-solid clr-i-solid-path-2"/><path fill="white" d="M10.2 14.25a3 3 0 0 1-.88-2.12s0-.09 0-.13H5.5A1.5 1.5 0 0 0 4 13.5V18h10Z" class="clr-i-solid clr-i-solid-path-3"/><path fill="white" d="m18 19.18l6.38-6.35A1 1 0 1 0 23 11.41l-4 3.95V3a1 1 0 1 0-2 0v12.4l-4-3.95a1 1 0 0 0-1.41 1.42Z" class="clr-i-solid clr-i-solid-path-4"/><path fill="none" d="M0 0h36v36H0z"/></svg>');

  --svgStar: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" width="30px" fill="" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <path fill="gold" d="M11.245 4.174C11.4765 3.50808 11.5922 3.17513 11.7634 3.08285C11.9115 3.00298 12.0898 3.00298 12.238 3.08285C12.4091 3.17513 12.5248 3.50808 12.7563 4.174L14.2866 8.57639C14.3525 8.76592 14.3854 8.86068 14.4448 8.93125C14.4972 8.99359 14.5641 9.04218 14.6396 9.07278C14.725 9.10743 14.8253 9.10947 15.0259 9.11356L19.6857 9.20852C20.3906 9.22288 20.743 9.23007 20.8837 9.36432C21.0054 9.48051 21.0605 9.65014 21.0303 9.81569C20.9955 10.007 20.7146 10.2199 20.1528 10.6459L16.4387 13.4616C16.2788 13.5829 16.1989 13.6435 16.1501 13.7217C16.107 13.7909 16.0815 13.8695 16.0757 13.9507C16.0692 14.0427 16.0982 14.1387 16.1563 14.3308L17.506 18.7919C17.7101 19.4667 17.8122 19.8041 17.728 19.9793C17.6551 20.131 17.5108 20.2358 17.344 20.2583C17.1513 20.2842 16.862 20.0829 16.2833 19.6802L12.4576 17.0181C12.2929 16.9035 12.2106 16.8462 12.1211 16.8239C12.042 16.8043 11.9593 16.8043 11.8803 16.8239C11.7908 16.8462 11.7084 16.9035 11.5437 17.0181L7.71805 19.6802C7.13937 20.0829 6.85003 20.2842 6.65733 20.2583C6.49056 20.2358 6.34626 20.131 6.27337 19.9793C6.18915 19.8041 6.29123 19.4667 6.49538 18.7919L7.84503 14.3308C7.90313 14.1387 7.93218 14.0427 7.92564 13.9507C7.91986 13.8695 7.89432 13.7909 7.85123 13.7217C7.80246 13.6435 7.72251 13.5829 7.56262 13.4616L3.84858 10.6459C3.28678 10.2199 3.00588 10.007 2.97101 9.81569C2.94082 9.65014 2.99594 9.48051 3.11767 9.36432C3.25831 9.23007 3.61074 9.22289 4.31559 9.20852L8.9754 9.11356C9.176 9.10947 9.27631 9.10743 9.36177 9.07278C9.43726 9.04218 9.50414 8.99359 9.55657 8.93125C9.61593 8.86068 9.64887 8.76592 9.71475 8.57639L11.245 4.174Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>');  

  --svgStar2: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" width="22px" fill="" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <path fill="gold" d="M11.245 4.174C11.4765 3.50808 11.5922 3.17513 11.7634 3.08285C11.9115 3.00298 12.0898 3.00298 12.238 3.08285C12.4091 3.17513 12.5248 3.50808 12.7563 4.174L14.2866 8.57639C14.3525 8.76592 14.3854 8.86068 14.4448 8.93125C14.4972 8.99359 14.5641 9.04218 14.6396 9.07278C14.725 9.10743 14.8253 9.10947 15.0259 9.11356L19.6857 9.20852C20.3906 9.22288 20.743 9.23007 20.8837 9.36432C21.0054 9.48051 21.0605 9.65014 21.0303 9.81569C20.9955 10.007 20.7146 10.2199 20.1528 10.6459L16.4387 13.4616C16.2788 13.5829 16.1989 13.6435 16.1501 13.7217C16.107 13.7909 16.0815 13.8695 16.0757 13.9507C16.0692 14.0427 16.0982 14.1387 16.1563 14.3308L17.506 18.7919C17.7101 19.4667 17.8122 19.8041 17.728 19.9793C17.6551 20.131 17.5108 20.2358 17.344 20.2583C17.1513 20.2842 16.862 20.0829 16.2833 19.6802L12.4576 17.0181C12.2929 16.9035 12.2106 16.8462 12.1211 16.8239C12.042 16.8043 11.9593 16.8043 11.8803 16.8239C11.7908 16.8462 11.7084 16.9035 11.5437 17.0181L7.71805 19.6802C7.13937 20.0829 6.85003 20.2842 6.65733 20.2583C6.49056 20.2358 6.34626 20.131 6.27337 19.9793C6.18915 19.8041 6.29123 19.4667 6.49538 18.7919L7.84503 14.3308C7.90313 14.1387 7.93218 14.0427 7.92564 13.9507C7.91986 13.8695 7.89432 13.7909 7.85123 13.7217C7.80246 13.6435 7.72251 13.5829 7.56262 13.4616L3.84858 10.6459C3.28678 10.2199 3.00588 10.007 2.97101 9.81569C2.94082 9.65014 2.99594 9.48051 3.11767 9.36432C3.25831 9.23007 3.61074 9.22289 4.31559 9.20852L8.9754 9.11356C9.176 9.10947 9.27631 9.10743 9.36177 9.07278C9.43726 9.04218 9.50414 8.99359 9.55657 8.93125C9.61593 8.86068 9.64887 8.76592 9.71475 8.57639L11.245 4.174Z" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>');

}

::selection {
  background: transparent;
}

body {
  background: #eeeeee;
  user-select: none;
  touch-action: none;
  overflow: hidden;
}

a {
  color: inherit;
  background-color: transparent;
  text-decoration: none;
}

a:active, a:hover {
  outline: 0;
}

input, textarea, select, button {
  font-size: inherit;
  font-family: inherit;
}

img {
  border: 0;
}

ul, li {
  list-style: none;
}

.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 1.0;
  transition: opacity var(--transitionSpeed) ease;
  cursor: pointer;
  /* overflow: hidden; */
}

.fullbutton {
  position: relative;
  padding: 5px 25px;
  height: 50px;
  border-radius: 6px;
  color: var(--modeBgCol);
  background: var(--modeTxtCol);
  opacity: 1.0;
  transition: opacity var(--transitionSpeed) ease;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.button *, .fullbutton * {
  pointer-events: none;
}    

.button:hover, .fullbutton:hover {
  /* opacity: 0.7; */
}

.button svg {
  position: absolute;
  width: 88%;
  height: 88%;
  fill: var(--themeTxtCol);
  transition: opacity var(--transitionSpeed) ease;
}

[data-text] {
  position: relative;
}

[data-text]::before {
  position: absolute;
  content: attr(data-text);
  display: block;
  white-space: nowrap;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--themeTxtCol);
  font-size: 1rem;
  text-transform: uppercase;
}

.active {
  opacity: 1;
}

.inactive {
  opacity: 0;
}

#onlinestatus {
  height: 6px;
  background: var(--online);
}
.offline {
  background: var(--offline) !important;
}


#wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  color: var(--themeTxtCol);
  background: var(--themeBgCol);
  font-size: 1.8rem;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
  pointer-events: none;
  overflow: hidden;
}

#wrapper.show {
  opacity: 1.0;
  pointer-events: auto;
}

#main-content {
  position: relative;
  overflow: hidden;
}

 /* INDEX PANEL STYLES */

 #index-panel {
  position: relative;
  margin-left: calc(var( --editpanelWidth) * -1);
  width: var( --editpanelWidth);
  background: #eee;
  transition: margin-left var(--openpanelSpeed) ease-in-out;
  touch-action: pan-y; 
  z-index: 15;
}

#index-panel.open {
  margin-left: 0px;
}

#settings {
  position: relative;
  padding: 35px 0 15px 8px;
  background-color: var(--themeBgCol);
}

#settings .button {
  margin-right: 8px;
  padding: 4px;
  color: var(--themeTxtCol);
  fill: currentColor;
  stroke: currentColor;
}

#settings .button line {
  stroke: currentColor;
}

.top-menu {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 200px;
  padding: 10px 0 20px;
  color: var(--themeBgCol);
  background-color: var(--themeTxtCol);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
  z-index: 1000;
}

.top-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.top-menu li {
  padding: 5px 15px;
  cursor: pointer;
}


#lcntr:before {
  content: "(";
}

#lcntr:after {
  content: ")";
}

#playlist-controls {
  position: relative;
  color: var(--themeTxtCol);
  background: var(--themeBgCol);
}

#playlist-controls .wrap {
  overflow-wrap: break-word;
  word-break: break-all;
  hyphens: auto;
  color: var(--themePlTxtCol);
  background: var(--themePlBgCol);
  border-right: 1px solid var(--themePlTxtCol);
}

[data-btnid=new-options]{
  position: relative;
  padding-bottom: 15px;
  width: 55px;
  height: 55px;
  color: var(--themePlTxtCol);
  background: var(--themePlBgCol);
}

[data-btnid=new-options] svg {
  width: 65%;
  height: 65%;
  fill: var(--themePlTxtCol);
}

[data-btnid=new-options] * {
  pointer-events: none;
}

[data-btnid=new-options]::before {
  color: var(--themePlTxtCol);
  bottom: 3px;
  font-weight: 400;
}

.setlistmod {
  margin: 0;
  padding: 0;
  width: 90%;
  max-width: 650px;
  border: none;
  border-radius: 6px;
  color: var(--themePlTxtCol);
  background: var(--themePlBgCol);
}

.setlistmod header {
  position: relative;
  height: 55px;
}

.setlistmod #close {
  color: var(--themePlTxtCol);
}

.setlistmod main {
  position: relative;
  padding: 0 25px;
}

[data-type="edit-only"] {
  display: none;
}

[data-type="edit-only"].show {
  display: flex;
}

.tuner {
  margin: 0;
  padding: 0;
  border: none;
  width: auto;
  height: auto;
  color: #eeeeee;
  background: #222222;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tuner header {
  position: relative;
  padding-right: 65px;
  height: 45px;
  background: inherit;
}

.tuner p {
  padding: 5px;
  text-align: center;
}


/* DIALOG BOX BASE SETTINGS */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
  z-index: 1000;
}

.overlay.fade-out {
  animation: fadeOut 0.5s ease-in-out;
}

#dialog-header {
  position: relative;
  padding: 0 73px 0 8px;
  height: 65px;
  font-size: clamp(1.6rem, 0.956vw + 1.694rem, 3rem);
  color: var(--modePanelTxtCol);
  background: var(--modePanelBgCol);
  text-align: center;
  overflow: hidden;
}

#dialog-main {
  position: relative;
  padding: 25px;
  overflow-y: auto;  
}

#dialog-main h3 {
  font-size: 2.2rem;
}

#dialog-footer {
  height: 45px;
  color: var(--modePanelTxtCol);
  background: var(--modePanelBgCol);
}

#close{
  position: absolute;
  top: 0;
  right: 0;
  width: 65px;
  height: 65px;
  color: var(--themePlTxtCol);
  background: var(--themePlBgCol);
  font-size: 2.8rem;
  z-index: 1000;
}


/* APP SETTINGS DIALOG */

.app-settings {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  width: 95%;
  height: 95%;
  color: var(--modeTxtCol);
  background: var(--modeBgCol);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.col-panel {
  margin-top: 60px;
  margin-bottom: 50px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  color: var(--modeTxtCol);
  background: var(--modeBgCol);
  gap: 20px;
}

.pallet-cell {
  position: relative;
  margin-bottom: 32px;
  height: 35px;
  border: 1px solid #999;
  cursor: pointer;
}

.pallet-cell * {
  pointer-events: none;
}

.pallet-cell::before {
  position: absolute;
  content: attr(data-title);
  top: -28px;
  left: 0;
  color:  var(--modeTxtCol);
  font-size: 1.6rem;
}

.pallet-cell.active {
  outline: 3px solid var(--themeFeatureLite);
}

.pallet-cell.active::before {
  color: var(--themeFeatureLite);
  content: "\2605  " attr(data-title);
}


/* APP SETTINGS DIALOG */

.fit-settings {
  margin: 0;
  padding: 0;
  width: 300px;
  border: none;
  color: var(--modeTxtCol);
  background: var(--modeBgCol);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fit-settings header {
  position: relative;
  padding: 0 65px 0 25px;
  height: 65px;
  color: var(--modePanelTxtCol);
  background: var(--modePanelBgCol);
}

.fit-settings main {
  position: relative;
  padding: 10px 25px 45px;
}

.fit-settings h3 {
  margin: 25px 0 5px;
  padding: 0;
  font-size: 1.6rem;
}

.fit-settings .fullbutton {
  padding: 10px;
  font-size: 1.6rem;
}

.fit-settings  .fullinput {
  margin-bottom: 10px;
  position: relative;
  padding: 10px;
  font-size: 1.6rem;
  border-radius: 6px;
  border: 1px solid var(--modeTxtCol);
  color: var(--modeTxtCol);
  background: var(--modeBgCol);
  cursor: pointer;
}



.button-wrapper {
  margin: auto;
  width: 100%;
  max-width: 768px;
  gap: 20px;
}

.button-wrapper, .convert-wrapper {
  margin-top: 8px;
  margin-bottom: 50px;
  flex-direction: column;
}

.convert-wrapper {
  gap: 20px;
}

.fullbutton {
  padding: 10px;
  font-size: 1.8rem;
}

.fullinput {
  position: relative;
  padding: 10px;
  font-size: 1.8rem;
  border-radius: 6px;
  border: 1px solid var(--modeTxtCol);
  color: var(--modeTxtCol);
  background: var(--modeBgCol);
  cursor: pointer;
}

#convertedresults {
  margin: 15px 0 50px;
  padding: 15px;
  border: 1px solid var(--modeTxtCol);
  border-radius: 6px;
  color: var(--modeTxtCol);
  background: var(--modeBgCol);
  font-size: 1.8rem;
  height: 150px;
  overflow-y: auto;
}


/* Universal Dialog Box */

.universal-viewer {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
  color: var(--modeTxtCol);
  background: var(--modeBgCol);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.universal-viewer #dialog-main {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--modeBgCol);
  display: flex;
  overflow: hidden;
}

.universal-viewer #dialog-footer {
  height: auto;
  color: var(--modeTxtCol);
  background: var(--modeBgCol);
  border-top: 2px solid var(--modeTxtCol);
}

.control-wrapper {
  padding: 6px 15px 22px;
  display: flex;
  gap: 10px;
}

.universal-viewer .button {
  position: relative;
  width: 60px; 
  height: 40px;
  opacity: 1;
  transition: opacity var(--transitionSpeed) ease;
  pointer-events: auto;
  cursor: pointer;
}

.universal-viewer .button.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.universal-viewer .button svg {
  fill: var(--modeTxtCol);
}

.universal-viewer .advance {
  width: 35px; 
  height: 80px;
}

.universal-viewer [data-text]::before {
  color: var(--modeTxtCol);
}

[data-dialog="pdf-viewer"] #close {
  top: 15px;
  right: 15px;
  color: white;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 9px;
}

[data-dialog="pdf-viewer"] #dialog-header {
  display: none;
}

[data-btnid="slide-num-max"] {
  margin: auto;
  padding-top: 10px;
  width: 10ch;
  height: 46px;
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
  pointer-events: none;
}

[data-btnid="slide-num-max"].show {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

[data-btnid="prevSlide"] .button{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-weight: bold;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
}

[data-btnid="nextSlide"] .button{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-weight: bold;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
}

#file-upload {
  display: none;
}

.half-page {
  position: relative;
  flex: 1;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  cursor: pointer;
}

.fs-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}

.karaoke-display {
  position: relative;
  padding: 35px;
  width: 100%;
  height: 100%;
  font-size: clamp(1.8rem, 3.442vw + 0.699rem, 5.4rem);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.select-options {
  margin: 0;
  padding: 0;
  width: 90%;
  max-width: 450px;
  border: none;
  border-radius: 6px;
  color: var(--themePlTxtCol);
  background: var(--themePlBgCol);
}

.select-options header {
  position: relative;
  height: 55px;
}

.select-options #close {
  color: var(--themePlTxtCol);
}

.select-options main {
  padding: 20px;
  position: relative;
}

.select-options li {
  margin-bottom: 30px;
  text-align: left;
}

.select-options h3 {
  font-size: 1.8rem;
  font-weight: bold;
}

.select-options input {
  padding: 10px;
  font-size: 1.6rem;
  border: 2px solid var(--themePlTxtCol);
  border-radius: 6px;
}

.select-options button {
  padding: 10px;
  height: 100%;
  width: 100%;
  color: var(--themePlBgCol);
  background: var(--themePlTxtCol);
  font-size: 1.8rem;
  border: none;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
}

.inp-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}



#playlist-content {
  position: absolute;
  display: none;
} 


#playlist-wrapper {
  position: relative;
  width: 100%;
  background: var(--themePnlBgCol);
}


 /* SEARCH BAR FOR PLAYLIST LYRICS */

.search-container {
  position: relative;
  display: inline-block;
}

#search {
  padding: 15px;
  padding-right: 15px;
  width: 100%;
  color: var(--themeSrchTxtCol);
  background-color: var(--themeSrchBgCol);
  border: none;
  outline: none;
  font-size: 1.8rem;
  border-radius: 0;
}

#search:focus {
  border: none;
  outline: none;
}

.clear-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  color: var(--themeSrchTxtCol);
  transform: translateY(-50%);
  font-size: 2.2rem;
  cursor: pointer;
  display: none;
}

#search::placeholder {
  color: var(--themeSrchPhCol);
  opacity: 1;
}

#search::-moz-placeholder {
  opacity: 1;
}

[data-btnid=rename] {
  position: relative;
  cursor: pointer;
}


#index-container {
  width: 100%;
}

.index-item {
  position: relative;
  width: 100%;
  height: 75px;
  background: #666666;
  background: var(--themeLiBgCol);
  transition: 150ms ease-in-out;
  overflow: hidden;
  touch-action: pan-y;
}

.mod-item {
  position: relative;
  padding: 8px 15px;
  width: 100%;
  height: 75px;
  font-size: 1.8rem;
  color: var(--themeLiTxtCol);
  background: var(--themeLiBgCol);
  border-bottom: 2px solid var(--themePnlBgCol);
  cursor: pointer;
}

.index-select {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 15px 8px 25px;
  width: 100%;
  height: 100%;
  font-size: 1.8rem;
  color: var(--themeLiTxtCol);
  background: var(--themeLiBgCol);
  border-bottom: 1px solid var(--themePnlBgCol);
  transition: 400ms cubic-bezier(0.25, 1, 0.5, 1.5);
  cursor: pointer;
}

.index-select * {
  pointer-events: none;
}

.index-select h4, .index-select p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index-select h4, .mod-item h4 {
  margin: 3px 0;
  line-height: 1;
  font-size: 1.8rem;
}

.index-select p, .mod-item p {
  opacity: 0.7;
  font-size: 1.4rem;
  line-height: 1.2;
  text-transform: capitalize;
}

.index-item.active, .index-item.active > .index-select {
  color: var(--themeLiActiveTxtCol);
  background: var(--themeLiActiveBgCol);
}


.fave {
  position: absolute;
  top: 6px;
  left: 0;
  width: 26px;
  height:  26px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: var(--svgStar2);
  pointer-events: none;
}

.archived {
  display: none;
}

.disappearTop {
  height: 0;
}

.slideLI {
  transform: translateX(-165px)
}

[data-btnid="fave"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 55px;
  height: 100%;
  background-color: #000000;
  background-repeat: no-repeat;
  background-position: 50% 12px;
  background-image: var(--svgStar);
  cursor: pointer;
}

[data-btnid="fave"] span {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-btnid="fave"] span::before {
  content: '';
  position: absolute;
  top: .7rem;
  left: .7rem;
  width: 4rem;
  height: 4rem;
  background: none;
}

[data-btnid="fave"].show-line > span::before {
  background: linear-gradient(to bottom right, transparent 45%, var(--delBgCol) 55%, transparent 55%);
}

[data-btnid="trash"] {
  position: absolute;
  top: 0;
  right: 55px;
  width: 55px;
  height: 100%;
  background-color: var(--delBgCol);
  background-repeat: no-repeat;
  background-position: 50% 12px;
  background-image: var(--svgDel);
  cursor: pointer;
}

[data-btnid="archive"] {
  position: absolute;
  top: 0;
  right: 110px;
  width: 55px;
  height: 100%;
  background-color: #666666;
  background-repeat: no-repeat;
  background-position: 50% 11px;
  background-image: var(--svgArchive);
  cursor: pointer;
}

[data-btnid="indexFiller"] {
  position: absolute;
  top: 0;
  right: 165px;
  width: 35px;
  height: 100%;
  background-color: #666666;
}

[data-btnid="trash"]::before, [data-btnid="fave"]:before, [data-btnid="archive"]:before {
  position: absolute;
  content: attr(data-text);
  display: block;
  white-space: nowrap;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 1rem;
  text-transform: uppercase;
}

[data-btnid="remove-from-setist"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 165px;
  height: 100%;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: 50% 12px;
  background-image: var(--svgRemove);
  border-bottom: 1px solid var(--themePnlBgCol);
  cursor: pointer;
}

[data-btnid="remove-from-setist"]:before {
  position: absolute;
  content: attr(data-text);
  display: block;
  white-space: nowrap;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: black;
  font-size: 1rem;
  text-transform: uppercase;
}


.crossout {
  margin-top: 5px;
  margin-left: 2px;
  background: var(--delBgCol);
  width: 2px;
  height: 32px;
  transform: rotate(145deg);
  pointer-events: none;
  display: none;
}

.crossout.show {
  display: block;
}

.popup {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--modePanelTxtCol);
  background: var(--modePanelBgCol);
  border: 1px solid var(--modePanelTxtCol);
  padding: 3px 8px;
  font-size: 1.4rem;
  white-space: nowrap;
  border-radius: 6px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 10000;
}

 /* NOTES PANEL STYLES */

#notes-panel {
  position: relative;
  padding-top: 50px;
  margin-right: calc(var(--notespanelWidth) * -1);
  width: var(--notespanelWidth);
  color: var(--modePanelTxtCol);
  background: var(--modePanelBgCol);
  transition: margin-right var(--openpanelSpeed) ease-in-out;
}

#notes-panel.open {
  margin-right: 0px;
}

.spacer {
  height: 100px;
}

#notes-wrapper {
  position: relative;
  width: 100%;
}

.note-block {
  margin-bottom: 20px;
  padding: 0 10px;
  width: 100%;
}

.note-block h3 {
  margin: 0;
  padding-top: 20px;
  color: var(--themeFeatureLite);
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: uppercase;
}

.note-block input, .note-block textarea {
  font-size: 1.6rem;
}

.note-block input:read-only, .note-block textarea:read-only {
  padding: 0;
  border: none;
  resize: none;
}

.custom-select {
  position: relative;
  text-align: center;
  width: 100%;
}

.custom-select select {
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  text-align-last: center;
  moz-text-align-last: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px;
  padding-right: 30px;
  border-radius: 6px;
  color: var(--modePanelTxtCol);
  background: var(--modePanelBgCol);
}

.custom-select select:disabled {
  padding: 0;
  border: 2px dotted transparent;
  pointer-events: none;
}

.custom-select select:not(:disabled) {
  border: 2px dotted var(--modePanelTxtCol);
  color: var(--modePanelTxtCol);
  background: var(--modePanelBgCol);
}

.custom-select::after {
  content: '\25BC';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: none;
}


.custom-select.active::after {
  display: block;
  color: var(--themeFeatureLite);
}


.setlist-select {
  position: relative;
  text-align: center;
  width: 100%;
  color: var(--themePlTxtCol);
  background: var(--themePlBgCol);
  cursor: pointer;
}

.setlist-select select {
  width: 100%;
  height: 55px;
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: center;
  text-align-last: center;
  moz-text-align-last: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 65px 10px 5px;
  border: none;
  outline: none;
  color: var(--themePlTxtCol);
  background: var(--themePlBgCol);
}

.setlist-select::after {
  content: '\25BC';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}


.setlist-select #lcntr {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 30px;
  font-size: 1.4rem;
  text-align: center;
  pointer-events: none;
}

.note-block #tempo {
  text-align: center;
  text-align-last: center;
}

.section-block {
  padding-top: 6px;
  border-bottom: 1px solid #ccc;
}


[data-id=notes] {
  margin-bottom: 30px;
  min-height: 125px;
}



  /* LYRIC PANEL STYLES */

#lyric-wrapper {
  position: relative;
  width: 100%;
  color: var(--modeTxtCol);
  background-color: var(--modeBgCol);
}

body.no-scroll #lyric-wrapper {
  overflow-y: hidden;
}


#lyric-container {
  position: relative;
  padding: 50px 0;
  font-size: var(--lyricFontSize);
  touch-action: pan-y;
  cursor: pointer;
}

#lyric-container * {
  pointer-events: none;
}

#lyric-container.editmode * {
  pointer-events: auto;
}

[data-id="transpose-message"] {
  padding: 0 25px;
  font-size: 0.8em;
}

[data-id="title"] {
  width: 100%;
  padding: 10px 25px;
  font-size: 1.5em;
  color: var(--themeFeatureLite);
}

[data-id="content"] {
  width: 100%;
  max-width: 64ch;
  padding: 10px 25px;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.5;
}


.line {
  padding: 0;
}

.line.show {
  line-height: 2.4;
}


.chord {
  position: relative;
}

.chord.show::after {
  visibility: visible;
}

.chord::after {
  content: attr(data-chord);
  position: absolute;
  top: -1.8em;
  left: 0;
  color: var(--themeFeatureLite);
  white-space: pre;
  font-size: 0.9em;
  visibility: hidden;
}

[data-btnid="chords"] {
  position: relative;
}

[data-btnid="chords"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 4px;
  border-radius: 4px;
  background-color: var(--themeLiBgCol);
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
  opacity: 0;
  transition: opacity  var(--transitionSpeed) ease-in-out;
}

[data-btnid="chords"].show::after {
  opacity: 1;
}


.line.show:has(.section-type) {
  line-height: 1;
}

.section-type {
  color: var(--themeFeatureLite);
  font-size: 0.9em;
  text-transform: uppercase;
  font-style: italic;
}

.section-type::after {
  content: ':';
}

.section-type.adjust {
  margin-bottom: 1em;
}


/* #auto-scroll-button {
  margin-left: auto;
  width: 100px;
}

#auto-scroll-button.active {
  color: white;
  background: hsl(84, 49%, 52%);
} */

.range-container {
  position: relative;
  width: 300px;
}


output {
  position: relative;
  margin-left: 10px;
  width: 40px;
  font-size: 1.4rem
}

output::after {
  position: absolute;
  right: -6px;
  content: 'X';
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: var(--modeTtlCol);
  border-radius: 6px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  background: var(--themeFeatureLite);
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: var(--themeFeatureLite);
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]::-ms-thumb {
  width: 25px;
  height: 25px;
  background: var(--themeFeatureLite);
  border-radius: 50%;
  cursor: pointer;
}


/*     EDITABLE     */

.editableInput, .editableTextarea {
  padding: 10px;
  width: 100%;
  font-size: 1.8rem;
  line-height: 1.6;
  border-radius: 6px;
  border: 2px dotted #999999;
  color: var(--modePanelTxtCol);
  background: var(--modePanelBgCol);
}

.editableTextarea {
  overflow: hidden;
  resize: none;
}

.editableInput::selection, .editableTextarea::selection {
  color: black;
  background: #ffd900;
}


 /* CONTROLS IN FOOTER */

 #menubar {
  position: relative;
  padding: 5px 15px;
  color: var(--themeTxtCol);
  background: var(--themeBgCol);
}

#main-menu {
  padding-bottom: 15px;
}

 [data-btnid=index-panel], [data-btnid=notes-panel] {
  transition: transform var( --openpanelSpeed) ease-in-out
 }

 [data-btnid=index-panel].open {
  transform: rotate(20deg);
 }

 [data-btnid=notes-panel].open {
  transform: rotate(-20deg);
 }

 #logo {
  margin-right: 10px;
  color: var(--themeTxtCol);
  font-size: 2.2rem; 
  font-weight: lighter;
  opacity: 1.0;
  cursor: pointer;
  text-align: center;
}

#logo::before {
  display: inline-block;
  vertical-align: baseline;
}

 #logo.standalone::before {
  padding-right: 2px;
  content: 'SA';
  font-size: 0.6em;
  opacity: 0.6;
}

[data-btnid="record"] {
  margin-left: auto;
  transition: var(--transitionSpeed) ease-in-out;
}

[data-btnid="record"].active svg {
  fill: #ff4500;
}

[data-btnid="autoscroll"] .svg2 {
  stroke: var(--themeTxtCol);
  animation: spin 12s linear infinite;
}


[data-btnid="chords"] {
  stroke: var(--themeTxtCol);
}


#transport {
  position: fixed;
  top: 40px;
  right: 22px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
  z-index: 10;
}

#transport.hide {
  opacity: 0;
  pointer-events: none;
}

#transport li {
  margin-left: 7px;
  background-color: var(--modeBgCol);
  border-radius: 6px;
  touch-action: pan-y;
}

[data-cntrl="autoScrollBtn"] svg, [data-cntrl="autoScrollReset"] svg {
  stroke: var(--modeTxtCol);
  fill: var(--modeTxtCol);
}

[data-cntrl="autoScrollReset"] svg {
  /* transform: scale(0.9); */
}

/* ------- Options -------- */

  .divider {
    margin-top: 10px;
    height: 2px;
    background: var(--modeTxtCol);
  }


  #options-wrapper {
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
  }

  #options-wrapper.show {
    opacity: 1;
    pointer-events: auto;
  }

  .options {
    position: absolute;
    top: 100px;
    right: 15px;
    padding: 4px 10px 18px;
    color: var(--modeTxtCol);
    background: var(--modeBgCol);
    cursor: pointer;
    border-radius: 6px;
    gap: 15px;
  }

  .options [data-text]::before  {
    color: var(--modeTxtCol);
  }

  .options svg {
    fill: var(--modeTxtCol);
    pointer-events: none;
  }


/* ------- Metronone -------- */


[data-btnid="metronome"] {
  position: relative;
}

.rocker {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 2px;
  height: 40px;
  background: var(--modeTxtCol);
  transform-origin: bottom center;
  transform: rotate(-30deg);
  transition: transform 0.5s ease-in-out;
}

[data-btnid="metronome"].active {
  --modeTxtCol: var(--themeFeatureLite);
}


[data-btnid=tap-bpm] {
  opacity: 1;
  transition: 250ms;
  cursor: pointer;
}

[data-btnid=tap-bpm] svg {
  fill: var(--themeFeatureLite);
  stroke: var(--themeFeatureLite);
}


[data-btnid=tap-bpm].pulse {
  transform: scale(1.3);
  opacity: 0.6;
}


/* ------- EMBEDS -------- */

#videowrap {
  position: relative;
  width: 100%;
  background: black;
}

#videowrap iframe {
  margin: auto;
  padding: 10px;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
}


.embed-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
}

.embed-content {
  position: relative;
  padding-bottom: 5px;
  color: #999;
  background: #222;
  font-size: 14px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
}

.embed-content .button {
  margin-left: auto;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
}

.embed-content a {
  color: #999;
  font-size: 1.4rem;
}

 /* Related to Columns for master list and set list  */

.container {
  display: flex;
  gap: 15px;
}

.column {
  flex: 1;
}

.scrollable-container {
  flex: 1;
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  outline: 1px dotted var(--themePlTxtCol);
}

.mod-item {
  position: relative;
  padding-right: 5rem;
}

.drag-handle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 4.5rem;
  cursor: move;
}


#setlist-mod {
  height: 40px;
  border-top: 1px solid  var(--themePlTxtCol);
  border-bottom: 1px solid  var(--themePlTxtCol);
  color: var(--themePlTxtCol);
  background: var(--themePlBgCol);
  display: none;
}

#setlist-mod.show {
  display: flex;
}

#setlist-mod div {
  position: relative;
  flex: 1;
  padding: 5px 5px 5px 44px; 
  color: var(--themePlTxtCol);
  background-color: var(--themePlBgCol);
  font-size: 1.6rem;
  cursor: pointer;
}


#setlist-mod div span {
  position: absolute;
  left: 12px;
  top: 5px;
  stroke: var(--themePlTxtCol);
  pointer-events: none;
}

#setlist-mod div:first-child {
  border-right: 1px solid  var(--themePlTxtCol); 
}




/* ALERT AND CONFIRM BOX FORMATTING  */

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  .blankscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #eeeeee;
    background: #222222; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s ease-in-out;
    z-index: 1500;
  }


  .alert-box, .confirm-box {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .alert-box p, .confirm-box p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .alert-box button, .confirm-box button {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin: 0 5px;
  }

  .confirm-box button#cancelButton {
    background: #6c757d;
  }

  .alert-box button:hover, .confirm-box button:hover {
    background: #0056b3;
  }

  .confirm-box button#cancelButton:hover {
    background: #5a6268;
  }


/* Generic Fade In and Fade Out for elements */

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in.show {
  opacity: 1;
}

.fade-out {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.fade-out.hide {
  opacity: 0;
}

/* ----- APP LOADER ON START ----- */

.loader {
  width: fit-content;
  font-size: 17px;
  font-family: monospace;
  line-height: 1.4;
  font-weight: bold;
  --c: no-repeat linear-gradient(#000 0 0); 
  background: var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c);
  background-size: calc(1ch + 1px) 100%;
  border-bottom: 10px solid #0000; 
  position: relative;
  animation: l8-0 1.5s infinite linear;
  clip-path: inset(-20px 0);
}
.loader::before {
  content:"Loading";
}
.loader::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 14px;
  background: #25adda;
  left: -10px;
  bottom: 100%;
  animation: l8-1 1.5s infinite linear;
}
@keyframes l8-0{
   0%,
   12.5% {background-position: calc(0*100%/6) 0   ,calc(1*100%/6)    0,calc(2*100%/6)    0,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
   25%   {background-position: calc(0*100%/6) 40px,calc(1*100%/6)    0,calc(2*100%/6)    0,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
   37.5% {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6)    0,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
   50%   {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
   62.5% {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
   75%   {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6) 40px,calc(5*100%/6)    0,calc(6*100%/6) 0}
   87.4% {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6) 40px,calc(5*100%/6) 40px,calc(6*100%/6) 0}
   100%  {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6) 40px,calc(5*100%/6) 40px,calc(6*100%/6) 40px}
}
@keyframes l8-1{
  100% {left:115%}
}


/* ----- MODAL SECTION ----- */

dialog {
  border: solid 1px #ccc;
  border-radius: 6px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 250px;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  z-index: 500;
}

.dialtxt {
  margin-bottom: 35px;
  font-size: 1.8rem;
}

.dialog-buttons {
  /* display: flex;
  justify-content: space-around; */
}

.dialog-buttons button {
  margin: 0 5px;
  padding: 6px 15px;
  cursor: pointer;
  font-size: 2rem;
}


.message {
  position: absolute;
  top: 75px;
  left: 50%;
  min-width: 250px;
  transform: translateX(-50%);
  padding: 35px;
  color: var(--contentTxt,#444444);
  background-color: var(--contentBg,#ffffff);
  font-size: 1.8rem;
  text-align: center;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
  z-index: 50;
}

.paused {
  animation-play-state: paused;
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}



.darkmode {
  --modeTxtCol: #fff;
  --modeBgCol: #222;
  --modePanelTxtCol: #eee;
  --modePanelBgCol: #333;
  --modeTtlCol: #999;
  --modeFeatureCol:  hsl(84, 49%, 52%);
  --themeFeatureLite: var(--themeFeatureDark);
}


/* ############################################
############################################
############################################
############################################ */

@media only screen and (max-width: 768px) {
            :root {
              --editpanelWidth: 100vw;
              --notespanelWidth: 100vw;
            }

            .button-wrapper, .convert-wrapper {
              gap: 15px;
            }

            .convert-wrapper {
              flex-direction: column;
            }

            .fullbutton {
              padding: 6px;
              font-size: 1.6rem;
            }

}

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

          .button {
            width: 35px;
            height: 35px;
          }

          [data-text]::before {
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
          }

          [data-btnid=new-options]{
            padding-bottom: 14px;
            width: 45px;
            height: 55px;
            font-size: 3.6rem;
          }
          
          [data-btnid=new-options] * {
            pointer-events: none;
          }
          
          [data-btnid=new-options]::before {
            bottom: 3px;
          }

          .rocker {
            bottom: 12px;
            height: 22px;
          }

          #settings .button {
            margin-right: 8px;
            padding: 4px;
          }

          .app-settings header {
            padding-right: 50px;
            height: 55px;
          }
          
          .version {
            font-size: 1.4rem;
            text-align: center;
          }

          
          .app-settings main {
            padding: 10px; 
          }
          
          .app-settings main h3 {
            font-size: 1.8rem;
          }

          .col-panel {
            margin-top: 35px;
            margin-bottom: 30px;
          }
          
          .pallet-cell {
            margin-bottom: 26px;
            height: 36px;
          }
          
          .pallet-cell::before {
            top: -26px;
            font-size: 1.4rem;
          }
          
          .pallet-cell.active {
            outline: 2px solid var(--themeFeatureLite);
          }

          .button-wrapper, .convert-wrapper {
            margin-top: 8px;
            margin-bottom: 35px;
            flex-direction: column;
            gap: 10px;
          }

          .fullbutton {
            padding: 6px;
            flex: 1;
          }

          .fullinput {
            position: relative;
            padding: 10px;
            font-size: 1.6rem;
            border-radius: 6px;
            border: 1px solid var(--modeTxtCol);
            color: var(--modeTxtCol);
            background: var(--modeBgCol);
            cursor: pointer;
          }
          
          #convertedresults {
            margin: 0;
            margin-bottom: 35px;
            font-size: 1.6rem;
            padding: 10px;
            height: 120px;
          }
          
          #lyric-container {
            --lyricFontSize: 1.6rem;
          }

          [data-id="content"] {
            padding: 15px;
          }

          .editableInput, .editableTextarea {
            font-size: 1.6rem;
          }

          #menubar {
            padding: 5px 10px;
          }

          #logo {
            margin-left: 5px;
          }

}


@media print {
  @page {
      size: auto;
      margin: 1cm;
  }

  html {
      font-size: 12pt;
  }

  body {
      font-size: 1em;
      line-height: 1.5;
      color: #000;
      background: #fff;
  }

  h1 {
      font-size: 18pt;
  }

  p {
      font-size: 12pt;
  }

  .no-print, header, footer, nav {
    display: none;
  }

  #lyric-container {
    margin: 20px;
    padding: 10px;
    border: 1px solid #000;
  }

  [data-id="transposeMessage"] {
    padding: 0;
    font-size: 10pt;
  }

  [data-id=title] {
    margin: 0;
    margin-bottom: 25pt;
    padding: 0;
    color: #000;
    background: #fff;
    font-size: 18pt;
    font-weight: bold;
    min-height: auto;
  }

  [data-id=content] {
    margin: 0;
    padding: 0;
    color: #000;
    background: #fff;
    font-size: 12pt;
    line-height: 1.4;
  }

  .line.show {
    padding-top: 1.8rem;
  }
  
  .chord::after {
    top: -1.2em;
    font-size: 11pt;
  }
  
  .section-type {
    color: #000;
    font-size: 12pt;
  }

  .endnotes {
    display: inline-block;
    margin-top: 10px;
    border-top: 1px dotted #000; 
    padding: 5px;
    font-weight: 100;
  }

  a:link, a:visited {
    color: #000;
    text-decoration: underline;
  }

  a:hover, a:active {
    color: #000;
    text-decoration: none;
  }

  .page-break {
    page-break-before: always;
  }   
}