html,
body {

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

button:not(.btn_default_style){
    border: none;
}


#mark div{
    background-color: transparent;
}

#mark{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    z-index: 12;
    top: 0;
    left: 0;
    display: none;

}
#mark>div{
    width:      100%;
    height:     100%;
    display:    flex;
    justify-content: center;
}

#mark #id_select_module{
    margin-left: 200px;
    width:      1121px;
    height:     681px;
    background-image: url('./img/id_select_module.png') ;
    margin-top: 74px;
    position: relative;
    /* transform: scale(0.9); */

}

#mark #id_select_module  .cls_slelect_bar{
    width:  840px;
    height: 226px;
    /* background-color: #222; */
    display:    flex;
    justify-content: center;
    align-content :center;
    flex-wrap:wrap;  
    justify-content:space-around;
}



#mark #id_select_module  #id_select_tool{
    position: absolute;
    top:74px;
    left: 40px;
}

#mark #id_select_module  #id_select_wp{
    position: absolute;
    top:382px;
    left: 40px;
}

#mark #id_select_module  #id_select_cirform{
    width:  840px;
    height: 70px;   
    position: absolute;
    top:600px;
    left: 40px;
}

#mark .cls_btn_tool{
    width:      245px;
    height:     192px;
}

#mark #id_btn_tool100{
    background-image: url('./img/id_btn_tool100.png');
}

#mark #id_btn_tool100:hover{
    background-image: url('./img/id_btn_tool100_h.png');
}

#mark #id_btn_tool100[checked='true']{
    background-image: url('./img/id_btn_tool100_h.png');
}

#mark #id_btn_tool101{
    background-image: url('./img/id_btn_tool101.png');
}

#mark #id_btn_tool101:hover{
    background-image: url('./img/id_btn_tool101_h.png');
}

#mark #id_btn_tool101[checked='true']{
    background-image: url('./img/id_btn_tool101_h.png');
}

#mark #id_btn_tool102{
    background-image: url('./img/id_btn_tool102.png');
}

#mark #id_btn_tool102:hover{
    background-image: url('./img/id_btn_tool102_h.png');
}

#mark #id_btn_tool102[checked='true']{
    background-image: url('./img/id_btn_tool102_h.png');
}

#mark .cls_btn_ws{
    width:      379px;
    height:     192px;
}


#mark #id_btn_ws1{
    background-image: url('./img/id_btn_ws1.png');
}

#mark #id_btn_ws1:hover{
    background-image: url('./img/id_btn_ws1_h.png');
}

#mark #id_btn_ws1[checked='true']{
    background-image: url('./img/id_btn_ws1_h.png');
}


#mark #id_btn_ws2{
    background-image: url('./img/id_btn_ws2.png');
}

#mark #id_btn_ws2:hover{
    background-image: url('./img/id_btn_ws2_h.png');
}

#mark #id_btn_ws2[checked='true']{
    background-image: url('./img/id_btn_ws2_h.png');
}

#mark #id_btn_select_ok{
    width:      166px;
    height:     52px;
    background-image: url('./img/id_btn_select_ok.png');
}

#mark #id_btn_select_ok:hover{
    background-image: url('./img/id_btn_select_ok_h.png');
}

#mark #id_btn_select_ok:disabled{
    background-image: url('./img/id_btn_select_ok_d.png');
}

#mark #id_btn_select_cancel{
    width:      166px;
    height:     52px;
    background-image: url('./img/id_btn_select_cancel.png');
}

#mark #id_btn_select_cancel:hover{
    background-image: url('./img/id_btn_select_cancel_h.png');
}

#mark #id_btn_select_cancel:disabled{
    background-image: url('./img/id_btn_select_cancel_h.png');
}

#RobotView{
    width: 100%;
    height: 100%;
    position:relative;   
    overflow-y:auto;
    overflow-x:hidden;
}

#Robot3DView
{
    width: 100%;
    height: 750px;
}

div.cls_tab_view{
    height: 100%;
}

div.cls_tab_view div.cls_tab_bar{
    height: 36px;
    display: flex;
}

div.cls_tab_view div.cls_tab_bar>*{
    flex-grow:1;
    background-color: lightgray;
}

div.cls_tab_view div.cls_tab_bar>*:active{
    background-color: white;
    border-bottom: 0px;
}
div.cls_tab_view div.cls_tab_bar>*[checked='true']{
    background-color: white;
    border-bottom: 0px;
}
div.cls_tab_view div.cls_tab_content{

    padding: 10px;
    height: 100%;
}
div.cls_flex_div{
    display: flex;
    height: 100%;
}

div.cls_flex_div>div {
    flex-grow:1;
}

#id_top_bar{
    /* background-color: rgba(0,0,0,0.5); */
    background: linear-gradient(95.82deg, rgba(174, 175, 201, 0) -12.26%, rgba(221, 221, 232, 0) 0.05%, rgba(255, 255, 255, 0.34) 17.94%, rgba(218, 219, 232, 0) 36.98%, rgba(150, 151, 188, 0) 52.2%), linear-gradient(95.37deg, rgba(174, 175, 201, 0) -10.33%, rgba(221, 221, 232, 0) 8.42%, rgba(255, 255, 255, 0.34) 18.51%, rgba(218, 219, 232, 0) 29.86%, rgba(150, 151, 188, 0) 51.24%), linear-gradient(90.23deg, rgba(0, 0, 0, 0.102) 0.71%, rgba(0, 0, 0, 0) 52.58%, rgba(0, 0, 0, 0.026) 101.3%), rgba(170, 164, 179, 0.41);
    z-index: 12;
}

/* #id_top_bar #tip_bar{

} */

#id_top_bar {
	position: absolute;
    height: 54px;
	top: 0px;
	width: 100%;
	padding: 1px;
	/* box-sizing: border-box; */
	text-align: center;
    /* background-color: rgba(0,115,255,0.5); */
}

#id_top_bar button{
    width: 188px;
    height: 52px;
}

#id_top_bar #btn_save_proj{
    background-image: url('./img/btn_save_proj_n.png');
}
#id_top_bar #btn_save_proj:hover{
    background-image: url('./img/btn_save_proj_h.png');
}
#id_top_bar #btn_save_proj:active{
    background-image: url('./img/btn_save_proj_p.png');
}

#id_top_bar #btn_open_proj{
    background-image: url('./img/btn_open_proj_n.png');
}
#id_top_bar #btn_open_proj:hover{
    background-image: url('./img/btn_open_proj_h.png');
}
#id_top_bar #btn_open_proj:active{
    background-image: url('./img/btn_open_proj_p.png');
}

#id_top_bar #btn_select_ws{
    background-image: url('./img/btn_select_ws_n.png');
}
#id_top_bar #btn_select_ws:hover{
    background-image: url('./img/btn_select_ws_h.png');
}
#id_top_bar #btn_select_ws:active{
    background-image: url('./img/btn_select_ws_p.png');
}

#id_top_bar #btn_reset_robot{
    background-image: url('./img/btn_reset_robot_n.png');
}
#id_top_bar #btn_reset_robot:hover{
    background-image: url('./img/btn_reset_robot_h.png');
}
#id_top_bar #btn_reset_robot:active{
    background-image: url('./img/btn_reset_robot_p.png');
}

#id_top_bar #btn_reset_workplate{
    background-image: url('./img/btn_reset_workplate_n.png');
}
#id_top_bar #btn_reset_workplate:hover{
    background-image: url('./img/btn_reset_workplate_h.png');
}
#id_top_bar #btn_reset_workplate:active{
    background-image: url('./img/btn_reset_workplate_p.png');
}

#id_top_bar #btn_view4{
    background-image: url('./img/btn_view4_n.png');
}
#id_top_bar #btn_view4:hover{
    background-image: url('./img/btn_view4_h.png');
}
#id_top_bar #btn_view4:active{
    background-image: url('./img/btn_view4_p.png');
}

#id_top_bar #btn_view_reset{
    background-image: url('./img/btn_view_reset_n.png');
}
#id_top_bar #btn_view_reset:hover{
    background-image: url('./img/btn_view_reset_h.png');
}
#id_top_bar #btn_view_reset:active{
    background-image: url('./img/btn_view_reset_p.png');
}

#div_opefold{
    position:absolute;
    width : 24px;
    height: 350px;
    top: calc(750px - 350px);
    right: 0px;
}

#div_opefold button
{
    background-color:rgba(255,255,255,0.3);
    color: white;
    white-space: pre-wrap;
}

#div_opefold button:hover
{
    background-color:rgba(255,255,255,0.5);
    color: white;
}

#btn_ope_simple{
    width : 24px;
    height: 100px;
}
#btn_opefold{
    width : 24px;
    height: 250px;
    margin-top: 2px;
}

#Control
{       
    position:absolute;
    right: 0px;
    top: 54px;
    width : 70px;
    height: 210px;
    background:  url("./img/control_n.png")  0px 0px no-repeat; 
}

#Control button
{    
    width: 64px;
    height: 64px;
    background:  url("./img/control_n.png")  0px 0px no-repeat; 
}

#Control button[state='n']{
    background:  url("./img/control_n.png")  
}
#Control button[state='h']{
    background:  url("./img/control_h.png")  
}
#Control button[state='p']{
    background:  url("./img/control_p.png")  
}
#Control button[state='d']{
    background:  url("./img/control_n.png")  
}

#Control button#btn_power
{    
    position:absolute;
    left: 3px;
    top:  3px;
    background-position: -3px -3px;
}
#Control button#btn_servo_power
{    
    position:absolute;
    left: 3px;
    top:  70px;
    background-position: -3px -70px;
}
#Control button#btn_ope_mode
{    
    position:absolute;
    left: 3px;
    top:  140px;
    background-position: -3px -140px;
}

#opePanel{
    position:absolute;
    display: flex;
    width : 635px;
    height: 350px;
    top: calc(750px - 350px);
    right: 24px;
    background:  url("./img/opepanel_n.jpg")  0px 0px no-repeat; 
}

#opePanel[showMode='1']{
    position:absolute;
    width : 460px;
    height: 300px;
    top: calc(750px - 300px);
    right: 24px;
    background:  url("./img/opepanel_simple_n.png")  0px 0px no-repeat; 
}

#opePanel *[disable = "true"]
{
    pointer-events: none;
    background-color: lightgrey;
    color: gray;
}

#opePanel *[disable = "true"] *
{
    pointer-events: none;
    background-color: lightgrey;
    color: gray;
    border: 1px solid darkgray;
}

#screen_frame
{
    display: inline-block;
    position:relative;
    width: 434px;
    height: 100%;
    /* background-color: black; */
}
#opePanel[showMode='1'] #screen_frame
{
    width: 400px;
    height: 100%;
    /* background-color: black; */
}

#screen
{
    position:absolute;
    left: 28px;
    top: 28px;
    width: 400px;
    height: 300px;
    background: url("./img/bkg.bmp");
}

#opePanel[showMode='1'] #screen
{
    position:absolute;
    width: 400px;
    height: 300px;
    left: 0px;
    top: 0px;
}

#screen #state_bar
{
    display: inline-flex;
    position:absolute;
    width: 400px;
    height: 28px;
}
#screen #state_bar >*
{
    margin-right: 2px;
}

#screen #state_bar #btn_abb
{
    top: 0px;
    width: 54px;
    height: 28px;
    background: url("./img/btn_abb.bmp");
}
#screen #state_bar #btn_user
{
    width: 28px;
    height: 28px;
    background: url("./img/btn_ope.bmp");
}
#screen #state_bar #btn_info
{
    display: inline-flex;
    flex-wrap:wrap;
    width: 282px;
    height: 28px;
    background: url("./img/statebar.bmp"); 
}

#screen #state_bar #btn_info *
{
    width:          48%; 
    font-size:      12px;
    line-height:    12px;
    transform:      scale(0.85);
}

#screen #state_bar #btn_close
{    
    width: 28px;
    height: 28px;
    background: url("./img/btn_quit.bmp");
}

#screen #main_menu
{
    z-index: 9999;
    position: absolute; 
    left: 0px;
    top: 30px;
    width: 400px;
    height: 240px;
    padding: 0px;
    margin: 0px;
    /* background-color: red; */
    background: url("./img/menuView_n.bmp") 0px 0px no-repeat; 
}

#screen #short_menu
{
    z-index: 9;
    position: absolute; 
    left: 350px;
    top: 40px;
    width: 50px;
    height: 230px;
    padding: 0px;
    margin: 0px;
    background-color: whitesmoke;
    /* background: url("./img/menuView_n.bmp") 0px 0px no-repeat;  */
}

#screen .short_menu_sub
{
    z-index: 9;
    position: absolute; 
    left: 200px;
    top: 40px;
    width: 150px;
    height: 230px;
    padding: 0px;
    margin: 0px;
    background-color: whitesmoke;
    border: 2px solid black;
}

#screen .short_menu_sub button
{
    margin-left: 56px;
    margin-top: 1px;
    width: 36px;
    height: 34px;
}

#screen .short_menu_sub button:active
{
    border: 2px solid  blue;
}

#screen .short_menu_sub button[checked='true']
{
    border: 2px solid  blue;
}

#screen #short_menu_sub5 button
{
    margin-left: 2px;
    margin-top: 1px;
    width: 36px;
    height: 34px;
}
#screen #short_menu_sub2 #short_menu_sub2_btn6
{
    margin-left: 40px;
    width: 70px;
    height: 20px;
}


#screen #short_menu button
{
    margin-left: 6px;
    margin-top: 1px;
    width: 36px;
    height: 34px;
}

#screen #short_menu #short_menu_btn1
{
    background: url("./img/3-07.bmp");
}
#screen #short_menu #short_menu_btn2
{
    background: url("./img/2-05.bmp");
}
#screen #short_menu #short_menu_btn3
{
    background: url("./img/3-09.bmp");
}
#screen #short_menu #short_menu_btn4
{
    background: url("./img/3-10.bmp");
}
#screen #short_menu #short_menu_btn5
{
    background: url("./img/3-11.bmp");
}
#screen #short_menu #short_menu_btn6
{
    background: url("./img/3-12.bmp");
}

#screen #main_menu .main_menu_item
{
    width:  170px;
    height: 24px;
    position: absolute;
    margin: 0px;
    padding: 0px;
    list-style-type:none;
}

#screen #main_menu .main_menu_item#menu_1001
{
    left: 14px;
    top : 4px;
    background-position:  -14px -4px;
}

#screen #main_menu .main_menu_item#menu_1001:hover
{
    background: url("./img/menuView_p.bmp") -14px -4px no-repeat
}

#screen #main_menu .main_menu_item#menu_1002
{
    left: 14px;
    top : 30px;
    background-position:  -14px -30px;
}

#screen #main_menu .main_menu_item#menu_1002:hover
{
    background: url("./img/menuView_p.bmp") -14px -30px no-repeat
}

#screen #main_menu .main_menu_item#menu_1003
{
    left: 14px;
    top : 56px;
    background-position:  -14px -56px;
}

#screen #main_menu .main_menu_item#menu_1003:hover
{
    background: url("./img/menuView_p.bmp") -14px -52px no-repeat
}

#screen #main_menu .main_menu_item#menu_1004
{
    left: 14px;
    top : 82px;
    background-position:  -14px -82px;
}

#screen #main_menu .main_menu_item#menu_1004:hover
{
    background: url("./img/menuView_p.bmp") -14px -82px no-repeat
}

#screen #main_menu .main_menu_item#menu_1005
{
    left: 14px;
    top : 108px;
    background-position:  -14px -108px;
}

#screen #main_menu .main_menu_item#menu_1005:hover
{
    background: url("./img/menuView_p.bmp") -14px -108px no-repeat
}

#screen #main_menu .main_menu_item#menu_1006
{
    left: 14px;
    top : 134px;
    background-position:  -14px -1324px;
}

#screen #main_menu .main_menu_item#menu_1006:hover
{
    background: url("./img/menuView_p.bmp") -14px -134px no-repeat
}

#screen #main_menu .main_menu_item#menu_1007
{
    left: 184px;
    top : 4px;
    background-position:  -184px -4px;
}

#screen #main_menu .main_menu_item#menu_1007:hover
{
    background: url("./img/menuView_p.bmp") -184px -4px no-repeat
}

#screen #main_menu .main_menu_item#menu_1008
{
    left: 184px;
    top : 30px;
    background-position:  -184px -30px;
}

#screen #main_menu .main_menu_item#menu_1008:hover
{
    background: url("./img/menuView_p.bmp") -184px -30px no-repeat
}

#screen #main_menu .main_menu_item#menu_1009
{
    left: 184px;
    top : 56px;
    background-position:  -184px -56px;
}

#screen #main_menu .main_menu_item#menu_1009:hover
{
    background: url("./img/menuView_p.bmp") -184px -52px no-repeat
}

#screen #main_menu .main_menu_item#menu_1010
{
    left: 184px;
    top : 82px;
    background-position:  -184px -82px;
}

#screen #main_menu .main_menu_item#menu_1010:hover
{
    background: url("./img/menuView_p.bmp") -184px -82px no-repeat
}

#screen #main_menu .main_menu_item#menu_1011
{
    left: 184px;
    top : 108px;
    background-position:  -184px -108px;
}

#screen #main_menu .main_menu_item#menu_1011:hover
{
    background: url("./img/menuView_p.bmp") -184px -108px no-repeat
}

#screen #main_menu .main_menu_item#menu_1012
{
    left: 184px;
    top : 134px;
    background-position:  -184px -134px;
}

#screen #main_menu .main_menu_item#menu_1012:hover
{
    background: url("./img/menuView_p.bmp") -184px -134px no-repeat
}

#screen #main_view
{
    position:absolute;
    left: 0px;
    top: 30px;
    width: 400px;
    height: 240px;
    padding: 0px;
    margin: 0px;
    /* display: none; */
}

#screen #main_view .taskview
{
    width: 100%;
    height: 100%;
    background-color: white;
}

#screen #main_view .taskview_title
{
    width: 100%;
    height: 20px; 
    border-bottom: 1px solid gray;
}

#screen #main_view .taskview_title #tv_title_text
{
    font-size: 13px;
}

#screen #main_view legend
{
    font-size: xx-small;
}

#screen #main_view .taskview_client
{
    width: 100%;
    height: calc(100% - 44px);
}

#screen #main_view #ABB_TASK_CONTROL_PANEL .taskview_client
{
    height: calc(100% - 24px);
}

#screen #main_view .taskview_client[target]
{
    width: 100%;
    height: 100%;
}

#screen #main_view .taskview_client *
{
    font-size: 12px;
}

#screen #main_view .taskview_client .taskview_client_top_tabs
{
    width: 100%;
}
#screen #main_view .taskview_client .taskview_client_top_tabs button
{
    width: 130px;
}


#screen #main_view .taskview_client .box44
{
    border: 1px solid gray;
    width:  100%;
    height: calc(100% - 44px);
}
#screen #main_view .taskview_client .box64
{
    border: 1px solid rgb(128, 128, 128);
    width:  100%;
    height: calc(100% - 64px);
}

#screen #main_view .taskview_client .box0
{
    border: 1px solid gray;
    width:  100%;
    height: 100%;
}
#screen #main_view .taskview_client .box80
{
    border: 1px solid gray;
    width:  100%;
    height: calc(100% - 80px);
}
#screen #main_view .taskview_client .canvasbox
{
    border: 1px solid gray;
    width:  calc(100% - 2px);
    height: calc(100% - 20px);
    overflow: auto;
    /* position: relative; */
}
#screen #main_view #ABB_TASK_PRODUCTION_WINDOW .taskview_client .canvasbox
{
    border: 1px solid gray;
    width:  calc(100% - 2px);
    height: calc(100% - 0px);
    overflow: auto;
    /* position: relative; */
}


#screen #main_view #ABB_TASK_SUBVIEW_EDIT_EXP .taskview_client label
{
    display:inline-block;
    width:  180px;
}


#screen #main_view .taskview_client label.lab3
{
    color: blue;
}
#screen #main_view .taskview_client .instEditDiv
{
    border: 1px solid gray;
    width:  calc(100% - 2px);
    height: 40px;
    overflow: auto;
}

#screen #main_view .taskview_client .instEditDiv #instCanvas
{
    /* background-color:rgb(191, 151, 98); */
    border: 1px solid blue;
}

#screen #main_view .taskview_client .tabDiv
{
    border: 1px solid gray;
    width:  100%;
    height: 20px;
    overflow: auto;
    /* position: relative; */
}

#screen #main_view .taskview_client .tabDiv button
{
    border: 1px solid black;
    background-color: darkgray;
    width:  calc(50% - 2px);
    height: 100%;
}

#screen #main_view .taskview_client .box110
{
    width:  100%;
    height: 94px;
}

#screen #main_view .taskview_client .tabDiv button:hover
{
    background-color: whitesmoke;
}

#screen #main_view .taskview_client .tabDiv button[checked='true']
{
    background-color: whitesmoke;
}

#screen #main_view .taskview_client .progEditFloatBox
{
    position:absolute;
    border: 1px solid black;
    background-color: white;
    width: 160px;
    height: 174px;
    top:40px;
    left: 240px;
    display:none;
}

#screen #main_view .taskview_client .progEditFloatBox button
{ 
    width: 48%;
    height: 14px;
    text-align: left;;
    background-color: darkgray;
}

#screen #main_view .taskview_client .progEditFloatBox button:hover
{ 
    background: SeaGreen;
}

#screen #main_view .taskview_client .progEditFloatBox button.btnInst
{ 
    width: 48%;
    height: 16px;
    font-size: 12px;
    margin-bottom: 2px;
    text-align: left;;
    border: 1px solid SteelBlue ;
    background-color: whitesmoke;
}
#screen #main_view .taskview_client .progEditFloatBox button.btnInst:hover
{ 
    background-color: lightgray;
}
#screen #main_view .taskview_client .progEditFloatBox button.btn_edit_cmd
{ 
    font-size: 12px;
    width: 48%;
    height: 20px;
    text-align: left;
    padding-left:0px;
    margin-bottom: 1px;
    border: 1px solid SteelBlue ;
    background-color: whitesmoke;
    /* color: red; */
}

#screen #main_view .taskview_client .progEditFloatBox button.btn_edit_cmd:hover
{ 
    background-color: lightgray;
}

#screen #main_view .taskview_client .progEditFloatBox button.btnInst2
{ 
    width: 48%;
    height: 20px;
    text-align:center;
    border: 2px solid SteelBlue ;
    background-color: whitesmoke;
}
#screen #main_view .taskview_client .progEditFloatBox button.btnInst2:hover
{ 
    background-color: lightgray;
}

#screen #main_view .taskview_client .progEditFloatBox #curInstGroup
{    
    text-align: center;
    width: 96%;
    margin-left: 3px;
}

#screen #main_view .taskview_client .client_table
{
    /*设置相邻单元格的边框间的距离*/
    border-spacing: 0;
    width: 100%;
}
#screen #main_view .taskview_client .client_table th
{
    background-image: linear-gradient(whitesmoke, LightGrey, whitesmoke);
    border: 1px solid lightgray;  
    display: inline-block;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
}


#screen #main_view .taskview_client .client_table tbody 
{
    display: inline-block;
    width: 100%;
    overflow: auto;
    max-height: 130px;  
}

#screen #main_view .taskview_client .box0 .client_table tbody 
{
    max-height: 200px;
    /* background-color: red; */
}

#screen #main_view .taskview_client .box80 .client_table tbody 
{
    max-height: 94px;
    /* background-color: red; */
}

#screen #main_view .taskview_client .client_table thead th:last-child
{
    margin-right: 16px;
}


#screen #main_view .taskview_client .client_table  tr
{
    color: green;
    display: flex;
    width: 100%;
    height: 20px;
}

#screen #main_view .taskview_client .client_table tr:active
{
    background-color: LightSeaGreen ;
    color: white;
}

#screen #main_view .taskview_client .client_table tr[checked='true']
{
    background-color: LightSeaGreen ;
    color: white;
}

#screen #main_view .taskview_client .client_table td
{
    color: inherit;
    border: 1px solid lightgray;
    display: inline-block;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;

    text-overflow: ellipsis;
}
#screen #main_view .taskview_client .client_table td:nth-child(2)
{
    max-width: 160px;
}

#screen #main_view .taskview_client .client_table  tr[editable='false'] td
{
    color: gray;
}

#screen #main_view .taskview_client .client_grid {
    width:  100%;
    height: 100%;
    /* background-color: red; */
    overflow: auto;  
}
#screen #main_view .taskview_client .client_grid label
{
    display: inline-block;
    /* background-color: blue; */
    width: 130px;
}
#screen #main_view .taskview_client .client_grid label:hover
{
    background-color: LightSeaGreen;
}
#screen #main_view .taskview_client .client_grid label[checked='true']
{
    background-color: SeaGreen ;
    color: white;
}

#screen #main_view .taskview#manu_ope .taskview_client
{
    display: flex; 
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_COORDINATION_SYSTEM .taskview_client .box44 
{
    display: flex; 
    justify-content:space-around;
    align-items: center;
}
#screen #main_view .taskview#ABB_TASK_SUBVIEW_ACTIVE_MODE .taskview_client .box44 
{
    display: flex; 
    justify-content:space-around;
    align-items: center;
}
#screen #main_view .taskview#ABB_TASK_SUBVIEW_INCREMENT .taskview_client .box44 
{
    display: flex; 
    justify-content:space-around;
    align-items: center;
}
#screen #main_view .taskview#ABB_TASK_SUBVIEW_COORDINATION_SYSTEM .taskview_client button
{
    width:  46px;
    height: 41px;
}
#screen #main_view .taskview#ABB_TASK_SUBVIEW_ACTIVE_MODE .taskview_client button
{
    width:  46px;
    height: 41px;
}
#screen #main_view .taskview#ABB_TASK_SUBVIEW_INCREMENT .taskview_client button
{
    width:  36px;
    height: 32px;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_COORDINATION_SYSTEM .taskview_client button:hover
{
    background-position: 0px -41px;
}
#screen #main_view .taskview#ABB_TASK_SUBVIEW_ACTIVE_MODE .taskview_client button:hover
{
    background-position: 0px -41px;
}
#screen #main_view .taskview#ABB_TASK_SUBVIEW_INCREMENT .taskview_client button:hover
{
    background-position: 0px -32px;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_INCREMENT .taskview_client button[checked='true']
{
    background-position: 0px -32px;
    border: 2px solid blue;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_ACTIVE_MODE .taskview_client button[checked='true']
{
    background-position: 0px -41px;
    border: 2px solid blue;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_COORDINATION_SYSTEM .taskview_client button[checked='true']
{
    background-position: 0px -41px;
    border: 2px solid blue;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_COORDINATION_SYSTEM .taskview_client button#btn_world_cs
{
    background-image: url('./img/1-07.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_COORDINATION_SYSTEM .taskview_client button#btn_base_cs
{
    background-image: url('./img/1-08.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_COORDINATION_SYSTEM .taskview_client button#btn_tool_cs
{
    background-image: url('./img/1-09.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_COORDINATION_SYSTEM .taskview_client button#btn_part_cs
{
    background-image: url('./img/1-10.bmp') ;
}
#screen #main_view .taskview#ABB_TASK_SUBVIEW_ACTIVE_MODE .taskview_client button#btn_act_mode_slu
{
    background-image: url('./img/1-03.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_ACTIVE_MODE .taskview_client button#btn_act_mode_rbt
{
    background-image: url('./img/1-04.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_ACTIVE_MODE .taskview_client button#btn_act_mode_line
{
    background-image: url('./img/1-05.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_ACTIVE_MODE .taskview_client button#btn_act_mode_reloc
{
    background-image: url('./img/1-06.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_INCREMENT .taskview_client button#btn_increment_0
{
    background-image: url('./img/2-05.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_INCREMENT .taskview_client button#btn_increment_1
{
    background-image: url('./img/2-06.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_INCREMENT .taskview_client button#btn_increment_2
{
    background-image: url('./img/2-07.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_INCREMENT .taskview_client button#btn_increment_3
{
    background-image: url('./img/2-08.bmp') ;
}

#screen #main_view .taskview#ABB_TASK_SUBVIEW_INCREMENT .taskview_client button#btn_increment_4
{
    background-image: url('./img/2-09.bmp') ;
}

#screen #main_view .taskview#manu_ope #manu_ope_left 
{
    width: 250px;
}

#screen #main_view .taskview#manu_ope #manu_ope_left label 
{
    background-color: white;
    color: green;
    float: left;
}
#screen #main_view .taskview#manu_ope #manu_ope_left button 
{
    padding: 0px;
    float: right;
    background-color: white;
    color: green;
    width: 100px; 
    text-align: left;
}

#screen #main_view .taskview#manu_ope #manu_ope_left button:hover 
{
    background-color: blue;
}

#screen #main_view .taskview#manu_ope #manu_ope_right 
{
    width: 150px; 
}

#screen #main_view .taskview#manu_ope #manu_ope_right *
{
    transform: scale(0.9);
}

#screen #main_view .taskview#manu_ope #manu_ope_right .value
{
    float: right;
    white-space: pre-wrap;
}

#screen #main_view .taskview#manu_ope #manu_ope_right #manu_ope_right_top
{
    margin-left: -14px;
    margin-top: -16px;
}
#screen #main_view .taskview#manu_ope #manu_ope_right #manu_ope_right_btm
{
    margin-left: -14px;
    margin-top: -22px;
}

#screen #main_view .taskview#manu_ope #manu_ope_right #act_mode_img
{
    width: 60px;
    height: 40px;
    background: url("./img/1013.bmp") 0px -40px no-repeat; 
}

#screen #main_view .taskview#manu_ope #manu_ope_right #act_mode_img[mode="1"]
{
    background: url("./img/1013.bmp") 0px -40px no-repeat; 
}
#screen #main_view .taskview#manu_ope #manu_ope_right #act_mode_img[mode="2"]
{
    background: url("./img/1013.bmp") 0px -80px no-repeat; 
}
#screen #main_view .taskview#manu_ope #manu_ope_right #act_mode_img[mode="3"]
{
    background: url("./img/1013.bmp") 0px 0px no-repeat; 
}
#screen #main_view .taskview#manu_ope #manu_ope_right #act_mode_img[mode="4"]
{
    background: url("./img/1013.bmp") 0px 0px no-repeat; 
}
#screen #main_view .taskview_menubar
{
    width: 100%;
    height: 24px;
    background-color: darkgray;
}

#screen #tab_bar
{
    display: flex;
    position:absolute;
    left: 0px;
    top: 271px;
    width: 400px;
    height: 28px;
    /* background-color: gray;  */
}
#screen #tab_bar_content
{
    left: 0px;
    top: 0px;
    width: calc( 400px - 56px);
    height: 28px;
}

#screen #tab_bar_content .tab
{
    width: 54px;
    height: 28px;
}
#screen #tab_bar_content .tab[checked='true']
{
    background-position: 0px -28px;
}

#screen #tab_bar #btn_hot
{
    float: right;
    margin-right: 0px;
    width: 56px;
    height: 28px;
    background: url("./img/btn_short_base.bmp");
    /* background: url("./img/btn_short.bmp"); */
}

#screen #tab_bar #btn_hot[opeMode='3']
{
    background: url("./img/btn_short.bmp");
}
#screen #tab_bar #btn_hot[opeMode='4']
{
    background: url("./img/btn_short.bmp");
}

#screen #tab_bar #btn_hot #btn_hot_img1
{
    margin-right: 0px;
    width: 20px;
    height: 20px;
    background: url("./img/1-03_1.bmp");
}
#screen #tab_bar #btn_hot #btn_hot_img1[actMode='2']
{
    background: url("./img/1-04_1.bmp");
}
#screen #tab_bar #btn_hot #btn_hot_img1[actMode='3']
{
    background: url("./img/1-05_1.bmp");
}
#screen #tab_bar #btn_hot #btn_hot_img1[actMode='4']
{
    background: url("./img/1-06_1.bmp");
}

#screen #tab_bar #btn_hot #btn_hot_img2
{
    margin-right: 0px;
    width: 20px;
    height: 20px;
    background: url("./img/2-05_1.bmp");
}

#screen #tab_bar #btn_hot #btn_hot_img2[incrementMode='1']
{
    background: url("./img/2-06_1.bmp");
}

#screen #tab_bar #btn_hot #btn_hot_img2[incrementMode='2']
{
    background: url("./img/2-07_1.bmp");
}
#screen #tab_bar #btn_hot #btn_hot_img2[incrementMode='3']
{
    background: url("./img/2-08_1.bmp");
}
#screen #tab_bar #btn_hot #btn_hot_img2[incrementMode='4']
{
    background: url("./img/2-09_1.bmp");
}

#manubox
{
    display: inline-block;
    position:relative;
    width: 200px;
    height: 100%;
}
#opePanel[showMode='1']  #manubox
{
    width: 60px;
    height: 100%;
}

#manubox button{
    background:  url("./img/opepanel_n.jpg"); 
}
#manubox button:active{
    background:  url("./img/opepanel_p.png")  
}

#manubox button[state='n']{
    background:  url("./img/opepanel_n.jpg")  
}
#manubox button[state='h']{
    background:  url("./img/opepanel_n.jpg")  
}
#manubox button[state='p']{
    background:  url("./img/opepanel_p.png")  
}
#manubox button[state='d']{
    background:  url("./img/opepanel_n.jpg")  
}

#opePanel[showMode='1'] #manubox button{
    background:  url("./img/opepanel_simple_n.png"); 
}
#opePanel[showMode='1'] #manubox button:active{
    background:  url("./img/opepanel_simple_p.png")  
}

#opePanel[showMode='1'] #manubox button[state='n']{
    background:  url("./img/opepanel_simple_n.png")  
}
#opePanel[showMode='1'] #manubox button[state='h']{
    background:  url("./img/opepanel_simple_n.png")  
}
#opePanel[showMode='1'] #manubox button[state='p']{
    background:  url("./img/opepanel_simple_p.png")  
}
#opePanel[showMode='1'] #manubox button[state='d']{
    background:  url("./img/opepanel_simple_n.png")  
}

#manubox button#btn_hotkey_1
{
    position:absolute;
    left: 14px;
    top:  58px;
    width: 30px;
    height: 30px;
    background-position: -448px -59px;
}

#manubox button#btn_hotkey_2
{
    position:absolute;
    left: 37px;
    top:  29px;
    width: 30px;
    height: 30px;
    background-position: -471px -29px;
}
#manubox button#btn_hotkey_3
{
    position:absolute;
    left: 59px;
    top:  58px;
    width: 30px;
    height: 30px;
    background-position: -493px -59px;
}
#manubox button#btn_hotkey_4
{
    position:absolute;
    left: 37px;
    top:  88px;
    width: 30px;
    height: 30px;
    background-position: -471px -89px;
}

#opePanel[showMode='1'] #manubox button#btn_hotkey_1{
    display: none;
}
#opePanel[showMode='1'] #manubox button#btn_hotkey_2{
    display: none;
}
#opePanel[showMode='1'] #manubox button#btn_hotkey_3{
    display: none;
}
#opePanel[showMode='1'] #manubox button#btn_hotkey_4{
    display: none;
}

#manubox button#btn_emergency
{
    position:absolute;
    left: 151px;
    top:  0px;
    width: 50px;
    height: 80px;
    background-position: -585px -0px;
}

#opePanel[showMode='1'] #manubox button#btn_emergency
{
    position:absolute;
    left: 0px;
    top:  0px;
    width: 60px;
    height: 50px;
    background-position: -400px -0px;
}

#manubox button#btn_safe
{    
    position:absolute;
    left: 111px;
    top:  280px;
    width: 90px;
    height: 70px;
    background-position: -545px -280px;
}

#opePanel[showMode='1'] #manubox button#btn_safe
{
    position:absolute;
    left: 0px;
    bottom:  0px;
    width: 60px;
    height: 20px;
    background-position: -400px -280px;
}


#manubox button#btn_switch_mac
{
    display: none;
}

#manubox button#btn_switch_act_mode
{
    position:absolute;
    left: 5px;
    top:  144px;
    width: 34px;
    height: 34px;
    background-position: -439px -144px;
}

#opePanel[showMode='1'] #manubox button#btn_switch_act_mode
{
    left: 0px;
    top:  52px;
    width: 30px;
    height: 30px;
    background-position: -400px -52px;
}

#manubox button#btn_switch_joint_mode
{
    position:absolute;
    left: 5px;
    top:  179px;
    width: 34px;
    height: 34px;
    background-position: -439px -179px;
}

#opePanel[showMode='1'] #manubox button#btn_switch_joint_mode
{
    left: 30px;
    top:  52px;
    width: 30px;
    height: 30px;
    background-position: -430px -52px;
}

#manubox button#btn_switch_inc
{
    position:absolute;
    left: 5px;
    top:  214px;
    width: 34px;
    height: 34px;
    background-position: -439px -214px;
}

#opePanel[showMode='1'] #manubox button#btn_switch_inc
{
    left: 0px;
    top:  82px;
    width: 30px;
    height: 30px;
    background-position: -400px -82px;
}

#manubox button#btn_run
{
    position:absolute;
    left: 37px;
    top:  240px;
    width: 30px;
    height: 30px;
    background-position: -471px -240px;
}

#opePanel[showMode='1'] #manubox button#btn_run
{
    left: 30px;
    top:  216px;
    width: 30px;
    height: 30px;
    background-position: -430px -216px;
}

#manubox button#btn_hold
{
    position:absolute;
    left: 37px;
    top:  300px;
    width: 30px;
    height: 30px;
    background-position: -471px -300px;
}

#opePanel[showMode='1'] #manubox button#btn_hold
{
    left: 0px;
    top:  216px;
    width: 30px;
    height: 30px;
    background-position: -400px -216px;
}

#manubox button#btn_go
{
    position:absolute;
    left: 59px;
    top:  270px;
    width: 30px;
    height: 30px;
    background-position: -493px -270px;
}

#opePanel[showMode='1'] #manubox button#btn_go
{
    left: 30px;
    top:  244px;
    width: 30px;
    height: 30px;
    background-position: -430px -244px;
}

#manubox button#btn_back
{
    position:absolute;
    left: 17px;
    top:  270px;
    width: 30px;
    height: 30px;
    background-position: -451px -270px;
    
}

#opePanel[showMode='1'] #manubox button#btn_back
{
    left: 0px;
    top:  244px;
    width: 30px;
    height: 30px;
    background-position: -400px -244px;
}


#manubox button#btn_left
{
    position:absolute;
    left: 63px;
    top:  144px;
    width: 28px;
    height: 64px;
    background-position: -497px -144px;
}

#opePanel[showMode='1'] #manubox button#btn_left
{
    left: 0px;
    top:  121px;
    width: 30px;
    height: 30px;
    background-position: -400px -121px;
}

#manubox button#btn_right
{
    position:absolute;
    left: 149px;
    top:  144px;
    width: 36px;
    height: 64px;
    background-position: -583px -144px;
}

#opePanel[showMode='1'] #manubox button#btn_right
{
    left: 30px;
    top:  121px;
    width: 30px;
    height: 30px;
    background-position: -430px -121px;
}

#manubox button#btn_top
{
    position:absolute;
    left: 91px;
    top:  114px;
    width: 64px;
    height: 28px;
    background-position: -525px -114px;
}

#opePanel[showMode='1'] #manubox button#btn_top
{
    left: 0px;
    top:  149px;
    width: 30px;
    height: 30px;
    background-position: -400px -149px;
}

#manubox button#btn_bottom
{
    position:absolute;
    left: 91px;
    top:  205px;
    width: 64px;
    height: 28px;
    background-position: -525px -205px;
}

#opePanel[showMode='1'] #manubox button#btn_bottom
{
    left: 30px;
    top:  149px;
    width: 30px;
    height: 30px;
    background-position: -430px -149px;
}

#manubox button#btn_cw
{
    position:absolute;
    left: 106px;
    top:  234px;
    width: 64px;
    height: 20px;
    background-position: -540px -234px;
}

#opePanel[showMode='1'] #manubox button#btn_cw
{
    left: 0px;
    top:  178px;
    width: 30px;
    height: 30px;
    background-position: -400px -178px;
}

#manubox button#btn_ccw
{
    position:absolute;
    left: 106px;
    top:  98px;
    width: 64px;
    height: 17px;
    background-position: -540px -98px;
}

#opePanel[showMode='1'] #manubox button#btn_ccw
{
    left: 30px;
    top:  178px;
    width: 30px;
    height: 30px;
    background-position: -430px -178px;
}

.taskview_menubar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    /* background: red; */
    display: flex;
    justify-content: center;
  }

  .taskview_menubar * {
    margin: 0px;
    padding: 0px;
    border: 0;
    box-sizing: border-box;
    vertical-align: baseline;
  }
  .taskview_menubar .center {
    width: 100%;
  }
  .taskview_menubar .ul-list {
    display: flex;
    list-style-type:none;
  }
  .taskview_menubar .ul-list > li {
    flex: 1;
    /* border-right: 1px solid black; */
    position: relative;
  }
  .taskview_menubar .ul-list > li :active{
      background-color: white;
    border: 1px solid black;
  }

  .taskview_menubar .ul-list > li:last-child {
    border-right: none;
  }
  .taskview_menubar .ul-list > li > a {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
    color: black;
    background: gray;
  }
  .taskview_menubar .ul-list > li > span {
    color: black;
    font-size: 12px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: gray;
  }
  .taskview_menubar .ul-list > li:hover .ol-list {
    display: block;
    list-style-type:none;
  }
  .taskview_menubar .ol-list {
    display: none;
    position: absolute;
    bottom: 24px;
    left: 0;
    z-index: 9999;
    background: gray;
    width: 100%;
  }
  .taskview_menubar .ol-list > li > a {
    font-size: 12px;
    text-decoration: none;
    color: black;
    height: 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #222;
    justify-content: center;
  }
  .taskview_menubar .ol-list > li > a:hover {
    background: white;
    border: 1px solid black;
  }

  .softKey
  {
    position: relative;
    width: 400px;
    height: 150px;

  }
    .softKey .softKeyBtn
    {
        position: absolute;
        width: 24px;
        height: 24px;   
        /* background-color: aquamarine; */

        background:  url("./img/keyboard_n.bmp")  ;
        background-position: -24px -5px; 
    }

    .softKey .softKeyBtn:active
    {
        background:  url("./img/keyboard_p.bmp")   
    }

    .softKey  .softKeyBtn[id='1']
    {
        left: 24px;
        top: 5px;
        background-position: -24px -5px;
    }
    .softKey .softKeyBtn[id='2']
    {
        left: 52px;
        top: 5px;
        background-position: -52px -5px;
    }
    .softKey .softKeyBtn[id='3']
    {
        left: 81px;
        top: 5px;
        background-position: -81px -5px;
    }
    .softKey .softKeyBtn[id='4']
    {
        left: 109px;
        top: 5px;
        background-position: -109px -5px;
    }
    .softKey .softKeyBtn[id='5']
    {
        left: 137px;
        top: 5px;
        background-position: -137px -5px;
    }
    .softKey .softKeyBtn[id='6']
    {
        left: 166px;
        top: 5px;
        background-position: -166px -5px;
    }
    .softKey .softKeyBtn[id='7']
    {
        left: 194px;
        top: 5px;
        background-position: -194px -5px;
    }
    .softKey .softKeyBtn[id='8']
    {
        left: 222px;
        top: 5px;
        background-position: -222px -5px;
    }
    .softKey .softKeyBtn[id='9']
    {
        left: 250px;
        top: 5px;
        background-position: -250px -5px;
    }
    .softKey .softKeyBtn[id='0']
    {
        left: 279px;
        top: 5px;
        background-position: -279px -5px;
    }
    .softKey .softKeyBtn[id='-']
    {
        left: 307px;
        top: 5px;
        background-position: -307px -5px;
    }
    .softKey .softKeyBtn[id='=']
    {
        left: 335px;
        top: 5px;
        background-position: -335px -5px;
    }
    .softKey .softKeyBtn[id='']
    {
        left: 364px;
        top: 5px;
        width: 30px;
        background-position: -364px -5px;
    }
    .softKey .softKeyBtn[id='q']
    {
        left: 59px;
        top: 34px;
        background-position: -59px -34px;
    }
    .softKey .softKeyBtn[id='w']
    {
        left: 87px;
        top: 34px;
        background-position: -87px -34px;
    }
    .softKey .softKeyBtn[id='e']
    {
        left: 115px;
        top: 34px;
        background-position: -115px -34px;
    }
    .softKey .softKeyBtn[id='r']
    {
        left: 143px;
        top: 34px;
        background-position: -143px -34px;
    }
    .softKey .softKeyBtn[id='t']
    {
        left: 171px;
        top: 34px;
        background-position: -171px -34px;
    }
    .softKey .softKeyBtn[id='y']
    {
        left: 199px;
        top: 34px;
        background-position: -199px -34px;
    }
    .softKey .softKeyBtn[id='u']
    {
        left: 227px;
        top: 34px;
        background-position: -227px -34px;
    }
    .softKey .softKeyBtn[id='i']
    {
        left: 254px;
        top: 34px;
        background-position: -254px -34px;
    }
    .softKey .softKeyBtn[id='o']
    {
        left: 282px;
        top: 34px;
        background-position: -282px -34px;
    }
    .softKey .softKeyBtn[id='p']
    {
        left: 310px;
        top: 34px;
        background-position: -310px -34px;
    }
    .softKey .softKeyBtn[id='[']
    {
        left: 338px;
        top: 34px;
        background-position: -338px -34px;
    }
    .softKey .softKeyBtn[id=']']
    {
        left: 366px;
        top: 34px;
        background-position: -366px -34px;
    }
    .softKey .softKeyBtn[id='caps']
    {
        left: 9px;
        top: 62px;
        width: 40px;
        background-position: -9px -62px;
    }
    .softKey .softKeyBtn[id='a']
    {
        left: 54px;
        top: 62px;
        background-position: -54px -62px;
    }
    .softKey .softKeyBtn[id='s']
    {
        left: 82px;
        top: 62px;
        background-position: -82px -62px;
    }
    .softKey .softKeyBtn[id='d']
    {
        left: 110px;
        top: 62px;
        background-position: -110px -62px;
    }
    .softKey .softKeyBtn[id='f']
    {
        left: 138px;
        top: 62px;
        background-position: -138px -62px;
    }
    .softKey .softKeyBtn[id='g']
    {
        left: 166px;
        top: 62px;
        background-position: -166px -62px;
    }
    .softKey .softKeyBtn[id='h']
    {
        left: 194px;
        top: 62px;
        background-position: -222px -62px;
    }
    .softKey .softKeyBtn[id='j']
    {
        left: 222px;
        top: 62px;
        background-position: -222px -62px;
    }
    .softKey .softKeyBtn[id='k']
    {
        left: 251px;
        top: 62px;
        background-position: -251px -62px;
    }
    .softKey .softKeyBtn[id='l']
    {
        left: 279px;
        top: 62px;
        background-position: -279px -62px;
    }
    .softKey .softKeyBtn[id=';']
    {
        left: 307px;
        top: 62px;
        background-position: -307px -62px;
    }
    .softKey .softKeyBtn[id='\'']
    {
        left: 335px;
        top: 62px;
        background-position: -335px -62px;
    }
    .softKey .softKeyBtn[id='+']
    {
        left: 366px;
        top: 62px;
        background-position: -366px -62px;
    }
    .softKey .softKeyBtn[id='shift']
    {
        left: 5px;
        top: 90px;
        width: 40px;
        background-position: -5px -90px;
    }
    .softKey .softKeyBtn[id='z']
    {
        left: 49px;
        top: 90px;
        background-position: -49px -90px;
    }
    .softKey .softKeyBtn[id='x']
    {
        left: 78px;
        top: 90px;
        background-position: -78px -90px;
    }
    .softKey .softKeyBtn[id='c']
    {
        left: 106px;
        top: 90px;
        background-position: -106px -90px;
    }
    .softKey .softKeyBtn[id='v']
    {
        left: 134px;
        top: 90px;
        background-position: -134px -90px;
    }
    .softKey .softKeyBtn[id='b']
    {
        left: 163px;
        top: 90px;
        background-position: -163px -90px;
    }
    .softKey .softKeyBtn[id='n']
    {
        left: 191px;
        top: 90px;
        background-position: -191px -90px;
    }
    .softKey .softKeyBtn[id='m']
    {
        left: 220px;
        top: 90px;
        background-position: -220px -90px;
    }
    .softKey .softKeyBtn[id=',']
    {
        left: 248px;
        top: 90px;
        background-position: -248px -90px;
    }
    .softKey .softKeyBtn[id='.']
    {
        left: 276px;
        top: 90px;
        background-position: -276px -90px;
    }
    .softKey .softKeyBtn[id='/']
    {
        left: 305px;
        top: 90px;
        background-position: -305px -90px;
    }
    .softKey .softKeyBtn[id='home']
    {
        left: 334px;
        top: 90px;
        width: 40px;
        background-position: -334px -90px;
    }
    .softKey .softKeyBtn[id='int']
    {
        left: 5px;
        top: 119px;
        width: 40px;
        background-position: -5px -119px;
    }
    .softKey .softKeyBtn[id='`']
    {
        left: 49px;
        top: 119px;
        background-position: -49px -119px;
    }
    .softKey .softKeyBtn[id='\\']
    {
        left: 78px;
        top: 119px;
        background-position: -78px -119px;
    }
    .softKey .softKeyBtn[id=' ']
    {
        left: 106px;
        top: 119px;
        width: 128px;
        background-position: -106px -119px;
    }
    .softKey .softKeyBtn[id='up']
    {
        left: 239px;
        top: 119px;
        background-position: -239px -119px;
    }
    .softKey .softKeyBtn[id='down']
    {
        left: 268px;
        top: 119px;
        background-position: -268px -119px;
    }
    .softKey .softKeyBtn[id='left']
    {
        left: 297px;
        top: 119px;
        background-position: -297px -119px;
    }
    .softKey .softKeyBtn[id='right']
    {
        left: 326px;
        top: 119px;
        background-position: -326px -119px;
    }
    .softKey .softKeyBtn[id='end']
    {
        left: 355px;
        top: 119px;
        width: 40px;
        background-position: -355px -119px;
    }

    /* #ABB_TASK_SUBVIEW_EDIT_EXP div.taskview_client
    {
        height: calc(100%-0px);
        background-color: blue;
    }  */
    #ABB_TASK_SUBVIEW_EDIT_EXP div.taskview_client .exp_div
    {
        width:370px;
        float:left;
        height:156px;
        background-color: green;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP div.taskview_client .box110 .client_grid
    {
        display: flex;
        flex-wrap: wrap ;
        align-items: flex-start ;
        align-content: flex-start;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP div.taskview_client .box110 .client_grid>*
    {
        flex-grow:1;
        flex-basis: 50%;
        width: 50%;
        height: 16px;
    }

    #ABB_TASK_SUBVIEW_EDIT_EXP #exp_btn_back
    {
        background:  url("./img/btn_l.png")  ;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP #exp_btn_front
    {
        background:  url("./img/btn_r.png")  ;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP #exp_btn_plus
    {
        background:  url("./img/btn_add.png")  ;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP #exp_btn_minus
    {
        background:  url("./img/btn_sub.png")  ;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP #exp_btn_barket
    {
        background:  url("./img/btn_p.png")  ;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP #exp_btn_barket_cancel
    {
        background:  url("./img/btn_pc.png")  ;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP .div_exp_btn
    {
        height:150px;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP .div_exp_btn button
    {
        width:26px;
        height:26px;
    }
    #ABB_TASK_SUBVIEW_EDIT_EXP .div_exp_btn button:active
    {
        background-position: -0 -26px;
    }