/* =====================================================================
ImmiSys – Modern theme layer (ADDITIVE / REVERSIBLE)
---------------------------------------------------------------------
Loaded LAST in so it overrides Bootstrap 3 + Site.css without
editing them. A single fixed Immisys-red theme (no runtime switcher).
Scope is intentionally limited to "chrome" (navbar, footer, buttons,
links, accents, toolbars) so page content / tables are never recoloured.
Remove the in _Layout.cshtml to fully revert.
===================================================================== */
/* ---- Theme tokens -------------------------------------------------- */
:root {
--im-accent: #d9230f; /* Immisys brand red */
--im-accent-hover: #b21d0c;
--im-accent-soft: rgba(217, 35, 15, .10);
--im-accent-contrast: #ffffff;
--im-link: #c41f0d;
--im-navbar-bg: #ffffff;
--im-navbar-text: #2f3640;
--im-navbar-muted: #6b7280;
--im-footer-bg: #f7f7f9;
--im-border: #e6e8eb;
}
/* ---- Global polish (theme-agnostic) ------------------------------- */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--im-link);
transition: color .12s ease-in-out;
}
/* Suppress the default black focus outline on mouse click, but keep it for
keyboard navigation (accessibility) via :focus-visible. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
}
/* DevExtreme top-nav menu items (root + submenu popups) */
.dx-menu-item,
.dx-menu-item .dx-menu-item-content,
.dx-menu-item.dx-state-focused {
outline: none !important;
}
/* ---- Navbar ------------------------------------------------------- */
.navbar-default {
background-color: var(--im-navbar-bg) !important;
background-image: none !important;
border: none !important;
border-bottom: 1px solid var(--im-border) !important;
box-shadow: 0 2px 10px rgba(15, 23, 42, .06) !important;
margin-bottom: 0;
}
.navbar-default .navbar-brand {
display: inline-flex;
align-items: center;
}
.navbar-default .navbar-nav > li > a {
color: var(--im-navbar-text) !important;
font-weight: 500;
transition: color .12s ease-in-out, background-color .12s ease-in-out;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: var(--im-accent) !important;
background-color: var(--im-accent-soft) !important;
}
.navbar-default .navbar-toggle {
border-color: var(--im-border);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: var(--im-accent-soft);
}
.navbar-default .navbar-toggle .icon-bar {
background-color: var(--im-accent);
}
/* DevExtreme top menu – tie hover/selected to the active accent */
.dx-menu-base .dx-menu-item.dx-state-hover,
.dx-menu-base .dx-menu-item.dx-menu-item-expanded {
background-color: var(--im-accent-soft) !important;
}
.dx-menu-base .dx-menu-item.dx-state-hover .dx-menu-item-text,
.dx-menu-base .dx-menu-item.dx-menu-item-expanded .dx-menu-item-text {
color: var(--im-accent) !important;
}
/* ---- Buttons & links accent --------------------------------------- */
.btn-primary {
background-color: var(--im-accent);
border-color: var(--im-accent);
color: var(--im-accent-contrast);
transition: background-color .12s ease-in-out, border-color .12s ease-in-out;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-color: var(--im-accent-hover);
border-color: var(--im-accent-hover);
color: var(--im-accent-contrast);
}
.btn-link {
color: var(--im-link);
}
.btn-link:hover,
.btn-link:focus {
color: var(--im-accent-hover);
}
/* Pagination / nav-pills pick up the accent too */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
background-color: var(--im-accent);
border-color: var(--im-accent);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background-color: var(--im-accent);
}
/* ---- Footer ------------------------------------------------------- */
footer {
background-color: var(--im-footer-bg);
border-top: 1px solid var(--im-border);
margin-top: 24px;
}
footer .copyright {
padding: 14px 0;
color: var(--im-navbar-muted);
font-size: 12px;
}
footer .copyright a {
color: var(--im-navbar-muted);
}
footer .copyright a:hover {
color: var(--im-accent);
}
/* =====================================================================
v2 – Background, content surface, modern entity toolbars, icons
===================================================================== */
/* Extra theme tokens */
:root {
--im-app-bg: #eef1f6;
--im-surface: #ffffff;
}
/* ---- App background (replaces the flat white sheet) --------------- */
body {
background-color: var(--im-app-bg);
}
/* ---- Main content as an elevated "page card" --------------------- */
/* overflow is intentionally left visible so absolutely-positioned
toolbar buttons inside views are never clipped. */
.content > section.clearfix {
background: var(--im-surface);
border: 1px solid var(--im-border);
border-radius: 10px;
padding: 20px 22px;
margin-top: 14px;
box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
/* Panels sit flush inside the page card instead of stacking shadows */
.panel {
border-radius: 8px;
border-color: var(--im-border);
box-shadow: none;
}
.panel-default > .panel-heading {
background-color: #f7f8fa;
border-color: var(--im-border);
}
/* ---- Modern entity toolbar (client / case / enrolment /
opportunity / employer / institution all share .cd-nav) ----- */
/* Pill tabs: each tab is a self-contained rounded pill with a gap between
them. This wraps to multiple rows cleanly (no broken "joined strip"
look) and the content can't drift vertically. overflow stays visible
so the Profile hover-submenu is never clipped. */
.cd-nav .side-nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
align-content: flex-start;
gap: 6px;
margin-bottom: 14px;
}
/* The Profile tab is wrapped in a for its hover menu — make it a
stretching flex item so its inner fills the full pill height. */
.cd-nav .side-nav > span {
display: inline-flex;
align-items: stretch;
}
.cd-nav .list-group-items {
display: inline-flex;
align-items: center;
margin: 0;
padding: 8px 14px;
white-space: nowrap;
background: var(--im-surface);
border: 1px solid var(--im-border);
border-radius: 7px;
color: var(--im-navbar-text);
transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.cd-nav .side-nav > span > .list-group-items {
width: 100%;
}
.cd-nav .list-group-items h5,
.cd-nav .list-group-items .list-group-item-heading {
margin: 0;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
}
.cd-nav .list-group-items i {
margin-right: 6px;
opacity: .9;
}
.cd-nav .list-group-items:hover {
background: var(--im-accent-soft);
color: var(--im-accent);
}
.cd-nav .list-group-items:hover h5,
.cd-nav .list-group-items:hover .list-group-item-heading {
color: var(--im-accent);
}
.cd-nav .list-group-items.activemenu,
.cd-nav .activemenu {
background: var(--im-accent) !important;
border-color: var(--im-accent) !important;
color: #fff !important;
}
.cd-nav .activemenu h5,
.cd-nav .activemenu .list-group-item-heading,
.cd-nav .activemenu i {
color: #fff !important;
}
.cd-nav .list-group-items.disabled {
opacity: .5;
}
/* ---- Sticky footer ----------------------------------------------
Flex column on .wrapper so the footer is pinned to the bottom of the
viewport on short pages, and pushed down naturally on long ones.
(Fixed/hidden modals inside .wrapper are out of flow, so unaffected.) */
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Force full width: .container-fluid has margin:auto, which in a flex
column would otherwise center (shrink) the header and body. */
.wrapper > header,
.wrapper > #body,
.wrapper > footer {
width: 100%;
}
.wrapper > #body {
flex: 1 0 auto; /* grow to fill remaining space, never shrink */
}
.wrapper > footer {
flex-shrink: 0;
margin-top: 24px;
}
/* ---- Icon modernisation -----------------------------------------
Render the legacy FontAwesome-4 outline icons used in the entity
toolbars as filled FA6 "solid" glyphs (scoped to .cd-nav so nothing
elsewhere – checkboxes, status dots – is affected). */
.cd-nav .list-group-items i.fa {
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
/* =====================================================================
v3 – Button polish (shape + depth + interaction, colours unchanged)
Semantic colours are kept: success = green, danger/brand = red,
warning = orange. Only shape, shadow, hover/active and focus change.
===================================================================== */
.btn {
border-radius: 6px;
font-weight: 500;
box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
transition: background-color .14s ease, border-color .14s ease,
box-shadow .14s ease;
}
.btn:hover {
box-shadow: 0 3px 8px rgba(15, 23, 42, .15);
}
.btn:active,
.btn.active {
box-shadow: inset 0 1px 3px rgba(15, 23, 42, .18);
}
/* Accessible focus ring (replaces the default browser outline) */
.btn:focus,
.btn.focus {
outline: none;
box-shadow: 0 0 0 3px rgba(15, 23, 42, .14);
}
/* Disabled buttons stay flat */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
box-shadow: none;
}
/* Icon-only action buttons in TABLES (edit / trash): flex-center the
content so the glyph sits dead-centre on both axes regardless of the
button's padding, line-height or the glyphicon's relative offset.
Scoped to `table` so segmented button groups elsewhere aren't affected. */
table .btn-xs:not(.btn-block),
table .btn-sm:not(.btn-block) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
line-height: 1;
}
table .btn-xs > i.fa,
table .btn-xs > .glyphicon,
table .btn-sm > i.fa,
table .btn-sm > .glyphicon {
margin: 0;
top: 0; /* cancel the glyphicon's position:relative nudge */
line-height: 1;
vertical-align: middle;
}
/* Modernise the edit / delete glyphs inside buttons (covers both the
FontAwesome and Bootstrap-glyphicon variants used across the app). */
.btn .fa-pencil::before,
.btn .fa-pencil-square-o::before,
.btn .glyphicon-pencil::before,
.btn .glyphicon-edit::before {
content: "\f044"; /* pen-to-square */
}
.btn .fa-trash-o::before,
.btn .glyphicon-trash::before {
content: "\f2ed"; /* trash-can */
}
.btn .fa-pencil,
.btn .fa-pencil-square-o,
.btn .fa-edit,
.btn .fa-trash,
.btn .fa-trash-o,
.btn .glyphicon-pencil,
.btn .glyphicon-edit,
.btn .glyphicon-trash {
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
/* Keep joined button groups visually seamless (don't let the radius/
shadow above break the segmented look) */
.btn-group > .btn,
.btn-group-vertical > .btn {
box-shadow: none;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
z-index: 2;
}
.btn-group {
box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
border-radius: 6px;
}
/* =====================================================================
v4 – Modal / popup polish (data-action dialogs + Bootstrap modals)
No overflow:hidden on .modal-content so inner dropdowns / pickers are
never clipped; corners are rounded per-section instead.
===================================================================== */
.modal-content {
border: none;
border-radius: 12px;
box-shadow: 0 18px 50px rgba(15, 23, 42, .28);
}
.modal-backdrop.in {
opacity: .45;
}
/* Soft, light header (title left, close right). The bold red fill was too
loud — use a subtle neutral header with the icon as the only accent. */
.modal-header {
display: flex;
align-items: center;
background-color: #f7f8fa;
border-bottom: 1px solid var(--im-border);
padding: 14px 20px;
border-radius: 12px 12px 0 0;
}
.modal-header .modal-title {
order: 1;
display: flex;
align-items: center;
gap: 9px;
color: var(--im-navbar-text);
font-weight: 600;
font-size: 17px;
}
.modal-header .modal-title i.im-modal-icon {
font-size: 15px;
color: var(--im-navbar-text); /* match the title – no loud colour */
opacity: .65;
}
.modal-header .close {
order: 2;
float: none;
margin: 0 0 0 auto;
color: var(--im-navbar-muted);
opacity: .75;
text-shadow: none;
font-size: 24px;
line-height: 1;
transition: opacity .12s ease, color .12s ease;
}
.modal-header .close:hover,
.modal-header .close:focus {
color: var(--im-accent);
opacity: 1;
}
.modal-body {
padding: 20px;
}
.modal-body:last-child {
border-radius: 0 0 12px 12px;
}
.modal-footer {
border-top: 1px solid var(--im-border);
background: #fafbfc;
padding: 14px 20px;
border-radius: 0 0 12px 12px;
}
/* Replace the loud "Loading..." box with a clean, neutral spinner. */
#modal_loader .alert,
.Upgrademodal-body > .alert-success {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
border: none;
background: transparent;
box-shadow: none;
padding: 34px 20px;
color: var(--im-navbar-muted);
font-weight: 500;
}
#modal_loader .alert:before,
.Upgrademodal-body > .alert-success:before {
content: "";
width: 34px;
height: 34px;
border: 3px solid var(--im-border);
border-top-color: var(--im-navbar-muted);
border-radius: 50%;
animation: im-spin .8s linear infinite;
}
@keyframes im-spin {
to { transform: rotate(360deg); }
}
/* =====================================================================
v5 – Login screen
===================================================================== */
/* Drop the full-page card on the login screen so the login card sits on
the plain background (no awkward card-in-card / empty white area). */
.content > section.clearfix:has(> .login-box) {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
/* Auth screens (login / forgot password / client portal): hide the app
navbar so the logo isn't duplicated — the login card carries the brand —
and centre the card in the viewport. Only affects pages with a login box. */
.wrapper:has(.login-box) > header {
display: none;
}
.wrapper:has(.login-box) > #body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.login-box {
max-width: 420px;
margin: 48px auto;
padding: 34px 32px 28px;
background: var(--im-surface);
border: 1px solid var(--im-border);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(15, 23, 42, .10);
}
.login-box .login-logo {
text-align: center;
margin-bottom: 14px;
}
.login-box .login-logo img {
height: 52px;
width: auto;
}
.login-box .title h1 {
text-align: center;
margin: 0 0 24px;
font-size: 22px;
font-weight: 600;
color: var(--im-navbar-text);
}
/* Strip the old grey "well" look – the .login-box is the card now */
.login-box .login-form.well {
margin: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
.login-box .form-group {
margin: 0 0 16px;
}
.login-box .control-label {
display: block;
margin-bottom: 6px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: var(--im-navbar-muted);
}
.login-box .form-control {
height: 42px;
border-radius: 8px;
border-color: var(--im-border);
box-shadow: none;
}
.login-box .form-control:focus {
border-color: var(--im-accent);
box-shadow: 0 0 0 3px var(--im-accent-soft);
}
.login-box .input-group {
width: 100%;
}
/* Checkbox + "Forgot password" on one tidy row */
.login-box .login-options {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 18px;
}
.login-box .login-remember label {
margin: 0 0 0 5px;
font-weight: 400;
color: var(--im-navbar-text);
}
.login-box .login-forgot {
font-weight: 500;
}
/* Full-width action buttons (Login / Send / Signup) */
.login-box .login-submit {
display: block;
width: 100%;
height: 44px;
line-height: 30px;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
}
.login-box .login-submit + .login-submit {
margin-top: 10px;
}
/* Small muted helper text under the title (e.g. Forgot password) */
.login-box .login-subtitle {
margin: -12px 0 20px;
text-align: center;
color: var(--im-navbar-muted);
font-size: 13px;
}
.login-box .login-back {
margin-top: 16px;
text-align: center;
font-size: 13px;
}