html,
body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
}

#tool_bar {
    height: 50px;
    background-color: rgb(32,41,47);
    background-image: url('/data//face/tool_bar.png');
    /* border: 1px solid cadetblue; */
    margin: 0;
    padding-left: 4px;
}

#tool_bar>button {
    /* 消除button的默认样式 */
    margin: 10px 2px;
    padding: 0;
    border: 0px solid transparent;
    background-color: transparent;
    color: #ffffff;
    /* 消除默认点击蓝色边框效果 */
    outline: none;
    width: 80px;
    height: 30px;
    display: inline-block;
}
/* 顶部菜单栏 */
#btn_open {
    background-image: url('/data/face/open.png');
}
#btn_open:hover {
    background-image: url('/data/face/open_down.png');
}
#btn_save {
    background-image: url('/data/face/save.png');
}
#btn_save:hover {
    background-image: url('/data/face/save_down.png');
}
#btn_select {
    background-image: url('/data/face/select.png');
}
#btn_select:hover {
    background-image: url('/data/face/select_down.png');
}
#btn_rotate {
    background-image: url('/data/face/rotate.png');
}
#btn_rotate:hover {
    background-image: url('/data/face/rotate_down.png');
}
#btn_delete {
    background-image: url('/data/face/delete.png');
}
#btn_delete:hover {
    background-image: url('/data/face/delete_down.png');
}
#tool_bar>button#btn_set_name {
    background-image: url('/data/face/set_name.png');
    width: 98px;
}
#tool_bar>button#btn_set_name:hover {
    background-image: url('/data/face/set_name_down.png');
    width: 98px;
}
#btn_zoom_in {
    background-image: url('/data/face/zoom_in.png');
}
#btn_zoom_in:hover {
    background-image: url('/data/face/zoom_in_down.png');
}
#btn_zoom_out {
    background-image: url('/data/face/zoom_out.png');
}
#btn_zoom_out:hover {
    background-image: url('/data/face/zoom_out_down.png');
}
#btn_run {
    background-image: url('/data/face/run.png');
}
#btn_run:hover {
    background-image: url('/data/face/run_down.png');
}
#btn_stop {
    background-image: url('/data/face/stop.png');
}
#btn_stop:hover {
    background-image: url('/data/face/stop_down.png');
}

/* 主视图部分 */
#main_area {
    height: calc(100% - 52px);
    display: flex;
}

#left_Bar {
    flex: 0 245px;
    height: calc(100% - 2px);
    border: 1px solid rgb(220,220,220);
    overflow: auto;
    font-size: 9pt;
}

#list_pane {
    min-height: calc(100% - 2px);
    background-color: rgb(32,41,47);
    background-image: url('/data/face/left_bar.png');
    background-repeat: no-repeat;
    padding: 1px 1px 1px 4px;
}
#list_pane>button {
    /* 消除button的默认样式 */
    margin: 0 0 6px 0;
    padding: 0;
    border: 0px solid transparent;
    background-color: transparent;
    color: #ffffff;
    /* 消除默认点击蓝色边框效果 */
    outline: none;
    width: 216px;
    height: 50px;
    display: block;
}
#list_pane>button.separator {
    height: 39px;
    margin: 0;
}
#list_pane>button#btn_multimeter {
    background-image: url('/data/face/multimeter.png');
}
#list_pane>button#btn_multimeter:hover {
    background-image: url('/data/face/multimeter_down.png');
}
#list_pane>button#btn_clampmeter {
    background-image: url('/data/face/clampmeter.png');
}
#list_pane>button#btn_clampmeter:hover {
    background-image: url('/data/face/clampmeter_down.png');
}

#view_2d {
    flex: 1 400px;
    background-color: rgb(220, 226, 217);
    border: 1px solid rgb(220,220,220);
    overflow: scroll;
    background-image: url('/data/face/back_grid.png');
}

/* 弹出元器件列表 */
#popupCompList {
    z-index: 2;
    display: none;
    position: absolute;
    left: 224px;
    top: 51px;   
    padding: 10px 15px;
    min-height: 260px;
    max-width: 930px;
    background-color: rgb(32,41,47);
    box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
}
#popupCompList>p {
    color: #ccc;
    margin: 4px 5px 12px 5px;
}
#popupCompList>button {
    /* 消除button的默认样式 */
    margin: 0 0 6px 0;
    padding: 0;
    border: 0px solid transparent;
    background-color: transparent;
    color: #ffffff;
    outline: none;
    margin: 5px;
}


/*自定义菜单的css代码*/
#myMenu {
    display: none;
    background-color: #ffffff;
    box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
    padding: 4px;
    /*自定义菜单相对与body元素进行定位*/
    position: absolute;
}

.menuItem {
    min-width: 80px;
    margin: 1px 0;
    padding: 3px 16px;
    cursor: pointer;
    font-size: 14px;
}
.menuItem:hover {
    background-color: #bbbbbb;
}

/* 万用表 */
#multiMeterDlg {
    z-index: 10;
    display: none;
    position: absolute;
    background-color: #b9f0d2;
    box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
}
#multiMeterDlg>img, #multiMeterDlg>div{
    position: absolute;
}
#multiMeterDlg #blackPen {
    left: 36px;
    top: 355px;
}
#multiMeterDlg #closeBtn {
    left: 181px;
    top: 2px;
}
#multiMeterDlg #redPen {
    left: 116px;
    top: 355px;
}
#multiMeterDlg #dial {
    position: absolute;
    width: 114px;
    height: 114px;
    left: 43px;
    top: 131px;
    /* background-color: #ccc; */
}
#multiMeterDlg #knob {
    display: block;
    margin: 0 auto;
}
#multiMeterDlg #value {
    position: absolute;
    width: 130px;
    height: 36px;
    left: 32px;
    top: 34px;
    margin: 0;
    padding-right: 3px;
    background-color: rgb(141,156,136);;
    text-align: right;
    font-size: 28px;
}
#multiMeterDlg #msgTip {    
    position: absolute;
    display: none;
    width: 154px;
    height: 60px;
    left: 19px;
    top: 18px;
    padding: 2px;
    background-color: rgb(230, 230, 230);;
    color: rgb(200,32,32);
    border: 1px solid yellow;
    border-radius: 4px;
    font-size: 14px;
}

/* 钳形表 */
#clampMeterDlg {
    z-index: 10;
    min-height: 160px;
    display: none;
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #888;
    border-radius: 4px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
#clampMeterDlg>img {
    display: block;
}
#clampMeterDlg #closeBtn {
    margin: 2px 2px 2px auto;
}
#clampMeterDlg #meterHead {
    width: 108px;
    height: 28px;
    margin: 8px auto;
    background-image: url('/data/tools/clampmeter/takeback.png');
}
#clampMeterDlg #value {
    position: absolute;
    width: 52px;
    height: 27px;
    left: 102px;
    top: 64px;
    margin: 0;
    padding-right: 3px;
    background-color: rgb(141,156,136);
    text-align: right;
    font-size: 20px;
}

#eldlg_property img {
    display: block;
    margin: 0 auto;
}