div.colorPicker-palette {
	width: 192px;
	position: absolute;
	border: 1px solid #000066;
	background-color: #EFEFEF;
	padding: 4px;
	z-index: 9999;
}

div.colorPicker_hexWrap {width: 100%; float:left }
div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }

input.colorPicker-swatch {
	height: 20px;
	width: 20px;
	border: 2px solid #CCC;
	margin: 2px;
	float: left;
	cursor: pointer;
	line-height: 12px;
}

input.colorPicker-swatch:active {
	border: 2px inset #CCC;
}

input.colorPicker-swatch:focus {
	outline: none;
}

div.editor_bar_div {
	background: -webkit-linear-gradient(#fcfcfc,#dedede);
	background: -o-linear-gradient(#fcfcfc,#dedede);
	background: -moz-linear-gradient(#fcfcfc,#dedede);
	background: linear-gradient(#fcfcfc,#dedede);
	border: 1px #000066 solid;
	border-bottom: 0px;
	width: 98%;
	height: 28px;
	line-height: 28px;
	padding-left: 1%;
	padding-right: 1%;
	text-align: left;
	display:flex;
    align-items:center;
}

div.editor_content {
	text-align: left;
	background-color: #FFF;
	border: 1px #000066 solid;
	width: 98%;
	height: 20vh;
	padding: 1%;
	overflow-y: auto;
}

div.editor_content, div.editor_content span, div.editor_content div {
	font-size: 16px;
	font-weight: normal;
}

div.editor_content div {
	width: 100%;
}

div.editor_content:focus {
    outline: none;
}

.editor_bar_btn {
	background-color: rgba(0,0,0,0);
	background-repeat : no-repeat;
	background-position:50% 50%;
	border: 0px;
	min-width : 32px;
	height : 28px;
	line-height : 28px;
	cursor : pointer;
	display: inline-block;
}

.editor_bar_btn:focus {
	outline: none;
}

input.editor_bar_div_act {
	background-color: #CCC;
}

div.editor_font_color_pos {
	position: absolute;
	bottom: 4px;
	width: 50%;
	height: 3px;
	margin-left: 25%;
	margin-right: 25%;
	display: block;
	z-index: 1;
}

input.editor_undo {
	background-image : url("../../assets/images/hy_editor/pre.svg");
	background-size:20px 20px;
}
input.editor_redo {
	background-image : url("../../assets/images/hy_editor/next.svg");
	background-size:20px 20px;
}
input.editor_font_weight {
	background-image : url("../../assets/images/hy_editor/font_bold.svg");
	background-size:20px 20px;
}
input.editor_font_style {
	background-image : url("../../assets/images/hy_editor/font_italic.svg");
	background-size:20px 20px;
}
input.editor_align_left_btn {
	background-image : url("../../assets/images/hy_editor/align_left.svg");
	background-size:20px 20px;
}
input.editor_align_center_btn {
	background-image : url("../../assets/images/hy_editor/align_center.svg");
	background-size:20px 20px;
}
input.editor_align_right_btn {
	background-image : url("../../assets/images/hy_editor/align_right.svg");
	background-size:20px 20px;
}
input.editor_align_justify_btn {
	background-image : url("../../assets/images/hy_editor/align_justify.svg");
	background-size:20px 20px;
}
input.editor_font_color_btn {
	background-color: rgba(0,0,0,0);
	background-repeat : no-repeat;
	background-position:50% 50%;
	border: 0px;
	cursor: pointer;
	width: 100%;
	height: 100%;
	background-image : url("../../assets/images/hy_editor/font_color.svg");
	background-size:20px 20px;
}
input.editor_font_color_btn:focus {
	outline: none;
}
/*.editor_font_size{
	font-size:12px;
	
}*/



/*max*/
@media screen and (min-width : 1200px) {
div.colorPicker-palette {
	width: 192px;
	position: absolute;
	border: 1px solid #000066;
	background-color: #EFEFEF;
	padding: 4px;
	z-index: 9999;
}

div.colorPicker_hexWrap {width: 100%; float:left }
div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }

input.colorPicker-swatch {
	height: 20px;
	width: 20px;
	border: 2px solid #CCC;
	margin: 2px;
	float: left;
	cursor: pointer;
	line-height: 12px;
}

input.colorPicker-swatch:active {
	border: 2px inset #CCC;
}

input.colorPicker-swatch:focus {
	outline: none;
}

div.editor_bar_div {
	background: -webkit-linear-gradient(#fcfcfc,#dedede);
	background: -o-linear-gradient(#fcfcfc,#dedede);
	background: -moz-linear-gradient(#fcfcfc,#dedede);
	background: linear-gradient(#fcfcfc,#dedede);
	border: 1px #000066 solid;
	border-bottom: 0px;
	width: 98%;
	height: 30px;
	line-height: 30px;
	padding-left: 1%;
	padding-right: 1%;
	text-align: left;
	display:flex;
    align-items:center;
}

div.editor_content {
	text-align: left;
	background-color: #FFF;
	border: 1px #000066 solid;
	width: 98%;
	height: 18vh;
	padding: 1%;
	overflow-y: auto;
}

div.editor_content, div.editor_content span, div.editor_content div {
	font-size: 16px;
	font-weight: normal;
}

div.editor_content div {
	width: 100%;
}

div.editor_content:focus {
    outline: none;
}

.editor_bar_btn {
	background-color: rgba(0,0,0,0);
	background-repeat : no-repeat;
	background-position:50% 50%;
	border: 0px;
	min-width : 38px;
	height : 30px;
	line-height : 30px;
	cursor : pointer;
	display: inline-block;
}

.editor_bar_btn:focus {
	outline: none;
}

input.editor_bar_div_act {
	background-color: #CCC;
}

div.editor_font_color_pos {
	position: absolute;
	bottom: 4px;
	width: 50%;
	height: 3px;
	margin-left: 25%;
	margin-right: 25%;
	display: block;
	z-index: 1;
}

input.editor_undo {
	background-image : url("../../assets/images/hy_editor/pre.svg");
	background-size:24px 24px;
}
input.editor_redo {
	background-image : url("../../assets/images/hy_editor/next.svg");
	background-size:24px 24px;
}
input.editor_font_weight {
	background-image : url("../../assets/images/hy_editor/font_bold.svg");
	background-size:24px 24px;
}
input.editor_font_style {
	background-image : url("../../assets/images/hy_editor/font_italic.svg");
	background-size:24px 24px;
}
input.editor_align_left_btn {
	background-image : url("../../assets/images/hy_editor/align_left.svg");
	background-size:24px 24px;
}
input.editor_align_center_btn {
	background-image : url("../../assets/images/hy_editor/align_center.svg");
	background-size:24px 24px;
}
input.editor_align_right_btn {
	background-image : url("../../assets/images/hy_editor/align_right.svg");
	background-size:24px 24px;
}
input.editor_align_justify_btn {
	background-image : url("../../assets/images/hy_editor/align_justify.svg");
	background-size:24px 24px;
}
input.editor_font_color_btn {
	background-color: rgba(0,0,0,0);
	background-repeat : no-repeat;
	background-position:50% 50%;
	border: 0px;
	cursor: pointer;
	width: 100%;
	height: 100%;
	background-image : url("../../assets/images/hy_editor/font_color.svg");
	background-size:24px 24px;
}
input.editor_font_color_btn:focus {
	outline: none;
}
	
}

/*xx-max*/
@media screen and (min-width : 1600px) {
div.colorPicker-palette {
	width: 192px;
	position: absolute;
	border: 1px solid #000066;
	background-color: #EFEFEF;
	padding: 4px;
	z-index: 9999;
}

div.colorPicker_hexWrap {width: 100%; float:left }
div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }

input.colorPicker-swatch {
	height: 20px;
	width: 20px;
	border: 2px solid #CCC;
	margin: 2px;
	float: left;
	cursor: pointer;
	line-height: 12px;
}

input.colorPicker-swatch:active {
	border: 2px inset #CCC;
}

input.colorPicker-swatch:focus {
	outline: none;
}

div.editor_bar_div {
	background: -webkit-linear-gradient(#fcfcfc,#dedede);
	background: -o-linear-gradient(#fcfcfc,#dedede);
	background: -moz-linear-gradient(#fcfcfc,#dedede);
	background: linear-gradient(#fcfcfc,#dedede);
	border: 1px #000066 solid;
	border-bottom: 0px;
	width: 98%;
	height: 42px;
	line-height: 42px;
	padding-left: 1%;
	padding-right: 1%;
	text-align: left;
	display:flex;
    align-items:center;
}

div.editor_content {
	text-align: left;
	background-color: #FFF;
	border: 1px #000066 solid;
	width: 98%;
	height: 37vh;
	padding: 1%;
	overflow-y: auto;
}

div.editor_content, div.editor_content span, div.editor_content div {
	font-size: 16px;
	font-weight: normal;
}

div.editor_content div {
	width: 100%;
}

div.editor_content:focus {
    outline: none;
}

.editor_bar_btn {
	background-color: rgba(0,0,0,0);
	background-repeat : no-repeat;
	background-position:50% 50%;
	border: 0px;
	min-width : 45px;
	height : 42px;
	line-height : 42px;
	cursor : pointer;
	display: inline-block;
}

.editor_bar_btn:focus {
	outline: none;
}

input.editor_bar_div_act {
	background-color: #CCC;
}

div.editor_font_color_pos {
	position: absolute;
	bottom: 7px;
	width: 50%;
	height: 4px;
	margin-left: 25%;
	margin-right: 25%;
	display: block;
	z-index: 1;
}

input.editor_undo {
	background-image : url("../../assets/images/hy_editor/pre.svg");
	background-size:30px 30px;
}
input.editor_redo {
	background-image : url("../../assets/images/hy_editor/next.svg");
	background-size:30px 30px;
}
input.editor_font_weight {
	background-image : url("../../assets/images/hy_editor/font_bold.svg");
	background-size:30px 30px;
}
input.editor_font_style {
	background-image : url("../../assets/images/hy_editor/font_italic.svg");
	background-size:30px 30px;
}
input.editor_align_left_btn {
	background-image : url("../../assets/images/hy_editor/align_left.svg");
	background-size:30px 30px;
}
input.editor_align_center_btn {
	background-image : url("../../assets/images/hy_editor/align_center.svg");
	background-size:30px 30px;
}
input.editor_align_right_btn {
	background-image : url("../../assets/images/hy_editor/align_right.svg");
	background-size:30px 30px;
}
input.editor_align_justify_btn {
	background-image : url("../../assets/images/hy_editor/align_justify.svg");
	background-size:30px 30px;
}
input.editor_font_color_btn {
	background-color: rgba(0,0,0,0);
	background-repeat : no-repeat;
	background-position:50% 50%;
	border: 0px;
	cursor: pointer;
	width: 100%;
	height: 100%;
	background-image : url("../../assets/images/hy_editor/font_color.svg");
	background-size:30px 30px;
}
input.editor_font_color_btn:focus {
	outline: none;
}
	
}