/* ############# COLORS ##################### */
/* --- svg --- */

#svgclear {stroke:#996; }
#btnClear:hover #svgclear {stroke:#A30; }
.day #svgclear {stroke:#554; }
.day #btnClear:hover #svgclear {stroke:#D40; }
.blue #svgclear {stroke:#DDC; }
.blue #btnClear:hover #svgclear {stroke:#D50; }

.spotnotes .txtintervals {display:none;}
.spotintervals .txtnotes {display:none;}


.on #usefavscompare {stroke:#C70;}
.day .on #usefavscompare {stroke:#FFF; }
.blue .on #usefavscompare {stroke:#C70; }


svg.yellow { stroke:#950;} 
svg.red { stroke:#A21;}
.day svg.yellow { stroke:#F60;} 
.day svg.red { stroke:#C00;}
.blue svg.yellow { stroke:#F60;} 
.blue svg.red { stroke:#E31;}


/* ############# COLOR BACKGROUNDS BORDER ##################### */
/* ############# COLOR BACKGROUNDS BORDER ##################### */
/* ############# COLOR BACKGROUNDS BORDER ##################### */

#btnClear {background: none;}


/* ----- #allchordsymbols --- Analyzer Chord Names ----- */

#allchordsymbols, #allWarnings, #relatedLessons {background:#000; border:1px solid #191915}
.day #allchordsymbols, .day #allWarnings, .day #relatedLessons {background:#FFF; border:0px solid #CCB}
.blue #allchordsymbols, .blue #allWarnings, .blue #relatedLessons { background:#092835; border:1px solid #245;}

#allchordsymbols h2 ,#allWarnings h2, #relatedLessons h2 {border-bottom:1px solid #252C2C; font-size:1em; }
.day #allchordsymbols h2 , .day #allWarnings h2, .day #relatedLessons h2 {border-bottom:1px solid #252C2C; font-size:1.4em; }
.blue #allchordsymbols h2, .blue #allWarnings h2, .blue #relatedLessons h2 {border-bottom:1px dashed #970; }

#allchordsymbols button { background:#191915; border:1px solid #2C2C28;}
.day #allchordsymbols button { border:0px solid #BBA; background:#B5B4B0; background:none; border:1px solid #FFF; }
.blue #allchordsymbols button { background:#134; border:1px solid #256; border-radius:8px} 

#clickHere { color:#998; }
.day #clickHere { color:#554; }

.csBtn {color:#998;}
.csBtn:hover, .csBtn-active {color:#FFF; }
.day .csBtn { color:#554; border:0}
.day .csBtn:hover {color:#000; border:1px dashed #BC6 !important; } 
.day .csBtn-active {color:#110; border:1px solid #BC6 !important;} 
.blue .csBtn { color:#CCB;}
.blue .csBtn:hover {color:#FFF;} 
.blue .csBtn-active {color:#FFF; } 



/* .csBtnDescr {color:#887; border:0px solid #000; background:#191910  !important; }
.csBtnDescr-active { color:#FFF; border:0px solid #221; background:#202019 !important;}
.day .csBtnDescr {color:#888; border:0; background:#DDDDD8  !important; }
.day .csBtnDescr-active { color:#332; border:0; background:#DDDDD8 !important;} */


/* ----- #favsBox ------ Analyzer Store Chords --------- */
/* --- #btnFavsSave, #btnFavsDelete, #btnFavsCompare ----*/


#favsBox { background:none; } 
/* .day #favsBox { border:1px solid #CCC; border-width: 0 1px 1px 1px; border-radius: 0 0 8px 8px } */


#btnFavsSave, #btnFavsDelete, #btnFavsCompare { background:#161917; border:1px solid #443; }
.day #btnFavsSave, .day #btnFavsDelete, .day #btnFavsCompare { background:#F5F5F5; border:1px solid #887; }
.day #btnFavsCompare.on {background:#C70 !important;}
.blue #btnFavsSave, .blue #btnFavsDelete, .blue #btnFavsCompare { background:none; border:1px solid #356; }

.cell.free {background:#141616; border:2px dotted #221; color:#221;}
.cell.busy {background:#181919; border:2px dotted #554; color:#776;}
.cell.selected {background:#181919; border:2px dotted #C70; color:#D70;}
.day .cell.free {background:#E5E5E4; border:1px solid #BBA; color:#BBA;}
.day .cell.busy {background:#F5F5F5; border:1px solid #887; color:#221;}
.day .cell.selected {background:#C70; border:1px solid #665 !important; color:#FFF;}
.blue .cell.free {background:none; border:1px solid #245; color:#567;}
.blue .cell.busy {background:#245; border:1px dotted #689; color:#9AB;}
.blue .cell.selected {background:#B60; border:1px dotted #330; color:#FFF;}


 



/* ###################################################### */
/* ######## LAYOUT  ###### LAYOUT ####### LAYOUT  ####### */
/* ###################################################### */

#content {width:calc(100% - 355px); left:0px;}
@media screen and (max-width:1200px) {
    #content { width:calc(100% - 310px);left:0px;}
}
@media screen and (max-width:900px) {
    #content { width:calc(100% - 210px);left:0px;}
}
@media screen and (max-width:640px) {
    #content { width:96%; left:2%; }
}
#leftbar {display:none;}


.popupScreen {transition: left 0.3s;}
.optionlist, .controlBtn {border-radius:4px;}
#allchordsymbols, #staffbox, #favsBox, #allWarnings, #relatedLessons {border-radius:8px;}
.optionlist {cursor:pointer}


/* .controlBtn {position:absolute; margin:0 0 2px 0; padding: 2px 6px; border:0; background:none; line-height:1em; vertical-align:middle; z-index:5;} */
.controlBtn .btntxt {display:block; position:absolute; width:100%; left:0; bottom:2%; font-size:0.55em; text-align:center;}
.controlBtn svg {position:absolute; width:70%; height:60%; top:5%; left:15%; right: auto;}
#btnDesc svg { width:70%; height:46%; top:16%; left:15%;}

#btnTuning, #btnTuning *, #tuningboxtitle, #tuningScreen button, #tuningScreen * {user-select: none; -webkit-user-select: none;}


#btnTuning { position:absolute; width:120px; height:44px; right:20%; top:10px; padding:0;}
#btnClear { position:absolute; width:30px;height:30px;right:7%;top:15px;z-index:3}

#btnTuningName {bottom:10%}
#btnTuningTxt {position:absolute; font-size:0.8em; font-weight:bold; position:absolute; width:100%; height:50%; top:15%; left:50%; transform:translate(-50%,0); text-align:center;}



.spotnotes #btnNotesIntTxt2 {display:none;}
.spotintervals #btnNotesIntTxt1 {display:none;}

#stump { transform:rotate(0); -webkit-transform:rotate(0); transform-origin:center; -webkit-transform-origin:center;}
/* svg#useup { transform:rotate(90deg);}
svg#usedown { transform:rotate(90deg);} */

#allchordsymbols { width:94%; min-height:150px; margin:15px 3%; padding:5px 3% 15px 3%; overflow:hidden; }
#allchordsymbols h2 {margin:10px 0; padding:0;}
#allchordsymbols button {font-size:1.2em; text-align:left; }
#allchordsymbols button { width:49%; height:36px; margin:2px 0.5%; padding:5px 5px 0 10px; overflow:visible; }
button#btnInv0a {width:99%}
#clickHere { position:relative; padding:15px 5% 15px 5%; margin:0; white-space: pre-line; opacity:0.7; font-size:1.2em; line-height:1.6em;  text-align:center;}

#allWarnings, #relatedLessons { width:94% !important; min-height:150px; margin:12px 3% 15px 3%; padding:5px 3%;}
#allWarnings h2, #relatedLessons h2 { margin:10px 0; padding:0; }
#allWarnings h3, #relatedLessons h3 { margin:10px 0; padding:0; }
#relatedLessons a { float:left; width:49%; height:36px; margin:5px 1% 2px 0; padding:7px 5px 0 10px; overflow:visible; }
#relatedLessons #related { padding:5px 0; margin:0; border-radius:4px; font-size:0.80em;}


/* #descrAllChordSymbols {} >>> oo-app-chsum.css */
#descrAllChordSymbols { position:relative; display:none;}
#btnInvDescr0a {width:49%; margin:2px 50.5% 2px 0.5% !important; } /* text-align: center; padding-left:0px */
.csBtnDescr-off {display:none !important;}
.csBtnDescr-active svg, .csBtnDescr-off svg, .csBtnDescr svg  { position:absolute; width:30px; height:70%; left:3px; top:4px; }

.csBtnDescr, .csBtnDescr-active {  border-radius:5px !important;
	position:relative; display:block; 
	height:34px; width:49%; float:left;  
	padding-left:40px; padding-top:5px; margin:2px 0.5%;  
	text-align: left;overflow:hidden; 
}

.csBtn-off {display:none;}
.csBtn-active, .csBtn-off, .csBtn {position:relative; }
.csBtn-active svg, .csBtn-off svg, .csBtn svg {display:none}
.csBtn-active svg.yellow, .csBtn-off svg.yellow, .csBtn svg.yellow, .csBtn-active svg.red, .csBtn-off svg.red, .csBtn svg.red {display:block !important}
.csBtn-active svg, .csBtn-off svg, .csBtn svg { position:absolute; width:25px; height:70%; left:auto; right:10px; top:4px; }

/* .csBtn-off svg, .csBtn svg {display:none}  */

#staffbox, #favsBox {position:relative; width:100%; height:200px; }
#favsBox {height:220px;}
#staffbox { text-align:center; }  
.staff-wrapper {width:100%; height:200px; } 
.staff-canvas { position:absolute; width:100%; height:100%; top:0%; right:0%; margin:0; } 

#btnFavsSave, #btnFavsDelete, #btnFavsCompare, .cell { border-radius:4px; }
#btnFavsSave, #btnFavsDelete, #btnFavsCompare { position:absolute; width:28%; height:55px; top:10px; }
#btnFavsSave svg, #btnFavsDelete svg, #btnFavsCompare svg { width:56%; height:56%; left:22%; top:8%; }
#btnFavsSave span, #btnFavsDelete span, #btnFavsCompare span { bottom:4%; }
#btnFavsSave, #btnFavsDelete {left:36%; }
#btnFavsCompare {left:68%; }
#btnFavsDelete {display:none;}

.cell {position:absolute; width:28%; height:35px; font-size:0.8em; }

#cell1, #cell2, #cell3 {top:38%;}
#cell4, #cell5, #cell6 {top:59%;}
#cell7, #cell8, #cell9 {top:80%;}
#cell1, #cell4, #cell7 {left:4%;}
#cell2, #cell5, #cell8 {left:36%}
#cell3, #cell6, #cell9 {left:68%;}

#syntaxButtons {font-size:1em; position:relative; width:100%; height:180px; margin:0} /* syntaxFilterContent */
 ul, li, #syntaxButtons h3 {margin:0 1%; padding:0;}
#syntaxButtons h3 {position:relative; height:5px; border:0; font-size:0.7em; font-weight:normal; font-family: sans-serif; text-align:right;}
#syntaxButtons h3 > span {position:absolute; right:5px; top:8px;}
#syntaxShort, #syntaxIcon, #syntaxPunct  { height:55px;}
#syntaxShort li, #syntaxIcon li, #syntaxPunct li  {height:50%; margin:0; }
.optionlist { padding:5px;  }
.optionlist li { position:relative; display:block; list-style-type:none; } 
.optionlist li > span {position:absolute; left:14%; top:calc(50% - 0.4em); font-size:0.9em; line-height:1em; }
.optionlist li > .svgyes, .optionlist li > .svgno {position:absolute; width:10%; height:80%; left:0; top:10%;  }
.yes .svgno, .no .svgyes {display:none} 


@media screen and (max-width:1150px) {
    #btnClear { right:12%; }
}
@media screen and (max-width:640px) {
    #btnTuning { right:24%; }
    #btnClear { right:17%;}
    #relatedLessons a { width:100%; float:none; margin:6px 0; }
}