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


/*-----------------------------------------------------------------*/
/*                                                                 */
/*    This file contains styleSheet definitions specialized for    */
/*                            APPROVAL                             */
/*                                                                 */
/*-----------------------------------------------------------------*/


.approval-menubar-logo {
    background-color: #f2f2f2;
    color: #666666;
    font-size: x-large;
}


/*-----------------------------------------------------------------*/
/* GDSN Message-Dialog (Review/Reject)                             */
/*-----------------------------------------------------------------*/
.gdsn-message-dialog-combobox .ui-combobox-input {
    width: 27em !important;
}

/*-----------------------------------------------------------------*/
/* End of GDSN Message-Dialog (Review/Reject)                      */
/*-----------------------------------------------------------------*/


/*-----------------------------------------------------------------*/
/* Export Dialog                                                   */
/*-----------------------------------------------------------------*/

.approval-export-error-message {
    border: none;
    float: left;
    width: 49%;
    padding-left: 5px;
    padding-top: 5px;
    color: #ff0000;
}

/*-----------------------------------------------------------------*/
/* End of Export Dialog                                            */
/*-----------------------------------------------------------------*/


.itemdetails-widget-tab {
    height: 100%;
}

.itemdetails-widget-tab .ui-tabs-panels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 21px;
    overflow: auto;
}

.itemdetails-widget-tab .ui-tabs-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.approval-dashboard-uipanelgrid {
    font-size: 16px !important;
}

.approval-dashboard-text-align-right {
    text-align: right;
}

.approval-dashboard-font-weight-bold {
    font-weight: bold;
}

.approval-dashboard-col-width {
    width: 200px;
}


.pim-navigation-menu {
    top: 3em;
    bottom: 2.9em;
    left: 0;
    right: 0;
    background: none;
    border: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.pim-navigation-menu * {
    text-decoration: none;
}

.pim-navigation-menu-entry.pim-menu-entry.relations {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    padding-left: 1em;
    text-decoration: none;
    line-height: 13px;
    border-top: solid 1px;
    border-bottom: solid 1px;
}


.psd-confirmation-content .pim-preview-navigation {
    display: none;
}

.ui-dashboard-text {
    font-size: 13px !important;
    display: inline-block;
    padding-bottom: .1em;
    line-height: 1.4em;
}

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

/*-----------------------------------------------------------------*/
/* StyleClasses for rendering Userdashboard Reporting              */
/*-----------------------------------------------------------------*/

.reporting-navigator {
    float: right;
}

.reporting-content {
    float: left;
}

.reporting-navigator .ui-combobox-input {
    width: 200px;
}

.reporting-content .ui-panelgrid .ui-panelgrid-cell {
    padding: .1em .2em !important;
}

.reporting-header-info {
    font-size: 20px !important;
    font-weight: bold;
}

.reporting-content-panel {
    margin-bottom: 10px;
}

.reporting-content-twitter {
    border: solid 1px;
    width: 20em;
    right: 1em;
    top: 3em;
    bottom: 1em;
    position: absolute;
}

.reportPanel {
    height: auto !important;
}

/*-----------------------------------------------------------------*/
/* End StyleClasses for rendering Userdashboard Reporting          */
/*-----------------------------------------------------------------*/


/**
 * Editor-Form-Fields - specialiced for the #psdConfirmationItemDialog editor
 */
#psdConfirmationItemDialog .pim-formfield-label {
    width: 15em !important;
}

#psdConfirmationItemDialog .editor-row-value {
    width: calc(100% - 22em) !important;
}

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

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

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

#psdConfirmationItemDialog .ui-combobox-outer.propertyEditorFormField {
    width: calc(100% - 7em + 20px) !important;
}

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

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

/**
 * Editor-Form-Fields - specialiced for the #psdConfirmationItemDialog editor
 */
#psrConfirmationItemDialog .pim-formfield-label {
    width: 15em !important;
}

#psrConfirmationItemDialog .editor-row-value {
    width: calc(100% - 22em) !important;
}

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

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

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

#psrConfirmationItemDialog .ui-combobox-outer.propertyEditorFormField {
    width: calc(100% - 7em + 20px) !important;
}

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

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

#uploadValidationBundleDialogForm .bundleFileLabel {
    width: 100%;
    display: block;
    margin: 5px 5px;
}

#uploadValidationBundleDialogForm .bundleFileUpload .bundleFilename {
    position: absolute;
    display: block;
    margin: 7px 5px;
    width: 265px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 15px;
}

.dialog-item-line {
    width: 100%;
    display: block;
    margin: 10px 5px;
}

/*-----------------------------------------------------------------*/
/* Start of StyleClasses for campaign panels                       */
/*-----------------------------------------------------------------*/
.ecommerce-attribute-campaign-content {
    margin: 25px;
}

.ecommerce-attribute-campaign-container {
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
}

.ecommerce-attribute-campaign-container .ecommerce-attribute-campaign-image {
    width: 100%;
    height: 186px;
    background: url("/approval/resources/images/campaign/banner_ui_1166.svg") no-repeat;
    background-size: contain;
}

.login_main .ecommerce-attribute-campaign-container .ecommerce-attribute-campaign-image {
    height: 80px;
}

.ecommerce-attribute-campaign-container .ecommerce-attribute-campaign-image_en {
    width: 100%;
    height: 186px;
    background: url("/approval/resources/images/campaign/banner_ui_1166_en.svg") no-repeat;
    background-size: contain;
}

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

.ecommerce-attribute-campaign-container .ecommerce-attribute-campaign-text .ecommerce-attribute-campaign-title {
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
    color: #31708f;
    width: 100%;
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}

.ecommerce-attribute-campaign-container .ecommerce-attribute-campaign-text .ecommerce-attribute-campaign-description {
    font-size: 13px;
    color: #454545;
    width: 100%;
    display: block;
    cursor: pointer;
}

.ecommerce-attribute-campaign-container .ecommerce-attribute-campaign-button {
    margin-left: auto;
    margin-right: 75px;
    font-size: 13px;
    color: #454545;
    width: 120px;
    height: 32px;
    display: block;
    background-color: #fff;
    border: 1px solid #95989a;
    text-align: center;
    line-height: 32px;
    vertical-align: middle;
}

.pim-ul:hover {
    background-color: aliceblue;
}

.pim-ks-attribute-selector {
    width: 16px;
    height: 16px;
    color: #31708f !important;
    background: none !important;
    border: none !important;
    position: absolute !important;
    margin-left: -16px !important;
    margin-top: -4px !important;
    outline: none;
}

.pim-ks-attribute-selector .ui-icon {
    left: 0 !important;
    font-size: 16px !important;
    outline: none;
}

.pim-ks-attribute-selector .ks-attr-comment {
    width: 8px;
    height: 8px;
    font-size: 7px !important;
    margin-left: -10px;
    color: #0000ff;
}

.pim-ks-attribute-selector .ks-attr-not-relevant-system {
    color: #4f4f4f;
}

.pim-ks-attribute-selector .ks-attr-not-relevant {
    color: #f37321;
}

.pim-ks-attribute-selector .ks-attr-correct {
    color: #009e5c;
}

.pim-ks-attribute-selector .ks-attr-error {
    color: #fc0404;
}

/* assets viewer css*/
.vertical-centred_top45 {
    position: relative;
    top: 45%;
    transform: translateY(-50%);
}

.vertical-centred_top50 {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.asset {
    max-width: 150px;
    max-height: 150px;
}

.assetsViewer {
    border: none;
    height: 100%;
}

.assetsViewer .ui-panel-content {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-y: scroll;
}

.assetsViewer .asset-container {
    width: 200px;
    height: 270px;
    display: flex;
    flex-direction: column;
    border: 1px solid #dddddd;
    margin: 10px;
}

.assetsViewer .asset-image {
    margin: auto;
    width: 100%;
    flex: 1 1 auto;
    align-items: center;
    justify-items: center;
    display: flex;
    justify-content: center;
}

.assetsViewer .asset-image img {
    max-width: 200px;
    max-height: 200px;
}

.assetsViewer .asset-container .asset-name,
.assetsViewer .asset-container .asset-type {
    width: 90%;
    display: block;
    margin: 10px auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 14px;
}


.assetDialogDetails {
    text-align: center;
    border: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.downloadButtonContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.maxSize {
    max-width: 100%;
}

.assetsViewer_message {
    height: 100%;
    text-align: center;
    font-size: 1.5em;
}

.pdfViewer, .pdfViewer .media {
    width: 100%;
    height: 100%;
}

.videoContainer {
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
    padding: 1rem;
}

.videoContainer video {
    width: 80% !important;
    height: auto !important;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.videoContainer video::-webkit-media-controls-fullscreen-button {
    display: none;
}

.assetDialog .file-name {
    float: left
}

.assetDialog .compress-icon {
    float: right
}

.assetDialog .expand-icon {
    float: right;
    margin-right: 10px
}

.assetDialog .dialog-detail {
    text-align: center;
    border: 0
}

.assetsWidget {
    display: block;
    height: auto;
    width: 100%;
    position: relative;
}

.assetsList {
    border: none;
    height: 100% !important;
    overflow: auto;
    position: relative;
}

.assetsList .no-data-message {
    padding: 20px !important;
    height: auto;
}

.assetsWidget.vertical_layout {
    flex-direction: column;
}

.assetsWidget .ui-blockui-content {
    top: 45% !important;
}

.assetsWidget .assetContainer {
    min-width: 150px;
    min-height: 150px;
    width: 150px;
    height: 150px;
    margin: 10px;
    border: 1px solid #dddddd;
    text-align: center;
    line-height: 150px;
    padding: 1px;
    display: flex;
    position: relative;
}

.assetsWidget .assetContainer img {
    max-width: 150px;
    max-height: 150px;
}

.assetsWidget .assetContainer.asset-type-DQX {
    border: 1px solid #ff891e;
}

.assetsWidget .assetContainer a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.asset-status {
    font-size: 20px;
    position: absolute;
    top: 0;
    right: 0;
}

.asset-status .asset-validationmessages {
    width: 0;
    height: 0;
}

.asset-status:hover .asset-validationmessages {
    width: auto;
    height: auto;
}

.trusturl-status {
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
}

.assetsWidget .assetRow {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100px;
}

.assetsWidget .assetRow .assetRow-image {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    margin: 5px;
    border: 1px solid #dddddd;
    text-align: center;
    line-height: 80px;
    padding: 1px;
    float: left;
}

.assetsWidget .assetRow .assetRow-image img {
    max-width: 80px;
    max-height: 80px;
}

.item-list-assets-widget,
.external-tradeitem-assets-widget {
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    overflow-x: auto;
    min-height: 185px;
}

.external-items-assetsTab.assetsWidget .ui-blockui-content {
    top: 30% !important;
    left: 40% !important;
}

.overflow_hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assetDescription {
    padding: 10px 5px 10px 5px;
    line-height: 1.5em;
}

.addNewAssetButton {
    margin: 5px;
    width: 200px;
}

.itemAssetManagementDialogContent .iam-title {
    margin: 20px;
}

.itemAssetManagementDialogContent .iam-fileupload {
    position: relative;
    height: 200px;
    width: 60%;
    display: block;
    margin: auto;
    text-align: center;
    border: 1px dotted black;
}

.itemAssetManagementDialogContent .iam-fileupload .ui-fileupload-content {
    display: none;
}

.itemAssetManagementDialogContent .iam-fileupload .ui-fileupload-buttonbar {
    width: 140px;
    border: none;
    background: none;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -70px;
}

.itemAssetManagementDialogContent .iam-fileupload-text {
    width: 100%;
    line-height: 2.2em;
    margin-top: 50px;
}

.itemAssetManagementDialogContent .iam-fileupload-text label {
    width: 100%;
    display: block;
    text-align: center;
}

.itemAssetManagementDialogContent .iam-item-assets-container .iam-item-assets .assetContainer {
    min-width: 100px;
    min-height: 100px;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    border: 1px solid #dddddd;
    text-align: center;
    padding: 1px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.itemAssetManagementDialogContent .iam-item-assets-container {
    margin: 20px;
}

.itemAssetManagementDialogContent .iam-item-assets-container .iam-item-assets {
    width: 100%;
    height: 120px;
    display: flex;
    overflow: auto;
    border: 1px solid #d1d1d1;
    margin: 10px auto;
    align-items: center;
}

.itemAssetManagementDialogContent .iam-item-assets-container .iam-item-assets .assetContainer a {
    text-align: center;
}

.itemAssetManagementDialogContent .iam-item-assets-container .iam-item-assets .assetContainer .delete-button {
    width: 12px;
    height: 12px;
    color: white;
    background-color: #31708f !important;
    border: none;
    position: absolute;
    right: 0;
    top: 1px;
}

.itemAssetManagementDialogContent .iam-item-assets-container .iam-item-assets .assetContainer .delete-button.ui-state-focus {
    background-color: #31708f;
}

.itemAssetManagementDialogContent .iam-fileupload.over {
    cursor: copy;
    border: 2px dashed #000;
}

.loading-spinner {
    margin: 7px;
    vertical-align: middle;
}

/*
 * Bulk subscription upload dialog
 */
.bulkSubscriptionDialog .bulk-subscription-upload {
    border: none;
}
.bulkSubscriptionDialog .bulk-subscription-upload .ui-fileupload-buttonbar {
    border: none;
    background: none;
}
.bulkSubscriptionDialog .bulk-subscription-upload .ui-fileupload-content {
    border: none;
    background: none;
}
.bulkSubscriptionDialog .subscriber-panel {
    padding: 1rem;
    margin: 1rem;
}
.bulkSubscriptionDialog .subscriber-panel .subscriber-container {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    align-items: center;
}
.bulkSubscriptionDialog .subscriber-panel .subscriber-container .subscriber-label {
    margin: 5px;
}

.bulkSubscriptionDialog .subscriber-panel .subscriber-container .subscriber-error {
    width: 26px;
    height: 26px;
    display: block;
}

.bulkSubscriptionDialog .info-panel {
    border: none;
    padding: 5px;
}
.bulkSubscriptionDialog .info-panel .info-label {
    margin: 1rem 0;
    width: 100%;
    display: block;
}
.bulkSubscriptionDialog .precheck-messages {
    border: none;
    padding: 5px;
}
.grecaptcha-badge {
    bottom: 25px !important;
}