/* ФОРТЕПІАННА КЛАВІАТУРА */
/* Контейнер для нот */
.notescontainer {
    font-size: 0.8em;
    border: 1px solid gray;
    background-color: lightgoldenrodyellow;
    padding: 8px;
}
.notescontainer h3 { font-size: 1em; }

/* Контейнер для пошуку нот */
.notebox {
    display: inline-block;
    font-size: 0.9em;
    text-align: center;
    padding: 2px;
    height: 30px;
    margin: 5px 1px 1px 1px;
    min-width: 35px;
    border: 1px solid gray;
    background-color: antiquewhite;
    border-radius: 5px;
    box-shadow: rgba(55,55,0,0.3) 2px 2px;
}

.NotesList {
    display: inline-block;
    width: 20%;
    border: 1px solid black;
    border-radius: 5px;
    vertical-align: top;
    background-color: rgb(255,255,200)
}
.pausebox {
    font-size: 1.1em;
    background-color: white;
    border: none;
    background-color: white;
}

.outerNoteBox { display: inline-block; text-align: center; }
.innerNotesContainer {
    padding: 5px;
    border: 1px solid darkred;
    background-color: rgba(255,255,200,0.9);
}



/*Кнопки вибору тривалостей для вводу мелодій*/
.durbtn {
    width: 40px;
    height: 40px;
    border: 1px solid black;
    border-radius: 2px;
    margin: 5px;
    transition: background-color 0.3s ease;
}

    .durbtn img {
        height: 30px;
        vertical-align: top;
    }


/* Клавіатура */
#pianoroll 
{ 
    position: relative; 
    width: 800px; 
    height: 200px; 
    font-size: 0; 
    padding-left: 10px; 

}

/* білі клавіші */
.whitepianobutton 
{ height: 200px; width: 50px; margin: 0; gap: 0px; }

/* чорні клавіші */
.blackpianobutton 
{ position: absolute; width: 40px; height: 110px; background: linear-gradient(black, darkslategrey); margin: 0; }

/* позиції для кожної чорної клавіші */
.cis1 { top: 0px; left: 35px; }
.dis1 { top: 0px; left: 90px; }
.fis1 { top: 0px; left: 180px; }
.gis1 { top: 0px; left: 235px; }
.b1  { top: 0px; left: 290px; }
.cis2 { top: 0px; left: 385px; }
.dis2 { top: 0px; left: 440px; }
.fis2 { top: 0px; left: 530px; }
.gis2 { top: 0px; left: 585px; }
.b2  { top: 0px; left: 640px; }

/* Transpose controls */
#transpose-controls {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 800px;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid black;
    gap: 10px;
    background-color: #f9f9cc;
    border-radius: 8px;
    font-size: 0.8em !important;
}



@media (max-width: 1024px) {
  .searchcontainer { display: block; }
  .searchleftcontainer { width: 100%; }
  .notesinfo { width: 65vh; }
  .whitepianobutton { width: 45px; }
  .blackpianobutton { width: 40px; }
  .cis1 { top: 0px; left: 35px; }
  .dis1 { top: 0px; left: 90px; }
  .fis1 { top: 0px; left: 180px; }
  .gis1 { top: 0px; left: 235px; }
  .b1  { top: 0px; left: 290px; }
  .cis2 { top: 0px; left: 385px; }
  .dis2 { top: 0px; left: 440px; }
  .fis2 { top: 0px; left: 530px; }
  .gis2 { top: 0px; left: 585px; }
  .b2  { top: 0px; left: 640px; }
}

@media (max-width: 768px) {
  .searchcontainer { display: block; }
  .searchleftcontainer { width: 100%; }
  .notesinfo { width: 65vh; }
  .whitepianobutton { width: 45px; }
  .blackpianobutton { width: 40px; }
  .cis1 { top: 0px; left: 35px; }
  .dis1 { top: 0px; left: 90px; }
  .fis1 { top: 0px; left: 180px; }
  .gis1 { top: 0px; left: 235px; }
  .b1  { top: 0px; left: 290px; }
  .cis2 { top: 0px; left: 385px; }
  .dis2 { top: 0px; left: 440px; }
  .fis2 { top: 0px; left: 530px; }
  .gis2 { top: 0px; left: 585px; }
  .b2  { top: 0px; left: 640px; }
}