/*
    psUtils.Dialog.js.css
      AKA psUtils.Dialog.css
*/

/*-----------------------------------------------------------------------------------------
  Modal content for Dialogs
-----------------------------------------------------------------------------------------*/

.modalContent /* class used by form.modalContent and div.modalContent */ {
    padding: 10px !important;
    margin: 0 !important; /* p margin-bottom was causing 1em below */
    border: 1px solid #d3d3d3 !important;
    border-top: none !important;
    position: relative;
    overflow: visible !important; /* allows autocompletes to work  */
}

    .modalContent.psDialogResize {
        overflow: auto !important; /* require for forms that are resizeable but won't work with auto-complete which needs overflow:visible */
    }

    .modalContent.psDialog div,
    .modalContent.psDialog div.psFieldset > div,
    .modalContent.psDialog div[data-role='fieldcontain'] {
        margin-top: 6px;
    }

        .modalContent.psDialog div > label,
        .modalContent.psDialog div.psFieldset > div > label,
        .modalContent.psDialog div[data-role='fieldcontain'] > label {
            display: inline-block;
            text-align: right;
        }

        .modalContent.psDialog div.top > * {
            vertical-align: top;
        }

        .modalContent.psDialog div.psFieldset { /* Pseudo-fieldset wrapper class for grouping like fields together */
            position: relative;
            border: 1px solid #d7d7d7;
            border-radius: 1px;
            padding: 8px;
        }

            .modalContent.psDialog div.psFieldset > span.psFieldsetTitle {
                position: absolute;
                top: -8px;
                padding-bottom: 5px;
                background-color: white;
                font-style: italic;
                user-select: none;
                font-size: 10px;
            }

    .modalContent.psDialog label[title]:not(:focus)::after,
    .modalContent.psDialog label[data-ps-title]:not(:focus)::after {
        /* content: "\2754";  ? symbol */
        content: "\1F6C8"; /* (i) not redudant with ? on checkbox labels */
        opacity: 1.0;
        font-size: 8px;
        vertical-align: super;
    }

    .modalContent.psDialog input[required], .modalContent.psDialog select[required], .modalContent.psDialog textarea[required] {
        border-top: 2px solid blue;
    }

    /*
        spacing bugfixes caused by Common.css
    */
    .modalContent.psDialog div input[type=radio] {
        margin-left: 4px !important;
    }

    .modalContent.psDialog div input[data-ps-behavior="(psAcEX)"],
    .modalContent.psDialog div select {
        margin-left: 2px !important;
    }

    .modalContent.psDialog div.psFieldset div input[data-ps-behavior="(psAcEX)"],
    .modalContent.psDialog div.psFieldset div select {
        margin-left: 4px !important;
    }

.modalButtonPane {
    margin-top: 0 !important; /* override bizarre 0.5em jQuery UI default */
    padding: 0.3em !important;
    border: 1px solid #d3d3d3 !important; /* set border for all sides and then turn off top border */
    border-top: none !important;
    height: 35px;
}

.left {
    text-align: left !important;
}

.center {
    text-align: center !important;
}

.right {
    text-align: right !important;
}

input.Ellipsis, td.Ellipsis {
    /* input requires width and td requires width -AND- max-width for ellipsis to occur*/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*-----------------------------------------------------------------------------------------
  Dialog Controls
-----------------------------------------------------------------------------------------*/

.psTimeOnly, input.psTimeOnly {
    width: 80px; /* Official BD 2016-07-14 */
    text-align: left !important; /* keep it left aligned so it doesn't bounce around when you click in it */
}

.psDateOnly, input.psDateOnly {
    width: 94px; /* Official BD 2016-07-14 */ /* needs room for "mm-dd-yyyy X" as dispay in IE with X=clear button */
}

input.psDateOnly {
    text-align: left !important; /* keep it left aligned so it doesn't bounce around when you click in it */
}

.psDate_Time {
    width: 158px; /* Official BD 2016-07-14  MM-DD-YY  HH:MM */
}

.psDate_TimeSS {
    width: 179px; /* 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;
}

.psQuantity /* large enough to show ##,###,###0.000 */ {
    width: 100px;
    text-align: right !important;
}

.psCurrency0 /* large enough to show $ ##,###,###0 */ {
    width: 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: 80px;
    text-align: right !important;
}

td.psCurrency0, th.psCurrency0 /* large enough to show $ ##,###,###0 */ td.psNoCurrency0, th.psNoCurrency0 /* large enough to show $ ##,###,###0 */ {
    min-width: 80px;
}

.psCurrency /* large enough to show $ ##,###,###0.00 */ {
    width: 100px;
    text-align: right !important;
    white-space: nowrap;
}

.psUnitPrice /* #,##0.000 */ {
    width: 110px; /* large enough to show $ ##,###,##0.000 */
    text-align: right !important;
    white-space: nowrap;
}

.psInteger /* #,##0 */ {
    width: 80px; /* large enough to show ##,###,##0 8ch */
    text-align: right !important;
}

.psIntegerShort /* large enough to show ###,##0 */ {
    width: 65px;
    text-align: right !important;
}

.psNumber {
    width: 100px;
    text-align: right !important;
}

.psRefNum {
    text-align: right !important;
}

.psFloat {
    text-align: right !important;
}

.psBit {
    text-align: center;
}

.psDateOnly input /* WTH does this mean? TD with input field ? BD 2016-07-14 */ {
    /* width: 70px; */
    width: 91px; /* /* Official BD 2016-07-14 */
}

.psPhone {
    width: 110px !important;
}

.psZIP {
    width: 100px !important;
}

.psEditLabel {
    text-align: right;
}