/* ================================================================
Shared modern skin for the legacy screens
----------------------------------------------------------------
The modules modernised so far each carry their own sheet (cam-ram.css,
administration.css, ...). The screens still on the old look share one
markup vocabulary - Bootstrap panels, form-horizontal labels, Kendo
tab strips, grids and windows inside .boxFix - so they share this
sheet rather than growing another copy per module.
Opting in, per page:
1. @Html.VersionedStyle("~/Content/lmis-modern.css")
2. wrap the page in ...
3. replace the old breadcrumb with the .lm-hero block
(see Areas/SDP/Views/Accreditation/ProviderApplication.cshtml)
Popups: Kendo reparents windows to , so .lm-page cannot reach
them. A page that opts in also adds lm-body to (the hero block
does it) and the .k-window rules below are keyed on that.
EVERY selector starts with .lm-page or body.lm-body, so no screen that
has not opted in can change. Deliberately additive, as cam-ram.css is:
it restyles what the partials already render and leaves layout alone -
no row margins, column widths, floats, or display changes on anything
Kendo owns - because these are hundreds of partials that cannot each be
checked by eye.
================================================================ */
.lm-page {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #22364e;
padding-bottom: 22px;
}
/* The old breadcrumb line, kept in the DOM for any script that still
writes to it but never shown once the hero is in place. */
.lm-page > h5#hTitle,
.lm-page > .lm-legacy-title { display: none; }
/* -----------------------------------------------------------------
Hero
----------------------------------------------------------------- */
.lm-page .lm-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin: 6px 0 16px;
padding: 19px 24px;
border-radius: 14px;
color: #fff;
background: linear-gradient(135deg, #10456f 0%, #1a5c88 52%, #15678f 100%);
box-shadow: 0 12px 30px rgba(11, 29, 58, .20);
}
.lm-page .lm-hero::after {
content: '';
position: absolute;
right: -70px;
top: -110px;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(172, 192, 121, .24) 0%, transparent 68%);
pointer-events: none;
}
/* Module accents - same shape, a different hue so modules are told apart. */
.lm-page .lm-hero.is-teal { background: linear-gradient(135deg, #0f4c5c 0%, #17687a 52%, #1d7d86 100%); }
.lm-page .lm-hero.is-green { background: linear-gradient(135deg, #14532d 0%, #1b6b3c 52%, #2a7f4a 100%); }
.lm-page .lm-hero.is-plum { background: linear-gradient(135deg, #4a1d5c 0%, #62307a 52%, #7a3d8c 100%); }
.lm-page .lm-hero.is-slate { background: linear-gradient(135deg, #1e293b 0%, #334155 52%, #3f5068 100%); }
.lm-page .lm-hero.is-ember { background: linear-gradient(135deg, #7c2d12 0%, #9a3b17 52%, #b45309 100%); }
.lm-page .lm-hero-icon {
position: relative;
z-index: 1;
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
background: rgba(255, 255, 255, .16);
border: 2px solid rgba(255, 255, 255, .34);
text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.lm-page .lm-hero-id { position: relative; z-index: 1; min-width: 0; flex: 1 1 320px; }
.lm-page .lm-crumb {
margin: 0 0 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: .7px;
text-transform: uppercase;
color: #cfe4f5;
text-shadow: 0 1px 2px rgba(0, 0, 0, .30);
}
.lm-page .lm-crumb .fa { margin: 0 6px; opacity: .7; }
.lm-page .lm-crumb b { color: #fff; font-weight: 800; }
.lm-page .lm-hero h1 {
margin: 0;
font-size: 21px;
font-weight: 800;
letter-spacing: -.4px;
line-height: 1.2;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.lm-page .lm-hero-sub {
margin: 5px 0 0;
max-width: 820px;
font-size: 12.5px;
line-height: 1.5;
color: #dbe9f5;
}
.lm-page .lm-hero-actions {
position: relative;
z-index: 1;
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.lm-page .lm-hero-actions .btn {
background: rgba(255, 255, 255, .95);
color: #0f3b62;
border: 0;
}
.lm-page .lm-hero-actions .btn.lm-ghost {
background: rgba(255, 255, 255, .12);
color: #fff;
border: 1px solid rgba(255, 255, 255, .36);
}
/* -----------------------------------------------------------------
.boxFix undo
Site.css forces every descendant of .boxFix to black text, 2px side
padding and a translate3d layer. The colour fights every modern
accent below, so it is handed back to the cascade inside .lm-page.
Padding and box-sizing stay: the legacy grids are sized around them.
----------------------------------------------------------------- */
.lm-page .boxFix *,
.lm-page .boxFix *::before,
.lm-page .boxFix *::after { color: inherit; -webkit-transform: none; }
.lm-page .boxFix { color: #22364e; }
.lm-page .boxFix .field-validation-error,
.lm-page .boxFix .field-validation-error *,
.lm-page .boxFix .text-danger { color: #b91c1c; }
/* -----------------------------------------------------------------
Panels become cards
----------------------------------------------------------------- */
.lm-page .panel {
border: 1px solid #e6ebf2;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(16, 34, 56, .04);
background: #fff;
}
.lm-page .panel-heading,
.lm-page .panel-primary > .panel-heading,
.lm-page .panel-default > .panel-heading,
.lm-page .panel-info > .panel-heading,
.lm-page .panel-success > .panel-heading {
background: #f8fafc !important;
background-image: none !important;
border-bottom: 1px solid #e6ebf2 !important;
border-color: #e6ebf2 !important;
border-radius: 12px 12px 0 0;
color: #3d4d61 !important;
}
.lm-page .panel-heading,
.lm-page .panel-heading strong,
.lm-page .panel-heading .panel-title,
.lm-page .panel-heading h4,
.lm-page .panel-heading h5 {
font-size: 11.5px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
color: #3d4d61;
}
/* The card title: an accent rule down the left edge and the icon in a
tinted chip rather than a bare glyph floating next to the words. The
heading keeps its small uppercase treatment - it is an eyebrow, not a
headline - but it now has an edge to sit against.
This sheet is shared by every screen that opts in, so nothing here
changes layout: no new box model, no size change, only colour, a chip
and a 3px border. A heading that was readable before is readable now. */
.lm-page .panel-heading {
position: relative;
padding-left: 16px !important;
}
.lm-page .panel-heading:before {
content: '';
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, #1668b8, #0f8bbd);
}
.lm-page .panel-heading .fa {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 7px;
background: #e7f1fb;
color: #1668b8;
font-size: 11px;
margin-right: 9px;
vertical-align: -5px;
}
.lm-page .panel-heading a { text-decoration: none; color: inherit; }
.lm-page .panel-heading a:hover { color: #1668b8; }
.lm-page .panel-footer { background: #f8fafc; border-top: 1px solid #eef2f7; border-radius: 0 0 12px 12px; }
.lm-page .well {
background: #f8fafc;
border: 1px solid #e6ebf2;
border-radius: 12px;
box-shadow: none;
}
.lm-page fieldset {
border: 1px solid #e6ebf2;
border-radius: 12px;
padding: 10px 16px 14px;
background: #fff;
}
.lm-page fieldset legend {
width: auto;
margin: 0;
padding: 0 8px;
border: 0;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
color: #3d4d61;
}
/* -----------------------------------------------------------------
Labels and fields
----------------------------------------------------------------- */
.lm-page .control-label,
.lm-page .form-horizontal label.control-label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .3px;
text-transform: uppercase;
color: #5b6b7f !important;
}
.lm-page .form-control {
border-radius: 7px;
border: 1px solid #d9e2ec;
font-size: 13px;
color: #243b55;
box-shadow: none;
}
.lm-page .form-control:focus { border-color: #1668b8; box-shadow: 0 0 0 3px rgba(22, 104, 184, .10); }
.lm-page .form-control[readonly], .lm-page .form-control[disabled] { background: #f6f8fb; color: #46586d; }
.lm-page .form-control-static { font-size: 13px; color: #243b55; }
.lm-page hr { border-top: 1px solid #eef2f7; }
.lm-page .instruction { color: #5b6b7f; font-size: 13px; }
.lm-page .k-dropdown-wrap,
.lm-page .k-picker-wrap,
.lm-page .k-numeric-wrap,
.lm-page .k-multiselect-wrap {
border-color: #d9e2ec !important;
border-radius: 7px !important;
background: #fff !important;
background-image: none !important;
box-shadow: none !important;
}
.lm-page .k-dropdown-wrap.k-state-focused,
.lm-page .k-picker-wrap.k-state-focused,
.lm-page .k-numeric-wrap.k-state-focused { border-color: #1668b8 !important; box-shadow: 0 0 0 3px rgba(22, 104, 184, .10) !important; }
.lm-page .k-dropdown-wrap .k-select,
.lm-page .k-picker-wrap .k-select,
.lm-page .k-numeric-wrap .k-select { background: transparent !important; border-color: transparent !important; }
.lm-page .k-dropdown-wrap .k-input,
.lm-page .k-picker-wrap .k-input { color: #243b55; }
.lm-page .k-autocomplete,
.lm-page .k-textbox {
border-color: #d9e2ec !important;
border-radius: 7px !important;
background-image: none !important;
box-shadow: none !important;
}
/* -----------------------------------------------------------------
Buttons - every fill declares its own foreground, so a button can
never end up white-on-white if a theme changes underneath it.
----------------------------------------------------------------- */
.lm-page .btn {
border-radius: 8px;
border: 0;
font-size: 12.5px;
font-weight: 700;
padding: 8px 17px;
box-shadow: none;
text-shadow: none;
background-image: none;
color: #1f2d3d;
}
.lm-page .btn .fa { margin-right: 6px; }
.lm-page .btn-default { background: #fff; border: 1px solid #cfd8e3; color: #1f2d3d; }
.lm-page .btn-default:hover { background: #f5f8fc; color: #1668b8; }
.lm-page .btn-primary, .lm-page .btn-success,
.lm-page .btn-danger, .lm-page .btn-info { color: #fff !important; }
.lm-page .btn-primary { background: linear-gradient(135deg, #1c5eaa, #0e73a0); }
.lm-page .btn-success { background: linear-gradient(135deg, #15803d, #22a355); }
.lm-page .btn-danger { background: linear-gradient(135deg, #c0332b, #a4262c); }
.lm-page .btn-info { background: linear-gradient(135deg, #0e7490, #0891b2); }
.lm-page .btn-warning { background: linear-gradient(135deg, #e0940f, #f0ad4e); color: #3d2600 !important; }
.lm-page .btn:hover { filter: brightness(1.06); }
.lm-page .btn[disabled], .lm-page .btn.disabled { opacity: .55; filter: none; }
.lm-page .k-button {
border-radius: 7px;
border: 1px solid #cfd8e3;
background: #fff;
background-image: none;
color: #1668b8 !important;
font-size: 12px;
font-weight: 700;
box-shadow: none;
text-shadow: none;
}
.lm-page .k-button:hover { background: #eef6ff; border-color: #1668b8; color: #0a3564 !important; }
.lm-page .k-button.k-primary {
background: linear-gradient(135deg, #1c5eaa, #0e73a0);
border-color: transparent;
color: #fff !important;
}
.lm-page .k-button.btn-primary,
.lm-page .k-button.btn-success {
background: linear-gradient(135deg, #1c5eaa, #0e73a0);
border-color: transparent;
color: #fff !important;
padding: 8px 17px;
text-transform: none;
}
.lm-page .k-button.btn-success { background: linear-gradient(135deg, #15803d, #22a355); }
.lm-page .k-button.btn-primary:hover,
.lm-page .k-button.btn-success:hover { color: #fff !important; filter: brightness(1.06); }
.lm-page .k-button.k-state-disabled,
.lm-page .k-button[disabled] { opacity: .5; }
/* -----------------------------------------------------------------
Tab strips
----------------------------------------------------------------- */
.lm-page .k-tabstrip { border: 0 !important; background: transparent !important; box-shadow: none !important; }
/* A segmented control, not folder tabs: the strip is a tinted track and the
active tab is a raised white pill inside it. Same treatment the trade test
centre screens carry, so a person moving between them lands on something
they recognise.
Every rule needs !important - Kendo 2015.3 ships its own theme with
equally specific selectors and loads after this sheet. */
.lm-page .k-tabstrip-items {
background: #eef2f7 !important;
background-image: none !important;
border: 1px solid #e4e9f0 !important;
border-radius: 12px !important;
padding: 4px !important;
display: inline-flex !important;
flex-wrap: wrap;
gap: 3px;
}
.lm-page .k-tabstrip-items .k-item {
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 9px !important;
margin: 0 !important;
box-shadow: none !important;
top: 0 !important;
}
.lm-page .k-tabstrip-items .k-item > .k-link {
display: inline-flex !important;
align-items: center;
gap: 8px;
color: #5b6b7d !important;
font-size: 12.5px;
font-weight: 600;
padding: 9px 15px !important;
border: 0 !important;
border-radius: 9px !important;
line-height: 1 !important;
text-shadow: none !important;
text-transform: none !important;
letter-spacing: 0;
transition: color .16s ease, background .16s ease;
}
.lm-page .k-tabstrip-items .k-item:hover { background: rgba(255, 255, 255, .6) !important; background-image: none !important; }
.lm-page .k-tabstrip-items .k-item:hover > .k-link { color: #14304f !important; }
.lm-page .k-tabstrip-items .k-item.k-state-active,
.lm-page .k-tabstrip-items .k-item.k-state-selected {
background: #fff !important;
background-image: none !important;
box-shadow: 0 1px 2px rgba(16, 34, 56, .10), 0 2px 8px rgba(16, 34, 56, .06) !important;
}
.lm-page .k-tabstrip-items .k-item.k-state-active > .k-link,
.lm-page .k-tabstrip-items .k-item.k-state-selected > .k-link {
color: #1668b8 !important;
background: transparent !important;
font-weight: 700;
}
/* The panel below the strip is its own card now that the strip is not
attached to it. */
.lm-page .k-tabstrip > .k-content {
border: 1px solid #e4e9f0 !important;
border-radius: 12px !important;
background: #fff !important;
margin-top: 10px !important;
padding: 16px !important;
}
/* Tab labels carry an icon on some screens. Kendo puts the label in an
anchor, so the icon is spaced there rather than given the chip treatment
the card titles use. */
.lm-page .k-tabstrip-items .k-item > .k-link > .fa { margin-right: 0; opacity: .75; }
/* One tab in the strip carrying the accent a button used to.
On the provider profile the Enrolments tab replaced a green "View SDP
Enrolled Learners" button that navigated away to a screen the tab now
contains, so the colour moved with the job. The class is put on by a script
on that page, which finds the tab by its own icon.
Deliberately NO white text anywhere in here. The first version set the
selected tab's text to white on a green background, the background rule did
not take, and the label vanished into the white pill - a tab with no words
on it. Dark green on a light tint reads whether or not every rule below
lands, so the worst case is a tab that is not very green rather than a tab
you cannot read.
!important throughout for the same reason as the rules above: Kendo 2015.3
ships its own theme with equally specific selectors and loads after this
sheet. */
.lm-page .k-tabstrip-items .k-item.lm-tab-accent > .k-link { color: #15803d !important; }
.lm-page .k-tabstrip-items .k-item.lm-tab-accent > .k-link > .fa { color: #15803d !important; opacity: 1; }
.lm-page .k-tabstrip-items .k-item.lm-tab-accent:hover { background: rgba(21, 128, 61, .10) !important; background-image: none !important; }
.lm-page .k-tabstrip-items .k-item.lm-tab-accent:hover > .k-link { color: #14532d !important; }
/* Selected: a green pill with a green underline, still dark green text. */
.lm-page .k-tabstrip-items .k-item.lm-tab-accent.k-state-active,
.lm-page .k-tabstrip-items .k-item.lm-tab-accent.k-state-selected {
background: #e7f5ec !important;
background-image: none !important;
box-shadow: inset 0 -2px 0 #15803d, 0 1px 2px rgba(16, 34, 56, .10) !important;
}
.lm-page .k-tabstrip-items .k-item.lm-tab-accent.k-state-active > .k-link,
.lm-page .k-tabstrip-items .k-item.lm-tab-accent.k-state-selected > .k-link { color: #14532d !important; }
.lm-page .k-tabstrip-items .k-item.k-state-active > .k-link > .fa,
.lm-page .k-tabstrip-items .k-item.k-state-selected > .k-link > .fa { opacity: 1; }
.lm-page .k-tabstrip > .k-content,
.lm-page .k-tabstrip .k-tabstrip-content {
border: 1px solid #e4e9f0 !important;
border-top: 0 !important;
background: #fff !important;
border-radius: 0 0 12px 12px;
padding: 14px 16px !important;
}
/* A tab strip nested inside a tab reads as a sub-navigation, not a second
heavy bar: pills rather than tabs. */
.lm-page .k-tabstrip .k-tabstrip .k-tabstrip-items {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid #eef2f7 !important;
border-radius: 0;
padding: 0 0 6px !important;
}
.lm-page .k-tabstrip .k-tabstrip .k-tabstrip-items .k-item > .k-link {
padding: 6px 13px !important;
border-radius: 999px !important;
border-bottom: 0 !important;
}
.lm-page .k-tabstrip .k-tabstrip .k-tabstrip-items .k-item.k-state-active > .k-link {
background: #e8f1fb !important;
}
.lm-page .k-tabstrip .k-tabstrip > .k-content {
border: 0 !important;
padding: 12px 0 0 !important;
}
/* -----------------------------------------------------------------
Panel bars (the accordions some forms use)
----------------------------------------------------------------- */
.lm-page .k-panelbar { border-color: #e6ebf2 !important; border-radius: 12px; overflow: hidden; background: #fff !important; }
.lm-page .k-panelbar > .k-item > .k-link {
background: #f8fafc !important;
background-image: none !important;
color: #3d4d61 !important;
font-size: 12px;
font-weight: 800;
letter-spacing: .4px;
text-transform: uppercase;
border-color: #e6ebf2 !important;
}
.lm-page .k-panelbar > .k-item > .k-link.k-state-selected,
.lm-page .k-panelbar > .k-item > .k-link.k-state-hover { background: #eef4fb !important; color: #1668b8 !important; }
/* -----------------------------------------------------------------
Grids
----------------------------------------------------------------- */
.lm-page .k-grid { border: 1px solid #e6ebf2; border-radius: 10px; overflow: hidden; }
.lm-page .k-grid-header,
.lm-page .k-grid-header-wrap,
.lm-page .k-grid .k-header {
background: #f8fafc !important;
background-image: none !important;
border-color: #e6ebf2 !important;
color: #475569 !important;
}
.lm-page .k-grid .k-header > .k-link,
.lm-page .k-grid .k-header {
color: #475569 !important;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .4px;
text-shadow: none !important;
}
.lm-page .k-grid td { border-color: #f1f3f7; color: #334155; font-size: 12.5px; }
.lm-page .k-grid .k-alt { background: #fbfcfe; }
.lm-page .k-grid tbody tr:hover td { background: #eef6ff; }
.lm-page .k-grid tr.k-state-selected td,
.lm-page .k-grid td.k-state-selected { background: #dbeafe !important; color: #0f2a44 !important; }
.lm-page .k-grid-pager { background: #f8fafc; border-color: #e6ebf2; }
.lm-page .k-pager-wrap .k-link.k-state-selected,
.lm-page .k-pager-numbers .k-state-selected { background: #1668b8 !important; border-color: #1668b8 !important; color: #fff !important; border-radius: 7px; }
.lm-page .k-pager-wrap .k-link,
body.lm-body .k-window .k-pager-wrap .k-link {
border-color: #d9e2ec !important;
border-radius: 7px !important;
color: #475569 !important;
background: #fff !important;
}
.lm-page .k-pager-wrap .k-link:hover { border-color: #1668b8 !important; color: #1668b8 !important; background: #eef6ff !important; }
.lm-page .k-pager-wrap .k-link.k-state-disabled { opacity: .45; }
.lm-page .k-pager-info { color: #7a8899; font-size: 12px; }
.lm-page .k-grouping-header { background: #fff !important; color: #7a8899 !important; border-color: #e6ebf2 !important; font-size: 12px; }
.lm-page .k-grid .k-grid-toolbar {
background: #fff !important;
background-image: none !important;
border-color: #e6ebf2 !important;
}
.lm-page .k-grid tbody .k-button {
border-radius: 7px;
padding: 4px 11px;
font-size: 11.5px;
}
.lm-page .k-grid .k-grid-norecords-template,
.lm-page .k-grid .k-grid-norecords > td {
border: 0;
background: transparent;
color: #7a8899;
font-size: 12.5px;
text-align: center;
padding: 24px 12px;
width: auto;
}
/* -----------------------------------------------------------------
Plain tables
----------------------------------------------------------------- */
.lm-page .table { font-size: 12.5px; }
.lm-page .table > thead > tr > td,
.lm-page .table > thead > tr > th {
background: #f8fafc !important;
border-bottom: 1px solid #e6ebf2;
color: #475569;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
white-space: nowrap;
}
.lm-page .table > tbody > tr > td { border-color: #f1f3f7; color: #334155; }
.lm-page .table-hover > tbody > tr:hover { background: #eef6ff; }
/* Legacy flags keep their meaning, lose the saturated fill. */
.lm-page .k-grid tbody tr.redCell > td,
.lm-page .k-grid tbody tr.k-alt.redCell > td { background: #fdecee; color: #6b2b32; font-weight: normal; }
.lm-page .k-grid tbody tr.redCell > td:first-child { box-shadow: inset 3px 0 0 #b91c1c; }
.lm-page .imp-alrt { color: #b45309; font-weight: 700; }
/* -----------------------------------------------------------------
Popups
Kendo moves every window to , so these key on body.lm-body,
which the hero block adds. Unlike .myWindow in Site.css they also
reach the small info / error / success dialogs the partials open.
----------------------------------------------------------------- */
body.lm-body .k-window {
border: none;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(8, 24, 44, .35);
}
body.lm-body .k-window .k-window-titlebar {
padding-top: 12px;
padding-bottom: 12px;
border: none;
color: #fff;
font-size: 15px;
font-weight: 700;
background: linear-gradient(120deg, #0a3564, #1466a8);
}
body.lm-body .k-window .k-window-titlebar .k-window-title { color: #fff; }
body.lm-body .k-window .k-window-titlebar .k-window-action {
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 8px;
background: rgba(255, 255, 255, .12);
opacity: 1;
}
body.lm-body .k-window .k-window-titlebar .k-window-action:hover { background: rgba(255, 255, 255, .24); }
body.lm-body .k-window .k-window-titlebar .k-icon { color: #fff; }
body.lm-body .k-window .k-window-content { background: #f4f7fb; }
body.lm-body .k-window .boxFix *,
body.lm-body .k-window .boxFix *::before,
body.lm-body .k-window .boxFix *::after { color: inherit; -webkit-transform: none; }
body.lm-body .k-window .boxFix { color: #22364e; }
body.lm-body .k-window .panel {
border: 1px solid #e3e9f1;
border-radius: 12px;
background: #fff;
box-shadow: none;
}
body.lm-body .k-window .panel-heading {
background: #f8fafc !important;
background-image: none !important;
border-color: #e6ebf2 !important;
color: #3d4d61 !important;
border-radius: 12px 12px 0 0;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
}
body.lm-body .k-window .control-label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .3px;
text-transform: uppercase;
color: #5b6b7f !important;
}
body.lm-body .k-window .form-control {
border: 1px solid #d5dde8;
border-radius: 8px;
box-shadow: none;
font-size: 13px;
color: #1f2d3d;
}
body.lm-body .k-window .form-control[readonly] { background: #f1f5f9; color: #0f2a44; }
body.lm-body .k-window .form-control:focus { border-color: #1466a8; box-shadow: 0 0 0 3px rgba(20, 102, 168, .12); }
body.lm-body .k-window .btn {
border-radius: 8px;
border: 1px solid transparent;
background-image: none;
font-size: 12.5px;
font-weight: 700;
box-shadow: none;
text-shadow: none;
}
body.lm-body .k-window .btn-default { background: #fff; border-color: #cfd8e3; color: #1f2d3d; }
body.lm-body .k-window .btn-primary { background: linear-gradient(135deg, #1c5eaa, #0e73a0); color: #fff; }
body.lm-body .k-window .btn-success { background: linear-gradient(135deg, #15803d, #22a355); color: #fff; }
body.lm-body .k-window .btn-danger { background: linear-gradient(135deg, #c0332b, #a4262c); color: #fff; }
body.lm-body .k-window .k-grid { border: 1px solid #e6ebf2; border-radius: 10px; overflow: hidden; }
body.lm-body .k-window .k-grid-header,
body.lm-body .k-window .k-grid .k-header {
background: #f8fafc !important;
background-image: none !important;
border-color: #e6ebf2 !important;
color: #475569 !important;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
}
body.lm-body .k-window .k-grid .k-header > .k-link { color: #475569 !important; }
@media (max-width: 767px) {
.lm-page .lm-hero { padding: 15px 17px; gap: 13px; }
.lm-page .lm-hero-icon { width: 46px; height: 46px; font-size: 18px; }
.lm-page .lm-hero h1 { font-size: 17px; }
}
/* -----------------------------------------------------------------
Wizard step strip
The provider, assessor and grant wizards draw their steps as a table
of .circleBase discs (Site.css: 45px grey, the current one olive,
a
pushing each number off-centre). Same markup, a compact
stepper: numbered discs, the current step in the system blue and
underlined, the others muted.
----------------------------------------------------------------- */
.lm-page table:has(.circleBase) {
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 12px;
border-collapse: separate;
box-shadow: 0 1px 2px rgba(16, 34, 56, .04);
margin-bottom: 12px;
}
.lm-page table:has(.circleBase) td { padding: 10px 6px !important; vertical-align: middle; border: 0; }
.lm-page .circleBase {
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center;
justify-content: center;
float: none !important;
margin: 0 auto;
font-size: 12px;
font-weight: 800;
background: #eef1f5 !important;
color: #7a8899 !important;
}
.lm-page .circleBase br { display: none; }
.lm-page .circleBase span { color: inherit !important; padding: 0 !important; }
.lm-page .circleBase.type2 { background: #1668b8 !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(22, 104, 184, .14); }
.lm-page .stepLeft,
.lm-page .stepRight { border-bottom: 2px solid #1668b8 !important; }
.lm-page table:has(.circleBase) b {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
line-height: 1.25;
color: #5b6b7f !important;
}
.lm-page table:has(.circleBase) b .fa { font-size: 15px !important; padding: 0 !important; color: #94a3b8; }
.lm-page .stepRight b { color: #14304f !important; font-weight: 800; }
.lm-page .stepRight b .fa { color: #1668b8; }
/* Legacy partials open with their own "Module > Screen" breadcrumb line as
the first child of the tab's .boxFix; the hero already says where you are. */
.lm-page .boxFix > h5:first-child { display: none; }