/* CSS styles for the tool */
.ace-tm .ace_gutter {
    background: #f0f0f0;
    color: #333;
}
.ace-tm .ace_print-margin {
    width: 1px;
    background: #e8e8e8;
}
.ace-tm .ace_fold {
    background-color: #6b72e6;
}
.ace-tm {
    background-color: #ffffff;
    color: black;
}
.ace-tm .ace_cursor {
    color: black;
}
.ace-tm .ace_invisible {
    color: rgb(191, 191, 191);
}
.ace-tm .ace_storage,
.ace-tm .ace_keyword {
    color: blue;
}
.ace-tm .ace_constant {
    color: rgb(197, 6, 11);
}
.ace-tm .ace_constant.ace_buildin {
    color: rgb(88, 72, 246);
}
.ace-tm .ace_constant.ace_language {
    color: rgb(88, 92, 246);
}
.ace-tm .ace_constant.ace_library {
    color: rgb(6, 150, 14);
}
.ace-tm .ace_invalid {
    background-color: rgba(255, 0, 0, 0.1);
    color: red;
}
.ace-tm .ace_support.ace_function {
    color: rgb(60, 76, 114);
}
.ace-tm .ace_support.ace_constant {
    color: rgb(6, 150, 14);
}
.ace-tm .ace_support.ace_type,
.ace-tm .ace_support.ace_class {
    color: rgb(109, 121, 222);
}
.ace-tm .ace_keyword.ace_operator {
    color: rgb(104, 118, 135);
}
.ace-tm .ace_string {
    color: rgb(3, 106, 7);
}
.ace-tm .ace_comment {
    color: rgb(76, 136, 107);
}
.ace-tm .ace_comment.ace_doc {
    color: rgb(0, 102, 255);
}
.ace-tm .ace_comment.ace_doc.ace_tag {
    color: rgb(128, 159, 191);
}
.ace-tm .ace_constant.ace_numeric {
    color: rgb(0, 0, 205);
}
.ace-tm .ace_variable {
    color: rgb(49, 132, 149);
}
.ace-tm .ace_xml-pe {
    color: rgb(104, 104, 91);
}
.ace-tm .ace_entity.ace_name.ace_function {
    color: #0000a2;
}
.ace-tm .ace_heading {
    color: rgb(12, 7, 255);
}
.ace-tm .ace_list {
    color: rgb(185, 6, 144);
}
.ace-tm .ace_meta.ace_tag {
    color: rgb(0, 22, 142);
}
.ace-tm .ace_string.ace_regex {
    color: rgb(255, 0, 0);
}
.ace-tm .ace_marker-layer .ace_selection {
    background: rgb(181, 213, 255);
}
.ace-tm.ace_multiselect .ace_selection.ace_start {
    box-shadow: 0 0 3px 0px white;
}
.ace-tm .ace_marker-layer .ace_step {
    background: rgb(252, 255, 0);
}
.ace-tm .ace_marker-layer .ace_stack {
    background: rgb(164, 229, 101);
}
.ace-tm .ace_marker-layer .ace_bracket {
    margin: -1px 0 0 -1px;
    border: 1px solid rgb(192, 192, 192);
}
.ace-tm .ace_marker-layer .ace_active-line {
    background: rgba(0, 0, 0, 0.07);
}
.ace-tm .ace_gutter-active-line {
    background-color: #dcdcdc;
}
.ace-tm .ace_marker-layer .ace_selected-word {
    background: rgb(250, 250, 255);
    border: 1px solid rgb(200, 200, 250);
}
.ace-tm .ace_indent-guide {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==")
        right repeat-y;
}
#fromeditor {
    height: 40vh;
    border: 1px solid #ddd;
    border-radius: 4px;
    border-bottom-right-radius: 0px;
    margin-top: 5px;
}

.copy-btn  {float: right; margin-left: 4px;}
.copy-btn i{display:inline-block;width: 16px;height: 16px;}
.copy-btn i.fa-clipboard{color: #5cb85c}
.copy-btn:active,.copy-btn:focus{outline:0!important}