html {
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

/*hide notes and associations grid columns on 1280px screen*/
@media screen and (max-width: 1280px) {
    .homePageNotesControl {
        display: none !important;
    }

    #personCurrentlytd {
        width: 100% !important;
    }

    .associationsGrid tbody tr th:nth-child(3) {
        display: none;
    }

    .associationsGrid tbody tr td:nth-child(3) {
        display: none;
    }

    .phoneContainer {
        display: none !important;
    }

    .showOnSmallScreen {
        display: initial !important;
    }

    .hideOnSmallScreen {
        display: none;
    }
}

.showOnSmallScreen {
    display: none;
}

#personHomeActivityFeedStyledPanel {
    width: 600px
}

.pgActivityFeed {
    margin: 5px;
    background-color: white;
    border: 1px solid lightgrey;
    height: 285px;
    overflow-y: auto;
    overflow-x: hidden;
    cursor: default;
    width: 588px;
}

.pgActivityFeedItem {
    font-size: 10px;
    min-height: 20px;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #F0F0F0;
    border-left-style: solid;
    border-left-color: transparent;
    border-collapse: collapse;
    position: relative;
}

    .pgActivityFeedItem .row {
        vertical-align: middle;
    }

    .pgActivityFeedItem .column {
        display: inline-block;
    }

.pgActivityFeedItemDate {
    color: #343434;
    font-size: 13px;
    font-weight: 600;
    float: left;
    width: 155px;
    padding: 4px 0px 4px 10px;
}

.pgActivityFeedItemText {
    float: left;
    white-space: normal;
    width: 400px;
    padding: 4px 0px 4px 0px;
}

.pgActivityFeedDetail {
    font-size: 10px;
    min-height: 20px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0px 0px 1px 1px;
    border-color: lightgray;
    border-collapse: collapse;
    padding: 4px 6px 4px 6px;
    margin-left: 100px;
    position: relative;
    margin-bottom: 5px;
}

.forecasted {
    background-image: url('../../Images/green-diagonal-pattern-background.png');
    background-repeat: repeat-y;
}

.legend-Forecasted {
    height: 10px;
    width: 10px;
    background-image: url('../../Images/green-diagonal-pattern-legend.png');
    display: inline-block;
    border: 1px solid lightgrey
}

.pending {
    background-image: url('../../Images/lightyellow-diagonal-pattern-background.png');
    background-repeat: repeat-y;
}

.legend-Pending {
    height: 10px;
    width: 10px;
    background-image: url('../../Images/lightyellow-diagonal-pattern-legend.png');
    display: inline-block;
    border: 1px solid lightgrey
}

.pgActivityFeedLabel {
    color: #343434;
    font-weight: 600;
}

.pgActivityFeedMenu {
    float: right;
    clear: both;
    width: 0px;
    position: absolute;
    background-color: rgb(83, 146, 202);
    color: white;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    z-index: 100;
}

.pgActivityFeedMenuButton {
    width: 75px;
    min-width: 75px;
    max-width: 75px;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
    text-align: center;
    font-style: normal;
    display: inline-block;
    height: 100%;
    margin: 0 auto;
    vertical-align: middle;
}

    .pgActivityFeedMenuButton:hover {
        background-color: #3271a8;
    }

.pgActivityButtonIcon {
    text-align: center;
    margin: 4px auto 0px auto;
}

.pgActivityButtonIconLabel {
    top: 20px;
    display: inline-block;
    position: relative;
    top: -2px;
    color: white;
}

.pgActivityFeedWait {
    text-align: center;
    margin-top: 20px;
}

.milestone {
    background: #CCDDFF; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left,rgba(204,221,255,0),rgba(204,221,255,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(204,221,255,0),rgba(204,221,255,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(204,221,255,0),rgba(204,221,255,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(204,221,255,0), rgba(204,221,255,1)); /*Standard*/
}

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;
}*/

.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;
                }

table.headerContentTestMode,
div.headerContentTestMode {
    background: red !important;
}

/* -------------------
   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;
        position: relative;
        top: 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 a GridView displaying Trumbowyg created content*/
.trumbowygGridView p {
    margin: 0;
}

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

.styledPanelContent > div {
    width: auto !important;
}

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

.styledPanel .esfGridView-clean[style*="width:100%"],
.styledPanel .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;
    }

.backgrounds .mainContentBackground {
    /*
	float:left;
	position:relative;
	margin-left: 195px;
	width:500px;
	height:100%;*/
}

/*
    Panel GroupingText
*/
.Panel legend {
    font-weight: 600;
}

.PanelBorder fieldset {
    border-color: black;
    border-width: 1px;
}

/* 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 {
}

.personAlert {
    padding: 8px 10px 0px 5px !important;
    border-left: 10px solid red;
}

.personCommonHeader {
    background-color: #3271a8;
    color: #ffffff;
    margin: -17px -10px 0px -10px;
    padding: 8px 10px 0px 15px;
    position: relative;
}

    .personCommonHeader .rightJustified {
        display: table-cell;
        width: 100%;
        text-align: right;
    }

    .personCommonHeader .pictureContainer {
        display: table-cell;
        padding-right: 5px;
        padding-bottom: 5px;
        vertical-align: top;
        padding-top: 1.5px;
    }

    .personCommonHeader .nameSSNContainer {
        display: table-cell;
        padding-right: 30px;
        vertical-align: top;
        padding-bottom: 10px;
    }

    .personCommonHeader .statusContainer {
        display: table-cell;
        vertical-align: top;
        padding-bottom: 5px;
        padding-right: 30px;
    }

        .personCommonHeader .statusContainer span {
            color: #ffffff !important;
        }

    .personCommonHeader .addressContainer {
        display: table-cell;
        vertical-align: top;
        padding-bottom: 10px;
        padding-right: 30px;
    }

        .personCommonHeader .addressContainer span {
            color: #ffffff !important;
        }

    .personCommonHeader .phoneContainer {
        display: table-cell;
        vertical-align: top;
        padding-bottom: 5px;
    }

        .personCommonHeader .phoneContainer a {
            color: #ffffff !important;
        }

    .personCommonHeader .buttonContainer {
        vertical-align: top;
        margin-right: 7px;
        position: absolute;
        right: 0px;
    }

    .personCommonHeader .menuButton {
        /*margin-top: -8px;*/
        padding: 5px 10px 0px 10px;
        display: inline-block;
    }

    .personCommonHeader .menuSeparator {
        background-color: #567DC0;
        width: 1px;
        height: 30px;
        display: inline-block;
        margin-right: -4px;
        margin-left: -4px;
    }

    .personCommonHeader .toggleMenuButtonsLinkButton {
        vertical-align: top;
        margin-right: 7px;
        position: absolute;
        right: 0px;
        background-color: rgba(44, 93, 178, 1);
    }

    .personCommonHeader .benefitSelector {
        display: inline-flex;
        vertical-align: top;
        padding: 5px 5px 0px 10px;
        max-width: 300px;
    }

        .personCommonHeader .benefitSelector a {
            color: white !important;
            text-decoration: none;
        }

    .personCommonHeader .activeButton {
        background: -webkit-linear-gradient(#3271a8, rgba(246, 246, 246, 1)); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#3271a8, rgba(246, 246, 246, 1)); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#3271a8, rgba(246, 246, 246, 1)); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#3271a8, rgba(246, 246, 246, 1)); /* Standard syntax */
    }

.commonArea-demograhic-link {
    text-decoration: none;
}

    .commonArea-demograhic-link:hover {
        color: white;
        text-decoration: underline;
    }

.personRolesLinkButton {
    text-decoration: none;
    color: white;
}

    .personRolesLinkButton:hover {
        border-bottom: 1px solid white;
    }

.popupSubHeader {
    color: #343434;
    font-weight: bold;
    padding: 3px 8px 0px 8px;
    display: none;
}

.attached-to-menu {
    border-top: none !important;
    border-top-right-radius: 0px !important;
    -webkit-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
}

    .attached-to-menu .ui-dialog-titlebar {
        display: none;
    }

    .attached-to-menu .popupSubHeader {
        display: block;
    }

    .attached-to-menu .gidview-in-popup {
        padding: 0px 5px 0px 5px;
    }

    .attached-to-menu .currentlyPopupBody, .attached-to-menu .acctSummaryPopupBody {
        padding: 0px 5px 5px 5px;
    }

.detached-from-menu {
    -webkit-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
}

.display-behind-header {
    z-index: 98 !important;
}

.currentlyPopupLabel {
    width: 40%;
}

.currentlyPopupBody, .acctSummaryPopupBody {
    padding: 8px 5px 5px 5px;
}


#iconsPanel {
    padding-top: 5px;
    height: 20px;
    border-bottom: 1px solid rgb(200, 200, 200);
    background-color: #ffffff;
    margin-left: -15px;
    padding-left: 15px;
    border-top-right-radius: 10px;
    display: table-cell;
}

.actionIcons {
    float: left;
    padding-top: 5px;
    padding-left: 5px;
}

.infoIcons {
    float: left;
    padding-top: 5px;
    padding-right: 3px;
}

.benefitPickerRoundedCorner {
    float: right;
    z-index: 99;
    position: relative;
    background-image: radial-gradient(circle at 0px 100%, rgba(0, 0, 0, 0) 14px, rgb(50, 113, 168) 15px);
    height: 15px;
    width: 15px;
    margin-right: -.5px;
    margin-top: -.5px;
}

.benefitPicker {
    float: right;
    background-color: #3271a8;
    color: #ffffff;
    height: 100%;
    margin-right: -10px;
    padding: 3px 10px 8px 20px;
    text-align: right;
    z-index: 99;
    position: relative;
    border-bottom-left-radius: 15px;
    margin-top: -1px;
}

    .benefitPicker a {
        color: white !important;
        text-decoration: none;
    }

.selectedAssociationBorder td {
    background-color: #CCDDFF;
}

.rolesPanel {
    border-bottom: 2px solid rgba(56, 99, 172, 1);
}

.topInnerShadow {
    height: 4px;
    margin: -4px -4px 0px -4px;
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(105,105,105,.7),rgba(105,105,105,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(105,105,105,.7),rgba(105,105,105,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(105,105,105,.7),rgba(105,105,105,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(105,105,105,.7),rgba(105,105,105,0)); /* Standard syntax */
}

.roleCard {
    display: inline-block;
    border: 1px solid #3863AD;
    background-color: white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 10px 5px 0px 5px;
    width: 250px;
    font-size: 11px;
}

    .roleCard .header {
        background-color: rgb(83, 146, 202);
        color: white !important;
        padding: 5px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        margin-top: -1px;
    }

        .roleCard .header span {
            color: white !important;
            cursor: default;
        }

        .roleCard .header a {
            color: white !important;
            cursor: pointer !important;
        }

            .roleCard .header a span {
                color: white !important;
                cursor: pointer !important;
            }

    .roleCard div {
        font-size: 11px;
        color: #343434;
    }

.roleCardContent {
    padding: 0px 5px 5px 5px;
}

.roleDetailTable {
    display: table;
}

    .roleDetailTable .roleDetailRow {
        display: table-row;
    }

        .roleDetailTable .roleDetailRow .roleLabel {
            font-weight: bold;
            display: table-cell;
            vertical-align: top;
            padding-top: 5px;
        }

        .roleDetailTable .roleDetailRow .roleDetail {
            vertical-align: top;
            padding-top: 5px;
            margin-left: 5px;
        }

.personRoleDetail {
    color: black;
    background-color: #FFFFFF;
    height: 25px;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #F0F0F0;
    padding: 5px 5px 0px 5px;
    position: relative;
}

.alternateRow {
    background-color: #F0F0F0;
}

#userFlagPanel {
    display: none;
    max-width: 600px;
    min-width: 350px;
    position: absolute;
    z-index: 100;
}

#notesComonAreaPanel {
    left: -1000px;
    max-width: 600px;
    min-width: 350px;
    position: absolute;
    z-index: 100;
}

#contactLogComonAreaPanel {
    display: none;
    min-width: 200px;
    position: absolute;
    z-index: 100;
}

#lockAccountPanel {
    display: none;
    min-width: 200px;
    position: absolute;
    z-index: 100;
}

#personRolesPanel {
    display: none;
    max-width: 800px;
    min-width: 350px;
    position: fixed;
    z-index: 100;
}

.popup-content {
    border: 1px solid #CCDDFF;
    background-color: #F7F7F7;
    padding: 0px 8px 8px 8px;
    -webkit-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
}

.popup-triangle {
    position: absolute;
    top: -10px;
    left: 20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #CCDDFF;
}

.popup-inner-triangle {
    position: absolute;
    top: -9px;
    left: 20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #F7F7F7;
}

.userFlagLink {
    text-decoration: none;
    color: black;
    vertical-align: 1px;
}

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

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

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

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

.personCommonHeader .personSSN {
    font-size: medium;
    color: #ffffff;
}

.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;
    }

.esfDisplayTable td {
    padding: 2px;
}

/*
    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: #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;
}

/* Used for popup panels that are not full windows/tabs */
.modalBackground {
    background-color: gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.modalPopup {
    background-color: #FFFFFF;
    border-width: 3px;
    border-style: solid;
    border-color: gray;
    padding: 3px;
    width: 250px;
}

.tooltipPopup {
    background-color: #FFFFFF;
    padding: 7px;
    border: 2px solid gray;
    text-align: left;
    font-size: 11px;
    color: darkslategray;
}

.highlightedYellow {
    background: #FFEAAC !important;
    color: #0B0800;
}

.highlightedGreen {
    background: #b7ffac !important;
    color: #0B0800;
}

.highlightedRed {
    background: #ffacac !important;
    color: #0B0800;
}

.greyedOut {
    background-color: #d3d3d3 !important;
    color: #0B0800;
}

/* Contact Log Screens*/
.reasonsTabContainer {
    position: relative;
    top: 1px;
    display: inline-block;
}

.reasonTab {
    display: inline-block;
    height: 20px;
    color: white;
    background-color: #3271A8;
    border: 1px solid #aaa;
    width: 80px;
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
    border-top-right-radius: 8px;
    margin-right: -2px;
}

    .reasonTab.activeReasonTab {
        background-color: white;
        color: #333;
        border-bottom: 1px white solid;
    }

.reasonsContainer {
    height: 85px;
    border: 1px solid #aaa;
    background-color: white;
    overflow: auto;
    white-space: normal;
}

/* Floating Circles Loading Image */
.floatingCircles {
    position: relative;
    width: 125px;
    height: 125px;
    margin: auto;
    transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
}

.f_circleG {
    position: absolute;
    background-color: rgba(255,255,255,0);
    height: 22px;
    width: 22px;
    border-radius: 12px;
    -o-border-radius: 12px;
    -ms-border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    animation-name: f_fadeG;
    -o-animation-name: f_fadeG;
    -ms-animation-name: f_fadeG;
    -webkit-animation-name: f_fadeG;
    -moz-animation-name: f_fadeG;
    animation-duration: 1.2s;
    -o-animation-duration: 1.2s;
    -ms-animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;
    -moz-animation-duration: 1.2s;
    animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-direction: normal;
    -o-animation-direction: normal;
    -ms-animation-direction: normal;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
}

#frotateG_01 {
    left: 0;
    top: 51px;
    animation-delay: 0.45s;
    -o-animation-delay: 0.45s;
    -ms-animation-delay: 0.45s;
    -webkit-animation-delay: 0.45s;
    -moz-animation-delay: 0.45s;
}

#frotateG_02 {
    left: 15px;
    top: 15px;
    animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}

#frotateG_03 {
    left: 51px;
    top: 0;
    animation-delay: 0.75s;
    -o-animation-delay: 0.75s;
    -ms-animation-delay: 0.75s;
    -webkit-animation-delay: 0.75s;
    -moz-animation-delay: 0.75s;
}

#frotateG_04 {
    right: 15px;
    top: 15px;
    animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
}

#frotateG_05 {
    right: 0;
    top: 51px;
    animation-delay: 1.05s;
    -o-animation-delay: 1.05s;
    -ms-animation-delay: 1.05s;
    -webkit-animation-delay: 1.05s;
    -moz-animation-delay: 1.05s;
}

#frotateG_06 {
    right: 15px;
    bottom: 15px;
    animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    -ms-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
}

#frotateG_07 {
    left: 51px;
    bottom: 0;
    animation-delay: 1.35s;
    -o-animation-delay: 1.35s;
    -ms-animation-delay: 1.35s;
    -webkit-animation-delay: 1.35s;
    -moz-animation-delay: 1.35s;
}

#frotateG_08 {
    left: 15px;
    bottom: 15px;
    animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.floatingCircles-small {
    position: relative;
    width: 42px;
    height: 42px;
    margin: auto;
    transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
}

.f_circleG-small {
    position: absolute;
    background-color: rgba(255,255,255,0);
    height: 7px;
    width: 7px;
    border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    animation-name: f_fadeG;
    -o-animation-name: f_fadeG;
    -ms-animation-name: f_fadeG;
    -webkit-animation-name: f_fadeG;
    -moz-animation-name: f_fadeG;
    animation-duration: 1.2s;
    -o-animation-duration: 1.2s;
    -ms-animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;
    -moz-animation-duration: 1.2s;
    animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-direction: normal;
    -o-animation-direction: normal;
    -ms-animation-direction: normal;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
}

#frotateG_01-small {
    left: 0;
    top: 17px;
    animation-delay: 0.45s;
    -o-animation-delay: 0.45s;
    -ms-animation-delay: 0.45s;
    -webkit-animation-delay: 0.45s;
    -moz-animation-delay: 0.45s;
}

#frotateG_02-small {
    left: 5px;
    top: 5px;
    animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}

#frotateG_03-small {
    left: 17px;
    top: 0;
    animation-delay: 0.75s;
    -o-animation-delay: 0.75s;
    -ms-animation-delay: 0.75s;
    -webkit-animation-delay: 0.75s;
    -moz-animation-delay: 0.75s;
}

#frotateG_04-small {
    right: 5px;
    top: 5px;
    animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
}

#frotateG_05-small {
    right: 0;
    top: 17px;
    animation-delay: 1.05s;
    -o-animation-delay: 1.05s;
    -ms-animation-delay: 1.05s;
    -webkit-animation-delay: 1.05s;
    -moz-animation-delay: 1.05s;
}

#frotateG_06-small {
    right: 5px;
    bottom: 5px;
    animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    -ms-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
}

#frotateG_07-small {
    left: 17px;
    bottom: 0;
    animation-delay: 1.35s;
    -o-animation-delay: 1.35s;
    -ms-animation-delay: 1.35s;
    -webkit-animation-delay: 1.35s;
    -moz-animation-delay: 1.35s;
}

#frotateG_08-small {
    left: 5px;
    bottom: 5px;
    animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

@keyframes f_fadeG {
    0% {
        background-color: #274578;
    }

    100% {
        background-color: rgba(255,255,255,0);
    }
}

@-o-keyframes f_fadeG {
    0% {
        background-color: #274578;
    }

    100% {
        background-color: rgba(255,255,255,0);
    }
}

@-ms-keyframes f_fadeG {
    0% {
        background-color: #274578;
    }

    100% {
        background-color: rgba(255,255,255,0);
    }
}

@-webkit-keyframes f_fadeG {
    0% {
        background-color: #274578;
    }

    100% {
        background-color: rgba(255,255,255,0);
    }
}

@-moz-keyframes f_fadeG {
    0% {
        background-color: #274578;
    }

    100% {
        background-color: rgba(255,255,255,0);
    }
}

.userHomeRow {
    display: flex;
}

.userHomeColumn {
    flex-grow: 1;
    width: 50%;
    padding: 5px;
}

.dashPanel {
    border: 1px solid #7391c5;
    background-color: white;
    padding: 8px;
    border-radius: 5px;
    -webkit-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    box-shadow: -1px 3px 5px 0px rgba(50,50,50,0.4);
    vertical-align: top;
    text-align: left;
}

.dashPanel-header {
    display: table;
    width: 100%;
}

.dashPanel-title {
    font-size: 18px !important;
    font-weight: bold;
    padding-right: 10px;
    display: table-cell;
    white-space: nowrap;
}

.dashPanel-headerContent {
    display: table-cell;
    width: 100%;
}

.clickableDashPanel:hover {
    cursor: pointer;
    border: 1px solid #90c4ee;
}

.clickableDashPanel:active {
    border: 1px solid rgb(102,175,233);
    -webkit-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.90);
    -moz-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.90);
    box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.90);
}

.dashPanel[disabled='disabled'] {
    background-color: lightgrey;
    box-shadow: none !important;
    opacity: .5;
    cursor: default;
    border: 1px solid #7391c5;
}

.userHomePanel-content {
    display: table-row;
}

.userHomePanel-gridContainer {
    padding-top: 15px;
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

.userHomePanel-chartContainer {
    padding-top: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
}

.userHomePanel-headerLink {
    margin-right: 5px;
    padding: 3px;
}

.userHomePanel-dateColumn {
    font-size: 0px !important;
    padding-right: 10px;
}

.userHomePanel-date {
    color: #343434;
    font-size: 13px !important;
    font-weight: 600;
}

.userHomePanel-expandButton {
    text-decoration: none;
    color: #343434;
    float: right;
    font-weight: bold;
}

.expandableContent {
    border: 1px solid white;
    height: 120px;
    overflow-y: auto;
    margin-bottom: 5px;
    width: 100%;
    overflow-x: hidden;
}

.esfGridView-clean tbody tr {
    border-bottom: 1px solid #F0F0F0;
}

.slideOutMenuColumn {
    position: relative;
    width: 0px;
    padding: 0px;
}

.slideOutMenu {
    position: absolute;
    right: 0px;
    top: 0px;
    display: none;
    background-color: rgb(83, 146, 202);
}

    .slideOutMenu a {
        text-decoration: none;
    }

.slideOutMenuButton {
    min-width: 75px;
    text-align: center;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    color: white !important;
    cursor: pointer;
    position: relative;
}

    .slideOutMenuButton:hover {
        background-color: #3271a8;
    }

.slideOutMenuButtonContent {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 10px;
    padding-right: 10px;
}

.slideOutMenuButtonIcon {
    vertical-align: -3px;
}

.hidden {
    display: none;
}

.hoverUnderline {
    text-decoration: none;
}

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

.showAllNotificationsLinkButton {
    position: absolute;
    top: 59px;
    text-decoration: none;
    font-weight: bold;
    color: #333333;
    font-size: 16px;
    display: none;
}

.showAllAssignedWorkLinkButton {
    position: absolute;
    top: 59px;
    text-decoration: none;
    font-weight: bold;
    color: #333333;
    font-size: 16px;
    display: none;
}

.showAllAvailableWorkLinkButton {
    position: absolute;
    top: 59px;
    text-decoration: none;
    font-weight: bold;
    color: #333333;
    font-size: 16px;
    display: none;
}

.reportListContainer {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 13px;
    border: 1px solid lightgrey;
}

.pastDaysDropDown-small {
    font-size: 14px;
    font-weight: bold;
    padding-right: 10px;
    float: right;
    margin-top: -2px;
}

.calendar {
    /*border: solid 1px #3863AD;*/
}

.calendarTitle {
    padding: 3px 0px 3px 5px;
    font-weight: bold;
    background: rgb(83, 146, 202);
    color: #F7F7F7;
    border: 1px solid rgb(83, 146, 202);
}

    .calendarTitle a {
        color: #F7F7F7;
        text-decoration: none;
    }

.calendarDayHeader {
    background: #3271a8;
    color: #F7F7F7;
    border: 1px solid #3271a8;
}

.appointment {
    text-align: right;
    height: 60px;
    overflow: hidden;
}

a.AppointmentLink, a.availableAppointmentLink {
    cursor: pointer;
    text-decoration: none;
}

    a.AppointmentLink:hover, a.availableAppointmentLink:hover {
        text-decoration: underline;
    }

a.availableAppointmentLink {
    color: green;
}

a.AppointmentLink {
    color: black;
}

div.popOver {
    z-index: 100;
    background: white;
    text-align: left;
    padding: 2px;
    border: 2px solid;
    border-radius: 4px;
}

.otherMonth {
    background-color: #D3D3D3;
}

    .otherMonth a {
        text-decoration: none;
        color: #696969;
    }

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

#pageHeader-fundPanel {
    display: none;
    min-width: 350px;
    position: absolute;
    z-index: 101;
}

#pageHeader-workPanel {
    display: none;
    min-width: 350px;
    position: absolute;
    z-index: 101;
}

.employerCurrentlyHomeContainer {
    width: 816px;
    min-width: 816px;
}

@media screen and (max-width: 1280px) {
    .employerCurrentlyHomeContainer {
        width: 553px;
        min-width: 553px;
    }
}

.reportingHubPanelTitle {
    color: #002355;
    font-weight: bold;
    text-align: center;
    font-size: 13px !important;
}

.clickableRow:hover {
    background-color: #CCDDFF !important;
}

.workingBatchHolder {
    display: none;
    position: absolute;
    margin: -8px 0px 0px 10px;
}

.workingBatchDropDownSelect, .selectWorkingBatchButton {
    border: 1px solid #7391c5;
    border-radius: 4px;
    padding: 7px;
    cursor: pointer;
    background: white;
}

    .workingBatchDropDownSelect:hover, .workingBatchDropDownSelect-clicked, .selectWorkingBatchButton:hover {
        border: 1px solid #CDF;
    }

.workingBatchDropDownSelect-commonarea {
    border-radius: 2px;
    padding: 5px 10px 6px 10px;
    margin: 1px -10px 0px 0px;
    cursor: pointer;
    border-left: 1px solid #CDF;
}

.workingBatchDropDownSelect-disabled {
    opacity: .5;
    cursor: default;
}

.workingBatchDropDown {
    border: 1px solid #CDF;
    overflow: hidden;
    display: none;
    position: absolute;
    background: white;
    z-index: 1;
    padding-bottom: 10px;
    -webkit-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: -1px 3px 5px 0px rgba(50, 50, 50, 0.4);
    box-shadow: -1px 3px 5px 0px rgba(50,50,50,0.4);
}

.workingBatchDropDownItem {
    padding-left: 15px;
    padding-right: 15px;
    margin: 3px -1px 3px -1px;
    color: black;
}

    .workingBatchDropDownItem .highlightedRed {
        background-color: #C62828 !important;
        color: white;
    }

    .workingBatchDropDownItem .highlightedYellow {
        background-color: #FFEB3B !important;
        color: #343434;
    }

    .workingBatchDropDownItem .highlightedGreen {
        background-color: #4CAF50 !important;
        color: white;
    }

    .workingBatchDropDownItem:hover, .workingBatchLink:focus .workingBatchDropDownItem {
        background: lightgrey; /*#F7F7F7;*/
        border-top: 1px solid #CDF;
        border-bottom: 1px solid #CDF;
    }

.workingBatchesEmployerLabel {
    font-weight: bold;
    padding: 5px 0px 0px 10px;
    display: block;
    cursor: default;
}

    .workingBatchesEmployerLabel:first-of-type {
        padding: 0px 0px 0px 10px;
    }

.batchLabel {
    padding: 5px 5px 5px 5px;
    display: block;
}

.workingBatchDropDownItem:hover .batchLabel,
.workingBatchLink:focus .workingBatchDropDownItem .batchLabel {
    padding: 4px 5px 4px 5px;
    display: block;
}

.viewTypeOption {
    padding: 5px 20px 5px 10px;
    color: black;
    white-space: nowrap;
}

    .viewTypeOption:hover, .employerLinkButton:focus .viewTypeOption {
        background: lightgrey;
    }

.viewTypeLink[disabled='disabled'] .viewTypeOption {
    color: GrayText;
    cursor: default;
}

.left-triangle {
    position: absolute;
    left: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #7391c5;
}

.left-inner-triangle {
    position: absolute;
    left: -9px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid white;
}

.selectedWizardCard, .selectedWizardCard:hover {
    border: 2px solid #90c4ee;
    margin: -1px;
}

    .selectedWizardCard:hover[disabled='disabled'] {
    }

.esfWizardNavigation-StyledButtons input {
    border: 1px solid #CDF;
    background: white;
    border-radius: 2px;
    padding: .4em 1em;
    cursor: pointer;
    -webkit-box-shadow: -1px 2px 5px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: -1px 2px 5px 0px rgba(50, 50, 50, 0.4);
    box-shadow: -1px 2px 5px 0px rgba(50,50,50,0.4);
    float: none !important;
}

    .esfWizardNavigation-StyledButtons input:hover {
        border: 1px solid #7391c5;
    }

    .esfWizardNavigation-StyledButtons input:active {
        -webkit-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.90);
        -moz-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.90);
        box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.90);
    }

.transmittalDetailPanel {
    position: relative;
    vertical-align: top;
    margin: 0px 8px 15px 0px;
}

    .transmittalDetailPanel .innerContentHolder {
        border: 1px solid #d6d6d6;
        overflow: hidden;
        padding: 15px 14px 10px 10px;
        min-width: 158px;
    }

.transmittalDetailPanel-header {
    font-weight: bold;
    color: rgba(44, 93, 177, 1);
    position: absolute;
    top: -8px;
    left: 5px;
    background-color: white;
    padding: 0px 7px 0px 7px;
}

.transmittalDetailPanel-headerImage {
    position: absolute;
    top: -8px;
    right: 5px;
    background-color: white;
    padding: 0px 7px 0px 7px;
}

.table-font-11px td {
    font-size: 11px;
}

.cardTitleRed .cardHeader {
    background-color: #C62828;
    margin: -5px;
    padding: 5px;
}

.cardTitleRed .cardTitle {
    color: white !important;
}

.cardTitleYellow .cardHeader {
    background-color: #FFEB3B;
    margin: -5px;
    padding: 5px;
}

.cardTitleYellow .cardTitle {
    color: #343434 !important;
}

.cardTitleGreen .cardHeader {
    background-color: #4CAF50;
    margin: -5px;
    padding: 5px;
}

.cardTitleGreen .cardTitle {
    color: white !important;
}

.carouselIndicator {
    border-radius: 50%;
    height: 14px;
    width: 14px;
    background: lightgray;
    margin-left: 42%;
    margin-top: 2px;
}

    .carouselIndicator.active {
        background: gray;
    }

/*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;
    }