.XLPBack { position:absolute !important; width:100%; top:0; right:0; border:1px solid #bbb; border-radius:20px; }
.XLPBack:focus { outline: none !important; border-color:#555;  }
.XLPTitle { position:absolute !important; top:11px; right:55px; font-size:16px; color:#222; padding:5px 10px; opacity:0.4; }
/*.XLPTitle span { color:#f00; }*/
.XLPPic { position:absolute !important; width:28px; height:28px; top:14px; right:20px; opacity:0.8; }
.XLPPic img { position:absolute !important; width:100%; height:100%; }
.XLPPic svg { position:absolute !important; top:0; right:0; width:100%; height:100%; fill:#444; } 
.XError { position:absolute !important; height:28px; bottom:-22px; left:35px; color:rgba(255,255,255,0.9); font-size:13px; background-color:#d00; border-radius:100px; padding:6px 12px 5px 12px; transform:scale(0); }
.XWarning { background:#edcb02 url(../I/noise.png); color:#000; }
.XAccept { background:#076000 url(../I/noise.png); }
.XHelp { background:#4d4d4d url(../I/noise.png); color:#999; direction:ltr; }

.XTextBoxL, .XTextBoxLP, .XSpinner { position:relative; width:300px; height:52px; right:0; margin:0; /*flex-grow:1;*/ padding:12px 0; margin:36px 0 5px 0; margin-left:20px; }
.XTextBoxL .XLPBack, .XTextBoxLP .XLPBack, .XSpinner .XLPBack { height:56px; }
.XTextBoxL input, .XTextBoxLP input, .XSpinner input, .XSpinner .XSPResult { position:absolute; top:17px; right:65px; width:calc(100% - 120px); min-height:22px; background-color:transparent; font-size:18px; color:#333; font-family:DF; outline:none; }
.XTextBoxL input { right:25px; width:calc(100% - 50px); }
.XSpinner input, .XSpinner .XSPResult { right:35px; width:calc(100% - 70px); text-align:center; }
.XSpinner .XSPResult { top:12px; font-size:13px; color:#aaa; opacity:0; }
.XSpinner .XSPResult span { font-size:21px; color:#222;  }
.XTextBoxLB input, .XTextBoxLPB input { width:calc(100% - 150px); }
.XTextBoxL input:focus, .XTextBoxLP input:focus, .XSpinner input:focus { outline:none; }
.XTextBoxLPFull { width:80%; margin:7px; }
.XTextBoxLPFull2 { width:80%; right:10%; margin:7px 0; }
.XTextBoxL:focus, .XTextBoxLP:focus { outline:none; }
.XTextBoxLPDark .XLPBack { border-color:#53689b; }
.XTextBoxLPDark input { color:#ddd; direction:rtl; }
.XTextBoxLPDark .XLPPic svg { fill:#fff; }
.XTextBoxLPDark .XLPTitle { color:#fff; direction:rtl; }
.XTextBoxLPDark .BMSBtnCircle { border:0; }
.XTextBoxLPCtr input { text-align:center; }
.XTextBoxLPNum input { direction:ltr; }

.XTogglePass { position:absolute !important; width:22px; left:15px; right:auto !important; opacity:0.5; }
.XTogglePass:hover { opacity:0.7; }
.XPassShow { opacity:0.3; }

.XSpinner { width:180px; cursor:none; }
.XSpinnerUp, .XSpinnerDown { position:absolute !important; width:50px !important; height:40px; top:9px; right:0 !important; padding:15px 0; border-left:1px solid rgba(255,255,255,.2); cursor:pointer; z-index:10; opacity:0.4; }
.XSpinnerUp p, .XSpinnerDown p { position:absolute !important; top:-2px; width:100%; text-align:center; color:#444; font-size:28px; }
.XSpinner:focus { outline: none !important;  }
.XSpinnerUp { right:auto !important; left:0 !important; border-left:0; border-right:1px solid rgba(255,255,255,.2); }
.XSpinnerDown p { top:-7px; font-size:36px }
.XSpinner input { text-align:center; }
.XSpinnerUp:hover, .XSpinnerDown:hover { opacity:0.9; }

.XConfirmBox { position:relative; width:100%; height:100px; right:0; margin:0; display:flex; flex-grow:1; flex-wrap:wrap; padding:12px 0; margin:10px 0; justify-content:center; direction:ltr; }
.XConfirmBox p { position:relative; width:100%; color:#fff; opacity:0.5; text-align:right; }
.XConfirmBox input { position:relative; width:50px; height:50px; border:1px solid #555; background-color:transparent; caret-color:rgba(255, 255, 255, 0.2); border-radius:7px; margin:15px 5px; color:#fff; font-family:DF; font-size:30px; text-align:center; padding-top:10px; }
.XConfirmBox input:focus { outline:none; border-color:#aaa; }

.XHelpPointer { position:relative; top:0; right:0; width:23px; height:28px; background-color:#ccc; color:#fff; margin-right:5px; padding:1px; text-align:center; font-size:12pt; vertical-align:middle; display:inline-block; }

.XSelectBoxL, .XSelectBoxLP { position:relative; width:300px; height:52px; right:0; margin:0;/* flex-grow:1;*/ padding:12px 0; margin:36px 0 5px 0; margin-left:20px; }
.XSelectBoxL .XLPBack, .XSelectBoxLP .XLPBack { height:56px; }
.XSelectBoxL select, .XSelectBoxLP select { position:absolute; top:17px; right:55px; padding-right:10px; width:calc(100% - 80px); min-height:22px; background-color:transparent; font-size:16px; color:#333; font-family:DF; appearance:none; outline:none; background:url(../I/SelectCollap.png) no-repeat; background-position:0 55% !important; border:0; }
.XSelectBoxL select { right:10px; width:calc(100% - 30px); }
.XSelectBoxL select:focus, .XSelectBoxLP select:focus { outline: none; }
.XSelectBoxL:focus, .XSelectBoxLP:focus { outline:none; }
.XSelectBoxLPDark .XLPBack { border-color:#53689b; }
.XSelectBoxLPDark select { color:#ddd; direction:rtl; background:url(../I/SelectCollapD.png) no-repeat; }
.XSelectBoxLPDark .XLPPic svg { fill:#fff; }
.XSelectBoxLPDark .XLPTitle { color:#666; direction:rtl; }
.XSelectBoxLPDark .BMSBtnCircle { border:0; }
.XSelectBoxLPDark option { position:relative; appearance:none; color:#333; }

.XBoxLOpen .XLPTitle { top: -18px; right: 25px; color: #222; opacity: 0.7; }
.XBoxLOpen .XLPPic { opacity: 0.15; }
.XBoxLOpen .XLPBack { border-top: 0; }

.XAreaBoxLP, .XAreaBoxLOne { position:relative; right:0; margin:0; flex-grow:1; padding-top:12px; margin:25px 0 5px 0; margin-left:10px; flex-grow:1; }
.XAreaBoxLP .XLPBack, .XAreaBoxLOne .XLPBack { position:absolute; height:100%; }
.XAreaBoxLP textarea, .XAreaBoxLOne textarea { position:relative; top:5px; right:65px; width:calc(100% - 50px); min-height:80px; padding-left:30px; background-color:transparent; resize:vertical; font-size:19px; color:#333; font-family:DF; outline:none; }
.XAreaBoxLP textarea:focus, .XAreaBoxLOne textarea:focus { outline:none; }
.XAreaBoxLP .XError, .XAreaBoxLP .XError { bottom:-12px; }
.XAreaBoxLOne { margin:42px 0 5px 0; }
.XAreaBoxLOne textarea { height:36px; min-height:36px; } 

.XAreaBoxLP:focus { outline:none; }
.XAreaBoxLPDark .XLPBack { border-color:#53689b; }
.XAreaBoxLPDark textarea { color:#ddd; direction:rtl; }
.XAreaBoxLPDark .XLPPic svg { fill:#fff; }
.XAreaBoxLPDark .XLPTitle { color:#666; direction:rtl; }
.XAreaBoxLPDark .BMSBtnCircle { border:0; }

.XMapBoxLP { position:relative; width:100%; right:0; margin:0; flex-grow:1; padding-top:12px; margin:25px 0 5px 0; margin-left:10px; }
.XMapBoxLP .XLPBack { position:absolute; height:100%; }
.XMapBoxLP .XMapBox { position:relative; top:5px; right:20px; width:calc(100% - 60px); height:180px; margin:10px 10px 30px 10px; background-color:#eee; resize:vertical; border-radius:15px; }

.XPanelBoxLP { position:relative; width:0; height:50px; right:0; margin:0; flex-grow:1; padding:12px 0; margin:25px 0 5px 0; margin-left:20px; z-index:10; }
.XPanelBoxLP .XLPBack { height:60px; }
.XPanelBoxLP input { position:absolute; top:15px; right:65px; width:calc(100% - 120px); background-color:transparent; font-size:21px; color:#333; font-family:DF; outline:none; }
.XPanelBoxLP input:focus { outline: none; }
.XPanelBoxLP:focus { outline:none; }
.XPanelBoxLPDark .XLPBack { border-color:#53689b; }
.XPanelBoxLPDark input { color:#ddd; direction:rtl; }
.XPanelBoxLPDark .XLPPic svg { fill:#fff; }
.XPanelBoxLPDark .XLPTitle { color:#666; direction:rtl; }
.XPanelBoxLPDark .BMSBtnCircle { border:0; }
.XPanelBoxLPDark option { position:relative; appearance:none; padding-right:10px !important; color:#333; }

.XPanelW { position:absolute; width:100%; top:-20px; right:0; background:#333 url(../I/noise.png); padding:10px; border-radius:15px; }
.XPanelW>div { position:relative; display:flex; flex-wrap:wrap; }
.XPanelW .GooBtnH { margin:5px; }
.XPanelW .GooBtnText { width:105px; }
.XPanelW .GooBtn { width:100%; }

.XUpload { position:relative; width:280px; min-height:70px; margin:10px 7px; border:1px dashed #777; flex-grow:1; }
.XUpload input { position:absolute; width:0.01px; height:0.01px; opacity:0; overflow:hidden; z-index:-1; }
.XUpload Canvas { position:absolute; width:100%; height:100%; top:0; right:0; z-index:10; }
.XUploadTitle { position:absolute; width:150px; bottom:50%; margin-bottom:-15px; right:50%; margin-right:-75px; text-align:center; color:#888; font-size:15px; padding:5px 0; cursor:pointer; z-index:20;  }

.XTextBoxC { position:relative; width:250px; height:45px; right:0; margin:7px 0; display:inline-block; vertical-align:middle; }
.XTextBoxC .XTextBoxCBack { position:absolute; width:100%; height:45px; top:0; right:0; border:1px solid #ddd; }
.XTextBoxC .XTextBoxCTitle { position:absolute; top:7px; right:15px; font-size:14px; color:#ddd; padding:5px; }
.XTextBoxC input { position:absolute; top:12px; right:40px; width:calc(100% - 50px); background-color:transparent; font-size:17px; color:#333; font-family:DF; outline: none; }

.XCheckBoxSw { position:relative; right:20px; padding:7px 60px 7px 10px; cursor:pointer; margin-bottom:15px; transition:0.5s; }
.XCheckBoxSwRail { position:absolute !important; width:50px; height:24px; top:8px; right:0; border:1px solid #ccc; }
.XCheckBoxSwPoint { position:absolute !important; width:24px; height:18px; top:11px; right:6px; background-color:#aaa; }
.XCheckBoxSw p { position:relative !important; font-size:16px; color:#222; white-space:nowrap; opacity:0.5; }
.XCheckBoxSw:hover p { color:#ffac00; opacity:1 !important; }

.XCheckBoxSwDark .XCheckBoxSwRail { border-color:#53689b; }
.XCheckBoxSwDark .XCheckBoxSwPoint { background-color:#fff; }
.XCheckBoxSwDark p { color:#fff; }


.XTextLink { position:relative; font-size:17px; color:#fff; padding-bottom:5px; margin:0 5px 5px; padding:4px 20px; display:inline-block; transition:0.5s; cursor:pointer; }
.XTextLink div { position:absolute; top:0; right:0; width:0; height:100%; background-color:#ffd12a; border-radius:7px; }
.XTextLink p { position:relative; top:0; right:0; width:100%; text-align:center; color:#111; } 
.XTextLink:hover { color:#ffac00; opacity:1 !important; }

.XBackLink { position:absolute; bottom:-50px; cursor:pointer;}
.XBackLink img { position:relative; width:22px; height:22px; vertical-align:middle; display:inline-block; opacity:0.7; }
.XBackLink p { position:relative; margin-right:10px; display:inline-block; color:#666; }
.XBackLink:hover p { color:#da7600; opacity:1 !important; }

.XButtonL { position:relative; height:50px; right:0; margin:15px 0; cursor:pointer; overflow:hidden; }
.XButtonLBack { position:relative; width:100%; height:100%; background-color:#ffc000; }
.XButtonL p { position:absolute; width:100%; height:100%; top:13px; color:#fff; font-size:16px; text-align:center; }
.XButtonLLoader { position:absolute; top:8px; right:50%; margin-right:-16px; opacity:0 }
.XButtonS .XButtonLBack { background-color:#e1e1e1; }

.XButtonLHover { position:relative; width:1000px; height:1000px; top:50%; right:50%; margin-top:-500px; margin-right:-500px; background-color:#00cbfe; opacity:0.9; }
.XErrorBox { position:absolute; top:-42px; right:50% !important; font-family:DF; font-size:10.5pt; color:#fff; background-color:#f00; padding:8px 10px; z-index:200; display:inline-block; }
.XErrorBox img { position:absolute; bottom:-12px; right:40px; width:23px; height:12px; opacity:1 } 
.XErrorText { position:relative !important; font-size:10.5pt !important; white-space:nowrap !important; margin:0 8px !important; white-space:nowrap !important; display:inline; }

#XBackToTop { position:fixed; bottom:20px; right:20px; cursor:pointer; z-index:999; display:none; }
.CloseBtn { position:absolute; width:30px; height:30px; top:-10px; left:10px; background-color:#da7600; cursor:pointer; z-index:100; }
.CloseBtn img { position:absolute; top:5px; left:3px; }

.XHBreakLine { position:relative; width:100%; height:0; border-top:1px dotted #ddd; margin:10px 0; }

.XPaging { position:relative; width:360px; height:45px; display:block; margin:0 auto; }
.XPaging * { user-select:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.XPaging_PrevBtn { position:absolute; top:5px; right:0; width:35px; height:35px; cursor:pointer; display:none; }
.XPaging_NextBtn { position:absolute; top:5px; left:0; width:35px; height:35px; cursor:pointer; }
.XPaging_PrevBtn img, .XPaging_NextBtn img { opacity:0.4; }
.XPaging_PrevBtn:hover img, .XPaging_NextBtn:hover img { opacity:0.9; }
.XPaging_PrevHR { position:absolute; top:5px; right:50px; width:1px; height:35px; background-color:#eee; display:none; }
.XPaging_NextHR { position:absolute; top:5px; left:50px; width:1px; height:35px; background-color:#eee; }
.XPaging_BtnBox { position:absolute; top:0; right:67px; width:225px; height:45px; overflow:hidden; }
.XPaging_Btn { position:absolute; width:35px; height:35px; top:5px; cursor:pointer; }
.XPaging_Btn1 { right:5px; }
.XPaging_Btn2 { right:50px; }
.XPaging_Btn3 { right:95px; }
.XPaging_Btn4 { right:140px; }
.XPaging_Btn5 { right:185px; }
.XPaging_Btn1 p, .XPaging_Btn2 p, .XPaging_Btn3 p, .XPaging_Btn4 p, .XPaging_Btn5 p { position:absolute; top:3px; width:100%; text-align:center; font-size:19px; }
.XPaging_BtnActive { background-color:#39d1ff; }
.XPaging_BtnActive p { color:#fff; }
.XPaging_X1 .XPaging_Btn1 { right:95px; }
.XPaging_X2 .XPaging_Btn1 { right:67px; }
.XPaging_X2 .XPaging_Btn2 { right:112px; }
.XPaging_X3 .XPaging_Btn1 { right:50px; }
.XPaging_X3 .XPaging_Btn2 { right:95px; }
.XPaging_X3 .XPaging_Btn3 { right:140px; }
.XPaging_X4 .XPaging_Btn1 { right:22px; }
.XPaging_X4 .XPaging_Btn2 { right:67px; }
.XPaging_X4 .XPaging_Btn3 { right:112px; }
.XPaging_X4 .XPaging_Btn4 { right:157px; }
.XPaging_X1 .XPaging_Btn2, .XPaging_X1 .XPaging_Btn3, .XPaging_X1 .XPaging_Btn4, .XPaging_X1 .XPaging_Btn5 { display:none; }
.XPaging_X2 .XPaging_Btn3, .XPaging_X2 .XPaging_Btn4, .XPaging_X2 .XPaging_Btn5 { display:none; }
.XPaging_X3 .XPaging_Btn4, .XPaging_X3 .XPaging_Btn5 { display:none; }
.XPaging_X4 .XPaging_Btn5 { display:none; }
.XPaging_X1 .XPaging_NextHR, .XPaging_X2 .XPaging_NextHR, .XPaging_X3 .XPaging_NextHR, .XPaging_X4 .XPaging_NextHR { display:none; }
.XPaging_X1 .XPaging_PrevHR, .XPaging_X2 .XPaging_PrevHR, .XPaging_X3 .XPaging_PrevHR, .XPaging_X4 .XPaging_PrevHR { display:none; }
.XPaging_X1 .XPaging_NextBtn, .XPaging_X2 .XPaging_NextBtn, .XPaging_X3 .XPaging_NextBtn, .XPaging_X4 .XPaging_NextBtn { display:none; }
.XPaging_X1 .XPaging_PrevBtn, .XPaging_X2 .XPaging_PrevBtn, .XPaging_X3 .XPaging_PrevBtn, .XPaging_X4 .XPaging_PrevBtn { display:none; }


.XLegend { position:relative; margin:40px 0; padding:30px; background-color:#0b0b29;display:flex; flex-direction:row; flex-wrap:wrap; flex-grow:1; justify-content:space-around; align-content:stretch; }
.XLegendTitle { position:absolute; top:-17px; right:25px; padding:5px 30px; font-family:DF; font-size:15px; color:#fff; background-color:#ea7f00; }

.XLegend .XTextBoxLP .XLPBack { background-color:#555 !important;}
.XLegend .XTextBoxLP .XLPTitle { background-color:#0b0b29 !important; color:#777; }
.XLegend .XTextBoxLP .XLPPic { opacity:0.9; }
.XLegend .XTextBoxLP input { color:#fff !important; }
.XLegend .XSelectBoxLP .XLPTitle { background-color:#0b0b29; color:#777; }
.XLegend .XSelectBoxLP .XLPPic { opacity:0.9; }
.XLegend .XSelectBoxLP select { color:#fff !important; }
.XLegend .XSelectBoxLP select option { background-color:#0b0b29; }
.XLegend .XAreaBoxLP .XAreaBoxLPTitle { background-color:#0b0b29; color:#777; }
.XLegend .XAreaBoxLP .XAreaBoxLPPic { opacity:0.9; }
.XLegend .XAreaBoxLP textarea { color:#fff !important; }


.XTextBoxLP input:disabled { color:#da7600 !important; }
.XSelectBoxLP select:disabled { color:#da7600 !important; }                        
.XSelectBoxLP textarea:disabled { color:#da7600 !important; }  

 /*////////////////////////////////////*/


.XLegend2 { position:relative; width:100%; margin:10px 0; padding:50px 5px 10px 5px; min-height:80px; overflow:hidden; opacity:0; }
.XLegend2Back { position:absolute; top:0; right:0; width:100%; height:100%; background-color:#0c0c2b; opacity:0.8; }
.XLegend2Title { position:absolute; top:15px; right:15px; }
.XLegend2Title div { position:absolute; top:7px; right:0; width:7px; height:7px; background-color:#f80; }
.XLegend2Title p { position:absolute; top:-2px; right:20px; font-size:15px; color:#fff; white-space:nowrap; opacity:0.9; }
.XLegend2EnTitle { position:absolute; top:50%; right:-80px; width:200px; margin-top:-5px; color:#17174e; font-family:DF; font-size:17px; text-align:center; white-space:nowrap; }
.XLegend2Empty { position:relative; width:100%; }
.XLegend2Empty img { position:relative; right:50%; margin:20px -35px 5px 0; width:70px; opacity:0.2; }
.XLegend2Empty p { position:relative; font-size:14px; width:100%; text-align:center; margin-bottom:10px; color:#fff; opacity:0.1; }

 /*////////////////////////////////////*/

.XB1 { position:absolute; width:100%; height:100%; top:-2px; right:-2px; border:2px solid #f80; margin-left:15px; cursor:pointer; }

.XLegendMenu { position:absolute; width:calc(100% - 150px); height:45px; top:15px; left:15px; direction:ltr; display:flex; flex-direction:row; flex-wrap:nowrap; z-index:1000; }
.XLegendMenuBtn { position:relative; width:34px; height:34px; margin-left:15px; cursor:pointer; }
.XLegendMenuBtn img { position:absolute; width:24px; height:24px; top:4px; right:4px; opacity:0.8; }
.XLegendMenuBtnS { background-color:#f80; }
.XLegendMenuBtnS img { opacity:0.9; }

.XLegendMenuBtn .XB1 { position:relative; width:38px; height:38px; margin-top:-2px; margin-left:-5px; cursor:pointer; opacity:0; }


 /*////////////////////////////////////*/

.XUserPicBox { position:relative; width:74px; height:74px; cursor:pointer; }
.XUserPicCircle { position:absolute; top:0px; right:0px; width:74px; height:74px; border:2px solid #17174e; opacity:0.4; }
.XUserPic { position:absolute; top:8px; right:8px; width:62px; height:62px; background-color:#000; overflow:hidden; }
.XUserPic img { position:absolute; width:100%; height:100%; top:0; right:0; opacity:0.8; }
.XUserPicTitle { position:absolute; bottom:-10px; width:120px; margin-right:-23px; text-align:center; font-size:12px; color:#fff; opacity:0.6; white-space:nowrap; opacity:0; }


 /*////////////////////////////////////*/

 .XT10 { width:10px !important; } .XT15 { width:15px !important; } .XT20 { width:20px !important; } .XT24 { width:24px !important; } .XT28 { width:28px !important; } .XT30 { width:30px; }
 .XT100 { width:100px !important; } .XT120 { width:120px !important; } .XT140 { width:140px !important; } .XT160 { width:160px !important; } .XT180 { width:180px !important; }
 .XT200 { width:200px !important; } .XT220 { width:220px !important; } .XT240 { width:240px !important; } .XT260 { width:260px !important; } .XT280 { width:280px !important; }
 .XT300 { width:300px !important; } .XT320 { width:320px !important; } .XT340 { width:340px !important; } .XT360 { width:360px !important; } .XT380 { width:380px !important; }
 .XT400 { width:400px !important; } .XT420 { width:420px !important; } .XT440 { width:440px !important; }

 .XTDisable .XLPBack { border-bottom:0; border-color:#ccc; }
 .XTDisable .XLPTitle { color:#aaa; }
 .XTDisable select { background:transparent; }
 .XTDisable .XSpinnerUp, .XTDisable .XSpinnerDown { display:none; }

 .XTCenter input, .XTCenter select { text-align:center; }
 .XLTR, .XLTR input { direction:ltr; }
 .XDisplyN { display:none; }

 .XRowCell div, .XRowCell>p { position:relative; width:100%; text-align:center; font-size:17px; color:#444; }
 .XRowCell .SVG { position:relative; width:28px; height:28px; opacity:0.5; }
 .XRowCell .SVG:hover { opacity:1; }

 .XStateBar { position:relative; width:100%; box-sizing:border-box; padding:5px 20px; display:flex; }
 .XStateBar>div { position:relative; margin:0 2px !important; height:20px; background-color:#ddd; border-radius:10px; flex-grow:1; }
 .XOrderState div { height:30px; }
 .XActiveBox, .XActivePic { position:relative; min-width:100px; box-sizing:border-box; padding:12px 20px; display:flex; align-items:center; justify-content:center; border-radius:15px; }
 .XActiveBox p, .XActivePic p { color:#fff; font-size:15px; }
 .XActivePic { padding-right:45px; }
 .XActivePic .SVG { position:absolute; right:10px; width:24px; height:24px; opacity:1; margin-left:5px; fill:#fff; }
 
 .XActive1 { background-color:#4abd48; } .XActive2 { background-color:#24ada0; } .XActive3 { background-color:#7a9735; } .XActive4 { background-color:#5d8bcb; }
 .XActive5 { background-color:#07c185; } .XActive6 { background-color:#c554a7; } .XActive7 { background-color:#cbb910; } .XActive8 { background-color:#e57d4b; } .XActive9 { background-color:#dd4e2c; }

 .XStateBar1 .XSB1 { background-color:#dd4e2c; }
 .XStateBar2 .XSB1, .XStateBar2 .XSB2 { background-color:#e57d4b; }
 .XStateBar3 .XSB1, .XStateBar3 .XSB2, .XStateBar3 .XSB3 { background-color:#cbb910; }
 .XStateBar4 .XSB1, .XStateBar4 .XSB2, .XStateBar4 .XSB3, .XStateBar4 .XSB4 { background-color:#c554a7; }
 .XStateBar5 .XSB1, .XStateBar5 .XSB2, .XStateBar5 .XSB3, .XStateBar5 .XSB4, .XStateBar5 .XSB5 { background-color:#07c185; }
 .XStateBar6 .XSB1, .XStateBar6 .XSB2, .XStateBar6 .XSB3, .XStateBar6 .XSB4, .XStateBar6 .XSB5, .XStateBar6 .XSB6 { background-color:#5d8bcb; }
 .XStateBar7 .XSB1, .XStateBar7 .XSB2, .XStateBar7 .XSB3, .XStateBar7 .XSB4, .XStateBar7 .XSB5, .XStateBar7 .XSB6, .XStateBar7 .XSB7 { background-color:#7a9735; }
 .XStateBar8 .XSB1, .XStateBar8 .XSB2, .XStateBar8 .XSB3, .XStateBar8 .XSB4, .XStateBar8 .XSB5, .XStateBar8 .XSB6, .XStateBar8 .XSB7, .XStateBar8 .XSB8 { background-color:#24ada0; }
 .XStateBar9 .XSB1, .XStateBar9 .XSB2, .XStateBar9 .XSB3, .XStateBar9 .XSB4, .XStateBar9 .XSB5, .XStateBar9 .XSB6, .XStateBar9 .XSB7, .XStateBar9 .XSB8, .XStateBar9 .XSB9 { background-color:#4abd48; }
 .XStateBar10 .XSB1, .XStateBar10 .XSB2, .XStateBar10 .XSB3, .XStateBar10 .XSB4, .XStateBar10 .XSB5, .XStateBar10 .XSB6, .XStateBar10 .XSB7, .XStateBar10 .XSB8, .XStateBar10 .XSB9, .XStateBar10 .XSB10 { background-color:#777; }
 
 .XStateBar1 .XSI1::before { background-color:#dd4e2c; }
 .XStateBar2 .XSI1::before, .XStateBar2 .XSI2::before { background-color:#e57d4b; }
 .XStateBar3 .XSI1::before, .XStateBar3 .XSI2::before, .XStateBar3 .XSI3::before { background-color:#cbb910; }
 .XStateBar4 .XSI1::before, .XStateBar4 .XSI2::before, .XStateBar4 .XSI3::before, .XStateBar4 .XSI4::before { background-color:#c554a7; }
 .XStateBar5 .XSI1::before, .XStateBar5 .XSI2::before, .XStateBar5 .XSI3::before, .XStateBar5 .XSI4::before, .XStateBar5 .XSI5::before { background-color:#07c185; }
 .XStateBar6 .XSI1::before, .XStateBar6 .XSI2::before, .XStateBar6 .XSI3::before, .XStateBar6 .XSI4::before, .XStateBar6 .XSI5::before, .XStateBar6 .XSI6::before { background-color:#5d8bcb; }
 .XStateBar7 .XSI1::before, .XStateBar7 .XSI2::before, .XStateBar7 .XSI3::before, .XStateBar7 .XSI4::before, .XStateBar7 .XSI5::before, .XStateBar7 .XSI6::before, .XStateBar7 .XSI7::before { background-color:#7a9735; }
 .XStateBar8 .XSI1::before, .XStateBar8 .XSI2::before, .XStateBar8 .XSI3::before, .XStateBar8 .XSI4::before, .XStateBar8 .XSI5::before, .XStateBar8 .XSI6::before, .XStateBar8 .XSI7::before, .XStateBar8 .XSI8::before { background-color:#24ada0; }
 .XStateBar9 .XSI1::before, .XStateBar9 .XSI2::before, .XStateBar9 .XSI3::before, .XStateBar9 .XSI4::before, .XStateBar9 .XSI5::before, .XStateBar9 .XSI6::before, .XStateBar9 .XSI7::before, .XStateBar9 .XSI8::before, .XStateBar9 .XSI9::before { background-color:#4abd48; }
 .XStateBar10 .XSI1::before, .XStateBar10 .XSI2::before, .XStateBar10 .XSI3::before, .XStateBar10 .XSI4::before, .XStateBar10 .XSI5::before, .XStateBar10 .XSI6::before, .XStateBar10 .XSI7::before, .XStateBar10 .XSI8::before, .XStateBar10 .XSI9::before, .XStateBar10 .XSI10::before { background-color:#777; }

 .XStateBar1 .XSID1 { display:flex; flex-wrap:wrap; }
 .XStateBar2 .XSID1, .XStateBar2 .XSID2 { display:flex; flex-wrap:wrap; }
 .XStateBar3 .XSID1, .XStateBar3 .XSID2, .XStateBar3 .XSID3 { display:flex; flex-wrap:wrap; }
 .XStateBar4 .XSID1, .XStateBar4 .XSID2, .XStateBar4 .XSID3, .XStateBar4 .XSID4 { display:flex; flex-wrap:wrap; }
 .XStateBar5 .XSID1, .XStateBar5 .XSID2, .XStateBar5 .XSID3, .XStateBar5 .XSID4, .XStateBar5 .XSID5 { display:flex; flex-wrap:wrap; }
 .XStateBar6 .XSID1, .XStateBar6 .XSID2, .XStateBar6 .XSID3, .XStateBar6 .XSID4, .XStateBar6 .XSID5, .XStateBar6 .XSID6 { display:flex; flex-wrap:wrap; }
 .XStateBar7 .XSID1, .XStateBar7 .XSID2, .XStateBar7 .XSID3, .XStateBar7 .XSID4, .XStateBar7 .XSID5, .XStateBar7 .XSID6, .XStateBar7 .XSID7 { display:flex; flex-wrap:wrap; }
 .XStateBar8 .XSID1, .XStateBar8 .XSID2, .XStateBar8 .XSID3, .XStateBar8 .XSID4, .XStateBar8 .XSID5, .XStateBar8 .XSID6, .XStateBar8 .XSID7, .XStateBar8 .XSID8 { display:flex; flex-wrap:wrap; }
 .XStateBar9 .XSID1, .XStateBar9 .XSID2, .XStateBar9 .XSID3, .XStateBar9 .XSID4, .XStateBar9 .XSID5, .XStateBar9 .XSID6, .XStateBar9 .XSID7, .XStateBar9 .XSID8, .XStateBar9 .XSID9 { display:flex; flex-wrap:wrap; }
 .XStateBar10 .XSID1, .XStateBar10 .XSID2, .XStateBar10 .XSID3, .XStateBar10 .XSID4, .XStateBar10 .XSID5, .XStateBar10 .XSID6, .XStateBar10 .XSID7, .XStateBar10 .XSID8, .XStateBar10 .XSID9, .XStateBar10 .XSID10 { display:flex; flex-wrap:wrap; }

 .XSBRej { position:absolute !important; transform:rotate(45deg); width:16px; right:50%; margin-right:-8px !important; fill:#fff; background:transparent !important; display:none; }
 .XStateBar2.XSBRejA .XSB2 .XSBRej, .XStateBar2.XSBRejA .XSB3 .XSBRej, .XStateBar2.XSBRejA .XSB4 .XSBRej, .XStateBar2.XSBRejA .XSB5 .XSBRej,
 .XStateBar2.XSBRejA .XSB6 .XSBRej, .XStateBar2.XSBRejA .XSB7 .XSBRej, .XStateBar2.XSBRejA .XSB8 .XSBRej { display:block; } 
 .XStateBar3.XSBRejA .XSB3 .XSBRej, .XStateBar3.XSBRejA .XSB4 .XSBRej, .XStateBar3.XSBRejA .XSB5 .XSBRej,
 .XStateBar3.XSBRejA .XSB6 .XSBRej, .XStateBar3.XSBRejA .XSB7 .XSBRej, .XStateBar3.XSBRejA .XSB8 .XSBRej { display:block; }
 .XStateBar4.XSBRejA .XSB4 .XSBRej, .XStateBar4.XSBRejA .XSB5 .XSBRej,.XStateBar4.XSBRejA .XSB6 .XSBRej, .XStateBar4.XSBRejA .XSB7 .XSBRej, .XStateBar4.XSBRejA .XSB8 .XSBRej { display:block; }
 .XStateBar5.XSBRejA .XSB5 .XSBRej,.XStateBar5.XSBRejA .XSB6 .XSBRej, .XStateBar5.XSBRejA .XSB7 .XSBRej, .XStateBar5.XSBRejA .XSB8 .XSBRej { display:block; }
 .XStateBar6.XSBRejA .XSB6 .XSBRej, .XStateBar6.XSBRejA .XSB7 .XSBRej, .XStateBar6.XSBRejA .XSB8 .XSBRej { display:block; }
 .XStateBar7.XSBRejA .XSB7 .XSBRej, .XStateBar7.XSBRejA .XSB8 .XSBRej { display:block; }
 .XStateBar8.XSBRejA .XSB8 .XSBRej { display:block; }

/* //////////////////////////////////////////// */

.XPlusBtn, .XPlusBtn2 { width:70px !important; margin-top:32px; }
.XPlusBtn3,  .XCloseBtn { width:70px !important; }
.XPlusBtn .SVG { width:22px; right:50%; margin-right:-11px; }
.XPlusBtn2 .SVG { width:30px; right:50%; margin-right:-15px; }
.XPlusBtn3 .SVG { width:36px; right:50%; margin-right:-18px; }
.XCloseBtn .SVG { width:22px; right:50%; margin-right:-11px; transform:rotate(45deg); }

.XListW { position:relative; width:100%; min-height:40px; margin:5px 0; display:flex; flex-wrap:wrap; }
.XRowItem { position:relative; width:100%; min-height:75px; right:0; margin:5px 0; padding:10px; background-color:rgba(255, 255, 255, 0.5); backdrop-filter: blur(3px) grayscale(0%) brightness(100%); border-radius: 20px; display:flex; }
.XRowItem:last-child { border: 0 !important; }
.XItemCloseBtn { transform:rotate(45deg); width:18px !important; cursor:pointer; }
.XRowCell { position:relative; min-width:50px; padding:10px; border-left:1px dotted #bbb; justify-content:center; align-content:center; display:flex; flex-wrap:wrap; flex-grow:1; }
.XRowCell:last-child { border:0; }
.XRowCell2 { position:relative; min-width:80px; padding:0 10px; justify-content:center;  display:flex; align-content:center; align-items:center; }


/*.XRowCell div { position:relative; width:100%; text-align:center; margin-top:4px; font-size:15px; color:#888; letter-spacing:1px; direction:ltr; }*/
.XSpan, .XSpan2, .XSpan3 { color:#444; font-size:17px; display:inline-block; padding:2px; background:#ddd; border-radius:7px; margin:0 3px; padding:0 8px; }
.XSpan2 { padding:0 20px; background-color:transparent; margin-top:6px; padding:5px 0 0 0; border-top:1px dashed #bbb; border-radius:100px; }
.XSpan3 { padding:0 20px; background-color:#37a411; color:#fff !important; padding:10px 25px; border-radius:12px }
.XSales { background-color:#dd4e2c; color:#fff !important; }
.XReserved { background-color:#00a8e9; color:#fff !important; }

.XListItem { position:relative; width:100%; min-height:70px; padding:12px; display:flex; flex-wrap:wrap; cursor:pointer; }
.XInLine { position:relative; width:100%; min-height:80px; margin:5px; padding:12px; display:flex; border-radius:15px; }
.XInLineX { background-color:#eee; min-height:66px; /*border-top: 1px dashed #aaa; border-bottom: 1px dashed #aaa;*/ }
.XInLineType { position:relative; max-width:60px; min-width:60px; height:100%; border-radius:15px; }
.XInLineType .SVG { position:absolute; width:30px; height:30px; right:15px; top:50%; transform:translateY(-15px); fill:#fff; }

.XField, .XNumField { font-size:12px !important; }
.XNumField2 { font-size:13px !important; }
.XNumField span { font-size:20px !important; color:#444; display:inline-block; margin:0 5px; }
.XNumField2 span { font-size:18px !important; color:#444; display:inline-block; margin:0 5px; }
.XField span { font-size:18px !important; color:#444; display:inline-block; margin:0 5px; }

.XLowColor { color:#888 !important; }

.XInTable { width:100%; box-sizing:border-box; border-radius:10px; display:flex; justify-content:flex-start; }
.XInTable div { justify-content:center; align-content:center; }
.XInTableState div { height:25px; }
.XLowColor { color:#888 !important; }

.XRI05 { flex-basis: 5%; } .XRI06 { flex-basis: 6%; } .XRI07 { flex-basis: 7%; } .XRI08 { flex-basis: 8%; } .XRI09 { flex-basis: 9%; } 
.XRI10 { flex-basis: 10%; } .XRI11 { flex-basis: 11%; } .XRI12 { flex-basis: 12%; } .XRI13 { flex-basis: 10%; } .XRI14 { flex-basis: 10%; } 
.XRI15 { flex-basis: 15%; } .XRI16 { flex-basis: 16%; } .XRI17 { flex-basis: 17%; } .XRI18 { flex-basis: 18%; } .XRI20 { flex-basis: 20%; } .XRI25 { flex-basis: 25%; }
.XRI30 { flex-basis: 30%; } .XRI35 { flex-basis: 35%; } .XRI40 { flex-basis: 40%; } .XRI45 { flex-basis: 45%; } .XRI50 { flex-basis: 50%; }
.XRI55 { flex-basis: 55%; } .XRI60 { flex-basis: 60%; } .XRI65 { flex-basis: 65%; } .XRI70 { flex-basis: 70%; } .XRI75 { flex-basis: 75%; }
.XRI80 { flex-basis: 80%; } .XRI85 { flex-basis: 85%; } .XRI90 { flex-basis: 90%; } .XRI1100 { flex-basis: 90%; }

.XRICenter { text-align:center; }
.XPoi { cursor:pointer; }

.XOpa10 { opacity:0.1; } .XOpa20 { opacity:0.2; } .XOpa30 { opacity:0.3; } .XOpa40 { opacity:0.4; } .XOpa50 { opacity:0.5; }
.XOpa60 { opacity:0.6; } .XOpa70 { opacity:0.7; } .XOpa80 { opacity:0.8; } .XOpa90 { opacity:0.9; }

.XFon10 { font-size:10px !important; } .XFon11 { font-size:11px !important; } .XFon12 { font-size:12px !important; } .XFon13 { font-size:13px !important; } .XFon14 { font-size:14px !important; } .XFon15 { font-size:15px !important; }  
.XFon16 { font-size:16px !important; } .XFon17 { font-size:17px !important; } .XFon18 { font-size:18px !important; } .XFon19 { font-size:19px !important; } .XFon20 { font-size:20px !important; } .XFon21 { font-size:21px !important; }
.XFon22 { font-size:22px !important; } .XFon23 { font-size:23px !important; } .XFon24 { font-size:24px !important; } .XFon25 { font-size:25px !important; } .XFon30 { font-size:30px !important; } .XFon35 { font-size:35px !important; }

.XBorT0 { border-top:0; } .XBorR0 { border-right:0; } .XBorB0 { border-bottom:0; } .XBorL0 { border-left:0; }
.XBorTB0 { border-top:0; border-bottom:0; } .XBorRL0 { border-right:0; border-left:0; } .XBor0 { border:0; }



/* Supplier  //////////////////////////////////////////// */

#SuppListBox .XRowItem { cursor:pointer; }

/* Customer  //////////////////////////////////////////// */

#CustListBox .XRowItem { cursor:pointer; }