.container {
  img {
    width: 100%;
    margin: auto;
    display: block;
  }
}
.changeIndex {
  font-size: 6px;
  position: absolute;
  left: 24px;
  bottom: 20px;
  z-index: 10;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: rgb(1, 193, 181);
  line-height: 15px;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

:global(.transverse) {
  .changeIndex {
    bottom: 10px;
    left: 1px;
  }
}

:global(.flute) {
  .changeIndex {
    left: 12px !important;
  }
}

:global(.piccolo) {
  .changeIndex {
    left: 1.5vw;
    bottom: 20px;
  }
}

:global(.clarinet) {
  .changeIndex {
    left: 0 !important;
  }
}

:global(.horn) {
  .changeIndex {
    left: 1vw;
    top: 1vh;
    // bottom: 1.5vh;
  }
}

:global(.up-bass-horn) {
  .changeIndex {
    left: 1vw;
  }
}

:global(.tuba) {
  .changeIndex {
    right: inherit;
    left: 1vw;
    bottom: 20px;
  }
}

:global(.saxophone) {
  .changeIndex {
    left: 1vw;
    // bottom: 1vh;
  }
}

:global(.trombone) {
  .changeIndex {
    left: 12px !important;
    // bottom: 1vh;
  }
}

@keyframes activeopacity {
  0% {
    transforopacitym: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes leftrotates {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
@keyframes rightrotates {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

:global {
  .small-drum {
    // transform: ;
    img[data-index='active'] :local {
      animation: activeopacity 0.2s;
      animation-delay: 0.3s;
      transform-origin: 0px 0px;
    }
    img[data-index='left'] :local {
      // transform: rotate(-10deg);
      animation: leftrotates 0.5s;
      transform-origin: 0px 0px;
    }
    img[data-index='right'] :local {
      // transform: rotate(5deg);
      animation: rightrotates 0.5s;
      transform-origin: 0px 0px;
    }
  }
}

:global {
  .piccolo {
    margin-top: 0;
  }
}
:global {
  .piano {
    .right101 #b101,
    .right102 #b102,
    .right103 #b103,
    .right103 #b103,
    .right104 #b104,
    .right105 #b105,
    .right106 #b106,
    .right107 #b107,
    .right108 #b108,
    .right109 #b109,
    .right110 #b110,
    .right111 #b111,
    .right112 #b112,
    .right113 #b113,
    .right114 #b114,
    .right115 #b115,
    .right116 #b116,
    .right117 #b117,
    .right118 #b118,
    .right119 #b119,
    .right120 #b120,
    .right121 #b121,
    .right122 #b122,
    .right123 #b123,
    .right124 #b124,
    .right125 #b125,
    .right126 #b126,
    .right127 #b127,
    .right128 #b128,
    .right129 #b129,
    .right130 #b130,
    .right131 #b131,
    .right132 #b132,
    .right133 #b133,
    .right134 #b134,
    .right135 #b135,
    .right136 #b136,
    .right137 #b137,
    .right138 #b138,
    .right139 #b139,
    .right140 #b140,
    .right141 #b141,
    .right142 #b142,
    .right143 #b143,
    .right144 #b144,
    .right145 #b145,
    .right146 #b146,
    .right147 #b147,
    .right148 #b148,
    .right149 #b149,
    .right150 #b150,
    .right151 #b151,
    .right152 #b152 {
      fill: #9fb9f9;
      stroke: #3f6ee0;
    }
    .right1 #h1,
    .right2 #h2,
    .right3 #h3,
    .right3 #h3,
    .right4 #h4,
    .right5 #h5,
    .right6 #h6,
    .right7 #h7,
    .right8 #h8,
    .right9 #h9,
    .right10 #h10,
    .right11 #h11,
    .right12 #h12,
    .right13 #h13,
    .right14 #h14,
    .right15 #h15,
    .right16 #h16,
    .right17 #h17,
    .right18 #h18,
    .right19 #h19,
    .right20 #h20,
    .right21 #h21,
    .right22 #h22,
    .right23 #h23,
    .right24 #h24,
    .right25 #h25,
    .right26 #h26,
    .right27 #h27,
    .right28 #h28,
    .right29 #h29,
    .right30 #h30,
    .right31 #h31,
    .right32 #h32,
    .right33 #h33,
    .right34 #h34,
    .right35 #h35,
    .right36 #h36{
      & > path:first-child{
        fill: url(#linearGradient-2);
      }
    }

    .left101 #b101,
    .left102 #b102,
    .left103 #b103,
    .left103 #b103,
    .left104 #b104,
    .left105 #b105,
    .left106 #b106,
    .left107 #b107,
    .left108 #b108,
    .left109 #b109,
    .left110 #b110,
    .left111 #b111,
    .left112 #b112,
    .left113 #b113,
    .left114 #b114,
    .left115 #b115,
    .left116 #b116,
    .left117 #b117,
    .left118 #b118,
    .left119 #b119,
    .left120 #b120,
    .left121 #b121,
    .left122 #b122,
    .left123 #b123,
    .left124 #b124,
    .left125 #b125,
    .left126 #b126,
    .left127 #b127,
    .left128 #b128,
    .left129 #b129,
    .left130 #b130,
    .left131 #b131,
    .left132 #b132,
    .left133 #b133,
    .left134 #b134,
    .left135 #b135,
    .left136 #b136,
    .left137 #b137,
    .left138 #b138,
    .left139 #b139,
    .left140 #b140,
    .left141 #b141,
    .left142 #b142,
    .left143 #b143,
    .left144 #b144,
    .left145 #b145,
    .left146 #b146,
    .left147 #b147,
    .left148 #b148,
    .left149 #b149,
    .left150 #b150,
    .left151 #b151,
    .left152 #b152 {
      fill: #FFC046;
      stroke: #FF6F38;
    }
    .left1 #h1,
    .left2 #h2,
    .left3 #h3,
    .left3 #h3,
    .left4 #h4,
    .left5 #h5,
    .left6 #h6,
    .left7 #h7,
    .left8 #h8,
    .left9 #h9,
    .left10 #h10,
    .left11 #h11,
    .left12 #h12,
    .left13 #h13,
    .left14 #h14,
    .left15 #h15,
    .left16 #h16,
    .left17 #h17,
    .left18 #h18,
    .left19 #h19,
    .left20 #h20,
    .left21 #h21,
    .left22 #h22,
    .left23 #h23,
    .left24 #h24,
    .left25 #h25,
    .left26 #h26,
    .left27 #h27,
    .left28 #h28,
    .left29 #h29,
    .left30 #h30,
    .left31 #h31,
    .left32 #h32,
    .left33 #h33,
    .left34 #h34,
    .left35 #h35,
    .left36 #h36{
      & > path:first-child{
        fill: url(#linearGradient-3);
      }
    }
  }
}
