.html_editor {
	.box-sizing;
	
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	.disable_mask {
		background: #cccccc;
		cursor: default;
		height: 100%;
		opacity: 0.2;
		position: absolute;
		width: 100%;
		z-index: 100;
	}

	.workarea {
		.box-sizing;

		border: none;
		height: 100%;
		width: 100%;
		
		.scroll-inner {
			background: #ffffff;
		}
		
		.crea-content-editable {
			.inactive& {
				opacity: 0.2;
			}
			
			.box-sizing;

			cursor: text;
			height: 100% !important;
			outline: 0px;
			padding: 20px 24px;
			width: 100% !important;
			word-wrap: break-word;
			
			a {
				cursor: text;
			}
			
			p {
				margin: 0;
			}
			
			img {
				cursor: pointer;
			}
		}
		
		li {
			margin-bottom: 0.6em;
		}
	}
	
	.uploader_mask {
		.box-sizing;

		background: #fffdd6;
		color: #d3b910;
		font-size: 18pt;
		height: 100%;
		left: 0px;
		opacity: 0;
		padding: 11px;
		position: absolute;
		text-align: center;
		top: 0px;
		visibility: hidden;
		width: 100%;

		.transition(ease 250ms opacity 0s);
		
		.inner {
			.box-sizing;

			border: 3px dashed #e2da36;
			border-radius: 5px;
			height: 100%;
		}
		
		&.active,
		&.editorDragOver {
			opacity: 0.5;
			visibility: visible;
		}
	}

	.toolbar {
		.user-select(none);

		background: #fdfdfd;
		border: none;
		cursor: default;
		padding: 0px 4px;
		
		.content {
			padding: 0px;

			.separator {
				border-left: 1px solid #dddddd;
				border-right: 1px solid #ffffff;
				display: inline-block;
				height: 32px;
				margin: 0px 4px;
				vertical-align: middle;
			}

			.button {
				background: #dddddd;
				border: 1px solid #cccccc;
				border-radius: 3px;
				display: inline-block;
				cursor: pointer;
				font-size: 11pt;
				padding: 4px 6px;

				&:hover {
					background: #e3e3e3;
				}
			}

			.item {
				background: none;
				border: 1px solid transparent;
				box-shadow: none;
				cursor: pointer;
				display: inline-block;
				height: 16px;
				line-height: 16px;
				margin: 4px 1px !important;
				outline: 0px;
				padding: 4px;
				vertical-align: middle;

				.item:hover {
					background: #eeeeee;
					border: 1px solid #cccccc;
					box-shadow: 0px 0px 3px #eeeeee, inset 1px 1px 0px #ffffff;
				}

				.inactive&,
				.inactive&:hover {
					background: none;
					cursor: default;
					opacity: 0.2;
				}

				&.select {
					padding: 0px 0px;

					&:hover {
						background: none;
					}

					.input {
						font-size: 10pt;
						margin-top: -2px;
						max-width: 200px;
						padding: 0px !important;
						width: auto;
					}
				}

				.icon {
					background-image: url("../../images/sprites.png");
					background-repeat: no-repeat;
					display: inline-block;
					height: 16px;
					vertical-align: middle;
					width: 16px;
				}

				&.link .icon { 
					background-position: 0px -320px;
				}

				&.unlink .icon {
					background-position: -40px -320px;
				}

				&.image .icon {
					background-position: -440px -320px;
				}

				&.slist .icon {
					background-position: -40px -320px;
				}

				&.uslist .icon {
					background-position: -80px -320px;
				}

				&.hline .icon {
					background-position: -640px -320px;
					width: 18px;
				}

				&.bold .icon {
					background-position: -200px -320px;
				}

				&.italic .icon {
					background-position: -120px -320px;
				}

				&.underline .icon {
					background-position: -160px -320px;
				}

				&.aleft .icon {
					background-position: -320px -320px;
				}

				&.acenter .icon {
					background-position: -360px -320px;
				}

				&.aright .icon {
					background-position: -400px -320px;
				}

				&.ajustify .icon {
					background-position: -440px -320px;
				}

				&.color .icon {
					background-position: -400px -320px;
				}

				&.background .icon {
					background-position: -40px -320px;
				}

				&.clear .icon {
					background-position: -480px -320px;
				}

				&.strike_through .icon {
					background-position: -520px -320px;
				}

				&.undo .icon {
					background-position: -560px -320px;
				}

				&.redo .icon {
					background-position: -600px -320px;
				}

				&.template {
					.icon {
						background-image: none;
						&:before {
							content: "\e90e";
							speak: none;
							font-style: normal;
							font-weight: normal;
							font-variant: normal;
							text-transform: none;
							line-height: 0.5;
							font-family: 'afterlogic';
							-webkit-font-smoothing: antialiased;
							font-size: 24px;
							color: #595959;
						}
					}
					.dropdown_content {
						padding: 0px;
						min-width: fit-content;
						.scroll-inner {
							width: max-content !important;
							div {
								border-top: 1px solid #cbc8c0;
								padding: 10px;
								&:hover {
									background: #e0e0e0;
								}
							}
						}
					}
				}
			}
		
			.dropdown {
				color: #000000;
				bottom: -4px;

				.inactive& {
					left: -10000px;
				}

				&.color {
					white-space: nowrap;
				}

				.dropdown_content {
					background: #eeeeee;
					border: 1px solid #cccccc;
					border-top: 1px solid #fafafa;
					border-radius: 0px 0px 3px 3px;
					padding: 4px;

					.input {
						font-size: 11pt;
						margin: 0px;
						padding: 3px 5px 2px;
						vertical-align: top;
						width: auto;
					}
				}
			}
		
			.color_table {
				display: inline-block;
				margin-right: 6px;
				vertical-align: bottom;

				&:last-child {
					margin-right: 0px;
				}

				.title {
					display: inline-block;
					margin: 2px 0px 4px;
					padding: 0px;
				}

				.row {
					display: block;
					font-size: 0px;
					margin: 0px !important;
					white-space: nowrap;
				}

				.color-item {
					cursor: pointer;
					display: inline-block;
					height: 16px;
					margin: 2px;
					vertical-align: bottom;
					width: 16px;

					&:hover {
						box-shadow: 0px 0px 2px #aaaaaa;
						height: 18px;
						margin: 1px;
						width: 18px;
					}
				}
			}
		}
	}
}
