.drag {
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE 和 Edge 浏览器专用 */
  scrollbar-width: none; /* Firefox 浏览器专用 */
}

.drag::-webkit-scrollbar {display: none;}/* 对基于 WebKit 的浏览器（如 Chrome 和 Safari）隐藏滚动条 */

.player-button {
  margin-right: 8px;
  margin-top: 3px;
  margin-bottom: 3px;
  border: none; /*1px solid #000*/
  background-color: #f2f2f2;
  padding: 3px 10px; /* 减少内边距以缩小按钮大小 */
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
  color: white;
  font-size: 12px; /* 可以根据需要调整字体大小 */
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 24px; /* 按钮的具体高度，可根据设计需求调整 */
}

/* 使用[data-color="color1-？"]选择器为按钮设置默认背景颜色 */
.player-button[data-color="color1"] {
  background-color: Orange;
}

.player-button[data-color="color2"] {
  background-color: Teal;
}

.player-button[data-color="color3"] {
  background-color: Blue;
}

.player-button[data-color="color4"] {
  background-color: Purple;
}

.player-button[data-color="color5"] {
  background-color: Gold;
}

.player-button[data-color="color6"] {
  background-color: Pink;
}

.player-button[data-color="color7"] {
  background-color: Gray;
}

.player-button[data-color="color8"] {
  background-color: Brown;
}

.player-button[data-color="color9"] {
  background-color: Black;
}

.player-button[data-color="color10"] {
  background-color: Cyan;
}

/* 更多按钮的颜色... */

.player-button:hover {
  background-color: Orange; /* 鼠标悬停时按钮背景颜色 */
}

.player-button.active {
  background-color: green;
}

/*右下角  停  按钮*/
#FMzanting {
  position: relative;
}

.FMzanting-button {
  position: absolute;
  bottom: -30px;
  right: 0;
  border: 1px dashed green; /* 设置边框宽度和颜色 */
  border-radius: 50%; /* 创建圆形边框 */
  background: transparent; /* 去除背景 */
  padding: 3px; /* 设置内边距，以保持按钮的大小 */
  cursor: pointer;
  font-size: 14px; /* 设置字体大小 */
  color: #FFCC00;
  box-shadow: none; /* 去除阴影，如果有的话 */
  transition: border-color 0.3s; /* 添加过渡效果，使边框颜色变化平滑 */
  display: flex; /* 启用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  text-align: center; /* 文本居中，以防万一 */
  line-height: normal; /* 防止行高干扰垂直居中 */
  height: 30px; /* 设置一个固定的高度，确保文本在边框内垂直居中 */
  width: 30px; /* 设置一个固定的宽度，通常与高度相同以保持圆形 */
}

.FMzanting-button:hover {
  border-color: #ff0000; /* 鼠标悬停时改变边框颜色 */
}

.FMzanting-button:active {
  transform: translateY(1px); /* 点击时稍微向下移动，模拟按下的效果 */
}

#FMzanting .FMzanting-button {
  display: none;
}



/* FM容器右侧阴影＋呼吸灯动画 */
.drag2 {border-radius: 5px;animation: breathingLight 3s infinite;}
    @keyframes breathingLight {
        0% { box-shadow:6px 0px 0px rgba(0, 0, 0, 0); }
        5% { box-shadow:6px 0px 0px rgba(0, 0, 0, 0.2); }
        10% { box-shadow:6px 0px 0px rgba(0, 0, 0, 0.4); }
        15% { box-shadow:6px 0px 0px rgba(0, 0, 0, 0.6); }
        20% { box-shadow:6px 0px 0px rgba(0, 0, 0, 0.8); }
        25% { box-shadow:6px 0px 0px rgba(0, 0, 0, 1); }
        30% { box-shadow:6px 0px 0px rgba(0, 0, 0, 0.8); }
        35% { box-shadow:6px 0px 0px rgba(0, 0, 0, 0.6); }
        40% { box-shadow:6px 0px 0px rgba(0, 0, 0, 0.4); }
        45% { box-shadow:6px 0px 0px rgba(0, 0, 0, 0.2); }
        50% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0); }
        55% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0.2); }
        60% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0.4); }
        65% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0.6); }
        70% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0.8); }
        75% { box-shadow:6px 0px 0px rgba(255, 255, 255, 1); }
        80% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0.8); }
        85% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0.6); }
        90% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0.4); }
        95% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0.2); }
        100% { box-shadow:6px 0px 0px rgba(255, 255, 255, 0); }    }