* {
  box-sizing: border-box;
  font-family: 'Noto Sans TC', sans-serif;
}
.fa {
  padding-top: 5px;
  font-size: 20px;
  width: 30px;
  height:30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
  color:white;
}
.fa:hover {opacity: 0.7;}
.fa-facebook {background:#3B59BB;}
.fa-twitter {background: #55ACEE;}
.fa-google {background: #dd4b39;}
.fa-linkedin {background: #007bb5;color:white;}
.fa-instagram {background: #125688;}
.fa-pinterest {background: #cb2027;}
/*Menu styles*/
div.mHeader {
 position: fixed;top:0;width:100%;height:50px;margin:0;padding:10px;z-index:1;background-color:#8793ff;
 font-size:16px;
}
div.mHeaderH {display:inline;float:left;width:50px;margin-top:-4px;cursor:pointer;
}
div.mHeaderM {display:inline-block; margin-right:10px;float:right;cursor:pointer;
}
div.mHeaderT {display:inline; margin-left:10px; text-align:left; font-size:24px;
}
.mHeaderM span {
 display:block; position:relative; right:0px; width:40px; height:50px;
}
.mHeaderT span {
 width:100%;
}
/*.footerS {width:100%;height:auto; background-color:#8793ff;}*/
.footerFixed {position:fixed; bottom:0; max-width:1200px;}

#idWatermark {
 position:fixed;
 left: 20px;
 top: 60px;
 font-family: 'Brush Script MT', cursive;
 font-size:60px;
 color:blue;
 opacity:0.3;
/* -webkit-text-fill-color: none;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: blue;*/
}
.container {
 position:relative;
 top:50px;
 max-width:1200px;
 min-height: calc(100vh - 100px);
 margin:0 auto;
 font-family: 'Noto Sans TC', sans-serif;
}

.jContainer {
  display: flex;
  flex-wrap: wrap;
  font-family: 'Noto Sans TC', sans-serif;
  justify-content:space-between;
}

.mContainer {
 display:none;
 position:absolute;
 top: 100%;
 //left:50;
 right:0px;
 width:180px;
 text-align:left;
 border: 1px solid black;
 border-radius:4px;
 background-color:#faf8f7;
 box-shadow: 3px 3px 5px 6px #ccc;
}

.mContainer a {
 display:block;
 text-align:left;
 text-decoration:none;
}

.mContainer ul {
 padding:0px;
 list-style:none;
 cursor:pointer;
}

.mContainer li {
 padding: 4px 10px;
}

.comboContainer {
 position:relative;width:200px;height:24px; margin:0;padding:0;
}
.comboContainer select {
 position:absolute;top:0;left:0;width:200px;
}
.comboContainer input {
 position:absolute;top:0px;left:0px;width:182px;height:100%;
}

#idHeaderMDropD li:hover{
 background-color:#f5f3f2;
 filter: brightness(95%);
}

.jItemL {
  background-color: #f1f1f1;
  padding: 10px;
  flex:0 0 49%;
  border-radius:10px;
  margin-bottom:4px;
  //margin-right:4px;
}
.jItemL table td {
 min-width:30px;
}
.jItemR {
  background-color: white;
  padding: 2px;
  flex:0 0 49%;
  border-radius:10px;
  margin-bottom:4px;
  vertical-align:middle;
}
a {color:black;text-decoration: none;}
/*.jItemL a:link {color: black;text-decoration: none;}
.jItemL a:visited {color: black;text-decoration: none;}
.jItemR a:link {color: black;text-decoration: none;}
.jItemR a:visited {color: black;text-decoration: none;}*/

.cContainer {//centered container
 display:block;
 width:360px;
 margin: 0 auto;
}
.tContainer {//tuner container
 display:block;
 width:360px;
 height:360px;
 margin: 0 auto;
}
.gContainer {//game container
 width:100%;
 height:250px;
 margin:0 auto;
 border:1px solid;
}
.dRespons1 {
 position:relative;
 top:0px;
 left:200px;
 width:100%;
}
.dInfo {
 margin:10px 20px;
 padding:10px;
 border-radius:4px;
 background-color:#FAEBD7;
}
.dChordButtons, .dChordButtonsM {
 display:inline-block;
 background-color:tan;
 color:black;
 padding:4px;width:auto;
 border:none;
 border-radius:8px;
}
.dChordButtons {
 margin-bottom:5px;
}
.btn-group button, .btn-group2 button, .btn-groupM button, .btn-groupM2 button {
 font-size:16px;
 background-color: rgb(240,240,240);
 color:black;
 width:60px;
 height:35px;
 vertical-align:bottom;
 text-align:center;
 border:none;
 border-radius:8px;
 margin-bottom:8px;
 margin-right:8px;
 padding:0px;
}
.btn-group2 button, .btn-groupM2 button {
 margin-bottom:0px;
}
.btn-groupM button, .btn-groupM2 button {
}
.btn-group button:last-child,.btn-group2 button:last-child,.btn-groupM button:last-child, .btn-groupM2 button:last-child {
 margin-right:0px;
}
.btn-group2 input,label {
 margin-top:0px;
}
.scaleTable {
}
.scaleTable td {width:4ch;}
.closeButton {
position:absolute;
top:0;
right:0;
width:20px;
background:#DFDFDF;
text-align:center;
cursor:pointer;
}
.bNormal {
 display:inline;
 border:none;
 padding:10px 10px;
 background:DeepSkyBlue;
 font-size:1rem;
 cursor:pointer;
 margin:auto;
}
.bCenter {
 display:block;
 border:none;
 padding:1rem 2rem;
 background:DeepSkyBlue;
 font-size:1rem;
 cursor:pointer;
 margin:auto;
}
.bLeft {
 float:left;
}
.bRight {
 float:right;
 width:80px;
 background:DeepSkyBlue;
 font-size:20px;
}
.pCenter {
 text-align:center;
}
.pnormal {
 font-weight:normal;
 font-size:1rem;
}
.p2 {
 display:block;
 margin-top:0;
 margin-bottom: 0.5em;
}
.triangleLeft {
 display:inline-block;
 width: 0;
 height: 0;
 cursor:pointer;
 border-top: 15px solid transparent;
 border-right: 20px solid #555;
 border-bottom: 15px solid transparent;
}
.triangleRight {
 display:inline-block;
 width: 0;
 height: 0;
 cursor:pointer;
 border-top: 15px solid transparent;
 border-left: 20px solid #555;
 border-bottom: 15px solid transparent;
}
pc { color:blue;}
h1 { font-size:24px; font-weight:normal;}
h2 { font-size:20px; font-weight:normal;}
h3 { font-weight:normal;}

.sDisabled:disabled {
 color:black;
}

.svgClass {
 //overflow: visible;
 width:100%;
}
.trTone {
 font-size:16px;
}

/*@media (max-width: 800px) {
  .jItemL {flex: 50;}
  .jItemR {flex: 50;}
}*/
@media (max-width: 680px) {
 .dChordButtons button {width:44px;}
 .dChordButtonsM button {width:44px;}
}
@media (max-width: 600px) {
  .jItemL, .jItemR {
    flex: 1 1 auto;}
  .jContainer {flex-direction:column;}
  .mContainer a {font-size:16px;}
  /*.mHeaderT span {font-size:16px;}*/
  .jItemL {order: 1;}
  .jItemR {order: 2;}
  /*.tContainer {width:100%;}*/
}
@media (max-width: 400px) {
 /*.svgClass {width:360px;}*/
 .dRespons1 {left:20px;}
 .trTone {font-size:12px;}
}
@media (max-width: 380px) {
 .dChordButtons button {width:40px;}
 .dChordButtonsM button {width:40px;}
}
@media (max-width: 370px) {
 .dChordButtons {white-space:nowrap;}
}
@media (max-height: 400px) {
 div.mHeader {position:static;}
}
/*@media (hover: hover) {
 .jItem:hover {
  background-color: #d1d1e3;
 }
}*/

/*idUser::after {
 content: '\0025BE'; //▾
}*/

.adropdown-menu { /*integrated submenu,if disabled*/
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 10px;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #f5f3f2;/*#fff;*/
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  box-shadow: 3px 3px 5px 6px #ccc;
}
.dropdown-submenu .dropdown-menu {
  display:none;
  top: 100%;
  left: 4px; /*-90%/100%; other side*/
  margin-top: -1px;
  padding:10px;
}
.dropdown-submenu {
 position:relative;
 padding:0px;
}

.message1 {
 display:none;
}

ul.breadcrumb {
  position:relative;
  top:45px;
  width:100%;
  max-width:1200px;
  margin: 0 auto;
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

ul.breadcrumb li a {color: green;}

/*Music styles*/
@font-face {
font-family: musicFont;
src: url('./BravuraText.otf') format('opentype');
}
.noteFret {font-family:Arial; font-size:8px; text-anchor:middle; fill:black;}
.userNoSelect {user-select:none;}

.styleNote {
font-family: musicFont;
font-size: 2em;
}
.styleNoteG {
font-family: musicFont;
font-size: 3.5em;
}
.styleNoteD {
 font-family:musicFont;
 position:fixed;
 top:0;
}
.styleNoteHilight {
font-family: musicFont;
font-size: 5em;
fill: blue,
}
.styleBeatText {
font-family: musicFont;
font-size: 1em;
}

.styleFreqAxis {
font-family: Arial;
font-size: 10px;
}

.styleNoteIcon {
font-family: musicFont;
font-size: 2em;
position: absolute;
top:0;
left:0;
content: "&#xE1D5";
}

.styleTimeSignature {
font-family: musicFont;
font-size: 1.5em;
}

.styleSongSelect {
width: calc(100% - 4px);
margin: 2px 2px 5px 2px; //t r b l
padding:0px;
}

.styleMetronome {
display:inline-block;
vertical-align:top;
border: solid 2px;
border-radius: 4px;
margin:0px 5px 0px 0px;
padding:0px;
min-width:340px;
height:90px;
font-size:14px;
font-weight: normal;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
.styleMetronome table td {
min-width:40px;
}
.styleMetronome table td button,select {
width:100%;
height:24px;
}
.styleMetronome table td >#idBpm {
width:4em;
}
#idBeatUnit {
 vertical-align:top;
 font-family:musicFont;font-size:18px;
}
#idBeatUnit >option {
 vertical-align:top;
 font-family:musicFont;font-size:18px;
}
@media screen and (max-width:360px) {
 .styleMetronome {
 margin:4px 4px 0px 4px;
 display:block;
 width:360px;
 }
}

.styleSpectrumPane {
 position: absolute;
 left: 10px;
 top:300px;
 width:1500px;
 height:350px;
 cursor:default;
 //background-color:red;
 border: solid 1px;
}
/*contact form styles*/
.center {
 margin:auto;
 max-width:700px;
 }
.contact {
 position:relative;
}
.contact input, textarea {
 display:block;
 padding: 12px;
 width:100%;
 }
.contact label {
 padding-top:4px;
 display:block;
 width:100%;
 }
.contact textarea {
 font-family:inherit;
 font-size:inherit;
 height:200px;
}
.turha {
 display:none;
}