/** 代码格式化工具右侧输出：Monaco vs 主题共用布局 */
.tool-form-xml #editor-output.ace_editor,
.tool-form-html #editor-output.ace_editor,
.tool-form-css #editor-output.ace_editor,
.tool-form-js #editor-output.ace_editor,
.tool-form-yaml #editor-output.ace_editor,
.tool-form-properties-to-yaml #editor-output.ace_editor,
.tool-form-yaml-to-properties #editor-output.ace_editor,
.tool-form-sql #editor-output.ace_editor {
    font-size: 14.8px !important;
    line-height: 20px !important;
}

.tool-form-xml #editor-output .ace_gutter-cell,
.tool-form-html #editor-output .ace_gutter-cell,
.tool-form-css #editor-output .ace_gutter-cell,
.tool-form-js #editor-output .ace_gutter-cell,
.tool-form-yaml #editor-output .ace_gutter-cell,
.tool-form-properties-to-yaml #editor-output .ace_gutter-cell,
.tool-form-yaml-to-properties #editor-output .ace_gutter-cell,
.tool-form-sql #editor-output .ace_gutter-cell {
    color: #888;
    font-size: 0.925rem;
    font-family: var(--font-mono);
}

.tool-form-xml .right.output-panel .wd-editor,
.tool-form-html .right.output-panel .wd-editor,
.tool-form-css .right.output-panel .wd-editor,
.tool-form-js .right.output-panel .wd-editor,
.tool-form-yaml .right.output-panel .wd-editor,
.tool-form-properties-to-yaml .right.output-panel .wd-editor,
.tool-form-yaml-to-properties .right.output-panel .wd-editor,
.tool-form-sql .right.output-panel .wd-editor,
.tool-form-xml .right .ace-chrome,
.tool-form-html .right .ace-chrome,
.tool-form-css .right .ace-chrome,
.tool-form-js .right .ace-chrome,
.tool-form-yaml .right .ace-chrome,
.tool-form-properties-to-yaml .right .ace-chrome,
.tool-form-yaml-to-properties .right .ace-chrome,
.tool-form-sql .right .ace-chrome,
.tool-form-xml #editor-output.ace-chrome,
.tool-form-html #editor-output.ace-chrome,
.tool-form-css #editor-output.ace-chrome,
.tool-form-js #editor-output.ace-chrome,
.tool-form-yaml #editor-output.ace-chrome,
.tool-form-properties-to-yaml #editor-output.ace-chrome,
.tool-form-yaml-to-properties #editor-output.ace-chrome,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties,
.tool-form-sql #editor-output.ace-chrome {
    background-color: #fff !important;
}

.tool-form-xml .output-panel-success,
.tool-form-html .output-panel-success,
.tool-form-css .output-panel-success,
.tool-form-js .output-panel-success,
.tool-form-yaml .output-panel-success,
.tool-form-properties-to-yaml .output-panel-success,
.tool-form-yaml-to-properties .output-panel-success,
.tool-form-sql .output-panel-success {
    background-color: #fff;
}

.tool-form-xml #editor-output .ace_gutter,
.tool-form-html #editor-output .ace_gutter,
.tool-form-css #editor-output .ace_gutter,
.tool-form-js #editor-output .ace_gutter,
.tool-form-yaml #editor-output .ace_gutter,
.tool-form-properties-to-yaml #editor-output .ace_gutter,
.tool-form-yaml-to-properties #editor-output .ace_gutter,
.tool-form-sql #editor-output .ace_gutter,
.tool-form-xml #editor-output.ace-chrome .ace_gutter,
.tool-form-html #editor-output.ace-chrome .ace_gutter,
.tool-form-css #editor-output.ace-chrome .ace_gutter,
.tool-form-js #editor-output.ace-chrome .ace_gutter,
.tool-form-yaml #editor-output.ace-chrome .ace_gutter,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_gutter,
.tool-form-yaml-to-properties #editor-output.ace-chrome .ace_gutter,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties .ace_gutter,
.tool-form-sql #editor-output.ace-chrome .ace_gutter {
    background-color: #f6f6f6 !important;
    border-right: none;
}

.tool-form-xml .right .ace_content,
.tool-form-html .right .ace_content,
.tool-form-css .right .ace_content,
.tool-form-js .right .ace_content,
.tool-form-yaml .right .ace_content,
.tool-form-properties-to-yaml .right .ace_content,
.tool-form-yaml-to-properties .right .ace_content,
.tool-form-sql .right .ace_content {
    border-left: none;
}

/** XML / HTML */
.tool-form-xml #editor-output .ace_meta.ace_tag,
.tool-form-html #editor-output .ace_meta.ace_tag,
.tool-form-xml #editor-output .ace_meta.ace_tag.ace_tag-name,
.tool-form-html #editor-output .ace_meta.ace_tag.ace_tag-name,
.tool-form-xml #editor-output .ace_meta.ace_tag.ace_punctuation,
.tool-form-html #editor-output .ace_meta.ace_tag.ace_punctuation {
    color: #800000 !important;
    font-weight: normal !important;
}

.tool-form-xml #editor-output .ace_entity.ace_attribute-name,
.tool-form-html #editor-output .ace_entity.ace_attribute-name {
    color: #e50000 !important;
    font-weight: normal !important;
}

.tool-form-xml #editor-output .ace_string,
.tool-form-html #editor-output .ace_string {
    color: #0000ff !important;
}

.tool-form-xml #editor-output .ace_text,
.tool-form-html #editor-output .ace_text {
    color: #333333 !important;
}

.tool-form-xml #editor-output .ace_keyword,
.tool-form-html #editor-output .ace_keyword {
    color: #0000ff !important;
    font-weight: normal !important;
}

.tool-form-xml #editor-output .ace_keyword.ace_operator,
.tool-form-html #editor-output .ace_keyword.ace_operator {
    color: #000000 !important;
}

.tool-form-xml #editor-output .ace_comment,
.tool-form-html #editor-output .ace_comment {
    color: #008000 !important;
}

.tool-form-xml #editor-output .ace_constant.ace_language,
.tool-form-html #editor-output .ace_constant.ace_language {
    color: #0000ff !important;
}

.tool-form-xml #editor-output .ace_paren,
.tool-form-html #editor-output .ace_paren {
    color: #800000 !important;
}

.tool-form-xml #editor-output .ace_line,
.tool-form-html #editor-output .ace_line {
    color: #333333 !important;
}

/** YAML */
.tool-form-yaml #editor-output.ace-chrome .ace_meta.ace_tag,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_meta.ace_tag,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_meta.ace_tag,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_meta.ace_tag {
    color: #008080 !important;
    font-weight: normal !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_keyword,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_keyword,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_keyword,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_keyword {
    color: #333333 !important;
    font-weight: normal !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_keyword.ace_operator,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_keyword.ace_operator,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_keyword.ace_operator,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_keyword.ace_operator {
    color: #333333 !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_string,
.tool-form-yaml #editor-output.ace-chrome .ace_text,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_string,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_text,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_string,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_text,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_string,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_text {
    color: #0451a5 !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_comment,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_comment,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_comment,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_comment {
    color: #608b4e !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_constant.ace_numeric,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_constant.ace_numeric,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_constant.ace_numeric,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_constant.ace_numeric {
    color: #098658 !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_constant.ace_language.ace_boolean,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_constant.ace_language.ace_boolean,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_constant.ace_language.ace_boolean,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_constant.ace_language.ace_boolean {
    color: #0000ff !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_constant.ace_language,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_constant.ace_language,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_constant.ace_language,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_constant.ace_language {
    color: #4864aa !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_constant,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_constant,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_constant,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_constant {
    color: #569cd6 !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_paren,
.tool-form-yaml #editor-output.ace-chrome .ace_list.ace_markup,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_paren,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_list.ace_markup,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_paren,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_list.ace_markup,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_paren,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_list.ace_markup {
    color: #333333 !important;
}

.tool-form-yaml #editor-output.ace-chrome .ace_line,
.tool-form-yaml #editor-output.ace-monaco-vs-yaml .ace_line,
.tool-form-properties-to-yaml #editor-output.ace-chrome .ace_line,
.tool-form-properties-to-yaml #editor-output.ace-monaco-vs-yaml .ace_line {
    color: #333333;
}

/** Properties */
.tool-form-yaml-to-properties #editor-output.ace-chrome .ace_variable,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties .ace_variable {
    color: #008080 !important;
    font-weight: normal !important;
}

.tool-form-yaml-to-properties #editor-output.ace-chrome .ace_keyword,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties .ace_keyword {
    color: #333333 !important;
    font-weight: normal !important;
}

.tool-form-yaml-to-properties #editor-output.ace-chrome .ace_string,
.tool-form-yaml-to-properties #editor-output.ace-chrome .ace_text,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties .ace_string,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties .ace_text {
    color: #0451a5 !important;
}

.tool-form-yaml-to-properties #editor-output.ace-chrome .ace_comment,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties .ace_comment {
    color: #608b4e !important;
}

.tool-form-yaml-to-properties #editor-output.ace-chrome .ace_constant.ace_language.escape,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties .ace_constant.ace_language.escape,
.tool-form-yaml-to-properties #editor-output.ace-chrome .ace_constant,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties .ace_constant {
    color: #569cd6 !important;
}

.tool-form-yaml-to-properties #editor-output.ace-chrome .ace_line,
.tool-form-yaml-to-properties #editor-output.ace-monaco-vs-properties .ace_line {
    color: #333333;
}

/** CSS — Monaco VS：选择器褐红、属性红、数字/单位绿、关键字/十六进制蓝 */
.tool-form-css #editor-output .ace_comment {
    color: #008000 !important;
}

.tool-form-css #editor-output .ace_string {
    color: #a31515 !important;
}

.tool-form-css #editor-output .ace_support.ace_type {
    color: #e50000 !important;
}

.tool-form-css #editor-output .ace_variable {
    color: #800000 !important;
    font-weight: normal !important;
}

.tool-form-css #editor-output .ace_constant.ace_numeric {
    color: #098658 !important;
}

.tool-form-css #editor-output .ace_constant.ace_numeric.ace_css_hex {
    color: #0451a5 !important;
}

.tool-form-css #editor-output .ace_keyword {
    color: #098658 !important;
    font-weight: normal !important;
}

.tool-form-css #editor-output .ace_support.ace_constant,
.tool-form-css #editor-output .ace_support.ace_function {
    color: #0451a5 !important;
    font-weight: normal !important;
}

.tool-form-css #editor-output .ace_paren,
.tool-form-css #editor-output .ace_punctuation.ace_operator {
    color: #000000 !important;
}

.tool-form-css #editor-output .ace_line {
    color: #333333 !important;
}

.tool-form-css #editor-output .ace_indent-guide {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
}

/** 覆盖 xml.css / sql.css 对右侧输出编辑器的遗留样式 */
.tool-form-xml .right #editor-output .ace_content,
.tool-form-css .right #editor-output .ace_content {
    border-left: none !important;
}

.tool-form-xml .right #editor-output .ace_variable,
.tool-form-css .right #editor-output .ace_variable {
    font-weight: normal !important;
}

/** JavaScript */
.tool-form-js #editor-output.ace-chrome .ace_keyword,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_keyword,
.tool-form-js #editor-output.ace-chrome .ace_storage.ace_type,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_storage.ace_type {
    color: #0000ff !important;
    font-weight: normal !important;
}

.tool-form-js #editor-output.ace-chrome .ace_string,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_string {
    color: #a31515 !important;
}

.tool-form-js #editor-output.ace-chrome .ace_comment,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_comment {
    color: #008000 !important;
}

.tool-form-js #editor-output.ace-chrome .ace_constant.ace_numeric,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_constant.ace_numeric {
    color: #098658 !important;
}

.tool-form-js #editor-output.ace-chrome .ace_constant.ace_language,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_constant.ace_language,
.tool-form-js #editor-output.ace-chrome .ace_support.ace_function,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_support.ace_function {
    color: #0000ff !important;
}

.tool-form-js #editor-output.ace-chrome .ace_keyword.ace_operator,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_keyword.ace_operator,
.tool-form-js #editor-output.ace-chrome .ace_paren,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_paren {
    color: #000000 !important;
}

.tool-form-js #editor-output.ace-chrome .ace_identifier,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_identifier {
    color: #333333 !important;
}

.tool-form-js #editor-output.ace-chrome .ace_line,
.tool-form-js #editor-output.ace-monaco-vs-javascript .ace_line {
    color: #333333;
}

/** SQL */
.tool-form-sql #editor-output.ace-chrome .ace_keyword,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_keyword,
.tool-form-sql #editor-output.ace-chrome .ace_storage.ace_type,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_storage.ace_type,
.tool-form-sql #editor-output.ace-chrome .ace_support.ace_function,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_support.ace_function,
.tool-form-sql #editor-output.ace-chrome .ace_constant.ace_language,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_constant.ace_language {
    color: #0000ff !important;
    font-weight: normal !important;
}

.tool-form-sql #editor-output.ace-chrome .ace_string,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_string {
    color: #a31515 !important;
}

.tool-form-sql #editor-output.ace-chrome .ace_comment,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_comment {
    color: #008000 !important;
}

.tool-form-sql #editor-output.ace-chrome .ace_constant.ace_numeric,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_constant.ace_numeric {
    color: #098658 !important;
}

.tool-form-sql #editor-output.ace-chrome .ace_keyword.ace_operator,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_keyword.ace_operator,
.tool-form-sql #editor-output.ace-chrome .ace_paren,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_paren {
    color: #000000 !important;
}

.tool-form-sql #editor-output.ace-chrome .ace_identifier,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_identifier {
    color: #333333 !important;
}

.tool-form-sql #editor-output.ace-chrome .ace_line,
.tool-form-sql #editor-output.ace-monaco-vs-sql .ace_line {
    color: #333333;
}
