root {
    display: block;
}

/*All links should be black*/
a,
a:visited {
    color: #313131;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgb(220, 220, 220);
    font-family: Verdana, sans-serif;
    font-size: 65%;
}

.ui-widget,
.ui-widget-header,
.ui-widget-content,
.ui-widget-header .ui-widget-header,
.ui-widget-content .ui-widget-content,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-size: 1em;
}

.ui-datepicker-today {
    background: red;
}

ul.ui-menu-child {
    white-space: nowrap;
    width: auto !important;
    color: red;
}

.ui-menuitem {
    color: red;
}

.ui-breadcrumb li {
    text-indent: 2px;
    text-align: right;
}

.ui-breadcrumb-menuitem-icon{
}
a.ui-breadcrumb-menuitem-icon::before {
    content: "";
    font-family: "primeicons" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: flex;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0 !important;
    background-image: none !important;
    margin: 0 0.5rem 0 0.5rem;
    color: #495057;
    float: left;
}

#container {
    margin: 0 auto;
    padding: 0 20px 10px 20px;
    border: 0 none;
    background: #ffffff;
    padding-top: 10px;
}

#login-container {
    margin: auto;
    padding: 35px 20px 10px 20px;
    border: 1px solid #666666;
    width: 60%;
    /* subtract 40px from banner width for padding */
    background: #FFFFFF;
}

#footer {
    clear: both;
    text-align: center;
    color: #666666;
    font-size: 0.85em;
}

/* GLOBAL STYLES BEGIN. These apply to all components. Maybe once we have our own theme they can be put in there. */

/* Makes the fonts smaller. Not using the exact style from the primefaces page as it makes text smaller every time you nest */
/*.ui-widget {
    font-size: 75%;
}*/

/*.ui-widget .ui-widget {
    font-size: 100%;
 }*/

/* This makes the disabled text not quite so transparent */
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .60 !important;
    filter: Alpha(Opacity=60) !important;
}

/* Not sure where the original grey for the text field comes from, but was very light */
textarea[disabled],
input[type="text"][disabled],
input[type="password"][disabled],
select[disabled] {
    color: #313131 !important;
    cursor: default;
}

/* Reducing the drop-shadow of the input field from 2px to 1px. Also made it lighter */
.ui-inputfield,
.ui-widget-content .ui-inputfield,
.ui-widget-header .ui-inputfield {
    -moz-box-shadow: inset 0 1px 1px #b0b0b0;
    -webkit-box-shadow: inset 0 1px 1px #b0b0b0;
    box-shadow: inset 0 1px 1px #b0b0b0;
}

/* This was 32px for some reason. Makes it looks really wide */
.ui-splitbutton .ui-button.ui-splitbutton-menubutton {
    width: 26px !important;
}

/* Make the required * more visible */
.ui-outputlabel-rfi {
    color: red;
    font-weight: bold;
}

.ui-inputText.required {
    border: 1px solid red;
}

/* GLOBAL STYLES END. */

/* Need space for the button */
.calendar-full-width input {
    width: 16em;
}

.calendar-full-fixed-treasury-width input {
    width: 19em;
}

.calendar-full-width-pt input {
    width: 82% !important;
}

.spinner-full-width .ui-spinner {
    width: 100% !important;
}

/* So the droplists fill up the space */
/*
.ui-selectonemenu {
    width: 100% !important;
}

.ui-selectonemenu-label {
    width: 100% !important;
}
*/

/* If you want to display a table without column headers */
.datatable-noheader.ui-datatable table thead {
    display: none;
}

/* When using a toolbar for a row of buttons. Remove the border and the background shading */
.toolbar-no-border {
    border: none !important;
    background: none !important;
}

/* TODO. Remove, the name is too generic */
.panelGrid tr,
.panelGrid td {
    border: none !important;
}

/* For the panelGrid, to remove the border. Also give slightly more spacing */
.panelGrid-no-border tr,
.panelGrid-no-border td {
    border: none !important;
    padding-bottom: 7px !important;
}

.panelGrid-no-border {
    border: 0 !important;
    width: 100%;
}

.ui-noborder {
    border: 0 !important;
    width: 100%;
}

.picklist-wide .ui-picklist-list {
    width: 400px;
}

.bold {
    font-weight: bold;
}

.no-border {
    border: none;
}

.kpi-tab {
    border: none;
    text-align: center;
}

.no-background{
    background: none !important;}

.direct-invoice-icon {
    background-image: url("/resources/gfx/tree_directInvoice.png");
}

.indirect-invoice-icon {
    background-image: url("/resources/gfx/tree_indirectInvoice.png");
}

.consignment-icon {
    background-image: url('/resources/gfx/tree_consignment.png') !important;
}

.icon-shipment-sm {
    background-image: url(/tradecloud/resources/gfx/tree_shipment_sm.png) !important;
}

.icon-shipment {
    background-image: url(/tradecloud/resources/gfx/tree_shipment.png) !important;
}

.icon-consignment-sm {
    background-image: url(/tradecloud/resources/gfx/tree_consignment_sm.png) !important;
}

.icon-consignment {
    background-image: url(/tradecloud/resources/gfx/tree_consignment.png) !important;
}

.icon-order-sm {
    background-image: url(/tradecloud/resources/gfx/tree_order_sm.png) !important;
}

.icon-order {
    background-image: url(/tradecloud/resources/gfx/tree_order.png) !important;
}

.icon-item-sm {
    background-image: url(/tradecloud/resources/gfx/tree_item_sm.png) !important;
}

.icon-item {
    background-image: url(/tradecloud/resources/gfx/tree_item.png) !important;
}

.icon-direct-invoice-sm {
    background-image: url(/tradecloud/resources/gfx/tree_direct_invoice_sm.png) !important;
}

.icon-direct-invoice {
    background-image: url(/tradecloud/resources/gfx/tree_direct_invoice.png) !important;
}

.icon-indirect-invoice-sm {
    background-image: url(/tradecloud/resources/gfx/tree_indirect_invoice_sm.png) !important;
}

.icon-indirect-invoice {
    background-image: url(/tradecloud/resources/gfx/tree_indirect_invoice.png) !important;
}

td.align-right,
.plannedsettlement-row td,
.ui-treetable tfoot td {
    text-align: right !important;
}

.overridden-row {
    font-weight: bold !important;
    color: #5c8bd8 !important;
}

.overriddenPercentage-row {
    font-weight: bold;
    color: #6495ed;
}

.overriddenTransactionAmountPercentage-row {
    color: #000000;
}

.defaultPercentage-row {
    color: #32cd32;
}

.float-right {
    float: right;
}

.red {
    color: red;
}

.green {
    color: green;
}

.grey {
    color: lightgrey;
}

.full-width {
    width: 95%;
}

.fixed-width {
    width: 150px;
}

.fixed-treasury-width {
    width: 230px;
}

/* Used in the panelGrid, which is normally 4 columns. Label, component, label, component */
.label-column {
    width: 12em;
}

.label-column-4-pt {
    width: 20%;
}

/* Used in the panelGrid, which is normally 4 columns. Label, component, label, component */
.component-column {
    width: 20em;
}

.component-medium-column {
    width: 100em;
}

.component-small-column {
    width: 40em;
}

.large-label-column {
    width: 10em;
}

.description-column {
    width: 300em;
}

.component-column-4-pt {
    width: 30%;
}

/* Used in the panelGrid, which is normally 6 columns. Label, component, button, label, component button*/
.button-column {
    width: 4em;
}


/* Used in the panelGrid, which is normally 4 columns. Label, component, label, component */
.label-column-popup {
    width: 12em !important;
}

/* Used in the panelGrid, which is normally 4 columns. Label, component, label, component */
.component-column-popup {
    width: 12em !important;
}

.PackingListTotalsTreeNode {
    font-weight: bold;
}

.light {
    background-color: lightgray;
}

/* Used on the Payments page to left align the table header text */
DIV.ui-datatable-header.ui-widget-header.ui-corner-top < DIV#paymentsForm:paymentList.ui-datatable.ui-widget.payment-header {
    text-align: left;
}

.totalsContainer TD {
    text-align: right;
}

LABEL.align-left>.totalsContainer TD {
    text-align: left;
}

/* Used on the Planned Settlement screen */
.ps-order {
    background-color: #EFF0EB;
}


TR.actual-level-item {
    background: #FF7573 !important;
    font-weight: bold;
}

.orderRowColour {
    background-color: #F3EFE0;
}

.consignmentRowColour {
    background-color: #DDDDDD;
}

.shipmentRowColour,
.itemRowColour {
    background-color: #FFFFFF;
}

.ecruWhiteBackground {
    background-color: #F3EFE0;
}

.lightGreyBackground {
    background-color: #DDDDDD;
}

/* Used on invoice/actual costing */
.acceptClearButton {
    font-size: 10px !important;
    margin-left: 10px;
}

/* Used on invoice/actual costing */
.clearAllButton {
    font-size: 9px !important;
    margin-bottom: 20px;
    float: right;
}

/* Used on invoice/actual costing */
.costColumnContainer {
    float: right;
    clear: both;
}

.invoiceHeader {
    background: rgba(254, 255, 250, 1);
    background: -moz-linear-gradient(left, rgba(254, 255, 250, 1) 42%, rgba(248, 254, 240, 1) 51%, rgba(220, 248, 196, 1) 93%, rgba(220, 248, 196, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(42%, rgba(254, 255, 250, 1)), color-stop(51%, rgba(248, 254, 240, 1)), color-stop(93%, rgba(220, 248, 196, 1)), color-stop(100%, rgba(220, 248, 196, 1)));
    background: -webkit-linear-gradient(left, rgba(254, 255, 250, 1) 42%, rgba(248, 254, 240, 1) 51%, rgba(220, 248, 196, 1) 93%, rgba(220, 248, 196, 1) 100%);
    background: -o-linear-gradient(left, rgba(254, 255, 250, 1) 42%, rgba(248, 254, 240, 1) 51%, rgba(220, 248, 196, 1) 93%, rgba(220, 248, 196, 1) 100%);
    background: -ms-linear-gradient(left, rgba(254, 255, 250, 1) 42%, rgba(248, 254, 240, 1) 51%, rgba(220, 248, 196, 1) 93%, rgba(220, 248, 196, 1) 100%);
    background: linear-gradient(to right, rgba(254, 255, 250, 1) 42%, rgba(248, 254, 240, 1) 51%, rgba(220, 248, 196, 1) 93%, rgba(220, 248, 196, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefffa', endColorstr='#dcf8c4', GradientType=1);
}

/* Remove when we move to primefaces 5.3 */
.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-content.ui-widget-content,
.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-header.ui-widget-header,
.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-footer.ui-widget-header,
.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-header>tr.ui-widget-header,
.ui-panelgrid.ui-panelgrid-blank tbody>tr.ui-widget-content,
.ui-panelgrid.ui-panelgrid-blank tbody>tr.ui-widget-content>td.ui-panelgrid-cell,
.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-footer>tr.ui-widget-footer {
    background: none !important;
    border: 0 none !important;
}

.ui-panel .ui-panel-content {
    border: none !important;
}

.trail_col_left {
    width: 50%;
    height: 100%;
}

.trail_col_right {
    width: 50%;
    height: 100%;
    text-align: right;
}

.breadcrumb-text {
    font-family: Verdana, sans-serif;
    font-size: x-large !important;
    color: black;
    font-weight: normal;
    text-shadow: white;
    vertical-align: middle;
    padding-right: 1em;
}

.noHeader.ui-datatable table thead tr {
    display: none;
}

.ui-datatable .ui-state-highlight {
    background-color: yellow !important;
}

.banner-shipment {
    background: -webkit-gradient(linear, 80% 50%, 20% 50%, from(#c5c011), to(#FFFFFF));
    border: none;
}

.ui-datatable tbody td.wrap {
    white-space: normal;
}

.fileupload-buttonbar {
    background: transparent none;
    border: none;
}

.fileupload-content {
    display: none;
}

.ui-fileupload .fileinput-button {
    background-color: rgba(142, 103, 64, 0.98);
}

.ui-button-text-only .ui-corner-all .ui-state-default .ui-widget .ui-button {
    -moz-box-shadow: inset 0px 1px 0px 0px #c1ed9c;
    -webkit-box-shadow: inset 0px 1px 0px 0px #c1ed9c;
    box-shadow: inset 0px 1px 0px 0px #c1ed9c;
    background-color: #9dce2c;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #83c41a;
    display: inline-block;
    color: #ffffff;
    font-family: Trebuchet MS;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 24px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #689324;
}

.ui-button-text-only {
    width: auto !important;
    /*background-color: yellow !important;*/
}

ui-button-text-icons {
    width: auto !important;
    /*background-color: red !important;*/
}

.ui-button-icon-only {
    width: auto !important;
    /*background-color: blue !important;*/
}

.ui-datatable .ui-button-icon-only {
    width: 2rem !important;
}

.ui-wizard-nav-back {
    width: auto !important;
}

.ui-wizard-nav-next {
    width: auto !important;
}

.ui-button-icon-only {
    width: 2rem !important;
}

.ui-scrollpanel-content {
    padding-left: 0px !important;
    right: 13px;
}

.ui-scrollpanel {
    width: 100% !important;
}

.ui-scrollpanel-container,
.ui-scrollpanel-content {
    width: auto !important;
}

.ui-dialog-content .ui-button {
    width: auto !important;
}

.ui-dialog-content .ui-button {
    width: auto !important;
}

.ui-picklist .ui-button-icon-only {
    width: 5rem !important;
}

.ui-picklist .ui-button:hover {
    width: 5rem !important;
}

.ui-chk-align {
    margin-left: 3rem !important;
}

@media (max-width:500px) {
    .ui-panelgrid .ui-grid-responsive {
        width: 200px;
        background: orange !important;
    }

    .ui-toolbar-group-left .ui-button {
        width: auto !important;
    }

    .ui-toolbar-group-right .ui-button {
        width: auto !important;
    }

    .ui-toolbar .ui-button {
        width: auto !important;
    }

    .ui-toolbar {
        background: none !important;
        border: none !important;
    }

    .ui-facet .ui-button {
        width: auto !important;
    }

    .ui-facet-right .ui-button {
        width: auto !important;
    }

}

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
    .logo {
        display: hidden;
    }
}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
  ##mine
*/
@media (min-width: 1025px) and (max-width: 1280px) {
    .logo {
        display: hidden;
    }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
    .logo {
        display: hidden;
    }
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .logo {
        display: hidden;
    }
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
    .logo {
        display: hidden;
    }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
    .logo {
        display: hidden;
    }
}

.link--dotted {
    border-bottom: 1px dashed;
    text-decoration: none;
}

.ui-fieldset .ui-fieldset-legend {
    border-color: #c0c0c0;
}

.disable-scroll .ui-dialog-content {
    overflow: hidden !important;
}

.font-icon {
    text-decoration: none !important;
    font-size: 14px !important;
    color: black !important;
}

.ui-inplace .ui-inplace-save {
    background: linear-gradient(to bottom, #e6e6e6, #c0c0c0, #e6e6e6) !important;
    color: black !important;
    padding: 5px !important;
}

.ui-inplace .ui-inplace-cancel {
    background: linear-gradient(to bottom, #e6e6e6, #c0c0c0, #e6e6e6) !important;
    color: black !important;
    padding: 5px !important;
}

.button-icon-down .ui-icon {
    margin-top: 5px !important;
}

/*.selectable td.ui-selection-column input {
   display:none;
}*/

.ui-button {
    width: auto !important;
    background: #BFE3F7 !important;
    color: #000000;
    border: 1px solid #3c6382 !important;
}

.ui-button:hover {
    background: #3c6382 !important;
    width: auto !important;
    color: #ffffff;
    border: 1px solid #3c6382;
}

.right-space {
    margin-right: 1rem !important;
}

.custom-skeleton {
    border: 1px solid var(--surface-d);
    border-radius: 4px;
}

.custom-skeleton>ul {
    list-style: none;
}

body .ui-card {
    background: #ffffff;
    color: #495057;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

body .ui-card .ui-card-body {
    padding: 1rem;
}

body .ui-card .ui-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

body .ui-card .ui-card-subtitle {
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: #6c757d;
}

body .ui-card .ui-card-content {
    padding: 1rem 0;
}

body .ui-card .ui-card-footer {
    padding: 1rem 0 0 0;
}

body.layout-compact .ui-chkbox.booleanCheckbox .ui-chkbox-label {
    margin: 0 0 0 8px;
}

body.layout-compact .ui-chkbox.booleanCheckbox {
    width: auto;
}

html body .ui-chkbox {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
}

/*.ui-picklist .ui-picklist-filter-container .ui-picklist-item .ui-corner-all .ui-sortable-handle .ui-state-highlight {
    color: purple !important;
    background: red !important;
}*/

.ui-state-highlight {
    background: #bfe3f7 !important;
    color: #ffffff;
}

.ui-trigger-calendar .ui-datepicker-trigger.ui-button,
.ui-datepicker-trigger .ui-button .ui-widget .ui-state-default .ui-corner-all .ui-button-icon-only .ui-state-highlight {
    position: absolute;
    right: -2px;
    color: #6f9dc7 !important;
    background-color: #ffffff !important;
    padding: 0px 12px;
}

.ui-datatable .ui-widget-content .ui-state-highlight {
    background-image: none;
    background-color: #bfe3f7 !important;
    color: #000000 !important;
}

.rules-header {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.rules-section-header {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
}