html, body {
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
    background-color: white;
    color: gray;
    margin: 0;
    padding: 0;
}
.tbl0, .tbl0w100 {
    border-collapse: collapse;
    padding: 0;
    border-spacing: 0;
}

.tbl2, .tbl4, .tbl8, .tbl12, .tbl16 {
    border-collapse: separate;
    padding: 0;
}

.tbl2 {
    border-spacing: 2px;
}

.tbl4 {
    border-spacing: 4px;
}

.tbl8, .tbl8w100 {
    border-spacing: 8px;
}

.tbl12 {
    border-spacing: 12px;
}
.tbl16 {
    border-spacing: 16px;
}
.tbl0w100, .tbl8w100 {
    width: 100%;
}

.tblBorder {
    border-style: solid;
    border-width: 1px;
    border-spacing: 2px;
    border-collapse: separate;
    border-radius: 6px;
    padding: 0;
}
.tblTab {
    width: 100%;
    background-color: white;
    border-style: solid;
    border-width: 2px;
    border-spacing: 8px;
    border-collapse: separate;
    padding: 0;
}
.tblPopMsg {
    width: 100%;
    text-align: center;
    background-color: white;
    border-bottom-style: solid;
    border-bottom-width: 2px;
}
.tblUpdate {
    border-collapse: separate;
    padding: 0;
    border-spacing: 8px;
    border-radius: 25px;
    border-style: solid;
    border-width: 1px;
    background-color: white;
}
.lbl, .lblLeft, .lblCenter, .lblErr, .lblErrCenter, .lblErrRight, .lblXL, .lblReport, .lblBlue {
    font-weight: bold;
}
.lbl, .lblXL, .lblBlue {
    text-align: right;
    float: right;
}
.lblErr, .lblErrRight, .lblErrCenter {
    color: Red;
}
.lblErrRight {
    color: Red;
    text-align: right;
}
.lblPopMsgHdr {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: gray;
    width: 350px;
    height: 350px;
}

.lblPopMsgTxt {
    font-size: 12px;
    text-align: center;
    color: gray;
    width: 350px;
    height: 350px;
}
.lblHeader {
    font-size: 18px;
    font-weight: bold;
}
.lblHeaderSub {
    font-size: 18px;
}
.lblHeaderDarkGray {
    font-size: 18px;
    font-weight: normal;
    color: darkgray;
}
.lblXL {
    font-size: 18px;
}
.lblXLLeft {
    font-size: 18px;
    text-align:left;
}
.lblReport {
    font-size: 18px;
    text-align: left;
}
.lblHeaderDtl {
    font-size: 12px;
    font-weight: bold;
    color: lightgray;
}
.txt, .txtEmail, .txtDim, .txtDimSub, .txtMultiLine, .txtSearch, .txtMedium, .txtLarge, .txtXL, .txtXXL, .txtDate, .txtXLRed, .txtAmt, .txtPopMsgHdr {
    font-size: 14px;
    height: 20px;
    padding: 6px;
    color: Black;
}
.txt, .txtEmail, .txtDim, .txtDimSub, .txtMultiLine, .txtSearch, .txtMedium, .txtLarge, .txtXL, .txtXXL, .txtDate, .txtAmt, .txtPopMsgHdr {
    border: 1px solid #CCCCCC;
}
.txtXLRed {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}
.txt, .txtEmail, .txtMultiLine, .txtMedium, .txtLarge, .txtXL, .txtXXL, .txtDate, .txtXLRed, .txtAmt {
    text-align: left;
    border-radius: 6px;
}
.txtPopMsgHdr {
    font-family: Tahoma;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: gray;
    border: none;
}
.txtSearch {
    text-align: left;
    border-radius: 6px;
    width: 150px;
}
.txtDim, .txtDimSub {
    text-align: center;
    border-radius: 6px;
}
.txtDate {
    width: 75px;
}
.txtDim {
    width: 50px;
}
.txtDimSub {
    width: 25px;
}
.txtMedium {
    width: 200px;
}
.txtLarge {
    width: 300px;
}
.txtEmail {
    width: 400px;
}
.txtXXL {
    width: 600px;
}
.txtAmt {
    width: 100px;
}
.txtMultiLine, .txtMultiLineXXL {
    font-family: Tahoma;
    font-size: 14px;
}
.txtMultiLine {
    height: 80px;
    width: 400px;
}
.txtMultiLineXXL {
    height: 160px;
    width: 610px;
}
.txtNoBorder, .txtNoBorderBold, .txtNoBorderBlue, .txtNoBorderBlueBold {
    font-size: 14px;
    border: none;
}
.txtNoBorder, .txtNoBorderBold {
    color: gray;
}
.txtNoBorderBold, .txtNoBorderBlueBold {
    font-weight: bold;
}
.txtNoBorderXL {
    font-size: 18px;
    color: gray;
    border: none;
}
.txtNoBorderBlue, .txtNoBorderBlueBold {
    color: #62C2E9;
}
.txtPurchase {
    font-size: 14px;
    color: Black;
    border: none;
    width:100px;
    text-align: left;
}
.txtHistorical {
    color: Black;
    border: none;
    text-align: left;
}
.txtGrid {
    font-family: Tahoma;
    font-size: 12px;
    text-align: left;
    color: Black;
    width: 150px;
    height: 50px;
    border-radius: 6px;
}
.ddl, .ddlSearch {
    height: 35px;
    padding: 6px;
    border: 1px solid #CCCCCC;
}
.ddl {
    border-radius: 6px;
}
.ddlSearch {
    width: 150px;
    border-radius: 6px;
}
.accordian {
    background-color: White;
}
.accordianHeader {
    font-family: Tahoma;
    font-size: 12px;
    font-weight: bold;
    height: 24px;
    white-space: nowrap;
}
.accordianContent {
    font-family: Tahoma, Arial;
    font-size: 12px;
}
.btn,
.btnSmall,
.btnLarge,
.btnAction, .btnActionRed, .btnActionBlue, .btnActionBlack {
    font-weight: bold;
    padding-right: 16px;
    padding-left: 16px;
    vertical-align: middle;
    height: 32px;
    color: gray;
    background-color: white;
    border-radius: 6px;
}

.btn {
    width: 120px;
}

.btnSmall {
    width: 80px;
}

.btnLarge {
    width: 160px;
}
/*https://www.rapidtables.com/web/color/gray-color.html*/
/*border removes shadow!*/
.btnAction, .btnActionRed, .btnActionBlue, .btnActionBlack {
    height: 28px;
    width: 100px;
    color: white;
    background-color: #A9A9A9;
    /*border-style: solid;
    border-width: 1px;
    border-spacing: 2px;*/
}
.btnActionRed {
    background-color: red;
}
.btnActionBlack {
    background-color: black;
}
.grdMaxWidth {
    max-width: 500px;
    overflow: hidden;
}
.grdFixedWidth {
    width: 350px;
    overflow: hidden;
}
.grdPage {
    white-space: nowrap;
}
    .grdPage td {
        border-style: solid;
        border-color: white;
        border-width: 2px;
    }

.grdHdr, .grdHdrSmall {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    color: white;
    background-color: gray;
    position: sticky;
    top: 0;
}
    .grdHdr a, .grdHdrSmall a {
        color: white;
        text-decoration: none;
    }
    .grdHdr th, .grdHdrSmall th {
        border-style: solid;
        border-color: white;
        border-width: 2px;
        padding: 8px;
    }
.grdHdrSmall {
    font-size: 12px;
}
    .grdHdrSmall th {
        padding: 4px;
    }

.grdRow, .grdAltRow, .grdSelRow, .grdRowSmall {
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    color: black;
}

.grdRowRed, .grdAltRowRed {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    color: red;
}

.grdRow, .grdRowRed, .grdRowSmall, .grdRowSmall {
    background-color: white;
}

.grdAltRow, .grdAltRowRed {
    background-color: lightgray;
}
    .grdRow a, .grdAltRow a, .grdSelRow a, .grdRowSmall a {
        color: black;
    }
    .grdRowRed a, .grdAltRowRed a {
        color: red;
    }
    .grdRow td, .grdSelRow td, .grdAltRow td, .grdRowRed td, .grdAltRowRed td, .grdRowSmall td {
        border-style: solid;
        border-width: 2px;
        border-color: white;
        padding: 8px;
    }
    .grdRowSmall td {
        padding: 0;
    }

.grdLabel {
    vertical-align: middle;
}
    .grdLabel td {
        border-style: solid;
        border-width: 2px;
        border-color: white;
        padding: 8px;
    }
.grdCellGreen {
    background-color:green;
}
/*.grdRowImage {
    background-color: white;
    padding: 0px;
}
    .grdRowImage td {
        border-style: solid;
        border-width: 2px;
        border-color: white;
        padding: 0px;
    }*/

.lnkPager {
    font-weight: bold;
    color: gray;
}
.lnkPagerPre {
    font-size: 20px;
    color: gray;
}
.lnkTitle {
    font-size: 24px;
    font-weight: bold;
    color: gray;
}
.lnkHeader {
    font-size: 18px;
}
.progressBackground {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -20px;
    right: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #CCCCCC;
    filter: alpha(opacity=80);
    opacity: 0.8;
    *-ms-filter: alpha(opacity=80);
    *-ms-opacity: 0.8;
    z-index: 1000002 !important;
}
.progressContent {
    background-color: #FFFFFF;
    text-align: center;
    position: absolute;
    width: 200px;
    left: 50%;
    top: 50%;
    padding: 40px;
    margin-top: -100px; /* make this half your image/element height */
    margin-left: -100px; /* make this half your image/element width */
    border-style: none;
    z-index: 1000002 !important;
}
.modalPopup {
    background-color: white;
    border-radius: 25px;
    border-style: solid;
    border-width: 1px;
    border-color: Gray;
    padding: 10px;
    left: 70px;
    top: 120px;
}
.modalBg {
    background-color: #cccccc;
    *-ms-filter: alpha(opacity=80);
    *-ms-opacity: 0.8;
    filter: alpha(opacity=80);
    opacity: 0.8;
}
.popupHeader {
    font-weight: bold;
    height: 18px;
    text-align: center;
    vertical-align: middle;
    padding: 4px 4px;
    white-space: nowrap;
}
.img {
    border-spacing: 2px;
    border-style: solid;
    border-width: 2px;
    border-collapse: separate;
    padding: 12px;
}
.imgGrid {
    border: none;
    padding: 12px;
}
.iFrame {
    border-spacing: 2px;
    border-style: solid;
    border-width: 2px;
    padding: 12px;
}
.tdTop {
    vertical-align: top;
}
.tdMiddle {
    vertical-align: middle;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}