style.css

:root {
  --songbookList-color: lemonchiffon;
  --songList-color: lightsalmon;
  --song-color: lightblue;
  --export-color: bisque;
  --edit-color: gainsboro;
  --edit-color-rgb: 220,220,220;
  
  --background-color: white;
  --background-color-rgb: 255,255,255;
  --text-color: black;
  --light-text-color: #555;

  --box-shadow-var: 0 0 20px 2px rgba(0, 0, 0, 0.2);
  --btn-shadow-var: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
}
:root.dark {
  --songbookList-color: #f2c249;
  --songList-color: #E6772E;
  --song-color: #00B0CC;
  --export-color: #00cc66;
  --edit-color: #444;
  --edit-color-rgb: 68,68,68;
  
  --background-color: #333;
  --background-color-rgb: 51,51,51;
  --text-color: white;
  --light-text-color: #bbb;

  --box-shadow-var: 0 0 20px 2px rgba(0, 0, 0, 0.5);
  --btn-shadow-var: 0 2px 2px 2px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root {
    --songbookList-color: #f2c249;
    --songList-color: #E6772E;
    --song-color: #00B0CC;
    --export-color: #00cc66;
    --edit-color: #444;
    --edit-color-rgb: 68,68,68;
    
    --background-color: #333;
    --background-color-rgb: 51,51,51;
    --text-color: white;
    --light-text-color: #bbb;

    --box-shadow-var: 0 0 20px 2px rgba(0, 0, 0, 0.5);
    --btn-shadow-var: 0 2px 2px 2px rgba(0, 0, 0, 0.3);
  }
  :root.light {
    --songbookList-color: lemonchiffon;
    --songList-color: lightsalmon;
    --song-color: lightblue;
    --export-color: bisque;
    --edit-color: gainsboro;
    --edit-color-rgb: 220,220,220;
    
    --background-color: white;
    --background-color-rgb: 255,255,255;
    --text-color: black;
    --light-text-color: #555;

    --box-shadow-var: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    --btn-shadow-var: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
  }
}
:root {
  --highlight-color: var(--background-color);
}
*:focus {
  outline: 1px;
  outline-color: transparent;
  box-shadow: 0 3px 1px rgba(0, 123, 255, .5) !important;
}
*{
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
#song:has(song:nth-child(1)) {
  --count: 1;
}
#song:has(song:nth-child(2)) {
  --count: 2;
}
#song:has(song:nth-child(3)) {
  --count: 3;
}
#song:has(song:nth-child(4)) {
  --count: 4;
}
#song:has(song:nth-child(5)) {
  --count: 5;
}
/*normalize*/
html {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.link:active,
.float-menu-icon:active,
.btn:active {
  transform: scale3d(0.9, 0.9, 1);
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.2; /* 1 */
  margin: 0; /* 2 */
}
textarea,
select,
input {
  background-color: var(--background-color);
  color: var(--text-color);
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  -moz-appearance: button;
  cursor: pointer;
  outline: none;
  color: var(--text-color);
}
button::-moz-focus-inner {
   border: 0;
}
button {
  padding: 0;
  white-space: normal;
  display: inline;
  background: none;
  outline: none;
  border: none;
  text-align: left;
}
button.circle {
  border-radius: 100%;
  filter: brightness(1.6);
  background-color: var(--edit-color);
  width: 1.2em;
  text-align: center;
  margin-left: 0.5rem;
  padding: 0;
  font-weight: bold;
}
.loading {
  opacity: 0;
  transform: scale3d(.8, .8, .8);
}
.btn {
  box-shadow: var(--btn-shadow-var);
  font-weight: bold;
  background-color: var(--background-color);
  border-radius: 2rem;
  padding: 5px 15px 5px 15px;
  display: inline-block;
  margin: 1rem .5rem 1rem .5rem;
  color: var(--text-color);
}
.btn-tiny {
  padding: 2px 7px 2px 7px;
  margin: 0 .5rem !important;
}
.btn-small {
  padding: 2px 7px 2px 7px;
  margin: .5rem .25rem .6rem 0 !important;
}
body, body *,
.no-overscroll, .no-overscroll *{
  overscroll-behavior: contain;
}
body {
  background-color: var(--background-color);
}
html::after {
  border-bottom: 5px solid green;
  z-index: 10;
  content: '';
  display: block;
  position: fixed;
  content: var(--status-text);
  background: var(--song-color);
  text-align: center;
  animation: var(--animation);
  line-height: auto;
  border-radius: 0;
  top: calc(100vh - 5px);
  bottom: 0;
  left: 0;
  right: 0;
  transition: all .2s;
}
html.barLoading::after { 
  line-height: 3rem;
  top: calc(100vh - 3rem);
  border-radius: 0%;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
html.circleLoading::after {
  --circle-size: min(90vw, 90vh, 30rem);
  line-height: unset;
  padding-top: calc(var(--circle-size)/2 - 2vh);
  padding-left: 2rem;
  padding-right: 2rem;
  top: calc((100vh - var(--circle-size)) / 2);
  bottom: calc((100vh - var(--circle-size)) / 2);
  width: var(--circle-size);
  margin-left: auto;
  margin-right: auto;
  border-radius: 100%;
  white-space: pre-wrap;
  box-sizing: border-box;
}
@keyframes loading { 
  from { 
    filter: drop-shadow(-99vw 4px 6px black);
  } 
  to { 
    filter: drop-shadow(99vw 4px 6px black);
  } 
}
html, body, main{
  height: 100%; 
  margin: 0;
  color: var(--text-color);
}
html .admin {display: none;}
html._admin .admin {display: revert;}

button[disabled] {
  filter: saturate(0) contrast(0.5);
  cursor: revert;
}

main, header {
  margin: 0 .5em 0 .5em;
}
li > a {
  display: inline-block;
  width: 100%;
}
a {
  text-decoration: none;
  color: var(--text-color);
}
chunk[type="comment"] a {
  text-decoration: underline;
  color: #58a6ff;
}
#logged_in {
  height: 100%;
  overflow:auto;
}
.login_local #deleteDb {
  display: inline-block !important;
}
fieldset {
  max-width: 100%;
  width: max-content;
  border: none;
  padding: 1rem;
  overflow: hidden;
  box-shadow: var(--btn-shadow-var);
  background-color: var(--edit-color);
  margin-bottom: 1rem;
}
fieldset.closed {
  height: 1.857rem;
  padding: 0;
  border: none;
  box-shadow: none;
  background: none;
}
fieldset.closed legend {
  margin-right: 1rem;
}
.header fieldset.closed #username_legend:before {
  position: absolute;
  content: 'Hi, ';
  left: -2rem;
}
fieldset .content:not(:last-child) {
  border-bottom: 1px solid var(--background-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
fieldset.closed .content {
  max-height: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}
legend {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.2rem;
  background-color: var(--background-color);
  border-left: 1px solid var(--edit-color);
  border-right: 1px solid var(--edit-color);
  border-radius: 1rem;
  padding: 0 1rem 0 1rem;
  box-shadow: var(--btn-shadow-var);
}
#all_users li {
  display: flex;
  justify-content: space-between;
  border-bottom: 3px solid gray;
  padding: .5rem;
  gap: 1rem;
}
#all_users li:first-child {
  border-top-left-radius: .7rem;
}
#all_users li:nth-child(odd) {
  background: var(--background-color);
}
#all_users li *:not(:first-child) {
    text-align: center;
}
.left {
  text-align: left;
}
#songbook_content.showStatus li[data-song-status="n"] a:before {
  content: '~ ';
  cursor: pointer;
}
#songbook_content.showStatus li[data-song-status="r"] a:before {
  content: '✗ ';
  cursor: pointer;
}
#songbook_content.showStatus li[data-song-status="a"] a:before {
  content: '✓ ';
  cursor: pointer;
}
.closing,
#username_d {
  display: inline-block;
  overflow: hidden;
  white-space: pre; 
  vertical-align: bottom;
  max-width: 15rem;
}

.closed .closing {
  max-width: 0;
}

#darkmode {
  background: linear-gradient(rgba(255, 255, 255, 0) 45%, rgba(var(--background-color-rgb), 1) 45%, rgba(var(--background-color-rgb), 1) 65%, rgba(255, 255, 255, 0) 65%);  
  display: flex;
}
#darkmode input {
  display: none;
}
#darkmode label {
  cursor: pointer;
  border-radius: 2rem;
  margin: 0 auto;
  padding: 0 1rem 0.15rem 1rem;
  z-index: 1;
}
#darkmode input:checked + label {
  background-color: var(--background-color);
}


/*DIALOG STYLING */
#dialog {
  transition: none;
  position: fixed;
  z-index: 12;
  background-color: var(--background-color);
  border-radius : 25rem;
  width: 12.5rem;
  min-height: 12.5rem;
  max-height: 80vh;
  border: 0;
  text-align: center;
  margin: 0;
  padding: 1rem;
  box-shadow: 5px 1px 3px rgba(var(--edit-color-rgb), .8), -2px 1px 4px rgba(var(--edit-color-rgb), .8);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--text-color);
}
.center_contents {
  display:flex;
  justify-content:center;
}
#dialog[data-use="player"]{
  width: 18.75rem;
  width: min(18.75rem, 60vh);
}
#dialog .title {
  display: block;
  width: min(98%, 100% - 1rem, 12.5rem);
  margin-left: auto;
  margin-right: auto
}
#dialog .content {
  max-height: calc(80vh - 4rem);
  overflow: auto;
  margin-bottom: 2rem;
  font-size: .83rem;
  scrollbar-width: thin; /* Firefox */
  overflow-y:auto;
  overflow-x:hidden;
}
#dialog .handle {
  cursor: pointer;
}
#dialog .btn.close {
  position: absolute;
  bottom: 0;
  padding: 5px .5rem 5px .5rem;
  cursor: pointer;
}
#dialog small {
  font-size: .65rem;
}
#dialog .btn {
  padding: 5px;
}

/*Standard Styling for columns */
#songbookList {
  --highlight-color: var(--songbookList-color);
  z-index: 1;
}
#songList {
  --highlight-color: var(--songList-color);
  z-index: 2;
}
#song {
  --highlight-color: var(--song-color);
  z-index: 3;
}
#export {
  --highlight-color: var(--export-color);
  z-index: 4;
}

.sidebar {
  --background-color: var(--edit-color);
  background-color: var(--background-color);
}
#pdf {
  width:100%; 
  height: calc(100vh - 12rem);
}
.fullscreen #pdf {
  height: calc(100vh - 9rem);
}

.current_rev {
  box-shadow: 0 9px 0 0 var(--background-color), 0 -9px 0 0 var(--background-color), 1px 0 0px 0px blue, -1px 0 0px 0px blue;
}

/*CSS FOR Song Display*/
.deleted button,
.deleted a,
.deleted {
  color: gray !important;
}
.deleted .float-menu {
  pointer-events: none;
  cursor: default;
}
.deleted:before {
  position: absolute;
  display: block;
  content: 'DELETED';
  font-weight: bold;
  color: red;
  margin-top: .5rem;
  margin-left: 1rem;
  z-index: 2;
}
.revision .revision{
  color: gray;
}
.revision song:before {
  position: absolute;
  display: block;
  content: attr(rev-info);
  font-weight: bold;
  color: red;
  margin-top: .15rem;
  z-index: 2;
}
li[data-song-deleted="true"] a {
  color: gray;
  text-decoration: line-through;
}
li[data-song-id="section"] {
  border-bottom: 2px solid var(--edit-color);
  background-color: var(--highlight-color);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  font-weight: bold;
}
li[data-song-id="section"] a {
  border: none !important;
  pointer-events: none;
}
.edit_pencil {
  margin-right: 1.5rem;
  font-size: .7rem;
}
stitle, cat, author, scrip_ref, key, copyright, cclis {
  cursor: pointer;
}
#keyToggleContainer.active {
  filter: drop-shadow(2px 2px 4px lightgray);
}
#keyToggleContainer > * {
  background: var(--background-color);
  margin: 0;
  transition: all .2s !important;
}
#keyToggleContainer.active .transpose-keys {
  max-height: 6.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
#keyToggleContainer .transpose-keys {
  max-height: 0;
  padding: 0 1rem;
  margin-bottom: 0;
  border-radius: 1rem;
  overflow: hidden;
  max-width: 25rem;
}
#keyToggleFilter {
  display: inline-block;
  padding: .5rem;
  padding-bottom: 0rem;
  margin-top: -.5rem;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
}
.active > #keyToggleFilter {
  padding-bottom: 1rem;
}

.song .edit .wrap {
  cursor: move;
}
.song .edit .wrap:hover {
  box-shadow: 0 0 0 1px var(--song-color);
  border-radius: 2px;
}
.song .edit .toTextarea {
  cursor: text;
}
.song .edit song select {
  margin-bottom: 1rem;
  margin-top: 1rem;
  background-color: var(--edit-color);
  border: 1px gray dashed;
}
.edit .buttonsRight { 
  display: none;
}
.edit #songbook_header a,
.edit song stitle a {
  display: block;
}
#songbookList a[href="#sb-allSongs"],
#songbookList a[href="#sb-favoriteSongs"] {
  font-style: italic;
  font-weight: bold;
}
#songbookList li {
  position: relative;
}
.star:after {
  margin-left: .5rem;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
  font-size: 1.7rem;
  color: var(--edit-color);
  content: '☆';
  cursor: pointer;
  position: absolute;
  line-height: 1.17rem;
}
info:after {
  content: 'ⓘ';
  color: darkblue;
  font-family: monospace;
  cursor: pointer;
  position: absolute;
  left: .3rem;
  top: .2rem;
  font-size: 1.4rem;
}
.fsButton:after {
  top: .2rem;
  font-size: 1.7rem;
  color: var(--text-color);
  content:  '↔';
  transform: rotateZ(135deg);
  transform-origin: center;
  cursor: pointer;
  position: absolute;
  line-height: 1.17rem; 
}
#songbookList li span:after {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
  position: absolute;
  right: 1rem;
  font-size: 1.7rem;
  line-height: 1.4em;
  color: lightgray;
  display: none;
  cursor: pointer;
}
#song song[data-user-fav="true"] .star:after,
#songbookList li[data-user-fav="true"] .star:after,
#songbook_header .title[data-user-fav="true"] .star:after {
  content: '★';
  color: black;
  display: inline-block;
}
.column_header {
  position: sticky;
  top: 0;
  background-color: var(--background-color);
  z-index: 1;
  margin: 0 -1rem 0 -1rem;
  padding: 0.1px 1rem 0.5rem 1rem;
}
.column:not(.edit) .subcolumn:first-child .title {
  display: flex;
}
.title > * {
  flex: auto;
}
#song .subcolumn:first-child .column_header {
  padding: 0px 1rem 0.5rem 1rem;
  overflow: hidden;
}
.title > * > * {
  position: relative;
}
.column_header .buttonsRight {
  line-height: 1rem;
  flex: none;
  padding-top: .3rem;
}
.buttonsRight > * {
  width:  2rem;
  display: inline-block;
}
.subcolumn:first-child .column_header {
  background: linear-gradient(180deg, var(--highlight-color) 0%, var(--background-color) 90%, rgba(255,255,255,0) 100%);
}
.song #song.edit #song_header,
.songList #songList.edit #songbook_header {
  top: 4rem;
  padding-right: 1rem;
}
.edit_buttons:first-child {
  position: sticky;
  background-color: var(--highlight-color);
  top: 0;
  margin: 0 -1rem;
  padding: 0 1rem;
  z-index: 1;
  height: 4rem;
}
.song-highlight a {
  background-color: var(--song-color);
  border-color: darkcyan;
}
.songbook-highlight a {
  background-color: var(--songList-color);
  border-color: darksalmon;
}
.songList .edit #songbook_content ul {
  background-color: var(--edit-color);
  border: 1px gray dashed;
}
.songList .edit #songbook_content ul li{
  border: 1px #EEE dashed;
}
/*Overt,overb, moving are for sortable*/
.overt > * { 
  box-shadow: var(--highlight-color) 0px -10px;
  transform: translateY(10px);
  background-color: var(--edit-color);
  z-index: 10;
}
.overb > * { 
  box-shadow: var(--highlight-color) 0px 10px;
  transform: translateY(-10px);
  background-color: var(--edit-color);
  z-index: 10;
}
.moving > * { 
  transform: scale(0.8); 
  background-color: var(--highlight-color) !important;
}
.list {
  min-height: 2rem;
}
.disabled-hidden {
  opacity: 0;
  height: 0;
  display:none !important;
}
#songListEdit [data-xInBook] {
  position: relative;
}
#songListEdit [data-xInBook] a {
  background-color: limegreen;
}
#songListEdit [data-xInBook]:before {
  content: attr(data-xInBook);
  position: absolute;
  left: -.5rem;
  top: -.2rem;
  font-size: small;
}
#songListEdit li {
  cursor: pointer;
}
.edit #songbook_content li {
  cursor: move;
}
#songbook_content li > button {
  position: absolute;
  right: .75em;
  top: .5rem;
}
[contenteditable='true'], .contenteditable-disabled {
  border: 1px gray dashed;
  background-color: var(--edit-color);
  outline: none;
}
[contenteditable='true']:focus, .contenteditable-disabled:focus {
  border: 1px dashed darkblue;
}
.contenteditable-disabled {color: var(--light-text-color); cursor: pointer}
.contenteditable-disabled:focus {cursor: pointer; color: black;}
[contenteditable=true]:empty:not(:focus):before{
  color:grey;
  font-style:italic;
}
pre, .pre {
  font-family: monospace;
}
.edit-icon {
  display: inline-block;
  transform: rotateZ(90deg);
}
.tr {
  display: none;
}
.row {
  position: relative;  /*fullscreen arrow positioning  */
}
.active .tr {
  font-size: 1.5em;
  display: inline-block;
  z-index: 6;
  padding-bottom: .3rem;
  border-radius: 2rem;
  top: 1.2rem;
}
.icon-rotate {
  transform: rotateZ(45deg);
}
.icon-fl-right {
  float: right;
  width: 1.75em;
  height: 1.75em;
  text-align: center;
}
.active .float-menu-item{
  opacity: 1;
  pointer-events: auto;
}
.float-menu-item {
  opacity: 0;
  pointer-events: none;
  white-space: pre;
  margin-top: .5em;
  margin-bottom: .5em;
  display: inline-block;
  font-weight: 600;
  vertical-align: middle;
}
.float-menu-icon {
  text-align: center;
  display: inline-block;
  font-size: 1.25em;
  width: 1em;
  height: 1em;
}
.float-menu-toggle {
  display: none;
}
ul {
  padding: 0;
}
ul li {
  list-style-type: none;
  position: relative;
}
.close-icon {
  font-size:2rem;
}
.close-icon-mobile {
  border-radius: 5em;
  background-color: var(--highlight-color);
  box-shadow: var(--btn-shadow-var);
}
.songbookList-color {
  background-color: var(--songbookList-color);
}
.songList-color {
  background-color: var(--songList-color);
}
.offline::after {
  border-bottom: 5px solid yellow;
}
span.deleteicon {
  position: relative;
}
span.deleteicon span {
  position: absolute;
  display: block;
  top: 0;
  right: 10px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
input.deletable + span:after {   
  position: absolute;
  top: 0; 
  left: 0;
  width: 1.2em;
}
input.deletable:not(:placeholder-shown) + span:after {
  padding-left: 5px;
  content: '  X';
}
input.deletable:placeholder-shown + span:after {
  content: '🔍';
}
span.deleteicon input {
  padding-right: 24px;
}

/*Login CSS */
#login > input {
  width: calc(100% - 2rem);
}
#login h2 {
  font-size: 2rem;
  left: -1rem;
  position: relative;
}
.loggedin_display,
.d_none {
  display: none;
}

.loggedin .loggedin_display {
  display: initial;
}

.pin input {
  width: 5rem;
}
.pin > span {
  color: darkred;
}
#login {
  display: none;
  margin: 5rem auto 5rem auto;
  padding: 0 1rem 0 1rem;
  padding-top: 1.5rem;
  max-width: 420px; 
  border: 1px solid gray; 
  background-color: var(--edit-color);
}
.login #login {
  display: block;
}
.login #login + div {
  display: none;
}
#login > * {
  margin: 0 1rem 1rem 1rem;
}
#login button {
  margin: 1rem 0;
}
#login.create_local .create_local, /*Create Local*/
#login.login_local .login_local, /*Login Local*/
#login.connect_remote .connect_remote, /*Connect Remote*/
#login.login_remote .login_remote { /*Login Remote*/
  display: initial;
}
select:has(option[value=""]:checked) ~ :is(input) {
  display: none;
}


/*Styling!*/
.selected {
  background-color: rgba(0, 0, 0, 0.2);
}
.row {
  overflow: hidden;
  height: 100%;
}
.column {
  max-height: 100%;
  background-color: var(--background-color);
  contain: strict;
}
.subcolumn {
  height: 100%;
  z-index: 5;
  overflow-y: auto;
  overflow-x: hidden;
}
.subcolumn > div {
  padding: 0 1rem 0 1rem;
}
.column, body .edit .sidebar, body.export .sidebar {
  box-shadow: var(--box-shadow-var);
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar {
  z-index: 7;
  height: 100%;
}
#songbookList, #songList, #song {
  width: 100%;
}

.commentsContainer {
  display: none;
  margin: 0 0 0 1rem;
  padding: 0.5rem;
  background-color: var(--edit-color);
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.comments pre {
  padding: 0px;
  margin: 0px;
  margin-bottom: 2px;
}
.toggle_comment:after {
  display: block;
  content: attr(data-comment-number);
  position: absolute;
  top: -.5rem;
  left: 1rem;
  background-color: var(--background-color);
  padding: 2px;
  border-radius: 2rem;
}

/*Fullscreen*/
main.fullscreen,
.fullscreen {
  z-index: 11 !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  transform: translate3d(0,0,0) !important;
  height: 100vh !important;
  margin: 0;
}

/*Focus Present */
#presentation {
  display: block;
  position: fixed;
  transform: translateY(-100%);
  border: 0;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background-color: white;
}
body.present.songList #presentation {
  transform: translateY(0);
}

.edit .float-menu .float-menu-item {
  width: 0;
  visibility: collapse;
  opacity: 0;
}
.edit #songbook_title[contentEditable=true]:empty:before{
  content: 'Title ';
}
.search {
  border-radius: 20px;
  border: 1px rgb(238, 238, 238) inset;
  padding-left: .5em;
  width: calc(100% - 4rem);
}
.search + span:after {position: relative;}
.search + span:before {
  position: relative;
  content: attr(data-number-visible);
  top: -.8em;
  right: -1em;
  border-radius: 2rem;
  background-color: var(--song-color);
  padding-left: .4em;
  padding-right: .4em;
  float: right;
}

/*Export accordion*/
input[type='radio'].toggle {
  display: none;
}
.lbl-toggle * {
  color: white;
  font-size: 0.75rem;
  font-family: monospace !important;
  vertical-align: middle;
}
.lbl-toggle span {
  display: inline-block;
}
.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace !important;
  font-size: 1.2rem;
  text-transform: uppercase;
  padding: 0.5rem;
  background: var(--song-color);
  cursor: pointer;
  border-radius: 8px;
  border: none;
}
.lbl-toggle::before {
  transform: rotate(0) translateX(0) translateY(-2px);
  transition: all .2s;
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: .7rem;
}
.collapsible-content .content-inner {
  --background-color: var(--edit-color);
  background-color: var(--background-color);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: .5rem 1rem;
}
.collapsible-content {
  max-height: 0;
  overflow: hidden;
  margin-bottom: 1rem;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 650px;
  transition-delay: 0.065s; /*get weird resizing without this...  */
}
.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}
.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.table tr td, .table tr th {
  border-bottom: solid 1px grey;
  border-right: solid 1px grey;
}
th {
  text-align: left;
}
/*This is not usable on mobile devices... they don't have access to the title tooltip*/
[rel=tooltip] {
  position: relative;
}
[rel=tooltip]:after {
  position: absolute;
  top: -4px;
  color: blue;
  content: 'i';
  width: 1rem;
  height: 1rem;
  font-size: small;
  font-style: italic;
  font-weight: normal;
  text-align: center;
  padding-right: 1px;
  padding-bottom: 1px;
  border-radius: 50%;
  background-color: var(--highlight-color);
}
input[type="number"] {
  padding-left: 0.1rem;
  width: 3rem;
}
.art {  /*align right top */
  text-align: right;
  vertical-align: top;
}
.fr {
  float: right;
}
.expandedTableHeader {
  border-top-right-radius: 2rem;
  border-top-left-radius: 2rem;
  padding: .5rem 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
  box-shadow: var(--btn-shadow-var);
  cursor: pointer;
}
.expandedTable {
  box-shadow: var(--btn-shadow-var);
  width: 100%;
}
.expandedTableHeader.collapsed {
  border-radius: 2rem;
}
.expandedTableHeader.collapsed + .expandedTable {
  display: none;
}
.mirror {
  display: inline-block;
  transform: scaleX(-1);
}
.t3 > :not(:first-child) { /*t3 is a random class name*/
  float: right;
}
.t3 > :first-child {
  display: inline-block;
  height: 2rem;
}
.export_status {
  display: none;
}
.showStatus .export_status {
  display: initial;
}
.song .hide_for_songs {
  display: none;
}
#raw_edit {
  background-color: #EEE;
  border-radius: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.001rem;
}
#raw_edit .key_content {
  padding: 0.5rem;
}

/*Switch*/
.switch.switch-wide {
  width: 300px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 34px;
  vertical-align: middle;
}
.switch input {display:none;}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .4s;
  border-radius: 34px;
  background-color: var(--edit-color);
  filter: brightness(0.9);
}
.slider:before {
  position: absolute;
  content: attr(data-text);
  padding-left: 3px;
  height: 20px;
  width: 17px;
  left: 4px;
  bottom: 50%;
  transform: translateY(50%);
  background-color: var(--highlight-color);
  transition: .4s;
  border-radius: 50%;
}
.slider.background:before {
  background-color: var(--edit-color);
}
.switch.switch-wide input:checked + .slider:before {
  transform: translate(270px, 50%);
}
.switch input:checked + .slider:before {
  transform: translate(50px, 50%);
}
.slider:after {
 content: 'Off';
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: .75rem;
 font-family: Verdana, sans-serif;
 font-weight: bold;
}
.switch input:checked + .slider:after {
  content:'On';
}
#export_form .switch {
  height: 1.75rem;
}
/*End Switch*/

#export_copy::before {
  content: '📄';
  position: absolute;
  top: .5em;
  left: 1.15em;
}
.export_close {
  float: right;
  margin: -5px -15px -5px 0.5em;
  border-left: 1px solid gray;
  padding-left: 0.5em;
  border-radius: 50%;
  width: 2rem;
  height: calc(1.2em + 10px);
  align-content: center;
}

#rawObRoot ~ fieldset {
  border-left: 2px solid var(--background-color);
  box-shadow: none;
}
#rawObRoot ~ fieldset pre,
#rawObRoot ~ fieldset legend {
  margin: 0;
}
#rawObRoot ~ fieldset legend {
  border: none;
  box-shadow: none;
  border-radius: 0;
  cursor: default;
  padding-bottom: .1rem;
  padding-left: .45rem;
}
.accountBtn {
  position: absolute; 
  top:1.5rem;
  right:1rem; 
  z-index:7;
  margin-right: 0;
}

/*For phone in portrait only*/
@media only screen and (max-width: 39.99rem) {
  body .sidebar,
  .edit .sidebar {
    overflow: hidden;
  }
  .edit .sidebar-open {
    overflow: auto;
  }
  song {
    display: none !important;
  }
  song:last-child{
    display: block !important;
  }
  ul li a{
    padding: 5px 10px 5px 10px;
    margin: 5px 0 5px 0;
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    border-radius: 20px;
  }
  header,
  main,
  .column {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
  }
  main,
  .column {
    transform: translate3d(0, max(100vh, 800px), 0);
    height: calc(100vh - 4rem);
    opacity: 0;
  }
  fieldset.closed-mobile {
    height: 1.857rem;
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
  }
  #lower fieldset {
    width: 100%;
  }
  
  /*SongbookList */
  .songbookList main {
    transform: translate3d(0, 4rem, 0);
    height: calc(100vh - 4rem);
    opacity: 1;
  }
  .songbookList #songbookList {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  /*SongList */
  .songList main,
  .songList #songbookList {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .songList #songList {
    transform: translate3d(0, 4rem, 0);
    opacity: 1;
  }
  /*Song */
  .song main,
  .song #songbookList,
  .song #songList {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .song #song {
    transform: translate3d(0, 4rem, 0);
    opacity: 1;
  }
  /*move search into header  */
  .songList #songbookList .deleteicon,
  .song #songbookList .deleteicon,
  .song #songList:not(.slidout) .deleteicon {
    position: absolute;
    top: 2.5rem;
    right: 3rem;
    transform: scale(.75);
  }
  .songList #songbookList .search,
  .song #songbookList .search,
  .song #songList:not(.slidout) .search {
    width: calc(100%);
  }
  .song #songList:not(.slidout) #category_filter_container {
    display: none;
  }

  .column:not(.active):not(.slidout) .buttonsRight {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 90vw;
    transform: translate3d(90vw, 0, 0);
  }

  /*Focus edit*/
  .songList #songList.edit .sidebar { /*songbook*/
    transform: translate3d(15.5rem, 0, 0);
    width: 17.5rem;
  }
  .song #song.edit .sidebar {/*song*/
    transform: translate3d(13.5rem, 0, 0);
    width: 13.5rem;
  }
  .songList #songList.edit .sidebar-open,
  .song #song.edit .sidebar-open {
    transform: translate3d(0, 0, 0);
  }
  #export .subcolumn:first-child > div,  
  #songList.edit .subcolumn:first-child > div {
    padding: 0 3rem 0 1rem;
  }

  /*Export */
  .export main,
  .export #songbookList,
  .export #songList,
  .song.export #song {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .export #export {
    transform: translate3d(0, 4rem, 0);
    opacity: 1;
  }
  .export #export .sidebar {
    transform: translate3d(80vw, 0, 0);
  }
  .export #export .sidebar-open {
    transform: translate3d(0, 0, 0);
  }
  .slidout {
    transform: translate3d(0,8rem,0) !important;
    height: calc(100vh - 8rem);
    transform-origin: bottom;
    z-index: 7 !important;
    width: min(80%, 300px) !important;
  }
  .slidout .column_header {
    padding-right: 1rem;
  }
}
/** Phone in landscape **/
@media only screen and (max-height: 31.25rem) and (min-width: 40rem) {
  .songList #header,
  .song #header,
  .export #header {
    flex: 0 0 0;
  }
  .column {
    position: relative;
  }
  .song .title {
    padding-left: 1rem;
  }
  body.song #songbookList .title_link {
    transform: translate3d(-100%, 200%, 0) rotate(-90deg) !important;
  }
  .song .accountBtn {
    top:1.2rem;
    right: unset; 
    left: 1rem;
  }
}
@media only screen and (max-height: 31.25rem) {
  body.songbookList header h2 {
    margin-top: .5rem;
  }
  .edit stitle,
  .edit #songbook_header {
    position: initial;
  }
  #pdf {
    height: calc(100vh - 7rem)
  }
}
/** Phone in portrait and landscape**/
@media only screen and (max-width: 39.99rem),
only screen and (max-height: 31.25rem) {
  main, header {
    margin: 0;
  }
  header #title,
  #logged_in {
    padding: 0 1rem 0 1rem;
  }

  /*float for mobile*/
  .float-menu {
    position: absolute;
    right: 1.5em;
    bottom: 1em;
    z-index: 6;
    text-align: right;
    pointer-events: none;
  }
  .active .float-menu-item.uncollapsed:not(:last-child) {
    transform: scale(1);
    opacity: 1;
  }
  .float-menu-item:not(:last-child) span {
    margin-right: .5rem;
  }
  .float-menu-item:not(:last-child){
    transform: scale(0);
    transform-origin: 85% 250%;
    opacity: 0;
    background: rgba(var(--edit-color-rgb), 0.75);
    border-radius: 2rem;
    padding-right: 1rem;
    margin-right: -1rem;
    backdrop-filter: blur(3px);
  }
  .float-menu-item:last-child {
    display: flex;
    flex-direction: row-reverse;
    line-height: 3rem;
    background: rgba(var(--edit-color-rgb), 0.75);
    border-radius: 2rem;
    backdrop-filter: blur(3px);
  }
  .float-menu-item {
    display: block;
    margin-left: auto;
    width: max-content;
  }
  .float-menu-icon {
    font-size: 1.5em;
    width: 2em;
    height: 2em;
    line-height: 2em;
    background-color: var(--highlight-color);
    border-radius: 50%;
    box-shadow: var(--btn-shadow-var);
  }
  .edit .float-menu .float-menu-item {
    display: none;
  }
  .edit .float-menu {
    left: 1em;
    right: auto;
  }
  #export .float-menu {
    right: 3.5rem;
  }
  .edit chunk {
    margin-left: 0;
  }
  .edit song [type=verse]:before {
    left: 8rem !important;
  }
}
/*larger screen and landscape phone */
@media only screen and (min-width: 40rem){
  body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
  }
  .loggedin #logged_in {
    display: flex;
  }
  .align-right > legend {
    margin-left: auto;
  }
  fieldset.align-right {
    margin: 0 0 1rem auto;
  }
  #settings {
    padding-top: 1rem;
  }
  #settings,
  #welcome {
    flex: 50%;
    height: 100%;
    overflow:auto;
    margin-left: auto;
    overflow-y: overlay;
    padding-right: 1rem;
  }
  #all_users li {
    gap: 2rem;
  }

  .header header {
    flex: 0 1 100%;
  }
  .header main {
    flex: 0 0 0;
  }
  header {
    flex: 0 0 3.3rem;
    overflow: hidden;
  }
  main {
    flex: 0 1 100%;
    display: flex;
    overflow-y: hidden;
  }
  body {
    overflow: hidden;
  }
  body main #songbookList {
    flex: 0 1 18.75rem;
  }
  body main #songList {
    flex: 0 0 0;
  }
  body main #song {
    flex: 0 0 0;
  }
  body main #export {
    flex: 0 0 0;
  }
  body main .sidebar {
    flex: 0 0 0;
  }
  #column-filler {
    background-color: var(--edit-color);
  }
  .row {
    flex: 1 1 auto;
    display: flex;
  }
  .column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .subcolumn {
    flex: 1 1 25rem;
  }

  /*Focus songbookList*/
  body.songbookList #songbookList {
    z-index: 5;
    flex: 0 0 18.75rem;
  }
  body.songbookList #song {
    z-index: 1;
  }

  /*Focus songList*/
  body.songList #songList {
    z-index: 5;
    flex: 0 0 25rem;
  }
  body.songList #songbookList {
    flex: 0 1 18.75rem;
  }

  /*Focus song*/
  body.song #song{
    flex: .2 1 calc(var(--count) * 22rem + 5rem) ;
  }
  body.song #songList {
    flex: 0 20 25rem;
  }
  body.song #songbookList {
    flex: 0 20 2.5rem;
  }
  body.song #songbookList .subcolumn {
    overflow: hidden;
  }

  /*Focus edit*/
  body .edit .sidebar {
    flex: 0 0 17.5rem;
  }
  body .edit .sidebar-open {
    flex: 0 0 17.5rem;
  }
  /*Focus export*/
  body.export.song #song, 
  body.export.songList #songList {
    flex-shrink: 1;
  }
  body.export.song #songList,
  body.export.songList #songbookList {
    flex-shrink: 2;
  }
  body.export #export .sidebar {
    flex: 3 0 22.5rem;
  }
  body.export #export {
    flex: 5 0 50rem;
  }
/*--From below */
  #songbookList li span:after {
    bottom: 0;
  }
  ul li a{
    border-left: 1px solid #EEE;
    border-radius: 20px;
    padding: 2px 8px 2px 8px;
    margin: 2px 0 2px 0;
  }
  #column-filler {
    flex: 1 1 auto;
  }
  .dropHere:after {
    content: 'drop here to view the song';
    background-color: var(--edit-color);
    opacity: .8;
    position: absolute;
    top: 4rem;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    border-radius: 3rem;
    border: 3px gray dashed;
    padding-top: 40vh;
    font-size: 2rem;
    color: gray;
    text-align: center;
    z-index: 10;
  }
  .close-icon-mobile {
    display: none;
  }
  body.song #song.edit, 
  body.songList #songList.edit {
    flex: 0.4 .2 56.25rem;
  }
  body.song #songbookList #songbooks_header h3 {
    height: 100vh;
    display: block;
  }
  body.song #songbookList .title_link {
    transform: translate3d(-100%, 0, 0) rotate(-90deg);
    transform-origin: right;
    z-index: 10;
    display: block;
    width: max-content;
  }
  body.song #songbookList #songbooks_header {
    background-color: var(--songbookList-color);
  }
  #songbooks {
    width: 18.75rem;
  }
  #export .content {
    min-width: 23.5rem;
  }
  #song .subcolumn:first-child > div,
  #songbook_content {
    min-width: 18rem;
  }
}
/**larger than phone landscape or otherwise**/
@media only screen and (min-width: 40rem) and (min-height: 31.26rem){
  .float-menu:not(:last-child) {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    top: 0;
    border-bottom: 2px solid black;
    height: 2.2em;
    padding-right: 1rem;
  }
  .float-menu-icon {
    display: none;
  }
  .float-menu-item:not(:nth-last-child(2)):before {
    content: ' // ';
    background: var(--background-color);
  }
  #export .float-menu-item:before, 
  #songbookList .float-menu-item:before {
    content: '';
  }
  .float-menu-item.deleteSong:not([href="#sb-allSongs"]) {
    display: none;
  }
  .closed .closing {
    max-width: initial;
  }
}
/*for mouseified devices only */
@media (hover: hover) and (min-width: 40rem) {
  .column:not(:last-child):hover {
    z-index: 6 !important;
  }
  #songbook_header .title[data-user-fav="true"] .star:hover:after,
  #song song[data-user-fav="true"] .star:hover:after {
    content: '☆';
    color: black;
  }
  #songbook_header .title .star:hover:after,
  #song .star:hover:after {
    content: '★';
    cursor: pointer;
    color: black;
  }
}
@media (hover: hover) and (min-width: 40rem) and (min-height: 31.26rem) {
  .column:hover .float-menu-item{
    opacity: 1;
    pointer-events: auto;
  }
}
/*Export CSS Icons */
#page_icon {
  display: inline-flex;
  width: .9rem;
  height: 1.2rem;
  border: 1px solid white;
  padding: 0;
  position: relative;
}
#page_icon.single_sided:before {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  content: '';
  top: -3px;
  left: -4px;
  border-left: 1px solid white;
  border-top: 1px solid white;
}
#page_icon.double_sided:before {
  width: 30%;
  height: 30%;
  display: block;
  position: absolute;
  content: '';
  bottom: -4px;
  right: -3px;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
#page_icon.landscape {
  width: 1.2rem;
  height: 0.9rem;
}
#page_icon .col {
  display: inline-block;
  flex: 1 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border-right: 0.5px solid white;
  border-left: 0.5px solid white;
}
#margin_icon {
  width: 1rem;
  height: 1.4rem;
}
#margin_icon.landscape {
  width: 1.4rem;
  height: 1rem;
}
.flex:not(:last-child) {
  border-bottom: 1px white solid;
}
.flex {
  height: 33%;
  display: flex !important;
  margin: 0;
  padding: 0;
  vertical-align: unset !important;
}
.flex .col:not(:last-child) {
  border-right: 1px solid white;
}
.flex .col {
  display: inline-block;
  flex: 1 100%;
  padding: 0;
  margin: 0;
}
.normal .flex {
  height: 25%;
}
.normal .flex:nth-child(2) {
  height: 50%;
}
.normal .flex .col:nth-child(2) {
  flex-basis: 200%;
}
.narrow .flex {
  height: 17%;
}
.narrow .flex:nth-child(2) {
  height: 66%;
}
.narrow .flex .col:nth-child(2) {
  flex-basis: 300%;
}
.wide .flex {
  height: 25%;
}
.wide .flex:nth-child(2) {
  height: 50%;
}
.wide .flex .col:nth-child(2) {
  flex-basis: 100%;
}
.custom .flex:nth-child(2) .col:nth-child(2):after {
   content: '*';
   color: red;
   position: relative;
   top: -2.5px;
}
/* Category Filter */
.cat_filter_btn {
  padding: 5px 11px 5px 11px;
  display: inline-block;
  margin: 0 0 0 5px;
  box-shadow: var(--btn-shadow-var);
}
#category_filter_container.open .cat_filter_btn{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#category_filter_container {
  display: inline-block;
  position: relative;
}
#category_filter_container > * {
  background-color: var(--song-color);
  border-radius: 1rem;
}
#category_filter {
  position: absolute;
  right: -1rem;
  width: 18.75rem;
  transform: scale(0);
  transform-origin: 95% top;
  opacity: 0;
  overflow: hidden;
  box-shadow: var(--btn-shadow-var);
}
#category_filter select {
  background-color: var(--song-color);
  border-radius: 2rem;
  filter: brightness(1.2);
}
.open #category_filter{
  transform: scale(1);
  padding: 5px;
  opacity: 1;
}
.mb23 {
  margin-bottom: 2.5em
}
.bluehighlight {
  background-color: var(--song-color) !important;
}

/*TOOLTIP CSS*/
[rel="tooltip"] {
}
[rel="tooltip"] {
  cursor: help;
}
#tooltip {
  text-align: center;
  font-style: italic;
  background: var(--export-color);
  position: absolute;
  z-index: 100;
  padding: 15px;
  border-radius: 2rem;
  box-shadow: var(--box-shadow-var);
}
 
#tooltip:after { /* triangle decoration */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--export-color);
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}

#tooltip.top:after {
  border-top-color: transparent;
  border-bottom: 10px solid var(--export-color);
  top: -20px;
  bottom: auto;
}

#tooltip.left:after {
  left: 10px;
  margin: 0;
}

#tooltip.right:after {
  right: 10px;
  left: auto;
  margin: 0;
}
.float-menu-icon::after,
.emoji::after {
  display: inline;
  content: '\FE0E';
}
.looping {
  background-color: var(--song-color);
}

.highlightBg {
  animation-duration: 3s;
  animation-name: highlight;
}
@keyframes highlight {
  0% {
    background-color: transparent;
  }
  0.1% {
    background-color: var(--highlight-color);
  }
  50% {
    background-color: var(--highlight-color);
  }
  100% {
    background-color: transparent;
  }
}