:root {
    --bg: 222.2 84% 4.9%;
    --fg: 210 40% 98%;
    --bd: 217.2 32.6% 17.5%;
    --ri: 224.3 76.3% 48%;
    --rd: .5rem;
    --pr: 217.2 91.2% 59.8%;
    --mu: 217.2 32.6% 17.5%;
    --mu-fg: 215 20.2% 65.1%;
    --ac: 217.2 32.6% 17.5%;
    --ac-fg: 210 40% 98%;
    --ca: 222.2 84% 4.9%;
    --ca-fg: 210 40% 98%
}

body,
.gradio-container {
    font-family: 'Outfit', sans-serif !important;
    background: hsl(var(--bg)) !important;
    color: hsl(var(--fg)) !important
}

.gradio-container {
    background: radial-gradient(circle at top right, rgba(99, 102, 241, .08), transparent 40%), radial-gradient(circle at bottom left, rgba(236, 72, 153, .05), transparent 40%), hsl(var(--bg)) !important
}

.layout-tree {
    max-height: 550px;
    overflow-y: auto
}

.tree-summary::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 8px;
    transition: transform .2s;
    font-size: .75rem;
    color: hsl(var(--mu-fg))
}

.tree-item[open]>.tree-summary::before {
    transform: rotate(90deg);
    color: hsl(var(--ri))
}

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

.ocr-box {
    fill: transparent;
    cursor: pointer;
    transition: all .15s;
    pointer-events: auto;
    stroke-linejoin: round
}

.ocr-box:hover {
    fill: rgba(255, 255, 255, .08);
    stroke-width: 2.5px !important
}

.ocr-box.selected {
    fill: rgba(251, 191, 36, .15) !important;
    stroke: #fbbf24 !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, .5))
}

.box-block {
    stroke: rgba(244, 114, 182, .75);
    stroke-width: 2.2px
}

.box-paragraph {
    stroke: rgba(34, 211, 238, .75);
    stroke-width: 1.6px
}

.box-line {
    stroke: rgba(139, 92, 246, .75);
    stroke-width: 1.3px
}

.box-word {
    stroke: rgba(16, 185, 129, .75);
    stroke-width: 1px
}

.box-symbol {
    stroke: rgba(245, 158, 11, .75);
    stroke-width: .8px
}

.box-whitespace {
    stroke: rgba(239, 68, 68, .65);
    stroke-width: .8px
}

.box-block,
.box-paragraph,
.box-line,
.box-word,
.box-symbol,
.box-whitespace {
    display: none
}

.show-blocks .box-block,
.show-paragraphs .box-paragraph,
.show-lines .box-line,
.show-words .box-word,
.show-symbols .box-symbol,
.show-whitespace .box-whitespace {
    display: block
}