.clearfix() {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}
.transition-redactor(@transition: all linear .2s) {
	-moz-transition: @transition;
	transition: @transition;
}

.opacity-redactor(@opacity: 100) {
	filter: e(%("alpha(opacity=%d)", @opacity));
	-moz-opacity: @opacity / 100;
	opacity: @opacity / 100;
}
.box-sizing-redactor(@box-model) {
	-webkit-box-sizing: @box-model;
	-moz-box-sizing: @box-model;
	box-sizing: @box-model;
}
.striped-redactor(@color: rgba(255, 255, 255, .2); @angle: 45deg) {
	background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
	background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
}

.animation-redactor(@animation) {
	-webkit-animation: @animation;
	-o-animation: @animation;
	animation: @animation;
}

// VARIABLES
@redactorFontFamily: Arial, Helvetica, Verdana, Tahoma, sans-serif !important;
@redactorCodeFontFamily: Menlo, Monaco, monospace, sans-serif !important;

@redactorFontSize: 14px;
@redactorLineHeight: 1.6em;

/*
	Icon font
*/
@font-face {
	font-family: 'RedactorFont';
	src: url('redactor-font.eot');
}
@font-face {
	font-family: 'RedactorFont';
	src: url(data:application/x-font-ttf;charset=utf-8;base64,[encoded data, 8056 characters]) format('truetype'),
		 url(data:application/font-woff;charset=utf-8;base64,[encoded data, 6200 characters]) format('woff');
	font-weight: normal;
	font-style: normal;
}


/*
	Box
*/
.redactor-box {
	position: relative;
	overflow: visible;
	margin-bottom: 24px;

	& textarea {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		overflow: auto;
		outline: none;
		border: none;
		background-color: #111;
		box-shadow: none;
		color: #ccc;
		font-size: 13px;
		font-family: @redactorCodeFontFamily;
		resize: none;
		&:focus {
			outline: none;
		}
	}
}

/*
	Z-index setup
*/

.redactor-editor,
.redactor-box {
	background: #fff;
}

.redactor-editor,
.redactor-box,
.redactor-box textarea {
	z-index: auto !important;
}
.redactor-box-fullscreen {
	z-index: 1052 !important;
}
.redactor-toolbar,
.redactor-dropdown {
	z-index: 1053 !important;
}
#redactor-modal-overlay,
#redactor-modal-box,
#redactor-modal {
	z-index: 1054 !important;
}


/*
	Resize
*/
.redactor-resize {
	background: #f4f4f4;
	padding: 4px 0 3px 0;
	cursor: move;
	border: 1px solid #e3e3e3;
	border-top: none;
	& div {
		width: 30px;
		margin: auto;
		border-top: 1px solid #bbb;
		border-bottom: 1px solid #fff;
	}
}

/*
	Fullscreen
*/
body .redactor-box-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/*
	Utils
*/
.body-redactor-hidden {
	overflow: hidden;
}

/*
	Editor
*/
.redactor-editor {
	position: relative;
	overflow: auto;
	margin: 0 !important;
	padding: 20px;
	outline: none;
	white-space: normal;
	border: 1px solid #eee;
	font-family: @redactorFontFamily;
	font-size: @redactorFontSize;
	line-height: @redactorLineHeight;
	&:focus {
		outline: none;
	}
}

/*
	Placeholder
*/
.redactor-placeholder {
	position: relative;
	&:after {
		position: absolute;
		top: 20px;
		left: 20px;
	    content: attr(placeholder);
		color: #999 !important;
		font-weight: normal !important;
	}
}
/* Placeholder in linebreaks mode */
.redactor-linebreaks.redactor-placeholder:after {
	top: 20px;
	left: 20px;
}


/*
	Toolbar
*/
.redactor-toolbar {
	position: relative;
	top: 0;
	left: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 14px !important;
	line-height: 1 !important;

	background: #fff;
	border: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

	.clearfix;

	&.redactor-toolbar-overflow {
		overflow-y: auto;
		height: 29px;
		white-space: nowrap;
	}
	&.redactor-toolbar-external {
		z-index: 999;
		box-shadow: none;
		border: 1px solid rgba(0, 0, 0, .1);
	}
	& li {
		vertical-align: top;
		display: inline-block;
		margin: 0 !important;
		padding: 0 !important;
		outline: none;
		list-style: none !important;
		.box-sizing-redactor(content-box);
	}
	& li a {
		display: block;
		color: #333;
		text-align: center;
		padding: 9px 10px;
		cursor: pointer;
		outline: none;
		border: none;
		text-decoration: none;
		cursor: pointer;
		zoom: 1;
		.box-sizing-redactor(content-box);
	}
	& li a {
		&:hover {
			outline: none;
			background-color: rgba(31,120,216,1);
			color: #fff;
		}
		&:hover i:before {
			color: #fff;
		}
		&:active,
		&.redactor-act {
			outline: none;
			background-color: #ccc;
			color: #444;
		}
	}
	& li a.redactor-btn-image {
		width: 14px;
	    height: 14px;
	    background-position: center center;
	    background-repeat: no-repeat;
	}
	& li a.fa-redactor-btn {
		display: inline-block;
		padding: 9px 10px 8px 10px;
		line-height: 1;
	}
	& li a.redactor-button-disabled {
		.opacity-redactor(30);
		&:hover {
			color: #333;
			outline: none;
			background-color: transparent !important;
			cursor: default;
		}
	}
}

/*
	Icons
*/
.re-icon {
	font-family: 'RedactorFont';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.re-icon i:before {
	position: relative;
	font-size: 14px;
}


.re-video:before {
	content: "\e600";
}
.re-unorderedlist:before {
	content: "\e601";
}
.re-undo:before {
	content: "\e602";
}
.re-underline:before {
	content: "\e603";
}
.re-textdirection:before {
	content: "\e604";
}
.re-fontcolor:before {
	content: "\e605";
}
.re-table:before {
	content: "\e606";
}
.re-redo:before {
	content: "\e607";
}
.re-quote:before {
	content: "\e608";
}
.re-outdent:before {
	content: "\e609";
}
.re-orderedlist:before {
	content: "\e60a";
}
.re-link:before {
	content: "\e60b";
}
.re-horizontalrule:before {
	content: "\e60c";
}
.re-italic:before {
	content: "\e60d";
}
.re-indent:before {
	content: "\e60e";
}
.re-image:before {
	content: "\e60f";
}
.re-fullscreen:before {
	content: "\e610";
}
.re-normalscreen:before {
	content: "\e611";
}
.re-formatting:before {
	content: "\e612";
}
.re-fontsize:before {
	content: "\e613";
}
.re-fontfamily:before {
	content: "\e614";
}
.re-deleted:before {
	content: "\e615";
}
.re-html:before {
	content: "\e616";
}
.re-clips:before {
	content: "\e617";
}
.re-bold:before {
	content: "\e618";
}
.re-backcolor:before {
	content: "\e619";
}
.re-file:before {
	content: "\e61a";
}
.re-alignright:before {
	content: "\e61b";
}
.re-alignment:before,
.re-alignleft:before {
	content: "\e61c";
}
.re-alignjustify:before {
	content: "\e61d";
}
.re-aligncenter:before {
	content: "\e61e";
}
.re-gallery:before {
	content: "\e61f";
}


/*
	Toolbar tooltip
*/
.redactor-toolbar-tooltip {
	position: absolute;
	z-index: 1054;
	text-align: center;
	top: 0;
	left: 0;
	background: #000;
	color: #fff;
	padding: 5px 8px;
	line-height: 1;
	font-family: @redactorFontFamily;
	font-size: 12px;
	border-radius: 2px;
}


/*
	Dropdown
*/
.redactor-dropdown {
	position: absolute;
	top: 28px;
	left: 0;
	padding: 0;
	min-width: 220px;
	max-height: 254px;
	overflow: auto;
	background-color: #fff;
	box-shadow: 0 1px 7px rgba(0, 0, 0, .25);
	font-size: @redactorFontSize;
	font-family: @redactorFontFamily;
	line-height: @redactorLineHeight;
	& a {
		display: block;
		padding: 10px 15px;
		color: #000;
		text-decoration: none;
		border-bottom: 1px solid rgba(0, 0, 0, .07);
		&:last-child {
			border-bottom: none;
		}
		&:hover {
			background-color: rgba(31, 120, 216, 1);
			color: #fff !important;
			text-decoration: none;
		}
	}
}

/*
	IMAGE BOX
*/
#redactor-image-box {
	position: relative;
	max-width: 100%;
	display: inline-block;
	line-height: 0;
	outline: 1px dashed rgba(0, 0, 0, .6),
}
#redactor-image-editter {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	margin-top: -11px;
	margin-left: -18px;
	line-height: 1;
	background-color: #000;
	color: #fff;
	font-size: 11px;
	padding: 7px 10px;
	cursor: pointer;
}
#redactor-image-resizer {
	position: absolute;
	z-index: 2;
	line-height: 1;
	cursor: nw-resize;
	bottom: -4px;
	right: -5px;
	border: 1px solid #fff;
	background-color: #000;
	width: 8px;
	height: 8px;
}



/*
	LINK TOOLTIP
*/
.redactor-link-tooltip {
	position: absolute;
	z-index: 49999;
	padding: 10px;
	line-height: 1;
	display: inline-block;
	background-color: #000;
	color: #555 !important;
}
.redactor-link-tooltip,
.redactor-link-tooltip a {
	font-size: 12px;
	font-family: @redactorFontFamily;
}
.redactor-link-tooltip a {
	color: #ccc;
	margin: 0 5px;
	text-decoration: none;
	&:hover {
		color: #fff;
	}
}

/*
	DROPAREA
*/
#redactor-droparea {
	position: relative;
	overflow: hidden;
	padding: 140px 20px;
	border: 3px dashed rgba(0, 0, 0, .1);
	&.drag-hover {
		background: rgba(200, 222, 250, 0.75);
	}
	&.drag-drop {
		background: rgba(250, 248, 200, 0.5);
	}
}
#redactor-droparea-placeholder {
	text-align: center;
	font-size: 12px;
	color: rgba(0, 0, 0, .7);
}


/*
	PROGRESS
*/
#redactor-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000000;
	height: 10px;
}
#redactor-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #3d58a8;
	.striped-redactor();
	.animation-redactor(progress-bar-stripes 2s linear infinite);
	background-size: 40px 40px;
}

@-webkit-keyframes progress-bar-stripes {
	from { background-position: 40px 0; }
	to { background-position: 0 0; }
}
@-o-keyframes progress-bar-stripes {
	from { background-position: 40px 0; }
	to { background-position: 0 0; }
}
@keyframes progress-bar-stripes {
	from { background-position: 40px 0; }
	to { background-position: 0 0; }
}


/*
	MODAL
*/
#redactor-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	margin: auto;
	overflow: auto;
	width: 100%;
	height: 100%;
	background-color: #000 !important;
	.opacity-redactor(30);
}
#redactor-modal-box {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow-x: hidden;
	overflow-y: auto;
}
#redactor-modal {
	position: relative;
	margin: auto;
	margin-bottom: 20px;
	padding: 0;
	background: #fff;
	color: #000;
	font-size: 14px !important;
	font-family: @redactorFontFamily;
	box-shadow: 0 1px 70px rgba(0, 0, 0, .5);

	& header {
		padding: 30px 40px 5px 40px;
		font-size: 18px;
		font-weight: bold;
	}
	& section {
		padding: 30px 40px 50px 40px;
	}
	& label {
		display: block;
		float: none !important;
		margin: 15px 0 3px 0 !important;
		padding: 0;
	}
	& input[type="radio"],
	& input[type="checkbox"] {
		position: relative;
		top: -1px;
	}
	& select {
		width: 100%;
	}
	& input[type="text"],
	& input[type="password"],
	& input[type="email"],
	& input[type="url"],
	& textarea {
		position: relative;
		z-index: 2;
		margin: 0;
		padding: 5px 4px;
		height: 28px;
		border: 1px solid #ccc;
		border-radius: 1px;
		background-color: white;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
		color: #333;
		width: 100%;
		font-size: 14px;
		font-family: @redactorFontFamily;
		.transition-redactor(border 0.3s ease-in);
		&:focus {
			outline: none;
			border-color: #5ca9e4;
			box-shadow: 0 0 0 2px rgba(70, 161, 231, .3), 0 1px 2px rgba(0, 0, 0, .2) inset;
		}
		&.redactor-input-error {
			border-color: #e82f2f;
			box-shadow: 0 0 0 2px rgba(232, 47, 47, .3), 0 1px 2px rgba(0, 0, 0, .2) inset;
		}
	}
	& textarea {
		display: block;
		margin-top: 4px;
		line-height: 1.4em;
	}

}

/*
	Tabs in Modal
*/
#redactor-modal-tabber {
	margin-bottom: 15px;
	font-size: 12px;
	& a {
		border: 1px solid #ddd;
		line-height: 1;
		padding: 8px 15px;
		margin-right: -1px;
		text-decoration: none;
		color: #000;
		&:hover {
			background-color: rgba(31,120,216,1);
			border-color: rgba(31,120,216,1);
			color: #fff;
		}
		&.active {
			cursor: default;
			background-color: #ddd;
			border-color: #ddd;
			color: rgba(0, 0, 0, .6);
		}
	}
}


/*
	List in Modal
*/
#redactor-modal {
	#redactor-modal-list {
		margin-left: 0;
		padding-left: 0;
		list-style: none;
		max-height: 250px;
		overflow-x: scroll;
		& li {
			border-bottom: 1px solid #ddd;
			&:last-child {
				border-bottom: none;
			}
		}

		& a {
			padding: 10px 5px;
			color: #000;
			text-decoration: none;
			font-size: 13px;
			display: block;
			position: relative;
			&:hover {
				background-color: #eee;
			}
		}
	}
}

#redactor-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	text-align: right;
	color: #bbb;
	font-size: 30px;
	font-weight: 300;
	cursor: pointer;
	&:hover {
		color: #000;
	}

}
#redactor-modal footer button {
	position: relative;
	width: 100%;
	padding: 14px 16px;
	margin: 0;
	outline: none;
	border: none;
	background-color: #ddd;
	color: #000;
	text-align: center;
	text-decoration: none;
	font-weight: normal;
	font-size: 12px;
	font-family: @redactorFontFamily;
	line-height: 1;
	cursor: pointer;

	&:hover {
		color: #777;
		background: none;
		background: #bbb;
		text-decoration: none;
	}

	&.redactor-modal-delete-btn {
		background: none;
		color: #fff;
		background-color: #b52525;
		&:hover {
			color: rgba(255, 255, 255, .6);
			background-color: #881b1b;
		}
	}
	&.redactor-modal-action-btn {
		background: none;
		color: #fff;
		background-color: #2461b5;
		&:hover {
			color: rgba(255, 255, 255, .6);
			background-color: #1a4580;
		}
	}
}


/*
	##############################################

	DROPDOWN FORMATTING

	##############################################
*/
.redactor-dropdown {
	& .redactor-formatting-blockquote {
		color: rgba(0, 0, 0, .4);
		font-style: italic;
	}
	& .redactor-formatting-pre {
		font-family: monospace, sans-serif;
	}
	& .redactor-formatting-h1 {
		font-size: 36px;
		line-height: 36px;
		font-weight: bold;
	}
	& .redactor-formatting-h2 {
		font-size: 24px;
		line-height: 36px;
		font-weight: bold;
	}
	& .redactor-formatting-h3 {
		font-size: 21px;
		line-height: 30px;
		font-weight: bold;
	}
	& .redactor-formatting-h4 {
		font-size: 18px;
		line-height: 26px;
		font-weight: bold;
	}
	& .redactor-formatting-h5 {
		font-size: 16px;
		line-height: 23px;
		font-weight: bold;
	}
}


/*
	##############################################

	 CONTENT STYLES

	##############################################
*/
.redactor-editor {
	code,
	pre {
		font-family: @redactorCodeFontFamily;
	}
	div,
	p,
	ul,
	ol,
	table,
	dl,
	blockquote,
	pre {
		font-size: @redactorFontSize;
		line-height: @redactorLineHeight;
	}
	a {
		color: #15c;
		text-decoration: underline;
	}

	object,
	embed,
	video,
	img {
		max-width: 100%;
		width: auto;
	}
	video,
	img {
		height: auto;
	}
	div,
	p,
	ul,
	ol,
	table,
	dl,
	figure,
	blockquote,
	pre {
	  margin: 0;
	  margin-bottom: 15px;
	  border: none;
	  background: none;
	  box-shadow: none;
	}
	iframe,
	object,
	hr {
	  margin-bottom: 15px;
	}
	blockquote {
	  margin-left: 1.6em !important;
	  padding-left: 0;
	  color: #777;
	  font-style: italic;
	}
	ul,
	ol {
	  padding-left: 2em;
	}
	ul ul,
	ol ol,
	ul ol,
	ol ul {
	  margin: 2px;
	  padding: 0;
	  padding-left: 2em;
	  border: none;
	}
	dl dt {
	  font-weight: bold;
	}
	dd {
	  margin-left: 1em;
	}
	table {
	  border-collapse: collapse;
	  font-size: 1em;
	  width: 100%;
	  & td,
	  & th {
		  padding: 5px;
		  border: 1px solid #ddd;
		  vertical-align: top;
	  }
	}
	table thead td,
	table th {
	  font-weight: bold;
	  border-bottom-color: #888;
	}
	code {
	  background-color: #d8d7d7;
	}
	pre {
	  overflow: auto;
	  padding: 1em;
	  border: 1px solid #ddd;
	  border-radius: 3px;
	  background: #f8f8f8;
	  white-space: pre;
	  font-size: 90%;
	}
	hr {
	  display: block;
	  height: 1px;
	  border: 0;
	  border-top: 1px solid #ccc;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: bold;
		color: #000;
		padding: 0;
		background: none;
		text-rendering: optimizeLegibility;
		margin: 0 0 .5em 0;
	}
	h1,
	h2,
	h3,
	h4 {
	  line-height: 1.3;
	}
	h1 {
	  font-size: 36px;
	}
	h2 {
	  font-size: 24px;
	  margin-bottom: .7em;
	}
	h3 {
	  font-size: 21px;
	}
	h4 {
	  font-size: 18px;
	}
	h5 {
	  font-size: 16px;
	}
	h6 {
	  font-size: 12px;
	  text-transform: uppercase;
	}
}