@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/raleway/raleway-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/raleway/raleway-latin-600-normal.woff2') format('woff2');
}

:root {
    --xrt-blue: #0077B6;
    --bs-body-font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-weight: 500;
    --bs-link-color-rgb: 0, 119, 182;
    --bs-primary: #0077B6;
    --bs-primary-rgb: 0, 119, 182;
}

[data-bs-theme="dark"] {
    --bs-link-color-rgb: 102, 180, 224;
}

body {
    font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3, h4, h5, h6, .card-header, .navbar-brand, .btn, label, th {
    font-weight: 600;
}

.navbar-xrt {
    background-color: var(--xrt-blue);
}

.navbar-xrt .navbar-brand {
    letter-spacing: 0.02em;
}

.btn-primary {
    --bs-btn-bg: var(--xrt-blue);
    --bs-btn-border-color: var(--xrt-blue);
    --bs-btn-hover-bg: #00669c;
    --bs-btn-hover-border-color: #00669c;
    --bs-btn-active-bg: #005885;
    --bs-btn-active-border-color: #005885;
    --bs-btn-disabled-bg: var(--xrt-blue);
    --bs-btn-disabled-border-color: var(--xrt-blue);
}

.card-header {
    font-size: 0.95rem;
}

.mono {
    font-family: var(--bs-font-monospace);
    font-size: 0.9em;
}

.xrt-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.xrt-progress {
    height: 6px;
    margin-top: 4px;
    border-radius: 3px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
}

.xrt-progress > div {
    height: 100%;
    background: var(--xrt-blue);
    transition: width 0.3s ease;
}

.xrt-progress.is-warning > div {
    background: var(--bs-warning);
}

.xrt-progress.is-danger > div {
    background: var(--bs-danger);
}

.auth-card {
    max-width: 420px;
}

.toast-container {
    z-index: 1090;
}

.theme-toggle {
    color: rgba(255, 255, 255, 0.85);
    border: 0;
    background: transparent;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
}

.theme-toggle:hover {
    color: #fff;
}

[data-bs-theme="dark"] .theme-toggle .bi-moon-stars,
[data-bs-theme="light"] .theme-toggle .bi-sun {
    display: none;
}

.input-narrow {
    max-width: 9rem;
}

.input-xs {
    max-width: 6rem;
}

.no-share [data-share] {
    display: none !important;
}

.link-slug {
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
}

.text-truncate-cell {
    max-width: 22rem;
}

.viewer-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.viewer-stage:has(.viewer-loading:not(.d-none)) {
    min-height: 50vh;
}

.viewer-loading {
    width: 100%;
    max-width: 24rem;
}

.viewer-image {
    max-width: 100%;
    max-height: calc(100vh - 11rem);
}

.viewer-pdf {
    width: 100%;
    height: calc(100vh - 11rem);
}

.viewer-text {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    text-align: start;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

pre.viewer-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .875rem;
}

.viewer-markdown pre {
    padding: .75rem;
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
}

.viewer-markdown img {
    max-width: 100%;
}

.viewer-markdown table {
    margin-bottom: 1rem;
}

.viewer-markdown th,
.viewer-markdown td {
    padding: .25rem .5rem;
    border: 1px solid var(--bs-border-color);
}

.viewer-markdown > :last-child {
    margin-bottom: 0;
}

.drop-zone {
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
    text-align: center;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.drop-zone.is-over {
    border-color: var(--xrt-blue);
    background: rgba(0, 119, 182, 0.06);
}

.xrt-progress > .w-0 { width: 0%; }
.xrt-progress > .w-1 { width: 1%; }
.xrt-progress > .w-2 { width: 2%; }
.xrt-progress > .w-3 { width: 3%; }
.xrt-progress > .w-4 { width: 4%; }
.xrt-progress > .w-5 { width: 5%; }
.xrt-progress > .w-6 { width: 6%; }
.xrt-progress > .w-7 { width: 7%; }
.xrt-progress > .w-8 { width: 8%; }
.xrt-progress > .w-9 { width: 9%; }
.xrt-progress > .w-10 { width: 10%; }
.xrt-progress > .w-11 { width: 11%; }
.xrt-progress > .w-12 { width: 12%; }
.xrt-progress > .w-13 { width: 13%; }
.xrt-progress > .w-14 { width: 14%; }
.xrt-progress > .w-15 { width: 15%; }
.xrt-progress > .w-16 { width: 16%; }
.xrt-progress > .w-17 { width: 17%; }
.xrt-progress > .w-18 { width: 18%; }
.xrt-progress > .w-19 { width: 19%; }
.xrt-progress > .w-20 { width: 20%; }
.xrt-progress > .w-21 { width: 21%; }
.xrt-progress > .w-22 { width: 22%; }
.xrt-progress > .w-23 { width: 23%; }
.xrt-progress > .w-24 { width: 24%; }
.xrt-progress > .w-25 { width: 25%; }
.xrt-progress > .w-26 { width: 26%; }
.xrt-progress > .w-27 { width: 27%; }
.xrt-progress > .w-28 { width: 28%; }
.xrt-progress > .w-29 { width: 29%; }
.xrt-progress > .w-30 { width: 30%; }
.xrt-progress > .w-31 { width: 31%; }
.xrt-progress > .w-32 { width: 32%; }
.xrt-progress > .w-33 { width: 33%; }
.xrt-progress > .w-34 { width: 34%; }
.xrt-progress > .w-35 { width: 35%; }
.xrt-progress > .w-36 { width: 36%; }
.xrt-progress > .w-37 { width: 37%; }
.xrt-progress > .w-38 { width: 38%; }
.xrt-progress > .w-39 { width: 39%; }
.xrt-progress > .w-40 { width: 40%; }
.xrt-progress > .w-41 { width: 41%; }
.xrt-progress > .w-42 { width: 42%; }
.xrt-progress > .w-43 { width: 43%; }
.xrt-progress > .w-44 { width: 44%; }
.xrt-progress > .w-45 { width: 45%; }
.xrt-progress > .w-46 { width: 46%; }
.xrt-progress > .w-47 { width: 47%; }
.xrt-progress > .w-48 { width: 48%; }
.xrt-progress > .w-49 { width: 49%; }
.xrt-progress > .w-50 { width: 50%; }
.xrt-progress > .w-51 { width: 51%; }
.xrt-progress > .w-52 { width: 52%; }
.xrt-progress > .w-53 { width: 53%; }
.xrt-progress > .w-54 { width: 54%; }
.xrt-progress > .w-55 { width: 55%; }
.xrt-progress > .w-56 { width: 56%; }
.xrt-progress > .w-57 { width: 57%; }
.xrt-progress > .w-58 { width: 58%; }
.xrt-progress > .w-59 { width: 59%; }
.xrt-progress > .w-60 { width: 60%; }
.xrt-progress > .w-61 { width: 61%; }
.xrt-progress > .w-62 { width: 62%; }
.xrt-progress > .w-63 { width: 63%; }
.xrt-progress > .w-64 { width: 64%; }
.xrt-progress > .w-65 { width: 65%; }
.xrt-progress > .w-66 { width: 66%; }
.xrt-progress > .w-67 { width: 67%; }
.xrt-progress > .w-68 { width: 68%; }
.xrt-progress > .w-69 { width: 69%; }
.xrt-progress > .w-70 { width: 70%; }
.xrt-progress > .w-71 { width: 71%; }
.xrt-progress > .w-72 { width: 72%; }
.xrt-progress > .w-73 { width: 73%; }
.xrt-progress > .w-74 { width: 74%; }
.xrt-progress > .w-75 { width: 75%; }
.xrt-progress > .w-76 { width: 76%; }
.xrt-progress > .w-77 { width: 77%; }
.xrt-progress > .w-78 { width: 78%; }
.xrt-progress > .w-79 { width: 79%; }
.xrt-progress > .w-80 { width: 80%; }
.xrt-progress > .w-81 { width: 81%; }
.xrt-progress > .w-82 { width: 82%; }
.xrt-progress > .w-83 { width: 83%; }
.xrt-progress > .w-84 { width: 84%; }
.xrt-progress > .w-85 { width: 85%; }
.xrt-progress > .w-86 { width: 86%; }
.xrt-progress > .w-87 { width: 87%; }
.xrt-progress > .w-88 { width: 88%; }
.xrt-progress > .w-89 { width: 89%; }
.xrt-progress > .w-90 { width: 90%; }
.xrt-progress > .w-91 { width: 91%; }
.xrt-progress > .w-92 { width: 92%; }
.xrt-progress > .w-93 { width: 93%; }
.xrt-progress > .w-94 { width: 94%; }
.xrt-progress > .w-95 { width: 95%; }
.xrt-progress > .w-96 { width: 96%; }
.xrt-progress > .w-97 { width: 97%; }
.xrt-progress > .w-98 { width: 98%; }
.xrt-progress > .w-99 { width: 99%; }
.xrt-progress > .w-100 { width: 100%; }

.cookie-banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    max-width: 26rem;
    margin-left: auto;
    z-index: 1080;
}

.legal-page {
    max-width: 52rem;
}

.options-collapse.show,
.options-collapse.collapsing {
    display: flex;
}

@media (min-width: 768px) {
    .options-collapse.collapse:not(.show) {
        display: flex;
    }
}
