.note-btn {
    width: 88px;
    height: 78px;
    font-size: 16px;
    margin-right: 5px;
    border: solid 2px #666;
}

#submit {
    width: 150px;
    height: 40px;
    font-size: 16px;
    margin-right: 5px;
  background: #108f43;
  text-decoration: none;
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  font-family: Roboto Condensed, sans-serif;
  color: #ffffff !important;
 border: none !important;
}

#submit:hover
{
    background: rgba(16, 143, 67, 0.8);
}

.bemol-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
    padding: 0 !important;
    margin: 0 !important;
    border-top: solid 2px #666;
    border-left: solid 2px #666;
}

.sharp-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
    padding: 0 !important;
    margin: 0 !important;
    border-top: solid 2px #666;
    border-right: solid 2px #666;
    border-left: solid 2px #666;
}

.scales-btn {
    height: 40px;
    width: 120px;
    font-size: 15px !important;
  background: #108f82;
  background-image: -webkit-linear-gradient(top, #0e7d70, #0e7d70);
  background-image: -moz-linear-gradient(top, #0e7d70, #0e7d70);
  background-image: -ms-linear-gradient(top, #0e7d70, #0e7d70);
  background-image: -o-linear-gradient(top, #0e7d70, #0e7d70);
  background-image: linear-gradient(to bottom, #0e7d70, #0e7d70);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  font-family: Roboto Condensed, sans-serif;
  color: #ffffff !important;
}

.bemol {
    margin-right: 5px;
    display: inline;
}

.buttons {
    display: none;
    margin-left: 50px;
    margin-top: 0px;
}

.scales {
    margin-left: 50px;
}

#answer {
    margin-top: 20px;
    margin-left: 50px;
    font-size: 22px;
  font-family: Roboto Condensed, sans-serif;
    font-weight: bold;
    margin-bottom: 0 !important;
}

#start {
    margin:0 0 30px 50px;
    width:auto;
    padding: 0 10px;
}

.inactive {
    width: 140px;
    height: 40px;
    font-size: 15px !important;
    margin-right: 10px;
    margin-top: 15px;
  background: #108f82;
  background-image: -webkit-linear-gradient(top, #0e7d70, #0e7d70);
  background-image: -moz-linear-gradient(top, #0e7d70, #0e7d70);
  background-image: -ms-linear-gradient(top, #0e7d70, #0e7d70);
  background-image: -o-linear-gradient(top, #0e7d70, #0e7d70);
  background-image: linear-gradient(to bottom, #0e7d70, #0e7d70);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  font-family: Roboto Condensed, sans-serif;
  color: #ffffff !important;
}

.active {
    width: 140px;
    height: 40px;
    font-size: 15px !important;
    margin-right: 10px;
    margin-top: 15px;
  background: #29979c;
  text-decoration: none;
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  font-family: Roboto Condensed, sans-serif;
  color: #ffffff !important;
}



.inactive:hover {
  background: #29979c;
  text-decoration: none;
}


#wrong1, #wrong2 {
    margin-top: 20px;
    margin-left: 50px;
    font-size: 22px;
  font-family: Roboto Condensed, sans-serif;
    color: red;
    font-weight: bold;
    margin-bottom: 0 !important;
}