/** 所有 button 和使用 Bootstrap 按钮类（.btn）的元素都添加平滑缩放效果 *!*/
button, .btn {
  transition: transform 0.1s ease-in-out;
}

/* 当按钮处于点击状态时缩小 95% */
button:active, .btn:active {
  transform: scale(0.95);
}

.spinner {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.2s linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.textbox {
  -webkit-box-shadow: 0px 0px 10px 0px  rgba(24,173,37,1);
  -moz-box-shadow: 0px 0px 10px 0px  rgba(24,173,37,1);
  box-shadow: 0px 0px 10px 0px  rgba(24,173,37,1);
  background-color: #ffffff;
}

.webox{
 margin: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px; /* Firefox旧版 */
    -webkit-border-radius: 10px; /* Chrome, Safari旧版 */
    border: 1px solid #eeeeee;
    position: relative;
    width: 120px;
    height: 95px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease; /* 添加过渡动画 */
    color: black;
    box-shadow: 0px 0px 10px 2px rgba(193, 245, 207, 1);
}
.webox:hover{
    border: 2px solid #0A0000FF !important;
    box-shadow: 0px 0px 10px 2px rgb(226, 187, 23) !important;
}
.webox::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 48px solid #2ecc71;  /* 绿色三角形高度 */
  border-left: 48px solid transparent;  /* 透明边框形成斜边 */
}


.madevoice{
  width: 40%;
    height: 40px;
  color: #888888;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  cursor: pointer;
  background: linear-gradient(
    to right,       /* 水平方向 */
    #aaf3d7 0%,     /* 起始色（浅青绿，LAB: 90/ -20/ 15） */
    #8dd896 100%    /* 结束色（柔青柠，LAB: 78/ -25/ 40） */
  );
  border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
border: 0px solid #000000;
box-shadow: 0px 0px 0px 0px rgba(0,255,9,1);
}
.madevoice:hover{
    /*border: 1px solid #000000;*/
    box-shadow: 0px 0px 10px 0px rgba(0,255,9,1)
}
.tagbox{
 margin: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
    font-family: "Arial", sans-serif;
  color: #333333;
  text-align: left;
  line-height: normal;
}

.showbox {
    border-radius: 97px;
    -moz-border-radius: 97px; /* Firefox旧版 */
    -webkit-border-radius: 97px; /* Chrome, Safari旧版 */
    border: 3px solid #18ad25;
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease;

}
.rc-slider-track {
    background-color: #18ad25; /* 将滑块颜色改为红色 */
}
.rc-slider-handle {
  border-color: #18ad25; /* 边框颜色 */
  background-color: #18ad25;; /* 背景颜色，如果需要的话 */
}
/*.rc-slider-dot {*/
/*      border-color: #18ad25; !* 边框颜色 *!*/
/*  background-color: #18ad25;; !* 背景颜色，如果需要的话 *!*/
/*}*/
.rc-slider-dot-active{
      border-color: #18ad25; /* 边框颜色 */
  background-color: #18ad25;; /* 背景颜色，如果需要的话 */
}