epfo-circulars / frontend /src /style.css
gauravmeena0708's picture
Upload folder using huggingface_hub
53d9d32 verified
Raw History Blame Contribute Delete
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 !important;
}
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 !important;
}
.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 !important;
animation: none !important;
transition: none !important;
}
}
@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 !important;
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; }