/******************************** Custom Import Begin ********************************/
.customImportColumn  select {
	width: 100%;
	margin-bottom: 0.25rem;
}

.customImportColumn {
	height: 100%;
}

.customImportColumn.mapping, .customImportColumn.template {
    opacity: 0;
    pointer-events: none;
}

#customImportStartButton, #customImportSimulationButton {
	display: none;
}

.templateSelect.bootstrap-select {
    max-width: 80%;
}

.templateSelect.bootstrap-select > button {
    max-width: 90%;
}

.customImportUploadFileButtonWrap {
    position: relative;
    top: 1rem;
}

select.languageSelect {
    opacity: 0;
    pointer-events: none;
}

p#customImportUploadedFileName {
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    margin-top: 0.5rem;
    padding: 0 0.5rem;
}

#customImportSimulationButton {
	float: right !important;
}

.customImportColumn h4 {
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
}

.customImportColumn:nth-child(1) > form {
	height: 1.8125rem; /*38px;*/
	text-align: left;
}

.customImportColumn:nth-child(1) > form input[type="file"] {
	width: 100%;
	padding: 0 0.3125rem; /*5px;*/
	border-radius: 0.1875rem; /*3px;*/
	left: 0;
}

.draggableEditButton, .draggableDeleteButton {
	float: right; 
	position: relative;
	top: 0.1rem;
	margin-right: 0.5rem;
	z-index: 0;
}

.draggableEditButton:hover {
	color: #555;
}

.draggableDeleteButton:after {
    background-color: white;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    content: "";
    position: absolute;
    left: 0.1rem;
    z-index: -1;
}

#mappingList li[data-formula] .draggableEditButton, 
#mappingList li[data-is-article-definition-column="true"] .draggableEditButton, 
#mappingList li[data-string-default-value] .draggableEditButton,
#mappingList li[data-numeric-default-value] .draggableEditButton, 
#mappingList li[data-boolean-default-value] .draggableEditButton, 
#mappingList li[data-selection-default-value] .draggableEditButton,
#mappingList li[data-chosen-classification] .draggableEditButton, 
#mappingList li[data-chosen-classification-mapping] .draggableEditButton {
	content: "\f14b";
	font-size: 1.8rem;
	top: initial;
    bottom: 0.15rem;
}

#mappingList li[data-formula] .draggableEditButton:before, 
#mappingList li[data-is-article-definition-column="true"] .draggableEditButton:before, 
#mappingList li[data-string-default-value] .draggableEditButton:before, 
#mappingList li[data-numeric-default-value] .draggableEditButton:before, 
#mappingList li[data-boolean-default-value] .draggableEditButton:before, 
#mappingList li[data-selection-default-value] .draggableEditButton:before,
#mappingList li[data-chosen-classification] .draggableEditButton:before,
#mappingList li[data-chosen-classification-mapping] .draggableEditButton:before {
	content: "\f14b";
}

#globalMappingList li[data-formula] .draggableEditButton, 
#globalMappingList li[data-is-article-definition-column="true"] .draggableEditButton, 
#globalMappingList li[data-string-default-value] .draggableEditButton,
#globalMappingList li[data-numeric-default-value] .draggableEditButton, 
#globalMappingList li[data-boolean-default-value] .draggableEditButton, 
#globalMappingList li[data-selection-default-value] .draggableEditButton,
#globalMappingList li[data-chosen-classification] .draggableEditButton, 
#globalMappingList li[data-chosen-classification-mapping] .draggableEditButton {
	content: "\f14b";
	font-size: 1.8rem;
	top: initial;
    bottom: 0.15rem;
}

#globalMappingList li[data-formula] .draggableEditButton:before, 
#globalMappingList li[data-is-article-definition-column="true"] .draggableEditButton:before, 
#globalMappingList li[data-string-default-value] .draggableEditButton:before, 
#globalMappingList li[data-numeric-default-value] .draggableEditButton:before, 
#globalMappingList li[data-boolean-default-value] .draggableEditButton:before, 
#globalMappingList li[data-selection-default-value] .draggableEditButton:before,
#globalMappingList li[data-chosen-classification] .draggableEditButton:before,
#globalMappingList li[data-chosen-classification-mapping] .draggableEditButton:before {
	content: "\f14b";
}

.customImportColumn:nth-child(1) > form input[type="file"]:hover,
.customImportColumn select:nth-child(2):hover {
	box-shadow: 0 0 0.3125rem #AAA;
}

.customImportColumn:nth-child(1) > .customImportColumnHeaders {
	width: 100%;	
}


.customImportColumn > .customImportColumnHeaders,
.customImportColumn > .customImportUserMapping,
.customImportColumn > .customImportMappingTemplate {
	height: 32.5rem;
}

.customImportColumn > .customImportColumnHeaders,
.customImportColumn > .customImportUserMapping {
	border-radius: 0.1875rem; /*3px;*/
}

.customImportColumn > .customImportGlobalUserMapping {
	height: 6rem;
	border-radius: 0.1875rem;
}

.customImportColumn > .customImportMappingTemplate {
	position: relative;
}

.customImportColumn > .customImportColumnHeaders,
.customImportColumn > .customImportUserMapping,
.customImportColumn > .customImportGlobalUserMapping {
	border: 0.1rem solid #bcbcbc;
	overflow-x: hidden;
	overflow-y: scroll;
}

.customImportColumn > .customImportColumnHeaders:hover,
.customImportColumn > .customImportUserMapping:hover,
.customImportColumn > .customImportMappingTemplate > .customImportMappingTemplateSearch:hover,
.customImportColumn > .customImportMappingTemplate > .customImportMappingTemplateHalf:hover,
.customImportColumn > .customImportMappingTemplate > .customImportMappingTemplateFull:hover{
	box-shadow: 0 0 0.3125rem #AAA;
}

#columnHeaderList,
#mappingList, 
#globalMappingList {
	height: 100%;
}

.blurredTemplateDiv {
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter: blur(2px);    
}

.customImportMappingTemplateSearch {
	width: 100%;
	border-bottom: 0.0625rem solid #AAA;
}

.customImportMappingTemplateHalf,
.customImportMappingTemplateFull {
	width: 100%;
	border: 0.0625rem solid #AAA;
	border-radius: 0.1875rem; /*3px;*/
}

.customImportMappingTemplateHalf:nth-child(2),
.customImportMappingTemplateHalfClassList,
.customImportMappingTemplateFull {
	overflow-x: hidden;
	overflow-y: scroll;
}
.customImportMappingTemplateSearch {
	height: 2rem;
}
.customImportMappingTemplateHalf {
	height: calc(50% - 2%);
}

.customImportMappingTemplateHalfClassList {
	height: calc(100% - 2rem);
}

.customImportMappingTemplateFull {
	height: 100%;
}

.customImportMappingTemplateHalf:nth-last-child(2) {
	position: absolute;
	top: 0;
}

.customImportMappingTemplateHalf:last-child {
	position: absolute;
	bottom: 0;
}

#customImportMappingTemplateSearchTags {
	width: 100%;
	height: 1.5rem;
	border: 0;
	padding: 0 0.625rem;
	margin: 0.225rem auto;
	outline: none;
}

.customImportMappingTemplateSearchDeleteX {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: large;
	height: 2rem;
	line-height: 2rem;
	cursor: pointer;
}

#columnHeaderList,
#mappingList,
#mappingTemplateClassList,
#mappingTemplateFeatureList, 
#globalMappingList {
	list-style-type: none;
	text-align: left;
	margin: 0 auto;
	padding: 0.1875rem; /*3px;*/
}

.customImportColumn > .customImportColumnHeaders ul li,
.customImportColumn > .customImportUserMapping ul li,
.customImportColumn > .customImportMappingTemplate > .customImportMappingTemplateHalf ul li,
.customImportColumn > .customImportMappingTemplate > .customImportMappingTemplateFull ul li {
	width: 100%;
	margin: 0;
	cursor: pointer;
	background-color: white;
	padding-left: 0.3125rem; /*5px;*/
	border: 0.0625rem solid #EBEBEB;
	border-radius: 0.1875rem; /*3px;*/
	height: 1.8rem;
	line-height: 1.375rem;
	margin: 0;
	padding-top: 0.15rem;
	margin-bottom: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
}

.textWrap {
	position: relative;
	width: 75%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

.customImportColumn > .customImportColumnHeaders ul li:last-child,
.customImportColumn > .customImportUserMapping ul li:last-child {
	margin-bottom: 0.3125rem !important;
}

#columnHeaderList li {
	vertical-align: middle;
}

#columnHeaderList li,
#mappingList li,
#mappingTemplateClassList li,
#mappingTemplateFeatureList li {
   border: 1px solid transparent;
   border-top-color: #ababab;
}

#columnHeaderList li:first-child,
#mappingList li:first-child,
#mappingTemplateClassList li:first-child,
#mappingTemplateFeatureList li:first-child {
   border-top-color: transparent;
}

.customImportHoveredLi, 
#columnHeaderList li.customImportHoveredLi, #columnHeaderList li.customImportHoveredLi:hover,
#mappingList li.customImportHoveredLi, #mappingList li.customImportHoveredLi:hover,
#mappingTemplateClassList li:hover,
#mappingTemplateFeatureList li:hover {
	border: 1px solid rgb(240,172,0);
	border-radius: 0.1875rem; /*3px;*/
	box-shadow: 0 0 0.3125rem rgb(240,172,0);
}

.customImportHoveredLi:not(.emptyTemplateField) + li,
#columnHeaderList li:hover:not(.emptyTemplateField) + li,
#mappingList li:hover:not(.emptyTemplateField) + li,
#mappingTemplateClassList li:hover + li,
#mappingTemplateFeatureList li:hover + li {
	border-top-color: transparent !important;
}

li.emptyTemplateField, li.emptyTemplateField.customImportHoveredLi {
	border: 1px solid transparent !important;
	border-top-color: #ababab !important;
	box-shadow: none !important;
}

.listForMappingsWrapper li:last-child {
    border-bottom-color: #ababab !important;
}

.listForMappingsWrapper li:last-child:not(.emptyTemplateField):hover,
.listForMappingsWrapper li.customImportHoveredLi:last-child:not(.emptyTemplateField) {
	border-bottom-color: #f0ac00 !important;
}

.mappingTemplateClassSelected {
	background-color: #ffcf98 !important;
	border-radius: 0.1875rem; /*3px;*/
}

/* Special for Chrome*/
@supports (-webkit-appearance:none) {
	.three-cols:nth-child(1) > form input[type="file"]{
		padding-top: 0.3125rem; /*5px;*/
	}
}

/* Special for Firefox*/
@-moz-document url-prefix(){

}

/* Special for Safari */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
	@media {
	    .three-cols:nth-child(1) > form input[type="file"]{
			padding-top: 0.3125rem; /*5px;*/
		}
	}
}


@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
	@media {
	    .three-cols:nth-child(1) > form input[type="file"]{
			padding-top: 0.3125rem; /*5px;*/
		}
	}
}

.customImportUploadButton {
	cursor: pointer;
}

#customImportSaveMappingButton {
    clear: right;
    margin-top: 0;
    float: right !important;
    margin-left: 1rem;
}

#customImportExtractMapping {
    padding: 1px 5px;
    float: right;
    display: block;
    margin-top: 0.2rem;
}

#customImportExtractMapping[disabled]:hover {
    background-color: #F29528 !important;
    opacity: .65;
}

.customImportSubButton {
	min-height: 1.8125rem; /*38px;*/
	cursor: pointer;
	float: none !important;
}

#customImportLoadMappingButton {
	margin-bottom: 1rem;	
	float: right !important;
}

.customImportUploadButton,
.customImportSubButton {
	border: none;
	border-radius: 0.1875rem; /*3px;*/
	color: #FFF;
	display: inline-block;
	padding: 0;
	box-sizing: content-box;
	float: right;
	margin-top: 0.5rem;
}

.customImportMappingHelper {
	clear: right;
	margin-top: 0.5rem;	
/*     display: flex; */
    justify-content: space-between;
	align-items: center; 	
}

.customImportMappingName {
    width: 48%;  
     
	-webkit-transition : box-shadow 500ms ease-out; 
	-moz-transition : box-shadow 500ms ease-out;
	-o-transition : box-shadow 500ms ease-out;    
	transition : box-shadow 500ms ease-out;    
}

.customImportMappingName.errorFlashedShadow {
    box-shadow: 0 0 0.3rem 2px rgb(255, 0, 0) !important;
    background-color: white !important;
}

.customImportUserMapping {
    clear: both;
}

.customImportWrapper .dragDropBoxes {
    margin-top: 1rem;
}

@media screen and (max-width: 1300px) {
	
	.customImportMappingName {
		width: 100%;
	}
	
	.customImportResponsive {
		width: 96%;
	}	
	
	.customImportMappingHelper {
		display: initial;
	}
	
	#customImportSaveMappingButton {
	    margin-top: 0.2rem;;
	}	
}

.loadedMappingListPopup {
    padding: 1rem;
    text-align: center;
}

.loadedMappingList {
    margin-top: 16px;
    max-height: 60vh;
    max-width: 70vw;
    min-width: 16rem;
    overflow: auto;
    margin-bottom: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden
}

.loadedMappingList .mappingOption {
	padding: 5px;
    cursor: pointer;
    border-top: 1px #aaaaaa solid;
    border-left: 1px #aaaaaa solid;
    border-right: 1px #aaaaaa solid;
    display: flex;
    justify-content: space-between;
    margin-right: 1rem;
    min-width: 15rem;
}

.loadedMappingList > .mappingOption:last-child {
	border-bottom: 1px #aaaaaa solid;
	margin-bottom: 5px;
}

.loadedMappingList .mappingOption:hover {
    background-color: #e4e4e4;
}

.loadedMappingList .mappingOption.selectedMapping {
	background-color: #c1c1c1;	
}

.loadedMappingList .mappingName {
    line-height: 3.2rem;
    max-width: 60vw;
    overflow: hidden;
    margin-right: 1rem;   
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loadListWrap {
    margin-bottom: 1rem;
}

form#uploadMappingJsonForm {
    border-top: solid 1px grey;
    padding-top: 1rem;
}

input#uploadMappingJsonInput, 
#uploadMappingJsonSubmit {
    display: none;
}

.customImportWrapper li.ui-draggable-dragging {
	min-width: 450px;
	height: 1.375rem;
	line-height: 1.375rem;
	border: 1px solid #F29528;
	border-radius: 0.1875rem;
	background-color: #ffcf98 !important;
	cursor: grabbing !important;
}

#editImportFieldPopup > div {
	min-width: 16rem;
	margin: 2rem 1rem;
}

#editImportFieldPopup > div * {
	width : 100%;
}

#editImportFieldPopup > div .customImportEditFieldChooseClassification * {
    width: initial;
}

#editImportFieldPopup .classificationMappingWrap {
    margin-top: 1rem;
}

#editImportFieldPopup > div .defaultValueBoolean {
	width : 5%;
}

#editImportFieldPopup > div .defaultValueBooleanLabel {
	display: block;
}

#editImportFieldPopup > div.buttonContainer {
	position: relative;
}

#editImportFieldPopup > div.buttonContainer button {
	max-width : 6rem;
}

#editImportFieldPopup > div.buttonContainer button:LAST-CHILD {
	position: absolute;
	right: 0;
}

#editImportFieldPopup .inputDiv {
	margin-bottom: 1rem;
}

#editImportFieldPopup .inputDiv  textarea {
	max-width: 50rem;
	max-height: 30rem;
	border: 1px solid black;
}

input.defaultValueText {
	border: 1px solid black;
}

#customImportResult .contentWrapper{
	padding: 0;
}

#customImportResult .scrollWrapper {
    margin: 0;
}

.headlineErrorResult, .headlineErrorPicResult{
	margin-left: 2.3rem;
	font-size: 1.6rem;
}

#isArticleDefinitionColumn {
    width: initial !important;
}

li.bmeCatStandardField {
	background-color: #0059ff57 !important;
}

li.bmeCatPriceType {
	background-color: #00ffc557 !important;
}

li.bmeCatMimePurpose {
	background-color: #4000ff57 !important;
}

li.bmeCatFeatureName {
	background-color: #1aff0057 !important;
}

li.bmeCatCustomField {
	background-color: #ffa60057 !important;
}

li.bmeCatGroupField {
	background-color: #ff33ff57 ! important;
}

li.definitionMissing {
    background-color: #ff5f5f !important;
}

.customImportMandatoryHint {
    margin-top: 4rem;
}

.customImportMandatoryHint {
    margin-top: 4rem;
}

.customImportMandatoryHint .popover {
    white-space: pre-wrap;
    max-width: 100%;
}

/********************************* Custom Import End *********************************/