/* 使用这个可隐藏滚动条
.drag {
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.drag::-webkit-scrollbar {display: none;}
*/

.drag {
  display: flex; /* 使用flex布局 */
  white-space: nowrap; /* 防止内容换行 */
  overflow-x: auto; /* 水平方向滚动 */
  overflow-y: hidden; /* 隐藏垂直滚动条 */
}
.drag::-webkit-scrollbar {height: 8px;display: none;}/* 针对webkit内核浏览器的滚动条整体样式  设置滚动条的高度  默认隐藏滚动条 */
.drag::-webkit-scrollbar-track {border-radius: 4px;background-color: rgba(255, 255, 255, 0.2);}/* 滚动条轨道样式  轨道圆角  轨道颜色 */
.drag::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(100, 100, 100, 0.5);}/* 滚动条样式  滚动条的圆角  滚动条的颜色*/
.drag:hover::-webkit-scrollbar {display: block;}/* 当鼠标悬停在元素上时显示滚动条 */
@media screen and (max-width: 768px) {.drag:hover::-webkit-scrollbar {display: none;}} /* 在移动端隐藏横向滚动条 */

.player-button {
  margin: 4px 8px 4.4px 0;
  border: none; /*1px solid #000*/
  background-color: #f2f2f2;
  padding: 2px 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: 22px; /* 按钮的具体高度，可根据设计需求调整 */
}

/* 使用[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: #0077BB; /* 鼠标悬停时按钮背景颜色 */
}

.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: 0 3px 3px 0;
  animation: fmyouce 2s infinite;
}
@keyframes fmyouce {
  0%, 100% {
    box-shadow: 
      inset 0 1px 0 rgba(0, 255, 0, 1), /* 上边内阴影 */
      inset 0 -1px 0 rgba(0, 255, 0, 1), /* 下边内阴影 */
      4px 0 0 rgba(0, 0, 0, 0); /* 右侧外阴影 */
  }
  50% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 0, 255, 1), /* 上边内阴影 */
      inset 0 -1px 0 rgba(255, 0, 255, 1), /* 下边内阴影 */
      4px 0 0 rgba(0, 0, 0, 1); /* 右侧外阴影 */
  }
}

.dark-theme .drag2 {
  border-radius: 0 3px 3px 0;
  animation: fmyoucedark 2s infinite;
}
@keyframes fmyoucedark {
  0%, 100% {
    box-shadow: 
      inset 0 1px 0 rgba(0, 255, 0, 1), /* 上边内阴影 */
      inset 0 -1px 0 rgba(0, 255, 0, 1), /* 下边内阴影 */
      4px 0 0 rgba(255, 255, 255, 0); /* 右侧外阴影 */
  }
  50% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 0, 255, 1), /* 上边内阴影 */
      inset 0 -1px 0 rgba(255, 0, 255, 1), /* 下边内阴影 */
      4px 0 0 rgba(255, 255, 255, 1); /* 右侧外阴影 */
  }
}