/**
 * webEdition CMS
 *
 * This source is part of webEdition CMS. webEdition CMS is
 * free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 3 of the License, or
 * any later version.
 *
 * The GNU General Public License can be found at
 * https://www.gnu.org/licenses/gpl-3.0.html.
 * A copy is found in the textfile
 * webEdition/licenses/webEditionCMS/License.txt
 *
 * @license	https://www.gnu.org/licenses/gpl-3.0.html  GPL
*/
@charset "utf-8";

div.fileupload_divBtnBrowseReset{
	div{
		display: inline-block;
	}
	div.we_fileInputWrapper{
		overflow: hidden;
		position: relative;
		cursor: pointer;
		vertical-align: top;
		display: inline-block;

		input.fileInput{
			cursor: pointer;
			position: absolute;
			width: 286px;
			height: 22px;
		}
		input.fileInputHidden {
			opacity: 0;
		}
	}

	button{
		width: 170px;
	}
}

div.we_file_drag{
	height: 112px;
	width: 100%;
	display: block;
	font-weight: normal;
	font-size: var(--WEmedfont);
	color: #555;
	cursor: default;
	background-color: white;
	margin: 0 0.2em 20px 0.1em;
	box-shadow: none;
	position: relative;
	box-sizing: border-box;

	div.emptyDropzone{
		width: 100%;
		height: 100%;
		position: relative;
		display: block;
		border: 1px dashed gray;

		div.dropzone_divPreview{
			div.empty{
				span.fileicon{
					font-size: 3em;
					color: #eee;
				}
				span.fileicon .we-color{
					color: #eee;
				}
			}
			div.filled{
				span.fileicon{
					font-size: 3em;
					color: #444;
				}
			}
		}
	}

	div.emptyDropzone.dragHover{
		border: none;
	}

	div.container_uploadItems{
		width:100%;
		height:100%;
		position: relative;

		div.uploadItem{
			width: 100%;
			margin: 0;
		}
	}
}

div.we_file_drag_hover{
	color: #00cc00;
	border: 1px solid #00cc00;
	box-shadow: inset 0 3px 4px #888;
	div.emptyDropzone,
	div.uploadItem{
		border:none
	}
}

div.container_controlls{
	width: 542px;
	height: auto;
	div.container_controllsLeft{
		float: left;
		height: auto;
		padding-bottom: 12px;

		.container_BtnUploadCancel{
			width: 180px;
			margin-top: 12px;

			button{
				width: 170px;
			}
		}
	}
	.container_controllsRight{
		float: right;
		height: auto;
		width: 310px;
		margin: 4px 0 0 0;
		padding-bottom: 12px;

		div.imgEditOpts{
			display: block;
			padding: 4px 0 6px 4px;

			div{
				position: relative;
				height: 30px;

				div{
					position:absolute;
					height: 30px;
				}
			}
			div.scaleDiv{
				margin: 4px 0 0 0;

				div.labelContainer{
					display: inline-block;
					width: 70px;
					top: 6px;
					;
					left: 0;

				}
				div.inputContainer{
					display: inline-block;
					top: 0;
					left: 70px;

					.optsUnitSelect{
						width: 104px;
						position: absolute;
						left: 0;
					}
					.optsScaleInput{
						width: 55px;
						position: absolute;
						left: 159px;
						height: 29px;
						border-right: 0 none;
					}
					.optsScalePropositions{
						position: absolute;
						left: 190px;
						top: 0;
						padding: 5px 1px 5px 0;
						background-color: transparent;
						height: 29px;
						width: 40px;
					}
					.optsScalePropositions:focus{
						outline: none;
					}
				}
			}
			div.qualityDiv{
				margin: 4px 0 0 0;

				div.labelContainer{
					display: inline-block;
					width: 70px;
					top: 4px;
					left: 0;
				}
				div.inputContainer{
					display: inline-block;
					top: 0;
					left: 70px;
					width: 166px;

					input.optsQuality{
						width: 88px;
						margin: 0;
					}

					i.qualityIconLeft{
						font-size: 2em;
						margin-right: 8px;
						color: lightgray;
					}

					i.qualityIconRight{
						font-size: 2em;
						margin-left: 8px;
					}
				}
				div.btnContainer{
					width: 53px;
					text-align: right;
					display: inline-block;
					left: 240px;
				}
			}
		}
		.containerImportMeta{
			padding: 8px 0 0 0;
		}
	}
}

.hidden{
	display: none;
}
div.containerEditorLoupe{
	position: relative;
	top: 0;
	left: 152px;

	div.editorLoupe{
		display: none;
		position: absolute;
		z-index: 62;
		overflow: hidden;
		width: 400px;
		height: 400px;
		top: 0;
		left: 0;
		background-color: lightgrey;
		background-image: linear-gradient(45deg, #898989 25%, transparent 25%, transparent 75%, #898989 75%, #898989), linear-gradient(-45deg, #898989 25%, transparent 25%, transparent 75%, #898989 75%, #898989);
		background-size: 12px 12px;

		div.editorLoupeInner{
			display: none;
			overflow: hidden;
			position: absolute;
			background-color: transparent;
		}
		div.editorLoupeInfo{
			top: 0;
			left: 0;
			border: 1px solid black;
			width: auto;
			height: auto;
			padding: 2px;
			z-index: 66;
			position: absolute;
			background-color: white;
			display: none;
		}
	}

	div.editorLoupeFallback{
		display: none;
		position: absolute;
		top: 10px;
		left: -30px;
		border: 1px solid black;
		width: auto;
		height: auto;
		z-index: 66;
		background-color: white;
		padding: 6px;
	}

	div.editorCrosshairH{
		display: none;
		position: absolute;
		z-index: 63;
		top: 199px;
		left: 150px;
		width: 100px;
		height: 2px;
		box-sizing: border-box;
		border-top: 1px dashed white;
		border-bottom: 1px dashed black;
	}
	div.editorCrosshairV{
		display: none;
		position: absolute;
		z-index: 63;
		top: 150px;
		left: 198px;
		width: 2px;
		box-sizing: border-box;
		height: 100px;
		border-right: 1px dashed white;
		border-left: 1px dashed black;
	}
	div.editorLoupeSpinner{
		position:absolute;
		top: 186px;
		left: 186px;
		z-index: 65;
		display: none;

		span{
			font-size: 2em;
			color: white;
		}
	}
	div.editorFocusPoint{
		display: none;
		width: 0;
		height: 0;
		position: absolute;
		border: 0;
		border-radius: 50%;
		box-shadow: 0 0 0 1px black;
		z-index: 60;
	}
	div.editorFocusPoint:before {
		content: "";
		display: block;
		position: absolute;
		left: -23px;
		top: -23px;
		width: 38px;
		height: 38px;
		border: 3px solid white;
		border-radius: 50%;
		box-shadow: 0 0 4px 1px black, inset 0 0 3px 1px black;
	}

	div.focusPointOnSet{
		top: 201px;
		left: 201px;
		z-index: 64;
	}
	div.focusPointOnSet:before{
		border: 2px solid white;
		box-shadow: 0 0 0 2px black;
		box-shadow: 0 0 4px 1px red, inset 0 0 3px 1px red;
	}
}

div.uploadItem{
	position: relative;
	width: 540px;
	height:110px;
	margin: 4px 0 0 30px;
	border:1px solid #aaaaaa;
	background-color: rgb(232, 232, 255);

	div.containerLeft{
		position: relative;
		height: 100%;
		width: 110px;
		float: left;
		background-color: lightgrey;

		div.elemImagePreview{
			width: 100%;
			height: 100%;
			display: none;
			background-image: linear-gradient(45deg, #898989 25%, transparent 25%, transparent 75%, #898989 75%, #898989), linear-gradient(-45deg, #898989 25%, transparent 25%, transparent 75%, #898989 75%, #898989);
			background-size: 6px 6px;
			z-index: 60;

			div.imgPreview{
				height: 100%;
				width: 100%;
				z-index: 61;
			}
		}

		div.elemIcon{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			font-size: inherit;
			padding: 22px 0 0 12px;
			div.icon{
				span.fileicon{
					font-size: 2em;
				}
			}
			div.extension{
				margin: 8px 0 0 36px;
				font-weight: bold;
			}
		}
	}

	div.containerRight{
		position: absolute;
		width: 430px;
		left: 110px;

		div.containerRightTop{
			&.noneditable{
				margin-top: 4px;
			}
			position: relative;
			height: 36px;

			div.elemFilename{
				padding: 6px 0 0 6px;
				width: auto;
				position: absolute;
				display: block;

				.inputEditFilename{
					border: none;
					padding: 5px 2px 3px 4px;
					width: 207px;
					background-color:white;
				}

				.inputEditFilename.nodelete{
					width:260px;
				}
				.textShowFilename{
					padding: 6px 0 0 6px;
					font-weight: bold;
					&.errorFilename{
						color: red;
					}
				}
			}
			div.elemSizeDelete{
				width: auto;
				min-width: 92px;
				float: right;
				display: block;

				div.elemSize{
					padding: 12px 0 0 0;
					padding: 12px 6px 0 0;
					/*width: 76px;*/
					height: 50px;
					display: inline-block;
					font-weight: bold;
				}
				div.elemSizeNok{
					padding: 12px 6px 0 0;
					/*width: 76px;*/
					height: 50px;
					display: inline-block;
					color: red;
					font-weight: bold;

					div.elemSizeError{
						display: inline-block;
						margin-left: 6px;

						span.fa-stack{
							height: inherit;
							line-height: inherit;
							vertical-align: inherit;
							color: red;
						}
						span.alertIcon{
							font-size: inherit;
						}

						.textSizeError{
							display: none;
							position: absolute;
							right: 3px;
							top: 30px;
							z-index: 66;
							background-color: black;
							border: 1px solid red;
							padding: 4px;
							width: 300px;
							color:white;
							font-weight: normal;
						}
					}
				}
				div.elemDelete{
					padding: 4px 0 0 0;
					width: 96px;
					height: 36px;
					display: inline-block;

					button{
						width: 84px;
					}
				}

				div.elemSize.hidden,
				div.elemSizeNok.hidden,
				div.elemDelete.hidden{
					display: none;
				}
			}
			.message_previweNotLoaded{
				display: none;
				height: auto;
				width: 240px;
				position: absolute;
				top: 20px;
				left: 40px;
				background-color: white;
				border: 1px solid black;
				z-index: 62;
				padding: 5px;
			}
		}

		div.containerRightBottom{
			position: absolute;
			height: 73px;
			top: 37px;
			background-color: transparent;
			width: 100%;
			box-sizing: border-box;

			div.elemImageEdit,
			div.elemProgress,
			div.elemProcess,
			div.elemTypeError,
			div.elemFilenameError{
				position:absolute;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
			}

			div.elemPath{
				margin-left: 12px;
				div.infoPath{
					padding: 0 0 0 0;
					div.leftDiv{
						width: 90px;
						display: inline-block;
					}
					div.rightDiv{
						display: inline-block;
						width: 220px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						vertical-align: text-bottom;
					}
				}
			}

			div.elemImageEdit{
				div.elemScaleNotice,
				div.elemForceLongestNotice{
					display: none;
					margin-left: 6px;
					position: relative;

					span.fa-stack{
						height: inherit;
						line-height: inherit;
						vertical-align: inherit;
						color: black;
					}
					span.alertIcon{
						font-size: inherit;
					}

					.textScaleNotice,
					.textForceLongestNotice{
						display: none;
						position: absolute;
						right: -70px;
						top: 20px;
						z-index: 66;
						background-color: white;
						border: 1px solid gray;
						width: 280px;
						padding: 4px;
					}
				}

				div.elemInfo{
					position: absolute;
					display: inline-block;
					left: 0;
					width: 340px;
					padding: 0 0 0 12px;

					div.infoTop{
						padding: 10px 0 0 0;
						div.leftDiv{
							width: 90px;
							display: inline-block;
						}
						div.rightDiv{
							display: inline-block;
						}
						&.isPath{
							padding: 3px 0 0 0;
						}
					}
					div.infoMiddle{
						padding: 3px 0 0 0;
						div.leftDiv{
							display: inline-block;
							width: 90px;
						}
						div.rightDiv{
							display: inline-block;
						}
					}
					div.infoBottom{
						display: none;
						padding: 10px 0 0 0;
						div.leftDiv{
							width: 90px;
							display: inline-block;
						}
						div.rightDiv{
							display: inline-block;
						}
						&.isPath{
							padding: 3px 0 0 0;
						}
					}
				}

				div.controllsItem{
					position: absolute;
					width: 100px;
					height: 30px;
					left: 334px;
					bottom: 3px;
					div.rowEditHot{
						color: lightgray;
						padding: 0 0 0 10px;
						vertical-align: super;
					}

					left: 332px;
					top: 6px;
					&.isPath{
						top: -10px;
					}
				}
			}
			div.elemProcess,
			div.elemProgress{
				padding: 26px 0 0 12px;
				background-color:white;

				div.elemProgressLeft{
					display: inline-block;
				}
				div.elemProgressRight{
					display: inline-block;
					vertical-align: super;

					div.elemUploadError{
						margin-left: 12px;
						position: relative;

						span.fa-stack{
							color: red;
						}
						span.alertIcon{
							font-size: inherit;
						}

						.textUploadError{
							display: none;
							position: absolute;
							right: 0;
							z-index: 66;
							background-color: black;
							border: 1px solid red;
							width: 280px;
							top: 20px;
							padding: 4px;
							color: white;
						}
					}
				}
			}
			div.elemTypeError,
			div.elemFilenameError{
				padding: 18px 0 0 12px;
				background-color: #eeeeee;
				color: red;
				font-size: 1em;

				span.textTypeErrorText,
				span.textTypeErrorType,
				span.textFilenameErrorText,
				span.textFilenameErrorFilename{
					font-size: 1.3em;
				}
				span.textTypeerrorExplain{
					font-size: 1em;
				}
				span.textFilenameErrorExplain{
					font-size: 1em;
					color: black;
				}
			}
			div.elemFilenameError{
				padding: 10px 0 0 12px;
			}
		}
		.elemFilenameFull{
			width: 280px;
			position: absolute;
			top: 12px;
			left:12px;

			.filenameLong{
				overflow-y: auto;
				width:100%;
				max-height: 80px;
				word-wrap:break-word;
				box-sizing: border-box;
				font-weight:bold;
			}
		}
	}

	div.containerItemBusy{
		position: relative;
		width: 100%;
		height: 100%;
		background: white;
		z-index: 62;

		.elemSpinner{
			font-size: 2em;
			display: inline-block;
			padding-top: 28px;
		}
		.elemText{
			font-size: 1.6em;
			display: inline-block;
			vertical-align: super;
			padding: 0 40px 0 40px;
		}

	}

}

div.fileuploadWedoc,
div.fileuploadEditor,
div.fileuploadBase{
	width: 542px;
}

div.fileuploadImporter{
	position: relative;
	height: 100%;

	div.dialogboxTop{
		overflow: hidden;
		position: absolute;
		top: 0;
		height: 300px;

		div.multiIconRight{
			div.we_file_drag{
				margin-bottom: 0;
			}
			div.fileupload_controlls{
				div.fileupload_controlls_right{
					margin: 0;

					div.imgEditOpts{
						padding: 0 0 6px 4px;
					}
				}
			}
		}

	}

	div.importer_containerUploadFiles{
		/*
		position: relative;
		height: 440px;
		overflow: hidden;
		*/
		position: absolute;
		top: 284px;
		bottom: 1px;
		width: 100%;
		overflow-y: auto;


		div.containerEditorLoupe{
			/*
			position: relative;
			left: 172px;
			*/
			position: fixed;
			top: 240px;
			z-index: 1000;
		}
		div.uploadFiles{
			/*
			position: absolute;
			top: 0;
			bottom: 0;
			*/
			/*height: 440px;*/
			overflow-y: auto;
			overflow-x: hidden;

			div.uploadItem{
				/*
				margin: 0 0 4px 30px;
				*/
				margin: 0 0 4px 14px;
			}
		}
	}

	div.containerUploaderBusy{
		display: none;
		padding: 20px;
		background-color: white;
		width: 400px;
		height: 180px;
		position: absolute;
		top: 74px;
		left: 84px;
		opacity: 1.0;

		div.elemSpinner{
			margin: 20px 0 10px 0;
			font-size: 2em;
			padding-top: 12px;
			text-align: center;
		}
		div.elemText{
			padding-top: 18px;
			text-align: center;
			font-size: 1.6em;
		}
	}
	div.uploaderMask{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: gray;
		opacity: 0.8;
	}
}

span.buttons.we_suggest{
	vertical-align: top;
}

#PropertyPage div.external_dropzone,
div.external_dropzone{
	width: auto;
	div.we_file_drag{
		border: 1px dashed gray;
		margin: 0;
		&.error{
			border: 1px solid red;
			box-shadow: unset;
		}
		&.success{
			border: 1px solid green;
			box-shadow: unset;
		}

		&.error{
			border: 2px inset red;
			div.iconTooltip{
				color: red;
			}
			&.drop{
				background-color: rgba(255, 0, 0, .1);
				input.wetextinput.weSuggest{
					background-color: transparent;
				}
			}
		}
		&.success{
			border: 2px inset green;
			div.iconTooltip{
				color: green;
			}
			&.drop{
				background-color: rgba(0, 255, 0, .1);
				input.wetextinput.weSuggest{
					background-color: transparent;
				}
			}
		}
		&.dragover{
			border: 2px inset darkgray;
			div.iconTooltip{
				color: black;
			}
		}
		div.content_iconTooltip{
			div.content{
				position: absolute;
				display: inline-block;
				left: 0;
				right: 16px;
				/*height: 100%; problems in we_img*/
				input{
					background-color: transparent;
					border: none;
					height: 22px
				}
				img{
					margin-left: 10px;
				}
			}
			div.iconTooltip{
				position: absolute;
				display: inline-block;
				right: 0;
				width: 16px;
				color: lightgray;
				font-size: 1.2em;
				bottom: 0.2em;
				padding-left: 4px;
				&:hover{
					color: black;
				}
			}
		}
		div.textExtDropzone.we_suggest{
			display: inline-block;
			padding-top: 24px;
			padding-left: 20px;
			font-size: 1.4em;
			color: lightgray;
		}

		div.tooltip{
			position: absolute;
			border: 2px solid /*#325e94*/ #555;
			background-color: white;
			color: #555;/*var(--WEGrey)*/ /* #325e94 */
			;
			font-family: var(--WEFont);
			/*font-size: 1.1em;*/
			font-size: var(--WEmedFont);
			text-align: left;
			width:360px;
			left: 62px;
			height: auto;
			z-index: 20000;
			display: none;
			div.warningDiv{
				display: none;
				div.left{
					width: 95%;
					padding-top: 1px;
				}
				div.right{
					width: 5%;
					text-align: right;
					cursor: grab;
					padding: 2px 2px 0 0;
				}
			}
			div.infoDiv{
				padding: 0;
				div.infoText{
					padding: 6px;
					h4{
						margin: 0 0 3px 0;
						font-weight: normal;
						font-style: italic;
					}
				}
				div.infoDivider{
					width: 100%;
					height: 1px;
					background-color: #555;
				}
			}
			&.show{
				display: block;
			}
			&.typeerror{
				border: 2px solid red;
				color: red;
				div.warningDiv{
					display:flex;
					border-bottom: 1px solid red;
					padding: 6px;
					font-weight: bold;
				}
				div.infoDiv{
					div.infoDivider{
						background-color: red;
					}
				}
			}
		}
	}
	&.we_suggest{
		div.we_file_drag{
			margin: 0 0 4px 0;
			padding: 2px;
			height: 29px;
		}
	}
	&.we_tag_img{
		width:auto;
		height:auto;
		padding:0;
		div.we_file_drag{
			width:auto;
			height:auto;
			padding:0;

			div.content_iconTooltip{
				div.content{
					position: relative;
					margin: 2px 0;
				}
				div.iconTooltip{
					background-color: white;
					padding: 2px 1px 1px 1px;
					bottom: 0;
				}
			}
		}
	}
}

#PropertyPage div.external_dropzone.we_suggest{
	max-width: 30em;
}

div.objectFileElement{
	div.external_dropzone{
		margin: 0;
	}
	div.hrefField{
		div.external_dropzone{
			margin: 0;
		}
	}
}

div.fileuploadEditor_footer{
	width:	auto;
	height:	100%;

	div.containerBtn{
		float: right;

		div.elemBtnFooter{
			display: table-cell;

			button{
				width: 120px;
			}
		}
		div.elemBtnFooter.hidden{
			display: none;
		}
	}
}