.BPT-HtmlTree-Container:focus {
    outline: 0;
}

.BPT-HTML {
    font-family: "Consolas", Lucida Console, monospace; /*[{plugin-font-editor} , Lucida Console, monospace]*/
    font-size: 9pt; /*[{plugin-font-editor-size}]*/
    font-weight: normal; /*[{plugin-font-editor-weight}]*/
    color: TRANSPARENT; /*[{plugin-font-editor-html-tag-color}]*/
}

.BPT-HTML-Tag {
    color: TRANSPARENT; /*[{plugin-font-editor-html-element-color}]*/
    font-weight: normal; /*[{plugin-font-editor-html-element-weight}]*/
}

.BPT-HTML-DocType, .BPT-HTML-DocType + .BPT-HTML-Text {
    color: TRANSPARENT; /*[{plugin-font-editor-html-comment-color}]*/
    font-weight: normal; /*[{plugin-font-editor-html-comment-weight}]*/
    cursor: default;
}

.BPT-HTML-Comment, .BPT-HTML-Comment + .BPT-HTML-Text {
    color: TRANSPARENT; /*[{plugin-font-editor-html-comment-color}]*/
    font-weight: normal; /*[{plugin-font-editor-html-comment-weight}]*/
    cursor: default;
}

.BPT-HTML-Attribute {
    color: TRANSPARENT; /*[{plugin-font-editor-html-attribute-name-color}]*/
    font-weight: normal; /*[{plugin-font-editor-html-attribute-name-weight}]*/
}

.BPT-HTML-Value {
    color: TRANSPARENT; /*[{plugin-font-editor-html-attribute-value-color}]*/
    font-weight: normal; /*[{plugin-font-editor-html-attribute-value-weight}]*/
}

.BPT-HTML-Text {
    color: TRANSPARENT; /*[{plugin-font-editor-color}]*/
    font-weight: normal; /*[{plugin-font-editor-html-operator-weight}]*/
    white-space: pre-wrap;
}

.BPT-HTML-CSS-Name {
    color: TRANSPARENT; /*[{plugin-font-editor-css-name-color}]*/
    font-weight: normal; /*[{plugin-font-editor-css-name-weight}]*/
}

.BPT-HTML-CSS-Value {
    color: TRANSPARENT; /*[{plugin-font-editor-css-value-color}]*/
    font-weight: normal; /*[{plugin-font-editor-css-value-weight}]*/
}

.BPT-HTML-CSS-Selector {
    color: TRANSPARENT; /*[{plugin-font-editor-css-selector-color}]*/
    font-weight: normal; /*[{plugin-font-editor-css-selector-weight}]*/
}

.BPT-HTML-CSS-ParentRule {
    color: TRANSPARENT; /*[{plugin-font-editor-css-selector-color}]*/
    font-weight: normal;
}

.BPT-HTML-CSS-Text {
    color: TRANSPARENT; /*[{plugin-font-editor-color}]*/
    font-weight: normal; /*[{plugin-font-editor-weight}]*/
}

.BPT-HTML-CSS-SelectorTag {
    font-style:italic;
}

.BPT-HTML-CSS-InlinedSelector {
    font-style:italic;
}

.BPT-HTML-Numbering {
    display: inline-block;
    min-width: 25px;
}

.BPT-HTML-Tag > input {
    vertical-align: -2px
}

.BPT-Style-Disabled span {
    text-decoration: line-through;
}

.BPT-HtmlTreeItem {
    padding-left: 10px;
    border-left: 1px solid transparent;
    cursor: default;
    position: relative;
    margin: -2px 5px;
    word-wrap: break-word;
    min-width: 400px;
}

.BPT-HtmlTreeItem-HiddenRoot {
    padding-left: 0px;
}

.BPT-HtmlTreeItem-Expanded {
    background-repeat: no-repeat;
    background-position: 3px 5px;
}

.BPT-HtmlTreeItem-Collapsed {
    background-repeat: no-repeat;
    background-position: 3px 5px;
}

.BPT-HtmlTreeItem-Expanded .BPT-HtmlTreeItem {
    display: block;
}

.BPT-HtmlTreeItem-Collapsed .BPT-HtmlTreeItem {
    display: none;
}

.BPT-HtmlTreeItem-ExpandIcon {
    left: 3px;
    top: 6px;
    position: absolute;
    width: 10px;
    height: 10px;
}

.BPT-HtmlTree .BPT-HtmlTreeItem-Collapsed > .BPT-HtmlTreeItem-ExpandIcon {
    background-image: url(''); /*[url({plugin-image-icon-item-collapsed})]*/
    background-size: 10px 10px;
}

.BPT-HtmlTree .BPT-HtmlTreeItem-Expanded > .BPT-HtmlTreeItem-ExpandIcon {
    background-image: url(''); /*[url({plugin-image-icon-item-expanded})]*/
    background-size: 10px 10px;
}

.BPT-HtmlTreeItem-Header {
    left: 0px;
    right: 0px;
    font-size: 12px;
    line-height: 1.5em;
    border: 1px solid transparent;
    margin-left: 8px;
    padding: 0px;
}

.BPT-HtmlTreeItem-Footer {
    left: 0px;
    right: 0px;
    font-size: 12px;
    line-height: 1.3em;
    border: 1px solid transparent;
    margin-left: 8px;
    padding: 0px 0px 1px 0px;
    display: none;
}

.BPT-HtmlTreeItem-Expanded > .BPT-HtmlTreeItem-Footer {
    display: block;
}

.BPT-HtmlTreeItem-Expanded > .BPT-HtmlTreeItem-Header > .BPT-HtmlTreeItem-CollapsedFooter {
    display: none;
}

.BPT-HtmlTreeItem-Header:hover {
    background-color: transparent; 
    border-color: TRANSPARENT;  /*[{plugin-treeview-content-mouseover-color rgba(0.25)}]*/
}

body.BPT-ToolWindow-NoFocus .BPT-HtmlTreeItem-Header:hover {
    border-color: TRANSPARENT;  /*[{plugin-font-editor-selected-background-color rgba(0.25)}]*/
}

.BPT-HtmlTreeItem-HiddenRoot > .BPT-HtmlTreeItem-Header:hover {
    background-color: transparent;
    border-color: transparent;
}

.BPT-HtmlTreeItem-Selected {
    border-left: 1px solid transparent;
}

.BPT-HtmlTreeItem-Selected > .BPT-HtmlTreeItem-Header {
    background-color: transparent;
    border-color: transparent;
}

body .BPT-HtmlTree-Container:focus .BPT-HtmlTreeItem-Selected,
body .BPT-HtmlTree-Container-KeepSelection .BPT-HtmlTreeItem-Selected {
    border-left-color: TRANSPARENT;         /*[{plugin-font-editor-collapse-adornment-color}]*/
}

body .BPT-HtmlTree-Container:focus .BPT-HtmlTreeItem-Selected > .BPT-HtmlTreeItem-Header,
body .BPT-HtmlTree-Container-KeepSelection .BPT-HtmlTreeItem-Selected > .BPT-HtmlTreeItem-Header {
    background: rgba(51, 153, 255, 0.18);   /*[{plugin-font-editor-selected-background-color rgba(0.18)}]*/
    border-color: transparent;              /*[{plugin-font-editor-selected-border-color}]*/
}

body.BPT-ToolWindow-NoFocus .BPT-HtmlTree-Container:focus .BPT-HtmlTreeItem-Selected,
body.BPT-ToolWindow-NoFocus .BPT-HtmlTree-Container-KeepSelection .BPT-HtmlTreeItem-Selected {
    border-left-color: transparent;
}

body.BPT-ToolWindow-NoFocus .BPT-HtmlTree-Container:focus .BPT-HtmlTreeItem-Selected > .BPT-HtmlTreeItem-Header,
body.BPT-ToolWindow-NoFocus .BPT-HtmlTree-Container-KeepSelection .BPT-HtmlTreeItem-Selected > .BPT-HtmlTreeItem-Header {
    background: transparent;
    border-color: transparent;
}

.BPT-HtmlTreeItem-Selected > .BPT-HtmlTreeItem-Header .BPT-HTML-Attribute-Changed, .BPT-HTML-Attribute-Changed {
    background-color: TRANSPARENT; /*[{plugin-highlight-background-color rgba(0.35)}]*/
    color:TRANSPARENT; /*[{plugin-highlight-color}]*/
}

.BPT-HtmlTree-ChildCollection-ShowAll {
    color: TRANSPARENT;             /*[{plugin-font-editor-color}]*/
    background-color: TRANSPARENT;  /*[{plugin-font-editor-background-color}]*/
    font-weight: normal;        /*[{plugin-font-editor-weight}]*/
    white-space: pre-wrap;

    display: inline-block;
    position: relative;
    margin-left: 10px;
    margin-bottom: 1px;
}

.BPT-HtmlTree-ChildCollection-ShowAll:hover, .BPT-HtmlTree-ChildCollection-ShowAll.BPT-HtmlTreeItem-Selected {
    text-decoration: underline;
}

.BPT-HtmlTreeItem-Hover.BPT-HtmlTreeItem-DropBefore {
    border-top: 1px solid blue;
}

.BPT-HtmlTreeItem-Hover.BPT-HtmlTreeItem-DropAfter {
    border-bottom: 1px solid blue;
}

/* adds angle bracket before opening HTML tags */
div.BPT-HtmlTree > div.BPT-HtmlTree-ChildCollection > .BPT-HtmlTreeItem .BPT-HtmlTreeItem-Header .BPT-HTML-Tag::before {
    content: "<";
    color: TRANSPARENT;             /*[{plugin-font-editor-color}]*/
}

/* adds angle slash before closing HTML tags */
div.BPT-HtmlTree > div.BPT-HtmlTree-ChildCollection > .BPT-HtmlTreeItem .BPT-HtmlTreeItem-CollapsedFooter .BPT-HTML-Tag::before,
div.BPT-HtmlTree > div.BPT-HtmlTree-ChildCollection > .BPT-HtmlTreeItem .BPT-HtmlTreeItem-Footer .BPT-HTML-Tag::before {
    content: "</";
    color: TRANSPARENT;             /*[{plugin-font-editor-color}]*/
}

/* Add closing a bracket to HTML tags... */
.BPT-HtmlTreeItem-Header > span:first-child > span:first-child::after, /* closes the opening tag of a tag pair */
.BPT-HtmlTreeItem-Header > .BPT-HtmlTreeItem-CollapsedFooter::after, /* closes the closing tag of a collapsed tag pair */
.BPT-HtmlTreeItem-Footer::after /* closes the closing tag of an expanded tag pair */
{
    content: ">";
    color: TRANSPARENT;             /*[{plugin-font-editor-color}]*/
}
/* ... but not to special tags */
div[data-tag^="#"] > .BPT-HtmlTreeItem-Header > span:first-child > span:first-child::after, /* closes the opening tag of a tag pair */
div[data-tag^="#"] > .BPT-HtmlTreeItem-Header > .BPT-HtmlTreeItem-CollapsedFooter::after, /* closes the closing tag of a collapsed tag pair */
div[data-tag^="#"] > .BPT-HtmlTreeItem-Footer::after /* closes the closing tag of an expanded tag pair */
{
   content: "";
}

/* Add space before attribute name, = after the attribute name, and " before-and-after attribute value. */
div.BPT-HtmlTree > div.BPT-HtmlTree-ChildCollection > .BPT-HtmlTreeItem .BPT-HTML-Attribute-Section .BPT-HTML-Attribute::before {
    content:" ";
}
div.BPT-HtmlTree > div.BPT-HtmlTree-ChildCollection > .BPT-HtmlTreeItem .BPT-HTML-Attribute-Section .BPT-HTML-Attribute::after {
    content:"=";
    color: TRANSPARENT;             /*[{plugin-font-editor-color}]*/
}
div.BPT-HtmlTree > div.BPT-HtmlTree-ChildCollection > .BPT-HtmlTreeItem .BPT-HTML-Attribute-Section .BPT-HTML-Value::before,
div.BPT-HtmlTree > div.BPT-HtmlTree-ChildCollection > .BPT-HtmlTreeItem .BPT-HTML-Attribute-Section .BPT-HTML-Value::after {
    content:"\"";
    color: TRANSPARENT;             /*[{plugin-font-editor-color}]*/
}