/* Default CSS Stylesheet for a new Web Application project */

BODY {
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .66em;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
}

textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;
}

H1, H2, H3, H4, H5, TH, THEAD, TFOOT {
    color: #003366;
}

H1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
}

H2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.75em;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
}

H3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.58em;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
}

H4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.33em;
    font-weight: 500;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
}

H5, DT {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
}

H6 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
}

TFOOT, THEAD {
    font-size: 1em;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    font-family: Arial, Helvetica, sans-serif;
}

TH {
    vertical-align: baseline;
    font-size: 1em;
    font-weight: bold;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    font-family: Arial, Helvetica, sans-serif;
}

.detail {
    color: black;
}

    .detail TH {
        background-color: #336699;
        color: #FFFFFF;
        font-weight: bold;
    }

        .detail TH A {
            vertical-align: middle;
            text-align: center;
            color: white;
            font-size: x-small;
        }

A:link {
    text-decoration: none;
    color: #336699;
}

A:visited {
    text-decoration: none;
    color: #336699;
}

A:active {
    text-decoration: none;
    color: #336699;
}

A:hover {
    text-decoration: underline;
    color: #336699;
}

SMALL {
    font-size: .7em;
}

BIG {
    font-size: 1.17em;
}

BIGBOLD {
    font-size: 1.17em;
    font-weight: bold;
}

BLOCKQUOTE, PRE {
    font-family: Courier New, monospace;
}

UL LI LI {
    list-style-type: disc;
}

    UL LI LI LI {
        list-style-type: circle;
    }

OL LI {
    list-style-type: decimal;
}

OL OL LI {
    list-style-type: lower-alpha;
}

OL OL OL LI {
    list-style-type: lower-roman;
}

IMG {
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
    border: 0px;
}

TABLE {
    font-size: 1em;
}

SELECT {
    height: 20px;
    padding: 0px;
    font-size: 11px;
    line-height: 20px;
    color: #000;
    vertical-align: middle;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border: 1px solid #aaa;
}


    select:disabled {
        color: #ccc;
    }

OPTION {
    font-size: 1em;
}

INPUT {
    font-size: 1em;
}


.colorAccent1 {
    color: #336699;
}

.colorAccent2 {
    color: #e7e0ca;
}

.colorAccent3 {
    color: #ece6ce;
}

.colorAccent4 {
    color: #401921;
}

.colorAccent5 {
    color: #ef6c15;
}

.colorAccentBright {
    color: #f8a32b
}

.strongAccent {
    font-weight: bold;
}

.rowSelected {
    background-color: #e1dca0 !important;
    cursor: pointer;
}

.rowHighlight {
    background-color: #FCF8CB !important;
    cursor: pointer;
}

.hoverHand {
    cursor: pointer;
}

.backgroundAccent1 {
    background-color: #336699;
}

.backgroundAccent2 {
    background-color: #e7e0ca;
}

.backgroundAccent3 {
    background-color: #ece6ce;
}

.backgroundAccent4 {
    background-color: #fff9eb;
}

.backgroundAccent5 {
    background-color: #e5fbfc;
}

.backgroundAccent6 {
    background-color: #deeae0;
}

.colorAccentSubtle {
    color: gray;
}

.colorAccentWarning {
    color: red;
}


.listStandardHeader {
    background-color: #336699;
    color: #FFFFFF !important;
    font-weight: bold;
}

    .listStandardHeader th {
        background-color: #336699;
        color: #FFFFFF;
        font-weight: bold;
    }

        .listStandardHeader th a {
            background-color: #336699;
            color: #FFFFFF;
            font-weight: bold;
        }

            .listStandardHeader th a:visited {
                background-color: #336699;
                color: #FFFFFF;
                font-weight: bold;
            }

            .listStandardHeader th a:hover {
                background-color: #336699;
                color: #FFFFFF;
                font-weight: bold;
                text-decoration: underline;
            }

    /* This makes the header stick to the top of the viewport when scrolling */
    .listStandardHeader.sticky {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

.listStandardAlternatingItem {
    background-color: #eeeeee;
}

.listStandardFooter {
    color: #000066;
    background-color: #ffffff;
}

.listStandardHighlight {
    background-color: #ffffd3;
}

.listStandardAlternatingHighlight {
    background-color: #f4f5c8;
}

.tabGroup {
}


.tabRegular {
    background-color: #eeeeee;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    padding: 5px;
}

.tabSelected {
    background-color: #336699;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    color: White;
    padding: 5px;
}

.audit {
    font-size: 8pt;
    color: #999999;
}

.disabledImage {
    opacity: 0.25;
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
}

#rightFeedback {
    float: right;
    border: 1px solid gray;
    background-color: #e7e0ca;
    padding: 3px;
}

/*Modal Popup*/
.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}


.sidePaddingEmailBankStatement {
    width: 99%;
    padding-left: 10px;
    padding-right: 10px;
}


.sidePadding {
    padding-left: 10px;
    padding-right: 10px;
}

.tanModal {
    border-style: solid;
    border-color: Gray;
    border-width: 1px;
    text-align: left;
    background-color: #fbf7e7;
}

.tanModalHeader {
    background-color: #ded8c2;
    text-align: left;
    font-size: 12px;
    padding: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}

.tanModalBody {
    padding: 5px;
}

.grayModal {
    background: #ffffff;
    border: 1px solid gray;
    width: 500px;
    text-align: left;
}

.grayModalHeader {
    padding-right: 3px;
    padding-left: 3px;
    background: #eeeeee;
    padding-bottom: 3px;
    padding-top: 3px;
    font-size: 12pt;
    color: #336699;
    cursor: pointer;
}

.grayModalBody {
    padding: 5px;
}


/* Two column approach, split in half */
.twoColumnOne {
    float: left;
    width: 50%;
}

.twoColumnTwo {
    float: right;
    width: 50%;
}

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

/* Simple css formatting */
.textRight {
    text-align: right;
}

.textLeft {
    text-align: left;
}

.textCenter {
    text-align: center;
}

.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}


.clearBoth {
    clear: both;
}

.reportHeader {
    text-align: center;
    font-size: 1.5em;
    clear: both;
}

.reportSubheader {
    text-align: left;
    font-size: 1.2em;
    clear: both;
    border-bottom: 1px solid #dddddd;
    background-image: url(images/bannerbackground.gif);
    background-position: 1024px 0px;
}

.noWrap {
    white-space: nowrap;
}

/* The menu item itself */
.navMenu {
    font-family: Arial;
    background-color: #eeeeee;
}


.navMenuMain {
    font-family: Arial;
    margin-top: 0px;
    display: none;
}


/* Hover */
.navMenu a:hover {
    background-color: #dddddd;
}

.navMenu li:hover {
    background-color: #dddddd;
}

/* Individual menu item (static) */
.navMenuItemStatic {
    font-family: Arial;
    color: #336699;
    background-color: #eeeeee;
    display: block;
}

/* Individual menu item (dynamic) */
.navMenuItem {
    font-family: Arial;
    color: #336699;
    background-color: #eeeeee;
    border-bottom: 1px solid #f8f8f8;
}

/* Individual menu item (when hovering) */
.navHover {
    background: #336699;
}

.navHoverDyn {
    background: #336699;
}

.navMenu li {
    list-style-type: none;
}

.schoolNavCenterAlign {
    text-align: center;
    padding-left: auto;
    padding-right: auto;
    width: 80px;
}

.schoolNavMaster {
    float: right;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    margin-bottom: 3px;
}

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

.fixedDialog {
    z-index: 100100;
    height: 100px;
    width: 200px;
    border: 1px solid gray;
    background-color: #eeeeee;
    text-align: center;
}

.thinBottomBorder {
    border-bottom: 1px solid gray;
}

.marginRight5 {
    margin-right: 5px;
}

.largeFont {
    font-size: 12px;
}

.noMargin {
    margin: 0px;
}

.bigText {
    font-size: 18px;
}

.mediumText {
    font-size: 14px;
}

.actionMargin {
    margin: 10px;
    margin-right: 40px;
}

.actionLinks {
    margin-left: 20px;
    font-size: 12px;
}

    .actionLinks a {
        display: inline-block;
        padding-bottom: 10px;
    }

.contactCloseButton {
    float: right;
}

.headerEntityName {
    font-size: 18px;
    color: #336699;
}

.headerProcessorLogo {
    margin-left: 0px;
}

.contactElement {
    margin: 5px 0px 5px 10px;
}

    .contactElement > img {
        margin: 0px 2px 0px 0px;
        vertical-align: middle;
    }

.imageBullet {
    margin: 0px 2px 0px 0px;
}

.contactScroll {
    border-top: 1px solid gray;
    overflow: auto;
    max-height: 300px;
}

.modalNarrow {
    width: 300px;
}

.contactType {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
}

.contactTypeSeparator {
    border-top: 1px dashed gray;
    margin-top: 10px;
    padding-top: 10px;
}

.noCurrentContacts {
    background-color: #eeeeee;
    text-align: center;
    padding: 15px;
    border: 1px dashed #cccccc;
    vertical-align: middle;
    color: #555555;
}

.collapseColumn {
    display: none;
}

.boxGradient {
    background-color: #f8f8f8;
    background: -webkit-gradient(linear, left top, right bottom, from(#f9f9f9), to(#f0f0f0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0', gradientType='1');
    padding: 15px 0px 15px 0px;
}

    /* IE fix to ensure anti-aliasing in gradient container */
    .boxGradient > div {
        position: relative;
    }

.required {
    background-color: #FCF8CB;
}

.billTypeDistributor {
    background-color: #676665;
    padding: 3px;
}

.billTypeManufacturer {
    background-color: #5a8664;
    padding: 3px;
}

.archiveBackground {
    /* Source: http://subtlepatterns.com/ */
    background-image: url('images/archivebg.png');
}

    /* Apply italics and grayed out text to certain child elements */
    .archiveBackground td, .archiveBackground > * > select, .archiveBackground > * > input {
        font-style: italic;
        color: #777777 !important;
    }

    /* Exempt the bank context menu from this styling  */
    .archiveBackground > td .bank-context-menu, .archiveBackground .data-action {
        font-style: normal;
    }

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    border: 1px solid #aaa;
}

.headerManufacturerName {
    font-size: 16px;
    font-weight: bold;
    color: #336699;
}

.fullWidth {
    width: 100%;
}

.emptyData {
    text-align: center;
    height: 100px;
    border: 1px solid gray;
    width: 100%;
    background-color: #eee;
}

    .emptyData .notice {
        margin-top: 25px;
        font-weight: bold;
    }

    .emptyData .notice {
        font-weight: bold;
    }

.callSection {
    color: #111;
    font-size: 14px;
    cursor: pointer;
    padding-top: 0px;
}

    .callSection img {
        margin: -3px 2px 0px 0px;
        padding: 0px;
    }

#tblShadow {
    border-top: 1px solid #ccc;
}

.colorAccentAccept {
    color: #009900;
}

a.colorAccentAccept:link {
    color: #009900;
}

a.colorAccentAccept:visited {
    color: #009900;
}

.colorAccentCancel {
    color: #990000;
}

a.colorAccentCancel:link {
    color: #990000;
}

a.colorAccentCancel:visited {
    color: #990000;
}

/* Apply the font-size class to elements to revert font size to the normal bootstrap size (as opposed to smaller PL font) */
.bs-font-size {
    font-size: 14px;
}

h4.bs-font-size {
    font-size: 17.5px;
}

/* Animating expanding columns */
.expandableColumn {
    max-width: 0px;
    overflow: hidden;
    transition: 1s;
    white-space: nowrap;
}

    .expandableColumn.show {
        max-width: 200px;
    }

.expandableColumnContainer {
    display: none;
}


.tour-hero {
    font-family: Arial;
    font-size: 14px;
    background-color: #f5f5f5;
    color: #222222;
    padding: 25px;
    border-radius: 3px;
    width: 370px;
    margin: 5px auto 5px auto;
    border: 1px solid #d5d5d5;
}

.tour-button {
    background-color: #336699;
    color: #eeeeee;
    padding: 13px;
    margin-left: 5px;
    border-radius: 100px;
    cursor: pointer;
}

    .tour-button:hover {
        background-color: #4477aa;
    }

/* New Menu */
.fidelis-menu {
    clear: both;
    height: 35px;
    border: 1px solid #dfdfdf;
    background: #eee;
    font-size: 13px;
}

    /* Ensure menu is always on top */
    .fidelis-menu * {
        z-index: 10000;
    }

    /* Remove list style decoration */
    .fidelis-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: absolute;
    }

    /* Align menu items left to right and style them */
    .fidelis-menu li {
        display: inline-block;
        float: left;
        margin-right: 1px;
        min-width: 150px;
        height: 35px;
        line-height: 35px;
        color: #2f3036;
    }

        /* Set link style */
        .fidelis-menu li a {
            display: block;
            text-decoration: none;
            color: #2f3036;
        }

    /* Bold the top level menu items */
    .fidelis-menu > ul > li > a {
        font-weight: bold;
    }

    /* Center the top level menu items */
    .fidelis-menu > ul > li {
        text-align: center;
    }

        .fidelis-menu > ul > li > ul {
            text-align: left;
        }

        /* Hover for top level menu items */
        .fidelis-menu > ul > li:hover > a, .fidelis-menu > ul > li:hover > a > svg {
            background: #336699;
            color: #eee;
        }

    /* Hide the sub-menu items by default  */
    .fidelis-menu li ul {
        display: none;
    }

        /* Add padding to div elements within sub-menu items and enable side by side items */
        .fidelis-menu li ul li > div {
            margin-top: 1px;
            min-width: 150px;
            background: #eee;
            box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
            float: none;
            line-height: 20px !important;
            display: table;
        }

        /* Add some spacing around sub-menu items */
        .fidelis-menu li ul li a {
            width: auto;
            padding: 10px 5px;
            white-space: nowrap;
        }

            /* Hover for the sub-menu items */
            .fidelis-menu li ul li a:hover {
                background: #ddd;
            }


    .fidelis-menu svg {
        color: #336699;
        font-size: 20px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .fidelis-menu .links {
        display: table-cell;
    }

        .fidelis-menu .links h4 {
            white-space: nowrap;
            margin-right: 40px;
        }

/* For smaller viewport widths decrease the spacing between menu items */
@media (max-width: 1060px) {
    .fidelis-menu li {
        min-width: 110px;
    }
}

/* Display sub menu items when hovering on a top level menu */
.fidelis-menu ul li a:hover + .submenu, .fidelis-menu .submenu:hover {
    display: block;
}

.fidelis-menu ul.submenu > li > div.pin-right {
    position: fixed;
    right: 0px;
}

.schoolContactControl {
    font-size: 14px;
}


/* School View Customer Selection Modal */
#panCustomerSelection {
    font-size: 14px;
}

    #panCustomerSelection .tanModal {
        width: 450px;
    }

    #panCustomerSelection .tanModalHeader {
        font-size: 14px;
        font-weight: bold;
    }

    #panCustomerSelection select, #panCustomerSelection input[type=text] {
        font-size: 14px;
        border-radius: 3px;
        padding: 3px;
        height: auto;
        width: auto;
        margin-bottom: 5px;
        margin-left: 3px;
    }

        #panCustomerSelection input[type=text].ui-autocomplete-input {
            width: 300px;
        }

    #panCustomerSelection .form-horizontal .controls {
        margin-left: 110px;
    }

    #panCustomerSelection .form-horizontal .control-label {
        width: 100px;
    }

    #panCustomerSelection .form-horizontal .control-group {
        margin-bottom: 10px;
    }


/* Ensure that modal dialogs appear over the menu */
.modal {
    z-index: 10010 !important;
}

/* Sort labels for Fidelis.GridView tri-state sorting */
.sort-ascending a:after {
    content: '\0020\25B2';
}

.sort-descending a:after {
    content: '\0020\25BC';
}


/* Vertical column striping (note that the "archive background" rows are not styled) */
*:not(.archiveBackground):not(.SuspendedProduct) > .DarkColumn {
    background-color: #e9e9e9;
    border-color: #cbcbcb !important; /* This doesn't style the left border when borders are collapsed. A function like this may need to be run: $j("td.DarkColumn").each(function () {$j(this).prev().css("border-right", "none");}); */
}

tr.listStandardAlternatingItem:not(.archiveBackground):not(.SuspendedProduct) td.DarkColumn {
    background-color: #d5d5d5;
}

.clickable, .clickable * {
    cursor: pointer;
}

/* Skeleton formatting */
.skeleton-loader {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skeleton-box {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    height: 20px;
    animation: shimmer 2s infinite linear;
    flex-grow: 0;
    flex-shrink: 0;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.flex-container {
    display: flex;
    gap: 10px;
}


/* Ensure Autocomplete results are on top */
.ui-autocomplete {
    z-index: 999999 !important;
}


/* For the SimpleHeader, ensure that items are floated properly, even if Bootstrap is not included on page */
.persistent-menu .pull-left {
    float: left;
}

.persistent-menu .pull-right {
    float: right;
}