/* kontron.css - 仅用于模拟光纤直放站页面（analog_repeater.html）的单一布局调整，不影响其他页面 */

/* 定义网页主背景色 */
body {
    background-color: #014f82 !important;
    color: white !important; /* 全局文字颜色设为白色 */
  }
  
  /* 1. 核心单一布局容器：给中间内容父容器添加此类，统一取消左右分栏 */
  .kontron-single-layout {
    overflow: hidden; /* 清除浮动残留 */
    width: 100% !important;
    max-width: 14rem; /* 保持与原有页面一致的最大宽度，避免内容过宽 */
    margin: 0 auto !important; /* 居中显示 */
    background-color: #014f82 !important; /* 内容区域背景与主背景一致 */
    padding: 20px !important; /* 内容区域添加内边距 */
    color: white !important; /* 内容区域文字颜色设为白色 */
  }
  
  /* 2. 取消所有左右分栏元素的浮动与宽度限制，强制纵向排列 */
  .kontron-single-layout .leftDiv,
  .kontron-single-layout .rightDiv,
  .kontron-single-layout .leftDiv2,
  .kontron-single-layout .rightDiv2,
  .kontron-single-layout .text,
  .kontron-single-layout .imgDiv,
  .kontron-single-layout .col-lg-6, /* 针对Bootstrap栅格的左右列 */
  .kontron-single-layout .col-md-6,
  .kontron-single-layout .part3-left,
  .kontron-single-layout .part3-right,
  .kontron-single-layout .making .part2 .leftDiv,
  .kontron-single-layout .making .part2 .rightImg,
  .kontron-single-layout .making .part3 .leftImg,
  .kontron-single-layout .making .part3 .rightDiv,
  .kontron-single-layout .culturetow1 li:first-child .text,
  .kontron-single-layout .culturetow1 li:first-child .imgDiv,
  .kontron-single-layout .culturetow1 li:last-child .text,
  .kontron-single-layout .culturetow1 li:last-child .imgDiv,
  .kontron-single-layout .led3 .text,
  .kontron-single-layout .led3 .imgDiv,
  .kontron-single-layout .led4 .text,
  .kontron-single-layout .led4 .imgDiv {
    float: none !important; /* 覆盖原有浮动，禁止并排 */
    width: 100% !important; /* 强制占满整行 */
    position: static !important; /* 取消绝对/固定定位，回归文档流 */
    margin-left: 0 !important;
    margin-right: 0 !important; /* 清除原有左右边距 */
    padding-left: 0 !important;
    padding-right: 0 !important; /* 清除原有左右内边距 */
    color: white !important; /* 确保所有分栏元素文字为白色 */
  }
  
  /* 3. 纵向间距调整：确保元素纵向排列时不拥挤 */
  .kontron-single-layout .leftDiv,
  .kontron-single-layout .rightDiv,
  .kontron-single-layout .leftDiv2,
  .kontron-single-layout .rightDiv2,
  .kontron-single-layout .text,
  .kontron-single-layout .imgDiv,
  .kontron-single-layout .col-lg-6,
  .kontron-single-layout .col-md-6,
  .kontron-single-layout .part3-left,
  .kontron-single-layout .part3-right,
  .kontron-single-layout .making .part2 .leftDiv,
  .kontron-single-layout .making .part2 .rightImg,
  .kontron-single-layout .making .part3 .leftImg,
  .kontron-single-layout .making .part3 .rightDiv {
    margin-bottom: 1.5rem !important; /* 元素之间添加纵向间距（可根据需求微调） */
  }
  
  /* 4. 内容细节优化：保留原有视觉风格，仅调整布局 */
  /* 4.1 图片自适应：避免图片变形 */
  .kontron-single-layout img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important; /* 图片居中显示 */
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* 给图片添加浅色边框，增强在深色背景上的辨识度 */
  }
  
  /* 4.2 文本内容微调：避免贴边 */
  .kontron-single-layout .content,
  .kontron-single-layout .txt,
  .kontron-single-layout .msg,
  .kontron-single-layout .name,
  .kontron-single-layout .wen,
  .kontron-single-layout h1,
  .kontron-single-layout h2,
  .kontron-single-layout h3,
  .kontron-single-layout h4,
  .kontron-single-layout p,
  .kontron-single-layout span {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important; /* 文本左右留边，提升可读性 */
    color: white !important; /* 明确设置所有文本元素为白色 */
  }
  
  /* 4.3 按钮与交互元素：保持原有样式并确保可见性 */
  .kontron-single-layout .btnDiv,
  .kontron-single-layout .button.anmelden {
    margin: 0 auto !important;
    text-align: center !important; /* 按钮居中，符合单一布局视觉 */
    color: white !important; /* 按钮文字颜色 */
    border-color: white !important; /* 按钮边框颜色 */
  }
  
  /* 4.4 表格适配：确保表格在单一布局中正常显示 */
  .kontron-single-layout .specs-table {
    width: 100% !important;
    margin: 0 auto !important;
    border-color: rgba(255, 255, 255, 0.3) !important; /* 表格边框设为浅色 */
  }
  
  .kontron-single-layout .specs-table th,
  .kontron-single-layout .specs-table td {
    color: white !important; /* 表格文字颜色 */
    border-color: rgba(255, 255, 255, 0.3) !important; /* 表格单元格边框 */
  }
  
  /* 5. 链接颜色设置：确保链接在深色背景上可见 */
  .kontron-single-layout a {
    color: #a8d1ff !important; /* 浅蓝色链接，与白色形成区分但保持协调 */
    text-decoration: underline !important;
  }
  
  .kontron-single-layout a:hover {
    color: #ffffff !important; /*  hover时变为白色 */
  }
  
  /* 6. 清除浮动残留：避免父容器高度塌陷 */
  .kontron-single-layout::after,
  .kontron-single-layout .row::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* 7. 响应式兼容：适配手机端（与原有移动端样式衔接） */
  @media (max-width: 768px) {
    .kontron-single-layout {
      padding-left: 0.2rem !important;
      padding-right: 0.2rem !important; /* 移动端左右留边 */
    }
    .kontron-single-layout .margin-bottom {
      margin-bottom: 1rem !important; /* 移动端缩小纵向间距 */
    }
  }
  
  /* 列表样式：小圆点+缩进对齐 */
.gsm-r-list {
    list-style-type: disc; /* 小圆点列表符号 */
    padding-left: 1.5rem; /* 左侧缩进，与标题左对齐 */
    margin: 0.4rem 0; /* 上下间距，避免与其他内容拥挤 */
  }
  .gsm-r-list li {
    margin-bottom: 0.3rem; /* 列表项上下间距，确保可读性 */
    line-height: 1.6; /* 行高，适配中文换行 */
    color: white; /* 文字白色，对应网页背景 #014f82 */
  }
  /* 列表标题样式（如“End-to-end:”） */
  .gsm-r-list-title {
    font-weight: bold; /* 标题加粗 */
    color: white;
    margin: 0; /* 取消默认margin，与列表项对齐 */
  }

  /* 为需要紧凑行距的列表创建专属样式 */
  .gsm-r-list-compact {
    list-style-type: disc; /* 确保显示小圆点 */    
    padding-left: 1.5rem; 
    margin: 0.4rem 0;
}

/* 紧凑列表的li元素 */
.gsm-r-list-compact li {
    margin-bottom: 0.1rem; /* 紧凑行距 */
    line-height: 1.4;
    color: white;
   
}

/* 紧凑列表的标题样式 */
.gsm-r-list-compact .gsm-r-list-title {
    margin: 0; /* 取消默认margin，与列表项对齐 */
    color: white;
    
}
/* FRMCS页面中文内容样式 */
.intro-section {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.1rem 0;
    padding: 0.5rem 0;
    padding-left: 0.5rem;
    
    border-radius: 6px;
}

.fred-container {
    flex: 0 0 350px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
}

.fred-image {
    width: 100%;
    height: auto;
    display: block;
}

.fred-intro {
    flex: 1;
    color: #e6e6e6;
    line-height: 1.8;
    font-size: 0.1rem;
}

.paragraphs h2 {
    color: #ffffff;
   
    margin: 0.3rem 0 0.15rem;
    padding-bottom: 0.1rem;
    
}

.paragraphs h3 {
    color: #cce5ff;
    font-size: 0.25rem;
    margin-bottom: 0.2rem;
}

.paragraphs table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem; 
    color: #ffffff;
    
}
.paragraphs table td {
    vertical-align: top;
    padding: 10px;
}
.paragraphs table td.left {
    text-align: left;
    width: 15%;
}
.paragraphs table td.right {
    text-align: left;
    width: 85%;
}


.history-section, .attributes-section {
    color: #e6e6e6;
    line-height: 1.8;
    margin:  0.2rem;
    margin-bottom: 0.8rem;
}

.history-section p {
  margin: 0;
  padding:0;
  
}



.attributes-section ul {
    
    padding: 0;
     padding-left: 0.6rem;
    color: #e0e0e0;
}

.attributes-section li {
    margin-bottom: 0.04rem;
    color: #e0e0e0;
}

/* 响应式适配 */
@media (max-width: 1400px) {
    .intro-section {
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
    }
    
    .fred-container {
        flex: none;
        width: 80%;
        max-width: 220px;
    }
    
    .fred-intro {
        text-align: center;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
}