﻿.cell-imagecommand {
    float: none;
    display: inline-block;
    vertical-align: text-bottom;
}

.cell-imagecommand-value {
    float: none;
    display: inline-block;
}

/* Ext.NET bug
   That fixes wrong icon/text alignment inside TextFields
   if it is used as a grid cell editor */
.x-grid-editor .x-form-text.x-textfield-icon-input {
    padding-left: 20px;
}

/* Fixes cutting of TagField's and CategoryField's trigger on typing and width autogrowing */
.x-theme-triton .x-categoryfield .x-form-trigger-default,
.x-theme-triton .x-tagcombo .x-form-trigger-default {
    min-width: 32px;
}

.x-theme-blue .x-categoryfield .x-form-trigger-default,
.x-theme-gray .x-categoryfield .x-form-trigger-default,
.x-theme-blue .x-tagcombo .x-form-trigger-default,
.x-theme-gray .x-tagcombo .x-form-trigger-default {
    min-width: 17px;
}

.x-theme-crisp .x-categoryfield .x-form-trigger-default,
.x-theme-neptune .x-categoryfield .x-form-trigger-default,
.x-theme-crisp .x-tagcombo .x-form-trigger-default,
.x-theme-neptune .x-tagcombo .x-form-trigger-default {
    min-width: 22px;
}

.x-theme-crisptouch .x-categoryfield .x-form-trigger-default,
.x-theme-neptunetouch .x-categoryfield .x-form-trigger-default,
.x-theme-crisptouch .x-tagcombo .x-form-trigger-default,
.x-theme-neptunetouch .x-tagcombo .x-form-trigger-default {
    min-width: 30px;
}
/* End of TagField's and CategoryField's trigger fix */

/* Fixes vertical aligment of TextField's (and subclasses') icon */
.x-theme-crisptouch .x-textfield-icon,
.x-theme-neptunetouch .x-textfield-icon {
    height: 28px;
}

.no-tall-displayfield .x-form-display-field-default,
.no-tall-displayfield .x-form-display-field-body,
.no-tall-displayfield .x-form-item-label-default {
    min-height: initial;
}

.no-tall-checkbox .x-form-cb-wrap-default {
    min-height: initial;
    height: initial;
}

.no-border-field .x-form-trigger-wrap-default {
    border-color: transparent;
}

.no-border-field .x-form-text-default {
    padding-left: 0px;
}

/* TagField's drag&drop */
.x-tagfield-dd .x-taglabel-item {
    cursor: move !important;
}

.x-tagfield-drag-proxy {
    cursor: move !important;
}

.x-theme-triton .x-tagcombo .x-form-trigger-wrap {
    height: auto !important;
}
/* End of TagField's drag&drop */

/* TagField's tags style for Triton */
.x-theme-triton .x-taglabel ul.x-taglabel-list {
    min-height: 32px;
}

.x-theme-triton .x-taglabel-item-text {
    font: 300 13px/24px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}

.x-theme-triton .x-taglabel-item .x-taglabel-close-btn {
    top: 7px;
}

.x-theme-triton .x-tagcombo .x-taglabel-item {
    margin-top: 3px;
    margin-bottom: 3px;
}

.x-theme-triton .x-taglabel-item {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
/* End of TagField's tags style for Triton */

.ribbon-message-container {
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    background-color: #FFDD00;
    color: #404040;
    margin-bottom: 3px;
}

    .ribbon-message-container.ribbon-message-container-small {
        text-align: left;
        font-size: 14px;
        line-height: 16px;
    }

    .ribbon-message-container.ribbon-message-container-clickable {
        cursor: pointer;
    }

/* RowExpander's details component styling. Used in OrderList and PurchaseOrderDeliveriesControl, at least */
.row-expander-details-component table {
    border-spacing: 15px 0;
}

.detail-row-info-cell, .detail-row-info-cell-no-width {
    vertical-align: top;
    text-align: center;
}

.detail-row-info-cell {
    width: 140px;
}

    .detail-row-info-cell .x-label-value {
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.detail-row-info-cell-fixed-width .x-autocontainer-innerCt {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-row-info-header-cell, .detail-row-info-header-cell-no-width {
    text-align: center;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 5px;
}

.detail-row-info-header-cell {
    width: 140px;
}

    .detail-row-info-header-cell.detail-row-info-header-cell-last {
        border-right: none;
    }

    .detail-row-info-header-cell.detail-row-info-header-cell-navigatable .x-label-icon {
        cursor: pointer !important;
    }

.x-theme-blue .detail-row-info-data-cell,
.x-theme-gray .detail-row-info-data-cell {
    font-size: 10px;
}

.x-theme-triton .detail-row-info-data-cell,
.x-theme-crisp .detail-row-info-data-cell,
.x-theme-neptune .detail-row-info-data-cell {
    font-size: 12px;
}

.x-theme-aria .detail-row-info-data-cell {
    font-size: 13px;
}

.x-theme-crisptouch .detail-row-info-data-cell,
.x-theme-neptunetouch .detail-row-info-data-cell {
    font-size: 14px;
}

.detail-row-info-data-cell.left-align {
    text-align: left;
}

.detail-row-info-data-cell.right-align {
    text-align: right;
}
/* End of RowExpander's details component styling */

/* This fixes not showing the Tooltip on a disabled ProductFilter. ExtJS bug.
   The component requires Cls="show-tooltip-if-disabled-fix" to get this fix applied.
*/
.show-tooltip-if-disabled-fix.x-item-disabled {
    pointer-events: initial;
}

.hyperlinkfield .x-form-item-body {
    vertical-align: bottom;
}

.dirty-row .x-grid-cell, .dirty-row .x-grid-rowwrap-div {
    background-color: #FFFDD8 !important;
}

.new-row .x-grid-cell, .new-row .x-grid-rowwrap-div {
    background: #c8ffc8 !important;
}

/* Used in BulkBuyOfferSelectionComboBox. 
   To be used later in all other similar controls to get rid of all .css files. 
*/
.combobox-search-item {
    font: normal 11px tahoma, arial, helvetica, sans-serif;
    padding: 3px 10px 3px 10px;
    border: 1px solid #fff;
    border-bottom: 1px solid #eeeeee;
    white-space: normal;
    color: #555;
}

.pointer {
    cursor: pointer;
}

.no-pointer {
    cursor: default;
}

.highlighted-field .x-form-field,
.highlighted-field .x-taglabel-item-text {
    font-weight: 600;
}

.highlighted-row .x-grid-cell {
    background: yellow !important;
    font-weight: bold !important;
}

.highlighted-combo-item {
    font-weight: bold !important;
}

.x-theme-triton .highlighted-combo-item {
    color: black;
}

.bold-cell .x-grid-cell-inner {
    font-weight: bold;
}

.error-row, .error-row .x-grid-row-body {
    background-color: #FF6347;
}

.alert-row, .alert-row .x-grid-row-body {
    color: red;
}

.chosen-field input {
    background-color: #c8ffc8;
}

.chosen-field label,
.chosen-field-label-only label {
    background-color: #c8ffc8;
    border-style: solid;
    border-color: lightgrey;
    border-width: thin;
    border-right-width: 0px;
}

.shifted-label label {
    padding-left: 5px !important;
}

.error-field input,
.error-field .x-form-trigger {
    background-color: #FF6347;
}

.grid-entity-link {
    text-decoration: none;
    color: #404040;
}

.x-theme-aria .grid-entity-link {
    color: #fff;
}

.grid-entity-link::before {
    content: "\f08e";
    display: inline-block;
    font-family: FontAwesome;
    margin-right: 5px;
    font-size: 12px;
    text-decoration: none;
}

.grid-entity-link:hover {
    text-decoration: underline;
}

.x-theme-triton .grid-cell-image {
    height: 18px;
    object-fit: contain;
}

.grid-cell-image-with-text {
    vertical-align: text-bottom;
}

/* Adding Triton's FontAwesome font for non-Triton themes */
@font-face {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/extjs/packages/theme_triton/build/resources/font_awesome/fonts/fontawesome-webfont-woff2/ext.axd?v=4.4.0") format("woff2");
}

/* Otherwise it is not availble in non-Triton themes. The icon is used for the view triggers of fields, at least. */
.fa-external-link:before {
    content: "\f08e" !important;
}

.hide-horizontal-scrollbar {
    overflow-x: hidden !important;
}