/*  PeachOnlineStyle.css  */

.calendarContainer {
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 420;
    top: 133px;
    left: 409px;
    display: none;
}

.LinkFilterDesign {
    position: absolute;
    top: 5px;
    left: 696px;
    color: #d7d3d3;
    text-decoration: underline;
    cursor: pointer;
}

.LinkClearFilters {
    position: absolute;
    top: 5px;
    left: 545px;
    color: #d7d3d3;
    text-decoration: underline;
    cursor: pointer;
}

.StatusLink {
    position: absolute;
    top: 5px;
    left: 545px;
    color: #d7d3d3;
    text-decoration: underline;
    cursor: pointer;
}

    .StatusLink:hover {
        color: #bdb5b5;
    }

/* Screen  */
.screenBackGround {
    background-color: black;
    background-image: url(images/bg_blue10.jpg);
    overflow: auto;
    background-size: cover;
}

.subScreenBackGround {
    background-color: black;
    background-image: url(images/bg_blue10_lite.jpg);
    overflow: auto;
    background-size: cover;
}

.mainMenu {
    /*background-color: gray;*/
    /*background-image:url(images/bg_blue10.jpg);*/
}

.mainMenuFrames {
    z-index: 290;
    border: none;
    position: absolute;
    top: 0px;
    width: 800px;
    height: 580px;
    left: 0px;
    display: none;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.41);
}

/*  Main Menu  */
.menuSidePanel {
    font-size: 11pt;
    background-image: url(images/bg_metal.jpg);
    background-color: black;
    font-family: Arial;
    float: left;
    margin: 2px 1px 2px 1px;
    opacity: .90;
    text-align: center;
    left: 6px;
    top: 3px;
    border: 1px solid silver;
    border-radius: 6px;
}

.menuTopPanel {
    background-color: black;
    background-image: url(images/blue_header.png);
    border: 1px solid gray;
    color: Gainsboro;
    font-family: Arial;
    font-size: 12pt;
    border-radius: 4px;
}

.menuSideHeading {
    background-color: black;
    color: Gainsboro;
    font-family: Georgia;
    font-size: 13pt;
    font-style: italic;
}

.divMain {
    border: 0px solid dimgray;
}



/*  Home Menu  */
.menuHome {
    background-image: url(images/bg_ocean5.jpg);
    background-size: cover;
    background-color: white;
}

.menuHomeSignIn {
    font-family: Arial;
    font-size: 12pt;
    color: #808080;
}

.menuHomeItemPanel {
    /*background-image:url(images/bg_island.png);
    background-size: cover;*/
    /*background-color:white;*/
}

.menuHomeCombo {
    background-color: Gainsboro;
    border: 1px solid silver;
    border-radius: 4px;
    height: 26px;
}

.menuHomeLoginText {
    text-align: center;
    font-size: 11pt;
    color: dimgray;
    border-radius: 5px;
}

.menuHomeLink {
    font-family: Arial;
    font-size: 11pt;
}

.menuHomeItem {
    position: absolute;
    border-radius: 10px;
    width: 80px;
    height: 100px;
    color: white;
}

    .menuHomeItem:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
        color: #212020;
        cursor: pointer;
    }

.menuHomeItemInactive {
    opacity: .5;
    cursor: none;
}

.menuHomeItemImage {
    position: relative;
    top: 10px;
    left: 16px;
    height: 48px;
    /*width: 48px;*/
    cursor: pointer;
}

/*.menuHomeItemImage:hover {
        height: 52px;
        width: 52px;
    }*/

.menuHomeItemDisabledImage {
    /*separate Class to bypass hover*/
    position: relative;
    top: 10px;
    left: 16px;
    height: 48px;
    width: 48px;
    opacity: .5;
    /*pa3Dec15*/
}


.menuHomeItemText {
    position: relative;
    top: 12px;
    left: 4px;
    font-family: Arial;
    font-size: 10pt;
    /*color: white;*/
    width: 76px;
    text-align: center;
    cursor: pointer;
    color: inherit;
}

/*.menuHomeItemText:hover {
        position: relative;
        top: 12px;
        left: 2px;
        font-family: Arial;
        font-size: 11pt;
        color: white;
        width: 76px;
        text-align: center;
    }*/

.menuHomeItemDisabledText {
    position: relative;
    top: 12px;
    left: 4px;
    font-family: Arial;
    font-size: 10pt;
    color: gray;
    width: 76px;
    text-align: center;
    /*text-shadow: 1px 1px 3px rgba(98, 94, 94, 0.81);*/
    /*pa3Dec15*/
}

.menuReportsItemText {
    position: relative;
    top: 12px;
    left: 2px;
    font-family: Arial;
    font-size: 10pt;
    color: #212020;
    width: 76px;
    text-align: center;
    cursor: pointer;
}

    .menuReportsItemText:hover {
        position: relative;
        top: 12px;
        left: 2px;
        font-family: Arial;
        font-size: 11pt;
        color: #212020;
        width: 76px;
        text-align: center;
    }

.menuTransactionsItemText {
    position: relative;
    top: 12px;
    left: 0px;
    font-family: Arial;
    font-size: 10pt;
    color: #212020;
    width: 80px;
    text-align: center;
    cursor: pointer;
}

/*.menuTransactionsItemText:hover {
        position: relative;
        top: 12px;
        left: 2px;
        font-family: Arial;
        font-size: 11pt;
        color: #212020;
        width: 76px;
        text-align: center;
    }*/


/*  Menu Page  */
.menuPage {
    background-image: url(images/bg_ocean5.jpg);
    background-size: cover;
    background-color: white;
}

.menuPageItemHeader {
    position: relative;
    width: 235px;
    height: 40px;
    top: 1px;
    left: 0px;
    /*pa3Dec15*/
}

.menuPageItems {
    position: absolute;
    border-radius: 5px;
    width: 201px;
    height: 480px;
}

.menuPgProd {
    /*Prod Items only*/
    max-width: 180px;
}

.menuPgCust {
    /*Cust Items only*/
    max-width: 210px;
}

.menuPgSupp {
    /*Supp Items only*/
    max-width: 195px;
}

.menuPgPrice {
    /*Price Items only*/
    max-width: 195px;
}

.menuPageItem {
    position: relative;
    width: 205px;
    height: 40px;
    top: 1px;
    left: 0px;
}

    .menuPageItem:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
        cursor: pointer;
        border-radius: 8px;
    }

.menuPageItemInactive {
    opacity: .5;
    cursor: none;
}


.menuPageItemImage {
    position: absolute;
    top: 9px;
    left: 4px;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

    .menuPageItemImage:hover {
        position: absolute;
        top: 6px;
        left: 3px;
        height: 24px;
        width: 24px;
    }

.menuPageHeaderText {
    position: absolute;
    left: 40px;
    font-family: Arial;
    font-size: 16pt;
    color: #212020;
    width: 189px;
    text-align: left;
    top: 1px;
}

.menuPageItemText {
    position: absolute;
    left: 30px;
    font-family: Arial;
    font-size: 10pt;
    color: #212020;
    width: 180px;
    text-align: left;
    top: 11px;
    cursor: pointer;
}

/*.menuPageItemText:hover {
        position: absolute;
        left: 40px;
        font-family: Arial;
        font-size: 10pt;
        color: midnightblue;
        text-decoration: underline;
        width: 189px;
        text-align: left;
        top: 8px;
    }*/

/*  Control Page  */
.controlPageItems {
    position: absolute;
    border-radius: 5px;
    width: 239px;
    height: 460px;
}

.controlPageItem {
    position: relative;
    height: 36px;
    top: 0px;
    left: 0px;
    width: 98%;
}

.controlPageItemInactive {
    opacity: .5;
    cursor: none;
}

.controlPageItemImage {
    position: absolute;
    top: 7px;
    left: 4px;
    height: 24px;
    width: 24px;
    cursor: pointer;
}

    .controlPageItemImage:hover {
        position: absolute;
        top: 6px;
        left: 3px;
        height: 24px;
        width: 24px;
    }

.controlPageItemText {
    position: absolute;
    left: 40px;
    font-family: Arial;
    font-size: 10pt;
    color: #212020;
    width: 80%;
    text-align: left;
    top: 8px;
    color: white;
}

    .controlPageItemText:hover {
        color: silver;
        text-decoration: underline;
        cursor: pointer;
    }



/* Caption Panel*/
.captionPanel {
    background-color: Gainsboro;
    /*background-image:url(images/bg_silver.jpg);*/
    background-image: url(images/bluecaption.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 28px;
    border: 1px solid gray;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-family: Arial;
    font-size: 12pt;
    opacity: 1.0;
}

.captionText {
    font-family: Arial;
    font-size: 12pt;
    color: gainsboro;
    margin-top: 4px;
}

/*  Grid View   */


.gvTitlePanel {
    background-color: Gainsboro;
    background-image: url(images/bg_silver.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 28px;
    border: 1px solid gray;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-family: Arial;
    font-size: 12pt;
    opacity: 1.0;
}

.gvTitleText {
    font-family: Arial;
    font-size: 12pt;
    color: #535252;
    margin-top: 2px;
}


.gvAddRow {
    background-image: url(images/table_add_24.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 24px;
    width: 24px;
    position: absolute;
    right: 10px;
    top: 2px;
    cursor: pointer;
}

.gvDeleteRow {
    background-image: url(images/table_delete_24.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 24px;
    width: 24px;
    position: absolute;
    right: 48px;
    top: 2px;
    cursor: pointer;
}

.gvSlider {
    position: absolute;
    width: 200px;
    right: 8px;
    font-family: Arial;
    font-size: 9pt;
}

.gvSliderLeftImage {
    background-image: url(images/previous_grey_24.png);
}

.gvSliderRightImage {
    background-image: url(images/next_grey_24.png);
}

.gvHeadingRow {
    background-color: Gainsboro;
    /*background-image:url(images/Blue_Grid_Header.png);*/
    min-height: 23px;
    border: none;
    font-family: Arial;
    font-size: 10pt;
}

.gvHeadingCell {
    background-color: transparent;
    background-image: url(images/Blue_Grid_Header.png);
    background-size: contain;
    color: white;
    font-family: Arial;
    font-size: 10pt;
    text-align: center;
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-top: none;
    margin: 0px;
    padding: 0px;
    position: relative;
}

.gvHeadingTitle_Drag {
    border: none;
    border-right: 1px solid #C0C0C0;
    padding: 2px 2px 2px 2px;
    margin: 0px 0px 0px 0px;
    position: relative;
    cursor: move;
    min-height: 19px;
}

.gvHeadingTitle_Pointer {
    border: none;
    border-right: 1px solid #C0C0C0;
    padding: 2px 2px 2px 2px;
    margin: 0px 0px 0px 0px;
    position: relative;
    cursor: pointer;
    min-height: 19px;
}

.gvHeadingTitle {
    border: none;
    border-right: 1px solid #C0C0C0;
    padding: 2px 2px 2px 2px;
    margin: 0px 0px 0px 0px;
    position: relative;
    cursor: default;
    min-height: 19px;
}

.gvHeadingDivider_Resize {
    background-color: none;
    border: none;
    position: absolute;
    top: 0px;
    height: 100%;
    right: 0px;
    width: 5px;
    cursor: w-resize;
}

.gvHeadingDivider {
    background-color: transparent;
    border: none;
    position: absolute;
    top: 0px;
    height: 100%;
    right: 0px;
    width: 5px;
    cursor: default;
}


.gvHeadingCell_Yellow {
    background-image: url(images/Yellow_Grid_Header.png);
    color: #2b2b2b;
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_LightYellow {
    background-image: url(images/LightYellow_Grid_Header.png);
    color: #2b2b2b;
    min-height: 23px;
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Blue {
    background-image: url(images/MidBlue_Grid_Header.png);
    color: white;
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Green {
    background-image: url(images/Green_Grid_Header.png);
    color: white;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_BlueGreen {
    background-image: url(images/BlueGreen_Grid_Header.png);
    color: white;
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_LightGreen {
    background-image: url(images/LightGreen_Grid_Header.png);
    color: #2b2b2b;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_MidGreen {
    background-image: url(images/MidGreen_Grid_Header.png);
    color: white;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_LightBlue {
    background-image: url(images/LightBlue_Grid_Header.png);
    color: white;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Gold {
    background-image: url(images/Gold_Grid_Header.png);
    color: #2b2b2b;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Orange {
    background-image: url(images/Orange_Grid_Header.png);
    color: #1a1a1a;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Red {
    background-image: url(images/Red_Grid_Header.png);
    color: white;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Silver {
    background-image: url(images/Silver_Grid_Header.png);
    color: #2b2b2b;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Gray {
    background-image: url(images/Gray_Grid_Header.png);
    color: white;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Black {
    background-image: url(images/Black_Grid_Header.png);
    color: gainsboro;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_DarkGray {
    background-image: url(images/LightGray2_Grid_Header.png);
    color: gainsboro;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Peach {
    background-image: url(images/Peach_Grid_Header.png);
    color: #2b2b2b;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
    min-height: 23px;
}


.gvHeadingCell_Purple {
    background-image: url(images/Purple_Grid_Header.png);
    color: white;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Pink {
    background-image: url(images/Pink_Grid_Header.png);
    color: #2b2b2b;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_HotPink {
    background-image: url(images/HotPink_Grid_Header.png);
    color: #2b2b2b;
    min-height: 23px;
    border-right: none;
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_Coffee {
    background-image: url(images/Coffee_Grid_Header.png);
    color: white;
    min-height: 23px;
    border-right: none; /*1px solid #C0C0C0;*/
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_DarkOrange {
    background-image: url(images/DarkOrange_Grid_Header.png);
    background-size: contain;
    color: white;
    min-height: 23px;
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_LightPurple {
    background-image: url(images/LightPurple_Grid_Header.png);
    color: white;
    min-height: 23px;
    border-right: none; /*1px solid #C0C0C0;*/
    border-bottom: Gainsboro;
    border-left: none;
    border-top: none;
}

.gvHeadingCell_DarkGreen {
    background-image: url(images/DarkGreen_Grid_Header.png);
    color: white;
    min-height: 23px;
    border-right: none;
    border-bottom: #989191;
    border-left: none;
    border-top: none;
}


.gvDetails {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: white;
    border-top: 1px solid white;
    background-image: url(images/GrayButton3.png);
    background-size:cover;
}

.gvDetailsReset {
    overflow: hidden;
    background-color: white;
    border-top: 1px solid white;
}

.gvFooter {
    background-image: url(images/bg_silver12.jpg);
}

.gvEvenRow {
    background-color: whitesmoke;
}

.gvOddRow {
    background-color: white;
}


.gvSelectedRow {
    /*background-image: url(images/cell_lightblue_highlight.png);*/
    background-image: url(images/lightblue_highlightrow.png);
    background-size: cover;
}

.gvCell {
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: black;
    min-height: 22px;
    border-right: 1px solid #c9c7c7;
    border-bottom: none;
    border-left: none;
    border-top: 1px solid #c2bbbb;
    margin: 0px;
    padding: 0px;
}

.gvCellActive { /*sp20May20*/
    /*outline: 1px solid #7f9ee0;
    outline-offset: -1px;*/
    /*background-image: url(images/active_blue.png) !important;
    background-size: cover;*/
    padding: 1px 1px 1px 1px !important;
    border: 1px solid #7f9ee0 !important;
}

/*.gvCellActiveDarkBlue { pa14May20
    border-right: 2px solid #2568a9;
    border-bottom: 2px solid #2568a9;
    border-left: 2px solid #2568a9;
    border-top: 2px solid #2568a9;
}*/

.gvCellAlert {
    /*pa29Jun20 added !important to 3 lines below*/
    background-color: #ff2301 !important;
    font-family: Arial;
    font-size: 10pt;
    color: white !important;
    min-height: 22px;
    border-right: 1px solid silver;
    border-bottom: none;
    border-left: none;
    border-top: 1px solid silver;
    margin: 0px;
    padding: 0px;
    margin: 0px;
    padding: 0px;
    background-image: none !important;
}

/*sp20May20*/
.gvCellBG_Orange {
    background-color: #ff9001 !important;
    color: #000 !important;
    background-image: none !important;
}
/*pa17Nov20*/
.gvCellBG_DarkOrange {
    background-color: #f44e01 !important;
    color: white !important;
    background-image: none !important;
}
/*pa9Jul20*/
.gvCellBG_PaleYellow {
    background-color: #ffe4b1 !important;
    color: black !important;
    background-image: none !important;
}
/*pa8Sep20*/
.gvCellBG_VeryPaleYellow {
    background-color: #fff5e2 !important;
    color: black !important;
    background-image: none !important;
}
/*pa6Mar20*/
.gvCellBG_Yellow {
    background-color: #ffdb00 !important;
    color: black !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_LightSeaGreen {
    background-color: #19ba9d !important;
    color: black !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_Pelorous {
    background-color: #1aa2c0 !important;
    color: black !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_DarkOrchid {
    background-color: #9d18ba !important;
    color: white !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_DarkBlue {
    background-color: #1818af !important;
    color: white !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_SkyBlue {
    background-color: #6991ed !important;
    color: white !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_LightPink {
    background-color: #ed69ed !important;
    color: black !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_BlueGreen {
    background-color: #0c6464 !important;
    color: white !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_MedBlue {
    background-color: #1f71c7 !important;
    color: white !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_LightBlue {
    background-color: #01abde !important;
    color: white !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_VeryLightBlue {
    background-color: #a0e7fb !important;
    color: black !important;
    background-image: none !important;
}
/*pa7May20*/
.gvCellBG_MedPurple {
    background-color: #8556b7 !important;
    color: white !important;
    background-image: none !important;
}
/*pa9Jul20*/
.gvCellBG_GrayFont {
    background-color: transparent !important;
    color: gray !important;
    font-style: italic !important;
    background-image: none !important;
}
/*pa18Nov20*/
.gvCellBG_DarkGreen {
    background-color: #043604 !important;
    color: white !important;
    background-image: none !important;
}
/*pa18Nov20*/
.gvCellBG_MiddleGreen {
    background-color: #057105 !important;
    color: white !important;
    background-image: none !important;
}
/*pa16Jun21*/
.gvCellBG_Green {
    background-color: #028502 !important;
    color: white !important;
    background-image: none !important;
}
/*pa5Jan22*/
.gvCellBG_LightGreen {
    background-color: #a8f9a8 !important;
    color: black !important;
    background-image: none !important;
}
/*pa5Jan22*/
.gvCellBG_LightPeach {
    background-color: #fb9f8f !important;
    color: black !important;
    background-image: none !important;
}

/*pa19Jan22*/
.gvCellBG_HyperLinkLight {
    color: white !important;
    text-decoration: underline !important;
    cursor: pointer;
}
/*pa19Jan22*/
.gvCellBG_HyperLinkDark {
    color: navy !important;
    text-decoration: underline !important;
    cursor: pointer;
}

/*af4Apr24*/
.gvCellRedBoldItalic {
    background-color: transparent !important;
    color: #f90808 !important;
    background-image: none !important;
    font-style: italic;
    font-weight: bold;
}

.gvCellBold {
    font-weight: 600;
    /*background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: dimgray;
    min-height: 22px;
    border-right: 1px solid silver;
    border-bottom: none;
    border-left: none;
    border-top: 1px solid silver;
    margin: 0px;
    padding: 0px;
    margin: 0px;
    padding: 0px;*/
}


.gvCellItalic {
    background-color: transparent;
    font-style: italic;
    font-family: Arial;
    font-size: 10pt;
    color: dimgray;
    min-height: 22px;
    border-right: 1px solid silver;
    border-bottom: none;
    border-left: none;
    border-top: 1px solid silver;
    margin: 0px;
    padding: 0px;
    margin: 0px;
    padding: 0px;
}

/* af09Jul24   - Text styles only -- not backgrounds */
.gvCellText_Blue {
    color: blue !important;
}

.gvCellText_Green {
    color: green !important;
}

.gvCellText_Yellow {
    color: yellow !important;
}

.gvCellText_Red {
    color: red !important;
}

.gvCellSelected {
    background-image: url(images/light_yellow_highlight.png);
    background-size: contain;
    font-family: Arial;
    font-size: 10pt;
    color: black;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid silver;
    border-top: 1px solid silver;
    margin: 0px;
    padding: 0px;
    min-height: 22px;
}


.gvCellSelectedReadonly {
    background-image: url(images/bg_lightblue.png);
    background-size: contain;
    font-family: Arial;
    font-size: 10pt;
    color: black;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    border-top: 1px solid gray;
    margin: 0px;
    padding: 0px;
    min-height: 22px;
}


.gvCellDiv {
    border: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word;
}


.gvCellDivLineWrap {
    border: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
    margin: 0px 0px 0px 0px;
    word-wrap: break-word; /*allows for long words with no breaks or spaces to wrap*/
    /*overflow-wrap:break-word;*/
}

.gvCellDivEdit {
    border: 1px solid #5959a3;
    margin: 1px 1px 1px 1px;
    padding: 0px 0px 0px 0px;
}

.gvTextEdit {
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: black;
    overflow: hidden;
    outline: none;
    border: none;
    border-width: 0px;
    margin: 0px;
    padding: 2px 2px 2px 2px;
    /*min-height: 22px;*/
    resize: none;
}

    .gvTextEdit::selection {
        color: black;
        background-color: transparent;
    }

.gvTextEditSelect {
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: black;
    overflow: hidden;
    outline: none;
    border: none;
    border-width: 0px;
    margin: 1px;
    padding: 2px 4px 2px 2px;
    /*min-height: 22px;*/
    resize: none;
}

/*.gvTextEditSelect::selection {
    color: white;
    background-color: navy;
  
}*/

::-ms-clear {
    display: none;
}

.gvLineNumber {
    font-family: Arial;
    font-size: 10pt;
    color: black;
    border: 0px 0px 0px 0px;
    margin: 2px 2px 2px 2px;
    padding: 0px 0px 0px 0px;
}

/*  Drop Down Menu  */
.dmItem {
    background-color: #293955;
    color: silver;
    font-family: Arial;
    font-size: 11pt;
    height: 42px;
    width: 100%;
    cursor: pointer;
}

    .dmItem:hover {
        background-color: #5a74a1;
        color: white;
        font-family: Arial;
        font-size: 11pt;
        height: 42px;
        cursor: pointer;
    }


/*  Tree View Menu  */
.tvMenu {
    background-color: black;
    color: silver;
    font-family: Arial;
    font-size: 11pt;
    height: 34px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*scrollbar-arrow-color:gray;
    scrollbar-base-color:black;
    scrollbar-darkshadow-color:black;
    scrollbar-face-color:#3d3c3c;
    scrollbar-highlight-color:black;
    scrollbar-shadow-color:black;
    scrollbar-track-color:black;
    scrollbar-3dlight-color:black;*/
}

.tvGroupHeading {
    background-color: darkgray;
    color: black;
    font-family: Arial;
    font-size: 11pt;
    height: 32px;
    cursor: pointer;
    /*background-image:url(images/LightBlue_Highlight.png);*/
}

.tvItem {
    background-color: black;
    color: silver;
    font-family: Arial;
    font-size: 10pt;
    height: 34px;
}

tvItem:hover {
    cursor: pointer;
}

.tvItemDisabled {
    background-color: black;
    color: gray;
    font-family: Arial;
    font-size: 10pt;
    height: 34px;
    /*text-shadow: 1px 1px 0px #8e8e8e;*/
    /*pa3Dec15*/
}

tvItemDisabled:hover {
    cursor: default;
}

.tvItemSelected {
    background-color: #4b6c9e;
    color: white;
    font-family: Arial;
    font-size: 10pt;
    height: 34px;
}

.tvItemHighlight {
    background-image: url(images/Highlight_Blue.png);
    color: black;
    font-family: Arial;
    font-size: 10pt;
    height: 34px;
}





/*  Control Screens  */
.controlPageBackGround {
    position: absolute;
    left: 0px;
    top: -1px;
    background-image: url('images/bg_silver16.jpg');
    background-size: cover;
    -webkit-user-select: none;
}

.controlPanelHeading {
    position: absolute;
    font-family: Verdana;
    font-size: 12pt;
    color: Maroon;
    text-decoration: underline;
}

.controlSearchText { /*sp20May20*/
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    background-image: none;
    border-radius: 5px;
    border: 1px solid #b1afaf;
    padding: 2px 2px 3px 2px;
    outline: none;
}

    .controlSearchText:focus { /*sp20May20*/
        border: 2px solid #83b1d9;
        padding: 2px 2px 2px 1px;
        /*outline: 1px solid #7f9ee0;
        outline-offset: -1px;*/
    }

.controlSearchTextFocus { /*sp20May20*/
    position: absolute;
    font-family: Arial;
    font-size: 12pt;
    background-image: url(images/light_yellow_highlight.png);
    border-radius: 4px;
    border: 1px solid silver;
    padding: 2px;
    outline: none;
}

.controlSearchTextReadonly { /*sp20May20*/
    position: absolute;
    font-family: Arial;
    font-size: 12pt;
    background-image: url(images/bg_lightblue.png);
    border-radius: 4px;
    border: 1px solid dimgray;
    padding: 2px;
    outline: none;
}



.controlStats {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    background-color: White;
    text-align: right;
    min-height: 16px;
    padding: 1px 3px 0px 3px;
    white-space: nowrap;
    overflow: hidden;
}

.controlCalc {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    background-color: White;
    text-align: right;
    min-height: 17px;
    padding: 1px 3px 0px 3px;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.csgnFld { /* Flag only */
}

.costFld { /* Flag only */
}

.sellViewOnlyFld { /* Flag only */
    /*pa7Dec15*/
}

/*pa29Dec21*/
.controlDataLabel {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
}

.controlLabel {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
}

.controlLabelDisabled {
    /*pa31Dec*/
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #8e8e8e;
    text-shadow: 1px 1px 2px whitesmoke;
}

.controlLabelLink {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: navy;
    text-decoration: underline;
    cursor: pointer;
}

.controlLabelLinkDisabled {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #8e8e8e;
    text-shadow: 1px 1px 2px whitesmoke;
    text-decoration: underline;
    cursor: pointer;
}

.controlLabelHighlight {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    /*color: #535252;*/
    /*text-shadow: 1px 1px 2px yellow;*/
    color: rgb(0, 122, 204);
    font-weight: bold;
    text-decoration: underline;
}

.controlJQXDate {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: #535252;
    width: 60px;
}

.controlJQXCheckBox {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    width: 73px;
}

.controlJQXRadioButton {
    position: absolute;
    font-family: Arial;
    font-size: 11pt;
    color: #535252;
    width: 120px;
    height: 25px;
}

.controlCheckBox {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    width: 70px;
}

.controlPanel {
    position: absolute;
    border-bottom: 1px solid white;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid white;
    border-radius: 7px;
    top: 1px;
    left: 10px;
    height: 517px;
    width: 745px;
}

.controlText { /*sp20May20*/
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    background-color: White;
    min-height: 16px;
    padding: 1px 3px 0px 3px;
    white-space: nowrap;
    border: 1px solid silver;
    border-radius: 0px;
    -webkit-spellcheck: false;
    -webkit-appearance: none;
    outline: none;
}

.formText {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    background-color: White;
    min-height: 19px;
    box-sizing: border-box;
    padding: 0px 3px 0px 3px;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid silver;
    -webkit-appearance: none;
}


.controlSelect {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    background-color: White;
    min-height: 17px;
    padding: 1px 3px 0px 3px;
}

.controlGraphSelect {
    position: absolute;
    font-family: Arial;
    font-size: 11pt;
    color: silver;
    background-color: black;
    border: none;
    min-height: 20px;
}

.controlCsgnSelect {
    position: absolute;
    font-family: Arial;
    font-size: 11pt;
    border: 1px solid gray;
    min-height: 20px;
}


.controlCheckBox {
    position: absolute;
}

.controlStatusRow {
    background-image: url(images/blue_header.png);
    border: 1px solid black;
    border: 1px solid gainsboro;
    border-top: 1px solid dimgray;
    border-left: 1px solid dimgray;
    color: white;
    font-family: Arial;
    font-size: 10pt;
    border-radius: 1px;
    position: absolute;
    top: 546px;
    width: 796px;
    left: 0px;
    height: 30px;
    border-top: 2px solid white;
}

.controlDivSelected {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    background-color: #FFFF97;
    min-height: 17px;
    box-sizing: border-box;
    padding: 2px 3px 0px 3px;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid silver;
}

/*.controlDivSelected{position:absolute;font-family:Arial; font-size:11pt; color:Black; background-color:#FFFF97; padding:0px 0px 0px 0px; margin:0px; }*/

.controlSearchImage {
    position: absolute;
    height: 22px;
    width: 22px;
    cursor: pointer;
}

    .controlSearchImage:hover {
        position: absolute;
        height: 24px;
        width: 24px;
        opacity: 1;
    }

.controlOpenImage {
    position: absolute;
    height: 24px;
    width: 24px;
}

    .controlOpenImage:hover {
        position: absolute;
        height: 26px;
        width: 26px;
    }



.controlRefreshTS {
    position: absolute;
    height: 24px;
    width: 24px;
}

    .controlRefreshTS:hover {
        position: absolute;
        height: 30px;
        width: 30px;
        cursor: pointer;
    }


.controlNavigateImage {
    position: absolute;
    height: 22px;
    width: 22px;
}

    .controlNavigateImage:hover {
        position: absolute;
        height: 23px;
        width: 23px;
        cursor: pointer;
    }

.transactionPageBackGround {
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(images/bg_silver12.jpg);
    background-size: cover;
}

.controlToolBarImage {
    width: 28px;
    position: absolute;
    top: 1px;
    cursor: pointer;
    padding-left: 1px;
}

    .controlToolBarImage:hover {
        width: 30px;
        position: absolute;
        top: 1px;
    }

.controlTextBoxEdit { /*sp20May20*/
    background-color: #FFFF97;
    font-family: Arial;
    font-size: 9.75pt;
    color: black;
    margin: 0px;
    padding: 0px;
    max-height: 17px;
    border: none;
    outline: none;
}

.controlButton {
    position: absolute;
    border: 1px solid dimgray;
    border-top: 1px solid white;
    color: dimgray;
    /*background-image: url(images/GrayButton5.png);*/
    border-radius: 0px;
    height: 50px;
    width: 100px;
}

    .controlButton:hover {
        background-image: url(images/HighLight_Blue.png);
        cursor: pointer;
    }


.optionsBtn {
    position: absolute;
    border: 1px solid silver;
    background-image: url('images/Blue_ButtonLong.png');
    border-radius: 4px;
    height: 42px;
    width: 210px;
}

    .optionsBtn:hover {
        background-image: url(images/Blue_ButtonLongLight.png);
        border: 1px solid gray;
        border-radius: 4px;
        cursor: pointer;
    }

.optionsBtnText {
    position: absolute;
    font-family: Arial;
    font-size: 10.5pt;
    color: white;
    left: 45px;
    width: 40px;
    text-align: left;
}

.optionsBtnImage {
    position: absolute;
    top: 6px;
    height: 28px;
    left: 7px;
    cursor: pointer;
}

.optionsBtnInfoText {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #444444;
    top: 3px;
    left: 224px;
    width: 287px;
    height: 52px;
    text-align: center;
    vertical-align: central;
    border-bottom: 1px solid white;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid white;
    border-radius: 7px;
    padding-top: 2px;
    padding-bottom: 1px;
    padding-right: 2px;
    padding-left: 4px;
}

.optionsBtnConfirm {
    position: absolute;
    width: 285px;
    height: 50px;
    top: -1px;
    left: -1px;
    font-family: Arial;
    font-size: 9.75pt;
    text-align: center;
    vertical-align: central;
    border-bottom: 1px solid white;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid white;
    border-radius: 7px;
    padding: 4px;
    background-image: url('images/bg_silver10.jpg');
    background-repeat: no-repeat;
    visibility: hidden;
}

.optionsBtnConfirmText {
    position: absolute;
    font-family: Arial;
    font-size: 11.5pt;
    color: white;
    left: 45px;
    width: 40px;
    text-align: left;
}

.SendRecPL {
    position: absolute;
    top: 9px;
    width: 120px;
    height: 38px;
    border-radius: 4px;
}

    .SendRecPL:hover {
        cursor: pointer;
        border: 1px solid grey;
    }

.transactionButton {
    position: absolute;
    border: 1px solid silver;
    background-image: url(images/GrayButton3.png);
    border-radius: 4px;
    height: 50px;
    width: 95px;
}

    .transactionButton:hover {
        background-image: url(images/GrayButton3.png);
        border: 1px solid gray;
        border-radius: 4px;
        cursor: pointer;
    }

.controlButtonText {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #444444;
    left: 45px;
    width: 40px;
    text-align: center;
}


.controlButtonTextDisabled {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #8e8e8e;
    left: 45px;
    width: 40px;
    text-align: center;
    text-shadow: 1px 1px 2px whitesmoke;
    /*pa3Dec15*/
}

.controlButtonImage {
    position: absolute;
    top: 4px;
    height: 28px;
    left: 6px;
    cursor: pointer;
    width: 28px;
}

.controlButtonImageDisabled {
    position: absolute;
    top: 4px;
    height: 28px;
    left: 6px;
    cursor: pointer;
    width: 28px;
    opacity: .5;
}

.smallButtonImage {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    position: absolute;
    height: 21px;
    width: 20px;
}

    .smallButtonImage:hover {
        cursor: pointer;
        border: 1px solid whitesmoke;
    }

.statusLabel {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    height: 17px;
    border: 1px solid gray;
    border-bottom-color: white;
    border-right-color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip; /*ellipsis;*/
    /*padding-left: 2px;
    padding-right: 3px;*/
}

.statusLabelLink {
    /*pa17Nov20*/
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    height: 17px;
    border: 1px solid gray;
    border-bottom-color: white;
    border-right-color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    color: navy;
    text-decoration: underline;
    cursor: pointer;
}

.graphZoom {
    position: absolute;
    top: 5px;
    height: 24px;
    left: 802px;
    opacity: 50;
}

    .graphZoom:hover {
        opacity: 90;
        background-image: url(images/bluebutton6.png);
    }

.loadingCircle {
    position: absolute;
    background-color: orange;
    border-radius: 10px;
    visibility: hidden;
}

.loadingCircle1 {
    position: absolute;
    background-color: whitesmoke;
    border-radius: 10px;
    width: 8px;
    height: 8px;
}

.loadingCircle2 {
    position: absolute;
    background-color: silver;
    border-radius: 10px;
    width: 8px;
    height: 8px;
}

.loadingCircle3 {
    position: absolute;
    background-color: gainsboro;
    border-radius: 10px;
    width: 8px;
    height: 8px;
}

.loadingCircle4 {
    position: absolute;
    background-color: gray;
    border-radius: 10px;
    width: 8px;
    height: 8px;
}


/*  Search Screens  */

.searchPageBackGround {
    position: absolute;
    background-image: url('images/bg_silver16.jpg');
    background-size: cover;
    -webkit-user-select: none;
}

.searchPanelHeading {
    position: absolute;
    font-family: Verdana;
    font-size: 12pt;
    color: Maroon;
    text-decoration: underline;
}

.searchLabel {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: #535252;
}

.searchPanel {
    position: absolute;
    border-bottom: 1px solid white;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid white;
    border-radius: 7px;
}

.searchText { /*sp20May20*/
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    min-height: 18px;
    outline: none;
}

    .searchText:focus { /*sp20May20*/
        border: 2px solid #83b1d9;
    }

.textBoxDark { /*sp20May20*/
    position: absolute;
    font-family: Arial;
    font-size: 11pt;
    color: white;
    min-height: 18px;
    background-color: #313131;
    border-radius: 4px;
    border: 1px solid silver;
    outline: none;
}

    .textBoxDark::selection {
        /*color: white;  
        background-color: black;*/
        color: black;
        background-color: #b9b9b9;
    }

.blackButton {
    border: 1px solid black;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-color: inherit;
    position: absolute;
    background-color: transparent;
    border-radius: 8px;
    height: 45px;
    width: 100px;
    background-image: url('images/black_button3.png');
}


    .blackButton:hover {
        background-image: url('images/black_button2.png');
        cursor: pointer;
    }

.blackButtonText {
    position: absolute;
    text-align: center;
    left: 0px;
    width: 100px;
    top: 12px;
    color: white;
    font-family: Arial;
    font-size: 13pt;
    height: 20px;
}


/*Black Button*/
.blackButtonSmall {
    border-style: solid;
    border-width: 1px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    /*border-color: inherit;*/ /*pa2Nov21-- unsure why was set to inherit*/
    border-color: black;
    position: absolute;
    background-color: transparent;
    border-radius: 8px;
    height: 35px;
    width: 86px;
    background-image: url('images/black_button3.png');
}

    .blackButtonSmall:hover {
        background-image: url('images/black_button2.png');
        cursor: pointer;
    }

.blackButtonSmallText {
    position: absolute;
    text-align: center;
    left: 0;
    width: 82px;
    top: 9px;
    color: white;
    font-family: Arial;
    font-size: 11pt;
    height: 21px;
}

.blackButtonSmallText2ndLabel {
    position: absolute;
    text-align: right;
    right: 4px;
    width: 30px;
    top: 10px;
    color: lightblue; /*silver;*/
    font-family: Arial;
    font-size: 10pt; /*9pt;*/
}

/*Grey Button*/

.greyButtonSmall {
    border: 1px solid gray;
    opacity: 0.9;
    filter: alpha(opacity=90);
    position: absolute;
    background-color: transparent;
    border-radius: 8px;
    height: 35px;
    width: 86px;
    /*background-image: url('images/black_button3.png');*/
    background-color: #2b2b2b;
}

    .greyButtonSmall:hover {
        /*background-image: url('images/black_button2.png');*/
        border: 1px solid silver;
        background-color: #3b3939;
        cursor: pointer;
    }

.greyButtonSmallText {
    position: absolute;
    text-align: center;
    left: 0;
    width: 82px;
    top: 9px;
    color: white;
    font-family: Arial;
    font-size: 11pt;
}



.calcBtn {
    width: 75px;
    height: 45px;
    position: absolute;
    font-family: Arial;
    font-size: 16pt;
}

.boldRight {
    font-weight: bold;
    text-align: right;
}

/*  View Transaction Screen*/

.transLabel {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: #535252;
}

.transLabelDisabled {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: #8e8e8e;
    text-shadow: 1px 1px 2px whitesmoke;
}

.transHeading {
    position: absolute;
    font-family: Verdana;
    font-size: 12pt;
    color: Maroon;
    text-decoration: underline;
}

.dateIcon {
    position: absolute;
    background-image: url('images/calendar_24.png');
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

    .dateIcon:hover {
        border: 1px solid transparent; /*No Color*/
        cursor: pointer;
    }

/*  Non-Modal containers at Base of Screens*/

.nonModalContainer {
    position: absolute;
    background-image: url('images/bg_silver.jpg');
    background-size: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 1pt solid black;
    visibility: hidden;
    z-index: 100;
}

.modalContainer {
    position: absolute;
    background-image: url('images/bg_silver.jpg');
    background-size: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 1pt solid black;
    visibility: hidden;
    z-index: 100;
}

.bannerHeading {
    position: absolute;
    left: 55px;
    top: 8px;
}

.bannerIcon {
    background-image: url(images/form_yellow_32.png);
    position: absolute;
    left: 10px;
    top: 2px;
    height: 32px;
    width: 32px;
}

/* Modal Popups - not used now

.modalPopupScreen {
    position: absolute; 
    background-image:url('images/bg_silver.jpg'); 
    background-size:cover;
    z-index: 320; 
    border-radius: 10px; 
    border: 1pt solid black; 
    visibility: hidden;          
    /*top:271px; 
    left:165px;   
     width:550px;  
    height: 276px;  
}


.modalBanner {
    position:absolute; 
    left:0px; 
    top:0px; 
    background-image:url(images/bluecaption.png); 
    font-family:Arial; 
    font-size:13pt; 
    color:gainsboro; 
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    width: 100%;
    height:36px;
}
.modalClose {
    background-image:url(images/delete_32.png); 
    position:absolute; 
    right:4px; 
    top:1px;
    height:32px;
    width: 32px;
    
}
.modalClose:hover {
    background-color: #acdbff;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.modalPrevIcon {
    background-image:url(images/arrow_up_blue_32.png); 
    position: absolute;
    height:32px; 
    width:32px; 
}
.modalPrevIcon:hover {
    background-color: #acdbff;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.modalNextIcon {
    background-image:url(images/arrow_down_blue_32.png); 
    position: absolute;
    height:32px; 
    width:32px; 
    
}

.modalNextIcon:hover {
    background-color: #acdbff;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.modalLeftIcon {
    background-image:url(images/arrow_left_blue_32.png); 
    position: absolute;
    height:32px; 
    width:32px; 
}
.modalLeftIcon:hover {
    background-color: #acdbff;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.modalRightIcon {
    background-image:url(images/arrow_right_blue_32.png); 
    position: absolute;
    height:32px; 
    width:32px; 
    
}
.modalRightIcon:hover {
    background-color: #acdbff;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.modalAddLine {
    background-image:url(images/form_green_add_32.png); 
    position: absolute;
    height:32px; 
    width:32px; 
}
.modalAddLine:hover {
    background-color: #acdbff;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.modalDeleteLine {
    background-image:url(images/form_red_delete_32.png); 
    position: absolute;
    height:32px; 
    width:32px; 
}
.modalDeleteLine:hover {
    background-color: #acdbff;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.modalOKCancel {
    border:1px solid black; 
    opacity:0.9; 
    filter:alpha(opacity=90);
    border-color: inherit; 
    position:absolute; 
    background-color:transparent; 
    border-radius:8px; 
    height:36px; 
    width:78px; 
    background-image:url('images/black_button3.png')
    
}
.modalOKCancel:hover {
    background-image:url('images/black_button2.png');
    cursor: pointer;
} 
.modalOKCancelText {
    position:absolute; 
    text-align:center; 
    left:0px;  
    width:78px; 
    top:8px; 
    color:white; 
    font-family:Arial; 
    font-size:12pt; 
    
}



.modalInnerBoxes{
    position:absolute; 
    border: 1px solid gray;
    border-radius: 5px;
}
*/

.createNewCsgnArea {
    position: absolute;
    background-image: url(images/branch_element_new_48.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 52px;
    border: 1px solid gray;
    border-radius: 10px;
    background-size: 95%;
}

    .createNewCsgnArea:hover {
        height: 55px;
        width: 55px;
        cursor: pointer;
    }

.graphComboBanner {
    position: absolute;
    z-index: 200;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    visibility: hidden;
    /*background-color:black;*/
}

/*  Zoom  */
.zoom85 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(.8);
    -ms-transform-origin: 50% 50%;
    -moz-transform: scale(.8);
    -moz-transform-origin: 50% 50%;
    -webkit-transform: scale(.8);
    -webkit-transform-origin: 50% 50%;
    -o-transform: scale(.8);
    -o-transform-origin: 50% 50%;
    transform: scale(.8);
    transform-origin: 50% 50%;
}

.zoom90 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(.9);
    -moz-transform: scale(.9);
    -webkit-transform: scale(.9);
    -o-transform: scale(.9);
    -o-transform-origin: 50% 50%;
    transform: scale(.9);
}

.zoom93 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(.93);
    -ms-transform-origin: 50% 50%;
    -moz-transform: scale(.93);
    -moz-transform-origin: 50% 50%;
    -webkit-transform: scale(.93);
    -webkit-transform-origin: 50% 50%;
    -o-transform: scale(.93);
    -o-transform-origin: 50% 50%;
    transform: scale(.93);
    transform-origin: 50% 50%;
}

.zoom95 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(.95);
    -ms-transform-origin: 50% 50%;
    -moz-transform: scale(.95);
    -moz-transform-origin: 50% 50%;
    -webkit-transform: scale(.95);
    -webkit-transform-origin: 50% 50%;
    -o-transform: scale(.95);
    -o-transform-origin: 50% 50%;
    transform: scale(.95);
    transform-origin: 50% 50%;
}

.zoom100 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -o-transform-origin: 50% 50%;
    transform: scale(1.0);
}

.zoom105 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -o-transform-origin: 50% 50%;
    transform: scale(1.05);
}

.zoom110 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.zoom120 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(1.2);
    -ms-transform-origin: 50% 50%;
    -moz-transform: scale(1.2);
    -moz-transform-origin: 50% 50%;
    -webkit-transform: scale(1.2);
    -webkit-transform-origin: 50% 50%;
    -o-transform: scale(1.2);
    -o-transform-origin: 50% 50%;
    transform: scale(1.2);
    transform-origin: 50% 50%;
}

.zoomP110 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(1.1);
    -ms-transform-origin: 50% 50%;
    -moz-transform: scale(1.1);
    -moz-transform-origin: 50% 50%;
    -webkit-transform: scale(1.1);
    -webkit-transform-origin: 50% 50%;
    -o-transform: scale(1.1);
    -o-transform-origin: 50% 50%;
    transform: scale(1.1);
    transform-origin: 50% 50%;
}

.zoomP95 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(.95);
    -ms-transform-origin: 0% 0%;
    -moz-transform: scale(.95);
    -moz-transform-origin: 0% 0%;
    -webkit-transform: scale(.95);
    -webkit-transform-origin: 0% 0%;
    -o-transform: scale(.95);
    -o-transform-origin: 0% 0%;
    transform: scale(.95);
    transform-origin: 0% 0%;
}

.zoomP90 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(.90);
    -ms-transform-origin: 0% 0%;
    -moz-transform: scale(.90);
    -moz-transform-origin: 0% 0%;
    -webkit-transform: scale(.90);
    -webkit-transform-origin: 0% 0%;
    -o-transform: scale(.90);
    -o-transform-origin: 0% 0%;
    transform: scale(.90);
    transform-origin: 0% 0%;
}

.zoomP80 {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transform: scale(.80);
    -ms-transform-origin: 0% 0%;
    -moz-transform: scale(.80);
    -moz-transform-origin: 0% 0%;
    -webkit-transform: scale(.80);
    -webkit-transform-origin: 0% 0%;
    -o-transform: scale(.80);
    -o-transform-origin: 0% 0%;
    transform: scale(.80);
    transform-origin: 0% 0%;
}

.zoom70 {
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
    -ms-transform: scale(.7);
    -ms-transform-origin: 0% 0%;
    -moz-transform: scale(.7);
    -moz-transform-origin: 0% 0%;
    -webkit-transform: scale(.7);
    -webkit-transform-origin: 0% 0%;
    -o-transform: scale(.7);
    -o-transform-origin: 0% 0%;
    transform: scale(.7);
    transform-origin: 0% 0%;
}

.dvStartSkew {
    opacity: 0;
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
    -ms-transform: skew(30deg,20deg); /* Safari and Chrome */
}

.dvSkew {
    opacity: .1;
    -webkit-transition: all 0.5s ease-out; /* Safari and Chrome */
    -ms-transition: all 0.5s ease-out; /* Microsoft*/
    -moz-transition: all 0.5s ease-out; /*firefox*/
    -o-transition: all 0.5s ease-out; /*opera*/
    transition: all 0.5s ease-out; /*native*/
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
    -ms-transform: skew(30deg,20deg); /* Microsoft*/
    -moz-transform: skew(30deg,20deg); /*firefox*/
    -o-transform: skew(30deg,20deg); /*opera*/
    transform: skew(30deg,20deg); /* Native */
}

.dvUnSkew {
    opacity: 1;
    -webkit-transition: all 0.9s ease-in;
    -ms-transition: all 0.9s ease-in;
    -moz-transition: all 0.9s ease-in;
    -o-transition: all 0.9s ease-in;
    transition: all 0.9s ease-in;
    -webkit-transform: skew(0deg,0deg);
    -ms-transform: skew(0deg,0deg);
    -moz-transform: skew(0deg,0deg);
    -o-transform: skew(0deg,0deg);
    transform: skew(0deg,0deg);
}

/* Overthrow CSS: Enable overflow: auto on elements with overthrow class when html element has overthrow-enabled class */
.overthrow-enabled .overthrow {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrollIt {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}



/* Peach Reports */




/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    width: 840px; /* 960px */
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.header {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
    height: 50px;
    top: 0px;
    left: 0px;
}

.selDiv {
    position: absolute;
    font-family: Arial;
    font-size: 11pt;
    text-align: center;
}

.selText {
    position: absolute;
    font-family: Arial;
    font-size: 12pt;
}

.tbSearch {
    position: absolute;
    font-family: Arial;
    font-size: 12pt;
}



@-webkit-keyframes bounce {
    from {
        left: 720px;
    }

    to {
        left: 750px;
    }
}

.imgMove {
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-direction: alternate;
}



div.spinner {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-block;
}

    div.spinner div {
        width: 12%;
        height: 26%;
        background: #000;
        position: absolute;
        left: 44.5%;
        top: 37%;
        opacity: 0;
        -webkit-animation: fade 1s linear infinite;
        -webkit-border-radius: 50px;
        -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    }

        div.spinner div.bar1 {
            -webkit-transform: rotate(0deg) translate(0, -142%);
            -webkit-animation-delay: 0s;
        }

        div.spinner div.bar2 {
            -webkit-transform: rotate(30deg) translate(0, -142%);
            -webkit-animation-delay: -0.9167s;
        }

        div.spinner div.bar3 {
            -webkit-transform: rotate(60deg) translate(0, -142%);
            -webkit-animation-delay: -0.833s;
        }

        div.spinner div.bar4 {
            -webkit-transform: rotate(90deg) translate(0, -142%);
            -webkit-animation-delay: -0.75s;
        }

        div.spinner div.bar5 {
            -webkit-transform: rotate(120deg) translate(0, -142%);
            -webkit-animation-delay: -0.667s;
        }

        div.spinner div.bar6 {
            -webkit-transform: rotate(150deg) translate(0, -142%);
            -webkit-animation-delay: -0.5833s;
        }

        div.spinner div.bar7 {
            -webkit-transform: rotate(180deg) translate(0, -142%);
            -webkit-animation-delay: -0.5s;
        }

        div.spinner div.bar8 {
            -webkit-transform: rotate(210deg) translate(0, -142%);
            -webkit-animation-delay: -0.41667s;
        }

        div.spinner div.bar9 {
            -webkit-transform: rotate(240deg) translate(0, -142%);
            -webkit-animation-delay: -0.333s;
        }

        div.spinner div.bar10 {
            -webkit-transform: rotate(270deg) translate(0, -142%);
            -webkit-animation-delay: -0.25s;
        }

        div.spinner div.bar11 {
            -webkit-transform: rotate(300deg) translate(0, -142%);
            -webkit-animation-delay: -0.1667s;
        }

        div.spinner div.bar12 {
            -webkit-transform: rotate(330deg) translate(0, -142%);
            -webkit-animation-delay: -0.0833s;
        }

@-webkit-keyframes fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.25;
    }
}

.scrollingWithMomentum {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}


/*slider control */

.sliderControl {
    position: relative;
    height: 10px;
    background-color: #336;
    border: 1px solid #336;
    width: 200px;
}

    .sliderControl .handle {
        position: absolute;
        cursor: pointer;
    }

    .sliderControl .sliderBar {
        background-color: #ddd;
        top: -10px;
        height: 27px;
        border: 1px solid gray;
        border-radius: 4px;
        width: 12px;
        position: absolute;
        cursor: pointer;
    }

    .sliderControl .disabled {
        background: #898989;
    }


/*calendar */

.calFrame {
    position: absolute;
    width: 282px;
    height: 340px;
    background-color: black;
    border: 1px solid silver;
}

.calHeader {
    height: 40px;
    background-color: black;
    border: 1px solid orange;
}

.calPrevious {
    position: absolute;
    top: 7px;
    left: 8px;
    height: 24px;
    width: 24px;
    background-size: contain;
    background-image: url('images/orange_arrow_left.png');
    cursor: pointer;
}

.calNext {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 24px;
    width: 24px;
    background-size: contain;
    background-image: url('images/orange_arrow_right.png');
    cursor: pointer;
}

.calMonth {
    position: absolute;
    top: 10px;
    left: 40px;
    height: 20px;
    width: 200px;
    text-align: center;
    background-color: black;
    color: silver;
    font-family: Arial;
    font-size: 12pt;
    /*border: 1px solid silver;*/
}

.calBody {
    background-color: #232323;
    border: 1px solid silver;
}

.calFooter {
    background-color: black;
    /*border: 1px solid silver;*/
}


.calCloseLink {
    font-family: Arial;
    font-size: 11pt;
    text-decoration: underline;
    color: silver;
    position: absolute;
    left: 8px;
    top: 9px;
    cursor: pointer;
}

.calTodayLink {
    font-family: Arial;
    font-size: 11pt;
    text-decoration: underline;
    color: silver;
    position: absolute;
    left: 230px;
    top: 9px;
    cursor: pointer;
}

.calCell {
    background-color: transparent;
    height: 36px;
    width: 39px;
    padding: 0px;
    margin: 0px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;
    text-align: center;
    cursor: pointer;
}

.calTextActive {
    padding: 0px;
    margin: 2px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: white;
    text-align: center;
}

.calTextInActive {
    padding: 0px;
    margin: 2px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: gray;
    text-align: center;
    cursor: pointer;
}

.calTextWeekend {
    padding: 0px;
    margin: 2px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: white;
    text-align: center;
}

.calTextToday {
    padding: 0px;
    margin: 2px;
    font-family: Arial;
    font-size: 10pt;
    color: orange;
    text-align: center;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: transparent;
}

.calCellSelectedDay {
    padding: 0px;
    margin: 2px;
    background-color: midnightblue;
    font-family: Arial;
    font-size: 10pt;
    color: white;
    text-align: center;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}


/*comboLight */
.comboLightSearch {
    box-shadow: 7px 8px 5px #888;
}

.comboLight {
    border: 1px solid silver;
    border-radius: 4px;
    background-image: url(images/cb_silver.png);
    outline: none; /*pa1Sep20*/
}

    .comboLight:hover {
        border: 1px solid gray;
        background-image: url(images/cb_silver.png);
        cursor: pointer;
    }

.comboLight_Focus {
    border: 1px solid gray;
    border-radius: 4px;
    background-image: url(images/cb_blue_highlight.png);
}

    .comboLight_Focus:hover {
        border: 1px solid #121212;
        background-image: url(images/cb_blue_highlight.png);
    }

.comboLight_HeaderImage {
    background-image: url('images/treedownBlackArrow.gif');
}

.comboLight_HeaderResetImage {
    background-image: url('images/close_silver_24.png');
}

/*pa9Sep21*/
.comboLight_HeaderKeyOpenImage {
    background-image: url('images/outline_multiple_stop_black_48dp.png');
}


.comboLight_HeaderCell {
    font-family: Arial;
    font-size: 10pt;
    color: black;
    text-align: left;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 3px;
    padding-bottom: 2px;
    border: none;
}

.comboLight_HeaderCell_Focus {
    font-family: Arial;
    font-size: 10pt;
    color: white;
    text-align: left;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 3px;
    padding-bottom: 2px;
    border: none;
}

.comboLight_Items {
    min-height: 80px;
    border: 1px solid dimgray;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    box-shadow: 7px 8px 5px #888;
}



.comboLight_Row {
    background-color: white;
    color: black;
    background-image: none;
    cursor: pointer;
    border-bottom: 1px solid gainsboro;
}

    .comboLight_Row:hover {
        background-image: url(images/Highlight_Blue.png);
    }

.comboLight_SelectedRow {
    background-color: #0184c3;
    background-image: url(images/cb_blue_highlight.png);
    color: white;
    cursor: pointer;
}

.comboLight_Cell {
    font-family: Arial;
    font-size: 10pt;
    text-align: left;
    border-right: 1px solid gainsboro;
    padding-left: 6px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.comboLight_Cell_iPad {
    font-family: Arial;
    font-size: 10pt;
    text-align: left;
    border-right: 1px solid gainsboro;
    padding-left: 6px;
    padding-right: 3px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/*comboDark */

.comboDark {
    border: 1px solid silver;
    border-radius: 4px;
    background-image: none;
    background-color: black;
}

    .comboDark:hover {
        border: 1px solid gray;
        background-image: none;
        background-color: #242323;
    }

.comboDark_Focus {
    border: 1px solid gray;
    border-radius: 4px;
    background-image: none;
    background-color: #242323;
}

.comboDark_HeaderImage {
    background-image: url('images/treedownWhiteArrow.gif');
}
/*pa9Sep21*/
.comboDark_HeaderKeyOpenImage {
    background-image: url('images/outline_multiple_stop_white_48dp.png');
}

.comboDark_HeaderCell {
    font-family: Arial;
    font-size: 10pt;
    color: gainsboro;
    text-align: left;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 3px;
    padding-bottom: 2px;
    border: none;
}

.comboDark_HeaderCell_Focus {
    font-family: Arial;
    font-size: 10pt;
    color: gainsboro;
    text-align: left;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 3px;
    padding-bottom: 2px;
    border: none;
}

.comboDark_Items {
    min-height: 80px;
    border: 1px solid silver;
    background-color: black;
    -webkit-overflow-scrolling: touch;
}



.comboDark_Row {
    background-color: black;
    color: gainsboro;
    background-image: none;
    cursor: pointer;
}

    .comboDark_Row:hover {
        background-image: url(images/Highlight_Blue.png);
        color: black;
    }

.comboDark_SelectedRow {
    background-image: url(images/cb_blue_highlight.png);
    color: white;
    cursor: pointer;
}

.comboDark_Cell {
    font-family: Arial;
    font-size: 10pt;
    text-align: left;
    border-right: 1px solid dimgray;
    padding-left: 6px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.comboDark_Cell_iPad {
    font-family: Arial;
    font-size: 10pt;
    text-align: left;
    border-right: 1px solid dimgray;
    padding-left: 6px;
    padding-right: 3px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/*comboGrey */

.comboGrey {
    border: 1px solid gray;
    border-radius: 4px;
    background-image: none;
    background-color: #242323;
}

    .comboGrey:hover {
        border: 1px solid silver;
        background-image: none;
        background-color: #1f1f1f;
    }

.comboGrey_Focus {
    border: 1px solid gray;
    border-radius: 4px;
    background-image: none;
    background-color: #242323;
}

.comboGrey_HeaderImage {
    background-image: url('images/treedownWhiteArrow.gif');
}
/*pa9Sep21*/
.comboGrey_HeaderKeyOpenImage {
    background-image: url('images/outline_multiple_stop_white_48dp.png');
}

.comboGrey_HeaderCell {
    font-family: Arial;
    font-size: 10pt;
    color: gainsboro;
    text-align: left;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 3px;
    padding-bottom: 2px;
    border: none;
}

.comboGrey_HeaderCell_Focus {
    font-family: Arial;
    font-size: 10pt;
    color: gainsboro;
    text-align: left;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 3px;
    padding-bottom: 2px;
    border: none;
}

.comboGrey_Items {
    min-height: 80px;
    border: 1px solid silver;
    background-color: #242323;
    -webkit-overflow-scrolling: touch;
}



.comboGrey_Row {
    background-color: #242323;
    color: gainsboro;
    background-image: none;
    cursor: pointer;
}

    .comboGrey_Row:hover {
        background-image: url(images/Highlight_Blue.png);
        color: black;
    }

.comboGrey_SelectedRow {
    background-image: url(images/cb_blue_highlight.png);
    color: white;
    cursor: pointer;
}

.comboGrey_Cell {
    font-family: Arial;
    font-size: 10pt;
    text-align: left;
    border-right: 1px solid dimgray;
    padding-left: 6px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.comboGrey_Cell_iPad {
    font-family: Arial;
    font-size: 10pt;
    text-align: left;
    border-right: 1px solid dimgray;
    padding-left: 6px;
    padding-right: 3px;
    padding-top: 8px;
    padding-bottom: 8px;
}


/*comboClear */
.comboClear {
    border: none;
    border-radius: 0px;
    background-image: none;
}

    .comboClear:hover {
        border: none;
        background-image: none;
        cursor: pointer;
    }

.comboClear_Focus {
    border: none;
    border-radius: 0px;
    background-image: none;
}

.comboClear_HeaderImage {
    background-image: url('images/treedownBlackArrow.gif');
}
/*pa9Sep21*/
.comboClear_HeaderKeyOpenImage {
    background-image: url('images/outline_multiple_stop_black_48dp.png');
}

.comboClear_HeaderCell {
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    text-align: left;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 3px;
    padding-bottom: 2px;
    border: none;
}

    .comboClear_HeaderCell:hover {
        font-family: Arial;
        font-size: 9.75pt;
        color: #535252;
        text-align: left;
        padding-top: 3px;
        padding-left: 4px;
        padding-right: 3px;
        padding-bottom: 2px;
        text-decoration: underline;
        color: midnightblue;
        border: none;
    }

.comboClear_HeaderCell_Focus {
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    text-decoration: underline;
    text-align: left;
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 3px;
    padding-bottom: 2px;
    border: none;
}

.comboClear_Items {
    min-height: 80px;
    border: 1px solid silver;
    background-color: gainsboro;
    -webkit-overflow-scrolling: touch;
}



.comboClear_Row {
    background-color: gainsboro;
    /*color: black;*/
    background-image: none;
    cursor: pointer;
}

    .comboClear_Row:hover {
        /*background-image:url(images/Highlight_Blue.png);*/
        text-decoration: underline;
    }

.comboClear_SelectedRow {
    /*background-image:url(images/cb_blue_highlight.png);*/
    /*color:white;*/
    cursor: pointer;
}

.comboClear_Cell {
    font-family: Arial;
    font-size: 10pt;
    text-align: left;
    border-right: 1px solid gainsboro;
    padding-left: 6px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
}

    .comboClear_Cell:hover {
        font-family: Arial;
        font-size: 10pt;
        text-align: left;
        border-right: 1px solid gainsboro;
        padding-left: 6px;
        padding-right: 3px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-decoration: underline;
        color: midnightblue;
    }

.comboClear_Cell_iPad {
    font-family: Arial;
    font-size: 10pt;
    text-align: left;
    border-right: 1px solid gainsboro;
    padding-left: 6px;
    padding-right: 3px;
    padding-top: 8px;
    padding-bottom: 8px;
}

    .comboClear_Cell_iPad:hover {
        font-family: Arial;
        font-size: 10pt;
        text-align: left;
        border-right: 1px solid gainsboro;
        padding-left: 6px;
        padding-right: 3px;
        padding-top: 8px;
        padding-bottom: 8px;
        text-decoration: underline;
        color: midnightblue;
    }




/*checkbox */
/*--------------------Light Theme */
.checkBoxLight {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    cursor: pointer;
}

    .checkBoxLight:hover {
        color: navy;
        text-decoration: underline;
        cursor: pointer;
    }

.checkBoxLight_Caption {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    cursor: pointer;
}

.checkBoxLight_Caption_Disabled {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #8e8e8e;
    cursor: pointer;
    text-shadow: 1px 1px 2px whitesmoke;
}

.checkBoxLight_Image_Disabled {
    position: absolute;
    background-size: cover;
    border: 1px solid #8e8e8e;
    border-radius: 3px;
    background-color: transparent;
    color: #181818;
    cursor: default;
}

.checkBoxLight_Image {
    position: absolute;
    background-size: cover;
    border: 1px solid #a9a8a8;
    border-radius: 3px;
    background-color: whitesmoke;
    color: #181818;
    cursor: pointer;
}

    .checkBoxLight_Image:hover {
        position: absolute;
        background-size: cover;
        border: 1px solid #a9a8a8;
        border-radius: 3px;
        background-color: gainsboro;
        color: #181818;
        cursor: pointer;
    }

/*--------------------Dark Theme */

.checkBoxDark {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #b7b5b5;
    cursor: pointer;
}

    .checkBoxDark:hover {
        color: white;
        text-decoration: underline;
        cursor: pointer;
    }

.checkBoxDark_Caption {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #b7b5b5;
    cursor: pointer;
}

.checkBoxDark_Caption_Disabled {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #8e8e8e;
    cursor: default;
    /*text-shadow: 1px 1px 2px whitesmoke;*/
}


.checkBoxDark_Image {
    position: absolute;
    background-size: cover;
    border: 1px solid #8b8b8b; /*whitesmoke  #d1cece  */
    border-radius: 3px;
    background-color: transparent;
    color: white;
    cursor: pointer;
}

    .checkBoxDark_Image:hover {
        position: absolute;
        background-size: cover;
        border: 1px solid white;
        border-radius: 3px;
        background-color: transparent;
        color: white;
        cursor: pointer;
    }

.checkBoxDark_Image_Disabled {
    position: absolute;
    background-size: cover;
    border: 1px solid gray;
    border-radius: 3px;
    background-color: transparent;
    color: white;
    cursor: default;
}


/*radioButton */

/*--------------------Light Theme */
.radioButtonLight {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    cursor: pointer;
}

    .radioButtonLight:hover {
        color: navy;
        text-decoration: underline;
        cursor: pointer;
    }
    /*pa20Mar23*/
    .radioButtonLight:focus-visible {
        outline: none;
        border: none;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
    }

.radioButtonLight_Caption {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    cursor: pointer;
}

.radioButtonLight_Image {
    position: absolute;
    background-size: cover;
    border: 1px solid #a9a8a8;
    border-radius: 8px;
    background-color: whitesmoke;
    color: #535252;
    cursor: pointer;
}

    .radioButtonLight_Image:hover {
        position: absolute;
        background-size: cover;
        border: 1px solid #a9a8a8;
        border-radius: 8px;
        background-color: gainsboro;
        color: #535252;
        cursor: pointer;
    }

.radioButtonLight_Caption_Disabled {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #8e8e8e;
    cursor: pointer;
    text-shadow: 1px 1px 2px whitesmoke;
}

.radioButtonLight_Image_Disabled {
    position: absolute;
    background-size: cover;
    border: 1px solid #8e8e8e;
    border-radius: 8px;
    background-color: transparent;
    color: #181818;
    cursor: default;
}
/*--------------------Dark Theme */
.radioButtonDark {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #b7b5b5;
    cursor: pointer;
}

    .radioButtonDark:hover {
        color: white;
        text-decoration: underline;
        cursor: pointer;
    }

    /*pa20Mar23*/
    .radioButtonDark:focus-visible {
        outline: none;
        border: none;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
    }

.radioButtonDark_Caption {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #b7b5b5;
    cursor: pointer;
}

.radioButtonDark_Image {
    position: absolute;
    background-size: cover;
    border: 1px solid whitesmoke;
    border-radius: 8px;
    background-color: transparent;
    color: white;
    cursor: pointer;
}

    .radioButtonDark_Image:hover {
        position: absolute;
        background-size: cover;
        border: 1px solid white;
        border-radius: 8px;
        background-color: transparent;
        color: white;
        cursor: pointer;
    }

.radioButtonDark_Caption_Disabled {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #8e8e8e;
    cursor: default;
    /*text-shadow: 1px 1px 2px whitesmoke;*/
}

.radioButtonDark_Image_Disabled {
    position: absolute;
    background-size: cover;
    border: 1px solid gray;
    border-radius: 8px;
    background-color: transparent;
    color: white;
    cursor: default;
}
/*--------------------End Radio Buttons */


.switchButton {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 24px;
    width: 150px;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
}

.switchLeftButton {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 24px;
    width: 59px;
    font-family: Arial;
    font-size: 11pt;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    text-align: center;
    padding-top: 2px;
    color: #535252;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    background-image: url(images/bg_svr.png);
    cursor: pointer;
}

.switchCentreButton {
    position: absolute;
    top: 0px;
    left: 60px;
    height: 24px;
    width: 30px;
    font-family: Arial;
    font-size: 11pt;
    color: #8d8d8d; /*white;*/
    text-align: center;
    padding-top: 2px;
    border: 1px solid gray;
    background-image: url(images/bg_svr.png);
    cursor: pointer;
}

.switchRightButton {
    position: absolute;
    top: 0px;
    left: 92px;
    height: 24px;
    width: 57px;
    font-family: Arial;
    font-size: 11pt;
    text-align: center;
    padding-top: 2px;
    color: white;
    border-top: 1px solid gray;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    /*background-image: url(images/MidBlue_Grid_Header.png);*/
    background-image: url(images/Green_Grid_Header.png);
    cursor: pointer;
}

.subTableHeading {
    position: absolute;
    font-family: Verdana;
    font-size: 11pt;
    color: midnightblue;
    text-decoration: underline;
}

.subTableHeadingDisabled {
    position: absolute;
    font-family: Verdana;
    font-size: 11pt;
    color: #8e8e8e;
    text-decoration: underline;
    text-shadow: 1px 1px 2px whitesmoke;
}


.searchCaption {
    position: absolute;
    width: 100%;
    height: 36px;
    left: 0px;
    top: 0px;
    background-image: url('images/bluecaption.png');
    font-family: Arial;
    font-size: 13pt;
    color: gainsboro;
}

.searchCaptionBar {
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0px;
    top: 31px;
    background-color: transparent;
    font-family: Arial;
}

    .searchCaptionBar:after {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 0%;
        height: 100%;
        background-color: rgba(255,255,255,0.5);
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }
    /* on hover we animate the width to
  * 100% and opacity to 0 so the element
  * grows and fades out 
  */
    .searchCaptionBar:hover:after {
        width: 120%;
        background-color: rgba(255,255,255,0);
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.9s ease-out;
    }


@keyframes slideOpen {
    from {
        transform: translateZ(0);
        transform: translate(-100%,0%);
        opacity: .0;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes slideOpen {
    from {
        -webkit-transform: translate(-100%,0px);
        opacity: .0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: translate(0px,0px);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes slideUpOpen {
    from {
        transform: translateZ(0);
        transform: translate(0px,0px);
        opacity: .0;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: translate(0px,-270px);
        opacity: 1;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }
}

@-webkit-keyframes slideUpOpen {
    from {
        -webkit-transform: translate(0px,0px);
        opacity: .0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: translate(0px,-270px);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-fill-mode: forwards;
    }
}



@keyframes shrinkClose {
    0% {
        transform: translate3d(0px, 0px, 0px) scale3d(1,1,1);
        animation-timing-function: linear;
        opacity: 1;
    }

    40% {
        transform: translate3d(0px, 400px, 0px) scale3d(.5,.5,.5);
        animation-timing-function: linear;
        opacity: .5;
    }

    100% {
        transform: translate3d(-0px, 700px, 0px) scale3d(.1,.1,.1);
        animation-timing-function: ease-out;
        opacity: 0;
    }
}

@-webkit-keyframes shrinkClose {
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1,1,1);
        -webkit-animation-function: linear;
        opacity: 1;
    }

    40% {
        -webkit-transform: translate3d(0px, 400px, 0px) scale3d(.5,.5,.5);
        -webkit-animation-timing-function: linear;
        opacity: .5;
    }

    100% {
        -webkit-transform: translate3d(-0px, 700px, 0px) scale3d(.1,.1,.1);
        -webkit-animation-timing-function: ease-out;
        opacity: 0;
    }
}

@keyframes rotateYOpen {

    0% {
        transform: rotateY(0deg);
        animation-timing-function: ease-in-out;
        -webkit-transform: rotateY(0deg);
        -webkit-animation-timing-function: ease-in-out;
        opacity: 1;
    }

    100% {
        transform: rotateY(55deg);
        animation-timing-function: ease-in-out;
        -webkit-transform: rotateY(55deg);
        -webkit-animation-timing-function: ease-in-out;
        opacity: 1;
    }
}

@-webkit-keyframes rotateYOpen {
    0% {
        -webkit-transform: rotateY(0deg);
        -webkit-animation-timing-function: ease-in-out;
        opacity: 1;
    }

    100% {
        -webkit-transform: rotateY(55deg);
        -webkit-animation-timing-function: ease-in-out;
        opacity: 1;
    }
}

@keyframes clearRotateYOpen {

    0% {
        transform: rotateY(55deg);
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    100% {
        transform: rotateY(0deg);
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
}

@-webkit-keyframes clearRotateYOpen {

    0% {
        -webkit-transform: rotateY(55deg);
        -webkitanimation-timing-function: ease-in-out;
        opacity: 1;
    }

    100% {
        -webkittransform: rotateY(0deg);
        -webkitanimation-timing-function: ease-in-out;
        opacity: 1;
    }
}


@keyframes slideDownOpen {
    from {
        transform: translate(0%,-100%);
        opacity: .0;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes slideDownOpen {
    from {
        -webkit-transform: translate(-0%,-100px);
        opacity: .0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: translate(0px,0px);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes slideLeftOpen {
    from {
        transform: translate(-500%,0%);
        opacity: .0;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes slideLeftOpen {
    from {
        -webkit-transform: translate(-500%,0px);
        opacity: .0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: translate(0px,0px);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes fadeOpen {
    from {
        opacity: 0;
        transform: translateZ(0);
        animation-timing-function: ease-in-out;
    }

    to {
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes fadeOpen {
    from {
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}


@keyframes fadeSlowOpen {
    from {
        opacity: .2;
        animation-timing-function: ease-in-out;
    }

    to {
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes fadeSlowOpen {
    from {
        opacity: .2;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes growOpen {
    from {
        transform: translateZ(0);
        transform: scale(.9);
        opacity: 0;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes growOpen {
    from {
        -webkit-transform: scale(.9);
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes growDownOpen {
    from {
        transform: scale(.2);
        opacity: 0;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes growDownOpen {
    from {
        -webkit-transform: scale(.9);
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes rotateOpen {
    from {
        transform: rotateX(90deg);
        opacity: 0;
        transform-style: preserve-3d;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: rotateX(0deg);
        opacity: 1;
        transform-style: preserve-3d;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes rotateOpen {
    from {
        -webkit-transform: rotateX(90deg);
        opacity: 0;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes skewOpen {
    from {
        transform: skew(30deg,20deg);
        opacity: 0;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: skew(0deg,0deg);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes skewOpen {
    from {
        -webkit-transform: skew(30deg,20deg);
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: skew(0deg,0deg);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes stretchOpen {
    from {
        transform: scaleX(.5);
        opacity: 0;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes stretchOpen {
    from {
        -webkit-transform: scale(.5);
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes slideClose {
    from {
        transform: translate(0px,0px);
        animation-timing-function: ease-in-out;
    }

    to {
        transform: translate(100%,0px);
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes slideClose {
    from {
        -webkit-transform: translate(0px,0px);
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: translate(100%,0px);
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes slideDownClose {
    from {
        transform: translate(0%,0%);
        opacity: .0;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: translate(0px,-100px);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes slideDownClose {
    from {
        -webkit-transform: translate(-0%,0px);
        opacity: .0;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: translate(0px,-100px);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes fadeClose {
    from {
        opacity: 1;
        animation-timing-function: ease-in-out;
    }

    to {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes fadeClose {
    from {
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes growClose {
    from {
        transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: scale(.9);
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes growClose {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: scale(.9);
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes rotateClose {
    from {
        transform: rotateX(0deg);
        opacity: 1;
        transform-style: preserve-3d;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: rotateX(90deg);
        opacity: 0;
        transform-style: preserve-3d;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes rotateClose {
    from {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: rotateX(90deg);
        opacity: 0;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes skewClose {
    from {
        transform: skew(0deg,0deg);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: skew(30deg,20deg);
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes skewClose {
    from {
        -webkit-transform: skew(0deg,0deg);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: skew(30deg,20deg);
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes stretchClose {
    from {
        transform: scaleX(1);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: scale(.5);
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes stretchClose {
    from {
        -webkit-transform: scaleX(1);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: scale(.5);
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }
}

@keyframes angleSlideClose {
    from {
        /*transform: translate(0%,0%);*/
        /*transform:translate(0%, 0%) scale(1);*/
        transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }

    to {
        transform: translate(40%, -300%) scale(.5);
        /*transform:translate(180px, -200px) scale(.5);*/
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes angleSlideClose {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
        -webkit-animation-timing-function: ease-in-out;
    }

    to {
        -webkit-transform: translate(40%, -300%) scale(.5);
        opacity: 0;
        -webkit-animation-timing-function: ease-in-out;
    }
}



.dropDownMenu {
    border: 1px solid gray;
    border-radius: 4px;
    background-image: url('images/blue_combo.png');
    cursor: pointer;
}

    .dropDownMenu:hover {
        border: 1px solid gray;
        border-radius: 4px;
        background-image: url('images/MidBlue_Grid_Header.png');
        background-size: contain;
    }

.formulaOperatorText {
    font-size: 15pt;
    cursor: pointer;
    font-weight: bold;
    top: 1px;
    width: 40px;
}

    .formulaOperatorText:hover {
        background-image: url('images/MidBlue_Grid_Header.png');
        color: white;
    }


.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 2px;
}


/*  Item Table  */
.itContainer {
    background-color: white;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.itTable {
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 8px;
    overflow: hidden;
}

.itTableRow {
    background-color: white;
}

    .itTableRow:hover {
        background-color: whitesmoke;
    }

.itItemContainer {
    position: relative;
    min-height: 80px;
    min-width: 650px;
}


.itDescription {
    font-family: Arial;
    font-size: 11pt;
    color: #107a19;
    position: absolute;
    left: 6px;
    top: 1px;
}

.itImage {
    position: absolute;
    left: 10px;
    top: 22px;
    height: 48px;
}

.itBrand {
    font-family: Arial;
    font-size: 10pt;
    color: #575757;
    position: absolute;
    left: 140px;
    top: 20px;
    max-width: 190px;
}


.itPart {
    font-family: Arial;
    font-size: 10pt;
    color: Navy;
    position: absolute;
    left: 320px;
    top: 20px;
}


.itQtyPer {
    font-family: Arial;
    font-size: 10pt;
    color: #575757;
    position: absolute;
    left: 320px;
    top: 40px;
}

.itPosition {
    font-family: Arial;
    font-size: 10pt;
    color: #575757;
    position: absolute;
    left: 320px;
    top: 60px;
}



.itPrice {
    font-family: Arial;
    font-size: 12pt;
    color: darkgreen;
    position: absolute;
    left: 460px;
    top: 20px;
}

.itNote {
    font-family: Arial;
    font-size: 10pt;
    color: #575757;
    position: absolute;
    left: 140px;
    top: 60px;
    max-width: 550px;
}


.itRetailDescription {
    font-family: Arial;
    font-size: 10pt;
    color: #575757;
    position: absolute;
    left: 140px;
    top: 40px;
    max-width: 550px;
}




.itOrderQty {
    font-family: Arial;
    font-size: 10pt;
    color: Navy;
    position: absolute;
    left: 530px;
    top: 30px;
    width: 40px;
    text-align: center;
}

.itOrderBtn {
    font-family: Arial;
    font-size: 10pt;
    color: Navy;
    position: absolute;
    left: 590px;
    top: 24px;
    opacity: .88;
    border-radius: 5px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-image: url(images/Blue_Gradient_Button.png);
    background-size: cover;
    color: white;
}

    .itOrderBtn:hover {
        font-family: Arial;
        font-size: 10pt;
        color: Navy;
        position: absolute;
        left: 590px;
        top: 24px;
        opacity: 1;
        border-radius: 5px;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
        background-image: url(images/MidBlue_Grid_Header.png);
        background-size: cover;
        color: white;
    }


/*  Group TreeView  */
.gtMenu {
    background-color: black;
    background-image: url(images/bg_blue10.jpg);
    background-size: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


.gtTable {
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 8px;
    overflow: hidden;
}

.gtCell {
    padding: 0px;
    margin: 0px;
    border: none;
    min-height: 25px;
    background-color: transparent;
    color: gainsboro;
    font-family: Arial;
    font-size: 10pt;
}

    .gtCell:hover {
        cursor: pointer;
    }


.gtSelectedCell {
    padding: 0px;
    margin: 0px;
    border: none;
    min-height: 25px;
    background-image: url(images/Mid_Blue_Tab.png);
    background-size: contain;
    font-family: Arial;
    font-size: 10pt;
    color: whitesmoke;
}

    .gtSelectedCell:hover {
        cursor: pointer;
    }


.gtGroupCaption {
    border: none;
    overflow: hidden;
    white-space: nowrap;
    -webkit-spellcheck: false;
    -webkit-appearance: none;
    margin: 0px;
    padding-left: 4px;
    padding-right: 3px;
    max-width: 190px;
}

    .gtGroupCaption:hover {
        text-decoration: underline;
    }

.gtSubGroupCaption {
    border: none;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
    -webkit-spellcheck: false;
    -webkit-appearance: none;
    margin-left: 0px;
    padding-left: 4px;
    padding-right: 3px;
}

    .gtSubGroupCaption:hover {
        text-decoration: underline;
    }



/*  Data Popup   */

.dataPopup {
    background-color: #FFFF97;
    background: -webkit-linear-gradient(to bottom right,#FFFF97, #ffffad);
    background: -ms-linear-gradient(to bottom right,#FFFF97, #ffffad);
    background: linear-gradient(to bottom right,#FFFF97, #ffffad);
    border-radius: 6px;
    font-family: Arial;
    font-size: 10pt;
    opacity: 1.0;
    padding: 7px;
    box-shadow: 10px 10px 5px #888;
    border: 1px solid yellow;
}

    .dataPopup::before {
        position: absolute;
        content: "";
        top: -20px;
        left: -9px;
        border-right: 7px transparent solid;
        border-bottom: 27px #FFFF97 solid;
        border-left: 7px transparent solid;
        transform: rotate(320deg);
        -webkit-transform: rotate(320deg);
    }

.dataPopupRect {
    background-color: #FFFF97;
    background: -webkit-linear-gradient(to bottom right,#FFFF97, #ffffad);
    background: -ms-linear-gradient(to bottom right,#FFFF97, #ffffad);
    background: linear-gradient(to bottom right,#FFFF97, #ffffad);
    border-radius: 6px;
    font-family: Arial;
    font-size: 10pt;
    opacity: 1.0;
    padding: 7px;
    box-shadow: 10px 10px 5px #888;
    border: 1px solid yellow;
    z-index: 900;
}

.dataPopupDiv {
    font-family: Arial;
    font-size: 10pt;
    padding: 1px 5px 1px 5px;
    text-align: left;
    text-align: center;
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
    min-height: 16px; /*pa23Sep20*/
}

.dataPopupDivTitle {
    font-family: Arial;
    font-size: 11pt;
    /*background-color:#ff8900;
    color: #fbfbd2;*/
    background-color: #f3c23b;
    padding: 1px 5px 1px 5px;
    padding-bottom: 3px;
    margin-bottom: 3px;
    text-align: center;
    border: none;
    border-right: 1px solid silver;
    border-bottom: 1px solid #3a3a3a;
    border-bottom: 1px solid silver;
    min-height: 16px;
    font-weight: 600;
}

.dataPopupCell {
    /*Empty class for now*/
}

.dataPopupContainer {
    border-left: 1px solid silver;
    border-top: 1px solid silver;
    overflow-y: auto;
    overflow-x: hidden; /*auto*/
}
    /*pa23Sep20*/
    .dataPopupContainer::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #f4c828;
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    .dataPopupContainer::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
        border-radius: 5px;
    }

    .dataPopupContainer::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px #f4c828;
        background-color: #f4c828;
    }

/*pa18Oct20*/
.dataPopupContainerScroll_gvCellBG_BlueGreen {
    /*class for custom scroll only..*/
}

    .dataPopupContainerScroll_gvCellBG_BlueGreen::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #0c6464;
    }

    .dataPopupContainerScroll_gvCellBG_BlueGreen::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px #0c6464;
        background-color: #0c6464;
    }

/*pa18Oct20*/
.dataPopupContainerScroll_gvCellBG_Yellow {
    /*class for custom scroll only..*/
}

    .dataPopupContainerScroll_gvCellBG_Yellow::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #ffdb00;
    }

    .dataPopupContainerScroll_gvCellBG_Yellow::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px #ffdb00;
        background-color: #ffdb00;
    }

/*pa18Oct20*/
.dataPopupContainerScroll_gvCellBG_Orange {
    /*class for custom scroll only..*/
}

    .dataPopupContainerScroll_gvCellBG_Orange::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #ff9001;
    }

    .dataPopupContainerScroll_gvCellBG_Orange::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px #ff9001;
        background-color: #ff9001;
    }

/*pa18Oct20*/
.dataPopupContainerScroll_gvCellBG_MedBlue {
    /*class for custom scroll only..*/
}

    .dataPopupContainerScroll_gvCellBG_MedBlue::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #1f71c7;
    }

    .dataPopupContainerScroll_gvCellBG_MedBlue::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px #1f71c7;
        background-color: #1f71c7;
    }



/*  Flexible Table  */
/*pa31Dec21*/
.dataFlexTbl {
    /*background-color: #FFFF97;
    background: -webkit-linear-gradient(to bottom right,#FFFF97, #ffffad);
    background: -ms-linear-gradient(to bottom right,#FFFF97, #ffffad);
    background: linear-gradient(to bottom right,#FFFF97, #ffffad);*/
    background-color: transparent;
    border-radius: 6px;
    font-family: Arial;
    font-size: 10pt;
    /*opacity: 1.0;*/
    padding: 3px;
    /*box-shadow: 10px 10px 5px #888;*/
    border: 1px solid gray;
}

.dataFlexTblDiv {
    font-family: Arial;
    font-size: 10pt;
    padding: 1px 5px 1px 5px;
    text-align: left;
    text-align: center;
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
    min-height: 16px; /*pa23Sep20*/
}

.dataFlexTblDivTitle {
    font-family: Arial;
    font-size: 11pt;
    /*background-color:#ff8900;
    color: #fbfbd2;*/
    background-color: #7fa4db;
    padding: 1px 5px 1px 5px;
    padding-bottom: 3px;
    margin-bottom: 3px;
    text-align: center;
    border: none;
    border-right: 1px solid silver;
    border-bottom: 1px solid #3a3a3a;
    border-bottom: 1px solid silver;
    min-height: 16px;
    font-weight: 600;
}

.dataFlexTblCell {
    /*Empty class for now*/
}

.dataFlexTblContainer {
    border: 1px solid silver;
    /*border-left: 1px solid silver;
    border-top: 1px solid silver;*/
    overflow-y: auto;
    overflow-x: hidden; /*auto*/
}
    /*pa23Sep20*/
    .dataFlexTblContainer::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #ababab;
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    .dataFlexTblContainer::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
        border-radius: 5px;
    }

    .dataFlexTblContainer::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px #ababab;
        background-color: #ababab;
    }



/*  Data Status Popup   */
.dataStatusPopup {
    position: absolute;
    width: 22px;
    height: 22px;
    text-align: center;
    font-size: 12pt;
    font-family: Arial;
    /*background-color: rgba(246, 246, 48, 0.73);*/
    background-color: #FFFF97;
    cursor: pointer;
    border: 1px solid grey;
    border-radius: 3px;
    visibility: visible;
}

/*  menuPopup   */

.textMenu {
    background: linear-gradient(to bottom right, #fbf7f7,#f1efef );
    background: linear-gradient(to bottom right, #f1efef,#d5dff2 );
    font-family: Arial;
    font-size: 10pt;
    opacity: 1.0;
    padding: 4px;
    box-shadow: 2px 2px 1px #888;
    border: 1px solid #0c58b6;
    z-index: 1000;
}


.textMenuRow {
    font-family: Arial;
    font-size: 10pt;
}

    .textMenuRow:hover {
        background-color: Highlight;
        color: white;
        cursor: pointer;
    }

.textMenuCell1 {
    font-family: Arial;
    font-size: 10pt;
    opacity: 0.9;
    padding: 4px 4px 4px 4px;
    text-align: left;
    background-color: transparent;
}

.textMenuCell2 {
    font-family: Arial;
    font-size: 10pt;
    opacity: 0.7;
    padding: 4px 4px 4px 4px;
    text-align: right;
    background-color: transparent;
}



.darkButton {
    position: absolute;
    border: 1px solid silver;
    background-image: url(images/Dark_Blue_Tab.png);
    border-radius: 4px;
    height: 50px;
    width: 95px;
}

    .darkButton:hover {
        background-image: url(images/Light_Blue_Tab.png);
        border: 1px solid gray;
        border-radius: 4px;
        cursor: pointer;
    }

.darkButtonText {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: white;
    left: 45px;
    width: 40px;
    text-align: center;
}

.imgHov {
    cursor: pointer;
}

    .imgHov:hover {
        border-top: 1px solid transparent; /*No Color, just moves a little because of border*/
        border-left: 1px solid transparent; /*No Color, just moves a little because of border*/
    }

.modalClose {
    right: 6px;
    top: 7px;
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(images/close_blue_20.png); /*url('images/close_grey_24.png');*/
    background-repeat: no-repeat;
}

    .modalClose:hover {
        background-image: url(images/delete3_20.png); /*url('images/close_disable_24.png');*/
        cursor: pointer;
    }

.imageClose {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 2px;
    background-image: url(images/close_blue_20.png); /*url('images/close_grey_24.png');*/
    background-repeat: no-repeat;
}

    .imageClose:hover {
        background-image: url(images/delete3_20.png); /*url('images/close_disable_24.png');*/
        cursor: pointer;
    }

.imageCloseStack {
    width: 24px;
    height: 24px;
    border: none;
    margin: 4px;
    margin-left: 11px;
    background-image: url(images/close_blue_20.png); /*url('images/close_grey_24.png');*/
    background-repeat: no-repeat;
}

    .imageCloseStack:hover {
        background-image: url(images/delete3_20.png); /*url('images/close_disable_24.png');*/
        cursor: pointer;
    }

.boxShadow {
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.50);
    -webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.50);
    /*box-shadow: rgba(0, 0, 0, 0.50) 10px 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.50) 10px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.50) 10px 10px;*/
}

.notifyMessage {
    /*Also see function share_centerNotifyMessageDivs()*/
    position: absolute;
    font-size: 22pt;
    font-family: Arial;
    color: #203c98;
    border-radius: 8px;
    border: 1px solid silver;
    text-align: center;
    background-color: whitesmoke;
    z-index: 1000;
    padding: 5px 10px 5px 10px;
    box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    visibility: hidden;
    height: 35px;
}
/*pa21Jul20*/
.notifyMessageDark {
    position: absolute;
    font-size: 22pt;
    font-family: Arial;
    color: white;
    border-radius: 8px;
    border: 1px solid silver;
    text-align: center;
    /*background-color: #7b7474;*/
    background-image: url(./images/Dark_Blue_Tab.png);
    background-size: cover;
    z-index: 1000;
    padding: 5px 10px 5px 10px;
    box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    visibility: hidden;
    /*height: 35px;*/
    /*max-height: 107px;*/
}

.notifyWarningMessage {
    position: absolute;
    font-size: 13pt;
    font-family: Arial;
    color: #203c98;
    border-radius: 6px;
    border: 1px solid lightyellow;
    text-align: center;
    background-color: lightyellow;
    z-index: 1000;
    padding: 14px 10px 14px 10px;
    box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    visibility: hidden;
    height: 15px;
}

.boxShadowLight {
    box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
}


/**************************large calendar **************************/

.lc_calFrame {
    position: absolute;
    left: 7px;
    top: 1px;
    width: 785px;
    height: 99%; /*555px*/
    /*background-color: black;*/
    background-image: url(images/bg_blue10.jpg);
    border: 1px solid orange;
}

.lc_calHeader {
    height: 38px;
    border-bottom: 1px solid orange;
    position: relative;
    top: 0px;
    left: 0px;
}

.lc_calPrevious {
    position: absolute;
    top: 4px;
    left: 8px;
    width: 24px;
    background-size: contain;
    /*background-image: url('images/orange_arrow_left.png');*/
    cursor: pointer;
}

.lc_calNext {
    position: absolute;
    top: 5px;
    right: 8px;
    width: 24px;
    background-size: contain;
    /*background-image: url('images/orange_arrow_right.png');*/
    cursor: pointer;
}

.lc_calWeekMonthViewImg {
    position: absolute;
    height: 29px;
    top: 3px;
    cursor: pointer;
}

    .lc_calWeekMonthViewImg:hover {
        height: 31px;
    }

.lc_calWeekMonthViewImgSelected {
    position: absolute;
    height: 29px;
    top: 3px;
    cursor: pointer;
    border: 1.5px solid #ff9c00;
    border-radius: 4px;
}

.lc_calAddEvent {
    font-family: Arial;
    font-size: 11pt;
    text-decoration: underline;
    color: silver;
    position: absolute;
    right: 10px;
    top: 4px;
    text-align: center;
    padding-top: 7px;
    height: 26px;
    width: 97px;
    cursor: pointer;
}

    .lc_calAddEvent:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
        color: midnightblue;
        border-radius: 4px;
        text-decoration: none;
    }

.lc_calFooter {
    height: 40px;
    border-top: 1px solid orange;
    position: absolute;
    width: 100%;
    top: 528px;
    left: 0px;
    margin-bottom: 0px;
}

.lc_calTodayLink {
    font-family: Arial;
    font-size: 11pt;
    text-decoration: underline;
    color: silver;
    position: absolute;
    left: 8px;
    top: 4px;
    text-align: center;
    padding-top: 7px;
    height: 26px;
    width: 67px;
    cursor: pointer;
}

    .lc_calTodayLink:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
        color: midnightblue;
        border-radius: 4px;
        text-decoration: none;
    }


.lc_calMonth {
    position: absolute;
    top: 5px;
    left: 265px;
    height: 25px;
    width: 254px;
    text-align: center;
    background-color: transparent;
    color: silver;
    font-family: Arial;
    font-size: 12pt;
    cursor: pointer;
    padding-top: 5px;
}


    .lc_calMonth:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
        color: midnightblue;
        border-radius: 4px;
    }

.lc_calBody {
    position: relative;
    width: 100%;
}

.lc_calWeekDayBox {
    position: relative;
    top: 0px;
    left: 0px;
}


.lc_cellTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
}

.lc_calWeekDayCell {
    /*containter for: Mon, Tue, Wed etc*/
    background-color: transparent;
    height: 32px;
    width: 110px;
    padding: 0px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;
    text-align: center;
    /*cursor: pointer;*/
}

.lc_calWeekDayCellSelected {
    /*containter for: Mon, Tue, Wed etc*/
    background-color: transparent;
    height: 32px;
    max-width: 110px;
    width: 110px;
    padding: 0px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;
    text-align: center;
    /*background-image: url(images/bg_LightBlueShade.png);*/
    background-image: url(images/calendar_lightblue.png);
    background-size: cover;
    cursor: pointer;
}

.lc_calTextDayOfWeek {
    /*Mon, Tue, Wed etc*/
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: orange;
    font-weight: bold;
}

.lc_calTextDayOfWeekSelected {
    /*Mon, Tue, Wed etc*/
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
    background-color: transparent;
    font-family: Arial;
    font-size: 11pt;
    color: midnightblue;
    font-weight: bold;
}


.lc_calJumpToMonthCell {
    /*containter for: Jan, Feb, Mar etc*/
    background-color: transparent;
    height: 32px;
    width: 110px;
    padding: 0px;
    /*margin: 2px;*/
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;
    text-align: center;
    cursor: pointer;
    font-size: 10pt;
    color: orange;
}

    .lc_calJumpToMonthCell:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
        color: midnightblue;
    }


.lc_calTextJumpToMonth {
    /*Jan, Feb, Mar etc*/
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
    background-color: transparent;
    font-family: Arial;
    font-size: inherit;
    color: inherit;
    font-weight: bold;
}

.lc_calJumpToMonthYear {
    position: absolute;
    top: 0px;
    left: 68px;
    height: 25px;
    width: 180px;
    text-align: center;
    background-color: transparent;
    color: silver;
    font-family: Arial;
    font-size: 12pt;
    padding-top: 5px;
}


.lc_calCell {
    background-color: transparent;
    height: 75px;
    /*height: auto;*/
    padding: 0px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;
}

.lc_calWeekViewCell {
    background-color: transparent;
    top: 0px;
    min-height: 456px;
    height: 456px;
    /*height: auto;*/
    max-width: 110px;
    width: 110px;
    padding: 0px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.lc_calWeekViewCellShorter {
    /*Used if Workshop is detected to cater for summary at base*/
    min-height: 435px;
    height: 435px;
}



.lc_calCellContents {
    position: relative;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    max-width: 130px;
    background-color: transparent;
}

.lc_calMonthDate {
    /*Active Days of the month*/
    position: absolute;
    top: 3px;
    left: 5px;
    width: 20px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: white;
}

.lc_calMonthDateInActive {
    /*Days in prev/next month*/
    position: absolute;
    top: 3px;
    left: 5px;
    width: 20px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: gray;
}

.lc_calTextToday {
    /*Todays Date*/
    position: absolute;
    top: 3px;
    left: 5px;
    width: 22px;
    font-family: Arial;
    font-size: 10pt;
    color: midnightblue;
    background-color: orange;
    border-radius: 5px;
    padding-left: 4px;
}

.lc_calEvent1 {
    /*Event Summary #1*/
    position: absolute;
    top: 20px;
    left: 5px;
    width: 100px;
    height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(26, 211, 237, 0.50);
    font-family: Arial;
    font-size: 10pt;
    color: white;
    visibility: hidden;
    border: 1px solid #535252;
}

    .lc_calEvent1:hover {
        /*width: 200px;
        height: auto;
        max-height: 80px;
        overflow-y: scroll;
        text-overflow: initial*/
        background-color: #317cf3;
        z-index: 100;
        cursor: pointer;
        opacity: 1;
    }

.lc_calEvent2 {
    /*Event Summary #3*/
    position: absolute;
    top: 40px;
    left: 5px;
    width: 100px;
    height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(66, 248, 4, 0.43);
    font-family: Arial;
    font-size: 10pt;
    color: white;
    visibility: hidden;
    border: 1px solid #535252;
}

    .lc_calEvent2:hover {
        /*width:auto;
        max-width: 200px;
        height: auto;
        max-height: 80px;
        overflow-y: scroll;
        text-overflow: initial;*/
        background-color: darkgreen;
        z-index: 100;
        cursor: pointer;
        opacity: 1;
    }

.lc_calEventMore {
    /*Event Summary #3*/
    position: absolute;
    top: 60px;
    left: 5px;
    width: 100px;
    height: 11px;
    max-height: 11px;
    background-color: orange;
    font-family: Arial;
    /*font-size: 15pt;*/
    font-size: 9pt;
    color: midnightblue;
    vertical-align: super;
    padding-bottom: 1px;
    visibility: hidden;
    text-align: center;
    border: 1px solid #535252;
    overflow: hidden;
    text-overflow: clip;
    font-weight: bold;
    font-style: italic;
    opacity: .8;
}

    .lc_calEventMore:hover {
        cursor: pointer;
        opacity: 1;
        /*left: 12px;*/
    }


.lc_calTextWeekend {
    /*Weekend days - not currently used*/
    position: relative;
    padding-left: 3px;
    top: -25px;
    left: 5px;
    width: 20px;
    background-color: transparent;
    /*background-color: red;*/
    font-family: Arial;
    font-size: 10pt;
    color: white;
}

.lc_calCellSelectedDay {
    position: relative;
    top: 0px;
    left: 0px;
    height: 100%;
    height: inherit;
    width: 100%;
    max-width: 130px;
    background-color: transparent;
    background-image: url('images/calendar_lightblue.png');
    /*box-shadow: rgba(0, 0, 0, 0.50) 5px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.50) 5px 5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.50) 5px 5px;*/
    background-size: cover;
    overflow-y: auto;
    overflow-x: hidden;
}

.share_scrollBarDarkTheme {
    /*****great scrollbar css styles: https://codepen.io/devstreak/pen/dMYgeO*/
    /*****###### Note: this class is used to attach other class.. not be used on its own..*/
    /*****###### Note: Apply these overflow settings in primary class, so they can be customised for each class..*/
    /*****###### then this class adds the dark scroll theme to chrome browsers.*/
    /*overflow-y: inherit;*/
    /*overflow-x: inherit;*/
    -webkit-overflow-scrolling: touch;
}

    .share_scrollBarDarkTheme::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    .share_scrollBarDarkTheme::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
        border-radius: 5px;
    }

    .share_scrollBarDarkTheme::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }


.lc_calCellSelectedText {
    position: absolute;
    top: 3px;
    left: 5px;
    width: 20px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: midnightblue;
    font-weight: bold;
}


.CalDayNavImg {
    position: absolute;
    top: 8px;
    left: 4px;
    opacity: .3;
    height: 24px;
    width: 24px;
}

    .CalDayNavImg:hover {
        opacity: 1;
        cursor: pointer;
    }


.lc_calWkEventAll {
    /*Event Summary #1*/
    position: absolute;
    top: 20px;
    left: 5px;
    width: 100px;
    height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(26, 211, 237, 0.50);
    font-family: Arial;
    font-size: 10pt;
    color: white;
    visibility: hidden;
    border: 1px solid #535252;
}

    .lc_calWkEventAll:hover {
        background-color: #317cf3;
        z-index: 100;
        cursor: pointer;
        opacity: 1;
    }


.lc_calWeekSummary {
    /*containter for Summary at the base of each day in week view -- only used for workshop*/
    background-color: transparent;
    height: 100%;
    width: 110px;
    padding: 0px;
    /*margin: 2px;*/
    border: 1px solid gray;
    /*border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;*/
    text-align: center;
    /*cursor:pointer;*/
}

.lc_calWeekSummarySelected {
    /*containter for Summary at the base of each day in week view -- only used for workshop*/
    background-color: transparent;
    height: 100%;
    width: 110px;
    padding: 0px;
    border: 1px solid gray;
    text-align: center;
    background-image: url('images/calendar_lightblue.png');
    background-size: cover;
}

.lc_calWeekSummaryPanel {
    position: absolute;
    top: 507px;
    left: 0px;
    height: 25px;
    visibility: hidden;
    z-index: 1;
}


.lc_calWeekSummaryText {
    /*Mon, Tue, Wed etc*/
    top: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 0px;
    margin-left: 0px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: orange;
    font-weight: bold;
    cursor: pointer;
}

.lc_calWeekSummaryTextSelected {
    /*Mon, Tue, Wed etc*/
    top: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 0px;
    margin-left: 0px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: midnightblue;
    font-weight: bold;
}

/*Calendar Planner*/
.lc_timeCell {
    background-color: transparent;
    height: auto;
    padding: 0px;
    border-bottom: 1px solid gray;
    border-right: none;
    border-left: none;
    border-top: none;
    color: white;
}

.lc_tcAltRow {
    background-color: rgb(0 0 0 / 0.20); /*whitesmoke*/
}

.lc_timeSeg {
    position: relative;
    background-color: transparent;
    height: 21px;
    padding-right: 2px;
    color: #b2b2b2;
    margin-right: 2px;
    /*min-width: 30px;*/
    width: 40px;
    background-image: url(images/grid_rowselector_silver.png);
    background-image: url(images/bg_blue10_lite.jpg);
    background-size: cover;
    font-family: Arial;
    font-size: 10pt;
    text-align: right;
}

.lc_timePanel {
    background-color: transparent;
    top: 0px;
    height: 100%;
    width: 11px;
}

.lc_calCellTime {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: transparent;
    height: 100%;
    padding-top: 33px;
}

.TS_BtnDots {
    position: absolute;
    height: 20px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    cursor: pointer;
    opacity: .7;
}

    .TS_BtnDots:hover {
        opacity: 1;
    }

.TS_td {
    width: 50px;
    height: 100%;
    /*min-height:50px;*/
    /*border: 1px solid yellow;*/
}

.TS_div {
    width: 100%;
    height: 100%;
    max-height: 21px;
    /*min-height: 50px;*/
    /*border: 1px solid red;*/
}

.TS_tdHeaderRow {
    /*containter for: Mon, Tue, Wed etc*/
    background-color: transparent;
    background-image: url(images/bg_blue10_lite.jpg);
    height: 32px;
    width: auto;
    padding: 0px;
    padding-top: 3px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;
    text-align: center;
    position: sticky;
    top: 0px;
    z-Index: 2;
    /*cursor: pointer;*/
}

    .TS_tdHeaderRow:after {
        content: attr(data-contentvalue);
        color: transparent;
        /*color: yellow;*/
        font-size: 9.35pt;
        padding-top: 3px;
        /*content: "qwerty";*/
    }

.TS_tdGridRow {
    /*containter for: Mon, Tue, Wed etc*/
    background-color: transparent;
    height: 21px;
    width: auto;
    padding: 0px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;
    text-align: center;
    /*cursor: pointer;*/
}

.TS_evtMain {
    position: relative;
    min-height: 21px;
    border-radius: 4px;
    /*border-top: 3px ridge red;*/
    background-Color: yellow;
}

    .TS_evtMain:hover {
        cursor: pointer;
    }

.TS_headerText {
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: orange;
    font-weight: bold;
}

.TS_evtImg {
    position: absolute;
    top: 2px;
    left: 2px;
    height: 16px;
}

.TS_evtHeader {
    position: absolute;
    top: 2px;
    /*left: 25px;*/
    /*width: calc(100% - 27px);*/
    left: 2px;
    width: 100%;
    height: 18px;
    font-family: Arial;
    font-size: 9pt;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*border: 1px solid red;*/
}


.TS_evtMore {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 21px;
    font-family: Arial;
    font-size: 11pt;
    /*font-weight: 600;*/
    background-color: red;
    color: white;
    z-index: 1;
    visibility: hidden;
    text-align: center;
    /*border: 1px solid red;*/
}

    .TS_evtMore:hover {
        outline: 4px ridge aqua;
    }

.TS_evtDetail {
    position: absolute;
    top: 25px;
    left: 0px;
    /*width: calc(100% - 2px);*/
    padding-left: 2px;
    padding-right: 2px;
    width: 100%;
    height: calc(100% - 25px);
    font-family: Arial;
    font-size: 10pt;
    text-align: left;
    overflow: hidden;
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    /*border: 1px solid pink;*/
}


/*########################## END large calendar ##########################*/
/**************************small MDI calendar **************************/
.sc_calFrame {
    position: absolute;
    width: 100%; /*160px;*/ /*282px;*/
    height: 240px;
    background-color: black;
    border: 1px solid dimgray; /*silver*/
}

.sc_calHeader {
    height: 30px;
    background-color: black;
    border: 1px solid dimgray; /*silver*/ /*orange*/
}

.sc_calPrevious {
    position: absolute;
    top: 3px;
    left: 2px;
    height: 24px;
    width: 24px;
    background-size: contain;
    background-image: url('images/orange_arrow_left.png');
    cursor: pointer;
}

.sc_calNext {
    position: relative;
    top: 3px;
    left: 85%; /*2px;*/
    height: 24px;
    width: 24px;
    background-size: contain;
    background-image: url('images/orange_arrow_right.png');
    cursor: pointer;
    z-index: 1;
}

.sc_calMonth {
    position: absolute;
    top: 7px;
    left: 20px;
    height: 20px;
    width: 120px;
    text-align: center;
    background-color: black;
    color: silver;
    font-family: Arial;
    font-size: 10pt;
    /*border: 1px solid silver;*/
}

.sc_calBody {
    background-color: #232323;
    border: 1px solid dimgray; /*silver*/
}

.sc_calFooter {
    background-color: black;
    /*border: 1px solid silver;*/
}


.sc_calHideLink {
    /*font-family: Arial;
    font-size: 10pt;
    text-decoration: underline;
    color: silver;*/
    position: absolute;
    left: 8px;
    top: 7px;
    cursor: pointer;
}

.sc_calOpenLink {
    font-family: Arial;
    font-size: 10pt;
    color: silver;
    position: relative;
    left: 8px;
    top: 9px;
}

    .sc_calOpenLink:hover {
        text-decoration: underline;
        color: white;
        cursor: pointer;
    }

.sc_calCell {
    background-color: transparent;
    height: 25px;
    width: 24px;
    padding: 0px;
    margin: 0px;
    border-right: none; /*1px solid gray;*/
    border-bottom: none; /*1px solid gray;*/
    border-right: none; /*1px solid gray;*/
    border-bottom: none; /*1px solid gray;*/
    border-left: none;
    border-top: none;
    text-align: center;
    cursor: pointer;
}

.sc_calTextActive {
    padding: 0px;
    margin: 2px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: white;
    text-align: center;
}

.sc_calTextInActive {
    padding: 0px;
    margin: 2px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: gray;
    text-align: center;
    cursor: pointer;
}

.sc_calTextWeekend {
    padding: 0px;
    margin: 2px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: white;
    text-align: center;
}

.sc_calTextToday {
    padding: 0px;
    margin: 2px;
    font-family: Arial;
    font-size: 10pt;
    color: orange;
    text-align: center;
    /*border-right: 1px solid gray;
    border-bottom: 1px solid gray;*/
    background-color: transparent;
    border: 1px solid red;
}

.sc_calCellSelectedDay {
    padding: 0px;
    margin: 2px;
    background-color: #f5b10f; /*midnightblue*/
    font-family: Arial;
    font-size: 10pt;
    color: white;
    text-align: center;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}

/*########################## END small MDI calendar ##########################*/


.subFrames {
    z-index: 310;
    border: none;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    left: 0px;
    display: none;
    background-color: rgba(0, 0, 0, 0.51);
}

/*  PDF Spec Sheets  */
.pdfListItems {
    position: absolute;
    border-radius: 5px;
    width: 239px;
    height: 460px;
}

.pdfListItem {
    position: relative;
    height: 43px;
    top: 4px;
    left: 7px;
    width: 94%;
}

.pdfListItemImage {
    position: absolute;
    top: 7px;
    left: 0px;
    /*height: 24px;*/
    width: 30px;
    cursor: pointer;
}

    .pdfListItemImage:hover {
        position: absolute;
        top: 6px;
        left: 1px;
        /*height: 30px;
        width: 30px;*/
    }

.pdfListItemText {
    position: absolute;
    left: 45px;
    font-family: Arial;
    font-size: 11pt;
    width: 67%;
    text-align: left;
    top: 14px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .pdfListItemText:hover {
        color: silver;
        text-decoration: underline;
        cursor: pointer;
    }

.pdfListItemSmlText {
    position: absolute;
    left: 286px;
    font-family: arial;
    font-size: 10pt;
    color: silver;
    width: 56px;
    text-align: right;
    top: 14px;
    white-space: nowrap;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
}

    .pdfListItemSmlText:hover {
        color: white;
        text-decoration: underline;
        cursor: pointer;
    }


.pdfListContainer {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom-right-radius: 8px;
    scrollbar-arrow-color: gray;
    scrollbar-base-color: #284062;
    scrollbar-darkshadow-color: #284062;
    scrollbar-face-color: rgba(81, 81, 82, 0.50);
    scrollbar-highlight-color: gray;
    scrollbar-shadow-color: #284062;
    scrollbar-track-color: #284062;
    scrollbar-3dlight-color: #284062;
    /*scrollbar-arrow-color: gray;
    scrollbar-base-color: black;
    scrollbar-darkshadow-color: black;
    scrollbar-face-color: #3d3c3c;
    scrollbar-highlight-color: black;
    scrollbar-shadow-color: black;
    scrollbar-track-color: black;
    scrollbar-3dlight-color: black;*/
}

/*Calculator*/

.calcOperatorText {
    font-size: 10pt;
    cursor: pointer;
    font-weight: bold;
    top: 1px;
    width: 100%;
    color: silver;
}

    .calcOperatorText:hover {
        background-image: url('images/MidBlue_Grid_Header.png');
        color: white;
        background-repeat: repeat;
    }

.tableRows {
    /*border:1px solid red;*/
    border-bottom: 1px solid #2e2e2e;
    border-top: 1px solid #444444;
}


/*POS Butttons*/
.POSButton {
    position: absolute;
    border: 1px solid silver;
    background-image: url('images/GrayButton3.png');
    border-radius: 4px;
    height: 26px;
    width: 105px;
}

    .POSButton:hover {
        background-image: url(images/GrayButton3.png);
        border: 1px solid gray;
        cursor: pointer;
    }


.POSButtonText {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #444444;
    left: 45px;
    width: 40px;
    text-align: center;
}

.POSButtonTextInactive {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #a9a7a7;
    left: 45px;
    width: 40px;
    text-align: center;
    color: #8e8e8e;
    text-shadow: 1px 1px 2px whitesmoke;
}

.POSButtonImage {
    position: absolute;
    top: 2px;
    height: 28px;
    left: 5px;
    cursor: pointer;
}

.panelBorders {
    position: absolute;
    border-bottom: 1px solid white;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid white;
    /*border-radius: 7px;*/
}

.calcFld {
    /*Class grouping only*/
}

.controlLabelInactive {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    top: 19px;
    left: 138px;
}

    .controlLabelInactive:hover {
        color: midnightblue;
        text-decoration: underline;
        cursor: pointer;
    }

.listBoxMain {
    position: absolute;
    height: 297px;
    width: 402px;
    top: 95px;
    left: 15px;
    overflow-x: hidden;
    overflow-y: auto;
    text-overflow: clip;
    margin-bottom: 5px;
    border: 1px solid gray;
    -webkit-overflow-scrolling: touch;
    /*scrollbar-arrow-color: transparent;
    scrollbar-base-color: black;
    scrollbar-darkshadow-color: black;
    scrollbar-face-color: #3d3c3c;
    scrollbar-highlight-color: black;
    scrollbar-shadow-color: black;
    scrollbar-track-color: black;
    scrollbar-3dlight-color: black;*/
}

.listBoxMainItems {
    position: relative;
    left: 0px;
    width: 100%;
    top: 0px;
    height: 28px;
    overflow-x: hidden;
    overflow-y: hidden;
    text-wrap: none;
    color: dimgray;
}

    .listBoxMainItems:hover {
        cursor: pointer;
        background-color: Gainsboro;
    }

.listBoxColNoText {
    position: absolute;
    left: 0px;
    width: 35px;
    top: 1px;
    height: 27px;
    font-family: Arial;
    font-size: 11pt;
    /*color: dimgray;*/
    text-align: left;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    text-wrap: none;
    padding-top: 4px;
    padding-left: 2px;
    border-right: 1px solid silver;
}

.listBoxItemText {
    position: absolute;
    left: 36px;
    width: 180px;
    top: 1px;
    height: 27px;
    font-family: Arial;
    font-size: 11pt;
    /*color: dimgray;*/
    text-align: left;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
    text-wrap: none;
    padding-top: 4px;
    padding-left: 10px;
}

.listBoxItemImg {
    position: absolute;
    left: 5px;
    width: 16px;
    top: 6px;
    opacity: .8;
}

.listBoxMainImage {
    position: relative;
    top: 1px;
    height: 22px;
    margin-left: 15px;
}

    .listBoxMainImage:hover {
        height: 23px;
        cursor: pointer;
        border: 1px dashed silver;
        /*padding:1px;*/
    }

.altTransButton {
    position: absolute;
    border: 1px solid silver;
    background-image: url(images/GrayButton3.png);
    border-radius: 4px;
    height: 50px;
    width: 95px;
    top: 2px;
}

    .altTransButton:hover {
        background-image: url(images/GrayButton3.png);
        border: 1px solid gray;
        border-radius: 4px;
        cursor: pointer;
    }

.altTransButtonActive {
    position: absolute;
    border: 1px solid silver;
    background-image: url(images/Blue_Gradient_Button.png);
    border-radius: 4px;
    height: 50px;
    width: 95px;
    cursor: pointer;
    top: 2px;
}

.altTransButtonDisabled {
    position: absolute;
    border: 1px solid silver;
    background-image: url(images/GrayButton3.png);
    border-radius: 4px;
    height: 50px;
    width: 95px;
    top: 2px;
    opacity: .4;
}

.altTransText {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #444444;
    left: 45px;
    width: 40px;
    text-align: center;
}

.altTransTextInactive {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #a9a7a7;
    left: 45px;
    width: 40px;
    text-align: center;
}

.altTransImage {
    position: absolute;
    top: 5px;
    height: 40px;
    left: 25px;
    cursor: pointer;
    width: 40px;
}



.searchFormHighLight {
    border: none;
    position: absolute;
    -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 7px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 7px rgba(0,0,0,0.5);
}


.lblHover {
    position: absolute;
}

    .lblHover:hover {
        cursor: pointer;
    }

.transBtn {
    position: absolute;
    top: 445px;
    left: 16px;
    width: 117px;
    height: 39px;
    border-radius: 4px;
}

    .transBtn:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
        cursor: pointer;
    }
    /*pa20Mar23*/
    .transBtn:focus-visible {
        outline: none;
        border: none;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,.9);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,.9);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,.9);
    }


.transBtnImg {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 28px;
}

.transBtnText {
    position: absolute;
    top: 10px;
    left: 42px;
    color: midnightblue;
    font-family: Arial;
    font-size: 11pt;
    text-decoration: underline;
}

.transBtnTextDisabled {
    position: absolute;
    top: 10px;
    left: 42px;
    color: #8e8e8e;
    width: 40px;
    font-family: Arial;
    font-size: 11pt;
    text-shadow: 1px 1px 2px whitesmoke;
}


.transBtnPeach {
    position: absolute;
    top: 445px;
    left: 16px;
    width: 117px;
    height: 39px;
    border-radius: 4px;
}

    .transBtnPeach:hover {
        background-image: url(images/Peach_Grid_Header.png);
        background-size: cover;
        cursor: pointer;
    }

.transBtnDark {
    position: absolute;
    top: 445px;
    left: 16px;
    width: 117px;
    height: 39px;
    border-radius: 4px;
    color:white;
}

    .transBtnDark:hover {
        background-image: url(images/Peach_Grid_Header.png);
        background-size: cover;
        cursor: pointer;
        color: black;
    }




.transPageItem {
    position: relative;
    width: 235px;
    height: 40px;
    left: 40px;
    margin-bottom: 20px;
}

.transPageItemImage {
    position: absolute;
    top: 9px;
    left: 4px;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

    .transPageItemImage:hover {
        position: absolute;
        top: 6px;
        left: 3px;
        height: 24px;
        width: 24px;
    }

.transPageItemText {
    position: absolute;
    left: 40px;
    font-family: Arial;
    font-size: 10pt;
    color: #373535;
    width: 189px;
    text-align: left;
    top: 10px;
    cursor: pointer;
}

    .transPageItemText:hover {
        position: absolute;
        left: 40px;
        font-family: Arial;
        font-size: 10pt;
        color: midnightblue;
        text-decoration: underline;
        width: 189px;
        text-align: left;
        top: 8px;
    }


/*###### On Screen Keyboard ###### */

.kbFullSizeContainer {
    padding-top: 15px;
    position: absolute;
    height: 240px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 999; /*1 less than msgbox*/
    visibility: hidden;
}

.kbSideFiller {
    width: auto;
    height: 100%;
    background-color: transparent;
    border: none;
}


.kbKeyContainer {
    width: 950px;
    height: 100%;
    margin-top: 20px;
    background-image: url('images/bg_DarkGreySolid.png');
    border-radius: 6px;
    border: 1px solid gray;
    box-shadow: rgba(0, 0, 0, 0.50) 10px 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.50) 10px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.50) 10px 10px;
}

.kbTable {
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
}

.kbBtnText {
    position: relative;
    top: 10px;
    width: 100%;
    text-align: center;
    color: white;
    font-weight: normal;
    font-family: Arial;
    font-size: 13pt;
    left: 0px;
}

    .kbBtnText::selection {
        color: transparent;
    }

.kbEscBtnLightText {
    position: relative;
    top: 10px;
    width: 100%;
    text-align: center;
    color: white;
    font-weight: normal;
    font-family: Arial;
    font-size: 12pt;
    left: 0px;
}

    .kbEscBtnLightText::selection {
        color: transparent;
    }

.kbBtnLightText {
    position: relative;
    top: 10px;
    width: 100%;
    text-align: center;
    color: dimgray;
    font-weight: normal;
    font-family: Arial;
    font-size: 12pt;
    left: 0px;
}

    .kbBtnLightText::selection {
        color: transparent;
    }

.kbNumberBtn {
    width: 59px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/btn_darkGrey.png');
    background-size: cover;
}

    .kbNumberBtn:hover {
        background-image: url('images/btn_grey_1.png');
        cursor: pointer;
    }


.kbShiftOnce {
    width: 59px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/blue_combo.png');
    background-size: cover;
}

    .kbShiftOnce:hover {
        background-image: url('images/blue_combo.png');
        cursor: pointer;
        opacity: .7;
    }


.kbShiftOnceText {
    position: relative;
    top: 10px;
    width: 100%;
    text-align: center;
    color: white;
    font-weight: normal;
    font-family: Arial;
    font-size: 12pt;
    left: 0px;
}

    .kbShiftOnceText::selection {
        color: transparent;
    }


.kbShiftAll {
    width: 59px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/Blue_ButtonLong.png');
    background-size: cover;
}

    .kbShiftAll:hover {
        background-image: url('images/Blue_ButtonLong.png');
        cursor: pointer;
        opacity: .7;
    }

.kbNumberLightBtn {
    width: 59px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/Silver_Grid_Header.png');
    background-size: cover;
}

    .kbNumberLightBtn:hover {
        background-image: url('images/Silver_Grid_Header_Flip.png');
        cursor: pointer;
    }

.kbEscBtn {
    width: 59px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/Red_Grid_Header.png');
    background-size: cover;
}

    .kbEscBtn:hover {
        background-image: url('images/Red_Grid_Header_Flip.png');
        cursor: pointer;
    }


.kbEnterBtn {
    width: 95px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/btn_orange.png');
    background-size: cover;
}

    .kbEnterBtn:hover {
        background-image: url('images/btn_orange_flip.png');
        cursor: pointer;
    }


/*iPad*/


.kbKeyContainer_iPad {
    width: 950px;
    height: 100%;
    margin-top: 20px;
    background-image: url('images/bg_DarkGreySolid.png');
    border-radius: 6px;
    border: 1px solid gray;
    border-left: 1px solid dimgray;
    box-shadow: rgba(0, 0, 0, 0.50) 10px 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.50) 10px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.50) 10px 10px;
}

.kbTable_iPad {
    margin-left: 20px;
    margin-right: 22px;
    white-space: nowrap;
    overflow: hidden;
}


.kbNumberBtn_iPad {
    width: 63px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/btn_darkGrey.png');
    background-size: cover;
}

    .kbNumberBtn_iPad:hover {
        background-image: url('images/btn_grey_1.png');
        cursor: pointer;
    }

.kbNumberLightBtn_iPad {
    width: 63px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/Silver_Grid_Header.png');
    background-size: cover;
}

    .kbNumberLightBtn_iPad:hover {
        background-image: url('images/Silver_Grid_Header_Flip.png');
        cursor: pointer;
    }


.kbShiftOnce_iPad {
    width: 63px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/blue_combo.png');
    background-size: cover;
}

    .kbShiftOnce_iPad:hover {
        background-image: url('images/blue_combo.png');
        cursor: pointer;
    }

.kbShiftAll_iPad {
    width: 63px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/Blue_ButtonLong.png');
    background-size: cover;
}

    .kbShiftAll_iPad:hover {
        background-image: url('images/Blue_ButtonLong.png');
        cursor: pointer;
    }

.kbEscBtn_iPad {
    width: 63px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/Red_Grid_Header.png');
    background-size: cover;
}

    .kbEscBtn_iPad:hover {
        background-image: url('images/Red_Grid_Header_Flip.png');
        cursor: pointer;
    }


.kbEnterBtn_iPad {
    width: 104px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 6px;
    border: 1px solid black;
    background-image: url('images/btn_orange.png');
    background-size: cover;
}

    .kbEnterBtn_iPad:hover {
        background-image: url('images/btn_orange_flip.png');
        cursor: pointer;
    }

/*###### END On Screen Keyboard ###### */



.utilBtn {
    position: absolute;
    border-radius: 4px;
}

    .utilBtn:hover {
        background-image: url(images/bg_LightBlueShade.png);
        cursor: pointer;
    }

.utilBtnWithShade {
    position: absolute;
    border-radius: 4px;
    background-image: url(images/bg_LightBlueShade.png);
}

    .utilBtnWithShade:hover {
        background-image: url(images/bg_highlight.png);
        cursor: pointer;
        border-left: 1px solid gray;
        border-top: 1px solid gray;
        border-bottom: 1px solid white;
        border-right: 1px solid white;
    }

.utilBtnWithOrangeShade {
    position: absolute;
    border-radius: 4px;
    background-image: url(images/btn_orange_flip.png);
}

    .utilBtnWithOrangeShade:hover {
        background-image: url(images/btn_orange.png);
        cursor: pointer;
        border-left: 1px solid gray;
        border-top: 1px solid gray;
        border-bottom: 1px solid white;
        border-right: 1px solid white;
    }

.utilBtnText {
    position: absolute;
    top: 11px;
    left: 44px;
    color: midnightblue;
    font-family: Arial;
    font-size: 11pt;
    text-decoration: underline;
    width: 70px;
}

.utilBtnTextDisabled {
    position: absolute;
    top: 11px;
    left: 44px;
    color: #8e8e8e;
    font-family: Arial;
    font-size: 11pt;
    text-decoration: underline;
    width: 70px;
    text-shadow: 1px 1px 2px whitesmoke;
}

.utilBtnImage {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 28px;
}

.utilBtnImageDisabled {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 28px;
    filter: grayscale(100%);
}

/*.controlSearchText::-webkit-input-placeholder {
        font-family: Arial;
        font-size: 12pt;
        color: midnightblue;
        text-transform: none;
    }

    .controlSearchText:-moz-placeholder {
         font-family: Arial;
        font-size: 12pt;
        color: midnightblue;
        text-transform: none;
    }

    .controlSearchText::-moz-placeholder {
          font-family: Arial;
        font-size: 12pt;
        color: midnightblue;
        text-transform: none;
    }

    .controlSearchText:-ms-input-placeholder {
         font-family: Arial;
        font-size: 12pt;
        color: midnightblue;
        text-transform: none;
    }*/


.BC_imgClear {
    cursor: pointer;
    position: absolute;
    left: 9px;
    top: 4px;
    visibility: hidden;
}

    .BC_imgClear:hover {
        border: 2px solid transparent; /*No Color, just moves a little because of border*/
    }

.BC_imgCal {
    /* just used for grouping by class */
}

.fileSizeCombo {
    /*class for span in combo*/
    color: dimgray;
    background: white;
    padding-left: 8px;
    padding-right: 8px;
}

.CustSuppTypeCombo {
    /*class for span in combo*/
    color: dimgray;
    background: transparent;
    font-style: italic;
    padding-left: 8px;
    padding-right: 8px;
}

/*classes for all the setup options frames*/
.optionsFrame {
    position: absolute;
    height: 508px;
    width: 598px;
    left: 0px;
    top: 0px;
    background-color: transparent;
    /*background-image: url('images/bg_silver12.jpg');*/
    background-image: url('images/bg_DarkGreySolid.png');
    background-size: cover;
    -webkit-user-select: none;
}

.optionsHeader {
    position: absolute;
    font-family: Verdana;
    font-size: 12pt;
    /*color: Maroon;
    color: White;*/
    color: #f6b94d;
    /*color: lightblue;*/
    text-decoration: underline;
}

.optionsLabel {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    color: #b7b5b5; /*dark theme*/
}

.optionsText {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    color: #b7b5b5; /*dark theme*/
    background-color: transparent;
    min-height: 16px;
    padding: 1px 3px 0px 3px;
    white-space: nowrap;
    border: 1px solid #747373;
    border-radius: 3px;
    -webkit-spellcheck: false;
    -webkit-appearance: none;
    outline: none; /*pa27Aug20*/
}

.optionsTVMenu {
    /*position: absolute;
    top: 7px;
    height: 562px;
    width: 181px;
    left: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    /*background-color: black;*/ /*#272626;
     background-image: url('images/bg_DarkGreySolid.png');
    color: silver;
    font-family: Arial;
    font-size: 11pt;
    border-bottom: 1px solid #1b1a1a;
    -webkit-overflow-scrolling: touch;
    scrollbar-arrow-color: gray;
    scrollbar-base-color: black;
    scrollbar-darkshadow-color: black;
    scrollbar-face-color: #3d3c3c;
    scrollbar-highlight-color: black;
    scrollbar-shadow-color: black;
    scrollbar-track-color: black;
    scrollbar-3dlight-color: black;*/
    position: absolute;
    background-color: #272626;
    color: silver;
    font-family: Arial;
    font-size: 11pt;
    top: 7px;
    height: 562px;
    width: 181px;
    left: 6px;
    border-bottom: 1px solid #1b1a1a;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-arrow-color: gray;
    scrollbar-base-color: black;
    scrollbar-darkshadow-color: black;
    scrollbar-face-color: #3d3c3c;
    scrollbar-highlight-color: black;
    scrollbar-shadow-color: black;
    scrollbar-track-color: black;
    scrollbar-3dlight-color: black;
}


.optionsButton {
    border-style: solid;
    border-width: 1px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-color: inherit;
    position: absolute;
    background-color: transparent;
    border-radius: 8px;
    height: 35px;
    width: 86px;
    background-image: url('images/bg_DarkGrey.png');
    /*background-image: url('images/btn_orange.png');*/
}

    .optionsButton:hover {
        background-image: url('images/bg_DarkGreySolid2.png');
        cursor: pointer;
    }

.optionsButtonText {
    position: absolute;
    text-align: center;
    left: 0;
    width: 82px;
    top: 9px;
    color: white;
    font-family: Arial;
    font-size: 12pt;
}

.navigateSubtle {
    opacity: .5;
}

    .navigateSubtle:hover {
        opacity: 1;
    }

.diaryBtn {
    position: absolute;
    top: 445px;
    left: 16px;
    width: 117px;
    height: 39px;
    border-radius: 4px;
    background-image: url(images/bg_blue.png);
    background-size: cover;
}

    .diaryBtn:hover {
        background-image: url(images/bg_blue_Gloss.png);
        background-size: cover;
        cursor: pointer;
    }

.optionsMenuLabel {
    position: relative;
    font-family: Arial;
    font-size: 10pt;
    color: #b4b4b4;
    top: -23px;
    left: 35px;
    width: 139px;
    height: 28px;
    padding-top: 7px;
    padding-left: 4px;
}

    .optionsMenuLabel::selection {
        /*color: black;*/
        background-color: transparent;
    }

    .optionsMenuLabel:hover {
        color: white;
    }

.optionsImage {
    position: relative;
    top: 5px;
    left: 4px;
    width: 24px;
    height: 24px;
    background-image: url(images/bullet_ball_glass_grey.png);
}

.optionsMenuButtons {
    height: 37px;
    /*visibility:hidden;*/
}

    .optionsMenuButtons:hover {
        background-image: url(images/bg_grey1.png); /*bg_blue.png*/
        background-size: cover;
        background-color: #373737;
        cursor: pointer;
    }

.optionsMenuEmptyButtons {
    /*add extra space for scrolling*/
    height: 37px;
}

.optionSideMenu {
    position: absolute;
    background-color: black; /*#272626;*/
    color: silver;
    font-family: Arial;
    font-size: 11pt;
    border-bottom: 1px solid #1b1a1a;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    left: 5px;
    width: 179px;
    height: 566px;
    top: 8px;
    border-radius: 5px;
    border: 1px solid #aeaaaa;
}
    /*****great scrollbar css styles: https://codepen.io/devstreak/pen/dMYgeO*/
    /*also see class = share_scrollBarDarkTheme*/
    .optionSideMenu::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    .optionSideMenu::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
        border-radius: 5px;
    }

    .optionSideMenu::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }



.graphStatsCell {
    /*containter for: Trend, PriorYTD, CurrYTD on F6 Graph view in control screens etc*/
    background-color: transparent;
    height: 20px;
    width: 110px;
    padding: 0px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: none;
    border-top: none;
    text-align: center;
    /*cursor: pointer;*/
}

.graphStatsHeaderText {
    /*Cells for Headers*/
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: silver;
    font-weight: bold;
}

.graphStatsValueText {
    /*Cells for Headers*/
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    color: silver;
    /*font-weight: bold;*/
}

.graphStatsTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
}


.imgDescrExpand {
    position: absolute;
    height: 16px;
    width: 16px;
    top: 62px;
    left: 425px;
    opacity: 0.5;
}

    .imgDescrExpand:hover {
        opacity: 1.0;
        cursor: pointer;
    }


.mdiAltFormHelpImage {
    position: absolute;
    top: 5px;
    right: 55px;
    width: 24px;
    opacity: .5;
}

    .mdiAltFormHelpImage:hover {
        /*position:absolute;
        top: 5px;
        right: 85px;*/
        width: 26px;
        cursor: pointer;
        opacity: 1;
    }


.codeSelectArrows {
    position: absolute;
}

    .codeSelectArrows:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
        cursor: pointer;
        border-radius: 4px;
    }

/*  Select Box  */
.sbMenu {
    background-color: #faf7b8;
    border: 1px solid gray;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.sbItem {
    background-color: transparent;
    color: #2e2d2d;
    font-family: Arial;
    font-size: 10pt;
    height: 25px;
}

    .sbItem:hover {
        background-color: transparent;
        color: midnightblue;
        text-decoration: underline;
        font-family: Arial;
        font-size: 10pt;
        height: 25px;
        cursor: pointer;
    }

.sbCaption {
    background-color: #f4f996;
    color: dimgray;
    font-family: Arial;
    font-size: 11pt;
    padding-left: 8px;
    height: 24px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}


.tabDarkBlue {
    background-image: url(./images/Dark_Blue_Tab.png);
    color: white;
}

.tabLightBlue {
    background-image: url(./images/Light_Blue_Tab.png);
    color: white;
}

.tabGreen {
    background-image: url(./images/bg_DarkGreenShade.png);
    color: white;
}

.tabPurple {
    background-image: url(./images/bg_DarkPurpleShade.png);
    color: white;
}

.tabOrange {
    background-image: url(./images/btn_orange_flip.png);
    /*background-color: #ed9b05;*/
    color: white;
}


.spinnerLoading {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    height: 50px;
    width: 50px;
    color: #095090;
    -webkit-animation: rotation 1.6s infinite linear;
    -moz-animation: rotation 1.6s infinite linear;
    -o-animation: rotation 1.6s infinite linear;
    animation: rotation 1.6s infinite linear;
    border-left: 6px solid rgba(0, 174, 239, .8);
    border-right: 6px solid rgba(7, 112, 196, 0.80);
    border-bottom: 6px solid rgba(0, 137, 239, 0.80);
    border-top: 6px solid rgba(0, 174, 239, .15);
    border-radius: 100%;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/*gxView*/

.gxHeaderContainer {
}

.gxViewHeader {
    border-collapse: collapse;
    border: none;
}

.gxViewHeader, td {
    /*border: 1px solid whitesmoke;*/
}

.gxGridHeadingSelectorCell {
    background-color: #4c68a2;
    /*background-image: url(images/MidBlue_Grid_Header.png);*/
    padding: 0px;
    margin: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    cursor: pointer;
}

.gxGridHeadingCell {
    background-color: #4c68a2;
    padding-top: 3px;
    padding-bottom: 3px;
    /*background-image: url(images/MidBlue_Grid_Header.png);*/
    padding: 0px;
    margin: 0px;
}

.gxGridHeadingDiv {
    background-color: transparent;
    color: white;
    font-family: Arial;
    font-size: 10pt;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
}

/*gxView Details */

.gxDetailsContainer {
    overflow: scroll;
}

.gxViewDetails {
    border-collapse: collapse;
    margin-bottom: 10px;
}

.gxViewDetails, td {
    border-right: 1px solid #d5d2d2;
}


.gxDetailRow {
    background-image: none;
    background-color: #edecec;
}

    .gxDetailRow:hover {
        /*background-image: url('images/gx_row_highlight.png');*/
        background-color: #ebf2fe;
        /*background-size: cover;*/
    }

.gxDetailAlternateRow {
    background-image: none;
    background-color: #fafafc;
}

    .gxDetailAlternateRow:hover {
        /*background-image: url('images/gx_row_highlight.png');*/
        background-color: #ebf2fe;
        /*background-size: cover;*/
    }

.gxDetailRowSelected {
    background-image: url('images/gv_row_highlight.png');
    border-bottom: 1px solid silver;
    border-top: 1px solid silver;
}


/*Cell Styles*/

.gxGroupCell {
    padding: 0px;
    margin: 0px;
    /*background-color:whitesmoke;*/
    color: #262525;
    font-family: Arial;
    font-style: italic;
    font-size: 13pt;
}

.gxDetailCell {
    padding: 0px;
    margin: 0px;
    color: #262525;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
}

.gxBoldCaptionCell {
    padding: 0px;
    margin: 0px;
    color: #262525;
    background-color: transparent;
    font-family: Arial;
    font-size: 10pt;
    font-weight: 600;
}

.gxDetailDiv {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    background-color: transparent;
    white-space: nowrap;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word;
}



.gxTotalCaptionCell {
    padding: 0px;
    margin: 0px;
    font-family: Arial;
    font-style: italic;
    font-size: 11pt;
    background-color: #d4e7fc;
    /*background-color:#e1eefe;*/
}

.gxTotalAmountCell {
    padding: 0px;
    margin: 0px;
    font-family: Arial;
    font-style: normal;
    font-size: 11pt;
    background-color: #d4e7fc;
}

.gxLinkBlueCell {
    padding: 0px;
    margin: 0px;
    color: #262525;
    font-family: Arial;
    font-style: italic;
    font-size: 13pt;
    background-image: url('images/document_plain_blue_disabled_16.png');
    background-repeat: no-repeat;
    background-position: center;
}

    .gxLinkBlueCell:hover {
        background-image: url('images/document_plain_blue_16.png');
        cursor: pointer;
    }

.gxLinkYellowCell {
    padding: 0px;
    margin: 0px;
    color: #262525;
    font-family: Arial;
    font-style: italic;
    font-size: 13pt;
    background-image: url('images/document_plain_yellow_disabled_16.png');
    background-repeat: no-repeat;
    background-position: center;
}

    .gxLinkYellowCell:hover {
        background-image: url('images/document_plain_yellow_16.png');
        cursor: pointer;
    }

.gxLinkGreenCell {
    padding: 0px;
    margin: 0px;
    color: #262525;
    font-family: Arial;
    font-style: italic;
    font-size: 13pt;
    background-image: url('images/document_plain_green_disabled_16.png');
    background-repeat: no-repeat;
    background-position: center;
}

    .gxLinkGreenCell:hover {
        background-image: url('images/document_plain_green_16.png');
        cursor: pointer;
    }

.gxLinkRedCell {
    padding: 0px;
    margin: 0px;
    color: #262525;
    font-family: Arial;
    font-style: italic;
    font-size: 13pt;
    background-image: url('images/document_plain_red_disabled_16.png');
    background-repeat: no-repeat;
    background-position: center;
}

    .gxLinkRedCell:hover {
        background-image: url('images/document_plain_red_16.png');
        cursor: pointer;
    }

/*Row Selectors*/

.gxRowSelectorCell {
    background-image: url('images/grid_rowselector_silver.png');
    cursor: pointer;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid gainsboro;
}

.gxRowSelectorDiv {
    width: 100%;
    height: 100%;
    margin-left: 8px;
    background-color: transparent;
}

.gxGridHeadingExpandDiv {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 7px 6px;
    border-color: transparent transparent #e0e2e5 transparent;
    transform: rotate(90deg);
    margin-left: 5px;
}

.gxGridHeadingCollapseDiv {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 7px 6px;
    border-color: transparent transparent #e0e2e5 transparent;
    transform: rotate(180deg);
    margin-left: 5px;
}

.gxGroupExpandDiv {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 7px 6px;
    border-color: transparent transparent #b0b6bd transparent;
    transform: rotate(90deg);
    margin-left: 5px;
}

.gxGroupCollapseDiv {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 7px 6px;
    border-color: transparent transparent #b0b6bd transparent;
    transform: rotate(180deg);
    margin-left: 5px;
}
/* END: gxView Details */


.imageButtonHL {
    position: absolute;
    /*height: 24px;
    width: 24px;*/
    cursor: pointer;
}

    .imageButtonHL:hover {
        position: absolute;
        border: 1px solid transparent;
        box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
        -moz-box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
    }

.glControlAccItems {
    position: relative;
    width: 216px;
    height: 28px;
    top: 0px;
    left: 0px;
}

.glControlAccText {
    left: 128px;
    width: 81px;
    top: 0px;
}

.glControlAccLbl {
    left: 2px;
    top: 1px;
    width: 155px;
}


.bulkEmailButton {
    position: absolute;
    border: 1px solid silver;
    background-image: url(images/GrayButton3.png);
    border-radius: 4px;
    height: 50px;
    width: 95px;
    top: 2px;
    background-size: cover;
}

    .bulkEmailButton:hover {
        background-image: url(images/GrayButton3.png);
        border: 1px solid gray;
        border-radius: 4px;
        cursor: pointer;
        background-size: cover;
    }

.bulkEmailButtonActive {
    position: absolute;
    border: 1px solid silver;
    background-image: url(images/Blue_Gradient_Button.png);
    border-radius: 4px;
    height: 50px;
    width: 95px;
    cursor: pointer;
    top: 2px;
    background-size: cover;
}



.bulkEmailBtnImage {
    position: absolute;
    top: 5px;
    height: 40px;
    left: 25px;
    cursor: pointer;
    width: 40px;
}

.bulkEmailBtnImageDisabled {
    position: absolute;
    border: 1px solid silver;
    background-image: url(images/GrayButton3.png);
    border-radius: 4px;
    height: 50px;
    width: 95px;
    top: 2px;
    opacity: .4;
    background-size: cover;
}

.textBoxClearImg {
    left: 6px;
    top: 7px;
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(images/close_blue_20.png); /*url('images/close_grey_24.png');*/
    background-size: cover;
    opacity: .7;
    /*background-repeat: no-repeat;*/
}

    .textBoxClearImg:hover {
        background-image: url(images/delete3_20.png); /*url('images/close_disable_24.png');*/
        cursor: pointer;
        opacity: 1;
    }

.collLinkLabel {
    position: absolute;
    left: 450px;
    top: 5px;
    color: midnightblue;
    font-family: Arial;
    font-size: 10pt;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
}

    .collLinkLabel:hover {
        position: absolute;
        border: 1px solid transparent;
        box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
        -moz-box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
    }

.glBudgetStats {
    width: 86px;
    left: 0px;
    text-align: right;
}

.GLBudgetButton {
    position: absolute;
    border: 1px solid silver;
    background-image: url('images/GrayButton3.png');
    border-radius: 4px;
    height: 26px;
    width: 101px;
}

    .GLBudgetButton:hover {
        background-image: url(images/GrayButton3.png);
        border: 1px solid gray;
        cursor: pointer;
    }


.GLBudgetText {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #444444;
    left: 45px;
    width: 40px;
    text-align: center;
}

.controlLinkLabel {
    position: absolute;
    color: midnightblue;
    font-family: Arial;
    font-size: 10pt;
    text-decoration: underline;
    cursor: pointer;
}

    .controlLinkLabel:hover {
        position: absolute;
        border: 1px solid transparent;
        box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
        -moz-box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
    }

/*.controlLinkLabelDisabled {
    position: absolute;
    color: #a9a7a7;
    font-family: Arial;
    font-size: 10pt;
    text-decoration: underline;
    cursor: pointer;
}*/


.controlLinkLabelOpacity {
    position: absolute;
    color: midnightblue;
    font-family: Arial;
    font-size: 10pt;
    text-decoration: underline;
    cursor: pointer;
    opacity: .8;
}

    .controlLinkLabelOpacity:hover {
        opacity: 1;
        position: absolute;
        border: 1px solid transparent;
        box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
        -moz-box-shadow: rgba(0, 0, 0, 0.50) 1px 1px 2px 2px;
    }

.signInTitleBanner {
    position: absolute;
    width: 420px;
    height: 36px;
    left: 0px;
    top: 0px;
    background-image: url('images/Menu_Blue.png');
    font-family: Arial;
    font-size: 12pt;
    color: white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid grey;
}

.signInTitleBanner_StandBy {
    position: absolute;
    width: 420px;
    height: 36px;
    left: 0px;
    top: 0px;
    background-image: url('images/OrangeBanner.png');
    font-family: Arial;
    font-size: 12pt;
    /*color: gainsboro;*/
    color: black;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid grey;
}

.signInTitleBanner_PriorMonth {
    position: absolute;
    width: 420px;
    height: 36px;
    left: 0px;
    top: 0px;
    background-image: url('images/MenuBanner-Yellow.png');
    font-family: Arial;
    font-size: 12pt;
    /*color: gainsboro;*/
    color: black;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid grey;
    background-size:cover;
}

/*pa17Jul20 -- also related classes in mdimenustyle.css*/
.signInTitleBanner_TestSystem {
    position: absolute;
    width: 420px;
    height: 36px;
    left: 0px;
    top: 0px;
    background-image: url('images/RedBanner.png');
    font-family: Arial;
    font-size: 12pt;
    color: gainsboro;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid grey;
}

.placeHolderText {
    /*color: #878686;*/
    text-transform: none;
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    background-color: White;
    min-height: 16px;
    padding: 1px 3px 0px 3px;
    white-space: nowrap;
    border: 1px solid silver;
    border-radius: 0px;
    -webkit-spellcheck: false;
    -webkit-appearance: none;
    outline: none;
}

    .placeHolderText::-webkit-input-placeholder {
        color: #878686;
        text-transform: none;
        outline: none;
    }

    .placeHolderText:-moz-placeholder {
        color: #878686;
        text-transform: none;
        outline: none;
    }

    .placeHolderText::-moz-placeholder {
        color: #878686;
        text-transform: none;
        outline: none;
    }

    .placeHolderText:-ms-input-placeholder {
        color: #878686;
        text-transform: none;
        outline: none;
    }

/*af15Dec21*/
.placeHolderItalicText {
    /*color: #878686;*/
    text-transform: none;
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    background-color: White;
    min-height: 16px;
    padding: 1px 3px 0px 3px;
    white-space: nowrap;
    border: 1px solid silver;
    border-radius: 0px;
    -webkit-spellcheck: false;
    -webkit-appearance: none;
    outline: none;
}

    .placeHolderItalicText::-webkit-input-placeholder {
        color: #878686;
        text-transform: none;
        font-style: italic;
        outline: none;
    }

    .placeHolderItalicText:-moz-placeholder {
        color: #878686;
        text-transform: none;
        font-style: italic;
        outline: none;
    }

    .placeHolderItalicText::-moz-placeholder {
        color: #878686;
        text-transform: none;
        font-style: italic;
        outline: none;
    }

    .placeHolderItalicText:-ms-input-placeholder {
        color: #878686;
        text-transform: none;
        font-style: italic;
        outline: none;
    }

.comboColumnLightText {
    color: dimgray;
    /*background: white;*/
    padding-left: 8px;
    padding-right: 8px;
    font-style: italic;
}


.threeDotControlButton {
    position: absolute;
    width: 24px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid gray;
    text-align: center;
    cursor: pointer;
    padding-bottom: 4px;
}

    .threeDotControlButton:hover {
        border-bottom: 2px solid #5a5858;
        border-right: 2px solid #5a5858;
        font-weight: bold;
    }

/*.tabViewButton {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 130px;
    height: 28px;
    background-image: url('images/Black_Grid_Header.png');
    cursor: pointer;
}

    .tabViewButton:hover {
        background-image: url('images/LightGray2_Grid_Header.png');
    }

.tabViewButtonSelected {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 130px;
    height: 28px;
    background-image: url('images/tabDarkBlue_Grid_Header.png');
    cursor: pointer;
}

.tabViewButtonText {
    position: absolute;
    top: 4px;
    height: 20px;
    left: 0px;
    width: 100%;
    font-family: Arial;
    font-size: 9.75pt;
    color: white;
    text-align: center;
}*/


.tabMenuButton {
    top: 1px;
    height: 33px;
    width: 110px;
    border: 1px solid gray;
    /*border-right: 1px solid gray;
    border-bottom: 1px solid gray;*/
    background-image: url('images/BlackShadeTab.png');
    cursor: pointer;
}

    .tabMenuButton:hover {
        background-image: url('images/Caption_Black.png');
        background-image: url('images/black_button3.png');
        /*background-size: cover;*/
    }

.tabMenuButtonSelected {
    top: 1px;
    height: 33px;
    width: 110px;
    border: 1px solid gray;
    background-image: url('images/Blue_Button.png');
    background-image: url('images/BlueShadeTab2.png');
    cursor: pointer;
}

.tabMenuButtonText {
    font-family: Arial;
    font-size: 9.75pt;
    color: white;
    text-align: center;
    width: 100%;
}



.supplierLogoSmall {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 7px;
    cursor: pointer;
}

.supplierLogoSmallTable {
    width: 100%;
    height: 100%;
    border: none;
}

.supplierLogoSmallTD {
    text-align: center;
    vertical-align: middle;
    border: none;
}

.supplierLogoSmallImg {
    cursor: pointer;
}

.pConCompPanelNoHover {
    position: absolute;
    width: 120px;
    height: 110px;
    /*border: 1px solid silver;*/
    border-radius: 7px;
    cursor: pointer;
}

.pConPanelRow {
    position: relative;
    width: 100%;
    height: 125px;
    margin-top: 5px;
}

.pConCompPanel {
    position: relative;
    float: left;
    width: 120px;
    height: 117px;
    margin-left: 6px;
    margin-top: 3px;
    /*border: 1px solid silver;*/
    border-radius: 7px;
    cursor: pointer;
}

    .pConCompPanel:hover {
        -webkit-box-shadow: 0 0 40px 10px #e67a07;
        -moz-box-shadow: 0 0 40px 10px #e67a07;
        box-shadow: 0 0 40px 10px #e67a07;
        opacity: 1;
    }


.pConCompPanelSelected {
    pointer-events: none;
    -webkit-box-shadow: 0 0 20px 5px #0ca9d8;
    -moz-box-shadow: 0 0 20px 5px #0ca9d8;
    box-shadow: 0 0 20px 5px #0ca9d8;
}

    .pConCompPanelSelected:hover {
        opacity: 1;
    }

.pConCompPanelDisable {
    opacity: .5;
}

.pConCompPanelSelected:hover {
    opacity: 1;
}


.pConCompLogoDiv {
    /*border-style: none;
    border-color: inherit;
    border-width: medium;*/
    position: absolute;
    left: 5px;
    /*color: gray;*/
    /*color: transparent;*/
    top: 5px;
    height: 50px;
    width: 110px;
    /*border: 1px solid black;*/
}

.pConCompFetchLbl {
    color: #df7903;
    position: absolute;
    font-family: Arial;
    font-size: 10.75pt;
    top: 77px;
    left: 6px;
}

.pConCompPriceLbl {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    top: 69px;
    left: 6px;
}

.pConCompStockLbl {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #535252;
    top: 91px;
    left: 6px;
}

.pConCompPriceDiv {
    color: #3a3a3a;
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    font-weight: 600;
    top: 69px;
    right: 6px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pConCompStockDiv {
    color: #3a3a3a;
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    font-weight: 600;
    top: 91px;
    right: 6px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pConCompSepertorDiv {
    position: absolute;
    height: 1px;
    border-top: 1px solid #3a3a3a;
    top: 63px;
    left: 5px;
    right: 5px;
}

.pConPicTable {
    width: 100%;
    height: 100%;
    border: none;
}

.pConPicTD {
    text-align: center;
    vertical-align: middle;
    border: none;
}

.pConCompLogoImg {
    cursor: pointer;
    max-height: 50px;
    max-width: 110px;
}

.hyperLink {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: navy;
    left: 13px;
    width: 111px;
    top: 68px;
}

    .hyperLink:hover {
        text-decoration: underline;
        cursor: pointer;
    }


.imgParentOpacity {
    /*just used to increase opacity from parent*/
    position: absolute;
}

    .imgParentOpacity:hover {
        cursor: pointer;
        opacity: 1;
    }

/*zoom slider sp01Jul20*/
input[type=range] {
    -webkit-appearance: none;
    opacity: .8;
    cursor: pointer;
}

    input[type=range]::-webkit-slider-runnable-track {
        height: 5px;
        background: gray;
        border: none;
        border-radius: 3px;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16px;
        width: 8px;
        border-radius: 20%;
        background: goldenrod;
        margin-top: -5px;
    }

    input[type=range]:focus {
        outline: none;
    }

        input[type=range]:focus::-webkit-slider-runnable-track {
            background: #ccc;
        }


    input[type=range]::-moz-range-track {
        width: 300px;
        height: 5px;
        background: #ddd;
        border: none;
        border-radius: 3px;
    }

    input[type=range]::-moz-range-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: goldenrod;
    }

    /*hide the outline behind the border*/
    input[type=range]:-moz-focusring {
        outline: 1px solid white;
        outline-offset: -1px;
    }

    input[type=range]:focus::-moz-range-track {
        background: #ccc;
    }

    input[type=range]::-ms-track {
        /* width: 300px;*/
        height: 5px;
        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        background: transparent;
        /*leave room for the larger thumb to overflow with a transparent border */
        border-color: transparent;
        border-width: 6px 0;
        /*remove default tick marks*/
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background: #777;
        border-radius: 10px;
    }

    input[type=range]::-ms-fill-upper {
        background: #ddd;
        border-radius: 10px;
    }

    input[type=range]::-ms-thumb {
        border: none;
        height: 16px;
        width: 8px;
        border-radius: 20%;
        background: goldenrod;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: #888;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: #ccc;
    }

/*pa30Jul20*/
.progressMessageDark {
    position: absolute;
    font-size: 17pt;
    font-family: Arial;
    color: white;
    border-radius: 8px;
    border: 1px solid silver;
    text-align: center;
    /*background-color: #7b7474;*/
    background-image: url(./images/Dark_Blue_Tab.png);
    background-size: cover;
    z-index: 1000;
    padding: 5px 10px 5px 10px;
    box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
}

.elemHighLightBorder {
    position: absolute;
    width: 169px;
    height: 22px;
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 2px #e67a07;
    -moz-box-shadow: 0 0 5px 2px #e67a07;
    box-shadow: 0 0 5px 2px #e67a07;
    visibility: hidden;
}

/*pa18Sep20 - see: share_createToolTipSpan for more*/
.tooltip {
    position: relative;
    display: inline-block;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -60px;
        /* Fade in tooltip*/
        transition-timing-function: ease-in;
        opacity: 0;
        transition: opacity 2s;
    }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

/*pa5Nov20*/
.txtArea {
    resize: none;
    border: 1px solid #b1afaf;
    outline: none;
}

    .txtArea:focus {
        border: 2px solid #83b1d9;
        /*outline: 1px solid #83b1d9;*/
        /*padding: 2px 2px 2px 1px;*/
    }

/*pa12Feb21*/
.hoverToggle {
    cursor: pointer;
}

    .hoverToggle:hover {
        border-top: 1px solid transparent; /*No Color, just moves a little because of border*/
        border-left: 1px solid transparent; /*No Color, just moves a little because of border*/
    }

/*See :focus  and   :focus-visible*/
/**[tabindex]:focus {
    outline: 2px red dotted;
}*/

.elemBorderGlow {
    -webkit-box-shadow: 0 0 5px 2px #e67a07;
    -moz-box-shadow: 0 0 5px 2px #e67a07;
    box-shadow: 0 0 5px 2px #e67a07;
}

.emojiDiv {
    /*position: absolute;*/
    float: left;
    font-family: Arial;
    font-size: 12pt;
    height: 24px;
    width: 24px;
    text-align: center;
    border-radius: 7px;
    margin-bottom: 3px;
    margin-top: 3px;
    margin-left: 3px;
    margin-right: 3px;
}

    .emojiDiv:hover {
        -webkit-box-shadow: 0 0 5px 2px #e67a07;
        -moz-box-shadow: 0 0 5px 2px #e67a07;
        box-shadow: 0 0 5px 2px #e67a07;
        cursor: pointer;
    }

.controlMobileImage {
    position: absolute;
    height: 24px;
    width: 24px;
    background-image: url(images/mobilephone3_grey_48.png);
    background-repeat: no-repeat;
    background-size: cover;
}

    .controlMobileImage:hover {
        height: 25px;
        width: 25px;
        cursor: pointer;
        background-image: url(images/mobilephone3_48.png);
    }

.infoImage {
    position: absolute;
    height: 24px;
    cursor: pointer;
    opacity: .7;
}

    .infoImage:hover {
        opacity: 1;
    }


/* af_07Jul21*/
.xeroGetStartedPanelDark {
    position: absolute;
    font-size: 17pt;
    font-family: Arial;
    color: white;
    border-radius: 8px;
    border: 1px solid silver;
    text-align: center;
    /*background-color: #7b7474;*/
    background-image: url(./images/Dark_Blue_Tab.png);
    background-size: cover;
    z-index: 1000;
    padding: 5px 10px 5px 10px;
    box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.30) 7px 7px;
}

/* af_07Jul21*/
.xeroGetStartedButton {
    position: absolute;
    border: 1px solid silver;
    background-image: url('images/GrayButton3.png');
    border-radius: 4px;
    height: 26px;
    width: 101px;
}

    .xeroGetStartedButton:hover {
        border: 1px solid #f79a07;
        box-shadow: 0px 0px 10px #f79a07;
        -webkit-box-shadow: 0px 0px 10px #f79a07;
        -moz-box-shadow: 0px 0px 10px #f79a07;
        cursor: pointer;
    }


.xeroGetStartedButtonText {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    color: #444444;
    left: 45px;
    width: 40px;
    text-align: center;
}

/* af_16Jul21*/
.progressBarContainer {
    border: 1px solid silver;
    border-radius: 5px;
    width: 275px;
    height: 20px;
    position: absolute;
    background-image: url(images/Dark_Blue_Tab.png);
    overflow-x: hidden;
}

.progressBar {
    position: absolute;
    /*background-color: rgb(24, 126, 26);*/
    background-image: url(images/Light_Blue_Tab.png);
    /*border-radius: 5px;*/
    height: 100%;
    width: 0%;
    transition: width 1s linear;
}

.blendedText {
    position: absolute;
    /*color: rgb(24, 126, 26);*/
    color: white;
    width: 275px;
    top: 2px;
    left: 0px;
    text-align: center;
}

    .blendedText::after {
        /* This value is the OPPOSITE color of our background */
        content: attr(data-contentvalue);
        /*mix-blend-mode: difference;*/
        color: white;
    }

.xeroLoginLink {
    position: absolute;
    font-family: Arial;
    font-size: 9.75pt;
    left: 13px;
    width: 111px;
    top: 68px;
    color: #b4a9a9;
    opacity: 0.75;
}

    .xeroLoginLink:hover {
        text-decoration: underline;
        cursor: pointer;
        opacity: 1;
        color: white;
    }

.imgHovGlow {
    position: absolute;
}

    .imgHovGlow:hover {
        cursor: pointer;
        /*border: 1px solid orange;*/
        box-shadow: inset 1px 0px 20px 12px #f58107, 0px 0px 20px 4px #f58107;
        -webkit-box-shadow: inset 1px 0px 20px 12px #f58107, 0px 0px 20px 4px #f58107;
        -moz-box-shadow: inset 1px 0px 20px 12px #f58107, 0px 0px 20px 4px #f58107;
    }

.imgHovGlowLightOrange {
    position: absolute;
}

    .imgHovGlowLightOrange:hover {
        cursor: pointer;
        /*border: 1px solid orange;*/
        box-shadow: inset 1px 0px 20px 12px rgba(250, 166, 79, 0.85), 0px 0px 20px 4px rgba(250, 166, 79, 0.85);
        -webkit-box-shadow: inset 1px 0px 20px 12px rgba(250, 166, 79, 0.85), 0px 0px 20px 4px rgba(250, 166, 79, 0.85);
        -moz-box-shadow: inset 1px 0px 20px 12px rgba(250, 166, 79, 0.85), 0px 0px 20px 4px rgba(250, 166, 79, 0.85);
    }

.imgHovGlowWhite {
    position: absolute;
}

    .imgHovGlowWhite:hover {
        cursor: pointer;
        box-shadow: 0px 0px 20px 8px #f5f5f5;
        -webkit-box-shadow: 0px 0px 20px 8px #f5f5f5;
        -moz-box-shadow: 0px 0px 20px 8px #f5f5f5;
    }

.imgHovBorder {
    position: absolute;
}

    .imgHovBorder:hover {
        cursor: pointer;
        border: 1px solid silver;
        border-radius: 5px;
    }


/*pa9Sep21*/
.textBoxFocus {
    border-style: none;
    border-color: inherit;
    position: absolute;
    width: 5px;
    font-size: 9pt;
    background-color: transparent;
    border-width: 0px;
    color: transparent;
}

    .textBoxFocus::selection {
        color: transparent;
        background-color: transparent;
    }
/*pa8Oct21*/
/*.allowResize {
    resize:both;
    overflow:hidden; 
}*/
.resizer-right {
    width: 5px;
    height: 100%;
    /*background: pink;*/
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: e-resize;
    z-index: 10000;
}

.resizer-bottom {
    width: 100%;
    height: 5px;
    /*background: purple;*/
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: n-resize;
    z-index: 10000;
}

/*.resizer-both {
        width: 5px;
        height: 5px;
        background: yellow;
        position: absolute;
        right: 0;
        bottom: 0;
        cursor: nw-resize;
        z-index:10001;
    }*/

.resizeGripImage {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 16px;
    height: 16px;
    z-index: 10001;
    opacity: .3;
    background-image: url(images/grip_purple.png);
    background-repeat: no-repeat;
    background-size: cover;
}

    .resizeGripImage:hover {
        opacity: .8;
        cursor: nw-resize;
        background-image: url(images/grip_purple.png);
    }

/*pa22Oct21 - classed for banners, including a specific class which js attaches drag events*/
.bannerBlue {
    /*No Drag, just a standard banner*/
    position: absolute;
    background-image: url('images/bluecaption.png');
    width: 100%;
    height: 33px;
    left: 0px;
    top: 0px;
    font-family: Arial;
    font-size: 13pt;
    color: gainsboro;
}

.bannerBlueDrag {
    /*js adds draggable functions based on class*/
    position: absolute;
    background-image: url('images/bluecaption.png');
    width: 100%;
    height: 33px;
    left: 0px;
    top: 0px;
    font-family: Arial;
    font-size: 13pt;
    color: gainsboro;
    cursor: move;
}

.bannerBlueTitle {
    position: absolute;
    left: 52px;
    top: 6px;
    font-family: Arial;
    font-size: 13pt;
    color: gainsboro;
}

.bannerBlueImage {
    position: absolute;
    left: 12px;
    top: 3px;
    width: 28px;
}


.imageStack {
    border: none;
    width: 24px;
    margin: 4px;
    margin-left: 8px;
    /*margin-bottom: 10px;*/
}

    .imageStack:hover {
        /*border-top: 1px solid transparent;
        border-left: 1px solid transparent;*/
        /*box-shadow: 0px 0px 0px 2px gold;*/
        cursor: pointer;
    }


.msgBoxPlaceHolder {
    display: none;
    visibility: hidden;
}

.blueSubHeading {
    position: absolute;
    font-family: Verdana;
    font-size: 13pt;
    color: midnightblue;
    text-decoration: underline;
}

.lineSepHorizontal_Light {
    /*line break spacer*/
    position: absolute;
    left: 7px;
    top: 226px;
    width: 349px;
    height: 1px;
    border-top: 1px solid silver;
}

.lineSepVertical_Light {
    /*line break spacer*/
    position: absolute;
    width: 1px;
    left: 7px;
    top: 226px;
    height: 100px;
    border-left: 1px solid silver;
}

.lineSepHorizontal_Dark {
    /*line break spacer*/
    position: absolute;
    left: 7px;
    top: 226px;
    width: 529px;
    height: 22px;
    border-top: 1px solid gray;
}

.lineSepVertical_Dark {
    /*line break spacer*/
    position: absolute;
    left: 7px;
    top: 226px;
    width: 1px;
    height: 100px;
    border-left: 1px solid gray;
}

.supplierConnectAtom {
    left: 6px;
    top: 7px;
    position: absolute;
    width: 24px;
    height: 24px;
    background-size: contain;
    /*background-image: url(images/atom_BW_48.png);  
    background-image: url(images/atom_48_Goldish.png);*/
    background-image: url(images/atom_48_lightBW.png);
    background-repeat: no-repeat;
}

    .supplierConnectAtom:hover {
        background-image: url(images/atom_48.png);
        cursor: pointer;
    }

/*pa27Jan22 - General use*/
.opacityHov {
    position: absolute;
    cursor: pointer;
    opacity: .7;
}

    .opacityHov:hover {
        opacity: 1;
    }

/*pa27Jan22 - General use*/
.grayscaleHov {
    filter: grayscale(100%);
}

    .grayscaleHov:hover {
        filter: grayscale(0%);
    }

.grayscaleOnly {
    filter: grayscale(100%);
}

.fullScreenModal {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 100%;
    z-index: 300;
    background-color: black;
    opacity: 0.5;
    filter: alpha(opacity=50);
}


.genericCustomScrollBar {
    overflow-y: auto;
    overflow-x: hidden; /*auto*/
}
    /*pa23Sep20*/
    .genericCustomScrollBar::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #50504f;
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    .genericCustomScrollBar::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
        border-radius: 5px;
    }

    .genericCustomScrollBar::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px #50504f;
        background-color: #50504f;
    }

.SBW_med{
/*class for wider scrollbar -- */
}
    .SBW_med::-webkit-scrollbar {
        width: 17px;
    }


.divPageFullSize {
    position: absolute;
    height: 580px;
    width: 800px;
    left: 0px;
    top: 0px;
}

.generalPageBackGround {
    position: absolute;
    background-image: url('images/bg_silver16.jpg');
    background-size: cover;
    -webkit-user-select: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}


/*  Grid Extra Options Panel and Elems  */
.optMenu {
    background-color: #faf7b8;
    border: 1px solid gray;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.optItem {
    background-color: transparent;
    color: #2e2d2d;
    font-family: Arial;
    font-size: 10pt;
    height: 35px;
   position : relative;
   width : 100%;
}

    .optItem:hover {
        background-color: #fff4a0;
        color: midnightblue;
        text-decoration: underline;
        cursor: pointer;
    }

.optItemDisabled {
    background-color: transparent;
    color: #2e2d2d;
    font-family: Arial;
    font-size: 10pt;
    height: 35px;
    position: relative;
    width: 100%;
    opacity: .5;
    pointer-events: none;
}

.optCaption {
    color: inherit;
    font-family: Arial;
    font-size: 11pt;
    /*padding-left: 40px;*/
    height: 24px;
    left: 36px;
    top: 7px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-decoration: inherit;
}

.optImgItem {
    height: 24px;
    width: 24px;
    left: 4px;
    top: 3px;
    position: absolute;
    cursor: pointer;
}


/* af05Sep22 */
.shcStat {
    width: 100px;
    text-align: right;
    font-size: 10pt;
}

.shcDisabled {
    background-color: whitesmoke;
    border: 0.5px solid white;
}

.shcHov {
    cursor: pointer;
    /*pointer-events: auto;*/
}

    .shcHov:hover {
        color: #0072ff;
        cursor: pointer;
        text-decoration: underline;
    }


.imageViewerButton {
    cursor: pointer;
}

.imageViewerButton {
    cursor: pointer;
}

    .imageViewerButton:hover {
        /*background-color: #8ebffb;*/
        background-image: url(images/333.png);
        background-size: cover;
        /*border: 1px solid #348bf5;*/
    }

/* af07Dec22 */
.imageViewerChip {
    width: 70px;
    display: flex;
    padding: 2px;
    cursor: pointer;
    height: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid transparent;
    /*transition: all 500ms linear;*/
    flex: 0.0001;
}

.imageViewerChipHover:hover {
    border: 1px solid grey;
    /*background-color: white;*/
    background-image: url(images/bg_LightBlueShade.png);
    background-size: cover;
}

.imageViewerChipAnimate {
    -webkit-animation: chipAnimation 1000ms ease;
    animation: chipAnimation 1000ms ease;
}

@-webkit-keyframes chipAnimation {
    to {
        width: 70px;
        flex: 1;
    }
}

@keyframes chipAnimation {
    to {
        width: 70px;
        flex: 1;
    }
}

.greenBorderGlow {
    -webkit-box-shadow: 0 0 5px 2px limegreen;
    -moz-box-shadow: 0 0 5px 2px limegreen;
    box-shadow: 0 0 5px 2px limegreen;
}

.blueYellowHeading {
    position: absolute;
    background-color: midnightblue;
    color: yellow;
    font-family: Verdana;
    font-size: 12pt;
    text-align: center;
    border-radius: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
}


/* af31Jan23 WooCategory element styles */
.wooCategoryChip {
    width: 75px;
    display: flex;
    padding: 4px;
    cursor: pointer;
    height: 12px;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    border: 1px solid grey;
    margin-left: 2px;
    background-color: whitesmoke;
}

    .wooCategoryChip:hover {
        border: 1px solid grey;
        /*background-color: white;*/
        background-image: url(images/bg_LightBlueShade.png);
        background-color: unset;
        background-size: cover;
    }

.wooCategoryChipText {
}

    .wooCategoryChipText:hover {
        text-decoration: underline;
    }



.wooCategoryChipDelete {
    /*border: 2px solid grey;*/
    cursor: pointer;
    height: 15px;
    width: 22px;
    filter: grayscale(1);
    background-image: url(images/close_blue_20.png);
    background-size: cover;
    opacity: 0.6;
    margin-right: 1px;
}

    .wooCategoryChipDelete:hover {
        /*border: 2px solid black;*/
        filter: unset;
        opacity: 1;
        background-image: url(images/delete3_20.png);
    }

.controlLabelHyperlink {
}

    .controlLabelHyperlink:hover {
        cursor: pointer;
        color: midnightblue;
        text-decoration: underline;
    }


.emailTemplateRow {
}

.emailTemplateHeaderCell {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background-color: lightgrey;
    border: 1px solid silver;
}

.emailTemplateHeaderCellText {
    font-size: 9.25pt;
}

.emailTemplateCell {
}

.emailTemplateCellText {
    font-size: 9.25pt;
}

.emailTemplateCellLinkText {
    /*text-decoration: underline;*/
    color: midnightblue;
    cursor: pointer;
}


.optionSearchHeaderCell {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background-color: lightgrey;
    border: 1px solid silver;
}

.optionSearchHeaderCellText {
    font-size: 9pt;
}

.rippleOutwardsAnimateGreen {
    display: block;
    border-radius: 50%;
    border: 1px #ffffff solid;
    animation: rippleOutwardsAnimationGreen 1s infinite;
    color: rgb(50,205,50);
    background-color: rgb(50,205,50);
}

@-webkit-keyframes rippleOutwardsAnimationGreen {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(50,205,50, 0.4);
    }

    70% {
        -webkit-box-shadow: 0 0 0 18px rgba(50,205,50, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(50,205,50, 0);
    }
}

.rippleOutwardsAnimateYellow {
    display: block;
    border-radius: 50%;
    background-color: yellow;
    box-shadow: 0 0 0 6px rgba(255, 255, 0, 0);
    -webkit-box-shadow: 0 0 0 6px rgba(255, 255, 0, 0);
    transform: scale(1);
    animation: rippleOutwardsAnimationYellow 2s infinite;
}


@-webkit-keyframes rippleOutwardsAnimationYellow {
    0% {
        transform: scale(3.0);
        box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.5);
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 0, 0.5);
    }
    /*        90% {
            transform: scale(1.5);
            box-shadow: 0 0 0 10px rgba(255, 255, 0, 0.3);
            -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.3);
        }
*/
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255, 255, 0, 0);
        -webkit-box-shadow: 0 0 0 6px rgba(255, 255, 0, 0);
    }
}

.searchOptionsTopPanelHover {
}

    .searchOptionsTopPanelHover:hover {
        background-color: #5b5555;
        /*background-image: url(images/bg_darkblue.png);*/
    }


.peachBackgroundGradiant {
    /* ff 3.6+ */
    background: -moz-linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);
    /* safari 5.1+,chrome 10+ */
    background: -webkit-linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);
    /* opera 11.10+ */
    background: -o-linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);
    /* ie 10+ */
    background: -ms-linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);
    /* global 94%+ browsers support */
    background: linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);
}

.peachBackgroundGradiantReverse {
    /*opposite ... light to dark*/
    /* ff 3.6+ */
    background: -moz-linear-gradient(135deg, rgba(255, 209, 0, .3) 0%, rgba(255, 88, 0, .3) 100%);
    /* safari 5.1+,chrome 10+ */
    background: -webkit-linear-gradient(135deg, rgba(255, 209, 0, .3) 0%, rgba(255, 88, 0, .3) 100%);
    /* opera 11.10+ */
    background: -o-linear-gradient(135deg, rgba(255, 209, 0, .3) 0%, rgba(255, 88, 0, .3) 100%);
    /* ie 10+ */
    background: -ms-linear-gradient(135deg, rgba(255, 209, 0, .3) 0%, rgba(255, 88, 0, .3) 100%);
    /* global 94%+ browsers support */
    background: linear-gradient(135deg, rgba(255, 209, 0, .3) 0%, rgba(255, 88, 0, .3) 100%);
}

.peachPanelGradiant {
    /* ff 3.6+ */
    background: -moz-linear-gradient(135deg,rgba(255, 209, 0, .1) 0%, rgba(255, 88, 0, .09) 100%);
    /* safari 5.1+,chrome 10+ */
    background: -webkit-linear-gradient(135deg, rgba(255, 209, 0, .1) 0%, rgba(255, 88, 0, .09) 100%);
    /* opera 11.10+ */
    background: -o-linear-gradient(135deg, rgba(255, 209, 0, .1) 0%, rgba(255, 88, 0, .09) 100%);
    /* ie 10+ */
    background: -ms-linear-gradient(135deg, rgba(255, 209, 0, .1) 0%, rgba(255, 88, 0, .09) 100%);
    /* global 94%+ browsers support */
    background: linear-gradient(135deg, rgba(255, 209, 0, .1) 0%, rgba(255, 88, 0, .09) 100%);
}



/*pa20Mar23 - Note:   :focus and  :focus-visible  ---  focus will still toggle if using a mouse, but focus-visible is keyboard tab driven..*/
.focusTextBlue {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    min-height: 24px;
    outline: none;
    border: 1px solid #a7a6a6;
    border-radius: 4px;
}

    .focusTextBlue:focus {
        border: 2px solid #83b1d9;
        border-color: rgba(82,168,236,0.8);
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
    }

.focusTextRed {
    position: absolute;
    font-family: Arial;
    font-size: 10pt;
    color: Black;
    min-height: 24px;
    outline: none;
    border: 1px solid #a7a6a6;
    border-radius: 4px;
}

    .focusTextRed:focus {
        border: 2px solid #c26422;
        border-color: rgba(220,113,39,0.8);
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(220,113,39,0.8);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(220,113,39,0.8);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(220,113,39,0.8);
    }


/*pa20Mar23*/
.signInBtnPeach {
    position: absolute;
    top: 445px;
    left: 16px;
    width: 117px;
    height: 39px;
    border-radius: 4px;
    outline: none;
}

    .signInBtnPeach:hover {
        cursor: pointer;
        border-top: 2px solid #c26422;
        border-left: 2px solid #c26422;
        border-bottom: 2px solid #eb985e;
        border-right: 2px solid #eb985e;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(220,113,39,0.8);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(220,113,39,0.8);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(220,113,39,0.8);
        /* ff 3.6+ */
        background: -moz-linear-gradient(135deg, rgba(255, 88, 0, .1) 0%, rgba(255, 209, 0, .1) 100%);
        /* safari 5.1+,chrome 10+ */
        background: -webkit-linear-gradient(135deg, rgba(255, 88, 0, .1) 0%, rgba(255, 209, 0, .1) 100%);
        /* opera 11.10+ */
        background: -o-linear-gradient(135deg, rgba(255, 88, 0, .1) 0%, rgba(255, 209, 0, .1) 100%);
        /* ie 10+ */
        background: -ms-linear-gradient(135deg, rgba(255, 88, 0, .1) 0%, rgba(255, 209, 0, .1) 100%);
        /* global 94%+ browsers support */
        background: linear-gradient(135deg, rgba(255, 88, 0, .1) 0%, rgba(255, 209, 0, .1) 100%);
    }

    .signInBtnPeach:focus-visible {
        border: none;
        border-top: 2px solid #c26422;
        border-left: 2px solid #c26422;
        border-bottom: 2px solid #eb985e;
        border-right: 2px solid #eb985e;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(220,113,39,0.8);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(220,113,39,0.8);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(220,113,39,0.8);
    }


.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

    .ribbon span {
        font-family: Arial;
        font-size: 11pt;
        font-weight: bold;
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
        line-height: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        width: 100px;
        display: block;
        background: #79A70A;
        background: linear-gradient(#9BC90D 0%, #79A70A 100%);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 19px;
        right: -21px;
    }

        .ribbon span::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid #79A70A;
            border-right: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #79A70A;
        }

        .ribbon span::after {
            content: "";
            position: absolute;
            right: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid transparent;
            border-right: 3px solid #79A70A;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #79A70A;
        }


.bulletinPanel {
    position: relative;
    float: left;
    /*border: 1px solid red;*/
    cursor: pointer;
    top: 10px;
    left: 10px;
    right:-10px;
    width: 784px;
}

.bulletinSeparator {
    position: relative;
    float: left;
    left: 10px;
    width: 97%;
    height: 4px;
    border: groove;
    background-color: #ff7700;
    margin-top: 10px;
    margin-bottom: 10px;
    background-image: linear-gradient(to right, #ff7d00, orange);
}

/*    .bulletinPanel:hover {
        -webkit-box-shadow: 0 0 40px 10px #e67a07;
        -moz-box-shadow: 0 0 40px 10px #e67a07;
        box-shadow: 0 0 40px 10px #e67a07;
    }*/

.bulletinHeader {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    width: 100%;
    font-size: 24pt;
    color: purple;
    font-family: Calibri;
}

.bulletinMainImage {
    position: relative;
    top: 0px;
    left: 0px;
    cursor: pointer;
    width: 95%;
    border: ridge;
}

.bulletinPriorImage {
    border-style: ridge;
    border-color: inherit;
    border-width: medium;
    position: relative;
    float: left;
    top: 0px;
    left: 0px;
    cursor: pointer;
    width: 236px;
    max-width: 236px;
    margin-right: 10px;
}

.bulletinInfoText {
    position: relative;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    width: 94%;
    font-family: Arial;
    font-size: 13.5pt;
    color: #535252;
    cursor: default;
    border-bottom: 3px groove orange;
}

.bulletinActionButton {
    position: relative;
    border-radius: 4px;
    left: 7px;
    width: 350px;
    height: 50px;
    width: auto;
    width: 95%;
}

    .bulletinActionButton:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-image: url(images/btn_orange.png);
    /* ff 3.6+ */
    background: -moz-linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);
    /* safari 5.1+,chrome 10+ */
    background: -webkit-linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);
    /* opera 11.10+ */
    background: -o-linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);
    /* ie 10+ */
    background: -ms-linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);
    /* global 94%+ browsers support */
    background: linear-gradient(135deg, rgba(255, 88, 0, .3) 0%, rgba(255, 209, 0, .3) 100%);

        cursor: pointer;
        border-left: 1px solid gray;
        border-top: 1px solid gray;
        border-bottom: 1px solid white;
        border-right: 1px solid white;
    }

.bulletinActionButtonText {
    position: absolute;
    top: 15px;
    left: 44px;
    color: midnightblue;
    font-family: Arial;
    font-size: 14pt;
    text-decoration: underline;
    width: calc(100% - 44px);
}

.bulletinActionButtonImage {
    position: absolute;
    left: 5px;
    top: 9px;
    width: 28px;
}

.redNotificationBadge {
    position: absolute;
    right: 5px;
    top:0px;
    min-width: 21px;
    height: 20px;
    color: white;
    font-family: 'Cambria Math';
    font-weight: 600;
    border-radius: 15px;
    border: 1px solid white;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11pt;
    box-shadow: 0px 0px 9px 2px white;
   padding-right: 1px;
}

.hoverShade {
    /*Hover class*/
    color: silver; /*so text can inherit*/
}
    .hoverShade:hover {
        background-image: url(images/LightYellow_Grid_Header.png);
        color: #2b2b2b;
           }


.F6MenuPanel {
    left: 122px;
    width: 556px;
    border: 1px solid white;
    top: 10px;
    position: absolute;
    height: 551px;
    border-radius: 4px;
}


/* FlipPay */
.flipProductContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 2px;
    justify-content: center;
    padding: initial;
    width: 100%;
    height: 100%;
}

.flipProductTile {
    list-style-type: none;
    width: 130px;
    max-width: 130px;
    height: 80px;
    background-color: white;
    border-radius: 4px;
    padding: 4px;
    margin: 3px;
    border: 1px solid silver;
    font-family: Arial;
    cursor: pointer;
    position: relative;
}

.flipProductTitle {
    font-size: 10.5pt;
    font-weight: bold;
    margin-bottom: 6px;
    width: 126px;
}

.flipProductText {
    font-size: 9pt;
    color: gray;
}

.flipProductFeeText {
    font-size: 10pt;
    color: gray;
    /*font-weight: bold;*/
}

.flipProductTileSelected > .flipProductTitle {
    font-weight: unset;
}

.flipProductTileSelected > .flipProductText {
    color: white;
}

.flipProductTileSelected > .flipProductFeeText {
    color: white;
}



.flipProductTileSelected {
    background-image: url(images/Blue_Gradient_Button.png);
    background-size: cover;
    color: white;
    box-shadow: 0px 0px 20px 0px #7aacf2;
    -webkit-box-shadow: 0px 0px 20px 0px #7aacf2;
    -moz-box-shadow: 0px 0px 20px 0px #7aacf2;
}

/*    .flipProductTileSelected::before {
        border-radius: 5px;
        content: '';
        left: -5px;
        top: -5px;
        background: linear-gradient(45deg, #4cbad8, #82e4d8d9, #323bdc, #2d7ead, #9fc2eb, #5d64b6, #1040d9, #71e1e5de, #318ec8);
        background-size: 460%;
        width: 148px;
        height: 98px;
        min-width: 148px;
        min-height: 98px;
        z-index: -1;
        animation: flipSelectedGlow 20s linear infinite;
        position: absolute;
    }*/


@keyframes flipSelectedGlow {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.flipProductTileDisabled {
    opacity: 0.6;
    cursor: default;
}

.flipProductExternalLink {
    position: absolute;
    right: 0px;
    top: 0px;
    color: gray;
    opacity: 0.7;
    margin: 5px;
}

.flipProductExternalLinkHover {
}

    .flipProductExternalLinkHover:hover {
        border-radius: 4px;
        box-shadow: 0px 0px 20px 8px #7aacf2;
        -webkit-box-shadow: 0px 0px 20px 8px #7aacf2;
        -moz-box-shadow: 0px 0px 20px 8px #7aacf2;
    }

.flipProductTileHover {
}

    .flipProductTileHover:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
        color: #212020;
    }

        .flipProductTileHover:hover > .flipProductText {
            color: black;
        }

.flipProductCardHeading {
    margin-left: 4px;
    margin-top: 2px;
    font-family: Arial;
    font-size: 12pt;
    color: black;
}

.flipProductCardText {
    margin-right: 6px;
    text-align: right;
    margin-left: 4px;
    margin-top: 2px;
    font-family: Arial;
    font-size: 11pt;
    color: black;
}

.flipLegendStatusContainer {
    background-color: whitesmoke;
    border: 1px solid silver;
    border-radius: 4px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    max-height: 30px;
    min-height: 30px;
    font-family: Arial;
}

.flipLegendStatus {
    background-color: whitesmoke;
    border-radius: 4px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    width: 100%;
    font-family: Arial;
}

.flipLegendStatusText {
    font-family: Arial;
    justify-content: left;
    align-items: center;
    display: flex;
}


.healthCheckInfoItemText {
    font-family: Arial;
}

.healthCheckItemLink {
    text-decoration: underline;
    color: midnightblue;
    cursor: pointer;
    padding: 2px;
}

    .healthCheckItemLink:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
    }


/*af14Mar24*/
.btnAutoproNav {
    background-image: url(images/GrayButton3.png);
    background-size: cover;
    cursor: pointer;
}

    .btnAutoproNav:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
    }

    /*MessageBox Styles, shorthand*/
.ms1 {
    font-weight: bold;
    color: #7e0bb4; /*purple*/
}
.ms2 {
    font-weight: bold;
    color: #0b4ab4;  /*blueish*/
}
.msIt {
    font-style:italic;
}

.blueAndBold {
    font-weight: bold;
    color: #1e63d7; /*blueish*/
}

.lblRFCInUse{
    background-color:orange;
    text-decoration:unset;
    border:1px solid gray;
    border-radius:4px;
}


/* af22May24 */
.oAuthButton {
    position: absolute;
    width: 200px;
    height: 44px;
    cursor: pointer;
    border: 1px solid silver;
    border-radius: 4px;
    background-color: white;
}

.oAuthButtonImage {
    position: absolute;
    left: 10px;
    top: 6px;
    width: 30px;
}

.oAuthButtonText {
    position: absolute;
    left: 58px;
    top: 14px;
    font-family: Arial;
    font-size: 10pt;
}

.oAuthButtonDisabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.oAuthButtonHover {
}

    .oAuthButtonHover:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
    }

.hiddenClass {
    color: #b30000; 
    font-weight: 600;
}

/*af11Oct24*/
.btnFlipPayNav {
    background-image: url(images/GrayButton3.png);
    background-size: cover;
    cursor: pointer;
}

    .btnFlipPayNav:hover {
        background-image: url(images/bg_LightBlueShade.png);
        background-size: cover;
    }


/* af31Oct24 - pulse class and animation */
.pulseElement {
    /*transform: scale(1);*/
    animation: pulseAnimation 2s infinite;
}

@keyframes pulseAnimation {
    0% {
        /*transform: scale(0.85);*/
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        /*transform: scale(1);*/
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        /*transform: scale(0.85);*/
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.linkLabel {
    position: absolute;
    color: midnightblue;
    text-decoration: underline;
}

    .linkLabel:hover {
        cursor: pointer;
    }