@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

* {
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

html, body {
    height:100%;
    overflow: hidden;
    background: #1d1f20;
}

body {
	font-size: 13px;
	position: relative;
}

h1, h2, h3, h4 {
	font-family: "Nanum Gothic";
	line-height: 1.2;
	margin: 0 0 10px 0;
}

.group:before, .group:after {
    content:"";
    display:table
}

.group:after {
    clear:both
}

.webponet-header {
	background: gray;
	display: block;
	position: relative;
	height: 62px;
	background-color: #111111;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#111111', endColorstr='#222222');
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(100%, #222222));
	background: -webkit-linear-gradient(#111111,#222222);
	background: -moz-linear-gradient(#111111,#222222);
	background: -o-linear-gradient(#111111,#222222);
	background: linear-gradient(#111111,#222222);
	border-bottom: 1px solid #3d3d3d; 

	/* background-color: #383838;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#505050', endColorstr='#383838');
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #505050), color-stop(100%, #383838));
	background: -webkit-linear-gradient(#505050,#383838);
	background: -moz-linear-gradient(#505050,#383838);
	background: -o-linear-gradient(#505050,#383838);
	background: linear-gradient(#505050,#383838);
	border-bottom: 1px solid black;
	box-shadow: inset 0px 0px 1px #6e6e6e,0 2px 2px rgba(0,0,0,0.4); */

}

.webponent-logo {
	position: absolute;
	width: 265px;
	height: 61px;
	top: 0;
	left: 0;
	z-index: 10;
	background-image: url('../../img/logo.png');
}

.webponent-logo h1 {
	font-size: 0px;
	text-indent: -9999px;
}

.added-libs {
	position: absolute;
	top: 14px;
	right: 135px;
}

.logined .added-libs {
	right: 360px;
}

.user-controll {
	position: absolute;
	top: 14px;
	right: 140px;
	color : #fff;
}


.login-btn{
	font-family: 'Nanum Gothic';
	font-weight: bold;
	display: inline-block;
	border: 0;
	outline: 0;
	padding: 0 16px;
	line-height: 32px;
	background: #323334;
	border-radius: 5px;
	border: 1px solid black;
	border-top: 1px solid #3F4041;
	color: #fff !important;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none !important;
	cursor: pointer;
}

.logined .user-controll {
	right: 176px;
}

.logined .login-btn {
	width: 180px;
}


.login-result-message {
	color: #dd925f;
	position: relative;
	top: 8px;
}

.libs-board {
	position: absolute;
	top: 13px;
	right: 99px;
	z-index: 251;
}

.logined .libs-board {
	right : 137px;
}

.sample-controll {
	position: absolute;
	top: 13px;
	right: 20px;
	color : #fff;
	font-size: 18px;
}

.logined .sample-controll {
	right: 20px;
}


.show-added-lib-list{
	font-family: 'Nanum Gothic';
	font-weight: bold;
	display: inline-block;
	border: 0;
	outline: 0;
	padding: 0 16px;
	line-height: 32px;
	background: #323334;
	border-radius: 5px;
	border: 1px solid black;
	border-top: 1px solid #3F4041;
	color: #52beea !important;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none !important;
	cursor: pointer;
}

.added-libs-list {
	display: none;
	padding: 0;
	position: absolute;
	border-radius: 5px;
	top: 37px;
	left: 1px;
	z-index: 251;
	list-style: none;
	background-color: #323334;
	border: 1px solid #000000;
	box-shadow: inset 0 1px 0 #6e6e6e,0 1px 1px rgba(0,0,0,0.4);
}

.added-libs-list > li {
	font-family: 'Nanum Gothic';
	font-size: 13px;
	cursor: default;
	position: relative;
	color: #fff;
	padding-left: 15px;
	padding-top: 7px;
	padding-right: 60px;
	padding-bottom: 7px;
	white-space: nowrap;
	border-top: 1px solid #3F4041;
}

.added-libs-list > li:first-child {
	border-top: none;
}

.added-libs-list > li:nth-child(2) {
	border-top: none;
}

.add-lib-btn {
	cursor: pointer;
	background: none;
	border: none;
	text-indent: -999px;
	overflow: hidden;
	width: 35px;
	height: 35px;
	background-image: url('../../img/btn_add_lib.gif');
	background-size: 35px 35px;
	background-repeat: no-repeat;
}

.remove-lib-btn {
	position: absolute;
	right: 0;
	margin-top: 3px;
	margin-right: 12px;
	cursor: pointer;
	background: none;
	border: none;
	text-indent: -999px;
	overflow: hidden;
	width: 14px;
	height: 14px;
	background-image: url('../../img/btn_close.png');
	background-size: 14px 14px;
	background-repeat: no-repeat;
}

.reset-btn {
	cursor: pointer;
	background: none;
	border: none;
	text-indent: -999px;
	overflow: hidden;
	width: 35px;
	height: 35px;
	background-image: url('../../img/btn_reset.gif');
	background-size: 35px 35px;
	background-repeat: no-repeat;
}

.save-sample-btn {
	display: none;
	cursor: pointer;
	background: none;
	border: none;
	text-indent: -999px;
	overflow: hidden;
	width: 35px;
	height: 35px;
	background-image: url('../../img/btn_save.gif');
	background-size: 35px 35px;
	background-repeat: no-repeat;
}

.logined .save-sample-btn {
	display: inline-block;
}

.export-btn {
	cursor: pointer;
	background: none;
	border: none;
	text-indent: -999px;
	overflow: hidden;
	width: 35px;
	height: 35px;
	background-image: url('../../img/btn_expert.gif');
	background-size: 35px 35px;
	background-repeat: no-repeat;
}

.open-sample-btn {
	cursor: pointer;
	background: none;
	border: none;
	text-indent: -999px;
	overflow: hidden;
	width: 30px;
	height: 30px;
	background-image: url('../../img/open.png');
	background-size: 30px 30px;
	background-repeat: no-repeat;
	box-shadow: inset 0px 0px 1px 1px rgba(15,15,15,0.7);
}

.feedback-btn {
	display: inline-block;
	cursor: pointer;
	background: none;
	border: none;
	text-indent: -999px;
	overflow: hidden;
	margin-top:2px;
	width: 30px;
	height: 30px;
	background-image: url('../../img/btn_feedback.gif');
	background-size: 30px 30px;
	background-repeat: no-repeat;
}


.full-screen-btn {
	cursor: pointer;
	background: none;
	border: none;
	text-indent: -999px;
	overflow: hidden;
	margin-top:2px;
	margin-right:20px;
	width: 30px;
	height: 30px;
	background-image: url('../../img/btn_fullscreen.gif');
	background-size: 30px 30px;
	background-repeat: no-repeat;
}

.view-source-btn {
	cursor: pointer;
	background: none;
	border: none;
	text-indent: -999px;
	overflow: hidden;
	margin:1px;	
	width: 30px;
	height: 30px;
	background-image: url('../../img/btn_viewsource.gif');
	background-size: 30px 30px;
	background-repeat: no-repeat;
}

#open-htmlSource .CodeMirror {
	width:100%;	
	height:95%;	
}

.user-selection {
	padding: 0;
	border-radius: 5px;
	position: absolute;
	z-index: 252;
	list-style: none;
	background-color: #323334;
	border: 1px solid #000000;
	box-shadow: inset 0 1px 0 #6e6e6e,0 1px 1px rgba(0,0,0,0.4);
}

.user-selection > li {
	font-family: 'Nanum Gothic';
	font-size: 13px;
	cursor: pointer;
	position: relative;
	color: #fff;
	padding-left: 15px;
	padding-top: 7px;
	padding-right: 60px;
	padding-bottom: 7px;
	white-space: nowrap;
	border-top: 1px solid #3F4041;
}

.user-selection > li:first-child {
	display: none;
	border-top: none;
}

.user-selection > li:nth-child(2) {
	border-top: none;
}


.user-selection > li:hover {
	color: gray;
}

.info-wrap {
	width: 200px;
	position: absolute;
	top: 62px;
	bottom: 35px;
	background-color: #222222;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#222222', endColorstr='#333333');
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #222222), color-stop(100%, #333333));
	background: -webkit-linear-gradient(#222222,#333333);
	background: -moz-linear-gradient(#222222,#333333);
	background: -o-linear-gradient(#222222,#333333);
	background: linear-gradient(#222222,#333333);
}

.info-closed .info-wrap{
	width: 14px;
}

.info-wrap-opener {
	position: absolute;
	z-index: 251;
	right: 4px;
	top: 50%;
	margin-top: -6px;
	overflow: hidden;
	border: none;
	cursor: pointer;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 6px 6px 6px 0;
	background: transparent;
	border-color: transparent #999 transparent transparent;
}

.info-closed .info-wrap-opener{
	left: 5px;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #999;
}

.info-divider {
	position: absolute;
	z-index: 250;
	right: 0%;
	top: 0px;
	bottom: 0;
	height: 100%;
	width: 14px;
	background-color: #383838;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#505050', endColorstr='#383838');
	background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #505050), color-stop(100%, #383838));
	background: -webkit-linear-gradient(left, #505050,#383838);
	background: -moz-linear-gradient(left, #505050,#383838);
	background: -o-linear-gradient(left, #505050,#383838);
	background: linear-gradient(left, #505050,#383838);
	border-left: 1px solid black;
	border-right: 1px solid black;
}

.info-closed .editor-wrap{
	margin-left: 14px;
}

.info-tree-box {
	overflow: hidden;
	width: 100%;
	height: auto;
	min-height: 29px;
	left: 0;
	position: absolute;
	background: #1d1f20;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#1d1f20', endColorstr='#2f3031');
	background: -webkit-linear-gradient(45deg, #1d1f20,#2f3031) !important;
	background: -moz-linear-gradient(45deg, #1d1f20,#2f3031) !important;
	background: -o-linear-gradient(45deg, #1d1f20,#2f3031) !important;
	background: linear-gradient(45deg, #1d1f20,#2f3031) !important;
}

.info-wrap .private-file-tree-container {
	padding-bottom: 35px;
	margin-right: 14px;
	overflow-y: auto;
}

.private-box {
	display: none;
}

.logined .private-box{
	display: block;
	top: 0;
	bottom: 66.6666%;
}

.sample-box {
	top: 0;
	bottom : 0;
}

.logined .sample-box{
	top: 33.3333%;
}

.info-wrap .sample-file-tree-container {
	padding-bottom: 35px;
	margin-right: 14px;
	overflow-y: auto;
}

.file-tree {
	list-style: none;
	font-size : 13px;
	color: #ccc;
	font-family: 'Nanum Gothic';
	line-height: 1.6;
}

.file-tree ul {
	list-style: none;
}

.file-tree-category,
.file-tree-filename {
	display: block;
	padding-left: 20px;
}

.file-tree a:visited,
.file-tree a:link {
	color: #B4B4B4;
}

.file-tree-category {
	font-weight: bold;
	color: #fff !important;
	font-size: 13px;
	line-height: 33px;
	background: #2f2f2f;
	background: -webkit-linear-gradient(#4d4d4d, #2f2f2f);
	background: -o-linear-gradient(#4d4d4d, #2f2f2f);
	background: linear-gradient(#4d4d4d, #2f2f2f);
	border: 1px solid black;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none !important;
	cursor: pointer;
}

.file-tree-filename {
	font-size: 13px;
	line-height: 23px;
}

.file-tree-filename:hover {
	color: #999 !important;
}

.file-tree-filename.selected {
	color : #5ebeea !important;
}

.file-tree-list {
	display: none;
}

.file-tree-list.files-shown {
	display: block;
}

.editor-wrap {
	margin-left: 200px;
	height: 800px;
	position: relative;
	z-index: 0;
}

.boxes-wrap {
	position: relative;
	height: 100%;
}

.editor-boxes {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

.editor-box {
	overflow: hidden;
	width: 100%;
	height: auto;
	min-height: 29px;
	left: 0;
	position: absolute;
	background: #1d1f20;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#1d1f20', endColorstr='#2f3031');
	background: -webkit-linear-gradient(45deg, #1d1f20,#2f3031) !important;
	background: -moz-linear-gradient(45deg, #1d1f20,#2f3031) !important;
	background: -o-linear-gradient(45deg, #1d1f20,#2f3031) !important;
	background: linear-gradient(45deg, #1d1f20,#2f3031) !important;
	
}

.editor-css {
	top: 0;
	bottom: 66.6666%;
}

.editor-html {
	top: 33.3333%;
	bottom: 33.33333%;
}

.editor-js {
	top: 66.6666%;
	bottom: 0;
}
/* case1 */
.css-off-html-on-js-on .editor-css {
	bottom : 96%;
}

.css-off-html-on-js-on .editor-css .code-wrap {
	display: none;
}

.css-off-html-on-js-on .editor-html {
	top: 4%;
	bottom: 48%;
}

.css-off-html-on-js-on .editor-js {
	top: 52%;
}

/* case2 */
.css-off-html-off-js-on .editor-css {
	bottom : 96%;
}

.css-off-html-off-js-on .editor-css .code-wrap {
	display: none;
}

.css-off-html-off-js-on .editor-html {
	top: 4%;
	bottom: 92%;
}
.css-off-html-off-js-on .editor-html .code-wrap {
	display: none;
}

.css-off-html-off-js-on .editor-js {
	top: 8%;
}

/* case3 */
.css-on-html-off-js-off .editor-css {
	bottom : 8%;
}

.css-on-html-off-js-off .editor-html {
	top: 92%;
	bottom: 96%;
}
.css-on-html-off-js-off .editor-html .code-wrap {
	display: none;
}

.css-on-html-off-js-off .editor-js {
	top: 96%;
}

.css-on-html-off-js-off .editor-js .code-wrap {
	display: none;
}

/* case4 */
.css-on-html-on-js-off .editor-css {
	bottom: 48%;
}

.css-on-html-on-js-off .editor-html {
	top: 52%;
	bottom: 4%;
}
.css-on-html-on-js-off .editor-js {
	top: 96%;
}

.css-on-html-on-js-off .editor-js .code-wrap {
	display: none;
}

/* case5 */
.css-off-html-on-js-off .editor-css {
	bottom: 96%;
}

.css-off-html-on-js-off .editor-css .code-wrap {
	display: none;
}
.css-off-html-on-js-off .editor-html {
	top: 4%;
	bottom: 4%;
}
.css-off-html-on-js-off .editor-js {
	top: 96%;
}

.css-off-html-on-js-off .editor-js .code-wrap {
	display: none;
}

/* case6 */
.css-on-html-off-js-on .editor-css {
	bottom: 52%;
}

.css-on-html-off-js-on .editor-html {
	top: 48%;
	bottom: 48%;
}

.css-on-html-off-js-on .editor-html .code-wrap {
	display: none;
}

.css-on-html-off-js-on .editor-js {
	top: 52%;
}

.wp-textarea {
	display: none;
}

.center-wrapper {
	width: 50%;
	height: 100%;
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 200;
	overflow: hidden;
	
}

.result-boxes {
	background: #fff;
	/* width: 50%;
	height: 100%;
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 200;
	overflow: hidden;
	background: #fff; */

	position: absolute;
	top: 0;
	left: 0;
	bottom: 4%;
	right: 0;

	
}

.editor-data-on .result-boxes {
	bottom: 33.3%;
}

.editor-data {
	top: 96%;
	bottom: 0;
}

.editor-data input[type="text"],
.editor-data input[type="button"]{
	display: none;
}

.editor-data-on .editor-data input[type="text"],
.editor-data-on .editor-data input[type="button"]{
	display: block;
}

.editor-data-on .editor-data{
	top: 66.6666%;
}

.webponet-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 44px;
	line-height: 28px;
	color: #999;
	padding: 0 10px;
	z-index: 5000;
	background-color: #383838;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#505050', endColorstr='#383838');
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #505050), color-stop(100%, #383838));
	background: -webkit-linear-gradient(#505050,#383838);
	background: -moz-linear-gradient(#505050,#383838);
	background: -o-linear-gradient(#505050,#383838);
	background: linear-gradient(#505050,#383838);
	border-top: 1px solid black;
	box-shadow: inset 0 1px 0 #6e6e6e,0 2px 2px rgba(0,0,0,0.4);
}

.copy-right {
	display: inline-block;
	margin-top: 7px;
	margin-left: 8px;
	font-family: 'Nanum Gothic';
	font-size: 13px;
	cursor: default;
}

.copy-right a {
	color : inherit !important;
}

.result-page {
	border: none;
	width: 100%;
	height: 100%;
}

.resizer {
	position: absolute;
	z-index: 250;
	left: 60%;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 14px;
	cursor: col-resize;
	background-color: #383838;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#505050', endColorstr='#383838');
	background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #505050), color-stop(100%, #383838));
	background: -webkit-linear-gradient(left, #505050,#383838);
	background: -moz-linear-gradient(left, #505050,#383838);
	background: -o-linear-gradient(left, #505050,#383838);
	background: linear-gradient(left, #505050,#383838);
	border-left: 1px solid black;
	border-right: 1px solid black;
	/* box-shadow: inset 0 1px 0 #6e6e6e,0 2px 2px rgba(0,0,0,0.4); */
}

.resizer span {
	display: block;
	height: 100%;
	background: url(../../img/handle-horz.png) center center no-repeat;
}

.powers {
	position: relative;
	padding: 5px 5px;
}

.powers:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	height: 5px;
	width: 100%;
	background-color: rgba(0,0,0,0);
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0)));
	background: -webkit-linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0));
	background: -moz-linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0));
	background: -o-linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0));
	background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0));
}

.powers h2 {
	font-weight: bold;
	color: #fff;
	margin: 0;
	font-size: 1.3em;
	display: inline-block;
	padding-left: 10px;
	-webkit-transition: padding 0.2s;
	-moz-transition: padding 0.2s;
	-o-transition: padding 0.2s;
	transition: padding 0.2s;
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
}

.editor-box .powers h2 {
	color: #52BEEA;
	font-size: 1.8em;
	
}

.powers .power-input-wrap {
	position: absolute;
	top: 8px;
	left: 115px;
	right: 45px;
}

.powers .power-input {
	border: none;
	width: 100%;
	height: 22px;
	padding: 0 5px;
	color: #fff;
	outline: none;
	background: #626163;
	border-radius: 2px;
	font-weight: normal;
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 12px;
}

.powers .power-button {
	position: absolute;
	font-size: 18px;
	top : 8px;
	right: 4px;
	width: 35px;
	height: 24px;
	border: 0;
	outline: 0;
	background: #2f2f2f;
	background: -webkit-linear-gradient(#4d4d4d, #2f2f2f);
	background: -o-linear-gradient(#4d4d4d, #2f2f2f);
	background: linear-gradient(#4d4d4d, #2f2f2f);
	border-radius: 4px;
	border: 1px solid black;
	color: white !important;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none !important;
	cursor: pointer;
}

.powers .checkbox {
	position: absolute;
	right: 15px;
	top: 13px;
	cursor: pointer;
}

.editor-box .powers {
	cursor: pointer;
}

.editor-box .expander {
	z-index: 100;
}

.expander {
	position: absolute;
	top: 6px;
	right: 10px;
	font-size: 1.1em;
	overflow: hidden;
	white-space: nowrap;
}

.code-wrap {
	height: 100%;
	padding-bottom: 21px;
}

.code-wrap .CodeMirror {
	height: 100%;
	padding-bottom: 45px;
	margin-top: 5px;
}

.editor-data .code-wrap {
	padding-bottom: 64px;
}

.editor-data .code-wrap .CodeMirror {
	padding-bottom: 2px;
}

/* scrollbar */
.CodeMirror-scrollbar-filler {
	background-color: #272822;	
}

.CodeMirror-scroll{
    margin-right: 5px;
    padding-right: 0;
}

.CodeMirror-vscrollbar{
    overflow-y: hidden;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
}

::-webkit-scrollbar-corner {
	background: #272822;
}

.CodeMirror{
	scrollbar-face-color: #52524e;
	scrollbar-arrow-color: #272822;
	scrollbar-highlight-color: #272822;
	scrollbar-3dlight-color: #52524e;
	scrollbar-shadow-color: #272822;
	scrollbar-darkshadow-color: #52524e;
	scrollbar-track-color: #272822;
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #222425;
  background-color: #222425;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #969696;
}

/* CURSOR */

.CodeMirror div.CodeMirror-cursor {
  border-left: 1px solid #cfe0e8;
  z-index: 3;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
  width: auto;
  border: 0;
  background: #7e7;
  z-index: 1;
}

.CodeMirror-selected { 
	background: rgba(160,190,240,0.3); 
}

.CodeMirror-focused .CodeMirror-selected { 
	background: rgba(100,100,280,0.3);
}

/* THEME */

.cm-s-default .cm-keyword {color: #b5bc67;}
.cm-s-default .cm-atom {color: #efc371;}
.cm-s-default .cm-number {color: #dd925f;}
.cm-s-default .cm-def {color: #efc371;}
.cm-s-default .cm-variable {color: #efc371;}
.cm-s-default .cm-variable-2 {color: #809bbd;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-property {color: #ae94c0;}
.cm-s-default .cm-operator {color: white;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #b5bc67;}
.cm-s-default .cm-string-2 {color: white;}
.cm-s-default .cm-meta {color: #ae94c0;}
.cm-s-default .cm-qualifier {color: #efc371;}
.cm-s-default .cm-builtin {color: #efc371;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #efc371;}
.cm-s-default .cm-attribute {color: #c3c6c4;}
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}

.cm-s-default .cm-error {color: #ae94c0;}
.cm-invalidchar {color: #f00;}

div.CodeMirror span.CodeMirror-matchingbracket {color: #68bf50;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-activeline-background {background: transparent;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  line-height: 1.3;
  position: relative;
  overflow: hidden;
  background: transparent;
  color: #dddedf;
}

/* dialog */
.ui-front {
	z-index: 10000;
	color:#999;
}

.ui-dialog {
	background: #363636;
	border:solid 10px #252525;
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.9);
}
.ui-dialog .ui-dialog-title {
	font-family: 'Nanum Gothic';
	font-weight: bold;
	font-size: 24px;
	color: #52beea;
}
.ui-dialog .ui-dialog-titlebar-close {
	background:none;
	border:none;
    position: absolute;
    width: 14px;
    margin: -12px 0px 0 0;
    height: 14px;
    background-image: url('../../img/btn_close.png');
    outline:0;
}

#open-form select {
	width:125px;
	margin-right: 5px;
	margin-top:15px;
}

.dialog-input {
	padding:5px;
	width:200px;
	display:block;
	margin:5px auto;
	margin-bottom:10px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border:none;
	color:#fff;
	outline:none;
	background:#626163;
}

.dialog-input:focus {
	background:#fff;
	color:#34495E;
	font-weight:300;
}

.dialog-input.export-path-input {
	width : 100%;
}

.dialog-btn {
	margin-top:0;
	width: 70px;
	height:27px;
	border-radius: 3px;
	background-color: #323335;	
	border:solid 1px #0D0D0D;
	font-family: 'Nanum Gothic';
	color: #52beea;
	font-size: 9pt;
}

.login-dialog form{
	text-align: center;
}

#open-form-category, #open-form-sampleFile {
	background:url('../../img/arrow.png');
	background-color:#626163;
	background-repeat:no-repeat;
	background-position: right 10px top 10px;
	background-size: 14px 9px;
	color:#fff;
	padding:5px;
	width:auto;
	border-radius:5px;
	-webkit-border-radius:5px;
	-webkit-appearance: none;
	border:0;
	outline:0;
}

#open-form-category > option, #open-form-sampleFile > option {
  	margin: 3px;
  	padding: 6px 8px;
  	text-shadow: none;
  	background: #727173;
  	border-radius: 3px;
  	cursor: pointer;
}

#select-theme {
	display: none;
	background:url('../../img/arrow.png');
	background-color:#626163;
	background-repeat:no-repeat;
	background-position: right 10px top 10px;
	background-size: 14px 9px;
	color:#fff;
	width:100px;
	height:25px;
	padding-left:5px;
	margin:3px;
	border-radius:7px;
	-webkit-border-radius:5px;
	-webkit-appearance: none;
	border:0;
	outline:0;
}

.layout-controll {
	position: absolute;
	right: 0px;
	top: 4px;
}

.ui-tooltip {
	background: #111;
	color: #999;
}

.save-to-private-area {
	display: none;
}

.logined .save-to-private-area {
	display: inline;
}

.webponent-loading-message {
	width: 32px;
	height: 32px;
	display: none;
	position: absolute;
	z-index: 9;
	top: 15px;
	right: 515px;
}

.logined .webponent-loading-message {
	right: 291px;
}

.about {
	position: absolute;
    top: 14px;
    right: 289px;
}
.about .about-btn{
	font-family: 'Nanum Gothic';
	font-weight: bold;
	display: inline-block;
	border: 0;
	outline: 0;
	padding: 0 16px;
	line-height: 32px;
	background: #fff;
	border-radius: 5px;
	border: 1px solid black;
	color: #000 !important;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none !important;
	cursor: pointer;
}

.aboutPopup .info-wrap .sample-file-tree-container {
	margin-right: 0;	
}
.aboutPopup .file-tree-list {
    display: block;
}
.aboutPopup .editor-wrap {
	color: #242627;
	padding: 15px;
	position: absolute;
	left: 0;
	top: 62px;
	right: 0;
	bottom: 44px;
	height: auto;
	overflow: hidden;
	overflow-y: scroll;
	background: #fff;
}

.aboutPopup .about-publisher {
	display: block;
}
.aboutPopup .about-publisher strong {
	text-decoration: none;
	font-weight: bold;
	color: #52BEEA;
}

.aboutPopup .about-button, .aboutPopup .about-layout {
	
	display: none;
}

.aboutPopup .about-ol-decimal {
	    list-style-type: decimal;
    	padding-left: 30px;
}

.aboutPopup h3 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

.aboutPopup h4 {
	padding: 30px 0 5px;
	font-weight: bold;
	font-size: 16px;
}

.aboutPopup h5 {
	padding: 0 0 10px 20px;
	font-weight: bold;
	font-size: 14px;
}

.aboutPopup .about-button div, .aboutPopup .about-layout div {
	padding-left: 30px;
}

.aboutPopup .about-button p, .aboutPopup .about-layout p {
	padding-bottom: 30px;
}

.aboutPopup  .about-publisher a {
	padding-right: 15px;
	background: url('../../about/img/ic_blank.png') no-repeat 98% 4px;
}

.aboutPopup ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.aboutPopup ::-webkit-scrollbar-track {
    background: #ddd;
}

.aboutPopup ::-webkit-scrollbar-thumb {
    background: #52B9EA;
}

.aboutPopup ::-webkit-scrollbar-corner {
	background: #272822;
}