/*
 * (c)2014 1WorldSync GmbH, Cologne, Germany.
 *
 * http://www.1worldsync.com/
 *
 * Created on 03.06.2016 by szimmer.
 */



/**
 * This file contains style-classes either used by the whole application, or
 * by different parts of the application, so that there is no single valid
 * file to place it.
 */
@import url('https://fonts.googleapis.com/css?family=Roboto');

.pim-text-small {
    font-weight: normal;
    font-size: 11px;
    line-height: 1.25em;
}

.pim-text-small-bold {
    font-weight: bold;
    font-size: 11px;
    line-height: 1.25em;
}

.pim-text-normal {
    font-weight: normal;
    font-size: 13px;
    line-height: 1.25em;
}

.pim-text-normal-bold {
    font-weight: bold;
    font-size: 13px;
    line-height: 1.25em;
}

.pim-text-large {
    font-weight: normal;
    font-size: 18px;
    line-height: 1.25em;
}

.pim-text-large-bold {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.25em;
}

.pim-text-x-large {
    font-weight: normal;
    font-size: 40px;
    line-height: 1.25em;
}

.pim-text-x-large-bold {
    font-weight: bold;
    font-size: 40px;
    line-height: 1.25em;
}

html {
    width:   100%;
    height:  100%;
    margin:  0;
    padding: 0;
}

body {
    width:       100%;
    height:      100%;
    margin:      0;
    padding:     0;
    overflow:    hidden !important;
    font-family: Roboto,Arial,Helvetica,sans-serif;
    font-size:   12px;
}

iframe {
    overflow: hidden !important;
}

input:focus {
    background-color: #d9edf7 !important;
}

textarea:focus {
    background-color: #d9edf7 !important;
}

select:focus {
    background-color: #d9edf7 !important;
}

td {
    padding: 5px 1px;
}



/*-----------------------------------------------------------------*/
/* Style an delete-icon-wrapper                                    */ 
/*-----------------------------------------------------------------*/
span.deleteicon {
    position: relative;
}

span.deleteicon:HOVER > span {
    background: url( '/approval/resources/images/icons/close-gray.png' );
    display:    block;
    top:        0;
    right:      3px;
    width:      14px;
    height:     14px;
    cursor:     pointer;
    position:   absolute;
}

span.deleteicon > input {
    padding-right: 16px;
}

span.deleteicon textarea {
    padding-right: 16px;
}

a {
    text-decoration: none;
}

.deleteicon.textarea {
    vertical-align: top !important;
    display:        inline-block;
    width:          100%;
}

.deleteicon.textarea > span {
    margin-top:     5px;
}

span.deleteicon.textarea:HOVER > span {
    right: 18px;
}


 
.ui-datatable .ui-datatable-scrollable-body {
    height: calc( 100% - 74px ) !important;
}



.ui-datatable-scrollable-theadclone {
    visibility: collapse;
}


.pim-scoped-table .deleteicon {
    vertical-align: middle !important;
}

/*-----------------------------------------------------------------*/
/* End of the delete-icon-wrapper                                  */ 
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* This styleClass changes the cursor of the tabView's close icon  */ 
/*-----------------------------------------------------------------*/
.x-tabview-close {
    cursor: pointer !important;
}
/*-----------------------------------------------------------------*/
/* End of tabView's close icon class                               */ 
/*-----------------------------------------------------------------*/

.pim-menubar-logo {
    background-image: url( "/approval/resources/images/1WS_Logo_Horizontal_White.png" ) !important;
}

.pim-without-search .pim-menubar-logo {
    background-size: contain;
    width: 92px;
    height: 32px;
    margin-top: -6px !important;
}


.pim-with-search .pim-menubar-logo {
    background-size: 100px auto;
    width: 100px;
    height: 50px;
    margin-top: -22px;
}

/*----------------------------------------------------------------*/
/* Validation classes (validationBubbles)                         */
/*----------------------------------------------------------------*/
.pim-validation-summary {
    display: block;
    float:   right;
    width:   calc( 100% - 18px )!important;
}

.pim-validationBubble, .pim-validationBubble > .ui-panel-content {
    display:        inline-table !important;
    border:         none !important;
    vertical-align: top;
    background:     none !important;
    overflow:       visible;
}



.pim-validationBubble-navigation {
    width:        14px;
    height:       14px;
    margin-top:   -2px;
    margin-left:   1em;
    float:        left;
    padding-left: 12px;
}


div[ name='pim-validation-InlineRight' ] {
    display:          inline;
    float:            right;
    background-color: transparent !important;
}
/*----------------------------------------------------------------*/
/* End of validation classes (validationBubbles)                  */
/*----------------------------------------------------------------*/



/*----------------------------------------------------------------*/
/* Styleclasses for special buttons (workflow relevant actions)   */
/*----------------------------------------------------------------*/
.ui-action-default-workflow {
    background-color: #fff !important;
    border-color:     #004853 !important;
    color:            #004853 !important;
}

.ui-action-workflow {
    background-color: #004853 !important;
    border-color:     #004853 !important;
    color:            #fff !important;
}

.ui-action-workflow > button {
    color:            inherit;
}

.ui-action-negative-workflow {
    background-color: #ff891e !important;
    border-color:     #ff891e !important;
    color:            #fff !important;
}

/*----------------------------------------------------------------*/
/* End of workflow relevant styleclasses                          */
/*----------------------------------------------------------------*/



#userDashboardForm .ui-commandlink:hover {
    color: #5B9D99;
}

#userDashboardForm .ui-commandlink {
    color: #5B9D99;
}

#userDashboardForm .ui-panel-titlebar {
    background-color: #fff !important;
    border: none !important;
    border-bottom: solid 2px #c8c8c8 !important;

    padding: 0 0.2em 0 !important;
    margin-bottom: 3px;
}

.ui-panel-grid-list {
    background-color: #fff !important;
    border: none !important;
    border-top: solid 1px #c8c8c8 !important;
    border-bottom: solid 1px #c8c8c8 !important;

    padding: 0 0.2em 0 !important;
    margin-top: 3px;
    margin-bottom: 3px;
}


#companyDetailsForm .pim-formfield-label {
    width:        15em !important;
    padding-left:  1em !important;
}



/*-----------------------------------------------------------------*/
/* StyleClasses used by input fields in dialogs, such as the       */
/* create-dialog                                                   */
/*-----------------------------------------------------------------*/
.dialogInputField {
    width: 20em;
}

.ui-combobox-outer.dialogInputField {
    width: calc( 20em + 20px );
}

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

/*-----------------------------------------------------------------*/
/* End inputFields for dialogs.                                    */
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* Attribute finder and validationQuickAccessButton                */
/*-----------------------------------------------------------------*/
.pim-validateicon-quick-access-item {
    display:     block;
    padding:     2px;
    line-height: 2em;
}

.pim-validateicon-quick-access-separator {
    border: dotted 1px lightgray;
}

/*-----------------------------------------------------------------*/
/* End Attribute finder and validationQuickAccessButton            */
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* Colorization of some texts.                                     */
/*-----------------------------------------------------------------*/
.pim-validation-error {
    color: #ff0000 !important;
}

.pim-validation-warning {
    color: #ff891e !important;
}
.pim-validation-success {
    color: #004853 !important;
}
.pim-validation-info {
    color: #31708f !important;
}
.pim-validation-message {
    color: #919195 !important;
}
.pim-validation-anomaly {
    color: #61C0E4 !important;
}

/*-----------------------------------------------------------------*/
/* End of section                                                  */
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* This style-classes are for stacking font awesome icons.         */
/* - fa-stack-base is the base "icon", for exampe an circle.       */
/* - fa-stack-top is the icon which should be inside the circle.   */
/*-----------------------------------------------------------------*/
.fa-stack-base {
    font-size: 1.6em !important;
}

.fa-stack-top {
    font-size: 1em !important;
    margin-left: -1em;
    margin-top: -0.5em;
    vertical-align: middle;
}

.fa-stack-small-base {
    font-size: 1em !important;
}

.fa-stack-large-top {
    font-size: 1.8em !important;
    margin-left: -0.75em;
    margin-top: -0.1em;
    vertical-align: middle;
}

.pim-valid {
    color: #004853;
}

.pim-invalid {
    color: #ff0000;
}

.fa-green {
    color: #004853;
}

.fa-green-published {
    color: #7EDE88;
}

.fa-red {
    color: #ff0000;
}

.fa-orange {
    color: #ff891e;
}

.fa-white {
    color: #ffffff;
}

.fa {
    font-size: 13px;
}

.fa-3x {
    font-size: 39px;
}

button .fa {
    font-size: inherit;
}

/*-----------------------------------------------------------------*/
/* End of section                                                  */
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* customize the file upload dialog.                               */
/*-----------------------------------------------------------------*/
.ui-fileupload-content .ui-progressbar {
    width: 10em !important;
}
.ui-fileupload-content {
    overflow: hidden;
}
/*-----------------------------------------------------------------*/
/* End of section                                                  */
/*-----------------------------------------------------------------*/



.ui-field-label {
    margin: 0 0.5em 0 0;
}



/*-----------------------------------------------------------------*/
/* StyleClasses to bring the exception dialogs to the front        */
/*-----------------------------------------------------------------*/

.ajax-error-dialog {
    z-index: 2100 !important;
}

.js-error-dialog {
    z-index: 2100 !important;
}

/*-----------------------------------------------------------------*/
/* End of exception dialogs                                        */
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* StyleClasses used to design pim-widgets.                        */
/*-----------------------------------------------------------------*/
.ui-pimwidget-datatable {
	width:  100%;
	height: calc( 100% - 3.3em );
}


.ui-pimwidget-datatable > .ui-datatable-tablewrapper {
	width:  100%;
	height: 100%;
}
/*-----------------------------------------------------------------*/
/* End of pim-widget                                               */
/*-----------------------------------------------------------------*/


.hiddenRow {
    display: none;
}



.filterwidgetAction {
    height:          18px;
    width:           18px;
    text-decoration: none;
    line-height:     18px;
}

.pim-description-label {
    text-overflow: ellipsis;
    overflow:      hidden;
    white-space:   nowrap;
    width:         100%;
    line-height:   1.5em;
}

.pim-description-primary {
	font-weight: bold;
}


/*-----------------------------------------------------------------*/
/* StyleClasses used by the imageZoomer                            */
/*-----------------------------------------------------------------*/
.image-zoomer-detail-container {
    position: fixed;
    top:      6em;
    bottom:   6em;
    left:     25em;
    right:    25em;
    overflow: hidden;
}

.image-zoomer-preview-container {
	width:      100%;
	text-align: center;
}

.image-zoomer-current-marker {
	background-image: url( '/approval/oneworldsync/images/imageZoomer/current-marker.gif' );
	display: inline-block;
	position: absolute;
}
/*-----------------------------------------------------------------*/
/* End of the StyleClasses used by the imageZoomer                 */
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* dynamic dialogs                                                 */
/*-----------------------------------------------------------------*/
.x-pim-dynamicDialog {
}

.x-pim-dynamicDialog > .ui-dialog-content {
	height:   calc( 100% - 2.2em ) !important;
	overflow: hidden;
}

.x-pim-dynamicDialogContentWithToolbar {
    position: absolute;
    height:   calc( 100% - 3.2em );
    width:    100%;
    overflow: auto;
}

.x-pim-dynamicDialogContentWithDoubleToolbar {
    position: absolute;
    height:   calc( 100% - 6.4em );
    width:    100%;
    overflow: auto;
}

.x-pim-dynamicDialogToolbar {
    position: absolute;
    bottom:   0;
    width:    100%;
}

.x-pim-dynamicDialogToolbar > .ui-toolbar-group-right {
    padding-right: 1.5em;
}

/*-----------------------------------------------------------------*/
/* End of dynamic dialogs                                          */
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* StyleClasses for the report-panel-filter                        */
/*-----------------------------------------------------------------*/

.report-panel-outer {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.report-panel-filter {
    flex-grow:        0;
    background-color: #f2f2f2;
}

.report-panel-inner {
    overflow:  auto;
    flex-grow: 1;
}

.report-panel-inner .ui-widget-content {
    overflow:  auto;
}

.report-panel-empty-text {
    margin: 20px;
}

.report-filter-label {
    font-weight: bold;
    padding-left: 1em;
    padding-right: 0.5em;
}

.ui-selectbooleanbutton.ui-state-default.report-filter-button {
    background-color: #f2f2f2;
    border: solid 1px #f2f2f2;
}

.ui-selectbooleanbutton.ui-state-active.report-filter-button {
    border:           solid 1px #004853;
    color:            #96d6bb !important;
    background-color: #004853 !important;

}

/*-----------------------------------------------------------------*/
/* End of report-panel-filter                                      */
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* Styleclasses to use the flex-layout on tabViews.                */
/* This allows us a better, flexible layout                        */
/*-----------------------------------------------------------------*/

.flexed-tabview {
    border:   none;
    height:   100%;
    margin:   0;
    padding:  0 !important;
    display:  block;
    overflow: hidden;
    
}

.flexed-tabview .ui-tabs-nav {
    height: 3em !important;
}


.flexed-tabview .ui-tabs-panels {
    height: calc( 100% - 3em );
}

.flexed-tabview .ui-tabs-panels .ui-tabs-panel {
    height:  100%;
    margin:  0;
    padding: 0 !important;
}

/*-----------------------------------------------------------------*/
/* End of Styleclasses to use the flex-layout on tabViews.         */
/*-----------------------------------------------------------------*/



.inline-message {
    display: inline-block;
}

.inline-message .ui-message-error-icon {
    margin-top: -3px;
}



/**
 * IMPORTANT! This must be cleaned up during the UX implementation.
 */









.ui-mainlayout-navigator .ui-menu .ui-menu-list .ui-menuitem {
    margin-left:  1em;
    margin-right: 1em;
}

.ui-main-tabview label {
    padding-top: 0;
}

.x-mainlayout-dirty-title {
    font-style: italic;
}

.x-mainlayout-dirty-title * {
    font-style: italic;
}

.x-mainlayout-dirty-title label:last-child:after {
    font-weight: bold;
    content: "*";
}

.ui-itemtip {
    width: 500px !important;
}



.ui-toolbar .ui-separator {
    background: #a8a8a8 !important;
    border: none !important;
    width: 1px !important;
    height: 22px !important;
    margin: 0 0.5em 0 0.5em;
    box-shadow: none !important;
}



.ui-tabview-contentscroll {
    width:  100% !important;
    height: 100% !important;
}

.ui-tabview-contentscroll .ui-tabs-panels {
    width:    100% !important;
    height:   calc( 100% - 49px )!important;
    overflow: auto !important;
}

.ui-panel-content-scroll > .ui-panel-content {
    overflow: auto !important;
}

.pim-settings-tabview > .ui-tabs-nav {
	height: 100% !important;
}



.ui-no-padding, .ui-no-padding .ui-panel-content, .ui-no-padding .ui-panel {
    padding: 0 !important;
}

.ui-no-margin, .ui-no-margin .ui-panel-content, .ui-no-margin .ui-panel {
    margin: 0 !important;
}

.ui-no-border, .ui-no-border .ui-panel-content, .ui-no-border table tbody, .ui-no-border tr, .ui-no-border td, .ui-no-border > .ui-datalist-content, .ui-no-border > .ui-datascroller-content {
    border: none !important;
}

.ui-no-border th {
    border: none !important;
    font-weight: bold !important;
}

.ui-table-border tr, .ui-table-border td {
    border: solid 1px !important;
}



.ui-align-top, .ui-align-top tbody {
    vertical-align: top !important;
}



.ui-absolute-fullarea {
    position: absolute;
    top:      0;
    bottom:   0;
    left:     0;
    right:    0;
    padding:  0;
}


.ui-calendar {
    white-space: nowrap;
    overflow:    hidden;
}


.x-noscroll, .x-layout-noscroll .ui-layout-unit-content {
    overflow: hidden !important;
}



.ui-datatable-no-header table thead tr {
    display: none !important;
}

.ui-datatable-no-stripe .ui-datatable-odd {
    background: none !important;
}

.ui-datatatable-icon {
    width:      32px;
    text-align: center;
    padding:    2px !important
}

.ui-datatatable-icon > .ui-button {
    height: 16px;
}


/**
 *
 */
.x-scrolled-table {
    overflow: visible !important;
}

.x-scrolled-table .ui-paginator-bottom {
    text-align: left;
}

.x-scrolled-table .ui-datatable-tablewrapper {
    overflow: auto !important;
}

.ui-datatable.ui-widget.x-scrolled-table {
    margin-top: 5px;
}

.x-sized-panel .ui-panel-content {
    height: calc( 100% - 2.4em ) !important;
}




.x-table-no-scroll {
    overflow: hidden !important;
}

.x-table-no-scroll .ui-datatable-tablewrapper {
    overflow: hidden !important;
}



.pim-hitlist-details {
    padding: 0 0 !important;
    width:   100% !important;
    height:  100% !important;
}

/*----------------------------------------------------------------*/
/* Editor-classes                                                 */
/*----------------------------------------------------------------*/

.ui-panel .ui-panel-titlebar {
    padding: 0.6em 0.2em 0.2em !important;
    margin-bottom: 3px;
}

.ui-panel .ui-panel-titlebar-icon {
    margin-left: .2em !important;
    margin-top: -0.5em !important;
}

.ui-panel .ui-dashboard-titlebar {
    padding: 0 0.2em 0 !important;
    margin-bottom: 3px;
}

.pim-editor-content {
    position: absolute;
    top:      35px;
    left:     0;
    right:    0;
    bottom:   0;
    overflow: auto;
}

.pim-editor-content > .ui-layout-unit-content {
    padding: 0 0 0 10px;
    display: block !important;
}

.pim-editor-row {
    clear:   both;
    padding: 0;
}

/**
 * This style-class is to design the helptext- or information- bubble
 * left of the editor-form-field.
 */

.pim-editor-scoped-field-container {
    margin:  0 0 0 22em !important;
}

.pim-editor-value-label {
    font-weight: bold;
    display:     inline-block;
    padding-top: 0.5em;
}

/*----------------------------------------------------------------*/
/* End of Editor-classes                                          */
/*----------------------------------------------------------------*/



/*----------------------------------------------------------------*/
/* Start of Quick-View-classes                                    */
/*----------------------------------------------------------------*/
.ui-pim-widget-wrapper {
    height: 100%;
    position: relative;
}

.ui-pim-widget-wrapper.ui-pim-widget-scroll {
    height: 100%;
    overflow-y: auto;
}

.pim-quickview-row {
    padding: 0.4em;
}

.pim-quickview-description {
    font-weight: bold;
    display:     block;
}

.pim-quickview-value {
    display:     block;
}

/*----------------------------------------------------------------*/
/* End of Quick-View-classes                                      */
/*----------------------------------------------------------------*/






/*----------------------------------------------------------------*/
/* GuiHint classes                                                */
/*----------------------------------------------------------------*/

.pim-guihints-highlight input {
    background-color: #ffffcc !important;
}

.pim-guihints-mandatory input {
    background-color: #ffe5e5 !important;
}

.pim-guihints-hidden input {
    background: /* On "top" */
        repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px), /* on "bottom" */
        linear-gradient( to bottom, #eee, #999)
        !important
    ;
}

input.pim-guihints-hidden {
    background: /* On "top" */
        repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px), /* on "bottom" */
        linear-gradient( to bottom, #eee, #999)
        !important
    ;
}

textarea.pim-guihints-hidden {
    background: /* On "top" */
        repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px), /* on "bottom" */
        linear-gradient( to bottom, #eee, #999)
        !important
    ;
}

/*----------------------------------------------------------------*/
/* End of GuiHint classes                                         */
/*----------------------------------------------------------------*/



/*----------------------------------------------------------------*/
/* StylesClasses for toolbar-buttons.                             */
/*----------------------------------------------------------------*/

.pim-titlebar-icon {
    height: 2.0em !important;
}

/*----------------------------------------------------------------*/
/* End of StylesClasses for toolbar-buttons.                      */
/*----------------------------------------------------------------*/



.pim-button-panelheader {
    height: 1.5em;
}

.ui-panel .ui-panel-titlebar-icon, .ui-panel .ui-panel-titlebar-icon:hover, .ui-panel .ui-panel-titlebar-icon:focus {
    height: 1.5em;
}

.ui-icon {
    border-radius: 0 0 0 0 !important;
}

.ui-chkbox .ui-chkbox-box {
    height: 14px !important;
    width: 14px !important;
}

.ui-toolbar .ui-chkbox-box {
    vertical-align: middle;
}

.ui-toolbar .ui-chkbox-label {
    vertical-align: middle !important;
}

.ui-radiobutton {
    margin-right: 8px !important;
}
.ui-radiobutton .ui-radiobutton-box {
    height: 14px !important;
    width: 14px !important;
}

.ui-icon-bullet {
    background-position: -81px -145px !important;
}

.ui-icon-check {
    background-position: -65px -145px !important;
}

.x-pim-hitlist thead tr {
    border-bottom: solid 2px;
}

.x-pim-hitlist thead th, .x-pim-hitlist tfoot td {
    padding: 4px 10px !important;
}

.ui-datatable-resizable thead th, .ui-datatable-resizable tbody td, .ui-datatable-resizable tfoot td {
    padding:       5px 10px 2px !important;
    height:        1.25em;
    border-top:    none;
    border-bottom: none;
    border-right:  none;
}


/*----------------------------------------------------------------*/
/* Style-classes used by filters and its dialogs                  */
/*----------------------------------------------------------------*/
.pim-filterWidget > .ui-panel-content {
    padding: 0.5em !important;
}

input {
    height: 1.5em;
    box-sizing: content-box;
}

.ui-datepicker-trigger.ui-button {
    height: calc( 1.5em + 10px );
}

.filterComponentInput {
    width: calc(100% - 22px) !important;
}

.filterComponentInput.ui-selectonemenu {
    width: calc(100% - 25px) !important;
}

.filterComponentInput .ui-combobox-input {
    width: calc(100% - 46px) !important;
}

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

.advancedSearchInput {
    width: calc(100% - 20px) !important;
}

.pim-chips-combo {
    border: solid 1px;
    height:25px;
    padding: 5px;
    overflow-y: auto;
}

.pim-chips-combo-content {
    display: inline-table;
    width: calc( 100% - 15px );
}

.pim-chips-combo-chip {
    border: solid 1px;
    margin: 2px;
    padding: 2px;
    white-space: nowrap;
    display: inline-block;
}

.pim-chips-combo-caret {
    display: inline;
    width: 5px;
    position: fixed;
}

.pim-chips-combo-overlay {
    width:      450px;
    margin-top: 1.5em !important;
}

.pim-chips-combo-overlay-form {
    padding-bottom: 10px;
}

.pim-chips-combo-overlay-filter {
    width:250px; margin-left: 5px;
}

.ui-calendar.advancedSearchInput input {
}


.advancedSearchInput-range {
    width: calc(50% - 24px) !important;
}

.advancedSearchInput-range-right {
    width: calc(50% - 24px) !important;
    margin-left: 4px !important;
}

.advancedSearchInput input {
    width: calc(100% - 50px) !important;
}

.advancedSearchInput-range input {
    width: calc(50% - 52px) !important;
    margin-top: -2px;
}

.advancedSearchInput-range-right input {
    width: calc(50% - 53px) !important;
    margin-top: -2px;
    margin-left: 1px;
}

.ui-combobox-outer.advancedSearchInput {
    width: 100% !important;
}

.pim-restriction-panel {
    padding-bottom: 0.5em;
    padding-top:    0.5em;
}


.advanced-search-fieldset {
	height: calc( 50% - 2.8em );
	min-height: 10em;
}


.advanced-search-fieldset > .content {
    height: calc( 100% - 3.5em );
    overflow-y: auto;
}

.advanced-search-fieldset > .caption {
    margin:      1em 1em 0 1em;
    font-weight: bold;
}

/*----------------------------------------------------------------*/
/* end of style-classes used by filters and its dialogs.          */
/*----------------------------------------------------------------*/


.ui-datatable-priceHitlist-child-prices-italic {
    font-style: italic;
    color: #707070 !important;
}

.ui-datatable-italic {
    font-style: italic !important;
}

.ui-datatable-bold {
    font-weight: bold !important;
}

.list-composite-more-container {
    max-height: 124px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 12px;
    line-height: 12px;
}

.list-composite-more-items {
    width: auto;
    white-space: nowrap;
    padding: 3px 10px;
}

.list-composite-item {
    width: 100%;
    display: block;
}

.list-composite-more-overlay {
    background-color: #f2f2f2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=90, Color=#004853)";
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=90, Color=#004853);
}

.list-composite-more-overlay .ui-overlaypanel-content {
    padding: 0 !important;
}



.ui-combobox-outer.dashboard-selector {
    width: calc(20em + 20px) !important;
}

.dashboard-selector .ui-combobox-input {
    width: calc(20em + 20px - 4em) !important
}

.ui-combobox-outer.dashboard-selector-big {
    width: calc(30em + 20px) !important;
}

.dashboard-selector-big .ui-combobox-input {
    width: calc(30em + 20px - 4em) !important
}

.toolbar-toggle-button .ui-button-text {
    padding-left: 12px !important;
}


.ui-result-navigator {
	background-color: #fff !important;
}


.x-pim-relation-tree {
    border: none;
    height: calc( 100% - 2px );
    width: 100%;
    overflow-y: auto;
}


.x-pim-widget .ui-widget-content {
    border:        none  !important;
    padding:       0.0em !important;
    margin-bottom: 2px   !important;
}


.pim-icon-indicator-dirty {
    background-image:  url( "/approval/dashboard/img/icons/bullet_blue.gif" ) !important;
    background-repeat: no-repeat !important;
    width: 16px;
    height: 16px;
    padding-left: 16px;
    padding-top: 2px;
}

.pim-icon-indicator-clean {
    background-image:  url( "/approval/dashboard/img/icons/bullet_light_grey.gif" ) !important;
    background-repeat: no-repeat !important;
    width: 16px;
    height: 16px;
    padding-left: 16px;
    padding-top: 2px;
}



.ui-filterpanel-topbar {
    position: absolute;
    top:      0;
    left:     0;
    right:    0;
}

.ui-filterpanel-bottombar {
    position: absolute;
    bottom:   0;
    left:     0;
    right:    0;
}

.ui-filterpanel-content {
    position: absolute;
    top:      35px;
    bottom:   35px;
    left:     0;
    right:    0;
    padding:  0;
}



.advancedSearch-value-column {
    width: 25em ! important;
    padding-left: 2px ! important;
    padding-top: 0 ! important;
}


.ui-datatable-reflow .ui-datatable-data td {
    clear: none !important;
    height: auto;
}

.gpcCombobox input {
	width: 300px;
}

.ui-datatable-editor thead th {
    display: none;
}
.ui-datatable-editor .ui-datatable-data td {
    -moz-box-sizing: border-box;
    border: 0 none;
    display: block;
    float: left;
    text-align: left;
    width: 100%;
}
.ui-datatable-editor .ui-datatable-data td .ui-column-title {
    display: inline-block !important;
    margin: -0.4em 1em -0.4em -0.4em;
    min-width: 30%;
    padding: 0.4em;
    font-weight: bold;
}

.ui-datatable-editor .ui-datatable-data td .ui-column-title:after {
    content: ':';
}


/*
 * style-classes to layout the welcome-page (reporting)
 */
.reporting-panel {
}

.reporting-panel h1 {
    font-size:    1.6em;
}

.reporting-bullet {
    width:   15px;
}

.reporting-label {
    font-size:    1.4em;
}

.reporting-label-count {
    font-size:    1.4em;;
    font-weight: bold;
}

.reporting-panel-publicationstate {
    margin-left: 30px;
    font-size: 1.4em;;
}

.reporting-panel-publicationstate td {
    font-size: 1.4em !important;
    height: 1em !important;
}

.reporting-panel-publicationstate-countcolumn-count-parent {
    text-align: right;
}

.reporting-panel-publicationstate-countcolumn {
    font-weight: bold;
    width: 100%;
    padding-right: 5px;
}

/*-----------------------------------------------------------------*/
/* style-classes for the about-dialog                             */
/*-----------------------------------------------------------------*/
#aboutDialogForm .column1 {
    height:         10em;
    vertical-align: middle;
}

.aboutDialogContent {
    margin: 1em;
}

.downloadsDialogContent {
    margin: 1em;
}
/*-----------------------------------------------------------------*/
/* End of about-dialog                                             */
/*-----------------------------------------------------------------*/



/*-----------------------------------------------------------------*/
/* MediaQueries                                                    */
/*-----------------------------------------------------------------*/

@media (max-width: 50em) {
    .ui-datatable-reflow thead th {
        display: none;
    }
    .ui-datatable-reflow .ui-datatable-data td {
        -moz-box-sizing: border-box;
        border: 0 none;
        display: block;
        float: left;
        text-align: left;
        width: 100%;
    }
    .ui-datatable-reflow .ui-datatable-data td:not(.ui-datatatable-icon) .ui-column-title {
        display: inline-block !important;
        margin: -0.4em 1em -0.4em -0.4em;
        min-width: 30%;
        padding: 0.4em;
        font-weight: bold;
    }

    .ui-datatable-reflow .ui-datatable-data td .ui-column-title:after {
        content: ':';
    }
    
    .ui-new-item {
        font-weight: bold !important;
    }

    .ui-datatatable-icon {
        width: 32px !important;
    }

    .ui-datatatable-icon > .ui-column-title {
        display: none !important;
    }

}


/**
 *
 */
.x-fixed-table .ui-paginator-bottom {
    position:   relative;
    bottom:     0;
    left:       0;
    right:      0;
    text-align: left;
}

.x-fixed-table .ui-datatable-tablewrapper {
    position:   relative;
    top:        0;
    height:     calc(100% - 2.7em);
    overflow: auto;
}

.x-fixed-table {
    height:   100%;
    border:   0 !important;
    overflow: hidden !important;
}



.x-full-table .ui-paginator-bottom {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    text-align: left;
}

.x-full-table .ui-datatable-tablewrapper {
    position:   relative;
    top:        0;
    overflow:   auto;
    height:     calc(100%);
}

.x-full-table {
    height:   100%;
    border:   0 !important;
    overflow: hidden !important;
}



/**
 *
 */
.x-fixed-table-with-toolbar .ui-paginator-bottom {
    position:   relative;
    bottom:     0;
    left:       0;
    right:      0;
    text-align: left;
}

.x-fixed-table-with-toolbar .ui-datatable-tablewrapper {
    position:   relative;
    top:        0;
    overflow:   auto;
    height:     calc(100% - 4em);
}

.x-fixed-table-with-toolbar {
    height:     calc(100% - 4em);
    border:     0 !important;
    overflow:   hidden !important;
    margin-top: 5px;
}


/**
 *
 */
.x-fixed-table-with-toolbar-no-paginator .ui-paginator-bottom {
    position:   relative;
    bottom:     0;
    left:       0;
    right:      0;
    text-align: left;
}

.x-fixed-table-with-toolbar-no-paginator .ui-datatable-tablewrapper {
    position:   relative;
    top:        0;
    overflow:   auto;
}

.x-fixed-table-with-toolbar-no-paginator {
    height:     calc(100% - 4em);
    border:     0 !important;
    overflow:   auto !important;
    margin-top: 5px;
}



.x-wc-ns-layout-outer {
    height:   100%;
}



/*
 *
 */
.x-details-east {
    height:   100%;
    overflow: hidden;
    padding:  0 !important;
    margin:   0 !important;
    display: flex;
    flex-direction: column;
}

.x-details-east,.ui-panel-content {
    height:   100%;
    overflow: hidden;
}

.x-details-east,.ui-panel-content .ui-panel {
    overflow: hidden;
}



/*
 *
 */
.x-details-west {
    height:   100%;
    overflow: hidden;
    padding:  0 !important;
    margin:   0 !important;
}

.x-details-west,.ui-panel-content {
    height:   100%;
    overflow: hidden;
}

.x-details-west,.ui-panel-content .ui-panel {
    overflow: hidden;
}



.widget-small-25 {
    
}

.widget-mid-33 {
    
}

.widget-big-50 {
    
}

.widget-large-75 {
    
}

.ui-paginator {
    display:    inline-block !important;
    width:      calc(100% - 6px) !important;
}



/**
 *
 */
@media ( min-width : 640px ) {
    .x-wc-ns-layout-west {
        float:      left;
        width:      15em;
        border:     solid 1px #a8a8a8;
        height:     calc( 100% - 2px );
        overflow-y: auto;
    }
    
    .x-wc-ns-layout-center {
        width:       auto;
        border:      solid 1px #a8a8a8;
        margin-left: 16em;
        height:      calc( 100% - 2px );
        overflow-x:  hidden;
        overflow-y:  hidden;
    }

}


/**
 *
 */
@media ( max-width : 640px ) {
    .x-wc-ns-layout-west {
        float:      left;
        width:      5.5em;
        border:     solid 1px #a8a8a8;
        height:     calc( 100% - 2px );
        overflow-y: auto;
    }

    .x-wc-ns-layout-center {
        width:       auto;
        border:      solid 1px #a8a8a8;
        margin-left: 6.5em;
        height:      calc( 100% - 2px );
        overflow-x:  hidden;
        overflow-y:  hidden;
    }

}

@media ( max-width : 320px ) {
    .x-wc-ns-layout-outer {
        width:       100%;
        height:      100%;
        overflow-x:  hidden;
        overflow-y:  auto;
    }

    .x-wc-ns-layout-west {
        width: 100%;
    }

    .x-wc-ns-layout-center {
        width: 100%;
        clear: both;
    }

    .ui-paginator-current {
        display: none !important;
    }

}


/**
 * specific layouts.
 */
#participantForm {
    height: 100%;
}

.pim-link {
    text-decoration: none;
    color:           #004853 !important;
    cursor:          pointer;
}

.pim-link-neutral {
    text-decoration: none;
    outline:         none; 
    cursor:          pointer;
}

.pim-nowrap {
	white-space: nowrap;
}

.jqplot-grid-canvas {
    visibility: hidden;
}

.jqplot-table-legend {
    visibility: hidden;
}

h1 {
    font-size: 36px;
    font-style: normal;
    font-weight: normal;    
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    color: #000000;
}

h2 {
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    color: #454545; /* default text color */
}

h3 {
    font-size: 18px; 
    color: #919195;
    font-style: normal;
    font-weight: normal;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

h4 {
    font-size: 14px; 
    color: #454545; /* default text color */
    font-style: normal;
    font-weight: bold;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    margin-top: 0;
    margin-bottom: 0.5em;
}
   
.ui-datascroller .ui-datascroller-item {
    min-height: 120px;
}

.ui-pim-widget .ui-datascroller .ui-datascroller-item {
    min-height: auto;
}

.userDashboard {
    background-color: #f2f2f2;
}

.dashboardPanel {
    border: none;
    background-color: #f2f2f2;
    max-width: 1200px;
    margin: auto;
}

.dashboardPanel .pim-link {
    font-size:22px !important;
}


.pe-blockui {
     position: absolute !important; 
     margin: auto !important; 
     top: 0 !important; 
     right: 0 !important; 
     bottom: 0 !important; 
     left: 0 !important; 
     width: 300px !important; 
     height: 80px !important;
}

.pe-blockui .pe-blockui-content {
    height: 100%;
    padding: 1em !important;
}

.jqplot-highlighter-tooltip { 
    background: rgba(208, 208, 208, 1) none repeat scroll 0 0 !important;
    border: 1px solid #004853 !important;
    color: #004853 !important;
    font-size: 14px !important;
    padding: 3px !important;
}

.jqplot-target {
    color: #fff !important;
}

.login-table {
    border-style: none !important;
}

.login-table-row {
    border-style: none !important;
}

.login-table-cell {
    border-style: none !important;
    padding: 4px 5px !important;
}

/**
 * Define the paddings inside a gridlayout.
 */
.ui-panelgrid .ui-panelgrid-cell {
    padding: 0.1em 0.5em;
    vertical-align: top !important;
}



.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 500px;
}



.pim-dialog > .ui-dialog-titlebar {
    background-color: #fff;
}

.pim-dialog > .ui-dialog-content {
    margin: 1em;
}

.pim-dialog .dialog-button-bar {
    text-align: right;
    margin-top: 1em;
}
.pim-dialog .dialog-button-bar > button {
    margin-right: 0!important;
}



.ui-dialog.contentscrol > .ui-dialog-content {
    overflow: auto !important;
} 



.ui-widget-content {
    color: #004853; /* default text color */
}

.ui-widget-header {
    color: #454545; /* default text color */
}

.ui-chart-text {
    line-height: 1em !important;
}

a.ui-chart-link {
    font-weight: bold;
    text-decoration: none;
    font-size: 15px !important;
}

/**
 * StyleClasses for the reporting - dashboard.
 */
.userDashboard {
    background-color: #c4c4c4;
}

#userDashboardForm {
    overflow: auto;
    background-color: #f2f2f2;
}


.ui-working-panel {
    margin: 2em 1em 1em;
    padding: 2em !important;
    border: none;
    float: left;
}


.ui-working-panel .column1 {
    width:     1em;
    font-size: 2em;
    padding: 0 .5em 0 0 !important;
}

.ui-working-panel .column2 {
    width: calc(100% - 35em - 3em);
}

.ui-working-panel .column3 {
    width: 20em;
}

.ui-working-panel .column3 .ui-menu.ui-menu-dynamic {
    width: 15em;
}

.ui-working-panel .column3 .ui-menubutton {
    border: none;
}

.small-menu {
    width: 15em !important;
}

.ui-working-panel .column3 .ui-menubutton button {
    border: none;
    background-color: inherit !important;
    color:            inherit !important;
    padding: 0 20px 0 20px;
}

.ui-working-panel .column1 > .fa {
    padding: 0 !important;
}

.ui-working-panel .column3 button {
    background-color: #004853 !important;
    color:            #fff;
    font-size: large !important;
}

.ui-working-panel .column3 button > .fa {
    font-size:       large !important;
    margin-top: -8px;
    margin-left: 20px;
}

.ui-working-panel .column3 .ui-button-text-icon-left .ui-button-text {
    padding: .5em 1em .3em 2.1em;
    font-weight: bold;
}


#userDashboardForm .ui-panel-titlebar {
    background-color: #fff !important;
    border:           none !important;
    border-bottom:    solid 1px #c8c8c8 !important;
}

.dashboard-panel-simple {
    box-sizing: border-box;
    overflow: hidden;
    border: none;
    margin:  15px;
    padding: 0 !important;
    height:  500px;
    float: left;
}

.dashboard-panel {
    box-sizing: border-box;
    overflow: hidden;
    border: none;
    margin:  15px;
    padding: 10px 20px 20px !important;
    height:  500px;
    float:   left;
}

.dashboard-panel-info {
    float: right;
    text-decoration: none;
    font-size: 22px;
}

.dashboard-panel-info .fa{
    font-size: 16px;
}

.dashboard-panel-flat {
    height:  100px !important;
}

.dashboard-panel-top {
    margin: 30px 15px 15px;
}

.dashboard-panel-1 {
    width:   calc(100px - 32px);
}
.dashboard-panel-2 {
    width:   calc(200px - 32px);
}
.dashboard-panel-3 {
    width:   calc(300px - 32px);
}
.dashboard-panel-3.reportPanel {
    width:   calc(300px - 26px);
    min-height: 238px;
}
.dashboard-panel-4 {
    width:   calc(400px - 32px);
}
.dashboard-panel-5 {
    width:   calc(500px - 32px);
}
.dashboard-panel-6 {
    width:   calc(600px - 32px);
}
.dashboard-panel-7 {
    width:   calc(700px - 32px);
}
.dashboard-panel-8 {
    width:   calc(800px - 32px);
}
.dashboard-panel-9 {
    width:   calc(900px - 32px);
}
.dashboard-panel-10 {
    width:   calc(1000px - 32px);
}
.dashboard-panel-11 {
    width:   calc(1100px - 32px);
}
.dashboard-panel-12 {
    width:   calc(1198px - 32px);
}

.dashboard-panel-1-simple {
    width:   calc(100px - 32px);
}
.dashboard-panel-2-simple {
    width:   calc(200px - 32px);
}
.dashboard-panel-3-simple {
    width:   calc(300px - 32px);
}
.dashboard-panel-4-simple {
    width:   calc(400px - 32px);
}
.dashboard-panel-5-simple {
    width:   calc(500px - 32px);
}
.dashboard-panel-6-simple {
    width:   calc(600px - 32px);
}
.dashboard-panel-7-simple {
    width:   calc(700px - 32px);
}
.dashboard-panel-8-simple {
    width:   calc(800px - 32px);
}
.dashboard-panel-9-simple {
    width:   calc(900px - 32px);
}
.dashboard-panel-10-simple {
    width:   calc(1000px - 32px);
}
.dashboard-panel-11-simple {
    width:   calc(1100px - 32px);
}
.dashboard-panel-12-simple {
    width:   calc(1200px - 32px);
}

@media ( max-width: 1230px ) {
    .dashboard-panel-1 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-2 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-3.reportPanel {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-3 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-4 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-5 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-6 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-7 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-8 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-9 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-10 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-11 {
        width:   calc(100% - 32px);
    }
    .dashboard-panel-12 {
        width:   calc(100% - 32px);
    }

}


.fa-lightgray {
    color: #d3d3d3;
}

.fa-darkgray {
    color: #b1b1b1;
}


.ui-dashboard-text {
    color: #333; /* default text color */
    font-size: 13px;
    display: inline-block;
    padding-bottom: 0.1em;
    line-height: 1.4em;
}

.dashboard-panel-simple #iframe {
    overflow: hidden !important;
}

/* TODO check usage */
#userDashboardForm\3a customerSlot1Panel_content > iframe > body {
    overflow: hidden !important;
}


.reportPanel {
    margin: 2em 1em 1em;
    padding: 1em !important;
    border: none;
    float: left;
    height: 700px;
    overflow: auto;
}

.parent-row {
    background-color: #ddd;
}



textarea.ui-input-readonly {
    overflow: auto !important;
}

.ui-input-readonly {
    color: #999999 !important;
}

.ui-input-readonly .ui-combobox-input {
    color: #999999 !important;
}

.ui-input-readonly > span > .hasDatepicker {
    color: #999999 !important;
}

.ui-paginator-page.ui-state-active {
    background-color: #cfcfcf
}

.ui-confirm-dialog-severity {
    display: none !important;
}



.ui-db-tabview {
    border:   none;
    position: absolute;
    bottom:   15px;
    left:     0;
    right:    0;
}


.ui-db-tabview .ui-state-default.ui-corner-top.ui-tabs-selected.ui-state-active {
    background-color: #FFF;
}

.ui-db-tabview .ui-state-default.ui-corner-top {
    background-color: #d3d3d3;
    margin: 5px 0.2em -1px 0.2em;
    height: calc(100% - 10px);
    padding: 4px 0 1px 0;
}


.ui-db-tabview .ui-tabs-nav {
    background-color: transparent;
    height:           30px;
    padding-top:      2px;
    padding-left:     1em;
}


.ui-db-tabview .ui-tabs-nav .ui-state-default * {
    background-color: inherit;
    color:            #d2d2d2;
}

.ui-db-tabview .ui-tabs-nav .ui-tabs-selected * {
    background-color: #FFF;
    color:            #191919;
}

.pim-report-value {
    font-size: 22px;
    display: block;
}

.pim-report-msg {
    font-size: 13px;
    display: block;
}

.pim-report-normal {
    font-size: 11px;
    display: block;
}

.pim-report-time {
    display: inline !important;
}

.pim-report-link {
    font-size: 13px;
    display: block;
    color: #004853;
}

.pim-report-item {
    padding-bottom: 10px !important;
    border: none;
    float: left;
    box-sizing: border-box;
}

.pim-report-item-full {
    width: 100%
}

.pim-report-item-half {
    width: 50%
}

.pim-report-panel {
    height: 140px;
    border: none; 
    position: relative;
}

.pim-report-item .ui-panel-content {
    padding-bottom: 2px !important;
}

#userDashboardForm.ui-tabs-panel .ui-widget-content .ui-corner-bottom {
    padding: 2px !important;
    background-color: #d3d3d3;
}



/*-----------------------------------------------------------------*/
/* picklist-styles                                                 */
/*-----------------------------------------------------------------*/

.ui-picklist {
    width: 100%;
    display: flex !important;
    height: calc( 100% - 1em ) !important;
}

.ui-picklist .ui-picklist-list {
    width: 100% !important;
    height: calc( 100% - 4em ) !important;
}

.ui-picklist-buttons-cell {
    display: table;
    margin: 0 auto;
}

.ui-picklist .ui-picklist-filter {
    width: calc( 100% - 19px ) !important;
}


.ui-picklist-buttons {
    width: 40px;
}

.ui-picklist .ui-picklist-buttons {
    display: flex !important;
    align-items: center;
    height: 100% !important;
}

.ui-picklist .ui-picklist-filter-container .ui-icon {
    top: 1px !important;
}

.ui-picklist .ui-picklist-filter {
    margin-bottom: 8px;
    width: 100% !important;
}

.ui-picklist-button-remove-all {
    display: none !important;
}

.ui-picklist-button-add-all {
    display: none !important;
}

.ui-picklist-list-wrapper {
    width: calc( 50% - 26px );
}

.ui-picklist > div {
    display: inline-block !important;
}


.ui-picklist-caption {
    width: 100%;
}

/*-----------------------------------------------------------------*/
/* End of picklist-styles                                          */
/*-----------------------------------------------------------------*/



.ui-toolbar  .ui-button .fa {
    padding-top: 1px;
}


.ui-layout-resizer-north-open {
    display: none;
}

.toplevel-toolbar .ui-mainmenu-item-icon-only.ui-state-hover {
    background-color: inherit !important;
}   

.ui-sectionFilter .ui-filter-group td {
	padding-top: 10px !important;
}

.ui-sectionFilter .ui-filter-field .ui-panelgrid-cell {
	padding: 0 2px !important;
}



.toolbar-buttons-right {
    float: right;
}

.ui-pim-widget .ui-widget-content {
    border: none;
}

.ui-pim-widget .ui-datatable tbody td {
    border-color: rgb(221, 221, 221);
    
}

.pim-thumbnail {
    max-height: 64px;
    max-width:  64px;
}

.pim-thumbnail-small {
    max-height: 56px;
    max-width:  56px;
}

.mainForm-rightSide .ui-tabs-panel.ui-widget-content {
    height: 100%;
    width:  100%;
    padding: 0;
}

.pim-fullsize {
    height: 100%;
    width:  100%;
}

.pim-media-image-div {
    width: 50px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #95989a;
    white-space: nowrap !important;
}

.pim-media-image-div-big {
    width: 250px;
    height: 250px;
    padding: 10px 10px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #95989a;
}

.pim-media-image-div .ui-widget-content {
    display: inline;
}

.pim-media-image {
    max-height: 64px;
    max-width:  64px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.pim-media-image-big {
    max-height: 250px;
    max-width:  250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.pim-media-grid {
    width: 100%;
    border: none;
    display: inline-block;
    margin-left: 5px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.pim-media-grid .pim-media-info {
    border: none;
    margin-bottom: 5px !important;
}

.ui-datatable tbody td .pim-media-image-panel {
    width: 74px;
}

.pim-media-grid .pim-media-image-panel {
    width: 76px;
    height: 90px;
    float: left;
    margin-right: 10px !important;
    border: none;
}

.pim-media-grid .pim-media-info-panel {
    display: inline-block;
    position: relative;
    height: 76px;
    border: none;
    width: calc(100% - 100px);
}

.pim-media-grid .pim-media-info-panel h4 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.pim-media-grid .pim-media-info-panel .ui-dashboard-text {
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.pim-media-grid .pim-media-item-actions {
    border: none;
    line-height: 1.5em;
}

.pim-media-grid .pim-commandlink {
    display: inline-block;
    margin-right: 10px;
    font-size: 13px;
    white-space: nowrap;
    line-height: 1em;
}

.pim-media-grid panel {
    border: none;
}


.pim-commandlink {
    color: #004853 !important;
}

.pim-commandlink .linkIcon{
    padding-top: 5px
}
.pim-commandlink .linkText{
    margin-left: 5px
}
/*
.pim-media-grid table tr td {
    padding: 4px 0;
}
*/

.pim-media-relations {
    height: calc( 100% - 10px );
}



.ui-tabs.ui-tabs-top>.ui-tabs-nav {
    padding: .2em .2em 0;
    background-color: #fff;
    height: 36px;
    border-bottom: 5px #dcdcdc solid;
}

.ui-tabs.ui-tabs-top>.ui-tabs-nav li {
    margin: 5px 0.2em 0 0.2em;
    height: calc(100% - 16px);
    padding: 6px 0 3px 0 !important;
    bottom: -2px !important;
    top: initial !important;
}

.ui-tabs.ui-tabs-top>.ui-tabs-nav .ui-state-default {
    background-color: #919195
}

.ui-tabs.ui-tabs-top>.ui-tabs-nav .ui-state-default * {
    color: #fff;
}

.ui-tabs.ui-tabs-top>.ui-tabs-nav .ui-state-default.ui-corner-top.ui-tabs-selected.ui-state-active {
    background-color: #DCDCDC
}

.ui-tabs.ui-tabs-top>.ui-tabs-nav .ui-state-default.ui-corner-top.ui-tabs-selected.ui-state-active * {
    color: #323232;
}

.ui-nowrap-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

/*-----------------------------------------------------------------*/
/* Start of compaign panels styles                                 */
/*-----------------------------------------------------------------*/
.campaign-panel-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.campaign-panel-container .campaign-panel-close {
    margin-left: auto;
    align-self: flex-start;
    position: relative;
    font-size: 18px;
}

.campaign-panel-container .campaign-panel-close button {
    color: #31708f;
    border: none;
    background: transparent;
}

.campaign-panel-container .campaign-panel-close button.ui-state-active {
    color: #31708f;
    border: none;
    background: transparent;
}

.campaign-panel-container .campaign-panel-close button * {
    display: none;
}

/*-----------------------------------------------------------------*/
/* end of compaign panels styles                                 */
/*-----------------------------------------------------------------*/

.confirmCookie .ui-main-group {
    padding: 30px;
}

.confirmCookie .ui-text {
    display: block;
}

.confirmCookie .ui-title {
     display: block;
     font-size: 20px;
     font-weight: bold;
    color: #004853;
}

.confirmCookie td {
    vertical-align: top;
}

.confirmCookie table {
    margin-bottom:  25px;
    width:100%;
}

.confirmCookie .ui-panelgrid-even {
    border: none transparent;
}

.confirmCookie .ui-panelgrid-odd {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid darkgray;
}

.confirmCookie .ui-panelgrid-even .ui-panelgrid-cell {
    padding: 10px 0 4px 0;
}

.confirmCookie .ui-panelgrid-odd .ui-panelgrid-cell {
    padding: 0 0 10px 0;
}


.confirmCookie td {
    border: none !important;
}

.confirmCookie .ui-disabled {
    color: darkgray;
}

.confirmCookie .ui-bold {
    font-weight: bold;
}

.confirmCookie {
    font-size: 13px;
}


.ui-message-error-detail {
    vertical-align: sub;
}

.ui-separator {
    width: 10px;
}

.ui-nutrition-preview {
    padding: 1em 5em 1em 0;
    margin: 1em 0.5em;
    background-color: #e9e9e9;
}

.ui-nutrition-preview-dialog .ui-action-workflow {
    position: absolute;
    top: 2em;
    right: 2em;
    display: grid;
}

.ui-nutrition-preview .ui-title {
    display: block;
    font-size: 17px;
    font-weight: bold;
    padding: 0 0 8px 10px;
}

.ui-nutrition-preview .ui-title {
    display: block;
    font-size: 17px;
    font-weight: bold;
    padding: 0 0 8px 10px;
}

.ui-nutrition-preview .ui-description {
    display: block;
    padding: 0 0 5px 10px;
}

.ui-working-panel .ui-splitbutton .ui-button.ui-splitbutton-menubutton {
    bottom: 0;
    width: 25px;
}

.ui-working-panel .ui-action-workflow > button {
    background-color: inherit;
}

.ui-working-panel .ui-action-workflow .ui-state-default {
    color: inherit;
 }

.ui-paginator .ui-button {
    margin-top: 0;
    overflow: hidden;
}

.ui-datatable .ui-selection-column .ui-chkbox-all {
    margin-top: -3px !important;
}

.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td, .ui-datatable tfoot th {
    padding: 7px 10px 2px;
}

.pim-hitlist-details.ui-tabs .ui-tabs-panel {
    padding: 0;
}

.dynamicChild.ui-panel-content-scroll > .ui-panel-content {
    overflow: hidden !important;
}

.x-details-east .ui-info-videos .ui-pim-widget {
    border-bottom: solid #919195 2px !important;
    overflow:auto;
}

.x-details-east .ui-info-videos .ui-panel-content {
    height: calc(100% - 24px);
    overflow: auto;
}

.pim-bold {
    font-weight: bold;
}

.pim-cursor-pointer {
	cursor: pointer;
}
.ui-singletime-border {
    border: 2px solid #068a5e !important
}

.ui-pim-widget .ui-widget-content .ui-visual-validation {
    padding: 10px;
}

.ui-pim-widget .ui-widget-content .ui-select {
    display: block;
    margin: 10px 0;
}

.ui-pim-widget .ui-widget-content .ui-button {
    margin: 0 10px;
}

.pim-editor-navigation-upper-content .pim-quickAccess {
    text-decoration: none;
    padding-left: 0;
    position: relative;
}

.pim-editor-navigation-upper-content .pim-quickAccess .pim-bubble {
    margin: 0 0 0 1em;
}

.pim-editor-navigation-upper-content .pim-attribute-finder {
    margin: 0.5em 0 1em;
}

.pim-bubble {
    color: #fff;
    background-color: #fc0404;
    border-radius: .7em;
    padding: .20em .6em .1em .6em;
    text-align: center;
    margin: 0 3px;
}

.full-toolbar {
    background: #f2f2f2;
    border: none;
}

.full-toolbar .ui-panel-content {
    display: flex;
}

.full-toolbar .pim-quickview-row  {
    overflow: hidden;
}

.full-toolbar .pim-quickview-row > label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-layout-pane-north {
    background-color: #f2f2f2;
}

.ui-layout-pane-north > .ui-layout-unit-content {
    background: #f2f2f2;
    border: none;
}

.pim-working-panel-content {
    display:inline-block;
    padding: 20px;
    width: 100%
}

.pim-item-profile {
    max-width: 250px;
    max-height: 74px;
    padding-right: 10px;
    margin-right: 10px;
}

.supplierItemDetailsToolbar .ui-toolbar-group-left {
    width: 100%;
    text-align: right;
}

.full-toolbar .pim-media-image-panel {
    margin: 0 10px;
}

.pim-split-button.ui-menu .ui-menuitem-link {
    padding: .5em !important;
    box-sizing: border-box;
}

.pim-split-button .ui-menu {
    padding: 0 !important;
}

.pim-split-button .ui-menuitem {
    margin: 0 !important;
}

.pim-split-button.ui-shadow {
    padding: 0;
}

.ui-label {
    display: inline-block;
}

/*#errorGrowl_container .ui-growl-item-container {*/
/*    background-color: #f8d7da;*/
/*    color: #fff;*/
/*}*/

/*#infoGrowl_container .ui-growl-item-container {*/
/*    background-color: #d9edf7;*/
/*    color: #fff;*/
/*}*/

.ui-growl-image {
    display: none;
}

.ui-growl-message {
    float: left;
}

.ui-growl-error {
    background-color: #f37321;
    opacity: 0.95;
    color: #fff;
}

.ui-growl-item-container {
    box-shadow: none !important;
}

.ui-growl-info {
    background-color: #248c8f;
    opacity: 0.95;
    color: #fff;
}

.ui-growl-image {
    font: normal normal normal 26px/1 FontAwesome;
    background: none !important;
    text-align: center;

}

.ui-growl-image-info:before {
    content: "\f05a";
}

.ui-growl-image-error:before {
    content: "\f06a";
}

.ui-toolbar .ui-action-default-workflow:hover {
    background-color: #e5e5e5 !important;
}
.ui-toolbar .ui-action-workflow:hover {
    background-color: #e5e5e5 !important;
}
.ui-toolbar .ui-action-negative-workflow:hover {
    background-color: #e5e5e5 !important;
}

.ui-button:focus {
    outline: none;
    background-color: #e5e5e5 !important;
}

.ui-menu .ui-menuitem-link.pim-menu-section {
    border: none;
    background-color: white;
    width: 100%;
    /*border-bottom: #cccccc 2px solid;*/
}

.ui-menu .ui-menuitem-link.pim-menu-section .pim-entry{
    vertical-align: sub;
    margin: 4px;
    font-weight: bold;
}

.ui-menu .ui-menuitem-link.pim-menu-section .pim-bubble {
    font-weight: bold;
    background-color:#919195;
    color:#eee;
    float: right;
    padding-left: unset;
    padding-right: unset;
    width: 60px;
}

.ui-module-toolbar-upper .ui-splitbutton:focus-within {
    outline: none;
    background-color: #e5e5e5 !important;
}

.response-dialog .ui-dialog-titlebar {
    display: none;
}

.iframe-selektor {
    position: relative;
    margin: 15px 18px 15px 15px;
    padding-top: 13.88%;
    overflow: hidden;
}

.iframe-selektor iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 0;
    top: 0;
    left: 0;
}

/*.readonly {*/
/*    background-color: #f1a899;*/
/*}*/

::placeholder {
    color: transparent;
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
}

.nutrient-switch {
    background-color: #e9e9e9;
    padding: 5px;
}

.nutrient-switch-container {
    display: flex;
    justify-content: flex-end;
}

.cic-widget .ui-state-highlight {
    background: inherit;
}

.nutrient-mopinion-container {
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
}

.qtip-content li {
    list-style: inside;
}

.qtip-content ul {
    margin: 7px 0;
}

.qtip-content b {
    font-weight:  bold;
}

/*
 * begin
 * used by composite component <pim:squareImage />
 */
.square-image {
    display: flex;
    border: 1px solid #dddddd;
    background-color: #fff;
}

.square-image-content {
    margin: auto;
    object-fit: contain;
}

.square-image.pim-valid {
    color: inherit;
    border-left: 7px solid #004853;
}

.square-image.pim-invalid {
    color: inherit;
    border-left: 7px solid #ff0000;
}

/*
 * end
 * used by composite component <pim:squareImage />
 */

.tab-header .tab-header-label {
    max-width: 15rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-header .tab-header-label-icon {
    max-width: 15rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    float: right;
}

.dqx-bubble {
    margin: 3px;
    display: inline-block;
}

.ui-state-disabled.showTooltip {
    pointer-events: all;
}

.beta-pill::after {
    border-radius: 10px;
    background: #5B9D99;
    color: white;
    content: "\00a0 \00a0 BETA \00a0";
    margin-left: 0.5em;
}