/* 主样式 */
.head-menu-bar{
    background: white;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 291mm;
    right: 0;
    box-shadow: 0 -2px 6px rgb(0 0 0 / 5%);
    border-bottom: 1px black dashed;
}
.head-menu-bar p,.head-menu-bar a{
    margin: 0 1em;
}
.right-menu{
    display: flex;
    align-items: center;
    flex-direction: column;
}
label{
    padding:0.25em;
    border-radius: 0.25em;
}
.base_metal-bar label:hover{
    box-shadow:0 0 1em rgba(0, 0, 255, 0.5);
}
.pqrlabel{
    display: flex;
    justify-content: center;
    align-items: center;
}
.pqrlabel div{
    text-align: center;
    word-wrap:break-word;
}
.pqrhead{
    padding: 0.25em 0;
    border-top: 3px solid var(--bs-primary);
    border-bottom: 1px solid var(--bs-primary);
}
.pqrbody{
    margin: 0.25em 0;
}
.last-line{
    border-bottom: 3px solid var(--bs-primary);
}
/* 接头简图菜单样式 */
.weldingCard{
    width: 100%;
}
.weldingCard tr{
    height: 1.8em;
}
.weldingCard td{
    border:1px black solid ;
}
.set-table-col td{
    height:0;
    border: none;
}
.function-bar-select{
    border: 0;
    text-align: center;
    width: 100%;
    appearance:none;
}
.function-bar-select:focus-visible{
    outline: 0;
}
.card-process{
    position: absolute;
    width: 100%;
    height:100%;
    border: 0;
    resize: none;
    text-align: justify;
}
.position-bar-class-box-img-box{
    padding: 0.5em;
    border-radius: 0.5em;
    margin:0.25em;
    width:200px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: var(--bs-white);
    box-shadow: 0 -2px 6px rgb(0 0 0 / 5%);
    overflow: hidden;
    border: 2px solid var(--bs-white);
}
.position-bar-class-box-img-box img{
    height: 130px;
}
.position-bar-class-box-img-box:hover{
    background: var(--bs-white);
    box-shadow:0 0 0.5em rgba(0, 0, 255, 0.3);
    color: var(--bs-black);
}
.position-bar-son{
    display: grid;
    grid-template-columns: repeat(4,auto);
}
.position-bar-head{
    text-align: center;
    padding: 0.2em;
    border-bottom: 0.2em solid var(--bs-primary);
    border-radius: 0.5em;
}
.shield_gas-bar-gas-box{
    display: grid;
    grid-template-columns: 15em 10em 10em;
    text-align: center;
    margin: 0.25em 0;
    justify-content: center;
}
.shield_gas-bar-gas-box-head{
    border-top: 3px solid var(--bs-primary);
    border-bottom: 1px solid var(--bs-primary);
    border-radius: 0;
}
.joint_number-lite-bar-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25em;
}
.add-joint_number{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.base_metal-bar-box{
    display: grid;
    grid-template-columns: 200px 500px;
    text-align: center;
    background: var(--bs-light);
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
    border-radius: 1em;
    margin: 0.5em 0;
    padding: 0.5em;
    align-items: center;
}
.base_metal-bar-box .t-box{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4em, 5em));
    align-items: center;
    justify-items: center;
    align-content: center;
}
.w-btn{
    background: var(--bs-gray-100);
    color: var(--bs-black);
    border: 0;
    border-radius: 1em;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    padding: 0.25em 1em;
    font-size: 0.9em;
    margin: 0.25em;
    width: 5em;
}
.need-wrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    min-height: 1.8em;
    align-content: center;
}
textarea[name="describe"]{
    background: var(--bs-white);
}
.tab-nav{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2000;
}
.tab-nav input{
    display: none;
}
.tab-nav .tab{
    position: absolute;
    height: 12%;
    width: 100%;
    left: 0;
    top: 0.25%;
    background: var(--bs-primary);
    box-shadow: 0 0 1em rgba(0,0,255,0.4);
    border-radius:0 50px 50px 0;
    transition: 0.4s;
    z-index: 2001;
}
.tab-nav label{
    font-weight: 600;
    z-index: 2050;
    padding: 0.5em;
}
/* 边栏动画 */
.tab-nav input:checked + label{
    color: #fff;
    transition: 0.4s;
}
.tab-nav .value0:checked ~ .tab{
    top: 0.25%;
}
.tab-nav .value1:checked ~ .tab{
    top: 12.75%;
}
.tab-nav .value2:checked ~ .tab{
    top: 25.25%;
}
.tab-nav .value3:checked ~ .tab{
    top: 37.75%;
}
.tab-nav .value4:checked ~ .tab{
    top: 50.25%;
}
.tab-nav .value5:checked ~ .tab{
    top: 62.75%;
}
.tab-nav .value6:checked ~ .tab{
    top: 75.25%;
}
.tab-nav .value7:checked ~ .tab{
    top: 87.75%;
}
:root{
    --value-bar-flag-width: 8em;
    --value-checkbox:20em;
}
.value-bar-flag{
    width: var(--value-bar-flag-width);
    margin: 1em 0;
    height: 18em;
    top: 0;
    position: absolute;
}
.value-bar-checkbox{
    position: absolute;
    right: 0;
    height: 100%;
    width: calc(100% - var(--value-bar-flag-width));
    padding: 1em 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.value-input-label{
    display: grid;
    grid-template-columns:2fr 5fr 2fr 3fr 5fr 5fr 5fr 5fr;
    align-items: center;
    justify-items: center;
    justify-content: center;
    margin: 0.25em 0;
    padding: 0.5em;
}
.value-bar-show-box-child label{
    border-radius: 1em;
}
.value-bar-show-box-child input:checked + label{
    color: white;
    background: var(--bs-primary);
}
.value-bar-show-box-child input{
    display: none;
}
.value-bar-checkbox-checkbar{
    display: flex;
    flex-direction: column;
    width: var(--value-checkbox);
    margin: 0 2em;
    padding: 1em;
    background: var(--bs-white);
    border-radius:1em;
    height:auto;
}
.value-bar-checkbox-show-box{
    width: calc(100% - var(--value-checkbox));
    overflow-y: auto;
}
.value-bar-checkbox-checkbar select{
    margin-bottom: 1em;
}
input[data-self-type~="search-the-box"]{
    background: var(--bs-light);
    box-shadow: 0 0 1em rgba(0,0,0,0.1);
    height:2em;
    border-radius: 1em;
    margin-bottom: 1em;
    border-bottom: 3px solid var(--bs-primary);
}
input[data-self-type~="search-the-box"]:hover,input[data-self-type~="search-the-box"]:focus-visible{
    border-radius: 1em;
}
.op-btn{
    margin: 0 1em;
    border-radius: 2em;
    border: 0;
    padding: 0.25em 1em;
    background: var(--bs-primary);
    color: var(--bs-white);
    transition: 0.6s;
}
.save:hover{
    background: var(--bs-warning);
    box-shadow: rgba(255,193,7,0.3);
}
.sub:hover{
    background: var(--bs-success);
    box-shadow: rgba(25,135,84,0.3);
}
.float-menu{
    display: flex;
    flex-direction: column;
    position: sticky;
    top:4em;
    right: 0;
    transform: translateX(3em);
}
.float-menu button{
    border: 0;
    border-radius: 50%;
    margin: 0.25em;
    height: 3em;
    width: 3em;
}
.op-normal-btn{
    background: var(--bs-primary);
    color: var(--bs-white);
    box-shadow: 0 0 0.5em rgba(0,0,255,0.3);
}
.op-normal-btn:hover{
    background: var(--bs-indigo);
    box-shadow: 0 0 0.5em rgba(102,16,242,0.3);
}
.op-new-btn,.op-copy-btn{
    background: var(--bs-success);
    color: var(--bs-white);
    box-shadow: 0 0 0.5em rgba(25,135,84,0.3);
}
.op-new-btn:hover,.op-copy-btn:hover{
    background: var(--bs-primary);
    box-shadow: 0 0 0.5em rgba(0,0,255,0.3);
}
.float-menu[data-self-page="1"] .op-danger-btn{
    display: none;
}
.op-danger-btn{
    background: var(--bs-warning);
    color: var(--bs-white);
    box-shadow: 0 0 0.5em rgba(255,193,7,0.3);
}
.op-danger-btn:hover{
    background: var(--bs-danger);
    box-shadow: 0 0 0.5em rgba(255,0,0,0.3);
}
.add-value{
    background: var(--bs-light);
    padding: 0.5em;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.1);
    border-radius: 2em;
    transition: 0.5s;
    overflow: hidden;
    position:absolute;
    bottom: 1em;
    right: 1em;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}
.add-value input{
    background: var(--bs-white);
    border: 1px solid var(--bs-primary);
}
.add-value .add-btn{
    min-width: 4em;
    transition: 0.4s;
    overflow: hidden;
}
.add-value-form{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    transition: 0.5s;
    height: 0;
    width: 0;
}
.add-value-form label{
    display: flex;
    flex-direction: column;
}
.bar{
    position: fixed;
    z-index: 2000;
    height: 100vh;
    background: var(--bs-light);
    transition: 0.6s;
    overflow: hidden;
}
.welding-value-bar{
    left: 0;
    bottom:-600px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 600px !important;
}
.show-value-bar{
    bottom: 0;
    box-shadow: 0 0 0.5em 0.5em rgba(0,0,0,0.05);
}
.shield_gas-bar{
    top: 0;
    right: -600px;
    width: 600px;
}
.show-shield_gas-bar{
    padding: 1em;
    right: 0;
    transition: 0.6s;
    overflow: auto;
    box-shadow: 0 0 0.5em 0.5em rgba(0,0,0,0.05);
}
.joint-bar{
    left: -800px;
    top: 0;
    width: 800px;
}
.show-joint-bar{
    left: 0;
    transition: 0.6s;
    overflow: auto;
    box-shadow: 0 0 0.5em 0.5em rgba(0,0,0,0.05);
}
.pqr-bar{
    top: 0;
    left: -980px;
    width: 980px;
}
.show-pqr-bar{
    padding: 1em;
    left: 0;
    transition: 0.6s;
    overflow: auto;
    box-shadow: 0 0 0.5em 0.5em rgba(0,0,0,0.05);
}
.certificate-bar{
    top: 0;
    left: -350px;
    width: 350px;
}
.show-certificate-bar{
    padding: 1em;
    left: 0;
    transition: 0.6s;
    overflow: auto;
    box-shadow: 0 0 0.5em 0.5em rgba(0,0,0,0.05);
}
.diagram-bar{
    top: 0;
    right: -950px;
    width: 950px;
}
.show-diagram-bar{
    right: 0;
    transition: 0.6s;
    overflow: auto;
    box-shadow: 0 0 0.5em 0.5em rgba(0,0,0,0.05);
}
.baseMetal-bar{
    top: 0;
    right: -780px;
    width: 780px;
}
.show-baseMetal-bar{
    right: 0;
    transition: 0.6s;
    overflow: auto;
    box-shadow: 0 0 0.5em 0.5em rgba(0,0,0,0.05);
}
.position-bar{
    top: 0;
    right: -950px;
    width: 950px;
}
.show-position-bar{
    right: 0;
    transition: 0.6s;
    overflow: auto;
    box-shadow: 0 0 0.5em 0.5em rgba(0,0,0,0.05);
}
input:checked + label{
    background: var(--bs-primary);
    color: white;
}
.split:last-child{
    display: none !important;
}
.certificate-bar input{
    display: none;
}
.certificate-bar label{
    margin: 0.25em;
}
.certificate-text .split{
    display: none;
}
.value-bar-flag input:checked + label{
    background: none;
}
.nav-page{
    display: none;
}
.nav-page:first-child{
    display: block;
}
.diagram-box{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(260px,300px));
    justify-items: center;
    justify-content: center;
    margin: 1em;
}
input[type="radio"]{
    display: none;
}
.position-bar input:checked[type="radio"] + label,.diagram-box input:checked[type="radio"] + label{
    background: none;
    box-shadow: 0 0 0.5em 0.5em rgba(255,0,0,0.05);
    border: 2px solid var(--bs-danger);
    transition: 0.3s;
    color: var(--bs-black);
}
.diagram-box img{
    max-width: 250px;
    max-height: 180px;
}
.diagram-box label{
    width: 250px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25em;
    margin: 0.5em 0;
    background: var(--bs-white);
    border: 2px solid var(--bs-white);
    overflow: hidden;
}
.diagram-box label:hover{
    box-shadow: 0 0 0.5em 0.5em rgba(0,0,255,0.05);
    border: 2px solid var(--bs-primary);
    transition: 0.3s;
}
.filter-box{
    position: sticky;
    top: 0;
    background: var(--bs-white);
    box-shadow: 0 -0.5em 0.5em rgba(0,0,0,0.05);
    padding: 1em;
}
.first-class{
    margin-bottom: 0.5em;
}
.second-group label{
    display: none;
}
.add-form{
    position: absolute;
    right: 1em;
    bottom: 1em;
    background: var(--bs-white);
    box-shadow: 0 0 0.5em rgba(0,0,0,0.05);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 1em;
}
.add-diagram{
    position: fixed;
    right: 1em;
    bottom: 1em;
    background: var(--bs-white);
    box-shadow: 0 0 0.5em rgba(0,0,0,0.05);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 1em;
}
.add-diagram form{
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: 0.5s;
    overflow: hidden;
}
.add-gas{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.add-gas form{
    display: flex;
    flex-direction: column;
}
.joint-bar .head{
    display: grid;
    justify-items: center;
    justify-content: center;
    align-items: center;
    grid-template-columns:15em 26em 6em;
    width: 100%;
    background: var(--bs-white);
    padding: 1em;
    position: sticky;
    top: 0;
}
.joint-bar .head span{
    display: flex;
    justify-content: center;
    align-items: center;
}
.joint-bar .child .head{
    margin: 1em;
    padding: 0.5em;
    background: var(--bs-white);
    box-shadow: 0 0 0.5em rgba(0,0,0,0.05);
    width: auto;
    border-radius: 1em;
}
.joint-bar .joint-body input:checked + label{
    background: none;
    color: var(--bs-black);
}
.joint-bar .joint-body{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.joint-bar .child .child-body{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(5em,7em));
    background: var(--bs-white);
    height: 0;
    overflow: hidden;
    transition: 0.5s;
    margin: -2em 1em 1em;
    padding: 0 0.5em;
    justify-items: center;
    align-items: center;
    border-radius: 0 0 1em 1em;
}
.joint-bar .child .child-body .jointNumberChild{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin: 0.25em;
    padding: 0.5em;
    border-radius: 2em;
    height: 2.3em;
}
.joint-bar .child .child-body .jointNumberChild .jointNumber{
    margin-right: 0.5em;
}