body, p, div, table, td, label, input, textarea, select {
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 13px;
}

.hkm, .hkm p, .hkm div, .hkm table, .hkm td, .hkm label, .hkm input, .hkm textarea, .hkm select {
    font-size: 14px;
}

.historyItem {
    margin: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-indent: 0px !important;
    white-space: nowrap;
}

    .historyItem a {
        color: #343434;
        vertical-align: top;
        text-decoration: none;
    }

        .historyItem a:hover {
            text-decoration: underline;
        }

img.searchHistory {
    padding: 2px 3px 0px 7px;
}

#searchHistoryWrapper {
    padding: 20px 0px 10px 0px;
}

#searchHistoryContainer {
    display: inline;
    cursor: default;
}

.searchHistoryHoverArea {
    position: absolute;
    height: 20px;
    vertical-align: middle;
    padding-top: 5px;
    padding-right: 9px;
    z-index: 99;
}

.searchHistoryHoverAreaHover {
    position: absolute;
    height: 20px;
    vertical-align: middle;
    padding-top: 5px;
    z-index: 100;
}

#searchHistoryLabel {
    color: #343434;
    font-size: 16px;
    vertical-align: 3px;
}

#searchHistory {
    border: 1px solid #CCDDFF;
    background-color: #F7F7F7;
    position: absolute;
    padding-top: 15px;
    left: 0px;
    z-index: 99;
}

.searchHistoryColumn {
    vertical-align: top;
    padding: 0px 20px 0px 15px;
    min-width: 100px;
}

.pinnedImage {
    height: 16px;
    width: 20px;
    background-image: url(Images/pin.png);
    background-position: center;
    background-repeat: no-repeat;
}

    .pinnedImage:hover {
        height: 16px;
        width: 20px;
        background-image: url(Images/delete_x.png);
        background-position: center;
        background-repeat: no-repeat;
    }

.unpinnedImage {
    height: 16px;
    width: 20px;
}

    .unpinnedImage:hover {
        height: 16px;
        width: 20px;
        background-image: url(Images/pin.png);
        background-position: center;
        background-repeat: no-repeat;
    }

.searchHistoryDivider {
    background-color: #CCDDFF;
    height: 1px;
    border: 0px;
    margin-bottom: 2px;
    margin-left: 5px;
}

.firstColumn .searchHistoryHoverArea {
    position: absolute;
    top: 28px;
    width: inherit;
    height: 25px;
    line-height: 20px;
    vertical-align: middle;
    padding-top: 7px;
    z-index: 11;
}

.firstColumn .searchHistoryHoverAreaHover {
    position: absolute;
    top: 28px;
    width: inherit;
    height: 25px;
    line-height: 20px;
    vertical-align: middle;
    padding-top: 7px;
    z-index: 11;
    background-color: #F7F7F7;
    border-left: 1px solid #CCDDFF;
    border-top: 1px solid #CCDDFF;
    border-right: 1px solid #CCDDFF;
}

.firstColumn #searchHistory {
    border: 1px solid #CCDDFF;
    background-color: #F7F7F7;
    position: absolute;
    top: 60px;
    left: 0px;
    z-index: 10;
}

body {
    padding: 0;
    margin: 0;
    min-width: 100%;
    display: inline-block;
}

.logonImage {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
}

.logonControl {
    margin-top: 10px;
    width: 380px;
    font-family: Tahoma;
}

.logonButton {
    margin-right: auto;
    margin-left: auto;
}

.cellLeft {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

.cellRight {
    margin-left: 5px;
    clear: left;
    display: inline-block;
    *display: inline;
    zoom: 1;
}


.sensitiveData {
    cursor: pointer;
}

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

/* Audit record Quick View */
.auditDetailPopup {
    background-color: rgb(255, 249, 224);
    border: 1px solid rgb(56,99,173);
}

    .auditDetailPopup .auditDetailHeader {
        display: inline-block;
        background-color: rgb(56,99, 173);
        color: white;
        font-weight: bold;
        text-align: center;
        padding: 2px 0px 2px 0px;
        margin-bottom: 5px;
    }

    .auditDetailPopup .auditEqual {
    }

    .auditDetailPopup .auditNotEqual {
        color: red;
    }

    .auditDetailPopup .oldvalue {
        min-width: 10px;
    }

    .auditDetailPopup .newvalue {
        min-width: 150px;
    }

    .auditDetailPopup .auditDetailBody {
        max-height: 300px;
        min-width: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }

/*.auditDetailPopup tr:hover*/
.auditDetailBody tr:hover {
    background-color: #4473c3;
    color: white;
    /* IE 8+ on Win8 hack */
    zoom: 1;
}


.auditDetailPopup table {
    margin-right: 20px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.auditDetailBody th {
    text-align: left;
}

.auditDetailBody td {
    /* override esfgridview styles */
    border: none !important;
    border-width: 0px;
}

/* This allows items to be 'hidden' at design time */
.masterTable_design .hidden {
    position: absolute;
    left: -1000px;
    top: -1000px;
}

/* This allows for HyperLinkColumns to display as blue always, and can also extend
   to other instances as needed */
a.staticLink {
    color: #507cd1;
}

/* Set all instances of Anchor tag as always blue */
a {
    color: #507cd1;
}

/* Sets disabled link color to gray*/
[disabled='disabled'] {
    color: GrayText !important;
}

TD.wrapText {
    white-space: normal !important;
}

/* This to hide the trace content */
span.tracecontent {
    display: none;
}

/* -------------------
   Master Table
*/
.masterTable {
    width: 100%;
}

.masterTable_design {
    width: 95%;
}

/* -------------------
   Top Header
*/
tr.headerRow {
    background-color: #0D3D9E;
    height: 19px;
}

    tr.headerRow td {
        height: 19px;
    }

.headerContent {
    width: 100%;
    background: #3271a8;
    border-bottom: 1px solid #3271a8;
}

    .headerContent, .headerContent p, .headerContent div, .headerContent table, .headerContent td, .headerContent label, .headerContent input {
        font-size: 14px;
    }

    .headerContent td {
        padding: 5px;
        white-space: nowrap;
        line-height: 14px;
    }

    .headerContent .fundName {
        font-weight: 600;
        font-size: 14px;
        color: White;
        text-decoration: none;
        padding-left: 3px;
    }

        .headerContent .fundName:hover {
            text-decoration: underline;
        }

    .headerContent .lastColumn {
        text-align: right;
        padding-right: 8px;
    }

        .headerContent .lastColumn, .headerContent .lastColumn a {
            font-size: 11px;
            color: White;
        }

            .headerContent .lastColumn, .headerContent .lastColumn .userName {
                font-size: 12px;
                color: White;
            }

.headerBlack a, .headerBlack span, .headerBlack div {
	color: black !important;
}

/* Color Picker Common stuff */

.picker-wrapper, 
.slide-wrapper {
    position: relative;
    float: left;
}
.picker-indicator,
.slide-indicator {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}
.picker,
.slide {
    cursor: crosshair;
    float: left;
}

/* Color Picker Small skin */

.cp-small {
    padding: 5px;
    background-color: white;
    float: left;
    border-radius: 5px;
}
.cp-small .picker {
    width: 100px;
    height: 100px;
}
.cp-small .slide {
    width: 15px;
    height: 100px;
}
.cp-small .slide-wrapper {
    margin-left: 5px;
}
.cp-small .picker-indicator {
    width: 1px;
    height: 1px;
    border: 1px solid black;
    background-color: white;
}
.cp-small .slide-indicator {
    width: 100%;
    height: 2px;
    left: 0px;
    background-color: black;
}

/* -------------------
   Top Menu
*/
.topMenuRow {
    background: #FFECB1 url('TopMenu/img/MenuItemBackground.gif') repeat-x;
    height: 21px;
}

.tabletTopMenuRow {
    background: #FFECB1;
    height: 30px;
}

.firstColumn {
    background: #FFECB1 none;
    padding-right: 10px;
    min-width: 120px;
}

/* -------------------
   Sidebar
*/
td.sideBar
{
	background: #FFEDA1 url('Images/sideBarBlend.gif') repeat-x;
    border-right: 1px solid #EBE15F;
    width: 190px;
    min-width: 190px;
    height: 100%;
    overflow: hidden;
}

    td.sideBar div.sideBarContent {
        padding: 10px 0px 10px 10px;
    }

/* -------------------
   Quick Search
*/
.quickSearchContainer {
    margin-bottom: 3px;
    align-content: center;
}

.quicksearch {
    /*margin: 3px 0 5px 12px;*/
    margin: 3px 0 5px 0px;
}

.quicksearch {
    padding-bottom: 5px;
}

    .quicksearch td {
        padding-top: 0px;
        margin-top: 3px;
    }

        .quicksearch td.label label, .quicksearch td.label input, .quicksearch a {
            font-size: x-small;
            font-weight: normal;
        }

    .quicksearch a {
        color: Blue;
    }

    .quicksearch .label {
        text-align: right;
        padding-right: 4px;
        white-space: nowrap;
    }

    .quicksearch input {
        width: 95px;
        border: 1px solid darkgray;
        font-weight: lighter;
        margin: 0;
    }

    .quicksearch .actionLine td {
        padding-top: 6px;
    }

    .quicksearch .actionLine input {
        width: auto;
    }

table.quicksearch {
    /* webkit bug, chrome doesn't honor this.. yet */
    border-spacing: 2px;
}

/* -------------------
   Site Map
*/
.siteMapContent {
    padding: 10px 3px 0px 0px;
    vertical-align: top;
}

/* -------------------
   Error Panels
*/

.errorContent td {
    white-space: normal !important;
}

.errorPanelErrors, .errorPanelWarnings, .errorPanelInformation {
    padding: 10px 15px 8px 10px;
    font-weight: 600;
}

    .errorPanelErrors ul, .errorPanelWarnings ul, .errorPanelInformation ul {
        margin-left: 25px;
        margin-bottom: 0px;
    }

.errorPanelErrors {
    margin-left: -15px;
    margin-right: -10px;
    background-color: #C62828;
    color: white;
}

.errorPanelWarnings {
    margin-left: -15px;
    margin-right: -10px;
    background-color: #FFEB3B;
    color: #343434;
}

.errorPanelInformation {
    margin-left: -15px;
    margin-right: -10px;
    background-color: #4CAF50;
    color: white;
}

.masterTable_design .errorPanelErrors, .masterTable_design .errorPanelInformation, .masterTable_design .errorPanelWarnings {
    position: absolute;
    left: -1000px;
}

/* -------------------
   Main Content
*/
.mainContent {
    padding: 0px 12px 12px 12px;
}

    .mainContent td {
        white-space: nowrap;
        vertical-align: top;
    }

/* -------------------
   Page Load Timer
*/
.pageLoadTimer {
    color: #584300;
}

.pageLoadPanel {
    background: #686868 none;
    color: white;
    font-size: smaller;
}

/* -------------------
   Footer
*/
#footer {
    padding: 3px 10px 3px 10px;
    background-color: gray;
}

    #footer td {
        color: White;
        font-size: 12px;
    }

        #footer td a {
            color: White;
        }

    #footer .lrsLogo {
        margin: 1px;
    }


/* -------------------
   Message Trace
*/
#esfMessageTrace {
    width: 100%;
    border-collapse: collapse;
}

    #esfMessageTrace th {
        text-align: left;
        padding: 5px;
        background-color: rgb(80, 80, 80);
        color: White;
        border-bottom: 1px solid rgb(100, 100, 100);
    }

    #esfMessageTrace td {
        padding: 2px 12px 2px 12px;
        text-align: left;
        font-size: small;
        border: 1px solid rgb(200, 200, 200);
    }

    #esfMessageTrace div {
        font-size: smaller;
    }

    #esfMessageTrace .messagePage {
        width: 100%;
    }

    #esfMessageTrace .messageName {
        font-weight: bold;
    }

    #esfMessageTrace .columnNames {
        font-weight: bold;
        background-color: rgb(230, 230, 230);
    }

    #esfMessageTrace a {
        color: Blue;
    }

    #esfMessageTrace .noMessages {
        font-style: italic;
        color: rgb(100, 100, 100);
    }
    
/* remove margins for <p> tags in the faqGridView*/
.faqGridView p{
    margin:0;
}    

/* Overlap borders for grids inside styled panels  */
.styledPanelContent .esfGridView, .styledPanelContent .esfGridView-clean {
    margin-left: -1px;
}

.styledPanelContent .esfGridView[style*="width:100%"], .styledPanelContent .esfGridView-clean[style*="width:100%"],
.styledPanelContent .esfGridView[style*="width: 100%"], .styledPanelContent .esfGridView-clean[style*="width: 100%"] {
    width: calc(100% + 2px) !important;
}

/* horizontal grid lines */
.esfGridView td {
    border-left: solid 1px lightgray;
    border-right: solid 1px lightgray;
    border-bottom: 1px solid #F0F0F0;
}

.esfGridView tr:last-child td {
    border-bottom: solid 1px lightgray;
}

.esfGridHeader th {
    padding: 2px 4px 4px 4px;
    white-space: normal;
    border-left: solid 1px ghostwhite;
    border-right: solid 1px ghostwhite;
    border-top: solid 2px #3271a8;
}

    .esfGridHeader th:first-child {
        border-left: solid 1px #3271a8;
    }

    .esfGridHeader th:last-child {
        border-right: solid 1px #3271a8;
    }

.esfGridHeader a {
    color: White !important;
}

.esfGridPager td {
    padding: 0px 0px 1px 0px;
}

.esfGridPagerLink {
    color: White !important;
}

.esfGridPagerPageSummary {
    color: White;
}

.deletePrompt {
    font-weight: bold;
    color: Red;
}

.label {
    font-weight: bold !important;
    text-align: right;
}

.updateProgressDiv {
    border: 2px solid #86BE85;
    background-color: #F3FFF4;
    color: #0F830C;
    font-weight: bold;
    margin: 10px;
    padding: 10px 15px 8px 10px;
}

/*
  GridView style html Table  
*/
.gridViewStyleTable {
    color: #333333;
    border-collapse: collapse;
}

.gridViewStyleHeader {
    color: White;
    background-color: #3863AD;
    font-weight: bold;
}

.gridViewStyleRow {
    color: #333333;
    background-color: #F7F6F3;
    font-weight: bold;
}

/*
  Wizard Style
*/
.wizardSideBarButtonStyle {
    color: #336699;
}

/*
    Service Credit View Tree Styles
*/
.ServiceCreditTreeNode {
    color: Black;
}

.ServiceCreditTreeNodeHover {
    text-decoration: underline;
}

.ServiceCreditTreeNodeSelect {
    color: White;
    background-color: #316AC5;
}

span.TabletErrorPanel .errorPanelErrors, span.TabletErrorPanel .errorPanelWarnings, span.TabletErrorPanel .errorPanelInformation {
    padding: 10px 15px 8px 30px;
    font-weight: bold;
}

.styledPanelSizeToContent {
    display: inline-block;
    background-color: #F7F7F7;
    border: solid 1px #CCDDFF;
}

.headerPadding {
    padding-left: 4px;
    padding-right: 4px;
}

#topMenuRow {
    background: #FFECB1;
    height: 21px;
    min-height: 30px;
    margin-left: -15px;
    margin-right: -10px;
}

    #topMenuRow > div > a {
        display: block;
        float: left;
        margin-left: 10px;
        padding-bottom: 4px;
    }

#layoutHeaderRow {
}

#layoutMasterTable {
    background-color: white;
    margin: 0 auto;
    position: relative;
    display: inline-block;
    min-width: 1024px;
    /*firefox*/
    width: 100%;
}

.masterTable_design .pageTopMenu {
    position: relative;
    height: 20px;
}

.masterTable_design ul li {
    border: 2px solid blue;
    z-index: 500;
    position: absolute;
    left: -1000px;
    top: -1000px;
}


.masterTable_design #topMenuRow {
    overflow: hidden;
}

.masterTable_design #designtimemenu {
    border: 2px solid red;
}

.masterTable_design .systemTopMenu {
    position: relative;
    height: 20px;
}


.main {
    position: relative;
}

#layoutSidebar {
    position: relative;
    width: 180px;
    float: left;
    overflow: hidden;
    margin: 40px 0px 10px 10px;
}


#footerRow {
    position: relative;
    width: 100%;
}

.backgrounds {
    position: absolute;
    /*width:100%;*/
    height: 100%;
}

    .backgrounds .sideBarBackground {
        position: relative;
        float: left;
        height: 100%;
        width: 195px;
        background: rgba(246, 246, 246, 1);
        border-right: 1px solid lightgrey;
    }

#layoutMainContent {
    margin-left: 205px;
    margin-right: 10px;
    padding-bottom: 40px;
}

    #layoutMainContent td {
        vertical-align: top;
        white-space: nowrap;
    }

/* BenefitEstimate.css */
.BenefitEstimateProgress {
    padding: 0px 5px;
    margin: 5px 0px;
}

    .BenefitEstimateProgress, .BenefitEstimateProgress td, .BenefitEstimateProgress p {
        font-size: small;
    }

        .BenefitEstimateProgress p {
            margin: 0px;
            padding: 0;
        }

        .BenefitEstimateProgress table {
            margin-left: 10px;
            margin-top: 2px;
            padding: 0;
        }

        .BenefitEstimateProgress td {
            height: 16px;
        }

        .BenefitEstimateProgress .section {
            font-weight: bold;
            font-size: small;
        }

        .BenefitEstimateProgress .label {
            font-weight: bold;
            text-align: right;
            padding-right: 8px;
            color: rgb(70, 70, 70);
        }

/* BenefitRecalculation.css */
.BenefitRecalcProgress {
    padding: 0px 5px;
    margin: 5px 0px;
}

    .BenefitRecalcProgress, .BenefitRecalcProgress td, .BenefitRecalcProgress p {
        font-size: small;
    }

        .BenefitRecalcProgress p {
            margin: 0px;
            padding: 0;
        }

        .BenefitRecalcProgress table {
            margin-left: 10px;
            margin-top: 2px;
            padding: 0;
        }

        .BenefitRecalcProgress .section {
            font-weight: bold;
            font-size: small;
        }

        .BenefitRecalcProgress .label {
            font-weight: bold;
            text-align: right;
            padding-right: 8px;
            color: rgb(70, 70, 70);
        }

/* Benefit Setup */
.BenefitSetupProgress {
    padding: 0px 5px;
    margin: 5px 0px;
}

    .BenefitSetupProgress, .BenefitSetupProgress td, .BenefitSetupProgress p {
        font-size: small;
    }

        .BenefitSetupProgress p {
            margin: 0px;
            padding: 0;
        }

        .BenefitSetupProgress table {
            margin-left: 10px;
            margin-top: 2px;
            padding: 0;
        }

        .BenefitSetupProgress .section {
            font-weight: bold;
            font-size: small;
        }

        .BenefitSetupProgress .label {
            font-weight: bold;
            text-align: right;
            padding-right: 8px;
            color: rgb(70, 70, 70);
        }

/* BusinessControls.css */
/* -------------------
   Common
*/
.commonArea {
}

.commonAreaSummary {
    min-width: 400px;
}

.commonArea .heading {
    padding-bottom: 2px;
    border-bottom: 1px solid rgb(200, 200, 200);
}

.commonArea .content td {
    padding-top: 5px;
    padding-right: 15px;
}

.commonArea .personName, .commonArea .fundName, .commonArea .employerName {
    font-size: medium;
    font-weight: bold;
}

.commonArea .personSSN {
    font-size: medium;
    color: rgb(120, 120, 120);
}

.activeSummary {
    font-size: small;
}

.commonArea .content .activeSummary td {
    padding-right: 1px;
}

.pictureDiv {
    float: left;
}

    .pictureDiv a:hover {
        cursor: pointer;
    }

    .pictureDiv a img {
        border: 0;
    }

.alignBottom {
    display: table-cell;
    vertical-align: bottom;
    height: 40px;
}

/* -------------------
   CollapsibleSubPanel
*/
.collapsableSubPanelTitle, .collapsableSubPanelTitleOver {
    background-image: url(Images/subPanelTitleBlend.gif);
    border: solid 1px #ebe15f;
    padding: 0px 0px 0px 4px;
    height: 16px;
    color: rgb(88,67,0);
    margin: 0px 0px 0px 0px;
    font-weight: bold;
    text-align: left;
}

.collapsableSubPanelTitleOver {
    cursor: pointer;
    cursor: hand;
}

.collapsableSubPanelImageCollapsed, .collapsableSubPanelImageExpanded {
    margin-right: 4px;
    width: 11px;
    height: 12px;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
}

.collapsableSubPanel {
    padding: 4px 2px 2px 10px;
    margin: 0px 0px 10px 0px;
    display: block;
}

/* -------------------
   Titlebar
*/

span.TitleBar H2 {
    color: #4c4c4c;
    font-size: 20px;
    font-weight: normal;
    margin: 0px;
    padding: 4px 10px 4px 5px;
}

H3.titleBar {
    color: #4c4c4c;
    font-size: small;
    border-bottom: solid 1px #4c4c4c;
    text-indent: 0;
}

.masterTable_design H2.titleBar {
    color: rgb(47, 35, 0);
    font-size: medium;
    margin: 0px 0px 0px 0px;
    width: 100%;
}

/* -------------------
	Menu Data List
*/
.menuDataListItemOver {
    cursor: pointer;
}

/* --------------------
   EsfFormView
*/
.esfformview td {
    white-space: nowrap;
}

    .esfformview td.label {
        font-weight: bold;
        text-align: right;
    }

/*
    EsfDateTimePicker
    Calendar
*/

.PGCalendar .ajax__calendar_container {
    border: 1px solid #646464;
    background-color: white;
    color: black;
}

.PGCalendar .ajax__calendar_body {
    height: 124px;
    width: 155px;
    position: relative;
    overflow: hidden;
    margin: auto;
}

.PGCalendar .ajax__calendar_container {
    padding: 0px;
    cursor: default;
    width: 155px;
    text-align: center;
}

.PGCalendar .ajax__calendar_days {
    top: 0px;
    left: 0px;
    height: 124px;
    width: 100%;
    position: absolute;
    text-align: center;
    margin: auto;
}

.PGCalendar .ajax__calendar_months {
    top: 0px;
    left: 0px;
    height: 124px;
    width: 155px;
    position: absolute;
    text-align: center;
    margin: auto;
}

.PGCalendar .ajax__calendar_years {
    top: 0px;
    left: 0px;
    height: 124px;
    width: 155px;
    position: absolute;
    text-align: center;
    margin: auto;
}

.PGCalendar .ajax__calendar_footer {
    border-top: 1px solid gray;
    height: 19px;
}

.PGCalendar .ajax__calendar_header {
    color: white;
    height: 16px;
    width: 100%;
    background: #0D3D9E url('Images/headerBlend.gif') repeat-x;
}

.PGCalendar .ajax__calendar_day {
    height: 18px;
    width: 18px;
    padding: 0 2px;
    cursor: pointer;
}

.PGCalendar .ajax__calendar_month {
    height: 41px;
    width: 39px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
}

.PGCalendar .ajax__calendar_year {
    height: 41px;
    width: 39px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
}

.PGCalendar .ajax__calendar_dayname {
    text-align: center;
    color: gray;
}

.PGCalendar .ajax__calendar_days {
}

.PGCalendar .ajax__calendar_day {
    text-align: center;
    font-size: small;
}

.PGCalendar .ajax__calendar_month {
}

.PGCalendar .ajax__calendar_year {
}

.PGCalendar .ajax__calendar_active {
    color: white;
    background: #5583D3;
}

.PGCalendar .ajax__calendar_hover {

}

.PGCalendar .ajax__calendar_other {
    color: #C9C9C9;
}

.PGCalendarControlPanel {
    display: inline;
}
/*
    Time Picker
*/

.TimePickerButton {
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
    background-color: White;
    border-top: 1px solid #FFECB1;
}

.TimePickerPopupButton {
    background-image: url('Images/Clock.png');
    background-color: Transparent;
    background-repeat: no-repeat;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    cursor: pointer;
    position: relative;
    height: 5em;
    margin-top: -2.5em;
}

.TimePickerPopupButton {
    top: 0px;
}
/* CSS Hack for older versions of IE */
* + html .TimePickerPopupButton {
    top: 13px;
}

.TimePickerHeader {
    font-weight: 600;
    text-align: center;
    color: white;
    width: 100%;
    background: rgb(83, 146, 202);
    border: 1px solid rgb(83, 146, 202);
    margin-left: -1px;
}

.TimePickerContainer {
    display: inline;
    /*ie 10 can flash the calendar before the js has executed to hide it*/
    position: absolute;
    left: -1000px;
    border: 1px solid #646464;
    background-color: white;
    color: black;
    z-index: 99999;
}

    .TimePickerContainer .hover {
        cursor: default !important;
        background: #FFEAAC;
        color: #0B0800;
    }

/*Extra CSS for Tablets*/

span.TabletTitleBar H2 {
    color: #4c4c4c;
    font-size: medium;
    margin: 0px -12px 0px -12px;
    padding: 4px 0px 4px 48px;
    background-image: url(Images/pageTitleBlend.gif);
    background-repeat: repeat-x;
    border-bottom: solid 1px #ccddff;
    width: inherit;
}
/* side navigation */
.NavTreeNodeRootOver, .NavTreeNodeRootSelect, .QuickSearchLabel, .QuickSearchLabelOver {
    font-size: 90%;
    padding-left: 3px;
    text-decoration: none;
}

.NavTreeNode {
    font-size: 85%;
    padding-left: 6px;
    text-decoration: none;
    padding-right: 6px;
}

.NavTreeNodeRoot {
    font-size: 90%;
    padding-left: 0px;
    text-decoration: none;
}

.NavTreeNodeRoot, .NavTreeNodeRootOver, .NavTreeNodeRootSelect, .QuickSearchLabel, .QuickSearchLabelOver {
    font-weight: bold;
    padding: 0px;
}

.NavTreeNodeRootOver, .NavTreeNodeRootSelect, .QuickSearchLabelOver {
    cursor: pointer;
}

html body table div .TreeNodeQuickSearch {
}

a.NavTreeNode, a.NavTreeNodeOver {
    background-repeat: no-repeat;
    background-position: left center;
    padding-right: 0px;
    color: #343434;
}

.NavTreeNodeOver {
    font-size: 90%;
    cursor: pointer;
    padding-left: 3px;
}

.NavTreeNodeSelect {
    font-size: 90%;
    cursor: pointer;
    margin-left: 3px;
}

.NavTreeNodeDisabled {
    font-size: 90%;
    color: gray;
    padding-left: 3px;
    text-decoration: none;
    cursor: default;
}

/*Styling for tablet fly out left-hand navigation*/

span.TabletSideNav .NavTreeNodeRootOver, span.TabletSideNav .NavTreeNodeRootSelect, span.TabletSideNav .QuickSearchLabel, span.TabletSideNav .QuickSearchLabelOver {
    font-family: Arial;
    font-size: 16px;
    color: black;
    padding-left: 3px;
    text-decoration: none;
    padding-bottom: 14px;
}

span.TabletSideNav .NavTreeNode {
    font-family: Arial;
    font-size: 100%;
    color: black;
    padding-left: 6px;
    text-decoration: none;
    padding-right: 6px;
}

span.TabletSideNav .NavTreeNodeRoot {
    font-family: Arial;
    font-size: 16px;
    color: black;
    padding-left: 0px;
    text-decoration: none;
}

span.TabletSideNav .NavTreeNodeRoot, span.TabletSideNav .NavTreeNodeRootOver, span.TabletSideNav .NavTreeNodeRootSelect, span.TabletSideNav .QuickSearchLabel, span.TabletSideNav .QuickSearchLabelOver {
    font-weight: bold;
    padding: 7px 0px 7px 0px;
}

span.TabletSideNav .NavTreeNodeRootOver, span.TabletSideNav .NavTreeNodeRootSelect, span.TabletSideNav .QuickSearchLabelOver {
    cursor: pointer;
}

span.TabletSideNav .QuickSearchLabelImage {
    background-image: url(WhiteSpace.gif);
    background-repeat: no-repeat;
    background-position: left center;
}

span.TabletSideNav .QuickSearchLabelImageShown {
    background-image: url(WhiteSpace.gif);
    background-repeat: no-repeat;
    background-position: left center;
}

span.TabletSideNav html body table div .NavTreeNodeQuickSearch {
}

span.TabletSideNav a.NavTreeNode, span.TabletSideNav a.NavTreeNodeOver {
    background-repeat: no-repeat;
    background-position: left center;
    padding-right: 0px;
}

span.TabletSideNav .NavTreeNodeOver {
    font-size: 30px;
    color: black;
    cursor: pointer;
    padding-left: 3px;
}

span.TabletSideNav .NavTreeNodeSelect {
    font-size: 30px;
    color: black;
    cursor: pointer;
    margin-left: 3px;
}

span.TabletSideNav .NavTreeNodeDisabled {
    font-size: 90%;
    color: gray;
    padding-left: 3px;
    text-decoration: none;
    cursor: default;
}

/* Top Menu */

/*ASP.Net Menu skin*/
.pageTopMenu {
    /* ie has a problem with the floated LIs wrapping*/
    min-width: 660px;
    display: inline-block;
    float: none !important;
}

table.pageTopMenu {
    height: 21px;
}

.pageTopMenu + div {
    clear: none;
    display: none;
}

/* These are to make the menu appear correctly before javascript kicks in (page loads) */
.pageTopMenu .level1 {
    margin: 0px 10px 0px 10px;
    width: auto;
    position: relative;
}

    .pageTopMenu .level1 > li {
        display: inline-block;
    }

.pageTopMenu .static {
    display: inline-block;
}

.pageTopMenu ul li ul {
    display: none;
}

.pageTopMenu ul li {
    position: relative;
    list-style: none;
}
/* end */

/* including here rather than using Menu.InlineStyleBlock=true because that causes flicker with large menus*/
.pageTopMenu img.icon {
    border-style: none;
    vertical-align: middle;
}

.pageTopMenu img.separator {
    border-style: none;
    display: block;
}

.pageTopMenu img.horizontal-separator {
    border-style: none;
    vertical-align: middle;
}

.pageTopMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

    .pageTopMenu ul.dynamic {
        padding: 0px 0px 0px 0px;
        z-index: 100;
    }

.pageTopMenu a {
    text-decoration: none;
    white-space: nowrap;
    display: block;
}
    /*.pageTopMenu a.static { text-decoration:none;border-style:none;padding-left:12px !important;padding-right:12px !important; }*/
    pageTopMenu a.popout-dynamic {
        background: url(img/menuRight.gif) no-repeat right 6px center !important;
        padding-right: 20px !important;
    }

        .pageTopMenu a.popout-dynamic:hover {
            background-color: #FFEAAC !important;
        }

    .pageTopMenu a.dynamic {
        text-decoration: none;
        border-style: none;
    }

.systemMenu {
    display: inline-block;
    float: right !important;
}
    /* These are to make the menu appear correctly before javascript kicks in (page loads) */
    .systemMenu .static {
        display: inline-block;
    }

    .systemMenu ul li ul {
        display: none;
    }

    .systemMenu ul li {
        position: relative;
        list-style: none;
        display: inline-block;
    }

    .systemMenu .level1 > li {
        display: inline-block;
    }

    .systemMenu a {
        padding-left: 15px;
        padding-right: 15px;
    }

    .systemMenu .static {
        display: inline-block;
    }
    /* end */

    /* including here rather than using Menu.InlineStyleBlock=true because that causes flicker with large menus */
    .systemMenu img.icon {
        border-style: none;
        vertical-align: middle;
    }

    .systemMenu img.separator {
        border-style: none;
        display: block;
    }

    .systemMenu img.horizontal-separator {
        border-style: none;
        vertical-align: middle;
    }

    .systemMenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: auto;
    }

        .systemMenu ul.dynamic {
            padding: 0px 0px 0px 0px;
            z-index: 1;
            margin-left: -2px;
            margin-top: -1px;
        }

    .systemMenu a {
        text-decoration: none;
        white-space: nowrap;
        display: block;
    }

        .systemMenu a.static {
            text-decoration: none;
            border-style: none;
            padding-left: 0.15em;
            padding-right: 0.15em;
        }

        .systemMenu a.popout-dynamic {
            background: url(img/menuRight.gif) no-repeat right 6px center !important;
            padding-right: 20px !important;
        }

            .systemMenu a.popout-dynamic:hover {
                background-color: #FFEAAC !important;
            }

        .systemMenu a.dynamic {
            text-decoration: none;
            border-style: none;
        }

.staticItem {
    cursor: default !important;
    color: #343434;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: left;
    font-size: 16px;
}

.highlighted {
    background-color: #FFEAAC !important;
    color: #0B0800;
}
/* These are for legacy menu mode, AKA Table layout */

.hover {
    cursor: default !important;
    background-color: #FFEAAC !important;
    color: #0B0800 !important;
    /* IE needs this or the color stays changed after hover is done*/
    zoom: 1;
}

a.legacyDynamicItem {
    padding-top: 2px;
    padding-bottom: 2px;
    border: solid 2px red;
    zoom: 1;
    width: 100%;
}

.legacyDynamicItem a:hover {
    color: #0B0800 !important;
}

.legacyDynamicItem a {
    width: 100%;
    display: table;
    zoom: 1;
}

.legacyStaticItem {
    cursor: default !important;
    background-image: url(img/MenuItemBackground.gif);
    color: #584300;
    border-bottom: solid 1px #EBE15F;
    border-left: solid 1px #fff;
    border-right: solid 1px #FFE07F;
    padding-top: 1px;
    padding-bottom: 2px;
    font-size: small;
    font-weight: bold;
    font-family: Verdana;
    zoom: 1;
}

.systemMenu .legacyStaticItem {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

@-moz-document url-prefix() {
    .legacyStaticItem {
        padding-top: 0px;
    }
}

.legacyDynamicItem {
    cursor: default !important;
    border-top: solid 1px white;
    border-left: solid 1px white;
    border-bottom: solid 1px #EBE15F;
    border-right: solid 1px #FED659;
    background-color: #F7F7F7;
    color: #584300;
    font-size: small;
    font-weight: bold;
    font-family: Verdana;
    padding-top: 2px;
    padding-bottom: 2px;
}


/*Extra Tablet CSS*/

.tabletStaticItem {
    cursor: default !important;
    background: #FFEAAC;
    color: #584300;
    border-bottom: solid 1px #EBE15F;
    border-left: solid 1px #fff;
    border-right: solid 1px #FFE07F;
    padding: 7px;
    font-size: small;
    font-weight: bold;
    font-family: Verdana;
    text-align: center;
}

.tabletDynamicItem {
    cursor: default !important;
    border-top: solid 1px white;
    border-left: solid 1px white;
    border-bottom: solid 1px #EBE15F;
    border-right: solid 1px #FED659;
    background-color: #F7F7F7;
    color: #584300;
    font-size: small;
    font-weight: bold;
    font-family: Verdana;
    padding-top: 7px;
    padding-bottom: 7px;
}

.tabletDynamicMenu {
    border-top: solid 2px #FFE699;
    border-left: solid 2px #FFE699;
    border-bottom: solid 2px #FFE699;
    border-right: solid 2px #FFE699;
}

.DynamicItemFont {
    color: #584300;
    font-size: small;
    font-weight: bold;
    font-family: Verdana;
}

.tabletDynamicItem a:hover {
    color: #0B0800;
}

.tabletDynamicItem a {
    padding-top: 7px;
    padding-bottom: 7px;
}

.tabletHover {
    cursor: default !important;
    background: #FFEAAC;
    color: #0B0800;
}
/*Presentation Mode*/

/*Side Navigation background*/
.presentation .backgrounds .sideBarBackground {
    background: lightgrey !important;
}

/*Alternating row background for Activity Feed*/
.presentation .pgActivityFeedItem:nth-child(even) {
    background-color: #e3e3e3 !important;
}

/*Alternating row background for Grid Views*/
.presentation .esfGridView tbody tr:nth-child(even):not(.esfGridPager):not(.esfGridViewExport),
.presentation .esfGridView-clean tbody tr:nth-child(even):not(.esfGridPager):not(.esfGridViewExport) {
    background-color: #e3e3e3 !important;
}

/*Styled Panel background*/
.presentation .styledPanelContent {
    background-color: #e0e0e0 !important;
}

/* 
    Some projectors make the yellow we use appear brown-ish and ugly. Adjust this color to fix. 
    (Changes Warning Message background, Exception (warning) card title background and corrected batch color in working batch picker
*/
.presentation .errorPanelWarnings, .presentation .cardTitleYellow .cardHeader, .presentation .workingBatchDropDownItem .highlightedYellow {
    background-color: #ffeb3b !important;
}

.withholdingDetailTable > tbody {
}

    .withholdingDetailTable > tbody > tr > td:not(:first-child) {
        padding-left: 2em;
    }

    /*https://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr/54772117#54772117*/
    .withholdingDetailTable > tbody tr.preTotalRow {
        -webkit-box-shadow: 0px 1px 0px 0px black;
        -moz-box-shadow: 0px 1px 0px 0px black;
        box-shadow: 0px 1px 0px 0px black;
    }