.disabled * {
  pointer-events: none;
  opacity: 0.5;
}



.flex {
  display: flex;
  align-items: center
}

.produce-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 10px;
    width: 100%
}

.produce-item {
    height: 110px;
    background: #fff;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #e9e9e9;
    transition: all .3s;
}

h2,
h3 {
    font-size: 14px;
    font-weight: 700;
    text-indent: 10px;
}

.produce-item-desc {
    margin-top: 15px;
    font-size: 13px;
    color: #666
}

.produce-item:hover {
    border: 1px solid #0052d9;
    transform: scale(1.04);
    display: block;
}

.produce {
  width: 100%;
  height: 100%;
}

.produce-top {
  width: 100%;
  background: #f9fafe;
  box-sizing: border-box;
  box-shadow: 0 2px 6px #0000001a
}

.produce-min-top {
  padding-left: 20px;
  background: #f9fafe;
}

.produce-bottom {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

.produce-left {
  display: none;
}

.produce-right {
  height: 100%;
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
}


.l-menu {
  padding: 0 10px;
  position: relative;
  flex: 1
}

.l-menu-item {
  height: auto;
  cursor: pointer;
}

.l-menu-item p {
  margin: 10px 10px;
  font-size: 14px;
}

.t-menu {
  list-style-type: none;
  padding: 0;
  margin: 0 0 0 10px;
  cursor: pointer;
}

.t-menu-item {
  display: inline-block;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  padding: 5px 10px;
  margin: 10px 5px;
}

.t-is-active {
  color: #0052d9;
  background-color: #f2f3ff;
}

.l-menu-item:hover:not(.t-is-active),
.t-menu-item:hover:not(.t-is-active) {
  background: #eee
}

.container {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
  width: 100%;
}

.left-div, .right-div {
  width: 100%; /* 在小屏幕下占满整个容器宽度 */
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
}

.left-div {
  border-bottom: 1px solid #c7c7c7; /* 在小屏幕下改为底部分割线 */
  border-top: 1px solid #c7c7c7; /* 在小屏幕下改为底部分割线 */
}

form {
  display: flex;
  flex-direction: column;
}
label {
  margin-top: 10px;
  font-size: 14px;
}
input, textarea {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}
.child_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-top: 5px;
}
select {
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  -webkit-appearance: none; /* 移除iOS下的默认样式 */
  -moz-appearance: none; /* 移除Firefox下的默认样式 */
  appearance: none; /* 移除默认样式 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23007BFF" d="M5.5 7.5L10 12l4.5-4.5L16 9l-6 6-6-6z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;  
}
.child-group {
  display: flex; /* 设置为Flex布局 */
  align-items: center; /* 垂直居中对齐 */
  font-size: 14px;
}
.c_g_100 {
  width: 100%;
}
.c_g_95 {
  width: 95%;
}
.c_g_90 {
  width: 90%;
}
.c_g_85 {
  width: 85%;
}
.c_g_80 {
  width: 80%;
}
.c_g_75 {
  width: 75%;
}
.c_g_70 {
  width: 70%;
}
.c_g_65 {
  width: 65%;
}
.c_g_60 {
  width: 60%;
}
.c_g_55 {
  width: 55%;
}
.c_g_50 {
  width: 50%;
}
.c_g_45 {
  width: 45%;
}
.c_g_40 {
  width: 40%;
}
.c_g_35 {
  width: 35%;
}
.c_g_30 {
  width: 30%;
}
.c_g_25 {
  width: 25%;
}
.c_g_20 {
  width: 20%;
}
.c_g_15 {
  width: 15%;
}
.c_g_10 {
  width: 10%;
}
.display_yes {
  display: block;
}
.display_no {
  display: none !important;
}
.color_div {
  width: 15px;
  height: 15px;
  margin-left: 5px; /* 在复选框和颜色方块之间设置间距 */
}
input[type="range"] {
  width: 95%;
}
input[type="submit"] {
  background-color: #2e6da4;
  color: white;
  border: none;
  margin-top: 20px;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #065294;
}
.upload_img {
  border: 1px solid #ccc;
  cursor: pointer;
  width: 80%;
  min-height: 200px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.user-uploaded-image {
  max-width: 512px;
  width: auto;
  height: 200px;
}
/* .result_image_img {
  max-width: 768px;
  border-radius: 5px;
  width: 100%;
  height: auto;
}
.result_image {
  cursor: pointer;
  margin: 0 auto;
  padding: 10px;
  overflow: hidden;
  text-align: center;
  font-size: small;
  color: #888;
} */



.required::after {
  content: "*";
  color: red;
}
.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，如果需要的话 */
  margin: 0 auto;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  background: #f0f2f8;
  box-sizing: border-box
}

.note {
  float: right;
  font-size: 10px;
  margin: 10px 10px;
  color: lightslategrey;
}

#creating {
  display: none;
  text-align: center;
  align-items: center;
  margin: 0 auto; 
}

/* 当屏幕宽度大于某个值时，左右分布 */
@media (min-width: 768px) {
  .left-div, .right-div {
    width: 50%; /* 在大屏幕下各占一半宽度 */
    border-top: 1px solid #c7c7c7;
    border-radius: 10px;
  }

  .left-div {
    border-right: 1px solid #c7c7c7; /* 在大屏幕下右侧分割线 */
    border-bottom: none; /* 取消小屏幕下的底部分割线 */
  }

  .produce-left {
    display: block;
    height: 100%;
    width: 240px;
    background: #f9fafe;
    box-sizing: border-box;
    box-shadow: 0 2px 6px #0000001a
  }

  .produce-min-top {
    display: none;
  }

  h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid #c7c7c7;
  }

  .content {
    height: calc(100vh - 51px);
  }
}

/* 简单的弹窗样式 */
.modal {
  display: none; /* 默认隐藏弹窗 */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 进度条样式 */
.progress-bar {
  width: 0%;
  height: 25px;
  background-color: #547ea3;
  border-radius: 5px; /* 圆角 */
  text-align: center;
  line-height: 25px;
  color: white;
}
#noticeText {
  font-size: small;
  color:#aaa;
}


#progress {
  font-size:smaller;
  color: cadetblue;
  margin-top: 10px;
  text-align: center;
}


  /* 相册样式 */
#gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* overflow: hidden; */
    position: relative;
}
.arrow {
  cursor: pointer;
  user-select: none;
  position: absolute;
  top: 80%;
  transform: translateY(-50%);
  width: 10px;
  height: 25px;
  background-color:rgb(183, 200, 211);
  border: 1px solid #aaa; /* 箭头边框 */
  border-radius: 10px; /* 圆角边框 */ 
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 阴影效果 */
}
#left-arrow {
  left: 10px;
}

#right-arrow {
  right: 10px;
}
#small-images {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    scroll-behavior: smooth;
    max-width: 650px;
}
#small-images .img-container img {
    width: 88px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.5s;
}
#large-image {
    /* display: none; */
    margin-bottom: 20px;
}
#large-image img {
    width: 430px; /* 保持宽度为380px */
    border-radius: 5px;
    cursor: pointer;
}
/* 放大图片样式 */
#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  max-width: 100vw;
  max-height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#overlay img {
  max-width: 100%; /* 使图片最大宽度不超过容器宽度 */
  max-height: 100%; /* 使图片最大高度不超过容器高度 */
  object-fit: contain; /* 保持图片的宽高比 */
}
#close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  font-size: 24px;
  color: #fff;
}