/* ---- status button ---- */
.stat-que { background-color:#00c0c1; color:white }
.stat-prod { background-color:green; color:white }
.stat-stage { background-color:red; color:white }
.stat-quality { background-color:blue; color:white }
.stat-test { background-color:#9600ff; color:white }
.stat-box { background-color:#1f88c7; color:white }
.stat-ship { background-color:#e27a00; color:white }
.stat-hold { background-color:#6dffff; color:black }
.stat-rdy { background-color:#c50767; color:white }
.stat-suspend { background-color:#c4ff4f; color:black }
.stat-close { background-color:#707070; color:white }
/* ---- status ---- */
.statusQue { color:#00c0c1 }
.statusProd { color:green }
.statusStage { color:red }
.statusQuality { color:blue }
.statusTest { color:#9600ff }
.statusBox { color:#1f88c7 }
.statusShip { color:#e27a00 }
/* .statHold { background-color:#6dffff; color:black }
.statRdy { background-color:#c50767; color:white }
.statSuspend { background-color:#c4ff4f; color:black }
.statClose { background-color:#707070; color:white } */

/* ---- system error ---- */
.help-block { color:red; }
/* .error { font-size: 15px; font-family: inherit;;} */
/* .database-error { padding-top: 10px; text-align: center; font-family: system-ui; font-size: large; color: red; font-weight: 500; } */
/* ---- header ---- */
.ltstlblu { background-color: lightsteelblue;}
/* ---- content ---- */
.inner-content { padding: 0px 15px 20px }
/* ---- border ---- */
.b-rdg { border-style: ridge;}
.b-ins { border-style: inset;}
.b-grv { border-style: groove;}
.bi1 { border: 1px inset;}
.bi2 { border: 2px inset;}
.bo1 { border: 1px outset;}
.bo2 { border: 2px outset;}

/* ---- table border ---- */
/* .table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
    border-top: 2px solid #ddd
} */
/* .table>thead, */
/* .table>thead>tr, */
/* .table>thead>tr>th, */


.table>thead>tr.b1sBlk>td, .table>thead>tr.b1sBlk>th, .table>thead>tr>td.b1sBlk, .table>thead>tr>th.b1sBlk,
.table>tbody>tr.b1sBlk>td, .table>tbody>tr.b1sBlk>th, .table>tbody>tr>td.b1sBlk, .table>tbody>tr>th.b1sBlk {border: 1px solid black;}
.table>thead>tr.b2sBlk>td, .table>thead>tr.b2sBlk>th, .table>thead>tr>td.b2sBlk, .table>thead>tr>th.b2sBlk,
.table>tbody>tr.b2sBlk>td, .table>tbody>tr.b2sBlk>th, .table>tbody>tr>td.b2sBlk, .table>tbody>tr>th.b2sBlk {border: 2px solid black;}

.table>thead>tr.b1sWht>td, .table>thead>tr.b1sWht>th, .table>thead>tr>td.b1sWht, .table>thead>tr>th.b1sWht,
.table>tbody>tr.b1sWht>td, .table>tbody>tr.b1sWht>th, .table>tbody>tr>td.b1sWht, .table>tbody>tr>th.b1sWht {border: 1px solid white;}
.table>thead>tr.b2sWht>td, .table>thead>tr.b2sWht>th, .table>thead>tr>td.b2sWht, .table>thead>tr>th.b2sWht,
.table>tbody>tr.b2sWht>td, .table>tbody>tr.b2sWht>th, .table>tbody>tr>td.b2sWht, .table>tbody>tr>th.b2sWht {border: 2px solid white;}

/* .table>thead>tr>th */

.bs1sBlk {border-right: 1px solid black; border-left: 1px solid black;}
.bl1sBlk {border-left: 1px solid black;}
.br1sBlk {border-right: 1px solid black;}
.bt1sBlk {border-top: 1px solid black;}
.btb1sBlk {border-top: 1px solid black; border-bottom: 1px solid black;}
.btb2sBlk {border-top: 2px solid black; border-bottom: 2px solid black;}
.bb1sBlk {border-bottom: 1px solid black;}
.bb1sGry {border-bottom: 1px solid grey;}
.bb1sWht {border-bottom: 1px solid white;}
.bb-non {border-bottom:none;}

.m-h95 { min-height: 95%}
.m-h80 { min-height: 80%}
/* ---- font ---- */
.fs14 { font-size: 14px}
.fs16 { font-size: 16px}
.fs18 { font-size: 18px}

.fb { font-weight: bold;}
/* ---- label format ---- */
.frm { margin: 9px 0px 1px }
.frm-30 { width: 30px; margin: 6px 0px 1px; }
.frm-40 { width: 40px; margin: 6px 0px 1px; }
.frm-50 { width: 50px; margin: 6px 0px 1px; }
.frm-60 { width: 60px; margin: 6px 0px 1px; }
.frm-70 { width: 70px; margin: 6px 0px 1px; }
.frm-75 { width: 75px; margin: 6px 0px 1px; }
.frm-80 { width: 70px; margin: 6px 0px 1px; }
.frm-90 { width: 90px; margin: 6px 0px 1px; }
.frm-95 { width: 95px; margin: 6px 0px 1px; }
.frm-100 { width: 100px; margin: 6px 0px 1px; }
.frm-110 { width: 110px; margin: 6px 0px 1px; }
.frm-120 { width: 120px; margin: 6px 0px 1px; }
.frm-130 { width: 130px; margin: 6px 0px 1px; }
.frm-140 { width: 140px; margin: 6px 0px 1px; }
.frm-150 { width: 150px; margin: 6px 0px 1px; }
.frm-160 { width: 160px; margin: 6px 0px 1px; }
.frm-170 { width: 170px; margin: 6px 0px 1px; }
.frm-180 { width: 180px; margin: 6px 0px 1px; }
.frm-190 { width: 190px; margin: 6px 0px 1px; }
.frm-200 { width: 200px; margin: 6px 0px 1px; }
.frm-210 { width: 210px; margin: 6px 0px 1px; }
.frm-220 { width: 220px; margin: 6px 0px 1px; }

/* ---- text area ---- */
.rsz0 { resize: none;}
/* ---- max-width % ---- */
.mw100 { max-width: 100%; }
.mw90 { max-width: 90%; }
.mw85 { max-width: 85%; }
.mw80 { max-width: 80%; }
.mw50 { max-width: 50%; }
.mw40 { max-width: 40%; }
.mw35 { max-width: 35%; }
.mw30 { max-width: 30%; }
.mw25 { max-width: 25%; }
.mw20 { max-width: 20%; }
.mw15 { max-width: 15%; }
.mw14 { max-width: 14%; }
.mw13 { max-width: 13%; }
.mw12 { max-width: 12%; }
.mw11 { max-width: 11%; }
.mw10 { max-width: 10%; }
.mw9 { max-width: 9%; }
.mw8 { max-width: 8%; }
.mw7 { max-width: 7%; }
.mw6 { max-width: 6%; }
.mw5 { max-width: 5%; }
.mw4 { max-width: 4%; }
.mw3 { max-width: 3%; }
.mw2 { max-width: 2%; }
.mw1 { max-width: 1%; }
.mw0 { max-width: 0%; }

/* ---- width % ---- */
.w100 { width: 100%; }
.w95 { width: 95%; }
.w90 { width: 90%; }
.w85 { width: 85%; }
.w80 { width: 80%; }
.w75 { width: 75%; }
.w30 { width: 30%; }
.w2 { width: 2%; }
.w1 { width: 1%; }
.w0 { width: 0%; }

/* ---- width px ---- */
.wd-10 { width: 10px; }
.wd-11 { width: 11px; }
.wd-12 { width: 12px; }
.wd-13 { width: 13px; }
.wd-14 { width: 14px; }
.wd-15 { width: 15px; }
.wd-16 { width: 16px; }
.wd-17 { width: 17px; }
.wd-18 { width: 18px; }
.wd-19 { width: 19px; }
.wd-20 { width: 20px; }
.wd-25 { width: 25px; }
.wd-30 { width: 30px; }
.wd-35 { width: 35px; }
.wd-40 { width: 40px; }
.wd-45 { width: 45px; }
.wd-50 { width: 50px; }
.wd-55 { width: 55px; }
.wd-60 { width: 60px; }
.wd-65 { width: 65px; }
.wd-70 { width: 70px; }
.wd-75 { width: 75px; }
.wd-80 { width: 80px; }
.wd-85 { width: 85px; }
.wd-90 { width: 90px; }
.wd-95 { width: 95px; }
.wd-100 { width: 100px; }
.wd-105 { width: 105px; }
.wd-110 { width: 110px; }
.wd-120 { width: 120px; }
.wd-123 { width: 123px; }
.wd-125 { width: 125px; }
.wd-130 { width: 130px; }
.wd-140 { width: 140px; }
.wd-145 { width: 145px; }
.wd-150 { width: 150px; }
.wd-160 { width: 160px; }
.wd-165 { width: 165px; }
.wd-167 { width: 167px; }
.wd-170 { width: 170px; }
.wd-180 { width: 180px; }
.wd-185 { width: 185px; }
.wd-190 { width: 190px; }
.wd-195 { width: 195px; }
.wd-200 { width: 200px; }
.wd-205 { width: 205px; }
.wd-210 { width: 210px; }
.wd-220 { width: 220px; }
.wd-230 { width: 230px; }
.wd-240 { width: 240px; }
.wd-245 { width: 245px; }
.wd-250 { width: 250px; }
.wd-260 { width: 260px; }
.wd-270 { width: 270px; }
.wd-300 { width: 300px; }
.wd-310 { width: 310px; }

/* ---- height px ---- */
.ht-20 { height: 20px; }
.ht-22 { height: 22px; }
.ht-23 { height: 23px; }
.ht-24 { height: 24px; }
.ht-25 { height: 25px; }
.ht-26 { height: 26px; }
.ht-28 { height: 28px; }
.ht-30 { height: 30px; }
.ht-35 { height: 35px; }
.ht-38 { height: 38px; }
.ht-40 { height: 40px; }
.ht-45 { height: 45px; }
.ht-50 { height: 50px; }
.ht-60 { height: 60px; }
.ht-70 { height: 70px; }
.ht-75 { height: 75px; }
.ht-80 { height: 80px; }
.ht-85 { height: 85px; }
.ht-90 { height: 90px; }
.ht-93 { height: 93px; }
.ht-165 { height: 165px; }
.ht-190 { height: 190px; }
.ht-195 { height: 195px; }
.ht-200 { height: 200px; }
.ht-210 { height: 210px; }

/* ---- text align ---- */
.tr { text-align: right }
.tc { text-align: center }
.tl { text-align: left }

/* ---- vertical ---- */
.li { display: inline-block; }
.vm { vertical-align: middle; }
.hvc {display: flex;
   align-items: center;
   justify-content: center; }
.vc { display: inline-block;
    vertical-align: middle;}
.vb {
  position: absolute;
bottom: 0; }

/* ---- margin ---- */
/* ---- top ---- */
.mt0 { margin-top: 0px }
.mt1 { margin-top: 1px }
.mt2 { margin-top: 2px }
.mt3 { margin-top: 3px }
.mt4 { margin-top: 4px }
/* ---- bottom ---- */
.mb0 { margin-bottom: 0px }
.mb3 { margin-bottom: 3px }
.mb5 { margin-bottom: 5px }
.mb6 { margin-bottom: 6px }
.mb8 { margin-bottom: 8px }
.mb10 { margin-bottom: 10px }
/* ---- right ---- */
.mr-1 { margin-right: 1px }
.mr-2 { margin-right: 2px }
.mr-3 { margin-right: 3px }
.mr-10 { margin-right: 10px }
.mr-15 { margin-right: 15px }
.mr-20 { margin-right: 20px }
.mr-25 { margin-right: 25px }
.mr-30 { margin-right: 30px }
/* ---- left ---- */
.ml-1 { margin-left: 1px }
.ml-3 { margin-left: 3px }
.ml-5 { margin-left: 5px }
.ml-10 { margin-left: 10px }
/* ---- left % ---- */
.mlft-15 { margin-left: 15% }
/* ---- sides ---- */
.ms1 { margin: 0px 1px }
.ms3 { margin: 0px 3px }
.ms5 { margin: 0px 5px }
.ms8 { margin: 0px 8px }
/* ---- top / bottom ---- */
.mtb1 { margin: 1px 0px }
.mtb3 { margin: 3px 0px }
.mtb5 { margin: 5px 0px }

/* ---- padding ---- */
.p0 { padding: 0px }
.p2 { padding: 2px }
.p3 { padding: 3px }
.p5 { padding: 5px }
.p6 { padding: 6px }
.p7 { padding: 7px }
.p8 { padding: 8px }
.p9 { padding: 9px }
.p10 { padding: 10px }
.p15 { padding: 15px }

.p1015 { padding: 10px 15px }
.p1520 { padding: 15px 20px }
.p3-2 { padding: 3px 2px }
.p3-15 { padding: 3px 15px }
.p5-15 { padding: 5px 15px }
.p15-5 { padding: 15px 5px }
.p15-0 { padding: 15px 0px }
.p8-0 { padding: 8px 0px }
/* ---- top ---- */
.pt0 { padding-top: 0px }
.pt1 { padding-top: 1px }
.pt2 { padding-top: 2px }
.pt3 { padding-top: 3px }
.pt4 { padding-top: 4px }
.pt5 { padding-top: 5px }
.pt6 { padding-top: 6px }
.pt7 { padding-top: 7px }
.pt8 { padding-top: 8px }
.pt9 { padding-top: 9px }
.pt10 { padding-top: 10px }
.pt15 { padding-top: 15px }
.pt16 { padding-top: 16px }
.pt17 { padding-top: 17px }
.pt18 { padding-top: 18px }
.pt20 { padding-top: 20px }
.pt21 { padding-top: 21px }
.pt22 { padding-top: 22px }
.pt23 { padding-top: 23px }
.pt25 { padding-top: 25px }
.pt30 { padding-top: 30px }
.pt35 { padding-top: 35px }
.pt40 { padding-top: 40px }
.pt45 { padding-top: 45px }
.pt46 { padding-top: 46px }
.pt50 { padding-top: 50px }
.pt55 { padding-top: 55px }
.pt60 { padding-top: 60px }
.pt65 { padding-top: 65px }
.pt70 { padding-top: 70px }
.pt75 { padding-top: 75px }
.pt80 { padding-top: 80px }
.pt85 { padding-top: 85px }
.pt100 { padding-top: 100px }
/* ---- right ---- */
.pr0 { padding-right: 0px }
.pr1 { padding-right: 1px }
.pr2 { padding-right: 2px }
.pr3 { padding-right: 3px }
.pr5 { padding-right: 5px }
.pr6 { padding-right: 6px }
.pr7 { padding-right: 7px }
.pr8 { padding-right: 8px }
.pr9 { padding-right: 9px }
.pr10 { padding-right: 10px }
.pr15 { padding-right: 15px }
.pr20 { padding-right: 20px }
.pr25 { padding-right: 25px }
.pr30 { padding-right: 30px }
.pr35 { padding-right: 35px }
.pr40 { padding-right: 40px }
.pr45 { padding-right: 45px }
.pr50 { padding-right: 50px }
.pr55 { padding-right: 55px }
/* ---- bottom ---- */
.pb0 { padding-bottom: 0px }
.pb2 { padding-bottom: 2px }
.pb3 { padding-bottom: 3px }
.pb5 { padding-bottom: 5px }
.pb6 { padding-bottom: 6px }
.pb7 { padding-bottom: 7px }
.pb8 { padding-bottom: 8px }
.pb9 { padding-bottom: 9px }
.pb10 { padding-bottom: 10px }
.pb15 { padding-bottom: 15px }
.pb20 { padding-bottom: 20px }
.pb25 { padding-bottom: 25px }
.pb30 { padding-bottom: 30px }
/* ---- left ---- */
.pl0 { padding-left: 0px }
.pl1 { padding-left: 1px }
.pl2 { padding-left: 2px }
.pl3 { padding-left: 3px }
.pl5 { padding-left: 5px }
.pl6 { padding-left: 6px }
.pl7 { padding-left: 7px }
.pl8 { padding-left: 8px }
.pl9 { padding-left: 9px }
.pl10 { padding-left: 10px }
.pl15 { padding-left: 15px }
.pl20 { padding-left: 20px }
.pl25 { padding-left: 25px }
.pl30 { padding-left: 30px }
.pl35 { padding-left: 35px }
.pl45 { padding-left: 45px }
.pl70 { padding-left: 70px }
.pl90 { padding-left: 90px }
.pl110 { padding-left: 110px }
/* ---- top/bottom ---- */
.ptb2 { padding: 2px 0px }
.ptb5 { padding: 5px 0px }
.ptb10 { padding: 10px 0px }
.ptb20 { padding: 20px 0px }
/* ---- sides ---- */
.ps0 { padding-left:0px; padding-right:0px;}
.ps1 { padding-left:1px; padding-right:1px;}
.ps2 { padding-left:2px; padding-right:2px;}
.ps3 { padding: 0px 3px }
.ps5 { padding: 0px 5px }
.ps6 { padding: 0px 6px }
.ps8 { padding: 0px 8px }
.ps10 { padding: 0px 10px }
.ps15 { padding: 0px 15px }
/* ---- input required ---- */
.inrq { border: 1px solid #ff664b }