body {
    margin: 0px;
}
a:link {
    color: black;
    text-decoration: none;
}
a:visited {
    color: gray;
    text-decoration: none;
}
a:hover {
    color: #3243B3;
    text-decoration: underline;
}
a:active {
    color: #F73131;
    text-decoration: none;
}

div {
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: #ffffff;
}
.toolbarbutton {
    width: 32px;
    height: 42px;
    background-color: #ffffff;
    display: inline-block;
    margin: 3px 0px 3px 0px;
    padding: 0px;
    border: 0px;
}
.toolboxbutton {
    width: 86px;
    height: 96px;
    background-color: #ffffff;
    display: inline-block;
    margin: 3px 2px 0 2px;
    padding: 0px;
    border: 0px;
}
span {
    background-color: #EEF5FD;
    display: inline-block;
    margin: 3px 2px 0 2px;
    padding: 0px;
    border: 0px;
}
.separator {
    height: 42px;
    width: 3px;
    background-image: url(./images/buttons/inv.png);
    margin: 3px 0px 3px 0px;
    padding: 0px;
    border: 0px;
}
.separator2 {
    height: 30px;
    width: 3px;
    background-image: url(./images/buttons/inv.png);
    margin: 2px 3px 3px 3px;
    padding: 0px;
    border: 0px;
}
#divToolbar {
    width: 99%;
    height: 50px;
    user-select: none;
    background-color: #ffffff;
    z-index: 99;
    padding: 0px 3px 0px 3px;
    white-space: nowrap;

}
#divToolbox {
    width: 283px;
    user-select: none;
    background-color: #ffffff;
    z-index: 99;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 1px;
    display: block;
}
#underarea {
    width:100%;
}
#svg1 {
    /*    width: 100%;
    display: inline-block;*/
    background-color: rgb(248, 248, 248);
    border: 0.5px solid gray;
    /* 关键：允许点击、拖动、触摸 */
    pointer-events: auto !important;
    touch-action: none !important;
    user-select: none;
}
#leftCol {
    width: 297px;
    vertical-align: top;
    /*background: blue;*/
}
#leftCol2 {
    width: 100%;
    height: 100%;
    vertical-align: top;
    overflow-y: auto;
}
#leftCol3 {
    width: 100%;
    height: 100%;
    vertical-align: top;
    overflow-y: auto;
    display: none;
}
#leftCol4 {
    width: 100%;
    height: 100%;
    vertical-align: top;
    overflow-y: auto;
    display: none;
}
#designDragramList {
    width: 100%;
    height: 100%;
    vertical-align: top;
    overflow-y: auto;
}
.switchFloor {
    position: absolute;
    top: 60px;
    width: 80px;
    border-radius: 5px;
    border-width: 1px;
    background-color: #F3F3F3;
}
#btnFloor1 {
    left: 320px;
    background-color: white;
}
#btnFloor2 {
    left: 410px;
}
#btnFloor3 {
    left: 500px;
    display: none;
}
#btnFloor8 {
    left: 500px;
}

#seDePlaneWidth {
    width: 60px;
}
#seDePlaneHeight {
    width: 60px;
}
#seDeFloorcnt {
    width: 60px;
}
#btnDeMore {
    background-color: white;
    width: 100px;
    margin-left: 20px;
    border: 1px solid red;
    display: none;
}
#txtDeNumber {
    color: gray;
    width: 160px;
    margin-left: 10px;
}
#btnDeNumber {
    width: 90px;
    margin-left: 20px;
}
#btnDeSearch {
    width: 90px;
    margin-left: 15px;
    border: 1px solid red
}
#btnDeReset {
    width: 60px;
    margin-left: 10px
}
#btnDeClose {
    width: 50px;
    margin-left: 30px
}
#planeDeMore {
    display: none;
    margin-top: 10px;
}
#seBedroomCnt {
    width: 60px;
}
#btnDelFloor {
    position: absolute;
    background-color: #F3F3F3;
    border-width: 1px;
    border-color: black;
    width: 80px;
    height: 20px;
    display: none;
    font-size: 13px;
    text-align: center;
    user-select: none;
    cursor: default;
    &:hover {
        background-color: lightblue;
    }
}
#canvasCol {
    width: auto;
    /*background: green;*/
    vertical-align: top;
}
.designPlane {
    position: relative;
    width: 99%;
    border: 2px solid transparent;
    border-radius: 5px;
    margin: 0;
}
.designDownloadBtn {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 120px;
    height: 40px;
    display: none;
}
#roofDir1Plane {
    display: none;
    width: 300px;
    height: 210px;
    position: absolute;
    left: 500px;
    top: 300px;
    text-align: center;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}
#roofDir1PlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#roofDir1PlaneOptions {
    margin: 50px 0 0 70px;
    display: flex;
    flex-direction: row;
}
#roofDir1PlaneButtonBar {
    margin: 30px 0 0 0px;
}
#btnRoofDir1OK {
    width: 100px;
    margin-top: 40px;
    border-color: red;
}
#btnRoofDir1Cancel {
    width: 100px;
}

#roofDir2Plane {
    display: none;
    width: 300px;
    height: 210px;
    position: absolute;
    left: 500px;
    top: 300px;
    text-align: center;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}

#roofDir2PlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}

#roofDir2PlaneOptions {
    margin: 50px 0 0 70px;
    display: flex;
    flex-direction: row;
}

#roofDir2PlaneButtonBar {
    margin: 30px 0 0 0;
}

#btnRoofDir2OK {
    width: 100px;
    margin-top: 40px;
    border-color: red;
}

#btnRoofDir2Cancel {
    width: 100px;
}
#roofAreaTypePlane {
    display: none;
    width: 300px;
    height: 210px;
    position: absolute;
    left: 500px;
    top: 300px;
    text-align: center;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}

#roofAreaTypePlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}

#roofAreaTypePlaneOptions {
    margin: 30px 0 0 70px;
    display: flex;
    flex-direction: row;
}
#roofCorniceTypePlaneOptions {
    margin: 20px 0 0 70px;
    display: flex;
    flex-direction: row;
}

#roofAreaTypePlaneButtonBar {
    margin: 30px 0 0 0;
}

#btnroofAreaTypeOK {
    width: 100px;
    margin-top: 40px;
    border-color: red;
}

#btnroofAreaTypeCancel {
    width: 100px;
}


#sharePlane {
    display: none;
    width: 800px;
    height: 100px;
    position: absolute;
    left: 400px;
    top: 300px;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}
#sharePlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#sharePlaneButtonBar {
    margin: 20px 0 0 0;
}
#txtShareUrl {
    width: 650px;
    margin-left: 20px;
}
#btnCopyShare {
    width: 60px;
    margin-top: 20px;
}
#btnCloseShare {
    width: 40px;
    margin-left: 5px;
    margin-top: 20px;
}

#confirmPlane {
    display: none;
    width: 400px;
    height: 100px;
    position: absolute;
    left: 400px;
    top: 300px;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}
#confirmPlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#confirmPlaneButtonBar {
    margin: 20px 0 0 0;
}
#txtConfirmPlaneMessageContent {
    margin: 20px 0 0 20px;
    font-size: 16px;
}
#btnConfirmPlaneYes {
    width: 100px;
    margin: 20px 0 20px 25px;
    border-color:red;
}
#btnConfirmPlaneNo {
    width: 100px;
    margin: 20px 0 20px 20px;
}
#btnConfirmPlaneCancel {
    width: 100px;
    margin: 20px 0 20px 20px;
}

.collapsible {
    width: 100%; /* 面板宽度 */
    text-align: center;
    border: 0.1px solid rgb(249, 249, 249); /* 边框样式 */
    margin: 0px 0px 15px 0px; /* 外边距 */
}

.collapsible-header {
    height: 36px;
    background-color: #f9f9f9; /* 标题背景颜色 */
    padding: 5px 0px 0px 0px; /* 内边距 */
    cursor: pointer; /* 鼠标指针样式 */
}

.collapsible-content {
    padding: 0px 0px 0px 4px; /* 内边距 */
    display: block; /* 初始状态不显示内容 */
    text-align: left;
    transition: all 0.3s ease;
}

.menuitemtr {
    cursor: default;
}
.menuitem {
    background-color: #f9f9f9;
    font-size: 14px;
    text-indent: 10px;
    width: 140px;
    cursor: default;
    &:hover {
        background-color: rgb(126, 202, 250);
    }
    &:active {
        background-color: rgb(126, 202, 250);
    }
}
.menuspseparatortr {
    height: 2px;
    margin-bottom: 2px;
}
.menuspseparator {
    border-bottom: 1px solid #ccc;
    height: 2px;
}

#customMenu {
    z-index: 200;
}
#customMenu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 1px;
}
/* 滚动条的宽度 */
::-webkit-scrollbar {
    width: 6px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: #C9C9CB;
    border-radius: 10px;
}
/* #hOperation {
    display: none;
}
#hCheckState {
    display: none;
} */
#btnLogo {
    width: 93px;
    height: 40px;
    margin: 0px 20px 0px 0px;
    background-image: url(images/buttons/logo1.png);
    &:hover{
        background-image: url(images/buttons/logo2.png);
    }
    &:active {
        background-image: url(images/buttons/logo3.png);
    }
}
#btnLogo {
    width: 93px;
    height: 40px;
    margin:0px 0px 0px 0px;
    background-image: url(images/buttons/logo1.png);
    &:hover {
        background-image: url(images/buttons/logo2.png);
    }
    &:active {
        background-image: url(images/buttons/logo3.png);
    }
}
#btnLink {
    width: 134px;
    height: 23px;
    margin: 0px 10px 8px 6px;
    background-image: url(images/buttons/search1.png);
    &:hover {
        background-image: url(images/buttons/search2.png);
    }
    &:active {
        background-image: url(images/buttons/search3.png);
    }
}
#lblLink {
    position: absolute;
    left: 110px;
    top: 15px;
    background: transparent;
}
#lblLinkTitle {
    background: transparent;
    padding: 0px 20px 0px 20px;
}
#lblLinkTitleText {
    font-size: 13px;
    background: transparent;
}
#lblLinkTitleText:hover {
    background: #F5F5F8
}
#lblLinkMenu {
    font-size: 14px;
    border: 1px solid black;
    height: 130px;
    width: 250px;
    display: none;
}
.lblLinkMenuItem {
    background: white;
    font-size: 14px;
    padding: 6px 20px 6px 30px;
    width: 200px;
    &:hover {
        background: #F5F5F8;
    }
}
.hiddenControl {
    display: none;
}
#btnShrink {
    position: absolute;
    left: 304px;
    top: 500px;
    user-select: none;
}

#btnNew {
    background-image: url(images/buttons/new1.png);
    &:hover {
        background-image: url(images/buttons/new2.png);
    }
    &:active {
        background-image: url(images/buttons/new3.png);
    }
}
#btnOpen {
    background-image: url(images/buttons/open1.png);
    &:hover {
        background-image: url(images/buttons/open2.png);
    }
    &:active {
        background-image: url(images/buttons/open3.png);
    }
}
#btnSave {
    background-image: url(images/buttons/save1.png);
    &:hover {
        background-image: url(images/buttons/save2.png);
    }
    &:active {
        background-image: url(images/buttons/save3.png);
    }
}
#btnSaveAs {
    width: 43px;
    background-image: url(images/buttons/saveas1.png);
&:hover {
        background-image: url(images/buttons/saveas2.png);
    }
    &:active {
        background-image: url(images/buttons/saveas3.png);
    }
}
#btnReset {
    width: 56px;
    background-image: url(images/buttons/reset1.png);
    &:hover {
        background-image: url(images/buttons/reset2.png);
    }
    &:active {
        background-image: url(images/buttons/reset3.png);
    }
}
#btnUndo {
    background-image: url(images/buttons/undo1.png);
    &:hover {
        background-image: url(images/buttons/undo2.png);
    }
    &:active {
        background-image: url(images/buttons/undo3.png);
    }
}
#btnRedo {
    background-image: url(images/buttons/redo1.png);
    &:hover {
        background-image: url(images/buttons/redo2.png);
    }
    &:active {
        background-image: url(images/buttons/redo3.png);
    }
}
#btnDelEle {
    background-image: url(images/buttons/del1.png);
    &:hover {
        background-image: url(images/buttons/del2.png);
    }
    &:active {
        background-image: url(images/buttons/del3.png);
    }
}
#btnSelectAll {
    width: 32px;
    background-image: url(images/buttons/selectall1.png);
    &:hover {
        background-image: url(images/buttons/selectall2.png);
    }
    &:active {
        background-image: url(images/buttons/selectall3.png);
    }
}
#btnWallLine {
    background-image: url(images/buttons/wallline1.png);
    &:hover {
        background-image: url(images/buttons/wallline2.png);
    }
    &:active {
        background-image: url(images/buttons/wallline3.png);
    }
}
#btnWallRect {
    background-image: url(images/buttons/wallrect1.png);
    &:hover {
        background-image: url(images/buttons/wallrect2.png);
    }
    &:active {
        background-image: url(images/buttons/wallrect3.png);
    }
}
#btnWallOblique {
    background-image: url(images/buttons/walloblique1.png);
    &:hover {
        background-image: url(images/buttons/walloblique2.png);
    }
    &:active {
        background-image: url(images/buttons/walloblique3.png);
    }
}
#btnWindow {
    background-image: url(images/buttons/window1.png);
    &:hover {
        background-image: url(images/buttons/window2.png);
    }
    &:active {
        background-image: url(images/buttons/window3.png);
    }
}
#btnDoor {
    background-image: url(images/buttons/door1.png);
    &:hover {
        background-image: url(images/buttons/door2.png);
    }
    &:active {
        background-image: url(images/buttons/door3.png);
    }
}
#btnPlugDoor {
    background-image: url(images/buttons/plugdoor1.png);
    &:hover {
        background-image: url(images/buttons/plugdoor2.png);
    }
    &:active {
        background-image: url(images/buttons/plugdoor3.png);
    }
}
#btnGate {
    background-image: url(images/buttons/gate1.png);
    &:hover {
        background-image: url(images/buttons/gate2.png);
    }
    &:active {
        background-image: url(images/buttons/gate3.png);
    }
}
#btnShutterDoor {
    background-image: url(images/buttons/shutter1.png);
    &:hover {
        background-image: url(images/buttons/shutter2.png);
    }
    &:active {
        background-image: url(images/buttons/shutter3.png);
    }
}
#btnGateheadRect {
    background-image: url(images/buttons/gatehead1.png);
    &:hover {
        background-image: url(images/buttons/gatehead2.png);
    }
    &:active {
        background-image: url(images/buttons/gatehead3.png);
    }
}
#btnBed {
    background-image: url(images/buttons/bed1.png);
    &:hover {
        background-image: url(images/buttons/bed2.png);
    }
    &:active {
        background-image: url(images/buttons/bed3.png);
    }
}
#btnArmoire {
    background-image: url(images/buttons/armoire1.png);
    &:hover {
        background-image: url(images/buttons/armoire2.png);
    }
    &:active {
        background-image: url(images/buttons/armoire3.png);
    }
}
#btnKitchen {
    background-image: url(images/buttons/kitchen1.png);
    &:hover {
        background-image: url(images/buttons/kitchen2.png);
    }
    &:active {
        background-image: url(images/buttons/kitchen3.png);
    }
}
#btnHandsink {
    background-image: url(images/buttons/handsink1.png);
    &:hover {
        background-image: url(images/buttons/handsink2.png);
    }
    &:active {
        background-image: url(images/buttons/handsink3.png);
    }
}
#btnClosestoolup {
    background-image: url(images/buttons/closestoolup1.png);
    &:hover {
        background-image: url(images/buttons/closestoolup2.png);
    }
    &:active {
        background-image: url(images/buttons/closestoolup3.png);
    }
}
#btnShowerroom {
    background-image: url(images/buttons/showerroom1.png);
    &:hover {
        background-image: url(images/buttons/showerroom2.png);
    }
    &:active {
        background-image: url(images/buttons/showerroom3.png);
    }
}
#btnBathtub {
    background-image: url(images/buttons/bathtub1.png);
    &:hover {
        background-image: url(images/buttons/bathtub2.png);
    }
    &:active {
        background-image: url(images/buttons/bathtub3.png);
    }
}
#btnSafa {
    background-image: url(images/buttons/safa1.png);
    &:hover {
        background-image: url(images/buttons/safa2.png);
    }
    &:active {
        background-image: url(images/buttons/safa3.png);
    }
}
#btnTV {
    background-image: url(images/buttons/tv1.png);
    &:hover {
        background-image: url(images/buttons/tv2.png);
    }
    &:active {
        background-image: url(images/buttons/tv3.png);
    }
}
#btnTable {
    background-image: url(images/buttons/table1.png);
    &:hover {
        background-image: url(images/buttons/table2.png);
    }
    &:active {
        background-image: url(images/buttons/table3.png);
    }
}
#btnStaircase {
    background-image: url(images/buttons/staircase1.png);
    &:hover {
        background-image: url(images/buttons/staircase2.png);
    }
    &:active {
        background-image: url(images/buttons/staircase3.png);
    }
}
#btnStaircaseArc {
    background-image: url(images/buttons/staircaseArc1.png);
    &:hover {
        background-image: url(images/buttons/staircaseArc2.png);
    }
    &:active {
        background-image: url(images/buttons/staircaseArc3.png);
    }
}
#btnStudy {
    background-image: url(images/buttons/study1.png);
    &:hover {
        background-image: url(images/buttons/study2.png);
    }
    &:active {
        background-image: url(images/buttons/study3.png);
    }
}
#btnPlay {
    background-image: url(images/buttons/play1.png);
    &:hover {
        background-image: url(images/buttons/play2.png);
    }
    &:active {
        background-image: url(images/buttons/play3.png);
    }
}
#btnLivAir {
    background-image: url(images/buttons/livair1.png);
    &:hover {
        background-image: url(images/buttons/livair2.png);
    }
    &:active {
        background-image: url(images/buttons/livair3.png);
    }
}
#btnElevatorAction {
    background-image: url(images/buttons/elevator1.png);
    &:hover {
        background-image: url(images/buttons/elevator2.png);
    }
    &:active {
        background-image: url(images/buttons/elevator3.png);
    }
}
#btnElecAction {
    background-image: url(images/buttons/elec1.png);
    &:hover {
        background-image: url(images/buttons/elec2.png);
    }
    &:active {
        background-image: url(images/buttons/elec3.png);
    }
}
#btnTextAction {
    width: 56px;
    background-image: url(images/buttons/text1.png);
    &:hover {
        background-image: url(images/buttons/text2.png);
    }
    &:active {
        background-image: url(images/buttons/text3.png);
    }
}
#btnEnvAction {
    background-image: url(images/buttons/env1.png);
    &:hover {
        background-image: url(images/buttons/env2.png);
    }
    &:active {
        background-image: url(images/buttons/env3.png);
    }
}
#btnLineAction {
    background-image: url(images/buttons/line1.png);
    &:hover {
        background-image: url(images/buttons/line2.png);
    }
    &:active {
        background-image: url(images/buttons/line3.png);
    }
}
#btnSkywinAction {
    background-image: url(images/buttons/skywin1.png);
    &:hover {
        background-image: url(images/buttons/skywin2.png);
    }
    &:active {
        background-image: url(images/buttons/skywin3.png);
    }
}

#btnInversionAction {
    width: 56px;
    background-image: url(images/buttons/inversion1.png);
    &:hover {
        background-image: url(images/buttons/inversion2.png);
    }
    &:active {
        background-image: url(images/buttons/inversion3.png);
    }
}
#btnAITest {
    width: 62px;
    background-image: url(images/buttons/ai1.png);
    &:hover {
        background-image: url(images/buttons/ai2.png);
    }
    &:active {
        background-image: url(images/buttons/ai3.png);
    }
}
#btnSelectDesignAction {
    width: 62px;
    background-image: url(images/buttons/design1.png);
    &:hover {
        background-image: url(images/buttons/design2.png);
    }
    &:active {
        background-image: url(images/buttons/design3.png);
    }
}
#btnSelectImage {
    width: 62px;
    background-image: url(images/buttons/draw1.png);
    &:hover {
        background-image: url(images/buttons/draw2.png);
    }
    &:active {
        background-image: url(images/buttons/draw3.png);
    }
}
#btnBuildPlane {
    width: 62px;
    background-image: url(images/buttons/build1.png);
    &:hover {
        background-image: url(images/buttons/build2.png);
    }
    &:active {
        background-image: url(images/buttons/build3.png);
    }
}
#btnAiChange {
    width: 82px;
    background-image: url(images/buttons/aichange1.png);
    &:hover {
        background-image: url(images/buttons/aichange2.png);
    }
    &:active {
        background-image: url(images/buttons/aichange3.png);
    }
}
#btnCopyScreen {
    width: 62px;
    background-image: url(images/buttons/copyscreen1.png);
    &:hover {
        background-image: url(images/buttons/copyscreen2.png);
    }
    &:active {
        background-image: url(images/buttons/copyscreen3.png);
    }
}
#btnNotifyImg {
    width: 58px;
    background-image: url(images/buttons/notify1.png);
    &:hover {
        background-image: url(images/buttons/notify2.png);
    }
    &:active {
        background-image: url(images/buttons/notify3.png);
    }
}
#btnUserAction {
    width: 94px;
    background-image: url(images/buttons/login1.png);
    &:hover {
        background-image: url(images/buttons/login2.png);
    }
    &:active {
        background-image: url(images/buttons/login3.png);
    }
}
#btnExit {
    background-image: url(images/buttons/exit1.png);
    &:hover {
        background-image: url(images/buttons/exit2.png);
    }
    &:active {
        background-image: url(images/buttons/exit3.png);
    }
}

#btnArrawAction {
    background-image: url(images/draw/arraw1.jpg);
    width:30px;
    height:30px;
    margin:0px;
}
#btnDrawLineAction {
    background-image: url(images/draw/drawline1.jpg);
    width: 30px;
    height: 30px;
    margin: 0px;
}
#btnDotLineAction {
    background-image: url(images/draw/drawdotline1.jpg);
    width: 30px;
    height: 30px;
}
#btnRectAction {
    display: none;
    background-image: url(images/draw/drawrect1.jpg);
    width: 30px;
    height: 30px;
}
#btnRect2Action {
    display: none;
    background-image: url(images/draw/drawrect21.jpg);
    width: 30px;
    height: 30px;
}
#btnCircleAction {
    display: none;
    background-image: url(images/draw/drawcircle1.jpg);
    width: 30px;
    height: 30px;
}
#btnThicknessAction {
    display: none;
    background-image: url(images/draw/thickness1.jpg);
    width: 30px;
    height: 30px;
}
#btnRubberAction {
    background-image: url(images/draw/rubber1.jpg);
    width: 30px;
    height: 30px;
}
#btnCloseAction {
    background-image: url(images/exit1.jpg);
    width: 30px;
    height: 30px;
}

.groupbox {
    border: 1px solid #ccc; /* 边框 */
    padding: 10px; /* 内边距 */
    margin: 10px; /* 外边距 */
    border-radius: 5px; /* 圆角 */
    background-color: #f9f9f9; /* 背景色 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影 */
}
.groupbox-title {
    font-weight: bold; /* 字体加粗 */
    margin-bottom: 10px; /* 下边距 */
}
fieldset {
    border: 1px solid #ccc; /* 边框 */
    padding: 10px; /* 内边距 */
    margin: 10px; /* 外边距 */
    border-radius: 5px; /* 圆角 */
}
legend {
    padding: 0 5px; /* legend内边距 */
    font-weight: bold; /* 字体加粗 */
}
#newPlane {
    display: none;
    width: 470px;
    height: 470px;
    position: absolute;
    text-align: center;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}
#newPlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
}
#openPlane {
    display: none;
    width: 600px;
    height: 470px;
    position: absolute;
    text-align: center;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}
#openPlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#openPlaneTypeSelectBar {
    cursor: pointer;
    user-select:none;
    text-align:right;
    margin:0px;
    padding:0px;
    font-size:13px;
}
#openPlaneList {
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 300px;
    overflow-y: auto;
}
.planeListItem {
    position: relative;
    display: table-cell;
    width: 100px;
    height: 80px;
    background-color: #F3F3F3;
    cursor: pointer;
    user-select: none;
    text-align: center;
    vertical-align: middle;
    margin: 0px 15px 30px 15px;
    font-size: 16px;
    &:hover {
        background-color: lightblue;
    }
}
.planeListItemText {
    margin-top: 22px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border-radius: 4px;
}
.planeListItemShareText {
    display: none;
    position: absolute;
    top: 2px;
    right: 62px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    color: white;
    background-color: black;
}
.planeListItemDownloadText {
    display: none;
    position: absolute;
    top: 2px;
    right: 32px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    color: white;
    background-color: black;
}
.planeListItemRemoveText {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    color: white;
    background-color: black;
}
.planeListTreeDirText {
    margin: 10px 0px 0px 0px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    text-align: left;
    list-style-type: circle;
}
.planeListTreeItemText {
    margin: 10px 0px 0px 0px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    text-align: left;
    list-style-type: square;
}
#staircaseSetup {
    position: absolute;
    display: none;
    width: 500px;
    height: 500px;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}
#staircaseTitleBar, #drawToolTitle {
    background-color: #424242;
    color: white;
    height: 27px;
}
#drawToolBar {
    display: none;
    width: 200px;
    height: 65px;
    left: 400px;
    top: 80px;
    position: absolute;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
    user-select: none;
}
#savePlane {
    display: none;
    width: 450px;
    height: 230px;
    position: absolute;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}

#savePlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#txtSaveType {
    width: 160px;
}
#txtProName {
    width: 290px;
}
#loginPlane {
    display: none;
    width: 500px;
    height: 380px;
    position: absolute;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 1000;
    text-align: center;
}

#loginPlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#loginPlaneList {
    display: flex;
    width: 500px;
    height: 160px;
    overflow-y: auto;
    text-align: center;
}
.loginPlaneListInner {
    text-align:center;
    margin:70px 0px 0px 100px;
}
.btnOK {
    width: 100px;
    margin-top: 60px;
    border-color: red;
}
#btnCreateNewOK {
    margin-top: 30px;
}
#btnCreateNewCancel {
    margin-top: 30px;
}
.btnCancel {
    width: 100px;
}
.btnSendCode {
    margin-left: 3px;
    width: 80px;
}
#registerPlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#registerPlaneListInner {
    text-align: center;
    margin: 30px 0px 0px 70px;
}
.btnToRegister {
    width: 100px;
    margin-top: 10px;
    margin-left: 30px;
    background-color: #424242;
    color: white;
}
#btnRegisterOK {
    width: 130px;
    margin-top: 30px;
    border-color: red;
}
#btnToLogin {
    width: 130px;
    margin-top: 10px;
    margin-left: 30px;
    background-color: #424242;
    color: white;
}
#loginMessage {
    display: none;
    font-size: 16px;
    color: red;
    margin-top: 30px;
}

.userlogo {
    visibility: hidden;
    height: 42px;
    width: 0px;
    background-image: url(/images/userlogo.png);
    background-size: contain;
    background-position: center;
    margin: 3px 10px 3px 0px;
    padding: 0px;
    border: 0px;
    border-radius: 21px;
}
#btnUserlogo {
    margin: 3px 0px 3px 0px;
}
#btnUserCompanyName {
    background-color: transparent;
    position: absolute;
    visibility: hidden;
    font-size: 14px;
}
#userCentrePlane {
    display: none;
    width: 400px;
    height: 600px;
    left:100px;
    top:100px;
    position: absolute;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
    text-align: center;
}
#userCentrePlaneTitleBar {
    background-color: #424242;
    text-align: left;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#userCentrePlaneList {
    display: flex;
    width: 100%;
    height: 400px;
    text-align: center;
}
#userCentreTableLayout {
    margin-top: 10px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
#userCentreTableLayout td {
    width: 150px;
    height: 30px;
}
#userCentreTableLayout span {
    background-color: transparent;
}
#btnRecharge {
    width: 215px;
    height: 30px;
    margin-left: 45px;
}
#btnShare {
    width: 215px;
    height: 30px;
    margin-left: 45px;
    background-color: #1F1F1F;
    color: white;
}
#btnExitLogin {
    width: 215px;
    height: 30px;
    margin-left: 45px;
}
.btnScoreStyle {
    border: none;
    color: blue;
    background-color: transparent;
    cursor: pointer;
    text-decoration: underline;
}
#userBigLogo {
    width: 80px;
    height: 80px;
    border-radius: 40px;
}
.loginButtonBar {
    margin-left: 100px;
}

.registerButtonBar {
    margin-left: 50px;
}

.rechargePlane {
    display: none;
    width: 600px;
    height: 600px;
    left: 500px;
    top: 10px;
    position: absolute;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
    text-align: center;
}
.rechargePlaneTitleBar {
    background-color: #424242;
    text-align:left;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
.rechargeListPlaneList {
    display: flex;
    width: 100%;
    height: 530px;
    text-align: center;
    overflow-y: auto;
}
.rechargeListLayout {
    margin-top: 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.rechargeListLayout span {
    background-color:transparent;
}
.rechargePlaneButtonBar {
    margin-top: 5px;
    text-align: center;
}

#doRechargePlane {
    display: none;
    width: 740px;
    height: 600px;
    left: 500px;
    top: 10px;
    position: absolute;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
    text-align: left;
}
#doRechargePlane span {
    background-color: transparent;
}
#doRechargePlaneTitleBar {
    background-color: #424242;
    text-align: left;
    color: white;
    height: 27px;
    margin: 0 0 0 0;
    padding: 0px;
}
#doRechargePlaneTitleBar table tr td {
    /*background-color: blue;*/
    color: white;
    padding: 0;
    margin: 0;
}
#doRechargePlaneList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 250px;
    text-align: left;
    overflow-y: auto;
    margin: 0;
}
.doRechargePlaneValueType {
    width: 200px;
    height: 80px;
    margin: 20px 15px 0px 15px;
    background-color: #f8f9fe;
    text-align: center;
    cursor: pointer;
}
.doRechargePlaneMoneyType {
    font-size: 25px;
    background-color: #f8f9fe;
    margin-top:10px;
}
.doRechargePlaneScoreType {
    font-size: 14px;
    background-color: #f8f9fe;
}
#doRechargePlaneInput {
    margin: 5px 0 0 30px;
}
#doRechargePlaneButtonBar {
    margin: 5px 0 0 30px;
    text-align: left;
}
#btnDoRechargeOK {
    cursor: pointer;
}
#txtValue {
    height: 23px;
    width: 80px;
}

.doRechargeText {
    font-size: 18px;
}

#doRechargeScanPlane {
    display: none;
    width: 800px;
    height: 600px;
    left: 500px;
    top: 10px;
    position: absolute;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
    text-align: left;
    background-image: url('images/payback.png');
    user-select: none;
}
#doRechargeScanPlane span {
    background-color:transparent;
}
#txtDochargeOrderid {
    position: absolute;
    font-size: 12px;
    left:110px;
    top:168px;
}
#txtDochargeValue {
    position: absolute;
    font-size: 12px;
    left: 110px;
    top: 198px;
}
#iRfid {
    position: absolute;
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    width: 300px;
    height: 300px;
    left: 65px;
    top: 225px;
}
#lblSecond {
    position: absolute;
    font-size: 14px;
    left: 644px;
    top: 80px;
}
#txtClose {
    position: absolute;
    left: 770px;
    top: 10px;
    width: 20px;
    height: 20px;
    background-color:lightblue;
}
#submitPlane {
    display: none;
    width: 1440px;
    height: 900px;
    left: 40px;
    top: 5px;
    position: absolute;
    text-align: center;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}
#submitPlaneTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#submitOptions {
    width: 100%;
    height: calc(100% - 27px);
    overflow-x: auto;
    overflow-y: auto;
}
#submitOptions table tr td {
    width: 200px;
    vertical-align: top;
    text-align: center;
}
#submitOptions table tr td {
    width: 200px;
    vertical-align: top;
    text-align: center;
}
#submitOptions table tr:nth-child(odd) {
    background-color: AliceBlue; 
}
#submitOptions table tr td:nth-child(5) {
    background-color: white;
}
#submitOptions table tr td div {
    background-color: transparent;
}
/*#submitOptions img {
    width: 300px;
    height: 300px;
}*/
.submitImgStyle {
    width: 270px;
    height: 270px;
}
#openFromLibToOpenPlane {
    display: none;
    width: 530px;
    height: 270px;
    left: 200px;
    top: 100px;
    position: absolute;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}
#openFromLibToOpenTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#openFromLibToOpenContent {
}
#openFromLibToOpenButtonBar {
    margin: 5px 0 0 30px;
    text-align: left;
}
#btnOpenFromLibToOpenOK {
    width: 100px;
    height: 40px;
    margin: 30px 0px 0px 150px;
    border-color: red;
}
#btnOpenFromLibToOpenCancel {
    margin: 30px 0px 0px 40px;
    height: 40px;
    width: 100px;
}
#txtSNNumber1 {
    margin: 50px 0px 0px 0px;
    font-size: 20px;
    text-align: center;
}
#txtSNNumber2 {
    margin: 5px 0px 0px 0px;
    font-size: 20px;
    text-align: center;
}
#txtSNNumber3 {
    margin: 5px 0px 0px 0px;
    font-size: 20px;
    text-align: center;
}
#txtSNNumber4 {
    margin: 50px 0px 0px 0px;
    font-size: 20px;
    text-align: center;
}
#txtSNNumber5 {
    margin: 5px 0px 0px 0px;
    font-size: 20px;
    text-align: center;
}
#txtSNNumber6 {
    margin: 5px 0px 0px 0px;
    font-size: 20px;
    text-align: center;
}
#openFromLibSaveToOpenPlane {
    display: none;
    width: 530px;
    height: 270px;
    left: 200px;
    top: 100px;
    position: absolute;
    text-align: left;
    background-color: white;
    border-color: black;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
    z-index: 500;
}
#openFromLibSaveToOpenTitleBar {
    background-color: #424242;
    color: white;
    height: 27px;
    margin: 0px;
    padding: 0px;
}
#openFromLibSaveToOpenContent {
}
#openFromLibSaveToOpenButtonBar {
    margin: 5px 0 0 30px;
    text-align: left;
}
#btnOpenFromLibSaveToOpenOK {
    width: 100px;
    height: 40px;
    margin: 30px 0px 0px 90px;
    border-color: red;
}
#btnOpenFromLibSaveToOpenNo {
    width: 100px;
    height: 40px;
    margin: 30px 0px 0px 20px;
}
#btnOpenFromLibSaveToOpenCancel {
    width: 100px;
    height: 40px;
    margin: 30px 0px 0px 20px;
}

#msgBox {
    display: none;
    position: absolute;
    left: 300px;
    right: 20px;
    bottom: 0px;
    height: 100px;
    background-color: white;
    border: 2px solid gray;
    border-radius: 4px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
}
#msgBoxContent {
    display: flex;
    width: 100%;
    height: 100%;
}
#msgShrink {
    position: absolute;
    right: 3px;
    top: 3px;
    width:14px;
    height:14px;
}
#msgBoxProgress {
    display: flex;
    flex-direction: column;
    width: 50%;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 13px;
}
#msgBoxNotify {
    display: flex;
    flex-direction: column;
    width: 47%;
    overflow-x: hidden;
    overflow-y: auto;
}
.msgBoxProgressBar {
    background-color: white;
    position: relative;
    width: 99.5%;
    margin: 2px;
    border: 1px solid gray;
}
.msgBoxProgressValue {
    background-color: cornflowerblue;
}
.msgBoxProgressText {
    position: absolute;
    background-color: transparent;
    left: 0px;
    bottom: 1px;
    font-size: 13px;
    cursor:default;
}
.msgBoxProgressDel {
    position: absolute;
    background-color: transparent;
    right: 8px;
    bottom: 1px;
    font-size: 13px;
    color: blue;
    cursor: default;
}
.msgBoxNotifyText {
    background-color: transparent;
    font-size: 13px;
    cursor: pointer;
}
.msgBoxContentTitle {
    background-color: transparent;
    font-size: 13px;
    font-weight:500;
    cursor: pointer;
}
#msgBox2 {
    display: none;
    position: absolute;
    left: 300px;
    right: 20px;
    bottom: 22px;
    height: 100px;
    background-color: white;
    border: 2px solid gray;
    border-radius: 4px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 下阴影 */
}
#msg2Shrink {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
}
#msgBox2MsgContent {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
}
.msgBox2MsgText {
    background-color: transparent;
    font-size: 13px;
    cursor: pointer;
}
#bubbleMsg {
    display:none;
    position: absolute;
    left: 500px;
    top: 400px;
    width: 400px;
    height: 200px;
    background-color: transparent;
    border-radius: 8px;
}
#bubbleBody {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 400px;
    height: 150px;
    background-color: #338EFFFF;
    /*opacity: 0.4;*/
    border-radius: 8px;
}
#bubblePointer {
    position: absolute;
    left: 30px;
    bottom: 0px;
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 22px solid transparent;
    border-top: 50px solid rgba(51, 142, 255, 1);
}
#bubbleContent {
    background-color: transparent;
    margin: 10px;
}
.bubbleText {
    color: white;
    background-color: transparent;
    font-size: 15px;
    cursor: pointer;
}
.styleCol {
    display: flex;
    flex-direction: column;
    width: 115px;
    text-align: left;
}
.styleCol1 {
    display: flex;
    flex-direction: column;
    width: 130px;
    text-align: left;
}
.styleColCaption {
    font-size: 18px;
    font-weight: bold;
}
.styleRadio {
    font-size: 13px;
    margin-left: 0px;
}
#imgStyleShow {
    width: 255px;
    height: 195px;
    margin-top:10px;
}
#btnSubmit {
    width: 150px;
    height: 40px;
    margin: 20px 0 0 0;
    border-color: red;
}
#btnSubmitCancel {
    margin-top: 20px;
    width: 70px;
    height: 40px;
}
/*#tblStyles {
    background-color:green;
}*/
/*#tblStyles tr {
    background-color: white;
}
#tblStyles tr td {
    width: 100px;
    background-color: white;
}
#tblStyles tr td div {
    width: 100px;
    background-color: white;
}
#tblStyles tr:nth-child(1) {
    font-size: 20px;
}*/
.submitCaption1 {
    font-size: 18px;
    margin-top: 90px;
    width: 130px;
}
.submitCaption2 {
    font-size: 18px;
    margin-top: 90px;
    width: 110px;
}
/* 隐藏默认的checkbox */
.switch input {
    display: none;
}

/* 滑动开关的容器 */
.slider {
    position: relative;
    display: inline-block;
    width: 50px; /* 开关宽度 */
    height: 22px; /* 开关高度 */
    background-color: #ccc; /* 默认背景颜色 */
    border-radius: 22px; /* 圆角边框 */
    transition: .4s; /* 滑动动画 */
}

/* 滑动开关的按钮 */
.slider:before {
    position: absolute;
    content: "";
    height: 18px; /* 按钮高度 */
    width: 18px; /* 按钮宽度 */
    left: 2px; /* 按钮距离左侧的距离 */
    bottom: 2px; /* 按钮距离底部的距离 */
    background-color: white; /* 按钮颜色 */
    border-radius: 50%; /* 圆形按钮 */
    transition: .4s; /* 按钮滑动动画 */
}

/* 当checkbox被选中时，改变背景颜色和按钮位置 */
input:checked + .slider {
    background-color: #2196F3; /* 激活时的背景颜色 */
}

input:checked + .slider:before {
    transform: translateX(27px); /* 按钮移动的距离 */
}
.up-text {
    position: relative;
    top: -4px;
    background-color:transparent;
}
/*#imgClose {
 
    margin-left: 680px;
}*/
.tabs .tab-links {
    background-color: #EDEDF0;
    display: flex;
    font-size: 13px;
}
.tabs .tab-link {
    padding: 10px;
    background-color: #EDEDF0;
    margin-right: 5px;
    cursor: pointer;
    text-decoration: none;
    color: #333;
}
.tabs .tab-link.active {
    background-color: white;
    
}
.tabs .tab-content .tab {
    display: none;
}
.tabs .tab-content .tab.active {
    display: block;
}

/* .wallInner {
    stroke: rgb(165, 165, 165);
    &:hover {
        stroke: rgb(55, 55, 55);
    }
    &:active {
        stroke: rgb(126, 202, 250);
    }
}

.interPointInner {
    stroke: rgb(165, 165, 165);
    fill: rgb(165, 165, 165);
    &:hover {
        stroke: rgb(55, 55, 55);
        fill: rgb(55, 55, 55);
    }
    &:active {
        stroke: rgb(126, 202, 250);
        fill: rgb(126, 202, 250);
    }
} */
#hOperation {
    width: 90px;
}
#hCheckState {
    width: 90px;
}
#btnT {
    display: none;
}


/* zoom pan */
.control-panel {
    position: absolute;
    display: none;
    bottom: 20px;
    right: 20px;
    /*transform: translateX(-50%);*/
    align-items: center;
    gap: 8px;
    background: white;
    padding: 5px 5px;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* 按钮样式 */
.btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #f4f5f7;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.btn:hover {
    background: #e5e6eb;
}
.btn:active {
    background: #dcdfe6;
    transform: scale(0.95);
}
.zoom-in {
    color: #0099ff;
}
.zoom-out {
    color: #0099ff;
}
.reset {
    color: #ff7700;
}
.arrow {
    color: #333;
}
.updownarrow {
    display: flex;
    flex-direction: column;
}
#arrowsep {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 4px;
}
#genReWallOK {
    width: 100px;
    margin-left: 15px;
    margin-top: 20px;
    border-color: red;
}
#genReWallCancel {
    width: 100px;
    margin-left: 10px;
    margin-top: 20px;
}
/* 2. 遮罩层核心样式：全屏覆盖 + 禁止点击底层 */
.modal-overlay {
    /* 固定定位，全屏覆盖 */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* 半透明背景 */
    background: rgba(0, 0, 0, 0.5);
    /* 置于顶层，挡住所有元素 */
    z-index: 999;
    /* 关键：让遮罩层本身不响应点击事件（可选） */
    pointer-events: auto;
}