﻿body {
    cursor: inherit;
}

    /*
    z-index Documentation

.psdvToolbox            z-index: 1;
.psCombo                z-index: 2;
.zIndexDlgAbsPos        z-index: 3;     Button or other element that is postion:absolute on a dialog or page 
cellFlyout              z-index: 99;
.ApplicationPane        z-index: 999; DT 2020-07-22 to show above rich text editor
#psHeaderRibbon         z-index: 1000;
.ContextMenuMain        z-index: 1000;
div#tipDiv              z-index: 1100;
div#popupEditDiv        z-index: 1200;
.ui-widget-overlay      z-index:2001;
.ui-dialog              z-index:2002;
.ui-datepicker          z-index:2002;
.ui-datepicker-trigger  z-index:2002;
#psTooltip              z-index: 2002;
#ProgressSpinner        z-index: 2010; BD 2019-10-03 was 1999 but not visible when showProgress() done with Dialog visible
        
*/

    body.wait {
        cursor: wait;
    }

.zIndexDlgAbsPos {
    /* 
        This class name should be "dialog+1" but the dialogs don't seem to be using .ui-dialog so not sure what to name it.
        we have absolutely positioned buttons on the Operator dialog that need to be above the dialog fields 
        the table in the dialog is overlapping the top of the New button and so the bottom 1/2 of the button
        cannot be clicked on.
    */
    z-index: 3;
}

/*
    Created in MasterPageHeaded only if running Debugger Locally
*/
div#psDebugBar {
    height: 16px;
    background-color: White;
    border: 1px solid gray;
    padding: 4px 5px;
}

    div#psDebugBar input {
        height: 15px;
        margin-right: 5px;
    }

    div#psDebugBar button {
        min-height: 0;
        margin-top: 0px;
        margin-right: 5px;
        margin-bottom: 0;
        margin-left: 0;
        height: 18px;
        padding: 0 4px 2px 4px;
        background-color: Green;
        color: White;
        box-shadow: 2px 2px 2px #cccccc;
    }

        div#psDebugBar button.HasTasks {
            font-weight: bold;
            color: yellow;
        }

td, th {
    padding: 2px;
}

.topalign {
    vertical-align: top;
}

.watermark {
    color: #999;
    font-style: italic;
}

ul li {
    margin-bottom: 3px; /* BD 2016-02-16 */
}

ul.Loose li, ol.Loose li {
    line-height: 150%;
}

h1 + ul, h2 + ul, h3 + ul {
    margin-top: 0;
}

span.MouseTip, label.MouseTip {
    border-bottom: 1px dotted green;
    cursor: help;
}

.noSelect {
    /* from http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently                                   supported by Chrome and Opera */
}

/*
** Table / View Related
**
*/
table.TopAlign td {
    vertical-align: top;
}

table.BasicTable {
    border: 1px solid black;
    padding: 3px;
    background-color: white;
}

    table.BasicTable td {
        padding: 3px;
    }

        table.BasicTable td:nth-child(1) {
            text-align: right;
        }

    table.BasicTable tr:nth-child(even) {
        background-color: #e0e0e0;
    }

    table.BasicTable caption {
        font-weight: bold;
        text-decoration: underline;
    }

table.LayoutOnly {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0px;
    margin: 0px;
}

    table.LayoutOnly > tbody > tr > td {
        padding: 0px;
        margin: 0px;
        text-align: left;
        vertical-align: top;
    }

    table.LayoutOnly.LabelField td {
        padding: 3px;
    }

        table.LayoutOnly.LabelField td:nth-child(1) {
            text-align: right;
        }

.TableHeadingBold {
    font-weight: bold;
    text-align: left;
    vertical-align: bottom;
}

.TableHeadingBoldRight {
    font-weight: bold;
    text-align: right;
    vertical-align: bottom;
}

.TableHeadingBoldCenter {
    font-weight: bold;
    text-align: center;
    vertical-align: bottom;
}

.TableHeadingBoldUnderline {
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
    vertical-align: bottom;
}

.TableHeadingBoldUnderlineBorderRight {
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
    vertical-align: bottom;
    border-right: 1px solid black;
}

.TableHeadingBoldUnderlineRight {
    font-weight: bold;
    text-decoration: underline;
    text-align: right;
    vertical-align: bottom;
}

.TableHeadingBoldUnderlineCenter {
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
    vertical-align: bottom;
}

table.LayoutOnly.SectionOptions td {
    padding: 4px;
}

H1 div.viewSelector {
    display: inline;
}

H1 .viewSelector img {
    margin-top: -2px;
    display: none;
    padding-left: 4px;
}

H1:hover .viewSelector img {
    margin-top: -2px;
    display: inline;
    padding-left: 4px;
}

.ui-dialog-title {
    height: 18px;
    line-height: 18px;
    padding-left: 5%; /* the jQuery UI width is 90% so without this 5%, the caption looks off-center on wide dialogs */
}

.ui-dialog-titlebar-close {
    min-height: 16px;
}

/* Header Styles */
.HeaderMain {
    background-color: #990000;
    border-bottom: 1px solid #990000;
}

.HeaderNavBar {
    background-color: #c0c0c0;
    color: #990000;
}

.HeaderTitle {
    color: #FFFFFF;
    font-weight: bold;
}

.PageHeading {
    font-weight: bold;
}

.HeaderSearchTitle {
    color: #FFFFFF;
}

.NavBarText {
    color: #990000;
}

button[disabled], input[type=file][disabled], div.DragDrop.Disabled {
    cursor: not-allowed;
    pointer-events: none;
}

a[disabled], a[disabled], a[disabled]:link, a[disabled]:visited, a[disabled]:hover {
    color: var(--psColorSchemeWCAG-ColorDark,gray); /* overrides StandardClasses */
    cursor: not-allowed;
    pointer-events: none;
}

    a[disabled] img {
        opacity: 0.4;
        filter: alpha(opacity=40); /* For IE8 and earlier */
    }

a.HeaderLink:link {
    text-decoration: none;
    color: #FFFFFF;
}

a.HeaderLink:visited {
    text-decoration: none;
    color: #FFFFFF;
}

a.HeaderLink:active {
    text-decoration: none;
    color: #FFFFFF;
}

a.HeaderLink:hover {
    text-decoration: underline;
    color: #FFFFFF;
}

a.NavBarLink:link {
    text-decoration: none;
    color: #990000;
}

a.NavBarLink:visited {
    text-decoration: none;
    color: #990000;
}

a.NavBarLink:active {
    text-decoration: none;
    color: #990000;
}

a.NavBarLink:hover {
    text-decoration: underline;
    color: #990000;
}

/* Section Styles */

.SectionBlockWrapper {
    position: relative; /* allow for absolute position items on right side */
    vertical-align: top;
}

.SectionBlock {
    background-color: inherit; /* width: 615px; BD 2017-08-27 */
    margin: 10px 0 15px 0px;
}

    .SectionBlock.PageInstructions {
        width: 700px; /*      border: 1px solid grey; */
    }

        .SectionBlock.PageInstructions .Section .SectionContent .SubSection table.PageOptions tbody tr td:not(:last-child) {
            padding-bottom: 3px;
        }

        .SectionBlock.PageInstructions .Section .SectionContent .SubSection table.PageOptions tbody tr td:first-child {
            text-align: right;
            align-content: start;
            padding: 4px 5px 0 5px;
            user-select: none;
        }

    .SectionBlock .SectionHeader {
        margin-top: 0;
    }

.Section {
    margin-bottom: 0px;
}

.SectionHeader {
    /* Position */
    position: relative;
    height: 18px; /* margin-top: 10px; BD 2017-09-21 */
    margin: 0;
    padding: 2px 0 3px 23px; /* Text */
    font-weight: bold;
    color: black; /* Borders */
    border: solid 1px grey;
    border-bottom: 1px solid #c0c0c0;
    background-image: url(/Static/Images/16/expand_down_16.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: var(--psColorSchemeWCAG-BGLight,#E1E1E1);
}

.SectionBlock > .Section:first-child > .SectionHeader {
    /*               rounding               */ /*    border: solid 1px grey; */ /* -webkit-border-radius: 10px; */ /* -moz-border-top-left-radius: 10px;     -moz-border-top-right-radius: 10px; */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /* border-bottom: none; */
}

.SectionBlock > .Section:last-child > div.SectionContent:last-child {
    /* rounding */
    border-bottom: 1px solid gray; /* -webkit-border-radius: 10px; */ /* -moz-border-bottom-left-radius: 10px;     -moz-border-bottom-right-radius: 10px; */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
}

.Section div.SectionFooter {
    background-color: #e0e0e0;
    height: 18px;
    padding: 5px 0 1px 5px;
    border: solid 1px gray;
    border-top: 1px solid #c0c0c0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.SectionHeader.Collapsed {
    background-image: url(/Static/Images/16/expand_up_16.png);
    border-bottom: 1px solid gray;
}

.SectionHeader.NoCollapse {
    padding-left: 5px;
    background-image: none;
}

.SectionHeader label, .SectionHeader > span {
    /* WCAG labels should be replaced with spans as labels require a form field (input,select,..) */
    position: relative;
    top: 3px;
    bottom: 3px;
    color: #8B0000;
}

.SectionHeader > h2 { /* see also .dragbox-header > label */
    position: relative;
    display: inline;
    color: #8B0000;
}

.SectionHeader .Actions /* MAKE NON PRINTABLE */ {
    position: absolute;
    height: 16px;
    right: 0;
    bottom: 0;
    text-align: right;
}

/*  
**  Better Way than .Action
*/
.SectionHeaderBlock /* NonPrintable */ {
    /* font-size: 10px; BD 2017-07-06 */
    font-weight: normal;
    cursor: pointer;
    margin: 0px;
    padding: 2px 10px 0 10px;
    float: right;
    height: 18px;
    bottom: 0;
    border: 0;
    display: inline-block;
}

    .SectionHeaderBlock input[type='checkbox'] + label {
        top: 0px;
    }

    .SectionHeaderBlock label {
        top: 1px;
        color: Black;
    }

    .SectionHeaderBlock:hover {
        background-color: #f1f1f1;
    }

    .SectionHeaderBlock img {
        vertical-align: middle;
        margin-right: 2px;
    }
/* 
.SectionHeaderBlock a[disabled]
{
    color: Gray;
    cursor: not-allowed;
}
.SectionHeaderBlock a[disabled] img
{
    opacity: 0.4;
}
*/

/*
**  Old Way
*/
.SectionHeaderEditText {
    cursor: pointer;
    font-weight: bold;
    margin: 0px;
    padding: 0px 5px 0 0; /* font-size: 10px; BD 2017-07-06 */
    text-decoration: underline;
    float: right;
    height: 16px;
    bottom: 0;
}

/*
    div.SectionBlock
        div.Section
            div.SectionHeader
                <span>instructions</span>       ;Heading
            div.SectionContent
                <p>Describe...</p>
                <p>Describe...</p>
        div.Section
            div.SectionHeader
                <h2>Options</h2>            ;Heading
            div.SectionContent.psForm           ;psForm indicates that the form's Submit button is in this div (applies Submit on Enter key)
                <div.SubSectionContent
                    # of Days...
                </div
                <div.SubSectionContent
                    Date Start...
                </div
                <div.SubSectionContent
                    [X] Show All Facilities?
                </div
                <br/>                           ;the following spans
                <div>
                    <span class='SectionButtons'>
                        <button type ='button' class='psDefaultButton imgButton' id='btnApplyOptions'>
                            <img src='{2}' alt='Refresh Query'/>Refresh</button>
                    </span>
                </div>
*/

div.SectionContent {
    background-color: white; /*#ECECEC; BD 2015-12-01 */
    position: relative; /* overflow: auto;  BD 2013-11-17 this was hosing User Details */ /*     padding: 3px 3px 0 3px; margin: 5px 0 5px 10px; */
    padding: 8px 10px 8px 10px;
}

.SectionBlock div.SectionContent {
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}

div.SectionContent p {
    color: Black;
}

div.SectionContent > div {
    padding-bottom: 2px;
    clear: both;
}

div.SectionContent div.SubSectionContent {
    margin-bottom: 5px;
}

div.SectionContent div.ButtonBar {
    height: 26px;
}

div.SectionContent div label {
    min-height: 16px;
}

div.SectionContent div.SubSection {
    margin-bottom: 5px;
    line-height: 1.5; /* BD 2015-05-23 Added line-height */
}

    div.SectionContent div.SubSection.SubSectionGrouping {
        padding: 5px;
        border: 1px solid gray;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

/* Used to display a note in the bottom right of a td */
div.StickyNote {
    padding: 4px;
    border: 2px solid gray;
    text-align: center;
    right: 2px;
    bottom: 4px;
    font-size: 12px;
    position: absolute;
    transform: rotate(6deg);
    background-color: lightgoldenrodyellow;
    color: green;
    border-radius: 4px;
    vertical-align: middle;
}

    /* Paragraph inside with wrapping text */
    div.StickyNote p {
        white-space: normal;
        margin: 0 auto;
        overflow-wrap: break-word;
        word-wrap: break-word;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
        color: green;
    }


.SectionHeader.Collapsed + div.SectionContent {
    display: none;
}

div.SectionContent div.ButtonBar {
    height: 32px;
}

    div.SectionContent div.ButtonBar button {
        float: right;
    }

div.SectionContent span.SectionButtons, div.SectionContent h2.SectionButtons {
    position: absolute;
    right: 5px;
    bottom: 5px;
    text-align: right;
}

div.SectionContent span.SectionButtonsLeft, div.SectionContent h2.SectionButtonsLeft {
    position: absolute;
    left: 5px;
    bottom: 5px;
    text-align: left;
}

div.SectionContent img.pskb {
    margin-right: 2px;
    vertical-align: middle;
}

.SectionText {
    padding-left: 10px;
    margin-left: 10px;
    padding-top: 5px;
    margin-top: 5px;
}

.roTableView {
    /* width: 100%; BD 2015-07-26 */
}

.roTableViewLabel {
    width: 25%;
    white-space: nowrap;
    padding-right: 5px;
}

.roTableViewData {
    padding-left: 25px;
    width: 75%;
}

/* ToolBar */
.ToolBar {
    vertical-align: middle;
    border-bottom: 1px solid #990000;
    background-color: #E1E1E1;
}

/* News Ticker */
.NewsTicker {
    vertical-align: middle;
    border-bottom: 1px solid #000000;
    background-color: #FFFFFF;
}

/* Part Section Styles */
.PartSectionHeader {
    font-weight: bold;
    height: 20px;
    vertical-align: middle;
    background-color: #990000;
    color: #FFFFFF;
    padding: 3px 5px;
    margin-top: 15px;
}

.PartSectionBody {
    padding: 3px 5px;
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
}

/* Action column Graphic + Text */

span.ActionItem /* replace this with imgLink */ {
    cursor: pointer;
    margin-right: 5px;
    font-size: 10px;
}

    span.ActionItem img {
        vertical-align: middle;
        margin-right: 2px;
        width: 16px;
        height: 16px;
    }

/* Left Menu Style */
A.Menu:link {
    text-decoration: none;
    color: #000000;
}

a.Menu:visited {
    text-decoration: none;
    color: #000000;
}

a.Menu:active {
    text-decoration: none;
    color: #000000;
}

a.Menu:hover {
    text-decoration: underline;
    color: #000000;
}

.MenuSectionHeader {
    font-weight: bold;
    height: 20px;
    vertical-align: middle;
    color: #000000;
    background-color: #FFFFFF;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 3px 5px;
    margin-top: 20px; /*background-image: url(images/bg_lightbluegrad.jpg);*/
}

.MenuText {
    color: #000000;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.MenuBody {
    background-color: #E1E1E1;
    vertical-align: top;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #990000;
}

.MenuHeaderText {
    font-weight: bold;
    color: #000000;
    padding: 3px 5px 0px 5px;
}

.MenuHeaderSubText {
    font-size: x-small;
    color: #000000;
    padding: 3px 5px 0px 10px;
}

/* Context Menu Style */
A.ContextMenu:link {
    text-decoration: none;
    color: #000000;
}

A.ContextMenu:visited {
    text-decoration: none;
    color: #000000;
}

A.ContextMenu:active {
    text-decoration: none;
    color: #000000;
}

A.ContextMenu:hover {
    text-decoration: underline;
    color: #000000;
}

.ContextMenuMain {
    position: absolute;
    z-index: 1000;
}

.ContextMenuBody {
    background-color: #E1E1E1;
    vertical-align: top;
    padding: 5px;
    border: 1px solid #000000;
}

.ContextMenuFooter {
    background-color: #FFFFFF;
    vertical-align: top;
    padding: -10px;
    border-top: 1px solid #000000;
}

/* Print Option Styles */
.clsOptionGroup {
    display: block;
    margin-bottom: 4px;
    border: 1px solid #E8D0D0;
    background-color: #FFFFFF;
}

.clsOptionsDiv {
    text-align: left;
    border: 1px solid #0000FF;
    padding: 6px;
    margin: 4px 4px 0 4px;
    background-color: #FFFFE0;
}

.clsOptionGroupHeader {
    background-color: #FFFFFF;
}

.clsOptionGroupHeaderText {
    color: black;
    font-weight: bold;
}

/* used sa the formatting class for jQuery UI tooltip() option */
.psToolTip {
    color: white;
    background-color: #616161; /* this should be changed based on the color current Scheme */
    border-radius: 5px;
}

/* Style spec's for tooltip  */
div#tipDiv {
    position: absolute;
    visibility: hidden;
    left: 0;
    top: 0;
    z-index: 10000;
    background-color: #E8D0D0;
    border: 1px solid #990000;
    width: 260px;
    padding: 6px;
    color: #000;
    line-height: 1.3;
}

    div#tipDiv a:link {
        color: #33b;
    }

    div#tipDiv a:visited {
        color: #339;
    }


/* Style spec's for popupedit  */
div#popupEditDiv {
    position: absolute;
    visibility: hidden;
    left: 0;
    top: 0;
    z-index: 10001;
    background-color: #E8D0D0;
    border: 1px solid #990000;
    width: 260px;
    padding: 6px;
    color: #000;
    line-height: 1.3;
}

    div#popupEditDiv a:link {
        color: #33b;
    }

    div#popupEditDiv a:visited {
        color: #339;
    }

/* Misc Styles */
.clsClientArea {
    padding: 5px;
    margin: 5px;
}

.clsInstructionText {
    margin: 10px;
}

.LargeText {
}

.MediumText {
}

.TinyText {
    font-size: x-small;
}

.scrollBox {
    overflow: auto;
    height: 300px;
    background-color: #FFFFFF;
}

.DropShadow {
    -moz-box-shadow: 5px 5px #999;
    -webkit-box-shadow: 5px 5px #999;
    box-shadow: 5px 5px #999;
}

.ShadowedPopup {
    background-color: white;
    margin: 10px;
}

.clsDashedBox {
    border-top-width: 1px;
    border-top-style: dashed;
    border-left-width: 1px;
    border-left-style: dashed;
    border-right-width: 1px;
    border-right-style: dashed;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border: 1px dashed;
}

.Footer {
    padding: 4px;
    border-top: 1px solid #990000;
}

.OptionBlock {
    background-color: #FFFFFF;
    padding: 5px;
    width: 600px;
    border: 1px solid #990000;
}

/* Combo Styles */
.psCombo {
    position: absolute;
    z-index: 2;
    font-weight: bold;
    background-color: white;
    border: 1px solid black;
    padding-left: 3px;
}

.psComboText {
    margin-right: -3px;
    margin-bottom: -1px;
}

.psComboListBox {
    overflow: auto;
    color: black;
    position: absolute;
    border: 1px solid #A5ACB2;
    text-align: left;
    padding: 0;
    visibility: hidden;
    background-color: white;
    cursor: pointer;
}

.psComboListItem {
    padding: 1px 0 1px 3px;
}

.BrowserMenu {
    background-color: #E1E1E1;
    vertical-align: top;
    border-right: 1px solid #990000;
    overflow: auto;
    height: 400px;
    width: 255px;
}

.BrowserPreview {
    background-color: #FFFFFF;
}

/* Unused Styles ? */
.PartCaption {
    background-color: #E8D0D0;
    font-weight: bold;
    color: white;
    margin-bottom: 0pt;
    border-collapse: collapse;
}

.PartCaptionButton {
    cursor: pointer;
}

.PartTabBar {
    background: #D3D3D3;
    border-top: 1px solid #EEEEEE;
    padding-left: 10px;
}

.PartTabBarItem {
    cursor: pointer;
}

.PartTabBarItemSel {
    background: #D3D3D3;
    font-weight: bold;
    cursor: pointer;
}

.btnStrip {
    display: inline;
    position: relative;
    float: right;
    padding: 0;
    margin: 1px 5px 0;
    width: 80px;
}

.btn {
    display: inline;
    float: right;
    width: 24px;
    height: 16px;
    font-size: 80%;
}

.more {
    color: Blue;
    font-size: 80%;
    cursor: pointer;
}

div.P {
    /* same as P element but without the color change -- note div.p (lowercase) will have same color as paragraph (p) tag but no bottom margin */
    margin-bottom: 1em;
}

div.Line {
    margin-bottom: 0.5em; /* same as P element but without the color change */
}
/*
**  WebPart - General
**
**     wp
**      wpHead -- wpCaption
**      wpBody
**        {customized to each webpart}
**      wpFoot -- wpMore
*/

DIV.wp {
    border: 1px #f1f1f1 solid;
    margin: 8px 4px 6px 4px;
    font-size: 85%;
}

DIV.wpHead {
    background: #f1f1f1;
    border-bottom: 1px #f1f1f1 solid;
    font-size: x-small;
    font-weight: bold;
    margin: 0;
}

    DIV.wpHead .wpCaption {
        padding: 2px 6px;
    }

DIV.wpBody {
    border: none;
    padding: 0px 6px 3px 6px;
}

DIV.wpBodyNews {
    border: none;
    padding: 0 6px 3px 6px;
    background: #fbf5da;
}

DIV.wpToDoHeading {
    padding: 12px 0 4px 0;
    font-weight: bold;
}

DIV.wpToDoItem {
    background: #FFFFFF;
    padding: 0px 0 0px 10px;
    display: table-cell;
    vertical-align: text-top;
    font-size: 80%;
}

DIV.wpStatusList {
    background: #FFFFFF;
    padding: 1px 0 1px 10px;
    display: table-cell;
    vertical-align: top;
}


/*
**  WebPart - News
**
**     wp
**      wpHead -- wpCaption
**      wpBody
**        NewsHead
**            NewsBody
**        NewsHead
**            NewsBody
**      wpFoot -- wpMore
*/

DIV.newsHead {
    font-weight: bold;
    font-size: 80%;
    margin: 9px 0 3px 0;
}

DIV.newsBody {
    margin: 3px 0 6px 6px;
    font-size: 80%;
}


/* DATE PICKER CLASSES */
/* the div that holds the date picker calendar */
.dpDiv {
}
/* the table (within the div) that holds the date picker calendar */
.dpTable {
    text-align: center;
    color: #505050;
    background-color: #fcfcfc;
    border: 1px solid #AAAAAA;
}
/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
}
/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
}
/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
}
/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
}
/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
    border: 1px solid #ece9d8;
}
/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
    background-color: #CCCCCC;
    border: 1px solid #AAAAAA;
}
/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
    background-color: #aca998;
    border: 1px solid #888888;
    cursor: pointer;
    color: var(--psColorSchemeWCAG-ColorDark,red);
}
/* the table cell that holds the name of the month and the year */
.dpTitleTD {
}
/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
}
/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
}
/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
    background-color: #CCCCCC;
    border: 1px solid #AAAAAA;
    color: white;
}
/* additional style information for the text that indicates the month and year */
.dpTitleText {
    color: gray;
    font-weight: bold;
}
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlight {
    color: #4060ff;
    font-weight: bold;
}
/* the forward/backward buttons at the top */
.dpButton {
    color: gray;
    background: #d8e8ff;
    font-weight: bold;
    padding: 0px;
}
/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
    color: gray;
    background: #d8e8ff;
    font-weight: bold;
}
/* the div that holds the date picker calendar */
.dpDiv {
}
/* the table (within the div) that holds the date picker calendar */
.dpTable {
    text-align: center;
    color: #505050;
    background-color: #cfcfcf;
    border: 1px solid #AAAAAA;
}
/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
}
/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
}
/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
}
/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
}
/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
    border: 1px solid #ece9d8;
}
/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
    background-color: #CCCCCC;
    border: 1px solid #AAAAAA;
}
/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
    background-color: #aca998;
    border: 1px solid #888888;
    cursor: pointer;
    color: var(--psColorSchemeWCAG-ColorDark,red);
}
/* the table cell that holds the name of the month and the year */
.dpTitleTD {
}
/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
}
/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
}
/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
    background-color: #CCCCCC;
    border: 1px solid #AAAAAA;
    color: white;
}
/* additional style information for the text that indicates the month and year */
.dpTitleText {
    color: gray;
    font-weight: bold;
}
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlight {
    color: #4060ff;
    font-weight: bold;
}
/* the forward/backward buttons at the top */
.dpButton {
    color: gray;
    background: #d8e8ff;
    font-weight: bold;
    padding: 0px;
}
/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
    color: gray;
    background: #d8e8ff;
    font-weight: bold;
}


/*Add account specific classes */
/* curve height, background image */
.acctarea .t, .acctarea .b, .acctarea .b b, .acctarea .t b {
    height: 10px;
    background-image: url(/Static/Images/acct_bg.png);
}
/* inner color, border color, border width */
.acctarea .c {
    background: #cfcfcf;
    border-color: #cfcfcf;
    border-left-width: 1px;
    border-right-width: 1px;
}

/* class for context popup menu */
/* bd 2015-04-07 removed -- no references
.ContextPopUp
{
    padding: 0px;
    width: 85px;
    border: 1px solid #808080; 
    position: absolute;
    background-image: url(menu-assets/sub-button-tile.jpg);
    background-color: #808080;
}
*/

.SmallCB {
    width: 16px;
    height: 16px;
}

DIV.FloatingOptionBox {
    position: absolute;
    display: block;
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: Blue;
    background-color: #FFFFE0; /* margin-bottom: 5px; BD 2013-09-09 */
    width: 610px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.tdShow {
    display: table-cell;
    width: 16px;
    height: 16px;
}

.tdHide {
    display: none;
}

.left {
    text-align: inherit !important;
}

.center {
    text-align: center !important;
}

.right {
    text-align: right !important;
}

.justify {
    text-align: justify !important;
}

.top {
    vertical-align: top !important;
}

.middle {
    vertical-align: middle !important;
}

.bottom {
    vertical-align: bottom !important;
}

.bold {
    font-weight: bold !important;
}

.yellowMarker {
    background-color: #F3F315 !important;
}

.red {
    color: var(--psColorSchemeWCAG-ColorDark,red) !important; /* used by Invoice Description /r */
}

.blue {
    color: blue !important; /* used by Invoice Description /w */
}

.black {
    color: black !important;
}

.inline {
    display: inline-block;
}

.hide {
    display: none;
}

.show {
    display: inherit;
}

/* PayWizard styles */
div.pw {
}

    div.pw table {
        text-align: right;
        border-collapse: separate;
    }

        div.pw table td {
            background-color: #EEE;
            width: 60px;
        }

            div.pw table td.tdExp {
                width: 60px;
                text-align: right;
            }

            div.pw table td.tdPayDoc {
                width: 60px;
                color: Blue;
                vertical-align: top;
                text-align: right;
            }

            div.pw table td.pwFirstCol {
                width: auto;
                background-color: #FFF;
                text-align: right;
            }

            div.pw table td.pwHeader {
                width: auto;
                border-width: 1px;
                background-color: #CCC;
                font-weight: bold;
                text-align: right;
            }

.aEXHide span {
    visibility: hidden;
    padding-left: 2px;
    white-space: nowrap;
}

.aEXShow span {
    padding-left: 2px;
    white-space: nowrap;
}

/* ******************************************************************************** */
/* ******************************************************************************** */
/*              START OF PSTABLE                                                  */
/* ******************************************************************************** */
/* ******************************************************************************** */

/* ******************************************************************************** */
/* ******************************************************************************** */
/*              END OF PSTABLE                                                  */
/* ******************************************************************************** */
/* ******************************************************************************** */


/* ******************************************************************************** */
/* ******************************************************************************** */
/*              START OF PSDVTABLE                                                  */
/* ******************************************************************************** */
/* ******************************************************************************** */

table.psDataTable {
    display: none;
    /* since the CSS for psDataTable loads deferred via module, browser would show unformatted table and then reformat it when the css loaded. */
    /* we set to display:table at the end of the psUtils.DataTable.wireUp() call */
}

.psdvTable {
    margin: 0; /* border-collapse: collapse; this makes it difficult for borders on top / bottom of each row */
    border-spacing: 0px;
    border-collapse: separate;
}

    .psdvTable caption, div.divTableCaption {
        text-align: left;
        font-weight: bold;
    }

    .psdvTable .currency, .psdvTable .float /* BD 2014-12-03 changed .float to right */ {
        text-align: right;
    }

    .psdvTable .bit {
        text-align: center;
    }

    .psdvTable th {
        text-align: left;
        padding: 3px 8px 3px 5px;
        border: 1px solid #cdcdcd; /* background-color: #99bfe6; */
    }

    .psdvTable thead tr th {
        vertical-align: bottom;
    }

    .psdvTable th.psMonthGrouped {
        padding: 2px;
    }

    .psdvTable th.THGroup {
        text-align: center;
    }

    .psdvTable tfoot th {
        /* color: Black; */
        font-weight: normal;
        padding: 3px 4px;
        border-top: solid 1px #ddd;
    }

    .psdvTable th.psResizing {
        cursor: col-resize;
    }

    .psdvTable td {
        padding: 3px 4px; /* BD 2016-10-29 changed from 2px 4px -- testing */
        vertical-align: top; /* BD 2020-02-24 testing it out */
    }

    .psdvTable tfoot th:not(.psReadWrite) {
        /* no left and right border to line up with normal rows */
        border-right: none;
        border-left: none;
    }

    .psdvTable tr.totalRow {
        font-weight: bold;
    }

    .psdvTable tr.headerRow {
        font-weight: bold;
    }

table.psEditable.psdvTable > tbody > tr:hover > td > input {
    border: solid 1px gray !important;
}

.psdvTable tr.headerRow.psInd2 td {
    padding-left: 32px;
}

.psdvTable tr.headerRow.psInd3 td {
    padding-left: 64px;
}

.psdvTable tr.headerRow.psInd4 td {
    padding-left: 96px;
}

.psdvTable tr.totalRow td.totalLabel {
    text-align: right;
    padding-bottom: 12px;
    vertical-align: middle;
}

.psdvTable div.psCellHandle {
    display: none;
}

.psdvTable:hover div.psCellHandle {
    display: block;
}

table.psdvTable tbody td.psAC {
    white-space: nowrap;
}

td.totalLabel > a {
    color: #444;
}

.psdvTable tr.totalRow:not(.psBlankRow) td.psCurrency {
    border-top: 1px solid black;
    padding-bottom: 12px;
}

.psdvTable tr.psBlankRow2 td.psCurrency {
    border-top: 1px solid transparent;
    padding-bottom: 12px;
}

.psdvTable th a:link, .psdvTable th a:visited, .psdvTable th a:hover {
    /* color: Black; */
    text-decoration: underline;
}

.psdvTable tfoot th.data-ps-behaviorTotal {
    text-align: right; /* border-top: solid 1px gray; BD 2016-12-31 looks bad */
}

.psdvTable tr.totalRow td {
    /* background-color: White; */
    padding-bottom: 12px; /* puts some space between the total row and the next row in table */
}

.psdvTable th.header {
    cursor: pointer;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: center left;
    margin-left: -1px;
}

.psdvTable .psTFSConfig {
    display: none;
}

.psdvTable:hover .psTFSConfig {
    display: block;
}

/*
    Ascending is Increasing ^

    Excel avoids indicator by using AZ and ZA both with downward arrows

    Access is the same as Excel except it uses Arrow in the column heading to point towards the smaller values.  This is a poor symbol to use.

    An arrow is a vector indicating direction.
    In our LTR / TTB world, values increase as they move away from the Top Left.

   A "Tower of Hanoi" triangle indicates smaller on top / larger on bottom and is thus the opposite of Arrow and Triangle.
          --
         ----
        ------
    
    Conclusion:
    Arrow and Triangle should indicate increasing value.
    
    http://ux.stackexchange.com/questions/37564/use-up-or-down-arrow-to-represent-sort-ascending-at-table-header
*/
.psdvTable th.headerSortUp {
    background-image: url(/Static/Images/sortDown.png);
    background-position: top right; /*  background-image: url(/Static/Images/desc.gif); background-position: 95%;  */
    background-repeat: no-repeat;
}
/*
    Descending is Decreasing v
*/
.psdvTable th.headerSortDown {
    background-image: url(/Static/Images/sortUp.png);
    background-position: top right; /*      background-image: url(/Static/Images/asc.gif);     background-position: 99%;      */
    background-repeat: no-repeat;
}

.psdvTable td input {
    margin: -1px; /* background-color: #e8edff; */
    border: 1px solid #e8edff;
}

.psdvTable tr.error td {
    border-top: 1px solid var(--psColorSchemeWCAG-ColorDark,red);
    border-bottom: 1px solid var(--psColorSchemeWCAG-ColorDark,red);
}

/*
    What was this even used for?!  Need Doc -- BD 2020-06-13
    .psdvTable td select {
    margin: -1px; 
    border: 1px solid #e8edff;
}
*/
.psdvTable tr.selected td input {
    border: 1px solid lightgray;
    margin: -1px;
}

table.psdvTable tr.rowHighlight td {
    /* background: url(/Static/Images/selectedrowwithfocus.png); BD 2018-10-17 */
    background-color: #fff799;
}

table.psdvTable tr.rowHighlight input {
    /* background: url(/Static/Images/selectedrowwithfocus.png); background-repeat: repeat-x; BD 2018-10-17 */
    background-color: #fff799;
}

/*
** Odd/Even Rows for IE8 or lower -- see psPageFormat.js
*/
.psdvTable tr.psdvRowEven td {
    /* background-color: White; */
    border-left: solid 1px #cdcdcd;
    border-top: solid 1px #cdcdcd;
    border-right: solid 1px #cdcdcd;
    border-bottom: solid 1px #cdcdcd;
}

.psdvTable tr.psdvRowOdd td {
    /* color: #444; */ /* background-color: #e8edff; */
    border-left: solid 1px #cdcdcd;
    border-top: solid 1px #cdcdcd;
    border-right: solid 1px #cdcdcd;
    border-bottom: solid 1px #cdcdcd;
}

.psdvTable .psdvRowEven input {
    margin: -1px;
    border: 1px solid white; /* background-color: white; */
}

.psdvTable .psdvRowEven select {
    margin: -1px;
    border: 1px solid white; /* background-color: white; */
}


/*
    BD 2014-11-18 
    Changed as having different colored fields on on-even, while done to coordinate with row striping, 
    caused some input fields to disappear based on custom background colors
*/

/*
    Hide borders around the select unless the row has focus.  Makes grids look less cluttered
*/

.psdvTable tbody tr:not(.selected.psRowFocused) select::-ms-expand {
    display: none;
}

table.psdvTable:not(.schemeShowInputBorders) > tbody > tr:nth-child(odd) > td > input, table.psdvTable:not(.schemeShowInputBorders) > tbody > tr:nth-child(even) > td > input {
    background-color: transparent;
    border-color: transparent;
}

table.psdvTable:not(.schemeShowInputBorders) > tbody > tr:nth-child(odd) > td > select, table.psdvTable:not(.schemeShowInputBorders) > tbody > tr:nth-child(even) > td > select {
    background-color: transparent;
    border-color: transparent;
}

/*
    Must be VERY Specific in this Selector
*/
table.psdvTable > tbody > tr.selected.psRowFocused:nth-child(odd) > td > input,
table.psdvTable > tbody > tr.selected.psRowFocused:nth-child(odd) > td > select,
table.psdvTable > tbody > tr.selected.psRowFocused:nth-child(even) > td > input,
table.psdvTable > tbody > tr.selected.psRowFocused:nth-child(even) > td > select {
    background-color: white;
    border-color: #0645AD; /* BLUE from http://en.wikipedia.org/wiki/Help:Link_color */
}


/*********
    Image for AutoComplete ComboButton
    **********/

img.cbtn {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/*td > img.cbtn {
    display: none;
}

td:hover > img.cbtn {
    display: inline;
}*/

input[data-ps-ac-autofill='false'][style*="none"] + span.cbtn {
    display: none;
}

span.cbtn {
    margin-left: 5px;
    cursor: pointer;
}

    span.cbtn > img {
        width: 16px;
        float: none;
        /*margin-right: 0;*/
        opacity: 0.4;
        vertical-align: top;
    }


td:hover > div > img.cbtn /* support div nested inside td - needed in forms system */ {
    display: inline;
}

/*******************/

.psdvToolbox {
    display: none;
    min-width: 40px;
    text-align: left;
    z-index: 1;
}

th:hover .psdvToolbox {
    display: block;
}

.psdvTable > tbody > tr > td.psDrillDown {
    color: Blue !important;
}

.psdvTable[data-ps-toolbox-items] thead th {
    padding-top: 18px;
}

.psdvTable tbody tr > td[rel] {
    background-image: url(/Static/Images/info12.png);
    background-repeat: no-repeat;
    background-position: 90%;
}

tr td.showOnHover {
    display: none;
}

tr:hover > td.showOnHover {
    display: block;
}

tr td a.showOnHover {
    display: none;
}

tr:hover > td a.showOnHover {
    display: block;
}

/* ******************************************************************************** */
/* ******************************************************************************** */
/*              END OF PSDVTABLE                                                    */
/* ******************************************************************************** */
/* ******************************************************************************** */

.psdvFooter {
    color: #666;
    margin-top: 4px;
    margin-left: 4px;
    font-style: italic;
    border-bottom-style: none;
}

.psEditDiv .psEditInput.showedited {
    background-image: url(/Static/Images/16/Save2.gif);
    background-repeat: no-repeat;
    background-position: right;
}

.psdvColumnConfig {
    display: none;
}

/*
** if the table has a data-ps-toolbox-items attribute containg config, show config toolbox item 
*/
table[data-ps-toolbox-items~=config] .psdvColumnConfig, table[data-ps-toolbox-items~=configFSN] .psdvColumnConfig {
    display: inline;
    cursor: pointer;
}

.psdvColumnFilter {
    display: none;
}

.psdvColumnChart {
    display: none;
}

th[data-ps-chart-filter] img.psdvColumnChart {
    display: inline;
    cursor: pointer;
}

table[data-ps-toolbox-items~=filter] .psdvColumnFilter {
    display: inline;
    cursor: pointer;
}

table[data-ps-toolbox-items~=filter] th.psNoToolbox .psdvColumnFilter {
    display: none;
}

/*
**  PS Tooltip
*/

#psTooltip {
    margin: 8px;
    padding: 8px;
    background-color: #ffffe1;
    color: black;
    position: absolute;
    z-index: 2002;
    border: 2px solid #a0a0a0;
    border-radius: 4px;
    -moz-box-shadow: 6px 6px 10px 0 #736357;
    -webkit-box-shadow: 6px 6px 10px 0 #736357;
    box-shadow: 6px 6px 10px 0 #736357;
}

    #psTooltip strong {
        color: Black;
        font-weight: bold;
    }

/* 
**  PS Dialog Controls
**
**  If you modify the name or add a new Standardized psControlClasses, you must also modify:
**
**      * psEdit.js -- psEdit_GetInputFormat()
**      * psPageFormat.js -- calculateTotalColumns()
**      * psUtils.js -- toPsClassFormat
*/
input::placeholder, textarea::placeholder {
    color: #808080;
    font-style: italic;
}

.psTimeOnly, input.psTimeOnly {
    /*width: 80px;*/ /* Official BD 2016-07-14 */
    width: calc(8ch + 2ch); /* LP 2022-02-25; Change to 9ch; */
    text-align: left !important; /* keep it left aligned so it doesn't bounce around when you click in it */
}

input.psDateOnly {
    width: calc(10ch + 2ch); /* Official BD 2016-07-14 */ /* needs room for "mm-dd-yyyy X" as dispay in IE with X=clear button */
    text-align: left !important; /* keep it left aligned so it doesn't bounce around when you click in it */
}

th.psDateOnly, th.psDateOnlyPicker {
    text-align: center !important;
}

th.psDateOnlyPicker {
    width: calc(10ch + 28px); /* Official BD 2016-07-14 */ /* needs room for "mm-dd-yyyy X" as dispay in IE with X=clear button */
    text-align: center !important; /* keep it left aligned so it doesn't bounce around when you click in it */
}

.psDate_Time {
    width: calc(19ch + 2ch); /* Official BD 2016-07-14  MM-DD-YY  HH:MM */
}

.psDDD_Date_Time {
    width: calc(19ch + 4ch + 2ch); /* Official BD 2016-07-14  ddd MM-DD-YY  HH:MM    this was never really able to work since the value could not be sent to SQL */
    text-align: right !important;
    padding-right: 3px;
}

.psDate_TimeSS {
    width: calc(19ch + 4ch + 2ch); /* Official BD 2020-02-07  MM-DD-YY  HH:MM:SS */
}

input.psDate_Time {
    text-align: left !important; /* keep it left aligned so it doesn't bounce around when you click in it */
}

.psDateMMYYYY, .psDateMMMYYYY /* MM-YYYY and MMM-YYYY */ {
    width: 94px;
    text-align: right;
    padding-right: 10px;
}

.psPercentage, .psPer100, .psPercentage0, .psPercentage0NS /* Per100 is for values stored as valus between 0 and 100 for 0% to 100% as opposed to values 0.00 to 1.00 */ {
    width: calc(7ch + 2ch);
    text-align: right !important;
    white-space: nowrap;
}

/*
    Variable psQuantityChars (0=0ch, 1=2ch, 2=3ch, ...5=6ch, 6=7ch)
*/

.psQuantityX /* large enough to show ##,###,##0  This variable set ty ColorScheme.aspx.vb */ {
    width: calc(10ch + var(--psQuantityChars,4ch) + 2ch);
    text-align: right !important;
    padding-right: 8px !important;
}

thead th.psQuantityX {
    width: calc(10ch + var(--psQuantityChars,4ch)); /* bold TH is wider than non-bold TD so eliminate 2ch */
    text-align: center !important; /* move to the left out of the way of the sort arrow */
}

.psQuantity /* large enough to show ##,###,##0.000 */ {
    width: calc(14ch + 2ch);
    text-align: right !important;
    padding-right: 8px !important;
}

thead th.psQuantity {
    width: 14ch; /* bold TH is wider than non-bold TD so eliminate 2ch */
    text-align: center !important; /* move to the left out of the way of the sort arrow */
}

table.psEditable tr.psReadOnlyRow .psQuantity /* Aligns read-only data nicely with editable rows */ {
    border-right: 8px solid transparent;
}

table.psEditable tr.psReadOnlyRow td /* Aligns read-only data nicely with editable rows */ {
    border-left: 3px solid transparent;
}

.psQuantityShort /* large enough to show ##,##0.000 */ {
    width: calc(10ch);
    text-align: right !important;
    padding-right: 8px !important;
}

thead th.psQuantityShort {
    width: 8ch; /* bold TH is wider than non-bold TD so eliminate 2ch */
    text-align: center !important; /* move to the left out of the way of the sort arrow */
}

.psCurrency0 /* large enough to show $ ##,###,###0 */ {
    width: 10ch; /* was 80px */
    text-align: right !important;
    white-space: nowrap;
}

.psNoCurrency0 /* large enough to show $ ##,###,###0 */ {
    width: 80px;
    text-align: right !important;
    white-space: nowrap;
}

    .psNoCurrency0:before {
        content: "$";
        float: left;
        padding-left: 5px;
    }



.psIdentity {
    width: 8ch;
    text-align: right !important;
    /*padding-right: 15px !important;  BD 2024-07-05 removed excess right indent */
}

th.psIdentity {
    text-align: center !important;
    padding-right: 3px !important;
}

td.psCurrency0, th.psCurrency0 /* large enough to show $ ##,###,##0 */ td.psNoCurrency0, th.psNoCurrency0 /* large enough to show $ ##,###,###0 */ {
    width: 12ch; /* was 80px */
}

.psCurrency /* large enough to show $ ##,###,###0.00 */ {
    width: 15ch; /* was 100px */
    text-align: right !important;
    white-space: nowrap;
}

.psUnitPrice /* #,##0.000 */ {
    width: 14ch; /* large enough to show $ ##,###,##0.000 */
    text-align: right !important;
    white-space: nowrap;
}

.psIntegerNoFmt { /* for cases where we need to interpret data as integer but provide no formatting */
}

.psInteger /* #,##0 */ {
    width: 10ch; /* large enough to show ##,###,##0 8ch */
    text-align: right !important;
    /*padding-right: 8px !important; BD 2024-07-05 looks awkward*/
}

.psIntegerShort { /* large enough to show ##,##0 */
    width: 6ch;
    text-align: right !important;
    padding-right: 8px !important;
}

.psNumber { /* large enough to show ##,###,###.00 think Currency without the leading $ */
    width: 13ch;
    text-align: right !important;
}

.psRefNum {
    text-align: right !important;
}

.psFloat {
    text-align: right !important;
}

.psBit {
    text-align: center;
}

/*.psDateOnly input { width: 91px; }*/

.psPhone {
    width: 110px !important;
}

.psZIP {
    width: 100px !important;
}

.psEditLabel {
    text-align: right;
}

/* disk icon is hidden and replaced by animated chase icon when saving */
button.psEditButtonSave.saving img {
    display: none;
}

/* show spinning chase symbol while dialog is saving */
button.psEditButtonSave.saving {
    background: url(/Static/Images/16/Chasing_16.gif) !important;
    background-repeat: no-repeat !important;
    background-color: #faffc2 !important;
    background-position: 4px 4px !important;
}

/* ********************************************************************************************
**
**  The following psVarchar* should be eliminated and properly formatted using
**  width:calc(NNch + 4ch); along with maxlength='NN' or some such mechanism.  These interfere with other classes
**  that are setting a specific size and CSS doesn't seem to know which has priority.
**
**********************************************************************************************/
.psEditVARCHAR {
    text-align: right;
}

.psVarchar255 {
    width: 228px;
}

.psVarchar128 {
    width: 188px;
}

.psVarchar64 {
    width: 148px;
}

.psVarchar32 {
    width: 108px;
}

.psVarchar16 {
    width: 68px;
}

    .psVarchar16.psEditInput {
        width: 130px;
    }

.psVarchar10 {
    width: 68px;
}

.psVarchar9 {
    width: 75px;
}

.psVarchar2 {
    width: 28px;
}

.psVarchar1 {
    width: 28px;
}

.psAutoWidth {
    width: auto;
}
/* ***************************************************************************************** */

.psEditTextArea {
    overflow: auto;
    min-width: 260px; /* BD 2021-12-21 This was "width:260px" which is fairly ridiculous since it then overrides the cols attribute */
}

th.psEditTextArea {
    overflow: inherit;
}

td.psEditTextArea {
    overflow: inherit;
}

.psEditLabelTextArea {
    padding-top: 3px;
    vertical-align: top;
}

.psEditTDautonumber {
    display: none;
}

.psEditLabelautonumber {
    display: none;
}

.psHidden {
    display: none;
}

.psComboBox {
    width: auto;
}

.psEditSeparator {
    width: 4px; /* this was 8px but was wider than 1ch -- changed to 4px which is label+input gap */
    display: inline-block;
    /* background-image: url(/Static/Images/StatusBarBackground.png); BD 2021-02-27 Why? */
}

.noACDropDown img.cbtn {
    display: none;
}

.showACDropDown img.cbtn {
    display: inline;
}

input.psReadOnlyInput {
    background-color: white;
    color: black;
    border: none;
}

/* BD 2017-09-24 this should've been modalContent 
#EditDataViewDiv
{
    padding: 10px 16px;
    max-height: 260px;
    overflow: auto;
}
*/
/* BD 2017-09-24 modalButtonPane is doing the styling
#EditButtonsDiv
{
    text-align: right;
    height: 34px;
    margin: 0 20px 10px 20px;
    position: relative;  allow absolute positioning of elements within 
}
*/
#EditButtonsDiv input {
    min-width: 70px;
}

/* BD 2017-09-24 this styling should be done by modalFooter */
/* BD 2017-06-17 need to stop using #psEditStatusBar as multiple simultaneous dialogs duplicates id's */
/*
#psEditStatusBar, .psEditStatusBar 
{
    text-align: left;
    padding: 3px;
    margin-top: 5px;
    min-height: 14px;
    background-image: url(/Static/Images/StatusBarBackground.png); 
}
*/

/*
    Overlaps with #SchedEditPopupControl img.Property and several other pages -- this should be the master BD-2020-01-21
*/
div.modalHeader img.Property {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

#psEditForm {
    padding: 6px;
}

.psFieldSetRow td {
    padding: 8px;
    font-weight: bold;
    cursor: pointer;
}

.psFieldSetRow:hover {
    background-color: rgb(153, 191, 230);
}

/* 
** jQuery-UI  -- use Smoothness Theme, 
*/
.win .ui-dialog .ui-dialog-buttonpane button {
    /*      ** When running on Windows platform, the buttons in our app need to be consistent with the guidelines for that platform (i.e. Windows User Experience Guidelines for Windows Vista/7)     ** When running on Mac platform ddd(ios), conform to Apple Human Interface Guildelines     */
    float: right;
}

.ui-widget-overlay {
    z-index: 2001;
    background-image: url(/Static/Images/ui-bg_diagonals-small_100_bbbbbb_40x40x40.png);
    background-color: transparent;
    background-repeat: repeat;
    background-position: 50% 50%;
    opacity: 1.0;
}

.ui-overlay {
    background: url(/Static/Images/Loading04.gif) no-repeat top center;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.5);
}

.ui-widget {
    font-size: inherit; /* returns size to common.css default instead of jquery-ui.custom.css setting */
}

.ui-widget-shadow {
    -webkit-box-shadow: 8px 8px 8px #aaa;
    -moz-box-shadow: 8px 8px 8px #aaa;
    box-shadow: 8px 8px 8px #aaa;
}

.ui-dialog {
    z-index: 2002; /* BD 2016-11-04 made it one higher than the Widget Overlay */
    padding: 0 !important; /* bd 2015-06-26 */
}

.ui-datepicker {
    z-index: 2002;
}

button.ui-datepicker-trigger, button.ellipsis {
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* override default PS button */
    margin-right: 0 !important; /* normal "button" has 5px to right */
    margin-left: 4px !important;
    min-height: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    width: 18px !important;
    padding: 0 !important;
    z-index: 2000;
    line-height: normal;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    behavior: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none !important;
}

.ui-datepicker-current /* hide the Today button on DatePicker and Now button on Date/TimePicker */ {
    display: none;
}

.psAutoComplete {
    /*background-image:url(/Priority/images/comboButtonUpNoBorder.gif); 	background-repeat: no-repeat; 	background-position: top right ; 	border-width:1px;*/
}

/* DEPRECATED BY ColorScheme.aspx
table.psdvTable > tbody > tr.selected
{
    background-color: #FFFF99; 
}
*/

/*
DEPRECATED DEPRECATED DEPRECATED DEPRECATED DEPRECATED DEPRECATED DEPRECATED moved to psColorScheme
tr.psRowFocused td
{
    background-color: #fff799;
}
*/

/* BD 2018-10-17
table.psdvTable > tbody > tr.selected.psRowFocused > input
{
    background-color: #fff799; 
}
*/

tr.rowHighlight {
    background-color: #c0d8f0; /* pale dark blue - same as in ribbon */
    background-repeat: repeat-x;
}

/* BD 2018-10-17
table.psdvTable tbody tr.selected td
{
    background-color: Transparent;
}
*/

/* tr.selected > td:first-child   BD 2017-05-28 added qualifier to avoid conflict */
/* this should be deprecated and .schemeShowSelected should set the width -- see next */
/* BD 2019-08-30 added schemeShowSelected class to table */
table.psdvTable.schemeShowSelected > tbody > tr.selected > td:first-child {
    /* was 14px without any padding or margin settings BD 2018-10-17 */
    width: 22px;
    min-width: 22px;
    padding: 0;
    margin: 0;
    background: url(/Static/Images/SelectedRecord.png);
    background-repeat: no-repeat;
    background-position: center;
}

table.psdvTable.schemeShowSelected > tbody > tr > td:first-child {
    width: 22px;
    min-width: 22px;
    padding: 0;
    margin: 0;
}

table.psdvTable.schemeShowSelected > tbody > tr.selected > td:first-child {
    background: url(/Static/Images/SelectedRecord.png);
    background-repeat: no-repeat;
    background-position: center;
}

/*
BD 2018-10-17 could not find psNoRowSelector in code
table.psdvTable.psNoRowSelector tbody tr.selected > td:first-child 
{
    width: auto;
    background: none;
}
*/

table.psdvTable[data-ps-row-selection=MultiRow] > tbody > tr.selected > td:first-child /* BD 2018-10-17 add psdvTable  */ {
    /* was 14px without any padding or margin settings BD 2018-10-17 */
    width: 22px;
    min-width: 22px;
    padding: 0;
    margin: 0;
    background: url(/Static/Images/SelectedRecord.png);
    background-repeat: no-repeat;
    background-position: center;
}

/* table.psdvtr.psdvRowHighlight td:first-child  BD 2017-05-28 added qualifier to avoid conflict
    show + for expanding a row that has a child and is not already expanded
*/
/* LN 2020-07-22 Change[sn] to [data-sn] */
table[data-ps-child-source].psdvTable tbody tr[data-sn]:not(.edited):not([data-ps-child-row-expanded]).psdvRowHighlight td:first-child {
    background-image: url(/Static/Images/16/expandb.png);
    background-repeat: no-repeat;
    background-position: center;
}

table.psdvTable tbody tr.newrecord > td:first-child {
    background: url(/Static/Images/RecNew.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-color: white; /* BD 2020-06-06 */
}

table.psdvTable > tbody > tr.edited > td:first-child {
    background: url(/Static/Images/16/Save2.gif);
    background-repeat: no-repeat;
    background-position: center;
}

table.psdvTable > tbody > tr.edited.saving > td:first-child {
    background: url(/Static/Images/16/Chasing_16.gif);
    background-repeat: no-repeat;
    background-position: center;
}

table.psdvTable.schemeShowSelected > tbody > tr.edited > td:first-child {
    background: url(/Static/Images/16/Save2.gif);
    background-repeat: no-repeat;
    background-position: center;
}

table.psdvTable.schemeShowSelected > tbody > tr.edited.saving > td:first-child {
    background: url(/Static/Images/16/Chasing_16.gif);
    background-repeat: no-repeat;
    background-position: center;
}

table.psdvTable > tbody > tr > td > a.DrillDown {
    border-top: solid 2px slategray;
    border-left: solid 2px slategray;
    border-bottom: solid 1px gray;
    border-right: solid 1px gray;
    padding: 4px;
    position: absolute;
    margin-top: 14px;
    margin-left: -28px;
    background-color: white;
    display: none;
}

table.psdvTable > tbody > tr:hover > td > a.DrillDown {
    display: inline;
}

.currency input, .float input {
    text-align: right;
}

table[data-ps-child-control] > tbody > tr[data-sn]:not(.edited):not([data-ps-child-row-expanded]).ShowRowExpander > td:first-child {
    width: 14px; /* background-image: url(/Static/Images/16/expandb.png); BD 2017-08-27 */
    background-image: url(/Static/Images/16/ChildExpand_16.png);
    background-repeat: no-repeat;
    background-position: center;
}

table[data-ps-child-control] > tbody > tr[data-sn]:not(.edited):not([data-ps-child-row-expanded]).selected > td:first-child {
    width: 14px; /* background-image: url(/Static/Images/16/expandb.png); BD 2017-08-27 */
    background-image: url(/Static/Images/16/ChildExpand_16.png);
    background-repeat: no-repeat;
    background-position: center;
}

table[data-ps-child-control] > tbody > tr[data-ps-child-row-expanded="true"] td:first-child {
    /* background: url(/Static/Images/16/ecollapse.png); BD 2017-08-27 */
    background: url(/Static/Images/16/ChildCollapse_16.png);
    background-repeat: no-repeat;
    background-position: center;
}

table[data-ps-child-control] > tbody > tr.edited td:first-child {
    background: url(/Static/Images/16/Save2.gif);
    background-repeat: no-repeat;
    background-position: center;
}

th.preHeader {
    text-align: center;
    border-bottom: solid 1px gray;
    border-right: solid 1px gray;
    border-left: solid 1px gray;
}

.hideWCAG { /* hides the content but used to trick WCAG analyzer from seeing empty header */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}



@media screen {
    .PrintOnly {
        display: none !important;
        /*visibility: hidden; BD 2023-10-31 commented as it conflicts with display:none */
    }
}

@media print {
    .ScreenOnly {
        display: none !important;
        /*visibility: hidden; BD 2023-10-31 commented as it conflicts with display:none */
    }

    .PrintOnly {
        display: block;
    }

    .psWrapper {
        min-height: 0px !important;
    }

    .aspNetHidden, .InstructionBox, .apActionPane, .rbRibbon, .TrackHistory, .psFooter, .SectionBlock, .PageBreak, .SectionHeaderBlock {
        /*visibility: hidden; BD 2023-10-31 commented as it conflicts with display:none */
        display: none !important; /* BD 2023-10-31 added !important*/
    }

    .ForceToPrint {
        display: block;
        visibility: visible;
    }
}

.menuListItem {
    cursor: pointer;
    color: Blue;
    vertical-align: top;
}

.InternalSettingItem {
    display: none;
    margin-left: 8px;
}

.InternalSetting:hover .InternalSettingItem {
    display: inline;
}


divT {
    border-bottom: dashed 1px green !important;
}

/* 
***************************************************************
**  PO options 
***************************************************************
*/
.POText {
    margin-top: -15px;
    margin-left: 10px;
    line-height: 22px;
}

.POGroup {
    margin-left: 4px;
    font-size: 10px;
    color: #444444; /*background-color: rgb(232, 237, 255);*/
    border: 1px solid #ccc;
    padding: 3px;
    padding-left: 6px;
    padding-bottom: 4px;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
}

    .POGroup:hover img {
        background-image: url(/Static/Images/close.png);
    }

.POGroupSaved {
    margin-left: 4px;
    font-size: 10px; /*background-color:#e8edff;*/
    border: 1px solid #ccc;
    padding: 3px;
    vertical-align: middle;
    cursor: pointer;
}

.POText > span > span {
    color: Black;
    position: relative;
    top: 3px;
    left: 2px;
    cursor: pointer;
}

.POText span img {
    margin-top: 2px;
}

/* 
***************************************************************
**  Error Paragraph BD 2019-03-19
***************************************************************
*/

label.error {
    color: var(--psColorSchemeWCAG-ColorDark,red) !important;
}

input.error, select.error, textarea.error {
    /*border: 2px solid var(--psColorSchemeWCAG-ColorDark,red) !important;*/ /* the border is lost when the field has the focus, default border in Chrome is 2px inset rgb(133,133,133) */
    /*color: var(--psColorSchemeWCAG-ColorDark,red) !important;*/
    /*  BT 2023-12-12: reverted WCAG color back to always red; red color is required for error classes because it gives information that may not always be given via other methods  */
    /*border: 2px solid red !important;*/ /* the border is lost when the field has the focus, default border in Chrome is 2px inset rgb(133,133,133) */
    /*color: red !important;*/
    /* BD 2024-01-12 this absolutely must be set to WCAG and not red as red is not sufficient contrast */
    /*border: 2px solid var(--psColorSchemeWCAG-ColorRed,red) !important;*/ /* the border is lost when the field has the focus, default border in Chrome is 2px inset rgb(133,133,133) */
    /*color: var(--psColorSchemeWCAG-ColorRed,red) !important;*/
    /* BT 2024-01-15 changed back to a darker, WCAG-compliant, contrast-ier red */
    border: 2px solid var(--psColorSchemeWCAG-ColorRed,red) !important; /* the border is lost when the field has the focus, default border in Chrome is 2px inset rgb(133,133,133) */
    color: var(--psColorSchemeWCAG-ColorRed,red) !important;
}

    select.error option {
        color: var(--psColorSchemeWCAG-ColorDark,red) !important;
    }

p.error, span.error, td.error, input[type="radio"].error + label, input[type="checkbox"].error + label {
    color: var(--psColorSchemeWCAG-ColorDark,red) !important;
}

p.error {
    font-weight: bold;
}

    p.error:before {
        /* BD 2020-11-09 we only want the word Error added for Paragraphs under the Instructions Section -- don't interfere with form.ascx.vb or any INPUTs */
        content: 'Error: ';
    }

.warning {
    color: var(--psColorSchemeWCAG-ColorDark,red) !important;
}

    .warning:before {
        content: 'Warning: ';
        font-weight: bold;
    }

.important {
    font-weight: normal;
}

    .important:before {
        color: var(--psColorSchemeWCAG-ColorDark,red) !important;
        content: 'Important: ';
        font-weight: bold;
    }

.note {
    color: black;
}

    .note:before {
        content: 'Note: ';
        font-weight: bold;
    }

.noResults {
    color: #666666;
    font-weight: bold;
}

/* 
***************************************************************
*/
.noWrap {
    white-space: nowrap;
}

div.DataHelp, div.tipAccount {
    width: 12px;
    height: 12px;
    margin: 0 0 0 5px;
    padding: 0;
    display: inline-block !important;
    background-image: url(/Static/Images/12/DataHelp_12.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    cursor: help;
}

.t {
    max-width: 400px;
    background-color: #fefee1;
}

.DataHelpDisplay {
    max-width: 450px;
    background-color: #f5fcf5;
}

    .DataHelpDisplay td {
        vertical-align: top;
    }

    .DataHelpDisplay table td:nth-child(1) {
        text-align: center;
    }

/* 
***************************************************************
*/

div.tipWildcard {
    width: 16px;
    height: 16px;
    margin: 0 0 0 5px;
    padding: 0;
    display: inline-block !important;
    background-image: url(/Static/Images/32/Wildcard_32.png);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    vertical-align: bottom;
}

.tipWildcardDisplay {
    max-width: 400px;
    background-color: #fefee1;
}

    .tipWildcardDisplay td {
        vertical-align: top;
    }

    .tipWildcardDisplay table td:nth-child(1) {
        text-align: center;
    }

/* 
***************************************************************
*/
.cellFlyout {
    display: inline;
    z-index: 99;
    position: absolute;
    float: right;
    margin-top: -3px;
    margin-left: -2px;
}

input.psInputHasError {
    border: solid 1px var(--psColorSchemeWCAG-ColorDark,red);
}

/* psCommon jQuery UI Dialog */
.no-close .ui-dialog-titlebar-close {
    display: none;
}

img.dd-option-image, img.dd-selected-image {
    max-width: 64px;
    max-height: 64px;
    width: 64px;
    height: 64px;
}

img.SKUImage {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
}

div.Ellipsis, a.Ellipsis {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

input.Ellipsis, td.Ellipsis, table.Ellipsis tbody td {
    /* input requires width and td requires max-width for ellipsis to occur*/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*
    HelpItems
*/
.HelpItemDialog {
    margin: 4px;
}

    /* By default the dialog is in edit mode - read elements hidden */
    .HelpItemDialog.EditMode #HelpItemPrev {
        display: none;
    }

    .HelpItemDialog.EditMode #HelpItemNext {
        display: none;
    }

    .HelpItemDialog.EditMode #ImageResultsImg {
        display: none;
    }

    .HelpItemDialog.EditMode #ImageResultsImgDiv {
        display: none;
    }

    .HelpItemDialog.EditMode #StepSubjectRead {
        display: none;
    }

    .HelpItemDialog.ReadMode #HelpTitle {
        display: none;
    }

    .HelpItemDialog.ReadMode .HelpTitle {
        display: none;
    }

    .HelpItemDialog.ReadMode .EditLabels {
        display: none;
    }

    .HelpItemDialog.ReadMode .EditRow {
        display: none;
    }

    .HelpItemDialog.ReadMode #ImageResults {
        display: none;
    }

    .HelpItemDialog.EditMode #HelpTitleDisplay {
        display: none;
    }

    .HelpItemDialog #StepSubjectRead {
        font-size: 12px;
    }

    .HelpItemDialog input {
        min-height: 22px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

.resize_fit_center {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.BAOnly {
    display: none;
}

.BAApp .BAOnly {
    display: inherit;
}

.BAApp td.BAOnly {
    display: table-cell;
}

/* 
********************************************************************************************
    Used by psdvFilterRows
******************************************************************************************** 
*/
#cluetip div.filterRows {
    cursor: pointer;
}

#cluetip div.filterRowsType {
    width: 30px;
    height: 20px;
    border-right: 1px solid gray;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    margin-top: 2px;
}

#cluetip div.filterRows.short div.filterRowsType, #cluetip div.filterRows.short div.filterRowsText {
    height: 5px;
}

#cluetip div.filterRowsText {
    height: 20px;
    display: inline-block;
    padding-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 270px;
    white-space: nowrap;
    vertical-align: bottom;
    margin-top: 2px;
}

/* 
********************************************************************************************
    anchor with imbedded 16px graphic

    All of these should be 16xp with margin bottom 4px
******************************************************************************************** 
*/

span.charSpan {
    display: inline-block;
    padding: 1px 0 4px 21px; /* for 11px fonts */
    position: relative;
    margin-right: 10px; /* gap between multiple action items */
    cursor: pointer;
    color: #0066cc;
    height: 16px;
    width: 16px;
    font-size: 11px; /* specific to this font size */
}

    span.charSpan span {
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        height: 16px; /* scaledown to max of 16 x 16 so we can use 32x32 */
        width: 16px;
    }

th.imgText {
    padding: 4px 0 3px 24px !important; /* for 11px fonts */
    position: relative;
    padding-right: 10px; /* gap between multiple action items */
    font-size: 11px; /* specific to this font size */
    text-align: left !important;
    vertical-align: middle;
}

    th.imgText img {
        position: absolute;
        left: 3px;
        top: 2px;
        max-height: 16px; /* scaledown to max of 16 x 16 so we can use 32x32 */
        max-width: 16px;
    }

label.imgLabel, span.imgLabel {
    display: inline-block;
    padding: 1px 0 0 21px; /* for 11px fonts */
    position: relative;
    margin-right: 10px; /* gap between multiple action items */
    font-size: 11px; /* specific to this font size */
    line-height: 110%;
}

    label.imgLabel img, span.imgLabel img {
        position: absolute;
        left: 0;
        top: 0;
        max-height: 16px; /* scaledown to max of 16 x 16 so we can use 32x32 */
        max-width: 16px;
    }

span.imgSpanNoLink {
    display: inline-block;
    padding: 1px 0 0 21px; /* for 11px fonts */
    position: relative;
    margin-right: 10px; /* gap between multiple action items */
    font-size: 11px; /* specific to this font size */
    line-height: 110%;
    margin-bottom: 7px; /* BD 2018-05-21 stacked imgSpans in Actions column were lying on top of each other ??? span's can't have margin ???*/
}

/* imgSpan fakes the look of a link (aka "a") */
span.imgSpan {
    display: inline-block;
    padding: 1px 0 0 21px; /* for 11px fonts */
    position: relative;
    margin-right: 10px; /* gap between multiple action items */
    cursor: pointer;
    color: #0066cc;
    font-size: 11px; /* specific to this font size */
    line-height: 110%;
    margin-bottom: 7px; /* BD 2018-05-21 stacked imgSpans in Actions column were lying on top of each other */
}

    span.imgSpan img, span.imgSpanNoLink img {
        position: absolute;
        left: 0;
        top: 0;
        max-height: 16px; /* scaledown to max of 16 x 16 so we can use 32x32 */
        max-width: 16px;
    }

a2.imgLink {
    display: inline-block;
    padding: 1px 0 0px 21px; /* for 11px fonts */
    position: relative;
    margin-right: 10px; /* gap between multiple action items */
    height: 18px;
    font-size: 11px; /* specific to this font size */
}

    a2.imgLink img {
        position: absolute;
        left: 0;
        top: 2px;
        max-height: 16px; /* scaledown to max of 16 x 16 so we can use 32x32 */
        max-width: 16px;
    }

div.PageInstructions a:hover {
    text-decoration: underline !important;
}

a.NoImgLink {
    font-size: 11px; /* specific to this font size */
    display: inline-block;
    padding: 1px 2px 0 2px; /* for 11px fonts */
    position: relative;
    margin-left: 26px; /* gap between multiple action items */
    margin-right: 6px; /* gap between multiple action items */
    height: 18px;
    overflow: hidden; /* fixes overlap for text */
}

    a.NoImgLink:hover {
        text-decoration: underline;
    }

a.imgNoLink {
    font-size: 11px; /* specific to this font size */
    display: inline-block;
    padding: 1px 2px 0 2px; /* for 11px fonts */
    position: relative;
    margin-left: 6px; /* gap between multiple action items */
    margin-right: 6px; /* gap between multiple action items */
    height: 18px;
    overflow: hidden; /* fixes overlap for text */
}

    a.imgNoLink:hover {
        text-decoration: underline;
    }

a.imgLink {
    /*
	**	BD 2019-05-10 Replaced the A2 code above
	*/
    font-size: 11px; /* specific to this font size */
    display: inline-block;
    padding: 1px 2px 0 calc(16px + 5px); /* for 11px fonts */
    position: relative;
    margin-left: 6px; /* gap between multiple action items */
    margin-right: 6px; /* gap between multiple action items */
    height: 18px;
    overflow: hidden; /* fixes overlap for text */
}

    a.imgLink:hover {
        text-decoration: underline;
    }

    a.imgLink img {
        position: absolute;
        left: 2px;
        top: 1px;
        max-height: 16px; /* scaledown to max of 16 x 16 so we can use 32x32 */
        max-width: 16px;
    }

a.imgLinkRight {
    /*
	**	BD 2019-05-10 Replaced the A2 code above
	*/
    font-size: 11px; /* specific to this font size */
    display: inline-block;
    padding: 1px calc(16px + 5px) 0px 2px; /* for 11px fonts */
    position: relative;
    margin-left: 6px; /* gap between multiple action items */
    margin-right: 6px; /* gap between multiple action items */
    height: 18px;
    overflow: hidden; /* fixes overlap for text */
}

    a.imgLinkRight:hover {
        text-decoration: underline;
    }

    a.imgLinkRight img {
        position: absolute;
        right: 2px;
        top: 1px;
        max-height: 16px; /* scaledown to max of 16 x 16 so we can use 32x32 */
        max-width: 16px;
    }

    a.imgLink.imgLinkButton, a.imgLinkRight.imgLinkButton, a.imgNoLink.imgLinkButton {
        border: 1px solid rgba(10, 10, 235,.15);
        border-radius: 4px;
        background-color: rgba(225, 225, 225, 0.35);
        padding-top: 2px;
    }

li2.imgTab a {
    display: inline-block;
    padding: 1px 0 0 21px; /* for 11px fonts */
    position: relative;
    margin-right: 10px; /* gap between multiple action items */
}

    li2.imgTab a img {
        position: absolute;
        left: 0;
        top: 0;
        max-height: 16px; /* scaledown to max of 16 x 16 so we can use 32x32 */
        max-width: 16px;
    }

/*
    *******************************************************************************************
        B U T T O N S
    *******************************************************************************************
*/

button:not(.psEditor), 
input[type=button], 
input[type=submit], 
div.modalPanel div.ui-dialog-buttonpane button {
    border: solid 1px gray;
    background-color: #faffc2;
    padding: 3px 6px;
    margin: 5px 5px 5px 5px;
    cursor: pointer;
    min-height: 26px; /* same as imgButton */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 3px 3px 3px #aaaaaa;
    background-image: none !important; /* BD 2017-07-21 */
}

    button:not(.psEditor,.psLoginButton,#LoginButton):hover, /* BT: dont apply this to Login page (psWeb) */
    input[type=button]:hover, 
    input[type=submit]:hover, 
    div.modalPanel div.ui-dialog-buttonpane button:hover {
        border-color: orange;
    }

button[disabled] {
    opacity: 0.5;
}

    button[disabled]:not(.psEditor), 
    input[type=button][disabled], 
    input[type=submit][disabled], 
    div.modalPanel div.ui-dialog-buttonpane button[disabled] {
        border: solid 1px #000;
        background-color: #eee;
    }

button.inline {
    padding: 0 3px;
    margin: 0 5px;
    /* adjust margin to make it higher since shadown makes it look lower */
    min-height: 18px;
}

div.button {
    border: solid 1px green;
    background-color: #faffc2;
    padding: 2px 5px;
    width: 90px;
    float: right;
    min-height: 26px; /* same as imgButton */
}

    div.button img {
        /* float: left;     margin-top: 2px; BD 2016-10-31 */
        position: absolute;
        left: 5px;
        top: 4px;
        max-height: 16px;
        max-width: 16px;
    }

button.imgButton, button.imgButtonLess {
    min-height: 26px; /* needs to be min-height, not height, to override common.css settings */
    padding: 0 5px 0 24px;
    behavior: none;
    position: relative;
}

button.imgButtonLess {
    padding: 0 5px 0 5px;
}

button.imgButton {
    padding: 0 5px 0 24px;
    text-align: left; /* BD 2017-01-19 */
}

    button.imgButton img {
        position: absolute;
        left: 5px;
        top: 4px;
        max-height: 16px;
        max-width: 16px;
    }
/*
    *** Tiny MCE *** This undoes what adding :not(.psEditor) did to the buttons above. It changed to binding to be more specific. TinyMCE is a short timer so this change it just to get by for now.
*/

div.mce-container-body button {
    background-color: transparent;
    border: none;
    padding: 1px 5px 1px 5px;
    margin: 0;
}

/*
**  The following will need to be tweaked -- use imgButton for best res
*/
button img, input[type=button] img, input[type=submit] img {
    vertical-align: middle; /* padding-bottom: 2px; */
    margin-right: 3px;
}

/* 
********************************************************************************************
    For Use with jQuery.psUtils.js popMenu extension.

    UL be default is a single click selection return N
    UL can be .Multi returns CSV of selections

******************************************************************************************** 
*/
.popMenu {
    position: relative;
}
    /*
.popMenu:nth-child(n+1) 
{
    margin-left:10px;
}
*/
    .popMenu > ul p {
        font-weight: bold; /* optional caption */
    }

    .popMenu > ul button {
        float: right; /* optional caption */
    }

    .popMenu > ul {
        display: none;
        position: absolute;
        left: -20px;
        top: -20px; /* z-index: 10001; plugged. i.e. not thunk out */
        z-index: 2002; /* same as psTooltip */
        min-width: 100px;
        margin: 0;
        padding: 10px;
        list-style: none;
        background: #fff;
        color: #333;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 0 5px #999;
        -webkit-box-shadow: 0 0 5px #999;
        box-shadow: 0 0 5px #999;
    }

        .popMenu > ul li {
            padding: 5px;
            border-bottom: solid 1px #ccc;
            list-style-type: none;
            list-style-position: outside;
        }
        /* .popMenu > ul:not(.Multi) li */
        .popMenu > ul li {
            cursor: pointer;
        }

        .popMenu > ul:not(.Multi) li:hover {
            background: #EC6603;
            color: #fff;
        }

        .popMenu > ul li:last-child {
            border: none;
        }

div .apSectionContent .popMenu > ul {
    left: -45px;
    top: auto;
}

.mce-toolbar button, .mce-close {
    box-shadow: none; /* override button dropshadow on all PSI buttons */
}

/* 
************************************************************************ 
    Dragbox - Usage on Dashboards

    Very similar to .SectionBlock
************************************************************************ 
*/
.dragbox {
    margin: 5px 5px 0 0;
    position: relative; /* border: solid 1px #efba8f;  BD Disabled for PIE*/ /* display: inline-block;  bd 2015-07-25 each widget had diff width and it looked wrong in FBS */
    vertical-align: top;
}

.dragbox-header {
    /* override the following in ColorSchemeStatic.css  ??? */
    background-color: var(--psColorSchemeWCAG-BGLight,#E1E1E1); /*               rounding               */
    border: solid 1px grey; /* -webkit-border-radius: 10px; */
    /*    -moz-border-top-left-radius: 5px;
    -moz-border-top-right-radius: 5px;*/
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: none;
    font-weight: bold;
    height: 18px;
    padding: 2px 0 6px 5px; /* Text */
}

.dragbox-content {
    background: #fff;
    min-height: 20px;
    padding: 2px; /* rounding */
    border: 1px solid grey; /* -webkit-border-radius: 5px; */
    /*    -moz-border-bottom-left-radius: 5px;
    -moz-border-bottom-right-radius: 5px;*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
}

.dragbox > div {
}

.dragbox h4 {
    margin: 0; /* font-size: 12px; BD 2016-07-14 */
    padding: 4px;
    color: #8b0000;
    font-weight: bold;
    cursor: move;
    padding-bottom: 4px;
}
/* ************************************************************************ */

/*  
**  Better Way than .Action
*/
.dragbox-header > label {
    position: relative;
    top: 3px;
    bottom: 3px;
    color: #8B0000;
}

.dragbox-header > h2 {
    position: relative;
    display: inline;
    color: #8B0000;
}


.dragbox .HeaderBlock /* NonPrintable */ {
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    margin: 0px;
    padding: 3px 10px 0 10px;
    float: right;
    height: 18px;
    bottom: 0;
    border: 0;
    display: inline-block;
}

    .dragbox .HeaderBlock label {
        top: 1px;
    }

    .dragbox .HeaderBlock:hover {
        background-color: #f1f1f1;
    }

    .dragbox .HeaderBlock img {
        vertical-align: middle;
        margin-right: 2px;
    }

    .dragbox .HeaderBlock span.Text {
        text-decoration: underline;
    }

    .dragbox .HeaderBlock input[type=checkbox] {
        vertical-align: top;
    }

.dragbox h4.collapse {
    background: #f0f0f0 no-repeat top right;
}

.dragbox h4 .configure {
    cursor: pointer; /* font-size: 12px; BD 2016-07-14 */
    font-weight: bold;
    margin-right: 6px;
    float: right;
}

.dragbox .minimize {
    padding-top: 10px;
}

.dragbox .close {
    padding-top: 4px;
}

.ui-draggable-helper {
    border: 1px dotted #000;
    padding: 6px;
    background: #fff;
    font-size: 1.2em;
}

select optgroup {
    font-weight: bold; /* BD added 2020-09-16 */
}

/* 
** Displayed During Time Intensive Operations
** From http://stackoverflow.com/questions/807408/showing-loading-animation-in-center-of-page-while-making-a-call-to-action-method
*/
#ProgressSpinner {
    display: none;
    width: 100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    background: url(/Static/Images/Loading04.gif) no-repeat center;
    background-color: transparent;
    border: none;
    text-align: center;
    padding: 10px; /* font: normal 16px Tahoma, Geneva, sans-serif; */
    margin-left: -60px; /* BT 2025-05-21: was -50px; spinner was misaligned by 10px down+right due to margin not accounting for the 10px padding */
    margin-top: -60px;  /* ^ */
    z-index: 2010; /* BD 2019-10-04 was 1999 */
    overflow: auto;
}

/* 
********************************************************************************************
    psEditDialog TABS
******************************************************************************************** 
*/
div.psEditDialogTabHeading {
    padding: 0px;
    position: relative;
    background-color: transparent;
    border-left: none;
    border-right: none;
    border-top-color: transparent;
    border-bottom: none;
}

ul.psEditDialogTabList {
    background: none;
    border-radius: 0;
    background-color: transparent;
    border-left: none;
    border-top-color: transparent;
    border-right: none;
    border-bottom: none;
}

    ul.psEditDialogTabList li {
        height: 26px; /* sized for graphic image */
    }

    ul.psEditDialogTabList img {
        position: absolute;
        max-width: 16px;
        max-height: 16px;
    }

/* 
********************************************************************************************
    Quill Override
******************************************************************************************** 
*/
.ql-container {
    font-size: 11px !important;
}

.ql-editor {
    padding: 6px !important;
}

.ql-toolbar {
    zoom: 0.8 !important;
}

/* 
********************************************************************************************
    End
******************************************************************************************** 
*/
