#dev-elements-container {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
    background: #252526;
    color: #d7d7d7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        monospace;
    font-size: 13px;
}

#dev-elements-formated {
    min-width: max-content;
    min-height: 100%;
    padding: 8px;
    box-sizing: border-box;
    color: #d7d7d7;
    background: #252525;
    user-select: text;
    line-height: 1.5;
}

/* =========================
   Element Tree
   ========================= */

#dev-elements-formated .dev-element-wrapper {
    position: relative;
    margin-left: 14px;
    padding-left: 8px;
    border-left: 1px solid transparent;
    border-radius: 2px;
    transition:
        background-color 100ms ease,
        border-color 100ms ease;
}

#dev-elements-formated > .dev-element-wrapper {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

#dev-elements-formated .dev-element-wrapper:hover {
    background: #252525;
    border-left-color: #3f3f46;
}

/* =========================
   Tags
   ========================= */

#dev-elements-formated .dev-element-opening-tag,
#dev-elements-formated .dev-element-closing-tag {
    display: block;
    white-space: pre-wrap;
}

#dev-elements-formated .dev-element-tag-name {
    color: #569cd6;
    font-weight: 600;
}

#dev-elements-formated .dev-element-bracket {
    color: #808080;
}

#dev-elements-formated .dev-element-fragment {
    color: #808080;
}

/* =========================
   Attributes
   ========================= */

#dev-elements-formated .dev-element-attributes {
    display: inline;
}

#dev-elements-formated .dev-element-attribute-key {
    color: #9cdcfe;
}

#dev-elements-formated .dev-element-attribute-value {
    color: #ce9178;
}

/* =========================
   Content
   ========================= */

#dev-elements-formated .dev-element-children {
    display: block;
    margin-left: 16px;
}

#dev-elements-formated .dev-element-content {
    display: inline;
    color: #d7d7d7;
    white-space: pre-wrap;
}

#dev-elements-formated .dev-element-comment {
    display: inline;
    color: #6a9955;
    font-style: italic;
    white-space: pre-wrap;
}

/* =========================
   Selection
   ========================= */

#dev-elements-formated .is-selected {
    background: #094771;
    outline: 1px solid #007acc;
}

#dev-elements-formated .is-selected .dev-element-tag-name {
    color: #fff;
}

#dev-elements-formated ::selection {
    color: #fff;
    background: rgba(0, 122, 204, 0.45);
}

/* =========================
   Changed
   ========================= */

#dev-elements-formated .is-changed {
    animation: dev-element-changed 500ms ease;
}

@keyframes dev-element-changed {
    0% {
        background: rgba(0, 122, 204, 0.25);
    }

    100% {
        background: transparent;
    }
}


#dev-elements-container::-webkit-scrollbar {
    width: 0;
    height: 0;
}