.parent {
    width: 290px;
    height: 300px;
    perspective: 1000px;
    margin-left:50px;
    margin-bottom:20px;
  }
  
  .card {
    width: 290px;
    height: 300px;
    perspective: 1000px;
    
    border-radius: 50px;
    background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
    transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
    box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
  }
  
  .glass {
    transform-style: preserve-3d;
    position: absolute;
    inset: 8px;
    border-radius: 55px;
    border-top-right-radius: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
    /* -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
    transform: translate3d(0px, 0px, 25px);
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    transition: all 0.5s ease-in-out;
  }
  
  .content {
    padding: 100px 60px 0px 30px;
    transform: translate3d(0, 0, 26px);
  }
  
  .content .title {
    display: block;
    color: #00894d;
    font-weight: 900;
    font-size: 20px;
  }
  
  .content .text {
    display: block;
    color: rgba(0, 137, 78, 0.7647058824);
    font-size: 15px;
    margin-top: 20px;
  }
  
  .bottom {
    padding: 10px 12px;
    transform-style: preserve-3d;
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translate3d(0, 0, 26px);
  }
  
  .bottom .view-more {
    display: flex;
    align-items: center;
    width: 40%;
    justify-content: flex-end;
    transition: all 0.2s ease-in-out;
  }
  
  .bottom .view-more:hover {
    transform: translate3d(0, 0, 10px);
  }
  
  .bottom .view-more .view-more-button {
    background: none;
    border: none;
    color: #000;
    font-weight: bolder;
    font-size: 12px;
  }
  
  .bottom .view-more .svg {
    fill: none;
    stroke: #000;
    stroke-width: 3px;
    max-height: 15px;
  }
  
  .bottom .social-buttons-container {
    display: flex;
    gap: 10px;
    transform-style: preserve-3d;
  }
  
  .bottom .social-buttons-container .social-button {
    width: 30px;
    aspect-ratio: 1;
    padding: 5px;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    border: none;
    display: grid;
    place-content: center;
    box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
  }
  
  .bottom .social-buttons-container .social-button:first-child {
    transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
  }
  
  .bottom .social-buttons-container .social-button:nth-child(2) {
    transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
  }
  
  .bottom .social-buttons-container .social-button:nth-child(3) {
    transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
  }
  
  .bottom .social-buttons-container .social-button .svg {
    width: 15px;
    fill: #00894d;
  }
  /* 
  .bottom .social-buttons-container .social-button:hover {
    background: black;
  }
  */
  .bottom .social-buttons-container .social-button:hover .svg {
    fill: white;
  }
  
  .bottom .social-buttons-container .social-button:active {
    background: rgb(255, 234, 0);
  }
  
  .bottom .social-buttons-container .social-button:active .svg {
    fill: black;
  }
  
  .logo {
    position: absolute;
    right: 0;
    top: 0;
    transform-style: preserve-3d;
  }
  
  .logo .circle {
      width: 90px;  /* 调整为所需的尺寸 */
    height: 90px; /* 与宽度相同保证圆形 */
    display: block;
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    top: 0;
    right: 0;
    box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: rgba(0, 249, 203, 0.2);
    transition: all 0.5s ease-in-out;
  }
  
  .logo .circle1 {
    width: 170px;
    transform: translate3d(0, 0, 20px);
    top: 8px;
    right: 8px;
  }
  
  .logo .circle2 {
    width: 140px;
    transform: translate3d(0, 0, 40px);
    top: 10px;
    right: 10px;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    transition-delay: 0.4s;
  }
  
  .logo .circle3 {
    width: 110px;
    transform: translate3d(0, 0, 60px);
    top: 17px;
    right: 17px;
    transition-delay: 0.8s;
  }
  
  .logo .circle4 {
    width: 90px;
    transform: translate3d(0, 0, 90px);
    top: 23px;
    right: 23px;
    transition-delay: 1.2s;
  }
  
  .logo .circle5 {
    width: 50px;
    transform: translate3d(0, 0, 100px);
    top: 30px;
    right: 30px;
    display: grid;
    place-content: center;
    transition-delay: 1.6s;
  }
  
  .logo .circle5 .svg {
    width: 20px;
    fill: white;
  }
  
  .parent:hover .card {
    transform: rotate3d(1, 1, 0, 30deg);
    box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
  }
  
  .parent:hover .card .bottom .social-buttons-container .social-button {
    transform: translate3d(0, 0, 50px);
    box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
  }
  
  .parent:hover .card .logo .circle2 {
    transform: translate3d(0, 0, 60px);
  }
  
  .parent:hover .card .logo .circle3 {
    transform: translate3d(0, 0, 80px);
  }
  
  .parent:hover .card .logo .circle4 {
    transform: translate3d(0, 0, 100px);
  }
  
  .parent:hover .card .logo .circle5 {
    transform: translate3d(0, 0, 120px);
  }
  .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Space between cards */
    justify-content: center;
    margin-top:50px;
  }


.participants {
    display: flex;
    align-items: center; /* 确保头像在容器中垂直居中 */
    overflow: hidden; /* 避免头像溢出容器 */
}

.participant-avatar {
    width: 50px; /* 设置头像宽度 */
    height: 50px; /* 设置头像高度 */
    border-radius: 50%; /* 圆形裁剪 */
    margin-left: -30px; /* 头像之间的重叠 */
    border: 2px solid white; /* 添加白色边框以分隔重叠的头像 */
    background-color: aliceblue;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1); /* 可选：添加阴影增强视觉效果 */
}

.participants img:first-child {
    margin-left: 0; /* 确保第一个头像没有左边距 */
}


/*minddetails add*/
/* 模态弹窗的背景 */
.modal {
  display: none; 
  position: fixed;
  z-index: 1050;  /* 提高z-index以确保在顶层 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);  /* 使背景半透明 */
}

/* 弹窗内容的样式 */
.modal-content {
  background-color: #ffffff;
  margin: 5% auto;  /* 调整为5%从顶部，居中显示 */
  padding: 20px;
  border: 1px solid #ccc;
  width: 58%;  /* 宽度调整为50% */
  box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* 添加阴影效果 */
  border-radius: 8px; /* 圆角 */
}

/* 关闭按钮的样式 */
.close {
  color: #aaa;
  float: right;
  font-size: 58px;
  font-weight: bold;
  margin-top: -30px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/* 通用表单元素样式 */
.modal-content input[type="text"],
.modal-content input[type="file"],
.modal-content textarea {
  width: 100%; /* 占满容器宽度 */
  padding: 8px 10px;
  margin-top: 8px;
  margin-bottom: 16px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* 边框盒模型 */
}

/* 按钮样式 */
.modal-content button {
  width: 100%;
  /*background-color: #f39800;*/
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-image: linear-gradient(to right, #ffd166 , #ef476f , #06d6a0); /* 渐变背景 */
  color: white; /* 白色文字 */
  font-size: 18px; /* 字体大小 */
  text-transform: uppercase; /* 大写字母 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
}

.modal-content button:hover {
  /*background-color: #45a049;*/
  background-position: 100% 0;
}

.file-name-display {
  margin-left: 10px;
  color: #666;
  font-size: 16px;
}


.addDetailBtn {
  width: 100%;
  /*background-color: #f39800;*/
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-image: linear-gradient(to right, #06d6a0, #ef476f, #ffd166); /* 渐变背景 */
  background-size: 200% 200%;
  color: white; /* 白色文字 */
  font-size: 18px; /* 字体大小 */
  text-transform: uppercase; /* 大写字母 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  transition: all 0.6s ease-out;
}

.minds_functions_button:hover .addDetailBtn {
  background-position: 100% 100%;
}

.minds_description {
  display: flex;
  flex-direction: column;
  width:65vw;
  margin: 30px auto;
  margin-bottom: 20px;
  counter-reset: event-counter;
}
.minds_description pre {
  white-space: pre-wrap;      /* CSS3 的属性，支持自动换行 */
  word-wrap: break-word;      /* 允许长单词在必要时在边界内换行 */
  overflow-wrap: break-word;  /* 当内容溢出容器盒子时换行 */
  overflow: hidden;           /* 隐藏溢出容器的内容 */
  width: 100%;                /* 设置宽度，保证不会超过父容器 */
  margin: 0;                  /* 移除默认的外边距 */
}
.minds_functions_button {
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  width:65vw;
  counter-reset: event-counter;
}


.timeline__event__description pre {
  white-space: pre-wrap;      /* CSS3 的属性，支持自动换行 */
  word-wrap: break-word;      /* 允许长单词在必要时在边界内换行 */
  overflow-wrap: break-word;  /* 当内容溢出容器盒子时换行 */
  overflow: hidden;           /* 隐藏溢出容器的内容 */
  width: 100%;                /* 设置宽度，保证不会超过父容器 */
  margin: 0;                  /* 移除默认的外边距 */
}



.wave {
  position: absolute;
  width: 540px;
  height: 700px;
  opacity: 0.6;
  left: 0;
  top: 0;
  margin-left: -50%;
  margin-top: -70%;
  background: linear-gradient(744deg,#af40ff,#5b42f3 60%,#00ddeb);
}
.wave:nth-child(2),
.wave:nth-child(3) {
  top: 210px;
}
.playing .wave {
  border-radius: 40%;
  animation: wave 3000ms infinite linear;
}

.wave {
  border-radius: 40%;
  animation: wave 55s infinite linear;
}

.playing .wave:nth-child(2) {
  animation-duration: 4000ms;
}

.wave:nth-child(2) {
  animation-duration: 50s;
}

.playing .wave:nth-child(3) {
  animation-duration: 5000ms;
}

.wave:nth-child(3) {
  animation-duration: 45s;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.add_new_icon{
  padding: 10px;
  width: 250px;
  margin-right: 20px;
}

.addNewIcon {
  width: 250px;
  /*background-color: #f39800;*/
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-image: linear-gradient(to right, #06d6a0, #ef476f, #ffd166); /* 渐变背景 */
  background-size: 200% 200%;
  color: white; /* 白色文字 */
  font-size: 18px; /* 字体大小 */
  text-transform: uppercase; /* 大写字母 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  transition: all 0.6s ease-out;
}

.add_new_icon:hover .addNewIcon {
  background-position: 100% 100%;
}

.add_new_mind{
  padding: 10px;
  width: 250px;
  margin-right: 30px;
}

.add_new_mind button {
  width: 250px;
  /*background-color: #f39800;*/
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-image: linear-gradient(to right, #ffd166 , #ef476f , #06d6a0); /* 渐变背景 */
  background-size: 200% 200%;
  color: white; /* 白色文字 */
  font-size: 18px; /* 字体大小 */
  text-transform: uppercase; /* 大写字母 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  transition: all 0.6s ease-out;
}

.dashboard_page_button {
  padding: 10px;
  width: 250px;
  margin-right: 10px;
}

.dashboard_page_button button:hover {
  /*background-color: #45a049;*/
  background-position: 100% 100%;
}

.dashboard_page_button button {
  width: 250px;
  /*background-color: #f39800;*/
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-image: linear-gradient(to right, #ffd166 , #ef476f , #06d6a0); /* 渐变背景 */
  background-size: 200% 200%;
  color: white; /* 白色文字 */
  font-size: 18px; /* 字体大小 */
  text-transform: uppercase; /* 大写字母 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  transition: all 0.6s ease-out;
}

.add_new_mind button:hover {
  /*background-color: #45a049;*/
  background-position: 100% 100%;
}

.p-6.text-gray-900.dark:text-gray-100.flex-grow {
  display: flex;
  align-items: center;
}


/*icon_card start*/
.icon_card .icon_overlay .icon_wave {
  display: none;
}
.icon_card:hover .icon_overlay .icon_wave {
  display: block;
}
.icon_wave {
  position: absolute;
  width: 540px;
  height: 700px;
  opacity: 0.6;
  left: 0;
  top: 0;
  margin-left: -50%;
  margin-top: -70%;
  background: linear-gradient(744deg,#af40ff,#f8b62d 60%,#00ddeb);
}
.icon_wave:nth-child(2),
.icon_wave:nth-child(3) {
  top: 210px;
}
.icon_wave_playing .icon_wave {
  border-radius: 40%;
  animation: icon_wave 5000ms infinite linear;
}

.icon_wave {
  border-radius: 40%;
  animation: icon_wave 55s infinite linear;
}

.icon_wave_playing .icon_wave:nth-child(2) {
  animation-duration: 4000ms;
}

.icon_wave:nth-child(2) {
  animation-duration: 50s;
}

.icon_wave_playing .icon_wave:nth-child(3) {
  animation-duration: 5000ms;
}

.icon_wave:nth-child(3) {
  animation-duration: 45s;
}

@keyframes icon_wave {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.status-public {
  color: green;
  font-weight: bold;
}

.status-private {
  color: red;
  font-weight: bold;
}

.icon-list-container {
  display: flex;
  flex-wrap: wrap;
}
.clearfix {
  clear: both;
}
    .credentialing {
        --bg-color: #B8F9D3; /*#B8F9D3;920783*/
        --bg-color-light: #e2fced; /*#e2fced;*/
        --text-color-hover: #4C5656;
        --box-shadow-color: rgba(184, 249, 211, 0.48);
    }

    .icon_card {
        width: 210px;
        height: 321px; /* Adjust height if necessary */
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Change from center to flex-start */
        align-items: center;
        position: relative;
        box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease-out;
        text-decoration: none;
        padding-top: 10px; /* Added padding at the top for better spacing */
    }

    .icon_card:hover {
        transform: translateY(-5px) scale(1.005) translateZ(0);
        box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 0 24px 46px var(--box-shadow-color);
    }

    .icon_card:hover .icon_overlay {
        transform: scale(1.5) translateZ(0);
    }

    .icon_card:hover .icon_circle {
        border-color: var(--bg-color-light);
        background: var(--bg-color);
    }

    .icon_card:hover .icon_circle:after {
        background: var(--bg-color-light);
    }

    .icon_card:hover p {
        color: var(--text-color-hover);
    }

    .icon_card:active {
        transform: scale(1) translateZ(0);
        box-shadow: 0 15px 24px rgba(0, 0, 0, 0.11), 0 15px 24px var(--box-shadow-color);
    }

    .icon_card p {
        width: 90%;
        font-size: 17px;
        color: #4C5656;
        background: #F7F8F8;
        /*margin-top: 5px;  Reduced margin */
        border-radius: 5px;
        padding: 10px;
        transition: color 0.3s ease-out;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .auth_application_icon_card {
      width: 150px;
      height: 150px;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center; /* 使子元素垂直居中 */
      align-items: center; /* 使子元素水平居中 */
      position: relative;
      box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease-out;
      text-decoration: none;
      border: 1px solid rgba(0, 0, 0, 0.1);
      margin-left:8px;margin-right:8px;margin-bottom:22px;
  }

  .auth_application_icon_card:hover {
      transform: translateY(-5px) scale(1.005) translateZ(0);
      /*box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 0 24px 46px var(--box-shadow-color);*/
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2), 0 24px 48px rgba(255, 215, 0, 0.3);
  }

  .auth_application_icon_card:hover p {
    color: var(--text-color-hover);
  }

  .auth_application_icon_card:active {
      transform: scale(1) translateZ(0);
      /*box-shadow: 0 15px 24px rgba(0, 0, 0, 0.11), 0 15px 24px var(--box-shadow-color);*/
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 15px 30px rgba(255, 215, 0, 0.2);
  }

  .auth_application_icons {
      margin-top: 10px; /* 确保有足够的间隙 */
      margin-bottom: 10px; /* 图标和文字之间保持间距 */
      width: 100px; /* 设置宽度以确保图标大小一致 */
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .auth_application_icons img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain; /* 保持图标的比例而不变形 */
      border-radius: 25px;
  }

    .icon_circle {
        width: 131px;
        height: 131px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid var(--bg-color);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease-out;
    }

    .icon_circle:after {
        content: "";
        width: 118px;
        height: 118px;
        display: block;
        position: absolute;
        background: var(--bg-color);
        border-radius: 50%;
        transition: opacity 0.3s ease-out;
    }

    .icon_circle img {
        z-index: 10000;
        transform: translateZ(0);
    }

    .icon_overlay {
        width: 118px;
        position: absolute;
        height: 118px;
        border-radius: 50%;
        background: var(--bg-color);
        top: 20px; /* Moved upwards */
        left: 50px;
        z-index: 0;
        transition: transform 0.3s ease-out;
    }
    
    .icon_description {
        /*display: none;
        position: absolute;*/
        margin-top:5px;
        margin-bottom:5px;
        background: #EFEFEF;
        border-radius: 5px;
        width: 90%;
        bottom: 10px;
        line-height: 1.2em;
        overflow: hidden;
        padding: 10px;
    }

    .auth_application_icons {
      margin-top:5px;
      margin-bottom:5px;
      border-radius: 5px;
      width: 100%;
      bottom: 10px;
      line-height: 1.2em;
      overflow: hidden;
      padding: 10px;
  }

    .sequence-number {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px; /* 固定宽度 */
        height: 100%; /* 高度占满父容器 */
        background-color: #f0f0f0; /* 浅灰色背景 */
        color: rgb(201, 201, 201); /* 字体颜色 */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
        overflow: hidden;
        font-weight: bold;
    }

    .sequence-number-right {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px; /* 固定宽度 */
        height: 100%; /* 高度占满父容器 */
        background-color: #4CAF50; /* 浅灰色背景 */
        color: #fff; /* 字体颜色 */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        overflow: hidden;
        font-weight: bold;
    }

/* 删除按钮的初始状态为隐藏 */
.log-delete {
  margin-left: auto; /* 确保按钮在最右侧 */
  display: none;
}

/* 列表项悬停时显示删除按钮 */
.log-item:hover .log-delete {
  display: block;
}

/* 列表项本身的样式 */
.list-group-item {
  display: flex; /* 使用 Flex 布局确保按钮位于右侧 */
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}

/* 鼠标悬停在列表项上时的背景色变化 */
.list-group-item:hover {
  background-color: #eef4ff;
}

.list-group-items {
  position: relative;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}

/* 鼠标悬停在列表项上时的背景色变化 */
.list-group-items:hover {
  background-color: #eef4ff;
}

/* 删除按钮的样式 */
.log-delete button {
  padding: 8px 12px;
  border: none;
  background-color: #ff4d4f;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.log-delete button:hover {
  background-color: #e33b3e;
}

.qanda-page-container {
  display: flex;
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  height: 95px;  /* 让容器高度占满整个视窗 */
  width: 100%;
}

.qanda-page-content {
  padding: 30px;  /* 为内容增加内边距 */
  border-radius: 10px;  /* 给卡片添加圆角 */
  /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);   给卡片添加轻微的阴影 */
  width: 100%;
  text-align: center;  /* 确保文本居中 */
}

.qanda-page-content button {
  width: 250px;
  /*background-color: #f39800;*/
  padding: 10px 15px;
  margin: 8px 0;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  background-image: linear-gradient(to right, #ffd166 , #ef476f , #06d6a0); /* 渐变背景 */
  background-size: 200% 200%;
  color: white; /* 白色文字 */
  font-size: 18px; /* 字体大小 */
  text-transform: uppercase; /* 大写字母 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  transition: all 0.6s ease-out;
}

.qanda-page-content button:hover {
  /*background-color: #45a049;*/
  background-position: 100% 100%;
}



    .icon_buttons {
        display: none;
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 10px;
    }

    .icon_buttons {
        padding-top: 5px;
    }

    .icon_card:hover .icon_description, .icon_card:hover .icon_buttons {
        display: block;
    }

    .icon_buttons button {
        margin-top: 5px;
        background-color: var(--bg-color-light);
        border: none;
        padding: 8px 16px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .icon_buttons button:hover {
        background-color: #00ff9d;
    }
/*icon_card end*/
.header-container {
  display: flex;         /* 启用 flex 布局 */
  justify-content: space-between;  /* 空间均匀分布，第一个元素靠左，最后一个靠右 */
  align-items: center;   /* 垂直居中对齐 */
  margin-bottom: 20px;         /* 增加一些内边距，视觉效果更佳 */
}

#search-container {
  display: flex;         /* 使搜索框和按钮也使用 flex 布局 */
  align-items: center;   /* 垂直居中对齐 */
  margin-right:25px;
}

#search-input {
  padding: 10px 15px; /* 增加内边距，使输入框更易于点击和查看 */
  /*border: 2px solid #ccc;  设置边框颜色 */
  border-radius: 25px; /* 圆角边框 */
  outline: none; /* 去掉聚焦时的默认轮廓线 */
  width: 250px; /* 设置宽度 */
  transition: all 0.3s ease-in-out; /* 平滑过渡效果 */
  margin-right:5px;
}

#search-input:focus {
  border-color: #f39800; /* 聚焦时边框颜色变化 */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* 聚焦时添加轻微的外阴影 */
}

#search-input-big {
  padding: 10px 15px; /* 增加内边距，使输入框更易于点击和查看 */
  /*border: 2px solid #ccc;  设置边框颜色 */
  border-radius: 25px; /* 圆角边框 */
  outline: none; /* 去掉聚焦时的默认轮廓线 */
  width: 550px; /* 设置宽度 */
  transition: all 0.3s ease-in-out; /* 平滑过渡效果 */
  margin-right:5px;
}

#search-input-big:focus {
  border-color: #ffb028; /* 聚焦时边框颜色变化 */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* 聚焦时添加轻微的外阴影 */
}
.icon_search_button {
  padding: 10px 20px; /* 按钮内边距 */
  border-radius: 25px; /* 圆角 */
  border: none; /* 无边框 */
  background-color: #fff; /* 背景颜色 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  outline: none; /* 去掉聚焦时的默认轮廓线 */
  transition: background-color 0.3s ease-in-out; /* 背景颜色变化的平滑过渡 */
}

.icon_search_button:hover {
  background-color: #d1d1d1; /* 鼠标悬停时的背景颜色 */
}

#qanda-search-input {
  padding: 10px 15px; /* 增加内边距，使输入框更易于点击和查看 */
  /*border: 2px solid #ccc;  设置边框颜色 */
  border-radius: 25px; /* 圆角边框 */
  outline: none; /* 去掉聚焦时的默认轮廓线 */
  width: 250px; /* 设置宽度 */
  transition: all 0.3s ease-in-out; /* 平滑过渡效果 */
  margin-right:5px;
}

#qanda-search-input:focus {
  border-color: #f39800; /* 聚焦时边框颜色变化 */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* 聚焦时添加轻微的外阴影 */
}

#qanda-search-input-big {
  padding: 10px 15px; /* 增加内边距，使输入框更易于点击和查看 */
  /*border: 2px solid #ccc;  设置边框颜色 */
  border-radius: 25px; /* 圆角边框 */
  outline: none; /* 去掉聚焦时的默认轮廓线 */
  width: 550px; /* 设置宽度 */
  transition: all 0.3s ease-in-out; /* 平滑过渡效果 */
  margin-right:5px;
}

#qanda-search-input-big:focus {
  border-color: #ffb028; /* 聚焦时边框颜色变化 */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* 聚焦时添加轻微的外阴影 */
}
.qanda_search_button {
  padding: 10px 20px; /* 按钮内边距 */
  border-radius: 25px; /* 圆角 */
  border: none; /* 无边框 */
  background-color: #fff; /* 背景颜色 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  outline: none; /* 去掉聚焦时的默认轮廓线 */
  transition: background-color 0.3s ease-in-out; /* 背景颜色变化的平滑过渡 */
}

.qanda_search_button:hover {
  background-color: #d1d1d1; /* 鼠标悬停时的背景颜色 */
}

fieldset {
  width:300px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}

fieldset legend {
  font-weight: bold;
  padding: 0 10px;
}

fieldset label {
  margin-right: 20px;
  cursor: pointer;
}

fieldset input[type="radio"] {
  margin-right: 5px;
}

.status-indicator {
  position: absolute; /* 使用绝对定位 */
  top: 0px; /* 从卡片顶部向下10px */
  right: 0px; /* 从卡片右侧向左10px */
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 12px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.status-indicator-left {
  position: absolute; /* 使用绝对定位 */
  top: 0px; /* 从卡片顶部向下10px */
  left: 0px; /* 从卡片右侧向左10px */
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 12px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.status-public {
  background-color: #4CAF50; /* 绿色, 表示公开 */
}

.status-private {
  background-color: #ff9900; /* 红色, 表示私有 */
}

/*drawing start*/
canvas {
  /*border: 1px solid #333;*/
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-bottom: 10px;
}

.canvas-container {
  width: 100%;
  max-width: 100%;
  height: 500px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  position: relative;
  background-color: #fff;
  border-radius: 5px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.controls button,
.controls input[type="color"],
.controls select {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s, border-color 0.3s;
}

.controls input[type="range"] {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s, border-color 0.3s;
}

.controls button:hover,
.controls input[type="color"]:hover,
.controls select:hover,
.controls input[type="range"]:hover {
  background-color: #f9f9f9;
  border-color: #aaa;
}

.controls input[type="range"] {
  width: 150px;
}

.controls label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.controls span {
  font-size: 14px;
}

#colorPicker {
  padding: 3px;
  height: 46px;
}

.controls select {
  padding-right: 40px;
}

.color-option {
  position: relative;
  padding-left: 25px; /* 为颜色条留出更多空间 */
}

.color-option::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px; /* 调整颜色条的位置 */
  transform: translateY(-50%);
  width: 15px; /* 调整颜色条的宽度 */
  height: 15px; /* 调整颜色条的高度 */
  background-color: var(--color);
  border: 1px solid #ccc; /* 添加边框以区分颜色 */
  border-radius: 3px; /* 圆角效果 */
  display: inline-block;
}


.color-option:hover {
  background-color: unset !important;
}

.dropdown {
  position: relative;
  display: inline-block;
  min-width: 180px;
}
.dropdown button {
  min-width: 180px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content button {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
}
.dropdown-content button:hover {
  background-color: #acacac;
}

.dropdown:hover .dropdown-content {
  display: block;
}
#mindList li.selected {
  background-color: #ddd;
}
/*drawing end*/