/* keep the button fixed at top-right */
.fachords_app .appPanel { position: relative; }

.fachords_app  .helpButton {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.appTitle{
    color:#222222!important;
    font-size:1.0em!important;

}

.helpButton{
    width: 50px!important;
}

/* align title to the left; keep some right padding so it never sits under the button */
.fachords_app .appPanel .appTitle {
  margin: 0;
  text-align: left;
  padding-right: 48px; /* >= helpButton width + gap */
  line-height: 1.2;
}

.clear{
    clear:both;
}

.hud{
    margin-top:10px;
    margin-bottom: 20px;
}


button {
    overflow: visible;
    border-radius: 5px;
}

button, select {
    text-transform: none
}

.color_degree_0 {
    background-color: #F7E721 !important;
    color: #222222 !important;
}

.color_degree_1 {
    background-color: #C6DF31 !important;
    color: #FFFFFF !important;
}

.color_degree_2 {
    background-color: #6BBE52 !important;
    color: #FFFFFF !important;
}

.color_degree_3 {
    background-color: #00AE84 !important;
    color: #FFFFFF !important;
}

.color_degree_4 {
    background-color: #00AECE !important;
    color: #FFFFFF !important;
}

.color_degree_5 {
    background-color: #0086CE !important;
    color: #FFFFFF !important;
}

.color_degree_6 {
    background-color: #4261AD !important;
    color: #FFFFFF !important;
}

.color_degree_7 {
    background-color: #8C499C !important;
    color: #FFFFFF !important;
}

.color_degree_8 {
    background-color: #E7288C !important;
    color: #FFFFFF !important;
}

.color_degree_9 {
    background-color: #EF4142 !important;
    color: #FFFFFF !important;
}

.color_degree_10 {
    background-color: #F76929 !important;
    color: #FFFFFF !important;
}

.color_degree_11 {
    background-color: #FFAE21 !important;
    color: #FFFFFF !important;

}