Spaces:
Sleeping
Sleeping
Download frontend/src/style.css from gauravmeena0708/epfo-circulars: direct link, hf CLI and curl.
- Browser
- Download file 49 kB
-
https://huggingface.co/spaces/gauravmeena0708/epfo-circulars/resolve/main/frontend/src/style.css
- Command line
-
hf download hf://spaces/gauravmeena0708/epfo-circulars/frontend/src/style.css
-
curl -L -o style.css https://huggingface.co/spaces/gauravmeena0708/epfo-circulars/resolve/main/frontend/src/style.css
49 kB
| @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:wght@400;450;500;600&display=swap"); | |
| :root { | |
| font-family: "DM Sans", "Noto Sans", sans-serif; | |
| color: #253e50; | |
| background: #f7f8f8; | |
| font-synthesis: none; | |
| font-weight: 400; | |
| --navy: #173650; | |
| --teal: #217b7c; | |
| --gold: #b58c45; | |
| --line: #e0e6e8; | |
| --muted: #6b7c89; | |
| --paper: #fff; | |
| --serif: "Source Serif 4", Georgia, serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| button, | |
| input, | |
| select { | |
| font: inherit; | |
| } | |
| button, | |
| a, | |
| input, | |
| select { | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.5; | |
| } | |
| button, | |
| a, | |
| select, | |
| input { | |
| outline-offset: 4px; | |
| } | |
| button:focus-visible, | |
| a:focus-visible, | |
| input:focus-visible, | |
| select:focus-visible { | |
| outline: 2px solid #399d9b; | |
| } | |
| button { | |
| color: inherit; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| button svg, | |
| a svg { | |
| flex-shrink: 0; | |
| } | |
| button { | |
| transition: | |
| background 0.18s, | |
| border-color 0.18s, | |
| color 0.18s; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| p { | |
| margin: 0; | |
| } | |
| button { | |
| border: 0; | |
| background: none; | |
| } | |
| input, | |
| select { | |
| min-width: 0; | |
| } | |
| .app { | |
| min-height: 100vh; | |
| } | |
| .sidebar { | |
| width: 248px; | |
| background: var(--navy); | |
| color: #d9e2e9; | |
| position: fixed; | |
| inset: 0 auto 0 0; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 35px 20px 0; | |
| z-index: 20; | |
| border-right: 1px solid #28465c; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 13px; | |
| padding: 0 8px 43px; | |
| color: white; | |
| font-size: 25px; | |
| font-weight: 650; | |
| letter-spacing: 0.5px; | |
| line-height: 1.1; | |
| } | |
| .brand-symbol { | |
| border: 1px solid #668395; | |
| width: 43px; | |
| height: 46px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 3px; | |
| position: relative; | |
| color: #e0bd77; | |
| } | |
| .brand-symbol:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -4px; | |
| width: 27px; | |
| height: 2px; | |
| background: #c39c58; | |
| } | |
| .brand-sub { | |
| font-size: 8px; | |
| letter-spacing: 1.45px; | |
| display: block; | |
| margin-top: 7px; | |
| color: #c9d3db; | |
| font-weight: 500; | |
| } | |
| .sidebar-label { | |
| font-size: 9px; | |
| letter-spacing: 1.9px; | |
| color: #829bab; | |
| padding: 0 13px; | |
| margin-bottom: 15px; | |
| } | |
| .sidebar nav { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .sidebar nav button, | |
| .sidebar nav a { | |
| display: flex; | |
| align-items: center; | |
| text-align: left; | |
| gap: 11px; | |
| width: 100%; | |
| padding: 13px 12px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| border-radius: 4px; | |
| color: #bfd0db; | |
| } | |
| .sidebar nav a > svg:last-child { | |
| margin-left: auto; | |
| color: #7b97aa; | |
| } | |
| .sidebar nav button.active { | |
| background: #294a60; | |
| color: #fff; | |
| box-shadow: inset 3px 0 0 #c6a15c; | |
| } | |
| .sidebar nav button:hover, | |
| .sidebar nav a:hover { | |
| background: #24445a; | |
| color: #fff; | |
| } | |
| .nav-shortcut { | |
| margin-left: auto; | |
| font-size: 10px; | |
| opacity: 0.65; | |
| } | |
| .nav-count { | |
| margin-left: auto; | |
| background: #ffffff15; | |
| padding: 1px 6px; | |
| border-radius: 3px; | |
| font-size: 10px; | |
| } | |
| .sidebar-divider { | |
| height: 1px; | |
| background: #ffffff17; | |
| margin: 30px 12px; | |
| } | |
| .recent p { | |
| color: #8da3b1; | |
| font-size: 11px; | |
| line-height: 1.9; | |
| padding: 1px 13px; | |
| } | |
| .recent button { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: #a9becc; | |
| font-size: 11px; | |
| padding: 11px 13px; | |
| width: 100%; | |
| text-align: left; | |
| } | |
| .recent button span { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .sidebar-bottom { | |
| margin-top: auto; | |
| padding-top: 80px; | |
| } | |
| .collection { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| border: 1px solid #456073; | |
| margin: 0 4px 24px; | |
| padding: 13px 10px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| color: #d9e5ec; | |
| } | |
| .collection-icon { | |
| color: #d0ac6a; | |
| } | |
| .collection small { | |
| display: block; | |
| font-size: 9px; | |
| color: #8fa7b7; | |
| margin-top: 5px; | |
| } | |
| .independent { | |
| padding: 19px 10px 23px; | |
| font-size: 10px; | |
| border-top: 1px solid #ffffff18; | |
| color: #bbccd7; | |
| } | |
| .independent > span { | |
| display: inline-block; | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| background: #c5a15e; | |
| margin-right: 7px; | |
| } | |
| .independent small { | |
| display: block; | |
| color: #87a1b2; | |
| font-size: 9px; | |
| margin: 7px 0 0 12px; | |
| } | |
| .shell { | |
| margin-left: 248px; | |
| } | |
| .topbar { | |
| height: 70px; | |
| border-bottom: 1px solid var(--line); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 39px; | |
| background: #fff; | |
| } | |
| .breadcrumb { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| font-size: 11px; | |
| color: #83909c; | |
| } | |
| .breadcrumb strong { | |
| font-weight: 500; | |
| color: #385264; | |
| } | |
| .top-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 25px; | |
| } | |
| .top-actions > a { | |
| font-size: 11px; | |
| display: flex; | |
| gap: 6px; | |
| align-items: center; | |
| } | |
| .preview-tag { | |
| font-size: 8px; | |
| letter-spacing: 1.3px; | |
| color: #7e8f9c; | |
| border-right: 1px solid var(--line); | |
| padding-right: 22px; | |
| } | |
| .mobile-menu { | |
| display: none ; | |
| } | |
| main { | |
| max-width: 1530px; | |
| margin: 0 auto; | |
| padding: 43px 39px 0; | |
| } | |
| .page-heading { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| gap: 25px; | |
| } | |
| .eyebrow { | |
| font-size: 9px; | |
| letter-spacing: 1.8px; | |
| font-weight: 600; | |
| color: #758692; | |
| } | |
| .page-heading h1 { | |
| font-family: var(--serif); | |
| font-weight: 450; | |
| font-size: 35px; | |
| letter-spacing: -1.05px; | |
| color: var(--navy); | |
| margin: 10px 0 10px; | |
| line-height: 1.3; | |
| } | |
| .page-heading p { | |
| font-size: 12px; | |
| color: var(--muted); | |
| line-height: 1.7; | |
| } | |
| .heading-stamp { | |
| display: flex; | |
| gap: 11px; | |
| font-size: 9px; | |
| letter-spacing: 1.2px; | |
| color: #68808f; | |
| flex-shrink: 0; | |
| margin: 17px 4px 0 0; | |
| } | |
| .heading-stamp small { | |
| display: block; | |
| font-family: var(--serif); | |
| font-size: 12px; | |
| font-style: italic; | |
| letter-spacing: 0; | |
| margin-top: 7px; | |
| color: #8c9ba6; | |
| } | |
| .stamp-line { | |
| height: 34px; | |
| width: 2px; | |
| background: var(--gold); | |
| } | |
| .search-card { | |
| background: white; | |
| border: 1px solid #d9e2e6; | |
| border-radius: 6px; | |
| box-shadow: 0 3px 8px #17365004; | |
| padding: 21px 23px 0; | |
| } | |
| .section-kicker { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 9px; | |
| font-weight: 600; | |
| letter-spacing: 1.4px; | |
| color: #506979; | |
| } | |
| .number-label { | |
| font-size: 9px; | |
| border: 1px solid #dfe6e8; | |
| color: #8395a2; | |
| padding: 3px 5px; | |
| border-radius: 2px; | |
| letter-spacing: 0; | |
| } | |
| .search-label { | |
| margin-left: auto; | |
| letter-spacing: 0; | |
| font-size: 9px; | |
| color: #81918c; | |
| font-weight: 400; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .live-dot { | |
| width: 5px; | |
| height: 5px; | |
| background: #3a8a76; | |
| border-radius: 50%; | |
| } | |
| .query-field { | |
| display: flex; | |
| gap: 13px; | |
| align-items: center; | |
| border: 1px solid #dbe4e7; | |
| background: #fcfdfd; | |
| border-radius: 4px; | |
| padding: 7px 7px 7px 15px; | |
| margin: 17px 0 21px; | |
| color: #8095a3; | |
| } | |
| .query-field:focus-within { | |
| border-color: #6e9d9e; | |
| box-shadow: 0 0 0 2px #217b7c0b; | |
| } | |
| .query-field input { | |
| flex: 1; | |
| border: 0; | |
| background: transparent; | |
| outline: none; | |
| font-size: 12px; | |
| color: #243f52; | |
| height: 35px; | |
| } | |
| .query-field input::placeholder { | |
| color: #93a0a9; | |
| } | |
| .primary, | |
| .secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 12px 17px; | |
| border-radius: 3px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| } | |
| .primary { | |
| background: var(--navy); | |
| color: #fff; | |
| border: 1px solid var(--navy); | |
| } | |
| .primary:hover { | |
| background: #264d68; | |
| } | |
| .secondary { | |
| background: #fff; | |
| border: 1px solid #d6dfe4; | |
| } | |
| .secondary:hover { | |
| background: #f0f5f5; | |
| border-color: #b4c7cd; | |
| } | |
| .filters { | |
| flex-wrap: wrap; | |
| border-top: 1px solid #edf0f1; | |
| display: flex; | |
| gap: 20px; | |
| align-items: center; | |
| margin: 0 -23px; | |
| padding: 15px 23px 17px; | |
| } | |
| .filters label, | |
| .history-controls label { | |
| display: grid; | |
| gap: 7px; | |
| font-size: 8px; | |
| letter-spacing: 1.3px; | |
| color: #8998a2; | |
| font-weight: 500; | |
| } | |
| .filters select, | |
| .filters input, | |
| .history-controls select, | |
| .history-controls input { | |
| border: 0; | |
| background: transparent; | |
| color: #3a5364; | |
| font-size: 11px; | |
| letter-spacing: 0; | |
| padding: 0; | |
| cursor: pointer; | |
| } | |
| .filters label:first-child { | |
| min-width: 230px; | |
| } | |
| .filters select { | |
| max-width: 245px; | |
| } | |
| .filter-divider { | |
| height: 29px; | |
| width: 1px; | |
| background: #e5eaec; | |
| } | |
| .date-field { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: #6b8494; | |
| } | |
| .date-field input { | |
| width: 114px; | |
| } | |
| .filter-note { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 9px; | |
| color: #8b989f; | |
| margin-left: auto; | |
| line-height: 1.55; | |
| white-space: nowrap; | |
| } | |
| .suggestions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 17px 0 35px; | |
| flex-wrap: wrap; | |
| } | |
| .suggestions > span { | |
| font-size: 8px; | |
| letter-spacing: 1.2px; | |
| color: #89979f; | |
| margin-right: 7px; | |
| } | |
| .suggestions button { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| border: 1px solid #dfe6e7; | |
| border-radius: 3px; | |
| padding: 7px 10px; | |
| font-size: 10px; | |
| background: #fff; | |
| color: #617989; | |
| } | |
| .suggestions button:hover { | |
| border-color: #8baeb0; | |
| color: var(--teal); | |
| } | |
| .start-grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 285px; | |
| gap: 25px; | |
| margin-bottom: 38px; | |
| } | |
| .start-main { | |
| border: 1px solid #e1e6e8; | |
| border-radius: 5px; | |
| padding: 28px 29px 26px; | |
| background: linear-gradient(115deg, #fff 62%, #eff4f3); | |
| position: relative; | |
| } | |
| .start-main:after { | |
| content: ""; | |
| position: absolute; | |
| right: 35px; | |
| top: 35px; | |
| height: 130px; | |
| width: 100px; | |
| border-top: 1px solid #dce6e5; | |
| border-right: 1px solid #dce6e5; | |
| opacity: 0.5; | |
| pointer-events: none; | |
| } | |
| .start-main h2 { | |
| font-family: var(--serif); | |
| font-size: 32px; | |
| font-weight: 450; | |
| letter-spacing: -0.6px; | |
| line-height: 1.25; | |
| color: #233e51; | |
| margin: 12px 0 12px; | |
| } | |
| .start-main > p { | |
| font-size: 11px; | |
| line-height: 1.9; | |
| color: #7d8c96; | |
| max-width: 425px; | |
| } | |
| .steps { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| margin-top: 27px; | |
| gap: 19px; | |
| padding-top: 23px; | |
| border-top: 1px solid #e3e9e9; | |
| } | |
| .steps > div { | |
| display: grid; | |
| grid-template-columns: 19px 1fr; | |
| gap: 7px 3px; | |
| } | |
| .steps span { | |
| font-family: var(--serif); | |
| font-size: 12px; | |
| color: #ae8b4b; | |
| } | |
| .steps strong { | |
| font-size: 10px; | |
| font-weight: 550; | |
| color: #41596a; | |
| } | |
| .steps p { | |
| grid-column: 2; | |
| font-size: 9px; | |
| color: #8b98a0; | |
| line-height: 1.65; | |
| } | |
| .collection-card { | |
| background: #edf3f2; | |
| border: 1px solid #dce7e3; | |
| border-top: 3px solid #759893; | |
| padding: 25px 24px 20px; | |
| border-radius: 4px; | |
| } | |
| .collection-card-title { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| color: #5e7e7a; | |
| font-size: 8px; | |
| font-weight: 500; | |
| letter-spacing: 1.3px; | |
| } | |
| .big-stat { | |
| font-family: var(--serif); | |
| font-size: 46px; | |
| letter-spacing: -1px; | |
| color: #284b50; | |
| margin: 19px 0 21px; | |
| } | |
| .big-stat span { | |
| display: block; | |
| font-family: "DM Sans", sans-serif; | |
| font-size: 10px; | |
| letter-spacing: 0; | |
| color: #7b9292; | |
| margin-top: 3px; | |
| } | |
| .stat-rule { | |
| border-top: 1px solid #d3e1dd; | |
| } | |
| .small-stats { | |
| display: flex; | |
| gap: 26px; | |
| margin: 20px 0 25px; | |
| } | |
| .small-stats strong { | |
| font-family: var(--serif); | |
| font-size: 22px; | |
| font-weight: 450; | |
| color: #3c6263; | |
| } | |
| .small-stats span { | |
| font-size: 8px; | |
| line-height: 1.7; | |
| display: block; | |
| color: #7f9494; | |
| margin-top: 4px; | |
| } | |
| .text-button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 10px; | |
| font-weight: 500; | |
| color: #517776; | |
| padding: 0; | |
| } | |
| .text-button:hover { | |
| color: #164d4c; | |
| } | |
| .collection-card .text-button { | |
| border-top: 1px solid #d3e1dd; | |
| padding-top: 18px; | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .section-title { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 17px; | |
| } | |
| .section-title h2 { | |
| font-family: var(--serif); | |
| font-weight: 450; | |
| font-size: 24px; | |
| margin-top: 7px; | |
| letter-spacing: -0.3px; | |
| } | |
| .topic-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 13px; | |
| } | |
| .topic-card { | |
| position: relative; | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| text-align: left; | |
| padding: 20px 18px; | |
| min-height: 143px; | |
| } | |
| .topic-card:hover { | |
| border-color: #8da6b0; | |
| background: #fcfdfd; | |
| } | |
| .topic-index { | |
| font-size: 9px; | |
| color: #a7b2b9; | |
| letter-spacing: 1px; | |
| } | |
| .topic-card > .topic-index { | |
| position: absolute; | |
| right: 16px; | |
| top: 17px; | |
| } | |
| .topic-card > svg:not(.topic-arrow) { | |
| color: #6e8996; | |
| margin-bottom: 17px; | |
| } | |
| .topic-card h3 { | |
| font-weight: 550; | |
| font-size: 12px; | |
| margin-bottom: 8px; | |
| } | |
| .topic-card p { | |
| font-size: 8px; | |
| line-height: 1.6; | |
| color: #929da6; | |
| } | |
| .topic-arrow { | |
| position: absolute; | |
| right: 14px; | |
| bottom: 19px; | |
| color: #90a1aa; | |
| } | |
| footer { | |
| border-top: 1px solid var(--line); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 9px; | |
| color: #9aa6ae; | |
| padding: 23px 0 25px; | |
| margin-top: 36px; | |
| gap: 15px; | |
| line-height: 1.8; | |
| } | |
| .icon-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 6px; | |
| color: #647d8e; | |
| } | |
| .error-box { | |
| padding: 14px 17px; | |
| background: #fff4ed; | |
| border: 1px solid #ecd0bb; | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| font-size: 12px; | |
| line-height: 1.6; | |
| margin-bottom: 22px; | |
| border-radius: 4px; | |
| color: #855025; | |
| } | |
| .error-box .icon-btn { | |
| margin-left: auto; | |
| } | |
| .loading-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| gap: 15px; | |
| padding: 60px 30px; | |
| color: #69828e; | |
| } | |
| .loading-state h2 { | |
| font-family: var(--serif); | |
| font-size: 25px; | |
| font-weight: 450; | |
| } | |
| .loading-state p { | |
| font-size: 12px; | |
| line-height: 1.8; | |
| max-width: 450px; | |
| } | |
| .spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .results-heading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin: 29px 0 17px; | |
| gap: 20px; | |
| } | |
| .results-heading h2 { | |
| font-family: var(--serif); | |
| font-weight: 450; | |
| font-size: 25px; | |
| line-height: 1.45; | |
| margin-top: 8px; | |
| max-width: 750px; | |
| } | |
| .evidence-notice { | |
| background: #f6f3ec; | |
| border: 1px solid #e7dfce; | |
| border-left: 3px solid #b8985d; | |
| border-radius: 3px; | |
| padding: 13px 16px; | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| color: #817151; | |
| font-size: 10px; | |
| line-height: 1.7; | |
| margin-bottom: 20px; | |
| } | |
| .evidence-notice svg { | |
| flex-shrink: 0; | |
| } | |
| .results-grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(290px, 350px); | |
| gap: 20px; | |
| align-items: start; | |
| } | |
| .answer-card { | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .tabbar { | |
| display: flex; | |
| gap: 21px; | |
| border-bottom: 1px solid var(--line); | |
| padding: 0 22px; | |
| } | |
| .tabbar button { | |
| padding: 17px 0; | |
| font-size: 10px; | |
| position: relative; | |
| color: #83949f; | |
| white-space: nowrap; | |
| } | |
| .tabbar button.selected { | |
| color: #2b5b64; | |
| } | |
| .tabbar button.selected:after { | |
| position: absolute; | |
| content: ""; | |
| height: 2px; | |
| bottom: -1px; | |
| left: 0; | |
| right: 0; | |
| background: #548783; | |
| } | |
| .answer-content { | |
| padding: 24px; | |
| } | |
| .answer-meta { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 9px; | |
| color: #91a0aa; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .status { | |
| display: inline-flex; | |
| gap: 6px; | |
| align-items: center; | |
| font-size: 8px; | |
| padding: 5px 7px; | |
| border: 1px solid #dce3e6; | |
| border-radius: 3px; | |
| color: #657e8d; | |
| line-height: 1.1; | |
| font-weight: 500; | |
| } | |
| .status i { | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 50%; | |
| background: currentColor; | |
| } | |
| .status.teal { | |
| background: #eff6f3; | |
| color: #558679; | |
| border-color: #d8e7df; | |
| } | |
| .status.gold { | |
| background: #fbf6e9; | |
| color: #9b7a35; | |
| border-color: #e8ddbe; | |
| } | |
| .generate-state { | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 15px; | |
| padding: 34px 20px 42px; | |
| } | |
| .generate-icon { | |
| border-radius: 50%; | |
| background: #eff4f4; | |
| color: #6d8d98; | |
| width: 65px; | |
| height: 65px; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .generate-state h3 { | |
| font-family: var(--serif); | |
| font-weight: 450; | |
| font-size: 24px; | |
| color: #3d5d6e; | |
| } | |
| .generate-state p { | |
| font-size: 12px; | |
| line-height: 1.8; | |
| color: #85959e; | |
| max-width: 350px; | |
| } | |
| .generate-state small { | |
| font-size: 10px; | |
| line-height: 1.7; | |
| color: #8d9ca3; | |
| } | |
| .markdown { | |
| font-size: 13px; | |
| line-height: 1.95; | |
| color: #4a606f; | |
| overflow-wrap: anywhere; | |
| } | |
| .markdown p { | |
| margin-bottom: 17px; | |
| } | |
| .markdown h1, | |
| .markdown h2, | |
| .markdown h3 { | |
| font-family: var(--serif); | |
| font-weight: 500; | |
| color: #264957; | |
| margin: 20px 0 10px; | |
| } | |
| .markdown h2 { | |
| font-size: 24px; | |
| } | |
| .markdown h3 { | |
| font-size: 20px; | |
| } | |
| .markdown ul, | |
| .markdown ol { | |
| padding-left: 22px; | |
| margin: 12px 0 20px; | |
| } | |
| .markdown li { | |
| margin-bottom: 9px; | |
| } | |
| .markdown strong { | |
| font-weight: 600; | |
| color: #2e4a5c; | |
| } | |
| .markdown a { | |
| color: #277e7f; | |
| text-decoration: underline; | |
| } | |
| .citation { | |
| font-size: 10px; | |
| font-weight: 600; | |
| border: 1px solid #cee0df; | |
| background: #eff6f4; | |
| color: #2a7b77; | |
| border-radius: 3px; | |
| padding: 0 5px; | |
| margin: 0 2px; | |
| } | |
| .answer-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| border-top: 1px solid var(--line); | |
| padding-top: 18px; | |
| margin-top: 26px; | |
| } | |
| .streaming-indicator { | |
| font-size: 10px; | |
| color: #6f8d93; | |
| display: flex; | |
| gap: 7px; | |
| align-items: center; | |
| padding: 10px 0; | |
| } | |
| .source-panel { | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| position: sticky; | |
| top: 20px; | |
| overflow: hidden; | |
| } | |
| .source-panel-heading { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 18px; | |
| border-bottom: 1px solid var(--line); | |
| font-size: 9px; | |
| letter-spacing: 1.2px; | |
| color: #7a919b; | |
| } | |
| .source-panel-heading > span:first-child { | |
| display: flex; | |
| gap: 9px; | |
| align-items: center; | |
| } | |
| .source-number { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0; | |
| color: #537c85; | |
| } | |
| .source-details { | |
| padding: 20px 18px; | |
| } | |
| .source-details h3 { | |
| font-size: 13px; | |
| line-height: 1.7; | |
| font-weight: 550; | |
| margin: 13px 0 8px; | |
| } | |
| .source-details code, | |
| .timeline-item code { | |
| font-size: 9px; | |
| font-family: "IBM Plex Sans", sans-serif; | |
| color: #84959f; | |
| overflow-wrap: anywhere; | |
| line-height: 1.7; | |
| display: block; | |
| } | |
| .source-facts { | |
| display: flex; | |
| gap: 30px; | |
| margin-top: 20px; | |
| font-size: 7px; | |
| letter-spacing: 1px; | |
| color: #9aa7af; | |
| } | |
| .source-facts strong { | |
| display: block; | |
| font-size: 10px; | |
| color: #718693; | |
| font-weight: 500; | |
| letter-spacing: 0; | |
| margin-top: 6px; | |
| } | |
| .source-tabs { | |
| display: flex; | |
| gap: 18px; | |
| padding: 0 18px; | |
| border-top: 1px solid var(--line); | |
| border-bottom: 1px solid var(--line); | |
| background: #fcfdfd; | |
| } | |
| .source-tabs button { | |
| font-size: 9px; | |
| padding: 13px 0; | |
| color: #92a1aa; | |
| } | |
| .source-tabs button.selected { | |
| color: #2e7175; | |
| border-bottom: 1px solid #4e8986; | |
| } | |
| .excerpt { | |
| margin: 0; | |
| white-space: pre-wrap; | |
| font-family: "IBM Plex Sans", sans-serif; | |
| font-size: 11px; | |
| line-height: 1.9; | |
| padding: 20px 18px; | |
| max-height: 460px; | |
| overflow: auto; | |
| color: #708490; | |
| background: #fdfefd; | |
| overflow-wrap: anywhere; | |
| } | |
| .pdf-viewer { | |
| width: 100%; | |
| height: 540px; | |
| border: 0; | |
| } | |
| .source-foot { | |
| border-top: 1px solid var(--line); | |
| padding: 15px 18px; | |
| } | |
| .source-foot span { | |
| font-size: 8px; | |
| color: #95a1a8; | |
| line-height: 1.7; | |
| display: block; | |
| } | |
| .source-foot a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| color: #4d7c7d; | |
| font-size: 10px; | |
| margin-top: 13px; | |
| } | |
| .source-list > button { | |
| display: flex; | |
| gap: 13px; | |
| align-items: center; | |
| text-align: left; | |
| padding: 18px 22px; | |
| border-bottom: 1px solid #e8eded; | |
| width: 100%; | |
| } | |
| .source-list > button:hover, | |
| .source-list > button.chosen { | |
| background: #f1f6f5; | |
| } | |
| .source-num { | |
| font-family: var(--serif); | |
| font-size: 17px; | |
| color: #7a9699; | |
| min-width: 20px; | |
| } | |
| .source-list strong { | |
| font-size: 11px; | |
| font-weight: 500; | |
| line-height: 1.7; | |
| display: block; | |
| } | |
| .source-list small { | |
| font-size: 9px; | |
| color: #8b9ba4; | |
| line-height: 1.7; | |
| display: block; | |
| margin-top: 6px; | |
| } | |
| .source-list svg { | |
| margin-left: auto; | |
| color: #97a9b3; | |
| } | |
| .inline-history { | |
| padding: 24px; | |
| font-size: 12px; | |
| line-height: 1.8; | |
| } | |
| .gaps { | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| background: white; | |
| font-size: 11px; | |
| margin-top: 20px; | |
| padding: 17px; | |
| color: #7b8e99; | |
| line-height: 1.9; | |
| } | |
| .gaps summary { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-weight: 500; | |
| color: #5d7787; | |
| cursor: pointer; | |
| } | |
| .gaps > p { | |
| margin-top: 15px; | |
| } | |
| .history-controls { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 25px; | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| padding: 20px 22px; | |
| align-items: center; | |
| margin-bottom: 25px; | |
| } | |
| .history-controls label { | |
| min-width: 180px; | |
| } | |
| .history-controls .primary { | |
| margin-left: auto; | |
| } | |
| .history-grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 290px; | |
| gap: 25px; | |
| align-items: start; | |
| } | |
| .timeline-card { | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| padding: 25px 28px; | |
| border-radius: 4px; | |
| } | |
| .scope { | |
| font-size: 11px; | |
| line-height: 1.9; | |
| color: #80939e; | |
| margin: 18px 0 30px; | |
| } | |
| .timeline { | |
| margin-left: 7px; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| border-left: 1px solid #dce6e5; | |
| padding: 0 0 32px 24px; | |
| } | |
| .timeline-item:last-child { | |
| padding-bottom: 3px; | |
| border-left-color: transparent; | |
| } | |
| .timeline-dot { | |
| position: absolute; | |
| left: -9px; | |
| top: 0; | |
| border: 1px solid #cbded9; | |
| background: #f2f7f4; | |
| color: #669185; | |
| border-radius: 50%; | |
| width: 17px; | |
| height: 17px; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .unverified .timeline-dot { | |
| color: #b58a40; | |
| border-color: #e3d9c4; | |
| background: #fcf7eb; | |
| } | |
| .timeline-date { | |
| font-size: 10px; | |
| color: #879ba5; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .timeline-date > span { | |
| font-size: 7px; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: #a39269; | |
| } | |
| .timeline-item h3 { | |
| font-size: 13px; | |
| font-weight: 550; | |
| line-height: 1.7; | |
| margin: 10px 0 6px; | |
| } | |
| .timeline-status { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| margin: 13px 0; | |
| } | |
| .timeline-status > span:last-child { | |
| font-size: 9px; | |
| color: #93a0a6; | |
| } | |
| .relationship { | |
| display: flex; | |
| gap: 9px; | |
| border-left: 2px solid #dbdfd2; | |
| padding: 9px 12px; | |
| background: #f8f9f5; | |
| font-size: 9px; | |
| line-height: 1.8; | |
| color: #82948f; | |
| margin: 10px 0 15px; | |
| } | |
| .relationship strong { | |
| font-weight: 550; | |
| text-transform: capitalize; | |
| color: #5f7e75; | |
| } | |
| .relationship svg { | |
| color: #9da995; | |
| margin-top: 2px; | |
| } | |
| .relationship p { | |
| margin-top: 5px; | |
| } | |
| .history-note { | |
| background: #f0f4f1; | |
| padding: 25px; | |
| border: 1px solid #dce5de; | |
| border-top: 3px solid #8fa496; | |
| border-radius: 4px; | |
| color: #7f948b; | |
| } | |
| .history-note h2 { | |
| font-family: var(--serif); | |
| font-size: 26px; | |
| font-weight: 450; | |
| color: #466759; | |
| margin: 18px 0 12px; | |
| } | |
| .history-note > p { | |
| font-size: 11px; | |
| line-height: 1.9; | |
| } | |
| .rule-note { | |
| border-top: 1px solid #dae3dd; | |
| padding-top: 18px; | |
| margin-top: 20px; | |
| } | |
| .rule-note p { | |
| font-size: 10px; | |
| line-height: 1.85; | |
| margin-top: 9px; | |
| } | |
| .history-note h3 { | |
| font-size: 11px; | |
| margin: 22px 0 12px; | |
| font-weight: 550; | |
| } | |
| .history-note ul { | |
| font-size: 10px; | |
| line-height: 1.9; | |
| padding-left: 13px; | |
| } | |
| .history-note li { | |
| margin-bottom: 10px; | |
| } | |
| .history-note .secondary { | |
| margin-top: 15px; | |
| font-size: 10px; | |
| } | |
| .empty { | |
| padding: 30px 20px; | |
| font-size: 12px; | |
| line-height: 1.8; | |
| color: #8da0ab; | |
| } | |
| .library-heading { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 11px; | |
| color: #8b9ba4; | |
| padding: 0 0 18px; | |
| border-bottom: 1px solid var(--line); | |
| margin-bottom: 25px; | |
| gap: 15px; | |
| } | |
| .library-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 18px; | |
| } | |
| .library-card { | |
| text-align: left; | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| padding: 25px 23px; | |
| border-radius: 4px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .library-card:hover { | |
| border-color: #86a3ac; | |
| background: #fdfefe; | |
| } | |
| .library-card > div:first-child { | |
| display: flex; | |
| justify-content: space-between; | |
| color: #8ba2ad; | |
| } | |
| .library-card h2 { | |
| font-family: var(--serif); | |
| font-size: 23px; | |
| line-height: 1.3; | |
| font-weight: 450; | |
| margin: 24px 0 13px; | |
| color: #2a4a5d; | |
| } | |
| .library-card > p { | |
| font-size: 11px; | |
| color: #8a9aa3; | |
| line-height: 1.9; | |
| margin-bottom: 24px; | |
| } | |
| .library-facts { | |
| border-top: 1px solid var(--line); | |
| padding-top: 14px; | |
| margin-top: auto; | |
| display: grid; | |
| gap: 7px; | |
| font-size: 9px; | |
| color: #82979c; | |
| } | |
| .scrim { | |
| display: none; | |
| } | |
| @media (min-width: 1500px) { | |
| main { | |
| padding-top: 53px; | |
| } | |
| .page-heading h1 { | |
| font-size: 39px; | |
| } | |
| .start-main { | |
| padding: 32px 35px; | |
| } | |
| .start-main h2 { | |
| font-size: 36px; | |
| } | |
| .start-grid { | |
| grid-template-columns: minmax(0, 1fr) 320px; | |
| } | |
| .start-main > p { | |
| font-size: 12px; | |
| max-width: 490px; | |
| } | |
| .topic-card { | |
| padding: 24px; | |
| min-height: 160px; | |
| } | |
| .topic-card h3 { | |
| font-size: 13px; | |
| } | |
| .topic-card p { | |
| font-size: 9px; | |
| } | |
| .filters label:first-child { | |
| min-width: 280px; | |
| } | |
| .topbar { | |
| padding: 0 45px; | |
| } | |
| main { | |
| padding-left: 45px; | |
| padding-right: 45px; | |
| } | |
| } | |
| @media (max-width: 1250px) { | |
| .sidebar { | |
| width: 220px; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| } | |
| .shell { | |
| margin-left: 220px; | |
| } | |
| .brand { | |
| padding-left: 5px; | |
| gap: 9px; | |
| } | |
| .brand-sub { | |
| font-size: 7px; | |
| } | |
| .topbar { | |
| padding: 0 26px; | |
| } | |
| main { | |
| padding: 34px 26px 0; | |
| } | |
| .heading-stamp { | |
| display: none; | |
| } | |
| .filter-note { | |
| display: none; | |
| } | |
| .filters { | |
| gap: 17px; | |
| } | |
| .filters label:first-child { | |
| min-width: 210px; | |
| } | |
| .start-grid { | |
| grid-template-columns: minmax(0, 1fr) 250px; | |
| gap: 18px; | |
| } | |
| .start-main { | |
| padding: 26px 23px; | |
| } | |
| .start-main h2 { | |
| font-size: 30px; | |
| } | |
| .collection-card { | |
| padding: 25px 20px 20px; | |
| } | |
| .steps { | |
| gap: 12px; | |
| } | |
| .steps > div { | |
| grid-template-columns: 1fr; | |
| } | |
| .steps p { | |
| grid-column: 1; | |
| } | |
| .steps span { | |
| margin-bottom: 3px; | |
| } | |
| .topic-card { | |
| padding: 19px 14px; | |
| } | |
| .topic-card p { | |
| max-width: 105px; | |
| } | |
| .results-grid { | |
| grid-template-columns: minmax(0, 1fr) 300px; | |
| gap: 15px; | |
| } | |
| .answer-content { | |
| padding: 20px; | |
| } | |
| .library-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 1000px) { | |
| .sidebar { | |
| width: 200px; | |
| } | |
| .shell { | |
| margin-left: 200px; | |
| } | |
| .brand { | |
| font-size: 22px; | |
| gap: 8px; | |
| } | |
| .brand-symbol { | |
| width: 35px; | |
| height: 40px; | |
| } | |
| .brand-sub { | |
| font-size: 6.5px; | |
| letter-spacing: 1px; | |
| } | |
| .sidebar nav button, | |
| .sidebar nav a { | |
| font-size: 10px; | |
| padding: 13px 9px; | |
| gap: 9px; | |
| } | |
| .nav-shortcut { | |
| display: none; | |
| } | |
| .sidebar-label { | |
| font-size: 8px; | |
| } | |
| .top-actions { | |
| gap: 10px; | |
| } | |
| .preview-tag { | |
| display: none; | |
| } | |
| .start-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .collection-card { | |
| display: none; | |
| } | |
| .topic-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .topic-card p { | |
| max-width: none; | |
| } | |
| .filters { | |
| gap: 12px; | |
| } | |
| .filters label:first-child { | |
| min-width: 175px; | |
| } | |
| .filters label:last-of-type select { | |
| max-width: 90px; | |
| } | |
| .filters select { | |
| max-width: 175px; | |
| font-size: 10px; | |
| } | |
| .query-field .primary { | |
| padding: 12px; | |
| } | |
| .query-field input { | |
| font-size: 11px; | |
| } | |
| .search-label { | |
| font-size: 8px; | |
| } | |
| .page-heading h1 { | |
| font-size: 32px; | |
| } | |
| .results-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .source-panel { | |
| position: static; | |
| } | |
| .source-facts { | |
| gap: 50px; | |
| } | |
| .excerpt { | |
| max-height: 300px; | |
| } | |
| .history-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .history-note { | |
| display: none; | |
| } | |
| .history-controls { | |
| gap: 15px; | |
| } | |
| .history-controls label { | |
| min-width: 130px; | |
| } | |
| .tabbar { | |
| gap: 17px; | |
| } | |
| .history-controls .primary { | |
| padding: 12px; | |
| } | |
| .library-card h2 { | |
| font-size: 21px; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| transition: transform 0.2s; | |
| width: 245px; | |
| z-index: 40; | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| .scrim { | |
| display: block; | |
| position: fixed; | |
| inset: 0; | |
| background: #10283c66; | |
| z-index: 30; | |
| } | |
| .shell { | |
| margin-left: 0; | |
| } | |
| .mobile-menu { | |
| display: inline-flex ; | |
| } | |
| .topbar { | |
| height: 59px; | |
| padding: 0 18px; | |
| gap: 10px; | |
| } | |
| .breadcrumb { | |
| margin-right: auto; | |
| gap: 8px; | |
| font-size: 10px; | |
| } | |
| .top-actions a { | |
| font-size: 9px; | |
| } | |
| .page-heading { | |
| margin-bottom: 23px; | |
| } | |
| main { | |
| padding: 28px 18px 0; | |
| } | |
| .page-heading h1 { | |
| font-size: 30px; | |
| letter-spacing: -0.8px; | |
| } | |
| .page-heading p { | |
| font-size: 11px; | |
| max-width: 430px; | |
| } | |
| .eyebrow { | |
| font-size: 8px; | |
| letter-spacing: 1.4px; | |
| } | |
| .search-card { | |
| padding: 17px 16px 0; | |
| } | |
| .search-label { | |
| display: none; | |
| } | |
| .query-field { | |
| flex-wrap: wrap; | |
| padding: 10px 11px; | |
| gap: 8px; | |
| margin: 16px 0; | |
| } | |
| .query-field > svg { | |
| width: 17px; | |
| } | |
| .query-field input { | |
| font-size: 12px; | |
| min-width: calc(100% - 30px); | |
| } | |
| .query-field .primary { | |
| width: 100%; | |
| margin-top: 6px; | |
| } | |
| .filters { | |
| flex-wrap: wrap; | |
| margin: 0 -16px; | |
| padding: 16px; | |
| gap: 18px 20px; | |
| } | |
| .filters label:first-child { | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| .filters select { | |
| max-width: 100%; | |
| font-size: 12px; | |
| } | |
| .filter-divider { | |
| display: none; | |
| } | |
| .filters label { | |
| font-size: 8px; | |
| } | |
| .filters input { | |
| font-size: 11px; | |
| } | |
| .suggestions { | |
| margin: 15px 0 25px; | |
| gap: 7px; | |
| } | |
| .suggestions > span { | |
| width: 100%; | |
| margin-bottom: 5px; | |
| } | |
| .suggestions button { | |
| font-size: 9px; | |
| } | |
| .start-main { | |
| padding: 23px 21px; | |
| } | |
| .start-main h2 { | |
| font-size: 31px; | |
| } | |
| .start-main > p { | |
| font-size: 11px; | |
| } | |
| .steps { | |
| gap: 12px; | |
| margin-top: 22px; | |
| } | |
| .steps strong { | |
| font-size: 9px; | |
| } | |
| .steps p { | |
| font-size: 8px; | |
| } | |
| .start-grid { | |
| margin-bottom: 30px; | |
| } | |
| .section-title .text-button { | |
| font-size: 9px; | |
| } | |
| .section-title h2 { | |
| font-size: 22px; | |
| } | |
| .topic-grid { | |
| gap: 10px; | |
| } | |
| .topic-card { | |
| padding: 17px; | |
| min-height: 150px; | |
| } | |
| .topic-card h3 { | |
| font-size: 12px; | |
| max-width: 140px; | |
| } | |
| .topic-card p { | |
| font-size: 8px; | |
| max-width: 110px; | |
| } | |
| .topic-index { | |
| font-size: 8px; | |
| } | |
| .results-heading { | |
| align-items: flex-start; | |
| } | |
| .results-heading h2 { | |
| font-size: 22px; | |
| } | |
| .results-heading .secondary { | |
| font-size: 0; | |
| padding: 10px; | |
| } | |
| .results-heading .secondary svg { | |
| width: 17px; | |
| } | |
| .answer-content { | |
| padding: 19px; | |
| } | |
| .tabbar { | |
| gap: 20px; | |
| padding: 0 19px; | |
| } | |
| .tabbar button { | |
| font-size: 9px; | |
| } | |
| .evidence-notice { | |
| font-size: 10px; | |
| } | |
| .markdown { | |
| font-size: 12px; | |
| } | |
| .history-controls { | |
| flex-wrap: wrap; | |
| padding: 18px; | |
| gap: 20px; | |
| } | |
| .history-controls label:first-child { | |
| width: 100%; | |
| } | |
| .history-controls label { | |
| min-width: 130px; | |
| } | |
| .history-controls .primary { | |
| margin-left: auto; | |
| font-size: 10px; | |
| } | |
| .history-controls select { | |
| font-size: 13px; | |
| } | |
| .timeline-card { | |
| padding: 22px 19px; | |
| } | |
| .timeline-item { | |
| padding-left: 20px; | |
| } | |
| .timeline-date { | |
| font-size: 9px; | |
| align-items: flex-start; | |
| } | |
| .timeline-date > span { | |
| font-size: 6px; | |
| max-width: 80px; | |
| text-align: right; | |
| } | |
| .timeline-item h3 { | |
| font-size: 12px; | |
| } | |
| .library-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .library-heading { | |
| font-size: 10px; | |
| line-height: 1.8; | |
| } | |
| .library-heading > span:last-child { | |
| max-width: 170px; | |
| text-align: right; | |
| } | |
| .library-card > p { | |
| max-width: 500px; | |
| } | |
| .library-card h2 { | |
| font-size: 26px; | |
| } | |
| footer { | |
| font-size: 8px; | |
| align-items: flex-start; | |
| margin-top: 28px; | |
| } | |
| footer span:last-child { | |
| display: none; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| * { | |
| scroll-behavior: auto ; | |
| animation: none ; | |
| transition: none ; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| .sidebar { | |
| visibility: hidden; | |
| } | |
| .sidebar.open { | |
| visibility: visible; | |
| } | |
| } | |
| .workspace-panel { | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| padding: 27px; | |
| max-width: 1100px; | |
| } | |
| .workspace-intro { | |
| display: flex; | |
| gap: 14px; | |
| align-items: center; | |
| margin-bottom: 25px; | |
| color: #63878b; | |
| } | |
| .workspace-intro > div { | |
| flex: 1; | |
| } | |
| .workspace-intro h2 { | |
| font-family: var(--serif); | |
| font-size: 25px; | |
| font-weight: 450; | |
| color: var(--navy); | |
| display: inline-block; | |
| margin-right: 20px; | |
| } | |
| .workspace-intro p { | |
| font-size: 12px; | |
| line-height: 1.8; | |
| color: var(--muted); | |
| margin-top: 6px; | |
| } | |
| .workspace-panel select, | |
| .workspace-panel input:not([type="file"]), | |
| .workspace-panel textarea { | |
| border: 1px solid #d6e0e4; | |
| background: #fcfdfd; | |
| color: #365262; | |
| border-radius: 3px; | |
| padding: 10px; | |
| font: inherit; | |
| font-size: 12px; | |
| min-width: 0; | |
| } | |
| .upload-zone { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| background: #f8fbfa; | |
| border: 1px dashed #a7c2be; | |
| border-radius: 4px; | |
| padding: 30px 15px; | |
| color: #678f89; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| .upload-zone strong { | |
| font-weight: 550; | |
| font-size: 14px; | |
| color: #466a6d; | |
| } | |
| .upload-zone span { | |
| font-size: 10px; | |
| color: #849e9c; | |
| } | |
| .upload-zone input[type="file"] { | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0; | |
| width: 100%; | |
| height: 100%; | |
| cursor: pointer; | |
| } | |
| .processing { | |
| opacity: 0.6; | |
| } | |
| .file-toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| margin: 24px 0; | |
| flex-wrap: wrap; | |
| } | |
| .file-toolbar strong { | |
| font-size: 13px; | |
| overflow-wrap: anywhere; | |
| } | |
| .file-toolbar small { | |
| display: block; | |
| color: #8a9da6; | |
| font-size: 10px; | |
| margin-top: 6px; | |
| } | |
| .file-toolbar > div:last-child { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .document-text { | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| margin: 20px 0; | |
| color: #6c8492; | |
| font-size: 11px; | |
| } | |
| .document-text summary { | |
| padding: 15px; | |
| cursor: pointer; | |
| font-weight: 550; | |
| } | |
| .document-text pre { | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| max-height: 350px; | |
| overflow: auto; | |
| padding: 20px; | |
| font: | |
| 11px/1.8 "IBM Plex Sans", | |
| sans-serif; | |
| border-top: 1px solid var(--line); | |
| margin: 0; | |
| } | |
| .data-controls form { | |
| display: flex; | |
| gap: 10px; | |
| margin: 20px 0; | |
| flex-wrap: wrap; | |
| } | |
| .data-controls input { | |
| flex: 1; | |
| } | |
| .data-caption { | |
| font-size: 11px; | |
| line-height: 1.8; | |
| color: #81939e; | |
| margin: 14px 0; | |
| } | |
| .table-scroll { | |
| overflow: auto; | |
| max-height: 360px; | |
| border: 1px solid var(--line); | |
| border-radius: 3px; | |
| } | |
| .table-scroll table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 11px; | |
| white-space: nowrap; | |
| } | |
| .table-scroll th { | |
| position: sticky; | |
| top: 0; | |
| background: #eef4f3; | |
| color: #4d7276; | |
| text-align: left; | |
| padding: 13px; | |
| font-weight: 550; | |
| border-bottom: 1px solid #d9e4e1; | |
| } | |
| .table-scroll td { | |
| padding: 11px 13px; | |
| border-bottom: 1px solid #e6edeb; | |
| color: #6c808b; | |
| max-width: 400px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .table-scroll tr:nth-child(even) { | |
| background: #fafcfb; | |
| } | |
| .distribution { | |
| border: 1px solid var(--line); | |
| padding: 20px; | |
| border-radius: 4px; | |
| margin: 20px 0; | |
| } | |
| .distribution h3 { | |
| font-size: 13px; | |
| font-weight: 550; | |
| margin-bottom: 20px; | |
| } | |
| .distribution > div { | |
| display: grid; | |
| grid-template-columns: minmax(90px, 1fr) 2fr 40px; | |
| gap: 15px; | |
| font-size: 11px; | |
| align-items: center; | |
| margin: 12px 0; | |
| color: #728b92; | |
| } | |
| .distribution strong { | |
| font-weight: 500; | |
| text-align: right; | |
| } | |
| .distribution meter { | |
| width: 100%; | |
| accent-color: var(--teal); | |
| } | |
| .chat-heading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-top: 32px; | |
| border-top: 1px solid var(--line); | |
| padding-top: 24px; | |
| } | |
| .chat-heading h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 14px; | |
| font-weight: 550; | |
| } | |
| .chat-message { | |
| padding: 20px; | |
| margin: 18px 0; | |
| border: 1px solid #e0e8e6; | |
| border-radius: 4px; | |
| } | |
| .chat-message.user { | |
| background: #f2f6f5; | |
| } | |
| .chat-message > span { | |
| font-size: 8px; | |
| letter-spacing: 1.4px; | |
| color: #809b9b; | |
| display: block; | |
| margin-bottom: 12px; | |
| } | |
| .chat-form { | |
| margin-top: 20px; | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .chat-form select { | |
| justify-self: start; | |
| } | |
| .chat-form textarea { | |
| min-height: 100px; | |
| resize: vertical; | |
| width: 100%; | |
| } | |
| .chat-form > div { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .chat-form > div > span { | |
| font-size: 10px; | |
| color: #8c9ca4; | |
| } | |
| .tool-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 12px; | |
| margin: 26px 0; | |
| } | |
| .tool-grid button { | |
| text-align: left; | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| padding: 17px 15px; | |
| background: #fcfdfd; | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .tool-grid button span { | |
| font-size: 9px; | |
| color: #8da7a9; | |
| } | |
| .tool-grid button strong { | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .tool-grid button.active { | |
| border-color: #78a5a0; | |
| background: #eff6f2; | |
| box-shadow: inset 0 2px #6e9a91; | |
| } | |
| .tool-options { | |
| display: flex; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| margin: 24px 0; | |
| } | |
| .tool-options label, | |
| .settings-panel form label { | |
| display: grid; | |
| gap: 10px; | |
| font-size: 9px; | |
| letter-spacing: 1.1px; | |
| color: #8a9ba3; | |
| } | |
| .tool-submit { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 30px; | |
| margin-top: 24px; | |
| } | |
| .tool-submit p { | |
| font-size: 11px; | |
| line-height: 1.9; | |
| max-width: 600px; | |
| color: #83979f; | |
| } | |
| .selected-files { | |
| padding: 0; | |
| list-style: none; | |
| margin: 20px 0; | |
| } | |
| .selected-files li { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| padding: 12px 0; | |
| border-bottom: 1px solid #e7ecec; | |
| font-size: 12px; | |
| color: #64818b; | |
| overflow-wrap: anywhere; | |
| } | |
| .selected-files li > span { | |
| margin-left: auto; | |
| font-size: 10px; | |
| } | |
| .selected-files li > div { | |
| display: flex; | |
| gap: 10px; | |
| flex-shrink: 0; | |
| } | |
| .selected-files button { | |
| font-size: 9px; | |
| border: 1px solid var(--line); | |
| padding: 5px 7px; | |
| border-radius: 3px; | |
| } | |
| .success-box { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 15px; | |
| border: 1px solid #c8dfd4; | |
| background: #eff7f1; | |
| font-size: 12px; | |
| color: #577e69; | |
| margin: 20px 0; | |
| border-radius: 4px; | |
| } | |
| .settings-panel > p { | |
| font-size: 13px; | |
| line-height: 1.9; | |
| color: #718a95; | |
| max-width: 720px; | |
| } | |
| .settings-panel form { | |
| display: grid; | |
| gap: 18px; | |
| margin: 26px 0; | |
| max-width: 600px; | |
| } | |
| .settings-panel form > div { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .settings-panel .data-caption { | |
| font-size: 11px; | |
| } | |
| .sidebar nav { | |
| gap: 4px; | |
| } | |
| .sidebar nav button { | |
| line-height: 1.6; | |
| } | |
| .results-heading > .secondary:last-child { | |
| margin-left: 0; | |
| } | |
| .results-heading > div:first-child { | |
| margin-right: auto; | |
| } | |
| @media (max-width: 760px) { | |
| .workspace-panel { | |
| padding: 20px 16px; | |
| } | |
| .workspace-intro { | |
| gap: 10px; | |
| align-items: flex-start; | |
| } | |
| .workspace-intro h2 { | |
| font-size: 22px; | |
| } | |
| .workspace-intro p { | |
| font-size: 11px; | |
| } | |
| .workspace-intro select { | |
| margin-top: 8px; | |
| } | |
| .file-toolbar > div:last-child { | |
| flex-wrap: wrap; | |
| } | |
| .file-toolbar .secondary { | |
| font-size: 10px; | |
| padding: 10px; | |
| } | |
| .data-controls form > * { | |
| width: 100%; | |
| flex-basis: 100%; | |
| } | |
| .tool-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 9px; | |
| } | |
| .tool-grid button { | |
| padding: 14px; | |
| } | |
| .tool-submit { | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 15px; | |
| } | |
| .tool-options > label { | |
| width: 100%; | |
| } | |
| .chat-form > div { | |
| align-items: flex-end; | |
| } | |
| .chat-form > div > span { | |
| line-height: 1.8; | |
| } | |
| .chat-heading { | |
| align-items: flex-start; | |
| gap: 15px; | |
| } | |
| .chat-heading h3 { | |
| font-size: 12px; | |
| } | |
| .chat-heading .text-button { | |
| font-size: 9px; | |
| } | |
| .selected-files li { | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .selected-files li > div { | |
| width: 100%; | |
| } | |
| .results-heading { | |
| gap: 8px; | |
| } | |
| .results-heading .secondary { | |
| font-size: 0; | |
| padding: 10px; | |
| } | |
| .sidebar-bottom { | |
| padding-top: 30px; | |
| } | |
| } | |
| /* GFM tables keep columns readable while remaining inside the answer panel. */ | |
| .markdown table { | |
| display: block; | |
| width: max-content; | |
| max-width: 100%; | |
| overflow-x: auto; | |
| border-collapse: collapse; | |
| margin: 16px 0 22px; | |
| font-size: 12px; | |
| line-height: 1.65; | |
| } | |
| .markdown th, | |
| .markdown td { | |
| min-width: 110px; | |
| max-width: 420px; | |
| padding: 11px 14px; | |
| border: 1px solid #dce5e8; | |
| vertical-align: top; | |
| overflow-wrap: anywhere; | |
| } | |
| .markdown th { | |
| color: #173650; | |
| background: #edf4f4; | |
| font-weight: 600; | |
| } | |
| .markdown tr:nth-child(even) td { | |
| background: #f8fafb; | |
| } | |
| .automatic-scope { | |
| display: flex; | |
| flex: 1 1 240px; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| align-items: center; | |
| color: var(--teal); | |
| font-size: 11px; | |
| } | |
| .automatic-scope .text-button { | |
| font-size: 10px; | |
| } | |
| .search-refinements { | |
| border-top: 1px solid #edf0f1; | |
| margin: 0 -23px; | |
| padding: 12px 23px; | |
| } | |
| .search-refinements summary { | |
| cursor: pointer; | |
| color: #637b89; | |
| font-size: 11px; | |
| width: fit-content; | |
| } | |
| .search-refinements summary span { | |
| font-size: 9px; | |
| color: #8d9ba4; | |
| margin-left: 8px; | |
| } | |
| .refinement-fields { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px 22px; | |
| align-items: flex-start; | |
| padding: 18px 0 4px; | |
| } | |
| .refinement-fields label { | |
| display: grid; | |
| gap: 8px; | |
| font-size: 8px; | |
| letter-spacing: 1px; | |
| color: #7b8f9b; | |
| } | |
| .refinement-fields select { | |
| max-width: 100%; | |
| border: 1px solid var(--line); | |
| border-radius: 3px; | |
| padding: 9px 12px; | |
| background: #fff; | |
| color: var(--navy); | |
| font-size: 11px; | |
| min-width: 190px; | |
| } | |
| .refinement-fields p { | |
| flex: 1 1 220px; | |
| font-size: 10px; | |
| line-height: 1.7; | |
| color: #7b8f9b; | |
| margin: 0; | |
| } | |
| @media (max-width: 640px) { | |
| .automatic-scope { | |
| flex-basis: 100%; | |
| } | |
| .search-refinements { | |
| margin: 0 -16px; | |
| padding: 12px 16px; | |
| } | |
| .refinement-fields label { | |
| width: 100%; | |
| } | |
| .refinement-fields select { | |
| width: 100%; | |
| } | |
| } | |
| .currency-notice { | |
| margin: 0 0 14px; | |
| padding: 11px 14px; | |
| border: 1px solid #d9c9a3; | |
| border-left: 4px solid #b58c45; | |
| background: #fbf6ea; | |
| color: #3a3220; | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| } | |
| .currency-notice.warning { | |
| border-color: #d8b2a8; | |
| border-left-color: #a8442f; | |
| background: #fbefec; | |
| } | |
| .currency-notice ul { | |
| margin: 6px 0 0; | |
| padding-left: 18px; | |
| } | |
| /* Policies by division */ | |
| .division-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-bottom: 22px; | |
| } | |
| .division-chips button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12px; | |
| padding: 8px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: 3px; | |
| background: #fff; | |
| color: #3d5a6b; | |
| } | |
| .division-chips button span { | |
| font-size: 10px; | |
| color: #8b9ba4; | |
| } | |
| .division-chips button.active { | |
| background: #173650; | |
| border-color: #173650; | |
| color: #fff; | |
| } | |
| .division-chips button.active span { | |
| color: #c9d6de; | |
| } | |
| .division-intro { | |
| font-size: 12px; | |
| line-height: 1.8; | |
| color: #6a7f8b; | |
| margin: 0 0 18px; | |
| max-width: 980px; | |
| } | |
| .division-controls { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 18px; | |
| } | |
| .division-search { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| border: 1px solid var(--line); | |
| padding: 7px 10px; | |
| border-radius: 3px; | |
| background: #fff; | |
| color: #8b9ba4; | |
| flex: 1 1 260px; | |
| max-width: 420px; | |
| } | |
| .division-search input { | |
| border: 0; | |
| outline: 0; | |
| font-size: 12px; | |
| width: 100%; | |
| background: transparent; | |
| } | |
| .division-controls select { | |
| font-size: 12px; | |
| padding: 8px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 3px; | |
| background: #fff; | |
| } | |
| .division-count { | |
| font-size: 11px; | |
| color: #8b9ba4; | |
| } | |
| .division-section h3 { | |
| font-family: var(--serif); | |
| font-size: 19px; | |
| font-weight: 450; | |
| color: #2a4a5d; | |
| margin: 26px 0 12px; | |
| } | |
| .division-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 12px; | |
| line-height: 1.65; | |
| } | |
| .division-table th { | |
| text-align: left; | |
| font-size: 10px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: #8b9ba4; | |
| font-weight: 500; | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--line); | |
| white-space: nowrap; | |
| } | |
| .division-table td { | |
| vertical-align: top; | |
| padding: 12px; | |
| border-bottom: 1px solid #edf1f3; | |
| color: #4a6372; | |
| } | |
| .division-table td:first-child { | |
| min-width: 190px; | |
| color: #2a4a5d; | |
| font-weight: 500; | |
| } | |
| .division-table .kind { | |
| display: inline-block; | |
| font-style: normal; | |
| font-size: 9px; | |
| padding: 3px 7px; | |
| margin: 0 8px 6px 0; | |
| border-radius: 3px; | |
| border: 1px solid #dce3e6; | |
| color: #657e8d; | |
| } | |
| .division-table .kind.active { | |
| background: #eff6f3; | |
| color: #3f7a68; | |
| border-color: #d8e7df; | |
| } | |
| .division-table .kind.ended { | |
| background: #fbf2ee; | |
| color: #a2573a; | |
| border-color: #efd8cd; | |
| } | |
| .division-table .kind.dormant { | |
| background: #fbf6e9; | |
| color: #9b7a35; | |
| border-color: #e8ddbe; | |
| } | |
| .division-links { | |
| min-width: 150px; | |
| } | |
| .division-links button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 10px; | |
| color: #217b7c; | |
| border: 1px solid #cfe2e0; | |
| border-radius: 3px; | |
| padding: 4px 7px; | |
| margin: 0 6px 6px 0; | |
| background: #f6fbfa; | |
| text-align: left; | |
| } | |
| .division-note { | |
| font-size: 12px; | |
| color: #8b9ba4; | |
| padding: 18px 0; | |
| } | |
| .division-note.error { | |
| color: #a2573a; | |
| } | |
| .division-foot { | |
| font-size: 11px; | |
| color: #8b9ba4; | |
| line-height: 1.8; | |
| margin-top: 18px; | |
| max-width: 980px; | |
| } | |
| /* Kind of work */ | |
| :root { | |
| --nat-rule: #217b7c; | |
| --nat-forwarded: #7a6fb0; | |
| --nat-routine: #98a8b2; | |
| --nat-data_request: #b58c45; | |
| --nat-dissemination: #5b8fbd; | |
| --nat-communication: #c98a62; | |
| } | |
| i.nat-rule, .nature.nat-rule { background: var(--nat-rule); } | |
| i.nat-forwarded, .nature.nat-forwarded { background: var(--nat-forwarded); } | |
| i.nat-routine, .nature.nat-routine { background: var(--nat-routine); } | |
| i.nat-data_request, .nature.nat-data_request { background: var(--nat-data_request); } | |
| i.nat-dissemination, .nature.nat-dissemination { background: var(--nat-dissemination); } | |
| i.nat-communication, .nature.nat-communication { background: var(--nat-communication); } | |
| .nature-legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 0 0 18px; | |
| } | |
| .nature-legend-title { | |
| font-size: 10px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: #8b9ba4; | |
| margin-right: 4px; | |
| } | |
| .nature-legend button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| font-size: 11px; | |
| padding: 6px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 3px; | |
| background: #fff; | |
| color: #4a6372; | |
| } | |
| .nature-legend button i { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 2px; | |
| } | |
| .nature-legend button em { | |
| font-style: normal; | |
| font-size: 10px; | |
| color: #8b9ba4; | |
| } | |
| .nature-legend button.active { | |
| border-color: #173650; | |
| color: #173650; | |
| background: #f1f5f7; | |
| } | |
| .mix { | |
| margin: 0 0 20px; | |
| max-width: 980px; | |
| } | |
| .mix-bar { | |
| display: flex; | |
| height: 10px; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| background: #edf1f3; | |
| } | |
| .mix-bar i { | |
| display: block; | |
| height: 100%; | |
| } | |
| .mix-key { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px 16px; | |
| margin-top: 8px; | |
| font-size: 11px; | |
| color: #6a7f8b; | |
| } | |
| .mix-key span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .mix-key i { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 2px; | |
| } | |
| .mix-key .mix-total { | |
| color: #8b9ba4; | |
| } | |
| .nature-cell { | |
| min-width: 130px; | |
| } | |
| .nature { | |
| display: inline-block; | |
| font-size: 10px; | |
| padding: 3px 8px; | |
| margin: 0 6px 6px 0; | |
| border-radius: 3px; | |
| color: #fff; | |
| white-space: nowrap; | |
| } | |
| .nature.also { | |
| background: transparent ; | |
| border: 1px solid #dce3e6; | |
| color: #657e8d; | |
| } | |
| /* Library timeline */ | |
| .library-sort { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: -8px 0 20px; | |
| font-size: 10px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: #8b9ba4; | |
| } | |
| .library-sort button { | |
| font-size: 11px; | |
| letter-spacing: 0; | |
| text-transform: none; | |
| padding: 6px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 3px; | |
| background: #fff; | |
| color: #4a6372; | |
| } | |
| .library-sort button.active { | |
| background: #173650; | |
| border-color: #173650; | |
| color: #fff; | |
| } | |
| .span-bar { | |
| position: relative; | |
| height: 6px; | |
| margin: 0 0 14px; | |
| background: #edf1f3; | |
| border-radius: 3px; | |
| } | |
| .span-bar i { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| background: #217b7c; | |
| border-radius: 3px; | |
| } | |
| .rule-card .span-bar i { | |
| background: #b58c45; | |
| } | |
| .rules-heading { | |
| margin-top: 42px; | |
| } | |
| .kind-text.active { color: #3f7a68; } | |
| .kind-text.ended { color: #a2573a; } | |
| .kind-text.dormant { color: #9b7a35; } | |