html {
    font-size: 14px;
    --bg-blue: #44689a;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #f0f1f7;
}

/* Tabs */
.nav-pills .nav-link {
    padding: .3rem 1rem;
    border-radius: 20px;
    margin-right: 5px;
}

.nav-pills .nav-link:hover {
    background-color: buttonface;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover {
    background-color: var(--bg-blue) !important;
}

/* Tree */
.tree {
    --spacing: 1.1rem;
    --radius: 10px;
    padding-left: 0;
    font-size: 11pt;
}

.tree li {
    display: block;
    position: relative;
    padding-left: calc(2 * var(--spacing) - 14px);
    margin-bottom: 5px;
}

.tree ul {
    margin-left: calc(var(--radius) - var(--spacing));
    padding-left: 0;
}

.tree ul li {
    border-left: 2px solid #ddd;
}

div > .tree > li {
    padding-left: 5px;
}

.tree ul li:last-child {
    border-color: transparent;
}

.tree ul li::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--spacing) / -2);
    left: -2px;
    width: calc(var(--spacing));
    height: calc(var(--spacing) + 7px);
    border: solid #ddd;
    border-width: 0 0 2px 2px;
}

.tree summary {
    display: block;
    cursor: pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
    display: none;
}

.tree summary:focus {
    outline: none;
}

.tree summary:focus-visible {
    outline: 2px dotted #369;
    border-radius: 3px;
}

.tree details[open] > summary::before {
    background-position: calc(-2 * var(--radius)) 0;
}

.tree .provider {
    color: gray;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10pt;
}

.tree .section-key {
    color: #ab8e22;
    background-color: #3d3918;
    border-radius: 2px;
    padding: 3px 8px;
    margin-bottom: 5px;
}

.tree .key {
    color: #4e720f;
    background-color: #d2e2cb;
    padding: 3px 5px;
    border-radius: 3px;
}

.tree .value {
    color: #af7531;
}

.tree .value-num {
    color: #3e35c7;
}

.tree .value-bool {
    color: darkorchid;
}

.tree .value-overriden {
    text-decoration: line-through;
    padding-left: 5px;
}

.tree .description {
    background-color: var(--bg-blue);
    position: absolute;
    top: -8px;
    left: -16px;
}