/**
 * Styleclass to be used for the row of an attribute.
 */
.pim-editor-field-container {
  padding-bottom: 1em;
    width:        100%;
}

/*
 *
 */
.editor-row {
    padding: 0.5em 0;
    margin: 0.5em 10px !important;
    border: 2px solid transparent;
}

.editor-row:empty {
    display: none;
}

/*
 * Even if there is no validation-bubble, the space should be reserved.
 */
.editor-row .pim-validationBubble {
    width:    15px !important;
    margin:   0.5em 1em;
}

.ui-panel-title .pim-validationBubble {
    margin:   0 1em;
}

/**
 * The container-span containing the label of the property row, the help-icon and the tooltip.
 */
.pim-formfield-label {
  width:          20em;
  text-align:     right;
  display:        inline-block;
  vertical-align: top;
  padding:        0.5em 2em 0 5em;
}

/**
 * StyleClass of the property-label.
 */
.pim-formfield-description {
    padding-left: 0.25em;
}


.editor-row-value {
    display: inline-block;
    width: calc( 100% - 29em );
}

.editor-row-scope {
    white-space: nowrap;
}

.pim-formfield-scope-container-composite > .editor-row-value {
    width: 100%;
}

.pim-composite-outer {
    margin: 0 0 0 20px;
    width: calc( 100% - 3.5em );
}

/**
 * Editor-Form-Fields - specialized for the company editor
 */
#companyDetailsForm .editor-row-value {
    width: calc( 100% - 22em ) !important;
}

#companyDetailsForm .pim-composite-outer {
    width: calc( 100% - 3em ) !important;
}

#companyDetailsForm .editor-row-value > .deleteicon.textarea {
    width: 100%;
}

#companyDetailsForm .propertyEditorFormField input {
    width: calc( 100% - 7em ) !important
}

#companyDetailsForm div.propertyEditorFormField {
    width: calc( 100% - 4em ) !important
}

#companyDetailsForm .ui-combobox-outer.propertyEditorFormField {
     width: calc( 100% - 2px ) !important;
}

#companyDetailsForm .propertyEditorFormField {
    width: calc( 100% - 7em ) !important;
}

#companyDetailsForm .propertyEditorFormField .ui-combobox-input {
    width: calc( 100% - 4em ) !important
}



/**
 * Editor-Form-Fields - Default styleClasses for big screens.
 */
.propertyEditorFormField {
    width: calc( 50% - 10em + 20px );
}

input.propertyEditorFormField {
    width: calc( 50% - 10em + 0px ) !important;
}

.propertyEditorFormField.ui-spinner {
    width: calc( 50% - 10em + 22px ) !important;
}

.editor-row-scope .ui-combobox-outer.propertyEditorFormField {
    width: calc( 50% - 10em + 20px ) !important;
}

.ui-combobox-outer.propertyEditorFormField {
    width: calc(100% - 2px ) !important;
}

#mainForm\:vendorIdEditor .ui-combobox-outer.propertyEditorFormField {
    width: calc( 50% - 10em + 20px ) !important
}

.propertyEditorFormField .ui-spinner-input {
    width: calc( 50% - 10em + 8px ) !important;
}

.propertyEditorFormField input {
    width: calc( 50% - 10em );
}

.editor-row-value > .deleteicon.textarea {
    vertical-align: top !important;
    display:        inline-block;
    width:          calc( 50% - 8em );
}



/**
 * Customize the textarea and the combobox to have a nicer look.
 */
textarea.propertyEditorFormField {
    width: calc( 100% - 2em );
}

.propertyEditorFormField .ui-combobox-input {
    width: calc( 100% - 4em ) !important
}

/**
 * End of Editor-Form-Field definitions ...
 */


@media ( max-width: 1500px ) {
    .editor-row-scope {
        display: block;
    }

    .pim-composite-outer {
        margin: 0 20px 0 -5px;
        width:  calc( 100% - 5.5em ) !important;
        padding-left: 31px !important
    }

    .editor-row-value {
        display:      inline-block;
        padding-left: 3.5em;
        width:        calc( 100% - 32.5em );
    }

    #companyDetailsForm .pim-formfield-label {
        width: calc( 100% - 3em ) !important
    }

    /**
     * Editor-Form-Fields - smaller screens.
     */
    .propertyEditorFormField {
        width: calc( 100% - 10em ) !important;
    }

    .propertyEditorFormField.ui-spinner {
        width: calc( 100% - 10em + 22px ) !important;
    }

    .editor-row-scope .ui-combobox-outer.propertyEditorFormField {
        width: calc( 50% - 10em + 20px ) !important;
    }

    .ui-combobox-outer.propertyEditorFormField {
        width: calc(100% - 2px ) !important;
    }

    #mainForm\:vendorIdEditor .ui-combobox-outer.propertyEditorFormField {
        width: calc( 50% - 10em + 20px ) !important
    }

    .propertyEditorFormField .ui-spinner-input {
        width: calc( 100% - 10em + 8px ) !important;
    }

    .propertyEditorFormField input {
        width: calc( 100% - 10em );
    }

    .editor-row-value > .deleteicon.textarea {
        width: calc( 100% - 8em );
    }
}

@media ( max-width: 1300px ) {
    .pim-formfield-label {
        padding-left: 3.5em;
        padding-bottom: 0.5em;
        text-align:   left;
        display:        inline-flex;
    }

    .editor-row-value {
        display:      block;
        padding-left: 3.5em !important;
        width:        calc( 100% - 4em );
    }

    .editor-row-scope {
        padding-left: 0;
    }

    .pim-composite-outer {
        margin: 0 20px 0 -5px;
    }
}

@media ( max-width: 1024px ) {
    .pim-formfield-label {
        padding-left: 3.1em;
        padding-bottom: 0.5em;
        text-align:   left;
        display:      inline-flex;
    }

    .editor-row-value {
        display:      block;
        padding-left: 3.5em !important;
        width:        calc( 100% + 1rem);
    }

    .pim-composite-outer {
        margin: 0 20px 0 -10px;
    }
}


/**
 * No paddings in datatables. Scope form fields and composites uses datatables,
 * and we doesn't want to have paddings to properly align the fields.
 */
.editor-row .ui-datatable thead th,
.editor-row .ui-datatable tbody td,
.editor-row .ui-datatable tfoot td,
.editor-row .ui-datatable tfoot th
{
    padding: 0 !important;
}

.editor-row .ui-datatable-tablewrapper {
    overflow: hidden;
}

.pim-editor-field-container {
  padding-bottom: 1em;
}

/**
 * The outer composite. This is the top level property of an composite. We want to render it a bit different.
 */
.pim-composite-outer > .ui-panel-titlebar {
    background-color: white;
    border:           none;
    padding-bottom:   0 !important;
    margin-bottom:    0 !important;
}

/**
 * The inner composite. This is the component (or a subcomponent) of an composite, but not the top-level property.
 */
.pim-composite-inner {
    border: dotted 1px;
    padding-bottom:5px !important;
}

/**
 * StyleClass of the help-icon left to the property-label.
 */
.pim-formfield-helptext {
    background-image:  url( "/approval/resources/images/icons/information.png" );
    background-repeat: no-repeat;
    display:           inline-block;
    width:             1.2em;
    height:            1.2em;
    padding-right:     0.5em;
}



.pim-formfield-scope-container-composite {
    display: inline-block;
    width:   100%;
}



.pim-formfield-scope-actions-container {
    display: inline-block;
}



.pim-editor-field-container tr {
    display: inline-block;
    padding: 0.1em 0;
    width:   100%;
}

.pim-editor-field-container td {
    display: inline;
    width:   100%;
}



.pim-editor-navigation-name {
    font-weight:  bold;
    display:      block;
    padding:      1em;
    overflow:     hidden;
    white-space:  nowrap;
    flex:         0 0 1em;
}


.pim-dynamicui-switch {
    border-bottom: solid 2px #ddd;
    display: grid;
    grid-column-gap: 1em;
    padding: 1em;
}



.pim-preview-navigation {
    width:         25em !important;
    border-style:  none solid none none !important;
    border-width:  1px !important;
}

.pim-preview-navigation > * {
    border: none !important;
}


.pim-company-details {
    height:   450px;
    width:    100%;
    overflow: auto;
}

@media ( max-height: 1024px ) {
    .pim-company-details {
        height:   350px;
        width:    100%;
        overflow: auto;
    }
}

.pim-company-details-content {
    width: 100em;
}

/*-----------------------------------------------------------------*/
/* StyleClasses used to style an custom navigation, such as used   */
/* by the propertyContainer editor                                 */
/*-----------------------------------------------------------------*/

.propertyContainer-layout-navigation > .ui-layout-unit-content {
    overflow-x: hidden !important;
    overflow-y: auto   !important;
}

.propertyContainer-layout-navigation .ui-accordion-header {
    background: none;
    border:     none;
    overflow: hidden;
}



.pim-navigation-menu-entry {
    display: block;
    padding: 0.4em 0.4em 0.4em 2.5em;
    text-decoration: none;
    line-height: 13px;
}

.pim-editor-navigation-upper-content .pim-navigation-menu {
    display:   block;
    flex-grow: 1;
}


.pim-navigation-menu-main-entry {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pim-navigation-menu-sub-entry {
    width:           100%;
    text-decoration: none;
}

/*-----------------------------------------------------------------*/
/* End of navigation menu                                          */
/*-----------------------------------------------------------------*/






.pim-editor-navigation-full-content {
    height:     calc( 100% - 0.24em );
    background: none;
    overflow:   hidden;
}

.pim-editor-navigation-upper-content {
    height:         66%;
    background:     none;
    border-bottom:  solid 1px #ddd;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
}

.pim-navigation-menu {
    height:     calc( 100% - 3em );
    background: none;
    border:     none;
    overflow-x: hidden;
    overflow-y: auto;
    display:    table-cell;
}

.pim-navigation-menu > .ui-accordion-content {
	top: 0 !important;
}

.relation-overview-widget .pim-description {
    font-weight: bold;
}

.relation-overview-widget {
    display:      block;
    overflow:     hidden;
    height:      calc( 33% - 0.25em );
    border-top:  solid 1px #ddd;
}

.relation-overview-widget .hierarchy {
    width: 100%;
}

.relation-overview-widget .hierarchy .column1 {
    width: 20px !important;
}

.relation-overview-widget td > span {
    margin: 0 0 0 8px !important;
    line-height: 1.3em;
    text-overflow: ellipsis;
}

.relation-overview-widget td a > span {
    margin: 0 0 0 8px !important;
    line-height: 1.3em;
    text-overflow: ellipsis;
}

.relation-overview-widget td {
    padding: 2px 0 !important;
}

.relation-overview-widget .hierarchy {
    width: 100%;
}


.ui-relation-accordion > .ui-accordion-header > .ui-icon {
    display: none;
}


div.ui-panel-titlebar > span > .ui-combobox-outer {
    width: 20em !important;
}



.editor-row-special-composite > div {
    width: calc( 100% - 4em );
    display: inline-block;
}

.editor-row-special-composite > div > .editor-row-value {
}

.pim-navigation-menu > div {
	border: none !important;
}

/*-----------------------------------------------------------------*/
/* Price Widget listing other prices for same GTIN */

.pim-editor-navigation-upper-content.price-navigation {
    height: 25%;
}

.other-prices-widget {
    height: 75%;
    overflow-x: hidden;
    overflow-y: auto;
}

.other-prices-widget > div {
    border-bottom: 1px solid #ddd;
    padding: 1em;
}

.other-prices-widget .pim-recipient {
    display: block;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
}

.other-prices-widget > div > .ui-panel {
    margin: 0.4em 1em;
}

.other-prices-widget .ui-datalist {
    margin: 0.4em 0 0 0;
}

.other-prices-widget .ui-datalist .ui-panel {
    margin: 0.2em 0;
    padding: 0;
}

.other-prices-widget .ui-text {
    float: left;
    line-height: 1.3em;
    margin: 0 1.0em 0 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.other-prices-widget .pim-link {
    float: left;
    line-height: 1.3em;
}

.other-prices-widget .ui-panel .ui-panel-content {
    background: 0;
    padding: .2em 0 !important;
}
/*-----------------------------------------------------------------*/

.propertyEditorFormField.pim-validation-error {
    color: black !important;
    background-color: #f8d7da !important;
}

.propertyEditorFormField.pim-validation-warning {
    color: black !important;
    background-color: #fcf8e3 !important;
}

.propertyEditorFormField.pim-validation-info {
    color: black !important;
    background-color: #d9edf7 !important;
}

.ui-combobox-outer.pim-validation-error input {
    color: black !important;
    background-color: #f8d7da !important;
}
.ui-combobox-outer.pim-validation-warning input {
    color: black !important;
    background-color: #fcf8e3 !important;
}

.ui-combobox-outer.pim-validation-info input {
    color: black !important;
    background-color: #d9edf7 !important;
}

.ui-combobox-outer.pim-validation-error {
    color: black !important;
    background-color: #fff;
}
.ui-combobox-outer.pim-validation-warning {
    color: black !important;
    background-color: #fff;
}

.ui-combobox-outer.pim-validation-info {
    color: black !important;
    background-color: #fff;
}