.piano-container {
  --font-size: 0.7rem;
  --white-key-width: 34px;
  --white-key-height: 100px;
  --black-key-width: calc(var(--white-key-width) * .75);
  --black-key-height: calc(var(--white-key-height) * .55);
  background: #2a2c2f;
  border: 10px solid #2a2c2f;
  border-radius: 10px;
  color: #606060;
  font-size: var(--font-size);
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}
.piano-container.octaves-1 {
  width: calc(var(--white-key-width) * 7 + 20px);
}
.piano-container.octaves-2 {
  width: calc(var(--white-key-width) * 14 + 20px);
}
.piano-container.octaves-3 {
  width: calc(var(--white-key-width) * 21 + 20px);
}
.piano-container.octaves-4 {
  width: calc(var(--white-key-width) * 28 + 20px);
}
.piano-container.octaves-5 {
  width: calc(var(--white-key-width) * 35 + 20px);
}
.piano-container.octaves-6 {
  width: calc(var(--white-key-width) * 42 + 20px);
}
.piano-container.octaves-7 {
  width: calc(var(--white-key-width) * 49 + 20px);
}
.piano-container.octaves-8 {
  width: calc(var(--white-key-width) * 56 + 20px);
}
@media (min-width: 768px) {
  .piano-container {
    --font-size: 0.8rem;
    --white-key-width: 40px;
    --white-key-height: 128px;
  }
}
.piano-container .piano-controls {
  color: #fff;
  padding: 10px 5px;
  border-bottom: 5px solid #42454a;
}
.piano-container .piano-keyboard {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-bottom: 12px;
}
.piano-container .key-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
}
.piano-container .white-key {
  align-items: center;
  background: #efefef;
  border: 1px solid #aaa;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-width: 0;
  box-shadow: 0 12px 0 #bcbcbc;
  display: flex;
  flex-direction: column;
  height: var(--white-key-height);
  justify-content: end;
  padding-bottom: 10px;
  width: var(--white-key-width);
  user-select: none;
}
.piano-container .white-key:not(.read-only):hover {
  background: #e2e2e2;
  box-shadow: 0 12px 0 #afafaf;
  cursor: pointer;
}
.piano-container .white-key:not(.read-only):active, .piano-container .white-key:not(.read-only).active, .piano-container .white-key.active {
  background: #d5e6ff;
  border-color: #d5e6ff;
  box-shadow: 0 12px 0 #a2c8ff;
}
.piano-container .white-key.success, .piano-container .white-key:not(.read-only).success {
  background: #d5ffd8;
  border-color: #d5ffd8;
  box-shadow: 0 12px 0 #bcffc0;
}
.piano-container .white-key.danger, .piano-container .white-key:not(.read-only).danger {
  background: #ffc6c6;
  border-color: #ffc6c6;
  box-shadow: 0 12px 0 #ffadad;
}
.piano-container .black-key {
  background: #323232;
  border: 1px solid #484848;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-width: 0;
  box-shadow: 0 12px 0 #252525;
  height: var(--black-key-height);
  position: absolute;
  width: var(--black-key-width);
  top: 0;
  user-select: none;
}
.piano-container .black-key:nth-child(1) {
  left: calc(1 * var(--white-key-width) - var(--black-key-width) / 2);
}
.piano-container .black-key:nth-child(2) {
  left: calc(2 * var(--white-key-width) - var(--black-key-width) / 2);
}
.piano-container .black-key:nth-child(3) {
  left: calc(3 * var(--white-key-width) - var(--black-key-width) / 2);
}
.piano-container .black-key:not(.read-only):hover {
  background: #3f3f3f;
  box-shadow: 0 12px 0 #323232;
  cursor: pointer;
}
.piano-container .black-key:not(.read-only):active, .piano-container .black-key:not(.read-only).active, .piano-container .black-key.active {
  background: #c5d4eb;
  border-color: #c5d4eb;
  box-shadow: 0 12px 0 #9fb8de;
}
.piano-container .black-key.success, .piano-container .black-key:not(.read-only).success {
  background: #c5ebc7;
  border-color: #c5ebc7;
  box-shadow: 0 12px 0 #b2e4b5;
}
.piano-container .black-key.danger, .piano-container .black-key:not(.read-only).danger {
  background: #ebb7b7;
  border-color: #ebb7b7;
  box-shadow: 0 12px 0 #e5a3a3;
}

a,
.btn-link {
  text-decoration: none;
}

.btn-hover-danger:hover {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225,83,97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
  border-color: #bb2d3b !important;
}