/* Talgent e-Sign portal.
Layout and components are this app's own — a flat light shell rather than the CRM chrome in
assets/css/template.css, which is why that stylesheet is not loaded here. The *design language*
is not invented though: the font and every colour below come from template.css's own :root, so
the portal reads as part of Talgent rather than as a foreign app. Kendo's stylesheet and the
icomoon icon font are shared as-is.
Keep the values in sync with assets/css/template.css if that file's :root ever changes. */
/* Same source and weights template.css uses. */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
:root {
/* --- lifted verbatim from template.css :root --- */
--bs-primary: #002060;
--bs-info: #1A73E8;
--bs-tertiary: #6196FE;
--bs-secondary: #E6E8E9;
--bs-grey: #E0E6F2;
--bs-grey-dark: #7C809E;
--bs-danger: #FF364E;
--bs-success: #19D051;
/* The fallbacks are sans-serif, not serif. This said `"Quicksand", serif`, so the one situation
the fallback exists for — Google Fonts blocked or slow — dropped the whole portal into a
serif face. */
--bs-font-sans-serif: "Quicksand", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* --- this app's roles, expressed in those colours --- */
--edoc-primary: var(--bs-info);
--edoc-primary-dark: #1560c4;
/* Hover shades for the destructive button, alongside --edoc-primary-dark and derived from
--bs-danger the same way: hand-picked rather than computed, because the tokens above are
lifted verbatim from template.css and a color-mix() here would drift from whatever that file
uses for the same state. Both live next to the colour they darken, so a change to
--bs-danger has one obvious place to be followed through. */
--edoc-danger-dark: #e02138;
--edoc-danger-soft: #ffeef0;
--edoc-primary-soft: #e8f1fd;
/* #333 is what template.css gives .form-control, so body text matches inputs. */
--edoc-text: #333;
--edoc-heading: var(--bs-primary);
--edoc-muted: var(--bs-grey-dark);
--edoc-border: var(--bs-grey);
/* Inputs keep Bootstrap's own border rather than the lighter --bs-grey, matching
template.css's .form-control{border:1px solid #ced4da}. */
--edoc-input-border: #ced4da;
--edoc-panel: #ffffff;
--edoc-bg: #f4f5f7;
--edoc-field-bg: #ffffff;
--edoc-card-bg: #f7f8f9;
--edoc-radius: 10px;
}
/* Inherited from the root rather than forced onto every element with `*`.
This stylesheet loads AFTER kendo.default-main.min.css, so a universal `box-sizing: border-box`
changed the box model of every element inside every Kendo widget — the pager, the toast, the
page-size dropdown — not just this app's markup. Setting it on :root and inheriting keeps the
convenience for our own elements while leaving anything Kendo sizes for itself alone.
Kendo's own stylesheet sets box-sizing on the elements it cares about, so those keep theirs. */
:root {
box-sizing: border-box;
}
/* The three roots are set to border-box OUTRIGHT; only their descendants inherit.
`box-sizing: inherit` on `.edoc-auth-shell *` never reaches .edoc-auth-shell itself — an element
is not its own descendant — so the shell took its value from , which is content-box
(box-sizing is not an inherited property, so the :root declaration above stops at ). Every
descendant then dutifully inherited content-box down the whole tree.
That is what pushed the login form off the right edge of a phone: .edoc-input and .edoc-btn-block
are `width: 100%`, and under content-box their padding and border are ADDED to that width, so
each field came out ~34px wider than the card holding it. The card is centred, so the overflow
showed up as everything inside it sitting right of centre. The same overflow was on the
authenticated pages, where the wider container merely made it less obvious. */
.edoc-container,
.edoc-auth-shell,
.edoc-header {
box-sizing: border-box;
}
.edoc-container *,
.edoc-container *::before,
.edoc-container *::after,
.edoc-auth-shell *,
.edoc-auth-shell *::before,
.edoc-auth-shell *::after,
.edoc-header *,
.edoc-header *::before,
.edoc-header *::after {
box-sizing: inherit;
}
body {
margin: 0;
background: var(--edoc-bg);
color: var(--edoc-text);
font-family: var(--bs-font-sans-serif);
/* .875rem — the same size template.css sets on .form-control. */
font-size: 0.875rem;
line-height: 1.5;
}
/* Scoped to this app's own containers, not every anchor on the page. Unscoped `a` rules load after
Kendo's stylesheet and so repainted every anchor inside a Kendo widget — pager links, dropdown
items, the toast close button — which is why a pile of `.edoc-pager .k-link` overrides further down
exists at all: they were rebuilding chrome these two rules had flattened. */
/* :not(.edoc-btn) — an anchor styled as a button is NOT a link for colouring purposes.
Without it these rules are element-plus-class (0,1,1) while .edoc-btn-primary is class-only
(0,1,0), so they quietly won a colour fight the button rule did not know it was in: every
rendered with blue link text. On the grey .edoc-btn-muted that merely looked
off; on the blue .edoc-btn-primary it was blue on blue, which is why "Xem" in the detail file
rows showed as an empty blue box.
Excluding buttons here rather than adding an override per button variant: an override only fixes
the variants somebody remembered, and the next ` ` would arrive
with the same bug. The underline rule is excluded for the same reason — a button is not
underlined on hover, and .edoc-btn already says so for the case.
:not(:where(.edoc-btn)), not a bare :not(.edoc-btn). A plain :not() takes on the specificity of
its argument, which would lift these from (0,1,1) to (0,2,1) and put them AHEAD of the
`.edoc-pager .k-link` overrides at (0,2,0) further down — the very rules that exist to rebuild
the Kendo pager chrome these selectors would otherwise flatten. :where() contributes nothing, so
the exclusion changes what is matched without changing who wins. */
.edoc-container a:not(:where(.edoc-btn)),
.edoc-auth-shell a:not(:where(.edoc-btn)),
.edoc-panel a:not(:where(.edoc-btn)),
.edoc-header a:not(:where(.edoc-btn)) {
color: var(--edoc-primary);
text-decoration: none;
}
.edoc-container a:not(:where(.edoc-btn)):hover,
.edoc-auth-shell a:not(:where(.edoc-btn)):hover,
.edoc-panel a:not(:where(.edoc-btn)):hover,
.edoc-header a:not(:where(.edoc-btn)):hover {
text-decoration: underline;
}
.edoc-container {
/* 80% of the window on a wide screen, and never narrower than the 1240px this used to be
pinned at.
A flat 1240px is fine at 1440 and looks lost on anything bigger: on a 2560px monitor it used
less than half the width, so the list sat in a column with a third of the screen blank down
each side. A flat 80vw would fix that end and break the other — at 1280 it would be 1024,
narrower than today, and the table below has a 760px minimum before it starts scrolling
sideways.
max() takes whichever is larger, so this is never a step backwards: 1240px up to ~1550px
wide, then 80vw from there on. Phones are unaffected — 80vw is far below 1240px there, so the
cap stays 1240px and the container is simply the full viewport as before. */
max-width: max(1240px, 80vw);
margin: 0 auto;
padding: 0 24px;
}
.edoc-muted {
color: var(--edoc-muted);
}
/* ---------- buttons ---------- */
.edoc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 16px;
border: none;
border-radius: 8px;
font-size: 0.875rem;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.edoc-btn:hover {
text-decoration: none;
}
.edoc-btn-primary {
background: var(--edoc-primary);
color: #fff;
}
.edoc-btn-primary:hover {
background: var(--edoc-primary-dark);
color: #fff;
}
.edoc-btn-muted {
background: var(--bs-secondary);
color: var(--edoc-text);
}
.edoc-btn-muted:hover {
background: #d8dadc;
color: var(--edoc-text);
}
.edoc-btn-block {
width: 100%;
}
.edoc-btn-sm {
padding: 6px 12px;
font-size: 0.8125rem;
}
.edoc-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--edoc-border);
border-radius: 8px;
color: var(--edoc-muted);
background: #fff;
}
.edoc-icon-btn:hover {
border-color: var(--edoc-primary);
color: var(--edoc-primary);
text-decoration: none;
}
/* ---------- auth screens ---------- */
.edoc-auth-body {
background: #fff;
}
/* Full viewport height, so the card can centre itself in the space left under the header. */
.edoc-auth-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.edoc-auth-header {
flex: 0 0 auto;
padding: 24px 32px;
}
.edoc-auth-logo {
/* logo-3.png is 216x42; kept at its natural ratio rather than scaled from a much larger file.
33px is the 30px this started at, up a tenth, matching .edoc-logo. */
height: 33px;
width: auto;
}
.edoc-auth-main {
flex: 1 1 auto;
display: flex;
padding: 24px;
}
.edoc-auth-card {
width: 100%;
max-width: 420px;
background: var(--edoc-card-bg);
border-radius: var(--edoc-radius);
padding: 28px;
/* margin:auto rather than align-items/justify-content on the parent: it centres on both axes
AND still lets the card scroll into view when it is taller than the viewport, which flex
centring clips at the top. */
margin: auto;
}
.edoc-auth-title {
margin: 0 0 20px;
font-size: 1.0625rem;
font-weight: 600;
}
.edoc-auth-hint {
margin: -8px 0 20px;
color: var(--edoc-text);
}
.edoc-auth-links {
margin-top: 12px;
text-align: center;
}
/* Black rather than the link blue. "Đổi mật khẩu" under the login button and "Đăng ký miễn phí"
below the divider are secondary routes off this screen, and in blue they competed with
"Bắt đầu" — the one thing a returning signer is here for.
"Đăng ký miễn phí" needs the override even though it is a button: the rule above only stops the
LINK colour reaching it, leaving .edoc-btn-muted's own #333. The plain link still underlines on
hover; the button does not, which is the anchor-button exclusion above doing its job. */
.edoc-auth-shell .edoc-auth-links a,
.edoc-auth-shell a.edoc-btn-muted {
color: #000;
}
.edoc-auth-shell .edoc-auth-links a:hover,
.edoc-auth-shell a.edoc-btn-muted:hover {
color: #000;
}
.edoc-auth-divider {
margin: 24px -28px;
border: none;
border-top: 1px solid var(--edoc-border);
}
.edoc-auth-done {
text-align: center;
}
.edoc-field {
margin-bottom: 18px;
}
.edoc-label {
display: block;
margin-bottom: 6px;
font-size: 0.875rem;
}
.edoc-required {
color: var(--bs-danger);
}
.edoc-input {
width: 100%;
/* Same metrics as template.css .form-control, so a field here matches one in the CRM. */
padding: 0.53125rem 0.75rem;
border: 1px solid var(--edoc-input-border);
border-radius: 8px;
background: var(--edoc-field-bg);
font-size: 0.875rem;
color: var(--edoc-text);
}
.edoc-input:focus {
outline: none;
border-color: var(--edoc-primary);
}
.edoc-field-hint {
margin-top: 6px;
font-size: 0.75rem;
color: var(--edoc-muted);
}
/* ---------- app shell ---------- */
.edoc-header {
background: #fff;
border-bottom: 1px solid var(--edoc-border);
padding: 12px 0;
margin-bottom: 20px;
}
.edoc-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* 31px: the 28px this started at, up a tenth. The avatar at the other end of the header went the
other way by the same proportion, 36px to 32px — see .edoc-avatar. */
.edoc-logo {
height: 31px;
width: auto;
}
.edoc-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.edoc-upsell-text {
color: var(--edoc-text);
}
.edoc-avatar-btn {
padding: 0;
border: none;
background: none;
cursor: pointer;
line-height: 0;
}
/* 32px: the 36px this started at, down a tenth. See .edoc-logo. */
.edoc-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.edoc-avatar-initials {
background: #a855c7;
color: #fff;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Account menu. Hand-rolled — see _Layout.cshtml for why Bootstrap's dropdown is not used. */
.edoc-menu {
position: relative;
}
.edoc-menu-panel {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 20;
min-width: 220px;
max-width: min(280px, calc(100vw - 24px));
padding: 12px 14px;
background: #fff;
border: 1px solid var(--edoc-border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
.edoc-menu.open .edoc-menu-panel {
display: block;
}
.edoc-menu-name {
font-weight: 600;
}
.edoc-menu-email {
font-size: 0.75rem;
color: var(--edoc-muted);
/* Long addresses must wrap inside the panel rather than widening it off-screen. */
word-break: break-all;
}
.edoc-menu-sep {
margin: 10px -14px;
border: none;
border-top: 1px solid var(--edoc-border);
}
.edoc-menu-item {
display: block;
padding: 6px 0;
color: var(--edoc-text);
}
.edoc-menu-item:hover {
color: var(--edoc-primary);
text-decoration: none;
}
/* Sign out is a POST form, so its menu row is a button. Stripped back to look exactly like the
anchors it sits among — a browser default button in a dropdown reads as a mistake. */
.edoc-menu-form {
margin: 0;
}
.edoc-menu-button {
width: 100%;
text-align: left;
background: none;
border: 0;
padding: 6px 0;
font: inherit;
cursor: pointer;
}
.edoc-panel {
background: var(--edoc-panel);
border-radius: var(--edoc-radius);
padding: 16px;
margin-bottom: 24px;
}
/* ---------- list toolbar ---------- */
.edoc-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.edoc-search {
position: relative;
flex: 0 1 320px;
}
.edoc-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--edoc-muted);
pointer-events: none;
}
.edoc-search-input {
padding-left: 34px;
/* Right padding leaves room for the clear button, which is overlaid on the field rather than
placed beside it — a sibling would have shortened the input on every screen instead of only
where there is something to clear. */
padding-right: 34px;
border-radius: 20px;
}
/* Shown by index.js only once the field has text in it.
:not([hidden]), because an author `display` beats the UA sheet's `[hidden] { display: none }`
whatever the specificity — an unguarded `display: inline-flex` here would leave the button
sitting over an empty field. Same guard as .edoc-modal-overlay. */
.edoc-search-clear:not([hidden]) {
display: inline-flex;
align-items: center;
justify-content: center;
}
.edoc-search-clear {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: var(--edoc-muted);
cursor: pointer;
font-size: 0.75rem;
}
.edoc-search-clear:hover {
background: var(--bs-secondary);
color: var(--edoc-text);
}
.edoc-status-filter {
display: flex;
align-items: center;
gap: 8px;
/* Pushes the filter group to the right edge of the toolbar. */
margin-left: auto;
}
.edoc-status-label {
color: var(--edoc-muted);
}
.edoc-chip {
padding: 7px 16px;
border: 1px solid var(--edoc-border);
border-radius: 8px;
background: #fff;
color: var(--edoc-text);
cursor: pointer;
font-size: 0.875rem;
}
.edoc-chip:hover {
border-color: var(--edoc-primary);
}
.edoc-chip.active {
background: var(--edoc-primary-soft);
border-color: #cfe2fb;
color: var(--edoc-primary-dark);
}
/* ---------- list table ---------- */
.edoc-table-wrap {
border: 1px solid var(--edoc-border);
/* Square bottom so the pager strip below reads as part of the same box. */
border-radius: var(--edoc-radius) var(--edoc-radius) 0 0;
/* The rows scroll inside this box, not the page: the toolbar, the column headings and the pager
all stay put while reading. The height itself comes from the flex chain below on a desktop
viewport; this floor only stops the box collapsing to nothing while that chain is inactive
(phone width, where the rows become stacked cards and the page scrolls instead). */
min-height: 200px;
overflow: auto;
}
/* The list fills the window exactly, with no dead strip under the pager.
This used to be `max-height: calc(100vh - 300px)` on the box above. 300px is a guess at the
height of the header, toolbar and pager, and it was too generous: the rows stopped scrolling
well short of the bottom and the leftover showed as empty page under the panel. Worse, the guess
is wrong by a different amount on every viewport — the toolbar wraps to two lines on a narrow
desktop window, and nothing about a constant can know that.
A flex chain from down to the scrolling box measures it instead: whatever is left after
the real header, the real toolbar and the real pager have taken their space is what the rows
get. `min-height: 0` at each level is what actually allows the shrink — a flex item defaults to
min-height:auto, which refuses to go below its content and would push the pager off screen.
Desktop only. Below 768px the table is a stack of cards, the whole page scrolls, and pinning it
to the viewport would trap the cards in a short box inside an already-scrolling page. */
@media (min-width: 768px) {
/* .edoc-body-fill is put on by the view that wants it (see Index.cshtml), not matched
with :has() from here. :has() would work in every desktop browser this portal supports, but a
body class says which page opted in, and the page is the thing that knows. */
.edoc-body-fill {
display: flex;
flex-direction: column;
/* height, NOT min-height. min-height lets the column grow past the viewport when its
content is taller, which is exactly what a full page of rows does — the table kept its
natural height, the page scrolled, and nothing was constrained to the window at all.
A definite height is what forces the shrink that makes the rows scroll inside the box. */
height: 100vh;
/* Nothing here may produce a second, outer scrollbar: the rows scroll inside
.edoc-table-wrap and the chrome around them is meant to stay put. */
overflow: hidden;
}
.edoc-body-fill > #main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
/* width: 100% is load-bearing, not tidying.
#main is .edoc-container, which centres itself with `margin: 0 auto`. Once became
a flex column, #main became a flex ITEM — and an auto margin on the cross axis SUPPRESSES
the default `align-items: stretch`. So instead of filling the body and being capped by
its own max-width, #main shrank to fit its contents: the list came out about as wide as
the table's 760px minimum while the header above it — not a flex item of anything — kept
the full container width. That is the mismatch where the header ran edge to edge and the
panel under it sat in a narrow column.
Restoring an explicit 100% puts the sizing back in the hands of max-width and the auto
margins: fill, cap, centre. `align-self: stretch` would NOT do it — auto margins win. */
width: 100%;
}
.edoc-panel-list {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
/* The panel now ends at the window edge, so the 24px that used to separate it from the
next block is exactly the dead space being removed. */
margin-bottom: 0;
}
.edoc-panel-list .edoc-table-wrap {
flex: 1 1 auto;
min-height: 0;
}
/* Neither the toolbar nor the pager may be squeezed by the growing table. */
.edoc-panel-list .edoc-toolbar,
.edoc-panel-list .edoc-pager {
flex: 0 0 auto;
}
}
.edoc-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.edoc-table thead th {
padding: 12px 16px;
/* Opaque on purpose — a sticky header with a transparent background lets the scrolling rows
show through it. */
background: var(--edoc-card-bg);
text-align: left;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.4px;
color: var(--edoc-muted);
border-bottom: 1px solid var(--edoc-border);
/* Stays put while the rows scroll inside .edoc-table-wrap. */
position: sticky;
top: 0;
z-index: 1;
}
.edoc-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--edoc-border);
vertical-align: middle;
}
.edoc-table tbody tr:last-child td {
border-bottom: none;
}
.edoc-col-actions {
/* Wide enough for the "Ký điện tử" button plus the menu button beside it. */
width: 180px;
text-align: right;
white-space: nowrap;
}
.edoc-col-actions .edoc-btn + .edoc-icon-btn {
margin-left: 6px;
}
/* Neither of these two columns may wrap.
"LOẠI TÀI LIỆU" broke after "LOẠI" and "Ký một phần" broke mid-phrase, so a row carrying either
was a line taller than the rest and the table read as ragged. They are given a width as well as
nowrap: without one the browser is free to hand the space to the document-name column and then
has nowhere to put these, and .edoc-table-wrap would scroll sideways instead. The name column
has no width of its own and absorbs whatever is left. */
.edoc-col-type {
width: 160px;
white-space: nowrap;
}
.edoc-col-status {
width: 130px;
white-space: nowrap;
}
.edoc-doc-name {
font-weight: 500;
color: var(--edoc-text);
}
.edoc-doc-name:hover {
color: var(--edoc-primary);
}
.edoc-doc-sub {
margin-top: 2px;
font-size: 0.75rem;
color: var(--edoc-muted);
}
/* "N tệp" beside the document name, for multi-file documents only. */
.edoc-file-badge {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
border-radius: 4px;
background: #f0f1f3;
font-size: 0.6875rem;
color: var(--edoc-muted);
vertical-align: 1px;
}
.edoc-due {
margin-left: 2px;
}
.edoc-sender-name {
font-weight: 500;
}
.edoc-type {
display: inline-flex;
align-items: center;
gap: 8px;
}
.edoc-type-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex: 0 0 8px;
}
.edoc-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 6px;
font-size: 0.8125rem;
}
.edoc-badge-signed {
background: var(--edoc-primary-soft);
color: var(--edoc-primary-dark);
}
.edoc-badge-pending {
background: #f0f1f3;
color: var(--edoc-muted);
}
.edoc-nodata {
padding: 56px 24px;
text-align: center;
}
.edoc-nodata-title {
color: var(--edoc-text);
margin-bottom: 6px;
}
.edoc-nodata-hint {
font-size: 0.8125rem;
color: var(--edoc-muted);
}
/* ---------- detail ---------- */
.edoc-detail-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--edoc-border);
}
.edoc-detail-title {
margin: 8px 0 4px;
font-size: 1.0625rem;
font-weight: 600;
}
.edoc-detail-sender {
color: var(--edoc-muted);
}
.edoc-detail-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.edoc-detail-files {
padding: 16px 0;
}
.edoc-detail-files-count {
margin-bottom: 10px;
}
.edoc-file-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: var(--edoc-card-bg);
border-radius: 8px;
margin-bottom: 8px;
}
.edoc-file-name {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.edoc-file-actions {
display: inline-flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.edoc-file-size {
font-size: 0.75rem;
color: var(--edoc-muted);
}
.edoc-detail-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
padding-top: 16px;
border-top: 1px solid var(--edoc-border);
}
.edoc-detail-col-divided {
padding-left: 32px;
border-left: 1px solid var(--edoc-border);
}
.edoc-detail-subtitle {
margin: 0 0 14px;
font-size: 0.9375rem;
font-weight: 600;
}
.edoc-meta {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px 12px;
margin: 0;
}
.edoc-meta dt {
color: var(--edoc-muted);
font-weight: 400;
}
.edoc-meta dd {
margin: 0;
font-weight: 500;
}
/* ---------- signers ---------- */
.edoc-signer {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
}
.edoc-signer-main {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
}
.edoc-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex: 0 0 20px;
margin-top: 2px;
border: 1px solid var(--edoc-border);
border-radius: 4px;
background: #fff;
font-size: 0.75rem;
}
.edoc-check-on {
background: var(--edoc-primary);
border-color: var(--edoc-primary);
color: #fff;
}
.edoc-signer-text {
min-width: 0;
}
.edoc-signer-name {
display: block;
font-weight: 500;
}
.edoc-signer-email {
display: block;
font-size: 0.8125rem;
color: var(--edoc-muted);
word-break: break-all;
}
.edoc-you {
margin-left: 6px;
padding: 1px 6px;
border-radius: 4px;
background: #f0f1f3;
font-size: 0.6875rem;
font-weight: 400;
color: var(--edoc-muted);
}
/* Same type scale as the "Thông tin chi tiết" column beside it — the two columns sit side by
side, so differing sizes read as a mistake. */
.edoc-signer-date {
flex: 0 0 auto;
color: var(--edoc-muted);
text-align: right;
}
/* =========================================================================
Narrow screens
========================================================================= */
/* ---------- tablet: the two detail columns stop fitting side by side ---------- */
@media (max-width: 900px) {
.edoc-detail-columns {
grid-template-columns: 1fr;
gap: 0;
}
.edoc-detail-col-divided {
padding-left: 0;
border-left: none;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--edoc-border);
}
.edoc-toolbar {
/* Filters drop to their own line before the table starts scrolling. */
row-gap: 12px;
}
.edoc-status-filter {
margin-left: 0;
}
}
/* ---------- phone ---------- */
@media (max-width: 767px) {
.edoc-container {
padding: 0 12px;
}
/* --- app header --- */
.edoc-header {
padding: 10px 0;
margin-bottom: 12px;
}
.edoc-header-inner {
gap: 8px;
}
.edoc-logo {
/* 26px: 24px up a tenth, matching the desktop change. */
height: 26px;
}
/* The upsell sentence is the first thing to go — the button still carries the message. */
.edoc-upsell-text {
display: none;
}
.edoc-header-right {
gap: 8px;
}
/* --- toolbar --- */
.edoc-panel {
padding: 12px;
border-radius: 8px;
}
.edoc-toolbar {
gap: 10px;
}
.edoc-toolbar > .edoc-btn-primary {
/* Full-width primary action reads better than a stranded pill. */
flex: 1 1 100%;
}
.edoc-search {
flex: 1 1 100%;
}
.edoc-status-filter {
width: 100%;
/* Chips scroll sideways instead of wrapping onto three cramped lines. */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.edoc-status-label {
display: none;
}
.edoc-chip {
flex: 0 0 auto;
}
/* --- list: table collapses into one card per document ---
A 5-column table on a 375px screen can only scroll sideways, which hides the status and
actions exactly when they matter. Each row becomes a stacked card instead, with the column
heading printed from the cell's data-label since the thead is gone. */
.edoc-table-wrap {
border: none;
border-radius: 0;
/* No inner scroll on a phone: the rows are stacked cards here, and a short scrolling box
inside an already-scrolling page is worse than letting the cards flow. */
max-height: none;
min-height: 0;
overflow: visible;
}
.edoc-table,
.edoc-table tbody,
.edoc-table tbody tr,
.edoc-table tbody td {
display: block;
width: auto;
}
.edoc-table {
min-width: 0;
}
.edoc-table thead {
display: none;
}
.edoc-table tbody tr {
position: relative;
border: 1px solid var(--edoc-border);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 10px;
}
.edoc-table tbody td {
padding: 6px 0;
border-bottom: none;
}
.edoc-table tbody td[data-label]::before {
content: attr(data-label);
display: block;
margin-bottom: 2px;
font-size: 0.6875rem;
letter-spacing: 0.4px;
color: var(--edoc-muted);
}
/* The document name is the card's title, so it does not need a label above it. */
.edoc-table tbody td:first-child::before {
display: none;
}
.edoc-table tbody td:first-child {
padding-top: 0;
/* Room for the action buttons pinned top-right. */
padding-right: 80px;
}
.edoc-doc-name {
font-size: 0.9375rem;
}
.edoc-col-actions {
position: absolute;
top: 10px;
right: 12px;
width: auto;
padding: 0;
}
.edoc-pager {
overflow-x: auto;
}
/* --- detail --- */
.edoc-detail-head {
flex-direction: column;
align-items: stretch;
}
.edoc-detail-actions {
/* Side-by-side full-width buttons: both are primary actions here. */
margin-top: 4px;
}
.edoc-detail-actions .edoc-btn {
flex: 1 1 0;
}
.edoc-detail-title {
font-size: 1rem;
}
.edoc-file-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.edoc-file-name {
max-width: 100%;
}
.edoc-file-actions {
width: 100%;
justify-content: space-between;
}
.edoc-meta {
grid-template-columns: 1fr;
gap: 2px;
}
.edoc-meta dt {
margin-top: 8px;
}
.edoc-signer {
flex-direction: column;
gap: 4px;
}
.edoc-signer-date {
text-align: left;
/* Lines up under the signer's name, past the status box. */
padding-left: 30px;
}
/* --- auth --- */
.edoc-auth-header {
padding: 16px;
}
.edoc-auth-main {
padding: 12px 16px 32px;
}
.edoc-auth-card {
padding: 20px;
}
.edoc-auth-divider {
margin: 20px -20px;
}
}
/* ---------- very small phones ---------- */
@media (max-width: 380px) {
.edoc-btn {
padding: 9px 12px;
}
.edoc-detail-actions {
flex-direction: column;
}
.edoc-table tbody td:first-child {
/* Two icon buttons no longer fit beside a title this narrow. */
padding-right: 0;
}
.edoc-col-actions {
position: static;
margin-top: 10px;
text-align: left;
}
}
/* ---------- extra badge states ---------- */
/* Signed by some parties but not all — its own colour so it is not mistaken for either end state. */
.edoc-badge-partial {
background: #fff4e5;
color: #b54708;
}
.edoc-badge-overdue {
background: #fdeceb;
color: var(--bs-danger);
}
/* ---------- disabled affordances ----------
Kept visible rather than hidden: an action that is absent on some rows and present on others
reads as a bug, whereas a greyed-out control with a tooltip explains itself. */
.edoc-btn:disabled,
.edoc-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
.edoc-icon-btn-disabled {
opacity: 0.45;
cursor: not-allowed;
}
.edoc-icon-btn-disabled:hover {
border-color: var(--edoc-border);
color: var(--edoc-muted);
}
/* Sits beside the icon buttons in the actions column. */
.edoc-sign-btn {
margin-right: 6px;
vertical-align: middle;
}
/* Pager footer, matching the CRM grids: a bordered strip attached under the table rather than a
floating row of links. Kendo's own kendo.default-main.min.css paints the buttons and the
page-size dropdown; this only supplies the container. */
.edoc-pager {
margin-top: -1px;
border: 1px solid var(--edoc-border);
border-radius: 0 0 var(--edoc-radius) var(--edoc-radius);
background: #fff;
overflow-x: auto;
}
.edoc-pager .k-pager-wrap {
border: none;
background: transparent;
}
/* Kendo's Default theme accents everything in coral (#ff6358), which is what turns the pager
numbers red. template.css does not override it either — Talgent.Portal simply has no pager — so
the recolouring lives here, scoped to .edoc-pager so nothing else is touched. Loaded after
kendo.default-main.min.css, hence no !important needed.
Both .k-selected and .k-state-selected are targeted: this Kendo build ships both class names and
which one lands on the active page depends on the widget version. */
.edoc-pager .k-pager-wrap,
.edoc-pager .k-pager,
.edoc-pager .k-pager-info {
color: var(--edoc-muted);
}
.edoc-pager .k-link,
.edoc-pager .k-pager-nav,
.edoc-pager .k-pager-numbers .k-link {
color: var(--edoc-text);
border-radius: 6px;
}
.edoc-pager .k-link:hover,
.edoc-pager .k-pager-nav:hover,
.edoc-pager .k-pager-numbers .k-link:hover {
background-color: var(--edoc-primary-soft);
color: var(--edoc-primary-dark);
}
.edoc-pager .k-pager-numbers .k-link.k-selected,
.edoc-pager .k-pager-numbers .k-link.k-state-selected,
.edoc-pager .k-pager-numbers .k-selected > .k-link,
.edoc-pager .k-pager-numbers .k-state-selected > .k-link {
background-color: var(--edoc-primary);
border-color: var(--edoc-primary);
color: #fff;
}
/* Arrows sit quieter than the numbers, and a disabled one must not look clickable. */
.edoc-pager .k-pager-nav.k-disabled,
.edoc-pager .k-pager-nav.k-state-disabled {
color: var(--edoc-muted);
opacity: 0.45;
}
/* The items-per-page dropdown picks up the same coral on focus. */
.edoc-pager .k-picker,
.edoc-pager .k-dropdown-wrap,
.edoc-pager .k-dropdownlist {
border-color: var(--edoc-input-border);
}
.edoc-pager .k-picker:focus-within,
.edoc-pager .k-dropdown-wrap.k-state-focused,
.edoc-pager .k-dropdownlist.k-focus {
border-color: var(--edoc-primary);
box-shadow: none;
}
/* The items-per-page dropdown's popup is appended to , so it sits outside .edoc-pager and the
scoped rules above cannot reach it — its selected row would stay coral.
.edoc-pager-popup is stamped onto that one popup's list element in index.js after the pager is
built. Keying off .k-animation-container instead, as this did, would have repainted every Kendo
list popup added to this app from here on, which is exactly the kind of bleed that makes a
stylesheet impossible to reason about later. */
.edoc-pager-popup .k-list-item.k-selected,
.edoc-pager-popup .k-item.k-state-selected {
background-color: var(--edoc-primary);
color: #fff;
}
.edoc-pager-popup .k-list-item.k-hover,
.edoc-pager-popup .k-item.k-state-hover {
background-color: var(--edoc-primary-soft);
color: var(--edoc-primary-dark);
}
/* ---------------------------------------------------------------------------------------------
Toasts (Kendo Notification)
---------------------------------------------------------------------------------------------
Markup lives in Views/Shared/_NotificationTemplates.cshtml. These replace the Bootstrap
alert/alert-danger classes carried over from Talgent.Portal: that app loads Bootstrap's
stylesheet and this one deliberately does not, so nothing defined .alert and every toast — error
and success alike — rendered as unstyled black text on the page background. */
.edoc-toast {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 280px;
max-width: 420px;
padding: 12px 14px;
border-radius: 6px;
border-left: 4px solid transparent;
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
font-size: 13px;
line-height: 1.45;
}
.edoc-toast-icon {
flex: 0 0 auto;
margin-top: 1px;
font-size: 16px;
}
.edoc-toast-msg {
/* Long server messages wrap instead of stretching the toast off-screen. */
word-break: break-word;
}
.edoc-toast-error {
border-left-color: #d9534f;
color: #842029;
}
.edoc-toast-error .edoc-toast-icon {
color: #d9534f;
}
.edoc-toast-success {
border-left-color: #2e9e5b;
color: #10603a;
}
.edoc-toast-success .edoc-toast-icon {
color: #2e9e5b;
}
.edoc-toast-warning {
border-left-color: #e0a300;
color: #7a5b00;
}
.edoc-toast-warning .edoc-toast-icon {
color: #e0a300;
}
.edoc-toast-info {
border-left-color: var(--edoc-primary);
color: var(--edoc-primary-dark);
}
.edoc-toast-info .edoc-toast-icon {
color: var(--edoc-primary);
}
/* Kendo wraps each toast in its own container; strip its chrome so only .edoc-toast shows.
Scoped to this app's single notification host rather than every .k-notification on the page: the
unscoped version would have stripped the border, background and shadow from any Kendo
notification widget added here later, which is exactly the selector bleed the pager overrides
above were already narrowed to avoid. */
.edoc-toast-host {
position: fixed;
left: 60px;
bottom: 60px;
/* Above the Kendo loading overlay, which the document list puts up. */
z-index: 10010;
display: flex;
/* Newest toast nearest the bottom edge, where the eye already is. */
flex-direction: column-reverse;
gap: 8px;
/* The host spans nothing of its own, so it never blocks clicks when empty. */
pointer-events: none;
}
.edoc-toast-host .k-notification {
/* The host itself is click-through so it never blocks the page when empty; the toasts are not,
so their close button still works. */
pointer-events: auto;
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
}
/* ---------------------------------------------------------------------------------------------
Back link (document detail)
--------------------------------------------------------------------------------------------- */
.edoc-back {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
color: var(--edoc-muted);
font-weight: 500;
}
.edoc-back:hover {
color: var(--edoc-primary);
text-decoration: none;
}
.edoc-back i {
font-size: 12px;
}
/* =========================================================================
Popup menu
========================================================================= */
/* One element on , positioned by clients/shared/popupMenu.js — see the note there for why
the panel does not live inside the row that opens it (.edoc-table-wrap scrolls, and would clip
it on every row but the last). */
.edoc-popup-menu {
position: fixed;
z-index: 1200;
min-width: 190px;
padding: 6px;
background: #fff;
border: 1px solid var(--edoc-border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
box-sizing: border-box;
}
.edoc-popup-menu-item {
display: flex;
/* flex-start, not center: an item carrying a reason under its label is two lines tall, and the
icon belongs beside the label rather than beside the middle of the pair. */
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: 6px;
background: none;
color: var(--edoc-text);
font: inherit;
text-align: left;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
}
.edoc-popup-menu-label {
display: flex;
flex-direction: column;
gap: 2px;
}
/* The reason a disabled item is disabled, printed rather than left to a `title` tooltip that a
touch device can never show. Allowed to wrap — it is a sentence, not a label — against the
nowrap the item sets for the label above it. */
.edoc-popup-menu-note {
max-width: 220px;
color: var(--edoc-muted);
font-size: 0.75rem;
white-space: normal;
}
.edoc-popup-menu-item:hover {
background: var(--edoc-card-bg);
}
.edoc-popup-menu-item:disabled {
color: var(--edoc-muted);
cursor: not-allowed;
opacity: 0.6;
}
.edoc-popup-menu-item:disabled:hover {
background: none;
}
/* Deleting is separated from the two downloads above it, so the destructive item is never the one
a thumb lands on by accident. */
.edoc-popup-menu-item-danger {
color: var(--bs-danger);
}
.edoc-popup-menu-item-danger:hover {
background: var(--edoc-danger-soft);
}
.edoc-popup-menu-sep {
height: 1px;
margin: 6px 4px;
background: var(--edoc-border);
}
/* =========================================================================
Confirm dialog
========================================================================= */
.edoc-modal-overlay {
position: fixed;
inset: 0;
z-index: 1300;
padding: 16px;
background: rgba(0, 0, 0, 0.35);
}
/* :not([hidden]), because an author `display` beats the UA sheet's `[hidden] { display: none }`
whatever the specificity — an unguarded `display: flex` here would leave the dialog on screen
permanently, backdrop and all. */
.edoc-modal-overlay:not([hidden]) {
display: flex;
/* The `margin: auto` on the dialog centres it AND lets it scroll into view when it is taller
than the viewport — but only if something here actually scrolls. Without this the delete
confirmation, which is three paragraphs on an unsigned document, had its top pushed off the
screen on a short window with no way to reach it. */
overflow: auto;
/* Keeps a flick at the end of the dialog from scrolling the list behind it. */
overscroll-behavior: contain;
}
.edoc-modal {
/* margin:auto rather than centring on the flex parent, for the same reason .edoc-auth-card uses
it: it centres on both axes and still lets the box scroll into view if it is ever taller than
the viewport, which flex centring clips at the top. */
margin: auto;
width: 100%;
max-width: 380px;
padding: 22px;
background: #fff;
border-radius: var(--edoc-radius);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
.edoc-modal-message {
margin-bottom: 20px;
font-size: 0.9375rem;
/* The message is set with textContent (never innerHTML — it can carry a document name), so the
paragraph breaks in it are real newline characters and need pre-line to survive. Normal
wrapping still applies to the text within each paragraph. */
white-space: pre-line;
}
.edoc-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* =========================================================================
Destructive action
========================================================================= */
.edoc-btn-danger {
background: var(--bs-danger);
color: #fff;
}
.edoc-btn-danger:hover {
background: var(--edoc-danger-dark);
color: #fff;
}
/* =========================================================================
Account screens inside the app shell
========================================================================= */
/* Đổi mật khẩu reuses .edoc-auth-card, which is centred by `margin: auto` inside the flex column of
the login shell. There is no such column here, so the horizontal centring is restated. */
.edoc-account-card {
margin: 0 auto 24px;
}
/* The account menu's own items are dark, not link-blue: .edoc-header a would otherwise paint the
new "Đổi mật khẩu" anchor differently from the "Đăng xuất" button sitting under it, which is a
and never picked up that rule. */
.edoc-header a.edoc-menu-item {
color: var(--edoc-text);
}
.edoc-header a.edoc-menu-item:hover {
color: var(--edoc-primary);
text-decoration: none;
}
/* =========================================================================
Inline explanation on the detail screen
========================================================================= */
/* Why the download button above is disabled, said on the page.
A `title` tooltip needs a hover, and there is no hover on a phone — which is where this portal is
mostly opened, so the disabled button explained itself to nobody.
A block of its own under .edoc-detail-head, NOT a flex item inside .edoc-detail-actions. In there
it was sized by a `flex: 0 0 auto` group, which grew to fit the whole sentence on one line —
stretching the actions column to roughly 500px, squeezing the document title into a sliver, and
never wrapping however narrow the window got. Out here it is an ordinary block at panel width and
wraps like the sentence it is. */
.edoc-detail-note {
display: flex;
align-items: flex-start;
gap: 6px;
padding-top: 12px;
color: var(--edoc-muted);
font-size: 0.8125rem;
line-height: 1.5;
}
/* The icon must not be squashed when the sentence beside it wraps to two lines. */
.edoc-detail-note > i {
flex: 0 0 auto;
margin-top: 2px;
}