body {
    overflow: hidden;
}

* {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.hidden {
    display: none !important;
}

.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.readonly {
    pointer-events: none;
}

.dark {
    background-color: black;
}

#mainView {
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow: hidden;
}

.flexy {
    display: block;
    min-width: 300px;
    border: 1px solid #eee;
    height: 100%;
    overflow: auto;
    font-size: 1.5rem;
    margin-top: 0.25rem; 
    margin-bottom: 0.25rem;
}

.flexy thead {
    display: flex;
    flex-flow: row;
    flex-flow: row;
}

.flexy thead tr {
    padding-right: 15px;
    display: flex;
    width: 100%;
    align-items: stretch;
    align-items: stretch;
}

.flexy tbody {
    display: flex;
    overflow: auto;
    flex-flow: row wrap;
    flex-flow: row wrap;
}

.flexy tbody tr {
    display: flex;
    width: 100%;
    cursor: pointer;
}

.flexy tbody tr td {
    display: flex;
    align-items: center;
}

.flexy tbody tr:nth-child(odd) {
    background-color: #808080;
}

.flexySelected {
    color: orange;
}

.flexy select {
    font-size: 1em;
}

.flexy input {
    width: 1.2em;
    height: 1em;
}

span {
    display: inline-block;
}

input {
    display: inline;
    width: 1.5rem;
    border-radius: 3px;
    font-size: 1.5rem;
}

select {
    display: inline;
    width: 3em;
    border-radius: 3px;
    font-size: 1.4em;
    text-align-last: right;
    width: -moz-fit-content;
    width: fit-content;
}

.btnImg {
    width: 2em;
    height: 2em;
    display: inline;
    vertical-align: top;
    cursor: pointer;
}

.btnDiv {
    display: inline-block;
    cursor: pointer;
}

option {
    font-size: 1rem;
}

table {
    width: 100%;
    border: none;
    font-size: 1.5rem;
}

tr {
    min-width: 300px;
}

td {
    padding-left: 0px;
    padding-right: 0px;
}

thead tr {
    padding-right: 15px;
    width: 100%;
    -webkit-align-items: stretch;
    align-items: stretch;
}

tbody {
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-family: Arial, Helvetica, sans-serif;
}

tbody tr {
    width: 100%;
}

.songItem {
    width: 100%;
    margin-left: 10px;
    text-align: left;
}

.songItem p {
    margin-block: 0px;
}

.foundTypeImage {
    width: 2.5rem;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: center;
}

.quickLoadSong {
    width: 2.5rem;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
}

.mainTable {
    position: fixed;
    display: flex;
    left: 8px;
    top: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    transition: 0.5s;
}

.mainTable div {
    display: flex;
    justify-content: space-between;
    font-family: math;
    position: relative;
}

.mainTable div div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 2em;
    background-position: center;
    width: max-content;
    min-width: 2em;
}

.mainTable select {
    opacity: 0;
    width: 2em;
    position: fixed;
    cursor: pointer;
}

.mainTable span {
    font-size: 2em;
}

#iconTranspose {
    position: fixed;
}

.editor {
    position: absolute;
    overflow: hidden;
    outline: none !important;
    background-color: white;
    text-align: center;
}

.editor.dark {
    background-color: black;
}

.editor.editMode {
    max-width: 100%;
    max-height: none;
    width: unset;
    height: unset !important;
}

.editor.editMode > canvas {
    max-width: unset;
    max-height: unset;
}

.editorContainer {
    overflow: hidden;
}

.editorContainer.editMode {
    overflow: auto;
}

#preview {
    position: absolute;
    overflow: hidden scroll;
    outline: none !important;
    text-align: center;
    width: 85%;
    height: 75%;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -65%);
    z-index: 110;
    padding: 0.5em;
    border: 0.5em solid transparent;
    border-radius: 0.5em;
    margin: 1em 0;    
    background: 
    linear-gradient(white 0 0) padding-box,
    linear-gradient(-15deg, #555, #aaa) border-box;
}

#preview.dark {
    background: 
    linear-gradient(black 0 0) padding-box,
    linear-gradient(-15deg, #555, #aaa) border-box;
}

.chordpro-editor-canvas {
    max-width: 100%;
    display: inline-block;
    margin: 0px auto;
    vertical-align: middle;
}

.chordpro-preview-canvas {
    max-width: 100%;
    display: inline-block;
    margin: 0px auto;
    vertical-align: middle;
    pointer-events: none;
}

#swipe-handler {
    z-index: 50;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1000vw;
    perspective: 1000vw;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;    
    perspective-origin: 50vw 50vh;
}

#swipe-handler div {
    position: absolute;
    width: 100%;    
    height: 100%;
    background-color: white;
}

#swipe-handler div.dark {
    background-color: black;
}

.transposeColumn {
    background-image: url(images/transpose.svg);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: right;
    filter: invert(1);
    overflow-x: hidden;
    min-width: 1em;
}

.transposeColumn > span {
    color: black;
    min-width: 1em;
    min-height: 1.2em;
}

.transposeColumn > select {
    background: transparent;
    border: transparent;
    position: fixed;
    left: 0;
    opacity: 0;
    height: 100%;
    cursor: pointer;
}

.transposeColumn > div {
    width: 2rem;
    color: black;
    text-align: right;    
}

.capoColumn {
    padding-right: 1.3em;
    background-image: url(images/capo.svg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 1em;
    filter: invert(1);
    overflow-x: hidden;
    display: inline-flex;
}

.capoColumn > span {
    color: black;
    min-width: 1em;
    min-height: 1.1em;
}

.capoColumn > select {
    background: transparent;
    border: transparent;
    position: fixed;
    left: 0;
    opacity: 0;
    height: 100%;
    cursor: pointer;
}

.capoColumn > div {
    width: 2rem;
    color: black;
    text-align: right;
}

.authorColumn {
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.typeColumn {
    padding-left: 0.2em;
}

@media screen and (max-width: 25rem) {
    .transposeColumn {
        display: none !important;
    }        
    .capoColumn {
        display: none !important;
    }        
}

@media (orientation: portrait) {
    .mainTable {
        flex-direction: column;
    }
    .mainTable div {
        flex-direction: row;
    }
    .mainTable div div {
        justify-content: center;
    }
    #swipe-handler div {
        justify-content: flex-start;
    }
    .editor {
        width: 100%;
        max-height: 100%;  
        height: unset !important;  
    }
    .chordpro-editor-canvas {
        max-height: 100%;
    }    
}

@media (orientation: landscape) {
    .split .mainTable {
        width: calc(50% - 16px) !important;
        flex-direction: column !important;
    }
    .split .mainTable.lefty {
        flex-direction: column !important;
    }
    .split .mainTable div {
        flex-direction: row !important;
    }
    .split .mainTable div div {
        justify-content: flex-start !important;
        order: unset !important;
        width: 3em;
        background-position: center;
    }
    .split .mainTable.lefty div div {
        justify-content: flex-start !important;
        order: unset !important;
    }
    .split .mainTable .editor {
        width: 100% !important;
        max-height: 100% !important;  
        height: unset !important;  
    }
    .split .mainTable .chordpro-editor-canvas {
        max-height: 100% !important;
        width: unset !important;
    }    
    .split #btnOptions {
        display: none !important;
    }
    .split .overlay {
        height: 100% !important;
        left: 50% !important;
        width: 50% !important;
    }   
    .options {
        display: block;
    }
    .mainTable {        
        flex-direction: row-reverse;
    }
    .mainTable.lefty {
        flex-direction: row !important;
    }
    .mainTable div {
        flex-direction: column;
    }
    .mainTable div div {
        justify-content: flex-end;
        width: 3em;
        height: 2em;
        background-position: right;
    }
    .mainTable.lefty div div {
        justify-content: flex-start !important;
    }
    #swipe-handler div {
        overflow-y: auto;
        justify-content: flex-start;
    }
    .editor {
        width: 100%;
        height: auto !important;
    }
    .chordpro-editor-canvas {
        width: 100%;
    }
    #fsdiv {
        order: -4;
    }
    #btnOptions {
        order: -3;
    }
    #btnNext {
        order: -1;
    }
    #btnPrev {
        order: -2;
    }
    #capo {
        order: 100;
    }
    #transpose {
        order: 101;
    }
}

.overlay.opened {
    height: 100%;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
    color: white;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 1.5rem;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

.overlay-content {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 8px;
    width: 100%;
    height: calc(100% - 16px);
    text-align: center;
}

.log {
    position: absolute;
    top: 80vh;
    width: 99vw;
    height: 20vw;
    z-index: 10000;    
    overflow-y: scroll;
    background-color: white;    
    display: none;
}

.loader {
    align-items: center;
    justify-content: center;
    color: #a0a0a0;
    position: relative;
}

@keyframes spinBasic {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateWithBoost {
    0% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(180deg);
    }

    90%,
    100% {
        transform: rotate(360deg);
    }
}

.loader img {
    animation: 1.5s linear spinBasic infinite;
}

.searchText {
    align-self: center;
    width: 100%;
}

.aboutBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;        
    margin: auto;
    background-color: rgba(0, 0, 0, 0.9);    
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow-y: hidden;
}

#aboutBoxContent {
    max-height: 100%;
    overflow-y: auto;
    text-align: center;     
    color: black;
    border: 3px solid black;
    padding: 10px;
    background-color: white;
    width: -moz-fit-content;
    width: fit-content;
}

#aboutBoxContent a {
    display: inline-block;
}

.aboutClose {
    font-size: 1rem;
    float: right;
    cursor: pointer;
    font-weight: border;
}

.options {
    width: 98%; 
    display: flex;
    flex-flow: column nowrap;
    margin-left: 1%;
    margin-right: 1%;
    text-align: left;
}

.options > div {
    justify-content: space-between;
    display: flex;    
    flex-flow: column nowrap;
}

.options > div > div {
    flex-flow: row nowrap;
    justify-content: flex-start;
    display: inline-flex;
}

.options > div > form > div {
    flex-flow: row nowrap;
    justify-content: flex-start;
    display: inline-flex;
}

.options > div > div > div {
    flex-flow: row nowrap;
    justify-content: center;
    display: inline-flex;
    margin-bottom: 0.25em;
    flex-grow: 3;
    flex-shrink: 1;
    flex-basis: 20%;
}

.options > div > div:nth-child(3) {
    flex-basis: 30%;
}

.options > div > div > div img {
    filter: invert(1);
}

.options > div > div > div:first-child {
    justify-content: flex-start;
}

.options > div > div > div:last-child {
    justify-content: flex-end;
}

.options table {
    overflow: auto;
}

.rotating {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.loading {
    box-sizing: border-box;
    position: absolute;
    display: inline-block;
    width: 20vh;
    height: 20vh;
    background-color: transparent;
    border-radius: 100%;
    animation: loading-spin 1s infinite linear;
    margin: 0.5rem;
    align-self: center;
    top: 20%;
}

.loading:after {
      content: '';
      box-sizing: border-box;
      display: inline-block;
      position: absolute;
      width: 110%;
      height: 110%;
      top: -5%;
      left: -5%;
      right: 0;
      bottom: 0;
      border: 5px solid transparent;
      border-radius: 100%;
      box-shadow: 0.1rem 0.1rem 0.1rem white;
}

@keyframes loading-spin{
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
.net-startup {
    background-image: url("images/startup.svg");
    background-repeat: no-repeat;
    background-size: contain;
    animation: loading-spin 1s infinite linear;
}
.net-online {
    background-image: url("images/online.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
.net-offline {
    background-image: url("images/offline.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
.net-transfer {
    animation: swapUD 2s infinite;
    background-image: url("images/download.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
.net-nearby {
    background-image: url("images/nearby.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

@keyframes swapUD {
    0%, 100% {
        background-image: url("images/download.svg");
    }
    50% {
        background-image: url("images/upload.svg");
    }
}

#trashCan {
    position: fixed;
    width: max(10%, 50px);
    align-self: center;
    bottom: 10px;
    background-color: white;
    border-radius: 50%;
    box-shadow: inset 0px 0px 0px 2px darkgrey;
}

.droptarget {
    background-color:yellow !important;
    color: black !important;
}

#date-picker-calendar {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;    
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: 
    translate(-50%, -50%); 
    z-index: 120;
    border-radius: 1em;
    background-color: #333e;
    padding: 1em 1em 0.5em 1em;
    box-shadow: 0.5em 0.5em 0.5em #000a;
}

#date-picker-ok {
    margin-top: 0.5em;
    font-size: large;
    font-weight: bolder;
}

#date-picker-close {
    position: absolute;
    z-index: 121;
    right: 0.3em;
    top: 0.3em;
    cursor: pointer;
    font-size: large;
    font-weight: bolder;
    border-radius: 100%;
}

#scan-dialog {
    position: absolute;
    left: 1em;
    bottom: 1em;
    z-index: 130;
    border-radius: 1em;
    background-color: #666a;
    padding: 1em 1em 0.5em 1em;
    box-shadow: 0.5em 0.5em 0.5em #000a;
    min-width: 5vw;
    max-width: 6rem;
    max-height: 6rem;
    font-size: 0.5rem;
    font-family: sans-serif;
}

#scan-dialog-content {
    max-height: 80vh;
}

#confirm-dialog {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: 
    translate(-50%, -50%); 
    z-index: 130;
    border-radius: 1em;
    background-color: #333e;
    padding: 1em 1em 0.5em 1em;
    box-shadow: 0.5em 0.5em 0.5em #000a;
    min-width: 30vmin;
}

#confirm-dialog-ok {
    margin-top: 0.5em;
    font-size: large;
    font-weight: bolder;
}

#confirm-dialog-close {
    position: absolute;
    z-index: 131;
    right: 0.3em;
    top: 0.3em;
    cursor: pointer;
    font-size: large;
    font-weight: bolder;
    border-radius: 100%;
}

#confirm-dialog-content {
    max-height: 80vh;
}

.fade-out {
    animation: fadeOut 0.2s;
    -webkit-animation: fadeOut 0.2s;
    -moz-animation: fadeOut 0.2s;
    -o-animation: fadeOut 0.2s;
    -ms-animation: fadeOut 0.2s;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
  
@-moz-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
  
@-webkit-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
  
@-o-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
  
@-ms-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

#text-input-dialog {
    position: absolute; 
    z-index: 130;
    display: flex;
    flex-direction: row;
    background-color: white;
    overflow-y: hidden;
}

#text-input-dialog > div {
    height: 100%;    
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;    
}

#text-input-dialog > div:first-child {
    flex-basis: 100%;
}

#text-input-dialog > div:last-child {
    margin-left: 1em;
}

#text-input-dialog-content {
    width: 100%;
    height: 100%;
    border: none;
}

object {
    max-height: 75vh;
}

#searchText {
    width:100%; 
    height: 90%;
    margin-left: 0.3em;
    margin-right: 0.3em;
}

#playlists {
    width:100%; 
    height: 100%; 
    text-align-last: left; 
    margin-left: 0.3em;
    margin-right: 0.3em;
    min-width: 10em;
}

.filterButton {
    display: inline-block;
    cursor: pointer;
    flex-basis: unset !important; 
    margin: auto 0.5em auto 0.1em;    
}

label {
    /*border: 1px solid #555;*/
    text-align: center;
    width: -moz-fit-content;
    width: fit-content;
    padding-right: 0.2em;
    cursor: pointer;
    position: relative;
    font-size: 1.5em;
    display: flex;
    align-items: center;    
    justify-content: center;
    /*background-image: linear-gradient(#3331, #1111);*/
    background: transparent;
    border-radius: 1em;
}

label .btnImg {
    height: 1.5em;
}

div > input[type=checkbox] {
    display: none;
}

#capo  {
    display: flex;
    justify-content: right !important;
}

input:checked + label {
      text-shadow: 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 0.3em #05e, 0 0 0.4em #05e, 0 0 0.5em #05e, 0 0 0.6em #05e, 0 0 0.7em #05e;
      /*box-shadow: 0 0 2em 0px #05e, inset 0 0 4em 4px #111;*/
      /*background-image: linear-gradient(#3331, #1111);*/
      color: white;
}

input:checked + label > img {
    filter: invert(1) grayscale(0) drop-shadow(0 0 0 #35f);
    background-image: radial-gradient(#ca0, transparent);
}

#chkHighlightLabel {
    display: inline;
}

#chkHighlight ~ #chkHighlightLabel > div > img {
    filter: invert(0) grayscale(1);
}

#chkHighlight:checked ~ #chkHighlightLabel > div > img {
    filter: invert(0) grayscale(0);
    background-image: none;
}

#chkNoSecChordDupHolder {
    flex-basis: 40%;
}

#chordBoxSelector {
    justify-content: flex-start;
}

@media screen and (orientation: portrait) and (max-width: 30rem) {
    .options div div div:last-child {
        min-width: unset !important;
    }
    
    #chkNoSecChordDupHolder {
        flex-basis: 20% !important;
        justify-content: center;
    }
    #chkNoSecChordDupLabel > div {
        font-size: 0.6rem;
        display: flex !important;
        flex-direction: column !important;
        margin: 0px !important;
    }
    #chkNoSecChordDupLabel > div > :first-child {
        margin-right: 0px !important;
    }
}

@media screen and (orientation: landscape) and (max-width: 60rem) {
    .options div div div:last-child {
        min-width: unset !important;
    }
    
    #chkNoSecChordDupHolder {
        flex-basis: 20% !important;
        justify-content: center;
    }
    #chkNoSecChordDupLabel > div {
        font-size: 0.6rem;
        display: flex !important;
        flex-direction: column !important;
        margin: 0px !important;
    }
    #chkNoSecChordDupLabel > div > :first-child {
        margin-right: 0px !important;
    }    
}

#chkNoSecChordDupLabel > div {
    display: flex;
    flex-direction: row;  
}

#chkNoSecChordDupLabel > div > div {
    display: inline-block;
}

#chkNoSecChordDupLabel > div > :first-child {
    margin-right: 0.5rem;
}

.leftMinContentButton {
    flex-basis: fit-content !important;
    margin-right: 0.5rem;
}

#sessionList {
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid gray;
    padding: 10px;
    background-color: white;
    color: black;
    min-width: 330px;
    z-index: 150;
    max-width: 90vw;
    box-shadow: 0 0 40px -10px rgb(0 0 0 / 40%);
    border-radius: 12px;
    font-size: 1em;
    font-weight: bold;
}

#sessionList > li {
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1.5em;
    padding: 0.5em 0.5em 0.5em 1.7em;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.7,.98,.86,.98), box-shadow .25s cubic-bezier(.7,.98,.86,.98);
    display: grid;
    align-items: center;
    overflow: hidden;
    border-radius: 0.2em;
    box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23);
    font-family: sans-serif;
    display: inline-block;
    width: calc(100% - 2em);
}

#sessionList > li > a {
    padding-left: 1em;
}

#sessionList > li:hover {
    transform: scale(1.2);
    box-shadow: 0 9px 47px 11px rgba(51, 51, 51, 0.18);
    background-color: rgba(255, 255, 255, 0.9);
}

.ppdSession {
    background-image: url('images/tablet.svg');
}

.lanSession {
    background-image: url('images/wifi.svg');
}

.wanSession {
    background-image: url('images/www.svg');
}

.connecting {
    width: 65px;
    display: inline-grid;
    float: right;
    --mask: 
        radial-gradient(12px at left 15px top 50%, #0000 95%, #000),
        radial-gradient(12px at right 15px top 50%, #0000 95%, #000);
    -webkit-mask: var(--mask);
            mask: var(--mask);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    animation: connecting-keyframes 1s infinite alternate;
}
.connecting:before, .connecting:after {
    content: "";
    grid-area: 1/1;
    height: 30px;
    aspect-ratio: 1;
    background: #000;
    border-radius: 50%;
}
.connecting:after {
    margin-left: auto;
}
@keyframes connecting-keyframes {
    to {
        width: 40px;
    }
}

.gradient-circle-loader {
    display: inline-grid;
    float: right;
    width: 1rem;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #000000;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: gradient-circle-loader-keyframes 1s infinite linear;
}
@keyframes gradient-circle-loader-keyframes {to{transform: rotate(1turn)}}
  
.arc-loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid gray;
    border-right-color: white;
    animation: arc-loader-keyframes 1s infinite linear;
}
@keyframes arc-loader-keyframes {to{transform: rotate(1turn)}}
  
.quantized-loader {
    width: 50px;
    --b: 8px; 
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(#0000 10%,#fff) content-box;
    -webkit-mask:
      repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
      radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
            mask-composite: intersect;
    animation: quantized-loader-keyframes 1s infinite steps(10);
}
@keyframes quantized-loader-keyframes {to{transform: rotate(1turn)}}
  
.ring-loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 3px;
    background: 
      radial-gradient(farthest-side,#fff 95%,#0000) 50% 0/12px 12px no-repeat,
      radial-gradient(farthest-side,#0000 calc(100% - 5px),#fff calc(100% - 4px)) content-box;
    animation: ring-loader-keyframes 2s infinite ;
}
@keyframes ring-loader-keyframes {to{transform: rotate(1turn)}}

#fontSizeDialog > div {
    display: flex;
}

#fontSizeDialog > div :first-child {
    font-size: 18pt;   
    align-self: end;
    text-align: left;
}

#fontSizeDialog > div :last-child {
    font-size: 36pt;   
    align-self: end;
    text-align: right;
}

#loginDialog {
    display: flex;        
    flex-direction: column;
    z-index: 125;
    border-radius: 0.5em;
    top: 15rem;
}

#loginDialog label {
    font-size: 2em;
    width: 3em;
}

#loginDialog input {
    font-size: 2em;
    height: unset;
    vertical-align: middle;
}

#loginDialogButtonRow {
    display: inline-flex;
    justify-content: space-around;
    padding-top: 1em;
}

#loginDialogButtonRow > div {
    display: inline-flex;
    width: unset;
    font-size: 1.5em;
}

#keepLoggedIn {
    display: none;
}

#storeSessionLabel {
    width: -moz-fit-content !important;
    width: fit-content !important;
    padding-right: 0;
}

#keepLoggedIn + img {
    filter: opacity(0.3);
    width: -moz-fit-content;
    width: fit-content;
}

#keepLoggedIn:checked + img {
    filter: opacity(1);
    width: -moz-fit-content;
    width: fit-content;
}

#closeOptions {
    min-width: unset;
    justify-content: flex-end;
}

#filter {
    width:100%; 
    min-width: 10em;
    margin-left: 1vw; 
    font-size: unset;
}

#apply-filter {
    filter: invert(1); 
    margin-left: 1vw;
}

.inverted {
    filter: invert(1);
}

.non-inverted {
    filter: invert(0);
}

.left-aligned {
    float: left;    
}

.chordbox-notes {
    height: 100px; 
    width: 30%;
}

.chordbox-piano {
    height: 100px; 
    width: 42%;    
}

.chordbox-guitar {
    height: 100px; 
    width: 28%;
}

#clearSearchText {
    margin-left: 0.5rem;
}

#filterRow {
    display: flex; 
    width: 100%;
}

#btnMore {
    position: relative;
}

#btnMore-content {
    position: absolute;
    margin-top: 2.1em;
    padding: 0.5em;
    padding-bottom: 0;
    background-color: #eeeeee;
    box-shadow: 0px 8px 16px 0px rgba(0.9,0.9,0.9,0.8);
    z-index: 105;
    border-radius: 0.5em;
    text-align: center;
}
#btnMore-content > div {
    filter: invert(1);
    margin-bottom: 0.5em;
}

#searchRow {
    width: 100%;
}

.deviceinfo {
    font-size:small;
}

#list {
    max-height: calc(100% - 11vh - 16px);
    margin-top: 1.5vh;
    margin-bottom: 0.5vh;
}

#loading-circle {
    position: absolute;
    background: white;
    left: calc(50% - 1.5em);
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: background-color 0.5s ease;
}

#loading-circle circle {
    stroke: #000066;
    fill: none;
    stroke-width: 3px;
    stroke-dashoffset: -2.669em;
    stroke-dasharray: 2.669em;
    transform: rotate(-90deg);
    transform-origin: 50%;
    position: relative;    
}

#loading-circle.animate circle  {
    animation: loading-circle 1.4s linear infinite;
}

#loading-circle.animate.level2  {
    background: #ff0;
}

#loading-circle.animate.level3  {
    background: orangered;
}

#loading-circle.animate.level3 circle {
    stroke: white;
}

@keyframes loading-circle {
    0% {
        transform: rotate(0);
        stroke-dashoffset: 2.669em;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        transform: rotate(360deg);
        stroke-dashoffset: -2.669em;
    }
}

#musicChordBox {
    max-width: 100px; 
    display: block;
}

.notif-badge {
    position: fixed;
    top: -20%;
    right: -20%;
    background: red;
    border-radius: 50%;
    padding: 2px;
    font-weight: bolder;    
    width: 1.5em;
    height: 1.2em;
    text-align: center; 
    color: white;   
}

#songsToCheckCount {
    filter: invert(1);
}

#moreNotifCount {
    position: absolute;
    top: 0;
    right: 0;
}

#optionsNotifCount {
    position: absolute;
    top: 0;
}

#imgNight {
    filter: invert(0);
}

#btnEditInstructions {
    background-image: url(images/edit-instructions.svg);
    width: 3rem;
    cursor: pointer;
    background-size: 1.2rem;
    background-repeat: no-repeat;
    background-position: center;
}

label:has(img.hidden) {
    display: none;
}

input.hidden + label {
    display: none;
}

#chkInstructions {
    width: 0px;
}

#instructionsDialog {
    position: absolute;
    z-index: 200;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
    background: white;
}

#instructionsDialog.dark {
    background: black;
}

#instructionsDialogButtonRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: white;
    margin-bottom: 0.5rem;
}

#instructionsDialogButtonRow .dark {
    filter: invert(1);
    background: transparent;
}

#instructionsDialog > #instructionsEditor {
    max-height: calc(100% - 2rem);
}

#ie-dialog-reset {
    margin-left: 1rem;
    background: transparent;
}

#ie-dialog-save {
    margin-right: 1rem;
    background: transparent;
}

#ie-dialog-close {
    position: absolute;
    z-index: 131;
    right: 0.3em;
    top: 0.3em;
    cursor: pointer;
    font-size: large;
    font-weight: bolder;
    border-radius: 100%;
}