.chord-notation {
        font-weight: 600;
        color: #ff3434d4;
        font-size: max(16px, 0.9vw);

        
    }
    .chord-notation.excerpt-chord {
        font-size: inherit !important;
    }
    .sub-chord {
        
        color: #309583; 
        font-family: emoji;
    }
    .bass-note {
        font-size: 15px;
        color: #309583; /* Replace with the color you want */
    }
    .chord-off{
        text-transform: none;
        padding: 1px 5px;
        font-size: 10px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: white;
        margin-right: 5px;
        margin-bottom: 5px;
        background-color: #22c293;
        min-width: 40px;
    }
    .chord-off:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }
    .transpose-button {
        text-transform: none;
        padding: 5px 5px;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: white;
        margin-right: 5px;
        margin-bottom: 5px;
        background-color: #4CAF50;
        min-width: 40px;
    }
    .sub-chordType{
        font-size: 14px;
        color: #9534ffa1;
    }
    .sub-Chord--Bar{

    }
    .sub-Chord---Bar{
        color: rgb(23 59 86 / 80%);
        font-size: 10px;
        background-color: rgb(217 6 125 / 6%);
        border-radius: 4px;
        padding: 5px;
    }
    .sub-Chord----Bar{
        color: rgb(199 104 112);
        font-size: 10px;
        background-color: rgb(196 222 20 / 20%);
        border-radius: 2px;
        padding: 5px;
    }
    .transpose-button:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }
        
        .transpose-button:disabled {
    box-shadow: 0px -10px 20px 10px rgb(39 169 157);
    transform: translateY(-12px);
    }
    
    /* Updated button colors for better visibility */
    #transpose-C {  background-color: #FF6347; /* Tomato */ }
      
    #transpose-D { background-color: #FFD700; /* Gold */    }    
    
    #transpose-E { background-color: #2a193c80; /* LawnGreen */    }
    
    #transpose-F { background-color: #40E0D0; /* Turquoise */    }
 
    #transpose-G { background-color: #BA55D3; /* MediumOrchid */    }
   
    #transpose-A {  background-color: #FF69B4; /* HotPink */    }
    
    #transpose-B { background-color: #F08080; /* LightCoral */  }
    

    #sharpButton { background-color: #20B2AA; /* LightSeaGreen */  }
    #flatButton  { background-color: #778899; /* LightSlateGray */  }