:root {
    --sta9: #ccc;
   }

.x-grid-row td, .x-grid-summary-row td {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
   }
   
   
   .w-fx {width:100px; float:'left'; margin:5px; border:1px solid #000;}
   
   
   #w-noti.t, #w-alm.t, .w-alm.t {
       position:absolute;
       z-index:999999;    
       left:50%;
       top:50px;
       width:400px;
       margin-left:-200px;    
   }
   
   #w-noti.r, #w-alm.r, .w-alm.r {
       position:absolute;
       z-index:999999;    
       right:10px;
       bottom:50px;
       width:250px;
   }
   
   #w-noti.b, #w-alm.b, .w-alm.b {
       position:absolute;
       z-index:999999;    
       left:50%;
       bottom:50px;
       width:400px;
   }
   
   #w-noti .msg, #w-alm .msg, .w-alm .msg {
       border-radius: 8px;
       -moz-border-radius: 8px;
       border: 2px solid #ccc;
       margin-top: 2px;
       padding: 10px 15px;
   }
   
   #w-noti .msg h3, #w-alm .msg h3, .w-alm .msg h3 {
       margin: 0 0 8px;
       font-weight: bold;
       font-size: 15px;
   }
   #w-noti .msg p {
       margin: 0;
   }
   
   
   .w-warning {background:orange; color:#fff; }
   .w-success {background:green; color:#fff; }
   .w-error {background:#ff0000; color:#fff; }
   .w-noti {background:#114499; color:#fff; }
   
   .w-alm-fx {background:#e28102; color:#fff;}
   .w-alm-stock {background:#2b8a43; color:#fff;}
   .w-alm-future {background:#2b548a; color:#fff;}
   
   .w-buy {background:#fbeeeb;}
   .w-sell {background:#deeaf7;}
   
   
   .w-stk-bg {background:#e6e9da; }
   .w-stk-win {border:1px solid skyblue; }
   
   .w-fx-bg {background:#caebd6;}
   .w-fx-win {border:1px solid darkblue; }
   
   .w-fut-bg {background:#faaae2;}
   .w-fut-win {border:1px solid rgb(90, 2, 53); }
   
   .w-btc-bg {background:#dfd1e9; }
   .w-btc-win {border:1px solid rgb(240, 191, 199); }
   
   .btnGYN {background:green; color:#fff; font-size:8pt; text-align:center;}
   
   
   .mytable { border-collapse:collapse; width:100%;}  
   .mytable th, .mytable td { border:1px solid rgb(146, 144, 144); }
   .mytable th {background-color: rgb(230, 231, 231);}
   .mytable td {text-align:'right'; padding:3px;}
   .mytable button {height:40px;}
   
   .w-dae:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
       background-color: yellow;
   }
   
   .w-dae:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
       background-color: rgb(150, 150, 70)
   }
   
   .w-nor:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
       background-color: rgb(220, 240, 210);
   }
   
   .w-nor:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
       background-color: rgb(180, 248, 170);
   }
   
   .w-che:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
       background-color: white;
   }
   
   /* .w-che:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
       background-color: rgb(148, 147, 147);
   } */
   
   tfoot .x-grid-row-summary td {position:-webkit-sticky;position:sticky;bottom:0px; background-color:skyblue !important; height:30px; border:solid 0 1px gray}
   tfoot .x-grid-row-summary .x-grid-cell {background-color:skyblue !important;}
   
   .up {color:#ff0000;}
   .dn {color:#0000ff;}

   .xx-red {background: darkred;}

   .bd-red {border:1px solid red;}

   span.key {font-weight: bold; color:#e28102}

   .x-window-header-default {
    background-color:rgb(47, 33, 235);
    border-color: rgb(47, 33, 235);
   }

   .x-tit { font-weight: bold; font-size:15px; color:navy;}

   .x-feed {width:100%; max-height: 80px; overflow-y:auto;  overflow-x:hidden;}
   .xx-ctx {max-width: 250px; max-height:50px; word-break: break-all; word-wrap: break-word; overflow-y:auto; overflow-x:hidden;}


   
   .state1 {
    background: #c7f3d2;
   }

   .state2 {
    background: #d3f3c7;
   }

   .state3 {
    background: #e6f3c7;
   }

   .state4 {
    background: #f3e1c7;
   }

   .state5 {
    background: #f3d1c7;
   }

   .state6 {
    background: #c7dcf3;
   }


   .state7 {
    background: #d3c7f3;
   }

   .state8 {
    background: #f3c7ed;
   }

   .state9 {
    background: var(--sta9);
   }

.state1:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
    background-color: #c7f3d2
}

.state1:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
    background-color: #c7f3d2
}

.state2:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
    background-color:#d3f3c7;
}

.state2:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
    background-color: #d3f3c7;
}

.state3:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
    background-color: #e6f3c7;
}

.state3:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
    background-color:  #e6f3c7;
}

.state4:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
    background-color:  #f3e1c7;
}

.state4:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
    background-color:  #f3e1c7;
}

.state5:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
    background-color: #f3d1c7;
}

.state9:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
    background-color: var(--sta9);
}

/* Admin toolbar logo slot */
.menu-logo {
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    font-weight: bold; 
    font-size:18px; 
    color:#114499;
}

.menu-logo::before {
    content: '';
    height: 24px; /* match toolbar height */
    width: 24px; /* reserve space for logo */
    margin-right: 4px;
    background-image: url('../images/icon.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.state6:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
    background-color: #c7dcf3;
}

.state6:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
    background-color:  #c7dcf3;
}

.state7:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
    background-color: #d3c7f3;
}

.state7:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
    background-color: #d3c7f3;
}

.state8:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
    background-color: #f3c7ed;
}

.state8:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
    background-color:  #f3c7ed;
}

.state9:not(.x-grid-row-selected):not(.x-grid-row-over) .x-grid-cell {
    background-color: var(--sta9);
}

.state9:not(.x-grid-row-selected).x-grid-row-over .x-grid-cell {
    background-color: var(--sta9);
}