/* 大调整

控制区域覆盖到渲染场景上 */


body {
	font: 62.5% "Trebuchet MS", sans-serif;
    color: #ffffff;
    background-color: #EFEFEF;
    /* width: 2700px; */
    width: 99vw;
    position: relative; /* 确保页面内容根据窗口大小动态调整，尽量不用position: fixed; */
    margin: 0 auto; /* 这里是关键，将左右外边距设置为auto使body元素居中 */

}

h1{
    font-size: 30px;
    text-align: center; /* 将文本居中 */
    color: #668ABB;
    margin-top: 10px;
    margin-bottom: 10px;
 }

h2{
    font-size: 20px;
    margin: 0;
    color: #f8ac38;
 }

h3{
    font-size: 18px;
    color: #4A4A4A;
    margin-top: 10px;
    margin-bottom: 5px;
}

h4{
    font-size: 16px;
    color: #4A4A4A;
    margin-top: 10px;
    margin-bottom: 10px;
}


div{
    font-size: 14px;
    color: #4A4A4A;
}

p{
    margin-top: 5px;
    color: #4A4A4A;
}



/* 交互变形区域 */
.UI {
	width: auto;
	height: auto;
	overflow:hidden;
}


.platform_title {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 45%; /* 设置为interactive_deform的1/4 */
    heigh： 30px;
    background: #FCFCFC;
    border-radius: 15px; /* 圆角半径 */

    border: 3px solid #808080;
    box-sizing: border-box; /* 确保内边距和边框不会增加元素的宽度 */
    z-index: 2; /* 确保控制区域位于interactive_deform上方 */
    display: flex;
    align-items: center;  /*垂直居中 */
    justify-content: center; /* 水平居中 */
}


.platform_title h1, .platform_title a.switch-language {
    display: inline-block;
    /*vertical-align: middle;  垂直居中对齐 */
    margin-left: 10px;
    margin-right: 10px;  /*可以根据需要调整距离 */
}


.platform_title a.switch-language {
    color: #4A4A4A; /* 默认颜色 */
    font-size: 16px;
    margin-bottom: -10px;
    font-weight: bold;
}

.platform_title a.switch-language:hover {
    color: #668ABB; /* 悬停时颜色 */
}
.platform_title a.switch-language:active {
    color: #668ABB; /* 点击时颜色 */
}


.icon_title {
    margin-right: 5px; /* 调整标志与标题之间的间距 */
    margin-left: 5px; /* 调整标志与标题之间的间距 */
    margin-bottom: -15px;
    width: 50px; /* 设置图标的宽度 */
    height: 50px; /* 设置图标的高度 */
}

.icon {
    margin-right: 5px; /* 调整标志与标题之间的间距 */
    margin-left: 5px; /* 调整标志与标题之间的间距 */
    margin-bottom: -5px;
    width: 20px; /* 设置图标的宽度 */
    height: 20px; /* 设置图标的高度 */
}

.interactive {
    display: block;
}

.interactive h2 {
    line-height: 40px; /* 设置行高等于容器高度，实现上下居中 */
    margin-left: 10px;
}


.control_area {
    position: relative;
}


.model_settings_left {
    position: absolute;
    /*top: 80px;*/
    left: 0px;
    width: 246px; /* 13%设置为interactive_deform的1/4 */
    background: #FCFCFC;
    border-radius: 0px; /* 圆角半径 */

    /*height: 790px;*/
    height: 87vh;

    padding: 8px;
    /*border: 3px solid #808080;*/
    box-sizing: border-box; /* 确保内边距和边框不会增加元素的宽度 */
    z-index: 2; /* 确保控制区域位于interactive_deform上方 */
}


.model_settings_right {
    position: absolute;
    /*top: 80px;
    height: 800px;*/
    right: -0px;
    width: 284px; /*15% 设置为interactive_deform的1/4 */
    background: #FCFCFC;
    border-radius: 0px; /* 圆角半径 */

    height: 87vh;

    padding: 8px;
    /*border: 3px solid #808080;*/
    box-sizing: border-box; /* 确保内边距和边框不会增加元素的宽度 */
    z-index: 2; /* 确保控制区域位于interactive_deform上方 */
}




/* ************************************选择母型船 */
.select_model p {
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
    color: #4A4A4A;
}

.uploadFile {
    margin-right: 10px;
}

.calculateFile {
    margin-right: 10px;
}

.hull_file {
    font-size: 16px;
    height: 30px;
	width: 170px;
    border: #DAE8FC;
    color: #4A4A4A;
    padding: 2px;
    margin-top: 20px;
    background-color: #DAE8FC;
    font-weight: bold;

}

.hull_file:hover {
    color: #fff;
    background-color: #668ABB !important;
}


.successMessage {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #eacdd1 !important;
    color: #4A4A4A !important;
    font-size: 18px;
    padding: 15px;
    border-radius: 8px;
    z-index: 1000;
}

.loadingMessage {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #eacdd1 !important;
    color: #4A4A4A !important;
    font-size: 18px;
    padding: 15px;
    border-radius: 8px;
    z-index: 1000;
}


.fileName {
    font-family: Arial, sans-serif;
    text-align: center;
    font-size: 14px;
    width: 170px;
    color: #4A4A4A;
    border: #FCFCFC;
    font-weight: bold;
    height: 20px;
    margin-top: 5px;
    margin-left: 35px;
    background: #FCFCFC;
}


.draft_fill{
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    margin-left: 35px;
}

.Draft {
    font-size: 16px;
	width: 80px;
    color: #4A4A4A;
    padding: 2px;
    border: 4px solid #DAE8FC;
    background-color: #DAE8FC;
    margin-left: 5px;
    font-weight: bold;
}


.calculate_button {
    font-size: 16px;
    height: 30px;
	width: 170px;
    border: #DAE8FC;
    color: #4A4A4A;
    background-color: #DAE8FC;
    font-weight: bold;
    margin-top: 5px;
}

.calculate_button:hover {
    color: #fff;
    background-color: #668ABB !important;
}


.character_set{
    margin-left: 10px;
}

.character_set p {
    display: inline-block;
    font-size: 16px;
    color: #4A4A4A;
}

.character_set input{
    font-size: 14px;
    width: 50px;
    height: 20px;
}

/*.calculate_button::after {*/
    /*content: "";*/
    /*display: block;*/
    /*width: 140%;  使线条宽度更长，超出容器宽度 */
    /*height: 2px;*/
    /*background-color: #668ABB;*/
    /*margin-top: 15px;*/
    /*position: relative;*/
    /*left: -25%;  使线条居中于其容器 */
/*}*/


/* ************************************选择变形船 */
.uploaddeformFile {
    margin-right: 10px;
}

.deform_hull_file {
    font-size: 16px;
    height: 30px;
	width: 170px;
    border: #DAE8FC;
    color: #4A4A4A;
    padding: 2px;
    margin-top: 20px;
    background-color: #DAE8FC;
    font-weight: bold;
}

.deform_hull_file:hover {
    color: #fff;
    background-color: #668ABB !important;
}

.deformfileName {
    font-family: Arial, sans-serif;
    text-align: center;
    font-size: 14px;
    width: 170px;
    color: #4A4A4A;
    border: #D1BFA5;
    font-weight: bold;
    height: 20px;
    margin-top: 10px;
    margin-left: 35px;
    background: #FCFCFC;
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
    white-space: nowrap; /* 防止换行 */
}

.upload-section {
    flex: 40%;
}

.export-section {
    flex: 60%;
}

.visualize_button {
    font-size: 16px;
    height: 30px;
	width: 170px;
    color: #4A4A4A;
    border: #DAE8FC;
    background-color: #DAE8FC;
    font-weight: bold;
    margin-top: 10px;
}

.visualize_button:hover {
    color: #fff;
    background-color: #668ABB !important;
}



/* ************************************报告导出、视角恢复 */
.report {
    margin-top: 10px;
    font-weight: bold;
}

.export_report {
    font-size: 16px;
    height: 30px;
    width: 170px;
    color: #4A4A4A;
    border: #DAE8FC;
    background-color: #DAE8FC;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px
}

.export_report:hover {
    color: #fff;
    background-color: #668ABB !important;
}



/* ************************************线性变形 */
.liner_deformation {
    margin-top: 5px;
}

.controls {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 10px;
}
.control_row {
    display: flex;
    margin-bottom: 4px;
    margin-left: 20px;
    font-weight: bold;
}

.control_row input {
    font-size: 15px;
	width: 40px;
    color: #4A4A4A;
    padding: 2px;
    background-color: #DAE8FC;
    border: 2px solid #DAE8FC;
    margin-left: 7px;
    font-weight: bold;
}

/* 使用 Flexbox 实现 h3 和 button 在同一行 */
.header-button-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.applyTransformation {
    font-size: 16px;
    height: 30px;
	width: 180px;
    color: #4A4A4A;
    border: #DAE8FC;
    background-color: #DAE8FC;
    font-weight: bold;
    margin-top: -5px;
    margin-left: 34px;
}

.applyTransformation:hover {
    color: #fff;
    background-color: #668ABB !important;
}




/* ************************************交互FFD变形 */
.lattice_set, .lattice_control{
    margin-left: 10px;
}

.type input[type="radio"] + label {
    font-size: 16px;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    color: #4A4A4A;
}

.type input[type="radio"]:checked + label {
    color: #B84E4A;
}

.type input[type="radio"]{
    width: 10px;
    height: 10px;
    margin-left: 7px;
}

.type input[type="radio"]:checked {
    background-color: #B84E4A; /* 选中时的背景颜色 */
    border-color: #B84E4A; /* 选中时的边框颜色 */
}

.cp_setting {
    display: flex;
    align-items: center; /* 垂直居中 */
}

.cp_setting h4 {
    margin-right: 10px; /* 可根据需要调整间距 */
}

.amount{
    font-size: 16px;
    height: 20px;
    width: 60px;
    color: #4A4A4A;
    font-weight: bold;
    background-color: #DAE8FC;
    border: 2px solid #DAE8FC;
    margin-left: 20px;
    margin-top: 5px;
}

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

/* 滑块尺寸 */
.cpSlider{
    margin-left: 5px;
    width: 100px;
    margin-right: 20px;
}

/* 改变滑块手柄的颜色 */
.ui-slider-handle {
    background-color: #668ABB; /* 设置手柄的背景色 */
    border-color: #668ABB; /* 设置手柄的边框色 */
    width: 20px; /* 可选，设置手柄的宽度 */
    height: 20px; /* 可选，设置手柄的高度 */
    border-radius: 50%; /* 可选，设置手柄为圆形 */
    color: #fff;
}

/* 改变滑块手柄悬停时的颜色 */
.ui-slider-handle:hover {
    background-color: #668ABB; /* 设置手柄悬停时的背景色 */
    border-color: #668ABB; /* 设置手柄悬停时的边框色 */
}

/* 可选：修改滑块轨道的颜色 */
.ui-slider-horizontal {
    background-color: #DAE8FC; /* 设置滑块轨道背景色 */
}


.save_download {
    display: inline-block;
    margin-left: 10px;
}

.download_model {
    font-size: 16px;
    height: 30px;
	width: 170px;
    color: #4A4A4A;
    border: #DAE8FC;
    background-color: #DAE8FC;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 10px;
}

.download_model:hover {
    color: #fff;
    background-color: #668ABB !important;
}




/* ************************************组合变形 */
.combined_deformation_button .deform_button {
	width: 200px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.deform_download_container .deform_download {
	width: 200px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.deform_button {
    font-size: 16px;
    height: 30px;
    color: #4A4A4A;
    border: #DAE8FC;
    margin-left:2px;
    background-color: #DAE8FC;
    font-weight: bold;
}

.deform_button:hover {
    color: #fff;
    background-color: #668ABB !important;
}


.LCBCP_input_container {
    display: flex;
    flex-direction: column; /* 使容器中的元素纵向排列 */
    margin-left: 10px;
}



.delta_LCB_t1, .delta_LCB_t2 {
    display: flex;
    align-items: center;
}
.delta_LCB_t1 {
    margin-right: 5px;
}
.delta_CP {
    margin-left: 6px;
}

.CP_Maximum_error {
    margin-left: 7px;
}


.LCB_parent, .LCB_target, .LCB_deform, .LCB_error {
    margin-right: 5px;
    margin-top: -7px;
}

.CP_parent, .CP_target, .CP_deform, .CP_error {
    margin-left: 35px;
    margin-top: -7px;
}

.delta_LCB, .delta_CP, .LCB_Maximum_error, .CP_Maximum_error {
    background-color: #DAE8FC;
    border: 2px solid #DAE8FC;
    color: #4A4A4A;
    font-size: 16px;
    height: 30px;
    line-height: 30px; /* 设置行高等于容器高度，实现上下居中 */
}

.LCB_CP_title_container, .LCB_parent_container, .LCB_target_container, .LCB_deform_container, .LCB_error_container {
    display: flex;
    align-items: center;
}

.LCB_CP_title_container {
    margin-bottom: -10px;
}

.LCB_title {
    margin-left: 85px;
}

.CP_title {
    margin-left: 70px;
}

.LCB_parent_t1 {
    margin-right: 10px;
}

.LCB_parent, .CP_parent, .LCB_target, .CP_target, .LCB_deform, .CP_deform, .LCB_error, .CP_error {
    background-color: #FCFCFC;
    color: #4A4A4A;
    font-size: 16px;
    height: 25px;
    width: 54px;
    border-bottom: 2px solid #668ABB;
}

.iteration_show {
    margin-left: 10px;
}

.textbox{
    font-size: 16px;
    color: #4A4A4A;
    height: 250px;
    width: 220px;
    margin-left: 10px;
    background-color: #FCFCFC;
    resize: none;
    margin-bottom: 10px;
    border: 2px solid #668ABB;
    font-weight: bold;
}


.deform_download_container {
    font-weight: bold;
    margin-left: 10px;
    margin-bottom: 10px;
}


.deform_download {
    font-size: 16px;
    height: 30px;
	width: 170px;
    color: #4A4A4A;
    border: #DAE8FC;
    margin-left:2px;
    background-color: #DAE8FC;
    font-weight: bold;
    margin-top: 5px;
}

.deform_download:hover {
    color: #fff;
    background-color: #668ABB !important;
}



/* ************************************渲染画布 */
.interactive_deform {
    width: 100vw; /* 充满整个视口 */
    height: 87vh; /* 充满整个视口 */
    position: relative;

    box-sizing: border-box; /* 确保内边距和边框不会增加元素的宽度 */
}




/* ************************************第一个折叠页面：变形效果展示 */
.accordion-container {
    padding: 0 !important;
    background: #1d1d1d;
}

.accordion-header {
    cursor: pointer;
    padding: 5px;
    border: 2px solid #808080;
    text-align: left;
    font-weight: bold;
    background: #FCFCFC;
}

.accordion-header h2 {
    color: #808080;
}

/* 展开时的样式 */
.accordion-container .ui-accordion-header-active {
    /* background-color: white; */
    background: #FCFCFC;
}

/* 展开时的字体颜色与背景一致的样式 */
.accordion-container .ui-accordion-header-active h2 {
    color: #668ABB; /* 与背景色一致 */
}

.accordion-content {
    display: none;
    padding: 8px;
    border-top: 1px solid #808080;
    background: #FCFCFC;
}

.hull_3D_contrast {
    /*flex: 1;*/
    display: inline-block; /* 将hull_3D_contrast设置为内联块级元素 */
    padding: 8px;
}

.hull_3D_contrast h3 {
    margin-top: -5px;
}


.interactive_contrast {
    width: 1780px;
    height: 400px;
    margin-left: 10px;
    margin-top: 0px;
    background-color: #F4F4F4;
    background-size: cover;
    border: 2px solid #808080;
    overflow: hidden;
}


.hull_2D_contrast {
    height: 350px;
    /*flex: 1;*/
    padding: 8px;
}

.contrast{
    display: flex;
    flex-wrap: wrap;
}

.SAC_contrast{
    margin-top: 5px;
    margin-left: 10px;
    flex: 1.7;
    width: 1114px;
}

.bodyplan_contrast{
    margin-top: 5px;
    margin-left: 10px;
    flex: 1;
    width: 656px;
}




/* ************************************第二个折叠页面：船体数据展示 */
.calculate{
    display: block;
}

.calculate_show {
    display: flex;
    flex-wrap: wrap;
}


.statics_performance_show {
    flex: 1;
    padding: 8px;
}

.statics_performance_show table{
    font-size: 16px;
    height: 25px;
    width: 500px;
}

.statics_performance {
    margin-left: 10px;
    margin-right: 10px;
}



.hull_type_show {
    flex: 4;
    padding: 8px;
}


.hull_type_show table{
    font-size: 16px;
    height: 25px;
    width: 1250px;
    column-width: 162.5px;
}

.hull_type {
    margin-left: 10px;
    font-weight: bold;
    text-align: center;
}

/* ************************************第二个折叠页面：船体数据展示 */
.beian {
    margin-top: -12px;
}